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

   Farben, Schriften, Rahmen, Schatten, Radien und Tippfläche kommen aus den Eigenschaften in app.css (:root) – hier steht
   keine Farbe. Der Look ist der von kü:gerl: Karten in Papier mit Tintenrahmen und hartem Schatten, Überschriften in Archivo
   Black, Kleinbeschriftungen in Mono-Großbuchstaben.
   Ruhig: nichts blinkt, nichts springt. Die einzige Bewegung ist ein kurzes Einblenden beim Aufklappen (und auch das
   nicht, wenn das Gerät „weniger Bewegung“ will). Am Handy einspaltig (unter 40rem), Tippflächen mindestens 44 px, keine
   waagrechte Seiten-Scrollleiste: Nur die Matrix der Spuren scrollt, und zwar in ihrem eigenen Rahmen.

   Bedeutung der Farben wie in app.css: orange = Auswahl (gedrückter Knopf, geöffneter Aufklapper) und Balken, Ampel getrennt
   davon und nie ohne Wort und Form. Grau (ausgeschlossene Angebote) entsteht durch Durchsichtigkeit, nicht durch eine neue Farbe.
   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 1.75rem; }
.abschnitt-abstand { margin-top: 1.75rem; }
h3 { margin: 0; font-family: var(--display); font-size: 1.05rem; font-weight: 400; letter-spacing: -.005em; line-height: 1.12; text-transform: uppercase; }
h4 { margin: 0; color: var(--grau); font: 600 .72rem/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;
}

/* Link „In Notion öffnen“ */
.notion-link {
  display: inline-flex; align-items: center; min-height: var(--tipp); font-size: .85rem; font-weight: 600;
}

/* Kleine Marke (Status 2027, Typ eines Belegs): Pille mit Tintenrand in Mono-Großbuchstaben */
.pille {
  display: inline-block; padding: .05rem .65rem; border: var(--rahmen); border-radius: var(--r-pill); background: var(--papier);
  font: 600 .7rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}

/* Umschalter: Szenario (drei Knöpfe in einer Reihe, auch am Handy) und Filter (.breit, am Handy zwei Spalten). Genau ein
   Knopf ist gedrückt: Orange mit Tintenrand und fett, auf größeren Bildschirmen zusätzlich mit Haken. */
.umschalter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .25rem; width: 100%; max-width: 30rem;
  margin: 0 0 1rem; padding: .25rem; border: var(--rahmen); border-radius: calc(var(--tipp) / 2 + .25rem + 2px);
  background: var(--papier); box-shadow: var(--schatten-s);
}
.umschalter.breit { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); max-width: 48rem; }
.umschalter-knopf {
  min-height: var(--tipp); padding: .25rem .5rem; border: 0; 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); box-shadow: inset 0 0 0 2px var(--tinte); font-weight: 600; }

/* 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: .9rem; margin: .5rem 0 .35rem; border: var(--rahmen); 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. Das Feld blendet kurz ein. */
.klappe-feld { margin-top: .75rem; }
.klappe-feld:not([hidden]) { animation: auf .15s ease-out; }
@keyframes auf { from { opacity: 0; } to { opacity: 1; } }
.klappe-titel { margin: 0 0 .25rem; }
.klappe-reihe { margin: .75rem 0; }
/* Plus/Minus im Kreis wie bei den Fragen auf kuegerl.de: zu = Zeitung, offen = Orange */
.klappe::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-left: auto;
  border: var(--rahmen); 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 (Rohstoffe) – 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 1rem; cursor: pointer; }
.schalter input {
  -webkit-appearance: none; appearance: none; flex: none; display: grid; place-content: center;
  width: 1.5rem; height: 1.5rem; 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); }

/* ── Werkbank ────────────────────────────────────────────────────────────── */
.karten.vier { grid-template-columns: minmax(0, 1fr); }
.karte-zahl-text { font-size: 1.35rem; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.karte-zusatz + .karte-zusatz { margin-top: .25rem; }

.sorten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.sorte-titel { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem; margin: 0 0 .25rem; overflow-wrap: anywhere; }
/* Kürzel der Sorte (MV, EM, ML): dunkles Etikett wie „Hülle“ auf den Sortenkarten von kuegerl.de */
.sorte-kurz { padding: .12rem .5rem; border-radius: .3rem; background: var(--tinte); color: var(--papier); font: 600 .7rem/1.4 var(--mono); letter-spacing: .14em; }
.karte-unvollstaendig { margin: .25rem 0 .5rem; font-size: 1.05rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.sorte .knopf { margin-top: .5rem; }
.sorte-zeile { margin: .5rem 0 0; font-size: .9rem; }

.posten { margin: 0; padding: 0; list-style: none; }
.posten-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name eur" "angebot g";
  gap: 0 .75rem; padding: .45rem 0; border-top: 1px solid var(--zeitung-d);
}
.posten-name { grid-area: name; font-weight: 500; overflow-wrap: anywhere; }
.posten-angebot { grid-area: angebot; min-width: 0; color: var(--grau); font-size: .85rem; overflow-wrap: anywhere; }
.posten-g { grid-area: g; justify-self: end; color: var(--grau); font-size: .85rem; }
.posten-eur { grid-area: eur; justify-self: end; font-weight: 500; }

.aufgaben-gruppe { margin: 0 0 1.25rem; }
.aufgaben-titel { margin: 0 0 .6rem; color: var(--grau); font: 600 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.aufgaben { display: grid; gap: .6rem; padding: 0; list-style: none; }
.aufgabe {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem;
  padding: .35rem 1rem; border: var(--rahmen); border-radius: var(--r-m); background: var(--papier); box-shadow: var(--schatten-xs);
}
.aufgabe-text { flex: 1 1 16rem; min-width: 0; margin: 0; padding: .35rem 0; overflow-wrap: anywhere; }

/* ── Rohstoffe ───────────────────────────────────────────────────────────── */
.rohstoffe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
/* Die Überschrift ist nur der Behälter des Knopfs; der Name darin steht in Archivo Black (.rohstoff-name). Am Handy steht
   die Zahl der Angebote unter dem Namen und das Plus rechts daneben – so bricht ein langer Name nie mitten im Wort um. */
.rohstoff-titel { margin: 0; font-size: 1rem; letter-spacing: normal; text-transform: none; }
.rohstoff-knopf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; width: 100%; min-height: var(--tipp); padding: .25rem 0;
  border: 0; background: transparent; color: var(--tinte); font-family: var(--schrift); font-size: 1rem; font-weight: 400; line-height: 1.3; text-align: left; cursor: pointer;
}
.rohstoff-knopf::after { grid-column: 2; grid-row: 1 / span 2; }
.rohstoff-name { grid-column: 1; font-family: var(--display); font-size: 1.05rem; letter-spacing: -.005em; line-height: 1.12; overflow-wrap: anywhere; text-transform: uppercase; }
.rohstoff-knopf .klein { grid-column: 1; margin-top: .1rem; }
.rohstoff-wahl { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .1rem 0 .35rem; font-size: .9rem; }
.rohstoff-wahl-paar { display: flex; gap: .4rem; min-width: 0; }
.rohstoff-wahl dt { flex: none; color: var(--grau); font-weight: 500; }
.rohstoff-wahl dd { min-width: 0; overflow-wrap: anywhere; }
.rohstoff-anteil { margin: 0; }

.angebote { display: grid; gap: .75rem; padding: 0; list-style: none; }
.angebot { padding: .85rem 1rem; border: 2px solid var(--zeitung-d); border-radius: var(--r-m); background: var(--zeitung); }
.angebot-grau { opacity: .7; }
.angebot-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.angebot-name { min-width: 0; overflow-wrap: anywhere; }
.angebot-zeile { margin: .15rem 0 0; overflow-wrap: anywhere; }
.angebot-daten { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .3rem .75rem; margin: .6rem 0 .25rem; font-size: .92rem; }
.angebot-daten dt { color: var(--grau); font-weight: 500; }
.angebot-daten dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; min-width: 0; overflow-wrap: anywhere; }
.preis { display: flex; flex-direction: column; min-width: 0; }
.angebot-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
/* Die Notiz ist ein Zettel: Papier mit gestricheltem Tintenrand */
.notiz-text { margin: .5rem 0 0; padding: .6rem .8rem; border: 2px dashed var(--tinte); border-radius: var(--r-s); background: var(--papier); font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Spuren ──────────────────────────────────────────────────────────────── */
.legende { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0 0 .75rem; padding: 0; list-style: none; font-size: .85rem; }
.legende li { display: flex; align-items: center; gap: .4rem; }
.legende-zeichen { display: inline-block; min-width: 1.75rem; padding: 0 .3rem; border-radius: 6px; text-align: center; }

/* Nur dieser Rahmen scrollt waagrecht; die erste Spalte (Rohstoff) bleibt beim Scrollen stehen.
   position: relative ist Pflicht: Die Texte für Vorleser in den Zellen (.nur-leser) sind absolut positioniert. Ohne einen
   positionierten Rahmen gehören sie nicht zu ihm, ragen über seinen Rand und machen die ganze Seite waagrecht scrollbar
   (am Handy gemessen: 659 statt 375 px). */
.matrix-rahmen { position: relative; max-width: 100%; margin: 0 0 1.5rem; overflow-x: auto; border: var(--rahmen); border-radius: var(--r-m); background: var(--papier); box-shadow: var(--schatten-s); }
.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.matrix th, .matrix td { padding: .45rem .3rem; border-bottom: 1px solid var(--zeitung-d); text-align: center; }
.matrix thead th { background: var(--zeitung); border-bottom: 2px solid var(--tinte); }
.matrix tbody tr:last-child > * { border-bottom: 0; }
.matrix .matrix-ecke, .matrix .matrix-zeile { position: sticky; left: 0; min-width: 8.5rem; max-width: 10rem; padding-left: .75rem; border-right: 2px solid var(--zeitung-d); background: var(--papier); text-align: left; }
.matrix .matrix-ecke { z-index: 2; vertical-align: bottom; font-size: .8rem; font-weight: 500; color: var(--grau); background: var(--zeitung); }
.matrix .matrix-zeile { z-index: 1; font-weight: 400; }
.matrix-name { display: block; font-weight: 600; hyphens: auto; overflow-wrap: anywhere; }
.matrix-angebot { display: block; color: var(--grau); font-size: .78rem; hyphens: auto; overflow-wrap: anywhere; }
.matrix-kopf { height: 7.5rem; vertical-align: bottom; font-size: .85rem; font-weight: 500; }
.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: 2.4rem; }
/* 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; }
.zelle-spur { font-weight: 600; }
.zelle-frei, .zelle-unbekannt { color: var(--grau); }

.saetze { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.satz-text { margin: .25rem 0 .5rem; font-size: 1.05rem; }
.etikett-kasten { margin-top: 1.5rem; }
.etikett-text { margin: .25rem 0 .75rem; overflow-wrap: anywhere; }
.etikett-urteil { margin: 0 0 .35rem; font-weight: 600; }

/* ── Belege ──────────────────────────────────────────────────────────────── */
.fortschritt .karte-zahl { margin-bottom: 0; }
.beleg-angebote, .belege { display: grid; gap: .85rem; padding: 0; list-style: none; }
.beleg-angebot, .beleg { padding: .85rem 1rem; border: var(--rahmen); border-radius: var(--r-m); background: var(--papier); box-shadow: var(--schatten-xs); }
.beleg-angebot-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .25rem 1rem; }
.beleg-angebot-name { display: grid; flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.pflicht { margin: .5rem 0 0; padding: 0; list-style: none; }
.pflicht-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .75rem; padding: .25rem 0; border-top: 1px solid var(--zeitung-d); }
.pflicht-typ { min-width: 9rem; font-weight: 500; }
.pflicht-zeile .leise { font-size: .9rem; }
.beleg-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.beleg-name { min-width: 0; overflow-wrap: anywhere; }
.beleg-status { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .75rem; margin: .25rem 0 0; }
.beleg-daten { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .25rem .75rem; margin: .5rem 0 0; font-size: .92rem; }
.beleg-daten dt { color: var(--grau); font-weight: 500; }
.beleg-daten dd { min-width: 0; overflow-wrap: anywhere; }
.beleg-liste { margin: 0 0 .5rem; }

/* ── Größere Bildschirme ─────────────────────────────────────────────────── */
@media (min-width: 40rem) {
  .umschalter-knopf[aria-pressed="true"]::before { content: "\2713\00a0"; }
  .karten.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sorten { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .matrix .matrix-ecke, .matrix .matrix-zeile { min-width: 11rem; max-width: 14rem; }
  .angebot-daten { grid-template-columns: 8rem minmax(0, 1fr); }
  /* breit genug: Name, Zahl der Angebote und Plus in einer Zeile */
  .rohstoff-knopf { display: flex; gap: .75rem; }
}
@media (min-width: 62rem) {
  .karten.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sorten, .saetze { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .klappe-feld:not([hidden]) { animation: none; }
}