/* ===========================================================================
   projekt.css: nur das, was dieser Rechner zusätzlich braucht
   ---------------------------------------------------------------------------
   Wird als letzte Datei geladen und darf deshalb alles überschreiben.

   Regel: KEINE festen Farbwerte, nur Variablen aus der Farbwelt. Ein fester
   Wert bricht, sobald jemand DESIGN_FARBWELT in der config.php ändert, und
   das fällt erst Monate später auf.
   ========================================================================= */

/* ===========================================================================
   SEITENBREITE AM DESKTOP
   ---------------------------------------------------------------------------
   HIER wird die Breite eingestellt: an genau einer Stelle, sonst nirgends.

   Der Rechner lief bisher über die volle Fensterbreite. Auf einem breiten
   Bildschirm zieht das die Zeilen so weit auseinander, dass sie schwer zu
   lesen sind, und neben der Hauptseite sieht es nach zwei verschiedenen
   Seiten aus. Deshalb liegt der Inhalt jetzt in einem zentrierten Bereich.

   ANPASSEN: Den Wert unten auf die Breite der Hauptseite setzen. Er steht im
   CSS der Hauptseite als "max-width" bei dem Element, das den Seiteninhalt
   umschliesst. Meist heisst es .container, .wrap oder .page. Beispiel:

       .container { max-width: 1180px; margin: 0 auto; }
                                ^^^^^^ dieser Wert gehört hierher.

   WIE es gemacht ist: Nicht mit "max-width" am Block selbst, sondern mit
   seitlichem Innenabstand nach der Formel "(Fensterbreite − Seitenbreite) / 2,
   mindestens aber der bisherige Abstand". Der Unterschied ist sichtbar: So
   bleiben Hintergrund, Kopfband und Trennlinien über die volle Fensterbreite
   durchgezogen, wie auf der Hauptseite. Nur der Text darin ist begrenzt.
   Mit "max-width" würden auch die Linien in der Mitte abbrechen.

   Am Telefon greift die Formel nicht: Dort ist das Fenster schmaler als die
   Seitenbreite, also gewinnt der Mindestabstand. Es ändert sich nichts.
   ========================================================================= */
:root {
  --seitenbreite: 1180px;

  /* Interner Hilfswert, bitte nicht ändern: der seitliche Rand, der den
     Inhalt zentriert. Wird unten mit dem jeweiligen Mindestabstand gemischt. */
  --rand-aussen: calc((100% - var(--seitenbreite)) / 2);
}

/* Aufbau "werkbank": Rechner, Anleitung, Formeln, Fälle, Impressum. */
.werkbank__band   { padding-inline: max(30px, var(--rand-aussen)); }
.werkbank__zahlen { padding-inline: max(0px,  var(--rand-aussen)); }
.werkbank__block  { padding-inline: max(30px, var(--rand-aussen)); }

/* Aufbau "kachelbrett": Startseite. */
.brett__kopf  { padding-inline: max(30px, var(--rand-aussen)); }
.brett__gruss { padding-inline: max(30px, var(--rand-aussen)); }
.brett        { padding-inline: max(30px, var(--rand-aussen)); }
.startzahlen  { padding-inline: max(30px, var(--rand-aussen)); }

/* Fusszeile auf jeder Seite. */
.seitenfuss { padding-inline: max(30px, var(--rand-aussen)); }

/* Der Fliesstext auf der Startseite behält seine Lesebreite, rückt aber an
   den linken Rand des zentrierten Bereichs statt an den Fensterrand. */
.startfliess {
  max-width: none;
  padding-inline: max(30px, var(--rand-aussen));
}
.startkarte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-gross);
              padding: 18px 22px; box-shadow: var(--schatten); }
.startkarte > * { max-width: 100ch; }
.startkarte h2 { margin-top: 0; }

/* --- Das Kachelbrett der Startseite --------------------------------------
   Der Baukasten lässt die hervorgehobene Kachel zwei von drei Spalten
   einnehmen. Bei VIER Kacheln ergibt das 2+1+1+1 = fünf Felder in einem
   Dreierraster, also zwei Reihen mit einem sichtbaren LOCH unten rechts.
   Solange die Seite über die ganze Fensterbreite lief, fiel das kaum auf;
   im zentrierten Bereich steht das Loch mitten im Bild.

   Deshalb hier: Die grosse Kachel nimmt die ERSTE REIHE ganz ein, die drei
   übrigen füllen die zweite Reihe genau aus. Das Raster geht auf, und die
   wichtigste Aufgabe ("Entfettung prüfen") wird dabei sogar noch deutlicher.

   Bei zwei Spalten (unter 860 px) bleibt es beim Baukasten-Verhalten: Dort
   ergeben 2+1+1+1 sauber drei Reihen ohne Loch. ------------------------- */
@media (min-width: 861px) {
  .brett .fliese--gross { grid-column: 1 / -1; min-height: 112px; }
  .brett .fliese--gross > span:last-child { display: flex; flex-direction: column; }
}

/* --- hidden muss hidden bleiben ------------------------------------------
   Das HTML-Attribut "hidden" ist im Browser nur "display:none" mit sehr
   niedrigem Gewicht. Jede eigene Regel mit display:flex oder display:grid
   ueberschreibt es, und dann bleibt ein ausgeblendetes Element sichtbar.
   Genau das passierte beim Knopf "Rechnen" und beim Anschlag-Hinweis auf der
   Schieberseite. Deshalb hier einmal zentral und mit Nachdruck. ---------- */
[hidden] { display: none !important; }

/* --- Umschalter Eintippen / Schieben -------------------------------------
   Sitzt oben in beiden Betriebsarten an derselben Stelle. Bewusst wie ein
   Reiterpaar gestaltet, nicht wie zwei Knöpfe: Es wird nichts ausgelöst,
   sondern die Ansicht gewechselt. ------------------------------------- */
.modus { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px;
         background: var(--flaeche2); border: 1px solid var(--rand-fein); }
.modus a, .modus span {
  padding: 7px 16px; border-radius: 999px; text-decoration: none;
  font-size: .9rem; font-weight: 600; white-space: nowrap;
}
.modus a { color: var(--schwach); }
.modus a:hover { color: var(--akzent); }
.modus [aria-current] { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten); }

/* --- Die Schieberseite ----------------------------------------------------
   Links die Regler, rechts das Ergebnis, das beim Ziehen mitläuft. Am
   Telefon untereinander. Dort steht das Ergebnis OBEN, denn wer zieht,
   schaut auf die Zahl und nicht auf den Finger. -------------------------- */
.schieber__raster {
  display: grid; gap: var(--luft);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .schieber__raster { grid-template-columns: 1fr minmax(280px, 340px); }
  .schieber__ergebnis { position: sticky; top: 96px; align-self: start; }
}
@media (max-width: 899px) {
  /* Ergebnis zuerst: Beim Ziehen mit dem Daumen muss die Zahl sichtbar sein. */
  .schieber__ergebnis { order: -1; }
}

.schieber__zeile {
  padding: 12px 0 4px;
  border-bottom: 1px solid var(--rand-fein);
}
.schieber__zeile:last-of-type { border-bottom: 0; }
.schieber__kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-bottom: 4px;
}
.schieber__kopf label { font-weight: 600; }
.schieber__kopf b { font-family: var(--schrift-titel); font-size: 1.25rem; }
.schieber__fuss {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: .78rem; color: var(--schwach); margin-top: 2px;
}
.schieber__soll { font-weight: 600; }
.schieber__anteil { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.schieber__anteil .balken { flex: 1; }

/* Der geführte Schieber im Tauschmodus: sichtbar anders, nicht nur inaktiv. */
.schieber__zeile--gefuehrt { background: var(--flaeche2); border-radius: var(--radius); padding-inline: 10px; }
.schieber__zeile--gefuehrt .schieber__kopf b { color: var(--akzent); }

.schieber__tausch { margin-top: var(--luft); display: grid; gap: 10px; }
.schalterzeile { display: flex; gap: 10px; align-items: start; }
.schalterzeile input { margin-top: 3px; flex: none; }
.schalterzeile small { color: var(--schwach); }
.feld--schmal { max-width: 260px; }

.schieber__zahl {
  font-family: var(--schrift-titel); font-size: 3.2rem; line-height: 1.05;
  letter-spacing: -.03em; margin: 2px 0;
}
.schieber__zahl--gut      { color: var(--erfolg); }
.schieber__zahl--knapp    { color: var(--warn); }
.schieber__zahl--schlecht { color: var(--fehler); }
.schieber__unter { margin: 0 0 10px; color: var(--schwach); font-size: .9rem; }

/* Reglerbahn in den Projektfarben, damit sie nicht als einziges Element
   nach Betriebssystem aussieht. */
.schieber input[type="range"] { width: 100%; accent-color: var(--akzent); height: 28px; }
.schieber input[type="range"]:disabled { opacity: .75; cursor: not-allowed; }

@media print { .modus, .schieber__tausch { display: none; } }

/* --- Sprachumschalter ----------------------------------------------------
   Sitzt im Kopfband rechts, auf jeder Seite an derselben Stelle. Bewusst
   klein: Er ist eine Einstellung, kein Bedienelement des Rechners. ---- */
.sprachwahl {
  display: flex; gap: 4px; align-items: center; flex: none;
  font-size: .82rem;
}
.sprachwahl a,
.sprachwahl span {
  padding: 5px 10px; border-radius: 999px; text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
}
.sprachwahl a           { color: var(--schwach); }
.sprachwahl a:hover     { color: var(--akzent); border-color: var(--rand); }
.sprachwahl [aria-current] {
  color: var(--text); background: var(--flaeche2);
  border-color: var(--rand); font-weight: 650;
}
/* Im dunklen Kopfband der Farbwelt "industrie" steht der Umschalter auf
   dunklem Grund und braucht die hellen Textfarben. */
.werkbank__band .sprachwahl a, .band6 .sprachwahl a { color: var(--dunkel-schwach); }
.werkbank__band .sprachwahl [aria-current], .band6 .sprachwahl [aria-current] {
  color: var(--dunkel-text);
  background: var(--dunkel-flaeche);
  border-color: transparent;
}
@media print { .sprachwahl { display: none; } }

/* Am Telefon gelten wieder die knappen Abstände des Baukastens. Diese
   Wiederholung ist nötig, weil projekt.css NACH den Aufbau-Dateien geladen
   wird: Ohne sie würden die Regeln oben auch die Mobilwerte überschreiben. */
@media (max-width: 640px) {
  .werkbank__band   { padding-inline: 16px; }
  .werkbank__zahlen { padding-inline: 0; }
  .werkbank__block  { padding-inline: 16px; }
  .brett__kopf,
  .brett__gruss     { padding-inline: 16px; }
  .brett            { padding-inline: 16px; }
  .startzahlen,
  .startfliess      { padding-inline: 14px; }
  .seitenfuss       { padding-inline: 14px; }
}

/* --- Eingabefelder nebeneinander statt untereinander ----------------------
   .feldgruppe ist im Baukasten nur ein Rahmen. Für einen Rechner mit vielen
   kurzen Zahlenfeldern ist das zu hoch: Man scrollt endlos. Deshalb hier ein
   Raster, das sich automatisch an die Breite anpasst und auf dem Telefon
   wieder auf eine Spalte fällt. ---------------------------------------- */
.feldgruppe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--luft);
  align-items: stretch;
}
.feldgruppe > .feld { margin-bottom: 0; }

/* Bedienelemente einer Zeile auf gleicher Hoehe.
   Hat ein Feld einen Hilfetext und das Nachbarfeld nicht, standen die
   Auswahlfelder vorher auf verschiedenen Hoehen und die Zeile sah aus, als
   waere sie verrutscht. Das Feld fuellt jetzt die Zeilenhoehe, und das
   Bedienelement wird nach unten geschoben. */
.feldgruppe > .feld { display: flex; flex-direction: column; }
.feldgruppe > .feld > select,
.feldgruppe > .feld > input,
.feldgruppe > .feld > textarea,
.feldgruppe > .feld > .feld-einheit { margin-top: auto; }

/* --- Das Urteil ganz oben ------------------------------------------------
   Die eine Aussage, für die man den Rechner überhaupt aufmacht: Reicht es
   oder nicht? Deshalb gross, farbig und vor allen Zahlen. -------------- */
.urteil {
  border: 1px solid var(--rand);
  border-left: 5px solid var(--schwach);
  border-radius: var(--radius);
  background: var(--flaeche);
  padding: calc(var(--luft) * .9) var(--luft);
  margin-bottom: var(--luft);
}
/* Nur das DIREKTE <b> ist die Schlagzeile. Ohne den Kindkombinator ">" würde
   auch ein <b> mitten im Erklärtext darunter zur Überschrift, und das
   Ergebnis sähe aus, als stünden dort zwei Urteile. */
.urteil > b {
  display: block;
  font-family: var(--schrift-titel);
  font-size: 1.55rem;
  line-height: 1.15;
  margin: 2px 0 6px;
}
.urteil span { color: var(--schwach); }
.urteil--gut     { border-left-color: var(--erfolg); }
.urteil--gut > b   { color: var(--erfolg); }
.urteil--schlecht   { border-left-color: var(--fehler); }
.urteil--schlecht > b { color: var(--fehler); }
.urteil--neutral { border-left-color: var(--akzent); }

/* --- Zeilen, die der Werkstoff verbietet ---------------------------------
   Nicht ausblenden, sondern durchstreichen: Man soll sehen, dass es dort
   schneller ginge, und warum man trotzdem nicht darf. ----------------- */
.liste tr.gesperrt td { color: var(--schwach); text-decoration: line-through; }
.liste tr.gesperrt td:last-child { text-decoration: none; }

/* --- Kacheln: die Einheit kleiner als die Zahl --------------------------- */
.kachel__wert small { font-size: .5em; font-weight: 600; color: var(--schwach); }

/* --- Etiketten mit Anhaltspunkten sollen umbrechen dürfen ---------------- */
.etikett { margin: 2px 4px 2px 0; }

/* --- Ausklapper-Inhalt bekommt Luft ------------------------------------- */
.ausklapper__inhalt > .feldgruppe:last-child { margin-bottom: 0; }

/* --- Druckansicht: Eingabeformular weg, Ergebnis bleibt ------------------
   Damit man das Blatt beim Kunden auf den Tisch legen kann. ------------ */
@media print {
  #eingabe, .knopfreihe, .tabbar, .werkbank__reiter { display: none !important; }
  .werkbank__block { break-inside: avoid; }
  .ausklapper__inhalt { display: block !important; }
}

/* --- Hinweise mit Auszeichnungen darin -----------------------------------
   .hinweis aus dem Baukasten ist ein Flex-Container mit einem Punkt davor.
   Steht im Text ein <b> oder <code>, wird daraus ein EIGENES Flex-Kind, das
   sich neben den Text stellt statt in ihn hinein. Auf dem Telefon läuft die
   Zeile dann seitlich hinaus. Lösung im HTML: den ganzen Text in ein <span>
   packen. Diese Regel sorgt zusätzlich dafür, dass ein solches Span auch
   wirklich schrumpfen darf. --------------------------------------------- */
.hinweis > span { min-width: 0; flex: 1 1 auto; }

/* --- Tab-Leiste am unteren Rand halten -----------------------------------
   Im Baukasten hat .tabbar keine Position; im Aufbau "werkbank" sitzt sie
   deshalb einfach am Dokumentende und scrollt weg. Auf einer langen
   Rechnerseite heisst das: Die Navigation ist praktisch nicht erreichbar.

   Gelöst mit position:sticky und NICHT mit einer Höhe in vh/dvh: in der als
   App verpackten WebView sind beide oft 0, und die Leiste wäre unsichtbar.
   Sticky braucht gar keine Höhenangabe und ist deshalb hier der sichere Weg.

   HINWEIS für den Baukasten: Das gehört eigentlich nach basis.css, damit alle
   Projekte davon haben. Hier steht es nur, um dieses Projekt nicht zu
   blockieren. ---------------------------------------------------------- */
@media (max-width: 640px) {
  .tabbar {
    position: sticky;
    bottom: 0;
    z-index: 50;
    box-shadow: 0 -1px 0 var(--rand);
  }
  /* Platz, damit der letzte Block nicht unter der Leiste verschwindet */
  body { padding-bottom: 4px; }
}

/* --- Reserve-Balken auch in der Kartenansicht sichtbar --------------------
   Am Telefon wird jede Tabellenzeile zur Karte, und die Zelle wird zu einem
   Flex-Container mit Beschriftung links und Wert rechts. Ein Block-Element
   darin schrumpft auf Breite null. Der Balken war deshalb unsichtbar.
   Hier bekommt er eine Mindestbreite, damit er auch dort etwas zeigt. -- */
@media (max-width: 640px) {
  table.liste td .balken { min-width: 120px; align-self: center; }
  table.liste td:has(.balken) { align-items: center; }
}

/* ===========================================================================
   DIAGRAMME
   ---------------------------------------------------------------------------
   Die Grafiken entstehen serverseitig in diagramme.php und bringen KEINE
   eigenen Farben mit: im SVG steht nur Geometrie. Alles Farbige steht hier
   und benutzt ausschliesslich die Variablen der Farbwelt. Damit sieht der
   Rechner in "nacht" genauso richtig aus wie in "industrie" (Regel 4 des
   Design-Baukastens: nie ein fester Farbwert im Projekt-CSS).

   HINWEIS für den Baukasten: Wird ein zweites Projekt Diagramme brauchen,
   gehört dieser ganze Abschnitt nach elemente.css. Bis dahin steht er hier.
   ========================================================================= */

.dia { display: block; width: 100%; height: auto; overflow: visible; }

/* --- gemeinsame Bestandteile --- */
.dia__achse       { stroke: var(--rand);      stroke-width: 1; }
.dia__gitter      { stroke: var(--rand-fein); stroke-width: 1; }
.dia__gitter--voll{ stroke: var(--schwach);   stroke-dasharray: 4 3; }
.dia__bruecke     { stroke: var(--schwach);   stroke-width: 1; stroke-dasharray: 2 3; }
.dia__klein       { fill: var(--schwach); font-size: 11px; }
.dia__klein--stark{ fill: var(--text); font-weight: 600; }

/* --- Tacho --- */
.dia--tacho              { max-width: 290px; margin: 0 auto; }
.dia__spur               { fill: none; stroke: var(--rand-fein); stroke-width: 13; stroke-linecap: round; }
.dia__wert               { fill: none; stroke-width: 13; stroke-linecap: round; }
.dia__wert--gut          { stroke: var(--erfolg); }
.dia__wert--knapp        { stroke: var(--warn); }
.dia__wert--schlecht     { stroke: var(--fehler); }
.dia__marke              { stroke: var(--text); stroke-width: 2; }
.dia__gross              { font-size: 26px; font-weight: 700; }
.dia__gross--gut         { fill: var(--erfolg); }
.dia__gross--knapp       { fill: var(--warn); }
.dia__gross--schlecht    { fill: var(--fehler); }

/* --- Wasserfall --- */
.dia--wasserfall         { max-width: 620px; }
.dia__saeule--soll       { fill: var(--schwach); }
.dia__saeule--ab         { fill: var(--fehler); opacity: .82; }
.dia__saeule--auf        { fill: var(--erfolg); opacity: .82; }
.dia__saeule--gut        { fill: var(--erfolg); }
.dia__saeule--knapp      { fill: var(--warn); }
.dia__saeule--schlecht   { fill: var(--fehler); }

/* --- Hebelkurven --- */
.dia__linie              { fill: none; stroke: var(--akzent); stroke-width: 2.5;
                           stroke-linejoin: round; stroke-linecap: round; }
.dia__soll-linie         { stroke: var(--rand); stroke-width: 1; stroke-dasharray: 3 3; }
.dia__ist-linie          { stroke: var(--akzent); stroke-width: 1; stroke-dasharray: 3 3; }
.dia__punkt              { fill: var(--akzent); stroke: var(--flaeche); stroke-width: 2; }

/* Drei Kurven nebeneinander, am Telefon untereinander. auto-fit statt einer
   festen Spaltenzahl: So entscheidet der Platz und nicht ein Umbruchpunkt. */
.kurvenreihe {
  display: grid; gap: 14px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* --- Vier Kurven statt drei (ab 5.1) -------------------------------------
   Mit "auto-fit" ergaeben vier Kurven auf mittleren Bildschirmen drei
   Spalten und damit ein leeres Feld unten rechts, genau wie es die
   Startseite hatte. Deshalb hier feste Stufen: vier nebeneinander, sonst
   zwei mal zwei, am Telefon untereinander. Nie drei. ------------------- */
.kurvenreihe--vier { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1100px) { .kurvenreihe--vier { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  { .kurvenreihe--vier { grid-template-columns: 1fr; } }

.kurvenreihe figure { margin: 0; }
.kurvenreihe figcaption { font-weight: 600; margin-bottom: 2px; }
.kurvenreihe p { color: var(--schwach); font-size: .88rem; margin: 2px 0 0; }

/* Die Einstiegserklärung: zwei Spalten, damit sie nicht als Textwand wirkt */
.wofuer { display: grid; gap: 8px 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.wofuer h3 { font-size: .95rem; margin: 0 0 2px; }
.wofuer ul { margin: 0; padding-left: 18px; }
.wofuer li { margin-bottom: 3px; }

@media print {
  /* Diagramme gehören aufs Blatt: sie sind die halbe Aussage. Nur die
     Flächen etwas kräftiger, sonst verschwinden sie im Ausdruck. */
  .dia__saeule--ab, .dia__saeule--auf { opacity: 1; }
  .dia { break-inside: avoid; }
  figure { break-inside: avoid; }
}

/* Ergebniskopf: Tacho und Urteil nebeneinander, am Telefon untereinander.
   Der Tacho bekommt eine feste Spalte, damit er nicht mitwächst und dabei
   riesig wird; das Urteil nimmt den Rest. */
.ergebniskopf {
  display: grid; gap: 14px; align-items: center;
  grid-template-columns: minmax(180px, 240px) 1fr;
}
.ergebniskopf .urteil { margin: 0; }
@media (max-width: 640px) {
  .ergebniskopf { grid-template-columns: 1fr; }
}

.dia-block { margin: 16px 0 4px; }
.dia-block figcaption { margin-top: 6px; }

/* Breite Wasserfälle (viele Säulen) am Telefon seitlich schiebbar machen.
   Der Rahmen scrollt, nicht die Seite. Deshalb läuft weiterhin nichts aus
   dem Fenster hinaus. Die Schrift einfach mitzuverkleinern wäre die
   schlechtere Wahl: Das Bild wäre dann vollständig, aber unleserlich. */
.dia-block { overflow-x: auto; }
.dia--breit { min-width: 520px; }

/* ===========================================================================
   STARTSEITE (Aufbau kachelbrett)
   Drei Kennzahlen über den Kacheln und ein Fliesstext darunter. Beides gibt
   es im Baukasten nicht, weil kachelbrett dort reine Werkzeugsammlung ist.
   ========================================================================= */
.startzahlen {
  /* padding-block statt padding: Der SEITLICHE Abstand gehört allein der
     Sektion "Seitenbreite" ganz oben. Eine Kurzschreibweise "padding" würde
     sie hier still überschreiben. Genau das war der Fehler in 5.0. */
  display: grid; gap: 14px; padding-block: 8px 4px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.startzahl {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius-gross); padding: 14px 16px;
  border-left: 4px solid var(--schwach);
}
.startzahl__wert { font-size: 2.1rem; font-weight: 700; line-height: 1.1; margin: 2px 0 6px; }
.startzahl p:last-child { margin: 0; color: var(--schwach); font-size: .88rem; }
.startzahl--gut      { border-left-color: var(--erfolg); }
.startzahl--knapp    { border-left-color: var(--warn); }
.startzahl--schlecht { border-left-color: var(--fehler); }
.startzahl--schlecht .startzahl__wert { color: var(--fehler); }

/* Ebenfalls nur senkrecht. Die Lesebreite von 74ch setzt die Breiten-Sektion
   am inneren Element, nicht hier. Sonst stünde der Text nicht am linken Rand
   des zentrierten Bereichs, sondern in der Fenstermitte. */
.startfliess { padding-block: 10px 34px; }
.startfliess h2 { margin-top: 0; }

@media (max-width: 640px) {
  /* Seitlich regelt die Breiten-Sektion, hier nur der Rest. */
}

/* Die zwei Formularzeilen eines Blocks optisch zusammenhalten: Einstellwerte
   oben, Aufgabe direkt darunter ohne trennenden Abstand. */
.feldgruppe--anschluss { margin-top: -6px; }

/* Werkstoffgrenze in der Temperaturkurve: der gesperrte Bereich wird
   abgedeckt statt nur markiert: eine blosse Linie wird uebersehen. */
.dia__sperre  { fill: var(--fehler); opacity: .09; }
.dia__grenze  { stroke: var(--fehler); stroke-width: 1.5; stroke-dasharray: 4 3; }
/* Schnittpunkt mit der 100-Prozent-Linie = der Wert aus der Tabelle daneben */
.dia__ziel    { fill: none; stroke: var(--text); stroke-width: 2; }

/* ===========================================================================
   FORMELN (Seite "Wie gerechnet wird")
   Bewusst reines HTML statt einer Formelbibliothek: Die käme von einem fremden
   Server, würde die strikte CSP aufweichen und wäre offline nicht da. Für eine
   Handvoll Formeln lohnt sich das nicht.
   ========================================================================= */
.formel {
  background: var(--flaeche2); border: 1px solid var(--rand-fein);
  border-left: 3px solid var(--akzent); border-radius: var(--radius);
  padding: 12px 16px; margin: 12px 0;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 1rem; line-height: 1.9; overflow-x: auto;
}
.formel--gross { font-size: 1.25rem; text-align: center; }
.formel sub, .formel sup { font-size: .72em; }

.quellen li { margin-bottom: 7px; }

@media (max-width: 640px) {
  .formel        { font-size: .9rem; padding: 10px 12px; }
  .formel--gross { font-size: 1.05rem; }
}

/* Fusszeile mit den Pflichtverweisen. Schlicht und leise: sie muss
   auffindbar sein, nicht auffallen. */
.seitenfuss {
  display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center;
  padding-block: 16px; margin-top: 8px;
  border-top: 1px solid var(--rand-fein);
  color: var(--schwach); font-size: .85rem;
}
.seitenfuss a { color: var(--schwach); }
.seitenfuss a:hover { color: var(--akzent); }
@media (max-width: 640px) { .seitenfuss { padding-block: 14px; } }
@media print { .seitenfuss { display: none; } }

/* ===========================================================================
   FORMGEBUNG DER FARBWELT "OBETECH"
   ---------------------------------------------------------------------------
   Farben stehen in assets/farbwelt/obetech.css. Was NICHT als Variable geht
   (Verläufe, Unschärfe, Fokusringe), steht hier. Alle Regeln hängen an der
   Body-Kennung .f-obetech und wirken deshalb NUR in dieser Farbwelt. Wer auf
   "industrie" zurückstellt, bekommt wieder die sachliche Optik, ohne dass hier
   etwas geändert werden müsste.
   ========================================================================= */

/* Zwei weiche Farbschleier im Hintergrund, wie auf der Vorlagenseite. */
.f-obetech {
  background:
    radial-gradient(820px 480px at 100% -12%, color-mix(in srgb, var(--akzent-1) 12%, transparent), transparent 60%),
    radial-gradient(680px 460px at -10% 112%, color-mix(in srgb, var(--akzent-2) 10%, transparent), transparent 60%),
    var(--hg);
  background-attachment: fixed;
}

/* Kopfband: in der Vorlage HELL, klebend und leicht unscharf hinterlegt. */
.f-obetech .werkbank__band {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--flaeche) 82%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rand-fein);
}
.f-obetech .werkbank__band h1 { letter-spacing: -.025em; }
.f-obetech .werkbank__reiter a { font-weight: 600; }

/* Knöpfe: Verlauf, Pillenform, weicher Schatten, leichtes Anheben. */
.f-obetech .knopf {
  border-radius: 999px; font-weight: 600; border: 0;
  background: linear-gradient(135deg, var(--akzent-1), var(--akzent-2));
  color: var(--akzent-text); box-shadow: var(--schatten);
  transition: transform .12s ease, box-shadow .15s ease;
}
.f-obetech .knopf:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -10px var(--akzent);
}
.f-obetech .knopf:active { transform: translateY(0); }
/* Die stillen Varianten bleiben still: Umriss statt Verlauf. */
.f-obetech .knopf--leer,
.f-obetech .knopf--schwach {
  background: transparent; color: var(--schwach);
  border: 1px solid var(--rand); box-shadow: none;
}
.f-obetech .knopf--leer:hover,
.f-obetech .knopf--schwach:hover {
  color: var(--akzent); border-color: var(--akzent); transform: none; box-shadow: none;
}
.f-obetech .knopf--gefahr {
  background: transparent; color: var(--fehler);
  border: 1px solid color-mix(in srgb, var(--fehler) 40%, transparent); box-shadow: none;
}

/* Flächen bekommen Rundung und Schatten statt harter Kanten. */
.f-obetech .werkbank__block > table.liste,
.f-obetech .feldgruppe,
.f-obetech .urteil,
.f-obetech .kachel,
.f-obetech .startzahl,
.f-obetech .fliese,
.f-obetech .ausklapper {
  border-radius: var(--radius-gross);
}
.f-obetech .feldgruppe,
.f-obetech .startzahl,
.f-obetech .fliese { box-shadow: var(--schatten); }

/* Eingabefelder: weicher Fokusring statt Rahmenfarbe allein. */
.f-obetech input,
.f-obetech select,
.f-obetech textarea { border-radius: var(--radius); background: var(--flaeche2); }
.f-obetech input:focus,
.f-obetech select:focus,
.f-obetech textarea:focus {
  border-color: var(--akzent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 16%, transparent);
  outline: none;
}

/* Pillen und Abzeichen rund wie in der Vorlage. */
.f-obetech .pille { border-radius: 999px; }

/* Die grosse Kachel der Startseite trägt den Verlauf. */
.f-obetech .fliese--gross {
  background: linear-gradient(140deg, var(--akzent-1), var(--akzent-2));
  color: var(--akzent-text); border-color: transparent;
}
.f-obetech .fliese--gross span,
.f-obetech .fliese--gross b { color: var(--akzent-text); }

/* Formeln: der Akzentbalken links wird zum Verlauf. */
.f-obetech .formel {
  border-left: 0;
  box-shadow: inset 3px 0 0 0 var(--akzent);
}

@media (max-width: 640px) {
  /* Am Telefon klebt schon die Tab-Leiste unten. Ein zusätzlich klebendes
     Kopfband würde zu viel vom Bildschirm wegnehmen. */
  .f-obetech .werkbank__band { position: static; }
}

/* --- Lange Pillen dürfen umbrechen ---------------------------------------
   Im Baukasten hat .pille kein Umbruchverhalten. Steht ein längerer Text
   darin (etwa eine Werkstoffgrenze), sprengt sie am Telefon die
   Kartenbreite und die ganze Seite laesst sich seitlich schieben. Der Text
   wurde zwar gekuerzt, aber die Ursache gehoert trotzdem behoben, sonst
   kehrt der Fehler beim naechsten laengeren Text zurueck.

   HINWEIS fuer den Baukasten: gehoert nach basis.css. -------------------- */
.pille { white-space: normal; max-width: 100%; }

/* --- Zeitfenster-Diagramm (Beizen, 5.3) --------------------------------- */
.dia--zeitfenster  { max-width: 640px; }
.dia__band         { fill: var(--rand-fein); }
.dia__text--fehler { fill: var(--fehler); }

/* --- Beizblock ---------------------------------------------------------- */
.beizzeile      { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
                  margin: 4px 0 10px; }
.beizzeile b    { font-size: 1.15rem; }
.beizzeile span { color: var(--schwach); }

/* --- Grundlagenpapier zum Herunterladen (5.4) ---------------------------
   .medienzeile ist für Dateilisten gebaut: Der Untertitel bleibt einzeilig
   und wird abgeschnitten, damit lange Dateinamen die Zeile nicht sprengen.
   Hier steht dort aber echte Information ("PDF · 32 Seiten · 0,6 MB ·
   August 2026"), und am Telefon fiel das Datum weg. Deshalb für DIESE eine
   Zeile das Umbrechen wieder erlauben. */
.papierzeile .medienzeile__text span {
  white-space: normal; overflow: visible; text-overflow: clip;
}

/* --- Kundenblatt (blatt.php, 5.6) ----------------------------------------
   Eine A4-Seite fuer den Tisch beim Kunden. Am Bildschirm ist es ein Block
   wie jeder andere; im Ausdruck bleibt NUR dieser Block uebrig, alles
   andere (Formular, Kopfband, Reiter, Fuss) verschwindet. --------------- */
.blatt { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); }
.blatt__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
               border-bottom: 2px solid var(--text); padding-bottom: 10px; margin-bottom: 14px; }
.blatt__kopf h2 { margin: 0 0 2px; }
.blatt__kopf .uz { margin: 0; }
.blatt__meta { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; font-size: .92rem; }
.blatt__meta dt { color: var(--schwach); }
.blatt__meta dd { margin: 0; font-weight: 600; }

.blatt__urteil { display: flex; align-items: center; gap: 18px; padding: 12px 16px; margin: 0 0 16px;
                 border: 1px solid var(--rand); border-left: 6px solid var(--akzent); border-radius: var(--radius); }
.blatt__urteil--gut      { border-left-color: var(--erfolg); }
.blatt__urteil--gut b    { color: var(--erfolg); }
.blatt__urteil--knapp    { border-left-color: var(--warn); }
.blatt__urteil--knapp b  { color: var(--warn); }
.blatt__urteil--schlecht { border-left-color: var(--fehler); }
.blatt__urteil--schlecht b { color: var(--fehler); }
.blatt__urteil--klein    { padding: 8px 14px; }
.blatt__prozent { font-size: 2.4rem; font-weight: 700; line-height: 1; min-width: 4.2em; text-align: right; }
.blatt__urteil--klein .blatt__prozent { font-size: 1.6rem; }

.blatt__zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 28px; }
.blatt h3 { margin: 14px 0 6px; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--schwach); }

.blatt__tab { width: 100%; border-collapse: collapse; font-size: .95rem; }
.blatt__tab th, .blatt__tab td { padding: 5px 8px; border-bottom: 1px solid var(--rand-fein); text-align: left; vertical-align: top; }
.blatt__tab tbody th, .blatt__tab > tr > th { font-weight: 600; width: 34%; }
.blatt__tab thead th { color: var(--schwach); font-weight: 500; font-size: .85rem; border-bottom: 1px solid var(--rand); }
.blatt__tab tfoot th, .blatt__tab tfoot td { border-top: 2px solid var(--text); border-bottom: 0; }
.blatt__tab td.zahl { white-space: nowrap; }
.blatt__tab small { color: var(--schwach); }

.blatt__bemerkung { white-space: pre-line; }
.blatt__fuss { margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--rand); font-size: .8rem; color: var(--schwach); }
.blatt__fuss p { margin: 2px 0; }
.blatt__adresse { word-break: break-all; }

@media print {
  .nicht-drucken, .werkbank__band, .seitenfuss, .sprachwahl { display: none !important; }
  .blatt { border: 0; border-radius: 0; box-shadow: none; padding: 0; background: #fff; color: #000; font-size: .9rem; } /* feste-farbe-ok: Druckansicht */
  .blatt__fuss { font-size: .72rem; }
  .blatt__urteil { break-inside: avoid; }
  .blatt__tab, .blatt__zwei > div { break-inside: avoid; }
  .blatt__tab th, .blatt__tab td { border-bottom-color: #bbb; } /* feste-farbe-ok: Druckansicht */
  .blatt__prozent { color: #000; } /* feste-farbe-ok: Druckansicht */
  @page { margin: 15mm; }
}

/* --- Zugangsschutz (zugang.php, verwaltung.php, 5.6) --------------------- */
.zugang__karte { max-width: 480px; margin: 0 auto; }
.zugang__code  { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.35rem;
                 letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.zugang .schalter { margin: 8px 0 4px; }
.zugang__hash  { white-space: pre-wrap; word-break: break-all; padding: 12px; border: 1px solid var(--rand);
                 border-radius: var(--radius); background: var(--hg); font-size: .85rem; user-select: all; }
.zugang__neu   { border-left: 6px solid var(--erfolg); }
.zugang__codeanzeige { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 2rem; letter-spacing: .14em;
                 padding: 14px; margin: 8px 0; text-align: center; border: 2px dashed var(--erfolg);
                 border-radius: var(--radius); user-select: all; }
.zugang__schutz { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.zugang__schutz p { margin: 0; flex: 1 1 320px; }
.zugang__aktionen { display: flex; flex-wrap: wrap; gap: 6px; }

/* =========================================================================
   FASSUNG 6.0: neues Layout des Rechners (Farbwelt Labor)
   -------------------------------------------------------------------------
   Zwei Spalten: links Eingaben, rechts das Ergebnis, das beim Scrollen
   stehen bleibt. Auf dem Handy eine Spalte und eine feste Urteilsleiste.
   Alles ueber Variablen, keine festen Farben.
   ========================================================================= */

/* --- Kopfband flacher: Marke, Reiter, rechts Kunde und Sprache ---------- */
.band6 { padding: 0 !important; padding-inline: max(30px, var(--rand-aussen)) !important; }
.band6__zeile { display: flex; align-items: center; gap: 26px; min-height: 60px; }
.band6__marke h1 { font-size: 1.1rem !important; margin: 0 !important; line-height: 1.2; }
.band6__marke p  { margin: 0 !important; font-size: .78rem !important; }
.band6__reiter { margin: 0 0 0 8px !important; gap: 4px !important; }
.band6__reiter a { padding: 8px 12px !important; min-height: 0 !important; border-bottom: 0 !important;
                   border-radius: 6px; color: var(--dunkel-schwach); }
.band6__reiter a[aria-current="page"] { background: var(--dunkel-flaeche); color: var(--dunkel-text); }
.band6__rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.band6__wer { font-size: .85rem; color: var(--dunkel-schwach); }
.band6 .sprachwahl { margin: 0; }
@media (max-width: 720px) { .band6 { padding-inline: 16px !important; } .band6__zeile { min-height: 54px; gap: 12px; } }

/* --- Seitenaufbau -------------------------------------------------------- */
.rz { display: flex; gap: 22px; align-items: flex-start; padding-block: 20px 40px; padding-inline: max(30px, var(--rand-aussen)); }
.rz__links { flex: 1 1 0; min-width: 0; }
.rz__rechts { flex: 0 0 420px; min-width: 0; }
.rz__haft { position: sticky; top: 14px; }
@media (max-width: 1080px) { .rz__rechts { flex-basis: 360px; } }
@media (max-width: 900px)  { .rz { flex-direction: column; padding: 14px 12px 150px; padding-inline: 12px; } .rz__rechts { flex-basis: auto; width: 100%; } .rz__haft { position: static; } }

.rz__block { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-gross);
             padding: 16px 20px; margin-bottom: 14px; box-shadow: var(--schatten); }
.rz__block--eng { padding: 12px 16px; }
.rz__block h2 { font-size: 1.02rem; margin: 0 0 2px; text-transform: none; letter-spacing: 0; }
.rz__block h3 { font-size: .95rem; margin: 14px 0 6px; }
.rz__uz { margin: 0 0 10px; color: var(--schwach); font-size: .86rem; line-height: 1.4; }
.rz__uz--unten { margin: 8px 0 0; }
.rz__klein { font-size: .82rem; color: var(--schwach); margin: 4px 0 8px; }

/* --- Zeilen: Name | Vorgabe -> Ist | Beitrag ----------------------------- */
.rz__kopfzeile { display: flex; gap: 10px; color: var(--schwach); font-size: .74rem; text-transform: uppercase;
                 letter-spacing: .05em; padding-bottom: 4px; }
.rz__kopfzeile span:nth-child(1) { flex: 0 0 150px; }
.rz__kopfzeile span:nth-child(2) { flex: 0 0 140px; text-align: right; }
.rz__kopfzeile span:nth-child(3) { flex: 0 0 18px; }
.rz__kopfzeile span:nth-child(4) { flex: 0 0 140px; text-align: right; }
.rz__kopfzeile span:nth-child(5) { flex: 1 1 auto; padding-left: 6px; }
.rz__zeile { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rand-fein); }
.rz__zeile:first-of-type, .rz__kopfzeile + .rz__zeile { border-top: 0; }
.rz__zeile--anschluss { border-top: 0; padding-top: 0; }
.rz__name { flex: 0 0 150px; font-weight: 600; font-size: .93rem; }
.rz__name small { display: block; font-weight: 400; color: var(--schwach); font-size: .76rem; }
.rz__name--zweit { flex: 0 0 auto; padding-left: 6px; }
.rz__name .hilfe { vertical-align: 1px; margin-left: 2px; }
.rz__feld { display: inline-flex; align-items: center; flex: 0 0 140px; height: 44px; border: 1px solid var(--rand);
            border-radius: var(--radius); background: var(--flaeche); overflow: hidden; }
.rz__feld input { border: 0; background: transparent; width: 100%; min-width: 0; text-align: right; padding: 0 8px;
                  font: inherit; font-size: 16px; color: var(--text); height: 100%; }
.rz__feld input:focus { outline: none; }
.rz__feld:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--akzent) 25%, transparent); }
.rz__feld span { padding: 0 9px; height: 100%; display: flex; align-items: center; color: var(--schwach);
                 font-size: .82rem; border-left: 1px solid var(--rand-fein); white-space: nowrap; }
.rz__feld--soll { background: var(--flaeche2); }
.rz__feld--soll input { color: var(--schwach); }
.rz__pfeil { flex: 0 0 18px; text-align: center; color: var(--schwach); }
.rz__wahl { flex: 0 0 140px; min-width: 0; height: 44px; font-size: 16px; }
.rz__wahl--soll { background: var(--flaeche2); color: var(--schwach); }
.rz__voll { flex: 1 1 auto; min-width: 0; height: 44px; font-size: 16px; }
.rz__beitrag { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; padding-left: 6px; }
.rz__beitrag b { font-variant-numeric: tabular-nums; }
.rz__beitrag .pille { white-space: nowrap; }
.rz__block .hinweis { margin-top: 8px; }

@media (max-width: 720px) {
  .rz__kopfzeile { display: none; }
  .rz__zeile { flex-wrap: wrap; }
  .rz__name { flex: 1 1 100%; }
  .rz__feld, .rz__wahl { flex: 1 1 0; }
  .rz__beitrag { flex: 1 1 100%; padding-left: 0; }
  .rz__name--zweit { flex: 1 1 100%; padding-left: 0; padding-top: 4px; }
}

/* --- Chips als Auswahl -------------------------------------------------- */
.rz__chipzeile { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-top: 1px solid var(--rand-fein); }
.rz__chipzeile:first-of-type { border-top: 0; }
.rz__chipname { flex: 0 0 150px; font-weight: 600; font-size: .9rem; padding-top: 9px; }
.chip--wahl { position: relative; }
.chip--wahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip--wahl.chip--an { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.chip--wahl:has(input:checked) { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.chip--wahl:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
@media (max-width: 720px) { .rz__chipzeile { flex-wrap: wrap; } .rz__chipname { flex: 1 1 100%; padding-top: 0; } }

/* --- Beizblock mit Schalter --------------------------------------------- */
.rz__schalterzeile { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.rz__schalterzeile h2 { margin: 0; }
.rz__schalterzeile .rz__uz { margin: 0; display: block; }
.rz__beizfelder { margin-top: 8px; }

.rz__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.rz__knoepfe--rechts { margin: 12px 0 0; }

/* --- Ergebnisspalte ------------------------------------------------------ */
.rz__urteil { border-radius: var(--radius-gross); padding: 20px 22px 16px; color: var(--akzent-text);
              background: var(--fehler); box-shadow: var(--schatten); margin-bottom: 12px; }
.rz__urteil--gruen { background: var(--erfolg); }
.rz__urteil--gelb  { background: var(--warn); }
.rz__urteil--rot   { background: var(--fehler); }
.rz__urteil--klein { padding: 12px 16px; }
.rz__prozent { font-size: 3.2rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rz__prozent small { font-size: .95rem; font-weight: 400; opacity: .85; margin-left: 8px; letter-spacing: 0; }
.rz__urteil--klein .rz__prozent { font-size: 1.8rem; }
.rz__urteiltitel { font-size: 1.1rem; font-weight: 700; margin: 10px 0 3px; }
.rz__urteil--klein .rz__urteiltitel { font-size: .98rem; margin-top: 6px; }
.rz__urteiltext { margin: 0; opacity: .93; font-size: .93rem; line-height: 1.4; }
.rz__rat { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.35); font-size: .9rem; line-height: 1.4; } /* feste-farbe-ok: Trennlinie auf farbiger Flaeche */

.rz__reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--rand); margin: 0 0 10px; }
.rz__reiterknopf { background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; min-height: 44px;
                   font: inherit; font-size: .9rem; color: var(--schwach); cursor: pointer; }
.rz__reiterknopf[aria-selected="true"] { color: var(--akzent); border-bottom-color: var(--akzent); font-weight: 600; }

.rz__balken { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: .88rem; }
.rz__balken > span { flex: 0 0 112px; color: var(--schwach); }
.rz__bahn { flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--flaeche2); overflow: hidden; }
.rz__bahn i { display: block; height: 100%; border-radius: 4px; background: var(--akzent); }
.rz__bahn i.gelb { background: var(--warn); }
.rz__bahn i.rot  { background: var(--fehler); }
.rz__balken b { flex: 0 0 54px; text-align: right; font-variant-numeric: tabular-nums; }

.rz__weg { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rand-fein); font-size: .9rem; flex-wrap: wrap; }
.rz__weg:first-of-type { border-top: 0; }
.rz__weg > span:first-child { flex: 0 0 120px; color: var(--schwach); }
.rz__weg b { flex: 1 1 auto; font-variant-numeric: tabular-nums; }

.kurvenreihe--eins { grid-template-columns: 1fr; }
.kurvenreihe--eins figure { margin: 0 0 10px; }

/* --- Handy: feste Urteilsleiste ----------------------------------------- */
.rz__leiste { display: none; }
@media (max-width: 900px) {
  .rz__leiste { display: flex; align-items: center; gap: 10px; position: fixed; left: 10px; right: 10px;
                bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 40; padding: 10px 12px;
                border-radius: var(--radius-gross); color: var(--akzent-text); text-decoration: none;
                box-shadow: 0 6px 18px rgba(0,0,0,.25); } /* feste-farbe-ok: Schatten */
  .rz__leiste--gruen { background: var(--erfolg); }
  .rz__leiste--gelb  { background: var(--warn); }
  .rz__leiste--rot   { background: var(--fehler); }
  .rz__leiste__prozent { font-size: 1.7rem; font-weight: 700; white-space: nowrap; line-height: 1; }
  .rz__leiste__text { flex: 1 1 auto; font-size: .8rem; line-height: 1.25; min-width: 0; }
  .rz__leiste__text b { display: block; font-size: .9rem; }
  .rz__leiste__knopf { background: rgba(255,255,255,.22); border-radius: 6px; padding: 7px 9px; font-size: .82rem; white-space: nowrap; } /* feste-farbe-ok: Weiss-Ton auf Urteilsfarbe */
}
@media print { .rz__leiste, .rz__knoepfe { display: none !important; } .rz { display: block; } .rz__haft { position: static; } }

/* --- 6.0: Lesespalte fuer Textseiten, Bloecke mit Karten-Optik ----------- */
.s-hilfe .werkbank__block, .s-grundlagen .werkbank__block, .s-impressum .werkbank__block,
.s-faelle .werkbank__block, .s-zugang .werkbank__block, .s-verwaltung .werkbank__block,
.s-blatt .werkbank__block, .s-selbsttest .werkbank__block {
  margin-block: 14px; margin-inline: max(30px, var(--rand-aussen)); padding: 18px 22px !important;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-gross); box-shadow: var(--schatten);
}
.s-hilfe .werkbank__block h2, .s-grundlagen .werkbank__block h2, .s-impressum .werkbank__block h2,
.s-faelle .werkbank__block h2, .s-zugang .werkbank__block h2, .s-verwaltung .werkbank__block h2,
.s-blatt .werkbank__block h2, .s-selbsttest .werkbank__block h2 {
  font-size: 1.15rem; text-transform: none; letter-spacing: 0; color: var(--text); margin: 0 0 10px;
}
.s-hilfe .werkbank__block p, .s-grundlagen .werkbank__block p, .s-impressum .werkbank__block p { line-height: 1.55; max-width: 100ch; }
.s-hilfe .werkbank__block:first-of-type, .s-grundlagen .werkbank__block:first-of-type { margin-top: 20px; }
@media (max-width: 720px) {
  .s-hilfe .werkbank__block, .s-grundlagen .werkbank__block, .s-impressum .werkbank__block,
  .s-faelle .werkbank__block, .s-zugang .werkbank__block, .s-verwaltung .werkbank__block,
  .s-blatt .werkbank__block, .s-selbsttest .werkbank__block { margin: 10px 12px; padding: 14px !important; }
}
.s-blatt .blatt { border: 0; box-shadow: none; padding: 0; }

/* --- 6.0: Startseite mit demselben Kopfband wie die Werkbank-Seiten ------ */
.band6--brett { background: var(--dunkel); color: var(--dunkel-text); display: block; border-bottom: 0; }
.band6--brett .band6__marke h1 { color: var(--dunkel-text); }
.band6--brett .band6__marke p  { color: var(--dunkel-schwach); }
.band6--brett .band6__reiter { display: flex; }
.band6--brett .band6__reiter a { text-decoration: none; font-size: .95rem; }
.band6--brett .band6__reiter a:hover { color: var(--dunkel-text); }
.brett__gruss { padding-block: 26px 2px; }
.brett__gruss h1 { font-size: 1.7rem; margin: 0 0 6px; }
.brett__gruss p { max-width: 70ch; }
.rz__knoepfe--eng  { margin-bottom: 0; }
.rz__knoepfe--oben { margin: 12px 0 0; }
.rz__zeile--oben   { margin-top: 8px; }