/*
 * THW Toolbox – Referenzkomponenten (Design-Version 0.5.2)
 * Setzt tokens.css voraus. Ausschließlich Tokens, keine Rohwerte für Farben,
 * Schriften und Abstände. Mobil zuerst (Handy), Erweiterung per min-width:
 *   Tablet ab 40rem, PC ab 64rem. Zielgröße nach Zeigegerät (--ziel), Hover nur mit Maus.
 *
 * Inhalt
 *   1 Grundlagen        5 Eingabe              9 Struktur
 *   2 Kopf, Status      6 Rückmeldung          10 Rechenmodul
 *   3 Schaltflächen     7 Dialog               11 Zugang
 *   4 Navigation        8 Daten und Listen     12 Bewegung
 *   13 Modul-Kopfzeile (kopf.js)
 *   14 Ausnutzung, Kennzahl mit Balken, Kennwerttabelle, Zeichnungsrahmen (ab 0.2.0)
 */

/* Das Attribut hidden gilt immer, auch für Bausteine mit eigener display-Regel */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Seitenrand inklusive iPhone-Rand (Safe-Area) */
  --rand-links:  max(var(--seitenrand), var(--sicher-links));
  --rand-rechts: max(var(--seitenrand), var(--sicher-rechts));
}

body {
  margin: 0;
  font-family: var(--schrift-ui);
  font-size: var(--groesse-m);
  line-height: var(--zeilenhoehe-normal);
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
}

h1, h2, h3, h4 {
  font-family: var(--schrift-ueberschrift);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeilenhoehe-eng);
  color: var(--farbe-ueberschrift);
  margin: 0 0 var(--abstand-3);
  text-align: left;
}
h1 { font-size: var(--groesse-h1); }
h2 { font-size: var(--groesse-h2); }
h3 { font-size: var(--groesse-h3); }

a { color: var(--farbe-link); }

.tb-lesetext { font-family: var(--schrift-lesetext); }

.tb-seite {
  width: 100%;
  max-width: var(--inhalt-max-breite);
  margin-inline: auto;
  padding-block: var(--abstand-5);
  padding-left: var(--rand-links);
  padding-right: var(--rand-rechts);
}

/* nur für Screenreader sichtbar */
.tb-nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sprunglink zum Inhalt, erscheint nur bei Tastaturfokus */
.tb-sprung {
  position: absolute;
  inset-block-start: var(--abstand-2);
  inset-inline-start: var(--abstand-2);
  z-index: 200;
  padding: var(--abstand-2) var(--abstand-4);
  font-weight: var(--gewicht-fett);
  background: var(--farbe-hintergrund);
  border: var(--fokus-ring);
  transform: translateY(-300%);
}
.tb-sprung:focus { transform: none; }

/* Raster: Handy eine Spalte, Tablet zwei, PC zwölf (Inhalt höchstens 1200 px) */
.tb-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spaltenabstand);
}
@media (min-width: 40rem) {
  .tb-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-spanne-8, .tb-spanne-12 { grid-column: span 2; }
}
@media (min-width: 64rem) {
  .tb-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tb-spanne-12 { grid-column: span 12; }
  .tb-spanne-8 { grid-column: span 8; }
  .tb-spanne-6 { grid-column: span 6; }
  .tb-spanne-4 { grid-column: span 4; }
  .tb-spanne-3 { grid-column: span 3; }
}

/* ---------- Sichtbarer Fokusring ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--fokus-ring);
  outline-offset: var(--fokus-abstand);
}

/* ---------- Symbole (Sprite symbole.svg, 24-px-Raster, 1,5 px Strich) ---------- */
.tb-symbol {
  flex: none;
  width: var(--symbol-groesse);
  height: var(--symbol-groesse);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tb-symbol--gross { width: var(--abstand-7); height: var(--abstand-7); }

/* ======================================================================
 * 2 Kopf und Status
 * ====================================================================== */
.tb-kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  padding-block: var(--abstand-2);
  padding-top: calc(var(--abstand-2) + var(--sicher-oben));
  padding-left: var(--rand-links);
  padding-right: var(--rand-rechts);
  background: var(--farbe-hintergrund);
  border-bottom: var(--linie-fein) solid var(--farbe-rahmen);
}
.tb-kopf__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--ziel);
  /* Schutzraum: mindestens eine H-Höhe rundum */
  padding-inline-end: var(--logo-schutzraum);
}
a.tb-kopf__logo { text-decoration: none; min-height: var(--ziel); }
.tb-kopf__logo img { display: block; height: var(--abstand-6); width: auto; min-width: var(--emblem-min-breite); }
.tb-kopf__logo .tb-kopf__logo-breit { display: none; }
@media (min-width: 40rem) {
  .tb-kopf { column-gap: var(--abstand-4); }
  .tb-kopf__logo .tb-kopf__logo-breit { display: block; height: calc(var(--abstand-6) + var(--abstand-2)); }
  .tb-kopf__logo .tb-kopf__logo-schmal { display: none; }
}
/* Der Titel bleibt einzeilig und kürzt mit Auslassung; der volle Name steht im title-Attribut. */
.tb-kopf__titel {
  flex: 1 1 6rem;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--groesse-l);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeilenhoehe-eng);
  color: var(--farbe-ueberschrift);
}
.tb-kopf__rechts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex: 0 1 auto;
  min-width: 0;
  gap: var(--abstand-1);
  margin-inline-start: auto;
}
@media (min-width: 40rem) {
  .tb-kopf__rechts { gap: var(--abstand-2) var(--abstand-4); }
}
.tb-kopf__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ziel);
  font-weight: var(--gewicht-fett);
  color: var(--farbe-link);
  text-decoration: underline;
  text-underline-offset: var(--abstand-1);
}
@media (hover: hover) {
  .tb-kopf__link:hover { text-decoration-thickness: var(--fokus-abstand); }
}
/* Kopf einzeilig auf dem Handy: Beschriftungen mit dieser Klasse werden zu Symbolen,
   der Text bleibt für Screenreader und im title-Attribut erhalten. */
@media (max-width: 39.99rem) {
  .tb-kopf__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tb-kopf__link--symbol { min-width: var(--ziel); text-decoration: none; }
  .tb-kopf--modulwahl .tb-kopf__link--symbol { display: none; }
  .tb-kopf__rechts .tb-knopf { padding-inline: 0; }
}
@media (min-width: 40rem) {
  .tb-kopf__link--symbol > .tb-symbol { display: none; }
}
.tb-offline {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  font-size: var(--groesse-s);
  color: var(--farbe-text-sekundaer);
}
.tb-offline::before {
  content: "";
  width: var(--abstand-2);
  height: var(--abstand-2);
  border-radius: var(--radius-rund);
  background: var(--farbe-ok);
}
.tb-offline[data-zustand="offline"]::before { background: var(--farbe-hintergrund); border: calc(var(--linie-fein) * 2) solid var(--farbe-text-sekundaer); }

/* Statusleiste offline */
.tb-status {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: var(--abstand-6);
  padding-block: var(--abstand-1);
  padding-left: var(--rand-links);
  padding-right: var(--rand-rechts);
  font-size: var(--groesse-s);
  color: var(--thw-schwarz);
  background: var(--thw-silber-50);
}
.tb-status[hidden] { display: none; }

/* Statuskennzeichen: Zustand steht immer als Text, Farbe und Rahmenform sind Zugabe */
.tb-kennzeichen {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--abstand-2);
  font-size: var(--groesse-xs);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeilenhoehe-normal);
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  border: var(--linie-fein) solid var(--farbe-text-sekundaer);
  border-radius: var(--radius-s);
  white-space: nowrap;
}
.tb-kennzeichen--idee { border-style: dotted; color: var(--farbe-text-sekundaer); font-style: italic; }
.tb-kennzeichen--entwurf { border-style: dashed; color: var(--farbe-text-sekundaer); }
.tb-kennzeichen--erprobung { border-color: var(--thw-gelb); border-width: calc(var(--linie-fein) * 2); }
.tb-kennzeichen--freigegeben,
.tb-kennzeichen--gueltig { border-color: var(--farbe-ok); border-width: calc(var(--linie-fein) * 2); }
.tb-kennzeichen--freigegeben::before,
.tb-kennzeichen--gueltig::before { content: "\2713\00a0"; color: var(--farbe-ok); }
.tb-kennzeichen--veraltet { border-color: var(--farbe-fehler); color: var(--farbe-fehler); text-decoration: line-through; }
.tb-kennzeichen--abgelaufen { border-style: dashed; border-width: calc(var(--linie-fein) * 2); color: var(--farbe-text-sekundaer); }
.tb-kennzeichen--gesperrt { border-color: var(--farbe-fehler); border-width: calc(var(--linie-fein) * 2); color: var(--farbe-fehler); }
.tb-kennzeichen--gesperrt::before { content: "\2715\00a0"; }

/* ======================================================================
 * 3 Schaltflächen
 * Eine Primärschaltfläche je Ansicht. Varianten setzen nur die drei Variablen.
 * ====================================================================== */
.tb-knopf {
  --knopf-farbe: var(--farbe-primaer-text);
  --knopf-grund: var(--farbe-primaer);
  --knopf-rahmen: var(--farbe-primaer);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-height: var(--ziel);
  min-width: var(--ziel);
  padding: var(--abstand-2) var(--abstand-5);
  font-family: var(--schrift-ui);
  font-size: var(--groesse-m);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeilenhoehe-eng);
  color: var(--knopf-farbe);
  background: var(--knopf-grund);
  border: calc(var(--linie-fein) * 2) solid var(--knopf-rahmen);
  border-radius: var(--radius-s);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tb-knopf--sekundaer {
  --knopf-farbe: var(--farbe-primaer);
  --knopf-grund: var(--farbe-hintergrund);
  --knopf-rahmen: var(--farbe-primaer);
}
.tb-knopf--text {
  --knopf-farbe: var(--farbe-primaer);
  --knopf-grund: transparent;
  --knopf-rahmen: transparent;
  padding-inline: var(--abstand-3);
}
.tb-knopf--gefahr {
  --knopf-farbe: var(--farbe-fehler);
  --knopf-grund: var(--farbe-hintergrund);
  --knopf-rahmen: var(--farbe-fehler);
}
/* Symbol-Schaltfläche: nur Symbol, Pflicht aria-label, Fläche nach Zeigegerät */
.tb-knopf--symbol {
  --knopf-farbe: var(--farbe-primaer);
  --knopf-grund: transparent;
  --knopf-rahmen: transparent;
  width: var(--ziel);
  padding: 0;
}
.tb-knopf--voll { width: 100%; }
.tb-knopf .tb-symbol { width: var(--symbol-groesse); height: var(--symbol-groesse); }

/* Überfahren nur mit Maus */
@media (hover: hover) {
  .tb-knopf:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    --knopf-grund: var(--farbe-primaer-hover);
    --knopf-rahmen: var(--farbe-primaer-hover);
  }
  .tb-knopf--sekundaer:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]),
  .tb-knopf--text:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]),
  .tb-knopf--symbol:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    --knopf-farbe: var(--farbe-primaer-hover);
    --knopf-grund: var(--farbe-flaeche-hover);
  }
  .tb-knopf--sekundaer:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { --knopf-rahmen: var(--farbe-primaer-hover); }
  .tb-knopf--text:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { text-decoration: underline; text-underline-offset: var(--abstand-1); }
  .tb-knopf--gefahr:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    --knopf-farbe: var(--farbe-fehler);
    --knopf-grund: var(--farbe-flaeche-hover);
    --knopf-rahmen: var(--farbe-fehler);
  }
}
/* Gedrückt (auch bei Touch) */
.tb-knopf:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
  --knopf-grund: var(--farbe-primaer-aktiv);
  --knopf-rahmen: var(--farbe-primaer-aktiv);
}
.tb-knopf--sekundaer:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]),
.tb-knopf--text:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]),
.tb-knopf--symbol:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
  --knopf-farbe: var(--farbe-primaer-aktiv);
  --knopf-grund: var(--farbe-flaeche-aktiv);
}
.tb-knopf--sekundaer:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { --knopf-rahmen: var(--farbe-primaer-aktiv); }
.tb-knopf--text:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]),
.tb-knopf--symbol:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { --knopf-rahmen: transparent; }
.tb-knopf--gefahr:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
  --knopf-farbe: var(--farbe-fehler);
  --knopf-grund: var(--farbe-flaeche-aktiv);
  --knopf-rahmen: var(--farbe-fehler);
}
/* Deaktiviert: Stahl */
.tb-knopf:disabled,
.tb-knopf[aria-disabled="true"] {
  --knopf-farbe: var(--farbe-hintergrund);
  --knopf-grund: var(--farbe-deaktiviert);
  --knopf-rahmen: var(--farbe-deaktiviert);
  cursor: not-allowed;
}
.tb-knopf--sekundaer:disabled,
.tb-knopf--sekundaer[aria-disabled="true"],
.tb-knopf--gefahr:disabled,
.tb-knopf--gefahr[aria-disabled="true"] {
  --knopf-farbe: var(--farbe-text-sekundaer);
  --knopf-grund: var(--farbe-hintergrund);
  --knopf-rahmen: var(--farbe-deaktiviert);
}
.tb-knopf--text:disabled,
.tb-knopf--text[aria-disabled="true"] {
  --knopf-farbe: var(--farbe-text-sekundaer);
  --knopf-grund: transparent;
  --knopf-rahmen: transparent;
}
.tb-knopf--symbol:disabled,
.tb-knopf--symbol[aria-disabled="true"] {
  --knopf-farbe: var(--farbe-deaktiviert);
  --knopf-grund: transparent;
  --knopf-rahmen: transparent;
}
/* Ladezustand: beide Texte liegen übereinander, die Breite bleibt gleich */
.tb-knopf__stapel { display: inline-grid; align-items: center; justify-items: center; }
.tb-knopf__stapel > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: var(--abstand-2); }
.tb-knopf__laedt { visibility: hidden; }
.tb-knopf[aria-busy="true"] { cursor: progress; pointer-events: none; }
.tb-knopf[aria-busy="true"] .tb-knopf__text { visibility: hidden; }
.tb-knopf[aria-busy="true"] .tb-knopf__laedt { visibility: visible; }

/* Aktionsleiste: Handy untereinander in voller Breite, Hauptaktion zuletzt (unten);
   Tablet und PC rechtsbündig, Hauptaktion ganz rechts. Quelltext: Nebenaktionen zuerst. */
.tb-aktionen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--abstand-3);
}
.tb-aktionen > .tb-knopf { width: 100%; }
@media (min-width: 40rem) {
  .tb-aktionen { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
  .tb-aktionen > .tb-knopf { width: auto; }
}
.tb-aktionen--links { justify-content: flex-start; }

/* feste Aktionsleiste: bleibt unten stehen (Handy über der Navigation) */
.tb-aktionen--fest,
.tb-rechen__unten {
  position: sticky;
  bottom: var(--fest-unten, 0px);
  z-index: 20;
  padding-block: var(--abstand-3);
  padding-bottom: calc(var(--abstand-3) + var(--fest-sicher, var(--sicher-unten)));
  padding-left: calc(var(--rand-links) + max(0px, (100% - var(--inhalt-max-breite)) / 2));
  padding-right: calc(var(--rand-rechts) + max(0px, (100% - var(--inhalt-max-breite)) / 2));
  background: var(--farbe-hintergrund);
  border-top: var(--linie-fein) solid var(--farbe-rahmen);
}

/* ======================================================================
 * 4 Navigation
 * Handy Leiste unten (höchstens 5 Ziele, Symbol und Text), Tablet schmale Leiste
 * links, PC Seitenleiste mit Text. Aktives Ziel: aria-current="page".
 * ====================================================================== */
.tb-nav {
  background: var(--farbe-hintergrund);
  border-top: var(--linie-fein) solid var(--farbe-rahmen);
  padding-bottom: var(--sicher-unten);
  padding-left: var(--sicher-links);
  padding-right: var(--sicher-rechts);
}
.tb-nav__liste {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tb-nav__liste > li { flex: 1 1 0; min-width: 0; }
.tb-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-1);
  min-height: var(--nav-unten-hoehe);
  padding: var(--abstand-1);
  border-top: var(--nav-indikator) solid transparent;
  font-size: var(--groesse-s);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeilenhoehe-eng);
  color: var(--farbe-text-sekundaer);
  text-decoration: none;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.tb-nav__link:focus-visible { outline-offset: calc(var(--fokus-abstand) * -2); }
.tb-nav__text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-nav__link[aria-current="page"] { color: var(--farbe-primaer); border-top-color: var(--farbe-primaer); }
@media (hover: hover) {
  .tb-nav__link:hover { color: var(--farbe-primaer-hover); background: var(--farbe-flaeche-hover); }
}
.tb-nav__link:active { color: var(--farbe-primaer-aktiv); background: var(--farbe-flaeche-aktiv); }

/* Tablet: schmale Leiste links (Rail) */
@media (min-width: 40rem) {
  .tb-nav {
    border-top: 0;
    border-right: var(--linie-fein) solid var(--farbe-rahmen);
    padding-bottom: 0;
    padding-right: 0;
  }
  .tb-nav__liste {
    position: sticky;
    top: 0;
    flex-direction: column;
    padding-block: var(--abstand-2);
  }
  .tb-nav__liste > li { flex: none; }
  .tb-nav__link {
    min-height: calc(var(--ziel) + var(--abstand-5));
    padding-block: var(--abstand-2);
    border-top: 0;
    border-inline-start: var(--nav-indikator) solid transparent;
  }
  .tb-nav__link[aria-current="page"] { border-inline-start-color: var(--farbe-primaer); border-top-color: transparent; }
}
/* PC: Seitenleiste mit Text */
@media (min-width: 64rem) {
  .tb-nav__link {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--abstand-3);
    min-height: calc(var(--ziel) + var(--abstand-2));
    padding-inline: var(--abstand-4);
    font-size: var(--groesse-m);
    text-align: left;
  }
}

/* Fachgruppen-Navigation im Launcher: Liste am Handy, Seitenleiste ab Tablet */
.tb-launcher { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-5) var(--spaltenabstand); align-items: start; }
@media (min-width: 40rem) {
  .tb-launcher { grid-template-columns: var(--gruppen-breite) minmax(0, 1fr); }
  .tb-launcher__gruppen { position: sticky; top: var(--abstand-4); }
}
.tb-gruppen__titel { margin: 0 0 var(--abstand-2); font-size: var(--groesse-m); font-weight: var(--gewicht-fett); color: var(--farbe-text-sekundaer); }
.tb-gruppen__liste { margin: 0; padding: 0; list-style: none; border-top: var(--linie-fein) solid var(--farbe-rahmen); }
.tb-gruppen__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  min-height: calc(var(--ziel) + var(--abstand-2));
  padding: var(--abstand-2) var(--abstand-3);
  border-bottom: var(--linie-fein) solid var(--farbe-rahmen);
  font-weight: var(--gewicht-fett);
  color: var(--farbe-text);
  text-decoration: none;
}
.tb-gruppen__link[aria-current="page"] { color: var(--farbe-primaer); border-inline-start: var(--nav-indikator) solid var(--farbe-primaer); }
.tb-gruppen__anzahl { font-size: var(--groesse-s); font-weight: var(--gewicht-normal); color: var(--farbe-text-sekundaer); }
@media (hover: hover) {
  .tb-gruppen__link:hover { background: var(--farbe-flaeche-hover); color: var(--farbe-primaer-hover); }
}
@media (min-width: 40rem) {
  .tb-gruppen__liste { border-top: 0; }
  .tb-gruppen__link { border-bottom: 0; border-inline-start: var(--nav-indikator) solid transparent; }
}

/* Reiter (WAI-ARIA tablist). Ohne JS bleiben alle Felder lesbar, die Reiterliste erscheint erst mit data-bereit. */
/* Reiterleiste ohne Bildlaufleiste durch den überlappenden Rand der Reiter */
.tb-reiter__liste { scrollbar-width: none; }
.tb-reiter__liste::-webkit-scrollbar { display: none; }
.tb-reiter:not([data-bereit]) .tb-reiter__liste { display: none; }
.tb-reiter[data-bereit] .tb-reiter__titel { display: none; }
.tb-reiter__liste {
  display: flex;
  overflow-x: auto;
  border-bottom: calc(var(--linie-fein) * 2) solid var(--farbe-rahmen);
}
.tb-reiter__reiter {
  flex: 0 0 auto;
  min-height: var(--ziel);
  margin-bottom: calc(var(--linie-fein) * -2);
  padding: var(--abstand-2) var(--abstand-4);
  font-family: var(--schrift-ui);
  font-size: var(--groesse-m);
  font-weight: var(--gewicht-fett);
  color: var(--farbe-text-sekundaer);
  background: transparent;
  border: 0;
  border-bottom: var(--nav-indikator) solid transparent;
  border-radius: 0;
  cursor: pointer;
}
.tb-reiter__reiter:focus-visible { outline-offset: calc(var(--fokus-abstand) * -2); }
.tb-reiter__reiter[aria-selected="true"] { color: var(--farbe-primaer); border-bottom-color: var(--farbe-primaer); }
@media (hover: hover) {
  .tb-reiter__reiter:hover { color: var(--farbe-primaer-hover); background: var(--farbe-flaeche-hover); }
}
.tb-reiter__feld { padding-top: var(--abstand-4); }
.tb-reiter__feld[hidden] { display: none; }
.tb-reiter__titel { margin-top: 0; }

/* ======================================================================
 * 1b Kacheln (Launcher)
 * ====================================================================== */
.tb-kacheln {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-4);
}
@media (min-width: 40rem) { .tb-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spaltenabstand); } }
@media (min-width: 64rem) { .tb-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tb-kachel {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  min-height: var(--ziel);
  padding: var(--abstand-4);
  background: var(--farbe-hintergrund);
  border: var(--linie-fein) solid var(--farbe-rahmen);
  border-radius: var(--radius-0);
  box-shadow: var(--schatten);
  color: var(--farbe-text);
  text-decoration: none;
}
.tb-kachel:focus-visible { border-color: var(--farbe-primaer); }
@media (hover: hover) {
  .tb-kachel:hover { border-color: var(--farbe-primaer); }
}
.tb-kachel__icon { width: var(--abstand-5); height: var(--abstand-5); color: var(--farbe-primaer); }
.tb-kachel__name { margin: 0; font-size: var(--groesse-l); font-weight: var(--gewicht-fett); line-height: var(--zeilenhoehe-eng); color: var(--farbe-text); }
.tb-kachel__kurz { margin: 0; color: var(--farbe-text-sekundaer); }
.tb-kachel__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-1) var(--abstand-3);
  margin-top: auto;
  padding-top: var(--abstand-2);
  font-size: var(--groesse-s);
  color: var(--farbe-text-sekundaer);
}
/* Sammlungs-Kachel: Balken links, zeigt die Anzahl der Untermodule */
.tb-kachel--sammlung { border-inline-start: var(--linie-balken) solid var(--thw-silber); }
.tb-kachel--sammlung:focus-visible { border-inline-start-color: var(--farbe-primaer); }
@media (hover: hover) {
  .tb-kachel--sammlung:hover { border-inline-start-color: var(--farbe-primaer); }
}
.tb-kachel__anzahl { display: inline-flex; align-items: center; gap: var(--abstand-1); font-weight: var(--gewicht-fett); color: var(--farbe-text); }
/* Kachel gesperrt: Schloss und Hinweis, führt zur Freischaltung */
.tb-kachel--gesperrt { border-style: dashed; }
.tb-kachel--gesperrt .tb-kachel__icon { color: var(--farbe-text-sekundaer); }
.tb-kachel--gesperrt .tb-kachel__name { color: var(--farbe-text-sekundaer); }
.tb-kachel__sperre { margin: 0; display: flex; align-items: center; gap: var(--abstand-2); margin-top: auto; padding-top: var(--abstand-2); font-weight: var(--gewicht-fett); color: var(--farbe-text); }
/* Kachel mit eigenem Bedienbereich (ab 0.5.0): <article class="tb-kachel tb-kachel--mit-ziel">, der Link
   tb-kachel__ziel sitzt im Namen und deckt die ganze Kachel ab; tb-kachel__offline liegt darüber und bleibt
   eigenständig bedienbar (keine Knöpfe oder Schalter in Links). */
.tb-kachel--mit-ziel { position: relative; }
.tb-kachel__ziel { color: inherit; text-decoration: none; }
.tb-kachel__ziel::after { content: ""; position: absolute; inset: 0; }
.tb-kachel__ziel:focus-visible { outline: none; }
.tb-kachel--mit-ziel:has(.tb-kachel__ziel:focus-visible) { border-color: var(--farbe-primaer); outline: var(--fokus-ring); outline-offset: var(--fokus-abstand); }
/* Offline-Bereich der Kachel: Schalter (tb-schalter mit tb-schalter__haupt/__neben), Zustand, Ladebalken, Fehler */
.tb-kachel__offline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  margin-top: var(--abstand-1);
  padding-top: var(--abstand-3);
  border-top: var(--linie-fein) solid var(--farbe-rahmen);
}
.tb-kachel__offline .tb-meldung { margin: 0; }
/* Zustand: Punkt leer (aus), gefüllt (an), Ring blau (teilweise), ohne Punkt (nur mit Netz); immer mit Text */
.tb-kachel__offline-zustand { display: flex; align-items: center; gap: var(--abstand-2); min-width: 0; margin: 0; font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); }
.tb-kachel__offline-zustand::before {
  content: "";
  flex: none;
  width: var(--abstand-3);
  height: var(--abstand-3);
  border: calc(var(--linie-fein) * 2) solid var(--farbe-text-sekundaer);
  border-radius: var(--radius-rund);
}
.tb-kachel__offline-zustand[data-zustand="an"] { font-weight: var(--gewicht-fett); color: var(--farbe-text); }
.tb-kachel__offline-zustand[data-zustand="an"]::before { background: var(--farbe-primaer); border-color: var(--farbe-primaer); }
.tb-kachel__offline-zustand[data-zustand="teil"] { color: var(--farbe-text); }
.tb-kachel__offline-zustand[data-zustand="teil"]::before { border-color: var(--farbe-primaer); }
.tb-kachel__offline-zustand[data-zustand="netz"]::before { display: none; }
.tb-kachel__offline-laden { min-width: 0; }
/* Ampelpunkt in der Schalterzeile einer Modulkachel (ab 0.5.0): grün vorgehalten, rot nicht, grau beim Laden oder nur mit Netz */
.tb-schalter__ampel { display: inline-block; vertical-align: middle; width: var(--abstand-3); height: var(--abstand-3); margin-right: var(--abstand-2); border-radius: var(--radius-rund); background: var(--farbe-text-sekundaer); }
.tb-schalter__ampel[data-zustand="an"] { background: var(--farbe-ok); }
.tb-schalter__ampel[data-zustand="aus"] { background: var(--farbe-fehler); }
.tb-kachel__offline-platz[hidden] { display: none; }

/* ======================================================================
 * 5 Eingabe
 * Gemeinsamer Feldrahmen für Text, Zahl, Auswahl, Suche
 * ====================================================================== */
.tb-feld { display: flex; flex-direction: column; gap: var(--abstand-1); margin: 0 0 var(--abstand-4); min-width: 0; }
.tb-feld__label { font-weight: var(--gewicht-fett); color: var(--farbe-text); }
.tb-feld__hinweis { font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); }

.tb-feld__zeile,
.tb-auswahl,
.tb-zahlenfeld,
.tb-suche {
  display: flex;
  align-items: stretch;
  min-height: var(--ziel);
  background: var(--farbe-hintergrund);
  border: var(--linie-fein) solid var(--farbe-text-sekundaer);
  border-radius: var(--radius-s);
}
.tb-feld__zeile:focus-within,
.tb-auswahl:focus-within,
.tb-zahlenfeld:focus-within,
.tb-suche:focus-within { border-color: var(--farbe-fokus); outline: var(--fokus-ring); outline-offset: 0; }
.tb-feld__eingabe {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--abstand-2) var(--abstand-3);
  font-family: var(--schrift-ui);
  font-size: var(--groesse-m);
  color: var(--farbe-text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-s);
}
.tb-feld__eingabe:focus-visible { outline: none; }
.tb-feld__einheit {
  display: flex;
  align-items: center;
  padding-inline: var(--abstand-3);
  color: var(--farbe-text-sekundaer);
  white-space: nowrap;
}
.tb-feld__fehler {
  display: none;
  align-items: flex-start;
  gap: var(--abstand-2);
  font-size: var(--groesse-s);
  font-weight: var(--gewicht-fett);
  color: var(--farbe-fehler);
}
.tb-feld__fehler::before { content: "\26A0\FE0E"; /* Symbol, Farbe nie alleiniger Träger */ }
.tb-feld--fehler .tb-feld__zeile,
.tb-feld--fehler .tb-auswahl,
.tb-feld--fehler .tb-zahlenfeld,
.tb-feld--fehler .tb-suche { border-color: var(--farbe-fehler); border-width: calc(var(--linie-fein) * 2); }
.tb-feld--fehler .tb-feld__fehler { display: flex; }

/* Gruppe (fieldset mit legend) */
.tb-gruppe { min-width: 0; margin: 0 0 var(--abstand-4); padding: 0; border: 0; }
.tb-gruppe > legend { padding: 0; margin-bottom: var(--abstand-1); font-weight: var(--gewicht-fett); }

/* Auswahlliste (natives select) */
.tb-auswahl { position: relative; }
.tb-auswahl__feld {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--abstand-2) calc(var(--abstand-3) * 2 + var(--symbol-groesse)) var(--abstand-2) var(--abstand-3);
  font-family: var(--schrift-ui);
  font-size: var(--groesse-m);
  color: var(--farbe-text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-s);
  appearance: none;
  cursor: pointer;
}
.tb-auswahl__feld:focus-visible { outline: none; }
.tb-auswahl__pfeil {
  position: absolute;
  inset-inline-end: var(--abstand-3);
  inset-block-start: 50%;
  translate: 0 -50%;
  color: var(--farbe-primaer);
  pointer-events: none;
}

/* Zahlenfeld mit Plus und Minus */
.tb-zahlenfeld:not([data-bereit]) .tb-zahlenfeld__knopf { display: none; }
.tb-zahlenfeld__knopf {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ziel);
  padding: 0;
  color: var(--farbe-primaer);
  background: var(--farbe-hintergrund);
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tb-zahlenfeld__knopf--minus { border-inline-end: var(--linie-fein) solid var(--farbe-rahmen); border-radius: var(--radius-s) 0 0 var(--radius-s); }
.tb-zahlenfeld__knopf--plus { border-inline-start: var(--linie-fein) solid var(--farbe-rahmen); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.tb-zahlenfeld__knopf:focus-visible { outline-offset: calc(var(--fokus-abstand) * -2); }
@media (hover: hover) {
  .tb-zahlenfeld__knopf:hover:not(:disabled) { color: var(--farbe-primaer-hover); background: var(--farbe-flaeche-hover); }
}
.tb-zahlenfeld__knopf:active:not(:disabled) { color: var(--farbe-primaer-aktiv); background: var(--farbe-flaeche-aktiv); }
.tb-zahlenfeld__knopf:disabled { color: var(--farbe-deaktiviert); cursor: not-allowed; }
.tb-zahlenfeld__mitte { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--abstand-1); padding-inline: var(--abstand-2); }
.tb-zahlenfeld__eingabe {
  flex: 1 1 auto; /* füllt die Mitte, sonst ist nur ein schmaler Streifen anklickbar (Befund Brückenbau 04.11.2026) */
  width: 100%;
  min-width: 6ch;
  padding: var(--abstand-2) 0;
  font-family: var(--schrift-ui);
  font-size: var(--groesse-m);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--farbe-text);
  background: transparent;
  border: 0;
}
.tb-zahlenfeld__eingabe:focus-visible { outline: none; }
.tb-zahlenfeld__einheit { color: var(--farbe-text-sekundaer); white-space: nowrap; cursor: text; }

/* Suchfeld */
.tb-suche { align-items: center; padding-inline-start: var(--abstand-3); gap: var(--abstand-2); }
.tb-suche__symbol { color: var(--farbe-text-sekundaer); }
.tb-suche__eingabe {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--abstand-2) 0;
  font-family: var(--schrift-ui);
  font-size: var(--groesse-m);
  color: var(--farbe-text);
  background: transparent;
  border: 0;
  appearance: none;
}
.tb-suche__eingabe:focus-visible { outline: none; }
.tb-suche__eingabe::-webkit-search-cancel-button { appearance: none; display: none; }
.tb-suche:has(.tb-suche__eingabe:placeholder-shown) .tb-suche__leeren { display: none; }

/* Kontrollkästchen und Optionsfelder (Typ der Eingabe bestimmt die Form) */
.tb-wahl {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  min-height: var(--ziel);
  padding-block: var(--abstand-1);
  cursor: pointer;
}
.tb-wahl__eingabe {
  flex: none;
  display: grid;
  place-content: center;
  width: var(--symbol-groesse);
  height: var(--symbol-groesse);
  margin: 0;
  background: var(--farbe-hintergrund);
  border: calc(var(--linie-fein) * 2) solid var(--farbe-text-sekundaer);
  appearance: none;
  cursor: pointer;
}
.tb-wahl__eingabe[type="checkbox"] { border-radius: var(--radius-s); }
.tb-wahl__eingabe[type="radio"] { border-radius: var(--radius-rund); }
.tb-wahl__eingabe::before { content: ""; display: block; visibility: hidden; }
.tb-wahl__eingabe[type="checkbox"]::before {
  width: var(--abstand-4);
  height: var(--abstand-4);
  background: var(--farbe-primaer-text);
  clip-path: polygon(14% 52%, 0 66%, 36% 100%, 100% 22%, 86% 8%, 36% 72%);
}
.tb-wahl__eingabe[type="radio"]::before {
  width: var(--abstand-3);
  height: var(--abstand-3);
  background: var(--farbe-primaer);
  border-radius: var(--radius-rund);
}
.tb-wahl__eingabe:checked::before { visibility: visible; }
.tb-wahl__eingabe:checked { border-color: var(--farbe-primaer); }
.tb-wahl__eingabe[type="checkbox"]:checked { background: var(--farbe-primaer); }
.tb-wahl__eingabe:disabled { border-color: var(--farbe-deaktiviert); cursor: not-allowed; }
.tb-wahl__eingabe:disabled ~ .tb-wahl__text { color: var(--farbe-text-sekundaer); }

/* Schalter (Kontrollkästchen mit role="switch"); An/Aus zeigt zusätzlich Lage und Haken */
.tb-schalter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-4);
  min-height: var(--ziel);
  padding-block: var(--abstand-1);
  cursor: pointer;
}
.tb-schalter__eingabe {
  position: relative;
  flex: none;
  width: 3rem;
  height: 1.75rem;
  margin: 0;
  background: var(--farbe-hintergrund);
  border: calc(var(--linie-fein) * 2) solid var(--farbe-text-sekundaer);
  border-radius: var(--radius-rund);
  appearance: none;
  cursor: pointer;
}
.tb-schalter__eingabe::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  translate: 0 -50%;
  background: var(--farbe-text-sekundaer);
  border-radius: var(--radius-rund);
}
.tb-schalter__eingabe::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(100% - 1.3125rem);
  width: 0.7rem;
  height: 0.7rem;
  translate: 0.2rem -50%;
  background: var(--farbe-primaer);
  clip-path: polygon(14% 52%, 0 66%, 36% 100%, 100% 22%, 86% 8%, 36% 72%);
  visibility: hidden;
}
.tb-schalter__eingabe:checked { background: var(--farbe-primaer); border-color: var(--farbe-primaer); }
.tb-schalter__eingabe:checked::before { inset-inline-start: calc(100% - 1.3125rem); background: var(--farbe-primaer-text); }
.tb-schalter__eingabe:checked::after { visibility: visible; }
.tb-schalter__eingabe:disabled { border-color: var(--farbe-deaktiviert); cursor: not-allowed; }
.tb-schalter__eingabe:disabled::before { background: var(--farbe-deaktiviert); }
/* Schalter mit zweizeiliger Beschriftung (ab 0.5.0) */
.tb-schalter__beschriftung { display: flex; flex-direction: column; min-width: 0; }
.tb-schalter__haupt { font-weight: var(--gewicht-fett); color: var(--farbe-text); }
.tb-schalter__neben { font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); }

/* Segmentschalter (Optionsfelder als verbundene Schaltflächen) */
.tb-segment { min-width: 0; margin: 0 0 var(--abstand-4); padding: 0; border: 0; }
.tb-segment > legend { padding: 0; margin-bottom: var(--abstand-1); font-weight: var(--gewicht-fett); }
.tb-segment__gruppe { display: flex; border: calc(var(--linie-fein) * 2) solid var(--farbe-primaer); border-radius: var(--radius-s); overflow: hidden; }
.tb-segment__option { position: relative; flex: 1 1 0; display: flex; min-width: 0; }
.tb-segment__option + .tb-segment__option { border-inline-start: calc(var(--linie-fein) * 2) solid var(--farbe-primaer); }
.tb-segment__eingabe { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tb-segment__text {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-height: calc(var(--ziel) - var(--linie-fein) * 4);
  padding: var(--abstand-2) var(--abstand-3);
  font-weight: var(--gewicht-fett);
  text-align: center;
  color: var(--farbe-primaer);
  background: var(--farbe-hintergrund);
}
.tb-segment__eingabe:checked + .tb-segment__text { color: var(--farbe-primaer-text); background: var(--farbe-primaer); }
.tb-segment__eingabe:checked + .tb-segment__text::before {
  content: "";
  flex: none;
  width: var(--abstand-4);
  height: var(--abstand-4);
  background: currentColor;
  clip-path: polygon(14% 52%, 0 66%, 36% 100%, 100% 22%, 86% 8%, 36% 72%);
}
.tb-segment__eingabe:focus-visible + .tb-segment__text { outline: var(--fokus-ring); outline-offset: calc(var(--fokus-abstand) * -2); }
.tb-segment__eingabe:checked:focus-visible + .tb-segment__text { outline-color: var(--farbe-primaer-text); }
@media (hover: hover) {
  .tb-segment__eingabe:not(:checked):hover + .tb-segment__text { background: var(--farbe-flaeche-hover); color: var(--farbe-primaer-hover); }
}

/* ======================================================================
 * 6 Rückmeldung
 * ====================================================================== */
/* Meldung (Toast): Container ist die Live-Region, Einträge kommen per basis.js */
.tb-meldungen {
  position: fixed;
  z-index: 100;
  inset-block-start: calc(var(--abstand-3) + var(--sicher-oben));
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  width: min(var(--dialog-max-breite), 100% - var(--rand-links) - var(--rand-rechts));
  margin-inline: auto;
  pointer-events: none;
}
.tb-meldungen > * { pointer-events: auto; }
.tb-meldung {
  --meldung-farbe: var(--farbe-primaer);
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  padding: var(--abstand-3);
  background: var(--farbe-hintergrund);
  border: calc(var(--linie-fein) * 2) solid var(--meldung-farbe);
  border-inline-start-width: var(--linie-balken);
  border-radius: var(--radius-0);
  color: var(--farbe-text);
}
.tb-meldung > .tb-symbol { color: var(--meldung-farbe); margin-top: calc(var(--abstand-1) / 2); }
.tb-meldung__text { flex: 1 1 auto; min-width: 0; margin: 0; padding-block: var(--abstand-1); }
.tb-meldung--ok { --meldung-farbe: var(--farbe-ok); }
.tb-meldung--fehler { --meldung-farbe: var(--farbe-fehler); }
.tb-meldung--warnung { --meldung-farbe: var(--farbe-warnung); }
.tb-meldung--warnung > .tb-symbol { color: var(--farbe-text); }
.tb-meldung--im-text { margin: 0 0 var(--abstand-4); }

/* Ladeanzeige und Fortschritt */
.tb-laden {
  display: inline-block;
  flex: none;
  width: var(--symbol-groesse);
  height: var(--symbol-groesse);
  color: var(--farbe-primaer);
  border: 0.1875rem solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--radius-rund);
}
.tb-knopf .tb-laden { color: inherit; }
.tb-laden-zeile { display: flex; align-items: center; gap: var(--abstand-3); color: var(--farbe-text); }
.tb-fortschritt-wrap { display: flex; flex-direction: column; gap: var(--abstand-1); }
.tb-fortschritt__kopf { display: flex; justify-content: space-between; gap: var(--abstand-3); font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); }
.tb-fortschritt {
  display: block;
  width: 100%;
  height: var(--abstand-2);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--thw-silber);
  appearance: none;
  overflow: hidden;
}
.tb-fortschritt::-webkit-progress-bar { background: var(--thw-silber); }
.tb-fortschritt::-webkit-progress-value { background: var(--farbe-primaer); }
.tb-fortschritt::-moz-progress-bar { background: var(--farbe-primaer); }
/* Unbestimmt (ohne value): blauer Abschnitt läuft über die Silberfläche, z. B. beim Laden ohne Fortschrittsmeldung */
.tb-fortschritt:indeterminate {
  background: linear-gradient(90deg, var(--thw-silber) 0 35%, var(--farbe-primaer) 35% 65%, var(--thw-silber) 65% 100%) 0 0 / 300% 100%;
  animation: tb-unbestimmt 1.4s linear infinite;
}
.tb-fortschritt:indeterminate::-webkit-progress-bar { background: transparent; }
@keyframes tb-unbestimmt { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Leerzustand */
.tb-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-3);
  max-width: 28rem;
  margin: 0 auto;
  padding: var(--abstand-6) var(--abstand-4);
  text-align: center;
}
.tb-leer .tb-symbol { width: var(--abstand-7); height: var(--abstand-7); color: var(--farbe-text-sekundaer); }
.tb-leer__titel { margin: 0; font-size: var(--groesse-l); font-weight: var(--gewicht-fett); color: var(--farbe-text); }
.tb-leer__text { margin: 0; color: var(--farbe-text-sekundaer); }

/* Kasten (nur Rahmen, keine Füllung) */
.tb-kasten {
  margin: 0 0 var(--abstand-4);
  padding: var(--abstand-5);
  font-size: var(--groesse-m);
  background: transparent;
  border: var(--linie-kasten) solid var(--thw-silber);
  border-radius: var(--radius-0);
}
.tb-kasten--silber { border-color: var(--thw-silber); }
.tb-kasten--gelb { border-color: var(--thw-gelb); }
.tb-kasten > :first-child { margin-top: 0; }
.tb-kasten > :last-child { margin-bottom: 0; }

/* Balken (senkrecht links neben Überschrift oder Kennzahl) */
.tb-balken {
  padding-inline-start: var(--abstand-4);
  border-inline-start: var(--linie-balken) solid var(--thw-silber);
  border-radius: var(--radius-0);
}
.tb-balken--gelb { border-inline-start-color: var(--thw-gelb); }
.tb-balken > :first-child { margin-top: 0; }
.tb-balken > :last-child { margin-bottom: 0; }

/* Ergebnisblock: Zustand als Text und Symbol, Farbe nur Zugabe */
.tb-ergebnis,
.tb-ergebniszeile {
  --zustand-rahmen: var(--thw-silber);
  --zustand-farbe: var(--farbe-text);
}
.tb-ergebnis--zulaessig,   .tb-ergebniszeile--zulaessig   { --zustand-rahmen: var(--farbe-ok);      --zustand-farbe: var(--farbe-ok); }
.tb-ergebnis--grenzwertig, .tb-ergebniszeile--grenzwertig { --zustand-rahmen: var(--thw-gelb);      --zustand-farbe: var(--farbe-text); }
.tb-ergebnis--unzulaessig, .tb-ergebniszeile--unzulaessig { --zustand-rahmen: var(--farbe-fehler);  --zustand-farbe: var(--farbe-fehler); }

.tb-ergebnis {
  margin: 0 0 var(--abstand-4);
  padding: var(--abstand-5);
  background: transparent;
  border: var(--linie-kasten) solid var(--zustand-rahmen);
  border-radius: var(--radius-0);
}
.tb-ergebnis--veraltet { border-style: dashed; border-color: var(--thw-silber); }
.tb-ergebnis--veraltet .tb-ergebnis__zustand { color: var(--farbe-text); }
.tb-ergebnis__zustand {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  margin: 0 0 var(--abstand-3);
  font-size: var(--groesse-l);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeilenhoehe-eng);
  color: var(--zustand-farbe);
}
.tb-ergebnis__label { margin: 0; font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); }
.tb-ergebnis__wert { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--abstand-2); margin: 0 0 var(--abstand-3); }
.tb-ergebnis__zahl { font-size: var(--groesse-3xl); font-weight: var(--gewicht-fett); line-height: var(--zeilenhoehe-eng); font-variant-numeric: tabular-nums; color: var(--farbe-text); }
.tb-ergebnis--veraltet .tb-ergebnis__zahl { color: var(--farbe-text-sekundaer); }
.tb-ergebnis__einheit { font-size: var(--groesse-l); color: var(--farbe-text-sekundaer); }
.tb-ergebnis__details { display: grid; grid-template-columns: auto 1fr; gap: var(--abstand-1) var(--abstand-4); margin: 0 0 var(--abstand-3); }
.tb-ergebnis__details dt { color: var(--farbe-text-sekundaer); }
.tb-ergebnis__details dd { margin: 0; text-align: right; font-weight: var(--gewicht-fett); font-variant-numeric: tabular-nums; }
.tb-ergebnis__meta { margin: 0; padding-top: var(--abstand-3); font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); border-top: var(--linie-fein) solid var(--farbe-rahmen); }

/* Ergebniszeile: feste Zeile am Handy (Zustand und Kernwert) */
.tb-ergebniszeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  min-height: var(--ergebniszeile-hoehe);
  padding: var(--abstand-2) var(--abstand-3);
  border: calc(var(--linie-fein) * 2) solid var(--zustand-rahmen);
  border-radius: var(--radius-0);
  background: var(--farbe-hintergrund);
}
.tb-ergebniszeile__zustand { display: flex; align-items: center; gap: var(--abstand-2); font-weight: var(--gewicht-fett); color: var(--farbe-text); }
.tb-ergebniszeile__zustand > .tb-symbol { color: var(--zustand-farbe); }
.tb-ergebniszeile__wert { font-size: var(--groesse-l); font-variant-numeric: tabular-nums; color: var(--farbe-text-sekundaer); text-align: right; }
.tb-ergebniszeile__wert strong { font-size: var(--groesse-xl); color: var(--farbe-text); }

/* ======================================================================
 * 7 Dialog und Bottom-Sheet (natives <dialog>)
 * Handy: von unten einfahrend, volle Breite. Tablet und PC: mittig, höchstens 560 px.
 * ====================================================================== */
.tb-dialog {
  width: calc(100% - var(--rand-links) - var(--rand-rechts));
  max-width: var(--dialog-max-breite);
  max-height: var(--dialog-max-hoehe);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  border: calc(var(--linie-fein) * 2) solid var(--farbe-primaer);
  border-radius: var(--radius-0);
}
.tb-dialog::backdrop { background: var(--farbe-abdeckung); opacity: 0.6; }
html:has(.tb-dialog[open]) { overflow: hidden; }
.tb-dialog__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--abstand-3); padding: var(--abstand-4) var(--abstand-4) 0; }
.tb-dialog__titel { margin: 0; padding-top: var(--abstand-2); font-size: var(--groesse-h3); }
.tb-dialog__inhalt { padding: var(--abstand-3) var(--abstand-4); }
.tb-dialog__inhalt > :last-child { margin-bottom: 0; }
.tb-dialog__fuss { padding: var(--abstand-3) var(--abstand-4) var(--abstand-4); }
@media (max-width: 39.99rem) {
  .tb-dialog {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-width: calc(var(--linie-fein) * 2) 0 0;
    padding-bottom: var(--sicher-unten);
  }
}

/* ======================================================================
 * 8 Daten und Listen
 * ====================================================================== */
.tb-tabelle-wrap { max-width: 100%; overflow-x: auto; }
.tb-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--groesse-m);
  line-height: var(--zeilenhoehe-tabelle);
}
.tb-tabelle caption { padding-bottom: var(--abstand-2); text-align: left; font-weight: var(--gewicht-fett); color: var(--farbe-text-sekundaer); }
.tb-tabelle th,
.tb-tabelle td { padding: var(--abstand-2) var(--abstand-3); text-align: left; vertical-align: top; }
.tb-tabelle thead th {
  font-weight: var(--gewicht-fett);
  color: var(--farbe-primaer-text);
  background: var(--farbe-primaer);
}
.tb-tabelle tbody tr:nth-child(even) { background: var(--thw-silber-50); }
.tb-tabelle tbody th { font-weight: var(--gewicht-fett); }
.tb-tabelle .tb-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tb-tabelle thead th.tb-zahl { text-align: right; }

/* Breite Tabelle wird am Handy zur Kartenliste; jede Zelle trägt data-label */
@media (max-width: 39.99rem) {
  .tb-tabelle--karten,
  .tb-tabelle--karten tbody,
  .tb-tabelle--karten tr,
  .tb-tabelle--karten th,
  .tb-tabelle--karten td { display: block; }
  .tb-tabelle--karten caption { display: block; }
  .tb-tabelle--karten thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .tb-tabelle--karten tbody tr,
  .tb-tabelle--karten tbody tr:nth-child(even) {
    margin-bottom: var(--abstand-3);
    padding: var(--abstand-2) var(--abstand-3);
    background: var(--farbe-hintergrund);
    border: var(--linie-fein) solid var(--farbe-rahmen);
  }
  .tb-tabelle--karten th,
  .tb-tabelle--karten td { padding: var(--abstand-1) 0; }
  .tb-tabelle--karten tbody th { font-size: var(--groesse-l); color: var(--farbe-text); }
  .tb-tabelle--karten td { display: flex; justify-content: space-between; gap: var(--abstand-4); }
  .tb-tabelle--karten td::before { content: attr(data-label); font-weight: var(--gewicht-fett); color: var(--farbe-text-sekundaer); }
}

/* Liste */
.tb-liste { margin: 0; padding: 0; list-style: none; border-top: var(--linie-fein) solid var(--farbe-rahmen); }
.tb-liste__eintrag {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  min-height: calc(var(--ziel) + var(--abstand-3));
  padding: var(--abstand-2) var(--abstand-1);
  border-bottom: var(--linie-fein) solid var(--farbe-rahmen);
  color: var(--farbe-text);
  text-decoration: none;
}
.tb-liste__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tb-liste__haupt { font-weight: var(--gewicht-fett); }
.tb-liste__neben { font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); }
.tb-liste__meta { flex: none; font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); }
a.tb-liste__eintrag > .tb-symbol:last-child { color: var(--farbe-primaer); }
@media (hover: hover) {
  a.tb-liste__eintrag:hover { background: var(--farbe-flaeche-hover); }
}
a.tb-liste__eintrag:active { background: var(--farbe-flaeche-aktiv); }

/* Karte (nicht klickbar; klickbare Einheiten im Launcher sind Kacheln) */
.tb-karte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
  margin: 0 0 var(--abstand-4);
  padding: var(--abstand-4);
  background: var(--farbe-hintergrund);
  border: var(--linie-fein) solid var(--farbe-rahmen);
  border-radius: var(--radius-0);
}
.tb-karte__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--abstand-3); }
.tb-karte__titel { margin: 0; font-size: var(--groesse-l); }
.tb-karte > p { margin: 0; }
.tb-karte__fuss { margin-top: auto; padding-top: var(--abstand-3); border-top: var(--linie-fein) solid var(--farbe-rahmen); font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); }

/* Aufklapper (natives details) */
.tb-aufklapper { margin: 0 0 var(--abstand-3); border-bottom: var(--linie-fein) solid var(--farbe-rahmen); }
.tb-aufklapper > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  min-height: calc(var(--ziel) + var(--abstand-2));
  padding: var(--abstand-2) var(--abstand-1);
  font-weight: var(--gewicht-fett);
  color: var(--farbe-primaer);
  list-style: none;
  cursor: pointer;
}
.tb-aufklapper > summary::-webkit-details-marker { display: none; }
.tb-aufklapper > summary::after {
  content: "";
  flex: none;
  width: var(--abstand-2);
  height: var(--abstand-2);
  margin-inline: var(--abstand-1);
  border-right: calc(var(--linie-fein) * 2) solid currentColor;
  border-bottom: calc(var(--linie-fein) * 2) solid currentColor;
  rotate: 45deg;
  translate: 0 -25%;
}
.tb-aufklapper[open] > summary::after { rotate: 225deg; translate: 0 25%; }
@media (hover: hover) {
  .tb-aufklapper > summary:hover { background: var(--farbe-flaeche-hover); }
}
.tb-aufklapper__inhalt { padding: var(--abstand-2) var(--abstand-1) var(--abstand-4); }
.tb-aufklapper__inhalt > :last-child { margin-bottom: 0; }

/* ======================================================================
 * 9 Struktur: Seitengerüst
 * Kopf, Navigation, Inhalt. Handy: Navigation unten, Tablet: Rail links, PC: Seitenleiste.
 * ====================================================================== */
.tb-app {
  --fest-unten: var(--nav-unten-gesamt);   /* feste Leisten sitzen über der Navigation */
  --fest-sicher: 0px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.tb-app > .tb-nav { order: 3; position: sticky; bottom: 0; z-index: 30; }
.tb-app__inhalt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tb-app__inhalt > .tb-seite { flex: 1 0 auto; }
.tb-app--ohne-nav { --fest-unten: 0px; --fest-sicher: var(--sicher-unten); }

@media (min-width: 40rem) {
  .tb-app {
    --fest-unten: 0px;
    --fest-sicher: var(--sicher-unten);
    display: grid;
    grid-template-columns: var(--nav-rail-breite) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "kopf kopf" "nav inhalt";
  }
  .tb-app > .tb-kopf { grid-area: kopf; }
  .tb-app > .tb-nav { grid-area: nav; position: static; order: 0; }
  .tb-app > .tb-app__inhalt { grid-area: inhalt; }
  .tb-app--ohne-nav { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "inhalt"; }
  /* die Rail trägt den linken iPhone-Rand */
  .tb-app { --rand-links: var(--seitenrand); }
  .tb-app > .tb-nav, .tb-app > .tb-kopf { --rand-links: max(var(--seitenrand), var(--sicher-links)); }
}
@media (min-width: 64rem) {
  .tb-app { grid-template-columns: var(--nav-seite-breite) minmax(0, 1fr); }
  .tb-app--ohne-nav { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================
 * 10 Rechenmodul-Gerüst
 * Handy: Eingabe und Ergebnis untereinander, feste Ergebniszeile und Hauptaktion unten.
 * Tablet und PC: Eingabe und Ergebnis nebeneinander, Ergebnis bleibt beim Scrollen stehen.
 * Aufbau: .tb-seite > .tb-rechen (eingabe, ergebnis); danach .tb-rechen__unten als
 * Geschwister von .tb-seite, damit es über die ganze Seite haftet.
 * ====================================================================== */
.tb-rechen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-5) var(--spaltenabstand);
  align-items: start;
}
.tb-rechen__eingabe { min-width: 0; }
.tb-rechen__ergebnis { min-width: 0; }
.tb-rechen__ergebnis > :last-child { margin-bottom: 0; }
.tb-rechen__unten > .tb-ergebniszeile { margin-bottom: var(--abstand-3); }
.tb-rechen__unten > .tb-aktionen { margin: 0; }
@media (min-width: 40rem) {
  .tb-rechen { grid-template-columns: minmax(0, 1fr) var(--ergebnis-spalte); }
  .tb-rechen__ergebnis {
    position: sticky;
    top: var(--abstand-4);
    max-height: calc(100dvh - var(--abstand-5));
    overflow: auto;
  }
  .tb-rechen__unten > .tb-ergebniszeile { display: none; }
}
@media (min-width: 64rem) {
  .tb-rechen { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tb-rechen__eingabe { grid-column: span 7; }
  .tb-rechen__ergebnis { grid-column: span 5; }
}

/* Variante „Ergebnis breit“: wenig Eingabe, großes Ergebnis (ab 0.2.0).
 * Handy und Tablet: untereinander, das Ergebnis steht nicht fest. PC: schmale stehende
 * Eingabespalte (--eingabe-spalte) links, das Ergebnis nimmt den Rest.
 * Mit tb-rechen--ergebnis-zuerst steht das Ergebnis unterhalb von 64rem über den Eingaben. */
.tb-rechen--ergebnis-breit .tb-rechen__ergebnis { position: static; max-height: none; overflow: visible; }
@media (min-width: 40rem) {
  .tb-rechen--ergebnis-breit { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
  body:has(.tb-rechen--ergebnis-breit) .tb-rechen__unten > .tb-ergebniszeile { display: flex; }
}
@media (max-width: 63.99rem) {
  .tb-rechen--ergebnis-zuerst .tb-rechen__ergebnis { order: -1; }
}
@media (min-width: 64rem) {
  .tb-rechen--ergebnis-breit { grid-template-columns: var(--eingabe-spalte) minmax(0, 1fr); }
  .tb-rechen--ergebnis-breit .tb-rechen__eingabe,
  .tb-rechen--ergebnis-breit .tb-rechen__ergebnis { grid-column: auto; }
  .tb-rechen--ergebnis-breit .tb-rechen__eingabe {
    position: sticky;
    top: var(--abstand-4);
    max-height: calc(100dvh - var(--abstand-5));
    overflow: auto;
  }
}

/* ======================================================================
 * 11 Zugang
 * ====================================================================== */
/* Sperrseite im Modul: ohne gültige Freischaltung, keine Fachinhalte */
.tb-sperre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-3);
  max-width: 36rem;
  margin: var(--abstand-6) auto;
}
.tb-sperre > .tb-symbol { width: var(--abstand-7); height: var(--abstand-7); color: var(--farbe-text-sekundaer); }
.tb-sperre > h1, .tb-sperre > p { margin: 0; }
.tb-sperre .tb-aktionen { align-self: stretch; margin-top: var(--abstand-3); }
@media (min-width: 40rem) { .tb-sperre .tb-aktionen { justify-content: flex-start; } }

/* Freischaltungskarte */
.tb-freischaltung {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
  padding: var(--abstand-4);
  background: var(--farbe-hintergrund);
  border: var(--linie-fein) solid var(--farbe-rahmen);
  border-radius: var(--radius-0);
}
.tb-freischaltung--abgelaufen { border-style: dashed; }
.tb-freischaltung--gesperrt { border-color: var(--farbe-fehler); border-width: calc(var(--linie-fein) * 2); }
.tb-freischaltung__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--abstand-3); }
.tb-freischaltung__recht { margin: 0; font-size: var(--groesse-l); }
.tb-freischaltung--abgelaufen .tb-freischaltung__recht { color: var(--farbe-text-sekundaer); }
.tb-freischaltung__daten { display: grid; grid-template-columns: auto 1fr; gap: var(--abstand-1) var(--abstand-4); margin: 0; }
.tb-freischaltung__daten dt { color: var(--farbe-text-sekundaer); }
.tb-freischaltung__daten dd { margin: 0; font-weight: var(--gewicht-fett); }
.tb-freischaltung__aktionen { display: flex; justify-content: flex-end; }

/* QR-Anzeige: großer Code auf weißer Fläche mit Ruhezone, darunter kopierbarer Text */
.tb-qr { display: flex; flex-direction: column; gap: var(--abstand-3); max-width: 24rem; margin: 0 0 var(--abstand-4); }
.tb-qr__flaeche {
  aspect-ratio: 1;
  padding: var(--abstand-5);          /* Ruhezone: mindestens vier Module Weißraum */
  background: var(--thw-weiss);
  border: var(--linie-fein) solid var(--farbe-rahmen);
}
.tb-qr__flaeche > svg,
.tb-qr__flaeche > canvas,
.tb-qr__flaeche > img { display: block; width: 100%; height: 100%; color: var(--thw-schwarz); image-rendering: pixelated; }
.tb-qr__text {
  width: 100%;
  min-height: 6rem;
  padding: var(--abstand-2) var(--abstand-3);
  font-family: var(--schrift-mono);
  font-size: var(--groesse-s);
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
  border: var(--linie-fein) solid var(--farbe-rahmen);
  border-radius: var(--radius-s);
  overflow-wrap: anywhere;
  resize: vertical;
  user-select: all;
}
.tb-qr__aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-3); }

/* Scanner-Rahmen: Videofläche mit Zielrahmen, Hinweis und Abbrechen */
.tb-scanner { display: flex; flex-direction: column; gap: var(--abstand-3); max-width: 28rem; margin: 0 0 var(--abstand-4); }
.tb-scanner__bild { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--thw-mitternacht); border-radius: var(--radius-0); }
.tb-scanner__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-scanner__ziel {
  position: absolute;
  inset: 15%;
  border: var(--linie-balken) solid var(--thw-gelb);   /* Gelb nur als Rahmen (Dekoration) */
  border-radius: var(--radius-0);
  pointer-events: none;
}
.tb-scanner__hinweis { margin: 0; font-weight: var(--gewicht-fett); }
.tb-scanner > .tb-knopf { align-self: stretch; }

/* ======================================================================
 * 12 Bewegung
 * ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .tb-kachel,
  .tb-knopf,
  .tb-nav__link,
  .tb-reiter__reiter,
  .tb-zahlenfeld__knopf,
  .tb-feld__zeile,
  .tb-auswahl,
  .tb-zahlenfeld,
  .tb-suche { transition: border-color var(--dauer-kurz) ease, background-color var(--dauer-kurz) ease, color var(--dauer-kurz) ease; }
  .tb-laden { animation: tb-drehen 900ms linear infinite; }
  .tb-dialog[open] { animation: tb-ein var(--dauer-normal) ease-out; }
  .tb-dialog[open]::backdrop { animation: tb-abdecken var(--dauer-normal) ease-out; }
  .tb-meldung { animation: tb-ein var(--dauer-normal) ease-out; }
  @media (max-width: 39.99rem) {
    .tb-dialog[open] { animation-name: tb-hoch; }
  }
}
@keyframes tb-drehen { to { transform: rotate(360deg); } }
@keyframes tb-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes tb-hoch { from { transform: translateY(100%); } to { transform: none; } }
@keyframes tb-abdecken { from { opacity: 0; } to { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ======================================================================
 * 13 Modul-Kopfzeile (kopf.js)
 * Dialog „Module“ mit Fachgruppe, Modulen, Einstiegen und Untermodulen.
 * Listen nutzen tb-liste; hier nur Abschnitt, Überschrift und aktuelles Modul.
 * ====================================================================== */
.tb-kopf-dialog__gruppe { margin: 0 0 var(--abstand-3); color: var(--farbe-text-sekundaer); }
.tb-kopf-dialog__abschnitt { margin: 0 0 var(--abstand-4); }
.tb-kopf-dialog__ueberschrift {
  margin: 0 0 var(--abstand-2);
  padding-inline-start: var(--abstand-3);
  border-inline-start: var(--linie-balken) solid var(--thw-silber);
  font-size: var(--groesse-l);
}
.tb-kopf-dialog__abschnitt .tb-liste li { margin: 0; }
.tb-kopf-dialog__abschnitt a.tb-liste__eintrag[aria-current="page"] { border-inline-start: var(--linie-balken) solid var(--farbe-primaer); }
.tb-kopf .tb-dialog { text-align: start; }
/* Zeile mit Impressum, Datenschutz, Nutzung und Quellen unter „Alle Module in der Toolbox“ (ab 0.5.1) */
.tb-kopf-dialog__recht { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--abstand-2); width: 100%; margin-top: var(--abstand-2); font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); }
.tb-kopf-dialog__recht a { display: inline-flex; align-items: center; min-height: var(--ziel-fein); }

/* Offline-Block (baueOfflineBlock): oben im Dialog „Module“, für das geöffnete Modul. Der Schalter
   ist tb-schalter, der Ladebalken tb-fortschritt (unbestimmt), der Fehler tb-meldung--im-text. */
.tb-offline-block { padding-block-end: var(--abstand-3); border-block-end: var(--linie-fein) solid var(--thw-silber); }
.tb-offline-block__name { margin: 0; font-weight: var(--gewicht-fett); }
.tb-offline-block__groesse { margin-inline-start: var(--abstand-2); }
.tb-offline-block__status { margin: 0; }
.tb-offline-block__platz:not(:empty) { margin-top: var(--abstand-2); }
.tb-offline-block__platz .tb-meldung { margin: var(--abstand-2) 0 0; }
.tb-offline-block__frage:not(:empty) { margin-top: var(--abstand-3); }
.tb-offline-block__frage .tb-aktionen { margin-top: var(--abstand-3); }

/* Schriftgröße: Dialog mit drei Stufen und Probetext */
.tb-kopf-dialog__probe { margin: var(--abstand-3) 0 0; font-family: var(--schrift-lesetext); }
.tb-kopf-dialog__hinweis { margin: var(--abstand-2) 0 0; font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); }

/* Modus-Kennzeichen (setzeModusKennzeichen): eigene Zeile im Kopf, Rahmen in THW-Blau.
   Bewusst keine Warnfarbe: Der Modus ist ein Zustand, kein Fehler. */
.tb-kopf__modus {
  order: 10;
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  margin: 0;
  padding: var(--abstand-1) var(--abstand-3);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeilenhoehe-eng);
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  border: calc(var(--linie-fein) * 2) solid var(--farbe-primaer);
  border-radius: var(--radius-0);
}
.tb-kopf__modus > .tb-symbol { color: var(--farbe-primaer); }

/* ======================================================================
 * 14 Ausnutzung, Kennzahl, Kennwerte, Zeichnung (ab 0.2.0)
 * ====================================================================== */

/* Ausnutzungs-Kennzeichen für Tabellenzellen und Kennzahlen: Symbol und Text, die Farbe ist
   nur Zugabe. Unter 95 % ok, ab 95 % knapp, über 100 % überschritten (basis.js: ausnutzungZustand). */
.tb-ausnutzung {
  --ausnutzung-rahmen: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-1);
  padding: 0 var(--abstand-2);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeilenhoehe-tabelle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--farbe-text);
  border: calc(var(--linie-fein) * 2) solid var(--ausnutzung-rahmen);
  border-radius: var(--radius-s);
}
.tb-ausnutzung > .tb-symbol { width: 1.25em; height: 1.25em; }
.tb-ausnutzung__text { font-size: var(--groesse-s); font-weight: var(--gewicht-normal); }
.tb-ausnutzung--ok > .tb-symbol { color: var(--farbe-ok); }
.tb-ausnutzung--knapp { --ausnutzung-rahmen: var(--thw-gelb); }
.tb-ausnutzung--knapp .tb-ausnutzung__text { font-weight: var(--gewicht-fett); }
.tb-ausnutzung--ueberschritten { --ausnutzung-rahmen: var(--farbe-fehler); color: var(--farbe-fehler); }
.tb-ausnutzung--ueberschritten .tb-ausnutzung__text { font-weight: var(--gewicht-fett); }

/* Kennzahl mit Balken: Bezeichnung, Wert mit Einheit, Balken für die Ausnutzung.
   Der senkrechte Silberbalken links ist das CD-Element (1.7.3). */
.tb-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--abstand-4);
  margin: 0 0 var(--abstand-5);
}
@media (min-width: 40rem) {
  .tb-kennzahlen { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
.tb-kennzahl {
  --balken-farbe: var(--farbe-primaer);
  min-width: 0;
  padding-inline-start: var(--abstand-4);
  border-inline-start: var(--linie-balken) solid var(--thw-silber);
  border-radius: var(--radius-0);
}
.tb-kennzahl--knapp { --balken-farbe: var(--thw-gelb); }
.tb-kennzahl--ueberschritten { --balken-farbe: var(--farbe-fehler); }
.tb-kennzahl__label { margin: 0; font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); }
.tb-kennzahl__wert {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--abstand-1);
  margin: 0;
  line-height: var(--zeilenhoehe-eng);
  overflow-wrap: anywhere;
}
.tb-kennzahl__zahl { font-size: var(--groesse-l); font-weight: var(--gewicht-fett); font-variant-numeric: tabular-nums; }
.tb-kennzahl__einheit { font-size: var(--groesse-m); color: var(--farbe-text-sekundaer); }
@media (min-width: 40rem) {
  .tb-kennzahl__zahl { font-size: var(--groesse-xl); }
}
.tb-kennzahl__balken {
  display: block;
  width: 100%;
  height: var(--abstand-3);
  margin: var(--abstand-2) 0 0;
  padding: 0;
  border: var(--linie-fein) solid var(--farbe-trennlinie);
  border-radius: var(--radius-0);
  background: var(--thw-silber);
  color: var(--balken-farbe);
  appearance: none;
  overflow: hidden;
}
.tb-kennzahl__balken::-webkit-progress-bar { background: var(--thw-silber); }
.tb-kennzahl__balken::-webkit-progress-value { background: var(--balken-farbe); }
.tb-kennzahl__balken::-moz-progress-bar { background: var(--balken-farbe); }
.tb-kennzahl__skala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--abstand-1) var(--abstand-2);
  margin: var(--abstand-1) 0 0;
  font-size: var(--groesse-s);
  color: var(--farbe-text-sekundaer);
}

/* Kennwerttabelle: zweispaltig ohne Kopf, links Bezeichnung, rechts der Wert (rechtsbündig).
   Aufbau wie tb-tabelle, aber nur tbody; Summenzeile mit tb-tabelle__summe. */
.tb-tabelle--kennwerte tbody { border-block: var(--linie-fein) solid var(--farbe-trennlinie); }
.tb-tabelle--kennwerte tbody th { font-weight: var(--gewicht-normal); }
.tb-tabelle--kennwerte td { font-weight: var(--gewicht-fett); white-space: nowrap; }
.tb-tabelle--kennwerte .tb-tabelle__summe th { font-weight: var(--gewicht-fett); }
@media (max-width: 39.99rem) {
  .tb-tabelle--kennwerte td { white-space: normal; }
}

/* Zeichnungsrahmen: Inhalt (SVG oder Bild) in Originalgröße, scrollt waagerecht und senkrecht,
   darunter die Unterschrift. Zoom (Einpassen, 100 %, plus, minus) kommt aus basis.js
   (initZeichnungen); ohne Skript bleibt der Rahmen scrollbar und die Werkzeuge verborgen. */
.tb-zeichnung { margin: 0 0 var(--abstand-5); }
.tb-zeichnung__werkzeuge { display: none; }
.tb-zeichnung[data-bereit] .tb-zeichnung__werkzeuge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--abstand-1);
  margin-bottom: var(--abstand-2);
}
.tb-zeichnung__werkzeuge .tb-knopf:not(.tb-knopf--symbol) { padding-inline: var(--abstand-3); }
.tb-zeichnung__stufe {
  min-width: 3.5rem;
  text-align: center;
  font-weight: var(--gewicht-fett);
  font-variant-numeric: tabular-nums;
}
.tb-zeichnung__flaeche {
  max-height: var(--zeichnung-hoehe);
  padding: var(--abstand-3);
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  background: var(--farbe-hintergrund);
  border: var(--linie-fein) solid var(--farbe-rahmen);
}
.tb-zeichnung__inhalt { width: max-content; }
.tb-zeichnung__inhalt > svg,
.tb-zeichnung__inhalt > img { display: block; max-width: none; }
.tb-zeichnung[data-bereit] .tb-zeichnung__inhalt > svg,
.tb-zeichnung[data-bereit] .tb-zeichnung__inhalt > img {
  width: calc(var(--zeichnung-breite) * var(--zeichnung-zoom) * 1px);
  height: auto;
}
.tb-zeichnung__unterschrift { margin-top: var(--abstand-2); font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); }