/* Werkstatt – Gestaltung der Seite „Einstellungen“ (Ergänzung zu app.css und ansichten.css)

   Farben, Schriften, Rahmen, Radien, Tippfläche und die Maße der Dichte kommen aus den Eigenschaften in app.css (:root) – hier steht
   keine Farbe. Vorhandene Klassen werden benutzt (.karte, .knopf, .meldung, .hinweis-band, .klappe, .leise, .klein); neu sind nur die Felder
   des Formulars und die Karten der Rohstoffe. Der Link „Einstellungen“ in der Kopfzeile steht seit Auftrag U in app.css (.kopf-link).
   Ruhig: nichts blinkt, nichts springt, keine Übergänge, keine Animation. Am Handy einspaltig (unter 40rem), Tippflächen
   mindestens 44 px, keine waagrechte Seiten-Scrollleiste. Am Laptop stehen die Gruppen und die Karten der Rohstoffe in zwei bis drei
   Spalten (Auftrag U); Prüfung der Eingaben und Protokoll der Änderungen sind unverändert.
   Farben wie in app.css: Rot steht wie bei den Meldungen nur am linken Rand („hat nicht geklappt“), nie als Fläche. */

/* ── Die Seite ───────────────────────────────────────────────────────────── */
.einstellungen > p { max-width: 42rem; }
.formular section { margin: 0 0 var(--abstand-l); }
.formular section > h2 { margin-bottom: .35rem; }
.formular section > p { max-width: 42rem; margin: 0 0 var(--abstand); }
/* Lebensmittel und Verpackung: eine kleine Überschrift über den Karten, wie die Kleinbeschriftungen sonst */
.formular .einst-art { margin: var(--abstand-l) 0 var(--abstand-s); color: var(--grau); font: 600 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* Die Karten der Rohstoffe: eine zugeklappte Zeile je Rohstoff mit der Zahl der gesetzten Werte, aufgeklappt die vier Felder */
.formular .rohstoffe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand); }
.formular .rohstoff-titel { margin: 0; font-size: 1rem; letter-spacing: normal; text-transform: none; }
.formular .rohstoff-knopf {
  display: flex; align-items: center; 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;
}
.formular .rohstoff-name { font-family: var(--schrift); font-size: var(--h3); font-weight: 600; letter-spacing: -.005em; line-height: 1.2; overflow-wrap: anywhere; }

/* ── Felder ──────────────────────────────────────────────────────────────── */
.felder { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand); }
/* in einer aufgeklappten Karte stehen die Felder untereinander: die Karte ist schmal, ein Feld braucht Platz für Zahl und Einheit */
.formular .rohstoffe .felder { grid-template-columns: minmax(0, 1fr); }
.feld { min-width: 0; }
.feld-name { display: block; margin: 0 0 .3rem; font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
/* Feld und Einheit stehen in einem gemeinsamen Rahmen (Papier mit Tintenrand wie die Karten): Alle Felder sind gleich breit, die
   ganze Fläche ist Tippfläche, die Einheit steht dahinter. Textfeld und Auswahl sehen gleich aus. */
.feld-zeile {
  display: flex; align-items: stretch; min-height: calc(var(--tipp) + 4px);
  border: var(--rahmen); border-radius: var(--r-s); background: var(--papier);
}
/* Den Fokusring zeichnet der Rahmen, nicht das Feld darin */
.feld-zeile:focus-within { outline: 3px solid var(--tinte); outline-offset: 2px; }
.feld-zeile:has(.feld-eingabe[aria-invalid="true"]) { border-left: 6px solid var(--rot); }
.feld-eingabe {
  flex: 1 1 auto; width: 100%; min-width: 0; padding: .25rem .75rem;
  border: 0; border-radius: var(--r-s); background: transparent; color: var(--tinte); font: inherit; line-height: 1.3;
}
.feld-eingabe:focus, .feld-eingabe:focus-visible { outline: none; }
.feld-eingabe::placeholder { color: var(--grau); opacity: 1; }
.feld-einheit {
  display: flex; flex: none; align-items: center; padding: 0 .75rem 0 .25rem;
  color: var(--grau); font: 600 .72rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.feld-hinweis { margin: .3rem 0 0; }
/* der Satz des Dienstes oder der Seite zu diesem Feld: Tintenrahmen, Rot nur am linken Rand */
.feld-fehler {
  margin: .4rem 0 0; padding: .4rem .75rem; border: var(--rahmen); border-left: 6px solid var(--rot);
  border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--papier); font-size: var(--text-klein);
}

/* ── Speichern ───────────────────────────────────────────────────────────── */
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-s) var(--abstand); margin: var(--abstand-l) 0 var(--abstand); }
.aktionen p { margin: 0; }
.formular > .hinweis-band, .formular > .meldung { margin: var(--abstand) 0 0; }

/* ── Größere Bildschirme ─────────────────────────────────────────────────── */
@media (min-width: 40rem) {
  .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formular .rohstoffe { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* Am Laptop drei Spalten: die Gruppen „Allgemein“ und „Kapazität“ nebeneinander, die Karten der Rohstoffe zu dritt */
@media (min-width: 62rem) {
  .formular .rohstoffe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .formular .felder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (pointer: fine) {
  .feld-zeile { border-width: 1px; min-height: calc(var(--tipp) + 2px); }
  .feld-eingabe { padding: .1rem .6rem; }
  .formular .rohstoff-knopf { font-size: var(--text); }
}