/* Corporate Design nach SPEC.md Abschnitt 5.
   Der Feinschliff ist Schritt 8; die Farbwerte stehen hier schon, damit nichts
   nachtraeglich umgefaerbt werden muss. */

/* Schrift: die Systemschrift aus der Fallback-Kette in `body`.

   Vorgesehen war Roboto, selbst ausgeliefert - nicht über Google Fonts, weil ein
   Aufruf an fonts.googleapis.com die IP-Adresse jedes Besuchers an Google
   übermittelt. Die Dateien lagen aber nie in app/static/schrift/, weder lokal
   noch auf dem Server; die @font-face-Regeln erzeugten nur fünf fehlschlagende
   Anfragen je Seitenaufruf (Befund der Serververwaltung, 02.11.2026). Sie sind
   deshalb entfernt. Gesehen hat ohnehin jeder die Systemschrift.

   Wer Roboto will: roboto-300/400/500/700.woff2 und roboto-mono-400.woff2 nach
   app/static/schrift/ legen (Quelle fonts.google.com, Apache-2.0) und je Datei
   eine @font-face-Regel mit `font-display: swap` davorstellen. */

:root {
  --gruen: #b5cb24;
  --gruen-dunkel: #9cb01b;
  --textgrau: #3c3c3b;
  --ringgrau: #b0b3b2;
  --linie: #e2e4e1;
  --flaeche: #f6f7f4;
  --weiss: #fff;

  /* Ampelfarben der Nachweismatrix. Gruen ist hier dieselbe Hausfarbe -
     deshalb darf sie in der Matrix nicht zusaetzlich als Akzent auftreten. */
  --status-gueltig: #b5cb24;
  --status-faellig: #e8a300;
  --status-ueberfaellig: #c8322a;
  --status-offen: #b0b3b2;
}

* {
  box-sizing: border-box;
}

/* `hidden` muss staerker sein als jede Anzeigeregel weiter unten.
   Ohne das gewinnt `button { display: inline-block }` gegen das Attribut, und
   ein Knopf, den erst ein Skript einblenden soll, steht von Anfang an da - im
   Firefox dann als Knopf, der nichts tut. Genau das ist passiert. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: Roboto, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  color: var(--textgrau);
  background: var(--flaeche);
  line-height: 1.5;
}

code,
.mono {
  font-family: "Roboto Mono", ui-monospace, Consolas, monospace;
}

/* Kopf mit vollflaechigem gruenem Band */
header.kopf {
  background: var(--weiss);
  border-bottom: 4px solid var(--gruen);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

header.kopf .marke {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  color: inherit;
}

/* Das Querformat-Logo ist 258x65 und wird nur verkleinert, nie hochskaliert -
   eine Vektordatei existiert beim Kunden nicht (siehe README). */
header.kopf .marke img {
  height: 2.4rem;
  width: auto;
  display: block;
}

header.kopf .marke span {
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--ringgrau);
  padding-left: 0.9rem;
  border-left: 1px solid var(--linie);
}

.anmeldekarte {
  max-width: 26rem;
  margin: 0 auto;
}

.anmeldelogo {
  display: block;
  width: 13rem;
  height: auto;
  margin: 0 auto 1.75rem;
}

header.kopf .angemeldet {
  font-size: 0.85rem;
  text-align: right;
  color: var(--ringgrau);
}

header.kopf .angemeldet strong {
  color: var(--textgrau);
}

main {
  max-width: 60rem;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

h1 {
  font-weight: 300;
  font-size: 1.75rem;
  margin: 0 0 1.5rem;
}

h1 strong {
  font-weight: 700;
}

h2 {
  font-weight: 500;
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
}

.bereichstitel {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gruen-dunkel);
  margin-bottom: 0.5rem;
}

/* Formulare */
label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ringgrau);
  margin-bottom: 0.35rem;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--linie);
  background: var(--weiss);
  font: inherit;
  color: inherit;
}

input:focus {
  outline: 2px solid var(--gruen);
  outline-offset: -1px;
}

.feld {
  margin-bottom: 1.25rem;
}

.hinweis {
  font-size: 0.85rem;
  color: var(--ringgrau);
  margin-top: 0.35rem;
}

button,
.knopf {
  background: var(--gruen);
  color: var(--weiss);
  border: 0;
  padding: 0.7rem 1.4rem;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

button:hover,
.knopf:hover {
  background: var(--gruen-dunkel);
}

/* Ohne Elementnamen, weil „schlicht" auch auf Links sitzt: In den Vorlagen
   steht `<a class="knopf schlicht">` fuer Abbrechen und Zurueck. Der Selektor
   hiess `button.schlicht` und griff dort nicht - diese Links sahen aus wie die
   Hauptaktion daneben, in acht Vorlagen. */
.schlicht {
  background: transparent;
  color: var(--textgrau);
  border: 1px solid var(--linie);
}

.schlicht:hover {
  background: var(--flaeche);
}

.fehler {
  border-left: 4px solid var(--status-ueberfaellig);
  background: var(--weiss);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th {
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ringgrau);
  font-weight: 500;
  border-bottom: 2px solid var(--gruen);
  padding: 0.5rem 0.75rem 0.5rem 0;
}

td {
  border-bottom: 1px solid var(--linie);
  padding: 0.6rem 0.75rem 0.6rem 0;
}

.fusszeile {
  max-width: 60rem;
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
  font-size: 0.8rem;
  color: var(--ringgrau);
}

/* ------------------------------------------------------------------ */
/* Verwaltungsbereich                                                  */
/* ------------------------------------------------------------------ */

main {
  max-width: 68rem;
}

.verwaltungsnav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.verwaltungsnav a {
  color: var(--textgrau);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.2rem;
}

.verwaltungsnav a:hover {
  border-bottom-color: var(--gruen);
}

.verwaltungsnav .rechts {
  margin-left: auto;
  color: var(--ringgrau);
}

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

textarea,
select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--linie);
  background: var(--weiss);
  font: inherit;
  color: inherit;
}

textarea {
  font-family: "Roboto Mono", ui-monospace, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  resize: vertical;
}

textarea:disabled,
input:disabled,
select:disabled {
  background: var(--flaeche);
  color: var(--ringgrau);
}

button:disabled {
  background: var(--ringgrau);
  cursor: not-allowed;
}

.erfolg {
  border-left: 4px solid var(--gruen);
  background: var(--weiss);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

.knopfreihe {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.knopfreihe button {
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
}

.knopfreihe input[type="file"] {
  font-size: 0.75rem;
  max-width: 11rem;
}

.zeilenform {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.zeilenform input[type="text"] {
  flex: 1 1 16rem;
}

.zeilenform select {
  width: auto;
}

/* Statusmarken der Kursversionen. Bewusst nicht in Hausgruen: Gruen ist in diesem
   System die Ampelfarbe "gueltig" und soll nichts anderes bedeuten (Spec 5). */
.marke {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--linie);
}

.marke-entwurf {
  border-color: var(--status-faellig);
  color: var(--status-faellig);
}

.marke-veroeffentlicht {
  border-color: var(--textgrau);
  color: var(--textgrau);
  font-weight: 500;
}

.marke-archiviert {
  border-color: var(--ringgrau);
  color: var(--ringgrau);
}

.fehlt {
  color: var(--status-ueberfaellig);
}

.werkzeugleiste {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.werkzeugleiste button {
  background: var(--flaeche);
  color: var(--textgrau);
  border: 1px solid var(--linie);
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
}

.werkzeugleiste button:hover {
  background: var(--weiss);
  border-color: var(--gruen);
}

/* ------------------------------------------------------------------ */
/* Auszeichnung im Ergebnistext                                        */
/* ------------------------------------------------------------------ */

/* Die Fläche steht bewusst in Punkt und in einer Proportionalschrift: Sie
   soll zeigen, was auf dem Deckblatt herauskommt. 11 pt ist dort der
   Fließtext (STIL_ABSATZ in app/werkzeug/deckblatt.py) — wer hier 13 wählt,
   sieht denselben Sprung wie später im PDF. Das Textfeld daneben bleibt
   Schreibmaschinenschrift; das ist die Rohfassung, nicht die Vorschau. */
.auszeichnen-flaeche {
  width: 100%;
  min-height: 14rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--linie);
  background: var(--weiss);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
  line-height: 1.45;
  overflow-y: auto;
  white-space: pre-wrap;
}

.auszeichnen-flaeche:focus {
  outline: 2px solid var(--gruen);
  outline-offset: -1px;
}

.auszeichnen-leiste {
  align-items: center;
}

.auszeichnen-leiste button {
  min-width: 2.2rem;
  font-size: 0.85rem;
}

.auszeichnen-grad {
  width: auto;
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--textgrau);
}

/* ------------------------------------------------------------------ */
/* Vorschau und Lerninhalt                                             */
/* ------------------------------------------------------------------ */

.vorschaubalken {
  background: var(--textgrau);
  color: var(--weiss);
  padding: 0.6rem 1.5rem;
  font-size: 0.8rem;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.vorschaubalken a {
  color: var(--gruen);
  margin-left: auto;
}

.lerntext {
  max-width: 44rem;
}

.lerntext h2,
.lerntext h3 {
  font-weight: 500;
  margin-top: 1.75rem;
}

.lerntext table {
  margin: 1.25rem 0;
}

.lerntext blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1.25rem;
  border-left: 3px solid var(--gruen);
  background: var(--flaeche);
}

.lerntext code {
  background: var(--flaeche);
  padding: 0.1rem 0.3rem;
}

.videoplatzhalter {
  background: var(--flaeche);
  border: 1px dashed var(--ringgrau);
  color: var(--ringgrau);
  padding: 3rem 1.5rem;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

figure {
  margin: 1.5rem 0;
}

figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--linie);
}

ul.antworten {
  list-style: none;
  padding-left: 0;
}

ul.antworten li {
  border: 1px solid var(--linie);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.4rem;
  max-width: 44rem;
}

/* ------------------------------------------------------------------ */
/* Kursansicht des Mitarbeiters                                        */
/* ------------------------------------------------------------------ */

.ampel {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* Die Farbe steht nie allein - daneben steht immer ein Text mit Datum.
   Graustufendruck und Barrierefreiheit (Spec 4.2). */
.ampel-gueltig {
  background: var(--status-gueltig);
}
.ampel-faellig {
  background: var(--status-faellig);
}
.ampel-ueberfaellig {
  background: var(--status-ueberfaellig);
}
.ampel-offen {
  background: transparent;
  border: 1px solid var(--status-offen);
}

.kurszeile {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.balken {
  height: 0.4rem;
  background: var(--linie);
  margin-bottom: 0.75rem;
}

.balken.schmal {
  height: 0.25rem;
  margin: 0;
  flex: 1 1 8rem;
}

.balken-fuellung {
  height: 100%;
  background: var(--gruen);
}

.kurskarte h2 {
  font-size: 1.3rem;
  font-weight: 300;
  margin-bottom: 0.75rem;
}

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

.modulzeile {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  border-bottom: 1px solid var(--linie);
  padding: 0.85rem 0;
}

.modulzeile-kopf {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
}

.modulzustand {
  width: 1.2rem;
  text-align: center;
  color: var(--ringgrau);
}

.modulzeile-abgeschlossen .modulzustand {
  color: var(--gruen-dunkel);
}

.modulzeile-in_arbeit .modulzustand {
  color: var(--status-faellig);
}

.modulzeile-gesperrt {
  color: var(--ringgrau);
}

.modulleiste {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
}

.modulnavigation {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.videorahmen {
  position: relative;
  padding-top: 56.25%;
  background: var(--textgrau);
  margin-bottom: 1.5rem;
}

.videorahmen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

fieldset.frageblock {
  border: 1px solid var(--linie);
  padding: 1.25rem;
  margin: 0 0 1.25rem;
  max-width: 44rem;
}

fieldset.frageblock legend {
  padding: 0 0.5rem;
  font-weight: 500;
}

fieldset.frageblock.richtig {
  border-color: var(--status-gueltig);
}

fieldset.frageblock.falsch {
  border-color: var(--status-faellig);
}

.antwortzeile {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  border: 1px solid transparent;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.3rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  color: var(--textgrau);
  cursor: pointer;
}

.antwortzeile:hover {
  background: var(--flaeche);
}

.antwortzeile.loesung {
  border-color: var(--status-gueltig);
  background: var(--flaeche);
}

.antwortzeile.irrtum {
  border-color: var(--status-ueberfaellig);
}

.antwortzeile .mono {
  margin-left: auto;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gruen-dunkel);
}

/* ------------------------------------------------------------------ */
/* Prüfung                                                             */
/* ------------------------------------------------------------------ */

.pruefungsleiste {
  background: var(--textgrau);
  color: var(--weiss);
  padding: 0.7rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.pruefungsleiste .mono {
  color: var(--ringgrau);
}

.ergebniskopf {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.ergebniskopf h1 {
  margin: 0 0 0.35rem;
}

.ergebniszahl {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1;
  padding: 1rem 1.5rem;
  border: 2px solid var(--linie);
  flex: 0 0 auto;
}

.ergebniszahl span {
  font-size: 1.25rem;
  margin-left: 0.15rem;
}

.ergebniszahl.bestanden {
  border-color: var(--status-gueltig);
  color: var(--gruen-dunkel);
}

.ergebniszahl.gescheitert {
  border-color: var(--status-ueberfaellig);
  color: var(--status-ueberfaellig);
}

/* In der Auswertung sind die Zeilen keine Formularfelder mehr */
div.antwortzeile {
  cursor: default;
}

div.antwortzeile:hover {
  background: transparent;
}

div.antwortzeile.loesung:hover {
  background: var(--flaeche);
}

/* ------------------------------------------------------------------ */
/* Nachweismatrix                                                      */
/* ------------------------------------------------------------------ */

.matrixkarte {
  padding: 0;
}

.matrixkarte > .bereichstitel,
.matrixkarte > h1 {
  padding: 0 1.75rem;
}

.matrixkarte > .bereichstitel {
  padding-top: 1.75rem;
}

.matrixkarte > h1 {
  margin-bottom: 1.5rem;
}

.matrixkarte > .hinweis,
.matrixkarte > .legende,
.matrixkarte > .knopfleiste,
.matrixkarte > .zeilenform {
  padding: 0 1.75rem;
}

.matrixkarte > .zeilenform {
  padding-bottom: 1.75rem;
}

/* Kennzahlenband: Zahlen gross, Beschriftung klein und in Versalien - dieselbe
   Ordnung wie im Rest der Anwendung. */
.kennzahlen {
  display: flex;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.kennzahlen > div {
  padding: 1rem 1.75rem;
  border-right: 1px solid var(--linie);
  flex: 1 1 auto;
}

.kennzahlen > div:last-child {
  border-right: 0;
}

.kennzahlen .beschriftung {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ringgrau);
  margin-bottom: 0.4rem;
}

.kennzahlen .wert {
  font-size: 1.05rem;
}

.kennzahlen .wert.zahl {
  font-family: "Roboto Mono", ui-monospace, Consolas, monospace;
  font-size: 1.6rem;
  font-weight: 300;
}

.kennzahlen .wert.zahl.rot {
  color: var(--status-ueberfaellig);
}

.kennzahlen .wert.zahl.orange {
  color: var(--status-faellig);
}

/* Breite Tabellen scrollen in sich, nicht die Seite */
.matrixrahmen {
  overflow-x: auto;
  padding: 0 1.75rem;
}

table.matrix {
  min-width: 44rem;
}

table.matrix th {
  font-size: 0.62rem;
  line-height: 1.4;
  padding: 1.25rem 1rem 0.6rem 0;
  vertical-align: bottom;
  white-space: nowrap;
}

table.matrix th .kurstitel {
  color: var(--textgrau);
}

table.matrix td {
  padding: 0.7rem 1rem 0.7rem 0;
}

table.matrix .namensspalte {
  white-space: nowrap;
  padding-right: 2rem;
}

table.matrix td.namensspalte {
  font-weight: 500;
}

table.matrix .funktion {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--ringgrau);
}

table.matrix td.zelle {
  white-space: nowrap;
}

.zellentext {
  font-family: "Roboto Mono", ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
}

.ampel-leer {
  background: transparent;
  border: 1px solid var(--linie);
}

.legende {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--linie);
  padding-top: 1rem;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--ringgrau);
}

.legende > span {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.knopfleiste {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 1.5rem 0 1rem;
}

.knopfleiste .hauptknopf {
  background: var(--gruen);
  color: var(--weiss);
  border: 0;
  padding: 0.7rem 1.4rem;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.knopfleiste .hauptknopf:hover {
  background: var(--gruen-dunkel);
}

.knopfleiste button.schlicht {
  padding: 0.7rem 1.4rem;
}

.auswahlliste {
  max-height: 18rem;
  overflow-y: auto;
  border: 1px solid var(--linie);
  padding: 0.5rem;
}

.auswahlliste .funktion {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--ringgrau);
}

.klappe {
  border-left: 3px solid var(--gruen);
}

/* Gesperrte Kursversion. Bewusst kein Fehlerrot: Die Sperre ist kein Fehler,
   sondern die Regel, die die Nachweisführung erst möglich macht. */
.sperrhinweis {
  background: var(--flaeche);
  border-left: 3px solid var(--status-faellig);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.sperrhinweis p {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  max-width: 44rem;
}

.sperrhinweis p:last-of-type {
  margin-bottom: 1.1rem;
}

.sperrhinweis form {
  display: inline;
}

/* ------------------------------------------------------------------ */
/* Schmale Bildschirme. Baustellenpersonal arbeitet am Telefon.        */
/* ------------------------------------------------------------------ */

@media (max-width: 40rem) {
  main {
    margin: 1rem auto;
    padding: 0 1rem;
  }

  .karte {
    padding: 1.25rem 1rem;
  }

  .matrixkarte > .bereichstitel,
  .matrixkarte > h1,
  .matrixkarte > .hinweis,
  .matrixkarte > .legende,
  .matrixkarte > .knopfleiste,
  .matrixkarte > .zeilenform,
  .matrixrahmen {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .kennzahlen {
    flex-wrap: wrap;
  }

  .kennzahlen > div {
    flex: 1 1 50%;
    border-bottom: 1px solid var(--linie);
    padding: 0.85rem 1rem;
  }

  header.kopf {
    padding: 0.85rem 1rem;
  }

  header.kopf .marke span {
    display: none;
  }

  h1 {
    font-size: 1.4rem;
  }

  .ergebniszahl {
    font-size: 2.5rem;
  }

  .verwaltungsnav {
    gap: 1rem;
    font-size: 0.7rem;
  }

  /* Knöpfe in Griffgröße, nicht in Mausgröße */
  button,
  .knopf,
  .knopfleiste .hauptknopf {
    padding: 0.85rem 1.2rem;
  }

  .antwortzeile {
    padding: 0.7rem;
  }
}

@media print {
  header.kopf .angemeldet,
  .knopfleiste,
  .verwaltungsnav,
  .klappe,
  .zeilenform,
  .vorschaubalken,
  .pruefungsleiste {
    display: none;
  }

  body {
    background: var(--weiss);
  }

  .karte {
    border: 0;
    padding: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Guthabenkonto                                                       */
/* ------------------------------------------------------------------ */

.kontostand {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.25rem 0 1.5rem;
}

.kontostand .zahl {
  font-family: "Roboto Mono", ui-monospace, Consolas, monospace;
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
}

.kontostand .einheit {
  color: var(--ringgrau);
}

.kontostand.knapp .zahl {
  color: var(--status-faellig);
}

/* Buchungsarten. Kauf und Storno bewusst nicht in Hausgruen - Gruen bedeutet in
   diesem System "gueltiger Nachweis" und sonst nichts (Spec 5). */
.marke-kauf {
  border-color: var(--textgrau);
  color: var(--textgrau);
}

.marke-verbrauch {
  border-color: var(--ringgrau);
  color: var(--ringgrau);
}

.marke-storno,
.marke-korrektur {
  border-color: var(--status-faellig);
  color: var(--status-faellig);
}

.mono.plus {
  color: var(--textgrau);
  font-weight: 500;
}

.mono.minus {
  color: var(--ringgrau);
}

a.wert.zahl {
  text-decoration: none;
  border-bottom: 1px dotted var(--linie);
}

/* Reiter, z. B. aktive gegen deaktivierte Kurse */
.reiter {
  display: flex;
  gap: 1.75rem;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 1.5rem;
}

.reiter a {
  color: var(--ringgrau);
  text-decoration: none;
  padding: 0 0 0.6rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.reiter a.aktuell {
  color: var(--textgrau);
  border-bottom-color: var(--gruen);
  font-weight: 500;
}

.reiter .anzahl {
  font-family: "Roboto Mono", ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--ringgrau);
  margin-left: 0.2rem;
}

/* Pruef-Ampel am Analyseblatt.
   Rot = vorbefuellt, aber von niemandem angesehen. Gruen = bestaetigt.
   Die Farben sind dieselben wie in der Nachweismatrix: In diesem System heisst
   Gruen "geprueft und in Ordnung" und soll nirgends etwas anderes heissen.

   Der Name lautet `pruefampel` und nicht `ampel`: Die Klasse `.ampel` gibt es
   weiter oben schon, als 0,7 rem grossen Punkt der Nachweismatrix. Ein Feld mit
   dieser Klasse erbte deren Groesse und schrumpfte auf elf Pixel zusammen -
   genau das ist beim Bauen passiert und fiel erst im Browser auf. Dasselbe Wort,
   zwei Bedeutungen, ein Stylesheet. */
.pruefampel {
  border-left: 4px solid var(--status-ueberfaellig);
  padding-left: 0.8rem;
}

/* Ausgeschrieben, obwohl Rot schon der Grundzustand ist: Das Skript schaltet
   zwischen beiden Klassen um, und eine davon duerfte dann nicht bloss die
   Abwesenheit der anderen sein. */
.pruefampel-offen {
  border-left-color: var(--status-ueberfaellig);
}

.pruefampel-gut {
  border-left-color: var(--status-gueltig);
}

.pruefampel .haken,
.knopfreihe .haken {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--ringgrau);
  margin-top: 0.35rem;
  cursor: pointer;
}

.pruefampel .haken input,
.knopfreihe .haken input {
  width: auto;
  margin: 0;
  accent-color: var(--gruen);
}

.pruefwort-offen {
  color: var(--status-ueberfaellig);
}

.pruefwort-gut {
  color: var(--gruen-dunkel);
}

.pruefstand {
  font-size: 0.9rem;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: 0.6rem 0;
  margin: 1rem 0 1.5rem;
}

.neuervorschlag {
  color: var(--status-faellig);
}

/* Ein Vorschlag, den jemand von Hand ueberschrieben hat - zum Vergleichen. */
.karte.eingerueckt {
  margin-left: 1rem;
  background: var(--flaeche);
  box-shadow: none;
}

pre.vorschlag {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.9rem;
  margin: 0;
}

/* Das erzeugte Dokument steht auf dem Analyseblatt, nicht hinter einem Knopf.
   Ein automatisch geoeffnetes Fenster faengt jeder Popup-Blocker ab; eine
   eingebettete Anzeige nicht. Hoch genug, dass eine A4-Seite lesbar ist. */
.dokumentansicht {
  width: 100%;
  height: 75vh;
  min-height: 28rem;
  border: 1px solid var(--linie);
  background: var(--flaeche);
}

@media (max-width: 40rem) {
  .dokumentansicht {
    height: 50vh;
  }
}

/* Ein Wert, den man von Hand woandershin uebertraegt - ein Ordnername etwa.
   Ein Klick markiert alles, dann Strg+C. Das ersetzt einen Kopierknopf und
   braucht dafuer kein Skript. */
.ganzmarkieren {
  user-select: all;
  background: var(--flaeche);
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--linie);
}

/* Vorschau des eingefuegten Screenshots. Klein genug, dass sie nicht die Seite
   uebernimmt, gross genug, dass man erkennt, ob man das Richtige erwischt hat. */
.einfuegevorschau {
  display: block;
  max-width: 100%;
  max-height: 14rem;
  margin-top: 0.5rem;
  border: 1px solid var(--linie);
  background: var(--weiss);
}

/* Ueberstimmen einer harten Abweisung (app/ueberstimmen.py). Gelb statt rot:
   Es ist keine zweite Fehlermeldung, sondern der Weg daran vorbei - und der
   Code ist gross, weil er abgetippt werden soll, nicht ueberflogen. */
.ueberstimmen {
  border-left: 4px solid var(--status-faellig);
  background: var(--weiss);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}

.ueberstimmen-code {
  font-size: 2.2rem;
  letter-spacing: 0.35em;
  font-weight: 700;
  color: var(--textgrau);
  margin: 0.25rem 0 0.75rem;
}