/*
Theme Name:   SR-Schule
Theme URI:    http://localhost/web/
Author:       Stefan Rank
Description:  Eigenes Theme für die Schulhomepage der Grund- und Mittelschule „Am Limes“ Kipfenberg, gut anpassbar über den WordPress-Customizer.
Version:      1.0.2
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Copyright:    © 2026 Stefan Rank
Text Domain:  sr-schule
*/

/*
 * Schriftart "Inter" liegt lokal im Ordner fonts/ und wird direkt von
 * diesem Server ausgeliefert (keine Anfrage an Google Fonts o. ä.). Lizenz:
 * SIL Open Font License, siehe fonts/OFL.txt.
 */
@font-face {
    font-family: 'Inter';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('fonts/inter-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('fonts/inter-700.woff2') format('woff2');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
 * Für Inhalte, die nur für Screenreader gedacht sind (z. B. die Sprungmarke
 * "Zum Inhalt springen" in header.php oder ein <h1> auf der Startseite, wenn
 * dort optisch der Bilderslider an dessen Stelle steht, siehe
 * page-zwei-spalten.php): unsichtbar zusammengeschrumpft statt "display:
 * none", damit Screenreader den Text trotzdem vorlesen. Die ":focus"-Variante
 * (nur für die Sprungmarke relevant, ein <h1> bekommt ja nie Tastaturfokus)
 * blendet den Inhalt wieder sichtbar ein, damit auch sehende
 * Tastatur-Nutzer:innen die Sprungmarke beim Durchtabben erkennen können.
 */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
    /*
     * Optisch ohnehin unsichtbar (auf 1px zusammengeschrumpft/abgeschnitten)
     * – Farbe/Hintergrund trotzdem fest auf ein kontrastsicheres Paar
     * gesetzt (nicht z. B. die von Vorfahren geerbte Linkfarbe): Automatische
     * Kontrast-Prüftools (z. B. axe) werten diese Element-Technik teils
     * trotzdem aus, und je nachdem, wo im DOM ein solcher Text steht (z. B.
     * die Sprungmarke "Zum Inhalt springen" ganz am Seitenanfang, noch vor
     * der weißen .site-frame-Karte), könnte sonst zufällig eine unpassende
     * Hintergrundfarbe durchscheinen, z. B. die pastellfarbene
     * Seitenhintergrundfarbe (siehe Farbkonzept-Hinweis oben zu den
     * Original-Pastelltönen).
     */
    color: var(--sr-text);
    background-color: #ffffff;
}

.screen-reader-text:focus {
    background-color: #ffffff;
    border: 2px solid var(--sr-fokus-stark);
    border-radius: 6px;
    clip: auto !important;
    clip-path: none;
    color: var(--sr-text);
    display: block;
    font-size: 1rem;
    font-weight: 700;
    height: auto;
    left: 1rem;
    line-height: normal;
    padding: 0.8rem 1.2rem;
    position: fixed;
    text-decoration: none;
    top: 1rem;
    width: auto;
    z-index: 1000;
}

/*
 * Reserviert immer Platz für eine vertikale Bildlaufleiste, auch wenn die
 * jeweilige Seite (noch) keine braucht. Ohne das würde sich die verfügbare
 * Breite je nach Seitenlänge minimal verschieben, wodurch der rechte
 * Abstand zum Bildschirmrand (siehe .site-frame weiter unten) mal mit, mal
 * ohne Bildlaufleiste leicht unterschiedlich aussieht.
 */
html {
    scrollbar-gutter: stable;
}

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--sr-text);
    line-height: 1.7;
    /*
     * Ohne Mindesthöhe endet der Hintergrund (Farbe/Bild) am unteren Rand
     * des Inhalts – ist die Seite kürzer als der Bildschirm, bleibt darunter
     * ein weißer Bereich. "100vh" sorgt dafür, dass der Hintergrund immer
     * mindestens die komplette Bildschirmhöhe ausfüllt.
     */
    min-height: 100vh;
    /*
     * WordPress gibt "background-color" für body.custom-background NUR aus,
     * wenn sie vom "default-color"-Vorgabewert abweicht (Kernverhalten, siehe
     * _custom_background_cb() in wp-includes/theme.php) – Zitat aus dem
     * WordPress-Quellcode: "A default has to be specified in style.css. It
     * will not be printed here." Ohne diese Zeile bleibt body deshalb völlig
     * transparent, solange niemand die Hintergrundfarbe manuell ändert.
     * Sobald im Customizer eine andere Farbe gewählt wird, überschreibt
     * WordPresss eigene, spezifischere Regel (body.custom-background) diesen
     * Wert automatisch.
     */
    background-color: var(--sr-hintergrundfarbe);
}

/*
 * Milchglaseffekt fürs Hintergrundbild (Startseiten-Slider oder Customizer-
 * Einstellung "Hintergrundbild weichzeichnen"): Der Blur steckt fest in
 * einer eigens dafür erzeugten, weichgezeichneten Bilddatei (siehe
 * sr_schule_hintergrundbild_unscharfe_url() in functions.php), die dann als
 * ganz normales Hintergrundbild angezeigt wird – kein Live-CSS-Filter mehr
 * nötig. Das war früher hier per "backdrop-filter: blur()" gelöst, musste
 * aber wegen der Rechenlast beim Scrollen (besonders auf dem Smartphone)
 * durch diese Variante ersetzt werden.
 */

a {
    color: var(--sr-fokus-stark);
}

a:hover {
    color: var(--sr-ergaenzung-stark);
}

/* Kennzeichnet externe Links (siehe js/externe-links.js) mit vorangestelltem Pfeil-Symbol */
.is-external-link::before {
    content: "↗";
    display: inline-block;
    margin-right: 0.2em;
}

/* Im Bild-Widget kein Pfeil vor dem Bild (siehe js/externe-links.js) – sähe vor einem Bild statt vor Text unpassend aus. */
.widget_media_image .is-external-link::before {
    content: none;
}

/*
 * Infobox für den Block-Editor: Bei einem Absatz/einer Gruppe unter
 * "Erweitert → Zusätzliche CSS-Klassen" den Namen "info-box" eintragen.
 */
.info-box {
    background-color: var(--sr-akzent-hell);
    border-left: 5px solid var(--sr-akzent);
    border-radius: 4px;
    padding: 1.1rem 1.3rem;
    margin: 1.3rem 0;
}

/*
 * Widget "Infobox" (siehe SR_Schule_Infobox_Widget in inc/infobox-widget.php):
 * Die dort bereits kontraststark (abgedunkelt) vorberechnete Konzeptfarbe
 * kommt als CSS-Variable "--sr-infobox-farbe" an, damit weiße Schrift auf der
 * Überschrift-Fläche gut lesbar bleibt. Kein eigenes Padding am Kasten selbst,
 * damit die Überschrift-Fläche randlos bis an den Rahmen reicht ("über die
 * gesamte Kastenbreite").
 */
/*
 * "z-index: 0" hier bewusst zusätzlich zu "position: relative": Ohne einen
 * EIGENEN (auch beliebigen) z-index-Wert öffnet "position: relative" noch
 * keinen neuen Stapelkontext – das "z-index: -1" des Hintergrundbilds (siehe
 * .sr-infobox-hintergrundbild weiter unten) würde dann nicht nur hinter den
 * Text dieser Box rutschen, sondern hinter die gesamte Seite entkommen und
 * dort z. B. hinter den halbtransparenten weißen Seitenrahmen (.site-frame-
 * main) geraten – sichtbar als unerwartet blasses Bild trotz voller
 * Deckkraft. "z-index: 0" fängt den Stapelkontext zuverlässig lokal in
 * dieser Box ein.
 */
.sr-infobox {
    /* Dieselbe Dicke wie oben/unten/rechts bei .sr-termin (Kalender-Listeneintrag) – dort per "border: 1px solid", nur links per "border-left-width" auf 5px verstärkt. */
    --sr-infobox-rahmenbreite: 1px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    border: var(--sr-infobox-rahmenbreite) solid var(--sr-infobox-farbe, var(--sr-text));
}

/*
 * Optionales Hintergrundbild (siehe Feld "Hintergrundbild" in form(), inc/
 * infobox-widget.php): unten rechts positioniert, per "z-index: -1" fest
 * hinter Überschrift und Text (die ohne eigene Positionierung automatisch
 * darüber liegen – kein weiteres z-index an anderer Stelle nötig).
 *
 * Breite und Deckkraft kommen direkt vom Nutzer (Regler im Widget-Formular,
 * als CSS-Variablen "--sr-infobox-bild-breite"/"-deckkraft" übergeben) – hier
 * keine automatische Anpassung mehr. "height: auto" behält dabei immer das
 * Seitenverhältnis des Originalbilds bei.
 *
 * Die Box selbst bekommt dafür bewusst KEINE Mindesthöhe – sie bleibt immer
 * nur so hoch wie ihr Textinhalt. Ist das Bild (bei der gewählten Breite)
 * größer als die Box, schneidet "overflow: hidden" an .sr-infobox oben den
 * überstehenden Teil oben und links sauber ab (Bild ist an der rechten
 * unteren Ecke verankert), statt die Box zu vergrößern oder das Bild zu
 * verkleinern.
 */
.sr-infobox-hintergrundbild {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: var(--sr-infobox-bild-breite, 150px);
    height: auto;
    opacity: var(--sr-infobox-bild-deckkraft, 0.5);
    pointer-events: none;
}

.sr-infobox-hintergrundbild-graustufen {
    filter: grayscale(1);
}

/*
 * Schriftgröße bewusst wie .sr-termin-titel (Termintitel in der Terminliste,
 * siehe weiter oben) – die hat selbst kein eigenes "font-size", übernimmt
 * also die Basisgröße 1rem. "--sr-infobox-textgroesse" (Regler "Textgröße"
 * im Widget-Formular, als Faktor z. B. 1.2 für 120% übergeben) skaliert
 * davon ausgehend beide, Überschrift UND Absatz (siehe .sr-infobox-inhalt
 * weiter unten), gemeinsam nach oben/unten.
 */
.sr-infobox-ueberschrift {
    margin: 0;
    padding: 0.6rem 1.1rem;
    background-color: var(--sr-infobox-farbe, var(--sr-text));
    color: #ffffff;
    font-size: calc(1rem * var(--sr-infobox-textgroesse, 1));
    line-height: 1.2;
}

/*
 * Zwei der drei Überschrift-Stile aus dem Widget-Formular ("Mit farbiger
 * Linie abgetrennt" und "Einfach") teilen sich diese Basis: keine farbige
 * Fläche mehr, Überschrift stattdessen in der Rahmenfarbe der Box (statt der
 * normalen Fließtextfarbe) – sie bleibt so klar als zur Box gehörig
 * erkennbar. Ohne Farbfläche braucht es auch keinen so großen Abstand zum
 * Text mehr wie sonst zur farbigen Fläche – 0,6rem passt den Abstand an den
 * einer normalen Textbox an (derselbe Wert wie bei .widget-title, siehe
 * weiter unten).
 */
.sr-infobox-ueberschrift-ohne-farbe {
    background-color: transparent;
    color: var(--sr-infobox-farbe, var(--sr-text));
    padding-bottom: 0;
}

.sr-infobox-ueberschrift-ohne-farbe + .sr-infobox-inhalt {
    padding-top: 0.6rem;
}

/*
 * Stil "Mit farbiger Linie abgetrennt": Linie in derselben Farbe und Dicke
 * wie der äußere Rahmen (dieselbe CSS-Variable "--sr-infobox-rahmenbreite",
 * siehe .sr-infobox oben), damit beide immer zusammenpassen. Der zusätzliche
 * Abstand zwischen Text und Linie kommt aus dem eigenen "padding-bottom"
 * hier (überschreibt das "0" von .sr-infobox-ueberschrift-ohne-farbe oben –
 * beide Klassen stehen gemeinsam am selben Element, diese Regel gewinnt
 * durch ihre Position weiter unten in der Datei).
 */
.sr-infobox-ueberschrift-mit-linie {
    padding-bottom: 0.5rem;
    border-bottom: var(--sr-infobox-rahmenbreite, 1px) solid var(--sr-infobox-farbe, var(--sr-text));
}

/* Gleiche Größe wie die Überschrift (siehe .sr-infobox-ueberschrift oben), nur nicht fett. */
.sr-infobox-inhalt {
    padding: 1rem 1.1rem 1.1rem;
    font-size: calc(1rem * var(--sr-infobox-textgroesse, 1));
    font-weight: 400;
}

.sr-infobox-inhalt > *:last-child {
    margin-bottom: 0;
}

/* Terminliste, ausgegeben über den Shortcode [sr_schule_termine] */
.sr-termine-liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*
 * Zweizeilige Termin-Karte: dünner Rahmen ringsum in der Kategoriefarbe,
 * links davon zusätzlich verdickt (kräftiger Farbakzent).
 */
.sr-termin {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--sr-termin-kategorie-farbe, var(--sr-text));
    border-left-width: 5px;
}

/*
 * Zeilenumbruch im Termin-Titel (wird von Listenansicht, Monatsansicht
 * (Smartphone-Liste) und Tooltip gemeinsam genutzt, da alle drei dieselbe
 * .sr-termin-Karte einbinden, siehe sr_schule_termin_karte_html()):
 * - "text-wrap: pretty" verhindert, dass ein einzelnes Wort allein in der
 *   letzten Zeile landet (in älteren Browsern ohne Effekt, aber unschädlich –
 *   der Text wird dann einfach wie bisher umbrochen).
 * - "overflow-wrap: anywhere" bricht auch zusammenhängende Zeichenketten ohne
 *   Trennstellen (z. B. lange URLs) innerhalb des Kästchens um, statt es zu
 *   sprengen.
 *
 * Bewusst OHNE "hyphens: auto": Kombiniert mit "text-wrap: pretty" hat sich
 * gezeigt, dass Chrome eine Silbentrennung als "zweites Wort" in der letzten
 * Zeile durchgehen lässt – dort stand dann nur noch die abgetrennte Rest-
 * silbe allein, nicht ein echtes zweites Wort. Es gibt aktuell keine
 * browserübergreifend unterstützte CSS-Eigenschaft, die Silbentrennung
 * gezielt nur in der letzten Zeile verbietet. Ohne Silbentrennung kann
 * "pretty" dagegen nur ganze Wörter in die letzte Zeile ziehen.
 */
.sr-termin-titel {
    font-weight: 600;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.sr-termin-datum,
.sr-termin-ort {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: var(--sr-text);
    opacity: 0.75;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.sr-termine-hinweis {
    opacity: 0.7;
}

/*
 * Fußzeile unter der Terminliste: Legende der Kalenderfarben + "Zuletzt
 * aktualisiert". Ab mittel (Tablet, 600px) stehen beide in einer Zeile, der
 * Zeitstempel rechtsbündig (siehe @media weiter unten); auf dem Smartphone
 * bleiben sie wie bisher untereinander.
 */
.sr-termine-fusszeile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    padding-right: 0.3rem;
}

/*
 * Nebeneinander (Legende + "Zuletzt aktualisiert" rechtsbündig) nur in der
 * Monats-Kalenderansicht (.sr-kalender, volle Inhaltsbreite) ab Tablet.
 * Im Termine-Widget (schmale Seitenleiste, siehe .two-col-sidebar) bleibt es
 * bei jeder Bildschirmgröße untereinander und linksbündig – dort ist meist
 * ohnehin nicht genug Platz für eine Zeile nebeneinander.
 */
@media (min-width: 600px) {
    .sr-kalender .sr-termine-fusszeile {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        row-gap: 0.4rem;
    }

    .sr-kalender .sr-termine-aktualisiert {
        margin-left: auto;
        text-align: right;
    }
}

.sr-termine-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    list-style: none;
}

.sr-termine-legende-eintrag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--sr-text);
}

.sr-termine-legende-punkt {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.sr-termine-aktualisiert {
    font-size: 0.75rem;
    color: var(--sr-text);
    opacity: 0.6;
}

/*
 * Monats-Kalender [sr_schule_kalender] (siehe inc/kalender-monatsansicht.php):
 * Raster-Ansicht für Tablet/PC-Monitor, Listen-Ansicht (wiederverwendet die
 * .sr-termin-Karten von oben) fürs Smartphone – Umschaltung weiter unten per
 * @media (max-width: 599px).
 */
.sr-kalender-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.sr-kalender-nav-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid #e4e1da;
    border-radius: 8px;
    color: var(--sr-text);
    text-decoration: none;
    font-size: 1.2rem;
    line-height: 1;
}

a.sr-kalender-nav-knopf:hover {
    border-color: var(--sr-fokus);
    color: var(--sr-fokus-stark);
}

.sr-kalender-nav-knopf.ist-deaktiviert {
    opacity: 0.3;
}

.sr-kalender-titel {
    flex: 1;
    font-weight: 600;
    font-size: 1.15rem;
}

.sr-kalender-heute-knopf {
    padding: 0.4rem 0.9rem;
    border: 1px solid #e4e1da;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--sr-text);
    text-decoration: none;
}

.sr-kalender-heute-knopf:hover {
    border-color: var(--sr-fokus);
    color: var(--sr-fokus-stark);
}

/*
 * Eigener, voll deckender (0% transparenter) Hintergrund: Ohne diesen würde
 * durch die Box hindurch das Hintergrundbild der Seite durchscheinen (die Box
 * selbst hat sonst keine eigene Hintergrundfarbe, nur die weiter außen
 * liegende Karte ".site-frame-main" ist mit 92% Deckkraft leicht
 * durchsichtig, siehe dort).
 */
.sr-kalender-monat {
    background: #fff;
    border: 1px solid #e4e1da;
    border-radius: 8px;
    overflow: hidden;
}

.sr-kalender-wochentage {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #ececec;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sr-text);
}

.sr-kalender-wochentage span {
    padding: 0.5rem 0.4rem;
    text-align: center;
}

/*
 * Erste vier Zeilen (Tageszahl + 3 Termin-Lanes, siehe .sr-kalender-tag bzw.
 * .sr-kalender-eintrag) fest über grid-template-rows reserviert – das ergibt
 * die Mindesthöhe einer Woche, die sich auch bei drei Terminen an einem Tag
 * ergäbe. So haben alle Wochen dieselbe Mindesthöhe, egal wie viele Termine
 * tatsächlich in ihr liegen, und das Layout springt beim Blättern zwischen
 * Monaten nicht. Bei mehr als drei gleichzeitigen Terminen wachsen weitere
 * Zeilen ganz normal über grid-auto-rows nach.
 */
.sr-kalender-woche {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: minmax(1.7rem, auto) repeat(3, minmax(1.5rem, auto));
    grid-auto-rows: minmax(1.5rem, auto);
    gap: 3px;
    padding: 3px;
}

/* Wochenend-Spalten hellgelb hinterlegt, über die ganze Wochenhöhe (alle Zeilen/Lanes). */
.sr-kalender-wochenende-hg {
    background: #fbf3d6;
    border-radius: 6px;
}

/* Werktag-Spalten (Mo-Fr) in derselben Form umrandet, über die ganze Wochenhöhe. */
.sr-kalender-werktag-rahmen {
    border: 1px solid #e4e1da;
    border-radius: 6px;
}

.sr-kalender-tag {
    grid-row: 1;
    padding: 0.3rem;
    min-height: 1.7rem;
}

/*
 * "min-width" + "text-align: right" statt einfach linksbündigem Text: die
 * Zahl bleibt zwar oben links im Tagesfeld verankert, einstellige Zahlen
 * rücken innerhalb dieser reservierten Breite aber so weit nach rechts, dass
 * ihr rechter Rand mit dem von zweistelligen Zahlen (z. B. "10") übereinstimmt.
 */
.sr-kalender-tagnummer {
    display: inline-block;
    min-width: 1.3em;
    text-align: right;
    font-size: 0.8rem;
    color: var(--sr-text);
    opacity: 0.7;
}

.sr-kalender-tag.ist-anderer-monat .sr-kalender-tagnummer {
    opacity: 0.3;
}

.sr-kalender-tag.ist-heute .sr-kalender-tagnummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    background: var(--sr-fokus);
    color: #fff;
    border-radius: 50%;
    opacity: 1;
    font-weight: 600;
}

.sr-kalender-eintrag {
    align-self: center;
    margin: 0 0.15rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid;
    border-radius: 6px;
    color: #222222;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Layer-Box mit dem vollständigen Termin-Text bei Mouseover/Tastatur-Fokus
 * über einem Termin-Kästchen (siehe js/kalender-tooltip.js). Wird von diesem
 * Skript direkt unter <body> eingefügt (nicht innerhalb von .sr-kalender-monat,
 * dessen "overflow: hidden" für die abgerundeten Ecken sie sonst abschneiden
 * würde) und per JavaScript über dem jeweiligen Kästchen positioniert.
 * "display: none" per Vorgabe, erst "ist-sichtbar" blendet sie ein.
 */
.sr-kalender-tooltip-layer {
    display: none;
    position: fixed;
    z-index: 100;
    width: max-content;
    max-width: 220px;
}

.sr-kalender-tooltip-layer.ist-sichtbar {
    display: block;
}

/*
 * Zweizeilige Karte wie in der Listenansicht (.sr-termin, siehe weiter oben),
 * hier zusätzlich mit eigenem Hintergrund und Schatten, da sie frei über der
 * Seite schwebt. Statt des linken Farbbalkens (dort gedacht als Akzent
 * zwischen mehreren Karten in einer Liste) bekommt die frei schwebende
 * Tooltip-Karte stattdessen ringsum einen kräftigeren Rahmen in der
 * (bereits kontrastsicher abgedunkelten) Kategoriefarbe, da sie ja für sich
 * allein steht.
 */
.sr-kalender-tooltip-layer .sr-termin {
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    border-width: 2px;
    border-color: var(--sr-termin-kategorie-farbe-kraeftig, var(--sr-text));
}

/* Text in der Tooltip-Karte etwas kleiner als in der normalen Listenansicht. */
.sr-kalender-tooltip-layer .sr-termin-titel {
    font-size: 0.90rem;
}

.sr-kalender-tooltip-layer .sr-termin-datum,
.sr-kalender-tooltip-layer .sr-termin-ort {
    font-size: 0.8rem;
}

.sr-kalender-eintrag-tooltip-liste {
    list-style: none;
}

.sr-kalender-kw {
    margin: 1.3rem 0 0;
    font-size: 1rem;
}

.sr-kalender-kw:first-child {
    margin-top: 0;
}

.sr-kalender-liste-ansicht {
    display: none;
}

@media (max-width: 599px) {
    .sr-kalender-monat {
        display: none;
    }

    .sr-kalender-liste-ansicht {
        display: block;
    }
}

/* Buttons (Block-Editor-Button sowie generische .button-Klasse) */
.wp-block-button__link,
.button {
    background-color: var(--sr-fokus-stark);
    color: #fff;
}

.wp-block-button__link:hover,
.button:hover {
    background-color: var(--sr-ergaenzung-stark);
}

/*
 * Responsives Webdesign: Grundstil (mobile-first) gilt für kleine Bildschirme
 * (Smartphone, bis 599px). Ab 600px (Tablet) und ab 1024px (PC-Monitor)
 * werden per @media-Regel gezielt Abstände/Größen angepasst.
 */

/*
 * Header bekommt weniger Innenabstand oben/unten als der Footer (seitlich
 * bleibt es gleich) – dadurch wirkt er insgesamt schmäler/flacher und der
 * Inhalt direkt danach (Bilderslider auf der Startseite bzw. Seitentitel-
 * Balken auf den übrigen Seiten, siehe .page-title-banner/.sr-slider) rückt
 * näher an den Untertitel im Header heran.
 */
.site-header {
    padding: 0.6rem 1rem;
}

.site-footer {
    padding: 1rem;
}

/*
 * Footer-Grundlayout: Links Kontaktdaten/Copyright, rechts Barrierefreiheits-
 * Schalter (oben) und Footer-Menü (unten). Auf Smartphone/Tablet stehen
 * beide Bereiche nacheinander untereinander; die echte Zweispalten-
 * Anordnung mit den Bereichen oben/unten rechts kommt erst ab groß/
 * PC-Monitor, siehe @media (min-width: 1024px) weiter unten.
 */
.site-footer {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.footer-right {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-barrierefreiheit {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer-barrierefreiheit button {
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--sr-text);
    background: #ffffff;
    border: 1px solid var(--sr-text);
    border-radius: 9px;
    padding: 0.3rem 0.9rem;
    cursor: pointer;
}

/* Kompakte Buttons (Schrift kleiner/zurücksetzen/größer): gleiche Größe wie
   der Zurücksetzen-Button, mit gleichmäßigem statt breitem Innenabstand,
   damit Icon bzw. "A−"/"A+" mittig sitzen. */
.footer-barrierefreiheit .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
}

/* Die drei Schrift-Buttons (kleiner/zurücksetzen/größer) sollen immer als
   Einheit zusammenbleiben und nie untereinander umbrechen (z. B. auf dem
   Smartphone bei großer Schrift) – nur die Gruppe als Ganzes darf per
   flex-wrap auf .footer-barrierefreiheit in eine neue Zeile rutschen. */
.footer-schriftgroesse {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

/* Barrierefreiheits-Buttons und Footer-Menü auf Smartphone mittig statt linksbündig */
@media (max-width: 599px) {
    .footer-right {
        align-items: center;
        text-align: center;
    }

    .footer-barrierefreiheit,
    .footer-nav ul {
        justify-content: center;
    }
}

.footer-barrierefreiheit button:hover,
.footer-barrierefreiheit button[aria-pressed="true"] {
    background: var(--sr-fokus-stark);
    border-color: var(--sr-fokus-stark);
    color: #fff;
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    list-style: none;
}

.footer-nav a {
    color: var(--sr-text);
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-nav a:hover {
    color: var(--sr-fokus-stark);
}

/*
 * Hauptmenü-Position: Logo/Titel links, Menü rechts in derselben Zeile.
 * Auf kleinen/mittleren Bildschirmen (Smartphone/Tablet) ist dafür zu wenig
 * Platz, dort steht das Menü stattdessen untereinander unter Logo/Titel
 * (siehe Basis-Stil hier).
 */
.site-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*
 * Deckende, abgerundete Fläche vor dem einstellbaren Hintergrund (Farbe/
 * Bild, siehe functions.php), damit die Schrift auf allen Bildschirmgrößen
 * lesbar bleibt. Header+Inhalt (site-frame-main) und Footer (site-frame-
 * footer) sind zwei getrennte Kästen, dazwischen scheint der Hintergrund
 * durch. Auf Smartphone/Tablet füllen sie die volle Breite; die "schwebende
 * Kasten"-Optik (Schatten, schmalere Breite, Außenabstand) kommt erst ab
 * groß/PC-Monitor dazu, siehe @media (min-width: 1024px) weiter unten.
 */
.site-frame {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 15px;
    border: 1px solid #e4e1da;
}

.site-frame-main {
    margin-bottom: 0.8rem;
}

/* Footer bekommt die Basisfarbe aus dem Farbschema statt der weißen Fläche */
.site-frame-footer {
    background: rgba(255, 255, 255, 0.8);
    color: var(--sr-text);
}

/*
 * Tablet & Smartphone (bis 1023px): Rahmen in der Hintergrundfarbe umschließt
 * die Boxen und trennt Header/Main und Footer sichtbar voneinander (der
 * Zwischenraum zeigt ja ohnehin schon den Seitenhintergrund). Oben
 * (Header/Main) bzw. unten (Footer) schließt der Rahmen eckig ab, dazwischen
 * bleiben die Ecken abgerundet.
 */
@media (max-width: 1023px) {
    .site-frame-main,
    .site-frame-footer {
        border: 2px solid var(--sr-hintergrundfarbe);
        margin-left: 5px;
        margin-right: 5px;
    }

    .site-frame-main {
        border-radius: 0 0 15px 15px;
        margin-top: 5px;
    }

    .site-frame-footer {
        border-radius: 15px 15px 0 0;
        margin-bottom: 5px;
    }
}

/*
 * Nur auf dem Smartphone (nicht mehr ab Tablet, siehe @media (max-width:
 * 1023px) oben): auch unten abgerundet, wirkt dort also als eigenständige,
 * rundum abgerundete Box statt wie ein Kasten mit eckigem unterem Abschluss.
 * Muss nach der 1023px-Regel stehen, damit sie deren unteren Radius (0 0)
 * für die schmaleren Bildschirme wieder überschreibt.
 */
@media (max-width: 599px) {
    .site-frame-footer {
        border-radius: 15px;
    }
}

/*
 * Menü, Basis-Stil = Smartphone (bis 599px): alle Ebenen untereinander in
 * voller Breite. Unterpunkte sind eingeklappt und werden per Klick auf den
 * übergeordneten Menüpunkt ein-/ausgeblendet (siehe js/menu.js) – Hover
 * funktioniert auf Touch-Geräten nicht zuverlässig, deshalb hier bewusst
 * kein Hover-Dropdown. Ab Tablet (600px) wird daraus das Karten-Dropdown,
 * siehe die beiden @media-Blöcke weiter unten.
 */
.site-nav ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    list-style: none;
}

.site-nav li {
    position: relative;
    width: 100%;
}

.site-nav a {
    display: block;
    width: 100%;
    padding: 0.6rem 0;
    color: var(--sr-text);
    font-weight: 600;
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus {
    color: var(--sr-fokus-stark);
}

/* Kleiner Pfeil bei Menüpunkten mit Unterseiten, als dezenter Hinweis auf das Dropdown (Tablet/Desktop) */
.site-nav li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.4em;
    margin-bottom: 0.1em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
}

/* Untermenü auf Smartphone: einfache, eingerückte Liste statt Karten, "> " vor jedem Eintrag, standardmäßig eingeklappt */
.site-nav ul ul {
    display: none;
    flex-direction: column;
    width: 100%;
    list-style: none;
}

.site-nav li.sr-menu-offen > ul {
    display: flex;
}

.site-nav ul ul a {
    padding: 0.6rem 0 0.6rem 1.75rem;
    font-weight: 400;
    font-size: 0.95rem;
}

/* Aktuell aufgerufene Seite unter den Unterpunkten hervorheben (gilt für Smartphone-Liste wie Tablet/Desktop-Karten) */
.site-nav ul ul li.current-menu-item > a {
    background-color: var(--sr-aktive-seite-hintergrund);
}

/* Trennlinie zwischen mehreren Unterpunkten (nur Smartphone-Klappliste) */
.site-nav ul ul li + li {
    border-top: 1px dashed #999999;
}

.site-nav ul ul li:last-child {
    border-bottom: 1px dashed #999999;
}

/* Trennlinie auch zwischen den Menüpunkten der ersten Ebene (nur Smartphone-Klappliste, siehe Aufhebung ab Tablet weiter unten) */
.site-nav ul.menu > li:not(:last-child) > a {
    border-bottom: 1px dashed #999999;
}

/*
 * Ist das Untermenü aufgeklappt, folgt direkt nach dem Link schon dessen
 * erster Unterpunkt statt des nächsten Menüpunkts der ersten Ebene – dort
 * entfällt die Linie also wieder. Den Abschluss übernimmt stattdessen die
 * bereits vorhandene Trennlinie nach dem letzten Unterpunkt
 * (".site-nav ul ul li:last-child" oben).
 */
.site-nav ul.menu > li.sr-menu-offen > a {
    border-bottom: none;
}

/* Mittel – Tablet: ab 600px wird aus der Liste ein Karten-Dropdown per Hover */
@media (min-width: 600px) {
    .site-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem 1.4rem;
        width: auto;
    }

    .site-nav li {
        width: auto;
    }

    .site-nav a {
        display: inline-block;
        width: auto;
        padding: 0.3rem 0;
    }

    /*
     * Untermenüs als Karten-Reihe: Statt einer schlichten Liste wird jeder
     * Unterpunkt zu einer eigenen "Karte". "opacity/visibility" statt
     * "display" ermöglicht eine sanfte Einblendung; "padding-top" (statt
     * margin) hält die Maus-Hoverfläche lückenlos zwischen Menüpunkt und
     * Karten-Reihe zusammen. Linksbündig zum Menüpunkt, da das Menü auf
     * Tablet noch nicht rechtsbündig auf der Seite steht (das passiert erst
     * ab groß/PC-Monitor, siehe @media (min-width: 1024px) weiter unten).
     */
    .site-nav ul ul {
        position: absolute;
        top: 100%;
        left: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        width: max-content;
        max-width: 480px;
        padding-top: 0.75rem;
        z-index: 20;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    }

    /*
     * Ab hier (Tablet) nur noch Klick/Touch statt Mouseover – die Karten-
     * Reihe öffnet sich also nur über die Klasse "sr-menu-offen", die js/
     * menu.js beim Klick auf einen Menüpunkt mit Unterseiten setzt (erster
     * Klick auf/zweiter Klick zu, siehe dort). Hover als zusätzlicher
     * Auslöser gilt erst wieder ab groß/PC-Monitor, siehe
     * @media (min-width: 1024px) weiter unten.
     */
    .site-nav li.sr-menu-offen > ul {
        display: flex;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
        .site-nav ul ul {
            transition: none;
        }
    }

    .site-nav ul ul li {
        position: static;
    }

    /*
     * Gleiche Selektor-Spezifität wie die Smartphone-Regeln weiter oben
     * (".site-nav ul ul li + li" / "li:last-child") nötig, sonst gewinnen
     * trotz @media hier die dortigen "border-top/bottom"-Regeln.
     */
    .site-nav ul ul li + li,
    .site-nav ul ul li:last-child {
        border-top: none; /* Trennlinien sind nur für die Smartphone-Klappliste gedacht */
        border-bottom: none;
    }

    /* Gleicher Grund/gleiche Spezifität wie oben: gilt auch für die Trennlinie zwischen den Menüpunkten der ersten Ebene. */
    .site-nav ul.menu > li:not(:last-child) > a,
    .site-nav ul.menu > li.sr-menu-offen > a {
        border-bottom: none;
    }

    .site-nav ul ul a {
        display: block;
        min-width: 160px;
        padding: 0.9rem 1.1rem;
        background: #fff;
        border: 1px solid #e4e1da;
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
        font-size: 0.9rem;
        font-weight: 600;
        white-space: normal;
        transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    }

    .site-nav ul ul a:hover,
    .site-nav ul ul a:focus {
        color: var(--sr-fokus-stark);
        border-color: var(--sr-fokus);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
        transform: translateY(-2px);
    }
}

/*
 * Nur auf Tablet (600–1023px, nicht mehr ab groß/PC-Monitor): Die
 * Karten-Reihe bekommt eine eigene, halbtransparente Hintergrundbox. Auf
 * Tablet öffnet sich das Dropdown häufig direkt über dem Seitentitel-Banner
 * – ohne diese Box scheint dessen Hintergrund/Rahmen zwischen den Karten
 * durch und macht sie schlecht lesbar.
 */
@media (min-width: 600px) and (max-width: 1023px) {
    .site-nav ul ul {
        background: #ffffff;
        border: 1px solid #e4e1da;
        border-radius: 12px;
        padding: 1rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }
}

.site-content {
    padding: 1rem;
}

/*
 * Abstände im Seiteninhalt (gilt für index.php und page-zwei-spalten.php):
 * Wegen "* { margin: 0; }" ganz am Anfang der Datei haben Absätze,
 * Überschriften etc. sonst gar keinen Abstand zueinander. "> * + *" (auch
 * "Owl-Selektor" genannt) fügt Abstand zwischen allen aufeinanderfolgenden
 * Elementen ein, ohne dass eine Liste einzelner Tags gepflegt werden muss.
 */
.entry-content > * + * {
    margin-top: 1rem;
}

/*
 * Seitentitel als eigenständiges, vollbreites Element (liegt in beiden
 * Vorlagen außerhalb von .two-col-main/.article) mit Linie oben/unten und
 * leichtem Hintergrund. Im Zweispalten-Layout spannt er dank
 * "grid-column: 1 / -1" über beide Spalten, siehe @media (min-width: 1024px)
 * weiter unten.
 */
.page-title-banner {
    font-size: 1.8rem;
    line-height: 1.2;
    margin: 0 0 1.5rem;
    border-top: 1px solid var(--sr-titel-linie);
    border-bottom: 1px solid var(--sr-titel-linie);
    background: var(--sr-titel-hintergrund);
    /*
     * "Randlos"/volle Breite: negativer Rand hebt das Element bis an den
     * Kartenrand (.site-frame) an, das gleich große Innenpolster schiebt den
     * sichtbaren Text wieder auf die normale Textbreite zurück. Die Werte
     * entsprechen genau dem Innenabstand von .site-content bei derselben
     * Bildschirmgröße (1rem/1.5rem/2rem), damit es exakt bis zum Kartenrand
     * reicht.
     */
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 0.75rem 1rem;
}

/*
 * Startseiten-Bilderslider (inc/slider.php + js/slider.js): ersetzt auf der
 * Startseite den Seitentitel oben. Gleiche randlose Technik wie
 * .page-title-banner (negativer Rand bis zum Kartenrand), aber ohne
 * Innenpolster, weil hier ein Bild statt Text sitzt.
 */
.sr-slider {
    position: relative;
    overflow: hidden;
    margin: 0 0 1.5rem;
    margin-left: -1rem;
    margin-right: -1rem;
    height: 260px;
}

.sr-slider-folien {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Alle Folien liegen übereinander; "ist-aktiv" blendet die aktuelle ein (per JS gesteuert, siehe js/slider.js). */
.sr-slider-folie {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 1s ease, visibility 1s;
}

.sr-slider-folie.ist-aktiv {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

.sr-slider-folie img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Effekt "Hineingleiten": die einblendende Folie rutscht dabei leicht seitlich ein. */
.sr-slider[data-effekt="slide"] .sr-slider-folie {
    transition: opacity 1s ease, visibility 1s, transform 1s ease;
    transform: translateX(4%);
}

.sr-slider[data-effekt="slide"] .sr-slider-folie.ist-aktiv {
    transform: translateX(0);
}

/* Effekt "Sanftes Zoomen": Bild zieht sich während der Anzeigedauer langsam zusammen (Ken-Burns-Effekt). */
.sr-slider[data-effekt="zoom"] .sr-slider-folie img {
    transform: scale(1.12);
    transition: transform 7s ease;
}

.sr-slider[data-effekt="zoom"] .sr-slider-folie.ist-aktiv img {
    transform: scale(1);
}

/*
 * Effekt "Verzerrung" (siehe js/slider-verzerrung.js): Das <canvas> liegt
 * über den normalen Folien und übernimmt bei erfolgreichem WebGL-Start
 * deren Anzeige (Skript blendet es per style.display="block" ein). Ohne
 * WebGL/bei einem Fehler bleibt es unsichtbar ("display: none" hier als
 * Vorgabe) – darunter läuft dann ganz normal der Standard-Überblend-Effekt
 * weiter (siehe ".sr-slider-folie" oben), es gibt also immer einen
 * funktionierenden Rückfall.
 */
.sr-slider-verzerrung-leinwand {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .sr-slider-folie,
    .sr-slider-folie img,
    .sr-slider-beschreibung {
        transition: none !important;
    }
}

/*
 * Bildbeschreibung: abgerundetes, 70% deckendes weißes Layer in einer von
 * vier Ecken (Auswahl je Bild im Customizer). Liegt im Markup bewusst NACH
 * dem Canvas des Effekts "Verzerrung" (nicht mehr in der jeweiligen Folie
 * verschachtelt) und blendet deshalb jetzt eigenständig per Klasse
 * "ist-aktiv" ein/aus (siehe js/slider.js) statt einfach mit der Folien-
 * Deckkraft mitzulaufen – "z-index: 3" liegt über dem Canvas (z-index: 2).
 */
.sr-slider-beschreibung {
    position: absolute;
    max-width: min(75%, 420px);
    margin: 0;
    padding: 0.6rem 0.9rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--sr-text);
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 1s;
}

.sr-slider-beschreibung.ist-aktiv {
    opacity: 1;
    visibility: visible;
}

.sr-slider-beschreibung--links-oben {
    top: 40px;
    left: 40px;
}

.sr-slider-beschreibung--rechts-oben {
    top: 40px;
    right: 40px;
}

.sr-slider-beschreibung--links-unten {
    bottom: 40px;
    left: 40px;
}

.sr-slider-beschreibung--rechts-unten {
    bottom: 40px;
    right: 40px;
}

.sr-slider-punkte {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    z-index: 2;
}

.sr-slider-punkt {
    width: 0.6rem;
    height: 0.6rem;
    padding: 0;
    border: 1px solid #fff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.sr-slider-punkt.ist-aktiv {
    background: #fff;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 2rem;
    line-height: 1.2;
}

/*
 * Abstand nach einer Überschrift (Überschrift → Text) genauso groß wie
 * Seitentitel → Inhalt (1,5rem statt der 1rem für normale Absatz-zu-Absatz-
 * Abstände) – höhere Spezifität durch "h2 + *" überschreibt die 1rem-
 * Grundregel oben gezielt nur direkt nach einer Überschrift.
 */
.entry-content h1 + *,
.entry-content h2 + *,
.entry-content h3 + *,
.entry-content h4 + * {
    margin-top: 1.5rem;
}

/*
 * Größenstufen H1–H4: H1 genauso groß wie der Seitentitel (.page-title-
 * banner, 1,8rem), H4 nur minimal größer als der normale Fließtext (1rem).
 */
.entry-content h1 {
    font-size: 1.8rem;
}

.entry-content h2 {
    font-size: 1.5rem;
}

.entry-content h3 {
    font-size: 1.25rem;
}

.entry-content h4 {
    font-size: 1.1rem;
}

/*
 * Aufzählungen (Listen-Block im Editor, WordPress vergibt dafür automatisch
 * die Klasse ".wp-block-list") so einrücken, dass das Aufzählungszeichen
 * bündig mit dem Text eines normalen Absatzes beginnt – der Browser würde
 * es standardmäßig weiter einrücken. Gilt für den gesamten Internetauftritt
 * (Seiteninhalt wie auch Text-Widgets), da ".wp-block-list" überall dort
 * vergeben wird, wo der Listen-Block genutzt wird. Die eigenen Listen des
 * Themes (Menü, Kalender, Termine-Karten, Legende usw.) haben diese Klasse
 * nicht und bleiben davon unberührt.
 *
 * Technische Umsetzung: Statt des browsereigenen Aufzählungszeichens (dessen
 * genaue Position je nach Browser leicht variiert) wird ein eigenes über
 * ::before erzeugt und mit "position: absolute; left: 0;" exakt an die
 * linke Kante gesetzt – dieselbe Kante, an der auch normaler Text beginnt,
 * da ".wp-block-list" selbst keinen Einzug (padding/margin) mehr hat.
 */
.wp-block-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wp-block-list > li {
    position: relative;
    padding-left: 1.3em;
}

ul.wp-block-list > li::before {
    content: "•";
    position: absolute;
    left: 0;
}

ol.wp-block-list {
    counter-reset: sr-liste;
}

ol.wp-block-list > li {
    counter-increment: sr-liste;
}

ol.wp-block-list > li::before {
    content: counter(sr-liste) ".";
    position: absolute;
    left: 0;
}

/*
 * Seiten-Vorlage "2 Spalten (66/33)" (page-zwei-spalten.php). Auf Smartphone/
 * Tablet stehen Inhalt und Seitenleiste untereinander (genug Breite fehlt für
 * zwei Spalten); ab groß/PC-Monitor nebeneinander im Verhältnis 66/33, siehe
 * @media (min-width: 1024px) weiter unten.
 */
.two-col-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.two-col-sidebar-hinweis {
    color: var(--sr-text);
    opacity: 0.7;
    font-size: 0.9rem;
}

.two-col-sidebar .widget {
    margin-bottom: 1.5rem;
}

/*
 * Erste Zeile im Widget (z. B. "Nächste Termine:") und erste Zeile im
 * Hauptinhalt (.entry-content) sollen auf gleicher Höhe beginnen: Beide Boxen
 * (.two-col-sidebar und .two-col-main) stehen sich im Grid als Nachbarn in
 * derselben Zeile gegenüber (der Seitentitel darüber belegt dank
 * "grid-column: 1 / -1" eine eigene, volle Zeile, siehe
 * @media (min-width: 1024px) weiter unten) und "align-items: start" sorgt
 * dafür, dass beide Boxen an derselben Kante beginnen.
 *
 * Das reicht aber nicht ganz: Je nach Zeilenhöhe bekommt der sichtbare Text
 * unterschiedlich viel unsichtbaren Abstand oberhalb der ersten Zeile
 * ("Leading"). Fließtext erbt vom body die für Lesbarkeit gedachte
 * Zeilenhöhe 1,7, der Widget-Titel hier dagegen die engere Zeilenhöhe 1,2 –
 * ohne Ausgleich stünde der Inhaltstext dadurch sichtbar tiefer als der
 * Widget-Titel. ".two-col-main .entry-content > :first-child" weiter unten
 * gleicht genau diesen Unterschied per negativem oberem Rand aus.
 */
.two-col-sidebar .widget-title {
    font-size: 1.1rem;
    line-height: 1.2;
    margin-bottom: 0.6rem;
}

/*
 * Ausgleich des unsichtbaren Zeilenhöhen-Abstands (siehe Erklärung oben bei
 * .widget-title): negativer oberer Rand nur auf das jeweils erste Element im
 * Inhalt, berechnet aus der Differenz der "Leading"-Höhen
 * ((Zeilenhöhe - 1) × Schriftgröße ÷ 2) von Fließtext-Absatz und Widget-Titel:
 *     Fließtext-Absatz:  (1,7 - 1) × 1rem   ÷ 2 = 0,35rem
 *     Widget-Titel:      (1,2 - 1) × 1,1rem ÷ 2 = 0,11rem  → Differenz 0,24rem
 * Beginnt der Inhalt stattdessen mit einer Überschrift (h1–h4, siehe
 * .entry-content h1..h4 weiter oben), ist deren Zeilenhöhe bereits genauso
 * eng wie beim Widget-Titel (1,2) – hier reicht ein kleiner fester
 * Ausgleichswert. Diese spezifischere Regel hebt für die Überschrift
 * zugleich den sonst viel zu großen "margin-top: 2rem" auf (der für
 * Überschriften *innerhalb* des Textflusses gedacht ist, nicht als
 * allererstes Element direkt unter dem Seitentitel).
 */
.two-col-main .entry-content > :first-child {
    margin-top: -0.24rem;
}

.two-col-main .entry-content > h1:first-child,
.two-col-main .entry-content > h2:first-child,
.two-col-main .entry-content > h3:first-child,
.two-col-main .entry-content > h4:first-child {
    margin-top: -0.05rem;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/*
 * Nur auf dem Smartphone (ab Tablet ist meist genug Platz, damit Logo und
 * Titel/Untertitel-Block nebeneinander in einer Zeile bleiben, siehe
 * "flex-wrap: wrap" oben): Reicht die Breite nicht, rutscht der Titel/
 * Untertitel-Block als Ganzes unter das Logo. "justify-content: center"
 * zentriert Logo und Block dann jeweils auf ihrer eigenen Zeile, "text-align:
 * center" (vererbt sich auf Titel und Untertitel) zentriert deren Text
 * zusätzlich zueinander.
 *
 * Trennstrich zwischen Titel/Untertitel-Block und Menü: das Menü steht auf
 * dem Smartphone (siehe .site-header oben) untereinander direkt darunter,
 * der obere Rahmen von .site-nav wirkt hier als sichtbare Trennlinie – der
 * bereits vorhandene Zeilenabstand (.site-header, "gap: 1rem") sorgt auf
 * beiden Seiten der Linie für Abstand.
 */
@media (max-width: 599px) {
    .site-branding {
        justify-content: center;
        text-align: center;
    }

    .site-nav {
        border-top: 1px solid #e4e1da;
    }
}

/*
 * <img> ist standardmäßig ein "inline"-Element und lässt dadurch minimal
 * Platz unter sich frei (wie bei einer Textzeile). "display: block" entfernt
 * diesen Effekt, damit das Logo exakt mittig zum Titel/Untertitel-Block steht.
 */
.custom-logo-link {
    display: flex;
}

.custom-logo {
    display: block;
}

.site-title {
    font-size: 1.3rem;
    color: var(--sr-text);
}

.site-title a {
    text-decoration: none;
}

.site-description {
    font-size: 0.95rem;
    color: #555;
    margin-top: 0.1rem;
}

/* Mittel – Tablet: ab 600px */
@media (min-width: 600px) {
    .site-header {
        padding: 0.75rem 1.5rem;
    }

    .site-footer {
        padding: 1.25rem 1.5rem;
    }

    .site-content {
        padding: 1.5rem;
    }

    .page-title-banner {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sr-slider {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        height: 340px;
    }

    .site-branding {
        gap: 1.25rem;
    }

    .site-title {
        font-size: 1.5rem;
    }

    .site-description {
        font-size: 1rem;
    }

    .site-frame-main {
        margin-bottom: 1rem;
    }
}

/* Groß – PC-Monitor: ab 1024px */
@media (min-width: 1024px) {
    .site-header {
        padding: 0.9rem 2rem;
    }

    .site-footer {
        padding: 1.5rem 2rem;
    }

    /* Menü steht hier rechtsbündig auf der Seite (siehe .site-nav weiter
       unten), deshalb auch die Karten-Dropdowns rechtsbündig zum Menüpunkt. */
    .site-nav ul ul {
        left: auto;
        right: 0;
    }

    /*
     * Erst ab hier (PC-Monitor) öffnet sich die Karten-Reihe zusätzlich zum
     * Klick (".sr-menu-offen", siehe @media (min-width: 600px) weiter oben)
     * auch per Mouseover/Tastaturfokus – auf Tablet reagiert das Menü bewusst
     * nur noch auf Klick/Touch, nicht mehr auf Mouseover.
     */
    .site-nav li:hover > ul,
    .site-nav li:focus-within > ul {
        display: flex;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Barrierefreiheits-Flyout: Hover als zusätzlicher Auslöser (neben ".ist-offen"/":focus-within", siehe weiter oben) ebenfalls erst ab hier. */
    .sr-schweb-barrierefrei:hover .sr-schweb-barrierefrei-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /*
     * "2fr 1fr" ergibt zuverlässig ein 66/33-Verhältnis, auch zusammen mit
     * "gap" – bei Prozentwerten müsste man den Abstand sonst manuell von der
     * Breite abziehen.
     */
    .two-col-layout {
        display: grid;
        grid-template-columns: 2fr 1fr;
        align-items: start;
        gap: 2.5rem;
    }

    .two-col-layout .page-title-banner,
    .two-col-layout .sr-slider {
        grid-column: 1 / -1;
    }

    .site-header {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    /*
     * Footer in zwei Spalten: links Kontaktdaten/Copyright, rechts oben die
     * Barrierefreiheits-Schalter und rechts unten das Footer-Menü, beide
     * rechtsbündig. "align-items: stretch" (Flexbox-Standard) sorgt dafür,
     * dass .footer-right dieselbe Höhe wie .footer-left hat, sodass
     * "justify-content: space-between" die beiden Bereiche wirklich oben
     * und unten auseinanderzieht.
     */
    .site-footer {
        flex-direction: row;
        justify-content: space-between;
    }

    .footer-right {
        justify-content: space-between;
        align-items: flex-end;
        text-align: right;
    }

    .site-content {
        padding: 2rem;
    }

    .page-title-banner {
        margin-left: -2rem;
        margin-right: -2rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .sr-slider {
        margin-left: -2rem;
        margin-right: -2rem;
        height: 420px;
    }

    /*
     * "display: contents" löst .site-branding als eigene Box auf: Logo und
     * Titel/Untertitel-Block werden dadurch zu direkten, unabhängigen
     * Elementen der .site-header-Zeile. So zentriert "align-items: center"
     * jedes Element für sich an der Zeilenmitte – das Menü richtet sich
     * dadurch am Titel/Untertitel-Block aus, statt (wie vorher) an der
     * meist deutlich größeren Logo-Höhe.
     */
    .site-branding {
        display: contents;
    }

    .custom-logo-link {
        margin-right: 1.5rem;
    }

    .site-nav {
        margin-left: auto;
    }

    .site-title {
        font-size: 1.6rem;
    }

    /*
     * Kasten-Darstellung: Die Seite schwebt als zwei abgerundete Boxen vor
     * dem einstellbaren Hintergrund (Farbe/Bild, siehe functions.php). Breite
     * 1400px (max. 90% der Bildschirmbreite). Bewusst breiter als der übliche
     * Richtwert (ca. 1200px), damit auch ein Zweispalten-Design bequem
     * hineinpasst. Die deckende Fläche selbst gilt bereits ab Basis-Stil
     * (siehe .site-frame weiter oben); hier kommen nur noch Breite, Schatten
     * und Außenabstände dazu.
     */
    .site-frame {
        max-width: 1400px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }

    .site-frame-main {
        margin-top: 3rem;
        margin-bottom: 1.6rem;
    }

    .site-frame-footer {
        margin-bottom: 3rem;
    }
}

/*
 * Schwarz-Weiß-Modus (Barrierefreiheit): maximaler Kontrast (reines Schwarz
 * auf reinem Weiß) und keine Hintergrundbilder mehr. Wird über den Button
 * im Footer per JavaScript umgeschaltet (siehe js/barrierefreiheit.js), das
 * per localStorage auch über Seitenwechsel hinweg gespeichert bleibt.
 * "!important" ist hier bewusst nötig, da der Modus wirklich alle Farben
 * überschreiben soll, egal wie tief verschachtelt oder wie im Customizer
 * eingestellt.
 */
html.sr-schwarzweiss body {
    background-color: #ffffff !important;
    background-image: none !important;
}

html.sr-schwarzweiss * {
    background-image: none !important;
    background-color: transparent !important;
    color: #000000 !important;
    border-color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html.sr-schwarzweiss a {
    text-decoration: underline !important;
}

html.sr-schwarzweiss img,
html.sr-schwarzweiss .custom-logo,
html.sr-schwarzweiss .sr-slider-verzerrung-leinwand {
    filter: grayscale(100%) contrast(110%);
}

/*
 * Ausnahme von der generellen Regel oben ("* { border-color: #000000 }" usw.):
 * Die Kalender-Kategoriefarben (Legenden-Punkt, Rahmen von Terminkarte/
 * -Kästchen/Tooltip) sollen auch im Schwarz-Weiß-Modus noch unterscheidbar
 * bleiben, statt alle einheitlich schwarz zu werden. Dafür wird hier gezielt
 * wieder die ursprüngliche Kategoriefarbe eingesetzt (aus der CSS-Variable
 * "--sr-farbe" bzw. den schon vorhandenen "--sr-termin-kategorie-farbe*"-
 * Variablen, siehe inc/kalender.php und inc/kalender-monatsansicht.php – die
 * werden von der "*"-Regel oben nicht berührt, da sie keine Standard-
 * CSS-Eigenschaften sind) und per Filter in eine Graustufe umgerechnet.
 * Unterschiedliche Farben ergeben dabei automatisch unterschiedlich helle
 * Grautöne, bleiben also erkennbar auseinanderhaltbar.
 */
html.sr-schwarzweiss .sr-termine-legende-punkt {
    background-color: var(--sr-farbe) !important;
    filter: grayscale(100%) contrast(130%);
}

html.sr-schwarzweiss .sr-termin {
    border-color: var(--sr-termin-kategorie-farbe, #000000) !important;
    filter: grayscale(100%) contrast(130%);
}

/*
 * Nur im Schwarz-Weiß-Modus: Werktag-Balken statt komplett umrandet nur
 * oben/links (dezente Gitterlinie), Wochenend-Balken statt gelb nur leicht
 * grau hinterlegt – im normalen Farbmodus bleibt es bei der vollen Umrandung
 * bzw. dem gelben Hintergrund (siehe .sr-kalender-werktag-rahmen und
 * .sr-kalender-wochenende-hg weiter oben).
 */
html.sr-schwarzweiss .sr-kalender-werktag-rahmen {
    border: none !important;
    border-top: 1px solid #000000 !important;
    border-left: 1px solid #000000 !important;
    border-radius: 0 !important;
    border-top-left-radius: 6px !important;
}

html.sr-schwarzweiss .sr-kalender-wochenende-hg {
    background-color: #ececec !important;
}

/*
 * Die Tooltip-Karte schwebt frei über der Seite (siehe .sr-kalender-tooltip-
 * layer weiter oben) – ohne eigenen Hintergrund würde durch sie hindurch der
 * Kalender-Inhalt darunter durchscheinen und den Text unlesbar machen. Auch
 * der Schatten wird deshalb wiederhergestellt, damit sie sich weiterhin
 * sichtbar vom Hintergrund abhebt.
 */
html.sr-schwarzweiss .sr-kalender-tooltip-layer .sr-termin {
    background-color: #ffffff !important;
    border-color: var(--sr-termin-kategorie-farbe-kraeftig, #000000) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}

/*
 * Eigener weißer Hintergrund auch im Schwarz-Weiß-Modus (statt transparent
 * wie sonst generell): Ein mehrtägiger Termin wird als durchgehender Balken
 * über mehrere Tagesspalten hinweg dargestellt – ohne Füllung schiene durch
 * ihn hindurch das Kalenderraster (Spaltenlinien, Werktag-/Wochenend-Rahmen)
 * und der Balken sähe wie in einzelne Tageskästchen zerschnitten aus statt
 * wie ein zusammenhängender Bereich.
 */
html.sr-schwarzweiss .sr-kalender-eintrag {
    background-color: #ffffff !important;
    border-color: var(--sr-farbe, #000000) !important;
    filter: grayscale(100%) contrast(130%);
}

html.sr-schwarzweiss .footer-barrierefreiheit button[aria-pressed="true"] {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/*
 * Ausnahme von der generellen Regel oben ("* { background-color: transparent }"):
 * Das schwebende Untermenü-Dropdown (Tablet/Desktop) braucht auch im
 * Schwarz-Weiß-Modus einen weißen Hintergrund, sonst verschwimmt es mit dem
 * Seiteninhalt darunter, über dem es frei schwebt.
 */
html.sr-schwarzweiss .site-nav ul ul a {
    background-color: #ffffff !important;
}

/*
 * Schwebende Buttons (Barrierefreiheit + "nach oben", siehe footer.php +
 * js/schwebende-buttons.js): gemeinsamer Flex-Container, "position: fixed"
 * bezogen aufs Browserfenster, nicht auf .site-frame – deshalb liegt die
 * Auszeichnung in footer.php auch bewusst außerhalb davon (siehe Kommentar
 * dort). Ab groß/PC-Monitor rechts verankert, auf Tablet/Smartphone links
 * (siehe die beiden @media-Regeln weiter unten) – die Reihenfolge im Markup
 * (erst Barrierefreiheit, dann "nach oben") bleibt dabei immer gleich.
 */
.sr-schweb-buttons {
    position: fixed;
    bottom: 1.2rem;
    z-index: 150;
    display: flex;
    align-items: center;
}

@media (min-width: 1024px) {
    .sr-schweb-buttons {
        right: 1.2rem;
    }
}

@media (max-width: 1023px) {
    .sr-schweb-buttons {
        left: 1.2rem;
    }
}

/*
 * Jeder der beiden Buttons ist einzeln ein-/ausblendbar ("ist-sichtbar", per
 * JS gesetzt): Statt nur Deckkraft zu ändern, wird dafür auch die Breite auf
 * 0 zurückgefahren (plus der Abstand zum Nachbar-Button) – dadurch rutscht
 * ein noch sichtbarer Button beim Verschwinden des anderen sichtbar an
 * dessen Stelle, statt dass eine leere Lücke stehen bleibt. Weil der Anker
 * des gemeinsamen Containers (siehe oben) je nach Bildschirmgröße links oder
 * rechts sitzt, wandert der verbleibende Button dabei von selbst an den
 * jeweils äußeren Rand.
 *
 * "overflow: hidden" schneidet den Button während der Breiten-Änderung
 * sauber ab; im fertig eingeblendeten Zustand muss es aber wieder auf
 * "visible" zurück, sonst würde es das nach oben aufklappende
 * Barrierefreiheits-Flyout abschneiden – deshalb wechselt "overflow" erst
 * NACH Abschluss der Breiten-Animation (siehe Verzögerung bei "transition"
 * unten), nicht gleichzeitig damit.
 */
/*
 * ".sr-schweb-knopf.sr-schweb-nach-oben-knopf" (statt nur
 * ".sr-schweb-nach-oben-knopf") ist hier bewusst nötig: Der "Nach oben"-
 * Button ist – anders als beim Barrierefreiheits-Button, wo Wrapper (dieser
 * hier) und eigentlicher <button> zwei verschiedene Elemente sind – selbst
 * gleichzeitig der Wrapper UND der ".sr-schweb-knopf" mit der festen Breite
 * 3rem (siehe weiter unten). Ohne die zusätzliche Klasse in der Selektor-
 * Kette hätte "width: 3rem" von ".sr-schweb-knopf" dieselbe Spezifität wie
 * "width: 0" hier und würde je nach Reihenfolge im Stylesheet gewinnen – der
 * Button wäre dann nie wirklich eingeklappt.
 */
.sr-schweb-barrierefrei,
.sr-schweb-knopf.sr-schweb-nach-oben-knopf {
    flex: 0 0 auto;
    width: 0;
    margin-right: 0;
    /* Rand mit auf 0, sonst bliebe (wegen "box-sizing: border-box", das den Rand nicht negativ schrumpfen lässt) ein 2px breiter Rest stehen, egal wie klein "width" ist. */
    border-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.3s ease, margin-right 0.3s ease, border-width 0.3s ease, opacity 0.3s ease;
}

.sr-schweb-barrierefrei.ist-sichtbar,
.sr-schweb-knopf.sr-schweb-nach-oben-knopf.ist-sichtbar {
    width: 3rem;
    border-width: 1px;
    opacity: 1;
    overflow: visible;
    transition: width 0.3s ease, margin-right 0.3s ease, border-width 0.3s ease, opacity 0.3s ease, overflow 0s linear 0.3s;
}

/*
 * Abstand zum Nachbar-Button nur, wenn wirklich beide Buttons sichtbar sind
 * ("hat-nachbar", von js/schwebende-buttons.js gesetzt) – sonst bliebe eine
 * Lücke zum Bildschirmrand stehen, wenn nur der Barrierefreiheits-Button
 * übrig ist und eigentlich ganz nach außen rutschen soll.
 */
.sr-schweb-barrierefrei.ist-sichtbar.hat-nachbar {
    margin-right: 0.8rem;
}

/* Eigener Positionierungs-Anker fürs Flyout weiter unten (".sr-schweb-barrierefrei-menu", "position: absolute"), nicht den gemeinsamen Flex-Container dafür verwenden. */
.sr-schweb-barrierefrei {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .sr-schweb-barrierefrei,
    .sr-schweb-nach-oben-knopf {
        transition: none;
    }
}

.sr-schweb-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid var(--sr-text);
    background: #ffffff;
    color: var(--sr-text);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    padding: 0;
}

.sr-schweb-knopf:hover,
.sr-schweb-knopf[aria-pressed="true"] {
    background: var(--sr-fokus-stark);
    border-color: var(--sr-fokus-stark);
    color: #fff;
}

/* Barrierefreiheits-Hauptbutton: eigene Farbgebung statt der neutralen Standard-Buttons – sanftes Blau, weißer Rand, siehe Rollstuhl-Symbol in footer.php. */
.sr-schweb-barrierefrei-knopf {
    background: #4d8fd6;
    border: 2px solid #ffffff;
    color: #ffffff;
}

.sr-schweb-barrierefrei-knopf:hover {
    background: #3a76b8;
    border-color: #ffffff;
    color: #ffffff;
}

/*
 * Flyout mit den drei Barrierefreiheits-Buttons: öffnet sich nach oben über
 * dem Hauptbutton (der unten am Bildschirmrand klebt, für ein Aufklappen
 * nach unten wäre also kein Platz). Ab groß/PC-Monitor per Hover/Tastatur-
 * fokus, auf Tablet/Smartphone stattdessen per Klick über die Klasse
 * "ist-offen" (siehe js/schwebende-buttons.js) – exakt dasselbe Muster wie
 * beim Hauptmenü, siehe .site-nav weiter oben.
 */
.sr-schweb-barrierefrei-menu {
    position: absolute;
    bottom: calc(100% + 0.6rem);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/*
 * ".ist-offen" (Klick, siehe js/schwebende-buttons.js) und ":focus-within"
 * (Tastatur) öffnen das Flyout auf jeder Bildschirmgröße. ":hover" dagegen
 * bewusst NUR ab groß/PC-Monitor (siehe @media weiter unten) statt hier
 * unconditional + per @media wieder eingeschränkt: Nach einem Klick bleibt
 * der Mauszeiger ja auf dem Button stehen, ":hover" wäre also z. B. auf
 * einem im Tablet-Modus schmal gezogenen Browserfenster mit echter Maus
 * gleichzeitig mit ".ist-offen" aktiv – bei gleicher Selektor-Spezifität
 * hätte dann eine nachträgliche "Hover soll hier nichts öffnen"-Regel
 * (je nach Reihenfolge) Vorrang und das gerade erst geöffnete Flyout sofort
 * wieder zugeklappt (siehe exakt dasselbe Muster/derselbe Grund beim
 * Hauptmenü, .site-nav weiter oben).
 */
.sr-schweb-barrierefrei:focus-within .sr-schweb-barrierefrei-menu,
.sr-schweb-barrierefrei.ist-offen .sr-schweb-barrierefrei-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .sr-schweb-barrierefrei-menu {
        transition: none;
    }
}

.sr-schweb-barrierefrei-menu .sr-schweb-knopf {
    /* Buttongröße bewusst unverändert, nur die Beschriftung/Icons darin größer. */
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.15rem;
    font-weight: 700;
}

/*
 * Zwei Icons im Schwarz-Weiß-Button (siehe footer.php): Kontrast-Halbkreis
 * im Ruhezustand, Grautöne-Kreis, sobald der Modus aktiv ist
 * ("aria-pressed", wird von js/barrierefreiheit.js gesetzt).
 */
.sr-schwarzweiss-knopf .sr-icon-aktiv {
    display: none;
}

.sr-schwarzweiss-knopf[aria-pressed="true"] .sr-icon-inaktiv {
    display: none;
}

.sr-schwarzweiss-knopf[aria-pressed="true"] .sr-icon-aktiv {
    display: block;
}

/* Eigener Hintergrund/Schatten bleibt auch im Schwarz-Weiß-Modus erhalten, sonst wären die frei schwebenden, runden Buttons kaum noch zu erkennen. */
html.sr-schwarzweiss .sr-schweb-knopf {
    background-color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html.sr-schwarzweiss .sr-schweb-knopf:hover,
html.sr-schwarzweiss .sr-schweb-knopf[aria-pressed="true"] {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/*
 * Eigener Hover-Effekt für den Barrierefreiheits-Hauptbutton (Rollstuhl-
 * Symbol) im Schwarz-Weiß-Modus, statt der pauschalen Schwarz-Regel oben:
 * "html.sr-schwarzweiss * { color: #000000 !important }" setzt die Farbe
 * direkt auf jedem einzelnen SVG-Pfad im Symbol, nicht nur auf dem Button –
 * eine reine Farbänderung am Button selbst würde das Symbol also gar nicht
 * erreichen (direkt gesetzte Werte schlagen ererbte, unabhängig von
 * Spezifität) und es bliebe schwarz auf dem dann ebenfalls schwarzen
 * Hintergrund, also unsichtbar. "filter: invert()" dreht stattdessen einfach
 * die bereits fertig berechneten Pixel um (Hintergrund UND Symbol
 * gemeinsam) und umgeht das Problem komplett. Hintergrund vorher bewusst
 * wieder auf Weiß (wie im Ruhezustand), damit daraus Schwarz wird – ohne das
 * würde die pauschale Regel oben ihn schon auf Schwarz setzen, was die
 * Invertierung dann fälschlich wieder zu Weiß machen würde.
 */
html.sr-schwarzweiss .sr-schweb-barrierefrei-knopf:hover {
    background-color: #ffffff !important;
    filter: invert(1);
}

/* Eigener (voll deckender statt durchsichtiger) weißer Hintergrund + dünner schwarzer Rahmen bleibt auch im Schwarz-Weiß-Modus erhalten, sonst schwebt die Bildbeschreibung ohne erkennbare Fläche über dem (dann ebenfalls schwarz-weißen) Slider-Bild. */
html.sr-schwarzweiss .sr-slider-beschreibung {
    background-color: #ffffff !important;
    border: 1px solid #000000 !important;
}