/* ===================== hilfe.css v13 · 10.09.2026 ===================== */
/* Im Feld pruefen: nach «v13» suchen. Steht dort eine kleinere Nummer oder
   gar keine, liegt eine aeltere Fassung drin.
   v13 = Stil 26 «Glossareintrag» — je Begriff ein Block, zusammen eine Tabelle
   v12 = Stil 25 «SVG Icon» — ein GUI-Zeichen neben dem Absatz
   v11 = Schema per Klick als Vollbild (braucht den Block in hilfe.js)
   v10 = Kaesten linksbuendig zum Text, rechts bis zur Spaltenkante
   v9 = eine Kante fuer alle Kaesten und Bilder + Schema 1:1 ab 1520px
   v8 = .schema .inv — weisse Beschriftung auf dunklem Grund moeglich
   v7 = Schema volle Spaltenbreite, kein Polster im Scroller
   v6 = Schema als Aufnahme: Rahmen, heller Grund, leichter Schlagschatten
   v5 = Navigation: aktive Zeile bleibt weiss, auch als Geruest            */

/* dabuSoft HANDBUCH — hilfe.css · Stand 24.08.2026 · monochrom
   Warum etwas so ist, wie es ist: _notes/design_hilfe/hilfe_css_warum.md
   Drei Regeln: unterstrichen heisst begehbar · die Ruhe ist das Budget ·
   Rahmen grau, Inhalt schwarz.
   Gliederung  1 Werte · 2 Grundlagen · 3 Kopf und Suche · 4 Layout ·
   5 Navigation · 6 Typografie · 7 Bloecke · 8 Fuss · 9 Handy · 10 Bewegung */


/* ---- 1 · Werte ---------------------------------------------------------- */
:root {
  /* Marke, unveraendert. --darkblue traegt nur noch die Linie im Kopf,
     --lightblue nichts mehr in diesem Blatt. */
  --darkblue:  #1C2850;
  --lightblue: #6FC0DF;
  --red:       #FF4C5A;          /* 3.3:1 — nur Flaeche, nie Text */
  --tint-rot:  #FFEDEE;          /* die Flaeche der Warnung */

  /* Monochrom */
  --ink:         #000;
  --muted:       #6B7280;        /* 4.9:1 — Rahmentexte, nie Inhalt */
  --linie:       #E4E7EC;
  --linie-fein:  #EFF1F4;
  --zebra:       #FAFBFC;
  --grau-ton:    #F4F5F7;        /* Flaeche: Hinweis, Fuss */
  --nav-hover:   #F0F1F3;        /* Toenung beim Ueberfahren */
  --treffer:     #E6E8EB;        /* der Fund im Suchtext */
  --unterstrich: #C3C8CF;        /* die ruhende Unterstreichung */
  --card:        #fff;
  --shadow:      #d9d9d9;        /* der Verlauf unter dem Kopf, wie dabuflow.ch */

  /* Messwerte aus dem Programm, keine Gestaltung — nicht angleichen */
  --programm-rot:   #FA4F5E;
  --programm-gruen: #6CA806;

  --radius: 3px;

  /* Rhythmus: Vielfache von 7, wie auf der Hauptseite */
  --r1: 7px;  --r2: 14px; --r3: 21px; --r4: 28px;
  --r5: 35px; --r6: 42px; --r8: 56px;

  --schnell: .15s ease;
  --mittel:  .25s ease;
}


/* ---- 2 · Grundlagen ----------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Trebuchet MS", "Lucida Grande", Helvetica, sans-serif;
  color: var(--ink);
  background: #fff;
  font-size: 17px;               /* Trebuchet laeuft klein */
  line-height: 1.65;
}

/* Jeder Verweis: schwarz, fein unterstrichen. Wo keine Unterstreichung hin
   soll, nimmt die Stelle sie ausdruecklich wieder weg. */
a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--unterstrich);
  transition: text-decoration-color var(--schnell), background-color var(--schnell);
}
a:hover { text-decoration-color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

.linie {
  background: var(--darkblue);
  height: 7px;
}


/* ---- 3 · Kopf und Suche ------------------------------------------------- */
/* 1:1 von dabuflow.ch, Verlauf zeichengleich.
   Der Kopf setzt seine Schrift SELBST und erbt sie nicht vom body — sonst
   ist er hier hoeher als auf der Hauptseite, weil die beiden Blaetter
   verschiedene Grundwerte haben (17px/1.65 gegen 16px/1.5). Gemessen: rund
   7px Unterschied, sichtbar beim Wechseln zwischen den Seiten.
   Dieselben vier Zeilen gehoeren in style.css der Hauptseite. */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--r3);
  flex-wrap: wrap;                 /* nur hier noetig: das Suchfeld darf umbrechen */
  padding: var(--r3) var(--r8);
  box-shadow: 1px 2px 7px var(--shadow);
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}
header a { text-decoration: none; }        /* das Logo traegt keinen Strich */
/* NICHT `header img { display: block }` setzen — versucht am 24.08.2026 und
   zurueckgenommen. Das Markup ist `<a><img></a><br><span class="sub">`:
   steht das Bild inline, schluckt der <br> den Umbruch. Als Block bekommt das
   Bild seine eigene Zeile UND der <br> erzeugt danach eine leere von 24px.
   Der Kopf wird dadurch hoeher statt gleich hoch. Die Angleichung leisten
   font-size und line-height oben — bei gleichem Markup genuegt das. */

.sub {
  color: var(--muted);
  font-size: 13px;               /* wie dabuflow.ch */
}

.suchen {
  border: 1px solid var(--linie);
  border-radius: 50px;
  display: flex;
  align-items: center;
  background: #fff;
}
.suchen:focus-within { border-color: var(--ink); }

#searchInput {
  border: none;
  padding: 9px 0 9px 17px;
  border-radius: 50px 0 0 50px;
  font-family: inherit;
  font-size: 16px;               /* unter 16px zoomt iOS beim Antippen */
  min-width: 0;
}
#searchInput:focus { outline: none; }      /* der Ring sitzt auf .suchen */

#searchForm button {
  background-color: transparent;
  border: none;
  padding-top: 5px;
  fill: var(--muted);
  cursor: pointer;
  transition: fill var(--schnell);
}
#searchForm button:hover { fill: var(--ink); }

.suchtext {
  border-bottom: 1px solid var(--linie);
  color: var(--muted);
  font-size: 15px;
  padding-bottom: var(--r2);
  margin-bottom: var(--r2);
}

/* Suchvorschau unter dem Feld */
.suchvorschau {
  position: absolute;
  top: calc(100% + var(--r1));
  right: 0;
  z-index: 50;
  width: min(560px, calc(100vw - var(--r4)));
  max-height: min(70vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .13);
}
.suchvorschau[hidden] { display: none; }

/* Die Zeile ist die Flaeche, die man trifft — darum kein Strich */
.treffer {
  display: block;
  padding: var(--r2) var(--r3);
  border-bottom: 1px solid var(--linie-fein);
  color: var(--ink);
  text-decoration: none;
}
.treffer:last-child { border-bottom: 0; }
/* gefuellt ist, was gewaehlt IST — beim Ueberfahren toent es nur */
.treffer:hover { background: var(--nav-hover); }
.treffer.aktuell { background: var(--ink); }
.treffer.aktuell .treffer-titel,
.treffer.aktuell .treffer-kette,
.treffer.aktuell .treffer-text { color: #fff; }
.treffer.aktuell mark { background: rgba(255, 255, 255, .28); color: #fff; }

.treffer-kette {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 2px;
}
.treffer-titel {
  display: block;
  font-weight: 700;
  line-height: 1.35;
}
.treffer-text {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.treffer-leer {
  padding: var(--r3);
  color: var(--muted);
}

mark {
  background: var(--treffer);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

/* Die eigene Seite unter suchresultate/ — breiter, ohne Kasten */
.suchresultat {
  margin: var(--r5) auto;
  max-width: 760px;
  padding: 0 var(--r3);
}
.suchresultat .treffer {
  padding: var(--r3) 0;
  border-bottom: 1px solid var(--linie);
}
.suchresultat .treffer:hover { background: transparent; }
.suchresultat .treffer-titel {
  font-size: 18px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--unterstrich);
}
.suchresultat .treffer:hover .treffer-titel { text-decoration-color: var(--ink); }
.suchresultat h3 { color: var(--muted); font-weight: 400; }


/* ---- 4 · Layout --------------------------------------------------------- */
.inhalt {
  display: flex;
  min-height: 90vh;
}

.navigation {
  margin-top: var(--r1);
  min-width: 280px;
  max-width: 280px;
}

.hilfetext {
  border-left: 1px solid var(--linie);
  max-width: 889px;
  min-width: 0;                  /* sonst schiebt ein breites Schema die Seite auf */
  padding: var(--r6) var(--r5) var(--r8);
}


/* ---- 5 · Navigation ----------------------------------------------------- */
/* Markup aus nav.js, rekursiv. Fuellung = aktuelle Seite, Toenung = Ueberfahren. */
.navigation {
  position: sticky;
  top: 0;
  align-self: flex-start;        /* sonst streckt der Flexkasten das Kind */
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--r3) var(--r2) var(--r5) 0;
  font-size: 16px;
}
.navigation ul { list-style: none; margin: 0; padding: 0; }
.navigation a { text-decoration: none; }   /* 252 Striche waeren Laerm */
.navigation noscript a { text-decoration: underline; text-decoration-color: var(--ink); }

/* Gruppenzeile — klappt auf und zu */
.nav-pfeil {
  display: flex;
  align-items: baseline;
  padding: 8px var(--r2) 8px 0;
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background-color var(--schnell), color var(--schnell);
}
.nav-pfeil::before {
  content: '\25B8';              /* ▸ — alle Dreiecke schwarz, zu wie offen */
  display: inline-block;
  flex: 0 0 20px;
  text-align: center;
  color: var(--ink);
  font-weight: 400;
}
.nav-pfeil.active::before { content: '\25BE'; }   /* ▾ */
.nav-pfeil:hover { background-color: var(--nav-hover); }

.ebene .nav-pfeil { font-weight: 400; }    /* Untergruppen sind keine Hauptgruppen */

/* Seitenzeile */
.nav-hover { border-radius: var(--radius); transition: background-color var(--schnell); }
.nav-hover a { display: block; color: var(--ink); }
.nav-hover a div { padding: 8px var(--r2) 8px 20px; }
.nav-hover:hover { background-color: var(--nav-hover); }
.nav-hover.aktuell { background-color: var(--ink); }
.nav-hover.aktuell a { color: #fff; }

/* Die Gruppenzeile IST die Uebersichtsseite: Pfeil klappt, Titel geht hin */
.nav-hover.kopf { display: flex; align-items: center; }
.nav-hover.kopf > .nav-pfeil {
  flex: 0 0 auto;
  width: 20px;
  padding: 8px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.nav-hover.kopf > .nav-pfeil::before { margin: 0; }
.nav-hover.kopf > a { flex: 1 1 auto; font-weight: 700; }
.nav-hover.kopf > a div { padding-left: 0; }
.ebene .nav-hover.kopf > a { font-weight: 400; }
.nav-hover.kopf > .nav-pfeil:hover { background: none; }
.nav-hover.kopf > .nav-pfeil:focus-visible { outline: 2px solid var(--ink); }

/* Seiten ohne Block: grau, dazu title/aria-label aus ZX.
   .nav-marke wird von nav.js NICHT erzeugt — vorbereitet, ohne Wirkung. */
.nav-hover.geruest a { color: var(--muted); }
/* Die aktuelle Seite bleibt weiss, AUCH wenn sie als Geruest markiert ist.
   Die Regel darueber hat dieselbe Spezifitaet (0,2,1) — sie muss deshalb hier
   stehen und nicht weiter oben, sonst gewinnt Grau auf schwarzer Fuellung
   (#6B7280 auf #000 = 1.8:1). Belegt am 24.08.2026 an 3011. */
.nav-hover.aktuell a,
.nav-hover.aktuell.geruest a { color: #fff; }
.nav-marke {
  margin-left: 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.nav-hover.aktuell .nav-marke { color: #fff; }

/* Jede Stufe rueckt ein; die Linie zeigt, wo man im Baum steht */
.ebene {
  display: none;
  padding-left: 10px;
  margin-left: 9px;
  border-left: 1px solid var(--linie);
}


/* ---- 6 · Hilfetext: Grundtypografie ------------------------------------- */
/* Krume ganz schwarz samt Trenner; der Unterschied ist der Unterstrich.
   Trenner als ::before, damit ein Vorleser ihn nicht mitliest. */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--r4);
  font-size: 15px;
  color: var(--ink);
}
.breadcrumb li + li::before {
  content: '\25B8';
  margin: 0 var(--r1);
  color: var(--ink);
}
/* Die aktuelle Seite ist kein Verweis — Position UND Attribut, doppelt gesichert */
.breadcrumb li:last-child,
.breadcrumb [aria-current="page"] { color: var(--ink); text-decoration: none; }

h1 {
  margin: 0 0 var(--r6);
  font-size: clamp(24px, 2.8vw, 30px);
  font-weight: 700;
  line-height: 1.25;
}

h2 {
  margin: var(--r8) 0 var(--r3);
  font-size: clamp(18px, 2.6vw, 21px);
  font-weight: 700;
  line-height: 1.3;
}
h1 + .block h2 { margin-top: 0; }

.titel h1 { margin-bottom: var(--r4); }
.einleitung { margin-bottom: var(--r5); }
.einleitung p {
  margin: 0 0 var(--r3);
  max-width: 68ch;
}
.einleitung p:last-child { margin-bottom: 0; }


/* ---- 7 · Bloecke -------------------------------------------------------- */
/* Ein Block ist, was Dab_Hilfe_Block ausgibt: <div class="block"> … </div>
   Verweise erben ihre Gestalt aus Abschnitt 2. */

/* Stil 1 «Text» */
.block > p {
  margin: 0 0 var(--r3);
  max-width: 68ch;               /* 110 Zeichen waren zu lang zum Lesen */
}
/* KEIN :last-child — sonst faellt der Abstand zwischen zwei Textbloecken weg */

/* Stil 11 «Text mit Link»; :not([style]) schliesst Stil 16 «Abstand» aus */
.block > div:not([class]):not([style]) {
  margin: 0 0 var(--r3);
  max-width: 68ch;
}

/* Stil 3 und 9 «Listen» */
.block ul,
.block ol {
  margin: 0 0 var(--r3);
  padding-left: var(--r4);
  max-width: 68ch;
}
.block li { margin-bottom: var(--r1); }
.block li:last-child { margin-bottom: 0; }

/* ===== EINE KANTE FUER ALLES, WAS KEIN FLIESSTEXT IST =====================
   Vorher waren es fuenf Breiten, und vier davon waren nicht entschieden,
   sondern entstanden: Text 68ch, Kaesten 74ch, Tabelle gar keine (also 819px),
   Schema 889px. Jetzt zwei: der Fliesstext behaelt sein Lesemass, alles
   andere — Hinweis, Warnung, Tabelle, Bild, Schema — steht LINKSBUENDIG zum
   Text und reicht rechts bis zur Spaltenkante. Damit laeuft links eine
   gerade Linie durch die Seite, rechts eine zweite, und hinter ihr bleibt
   Weiss. (Am 24.08.2026 standen die Kaesten kurz per negativem Rand weiter
   links als der Text — das sah aus, als waeren sie herausgerutscht.) */
.hinweis,
.warnung,
.tabelle,
.glossar,
.symbol,
figure.bild,
figure.schema {
  margin-left: 0;                /* linksbuendig mit dem Fliesstext */
  margin-right: 0;               /* rechts bis zur Spaltenkante, dahinter Weiss */
  max-width: none;
}

/* Stil 10 «Hinweis» und 14 «Warnung» — die Flaeche traegt die Rangfolge */
.hinweis,
.warnung {
  margin-top: var(--r5);
  margin-bottom: var(--r5);
  padding: var(--r3) var(--r4);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--r3);
  align-items: baseline;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.hinweis { background: var(--grau-ton); border-left: 3px solid var(--ink); }
.warnung { background: var(--tint-rot); border-left: 3px solid var(--red); }

.hinweis .marke,
.warnung .marke {
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.hinweis p:last-child,
.warnung p:last-child { margin-bottom: 0; }

/* Stil 25 «SVG Icon» — ein GUI-Zeichen neben dem Absatz, der es nennt.
   Anordnung wie .hinweis, aber OHNE Flaeche und ohne Balken: das Zeichen
   steht so frei wie im Programm. Longin, 31.08.2026 — die Kopfzeile ist
   bewusst ohne Icon-Wald gebaut, jedes sichtbare Zeichen ist praegnant;
   darum kann das Handbuch jedes genannte Zeichen auch zeigen.
   Die Spaltenbreite setzt der Block ({Bild-Style}), hier steht der Rueckfall. */
.symbol {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 var(--r3);
  align-items: start;
  margin: var(--r5) 0;
}
/* Ohne diese Zeile nimmt sich das SVG seine Naturgroesse und sprengt die
   Spalte — gesehen am 31.08.2026, als die Regeln noch fehlten. */
.symbol > svg { width: 100%; height: auto; display: block; }
.symbol p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .symbol { grid-template-columns: 32px 1fr; }
}

/* Stil 12 «Link» und 24 «Link mit Erlaeuterung» — Erlaeuterung sehr kurz halten */
.verweis {
  position: relative;
  padding-left: var(--r3);
  margin-bottom: var(--r2);
  max-width: 68ch;
}
.verweis::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
}
.verweis span { color: var(--muted); }

/* Stil 20 «Mehr zum Thema» */
h2.mehr {
  margin-top: var(--r8);
  padding-top: var(--r3);
  border-top: 1px solid var(--linie);
}

/* Stil 4 «Tabelle» und 22 «Tabelle mit Kopf»
   Raster auf dem Rahmen, Zeile reicht die Zellen mit display:contents durch.
   KEIN --spalten: eine leere Custom Property loescht die Vorgabe (gemessen). */
.tabelle {
  display: grid;
  grid-template-columns: 1fr 2fr;
  margin-top: var(--r5);
  margin-bottom: var(--r5);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.tabelle .zeile { display: contents; }
.tabelle .zeile > div { padding: var(--r2) var(--r3); }
.tabelle .zeile + .zeile > div { border-top: 1px solid var(--linie-fein); }
.tabelle .zeile:nth-child(even) > div { background: var(--zebra); }
.tabelle.kopf .zeile:first-child > div {
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}
.tabelle .zeile:first-child > div { border-top: 0; }

/* Stil 26 «Glossareintrag» — je Begriff EIN Block, die Folge sieht aus wie
   eine Tabelle.
   Warum nicht einfach Stil 22 mit allen Begriffen in einem Block: dann traegt
   der ganze Glossar EINEN AI_Schluessel. Als eigener Block bekommt jeder
   Begriff seinen eigenen — und damit einen Tiefenlink, auf den jede
   Handbuchseite zeigen kann, statt auf «das Glossar».
   Der Renderer wickelt jeden Block in <div class="block">. Ein Raster kann
   darum NICHT ueber mehrere Bloecke laufen — und aus demselben Grund gibt es
   hier weder den Rahmen der Tabelle noch das Zebra: beide brauchen einen
   gemeinsamen Vorfahren, den es nicht gibt. Die feine Oberkante je Zeile
   leistet dasselbe, und die Zeilen wachsen ueber sie zusammen.
   Kein linkes Polster: der Begriff steht buendig zum Fliesstext, wie alles
   andere in Abschnitt 7. */
.glossar {
  display: grid;
  grid-template-columns: 1fr 2fr;
  border-top: 1px solid var(--linie-fein);
}
.glossar .zeile { display: contents; }
.glossar .zeile > div { padding: var(--r2) var(--r3) var(--r2) 0; }
.glossar .zeile > div:first-child { font-weight: 700; }

/* Stil 23 «SVG Schema» — der Schieber sitzt um das Bild, nicht um die Unterschrift */
/* Ein Schema BILDET EINEN BILDSCHIRM AB und muss darum wie eine Aufnahme
   aussehen, nicht wie Text. Rahmen, heller Grund und ein leichter Schlagschatten
   geben ihm die Kante, die der Bildschirmrand in Wirklichkeit hat.
   Und es darf breiter sein als der Fliesstext: der bricht bei 68ch um, das
   Schema nimmt die volle Spaltenbreite. */
/* Das Schema nimmt die VOLLE Spaltenbreite und tritt aus dem Innenabstand des
   Textes heraus. Grund: .hilfetext ist 889px breit, davon gehen 2x35 als
   Polster ab — es blieben 819px, und die Zeichenflaeche fordert 820. Das
   Schema scrollte also schon immer um einen Pixel; mit Rahmen wurden daraus
   sichtbare 29. Mit den negativen Raendern stehen 889px zur Verfuegung.
   KEIN padding auf .schieber — das sitzt im Scroller und verkleinert die
   nutzbare Breite (versucht und zurueckgenommen, 24.08.2026). Die Luft
   gehoert nach innen, auf .flaeche. */
.schema .schieber {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px -3px var(--shadow);
}
.schema .flaeche  { min-width: 700px; padding: var(--r2); }   /* Bild_Style setzt min-width inline */

/* GROESSER NUR ALS GANZES BILD — nie die Schrift im SVG (Longin, 24.08.2026).
   Das Schema ist eine massstaebliche Nachbildung; wuerde man allein die
   Beschriftung hochsetzen, staende sie zu den Bedienelementen in einem
   Verhaeltnis, das es im Programm nicht gibt. Aus der Abbildung wuerde eine
   Zeichnung. Vergroessert wird der ganze Rahmen, der Rest folgt.

   Gemessen: die Zeichnung ist 1184 Einheiten breit und wird in der Spalte auf
   859px dargestellt — Faktor 0.73, die 12.5px-Beschriftung landet bei 9px
   neben 17px Fliesstext. Rechts neben der Textspalte steht Weiss leer; ab
   1520px Fenster darf das Schema es nehmen und zeigt sich in natuerlicher
   Groesse. Der Schwellenwert: Navigation 280 + Bild 1200 = 1480, plus Luft. */
@media (min-width: 1520px) {
  figure.schema { width: 1200px; }
}

/* Klick vergroessert — und zwar das GANZE Bild (Regel A1 der Leitplanken).
   Die Ueberlagerung skaliert nur den Rahmen; Schrift, Symbole und Abstaende
   folgen im selben Verhaeltnis, weil es ein Vektorbild ist.
   Das Verhalten liegt in hilfe.js, hier steht nur, wie es aussieht. */
figure.schema { cursor: zoom-in; }
figure.schema:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

figure.schema.gross {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: auto;                   /* schlaegt die 1200px der Regel darueber */
  margin: 0;
  padding: var(--r5);
  background: rgba(255, 255, 255, .97);
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: zoom-out;
  overflow: auto;
}
figure.schema.gross .schieber {
  border: 0;
  box-shadow: none;
  overflow: visible;
  background: none;
}
figure.schema.gross .flaeche { min-width: 0; padding: 0; }
figure.schema.gross svg {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 84vh;
  margin: 0 auto;
}
figure.schema.gross figcaption {
  max-width: none;
  text-align: center;
  margin-top: var(--r3);
}
.schema svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.schema figcaption {
  margin-top: var(--r2);
  font-size: .88em;
  color: var(--muted);
  max-width: 74ch;               /* sonst laeuft sie breiter als der Text darueber */
}
.schema figcaption:empty { display: none; }

/* Klassen der Schemata hier statt im SVG — eine Korrektur trifft alle auf einmal */
.schema .kopf   { font-size: 15px;   fill: #111; font-weight: 700; }
.schema .hd     { font-size: 12.5px; fill: #111; }
.schema .v      { font-size: 12.5px; fill: #111; }
.schema .vr     { font-size: 12.5px; fill: var(--programm-rot);   font-weight: 700; }
.schema .vg     { font-size: 12.5px; fill: var(--programm-gruen); font-weight: 700; }
.schema .ic     { fill: #111; }
.schema .li     { stroke: #111; stroke-width: 1; fill: none; }
.schema .rahmen { stroke: #111; stroke-width: 2; fill: none; }
/* «inv» muss NACH .hd/.v stehen: in SVG schlaegt CSS das fill-Attribut am
   Element. Ohne diese Klasse wird jede Beschriftung auf dunklem Grund
   schwarz auf schwarz — belegt 24.08.2026 an der Zaehlerblase. */
.schema .inv    { fill: #fff; }

/* Stil 7 «Karte» — als Ganzes anklickbar, darum Schatten statt Strich */
.karte {
  display: flex;
  align-items: center;
  gap: var(--r4);
  margin: var(--r4) 0;
  padding: var(--r3);
  background: var(--card);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 1px 1px 4px var(--shadow);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--mittel), box-shadow var(--mittel), background-color var(--mittel);
}
.karte:hover {
  transform: translateY(-2px);
  box-shadow: 2px 2px 16px var(--shadow);
  background: var(--grau-ton);
  text-decoration: none;
}
.karte h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.karte p  { margin: 0; color: var(--muted); }

/* Stil 8, 13, 15, 21 «Bilder» */
figure.bild { margin-top: var(--r5); margin-bottom: var(--r5); }
figure.bild img {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
figure.bild figcaption {
  margin-top: var(--r2);
  font-size: .88em;
  color: var(--muted);
  max-width: 74ch;
}
figure.bild figcaption:empty { display: none; }   /* sonst ein leerer Kasten je Bild */
figure.bild.links,
figure.bild.rechts {
  display: flex;
  align-items: center;
  gap: var(--r4);
}
figure.bild.rechts { flex-direction: row-reverse; }
figure.bild.links  figcaption,
figure.bild.rechts figcaption {
  margin-top: 0;
  font-size: 1em;
  color: var(--ink);
  flex: 1;
}
figure.bild.unten {
  display: flex;
  flex-direction: column-reverse;   /* Bild oben, Text darunter */
  align-items: flex-start;
}
figure.bild.unten figcaption {
  margin: var(--r2) 0 0;
  font-size: 1em;
  color: var(--ink);
}


/* ---- 8 · Fuss ----------------------------------------------------------- */
/* Am Seitenende, nicht am Bildschirmrand. Beide Klassen absichtlich: die
   Fusszeile kommt aus EINSTELLUNG::Web_Hilfe_Fusszeile und gibt heute noch
   <footer class="cookie"> aus. Ist das Feld umgestellt, kann .cookie weg. */
footer,
.cookie {
  padding: var(--r5) var(--r8);
  background: var(--grau-ton);
  border-top: 1px solid var(--linie);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  flex-shrink: 0;
  position: static;              /* den alten, klebenden Balken zuruecknehmen */
  box-shadow: none;
  text-align: left;
}
footer .zeile,
.cookie .zeile { max-width: 74ch; }
footer .marke,
.cookie .marke { display: block; margin-bottom: var(--r1); }


/* ---- 9 · Handy ---------------------------------------------------------- */
@media (max-width: 900px) {
  header { padding: var(--r3); }

  .suchvorschau {
    position: fixed;
    left: var(--r2);
    right: var(--r2);
    width: auto;
    top: auto;
    max-height: 60vh;
  }

  /* Navigation ueber den Text statt daneben — sonst blieben dem Text 95px */
  .inhalt { display: block; }
  .navigation {
    position: static;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    border-bottom: 1px solid var(--linie);
    padding: var(--r2) var(--r3);
  }
  /* Fingergerechte Ziele */
  .nav-pfeil { padding-top: 11px; padding-bottom: 11px; }
  .nav-hover a div { padding-top: 11px; padding-bottom: 11px; }
  .hilfetext {
    border-left: 0;
    max-width: none;
    padding: var(--r4) var(--r3) var(--r6);
  }

  footer,
  .cookie { padding: var(--r4) var(--r3); }
}

@media (max-width: 600px) {
  body { font-size: 16px; }

  .hinweis,
  .warnung { margin: var(--r4) 0; padding: var(--r3); gap: 0 var(--r2); }

  /* Zweispaltige Tabellen stapeln: Begriff und Erklaerung bleiben ein Paar */
  .tabelle:not(.kopf) { display: block; }
  .tabelle:not(.kopf) .zeile { display: block; padding: var(--r2) var(--r3); }
  .tabelle:not(.kopf) .zeile + .zeile { border-top: 1px solid var(--linie-fein); }
  .tabelle:not(.kopf) .zeile > div { padding: 0; border-top: 0; }
  .tabelle:not(.kopf) .zeile > div:first-child { font-weight: 700; }
  .tabelle:not(.kopf) .zeile:nth-child(even) > div { background: transparent; }
  .tabelle:not(.kopf) .zeile:nth-child(even) { background: var(--zebra); }

  /* Glossareintraege stapeln: Begriff ueber Erklaerung, die Oberkante bleibt */
  .glossar { display: block; }
  .glossar .zeile { display: block; }
  .glossar .zeile > div { padding: 0; }
  .glossar .zeile > div:first-child { padding-top: var(--r2); }
  .glossar .zeile > div:last-child { padding-bottom: var(--r2); }

  /* Tabellen MIT Kopf schieben statt stapeln — sonst verliert die Zelle ihre Spalte */
  .tabelle.kopf { display: block; overflow-x: auto; }
  .tabelle.kopf .zeile {
    display: grid;
    grid-template-columns: inherit;
    min-width: 560px;
  }

  figure.bild.links,
  figure.bild.rechts { flex-direction: column; align-items: flex-start; }
  figure.bild.rechts { flex-direction: column; }
}


/* ---- 10 · Wer keine Bewegung will --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}