/*
 * 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: 919px;

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

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

   Bewusst schlicht: ein Grund, eine weisse Flaeche, ein Kreuz
   in der Ecke. Keine Kopfleiste und keine Trennlinie. Wer eine
   Ueberschrift braucht, schreibt sie in den Inhalt; sie ist
   dann Teil des Textes und nicht ein zweites Geruest.

   Verborgen ueber hidden am Grund, nicht ueber display im
   Stylesheet: So kann ein Werkzeug es oeffnen, ohne diese
   Datei zu kennen.

   Es gibt genau eine Fassung. Die Rueckfrage vor dem
   Schliessen ist keine zweite, sondern nur ein Merkmal an
   diesem einen Fenster. Wird hier etwas geaendert, etwa die
   Lage des Kreuzes, gilt es damit ueberall. Entschieden mit
   Alex am 2026-08-25; die frueher angedockte Fassung fuer das
   Telefon ist dabei entfallen.
   ============================================================ */

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

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

.mx-popup__fenster {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--mx-lesebreite, 919px);
    max-height: 85vh;
    background: var(--mx-karte);
    border: 2px solid var(--mx-primaer);
    border-radius: var(--mx-radius-gross, 12px);
}

/* Der Inhalt rollt, das Fenster nicht. Rechts bleibt Platz,
   damit die erste Zeile nicht unter dem Kreuz beginnt. */
.mx-popup__inhalt {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.4rem 1.5rem;
    padding-right: 4.5rem;
}

/* Eine Ueberschrift im Inhalt, falls das Werkzeug eine will. */
.mx-popup__inhalt > :first-child {
    margin-top: 0;
}

/* Das Kreuz. Sitzt in der Ecke des Fensters, nicht in einer
   Leiste. Es liegt ueber dem Inhalt und bleibt beim Rollen
   stehen, weil es am Fenster haengt und nicht am Inhalt.

   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 {
    position: absolute;
    top: 0.55rem;
    right: 1.5rem;
    z-index: 1;
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border: 0;
    border-radius: 50%;
    background: var(--mx-flaeche);
    color: var(--mx-primaer);
}

.mx-popup__zu:hover,
.mx-popup__zu:focus-visible {
    background: var(--mx-primaer);
    color: var(--mx-karte);
}

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

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

.mx-kopf__marke {
    display: inline-block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mx-akzent);
}

.mx-kopf__titel {
    margin: 0 0 10px;
    font-size: 34px;
    line-height: 1.2;
}

.mx-kopf__titel:after {
    content: "";
    display: block;
    width: 48px;
    height: 11px;
    margin-top: 12px;
    background-image: linear-gradient(
        to bottom,
        var(--mx-akzent) 0 3px,
        transparent 3px 8px,
        var(--mx-akzent) 8px 11px
    );
}

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

.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: 24px;
}

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

/* Am Telefon ist der grosse Titel zu breit fuer eine Zeile. */
@media (max-width: 600px) {
    .mx-kopf__titel {
        font-size: 28px;
    }
}

/* ============================================================
   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;
    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;
    border: 1px 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;
}

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

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

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 2px 10px rgba(0, 37, 79, 0.08);
}

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