/* 12.09.2026 | Gestaltung der ausgelieferten Seite. Ruhig, technisch, gut lesbar;
   keine Werbeoptik. 14.09.2026: Eingaben als Band ueber der Skizze (ab 1280 px vier Gruppen nebeneinander,
   ab 900 px zwei), die Skizze darunter in voller Breite; schmale Bildschirme untereinander. */
:root {
  --grund: #f6f7f8;
  --flaeche: #ffffff;
  --linie: #d4d7db;
  --text: #1d2125;
  --gedaempft: #5b636b;
  --akzent: #1f4e79;
  --gesperrt: #eef0f2;
  --warn: #8a5a00;
  --fehler: #9b1c1c;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 15px/1.45 "Segoe UI", Calibri, system-ui, sans-serif;
}
header {
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
  padding: 14px 22px;
}
h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: .2px; }
.stand { margin: 4px 0 0; color: var(--gedaempft); font-size: 12.5px; }
main {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  padding: 18px 22px 40px; max-width: 1760px;
}
section {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; padding: 16px 18px;
}
h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--akzent);
  border-bottom: 1px solid var(--linie); padding-bottom: 8px; }
h3 { margin: 14px 0 6px; font-size: 13.5px; font-weight: 600; }
h3:first-child { margin-top: 0; }

.feld { display: grid; grid-template-columns: 1fr 250px; gap: 10px; align-items: center; margin-bottom: 7px; }
.feld label { font-size: 13.5px; color: var(--text); }
input, select {
  font: inherit; font-size: 13.5px; padding: 4px 6px;
  border: 1px solid var(--linie); border-radius: 3px; background: #fff; color: var(--text); width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
input:disabled, select:disabled { background: var(--gesperrt); color: var(--gedaempft); }
.feld.gesperrt label, fieldset.gesperrt legend { color: var(--gedaempft); }
/* 19.09.2026: Zusatz unter Bohrung/Gleitloch (Anzeigefelder, folgen dem Nietkopf); im Ausdruck ohne Zusatz */
.feldzusatz { margin: -3px 0 8px; font-size: 12px; font-style: italic; color: var(--gedaempft); text-align: right; }
body.druck .feldzusatz { display: none; }

fieldset { border: 1px solid var(--linie); border-radius: 4px; margin: 10px 0; padding: 8px 10px 10px; }
legend { font-size: 12.5px; color: var(--gedaempft); padding: 0 4px; }
.vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
/* 17.09.2026: Vier gleich aussehende Felder ohne Beschriftung zwingen zum Raten, welcher Rand
   gemeint ist. Die Richtung steht jetzt unter dem Feld (Reihenfolge wie in der Variantentabelle:
   links, rechts, oben, unten). */
/* 17.09.2026: Systemwahl in drei Schritten - Bedienhilfe ueber der Auswahlliste.
   Die Schaltflaechen sind bewusst flach: Sie waehlen aus, sie fuehren nichts aus. */
.systempanel { border: 1px solid var(--linie); border-radius: 4px; padding: 7px 9px; margin-bottom: 10px; background: var(--flaeche); }
.panelzeile { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.panelzeile:last-child { margin-bottom: 0; }
/* 18.09.2026: display: flex schlaegt die Browserregel fuer [hidden] - die Zeilen Prinzip und
   Ausfuehrung blieben bei genieteten Systemen sichtbar, obwohl app.js sie ausblendet. */
.panelzeile[hidden] { display: none; }
.panelnr {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: var(--gesperrt);
  color: var(--gedaempft); font-size: 10.5px; line-height: 16px; text-align: center;
}
.panelname { flex: 0 0 82px; font-size: 12.5px; color: var(--gedaempft); }
.chip {
  font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 11px; cursor: pointer;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie);
}
.chip:hover:not(:disabled):not(.gesperrt) { border-color: var(--akzent); color: var(--akzent); }
.chip.gewaehlt { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.chip:disabled { background: var(--gesperrt); color: var(--gedaempft); border-color: var(--gesperrt); cursor: default; }
/* 20.09.2026: AUSGEGRAUT STATT VERSCHWIEGEN. Ein Angebot, das hier nicht gilt, bleibt sichtbar und
   ist gesperrt. Es sieht genauso aus wie eine mit "disabled" abgeschaltete Schaltflaeche - nur nimmt
   es weiter Maus und Finger an, damit es seinen Grund nennen kann (app.js panelZeigen). Eine als
   gewaehlt markierte Schaltflaeche bleibt auch gesperrt als gewaehlt erkennbar: sonst waere beim
   Systemwechsel nicht mehr zu sehen, welche Ausfuehrung zuletzt galt. */
.chip.gesperrt { background: var(--gesperrt); color: var(--gedaempft); border-color: var(--gesperrt); cursor: default; }
.chip.gesperrt.gewaehlt { background: #9aa3ab; color: #fff; border-color: #9aa3ab; }
.panelzeile.gesperrt .panelname { color: #9aa3ab; }
body.druck .systempanel { display: none; }

/* ---- 20.09.2026: KEIN TEXT VERLAESST SEINEN KASTEN ----------------------------------------------
   BEFUND aus dem laufenden Betrieb (gemeldet 20.09.2026): Im Befestigungsweg "Nieten" lief Text ueber
   den rechten Rand seines Kastens hinaus - in der Systemwahl und in der Zeile mit dem Profilabstand.
   Auf dem Entwicklungsrechner war davon nichts zu sehen, und das ist die eigentliche Auskunft: Die
   Seite schreibt "Segoe UI" vor. Wo es diese Schrift nicht gibt, nimmt der Browser die Systemschrift,
   und die ist breiter. Derselbe Satz braucht dann mehr Platz - und den hatte die Maske an drei
   Stellen nicht, weil dort nichts nachgeben konnte:
     1. der Schrittname der Systemwahl stand mit FESTER Breite in seiner Zeile (.panelname, 82 px),
     2. eine Schaltflaeche der Systemwahl konnte breiter werden als die Zeile, in der sie steht,
     3. eine lange Beschriftung ohne Trennstelle konnte breiter werden als ihre Spalte,
     4. die vier Randabstandsfelder standen in Spalten, deren Mindestbreite das Eingabefeld selbst
        bestimmt (1fr = minmax(auto, 1fr)) - je nach Browser ist diese Eigenbreite deutlich groesser.
   Die Regeln hier nehmen der Darstellung die Abhaengigkeit von der Schriftbreite: Was nicht passt,
   bricht um - im Notfall innerhalb des Wortes -, und was gar nicht umbrechen kann, wird mit
   Auslassungszeichen gekuerzt. NICHTS wird dadurch verschoben: Solange der Text passt (mit "Segoe UI"
   tut er das an jeder gepruften Stelle), aendert keine dieser Regeln ein einziges Pixel. Im Druck
   gelten sie nicht (body.druck ist ueberall ausgenommen) - der Ausdruck bleibt zeichengleich.
   Gemessen in tests/run_ausgrauen_node.js, Abschnitt "Ueberlauf" samt Gegenprobe. */
body:not(.druck) .gruppe,
body:not(.druck) .gruppe .feld,
body:not(.druck) .panelzeile,
body:not(.druck) .mit-info,
body:not(.druck) section.eingaben fieldset { min-width: 0; }
body:not(.druck) .feld label,
body:not(.druck) .gruppenkopf,
body:not(.druck) section.eingaben legend,
body:not(.druck) .panelname,
body:not(.druck) .feldzusatz,
body:not(.druck) .materialfolge,
body:not(.druck) .empfehlung {
  min-width: 0; max-width: 100%; overflow-wrap: break-word;
}
body:not(.druck) .chip { max-width: 100%; overflow-wrap: break-word; }
body:not(.druck) .infoknopf { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
body:not(.druck) section.eingaben select { text-overflow: ellipsis; }
body:not(.druck) .vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 17.09.2026: Info-Knopf. Klein und rund neben dem Feld, damit er nicht mit den Arbeitsknoepfen
   konkurriert; er erklaert nur und veraendert nichts.
   18.09.2026 GEAENDERT: Genau das war der Fehler - "ich sehe keine info boxen". Ein 22 mm grosser
   Kreis mit einem einzelnen "i" sieht nicht aus wie etwas, das man drueckt. Der Knopf traegt jetzt
   ein WORT, hat die Hoehe, die Schriftgroesse, den Innenabstand und die Eckenrundung der
   Arbeitsknoepfe ("Berechnen", "Drucken") und hebt sich durch Flaeche und Rahmen vom Fliesstext ab.
   Er bleibt der ZWEITE Rang: weisse Flaeche mit Akzentrahmen statt gefuellter Akzentflaeche - er
   erklaert weiter nur und rechnet nichts. Das "i" steht als kleines rundes Zeichen davor. */
.mit-info { display: flex; align-items: center; gap: 8px; }
.mit-info select { flex: 1 1 auto; min-width: 0; }
.infoknopf {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: inherit; font-size: 14px; padding: 6px 14px; border-radius: 4px;
  background: var(--flaeche); color: var(--akzent); border: 1px solid var(--akzent);
  line-height: 1.15; cursor: pointer;
}
.infoknopf::before {
  content: "i"; flex: 0 0 auto;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--akzent); color: var(--flaeche);
  font-size: 11.5px; font-style: italic; font-weight: 700; line-height: 17px; text-align: center;
}
.infoknopf:hover { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.infoknopf:hover::before { background: var(--flaeche); color: var(--akzent); }
body.druck .infoknopf { display: none; }

.randseite { display: flex; flex-direction: column; gap: 2px; }
.randseite span { font-size: 11.5px; color: var(--gedaempft); text-align: center; }
fieldset.gesperrt .randseite span { color: var(--gedaempft); }

.knoepfe { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
button {
  font: inherit; font-size: 14px; padding: 7px 18px; border: 0; border-radius: 4px;
  background: var(--akzent); color: #fff; cursor: pointer;
}
button:hover { background: #17395a; }
button:disabled { background: #93a4b4; cursor: default; }
.zustand { font-size: 12.5px; color: var(--gedaempft); }
.zustand.fehler { color: var(--fehler); }
.zustand.gut { color: #0a6b0a; }

/* 17.09.2026: Anmeldeseite - nur sichtbar, wenn der Zugangsschutz eingeschaltet ist. */
main.anmeldung { max-width: 560px; }
main.anmeldung h2 { margin-top: 0; }
main.anmeldung .feld { grid-template-columns: 1fr; gap: 3px; margin-bottom: 12px; }
main.anmeldung .knoepfe { margin-top: 16px; }
main.anmeldung .nebensache { margin-top: 24px; font-size: 12.5px; color: var(--gedaempft); }

.meldungen { margin-bottom: 10px; }
.meldungsliste { margin: 0; padding: 10px 12px 10px 28px; border-radius: 4px; font-size: 13px; }
.meldungsliste.hinweis { background: #fdf6e6; border: 1px solid #e8d7a8; color: var(--warn); }
.meldungsliste.fehler { background: #fdeceb; border: 1px solid #f0b7b4; color: var(--fehler); }
.meldungsliste li + li { margin-top: 5px; }

dl { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: 4px 16px; margin: 0; }
dt { color: var(--gedaempft); font-size: 13px; }
dd { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.block + .block { margin-top: 14px; }

/* 18.09.2026: Der Kasten "Expertenbereich" (.experte) und die Marke davor sind entfallen. Die
   Marke sah aus wie eine Schaltflaeche und war keine; der Kasten wurde mit der Werteliste
   gegenstandslos. Uebrig bleibt die Knopfreihe weiter unten.
*/
/* 18.09.2026: Die Werteliste der Zwischenwerte ist ersatzlos entfallen; mit ihr die Regeln
   .experte-zeile/.experte-paar/.experte-name/.experte-wert/.experte-leer. Geblieben ist die
   Lehre aus der Sichtprobe von heute: Eine eigene display-Regel schlaegt das Merkmal "hidden" -
   die Regeln dieser Datei stehen ueber der Grundeinstellung des Browsers. Wer display setzt, muss
   hidden ausdruecklich nachziehen, sonst steht die Leiste auch ohne Fachrolle auf dem Bildschirm. */
.werkzeugleiste[hidden] { display: none; }

/* 18.09.2026: WERKZEUGLEISTE FUER FACHLEUTE. An dieser Stelle stand bis heute die Werteliste; jetzt
   stehen hier Knoepfe. Sie sind bewusst leiser als "Berechnen"/"Drucken": Werkzeug, kein Hauptweg.
   Der Umschalter "Protokoll" zeigt seinen Zustand durch Flaeche und Rahmen an - wer ihn ansieht,
   muss erkennen koennen, ob er an ist. */
.werkzeugleiste { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: 4px; }
/* 18.09.2026 (Vorgabe): ALLE Knöpfe dieser Reihe gleich groß - gleiche Breite, gleiche Höhe,
   gleicher Innenabstand. Eine ruhige Reihe statt unterschiedlich breiter Kästchen. Die Breite kommt
   aus min-width und nicht aus einer festen Breite: Ein längeres Wort in einer anderen Sprache darf
   nicht abgeschnitten werden, sondern schiebt den Knopf auf. */
.werkzeug { font-size: 12px; padding: 5px 10px; border-radius: 4px;
  border: 1px solid var(--linie); background: #fff; color: var(--text); cursor: pointer;
  min-width: 165px; min-height: 28px; text-align: center; }
.werkzeug:hover { border-color: var(--akzent); color: var(--akzent); }
.werkzeug:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.werkzeug.gewaehlt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.werkzeug.gewaehlt:hover { color: #fff; }

/* 18.09.2026: Anzeigestelle des Pruefprotokolls. Feste Zeichenbreite, damit Meldungen untereinander
   ausgerichtet bleiben; in der Hoehe begrenzt, damit ein langer Lauf die Seite nicht auseinander
   zieht. Einzelmeldungen stehen leiser als die Zusammenfassungen - man soll die Gliederung eines
   Laufs sehen, ohne jede Zeile zu lesen. Leer bleibt die Flaeche unsichtbar (hidden). */
.protokoll { margin-top: 10px; padding: 8px 10px; max-height: 260px; overflow: auto;
  border: 1px solid var(--linie); border-left: 4px solid var(--akzent); border-radius: 4px;
  background: #fbfcfe; font-family: Consolas, "Courier New", monospace; font-size: 12px; }
.protokoll[hidden] { display: none; }
.protokoll p { margin: 0; white-space: pre-wrap; }
.protokoll .protokoll-zeile { color: var(--text); font-weight: 600; }
.protokoll .protokoll-einzeln { color: var(--gedaempft); }
/* 18.09.2026: Die Knopfreihe wird im Ausdruck ausgeblendet (siehe body.druck weiter unten) - die
   Werkzeugleiste steht darin und geht deshalb mit. Das ist so gewollt: Ein Ausdruck ist ein
   Ergebnis fuer Dritte, kein Werkzeugkasten. */
.hinweise p { margin: 6px 0; font-size: 13px; white-space: pre-wrap; }
.fuss { margin: 18px 0 0; padding-top: 10px; border-top: 1px solid var(--linie);
  color: var(--gedaempft); font-size: 12px; }

/* 18.09.2026: Fassungsangabe. Bewusst klein und rechts - sie soll auffindbar sein, nicht auffallen.
   Sie steht ABSICHTLICH nicht unter body.druck ... { display: none; }, anders als .fuss: ein
   ausgedrucktes Ergebnis soll den Stand nennen, unter dem es gerechnet wurde. */
.fassung-zeile { margin: 6px 0 0; text-align: right; color: var(--gedaempft);
  font-size: 11px; letter-spacing: 0.02em; }

/* Ergebniskarten: die Textfelder der Skizze wortgleich (Eingaben, Ausgaben, Ecken, Hinweise). */
.karte { border: 1px solid var(--linie); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; background: #fcfdfd; }
.karte h3 { margin: 0 0 6px; font-size: 13px; color: var(--akzent); }
.karte p { margin: 0; font-size: 13px; white-space: pre-wrap; font-variant-numeric: tabular-nums; }

/* Skizze: volle Breite der Ergebnisspalte, Seitenverhaeltnis aus der Zeichnung (viewBox). */
.skizze { margin: 0 0 14px; }
.skizze svg { display: block; width: 100%; height: auto; background: #ffffff; border: 1px solid var(--linie); border-radius: 4px; }
.skizze:empty { display: none; }
.start-ok { margin: 14px 0 2px; }

/* Ergebniszeile: das Urteil in einer Zeile ueber der Skizze (17.09.2026). Farben wie in der
   Zeichnung - gruen zulaessig, gelb grenzwertig, rot nicht zulaessig, grau ohne Pruefung. */
.ergebniszeile { margin: 14px 0 0; padding: 8px 12px; border-radius: 4px; border: 1px solid var(--linie);
  background: #f5f5f5; font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
/* 18.09.2026: gleiche Ursache wie bei .panelzeile - app.js blendet die Zeile ueber hidden aus. */
.ergebniszeile[hidden] { display: none; }
.ergebniszeile .urteil { font-size: 15.5px; font-weight: bold; }
.ergebniszeile .teil { color: var(--gedaempft); font-size: 13px; }
.ergebniszeile.gut { background: #eef7ee; border-color: #9ec79e; }
.ergebniszeile.gut .urteil { color: #0a6b0a; }
.ergebniszeile.grenz { background: #fdf6e6; border-color: #e8d7a8; }
.ergebniszeile.grenz .urteil { color: #8a6100; }
.ergebniszeile.schlecht { background: #fdf0f0; border-color: #e2a9a9; }
.ergebniszeile.schlecht .urteil { color: #b00000; }
.ergebniszeile.neutral .urteil { color: var(--gedaempft); }
body.druck .ergebniszeile { display: none; }
details.texte { margin-top: 6px; }
details.texte > summary { cursor: pointer; font-size: 13px; color: var(--akzent); padding: 4px 0 8px; }

/* Eingabemeldung direkt am Feld */
.feld.fehlerhaft input, .feld.fehlerhaft select, fieldset.fehlerhaft input { border-color: var(--fehler); background: #fff7f7; }
.feld.fehlerhaft label, fieldset.fehlerhaft legend { color: var(--fehler); }
.feldmeldung { grid-column: 1 / -1; margin: -2px 0 4px; font-size: 12px; color: var(--fehler); }

/* ---- Druck ------------------------------------------------------------------------------------------
   Druckvorlage: Teil 1 Eingaben, Teil 2 Skizze (nur Zeichenrahmen), A4 quer, Kopfzeile Arial 10 mittig,
   Plattenkontur ohne Linie. Eine Regelmenge ueber die Klasse body.druck: sie gilt im Druck (beforeprint) und in der
   Vorschau am Bildschirm (?druck=1). Seitenraender siehe @page. */
/* A4 quer. Kopfabstand 0,76 cm, Rand oben 2,0 cm (Kopfbereich 12,4 mm ueber dem Inhalt), unten 2,0 cm, links/rechts 1,78 cm.
   Nutzbar je Teil: 261,4 mm breit, unter der Kopfzeile 170 mm hoch (Teilhoehe 182 mm, 0,4 mm Luft gegen eine Leerseite). */
@page { size: A4 landscape; margin: 7.6mm 17.8mm 20mm; }
@media print {
  body { background: #ffffff; }
  dialog { display: none; }
}

/* ---- Rueckfrage Ja/Nein im Seitenstil. Die Vorgabe wird beim Oeffnen gesetzt (Fokus und die
   Klasse "nebensache" auf der nicht vorgegebenen Schaltflaeche), je nach Frage Nein oder Ja. ---- */
dialog.rueckfrage { max-width: 36em; border: 1px solid var(--linie); border-radius: 6px; padding: 16px 18px;
  color: var(--text); background: #ffffff; box-shadow: 0 8px 28px rgba(0, 0, 0, .25); }
dialog.rueckfrage::backdrop { background: rgba(20, 30, 40, .35); }
dialog.rueckfrage h3 { margin: 0 0 8px; font-size: 15px; color: var(--akzent); }
dialog.rueckfrage p { margin: 0; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
/* 18.09.2026: Ein langer Erklaertext (Koordinatenliste) muss im Fenster blaetterbar sein. Ohne diese
   Grenze reicht er unter den unteren Bildschirmrand, und der Knopf zum Schliessen ist dann nicht
   mehr erreichbar - das Fenster liesse sich nur noch mit Escape verlassen. */
dialog.rueckfrage p { max-height: 66vh; overflow: auto; }
dialog.rueckfrage .knoepfe { justify-content: flex-end; }

/* ---- 18.09.2026: Zweites Fenster "Koordinatenliste". Eine Pruefliste, kein Schaustueck: feste
   Zeichenbreite, damit Ziffern untereinander stehen und sich Zahl fuer Zahl vergleichen lassen;
   Kopfzeile bleibt beim Blaettern stehen. Die Klassennamen tragen alle das Vorzeichen
   "koordinaten-", weil .koordinaten im Eingabeteil schon etwas anderes bedeutet. ---- */
.koordinaten-seite { padding: 16px 22px 24px; max-width: 1760px; }
.koordinaten-kopf { display: grid; grid-template-columns: minmax(150px, max-content) 1fr;
  gap: 4px 16px; margin: 0 0 14px; }
.koordinaten-meldung { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--linie);
  border-radius: 4px; background: #fbfcfe; color: var(--gedaempft); font-size: 13px; }
.koordinaten-tabelle { border-collapse: collapse; font-size: 12.5px;
  font-family: Consolas, "Courier New", monospace; font-variant-numeric: tabular-nums; }
.koordinaten-tabelle th, .koordinaten-tabelle td { border: 1px solid var(--linie); padding: 2px 8px;
  text-align: left; white-space: nowrap; }
.koordinaten-tabelle thead th { position: sticky; top: 42px; background: var(--flaeche);
  color: var(--akzent); font-weight: 600; }
.koordinaten-tabelle td:first-child, .koordinaten-tabelle td:nth-child(5),
.koordinaten-tabelle td:nth-child(6), .koordinaten-tabelle td:nth-child(7) { text-align: right; }
.koordinaten-tabelle tbody tr:nth-child(even) { background: var(--grund); }
.druckkopf { display: none; }
/* Huellen je Teil: am Bildschirm ohne Wirkung, im Druck Einpassen und Zentrieren */
.teil-inhalt, .teil-block { display: contents; }
body.druck { background: #ffffff; }
body.druck header { display: none; }
body.druck main { display: block; max-width: none; padding: 0; width: 261.4mm; }
body.druck section { border: 0; border-radius: 0; padding: 0; background: #ffffff; }
body.druck .druckkopf { display: block; font-family: Arial, sans-serif; font-size: 10pt; color: #000000; text-align: center; margin: 0;
  height: 12.4mm; flex: none; box-sizing: border-box; }
/* je Teil eine Seite: Kopfzeile oben im Kopfbereich, darunter der Inhalt senkrecht und waagerecht zentriert */
body.druck section.eingaben, body.druck section.ergebnis { display: flex; flex-direction: column; height: 182mm; box-sizing: border-box; overflow: hidden; }
body.druck .teil-inhalt { display: flex; flex: 1; min-height: 0; flex-direction: column; justify-content: center; align-items: center; }
body.druck .teil-block { display: block; width: 261.4mm; }
body.druck .eingaben .teil-block { column-count: 2; column-gap: 12mm; }
body.druck .eingaben .druckkopf { column-span: all; }
body.druck .eingaben h2 { column-span: all; }
body.druck .feld { break-inside: avoid; }
body.druck fieldset { break-inside: avoid; }
body.druck .knoepfe { display: none; }
body.druck .feldmeldung { display: none; }
body.druck .ergebnis { break-before: page; }
body.druck .ergebnis h2 { display: none; }
body.druck .meldungen { display: none; }
body.druck .skizze { break-inside: avoid; margin: 0; }
body.druck .skizze svg { border: 0; max-height: 169mm; }
body.druck #skizze [data-name="SkizzePlatteKontur"] { stroke: none; }
body.druck #statik { display: none; }
body.druck #hinweise { display: none; }
body.druck details.texte { display: none; }
body.druck .fuss { display: none; }
/* 19.09.2026: Einlage "atmende Platte" (app.js) - die Urheberzeile erscheint nie im Druck. */
body.druck .einlage-zeile { display: none; }
@media print { .einlage-zeile { display: none; } }

/* ---- Varianten ---- */
.varianten { grid-column: 1 / -1; }
.varianten-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.variante { border: 1px solid var(--linie); border-radius: 4px; padding: 10px 12px; background: #fcfdfd; }
.variante h3 { margin: 0 0 8px; font-size: 13.5px; color: var(--akzent); }
.variante dl { grid-template-columns: minmax(120px, max-content) 1fr; }
.variante details { margin: 8px 0; font-size: 12.5px; }
.variante details > summary { cursor: pointer; color: var(--akzent); }
.variante .knoepfe { margin-top: 8px; }
button.nebensache { background: #5b636b; }
button.nebensache:hover { background: #3f464d; }
body.druck .varianten { display: none; }

/* ---- Projektdaten ---- */
.projektdaten .feld input { width: 100%; box-sizing: border-box; }

/* ---- Variantendruck: A4 hoch, Raender 0,25 Zoll, vier Bloecke je Seite ---- */
@page varianten { size: A4 portrait; margin: 0.25in; }
.varianten-druck { display: none; }
body.druck-varianten > header, body.druck-varianten > main { display: none; }
body.druck-varianten .varianten-druck { display: block; }
.vd-seite { page: varianten; break-after: page; }
.vd-seite:last-child { break-after: auto; }
.vd-inhalt { margin: 0 auto; font-family: Arial, Helvetica, sans-serif; color: #000000; background: #ffffff; }
.vd-titel { box-sizing: border-box; height: 22pt; margin-bottom: 8pt; border: 1px solid #000000; font-size: 9pt; font-weight: bold;
  display: flex; align-items: center; justify-content: center; text-align: center; }
.vd-reihe { display: flex; align-items: flex-start; }
.vd-block { flex: none; margin-right: 35.25pt; }
.vd-block[data-stelle="3"] { margin-right: 0; }
table.vd-block { border-collapse: collapse; font-size: 10pt; }
table.vd-block td { box-sizing: border-box; height: 18pt; padding: 0 3px; border: 1px solid #000000; white-space: nowrap; overflow: hidden;
  vertical-align: middle; background: #ffffff; line-height: 1.1; }
table.vd-block td.vd-l { font-weight: bold; text-align: left; }
table.vd-block td.vd-w { text-align: center; }
table.vd-block tr.vd-kopf td { background: #d9e1f2; font-size: 12pt; font-weight: bold; text-align: center;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
table.vd-block tr.vd-abschnitt td { font-weight: bold; text-align: center; }
/* 19.09.2026: Geltungsbereich "Nur fuer den deutschen Markt" auf JEDER Variantenseite. app.js haengt
   die Zeile an jede Seite unter die Bloecke (ausserhalb der verkleinerten Huelle, deshalb in voller
   Schriftgroesse). Gestaltung wie die Druckzeile der Konfiguration (.marktzeile). Keine Regel blendet
   sie aus: der Behaelter selbst ist nur im Variantendruck zu sehen, dort steht sie immer. */
.vd-markt {
  box-sizing: border-box; margin: 3mm 0 0; padding: 1mm 0 0; break-inside: avoid;
  border-top: 0.2mm solid #000000; color: #000000; background: #ffffff;
  font-family: Arial, Helvetica, sans-serif; font-size: 7.5pt; line-height: 1.25;
}
.vd-markt strong { color: #000000; }

/* ---- Ausgabezellen (E18:J24) ---- */
.ausgabezellen[hidden] { display: none; }
.ausgabezellen table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.ausgabezellen th { text-align: left; font-weight: bold; padding: 2px 8px 2px 0; white-space: nowrap; }
.ausgabezellen td { text-align: center; padding: 2px 4px; white-space: nowrap; }
.ausgabezellen td[data-zelle] { font-weight: bold; }
.ausgabezellen td.einheit { font-weight: normal; }
body.druck .ausgabezellen { break-inside: avoid; column-span: all; }
/* Koordinaten-Hinweis neben den Ausgaben (K19:L23) */
.ausgabezellen .koordinaten { margin-top: 6px; font-size: 12px; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; }
.ausgabezellen .koordinaten [data-zelle="K19"] { grid-column: 1 / -1; font-weight: bold; }

/* Start-Hinweis als aufklappbarer Kasten */
.starthinweis { margin: 8px 0 0; padding: 6px 10px; border: 1px solid #c9d3e3; background: #f5f8fc; font-size: 13px; max-width: 70em; }
.starthinweis summary { cursor: pointer; font-weight: bold; }
.starthinweis summary:hover { text-decoration: underline; }
/* Zugeklappt sieht der Kasten wie eine Schaltflaeche aus und wird schmal: sonst uebersieht man, dass
   er sich wieder oeffnen laesst (Befund 17.09.2026). Reine Gestaltung - die Beschriftung bleibt
   uebersetzbar, es kommt kein Text aus dem Stil dazu. */
.starthinweis:not([open]) { max-width: 32em; background: #e8eef7; border-color: #9fb3d1; }
.starthinweis:not([open]) summary { color: var(--akzent); }
.starthinweis h3 { font-size: 13px; margin: 10px 0 2px; }
.starthinweis p, .starthinweis ul { margin: 4px 0; }
.starthinweis ul { padding-left: 1.3em; }
body.druck .starthinweis { display: none; }
@media print { .starthinweis { display: none; } }

/* ---- 19.09.2026: Geltungsbereich "Nur fuer den deutschen Markt" ---------------------------------
   AM BILDSCHIRM: erster Absatz im Start-Hinweis, mit Randstrich abgesetzt.
   IM AUSDRUCK: der Start-Hinweis ist dort ausgeblendet, deshalb steht der Satz als eigene Zeile
   unten in JEDEM Druckteil (Eingaben, Skizze). Sie ist ein Teil des Seitenflusses (flex: none) und
   liegt ueber dem reservierten Fussraum von 9 mm - also nie unter dem Hinweis auf den Testbetrieb.
   druckEinpassen() misst den Platz der Huelle nach dieser Zeile und passt den Inhalt ein; es bleibt
   bei einer Seite je Teil.
   Die Zeile haengt an KEINEM Merkmal, das ein Skript setzt (kein hidden, keine Rollenklasse): sie
   steht im Ausdruck immer, auch wenn der Server den Testbetrieb abgeschaltet hat. */
.markthinweis { margin: 6px 0 8px; padding: 4px 8px; border-left: 3px solid var(--akzent); background: #ffffff; }
.marktzeile { display: none; }
body.druck .marktzeile {
  display: block; flex: none; box-sizing: border-box; width: 261.4mm; margin: 1.5mm auto 0; padding: 1mm 0 0;
  border-top: 0.2mm solid #000000; color: #000000; background: #ffffff;
  font-family: Arial, Helvetica, sans-serif; font-size: 7.5pt; line-height: 1.25;
}
body.druck .marktzeile strong { color: #000000; }
@media print { .marktzeile { display: block; } }

/* ---- Schmale Bildschirme (Handy): nichts breiter als der Bildschirm ---- */
main > section { min-width: 0; }
fieldset { min-width: 0; }
.knoepfe { flex-wrap: wrap; }
@media (max-width: 600px) {
  header { padding: 12px 14px; }
  main { padding: 12px 10px 30px; gap: 12px; }
  section { padding: 12px; }
  .feld { grid-template-columns: minmax(0, 1fr) minmax(0, 58%); }
  dl { grid-template-columns: minmax(0, 45%) minmax(0, 1fr); }
  dd { overflow-wrap: anywhere; }
  .varianten-liste { grid-template-columns: minmax(0, 1fr); }
  .ausgabezellen table, .ausgabezellen tbody { display: block; }
  .ausgabezellen tr { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.2em; column-gap: 6px; margin-bottom: 4px; }
  .ausgabezellen th, .ausgabezellen td { display: block; white-space: normal; }
  .ausgabezellen td[data-zelle] { text-align: right; }
}
/* 14.09.2026: Empfehlung unter der Systemwahl (Kurzpruefung nach Tabelle), zwei Zeilen */
.empfehlung { margin: -3px 0 10px; font-size: 12.5px; font-style: italic; color: var(--akzent); white-space: pre-line; }

/* ---- 14.09.2026: Eingaben als Band ueber der Skizze (Entscheid 11.09.2026) ----
   Nur am Bildschirm (body ohne Klasse druck). Der Druck bleibt unveraendert: Gruppen ohne eigene Box, Gruppenkoepfe aus. */
.gruppenkopf { margin: 2px 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--gedaempft); }
.gruppe > .gruppenkopf ~ .gruppenkopf { margin-top: 14px; }
.gruppe { min-width: 0; margin-bottom: 8px; }
body.druck .gruppe { display: contents; }
body.druck .gruppenkopf { display: none; }
body:not(.druck) .skizze svg { max-height: calc(100vh - 32px); }
@media (min-width: 900px) {
  body:not(.druck) section.eingaben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; align-items: start; }
  body:not(.druck) section.eingaben h2, body:not(.druck) section.eingaben .projektdaten,
  body:not(.druck) section.eingaben .g-material,
  body:not(.druck) section.eingaben .ausgabezellen, body:not(.druck) section.eingaben .knoepfe { grid-column: 1 / -1; }
  body:not(.druck) .gruppe .feld { grid-template-columns: minmax(0, 1fr) minmax(0, 130px); margin-bottom: 4px; }
  body:not(.druck) section.eingaben input, body:not(.druck) section.eingaben select { padding-top: 3px; padding-bottom: 3px; }
  body:not(.druck) .projektdaten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; margin-top: 0; }
  body:not(.druck) .projektdaten legend { grid-column: 1 / -1; }
  body:not(.druck) .projektdaten .feld { grid-template-columns: auto minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  body:not(.druck) section.eingaben { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body:not(.druck) .projektdaten { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* 18.09.2026: Das Material steht als eigene Zeile ueber allen Gruppen (Zeile 3); darunter folgen
     System, Format, Unterkonstruktion/Lasten, Befestigung in genau dieser Reihenfolge. Die Ausgaben
     bleiben wie bisher direkt unter der Systemspalte - sie ist die kurze der vier. */
  body:not(.druck) section.eingaben .g-material { grid-row: 3; }
  body:not(.druck) section.eingaben .g-sys { grid-column: 1; grid-row: 4; }
  body:not(.druck) section.eingaben .ausgabezellen { grid-column: 1; grid-row: 5; margin-top: 0; }
  body:not(.druck) section.eingaben .g-format { grid-column: 2; grid-row: 4 / span 2; }
  body:not(.druck) section.eingaben .g-uk { grid-column: 3; grid-row: 4 / span 2; }
  body:not(.druck) section.eingaben .g-bef { grid-column: 4; grid-row: 4 / span 2; }
  body:not(.druck) section.eingaben .knoepfe { grid-row: 6; margin-top: 4px; }
  /* Systemauswahl: Bezeichnung ueber der Liste, Liste in voller Spaltenbreite - 19.09.2026: gilt jetzt
     in jeder Breite (Regel nach dem Materialblock weiter unten) */
  /* Ausgaben in der schmalen System-Spalte: je Tabellenzeile zwei Zeilen (Bezeichnung, Wert, Einheit) */
  body:not(.druck) .ausgabezellen table, body:not(.druck) .ausgabezellen tbody { display: block; }
  body:not(.druck) .ausgabezellen tr { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.6em; column-gap: 6px; }
  body:not(.druck) .ausgabezellen th, body:not(.druck) .ausgabezellen td { display: block; white-space: normal; padding-top: 1px; padding-bottom: 1px; }
  body:not(.druck) .ausgabezellen td[data-zelle] { text-align: right; }
}
/* ---- 18.09.2026: Material als ERSTE Entscheidung ----
   Eigene Zeile ganz oben, sichtbar abgesetzt: eigener Rahmen, eigener Untergrund, Ueberschrift in der
   Akzentfarbe. Damit ist erkennbar, dass hier eine Entscheidung getroffen wird und nicht eine Groesse
   unter vielen eingetragen wird. Die Regeln stehen NACH den Spaltenregeln oben, weil sie die dortige
   Feldaufteilung (Bezeichnung / 130 px) fuer diese eine Zeile ersetzen: ueber die volle Breite gehoert
   die Auswahlliste neben die Bezeichnung, nicht an den rechten Rand. Im Ausdruck bleibt alles wie zuvor
   (Gruppen ohne Rahmen, Gruppenkoepfe aus); dort entfaellt auch der erklaerende Satz. */
.g-material { border: 1px solid var(--linie); border-left: 3px solid var(--akzent); border-radius: 6px;
  padding: 9px 12px; background: var(--flaeche); }
.g-material .gruppenkopf { margin: 0 0 6px; color: var(--akzent); }
body:not(.druck) .g-material .feld { display: grid; grid-template-columns: auto minmax(0, 250px);
  justify-content: start; column-gap: 10px; margin-bottom: 0; }
.materialfolge { margin: 6px 0 0; font-size: 12.5px; color: var(--gedaempft); }
/* 19.09.2026: Systemauswahl in JEDER Breite mit der Bezeichnung ueber der Liste (bisher nur ab 1280 px).
   Neben der Bezeichnung blieben bei 390 px nur rund 115 px fuer die Liste (abzueglich Info-Knopf), zwischen
   900 und 1279 px nur rund 45 px - keine Beschriftung passte. Im Druck unveraendert. */
body:not(.druck) .g-sys .feld { grid-template-columns: minmax(0, 1fr); gap: 3px; }
body.druck .materialfolge { display: none; }

/* 15.09.2026: Ausgaben sind Mengen je Platte - Hinweis ueber der Tabelle */
.ausgaben-hinweis { margin: 0 0 6px; font-size: 12px; font-style: italic; color: var(--gedaempft); }
.ausgabezellen legend strong, .ausgaben-hinweis strong { font-style: normal; color: var(--text); }

/* ---- 16.09.2026: Sprachwahl oben rechts im Kopf ----
   Drei kleine Schaltflaechen; die Flaggen sind reine Schriftzeichen (keine Bilddatei, keine fremde Adresse).
   Auf schmalen Bildschirmen stehen sie im Fluss ueber der Ueberschrift, damit nichts breiter wird als der Bildschirm.
   Im Druck sind sie weg (der ganze Kopf ist es). */
header { position: relative; }
/* 18.09.2026: Oben rechts stehen jetzt zwei Dinge nebeneinander - der Zeitpunkt der Rechnung und
   die Sprachwahl. Beide sitzen in einer gemeinsamen Huelle; nur sie wird abgesetzt positioniert,
   die Sprachwahl darin wieder im normalen Fluss. */
.kopf-rechts { position: absolute; top: 12px; right: 22px; display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.kopf-rechts .sprachwahl { position: static; top: auto; right: auto; }
.sprachwahl { position: absolute; top: 12px; right: 22px; display: flex; gap: 6px; flex-wrap: wrap; }
.sprachwahl .sprachknopf { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 12.5px;
  background: var(--flaeche); color: var(--gedaempft); border: 1px solid var(--linie); border-radius: 4px; }
.sprachwahl .sprachknopf:hover { background: var(--gesperrt); color: var(--text); }
.sprachwahl .sprachknopf.gewaehlt { background: var(--akzent); border-color: var(--akzent); color: #ffffff; }
.sprachwahl .flagge { font-size: 14px; line-height: 1; }
.sprachwahl .kuerzel { letter-spacing: .4px; }
body.druck .sprachwahl { display: none; }
@media (max-width: 700px) {
  .sprachwahl { position: static; margin: 0 0 8px; justify-content: flex-end; }
}

/* ---- 18.09.2026: Fugenlineal - Bedienhilfe an der Fuge der Skizze ----
   Ein kleines Massband im Stil eines Gliedermassstabs. Es erscheint nach drei Sekunden Verweilen
   und geht nach zwei Sekunden von selbst wieder. Zurueckhaltend wie ein Werkzeug: kleine Schrift,
   die gedeckten Farben der Seite, keine Schatten- oder Farbspielerei. Es steht immer NEBEN der
   Fuge (die Lage rechnet das Programm aus) und nimmt keine Mausereignisse an, damit die Skizze
   darunter sichtbar und bedienbar bleibt. Im Druck kann es nicht vorkommen - es lebt nur zwei
   Sekunden -, wird aber sicherheitshalber ausgeblendet. */
.fugenlineal {
  position: fixed; left: 0; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 7px;
  padding: 3px 8px 4px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(29, 33, 37, .14);
  font-size: 11.5px; line-height: 1.25; color: var(--text);
  white-space: nowrap; pointer-events: none;
  transform-origin: left center;
  animation: fugenlineal-auf 180ms ease-out;
}
/* Die drei Glieder des Massstabs, jedes mit seiner Strichteilung. */
.fugenlineal-band { display: flex; align-items: center; gap: 1px; }
.fugenlineal-band i {
  display: block; width: 15px; height: 10px;
  border: 1px solid var(--gedaempft); border-radius: 1px;
  /* Strichteilung, die wie bei einem Massstab nur vom unteren Rand aufsteigt. */
  background: repeating-linear-gradient(to right, var(--gedaempft) 0 1px, transparent 1px 5px) bottom / 100% 4px no-repeat;
  opacity: .7;
}
.fugenlineal-marke { color: var(--gedaempft); }
.fugenlineal-wert { font-variant-numeric: tabular-nums; }
@keyframes fugenlineal-auf { from { opacity: 0; transform: scaleX(.88); } to { opacity: 1; transform: none; } }
/* Wer ruhige Darstellung eingestellt hat, bekommt das Massband ohne jede Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .fugenlineal { animation: none; }
}
body.druck .fugenlineal { display: none; }

/* ---- Hinweis auf den Testbetrieb (18.09.2026) ---------------------------------------------------
   ZWECK: Wer mit dem Werkzeug arbeitet, soll zu JEDEM Zeitpunkt sehen, dass die Werte vorlaeufig sind -
   am Bildschirm und auf dem Papier. Ein ausgedrucktes Ergebnis wird weitergereicht; ohne Kennzeichnung
   weiss spaeter niemand mehr, unter welchem Vorbehalt die Zahlen entstanden sind.
   GESTALTUNG: gedeckt, kein Rot, kein Ausrufezeichen - es ist kein Fehler, sondern ein Zustand.
   Farben ausschliesslich aus den Variablen auf :root.
   AM BILDSCHIRM: position: sticky statt fixed. Der Hinweis klebt beim Blaettern am unteren Rand,
   belegt aber seinen Platz im Seitenfluss - das letzte Bedienfeld verschwindet deshalb NIE dauerhaft
   unter ihm, auch nicht am Seitenende. */
.testbetrieb {
  position: sticky; bottom: 0; z-index: 50;
  margin: 0; padding: 9px 22px 10px;
  background: var(--gesperrt);
  border-top: 2px solid var(--gedaempft);
  color: var(--text);
  font-size: 12.5px; line-height: 1.45;
}
.testbetrieb[hidden] { display: none; }
.testbetrieb p { margin: 0; max-width: 1760px; }
.testbetrieb strong { color: var(--akzent); letter-spacing: .02em; }

/* 18.09.2026, Festlegung (Variante B): AM BILDSCHIRM NACH ROLLE, IM AUSDRUCK IMMER.
   Die Klasse "nur-druck" nimmt den Hinweis vom Bildschirm, laesst ihn aber auf dem Papier stehen.
   GRUND: Der Bildschirm ist Arbeitsflaeche - wer den Vorbehalt kennt, braucht ihn dort nicht staendig
   zu sehen. Der Ausdruck dagegen geht aus dem Haus und wird weitergereicht; er muss den Vorbehalt
   IMMER tragen, gleich wer ihn erzeugt hat. Ein Fachmann beim Hersteller kann dieselbe Rolle haben
   wie der Betreiber - ohne diese Trennung verliesse ein ungekennzeichneter Ausdruck das Haus.
   Getrennt davon bleibt das Merkmal [hidden]: es gehoert allein dem Serverschalter --testbetrieb und
   nimmt den Hinweis ueberall weg, auch im Ausdruck (siehe die Regeln im Druckblock unten). */
.testbetrieb.nur-druck { display: none; }

/* IM AUSDRUCK: position: fixed. Nach den Regeln fuer seitenweise Ausgabe wiederholt sich ein fest
   gesetzter Kasten auf JEDER Seite - genau das ist hier gewollt (Eingaben, Skizze, Variantenseiten).
   Er steht ausserhalb des Seitenflusses und ruehrt das Einpassen der Teile deshalb NICHT an.
   Damit er auf nichts faellt, bekommt jeder Teil unten 9 mm Platz: druckEinpassen() misst den frei
   gebliebenen Raum selbst und passt den Inhalt in die verbleibende Hoehe ein - es bleibt bei einer
   Seite je Teil, nur der Verkleinerungsfaktor des vollen Teils faellt entsprechend kleiner aus. */
body.druck .testbetrieb {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 9mm; padding: 0; z-index: 70;
  display: flex; align-items: center;
  background: #ffffff; color: #000000;
  border-top: 0.3mm solid #000000; border-radius: 0;
  font-family: Arial, Helvetica, sans-serif; font-size: 8pt; line-height: 1.2;
}
body.druck .testbetrieb p { width: 261.4mm; margin: 0 auto; }
body.druck .testbetrieb strong { color: #000000; }
/* 18.09.2026 (Variante B): Im Ausdruck steht der Hinweis IMMER - die Rolle der Sitzung aendert daran
   nichts. Beide Regeln sind ausdruecklich hingeschrieben und nicht der Reihenfolge ueberlassen:
   die erste holt den am Bildschirm abgeblendeten Hinweis auf dem Papier zurueck, die zweite laesst
   dem Serverschalter [hidden] den Vortritt - endet der Testbetrieb, ist der Hinweis auch hier weg.
   Das Einpassen der Seite ruehrt das nicht an: der Kasten steht mit position: fixed ausserhalb des
   Seitenflusses, und die 9 mm Fussraum stehen unabhaengig davon als padding-bottom an den Teilen. */
body.druck .testbetrieb.nur-druck { display: flex; }
body.druck .testbetrieb[hidden] { display: none; }
body.druck section.eingaben, body.druck section.ergebnis { padding-bottom: 9mm; }
body.druck-varianten .vd-seite { padding-bottom: 9mm; }

/* ---- 18.09.2026: Drittes Fenster "Testlauf". Es benutzt den Rahmen und die Tabelle der
   Koordinatenliste weiter (dieselbe Art Pruefliste) und bringt nur das mit, was dort fehlt:
   ein Urteil in einem Satz, das man nicht uebersehen kann, und die Kennzeichnung abweichender
   Zeilen. Rot und Gruen stehen nie allein - die Zahl der Abweichungen steht daneben. ---- */
.testlauf-urteil {
  margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--linie); border-radius: 4px;
  font-size: 14.5px; font-weight: 600;
}
.testlauf-urteil[hidden] { display: none; }
.testlauf-urteil.gut { border-color: #2f7d32; background: #f2f9f2; color: #2f7d32; }
.testlauf-urteil.schlecht { border-color: #b3261e; background: #fdf3f2; color: #b3261e; }
.testlauf-ueberschrift { margin: 20px 0 8px; font-size: 15px; font-weight: 600; color: var(--akzent); }
.testlauf-ueberschrift[hidden] { display: none; }
.testlauf-tabelle td:nth-child(4), .testlauf-tabelle td:nth-child(5),
.testlauf-tabelle td:nth-child(6), .testlauf-tabelle td:nth-child(7),
.testlauf-tabelle td:nth-child(8) { text-align: right; }
.testlauf-tabelle td:nth-child(3) { white-space: normal; max-width: 44ch; }
.testlauf-tabelle tbody tr.schlecht td { color: #b3261e; }
.testlauf-liste { max-height: 420px; }
.testlauf-liste .schlecht { color: #b3261e; }

/* ---- Rueckmeldung im Testbetrieb (18.09.2026) ---------------------------------------------------
   Der Knopf oben rechts pulsiert, solange der Tester das Fenster noch nicht gesehen hat. Danach steht
   er still und bleibt erreichbar - ein blinkender Knopf, den man schon beantwortet hat, ist Laerm.
   Wer ruhige Darstellung eingestellt hat, bekommt den Hinweis ueber die Farbe statt ueber Bewegung.
   Im Ausdruck hat beides nichts zu suchen. */
.rueckmeldung-knopf { padding: 3px 11px; font-size: 12.5px; border-radius: 4px;
  background: var(--flaeche); color: var(--gedaempft); border: 1px solid var(--linie); }
.rueckmeldung-knopf:hover { background: var(--gesperrt); color: var(--text); }
.rueckmeldung-knopf.pulst { background: var(--akzent); border-color: var(--akzent); color: #ffffff;
  animation: rueckmeldung-puls 2.2s ease-in-out infinite; }
@keyframes rueckmeldung-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(31, 90, 140, .22); }
}
@media (prefers-reduced-motion: reduce) {
  .rueckmeldung-knopf.pulst { animation: none; }
}
dialog.rueckmeldung label { display: block; margin: 12px 0 4px; font-size: 13px; color: var(--gedaempft); }
dialog.rueckmeldung textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px;
  padding: 7px 8px; border: 1px solid var(--linie); border-radius: 4px; resize: vertical; }
dialog.rueckmeldung .hinweis-klein { margin: 8px 0 0; font-size: 12px; color: var(--gedaempft); }
body.druck .rueckmeldung-knopf { display: none; }
@media print { .rueckmeldung-knopf { display: none; } }

/* 20.09.2026 (Befund S4/A2 der Schwachstellenprüfung): Abmeldeknopf in der Kopfzeile. Gleiche
   Gestalt wie der Rückmeldeknopf daneben, aber ein eigener Name - die beiden sollen unabhängig
   voneinander bleiben (der eine pulst, der andere nie). Im Ausdruck hat er nichts verloren. */
.kopfknopf { padding: 3px 11px; font-size: 12.5px; border-radius: 4px;
  background: var(--flaeche); color: var(--gedaempft); border: 1px solid var(--linie); }
.kopfknopf:hover { background: var(--gesperrt); color: var(--text); }
body.druck .kopfknopf { display: none; }
@media print { .kopfknopf { display: none; } }

/* 18.09.2026: Bei schmalem Fenster steht die Kopfzeile jetzt UNTER dem Titel statt darueber.
   Grund: Die Huelle oben rechts ist absolut positioniert; sie schwebt ueber dem Titel, sobald beide
   zusammen breiter sind als das Fenster. Gemessen: bis 18.09. brauchte es dafuer rund 630 px, mit
   dem Knopf "Rueckmeldung" rund 750 px - derselbe Mangel, nur frueher sichtbar. Unterhalb dieser
   Breite wird die Huelle in den normalen Fluss zurueckgeholt; dort kann sie nichts mehr verdecken.
   Am Arbeitsplatz (Layout A, zweispaltig) aendert sich nichts. */
@media (max-width: 800px) {
  .kopf-rechts { position: static; margin: 0 0 8px; justify-content: flex-start; }
  header h1 { margin-top: 0; }
}

/* 19.09.2026: OFFENE BEGRIFFE - hochgestelltes Fragezeichen hinter einem Fachbegriff, dessen
   Uebersetzung (EN/ES) noch nicht geprueft ist (sprache.js, Kopf "OFFENE BEGRIFFE"). Hinweis beim
   Ueberfahren (title) und als kleiner Aufklapptext beim Antippen. Im Druck ausgeblendet. */
.uebers-offen {
  font-size: 0.72em; font-weight: 700; line-height: 0; color: #8a5a00; cursor: help;
  margin-left: 1px; padding: 0 2px; border-radius: 3px; font-style: normal;
}
.uebers-offen:hover, .uebers-offen:focus-visible { background: #fff3cd; outline: 1px solid #c9a227; }
.uebers-offen-kasten {
  position: fixed; z-index: 10000; max-width: calc(100vw - 32px); padding: 6px 9px;
  background: #fffbe6; color: #1d2125; border: 1px solid #c9a227; border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); font-size: 13px; line-height: 1.35; font-weight: normal; font-style: normal;
}
.uebers-offen-kasten[hidden] { display: none; }
@media print { .uebers-offen, .uebers-offen-kasten { display: none !important; } }