/* ============================================================================
 * app/web.css — Oberflaeche der oeffentlichen Selbsteinschaetzung
 * ----------------------------------------------------------------------------
 * Zielgruppe ist ueberwiegend aelter. Daraus folgen die harten Vorgaben, die
 * hier nicht verhandelbar sind und deshalb oben stehen:
 *
 *   - Grundschriftgroesse 17px, Zeilenhoehe 1.6
 *   - Kontrast nach WCAG AA (die Markenfarbe #597075 auf Weiss liegt bei
 *     5,3:1 und traegt damit auch normalen Fliesstext; das Orange #ef7d00
 *     liegt bei 2,8:1 und wird deshalb NIE fuer Text auf hellem Grund
 *     benutzt, sondern nur als Flaeche, Rahmen oder Balken)
 *   - sichtbarer Fokus ueberall, auch bei Mausbedienung
 *   - benutzbar bis 320px Breite
 *   - prefers-reduced-motion wird respektiert
 *   - kein reines Rot fuer "kein Pflegegrad" — das ist ein Befund, kein Fehler
 *
 * Keine externen Schriften. Systemschriften sind hier kein Kompromiss: sie
 * sind auf jedem Geraet bereits geladen und halten die Flugmodus-Zusage.
 * ========================================================================== */

:root {
  --marke:        #597075;
  --marke-dunkel: #41555a;
  --marke-hell:   #c0d3d7;
  --marke-blass:  #eef3f4;
  --akzent:       #ef7d00;
  --text:         #1f2b2e;
  --text-leise:   #4f6165;
  --linie:        #d3dde0;
  --flaeche:      #ffffff;
  --grund:        #f6f9fa;

  --radius: 10px;
  --breite: 46rem;
}

* { box-sizing: border-box; }

/* Muss vor allen Layoutregeln stehen und !important tragen: ein spaeteres
 * "display: flex" im Stylesheet schlaegt sonst das hidden-Attribut aus dem
 * Browser-Standardstylesheet, und versteckte Elemente sind trotzdem zu sehen.
 * Genau das ist beim Fortschrittsbalken auf der Wiederaufnahme-Seite
 * passiert. */
[hidden] { display: none !important; }

html {
  /* Nicht in px festnageln waere schoener, aber die Zielgruppe stellt die
   * Browserschrift praktisch nie um; 17px ist die verlaessliche Untergrenze. */
  font-size: 17px;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 1rem;
}

/* --- Fokus. Zwei Ringe, damit er auf hellem und dunklem Grund sichtbar ist -- */
:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 4px;
}

.sprungmarke {
  position: absolute;
  left: -9999px;
  background: var(--marke);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 100;
}
.sprungmarke:focus {
  left: 0;
  top: 0;
}

/* ==========================================================================
   Kopf — Spanne und Fortschritt
   ========================================================================== */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

.kopf-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.kopf-marke {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.marke-name {
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--marke);
}
.marke-titel {
  font-size: 0.85rem;
  color: var(--text-leise);
}

.kopf-stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  margin-left: auto;
}

/* Die Spanne ist die Hauptinformation des Kopfes und darf das auch aussehen. */
.spanne {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--marke-dunkel);
  white-space: nowrap;
}
.spanne-zusatz {
  font-size: 0.8rem;
  color: var(--text-leise);
}

.fortschritt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 12rem;
  min-width: 10rem;
}
.balken {
  flex: 1 1 auto;
  height: 8px;
  background: var(--marke-blass);
  border: 1px solid var(--linie);
  border-radius: 999px;
  overflow: hidden;
}
.balken-fuell {
  height: 100%;
  width: 0;
  background: var(--akzent);
  transition: width 0.3s ease;
}
.fortschritt-text {
  font-size: 0.8rem;
  color: var(--text-leise);
  white-space: nowrap;
}

/* ==========================================================================
   Schrittleiste
   ========================================================================== */

.schrittleiste {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  overflow-x: auto;
}
.schrittleiste ol {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
}
.schrittleiste li { flex: 0 0 auto; }

.schritt-knopf {
  font: inherit;
  font-size: 0.82rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  color: var(--text-leise);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.schritt-knopf:hover { background: var(--marke-blass); }
.schritt-knopf[aria-current="step"] {
  background: var(--marke);
  border-color: var(--marke);
  color: #fff;
  font-weight: 600;
}

/* Ein Punkt statt eines Hakens: der Haken suggeriert "richtig gemacht",
 * hier geht es nur um "beantwortet". */
.schritt-punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  flex: 0 0 auto;
}
.schritt-punkt.teil { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.schritt-punkt.voll { background: currentColor; }

/* ==========================================================================
   Inhalt
   ========================================================================== */

main {
  padding: 1.5rem 0 2rem;
}
main:focus { outline: none; }

h1 {
  font-size: 1.65rem;
  line-height: 1.25;
  margin: 0 0 0.75rem;
  color: var(--marke-dunkel);
}
h2 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 2rem 0 0.5rem;
  color: var(--marke-dunkel);
}
h3 {
  font-size: 1rem;
  margin: 1.25rem 0 0.35rem;
}
p { margin: 0 0 0.9rem; }
ul { margin: 0 0 0.9rem; padding-left: 1.3rem; }
li { margin-bottom: 0.35rem; }

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

.leise {
  color: var(--text-leise);
  font-size: 0.9rem;
}

.kasten {
  background: var(--marke-blass);
  border-left: 4px solid var(--marke);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.9rem 1rem;
  margin: 0 0 1rem;
}
.kasten-akzent { border-left-color: var(--akzent); }
.kasten p:last-child { margin-bottom: 0; }

.modul-kopf {
  border-bottom: 2px solid var(--marke-hell);
  padding-bottom: 0.6rem;
  margin-bottom: 1.25rem;
}
.modul-nummer {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* ==========================================================================
   Kriterien
   ========================================================================== */

.kriterium {
  border-top: 1px solid var(--linie);
  padding: 1rem 0;
}
.kriterium:first-of-type { border-top: none; }

.kriterium-kopf {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.6rem;
}
.kriterium-titel {
  font-weight: 600;
  flex: 1 1 auto;
  /* Siehe .gruppe-titel: ohne min-width: 0 bestimmt das laengste Wort die
   * Mindestbreite, und deutsche Kriterientitel sind lang. */
  min-width: 0;
  overflow-wrap: break-word;
}
.kriterium-id {
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  flex: 0 0 auto;
  padding-top: 0.15rem;
}

/* Offen heisst offen — nie stillschweigend als 0 behandeln. */
.kriterium[data-bewertet="nein"] .kriterium-id::after {
  content: " ·";
  color: var(--akzent);
  font-weight: 700;
}

.gewichtung {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a4b00;              /* Orange waere auf Weiss zu schwach (2,8:1) */
  background: #fdf0e0;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  vertical-align: 0.1em;
}

/* --- Erlaeuterungen ------------------------------------------------------ */

/* Das "?" ist ein echter Knopf mit Trefferflaeche, kein dekoratives Zeichen:
 * die Zielgruppe bedient das oft mit dem Daumen auf einem Telefon. */
.hilfe {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  border: 1.5px solid var(--marke);
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--marke-dunkel);
  cursor: pointer;
}
.hilfe:hover { background: var(--marke); color: #fff; }
.hilfe[aria-expanded="true"] { background: var(--marke); color: #fff; }

.anker {
  background: var(--marke-blass);
  border-left: 4px solid var(--marke-hell);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.85rem 1rem;
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
}
.anker p { margin: 0 0 0.6rem; }
.anker ul { margin: 0 0 0.7rem; }
.anker > :last-child { margin-bottom: 0; }

.anker-ueberschrift {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.anker-abgrenzung { color: var(--text-leise); }

.anker-stufen { margin: 0 0 0.7rem; }
.anker-stufen dt {
  font-weight: 700;
  margin-top: 0.4rem;
}
.anker-stufen dd {
  margin: 0 0 0 0;
  color: var(--text-leise);
}

/* Die Warnung markiert kontraintuitive Kriterien — Dreifachwertung, die
 * umgekehrte Reihenfolge bei 4.13. Orange als Flaeche, nie als Textfarbe. */
.anker-warnung {
  border-left: 3px solid var(--akzent);
  padding-left: 0.7rem;
  font-weight: 600;
}

.karte-erklaerung { background: var(--marke-blass); }
.karte-erklaerung .anker { background: var(--flaeche); }

/* --- Freitexte ------------------------------------------------------------ */

textarea {
  font: inherit;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1.5px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  resize: vertical;
  min-height: 4.5rem;
}
textarea:focus { border-color: var(--marke); }

/* Kindmodus: was in diesem Alter zu erwarten ist. Bewusst als eigener,
 * ruhiger Block ueber den Knoepfen — es ist eine Lesehilfe, keine
 * Handlungsaufforderung, und darf nicht wie eine vorausgewaehlte Antwort
 * aussehen. */
.altersreferenz {
  margin: 0 0 0.5rem;
  padding: 0.4rem 0.7rem;
  background: var(--marke-blass);
  border-radius: var(--radius);
  font-size: 0.88rem;
  color: var(--marke-dunkel);
}

/* --- Bewertungsknoepfe --------------------------------------------------- */

.stufen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}

.stufe {
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.3;
  text-align: left;
  background: var(--flaeche);
  border: 1.5px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.55rem 0.6rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 3.5rem;
  color: var(--text);
}
.stufe:hover { border-color: var(--marke); background: var(--marke-blass); }

.stufe-wert {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-leise);
}

.stufe.gewaehlt {
  background: var(--marke);
  border-color: var(--marke-dunkel);
  color: #fff;
}
.stufe.gewaehlt .stufe-wert { color: #fff; }

/* --- Ja/Nein und Auswahllisten ------------------------------------------- */

.wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.wahl .stufe { flex: 1 1 10rem; min-height: 0; }

.ankreuz {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.7rem;
  cursor: pointer;
}
.ankreuz input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.25rem;
  flex: 0 0 auto;
  accent-color: var(--marke);
}

/* --- Modul 5: Gruppen, Haeufigkeiten, Rechenweg -------------------------- */

.gruppe-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
  border-bottom: 2px solid var(--marke-hell);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

/* min-width: 0 ist hier nicht kosmetisch: ein Flex-Element ist
 * standardmaessig mindestens so breit wie sein laengstes Wort. Bei
 * "Verhaltensvorschriften" neben der nicht umbrechenden Punktezahl sprengt
 * das die Zeile und laesst die ganze Seite waagerecht scrollen. */
.gruppe-titel {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Das Zwischenergebnis der Gruppe steht neben der Ueberschrift, nicht am
 * Ende: Modul 5 hat vier getrennte Zwischenergebnisse, und wer das nicht
 * sieht, haelt die Rechnung fuer willkuerlich. */
.gruppe-punkte {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--marke-dunkel);
  background: var(--marke-blass);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  white-space: nowrap;
}

.faktoren { margin-bottom: 0.5rem; }

.hf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.hf-frage { font-weight: 600; margin: 0; }

.hf-zeile input[type="number"] {
  font: inherit;
  width: 5.5rem;
  padding: 0.5rem 0.6rem;
  border: 1.5px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  min-height: 2.75rem;
}
.hf-zeile select {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1.5px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  min-height: 2.75rem;
}
.hf-zeile input:focus, .hf-zeile select:focus { border-color: var(--marke); }
.hf-zeile input[disabled], .hf-zeile select[disabled] {
  background: var(--grund);
  color: var(--text-leise);
}

/* "Kommt nicht vor" ist eine eigene Antwort, keine leere Eingabe — deshalb
 * ein Knopf mit Zustand und nicht nur ein Haekchen am Rand. */
.keine {
  font: inherit;
  font-size: 0.86rem;
  background: var(--flaeche);
  border: 1.5px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
  color: var(--text-leise);
  cursor: pointer;
  min-height: 2.75rem;
}
.keine:hover { border-color: var(--marke); background: var(--marke-blass); }
.keine.gewaehlt {
  background: var(--marke);
  border-color: var(--marke-dunkel);
  color: #fff;
  font-weight: 600;
}

/* Rueckmeldung, was die Eingabe bewirkt hat. Ohne sie tippt man ins Leere. */
.hf-ergebnis {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
  min-height: 1.3em;
}

.rechenweg {
  margin-top: 1rem;
  border-top: 1px solid var(--linie);
  padding-top: 1rem;
  font-size: 0.9rem;
}
.rechenweg-block { margin-bottom: 1.25rem; overflow-x: auto; }
.rechenweg table {
  border-collapse: collapse;
  width: 100%;
  min-width: 22rem;
}
.rechenweg th, .rechenweg td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--linie);
}
.rechenweg th {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.rechenweg .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.rechenweg tfoot td { font-weight: 700; border-bottom: none; }
.rechenweg tfoot tr:first-child td { border-top: 2px solid var(--marke-hell); }

/* --- Eingabefelder -------------------------------------------------------- */

label.feld {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
input[type="text"] {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1.5px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  width: 100%;
  max-width: 18rem;
}
input[type="text"]:focus { border-color: var(--marke); }

.feld-rueckmeldung {
  font-size: 0.9rem;
  margin-top: 0.35rem;
  min-height: 1.4em;
}
.feld-rueckmeldung.gut  { color: var(--marke-dunkel); }
.feld-rueckmeldung.warn { color: #8a4b00; }

/* ==========================================================================
   Knoepfe
   ========================================================================== */

.knopf {
  font: inherit;
  font-weight: 600;
  background: var(--flaeche);
  color: var(--marke-dunkel);
  border: 1.5px solid var(--marke);
  border-radius: var(--radius);
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  min-height: 2.75rem;
}
.knopf:hover { background: var(--marke-blass); }
.knopf[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.knopf-haupt {
  background: var(--marke);
  border-color: var(--marke-dunkel);
  color: #fff;
}
.knopf-haupt:hover { background: var(--marke-dunkel); }

.knopf-gross {
  font-size: 1.05rem;
  padding: 0.8rem 1.5rem;
}

.knopf-schlicht {
  font: inherit;
  font-size: 0.85rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--linie);
  color: var(--text-leise);
  cursor: pointer;
  padding: 0.2rem 0;
}
.knopf-schlicht:hover { color: var(--text); border-bottom-color: var(--text); }

/* ==========================================================================
   Fussnavigation
   ========================================================================== */

.fuss {
  position: sticky;
  bottom: 0;
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  padding: 0.6rem 0 0.5rem;
}
.fuss-zeile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.fuss-mitte {
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-leise);
}
.fuss-zeile-2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.4rem;
}
.speicherhinweis {
  font-size: 0.8rem;
  color: var(--text-leise);
}

/* ==========================================================================
   Ergebnis
   ========================================================================== */

.ergebnis-gross {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--marke-dunkel);
  margin: 0 0 0.35rem;
}
.ergebnis-punkte {
  font-variant-numeric: tabular-nums;
  color: var(--text-leise);
}

/* Kein Rot. "Kein Pflegegrad" ist ein Befund, kein Fehler — und die Seite
 * darf an dieser Stelle keine Sackgasse sein. */
.ergebnis-gross.ohne { color: var(--text-leise); }

.modultabelle {
  border-collapse: collapse;
  width: 100%;
}
.modultabelle th, .modultabelle td {
  text-align: left;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--linie);
}
.modultabelle th {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.modultabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.modultabelle tfoot td {
  font-weight: 700;
  border-bottom: none;
  border-top: 2px solid var(--marke-hell);
}

/* Das verworfene der Module 2 und 3 bleibt sichtbar, aber erkennbar
 * ausgegraut — wer es ganz weglaesst, erzeugt den Verdacht, es sei
 * vergessen worden. */
.modultabelle .verworfen td { color: var(--text-leise); }
.zaehlt-nicht {
  display: block;
  font-size: 0.78rem;
  color: var(--text-leise);
}

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

a.knopf { display: inline-block; text-decoration: none; }

.haftung {
  font-size: 0.85rem;
  color: var(--text-leise);
  border-top: 1px solid var(--linie);
  padding-top: 1rem;
  margin-top: 2rem;
}

/* ==========================================================================
   Schmale Geraete — bis 320px benutzbar
   ========================================================================== */

@media (max-width: 34rem) {
  .stufen { grid-template-columns: 1fr; }

  /* Bewertungsknoepfe untereinander, Punktwert und Label nebeneinander —
   * die Zeile "3  überwiegend unselbständig" liest sich als eine Einheit. */
  .stufen .stufe { flex-direction: row; align-items: baseline; gap: 0.5rem; min-height: 2.75rem; }

  /* Bei .wahl steht im .stufe-wert kein Punktwert, sondern ein ganzes Label
   * ("überwiegend inkontinent"). Nebeneinander bricht das unschoen um, also
   * bleibt es hier untereinander. */
  .wahl .stufe { flex-direction: column; align-items: stretch; }

  /* Zahl und Bezugszeitraum gehoeren zusammen und sollen auch auf einem
   * schmalen Display nebeneinander stehen — "3" und "pro Tag" ergeben nur
   * gemeinsam eine Aussage. Die Beschriftung rueckt dafuer in eine eigene
   * Zeile, "Kommt nicht vor" in die naechste. */
  .hf-frage { flex-basis: 100%; }
  .hf-zeile .keine { flex: 1 1 100%; }
  .kopf-stand { width: 100%; }
  .spanne { white-space: normal; }
  h1 { font-size: 1.4rem; }
  .ergebnis-gross { font-size: 1.6rem; }

  /* Auf einem kleinen Display konkurrieren feststehender Kopf und Fuss mit
   * dem Inhalt um Hoehe. Der Kopf wird deshalb auf das Noetige eingedampft:
   * Spanne und Balken bleiben, der erklaerende Beisatz und der Titel neben
   * dem Markennamen fallen weg — beides steht ohnehin auf der Seite. */
  .marke-titel,
  .spanne-zusatz { display: none; }

  .kopf-zeile { padding-top: 0.4rem; padding-bottom: 0.4rem; row-gap: 0.25rem; }
  .kopf-marke { flex: 0 0 auto; }
  .kopf-stand { margin-left: 0; }
  .spanne { font-size: 1rem; }
  .schrittleiste ol { padding: 0.25rem 0; }
  main { padding: 1rem 0 1.25rem; }

  /* Der feststehende Fuss darf dem Inhalt nicht die halbe Hoehe nehmen.
   * Die Restzeit bleibt zwischen den Knoepfen, wird aber kleiner und darf
   * umbrechen; der Speicherhinweis entfaellt — dass auf dem Geraet
   * gespeichert wird, steht bereits auf der Einstiegsseite. */
  .fuss { padding: 0.4rem 0 0.35rem; }
  .fuss-mitte { font-size: 0.75rem; line-height: 1.3; }
  .fuss-zeile-2 { padding-top: 0.25rem; }
  .speicherhinweis { display: none; }
}

@media (max-width: 22rem) {
  .innen { padding: 0 0.6rem; }
  .karte { padding: 0.9rem; }
}

/* ==========================================================================
   Bewegung nur, wenn sie gewuenscht ist
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Druck / PDF
   Gedruckt wird ausschliesslich das in app/web.js aufgebaute Druckdokument
   (#druck) — die Bedienoberflaeche zeigt immer nur einen Schritt und waere
   als Ausdruck wertlos. Fusszeile auf jeder Seite ueber position: fixed,
   der @page-Rand unten haelt den Platz dafuer frei.
   ========================================================================== */

.nur-druck { display: none; }

@media print {
  @page { margin: 16mm 14mm 22mm; }

  html { font-size: 10.5pt; }
  body { background: #fff; color: #000; }

  /* Die gesamte Bedienoberflaeche verschwindet … */
  .kopf, .schrittleiste, main, .fuss, .sprungmarke { display: none !important; }

  /* … und nur das Druckdokument bleibt. */
  .nur-druck { display: block; }

  #druck { padding-bottom: 12mm; }   /* Abstand zur fixierten Fusszeile */

  .dk-kopf { border-bottom: 1pt solid #000; padding-bottom: 2mm; margin-bottom: 4mm; }
  .dk-kopf h1 { font-size: 15pt; margin: 0 0 1mm; color: #000; }
  .dk-kopf p { margin: 0; font-size: 9pt; color: #333; }

  .dk-ergebnis h2, .dk-modul h2 {
    font-size: 12pt;
    margin: 0 0 2mm;
    color: #000;
    border-bottom: 0.5pt solid #999;
    padding-bottom: 1mm;
  }

  .dk-grad { font-size: 16pt; font-weight: 700; margin: 0 0 1mm; }

  /* Ein Modul wird nie mitten in der Liste zerrissen — aber es erzwingt
   * auch keine eigene Seite. Gemessen macht das den Unterschied zwischen
   * 7 und 5 Seiten: Modul 1 (5 Zeilen) und Modul 6 (6 Zeilen) fuellten
   * ihre erzwungene Seite sonst nur zu einem Drittel. Jedes Modul ist
   * kleiner als eine Seite, passt es nicht mehr in den Rest, rutscht es
   * komplett auf die naechste. */
  .dk-modul { break-inside: avoid; margin-bottom: 6mm; }
  .dk-modul h2 { break-after: avoid; }

  .dk-zeile {
    display: flex;
    gap: 4mm;
    justify-content: space-between;
    padding: 1.2mm 0;
    border-bottom: 0.5pt solid #ddd;
    break-inside: avoid;
  }
  .dk-links { flex: 1 1 auto; }
  .dk-rechts { flex: 0 0 auto; font-weight: 600; text-align: right; max-width: 45%; }

  /* Offene Fragen erkennbar, aber nicht alarmierend — es ist ein legitimer
   * Zustand, mit dem man in ein Beratungsgespraech gehen kann. */
  .dk-zeile.offen .dk-rechts { font-weight: 400; color: #666; font-style: italic; }
  .dk-zeile.gesperrt .dk-rechts { font-weight: 400; color: #666; }

  .dk-zwischen { margin: 2mm 0 0; font-size: 9.5pt; }
  .dk-anmerkung { font-size: 9pt; color: #333; margin: 1.5mm 0 0; }

  .dk-freitext { margin-top: 2mm; break-inside: avoid; }
  .dk-freitext-label { margin: 0; font-size: 9pt; color: #333; }
  .dk-freitext-inhalt {
    margin: 0.5mm 0 0;
    border-left: 2pt solid #999;
    padding-left: 3mm;
    white-space: pre-wrap;
  }

  .dk-tabelle { border-collapse: collapse; width: 100%; margin: 2mm 0; }
  .dk-tabelle td { padding: 1.2mm 2mm 1.2mm 0; border-bottom: 0.5pt solid #ddd; }
  .dk-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
  .dk-tabelle tfoot td { font-weight: 700; border-bottom: none; border-top: 1pt solid #000; }

  /* Haftungshinweis auf jeder Seite. */
  .dk-fuss {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 7.5pt;
    line-height: 1.35;
    color: #333;
    border-top: 0.5pt solid #999;
    padding-top: 1.5mm;
  }
}