/*
 * com_sebp – Styles für die Event-Liste/Einzelansicht (Termine-View-
 * Feinschliff, Vorlage-PDF im Komponenten-Entwicklungsordner): Kopfleiste
 * statt Zeit-Spalte, Sidebar entfernt zugunsten von Inline-Boxen, ein
 * Kopfleisten-Badge für Countdown/Live/Storniert/Vergangen.
 *
 * Bewusste Abgrenzung zum Seiten-Template (cassiopeia_heilandskirche2026):
 * Alles, was das Template bereits liefert — Schriftarten/-größen (h1-h6,
 * Fließtext), Kartenrahmen/-radius/-schatten (`.card`), Button-Farben
 * (`.btn-primary`/`.btn-secondary`), Badge-Form (`.badge`) — wird hier
 * NICHT dupliziert oder überschrieben, sondern im Markup direkt mitbenutzt.
 * Farben kommen, wo möglich, direkt aus den echten Website-Tokens
 * (--blau-*/--rot-*/--petrol-*/--color-*, siehe user.css) statt aus eigenen
 * Hex-Werten - keine erfundenen Farben für diese Darstellung.
 */

:root {
    /* Direkt an die echten Design-Tokens der Website gebunden (statt
       eigener Hex-Werte) - bleibt so automatisch synchron, falls das
       Template (cassiopeia_heilandskirche2026/user.css) seine Palette
       nochmal ändert. Nur was das Template wirklich nicht kennt (Gelb-
       kontrast/Amber/Grau/Grün) bleibt eigenständig definiert. */
    --sebp-grundton: var(--color-anchor);
    --sebp-dunkel: var(--color-text);
    --sebp-hintergrund: var(--blau-50);
    --sebp-rahmen: var(--blau-300);
    --sebp-grau: #6c757d;
    --sebp-gruen: #2e7d32;
    --sebp-amber: #a06c00;
}

.sebp-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--blau-300);
    border-radius: var(--card-radius);
    background: var(--petrol-50);
}

.sebp-filter-gruppe {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 12rem;
}

.sebp-filter-gruppe label {
    font-weight: 600;
}

.sebp-filter-gruppe select {
    min-width: 12rem;
}

.sebp-filter-reset {
    align-self: flex-end;
}

/* Event-Liste: eine Karte pro Zeile */
.sebp-events-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Pagination-Fußzeile ("1 - 20 / 255 Einträge" + Seiten-Links) - echtes
   Joomla-Core-Markup (.pagination__wrapper), Abstand nur hier über den
   com_sebp-Wrapper gescopt, damit anderes Pagination-Markup auf der Website
   unberührt bleibt. */
.sebp-events .pagination__wrapper {
    margin-top: 1.5rem;
}

/* Bootstraps .pagination ist standardmäßig flex-nowrap - bei vielen Seiten
   (lange Terminlisten) läuft die Liste auf schmalen Bildschirmen über die
   Bildschirmbreite hinaus. Das verbreitert den ganzen dokument-weiten Layout-
   Viewport (html.scrollWidth > clientWidth), wodurch alle 100vw/inset:0-
   Berechnungen - z.B. das Eintragen-Modal-Overlay - auf Handys plötzlich
   gegen die überbreite statt die sichtbare Bildschirmbreite zentrieren.
   Behebt die eigentliche Ursache statt nur das Symptom im Modal zu kaschieren.
   Nur auf com_sebps eigene Liste gescopt (.sebp-events), andere .pagination-
   Vorkommen auf der Website (z.B. com_content) bleiben unberührt. */
.sebp-events .pagination {
    flex-wrap: wrap;
}

/*
 * Karten-Layout (Termine-View-Feinschliff, Vorlage-PDF): zwei Zeilen über die
 * volle Breite (Kopfleiste, Datumszeile), dann Bild-Spalte (klein, links) und
 * Inhalt (breiter, rechts). `.card` liefert Rahmen/Radius/Schatten/`padding:
 * 1.5rem` bereits (siehe Datei-Kopfkommentar) - `padding: 0` hier entzieht
 * der Karte selbst dieses Padding wieder, damit die Kopfleiste randlos über
 * die volle Breite laufen kann; die übrigen Bereiche bekommen ihr Padding
 * einzeln zurück. Selektor mit .card kombiniert (nicht nur .sebp-event
 * allein) aus demselben Grund wie schon immer hier: Cassiopeia-Core setzt
 * auf .card selbst schon display:flex/flex-direction:column, ohne die
 * zusätzliche Klasse im Selektor würde das je nach Ladereihenfolge der
 * Stylesheets diese Grid-Deklaration wieder überschreiben.
 */
.sebp-event.card {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-areas:
        "kopf  kopf"
        "datum datum"
        "bild  inhalt";
    align-items: start;
    padding: 0;
}

.sebp-event[hidden] {
    display: none;
}

/* Kopfleiste: Tageszahl/Wochentag (petrol) + Titel (blau), beide randlos bis
   an die (durch .card geerbte overflow:hidden bereits abgerundete) Kartenkante. */
.sebp-event-kopf {
    grid-area: kopf;
    position: relative;
    display: flex;
    align-items: stretch;
}

.sebp-event-kopf-tag {
    flex-shrink: 0;
    width: 5.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    background: var(--petrol-500);
    color: #fff;
}

.sebp-event-kopf-wochentag {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sebp-event-kopf-tagnummer {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

/* .sebp-event-kopf-titel sitzt direkt auf dem h1/h2-Element - Farbe muss hier
   überschrieben werden (weißer Text auf blauem Balken statt der Template-
   eigenen --color-anchor-Textfarbe), Schriftfamilie/-stil (kursives Lora)
   bleibt bewusst vom Template geerbt, nur Größe/Abstand sind kartenspezifisch. */
.sebp-event-kopf-titel {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0 !important;
    padding: 0.75rem 3rem 0.75rem 1.25rem;
    background: var(--blau-500);
    color: #fff;
    /* Lange, unteilbare Wörter (z. B. deutsche Komposita wie
       "Familiengottesdienst") haben keine Leerzeichen zum Umbrechen — ohne das
       hier würden sie den schmalen, ohnehin schon durch die feste Tag-Box und
       das rechte Badge-Padding eingeengten Titel-Bereich sprengen, egal wie
       klein die Schrift ist. hyphens: auto trennt bevorzugt an Silbengrenzen
       (setzt html[lang] voraus, das Joomla selbst aus der aktiven Sprache
       de-DE setzt); overflow-wrap: break-word greift nur, falls die
       Silbentrennung selbst keinen Trennpunkt findet. */
    overflow-wrap: break-word;
    hyphens: auto;
}

.sebp-event-kopf-titel a {
    color: inherit;
    text-decoration: none;
}

/*
 * Kopfleisten-Badge: ein Slot, mehrere Zustände (Termine-View-Feinschliff).
 * Aktiv/JS-gesteuert (data-sebp-header-badge, siehe sebp.js): Countdown-Text
 * (morgen/übermorgen/Beginnt-in-MM:SS) im neutralen Petrol-Chip, "Jetzt live"
 * rot (über die von sebp.js gesetzte .sebp-live-Kartenklasse). Storniert/
 * Vergangen (nur Einzelansicht, Server-gerendert): eigene Modifier-Klassen.
 * Flush in der oberen rechten Ecke der Kopfleiste, mit exakt dem Karten-
 * Radius (--card-radius) oben rechts - übernimmt dadurch optisch die Rundung
 * der Karte selbst, statt lose darüber zu schweben.
 */
.sebp-event-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.3rem 0.75rem;
    border-radius: 0 var(--card-radius) 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--petrol-50);
    color: var(--petrol-500);
    border: 1px solid var(--petrol-300);
    white-space: nowrap;
}

.sebp-event-badge:empty {
    display: none;
}

.sebp-event.sebp-live .sebp-event-badge {
    background: var(--rot-500);
    color: #fff;
    border-color: var(--rot-500);
}

.sebp-event-badge-abgesagt {
    background: var(--rot-500);
    color: #fff;
    border-color: var(--rot-500);
}

.sebp-event-badge-vergangen {
    background: var(--color-footer-bg);
    color: var(--color-text-dark);
    border-color: var(--color-footer-bg);
}

/* Datumszeile (ausgeschriebenes Datum, ersetzt die alte Zeit-Spalte) */
.sebp-event-datum {
    grid-area: datum;
    margin: 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--blau-50);
    padding-bottom: 0.5rem;
}

/* Kurze Datumsvariante (Handy-Feinschliff): beide Varianten stehen immer im
   Markup (kein JS, keine Nachteile für SEO/Screenreader durch fehlenden
   Inhalt), nur CSS blendet je nach Breite die passende ein - Standard: lang,
   Smartphones: kurz (siehe Media Query unten). */
.sebp-event-datum-kurz {
    display: none;
}

/* Bild-Spalte: Bild, Vor-Ort/Online-Icon-Paar, Kategorie-/Unterkategorie-Badges */
.sebp-event-bild-spalte {
    grid-area: bild;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0.75rem 1.5rem 1.5rem;
    align-items: center;
    border-right: 1px solid var(--blau-50);
}

.sebp-event-bild {
    width: 150px;
    max-width: 150px;
    aspect-ratio: 1;
    border-radius: 0.375rem;
    object-fit: cover;
}

.sebp-event-ort-typ-icons {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    color: var(--blau-500);
    font-size: 2rem;
}

.sebp-event-kategorien {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
    margin: 0;
}

/* .badge liefert Form/Padding/Schriftgröße aus dem Template - Farbe wird
   hier überschrieben (Bootstraps .badge setzt selbst bereits weiße Schrift
   als Default, siehe --badge-color:#fff im Core-CSS) + Flex-Layout fürs
   Icon davor ergänzt. Selektor mit .badge kombiniert (wie schon bei
   .sebp-event.card begründet) - sonst gewinnt je nach Ladereihenfolge der
   Stylesheets Bootstraps weiße Default-Schrift wieder und der Badge-Text
   wird auf hellem Grund unsichtbar (genau das war hier ein realer Bug). */
.badge.sebp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--blau-50);
    border: 1px solid var(--blau-300);
    text-decoration: none;
    color: var(--color-text);
    font-weight: normal;
}

/* Inhalt-Spalte: Beschreibung, Ort/Online/Gemeinde-Boxen, Aktions-Buttons */
.sebp-event-inhalt {
    grid-area: inhalt;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 1rem 1.5rem 1.5rem 0.75rem;
}

/* Beschreibung immer fest auf 2 Zeilen geclampt (Termine-View-Feinschliff:
   "Weiter lesen" entfällt bewusst, damit jede Karte dieselbe Höhe behält -
   der volle Text bleibt über "Details anzeigen"/die Einzelansicht erreichbar). */
.sebp-event-info {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    min-width: 0;
}

.sebp-event-info-voll {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.sebp-event-video {
    width: 100%;
    border-radius: 0.375rem;
}

/* Ort-/Online-/Gemeinde-Boxen: eine Reihe, jede Box nur so breit wie ihr
   Inhalt, nur was zutrifft wird gerendert (Termine-View-Feinschliff).
   Trennlinie darunter (gleiches Muster wie .sebp-event-datum) schafft mehr
   Abstand zu den Aktions-Buttons - in allen Breiten, nicht nur mobil. */
.sebp-event-boxen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--petrol-50);
}

.sebp-event-box {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background: var(--petrol-50);
}

/*
 * Aktions-Buttons in .sebp-event-aktionen (Details/Eintragen/Online-CTA)
 * nutzen die echten Website-Klassen `btn btn-secondary` direkt im Markup
 * (siehe events/default.php, event/default.php) - keine eigene Nachbildung
 * von Radius/Font/Padding hier mehr nötig, das liefert das Template selbst.
 * `.sebp-btn-outline` bleibt für die übrigen SEBP-Buttons außerhalb dieser
 * Aktionsreihe erhalten (Eintragen-Modal, "Zurück zur Übersicht",
 * Bilder-Download).
 */
.sebp-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-family: "Nunito Sans", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    border: none;
    background: #fff;
    border: 1px solid var(--blau-400);
    color: var(--blau-700);
}

.sebp-btn-outline:hover {
    background: var(--sebp-hintergrund);
    border-color: var(--blau-700);
    color: var(--blau-800);
}

/* Online-teilnehmen-CTA: `.btn.btn-secondary` liefert die Grundoptik, nur die
   Zustandsfarbe (gesteuert über die von sebp.js gesetzten Kartenklassen
   sebp-future/-live/-past) hat kein Website-Äquivalent und bleibt hier
   eigenständig. Mit `.btn-secondary` kombiniert (nicht `.sebp-btn-cta`
   allein), damit die Überschreibung unabhängig von der Stylesheet-
   Ladereihenfolge sicher gewinnt - gleiches Muster wie schon bei
   `.badge.sebp-badge`. Grau bis zum Livezustand, dann rot - dieselbe
   50/300-Rot-Kombination wie die Website-eigene `.card-color-3` (siehe
   user.css), nicht neu erfunden. */
.btn-secondary.sebp-btn-cta {
    background: var(--gray-300);
    border-color: var(--gray-300);
}

.sebp-event.sebp-live .btn-secondary.sebp-btn-cta {
    background: var(--rot-50);
    border-color: var(--rot-300);
}

/* Löschen-Button (Meine-Bilder-Seite, Schritt 12): `.btn.btn-secondary`
   liefert die Grundoptik, nur die Zustandsfarbe (rot statt blau) hat kein
   Website-Äquivalent. Anders als .sebp-btn-cta oben braucht dieser Button
   eine echte :hover-Variante - mit Pseudoklasse hat die Regel automatisch
   höhere Spezifität als `.btn-secondary.sebp-btn-loeschen` allein und
   gewinnt unabhängig von der Stylesheet-Ladereihenfolge. */
.btn-secondary.sebp-btn-loeschen {
    border-color: var(--rot-400);
    color: var(--rot-500);
}

.btn-secondary.sebp-btn-loeschen:hover {
    background: var(--rot-50);
    border-color: var(--rot-500);
    color: var(--rot-500);
}

.sebp-icon {
    font-family: "sebp-tabler-icons";
    font-style: normal;
    flex-shrink: 0;
}

.sebp-event-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.25rem;
}

/* "Zurück zur Übersicht" (Einzelansicht, unterhalb der Karte) - ohne eigenes
   CSS hing der Button direkt am Standard-Absatzabstand der Karte darüber. */
.sebp-event-zurueck {
    margin-top: 1.5rem;
}

/* Storniert/Vergangen bekommen einen grauen Kartenhintergrund - alles außer
   den Aktions-Buttons bleibt sichtbar (die Buttons selbst fehlen serverseitig
   bereits im Markup). Gilt seit 2026-08-17 auch in der Liste (events/default.php),
   nicht mehr nur der Einzelansicht - storniert wird sofort angezeigt, keine
   Karenzzeit mehr (siehe EventsModel-Klassen-Docblock). Höhere Spezifität als
   die bloße .card-Regel (die selbst keine Hintergrundfarbe setzt) durch
   Attribut+Klassen-Kombination, kein !important nötig. */
.sebp-event[data-status="cancelled"].card,
.sebp-event[data-status="archived"].card {
    background: var(--color-footer-bg);
}

/*
 * Dreistufige Breakpoints: ab der mittleren Stufe rückt die Bild-Spalte
 * schmaler zusammen. Auf Smartphones (Handy-Feinschliff) wird die Karte statt
 * Grid zur einfachen Flex-Spalte - .sebp-event-bild-spalte/.sebp-event-inhalt
 * lösen sich dafür per display:contents optisch auf, ihre Kinder werden
 * direkte Flex-Items der Karte und lassen sich einzeln per order neu
 * anordnen: Kopf, Bild, Datum, Info, Orte, Aktionen - und ganz am Ende, mit
 * eigener Trennlinie wie beim Datum, die Kategorien (zentriert wie zuvor).
 */
@media (max-width: 767.98px) {
    .sebp-event.card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .sebp-event-bild-spalte,
    .sebp-event-inhalt {
        display: contents;
    }

    .sebp-event-kopf {
        order: 0;
    }

    /* Kleinere Titel-Schrift auf Smartphones (Handy-Feinschliff) - verhindert,
       dass ein einzelnes langes erstes Wort im Titel den rechten Abstand der
       Kopfleiste sprengt. */
    .sebp-event-kopf-titel {
        font-size: 1.6rem;
    }

    /* Listenansicht: natürliche Breite, zentriert (align-self statt der
       aufgelösten Wrapper-Zentrierung). Einzelansicht: volle Breite über die
       eigene Regel weiter unten (Handy-Feinschliff). */
    .sebp-event-bild {
        order: 1;
        align-self: center;
        margin-top: 1rem;
    }

    /* Vor-Ort/Virtuell-Icon-Paar bleibt auf Smartphones überall verborgen
       (Handy-Feinschliff) - kein Platz neben Bild/Badges. */
    .sebp-event-ort-typ-icons {
        display: none;
    }

    /* Einzelansicht (view=event): Bild bekommt die volle Kartenbreite statt
       der kleinen Desktop-Vorschau, mit demselben seitlichen Abstand wie der
       übrige Inhalt (Handy-Feinschliff). */
    .sebp-event-einzelansicht .sebp-event-bild {
        width: calc(100% - 3rem);
    }

    .sebp-event-datum {
        order: 2;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Kurzes Datum statt der ausgeschriebenen Variante (Handy-Feinschliff) -
       verhindert den Zeilenumbruch, bei dem "Uhr" allein in einer zweiten
       Zeile landet. */
    .sebp-event-datum-lang {
        display: none;
    }

    .sebp-event-datum-kurz {
        display: inline;
    }

    .sebp-event-info {
        order: 3;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sebp-event-boxen {
        order: 4;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Aktions-Buttons (Online-CTA/Details/Eintragen): auf Smartphones
       gestapelt, jeder Button volle Breite, Icon+Text darin zentriert
       (Handy-Feinschliff). margin-top:0 hebt den Desktop-"nach unten
       schieben"-Trick auf (in der aufgelösten Flex-Spalte nicht mehr nötig,
       Reihenfolge kommt jetzt von order). */
    .sebp-event-aktionen {
        order: 5;
        flex-direction: column;
        align-items: stretch;
        margin-top: 0;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sebp-event-aktionen > a,
    .sebp-event-aktionen > button {
        width: 100%;
        justify-content: center;
        margin-right: 0;
        margin-bottom: 0;
    }

    /* Kategorien ans Ende verschoben, eigene Trennlinie darüber (gleiches
       Muster wie bei .sebp-event-datum), Zentrierung der Badges bleibt wie
       zuvor über justify-content auf .sebp-event-kategorien selbst. */
    .sebp-event-kategorien {
        order: 6;
        padding: 0.75rem 1.5rem 1.5rem;
        border-top: 1px solid var(--blau-50);
    }

    /* "Zurück zur Übersicht" zentriert statt linksbündig (Handy-Feinschliff). */
    .sebp-event-zurueck {
        text-align: center;
    }
}

/* Nur-eine-Gemeinde-Modus (Abschnitt 4.9/16 Schritt 18): Gemeinde-Box wird
   in den Templates echt aus dem Markup entfernt (nicht nur versteckt) - kein
   eigenes CSS mehr nötig, .sebp-event-boxen fließt ohne die fehlende Box
   von selbst korrekt. */

/* Abo-Landing-Page (Abschnitt 11, QR-Code): Rahmen/Karten-Optik und die
   blaue Balken-Überschrift kommen automatisch von der echten .card/.card h2-
   Regel aus user.css (die Landing Page trägt die echte Klasse "card", kein
   eigener Klon) - keine eigene Breite mehr, volle Container-Breite wie jede
   andere .card auf der Website (z. B. .sebp-event.card). margin-bottom sorgt
   für Abstand zum Footer, da die Karte hier der letzte Seiteninhalt ist.

   Trennlinien wie bei events/event (gleiches Muster wie z. B.
   .sebp-event-datum: border-bottom + padding-bottom auf dem vorangehenden
   Block, kein eigenes <hr>) - eigenes margin:0 statt des Bootstrap-
   <p>-Standardabstands, sonst addiert sich Padding+Standardabstand+
   margin-top zu ungewöhnlich viel Luft. Nur innerhalb der Landing-Page-
   Karte (.sebp-abo.card ...) - .sebp-abo-erinnerung wird auch im
   Eintragen-Modal wiederverwendet, das seine eigene Trennlinien-Logik hat
   (.sebp-eintragen-kategorie-bereich) und hier nicht mitbetroffen sein
   soll. */
.sebp-abo.card {
    margin-bottom: 2rem;
}

.sebp-abo.card .sebp-abo-erklaerung,
.sebp-abo.card .sebp-abo-erinnerung {
    margin: 1rem 0 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--blau-50);
}

.sebp-abo.card .sebp-abo-buttons {
    margin-top: 1rem;
}

/* ICS-Abo-Button (Eintragen-Modal, Abschnitt 10/Termine-View-Feinschliff) und
   Abo-Landing-Page (Abschnitt 11, QR-Code) - auf der Landing Page zentriert
   zur Karte, da sie dort den Seitenabschluss bilden (nur dort verwendet,
   siehe oben). */
.sebp-abo-buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sebp-abo-erinnerung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.sebp-abo-erinnerung select {
    width: auto;
}

/* Auswahl-Dropdowns optisch wie .btn-secondary geklont (gleiches Klon-Muster
   wie zuvor .sebp-btn-outline gegen .btn-secondary abgeglichen) - Werte 1:1
   aus user.css übernommen, damit native <select>-Elemente und echte Buttons
   nicht wie zwei verschiedene Bedienelemente wirken. Gilt für die
   Erinnerung-Auswahl im Eintragen-Modal UND die drei Filter-Dropdowns
   (Kategorie/Gemeinde/Ansicht) oben auf der Termine-Liste - eine Regel statt
   Dopplung, gleiche Website-Einheitlichkeit wie beim Modal-Dropdown zuvor.
   Absichtlich hier in sebp.css dupliziert statt user.css (dem Template)
   anzufassen: sebp.css bleibt die einzige Stelle mit com_sebp-eigenem CSS,
   user.css bleibt unberührt vom Component. Chevron-SVG fest in
   var(--blau-700) eingefärbt (#0F4D76), da CSS-Variablen in einer data-URI
   nicht aufgelöst werden. */
.sebp-abo-erinnerung select,
.sebp-filter-gruppe select {
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%230F4D76' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem;
    border: 1px solid var(--blau-400);
    color: var(--blau-700);
    font-family: "Nunito Sans", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    padding: 0.5rem 2rem 0.5rem 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.sebp-abo-erinnerung select:hover,
.sebp-filter-gruppe select:hover {
    background-color: var(--blau-50);
    border-color: var(--blau-700);
    color: var(--blau-800);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sebp-abo-erinnerung select:focus-visible,
.sebp-filter-gruppe select:focus-visible {
    outline: 2px solid var(--blau-700);
    outline-offset: 2px;
}

/* Kategorie-/Ansicht-Filter: Rahmen wird rot, sobald tatsächlich eine
   Auswahl (nicht "alle") getroffen ist - macht auf einen Blick sichtbar,
   dass die Liste gerade gefiltert ist. Gleicher Rot-Ton wie der
   Löschen-Button (Schritt 12), keine neue Farbe. */
.sebp-filter-gruppe select.sebp-filter-aktiv {
    border-color: var(--rot-400);
}

/* Eintragen-Modal (Termine-View-Feinschliff): eigener Inhalt innerhalb des
   allgemeinen .sebp-map-dialog-Rahmens (Overlay/Backdrop/Schließen-Button
   wiederverwendet, siehe .sebp-map-overlay unten). */
.sebp-eintragen-dialog {
    box-sizing: border-box;
    max-width: min(30rem, calc(100vw - 2rem));
    border: 1px solid var(--blau-300);
}

/* Überschrift als blauer Balken mit weißer Schrift - gleiches Muster wie
   .sebp-map-adresse/.card h2/h3 überall sonst auf der Website. */
.sebp-eintragen-titel {
    margin: 0;
    padding: 0.75rem 3rem 0.75rem 1.5rem;
    background: var(--blau-500);
    color: #fff;
    font-weight: 600;
    font-size: 1.25rem;
}

.sebp-eintragen-inhalt {
    padding: 1.75rem;
}

.sebp-eintragen-kategorie-bereich {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sebp-rahmen);
}

.sebp-eintragen-kategorie-bereich[hidden] {
    display: none;
}

.sebp-eintragen-kategorie-bereich p {
    margin: 0 0 0.75rem;
}

/* Geheimer Notizen-Export für Sonntagsankündigungen (Abschnitt 16, Schritt 20) */
.sebp-notizen-textarea {
    display: block;
    width: 100%;
    max-width: 40rem;
    font-family: monospace;
    white-space: pre;
    padding: 0.75rem;
    margin: 1rem 0;
}

.sebp-events-empty {
    padding: 1rem;
    border: 1px solid var(--blau-300);
    border-radius: var(--card-radius);
    background: var(--sebp-hintergrund);
}

/* Frontend-Bilder-/Video-Verwaltung für Gemeinde-Redakteure (Schritt 12) —
   Kartenlayout und Buttons nutzen seit dem Karten-Umbau die echten
   Website-/Bootstrap-Klassen direkt im Markup (.card, .btn-secondary,
   .list-unstyled, .text-muted, .object-fit-cover, .rounded, ...); hier bleibt
   nur die feste Vorschau-Größe übrig, für die es keine Bootstrap-Utility
   gibt. */
.sebp-meine-bilder-vorschau {
    width: 120px;
    height: 90px;
}

/* Abstand nach der letzten Card (Einbindung, ganz unten) - kein Bootstrap-
   Spacer-Schritt trifft genau 2rem (nur 1.5rem/mb-4 oder 3rem/mb-5), daher
   direkt auf dem Seiten-Wrapper statt als Utility-Klasse auf der letzten Card. */
.sebp-meine-bilder {
    margin-bottom: 2rem;
}

/* Karten-Overlay für Vor-Ort-Termine (Abschnitt 9/16 Schritt 17) - dieselbe
   Overlay/Backdrop-Basis wird seit dem Termine-View-Feinschliff auch vom
   Eintragen-Modal (.sebp-eintragen-dialog) wiederverwendet. */
.sebp-map-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
}

/* [hidden] allein reicht nicht, da die display:flex-Regel oben den
   UA-Standard für [hidden] sonst schlägt (gleiches Muster wie .sebp-event[hidden]). */
.sebp-map-overlay[hidden] {
    display: none;
}

body.sebp-map-open {
    overflow: hidden;
}

.sebp-map-dialog {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: min(48rem, calc(100vw - 2rem));
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Adresse als erste Zeile im Karten-Popup (Termine-View-Feinschliff) -
   gleiches Muster wie die Website selbst für große Überschriften in Cards
   nutzt (.card h2/h3: weißer Text auf var(--blau-500)-Balken). */
.sebp-map-adresse {
    margin: 0;
    padding: 0.75rem 3rem 0.75rem 1.5rem;
    background: var(--blau-500);
    color: #fff;
    font-weight: 600;
}

.sebp-map-adresse[hidden] {
    display: none;
}

.sebp-map-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

#sebp-map-container {
    width: 100%;
    height: 70vh;
    max-height: 32rem;
}