/* Blogtext aus Typst (TypstRenderer, Vorlage verstehen-web.typ): Überschriften, Listen, MathML und Kästen.
   Gilt in der öffentlichen Seite und in der Vorschau der Verwaltung gleich. Nur Tokens. */
.inhalt { font-size: var(--s0); line-height: 1.65; }
.inhalt > * + * { margin-top: .85em; }
.inhalt h2, .inhalt h3 { margin-top: 1.5em; }
.inhalt h2 { font-size: var(--s2); }
.inhalt h3 { font-size: var(--s1); }
.inhalt > :first-child { margin-top: 0; }
.inhalt ul, .inhalt ol { padding-left: 1.3em; }
.inhalt li + li { margin-top: .3em; }
.inhalt math[display="block"] { display: block math; margin: .6em 0; overflow-x: auto; max-width: 100%; }
/* Ausgerichtete Gleichungen (&=): rechts bündig bis zum Zeichen, dann links, ohne Lücke dazwischen */
.inhalt mtable.aligned > mtr > mtd { padding-inline: 0; }
.inhalt mtable.aligned > mtr > mtd:nth-child(odd) { text-align: right; }
.inhalt mtable.aligned > mtr > mtd:nth-child(even) { text-align: left; }
/* Vektorpfeil (TypstMathFixes): etwas kleiner, damit er über einem Buchstaben mittig sitzt */
.inhalt mo.vektorpfeil { font-size: 75%; }
.inhalt .kasten { border: 1px solid; border-radius: var(--ecke-mittel); padding: 14px 20px 16px; }
.inhalt .kasten > * + * { margin-top: .5em; }
.inhalt .kasten__titel { font-weight: 600; }
.inhalt .kasten.merke { background: var(--merke); border-color: var(--merke-linie); }
.inhalt .kasten.merke > .kasten__titel { color: var(--haupt); }
.inhalt .kasten.achtung { background: var(--achtung); border-color: var(--achtung-linie); }
.inhalt .kasten.achtung > .kasten__titel { color: var(--rot); }
.inhalt .kasten.aufgabe { background: var(--aufgabe); border-color: var(--aufgabe-linie); }
.inhalt .kasten.aufgabe > .kasten__titel { color: var(--akzent-dunkel); }

/* Übungsquiz (#quiz/#frage, quiz.mjs): sieht aus wie der Aufgabe-Kasten der Folien */
.inhalt .quiz { border: 1px solid var(--aufgabe-linie); border-radius: var(--ecke-mittel); background: var(--aufgabe); padding: 14px 20px 16px; }
.inhalt .quiz > * + * { margin-top: 0; }
.inhalt .quiz__titel { font-weight: 600; color: var(--akzent-dunkel); }
.inhalt .quiz__frage { padding: 14px 0; border-top: 1px solid var(--aufgabe-linie); display: grid; gap: 10px; }
.inhalt .quiz__titel + .quiz__frage { border-top: 0; padding-top: 8px; }
.inhalt .quiz__frage > * + * { margin-top: 0; }
.inhalt .quiz__optionen { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.inhalt .quiz__optionen li, .inhalt .quiz__optionen li + li { padding: 0; margin: 0; }
.inhalt .quiz__optionen li::before { content: none; }
.inhalt .quiz__optionen .quiz__option { width: 100%; max-width: 24rem; }
.inhalt .quiz__auswahl { display: flex; gap: 8px; flex-wrap: wrap; }
.inhalt .quiz__option, .inhalt .quiz__knopf { font: inherit; border: 1.5px solid var(--linie-stark); background: var(--blatt); color: var(--tinte);
    border-radius: var(--ecke-mittel); padding: 8px 14px; cursor: pointer; text-align: left; display: inline-flex; gap: .45em; align-items: center; }
.inhalt .quiz__option:hover:not([aria-disabled="true"]), .inhalt .quiz__knopf:hover:not([aria-disabled="true"]) { border-color: var(--haupt); }
.inhalt [aria-disabled="true"] { cursor: default; }
.inhalt .quiz__knopf { background: var(--haupt); border-color: var(--haupt); color: var(--papier); font-weight: 600; }
.inhalt .quiz__knopf:hover:not([aria-disabled="true"]) { background: var(--tinte); border-color: var(--tinte); }
.inhalt .quiz__option--richtig { border-color: var(--gruen); color: var(--gruen); font-weight: 600; }
.inhalt .quiz__option--falsch { border-color: var(--rot); color: var(--rot); }
.inhalt .quiz__option .icon { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.inhalt .quiz__eingabe { display: flex; gap: 8px; flex-wrap: wrap; }
.inhalt .quiz__eingabe input { font: inherit; color: var(--tinte); width: 10rem; padding: 8px 12px; border: 1.5px solid var(--linie-stark); border-radius: var(--ecke-mittel); background: var(--blatt); }
.inhalt .quiz__eingabe input::placeholder { color: var(--leise); opacity: 1; }
.inhalt .quiz__eingabe input[aria-invalid="true"] { border-color: var(--rot); }
.inhalt .quiz__rueckmeldung { font-weight: 600; }
.inhalt .quiz__rueckmeldung:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.inhalt .quiz__frage--richtig .quiz__rueckmeldung { color: var(--gruen); }
.inhalt .quiz__frage--falsch .quiz__rueckmeldung { color: var(--rot); }
.inhalt .quiz__loesung summary { cursor: pointer; color: var(--haupt); font-weight: 600; list-style: none; display: inline-flex; gap: .35em; align-items: center; }
.inhalt .quiz__loesung summary::-webkit-details-marker { display: none; }
.inhalt .quiz__loesung summary::before { content: ""; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.inhalt .quiz__loesung[open] summary::before { transform: rotate(45deg); }
.inhalt .quiz__loesung[hidden] { display: none; }
.inhalt .quiz__loesung > * + * { margin-top: .4em; }
.inhalt .quiz__ergebnis { font-weight: 600; }
.inhalt .quiz__stand { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--aufgabe-linie); color: var(--tinte); font-size: var(--s-1); }
.inhalt .quiz__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .inhalt .quiz__loesung summary::before { transition: none; } }