/* Pflegefuchs - Grundgestaltung
   Mobile zuerst, dann nach oben skaliert. Farben liegen als Variablen vor und
   werden im Dunkelmodus ueberschrieben. */

:root {
  --petrol-900: #0d3b40;
  --petrol-700: #14585f;
  --petrol-500: #1d7a83;
  --petrol-100: #d7edef;
  --gruen-600:  #2f7a4d;
  --gruen-100:  #dcefe2;
  --fuchs-600:  #c2560f;
  --fuchs-500:  #e0691c;
  --fuchs-100:  #fbe6d6;
  --pflaume-600: #6b3f6e;
  --enzian-600:  #33518c;
  --schiefer-600: #4a5a66;
  --lehm-600:    #7d6a45;
  --ocker-600:   #8f6d16;
  --altrosa-600: #a06a72;
  --burgund-600: #7a3a4a;
  --moos-600:    #5d7034;
  --rot-600:    #a8322b;
  --rot-100:    #f8e0de;

  --grund:      #fbfaf8;
  --flaeche:    #ffffff;
  --flaeche-2:  #f2f0ec;
  --rand:       #ddd8d1;
  --text:       #1d1b18;
  --text-leise: #5c574f;

  --primaer:       var(--petrol-700);
  --primaer-hell:  var(--petrol-500);
  --primaer-zart:  var(--petrol-100);
  --akzent:        var(--fuchs-600);

  --radius:    14px;
  --radius-s:  9px;
  --schatten:  0 1px 2px rgba(20, 18, 14, .06), 0 4px 14px rgba(20, 18, 14, .05);
  --spalte:    68rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund:      #14161a;
    --flaeche:    #1c1f24;
    --flaeche-2:  #23272e;
    --rand:       #333840;
    --text:       #eceae6;
    --text-leise: #a5a29b;

    --primaer:      #3d9aa3;
    --primaer-hell: #4fb3bd;
    --primaer-zart: #14343a;
    --akzent:       #f0853d;

    --gruen-100: #16301f;
    --gruen-600: #6cc48c;
    --rot-100:   #331a18;
    --rot-600:   #f09189;
    --fuchs-100: #33220f;

    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.huelle {
  width: 100%;
  max-width: var(--spalte);
  margin-inline: auto;
  padding-inline: 16px;
}

main.huelle { flex: 1; padding-block: 28px 56px; }

h1, h2, h3 { line-height: 1.22; letter-spacing: -.012em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.5rem); font-weight: 680; }
h2 { font-size: clamp(1.3rem, 1.15rem + .7vw, 1.6rem); font-weight: 650; }
h3 { font-size: 1.1rem; font-weight: 640; }
p  { margin: 0 0 1em; }

a { color: var(--primaer); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akzent); }

:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 4px;
}

.sprunglink {
  position: absolute;
  left: -9999px;
  background: var(--flaeche);
  padding: 10px 16px;
  border-radius: var(--radius-s);
  z-index: 100;
}
.sprunglink:focus { left: 16px; top: 10px; }

/* Kopf ---------------------------------------------------------------- */
.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 20;
}
.kopf-innen {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 60px;
  padding-block: 8px;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 680;
  font-size: 1.08rem;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}
.marke img { display: block; }

.hauptnav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.hauptnav a {
  padding: 9px 12px;
  border-radius: var(--radius-s);
  text-decoration: none;
  color: var(--text-leise);
  font-weight: 550;
  font-size: .95rem;
}
.hauptnav a:hover { background: var(--flaeche-2); color: var(--text); }
.hauptnav a[aria-current="page"] {
  background: var(--primaer-zart);
  color: var(--primaer);
}
.hauptnav a.knopf-klein { color: #fff; }
.abmelden { margin: 0; }

/* Knoepfe -------------------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-s);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .08s ease, background-color .15s ease, border-color .15s ease;
}
.knopf:hover { background: var(--flaeche-2); color: var(--text); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf:disabled:active { transform: none; }

.knopf-stark {
  background: var(--primaer);
  border-color: var(--primaer);
  color: #fff;
}
.knopf-stark:hover { background: var(--primaer-hell); border-color: var(--primaer-hell); color: #fff; }

.knopf-still { background: transparent; border-color: transparent; color: var(--text-leise); }
.knopf-still:hover { background: var(--flaeche-2); }

.knopf-klein {
  min-height: 38px;
  padding: 7px 15px;
  font-size: .93rem;
  background: var(--primaer);
  border-color: var(--primaer);
}
.knopf-klein:hover { background: var(--primaer-hell); border-color: var(--primaer-hell); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; }

/* Startseite ----------------------------------------------------------- */
.held { padding-block: 20px 40px; max-width: 46rem; }
.augenbraue {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .78rem;
  font-weight: 680;
  color: var(--akzent);
  margin-bottom: .6em;
}
.fuehrungstext { font-size: 1.1rem; color: var(--text-leise); max-width: 42rem; }

.dreiklang {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .dreiklang { grid-template-columns: repeat(3, 1fr); }
}
.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--schatten);
}
.karte h2 { font-size: 1.14rem; }
.karte p { margin: 0; color: var(--text-leise); font-size: .97rem; }
.karte-symbol { font-size: 1.7rem; display: block; margin-bottom: 10px; }

/* Dashboard ------------------------------------------------------------ */
.begruessung {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.begruessung h1 { margin-bottom: .3em; }
.begruessung .fuehrungstext { margin: 0; }

.punktestand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 12px 18px;
  background: var(--primaer-zart);
  border-radius: var(--radius);
}
.punkte-zahl { font-size: 1.7rem; font-weight: 700; color: var(--primaer); line-height: 1; }
.punkte-text { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-leise); }

.abzeichenreihe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.abzeichen {
  padding: 6px 13px;
  background: var(--fuchs-100);
  color: var(--fuchs-600);
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 620;
}

.abschnittstitel { margin-bottom: 14px; }

.modulgitter {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) {
  .modulgitter { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

.modulkarte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-top: 4px solid var(--primaer);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--schatten);
}
.modulkarte.farbe-gruen     { border-top-color: var(--gruen-600); }
.modulkarte.farbe-bernstein { border-top-color: var(--akzent); }
.modulkarte.farbe-pflaume   { border-top-color: var(--pflaume-600); }
.modulkarte.farbe-enzian    { border-top-color: var(--enzian-600); }
.modulkarte.farbe-schiefer  { border-top-color: var(--schiefer-600); }
.modulkarte.farbe-lehm      { border-top-color: var(--lehm-600); }
.modulkarte.farbe-ocker     { border-top-color: var(--ocker-600); }
.modulkarte.farbe-altrosa   { border-top-color: var(--altrosa-600); }
.modulkarte.farbe-burgund   { border-top-color: var(--burgund-600); }
.modulkarte.farbe-moos      { border-top-color: var(--moos-600); }
.modulkarte.gesperrt { opacity: .72; }

.modulkarte header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.modulkarte h3 { margin: 0; }
.modul-text { margin: 0; color: var(--text-leise); font-size: .96rem; flex: 1; }
.modulkarte .knopf { width: 100%; }

.plakette {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--flaeche-2);
  color: var(--text-leise);
  font-size: .76rem;
  font-weight: 640;
  white-space: nowrap;
}
.plakette-erfolg { background: var(--gruen-100); color: var(--gruen-600); }

.balken {
  height: 8px;
  background: var(--flaeche-2);
  border-radius: 999px;
  overflow: hidden;
}
.balken-fuellung {
  height: 100%;
  background: var(--primaer);
  border-radius: 999px;
  transition: width .4s ease;
}
.meta { margin: 0; font-size: .86rem; color: var(--text-leise); }

/* Formulare ------------------------------------------------------------ */
.schmal { max-width: 32rem; }
.mittig { margin-inline: auto; text-align: center; }
.mittig .knopf { margin-top: 8px; }

.formular { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.formular label {
  font-weight: 620;
  font-size: .94rem;
  margin-top: 14px;
}
.formular input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-s);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
}
.formular input:focus-visible { border-color: var(--primaer); }
.formular .knopf { margin-top: 22px; }

.feldhinweis { margin: 4px 0 0; font-size: .84rem; color: var(--text-leise); }
.optional { font-weight: 400; color: var(--text-leise); }
.nebentext { font-size: .93rem; color: var(--text-leise); }

.meldung {
  padding: 12px 15px;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  margin-bottom: 18px;
  font-size: .95rem;
}
.meldung-fehler  { background: var(--rot-100);   border-color: var(--rot-600);   color: var(--rot-600); }
.meldung-erfolg  { background: var(--gruen-100); border-color: var(--gruen-600); color: var(--gruen-600); }

/* Fuss ----------------------------------------------------------------- */
.fuss {
  background: var(--flaeche);
  border-top: 1px solid var(--rand);
  padding-block: 26px;
  margin-top: auto;
}
.hinweis { font-size: .82rem; color: var(--text-leise); max-width: 52rem; margin-bottom: .8em; }
.hinweis.warnhinweis {
  color: var(--rot-600);
  background: var(--rot-100);
  border-left: 3px solid var(--rot-600);
  padding: .6em .8em;
  border-radius: var(--radius-s);
}
.fussnav { display: flex; flex-wrap: wrap; gap: 16px; font-size: .88rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Listen und Tabellen --------------------------------------------------- */
.liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.listenkarte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 18px;
}
.listenkarte h2 { font-size: 1.08rem; margin: 0 0 4px; }

.zielliste { padding-left: 1.15em; margin: 0 0 1.2em; }
.zielliste li { margin-bottom: .45em; }

.tabellenhuelle { overflow-x: auto; margin-bottom: 28px; }
.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
}
.tabelle th, .tabelle td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}
.tabelle th { background: var(--flaeche-2); font-weight: 640; font-size: .86rem; }
.tabelle tr:last-child td { border-bottom: none; }
.tabelle .plakette { margin-left: 6px; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--flaeche-2);
  padding: 2px 6px;
  border-radius: 5px;
}

/* Nachweis -------------------------------------------------------------- */
.nachweis {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-top: 5px solid var(--primaer);
  border-radius: var(--radius);
  padding: 30px 26px;
  margin-bottom: 20px;
  box-shadow: var(--schatten);
  max-width: 46rem;
}
.nachweis-kopf h1 { margin-bottom: .35em; }
.nachweis-person { font-size: 1.05rem; margin-bottom: 1.2em; }

.nachweis-daten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 26px;
  margin: 0 0 8px;
  padding: 16px 0;
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
}
@media (min-width: 560px) {
  .nachweis-daten { grid-template-columns: repeat(2, 1fr); }
}
.nachweis-daten dt {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-leise);
  font-weight: 650;
}
.nachweis-daten dd { margin: 2px 0 0; font-weight: 550; }

.nachweis-inhalte { padding-top: 20px; }
.nachweis-inhalte h2 { font-size: 1.15rem; }
.nachweis-fuss { padding-top: 14px; border-top: 1px solid var(--rand); }
.nachweis-fuss .hinweis { margin: 0; }

/* Druckansicht ---------------------------------------------------------- */
@media print {
  .kopf, .fuss, .nicht-drucken, .sprunglink { display: none !important; }

  :root {
    --flaeche: #fff;
    --grund: #fff;
    --text: #000;
    --text-leise: #333;
    --rand: #999;
  }

  body { background: #fff; color: #000; font-size: 11pt; }
  main.huelle { padding: 0; max-width: none; }

  .nachweis {
    border: 1px solid #999;
    border-top-width: 3px;
    box-shadow: none;
    padding: 18mm 15mm;
    max-width: none;
    page-break-inside: avoid;
  }
  .nachweis h1 { font-size: 20pt; }
  .zielliste li { page-break-inside: avoid; }
  a[href]::after { content: ""; }
}

/* Auf schmalen Schirmen bekommt die Marke eine eigene Zeile. Navigation
   und Abmelden rücken zusammen, damit sie gemeinsam in die zweite passen. */
@media (max-width: 560px) {
  .kopf-innen { gap: 0 6px; padding-block: 6px; }
  .marke { width: 100%; margin-right: 0; margin-bottom: 2px; }
  .hauptnav { gap: 0; }
  .hauptnav a { padding: 8px 9px; font-size: .88rem; }
  .abmelden .knopf { min-height: 38px; padding: 8px 9px; font-size: .88rem; }
}

/* Brotkrumen und Modulseite ---------------------------------------------- */
.brotkrumen {
  font-size: .88rem;
  color: var(--text-leise);
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.brotkrumen a { color: var(--text-leise); }
.brotkrumen a:hover { color: var(--primaer); }

.modul-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.modul-kopf h1 { margin-bottom: .3em; }
.modul-kopf .fuehrungstext { margin: 0; }

.balken-gross { height: 12px; }
.balken-text { margin: 8px 0 26px; }

.schrittliste { list-style: none; padding: 0; margin: 0 0 30px; counter-reset: schritt; }
.schrittliste li { margin-bottom: 8px; }
.schrittliste a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, transform .08s ease;
}
.schrittliste a:hover { border-color: var(--primaer); color: var(--text); }
.schrittliste a:active { transform: translateY(1px); }

.schritt-nummer {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--flaeche-2);
  color: var(--text-leise);
  font-weight: 680;
  font-size: .95rem;
}
.schrittliste .erledigt .schritt-nummer { background: var(--gruen-100); color: var(--gruen-600); }
.schritt-titel { flex: 1; font-weight: 570; }
.schritt-status {
  font-size: .78rem;
  color: var(--gruen-600);
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.testkarte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--akzent);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 26px;
}
.testkarte.gesperrt { border-left-color: var(--rand); opacity: .8; }
.testkarte p:last-of-type { margin-bottom: 1em; }
.testkarte form { margin: 0; }

.quellenhinweis { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--rand); }

/* Kapitel ---------------------------------------------------------------- */
.lesetext { max-width: 40rem; }
.lesetext h2 { margin-top: 1.7em; font-size: 1.25rem; }
.lesetext p { margin-bottom: 1.1em; }

.punkteliste { padding-left: 1.2em; margin: 0 0 1.3em; }
.punkteliste li { margin-bottom: .5em; }

.kasten {
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 1.6em 0;
  border-left: 4px solid;
}
.kasten p { margin: 0; }
.kasten-label {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 6px !important;
}
.kasten-merke { background: var(--primaer-zart); border-left-color: var(--primaer); }
.kasten-merke .kasten-label { color: var(--primaer); }
.kasten-achtung { background: var(--fuchs-100); border-left-color: var(--akzent); }
.kasten-achtung .kasten-label { color: var(--akzent); }

.kernaussagen {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 2.2em;
}
.kernaussagen h2 { margin-top: 0; font-size: 1.1rem; }
.kernaussagen ul { padding-left: 1.2em; margin: 0; }
.kernaussagen li { margin-bottom: .5em; }
.kernaussagen li:last-child { margin-bottom: 0; }

.blaettern {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--rand);
}
.blaettern form { margin: 0; }

/* Fallbeispiel ------------------------------------------------------------ */
.fall { max-width: 42rem; }
.ausgangslage {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--primaer);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 22px;
}
.ausgangslage h2 { margin-top: 0; font-size: 1.05rem; }
.ausgangslage p { margin: 0; }

.fortschritt-punkte {
  font-size: .84rem;
  color: var(--text-leise);
  letter-spacing: .12em;
  margin-bottom: 20px;
}

.station {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--schatten);
}
.station:focus { outline: none; }
.station-zaehler {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 680;
  color: var(--text-leise);
  margin-bottom: 10px;
}
.station-text { margin-bottom: 1.1em; }
.station-frage { font-size: 1.1rem; margin-bottom: .9em; }

.optionen { display: flex; flex-direction: column; gap: 10px; }
.option {
  text-align: left;
  padding: 15px 18px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-s);
  background: var(--grund);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.option:hover:not(:disabled) { border-color: var(--primaer); background: var(--primaer-zart); }
.option:disabled { cursor: default; opacity: .62; }
.option.gewaehlt { opacity: 1; font-weight: 600; border-width: 2px; }
.option.gewaehlt.bewertung-gut        { border-color: var(--gruen-600); background: var(--gruen-100); }
.option.gewaehlt.bewertung-teilweise  { border-color: var(--akzent);    background: var(--fuchs-100); }
.option.gewaehlt.bewertung-ungeeignet { border-color: var(--rot-600);   background: var(--rot-100); }

.rueckmeldung {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--radius-s);
  border-left: 4px solid;
}
.rueckmeldung p { margin-bottom: .8em; }
.rueckmeldung .knopf { margin-top: 6px; }
.rueckmeldung-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
}
.rueckmeldung-gut        { background: var(--gruen-100); border-left-color: var(--gruen-600); }
.rueckmeldung-gut .rueckmeldung-label { color: var(--gruen-600); }
.rueckmeldung-teilweise  { background: var(--fuchs-100); border-left-color: var(--akzent); }
.rueckmeldung-teilweise .rueckmeldung-label { color: var(--akzent); }
.rueckmeldung-ungeeignet { background: var(--rot-100); border-left-color: var(--rot-600); }
.rueckmeldung-ungeeignet .rueckmeldung-label { color: var(--rot-600); }

.station-abschluss { border-left: 4px solid var(--primaer); }
.rueckblick { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rand); }
.rueckblick h3 { font-size: 1rem; margin-bottom: .7em; }
.rueckblick-liste { list-style: none; padding: 0; margin: 0; }
.rueckblick-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 0 10px 14px;
  border-left: 3px solid var(--rand);
  margin-bottom: 8px;
}
.rueckblick-liste .bewertung-gut        { border-left-color: var(--gruen-600); }
.rueckblick-liste .bewertung-teilweise  { border-left-color: var(--akzent); }
.rueckblick-liste .bewertung-ungeeignet { border-left-color: var(--rot-600); }
.rueckblick-nummer {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-leise);
  font-weight: 680;
  width: 100%;
}
.rueckblick-text { flex: 1; font-size: .94rem; }
.rueckblick-marke { font-size: .8rem; font-weight: 640; color: var(--text-leise); }

/* Test -------------------------------------------------------------------- */
.test-kopf { max-width: 42rem; margin-bottom: 26px; }
.test { max-width: 42rem; }

.frage {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--rand);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0 0 16px;
  transition: border-left-color .2s ease;
}
.frage.beantwortet { border-left-color: var(--primaer); }

.frage-legende { padding: 0; margin-bottom: 14px; display: block; width: 100%; }
.frage-nummer {
  display: block;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 680;
  color: var(--text-leise);
  margin-bottom: 6px;
}
.frage-text { font-size: 1.06rem; font-weight: 580; line-height: 1.45; }
.frage-hinweis {
  font-size: .85rem;
  color: var(--text-leise);
  margin: -6px 0 12px;
}

.antwort {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-s);
  margin-bottom: 9px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.antwort:hover { border-color: var(--primaer); background: var(--primaer-zart); }
.antwort:has(input:checked) {
  border-color: var(--primaer);
  border-width: 2px;
  background: var(--primaer-zart);
  padding: 12px 14px;
}
.antwort input { margin: 3px 0 0; width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--primaer); }
.antwort-text { flex: 1; }

.test-fuss {
  position: sticky;
  bottom: 0;
  background: var(--grund);
  border-top: 1px solid var(--rand);
  padding: 16px 0 20px;
  margin-top: 8px;
}
.test-fuss .knopf { width: 100%; }
.test-fuss .meta { margin-bottom: 10px; }
.test-fuss .meta:last-child { margin: 10px 0 0; text-align: center; }

/* Ergebnis ---------------------------------------------------------------- */
.ergebnis-kopf {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  border-left: 5px solid;
  margin-bottom: 22px;
}
.ergebnis-kopf.bestanden      { background: var(--gruen-100); border-left-color: var(--gruen-600); }
.ergebnis-kopf.nicht-bestanden { background: var(--fuchs-100); border-left-color: var(--akzent); }
.ergebnis-kopf h1 { margin-bottom: .3em; }
.ergebnis-kopf .fuehrungstext { margin: 0; color: var(--text); }

.ergebnis-punktzahl { text-align: center; margin: 0; flex-shrink: 0; }
.ergebnis-zahl { display: block; font-size: 3.2rem; font-weight: 720; line-height: 1; }
.ergebnis-von { font-size: .88rem; color: var(--text-leise); }
.bestanden .ergebnis-zahl { color: var(--gruen-600); }
.nicht-bestanden .ergebnis-zahl { color: var(--akzent); }

.ergebnis-aktionen { margin-bottom: 34px; }
.ergebnis-aktionen form { margin: 0; }

.aufloesung { list-style: none; padding: 0; margin: 0; max-width: 44rem; }
.aufloesung-frage {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 4px solid;
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 14px;
}
.aufloesung-frage.richtig { border-left-color: var(--gruen-600); }
.aufloesung-frage.falsch  { border-left-color: var(--rot-600); }

.aufloesung-kopf {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 680;
  color: var(--text-leise);
}
.aufloesung-marke { font-size: 1rem; }
.richtig .aufloesung-marke, .richtig .aufloesung-status { color: var(--gruen-600); }
.falsch  .aufloesung-marke, .falsch  .aufloesung-status { color: var(--rot-600); }
.aufloesung-status { margin-left: auto; }

.aufloesung-text { font-weight: 570; margin-bottom: .9em; }
.aufloesung-antwort { margin-bottom: .9em; }

.aufloesung-optionen { list-style: none; padding: 0; margin: 0 0 1em; }
.aufloesung-optionen li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--radius-s);
  margin-bottom: 5px;
  font-size: .95rem;
  color: var(--text-leise);
}
.aufloesung-optionen .ist-loesung { background: var(--gruen-100); color: var(--text); font-weight: 560; }
.aufloesung-optionen .war-falsch  { background: var(--rot-100); color: var(--text); }
.ist-loesung .opt-marke { color: var(--gruen-600); }
.war-falsch  .opt-marke { color: var(--rot-600); }
.opt-marke { width: 1em; flex-shrink: 0; }
.opt-hinweis {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-leise);
  margin-left: auto;
  white-space: nowrap;
}

.aufloesung-begruendung {
  background: var(--flaeche-2);
  border-radius: var(--radius-s);
  padding: 13px 16px;
  margin-bottom: .8em;
  font-size: .95rem;
}
.aufloesung-quelle { margin: 0; font-size: .87rem; }

/* Nachweis: aufklappbare Inhalte ------------------------------------------ */
.nachweis-kapitel { margin-bottom: 1.4em; }
.inhalt-block {
  border: 1px solid var(--rand);
  border-radius: var(--radius-s);
  margin-bottom: 8px;
  overflow: hidden;
}
.inhalt-block summary {
  padding: 13px 16px;
  cursor: pointer;
  font-weight: 580;
  background: var(--flaeche-2);
  list-style-position: inside;
}
.inhalt-block summary:hover { color: var(--primaer); }
.inhalt-block > *:not(summary) { padding-inline: 16px; }
.inhalt-block > p { padding-block: 12px; margin: 0; }
.inhalt-block .punkteliste { padding-top: 12px; padding-left: 2.2em; margin-bottom: 12px; }

@media print {
  .inhalt-block { break-inside: avoid; }
  .inhalt-block summary { background: none; padding-left: 0; font-size: 1.02em; }
  .inhalt-block > *:not(summary) { padding-inline: 0; }
  /* Im Ausdruck muss alles sichtbar sein, auch was zugeklappt war. */
  .inhalt-block > *:not(summary) { display: revert !important; }
}

/* Fortschrittsbalken ------------------------------------------------------
   Die Breite steht als Klasse statt als style-Attribut im HTML. Inline-Styles
   sind durch die Content-Security-Policy gesperrt, und für style-Attribute
   greifen auch keine Hashes. So bleibt die Richtlinie streng und der Balken
   funktioniert ohne JavaScript. */
.fuell-0 { width: 0%; }
.fuell-1 { width: 1%; }
.fuell-2 { width: 2%; }
.fuell-3 { width: 3%; }
.fuell-4 { width: 4%; }
.fuell-5 { width: 5%; }
.fuell-6 { width: 6%; }
.fuell-7 { width: 7%; }
.fuell-8 { width: 8%; }
.fuell-9 { width: 9%; }
.fuell-10 { width: 10%; }
.fuell-11 { width: 11%; }
.fuell-12 { width: 12%; }
.fuell-13 { width: 13%; }
.fuell-14 { width: 14%; }
.fuell-15 { width: 15%; }
.fuell-16 { width: 16%; }
.fuell-17 { width: 17%; }
.fuell-18 { width: 18%; }
.fuell-19 { width: 19%; }
.fuell-20 { width: 20%; }
.fuell-21 { width: 21%; }
.fuell-22 { width: 22%; }
.fuell-23 { width: 23%; }
.fuell-24 { width: 24%; }
.fuell-25 { width: 25%; }
.fuell-26 { width: 26%; }
.fuell-27 { width: 27%; }
.fuell-28 { width: 28%; }
.fuell-29 { width: 29%; }
.fuell-30 { width: 30%; }
.fuell-31 { width: 31%; }
.fuell-32 { width: 32%; }
.fuell-33 { width: 33%; }
.fuell-34 { width: 34%; }
.fuell-35 { width: 35%; }
.fuell-36 { width: 36%; }
.fuell-37 { width: 37%; }
.fuell-38 { width: 38%; }
.fuell-39 { width: 39%; }
.fuell-40 { width: 40%; }
.fuell-41 { width: 41%; }
.fuell-42 { width: 42%; }
.fuell-43 { width: 43%; }
.fuell-44 { width: 44%; }
.fuell-45 { width: 45%; }
.fuell-46 { width: 46%; }
.fuell-47 { width: 47%; }
.fuell-48 { width: 48%; }
.fuell-49 { width: 49%; }
.fuell-50 { width: 50%; }
.fuell-51 { width: 51%; }
.fuell-52 { width: 52%; }
.fuell-53 { width: 53%; }
.fuell-54 { width: 54%; }
.fuell-55 { width: 55%; }
.fuell-56 { width: 56%; }
.fuell-57 { width: 57%; }
.fuell-58 { width: 58%; }
.fuell-59 { width: 59%; }
.fuell-60 { width: 60%; }
.fuell-61 { width: 61%; }
.fuell-62 { width: 62%; }
.fuell-63 { width: 63%; }
.fuell-64 { width: 64%; }
.fuell-65 { width: 65%; }
.fuell-66 { width: 66%; }
.fuell-67 { width: 67%; }
.fuell-68 { width: 68%; }
.fuell-69 { width: 69%; }
.fuell-70 { width: 70%; }
.fuell-71 { width: 71%; }
.fuell-72 { width: 72%; }
.fuell-73 { width: 73%; }
.fuell-74 { width: 74%; }
.fuell-75 { width: 75%; }
.fuell-76 { width: 76%; }
.fuell-77 { width: 77%; }
.fuell-78 { width: 78%; }
.fuell-79 { width: 79%; }
.fuell-80 { width: 80%; }
.fuell-81 { width: 81%; }
.fuell-82 { width: 82%; }
.fuell-83 { width: 83%; }
.fuell-84 { width: 84%; }
.fuell-85 { width: 85%; }
.fuell-86 { width: 86%; }
.fuell-87 { width: 87%; }
.fuell-88 { width: 88%; }
.fuell-89 { width: 89%; }
.fuell-90 { width: 90%; }
.fuell-91 { width: 91%; }
.fuell-92 { width: 92%; }
.fuell-93 { width: 93%; }
.fuell-94 { width: 94%; }
.fuell-95 { width: 95%; }
.fuell-96 { width: 96%; }
.fuell-97 { width: 97%; }
.fuell-98 { width: 98%; }
.fuell-99 { width: 99%; }
.fuell-100 { width: 100%; }

/* Angesprungene Abschnitte -------------------------------------------------
   scrollIntoView setzt das Ziel an den oberen Rand - dort klebt aber die
   Kopfzeile und verdeckt es. Der Abstand schiebt das Ziel darunter. */
.station,
.frage,
.rueckmeldung,
.lesetext,
.station-abschluss {
  scroll-margin-top: 84px;
}

/* Verwaltung: Inhaltsprüfung ---------------------------------------------- */
.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.wert-schwach { color: var(--rot-600); font-weight: 640; }
.nur-lesbar {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.frage-zelle { white-space: normal; max-width: 28rem; }
.frage-zelle code { display: block; margin-bottom: 3px; font-size: .78rem; }

.pruef-block {
  border: 1px solid var(--rand);
  border-radius: var(--radius-s);
  margin-bottom: 8px;
  background: var(--flaeche);
}
.pruef-block summary {
  padding: 13px 16px;
  cursor: pointer;
  font-weight: 570;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
}
.pruef-block summary:hover { color: var(--primaer); }
.pruef-meta { font-size: .82rem; color: var(--text-leise); margin-left: auto; }
.pruef-inhalt { padding: 0 16px 16px; max-width: 46rem; }
.pruef-inhalt p { margin-bottom: .8em; }
.pruef-kasten {
  background: var(--flaeche-2);
  border-radius: var(--radius-s);
  padding: 10px 14px;
}

.pruef-optionen { list-style: none; padding: 0; margin: 0 0 1.2em; }
.pruef-optionen li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 4px 10px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  margin-bottom: 5px;
  background: var(--flaeche-2);
  font-size: .94rem;
}
.pruef-marke {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--text-leise);
}
.pruef-rueckmeldung { grid-column: 2; color: var(--text-leise); font-size: .9rem; }
.pruef-optionen .bewertung-gut        { background: var(--gruen-100); }
.pruef-optionen .bewertung-gut .pruef-marke        { color: var(--gruen-600); }
.pruef-optionen .bewertung-teilweise  { background: var(--fuchs-100); }
.pruef-optionen .bewertung-teilweise .pruef-marke  { color: var(--akzent); }
.pruef-optionen .bewertung-ungeeignet { background: var(--rot-100); }
.pruef-optionen .bewertung-ungeeignet .pruef-marke { color: var(--rot-600); }
.pruef-optionen .ist-loesung { background: var(--gruen-100); }
.pruef-optionen .ist-loesung .pruef-marke { color: var(--gruen-600); }

.pruef-fragen { padding-left: 1.4em; max-width: 48rem; }
.pruef-fragen > li {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rand);
}
.pruef-frage-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  margin-bottom: .5em;
}
.pruef-frage { font-weight: 570; margin-bottom: .7em; }
.pruef-begruendung {
  background: var(--flaeche-2);
  border-radius: var(--radius-s);
  padding: 11px 14px;
  font-size: .93rem;
  margin: 0;
}

/* Gefahrbereich im Profil -------------------------------------------------- */
.gefahrbereich {
  border: 1px solid var(--rot-600);
  border-radius: var(--radius);
  padding: 20px 22px;
  background: var(--rot-100);
}
.gefahrbereich p { margin-bottom: .9em; }
.gefahrbereich .formular { margin-bottom: 0; }
.gefahrbereich input { background: var(--flaeche); }

.knopf-gefahr {
  background: var(--rot-600);
  border-color: var(--rot-600);
  color: #fff;
}
.knopf-gefahr:hover { background: #8e2a24; border-color: #8e2a24; color: #fff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .knopf-gefahr { color: #1a1113; }
  :root:not([data-theme="light"]) .knopf-gefahr:hover { background: #f3a9a2; border-color: #f3a9a2; }
}

/* Rechtstexte --------------------------------------------------------------
   Etwas mehr Luft als sonst: Diese Seiten werden am Stück gelesen, nicht
   überflogen. */
.rechtstext { max-width: 38rem; }
.rechtstext h2 {
  margin-top: 2.2em;
  padding-top: .6em;
  border-top: 1px solid var(--rand);
  font-size: 1.22rem;
}
.rechtstext h3 { margin-top: 1.6em; font-size: 1.02rem; }
.rechtstext p { margin-bottom: 1.1em; }
.rechtstext ul { padding-left: 1.2em; margin-bottom: 1.3em; }
.rechtstext li { margin-bottom: .5em; }
.rechtstext .tabellenhuelle { margin-block: 1.2em 1.6em; }
.rechtstext .tabelle td { white-space: normal; vertical-align: top; }
.rechtstext .tabelle .meta { font-size: .84rem; }

.rechtsgrundlage {
  font-size: .9rem;
  color: var(--text-leise);
  border-left: 3px solid var(--rand);
  padding: 2px 0 2px 14px;
}