/*
 * 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: var(--mat-breite-inhalt, 919px);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

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

.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. */

.seitenkopf { margin: 0 0 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);
}
.seitenkopf__unter::after {
    content: "";
    display: block;
    width: 48px;
    height: 11px;
    margin-top: 1rem;
    background-image: linear-gradient(
        to bottom,
        var(--mx-akzent) 0 3px,
        transparent 3px 8px,
        var(--mx-akzent) 8px 11px
    );
}

/* ==========================================================
   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;
}
.fuss__innen {
    max-width: var(--mat-breite-breit, 1690px);
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    text-align: center;
}
.fussmenue__liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}
.fussmenue__liste a { color: var(--mx-karte); text-decoration: none; }
.fussmenue__liste a:hover,
.fussmenue__liste a:focus-visible { color: var(--mx-akzent); }

.fuss__abmelden { margin: 0 0 1.5rem; }

.fuss__zeile {
    margin: 0;
    font-size: .85rem;
    opacity: .8;
    display: flex;
    gap: .6rem;
    justify-content: center;
    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; }
    .kopf__rechts { order: 2; margin-left: 0; }

    .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 1rem 3rem; }
    /* 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; }
}