/* Die Bausteine — für alle Anwendungen unter tools.upperattic.at.
 *
 * Setzt `tafel.css` voraus und wird nach ihr geladen. Hier steht, was in
 * mehr als einer Anwendung gleich aussieht: der Grundriss der Seite, die
 * Kopfleiste, Felder, Knöpfe, Schalter, Vorschläge, Schirme, der Fuß.
 *
 * Was hier steht, ist die geltende Fassung. Eine Anwendung, die enger baut
 * oder ein Maß anders braucht, überschreibt die einzelne Deklaration in
 * ihrer eigenen Datei und schreibt dazu, warum — sie baut den Baustein nicht
 * ein zweites Mal.
 *
 * `--farbe` ist der Griff, mit dem ein Abschnitt seinen Ton an die Bausteine
 * in ihm weiterreicht: Felder, Auswahlknöpfe und Schalter greifen darauf zu
 * und fallen auf `--primaer` zurück, wo nichts gesetzt ist.
 */

/* ------------------------------------------------------------- Grundlagen */

* { box-sizing: border-box; }

/* `hidden` muss jede eigene Anzeigeart schlagen. Ohne diese Zeile bliebe ein
   verborgener Bereich sichtbar, sobald er `display: grid` oder `flex` trägt —
   die Regel des Browsers ist weniger gewichtig als eine Klassenregel. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 15px/1.5 var(--schrift);
}

h1, h2, h3 { margin: 0; font-weight: 600; }

/* Sichtbarer Fokus, überall und deutlich. Er wird nie entfernt: Wer mit der
   Tastatur arbeitet, muss jederzeit sehen, wo er steht. */
:focus-visible {
  outline: 3px solid var(--primaer);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Was der Vorleser sagt und der Bildschirm nicht zeigt. */
.nur-fuer-vorleser {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------- Kopfleiste */

.kopf {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 20;
}

.kopf__marke { display: flex; align-items: center; gap: 10px; }

/* Das Zeichen der Anwendung — dieselbe `icon.svg`, die auch auf der Übersicht
   in der Karte steht, und in jeder Anwendung 28 px im Quadrat. Die Maße stehen
   hier und nicht am Bild: Ein `<img>` mit `width`/`height` im Markup wüchse
   mit, wenn jemand die Schrift größer stellt; eine Marke soll das nicht.

   `color` gilt der Zeichnung, die `currentColor` verwendet — `gsl` reicht sein
   Zeichen als Daten-Adresse herein und färbt es dort. */
.kopf__zeichen { display: flex; color: var(--ton-app); }
.kopf__zeichen img,
.kopf__zeichen svg { width: 28px; height: 28px; flex: none; }

/* Der Titel trägt den Ton der Anwendung, nicht die Textfarbe: So steht die
   Farbe des Sachgebiets auch dann in der Leiste, wenn das Zeichen daneben
   klein ist. */
.kopf__titel { font-size: 18px; letter-spacing: -0.01em; color: var(--ton-app); }

/* Die Marke als Verweis — `wissen` führt von jeder Seite zurück zur
   Übersicht der Themengruppen. Sie sieht aus wie eine Marke und nicht wie ein
   Verweis; dass sie einer ist, zeigt erst das Überfahren. */
.kopf__marke--verweis { color: inherit; text-decoration: none; }
.kopf__marke--verweis:hover .kopf__titel { text-decoration: underline; }

.kopf__meldung {
  margin: 0;
  flex: 1;
  color: var(--merke);
  font-size: 13px;
}

/* Rückt an den rechten Rand, auch wenn keine Meldezeile davor steht: Ohne
   sie klebten die Schaltflächen sonst an der Marke. */
.kopf__aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* Die Zeile unter dem Titel — was die Anwendung gerade betrifft, nicht wie
   sie heißt: das Gericht bei `rira`, der Zweck bei `ggg`. */
.kopf__unterzeile {
  margin: 0;
  font-size: 12px;
  color: var(--text-leise);
}

/* Ein senkrechter Strich zwischen zwei Gruppen von Schaltflächen. */
.kopf__trenner {
  width: 1px;
  align-self: stretch;
  background: var(--linie);
  margin: 0 4px;
}

/* Die Geschäftszahl, wo sie zum ganzen Fall gehört und die Datei benennt
   (`gh`, `kh`): vor Speichern und Laden, mit einem knappen „GZ“ davor und so
   hoch wie die Zeichenknöpfe daneben, damit die Leiste nicht wächst. */
.kopf__geschaeftszahl { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.kopf__beschriftung { font-size: 12px; font-weight: 600; color: var(--text-leise); }
.kopf__geschaeftszahl > .eingabe { width: 170px; min-height: 34px; padding: 5px 8px; }

/* ---------------------------------------------------- Reiter und Bühnen */

/* Die Reiterleiste hält unterhalb der Kopfleiste. Wie hoch diese ist, kann
   das Stilblatt nicht wissen: Auf einem breiten Bildschirm ist sie einzeilig
   und bricht auf einem schmalen um; eine feste Zahl ließe die Reiter hinter
   ihr verschwinden. Die Anwendung misst nach und schreibt das Ergebnis in
   `--hoehe-kopfleiste` (`rira`: `ui/leistenhoehen.ts`, `ggg`:
   `beobachteKopfhoehe` in `app.js`). Der Rückfallwert gilt nur für den
   Augenblick vor der ersten Messung.

   Zur Tastatur — was das Markup dazu leisten muss: Die Leiste ist eine
   `tablist`, jeder Reiter ein `tab`, jede Bühne ein `tabpanel`. Der Tabulator
   springt in die Leiste hinein und wieder heraus, gewechselt wird innerhalb
   mit den Pfeiltasten. Nur der gewählte Reiter trägt `tabindex="0"`. */
.reiterleiste {
  display: flex;
  gap: 4px;
  padding: 10px 0 0;
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: var(--hoehe-kopfleiste, 61px);
  background: var(--grund);
  z-index: 10;
}

.reiter {
  font: inherit;
  font-weight: 600;
  color: var(--text-leise);
  background: none;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--rundung) var(--rundung) 0 0;
  padding: 8px 18px;
  min-height: var(--tippflaeche);
  cursor: pointer;
}

.reiter:hover { color: var(--primaer); }

/* Der gewählte Reiter steht auf der Fläche und deckt die Trennlinie ab —
   deshalb der negative Rand statt einer zweiten Farbe darüber. */
.reiter--gewaehlt {
  color: var(--primaer);
  background: var(--flaeche);
  border-color: var(--linie);
  margin-bottom: -1px;
  padding-bottom: 9px;
}

.buehne { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }

/* ------------------------------------------------------------------ Felder */

.feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feld--voll   { grid-column: 1 / -1; }
/* Eine Spalte des Rasters — bei zwei Spalten die halbe Breite, bei vieren die
   vierte. Der Name sagt deshalb die Spaltenzahl und nicht den Bruchteil. */
.feld--eins   { grid-column: span 1; }
.feld--schmal { grid-column: span 1; max-width: 200px; }
/* Ein Schalter neben einem Eingabefeld sitzt auf dessen Grundlinie. */
.feld--mit-schalter { justify-content: flex-end; }

/* Zwei zusammengehörige Auswahlreihen nebeneinander. Wird es zu eng, rücken
   sie von selbst untereinander. */
.feld--nebeneinander {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: flex-end;
}
.feld--nebeneinander > .feld { flex: 0 1 auto; }

.feld__beschriftung {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-leise);
}

.feld__hinweis { margin: 0; font-size: 11px; color: var(--text-leise); }

.feld__zeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.feld__zeile > *:first-child { flex: 1; min-width: 0; }

.eingabe {
  width: 100%;
  min-height: var(--tippflaeche);
  padding: 8px 10px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--eingabe-grund);
  color: inherit;
  font: inherit;
}

.eingabe:hover { border-color: var(--farbe, var(--linie-stark)); }
.eingabe:focus { border-color: var(--farbe, var(--primaer)); }

.eingabe--zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* Ein Suchfeld mit ⊗: Die Hülle trägt das Zeichen, das Feld macht ihm rechts
   Platz. Ohne den Freiraum liefe der getippte Text darunter durch. */
.eingabe__huelle { position: relative; display: flex; min-width: 0; }
.eingabe__huelle > .eingabe { flex: 1; min-width: 0; padding-right: 34px; }

.eingabe__loeschen {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-leise);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.eingabe__loeschen:hover { color: var(--fehler); }

/* Knappe Fassungen für Felder in einer Tabellenzeile. */
.eingabe--knapp { min-height: 34px; padding: 5px 8px; }
.eingabe--mehrzeilig { min-height: 0; resize: vertical; line-height: 1.5; }

/* Auswahllisten dürfen nicht über ihre Spalte hinauswachsen. */
select.eingabe { min-width: 0; }

/* ------------------------------------------------ Auswahl als Schaltflächen */

.wahl { display: flex; flex-wrap: wrap; gap: 6px; }

.wahl__knopf {
  min-height: var(--tippflaeche);
  padding: 8px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.wahl__knopf:hover { border-color: var(--farbe); color: var(--farbe); }

/* Die gewählte Möglichkeit ist gefüllt — in der Farbe ihres Abschnitts. */
.wahl__knopf--gewaehlt {
  background: var(--farbe);
  border-color: var(--farbe);
  color: var(--auf-farbe);
  font-weight: 600;
}
.wahl__knopf--gewaehlt:hover { color: var(--auf-farbe); filter: brightness(1.08); }

.wahl--knapp .wahl__knopf { min-height: 34px; padding: 4px 10px; font-size: 13px; }

/* ---------------------------------------------------------- Schalter, Haken */

.schalter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tippflaeche);
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--flaeche);
  color: inherit;
  font: inherit;
  cursor: pointer;
  align-self: start;
}

.schalter__lampe {
  width: 34px; height: 20px;
  border-radius: 10px;
  background: var(--linie-stark);
  position: relative;
  transition: background 120ms;
  flex: none;
}

.schalter__lampe::after {
  content: "";
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 16px;
  border-radius: 50%;
  background: var(--auf-farbe);
  transition: transform 120ms;
}

.schalter--an { border-color: var(--farbe); font-weight: 600; color: var(--farbe); }
.schalter--an .schalter__lampe { background: var(--farbe); }
.schalter--an .schalter__lampe::after { transform: translateX(14px); }

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

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tippflaeche);
  padding: 8px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.knopf:hover { border-color: var(--primaer); color: var(--primaer); }

.knopf--haupt {
  background: var(--primaer);
  border-color: var(--primaer);
  color: var(--auf-farbe);
  font-weight: 600;
}
.knopf--haupt:hover { color: var(--auf-farbe); filter: brightness(1.08); }

.knopf--klein { min-height: 32px; padding: 5px 10px; font-size: 12px; }

/* Eine gesperrte Schaltfläche bleibt lesbar, tritt aber zurück und reagiert
   auch nicht auf das Überfahren — sonst verspräche sie etwas, was sie nicht
   tut. */
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.knopf:disabled:hover { border-color: var(--linie); color: var(--text); }

.knopf--weg {
  min-height: 34px;
  width: 34px;
  padding: 0;
  justify-content: center;
  color: var(--text-leise);
  font-size: 18px;
  line-height: 1;
}
.knopf--weg:hover { color: var(--fehler); border-color: var(--fehler); }

/* Ein Knopf, der nur ein Zeichen trägt — quadratisch und zurückhaltend. Das
   Zeichen steht für sich; was es bedeutet, sagt das Mouseover. */
.knopf--zeichen {
  min-height: 34px;
  width: 34px;
  padding: 0;
  justify-content: center;
  color: var(--text-leise);
  font-size: 18px;
  line-height: 1;
}
.knopf--zeichen:hover { color: var(--primaer); border-color: var(--primaer); }

/* Ein Zeichen neben einer Überschrift, nicht in der Kopfleiste: kleiner, weil
   es sich der Zeile unterordnet, in der es steht. Das Zeichen darin misst
   15 Pixel — siehe `.knopf--klein .ikon`. */
.knopf--zeichen.knopf--klein { min-height: 30px; width: 30px; padding: 0; }

/* Eine Zahl am Zeichen: Sie sagt, ob nachzusehen ist, ohne dass jemand
   nachsieht — und ohne die Leiste zu verbreitern. Steht nichts an, bleibt sie
   weg statt auf null; eine Null wäre eine Meldung, wo keine ist.

   `--auf-farbe` trägt in beiden Fassungen: hell ist `--fehler` ein dunkles
   Rot und die Schrift weiß, dunkel ein helles und die Schrift schwarz. */
.knopf--zeichen { position: relative; }

.knopf__zahl {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--fehler);
  color: var(--auf-farbe);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* `display: flex` schlüge sonst das `hidden`-Attribut, das der Browser mit
   `display: none` beantwortet — die Marke bliebe leer stehen statt zu
   verschwinden. */
.knopf__zahl[hidden] { display: none; }

/* Für Schaltflächen, die etwas unwiederbringlich entfernen. */
.knopf--gefahr { color: var(--fehler); }
.knopf--gefahr:hover { border-color: var(--fehler); color: var(--fehler); }
/* Die Bestätigung einer Rückfrage, die etwas unwiederbringlich entfernt: als
   Hauptknopf eine rote Fläche. Ohne diese Regel stünde roter Text auf der
   Fläche von `--primaer` — kaum lesbar, und nach Gefahr sah es nicht aus. */
.knopf--haupt.knopf--gefahr,
.knopf--haupt.knopf--gefahr:hover {
  background: var(--fehler);
  border-color: var(--fehler);
  color: var(--auf-farbe);
}

/* ------------------------------------------------------------- Die Zeichen */

/* Ein Zeichen ist eine **Maske**, kein Bild: Die Fläche ist `currentColor`,
 * die Zeichnung stanzt sie aus. Damit folgt jedes Zeichen der Farbe seines
 * Knopfes — beim Überfahren wie in der dunklen Fassung. Ein Emoji täte das
 * nicht; es ignoriert `color`, fällt je nach System bunt und verschieden groß
 * aus und ist auf einer Wandprojektion nicht wiederzuerkennen.
 *
 * Die Zeichnungen stehen als Daten-Adresse hier und nicht als Datei daneben:
 * Eine zweite Datei müsste in jede Anwendung kopiert, in jede
 * Dateiliste eingetragen und vom Server geholt werden. So trägt `bausteine.css`
 * sie mit.
 *
 * **Ein Knopf mit Zeichen trägt kein Wort.** Was er tut, sagt `aria-label` —
 * das ist Pflicht, sonst liest der Vorleser eine leere Schaltfläche vor —, und
 * `title` wiederholt es samt Tastenkürzel für die Maus.
 */
.ikon {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask-image: var(--zeichnung);
  mask-image: var(--zeichnung);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Steht das Zeichen neben einem Wort, richtet es sich nach dessen Größe. */
.knopf--klein .ikon { width: 15px; height: 15px; }

/* Speichern ist der Pfeil **nach unten** in eine Ablage — die Datei verlässt
   die Anwendung. Laden ist dagegen der offene Ordner und nicht der Pfeil nach
   oben: Zwei Pfeile nebeneinander unterscheiden sich schlecht, und wer lädt,
   sucht eine Datei. */
.ikon[data-ikon="speichern"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v10'/><path d='m8 9.5 4 4 4-4'/><path d='M4 16v2.5A2.5 2.5 0 0 0 6.5 21h11a2.5 2.5 0 0 0 2.5-2.5V16'/></svg>"); }

.ikon[data-ikon="laden"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.5 10.5V8.5A1.5 1.5 0 0 0 19 7h-8L9 5H4.5A1.5 1.5 0 0 0 3 6.5V18'/><path d='M3 18l2.2-7.1a1.5 1.5 0 0 1 1.43-1.05h14.1a1 1 0 0 1 .96 1.29L19.7 17.9A1.5 1.5 0 0 1 18.26 19H4.5A1.5 1.5 0 0 1 3 17.5z'/></svg>"); }

.ikon[data-ikon="neu"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M13.5 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5z'/><path d='M13.5 3v5.5H19'/><path d='M12 12.5v5'/><path d='M9.5 15h5'/></svg>"); }

/* Zwei Winkel nach links und nach rechts: eine Spalte ein- und ausklappen.
   Sie stehen **an der Spalte**, um die es geht, und nie in der Kopfleiste —
   dort sucht sie niemand (`kveditor`, `wissen`). */
.ikon[data-ikon="einklappen"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M11.5 6.5 6 12l5.5 5.5'/><path d='M18 6.5 12.5 12l5.5 5.5'/></svg>"); }
.ikon[data-ikon="ausklappen"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6.5l5.5 5.5L6 17.5'/><path d='M12.5 6.5 18 12l-5.5 5.5'/></svg>"); }

/* Das Zahnrad ist gefüllt und nicht gestrichelt: Ein Rad aus Strichen wäre bei
   18 Pixeln von der Sonne des Farbschalters nicht zu unterscheiden. Die Nabe
   ist ein Loch — daher `fill-rule='evenodd'`. */
.ikon[data-ikon="einstellungen"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' fill-rule='evenodd' d='M10.69 6.14 L10.69 3.70 L13.31 3.70 L13.31 6.14 A6 6 0 0 1 15.21 6.93 L16.94 5.20 L18.80 7.06 L17.07 8.79 A6 6 0 0 1 17.86 10.69 L20.30 10.69 L20.30 13.31 L17.86 13.31 A6 6 0 0 1 17.07 15.21 L18.80 16.94 L16.94 18.80 L15.21 17.07 A6 6 0 0 1 13.31 17.86 L13.31 20.30 L10.69 20.30 L10.69 17.86 A6 6 0 0 1 8.79 17.07 L7.06 18.80 L5.20 16.94 L6.93 15.21 A6 6 0 0 1 6.14 13.31 L3.70 13.31 L3.70 10.69 L6.14 10.69 A6 6 0 0 1 6.93 8.79 L5.20 7.06 L7.06 5.20 L8.79 6.93 A6 6 0 0 1 10.69 6.14 Z M14.7 12a2.7 2.7 0 1 0-5.4 0 2.7 2.7 0 1 0 5.4 0z'/></svg>"); }

.ikon[data-ikon="leeren"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6.5h16'/><path d='M9.5 6.5V5A1.5 1.5 0 0 1 11 3.5h2A1.5 1.5 0 0 1 14.5 5v1.5'/><path d='m6.5 6.5.9 12.1a2 2 0 0 0 2 1.9h5.2a2 2 0 0 0 2-1.9l.9-12.1'/><path d='M10.3 10.5v6'/><path d='M13.7 10.5v6'/></svg>"); }

.ikon[data-ikon="tabelle"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 5h15a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/><path d='M3.5 9.5h17'/><path d='M3.5 14.5h17'/><path d='M10 5v14'/></svg>"); }

.ikon[data-ikon="dokument"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M13.5 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5z'/><path d='M13.5 3v5.5H19'/><path d='M8.5 13h7'/><path d='M8.5 16.5h4.5'/></svg>"); }

.ikon[data-ikon="pruefung"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 4.5h6v3H9z'/><path d='M9 6H7a1.5 1.5 0 0 0-1.5 1.5v12A1.5 1.5 0 0 0 7 21h10a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 17 6h-2'/><path d='m9 13.8 2.2 2.2 4-4.2'/></svg>"); }

.ikon[data-ikon="stammdaten"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 6h17a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-17a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z'/><circle cx='8.7' cy='11' r='2.1'/><path d='M5.4 16.2a3.4 3.4 0 0 1 6.6 0'/><path d='M14.8 10.2h4.2'/><path d='M14.8 13.6h4.2'/></svg>"); }

/* Das Fragezeichen im Kreis — die Auskunft, in jeder Anwendung derselbe Knopf.
   Es stand bis dahin in vier Anwendungen als blankes Schriftzeichen im Knopf:
   Das fiel je nach Schriftart anders aus und richtete sich nicht nach den
   Maßen der übrigen Zeichen. Der Punkt darunter ist ein Strich der Länge null
   und wird allein durch `stroke-linecap='round'` sichtbar. */
.ikon[data-ikon="hilfe"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.6'/><path d='M9.5 9.4a2.6 2.6 0 0 1 5 0.9c0 1.7-2.6 2.6-2.6 2.6'/><path d='M12 16.3h.01'/></svg>"); }

/* Die drei Fassungen des Farbschalters: Sonne, Mond, halber Kreis. Sie standen
   bis dahin als Zeichenketten in `gemeinsam/thema.js` und noch einmal in
   `gsl` — ein Zeichen gehört dorthin, wo die anderen stehen. */
.ikon[data-ikon="farben-hell"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'><circle cx='12' cy='12' r='4.2'/><path d='M12 2.5v2.6M12 18.9v2.6M2.5 12h2.6M18.9 12h2.6M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M18.7 5.3l-1.8 1.8M7.1 16.9l-1.8 1.8'/></svg>"); }

.ikon[data-ikon="farben-dunkel"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'><path d='M20 14.2A8.4 8.4 0 1 1 9.8 4a6.8 6.8 0 0 0 10.2 10.2z'/></svg>"); }

.ikon[data-ikon="farben-automatisch"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'><circle cx='12' cy='12' r='8.4'/><path d='M12 3.6a8.4 8.4 0 0 1 0 16.8z' fill='black' stroke='none'/></svg>"); }

/* -------------------------------------------------------------- Vorschläge */

.vorschlaege__huelle { position: relative; }

.vorschlaege {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0; right: 0;
  max-height: 280px;
  overflow: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  box-shadow: var(--schatten-schwebend);
}

.vorschlaege__eintrag {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  min-height: var(--tippflaeche);
  justify-content: center;
}

.vorschlaege__eintrag:hover,
.vorschlaege__eintrag--markiert { background: color-mix(in srgb, var(--farbe) 12%, transparent); }

.vorschlaege__text { font-weight: 600; font-size: 13px; }
.vorschlaege__zusatz { font-size: 11px; color: var(--text-leise); }

/* --------------------------------------------------------------- Verweise */

.verweis { color: var(--primaer); font-size: 12px; white-space: nowrap; }

/* Ein Verweis, der nirgendwohin führt, sondern einen Schirm öffnet. Er sieht
   aus wie die daneben, ist aber eine Schaltfläche — ein <a> ohne Ziel wäre für
   die Tastatur keines. Die Unterstreichung kommt sonst vom Browser. */
.verweis--knopf {
  font: inherit;
  font-size: 12px;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* -------------------------------------------------------------------- Fuß */

/* Ein Fuß für alle Seiten. Früher stand er fünfmal da — hier,
   in `seiten.css` am Element `footer`, in `ggg/src/style.css` als
   `.app-footer`, in `gsl/src/stil.css` unter demselben Namen wie hier und
   noch einmal in `landing/index.css`, das die geerbte Fassung überschrieb —
   und sah fünfmal anders aus: vier Schriftgrade, zwei Ausrichtungen, in `ggg`
   ein gefüllter Balken.

   Der Aufbau ist überall derselbe und die Reihenfolge fest:

     1. `.fuss__nachweis`  Name, Fassung, Entwickler — der Wortlaut aus der
                           CLAUDE.md des Dachs, unverändert in jeder Anwendung
     2. `.fuss__nachweis`  der Weg zurück zur Übersicht
     3. `.fuss__leise`     was allein diese Anwendung betrifft (entfällt, wo es
                           nichts gibt)
     4. `.fuss__dank`      der Dank an Menschen (ebenso)
*/

.fuss {
  margin-top: 32px;
  padding: 16px 20px 24px;
  border-top: 1px solid var(--linie);
  text-align: center;
  font-size: 12px;
  color: var(--text-leise);
}

.fuss__nachweis { margin: 0 0 6px; }

/* Haftung, Lizenz, der Hinweis, dass keine Daten das Gerät verlassen. */
.fuss__leise { margin: 0 0 6px; opacity: 0.8; }

/* Der Dank an Menschen — ein eigener Absatz mit eigenem Namen, damit ihn keine
   Umstellung der Zeilen darüber je mitnimmt. Er steht zuletzt. */
.fuss__dank { margin: 0 0 6px; opacity: 0.8; }

.fuss > :last-child { margin-bottom: 0; }

.fuss__verweis { color: var(--merke); text-decoration: none; }
.fuss__verweis:hover, .fuss__verweis:focus-visible { text-decoration: underline; }

/* Die Versionsnummer im Nachweissatz, wo es eine Versionsgeschichte gibt: ein
   Knopf, weil ein Schirm aufgeht und keine Adresse angesteuert wird — aber im
   Satz stehend und deshalb ohne alles, was einen Knopf ausmacht. */
button.fuss__verweis {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

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

.schirm {
  border: 0;
  border-radius: var(--rundung);
  padding: 0;
  background: var(--flaeche);
  color: var(--text);
  box-shadow: var(--schatten-schirm);
  max-height: 88vh;
  width: min(96vw, 1100px);
  /* Innerhalb eines Schirms führt die Grundfarbe. */
  --farbe: var(--primaer);
}

.schirm--schmal { width: min(96vw, 720px); }
/* Ältere Browser vererben nichts an `::backdrop`; dann gilt der Ersatzwert. */
.schirm::backdrop { background: var(--schleier, rgb(16 24 32 / 45%)); }

.schirm__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--linie);
}

.schirm__titel { font-size: 16px; }

.schirm__inhalt {
  padding: 16px;
  overflow: auto;
  max-height: calc(88vh - 130px);
}

.schirm__fuss {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--linie);
}

/* --------------------------------------------------------------- Masken */

.maske__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: end;
}

.maske__schalter { display: flex; flex-wrap: wrap; gap: 8px 12px; }

/* Die Maske zerfällt in Gruppen; die zweite setzt sich mit einer Linie ab. */
.maske__gruppen { display: flex; flex-direction: column; gap: 20px; }

.maske__gruppe + .maske__gruppe {
  border-top: 1px solid var(--linie);
  padding-top: 20px;
}

.maske__gruppentitel {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--farbe);
  margin-bottom: 10px;
}

/* -------------------------------------------------------------- Infoseite */

.info__text { margin: 0 0 10px; max-width: 62ch; }
.info__text:last-child { margin-bottom: 0; }

/* Einzelheiten unter einem Text — etwa der Befund eines Einlesevorgangs. */
.info__liste { margin: 0; padding-left: 20px; max-width: 62ch; }
.info__liste li { margin: 0 0 4px; }
.info__liste li:last-child { margin-bottom: 0; }

/* `info__tabelle`, `info__taste` und deren `kbd` standen hier bis September
   2026 für die Kürzeltabellen von `gh` und `rira`. Beide holen ihre Hilfe
   seither aus `doku/HILFE.md`; die Tabelle setzt `hilfe-lesen.mjs` und
   gestaltet der Abschnitt „Die Hilfe“. */

/* ---------------------------------------------------------------- Die Hilfe */

/* Der Text entsteht zur Bauzeit aus `doku/HILFE.md`; die Klassen setzt
   `gemeinsam/tools/hilfe-lesen.mjs`. Hier steht, wie er aussieht — einmal für
   alle, im Schirm.

   Zwei Formen: `hilfe--kurz` ist Fließtext, `hilfe--lang` stellt links eine
   Sprungliste daneben. Welche gilt, entscheidet die Wortzahl und nicht die
   Anwendung. */

.hilfe { max-width: 100%; }

.hilfe p, .hilfe__liste { margin: 0 0 10px; max-width: 68ch; }
.hilfe p:last-child, .hilfe__liste:last-child { margin-bottom: 0; }
.hilfe__liste { padding-left: 20px; }
.hilfe__liste--gezaehlt { padding-left: 24px; }
.hilfe__liste li { margin: 0 0 4px; }

.hilfe__abschnitt + .hilfe__abschnitt { margin-top: 22px; }
/* Das Sprungziel trägt `tabindex="-1"`; ein Fokusrahmen um einen ganzen
   Abschnitt wäre lauter als der Sprung selbst. */
.hilfe__abschnitt:focus { outline: none; }

.hilfe__titel {
  font-size: 15px;
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--linie);
  color: var(--farbe);
}

.hilfe__untertitel { font-size: 13px; margin: 16px 0 6px; }

/* Der Hinweis, der aus dem Text heraussticht — in der Quelle ein Blockzitat.
   Bei `pseudo` steht so die Warnung, dass die Ausgabe ein Vorschlag ist und
   kein Ergebnis; sie ist der wichtigste Satz jener Anwendung. */
.hilfe__hinweis {
  padding: 10px 12px;
  border-left: 3px solid var(--farbe);
  border-radius: 0 6px 6px 0;
  background: var(--grund);
}

.hilfe__verweis { color: var(--merke); }

.hilfe__tabelle { border-collapse: collapse; margin: 0 0 12px; }
.hilfe__tabelle th { text-align: left; padding: 4px 14px 6px 0; font-size: 12px; color: var(--text-leise); }
.hilfe__tabelle td { padding: 4px 14px 4px 0; vertical-align: baseline; }
.hilfe__tabelle--kuerzel td:first-child { white-space: nowrap; }

.hilfe kbd {
  font: 12px var(--schrift);
  border: 1px solid var(--linie-stark);
  border-radius: 4px;
  padding: 2px 6px;
  background: var(--grund);
}

/* Die lange Form: Sprungliste links, Text rechts. Fünfzehn Abschnitte sind zu
   viel zum Rollen — wer das Einlesen sucht, soll nicht am Datenschutz
   vorbeikommen. */
.hilfe--lang { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 24px; }

.hilfe__wegweiser { position: sticky; top: 0; align-self: start; }

.hilfe__sprungliste { list-style: none; margin: 0; padding: 0; }
.hilfe__sprungliste li { margin: 0 0 2px; }

.hilfe__sprung {
  display: block;
  width: 100%;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}

.hilfe__sprung:hover, .hilfe__sprung:focus-visible {
  background: var(--grund);
  color: var(--farbe);
}

/* Auf schmalem Fenster steht die Sprungliste über dem Text und nicht daneben:
   Zwei Spalten zu je zwanzig Zeichen wären keine. */
@media (max-width: 700px) {
  .hilfe--lang { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hilfe__wegweiser { position: static; }
}

/* ------------------------------------------------------------- Rücksichten */

/* Wer Bewegung abbestellt hat, bekommt keine. Der Druckbereich steht in der
   Anwendung: Was auf dem Papier wegfällt, weiß nur sie. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}