/* ==========================================================================
   meinHERMES — Methodenüberblick («Überblick»)

   Diese Ansicht folgt dem Modernist-Entwurf aus design/: flach, architektonisch,
   fast einfarbig rot auf warmem hellen Grund, kein einziger Rundungsradius,
   Struktur aus Linien statt aus Kästen, Archivo für alles. Seit der
   Angleichung aller Ansichten liegen Tokens, Schrift und Kopfzeile in
   css/style.css; hier steht nur, was die Werkbank eigenes hat.

   Die Originalabbildung des Referenzhandbuchs (SVG aus assets/abb/) bleibt
   unverändert; darüber liegt eine unsichtbare Trefferschicht, die beim Zeigen,
   beim Rollenfilter und im Abfragemodus sichtbar wird.

   Die Abbildung ist eine gedruckte Grafik mit schwarzer Beschriftung auf
   hellem Grund — einer der Gründe, warum die Anwendung nur hell ist.
   ========================================================================== */

/* Farben, Schrift und Kopfzeile kommen seit der Angleichung aller Ansichten
   aus css/style.css (Tokens --ub-* sind dort Aliasse der globalen Tokens). */

/* --- Seitengerüst --------------------------------------------------------- */

body[data-route="ueberblick"] .view { max-width: none; margin: 0; padding: 0; }

/* Ab Tablettbreite füllt die Werkbank den Schirm; nur die beiden Bereiche
   scrollen. Darunter wird gestapelt, damit Seite und Fussnavigation bleiben. */
@media (min-width: 700px) {
  body[data-route="ueberblick"] {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  body[data-route="ueberblick"] .topbar { position: static; flex: 0 0 auto; }
  body[data-route="ueberblick"] main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; }
  body[data-route="ueberblick"] .view { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; }
  body[data-route="ueberblick"] .fusszeile { display: none; }

  .ub-werkbank {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9px var(--ub-inhalt, 420px);
    grid-template-rows: minmax(0, 1fr);
  }
  .ub-werkbank[data-breit="true"] { grid-template-columns: minmax(0, 1fr) 0 0; }

  .ub-seite { min-height: 0; }
  .ub-sichten { flex: 1 1 auto; min-height: 0; }
  .ub-bereich--abbildung .ub-buehne-huelle { flex: 1 1 auto; min-height: 0; }
  .ub-buehne-huelle { flex: 1 1 auto; min-height: 0; }
  .ub-buehne { height: 100%; }
  .ub-inhalt { min-height: 0; }
}

.ub-werkbank[data-breit="true"] .ub-trenner,
.ub-werkbank[data-breit="true"] .ub-inhalt { display: none; }

.ub-seite {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ub-grund);
}

/* Rahmen der Bühne: oben die Abbildung, unten der Graph, jeder Bereich mit
   Kopfzeile zum Zu- und Aufklappen; offen teilen sie sich die Höhe. Die
   Popover des Graphen liegen im Rahmen. */
.ub-sichten {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ub-bereich {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
}
.ub-bereich[data-offen="zu"] { flex: 0 0 auto; }
.ub-bereich[data-offen="zu"] > :not(.ub-bereich__kopf) { display: none; }
.ub-bereich--graph { border-top: 1px solid var(--ub-linie); }
.ub-bereich__kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px 0 0;
  background: var(--ub-flaeche);
  border-bottom: 1px solid var(--ub-linie);
}
.ub-bereich[data-offen="zu"] .ub-bereich__kopf { border-bottom: 0; }
.ub-bereich__knopf {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ub-leise);
}
.ub-bereich__knopf:hover { color: var(--ub-tinte); }
/* Dreieck statt Zeichensatz-Pfeil: dreht sich beim Zuklappen. */
.ub-bereich__pfeil {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform .12s ease;
}
.ub-bereich[data-offen="zu"] .ub-bereich__pfeil { transform: rotate(-90deg); }
/* Die Chips der Auswahl stehen rechts in der Kopfzeile der Abbildung. */
.ub-auswahlchips { margin-left: auto; justify-content: flex-end; min-width: 0; }
.ub-auswahlchips[hidden] { display: none; }
.ub-ikonknopf[aria-pressed="true"] { color: var(--ub-akzent); background: var(--ub-akzent-hauch); border-radius: 4px; }
/* Leicht abgerundete Kacheln für die schwebenden Icons. */
.ub-schweber, .ub-sichten .grail { border-radius: 6px; }
/* Der Filterknopf des Graphen neben der Steuerung, im Mass der Icons hier. */
.ub-schweber .graph-werkzeug { width: 28px; height: 28px; color: var(--ub-leise); }
.ub-schweber .graph-werkzeug:hover { color: var(--ub-tinte); }
.ub-schweber .graph-werkzeug.ist-aktiv { color: var(--ub-akzent); }
.ub-schweber .graph-werkzeug[aria-expanded="true"] { color: var(--ub-akzent); background: var(--ub-akzent-hauch); border-radius: 4px; box-shadow: none; }

/* --- Schwebende Bedienelemente auf der Bühne ----------------------------- */

/* Auf der weissen Bühne liegen nur Icons: Steuerung oben rechts, Legende
   unten links, Zoom unten rechts. Sie stehen auf dem Grundton mit Haarlinie —
   flach, keine erhobene Fläche; die einzige bleibt die Steuerung. */

.ub-buehne-huelle {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ub-schweber {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  background: var(--ub-grund);
  border: 1px solid var(--ub-linie);
}
.ub-schweber--steuerung { top: 12px; right: 12px; padding: 2px; }
.ub-schweber--legende { bottom: 12px; left: 12px; padding: 2px; }
.ub-schweber--zoom { bottom: 12px; right: 12px; }

.ub-ikonknopf {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ub-leise);
  cursor: pointer;
}
.ub-ikonknopf:hover { color: var(--ub-tinte); }
.ub-ikonknopf[aria-expanded="true"] { color: var(--ub-akzent); background: var(--ub-akzent-hauch); border-radius: 4px; }
.ub-schweber__strich {
  width: 1px;
  height: 16px;
  margin: 0 6px;
  background: var(--ub-linie);
}

.ub-segment { display: flex; border: 1px solid var(--ub-linie); }
.ub-segment + .ub-panel__hilfe { margin-top: 8px; }
.ub-tab {
  flex: 1 1 0;
  height: 32px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ub-leise);
  cursor: pointer;
}
.ub-tab:hover { color: var(--ub-tinte); }
.ub-tab[aria-pressed="true"] {
  font-weight: 800;
  color: var(--ub-tinte);
  box-shadow: inset 0 -3px 0 var(--ub-akzent);
}

.ub-schweber__knopf {
  height: 28px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ub-leise);
  cursor: pointer;
}
.ub-schweber__knopf:hover { color: var(--ub-tinte); }

.ub-zoom__knopf {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--ub-leise);
  cursor: pointer;
}
.ub-zoom__knopf:hover { color: var(--ub-tinte); }
.ub-zoom__wert {
  min-width: 48px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ub-tinte);
  font-variant-numeric: tabular-nums;
}

/* --- Steuerung (einzige erhobene Fläche dieser Ansicht) ------------------- */

.ub-panel-huelle { position: absolute; top: 0; right: 0; z-index: 20; }
.ub-panel__faenger { position: fixed; inset: 0; background: transparent; }
.ub-panel {
  position: absolute;
  top: 48px;
  right: 12px;
  width: 320px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border: 1px solid var(--ub-rand);
  box-shadow: 0 12px 32px rgba(45, 43, 43, .22);
  /* Mit Filterchips wird das Panel hoch: scrollt, statt unten abzureissen. */
  max-height: calc(100vh - 110px);
  overflow: auto;
}
.ub-panel__block { padding: 14px 16px 16px; }
.ub-panel__block + .ub-panel__block { border-top: 1px solid var(--ub-linie); }
.ub-panel__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.ub-panel__label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ub-leise);
}
.ub-panel__kopf .ub-panel__label { margin-bottom: 0; }

.ub-select {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--ub-rand);
  border-radius: 0;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ub-tinte);
}
.ub-panel__legende {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
}
.ub-panel__legende > span { display: flex; align-items: center; gap: 7px; }
.ub-swatch { width: 12px; height: 12px; flex: 0 0 auto; display: block; }
.ub-swatch--voll { background: var(--ub-akzent); }
.ub-swatch--rand { border: 2px solid var(--ub-akzent); }
.ub-panel__zahl {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--ub-leise);
  font-variant-numeric: tabular-nums;
}
.ub-panel__zahl:empty { display: none; }

.ub-panel__haken { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; cursor: pointer; }
.ub-panel__haken + .ub-panel__haken { margin-top: 12px; }
.ub-haken { width: 16px; height: 16px; margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--ub-akzent); }
.ub-panel__hilfe { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ub-leise); }
.ub-panel__hilfe--allein { margin: 0; text-wrap: pretty; }

/* Filter in der Steuerung: Chips für Phasen und Module */
.ub-filter__gruppe { margin-top: 12px; }
.ub-filter__label {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ub-leise-hell);
}
.ub-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ub-chip {
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--ub-linie);
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ub-leise);
  cursor: pointer;
}
.ub-chip:hover { color: var(--ub-tinte); border-color: var(--ub-rand); }
.ub-chip[aria-pressed="true"] {
  border-color: var(--ub-akzent);
  background: var(--ub-akzent-hauch);
  color: var(--ub-akzent-text);
}
.ub-ikonknopf.ist-aktiv { color: var(--ub-akzent); }

.ub-textknopf {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ub-akzent-text);
  cursor: pointer;
}
.ub-textknopf:hover { color: var(--ub-akzent); }

.ub-schwach { list-style: none; margin: 0; padding: 0; }
.ub-schwach li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--ub-linie-fein);
  font-size: 13px;
}
.ub-schwach__begriff { font-weight: 600; }
.ub-schwach__zahl {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ub-akzent-text);
  font-variant-numeric: tabular-nums;
}

/* --- Aufgabenzeile im Abfragemodus ---------------------------------------- */

.ub-prompt {
  flex: 0 0 auto;
  padding: 14px 16px 16px;
  border-bottom: 1px solid var(--ub-linie);
  background: #fff;
}
.ub-prompt[data-phase="richtig"],
.ub-prompt[data-phase="falsch"],
.ub-prompt[data-phase="ende"] { background: var(--ub-akzent-hauch); }

.ub-prompt__kopf { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ub-prompt__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ub-leise);
  font-variant-numeric: tabular-nums;
}
.ub-prompt__status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ub-akzent-text);
}
.ub-prompt__zeile {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ub-prompt__ziel { display: flex; align-items: center; gap: 10px; }
.ub-prompt__titel {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.ub-prompt__hinweis { font-size: 13px; color: var(--ub-leise); }
.ub-prompt__zahlen {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ub-leise);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ub-prompt__zahlen strong { color: var(--ub-tinte); font-weight: 800; }

.ub-primaer {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 2px solid var(--ub-akzent);
  background: var(--ub-akzent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ub-primaer:hover { background: var(--ub-akzent-tief); border-color: var(--ub-akzent-tief); }

/* --- Bühne mit der Abbildung ---------------------------------------------- */

.ub-buehne {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  /* Unten Platz für Legende- und Zoom-Icon, damit sie die letzte Reihe der
     Abbildung in der Ausgangslage nicht verdecken; oben steht nur ein Icon
     rechts, wo die Grafik leer ist. */
  padding: 16px 16px 56px;
}
.ub-buehne__laden {
  margin: 0;
  padding: 64px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ub-leise-hell);
}
.ub-buehne .leer {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ub-tinte);
}

.ub-abb { display: block; height: auto; max-width: none; }
/* Rad zoomt, Ziehen verschiebt — während des Zugs greift die Hand. */
.ub-buehne.ist-am-ziehen { cursor: grabbing; }
.ub-buehne.ist-am-ziehen * { cursor: grabbing; }

/* Legende der Zeichen, aus denen die Originalgrafik besteht — eine kleine
   Karte über dem Info-Icon unten links, per Icon ein- und ausblendbar. */
.ub-abblegende {
  position: absolute;
  left: 12px;
  bottom: 52px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 12px 16px 14px;
  background: var(--ub-grund);
  border: 1px solid var(--ub-linie);
  font-size: 12px;
  color: var(--ub-tinte-weich);
}
.ub-abblegende__titel {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ub-leise-hell);
}
.ub-abblegende__liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ub-abblegende__liste li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ub-zeichen { display: block; flex: 0 0 auto; }

body[data-route="ueberblick"] .datenwarnung {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 16px;
  border: 0;
  border-bottom: 1px solid var(--ub-linie);
  border-radius: 0;
  background: var(--ub-akzent-hauch);
  color: var(--ub-tinte);
  font-size: 12.5px;
}

/* --- Trefferschicht ------------------------------------------------------- */

/* Unsichtbar, aber klickbar: eine Füllung mit Deckkraft 0 fängt Zeigen und
   Klick, `fill:none` täte das nicht. Gefärbt wird ausschliesslich hier —
   die Originalgrafik bleibt unberührt. */
.ub-feld { cursor: pointer; }
.ub-feld rect { transition: fill-opacity .1s linear; }
.ub-feld:focus { outline: none; }
.ub-feld:focus-visible { outline: 2px solid var(--ub-akzent); outline-offset: 2px; }

/* --- Trennlinie ----------------------------------------------------------- */

.ub-trenner {
  cursor: col-resize;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: transparent;
}
.ub-trenner:hover { background: var(--ub-akzent-hauch-2); }
.ub-trenner__strich { width: 1px; background: var(--ub-linie); }

/* --- Inhaltsseite --------------------------------------------------------- */

.ub-inhalt {
  display: flex;
  flex-direction: column;
  background: var(--ub-grund);
}
.ub-inhalt__text { display: flex; flex-direction: column; }

/* Ab 700 px scrollt die Inhaltsseite in sich. Die Regel steht bewusst hier
   und nicht im Block weiter oben — dort käme sie vor `display:flex` und
   würde davon überschrieben. */
@media (min-width: 700px) {
  .ub-inhalt__text { flex: 1 1 auto; min-height: 0; overflow: auto; }
}

.ub-kopf { padding: 26px 32px 0; }
.ub-kopf__zeile { display: flex; align-items: center; gap: 10px; }
.ub-kopf__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ub-akzent-text);
}
/* Rechts in der Kopfzeile: Siegel («minimal gefordert» / «zwingend») und
   Download der Dokumentvorlage — nur Zeichen, der Wortlaut steht im Tooltip. */
.ub-kopf__zeichen { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ub-marker { display: inline-flex; color: var(--ub-akzent); }
.ub-marker svg { display: block; }
.ub-marker circle { fill: currentColor; stroke: none; }
.ub-marker path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ub-kopf__vorlage {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ub-rand);
  background: #fff;
  color: var(--ub-tinte);
}
.ub-kopf__vorlage:hover, .ub-kopf__vorlage:focus-visible {
  border-color: var(--ub-akzent);
  color: var(--ub-akzent-text);
}
.ub-kopf__titel {
  hyphens: auto;
  -webkit-hyphens: auto;
  margin: 12px 0 0;
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.1;
  text-wrap: pretty;
}
/* Der Lead trägt den Abschnitt «Beschreibung» der Quelle — bei manchen
   Ergebnissen sind das mehrere Absätze. */
.ub-kopf__lead { margin: 14px 0 0; font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.ub-kopf__lead p { margin: 0; }
.ub-kopf__lead p + p { margin-top: 10px; }

.ub-mikro {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ub-leise);
}
.ub-mikro--akzent { margin-bottom: 8px; color: var(--ub-akzent-text); }
.ub-mikro--legende { margin: 26px 0 4px; }

.ub-abschnitt { margin: 26px 0 0; padding: 0 32px; }.ub-abschnitt--regel { padding-top: 20px; border-top: 1px solid var(--ub-linie); }
.ub-abschnitt--regel .ub-mikro { margin-bottom: 8px; }

.ub-prosa { margin: 0; font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }
.ub-doku {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ub-tinte-weich);
  white-space: pre-wrap;
}

/* --- Handbuchabschnitte auf der Inhaltsseite ------------------------------ */

/* Die Blöcke aus data/handbuch/ tragen die Klassen aus css/style.css; hier
   werden sie auf die Typografie dieser Ansicht gebracht. */
.ub-abschnitt .hb-p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; }
.ub-abschnitt .hb-p:last-child { margin-bottom: 0; }
.ub-abschnitt .hb-liste {
  margin: 0;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.5;
}
.ub-abschnitt .hb-liste li { margin: 0 0 4px; }
.ub-abschnitt .hb-liste .hb-liste { margin-top: 4px; }
.ub-abschnitt .hb-li-titel { font-weight: 600; }
.ub-abschnitt .hb-tabelle { font-size: 13px; }

/* Beziehungen aus dem Graphmodell statt der Tabelle der Quellseite. */
.ub-bez { margin: 0 0 14px; }
.ub-bez:last-child { margin-bottom: 0; }
.ub-bez__label {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ub-leise-hell);
}
.ub-bez__liste { margin: 0; padding: 0; list-style: none; }
.ub-bez__liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 6px 0;
  border-top: 1px solid var(--ub-linie-fein);
}
.ub-bez__liste li:first-child { border-top: 0; }
.ub-bez__ziel { font-size: 14.5px; font-weight: 600; }
.ub-bez__zusatz { font-size: 12px; color: var(--ub-leise); }

.ub-fakten { margin: 0; }
.ub-fakt {
  display: grid;
  grid-template-columns: 22px 108px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--ub-linie);
  align-items: start;
}
.ub-fakt dt {
  margin: 0;
  padding-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ub-leise);
}
.ub-fakt dd { margin: 0; font-size: 14px; line-height: 1.5; text-wrap: pretty; }

.ub-verweise {
  margin: 26px 0 0;
  padding: 18px 32px 32px;
  border-top: 1px solid var(--ub-linie);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.ub-verweis {
  padding-bottom: 2px;
  border-bottom: 2px solid var(--ub-linie);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ub-tinte);
}
/* «Im Graph» ist ein Knopf im Kleid der Verweise. */
.ub-verweis--knopf { border: 0; border-bottom: 2px solid var(--ub-linie); background: none; padding: 0 0 2px; font-family: inherit; cursor: pointer; }
.ub-verweis--akzent { border-bottom-color: var(--ub-auswahl); color: var(--ub-akzent-text); }
.ub-verweis:hover { color: var(--ub-akzent); border-bottom-color: var(--ub-akzent); }

/* --- Leerer Zustand ------------------------------------------------------- */

.ub-leerseite { padding: 26px 32px 32px; max-width: 56ch; }
.ub-leerseite__titel {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.ub-leerseite__text {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ub-tinte-weich);
  text-wrap: pretty;
}
.ub-legende { list-style: none; margin: 0; padding: 0; }
.ub-legende li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--ub-linie);
  font-size: 13.5px;
  line-height: 1.4;
}

/* --- Ikonen --------------------------------------------------------------- */

body[data-route="ueberblick"] .kat-ikone { flex: 0 0 auto; }
.ub-ikone--kopf { width: 24px; height: 24px; color: var(--ub-akzent); }
.ub-ikone--prompt { width: 22px; height: 22px; color: var(--ub-akzent); stroke-width: 1.8; }
.ub-ikone--legende { width: 20px; height: 20px; color: var(--ub-tinte); }
.ub-ikone--fakt { width: 16px; height: 16px; margin-top: 3px; color: var(--ub-leise-hell); stroke-width: 1.8; }

/* --- Schmale Schirme ------------------------------------------------------ */

/* Unter 700 px hat eine Werkbank aus zwei Bereichen keinen Platz: Abbildung
   und Inhaltsseite werden gestapelt, die Seite scrollt wie überall sonst. */
@media (max-width: 699.98px) {
  .ub-werkbank { display: block; }
  .ub-trenner { display: none; }
  /* Höhe nach der Abbildung, gedeckelt — sonst steht unter der auf die Breite
     gepassten Grafik eine grosse weisse Fläche. */
  .ub-buehne { max-height: 72vh; min-height: 200px; }
  .ub-bereich--graph[data-offen="auf"] .graph-buehne { min-height: 60vh; }
  .ub-bereich__knopf { padding-left: 12px; }
  /* «Inhaltsseite einklappen» gibt es gestapelt nicht — es gibt keine
     Spalte, die sich einklappen liesse. */
  .ub-panel__nurbreit, .ub-panel__block--nurbreit { display: none; }
  .ub-kopf, .ub-abschnitt, .ub-leerseite { padding-left: 16px; padding-right: 16px; }
  .ub-verweise { padding: 18px 16px 24px; }
  .ub-inhalt { border-top: 1px solid var(--ub-linie); }
  .ub-kopf__titel { font-size: 26px; }
  .ub-prompt__titel { font-size: 22px; }
  .ub-prompt__zahlen { margin-left: 0; }
}

/* --- Druck ---------------------------------------------------------------- */

@media print {
  .ub-schweber, .ub-panel-huelle, .ub-trenner, .ub-prompt { display: none !important; }
  .ub-abblegende { display: flex !important; position: static; flex-direction: row; flex-wrap: wrap; gap: 5px 20px; max-width: none; border: 0; border-top: 1px solid var(--ub-linie); }
  .ub-abblegende__liste { flex-direction: row; flex-wrap: wrap; gap: 5px 20px; }
  body[data-route="ueberblick"] { height: auto; overflow: visible; display: block; }
  .ub-werkbank { display: block; }
  .ub-buehne { overflow: visible; padding: 0; height: auto; }
  .ub-abb { width: 100% !important; }
}