/*
 * 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;
  --akzent-schrift: #ffffff;
  --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 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;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #17181a;
    --karte: #212327;
    --schrift: #ffffff;
    --schrift-leise: #cdcdc7;
    --linie: #3a3d42;
    --akzent: #6fae9b;
    /* 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;
    /* 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;
    --option-e: #f0a58f;
    --option-schrift: #000000;
  }
}

* { 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;
}

.unterzeile {
  margin: 4px 0 0;
  /* 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 .erprobung 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,
.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;
}

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

/* ---------------- 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;
}

.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;
}

/* ---------------- 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;
}

.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"] {
  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 Telefon 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);
}

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

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); }

/* 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;
}

/* ---------------- 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; }

/* ---------------- 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); }

.argumenttext { flex: 1 1 auto; }

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

.wahlliste { margin-bottom: 8px; }

.wahl {
  display: flex;
  align-items: center;
  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; }

.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;
}

.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;
  color: var(--akzent);
  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); }

.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;
  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.
 */
.kontomarke {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.2;
}

.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 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;
}

.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 Telefon 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;
}