/* SKWalsrode-Website – Farbschema von schuetzenkorps-walsrode.de abgeleitet
   ============================================================================
   Inhaltsverzeichnis (in dieser Reihenfolge in der Datei):
   1. Grundlagen (Farben, Schrift, Links, globale Textfarben)
   2. Kopf- und Fußzeile
   3. Formulare (site-weit: Kontaktformular, Admin, Login)
   4. Buttons
   5. Karten, Bilder & Lightbox (von mehreren Modulen gemeinsam genutzt)
   6. Bildausschnitt-Auswahl im Admin (Fokuspunkt / Ausschnitt-Rahmen)
   7. Inhalts-Module (je ein Abschnitt pro Datei in modules/*.module.php)
   8. Frontend-Editor (nur im Bearbeitungsmodus, ?bearbeiten=1)
   9. Medien-Picker (Bootstrap-Modal für Bild-/Video-Auswahl)
   10. Sonstiges (Statistik-Balken, Nach-oben-Button, Scroll-Reveal-Animation)
   ============================================================================ */

/* ==========================================================================
   1. GRUNDLAGEN
   ========================================================================== */

:root {
    /* --- Grundfarben: von https://www.schuetzenkorps-walsrode.de abgelesen -----
       Alles Weitere in dieser Datei soll auf diese neun Werte zurückgreifen
       (direkt oder über die Rollenvariablen gleich darunter), damit eine
       spätere Farbanpassung wieder an einer einzigen Stelle passieren kann. */
    --fs-tiefgruen: #003322;    /* dunkelstes Grün - Fußzeile der echten Seite */
    --fs-gruen: #209040;        /* Vereinsgrün - Überschriften auf der echten Seite */
    --fs-signalgruen: #75bb3c; /* helles Signalgrün - Buttons/Hover/Icons dort */
    --fs-salbei: #a0cdb4;       /* Salbeigrün - Kopfbereich-Hintergrund dort */
    --fs-anthrazit: #1e2022;    /* Navigationsleiste + Fließtext dort */
    --fs-grau: #5a5d63;         /* sekundärer Fließtext (Hinweise, Bildunterschriften) */
    --fs-rotakzent: #990000;    /* dunkles Rot, Menü-Hover dort, passt zum Wappen -
                                    aktuell noch nicht verdrahtet, für einen bewussten
                                    Warn-/Auffälligkeits-Akzent reserviert */
    --fs-tuerkis: #1fa5d1;      /* grün-blauer Link-Akzent (z.B. "zur Gebührenordnung") dort */
    --fs-rahmen: #e5e5e5;       /* helle Rahmen-/Trennlinienfarbe */
    --fs-flaeche-hell: #f2f6f3; /* sehr helle, leicht salbeistichige Fläche für Karten/
                                    Formularfelder - nicht direkt abgelesen (dafür gibt
                                    es dort keine Entsprechung), sondern von
                                    --fs-salbei abgeleitet */
    --fs-weiss: #ffffff;        /* Seitenhintergrund dort */

    /* --- Rollenvariablen: vom übrigen CSS in dieser Datei genutzt --------------
       Namen (rot/orange/gold) stammen noch aus der Firestarter-Vorlage und
       passen nicht mehr zur Farbe, die dahintersteckt - der Rest der Datei
       referenziert sie aber an vielen Stellen, daher hier nur umgehängt statt
       überall umbenannt. */
    --fs-rot: var(--fs-tiefgruen);
    --fs-orange: var(--fs-signalgruen);
    --fs-gold: var(--fs-gruen);
    --fs-hintergrund: var(--fs-weiss);
    --fs-hintergrund-hell: var(--fs-flaeche-hell);
    --fs-text: var(--fs-anthrazit);
    --fs-text-muted: var(--fs-grau);
    --fs-verlauf: linear-gradient(90deg, var(--fs-rot), var(--fs-orange), var(--fs-gold));
    --fs-navbar-deckkraft: 0.92;
    --fs-footer-deckkraft: 1;
    /* Kleine Schriftgröße - über "Klein" im Format-Dropdown der Editoren auf beliebigen
       Text anwendbar (<font size="2">, siehe weiter unten) UND die Größe der Fußzeile
       (13px statt 16px, wie auf der echten Vereinsseite) - ein gemeinsamer Wert, damit
       beide Stellen immer im Gleichschritt bleiben. */
    --fs-schrift-klein: 13px;
    /* Einheitlicher "erhoben wirkender" Schatten für Karten und Bilder - klar nach
       unten rechts versetzt statt stark verlaufend/diffus. Deckkraft für einen
       hellen Seitenhintergrund abgeschwächt (war 0.5 auf dem alten dunklen Grund). */
    --fs-bild-schatten: 8px 8px 10px rgba(0, 0, 0, 0.32);
}

/* Roboto lokal eingebunden (kein Google-Fonts-CDN zur Laufzeit, siehe README) - das ist
   die Schriftart der echten Vereinsseite (schuetzenkorps-walsrode.de), passend zum
   Farbschema mit übernommen. Nur die zwei tatsächlich genutzten Schnitte (normal/fett). */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/vendor/roboto/roboto-400.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/vendor/roboto/roboto-700.woff2") format("woff2");
}

/* Auf der echten Seite tragen die großen Abschnitts-Überschriften ("Herzlich
   Willkommen" & ähnliche) diese kursive Serifenschrift statt Roboto - Fließtext
   bleibt auch dort Roboto, nur die Überschrift selbst wechselt. Dort nicht einheitlich
   auf jeder Überschrift verwendet (unterschiedliche Vorlagen je Abschnitt), hier bewusst
   auf die Hero-Überschrift beschränkt statt auf jede Überschrift der Seite. */
@font-face {
    font-family: "Droid Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/vendor/droidserif/droidserif-400italic.woff2") format("woff2");
}

/* Grund-Schriftgröße für den Standardtext (statt Browser-Standard 16px) - praktisch alle
   Schriftgrößen in dieser Datei sind in rem angegeben, skalieren also automatisch mit.
   Das Menü hat eine eigene, feste Größe (siehe .fs-navbar .nav-link weiter unten), damit
   es unabhängig von dieser Grundgröße bei 16px bleibt. */
html {
    font-size: 14px;
}

body {
    background-color: var(--fs-hintergrund);
    color: var(--fs-text);
    font-family: "Roboto", "Segoe UI", system-ui, sans-serif;
}

/* Fließtext-Grundgröße bewusst fest in px statt bei den geerbten 14px (html oben) zu
   bleiben - betrifft alle Module mit einem formatierten Text-Feld (Text, Bild + Text,
   Textblock mit Farbfläche) sowie den Bericht-/News-Fließtext, damit überall die
   gleiche Lesegröße rauskommt, egal in welchem Modul der Text steht. Einzelne, aus
   altem/eingefügtem Inhalt übernommene inline-style="font-size:..." an Textstellen
   überstimmen das weiterhin (wie bei jedem Inline-Style) - die betrifft dann nur den
   jeweiligen Textabschnitt, nicht das ganze Modul. */
.fs-text-block,
.fs-artikel-inhalt {
    font-size: 16px;
}

/* Fußzeile bleibt immer am unteren Bildschirmrand, auch wenn die Seite selbst wenig
   Inhalt hat (sonst würde sie direkt unter dem Inhalt "hochrutschen") - klassisches
   Sticky-Footer-Muster: body wird zur Flex-Spalte über die volle Bildschirmhöhe,
   <main> wächst und schiebt die Fußzeile ans Ende. Nur auf .fs-website-body (die
   normalen Seiten mit Kopf-/Fußzeile aus includes/header.php+footer.php) - NICHT
   auf body allgemein, sonst kollidiert das mit der eigenen Zentrierung von
   Login/Freischaltcode-Seite (admin/login.php, zugang.php, admin/setup.php), die
   ihr eigenes, einfaches Flex-Layout direkt am body mitbringen. */
.fs-website-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.fs-website-body main {
    flex: 1 0 auto;
}

/* Pro-Seite-Hintergrundbild: eigener fixer Layer hinter dem gesamten Inhalt, damit
   Helligkeit/Transparenz nur das Bild betreffen und nicht den Text lesbar machen -
   die dunkle body-Hintergrundfarbe scheint durch die Transparenz hindurch. */
.fs-seiten-hintergrund {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    pointer-events: none;
}

a,
a:visited {
    color: var(--fs-tuerkis);
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

/* Bootstraps Standard-Grau für ".text-muted"/".form-text" (z.B. Hilfetexte unter
   Formularfeldern im Admin-Bereich) passt farblich nicht zum Theme - auf die
   Theme-Graufarbe umstellen, damit es sich einfügt. */
.text-muted,
.form-text {
    color: var(--fs-text-muted) !important;
}

/* Bootstraps ".table-dark" (Admin-Listen: Kategorien, Berichte, Social Media, ...) ist
   noch aus der Zeit des dunklen Theme - auf dem inzwischen hellen Seitenhintergrund
   wirkt sie wie ein zu dunker Fremdkörper. Helles Salbeigrün statt Schwarz, damit sie
   sich wie die Karten (.fs-card) vom Weiß abhebt, aber nicht mehr dunkel ist. */
.table-dark {
    --bs-table-color: var(--fs-text);
    --bs-table-bg: var(--fs-flaeche-hell);
    --bs-table-border-color: var(--fs-rahmen);
    --bs-table-striped-bg: #e6f0ea;
    --bs-table-striped-color: var(--fs-text);
    --bs-table-active-bg: var(--fs-salbei);
    --bs-table-active-color: var(--fs-anthrazit);
    --bs-table-hover-bg: #dceae1;
    --bs-table-hover-color: var(--fs-text);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.table-dark thead th {
    background-color: var(--fs-salbei);
    color: var(--fs-anthrazit);
    border-color: var(--fs-rahmen);
}

/* Benutzer-Übersicht (admin/benutzer.php): zwei <tr> pro Benutzer (oben Name/E-Mail/
   Rolle/Anmelden-als, unten nur die Rechte-Häkchen, exakt unter den Spaltenköpfen
   ausgerichtet) - kräftigerer Trennstrich nach der unteren Zeile, damit trotz der
   zwei <tr> pro Person klar erkennbar bleibt, wo ein Benutzer aufhört und der
   nächste beginnt. */
.fs-benutzer-zeile-unten td {
    border-bottom: 3px solid var(--fs-grau);
}

/* Namenszeile bleibt immer einfarbig (eigene, feste Hintergrundfarbe statt die
   Spalten-Streifen von der Häkchen-Zeile darunter irgendwie durchscheinen zu lassen). */
.fs-benutzer-zeile-oben td {
    background-color: var(--fs-flaeche-hell);
}

/* Kopfzeile darf umbrechen (mehrzeilig), dadurch muss die Tabelle nicht breiter werden
   als die Karte und es ist kein seitliches Scrollen nötig. Bewusst kein
   table-layout:fixed (mehr) - die Spalten dürfen sich wieder an ihrem Inhalt
   orientieren (kurze Bezeichnungen schmaler, lange breiter) statt stur gleich breit
   zu sein. Die Namenszeile pro Benutzer hängt an keiner einzelnen schmalen Spalte,
   sondern an einem colspan über die komplette Tabellenbreite. */
#fs-benutzer-tabelle th {
    white-space: normal;
}

/* Spaltenweise abwechselnde Färbung (statt zeilenweise) - hilft, beim vielen Häkchen
   nebeneinander die richtige Spalte im Blick zu behalten. Nur auf der Häkchen-Zeile,
   nicht auf der Namenszeile (die ist eine einzige colspan-Zelle, kein Fall für
   Spalten-Zebrastreifen). */
#fs-benutzer-tabelle thead th:nth-child(odd),
#fs-benutzer-tabelle .fs-benutzer-zeile-unten td:nth-child(odd) {
    background-color: rgba(0, 51, 34, 0.08);
}

/* Bootstraps ".btn-outline-light" (Pfeile in Tabellen, "Ändern"/"Aus Mediathek wählen",
   Editor-Werkzeugleiste, ...) ist eigentlich für dunkle Hintergründe gedacht - auf dem
   inzwischen hellen Seiten- und Tabellen-Hintergrund war sie (fast) unsichtbar. Dunkler
   Rahmen/Text statt hellem, wie ein "outline-dark" - überall im Code unverändert nutzbar,
   da nur die Bootstrap-Variablen der Klasse selbst umdefiniert werden. */
.btn-outline-light {
    --bs-btn-color: var(--fs-anthrazit);
    --bs-btn-border-color: var(--fs-anthrazit);
    --bs-btn-hover-color: var(--fs-weiss);
    --bs-btn-hover-bg: var(--fs-anthrazit);
    --bs-btn-hover-border-color: var(--fs-anthrazit);
    --bs-btn-active-color: var(--fs-weiss);
    --bs-btn-active-bg: var(--fs-anthrazit);
    --bs-btn-active-border-color: var(--fs-anthrazit);
    --bs-btn-disabled-color: var(--fs-grau);
    --bs-btn-disabled-border-color: var(--fs-grau);
}

/* Manche dieser Buttons sind <a>-Links (z.B. "Admin-Login" auf der Wartungsseite) - der
   globale Link-Stil weiter oben hat für bereits besuchte Links (":visited") eine höhere
   Priorität als die --bs-btn-color-Variable oben und hätte sonst die Textfarbe hier
   überschrieben, sobald man den Link einmal angeklickt hatte. */
.btn-outline-light:visited {
    color: var(--fs-anthrazit);
}

/* ==========================================================================
   2. KOPF- UND FUSSZEILE
   ========================================================================== */

/* Navigationsleiste - Basis-Stil, wird von zwei Stellen genutzt: hier (öffentliche Seite,
   siehe .fs-kopfbereich weiter unten für die dortige Sonderbehandlung) UND unverändert
   von admin_header.php (dort weiterhin eine eigene, schlichte dunkle Leiste ohne Foto). */
.fs-navbar {
    background-color: rgba(0, 51, 34, var(--fs-navbar-deckkraft));
    border-bottom: 2px solid transparent;
    border-image: var(--fs-verlauf) 1;
}

.fs-navbar .navbar-brand,
.fs-navbar .nav-link,
.fs-navbar .navbar-brand:visited,
.fs-navbar .nav-link:visited {
    color: var(--fs-weiss);
    font-weight: 600;
    font-size: 16px;
}

.fs-navbar .nav-link:hover {
    color: var(--fs-signalgruen);
}

/* Mobile-Menü-Button (Hamburger-Icon) - Bootstraps Standard-Icon ist auf hellen
   Hintergründen gedacht und auf unserem dunklen Nav kaum zu erkennen. */
.fs-navbar .navbar-toggler {
    border-color: rgba(117, 187, 60, 0.5);
}

.fs-navbar .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2375bb3c' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Brotkrumen-Leiste direkt unter dem Kopfbereich - zeigt, auf welcher Seite man sich
   gerade befindet (siehe fs_breadcrumb_ermitteln() in includes/module_render.php). */
.fs-breadcrumb {
    background: var(--fs-hintergrund-hell);
    border-bottom: 1px solid var(--fs-rahmen);
    padding: 0.5rem 0;
    font-size: 0.85rem;
}


.fs-breadcrumb-trenner {
    color: var(--fs-text);
    opacity: 0.5;
    margin: 0 0.4rem;
}

.fs-breadcrumb-aktuell {
    color: var(--fs-text);
}

.fs-edit-toggle,
.fs-edit-toggle:visited {
    /* liegt auf der dunklen Navbar, daher wie der Nav-Hover das hellere Grün statt
       des für den hellen Seitenhintergrund gedachten --fs-gold */
    color: var(--fs-signalgruen) !important;
}

/* Menü-Buttons der Admin-Navigationsleiste (Seiten, Kategorien, Berichte, ...): dunkles
   Grün mit weißem Rand/Text wie die Fußzeile - eigene, speziellere Regel, weil dieselbe
   Bootstrap-Klasse (.btn-outline-light) weiter oben fürs helle Seiteninnere (Tabellen,
   Formulare) auf dunklen Rand/Text umgestellt wurde und hier auf der dunklen Navbar
   sonst kaum zu erkennen wäre. */
.fs-navbar .btn-outline-light {
    --bs-btn-color: var(--fs-weiss);
    --bs-btn-bg: var(--fs-gruen);
    --bs-btn-border-color: var(--fs-weiss);
    --bs-btn-hover-color: var(--fs-gruen);
    --bs-btn-hover-bg: var(--fs-weiss);
    --bs-btn-hover-border-color: var(--fs-weiss);
    --bs-btn-active-color: var(--fs-gruen);
    --bs-btn-active-bg: var(--fs-weiss);
    --bs-btn-active-border-color: var(--fs-weiss);
}

/* Gleicher Grund wie bei .btn-outline-light:visited weiter oben: die Menü-Buttons hier
   sind <a>-Links (Seiten, Kategorien, ...) - einmal angeklickt, hätte sonst der globale
   ":visited"-Link-Stil wieder gewonnen und die weiße Schrift überschrieben. */
.fs-navbar .btn-outline-light:visited {
    color: var(--fs-weiss);
}

/* --- Kopfbereich (Logo, Titel, Navigation) - wie auf der echten Vereinsseite: Foto über
   Salbeigrün-Fläche, Navigation transparent direkt darüber statt eigener dunkler Leiste.
   Überschreibt gezielt nur, was sich vom Basis-Navbar-Stil oben unterscheidet - der bleibt
   für admin_header.php unverändert. */
.fs-kopfbereich {
    position: relative;
    background-color: var(--fs-salbei);
    background-image: url("/assets/img/kopfbereich-hintergrund.jpg");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    border-bottom: 3px solid transparent;
    border-image: var(--fs-verlauf) 1;
}

/* Nur für eingeloggte Admins sichtbar (siehe includes/header.php): markiert Seiten, die
   für normale Besucher hinter dem Mitgliederbereich-Passwort liegen, damit man das beim
   Durchklicken als Admin nicht versehentlich für eine öffentliche Seite hält. */
.fs-kopfbereich-mitgliederbereich {
    box-shadow: inset 0 0 0 6px #ff2a2a;
}

/* "Kopfzeile-Deckkraft" aus den Website-Einstellungen wirkt hier als dunkle Abdunkelung
   über dem Foto (höherer Wert = dunkler/kontrastreicher, besser lesbar - niedrigerer Wert
   = Foto kommt unverfälschter durch) - vorher steuerte dieselbe Einstellung die Deckkraft
   der (inzwischen transparenten) Navigationsleiste, das fiel beim Umbau auf ein Foto weg. */
.fs-kopfbereich::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, calc(var(--fs-navbar-deckkraft) * 0.45));
    pointer-events: none;
}

.fs-kopfbereich-branding,
.fs-kopfbereich .fs-navbar {
    position: relative;
    /* Deutlich höher als jeder Wert, den ein einzelnes Modul (z.B. .fs-hero .container)
       verwendet - sonst kann ein Modul mit gleichem z-index, das im DOM nach der
       Kopfzeile kommt, deren Inhalte (u.a. das Vermietung-Untermenü) überdecken und
       ihm die Klicks wegschnappen, obwohl es sich nur optisch überschneidet. War genau
       der Grund für ein schwer nachvollziehbares "Untermenü lässt sich nicht anklicken,
       aber nur auf Seiten mit Hero-Modul"-Problem. */
    z-index: 10;
}

.fs-kopfbereich-branding {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 1.5rem 1rem 1rem;
}

.fs-kopfbereich-logo img {
    height: 90px;
    width: auto;
    filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.35));
}

.fs-kopfbereich-titel-block {
    min-width: 200px;
}

.fs-kopfbereich-titel {
    margin: 0;
    color: var(--fs-weiss);
    font-size: 1.6rem;
    font-weight: 700;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.45);
}

.fs-kopfbereich-untertitel {
    margin: 0.25rem 0 0;
    color: var(--fs-weiss);
    font-size: 1rem;
    font-weight: 400;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.45);
}

.fs-kopfbereich .fs-navbar {
    background-color: transparent;
    border-bottom: none;
    padding-top: 0;
    padding-bottom: 0.75rem;
}

.fs-kopfbereich .fs-navbar .nav-link,
.fs-kopfbereich .fs-navbar .nav-link:visited,
.fs-kopfbereich .fs-navbar .fs-edit-toggle,
.fs-kopfbereich .fs-navbar .fs-edit-toggle:visited {
    color: var(--fs-weiss) !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.45);
}

/* Dunkles Rot vom Wappen - dieselbe Hover-Farbe wie auf der echten Seite. */
.fs-kopfbereich .fs-navbar .nav-link:hover {
    color: var(--fs-rotakzent) !important;
}

.fs-kopfbereich .fs-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.6);
}

.fs-kopfbereich .fs-navbar .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Aufgeklapptes Mobil-Menü bekommt eine dezente dunkle Fläche - ohne die wäre der Text je
   nach Bildausschnitt an der Stelle teils schwer lesbar (variiert mit der Fensterbreite,
   anders als im Original mit seiner festen Breite). */
.fs-kopfbereich .navbar-collapse.show,
.fs-kopfbereich .navbar-collapse.collapsing {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 0.75rem 1rem;
}

.fs-dropdown-menu {
    background-color: var(--fs-hintergrund-hell);
    border: 1px solid rgba(117, 187, 60, 0.3);
}

.fs-dropdown-menu .dropdown-item,
.fs-dropdown-menu .dropdown-item:visited {
    color: var(--fs-text);
}

.fs-dropdown-menu .dropdown-item:hover,
.fs-dropdown-menu .dropdown-item:focus {
    background-color: rgba(117, 187, 60, 0.15);
    color: var(--fs-gold);
}

/* Fußzeile bleibt wie die Navbar bewusst dunkel (dunkelgrün, wie auf der echten
   Vereinsseite) - --fs-text-muted ist für den hellen Seitenhintergrund gedacht und
   wäre auf dunklem Grund unlesbar, daher hier fest ein helles Weiß-Grau. */
.fs-footer {
    flex-shrink: 0;
    background-color: rgba(0, 51, 34, var(--fs-footer-deckkraft));
    color: rgba(255, 255, 255, 0.75);
    border-top: 2px solid transparent;
    border-image: var(--fs-verlauf) 1;
    /* Die echte Vereinsseite hält den kompletten Footer bewusst kleiner/kompakter als
       den restlichen Seitentext (13px statt 16px) - wirkt dadurch aufgeräumter/gesetzter
       statt wie ein einfach fortgesetzter Fließtext-Block. */
    font-size: var(--fs-schrift-klein);
}

/* Module im Footer bringen (wie überall sonst) ein Text-Feld mit .fs-text-block mit,
   das inzwischen fest auf 16px gesetzt ist (einheitliche Lesegröße im normalen
   Seiteninhalt) - eine direkte Regel auf dem Element gewinnt in CSS immer gegen eine
   nur geerbte Größe vom Footer oben, deshalb hier gezielt wieder auf die Footer-Größe
   zurückgesetzt (sonst wirkt z.B. die "Wichtige Links"-Liste zu groß). */
.fs-footer .fs-text-block,
.fs-footer .fs-artikel-inhalt {
    font-size: var(--fs-schrift-klein);
}

/* Der Footer-Inhalt kommt aus einem frei belegbaren Modul (siehe footer.php) und
   kann eigene Links enthalten (z.B. Impressum/Datenschutz) - der globale Link-Stil
   weiter unten (var(--fs-gold), fürs helle Seiteninnere gedacht) wäre auf dem
   dunklen Footer-Hintergrund kaum lesbar. Wie im Original: Links bleiben durchgehend
   weiß, keine Farbänderung - nur beim Hover kommt eine Unterstreichung dazu. */
.fs-footer a,
.fs-footer a:visited {
    color: var(--fs-weiss);
    text-decoration: none;
}

.fs-footer a:hover {
    text-decoration: underline;
}

/* Gleicher Grund wie beim Link-Stil oben: das Kontaktformular-Modul kann jetzt auch in
   der Fußzeile stehen, seine Label-Farbe (var(--fs-text)) ist aber fürs helle
   Seiteninnere gedacht. Die Eingabefelder selbst brauchen keine Anpassung - die haben
   mit --fs-hintergrund-hell schon eine eigene helle Fläche für ihren dunklen Text. */
.fs-footer .form-label,
.fs-footer .form-check-label {
    color: var(--fs-weiss);
}

/* Eingabefelder in der Fußzeile bewusst dunkel statt hell - wie beim Kontaktformular
   der echten Vereinsseite (dort dunkelgrüner Feld-Hintergrund mit hellem Text, statt
   der sonst hier verwendeten hellen Fläche mit dunklem Text). */
.fs-footer .form-control,
.fs-footer .form-select {
    background-color: #002211;
    color: #c2c6cc;
    border-color: #3d3f43;
    /* etwas großzügiger als das sonstige, kompaktere Standard-Feld - wie im Original */
    padding: 0.75rem;
}

.fs-footer .form-control:focus,
.fs-footer .form-select:focus {
    background-color: #002211;
    color: #c2c6cc;
    border-color: var(--fs-orange);
    box-shadow: 0 0 0 0.2rem rgba(117, 187, 60, 0.25);
}

.fs-footer .form-control::placeholder {
    color: #83868b;
}

/* Abstand oben/unten wie im Original (dort 30px, nicht Bootstraps generisches py-5/48px). */
.fs-footer-oben {
    padding-top: 1.875rem;
    padding-bottom: 1.875rem;
}

/* Oberer Fußzeilen-Bereich: mehrere Module (typischerweise Kontaktformular, Adresse,
   Wichtige Links) sitzen nebeneinander statt - wie sonst überall - volle Breite
   untereinander. Ein generisches Grid statt fester Spaltenzahl, damit es auch mit
   mehr/weniger als drei Modulen sinnvoll umbricht. */
.fs-footer-oben .fs-modul-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2.5rem;
    align-items: start;
}

/* Module bringen ihr eigenes ".container" mit (fürs normale volle-Breite-Layout auf
   Seiten) - dessen feste Bootstrap-Breakpoint-Breite würde hier gegen die Grid-Spalte
   arbeiten, daher innerhalb des Fußzeilen-Grids deaktivieren. Die meisten Module bringen
   zusätzlich noch "py-3" mit (eigener Oben/Unten-Abstand, mit !important von Bootstrap) -
   ebenfalls entfernen, sonst addiert sich das zum Abstand von .fs-footer-oben oben und
   der Abstand zur ersten Überschrift wäre größer als im Original. */
.fs-footer-oben .fs-modul-liste .container {
    max-width: none;
    padding: 0 !important;
}

.fs-footer-oben h3 {
    color: var(--fs-weiss);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--fs-grau);
}

/* Der "Senden"-Button des Kontaktformulars ist im Original größer/großzügiger als
   ein normaler Button - fällt dadurch bewusst als Formular-Abschluss auf. */
.fs-footer .fs-kontakt .btn {
    font-size: 0.9375rem;
    padding: 0.75rem 2.5rem;
}

/* Trennlinie zwischen gestapelten Links (z.B. "Wichtige Links"-Liste) - wie im Original,
   dort eine <ul>/<li>-Liste, hier per <br> getrennt (siehe Fußzeilen-Inhalt) - daher über
   die Geschwister-Beziehung zum vorherigen <br> gelöst statt über :first-child o.Ä. */
.fs-footer-oben .fs-text-block a {
    display: inline-block;
}

.fs-footer-oben .fs-text-block br + a {
    padding-top: 0.5rem;
    border-top: 1px solid #c2c6cc;
}

/* Unterer Fußzeilen-Streifen: schmal, abgesetzt durch eine Trennlinie, Social-Media-
   Links und Copyright nebeneinander (bricht auf schmalen Bildschirmen untereinander um). */
.fs-footer-unten {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1rem 0;
}

.fs-footer-unten .fs-modul-liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem 2rem;
}

.fs-footer-unten .fs-modul-liste .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   3. FORMULARE (site-weit: Kontaktformular, Admin-Formulare, Login)
   ========================================================================== */

.fs-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Rechenaufgabe (Bot-Schutz): Text und Eingabefeld in einer Zeile statt wie sonst
   Label oben/Feld darunter - das Feld selbst bleibt ganz normal ".form-control", nur
   schmal und ohne eigene Zeile für sich. */
.fs-formel-zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.fs-formel-zeile .form-control {
    width: 70px;
    flex: 0 0 auto;
}

.form-control,
.form-select {
    background-color: var(--fs-hintergrund-hell);
    color: var(--fs-text);
    border-color: rgba(117, 187, 60, 0.3);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--fs-hintergrund-hell);
    color: var(--fs-text);
    border-color: var(--fs-orange);
    box-shadow: 0 0 0 0.2rem rgba(117, 187, 60, 0.25);
}

.form-control::placeholder {
    color: var(--fs-text-muted);
}

.form-label,
.form-check-label {
    color: var(--fs-text);
}

/* Einklappbarer Bereich in Admin-Formularen (z.B. Hintergrundbild-Einstellungen) */
.fs-collapse-pfeil {
    transition: transform 0.2s ease;
}

[aria-expanded="true"] .fs-collapse-pfeil {
    transform: rotate(180deg);
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

/* Nur die hellere Hälfte von --fs-verlauf (nicht das dunkle --fs-tiefgruen-Ende) -
   sonst wäre die weiße Schrift am dunklen Rand kaum noch lesbar. */
.fs-btn-fire,
.fs-btn-fire:visited {
    /* :visited extra dazu, da manche dieser Buttons <a>-Links sind (z.B. "Neuer Bericht")
       - der globale Link-Stil weiter oben hat für bereits besuchte Links sonst eine
       höhere Priorität als das Weiß hier, siehe gleicher Fall bei .btn-outline-light. */
    background: linear-gradient(90deg, var(--fs-gruen), var(--fs-signalgruen));
    border: none;
    color: var(--fs-weiss);
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 51, 34, 0.3);
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.fs-btn-fire:hover {
    filter: brightness(1.1);
    color: var(--fs-weiss);
    box-shadow: 0 4px 22px rgba(117, 187, 60, 0.55);
    transform: translateY(-2px);
}

/* ==========================================================================
   5. KARTEN, BILDER & LIGHTBOX (von mehreren Modulen gemeinsam genutzt)
   ========================================================================== */

.fs-card {
    /* Bootstrap-eigene Variable überschrieben statt nur border-radius direkt zu setzen -
       dadurch übernehmen auch die Kind-Elemente (z.B. das Titelbild oben) automatisch
       den größeren Radius an ihren Ecken, statt dort beim alten, kleineren Wert zu bleiben. */
    --bs-card-border-radius: 16px;
    background-color: var(--fs-hintergrund-hell);
    border: 1px solid rgba(117, 187, 60, 0.25);
    color: var(--fs-text);
    box-shadow: var(--fs-bild-schatten);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}

.fs-card:hover {
    transform: translateY(-4px);
    border-color: var(--fs-orange);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), 0 0 22px rgba(117, 187, 60, 0.28);
}

.fs-card .card-title {
    color: var(--fs-gold);
}

/* Berichte-Karten sollen unabhängig vom Seitenverhältnis des Titelbilds immer gleich
   hoch aussehen - object-fit:cover beschneidet das Bild, object-position (Bildausschnitt,
   pro Bericht einstellbar) legt fest, welcher Bereich dabei sichtbar bleibt. */
.fs-artikel-karten-bild {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Titelbild auf der Bericht-Detailseite mit gewähltem Ausschnitt (Rahmen) - gleiches
   Zielverhältnis wie die Berichte-Karte, damit der gespeicherte Ausschnitt nicht verzerrt. */
.fs-artikel-bild-ausschnitt {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
}

/* Titelbild auf der Bericht-Detailseite ohne gewählten Ausschnitt (nur Fokuspunkt) -
   bekommt jetzt dasselbe feste 4:3-Format wie die Berichte-Karte/der Rahmen-Modus, statt
   in seinem ursprünglichen Seitenverhältnis angezeigt zu werden (einheitliches Titelbild-
   Format website-weit). Der gewählte Fokuspunkt (object-position, inline gesetzt) bestimmt
   dabei, welcher Bildbereich sichtbar bleibt. */
img.fs-artikel-bild {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Bilder innerhalb von Freitext-Inhalten (Textmodul, Berichte) dürfen nie breiter als der Container werden */
.fs-text-block img,
.fs-artikel-inhalt img {
    max-width: 100%;
    height: auto;
}

/* "Anmerkungen"/"Klein" im Format-Dropdown der Editoren - erzeugen beim Anwenden per
   Browser noch ein <font size="1"/"2"> (execCommand('fontSize'), siehe editor.js/
   admin.js-Handler), das hier auf eine feste, von der Basis-Schriftgröße unabhängige
   Größe gebracht wird statt dem stark je nach Browser schwankenden Legacy-Standardwert
   zu vertrauen. "Anmerkungen" (size="1") für rechtliche Hinweise/Kleingedrucktes,
   "Klein" (size="2", etwas größer) für Text, der wie die Fußzeile aussehen soll -
   siehe --fs-schrift-klein, dieselbe Variable setzt auch die Fußzeilen-Grundgröße. */
.fs-text-block font[size="1"],
.fs-artikel-inhalt font[size="1"] {
    font-size: 0.75em;
}

.fs-text-block font[size="2"],
.fs-artikel-inhalt font[size="2"] {
    font-size: var(--fs-schrift-klein);
}

/* Tabellen innerhalb von Freitext-Inhalten (Textmodul, Berichte). KEIN display:block
   auf der Tabelle selbst (alter Mobile-Scroll-Trick) - das lässt Browser die
   Prozent-Breiten der Zellen ignorieren (sie werden nur korrekt gegen die Tabellen-
   breite berechnet, solange die Tabelle ihr echtes display:table behält) und die
   Spalten würden die 100% nicht ausfüllen. Stattdessen scrollt bei Bedarf der
   umschließende .fs-tabelle-scroll-Wrapper (siehe tabellen_editor.js: fsTabelleSkeleton). */
.fs-text-block table,
.fs-artikel-inhalt table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
}

.fs-text-block .fs-tabelle-scroll,
.fs-artikel-inhalt .fs-tabelle-scroll {
    overflow-x: auto;
}

.fs-text-block th,
.fs-text-block td,
.fs-artikel-inhalt th,
.fs-artikel-inhalt td {
    border: 1px solid rgba(30, 32, 34, 0.15);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.fs-text-block th,
.fs-artikel-inhalt th {
    background: rgba(117, 187, 60, 0.15);
    color: var(--fs-gold);
}

.fs-text-block tbody tr:nth-child(even),
.fs-artikel-inhalt tbody tr:nth-child(even) {
    background: rgba(0, 51, 34, 0.04);
}

/* Tabellen-Variante "Schlicht": kein Gitter, nur eine dünne Linie unter jeder Zeile,
   keine Kopfzeilen-Hervorhebung, keine Wechselfarbe (Klasse per Werkzeugleiste setzbar). */
.fs-text-block table.fs-tabelle-schlicht,
.fs-artikel-inhalt table.fs-tabelle-schlicht {
    border-collapse: collapse;
}

.fs-text-block table.fs-tabelle-schlicht th,
.fs-text-block table.fs-tabelle-schlicht td,
.fs-artikel-inhalt table.fs-tabelle-schlicht th,
.fs-artikel-inhalt table.fs-tabelle-schlicht td {
    border: none;
    border-bottom: 1px solid var(--fs-rahmen);
    background: none;
    color: inherit;
}

.fs-text-block table.fs-tabelle-schlicht tbody tr:nth-child(even),
.fs-artikel-inhalt table.fs-tabelle-schlicht tbody tr:nth-child(even) {
    background: none;
}

/* Tabellen-Variante "Ohne Format": weiterhin eine echte Tabelle (Zeilen/Spalten bleiben
   erhalten), aber komplett ohne jede optische Auszeichnung - kein Gitter, keine
   Kopfzeilen-Hervorhebung/Fettung, keine Wechselfarbe, nicht mal die dünne Linie von
   "Schlicht". */
.fs-text-block table.fs-tabelle-ohne-format th,
.fs-text-block table.fs-tabelle-ohne-format td,
.fs-artikel-inhalt table.fs-tabelle-ohne-format th,
.fs-artikel-inhalt table.fs-tabelle-ohne-format td {
    border: none;
    background: none;
    color: inherit;
    font-weight: normal;
}

.fs-text-block table.fs-tabelle-ohne-format tbody tr:nth-child(even),
.fs-artikel-inhalt table.fs-tabelle-ohne-format tbody tr:nth-child(even) {
    background: none;
}

/* Schwebende Überlagerung direkt an der Tabelle im Bearbeiten-Modus (siehe
   tabellen_editor.js: fsTabelleUeberlagerungEinrichten) - Zeile/Spalte hinzufügen/
   entfernen und Greifer zum Ziehen der Spalten-/Gesamtbreite. Lebt komplett außerhalb
   des contenteditable-Inhalts (an <body> angehängt), landet dadurch nie im
   gespeicherten HTML. */
.fs-tabelle-ueberlagerung {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1030;
}

.fs-tabelle-zeile-plus,
.fs-tabelle-spalte-plus,
.fs-tabelle-zeile-minus,
.fs-tabelle-spalte-minus,
.fs-tabelle-breite-griff,
.fs-tabelle-spalte-griff,
.fs-tabelle-zell-werkzeuge {
    position: fixed;
    pointer-events: auto;
}

.fs-tabelle-zeile-plus,
.fs-tabelle-spalte-plus {
    background: var(--fs-signalgruen);
    color: var(--fs-weiss);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    border-radius: 3px;
}

.fs-tabelle-zeile-plus:hover,
.fs-tabelle-spalte-plus:hover {
    opacity: 1;
}

.fs-tabelle-zeile-plus {
    height: 10px;
}

.fs-tabelle-spalte-plus {
    width: 10px;
}

.fs-tabelle-zeile-minus,
.fs-tabelle-spalte-minus {
    background: var(--fs-rotakzent);
    color: var(--fs-weiss);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 3px;
}

.fs-tabelle-zeile-minus {
    width: 18px;
}

.fs-tabelle-spalte-minus {
    height: 18px;
}

.fs-tabelle-breite-griff,
.fs-tabelle-spalte-griff {
    width: 6px;
    background: rgba(32, 144, 64, 0.35);
    cursor: col-resize;
    touch-action: none;
    border-radius: 3px;
}

.fs-tabelle-breite-griff:hover,
.fs-tabelle-spalte-griff:hover {
    background: var(--fs-signalgruen);
}

/* Schwebende Mini-Werkzeugleiste für die aktuelle Zelle: Textausrichtung (horizontal +
   vertikal) und Zeilenhöhe, je eine Zeile - gleiche dunkle Optik wie .fs-modul-controls,
   damit sie sich als Werkzeug statt als Seiteninhalt zu erkennen gibt. */
.fs-tabelle-zell-werkzeuge {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(30, 32, 34, 0.9);
    border-radius: 6px;
    padding: 3px 4px;
}

.fs-tabelle-zell-werkzeuge-zeile {
    display: flex;
    align-items: center;
    gap: 2px;
}

.fs-tabelle-zell-werkzeuge button {
    background: none;
    border: none;
    color: var(--fs-weiss);
    width: 22px;
    height: 22px;
    line-height: 1;
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
}

.fs-tabelle-zell-werkzeuge button:hover {
    background: rgba(255, 255, 255, 0.15);
}

.fs-tabelle-zell-werkzeuge button.active {
    background: var(--fs-signalgruen);
}

.fs-tabelle-zell-hoehe-eingabe {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    color: var(--fs-weiss);
    font-size: 0.75rem;
    width: 52px;
    height: 22px;
    text-align: center;
    padding: 0;
}

.fs-tabelle-zell-hoehe-eingabe:focus {
    outline: 1px solid var(--fs-signalgruen);
    background: rgba(255, 255, 255, 0.18);
}

.fs-tabelle-zell-werkzeuge-trenner {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.25);
    margin: 0 2px;
}

/* Bilder sollen generell etwas erhoben wirken (Titelbild, Bilder im Bericht-Text,
   Bildergalerie, Bild+Text-Modul) - Icon-Grid-Icons und das Hero-Hintergrundbild
   bleiben bewusst ausgenommen, da die als flache Fläche bzw. Icon wirken sollen. */
.fs-artikel-bild,
.fs-artikel-inhalt img,
.fs-galerie-bild {
    box-shadow: var(--fs-bild-schatten);
}

/* Bildergalerie-Vorschau: immer quadratisch zugeschnitten (unabhängig vom Seitenverhältnis
   des Originalbilds), drei nebeneinander ab Tablet-Breite (siehe modules/bildergalerie.module.php).
   Betrifft nur die kleine Vorschau - die Lightbox-Großansicht beim Anklicken zeigt das Bild
   bewusst weiterhin in seinen echten Maßen (eigenes <img> ohne diese Klasse, siehe site.js). */
.fs-galerie-bild {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Bild + Text: Schatten/Rahmen sind abschaltbar (Zahnrad-Einstellungen), damit sich das
   Bild bei Bedarf randlos in einen eigenen Modul-Hintergrund einfügt. Gleicher
   einheitlicher Schatten wie überall sonst (--fs-bild-schatten). */
.fs-bild-text img.fs-bild-rahmen-schatten {
    box-shadow: var(--fs-bild-schatten);
}

/* Einstellbare Spaltenaufteilung (Bild+Text sowie Spalten-Modul) statt der festen
   Bootstrap-Hälften col-md-6/col-md-6 - unter der md-Breakpoint bleibt es (wie col-12)
   bei voller Breite, erst ab da greift die per --fs-spalte-breite gesetzte Aufteilung. */
@media (min-width: 768px) {
    .fs-bild-text-spalte {
        flex: 0 0 var(--fs-spalte-breite, 50%);
        max-width: var(--fs-spalte-breite, 50%);
    }
}

/* "Zurück"-Link auf Bericht-/News-Detailseiten - folgt dem globalen Link-Stil
   (siehe a/a:hover oben), keine eigene Farbe/Unterstreichung mehr nötig. */

/* Lightbox: Berichte-Titelbild + Bilder im Bericht-Text sowie die Bildergalerie
   lassen sich anklicken, um das Bild groß anzuzeigen (siehe site.js) */
.fs-artikel-bild,
.fs-artikel-inhalt img {
    cursor: pointer;
}

/* Klickzonen links/rechts im großen Lightbox-Bild zum Blättern */
.fs-lightbox-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.fs-lightbox-zone:hover {
    opacity: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), transparent);
}

.fs-lightbox-zone-rechts:hover {
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.25), transparent);
}

.fs-lightbox-zone-links {
    left: 0;
}

.fs-lightbox-zone-rechts {
    right: 0;
}

/* ==========================================================================
   6. BILDAUSSCHNITT-AUSWAHL IM ADMIN (Titelbild-Karten, Slider-Bilder, News-Bild)
   Umschalter zwischen einfachem Klick-Fokuspunkt und ziehbarem Ausschnitt-Rahmen.
   ========================================================================== */

.fs-fokuspunkt-umschalter {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.fs-fokuspunkt-umschalter button {
    flex: 1;
    border: 1px solid rgba(30, 32, 34, 0.25);
    background: transparent;
    color: var(--fs-text-muted);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.75rem;
    cursor: pointer;
}

.fs-fokuspunkt-umschalter button.active {
    border-color: var(--fs-orange);
    color: var(--fs-orange);
}

.fs-fokuspunkt-anzeige {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: #000;
}

/* Modus "Punkt": Klick irgendwo im Bild setzt den Fokuspunkt (Marker-Kreis) */
.fs-fokuspunkt-anzeige > img {
    cursor: crosshair;
}

.fs-fokuspunkt-masse {
    margin-top: 4px;
}

.fs-fokuspunkt-marker {
    position: absolute;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    margin-top: -9px;
    border: 2px solid var(--fs-gold);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

/* Modus "Ausschnitt": ganzes Bild sichtbar, Rahmen zieh-/vergrößerbar (auch touch) */
.fs-ausschnitt-bildwrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.fs-ausschnitt-verhaeltnis-wrap {
    margin-top: 4px;
    font-size: 0.8rem;
}

.fs-ausschnitt-rahmen {
    position: absolute;
    border: 2px solid var(--fs-gold);
    background: rgba(32, 144, 64, 0.15);
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.55);
    cursor: move;
    touch-action: none;
}

.fs-ausschnitt-griff {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--fs-signalgruen);
    border: 2px solid var(--fs-weiss);
    cursor: nwse-resize;
    touch-action: none;
}

/* ==========================================================================
   7. INHALTS-MODULE (je ein Abschnitt pro Datei in modules/*.module.php)
   ========================================================================== */

/* Verhindert bei JEDEM Modul, dass Inhalt über den eigenen Wrapper hinausragt und so eine
   dünne, unpassend gefärbte Nahtlinie zum Nachbarmodul entstehen lässt. Zwei getrennte
   Ursachen, beide über overflow:hidden abgedeckt (das erzeugt nebenbei denselben
   Containment-Effekt wie display:flow-root, deckt zusätzlich aber auch den zweiten Fall
   mit ab):
   1. Ein Kind-Element mit eigenem margin statt padding (z.B. eine Überschrift) "schlägt"
      sonst nach CSS-Regeln (Margin-Collapsing) nach außen durch.
   2. Bootstraps Grid ("row g-*", genutzt in Berichte-Liste/Bildergalerie/Icon-Grid/
      Kennzahlen) setzt auf die Zeile einen negativen oberen Rand, der größer sein kann
      als der eigene Innenabstand des Moduls - die Karten ragen dadurch ein paar Pixel
      über den oberen Rand des Moduls hinaus.
   In beiden Fällen landet der überstehende Bereich außerhalb der Hintergrundfarbe des
   Moduls, und die weiße Seite scheint dort als dünne Naht zum Nachbarmodul durch -
   unabhängig davon, welches der beiden Module die Hintergrundfarbe hat, deshalb hier an
   der Basis-Klasse statt nur bei .fs-modul-hintergrund-aktiv. */
.fs-modul-wrapper {
    overflow: hidden;
}

/* Optionale Hintergrundfarbe je Modul, für jeden Modultyp einheitlich (siehe
   fs_render_modul() in includes/module_render.php) - geht über die volle
   Fensterbreite, unabhängig davon, dass der Modulinhalt selbst über die schmalere
   .container-Breite zentriert bleibt. Klassischer "Full-Bleed"-Trick: die Fenster-
   breite (100vw) nutzen und wieder um die halbe Fensterbreite zurückrücken. */
.fs-modul-hintergrund-aktiv {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    /* 1px Überlapp nach unten: der "transform"-Trick oben zwingt den Browser, diese
       Fläche in eine eigene Grafik-Ebene zu rendern (wegen transform + halbdurchsichtiger
       Farbe) - beim Zusammensetzen zweier solcher Ebenen kann es am gemeinsamen Rand zu
       einem hauchdünnen, falsch gerundeten Spalt kommen, durch den die weiße Seite
       durchscheint. Der Überlapp deckt das zuverlässig ab, unabhängig von der
       Rundungsrichtung. */
    margin-bottom: -1px;
}

/* Der Full-Bleed-Trick oben ist nur für Module auf oberster Ebene korrekt - innerhalb
   einer Spalte eines "spalten"-Moduls (siehe .fs-spalten-spalte weiter unten) würde er
   aus der schmalen Spalte herausbrechen. Dort füllt die Hintergrundfarbe stattdessen
   nur die Spaltenbreite. */
.fs-spalten-spalte .fs-modul-hintergrund-aktiv {
    width: 100%;
    margin-left: 0;
    transform: none;
}

/* --- Hero ----------------------------------------------------------------- */
/* Bewusst keine eigene Hintergrundfarbe - ein Seiten-Hintergrundbild (falls gesetzt) soll immer
   durchscheinen, auch wenn das Hero-Modul selbst ein Bild zeigt. */
.fs-hero {
    position: relative;
    overflow: hidden;
}

.fs-hero-bild-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.18;
}

/* Breite kommt als Inline-Style aus $config['bild_groesse'] (Prozent, siehe hero.module.php) */
.fs-hero-bild {
    max-width: 100%;
    filter: blur(1px);
}

.fs-hero .container {
    position: relative;
    z-index: 1;
}

.fs-hero-titel {
    font-family: "Droid Serif", Georgia, serif;
    font-style: italic;
    font-size: 3rem;
    font-weight: 400;
    background: var(--fs-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fs-hero-text {
    font-size: 1.25rem;
    color: var(--fs-text-muted);
}

/* --- Vollbild-Bild ----------------------------------------------------------- */
.fs-bild-vollbreite {
    overflow: hidden;
}

.fs-bild-vollbreite-bild {
    display: block;
    width: 100%;
    object-fit: cover;
}

/* --- Schlichtes Bild-Modul (Breite bestimmt die Größe statt volle Fensterbreite,
   siehe modules/bild.module.php) - Ecken/Schatten unabhängig voneinander zuschaltbar
   (anders als beim kombinierten Schalter bei "Bild + Text"). display:inline-block
   ist wichtig, damit die Links/Mittig/Rechts-Ausrichtung (text-align auf dem
   Container, siehe Modul) tatsächlich greift. */
.fs-bild-modul-bild {
    display: inline-block;
    object-fit: cover;
}

.fs-bild-modul-bild.fs-bild-modul-schatten {
    box-shadow: var(--fs-bild-schatten);
}

.fs-bild-modul-bild.fs-bild-modul-rund {
    border-radius: 50%;
}

.fs-bild-modul-text {
    margin-top: 0.75rem;
    color: var(--fs-text);
}

/* --- Vollbild (volle Breite UND volle Fensterhöhe) --------------------------- */
.fs-vollbild {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.fs-vollbild-bild {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Werbebanner-Rotator ----------------------------------------------------- */
.fs-banner-rotator {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 0;
}

.fs-banner-rotator-bild {
    display: block;
    width: 500px;
    max-width: 100%;
    height: 150px;
    object-fit: contain;
    object-position: center;
    border-radius: 6px;
}

.fs-banner-rotator-text {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--fs-text-muted);
}

/* --- Video-Hero ------------------------------------------------------------ */
.fs-video-hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    border-radius: 8px;
}

/* --- Slider ----------------------------------------------------------------- */
.fs-slider .carousel-inner {
    border-radius: 8px;
}

.fs-slider .carousel-item .fs-slider-bild {
    border-radius: 8px;
}

/* Schatten ist abschaltbar (Zahnrad-Einstellungen, wie beim Modul "Bild + Text").
   Sitzt auf dem äußeren Carousel-Rahmen, nicht auf dem Bild selbst oder auf
   .carousel-inner: beide haben "overflow: hidden" (Bootstrap braucht das fürs
   Slide-Verhalten), was einen dort gesetzten Schatten sofort wieder abschneiden
   würde - er wäre unsichtbar, egal ob an oder aus. Eigener, kräftigerer Schatten als
   --fs-bild-schatten (bewusst separat, nicht die gemeinsame Variable). */
.fs-slider .carousel.fs-slider-schatten {
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.6);
    border-radius: 8px;
}

.fs-slider-beschriftung {
    margin-top: 12px;
}

.fs-slider-beschriftung-text {
    color: var(--fs-text-muted);
    font-style: italic;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0;
}

/* --- Icon-Feature-Grid ------------------------------------------------------- */
.fs-icon-grid-item {
    background-color: var(--fs-hintergrund-hell);
    border: 1px solid rgba(117, 187, 60, 0.2);
    border-radius: 12px;
    padding: 1.75rem;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}

.fs-icon-grid-item:hover {
    transform: translateY(-4px);
    border-color: var(--fs-orange);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 20px rgba(117, 187, 60, 0.25);
}

.fs-icon-grid-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.fs-icon-grid-bild {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 0.75rem;
}

.fs-icon-grid-item h5 {
    color: var(--fs-gold);
}

/* --- Checkliste (Aufzählung mit Pfeil-Icons, Einträge wahlweise Text oder Link) --- */
/* Titel-Typografie + der textbreite grüne Strich sind 1:1 von der Originalseite
   übernommen (Überschrift "Vorderer und hinterer Saal" unter
   schuetzenkorps-walsrode.de/vermietung, per Browser-Inspektion abgelesen: border-bottom
   direkt auf der Überschrift, width:fit-content sorgt dafür, dass er genau so breit wie
   der Text ist). Die graue Fortsetzungslinie + der grüne Pfeil rechts daneben stammen aus
   dem separaten Vorbild-Screenshot des Nutzers (Prinzip "PREISLISTE") - beides in einer
   Zeile kombiniert, align-items:flex-end richtet die dünne graue Linie an der Unterkante
   des grünen Strichs aus. */
.fs-checkliste-titelzeile {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1.25rem;
}

.fs-checkliste-titel {
    flex: 0 0 auto;
    width: fit-content;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--fs-signalgruen);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fs-text-muted);
    white-space: nowrap;
}

.fs-checkliste-linie-rest {
    flex: 1 1 auto;
    height: 1px;
    margin-bottom: 10px;
    background: var(--fs-rahmen);
}

.fs-checkliste-linie-pfeil {
    flex: 0 0 auto;
    margin-bottom: 3px;
    color: var(--fs-signalgruen);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.fs-checkliste-eintrag {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}

.fs-checkliste-pfeil {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--fs-signalgruen);
    color: var(--fs-weiss);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.fs-checkliste-eintrag a {
    color: var(--fs-tuerkis);
    font-weight: 400;
    text-decoration: none;
}

.fs-checkliste-eintrag a:hover {
    text-decoration: underline;
}

.fs-checkliste-text {
    color: var(--fs-text);
}

/* --- Interesse-Box (Überschrift + drehender Kreis-/Rechteck-Button, siehe
   "Haben wir Ihr Interesse geweckt?" auf schuetzenkorps-walsrode.de/vermietung) ---- */
.fs-interessebox-titel {
    text-align: center;
    font-size: 1.6rem;
    color: var(--fs-text-muted);
    margin-bottom: 1.25rem;
}

.fs-interessebox-reihe {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.fs-interessebox-linie {
    flex: 1 1 auto;
    height: 1px;
    background: var(--fs-rahmen);
}

.fs-interessebox-knopf,
.fs-interessebox-knopf:visited,
.fs-interessebox-knopf:active,
.fs-interessebox-knopf:hover {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--fs-weiss);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    padding: 0.5rem;
    transition: transform 0.4s ease;
}

/* Kreis: dreht sich im Uhrzeigersinn (wie zuvor). */
.fs-interessebox-kreis:hover {
    transform: rotate(360deg);
}

/* Rechteck: statt im Uhrzeigersinn horizontal um die eigene Hochachse - wie an einem
   Bindfaden hängend, das jemand angestoßen hat. */
.fs-interessebox-rechteck:hover {
    transform: perspective(600px) rotateY(360deg);
}

.fs-interessebox-kreis {
    width: 130px;
    height: 130px;
    border-radius: 50%;
}

.fs-interessebox-rechteck {
    width: 220px;
    height: 80px;
    border-radius: 10px;
}

/* --- Kennzahlen/Stats -------------------------------------------------------- */
.fs-kennzahl-zahl {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    background: var(--fs-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fs-kennzahl-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --- Zitat/Testimonial ---------------------------------------------------------
   Sprechblasen-Optik wie auf der echten Vereinsseite (dort per RockSolid-Slider-
   Testimonial-Skin): weißer Kasten mit dünnem Rahmen und einer kleinen Ecke unten
   rechts (klassischer Zwei-Dreiecke-Trick), Autor darunter rechtsbündig.
   Alle Zitate liegen im selben CSS-Grid-Bereich übereinander (.fs-zitat-stapel) -
   dadurch richtet sich die Höhe automatisch am GRÖSSTEN Zitat aus, kein Springen
   beim Wechsel. Ein-/Ausblenden nur per opacity, nie per display, damit jedes
   Zitat weiter zur Höhenberechnung beiträgt. */
.fs-zitat-stapel {
    display: grid;
}

.fs-zitat-stapel .fs-zitat-eintrag {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.fs-zitat-stapel .fs-zitat-eintrag.fs-zitat-aktiv {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.fs-zitat-blase {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    padding: 1.75rem 2rem;
    background: var(--fs-hintergrund);
    border: 1px solid var(--fs-rahmen);
    box-shadow: var(--fs-bild-schatten);
}

.fs-zitat-blase::before,
.fs-zitat-blase::after {
    content: '';
    position: absolute;
    right: 29px;
    bottom: -22px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22px 22px 0 0;
}

.fs-zitat-blase::before {
    border-color: var(--fs-rahmen) transparent transparent;
}

.fs-zitat-blase::after {
    right: 30px;
    bottom: -20px;
    border-color: var(--fs-hintergrund) transparent transparent;
}

.fs-zitat-text {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--fs-text);
    margin-bottom: 0;
}

.fs-zitat-autor {
    max-width: 700px;
    margin: 1.75rem auto 0;
    padding-right: 2rem;
    text-align: right;
    color: var(--fs-text-muted);
    font-size: 0.95rem;
}

.fs-zitat-steuerung {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.fs-zitat-prev,
.fs-zitat-next {
    background: none;
    border: none;
    padding: 0 0.4rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--fs-text-muted);
    cursor: pointer;
}

.fs-zitat-prev:hover,
.fs-zitat-next:hover {
    color: var(--fs-gruen);
}

.fs-zitat-punkte {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fs-zitat-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--fs-rahmen);
    cursor: pointer;
}

.fs-zitat-dot-aktiv {
    background: var(--fs-signalgruen);
}

/* --- Akkordeon/FAQ ------------------------------------------------------------ */
.fs-akkordeon .accordion-item {
    background-color: var(--fs-hintergrund-hell);
    border: 1px solid rgba(117, 187, 60, 0.25);
}

.fs-akkordeon .accordion-button {
    background-color: transparent;
    color: var(--fs-text);
    font-weight: 600;
}

.fs-akkordeon .accordion-button:not(.collapsed) {
    background-color: rgba(117, 187, 60, 0.12);
    color: var(--fs-gold);
    box-shadow: none;
}

.fs-akkordeon .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(117, 187, 60, 0.25);
}

.fs-akkordeon .accordion-body {
    color: var(--fs-text-muted);
}

/* Sortier-Pfeile direkt an einer FAQ-Frage im Bearbeiten-Modus */
.fs-akkordeon-steuerung {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0 0.5rem;
    background: var(--fs-hintergrund-hell);
}

.fs-akkordeon-steuerung button {
    border: 1px solid rgba(30, 32, 34, 0.3);
    background: transparent;
    color: var(--fs-text);
    border-radius: 4px;
    width: 26px;
    height: 22px;
    line-height: 1;
    font-size: 0.8rem;
    cursor: pointer;
}

.fs-akkordeon-steuerung button:hover:not(:disabled) {
    border-color: var(--fs-orange);
    color: var(--fs-orange);
}

.fs-akkordeon-steuerung button:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Mini-Rich-Text-Feld für die FAQ-Antwort im Zahnrad-Einstellungsfenster */
.fs-akkordeon-antwort-editor {
    min-height: 110px;
    max-height: 260px;
    overflow-y: auto;
}

/* --- News ---------------------------------------------------------------------- */
/* Schlanke Textliste statt Bild-Karten (bewusst anders als Berichte) */
.fs-news-liste {
    max-width: 800px;
}

.fs-news-titel {
    margin-bottom: 0.25rem;
    font-size: 1.4rem;
}

.fs-news-titel a {
    color: var(--fs-text);
    text-decoration: none;
}

.fs-news-titel a:hover {
    color: var(--fs-gold);
}

.fs-news-datum {
    color: var(--fs-text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.fs-news-teaser {
    color: var(--fs-text-muted);
}

.fs-news-weiterlesen {
    white-space: nowrap;
}

.fs-news-trenner {
    border: none;
    border-top: 1px solid rgba(30, 32, 34, 0.12);
    width: 75%;
    margin: 1.5rem auto;
}

.fs-news-eintrag:last-of-type + .fs-news-trenner {
    display: none;
}

/* --- Call-to-Action-Banner ------------------------------------------------------- */
.fs-cta-box {
    background: linear-gradient(135deg, rgba(0, 51, 34, 0.15), rgba(117, 187, 60, 0.1));
    border: 1px solid rgba(117, 187, 60, 0.35);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

.fs-cta-box h3 {
    color: var(--fs-gold);
}

/* --- Trenner --------------------------------------------------------------------- */
/* Farbe/Stärke/Muster/Breite kommen als Inline-Style aus $config (siehe trenner.module.php) -
   hier nur die Zentrierung, falls die Breite unter 100% liegt. */
.fs-trenner hr {
    opacity: 1;
    margin-left: auto;
    margin-right: auto;
}

/* --- Abstandshalter (reines Platzhalter-Modul, siehe modules/abstand.module.php) --- */
.fs-abstand-editansicht {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(32, 144, 64, 0.4);
}

.fs-abstand-label {
    font-size: 0.75rem;
    color: var(--fs-text-muted);
    background-color: var(--fs-hintergrund-hell);
    padding: 2px 8px;
    border-radius: 4px;
}

/* --- Social-Media-Links (Logo/Text/Link zentral unter admin/social_links.php gepflegt) -- */
.fs-social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fs-social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.15s ease;
}

.fs-social-links a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.fs-social-links img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* --- Belegungsplan (Jahresübersicht, siehe modules/belegungsplan.module.php) ------- */
.fs-belegungsplan-titel {
    text-align: center;
    margin-bottom: 1.5rem;
}

.fs-belegungsplan-jahr-gruppe {
    padding-top: 1.5rem;
    border-top: 2px solid var(--fs-gruen);
}

.fs-belegungsplan-jahr-gruppe:first-child {
    padding-top: 0;
    border-top: none;
}

.fs-belegungsplan-jahrestitel {
    font-family: "Droid Serif", Georgia, serif;
    font-style: italic;
    font-size: 2rem;
    color: var(--fs-gruen);
    text-align: center;
    margin-bottom: 1.5rem;
}

.fs-belegungsplan-monat-wrapper {
    margin-bottom: 1.5rem;
}

.fs-belegungsplan-monatstitel {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.fs-belegungsplan-tabelle {
    border-collapse: collapse;
    width: 100%;
}

.fs-belegungsplan-tabelle th {
    font-size: 0.7rem;
    font-weight: 400;
    text-align: center;
    padding: 2px;
    color: var(--fs-text-muted);
    white-space: nowrap;
}

.fs-belegungsplan-tabelle td {
    width: 22px;
    height: 22px;
    border: 1px solid var(--fs-weiss);
}

.fs-belegungsplan-frei {
    background-color: var(--fs-salbei);
}

.fs-belegungsplan-belegt {
    background-color: var(--fs-rotakzent);
}

.fs-belegungsplan-halb-vormittag {
    /* Vormittags (linke Hälfte) belegt, nachmittags frei */
    background: linear-gradient(to right, var(--fs-rotakzent) 50%, var(--fs-salbei) 50%);
}

.fs-belegungsplan-halb-nachmittag {
    /* Vormittags frei, nachmittags (rechte Hälfte) belegt */
    background: linear-gradient(to right, var(--fs-salbei) 50%, var(--fs-rotakzent) 50%);
}

.fs-belegungsplan-feiertag {
    /* Zusätzlich zu frei/belegt/halb - unabhängig vom Belegungsstatus erkennbar.
       Kräftiges Orange statt Gelb, da Gelb auf dem hellen Salbeigrün kaum auffiel. */
    outline: 3px solid #ff7a00;
    outline-offset: -3px;
}

/* --- PDF-Buch (durchblätterbare PDF, siehe pdf_buch.js) ---------------------------- */
.fs-pdf-buch-viewer {
    background-color: var(--fs-hintergrund-hell);
    border: 1px solid rgba(117, 187, 60, 0.2);
    border-radius: 8px;
}

/* Einzelne Buchseite (siehe pdf_buch.js) - weißer Hintergrund, da PDF-Seiten
   selbst meist weiß sind, bis die eigentliche Seite als <canvas> nachgeladen ist. */
.fs-pdf-buch-seite {
    width: 100%;
    height: 100%;
    background: #fff;
}

.fs-pdf-buch-canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- PDF "Einzelseite mit Buttons" (kein Umblätter-Effekt, siehe pdf_buch.js:
   initialisierenEinzelseiteButtons) - eine Seite als <canvas> plus Zurück/Weiter-Leiste
   darunter, beides zusammen innerhalb der festen Höhe des Moduls. Bewusst ohne
   Übergangs-Animation und ohne von StPageFlip abgefangene Touch-Gesten, damit sich der
   Seiteninhalt auf dem Handy normal per Pinch-Geste zoomen lässt. */
.fs-pdf-einzelseite {
    display: flex;
    flex-direction: column;
}

.fs-pdf-einzelseite-bereich {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.fs-pdf-einzelseite-canvas {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.fs-pdf-einzelseite-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.fs-pdf-einzelseite-btn {
    background: var(--fs-tiefgruen);
    color: var(--fs-weiss);
    border: none;
    border-radius: 20px;
    padding: 0.4rem 1rem;
    cursor: pointer;
}

.fs-pdf-einzelseite-btn:hover:not(:disabled) {
    background: var(--fs-gruen);
}

.fs-pdf-einzelseite-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.fs-pdf-einzelseite-anzeige {
    font-size: 0.9rem;
    white-space: nowrap;
}

/* --- Farbblock-Textmodule ---------------------------------------------------------- */
/* Farbige Fläche bündig mit dem Bildschirmrand, läuft als Verlauf über die gesamte
   Breite der nutzbaren Content-Spalte aus (nicht über einen unabhängigen Bildschirm-
   Prozentsatz) - links- und rechtsbündige Variante. Die mittlere Rasterspalte
   entspricht in etwa der Breite eines Bootstrap-Containers. */
.fs-farbblock {
    position: relative;
    display: grid;
    grid-template-columns: minmax(1rem, 1fr) min(1140px, 100% - 3rem) minmax(1rem, 1fr);
    align-items: stretch;
    /* Symmetrisches Padding statt fester Mindesthöhe - bleibt bei jeder Textmenge
       gleichmäßig oben/unten, macht die Zentrierung sichtbar (~40px mehr Höhe
       insgesamt als vorher). */
    padding: 3rem 0;
}

.fs-farbblock-flaeche {
    grid-row: 1;
    align-self: stretch;
}

/* Der Farbverlauf selbst kommt als Inline-Style direkt aus dem Modul (siehe
   farbblock.module.php) - dort pro Modul einstellbar, statt hier fest. */
.fs-farbblock-links .fs-farbblock-flaeche {
    grid-column: 1 / 3;
    border-radius: 0 20px 20px 0;
}

.fs-farbblock-rechts .fs-farbblock-flaeche {
    grid-column: 2 / 4;
    border-radius: 20px 0 0 20px;
}

.fs-farbblock-inhalt {
    grid-column: 2 / 3;
    grid-row: 1;
    align-self: center;
    position: relative;
    z-index: 1;
    padding: 0.5rem 1.5rem;
    color: var(--fs-text);
}

@media (max-width: 767.98px) {
    .fs-farbblock {
        grid-template-columns: 1fr;
    }

    .fs-farbblock-links .fs-farbblock-flaeche,
    .fs-farbblock-rechts .fs-farbblock-flaeche {
        grid-column: 1 / 2;
        border-radius: 0;
    }

    .fs-farbblock-inhalt {
        grid-column: 1 / 2;
    }
}

/* --- Berichte-Liste: Master-Stern (Kategorie-Hauptbericht) -------------------------- */
.fs-master-badge {
    display: inline-block;
    color: var(--fs-gold);
    margin-left: 0.25rem;
    font-size: 1rem;
    vertical-align: middle;
}

.fs-artikel-master-stern {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.fs-artikel-master-stern:hover {
    border-color: var(--fs-gold);
    color: var(--fs-gold);
}

.fs-artikel-master-stern.ist-master {
    background: var(--fs-gold);
    border-color: var(--fs-gold);
    color: var(--fs-weiss);
}

/* --- Termin-Kalender (siehe modules/kalender.module.php, includes/termine.php) -----
   Farben 1:1 von der echten Vereinsseite abgelesen (getComputedStyle). ------------- */
.fs-termine-kalender-nav {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 1rem 0;
    font-weight: 600;
}

.fs-termine-kalender-nav a {
    color: var(--fs-gruen);
}

.fs-termine-kalender-monatstitel {
    font-family: "Droid Serif", Georgia, serif;
    font-style: italic;
    text-align: center;
    color: var(--fs-gruen);
    margin-bottom: 1rem;
}

.fs-termine-kalender-tabelle {
    border-collapse: collapse;
    width: 100%;
}

.fs-termine-kalender-tabelle th {
    background: #eeeeff;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    padding: 8px 4px;
    color: var(--fs-text);
}

.fs-termine-kalender-tabelle th:not(.fs-termine-wochenende) {
    background: transparent;
}

.fs-termine-kalender-tabelle td {
    vertical-align: top;
    width: 14.28%;
    height: 120px;
    padding: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #f7f7f7;
}

.fs-termine-kalender-tabelle td.fs-termine-leer {
    background: transparent;
    border: none;
}

.fs-termine-kalender-tabelle td.fs-termine-wochenende {
    background: #eeeeff;
}

.fs-termine-kalender-tabelle td.fs-termine-heute {
    background: #ffd6b9;
}

/* Feiertag (Niedersachsen, siehe fs_feiertag_name() in includes/belegungsplan.php) */
.fs-termine-kalender-tabelle td.fs-termine-feiertag {
    outline: 1px solid #ffcc00;
    outline-offset: -1px;
}

.fs-termine-feiertag-name {
    display: block;
    font-size: 0.75rem;
    font-style: italic;
    color: #ff7a00;
    margin-bottom: 3px;
}

.fs-termine-tag-nummer {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fs-text);
    margin-bottom: 3px;
}

.fs-termine-tag-link {
    display: block;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--fs-rotakzent);
    text-decoration: none;
    margin-bottom: 3px;
}

.fs-termine-tag-link:hover {
    text-decoration: underline;
}

.fs-termine-hervorgehoben {
    font-weight: 700;
}

/* --- Nächste Termine (siehe modules/naechste_termine.module.php) ------------------- */
.fs-naechste-termine-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fs-naechste-termine-liste li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--fs-rahmen);
}

.fs-naechste-termine-liste a {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
}

.fs-naechste-termine-datum {
    color: var(--fs-text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Textausrichtung (Zahnrad-Einstellung) - wirkt auf die Flex-Zeile aus Datum+Titel. */
.fs-naechste-termine-mittig .fs-naechste-termine-liste a {
    justify-content: center;
    text-align: center;
}

.fs-naechste-termine-rechts .fs-naechste-termine-liste a {
    justify-content: flex-end;
    text-align: right;
}

/* ==========================================================================
   8. FRONTEND-EDITOR (nur im Bearbeitungsmodus, ?bearbeiten=1)
   ========================================================================== */

.fs-bearbeiten-modus .fs-modul-wrapper {
    position: relative;
    outline: 1px dashed rgba(32, 144, 64, 0.4);
    outline-offset: 4px;
    margin-bottom: 0.5rem;
    /* Klare Trennlinie oben an jedem Modul, damit im Bearbeiten-Modus sofort sichtbar
       ist, wo ein Modul endet und das nächste beginnt (siehe .fs-modul-typ-label). */
    border-top: 3px solid var(--fs-signalgruen);
}

/* Beschriftung mit dem Modultyp, oben links auf der Trennlinie - gleiche dunkle Optik
   wie .fs-modul-controls, damit sie sich als Bearbeiten-Werkzeug zu erkennen gibt. */
.fs-modul-typ-label {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 5;
    background: rgba(30, 32, 34, 0.85);
    color: var(--fs-weiss);
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
}

.fs-bearbeiten-modus [contenteditable="true"] {
    outline: 1px dotted rgba(117, 187, 60, 0.5);
    cursor: text;
    min-height: 1.2em;
}

.fs-bearbeiten-modus [contenteditable="true"]:focus {
    outline: 2px solid var(--fs-orange);
}

.fs-gespeichert {
    outline: 2px solid #3cc26e !important;
    transition: outline-color 0.3s ease;
}

/* Bilder in Textfeldern per Ziehen verkleinern/vergrößern (siehe assets/js/bild_groesse.js).
   Der Auswahlrahmen ist bewusst ein eigenes, separates Overlay-Element (nie eine
   Klasse auf dem Bild selbst) - siehe Kommentar am Dateianfang von bild_groesse.js. */
.fs-bild-auswahlrahmen {
    position: absolute;
    z-index: 1999;
    pointer-events: none;
    outline: 2px solid var(--fs-orange);
    outline-offset: 2px;
}

.fs-bild-groesse-griff {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--fs-orange);
    border: 2px solid var(--fs-weiss);
    border-radius: 50%;
    cursor: nwse-resize;
    z-index: 2000;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Werkzeugleiste zum Wählen des Textumlaufs (kein Umlauf/links/rechts), erscheint
   über dem ausgewählten Bild. */
.fs-bild-umlauf-leiste {
    position: absolute;
    z-index: 2000;
    display: flex;
    gap: 2px;
    background: rgba(30, 32, 34, 0.9);
    border-radius: 6px;
    padding: 3px;
}

.fs-bild-umlauf-leiste button {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--fs-weiss);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.fs-bild-umlauf-leiste button:hover {
    background: rgba(255, 255, 255, 0.15);
}

.fs-bild-umlauf-leiste button.fs-bild-umlauf-aktiv {
    background: var(--fs-orange);
    color: var(--fs-anthrazit);
}

/* Grundabstand für alle in Textfelder eingefügten Bilder, damit sie nicht direkt am
   Text kleben - bei gewähltem Textumlauf (links/rechts) wird das per Inline-Style
   (siehe bild_groesse.js) noch um einen seitlichen Abstand ergänzt. */
.fs-text-block img,
.fs-artikel-inhalt img {
    margin: 0.25rem 0 1rem;
}

/* Schwebende Werkzeugleiste über einem Modul im Bearbeiten-Modus - bleibt bewusst
   dunkel für Kontrast unabhängig vom Hintergrund des jeweiligen Moduls darunter,
   daher hier feste Farben statt --fs-gold/--fs-orange (die sind fürs helle
   Seiteninnere gedacht). */
.fs-modul-controls {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 5;
    display: flex;
    gap: 4px;
    background: rgba(30, 32, 34, 0.85);
    border-radius: 6px;
    padding: 2px 4px;
}

.fs-modul-controls button {
    background: none;
    border: none;
    color: var(--fs-weiss);
    font-size: 1rem;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
}

.fs-modul-controls button:hover {
    color: var(--fs-signalgruen);
}

/* Auswahl-Checkbox fürs Kopieren von Modulen auf eine andere Seite/einen anderen
   Bericht (siehe editor.js) - immer sichtbar zusammen mit den übrigen Werkzeugen
   (Pfeile, Zahnrad, Löschen), kein separater "Kopiermodus" nötig. */
.fs-modul-kopieren-check.aktiv {
    color: var(--fs-signalgruen);
}

/* Deutliche Rahmen-Hervorhebung um ein für den Kopiervorgang ausgewähltes Modul. */
.fs-modul-wrapper.fs-modul-ausgewaehlt {
    outline: 3px solid var(--fs-signalgruen);
    outline-offset: -3px;
}

/* Schwebendes Menü unten rechts (siehe includes/header.php: "Bearbeiten"/
   "Seiteneinstellungen"; editor.js hängt im Bearbeiten-Modus zusätzlich "Module
   kopieren" ein, siehe dort) - eine Spalte einzelner Pillen-Knöpfe. Unten rechts statt
   oben rechts, damit es sich nicht mit dem Kopfbereich (Logo/Vereinsname) überschneidet
   - dessen Höhe variiert (Untertitel, Menü-Umbruch, ...) und lässt sich hier nicht
   verlässlich einrechnen. Bleibt beim Scrollen sichtbar, auf jeder Bildschirmgröße ohne
   Überschneidungsrisiko, auf dem Handy zudem gut mit dem Daumen erreichbar. bottom-Wert
   liegt oberhalb des "Nach oben"-Buttons (.fs-nach-oben-btn, 48px hoch, bottom: 1.25rem),
   damit sich beide nicht überlappen, wenn gescrollt wird und beide sichtbar sind. */
.fs-schwebemenu {
    position: fixed;
    bottom: 84px;
    right: 20px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.fs-schwebemenu-eintrag,
.fs-schwebemenu-eintrag:visited,
.fs-schwebemenu-eintrag:hover,
.fs-schwebemenu-eintrag:active,
.fs-schwebemenu-eintrag:focus {
    /* Echtes Orange statt der irreführend benannten --fs-orange/--fs-gold-Variablen
       (die zeigen auf Grün, siehe Kommentar oben im :root) - gleicher Farbwert wie
       .fs-add-btn, für auffälligen Kontrast zum sonst grünen Farbschema. Die :visited/
       :hover-Varianten müssen hier extra stehen, weil die globalen a/a:visited/a:hover-
       Regeln (style.css, ganz oben) sonst per höherer Spezifität gewinnen und die
       (ebenfalls fälschlich grün zeigenden) --fs-gold/--fs-orange-Variablen durchschlagen
       lassen würden - siehe Anmerkung zu diesen Variablen im :root. Der "Bearbeiten"-
       Eintrag trägt zusätzlich die Klasse .fs-edit-toggle, die weiter oben in dieser
       Datei ein eigenes "color: var(--fs-signalgruen) !important" für die dunkle Navbar
       mitbringt - das schlägt ohne !important auch hier durch, deshalb erzwingen wir
       Schwarz ebenfalls mit !important. */
    background: #e2790d;
    color: #000 !important;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    padding: 0.5rem 1.1rem;
    /* Harter statt weicher Schatten (kein Weichzeichner-Radius, nur Versatz) - hebt die
       Buttons deutlicher vom Rest der Seite ab. */
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
}

.fs-schwebemenu-eintrag:hover {
    filter: brightness(1.1);
}

.fs-einfuegepunkt {
    text-align: center;
    margin: 0.25rem 0;
    /* Ganz leichtes, pastelliges Orange als Zeile hinter dem Button - echtes Orange
       (#e2790d, siehe .fs-add-btn) nur mit niedriger Deckkraft, damit die Zeile auffällt,
       ohne die Buttonfarbe selbst zu erschlagen. */
    padding: 0.5rem 0;
    background: rgba(226, 121, 13, 0.12);
    border-radius: 8px;
}

/* Echtes Orange statt der irreführend benannten --fs-orange/--fs-gold-Variablen (die
   zeigen inzwischen auf Grün, siehe Kommentar oben im :root - Namen sind ein Rest der
   alten Firestarter-Vorlage). Volle Farbfläche statt nur Rand, gut sichtbar als
   "Hier kommt was hin"-Knopf. */
.fs-add-btn {
    background-color: #e2790d;
    border: none;
    color: var(--fs-weiss);
}

/* Kopf-/Fußzeilen-Einfügepunkte bewusst in Rot statt Orange - fällt stärker auf, da hier
   eingefügte Module auf JEDER Seite der Website landen (siehe fs_render_einfuegepunkt()). */
.fs-add-btn-eingebettet {
    background-color: var(--fs-rotakzent);
    border: none;
    color: var(--fs-weiss);
}

/* Allgemeine Hervorhebung für einzelne Formularfelder, die gerne übersehen werden, obwohl
   sie wichtig sind (z.B. Kategorie-Feld beim Bericht anlegen/bearbeiten, Mitglieder-
   Passwort-Zeile) - echtes Orange (#e2790d, siehe .fs-add-btn) als auffälliger Rahmen/
   Hintergrund statt der irreführenden --fs-orange-Variable (zeigt auf Grün, siehe
   Kommentar oben im :root). */
.fs-feld-hervorgehoben {
    padding: 0.75rem;
    border: 2px solid #e2790d;
    border-radius: 8px;
    background: rgba(226, 121, 13, 0.1);
}

.fs-feld-hervorgehoben .form-label {
    color: #e2790d;
    font-weight: bold;
}

/* Abgedunkelter Hintergrund hinter dem seitlichen Panel - Klick darauf schließt es
   (siehe editor.js), unabhängig davon, ob der ×-Button gerade sichtbar ist (bei einer
   langen Modul-Liste kann man innerhalb des Panels herunterscrollen). */
.fs-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1049;
}

/* Seitliches Einstellungsfenster (Modul-Einstellungen, Modul-Auswahl) */
.fs-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(520px, 100%);
    height: 100%;
    background: var(--fs-hintergrund-hell);
    border-left: 2px solid var(--fs-orange);
    z-index: 1050;
    overflow-y: auto;
}

.fs-panel-inner {
    position: relative;
    padding: 2rem 1.5rem;
}

.fs-panel-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    filter: invert(1);
}

/* Textfarben-Auswahl in der Editor-Werkzeugleiste (Berichte, Seiten, News) sowie die
   Farbkreise neben den Modul-Farbfeldern (Hintergrundfarbe, Farbblock, Trenner, Slider,
   News-Trenner - siehe fsFarbwaehlerErstellen() in editor.js): neun Grundfarben der Seite
   plus die unter Einstellungen -> Zusatzfarben hinterlegten. */
.fs-ft-farbe,
.fs-farbwaehler-kreis {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(30, 32, 34, 0.3);
    padding: 0;
    cursor: pointer;
}

.fs-ft-farbe:hover,
.fs-farbwaehler-kreis:hover {
    border-color: var(--fs-orange);
}

/* ==========================================================================
   9. MEDIEN-PICKER (Bootstrap-Modal für Bild-/Video-Auswahl)
   ========================================================================== */

.fs-medien-modal-content {
    background: var(--fs-hintergrund-hell);
    color: var(--fs-text);
    border: 1px solid rgba(117, 187, 60, 0.3);
}

.fs-medien-picker-item {
    border: 1px solid rgba(117, 187, 60, 0.25);
    border-radius: 4px;
    padding: 4px;
}

.fs-medien-picker-item:hover {
    border-color: var(--fs-orange);
}

/* Platzhalter-Kachel für PDF-Dateien in der Mediathek-Auswahl (kein Thumbnail möglich) */
.fs-medien-pdf-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 32, 34, 0.05);
    color: var(--fs-text-muted);
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   10. SONSTIGES
   ========================================================================== */

/* Balken in der Statistik-Auswertung */
.fs-statistik-balken {
    height: 10px;
    min-width: 4px;
    border-radius: 5px;
    background: var(--fs-verlauf);
}

/* Nach-oben-Button: fest unten rechts, erst sichtbar nach etwas Scrollen (site.js) */
.fs-nach-oben-btn {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1030;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    /* wie .fs-btn-fire: nur die helle Hälfte des Verlaufs, sonst zu wenig Kontrast
       für die weiße Schrift/das Icon am dunklen Rand */
    background: linear-gradient(90deg, var(--fs-gruen), var(--fs-signalgruen));
    color: var(--fs-weiss);
    font-size: 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    cursor: pointer;
}

.fs-nach-oben-btn.fs-sichtbar {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fs-nach-oben-btn:hover {
    filter: brightness(1.1);
}

/* Scroll-Reveal: Startzustand (unsichtbar/verschoben), wird per JS beim Einscrollen
   durch Hinzufügen von .fs-reveal-sichtbar aufgelöst (siehe site.js) */
.fs-reveal {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fs-reveal-fade {
    transform: none;
}

.fs-reveal-links {
    transform: translateX(-40px);
}

.fs-reveal-rechts {
    transform: translateX(40px);
}

.fs-reveal-unten {
    transform: translateY(40px);
}

.fs-reveal-sichtbar {
    opacity: 1;
    transform: none;
}