/* Ruhige, sachliche Lernumgebung. Kein Druck, keine Spielereien.
   Farben und Abstaende halten sich an das Bedienkonzept vom 31.08.2026. */

/* Schriftgröße: Alle Maße im Blatt hängen an dieser einen Zahl, weil sonst
   nichts in px steht. Wer sie ändert, vergrößert Text UND Abstände mit.
   Die Größe MUSS am html-Element stehen, nicht an body: rem rechnet gegen
   die Wurzel. Steht sie an body, wächst nur der Fließtext, während
   Überschriften und Beschriftungen auf 16px kleben. */
html {
  --schrift-basis: 19px;
  font-size: var(--schrift-basis);
}
html[data-schrift="gross"] { --schrift-basis: 22px; }
html[data-schrift="sehr-gross"] { --schrift-basis: 26px; }

/* Nur zwei Stufen unterhalb der Grundschrift, statt sieben leicht
   verschiedener Werte: --klein für Hilfstexte, --marke für Kleinkapitälchen
   wie „MODUL 9". Beide bewusst dicht an der Grundschrift — winzige
   Beschriftungen sind das, was zuerst unlesbar wird. */
:root {
  --klein: 0.93rem;
  --marke: 0.87rem;
}

:root {
  --grund: #F4F6F7;
  --karte: #FFFFFF;
  --schrift: #1C2B2E;
  --schrift-leise: #4A5C60;
  --linie: #D8DFE1;
  --akzent: #0F6E6A;
  --akzent-hell: #E1EFEE;
  --warn: #A66E14;
  --warn-hell: #FBF3E3;
  --gut: #3E7A46;
  --gut-hell: #EAF2EB;
  --rot: #A33A32;
  --rot-hell: #F8EAE8;
  --rand: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #12191B;
    --karte: #1A2325;
    --schrift: #E3EAEA;
    --schrift-leise: #9FB0B3;
    --linie: #2C3A3D;
    --akzent: #57B6AF;
    --akzent-hell: #16302F;
    --warn: #D9A550;
    --warn-hell: #2A2214;
    --gut: #7FB287;
    --gut-hell: #1B2A1E;
    --rot: #E08A80;
    --rot-hell: #2C1B19;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: "Bitter", Georgia, serif;
  line-height: 1.25;
  text-wrap: balance;
  margin: 0 0 .6rem;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8rem; }
a { color: var(--akzent); }

/* --- Kopf ---------------------------------------------------------------- */

.kopf {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: .8rem 1.5rem;
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
}
.marke {
  font-family: "Bitter", Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--schrift);
  text-decoration: none;
}
.kopf nav { display: flex; gap: 1.25rem; margin-right: auto; }
.kopf nav a { color: var(--schrift-leise); text-decoration: none; font-weight: 600; }
.kopf nav a:hover { color: var(--akzent); }
.abmelden button {
  background: none;
  border: 1px solid var(--linie);
  color: var(--schrift-leise);
  border-radius: 999px;
  padding: .3rem .9rem;
  cursor: pointer;
  font: inherit;
  font-size: var(--klein);
}

/* Schriftgrößen-Wahl. Die drei Knöpfe zeigen ihre Wirkung selbst:
   klein, mittel, groß gesetztes A. */
.schriftwahl { display: flex; align-items: center; gap: .3rem; }
.schriftwahl button {
  background: none;
  border: 1px solid var(--linie);
  color: var(--schrift-leise);
  border-radius: 8px;
  cursor: pointer;
  font-family: "Bitter", Georgia, serif;
  font-weight: 700;
  line-height: 1;
  padding: .35rem .55rem;
  min-width: 2.1rem;
}
.schriftwahl button:hover { border-color: var(--akzent); color: var(--akzent); }
.schriftwahl button[aria-pressed="true"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}
.schriftwahl .stufe1 { font-size: .8rem; }
.schriftwahl .stufe2 { font-size: 1rem; }
.schriftwahl .stufe3 { font-size: 1.25rem; }

/* Breite in rem, nicht in px: Bei größerer Schrift wächst die Spalte mit,
   sonst stünden am Ende zwölf Wörter pro Zeile. */
main { max-width: 62rem; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }

.meldungen { margin-bottom: 1.25rem; }
.meldung {
  padding: .7rem 1rem;
  border-radius: var(--rand);
  background: var(--akzent-hell);
  margin-bottom: .5rem;
}
.meldung.warning { background: var(--warn-hell); }
.meldung.error { background: var(--rot-hell); }
.meldung.success { background: var(--gut-hell); }

/* --- Terminleiste -------------------------------------------------------- */

.terminleiste {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.5rem;
}
.terminleiste .naechste { font-size: 1.15rem; font-weight: 600; }
.terminleiste .countdown { color: var(--akzent); font-weight: 700; }
.terminfolge {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .75rem;
  font-size: var(--klein);
}
.terminfolge span {
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: .15rem .7rem;
  color: var(--schrift-leise);
}
.terminfolge span.doppelt {
  background: var(--warn-hell);
  border-color: var(--warn);
  color: var(--schrift);
  font-weight: 600;
}

/* --- Modulkacheln -------------------------------------------------------- */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .9rem;
}
.kachel {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--linie);
  border-radius: var(--rand);
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.kachel:hover { border-color: var(--akzent); }
.kachel.sitzt { border-left-color: var(--gut); }
.kachel.wackelt { border-left-color: var(--warn); }
.kachel.vorbei { opacity: .55; }
.kachel .nr {
  font-size: var(--marke);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--akzent);
}
.kachel .titel { font-family: "Bitter", Georgia, serif; font-weight: 600; }
.kachel .zeile { font-size: var(--klein); color: var(--schrift-leise); }
.kachel .klausur { font-weight: 600; color: var(--schrift); font-size: var(--klein); }

/* --- Modulseite ---------------------------------------------------------- */

.modulkopf {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.1rem;
}
.modulkopf .zurueck { font-size: var(--klein); }
.modulkopf .fakten { color: var(--schrift-leise); font-size: var(--klein); }

.reiter { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.reiter a {
  padding: .45rem 1rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  text-decoration: none;
  color: var(--schrift-leise);
  background: var(--karte);
  font-weight: 600;
}
.reiter a.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }

.ampelwahl { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; }
.ampelwahl span { font-size: var(--klein); color: var(--schrift-leise); }
.ampelwahl button {
  border: 1px solid var(--linie);
  background: var(--karte);
  color: var(--schrift-leise);
  border-radius: 999px;
  padding: .3rem .9rem;
  cursor: pointer;
  font: inherit;
  font-size: var(--klein);
}
.ampelwahl button.an { border-color: var(--akzent); background: var(--akzent-hell); color: var(--schrift); font-weight: 600; }

.block {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 1.2rem 1.3rem;
  margin-bottom: 1rem;
}
.block > :last-child { margin-bottom: 0; }
.leer { color: var(--schrift-leise); font-style: italic; }

/* --- Landkarte ----------------------------------------------------------- */

.lernpunkt { border-bottom: 1px solid var(--linie); padding: 1rem 0; }
.lernpunkt:first-of-type { padding-top: 0; }
.lernpunkt:last-of-type { border-bottom: none; padding-bottom: 0; }
.fundstellen { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.fundstellen a, .fundstellen span {
  font-size: var(--klein);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: .18rem .7rem;
  text-decoration: none;
  background: var(--grund);
}
.fundstellen .gesetz { border-color: var(--akzent); color: var(--akzent); }
.fundstellen .skript { color: var(--schrift-leise); }
.fundstellen .buch { color: var(--schrift-leise); }

/* --- Formulare und Knoepfe ---------------------------------------------- */

textarea, input[type=text], input[type=date], input[type=password], select {
  width: 100%;
  font: inherit;
  padding: .6rem .8rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--grund);
  color: var(--schrift);
}
textarea { min-height: 12rem; resize: vertical; line-height: 1.6; }
label { display: block; font-weight: 600; margin: .8rem 0 .3rem; }

.knopf, button.knopf {
  display: inline-block;
  background: var(--akzent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .6rem 1.2rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.knopf.leise { background: var(--karte); color: var(--schrift); border: 1px solid var(--linie); }
.knopf.warnend { background: var(--rot); }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopfreihe { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .9rem; }

/* --- Faelle -------------------------------------------------------------- */

.fallliste { display: flex; flex-direction: column; gap: .6rem; }
.fallzeile {
  display: flex;
  gap: .8rem;
  align-items: center;
  padding: .8rem 1rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--karte);
  text-decoration: none;
  color: inherit;
}
.fallzeile:hover { border-color: var(--akzent); }
.fallzeile .marke-fall {
  font-size: var(--marke);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  color: var(--schrift-leise);
  white-space: nowrap;
}
.fallzeile .haken { color: var(--gut); font-weight: 700; margin-left: auto; white-space: nowrap; }

/* --- Simulation ---------------------------------------------------------- */

.klausurleiste {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: .8rem 1.2rem;
  margin-bottom: 1rem;
}
.restzeit {
  font-family: "Bitter", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.restzeit.knapp { color: var(--rot); }
.klausurleiste .hinweis { color: var(--schrift-leise); font-size: var(--klein); margin-right: auto; }

.ergebnis {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 1rem 1.3rem;
  border-radius: var(--rand);
  margin-bottom: 1rem;
  background: var(--karte);
  border: 1px solid var(--linie);
}
.ergebnis.bestanden { background: var(--gut-hell); border-color: var(--gut); }
.ergebnis.nicht { background: var(--warn-hell); border-color: var(--warn); }
.ergebnis .zahl { font-family: "Bitter", Georgia, serif; font-size: 2rem; font-weight: 700; }

/* --- Assistent ----------------------------------------------------------- */

.assistent-raum { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 760px) { .assistent-raum { grid-template-columns: 1fr; } }

.gespraechsliste { display: flex; flex-direction: column; gap: .35rem; }
.gespraechsliste a {
  padding: .5rem .8rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--karte);
  text-decoration: none;
  color: inherit;
  font-size: var(--klein);
}
.gespraechsliste a.an { border-color: var(--akzent); background: var(--akzent-hell); }

.verlauf { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1rem; }
.blase { padding: .8rem 1.1rem; border-radius: var(--rand); max-width: 46rem; }
.blase.mensch { background: var(--akzent-hell); align-self: flex-end; }
.blase.assistent { background: var(--karte); border: 1px solid var(--linie); }
.blase > :last-child { margin-bottom: 0; }
.blase .wer {
  font-size: var(--marke);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  color: var(--schrift-leise);
  margin-bottom: .3rem;
}

/* --- Schwaechen ---------------------------------------------------------- */

.schwaechenliste { display: flex; flex-direction: column; gap: .5rem; }
.schwaeche {
  display: flex;
  gap: .8rem;
  align-items: center;
  flex-wrap: wrap;
  padding: .7rem 1rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--karte);
}
.schwaeche.erledigt { opacity: .5; }
.schwaeche .modulmarke {
  font-size: var(--marke);
  font-weight: 700;
  color: var(--akzent);
  white-space: nowrap;
}
.schwaeche form { margin-left: auto; display: flex; gap: .4rem; }
.schwaeche button {
  border: 1px solid var(--linie);
  background: var(--grund);
  border-radius: 999px;
  padding: .2rem .8rem;
  font: inherit;
  font-size: var(--marke);
  cursor: pointer;
  color: var(--schrift-leise);
}

/* --- Anmeldung ----------------------------------------------------------- */

.anmeldekarte {
  max-width: 24rem;
  margin: 4rem auto;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 2rem;
}

.speicherstand { font-size: var(--klein); color: var(--schrift-leise); }

table { border-collapse: collapse; width: 100%; }
td, th { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--linie); }
.scrollbar { overflow-x: auto; }