@charset "UTF-8";
/* ---------------------------------------------------------------------
   Lernplattform Sachkunde — Gestaltung

   Fuer das Handy gebaut, nicht fuer den Bildschirm. Die Teilnehmer
   lernen in der Bahn und in der Pause, nicht am Schreibtisch. Alles,
   was hier steht, gilt zuerst fuer das schmale Fenster; weiter unten
   wird fuer groessere Fenster nur nachjustiert.

   Farben und Schrift wie in den Buechern:
     Markengruen  #1B9347      Text         #2F3336
     dunkel       #12703A      Grau         #636463
     hell         #EAF3EC      Linien       #C4C9CD

   Arial ist die Hausschrift. Kein Monospace -- nirgends.
   --------------------------------------------------------------------- */

:root {
  --marke:      #1B9347;
  --dunkel:     #12703A;
  --hell:       #EAF3EC;
  --text:       #2F3336;
  --grau:       #636463;
  --linie:      #C4C9CD;
  --flaeche:    #F0F1F2;
  --rot:        #C0392B;
  --rothell:    #FBEEEC;
  --blau:       #1F5FA6;

  /* Eine Tippflaeche unter 44 px trifft man mit dem Daumen nicht
     zuverlaessig. Das ist keine Geschmacksfrage. */
  --tipp: 44px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 17px;          /* kleiner liest sich unterwegs schlecht */
  line-height: 1.55;
  color: var(--text);
  background: #fff;
}

/* --- Kopfbalken ---------------------------------------------------- */

.balken {
  background: var(--dunkel);
  color: #fff;
  /* Randbereich des Geraets (Notch, Home-Leiste) aussparen */
  padding: calc(10px + env(safe-area-inset-top)) 0 10px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.balken-innen {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wort { font-size: 16px; letter-spacing: .02em; }
.wort strong { font-weight: 700; }

.abmelden {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 6px;
  padding: 7px 12px;
  min-height: var(--tipp);
  display: inline-flex;
  align-items: center;
}

/* --- Rumpf --------------------------------------------------------- */

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 20px 16px calc(40px + env(safe-area-inset-bottom));
}

h1 {
  font-size: 23px;
  line-height: 1.25;
  margin: 4px 0 6px;
  font-weight: 700;
}

h2 {
  font-size: 18px;
  margin: 28px 0 10px;
  font-weight: 700;
}

.vorspann { color: var(--grau); margin: 0 0 22px; }

/* --- Meldungen ----------------------------------------------------- */

.hinweis, .fehler {
  border-left: 4px solid var(--marke);
  background: var(--hell);
  padding: 12px 14px;
  border-radius: 0 6px 6px 0;
  margin: 0 0 18px;
}

.fehler {
  border-left-color: var(--rot);
  background: var(--rothell);
}

/* --- Formular ------------------------------------------------------ */

label { display: block; font-weight: 700; margin: 0 0 6px; }

input[type="text"] {
  width: 100%;
  min-height: var(--tipp);
  padding: 11px 13px;
  /* 16px oder groesser, sonst zoomt iOS beim Antippen in das Feld */
  font-size: 18px;
  font-family: inherit;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1.5px solid var(--linie);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
}

input[type="text"]:focus {
  outline: 3px solid rgba(27,147,71,.3);
  border-color: var(--marke);
}

.knopf {
  display: block;
  width: 100%;
  min-height: var(--tipp);
  margin-top: 16px;
  padding: 13px 18px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: var(--marke);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.knopf:active { background: var(--dunkel); }
.knopf[disabled] { background: var(--linie); cursor: default; }

.knopf-leise {
  background: #fff;
  color: var(--dunkel);
  border: 1.5px solid var(--marke);
}

/* --- Gebietsliste auf der Startseite -------------------------------- */

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

.gebiete li { margin: 0 0 10px; }

.gebiete a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 12px 14px;
  border: 1.5px solid var(--linie);
  border-radius: 9px;
  text-decoration: none;
  color: var(--text);
  background: #fff;
}

.gebiete a:active { background: var(--flaeche); }

.kuerzel {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 7px;
  background: var(--hell);
  color: var(--dunkel);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gebiete .anzahl { margin-left: auto; color: var(--grau); font-size: 15px; }
.gebiete .leer { opacity: .5; }

/* --- Frage --------------------------------------------------------- */

.zaehler {
  font-size: 15px;
  color: var(--grau);
  margin: 0 0 4px;
}

.balkenleiste {
  height: 5px;
  background: var(--flaeche);
  border-radius: 3px;
  overflow: hidden;
  margin: 0 0 20px;
}

.balkenleiste span {
  display: block;
  height: 100%;
  background: var(--marke);
}

.frage {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 6px;
}

.regel {
  font-size: 14px;
  color: var(--grau);
  margin: 0 0 16px;
}

/* Die Antworten sind ganze Flaechen zum Antippen, keine kleinen
   Kaestchen daneben. Das echte input bleibt bedienbar fuer
   Tastatur und Screenreader, ist aber nicht zu sehen. */

.wahl { list-style: none; margin: 0 0 8px; padding: 0; }

.wahl li { margin: 0 0 10px; }

.wahl input { position: absolute; opacity: 0; pointer-events: none; }

.wahl label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: var(--tipp);
  margin: 0;
  padding: 13px 14px;
  font-weight: 400;
  border: 1.5px solid var(--linie);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}

.kasten {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border: 2px solid var(--linie);
  border-radius: 5px;
  background: #fff;
  position: relative;
}

.wahl input:checked + label { border-color: var(--marke); background: var(--hell); }
.wahl input:checked + label .kasten { border-color: var(--marke); background: var(--marke); }

.wahl input:checked + label .kasten::after {
  content: "";
  position: absolute;
  left: 7px; top: 2px;
  width: 6px; height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.wahl input:focus-visible + label { outline: 3px solid rgba(27,147,71,.35); }

/* Nach dem Absenden */

.wahl label.war-richtig { border-color: var(--marke); background: var(--hell); }
.wahl label.war-falsch  { border-color: var(--rot);   background: var(--rothell); }

.merk {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.war-richtig .merk { color: var(--dunkel); }
.war-falsch  .merk { color: var(--rot); }

/* --- Erklaerung ---------------------------------------------------- */

.erklaerung {
  border: 1.5px solid var(--linie);
  border-left: 4px solid var(--marke);
  border-radius: 0 9px 9px 0;
  padding: 14px;
  margin: 18px 0 0;
  background: var(--flaeche);
}

.erklaerung h3 { margin: 0 0 6px; font-size: 16px; }
.erklaerung p  { margin: 0 0 8px; }
.erklaerung .quelle { font-size: 14px; color: var(--grau); margin: 0; }

/* --- Ergebnis ------------------------------------------------------ */

.ergebnis {
  text-align: center;
  padding: 26px 16px;
  border: 1.5px solid var(--linie);
  border-radius: 10px;
  margin: 0 0 22px;
}

.ergebnis .zahl {
  display: block;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--dunkel);
}

.ergebnis .von { color: var(--grau); }

/* --- Fuss ---------------------------------------------------------- */

footer {
  border-top: 1px solid var(--linie);
  margin-top: 36px;
  padding: 18px 16px calc(26px + env(safe-area-inset-bottom));
  font-size: 14px;
  color: var(--grau);
}

footer p { max-width: 44rem; margin: 0 auto; }

/* --- Groessere Fenster ---------------------------------------------
   Erst ab hier wird etwas breiter und ruhiger. Die Handy-Fassung
   bleibt die Grundlage.
   ------------------------------------------------------------------- */

@media (min-width: 40rem) {
  body { font-size: 18px; }
  h1   { font-size: 28px; }
  .frage { font-size: 21px; }
  .knopf { width: auto; min-width: 14rem; }
  main { padding-top: 28px; }
}

/* Wer im System dunkel eingestellt hat, bekommt wenigstens keine
   grelle weisse Flaeche ins Gesicht. */

@media (prefers-color-scheme: dark) {
  :root {
    --text:    #E7E9EA;
    --grau:    #A8AEB2;
    --linie:   #3C4347;
    --flaeche: #23282B;
    --hell:    #16301F;
    --rothell: #35211E;
  }
  body { background: #15191B; }
  input[type="text"],
  .wahl label,
  .gebiete a,
  .kasten { background: #1D2225; color: var(--text); }
  .ergebnis .zahl { color: #5BC27E; }
}