/*
 * futurino, Gestaltung. Angelegt 06.09.2026 in Etappe 0, erweitert in Etappe 1.
 *
 * Drei Entscheide, die hier festgelegt sind:
 *
 * 1. Helle Darstellung zuerst, dunkle über prefers-color-scheme. Alle Farben
 *    stehen als Variablen in :root und werden im dunklen Block ersetzt. Bei
 *    ready standen zwei Stellen mit derselben Farbwahl nebeneinander, die eine
 *    Hälfte der Seite war dunkel, die andere hell, und kein Prüfwerkzeug hat
 *    es bemerkt. Eine einzige Quelle verhindert das.
 *
 * 2. Keine eingebetteten Stilangaben in der Seite und keine externen Schriften.
 *    Die Inhaltsrichtlinie in .htaccess erlaubt nur 'self'; damit läuft die
 *    Anwendung ohne unsafe-inline und ohne fremde Server.
 *
 * 3. Die Vergleichsansicht ist ein Raster aus Karten und keine Tabelle.
 *    UI-PRI-010 verlangt, dass die Tabelle bei kleiner Breite zu Optionskarten
 *    wird und die Inhalte identisch bleiben. Zwei Darstellungen desselben
 *    Inhalts wären eine Doppelführung; ein Raster, das je nach Breite ein- oder
 *    mehrspaltig steht, ist dieselbe Darstellung in zwei Formaten.
 *
 * Drei Formate über die Fensterbreite, Bauplan Abschnitt 1: bis 700 Punkte
 * Handy, bis 1024 Tablet, darüber gross.
 */

:root {
  --grund: #f7f7f5;
  --karte: #ffffff;
  /*
   * SCHWARZ HEISST SCHWARZ. Geändert am 06.09.2026 auf Markus' Befund «Der
   * normale Text wirkt sehr grau. Mach diesen richtig schwarz, überall.»
   * Vorher stand hier #1d1d1b für den Fliesstext und #5a5a55 für alles
   * Erklärende. Das zweite ergab auf dem hellen Grund ein Verhältnis von
   * 6,4 zu 1: nach der Zugänglichkeitsnorm zulässig, auf einem hellen
   * Bildschirm bei Tageslicht trotzdem blass. Wer eine Erklärung schreibt und
   * sie dann ausgraut, nimmt sie halb zurück.
   * Jetzt: reines Schwarz für den Fliesstext, #3a3a35 für Nebenangaben, was
   * gemessen 10,4 zu 1 ergibt. pruefe_oberflaeche.py rechnet beide Werte im
   * Browser nach, in heller und in dunkler Darstellung.
   */
  --schrift: #000000;
  --schrift-leise: #3a3a35;
  --linie: #dcdcd6;
  --akzent: #2f5d50;
  /*
   * AKZENTTEXT AUF EINER KARTE, seit 1.0.0.
   *
   * In der hellen Darstellung ist es dieselbe Farbe; auf Weiss trägt sie
   * 7,5 zu 1. In der dunklen braucht es einen helleren Ton, und der Grund
   * ist die Karte: Auf dem Seitengrund erreicht der Akzent 6,9 zu 1, auf der
   * etwas helleren Karte nur noch 6,1. **Ein Kontrast gilt gegen den Grund,
   * auf dem der Text wirklich steht**, und nicht gegen den der Seite.
   *
   * Aufgefallen ist das erst, als die Ablage auf die Startseite zog und
   * aufnahme_werkzeug.py ihre Zeilen zum ersten Mal in der dunklen
   * Darstellung mass.
   */
  --akzent-text: #2f5d50;
  /* Die blasse Akzentfläche, seit 0.35.0. Sie markiert eine getroffene Wahl,
     ohne dass daraus eine Handlung wird; der Text darauf bleibt die normale
     Schriftfarbe, damit der Kontrast nicht an der Fläche hängt. */
  --akzent-blass: #e6efeb;
  --akzent-schrift: #ffffff;
  /*
   * DER ZWEITE, DEZENTE TON, seit 0.72.0.
   *
   * Markus am 14.09.2026: «Dass die Entscheidungsfrage und die
   * Gruppen/Alleine-Aussage fast zusammenkleben in hellgrün ist
   * optisch/grafisch unschön. Evtl. braucht es noch eine weitere, dezente
   * Farbe, um genügend Übersicht zu schaffen.»
   *
   * Bis 0.71.0 trugen beide dieselbe blasse Akzentfläche und einen Balken in
   * derselben Farbe, standen ohne Abstand übereinander und sahen aus wie ein
   * einziger grüner Block mit zwei Zeilen. Sie sagen aber Verschiedenes: Die
   * Frage ist der Gegenstand, die Arbeitsweise die Bedingung, unter der an
   * ihm gearbeitet wird.
   *
   * Das Grau-Blau ist bewusst kühl und kein zweites Grün: Zwei Töne
   * derselben Familie unterscheiden sich für viele Augen nicht. Es trägt
   * keine Bedeutung wie «gut» oder «Warnung», sondern nur die Trennung.
   */
  --weise-grund: #eef1f4;
  --weise-linie: #7c8a99;
  --weise-marke: #3f4d5a;
  --warnung: #8a3324;
  /* #285c32 statt #2f6b3a: Der alte Grünton trug die Meldung «Erinnerung
     gesetzt» nur mit 6,4 zu 1. Aufgefallen am 07.09.2026, als die
     Kontrastmessung erstmals auf einer Ergebnisansicht mit gesetzter
     Erinnerung lief. Jetzt sind es 7,9 zu 1 auf der Karte. */
  --gut: #285c32;
  --dafuer: #285c32;
  --dagegen: #8a3324;
  /* #574a26 statt #6b5a2f: Der alte Ockerton trug den Satz über eine ungeklärte
     Zulässigkeit nur mit 6,7 zu 1. Aufgefallen erst, als die Kontrastmessung
     auf jeder Ansicht lief und nicht nur auf der zuletzt geöffneten. */
  --offen: #574a26;
  --rundung: 10px;
  /* Die Wortmarke, seit 0.44.0. Sie steht als Variable, weil die Farbwahl in
     futurino vollständig über Variablen läuft; damit gilt sie auch bei der
     ausdrücklichen Wahl «immer dunkel» und nicht nur bei der Einstellung des
     Geräts. */
  --marke: url("bilder/futurino-logo.png");
  /* Die Fläche unter einer angefassten Blätterfläche an der Wand, seit
     0.30.0. In der dunklen Farbwahl wird sie zur Aufhellung. */
  --wandpfeil-flaeche: rgba(0, 0, 0, 0.06);

  /*
   * DIE FARBEN DER OPTIONEN, seit 0.7.4.
   *
   * Markus am 06.09.2026: «Das ist ein bisschen eine Textwüste. Könntest du
   * nicht für jede Option eine andere Farbe nehmen? Aber natürlich für Option A
   * immer die gleiche Farbe, stringent durch alles hindurch?»
   *
   * Vier Entscheide dahinter:
   *
   * 1. Die Farbe ist nie die einzige Information. Neben ihr steht immer der
   *    Buchstabe A bis E. Rund acht Prozent der Männer sehen Rot und Grün nicht
   *    auseinander, und eine Anwendung, die einen Entscheid trägt, darf sich
   *    nicht auf ein Sinnesorgan verlassen.
   * 2. Farbig ist die Marke und der Streifen, nie der Fliesstext. Farbiger Text
   *    verliert Kontrast, und der Kontrast ist hier gemessen und nicht geschätzt.
   *    Weisse Schrift auf diesen fünf Tönen trägt zwischen 8,1 und 10,5 zu 1.
   * 3. Kein Grün und kein Rot. Grün ist der Akzent und heisst «dafür», Rot ist
   *    die Warnung und heisst «dagegen». Eine Option in Rot sähe aus wie eine
   *    schlechte Option, und futurino bewertet keine Option (EQ-010).
   * 4. Die Farbe hängt an der Stelle in der Liste, nicht an der Kennung. Wer
   *    die zweite Option löscht, rückt die dritte auf B nach. Das entspricht
   *    dem, was daneben steht: «Option 1», «Option 2».
   */
  --option-a: #123f7a;
  --option-b: #6b4a05;
  --option-c: #5a2a72;
  --option-d: #0d4f52;
  --option-e: #7a2e1a;
  --option-schrift: #ffffff;
}

/* ====================================================================
 * DIE DUNKLE FASSUNG, und wie sie sich überstimmen lässt (seit 0.39.0)
 *
 * Die Werte stehen HIER und nur hier. Darunter steht eine erzeugte Kopie
 * für den Fall, dass jemand in den Einstellungen «immer dunkel» gewählt hat;
 * sie schreibt pruefwerkzeuge/farbwahl-erzeugen.php, und
 * pruefe_einstellungen.php misst, dass beide Blöcke übereinstimmen.
 *
 * Warum überhaupt eine Überstimmung: Wer vor einer Gruppe steht und am
 * Beamer hängt, will hell, ganz gleich, was sein Gerät meint.
 *
 * Das Attribut data-farbe setzt app.js, und zwar nur auf index.html. Die
 * Teilnehmerseite, die Wand und der Bericht behalten damit das Gerät als
 * Massgabe; sie gehören anderen Leuten, und die Einstellung eines Kontos
 * hat auf deren Bildschirmen nichts zu suchen.
 * ==================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-farbe="hell"]) {
    --grund: #17181a;
    --karte: #212327;
    --schrift: #ffffff;
    --schrift-leise: #cdcdc7;
    --linie: #3a3d42;
    --akzent: #6fae9b;
    /* Akzenttext auf einer Karte, seit 1.0.0: heller als der Akzent, weil
       die Karte heller ist als der Seitengrund. 8,0 zu 1 auf der Karte. */
    --akzent-text: #8ac4b2;
    /* Dunkle Fassung der blassen Akzentfläche. Sie hebt sich von der Karte
       ab, ohne die Schrift darauf zu verdunkeln. */
    --akzent-blass: #23332e;
    /* Schwarz statt #10201c: Der dunkle Grünton trug den Text nur mit 6,6 zu 1,
       gemessen von pruefe_oberflaeche.py am 06.09.2026. Mit Schwarz sind es
       8,1 zu 1. Betrifft die Knöpfe und den aktuellen Schritt im Weg oben. */
    --akzent-schrift: #000000;
    /* Der zweite, dezente Ton in der dunklen Fassung, seit 0.72.0. Kühl und
       eine Spur heller als die Karte, damit das Band sich abhebt, ohne zu
       leuchten. */
    --weise-grund: #262c33;
    --weise-linie: #7f909f;
    --weise-marke: #a8bac9;
    /* Heller als vorher (#e28b7d): auf der dunklen Karte waren es 6,2 zu 1. */
    --warnung: #eda093;
    --gut: #8bc79a;
    --dafuer: #8bc79a;
    --dagegen: #eda093;
    --offen: #d8c48a;
    /* Hell auf dunklem Grund, mit schwarzer Schrift: 10,5 bis 12,1 zu 1. */
    --option-a: #9dc4f5;
    --option-b: #e2c07a;
    --option-c: #d3a9e8;
    --option-d: #7fcfd2;
    --marke: url("bilder/futurino-logo-dunkel.png");
    --option-e: #f0a58f;
    --option-schrift: #000000;
    /* Die Fläche unter einer angefassten Blätterfläche. Schwarz auf Schwarz
       wäre nichts; hier braucht es Aufhellung statt Abdunklung. */
    --wandpfeil-flaeche: rgba(255, 255, 255, 0.10);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 16px 48px;
  background: var(--grund);
  color: var(--schrift);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

.kopf {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 0 12px;
}

.kopf h1 {
  margin: 0;
  font-size: 30px;
  letter-spacing: 0.01em;
}

/*
 * Die Wortmarke, seit 0.44.0.
 *
 * Die Höhe bestimmt die Grösse, die Breite folgt dem Seitenverhältnis der
 * Datei (354 zu 120). So bleibt die Marke scharf und verzerrt nie, auch wenn
 * eine spätere Datei andere Masse hat.
 */
.marke {
  line-height: 0;
}

/*
 * Die Marke als Knopf, seit 0.47.0.
 *
 * Ohne Rahmen und ohne Fläche: Er soll aussehen wie das Logo und nicht wie
 * ein Knopf, denn was er tut, ist auf jeder Website dasselbe und muss nicht
 * erklärt werden. Der Zeiger und der Umriss beim Tabbing sagen, dass er
 * anklickbar ist.
 *
 * Die vierundvierzig Punkte Höhe kommen aus dem Innenabstand und nicht aus
 * dem Bild. Das Bild bleibt bei vierunddreissig, weil es sonst den Kopf
 * auseinanderschöbe; die Fläche darunter ist trotzdem gross genug für einen
 * Daumen. pruefe_ansichten.py misst das.
 */
/* Seit 1.0.2 ein Verweis und kein Knopf. Die Regeln bleiben, damit die
   Marke aussieht wie zuvor; dazu kommt, was ein Verweis von sich aus
   mitbringt und hier nicht erwünscht ist: die Unterstreichung. */
.markenknopf {
  display: block;
  min-height: 44px;
  padding: 5px 0;
  margin: 0;
  font: inherit;
  line-height: 0;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: var(--rundung);
  text-decoration: none;
}

.markenknopf:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

/* Beim Darüberfahren nur ein Hauch, damit es nicht nach Knopf aussieht und
   trotzdem antwortet. */
.markenknopf:hover .markenbild {
  opacity: 0.8;
}

.markenbild {
  display: inline-block;
  height: 34px;
  aspect-ratio: 354 / 120;
  background-image: var(--marke);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

@media (max-width: 480px) {
  .markenbild { height: 28px; }
}

/* Der Abstand unten ist seit 0.49.0 doppelt so gross. Markus am 12.09.2026:
   «Verdopple den Abstand nach ‹Was morgen zählt›.» Der Slogan hing zu nah an
   der Kontozeile und las sich wie deren Überschrift. */
.unterzeile {
  margin: 4px 0 16px;
  /* Erklärender Text, kein Beiwerk. Seit 06.09.2026 schwarz wie der Rest. */
  color: var(--schrift);
  font-size: 15px;
}

main {
  max-width: 900px;
  margin: 0 auto;
}

/*
 * VERSTECKT HEISST VERSTECKT.
 *
 * Gefunden am 06.09.2026 beim Ansehen der Aufnahmen zu Etappe 3: Der Weg oben
 * blieb sichtbar, obwohl app.js ihn auf hidden setzte. Grund ist die Regel
 * darunter: «.weg { display: flex }» ist eine Autorenregel und schlägt das
 * display:none, das der Browser dem Attribut hidden mitgibt. Der Fehler war
 * seit Etappe 1 da und ist niemandem aufgefallen, weil ein sichtbarer Weg
 * harmlos aussieht.
 *
 * Diese eine Zeile schliesst die ganze Fehlerklasse. Sie steht bewusst weit
 * oben, damit jede spätere display-Regel sie nicht mehr aushebeln kann.
 */
[hidden] {
  display: none !important;
}

/* ---------------- Hinweis auf die Erprobungsfassung ---------------- */

/*
 * Er soll auffallen und nicht schreien. Deshalb ein farbiger Streifen links
 * statt einer vollen Warnfläche: Wer futurino täglich benutzt, soll den
 * Hinweis lesen können, ohne ihn nach der dritten Sitzung zu hassen.
 */
/* .band trägt dieselbe Optik wie der frühere Erprobungshinweis und heisst
   anders, weil es etwas anderes sagt. Die Klasse zweimal zu vergeben kostete
   am 06.09.2026 einen Prüflauf: Ein Werkzeug suchte «.erprobung» und fand
   plötzlich zwei Elemente.

   .erprobung ist am 13.09.2026 aus dieser Regel gefallen, weil das Band oben
   weg ist; eine Regel ohne Element sieht aus, als täte sie etwas. Die
   Warnung im Fuss trägt jetzt .erprobungsfuss und eine eigene, leisere
   Optik. */
.band {
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--offen);
  border-radius: var(--rundung);
  background: var(--karte);
  /* Der Hinweis auf die Erprobungsfassung soll auffallen, nicht verblassen. */
  color: var(--schrift);
  font-size: 15px;
  line-height: 1.5;
}

.band strong { color: var(--schrift); }

/*
 * DIE WARNUNG IM FUSS, seit 0.52.0.
 *
 * Sie hat den Wortlaut und die Optik, die bis 0.51.0 unten auf der
 * Begrüssung standen (.willkommen-fuss), und steht jetzt auf jeder Ansicht.
 * Leise, aber lesbar: Der Fuss ist der ruhigste Ort der Seite, und eine
 * Warnfläche mit farbigem Streifen wäre dort ein Fremdkörper. Das fette
 * erste Wort trägt die Aufmerksamkeit.
 */
.erprobungsfuss {
  color: var(--schrift-leise);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 12px;
}

.erprobungsfuss strong { color: var(--schrift); }


/* ---------------- Die Sitzung als Ebene, 0.17.0 (G-36) ---------------- *
 *
 * Das Band steht über allen Ansichten und sagt in einer Zeile, dass dieser
 * Entscheid nicht allein gefasst wird. Es sieht bewusst anders aus als der
 * Weg darunter: Der Weg zeigt, wo man in der Strecke steht; das Band steht
 * quer dazu und gehört zu keinem Schritt.
 *
 * Zwei Zustände, zwei Farben. Solange keine Sitzung läuft, ist es ein leises
 * Angebot in der Linienfarbe. Läuft eine, trägt es den Akzent und einen
 * gefüllten Punkt: Wer vor einer Gruppe steht, muss auf einen Blick sehen,
 * dass gerade Leute mitschreiben.
 */
.sitzungsband {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
  padding: 10px 16px;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--karte);
  font-size: 15px;
  color: var(--schrift-leise);
}

.sitzungsband.laeuft {
  border-left-color: var(--akzent);
  color: var(--schrift);
}

/*
 * Die zweite Zeile mit dem Weg hinein, seit 0.21.2. Sie bricht die Flexzeile
 * um (flex-basis 100 Prozent), damit sie unter dem Zustand steht und nicht
 * daneben: Der Zustand ist die Auskunft, der Weg hinein die Anweisung, und
 * zwei Sätze nebeneinander liest niemand als zwei Sätze.
 */
.sitzungsbandbeitritt {
  flex: 1 0 100%;
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
}

.sitzungsbandbeitritt .linktext {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sitzungsbandbeitritt .bandcode {
  font-weight: 700;
  letter-spacing: 0.05em;
}

.sitzungspunkt {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border: 2px solid var(--schrift-leise);
  border-radius: 50%;
  background: transparent;
}

.sitzungspunkt.gefuellt {
  border-color: var(--akzent);
  background: var(--akzent);
}

.sitzungsbandtext {
  flex: 1 1 auto;
  min-width: 180px;
}

/* Das Steuerpult ist die frühere Sitzungskarte. Es steht ausserhalb der
   Ansichten, weil es zu keiner gehört, und ist zugeklappt, bis jemand es
   öffnet. */
.steuerpult {
  margin-top: 12px;
}

/*
 * Die zuklappbare Karte, seit 0.19.0. Der Zusammenzug sitzt auf der
 * Überschrift, damit die ganze Zeile anklickbar ist und nicht nur das kleine
 * Dreieck; auf einem Handy trifft niemand ein Dreieck.
 */
details.karte > summary {
  cursor: pointer;
  list-style-position: outside;
}

details.karte > summary h3 {
  display: inline;
  margin: 0;
}

/* Der Zählerstand steht im Zusammenzug, also unter der Überschrift und nicht
   neben ihr. Ohne diese Zeile klebte er als Fliesstext an den Titel. */
details.karte > summary > p {
  margin: 6px 0 0;
}

details.karte > summary::marker {
  color: var(--schrift-leise);
}

/*
 * Der Gruppenblock wandert dorthin, wo gearbeitet wird. Er soll als etwas
 * Zugehöriges erkennbar sein und nicht als zweite Karte: derselbe Akzent wie
 * das laufende Band, aber ohne eigenen Rahmen ringsum. Ein Kasten im Kasten
 * liest sich wie ein zweites Thema.
 */
.gruppenanker,
.kianker {
  margin: 0;
}

/*
 * GLEICH UND DAMIT GLEICHWERTIG, seit 0.20.1.
 *
 * Markus am 09.09.2026 zu zwei Bildschirmbildern: «Stelle das gleich und damit
 * gleichwertig dar.» Bis dahin stand der Gruppenblock als eingerücktes Band
 * da und der KI-Block als Kasten, weil die Regel für `.karte` weiter unten im
 * Stilblatt steht und die Ausnahme davor überschrieb. Zwei gleichrangige
 * Angebote in zwei Formen sehen aus wie zwei verschiedene Dinge; welches das
 * wichtigere ist, hat dann die Reihenfolge im Stilblatt entschieden und nicht
 * eine Überlegung.
 *
 * Beide tragen jetzt denselben Bau: eingerückt an einem Balken in der
 * Akzentfarbe, ohne Kasten. Die Rangfolge steht in der Reihenfolge auf der
 * Seite (Menschen über Maschine) und nicht in der Gestaltung. Das gilt auch
 * für die leeren KI-Blöcke: Ein Block, der begründet, warum er leer ist, ist
 * nicht weniger wert als einer mit einem Knopf.
 *
 * Die Regeln stehen NACH `.karte`; Gleichrangigkeit bei gleicher Spezifität
 * entscheidet die Reihenfolge, und das war der Fehler.
 */
/* Die Ausweichantwort steht abgesetzt: Sie ist keine weitere Möglichkeit,
   sondern die Antwort, sich noch nicht festzulegen. */
/* Was einer Ansicht noch fehlt, steht ruhig da und nicht als Warnung: Es ist
   kein Fehler, sondern der Stand der Dinge. */
.hinweis.voraussetzung {
  border-left: 4px solid var(--linie);
  padding-left: 12px;
}

.wahl.ausweich {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
  color: var(--schrift-leise);
}

.gruppenblock .unterkarte:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ---------------- Weg durch die Strecke ---------------- */

.weg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 20px;
}

.wegschritt {
  min-height: 44px;
  padding: 8px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--schrift-leise);
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 999px;
  cursor: pointer;
}

/*
 * DER BLICK AUFS GANZE, seit 0.61.0, und seit 0.61.1 in der Kopfzeile.
 *
 * Er steht zwischen «Einstellungen» und dem Fragezeichen und ist der einzige
 * gefüllte Knopf dieser Zeile. Das ist beabsichtigt: Die übrigen führen aus
 * dem Entscheid heraus, dieser führt in ihn hinein. Bis 0.61.0 stand er
 * rechts neben der Schrittreihe und fiel dort meist auf eine eigene Zeile,
 * wo er nach Markus' Befund verloren aussah.
 *
 * Höhe und Schriftgrad kommen aus .klein, damit er die Zeile nicht
 * auseinanderdrückt.
 */
.kopfblick {
  font: inherit;
  font-size: 0.9rem;
  color: var(--akzent-schrift);
  background: var(--akzent);
  border: 1px solid var(--akzent);
  border-radius: 999px;
  cursor: pointer;
}

.kopfblick::before {
  content: "\25CE";
  margin-right: 0.4em;
}

.kopfblick:hover,
.kopfblick:focus-visible {
  background: var(--akzent-blass);
  color: var(--akzent);
}

/*
 * DER OFFENE ZUSTAND, seit 0.61.2.
 *
 * Solange die Schau offen steht, ist der Knopf der offene Schalter und sagt
 * das auch. Ein Schalter ohne sichtbaren Zustand ist von einem kaputten
 * Schalter nicht zu unterscheiden, und ein Schalter, der beim Betätigen
 * verschwindet, ist noch eine Stufe schlimmer.
 */
.kopfblick.hier {
  background: var(--akzent-blass);
  /* Schriftfarbe statt Akzent, seit 1.0.1, aus demselben Grund wie beim
     Werkzeugknopf: Auf der blassen Fläche trägt der Akzent nur 6,4 zu 1. */
  color: var(--schrift);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--akzent);
}

/*
 * DER WERKZEUGKNOPF AUF SEINER EIGENEN SEITE, seit 1.0.1.
 *
 * Dieselbe Auszeichnung wie beim Blick aufs Ganze, ohne das Kreuz: Ein
 * zweiter Klick schliesst hier nichts. Markus wollte es «leicht
 * hervorgehoben», und leicht heisst genau das: die blasse Akzentfläche und
 * eine Linie, nicht die volle Farbe eines Hauptknopfs.
 */
#werkzeuge-oeffnen.hier,
#klaerungen-oeffnen.hier,
#einstellungen-oeffnen.hier,
#konto-oeffnen.hier {
  background: var(--akzent-blass);
  /*
   * DIE SCHRIFT BLEIBT SCHRIFTFARBE, und das ist keine Feinheit.
   *
   * Der erste Bau nahm die Akzentfarbe, wie es die Leiste der
   * Entscheidstrecke tut. Gemessen von aufnahme_werkzeug.py: 6,4 zu 1 in der
   * hellen und 5,2 zu 1 in der dunklen Darstellung, verlangt sind 7. Die
   * Regel steht seit 0.35.0 bei --akzent-blass und lautet, dass der Text auf
   * dieser Fläche die normale Schriftfarbe behält, damit der Kontrast nicht
   * an der Fläche hängt. **Wer ein Muster übernimmt, übernimmt auch seine
   * Fehler**; hier war das Muster schon falsch, und es fiel nur deshalb
   * nicht auf, weil es an einer Stelle stand, die kein Werkzeug fotografiert.
   */
  color: var(--schrift);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--akzent);
}

.kopfblick.hier::after {
  content: "\00D7";
  margin-left: 0.5em;
  font-weight: 400;
}

/*
 * DER KASTEN BEI EINER VERLETZTEN BEDINGUNG, seit 0.63.0.
 *
 * Er warnt und sperrt nicht, und so sieht er auch aus: ein farbiger Rand an
 * der Seite statt einer roten Fläche. Eine Fläche liest sich als Fehler, und
 * ein Fehler ist es nicht; es ist eine Ausnahme, die jemand begründen darf.
 */
.ausnahmekasten {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border-left: 4px solid var(--warnung);
  background: var(--karte);
  border-radius: var(--rundung);
}

.ausnahmesatz {
  margin: 0 0 8px;
  font-weight: 600;
}

.ausnahmewege {
  margin: 0 0 4px;
}

.ausnahmeliste {
  margin: 0;
  padding-left: 1.2em;
}

.ausnahmeliste li {
  margin-bottom: 6px;
}

.ausnahmewort {
  font-weight: 600;
}

/*
 * DER RECHENWEG IM GESAMTBILD, seit 0.63.0.
 *
 * Die Zahlen stehen rechtsbündig, damit sich Stellen unter Stellen ordnen;
 * die Namen bleiben linksbündig. Ein fehlender Wert steht leiser und kursiv
 * da: Er ist eine Auskunft und keine Zahl, und wer die Tabelle überfliegt,
 * soll ihn nicht für eine halten. Am Handy, wo die Tabelle umkippt, fällt
 * die rechte Ausrichtung weg; dort stehen die Werte unter ihrer Marke.
 */
.schaurechenweg td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.schaurechenweg th:not(:first-child) {
  text-align: right;
}

.schaufehlt {
  color: var(--schrift-leise);
  font-style: italic;
}

/* Die zweite Zahl einer Zelle, leise und auf eigener Zeile: der Anteil beim
   Gewicht, der Beitrag beim Punktwert. */
.schaunebenzahl {
  display: block;
  font-size: 0.85em;
  color: var(--schrift-leise);
}

@media (max-width: 700px) {
  .schaurechenweg td:not(:first-child),
  .schaurechenweg th:not(:first-child) {
    text-align: left;
  }
}

/*
 * DAS ANGEBOT AUF DER ENTSCHEIDANSICHT, seit 0.61.0. Eine eigene Zeile über
 * allem anderen, damit der Blick zurück vor der Wahl steht und nicht neben
 * ihr.
 */
.schauangebot {
  margin: 0 0 16px;
}

/* Dasselbe Zeichen wie am Zugang in der Leiste. Zwei Knöpfe, ein Ziel: Das
   Zeichen sagt es, bevor der Text gelesen ist. */
#abschluss-schau::before {
  content: "\25CE";
  margin-right: 0.4em;
  color: var(--akzent);
}

/*
 * DER RÜCKWEGSTREIFEN, seit 0.54.0.
 *
 * Er sitzt an der Stelle der Wegleiste und hat denselben Abstand nach unten,
 * damit die Seite beim Wechsel zwischen Entscheid und Nebenansicht nicht
 * springt. Der Pfeil steht im Stilblatt und nicht im Text des Knopfes:
 * Vorlesegeräte sollen «Zurück zur Frage» sagen und nicht «Pfeil nach links
 * Zurück zur Frage».
 */
.rueckweg {
  margin: 8px 0 20px;
}

#rueckweg-knopf::before {
  content: "\2190";
  margin-right: 0.4em;
}

/*
 * DIE NUMMER VOR DEM WORT, seit 0.52.0.
 *
 * Sie kommt aus data-nummer und nicht aus dem Text des Knopfes, damit die
 * Beschriftung «Kriterien» bleibt, was sie ist. Zweck ist das
 * Wiedererkennen: Die Begrüssung zeigt dieselben sechs Schritte mit
 * denselben Nummern, und wer von dort in die Frage kommt, findet die Reihe
 * wieder, statt vor einer neuen zu stehen.
 *
 * Ein Knopf ohne data-nummer bekommt nichts davorgesetzt; attr() liefert
 * dann eine leere Zeichenkette.
 */
.wegschritt::before {
  content: attr(data-nummer);
  margin-right: 0.4em;
  font-size: 0.85em;
  color: var(--schrift-leise);
}

.wegschritt.hier::before {
  color: inherit;
  opacity: 0.8;
}

.wegschritt.erreicht {
  color: var(--schrift);
  border-color: var(--akzent);
}

.wegschritt.hier {
  color: var(--akzent-schrift);
  background: var(--akzent);
  border-color: var(--akzent);
  font-weight: 600;
}

.wegschritt[disabled] {
  opacity: 0.4;
  cursor: default;
}

/*
 * DIE ETAPPENLEISTE DER WERKZEUGRUNDE, seit 0.96.0.
 *
 * Sie borgt sich die Klassen der Entscheidstrecke, denn sie sagt dasselbe.
 * Eigenes Aussehen bekäme sie nur, wenn sie etwas anderes bedeutete.
 *
 * Zwei Unterschiede bleiben. Der Abstand nach unten ist kleiner, weil direkt
 * darunter die Frage steht und nicht ein neuer Abschnitt. Und eine erledigte
 * Etappe ist hier wirklich erledigt: Auf der Strecke heisst der Haken «hier
 * steht etwas», in einer laufenden Runde «das ist geschehen».
 */
.etappenleiste {
  margin: 4px 0 14px;
}

/* Erledigt, aber ohne Ort: Nach der Freigabe gibt es den Freigabeknopf nicht
   mehr. Der Schritt bleibt sichtbar und abgehakt; blass wäre er nur, wenn er
   noch ausstünde. */
.wegschritt.ohnesprung {
  cursor: default;
}

/*
 * Der Stand je Register, seit 0.21.2. Eine Zahl oder ein Haken, hinter dem
 * Namen und leiser als er: Der Name sagt, wohin es geht, der Stand sagt, was
 * dort schon steht. Umgekehrte Gewichtung machte aus der Wegleiste eine
 * Fortschrittsanzeige, und fertig wird ein Entscheid nicht durch Zählen.
 */
.wegstand {
  margin-left: 7px;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--linie);
  color: var(--schrift);
}

/*
 * Die Auszählung der Konsultativabstimmung, Etappe 8 Schritt 3.
 *
 * Ein Balken je Weg, keine Prozentzahl: Ein gerundeter Prozentsatz bei fünf
 * Stimmen behauptet eine Genauigkeit, die es nicht gibt. Alle drei Balken
 * tragen dieselbe Farbe; eine hervorgehobene Mehrheit wäre schon die halbe
 * Empfehlung.
 */
.stimmenzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3fr auto;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.stimmenname {
  font-size: 15px;
}

.stimmenbalken {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: var(--linie);
  overflow: hidden;
}

.stimmenfuellung {
  display: block;
  height: 100%;
  background: var(--akzent);
}

.stimmenzahl {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 2ch;
  text-align: right;
}

/*
 * Die Lage der Antworten, Etappe 8 Teilschritt 1.
 *
 * Sie steht kräftiger als die Verteilung darüber, aber ohne eigenen Kasten
 * und ohne Farbe: Der Median ist eine Auskunft neben der Verteilung und nicht
 * ihr Ersatz. Wer ihn hervorhebt wie ein Ergebnis, lädt dazu ein, die Zeilen
 * darüber zu überblättern, und genau dort steht, wie einig die Gruppe war.
 */
.lagezeile {
  margin: 10px 0 2px;
  font-size: 15px;
  font-weight: 600;
}

.signaltitel {
  margin: 16px 0 4px;
  font-size: 15px;
  font-weight: 600;
}

/* Die Dissenssignale nach Pflichtenheft 11.2. Alle gleich gesetzt, ohne
   Reihenfolge nach Wichtigkeit und ohne Zahl daneben: Eine Rangfolge der
   Hinweise wäre die Prioritätszahl, die das Pflichtenheft ausschliesst, nur
   in anderer Schreibweise. */
.signalliste {
  margin: 0;
  padding-left: 20px;
  color: var(--schrift);
  font-size: 14px;
}

.signalliste li {
  margin: 4px 0;
}

/* Die drei Wege am Handy: gross, untereinander, gleich breit. Drei
   gleichrangige Antworten in einer Zeile werden zu einer Rangfolge, sobald
   der Platz nicht reicht. */
.wegknoepfe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 0;
}

.wegknopf {
  width: 100%;
}

/* ------------------------------------------------------------------ *
 * EINE WAHL SIEHT ANDERS AUS ALS EINE HANDLUNG, seit 0.35.0
 *
 * Markus am 11.09.2026 zur Punkteverteilung: «Punkte abschicken ist etwas
 * anderes als Mehr Zeit für Austausch am Nachmittag.» Er hat recht, und der
 * Fehler war handfest: Ein gesetzter Punkt und der Knopf zum Abschicken
 * trugen beide die volle Akzentfarbe. Zwei Dinge, die gleich aussehen, sind
 * dasselbe, und wer vor einer Gruppe sitzt, tippt auf das Falsche.
 *
 * Die Unterscheidung ist deshalb nicht nur eine andere Farbe, sondern eine
 * andere FORM. Eine Wahl steht in einem Rahmen mit runden Ecken und linker
 * Marke; sie ist ein Ding, das man nimmt oder liegen lässt. Eine Handlung ist
 * eine volle Fläche und geschieht, sobald man sie berührt.
 * ------------------------------------------------------------------ */

.wahlknopf {
  width: 100%;
  text-align: left;
  border: 2px solid var(--linie);
  border-left-width: 6px;
  border-radius: 10px;
  background: var(--flaeche);
  color: var(--schrift);
  font-weight: 500;
}

/*
 * Gesetzt: die Marke links wird zur Akzentfarbe, die Fläche bleibt ruhig.
 * Damit ist die Wahl sichtbar, ohne dass sie zur Handlung wird.
 *
 * Die Klasse heisst «gesetzt» und nicht «gewählt», seit 0.35.0 und aus
 * einem gemessenen Grund: Das Umlautwerkzeug hielt «gewählt» in der
 * Zeichenkette 'gross wahlknopf gewählt' für Prosa und machte «gewählt»
 * daraus. Die Klasse im Stilblatt hiess weiterhin anders, und der gesetzte
 * Zustand war unsichtbar. Ein Klassenname ohne Ersatzschreibung kann diesen
 * Fehler nicht machen; ein Prüfpunkt in pruefe_selektoren.js fängt den
 * allgemeinen Fall.
 */
.wahlknopf.gesetzt {
  border-color: var(--akzent);
  background: var(--akzent-blass, var(--flaeche));
  font-weight: 700;
}

/* Der Punkt selbst, links vor dem Text. Er ist ein Zeichen und kein Symbol
   aus der Schrift: Ein Kreis, der gefüllt wird, liest sich ohne Erklärung. */
.wahlpunkt {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  border: 2px solid var(--linie);
  border-radius: 50%;
  vertical-align: -2px;
}

.wahlknopf.gesetzt .wahlpunkt {
  border-color: var(--akzent);
  background: var(--akzent);
}

/* Die Handlung steht abgesetzt unter der Wahl, damit sie nicht als letzte
   Zeile der Liste gelesen wird. */
.handlungszeile {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
}

/* «Kann ich nicht beurteilen» steht neben der Skala und nicht darin. Ein
   gleich aussehender Knopf am Ende einer Reihe liest sich als sechste Stufe,
   und aus Unwissen würde eine halbe Zustimmung. */
/*
 * Das Modusband im Steuerpult, Etappe 7 Teilschritt 4. Es steht abgesetzt am
 * Fuss, weil es den ganzen Entscheid betrifft und nicht die laufende Runde.
 */
.modusband {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
}

/*
 * DIE GRÖSSENWAHL, seit 0.84.0.
 *
 * Abgesetzt vom Knopf darüber, weil sie eine andere Frage beantwortet. Kein
 * eigener Rahmen: Zwei Kästen ineinander im selben Band lesen sich als zwei
 * Bereiche, und es ist einer.
 */
.groessenwahl {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--linie);
}

/* Nebeneinander, solange der Platz reicht. Anders als die drei Weisen auf der
   Frage trägt hier kein Knopf einen erklärenden Satz; die Begründung steht
   einmal darunter und nicht zweimal daneben. */
.groessenwahl .weisenknoepfe {
  flex-direction: row;
  flex-wrap: wrap;
}

/*
 * Ohne Fläche, ausser bei der getroffenen Wahl.
 *
 * Markus am 09.09.2026: «Mach den Button an die Wand projizieren prominenter.»
 * Daraus ist die Regel geworden, dass im Steuerpult genau ein Bedienelement
 * eine Farbfläche trägt. Diese hier sind ein Schalter und kein Weg; die
 * Fläche auf der gewählten Seite sagt, was gilt, und ist keine Hervorhebung.
 * Gefunden hat den Widerspruch pruefe_bericht.py beim ersten Lauf nach dem
 * Einbau, nicht das Auge.
 */
.groessenwahl .weisenknopf {
  width: auto;
  flex: 1 1 200px;
  text-align: center;
  background: transparent;
}

.groessenwahl .weisenknopf.gewaehlt {
  background: var(--akzent-blass);
}

.groessenwahl .hinweis {
  margin: 10px 0 0;
}

/*
 * Am Handy untereinander. Die Grundlage von 200 Punkten muss dabei weg:
 * In einer Spalte ist die Hauptachse die Höhe, und aus der Mindestbreite
 * von 200 Punkten wurden zweihundert Punkte HOHE Knöpfe. Gesehen auf der
 * Aufnahme bei 360 Punkten am 16.09.2026; gemessen hatte nichts davon
 * etwas, weil ein zu grosser Knopf keine Zusage bricht.
 */
@media (max-width: 560px) {
  .groessenwahl .weisenknoepfe {
    flex-direction: column;
  }

  .groessenwahl .weisenknopf {
    flex: 0 0 auto;
  }
}

/* Eine Aussage mit ihrem Auswahlfeld. Bei fünf Aussagen wird die Seite lang;
   die Trennlinie hält auseinander, was zusammengehört. */
/* Der Titel einer Aussage in der Auswertung. Jede Aussage hat ihre eigene
   Verteilung; zusammengezählt wird über Aussagen hinweg nichts. */
.aussagentitel {
  margin: 20px 0 4px;
  font-size: 16px;
}

.aussagezeile {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linie);
}

.aussagezeile:last-child {
  border-bottom: none;
}

.aussagezeile label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

/* ---------------- Die Einschätzung mit dem Regler, seit 1.31.0 ----------------
   Markus am 26.09.2026: ein Schieberegler statt einer Auswahlliste, und
   darunter der Satz der Stufe, auf der er steht. Solange «Kann ich nicht
   beurteilen» angekreuzt ist, ist der Regler blass: Er steht zwar ganz
   links, sagt aber noch nichts. */

.ratingregler {
  display: block;
  width: 100%;
  /* Am Handy wird mit dem Daumen geschoben; getroffen werden muss eine
     Fläche, nicht eine Linie. */
  height: 36px;
  margin: 4px 0 0;
  accent-color: var(--akzent);
}

.ratingwort {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--akzent-text);
}

.ratingzeile label.kaestchenzeile {
  display: flex;
  margin: 8px 0 0;
  font-weight: 400;
}

.ratingzeile.ist-unklar .ratingregler {
  opacity: .35;
}

.ratingzeile.ist-unklar .ratingwort {
  color: var(--schrift-leise, #5b6660);
  font-size: 16px;
  font-weight: 400;
}

/* ---------------- Die Reihenfolge nach Borda, seit 1.36.0 ---------------- */

/*
 * Eine Karte je Möglichkeit, links der Platz, dann der Griff zum Ziehen,
 * der Wortlaut und zwei Pfeile. Die Pfeile sind 44 Punkte gross, weil sie
 * mit dem Daumen getroffen werden müssen.
 */
.rangliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rangzeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--karte);
}

.rangzeile.wird-gezogen {
  border-color: var(--akzent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.rangmitte {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rangplatz {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--akzent-text);
}

.ranggriff {
  padding: 6px 4px;
  font-size: 22px;
  line-height: 1;
  color: var(--schrift-leise);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.rangtext {
  font-weight: 600;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Die Borda-Wand: die Verteilung der Plätze direkt unter ihrem Balken. */
.wandbordagruppe .wandbalkenzeile {
  margin-bottom: 0;
}

.wandbordagruppe .wandklein {
  margin: 0 0 clamp(10px, 1.2vw, 20px);
  color: var(--schrift-leise);
}

.rangpfeil {
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 20px;
}

/* ---------------- Das Konsensieren, seit 1.17.0 ---------------- */

/*
 * Eine Möglichkeit mit ihrem Regler. Dieselbe Trennlinie wie bei den
 * Aussagen, aus demselben Grund: Bei acht Möglichkeiten wird die Seite lang,
 * und ohne Linie weiss man nicht mehr, welche Zahl zu welcher Zeile gehört.
 */
.widerstandzeile {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linie);
}

.widerstandzeile:last-child {
  border-bottom: none;
}

.widerstandzeile label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.widerstandregler {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Der Regler nimmt den Platz, die Zahl daneben behält ihren. Ohne die feste
   Breite springt der Regler, sobald aus dem Strich eine zweistellige Zahl
   wird. */
.widerstandregler input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  /* Am Handy wird mit dem Daumen geschoben. Der Standardregler ist dafür
     zu dünn; getroffen werden muss eine Fläche, nicht eine Linie. */
  height: 32px;
}

.widerstandwert {
  flex: 0 0 auto;
  min-width: 2.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 600;
}

/* Die Beschriftung der beiden Enden. Sie steht unter dem Regler und nicht
   links und rechts daneben: Auf einem schmalen Bildschirm bliebe dort für
   den Regler selbst nichts übrig. */
.widerstandenden {
  margin: 4px 0 0;
}

/* Ein Kästchen mit seinem Text in einer Zeile, ohne den Blockabstand, den
   ein gewöhnliches label bekommt. */
.kaestchenzeile {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  font-weight: 400;
}

.kaestchenzeile input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px;
}

.wegknopf.daneben {
  margin-top: 8px;
  border-top-width: 1px;
}

.wegschritt.hier .wegstand {
  background: var(--akzent-schrift);
  color: var(--akzent);
}

/* ---------------- Grundbausteine ---------------- */

.ansicht { margin-bottom: 28px; }

/*
 * Luft über der Überschrift, seit 0.7.3.
 *
 * Markus am 06.09.2026: «Was möchtest du entscheiden? ist ein bisschen sehr
 * nah beim Kasten, der oberhalb platziert ist.» Auf der Startseite ist der Weg
 * ausgeblendet, und die Überschrift stand ohne oberen Abstand direkt unter dem
 * Hinweis auf die Erprobungsfassung. Die beiden verschmolzen zu einem Block,
 * und die Frage las sich wie ein Teil der Warnung.
 *
 * 24 Punkte kollabieren mit dem Abstand des Weges (20 Punkte) auf 24 Punkte,
 * die Ansicht mit sichtbarem Weg wird also nicht auseinandergezogen.
 */
.ansicht > h2 {
  margin-top: 24px;
}

.frageueberschrift {
  margin: 24px 0 14px;
  font-size: 23px;
  line-height: 1.3;
}

/*
 * Die Frage über allen Registern, seit 0.21.0.
 *
 * Sie steht zwischen Band und Wegleiste und bleibt beim Registerwechsel
 * stehen. Etwas kleiner als eine Ansichtsüberschrift und mit einem Balken
 * links: Sie ist der Gegenstand, auf den sich alles darunter bezieht, und
 * nicht der Titel eines Schrittes. Wer im Abwägen steht, soll sie im
 * Augenwinkel haben und nicht lesen müssen.
 */
/*
 * DIE FRAGE ÜBER ALLEM, hervorgehoben seit 0.55.0.
 *
 * Markus am 13.09.2026: «Ganz oben wird ja die Fragestellung immer
 * mitgeführt, das ist super. Sie müsste aber mehr ins Auge stechen.»
 *
 * Bis 0.54.0 war sie fetter Text mit einem grauen Strich links und ging
 * neben der Wegleiste unter. Jetzt liegt sie in der blassen Akzentfarbe, mit
 * einem kräftigen Balken in der vollen Akzentfarbe davor. Damit ist sie der
 * einzige farbig hinterlegte Block im Kopf der Ansicht und der erste, den
 * das Auge findet.
 *
 * Keine volle Akzentfläche: Die trägt in dieser Anwendung die eine laute
 * Handlung je Ansicht, und eine Überschrift ist keine Handlung. Der blasse
 * Grund fällt auf, ohne diesen Unterschied einzuebnen.
 */
.entscheidfrage {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-left: 6px solid var(--akzent);
  border-radius: var(--rundung);
  background: var(--akzent-blass);
  color: var(--schrift);
  font-size: 21px;
  line-height: 1.4;
  font-weight: 700;
}

/*
 * DIE EINSTIEGSFRAGE DER KRITERIEN, seit 0.55.0.
 *
 * Sie ist keine Meldung und keine Feldhilfe, sondern der Denkauftrag dieser
 * Ansicht, und sie steht deshalb in der Schriftgrösse des Fliesstextes und
 * nicht im Grau der Hinweise. Der Balken links greift die Form der
 * Entscheidfrage auf, eine Stufe leiser.
 */
.kriterienfrage {
  margin: 12px 0 20px;
  padding: 2px 0 2px 14px;
  border-left: 4px solid var(--akzent);
  color: var(--schrift);
  line-height: 1.55;
}

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  padding: 20px;
  margin: 16px 0;
}

.karte h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.karte h4 {
  margin: 16px 0 6px;
  font-size: 15px;
  color: var(--schrift);
}

.hinweis {
  /* Ein Hinweis, den man erklären wollte, wird nicht ausgegraut. */
  color: var(--schrift);
  font-size: 15px;
  margin-top: 0;
}

.leisetext {
  color: var(--schrift-leise);
  font-size: 14px;
}

label {
  display: block;
  margin: 14px 0 6px;
  font-weight: 600;
  font-size: 15px;
}

/* Alle Texteingaben tragen dasselbe Aussehen. Bis zur Fassung 0.4.0 stand
   hier nur input[type="text"], und die Felder für Adresse, Passwort und Datum
   erschienen im Browserstandard: in der dunklen Fassung weiss auf dunkel. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  font: inherit;
  color: var(--schrift);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 8px;
}

textarea { resize: vertical; }

/* Das Fragefeld wächst mit dem Text; die Höhe setzt app.js. Von Hand ziehen
   soll man daran nicht, sonst kämpfen zwei Regeln um dieselbe Zahl. */
#frage {
  resize: none;
  line-height: 1.5;
  overflow-y: hidden;
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="date"]:focus-visible,
input[type="number"]:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
input[type="radio"]:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

.eingabezeile { margin-bottom: 6px; }

.eingabegruppe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

/* Jedes Textfeld in einer Eingabegruppe teilt sich die Zeile mit dem Knopf
   daneben. Bis 0.5.2 stand hier nur input[type="text"], und der Knopf zum
   Aufdecken des Passworts rutschte darunter. */
.eingabegruppe input[type="text"],
.eingabegruppe input[type="email"],
.eingabegruppe input[type="password"],
/* select seit 0.68.0, für die Bereichswahl bei der Frage. Ohne diese Zeile
   blieb das Auswahlfeld so schmal wie sein längster Eintrag, und der Knopf
   daneben stand unmotiviert weit links. */
.eingabegruppe select {
  flex: 1 1 12rem;
  min-width: 0;
}

.knopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.knopfzeile.trennt {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
}

/* Mindestens 44 Punkte Höhe, damit die Fläche am Handy zu treffen ist. */
button {
  min-height: 44px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  color: var(--schrift);
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 8px;
  cursor: pointer;
}

button.haupt {
  color: var(--akzent-schrift);
  background: var(--akzent);
  border-color: var(--akzent);
}

/*
 * DER ABGEGEBENE KNOPF, seit 0.88.3.
 *
 * Markus am 17.09.2026: «Wenn man den ersten Beitrag abgeschickt hat, muss
 * der Button ‹Abschicken› seine Farbe ändern und inaktiv werden.»
 *
 * Die blosse Deckkraft, die jeder abgeschaltete Knopf trägt, genügt hier
 * nicht. Ein blasser grüner Knopf sieht aus wie ein grüner Knopf bei
 * schlechtem Licht, und auf einem Handy im Seminarraum erst recht. Der Grund
 * wechselt deshalb ganz, und die Beschriftung sagt den Zustand statt der
 * Handlung.
 *
 * Die Regel steht nach button.haupt, damit sie dessen Farbe ersetzt, und
 * trägt kein !important; sie gewinnt über die Reihenfolge.
 */
button.haupt.abgegeben,
button.haupt.abgegeben[disabled] {
  color: var(--schrift-leise);
  background: var(--akzent-blass);
  border-color: var(--schrift-leise);
  opacity: 1;
}

button.leise {
  font-weight: 500;
  color: var(--schrift-leise);
}

/*
 * EIN LEISER KNOPF, DER TROTZDEM ARBEITET, seit 0.86.0.
 *
 * Markus hielt den Knopf «Nachsehen» für abgeschaltet, weil er blass ist.
 * Er war es nie. Die leise Einfärbung taugt für Knöpfe, die selten gebraucht
 * werden, und sie verleitet dort zum Wegsehen, wo mitten in einer Sitzung
 * jemand darauf drücken soll.
 *
 * Diese Klasse gibt ihm die gewöhnliche Schriftfarbe und einen Rand zurück,
 * ohne ihn zum Hauptknopf zu machen. Sie steht an den wenigen Stellen, an
 * denen ein leiser Knopf im Raum gebraucht wird.
 */
button.leise.umrandet {
  color: var(--schrift);
  /* Der Rand nimmt die leise Schriftfarbe und nicht die Linienfarbe. Eine
     1px-Linie in --linie ist auf einem Beamer schlicht nicht da. */
  border: 1px solid var(--schrift-leise);
  border-radius: 8px;
}

/*
 * Ein Verweis, der wie ein Knopf aussieht, seit 0.26.0.
 *
 * Gebraucht für den Weg zum Bericht. Er muss ein Verweis sein, weil er eine
 * eigene Seite in einem neuen Fenster öffnet; in einer Zeile mit vier Knöpfen
 * fiele ein flacher Textlink aber aus dem Raster.
 *
 * Die Schriftfarbe ist die gewöhnliche und nicht die Akzentfarbe: Diese trägt
 * an dieser Stelle nur 7,0 zu 1 und damit knapp zu wenig für die Zusage, dass
 * jeder Text im Werkzeug 7 zu 1 erreicht. Gemessen hat das der Prüfstand, und
 * zwar am Tag des Einbaus.
 */
a.knopflink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  font-weight: 500;
  color: var(--schrift);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 8px;
}

a.knopflink:hover {
  text-decoration: underline;
}

/*
 * DIE ZUGÄNGE IM KOPF ALS VERWEISE, seit 1.15.0.
 *
 * Zwei Stellen brauchen das. In der Anwendung ist das Fragezeichen seit
 * 1.15.0 ein Verweis auf hilfe.php und kein Knopf mehr; auf der Hilfeseite
 * selbst sind alle vier Zugänge Verweise, weil dort kein JavaScript läuft.
 *
 * Die Regeln bilden nach, was button.leise.klein von sich aus mitbringt:
 * Rahmen, Rundung, Höhe, leise Schrift. Nebeneinander in derselben Zeile
 * darf man einem Knopf und einem Verweis nicht ansehen, welcher von beiden
 * er ist; sonst liest sich die Zeile als zwei Sorten Sache.
 *
 * Was ein Verweis von sich aus mitbringt und hier stört, ist die
 * Unterstreichung. Sie kommt beim Überfahren zurück, damit die Anklickbarkeit
 * nicht allein an der Farbe hängt.
 */
.kopflink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-weight: 500;
  color: var(--schrift-leise);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 8px;
}

a.kopflink:hover {
  text-decoration: underline;
}

/*
 * Die Marke für die Seite, auf der man gerade steht.
 *
 * Auf der Hilfeseite führt das Fragezeichen nirgends hin, denn das Ziel ist
 * die Seite selbst. Statt eines Verweises, der nichts tut, steht dort ein
 * Zeichen, das den Ort angibt: dieselbe Form, aber ohne Zeiger, mit
 * gewöhnlicher Schriftfarbe und dem Akzent als Rahmen. Dieselbe Sprache wie
 * «.knopfzeile .leise.hier» im Konto.
 */
.kopflink.hierauf {
  color: var(--schrift);
  border-color: var(--akzent);
  cursor: default;
}

button.klein { padding: 8px 12px; font-size: 15px; }
button.breit { width: 100%; }

/* Der Knopf, den man auf dieser Ansicht am häufigsten braucht. Grösser als die
   übrigen, weil er seit 0.6.3 zuoberst steht und den Anfang jeder Arbeit
   markiert. */
button.gross {
  min-height: 52px;
  padding: 12px 24px;
  font-size: 18px;
}

/*
 * Der Übernahmeknopf an einem KI-Vorschlag, seit 0.7.2.
 *
 * Markus am 06.09.2026: «Mach den Button Übernehmen viel auffälliger, sonst
 * kommt man nicht daraus, was man jetzt machen muss.» Er trägt jetzt die
 * Hauptfarbe und eine feste Mindestbreite, damit die Knöpfe untereinander
 * eine Kante bilden und die Liste als Reihe von Angeboten lesbar wird.
 */
.uebernahmeknopf {
  min-width: 140px;
  flex: 0 0 auto;
}

/*
 * Eine Karte, die ruft. Sie steht dort, wo etwas auf eine Handlung wartet,
 * und hebt sich vom übrigen Weiss ab, ohne zu blinken. Angelegt am
 * 06.09.2026, nachdem Markus zwei festgehaltene Entscheide in «Meine
 * Entscheide» vermisste; sie warteten in einer unauffälligen Karte weiter
 * unten auf der Seite.
 */
.karte.ruft {
  border-left: 4px solid var(--akzent);
  background: var(--karte);
}

.karte.ruft h3 {
  color: var(--akzent);
}

/*
 * Die Erklärung unter einer Feldbeschriftung, seit 0.7.2. Sie ersetzt den
 * grauen Text im Feld, der genau dann verschwand, wenn jemand zu tippen
 * begann und die Erklärung am nötigsten brauchte.
 */
.feldhilfe {
  color: var(--schrift-leise);
  font-size: 14px;
  line-height: 1.45;
  margin: 2px 0 6px;
}

/* Die Zeile über der ersten Karte. Sie trägt keinen Rand und keinen
   Trennstrich, damit die Knöpfe als Anfang der Ansicht lesbar bleiben. */
.knopfzeile.obenan {
  margin: 4px 0 0;
  align-items: center;
}

button[disabled] {
  opacity: 0.45;
  cursor: default;
}

.meldung {
  margin: 12px 0 0;
  min-height: 1.55em;
}

/* Eine Meldung ohne Text nimmt keinen Platz. Auf der Ansicht «Meine
   Entscheide» stand sonst eine leere Zeile über der Liste, sichtbar auf
   Markus' Bildschirmbild vom 06.09.2026. */
.meldung:empty {
  margin: 0;
  min-height: 0;
}

.gut { color: var(--gut); }
.schlecht { color: var(--warnung); }
.wartet { color: var(--schrift-leise); }

/*
 * DIE LAUFANZEIGE, rot und abgesetzt, seit 1.18.1.
 *
 * Markus am 23.09.2026, mit einem Bild der grauen Zeile: «Schreibe das in
 * roter Farbe, gut hervorgehoben.» Sie stand neutral zwischen zwei
 * Feldhilfen und sah aus wie eine.
 *
 * Rot heisst hier nicht Fehler, sondern: Das läuft noch. Die Zeile ist
 * während fünfundvierzig Sekunden das einzige, was sich bewegt, und sie
 * steht vor einer Gruppe, die wartet.
 */
.meldung.laeuft {
  color: var(--warnung);
  font-weight: 600;
  padding: 10px 14px;
  border-left: 4px solid var(--warnung);
  background: color-mix(in srgb, var(--warnung) 8%, transparent);
  border-radius: 0 var(--rundung) var(--rundung) 0;
}

/* Nur für Vorleseanwendungen sichtbar. */
.versteckt-fuer-auge {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/*
 * DIE ETAPPEN EINER WERKZEUGRUNDE, seit 1.20.0.
 *
 * Markus am 24.09.2026: «Ich möchte, dass dann nur noch das sichtbar ist,
 * was zum Zusammenlegen gehört.» Die Leiste schaltet seither, statt zu
 * scrollen, und was nicht zur offenen Etappe gehört, geht weg.
 *
 * Eine eigene Klasse und nicht `hidden`: Das Attribut gehört der Logik, die
 * den einzelnen Block ohnehin schon steuert, etwa den Freigabeknopf nach
 * der Freigabe. Zwei Stellen, die dasselbe Attribut setzen, nehmen einander
 * die Aussage.
 */
.etappeweg {
  display: none !important;
}

/* Der Titel der offenen Etappe, zwischen Leiste und Inhalt. */
#runde-etappentitel {
  margin: 18px 0 4px;
}

#runde-etappensatz {
  margin: 0 0 14px;
}

/*
 * In der Leiste: die Etappe, die gerade offen ist.
 *
 * Sie trägt die kräftige Markierung, und «hier» tritt zurück, sobald die
 * beiden auseinanderfallen. Der Grund: Was auf dem Bildschirm steht, ist
 * das, wonach die Person sucht. Wo der Ablauf steht, sagt der Haken bei den
 * erledigten Etappen. **Die Markierung gehört dem, was zu sehen ist, und
 * nicht dem, was zu tun wäre.**
 */
.wegschritt.offen {
  color: var(--akzent-schrift);
  background: var(--akzent);
  border-color: var(--akzent);
  font-weight: 600;
}

/*
 * Die Nummer gehört zum Knopf, seit 1.22.0.
 *
 * Markus am 24.09.2026: «Im grünen Knopf Frage das 01 ebenfalls weiss
 * darstellen (analog 02, 03, 04).» Die Regel dafür gab es seit 0.6.0, aber
 * nur für `.hier`, also für die Etappe, auf der die Fachregel steht. Seit
 * 1.20.0 gibt es zusätzlich `.offen`, die Etappe, die gerade auf dem
 * Bildschirm ist, und auf grünem Grund stand ihre Nummer weiterhin grau.
 * **Wer eine Markierung um einen Zustand erweitert, prüft jede Regel, die
 * am alten Zustand hing.**
 */
.wegschritt.offen::before {
  color: inherit;
  opacity: 0.8;
}

/* Ist eine andere Etappe offen, bleibt die aktuelle erkennbar, aber
   leiser: umrandet statt gefüllt. */
.wegschritt.hier:not(.offen) {
  color: var(--schrift);
  background: transparent;
  border-color: var(--akzent);
  box-shadow: inset 0 0 0 1px var(--akzent);
}

/* ---------------- Hilfe in der Anwendung ---------------- */

.hilfe {
  margin-top: 20px;
  padding: 12px 16px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  font-size: 15px;
}

.hilfe summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 24px;
  padding: 6px 0;
}

.hilfe p { color: var(--schrift); }
.hilfe p:last-child { margin-bottom: 0; }

/* ---------------- Vorschläge der KI ---------------- */

/*
 * Eine Zeile je Vorschlag, mit dem Knopf rechts. Bewusst kein «alles
 * übernehmen»: KI-ENT-030 verlangt, dass die Übernahme eine eigene menschliche
 * Handlung ist, und wer alles auf einmal nimmt, hat nichts geprüft.
 */
.vorschlagszeile {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--linie);
}

.vorschlagszeile:first-child {
  border-top: none;
}

.vorschlagstext {
  flex: 1 1 200px;
  min-width: 0;
}

/* ---------------- Die Einschätzung der KI ---------------- */

/*
 * Angelegt am 06.09.2026, zweiter Teil der Etappe 4.
 *
 * Die eine Regel, die hier alles bestimmt: Gegenargument, Unsicherheit und die
 * Bedingung stehen gleich gross und gleich weit vorn wie die Gründe. Es gibt
 * keine Klasse, die einen der vier Blöcke hervorhebt, und keine, die einen
 * kleiner setzt. Wer das Gegenargument leiser macht, hat schon überredet, und
 * genau das verbieten KI-ENT-020 und KI-ENT-050.
 *
 * Hervorgehoben ist einzig die empfohlene Option selbst, damit man sie findet.
 */
.empfehlungswahl {
  margin: 6px 0 2px;
  font-size: 19px;
  font-weight: 700;
}

.empfehlungsbedingt {
  margin: 0 0 8px;
  color: var(--offen);
  font-size: 15px;
}

#empfehlungstext h4 {
  margin: 16px 0 4px;
  font-size: 15px;
  color: var(--schrift);
}

.empfehlungsliste {
  margin: 0;
  padding-left: 20px;
}

.empfehlungsliste li {
  margin: 4px 0;
  line-height: 1.5;
}

/* Der Schlusssatz braucht Luft, sonst liest er sich als fünfter Aufzählpunkt. */
#empfehlungstext .hinweis {
  margin-top: 16px;
}

/*
 * Der Querdenker, seit 0.7.3.
 *
 * Er bekommt eine Marke und einen Streifen an der Seite, sonst nichts. Keine
 * andere Schriftgrösse, keine zweite Farbe im Text, kein Symbol: Er soll
 * auffallen, ohne wichtiger auszusehen als die übrigen Vorschläge. Er ist
 * nicht der bessere Vorschlag, er ist der ungewohnte.
 */
.vorschlagszeile.quergedacht {
  border-left: 3px solid var(--offen);
  padding-left: 12px;
}

/* Ohne Versalien. Sie lesen sich schlechter, Vorleseprogramme buchstabieren
   sie mitunter, und der geschriebene Text soll derselbe sein wie der
   dargestellte. */
.quermarke {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--offen);
  margin-bottom: 2px;
}

.querbegruendung {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--schrift-leise);
  margin-top: 4px;
}

#kivorschlaege h4 {
  margin: 18px 0 4px;
  font-size: 15px;
}

/* ---------------- Optionskarten ---------------- */

/*
 * Ein Raster, das sich nach der verfügbaren Breite richtet. Bei 360 Punkten
 * steht eine Karte je Zeile, bei 900 Punkten zwei bis drei. Die Inhalte sind in
 * beiden Fällen dieselben (UI-PRI-010).
 */
.optionskarten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 16px 0;
}

@media (min-width: 701px) {
  .optionskarten { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

.optionskarte { margin: 0; }
.karte.weit { margin-top: 16px; }

.gruppenblock,
.kiblock {
  margin: 16px 0 0;
  padding: 4px 0 4px 14px;
  border: 0;
  border-left: 4px solid var(--akzent);
  border-radius: 0;
  background: none;
}

/* Der Aufklappmarker steht innerhalb, seit 0.37.0, LS-33 Teil eins.

   Gemessen am 11.09.2026 beim Durchgang durch alle Ansichten: Mit
   «outside» sass das Dreieck links des Innenabstands von 14 Punkten und
   damit hinter dem Rahmenstrich, also unsichtbar. Auf derselben Ansicht
   trug der Hilfeblock darunter sein Dreieck; zwei zuklappbare Blöcke,
   einer erkennbar und einer nicht. Wer das Dreieck nicht sieht, klappt
   nicht auf. */
.gruppenblock > summary,
.kiblock > summary {
  cursor: pointer;
  list-style-position: inside;
}

.gruppenblock > summary h3,
.kiblock > summary h3 {
  display: inline;
  margin: 0;
  font-size: 18px;
}

.gruppenblock > summary::marker,
.kiblock > summary::marker {
  color: var(--akzent);
}

.kiblock > summary .leisetext {
  margin: 2px 0 0;
}

/*
 * Drei Aufträge in einem Block, seit 0.21.1.
 *
 * Sie stehen untereinander und sind durch eine Linie getrennt, nicht durch
 * einen zweiten Kasten. Ein Kasten im Kasten liest sich wie ein zweites
 * Thema, und es ist dasselbe Thema: was die KI hier tun kann.
 */
/*
 * Was für alle drei Aufträge gilt, seit 0.64.0.
 *
 * Markus am 13.09.2026: «Das ist insgesamt sehr repetitiv, kannst das nicht
 * 1x sagen und dann ist es gesagt?» Der Absatz zum Datenschutz und der Satz
 * zum Guthaben stehen nun einmal, oben im Block. Leise gesetzt, weil er
 * gelesen und dann im Rücken behalten wird; was je Auftrag anders ist, steht
 * weiterhin beim Auftrag.
 */
.kirahmen {
  margin: 12px 0 0;
  padding: 0 0 0 14px;
  border-left: 3px solid var(--linie);
  font-size: 15px;
  line-height: 1.55;
  color: var(--schrift);
}

.kirahmen > p {
  margin: 0 0 8px;
}

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

/* Die Zeile zum Guthaben steht im Rahmen etwas enger als allein auf einer
   Karte; sie gehört hier zum selben Absatzfluss. */
.kirahmen > .gratiszeile {
  margin-top: 10px;
}

.kiauftrag {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
}

.kiauftrag:first-of-type {
  margin-top: 12px;
  padding-top: 0;
  border-top: none;
}

.kiauftrag > h4 {
  margin: 0 0 8px;
  font-size: 17px;
}

/* Die Vorschläge sind nach Möglichkeit gruppiert, damit sichtbar bleibt, ob
   das Modell jede gleich behandelt hat. Eine durchlaufende Liste verstecke
   ein Ungleichgewicht. */
.vorschlagsgruppe {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 6px;
  font-size: 16px;
}

/* ---------------- Argumente ---------------- */

.argumentliste {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.argument {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--linie);
  font-size: 15px;
}

.argument:first-child { border-top: 0; }

.argumentmarke {
  flex: 0 0 1.2em;
  font-weight: 700;
  text-align: center;
}

.argument.vorteil .argumentmarke { color: var(--dafuer); }
.argument.nachteil .argumentmarke { color: var(--dagegen); }
.argument.offene_frage .argumentmarke,
.argument.unsicherheit .argumentmarke { color: var(--offen); }
/* Der Kommentar trägt die leise Farbe: Er gehört dazu, wiegt aber nichts. */
.argument.kommentar .argumentmarke { color: var(--schrift-leise); }

.argumenttext { flex: 1 1 auto; }

/* ---------------- Wahl beim Festhalten ---------------- */

.wahlliste { margin-bottom: 8px; }

.wahl {
  display: flex;
  align-items: center;
  /* Umbruch erlaubt seit 0.65.0: Neben der Zählung steht bei gerechneten
     Entscheiden auch die Punktzahl, und auf Handybreite gehen beide Angaben
     nicht mehr in dieselbe Zeile wie der Name. */
  flex-wrap: wrap;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 10px 4px;
  border-top: 1px solid var(--linie);
  font-weight: 400;
  cursor: pointer;
}

.wahl:first-child { border-top: 0; }

/*
 * DIE ZEILE DER UEBERNAHMEKARTE, seit 1.22.0.
 *
 * Links die Auswahl, rechts der Weg, den Entwurf vom Gerät zu löschen. Die
 * Auswahl nimmt den Raum, den sie braucht, der Löschknopf bleibt rechts
 * aussen und steht auf Handybreite darunter statt neben einer
 * abgeschnittenen Frage.
 */
.uebernahmezeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--linie);
}

.uebernahmezeile:first-child { border-top: 0; }

.uebernahmezeile .wahl {
  flex: 1 1 60%;
  border-top: 0;
}

.wahl input[type="radio"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--akzent);
}

.bilanz {
  margin-left: auto;
  padding-left: 10px;
  color: var(--schrift-leise);
  font-size: 14px;
  white-space: nowrap;
}

/* Die Punktzahl aus der freiwilligen Rechnung, seit 0.65.0. Sie steht neben
   der Zählung und nicht an ihrer Stelle: Aus zwei Zahlen eine dritte zu
   machen wäre die Gesamtnote, die EQ-010 verbietet. Kein margin-left:auto,
   sonst schöbe die zweite Angabe die erste nach links weg. */
.punktbilanz {
  margin-left: 0;
  white-space: normal;
}

.abschlussart {
  padding: 14px 0;
  border-top: 1px solid var(--linie);
}

.abschlussart:first-of-type { border-top: 0; padding-top: 0; }
.abschlussart .hinweis { margin: 8px 0 0; }

/* ---------------- Liste der Entwürfe ---------------- */

.entwurfsliste {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.entwurfsliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--linie);
}

.listenknopf {
  flex: 1 1 12rem;
  text-align: left;
  border-color: transparent;
  background: transparent;
  font-weight: 600;
  /* Akzenttext auf einer Karte, seit 1.0.0. Begründung bei --akzent-text. */
  color: var(--akzent-text);
  padding-left: 0;
}

.listenstand {
  color: var(--schrift-leise);
  font-size: 14px;
}

/* ---------------- Ergebnis ---------------- */

.ergebniswahl {
  font-size: 21px;
  font-weight: 600;
  margin: 6px 0;
}

.bedingung { color: var(--offen); }

/*
 * Der übergangene Widerspruch im Ergebnis, seit 0.42.0.
 *
 * Er trägt die Warnfarbe und einen Balken, damit er beim Überfliegen nicht
 * untergeht. Er steht bewusst IM Ergebnis und nicht daneben: Was auf dem
 * Blatt fehlt, das jemand weiterreicht, ist später nicht mehr da.
 */
.warnfeld {
  color: var(--warnung);
  border-left: 3px solid var(--warnung);
  padding-left: 10px;
  margin-top: 10px;
}

/* ---------------- Bereiche und Auswahl, seit 0.43.0 ---------------- */

/*
 * Die Leiste mit den Bereichen. Sie bricht um statt zu scrollen: Wer
 * vierzehn Bereiche hat, soll alle sehen, und eine waagrechte Scrollleiste
 * am Handy findet niemand.
 */
.bereichsleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.bereichsknopf {
  border: 1px solid var(--linie);
  background: var(--karte);
  color: var(--schrift);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 15px;
  cursor: pointer;
  /* 44 Punkte hoch, wie jedes Bedienelement in futurino. */
  min-height: 44px;
}

.bereichsknopf:hover,
.bereichsknopf:focus-visible {
  border-color: var(--akzent);
}

/* Der gewählte Bereich ist gefüllt und nicht nur farbig umrandet: Eine
   Umrandung allein unterscheidet sich zu wenig, und wer den Filter
   vergisst, sucht später Entscheide, die vor ihm liegen. */
.bereichsknopf.gewaehlt {
  background: var(--akzent);
  color: var(--akzent-schrift);
  border-color: var(--akzent);
  font-weight: 600;
}

.bereichsknopf .bereichszahl {
  opacity: 0.75;
  margin-left: 6px;
}

/*
 * Die Schlagwörter. Eckig statt rund und mit einer Raute, damit sie sich
 * beim ersten Blick von den Bereichen darüber unterscheiden. Zwei
 * Ordnungen, die gleich aussehen, sind keine zwei Ordnungen.
 */
.schlagwortleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.schlagwortknopf {
  border: 1px solid var(--linie);
  background: var(--karte);
  color: var(--schrift);
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
}

.schlagwortknopf::before {
  content: "#";
  color: var(--schrift-leise);
  margin-right: 3px;
}

.schlagwortknopf:hover,
.schlagwortknopf:focus-visible {
  border-color: var(--akzent);
}

.schlagwortknopf.gewaehlt {
  background: var(--akzent-blass);
  border-color: var(--akzent);
  font-weight: 600;
}

.schlagwortknopf .bereichszahl {
  opacity: 0.75;
  margin-left: 5px;
}

/* Die Wörter an einer Zeile der Liste. Sie sind keine Knöpfe: Angeklickt
   würde man hier den Entscheid öffnen wollen und nicht filtern. */
.schlagwortmarken {
  display: inline;
}

.schlagwortmarke {
  display: inline-block;
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 5px;
  font-size: 13px;
  color: var(--schrift-leise);
}

.bereichsliste {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.bereichsliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--linie);
}

.bereichsliste .bereichsname {
  flex: 1 1 180px;
  min-width: 0;
}

/*
 * Die Fussleiste des Auswahlmodus. Sie klebt unten am Bild, weil die Liste
 * lang ist: Wer unten zwanzig Kästchen anhakt, soll nicht zum Entfernen
 * wieder hinaufscrollen.
 */
.auswahlleiste {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--karte);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
}

/* Die Zeile eines Eintrags im Auswahlmodus: Kästchen links, Text daneben. */
.auswahlzeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.auswahlzeile input[type="checkbox"] {
  margin-top: 12px;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.auswahlzeile .auswahlinhalt {
  flex: 1 1 auto;
  min-width: 0;
}

.ersatzkopie {
  margin-top: 14px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 14px;
}

/* ---------------- Fusszeile ---------------- */

.fuss {
  max-width: 900px;
  margin: 24px auto 0;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
  color: var(--schrift-leise);
  font-size: 14px;
}

.fuss p { margin: 4px 0; }

.waechter {
  color: var(--warnung);
  font-weight: 600;
}

@media (min-width: 1025px) {
  body { font-size: 18px; }
  .karte { padding: 24px; }
}

/* ---------------- Kriterien, Etappe 2 ---------------- */

.kriterienliste {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.kriterium {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--linie);
}

.kriteriumname {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Eine Bedingung sieht anders aus als ein Abwägungskriterium, weil sie etwas
   anderes tut: Sie schliesst aus, statt zu gewichten. */
.kriterium.muss .kriteriumname::before {
  content: '!';
  display: inline-block;
  min-width: 1.4em;
  margin-right: 0.4rem;
  color: var(--warnung);
  font-weight: 700;
}

/* Jedes Bedienelement bleibt mit dem Daumen treffbar, auch die Auswahlfelder
   in der Erfüllungsfrage und die Zahlenfelder der Vertiefung. Vor der Fassung
   0.3.0 waren sie 20 Punkte hoch; der Prüfpunkt kannte sie nicht und blieb
   grün. */
select,
input[type="number"] {
  min-height: 44px;
  padding: 0.4rem 0.5rem;
  font: inherit;
  color: var(--schrift);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
}

.erfuellungsblock {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--linie);
}

.erfuellungsblock h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.zulaessigkeit {
  margin-top: 1rem;
}

.zulaessigkeitszeile {
  margin: 0.35rem 0;
  font-size: 0.95rem;
}

.zulaessigkeitszeile.unzulaessig { color: var(--dagegen); font-weight: 600; }
.zulaessigkeitszeile.ungeklaert { color: var(--offen); }
.zulaessigkeitszeile.zulaessig { color: var(--gut); }

/* In der Wahlliste beim Festhalten steht die Warnung unter der Option und
   nimmt die ganze Breite, damit sie nicht neben dem Namen untergeht. */
.wahl .zulaessigkeitszeile {
  flex-basis: 100%;
  margin: 0.2rem 0 0;
}

.schalterzeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  cursor: pointer;
}

.schalterzeile input {
  width: 22px;
  height: 22px;
}

.nutzwertzeile {
  margin: 0.3rem 0;
  font-variant-numeric: tabular-nums;
}

#gewichtsfelder input,
#nutzenwertraster input {
  max-width: 8rem;
}

/* ---------------- Konto und Übernahme, Etappe 3 ---------------- */

.kontozeile {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /*
   * Umbruch seit 0.38.0.
   *
   * Mit dem Knopf «Einstellungen» wurde die Zeile am Handy zu lang, und
   * «Werkzeuge» rutschte links aus dem Bild. Gefunden hat es
   * aufnahme_werkzeug.py bei 360 Pixeln: Der Knopf war da, war sichtbar und
   * war nicht anklickbar.
   *
   * Ein Kopf, der nicht umbricht, hat eine feste Zahl von Knöpfen, und die
   * ist beim nächsten Knopf wieder überschritten.
   */
  flex-wrap: wrap;
  row-gap: 0.35rem;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--schrift-leise);
}

.klein {
  min-height: 44px;
  padding: 0.4rem 0.7rem;
  font-size: 0.9rem;
}

/* Der gewählte Weg im Konto, angemeldet oder neu, wird hervorgehoben.
   Dieselbe Klasse wie im Weg oben, damit es sich gleich anfühlt. */
.knopfzeile .leise.hier {
  border-color: var(--akzent);
  color: var(--schrift);
  font-weight: 600;
}

.vorschaublock {
  padding-top: 0.75rem;
  border-top: 1px solid var(--linie);
}

.vorschaublock:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Der Wortlaut dessen, was übertragen wird. Feste Schrittweite, damit die
   Einrückung stimmt, und umbrechend, damit auf 360 Punkten nichts hinausragt. */
.vorschautext {
  margin: 0.5rem 0 1rem;
  padding: 0.75rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
}

/* Zahlenfelder bleiben schmal, sonst zieht sich ein Gewicht über die halbe
   Zeile. Die übrigen Eigenschaften kommen aus der Regel weiter oben. */
#gewichtsfelder input[type="number"],
#nutzenwertraster input[type="number"] {
  width: auto;
}

/* Die zwei Zahlenarten der Vertiefung stehen in getrennten Blöcken, damit
   niemand Gewichte und Punkte für dasselbe hält. */
.zahlenblock {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
}

.zahlenblock:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.zahlenblock h4 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--schrift);
}

/* Der Vermerk zur Zulässigkeit steht unter der Zahl, nicht daneben: Auf
   360 Punkten Breite hätte er sonst keinen Platz. */
.nutzwertvermerk {
  display: block;
  font-size: 14px;
  font-variant-numeric: normal;
}

.nutzwertzeile.unzulaessig { color: var(--dagegen); }
.nutzwertzeile.ungeklaert { color: var(--offen); }


/* ---------------- Die Gratisgrenze ---------------- */

/*
 * Angelegt am 07.09.2026, G-23. Drei Zustände, drei Töne, und keiner davon
 * schreit. Der aufgebrauchte Zustand ist bewusst ruhig gehalten: Er ist kein
 * Fehler, sondern das Ende eines Angebots, und wer ihn erreicht, hat nichts
 * falsch gemacht. Auffällig ist einzig die Warnung eine Runde davor, denn die
 * ist der Kern des Entscheids.
 */
.gratiszeile {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 4px solid var(--linie);
  border-radius: 6px;
  background: var(--grund);
  color: var(--schrift);
  font-size: 15px;
  line-height: 1.5;
}

.gratiszeile.gut { border-left-color: var(--gut); }
.gratiszeile.neutral { border-left-color: var(--linie); }
.gratiszeile.schlecht {
  border-left-color: var(--offen);
  font-weight: 600;
}

/* ---------------- Die Kontozeile ---------------- */

/*
 * Seit 0.7.6 mit etwas Farbe. Markus am 07.09.2026: «Das könnte auch noch
 * etwas dezente Farbe vertragen.» Dezent heisst hier: eine getönte Fläche mit
 * dunkler Schrift, kein Signalton. Die Zeile sagt einen Zustand und ruft nicht
 * zu einer Handlung; sie darf die Knöpfe daneben nicht überstrahlen.
 *
 * Grün für angemeldet und die Linienfarbe für den Gastzustand: Ohne Konto ist
 * nichts falsch, also gibt es dort auch keine Warnfarbe.
 */
/*
 * SEIT 1.7.0 IST SIE EIN KNOPF.
 *
 * Damit gilt für sie, was für jedes Bedienelement gilt: mindestens 44 Punkte
 * hoch, damit ein Daumen sie trifft. Gemessen wird das in
 * pruefe_oberflaeche.py, Punkt 9, über alle sichtbaren Knöpfe. Die eigene
 * Schriftart muss sie nennen, weil ein button sie sonst vom Betriebssystem
 * erbt und als einziges Element der Seite anders aussieht.
 */
.kontomarke {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
}

.kontomarke.an {
  background: var(--akzent);
  color: var(--akzent-schrift);
  font-weight: 600;
}

.kontomarke.aus {
  background: var(--grund);
  border: 1px solid var(--linie);
  color: var(--schrift-leise);
}

/* ---------------- Notizen ordnen ---------------- */

/*
 * Angelegt am 06.09.2026, letzter Teil der Etappe 4. Jeder Block trägt sein
 * Kriterium als Überschrift; ein Kriterium ohne Notiz bekommt keine Warnfarbe,
 * denn dass zu etwas nichts dasteht, ist ein Befund und kein Fehler.
 */
.ordnungsblock {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
}

.ordnungsblock:first-child {
  border-top: none;
  padding-top: 0;
}

#ordnungstext h4 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--schrift);
}

.ordnungsleer {
  margin: 0;
  color: var(--schrift-leise);
  font-size: 15px;
}

/* ---------------- Die Farben der Optionen ---------------- */

/*
 * Angelegt am 06.09.2026, Fassung 0.7.4. Die Begründung steht oben bei den
 * Farbvariablen. Hier stehen nur die drei Formen, in denen sie auftreten:
 * eine Marke mit dem Buchstaben, ein Streifen an einer Karte und ein Punkt
 * vor einer Zeile.
 */
.optionsmarke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  margin-right: 8px;
  border-radius: 6px;
  background: var(--optionsfarbe, var(--linie));
  color: var(--option-schrift);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* In einer Überschrift sitzt die Marke auf der Grundlinie des Textes. */
h3 .optionsmarke,
h4 .optionsmarke {
  vertical-align: middle;
}

.farbe-a { --optionsfarbe: var(--option-a); }
.farbe-b { --optionsfarbe: var(--option-b); }
.farbe-c { --optionsfarbe: var(--option-c); }
.farbe-d { --optionsfarbe: var(--option-d); }
.farbe-e { --optionsfarbe: var(--option-e); }

/*
 * Der Streifen an einer Karte, die zu einer Option gehört.
 *
 * Der Abstand zur Marke ist seit 0.7.5 grösser. Markus am 06.09.2026: «Nun ist
 * das A und B aber etwas nahe beim farbigen Strich links.» Streifen und Marke
 * tragen dieselbe Farbe, und ohne Luft dazwischen verschmelzen sie zu einem
 * Klecks, statt zwei Dinge zu sein.
 */
.optionsstreifen {
  border-left: 4px solid var(--optionsfarbe, var(--linie));
  padding-left: 14px;
}

/* Eine Zeile in einer Liste, die zu einer Option gehört. */
.optionszeile {
  border-left: 4px solid var(--optionsfarbe, var(--linie));
  padding-left: 14px;
}

/* ---------------- Etappe 5: zu zweit entscheiden ---------------- */

/*
 * Angelegt am 07.09.2026. Die Gästeseite mitmachen.php benutzt dieselbe
 * Formatdatei wie die Anwendung, damit sie nicht wie eine fremde Seite
 * aussieht. Was hier steht, sind nur die Formen, die es dort zusätzlich
 * gibt; alles andere kommt aus den Karten und Knöpfen weiter oben.
 */

/* Die Frage, um die es geht. Sie ist auf dieser Seite kein Eingabefeld,
   sondern das Wichtigste am ganzen Bildschirm. */
.grossefrage {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 600;
}

/*
 * Die Frage und ihr Stift, seit 1.17.0 (LS-55).
 *
 * Der Stift steht neben der Frage und richtet sich an ihrer ersten Zeile
 * aus, nicht an ihrer Mitte: Eine Frage über drei Zeilen liesse ihn sonst
 * in der Luft hängen.
 */
.fragezeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.fragezeile .grossefrage {
  flex: 1 1 14rem;
  min-width: 0;
}

/* Die Kriterien des Einladenden stehen als Zusammenhang da. Leise, weil der
   Gast dazu nichts sagen muss. */
.leiseliste {
  margin: 0 0 8px;
  padding-left: 20px;
  color: var(--schrift-leise);
  line-height: 1.5;
}

/* Die Kleingruppen im Pult, seit 1.39.0 mit «Umbenennen» (LS-29). Der Knopf
   steht in derselben Zeile wie der Name, damit klar ist, welche Gruppe er
   meint; beim Bearbeiten stehen Feld und Knöpfe an seiner Stelle. */
.gruppenzeile {
  margin: 4px 0;
}

.gruppenzeile .gruppenumbenennen {
  margin-left: 8px;
  vertical-align: baseline;
}

#gruppen-liste .gruppenzeile .gruppennamefeld {
  display: inline-block;
  width: min(100%, 16rem);
  margin: 0 8px 4px 0;
}

.gruppenzeile button + button {
  margin-left: 6px;
}

.haltungsblock {
  margin: 16px 0 0;
  padding-bottom: 14px;
}

.haltungsblock h4 {
  display: flex;
  align-items: center;
  margin: 0 0 8px;
}

/*
 * Die drei Antworten stehen nebeneinander, solange Platz ist, und
 * untereinander, sobald es eng wird. Auf dem Handy ist das der Normalfall,
 * und drei abgeschnittene Antworten wären schlimmer als drei Zeilen.
 */
.haltungswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 4px;
}

/*
 * Unter 480 Pixel stehen die drei untereinander. Bei 360 brach der Fluss
 * sonst nach der ersten Antwort um, und «Passt für mich» stand allein über
 * den anderen beiden; das sah nach zwei Gruppen aus, wo eine ist.
 */
@media (max-width: 480px) {
  .haltungswahl { flex-direction: column; gap: 0; }
}

.haltungspaar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
}

/* In dieser Zeile ist die Beschriftung kein eigener Absatz, sondern gehört
   zum Knopf daneben. */
.haltungspaar label {
  display: inline;
  margin: 0;
  font-weight: 400;
}

.feldschild {
  margin-top: 6px;
  font-weight: 400;
  font-size: 14px;
  color: var(--schrift-leise);
}

/* ---- Was der Einladende sieht ---- */

/* Eine Antwort einer eingeladenen Person, in der Ergebnisansicht. */
.antwortzeile {
  margin: 10px 0 0;
  padding-left: 14px;
  border-left: 4px solid var(--optionsfarbe, var(--linie));
}

.antwortzeile p {
  margin: 2px 0 0;
}

/*
 * Die Haltung als Wort mit Rahmen, nicht als Farbfläche.
 *
 * Grün für «passt» und rot für «noch nicht» wäre eine Wertung, und genau die
 * gehört nach FAM-010 nicht hierher: «Noch nicht» ist keine schlechtere
 * Antwort als «passt», sondern eine andere.
 */
.haltungsmarke {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}

/* Die Liste der Einladungen. Eine Zeile je Person, mit dem Stand dahinter. */
.einladungszeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--linie);
}

.einladungszeile:first-child {
  border-top: 0;
}

.einladungsname {
  font-weight: 600;
}

/* Der Link zum Weitergeben. Er steht in einem Feld und nicht als Text,
   damit man ihn mit einem Griff auswählen kann. */
.linkfeld {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
}

/* ---- Die Zusammenschau, seit 0.9.0 ---- */

/*
 * Eine Zeile je Möglichkeit. Der Farbstreifen links ist derselbe wie überall
 * (Bauplan 8c), damit man Möglichkeit A hier wiedererkennt.
 *
 * Was hier bewusst FEHLT: eine Einfärbung nach Lage. Grün für «einig» und rot
 * für «geteilt» wäre eine Wertung, und eine geteilte Lage ist nicht schlecht,
 * sondern der Anlass zum Reden (FAM-010).
 */
.zusammenschauzeile {
  margin: 14px 0 0;
  padding: 0 0 12px 14px;
  border-left: 4px solid var(--optionsfarbe, var(--linie));
}

.zusammenschaukopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
  font-weight: 600;
}

/* Die Stimmen nebeneinander, solange Platz ist. Sie stehen als Liste da und
   nicht als Tabelle: Eine Tabelle mit Spalten je Person lädt dazu ein, die
   Spalten zu vergleichen und zu zählen. */
.stimmzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 4px;
}

.stimme {
  font-size: 15px;
}

.stimmbemerkung {
  margin: 2px 0 0;
  color: var(--schrift-leise);
  font-size: 15px;
  line-height: 1.45;
}

/* Der Satz zur Lage. Er steht etwas abgesetzt, weil er die Deutung der Zeile
   ist und nicht eine weitere Angabe darin. */
.lagesatz {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

/* ==================================================================== *
 * Die Begrüssungsansicht, seit 0.9.3
 *
 * Sie ist die erste Ansicht für alle, die futurino noch nicht kennen, und
 * deshalb ruhiger gesetzt als der Rest: mehr Weissraum, eine grössere
 * Führungszeile, ein Bild in eigenem Bereich. Alle Farben kommen aus den
 * Variablen; die Ansicht bringt keine eigene mit, sonst stünde sie in der
 * dunklen Darstellung falsch.
 * ==================================================================== */

/*
 * KEINE ZWEITE MITTE, seit 0.9.5. Markus am 08.09.2026 zum Kopfbereich: «Das
 * hier finde ich noch nicht so schön gelöst.» Der Grund war eine doppelte
 * Zentrierung: «main» ist 900 Punkte breit und mittig, und die Begrüssung
 * legte darin nochmals eine eigene Mitte von 44 Zeichenbreiten an. Daraus
 * entstanden zwei linke Kanten, die um rund 75 Punkte auseinanderlagen, eine
 * für den Namen im Kopf und eine für alles darunter. Die Begrenzung bleibt,
 * die zweite Mitte fällt weg.
 */
/* ---------------- Die Begrüssung, umgebaut 12.09.2026 ---------------- */

/*
 * Die Seite ist breiter als eine Textspalte, weil Wort und Bild oben
 * nebeneinanderstehen. Der Text selbst bleibt schmal; dafür sorgt die
 * Begrenzung in .willkommen-wort.
 */
.willkommen {
  max-width: 62rem;
  margin: 0;
}

/*
 * Oben: Wort links, Bild und Konto rechts. Unter 860 Punkten untereinander,
 * und zwar erst der Knopf, dann das Konto, dann das Bild. Genau das war der
 * Befund der Aussenprüfung, das Bild schob den Anfang nach unten.
 */
.willkommen-oben {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.willkommen-wort {
  max-width: 34rem;
}

/*
 * DIE RECHTE SPALTE, seit 1.6.0.
 *
 * Markus am 22.09.2026: «Da ist link mit nur dem Bild zuwenig Raumnutzung,
 * gleiche das aus.» Bis 1.5.0 stand rechts allein das Bild, links alles
 * andere; die linke Spalte war doppelt so hoch, und `align-items: center`
 * liess das Bild dazwischen schweben. Jetzt trägt die Spalte Bild und
 * Konto, und beide Spalten beginnen an derselben oberen Kante.
 */
.willkommen-seite {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Am Handy steht das Konto vor dem Bild: Es gehört unter die Knöpfe, die es
   öffnen. Auf breiten Bildschirmen zählt die Reihenfolge des Markups, dort
   liegt das Bild oben. */
@media (max-width: 859px) {
  .willkommen-seite > .willkommen-konto { order: 1; }
  .willkommen-seite > .willkommen-bildfeld { order: 2; }
}

@media (min-width: 860px) {
  .willkommen-oben {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
  }
  .willkommen-wort {
    flex: 1 1 52%;
  }
  .willkommen-seite {
    flex: 1 1 48%;
    max-width: 27rem;
  }
  .willkommen-bildfeld {
    max-width: 100%;
  }
  /* Der Abstand kommt hier von der Spalte und nicht mehr vom Kasten selbst;
     sonst stünden beide übereinander. */
  .willkommen-seite > .willkommen-konto {
    margin-top: 0;
  }
}

/* Der Kicker über der Überschrift. Er trägt den Slogan ein zweites Mal, und
   das ist Absicht: Im Kopf steht er klein und beiläufig, hier ist er die
   Einordnung dessen, was gleich kommt. */
.willkommen h2 {
  font-size: 2.1rem;
  line-height: 1.15;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

@media (max-width: 480px) {
  .willkommen h2 { font-size: 1.7rem; }
}

.willkommen-text {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 1rem;
  max-width: 38rem;
}

/* Der Satz unter dem Knopf. Er nimmt der Registrierung die Rolle des
   gedanklichen Ausgangspunkts: erst die Handlung, dann die Bedingung. */
/* Schwarz statt leise, seit 0.49.0. Markus am 12.09.2026 zu drei Stellen
   auf dieser Seite: «die Schriftart wirkt hier grau, mach sie schwarz». Es
   sind Auskünfte und kein Beiwerk; leise gesetzt sahen sie aus wie
   Fussnoten und wurden überlesen. */
.willkommen-unterknopf {
  margin: -0.5rem 0 0.75rem;
  color: var(--schrift);
  font-size: 0.95rem;
}


.willkommen-bildfeld {
  margin: 0;
}

.willkommen-bild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rundung);
  border: 1px solid var(--linie);
}

.willkommen-bildfeld figcaption {
  margin-top: 0.5rem;
  color: var(--schrift);
  font-size: 0.92rem;
}

/* Die Haltung, in einer Zeile zwischen zwei Linien. Sie ist die wichtigste
   Aussage der Seite und stand bis 0.43.0 als vierter Absatz im Fliesstext. */

/* ====================================================================
 * DER EINSTIEG MIT DREI WEGEN, seit 0.49.0
 *
 * «Entscheid beginnen» ist kein Knopf mehr, sondern die Überschrift über
 * drei Wegen. Der erste trägt die Farbfläche, weil er der kürzeste ist;
 * die anderen zwei stehen daneben und nicht darunter, damit keiner wie
 * ein Nachtrag aussieht.
 * ==================================================================== */

.willkommen-einstieg {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.3rem;
}

/* .willkommen-kontobedarf ist am 21.09.2026 entfallen. Der Absatz steht
   seit 1.5.0 als erster Satz im Kontokasten; zwei Kästen mit demselben
   Inhalt liessen die Begrüssung wie zwei Seiten wirken. */

/* Hier standen bis 0.48.0 vier Blöcke, die niemand mehr braucht:
   .willkommen-zweiterweg, .willkommen-haltung, .willkommen-signatur und
   .willkommen-anmelden. Die Elemente dazu sind am 12.09.2026 aus der
   Begrüssung verschwunden; eine Regel ohne Element sieht aus, als täte sie
   etwas. */

/*
 * DIE SCHRITTLEISTE DER BEGRÜSSUNG IST WEG, seit 1.0.1.
 *
 * Mit ihr fallen ihre Regeln. Die Begründung steht in index.html an der
 * Stelle, an der sie stand; die Leiste der Entscheidstrecke hat eigene
 * Klassen und ist davon nicht berührt.
 */

.willkommen-leitfrage {
  color: var(--schrift);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 2rem;
  min-height: 1.6rem;
}

/* Die Gruppe als eigener Bereich: Text links, Weg rechts. */
/* Ein Klappfeld seit 0.50.0, mit dem grünen Grund von vorher. Die Reihe
   aus Text und Knopf ist dabei von .willkommen-gruppe nach
   .willkommen-gruppeinhalt gewandert: Ein details-Element ist selbst kein
   Flexbehälter, sein Inhalt beginnt erst nach dem summary. */
.willkommen-gruppe {
  background: var(--akzent-blass);
  border-radius: var(--rundung);
  padding: 1.25rem;
  margin: 0 0 2rem;
}

.willkommen-gruppe > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.4;
  list-style: none;
}

/* Der Pfeil wird selbst gezeichnet, damit er in beiden Farbwahlen und in
   jedem Browser gleich aussieht. Dieselbe Bauart wie bei .hilfe summary. */
.willkommen-gruppe > summary::-webkit-details-marker { display: none; }

.willkommen-gruppe > summary::before {
  content: "\25B8";
  display: inline-block;
  width: 1em;
  color: var(--akzent);
}

.willkommen-gruppe[open] > summary::before {
  content: "\25BE";
}

.willkommen-gruppe > summary:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 4px;
}

.willkommen-gruppeinhalt {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

/* Auf den Textteil eingegrenzt, seit 0.50.0. Vorher stand hier
   `.willkommen-gruppe p`, und diese Regel schlug wegen ihrer höheren
   Spezifität jede Regel, die einen Absatz im Kasten über eine einzelne
   Klasse ansprach. Der Hinweis unter dem Knopf bekam dadurch margin 0 und
   klebte am Knopf; Markus hat es gesehen, und zwar bevor ein Prüfwerkzeug
   es je gemessen hätte. */
.willkommen-gruppetext p {
  margin: 0;
  line-height: 1.6;
}

/*
 * ETWAS MEHR HERVORGEHOBEN, seit 0.50.0, und ausdrücklich nicht ganz so viel.
 *
 * Markus am 12.09.2026: «Der Button ‹Mit einer Gruppe arbeiten› soll etwas
 * mehr hervorgehoben werden.» Der erste Versuch gab ihm die Klasse «haupt»,
 * also die volle Farbfläche. Das hat pruefe_ansichten.py abgewiesen, und zu
 * Recht: Auf der Begrüssung steht dann eine zweite gleich laute Handlung
 * neben «Direkt starten, ohne Konto», und zwei gleich laute Handlungen sind
 * keine Führung mehr, sondern eine Gabelung ohne Wegweiser.
 *
 * Die Lösung liegt dazwischen. Der Knopf behält den hellen Grund, bekommt
 * aber die Akzentfarbe für Schrift und Rand, einen kräftigeren Schnitt und
 * etwas mehr Fläche. Er hebt sich damit deutlich vom Grün des Kastens ab und
 * bleibt doch leiser als der Einstieg oben.
 */
.willkommen-gruppeknopf button {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 1.2rem;
  font-weight: 700;
  /* Die Schrift trägt die normale Schriftfarbe und nicht die Akzentfarbe.
     Gemessen am 12.09.2026: Akzent auf Kartengrund erreicht in der dunklen
     Farbwahl 6.1 zu 1 und verfehlt damit die Schwelle von 7 zu 1, die
     pruefe_willkommen.py misst. Die Hervorhebung trägt der zwei Punkte
     dicke Rand, der Schnitt und die Fläche; die Farbe der Schrift ist
     dafür nicht nötig. */
  color: var(--schrift);
  background: var(--karte);
  border: 2px solid var(--akzent);
}

/* Schwarz und nicht grau, seit 0.50.0 auf Markus' Wunsch. Der Hinweis sagt
   die Voraussetzung für den Knopf darüber, und eine Voraussetzung, die
   leiser steht als alles andere, liest niemand vor dem Klick. Das fette
   «du» im Markup trennt die Leitung von den Teilnehmenden. */
.willkommen-gruppehinweis {
  /* Eine Leerzeile Abstand zum Knopf, seit 0.50.0. Markus am 12.09.2026:
     «Das klebt fast am Button.» Bei 0.4rem sassen die zwei so eng, dass der
     Satz wie eine zweite Zeile des Knopfes wirkte statt wie ein Hinweis
     darunter. */
  margin: 1rem 0 0;
  color: var(--schrift);
  font-size: 0.92rem;
  line-height: 1.5;
}

@media (min-width: 700px) {
  .willkommen-gruppeinhalt {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .willkommen-gruppetext {
    flex: 1 1 60%;
  }
  .willkommen-gruppeknopf {
    flex: 0 0 auto;
    text-align: center;
  }
  .willkommen-gruppeknopf button {
    width: auto;
    min-width: 14rem;
  }
}

/* Die zwei Auskünfte nebeneinander, ab 700 Punkten. */
.willkommen-auskunft {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 700px) {
  .willkommen-auskunft {
    flex-direction: row;
    gap: 1.5rem;
  }
  .willkommen-auskunft details {
    flex: 1 1 50%;
  }
}

/*
 * Drei Wege statt einem, seit 0.49.0.
 *
 * Auf breiten Bildschirmen nebeneinander, am Handy untereinander. Der
 * Umbruch kommt von flex-wrap und nicht von einer Medienabfrage: Die
 * Knöpfe tragen verschieden lange Wörter, und die Breite, ab der sie
 * nebeneinander passen, hängt an ihnen und nicht an einer festen Zahl.
 */
.willkommen-wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.willkommen-wege button {
  flex: 1 1 auto;
  min-width: 12rem;
  min-height: 52px;
  font-size: 1.05rem;
}

/* Der erste Weg bleibt der breiteste, auch wenn alle drei nebeneinander
   stehen. Wer nichts liest, trifft damit den kürzesten. */
.willkommen-wege button.haupt {
  flex: 2 1 auto;
}

@media (max-width: 700px) {
  .willkommen-wege button {
    flex: 1 1 100%;
  }
}

@media (min-width: 700px) {
  .willkommen-wege button {
    width: auto;
    min-width: 16rem;
  }
}

/* .willkommen-fuss ist am 13.09.2026 weggefallen. Der Absatz, den sie
   gestaltet hat, steht seit 0.52.0 als .erprobungsfuss im Fuss der Seite und
   damit auf jeder Ansicht. Eine Regel ohne Element bleibt nicht stehen. */



/*
 * Ein Knopf, der wie ein Verweis aussieht.
 *
 * Gebraucht für die zwei zurückhaltenden Wege der Begrüssung. Er muss ein
 * Knopf bleiben, weil er eine Ansicht wechselt und keine Seite öffnet; ein
 * a-Element ohne Ziel wäre für Vorlesegeräte ein Verweis ins Nichts.
 * Die Unterstreichung macht sichtbar, dass er anklickbar ist, ohne dass er
 * neben dem Hauptknopf um Aufmerksamkeit ringt.
 */
.alsverweis {
  background: none;
  border: none;
  padding: 0.5rem 0;
  min-height: 44px;
  color: var(--schrift);
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.alsverweis:hover,
.alsverweis:focus-visible {
  color: var(--akzent);
}

/* Die Illustration ist hell angelegt. Auf dunklem Grund leuchtet sie und
   zieht die Aufmerksamkeit vom Text ab, obwohl sie nur begleitet. Deshalb
   wird sie dort gedämpft, nicht umgefärbt: Die Farben bleiben, nur die
   Helligkeit geht zurück. */
@media (prefers-color-scheme: dark) {
  :root:not([data-farbe="hell"]) .willkommen-bild {
    filter: brightness(0.82) saturate(0.95);
  }
}

/* ==================================================================== *
 * Der Satz zur Neigung, seit 0.10.0
 *
 * Er steht ruhig und ohne Farbe der Lage. Grün für Übereinstimmung und Rot
 * für Widerspruch wäre eine Wertung, und ein Widerspruch zwischen Wahl und
 * Neigung ist nicht schlecht, sondern der Ort, an dem sich Nachdenken lohnt.
 * Dieselbe Überlegung wie bei der Zusammenschau in 0.9.0.
 * ==================================================================== */

.neigungssatz {
  margin: 0.85rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--linie);
  line-height: 1.6;
}

/* ==================================================================== *
 * Die Münze, seit 0.11.0
 *
 * Der Fall wird gross gesetzt, weil er der Augenblick ist, auf den es
 * ankommt. Der Satz danach bleibt ruhig: Er hält fest und deutet nicht,
 * und eine hervorgehobene Deutung wäre genau der Fehler, gegen den diese
 * Karte gebaut ist. Keine Farbe nach Gefühl, aus demselben Grund wie bei
 * der Zusammenschau und beim Neigungssatz.
 * ==================================================================== */

.muenzwahl {
  margin: 0 0 1rem;
}

.muenzfall {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linie);
}

.muenzsatz {
  margin: 0.75rem 0 0;
  line-height: 1.6;
}

/* ==================================================================== *
 * Tabellen in der Konsole, seit 0.13.0
 *
 * `.vorschautext` bricht Zeilen um, und das ist dort richtig, wo eine
 * Vorschau auf einen Text steht. Für eine Tabelle mit festen Spalten ist es
 * falsch: Am 08.09.2026 brach die Kontenübersicht mitten in der Zeile, und
 * die Spalten standen danach untereinander statt nebeneinander. Eine Tabelle
 * scrollt lieber seitwärts, als dass sie ihre Ordnung verliert.
 * ==================================================================== */

.konsolentabelle {
  margin: 0.5rem 0 1rem;
  padding: 0.75rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
}

/* ==================================================================== *
 * Der Knopf, der etwas endgültig wegnimmt, seit 0.14.0
 *
 * Er trägt die Warnfarbe und nicht die Hauptfarbe. Ein Knopf, der wie
 * «Weiter» aussieht, wird wie «Weiter» gedrückt. Zugleich ist er nicht
 * auffälliger als der Rest der Seite: Er soll gefunden werden, wenn man ihn
 * sucht, und nicht ins Auge springen, wenn man etwas anderes tut.
 * ==================================================================== */

/*
 * DER KNOPF FUER DAS UNWIEDERBRINGLICHE, berichtigt am 12.09.2026.
 *
 * Er war gefüllt und trug weisse Schrift. Zwei Fehler auf einmal: Erstens
 * gewann «button.leise» beim Farbwert, weil es eine Marke mehr nennt und
 * damit schwerer wiegt; auf dem dunkelroten Grund stand deshalb dunkle
 * Schrift, und Markus las am 12.09.2026 nichts mehr. Zweitens wäre im
 * dunklen Modus weisse Schrift auf dem dort hellen Warnton ebenso
 * unleserlich gewesen.
 *
 * Jetzt trägt er die Warnfarbe als Schrift und als Rand. Sie ist in beiden
 * Modi auf 7 zu 1 gegen den Kartengrund ausgelegt, denn dieselbe Farbe
 * trägt jede Fehlermeldung. Die Marke ist bewusst «button.warnknopf» und
 * nicht «.warnknopf»: Nur so wiegt sie gleich schwer wie «button.leise»,
 * und weil sie später steht, gewinnt sie.
 */
button.warnknopf {
  background: none;
  color: var(--warnung);
  border: 1px solid var(--warnung);
  font-weight: 600;
}

button.warnknopf:hover,
button.warnknopf:focus-visible {
  background: var(--warnung);
  /* Auf dem gefüllten Grund gilt die Farbe der Karte als Schrift. Sie ist
     im hellen Modus weiss und im dunklen fast schwarz, also in beiden
     Fällen der Gegenpol zur Warnfarbe. */
  color: var(--karte);
}

#loeschkarte input[type="password"],
#loeschkarte input[type="text"] {
  display: block;
  width: 100%;
  max-width: 24rem;
  margin: 0.25rem 0 1rem;
}

/* ---- Der Anlass, Etappe 7 Teilschritt 1, seit 0.15.0 ---- */

/*
 * Der Beitrittscode wird in einem Raum vorgelesen oder an eine Wand geworfen.
 * Deshalb gross, mit Abstand zwischen den Zeichen und in einer Schrift, in
 * der sich die Zeichen nicht ähneln. Wer ihn von der letzten Reihe aus lesen
 * soll, liest keine 16 Pixel.
 */
.codeanzeige {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.18em;
  margin: 8px 0 4px;
  color: var(--schrift);
}

/*
 * Die zwei Wege zum Beitritt, seit 0.26.0.
 *
 * Nebeneinander und gleich breit, weil beide gleich gelten. Stünde der
 * QR-Code oben und der Code klein darunter, läse sich der Code als Notbehelf,
 * und wer keine Kamera hat, fühlte sich als Sonderfall. Auf einem schmalen
 * Bildschirm rutschen sie untereinander; dort steht der Code zuerst, weil er
 * ohne alles funktioniert.
 */
.beitrittspaar {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.beitrittsseite {
  flex: 1 1 240px;
  min-width: 0;
}

/*
 * Der helle Grund gehört zum QR-Code und nicht zur Seite: In der dunklen
 * Farbwahl wäre ein durchsichtiger Code dunkel auf dunkel, und die meisten
 * Kameras lesen nur dunkel auf hell. Der Rahmen hält ihn auch dann noch
 * sichtbar vom weissen Grund der hellen Farbwahl getrennt.
 */
.qrfeld {
  display: inline-block;
  padding: 6px;
  background: #ffffff;
  border: 1px solid var(--linie);
  border-radius: 6px;
  line-height: 0;
}

.qrfeld svg {
  display: block;
  /*
   * DIE GRÖSSE KOMMT AUS DEM BILD, seit 1.51.0.
   *
   * Bis dahin stand hier eine feste Kante von 200 Punkten. qr.js rundet die
   * Kante auf ganze Felder (bei 33 Feldern 198 Punkte), und die feste
   * Breite hier zog sie wieder auf 200: Jedes Feld bekam einen Bruchteil,
   * die Kanten verwischten, und das Lesegerät in pruefe_bericht.py fand
   * den Code sporadisch nicht (LS-36, LS-42). Genau das steht als Regel in
   * qr.js; das Stilblatt hatte sie überschrieben.
   */
  width: auto;
  height: auto;
}

.linktext {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/*
 * DIE KURZE ADRESSE ALS LINK, seit 1.39.0.
 *
 * Sie steht mitten im Satz und soll die Zeile nicht auseinanderreissen.
 * Der Innenabstand oben und unten gibt ihr trotzdem eine Bedienfläche von
 * 44 Punkten, und der gleich grosse negative Aussenabstand nimmt ihn für
 * den Zeilenfluss wieder zurück. Farbe und Unterstreichung kommen vom
 * Text: Die Adresse ist dieselbe, die man ansagt, und sie soll so aussehen.
 */
a.beitrittslink {
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.wahlzeile {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-weight: 400;
}

#sitzungskarte input[type="text"],
#sitzungskarte select,
#sitzungskarte textarea {
  display: block;
  width: 100%;
  max-width: 30rem;
  margin-bottom: 4px;
}

#sitzungskarte textarea {
  font-family: inherit;
  font-size: 15px;
}

/* Die Vorabinformation auf der Beitrittsseite ist mit 0.86.0 entfallen; die
   Regeln .vorab sind mit ihr weggefallen. Die Begründung steht in
   beitreten.php über der verbliebenen Karte. */

@media (max-width: 520px) {
  .codeanzeige {
    font-size: 32px;
  }
}

/* ---- Der Baustein, Etappe 7 Teilschritt 2, seit 0.16.0 ---- */

/*
 * Eine Unterkarte gliedert innerhalb der Sitzungskarte, ohne eine zweite
 * Karte zu sein. Zwei Karten nebeneinander läsen sich wie zwei getrennte
 * Sachen; die Aufgabe gehört aber zur Sitzung und hat ohne sie keinen Sinn.
 */
.unterkarte {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
}

.unterkarte h4 {
  margin: 0 0 8px;
}

/* ====================================================================
 * DIE VORBEFRAGUNG, seit 0.46.0
 *
 * Eine Tabelle mit Balken. Die Balkenbreite kommt aus app.js, weil sie
 * von den Zahlen abhängt; alles andere steht hier.
 * ==================================================================== */

/*
 * Der Dateiknopf.
 *
 * Ein input vom Typ «file» sieht in jedem Browser anders aus und lässt
 * sich nicht gestalten. Deshalb wird es versteckt und sein Label sieht
 * aus wie ein Knopf. Wichtig: versteckt mit position und nicht mit
 * display:none, denn ein Feld, das gar nicht da ist, erreicht die
 * Tastaturbedienung nicht mehr.
 */
.dateiknopf {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  font: inherit;
  color: var(--schrift);
  cursor: pointer;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
}

.dateiknopf:hover {
  border-color: var(--akzent);
}

#vorbefragung-datei {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Der Umriss beim Tabbing gehört an das Label, denn das Feld ist unsichtbar. */
#vorbefragung-datei:focus-visible + #vorbefragung-uebernehmen,
.dateiknopf:focus-within {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

/* Die Karte steht seit 0.47.0 bei der Frage und nicht mehr im Pult. Sie
   trägt dieselbe Form wie die anderen Klappfelder dort. */
.vorbefragungskarte summary {
  font-weight: 600;
}

#vorbefragung-text {
  width: 100%;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9rem;
}

.vorbefragungsfrage {
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--grund);
  border-radius: var(--rundung);
}

.vorbefragungstitel {
  margin: 0 0 6px;
  font-weight: 600;
}

.vorbefragungszeile {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 2px 0;
}

/* Feste Breite für den Stufennamen, damit die Balken untereinander an
   derselben Stelle beginnen. Ein Balkendiagramm, dessen Nulllinie
   wandert, ist keines. */
.vorbefragungsstufe {
  flex: 0 0 40%;
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vorbefragungsbalken {
  display: inline-block;
  min-width: 2px;
  height: 14px;
  background: var(--akzent);
  border-radius: 2px;
}

.vorbefragungszahl {
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* Auf dem Handy ist für vierzig Prozent Stufenname kein Platz. Dort steht
   der Name über dem Balken. */
@media (max-width: 700px) {
  .vorbefragungszeile {
    flex-wrap: wrap;
  }

  .vorbefragungsstufe {
    flex: 0 0 100%;
    white-space: normal;
  }

  .vorbefragungsbalken {
    flex: 1 1 auto;
  }
}

/*
 * Offen und erledigt sehen verschieden aus, seit 0.18.2.
 *
 * Markus am 08.09.2026: «Ich hätte als Moderator fast übersehen, dass ich
 * jetzt auf Übernehmen klicken müsste.» Vor einer Gruppe sucht niemand eine
 * Liste ab, in der beides gleich aussieht. Der offene Beitrag trägt deshalb
 * den Akzent und etwas Luft, der erledigte tritt zurück.
 */
.beitragszeile.offen {
  border-left: 4px solid var(--akzent);
  padding-left: 12px;
  margin-left: -16px;
}

.beitragszeile.erledigt {
  opacity: 0.7;
}

/* «Zwei warten auf dich» ist eine Aufforderung und keine Statistik. */
#aufgabe-zahl.wartet {
  color: var(--schrift);
  font-weight: 600;
}

.beitragszeile {
  padding: 8px 0;
  border-bottom: 1px solid var(--linie);
}

.beitragszeile:last-child {
  border-bottom: none;
}

/*
 * DIE WANDKNOEPFE IM STEUERPULT, seit 0.86.0.
 *
 * Drei kleine Knöpfe je Beitrag: herausstellen, höher, tiefer. Sie stehen
 * in einer eigenen Zeile unter der Umsetzzeile und umbrechen auf dem Handy,
 * weil das Steuerpult auch dort bedienbar bleiben muss.
 */
.wandknopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* Die beiden Pfeile sind quadratisch und gleich breit. Zwei Knöpfe
   verschiedener Breite nebeneinander lassen die Liste zappeln, sobald sich
   die Beschriftung des dritten ändert. */
.wandknopfzeile button[aria-label] {
  min-width: 2.6em;
  text-align: center;
}

/*
 * Der herausgestellte Beitrag, auch im Pult erkennbar.
 *
 * Die Leitung sieht die Wand oft nicht, weil sie hinter dem Beamer steht
 * oder auf den zweiten Bildschirm blickt. Ohne diese Spur im Pult müsste
 * sie sich merken, welchen Beitrag sie herausgestellt hat, und das ist im
 * Raum genau die Art von Gedächtnisaufgabe, die schiefgeht.
 */
.beitragszeile.herausgestellt {
  background: var(--akzent-blass);
  border-radius: 8px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
}

.beitragstext {
  margin: 0 0 4px;
}

#aufgabe-beitraege .knopfzeile {
  gap: 8px;
  flex-wrap: wrap;
}

#beitrag {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 16px;
}

/* ==================================================================== *
 * DER BERICHT, Etappe 8 Teilschritt 2, seit 0.26.0
 *
 * Pflichtenheft Kapitel 14 und 62. Ein Bericht wird gelesen und gedruckt,
 * und beides braucht eine andere Form. Am Bildschirm bleibt er bei der
 * Gestaltung der Anwendung; auf Papier fallen Farbflächen, Rahmen und
 * Bedienelemente weg, weil sie dort Tinte kosten und nichts sagen.
 * ==================================================================== */
.berichtkopf {
  margin-bottom: 4px;
}

.berichtkurz {
  border-left: 4px solid var(--akzent);
}

.kurzliste {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 6px 16px;
}

.kurzliste dt {
  font-weight: 600;
  color: var(--schrift-leise);
}

.kurzliste dd {
  margin: 0;
}

.berichtteil h3 {
  margin-top: 0;
}

.berichtuntertitel {
  margin: 14px 0 4px;
  font-size: 15px;
}

.berichtliste {
  margin: 0;
  padding-left: 20px;
}

.berichtliste li {
  margin: 3px 0;
}

/*
 * Die Kennzeichnung einer Leerstelle, DOS-010.
 *
 * Sie steht in normaler Schriftfarbe und nicht ausgegraut: Was offen ist,
 * ist eine Auskunft und kein Nebensatz. Ein blasses «Offen» liest sich als
 * Formsache, und genau das ist es nicht.
 */
.berichtoffen {
  margin: 0;
  font-weight: 600;
}

/* ==================================================================== *
 * DIE ZUSAMMENSCHAU VOR DEM ENTSCHEID, seit 0.60.0
 *
 * Markus am 13.09.2026: «Mache es schön und übersichtlich, das ist die
 * Visitenkarte des Tools.»
 *
 * Der Gestaltungsgedanke in einem Satz: Ruhe durch Ordnung, nicht durch
 * Schmuck. Gleiche Blöcke in gleicher Form, viel Weissraum, Farbe nur
 * dort, wo sie etwas unterscheidet, und keine einzige Fläche, die etwas
 * hervorhebt, das der Mensch selbst gewichten soll (EQ-010).
 *
 * Die Optionsfarben sind dieselben wie auf dem ganzen Weg. Wer die Marke A
 * im Abwägen blau gesehen hat, findet sie hier blau wieder; eine zweite
 * Farbordnung für dieselbe Sache wäre eine zweite Wahrheit.
 * ==================================================================== */

/* Seit 0.61.2 der Untertitel unter der Überschrift «Gesamtbild» und nicht
   mehr der Titel selbst. Als Titel in Kapitälchen war er zu leise: Markus sah
   die Ansicht und fand ihren Namen nirgends. */
/* Fett seit 0.65.0, auf Markus' Wunsch. Der Satz sagt, wozu die ganze Ansicht
   da ist, und stand als leise Nebenbemerkung unter dem Titel. */
.schaumarke {
  margin: 0 0 2px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--schrift);
}

.schauzeile {
  margin: 0 0 24px;
  color: var(--schrift-leise);
  font-size: 0.95rem;
}

/* Ein Block. Kein Kasten mit Rand, sondern eine Linie oben und viel Luft:
   Neun Kästen untereinander sehen aus wie ein Formular, neun Abschnitte wie
   ein Dokument. Die Schau ist ein Dokument. */
.schaublock {
  border-top: 1px solid var(--linie);
  padding-top: 18px;
  margin: 0 0 30px;
}

.schaublock h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.schauunter {
  margin: 0 0 14px;
  color: var(--schrift-leise);
  font-size: 0.95rem;
  line-height: 1.5;
}

.schauleer {
  margin: 6px 0;
  color: var(--schrift-leise);
  font-style: italic;
  line-height: 1.55;
}

.schauleer.klein { font-size: 0.9rem; margin: 2px 0 10px; }

/* ---------------- Die Kreuztabelle der Bedingungen ---------------- */

/* Auf schmalen Geräten scrollt die Tabelle waagrecht, statt die Spalten zu
   Streifen zu quetschen. Eine unlesbare Tabelle ist schlechter als eine,
   die man schieben muss. */
.schautabellenhuelle {
  overflow-x: auto;
}

.schautabelle {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
}

.schautabelle th,
.schautabelle td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linie);
}

.schautabelle thead th {
  border-bottom: 2px solid var(--linie);
  font-size: 0.95rem;
}

.schautabelle tbody th {
  font-weight: 600;
  max-width: 20rem;
}

.schauspaltenkopf {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.schaustand {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--schrift-leise);
}

.schaustand.unzulaessig { color: var(--warnung); }

.schauzelle .schauzeichen {
  font-size: 1.1rem;
  margin-right: 0.35em;
}

.schauzelle.ja .schauzeichen { color: var(--akzent); }
.schauzelle.nein .schauzeichen { color: var(--warnung); }
.schauzelle.offen .schauzeichen { color: var(--schrift-leise); }

.schauzelle .schauwort { font-size: 0.92rem; }
.schauzelle.offen .schauwort { color: var(--schrift-leise); }

/* ---------------- Die Kriterien ---------------- */

.schaukriterien {
  list-style: none;
  margin: 0;
  padding: 0;
}

.schaukriterien li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6em;
  padding: 9px 0;
  border-bottom: 1px solid var(--linie);
}

.schaukriterien li:last-child { border-bottom: none; }

.schaukriteriumname { flex: 1 1 12rem; }

/* Die Wichtigkeit als Wort in einer ruhigen Kapsel. Drei Stufen, drei
   Abstufungen derselben Farbe und keine Ampel: Ein rot markiertes «weniger
   wichtig» wäre eine Bewertung, die niemand vorgenommen hat. */
.schauchip {
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.82rem;
  color: var(--schrift-leise);
  white-space: nowrap;
}

.schauchip.am_wichtigsten {
  border-color: var(--akzent);
  background: var(--akzent-blass);
  color: var(--schrift);
  font-weight: 600;
}

.schauchip.wichtig { border-color: var(--akzent); }

/* ---------------- Die Optionen nebeneinander ---------------- */

.schauraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 14px;
}

.schaukarte {
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--karte);
  padding: 14px 16px;
}

.schaukarte h4 {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0 0 8px;
  font-size: 1rem;
}

.schauseite {
  margin: 12px 0 4px;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--schrift-leise);
}

.schauargumente,
.schauliste {
  margin: 0;
  padding-left: 1.1rem;
  line-height: 1.55;
}

.schauargumente li,
.schauliste li { margin: 3px 0; }

/* Dafür und dagegen unterscheiden sich am Punkt vor der Zeile und nicht an
   der Schriftfarbe: Farbiger Text liest sich schlechter, und beide Seiten
   sind gleich viel wert. */
.schauargumente.vorteil li::marker { color: var(--akzent); }
.schauargumente.nachteil li::marker { color: var(--warnung); }

/* ---------------- Rechnung, Neigung, Münze ---------------- */

.schaupunkte,
.schaumuenze {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 6px 0;
  padding: 8px 12px;
  border-radius: var(--rundung);
  background: var(--flaeche, transparent);
}

.schauvermerk,
.schauvorbehalt {
  color: var(--schrift-leise);
  font-size: 0.9rem;
  line-height: 1.55;
}

.schauvermerk { margin-left: 0.4em; }

/* Die Leseanleitung zur Rechentabelle, seit 0.65.0. Sie steht zwischen
   Tabelle und Vorbehalt: erst verstehen, was dasteht, dann lesen, wie weit es
   trägt. Leise wie der Vorbehalt, aber ohne dessen Linie, damit die beiden
   nicht wie zwei Warnungen aussehen. */
.schaulesehilfe {
  margin: 10px 0 0;
  color: var(--schrift-leise);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Die Summenzeile der Rechentabelle. Sie schliesst die Spalten ab, deshalb
   eine kräftigere Linie darüber und fette Zahlen. */
.schaurechenweg tfoot th,
.schaurechenweg tfoot td {
  padding-top: 10px;
  border-top: 2px solid var(--schrift-leise);
  font-weight: 600;
}

.schaurechenweg tfoot th {
  text-align: left;
}

.schaurechenweg tfoot .schaunebenzahl {
  font-weight: 400;
}

.schauvorbehalt {
  margin: 10px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--linie);
}

/* ---------------- Die Lückenliste ---------------- */

/* Der einzige Block mit einem farbigen Grund, und zwar dem ruhigen der
   Anwendung. Er hebt sich ab, weil er das Wichtigste sagt, und er schreit
   nicht, weil eine Lücke kein Fehler ist. */
.schaublock:last-of-type .schauluecken,
.schauluecken {
  margin: 0;
  padding: 14px 16px 14px 34px;
  background: var(--akzent-blass);
  border-radius: var(--rundung);
  line-height: 1.6;
}

.schauluecken li { margin: 5px 0; }

.schauvoll {
  margin: 0;
  padding: 14px 16px;
  background: var(--akzent-blass);
  border-radius: var(--rundung);
  line-height: 1.6;
}

.schauschluss {
  margin: 26px 0 0;
  padding: 18px 20px;
  border-left: 6px solid var(--akzent);
  border-radius: var(--rundung);
  background: var(--karte);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.45;
}

/* ---------------- Auf dem Handy ---------------- */

/*
 * Unter 700 Punkten kippt die Kreuztabelle in Zeilen um. Eine Tabelle, die
 * seitwärts geschoben werden muss, zeigt auf dem Handy genau eine Spalte,
 * und niemand merkt, dass es weitere gibt. Umgekippt steht je Bedingung ein
 * Block, und in ihm eine Zeile je Option, mit ihrem Namen davor.
 */
@media (max-width: 700px) {
  .schautabelle { min-width: 0; }

  .schautabelle thead { display: none; }

  .schautabelle tbody tr {
    display: block;
    padding: 10px 0 4px;
    border-bottom: 1px solid var(--linie);
  }

  .schautabelle tbody th {
    display: block;
    padding: 0 0 6px;
    border: none;
  }

  .schautabelle tbody td {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 3px 0 3px 14px;
    border: none;
  }

  .schautabelle tbody td::before {
    content: attr(data-option);
    flex: 1 1 auto;
    color: var(--schrift-leise);
    font-size: 0.9rem;
  }

  .schauzelle .schauwort { order: 3; }
  .schauzelle .schauzeichen { order: 2; margin-right: 0; }
}

/* ---------------- Auf Papier ---------------- */

/* Das PDF entsteht über das Druckmenü. Was auf Papier nichts zu suchen hat,
   verschwindet; was zusammengehört, bleibt zusammen. */
@media print {
  /* Auf Papier gehören Bedienelemente nicht hin: die Kontozeile, die
     Wegleiste, der Rückwegstreifen und das Sitzungsband sind Wege durch die
     Anwendung und keine Aussage über den Entscheid. */
  .kontozeile,
  .weg,
  .rueckweg,
  .sitzungsband {
    display: none !important;
  }

  .schaumarke { margin-top: 0; }

  .schaublock {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .schaukarte,
  .schauluecken,
  .schauvoll,
  .schauschluss {
    background: none;
    border: 1pt solid #999999;
  }

  .schauschluss { border-left: 3pt solid #000000; }

  .schautabelle th,
  .schautabelle td { border-bottom: 1pt solid #999999; }

  .schautabellenhuelle { overflow: visible; }
}

@media print {
  /* Ein Knopf auf Papier ist eine Zumutung. */
  .nichtdrucken,
  .fuss {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 11pt;
  }

  .karte,
  .berichtteil,
  .berichtkurz {
    border: none;
    box-shadow: none;
    background: none;
    padding: 0;
    margin: 0 0 14pt;
    /* Ein Berichtsteil, der über den Seitenwechsel hinweg zerrissen wird,
       verliert seine Überschrift auf der vorigen Seite. */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .berichtkurz {
    border-left: 2pt solid #000000;
    padding-left: 10pt;
  }

  .kurzliste dt {
    color: #000000;
  }

  .leisetext {
    color: #333333;
  }

  h2 {
    font-size: 16pt;
  }

  h3 {
    font-size: 13pt;
  }

  /* Jedes Notfallblatt beginnt auf einer neuen Seite. Wer im Ausfall blättert,
     sucht ein Blatt und keinen Abschnitt. Das erste nicht, sonst käme nach dem
     Deckblatt eine leere Seite. */
  .notfallblatt {
    break-before: page;
    page-break-before: always;
  }

  /* Auf Papier braucht die Zähltabelle sichtbare Linien und Platz für die
     Hand. Am Bildschirm genügt weniger. */
  .notfalltabelle th,
  .notfalltabelle td {
    border: 1pt solid #000000;
  }

  .notfallfeld { height: 32pt; }

  .notfallzeilen li {
    border-bottom: 1pt solid #000000;
    min-height: 26pt;
  }

  /* Die Zähltabelle darf über den Seitenwechsel laufen, wenn sie muss; eine
     Aussage mit sieben Stufen passt sonst nicht. Die Kopfzeile wiederholt
     sich dabei. */
  .notfalltabelle thead { display: table-header-group; }

  a[href] {
    text-decoration: none;
    color: #000000;
  }
}

/* ==================================================================== *
 * DIE WANDANZEIGE, seit 0.27.0
 *
 * Markus am 09.09.2026: «so gestalten, dass ich es 1:1 auf dem Beamer
 * zeigen könnte, adressatengerecht und sauber dargestellt».
 *
 * Ein Bildschirm an einer Wand wird aus fünf Metern gelesen, im
 * Vorbeigehen, von Leuten, die gleichzeitig zuhören. Daraus folgt alles
 * andere: sehr grosse Schrift, viel Weissraum, ein Gegenstand je Bild,
 * keine Karten, keine Rahmen, kein Bedienelement.
 *
 * Die Grössen wachsen mit dem Fenster (vw und clamp), weil ein Beamer
 * 1280 Punkte breit sein kann und ein Bildschirm 3840. Feste Punktgrössen
 * wären auf einem der beiden falsch.
 * ==================================================================== */
/*
 * AN DER WAND WIRD NICHT GEROLLT, seit 0.94.1.
 *
 * Markus am 19.09.2026, mit zwei Aufnahmen derselben Anzeige: «Einmal hat es
 * an der Seite eine Scrollbar, einmal nicht. Das verändert die Position des
 * Textes leicht, wenn es automatisch zwischen diesen beiden Modi
 * umschaltet.»
 *
 * Gemessen: Die Seite war in jeder Breite 48 Punkte höher als das Fenster.
 * Woher die kamen, ist zweitrangig; entscheidend ist, dass eine Rollleiste
 * rund fünfzehn Punkte Breite nimmt und damit ALLES nach links rückt. Der
 * QR-Code rechnet seine Kante aus der Fensterbreite, und so konnte die eine
 * Seite die andere auslösen. **Eine Rückkopplung zwischen Inhalt und
 * Fenstermass hat an einer Projektion nichts zu suchen.**
 *
 * Gerollt wird hier ohnehin nie: Niemand im Saal kann die Wand scrollen, und
 * der Inhalt wird von der Einpassung passend gemacht.
 */
.wandhtml {
  height: 100%;
  overflow: hidden;
}

.wandseite {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--grund);
  color: var(--schrift);
}

/*
 * Feste Höhe statt Mindesthöhe.
 *
 * Mit min-height wächst die Bühne mit ihrem Inhalt, und dann misst die
 * Einpassung den Inhalt gegen sich selbst und findet nie etwas zu gross. Der
 * Rahmen muss die Höhe des Bildschirms haben, damit «passt nicht» überhaupt
 * feststellbar ist. Gemessen hat das der Prüfstand, nachdem er den langen
 * Fall bekommen hatte; mit dem kurzen war er grün geblieben.
 */
#wand {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/*
 * Der Inhalt beginnt oben und steht nicht in der Mitte.
 *
 * Zwei Gründe. Erstens steht die Frage dadurch bei jedem Bild auf derselben
 * Höhe; ein Titel, der je nach Länge des Inhalts wandert, lässt die Gruppe
 * bei jedem Wechsel neu suchen. Zweitens rechnet die Einpassung von oben, und
 * mit einer zentrierten Bühne verschöbe sich der verkleinerte Inhalt nach
 * oben aus dem Bild heraus. Gefunden beim Ansehen der Aufnahme, nicht beim
 * Nachdenken.
 */
.wandbuehne {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /*
   * Seitlich mehr Polster als oben und unten, seit 0.30.0: Dort sitzen die
   * zwei Blätterflächen. Der Inhalt wird dadurch schmaler und nie verdeckt.
   * Ein Pfeil über einer Zeile nähme ihr ein Wort, und niemand wüsste welches.
   */
  /*
   * Unten mehr Polster als oben, seit 1.18.2: Dort liegen seit dieser
   * Fassung das Logo und die Blätterzeile, beide fest an der Fensterkante.
   * Ohne das Polster liefe der Inhalt dahinter. Die Einpassung rechnet mit
   * demselben Wert, weil sie das Polster der Bühne ausliest.
   */
  padding: clamp(16px, 2.6vw, 56px) clamp(56px, 6vw, 120px)
           clamp(56px, 6vw, 104px);
  max-width: 1800px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  min-height: 0;
}

/*
 * Der Inhalt wird als Ganzes verkleinert, wenn er nicht auf die Höhe passt
 * (siehe einpassen() in js/wand.js). Der Ursprung liegt oben mittig, damit
 * die Frage beim Verkleinern an ihrem Platz bleibt statt zu wandern.
 */
.wandinhalt {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.3vw, 24px);
  width: 100%;
  transform-origin: top left;
}

/*
 * DER KOPF MIT DEM TITEL, seit 0.90.0.
 *
 * Er liegt neben `wandinhalt` und nicht darin, weil die Einpassung nur den
 * Inhalt verkleinert. Dadurch steht die Frage auf jeder Folie an derselben
 * Stelle und in derselben Grösse, gleichgültig wie voll die Folie ist.
 */
.wandkopf {
  width: 100%;
  flex: 0 0 auto;
  padding-bottom: clamp(10px, 1.3vw, 24px);
}

/* Die Frage. Sie steht immer zuoberst und ist das Grösste im Bild, solange
   die Gruppe schreibt. */
.wandtitel {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 76px);
  line-height: 1.15;
  font-weight: 700;
}

/*
 * Die kleine Fassung, seit 0.91.0. Sobald die Antworten dastehen, ist die
 * Frage eine Überschrift über das, was gelesen wird, und nicht mehr die
 * Aufforderung, die den Raum trägt. Rund die halbe Höhe, damit die Beiträge
 * den Platz bekommen und weniger Folien nötig sind.
 */
.wandtitel.klein {
  font-size: clamp(20px, 2.4vw, 42px);
  line-height: 1.2;
}

/* Eine einzelne Aussage einer Ratingrunde. Kleiner als die Rahmenfrage,
   grösser als alles andere: Beantwortet wird sie und nicht die Frage. */
.wandaussage {
  margin: clamp(10px, 1.4vw, 26px) 0 0;
  font-size: clamp(20px, 2.6vw, 44px);
  line-height: 1.2;
  font-weight: 600;
}

/* Wie viele geantwortet haben. Gross, weil es während der Runde das
   Einzige ist, was sich bewegt. */
.wandzahl {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 60px);
  font-weight: 600;
}

.wandmitte {
  margin: clamp(6px, 0.8vw, 14px) 0 0;
  font-size: clamp(18px, 2.2vw, 38px);
  font-weight: 600;
}

/* Die Einordnung. Klein, aber nicht ausgegraut: Der Satz, dass eine
   Abstimmung nichts entscheidet, ist keine Fussnote. */
.wandklein {
  margin: 0;
  font-size: clamp(14px, 1.4vw, 24px);
  color: var(--schrift);
}

.wandwarten {
  font-size: clamp(16px, 1.8vw, 28px);
  color: var(--schrift-leise);
}

.wandliste {
  margin: 0;
  padding-left: 1.2em;
  font-size: clamp(18px, 2.2vw, 36px);
  line-height: 1.35;
}

.wandliste li {
  margin: 0.25em 0;
}

/*
 * Zwei Spalten für kurze Beiträge, seit 1.16.0. Wann sie gelten, entscheidet
 * js/wand.js am Inhalt; hier steht nur, wie sie aussehen.
 *
 * Ein Beitrag bricht nie über die Spaltengrenze. Eine Zeile, deren zweite
 * Hälfte in der nächsten Spalte weitergeht, liest an einer Wand niemand.
 */
.wandliste.zweispaltig {
  column-count: 2;
  column-gap: clamp(28px, 3.4vw, 80px);
}

.wandliste.zweispaltig li {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Die hervorgehobene Zeile bleibt ungeteilt und bekommt ihre Spalte für
   sich, weil ihr Rand links sonst mitten im Text stünde. */
.wandliste.zweispaltig li.hervor {
  break-inside: avoid;
}

/*
 * DIE HERVORHEBUNG UND DIE ANMERKUNG, seit 0.86.0.
 *
 * Markus am 16.09.2026: Er will die Beiträge des Blitzlichts an der Wand
 * kommentieren. Der Beitrag, über den gerade gesprochen wird, wird gross;
 * die übrigen treten zurück und bleiben stehen.
 *
 * WARUM DAS ZURUECKTRETEN ÜBER DIE DECKKRAFT LAEUFT UND NICHT ÜBER DIE FARBE
 *
 * Ein Beamer zeigt Grautöne flauer als ein Bildschirm, und eine zweite
 * Graustufe wäre im Raum von der ersten kaum zu unterscheiden. Die
 * Deckkraft wirkt auch dann noch, wenn der Projektor den Kontrast
 * zusammenschiebt. Sie bleibt bei 0.45 und nicht darunter: Was die Gruppe
 * nicht mehr lesen kann, ist so gut wie weggenommen, und weggenommen werden
 * soll hier nichts.
 */
.wandliste li.hervor {
  opacity: 1;
  font-weight: 600;
  font-size: 1.25em;
  /* Der Strich links steht in der Akzentfarbe und markiert die Stelle auch
     für jemanden, der die Schriftgrösse aus zwanzig Metern nicht mehr
     vergleichen kann. */
  border-left: 6px solid var(--akzent);
  padding-left: 0.5em;
  margin-left: -0.6em;
}

.wandliste li.blass {
  opacity: 0.45;
}

.wandanmerkung {
  margin: clamp(14px, 1.8vw, 32px) 0 0;
  padding-top: clamp(8px, 1vw, 18px);
  border-top: 2px solid var(--linie);
  font-size: clamp(16px, 2vw, 32px);
  line-height: 1.3;
  /* Die Anmerkung trägt die Akzentfarbe und ist damit als fremde Stimme
     erkennbar. Wer die Wand fotografiert und später ansieht, muss
     unterscheiden können, was die Gruppe geschrieben hat und was die
     Leitung dazugesagt hat. */
  color: var(--akzent);
}

/* ---- Die Auszählung ---- */
.wandbalkenzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.4fr auto;
  align-items: center;
  gap: clamp(10px, 1.4vw, 26px);
  margin: clamp(6px, 0.7vw, 12px) 0;
}

.wandbalkenname {
  font-size: clamp(16px, 1.9vw, 32px);
}

.wandbalken {
  display: block;
  height: clamp(16px, 2vw, 34px);
  border-radius: 999px;
  background: var(--linie);
  overflow: hidden;
}

/* Alle Balken tragen dieselbe Farbe. Ein hervorgehobener Spitzenreiter wäre
   an einer Wand schon die halbe Empfehlung, und eine Konsultativabstimmung
   empfiehlt nichts. */
.wandbalkenfuellung {
  display: block;
  height: 100%;
  background: var(--akzent);
}

.wandbalkenzahl {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 38px);
  min-width: 2ch;
  text-align: right;
}

/* ---- Die Ratingkonferenz als gestapelte Balken, seit 1.32.0 ----
   Markus am 26.09.2026 mit einer Excel-Grafik als Vorlage. Links die
   Aussage, in der Mitte ein Balken über hundert Prozent der gültigen
   Einschätzungen, rechts n, fehlend und die Mitte. Farben: warm für
   Ablehnung, blau für Zustimmung, grau in der Mitte; geprüft auf
   Farbsehschwäche. Die Farbe hängt an der Stufe und nicht an ihrer
   Position, damit «eher zu» auf jeder Skalenlänge gleich aussieht. */
/* Seit 1.33.0 ein klares Rot statt des Brauntons (Markus: «Wähle für das
   Braun eine schönere Farbe»); weissen Ziffern bleibt ein Kontrast von 4.9. */
.likert-gar_nicht { --likert: #cc3d2e; --likert-schrift: #ffffff; }
.likert-weitgehend_nicht { --likert: #df7556; --likert-schrift: #2a1a14; }
.likert-eher_nicht { --likert: #eba283; --likert-schrift: #2a211d; }
.likert-teils { --likert: #d6d6d3; --likert-schrift: #262624; }
.likert-eher { --likert: #86acd6; --likert-schrift: #16222f; }
.likert-weitgehend { --likert: #5a8cc3; --likert-schrift: #ffffff; }
.likert-voll { --likert: #2e5f99; --likert-schrift: #ffffff; }

.likertlegende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.6em;
  margin: clamp(12px, 1.6vw, 28px) 0 clamp(14px, 1.8vw, 30px);
  font-size: clamp(15px, 1.5vw, 26px);
}

.likertlegendeeintrag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
}

.likertfarbe {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 3px;
  background: var(--likert);
}

.likerttafel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) auto;
  align-items: center;
  column-gap: clamp(14px, 1.8vw, 32px);
  row-gap: clamp(12px, 1.6vw, 28px);
}

/* Lange Aussagen, seit 1.33.0: mehr Breite links, kleinere Schrift. */
.likerttafel.lang {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr) auto;
}

.likerttafel.sehrlang {
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto;
  row-gap: clamp(10px, 1.3vw, 22px);
}

.likertaussage {
  font-size: clamp(16px, 1.75vw, 30px);
  font-weight: 600;
  line-height: 1.2;
}

.likerttafel.lang .likertaussage {
  font-size: clamp(14px, 1.45vw, 25px);
}

.likerttafel.sehrlang .likertaussage {
  font-size: clamp(14px, 1.3vw, 23px);
  font-weight: 500;
}

.likertbalken {
  display: flex;
  gap: 2px;
  height: clamp(28px, 3.2vw, 56px);
  border-radius: 6px;
  overflow: hidden;
}

.likertbalken.leer {
  align-items: center;
  padding: 0 0.8em;
  background: var(--linie);
  color: var(--schrift-leise);
  font-size: clamp(14px, 1.3vw, 22px);
}

.likertsegment {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 0;
  min-width: 0;
  background: var(--likert);
  color: var(--likert-schrift);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(14px, 1.5vw, 26px);
}

.likertziffer {
  position: relative;
  z-index: 2;
  padding: 0 0.3em;
  border-radius: 4px;
  background: var(--likert);
}

/*
 * Das Gitternetz, seit 1.33.0. Es liegt über den Balken und reicht über
 * alle Zeilen. Jede Linie ist doppelt, hell und dunkel nebeneinander,
 * damit sie auf dem dunklen Blau eines Segments ebenso zu sehen ist wie
 * auf hellem Grau und neben den Balken auf dem Hintergrund.
 */
.likertgitter {
  position: relative;
  align-self: stretch;
  pointer-events: none;
  z-index: 1;
}

.likertlinie {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.30);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.55);
}

.likertlinie.mitte {
  border-left: 2px solid rgba(0, 0, 0, 0.55);
  box-shadow: 2px 0 0 rgba(255, 255, 255, 0.6);
}

.likertkennwerte {
  display: flex;
  flex-direction: column;
  max-width: 15em;
  font-size: clamp(14px, 1.3vw, 23px);
  line-height: 1.25;
}

.likertn {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.likertfehlend,
.likertmitte {
  color: var(--schrift-leise);
}

.likertachse {
  position: relative;
  height: 1.4em;
  margin-top: -0.3em;
  color: var(--schrift-leise);
  font-size: clamp(12px, 1.1vw, 19px);
  font-variant-numeric: tabular-nums;
}

.likertachse span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.likertachse span:first-child {
  transform: none;
}

.likertachse span:last-child {
  transform: translateX(-100%);
}

/* ---- Der Beitritt ---- */
/*
 * DIE ZEILE BRICHT SEIT 1.16.0 NICHT MEHR, SONDERN DER CODE SCHRUMPFT.
 *
 * Bis 1.15.0 stand hier `flex-wrap: wrap`. Passten Code, Adresse und
 * QR-Code nicht nebeneinander, rutschte das Bild unter den Text, der Block
 * wurde doppelt so hoch, und die Einpassung stauchte dafür die ganze Wand.
 * Dagegen stand eine Gegenprüfung in der Einpassung (`zeileBricht()`), die
 * den Umbruch bemerkte und einen breiteren Zustand suchte.
 *
 * Das ist der Umweg. **Wenn ein Umbruch nie erwünscht ist, wird er
 * abgeschaltet und nicht nachträglich erkannt.** Der QR-Code darf statt
 * dessen schrumpfen, mit einer Untergrenze, unter die er nicht fällt; was
 * aus der letzten Reihe lesbar sein muss, misst pruefe_qr.py.
 *
 * Aufgefallen ist der Umweg am 23.09.2026: Die Grösse des QR-Codes hing
 * davon ab, wann er zuletzt gerechnet wurde, und damit hing auch der
 * Umbruch davon ab. Ein Prüflauf war grün, der nächste rot, ohne dass sich
 * am Bild etwas geändert hatte.
 */
.wandbeitritt {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 48px);
  flex-wrap: nowrap;
}

/* Der Text gibt zuerst nach, denn er bricht in sich um; das Bild kann das
   nicht. Unter 200 Punkte geht der Code trotzdem nie. */
.wandbeitritt .wandbeitrittseite {
  flex: 1 1 auto;
  min-width: 0;
}

.wandbeitritt .wandqr {
  flex: 0 1 auto;
  min-width: 200px;
}

.wandbeitritt .wandqr svg,
.wandbeitritt .wandqr img,
.wandbeitritt .wandqr canvas {
  display: block;
  width: 100%;
  height: auto;
}

.wandbeitritt.klein {
  margin-top: clamp(16px, 2.4vw, 44px);
  padding-top: clamp(12px, 1.6vw, 28px);
  border-top: 1px solid var(--linie);
}

.wandbeitrittseite {
  min-width: 0;
}

.wandmarke {
  margin: 0 0 0.2em;
  font-size: clamp(16px, 2.2vh, 28px);
  color: var(--schrift-leise);
}

/* Der Code. Das grösste Zeichen der ganzen Anwendung, mit Abstand zwischen
   den Buchstaben und in einer Schrift, in der sich 0 und O nicht ähneln.
   Wer ihn von der letzten Reihe abtippt, liest keine 40 Pixel. */
.wandcode {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
}

/* Seit 0.92.0 etwas zurückgenommen, damit Code, Trenner und der grössere
   QR-Code nebeneinander Platz haben. Bei 190 Punkten brach die Zeile um, und
   ein umgebrochener Beitritt sieht aus wie ein Fehler. */
.wandbeitritt.gross .wandcode {
  font-size: clamp(56px, 8.5vw, 150px);
}

/*
 * Seit 0.92.0 deutlich grösser. Markus am 18.09.2026: «futurino.ch/da ist
 * viel zu klein geschrieben. Das ist extrem wichtig und sticht nicht hervor.
 * Der QR-Code ist ebenfalls viel zu klein.»
 *
 * Der kleine Beitritt steht in der Minute da, in der jemand im Raum sein
 * Handy hervornimmt. **Was jemand abtippen soll, wird nicht danach bemessen,
 * wie viel Platz daneben übrig ist.**
 */
/*
 * Seit 1.16.0 an der Höhe gemessen und nicht an der Breite.
 *
 * Der Beitrittsstreifen steht unter den Beiträgen und teilt sich mit ihnen
 * die Höhe der Wand, nicht ihre Breite. Mit `vw` wuchs er auf einer breiten,
 * flachen Anzeige genau dort, wo der Platz fehlt, und die Einpassung nahm
 * das anschliessend dem ganzen Bild wieder weg.
 */
.wandbeitritt.klein .wandcode {
  font-size: clamp(34px, 6.4vh, 76px);
}

.wandadresse {
  margin: 0.3em 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/*
 * DIE ADRESSE IN DER GRÖSSE DES CODES, seit 0.94.0.
 *
 * Markus am 19.09.2026: «Der Link darf gleich gross geschrieben sein wie der
 * Beitrittscode.» Im kleinen Bild ist das wörtlich umgesetzt, dort teilen
 * sich Code und Adresse dieselbe Grösse.
 *
 * Im grossen Bild geht es nicht ganz so weit, und der Grund ist die Zeile:
 * «futurino.ch/da» hat dreizehn Zeichen, der Code sechs. In gleicher Grösse
 * wäre die Adresse fast doppelt so breit wie der Code, und neben dem
 * vergrösserten QR-Code bräche die Zeile um. **Ein umgebrochener Beitritt
 * sieht aus wie ein Fehler**, und das war der Befund vom 18.09.2026. Die
 * Adresse steht deshalb bei etwa drei Vierteln der Codegrösse, was in der
 * Wirkung fast gleich aussieht, weil die längere Zeile den Unterschied
 * ausgleicht.
 */
.wandadresse {
  margin: 0.3em 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Seit 1.32.0 etwas grösser. Der grosse Beitritt steht seither auch
   während einer verdeckten Ratingrunde, und die Adresse stand dort bei
   drei Fünfteln des Codes statt der drei Viertel, die 0.94.0 zusagt
   (gemessen in pruefe_wandweg.py: 80 zu 136 Punkte bei 1600 Breite). */
.wandbeitritt.gross .wandadresse {
  font-size: clamp(30px, 6.4vw, 112px);
  font-weight: 600;
}

.wandbeitritt.klein .wandadresse {
  font-size: clamp(20px, 5.2vh, 62px);
  font-weight: 600;
}

/*
 * CODE UND ADRESSE PASSEN IN IHRE SPALTE, seit 1.39.0.
 *
 * Markus am 27.09.2026, mit einem Bild vom iPad: «futurino.ch/d», und das
 * a lief unter den QR-Code. Gemessen am Prüfstand war die Adresse im grossen
 * Bild bei allen vier Fenstergrössen breiter als ihre Spalte, auch am Beamer;
 * dort fiel es nur nicht auf, weil der QR-Code die Spitze verdeckte. Die
 * Grössen hingen an der Fensterbreite, der Platz aber an dem, was der
 * QR-Code übrig lässt.
 *
 * Seither misst die Spalte sich selbst (container-type), und beide Grössen
 * sind zusätzlich an ihre Breite gebunden. Die Zahlen folgen aus der
 * Schrift: Ein Zeichen der Festbreitenschrift ist rund 0,6 Geviert breit,
 * gerechnet wird mit 0,63, damit ein Rand bleibt. Die Zahl der Zeichen
 * setzt js/wand.js als --zeichen, denn «futurino.ch/da» hat vierzehn und
 * die Adresse des Prüfstands siebzehn. Bei vierzehn Zeichen ergibt das gut
 * elf Prozent der Spalte. Der Code steht bei 15,5 Prozent, damit die Adresse
 * dort bei rund drei Vierteln des Codes bleibt, wie seit 0.94.0 zugesagt.
 */
.wandbeitritt.gross .wandbeitrittseite {
  container-type: inline-size;
  flex: 1 1 0;
}

.wandbeitritt.gross .wandcode {
  font-size: min(clamp(56px, 8.5vw, 150px), 15.5cqi);
}

.wandbeitritt.gross .wandadresse {
  font-size: min(clamp(30px, 6.4vw, 112px), calc(100cqi / (var(--zeichen, 14) * 0.63)));
}

/*
 * Das Hochformat, seit 1.39.0. Untereinander statt nebeneinander, und im
 * Hochformat hängt die Schrift nur noch an der Breite der Spalte, die jetzt
 * die ganze Bildbreite ist. Das «oder» liegt waagrecht zwischen den Wegen.
 */
.wandbeitritt.gross.hoch {
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 3vh, 48px);
}

.wandbeitritt.gross.hoch .wandbeitrittseite {
  flex: 0 0 auto;
  width: 100%;
}

.wandbeitritt.gross.hoch .wandcode {
  font-size: min(150px, 15.5cqi);
}

.wandbeitritt.gross.hoch .wandadresse {
  font-size: min(112px, calc(100cqi / (var(--zeichen, 14) * 0.63)));
}

.wandbeitritt.gross.hoch .wandtrenner {
  flex-direction: row;
  align-self: stretch;
  min-height: 0;
  width: 100%;
}

.wandbeitritt.gross.hoch .wandtrenner::before,
.wandbeitritt.gross.hoch .wandtrenner::after {
  width: auto;
  height: 2px;
}

/* Dasselbe im kleinen Bild. Im Hochformat stand dort «futurino.ch/da»
   ebenfalls breiter als seine Spalte, gemessen am iPad mit 820 Punkten. */
.wandbeitritt.klein .wandbeitrittseite {
  container-type: inline-size;
  flex: 1 1 0;
}

.wandbeitritt.klein .wandcode {
  font-size: min(clamp(34px, 6.4vh, 76px), 15.5cqi);
}

.wandbeitritt.klein .wandadresse {
  font-size: min(clamp(20px, 5.2vh, 62px), calc(100cqi / (var(--zeichen, 14) * 0.63)));
}

/*
 * Die Wand erbt kein Knopfpolster, seit 1.39.0.
 *
 * Die allgemeine Regel .klein ist für kleine Knöpfe gebaut und gibt ihnen
 * 0,7 rem Innenabstand links und rechts. Der Wandtitel und der kleine
 * Beitrittsblock tragen dieselbe Klasse als Grössenangabe und rückten
 * dadurch gegenüber allem anderen ein Stück nach rechts. Markus am
 * 27.09.2026: «Die Frage ist nicht linksbündig zum übrigen Text.»
 */
.wandtitel.klein {
  min-height: 0;
  padding: 0;
}

.wandbeitritt.klein {
  min-height: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

/*
 * DER QR-CODE FÜLLT SEINE KACHEL, seit 0.94.0.
 *
 * Markus am 19.09.2026: «Der QR-Code darf den ganzen weissen Bereich
 * ausfüllen.» Er hat recht, und der weisse Rand war doppelt: Das Bild bringt
 * die genormte Ruhezone von vier Feldern selbst mit (siehe `js/qr.js`), und
 * dieser Kasten legte noch einmal Polster darum. Zweimal Rand sieht nach
 * einem kleinen Code in einer grossen Kachel aus.
 *
 * Das Polster ist weg, die Rundung bleibt. Den hellen Grund braucht es
 * weiterhin: In der dunklen Farbwahl wäre der Code sonst dunkel auf dunkel
 * und für jede Kamera unlesbar.
 */
.wandqr {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}

/* ---- Die Leiste ---- */
/*
 * FESTE HÖHE, seit 0.98.0.
 *
 * Gemessen am 20.09.2026: Die Bühne war beim Öffnen 862 Punkte hoch und
 * anderthalb Sekunden später 834; Titel und Inhalt rutschten um achtundzwanzig
 * Punkte nach unten. Die Leiste steht über der Bühne, und was sie an Höhe
 * gewinnt, nimmt sie dem Bild darunter. Mit einer festen Höhe kann sie das
 * nicht mehr: **Was über dem Bild steht, darf seine Höhe nicht vom Inhalt
 * abhängig machen.**
 */
.wandleiste {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  height: 40px;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* «still» und nicht «weg», seit 0.98.0. Der alte Name kollidierte mit der
   Wegleiste der Entscheidstrecke; die Begründung steht in js/wand.js. */
.wandleiste.still {
  opacity: 0;
}

/* Sie kommt zurück, sobald der Zeiger sie berührt, auch wenn sie unsichtbar
   ist. Ein Knopf, den man nicht mehr findet, ist schlimmer als einer, der
   stört. */
.wandleiste:hover {
  opacity: 1;
}

.wandstand {
  font-size: 14px;
}

/*
 * Die Blätterzeile der Wandanzeige, seit 0.27.0.
 *
 * Sie ist klein und trotzdem da: Ohne sie hielte die Gruppe die gezeigte
 * Aussage für die einzige, und niemand fragte nach der zweiten.
 */
/*
 * DIE BLAETTERZEILE STEHT IN DER ECKE, seit 1.18.2.
 *
 * Markus am 23.09.2026: «Entweder das Logo oder das Blatt X von Y ganz nach
 * unten rechts (oder links) auf der Folie und das Logo auf die andere Seite
 * ganz unten. So kann die Fläche noch besser genutzt werden.»
 *
 * Bis dahin stand sie im Fluss, also unter den Beiträgen und mitten im
 * Bild, und kostete dort eine Zeile Höhe auf jedem Blatt. Der Fuss mit dem
 * Logo stand darunter und kostete eine zweite. Zwei Zeilen Fusszeug unter
 * einer Folie, die für Beiträge gebaut ist.
 *
 * Jetzt teilen sich beide die untere Kante, das Logo links und die Zeile
 * rechts, und keines nimmt dem Inhalt mehr Höhe weg. Positioniert wird
 * gegen das Fenster und nicht gegen die Bühne: Die Bühne wird verkleinert,
 * und eine mitskalierte Fusszeile stünde je nach Fülle des Blattes anders
 * hoch. **Was auf jeder Folie an derselben Stelle stehen soll, hängt nicht
 * an dem, was darüber steht.**
 */
/*
 * DER RECHTE RAND FOLGT DEM INHALT, seit 1.28.0.
 *
 * Bis 1.27.0 stand die Zeile 2.6vw vom Rand und damit im Streifen des
 * rechten Blätterpfeils, der mit z-index 5 darüberliegt und bis 104 Punkte
 * breit ist. Der Knopf «Weiterlaufen lassen» lag zur Hälfte unter dem Pfeil:
 * Wer auf sein rechtes Ende klickte, blätterte statt weiterlaufen zu lassen.
 * Solange die Zeile im eingepassten Inhalt stand, fiel das nicht auf, weil
 * sie ohnehin woanders stand. Jetzt endet sie dort, wo der Inhalt endet,
 * also am seitlichen Polster der Bühne.
 */
.wandblatt {
  position: fixed;
  right: clamp(56px, 6vw, 120px);
  bottom: clamp(10px, 1.4vw, 24px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.wandblattpunkte {
  display: inline-flex;
  gap: 8px;
}

.wandblattpunkt {
  display: block;
  width: clamp(8px, 0.9vw, 14px);
  height: clamp(8px, 0.9vw, 14px);
  border-radius: 999px;
  background: var(--linie);
}

.wandblattpunkt.hier {
  background: var(--akzent);
}

.wandblatttext {
  font-size: clamp(13px, 1.3vw, 22px);
  color: var(--schrift-leise);
}

/* Die Bühne läuft nicht über. Was nicht passt, wird verkleinert und
   geblättert, nicht weggescrollt: An einer Wand scrollt niemand. */
.wandbuehne {
  overflow: hidden;
}

/*
 * Der Einstieg in die Wandanzeige, seit 0.28.0.
 *
 * Markus am 09.09.2026: «Mach den Button an die Wand projizieren prominenter.» Er
 * war ein flacher Verweis zwischen leisen Knöpfen und ging unter, obwohl er
 * das Erste ist, was jemand mit einer Gruppe vor sich braucht.
 *
 * Er ist der einzige Knopf des Steuerpults in der Akzentfarbe. Das ist die
 * ganze Auszeichnung: Wer alles hervorhebt, hebt nichts hervor.
 */
.wandeinstieg {
  margin: 18px 0 6px;
  padding: 16px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--karte);
}

a.wandknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 26px;
  font-size: 17px;
  font-weight: 700;
  color: var(--akzent-schrift);
  background: var(--akzent);
  border: 1px solid var(--akzent);
  border-radius: 8px;
  text-decoration: none;
}

a.wandknopf:hover {
  text-decoration: underline;
}

a.wandknopf:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

.wandeinstieg .feldhilfe {
  margin: 10px 0 0;
}

/*
 * Der Vergleich zweier Runden, Etappe 8 Teilschritt 3.
 *
 * Abgesetzt, aber nicht hervorgehoben. Der Vergleich ist eine Auskunft neben
 * der Verteilung und nicht ihr Ergebnis; wer ihn gross setzt, macht aus einer
 * Veränderung einen Befund.
 */
.rundenvergleich {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--linie);
}

.vergleichmarke {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 15px;
}

.vergleichzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin: 4px 0;
  font-size: 15px;
}

/* Der Pfeil zwischen den zwei Zahlen sagt «von hier nach dort» und nichts
   über die Richtung im Sinn von besser oder schlechter. Deshalb keine Farbe,
   kein Plus, kein Minus. */
.vergleichwerte {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

/*
 * Das «oder» zwischen Code und QR-Code, seit 0.28.0.
 *
 * Markus am 10.09.2026: «Mache deutlich, dass man ENTWEDER den Code braucht
 * oder den QR-Code.» Zwei Dinge nebeneinander liest man zuerst als zwei
 * Schritte; der Strich trennt, und das Wort benennt, was er trennt.
 *
 * Der Strich läuft über die ganze Höhe des Blocks, damit er beide Seiten
 * gleich behandelt. Wäre er kurz, sähe eine Seite aus wie die Hauptsache und
 * die andere wie eine Fussnote.
 */
.wandtrenner {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: clamp(90px, 12vw, 240px);
  position: relative;
}

.wandtrenner::before,
.wandtrenner::after {
  content: "";
  flex: 1;
  width: 2px;
  background: var(--linie);
}

.wandoder {
  font-size: clamp(15px, 1.8vw, 30px);
  font-weight: 600;
  color: var(--schrift-leise);
  text-transform: lowercase;
}

/*
 * Der Platz für ein Logo, seit 0.28.0 vorbereitet.
 *
 * Markus am 10.09.2026: «Gestalte diese Folien für an die Wand so, dass in
 * einer späteren Ausbaustufe irgendwo noch Platz wäre für das Logo eines
 * Organisationsberaters.»
 *
 * Der Bereich steht ausserhalb der Bühne und unter ihr. Solange kein Logo
 * eingerichtet ist, ist er nicht da und nimmt keinen Platz weg; sobald eines
 * kommt, verkleinert die Einpassung den Inhalt darüber von selbst. Genau
 * dafür ist sie gebaut.
 *
 * Unten, weil es dort nichts überlagert. Die Seite, an der es steht, hat
 * am 21.09.2026 von rechts nach links gewechselt; die Begründung steht
 * unten bei justify-content.
 */
.wandfuss {
  /* Seit 1.18.2 in der Ecke, wie die Blätterzeile gegenüber. Ohne dies
     stünde das Logo im Fluss und nähme dem Inhalt eine Zeile Höhe. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  /*
   * LINKSBÜNDIG, seit 1.3.0.
   *
   * Markus am 21.09.2026, mit einem Bild seiner ersten Wand unter eigenem
   * Auftritt: «Stelle das Logo unten linksbündig dar.»
   *
   * Bis 1.2.0 stand es rechts, mit der Begründung von 0.28.0, dort stehe
   * seit jeher das Zeichen des Hauses. Das gilt für ein Zeichen, das
   * begleitet. Ein Auftritt begleitet nicht, er sagt, wer einlädt, und
   * gelesen wird von links. Der Blick, der die Frage oben links beginnt,
   * findet den Absender unten am selben Rand.
   */
  justify-content: flex-start;
  align-items: center;
  padding: 0 clamp(16px, 2.6vw, 56px) clamp(10px, 1.4vw, 24px);
}

/*
 * Ohne Logo nimmt der Fuss keinen Platz, seit 0.94.1.
 *
 * `display: flex` schlägt die Regel des Browsers für das Attribut `hidden`,
 * denn eine Klasse wiegt schwerer als ein Elementname. Der Fuss stand
 * deshalb mit seinem Polster da, obwohl `wand.php` ihn ausgeblendet hatte,
 * und schob die Seite über die Fensterhöhe hinaus. **Jede eigene
 * display-Regel hebt `hidden` auf, wenn man es nicht dazuschreibt.**
 */
.wandfuss[hidden] {
  display: none;
}

.wandlogo {
  max-height: clamp(28px, 4vw, 72px);
  max-width: 40vw;
  width: auto;
  height: auto;
}

/* ==================================================================== *
 * DIE WERKZEUGE NEBEN DEM ENTSCHEID, seit 0.29.0
 *
 * Markus am 10.09.2026: «Du baust auf der Starthomepage von futurino einen
 * Button, der Tools heisst.»
 *
 * WARUM «ENTSCHEIDEN» GRÖSSER IST ALS DIE ANDEREN
 *
 * Weil futurino sonst ein weiteres Umfragewerkzeug wird, und in diesem
 * Vergleich verliert es gegen die bekannten. Was es kann und die anderen
 * nicht, steckt im langen Weg. Gleich grosse Kacheln nebeneinander sagten das
 * Gegenteil: dass Entscheiden eine Möglichkeit unter mehreren ist.
 * ==================================================================== */

.werkzeuge-text {
  margin: 0 0 20px;
  color: var(--schrift-leise);
}

.werkzeugkarte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  padding: 20px;
  margin-bottom: 16px;
}

.werkzeugkarte h3 {
  margin: 0 0 8px;
}

/* Öffnen und Schliessen, seit 1.40.0. Die Gruppe trägt einen Titel mit
   einem Balken in der Akzentfarbe; die Karten darunter bleiben, wie sie
   sind. Der Balken ist dünn, damit die Gruppe gliedert und nicht mit den
   Karten um die Aufmerksamkeit konkurriert. */
.werkzeuggruppe {
  margin: 28px 0 8px;
}

.werkzeuggruppe .werkzeuggruppe-titel {
  margin: 0 0 4px;
  padding-left: 12px;
  border-left: 4px solid var(--akzent);
  font-size: 1.1rem;
}

.werkzeuggruppe-satz {
  margin: 0 0 14px 16px;
}

.werkzeuggruppe-rahmen {
  margin: 8px 0 0;
}

/* Der Akzent am Rand statt einer zweiten Farbe: Er hebt die Karte, ohne dass
   sie in der dunklen Farbwahl neu gedacht werden muss. */
.werkzeugkarte.gross {
  border-left: 6px solid var(--akzent);
  padding: 24px;
}

.werkzeugkarte.gross h3 {
  font-size: clamp(22px, 2.6vw, 30px);
}

.werkzeugsatz {
  margin: 0 0 16px;
  color: var(--schrift-leise);
}

.werkzeugkarte label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.werkzeugkarte input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}

/*
 * Auch die Auswahlfelder, seit 0.84.0.
 *
 * «Mit einer grossen Gruppe, bis 100 Personen» ist die längste Zeile der
 * ganzen Karte, und ein select richtet sich ohne Breitenangabe nach seinem
 * längsten Eintrag. Am Handy schob es die Seite auf 448 Punkte, und dann
 * wandert die ganze Anwendung beim Wischen seitwärts. Gefunden hat das
 * aufnahme_werkzeug.py bei 360 Punkten, kein Auge.
 */
.werkzeugkarte select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.werkzeuge-ablageueberschrift {
  margin-top: 32px;
}

.werkzeugliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.werkzeugzeile {
  border-top: 1px solid var(--linie);
  padding: 12px 0;
}

.werkzeugzeilefrage {
  margin: 0 0 4px;
  font-weight: 600;
}

/* ---- Das Pult einer laufenden Runde ---- */

.runde-beitritt {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  margin: 16px 0;
}

.runde-beitrittseite {
  flex: 1 1 240px;
  min-width: 0;
}

/* ---------------------------------------------------------------------- *
 * DIE EINGEKLAPPTE BEITRAGSLISTE, seit 0.90.0
 *
 * Die Zusammenfassung ist die Zeile, die vorne im Raum gelesen wird, und
 * deshalb ist sie so gross wie eine Auskunft und nicht so klein wie eine
 * Beschriftung. Der Pfeil bleibt stehen: Er ist das Einzige, was sagt, dass
 * hier etwas aufgeht.
 * ---------------------------------------------------------------------- */

.beitragsklappe {
  margin: 12px 0;
}

.beitragsklappe > summary {
  cursor: pointer;
  padding: 6px 0;
  font-size: 1.05rem;
}

.beitragsklappe > summary:hover {
  color: var(--akzent);
}

.beitragsklappe > div {
  padding-top: 8px;
}

/* ----------------------------------------------------------------------
 * DIE HINWEISKLAPPE, seit 0.94.1
 *
 * Dieselbe Bauart wie die Beitragsklappe, nur leiser: Die Zeile nennt sich
 * «Hinweise zur Nutzung» und nimmt eine Zeile statt sechs. Der Pfeil bleibt
 * stehen, denn er ist das Einzige, was sagt, dass hier etwas aufgeht.
 * ---------------------------------------------------------------------- */

.hinweisklappe {
  margin: 10px 0;
}

.hinweisklappe > summary {
  cursor: pointer;
  padding: 4px 0;
  color: var(--schrift-leise);
}

.hinweisklappe > summary:hover {
  color: var(--akzent);
}

.hinweisklappe > p {
  margin: 6px 0 0;
}

.naechstefrage {
  margin: 20px 0;
  border-top: 1px solid var(--linie);
  padding-top: 12px;
}

.naechstefrage > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 0;
}

.naechstefrage label {
  display: block;
  margin: 8px 0 6px;
}

.naechstefrage input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

/* ---- Die geordnete Fassung im Pult ---- */

/*
 * Die Gruppe als Karte, die Originalbeiträge darin.
 *
 * Sie stehen unter jedem Titel und nie nur die Zusammenfassung: Ein Satz über
 * fremde Beiträge legt einer Gruppe Worte in den Mund, und wer widerspricht,
 * braucht den Wortlaut. Die Gestaltung hält das durch, indem die Beiträge
 * innerhalb der Karte liegen und nicht hinter einem Aufklappen.
 */
.gruppenkarte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--akzent);
  border-radius: var(--rundung);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.gruppenkarte h4 {
  margin: 0 0 2px;
}

/* Was keiner Gruppe zugeordnet wurde, ist kein Fehler und sieht auch nicht so
   aus: derselbe Kasten, nur ohne den Akzent, der eine Ordnung behauptet. */
.gruppenkarte.einzeln {
  border-left-color: var(--linie);
}

.gruppensatz {
  margin: 6px 0;
  font-style: italic;
  color: var(--schrift-leise);
}

.gruppenbeitraege {
  margin: 8px 0 0;
  padding-left: 1.2em;
}

.gruppenbeitraege li {
  margin: 2px 0;
}

/* ---------------------------------------------------------------------- *
 * DIE INHALTSANALYSE, seit 0.89.0
 *
 * Verwandt mit der Gruppenkarte und doch unterscheidbar: Der Akzentstreifen
 * steht oben statt links, weil die Analyse eine zweite Sicht neben der
 * Bündelung ist und nicht deren nächste Stufe. Wer beides untereinander
 * sieht, soll es ohne Lesen auseinanderhalten.
 * ---------------------------------------------------------------------- */

.analysekopf {
  margin: 18px 0 8px;
}

.analysekarte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-top: 4px solid var(--akzent);
  border-radius: var(--rundung);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.analysekarte h5 {
  margin: 0 0 2px;
  font-size: 1.05rem;
}

.analysesatz {
  margin: 6px 0;
}

/* Ein Zitat sieht aus wie ein Zitat. Wer eine Auswertung liest, muss ohne
   Nachdenken sehen, welcher Satz aus der Sitzung stammt und welcher aus der
   Maschine. */
.analysezitat {
  margin: 8px 0 0;
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--linie);
  color: var(--schrift-leise);
  font-style: italic;
}

.beitragsliste {
  margin: 8px 0;
  padding-left: 1.2em;
}

.beitragsliste li {
  margin: 4px 0;
}

.rohfassung {
  margin-top: 16px;
  border-top: 1px solid var(--linie);
  padding-top: 8px;
}

.rohfassung > summary {
  cursor: pointer;
  color: var(--schrift-leise);
  padding: 6px 0;
}

/* ---- Die geordnete Fassung an der Wand ---- */

.wandgruppe {
  margin: clamp(10px, 1.4vw, 24px) 0;
  padding-left: clamp(10px, 1.2vw, 20px);
  border-left: 4px solid var(--akzent);
  text-align: left;
}

/*
 * DIE RANGFOLGE DER SCHRIFTEN, richtiggestellt in 1.18.2.
 *
 * Markus am 23.09.2026: «Der Haupttitel (die Frage) ist aktuell von der
 * Schriftgrösse her gut so. Der Kategorientitel müsste aber kleiner sein
 * als der Haupttitel.» In 1.18.1 war er grösser, nämlich sechzig Punkte
 * gegen zweiundvierzig.
 *
 * Das war beim Vergrössern entstanden und niemandem aufgefallen, weil
 * beide Zahlen einzeln vernünftig aussahen. **Eine Rangfolge wird am
 * Verhältnis geprüft und nicht am einzelnen Wert.** Jetzt gilt: Frage 42,
 * Kategorientitel 38, Beschreibung und Beiträge 32, Zahl 24.
 */
.wandgruppentitel {
  margin: 0;
  font-size: clamp(24px, 2.1vw, 38px);
  line-height: 1.2;
}

.wandgruppenzahl {
  margin: 2px 0 0;
  font-size: clamp(15px, 1.4vw, 24px);
  color: var(--schrift-leise);
}

/*
 * Die Beschreibung der Kategorie, fett statt kursiv, seit 1.18.2.
 *
 * Markus: «Die kursiv gedruckte Beschreibung der Kategorie müsste fett
 * dargestellt werden (besser hervorheben).» Kursiv und leise gesetzt las
 * sie sich wie eine Fussnote; sie ist aber das, was die KI über die Gruppe
 * sagt, und damit der Satz, über den im Raum gesprochen wird.
 */
.wandgruppensatz {
  margin: 8px 0 0;
  font-size: clamp(18px, 1.9vw, 32px);
  font-weight: 600;
  line-height: 1.3;
}

/*
 * Die Originalbeiträge kleiner als der Titel, aber nie so klein, dass sie aus
 * der letzten Reihe verschwinden: Sie sind der Beleg für die Überschrift.
 *
 * Seit 1.18.1 so gross wie die rohe Liste. Markus am 23.09.2026 mit einem
 * Bild seiner Wand: «Alles grösser darstellen, mehrere Folien/Seiten.»
 * Sechsundzwanzig Punkte waren neben einer Überschrift von sechsundvierzig
 * eine Fussnote, und gelesen werden sollen sie.
 */
.wandgruppenliste {
  margin: 10px 0 0;
  padding-left: 1.2em;
  font-size: clamp(18px, 1.9vw, 32px);
  line-height: 1.35;
}

.wandgruppenliste li {
  margin: 0.15em 0;
}

/*
 * Die Zahl der weggelassenen Beiträge, seit 1.18.2. Sie steht unter den
 * Zitaten und sagt, dass die Folie eine Auswahl zeigt. Leise gesetzt, weil
 * sie eine Auskunft über die Folie ist und kein Beitrag.
 */
.wandgruppenrest {
  margin: 10px 0 0;
  font-size: clamp(15px, 1.5vw, 26px);
  font-style: italic;
  color: var(--schrift-leise);
}


/* ==================================================================== *
 * DIE BEDIENUNG AN DER WAND, seit 0.30.0
 *
 * Markus am 10.09.2026: «Rechts und links an der Folie prominent einen Pfeil
 * anbringen, damit der Moderator von Folie zu Folie springen kann.»
 * ==================================================================== */

/*
 * Zwei Flächen über die ganze Höhe, links und rechts am Rand.
 *
 * Warum so gross: Wer vor einer Klasse steht, trifft keinen Knopf von zwanzig
 * Punkten. Die Fläche reicht deshalb über die volle Höhe; der Pfeil darin ist
 * nur die Beschriftung. Getroffen wird der ganze Streifen.
 *
 * Warum so leise: Sie stehen dauerhaft im Bild, und alles, was dauerhaft im
 * Bild steht, konkurriert mit dem Inhalt. Im Ruhezustand sind sie halb
 * durchsichtig; wer mit der Maus darüberfährt, bekommt den vollen Ton und
 * einen Grund.
 */
.wandpfeil {
  position: fixed;
  top: 0;
  bottom: 0;
  width: clamp(48px, 5.5vw, 104px);
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--schrift);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background-color 0.15s ease;
}

/*
 * Der Pfeil als Scheibe, seit dem zweiten Ansehen am 10.09.2026.
 *
 * Beim ersten Bau war er ein blosses Zeichen mit knapp einem Drittel
 * Deckkraft. Auf der Aufnahme war er da, aus fünf Metern wäre er es nicht
 * gewesen, und Markus hatte ausdrücklich «prominent» verlangt. Die Scheibe
 * gibt ihm eine Kante gegen jeden Hintergrund, ohne dass er lauter wird als
 * die Frage darüber.
 */
.wandpfeil span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 4.4vw, 84px);
  height: clamp(44px, 4.4vw, 84px);
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  color: var(--schrift);
  font-size: clamp(30px, 3.2vw, 60px);
  line-height: 1;
  /* Das Zeichen sitzt in der Schrift etwas zu tief; ohne die Verschiebung
     steht der Pfeil sichtbar unter der Mitte der Scheibe. */
  padding-bottom: 0.12em;
  opacity: 0.72;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.wandpfeil.links { left: 0; }
.wandpfeil.rechts { right: 0; }

.wandpfeil:hover,
.wandpfeil:focus-visible {
  background: var(--wandpfeil-flaeche);
}

.wandpfeil:hover span,
.wandpfeil:focus-visible span {
  opacity: 1;
  border-color: var(--akzent);
}

/* Der Tastaturrahmen bleibt sichtbar: Die Wandanzeige wird auch mit der
   Tastatur bedient, und wer dorthin tabbt, muss sehen, wo er steht. */
.wandpfeil:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: -6px;
}

/* Der Weg zurück in die Automatik. Er steht in der Blätterzeile, weil dort
   die Auskunft «angehalten» steht. */
.wandweiterlaufen {
  margin-left: 12px;
  padding: 6px 14px;
  min-height: 44px;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--karte);
  color: var(--schrift);
  font: inherit;
  font-size: clamp(13px, 1.1vw, 18px);
  cursor: pointer;
}

.wandweiterlaufen:hover {
  border-color: var(--akzent);
}

/* Der Satz über der geordneten Fassung, der ihre Stufe benennt. */
.stufenzeile {
  margin: 12px 0 4px;
  padding: 8px 12px;
  border-left: 3px solid var(--akzent);
  background: var(--karte);
  color: var(--schrift-leise);
  font-size: 0.95em;
}

/* ====================================================================== *
 * DIE PLANLISTE, seit 0.31.0
 *
 * Sie steht im Steuerpult zwischen dem Formular und der laufenden Frage.
 * Jede Zeile trägt den Zustand als Wort und nicht als Farbe allein: Wer die
 * Farben nicht unterscheidet, liest sonst nichts (U5-Barrierefreiheit).
 * ====================================================================== */

.planliste {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}

.planzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--linie);
}

.planzeile:first-child {
  border-top: none;
}

.planzustand {
  flex: 0 0 auto;
  min-width: 7em;
  font-size: 0.85rem;
  color: var(--schrift-leise);
}

/* Die laufende Frage ist die einzige, die sich abhebt. Alles gleichzeitig
   hervorzuheben hebt nichts hervor. */
.planzeile.zustand-offen .planzustand {
  color: var(--akzent);
  font-weight: 600;
}

/* Übersprungenes wird leiser gesetzt und nicht durchgestrichen: Es ist nicht
   erledigt und nicht gelöscht, sondern ausgelassen, und es lässt sich
   zurückholen. */
.planzeile.zustand-uebersprungen .plantext {
  color: var(--schrift-leise);
}

.plantext {
  flex: 1 1 14em;
  min-width: 0;
}

/*
 * Die Knopfzeile darf schrumpfen und umbrechen.
 *
 * Beim Ansehen der Aufnahme bei 360 Punkten stand «Überspringen» halb
 * ausserhalb des Bildes. Mit flex: 0 0 auto weigert sich die Zeile zu
 * schrumpfen, und der letzte Knopf wandert aus dem Kasten. Ein Knopf, den man
 * nicht ganz sieht, ist einer, den man nicht trifft.
 */
.planknoepfe {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}


/* ------------------------------------------------------------------ *
 * DIE ZUGEKLAPPTEN WERKZEUGKARTEN, seit 0.35.0
 *
 * Markus am 11.09.2026: «Stelle die Werkzeuge eingeklappt dar, so dass man
 * nur die Titel sieht.» Die Überschriftzeile trägt den Namen und einen
 * Kennsatz von wenigen Wörtern; ohne ihn müsste man alle fünf aufklappen, um
 * zu wählen. Auf schmalen Bildschirmen bricht der Kennsatz unter den Namen.
 * ------------------------------------------------------------------ */

.werkzeugkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}

.werkzeugkopf::-webkit-details-marker { display: none; }

/* Das Dreieck steht links und dreht sich beim Aufklappen. Es ist die einzige
   Stelle, an der ein Zeichen sagt, dass hier etwas verborgen liegt. */
.werkzeugkopf::before {
  content: "\25B8";
  color: var(--schrift-leise);
  transition: transform 0.12s;
}

.werkzeugkarte[open] > .werkzeugkopf::before {
  transform: rotate(90deg);
}

.werkzeugname {
  font-size: 19px;
  font-weight: 700;
}

.werkzeugkurz {
  color: var(--schrift-leise);
  font-size: 15px;
}

/* Der Zwecksatz steht mit Abstand unter der Überschriftzeile, damit das
   Aufklappen sichtbar etwas hinzufügt und nicht bloss die Zeile verlängert. */
.werkzeugkarte[open] > .werkzeugsatz {
  margin-top: 12px;
}

/* ===================================================================== *
 * DIE HILFE, seit 0.36.0, LS-33
 *
 * Markus am 11.09.2026: «Zusätzliche Hilfe und Unterstützung muss möglich
 * sein, sie darf einen aber nicht behindern, also nicht allzuviel Text und
 * trotzdem sehr klar und verständlich.»
 *
 * Daraus folgen drei Entscheide in der Gestaltung. Der Knopf ist schmal und
 * ruhig, damit er neben den Handlungsknöpfen nicht um Aufmerksamkeit
 * kämpft. Das Fenster ist schmal, weil eine kurze Zeile schneller gelesen
 * wird als eine breite. Und der Schliessknopf ist der auffälligste Knopf
 * darin: Der häufigste Wunsch beim Lesen einer Hilfe ist, sie wieder
 * loszuwerden.
 * ===================================================================== */

.hilfeknopf {
  min-width: 44px;
  font-weight: 700;
}

/* Das kleine Fragezeichen im Text, neben einem Fachbegriff. Es ist ein
   Knopf und kein Zeichen: Wer mit der Tastatur bedient, erreicht es so, und
   wer eine Vorlesesoftware benutzt, hört, dass es etwas tut. */
.hilfemarke {
  min-width: 44px;
  min-height: 44px;
  margin-left: 4px;
  padding: 0 10px;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  /* Die Schriftfarbe ist die gewöhnliche und nicht der Akzent. Der Akzent auf
     dem blassen Grund erreichte am 11.09.2026 nur 6.4 zu 1 in der hellen und
     5.2 zu 1 in der dunklen Farbwahl; verlangt sind 7 zu 1. Gefunden hat das
     die Kontrastmessung in aufnahme_werkzeug.py, nicht das Auge. Dass der
     Knopf anklickbar ist, sagen jetzt Rahmen und Form. */
  color: var(--schrift);
  background: var(--akzent-blass);
  border: 1px solid var(--linie);
  border-radius: 999px;
  cursor: pointer;
}

.hilfemarke:hover {
  background: var(--karte);
}

/* Eine Zeile mit Text und einem Fragezeichen daneben. Ohne diese Regel
   sitzt der runde Knopf auf der Grundlinie und wirkt verrutscht. */
.mitmarke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.hilfefenster {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 22px 24px 18px;
  overflow-y: auto;
  color: var(--schrift);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
}

.hilfefenster::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.hilfefenster h2 {
  margin: 0 0 12px;
  font-size: 21px;
}

.hilfefenster p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.55;
}

.hilfeweiter {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
}

/* ==================================================================== *
 * DAS NOTFALLPAKET, seit 0.40.0
 *
 * Ein Blatt, auf dem gezählt wird. Die Felder sind leer und sollen es
 * bleiben: Sie werden mit der Hand gefüllt, nicht mit dem Bildschirm.
 *
 * Am Bildschirm sieht das Paket aus wie eine Vorschau; gebraucht wird es auf
 * Papier, und der Druckteil weiter unten richtet es dafür her.
 * ==================================================================== */

/* Der Weg zum Notfallpaket, seit 0.40.0. Er steht ruhig da und nicht als
   Warnung: Gebraucht wird er einmal, vorbereitet wird er immer. */
.notfallhinweis { margin-top: 0.75rem; }

/*
 * Der Link darin trägt die volle Schriftfarbe und nicht die leise der
 * Feldhilfe. Gemessen am 11.09.2026 von aufnahme_werkzeug.py: In der dunklen
 * Fassung kam er auf 1.9 zu 1, verlangt sind 7 zu 1. Dieselbe Lehre wie bei
 * den Fragezeichen der Hilfe in 0.36.0: Ein Text in einer leisen Umgebung
 * erbt die leise Farbe, auch wenn er angeklickt werden soll.
 */
.notfallhinweis a {
  color: var(--schrift);
  text-decoration: underline;
  font-weight: 600;
}

.notfallblatt { margin-top: 1.5rem; }

.notfallschritte,
.notfallzeilen {
  margin: 0.5rem 0 0;
  padding-left: 1.4rem;
  line-height: 1.9;
}

/* Eine Zeile zum Beschreiben. Die Linie steht unter dem Text und nicht um
   ihn herum: Ein Kasten sieht aus, als müsste man hineinpassen. */
.notfallzeilen li {
  border-bottom: 1px solid var(--linie);
  min-height: 1.9rem;
  margin-bottom: 0.5rem;
}

.notfalltabelle {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

.notfalltabelle th,
.notfalltabelle td {
  border: 1px solid var(--linie);
  padding: 0.45rem 0.6rem;
  text-align: left;
  vertical-align: middle;
}

.notfalltabelle th {
  font-weight: 600;
  font-size: 0.95rem;
}

/* Das Feld für die Striche ist das breiteste der Zeile: Dort wird
   geschrieben, und zwar dreissigmal. */
.notfallfeld { width: 50%; height: 2.1rem; }
.notfallsumme { width: 15%; }

/* Die Marke in der Planzeile, seit 0.40.0. Sie nennt die Herkunft und
   schreit nicht: Nacherfasst ist nicht schlechter als live, es ist anders
   entstanden. Deshalb dieselbe leise Schrift wie der Zustand daneben. */
.planherkunft {
  font-size: 0.8rem;
  color: var(--schrift-leise);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
}

/* Ein Abschnitt im Nacherfassungsfenster, einer je Aussage. */
.nacherfassenblock {
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--linie);
}

.nacherfassenblock:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.nacherfassenblock h4 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.codegross {
  font-size: 1.4rem;
  letter-spacing: 0.12em;
}

/* ERZEUGT AB HIER von pruefwerkzeuge/farbwahl-erzeugen.php. Nicht von Hand ändern. */
/*
 * Dieselben Werte wie oben, für den Fall «immer dunkel» aus den
 * Einstellungen. Geändert wird oben; hier läuft das Werkzeug.
 */
:root[data-farbe="dunkel"] {
    --grund: #17181a;
    --karte: #212327;
    --schrift: #ffffff;
    --schrift-leise: #cdcdc7;
    --linie: #3a3d42;
    --akzent: #6fae9b;
    /* Akzenttext auf einer Karte, seit 1.0.0: heller als der Akzent, weil
       die Karte heller ist als der Seitengrund. 8,0 zu 1 auf der Karte. */
    --akzent-text: #8ac4b2;
    /* Dunkle Fassung der blassen Akzentfläche. Sie hebt sich von der Karte
       ab, ohne die Schrift darauf zu verdunkeln. */
    --akzent-blass: #23332e;
    /* Schwarz statt #10201c: Der dunkle Grünton trug den Text nur mit 6,6 zu 1,
       gemessen von pruefe_oberflaeche.py am 06.09.2026. Mit Schwarz sind es
       8,1 zu 1. Betrifft die Knöpfe und den aktuellen Schritt im Weg oben. */
    --akzent-schrift: #000000;
    /* Der zweite, dezente Ton in der dunklen Fassung, seit 0.72.0. Kühl und
       eine Spur heller als die Karte, damit das Band sich abhebt, ohne zu
       leuchten. */
    --weise-grund: #262c33;
    --weise-linie: #7f909f;
    --weise-marke: #a8bac9;
    /* Heller als vorher (#e28b7d): auf der dunklen Karte waren es 6,2 zu 1. */
    --warnung: #eda093;
    --gut: #8bc79a;
    --dafuer: #8bc79a;
    --dagegen: #eda093;
    --offen: #d8c48a;
    /* Hell auf dunklem Grund, mit schwarzer Schrift: 10,5 bis 12,1 zu 1. */
    --option-a: #9dc4f5;
    --option-b: #e2c07a;
    --option-c: #d3a9e8;
    --option-d: #7fcfd2;
    --marke: url("bilder/futurino-logo-dunkel.png");
    --option-e: #f0a58f;
    --option-schrift: #000000;
    /* Die Fläche unter einer angefassten Blätterfläche. Schwarz auf Schwarz
       wäre nichts; hier braucht es Aufhellung statt Abdunklung. */
    --wandpfeil-flaeche: rgba(255, 255, 255, 0.10);
}
:root[data-farbe="dunkel"] .willkommen-bild {
  filter: brightness(0.82) saturate(0.95);
}
/* ERZEUGT BIS HIER. */

/* ====================================================================
 * KONTEXT HINZUFÜGEN, seit 0.67.0
 *
 * Markus am 14.09.2026. Die Karte sieht aus wie die KI-Karten daneben,
 * denn sie gehört dazu: Ihr Zweck ist die KI. Was sie unterscheidet, ist
 * der Ton der Warnungen. Sie stehen nicht in Rot, denn wer einen
 * Abschnitt aus einem Reglement einfügt, in dem eine Mailadresse steht,
 * hat nichts falsch gemacht. Eine ruhige Linie links, und der Text sagt
 * den Rest.
 * ==================================================================== */

.kontextwarnung {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 4px solid var(--offen, var(--warnung));
  border-radius: 6px;
  background: var(--grund);
}

.kontextwahl {
  margin: 14px 0 4px;
}

/* Der gewählte Weg trägt dieselbe Marke wie der aktuelle Schritt in der
   Wegleiste. Eine zweite Farbordnung für dieselbe Sache wäre eine zweite
   Wahrheit. */
.kontextwahl .hier {
  background: var(--akzent-blass);
  font-weight: 600;
}

.kontextfreigabe {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--offen, var(--warnung));
  border-radius: 6px;
  background: var(--grund);
}

.kontextfreigabe .hinweis {
  margin: 0 0 8px;
}

.kontextliste {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.kontextliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--linie);
}

.kontextliste li:first-child { border-top: 0; }

.kontextname { flex: 1 1 220px; }

/* Der Vermerk, dass eine Unterlage nach dem Auftrag verschwindet oder
   schon verschwunden ist. Leise, aber nicht unsichtbar: Ein still
   verschwundener Eintrag sähe aus wie ein Fehler. */
.kontextvermerk {
  color: var(--schrift-leise);
  font-size: 14px;
}

/* Die Meldung über gefundene Muster. Dieselbe ruhige Linie wie oben, denn
   sie sagt dasselbe: hier steht etwas, sieh es dir an. */
.offenwarnung {
  padding: 8px 12px;
  border-left: 4px solid var(--offen, var(--warnung));
  border-radius: 6px;
  background: var(--grund);
  color: var(--schrift);
}

/* Der eingelesene Text einer Seite. Er kann lang sein, deshalb ein
   eigener, scrollender Kasten; er soll die Karte nicht sprengen. */
#kontext-linktext {
  max-height: 320px;
  overflow: auto;
}
/*
 * DER WEG ZUR ÖFFENTLICHEN INFORMATIONSSEITE, seit 0.69.0.
 *
 * Markus hat den Verweis am 13.09.2026 in beitreten.php, mitmachen.php und
 * wand.php gesetzt; in der Anwendung selbst fehlte er, und das Impressum gab
 * es noch nicht. Beides steht jetzt im Fuss von index.html.
 *
 * Die Mindesthöhe von 44 Punkten ist kein Schmuck: Beide Verweise stehen im
 * Fuss dicht beieinander, und ein Textlink von 20 Punkten Höhe ist auf einem
 * Handy nicht zuverlässig zu treffen. pruefe_oberflaeche.py misst das nach.
 */
/*
 * DIE FARBE: Schriftfarbe mit Unterstreichung statt Akzent, korrigiert in
 * 0.69.0. Markus hatte den Akzentton gewählt, und er sieht dort gut aus;
 * pruefe_oberflaeche.py hat ihn trotzdem zurückgewiesen, weil er als Text
 * auf dem Fussgrund nur 7,0 zu 1 in der hellen und 6,9 zu 1 in der dunklen
 * Darstellung trägt. Die Anwendung verlangt überall 7 zu 1, und eine
 * Ausnahme für den einen Link wäre der erste Schritt zu vielen.
 *
 * Erkennbar bleibt der Link über die Unterstreichung. Sie ist ohnehin das
 * verlässlichere Merkmal: Wer Farben schlecht unterscheidet, sieht einen
 * farbigen Link nicht, eine unterstrichene Zeile aber schon.
 */
.fuss-infolink,
.fuss-hilfelink,
.wandinfo {
  color: var(--schrift);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.fusslinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
}

.fusslinks a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Das Impressum steht auffindbar, aber nicht prominent: gleiche Zeile wie der
   Verweis auf die Informationsseite, ruhige Farbe statt Akzent. */
/* Seit 1.39.0 steht der Datenschutz in derselben ruhigen Form daneben. */
.fuss-impressum,
.fuss-datenschutz {
  color: var(--schrift-leise);
  font-weight: 600;
}

.wandinfo {
  margin-left: auto;
  font-size: 14px;
}

@media (max-width: 700px) {
  .wandinfo { display: none; }
}

/*
 * ====================================================================
 * DIE ARBEITSWEISE: BAND, WAHL UND DAS VERBERGEN, seit 0.71.0
 *
 * Markus am 14.09.2026: «Je nach Modus werden gewisse Funktionen gar nicht
 * eingeblendet (wenn ich alleine entscheiden möchte, kommt nie etwas von
 * ‹Gruppe›, ausser die Zweitmeinung, diese bleibt).»
 *
 * WARUM DAS VERBERGEN IM STILBLATT STEHT UND NICHT IN app.js
 *
 * Die Gruppenbedienung wird von rund fünfzehn Zeichenfunktionen geschaltet,
 * und jede setzt hidden nach ihrer eigenen Lage. Wer dort eingreift, muss
 * fünfzehn Stellen ändern und bei der sechzehnten daran denken; die eine,
 * die man vergisst, taucht im Alleinmodus auf und bricht die Zusage.
 *
 * Eine Klasse am body und ein Merkmal am Element sind dagegen ein einziger
 * Riegel, den keine Zeichenfunktion überstimmen kann. Neu dazukommende
 * Gruppenbedienung trägt das Merkmal und ist damit von selbst richtig.
 * pruefe_modus.py misst, dass im Alleinmodus kein Element mit diesem
 * Merkmal sichtbar ist.
 * ====================================================================
 */

body.allein [data-nurgruppe] {
  display: none !important;
}

/* DAS BAND ÜBER DER WEGLEISTE. Es steht auf jeder Ansicht der Strecke und
   sagt, unter welchen Bedingungen die sechs Schritte laufen. Kein Schritt:
   keine Nummer, keine Standmarke. */
.weisenband {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 900px;
  /* Der Abstand nach oben ist seit 0.72.0 da. Ohne ihn stiess das Band an
     die Entscheidfrage, und zwei Kästen ohne Fuge lesen sich als einer. */
  margin: 14px auto 10px;
  padding: 10px 14px;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--weise-linie);
  border-radius: var(--rundung);
  background: var(--weise-grund);
}

.weisenmarke {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  /* Fünf Punkte brauchen Luft, sonst werden sie zu einem Strich. */
  letter-spacing: 0.12em;
  color: var(--weise-marke);
}

.weisentext {
  flex: 1 1 auto;
  font-weight: 700;
}

/* Der Ändern-Knopf trägt 44 Punkte wie jedes Bedienelement. */
.weisenband button {
  min-height: 44px;
}

.weisenwahl {
  max-width: 900px;
  margin: 0 auto 14px;
  padding: 14px;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--karte);
}

.weisenwahl-satz {
  margin: 0 0 10px;
}

/* Die Meldung zum Wechsel. Sie steht unter dem Band und nicht in der Wahl,
   damit sie nach dem Zuklappen noch lesbar ist. */
.weisenmeldung {
  max-width: 900px;
  margin: 0 auto 10px;
}

/* DIE DREI KNÖPFE. Untereinander und nicht nebeneinander: Jeder trägt einen
   erklärenden Satz, und drei Sätze nebeneinander sind drei Spalten, die am
   Handy ohnehin umbrechen. */
.weisenknoepfe {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.weisenknopf {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--karte);
  color: var(--schrift);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.weisenknopf:hover {
  border-color: var(--akzent);
}

/* Die getroffene Wahl trägt die blasse Akzentfläche und einen Haken, also
   zwei Merkmale und nicht nur die Farbe. Wer Farben schlecht unterscheidet,
   sieht sonst nicht, was gewählt ist. */
.weisenknopf.gewaehlt {
  border-color: var(--akzent);
  border-width: 2px;
  background: var(--akzent-blass);
  font-weight: 700;
}

.weisenknopf .weisenknopf-satz {
  display: block;
  margin-top: 3px;
  color: var(--schrift-leise);
  font-size: 14px;
  font-weight: 400;
}

.weisenkarte {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--karte);
}

.weisenkarte-titel {
  margin: 0 0 10px;
  font-weight: 700;
}

/* Der Grund für die Sperre. Er steht von Anfang an da und nicht erst nach
   dem vergeblichen Klick; G-36 verlangt den Grund, nicht das Schweigen. */
.weisenkarte-grund {
  margin: 10px 0 0;
  color: var(--schrift-leise);
  font-size: 14px;
}

/*
 * DIE ANMELDEZEILE GANZ OBEN RECHTS, seit 0.71.0.
 *
 * Markus am 14.09.2026: «setze ‹angemeldet als markus.roos@databaar.ch›
 * ganz oben rechts hin.» Sie steht jetzt über der Wortmarke und für sich
 * allein, statt als erstes von sechs Elementen der Zugangszeile.
 */
.anmeldezeile {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 4px;
  text-align: right;
  font-size: 14px;
}

@media print {
  .weisenband button,
  .weisenwahl { display: none; }
}

/* ====================================================================
 * DAS SIEB, seit 0.82.0
 *
 * Kein eigener Farbvorrat. Das Sieb benutzt die Variablen, die es schon
 * gibt; ein neuer Ton für ein neues Werkzeug wäre der Anfang davon, dass
 * jede Ansicht ihren eigenen bekommt (Grundsatz der durchgehenden Farbe).
 *
 * Was ausgeschieden ist, wird blass und nicht rot. Rot hiesse Fehler, und
 * ein ausgeschiedener Kandidat ist kein Fehler, sondern ein Ergebnis.
 * ==================================================================== */

.siebteil {
  margin: 20px 0;
  padding: 14px 16px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 6px;
}

.siebteil h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.siebteil h3 .leisetext {
  margin-left: 8px;
  font-weight: normal;
  font-size: 14px;
}

.siebbedingungen,
.siebliste {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.siebbedingungen li,
.siebliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--linie);
}

.siebbedingungswort { font-weight: 600; }

.siebbedingungen li button { margin-left: auto; }

/* Die Tabelle darf breiter sein als die Spalte; bei sechs Bedingungen auf
   einem Handy ist seitliches Schieben die ehrlichere Lösung als eine
   Schrift, die niemand mehr liest. */
.siebrasterrahmen {
  overflow-x: auto;
  margin-top: 10px;
}

/*
 * DER HINWEIS AUFS SCHIEBEN, nur auf schmalen Geräten.
 *
 * Gesehen am 16.09.2026 auf der Aufnahme bei 360 Punkten: Vom Raster steht
 * die Kandidatenspalte da und sonst nichts, und nichts sagt, dass rechts
 * noch etwas kommt. Eine Tabelle, die abgeschnitten aussieht wie eine
 * fertige, wird nicht geschoben.
 */
.siebschieben { display: none; }

@media (max-width: 700px) {
  .siebschieben {
    display: block;
    margin: 6px 0 0;
  }

  /* Bei sechs Bedingungen ist seitliches Schieben die ehrlichere Lösung als
     eine Schrift, die niemand mehr liest. Der Name darf dafür umbrechen. */
  .siebkandidat { white-space: normal; min-width: 140px; }
}

.siebraster {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
}

.siebraster th,
.siebraster td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: middle;
}

.siebraster tr:first-child th {
  font-size: 14px;
  border-bottom: 2px solid var(--linie);
}

.siebkandidat {
  font-weight: 600;
  white-space: nowrap;
}

.siebkandidat button { margin-left: 10px; }

.siebstand { white-space: nowrap; }

/* Durchgestrichen wird der Kandidat und nicht sein Stand. Ein
   durchgestrichenes «draussen» liest sich wie ein zurückgenommenes
   «draussen», und gemeint ist das Gegenteil. */
.siebraster tr.siebreihe-unzulaessig .siebkandidat {
  color: var(--schrift-leise);
  text-decoration: line-through;
}

.siebraster tr.siebreihe-unzulaessig .siebkandidat button {
  text-decoration: none;
}

.siebraster tr.siebreihe-unzulaessig .siebstand { color: var(--schrift-leise); }

.siebraster tr.siebreihe-zulaessig .siebstand { font-weight: 600; }

/* Die Rechenschaft. Sie steht in der blassen Akzentfläche, damit sie nicht
   als weitere Tabellenzeile gelesen wird, und bekommt eine kräftigere Kante,
   sobald eine einzelne Bedingung die Mehrheit ausgeschieden hat. */
.siebrechenschaft {
  background: var(--akzent-blass);
  border-left: 4px solid var(--linie);
}

.siebrechenschaft.auffaellig { border-left-color: var(--akzent); }

.siebsatz {
  margin: 0;
  font-size: 17px;
}

.siebnachfrage {
  margin: 8px 0 0;
  font-weight: 600;
}

/*
 * DIE RÜCKFRAGE ZUR FORM EINES ENTSCHEIDS, seit 0.96.0.
 *
 * Bewusst ohne eigene Farbe. Grün heisst in futurino «dafür», Rot «dagegen»
 * (G-26), und eine Rückfrage ist weder das eine noch das andere. Sie trägt
 * die Schriftfarbe des Fliesstextes und eine neutrale Linie; damit ist auch
 * kein zweiter Kontrastentscheid nötig.
 */
.rueckfrage {
  margin-top: 16px;
  padding: 10px 0 10px 14px;
  border-left: 4px solid var(--linie);
}

.rueckfrage p {
  margin: 0;
  color: var(--schrift);
}

.rueckfrage .knopfzeile {
  margin-top: 10px;
}

/* ==================================================================== *
 * DER EIGENE AUFTRITT, seit 1.1.0
 *
 * Stufe A aus der Vorlage zu E-11. Markus am 21.09.2026:
 * Organisationsberatende sollen ihr Erscheinungsbild anbringen können.
 *
 * WARUM HIER KEINE FARBE STEHT
 *
 * Die Firmenfarbe kommt aus der Datenbank und wird von js/auftritt.js als
 * Eigenschaft gesetzt, nicht aus diesem Stilblatt. Ein Stilblatt kennt
 * keine Farbe, die es noch nicht gibt. Was hier steht, ist Form und
 * Abstand; die Farbe legt sich darüber.
 *
 * WARUM DIE FIRMENFARBE NIE AUF EINE SCHRIFT TRIFFT
 *
 * Sie ist Fläche und nie Schriftfarbe. Welche Schrift auf ihr lesbar ist,
 * rechnet der Server aus dem gemessenen Kontrast, und die Zusage aus
 * pruefe_oberflaeche.py bleibt damit unberührt. Ebenso unberührt bleibt
 * G-26: Die Farben der Möglichkeiten kommen aus js/farbe.js und haben mit
 * dem Auftritt nichts zu tun.
 * ==================================================================== */

.auftrittsband {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 10px;
  margin: 0 0 14px;
  /* Ohne gesetzte Firmenfarbe bleibt das Band unauffällig; die blasse
     Akzentfläche trägt hier keine Bedeutung, sondern nur die Trennung. */
  background: var(--akzent-blass);
  color: var(--schrift);
}

.auftrittslogo {
  max-height: 48px;
  max-width: 200px;
  width: auto;
  height: auto;
  /* Ein Logo mit weissem Rand auf farbiger Fläche sieht wie ein Aufkleber
     aus. Dagegen hilft kein Stilblatt, wohl aber der Hinweis in den
     Einstellungen, ein PNG mit durchsichtigem Grund zu nehmen. */
}

.auftrittstext {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Ein Firmenname wie «Muster Organisationsberatung» ist ein einziges
     langes Wort, und auf einem Handy von 390 Punkten Breite lief er
     beim ersten Ansehen am 21.09.2026 rechts aus dem Band hinaus. Ein
     Name, den jemand selbst eingetragen hat, darf nicht abgeschnitten
     werden; er bricht lieber um. */
  overflow-wrap: anywhere;
}

/*
 * DIE WORTMARKE TRITT ZURUECK, WO EIN AUFTRITT STEHT, seit 1.1.0.
 *
 * Beim ersten Ansehen stand das Band der Beratung oben und darunter
 * «futurino» in voller Grösse und fetter Schrift. Weg 1 verlangt, dass die
 * Herkunft lesbar bleibt, und nicht, dass sie den Absender überstrahlt.
 * Wer für einen eigenen Auftritt bezahlen soll, bekommt sonst eine
 * Kopfzeile, auf der ein anderer Name grösser steht als seiner.
 *
 * Kleiner, leiser, und trotzdem da. Die Herkunftszeile im Fuss und der
 * Verweis auf die Informationsseite bleiben unverändert.
 */
.kopf.hat-auftritt h1 {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--schrift-leise);
  margin: 0;
}

.kopf.hat-auftritt .unterzeile {
  font-size: 0.9rem;
}

.auftrittsname {
  font-weight: 600;
  font-size: 1.05rem;
}

.auftrittsunterzeile {
  font-size: 0.92rem;
  /* Kein eigener Grauwert: Auf einer Firmenfarbe wäre jeder feste Grauton
     ein Glücksspiel. Die Zeile erbt die Schriftfarbe des Bandes und wird
     allein über die Grösse leiser. */
  opacity: 0.92;
}

.auftrittsadresse {
  font-size: 0.85rem;
  color: var(--schrift-leise);
  margin: 10px 0 0;
  line-height: 1.5;
}

/*
 * AN DER WAND, seit 1.1.0.
 *
 * Grösser als auf dem Gerät, und trotzdem zurückhaltend: Der Fuss der
 * Wandanzeige ist seit 0.28.0 der Platz für ein Logo, und er soll den
 * Inhalt nicht kleiner machen als nötig. Die Einpassung darüber rechnet
 * die Bühne nach, sobald hier etwas dazukommt.
 */
.wandfuss .auftrittsband {
  margin: 0;
  padding: 6px 14px;
  background: transparent;
  gap: clamp(8px, 1.2vw, 18px);
}

.wandfuss .auftrittslogo {
  max-height: clamp(28px, 4vw, 72px);
  max-width: 40vw;
}

.wandfuss .auftrittsname {
  font-size: clamp(0.9rem, 1.4vw, 1.4rem);
}

.wandfuss .auftrittsunterzeile {
  font-size: clamp(0.75rem, 1.1vw, 1.1rem);
}

/* Auf dem Papier, in der Entscheidungsnotiz und im Bericht: kein Band,
   keine Fläche, nur Logo und Name. Browser drucken Hintergründe nur auf
   ausdrücklichen Wunsch, und ein Band ohne Grund wäre weisse Schrift auf
   weissem Blatt. */
.auftrittskopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.auftrittskopf .auftrittslogo {
  max-height: 56px;
  max-width: 220px;
}

/*
 * DIE VORSCHAU ZEIGT DAS LOGO AUF DER FARBE, seit 1.1.0.
 *
 * Beim ersten Ansehen lag ein dunkelgrünes Logo auf einer weinroten
 * Fläche und war kaum zu erkennen. Der Hinweis «nimm ein PNG mit
 * durchsichtigem Grund» hilft dagegen nicht, denn durchsichtig war es ja.
 * **Was man sehen kann, muss man nicht erklären**: Die Vorschau steht
 * deshalb auf derselben Fläche, auf der das Logo später wirklich liegt.
 */
#auftritt-vorschau {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 10px;
  margin: 6px 0 0;
  background: var(--akzent-blass);
}

#auftritt-vorschau:empty {
  display: none;
}

/*
 * DAS ABGESCHALTETE FARBFELD, seit 1.15.0.
 *
 * Ein abgeschaltetes Bedienelement zeichnet der Browser blass, und bei
 * einem Farbfeld heisst blass immer noch farbig. Ein kräftiges Gelb blieb
 * ein Gelb. Markus am 23.09.2026: «Die Farbe bleibt in der Vorschau immer
 * noch sichtbar.» Er sprach von der Vorschau, und das Feld daneben war
 * derselbe Fall.
 *
 * Grau ist hier keine Verzierung, sondern die Aussage: Diese Farbe gilt
 * gerade nicht. Der gespeicherte Wert bleibt erhalten, und wer den
 * Umschalter zurückstellt, hat seinen Farbton wieder.
 */
#auftritt-farbe:disabled {
  filter: grayscale(1);
  opacity: 0.45;
  cursor: not-allowed;
}

/* ===================================================================== *
 * DIE ÜBERNAHME AUS EINER RUNDE, seit 1.16.0
 *
 * Das Fenster ist breiter als die Hilfe, weil darin eine Liste von
 * Beiträgen steht und nicht drei Sätze. Ein Beitrag aus einem Brainstorming
 * läuft schnell über eine Zeile, und wer ankreuzen soll, muss lesen können,
 * was er ankreuzt.
 * ===================================================================== */

/* ===================================================================== *
 * DER REGLER DER VERDICHTUNG, seit 1.18.0
 *
 * Ein Knopf, ein Ergebnis, ein Regler von fein nach grob. Die drei Marken
 * darunter zeigen, wohin er reicht; ohne sie wäre eine Stellung in der
 * Mitte eine Zahl ohne Bedeutung.
 * ===================================================================== */

.verdichtungsfeld {
  margin: 14px 0 6px;
}

.verdichtungsfeld > label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

/*
 * DER REGLER, seit 1.25.0 über die volle Breite des Felds.
 *
 * Er reicht genau so weit wie die drei Beschriftungen darunter. Nur so
 * steht jede von ihnen dort, wo der Schieber sie erreicht; mit einem
 * kürzeren Regler und breiteren Beschriftungen zeigte die mittlere
 * Beschriftung neben den Schieber statt unter ihn.
 */
.stufenregler {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 32px;
  margin: 0;
  accent-color: var(--akzent);
}

/*
 * DIE DREI BESCHRIFTUNGEN, seit 1.25.0 als Knöpfe.
 *
 * Drei gleich breite Spalten unter dem Regler. Die äusseren stehen an
 * ihren Enden, die mittlere mittig, jede also unter ihrer Stelle. Ein
 * kleiner Innenabstand an den Rändern gleicht aus, dass der Schieber
 * selbst eine Breite hat und seine Mitte an den Enden nicht ganz aussen
 * liegt.
 *
 * Sie sehen aus wie Text und verhalten sich wie Knöpfe. Das ist Absicht:
 * Der Regler bleibt das führende Bedienelement, und wer lieber auf das
 * Wort tippt, kommt zum selben Ergebnis.
 */
.verdichtungsmarken {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 560px;
  margin-top: 2px;
  padding: 0 6px;
}

.verdichtungsmarken button {
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--schrift-leise);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}

.verdichtungsmarken button:first-child { text-align: left; }
.verdichtungsmarken button:last-child { text-align: right; }

/* Wo man steht, steht kräftig da. Ohne diesen Unterschied müsste man die
   Stellung des Schiebers mit dem Auge auf die Wörter übertragen. */
.verdichtungsmarken button.gewaehlt {
  color: var(--schrift);
  font-weight: 600;
}

.verdichtungsmarken button:hover { color: var(--schrift); }

.verdichtungsmarken button:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 4px;
}

/*
 * Der Satz zur gewählten Stufe, abgesetzt von den Beschriftungen und auf
 * fester Höhe. Die Höhe ist die des längsten der drei Sätze: Der zur
 * dritten Stufe braucht drei Zeilen, die beiden anderen zwei. Ohne diese
 * Angabe rutscht der Knopf darunter beim Schieben um eine Zeile, und ein
 * Knopf, der unter dem Finger wegwandert, wird verfehlt.
 *
 * Auf Handybreite werden es mehr Zeilen, und dort bewegt sich der Knopf
 * trotzdem. Das ist hinzunehmen; eine Höhe, die für die schmalste Ansicht
 * reicht, hinterliesse auf dem Arbeitsbildschirm ein Loch.
 */
#runde-stufensatz {
  max-width: 560px;
  margin: 10px 0 0;
  min-height: 3.9em;
}

/*
 * DER KOPF EINES FENSTERS, seit 1.18.0.
 *
 * `.hilfekopf` stand seit 0.36.0 im HTML und hatte nie eine Regel; Titel und
 * Schliessen-Knopf lagen deshalb untereinander, der Knopf linksbündig unter
 * der Überschrift. Das sah aus wie eine zweite Überschrift und nicht wie ein
 * Ausgang. Betroffen sind beide Fenster, die diesen Kopf verwenden.
 */
.hilfekopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.hilfekopf h2 {
  margin: 0;
}

/* Kein Umbruch: Der Knopf ist kurz, die Überschrift bricht. Umgekehrt
   rutschte der Ausgang wieder unter den Titel. */
.hilfekopf button {
  flex: 0 0 auto;
}

#uebernahmefenster {
  width: min(680px, calc(100vw - 32px));
}

/*
 * ZWEI RAHMEN UM DASSELBE SIND EINER ZU VIEL, seit 1.18.0.
 *
 * Die zwei Karten im Fenster brachten je einen eigenen Rahmen mit, und um
 * beide lag der Rahmen des Fensters. Auf dem Bild, das Markus am 23.09.2026
 * geschickt hat, sieht man vor allem Kästen. Die Karten bleiben als Gruppen
 * bestehen, ihre Trennung leistet jetzt eine Linie.
 */
#uebernahmefenster .karte.flach {
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--linie);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* Die Frage nach der Runde steht auf voller Breite. Ein Auswahlfeld in
   Inhaltsbreite schnitt den Titel der Runde mitten im Wort ab, und gerade
   der Titel ist das, woran man die Runde erkennt. */
#uebernahme-runde {
  width: 100%;
  max-width: 100%;
}

/* Überschrift links, die beiden Knöpfe rechts, auf schmalem Bildschirm
   untereinander. */
.uebernahmekopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.uebernahmekopf h3 {
  margin: 0;
}

.uebernahmekopf .knopfzeile {
  margin: 0;
}

.uebernahmeliste {
  margin: 10px 0 6px;
  padding: 0;
  list-style: none;
  /* Vierzig Einträge sollen den Knopf am Fuss nicht aus dem Bild schieben.
     Die Höhe ist an der Zeilenhöhe bemessen und nicht in Pixeln geraten. */
  max-height: 22rem;
  overflow-y: auto;
}

.uebernahmeliste li {
  border-bottom: 1px solid var(--linie);
}

.uebernahmeliste li:last-child {
  border-bottom: 0;
}

/*
 * Die Fläche zum Treffen ist die ganze Zeile und nicht nur das Kästchen.
 * Auf einem Handy mit vierzig Einträgen entscheidet das darüber, ob die
 * Auswahl in einer Minute steht oder in fünf.
 *
 * DAS `nowrap` IST DER EIGENTLICHE PUNKT, seit 1.18.0. Die allgemeine Regel
 * `.wahl` erlaubt seit 0.65.0 den Umbruch, weil beim Festhalten neben dem
 * Namen noch eine Punktzahl steht. Hier wirkte sie weiter: Ein langer
 * Beitrag passte nicht neben das Kästchen, rutschte als Ganzes in die
 * nächste Zeile, und das Kästchen stand allein über dem Text. Kurze
 * Beiträge standen daneben. Die Liste sprang damit zwischen zwei Formen hin
 * und her. **Eine Regel, die für einen anderen Ort gemacht wurde, wirkt an
 * jedem dritten weiter, bis jemand sie dort abstellt.**
 */
.uebernahmeliste .wahl {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
  min-height: 44px;
  padding: 10px 2px;
  cursor: pointer;
}

/* Ohne `min-width: 0` bricht ein langer Text nicht, sondern drückt die Zeile
   auf; mit ihm bricht er innerhalb seiner Spalte. */
.uebernahmeliste .wahl span {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.45;
}

/* Dieselbe Grösse wie die Auswahlpunkte an anderen Stellen. Der kleine
   Abstand oben setzt das Kästchen auf die erste Textzeile, statt es an den
   oberen Rand zu heften. */
.uebernahmeliste .wahl input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 1px;
  accent-color: var(--akzent);
}

/* Der Satz über das Ergebnis steht abgesetzt unter der Liste. Er ist die
   einzige Stelle, an der jemand erfährt, dass etwas zusammengefasst oder
   weggefallen ist; er darf nicht wie die letzte Listenzeile aussehen. */
#uebernahme-satz {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--linie);
}

.wahlgruppe {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: 8px;
}

.wahlgruppe legend {
  padding: 0 6px;
  font-size: 0.9rem;
  color: var(--schrift-leise);
}

.auftrittszeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linie);
}

/*
 * DER GEWAEHLTE AUFTRITT, hervorgehoben seit 1.18.1.
 *
 * Markus am 23.09.2026, mit einem Bild seiner drei Auftritte: «Der bei den
 * Einstellungen gewählte Auftritt muss visuell stärker hervorgehoben
 * werden.» Er trug bis dahin einen grauen Zusatz in Kleinschrift, also
 * genau die Auszeichnung, die sonst Nebensachen bekommen.
 *
 * Diese Zeile entscheidet, welches Logo bei der nächsten Klärung an der
 * Wand steht, vor einer Gruppe, die Markus nicht zweimal einladen kann.
 * **Was ohne weiteres Zutun wirkt, wird stärker ausgezeichnet als das, was
 * erst auf einen Klick hin wirkt.**
 *
 * Die Fläche ist eingefärbt, links steht ein Balken, und die Marke ist ein
 * eigenes Schild statt eines Zusatzes. Dazu fällt der Knopf «Für neue
 * Klärungen» dort weg, was die Zeile allein schon unterscheidbar macht.
 */
.auftrittszeile.gewaehlt {
  background: color-mix(in srgb, var(--akzent) 9%, transparent);
  border-left: 5px solid var(--akzent);
  border-bottom-color: transparent;
  border-radius: var(--rundung);
  padding: 12px 14px;
  margin: 4px 0;
}

.auftrittsmarke {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--akzent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ==================================================================== *
 * DAS MANDATSBLATT, seit 1.2.0
 *
 * Die Ausgabe eines Mandats nach MAN-020. Sie steht auf einer eigenen
 * Seite und trägt trotzdem das Stilblatt des Hauses; eine zweite Datei
 * für zwanzig Zeilen wäre eine Datei mehr in jeder Lieferung.
 * ==================================================================== */

body.mandatsblatt {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.mandatsangaben {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 18px;
  margin: 0 0 18px;
}

.mandatsangaben dt {
  font-weight: 600;
  color: var(--schrift-leise);
}

.mandatsangaben dd {
  margin: 0;
}

.mandatstabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
}

.mandatstabelle th,
.mandatstabelle td {
  text-align: left;
  vertical-align: top;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--linie);
}

.mandatstabelle th {
  font-size: 0.88rem;
  color: var(--schrift-leise);
}

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

/* Auf Papier verschwindet, was auf Papier nichts zu suchen hat. Dieselbe
   Regel wie auf der Entscheidungsnotiz. */
@media print {
  body.mandatsblatt .drucken,
  body.mandatsblatt .erprobung { display: none; }
  body.mandatsblatt { max-width: none; padding: 0; }
  .mandatstabelle tr { break-inside: avoid; }
}

/* Der Block unter einer Bereichszeile, seit 1.2.0. Er gehört zu genau
   einer Zeile und rückt deshalb ein; ohne den Einzug sähe er aus, als
   gälte er für die ganze Liste. */
.mandatsblock {
  margin: 10px 0 16px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--akzent);
  background: var(--grund);
  border-radius: 0 8px 8px 0;
}

.mandatsloeschung {
  margin-top: 12px;
}

.mandatsloeschung summary {
  cursor: pointer;
  color: var(--schrift-leise);
}

/* ==================================================================== *
 * DAS KONTO AUF DER BEGRUESSUNG, seit 1.3.0
 *
 * Markus am 21.09.2026: «Löse die Seite ‹Konto› auf und integriere sie in
 * diese Begrüssungsseite [...] halte sie trotzdem so schlank wie
 * möglich.»
 *
 * Schlank heisst seit 1.5.0: Der Kasten steht immer da und trägt einen
 * Satz, das Formular darin geht auf und zu. Vorher war der ganze Kasten
 * verborgen, und an seiner Stelle stand weiter unten ein zweiter mit fast
 * demselben Text. Länger wird die Begrüssung dadurch nicht; der zweite
 * Kasten ist dafür weg.
 * ==================================================================== */

.willkommen-konto {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--akzent);
  background: var(--karte);
  border-radius: 0 10px 10px 0;
}

/* `display` wird hier bewusst nicht gesetzt. Jede eigene display-Regel hebt
   das Attribut `hidden` auf, wenn man es nicht dazuschreibt; genau daran
   hing der Fuss der Wandanzeige bis 0.94.1. */
.willkommen-konto[hidden] {
  display: none;
}

.willkommen-konto h3 {
  margin-top: 0;
}

/* Die Karten darin brauchen keinen eigenen Rahmen mehr: Der Block ist
   schon einer. Zwei Rahmen ineinander sehen aus wie ein Fehler. */
.willkommen-konto .karte {
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0 0 10px;
  background: transparent;
}

/* ====================================================================
 * DIE FOLIENSCHAU, seit 1.11.0
 *
 * Der vierte Ausgabeweg des Gesamtbilds. Sie liegt über der Seite und
 * nimmt den ganzen Bildschirm; die Farben kommen aus den Variablen, damit
 * sie in der dunklen Darstellung nicht falsch steht.
 *
 * Der Aufbau folgt der Wandanzeige: ein Kopf, der NICHT verkleinert wird,
 * eine Bühne, deren Inhalt es wird, und ein Fuss mit den zwei Pfeilen. Die
 * Begründung für diese Aufteilung steht in js/wand.js, und sie ist teuer
 * erkämpft: Ein Titel, der je nach Länge des Inhalts wandert, lässt die
 * Gruppe bei jedem Wechsel neu suchen.
 * ==================================================================== */

.folien {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--grund);
  color: var(--schrift);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* `display` wird für den verborgenen Zustand eigens gesetzt. Jede eigene
   display-Regel hebt das Attribut `hidden` auf, wenn man es nicht
   dazuschreibt; genau daran hing der Fuss der Wandanzeige bis 0.94.1. */
.folien[hidden] {
  display: none;
}

/* Solange die Folien offen sind, scrollt die Seite darunter nicht mit. */
html.folienoffen,
html.folienoffen body {
  overflow: hidden;
}

.folienkopf {
  flex: 0 0 auto;
  padding: clamp(16px, 2.4vw, 40px) clamp(24px, 4vw, 72px) 0;
}

.folienmarke {
  margin: 0 0 6px;
  color: var(--schrift-leise);
  font-size: clamp(13px, 1.2vw, 18px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.folientitel {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 60px);
  line-height: 1.15;
  font-weight: 700;
}

.folienbuehne {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: clamp(16px, 2.4vw, 44px) clamp(24px, 4vw, 72px);
  box-sizing: border-box;
}

.folieninhalt {
  transform-origin: top left;
  width: 100%;
}

/* Auf einer Folie ist alles grösser als auf der Seite. Gesetzt wird das an
   der Wurzel des Inhalts, damit jede Schrift darin mitwächst, statt sie
   Regel für Regel zu vergrössern. */
.folieninhalt {
  font-size: clamp(17px, 1.7vw, 30px);
}

.folieninhalt h3 {
  font-size: 1.5em;
  margin: 0 0 0.4em;
}

.folieninhalt table {
  width: 100%;
  border-collapse: collapse;
}

.folieninhalt .schauschluss {
  font-size: 1.4em;
  font-weight: 600;
  line-height: 1.3;
}

.folienfuss {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 clamp(24px, 4vw, 72px) clamp(14px, 2vw, 32px);
}

.folienfuss button {
  min-height: 44px;
  min-width: 56px;
}

.folienzaehler {
  color: var(--schrift-leise);
  font-size: 15px;
  min-width: 7em;
}

/* Der Schliessknopf steht rechts aussen, weg von den Pfeilen: Wer blättert,
   soll nicht aus Versehen schliessen. */
.folienfuss #folien-schliessen {
  margin-left: auto;
}

/* Gedruckt wird die Seite und nicht die Folienschau. */
@media print {
  .folien { display: none !important; }
}

/* ==================================================================== *
 * DIE HILFESEITE, seit 1.14.0
 *
 * Sie borgt sich die Karten der Anwendung und braucht nur drei eigene
 * Regeln: ein Inhaltsverzeichnis, eine Wörterliste und den Abstand über
 * einem Sprungziel. Ohne diesen Abstand klebt die angesprungene
 * Überschrift am oberen Rand, und beim ersten Blick sieht es aus, als
 * fehle etwas darüber.
 * ==================================================================== */

.hilfeseite [id] {
  scroll-margin-top: 16px;
}

.hilfeinhalt {
  margin: 0;
  padding-left: 22px;
  line-height: 1.9;
}

.hilfeinhalt a {
  color: var(--akzent-text);
}

/* Die Wörterliste. Der Begriff steht fett über seiner Erklärung und nicht
   daneben: Auf einem Handy wird aus zwei Spalten sonst ein Stapel mit
   krummen Kanten. */
.hilfewoerter {
  margin: 0;
}

.hilfewoerter dt {
  font-weight: 600;
  margin-top: 14px;
}

.hilfewoerter dd {
  margin: 2px 0 0;
  color: var(--schrift);
}

/* Auf Papier braucht die Hilfe weder Sprungziele noch Knöpfe. */
@media print {
  .hilfeseite .hilfeinhalt,
  .hilfeseite .knopfzeile { display: none; }
}


/* ====================================================================== *
 * DIE FASSUNG FUERS PAPIER, seit 1.23.0
 *
 * Auf dem Bildschirm steht sie nie. Beim Drucken ist sie das Einzige, was
 * aus der Werkzeugrunde übrig bleibt: Titel, Frage, die Beiträge im
 * Original und die Gruppen, in derselben Gliederung wie die Word-Datei.
 * ====================================================================== */

.druckfassung { display: none; }

@media print {
  /* Die ganze Runde verschwindet, bis auf die Fassung fürs Papier. Das ist
     weniger Pflege als eine Liste von Blöcken, die je einzeln
     abzuschalten wären: Ein neuer Block auf der Ansicht landet sonst beim
     nächsten Ausdruck ungefragt auf dem Papier. */
  #ansicht-werkzeugrunde > *:not(.druckfassung) {
    display: none !important;
  }

  .druckfassung {
    display: block;
    font-size: 11pt;
    line-height: 1.45;
  }

  .druckfassung h1 {
    margin: 0 0 14pt;
    font-size: 19pt;
  }

  .druckfassung h2 {
    margin: 16pt 0 4pt;
    font-size: 12pt;
  }

  .druckfassung .druckwerkzeug {
    margin: 0 0 2pt;
    font-size: 11pt;
    font-weight: 600;
  }

  .druckfassung .druckpunkt {
    margin: 0 0 3pt 18pt;
  }

  .druckfassung .druckleise {
    margin: 4pt 0;
    color: #444444;
  }

  /* Das Logo des Auftritts, in derselben Höhe wie in der Word-Datei. */
  .druckfassung .drucklogo { margin: 0 0 6pt; }

  .druckfassung .drucklogo img {
    max-height: 15mm;
    width: auto;
  }

  .druckfassung p { margin: 8pt 0; }
}


/*
 * DIE GRAFIK DER RATINGKONFERENZ AUF PAPIER UND IM BERICHT, seit 1.35.0.
 *
 * Dieselben Farbklassen wie an der Wand (.likert-…). Ein Browser lässt
 * Hintergrundfarben beim Drucken sonst weg; print-color-adjust hält sie.
 * Die Legende braucht das nicht, ihr Quadrat ist ein Schriftzeichen.
 */
.drucklegende {
  margin: 6pt 0 10pt;
  font-size: 0.9em;
}

.drucklegendefarbe {
  color: var(--likert);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.druckbalken {
  display: flex;
  gap: 2px;
  min-height: 1.9em;
  margin: 4pt 0 2pt;
  border-radius: 4px;
  overflow: hidden;
  break-inside: avoid;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.druckbalken.leer {
  align-items: center;
  padding: 0 0.6em;
  background: #ededeb;
  color: #595959;
}

.drucksegment {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 0;
  min-width: 1.6em;
  background: var(--likert);
  color: var(--likert-schrift);
  font-weight: 700;
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.berichtteil .druckbalken + .leisetext { margin-top: 2pt; }

/* Der einfache Summenbalken des Konsensierens und von Borda, seit 1.36.2:
   gefüllt nach dem Anteil an der grössten Summe, rechts die Zahl. */
.drucksummenbalken {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3pt 0 2pt;
  break-inside: avoid;
}

.drucksummenspur {
  flex: 1 1 auto;
  height: 1.1em;
  border-radius: 4px;
  overflow: hidden;
  background: #ededeb;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.drucksummenbalken .drucksummenfuellung {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #2f5d50;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.drucksummenbalken .drucksummenzahl {
  min-width: 2.5em;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}


/*
 * EIN KNOPF ZWISCHEN LEISE UND HAUPT, seit 1.26.0.
 *
 * Für den zweiten Weg einer Etappe: deutlicher als ein leiser Knopf, ohne
 * dem Hauptknopf den Rang abzulaufen. Er borgt sich die Farbe des Akzents
 * für Rand und Schrift und bleibt in der Fläche hell.
 */
button.betont {
  border: 2px solid var(--akzent);
  color: var(--akzent);
  background: var(--akzentfeld, transparent);
  font-weight: 600;
}

button.betont:hover:not([disabled]) {
  background: var(--akzent);
  color: var(--akzent-schrift);
}


/* ====================================================================== *
 * DIE FRAGERUNDE, seit 1.38.0
 *
 * Drei Orte, eine Gestaltung: die Liste am Teilnehmergerät, die Liste im
 * Steuerpult und die Wand. Dieselben Klassen, damit alle drei dasselbe Bild
 * vor sich haben, wenn im Raum darüber gesprochen wird.
 *
 * KEINE BALKEN, und das ist ein Entscheid und kein Versäumnis. Ein Balken
 * lädt zum Vergleich ein, und verglichen werden hier Fragen, die einander
 * nicht ausschliessen. Die Zahl steht als Zahl da.
 * ====================================================================== */

.fragenliste {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--schrift);
}

.fragenzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
}

.fragenzeile:last-child { border-bottom: 0; }

.fragentext {
  flex: 1 1 60%;
  min-width: 0;
  /* Eine lange Frage bricht um und wird nicht abgeschnitten. Was am Handy
     nicht ganz dasteht, wird nicht gelesen, und eine halbe Frage ist keine. */
  overflow-wrap: anywhere;
}

/*
 * DIE LAUFENDE FRAGE, links mit einem Streifen in der Akzentfarbe und in
 * Halbfett. Beides zusammen: Wer die Farbe nicht unterscheidet, sieht das
 * Gewicht, und wer den Streifen nicht sieht, liest die Marke daneben.
 */
.fragenzeile.laeuft {
  border-left: 4px solid var(--akzent);
  padding-left: 10px;
  background: var(--akzent-blass, transparent);
}

.fragenzeile.laeuft .fragentext { font-weight: 600; }

/*
 * EINE BEANTWORTETE FRAGE VERSCHWINDET NICHT, sie rückt zurück. Die Gruppe
 * sieht den Fortschritt, und wer die Antwort verpasst hat, findet die Frage
 * wieder. Durchgestrichen wird nichts: Eine Frage, die beantwortet ist, war
 * nicht falsch.
 */
.fragenzeile.beantwortet .fragentext { color: var(--schrift-leise); }

.fragenmarke {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  font-size: 13px;
  color: var(--schrift-leise);
  white-space: nowrap;
}

.fragenzeile.laeuft .fragenmarke {
  border-color: var(--akzent);
  color: var(--akzent-text);
  font-weight: 600;
}

/*
 * DER KNOPF ZUM UNTERSTUETZEN. Mindestens 44 Punkte hoch, weil er am Handy
 * mit dem Daumen getroffen werden muss; die Regel misst
 * pruefe_oberflaeche.py.
 */
.fragenstimme {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--akzent);
  border-radius: 8px;
  background: transparent;
  color: var(--akzent-text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.fragenstimme:hover:not([disabled]) {
  background: var(--akzent);
  color: var(--akzent-schrift);
}

/* Wer gestimmt hat, sieht es an der gefüllten Fläche UND am Wortlaut des
   Knopfs. Die Farbe allein wäre die halbe Auskunft. */
.fragenstimme.dabei {
  background: var(--akzent);
  color: var(--akzent-schrift);
  font-weight: 600;
}

.fragenstimme[disabled] {
  border-color: var(--linie);
  color: var(--schrift-leise);
  background: transparent;
  cursor: default;
}

/* Die Handgriffe der Leitung, im Steuerpult rechts an der Zeile. */
.fragengriffe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 0 0 auto;
}

.fragenzahl {
  flex: 0 0 auto;
  min-width: 3.5em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--akzent-text);
}

/* Eine ausgeblendete Frage sieht die Leitung weiter, blass und mit dem Weg
   zurück daneben. An der Wand und auf den Geräten steht sie nicht. */
.fragenzeile.ausgeblendet {
  opacity: 0.6;
  border-left: 4px dashed var(--linie);
  padding-left: 10px;
}

.fragenstand {
  margin: 8px 0 0;
  color: var(--schrift-leise);
}

/*
 * AN DER WAND, und hier zählen die Grössen. Die laufende Frage ist das, was
 * der Raum gerade hört; sie steht fast so gross da wie die Rahmenfrage
 * darüber. Die Zahlen der Wandtypografie stammen aus .wandaussage, denn
 * dieselbe Rolle hat dort die einzelne Aussage einer Ratingrunde:
 * beantwortet wird sie und nicht die Rahmenfrage.
 *
 * Gefunden beim Ansehen der Bildschirmaufnahme am 27.09.2026: Ohne diese
 * Grössen erbte die Zeile die Schrift der Anwendung und stand an einer Wand
 * für sechzig Leute in sechzehn Punkten da.
 */
/*
 * Seit 1.39.0 eine Fläche in der Akzentfarbe. Markus am 27.09.2026: «Die
 * ausgewählte Frage muss viel stärker hervorgehoben werden (Farbe,
 * grösser).» Die Farbpaare sind die der Hauptknöpfe und gemessen: Weiss auf
 * dem dunklen Akzentgrün in der hellen Darstellung (7,5 zu 1), Schwarz auf dem hellen Akzentgrün in der
 * dunklen (über 7 zu 1). Die Schrift ist grösser als der kleine Titel
 * darüber, denn während geantwortet wird, ist diese Frage das Thema und die
 * Rahmenfrage nur noch die Überschrift. Die Fläche beginnt an derselben
 * Kante wie aller Text; der Innenabstand liegt innen.
 */
.wandfrage {
  margin: clamp(10px, 1.4vw, 26px) 0 clamp(14px, 1.8vw, 32px);
  padding: clamp(14px, 1.8vw, 34px) clamp(18px, 2.2vw, 42px);
  border-radius: clamp(10px, 1vw, 20px);
  background: var(--akzent);
  color: var(--akzent-schrift);
}

.wandfragemarke {
  margin: 0 0 0.35em;
  font-size: clamp(14px, 1.3vw, 24px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wandfragetext {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 72px);
  line-height: 1.15;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.wandfragenliste .fragenzeile {
  border-bottom-color: var(--wandlinie, var(--linie));
  padding: clamp(6px, 0.8vw, 14px) 0;
}

/* Die nächsten Fragen: kleiner als die laufende, grösser als ein Hinweis.
   Dieselbe Stufe wie .wandliste, damit die Wand eine Schriftfamilie von
   Grössen hat und nicht drei nebeneinander. */
.wandfragenliste .fragentext {
  font-size: clamp(18px, 2.2vw, 36px);
  line-height: 1.3;
}

.wandfragenliste .fragenzahl {
  font-size: clamp(18px, 2.2vw, 36px);
  min-width: 2em;
  /* Seit 1.39.0 linksbündig, damit die Zahlen an der Kante des übrigen
     Textes stehen und nicht eine Spalte nach rechts versetzt. */
  text-align: left;
  font-weight: 700;
  color: var(--akzent-text);
}

/* An der Wand klickt niemand: kein Stimmknopf, keine Zustandsmarke. Die
   Marke sagte «Offen», und an der Wand stehen ohnehin nur offene Fragen. */
.wandfragenliste .fragenstimme,
.wandfragenliste .fragenmarke { display: none; }

/*
 * DAS KÖDERFELD, seit 1.39.0.
 *
 * Aus dem Bild geschoben und nicht mit display:none versteckt. Manche
 * Programme füllen nur Felder, die sie für sichtbar halten, und prüfen dafür
 * genau diese Eigenschaft. Für Menschen bleibt es unerreichbar: kein Platz
 * im Bild, tabindex -1 und aria-hidden im HTML.
 */
.koederfeld {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
 * PASSWORT ÄNDERN UND DER HINWEIS NACH EINEM FEHLVERSUCH, seit 1.39.0.
 *
 * Nach einem falschen Passwort trägt «Passwort vergessen?» die Akzentfarbe
 * und einen Rahmen, damit der Satz in der Meldung auf etwas Sichtbares
 * zeigt. Die Schrift darauf ist der Akzenttext, gemessen 7,5 zu 1 hell und
 * 8,0 zu 1 dunkel auf der Karte.
 */
#konto-vergessen.hervorgehoben {
  border: 2px solid var(--akzent);
  color: var(--akzent-text);
  font-weight: 700;
}

.kontopasswort {
  margin: 12px 0 4px;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
}
.kontopasswort .feldhilfe { margin: 6px 0 0; }

/* Abläufe in einer Runde, seit 1.40.0: das Formular für den nächsten Schritt
   und die Liste der bisherigen Schritte. */
.weiterkarte h3 {
  margin: 0 0 6px;
}

.schrittliste ol {
  margin: 10px 0 0;
  padding-left: 22px;
}

.schrittliste .schrittkopf {
  margin: 10px 0 4px;
}

/* Vorlagen für Abläufe, seit 1.41.0 (LS-28). */
.ablaufschrittliste {
  margin: 8px 0 12px;
  padding-left: 22px;
}
.ablaufschrittliste li { margin: 4px 0; }

.ablaufeditor { margin-top: 12px; }
.ablaufschritte {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.ablaufschritt {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--linie);
  border-radius: 6px;
}
.ablaufschritt .ablauf-nummer {
  margin: 0 0 6px;
  font-weight: 600;
}
.ablaufschritt .ablauf-werkzeug,
.ablaufschritt .ablauf-frage,
.ablaufschritt .ablauf-uebernahme,
.ablaufschritt .ablauf-vorgaben {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 8px;
}
.ablauf-uebernahmezeile,
.ablauf-punktezeile,
.ablauf-vorgabenzeile { margin: 0 0 4px; }
.ablauf-vorgabenhilfe { margin: -4px 0 8px; }
.ablaufschritt .ablauf-hoch:disabled { opacity: 0.5; }
.ablaufschritt label { display: block; margin: 0 0 8px; }
.ablaufschritt label select,
.ablaufschritt label input,
.ablaufschritt label textarea { font-weight: normal; }
.ablaufschritt .ablauf-punkte { width: 5em; margin-left: 6px; display: inline-block; }
.ablaufschritt .knopfzeile { margin-top: 4px; }

.ablaufhinweis p { margin: 0 0 8px; }

/* Die Leiste mit dem geplanten Ablauf oben im Pult. Dieselbe Sprache wie
   die Etappenleiste: erledigt leise, der laufende Schritt in der
   Akzentfarbe, der nächste als Knopf. */
.ablaufleiste {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 4px solid var(--akzent);
  background: var(--akzent-blass);
  border-radius: 0 6px 6px 0;
}
.ablaufleiste-name {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--akzent-text);
}
.ablaufleiste ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ablaufleiste li + li::before {
  content: "→";
  margin-right: 18px;
  color: var(--schrift-leise);
}
.ablaufleiste li.erledigt { color: var(--schrift-leise); }
.ablaufleiste li.erledigt::after { content: " ✓"; }
.ablaufleiste li.jetzt { font-weight: 700; color: var(--akzent-text); }

/* Die Wand, seit 1.42.0: der Weg der Runde über der Frage und die Aussagen,
   solange Punkte verteilt werden. */
.wandablauf {
  margin: 0 0 clamp(4px, 0.6vw, 10px);
  font-size: clamp(13px, 1.2vw, 20px);
  color: var(--schrift-leise);
}
.wandablauf .jetzt {
  color: var(--akzent-text);
  font-weight: 700;
}
.wandkandidaten {
  margin: clamp(10px, 1.2vw, 22px) 0 0;
  padding-left: 1.2em;
  font-size: clamp(18px, 2vw, 34px);
  line-height: 1.3;
}
.wandkandidaten li { margin: 0 0 clamp(4px, 0.5vw, 10px); }

/* Der Bereichsbericht, seit 1.43.0. */
.bb-liste { list-style: none; padding: 0; margin: 10px 0; }
.bb-liste li { margin: 6px 0; }
.bb-inhalt { margin: 8px 0 0; padding-left: 22px; }
.bb-inhalt li { margin: 4px 0; }
.bb-abschnitt {
  margin: 36px 0 0;
  padding-top: 18px;
  border-top: 2px solid var(--akzent);
}
.bb-abschnitt .bb-titel { margin: 0 0 4px; }
@media print {
  .bb-abschnitt { break-before: page; border-top: none; padding-top: 0; }
  .bb-abschnitt:first-of-type { break-before: auto; }
}

/* Die zugeklappten Karten der Betreiberkonsole, seit 1.46.0. Markus am
   28.09.2026: selten gebrauchte Abschnitte brauchen zu viel Platz. */
details.konsolenklappe > summary h2 {
  display: inline;
  margin: 0;
}

/* Die Kleingruppen in der Werkzeugrunde, seit 1.47.0. Die Karte kommt aus
   dem Steuerpult und bringt ihren Rahmen mit; der Ort gibt nur Abstand. */
.runde-gruppenort {
  margin: 12px 0;
}

/* Die Zahl der Gruppen im Beitritt der Wand, seit 1.49.0 (LS-30). Leiser als
   Code und Adresse: Sie ist der Hinweis für danach und nicht der Weg hinein. */
.wandgruppenhinweis {
  margin: clamp(8px, 1vw, 18px) 0 0;
  font-size: clamp(16px, 1.6vw, 30px);
  color: var(--akzent-text);
  font-weight: 600;
}
.wandgruppenhinweis.klein {
  margin-top: clamp(4px, 0.5vw, 8px);
  font-size: clamp(14px, 1.3vw, 24px);
  letter-spacing: normal;
  text-indent: 0;
}

/* Der QR-Code für den zweiten Faktor in der Konsole, seit 1.50.0 (LS-19). */
.faktorqr {
  margin: 12px 0 16px;
}
.faktorqr svg {
  display: block;
  /* Die Kante rechnet qr.js auf ganze Felder; eine feste Breite von 200
     Punkten wie beim Pult würde sie wieder in Bruchteile teilen. */
  width: auto;
  height: auto;
}

/* Die Gruppengrösse hinter «Mehr als 30 Personen?», seit 1.51.0. Die
   Zeile ist leise: Sie ist die Ausnahme und nicht der nächste Schritt. */
.mehrplatz {
  display: block;
  margin: 10px 0 4px;
}
.groessenklappe {
  margin: 4px 0;
}