/* Professorglasmachers – Grundlayout (angelehnt an Twenty Sixteen, ohne externe Schriften) */
:root {
  --text: #1a1a1a;
  --text-leise: #686868;
  --linie: #d1d1d1;
  --flaeche: #ffffff;
  --hintergrund: #f2f2f2;
  --akzent: #007acc;
  --akzent-dunkel: #005a96;
  --markiert: #e6f2fa;
  --schrift-text: Merriweather, Georgia, "Times New Roman", serif;
  --schrift-ui: Montserrat, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --leiste: 18rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.75;
}
a { color: var(--akzent); }
a:hover, a:focus { color: var(--akzent-dunkel); }
img { max-width: 100%; height: auto; }

.seite {
  max-width: 82rem;
  margin: 0 auto;
  background: var(--flaeche);
  min-height: 100vh;
}

/* ---------- Kopf ---------- */
.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1rem, 4vw, 3rem) 1rem;
}
.kopf .titel { margin: 0; font-family: var(--schrift-ui); font-weight: 700; font-size: 1.4rem; line-height: 1.3; }
.kopf .titel a { color: var(--text); text-decoration: none; }
.kopf .untertitel { margin: .2rem 0 0; color: var(--text-leise); font-family: var(--schrift-ui); font-size: .85rem; }
.menue-knopf {
  display: none;
  font-family: var(--schrift-ui);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: none;
  border: 1px solid var(--linie);
  border-radius: 2px;
  padding: .5rem .9rem;
  cursor: pointer;
  color: var(--text);
}

/* ---------- Hauptmenü (oben, Desktop) ---------- */
.hauptmenue {
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: 0 clamp(1rem, 4vw, 3rem);
  font-family: var(--schrift-ui);
  font-size: .85rem;
}
.hauptmenue > ul {
  display: flex;
  flex-wrap: wrap;           /* lieber umbrechen als aus dem Bild schieben */
  list-style: none;
  margin: 0;
  padding: 0;
}
.hauptmenue li.haupt { position: relative; display: flex; align-items: center; }
.hauptmenue li.haupt > a {
  display: block;
  padding: .8rem .75rem;
  color: var(--text);
  text-decoration: none;
}
.hauptmenue li.haupt > a:hover,
.hauptmenue li.haupt.pfad > a { color: var(--akzent); }
.hauptmenue li.haupt.pfad > a { box-shadow: inset 0 -3px 0 var(--akzent); }
.hauptmenue .panel-knopf {
  border: 0; background: none; cursor: pointer; padding: .8rem .4rem .8rem 0; color: var(--text-leise);
}
.hauptmenue .panel-knopf::after { content: "▾"; }

/* Aufklapp-Panel: immer innerhalb des Fensters, bei Bedarf mit eigener Bildlaufleiste */
.hauptmenue .panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  width: min(26rem, calc(100vw - 2rem));
  max-height: calc(100vh - 10rem);
  overflow-y: auto;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: .5rem 0;
}
.hauptmenue li.haupt.auf > .panel { display: block; }

/* ---------- Baum (Panel, Seitenleiste, Schublade) ---------- */
.baum, .baum ul { list-style: none; margin: 0; padding: 0; }
.baum ul { display: none; }
.baum li.offen > ul { display: block; }
.baum .zeile { display: flex; align-items: stretch; }
.baum .zeile a {
  flex: 1;
  display: block;
  padding: .35rem .75rem;
  color: var(--text);
  text-decoration: none;
  font-family: var(--schrift-ui);
  font-size: .85rem;
  line-height: 1.4;
  border-left: 3px solid transparent;
}
.baum .zeile a:hover { background: var(--hintergrund); color: var(--akzent); }
.baum li.aktuell > .zeile a { background: var(--markiert); border-left-color: var(--akzent); font-weight: 700; }
.baum li.pfad > .zeile a { color: var(--akzent-dunkel); }
.baum ul .zeile a { padding-left: 1.6rem; }
.baum ul ul .zeile a { padding-left: 2.5rem; }
.baum ul ul ul .zeile a { padding-left: 3.4rem; }
.baum .klapp {
  flex: 0 0 2.2rem;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--text-leise);
}
.baum .klapp::after { content: "▸"; display: inline-block; transition: transform .15s; }
.baum li.offen > .zeile .klapp::after { transform: rotate(90deg); }
.baum .klapp:hover { background: var(--hintergrund); color: var(--akzent); }
/* Arbeitsstand: noch nicht übertragene Seiten */
.baum li.ausstehend > .zeile a { color: #9a9a9a; }

/* ---------- Inhalt mit Seitenleiste ---------- */
.rumpf {
  display: grid;
  grid-template-columns: var(--leiste) minmax(0, 1fr);
  gap: 0 2.5rem;
  padding: 1.5rem clamp(1rem, 4vw, 3rem) 3rem;
}
.rumpf.ohne-leiste { grid-template-columns: minmax(0, 1fr); }
.seitenleiste {
  position: sticky;
  top: 1rem;
  align-self: start;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  border-right: 1px solid var(--linie);
  padding-right: .5rem;
}
.seitenleiste .kurs-titel {
  display: block;
  font-family: var(--schrift-ui);
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
  text-decoration: none;
  padding: .3rem .75rem .6rem;
}
.inhalt { max-width: 46rem; }
.brotkrumen { font-family: var(--schrift-ui); font-size: .78rem; color: var(--text-leise); margin-bottom: .5rem; }
.brotkrumen a { color: var(--text-leise); }
.inhalt h1 { font-family: var(--schrift-ui); font-size: 2rem; line-height: 1.25; margin: 0 0 1.5rem; }
.inhalt h2, .inhalt h3, .inhalt h4 { font-family: var(--schrift-ui); line-height: 1.3; margin: 2rem 0 .75rem; }
.inhalt h4 { font-size: 1.1rem; }
.inhalt p { margin: 0 0 1.5rem; }
.inhalt ul.liste { margin: 0 0 1.5rem; padding-left: 1.3rem; }
.inhalt ul.liste li { margin-bottom: .4rem; }
.inhalt figure { margin: 1.5rem 0; text-align: center; }
.inhalt .formel { margin: 1rem 0 1.5rem; overflow-x: auto; overflow-y: hidden; }
.inhalt .katex-display { margin: .5rem 0; }
.inhalt .aufgabe { font-weight: 700; }
.inhalt .hinweis-ausstehend { background: #fff8e1; border-left: 4px solid #f0b400; padding: 1rem 1.25rem; }

table.daten { border-collapse: collapse; margin: 1rem auto 1.5rem; font-family: var(--schrift-ui); font-size: .9rem; }
table.daten th, table.daten td { border: 1px solid #fff; padding: .35rem 1.2rem; }
table.daten th { background: #4f81bd; color: #fff; text-align: left; }
table.daten td { background: #dbe3f0; }
table.daten td.zahl { text-align: center; }
/* Tabelle physikalischer Größen (Größe, Formelzeichen, Einheit) */
table.groessen { border-collapse: collapse; margin: 1rem auto 1.5rem; font-family: var(--schrift-ui); font-size: .9rem; }
table.groessen th, table.groessen td { border: 1px solid #1a1a1a; padding: .4rem 1rem; }
table.groessen th { background: #f2f2f2; font-weight: 400; text-align: left; }
table.groessen td { background: #dcdcdc; text-align: center; }
table.groessen td:first-child { text-align: left; }
table.groessen figure { margin: 0; }
table.groessen img { max-height: 3rem; mix-blend-mode: multiply; }
.tabelle-rahmen { overflow-x: auto; }
.inhalt hr.formel-trenner { width: min(24rem, 80%); border: 0; border-top: 1px solid var(--text); margin: -.5rem auto .5rem; }
/* Rot umrandeter Kasten für Formelsammlungen (Zusammenfassungen) */
.inhalt .formel.kasten { width: fit-content; max-width: 100%; margin: 1rem auto 1.5rem; padding: .5rem 2rem; border: 3px solid #c00000; }
.inhalt .video { margin: 1.5rem 0; }
.inhalt .video video { width: 100%; max-width: 40rem; display: block; margin: 0 auto; }
figure figcaption { font-family: var(--schrift-ui); font-size: .8rem; color: var(--text-leise); }
/* Startseite: drei Bild-Knoepfe nebeneinander, auf schmalen Bildschirmen untereinander */
.inhalt .startknoepfe { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1.5rem 0; }
.inhalt .startknoepfe a { flex: 1 1 10rem; max-width: 14rem; }
.inhalt .startknoepfe img { width: 100%; height: auto; display: block; }

.blaettern {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  font-family: var(--schrift-ui);
  font-size: .85rem;
}
.blaettern a { text-decoration: none; }
.blaettern + .blaettern { margin-top: 1rem; }
.blaettern .kursname { align-self: center; color: var(--text-leise); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.blaettern .weiter { margin-left: auto; text-align: right; }
.blaettern small { display: block; color: var(--text-leise); text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; }

/* ---------- Fuß ---------- */
.fuss {
  border-top: 1px solid var(--linie);
  padding: 1.5rem clamp(1rem, 4vw, 3rem);
  font-family: var(--schrift-ui);
  font-size: .8rem;
  color: var(--text-leise);
}
.fuss ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 .5rem; padding: 0; }
.fuss a { color: var(--text-leise); }

/* Rechenwege je Studiengang: rot = komplexe Rechnung (ETR), blau = Reaktanzen (BMT/UFC) */
.inhalt .rechenweg { border: 1px solid; border-left-width: 4px; padding: .25rem 1.25rem .5rem; margin: 1.5rem 0; }
.inhalt .rechenweg::before { display: block; font-family: var(--schrift-ui); font-size: .75rem; font-weight: 700; margin-top: .5rem; }
.inhalt .rechenweg h4 { margin-top: .5rem; }
.inhalt .rechenweg img { mix-blend-mode: multiply; }
.inhalt .rechenweg.etr { border-color: #c00000; background: #fff6f6; }
.inhalt .rechenweg.etr::before { content: "Komplexe Rechnung (ETR)"; color: #c00000; }
.inhalt .rechenweg.etr h4 { color: #c00000; }
.inhalt .rechenweg.bmt { border-color: #1f5fbf; background: #f4f8ff; }
.inhalt .rechenweg.bmt::before { content: "Rechnung mit Reaktanzen (BMT und UFC)"; color: #1f5fbf; }
.inhalt .rechenweg.bmt h4 { color: #1f5fbf; }

/* ---------- Felder der Seitenleiste: Übungsaufgaben, Interaktive Lerninhalte, ... (mobil unter dem Inhalt) ---------- */
.feld-liste { border-top: 1px solid var(--linie); margin-top: 1rem; padding: .75rem 0 .5rem; font-family: var(--schrift-ui); }
.feld-liste h2, .feld-mobil h2 { font-size: .9rem; font-weight: 700; margin: 0 .75rem .5rem; }
.feld-liste ul { list-style: none; margin: 0; padding: 0; }
.feld-liste li { padding: .35rem .75rem; border-left: 3px solid transparent; }
.feld-liste li.aktuell { border-left-color: var(--akzent); background: var(--hintergrund); }
.feld-liste .kapitel { display: block; font-size: .75rem; color: var(--text-leise); }
.feld-liste a, .feld-mobil a { display: block; font-size: .85rem; color: var(--akzent); text-decoration: none; padding: .15rem 0 .15rem 1.4rem; position: relative; }
.feld-liste a::before, .feld-mobil a::before { content: "\2193"; position: absolute; left: .2rem; font-weight: 700; }
.feld-liste a:hover, .feld-mobil a:hover { text-decoration: underline; }
.feld-liste small, .feld-mobil small { display: block; font-size: .7rem; color: var(--text-leise); }
.feld-mobil { display: none; font-family: var(--schrift-ui); border: 1px solid var(--linie); border-left: 3px solid var(--akzent); padding: .75rem 1rem; margin: 2rem 0 1rem; }
.feld-mobil h2 { margin: 0 0 .5rem; }
/* Symbol je Feld: Download-Pfeil für Übungen, Spiel-Dreieck für interaktive Inhalte */
[data-feld="interaktiv"] a::before { content: "\25B6"; font-size: .7rem; top: .3rem; }
[data-feld="simulationen"] a::before { content: "\223F"; font-size: .9rem; top: .1rem; }
[data-feld="praktikum"] a[href*="lerninhalt-"]::before { content: "\25B6"; font-size: .7rem; top: .3rem; }
.feld-liste a[aria-current="page"] { font-weight: 700; }
.feld-praktikum.praktikum-anderer-kurs { display: none; }
.feld-praktikum li + li { margin-top: .5rem; }
.feld-mobil .kapitel { display: block; font-size: .75rem; color: var(--text-leise); margin-top: .5rem; }
.feld-mobil[hidden], .feld[hidden], .blaettern[hidden] { display: none !important; }
/* Auswahl der Felder über der Seitenleiste */
.feldwahl { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; font-family: var(--schrift-ui); font-size: .75rem; color: var(--text-leise); padding: .25rem .75rem .6rem; margin-bottom: .5rem; border-bottom: 1px solid var(--linie); }
.feldwahl label { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; color: var(--text); white-space: nowrap; }
.feldwahl input { margin: 0; accent-color: var(--akzent); }
.seitenleiste > .feld-liste:first-of-type { margin-top: 0; }
/* Interaktive Lernbücher (H5P) */
.inhalt .h5p-rahmen { margin: 1rem 0 2rem; min-height: 20rem; }
.inhalt .h5p-rahmen iframe { width: 100%; border: 0; }
.inhalt .h5p-hinweis { background: #fff8e1; border-left: 4px solid #f0b400; padding: 1rem 1.25rem; font-family: var(--schrift-ui); font-size: .9rem; }

/* ---------- Schublade (Mobil) ---------- */
.schublade { display: none; }

@media (max-width: 62rem) {
  .menue-knopf { display: inline-block; }
  .hauptmenue, .seitenleiste { display: none; }
  .feld-mobil { display: block; }
  .rumpf, .rumpf.ohne-leiste { grid-template-columns: minmax(0, 1fr); }
  body.schublade-offen .schublade {
    display: block;
    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
    padding: .5rem 0;
  }
  .baum .zeile a { padding-top: .6rem; padding-bottom: .6rem; font-size: .95rem; }
  .inhalt h1 { font-size: 1.6rem; }
}
.inhalt:has(.h5p-rahmen) { max-width: 64rem; }

/* Runder Knopf "Simulation" unter einer vorgerechneten Aufgabe (oeffnet den Schaltungssimulator) */
.inhalt .sim-zeile { text-align: center; margin: 0.5rem 0 1.5rem; }
.inhalt .sim-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 6.5rem; height: 6.5rem; border-radius: 50%;
  background: var(--akzent); color: #fff; text-decoration: none;
  font-family: var(--schrift-ui); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); transition: background 0.15s, transform 0.15s;
}
.inhalt .sim-knopf::before { content: "\25B6"; margin-right: 0.3em; font-size: 0.75em; }
.inhalt .sim-knopf:hover, .inhalt .sim-knopf:focus { background: var(--akzent-dunkel); color: #fff; transform: scale(1.05); }
@media print { .inhalt .sim-zeile { display: none; } }

/* Eingebettete Simulatoren (Seiten unter "Simulatoren") */
.inhalt .simulator-rahmen { margin: 1rem 0; border: 1px solid var(--linie); border-radius: 6px; overflow-x: auto; }
.inhalt .simulator-rahmen iframe { display: block; width: 100%; min-width: 1060px; border: 0; }
.inhalt:has(.simulator-rahmen) { max-width: 72rem; }

/* Formeln in derselben Schriftgröße wie der Fließtext (KaTeX setzt sonst 1.21em) */
.inhalt .katex { font-size: 1em; }

/* ---------- Interaktive Lernbücher (H5P) als Folien, assets/h5p-buch.js ---------- */
/* Schrift der H5P Course Presentation (Droid Sans, Apache-Lizenz) */
@font-face { font-family: "H5PDroidSans"; src: url(schriften/DroidSans.ttf) format("truetype"); font-weight: normal; }
@font-face { font-family: "H5PDroidSans"; src: url(schriften/DroidSans-Bold.ttf) format("truetype"); font-weight: bold; }
.inhalt:has(.h5pbuch) { max-width: 60rem; }
.hb { --hb-blau: #1a73d9; --hb-blau-dunkel: #1356a3; --hb-gut: #1f8a3c; --hb-gut-flaeche: #e2f5e7; --hb-schlecht: #c2271a; --hb-schlecht-flaeche: #fbe5e2;
  position: relative; margin: 0 0 2rem; border: 1px solid #d0d0d0; border-radius: 6px; background: #f5f5f5; font-family: "Open Sans", "Segoe UI", Arial, sans-serif; color: #1a1a1a; outline: none; }
.hb:fullscreen { display: flex; flex-direction: column; justify-content: center; background: #000; border: 0; border-radius: 0; }
.hb:fullscreen .hb-buehne { width: min(100vw, calc((100vh - 6.5rem) * 16 / 9)); margin: 0 auto; }
.hb-kopf { display: flex; align-items: center; gap: .75rem; padding: .45rem .6rem; background: #fff; border-bottom: 1px solid #ddd; border-radius: 6px 6px 0 0; }
.hb-menueknopf, .hb-vollbild { font: inherit; font-size: .85rem; background: #fff; border: 1px solid #cfcfcf; border-radius: 4px; padding: .3rem .6rem; cursor: pointer; color: #333; }
.hb-menueknopf:hover, .hb-vollbild:hover { border-color: var(--hb-blau); color: var(--hb-blau); }
.hb-kapiteltitel { flex: 1; font-weight: 600; font-size: .95rem; text-align: center; }
.hb-kapitelzaehler { flex: none; font-weight: 700; font-size: .9rem; color: var(--hb-blau); min-width: 3rem; text-align: right; }
.hb-menue { position: absolute; z-index: 20; top: 2.6rem; left: .6rem; min-width: 18rem; max-width: calc(100% - 1.2rem); background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.hb-menue ol { list-style: none; margin: 0; padding: .3rem 0; }
.hb-menue li a { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .9rem; color: #1a1a1a; text-decoration: none; font-size: .9rem; }
.hb-menue li a:hover { background: #eef4fc; }
.hb-menue li.aktuell a { font-weight: 700; color: var(--hb-blau); }
.hb-menue small { color: #666; font-weight: 400; }
.hb-buehne { position: relative; background: #fff; container-type: inline-size; }
.hb-fuss { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; background: #fff; border-top: 1px solid #ddd; border-radius: 0 0 6px 6px; }
.hb-pfeil { flex: none; width: 2.6rem; height: 2.2rem; font-size: 1.8rem; line-height: 1; border: 0; border-radius: 4px; background: transparent; color: #444; cursor: pointer; }
.hb-pfeil:hover:not(:disabled) { background: #eef4fc; color: var(--hb-blau); }
.hb-pfeil:disabled { color: #ccc; cursor: default; }
.hb-leiste { flex: 1; display: flex; gap: 3px; align-items: center; }
.hb-punkt { flex: 1; height: .55rem; min-width: 4px; border: 0; padding: 0; border-radius: 2px; background: #dcdcdc; cursor: pointer; position: relative; }
.hb-punkt.aufgabe::after { content: ""; position: absolute; left: 50%; top: -.55rem; width: .4rem; height: .4rem; margin-left: -.2rem; border-radius: 50%; background: #999; }
.hb-punkt.aufgabe.voll::after { background: var(--hb-gut); }
.hb-punkt.aufgabe.teil::after { background: #e59400; }
.hb-punkt.ende { background: #b9c9e6; }
.hb-punkt.aktuell { background: var(--hb-blau); }
.hb-zaehler { flex: none; font-size: .85rem; color: #555; min-width: 4.2rem; text-align: center; }

/* Folie: 16:9, Schriftgröße 16px bei 640px Breite (wie H5P Course Presentation) */
.hb-folie { position: relative; width: 100%; aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; background: #f5f5f5; font-size: 2.5cqw; line-height: 1.25; text-align: left; font-family: H5PDroidSans, sans-serif; color: #323232; }
.hb-el { position: absolute; box-sizing: border-box; font-size: .75em; overflow: hidden; overflow-y: auto; z-index: 1; }
.hb-el-form { overflow: visible; z-index: 0; }
.hb-unsichtbar { opacity: 0; pointer-events: none; }
.hb-form { position: absolute; inset: 0; box-sizing: border-box; }
.hb-form-circle { border-radius: 50%; }
.hb-form-horizontal-line { inset: 50% 0 auto 0; height: 0; }
.hb-form-vertical-line { inset: 0 auto 0 50%; width: 0; }
.hb .hb-text { padding: 0; }
.hb .hb-el-deckend > .hb-text { padding: .375em .5em; }
.hb .hb-text p, .hb .hb-text div { margin: 0 0 1em; }
.hb .hb-text p span { line-height: 1.25em; }
.hb .hb-text > :last-child { margin-bottom: 0; }
.hb .hb-text h1, .hb .hb-text h2, .hb .hb-text h3, .hb .hb-text h4 { font-family: inherit; margin: 0 0 .5em; line-height: 1.5; }
.hb .hb-text h1 { font-size: 2em; }
.hb .hb-text h2 { font-size: 1.6667em; }
.hb .hb-text h3 { font-size: 1.3333em; }
.hb .hb-text h4 { font-size: 1.1em; }
.hb .hb-text ul, .hb .hb-text ol { margin: 1em 0; padding: 0; }
.hb .hb-text li { margin: 0 0 0 1.5em; }
.hb .hb-text a { color: var(--hb-blau); }
.hb .hb-text table { border-collapse: collapse; margin: 0 0 1em; font-size: 1em; width: auto; }
.hb .hb-text th, .hb .hb-text td { border: 1px solid #999; padding: .2em .5em; text-align: left; vertical-align: top; }
.hb .hb-text th { background: #eee; }
.hb .hb-bild, .hb .hb-bild img { display: block; width: 100%; height: 100%; }
.hb .hb-bild img { object-fit: fill; }
.hb .hb-link { color: var(--hb-blau); }
.hb .hb-sprung { cursor: pointer; }
.hb .hb-fehlt { color: #888; font-style: italic; }
.hb .katex { font-size: 1.1em; }
.hb .hb-el-knopf { width: auto; height: auto; overflow: visible; z-index: 2; }
.hb-elknopf { display: block; width: 1.5em; height: 1.5em; padding: 0; border: 0; border-radius: 50%; background: #1d5cff; color: #fff; box-shadow: 0 .15em .25em rgba(0,0,0,.5); cursor: pointer; font-size: 1.333em; }
.hb-elknopf.gross { width: 2.334em; height: 2.334em; }
.hb-elknopf::before { content: "+"; font-weight: 700; font-size: 1.1em; }
.hb-elknopf.link::before { content: "↗"; }
.hb-elknopf:hover { background: #003fdf; }
.hb-popup { position: absolute; inset: 0; z-index: 30; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; container-type: inline-size; }
.hb-popup-box { position: relative; width: 80%; max-height: 85%; overflow: auto; background: #fff; border-radius: 4px; padding: 1.2em 1.2em 1em; font-size: 2cqw; box-shadow: 0 4px 20px rgba(0,0,0,.4); }
.hb-popup-zu { position: absolute; right: .3em; top: .1em; border: 0; background: none; font-size: 1.6em; cursor: pointer; color: #555; }

/* Aufgaben (Optik angelehnt an H5P.Question) */
.hb .hb-aufgabe { padding: .6em .8em; font-size: 1em; }
.hb .hb-frage-intro { margin-bottom: .6em; }
.hb .hb-frage-intro p { margin: 0 0 .5em; }
.hb .hb-frage-intro h3, .hb .hb-frage-intro h2 { font-size: 1.15em; margin: 0 0 .5em; }
.hb .hb-frage-knoepfe { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .7em; }
.hb .hb-knopf { font: inherit; font-size: .95em; border: 0; border-radius: 1.5em; padding: .45em 1.2em; background: var(--hb-blau); color: #fff; cursor: pointer; }
.hb .hb-knopf:hover { background: var(--hb-blau-dunkel); }
.hb .hb-knopf.loesung, .hb .hb-knopf.nochmal { background: #fff; color: var(--hb-blau); box-shadow: inset 0 0 0 .1em var(--hb-blau); }
.hb [hidden] { display: none !important; }
.hb .hb-frage-rueck { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1em; margin-top: .7em; padding: .5em .7em; background: #f3f3f3; border-radius: .3em; }
.hb .hb-frage-rueck-text { flex: 1 1 60%; }
.hb .hb-punkte { display: flex; align-items: center; gap: .4em; flex: 0 0 auto; }
.hb .hb-punkte-balken { width: 7em; height: .8em; border-radius: .4em; background: #ddd; overflow: hidden; }
.hb .hb-punkte-fuell { height: 100%; background: var(--hb-gut); }
.hb .hb-punkte-zahl { font-weight: 700; }
.hb .hb-punkte-stern { color: #ccc; font-size: 1.3em; line-height: 1; }
.hb .hb-punkte.voll .hb-punkte-stern { color: #f2b400; }
/* MultiChoice */
.hb .hb-mc { list-style: none; margin: 0; padding: 0; }
.hb .hb-mc-antwort { display: flex; align-items: flex-start; gap: .6em; flex-wrap: wrap; margin: 0 0 .4em; padding: .45em .7em; border: .1em solid #d6d6d6; border-radius: .3em; background: #fff; cursor: pointer; }
.hb .hb-mc-antwort:hover { border-color: var(--hb-blau); }
.hb .hb-mc-marke { flex: none; width: 1em; height: 1em; margin-top: .2em; border: .12em solid #777; border-radius: .15em; box-sizing: border-box; background: #fff; }
.hb .hb-mc.einzel .hb-mc-marke { border-radius: 50%; }
.hb .hb-mc-antwort.gewaehlt { background: #eef4fc; border-color: var(--hb-blau); }
.hb .hb-mc-antwort.gewaehlt .hb-mc-marke { background: var(--hb-blau); border-color: var(--hb-blau); box-shadow: inset 0 0 0 .15em #fff; }
.hb .hb-mc-text { flex: 1; }
.hb .hb-mc-text p, .hb .hb-mc-text div { margin: 0; }
.hb .hb-mc-antwort.richtig { background: var(--hb-gut-flaeche); border-color: var(--hb-gut); }
.hb .hb-mc-antwort.falsch { background: var(--hb-schlecht-flaeche); border-color: var(--hb-schlecht); }
.hb .hb-mc-antwort.richtig::after { content: "✔"; color: var(--hb-gut); }
.hb .hb-mc-antwort.falsch::after { content: "✘"; color: var(--hb-schlecht); }
.hb .hb-mc-antwort.loesung { border: .12em dashed var(--hb-gut); }
.hb .hb-mc.gesperrt .hb-mc-antwort { cursor: default; }
.hb .hb-mc-rm { flex-basis: 100%; margin-left: 1.6em; font-size: .9em; color: #444; }
/* Lückentext */
.hb .hb-luecken-block { margin: 0 0 .5em; }
.hb .hb-luecken-block p { margin: 0 0 .5em; }
.hb .hb-luecke { display: inline-flex; align-items: center; gap: .2em; }
.hb .hb-luecke input { font: inherit; padding: .1em .3em; border: .1em solid #999; border-radius: .2em; background: #fff; }
.hb .hb-luecke.richtig input { border-color: var(--hb-gut); background: var(--hb-gut-flaeche); }
.hb .hb-luecke.falsch input { border-color: var(--hb-schlecht); background: var(--hb-schlecht-flaeche); }
.hb .hb-luecke-loesung, .hb .hb-dt-loesung { margin-left: .3em; padding: 0 .3em; border: .1em dashed var(--hb-gut); border-radius: .2em; color: var(--hb-gut); font-weight: 600; }
.hb .hb-tipp { flex: none; display: inline-block; width: 1.5em; height: 1.5em; margin: 0 .2em; padding: 0; border: 0; border-radius: 50%; background: var(--hb-blau); color: #fff; font: inherit; font-size: .8em; line-height: 1.5em; text-align: center; vertical-align: middle; cursor: pointer; }
.hb .hb-tipp::before { content: "?"; font-weight: 700; }
.hb .hb-tipp-text { display: inline-block; flex-basis: 100%; max-width: 100%; margin: .2em 0; padding: .3em .6em; border: .08em solid #e0c97a; border-radius: .3em; background: #fff8dc; color: #333; font-size: .9em; line-height: 1.35; vertical-align: middle; }
.hb .hb-tipp-text::before { content: "Tipp: "; font-weight: 700; }
.hb .hb-luecke { position: relative; }
.hb .hb-luecke .hb-tipp-text { position: absolute; left: 0; top: 100%; z-index: 5; width: max-content; max-width: 20em; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
/* Rueckmeldung und Knoepfe bleiben in Folien immer sichtbar, nur die Aufgabe selbst scrollt */
.hb .hb-el > .hb-aufgabe { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.hb .hb-el > .hb-aufgabe > .hb-frage-koerper { flex: 1 1 auto; min-height: 4em; overflow-y: auto; }
.hb .hb-el > .hb-aufgabe > .hb-frage-unten { flex: none; }
.hb .hb-frage-erklaerung { margin-top: .6em; padding: .5em .7em; border-left: .25em solid var(--hb-gut); border-radius: .3em; background: var(--hb-gut-flaeche); }
.hb .hb-frage-erklaerung > div + div { margin-top: .4em; }
.hb .hb-frage-erklaerung-titel { font-weight: 700; color: var(--hb-gut); }
/* Drag the Words */
.hb .hb-dt { display: flex; gap: 1em; align-items: flex-start; }
.hb .hb-dt-text { flex: 1 1 65%; line-height: 2.2; }
.hb .hb-dt-pool { flex: 0 1 35%; display: flex; flex-direction: column; align-items: stretch; gap: .35em; min-height: 2em; padding: .3em; border: .1em dashed #bbb; border-radius: .3em; }
.hb .hb-dt-luecke { display: inline-flex; align-items: center; min-width: 6em; min-height: 1.6em; margin: 0 .2em; padding: 0 .15em; vertical-align: middle; border-bottom: .12em solid #777; background: #f3f3f3; line-height: 1.4; }
.hb .hb-dt-luecke.richtig { background: var(--hb-gut-flaeche); border-color: var(--hb-gut); }
.hb .hb-dt-luecke.falsch { background: var(--hb-schlecht-flaeche); border-color: var(--hb-schlecht); }
.hb .hb-dt-wort { display: inline-block; padding: .15em .6em; background: #fff; border: .1em solid #9fb7dc; border-radius: .25em; box-shadow: 0 .1em .2em rgba(0,0,0,.15); cursor: grab; touch-action: none; user-select: none; line-height: 1.4; }
.hb .hb-dt-wort.gewaehlt { outline: .15em solid var(--hb-blau); }
.hb .zieht { position: relative; z-index: 50; cursor: grabbing; box-shadow: 0 .3em .8em rgba(0,0,0,.3); }
.hb .gesperrt .hb-dt-wort { cursor: default; }
/* Drag and Drop */
.hb .hb-dq-huelle { container-type: inline-size; }
.hb .hb-dq { position: relative; width: 100%; font-size: var(--dq-schrift); background-size: 100% 100%; background-repeat: no-repeat; border: .1em solid #ddd; }
.hb .hb-dq-zone { position: absolute; box-sizing: border-box; border: .12em dashed #777; border-radius: .2em; }
.hb .hb-dq-label { font-size: .75em; padding: 0 .2em; }
.hb .hb-dq-ablage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .1em; padding: .1em; overflow: hidden; }
.hb .hb-dq-teil { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 0 .15em; border: .08em solid #aaa; border-radius: .2em; font-size: 1em; line-height: 1.2; white-space: nowrap; touch-action: none; user-select: none; }
.hb .hb-dq-teil p { margin: 0; }
.hb .hb-dq-teil.ziehbar { cursor: grab; box-shadow: 0 .08em .15em rgba(0,0,0,.25); }
.hb .hb-dq-teil.abgelegt { position: relative; left: auto !important; top: auto !important; min-height: 0 !important; }
.hb .hb-dq-teil.bild img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.hb .hb-dq-teil.richtig { background-color: var(--hb-gut-flaeche) !important; border-color: var(--hb-gut); }
.hb .hb-dq-teil.falsch { background-color: var(--hb-schlecht-flaeche) !important; border-color: var(--hb-schlecht); }
.hb .hb-dq-teil.loesung { border: .12em dashed var(--hb-gut); }
.hb .hb-dq-teil.gesperrt { cursor: default; }
/* weitere Typen */
.hb .hb-tf { display: flex; flex-direction: column; gap: .4em; }
.hb .hb-tf-option { padding: .45em .7em; border: .1em solid #d6d6d6; border-radius: .3em; cursor: pointer; background: #fff; }
.hb .hb-tf-option.gewaehlt { border-color: var(--hb-blau); background: #eef4fc; }
.hb .hb-tf-option.richtig { border-color: var(--hb-gut); background: var(--hb-gut-flaeche); }
.hb .hb-tf-option.falsch { border-color: var(--hb-schlecht); background: var(--hb-schlecht-flaeche); }
.hb .hb-tf-option.loesung { border: .12em dashed var(--hb-gut); }
.hb .hb-mtw { line-height: 1.8; }
.hb .hb-mtw-wort { cursor: pointer; padding: 0 .1em; border-radius: .2em; }
.hb .hb-mtw-wort:hover { background: #eef4fc; }
.hb .hb-mtw-wort.gewaehlt { background: #cfe0f6; }
.hb .hb-mtw-wort.richtig { background: var(--hb-gut-flaeche); outline: .1em solid var(--hb-gut); }
.hb .hb-mtw-wort.falsch { background: var(--hb-schlecht-flaeche); outline: .1em solid var(--hb-schlecht); }
.hb .hb-mtw-wort.loesung { outline: .12em dashed var(--hb-gut); }
.hb .hb-scs-zaehler { font-size: .85em; color: #666; margin-bottom: .3em; }
.hb .hb-sum-liste { margin: 0 0 .6em; padding-left: 1.2em; color: var(--hb-gut); }
.hb .hb-karten { display: flex; flex-direction: column; align-items: center; gap: .5em; padding: .5em; }
.hb .hb-karte { width: 80%; min-height: 6em; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1em; border: .1em solid #ccc; border-radius: .4em; background: #fff; box-shadow: 0 .2em .5em rgba(0,0,0,.15); }
.hb .hb-karte.hinten { background: #f4f8fd; }
.hb .hb-karten-nav { display: flex; gap: .5em; align-items: center; }
.hb .hb-akkordeon details { border-bottom: .1em solid #ddd; }
.hb .hb-akkordeon summary { cursor: pointer; padding: .4em .5em; font-weight: 600; }
/* Bild-Auswahl (MultiMediaChoice) */
.hb .hb-mmc .hb-mc { display: grid; grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); gap: .6em; }
.hb .hb-mmc .hb-mc-antwort { margin: 0; flex-direction: column; align-items: stretch; }
.hb .hb-mmc .hb-mc-text img { display: block; width: 100%; height: auto; }
/* Interaktives Video */
.hb .hb-iv-titel { margin: 0 0 .5em; font-size: 1.2em; }
.hb .hb-iv-video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.hb .hb-iv-video > div, .hb .hb-iv-video iframe, .hb .hb-iv-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hb .hb-iv-quelle { margin-top: .3em; font-size: .8em; color: #666; }
.hb .hb-iv-liste, .hb .hb-iv-zusammenfassung { margin-top: 1em; }
.hb .hb-iv-liste-titel { margin-bottom: .4em; font-weight: 700; }
.hb .hb-iv-punkt { margin-bottom: .4em; border: .1em solid #ddd; border-radius: .3em; background: #fff; }
.hb .hb-iv-punkt summary { cursor: pointer; padding: .45em .7em; font-weight: 600; }
.hb .hb-iv-zeit { display: inline-block; min-width: 3em; padding: 0 .4em; border-radius: .3em; background: var(--hb-blau); color: #fff; font-size: .85em; text-align: center; }
.hb .hb-iv-inhalt { padding: .3em .8em .8em; }
.hb .hb-iv-inhalt > .hb-knopf { margin-top: .6em; }
.hb .hb-iv-inhalt .hb-bild img { max-width: 100%; height: auto; }
/* Seiten ohne Folie und Zusammenfassungen */
.hb .hb-fluss { aspect-ratio: auto; min-height: 20rem; overflow: visible; padding: 1em; box-sizing: border-box; font-size: 16px; }
.hb .hb-ende { display: flex; align-items: center; justify-content: center; overflow: auto; }
.hb .hb-ende-innen { width: 80%; font-size: .85em; text-align: center; }
.hb .hb-ende-innen h3 { font-family: inherit; font-size: 1.3em; margin: 0 0 .6em; }
.hb .hb-ende-prozent { --proz: 0; width: 4.5em; height: 4.5em; margin: 0 auto .6em; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; background: conic-gradient(var(--hb-gut) calc(var(--proz) * 1%), #e3e3e3 0); }
.hb .hb-ende-prozent span { display: flex; align-items: center; justify-content: center; width: 3.6em; height: 3.6em; border-radius: 50%; background: #fff; }
.hb .hb-ende-tabelle { width: 100%; border-collapse: collapse; font-size: 1em; margin: 0 0 .5em; }
.hb .hb-ende-tabelle th, .hb .hb-ende-tabelle td { padding: .25em .5em; border-bottom: .06em solid #ddd; text-align: left; }
.hb .hb-ende-tabelle td:last-child, .hb .hb-ende-tabelle th:last-child { text-align: right; white-space: nowrap; }
.hb .hb-ende-tabelle tfoot td { font-weight: 700; border-bottom: 0; }
.hb .hb-ende-tabelle a { color: var(--hb-blau); text-decoration: none; }
.hb .hb-ende .hb-frage-knoepfe { justify-content: center; }
@media (max-width: 40rem) {
  .hb-kapiteltitel { font-size: .8rem; }
  .hb-zaehler { min-width: 3rem; font-size: .75rem; }
  .hb .hb-dt { flex-direction: column; }
}

/* ---------- Kopf-Werkzeuge: Suche, Startseite (Haus), Kurs als PDF ---------- */
.kopf-titel { min-width: 0; }
.werkzeuge { display: flex; align-items: center; gap: .5rem; margin-left: auto; font-family: var(--schrift-ui); }
.werkzeug {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  height: 2.4rem; min-width: 2.4rem; padding: 0 .6rem; border: 1px solid var(--linie); border-radius: 4px;
  background: var(--flaeche); color: var(--text); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
.werkzeug:hover, .werkzeug:focus-visible { border-color: var(--akzent); color: var(--akzent); }
.werkzeug svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.werkzeug.haus { padding: 0; }
.suche { position: relative; }
.suche-feld {
  width: 15rem; height: 2.4rem; padding: 0 .75rem 0 2.1rem; border: 1px solid var(--linie); border-radius: 4px; font: inherit; font-size: .85rem;
  background: var(--flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23686868' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") no-repeat .6rem center / 1.05rem;
}
.suche-feld:focus { outline: 2px solid var(--akzent); outline-offset: -1px; border-color: var(--akzent); }
.suche-treffer {
  position: absolute; right: 0; top: calc(100% + .3rem); z-index: 70; width: min(32rem, calc(100vw - 2rem)); max-height: 70vh; overflow-y: auto;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.15); font-size: .85rem;
}
.suche-treffer[hidden] { display: none; }
.suche-kopf { padding: .45rem .8rem; color: var(--text-leise); font-size: .75rem; border-bottom: 1px solid var(--linie); }
.suche-treffer a { display: block; padding: .55rem .8rem; color: var(--text); text-decoration: none; border-bottom: 1px solid #eee; line-height: 1.4; }
.suche-treffer a:hover, .suche-treffer a.aktiv { background: var(--markiert); }
.suche-treffer .s-titel { display: block; font-weight: 700; color: var(--akzent-dunkel); }
.suche-treffer .s-pfad { display: block; font-size: .72rem; color: var(--text-leise); }
.suche-treffer .s-text { display: block; font-size: .78rem; color: var(--text); margin-top: .15rem; }
.suche-treffer mark { background: #fff0a0; color: inherit; padding: 0; }

/* PDF-Dialog */
.pdf-dialog { border: 1px solid var(--linie); border-radius: 6px; padding: 1.25rem 1.5rem; width: min(32rem, calc(100vw - 2rem)); font-family: var(--schrift-ui); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.pdf-dialog::backdrop { background: rgba(0,0,0,.35); }
.pdf-dialog h2 { font-size: 1.1rem; margin: 0 0 1rem; }
.pdf-label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 600; }
.pdf-wahl { font: inherit; font-weight: 400; font-size: .9rem; padding: .45rem; border: 1px solid var(--linie); border-radius: 4px; }
.pdf-info { font-size: .8rem; color: var(--text-leise); line-height: 1.5; }
.pdf-knoepfe { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.knopf { display: inline-block; font: inherit; font-size: .85rem; padding: .5rem 1rem; border: 1px solid var(--linie); border-radius: 4px; background: var(--flaeche); color: var(--text); cursor: pointer; text-decoration: none; }
.knopf-primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf-primaer:hover, .knopf-primaer:focus { background: var(--akzent-dunkel); color: #fff; }

/* Ansicht: "Menü immer sichtbar" - Hauptmenü (mobil: Kopf) bleibt beim Rollen oben */
.feldwahl .ansicht-fest { flex-basis: 100%; }
html.menue-fest .hauptmenue { position: sticky; top: 0; z-index: 60; background: var(--flaeche); }
html.menue-fest .seitenleiste { top: calc(var(--menue-hoehe, 3rem) + 1rem); max-height: calc(100vh - var(--menue-hoehe, 3rem) - 2rem); }
html.menue-fest .inhalt [id] { scroll-margin-top: calc(var(--menue-hoehe, 3rem) + 1rem); }

/* Seitenleiste ein-/ausklappen: kleiner Pfeil oben rechts an der Leiste */
.rumpf { position: relative; }
.leiste-knopf {
  position: absolute; z-index: 5; top: 1.5rem; left: calc(clamp(1rem, 4vw, 3rem) + var(--leiste) - 1.6rem);
  width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid var(--linie); border-radius: 4px; background: var(--flaeche);
  color: var(--text-leise); font-size: 1rem; line-height: 1; cursor: pointer;
}
.leiste-knopf::before { content: "\2039"; font-weight: 700; }
.leiste-knopf:hover, .leiste-knopf:focus-visible { color: var(--akzent); border-color: var(--akzent); }
.feldwahl { padding-right: 2rem; }
html.leiste-zu .rumpf { grid-template-columns: minmax(0, 1fr); }
html.leiste-zu .seitenleiste { display: none; }
html.leiste-zu .leiste-knopf { left: .3rem; }
html.leiste-zu .leiste-knopf::before { content: "\203A"; }
html.leiste-zu .rumpf:not(.ohne-leiste) .inhalt { margin-left: 1rem; }

@media (max-width: 62rem) {
  .kopf { flex-wrap: wrap; }
  .kopf-titel { flex: 1 1 10rem; }
  .werkzeuge { order: 3; flex-basis: 100%; }
  .suche { flex: 1; }
  .suche-feld { width: 100%; }
  .suche-treffer { left: 0; right: auto; width: calc(100vw - 2rem); }
  .leiste-knopf { display: none; }
  html.menue-fest .kopf { position: sticky; top: 0; z-index: 60; background: var(--flaeche); box-shadow: 0 1px 0 var(--linie); }
}
@media print {
  .werkzeuge, .leiste-knopf, .pdf-dialog, .seitenleiste, .hauptmenue, .menue-knopf, .blaettern, .feld-mobil { display: none !important; }
}

/* ---------- Druckfassung eines Kurses (vorschau\_druck, Grundlage der Kurs-PDFs) ---------- */
body.druck { background: #fff; }
body.druck .inhalt { max-width: none; margin: 0; font-size: 10.5pt; line-height: 1.55; }
.druck-titelblatt { min-height: 24cm; display: flex; flex-direction: column; justify-content: center; break-after: page; }
.druck-titelblatt .druck-webseite { font-family: var(--schrift-ui); color: var(--text-leise); font-size: 12pt; margin: 0 0 .5rem; }
.druck-titelblatt h1 { font-family: var(--schrift-ui); font-size: 30pt; margin: 0 0 1rem; }
.druck-titelblatt .druck-version { font-family: var(--schrift-ui); font-size: 16pt; font-weight: 700; color: var(--akzent-dunkel); margin: 0 0 2.5rem; }
.druck-titelblatt .druck-hinweis { border-left: 4px solid #f0b400; background: #fff8e1; padding: .9rem 1.2rem; font-size: 11pt; margin: 0 0 2rem; }
.druck-titelblatt .druck-adresse, .druck-titelblatt .druck-copyright { font-family: var(--schrift-ui); font-size: 10pt; color: var(--text-leise); margin: .2rem 0; }
.druck-verzeichnis { break-after: page; font-family: var(--schrift-ui); }
.druck-verzeichnis h2 { margin-top: 0; }
.druck-verzeichnis ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; font-size: 9.5pt; line-height: 1.5; }
.druck-verzeichnis li { break-inside: avoid; }
.druck-verzeichnis li.t0, .druck-verzeichnis li.t1 { font-weight: 700; margin-top: .4rem; }
.druck-verzeichnis li.t2 { padding-left: 1rem; }
.druck-verzeichnis li.t3, .druck-verzeichnis li.t4 { padding-left: 2rem; }
.druck-verzeichnis a { color: var(--text); text-decoration: none; }
.druck-seite { padding-top: .5rem; }
.druck-seite.druck-kapitel { break-before: page; }
.druck-seite > h1 { font-family: var(--schrift-ui); font-size: 18pt; margin: 1.5rem 0 1rem; border-bottom: 1px solid var(--linie); padding-bottom: .3rem; }
.druck-kapitel > h1 { font-size: 22pt; margin-top: 0; }
.druck-seite h2 { font-size: 14pt; }
.druck-seite h3 { font-size: 12pt; }
.druck-seite img { max-height: 16cm; object-fit: contain; break-inside: avoid; }
.druck-seite figure, .druck-seite table, .druck-seite .katex-display { break-inside: avoid; }
.druck-medium { font-family: var(--schrift-ui); font-size: 9pt; color: var(--text-leise); border: 1px dashed var(--linie); padding: .4rem .7rem; }

/* Musterlösungen (Seitenleiste): Hinweiszeile, solange nichts freigegeben ist */
.feld-loesungen .loesungen-info { font-size: .78rem; color: var(--text-leise); }
[data-feld="loesungen"] a::before { content: "\2713"; }

/* ---------- Unterlagen des Kurses: Auswahllisten (Seitenleiste oben, mobil unter dem Text) ---------- */
.material { font-family: var(--schrift-ui); padding: .2rem .75rem .9rem; margin-bottom: .75rem; border-bottom: 1px solid var(--linie); }
.material-kurs { margin: 0 0 .6rem; font-size: .85rem; color: var(--text); }
.material-kursname { color: #c62828; font-weight: 700; }
.material-zeile { display: block; margin: 0 0 .55rem; }
.material-zeile > span { display: block; font-size: .72rem; font-weight: 600; color: var(--text-leise); margin-bottom: .15rem; }
.material select { width: 100%; font: inherit; font-size: .82rem; padding: .35rem .4rem; border: 1px solid var(--linie); border-radius: 4px; background: var(--flaeche); color: var(--text); cursor: pointer; }
.material select:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
.material select:disabled { color: var(--text-leise); cursor: default; background: var(--hintergrund); }
.material-kurswahl { font-weight: 600; }
.feld-mobil.material { padding: .75rem 1rem; }
/* Einträge des geöffneten Kapitels: rot (in der Liste und wenn vorausgewählt), Knopf ↗ öffnet die Auswahl */
.material-zeile > .material-auswahl { display: flex; gap: .3rem; margin: 0; }
.material-auswahl select { flex: 1; min-width: 0; }
.material select.aktuell, .material option.aktuell, .material optgroup.aktuell { color: #c62828; font-weight: 700; }
.material select option:not(.aktuell), .material select optgroup:not(.aktuell) { color: var(--text); font-weight: 400; }
.material-oeffnen { flex: none; width: 2rem; font: inherit; font-size: .9rem; border: 1px solid var(--linie); border-radius: 4px; background: var(--flaeche); color: var(--akzent); cursor: pointer; }
.material-oeffnen:hover:not(:disabled) { border-color: var(--akzent); }
.material-oeffnen:disabled { color: var(--linie); cursor: default; }