/* ---------------------------------------------------------------------------
   Gemeinsames Aussehen aller Oberflächen.

   Grundsätze:
   - Ein Vorgang pro Bildschirm, klare Hauptaktion (Katalog 17).
   - Große Bedienflächen: mindestens 44 px, damit die Monteur-App auch mit
     Handschuhen bedienbar bleibt.
   - Kontraste nach WCAG AA: Text auf hellem Grund mindestens 4,5:1.
   - Keine fremden Schriften oder Symbolsätze - alles liegt lokal, sonst
     blockiert die Sicherheitsregel des Servers die Seite.
   - Farben kommen aus der Mandantenkonfiguration und werden zur Laufzeit
     gesetzt (siehe kern.js, farbenSetzen).
--------------------------------------------------------------------------- */

/* Hausschrift Barlow - liegt lokal, die Sicherheitsregel erlaubt keine
   fremden Quellen. Gleiche Dateien nutzt auch die Startseite. */
@font-face {
  font-family: "Barlow";
  src: url("/assets/schrift/barlow-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/schrift/barlow-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/schrift/barlow-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/schrift/barlow-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/schrift/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/schrift/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Markenpalette „Nachtwache" - dieselben Werte stehen in der
     Mandantenkonfiguration (farbenSetzen legt sie zur Laufzeit darüber). */
  --primaer: #1c4a7d;
  --primaer-hell: #2c6299;
  --primaer-dunkel: #0f2338;
  --akzent: #4b8eeb;
  --akzent-dunkel: #2b6bc4;
  --akzent-tief: #2b6bc4;   /* Markenblau als Text auf hellem Grund */
  --stahl: #627796;

  --grund: #f3f5f9;
  --flaeche: #ffffff;
  --flaeche-gedaempft: #ebeff5;
  --rand: #d5dce6;
  --rand-stark: #b3bec9;

  --text: #16202c;
  --text-gedaempft: #55636f;
  --text-hell: #ffffff;

  --gut: #1d6f42;
  --gut-grund: #e6f4ec;
  --warnung: #97600a;
  --warnung-grund: #fdf1dc;
  --fehler: #a32020;
  --fehler-grund: #fbeaea;
  --info: #1c4f8b;
  --info-grund: #e8f0fa;

  --radius: 12px;
  --radius-klein: 7px;
  --schatten: 0 1px 2px rgba(10, 21, 38, .05), 0 4px 14px rgba(10, 21, 38, .06);
  --schatten-stark: 0 6px 28px rgba(10, 21, 38, .16);
  --abstand: 16px;
  --schrift: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-eng: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --schrift-zahl: "SF Mono", ui-monospace, "Menlo", "Consolas", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--schrift);
  color: var(--text);
  background: var(--grund);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 650; }
h1 { font-family: var(--schrift-eng); font-weight: 600; font-size: 2rem; letter-spacing: .002em; line-height: 1.1; }
h2 { font-family: var(--schrift-eng); font-weight: 600; font-size: 1.5rem; letter-spacing: .002em; }
h3 { font-size: 1.06rem; }
h4 { font-size: .95rem; color: var(--text-gedaempft); text-transform: uppercase; letter-spacing: .04em; }
p { margin: 0 0 1em; }
a { color: var(--primaer); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: .85rem; color: var(--text-gedaempft); }

/* --- Gerüst --------------------------------------------------------------- */

.huelle { max-width: 1320px; margin: 0 auto; padding: 0 var(--abstand); }
.huelle-schmal { max-width: 820px; margin: 0 auto; padding: 0 var(--abstand); }

.kopfleiste {
  background: rgba(10, 21, 38, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text-hell);
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.kopfleiste .huelle { display: flex; align-items: center; gap: var(--abstand); min-height: 62px; }
.marke { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.08rem; color: #fff; }
.marke:hover { text-decoration: none; }
/* Das Turm-Zeichen bringt seinen eigenen dunklen Kasten mit - kein Farbfeld dahinter. */
.marke .zeichen {
  width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  background: transparent; color: var(--primaer-dunkel); flex: none;
}
.marke .zeichen svg, .marke .zeichen img { width: 30px; height: 30px; }
.marke em { font-style: normal; color: var(--akzent); }

.hauptnavigation { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.hauptnavigation a, .hauptnavigation button {
  color: rgba(255, 255, 255, .88);
  padding: 9px 13px;
  border-radius: var(--radius-klein);
  font-size: .94rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  min-height: 40px;
}
.hauptnavigation a:hover, .hauptnavigation button:hover { background: rgba(255, 255, 255, .12); text-decoration: none; color: #fff; }
.hauptnavigation a.aktiv { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 600; }

/* minmax(0, 1fr) statt 1fr: sonst sprengt breiter Inhalt (Tabellen, Bänder)
   die Spalte und schiebt die ganze Seite seitlich über den Bildschirm. */
.seitenraster { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 22px; align-items: start; }
.seitenleiste {
  position: sticky; top: 78px; background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 10px; box-shadow: var(--schatten);
}
.seitenleiste a {
  display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: var(--radius-klein);
  color: var(--text); font-size: .94rem; min-height: 42px;
}
.seitenleiste a:hover { background: var(--flaeche-gedaempft); text-decoration: none; }
.seitenleiste a.aktiv { background: var(--primaer); color: #fff; font-weight: 600; }
.seitenleiste a.aktiv svg { color: var(--akzent); }
.seitenleiste svg { width: 18px; height: 18px; flex: none; color: var(--text-gedaempft); }
.seitenleiste .gruppe { padding: 14px 11px 6px; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-gedaempft); font-weight: 700; }

main { padding: 22px 0 60px; }
/* Ein randloser Aufmacher soll direkt unter der Kopfleiste sitzen - sonst
   steht ein heller Streifen zwischen zwei dunklen Flächen. */
main > .aufmacher:first-child { margin-top: -22px; }

/* --- Karten und Blöcke ---------------------------------------------------- */

.karte {
  background: var(--flaeche);
  /* Die Karte setzt ihren Hintergrund selbst, also auch die Schriftfarbe: sonst
     erbt sie in dunklen Abschnitten (z.B. .aufmacher) weisse Schrift und
     Ueberschriften ohne eigene Farbe verschwinden auf dem hellen Grund. */
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--schatten);
  margin-bottom: var(--abstand);
}
.karte > :last-child { margin-bottom: 0; }
.karte-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -18px -18px 16px; padding: 14px 18px; border-bottom: 1px solid var(--rand);
  background: var(--flaeche-gedaempft); border-radius: var(--radius) var(--radius) 0 0;
}
.karte-kopf h2, .karte-kopf h3 { margin: 0; }

.raster { display: grid; gap: var(--abstand); }
/* min(...) statt einer festen Mindestbreite: auf einem 320-px-Handy bleiben
   nach den Seitenraendern keine 300 px uebrig, und eine Rasterspalte, die
   breiter ist als ihr Behaelter, schiebt die ganze Seite nach rechts.
   Gemessen am 27.08.2026: Trefferliste lief 62 px aus dem Bild. */
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.raster-4 { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.raster > * { min-width: 0; }

.zeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.zeile-verteilt { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.abstand-oben { margin-top: var(--abstand); }

/* --- Kennzahlen ----------------------------------------------------------- */

.kennzahl {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 15px 16px; display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; box-shadow: var(--schatten); transition: transform .12s ease, box-shadow .12s ease;
}
.kennzahl:hover { transform: translateY(-1px); box-shadow: var(--schatten-stark); text-decoration: none; }
.kennzahl .titel { font-size: .82rem; color: var(--text-gedaempft); text-transform: uppercase; letter-spacing: .04em; font-weight: 650; }
.kennzahl .wert { font-family: var(--schrift-eng); font-size: 2.3rem; font-weight: 700; line-height: 1.08; margin: 6px 0 2px; color: var(--primaer); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
/* Kennzahlen treten beim Aufbau ruhig gestaffelt ein. */
@media (prefers-reduced-motion: no-preference) {
  .kennzahl { animation: kennzahl-auftritt .45s cubic-bezier(.22, 1, .36, 1) backwards; }
  .kennzahl:nth-child(2) { animation-delay: .06s; }
  .kennzahl:nth-child(3) { animation-delay: .12s; }
  .kennzahl:nth-child(4) { animation-delay: .18s; }
  .kennzahl:nth-child(5) { animation-delay: .24s; }
  .kennzahl:nth-child(6) { animation-delay: .3s; }
}
@keyframes kennzahl-auftritt {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.kennzahl .zusatz { font-size: .87rem; color: var(--text-gedaempft); }
.kennzahl.warnend .wert { color: var(--warnung); }
.kennzahl.kritisch .wert { color: var(--fehler); }
.kennzahl.gut .wert { color: var(--gut); }

/* --- Schilder ------------------------------------------------------------- */

.schild {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: .8rem; font-weight: 650; background: var(--flaeche-gedaempft); color: var(--text-gedaempft);
  border: 1px solid var(--rand); white-space: nowrap; max-width: 100%;
}
/* Ein Schild mit "1 × für 16.09.2026 bis 15.11.2026" ist kein Zustandswort
   mehr. Auf schmalen Geraeten darf es deshalb umbrechen, statt die Seite
   aufzuspannen. */
@media (max-width: 420px) {
  .schild { white-space: normal; }
}
.schild.gut { background: var(--gut-grund); color: var(--gut); border-color: #bfe0cd; }
.schild.warnung { background: var(--warnung-grund); color: var(--warnung); border-color: #edd6a8; }
.schild.fehler { background: var(--fehler-grund); color: var(--fehler); border-color: #eec4c4; }
.schild.info { background: var(--info-grund); color: var(--info); border-color: #c3d6ee; }
.schild.punkt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* --- Knöpfe --------------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 18px; border-radius: var(--radius-klein);
  border: 1px solid transparent; background: var(--primaer); color: #fff;
  font-family: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.knopf:hover { background: var(--primaer-hell); text-decoration: none; color: #fff; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf svg { width: 18px; height: 18px; }
.knopf.zweitrangig { background: var(--flaeche); color: var(--text); border-color: var(--rand-stark); }
.knopf.zweitrangig:hover { background: var(--flaeche-gedaempft); color: var(--text); }
.knopf.betont { background: var(--akzent); color: var(--primaer-dunkel); }
.knopf.betont:hover { background: #6ea6f0; color: var(--primaer-dunkel); }
.knopf.gefahr { background: var(--fehler); }
.knopf.gefahr:hover { background: #8b1a1a; }
.knopf.schlicht { background: transparent; color: var(--primaer); border-color: transparent; padding: 8px 10px; min-height: 40px; }
.knopf.schlicht:hover { background: var(--flaeche-gedaempft); color: var(--primaer); }
.knopf.klein { min-height: 36px; padding: 7px 12px; font-size: .88rem; }
.knopf.breit { width: 100%; }

/* --- Formulare ------------------------------------------------------------ */

.feld { margin-bottom: 14px; }
.feld > label, .feldname {
  display: block; font-size: .87rem; font-weight: 650; margin-bottom: 5px; color: var(--text);
}
.feld .hilfe { font-size: .84rem; color: var(--text-gedaempft); margin-top: 4px; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], input[type="date"], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein); font-family: inherit; font-size: 1rem; color: var(--text);
  background: var(--flaeche);
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus, .knopf:focus-visible, .kennzahl:focus-visible {
  outline: 3px solid rgba(27, 62, 99, .32); outline-offset: 1px; border-color: var(--primaer);
}
input:disabled, select:disabled, textarea:disabled { background: var(--flaeche-gedaempft); color: var(--text-gedaempft); }
.feld-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; }

.wahl { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--rand);
  border-radius: var(--radius-klein); cursor: pointer; background: var(--flaeche); margin-bottom: 8px; }
.wahl:hover { border-color: var(--rand-stark); background: var(--flaeche-gedaempft); }
.wahl input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--primaer); }
.wahl.gewaehlt { border-color: var(--primaer); background: var(--info-grund); box-shadow: inset 0 0 0 1px var(--primaer); }
.wahl .titel { font-weight: 640; }
.wahl .beschreibung { font-size: .88rem; color: var(--text-gedaempft); }

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

.tabellenrahmen { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); }
table.liste { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.liste th {
  text-align: left; padding: 11px 13px; background: var(--flaeche-gedaempft); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-gedaempft); font-weight: 700;
  border-bottom: 1px solid var(--rand); white-space: nowrap; position: sticky; top: 0;
}
table.liste td { padding: 11px 13px; border-bottom: 1px solid var(--rand); vertical-align: top; }
table.liste tr:last-child td { border-bottom: 0; }
table.liste tbody tr:hover { background: var(--flaeche-gedaempft); }
table.liste td.zahl, table.liste th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.liste .anklickbar { cursor: pointer; }

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

.hinweis {
  border: 1px solid #c3d6ee; background: var(--info-grund); padding: 12px 15px;
  border-radius: var(--radius-klein); margin-bottom: var(--abstand); font-size: .94rem; color: #123a68;
}
.hinweis.warnung { border-color: #edd6a8; background: var(--warnung-grund); color: #6d4506; }
.hinweis.fehler { border-color: #eec4c4; background: var(--fehler-grund); color: #7d1818; }
.hinweis.gut { border-color: #bfe0cd; background: var(--gut-grund); color: #12512f; }
.hinweis strong { font-weight: 700; }
.hinweis .titel { font-weight: 700; margin-bottom: 3px; }

.leer { text-align: center; padding: 40px 20px; color: var(--text-gedaempft); }
.leer svg { width: 42px; height: 42px; opacity: .35; margin-bottom: 10px; }
.leer .titel { font-weight: 650; color: var(--text); margin-bottom: 4px; }

/* --- Fortschritt ---------------------------------------------------------- */

.schritte { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; }
.schritte .schritt {
  flex: 1 1 140px; padding: 9px 12px; border-radius: var(--radius-klein); background: var(--flaeche);
  border: 1px solid var(--rand); font-size: .87rem; color: var(--text-gedaempft); display: flex; gap: 8px; align-items: center;
}
.schritte .schritt .nummer {
  width: 23px; height: 23px; border-radius: 50%; background: var(--rand); color: var(--text);
  display: grid; place-items: center; font-size: .78rem; font-weight: 700; flex: none;
}
.schritte .schritt.aktiv { border-color: var(--primaer); color: var(--text); font-weight: 640; background: var(--info-grund); }
.schritte .schritt.aktiv .nummer { background: var(--primaer); color: #fff; }
.schritte .schritt.erledigt .nummer { background: var(--gut); color: #fff; }

.balken { height: 8px; background: var(--flaeche-gedaempft); border-radius: 999px; overflow: hidden; }
.balken > span { display: block; height: 100%; background: var(--primaer); border-radius: 999px; }
.balken.gut > span { background: var(--gut); }
.balken.warnung > span { background: var(--warnung); }
.balken.fehler > span { background: var(--fehler); }

/* --- Dialog --------------------------------------------------------------- */

.dialog-grund {
  position: fixed; inset: 0; background: rgba(13, 31, 51, .55); display: grid; place-items: center;
  padding: 18px; z-index: 90;
}
.dialog {
  background: var(--flaeche); border-radius: var(--radius); max-width: 620px; width: 100%;
  max-height: 88vh; overflow-y: auto; box-shadow: var(--schatten-stark);
}
.dialog .kopf { padding: 16px 20px; border-bottom: 1px solid var(--rand); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dialog .kopf h2, .dialog .kopf h3 { margin: 0; }
.dialog .inhalt { padding: 20px; }
.dialog .fuss { padding: 14px 20px; border-top: 1px solid var(--rand); display: flex; gap: 10px; justify-content: flex-end; background: var(--flaeche-gedaempft); }

/* --- Meldungen ------------------------------------------------------------ */

#meldungen { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: 400px; }
.meldung {
  background: var(--primaer-dunkel); color: #fff; padding: 12px 16px; border-radius: var(--radius-klein);
  box-shadow: var(--schatten-stark); font-size: .93rem; animation: einblenden .18s ease;
}
.meldung.gut { background: var(--gut); }
.meldung.fehler { background: var(--fehler); }
.meldung.warnung { background: var(--warnung); }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- Sonstiges ------------------------------------------------------------ */

.zahl { font-variant-numeric: tabular-nums; }
.gedaempft { color: var(--text-gedaempft); }

/* Unterlagen an der Baustelle: Lageplan und Einweisung fuer den Monteur. */
.unterlagen { margin-top: 8px; }
.unterlagenliste { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.unterlagenliste li { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: .9rem; }
.unterlagenliste svg { width: 16px; height: 16px; flex: none; color: var(--text-gedaempft); }
.unterlagenliste .gedaempft { font-size: .82rem; }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }
.trenner { height: 1px; background: var(--rand); margin: var(--abstand) 0; border: 0; }
.laden { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--rand); border-top-color: var(--primaer); border-radius: 50%; animation: drehen .7s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bildraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.bildraster figure { margin: 0; }
.bildraster img { width: 100%; height: 112px; object-fit: cover; border-radius: var(--radius-klein); border: 1px solid var(--rand); background: var(--flaeche-gedaempft); }
.bildraster figcaption { font-size: .8rem; color: var(--text-gedaempft); margin-top: 4px; }

/* Listen unter 700px: jede Zeile wird zu einer Karte, jede Zelle bekommt ihre
   Spaltenbeschriftung davor (data-spalte kommt aus MDK.tabellenBeschriften).
   Sonst stehen Betrag, Stand und PDF ausserhalb des Bildschirms. */
@media (max-width: 700px) {
  .tabellenrahmen { overflow-x: visible; border: 0; background: transparent; border-radius: 0; }
  /* Mehrere Listen tragen eine Mindestbreite als Inline-Angabe (etwa
     min-width:940px), damit am Rechner alle Spalten nebeneinander passen.
     Inline schlaegt jede Regel hier - deshalb ausnahmsweise !important:
     gemessen am 27.08.2026 lief die Ansicht "Produkte und Preise" auf einem
     390 px breiten Handy 585 px nach rechts aus dem Bild. In der
     Kartendarstellung unten gibt es keine Spalten mehr, die Breite braeuchten. */
  table.liste { min-width: 0 !important; }
  /* Vorlagenschluessel wie "verlaengerung.bestaetigt" sind ein Wort ohne
     Trennstelle und schoben die Einstellungen bei 320 px um 33 px nach
     rechts aus dem Bild. */
  code { overflow-wrap: anywhere; word-break: break-word; }
  table.liste th, table.liste td { min-width: 0 !important; }
  table.liste thead { display: none; }
  table.liste, table.liste tbody, table.liste tr, table.liste td { display: block; width: auto; }
  table.liste tr {
    border: 1px solid var(--rand); border-radius: var(--radius-klein);
    background: var(--flaeche); padding: 6px 12px; margin-bottom: 10px;
  }
  table.liste tr:last-child { margin-bottom: 0; }
  /* Beschriftung absolut links, Wert im normalen Fluss daneben. Kein Grid:
     eine Zelle enthält oft mehrere Angaben (Name plus Kundennummer), die
     sonst als eigene Rasterfelder unter die Beschriftung rutschen. */
  table.liste td, table.liste tr:last-child td {
    /* min-height fängt zweizeilige Beschriftungen ab: die Zellhöhe richtet
       sich sonst nur nach dem Wert und die Trennlinie rückt an den Text. */
    position: relative; padding: 8px 0 10px 41%; min-height: 3em;
    border-bottom: 1px solid var(--rand);
  }
  table.liste td:last-child { border-bottom: 0; }
  table.liste td[data-spalte]::before {
    content: attr(data-spalte);
    position: absolute; left: 0; top: 8px; width: 38%;
    color: var(--text-gedaempft); font-size: .82rem; text-transform: uppercase;
    letter-spacing: .04em; font-weight: 700; line-height: 1.35;
    /* Lange Spaltennamen wie „Leistungszeitraum" sind ein Wort ohne
       Trennstelle. Das white-space kommt von der Zellklasse .nowrap und muss
       für die Beschriftung zurückgenommen werden - nur der Wert bleibt
       einzeilig. */
    /* break-word statt anywhere: "anywhere" trennt mitten im Wort, auch
       wenn Platz waere - aus "Abweichende Rechte" wurde "ABWEICHEN-DE".
       break-word bricht erst, wenn es sein muss, und laesst die
       Silbentrennung ihre Arbeit machen. */
    white-space: normal; overflow-wrap: break-word; hyphens: auto;
  }
  /* Zellen ohne Beschriftung (Aktionsspalten) brauchen den Einzug nicht.
     Die letzte Zeile braucht eine eigene Regel: `tr:last-child td` oben ist
     spezifischer als `td:not([data-spalte])` und haette den Einzug dort
     wieder gesetzt - Knoepfe waeren um 41 % eingerueckt. */
  table.liste td:not([data-spalte]),
  table.liste tr:last-child td:not([data-spalte]) { padding-left: 0; min-height: 0; }
  table.liste td.zahl { text-align: left; }
  table.liste td:empty { display: none; }
}

/* Schalter für die Kopfleiste. Erst unter 720px sichtbar, davor gibt es genug
   Platz für die Menüpunkte nebeneinander. */
.navi-schalter {
  display: none; margin-left: auto; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none; padding: 0;
  border: 1px solid rgba(255, 255, 255, .26); border-radius: var(--radius-klein);
  background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
}
.navi-schalter:hover { background: rgba(255, 255, 255, .2); }
.navi-schalter:focus-visible { outline: 3px solid rgba(255, 255, 255, .5); outline-offset: 2px; }

/* Bis 1000px liegt die Navigation quer über dem Inhalt statt daneben. Bei
   901-999px blieb sie früher seitlich stehen und nahm 250px, sodass für die
   Einsatzliste nur 579px übrig waren - die Aktionsknöpfe lagen dann ausserhalb
   des Rahmens. Der Wert deckt sich mit der Grenze, ab der das Detailraster
   einspaltig wird. */
@media (max-width: 1000px) {
  .seitenraster { grid-template-columns: minmax(0, 1fr); }
  /* Die Bereichsleiste wird auf schmalen Geraeten zur Wischleiste. Ohne
     sichtbaren Hinweis sieht sie aus, als waere sie abgeschnitten - die
     Blende am rechten Rand zeigt, dass dort weitergeht. */
  .seitenleiste {
    position: static; display: flex; overflow-x: auto; gap: 4px; padding: 8px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .seitenleiste::-webkit-scrollbar { display: none; }
  .seitenleiste a { white-space: nowrap; }
  .seitenleiste .gruppe { display: none; }
  h1 { font-size: 1.45rem; }
}

@media (max-width: 720px) {
  .kopfleiste .huelle { flex-wrap: wrap; gap: 10px; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
  .marke { font-size: 1rem; min-width: 0; }
  .navi-schalter { display: inline-flex; }
  /* Aufgeklappt in voller Breite unter der Marke, statt gestapelt daneben. */
  .hauptnavigation {
    display: none; order: 3; flex-basis: 100%; margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    border-top: 1px solid rgba(255, 255, 255, .16); padding: 8px 0 4px;
  }
  .hauptnavigation.offen { display: flex; }
  .hauptnavigation a, .hauptnavigation button { text-align: left; width: 100%; }
  .benutzeranzeige { padding: 8px 13px; }
}

/* Unter 360px (iPhone SE, kleine Android-Geräte) lief die Kopfzeile seitlich
   über. Marke darf schrumpfen, der Wortteil im Logo notfalls umbrechen. */
@media (max-width: 380px) {
  .huelle, .huelle-schmal { padding: 0 12px; }
  .marke { font-size: .95rem; gap: 8px; }
  .marke .zeichen { width: 30px; height: 30px; }
  .marke span:not(.zeichen) { overflow-wrap: anywhere; }
}

@media print {
  .kopfleiste, .seitenleiste, .knopf, #meldungen { display: none !important; }
  body { background: #fff; }
  .karte { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

/* Dateiwahl als richtiger Knopf: ein <input type="file"> sieht auf jedem
   Gerät anders aus und ist mit dem Finger kaum zu treffen. Das Feld liegt
   deshalb unsichtbar über einem Knopf, der sich wie jeder andere verhält. */
.aufnahme { position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.aufnahme input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 200px; }

/* Kleine Beschriftung neben einem Wert - Funktion, Gruppe, "freiwillig".
   Bewusst nicht ".marke": So heißt die Wortmarke in der Kopfzeile, sie ist
   weiß und flex. Auf hellem Grund wäre dieser Text sonst unsichtbar. */
.beisatz { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-gedaempft); font-weight: 600; }


/* --- Preisdarstellung privat oder gewerblich -------------------------------
   Der Betreiber besteht darauf, dass die Segmente getrennt sind: "wenn Privat
   muss das mit Mehrwertsteuer stehen. Und wenn er sagt, ich bin Firma, Netto
   Plus Mehrwertsteuer." Der Schalter steht deshalb ueber dem Katalog und
   nicht in einer Fusszeile. Angemeldete Kunden sehen ihn nicht - fuer sie
   entscheidet das Konto. Farben ausschliesslich ueber die Variablen, damit
   ein White-Label-Betrieb mit eigener Palette nicht auseinanderfaellt. */
.preissicht-wahl {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 20px; padding: 11px 14px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}
/* Ohne diese Zeile bleibt die Leiste trotz [hidden] stehen: die eigene
   display-Angabe schlaegt das display:none des Browser-Stylesheets. */
.preissicht-wahl[hidden] { display: none; }
.preissicht-frage { color: var(--text); font-size: .95rem; font-weight: 650; }
.preissicht-knopf {
  font: inherit; font-size: .95rem; cursor: pointer; min-height: 40px;
  padding: 8px 18px; border-radius: var(--radius-klein);
  border: 1px solid var(--rand-stark);
  background: var(--flaeche); color: var(--text);
}
.preissicht-knopf:hover { border-color: var(--primaer); }
.preissicht-knopf[aria-pressed="true"] {
  background: var(--primaer); border-color: var(--primaer);
  color: var(--text-hell); font-weight: 650;
}
.preissicht-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.preissicht-hinweis { color: var(--text-gedaempft); font-size: .88rem; flex: 1 1 18rem; }
@media (max-width: 640px) { .preissicht-hinweis { flex-basis: 100%; } }

/* Nachlasszeile im Summenblock: als Abzug erkennbar, ohne Signalfarbe. */
.summenblock .zeile-verteilt.nachlass,
.summenblock .zeile-verteilt.nachlass .zahl { color: var(--gut); font-weight: 600; }

/* Einwilligung mit eigener Rechtsfolge - hebt sich vom gewoehnlichen Haken ab.
   Rahmen und heller Grund statt Farbflaeche, damit der Text seine Farbe und
   damit seinen Kontrast behaelt. */
.wahl.wahl-achtung {
  border-color: var(--primaer); border-left-width: 3px;
  background: var(--info-grund);
}

/* Auswahl privat/gewerblich im Anmeldeformular. */
.label-wie { display: block; font-size: .87rem; font-weight: 650; margin-bottom: 5px; color: var(--text); }
.wahlreihe { display: flex; gap: 8px; flex-wrap: wrap; }
.wahl-knopf {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  min-height: 44px; padding: 8px 16px; border-radius: var(--radius-klein);
  border: 1px solid var(--rand-stark); background: var(--flaeche); color: var(--text);
}
.wahl-knopf:hover { border-color: var(--primaer); }
.wahl-knopf input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--primaer); }
.wahl-knopf:has(input:checked) {
  border-color: var(--primaer); background: var(--info-grund); font-weight: 640;
  box-shadow: inset 0 0 0 1px var(--primaer);
}