/* Prüfseite – schlicht, dunkel, gut lesbar; Systemschrift, keine fremden Dienste. Kontraste ≥ 4,5:1 (WCAG 2.2 AA). */
:root {
  color-scheme: dark;
  --grund: #0b1022;
  --flaeche: #151c36;
  --flaeche2: #1d2648;
  --linie: #36406b;
  --text: #eef1ff;
  --leise: #b4bbdb;
  --akzent: #7fe0ff;
  --gut: #8ff0b0;
  --hinweis: #ffd27f;
  --gefahr: #ff9a9a;
  --rund: 14px;
}
* { box-sizing: border-box; }
html { font-size: 112.5%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--akzent); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: .4em 0 .6em; }
h2 { font-size: 1.25rem; margin-top: 2em; }
h3 { font-size: 1.05rem; margin-top: 1.6em; }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 1rem; top: 1rem; background: var(--flaeche); padding: .5rem 1rem; z-index: 10; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.leise { color: var(--leise); }
.klein { font-size: .85rem; }
.gut { color: var(--gut); }
.hinweis { color: var(--hinweis); }
.todo { background: #5a3d00; color: #ffe2a8; padding: 0 .3em; }

.kopf {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; border-bottom: 1px solid var(--linie); background: var(--flaeche);
}
.marke { color: var(--text); font-weight: 700; text-decoration: none; }
.marke span { color: var(--akzent); font-weight: 600; }
.kopf nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
.kopf nav a, .abmelden button {
  color: var(--text); background: none; border: 0; font: inherit; padding: .4rem 0; cursor: pointer; text-decoration: none;
}
.kopf nav a:hover, .abmelden button:hover { color: var(--akzent); }
main { max-width: 52rem; margin: 0 auto; padding: 1rem 1rem 3rem; }
.fuss { text-align: center; padding: 1.5rem 1rem; border-top: 1px solid var(--linie); }

.knopf {
  display: inline-block; min-height: 44px; padding: .55rem 1.2rem; border-radius: 999px; border: 0;
  background: var(--akzent); color: #04121c; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.knopf--leise { background: var(--flaeche2); color: var(--text); border: 1px solid var(--linie); font-weight: 600; }
.knopf--gefahr { background: transparent; color: var(--gefahr); border: 1px solid var(--gefahr); font-weight: 600; }
.aktionen { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0; }
.aktionen form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }

.formular { display: grid; gap: 1rem; max-width: 26rem; }
label { display: grid; gap: .3rem; }
input:not([type="radio"], [type="checkbox"]), textarea {
  font: inherit; color: var(--text); background: var(--grund); border: 1px solid var(--linie);
  border-radius: 10px; padding: .6rem .7rem; min-height: 44px; width: 100%;
}
fieldset { border: 1px solid var(--linie); border-radius: var(--rund); padding: .8rem 1rem 1rem; margin: 0; }
legend { padding: 0 .4rem; font-weight: 700; }

.meldung { border-radius: var(--rund); padding: .7rem 1rem; background: var(--flaeche2); border-left: 4px solid var(--gut); }
.meldung--fehler { border-left-color: var(--gefahr); }
.meldung--wichtig { border-left-color: var(--hinweis); }
.passwort code { font-size: 1.4rem; letter-spacing: .05em; user-select: all; }

.kacheln, .runden { list-style: none; padding: 0; display: grid; gap: .8rem; }
.kacheln { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.kachel {
  display: block; padding: 1.2rem; border-radius: var(--rund); background: var(--flaeche); border: 1px solid var(--linie);
  color: var(--text); font-size: 1.2rem; font-weight: 700; text-decoration: none;
}
.kachel:hover { border-color: var(--akzent); }
.runde { padding: 1rem; border-radius: var(--rund); background: var(--flaeche); border: 1px solid var(--linie); }
.runde > a { color: var(--text); text-decoration: none; display: block; }
.runde > a:hover strong { color: var(--akzent); }
.fortschritt { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; margin: .4rem 0; }
.fortschritt progress { flex: 1 1 10rem; height: .6rem; accent-color: var(--akzent); }

.pfad { margin: .2rem 0; }
.titel-klein { font-size: 1.2rem; margin: .2rem 0 .3rem; }
.karte { display: grid; gap: 1rem; }
.zeile { padding: 1.2rem; border-radius: var(--rund); background: var(--flaeche); border: 1px solid var(--linie); }
.lern { font-size: 1.7rem; font-weight: 700; line-height: 1.3; margin: 0 0 .3rem; }
.de { font-size: 1.15rem; margin: 0 0 .5rem; }
.merkmale { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.merkmale span { background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 999px; padding: .1rem .7rem; font-size: .9rem; }
.kontext { margin: .6rem 0 0; }
.urteil { display: grid; gap: .8rem; }
.wahlen { display: flex; flex-wrap: wrap; gap: .5rem; }
.wahl { display: inline-flex; grid-template-columns: none; }
.wahl input { position: absolute; opacity: 0; }
.wahl span {
  display: inline-flex; gap: .4rem; align-items: center; min-height: 44px; padding: .45rem .9rem; border-radius: 999px;
  background: var(--flaeche2); border: 1px solid var(--linie); cursor: pointer;
}
.wahl input:checked + span { background: var(--akzent); color: #04121c; border-color: var(--akzent); font-weight: 700; }
.wahl input:focus-visible + span { outline: 3px solid var(--akzent); outline-offset: 2px; }
kbd { font: inherit; font-size: .8rem; opacity: .75; }
.ton { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ton audio { max-width: 100%; }
.tempo { display: inline-flex; gap: .3rem; }
.tempo button {
  min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid var(--linie); background: var(--flaeche2);
  color: var(--text); font: inherit; cursor: pointer;
}
.tempo button[aria-pressed="true"] { border-color: var(--akzent); color: var(--akzent); font-weight: 700; }
.blaettern { display: flex; justify-content: space-between; gap: 1rem; }
.hinweis-text { margin: 0; color: var(--leise); max-width: 44rem; }
.anleitung { font-size: 1.1rem; margin: 0 0 1rem; }
.schritte { margin: 0; padding: .7rem 1rem .7rem 2.2rem; border-radius: var(--rund); background: var(--flaeche2);
  border: 1px solid var(--linie); }
.schritte li { margin: .15rem 0; }
.knoepfe { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.knopf--gross { font-size: 1.2rem; padding: .8rem 1.6rem; min-height: 52px; }
.knopf:hover, .knopf:focus-visible { filter: brightness(1.12); }
.runde .knopf { margin-top: .3rem; }
.vergleich { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.version { padding: .8rem 1rem 1rem; border-radius: var(--rund); background: var(--flaeche); border: 1px solid var(--linie); }

.tabelle { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
td.aktionen { display: table-cell; }
.karte-klein { padding: .8rem 1rem; border-radius: var(--rund); background: var(--flaeche); border: 1px solid var(--linie); margin: .6rem 0; }
.karte-klein ul { margin: .3rem 0; padding-left: 1.2rem; }
.text { max-width: 44rem; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }