/* Schrift: Roboto, vom eigenen Server.

   Die ganze Plattform laeuft in einer Familie. Die Dateien liegen in
   assets/schriften und werden mitgeliefert; von Google geholt wuerden
   sie eine Verbindung nach draussen bedeuten, die durch die
   Einwilligung muesste. Lizenz Apache 2.0, siehe LIZENZ.txt daneben.

   Vier Schnitte reichen: Normal, Kursiv, Halbfett fuer Hervorhebungen
   und Fett fuer Ueberschriften. Zwei Bereiche je Schnitt, damit ein
   Browser den kleineren laedt, solange kein Sonderzeichen vorkommt.
   font-display: swap, damit der Text sofort steht. */

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("schriften/roboto-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("schriften/roboto-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("schriften/roboto-latin-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("schriften/roboto-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("schriften/roboto-latin-ext-500-normal.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("schriften/roboto-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("schriften/roboto-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Die gesamte Gestaltung des Themes.
 *
 * Eine Datei, kein Build-Schritt, keine Voruebersetzung. Wer
 * etwas aendert, aendert es hier und laedt neu.
 *
 * Farben kommen ausnahmslos ueber var(--mx-...) aus farben.css
 * im Lernkern. Die Rueckfallwerte sind wortgleich mit denen des
 * Kerns, damit ein Ladefehler nicht durch eine abweichende
 * Farbe verdeckt wird -- genau dieser Mangel steht als A1 im
 * Befund der Architektur.
 *
 * Breiten und Schriften kommen ueber var(--mat-...) aus
 * config.php, eingesetzt von inc/dateien.php.
 */

/* ==========================================================
   Grundlage
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--mx-karte);
    color: var(--mx-text);
    font-family: var(--mat-schrift-text, sans-serif);
    font-size: 18px;
    line-height: 1.65;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--mx-primaer); }
a:hover, a:focus-visible { color: var(--mx-sekundaer); }

:focus-visible {
    outline: 2px solid var(--mx-primaer);
    outline-offset: 2px;
}

h1, h2, h3, h4 {
    color: var(--mx-primaer);
    line-height: 1.25;
    margin: 2rem 0 .6rem;
    text-wrap: balance;
}
h1 { font-size: 2rem; margin-top: 0; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }

p, ul, ol { margin: 0 0 1rem; }

code, pre { font-family: var(--mat-schrift-fest, monospace); }

/* Nur fuer Vorleseprogramme sichtbar. */
.nur-vorlesen {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
}

.sprung {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: .7rem 1.1rem;
    background: var(--mx-karte);
    border: 1px solid var(--mx-primaer);
}
.sprung:focus { left: 1rem; top: 1rem; }

/* Die Bahn ist der Lesebereich. 919 Pixel ergeben bei 18 Pixeln
   Schrift etwa 70 bis 80 Zeichen je Zeile; so festgelegt am
   2026-08-23 und hier uebernommen. */
.bahn {
    max-width: none;
    margin: 0;
    padding: 2.5rem 0 4rem;
}

/* Macht ein Werkzeug den Kopf selbst, ist die Seite von oben bis unten
   aus Baendern gebaut, und die bringen ihr Polster selbst mit. Die
   Polster der Bahn stuenden dann als weisse Streifen dazwischen:
   oben zwischen Menue und erstem Band, unten zwischen letztem Band und
   Fusszeile. Beide hat Alex am 2026-08-30 im Bild gemeldet, den
   unteren, nachdem der obere weg war.

   Der obere Rand der Fusszeile faellt aus demselben Grund weg. Er ist
   dafuer da, eine Fusszeile von einem Text abzusetzen; von einem Band,
   das seine eigenen 96 Pixel Polster hat, muss sie nicht abgesetzt
   werden. */
.mat-eigener-kopf .bahn { padding-top: 0; padding-bottom: 0; }
.mat-eigener-kopf .fuss { margin-top: 0; }

/* Die Voreinstellung bleibt die Lesebreite. Jedes unmittelbare Kind des
   Textes bekommt sie, ohne dass eine Seite etwas dafuer tun muss; ein
   Baustein, der breiter sein will, sagt es selbst.

   Geschrieben mit :where, damit die Regel keine Staerke hat und jede
   einzelne Klasse sie schlaegt. Ohne das entschiede die Reihenfolge der
   Stylesheets, und app.css laedt zuletzt -- ein Baustein aus dem Kern
   kaeme dagegen nicht an.

   Die 2.5rem sind das doppelte seitliche Polster. Es steht innen und
   darf die Lesebreite nicht schmaeler machen. */
.seitenkopf,
:where(.text) > * {
    max-width: min(var(--mx-feld-lese, var(--mat-breite-inhalt, 919px)), 100% - 2.5rem);
}

/* Die Mitte steht in einer zweiten Regel und mit Klassenstaerke.

   Grund, am 2026-08-30 teuer gelernt: :where hat keine Staerke, und
   damit schlaegt schon ein nackter Elementname sie. Weiter oben steht
   `p, ul, ol { margin: 0 0 1rem }`. Diese Kurzform setzt auch den
   seitlichen Rand und hat ihn wieder auf null gezogen -- der ganze Text
   klebte links, waehrend der Seitenkopf mittig stand.

   Die Breite bleibt bewusst ohne Staerke, damit jeder Baustein sie
   ueberschreiben kann. Die Mitte darf Staerke haben: Ein Baustein ohne
   Breitenbegrenzung nimmt ohnehin die ganze Breite, und dann bewirkt
   ein automatischer Rand nichts. */
.seitenkopf,
.inhalt .bahn .text > * {
    margin-inline: auto;
}

/* ==========================================================
   Knoepfe
   ========================================================== */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem 1.2rem;
    border: 1px solid var(--mx-primaer);
    border-radius: var(--mx-radius, 8px);
    background: var(--mx-primaer);
    color: var(--mx-karte);
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
.knopf:hover, .knopf:focus-visible {
    background: var(--mx-sekundaer);
    border-color: var(--mx-sekundaer);
    color: var(--mx-karte);
}
.knopf--rand {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}
.knopf--rand:hover, .knopf--rand:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: inherit;
}

/* ==========================================================
   Kopfzeile
   ========================================================== */

.kopf {
    background: var(--mx-primaer);
    color: var(--mx-karte);
}
.kopf__innen {
    max-width: var(--mat-breite-breit, 1690px);
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.marke {
    display: inline-flex;
    align-items: center;
    color: var(--mx-karte);
    text-decoration: none;
    flex: 0 0 auto;
}
.marke img { max-height: 56px; width: auto; }
.marke__name { font-weight: 700; font-size: 1.05rem; }
/* Die Wortmarke faerbt sich beim Ueberfahren rosa, wie jeder
   andere Weg in dieser Leiste auch.

   Ohne diese Regel greift die allgemeine fuer Verweise weiter
   oben, und die setzt mx-sekundaer: ein Dunkelblau, das auf dem
   dunkelblauen Band der Kopfleiste praktisch verschwindet. Der
   Text war beim Ueberfahren nicht falsch gefaerbt, sondern nicht
   mehr zu sehen. Alex' Ansage vom 2026-09-05. */
.marke:hover,
.marke:focus-visible { color: var(--mx-akzent); }

.hauptmenue { flex: 1; }
.hauptmenue__liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hauptmenue__liste a {
    color: var(--mx-karte);
    text-decoration: none;
    font-size: .98rem;
}
.hauptmenue__liste a:hover,
.hauptmenue__liste a:focus-visible,
.hauptmenue__liste .current-menu-item > a {
    color: var(--mx-akzent);
}

.kopf__rechts {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}
/* Kreis und Anrede gehoeren zusammen und stehen mittig
   zueinander. Eigene Gruppe, damit am Telefon nur der Text
   weichen kann und der Kreis stehen bleibt. */
.kopf__anrede {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}
.kopf__gruss { font-size: .9rem; opacity: .85; }

/* Gruss und Profilknopf stehen untereinander, der Kreis bleibt
   links daneben. Eigene Gruppe, damit am Telefon nur der Gruss
   weichen kann und der Knopf stehen bleibt: Er ist der einzige
   Weg ins Profil, seit die Seite ein Fenster geworden ist. */
.kopf__person {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    min-width: 0;
}

/* Der Knopf traegt seit P34 nur noch die drei Striche; das Wort steht
   allein fuer Vorleseprogramme in header.php. Damit wird er quadratisch
   und bekommt 44 Pixel, die Untergrenze fuer ein Tippziel. */
.kopf__schalter {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: .45rem;
    border: 1px solid currentColor;
    border-radius: var(--mx-radius, 8px);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

/* ==========================================================
   Seitenkopf mit Doppelstrich
   ==========================================================
   Die Handschrift der Plattform: kleine Oberzeile in Rosa,
   Titel, darunter ein doppelter Strich. Bisher lag sie in
   ap_stil() von alex-plattform; dort bleibt sie fuer die
   Bausteine des Plugins, hier gilt sie fuer die Vorlagen des
   Themes. */

/* Der seitliche Rand steht oben bei der Bahn und bleibt hier auf auto:
   Seit dem 2026-08-30 laeuft die Bahn ueber die volle Breite, und der
   Kopf muesste sonst am linken Bildschirmrand kleben. */
.seitenkopf { margin: 0 auto 2.2rem; }
.seitenkopf__ober {
    margin: 0 0 .4rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mx-akzent);
}
.seitenkopf__titel { margin: 0 0 .3rem; }
.seitenkopf__unter {
    margin: 0;
    padding-bottom: 1rem;
    font-size: .95rem;
    color: var(--mx-text-mittel);
}
/* 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.

   Zwei Verlaeufe in einem Element und nicht zwei Elemente: Ein
   Pseudo-Element kann kein zweites tragen. Dieselbe Fassung steht
   in bausteine.css am Kopf eines Bausteins; sie muessen gleich
   aussehen, deshalb stehen beide Male dieselben Werte. */
.seitenkopf__unter::after {
    content: "";
    display: block;
    width: 78px;
    height: 12px;
    margin-top: 1rem;
    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;
}

/* ==========================================================
   Inhalt, Listen, Karten
   ========================================================== */

.text > *:first-child { margin-top: 0; }

.beitragsbild { margin: 0 0 1.6rem; }
.beitragsbild img { border-radius: var(--mx-radius, 8px); }

.liste { display: flex; flex-direction: column; gap: 1.5rem; }

.karte {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    align-items: start;
    padding: 1.6rem 1.8rem;
    border: 1px solid var(--mx-rahmen);
    border-radius: var(--mx-radius-gross, 12px);
    background: var(--mx-karte);
    transition: border-color .15s;
}
.karte:hover { border-color: var(--mx-primaer); }
.karte__bild img { border-radius: var(--mx-radius, 8px); display: block; }
.karte__titel { margin: 0 0 .6rem; font-size: 1.2rem; }
.karte__titel a { text-decoration: none; }
.karte__text { margin: 0; color: var(--mx-text-mittel); }

.leer {
    padding: 1.6rem 1.3rem;
    border-radius: var(--mx-radius, 8px);
    background: var(--mx-flaeche);
    text-align: center;
}

.blaettern { margin-top: 2.5rem; }
.blaettern .nav-links { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.blaettern .page-numbers {
    padding: .4rem .8rem;
    border: 1px solid var(--mx-rahmen);
    border-radius: var(--mx-radius-klein, 6px);
    text-decoration: none;
}
.blaettern .page-numbers.current {
    background: var(--mx-primaer);
    border-color: var(--mx-primaer);
    color: var(--mx-karte);
}

/* ==========================================================
   Suche
   ========================================================== */

.suchbereich { margin: 1.5rem 0; }
.suche { display: flex; gap: .6rem; flex-wrap: wrap; }
.suche__feld { flex: 1 1 14rem; }
.suche input[type="search"] {
    width: 100%;
    padding: .55rem .8rem;
    border: 1px solid var(--mx-rahmen);
    border-radius: var(--mx-radius, 8px);
    font: inherit;
}

/* ==========================================================
   Fusszeile
   ========================================================== */

.fuss {
    background: var(--mx-primaer);
    color: var(--mx-karte);
    margin-top: 4rem;
}
/* Das untere Polster macht Platz fuer den schwebenden Knopf der
   Hilfeanfrage. Der schwebt und nimmt im Fluss keinen Platz ein; ohne
   diesen Aufschlag landet er am Ende der Seite auf der letzten Zeile
   und verdeckt die Verweise auf Impressum und Datenschutz. Am
   2026-08-30 auf sechs Seiten und in beiden Breiten gemessen (P46).

   Wie viel Platz er braucht, sagt er selbst: alex-plattform setzt
   --ap-kontakt-platz, weil dort auch seine Groesse steht. Der
   Rueckfall auf 0 gilt, wenn es das Plugin nicht gibt -- dann gibt es
   auch keinen Knopf. */
/* 1140 Pixel und mittig, nachgemessen an mathealex.de: Dort ist der
   Behaelter der Fusszeile genau so breit, mit 28 Pixeln Polster innen,
   also 1084 fuer die drei Spalten.

   Vorher stand hier die breiteste Breite des Themes, 1690. Auf einem
   grossen Bildschirm zog das die drei Spalten so weit auseinander, dass
   zwischen ihnen mehr Leere stand als Text darin. Alex am 2026-08-30:
   "Das ist so weit links, das waere besser, wenn das etwas schoener
   mittig verteilt waere." Eine Fusszeile ist eine Zusammenfassung; sie
   soll als ein Block lesbar sein und nicht als drei entfernte Inseln.

   Der Grund laeuft weiterhin von Kante zu Kante -- begrenzt ist nur der
   Inhalt, wie bei einem Band. */
.fuss__innen {
    max-width: var(--mx-feld-breit, 1140px);
    margin: 0 auto;
    padding: 3rem 28px calc(2.5rem + var(--ap-kontakt-platz, 0px));
}
/* Drei Spalten und darunter eine Zeile, uebernommen von mathealex.de
   am 2026-08-30. Vorher stand hier alles mittig untereinander. Die
   Homepage hat auch dort die ruhigere Loesung: Wer eine Fusszeile
   ueberfliegt, sucht in Spalten und nicht in einer Reihe.

   auto-fit statt drei festen Spalten, damit die Zeile am Telefon von
   selbst untereinander faellt. */
.fuss__oben {
    display: grid;
    /* Drei gleiche Spalten wie auf der Homepage, dort je 320 Pixel breit.
       Unter 700 Pixeln Innenbreite fallen sie untereinander; auto-fit
       macht das von selbst und braucht dafuer keine eigene Abfrage. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    text-align: left;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.fuss__spalte { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.fuss__spalte--marke { gap: .75rem; }

.fuss__marke {
    color: var(--mx-karte);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 1px;
    white-space: nowrap;
    text-decoration: none;
}

/* Die Endung nach dem Punkt, rosa wie oben in der Kopfleiste. Das
   span setzt mx_wortmarke_teilen(). */
.fuss__marke span { color: var(--mx-akzent); }

.fuss__satz { margin: 0; max-width: 320px; font-size: .92rem; opacity: .85; }

/* Der Zugang. Der einzige Unterschied zur Fusszeile der Homepage --
   die kennt kein Konto. */
.fuss__zugang {
    margin: .25rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem;
    font-size: .9rem;
}
.fuss__wer { opacity: .75; }
.fuss__weg { color: var(--mx-akzent); text-decoration: none; font-weight: 600; }
.fuss__weg:hover,
.fuss__weg:focus-visible { color: var(--mx-karte); text-decoration: underline; }

.fuss__ueber {
    margin: 0 0 .2rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mx-akzent);
}

.fussmenue__liste {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fussmenue__liste a,
.fuss__spalte > a { color: var(--mx-karte); text-decoration: none; font-size: .92rem; opacity: .9; }
.fussmenue__liste a:hover,
.fussmenue__liste a:focus-visible,
.fuss__spalte > a:hover,
.fuss__spalte > a:focus-visible { color: var(--mx-akzent); opacity: 1; }

.fuss__zeile {
    margin: 1.75rem 0 0;
    font-size: .85rem;
    opacity: .7;
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}
.fuss__zeile a { color: var(--mx-karte); }

/* ==========================================================
   Tablet und Telefon
   ========================================================== */

@media (max-width: 900px) {
    .kopf__innen { flex-wrap: wrap; gap: 1rem; }
    /* Zwei Zeilen mit klarer Aufgabe. Oben allein der Name der Plattform,
       unten die Bedienung: Menue ganz links, daneben Kreis mit Profil und
       Logout.

       Der Name bekommt dafuer die volle Breite, sonst zoege der Menueknopf
       neben ihn nach oben und die untere Zeile stuende halb leer. Bis P34
       stand der Knopf rechts aussen; die Zeile las sich dadurch von hinten. */
    .marke { flex: 1 0 100%; }
    .kopf__schalter { display: inline-flex; order: 1; }

    /* Die Bedienung rueckt nach rechts, und Abmelden steht ganz aussen.
       Alex' Ansage vom 2026-08-30: "Die Knoepfe ungefaehr gleich gross
       nebeneinander, und der Logout ganz rechts."

       Seine Reihenfolge war Profil, dann der Kreis, dann Logout. Hier
       steht der Kreis stattdessen im Profil-Knopf, und zwar aus einem
       Grund: Kreis und Wort sagen dasselbe -- wer du bist. Dazwischen
       gehoert kein Abstand, und getrennt sehen sie aus wie zwei Dinge,
       von denen man eines waehlen muesste. Zusammen sind es zwei
       Knoepfe gleicher Hoehe nebeneinander, und das war der Wunsch.

       Umgesetzt allein im Stylesheet: Der Kreis und der Knopf stehen im
       Markup ohnehin nebeneinander in kopf__anrede. Die Umrandung
       wandert vom Knopf auf die Klammer, und fertig ist ein Element. */
    .kopf__rechts { order: 2; margin-left: auto; gap: .6rem; }

    /* 44 Pixel, dieselbe Hoehe wie der Menueknopf links. Das ist
       zugleich die Groesse, die ein Finger sicher trifft. */
    .kopf__anrede {
        height: 44px;
        gap: .45rem;
        padding: 0 0 0 .25rem;
        border: 1px solid rgba(255, 255, 255, .55);
        border-radius: 999px;
    }
    .kopf__anrede:hover,
    .kopf__anrede:focus-within { background: rgba(255, 255, 255, .12); }

    /* Der Knopf gibt seinen eigenen Rahmen ab; die Klammer traegt ihn
       jetzt. Ohne das stuenden zwei Rahmen ineinander.

       Er fuellt die Klammer der Hoehe nach ganz aus. Sonst ist das
       Tippziel nur so hoch wie seine Schrift -- am 2026-08-30 gemessen:
       20 Pixel in einer 40 Pixel hohen Klammer. Das sieht richtig aus
       und trifft sich falsch. */
    /* Der Gruss faellt hier schon weg und nicht erst bei 600. Die
       Klammer ist eine Zeile hoch; ein Gruss darueber braeuchte zwei
       und liesse sie ueberlaufen. Am 2026-08-30 bei 768 gemessen. */
    .kopf__gruss { display: none; }

    /* Zwischen der Klammer und dem Knopf steht kopf__person -- der
       Knopf ist ein Enkel und kein Kind. align-self am Knopf allein
       bewirkt deshalb nichts; gestreckt werden muss die Zwischenlage
       mit. Am 2026-08-30 gemessen: 20 Pixel hoher Knopf in einer
       44 Pixel hohen Klammer, obwohl stretch dastand. */
    .kopf__anrede .kopf__person {
        align-self: stretch;
        justify-content: center;
    }

    .kopf__anrede .apr-profil-knopf {
        flex: 1 1 auto;
        display: inline-flex;
        align-items: center;
        border: 0;
        padding: 0 .85rem 0 0;
        font-size: .9rem;
        opacity: 1;
        background: transparent;
    }
    .kopf__anrede .apr-profil-knopf:hover,
    .kopf__anrede .apr-profil-knopf:focus-visible { background: transparent; }

    /* Gleiche Hoehe wie die Klammer daneben. Ein Knopf, der sich nach
       seinem Text richtet, ist zufaellig hoch. */
    .kopf__rechts .knopf--rand {
        height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .hauptmenue {
        order: 4;
        flex: 1 0 100%;
        display: none;
    }
    .hauptmenue.ist-auf { display: block; }
    .hauptmenue__liste {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .hauptmenue__liste li { width: 100%; }
    .hauptmenue__liste a {
        display: block;
        padding: .7rem 0;
        border-top: 1px solid rgba(255, 255, 255, .18);
    }

    .karte { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.4rem; }
}

@media (max-width: 600px) {
    body { font-size: 17px; }
    h1, .seitenkopf__titel { font-size: 1.6rem; }
    .bahn { padding: 1.75rem 0 3rem; }
    .seitenkopf,
    :where(.text) > * { max-width: min(var(--mx-feld-lese, 919px), 100% - 2rem); }
    /* Am Telefon weicht der Text, der Kreis bleibt. Er ist
       schmal und sagt allein schon, wer angemeldet ist.

       Der Abstand stand bis P34 auf null. Das war richtig, solange in
       kopf__person nur der Gruss stand: Faellt der weg, bliebe ein Abstand
       zu einem leeren Kasten. Seit P26 steht dort ausserdem der Knopf zum
       Profilfenster, und der klebte dadurch am Kreis. Am 2026-08-29
       gemessen: genau null Pixel, waehrend jede andere Luecke der Zeile
       sechzehn trug. */
    .kopf__gruss { display: none; }
    .kopf__anrede { gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}


/* Abschnittsueberschriften im Fliesstext.

   Linksbuendig und mit einem Balken davor, in der Akzentfarbe. Eine
   mittige Ueberschrift ueber linksbuendigem Text bricht die Leselinie;
   der Balken fuehrt das Auge stattdessen an den Zeilenanfang zurueck.
   Die Regel steht in 00_SEITENREGELN.md (06_Plattform/09_Gestaltung).

   Nur Ueberschriften aus dem Seiteninhalt, nicht die der Plugins: Die
   bringen ihren eigenen Kopf samt Doppelstrich mit, und ein zweiter
   Balken davor hat den Kopf des Abi-Trainers am 2026-08-30 verzogen. */
.text > h2,
.text > h3,
.text h2.wp-block-heading,
.text h3.wp-block-heading {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    text-align: left;
}
.text > h2::before,
.text > h3::before,
.text h2.wp-block-heading::before,
.text h3.wp-block-heading::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    align-self: stretch;
    min-height: 1em;
    border-radius: 3px;
    background: var(--mx-akzent, #F2A9A9);
}
.text > h3::before,
.text h3.wp-block-heading::before { width: 4px; }

/* Rechtlicher Hinweis, etwa die Grundlage einer Verarbeitung.

   Steht in einem eigenen Kasten mit weichen Ecken, damit er sich vom
   Fliesstext loest, ohne ihn zu unterbrechen. Kein Ausrufezeichen und
   keine Warnfarbe: Es ist eine Angabe, keine Warnung. */
.text .rechtsgrundlage {
    position: relative;
    margin: 1.2rem 0;
    padding: 1rem 1.1rem .9rem;
    border: 1px solid var(--mx-akzent, #F2A9A9);
    border-radius: 12px;
    background: rgba(242, 169, 169, .10);
    font-size: .95rem;
}
.text .rechtsgrundlage::before {
    content: "Rechtsgrundlage";
    display: block;
    margin-bottom: .35rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mx-primaer);
}


/* ==========================================================
   Konzentrierter Modus

   Waehrend im Trainer oder im Tutor gearbeitet wird, traegt der
   Rumpf die Klasse mx-konzentriert. Sie kommt aus dem Kern; welche
   Ansicht gerade laeuft, weiss das Theme nicht und soll es nicht
   wissen.

   Hier verschwindet, was dem Theme gehoert: die Menueleiste und der
   grosse Seitenkopf. Die Fusszeile bleibt ausdruecklich stehen. Sie
   soll das Gefuehl geben, weiterhin auf der Plattform zu sein, und
   ist beim Ankommen trotzdem nicht zu sehen, weil das Werkzeug die
   Hoehe des Fensters fuellt.

   Alex' Vorgabe vom 2026-08-30, siehe P45 in vorhaben.json.
   ========================================================== */

/* Die Menueleiste steht hier nicht: Sie entsteht im konzentrierten
   Modus gar nicht erst, siehe header.php. Eine Regel dafuer waere eine
   zweite Zustaendigkeit fuer dieselbe Sache. */
.mx-konzentriert .seitenkopf { display: none; }

/* Das Polster oben faellt weg: Das Werkzeug bringt seines mit, und
   zwei uebereinander schoeben die Arbeit unnoetig nach unten. */
.mx-konzentriert .bahn { padding-top: 0; }