/* 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;
  --marker: #FBEFA6;
  --marker-rand: #D9C34E;
  --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;
    --marker: #3B3618;
    --marker-rand: #7A6C2A;
  }
}

* { 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 ---------------------------------------------------------------- */

/* Bleibt beim Blättern oben stehen (Steffen, 17.09.2026). Die Seiten sind
   lang geworden - Glossar 89 Einträge, Griffregister bis 121 Normen -, und
   wer unten steht, kam sonst nur mit einem Sprung nach ganz oben ins Menü.
   Die Höhe misst base.html und legt sie als --kopf ab; alles, was selbst
   klebt oder angesprungen wird, rechnet damit. */
.kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .8rem 1.5rem;
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Bei schmalem Fenster bricht die Leiste um und wird hoch - dann darf sie
   NICHT kleben, sonst frisst sie den halben Schirm. Entschieden wird nach der
   Hoehe, nicht nach der Breite: eine feste Breitenschwelle trifft es nicht.
   Gemessen 17.09.2026 bei 800px Fensterhoehe: 1280px breit -> 62px Leiste
   (8 %), 700px breit -> 178px (22 %), 600px breit -> 174px (22 %). Die Marke
   setzt base.html bei ueber 25 % der Fensterhoehe. Ohne JavaScript bleibt sie
   klebend - das ist der harmlosere Fall. */
html[data-kopf-klebt="nein"] .kopf { position: static; }
.marke {
  font-family: "Bitter", Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--schrift);
  text-decoration: none;
}
/* Die Menuepunkte duerfen umbrechen. Ohne das war die Leiste am Handy
   breiter als der Schirm (gemessen 15.09.2026: 441px bei 420px Fenster) und
   die ganze Seite liess sich waagerecht schieben - in jeder Schriftstufe. */
.kopf nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-right: auto; }
.kopf nav a {
  color: var(--schrift-leise);
  text-decoration: none;
  font-weight: 600;
  padding-bottom: .15rem;
  border-bottom: 2px solid transparent;
}
.kopf nav a:hover { color: var(--akzent); }
.kopf nav a.an { color: var(--akzent); border-bottom-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[title] { cursor: help; }
.terminfolge span.doppelt {
  background: var(--warn-hell);
  border-color: var(--warn);
  color: var(--schrift);
  font-weight: 600;
}

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

/* Breite nach Umfang: je 15 Stunden eine Spalte (Steffen, 24.10.2026).
   Fuenf Spalten, weil die Reihe 1,2,1,1,1,1,1,2,3,2,3 dann ohne Luecke
   in vier Zeilen aufgeht. Schmal: untereinander, wie vorher. */
.kacheln {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .9rem;
}
.kachel.breite-2 { grid-column: span 2; }
.kachel.breite-3 { grid-column: span 3; }
@media (max-width: 48rem) {
  .kacheln { grid-template-columns: 1fr; }
  .kachel.breite-2, .kachel.breite-3 { grid-column: auto; }
}
.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.vorbei { opacity: .55; }

/* Bestanden und "jetzt dran" (Steffen, 17.09.2026). Die Marke sitzt oben
   rechts in der Kachel, deshalb hier position: relative. */
.kachel { position: relative; }
.kachel.bestanden {
  border-left-color: var(--gut);
  background: var(--gut-hell);
}
.kachel.bestanden .stand { color: var(--gut); font-weight: 600; }
.kachel .kachelhaken {
  position: absolute;
  top: .7rem;
  right: .8rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--gut);
  color: #fff;
  font-size: 1rem;
  line-height: 1.6rem;
  text-align: center;
  font-weight: 700;
}
.kachel.aktuell {
  border-color: var(--akzent);
  border-left-color: var(--akzent);
  box-shadow: 0 0 0 2px var(--akzent-hell);
}
.kachel .kachelmarke {
  position: absolute;
  top: .7rem;
  right: .8rem;
  background: var(--akzent);
  color: #fff;
  font-size: var(--marke);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .12rem .45rem;
  border-radius: 999px;
}
/* Platz fuer Haken und Marke, damit der Titel nicht darunterlaeuft. */
.kachel.bestanden .nr { padding-right: 1.5rem; }
.kachel.aktuell .nr { padding-right: 4.5rem; }
.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; }

.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; }

/* --- Modul-Ueberblick (Lernpunkte) ----------------------------------------------------------- */

.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 .haken { color: var(--gut); font-weight: 700; margin-left: auto; white-space: nowrap; }

.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);
}

/* --- Modul 0: Lehrgang --------------------------------------------------- */

.inhaltsliste { list-style: none; padding: 0; margin: 0; counter-reset: kap; }
.inhaltsliste li {
  counter-increment: kap;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem .4rem .75rem 0;
  border-bottom: 1px solid var(--linie);
}
.inhaltsliste li:last-child { border-bottom: none; }
.inhaltsliste li::before {
  content: counter(kap);
  font-family: "Bitter", Georgia, serif;
  font-weight: 700;
  color: var(--akzent);
  min-width: 1.6rem;
  text-align: center;
}
.inhaltsliste a { font-weight: 600; text-decoration: none; }
.inhaltsliste a:hover { text-decoration: underline; }
.inhaltsliste .dauerangabe { color: var(--schrift-leise); font-size: var(--klein); margin-left: auto; }
.inhaltsliste .titel-inaktiv { color: var(--schrift-leise); }
.inhaltsliste li.kommt-noch::before { color: var(--schrift-leise); }
.inhaltsliste form { margin: 0; }
.hakenknopf {
  border: 1px solid var(--linie);
  background: var(--karte);
  color: var(--schrift-leise);
  border-radius: 50%;
  width: 2rem; height: 2rem;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}
.hakenknopf.an { background: var(--gut); border-color: var(--gut); color: #fff; }

.lernziele h3 {
  font-size: var(--marke);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--akzent);
}
.lernziele ul { margin-bottom: 0; }

.merkkasten {
  background: var(--akzent-hell);
  border: 1px solid var(--akzent);
  border-left-width: 4px;
  border-radius: var(--rand);
  padding: 1rem 1.3rem;
  margin-bottom: 1rem;
  font-weight: 600;
}
.merkkasten > :last-child { margin-bottom: 0; }
/* Marke fuer alles, was von der Plattform stammt und nicht vom Referenten:
   Zeichen plus Wort, in Anmerkungs- und Merkkaesten dasselbe (Steffen, 05.09.2026). */
.plattformmarke {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--marke);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: .4rem;
}
.plattformzeichen {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.uebung .herkunft .plattformzeichen {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -.2em;
  margin-right: .35rem;
}
.uebung .herkunft {
  font-size: var(--klein);
  color: var(--schrift-leise);
  margin: -.3rem 0 .9rem;
}
.uebung details { margin-top: .8rem; }
.uebung summary { cursor: pointer; font-weight: 600; color: var(--akzent); }
.uebung .loesung {
  margin-top: .8rem;
  padding: .9rem 1.1rem;
  background: var(--grund);
  border-radius: 8px;
}
.uebung .loesung > :last-child { margin-bottom: 0; }

.kapitelnav {
  display: flex;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}
.kapitelnav form { margin: 0; }

/* Original-PDF und ueberarbeitetes PDF direkt hinter "Ueberarbeitetes Skript",
   platzsparend in einer Zeile (Steffen, 05.09.2026) */
.ueberschriftzeile { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.ueberschriftzeile h2 { margin-right: 0; }
.skriptlinks { font-size: var(--klein); color: var(--schrift-leise); }
.skriptlinks a { color: var(--akzent); text-decoration: none; border-bottom: 1px dotted var(--akzent); }

/* Gesetzeszitate in Kapiteltexten */
blockquote {
  margin: 0 0 .9rem;
  padding: .8rem 1.1rem;
  border-left: 3px solid var(--linie);
  background: var(--grund);
  border-radius: 0 8px 8px 0;
  font-style: normal;
}
blockquote > :last-child { margin-bottom: 0; }

/* Was im Skript fehlt und im Gesetz steht: deutlich abgesetzt vom Skriptstoff,
   damit beim Lesen nie unklar ist, was der Referent sagt und was ergänzt ist.
   Gestrichelter Balken gegen den durchgezogenen Rahmen des Merkkastens: Die
   beiden Kastenarten sind so auch im Schwarz-Weiß-Ausdruck zu trennen. */
.anmerkung {
  margin: 1.1rem 0;
  padding: .9rem 1.1rem;
  background: var(--akzent-hell);
  border-left: 4px dashed var(--akzent);
  border-radius: 0 8px 8px 0;
}
.anmerkung > :last-child { margin-bottom: 0; }
.anmerkung table { background: var(--karte); }
.anmerkung blockquote { background: var(--karte); }

/* Zusammenfassungen der Skripte (Spec 27.09.2026): Erklaerungen, die nicht im
   Skript stehen, sehen aus wie die Anmerkungen der Plattform; der Vermerk des
   Referenten "klausurrelevant" ist eine Warnfarben-Marke. */
.erklaerung {
  margin: 1.1rem 0;
  padding: .9rem 1.1rem;
  background: var(--akzent-hell);
  border-left: 4px dashed var(--akzent);
  border-radius: 0 8px 8px 0;
}
.erklaerung > :last-child { margin-bottom: 0; }
.klausurmarke {
  display: inline-block;
  font-size: var(--marke);
  font-weight: 700;
  color: var(--warn);
  background: var(--warn-hell);
  border: 1px solid var(--warn);
  border-radius: 1em;
  padding: 0 .5em;
  white-space: nowrap;
}
.hinweiszeile { color: var(--schrift-leise); font-size: var(--klein); }

/* --- 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; }

/* --- Ueberblick (02.09.2026) --------------------------------------------- */

.ueberblick-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
}
.ueberblick-raster .block { margin-bottom: 1rem; }
.balken {
  height: 1.1rem;
  border-radius: 999px;
  background: var(--akzent-hell);
  overflow: hidden;
  margin: .4rem 0 .5rem;
}
.balken .fuellung { height: 100%; background: var(--akzent); border-radius: 999px; }
.balkentext { margin-bottom: .3rem; }
.schritte { margin: 0; padding-left: 1.2rem; }
.schritte li { margin-bottom: .4rem; }

.kalender {
  display: grid;
  grid-template-columns: 4.6rem repeat(7, minmax(4.2rem, 1fr));
  gap: .15rem;
  min-width: 42rem;
  font-size: var(--klein);
}
.kal-kopf { text-align: center; color: var(--schrift-leise); padding: .2rem 0; font-weight: 600; }
.kal-woche {
  display: flex; flex-direction: column; justify-content: center;
  padding: .3rem .4rem; color: var(--schrift-leise); border-radius: 6px;
}
.kal-woche.aktuell { background: var(--akzent-hell); color: var(--schrift); font-weight: 600; }
.kal-tag {
  min-height: 3.6rem;
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: .25rem .3rem .3rem;
  display: flex; flex-direction: column; gap: .15rem;
  background: var(--karte);
  position: relative;
}
.kal-tag.wochenende { background: var(--grund); }
.kal-tag.vorbei { opacity: .55; }
.kal-tag.heute { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); opacity: 1; }
.kal-datum { color: var(--schrift-leise); font-variant-numeric: tabular-nums; }
.kal-tag.heute .kal-datum { color: var(--akzent); font-weight: 700; }
.kal-chip {
  display: inline-block; border-radius: 4px; padding: 0 .35rem;
  font-weight: 600; line-height: 1.5; cursor: help;
}
.kal-chip.seminar { background: var(--akzent); color: #fff; }
.kal-chip.klausur { background: var(--warn); color: #fff; }
.kal-chip.moodle {
  background: transparent; color: var(--akzent); border: 1px dashed var(--akzent);
  align-self: flex-start;
}
.kal-lern { display: flex; gap: .15rem; margin-top: auto; }
.kal-lern span {
  flex: 1; text-align: center; border-radius: 3px;
  background: var(--akzent-hell); color: var(--akzent);
  font-size: var(--marke); line-height: 1.4; cursor: help;
}
.kal-legende {
  display: inline-block; padding: 0 .4rem; border-radius: 4px; margin-right: .3rem; font-weight: 600;
}
.kal-legende.seminar { background: var(--akzent); color: #fff; }
.kal-legende.klausur { background: var(--warn); color: #fff; }
.kal-legende.moodle { border: 1px dashed var(--akzent); color: var(--akzent); }
.kal-legende.lern { background: var(--akzent-hell); color: var(--akzent); }

.bestand { border-collapse: collapse; width: 100%; font-size: var(--klein); min-width: 52rem; }
.bestand th, .bestand td { padding: .45rem .5rem; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: middle; }
.bestand th { color: var(--schrift-leise); font-weight: 600; }
.bestand .zahl { text-align: center; font-variant-numeric: tabular-nums; }
.bestand .fehlt { color: var(--warn); font-weight: 700; }
.bestand .haken form { display: inline; }
.bestand tr.bestanden td { background: var(--gut-hell); }

.ergebniswahl {
  display: flex; gap: .8rem; align-items: end; flex-wrap: wrap; margin-top: .8rem;
  font-size: var(--klein);
}
.ergebniswahl label { display: flex; flex-direction: column; gap: .15rem; color: var(--schrift-leise); }
.ergebniswahl select, .ergebniswahl input { font-size: 1rem; padding: .25rem .4rem; width: auto; }
.ergebniswahl input[type="number"] { width: 5.5rem; }

.kategoriemarke {
  font-size: var(--marke); letter-spacing: .04em; text-transform: uppercase;
  color: var(--akzent); background: var(--akzent-hell); border-radius: 4px; padding: .05rem .4rem;
  white-space: nowrap;
}

/* --- Kompakter Ueberblick (03.09.2026) ----------------------------------- */

.titelband {
  display: grid;
  grid-template-columns: minmax(16rem, 1.4fr) minmax(13rem, 1fr) minmax(15rem, 1.2fr);
  gap: 1.2rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: .9rem 1.2rem;
  margin-bottom: 1rem;
  align-items: start;
}
@media (max-width: 52rem) { .titelband { grid-template-columns: 1fr; gap: .8rem; } }
.titelband .naechste { font-size: 1.05rem; }
.titelband .terminfolge { margin-top: .45rem; }
.tb-kopf { display: flex; align-items: baseline; gap: .4rem; }
.tb-kopf > span, .tb-kopf > h2 { font-family: "Bitter", Georgia, serif; font-weight: 600; font-size: 1.05rem; margin: 0; }
.tb-fortschritt .balken { margin: .35rem 0 .25rem; height: .8rem; }
.balkentext { font-size: var(--klein); }
.tb-schritte .schritte { list-style: none; padding: 0; margin: .3rem 0 0; font-size: var(--klein); }
.tb-schritte .schritte li { margin: 0 0 .2rem; }
.tb-schritte .wann { font-variant-numeric: tabular-nums; color: var(--schrift-leise); margin-right: .25rem; }

/* Info-Knopf: Mouseover zeigt den title, Klick klappt den Text auf. */
details.info { display: inline-block; position: relative; }
details.info > summary {
  list-style: none; cursor: help; color: var(--akzent);
  font-size: 1rem; line-height: 1; padding: 0 .1rem; user-select: none;
}
details.info > summary::-webkit-details-marker { display: none; }
details.info > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 3px; }
details.info > div {
  position: absolute; z-index: 5; left: 0; top: 1.5rem;
  width: min(24rem, 80vw);
  background: var(--karte); color: var(--schrift);
  border: 1px solid var(--linie); border-radius: var(--rand);
  box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.18);
  padding: .7rem .9rem; font-size: var(--klein); line-height: 1.5;
}

.kalenderblock { padding-top: .8rem; padding-bottom: .8rem; }
.kal-leiste { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.kal-titel { font-family: "Bitter", Georgia, serif; font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.kal-knoepfe { display: flex; gap: .3rem; }
.kal-knoepfe .knopf { padding: .15rem .6rem; font-size: var(--klein); }
.kalenderblock .kalender { min-width: 38rem; }
.kalenderblock .kal-tag { min-height: 2.9rem; padding: .15rem .25rem .2rem; }
.kalenderblock .kal-woche { padding: .2rem .3rem; }

/* --- Kopfzeile: Stand und naechste Termine (03.09.2026) ------------------ */

.kopfstand {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  font-size: var(--klein); color: var(--schrift-leise);
}
.kopf-balken {
  display: inline-block; width: 5.5rem; height: .55rem; border-radius: 999px;
  background: var(--akzent-hell); overflow: hidden; cursor: help; vertical-align: middle;
}
.kopf-balken > span { display: block; height: 100%; background: var(--akzent); border-radius: 999px; }
.kopf-prozent { font-weight: 700; color: var(--schrift); cursor: help; margin-left: -.4rem; font-variant-numeric: tabular-nums; }
.kopf-stunden { font-weight: 400; color: var(--schrift-leise); }
.kopf-naechstes {
  color: var(--schrift-leise); text-decoration: none; white-space: nowrap;
  padding: .1rem .55rem; border: 1px solid var(--linie); border-radius: 999px;
}
.kopf-naechstes:hover { border-color: var(--akzent); color: var(--akzent); }
.kopf-naechstes .wann { font-variant-numeric: tabular-nums; margin-right: .25rem; }

/* Auf- und zuklappbare Bloecke (Material) */
details.klapp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; }
details.klapp > summary::-webkit-details-marker { display: none; }
details.klapp > summary h2 { margin: 0; }
details.klapp > summary::before {
  content: ""; width: .5rem; height: .5rem; border-right: 2px solid var(--schrift-leise);
  border-bottom: 2px solid var(--schrift-leise); transform: rotate(-45deg); transition: transform 120ms;
  flex: none; margin-right: .2rem;
}
details.klapp[open] > summary::before { transform: rotate(45deg); }
details.klapp > summary .speicherstand { margin-left: auto; }
details.klapp > .klapp-inhalt { margin-top: .8rem; }
@media (prefers-reduced-motion: reduce) { details.klapp > summary::before { transition: none; } }

/* Kopfzeile soll eine Zeile bleiben: unterhalb von 64rem verschwindet der
   kleine Balken, die Prozentzahl und die zwei Termine bleiben. */
@media (max-width: 72rem) { .kopf-balken { display: none; } .kopf-prozent { margin-left: 0; } }
.kopf { padding: .6rem 1.25rem; }

/* Ab 72rem Breite bleibt die Kopfzeile eine Zeile (Steffen, 03.09.2026).
   ACHTUNG: rem in Media-Queries meint die Browser-Voreinstellung (16px),
   nicht die 19px am html-Element - 72rem sind 1152px, 88rem sind 1408px. */
@media (min-width: 72rem) {
  .kopf { flex-wrap: nowrap; gap: .8rem; }
  .kopf nav { gap: .9rem; }
  .abmelden button { padding: .25rem .7rem; }
  .schriftwahl button { min-width: 1.9rem; padding: .3rem .45rem; }
  .kopfstand { flex-wrap: nowrap; }
}

/* Einzeilig heisst auch: nichts bricht INNERHALB eines Elements um. Der
   Balken erscheint erst ab 76rem, dazwischen tragen Prozent und Termine. */
.kopf nav a, .kopf-prozent, .abmelden button { white-space: nowrap; }
@media (min-width: 72rem) and (max-width: 88rem) { .kopf-balken { display: none; } .kopf-prozent { margin-left: 0; } }
@media (min-width: 72rem) { .abmelden button { font-size: var(--marke); } .kopfstand { gap: .5rem; } }

/* Zwischen 64 und 76rem: Wochentag aus den Chips (steht im Tooltip),
   Menue in der kleinen Stufe - dann passt auch "Abmelden" noch hinein. */
@media (min-width: 72rem) and (max-width: 88rem) {
  .kopf-naechstes .wann { display: none; }
  .kopf nav a { font-size: var(--klein); }
  .marke { font-size: 1.05rem; }
}

/* Einzeilig ist eine PLATZfrage, und der Platzbedarf haengt nicht nur an der
   Fensterbreite, sondern auch an der gewaehlten Schrift. Gemessen am
   15.09.2026, was die Kopfzeile in einer Zeile wirklich braucht:

       19px -> 1389px     22px -> 1607px     26px -> 1898px

   Das `nowrap` ab 72rem (1152px) rechnet nur mit der Grundgroesse. Bei den
   grossen Stufen schaltete es den Umbruch ab, ohne dass der Platz reicht -
   die Kopfzeile lief dann waagerecht hinaus (1474px Inhalt gegen 1265px
   Fenster, auf JEDER Seite der Plattform, nicht nur der Suche).

   Die Loesung braucht keine zweite Schwellenrechnung: `wrap` bricht nur um,
   WENN der Platz fehlt. Auf einem breiten Monitor bleibt die Kopfzeile also
   auch bei 26px einzeilig, auf einem schmalen wird sie zweizeilig - statt zu
   verschwinden. Wer hier eine feste Breite einsetzt, hat wieder die Falle
   von oben: rem meint in Media-Queries 16px, nicht die eingestellte Groesse. */
html[data-schrift="gross"] .kopf,
html[data-schrift="gross"] .kopfstand,
html[data-schrift="sehr-gross"] .kopf,
html[data-schrift="sehr-gross"] .kopfstand { flex-wrap: wrap; }

/* Gesetzeslinks im Text: erkennbar, aber nicht laut. */
a.norm { color: inherit; text-decoration: underline dotted var(--akzent); text-underline-offset: .15em; }
a.norm:hover { color: var(--akzent); text-decoration-style: solid; }


/* --- Markieren und Randnotizen (Steffen, 06.09.2026) ---------------------
   Am Bildschirm soll gehen, was auf Papier geht: anstreichen und an den Rand
   schreiben. Angefasst wird ein ganzer Absatz; die Werkzeuge liegen links
   daneben und erscheinen, sobald die Maus im Absatz ist oder ein Knopf den
   Fokus hat. */
.lesblock { position: relative; }
.lesblock.markiert > .lesinhalt > * {
  background: var(--marker);
  box-shadow: -.35rem 0 0 var(--marker), .35rem 0 0 var(--marker);
}
/* Wortgenau angestrichene Stellen (Steffen, 06.09.2026). */
.lesinhalt mark.stelle {
  background: var(--marker);
  color: inherit;
  padding: .05em 0;
  cursor: pointer;
}
.lesinhalt mark.stelle.hatnotiz { border-bottom: 2px solid var(--warn); }
.stellenknoepfe {
  position: absolute;
  z-index: 30;
  display: flex;
  gap: .25rem;
  padding: .25rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.stellenknoepfe button {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .6rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--schrift);
  font: inherit;
  font-size: var(--klein);
  cursor: pointer;
}
.stellenknoepfe button:hover { background: var(--akzent-hell); color: var(--akzent); }
.stellenknoepfe svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.lesblock .werkzeuge {
  position: absolute;
  left: -2.9rem;
  top: .15rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  opacity: 0;
  transition: opacity .12s;
}
.lesblock:hover .werkzeuge,
.lesblock:focus-within .werkzeuge { opacity: 1; }
.lesblock .werkzeuge button {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--karte);
  color: var(--schrift-leise);
  cursor: pointer;
}
.lesblock .werkzeuge button:hover { color: var(--akzent); border-color: var(--akzent); }
.lesblock .werkzeuge button[aria-pressed="true"] {
  background: var(--marker);
  border-color: var(--marker-rand);
  color: var(--schrift);
}
.lesblock .werkzeuge svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.randnotiz {
  margin: .5rem 0 1rem;
  padding: .6rem .9rem;
  border-left: 4px solid var(--warn);
  background: var(--warn-hell);
  border-radius: 0 8px 8px 0;
}
.randnotiz > :last-child { margin-bottom: 0; }
.randmarke {
  display: block;
  font-size: var(--marke);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--warn);
  margin-bottom: .25rem;
}
.notizfeld { margin: .5rem 0 1rem; }
.notizfeld textarea {
  width: 100%;
  min-height: 5rem;
  padding: .6rem .8rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--karte);
  color: var(--schrift);
  font: inherit;
}
.notizfeld .zeile {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: .35rem;
  font-size: var(--klein);
  color: var(--schrift-leise);
}
.eigenes {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: var(--klein);
  color: var(--schrift-leise);
}
.stellenliste { list-style: none; padding: 0; margin: 0; }
.stellenliste li {
  padding: .7rem 0;
  border-top: 1px solid var(--linie);
}
.stellenliste .stelle { color: var(--schrift); }
.stellenliste .stelle.angestrichen { background: var(--marker); }

/* Auf schmalen Fenstern ist links kein Platz: Werkzeuge nach oben rechts. */
@media (max-width: 62rem) {
  .lesblock .werkzeuge {
    left: auto;
    right: 0;
    top: -.4rem;
    flex-direction: row;
    opacity: 1;
    background: var(--grund);
  }
}

/* Gedruckt wird der Lesestoff, nicht die Bedienung. */
@media print {
  .lesblock .werkzeuge, .notizfeld, .stellenknoepfe { display: none; }
  .lesblock.markiert > .lesinhalt > *, .lesinhalt mark.stelle { background: var(--marker); }
}

/* --- Glossar (Steffen, 11.09.2026) ---------------------------------------
   Begriffe im Stofftext werden fein punktiert unterstrichen - schwaecher als
   eine Gesetzesfundstelle (a.norm), weil die Norm im Open-Book-Lernen mehr
   wiegt als die Worterklaerung. Markiert wird ohnehin nur das erste Vorkommen. */
a.begriff {
  color: inherit;
  text-decoration: underline dotted var(--schrift-leise);
  text-underline-offset: .18em;
}
a.begriff:hover { color: var(--akzent); text-decoration-color: var(--akzent); }

.begriffsuche {
  width: 100%;
  padding: .55rem .8rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--schrift);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  margin-bottom: 1.1rem;
}
.begriffsuche:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); }

.begriffsletter {
  font-size: var(--marke);
  letter-spacing: .12em;
  color: var(--schrift-leise);
  border-bottom: 1px solid var(--linie);
  padding-bottom: .2rem;
  margin: 1.4rem 0 .7rem;
}
.begriffsgruppe:first-of-type .begriffsletter { margin-top: 0; }

.begriffseintrag { padding: .55rem 0 .75rem; border-bottom: 1px solid var(--linie); }
.begriffseintrag:last-child { border-bottom: none; }
.begriffseintrag h3 {
  margin: 0 0 .25rem;
  font-size: 1.04rem;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}
.begriffstext { margin: 0; }
.begriffstext p { margin: 0 0 .3rem; }
.begriffstext p:last-child { margin-bottom: 0; }
.begriffsfuss {
  margin: .35rem 0 0;
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  align-items: baseline;
}
.begriffsnorm { font-size: var(--klein); }

/* Kommt man ueber einen Begriffslink aus dem Stofftext, soll der Treffer
   sofort ins Auge fallen - sonst sucht man auf einer langen Liste. */
.begriffseintrag.angesteuert {
  background: var(--akzent-hell);
  border-radius: var(--rand);
  padding-left: .7rem;
  padding-right: .7rem;
  margin-left: -.7rem;
  margin-right: -.7rem;
}

/* Begriffe selbst anlegen und aendern (Steffen, 11.09.2026). Der Aendern-Link
   steht am Eintrag, bleibt aber leise - gelesen wird hier, nicht gepflegt. */
.glossarkopf { margin-bottom: .8rem; }
.begriffaendern {
  margin-left: auto;
  font-size: var(--klein);
  font-weight: 400;
  color: var(--schrift-leise);
  text-decoration: none;
}
.begriffaendern:hover { color: var(--akzent); text-decoration: underline; }
.begriffseintrag .modulmarke + .begriffaendern { margin-left: auto; }

/* Vorgemerkter Begriff ohne Erklaerung (11.09.2026). Sichtbar, aber ohne
   Alarm - es ist eine Merkzettel-Zeile, kein Fehler. */
.begriffoffen {
  margin: 0;
  font-style: italic;
  color: var(--warn);
  font-size: var(--klein);
}

/* Sprungleiste ueber dem Glossar (Steffen, 11.09.2026). Das volle Alphabet
   steht immer da; belegte Buchstaben sind Links, leere bleiben grau an ihrem
   Platz - eine Leiste, die die Plaetze wechselt, kann man nicht treffen.
   Seit 14.09.2026 bleibt sie beim Blaettern oben stehen; sonst muss man zum
   Buchstabenwechsel erst wieder ganz nach oben. Der Streifen greift in die
   Seitenraender von main hinein, damit daneben keine Zeile durchlaeuft. */
.alphabet {
  display: flex;
  flex-wrap: wrap;
  gap: .12rem;
  margin-bottom: .9rem;
  position: sticky;
  /* Unter dem Kopf, nicht am Fensterrand - sonst verschwindet sie
     dahinter, seit die Menueleiste selbst klebt (17.09.2026). */
  top: var(--kopf, 0px);
  z-index: 4;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  padding: .45rem 1.25rem;
}
.alphabet a,
.alphabet span {
  min-width: 1.5rem;
  padding: .18rem .1rem;
  text-align: center;
  font-size: var(--klein);
  font-weight: 600;
  border-radius: 5px;
  text-decoration: none;
}
.alphabet a { color: var(--akzent); background: var(--akzent-hell); }
.alphabet a:hover { background: var(--akzent); color: var(--karte); }
.alphabet span,
.alphabet .taub {
  color: var(--linie);
  background: transparent;
  font-weight: 400;
  pointer-events: none;
}

/* Sprungziel nicht unter die Buchstabenleiste schieben. Beide Hoehen haengen
   an der Schriftgroesse und daran, ob sie umbrechen - deshalb misst das
   Skript sie und legt sie als --leiste bzw. --kopf ab; die Ersatzwerte
   gelten nur bis dahin. Seit 17.09.2026 klebt auch die Menueleiste, also
   zaehlt sie mit.

   ⚠️ REIHENFOLGE: Die allgemeine :target-Regel steht ZUERST. Sie hat
   dieselbe Spezifitaet wie .begriffsgruppe (beides 0-1-0), also gewinnt die
   spaetere - stand sie unten, zog sie die Glossarsprünge wieder unter die
   Buchstabenleiste. Beim Messen am 17.09.2026 aufgefallen: Ziel landete auf
   72px, die Leiste reichte bis 116px. */
:target { scroll-margin-top: calc(var(--kopf, 0px) + .5rem); }

.begriffsgruppe,
.begriffseintrag,
.begriffsgruppe:target,
.begriffseintrag:target {
  scroll-margin-top: calc(var(--kopf, 0px) + var(--leiste, 3.2rem) + .5rem);
}


/* --- Suche (seit 15.09.2026, an der Stelle des Assistenten-Chats) ---------
   Keine Groessen in px: die Seite wird ueber die drei "A" im Kopf auf 22 oder
   26 px umgeschaltet, und was in px steht, waechst dabei nicht mit. */

.suchkopf {
  display: flex;
  gap: .6rem;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}

.suchkopf input[type=search] {
  flex: 1 1 22rem;
  min-width: 0;
  padding: .7rem .9rem;
  font: inherit;
  color: var(--schrift);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
}

.suchkopf input[type=search]:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}

/* Modulwahl (27.09.2026): sieht aus wie das Suchfeld daneben. Die
   allgemeine Formularregel gibt jedem select 100 % Breite - hier nicht. */
.suchkopf select {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  padding: .7rem .6rem;
  font: inherit;
  color: var(--schrift);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
}
.suchkopf select:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}

.suchhinweis {
  color: var(--schrift-leise);
  font-size: var(--klein);
  margin: .2rem 0 1rem;
}

/* Der eingefuegte Screenshot (15.09.2026). Er bleibt sichtbar liegen, bis er
   weggenommen wird - sonst schickt man ihn bei der naechsten Frage
   unbemerkt noch einmal mit, und das kostet jedes Mal. */
.bildkasten {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .8rem;
  padding: .5rem .7rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
}

/* Ohne das bleibt der Kasten sichtbar: display:flex schlaegt die
   Browservorgabe fuer [hidden]. */
.bildkasten[hidden] { display: none; }

.bildkasten img {
  max-height: 4.5rem;
  max-width: 12rem;
  border: 1px solid var(--linie);
  border-radius: calc(var(--rand) / 2);
}

.bildkasten .bildwort {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--schrift-leise);
  font-size: var(--klein);
}

.treffergruppe { padding-top: .8rem; }

.treffergruppenkopf {
  font-size: var(--klein);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--schrift-leise);
  margin: 0 0 .7rem;
}

.treffergruppenkopf .anzahl {
  background: var(--akzent-hell);
  color: var(--akzent);
  border-radius: 1em;
  padding: .05em .55em;
  margin-left: .35em;
  letter-spacing: 0;
}

.treffer {
  padding: .55rem 0;
  border-top: 1px solid var(--linie);
}

.treffer:first-of-type { border-top: 0; }
.treffer h3 { margin: 0 0 .15rem; font-size: 1rem; }
.treffer h3 a { color: var(--akzent); text-decoration: none; }
.treffer h3 a:hover { text-decoration: underline; }

.trefferweg {
  margin: 0;
  font-size: var(--marke);
  color: var(--schrift-leise);
}

.trefferauszug {
  margin: .25rem 0 0;
  font-size: var(--klein);
  line-height: 1.5;
}

.trefferauszug mark {
  background: var(--marker);
  color: var(--schrift);
  border-bottom: 1px solid var(--marker-rand);
  padding: 0 .1em;
}

/* Der Paragrafensprung: der Wortlaut steht ueber allem anderen. */
.normkasten { border-left: 3px solid var(--akzent); }
.normkopf { margin: 0 0 .2rem; font-size: 1.15rem; }

.normabschnitt {
  margin: 0 0 .7rem;
  font-size: var(--marke);
  color: var(--schrift-leise);
}

.normtext { line-height: 1.55; }
.normtext p { margin: 0 0 .5rem; }

.antwortkasten { border-left: 3px solid var(--warn); }
.antworttext { line-height: 1.6; }
.antworttext > :first-child { margin-top: 0; }

.antwortfuss {
  margin: .9rem 0 0;
  font-size: var(--marke);
  color: var(--schrift-leise);
}

.suchmarke {
  display: inline-block;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 1em;
  padding: .05em .6em;
  margin: 0 .3em .3em 0;
}

.stellen { margin-top: .6rem; font-size: var(--klein); }
.stellen summary { cursor: pointer; color: var(--schrift-leise); }
.stellen ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.stellen li { margin-bottom: .25rem; }
.stellen .trefferweg { display: block; }

/* Nachschlagen (Spec 26.09.2026): was gerade aufgeschlagen wird, und der
   Vermerk an Normen, die das Modell nicht selbst gelesen hat. */
.schritte {
  margin: .5rem 0 0;
  padding-left: 1.4rem;
  font-size: var(--klein);
  color: var(--schrift-leise);
}
.schritte li { margin-bottom: .15rem; }
.schritte li:last-child { color: var(--schrift); }

.nichtgelesen {
  display: inline-block;
  font-size: var(--marke);
  color: var(--warn);
  background: var(--warn-hell);
  border: 1px solid var(--warn);
  border-radius: 1em;
  padding: 0 .5em;
  white-space: nowrap;
}
.nichtgelesen::before { content: "⚠ "; }

/* Die Materialzeile bricht nur um, wenn sie die Lesbar-Zeile traegt; die
   steht dann ganz unten, unter Titel und "Entfernen". */
.fallzeile:has(.lesbarzeile) { flex-wrap: wrap; }

/* Modulzeile und Verlauf der Suche (Spec 27.09.2026). */
.modulzeile {
  margin: 0 0 .6rem;
  font-size: var(--marke);
  color: var(--schrift-leise);
}
.verlaufsfrage {
  margin-bottom: .9rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--linie);
}
.verlaufsbild {
  display: block;
  max-width: 100%;
  height: auto;
  margin: .3rem 0 .6rem;
  border: 1px solid var(--linie);
  border-radius: var(--rand);
}
.verlaufstext { margin: 0 0 .6rem; }
.verlaufszeilen { list-style: none; margin: .4rem 0 0; padding: 0; }
.verlaufszeilen li {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-top: 1px solid var(--linie);
}
.verlaufszeilen li:first-child { border-top: 0; }
.verlaufszeilen a {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .45rem 0;
  color: var(--schrift);
  text-decoration: none;
}
.verlaufszeilen a:hover .verlaufsfragetext { color: var(--akzent); }
.verlaufsdatum, .verlaufsmodul {
  font-size: var(--klein);
  color: var(--schrift-leise);
  white-space: nowrap;
}
.verlaufsfragetext {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.verlaufweg { padding: .2rem .6rem; }
.lesbarzeile {
  flex-basis: 100%;
  order: 10;
  font-size: var(--marke);
  color: var(--schrift-leise);
}
.fehltmarke { color: var(--warn); }

/* ---- Griffregister (15.09.2026) --------------------------------------
   Eine Nachschlagetabelle, keine Lesetabelle: die Norm steht vorn und
   fuehrt in die Suche, die amtliche Ueberschrift daneben, das eigene
   Stichwort leise dahinter. Gruen hinterlegt sind die Normen, die die
   Vor-Pruefungsleistung tatsaechlich gebraucht hat. */

.griffhinweise {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0 1.4rem;
}
@media (max-width: 46rem) {
  .griffhinweise { grid-template-columns: 1fr; }
}

.griffkasten {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: 4px;
  padding: 0.8rem 1rem;
  font-size: var(--klein);
}
.griffkasten.achtung { border-left-color: var(--warn); background: var(--warn-hell); }
.griffkasten.breit { margin-bottom: 1.4rem; }
.griffkasten h3 {
  font-size: var(--marke);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--schrift-leise);
  margin: 0 0 0.5rem;
}
.griffkasten ol, .griffkasten ul { margin: 0; padding-left: 1.2rem; }
.griffkasten li { margin-bottom: 0.25rem; }
.griffkasten p { margin: 0 0 0.5rem; }
.griffkasten p:last-child, .griffkasten li:last-child { margin-bottom: 0; }

h3.griffgruppe {
  margin: 1.5rem 0 0.4rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--linie);
}

table.griffregister { width: 100%; border-collapse: collapse; }
table.griffregister th {
  text-align: left;
  font-size: var(--marke);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--schrift-leise);
  font-weight: 600;
  padding: 0 0.5rem 0.3rem;
  border-bottom: 1px solid var(--linie);
}
table.griffregister td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
table.griffregister tr:last-child td { border-bottom: none; }
td.griffnorm { white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; }
td.griffnorm a { font-weight: 600; text-decoration: none; }
td.griffnorm a:hover { text-decoration: underline; }
td.griffstichwort { color: var(--schrift-leise); }
table.griffregister tr.gebraucht td.griffnorm { background: var(--gut-hell); border-radius: 3px; }
table.griffregister tr.gebraucht td.griffnorm a { color: var(--gut); }

.griffdoppelt {
  display: inline-block;
  font-size: var(--marke);
  font-weight: 600;
  color: var(--warn);
  background: var(--warn-hell);
  border: 1px solid var(--warn);
  border-radius: 3px;
  padding: 0 0.25rem;
  margin-left: 0.3rem;
}
.griffmarke {
  display: inline-block;
  font-weight: 600;
  color: var(--gut);
  background: var(--gut-hell);
  border-radius: 3px;
  padding: 0 0.3rem;
}

@media print {
  .griffhinweise { grid-template-columns: 1fr 1fr; }
  .griffkasten { background: #fff; }
  table.griffregister tr { break-inside: avoid; }
}

/* Modulwahl ueber dem Griffregister - erst ab dem zweiten Register sichtbar. */
nav.griffmodule { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0.9rem; }
nav.griffmodule a {
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  text-decoration: none;
  font-size: var(--klein);
  color: var(--schrift-leise);
}
nav.griffmodule a.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }

/* Sprungmarke fuer Querverweise zwischen Glossareintraegen (15.09.2026).
   Sitzt etwas ueber dem Eintrag, damit die Ueberschrift beim Sprung nicht
   unter dem Seitenkopf verschwindet. */
.sprungmarke { display: block; position: relative; top: -5rem; visibility: hidden; }

/* Kosten (Spec 30.09.2026): nur Steffens Konto */
table.kosten td, table.kosten th { vertical-align: middle; }
table.kosten .zahl, .kostensummen .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.kosten tr.bezahlt td { color: var(--schrift-leise); }
table.kosten td.stand { white-space: nowrap; }
table.kosten form.inline, .kostensummen form.inline { display: inline; margin: 0 0 0 .4rem; }
table.kosten .knopf { padding: .15rem .6rem; font-size: var(--klein); }
.offenmarke { color: var(--warn); font-weight: 600; }
.hinweiszeichen { color: var(--schrift-leise); cursor: help; }
button.linkknopf { background: none; border: 0; padding: 0; font: inherit; font-size: var(--klein);
  color: var(--akzent); text-decoration: underline; cursor: pointer; }
.kostensummen table { width: auto; }
.kostensummen th { font-weight: normal; padding-right: 2rem; }
.kostensummen tr.endpreis th, .kostensummen tr.endpreis td { font-weight: 700; border-bottom: none; }
@media (max-width: 700px) {
  table.kosten { font-size: var(--klein); }
  table.kosten td.stand { white-space: normal; }
}