/* ── Schriftbild und Groesse (09.10.2026) ─────────────────────────────────
 *
 * Manchen Mitarbeitern fiel das Lesen schwer: kleine, gesperrte
 * Grossbuchstaben in Schreibmaschinenschrift (DM Mono) als Beschriftung, dazu
 * viel 11-12 px. Jeder kann jetzt am "Aa"-Knopf in der Kopfzeile sein eigenes
 * Schriftbild und eine Groesse waehlen -- je Geraet, wie Hell/Dunkel.
 *
 * WIE ES WIRKT. Die Seiten nennen keine Schrift mehr direkt, sondern
 *   var(--schrift-text,  'DM Sans',sans-serif)   Fliesstext, Felder, Knoepfe
 *   var(--schrift-daten, 'DM Mono',monospace)    Zahlen, Kuerzel, Datum
 *   var(--schrift-titel, 'Syne',sans-serif)      Ueberschriften
 *   var(--schrift-label, 'DM Mono',monospace)    kleine Beschriftungen
 * und bei Beschriftungen zusaetzlich --label-case, --label-sperrung,
 * --label-gross. Der Rueckfall in jeder var() ist das heutige Aussehen:
 * "Standard" setzt hier gar nichts. Fehlt diese Datei, sieht alles aus wie
 * vorher.
 *
 * Gesetzt wird per Attribut am <html> (schriftbild.js, noch im <head>, damit
 * nichts aufblitzt). Die Selektoren gelten fuer JEDES Element mit dem
 * Attribut -- so zeigt die Musterseite (/schriften/) mehrere nebeneinander.
 */

/* Ausdruecklich "Standard" -- nur fuer Elemente INNERHALB einer Seite mit
   anderem Schriftbild (Vorschau im Fenster, Spalte der Musterseite). Am
   <html> steht das Attribut bei Standard gar nicht. */
[data-schrift="standard"] {
  --schrift-text:  'DM Sans', sans-serif;
  --schrift-label: 'DM Mono', monospace;
  --schrift-titel: 'Syne', sans-serif;
  --schrift-daten: 'DM Mono', monospace;
  --label-case: uppercase;
  --label-sperrung: initial;
  --label-gross: 1;
}

[data-schrift="klar"] {
  --schrift-text:  'Atkinson Hyperlegible Next', 'Segoe UI', sans-serif;
  --schrift-label: 'Atkinson Hyperlegible Next', 'Segoe UI', sans-serif;
  --schrift-titel: 'Atkinson Hyperlegible Next', 'Segoe UI', sans-serif;
  /* Auch Zahlen, Kuerzel und Knoepfe (heute DM Mono) in der Leseschrift:
     Atkinson unterscheidet I/l/1 und O/0 ohne Schreibmaschine. */
  --schrift-daten: 'Atkinson Hyperlegible Next', 'Segoe UI', sans-serif;
  --label-case: none;
  --label-sperrung: 0;
  --label-gross: 1.22;
}

[data-schrift="windows"] {
  --schrift-text:  'Segoe UI', 'Segoe UI Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --schrift-label: 'Segoe UI', 'Segoe UI Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --schrift-titel: 'Segoe UI', 'Segoe UI Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --schrift-daten: 'Segoe UI', 'Segoe UI Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --label-case: none;
  --label-sperrung: 0;
  --label-gross: 1.2;
}

/* Groesse: alles gleichmaessig, Abstaende eingeschlossen. Die Seiten rechnen
   in px -- eine Schriftgroesse am <html> allein wuerde nur die Haelfte
   treffen. zoom haelt Koordinaten (Klick im Plan, Tonspur) in Chromium,
   Edge und Safari stimmig. */
html[data-schrift-groesse="gross"] body     { zoom: 1.12; }
html[data-schrift-groesse="sehrgross"] body { zoom: 1.25; }

/* ── Der "Aa"-Knopf und sein Fenster ─────────────────────────────────── */
.sb-huelle { position: relative; display: inline-flex; }
.sb-knopf {
  font-family: var(--schrift-text, 'DM Sans', sans-serif);
  font-size: 13px; font-weight: 600; line-height: 1;
  padding: 6px 10px; border-radius: 99px; cursor: pointer;
  background: var(--surface); color: var(--text2, var(--text)); border: 1px solid var(--border2);
}
.sb-knopf:hover, .sb-knopf.offen { color: var(--text); border-color: var(--accent); }

.sb-fenster {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 300; width: 300px;
  background: var(--bg2, var(--surface)); color: var(--text);
  border: 1px solid var(--border2); border-radius: 12px; padding: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
  font-family: var(--schrift-text, 'DM Sans', sans-serif); font-size: 13px;
}
.sb-fenster[hidden] { display: none; }
.sb-fenster h4 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.sb-fenster .sb-teil { font-size: 12px; color: var(--text2); margin: 12px 0 6px; }
.sb-wahl { display: flex; flex-direction: column; gap: 6px; }
.sb-wahl.reihe { flex-direction: row; }
.sb-wahl button {
  text-align: left; cursor: pointer; border-radius: 8px; padding: 8px 10px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border2);
  font-size: 14px;
}
.sb-wahl.reihe button { flex: 1; text-align: center; font-size: 13px; padding: 7px 4px; }
.sb-wahl button.an { border-color: var(--accent); background: var(--adim); color: var(--accent); }
.sb-wahl button small { display: block; font-size: 11.5px; color: var(--text2); margin-top: 2px; }
.sb-wahl button.an small { color: inherit; opacity: .85; }
.sb-fenster a.sb-vergleich { display: block; margin-top: 12px; color: var(--accent); text-decoration: none; font-size: 12.5px; }
.sb-fenster a.sb-vergleich:hover { text-decoration: underline; }

/* Einmaliger Hinweis "Neu" am Knopf */
.sb-blase {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 290; width: 220px;
  background: var(--accent); color: #1a1205; border-radius: 10px; padding: 9px 30px 9px 12px;
  font-family: var(--schrift-text, 'DM Sans', sans-serif); font-size: 12.5px; line-height: 1.4;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3); cursor: pointer;
}
.sb-blase::before {
  content: ''; position: absolute; top: -6px; right: 18px; width: 12px; height: 12px;
  background: var(--accent); transform: rotate(45deg);
}
.sb-blase .sb-zu { position: absolute; top: 4px; right: 8px; font-size: 15px; opacity: .7; }