/*
 * Gemeinsame Bausteine der Lernwerkzeuge.
 *
 * Diese Datei liegt im Kern, weil die Bausteine allen gehoeren.
 * Sie enthaelt Gestaltung, keine Oberflaeche und keine
 * Fachlogik: Was ein Popup zeigt, entscheidet das Werkzeug.
 *
 * Regel wie in farben.css: kein Farbwert direkt, alles ueber
 * die Variablen mit dem Vorsatz mx-.
 */

:root {
    /* Lesebreite. Dieselbe wie der Inhaltscontainer der
       Lektionen in LearnDash, damit ein Text im Popup so
       angenehm zu lesen ist wie auf der Seite. */
    --mx-lesebreite: var(--mx-feld-lese, 580px);

    /* Grund hinter dem Popup. Bewusst nur leicht abdunkelnd:
       Der Zusammenhang dahinter soll erkennbar bleiben. */
    --mx-popup-grund: rgba(0, 37, 79, 0.45);
}

/* ============================================================
   POPUP

   Ein Fenster fuer die ganze Plattform. Alex' Ansage vom
   2026-08-30: "Das Popup vom Profil als Popup fuer die gesamte
   Plattform verwenden, so dass wir ein einheitliches Popup
   haben, ueberall gleich."

   Die Fassung ist die des Profilfensters, weil sie die
   verlangendste war und alles kann, was die anderen brauchen:
   eine Kopfzeile mit Titel und Kreuz, eine feste Hoehe, einen
   rollenden Inhalt und, wenn ein Werkzeug sie braucht, eine
   Spalte mit Reitern daneben.

   Bis dahin stand hier das Gegenteil, und der Satz ist es wert,
   aufgehoben zu werden: "Bewusst schlicht: ein Grund, eine
   weisse Flaeche, ein Kreuz in der Ecke. Keine Kopfleiste."
   Das trug, solange in einem Popup nur ein Absatz Text stand.
   Sobald darin gewechselt wird, traegt es nicht mehr: Ein Kreuz
   in der Ecke des Inhalts rutscht beim Rollen aus dem Blick, und
   ohne Kopfzeile gibt es keine Stelle, an der der Titel stehen
   bleibt, waehrend darunter etwas anderes erscheint.

   Feste Hoehe und nicht nur eine Obergrenze: Mit max-height
   richtet sich das Fenster nach seinem Inhalt und springt beim
   Wechsel auf einen kuerzeren Bereich zusammen. Ein Fenster, das
   bei jedem Klick seine Groesse aendert, zwingt das Auge jedes
   Mal neu, sich zu orientieren, und das Kreuz steht nie an
   derselben Stelle. Gerollt wird stattdessen der Inhalt.

   Verborgen ueber hidden am Grund, nicht ueber display im
   Stylesheet: So kann ein Werkzeug es oeffnen, ohne diese Datei
   zu kennen. Das Oeffnen, das Schliessen, die Escape-Taste, der
   Klick auf den Grund und die Zurueck-Taste liegen in
   bausteine.js.
   ============================================================ */

.mx-popup {
    position: fixed;
    inset: 0;
    /* Ueber dem schwebenden Knopf der Hilfeanfrage (99990) und ueber
       dessen eigenem Fenster (99995). Vorher stand hier 9999, und der
       Knopf lag auf dem Popup. Unter der Werkzeugleiste von WordPress
       bleibt es trotzdem -- die gehoert nicht uns, und sie zu
       ueberdecken hiesse, dem Redakteur seinen Weg zu nehmen. Dass
       das Fenster darunter beginnt, regelt --mx-popup-oben. */
    z-index: 99996;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--mx-popup-grund, rgba(0, 37, 79, 0.45));
    /* Gegen die Lesebreite des Themes.
   
       Das Theme gibt jedem direkten Kind von .text eine Lesebreite und
       einen automatischen Rand (app.css, :where(.text) > *). Steht ein
       Popup im Seiteninhalt -- und das tut es, sobald ein Kurzbefehl es
       ausgibt --, ist es genau so ein Kind. position: fixed schuetzt
       davor nicht: Es nimmt dem Element seinen Platz im Fluss, aber
       max-width gilt weiter. Der abgedunkelte Grund lag dann als
       schmales Band mitten auf der Seite statt ueber ihr.
   
       Am 2026-09-05 auf der Startseite der Plattform gemessen, nachdem
       Alex es dreimal gemeldet hatte. Die Regel steht hier im Baustein
       und nicht bei einem einzelnen Aufrufer, damit sie fuer jedes
       Popup gilt, das kuenftig irgendwo im Inhalt landet. */
    max-width: none;
    margin: 0;
}

.mx-popup[hidden] {
    display: none;
}

.mx-popup__fenster {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(60rem, 100%);
    height: min(44rem, 100%);
    max-height: 100%;
    overflow: hidden;
    border-radius: var(--mx-radius-gross, 12px);
    background: var(--mx-karte, #fff);
    color: var(--mx-text, #1a202c);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

/* Ein Fenster, das nur einen Text traegt, braucht keine 60 Rem und
   keine feste Hoehe. Es waechst mit dem Inhalt bis zu einer Grenze
   und bleibt in der Lesebreite. Fuer die Erklaerungen im Trainer
   und im Baukasten. */
.mx-popup__fenster--text {
    width: min(46rem, 100%);
    height: auto;
    max-height: min(44rem, 100%);
}

/* -- Die Kopfzeile -----------------------------------------
   Titel links, Kreuz rechts, eine Linie darunter. Sie steht fest,
   waehrend der Inhalt darunter rollt.

   Schmal, aber nicht schmaler als das Kreuz. Alex am 2026-08-30:
   "Die Ueberschriftzeile etwas schmaler machen, so dass mehr Platz
   im Inhalt sichtbar ist, aber auch nicht so schmal, dass das
   Schliessen-Kreuz so klein wird." Vorher waren es 65 Pixel, jetzt
   52: 40 fuer das Kreuz und je 6 Polster. Unter 40 geht das Kreuz
   nicht -- das ist die Groesse, die ein Finger sicher trifft. */
.mx-popup__kopf {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 6px 10px 6px 1.25rem;
    border-bottom: 1px solid var(--mx-rahmen, #e2e8f0);
}

.mx-popup__titel {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
    /* Ein langer Titel schiebt sonst das Kreuz aus dem Fenster. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Das Kreuz. Seit dem 2026-08-30 in der Kopfzeile und nicht mehr
   frei ueber dem Inhalt: Dort lag es auf dem Text, und rechts
   musste dafuer ein Streifen freibleiben.

   Die Flaeche ist quadratisch und das Zeichen darin mittig:
   line-height 1 und place-items center, sonst sitzt das Kreuz
   sichtbar oberhalb der Mitte seines Grundes.

   Die Farbe steht ausdruecklich da, auch fuer den Zeigefinger.
   Das Theme faerbt jeden button, und ohne eigene Angabe schlaegt
   das durch. Erfahrung vom 2026-08-24. */
.mx-popup__zu {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border: 0;
    /* Weiche Ecke, kein Kreis. Alex am 2026-08-30: Ein runder blauer
       Fleck unter dem Zeiger ist zu viel Aufhebens fuer einen Knopf,
       der nur zumacht. Er soll dezent grau werden. */
    border-radius: var(--mx-radius-klein, 6px);
    background: transparent;
    color: var(--mx-text-mittel, #4a5568);
}

.mx-popup__zu:hover,
.mx-popup__zu:focus-visible {
    background: var(--mx-flaeche, #f0f2f5);
    color: var(--mx-text, #1a202c);
}

/* -- Der Rumpf ---------------------------------------------
   Ohne Reiter ist der Rumpf der Inhalt selbst. Mit Reitern steht
   links die Spalte und rechts der Inhalt. */
.mx-popup__rumpf {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 13rem 1fr;
}

.mx-popup__navi {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1rem .75rem;
    border-right: 1px solid var(--mx-rahmen, #e2e8f0);
    background: var(--mx-flaeche-zart, #f7f9fb);
    overflow-y: auto;
}

/* Ein Zeichen vor der Beschriftung. Alex am 2026-08-30, mit den
   Einstellungen von Claude als Vorbild: Dort steht links in der Leiste
   vor jedem Wort ein kleines Zeichen.

   Es traegt currentColor und faerbt sich damit mit dem Reiter mit -- ein
   gewaehlter Reiter bekommt sein Zeichen in Blau, ohne dass es dafuer
   eine zweite Regel braucht. Die Zeichen selbst liefert das Werkzeug,
   das den Bereich anmeldet; der Kern schreibt nur vor, wie gross sie
   sind. Fehlt eines, rueckt die Beschriftung nach links und der Reiter
   sieht aus wie vorher. */
.mx-popup__reiter {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    border: 0;
    border-radius: var(--mx-radius-klein, 6px);
    background: transparent;
    color: var(--mx-text-mittel, #4a5568);
    font: inherit;
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
}

.mx-popup__zeichen {
    flex: 0 0 auto;
    display: block;
    width: 18px;
    height: 18px;
}

.mx-popup__zeichen svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mx-popup__reiter:hover {
    background: var(--mx-flaeche, #f0f2f5);
    color: var(--mx-text, #1a202c);
}

.mx-popup__reiter[aria-selected="true"] {
    background: var(--mx-karte, #fff);
    color: var(--mx-primaer, #00254F);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--mx-akzent, #F2A9A9);
}

.mx-popup__reiter:focus-visible {
    outline: 2px solid var(--mx-akzent-dunkel, #E08F8F);
    outline-offset: -2px;
}

/* Der Inhalt rollt, das Fenster nicht. Kein Polster mehr rechts
   fuer das Kreuz: Es steht jetzt in der Kopfzeile. */
.mx-popup__inhalt {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem 1.5rem 1.75rem;
}

.mx-popup__inhalt > :first-child {
    margin-top: 0;
}

/* Sperrt das Rollen der Seite hinter dem Popup. Ohne das rutscht
   am Telefon die Seite darunter weg, und beim Schliessen steht man
   an einer anderen Stelle. */
body.mx-popup-offen {
    overflow: hidden;
}

/* -- Am Telefon --------------------------------------------
   Das Fenster fuellt den Bildschirm. Eine Spalte von 13 Rem
   daneben liesse fuer den Inhalt nichts uebrig, deshalb stehen
   die Reiter dort als Zeile oben.

   Der Abstand nach oben ist der Grund, warum das Fenster am
   Telefon ueberhaupt nicht ging: Es begann bei null, und die
   Werkzeugleiste von WordPress steht dort mit einem hoeheren
   Stapelwert. Sie lag damit genau auf dem Kreuz -- am
   2026-08-30 gemessen und von Alex gemeldet ("man sieht das
   x Kreuz nicht"). Am Rechner fiel es nie auf, weil das Fenster
   dort mittig steht und weit unter der Leiste beginnt.

   Der Wert kommt von WordPress selbst: 46 Pixel am Telefon,
   32 darueber. Ohne angemeldeten Redakteur ist er null, und
   dann liegt das Fenster wieder am oberen Rand. */
.mx-popup {
    --mx-popup-oben: 0px;
}

body.admin-bar .mx-popup { --mx-popup-oben: 32px; }

@media screen and (max-width: 782px) {
    body.admin-bar .mx-popup { --mx-popup-oben: 46px; }
}

@media (max-width: 48rem) {
    /* Das Fenster faengt nicht an der Oberkante an, sondern ein Stueck
       darunter. Alex am 2026-08-30: "Momentan dockt es ganz nach oben
       an, vielleicht kannst du es etwas heruntersetzen."
       
       Der Streifen darueber ist mehr als Geschmack. Er zeigt, dass die
       Seite dahinter noch da ist -- ein Fenster, das den Bildschirm
       randlos fuellt, sieht aus wie eine neue Seite, und dann sucht man
       den Weg zurueck statt den Weg heraus. Deshalb bekommen auch die
       oberen Ecken ihre Rundung; unten laeuft das Fenster weiter aus
       dem Bild.
       
       Der Abzug fuer die Werkzeugleiste kommt oben drauf: Ohne sie
       (also bei jedem Schueler) sind es die 3.5rem allein. */
    .mx-popup {
        padding: calc(var(--mx-popup-oben) + 1.75rem) .75rem 1.5rem;
        align-items: stretch;
    }

    /* Rundum gerundet und rundum Abstand, nicht als Blatt am oberen
       Rand angeklebt. Alex hat am 2026-08-30 die Einstellungen von
       Claude als Vorbild gezeigt: Dort steht das Fenster frei, oben und
       unten bleibt ein Streifen der Seite sichtbar. Genau der macht den
       Unterschied zwischen einem Fenster ueber der Seite und einer
       neuen Seite -- und davon haengt ab, ob jemand das Kreuz sucht
       oder die Zurueck-Taste. */
    .mx-popup__fenster,
    .mx-popup__fenster--text {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: var(--mx-radius-gross, 12px);
    }

    /* Etwas mehr Luft um das Kreuz, weil hier ein Finger tippt
       und nicht ein Zeiger. */
    .mx-popup__kopf { padding: 8px 8px 8px 1rem; }
    .mx-popup__zu { width: 44px; height: 44px; }

    .mx-popup__rumpf {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .mx-popup__navi {
        flex-direction: row;
        gap: .35rem;
        padding: .6rem .75rem;
        border-right: 0;
        border-bottom: 1px solid var(--mx-rahmen, #e2e8f0);
        overflow-x: auto;
    }

    .mx-popup__reiter {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .mx-popup__reiter[aria-selected="true"] {
        box-shadow: inset 0 -3px 0 var(--mx-akzent, #F2A9A9);
    }

    .mx-popup__inhalt { padding: 1rem 1rem 2rem; }
}

/* ============================================================
   SEITENKOPF

   Der Kopf einer Seite oder eines Werkzeugs: Marken-Zeile in
   Rosa und Versalien, grosser Titel, darunter der Doppelstrich.
   Drei kleine Mittel statt eines grossen Bildes, weil die
   Plattform Werkzeug ist und nicht Werbeseite.

   Der Doppelstrich haengt am Titel und ist bewusst kein eigenes
   Element. Gezeichnet als ein Streifen mit Verlauf statt als
   zwei Linien: So bleibt es ein Element im Markup, und niemand
   kann die zweite Linie versehentlich weglassen.

   Der Titel traegt keine eigene Ausrichtung. Zentriert das
   Theme Ueberschriften, tut es das auch hier; das ist Sache
   der Seite und nicht des Bausteins.

   Werte uebernommen aus dem Trainer, damit sich am Aussehen
   nichts aendert. Erfahrung vom 2026-08-25.
   ============================================================ */

.mx-kopf {
    margin-bottom: 24px;
}

/* Werte der Homepage, uebernommen am 2026-08-30 im Zuge von P43:
   14 Pixel, halbfett, vier Pixel Sperrung. Vorher 12 Pixel und
   0.16em; im Bildvergleich stand die Zeile dadurch enger und
   kleiner als dieselbe Zeile auf mathealex.de. */
.mx-kopf__marke {
    display: inline-block;
    margin: 0 0 14px;
    font-size: var(--mx-marke-groesse);
    line-height: var(--mx-marke-zeile);
    font-weight: var(--mx-marke-gewicht);
    letter-spacing: var(--mx-marke-sperrung);
    text-transform: uppercase;
    color: var(--mx-akzent);
}

.mx-kopf__titel {
    margin: 0 0 10px;
    font-size: var(--mx-titel-gross-groesse);
    line-height: var(--mx-titel-gross-zeile);
    font-weight: var(--mx-titel-gross-gewicht);
    letter-spacing: var(--mx-titel-gross-sperrung);
}

/* Der Doppelstrich in den Massen der Homepage, uebernommen am
   2026-08-30: 78 Pixel lang und vier Pixel stark, darunter eine
   kuerzere und blassere zweite Linie von 34 Pixeln. Vorher zwei
   gleich lange Linien von 48 Pixeln; im Bildvergleich war das
   der auffaelligste Unterschied im Kopf einer Seite.

   Zwei Verlaeufe in einem Element und nicht zwei Elemente: Ein
   Pseudo-Element kann kein zweites tragen, und ein echtes
   Element im Markup wuerde jede Vorlage zwingen, den Strich
   selbst zu setzen. Er haengt am Titel und bleibt dort. */
.mx-kopf__titel:after {
    content: "";
    display: block;
    width: 78px;
    height: 12px;
    margin-top: 12px;
    background-image:
        linear-gradient(var(--mx-akzent), var(--mx-akzent)),
        linear-gradient(var(--mx-akzent-blass), var(--mx-akzent-blass));
    background-size: 78px 4px, 34px 4px;
    background-position: left top, left 8px;
    background-repeat: no-repeat;
}

/* Fassung fuer den Kopf eines Bereichs mitten auf der Seite:
   kleiner als der Seitenkopf, mit Marken-Zeile, ohne Strich.
   Der Strich gehoert dem Seitentitel und verlaeore seine
   Bedeutung, stuende er mehrmals auf einer Seite. */
.mx-kopf--bereich {
    margin: 88px 0 44px;
}

.mx-kopf--bereich .mx-kopf__titel {
    font-size: var(--mx-titel-groesse);
    line-height: var(--mx-titel-zeile);
}

.mx-kopf--bereich .mx-kopf__titel:after {
    content: none;
}

/* Fassung fuer Unteransichten: kleiner und ohne Strich, weil
   der grosse Kopf der Seite bereits weiter oben stand. */
.mx-kopf--klein .mx-kopf__titel {
    margin-bottom: 2px;
    font-size: var(--mx-titel-klein-groesse);
    line-height: var(--mx-titel-klein-zeile);
}

.mx-kopf--klein .mx-kopf__titel:after {
    content: none;
}

/* Der Doppelstrich als Wahl, seit dem 2026-09-04.

   Die drei Fassungen darueber entscheiden ihn mit: Der Seitenkopf
   traegt ihn, Bereich und Unteransicht nicht. Das ist die richtige
   Vorgabe und trotzdem zu eng -- der Trainer setzt ihn seit dem
   2026-08-30 auch ueber einen Bereichskopf, und weil der Kern das
   nicht anbot, steht die Ausnahme heute als eigene Regel in
   trainer.css. Eine Ausnahme in einem Werkzeug ist der Anfang von
   dreizehn Ausnahmen in dreizehn Werkzeugen.

   Deshalb hier zwei Fassungen, die die Vorgabe in beide Richtungen
   umkehren. Zwei Klassen am selben Element und nicht eine
   verschachtelte: 0,3,1 gegen die 0,2,1 der Vorgabe, und damit
   gewinnt sie unabhaengig davon, welche Regel spaeter steht. */
.mx-kopf.mx-kopf--strich .mx-kopf__titel:after {
    content: "";
}

.mx-kopf.mx-kopf--ohne-strich .mx-kopf__titel:after {
    content: none;
}

/* Hier stand bis zum 2026-09-04 eine Medienabfrage, die den
   grossen Titel unter 600 Pixeln auf 28 Pixel setzte. Sie ist
   entfallen, weil die Groesse jetzt als clamp in schrift.css
   steht und stetig mitwaechst statt an einer Grenze zu springen.
   Die beiden Enden sind dieselben geblieben: 34 Pixel am
   Bildschirm, 26 am schmalen Telefon. */

/* ============================================================
   EINLEITUNG

   Der ruhige Absatz unter dem Seitenkopf. Er sagt in zwei
   Saetzen, worum es geht. Eigener Baustein und keine Regel am
   Seitenkopf, weil er auch mitten auf einer Seite vor einem
   neuen Bereich stehen darf.

   Die Lesebreite ist begrenzt: Ueber etwa 62 Zeichen findet
   das Auge den Zeilenanfang nicht mehr zuverlaessig.
   ============================================================ */

.mx-einleitung {
    max-width: 62ch;
    margin: 18px 0 24px;
    font-size: var(--mx-einleitung-groesse);
    line-height: var(--mx-einleitung-zeile);
    font-weight: var(--mx-einleitung-gewicht);
    color: var(--mx-text-mittel);
}

/* ============================================================
   TAFEL

   Der Rahmen fuer einen Abschnitt: heller Grund, duenner Rand,
   weiche Ecken. Er fasst zusammen, was zusammengehoert, ohne
   laut zu sein.

   Zwei Fassungen, weil eine Tafel entweder Text traegt oder
   Zeilen. Traegt sie Zeilen, hat sie selbst kein Polster; das
   liegt dann in den Zeilen, sonst haette die Trennlinie
   zwischen ihnen an den Seiten Luft und liefe nicht durch.
   ============================================================ */

.mx-tafel {
    padding: 22px 24px;
    margin-bottom: 36px;
    border: 1px solid var(--mx-akzent-hell);
    border-radius: var(--mx-radius-gross, 12px);
    background: var(--mx-karte);
}

.mx-tafel__titel {
    margin: 0 0 10px;
    font-size: 20px;
}

.mx-tafel--zeilen {
    padding: 0;
    border-color: var(--mx-rahmen);
}

/* ============================================================
   ZEILE

   Titel, ein erklaerender Satz, rechts ein Weg hinaus. Der
   nuetzlichste Baustein fuer Einstiegsseiten und Uebersichten.

   Zwischen zwei Zeilen eine feine Linie und kein zweiter
   Rahmen. Der Weg ist freiwillig; ohne ihn nimmt der Text die
   volle Breite.
   ============================================================ */

.mx-zeile {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
}

.mx-zeile + .mx-zeile {
    border-top: 1px solid var(--mx-rahmen);
}

.mx-zeile__text {
    flex: 1 1 auto;
    max-width: 62ch;
}

.mx-zeile__titel {
    margin: 0 0 6px;
    font-size: 17px;
}

.mx-zeile__weg {
    flex: 0 0 auto;
}

/* Nebeneinander waere am Telefon beides zu schmal. */
@media (max-width: 600px) {
    .mx-zeile {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

/* ============================================================
   RUBRIK

   Eine Ueberschrift mit einem farbigen Balken davor. Sie
   gliedert eine Seite in Bereiche, die zu etwas gehoeren, etwa
   zu einem Gebiet.

   Die Farbe kommt aus den Daten und darf deshalb nicht im CSS
   stehen. Sie wird als eigene Variable am Element gesetzt,
   also style="--mx-rubrik-farbe: #e05a5a", und hier nur
   abgegriffen. Ohne Angabe faellt sie auf Dunkelblau zurueck.
   Eine Farbe unmittelbar am Element waere kuerzer, aber dann
   liesse sich der Balken spaeter nicht mehr an einer Stelle
   aendern.

   Der Balken darf auch allein vor einer anderen Ueberschrift
   stehen, etwa vor einem Tafel-Titel. Die Variable wird dann
   an dieser Ueberschrift gesetzt; sie vererbt sich nach innen.
   ============================================================ */

.mx-rubrik {
    margin: 0 0 18px;
    font-size: 22px;
}

.mx-rubrik__marke {
    display: inline-block;
    width: 5px;
    height: 0.9em;
    margin-right: 12px;
    vertical-align: -0.05em;
    border-radius: 2px;
    background: var(--mx-rubrik-farbe, var(--mx-primaer));
}

/* ============================================================
   RASTER

   Das Gitter fuer Kacheln. Es bricht von selbst um, sobald der
   Platz eng wird, und braucht keine Angabe, wie viele Spalten
   es sein sollen. Gehoert zum Baustein Kachel, sonst muesste
   jede Seite die Anordnung neu bauen.
   ============================================================ */

.mx-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    align-items: stretch;
}

/* ============================================================
   KACHEL

   Kuerzel oben, Titel darunter, dann Platz fuer das, was die
   Kachel zeigen soll. Sie taugt als Kasten und als Verweis; ist
   sie ein Verweis, hebt sie sich beim Zeigen hervor.

   Wie bei der Rubrik kommt eine eigene Farbe ueber eine
   Variable und nicht als Wert am Element.

   Innerhalb einer Kachel wird nichts unterstrichen. Die ganze
   Flaeche ist bereits anklickbar, und das Theme unterstreicht
   sonst Titel und Stand. Erfahrung vom 2026-08-25.
   ============================================================ */

.mx-kachel {
    display: block;
    position: relative;
    padding: 18px 20px;
    color: inherit;
    text-decoration: none;
    /* Vier Pixel statt einem. Die Randfarbe sagt, zu welchem Gebiet ein
       Thema gehoert -- bei einem Pixel ist davon kaum etwas zu sehen,
       und die Aussage geht verloren. Am 2026-08-30 auf Alex' Ansage
       zuerst auf zwei verdoppelt und, weil das immer noch zu zurueckhaltend
       war, im selben Zug auf vier. */
    border: 4px solid var(--mx-kachel-farbe, var(--mx-rahmen));
    border-radius: var(--mx-radius-gross, 12px);
    background: var(--mx-karte);
    transition: border-color .12s, box-shadow .12s, transform .12s;
}

.mx-kachel,
.mx-kachel:hover,
.mx-kachel:focus-visible {
    text-decoration: none;
}

.mx-kachel a,
.mx-kachel__titel,
.mx-kachel__stand {
    text-decoration: none;
}

/* Die Rueckmeldung unter dem Zeiger.
 *
 * Bis zum 2026-08-30 war sie allein eine andere Randfarbe. Das wirkte
 * nur bei Kacheln ohne eigene Farbe: Eine Kachel, die schon die Farbe
 * ihres Gebiets traegt, wechselte auf dieselbe Farbe und tat also
 * nichts. Alex hat genau das gemeldet -- im Eingangstest aendere sich
 * der Rand, bei den Lektionen nicht.
 *
 * Jetzt ist die Rueckmeldung ein Schatten und ein Millimeter Anheben.
 * Beides ist unabhaengig von der Farbe der Kachel und damit ueberall
 * gleich. Die Randfarbe bleibt zusaetzlich, wo sie etwas bewirkt. */
a.mx-kachel:hover,
a.mx-kachel:focus-visible,
.mx-kachel:has(.mx-deckel:hover),
.mx-kachel:has(.mx-deckel:focus-visible) {
    border-color: var(--mx-kachel-farbe, var(--mx-primaer));
    box-shadow: 0 6px 18px rgba(0, 37, 79, 0.18);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    a.mx-kachel:hover,
    a.mx-kachel:focus-visible,
    .mx-kachel:has(.mx-deckel:hover),
    .mx-kachel:has(.mx-deckel:focus-visible) { transform: none; }
}

/* Der Knopf einer Kachel sitzt in der Ecke, nicht im Textfluss:
   Die Kachel soll ihren Titel zeigen und nicht ihre Handlung. */
.mx-kachel > .mx-aktion {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* Das Kuerzel. Eigener kleiner Baustein und kein Teil der
   Kachel: Es steht ebenso im Kopf einer Unteransicht und ueber
   einem Test. Ueberall dieselbe kleine, ruhige Zeile. */
.mx-kuerzel {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--mx-text-hell);
}

.mx-kachel__titel {
    margin: 4px 0 12px;
    font-size: 17px;
    color: var(--mx-text-mittel);
}

.mx-kachel__stand {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--mx-text-hell);
}

/* Eine Kachel ohne Inhalt steht ohne Grund und ohne Schatten
   da. Sie soll erkennbar sein, aber nicht einladen. */
.mx-kachel--leer {
    background: none;
    box-shadow: none;
}

/* ============================================================
   FORTSCHRITTSBALKEN

   Ein Streifen, der zeigt, wie weit etwas gediehen ist. Die
   Breite der Fuellung setzt das Werkzeug am Element, weil sie
   aus den Daten kommt.
   ============================================================ */

.mx-balken {
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--mx-offen);
}

.mx-balken__fuell {
    height: 100%;
    background: var(--mx-sicher);
}

/* ============================================================
   KENNZAHL

   Eine Zahl mit einer Bildunterschrift, mehrere nebeneinander.
   Fuer den Blick, der wissen will, wie es steht, ohne zu lesen.

   Das Gitter ist ein eigener Baustein, weil eine einzelne
   Kennzahl selten allein steht. Es fuellt die Breite aus statt
   umzubrechen: Bei drei oder vier Zahlen sieht eine halbleere
   Zeile nach einem Fehler aus.
   ============================================================ */

.mx-kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.mx-kennzahl {
    padding: 14px 16px;
    border-radius: var(--mx-radius, 8px);
    background: var(--mx-flaeche);
}

.mx-kennzahl__wert {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--mx-primaer);
}

.mx-kennzahl__titel {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--mx-text-hell);
}

/* ============================================================
   MARKE

   Das kleine Etikett fuer ein Level oder einen Zustand. Es
   steht neben einem Titel und nie fuer sich allein.

   Die Grundform ist bewusst grau. Eine Marke, die immer eine
   Farbe traegt, sagt nichts mehr aus; die Fassungen kommen
   nur dort zum Einsatz, wo der Zustand tatsaechlich zaehlt.
   ============================================================ */

.mx-marke {
    padding: 2px 8px;
    font-size: 13px;
    color: var(--mx-text-hell);
    border: 1px solid var(--mx-rahmen);
    border-radius: var(--mx-radius-klein, 6px);
}

.mx-marke--sicher {
    color: var(--mx-sicher);
}

.mx-marke--angefangen {
    color: var(--mx-angefangen);
}

/* ============================================================
   ZEILENLISTE

   Untereinanderstehende Zeilen in einem gemeinsamen Rahmen:
   ein Punkt fuer den Zustand, in der Mitte Titel und Stand,
   rechts das Kuerzel. Fuer Lektionen, Tests und alles, was
   sich aufzaehlen und anklicken laesst.

   Sie ist nicht dasselbe wie mx-zeile. Die Zeile steht in
   einer Tafel und traegt einen Weg hinaus; hier ist die ganze
   Zeile der Weg.
   ============================================================ */

.mx-liste {
    overflow: hidden;
    border: 1px solid var(--mx-rahmen);
    border-radius: var(--mx-radius, 8px);
}

.mx-liste__zeile {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    color: inherit;
    text-decoration: none;
    background: var(--mx-karte);
    border-bottom: 1px solid var(--mx-rahmen);
}

/* ============================================================
   DECKEL UND AKTION

   Zwei Helfer fuer denselben Fall: Eine Flaeche soll ganz
   anklickbar sein und trotzdem einen Knopf tragen. Als Verweis
   um alles herum ginge das nicht, der Klick landete im Verweis.

   Stattdessen liegt der Verweis innen, traegt mx-deckel und
   legt sich unsichtbar ueber die ganze Flaeche. Der Knopf
   traegt mx-aktion und liegt darueber. Die Flaeche selbst
   braucht position: relative; das haben Zeile und Kachel schon.
   ============================================================ */

.mx-deckel:after {
    content: "";
    position: absolute;
    inset: 0;
}

.mx-aktion {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}

.mx-liste__zeile:last-child {
    border-bottom: 0;
}

a.mx-liste__zeile:hover,
a.mx-liste__zeile:focus-visible,
.mx-liste__zeile:has(.mx-deckel:hover),
.mx-liste__zeile:has(.mx-deckel:focus-visible) {
    background: var(--mx-flaeche);
    text-decoration: none;
}

/* Der Punkt sagt den Zustand: offen, angefangen, sicher. */
.mx-liste__punkt {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--mx-offen);
}

.mx-liste__punkt--angefangen {
    background: var(--mx-angefangen);
}

.mx-liste__punkt--sicher {
    background: var(--mx-sicher);
}

.mx-liste__mitte {
    flex: 1 1 auto;
}

.mx-liste__titel {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.mx-liste__stand {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: var(--mx-text-hell);
}

.mx-liste__kuerzel {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--mx-text-hell);
}

/* ============================================================
   MELDUNG

   Das kleine Popup fuer eine Frage oder einen Hinweis. Es
   ersetzt die Meldung des Browsers, die weder zur Plattform
   passt noch sich gestalten laesst.

   Eigener Baustein und keine Fassung des grossen Popups:
   Es hat kein Kreuz, es liegt darueber, und es traegt immer
   Knoepfe. Ein Modifikator haette drei Ausnahmen gebraucht.
   ============================================================ */

.mx-meldung {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--mx-popup-grund, rgba(0, 37, 79, 0.45));
}

.mx-meldung[hidden] {
    display: none;
}

.mx-meldung__fenster {
    width: 100%;
    max-width: 30rem;
    padding: 1.5rem;
    background: var(--mx-karte);
    border: 2px solid var(--mx-primaer);
    border-radius: var(--mx-radius-gross, 12px);
}

.mx-meldung__titel {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: var(--mx-primaer);
}

.mx-meldung__text {
    margin: 0 0 1.3rem;
    color: var(--mx-text);
}

.mx-meldung__wege {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

/* Die Knoepfe. Zwei Staerken, mehr nicht: Auf einer Seite gibt
   es eine wichtige Handlung, alles andere ist Nebenweg.

   Die Pille stammt aus dem Trainer und ist am 2026-08-25 zur
   allgemeinen Form geworden. Beide Farben ausdruecklich
   gesetzt: Das Theme faerbt jeden button, und ohne eigene
   Angabe schlaegt das durch. Erfahrung vom 2026-08-24. */
.mx-knopf {
    display: inline-block;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 9px 20px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--mx-primaer);
    border-radius: 999px;
    background: var(--mx-primaer);
    color: var(--mx-karte);
}

.mx-knopf:hover,
.mx-knopf:focus-visible {
    background: var(--mx-akzent);
    border-color: var(--mx-akzent);
    color: var(--mx-text);
}

/* Die Nebenform steht als Umriss da, damit sie neben dem
   eigentlichen Inhalt nicht wie der wichtigste Knopf der Seite
   wirkt. Ein Pfeil dahinter wird in den Text geschrieben und
   nicht hier gesetzt: So laesst sich dieselbe Fassung auch fuer
   etwas verwenden, das nirgendwohin fuehrt. */
.mx-knopf--leise {
    font-size: 14px;
    padding: 7px 16px;
    background: transparent;
    border-color: var(--mx-akzent);
    color: var(--mx-primaer);
}

.mx-knopf--leise:hover,
.mx-knopf--leise:focus-visible {
    background: var(--mx-akzent-hell);
    border-color: var(--mx-akzent);
    color: var(--mx-primaer);
}

.mx-knopf[disabled] {
    opacity: 0.5;
    cursor: default;
}

/* Die runde Fassung traegt nur ein Zeichen und keinen Text. Fuer
   Nebenhandlungen, die mehrfach auf einer Seite vorkommen und dort
   als ausgeschriebener Knopf zu laut waeren. Was sie tut, sagt der
   Titel beim Zeigen und die Rueckfrage danach. Sie laesst sich mit
   beiden Staerken verbinden. */
.mx-knopf--rund {
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
}

.mx-knopf--rund svg {
    display: block;
    width: 17px;
    height: 17px;
}

/* ============================================================
   KREIS

   Ein runder Kreis mit einem Zeichen darin, wie man ihn von
   Konten kennt. Er steht neben einem Namen und sagt auf einen
   Blick, wer angemeldet ist.

   Der Inhalt steht im Markup und nicht hier, weil er aus den
   Daten kommt. Deshalb heisst der Baustein Kreis und nicht
   Buchstabe: Steht dort spaeter ein Bild, stimmt der Name noch.

   Die Groesse steht fest in Pixeln. Ein Kreis muss rund
   bleiben; kaeme sie aus der Schriftgroesse der Umgebung,
   wuechse an einer Stelle mit groesserer Schrift nur die
   Breite mit. Aus demselben Grund inline-grid statt einer
   gerechneten Zeilenhoehe: Das Zeichen sitzt damit von selbst
   in der Mitte.

   Rosa als Flaeche, Dunkelblau als Buchstabe. Weiss auf Rosa
   hat zu wenig Kontrast, der Buchstabe verschwindet. Dazu
   steht der Kreis in einer dunkelblauen Kopfzeile, in der ein
   dunkelblauer Kreis kaum zu sehen waere.
   ============================================================ */

.mx-kreis {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mx-akzent);
    color: var(--mx-primaer);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

/* Als Verweis stehen Farbe und Unterstreichung ausdruecklich
   hier. Das Theme faerbt jedes a, und ohne eigene Angabe
   schlaegt das durch. Dieselbe Erfahrung wie beim Knopf. */
a.mx-kreis,
a.mx-kreis:hover,
a.mx-kreis:focus-visible {
    color: var(--mx-primaer);
    text-decoration: none;
}

/* Die dunklere Fassung des Rosa, gedacht fuer Raender und
   Zeigefinger-Zustaende. Die Schriftfarbe bleibt gleich. */
a.mx-kreis:hover,
a.mx-kreis:focus-visible {
    background: var(--mx-akzent-dunkel);
}


/* --- Band ------------------------------------------------------------------

   Ein Abschnitt, dessen Grund ueber die ganze Bildschirmbreite laeuft,
   waehrend der Text in der Lesebreite bleibt. Von der Homepage
   uebernommen: Dort trennen abwechselnde Gruende die Abschnitte
   staerker als jeder Abstand, und die Seite bekommt einen Takt.

   Der Ausbruch aus dem Inhaltscontainer geht ueber negative Raender
   statt ueber eine Positionierung: So bleibt das Band im Textfluss und
   schiebt nichts uebereinander. 100vw statt 100%, weil der Container
   schmaler ist als das Fenster.
   -------------------------------------------------------------------------- */

/* Polster in den Massen der Homepage, uebernommen am 2026-08-30:
   96 Pixel oben und unten, 28 seitlich. Vorher hoechstens 72
   Pixel oben; im Bildvergleich standen die Abschnitte dadurch
   enger beieinander als auf mathealex.de. */
/* Das Band laeuft von Kante zu Kante. Seit dem 2026-08-30 sagt es das
   selbst, statt mit negativen Raendern aus einem schmalen Container
   auszubrechen. Die Begrenzung muss ausdruecklich weg: Das Theme gibt
   jedem Kind des Textes sonst die Lesebreite. */
.mx-band {
    max-width: none;
    padding: 96px 28px;
}
@media (max-width: 640px) {
    .mx-band { padding: 62px 20px; }
}
.mx-band__inhalt {
    max-width: var(--mx-feld-lese, 919px);
    margin: 0 auto;
}
.mx-band--warm  { background: var(--mx-lese-gold-zart, #FFF9F2); }
.mx-band--zart  { background: var(--mx-flaeche, #f6f7f9); }
.mx-band--blau  { background: var(--mx-primaer, #00254F); color: #fff; }
.mx-band--blau .mx-kopf__titel,
.mx-band--blau .mx-tafel__titel,
.mx-band--blau h2,
.mx-band--blau h3 { color: #fff; }
.mx-band--blau .mx-einleitung { color: rgba(255, 255, 255, .82); }
.mx-band--blau .mx-tafel { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }

/* Zwei Baender gleicher Art nebeneinander wuerden wie ein einziges
   grosses wirken. Der Abstand faellt dann weg, der Wechsel bleibt. */
.mx-band + .mx-band { margin-top: 0; }

/* Im Band macht das Polster den Abstand nach aussen. Die eigenen
   Raender der Bausteine kaemen dazu und rissen den Abschnitt
   auseinander: Der Bereichskopf bringt 88 Pixel nach oben und 44 nach
   unten mit, die Einleitung noch einmal 18. Zwischen Titel und Text
   standen dadurch ueber 60 Pixel statt der 20 der echten Seite. */
.mx-band__inhalt > :first-child { margin-top: 0; }
.mx-band .mx-kopf,
/* Der Bereichskopf bringt 88 Pixel nach oben mit; im Band macht das
   Polster den Abstand. Nach unten darf ein Werkzeug mehr wollen --
   deshalb hier nur ein Mindestmass und keine Festlegung. */
.mx-band .mx-kopf--bereich { margin-top: 0; margin-bottom: 20px; }
.mx-band .mx-kopf--mitte .mx-einleitung { margin-left: auto; margin-right: auto; }
.mx-band .mx-einleitung { margin-top: 0; }

/* --- Schritt ---------------------------------------------------------------

   Eine Zeile mit einer Zahl davor. Fuer alles, was eine Reihenfolge hat:
   erst dies, dann das. Die Zahl steht in einem Kreis in der Akzentfarbe
   und traegt das Auge von Zeile zu Zeile.

   Unterschied zur Zeile in der Tafel: Die Zeile ist eine Liste ohne
   Ordnung, der Schritt hat eine. Wer die Reihenfolge nicht braucht,
   nimmt die Zeile.
   -------------------------------------------------------------------------- */

.mx-schritte { display: grid; gap: 1.1rem; }
.mx-schritt {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--mx-rahmen, #e2e8f0);
    border-radius: var(--mx-radius-gross, 12px);
    background: var(--mx-karte, #fff);
}
.mx-schritt__zahl {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: var(--mx-akzent, #F2A9A9);
    color: var(--mx-primaer, #00254F);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mx-schritt__titel { margin: .1rem 0 .3rem; font-size: 1.05rem; color: var(--mx-primaer, #00254F); }
.mx-schritt__text p:last-child { margin-bottom: 0; }
.mx-schritt__weg { align-self: center; }

@media (max-width: 640px) {
    .mx-schritt { grid-template-columns: auto 1fr; }
    .mx-schritt__weg { grid-column: 1 / -1; justify-self: start; }
}


/* --- Schrittkarten ---------------------------------------------------------

   Drei Karten nebeneinander, die Nummer als Kreis oben links ueber dem
   Rand. Von der Homepage uebernommen, wo sie den Ablauf einer Anfrage
   traegt. Der ueberstehende Kreis ist Absicht: Er bricht die Kante und
   macht aus drei gleichen Kaesten eine Reihenfolge.

   Unterschied zu den Schritten als Zeilen: Karten stehen nebeneinander
   und tragen mehr Text, auch eine Aufzaehlung. Zeilen stehen
   untereinander und sind knapp. Ueber drei Karten wird es unruhig; dann
   Zeilen nehmen.
   -------------------------------------------------------------------------- */

/* Der Abstand zwischen einem Kopf und der Reihe darunter.

   Das Doppelte des bisherigen Wertes, seit dem 2026-09-04 auf Alex'
   Ansage. Der Grund ist kein Geschmack: Zwischen einer Ueberschrift
   und einem Absatz gehoert wenig Luft, weil beide dieselbe Sache
   sagen. Zwischen einer Ueberschrift und einer Reihe von Karten
   gehoert mehr, weil die Karten eine eigene Ebene sind -- ohne den
   Abstand liest das Auge die erste Karte als Fortsetzung des Kopfes.

   Als Variable und nicht als Zahl: Derselbe Abstand steht auch
   ueber den Themenkarten, heute noch mit einem eigenen Wert von
   50 Pixeln. Sobald entschieden ist, ob beide gleich sein sollen,
   ist es eine Zeile.

   Gemessen war der Abstand vorher 2.2rem gegen 20 Pixel Rand des
   Kopfes; benachbarte Raender fallen zusammen, es galt also der
   groessere. Jetzt 4.4rem, also wirklich das Doppelte und nicht
   die Summe von beidem. */
:root {
    --mx-abstand-kopf-karten: 4.4rem;
}

.mx-schrittkarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: var(--mx-abstand-kopf-karten);
}

/* Am Telefon stehen die Karten untereinander, und dort trug derselbe
   Abstand von 1.5rem nicht mehr. Der Grund ist die Zahl: Sie sitzt mit
   top: -1.4rem ueber dem Rand und frisst von den 24 Pixeln fast alles
   weg, so dass die naechste Karte an der vorigen zu kleben scheint.
   Nebeneinander faellt das nicht auf, weil dort die Breite trennt.

   Dreifacher Wert auf Alex' Ansage vom 2026-09-05. Nur row-gap: Sobald
   zwei Karten nebeneinander passen, bleibt der seitliche Abstand bei
   1.5rem, denn dort war nie etwas zu eng. */
@media (max-width: 640px) {
    .mx-schrittkarten { row-gap: 4.5rem; }
}
.mx-schrittkarte {
    position: relative;
    padding: 2.6rem 1.6rem 1.6rem;
    border: 1px solid var(--mx-rahmen, #e2e8f0);
    border-radius: var(--mx-radius-gross, 12px);
    background: var(--mx-karte, #fff);
}
.mx-schrittkarte__zahl {
    position: absolute;
    top: -1.4rem;
    left: 1.4rem;
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 999px;
    background: var(--mx-akzent, #F2A9A9);
    color: var(--mx-primaer, #00254F);
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mx-schrittkarte__titel {
    margin: 0 0 .7rem;
    font-size: 1.15rem;
    color: var(--mx-primaer, #00254F);
}
.mx-schrittkarte p { margin: 0 0 .8rem; }
.mx-schrittkarte p:last-child { margin-bottom: 0; }

/* --- Punkte ----------------------------------------------------------------

   Eine Aufzaehlung mit rundem Punkt in der Akzentfarbe statt des
   Standardpunkts. Steht meist in einer Schrittkarte, taugt aber
   ueberall. Eigener Baustein, damit die Karte nicht vorschreibt, was
   in ihr steht.
   -------------------------------------------------------------------------- */

.mx-punkte { margin: .6rem 0; padding-left: 0; list-style: none; }
.mx-punkte li {
    position: relative;
    padding: .25rem 0 .25rem 1.2rem;
}
.mx-punkte li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .95em;
    width: .42rem;
    height: .42rem;
    border-radius: 999px;
    background: var(--mx-akzent, #F2A9A9);
}

/* --- Buehne ----------------------------------------------------------------

   Der Auftakt einer Seite ueber die volle Bildschirmhoehe: dunkler Grund,
   ein feines Raster darueber, eine Kurve als Anspielung auf das Zeichen der
   Marke, und in der Mitte Kicker, Titel, Ort und ein Satz darunter.

   Von der Homepage uebernommen, wo sie die Startseite traegt. Auf der
   Lernplattform sitzt sie unter der Menueleiste; das Polster oben faengt das
   ab, ohne dass die Buehne die Leiste kennen muss.

   Sie bricht aus dem Inhaltscontainer aus wie das Band, ueber negative
   Raender statt ueber eine Positionierung. Hoechstens eine je Seite: Zwei
   Auftakte sind keiner.
   -------------------------------------------------------------------------- */

.mx-buehne {
    position: relative;
    max-width: none;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: clamp(3rem, 8vw, 5.8rem) 1.5rem 8rem;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(1100px 620px at 78% 12%, rgba(242, 169, 169, .16), transparent 62%),
        radial-gradient(900px 520px at 12% 88%, rgba(30, 58, 95, .85), transparent 58%),
        linear-gradient(160deg, var(--mx-primaer, #00254F) 0%, #001a3a 100%);
}

/* Das Raster liegt ueber dem Grund und wird zum Rand hin ausgeblendet,
   damit es nicht wie ein Kaestchenblatt wirkt. */
.mx-buehne__raster {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 25%, transparent 78%);
    mask-image: radial-gradient(circle at 50% 45%, #000 25%, transparent 78%);
}

/* Die Kurve. Breiter als die Buehne, damit sie an beiden Seiten
   hinauslaeuft und nicht wie ein abgeschnittenes Bild endet. */
.mx-buehne__kurve {
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: 12%;
    width: 110%;
    height: auto;
    opacity: .16;
    pointer-events: none;
}

.mx-buehne__inhalt {
    position: relative;
    z-index: 2;
    max-width: 940px;
}

/* Die Zeile ueber dem Titel und der Ort darunter, seit dem 2026-09-04
   als ein Baustein.

   Sie rahmen den Titel ein, oben und unten, und darum sehen sie gleich
   aus: dieselbe Groesse, dasselbe Gewicht, dieselbe Sperrung, derselbe
   gedaempfte Ton. Vorher war die obere 15 Pixel gross und rosa, die
   untere bis 24 Pixel und weiss-durchsichtig -- zwei Zeilen mit
   derselben Aufgabe, in zwei verschiedenen Handschriften. Alex hat es
   im Bild gesehen.

   Nur der Titel traegt jetzt die Akzentfarbe. Ein Akzent, der an drei
   Stellen steht, ist keiner mehr.

   Die Sperrung in em und nicht in Pixeln: Sie waechst dann mit der
   Schrift mit. Feste 5 Pixel sind bei 15 Pixel Schrift weit und bei
   27 Pixel eng, und genau das sah man vorher. */
.mx-buehne__kicker,
.mx-buehne__ort {
    font-size: clamp(19px, 2.4vw, 27px);
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

/* Der Abstand nach oben und unten ist derselbe, damit der Titel
   wirklich in der Mitte steht und nicht nur ungefaehr. Die Sperrung
   haengt rechts am letzten Buchstaben und liesse den Text sonst
   leicht nach links verrutscht wirken; der Ausgleich holt das
   zurueck. */
.mx-buehne__kicker {
    margin: 0 0 clamp(28px, 4vw, 52px);
    padding-left: .3em;
}

.mx-buehne__titel {
    margin: 0 0 10px;
    font-size: clamp(30px, 7.2vw, 78px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.5px;
    color: #fff;
}

/* Die Begriffe stehen nebeneinander und brechen am Telefon um. Als
   Liste und nicht als ein Satz, damit jeder fuer sich lesbar bleibt. */
.mx-buehne__reihe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: .12em .55em;
    margin-top: .06em;
}

/* Gestapelt: jeder Begriff auf einer eigenen Zeile, in Versalien.
   Die Form der frueheren Homepage, seit dem 2026-09-04 auf Alex'
   Ansage zurueckgeholt.

   Der Unterschied ist nicht nur Geschmack. Nebeneinander liest man
   die drei als eine Aufzaehlung und ueberfliegt sie; untereinander
   steht jeder fuer sich, und "ESA. & MSA." bekommt dasselbe
   Gewicht wie "Abitur." -- was es sachlich auch hat. Am Telefon
   entfaellt ausserdem der Umbruch, der vorher zwischen zwei und
   drei Zeilen sprang, je nachdem wie breit das Fenster war.

   Etwas kleiner und weniger eng gesetzt als die einzeilige
   Fassung: Drei Zeilen in 78 Pixeln fuellen einen Bildschirm
   allein. */
.mx-buehne__reihe--gestapelt {
    flex-direction: column;
    align-items: center;

    /* Der sichtbare Abstand zwischen zwei Zeilen ist nicht nur die
       Luecke, sondern Luecke plus das, was der Zeilenabstand ueber
       der Schrift frei laesst: bei line-height 1.1 sind das 0.1em.
       Vorher also 0.1 + 0.08 = 0.18em. Doppelt so viel heisst 0.36em,
       und davon bleiben 0.26em fuer die Luecke. Alex' Ansage vom
       2026-09-04, ausgerechnet und nicht geschaetzt -- die Luecke
       einfach zu verdoppeln haette nur ein Fuenftel mehr ergeben. */
    gap: .26em;

    /* Eigene Groesse statt eines Anteils der Titelgroesse.

       Als .8em des Titels stand das Hero am Telefon bei 24 Pixeln:
       Der Titel faellt dort auf seinen Kleinstwert von 30 Pixeln, und
       vier Fuenftel davon sind nichts mehr. Der Bildschirm war voll,
       der Text darauf war es nicht -- genau das hat Alex am
       2026-09-04 gemeldet.

       Mit einem eigenen clamp waechst die Zeile am Telefon mit der
       Breite mit und trifft am Rechner denselben Wert wie vorher:
       11vw sind bei 390 Pixeln rund 43 Pixel, bei 1440 laeuft der
       Deckel von 62 Pixeln an, und 78 mal 0.8 war 62. Am grossen
       Bildschirm aendert sich also nichts. */
    font-size: clamp(34px, 11vw, 62px);

    letter-spacing: .02em;
}

.mx-buehne__reihe--gestapelt .mx-buehne__wort {
    text-transform: uppercase;
}

.mx-buehne__wort {
    color: var(--mx-akzent, #F2A9A9);
    white-space: nowrap;
}

.mx-buehne__ort {
    margin: clamp(28px, 4vw, 52px) 0 0;
    padding-left: .3em;
}

.mx-buehne__unterzeile {
    max-width: 640px;
    margin: 26px auto 0;
    font-size: clamp(16px, 2vw, 20px);
    color: rgba(255, 255, 255, .8);
}

/* Der Weg nach unten. Er atmet, damit erkennbar ist, dass unter dem
   ersten Bildschirm noch etwas kommt. */
.mx-buehne__runter {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    animation: mx-schweben 2.4s ease-in-out infinite;
}

.mx-buehne__runter svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

@keyframes mx-schweben {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}

/* Wer Bewegung abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    .mx-buehne__runter { animation: none; }
}

@media (max-width: 640px) {
    .mx-buehne { padding: 3rem 1.25rem 6rem; }

    /* Am Telefon enger gesperrt, sonst bricht eine der beiden Zeilen
       um. Groesse und Ton bleiben gleich: Die beiden gehoeren
       zusammen, in jeder Breite. Hier stand vorher fuer jede eine
       eigene Zeile mit einem eigenen Wert. */
    .mx-buehne__kicker,
    .mx-buehne__ort { letter-spacing: .18em; }

    .mx-buehne__reihe { gap: .05em .4em; }
    .mx-buehne__runter { display: none; }
}


/* --- Portrait --------------------------------------------------------------

   Ein rundes Bild, darunter Name und Rolle. Steht dort, wo eine Seite
   jemanden vorstellt.

   Bis zum 2026-09-04 lag ein duenner Ring in der Akzentfarbe darum, mit
   Luft zwischen Bild und Ring. Alex hat ihn im Bild angesehen und
   gestrichen. Der Grund ist einer, der sich merken laesst: Der Ring war
   zwei Pixel stark, zu 65 Prozent durchsichtig und saß zwoelf Pixel vom
   Bild entfernt -- aus zwei Metern Abstand sah das nicht nach Absicht
   aus, sondern nach einem vergessenen Rand. Ein Rahmen muss deutlich
   sein oder gar nicht da sein; unentschieden ist die einzige Fassung,
   die immer falsch aussieht.

   Der weisse Rand am Bild selbst und der weiche Schatten bleiben. Sie
   heben das freigestellte Bild von der Flaeche ab, ohne es einzurahmen.
   -------------------------------------------------------------------------- */

.mx-portrait {
    position: relative;
    width: 216px;
    height: 216px;
    margin: 0 auto 22px;
}

.mx-portrait img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #fff;
    box-shadow: 0 14px 40px rgba(0, 37, 79, .14);
}

.mx-portrait__name {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--mx-primaer, #00254F);
}

.mx-portrait__rolle {
    margin: 2px 0 0;
    font-size: 15px;
    color: var(--mx-text-mittel, #4a5568);
}

@media (max-width: 640px) {
    .mx-portrait { width: 168px; height: 168px; }
}


/* --- Zitat -----------------------------------------------------------------

   Ein herausgehobener Satz in der Stimme einer Person, mit einem grossen
   Anfuehrungszeichen darueber. Fuer eine Ansprache, nicht fuer eine
   Erklaerung: Wer etwas erklaeren will, nimmt Fliesstext.

   Das Zeichen kommt aus dem CSS und nicht aus dem Text, damit es beim
   Vorlesen nicht mitgesprochen wird.
   -------------------------------------------------------------------------- */

.mx-zitat {
    position: relative;
    max-width: 760px;
    margin: 0 auto 34px;
    font-size: clamp(20px, 2.6vw, 27px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--mx-primaer, #00254F);
}

.mx-zitat::before {
    content: "\201C";
    display: block;
    margin-bottom: 6px;
    font-size: 80px;
    line-height: .8;
    color: var(--mx-akzent, #F2A9A9);

    /* Das Zeichen sitzt im oberen Viertel seiner Zeile; darunter steht
       leerer Kasten. Dadurch klebte es an der Rolle darueber und lag
       weit vom Satz entfernt, zu dem es gehoert. Verschoben wird mit
       transform und nicht mit margin, weil der Satz selbst genau dort
       stehenbleiben soll, wo er steht -- Alex' Ansage vom 2026-09-04.
       In em, damit die Verschiebung mit der kleineren Schriftgroesse
       am Telefon mitgeht. */
    transform: translateY(.35em);
}

.mx-band--blau .mx-zitat { color: #fff; }

@media (max-width: 640px) {
    .mx-zitat::before { font-size: 60px; }
}


/* --- Signatur --------------------------------------------------------------

   Eine kleine Pille unter einem Text: rundes Bild, Name, Rolle. Sie sagt,
   wer spricht, ohne den Text mit einer zweiten Ueberschrift zu belasten.

   Sie steht am Ende eines Textes und nie am Anfang; am Anfang waere sie
   eine Vorstellung und dafuer gibt es das Portrait.
   -------------------------------------------------------------------------- */

.mx-signatur {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-top: 30px;
    padding: 9px 20px 9px 9px;
    border: 1px solid rgba(0, 37, 79, .08);
    border-radius: 999px;
    background: var(--mx-karte, #fff);
    box-shadow: 0 2px 10px rgba(0, 37, 79, .06);
    text-align: left;
}

.mx-signatur img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}

.mx-signatur__text { line-height: 1.25; }

.mx-signatur__name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--mx-primaer, #00254F);
}

.mx-signatur__rolle {
    font-size: 13px;
    color: var(--mx-text-mittel, #4a5568);
}


/* --- Medienblock -----------------------------------------------------------

   Bild links, Text rechts, beides in einer Karte. Fuer einen Abschnitt, der
   ohne sein Bild nicht dasselbe sagt: eine Aufgabenform, ein Diagramm, eine
   Pruefungsart.

   Das Bild sitzt auf warmem Grund und nicht auf Weiss, damit ein
   freigestelltes Bild eine Flaeche hat und nicht in der Karte schwimmt.
   Am Telefon steht das Bild oben; nebeneinander waere beides zu schmal.
   -------------------------------------------------------------------------- */

.mx-medien {
    display: grid;
    grid-template-columns: 420px 1fr;
    align-items: center;
    gap: 56px;
    margin-bottom: 34px;
    padding: 44px;
    border: 1px solid rgba(0, 37, 79, .08);
    border-radius: var(--mx-radius-gross, 12px);
    background: var(--mx-karte, #fff);
    box-shadow: 0 2px 10px rgba(0, 37, 79, .06);
}

/* Steht ein Medienblock direkt unter einem Kopf, bekommt er denselben
   grossen Abstand wie eine Kartenreihe. Seit dem 2026-09-04 auf Alex'
   Ansage, und aus demselben Grund: Eine Karte unter einer Ueberschrift
   ist eine eigene Ebene und kein Fortsatz des Kopfes.

   Nur der erste. Der zweite folgt auf den ersten und bringt seinen
   Abstand als margin-bottom selbst mit; bekaeme er den grossen dazu,
   risse zwischen zwei gleichrangigen Karten mehr Luft auf als zwischen
   Kopf und Abschnitt. Dafuer das Nachbarzeichen und keine Regel an
   .mx-medien selbst. */
.mx-kopf + .mx-medien {
    margin-top: var(--mx-abstand-kopf-karten);
}

.mx-medien__bild {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    border-radius: var(--mx-radius-gross, 12px);
    background: var(--mx-warm, #FFF9F2);
}

.mx-medien__bild img {
    max-height: 250px;
    width: auto;
    max-width: 100%;
}

.mx-medien__titel {
    margin: 0 0 8px;
    font-size: clamp(23px, 2.6vw, 30px);
    color: var(--mx-primaer, #00254F);
}

.mx-medien__text p { font-size: 17px; }
.mx-medien__text p:last-child { margin-bottom: 0; }

/* Die gedrehte Fassung fuer eine Reihe abwechselnder Bloecke. */
.mx-medien--gedreht .mx-medien__bild { order: 2; }

@media (max-width: 900px) {
    .mx-medien { grid-template-columns: 1fr; gap: 28px; padding: 30px; }
    .mx-medien--gedreht .mx-medien__bild { order: 0; }
}

@media (max-width: 640px) {
    .mx-medien { padding: 22px; }
    .mx-medien__bild { padding: 16px; }
}


/* --- Holliste --------------------------------------------------------------

   Eine Reihe von Wegen zu Dateien, jeder mit einem Pfeil nach unten. Fuer
   Blaetter, Hefte und Skripte, die jemand mitnehmen soll.

   Der Pfeil steht im Weg selbst und nicht daneben: Er sagt, was passiert,
   bevor jemand darauf drueckt. Am Telefon liegt jeder Weg auf voller
   Breite, weil ein Tippziel von 120 Pixeln zu schmal ist.
   -------------------------------------------------------------------------- */

.mx-holliste {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
    padding-left: 0;
    list-style: none;
}

.mx-holliste__weg {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--mx-akzent-hell, #fce4e4);
    color: var(--mx-primaer, #00254F);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, border-color .2s, transform .18s;
}

.mx-holliste__weg:hover,
.mx-holliste__weg:focus-visible {
    background: var(--mx-akzent, #F2A9A9);
    transform: translateY(-2px);
}

.mx-holliste__weg svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

@media (prefers-reduced-motion: reduce) {
    .mx-holliste__weg { transition: background .2s; }
    .mx-holliste__weg:hover { transform: none; }
}

@media (max-width: 640px) {
    .mx-holliste__weg { width: 100%; justify-content: center; }
}


/* --- Themenkarten ----------------------------------------------------------

   Karten nebeneinander, jede mit einem Namen, einer Unterzeile, einem
   kurzen Trenner und darunter Ueberschriften mit Aufzaehlungen. Fuer eine
   Gegenueberstellung: zwei Hochschulen, zwei Kurse, zwei Wege.

   Unterschied zur Schrittkarte: Die Schrittkarte hat eine Reihenfolge und
   traegt eine Zahl. Die Themenkarte steht gleichrangig neben ihrer
   Nachbarin. Unterschied zur Kachel: Die Kachel ist ein Weg, die
   Themenkarte ist Inhalt.
   -------------------------------------------------------------------------- */

.mx-themenkarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: stretch;
    gap: 28px;
    margin-top: 50px;
}

.mx-themenkarte {
    display: flex;
    flex-direction: column;
    padding: 40px 34px;
    border-radius: var(--mx-radius-gross, 12px);
    background: var(--mx-karte, #fff);
    box-shadow: 0 14px 40px rgba(0, 37, 79, .14);
    color: var(--mx-text, #1a202c);
}

.mx-themenkarte__name {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--mx-primaer, #00254F);
}

.mx-themenkarte__unter {
    margin: 6px 0 0;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mx-text-mittel, #4a5568);
}

.mx-themenkarte__trenner {
    width: 56px;
    height: 3px;
    margin: 20px 0 6px;
    border-radius: 2px;
    background: var(--mx-akzent, #F2A9A9);
}

.mx-themenkarte h3,
.mx-themenkarte__titel {
    margin: 26px 0 10px;
    font-size: 18px;
    color: var(--mx-primaer, #00254F);
}

.mx-themenkarte ul { margin: 0; padding-left: 20px; }
.mx-themenkarte li { font-size: 15px; line-height: 1.8; }
.mx-themenkarte li::marker { color: var(--mx-akzent, #F2A9A9); }

/* In einem blauen Band bleibt die Karte weiss: Sie ist die Flaeche, auf
   der gelesen wird, und nicht Teil des Grundes. */
/* Eine Kachel bleibt eine weisse Karte, auch auf blauem Grund. Ihre
   Schrift erbt sonst das Weiss des Bandes und stuende weiss auf weiss.
   Dieselbe Falle wie bei der Themenkarte darunter, am 2026-08-30 beim
   blauen Lektionsband wieder aufgetreten. */
.mx-band--blau .mx-kachel { color: var(--mx-text, #1a202c); }
.mx-band--blau .mx-kachel__titel { color: var(--mx-primaer, #00254F); }
.mx-band--blau .mx-kachel__stand { color: var(--mx-text-mittel, #4a5568); }

.mx-band--blau .mx-themenkarte { color: var(--mx-text, #1a202c); }
.mx-band--blau .mx-themenkarte__name,
.mx-band--blau .mx-themenkarte h3 { color: var(--mx-primaer, #00254F); }

@media (max-width: 640px) {
    .mx-themenkarte { padding: 28px 22px; }
}


/* --- Band, mittig ----------------------------------------------------------

   Dieselben Baender, aber der Inhalt steht mittig und schmaler. Fuer einen
   Abschnitt, der anspricht statt erklaert: eine Vorstellung, ein Zitat, ein
   Aufruf. Ein langer Fliesstext gehoert nicht hierher, denn mittig gesetzt
   findet das Auge den Zeilenanfang nicht zuverlaessig wieder.

   Die Ausrichtung sitzt am Band und nicht an den Bausteinen darin: Der
   Seitenkopf traegt bewusst keine eigene Ausrichtung, damit dieselbe
   Ueberschrift links wie mittig stehen kann.
   -------------------------------------------------------------------------- */

.mx-band--mitte { text-align: center; }
.mx-band--mitte .mx-band__inhalt { max-width: var(--mx-feld-mittel, 780px); }
.mx-band--mitte .mx-kopf__marke { display: block; }
.mx-band--mitte .mx-kopf__titel:after { margin-left: auto; margin-right: auto; }
.mx-band--mitte .mx-einleitung { margin-left: auto; margin-right: auto; }
.mx-band--mitte .mx-holliste { justify-content: center; }

/* Eine Aufzaehlung bleibt auch im mittigen Band linksbuendig. Mittig
   gesetzte Listenpunkte stehen jeder an einer anderen Stelle und lesen
   sich wie ein Gedicht. */
.mx-band--mitte .mx-punkte { display: inline-block; text-align: left; }


/* --- Ausrichtung eines Kopfes ----------------------------------------------

   Ob eine Ueberschrift links steht oder mittig, ist eine Wahl und keine
   Regel. Linksbuendig ist die Voreinstellung, weil das Auge den
   Zeilenanfang dort wiederfindet; mittig ist richtig, wo ein Abschnitt
   anspricht statt erklaert.

   Die Wahl sitzt am Kopf und nicht am Band. Auf der Homepage steht ueber
   linksbuendigen Karten ein mittiger Titel, und beides gehoert in
   denselben Abschnitt. Die Regel steht in 00_SEITENREGELN.md
   (06_Plattform/09_Gestaltung).

   Bis zum 2026-08-30 war die Wahl gar nicht moeglich: lernlektionen.css
   hat h2 und h3 ohne Vorsatz zentriert, und das Stylesheet laedt auf
   jeder Seite der Plattform.
   -------------------------------------------------------------------------- */

.mx-kopf--links { text-align: left; }
.mx-kopf--links .mx-kopf__titel:after {
    margin-left: 0;
    margin-right: 0;
    background-position: left top, left 8px;
}

.mx-kopf--mitte { text-align: center; }
.mx-kopf--mitte .mx-kopf__titel:after,
.mx-band--mitte .mx-kopf__titel:after {
    margin-left: auto;
    margin-right: auto;
    background-position: center top, center 8px;
}


/* --- Band, breit ------------------------------------------------------------

   Die Lesebreite von 919 Pixeln gilt fuer Text, den jemand von vorn bis
   hinten liest. Eine Schauseite hat den nicht: Sie stellt Karten, Bilder
   und Wege nebeneinander, und die brauchen Platz. 1140 Pixel, dieselbe
   Breite wie die Homepage.

   Ausdruecklich nicht die Voreinstellung. Wer ein Band breit macht,
   entscheidet damit, dass darin kein langer Fliesstext steht.
   -------------------------------------------------------------------------- */

.mx-band--gross .mx-band__inhalt { max-width: var(--mx-feld-gross, 920px); }
.mx-band--breit .mx-band__inhalt { max-width: var(--mx-feld-breit, 1140px); }


/* --- Aufruf -----------------------------------------------------------------

   Text links, ein Weg rechts daneben, beides in einer Zeile. Fuer den
   Hinweis, der zu etwas fuehren soll: eine neue Sache, ein Angebot, ein
   naechster Schritt. Steht meist in einem blauen Band.

   Der Weg steht neben dem Text und nicht darunter, weil er die Aussage
   des Abschnitts ist und nicht seine Fussnote. Am Telefon rutscht er
   darunter und nimmt die volle Breite; nebeneinander waere beides zu
   schmal.
   -------------------------------------------------------------------------- */

.mx-aufruf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    text-align: left;
}

.mx-aufruf__text { flex: 1 1 420px; }
.mx-aufruf__text > :first-child { margin-top: 0; }
.mx-aufruf__text > :last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .mx-aufruf { flex-direction: column; align-items: stretch; }

    /* Und der Text gibt seine Grundhoehe wieder her. Ohne diese
       Zeile riss zwischen Text und Knopf am Telefon eine Luecke
       von rund vierhundert Pixeln auf, und der Knopf stand allein
       am unteren Rand des Bandes. Alex hat es am 2026-09-04 im
       Bild gemeldet.

       Die Ursache ist eine Falle von flexbox: Die 420 Pixel in
       flex: 1 1 420px sind keine Breite, sondern die Grundgroesse
       entlang der Hauptachse. In einer Zeile ist das die Breite
       und richtig; sobald flex-direction auf column steht, ist
       dieselbe Zahl eine Hoehe. Die Regel war also nie falsch --
       sie bedeutete in der zweiten Richtung etwas anderes. */
    .mx-aufruf__text { flex: 0 1 auto; }

    /* Der Knopf behaelt seine eigene Groesse und steht am linken
       Rand. Bis zum 2026-09-04 lief er hier ueber die volle
       Breite, mit der Begruendung, ein Tippziel von 120 Pixeln
       sei zu schmal. Das Argument stimmt fuer einen kleinen
       Knopf; es stimmt nicht fuer einen, der dadurch so breit
       wird wie ein Absatz. Alex hat beides im Bild gesehen und
       entschieden: kleiner und linksbuendig. Ein Knopf ueber die
       ganze Breite sieht aus wie eine Flaeche und nicht wie ein
       Weg. */
    .mx-aufruf .mx-knopf { width: auto; align-self: flex-start; }

    /* In der mittigen Fassung bleibt er in der Mitte, sonst
       stuende als einziges Element die Handlung aus der Achse. */
    .mx-aufruf.mx-aufruf--mitte .mx-knopf { align-self: center; }
}

/* Zwei weitere Fassungen, seit dem 2026-09-04 zur Auswahl.

   Zwei Klassen je Fassung und nicht eine: Sie stehen gegen
   Regeln derselben Staerke, und dann entschiede die Reihenfolge
   im Stylesheet. Dieselbe Ueberlegung wie bei den Knoepfen in
   den Textkarten. */

/* Mittig: Marke, Titel, Text und Weg auf einer Achse
   untereinander. Ruhiger als die Zeile, und in jeder
   Fensterbreite dasselbe Bild -- es gibt keinen Punkt, an dem
   die Anordnung umspringt. */
.mx-aufruf.mx-aufruf--mitte {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    text-align: center;
}

.mx-aufruf.mx-aufruf--mitte .mx-aufruf__text {
    flex: 0 1 auto;
    max-width: 62ch;
}

/* Kompakt: der Weg steht direkt unter dem Text, linksbuendig,
   mit wenig Luft. Fuer einen Hinweis, der ein Hinweis bleiben
   soll und kein eigener Abschnitt. */
.mx-aufruf.mx-aufruf--kompakt {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.mx-aufruf.mx-aufruf--kompakt .mx-aufruf__text {
    flex: 0 1 auto;
}


/* --- Knopf auf dunklem Grund ------------------------------------------------

   Im blauen Band ist der gewoehnliche Knopf blau auf Blau und damit
   unsichtbar. Auf dunklem Grund traegt deshalb die Akzentfarbe die
   Flaeche und das Dunkelblau die Schrift, wie auf der Homepage.

   Als Verweis zieht ihn das Theme sonst in die Textfarbe und
   unterstreicht ihn, weil im Fliesstext jeder Verweis so aussieht. Im
   Knopf ist das falsch: Er hat seine eigene Flaeche und braucht keine
   zweite Kennzeichnung. Am 2026-08-30 auf der Vergleichsseite
   aufgefallen, wo der Weg zur Lernplattform als blosser Link dastand.
   -------------------------------------------------------------------------- */

a.mx-knopf,
a.mx-knopf:hover,
a.mx-knopf:focus-visible { text-decoration: none; }

/* Auf blauem Grund derselbe Knopf wie auf hellem, nur mit
   getauschten Farben: rosa Umriss, weisse Schrift, keine Flaeche.
   Bis zum 2026-09-03 war er hier ausgefuellt, groesser gesetzt und
   mit Schlagschatten versehen; neben demselben Knopf in einem
   hellen Band sah er aus wie ein anderer Baustein. Alex hat beide
   nebeneinandergelegt und gesagt, sie sollen gleich aussehen und
   sich nur in der Farbe unterscheiden.

   Groesse und Polster kommen deshalb aus .mx-knopf und stehen hier
   nicht mehr: Zwei Orte fuer dieselbe Groesse laufen auseinander,
   sobald einer geaendert wird. */
.mx-band--blau .mx-knopf {
    background: transparent;
    border-color: var(--mx-akzent);
    color: #fff;
}

/* Beim Zeigen fuellt sich der Umriss. Das ist die Bewegung, die
   der helle Knopf auch macht, nur andersherum. */
.mx-band--blau .mx-knopf:hover,
.mx-band--blau .mx-knopf:focus-visible {
    background: var(--mx-akzent);
    border-color: var(--mx-akzent);
    color: var(--mx-primaer);
}


/* --- Hinweisband ------------------------------------------------------------

   Die Fassung des blauen Bandes fuer einen Aufruf: ein Verlauf statt einer
   Flaeche, ein Schimmer in der Akzentfarbe oben rechts, und deutlich
   weniger Polster als ein Leseabschnitt. Von der Homepage uebernommen.

   Getrennt von mx-band--blau, weil dort auch ganze Leseabschnitte stehen.
   Ein Hinweis ist kurz und laut, ein Abschnitt lang und ruhig; beide mit
   demselben Polster zu setzen laesst den Hinweis wie einen Abschnitt
   aussehen, den jemand vergessen hat zu fuellen.
   -------------------------------------------------------------------------- */

.mx-band--hinweis {
    position: relative;
    overflow: hidden;
    padding-top: 40px;
    padding-bottom: 40px;
    background: linear-gradient(120deg, var(--mx-primaer) 0%, var(--mx-sekundaer) 100%);
}

.mx-band--hinweis::before {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 320px;
    height: 320px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(242, 169, 169, .22), transparent 68%);
}

.mx-band--hinweis .mx-band__inhalt { position: relative; z-index: 2; }

/* Die Marke steht hier als volle Flaeche und nicht als Umriss: Ein
   duenner Rand verschwindet auf dunklem Grund. */
.mx-band--blau .mx-marke {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--mx-akzent);
    color: var(--mx-primaer);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Steht die Einleitung direkt unter einem mittigen Kopf, gehoert sie
   mit in die Mitte. Sonst haengt ein linksbuendiger Absatz unter einer
   zentrierten Ueberschrift, und der Abschnitt hat zwei Achsen. */
.mx-kopf--mitte + .mx-einleitung,
.mx-kopf--mitte .mx-einleitung {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Zwei Selektoren, weil es die Einleitung an zwei Orten gibt. Der
   Bestand schreibt sie als Geschwister hinter den Kopf; die Vorlage
   mx_vorlage_kopf setzt sie seit dem 2026-09-04 hinein, damit die
   Ausrichtung des Kopfes auch fuer sie gilt und nicht an einem
   vergessenen Nachbarn haengt. Beide Formen sind richtig, solange
   beide hier stehen. Faellt eine der beiden Zeilen weg, steht ein
   linksbuendiger Absatz unter einer zentrierten Ueberschrift -- der
   Abschnitt haette dann zwei Achsen, und es sieht nach Versehen aus,
   weil es eins waere. */


/* --- Feld -------------------------------------------------------------------

   Der Behaelter, der die Breite bestimmt, und wenn noetig auch die Hoehe.

   Seit dem 2026-08-30 laeuft die Seite ueber die volle Bildschirmbreite.
   Vorher lag die Lesebreite am Container der Seite, und jedes breitere
   Element musste mit negativen Raendern daraus ausbrechen. Dieser Ausbruch
   liegt bei sichtbarer Bildlaufleiste um deren Breite daneben, und ein
   Element ausserhalb eines Bandes blieb schmal, egal was es wollte. Genau
   das ist am selben Tag auf der Startseite passiert.

   Umgedreht ist es einfach: Die Seite hat keine Breite mehr, das Element
   sagt seine an. Ohne Zutun gilt die Lesebreite, dafuer sorgt das Theme.

   Die Werte stehen hier und nur hier. Wer eine Breite aendern will, aendert
   sie einmal; wer eine neue braucht, traegt sie hier ein und gibt ihr eine
   Fassung. Ein Wert in einer Regel weiter unten macht diese Liste wertlos.
   -------------------------------------------------------------------------- */

:root {
    /* Breiten. Die Leiter von schmal bis weit.

       Die Lesebreite ist am 2026-08-30 zweimal bewegt worden.

       Zuerst von 919 auf 580. 919 stammte aus dem Livesystem und war
       mit der Behauptung eingetragen, das ergebe bei 18 Pixeln Schrift
       70 bis 80 Zeichen je Zeile. Nachgemessen an den Metriken von
       Roboto und am echten Text der Startseite: ein Zeichen ist im
       Mittel 8,20 Pixel breit, 919 Pixel tragen also 112 Zeichen.
       Diese Zahl war falsch, und das bleibt sie.

       Dann von 580 auf 724. 580 waren 71 Zeichen und lagen sauber in
       der Spanne, die Bringhurst nennt (45 bis 75, 66 als bester
       Einzelwert; die WCAG nennt 80 als Obergrenze). Alex hat die
       Seite daraufhin angesehen und entschieden, dass ihm die Breite
       seiner Homepage besser gefaellt und dass sie ueberall fuer
       Fliesstext gelten soll. Nachgemessen an mathealex.de mit dem
       Browser: der Textabsatz dort ist 724 Pixel breit, in einem
       Behaelter von 780 mit je 28 Pixeln Polster.

       724 Pixel sind rund 88 Zeichen. Das steht ueber der Obergrenze
       der WCAG, und das ist hier bewusst so: Es ist eine Entscheidung
       von Alex fuer die Handschrift seiner Seite, nicht ein Versehen.
       Wer sie eines Tages umkehren will, findet hier die Zahlen dazu.

       Wer nachrechnen will: 60 Zeichen sind 492 Pixel, 66 sind 541,
       75 sind 615, 80 sind 656, 88 sind 724.

       mittel ist keine Lesebreite. Sie ist der Behaelter, in dem die
       Homepage ihren Fliesstext fuehrt: 780 aussen, 724 innen. */
    --mx-feld-schmal: 480px;
    --mx-feld-lese: 724px;
    --mx-feld-mittel: 780px;
    --mx-feld-gross: 920px;
    --mx-feld-breit: 1140px;
    --mx-feld-weit: 1440px;

    /* Seitliches Polster. Steht innen und macht die Breite nicht
       schmaler, deshalb wird es auf jede Breite aufgeschlagen. */
    --mx-feld-polster: 1.25rem;

    /* Hoehen. Voll fuer einen Auftakt ueber den ganzen Bildschirm, halb
       fuer einen Abschnitt, der auffallen soll, ohne alles zu fuellen.
       svh statt vh: Am Telefon zaehlt vh die Leiste des Browsers mit,
       und der Abschnitt ist dann hoeher als der Bildschirm. */
    --mx-feld-hoch: 100svh;
    --mx-feld-halb: 60svh;
}

.mx-feld {
    max-width: calc(var(--mx-feld-lese) + 2 * var(--mx-feld-polster));
    margin-inline: auto;
    padding-inline: var(--mx-feld-polster);
}

.mx-feld--schmal { max-width: calc(var(--mx-feld-schmal) + 2 * var(--mx-feld-polster)); }
.mx-feld--mittel { max-width: calc(var(--mx-feld-mittel) + 2 * var(--mx-feld-polster)); }

/* gross ist die Breite der Werkzeuge: Kurse, Trainer, Tutor, Leitstand,
   Baukasten, Profilseite. Sie werden bedient und nicht Zeile fuer Zeile
   gelesen, deshalb gilt fuer sie die Lesebreite nicht. 920 Pixel, weil
   die Plattform bis zum 2026-08-30 durchgehend so breit war und die
   Raster der Werkzeuge darauf eingerichtet sind. */
.mx-feld--gross  { max-width: calc(var(--mx-feld-gross)  + 2 * var(--mx-feld-polster)); }
.mx-feld--breit  { max-width: calc(var(--mx-feld-breit)  + 2 * var(--mx-feld-polster)); }
.mx-feld--weit   { max-width: calc(var(--mx-feld-weit)   + 2 * var(--mx-feld-polster)); }

/* Ohne Begrenzung, von Kante zu Kante. Das Polster faellt weg: Was die
   volle Breite will, will sie ganz. Wer darin Text hat, legt ein
   zweites Feld hinein -- so macht es das Band mit seinem Inhalt. */
.mx-feld--voll {
    max-width: none;
    padding-inline: 0;
}

/* Hoehe. Der Inhalt sitzt dann in der Mitte, sonst klebte er oben und
   die Hoehe waere nur leerer Raum darunter. */
.mx-feld--hoch,
.mx-feld--halb {
    display: grid;
    align-content: center;
}

.mx-feld--hoch { min-height: var(--mx-feld-hoch); }
.mx-feld--halb { min-height: var(--mx-feld-halb); }

@media (max-width: 600px) {
    :root { --mx-feld-polster: 1rem; }
}


/* --- Textkarten -------------------------------------------------------------

   Zwei oder drei Karten nebeneinander, in jeder ein Titel, ein kurzer Text
   und unten ein Weg, der das Ganze im Popup oeffnet.

   Der Grund fuer diesen Baustein ist die Lesebreite. Fliesstext gehoert auf
   580 Pixel, sonst laufen die Zeilen zu lang. Eine Seite, auf der nur solche
   Saeulen mittig untereinander stehen, sieht aber leer und schmal aus. Die
   Karte loest beides: Der Text darin ist ohnehin kurz, also stoert die
   schmale Spalte nicht, und zwei Karten nebeneinander fuellen die Breite.
   Alex' Vorgabe vom 2026-08-30.

   Der lange Text steht nicht auf der Seite, sondern im Popup. Was auf der
   Karte steht, muss allein verstaendlich sein: Wer nicht weiterliest, soll
   trotzdem wissen, worum es geht. Ein Anreisser, der ohne den Rest keinen
   Sinn ergibt, ist keiner.

   Verwandt mit der Themenkarte, aus der die Form stammt. Unterschied: Die
   Themenkarte traegt Aufzaehlungen und ist so lang wie ihr Inhalt, die
   Textkarte traegt einen Absatz und ist so hoch wie ihre Nachbarin.
   -------------------------------------------------------------------------- */

.mx-textkarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: stretch;
    gap: 1.5rem;
    margin: 1.8rem 0;
}

.mx-textkarte {
    display: flex;
    flex-direction: column;
    padding: 1.8rem 1.7rem;
    border-radius: var(--mx-radius-gross, 12px);
    background: var(--mx-karte, #fff);
    box-shadow: 0 2px 10px rgba(0, 37, 79, .06);
    color: var(--mx-text, #1a202c);
}

.mx-textkarte__titel {
    margin: 0 0 .7rem;
    font-size: 1.15rem;
    color: var(--mx-primaer, #00254F);
}

.mx-textkarte__text {
    margin: 0;
    color: var(--mx-text-mittel, #4a5568);
}

.mx-textkarte__text p:last-child { margin-bottom: 0; }

/* Der Weg sitzt unten und wird von oben weggedrueckt. Ohne das haenge er
   direkt am Text, und zwei Karten mit verschieden langem Text haetten ihn
   auf verschiedener Hoehe -- die Reihe saehe schief aus. */
.mx-textkarte__weg {
    margin-top: auto;
    padding-top: 1.2rem;
}

/* In einem blauen Band bleibt die Karte weiss: Sie ist die Flaeche, auf der
   gelesen wird, und nicht Teil des Grundes. */
.mx-band--blau .mx-textkarte { color: var(--mx-text, #1a202c); }
.mx-band--blau .mx-textkarte__titel { color: var(--mx-primaer, #00254F); }

/* Und ebenso der Knopf darin. Die Regel "Knopf auf dunklem Grund" weiter
   oben faerbt jeden Knopf im blauen Band weiss; in der Karte steht er aber
   auf Weiss und war damit unbeschriftet. Am 2026-09-04 von Alex im Bild
   gemeldet: zwei leere Pillen auf der Startseite des Trainers.

   Der Grund ist derselbe wie bei Text und Titel zwei Zeilen darueber, und
   dass die beiden schon dastanden und der Knopf nicht, ist der eigentliche
   Fund: Wer eine helle Flaeche in ein dunkles Band stellt, muss jede
   Farbregel des Bandes einzeln zuruecknehmen. Das ist die Schwaeche dieses
   Bauplans -- der Grund steht am Band und nicht am Baustein. Ein Umbau auf
   eine eigene Klasse am Knopf ist als eigener Schritt vorgemerkt.

   Drei Klassen und nicht zwei: Bei gleicher Staerke gewaenne die spaeter
   geschriebene Regel, und die steht in einem anderen Abschnitt dieser Datei.
   Eine Reihenfolge, die beim Verschieben eines Abschnitts kippt, ist keine
   Regel, sondern ein Zufall. */
.mx-band--blau .mx-textkarte .mx-knopf {
    background: var(--mx-primaer);
    border-color: var(--mx-primaer);
    color: var(--mx-karte);
}

.mx-band--blau .mx-textkarte .mx-knopf:hover,
.mx-band--blau .mx-textkarte .mx-knopf:focus-visible {
    background: var(--mx-akzent);
    border-color: var(--mx-akzent);
    color: var(--mx-text);
}

.mx-band--blau .mx-textkarte .mx-knopf--leise {
    background: transparent;
    border-color: var(--mx-akzent);
    color: var(--mx-primaer);
}

.mx-band--blau .mx-textkarte .mx-knopf--leise:hover,
.mx-band--blau .mx-textkarte .mx-knopf--leise:focus-visible {
    background: var(--mx-akzent-hell);
    border-color: var(--mx-akzent);
    color: var(--mx-primaer);
}


/* --- Arbeitsflaeche ---------------------------------------------------------

   Die Fassung eines Werkzeugs fuer den konzentrierten Modus: Es fuellt die
   Hoehe des Fensters, traegt seinen Namen klein im eigenen Kopf und daneben
   einen kleinen Weg hinaus.

   Alex' Vorgabe vom 2026-08-30. Der Gedanke dahinter: Wer eine Lektion
   rechnet, soll die Lektion sehen und sonst nichts. Die Menueleiste
   verschwindet, damit es nicht zwei Wege hinaus gibt.

   Die Fusszeile bleibt aber stehen. Sie soll das Gefuehl geben, weiterhin
   auf der Plattform zu sein; sichtbar ist sie beim Ankommen nicht, weil das
   Werkzeug die ganze Hoehe fuellt und sie darunter steht. Genau dafuer ist
   die Hoehe eine Mindest- und keine feste: Waechst der Inhalt, waechst die
   Flaeche, und die Fusszeile rutscht weiter nach unten statt in einen
   zweiten Rollbereich.

   svh und nicht vh: Am Telefon zaehlt vh die Leiste des Browsers mit, und
   die Flaeche waere hoeher als der Bildschirm.
   -------------------------------------------------------------------------- */

.mx-arbeitsflaeche {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-top: 1.2rem;
}

/* Die Werkzeugleiste von WordPress steht ueber der Seite und gehoert zum
   Fenster. Ohne diesen Abzug beginnt die Flaeche unter der Leiste, ist
   aber trotzdem einen ganzen Bildschirm hoch und endet damit genau um
   die Hoehe der Leiste unter dem unteren Rand -- das Ende des Werkzeugs
   liegt dann ausserhalb des Bildes. Am Telefon ist die Leiste hoeher als
   am Rechner; die Grenze 782 ist die von WordPress selbst.

   Schueler sehen die Leiste nicht. Der Abzug ist trotzdem noetig, weil
   sonst jede eigene Messung um diese Hoehe daneben liegt. */
body.admin-bar .mx-arbeitsflaeche { min-height: calc(100svh - 32px); }

@media screen and (max-width: 782px) {
    body.admin-bar .mx-arbeitsflaeche { min-height: calc(100svh - 46px); }
}

/* Am Telefon nicht bis zur Unterkante.
 *
 * Alex' Vorgabe vom 2026-08-30, nachdem der Modus dort ueberhaupt erst
 * andockte: Die Flaeche soll rund vier Fuenftel der Hoehe nehmen, und die
 * Knoepfe Weiter und Zurueck sollen etwa ein Siebtel ueber dem unteren
 * Rand liegen statt daran zu kleben.
 *
 * Das ist nicht nur Geschmack. Ganz unten am Bildschirm sitzt beim
 * Telefon die Leiste des Browsers -- bei Safari sogar die Adressleiste --
 * und ein Knopf direkt an der Kante wird beim Tippen leicht zu ihr. Der
 * Streifen darunter ist der Sicherheitsabstand.
 *
 * Als Polster und nicht als Hoehe: Die Flaeche bleibt damit einen
 * Bildschirm hoch, der Inhalt darin wird nur kuerzer. Waere es eine
 * Hoehe von 85svh, stuende die Fusszeile schon im Bild.
 */
@media screen and (max-width: 782px) {
    .mx-arbeitsflaeche { padding-bottom: 15svh; }
}

/* Der eigene Kopf: Name links, Weg rechts. Klein, weil er nicht die
   Ueberschrift der Arbeit ist, sondern nur sagt, worin man sich befindet. */
.mx-arbeitsflaeche__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.mx-arbeitsflaeche__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mx-text-mittel, #4a5568);
}

.mx-arbeitsflaeche__weg { flex: 0 0 auto; }

/* Der Inhalt nimmt den Rest. Ohne das saesse ein kurzes Werkzeug oben und
   die Flaeche waere darunter leer.

   Selbst wieder eine Spalte, und min-height auf null: Damit kann das
   Werkzeug darin sagen `flex: 1 1 auto` und bekommt genau die uebrige
   Hoehe, ohne sie selbst ausrechnen zu muessen. Vorher rechnete der
   Abi-Trainer sie mit 100vh minus einer geschaetzten Zahl aus. Das ging
   am Rechner knapp auf und am Telefon nicht: Dort zaehlt vh die Leiste
   des Browsers mit, und die Fusszeile der Karte mit dem Knopf Weiter lag
   unter dem Bildrand. Am 2026-08-30 von Alex am Telefon gemeldet.

   min-height: 0 ist die Stelle, an der es sonst scheitert: Ein Flex-Kind
   schrumpft von sich aus nicht unter seinen Inhalt, und dann waechst die
   Flaeche mit dem laengsten Schritt statt zu rollen. */
.mx-arbeitsflaeche__inhalt {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}


/* --- Kopfleiste einer Aussenseite -------------------------------------------

   Die Leiste der Homepage: durchsichtig ueber der Buehne, beim Rollen faerbt
   sie sich. Links die Wortmarke, rechts Kontakt und ein Schalter, der ein
   Menue ueber die ganze Flaeche oeffnet.

   Eigener Baustein und nicht die Leiste des Themes, seit dem 2026-09-04.
   Beide sind Koepfe, aber sie beantworten verschiedene Fragen: Die Leiste der
   Plattform fuehrt einen Angemeldeten zu seinen Werkzeugen, diese hier fuehrt
   einen Besucher durch eine Seite. Eine Leiste, die beides koennen soll, kann
   am Ende keines von beidem gut.

   Uebernommen aus stil.css der statischen Homepage, Werte unveraendert, nur
   die Farben ueber die Variablen des Kerns statt ueber eigene.
   -------------------------------------------------------------------------- */

:root {
    --mx-leiste-hoehe: 74px;
    --mx-leiste-hoehe-fest: 62px;
}

.mx-kopfleiste {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;

    /* Ueber die ganze Breite, ausdruecklich. Das Theme gibt jedem
       unmittelbaren Kind des Seitentextes die Lesebreite und
       zentriert es. Das gilt auch fuer ein fest gesetztes Element:
       Die Leiste wurde dadurch auf 919 Pixel geschrumpft und in
       die Mitte gerueckt, waehrend die Baender darunter ueber die
       ganze Breite liefen. Am 2026-09-04 von Alex im Bild
       gemeldet. Dieselbe Naht wie beim Popup, das aus demselben
       Grund in den Seitenfuss ausweicht -- nur laesst sich eine
       Leiste nicht verschieben, sie gehoert nach oben. */
    max-width: none;
    margin-inline: 0;
    display: flex;
    align-items: center;
    height: var(--mx-leiste-hoehe);
    background: transparent;
    transition: background .3s ease, box-shadow .3s ease, height .3s ease;
}

/* Beim Rollen bekommt sie einen Grund. Ohne das stuende die Wortmarke ab dem
   ersten hellen Abschnitt weiss auf Weiss. */
.mx-kopfleiste.mx-kopfleiste--fest {
    height: var(--mx-leiste-hoehe-fest);
    background: rgba(0, 37, 79, .96);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .18);
    backdrop-filter: blur(8px);
}

.mx-kopfleiste__innen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 0 26px;
}

.mx-wortmarke {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--mx-karte, #fff);
}

.mx-wortmarke span { color: var(--mx-akzent); }

.mx-kopfleiste__rechts {
    display: flex;
    align-items: center;
    gap: 22px;
}

.mx-kopfleiste__kontakt {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: var(--mx-klein-groesse, 16px);
}

.mx-kopfleiste__kontakt a {
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s, color .2s;
}

.mx-kopfleiste__kontakt a:hover,
.mx-kopfleiste__kontakt a:focus-visible {
    color: var(--mx-karte, #fff);
    border-bottom-color: var(--mx-akzent);
}

/* Der Schalter. Drei Striche, die sich beim Oeffnen zum Kreuz drehen -- das
   sagt ohne Wort, dass derselbe Knopf wieder schliesst. */
.mx-schalter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    cursor: pointer;
    transition: background .2s;
}

.mx-schalter:hover,
.mx-schalter:focus-visible { background: rgba(242, 169, 169, .28); }

.mx-schalter i {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--mx-karte, #fff);
    transition: transform .3s ease, opacity .2s ease;
}

.mx-schalter.mx-schalter--aktiv i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mx-schalter.mx-schalter--aktiv i:nth-child(2) { opacity: 0; }
.mx-schalter.mx-schalter--aktiv i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Das Menue liegt ueber der ganzen Flaeche. Verborgen ueber visibility und
   nicht ueber display: So laesst es sich ein- und ausblenden, und ein
   Vorleseprogramm ueberspringt es trotzdem. */
.mx-menue {
    position: fixed;
    inset: 0;
    z-index: 70;
    max-width: none;
    margin-inline: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 26, 58, .97);
    backdrop-filter: blur(6px);
    transition: opacity .3s ease, visibility .3s ease;
}

.mx-menue.mx-menue--offen { opacity: 1; visibility: visible; }

.mx-menue ul { margin: 0; padding: 0; list-style: none; text-align: center; }
.mx-menue li { margin: 20px 0; }

.mx-menue a {
    position: relative;
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 600;
    text-decoration: none;
    color: var(--mx-karte, #fff);
    transition: color .2s;
}

.mx-menue a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--mx-akzent);
    transform: translateX(-50%);
    transition: width .28s ease;
}

.mx-menue a:hover,
.mx-menue a:focus-visible { color: var(--mx-akzent); }
.mx-menue a:hover::after,
.mx-menue a:focus-visible::after { width: 100%; }

/* Am Telefon fallen Telefonnummer und Adresse aus der Leiste. Sie stehen im
   Menue und im Fuss weiterhin; in einer 360 Pixel breiten Leiste stuenden sie
   neben der Wortmarke und dem Schalter auf drei Zeichen zusammengedrueckt. */
@media (max-width: 700px) {
    .mx-kopfleiste__kontakt { display: none; }
    .mx-kopfleiste__innen { padding: 0 18px; }
    .mx-wortmarke { font-size: 18px; }
}

@media (max-width: 380px) {
    .mx-wortmarke { font-size: 16px; }
    .mx-schalter { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .mx-kopfleiste,
    .mx-schalter,
    .mx-schalter i,
    .mx-menue,
    .mx-menue a::after { transition: none; }
}


/* --- Einblenden beim Rollen -------------------------------------------------

   Ein Abschnitt steigt beim Erscheinen leicht auf und wird sichtbar. Seit
   dem 2026-09-04, uebernommen von der frueheren Homepage, wo es in
   skript.js mit einem IntersectionObserver gemacht war.

   Hier ohne eine Zeile JavaScript: animation-timeline: view() bindet die
   Animation an die Lage des Elements im Sichtfenster. Der Browser rechnet
   das selbst, es laeuft in einem eigenen Strang und ruckelt nicht, wenn
   die Seite gerade beschaeftigt ist.

   Zwei Schranken davor, und beide sind der eigentliche Punkt:

   1. @supports. Wer animation-timeline nicht kennt -- heute Safari und
      Firefox -- bekommt die Regeln gar nicht erst. Dort ist alles
      sichtbar und steht still. Kein Einblenden ist kein Fehler; ein
      Abschnitt, der unsichtbar bleibt, waere einer.

   2. prefers-reduced-motion. Wer im Betriebssystem Bewegung abgestellt
      hat, hat einen Grund dafuer. Bei Schwindel oder Migraene ist eine
      aufsteigende Flaeche keine Spielerei, sondern ein Symptom.

   Ohne JavaScript ist das auch deshalb richtig, weil die Umkehrung
   gefaehrlich waere: Wer Elemente im CSS versteckt und per Skript
   einblendet, hat eine leere Seite, sobald das Skript ausfaellt.

   Bewusst nur die Baender und die Medienbloecke, nicht jede einzelne
   Karte. Ein Abschnitt, der als Ganzes kommt, wirkt ruhig; zwanzig
   Teile, die einzeln aufpoppen, wirken unruhig.

   Die Buehne bleibt aussen vor: Sie ist das Erste, was jemand sieht, und
   soll sofort dastehen.
   -------------------------------------------------------------------------- */

@keyframes mx-auf {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

/* HIER STAND DER VERSUCH, UND ER IST DURCHGEFALLEN.

   Am 2026-09-04 gebaut, gemessen und wieder herausgenommen:

       @supports (animation-timeline: view()) {
           .mx-band, .mx-medien {
               animation: mx-auf linear both;
               animation-timeline: view();
               animation-range: entry 5% cover 22%;
           }
       }

   Ein Bildschirmfoto der ganzen Seite zeigte alles unterhalb des
   ersten Bildschirms **weiss**. Der Grund ist die Rolluhr selbst: Sie
   laeuft nur, wenn tatsaechlich gerollt wird. Wo nicht gerollt wird --
   bei einer Ganzseitenaufnahme, beim Drucken, in einer eingebetteten
   Ansicht ohne eigenen Rollbereich -- bleibt jedes Element auf dem
   ersten Bild der Animation stehen, und das ist opacity 0.

   Mit fill-mode both ist das kein Fehler des Browsers, sondern die
   verabredete Wirkung. Genau deshalb ist es die gefaehrliche Sorte:
   kein Fehler in der Konsole, kein roter Lauf, nur eine leere Seite.
   Aufgefallen ist es an einer Datei von 573 Byte, wo eine von 180 KB
   stehen sollte.

   Was stattdessen traegt: der IntersectionObserver, den die frueher
   Homepage in skript.js hat. Er blendet ein, was tatsaechlich
   erscheint, und laesst alles andere sichtbar. Der Weg ist offen und
   nicht verworfen -- er braucht nur fuenfzehn Zeilen JavaScript, und
   die Reihenfolge muss stimmen: erst sichtbar, dann darf das Skript
   verstecken.

   Das keyframes darueber bleibt stehen; es kostet nichts und wird
   dann gebraucht. */