/* Werkstatt – Gestaltung der Ansicht Rezeptur (Ergänzung zu app.css und ansichten.css; der Fahrplan steht seit Auftrag U in ansichten.css)

   Farben, Schriften, Rahmen, Schatten, Radien, Tippfläche und die Maße der Dichte kommen aus den Eigenschaften in app.css (:root) – hier
   steht keine Farbe. Auch die Zeichnung ohne Foto (Hülle, Füllung, Krümel – der Rückfall für eine Sorte, zu der es kein Foto gibt) färbt sich
   über Eigenschaften: --huelle und --fuellung wie im Symbol. Über dem Foto liegen
   nur durchsichtige Flächen; gewählt wird mit einer orangen Linie.
   Ruhig: nichts blinkt, nichts springt, keine Übergänge, keine Animation – auch in der Zeichnung nicht. Am Handy einspaltig (unter
   56rem), Tippflächen mindestens 44 px, keine waagrechte Seiten-Scrollleiste.

   Bedeutung der Farben wie in app.css: orange = Auswahl (die gewählte Zelle der Matrix, die gewählte Schicht, die gewählte Sorte, der
   Regler, ein geändertes Angebot). Vorläufiges ist nie bunt, sondern gestrichelt: der Rand sagt „noch nicht verbindlich“, das Wort
   steht immer dabei. Der harte Schatten gehört dem Gewählten.
   Keine Inline-Stile im JS (die CSP lässt style-src nur 'self' zu): Alles, was gestaltet wird, steht hier. */

/* ── Abschnitte ──────────────────────────────────────────────────────────── */
.abschnitt-kopf.umbruch { flex-wrap: wrap; row-gap: .35rem; }
.rezeptur-unten > section, .matrix-abschnitt, .sorten-spalten-bereich > section, .detail-bereich > section { margin: 0 0 var(--abstand-l); }

/* ── Die Kostenmatrix ────────────────────────────────────────────────────── */
.kostenmatrix tbody tr { height: calc(var(--zeile) + 4px); }
.matrix-sorte-kopf { position: sticky; left: 0; z-index: 1; background: var(--papier); font-weight: 500; }
.matrix-sorte:hover > .matrix-sorte-kopf { background: var(--zeitung); }
/* Am Handy bleiben von der Sorte Foto und Kürzel, damit neben der festen Spalte noch ein Wert zu sehen ist; der Name bleibt für Vorleser da
   (wie .nur-leser). Ab 40rem steht er in der Schrift der Tabelle (nicht als Überschrift in Halbfett), so passen Foto, Name und Kürzel in eine Zeile. */
.matrix-sorte-kopf .sorte-name {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0;
}
.matrix-zelle { padding: 0; }
.kostenmatrix td.matrix-zelle { text-align: right; }
.kostenmatrix td.matrix-ist { padding: var(--zelle-y) var(--zelle-x); text-align: right; }
/* Die Zelle ist ein Knopf (Wert und, wo es so ist, „vorläufig“). Gewählt trägt sie Orange, den Tintenrand und den harten Schatten. */
.matrix-knopf {
  display: flex; align-items: center; justify-content: flex-end; gap: .4rem; width: 100%; min-height: calc(var(--zeile) + 3px); padding: 0 var(--zelle-x);
  border: 1px solid transparent; background: transparent; color: var(--tinte); font: inherit; text-align: right; cursor: pointer;
}
.matrix-knopf:hover { background: var(--zeitung); }
.matrix-knopf[aria-pressed="true"] { border-color: var(--tinte); background: var(--orange); box-shadow: var(--schatten-xs); font-weight: 600; }
.matrix-wert { min-width: 0; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matrix-hinweis { color: var(--grau); font: 600 .6rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.matrix-knopf[aria-pressed="true"] .matrix-hinweis, .matrix-knopf[aria-pressed="true"] .leise { color: var(--tinte); }

/* ── Die drei Sorten nebeneinander ───────────────────────────────────────── */
.sorten-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand); }
.sorten-spalte { min-width: 0; padding: var(--abstand-s) var(--abstand); border: 1px solid var(--tinte); border-radius: var(--r-s); background: var(--papier); }
.sorten-spalte.gewaehlt { box-shadow: var(--schatten-xs); }
.spalte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem var(--abstand); margin: 0 0 var(--abstand-s); }
.sorte-wahl {
  display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: var(--tipp); padding: 0 .4rem 0 0; border: 1px solid transparent; border-radius: var(--r-pill);
  background: transparent; color: var(--tinte); font: inherit; text-align: left; cursor: pointer;
}
.sorte-wahl:hover { background: var(--zeitung); }
.sorte-wahl[aria-pressed="true"] { border-color: var(--tinte); background: var(--orange); }
.sorte-wahl .sorten-bild { margin-left: .25rem; }
.sorte-name { font-family: var(--schrift); font-size: var(--h3); font-weight: 600; letter-spacing: -.005em; line-height: 1.2; overflow-wrap: anywhere; }
.spalte-tabelle { margin: 0; }
.spalte-tabelle th, .spalte-tabelle td { white-space: normal; }
.spalte-tabelle tbody tr { height: calc(var(--zeile) - 4px); }
.spalte-tabelle th[scope="row"] { font-weight: 400; overflow-wrap: anywhere; }
.spalte-tabelle .spalte-soll th, .spalte-tabelle .spalte-soll td { font-weight: 600; border-top: 1px solid var(--tinte); }
/* die Zahl in der Spalte bricht nicht um und lässt dem Namen davor den Rest */
.spalte-wert { min-width: 5.5rem; }
.spalte-unterkopf th { height: auto; padding-top: .35rem; padding-bottom: .1rem; color: var(--grau); font: 600 .62rem/1.4 var(--mono); letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.spalte-schilder { display: flex; flex-wrap: wrap; gap: .25rem var(--abstand); margin: var(--abstand-s) 0 0; font-size: var(--text-klein); }
.schild { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .35rem; }
/* was die Sorte enthält, steht in einer eigenen Zeile – es ist der längste Satz */
.schild-allergene { flex: 1 1 100%; }
.spalte-luecken { margin-top: var(--abstand-s); }
.luecken-block { margin-top: var(--abstand-s); }
/* Eine Lücke: ein Zettel mit gestricheltem Rand (hier fehlt etwas, und die Zeile sagt, was) */
.fehlt-zettel { margin: var(--abstand-s) 0 0; padding: var(--abstand-s) var(--abstand); border: 1px dashed var(--tinte); border-radius: var(--r-s); background: var(--papier); font-size: var(--text-klein); overflow-wrap: anywhere; }
.fehlt-liste { display: grid; gap: var(--abstand-s); margin: 0 0 var(--abstand-s); padding: 0; list-style: none; }
.fehlt-liste .fehlt-zettel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--abstand); margin: 0; }
.ww-grund { margin: var(--abstand-s) 0 0; }

/* ── Die gewählte Sorte: Foto und Zutaten ────────────────────────────────── */
.zutaten-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand); align-items: start; }
.anschnitt { min-width: 0; margin: 0; }
.anschnitt-text { margin: var(--abstand-s) 0 0; text-align: center; }
.aufschnitt-name { overflow-wrap: anywhere; }
.anschnitt-rahmen { position: relative; width: 100%; max-width: 20rem; margin: 0 auto; }
/* die Zeichnung als Rückfall darf etwas größer sein als das Foto (sie hat keinen Rand aus Teig) */
.anschnitt-zeichnung { max-width: 22rem; }
.anschnitt-foto { display: block; width: 100%; height: auto; }
.anschnitt-flaechen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.aufschnitt-bild { display: block; width: 100%; max-width: 22rem; height: auto; margin: 0 auto; }
/* Die Flächen: durchsichtig, aber antippbar; mit der Maus zeigt ein Hauch Orange, was sich wählen lässt */
.schicht { cursor: pointer; }
.schicht:focus { outline: none; }
.schicht-flaeche { fill: transparent; stroke: none; fill-rule: evenodd; }
/* die Fläche, die man wirklich trifft: bei der Hülle das ganze Foto außer der Füllung (der Ring ist an der dünnsten Stelle nur etwa 17 px breit) */
.schicht-treffer { fill: transparent; stroke: none; fill-rule: evenodd; }
.anschnitt-flaechen .schicht:hover .schicht-flaeche { fill: var(--orange); fill-opacity: .22; }
/* gewählt: oranger Rand außen herum; Fokus per Tastatur: gestrichelter Tintenrand außen herum */
.schicht-wahl, .schicht-fokus { display: none; fill: none; stroke-linejoin: round; pointer-events: none; }
.schicht-wahl { stroke: var(--orange); stroke-width: 4; }
.schicht-fokus { stroke: var(--tinte); stroke-width: 2.5; stroke-dasharray: 5 4; }
.schicht[aria-pressed="true"] .schicht-wahl { display: inline; }
.schicht:focus-visible .schicht-fokus { display: inline; }
/* Ohne Foto: die Zeichnung im Raum 100 × 100 */
.aufschnitt-bild .schicht-flaeche { stroke: var(--tinte); stroke-width: 1.6; stroke-linejoin: round; fill-rule: nonzero; }
.aufschnitt-bild .schicht-huelle .schicht-flaeche { fill: var(--huelle); }
.aufschnitt-bild .schicht-fuellung .schicht-flaeche { fill: var(--fuellung); }
.aufschnitt-bild .schicht-wahl { stroke-width: 7; }
.aufschnitt-bild .schicht-fokus { stroke-width: 5.5; stroke-dasharray: 1.4 1.4; }
.aufschnitt-bild .schicht[aria-pressed="true"] .schicht-flaeche { stroke-width: 2.4; }
.krume { fill: var(--kruemel); pointer-events: none; }
.bild-text { fill: var(--tinte); font: 600 4.4px var(--mono); letter-spacing: .1px; text-anchor: middle; pointer-events: none; }

/* Was wäre wenn?: eine Leiste über der Tabelle mit dem Regler, dem Wort „nicht gespeichert“ und „Zurücksetzen“ */
.zutaten-tabelle-bereich { min-width: 0; }
.ww-hinweis { margin: 0 0 var(--abstand-s); }
.ww-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-s) var(--abstand); margin: 0 0 var(--abstand-s); padding: var(--abstand-s) var(--abstand); border: 1px dashed var(--tinte); border-radius: var(--r-s); background: var(--papier); }
.ww-leiste.ww-aktiv { border-style: solid; }
.ww-regler { display: flex; flex: 1 1 18rem; align-items: center; gap: .6rem; min-width: 0; }
.ww-label { font-weight: 600; }
.ww-wert { min-width: 3.2rem; font-weight: 600; text-align: right; }
.ww-stand { flex: 1 1 100%; margin: 0; }
/* Der Regler: Rille und Griff im Look der Balken – Orange mit Tintenrand */
.ww-regler input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1 1 auto; width: 100%; min-width: 6rem; min-height: var(--tipp); margin: 0; background: transparent; cursor: pointer; }
.ww-regler input[type="range"]::-webkit-slider-runnable-track { height: .6rem; border: 1px solid var(--tinte); border-radius: 999px; background: var(--zeitung-d); }
.ww-regler input[type="range"]::-moz-range-track { height: .6rem; border: 1px solid var(--tinte); border-radius: 999px; background: var(--zeitung-d); }
.ww-regler input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.3rem; height: 1.3rem; margin-top: -.45rem; border: var(--rahmen); border-radius: 50%; background: var(--orange); box-shadow: var(--schatten-xs); }
.ww-regler input[type="range"]::-moz-range-thumb { width: 1.3rem; height: 1.3rem; border: var(--rahmen); border-radius: 50%; background: var(--orange); box-shadow: var(--schatten-xs); }
.ww-regler input[type="range"][disabled] { opacity: .55; cursor: default; }
/* Das Auswahlfeld in der Zeile sieht aus wie Text und zeigt erst beim Berühren seinen Rand */
.ww-select { max-width: 100%; min-height: var(--tipp); padding: 0 .3rem; border: 1px solid var(--grau); border-radius: var(--r-s); background: var(--papier); color: var(--tinte); font: inherit; }
.ww-verpackung-block { margin-top: var(--abstand-s); }
.verpackung-tabelle th { min-width: 6rem; font-weight: 500; }
.verpackung-tabelle td { min-width: 11rem; }
.verpackung-tabelle .ww-select { width: 100%; }

/* ── Die Zutatentabelle ──────────────────────────────────────────────────── */
.zutaten-tabelle .teil-kopf > th, .zutaten-tabelle .teil-kopf > td { background: var(--zeitung); border-top: 1px solid var(--tinte); font-weight: 600; }
.zutaten-tabelle .teil-kopf:first-child > *, .zutaten-tabelle tbody > .teil-kopf:first-of-type > * { border-top: 0; }
.teil-knopf {
  display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tipp); padding: 0 .6rem; border: 1px solid transparent; border-radius: var(--r-pill);
  background: transparent; color: var(--tinte); font: 600 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.teil-knopf:hover { background: var(--zeitung-d); }
.teil-knopf[aria-pressed="true"] { border-color: var(--tinte); background: var(--orange); box-shadow: var(--schatten-xs); }
.teil-rezeptur { font-weight: 400; }
.tabelle tr.teil-detail, .tabelle tr.rezept-detail { height: auto; }
.zutat-name { position: sticky; left: 0; z-index: 1; min-width: 8rem; background: var(--papier); font-weight: 500; }
.zutat-angebot { min-width: 10rem; }
/* Ein geändertes Angebot oder Gewicht: ein oranger Balken links an der Zeile und fette Zahlen – das ist die Auswahl des Was-wäre-wenn */
.zutat.ww-zeile > th { box-shadow: inset 3px 0 0 var(--orange); }
.ww-geaendert { font-weight: 600; }
.ww-diff { color: var(--grau); font-size: var(--text-klein); font-weight: 400; }
.beleg-mehr { display: inline; }

/* ── Rezepturen und Spurentext ───────────────────────────────────────────── */
.rezepturen-tabelle .rezept-sorte-kopf { position: sticky; left: 0; z-index: 1; width: 5.5rem; background: var(--papier); }
.rezept-zeile:hover > .rezept-sorte-kopf { background: var(--zeitung); }
/* bei einer weiteren Rezeptur steht an der Stelle des Fotos die Liste der Sorten, im Ton der Kürzel */
.rezept-sorten { font: 600 .68rem/1.4 var(--mono); letter-spacing: .1em; }
.rezept-name { min-width: 10rem; }
.rezept-weitere > * { color: var(--grau); }
.rezept-trenner th { height: auto; padding-top: .45rem; padding-bottom: .2rem; background: var(--zeitung); color: var(--grau); font: 600 .62rem/1.4 var(--mono); letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.positionen-tabelle { max-width: 40rem; margin: 0; background: var(--papier); }
.rposten-aus > th { color: var(--grau); }
.spurentext-sorte { width: 5.5rem; }
.spurentext-status { width: 6rem; text-align: right; }
.spurentext { font-size: var(--text); overflow-wrap: anywhere; }
.spurentext-leer { color: var(--grau); }
.spurentext-zelle { white-space: normal; overflow-wrap: anywhere; }

/* Breite Tabellen haben eine kleinste Breite; darunter scrollt ihr Rahmen (am Handy), ab 80rem passen sie in die Breite */
.kostenmatrix { min-width: 36rem; }
.zutaten-tabelle { min-width: 40rem; }
.rezepturen-tabelle { min-width: 56rem; }
.spurentext-tabelle { min-width: 0; }

/* ── Größere Bildschirme ─────────────────────────────────────────────────── */
@media (min-width: 40rem) {
  .matrix-sorte-kopf { min-width: 17rem; }
  .matrix-sorte-kopf .sorte-titel { flex-wrap: nowrap; }
  .matrix-sorte-kopf .sorte-name {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none;
    font-family: inherit; font-size: var(--text-tabelle); font-weight: 600; letter-spacing: 0; line-height: 1.2; text-transform: none;
  }
}
@media (min-width: 56rem) {
  .verpackung-tabelle th { width: 14rem; }
  .sorten-spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .zutaten-raster { grid-template-columns: 18rem minmax(0, 1fr); }
}
@media (pointer: fine) {
  .sorte-wahl .sorten-bild { width: 1.75rem; }
  .ww-select { max-width: 14rem; min-height: calc(var(--zeile) - 6px); }
}
@media (min-width: 80rem) {
  .kostenmatrix, .zutaten-tabelle, .rezepturen-tabelle { min-width: 0; }
}