/* Baurechenwerk - Basis-Stylesheet
   Ein einziges Stylesheet fuer alle Seiten. Tokens oben, Komponenten unten. */

:root {
  --bg: #f1f1ec;
  --surface: #ffffff;
  --surface-2: #e9e9e4;
  --border: #cfcfc7;
  --border-stark: #a4a49a;
  --text: #131411;
  --muted: #595b53;
  --accent: #184663;
  --accent-hell: #e3eef4;
  --ok: #256034;
  --ok-hell: #e4f1e6;
  --warn: #7c4f00;
  --warn-hell: #fbf0d8;
  --bad: #921c1c;
  --bad-hell: #f8e5e3;
  --radius: 4px;
  /* Hoehe der Eingabe- und Auswahlfelder: 15px/1.5 + 2 x 7px Innenabstand +
     Rahmen. Fest gesetzt, damit ein Feld mit kleinerer Schrift nicht aus der
     Zeile faellt. */
  --feldhoehe: 38.5px;
  /* dasselbe fuer die engen Zeilen der Schichtentabellen (4px Innenabstand) */
  --zeilenfeld: 31px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121416;
    --surface: #1e2124;
    --surface-2: #262a2e;
    --border: #3e444b;
    --border-stark: #5a616a;
    --text: #f0efea;
    --muted: #b0b3ab;
    --accent: #8cc3e2;
    --accent-hell: #1b2f3b;
    --ok: #8fd09e;
    --ok-hell: #1c2e21;
    --warn: #e5b255;
    --warn-hell: #33280f;
    --bad: #ea9a93;
    --bad-hell: #35201e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
}

a { color: var(--accent); }

/* Das hidden-Attribut setzt der Browser nur mit display: none an, und das
   verliert gegen jede eigene Regel mit display - eine ausgeblendete
   .feld-reihe blieb dadurch sichtbar. */
[hidden] { display: none !important; }

/* Tief- und Hochstellung ohne Einfluss auf die Zeilenhoehe. Von Haus aus
   verschiebt "vertical-align: sub" die Zeilenbox nach unten und macht sie
   hoeher - eine Beschriftung mit h_T stand dadurch hoeher als ihre Nachbarn
   und das Eingabefeld darunter tiefer. */
sub, sup { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* ---------- Layout ---------- */

.kopf {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.kopf-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 54px;
  flex-wrap: wrap;
}
.marke {
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 9px;
}
.marke .zeichen {
  width: 22px; height: 22px;
  border: 1.5px solid var(--accent);
  border-radius: 3px;
  display: grid; place-items: center;
  font: 600 12px/1 var(--mono);
  color: var(--accent);
}
.kopf nav { display: flex; gap: 20px; font-size: 14px; margin-left: auto; flex-wrap: wrap; }
.kopf nav a { color: var(--muted); text-decoration: none; }
.kopf nav a:hover, .kopf nav a[aria-current] { color: var(--text); }
/* Fuenf Bereiche passen so auf die meisten Handys in eine Zeile, sonst bricht die letzte um */
@media (max-width: 520px) { .kopf nav { gap: 11px; font-size: 13.5px; row-gap: 4px; } }

main { max-width: 1180px; margin: 0 auto; padding: 26px 20px 80px; }
.schmal { max-width: 900px; }

.seitentitel { margin: 6px 0 4px; font-size: 26px; letter-spacing: -0.015em; }
.seitenlead { margin: 0 0 22px; color: var(--muted); max-width: 62ch; }

.krumen { font-size: 13px; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.krumen a { color: var(--muted); }

.spalten { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 22px; align-items: start; }
/* minmax(0, …) statt 1fr: 1fr heisst minmax(auto, 1fr), dann drueckt eine
   breite Tabelle die Spalte ueber den Bildschirmrand hinaus. */
@media (max-width: 900px) { .spalten { grid-template-columns: minmax(0, 1fr); } }

.fuss {
  max-width: 1180px; margin: 0 auto; padding: 22px 20px 40px;
  border-top: 1px solid var(--border); color: var(--muted); font-size: 13px;
}
.fuss .rechtslinks a { color: var(--muted); }

/* ---------- Impressum, Datenschutz ---------- */

.rechtstext .karte { max-width: 820px; }
.rechtstext h2 { font-size: 17px; margin: 14px 0 6px; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p, .rechtstext li { max-width: 72ch; }
.rechtstext ul { padding-left: 20px; }

/* Kontaktformular (kontakt.html) */
.kontaktformular { max-width: 560px; margin-top: 14px; }
.kontaktformular textarea {
  width: 100%; font: inherit; padding: 7px 9px; resize: vertical; min-height: 9em;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-stark); border-radius: var(--radius);
}
.kontaktformular textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.kontaktformular #ko-status { margin-top: 12px; }
/* Fangfeld fuer Programme: aus dem Bild geschoben, nicht display:none - das erkennen manche */
.nicht-ausfuellen { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Noch auszufuellende Angaben - fallen auf, damit keine live geht */
.platzhalter { background: var(--warn-hell); color: var(--warn); padding: 0 4px; border-radius: 3px; }
table.rechtstabelle { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 12px; }
table.rechtstabelle th, table.rechtstabelle td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.rechtstabelle th { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); }
@media (max-width: 640px) {
  table.rechtstabelle thead { display: none; }
  table.rechtstabelle tr { display: block; border-bottom: 1px solid var(--border); padding: 6px 0; }
  table.rechtstabelle td { display: block; border: 0; padding: 3px 0; }
}

/* ---------- Karten ---------- */

.karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.karte > h2, .karte > h3 { margin: 0 0 12px; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.karte.flach { padding: 0; overflow: hidden; }

/* ---------- Formular ---------- */

.feld { margin-bottom: 12px; }
.feld > label { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); margin-bottom: 4px; }
.feld .einheit { color: var(--muted); font-size: 12px; }

input[type="text"], input[type="number"], input[type="email"], select {
  width: 100%;
  padding: 7px 9px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-stark);
  border-radius: var(--radius);
  font: inherit;
  min-height: var(--feldhoehe);
}
input[type="number"], input[inputmode="decimal"] { font-family: var(--mono); }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Ohne das zeichnet Safari das Auswahlfeld selbst: eigene Schriftgroesse,
   eigene Hoehe, senkrechte Innenabstaende werden verworfen - das Feld steht
   dann niedriger als die Eingabefelder daneben. Mit appearance: none gilt die
   Regel oben fuer beide, das Dreieck wird selbst gezeichnet (zwei Verlaeufe in
   currentColor, damit es im dunklen Farbschema mitgeht). */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 26px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px;
}

/* Enge Zeilen: dort sind die Eingabefelder flacher gesetzt - das Auswahlfeld
   daneben bekommt denselben Innenabstand, sonst steht es hoeher. */
table.schichten select, .schichtzeile select, .freizeile select, .mini select {
  padding: 4px 22px 4px 6px;
  background-position: right 13px center, right 8px center;
}
table.schichten select, table.schichten input, .schichtzeile select, .schichtzeile input,
.freizeile select, .freizeile input, .mini input, .mini select { min-height: 0; }

.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feld-reihe-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

button, .knopf {
  font: inherit;
  padding: 7px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--border-stark);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button.primaer { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { button.primaer { color: #10161a; } }
button.klein { padding: 3px 8px; font-size: 13px; }
button:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
button.text { background: none; border: none; color: var(--accent); padding: 2px 4px; }

.wechsel { display: flex; gap: 0; margin-bottom: 12px; }
.wechsel button {
  flex: 1; border-radius: 0; margin-left: -1px; background: var(--surface);
}
.wechsel button:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.wechsel button:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.wechsel button[aria-pressed="true"] { background: var(--accent-hell); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* ---------- Tabellen ---------- */

table.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tab th, table.tab td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.tab th { font-weight: 600; font-size: 12px; color: var(--muted); text-align: right; background: var(--surface-2); position: sticky; top: 0; z-index: 1; }
table.tab th:first-child, table.tab td:first-child { text-align: left; }
table.tab td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.tab td:first-child { font-family: var(--font); font-weight: 550; }
table.tab tbody tr:hover { background: var(--accent-hell); }
table.tab tbody tr.aktiv td:first-child { color: var(--accent); font-weight: 700; }
table.tab td.leer { color: var(--muted); }

/* Gruppenzeile je Profilreihe. Sie steht im tbody, damit sie mitscrollt -
   nur der Spaltenkopf bleibt stehen. */
table.tab tbody tr.gruppenkopf:hover { background: transparent; }
table.tab tbody tr.gruppenkopf td {
  background: var(--surface-2); text-align: left;
  border-top: 1px solid var(--border-stark); padding: 7px 10px;
  font-family: var(--font);
}
.gruppenzeile { display: flex; align-items: center; gap: 8px; }
.gruppenzeile .name { font-weight: 650; font-size: 13.5px; }
.gruppenzeile .form { color: var(--muted); font-size: 12.5px; }
/* Alles linksbuendig: die Tabelle ist breiter als das Fenster, rechts
   ausgerichtete Angaben waeren erst nach dem Scrollen zu sehen. */
.gruppenzeile .anzahl { color: var(--muted); font: 12px var(--mono); }
.gruppenzeile .anzahl::before { content: "· "; }
/* Eigener Scrollbereich: haelt den Kopf sichtbar und den Seitenkoerper frei von
   waagerechtem Scrollen. */
.tab-rahmen { overflow: auto; max-height: 74vh; }

/* ---------- Ergebnisse ---------- */

/* .breit: Kachel ueber zwei Spalten - erst ab einer Breite, bei der sicher zwei Spalten nebeneinander passen */
@media (min-width: 380px) { .wert.breit { grid-column: span 2; } }
.werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.wert { display: flex; flex-direction: column; justify-content: space-between; background: var(--surface); padding: 11px 13px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 -1px -1px 0; }
.wert .bez { font-size: 12px; color: var(--muted); display: block; margin-bottom: 3px; }
.wert .zahl { font: 600 20px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.wert .einheit { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 3px; }

.nachweis { display: flex; align-items: baseline; gap: 10px; padding: 9px 13px; border-radius: var(--radius); margin-bottom: 8px; border: 1px solid transparent; }
.nachweis .titel { flex: 1; }
.nachweis .quote { font: 600 15px/1 var(--mono); }
.nachweis.erfuellt { background: var(--ok-hell); border-color: var(--ok); color: var(--ok); }
.nachweis.knapp { background: var(--warn-hell); border-color: var(--warn); color: var(--warn); }
.nachweis.verletzt { background: var(--bad-hell); border-color: var(--bad); color: var(--bad); }
.nachweis .detail { font-size: 12px; color: inherit; opacity: 0.92; font-family: var(--mono); }

/* ---------- Hinweise ---------- */

.hinweis {
  border-left: 3px solid var(--border-stark);
  background: var(--surface-2);
  padding: 10px 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13.5px;
  margin: 14px 0;
}
.hinweis.warn { border-left-color: var(--warn); background: var(--warn-hell); color: var(--warn); }
.hinweis.warn a { color: inherit; }
.hinweis strong { font-weight: 650; }
.hinweis p { margin: 0 0 6px; }
.hinweis p:last-child { margin: 0; }

.rechenweg { font-family: var(--mono); font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.rechenweg div { border-bottom: 1px dotted var(--border); padding: 2px 0; }
.rechenweg b { color: var(--text); font-weight: 600; }

/* ---------- Startseite ---------- */

.hero { padding: 30px 0 34px; border-bottom: 1px solid var(--border); margin-bottom: 30px; }
.hero h1 { font-size: 34px; margin: 0 0 10px; letter-spacing: -0.02em; max-width: 26ch; text-wrap: balance; }
.hero p { color: var(--muted); max-width: 60ch; margin: 0 0 18px; font-size: 16px; }

.gruppe-titel { font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 30px 0 12px; font-weight: 600; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.kachel {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px;
}
.kachel:hover { border-color: var(--accent); }
.kachel .name { font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.kachel .beschr { font-size: 13px; color: var(--muted); }

/* ---------- Diagramm ---------- */

.diagramm { width: 100%; height: auto; display: block; }
.diagramm .achse { stroke: var(--border-stark); stroke-width: 1; }
.diagramm .traeger { stroke: var(--text); stroke-width: 2.5; fill: none; }
.diagramm .kurve { fill: var(--accent-hell); stroke: var(--accent); stroke-width: 1.5; }
.diagramm .last { stroke: var(--bad); stroke-width: 1.5; fill: none; }
.diagramm text { fill: var(--muted); font: 10px var(--mono); }
.diagramm .beschriftung { fill: var(--text); font: 600 11px var(--mono); }
.diagramm .lastpfeil { fill: var(--bad); stroke: none; }
.diagramm .maxpunkt { fill: var(--accent); }

/* ---------- Filterleiste ---------- */

.filterzeile { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.filtergitter {
  flex: 1 1 420px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 9px 10px;
}
.filtergitter .feld { margin: 0; }
.filtergitter label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filterfuss { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.schalter { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.schalter input { accent-color: var(--accent); margin: 0; }

/* ---------- Querschnittsskizze ---------- */

/* 300px, weil neben der Zeichnung die Massketten von h und b, die Dicke t und
   die Spalte der Hinweislinien fuer s und r Platz brauchen. Die Schrift bleibt
   damit bei 10px unskaliert lesbar. */
.skizzenfeld { flex: 0 0 300px; max-width: 100%; }
.skizze { width: 300px; height: auto; display: block; }
@media (max-width: 380px) { .skizze { width: 100%; } }
.skizze-flaeche {
  fill: var(--accent-hell); stroke: var(--accent); stroke-width: 1.3;
  vector-effect: non-scaling-stroke; stroke-linejoin: round;
}
.skizze-loch {
  fill: var(--surface); stroke: var(--accent); stroke-width: 1.3;
  vector-effect: non-scaling-stroke; stroke-linejoin: round;
}
.skizze-titel { fill: var(--text); font: 600 11px var(--mono); }
.skizze-mass { fill: var(--muted); font: 10px var(--mono); }
.skizze-mass-linie { stroke: var(--border-stark); stroke-width: 1; }
.skizze-pfeil { fill: var(--border-stark); }
/* Masshilfs- und Hinweislinien duenner als die Masslinie - so bleibt der
   Umriss die kraeftigste Linie im Bild. */
.skizze-hilfslinie { stroke: var(--border-stark); stroke-width: 0.7; opacity: 0.65; }
.skizze-hinweis-linie { stroke: var(--border-stark); stroke-width: 0.8; fill: none; }
.skizze-vermerk { fill: var(--muted); font: italic 9px var(--mono); }
.skizze-schwerpunkt { fill: var(--surface); stroke: var(--text); stroke-width: 1; }
.skizze-schwerpunkt-linie { stroke: var(--text); stroke-width: 0.8; }
.skizze-text { font-size: 12px; color: var(--muted); margin: 2px 0 0; }

/* ---------- Herkunftskennzeichnung ---------- */

.herkunft {
  font: 600 9px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 4px; border-radius: 2px; border: 1px solid var(--border-stark);
  color: var(--muted); margin-left: 6px; vertical-align: 1px;
}
.herkunft.berechnet { color: var(--accent); border-color: currentColor; }
.herkunft.nicht-genormt { color: var(--warn); border-color: currentColor; background: var(--warn-hell); cursor: help; }
table.tab tr.genormt-hinweis td { white-space: normal; text-align: left; font-family: var(--font); font-weight: 400; font-size: 13px; color: var(--warn); background: var(--warn-hell); }
table.tab tr.genormt-hinweis p { margin: 0 0 4px; max-width: 70ch; }

/* ---------- Reihenauswahl mit Formsymbol ---------- */

.reihenwahl { position: relative; }
.reihenknopf {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 4px 9px; background: var(--bg); text-align: left;
}
.reihenknopf .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reihenknopf .pfeil { color: var(--muted); font-size: 10px; }
.reihenliste {
  position: absolute; z-index: 20; top: calc(100% + 3px); left: 0;
  min-width: 100%; max-height: 300px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border-stark);
  border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); padding: 3px;
}
.reihenliste [role="option"] {
  display: flex; align-items: center; gap: 9px; padding: 5px 8px;
  border-radius: 3px; cursor: pointer; white-space: nowrap;
}
.reihenliste [role="option"]:hover,
.reihenliste [role="option"][aria-selected="true"] { background: var(--accent-hell); }
.reihenliste .anzahl { margin-left: auto; color: var(--muted); font: 11px var(--mono); }
.formsymbol { flex: none; }
.formsymbol .skizze-flaeche, .formsymbol .skizze-loch { stroke-width: 1.1; }

/* ---------- Skizze: Rahmen beim Ueberfahren, Overlay beim Klick ---------- */

/* js/core/grossansicht.js: jede Zeichnung (svg.diagramm, svg.windbild, svg.skizze) */
svg.vergroesserbar {
  cursor: zoom-in; border-radius: var(--radius);
  outline: 1px solid transparent; outline-offset: 3px;
}
svg.vergroesserbar:hover, svg.vergroesserbar:focus-visible { outline-color: var(--accent); }

.overlay-offen body { overflow: hidden; }
.overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(18, 20, 22, 0.55); cursor: zoom-out; padding: 16px;
}
.overlay .rahmen {
  position: relative; max-width: 100%; max-height: 100%; overflow: auto;
  background: var(--surface); border: 1px solid var(--border-stark);
  border-radius: var(--radius); padding: 34px 20px 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
/* Breite fuellen, ohne ueber den Bildschirm hinaus hoch zu werden */
.overlay svg.gross {
  display: block; margin: 0 auto; max-width: none;
  width: min(1100px, calc(100vw - var(--overlay-rand, 100px)), calc((100vh - 120px) * var(--seitenverhaeltnis, 1.6)));
  height: auto;
}
.overlay .overlay-fuss { color: var(--muted); font-size: 13px; margin: 8px 0 0; text-align: center; }
/* Overlay mit Inhalt (Profilblatt): nur ein Klick neben den Rahmen schliesst */
.overlay.bleibt .rahmen { cursor: auto; }
@media (max-width: 600px) {
  .overlay { padding: 6px; --overlay-rand: 36px; }
  .overlay .rahmen { padding: 34px 8px 10px; }
}
.overlay-zu {
  position: absolute; top: 4px; right: 6px; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center; font-size: 22px; line-height: 1;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--muted); cursor: pointer;
}
.overlay-zu:hover, .overlay-zu:focus-visible { color: var(--text); border-color: var(--border-stark); background: var(--surface-2); }

/* Profilblatt der Stahlprofiltabelle: Skizze links, Kennwerte rechts */
table.tab tbody tr.profilzeile, table.tab tbody tr.klickzeile { cursor: pointer; }
table.tab tbody tr.profilzeile:focus-visible, table.tab tbody tr.klickzeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.profilblatt {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  grid-template-areas: "kopf kopf" "bild werte"; gap: 6px 28px; align-items: start;
  width: min(1060px, calc(100vw - var(--overlay-rand, 100px)));
}
.profilblatt-kopf { grid-area: kopf; }
.profilblatt-kopf h2 { margin: 0; font-size: 22px; }
.profilblatt-kopf p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.profilblatt-bild { grid-area: bild; margin: 0; position: sticky; top: 0; }
.profilblatt-bild .skizze { width: 100%; }
.profilblatt-bild figcaption { color: var(--muted); font-size: 12px; text-align: center; }
.profilblatt-werte { grid-area: werte; }
.profilblatt-werte .hinweis { margin: 10px 0 0; font-size: 13px; }
.profilblatt-hinweis { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
table.profilwerte { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.profilwerte th, table.profilwerte td { padding: 3px 6px; border-bottom: 1px solid var(--border); text-align: left; font-weight: 400; }
table.profilwerte tr.gruppe th { padding-top: 12px; font-weight: 600; font-size: 12px; color: var(--muted); border-bottom-color: var(--border-stark); }
table.profilwerte tbody:first-child tr.gruppe th { padding-top: 0; }
table.profilwerte td.zeichen { font-family: var(--mono); white-space: nowrap; }
table.profilwerte td.betrag { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
table.profilwerte td.einheit { color: var(--muted); white-space: nowrap; }
table.profilwerte tr.abgeleitet td, table.profilwerte tr.abgeleitet th { font-style: italic; }
/* Bemessungswerte Holz: Auswahl oben, Festigkeit und Verformung nebeneinander */
.holzblatt { width: min(880px, calc(100vw - var(--overlay-rand, 100px))); }
.holzblatt-wahl { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr) minmax(0, 0.95fr); gap: 10px; margin: 12px 0 4px; }
.holzblatt-wahl .feld { margin: 0; }
.holzblatt-wahl select { width: 100%; }
.holzblatt-faktor { font: 14px var(--mono); margin: 10px 0 12px; }
.holzblatt-tabellen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.holzblatt .profilwerte thead th { font-size: 12px; color: var(--muted); font-weight: 600; border-bottom-color: var(--border-stark); }
.holzblatt .profilwerte thead th:nth-child(n+3) { text-align: right; }
.wichteblatt { width: min(620px, calc(100vw - var(--overlay-rand, 100px))); }
.wichteblatt .holzblatt-wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.wichteblatt .profilwerte thead th { text-align: right; }
.daemmblatt { width: min(660px, calc(100vw - var(--overlay-rand, 100px))); }
.daemm-richtung { margin: -4px 0 12px; }
.daemm-richtung select { width: 100%; }
.wichteblatt .profilwerte tr.abgesetzt:not(:first-child) th, .wichteblatt .profilwerte tr.abgesetzt:not(:first-child) td { border-top: 1px solid var(--border-stark); }
@media (max-width: 760px) {
  .holzblatt-wahl, .holzblatt-tabellen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .profilblatt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "bild" "werte"; }
  .profilblatt-bild { position: static; }
}

/* ---------- Schichtenliste (Eigengewichte) ---------- */

.aufbau-kopf { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 12px; flex-wrap: wrap; }
.aufbau-kopf .feld { margin: 0; flex: 1 1 280px; max-width: 420px; }
.aufbau-fuss { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
table.schichten td { vertical-align: middle; }
table.schichten select { min-width: 24em; }
/* Auswahllisten und Namensfelder in Textschrift; die Tabelle setzt sonst Mono */
table.schichten select, table.schichten input:not([inputmode]) { font-family: var(--font); }
.baustoffzelle { display: flex; gap: 6px; align-items: center; }
.baustoffzelle > select, .baustoffzelle > .freizeile { flex: 1 1 auto; }
table.schichten input[type="text"] { padding: 4px 6px; }
/* Textfeld, Zahlenfeld (Mono), Auswahl und ✕ einer Zeile gleich hoch */
table.schichten input[type="text"], table.schichten select, table.schichten button { height: var(--zeilenfeld); }
.freizeile .inline-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.massfelder { display: inline-flex; gap: 5px; align-items: center; }
.freizeile { display: inline-flex; gap: 6px; }
.freizeile input { min-width: 14em; }
.freizeile select { min-width: 11em !important; }
.marke-balken {
  font: 600 9px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 4px; border-radius: 2px; border: 1px solid var(--accent); color: var(--accent); margin-left: 6px;
}

/* ---------- Tabellenseiten ---------- */

.spalten.gleich { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .spalten.gleich { grid-template-columns: minmax(0, 1fr); } }
.tabellennotiz { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.karte .tab-rahmen + .tabellennotiz { margin-top: 10px; }
.tabellenerklaerung { font-size: 13px; color: var(--muted); margin: -4px 0 12px; line-height: 1.5; }
/* Tabellen mit Fliesstext (Nutzungsklassen, KLED): Zellen umbrechen; mit
   erste-fest bzw. letzte-fest bleibt die erste bzw. letzte Spalte einzeilig */
.tab-rahmen.umbruch table.tab td, .tab-rahmen.umbruch table.tab th { white-space: normal; text-align: left; vertical-align: top; }
.tab-rahmen.umbruch table.tab td { font-family: var(--font); }
/* Zahlentabelle mit langen Texten vorn und hinten (Wichten, Daemmwerte): nur erste
   und letzte Spalte umbrechen. Die erste bei --erste-breite (Vorgabe 26em = 364 px,
   schmale Fenster 28vw), die letzte nicht schmaler als 14em. */
.tab-rahmen.text-umbruch table.tab td:first-child { white-space: normal; width: var(--erste-breite, 26em); min-width: min(var(--erste-breite, 26em), 28vw); }
.tab-rahmen.text-umbruch table.tab td:last-child { white-space: normal; min-width: 14em; text-align: left; font-family: var(--font); }
.tab-rahmen.text-umbruch table.tab th:last-child { text-align: left; }
.tab-rahmen.text-umbruch table.tab td { vertical-align: top; }
.tab-rahmen.umbruch.erste-fest table.tab td:first-child, .tab-rahmen.umbruch.letzte-fest table.tab td:last-child { white-space: nowrap; }
/* Tabellen in Karten mit Innenabstand: Kopf nicht bis an den Kartenrand ziehen */
.karte:not(.flach) table.tab th { background: transparent; position: static; }
.karte.flach + .karte.flach { margin-top: -4px; }
.q-zeile { display: flex; gap: 6px; }
.q-zeile select { flex: 1 1 auto; min-width: 0; }
.q-zeile input { flex: 0 0 6em; width: 6em; }
.q-zeile input:not([inputmode]) { flex: 1 1 auto; width: auto; min-width: 0; }
/* Kombinationsrechner: staendige und veraenderliche Einwirkungen je in einem Kasten */
.einwirkungsgruppe { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px 12px; }
.einwirkungsgruppe + .einwirkungsgruppe { margin-top: 12px; }
.einwirkungsgruppe h3 { margin: 0 0 8px; font-size: 13px; font-weight: 650; color: var(--text); }
.einwirkungsgruppe .feld:last-of-type { margin-bottom: 10px; }
.summe-g { font: 13px var(--mono); color: var(--muted); margin: -4px 0 8px; }
.gruppe-titel[id] { scroll-margin-top: 70px; }
.untergruppe-titel { font-size: 14px; font-weight: 600; color: var(--text); margin: 18px 0 10px; }
.untergruppe-titel[id] { scroll-margin-top: 70px; }
/* Umschalter mit langen Beschriftungen: auf schmalen Bildschirmen umbrechen */
.wechsel.umbruch { flex-wrap: wrap; row-gap: 4px; }
.wechsel.umbruch button { flex: 1 1 auto; }

/* ---------- Sturz: Lastlisten und Ansicht ---------- */

.lastzeile { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px; background: var(--bg); }
.lastkopf { display: flex; gap: 6px; margin-bottom: 6px; }
.lastkopf input { flex: 1 1 auto; font-weight: 600; }
.lastwerte { display: flex; gap: 8px; flex-wrap: wrap; }
.mini { display: flex; flex-direction: column; font-size: 11.5px; color: var(--muted); gap: 2px; }
.mini input { padding: 4px 6px; }
/* Heizlast: Fenster eingerueckt unter ihrer Wand, U-Wert des Bauteils am Rand */
.fensterzeile { margin: 6px 0 0 14px; align-items: flex-end; }
.lastwerte .grenze-temperatur:empty { display: none; }
.bauteil-u { align-self: flex-end; margin-left: auto; font: 13px var(--mono); color: var(--muted); white-space: nowrap; }
.aufbau-u { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }

.sturzansicht .mw { fill: var(--surface-2); stroke: var(--border-stark); stroke-width: 1; }
.sturzansicht .decke { fill: var(--border-stark); }
.sturzansicht .dreieck { fill: var(--accent-hell); stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 5 3; }
.sturzansicht .sturz { stroke: var(--text); stroke-width: 1.2; }
.sturzansicht .sturz.beton { fill: #9aa3a8; }
.sturzansicht .sturz.stahl { fill: #5d7486; }
.sturzansicht .sturz.holz { fill: #c89b62; }
.sturzansicht .linienlast { stroke: var(--bad); stroke-width: 2; }
.sturzansicht .linienlast.abgetragen { stroke-dasharray: 6 4; opacity: 0.55; }
.sturzansicht .kegel { fill: var(--bad-hell); stroke: var(--bad); stroke-width: 0.8; stroke-dasharray: 3 2; }
.sturzansicht .einzellast { stroke: var(--bad); stroke-width: 2; }
.sturzansicht .pfeil { fill: var(--bad); }
.sturzansicht .masslinie { stroke: var(--muted); stroke-width: 1; }
.sturzansicht .belastung { fill: var(--bad-hell); stroke: var(--bad); stroke-width: 1.2; }
.sturzansicht .bewehrung { stroke: var(--bad); stroke-width: 1.6; stroke-dasharray: 9 5; }
.sturzansicht .schnittlinie { stroke: var(--text); stroke-width: 1.1; stroke-dasharray: 8 3 2 3; }
.sturzansicht text.klein { fill: var(--muted); font: 10.5px var(--mono); }

/* Sturz: Querschnitt im Schnitt A-A */
.sturzschnitt .koerper { stroke: var(--text); stroke-width: 1.2; stroke-linejoin: round; }
.sturzschnitt .koerper.beton { fill: #9aa3a8; }
.sturzschnitt .koerper.stahl { fill: #5d7486; }
.sturzschnitt .koerper.holz { fill: #c89b62; }
.sturzschnitt .buegel { fill: none; stroke: var(--bad); stroke-width: 1.4; stroke-dasharray: 5 3; }
.sturzschnitt .stab { fill: var(--bad); stroke: var(--surface); stroke-width: 0.8; }
.sturzschnitt .masslinie { stroke: var(--muted); stroke-width: 1; }
.sturzschnitt .hilfslinie { stroke: var(--muted); stroke-width: 0.7; }
.sturzschnitt text { fill: var(--muted); font: 10.5px var(--mono); }

/* ---------- Fehler melden ---------- */

.fehlerknopf { margin-left: auto; color: var(--muted); }
/* PDF erstellen (js/core/pdfexport.js) steht davor und schiebt beide nach rechts */
.pdfknopf { margin-left: auto; margin-right: 4px; color: var(--muted); }
.pdfknopf:hover { color: var(--text); }
.pdfknopf + .fehlerknopf { margin-left: 0; }
.pdfdialog .feld textarea {
  width: 100%; font: inherit; padding: 7px 9px; resize: vertical;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-stark); border-radius: var(--radius);
}
.fehlerknopf:hover { color: var(--text); }

.fehlerdialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  /* dvh: sichtbare Hoehe auf dem Handy, ohne die ein- und ausklappende Browserleiste */
  max-height: calc(100dvh - 32px);
  border: 1px solid var(--border-stark); border-radius: var(--radius);
  background: var(--surface); color: var(--text); padding: 18px 20px;
}
.fehlerdialog::backdrop { background: rgb(0 0 0 / 0.45); }
.fehlerdialog h2 { margin: 0; font-size: 18px; }
/* Kopf mit Schliessen-Knopf bleibt beim Scrollen im Dialog oben stehen */
.fehlerkopf {
  position: sticky; top: -18px; z-index: 1; margin: -18px -20px 6px; padding: 12px 12px 8px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.fehlerzu { min-width: 40px; min-height: 40px; padding: 0; font-size: 18px; line-height: 1; }
.fehlerintro { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.fehlerarten { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.fehlerarten legend { font-size: 13px; color: var(--muted); margin-bottom: 6px; padding: 0; }
.fehlerart {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px;
}
.fehlerart:has(input:checked) { border-color: var(--accent); background: var(--accent-hell); }
.fehlerart input { margin-top: 3px; accent-color: var(--accent); }
.fehlerart .erklaerung { display: block; font-size: 12.5px; color: var(--muted); }
.fehlerlabel { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.fehlerdialog textarea {
  width: 100%; font: inherit; padding: 7px 9px; resize: vertical;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-stark); border-radius: var(--radius);
}
.fehlerdetails { margin: 10px 0; font-size: 13px; }
.fehlerdetails summary { cursor: pointer; color: var(--accent); }
.fehlervorschau {
  max-height: 240px; overflow: auto; font: 11px/1.45 var(--mono);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; margin: 6px 0 0;
}
.fehlerknoepfe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.fehlerstatus .hinweis { margin: 10px 0 0; }

/* ---------- Projekte (js/core/projektleiste.js, projekte.html) ---------- */

.knopfreihe { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
a.knopf.klein { padding: 3px 8px; font-size: 13px; }
.projektknopf { margin-left: auto; margin-right: 4px; color: var(--muted); }
.projektknopf:hover { color: var(--text); }
.ladeknopf, .standardknopf { margin-left: auto; margin-right: 4px; color: var(--muted); }
.ladeknopf:hover, .standardknopf:hover { color: var(--text); }
.projektknopf + .ladeknopf, .ladeknopf + .standardknopf, .ladeknopf + .pdfknopf, .ladeknopf + .fehlerknopf,
.projektknopf + .standardknopf, .projektknopf + .pdfknopf, .projektknopf + .fehlerknopf,
.standardknopf + .pdfknopf, .standardknopf + .fehlerknopf { margin-left: 0; }
.projektstatus .standardhinweis { color: var(--muted); }
.projektstatus .standardhinweis button { margin-left: 4px; }

/* Uebernahme: erst Projekt, dann Wert */
.projektklappe { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; }
.projektkopfwahl {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  border: 0; border-radius: var(--radius); background: transparent; padding: 9px 10px;
}
.projektkopfwahl[aria-expanded="true"] { background: var(--accent-hell); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.projektkopfwahl:disabled { opacity: 0.55; cursor: default; }
.projektkopfwahl .pfeil { flex: none; width: 1em; color: var(--muted); }
.projektkopfwahl .text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.projektkopfwahl .text span { font-size: 12.5px; color: var(--muted); }
.projektkopfwahl .anzahl { flex: none; font-size: 12.5px; color: var(--muted); }
.projektklappe .projektwahl { padding: 8px 10px 10px 30px; }
.adress-knoepfe { gap: 6px; flex-wrap: wrap; }
.baustelleknopf { font-size: 13px; padding: 5px 10px; color: var(--accent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Statuszeile unter dem Seitentitel: Projekt, Position, Bezuege, Legende */
.projektstatus {
  margin: 0 0 16px; padding: 8px 12px; font-size: 13.5px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface);
}
.projektstatus p { margin: 2px 0; }
.projektstatus .ok { color: var(--ok); }
.projektstatus .warn { color: var(--warn); }
.projektstatus .warn button { margin-left: 6px; }
.projektstatus .marke {
  display: inline-block; margin-right: 8px; padding: 0 6px; border-radius: 3px;
  font: 600 11px/1.6 var(--font); letter-spacing: 0.04em; text-transform: uppercase; background: var(--accent); color: var(--surface);
}
.projektstatus .legende { margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.chip { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 7px; border-radius: 10px; font-size: 12px; border: 1px solid var(--border); }
.chip.aus-projekt { background: var(--accent-hell); border-color: var(--accent); color: var(--accent); }
.chip.von-hand { background: var(--warn-hell); border-color: var(--warn); color: var(--warn); }
.chip.geaendert { background: var(--surface-2); border-color: var(--border-stark); color: var(--muted); }
.projektziel { margin: 0 0 12px; }
.projektuebernahme { width: 100%; border-style: dashed; border-color: var(--accent); color: var(--accent); }

/* Markierung der Felder: aus dem Projekt, danach geaendert, noch von Hand */
.aus-projekt > input, .aus-projekt > select, .aus-projekt > textarea, .aus-projekt .reihenknopf {
  background: var(--accent-hell); border-color: var(--accent);
}
.von-hand > input:not([type="checkbox"]), .von-hand > select, .von-hand .reihenknopf { box-shadow: inset 3px 0 0 var(--warn); }
/* Feld mit Beschriftung darueber: Marke vor dem Text; Haken mit Text daneben: Marke dahinter */
.feld.aus-projekt > label::before, .feld.von-hand > label::before, .feld.geaendert > label::before,
label.aus-projekt::after, label.von-hand::after, label.geaendert::after {
  display: inline-block; flex: none; align-self: center; margin-right: 6px; padding: 0 5px; border-radius: 3px; vertical-align: 1px;
  font: 600 10.5px/1.5 var(--font); letter-spacing: 0.02em; white-space: nowrap;
}
.feld.aus-projekt > label::before, label.aus-projekt::after { content: "aus Projekt"; background: var(--accent); color: var(--surface); }
.feld.von-hand > label::before, label.von-hand::after { content: "von Hand"; background: var(--warn-hell); color: var(--warn); border: 1px solid var(--warn); line-height: 1.3; }
.feld.geaendert > label::before, label.geaendert::after { content: "geändert"; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border-stark); line-height: 1.3; }
.listen-aus-projekt { box-shadow: inset 3px 0 0 var(--accent); padding-left: 8px !important; }

/* Dialoge Speichern und Uebernehmen */
.projektdialog .feld input, .projektdialog .feld select { width: 100%; }
.projektdialog .haken { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 2px 0 8px; }
.projektdialog .haken input { width: auto; margin-top: 3px; }
.projektliste { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.projektwahl { display: grid; gap: 6px; }
.projektwahl button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.projektwahl button span { font-size: 13px; color: var(--muted); }
.projektwahl button .notiz { font-size: 12px; }

/* Projektmanager: Liste ueber die volle Breite, ein Projekt aufgeklappt */
.projektleiste-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.projektleiste-kopf h2 { margin: 0; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.projektleiste-kopf label.knopf { cursor: pointer; }
.projekt { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; background: var(--surface); }
.projekt.offen { border-color: var(--accent); }
.projektzeile-kopf {
  width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left;
  border: 0; border-radius: var(--radius); background: transparent; padding: 10px 12px;
}
.projekt.offen .projektzeile-kopf { background: var(--accent-hell); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.projektzeile-kopf .pfeil { flex: none; width: 1em; color: var(--muted); }
.projektzeile-kopf .text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.projektzeile-kopf .info { font-size: 13px; color: var(--muted); }
.projektinhalt { padding: 4px 14px 14px 36px; }
.projektinhalt h3 { margin: 14px 0 8px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.kopfdaten { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr); gap: 0 10px; }
.kopfdaten .breit { grid-column: span 2; }
.kopfdaten .voll { grid-column: 1 / -1; }
.kopfdaten input { width: 100%; }
.kopfdaten textarea { width: 100%; font: inherit; padding: 7px 9px; resize: vertical; background: var(--bg); color: var(--text); border: 1px solid var(--border-stark); border-radius: var(--radius); }
.kopfstatus { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .kopfdaten { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  .kopfdaten .breit { grid-column: 1 / -1; }
  .projektinhalt { padding-left: 12px; }
}
.positionszeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: start;
  border-top: 1px solid var(--border); padding: 9px 0;
}
.positionszeile:first-child { border-top: 0; padding-top: 0; }
.positionszeile .projektdaten { grid-column: 1; }
.positionszeile > .knopfreihe { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 640px) {
  .positionszeile { grid-template-columns: minmax(0, 1fr); }
  .positionszeile > .knopfreihe { grid-column: 1; grid-row: auto; }
}
.projektkopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.projektkopf .nr { font: 600 12px var(--mono); color: var(--muted); min-width: 1.6em; }
.projektkopf .rechnername { font-size: 12.5px; color: var(--muted); }
.projektdaten { display: flex; flex-direction: column; gap: 1px; font-size: 13px; color: var(--muted); }
.projektdaten .ergebnis { color: var(--text); }
.projektdaten .bezug.warn { color: var(--warn); }
.projektdaten .notiz { font-style: italic; white-space: pre-line; }
.projektaktionen { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
button.gefahr { color: var(--bad); }
button.gefahr:hover { border-color: var(--bad); }

/* ---------- Holzbalkendecke: Aufbaubereiche und Schnitt ---------- */

.schichtzeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 4.5em auto; gap: 8px; align-items: end;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 9px; margin-bottom: 6px; background: var(--bg);
}
.schichtzeile .stoff { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.schichtzeile select { width: 100%; min-width: 0; font-family: var(--font); }
.schichtzeile input { padding: 4px 6px; }
.schichtzeile .last { font: 13px var(--mono); color: var(--text); padding: 5px 0; }
.schichtzeile .fest { align-self: center; padding-bottom: 6px; }
.schichtname { font-size: 11.5px; color: var(--muted); }
@media (max-width: 520px) {
  .schichtzeile { grid-template-columns: auto 1fr auto; }
  .schichtzeile .stoff { grid-column: 1 / -1; }
}

.deckenschnitt .schicht { stroke: var(--text); stroke-width: 0.6; }
.deckenschnitt .schicht.holz, .deckenschnitt .balken { fill: #c89b62; }
.deckenschnitt .balken { stroke: var(--text); stroke-width: 1; }
.deckenschnitt .schicht.daemm { fill: #e9d77a; }
.deckenschnitt .schicht.mineral { fill: #b5b9bc; }
.deckenschnitt .schicht.schuett { fill: #d8c3a0; }
.deckenschnitt .schicht.sonst { fill: #dfe3e6; }
.deckenschnitt .schicht.pauschal { fill: var(--surface-2); stroke-dasharray: 3 2; }
.deckenschnitt .gefach { fill: var(--surface); stroke: var(--border-stark); stroke-width: 0.6; }
.deckenschnitt .masslinie { stroke: var(--muted); stroke-width: 1; }
.deckenschnitt .leitlinie { stroke: var(--muted); stroke-width: 0.6; }
.deckenschnitt text.klein { fill: var(--muted); font: 10.5px var(--mono); }

/* ---------- Fundamente: Schnitte ---------- */

.fundamentschnitt .boden { fill: #efe6d6; }
.fundamentschnitt .gelaende { stroke: #8a6d3b; stroke-width: 1.5; }
.fundamentschnitt .fundament { fill: #b5b9bc; stroke: var(--text); stroke-width: 1.2; }
.fundamentschnitt .verguss { fill: #cfd3d6; stroke: var(--text); stroke-width: 0.6; stroke-dasharray: 3 2; }
.fundamentschnitt .stuetze { fill: #9aa3a8; stroke: var(--text); stroke-width: 1; }
.fundamentschnitt .stuetze.stahl { fill: #5d7486; }
.fundamentschnitt .bewehrung { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 6 3; }
.fundamentschnitt .sohldruck { fill: var(--accent-hell); stroke: var(--accent); stroke-width: 1; }
.fundamentschnitt .pressung { fill: var(--bad-hell); stroke: var(--bad); stroke-width: 1; }
.fundamentschnitt .last { stroke: var(--bad); stroke-width: 2; }
.fundamentschnitt .pfeil { fill: var(--bad); }
.fundamentschnitt .masslinie { stroke: var(--muted); stroke-width: 1; }
.fundamentschnitt text.klein { fill: var(--muted); font: 10.5px var(--mono); }
.fundamentschnitt .achse { stroke: var(--muted); stroke-width: 0.8; stroke-dasharray: 7 3 2 3; }
.fundamentschnitt text.hell { fill: var(--text); }

/* Fundament: Draufsicht mit wirksamer Flaeche */
.fundamentgrundriss .flaeche { fill: #dfe3e5; stroke: var(--text); stroke-width: 1.2; }
.fundamentgrundriss .wirksam { fill: var(--accent-hell); stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 6 3; }
.fundamentgrundriss .stuetze { fill: #9aa3a8; stroke: var(--text); stroke-width: 1; }
.fundamentgrundriss .achse { stroke: var(--muted); stroke-width: 0.8; stroke-dasharray: 7 3 2 3; }
.fundamentgrundriss .resultierende { fill: var(--bad); stroke: var(--surface); stroke-width: 1; }
.fundamentgrundriss .masslinie { stroke: var(--muted); stroke-width: 1; }
.fundamentgrundriss text.klein { fill: var(--muted); font: 10.5px var(--mono); }

/* Fussplatte: Grundriss mit Duebeln und Druckzone, Schnitt */
.diagramm.fussplattenbild { max-width: 520px; margin: 0 auto; }
.fussplattenbild .beton { fill: #e4e1da; stroke: none; }
.fussplattenbild .betonrand { stroke: var(--text); stroke-width: 2; }
.fussplattenbild .platte { fill: #cfd5da; stroke: var(--text); stroke-width: 1.2; }
.fussplattenbild .druckzone { fill: var(--bad-hell); stroke: var(--bad); stroke-width: 0.8; stroke-dasharray: 4 2; }
.fussplattenbild .profil { fill: #5d7486; stroke: var(--text); stroke-width: 0.8; }
.fussplattenbild .steg { fill: #9aa3a8; stroke: var(--text); stroke-width: 0.6; }
.fussplattenbild .steife { fill: #7f93a3; stroke: var(--text); stroke-width: 0.8; }
.fussplattenbild .fuge { fill: #cfd3d6; stroke: var(--text); stroke-width: 0.6; stroke-dasharray: 3 2; }
.fussplattenbild .duebel { fill: var(--surface); stroke: var(--text); stroke-width: 1.2; }
.fussplattenbild .duebel.zug { fill: var(--bad); }
.fussplattenbild .anker { fill: #6b7378; stroke: none; }
.fussplattenbild .moertel { fill: #c9a86b; opacity: 0.6; }
.fussplattenbild .mutter { fill: #3d4347; }
.fussplattenbild .achse { stroke: var(--muted); stroke-width: 0.8; stroke-dasharray: 7 3 2 3; }
.fussplattenbild .masslinie { stroke: var(--muted); stroke-width: 1; }
.fussplattenbild text.klein { fill: var(--muted); font: 10.5px var(--mono); }

/* ---------- Stahlbetondecke: Grundriss und Momentenlinie ---------- */

.deckenplan .platte { fill: #d9dcde; stroke: var(--text); stroke-width: 1; }
.deckenplan .kragarm { fill: #c3c8cb; stroke: var(--text); stroke-width: 0.6; stroke-dasharray: 4 3; }
.deckenplan .wand-unten { fill: #6b7378; }
.deckenplan .wand-oben { stroke: var(--bad); stroke-width: 2; stroke-dasharray: 5 3; }
.deckenplan .oeffnung { fill: var(--surface); stroke: var(--text); stroke-width: 1; }
.deckenplan .oeffnung-kreuz { stroke: var(--text); stroke-width: 0.6; }
.deckenplan .achse { stroke: var(--text); stroke-width: 1; }
.deckenplan .moment-plus { fill: var(--accent-hell); stroke: var(--accent); stroke-width: 1.2; }
.deckenplan .moment-minus { fill: var(--bad-hell); stroke: var(--bad); stroke-width: 1.2; }
.deckenplan .lager { fill: var(--text); }
.deckenplan text.klein { fill: var(--muted); font: 10.5px var(--mono); }
.deckenplan text.fett { fill: var(--text); font-weight: 600; }

/* Adresseingabe: Strasse | Nr., darunter PLZ | Ort */
.adress-zeile { display: grid; gap: 10px; }
.adress-strasse { grid-template-columns: minmax(0, 1fr) 5.5em; }
.adress-ort { grid-template-columns: 8em minmax(0, 1fr); }
.adress-zeile .feld { min-width: 0; }
.adress-zeile select { width: 100%; }
.adress-knoepfe { margin: -2px 0 10px; display: flex; justify-content: space-between; align-items: center; }
.adress-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.adress-leeren { padding: 2px 9px; line-height: 1; font-size: 13px; color: var(--muted); letter-spacing: 0; text-transform: none; }

/* Dachsymbole in der Dachformwahl */
.dachsymbol { flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dachsymbol-boden { stroke: var(--border-stark); stroke-width: 1; }
.dachsymbol-wand { stroke: var(--muted); stroke-width: 1.4; }
.dachsymbol-dach { stroke: var(--accent); stroke-width: 2.4; }

/* Datengrundlagen: Quellen und Gueltigkeit, eingeklappt unter dem Seitentitel */
/* Erklaerung mit Zahlenbeispiel ueber den Datengrundlagen - steht im HTML,
   damit Suchmaschinen sie finden */
.erlaeuterung { margin: -10px 0 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.erlaeuterung > summary { cursor: pointer; padding: 8px 13px; font-size: 13px; font-weight: 600; color: var(--accent); }
.erlaeuterung[open] > summary { border-bottom: 1px solid var(--border); }
.erlaeuterung-inhalt { padding: 4px 13px 12px; font-size: 14px; }
.erlaeuterung-inhalt h2 { font-size: 13px; font-weight: 650; margin: 10px 0 3px; }
.erlaeuterung-inhalt p { margin: 0 0 6px; max-width: 80ch; }
.erlaeuterung-inhalt ul { margin: 0; padding-left: 20px; max-width: 80ch; }
.erlaeuterung-inhalt li { margin: 2px 0; font-variant-numeric: tabular-nums; }
.erlaeuterung + .datengrundlagen { margin-top: 0; }
.datengrundlagen { margin: -10px 0 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.datengrundlagen > summary { cursor: pointer; padding: 8px 13px; font-size: 13px; font-weight: 600; color: var(--accent); }
.datengrundlagen[open] > summary { border-bottom: 1px solid var(--border); }
.datengrundlagen dl { margin: 0; padding: 6px 13px 10px; font-size: 13px; }
.datengrundlagen dt { font-weight: 600; margin-top: 8px; }
.datengrundlagen dd { margin: 2px 0 0; color: var(--muted); }
.datengrundlagen dd p { margin: 0 0 4px; }
.dachsymbol-schnee { fill: #b9d6f2; stroke: #5b8fc4; stroke-width: 0.7; stroke-linejoin: round; }
.lastfall { display: flex; align-items: center; gap: 10px; }

/* Berechnungsschritte: je Groesse ein Abschnitt, darunter die Rechnung */
.schritte { display: grid; gap: 12px; }
.schritt { border-left: 3px solid var(--accent-hell); padding: 2px 0 2px 11px; }
.schritt-titel { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.schritt-zeile { font-family: var(--mono); font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.schritt-zeile.ergebnis { color: var(--text); font-weight: 600; }
.reihentitel { font-size: 13px; font-weight: 600; margin: 2px 0 4px; }

/* ---------- Windlast: Gebaeudebild und Wirkfelder ---------- */

.windbild { width: 100%; height: auto; display: block; margin: 0 0 6px; }
.windbild .wand { fill: var(--surface-2); stroke: var(--text); stroke-width: 1; stroke-linejoin: round; }
.windbild .dachflaeche { fill: #c6cfd6; stroke: var(--text); stroke-width: 1; stroke-linejoin: round; }
.windbild .dachflaeche.hinten { fill: #a9b4bc; }
.windbild .umriss { fill: none; stroke: var(--text); stroke-width: 1.2; }
.windbild .firstlinie { stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 7 3; }
.windbild .masslinie { stroke: var(--muted); stroke-width: 1; }
.windbild .hilfslinie { stroke: var(--muted); stroke-width: 0.7; stroke-dasharray: 4 3; }
.windbild .wind { stroke: var(--accent); stroke-width: 2; }
.windbild .windpfeil { fill: var(--accent); }
.windbild .feld { stroke-width: 0.9; }
.windbild .feld.druck { fill: var(--accent-hell); stroke: var(--accent); }
.windbild .feld.sog { fill: var(--bad-hell); stroke: var(--bad); }
.windbild .feld.null { fill: var(--surface-2); stroke: var(--border-stark); }
.windbild text { fill: var(--muted); font: 10px var(--mono); }
.windbild text.kopf { fill: var(--text); font: 600 10.5px var(--mono); }
.windbild text.feldname { fill: var(--text); font: 600 10.5px var(--mono); }
.windbild text.feldwert { fill: var(--muted); font: 9.5px var(--mono); }
.windbild .lastpfeil { stroke-width: 1.7; }
.windbild .symbolkreis { fill: none; stroke-width: 1.2; }
.windbild .symbolstrich { stroke-width: 1.2; }
.windbild .druckfarbe { stroke: var(--accent); fill: var(--accent); }
.windbild .sogfarbe { stroke: var(--bad); fill: var(--bad); }
.windbild .druckfarbe .symbolkreis, .windbild .sogfarbe .symbolkreis { fill: var(--surface); }
/* Massgebende Werte: der groesste Druck blau, der groesste Sog rot - in der
   Zeichnung als Rahmen, in der Tabelle als Rand um die Zeile. Bei den
   diagonal geteilten Feldern liegt der Rahmen auf dem Dreieck; er wird auf
   die eigene Flaeche beschnitten und deshalb doppelt so breit gezeichnet. */
.windbild .massgebend { fill: none; stroke-width: 2.6; }
.windbild .massgebend.innen { stroke-width: 5.2; }
.windbild .massgebend.druck { stroke: var(--accent); }
.windbild .massgebend.sog { stroke: var(--bad); }
table.tab tr.massgebend td { border-top: 2px solid var(--rahmen); border-bottom: 2px solid var(--rahmen); }
table.tab tr.massgebend td:first-child { border-left: 2px solid var(--rahmen); }
table.tab tr.massgebend td:last-child { border-right: 2px solid var(--rahmen); }
table.tab tr.massgebend.druck { --rahmen: var(--accent); }
table.tab tr.massgebend.sog { --rahmen: var(--bad); }
.windbild .wand.attika { fill: var(--surface); }

/* Erklaerungen fuer Laien (js/core/erklaerung.js): "?" an Beschriftungen,
   Blase beim Ueberfahren bzw. Antippen */
.info-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin: 0 0 0 6px; padding: 0; vertical-align: 1px;
  border: 1px solid var(--border-stark); border-radius: 50%; background: var(--surface);
  color: var(--muted); font: 600 11px/1 var(--font); cursor: help;
}
.info-knopf:hover, .info-knopf:focus-visible { border-color: var(--accent); color: var(--accent); }
h2 .info-knopf { vertical-align: 2px; }
/* In Feldbeschriftungen am rechten Rand: sonst bricht das "?" in schmalen
   Spalten allein um und die Felder daneben stehen versetzt */
.feld > label:has(> .info-knopf) { position: relative; padding-right: 22px; }
.feld > label > .info-knopf { position: absolute; right: 0; top: 2px; margin: 0; }
/* Bricht eine Beschriftung zweizeilig um, bleiben die Felder der Reihe auf einer Linie */
.feld-reihe > .feld, .feld-reihe-3 > .feld { align-self: end; }
.nachweis.mit-tip { cursor: help; }
.nachweis.mit-tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tip {
  position: absolute; z-index: 1000; max-width: min(360px, calc(100vw - 16px));
  padding: 9px 12px; border: 1px solid var(--border-stark); border-radius: var(--radius);
  background: var(--surface); color: var(--text); box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
  font: 13px/1.45 var(--font); text-align: left; white-space: normal;
}
.tip p { margin: 0 0 6px; }
.tip p:last-child { margin-bottom: 0; }
.tip .tip-leise { color: var(--muted); }
.tip .tip-schlecht { color: var(--bad); }

/* Torpfosten: Ansicht */
/* Schraubenverbindung: Draufsicht und Schnitt */
.diagramm.schraubenbild { max-width: 460px; margin: 0 auto; }
.diagramm.stirnplattenbild { max-width: 520px; margin: 0 auto; }
.stirnplattenbild .flanschlinie { stroke: var(--text); stroke-width: 1; }
.schraubenbild .blech, .stirnplattenbild .blech { fill: var(--surface-2); stroke: var(--text); stroke-width: 1.2; }
.schraubenbild .blech.zwei, .stirnplattenbild .blech.zwei { fill: var(--border); fill-opacity: 0.75; }
.schraubenbild .lasche, .stirnplattenbild .lasche { fill: var(--accent-hell); fill-opacity: 0.8; stroke: var(--accent); stroke-width: 1.2; }
.schraubenbild .loch, .stirnplattenbild .loch { fill: var(--surface); stroke: var(--text); stroke-width: 1.2; }
.schraubenbild .schaft, .stirnplattenbild .schaft { stroke: var(--text); stroke-width: 2; }
.schraubenbild .masslinie, .stirnplattenbild .masslinie { stroke: var(--muted); stroke-width: 0.9; }
.schraubenbild .kraft, .stirnplattenbild .kraft { stroke: var(--bad); stroke-width: 2; }
.schraubenbild .kraftpfeil, .stirnplattenbild .kraftpfeil { fill: var(--bad); }
.stirnplattenbild .loch.zugreihe { fill: var(--bad-hell); stroke: var(--bad); }
.diagramm.torbild { max-width: 460px; margin: 0 auto; }
.torbild .gelaende { stroke: #8a6d3b; stroke-width: 1.5; }
.torbild .platte { fill: var(--border-stark); stroke: var(--text); stroke-width: 1; }
.torbild .pfosten { fill: var(--surface-2); stroke: var(--text); stroke-width: 1.4; }
.torbild .fluegel { fill: none; stroke: var(--text); stroke-width: 1.4; }
.torbild .fluegel.voll { fill: var(--accent-hell); }
.torbild .stab { stroke: var(--muted); stroke-width: 1; }
.torbild .faltlinie { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.torbild .band { fill: var(--surface); stroke: var(--text); stroke-width: 1.4; }
.torbild .hebel { stroke: var(--bad); stroke-width: 1.2; stroke-dasharray: 4 3; }
.torbild .schwerpunkt { fill: var(--bad); }

/* Trockenbauwand: Ansicht mit Staendern, Tueren und Plattenstoessen */
.diagramm.wandbild { max-width: 560px; margin: 0 auto; }
.wandbild .staender { stroke: var(--accent); stroke-width: 1.6; }
.wandbild .staender.kurz { stroke-width: 1.2; }
.wandbild .tuerstaender { stroke: var(--text); stroke-width: 3; }
.wandbild .uw, .wandbild .sturz { stroke: var(--text); stroke-width: 3; }
.wandbild .oeffnung { fill: var(--surface-2); stroke: none; }
.wandbild .plattenstoss { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }

/* Mauerwerkswand: Ansicht mit Steinraster, Oeffnungen und Oeffnung im Raster */
.diagramm.mauerbild { max-width: 560px; margin: 0 auto; }
.mauerbild .wand { fill: var(--surface-2); stroke: var(--text); stroke-width: 1.4; }
.mauerbild .fuge { stroke: var(--muted); stroke-width: 0.6; }
.mauerbild .oeffnung { fill: var(--surface); stroke: var(--text); stroke-width: 1.4; }
.mauerbild .sturz { fill: #9aa3a8; stroke: var(--text); stroke-width: 1.2; }
.mauerbild .ideal { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 5 3; }
.mauerbild .ideal-linie { stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 5 3; }
.mauerbild text.mass { fill: var(--text); font: 11.5px var(--mono); }
.mauerbild text.klein { fill: var(--muted); font: 10.5px var(--mono); }
.oeffnung-raster { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.oeffnung-raster .raster-hinweis { flex: 1 1 auto; }
.sturzliste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.sturzliste li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.sturzliste li span { flex: 1 1 260px; }
.pro-marke { font: 600 10px/1 var(--mono); letter-spacing: 0.04em; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 2px 4px; margin-left: 6px; vertical-align: middle; }

/* ---------- Druck und PDF (js/core/pdfexport.js) ----------

   Gilt nur mit html.druckbar, also nur wenn der PDF-Export eingeschaltet ist.
   Reihenfolge im Dokument: Kopf mit Bauherr und Baustelle, Titel, Eingaben,
   Ergebnisse, Datengrundlagen, Haftungshinweis. Eingabefelder erscheinen als
   Werte, Knoepfe entfallen - bis auf den gewaehlten eines Umschalters. */

.druckkopf, .druckfuss { display: none; }

@page { size: A4; margin: 14mm 13mm 16mm; }

@media print {
  /* Immer hell, auch wenn der Bildschirm dunkel eingestellt ist */
  :root.druckbar {
    --bg: #ffffff; --surface: #ffffff; --surface-2: #ebebe6; --border: #c6c6be; --border-stark: #9a9a90;
    --text: #0c0c0c; --muted: #4c4e47; --accent: #184663; --accent-hell: #e3eef4;
    --ok: #256034; --ok-hell: #e4f1e6; --warn: #7a4e00; --warn-hell: #fbf0d8; --bad: #921c1c; --bad-hell: #f8e5e3;
    color-scheme: light;
  }
  .druckbar body { background: #fff; font-size: 12.5px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .druckbar .kopf, .druckbar .fuss, .druckbar .krumen, .druckbar .erlaeuterung, .druckbar dialog, .druckbar .overlay, .druckbar .tip,
  .druckbar .info-knopf, .druckbar .adress-knoepfe, .druckbar [id^="uebergabe"], .druckbar .projektstatus, .druckbar .projektziel,
  .druckbar button:not([aria-pressed="true"]) { display: none !important; }

  /* Markierung aus dem Projekt ist Bedienhilfe, kein Teil des Ausdrucks */
  .druckbar .feld > label::before, .druckbar label.aus-projekt::after, .druckbar label.von-hand::after, .druckbar label.geaendert::after { content: none !important; }
  .druckbar .aus-projekt > input, .druckbar .aus-projekt > select { background: transparent; }
  .druckbar .von-hand > input, .druckbar .von-hand > select, .druckbar .listen-aus-projekt { box-shadow: none; }

  .druckbar main { max-width: none; padding: 0; display: flex; flex-direction: column; }
  .druckbar main > * { flex: none; }
  .druckbar .datengrundlagen { order: 2; margin: 0 0 10px; }
  .druckbar .druckfuss { order: 3; }

  .druckbar .druckkopf { display: block; margin-bottom: 10px; }
  .druckmarke { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); padding-bottom: 5px; border-bottom: 1.5px solid var(--text); }
  .druckmarke > span:first-child { display: flex; align-items: center; gap: 7px; font-weight: 650; color: var(--text); font-size: 12.5px; }
  .druckmarke .zeichen { width: 18px; height: 18px; border: 1.5px solid var(--accent); border-radius: 3px; display: grid; place-items: center; font: 600 10px/1 var(--mono); color: var(--accent); }
  .druckangaben { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; margin-top: 10px; }
  .druckangabe { display: flex; gap: 8px; align-items: flex-end; }
  .druckangabe .name { flex: none; font-size: 11px; color: var(--muted); padding-bottom: 2px; }
  /* Leer bleibt eine Linie zum Ausfuellen von Hand */
  .druckangabe .inhalt { flex: 1; min-height: 1.6em; border-bottom: 1px solid var(--border-stark); white-space: pre-line; padding-bottom: 1px; }

  .druckbar .druckfuss { display: block; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border-stark); font-size: 10.5px; color: var(--muted); break-inside: avoid; }
  .druckfuss p { margin: 0 0 4px; }

  .druckbar .seitentitel { font-size: 21px; margin: 4px 0 2px; }
  .druckbar .seitenlead { margin-bottom: 12px; max-width: none; }

  .druckbar .spalten { display: block; }
  .druckbar .karte { border-color: var(--border); padding: 10px 12px; margin-bottom: 10px; break-inside: avoid; }
  .druckbar .karte > h2, .druckbar .karte > h3 { margin-bottom: 8px; break-after: avoid; }
  .druckbar .schritt, .druckbar .nachweis, .druckbar .hinweis, .druckbar tr, .druckbar svg { break-inside: avoid; }
  .druckbar .tab-rahmen { overflow: visible; max-height: none; }
  /* Breite Tabellen umbrechen statt ueber den Seitenrand laufen - im PDF gibt es kein Scrollen */
  .druckbar table.tab { font-size: 11.5px; }
  .druckbar table.tab th { position: static; white-space: normal; }
  .druckbar table.tab td { white-space: normal; padding: 4px 7px; }
  /* Eigengewichte: Auswahlfeld ist am Bildschirm mindestens 24em breit, im
     Druck bricht der gewaehlte Baustoff stattdessen um */
  .druckbar table.schichten select { min-width: 0; width: 100%; white-space: normal; }

  /* Eingaben als Werte: ohne Rahmen und Pfeil, eine feine Linie darunter */
  .druckbar input[type="text"], .druckbar input[type="number"], .druckbar select, .druckbar textarea {
    border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none;
    padding: 1px 0; min-height: 0; color: var(--text);
  }
  .druckbar .feld { margin-bottom: 7px; }
  .druckbar .feld > label { margin-bottom: 1px; }
  .druckbar .wechsel { margin-bottom: 7px; }
  .druckbar .wechsel button[aria-pressed="true"] { flex: none; border-radius: var(--radius); margin: 0; }

  .druckbar .datengrundlagen > summary { color: var(--text); padding: 6px 12px; list-style: none; }
  .druckbar .datengrundlagen > summary::-webkit-details-marker { display: none; }
  .druckbar .datengrundlagen { break-inside: auto; }
}