@import url('../fontawesome/css/all.min.css');

/* ==========================================================================
   BMK Brandenberg - Typografie-Skala (zentrale Schriftgroessen)
   --------------------------------------------------------------------------
   Sieben Stufen fuer die gesamte Website. Alle font-size-Angaben verweisen
   auf diese Variablen - eine Aenderung hier wirkt ueberall gleichzeitig.
   Frueher: 37 verschiedene Einzelwerte in 84 Regeln.

   --fs-xs    Meta-Angaben, Bildunterschriften, kleine Labels
   --fs-sm    Sekundaertext, Buttons, Tabellen
   --fs-md    Fließtext (Basis)
   --fs-lg    Hervorgehobener Text, H4, Kartentitel
   --fs-xl    H2 / H3
   --fs-2xl   Grosse Seitentitel
   --fs-3xl   H1
   ========================================================================== */

:root {
    --fs-xs:   0.7rem;
    --fs-sm:   0.85rem;
    --fs-md:   1.0rem;
    --fs-lg:   1.15rem;
    --fs-xl:   1.5rem;
    --fs-2xl:  1.8rem;
    --fs-3xl:  2.3rem;
}

/* Mobil wird die gesamte Skala etwas zurueckgenommen. Weil hier nur die
   Variablen geaendert werden, greift das automatisch in jeder Regel -
   einzelne Mobil-Ausnahmen sind dadurch nicht mehr noetig. */
@media (max-width: 768px) {
    :root {
        --fs-xs:   0.68rem;
        --fs-sm:   0.8rem;
        --fs-md:   0.92rem;
        --fs-lg:   1.05rem;
        --fs-xl:   1.25rem;
        --fs-2xl:  1.5rem;
        --fs-3xl:  1.7rem;
    }
}

/* ========================================================
   BMK BRANDENBERG - MASTER FIX (REINIGUNG)
   ======================================================== */
:root {
  --bmk-rot: #A32423;
  --bmk-gold: #D4B670;
  --bmk-dunkel: #222222;
  
  /* Cassiopeia Systemfarben überschreiben */
    --cassiopeia-color-primary: var(--bmk-rot);    /* Ersetzt das Standard-Blau */
    --cassiopeia-color-hover: var(--bmk-gold);     /* Ersetzt die Hover-Farbe */
    --cassiopeia-color-link: var(--bmk-rot);       /* Ersetzt Linkfarben */
   
   /* Abstand des mobilen Jahres-Bands vom oberen Rand.
       Muss ungefaehr der Hoehe des Sticky-Headers entsprechen. */
    --bmk-tl-offset: 84px;

}

/* 1. HEADER-BASIS (Transparent & Sticky) */
header.header.container-header {
    position: sticky !important;
    top: 0;
    z-index: 9999 !important; /* Über die Slideshow zwingen */
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    transform-origin: top center;
    padding: 15px 5%;
}

/* Fix für die Überlappung des Hauptinhalts */
#system-message-container,
.container-breadcrumbs,
main#content {
    margin-top: 20px; /* Zusätzlicher Abstand, damit Texte nicht unter den Header rutschen */
    position: relative;
    z-index: 10;
}

/* Weißer Hintergrund + optischer Schrumpf-Effekt beim Scrollen */
header.header.container-header.header-shrink {
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    width: 113.64% !important;
    max-width: 113.64% !important;
    margin-left: -6.82% !important;
    transform: scale(0.88);
    transform-origin: top center;
}

/* 2. LOGO-FIX */
/* Sicherstellen, dass das Logo nie verzerrt wird */
.navbar-brand img {
    width: 250px !important;  /* Deine gewünschte Breite */
    height: auto !important;   /* Verhindert die vertikale Verzerrung */
    max-width: 100%;           /* Verhindert das Herausragen auf sehr kleinen Screens */
    display: block;
}

/* 3. MENÜ-LINKS (Farbe & Hover) */
/* Den Header-Container als flexible Reihe definieren */
header.header.container-header {
    display: flex !important;
    flex-wrap: nowrap !important; /* Verhindert das Umbrechen in eine zweite Zeile */
    justify-content: space-between !important;
    align-items: center !important;
}

header.header.container-header {
		flex-wrap: nowrap !important;
		overflow: hidden;
	}

	header.header.container-header .navbar-brand {
		min-width: 0;
		flex-shrink: 1;
	}

/* Das Logo-Element (linker Teil) */
header.header.container-header .navbar-brand {
    flex: 0 0 auto !important; /* Beansprucht nur den Platz, den das Bild braucht */
    margin-right: 20px;       /* Kleiner Sicherheitsabstand zum Menü */
}

/* Der Navigations-Container (rechter Teil) */
header.header.container-header .container-nav {
    flex: 1 1 auto !important; /* Nimmt den gesamten restlichen Platz ein */
    display: flex !important;
    justify-content: flex-end !important; /* Schiebt die Links an den rechten Rand */
    min-width: 0;             /* Wichtig für Flex-Berechnungen */
	font-size: var(--fs-lg) !important;
}

/* Die eigentliche Liste der Menüpunkte */
header.header.container-header .mod-menu {
    flex-direction: row !important; /* Erzwingt die horizontale Ausrichtung */
    flex-wrap: nowrap !important;   /* Verhindert das Stapeln der Menüpunkte */
    display: flex !important;
}

/* Abstände der Menüpunkte verringern, um mehr Platz zu gewinnen */
header.header.container-header .nav-link {
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap !important; /* Verhindert Zeilenumbruch innerhalb eines Links */
}
/* 1. GRUNDZUSTAND (Normaler Text, etwas heller) */
header.header.container-header .mod-menu a,
header.header.container-header .nav-link {
    color: var(--bmk-dunkel) !important;
    font-weight: 400 !important;        /* Normale Schriftstärke, nicht fett */
    text-transform: none !important;    /* Keine Großbuchstaben */
    letter-spacing: normal !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    opacity: 0.7;                       /* Dezentere Optik für inaktive Links */
}

/* 2. HOVER (Beim Drüberfahren) */
header.header.container-header .mod-menu a:hover,
header.header.container-header .nav-link:hover {
    color: var(--bmk-rot) !important;
    opacity: 1 !important;
    background-color: transparent !important; /* Kein Hintergrundblock mehr */
}

/* 3. AKTIVER LINK (Dezent markiert) */
/* Anstatt eines roten Blocks nutzen wir nur eine feine goldene Linie unten */
header.header.container-header .nav-item.active > a,
header.header.container-header .nav-link.active,
header.header.container-header .mod-menu .active > a {
    color: var(--bmk-rot) !important;    /* Text in Vereins-Rot */
    opacity: 1 !important;
    font-weight: 500 !important;         /* Nur minimal kräftiger */
    background-color: transparent !important;
    border-bottom: 2px solid var(--bmk-gold) !important; /* Dezente goldene Linie */
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 4. SLIDESHOW POSITIONIERUNG */
.container-banner {
    margin-top: -10px !important; /* Zieht Slideshow unter den Header */
    margin-bottom: 0 !important; /* Entfernt Cassiopeias Standard-Abstand (2rem) */
    position: relative;
    z-index: 1;
}

/* ========================================================
   BMK BRANDENBERG - MOBILES MENÜ (DONUT/HAMBURGER)
   ======================================================== */

/* 1. DER MOBILE BUTTON (TOGGLER) */
.navbar-toggler {
    border: 2px solid var(--bmk-gold) !important; /* Goldener Rand */
    background-color: white !important;
    padding: 5px 8px !important;
    border-radius: 50%; /* Macht den Button kreisförmig (Donut-Stil) */
    transition: all 0.3s ease;
}

/* Das Icon (die 3 Striche) im Toggler färben - Joomla nutzt .icon-menu, nicht Bootstraps .navbar-toggler-icon */
.navbar-toggler .icon-menu,
.navbar-toggler .fa-times {
    color: var(--bmk-rot) !important;
    font-size: var(--fs-lg) !important;
}

/* Menü-Button: feste Groesse, damit der Kreis beim Wechsel zwischen
   Hamburger- und X-Icon nicht die Form aendert. Ohne feste Werte
   richtet sich der Kreis nach der Zeichenbreite - und die ist bei
   den beiden Icons unterschiedlich. */
.navbar-toggler {
    width: 44px;
    height: 44px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.navbar-toggler .icon-menu,
.navbar-toggler .fa-times {
    font-size: var(--fs-lg);
    line-height: 1;
}

/* 2. DAS AUSGEKLAPPTE MENÜ AUF DEM HANDY */

@media (max-width: 991.98px) {
    header.header.container-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: relative !important;
    }

    .navbar-toggler {
        display: block !important;
        order: 2 !important;
        margin-left: auto !important;
        z-index: 10001 !important;
        margin-right: 15px;
    }

    .navbar-expand-md .navbar-collapse {
        display: none !important;
    }

    header.header.container-header .navbar-collapse.bmk-menu-open {
        display: block !important;
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fdfbf7 !important;
        z-index: 9998 !important;
        overflow-y: auto !important;
        padding: 90px 24px 40px 24px !important;
    }
	
	header.header.container-header .navbar-collapse.bmk-menu-open,
	header.header.container-header .navbar-collapse.bmk-menu-open * {
		box-sizing: border-box !important;
		max-width: 100% !important;
	}

    header.header.container-header .mod-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    header.header.container-header .mod-menu > .nav-item {
        border-bottom: 1px solid #f0e6d6 !important;
        position: relative;
    }

    header.header.container-header .mod-menu > .nav-item > a {
        font-size: var(--fs-md) !important;
        padding: 13px 0 !important;
        color: #222222 !important;
        display: block !important;
        text-decoration: none !important;
    }

    header.header.container-header .mod-menu > .nav-item.current > a,
    header.header.container-header .mod-menu > .nav-item.active > a {
        color: #A32423 !important;
        font-weight: 700 !important;
    }

    header.header.container-header .mod-menu > .nav-item.deeper > a {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
	}

	header.header.container-header .mod-menu > .nav-item.deeper {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: space-between !important;
		align-items: center !important;
	}

	header.header.container-header .mod-menu > .nav-item.deeper > .mod-menu__sub {
		flex-basis: 100% !important;
		width: 100% !important;
		order: 3 !important;
	}

	header.header.container-header .mod-menu > .nav-item.deeper > a {
		flex: 1 1 auto !important;
	}

	header.header.container-header .bmk-menu-arrow {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		height: 44px !important;
		flex-shrink: 0 !important;
		cursor: pointer !important;
	}

	header.header.container-header .bmk-menu-arrow::after {
		content: "▾" !important;
		font-size: var(--fs-xl) !important;
		color: var(--bmk-rot) !important;
		transition: transform 0.2s ease !important;
	}

	/* Joomla 6: natives Chevron-Icon für Ebene-1-Toggle-Button -
	   das ist der tatsächlich sichtbare/funktionale Pfeil bei "Mitglieder".
	   Generisch auf .icon-chevron-down gefasst (unabhängig vom genauen
	   Klassennamen des umgebenden Toggle-Buttons). */
	header.header.container-header .mod-menu > .nav-item .icon-chevron-down {
		color: var(--bmk-rot) !important;
	}
	header.header.container-header .mod-menu > .nav-item .icon-chevron-down::before {
		color: var(--bmk-rot) !important;
	}

	header.header.container-header .nav-item.deeper:has(> .mod-menu__sub.show-menu) > .bmk-menu-arrow::after,
	header.header.container-header .nav-item.bmk-submenu-open > .bmk-menu-arrow::after {
		transform: rotate(180deg) !important;
	}

	header.header.container-header .nav-item.bmk-submenu-open > a::after {
		transform: rotate(180deg) !important;
	}

   header.header.container-header .mod-menu__sub {
		position: static !important;
		display: none !important;
		flex-direction: column !important;
		padding: 0 0 12px 14px !important;
		margin: 0 !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		width: 100% !important;
		transform: none !important;
		inset: auto !important;
	}

	/* EBENE 1 (z.B. "Mitglieder"): wird ausschließlich von unserem bmk-menu-arrow
	   über Joomlas eigene show-menu-Klasse gesteuert - hier gibt es keine Konkurrenz. */
	header.header.container-header .mod-menu > .nav-item.deeper > .mod-menu__sub.show-menu {
		display: flex !important;
	}

	/* EBENE 2+ (verschachtelte Gruppen wie "Register", "Ausschuss"):
	   Joomla 6 setzt hier "show-menu" seit dem Update dauerhaft selbst (neues
	   Akkordeon-Verhalten) - das ignorieren wir bewusst und steuern die
	   Sichtbarkeit ausschließlich über unsere eigene bmk-submenu-open Klasse. */
	header.header.container-header .mod-menu__sub .nav-item.bmk-submenu-open > .mod-menu__sub {
		display: flex !important;
	}

	/* WICHTIG: Joomlas Kern-CSS setzt "display" für .show-menu vermutlich ebenfalls
	   mit !important. Ohne diese explizite Gegenregel gewinnt Joomlas Regel und das
	   Untermenü bleibt dauerhaft sichtbar, egal ob bmk-submenu-open gesetzt ist.
	   Diese Regel ist spezifischer und zwingt es aktiv wieder zu, solange unsere
	   eigene Klasse fehlt. */
	header.header.container-header .mod-menu__sub .nav-item.deeper:not(.bmk-submenu-open) > .mod-menu__sub.show-menu {
		display: none !important;
	}

	/* Pfeil Ebene 1 */
	header.header.container-header .mod-menu > .nav-item.deeper:has(> .mod-menu__sub.show-menu) > a::after {
		transform: rotate(180deg) !important;
	}

	/* Pfeil Ebene 2+ */
	header.header.container-header .nav-item.bmk-submenu-open > a::after {
		transform: rotate(180deg) !important;
	}
	
	/* Register/Ausschuss (verschachtelte Überschriften) ebenfalls als Akkordion */
	header.header.container-header .mod-menu__sub .nav-item.deeper > .mod-menu__heading {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		cursor: pointer !important;
		font-size: var(--fs-xs) !important;
		color: var(--bmk-rot) !important;
		text-transform: uppercase !important;
		letter-spacing: 0.3px !important;
		padding: 10px 0 !important;
	}

	header.header.container-header .mod-menu__sub .nav-item.deeper > .mod-menu__heading::after {
		content: "▾" !important;
		font-size: var(--fs-lg) !important;
		color: #999999 !important;
		margin-left: 8px !important;
		transition: transform 0.2s ease !important;
	}

	header.header.container-header .mod-menu__sub .nav-item.bmk-submenu-open > .mod-menu__heading::after {
		transform: rotate(180deg) !important;
	}

    header.header.container-header .mod-menu__sub a,
    header.header.container-header .mod-menu__sub li a {
        font-size: var(--fs-sm) !important;
        color: #666666 !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        border-bottom: none !important;
        padding: 8px 0 !important;
        display: block !important;
    }

    header.header.container-header .mod-menu__sub .mod-menu__heading {
        font-size: var(--fs-xs) !important;
        color: #A32423 !important;
        text-transform: uppercase !important;
        padding: 10px 0 4px 0 !important;
        display: block;
    }
}

/* ========================================================
   BMK BRANDENBERG - DESKTOP-MENÜ DROPDOWN (ab 992px)
   Joomla 6 hat mit dem neuen mod-menu__toggle-sub-Button
   (natives icon-chevron-down) auch das Desktop-Dropdown
   verändert - dieser Block baut ein sauberes, schwebendes
   Panel unter "Mitglieder"/"Chronik" o.ä. auf.
   ======================================================== */
@media (min-width: 992px) {
    /* WICHTIG: header hat "overflow: hidden" (gegen horizontales Verrutschen) -
       das schneidet sonst das schwebende Dropdown ab. Auf Desktop wieder öffnen. */
    header.header.container-header {
        overflow: visible !important;
    }

    /* Positionierungskontext für das schwebende Panel + Pfeil neben dem Linktext */
    header.header.container-header .mod-menu > .nav-item.deeper {
        position: relative;
        display: flex !important;
        align-items: center !important;
    }

    /* Toggle-Button (enthält das Chevron-Icon) explizit neben den Link stellen,
       statt in eigener Zeile darunter zu landen */
    header.header.container-header .mod-menu__toggle-sub {
        display: inline-flex !important;
        align-items: center !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 0 0 2px !important;
        cursor: pointer !important;
        line-height: 1 !important;
    }

    /* Ebene 1: natives Chevron-Icon von Joomla (icon-chevron-down) einfärben */
    header.header.container-header .mod-menu > .nav-item .icon-chevron-down {
        color: var(--bmk-dunkel) !important;
        font-size: var(--fs-md) !important;
        transition: transform 0.2s ease, color 0.2s ease !important;
    }
    header.header.container-header .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down {
        color: var(--bmk-rot) !important;
        transform: rotate(180deg) !important;
    }

    /* Eigenes bmk-menu-arrow-Element ist auf Desktop überflüssig (Joomlas
       natives Icon übernimmt die Rolle) - ausblenden, um Dopplungen zu vermeiden */
    header.header.container-header .bmk-menu-arrow {
        display: none !important;
    }

    /* Basis: alle Untermenüs (Ebene 1 UND 2+) erstmal unsichtbar */
    header.header.container-header .mod-menu__sub {
        display: none !important;
    }

    /* Ebene 1 ("Mitglieder"-Panel): schwebendes Dropdown, weiß, mit Schatten */
    header.header.container-header .mod-menu > .nav-item.deeper > .mod-menu__sub.show-menu {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100%;
        left: 0;
        min-width: 240px;
        background: #ffffff;
        border-radius: 8px;
        border-top: 3px solid var(--bmk-rot);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
        padding: 16px 24px;
        z-index: 9998;
        margin-top: 6px;
    }

    /* Ebene 2+ ("Register"/"Ausschuss"): klappt INNERHALB des Panels auf,
       gesteuert ausschließlich über die eigene bmk-submenu-open-Klasse -
       Joomlas dauerhaft gesetztes show-menu wird hier bewusst ignoriert */
    header.header.container-header .mod-menu__sub .nav-item.bmk-submenu-open > .mod-menu__sub {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
        background: transparent;
        box-shadow: none;
        border-top: none;
        padding: 4px 0 10px 4px;
        margin-top: 0;
        min-width: 0;
    }
    header.header.container-header .mod-menu__sub .nav-item.deeper:not(.bmk-submenu-open) > .mod-menu__sub.show-menu {
        display: none !important;
    }

    /* Register/Ausschuss-Überschriften: BMK-Rot, klickbar mit eigenem Pfeil */
    header.header.container-header .mod-menu__sub .nav-item.deeper > .mod-menu__heading {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px;
        cursor: pointer !important;
        color: var(--bmk-rot) !important;
        font-size: var(--fs-xs) !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        padding: 8px 0 !important;
        white-space: nowrap;
    }
    header.header.container-header .mod-menu__sub .nav-item.deeper > .mod-menu__heading::after {
        content: "▾" !important;
        font-size: var(--fs-sm) !important;
        color: var(--bmk-rot) !important;
        transition: transform 0.2s ease !important;
    }
    header.header.container-header .mod-menu__sub .nav-item.bmk-submenu-open > .mod-menu__heading::after {
        transform: rotate(180deg) !important;
    }

    /* Links innerhalb des Panels (Querflöte, Klarinette, Funktionäre, ...) */
    header.header.container-header .mod-menu__sub a,
    header.header.container-header .mod-menu__sub li a {
        color: #666666 !important;
        font-size: var(--fs-xs) !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        white-space: nowrap;
        padding: 5px 0 !important;
        display: block !important;
        opacity: 1 !important;
    }
    header.header.container-header .mod-menu__sub a:hover,
    header.header.container-header .mod-menu__sub li a:hover {
        color: var(--bmk-rot) !important;
    }
}

/* ========================================================
   BMK BRANDENBERG - SIDEBAR-MENÜ (linke Spalte, z.B. Mitglieder-Seite)
   Eigenständiges Modul außerhalb des Headers - daher eigene Farbregeln,
   unabhängig vom Header-Menü.
   ======================================================== */
/* ALLE Ebenen (Register/Ausschuss genauso wie Querflöte/Klarinette darunter):
   einheitliche Grundfarbe Dunkelgrau, Rot bleibt der aktuellen Seite vorbehalten.
   ".mod-menu__heading" steckt bei Register/Ausschuss NICHT direkt im <li>,
   sondern im <button class="mod-menu__toggle-sub"> - deshalb hier bewusst
   ohne ">" (Nachfahre, nicht direktes Kind). */
.container-sidebar-left .mod-menu .nav-item > a,
.container-sidebar-left .mod-menu .nav-item .mod-menu__heading {
    color: #666666 !important;
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
}

/* Der Toggle-Button selbst: wie eine normale Menüzeile behandeln
   (gleiche Höhe/Abstände/Hover wie Querflöte & Co.), Pfeil rechtsbündig */
.container-sidebar-left .mod-menu .mod-menu__toggle-sub {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    width: 100% !important;
    background: none !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: all 0.3s ease !important;
}
.container-sidebar-left .mod-menu .mod-menu__toggle-sub:hover {
    background-color: #fcfaf5 !important;
    padding-left: 18px !important;
}
.container-sidebar-left .mod-menu .mod-menu__toggle-sub:hover .mod-menu__heading {
    color: var(--bmk-gold) !important;
}

.container-sidebar-left .mod-menu .icon-chevron-down {
    color: var(--bmk-rot) !important;
    transition: transform 0.2s ease !important;
}

.container-sidebar-left .mod-menu .nav-item > a:hover {
    color: var(--bmk-gold) !important;
}

/* Aktuelle Seite (z.B. "Querflöte") zusätzlich hervorheben */
.container-sidebar-left .nav-item.current > a {
    color: var(--bmk-rot) !important;
    font-weight: 700 !important;
}

.container-sidebar-left .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down {
    transform: rotate(180deg) !important;
}


/* Flexibles Logo für alle Bildschirmgrößen */
.navbar-brand img {
    width: 250px !important;   /* Standardbreite Desktop */
    max-width: 60vw !important; /* Verhindert, dass das Logo auf Handys mehr als 60% der Displaybreite einnimmt */
    height: auto !important;    /* Verhindert Verzerrung */
    transition: width 0.2s ease;
}

.bmk-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 16px;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: var(--bmk-rot, #A32423);
    color: #ffffff;
    border: none;
    font-size: var(--fs-sm);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 9000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.bmk-back-to-top.bmk-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
    .bmk-back-to-top:hover {
        background-color: var(--bmk-gold, #D4B670);
    }
}

@media (min-width: 992px) {
    .bmk-back-to-top {
        bottom: 30px;
        right: 30px;
    }
}

.newsflash img, .featured-articles img {
    width: 100%;
    height: 200px; /* Einheitliche Höhe */
    object-fit: cover; /* Schneidet das Bild passend zu, statt es zu quetschen */
    border-radius: 4px;
    margin-bottom: 10px;
}

/* 1. Das Logo im Footer exakt zähmen (ID-spezifisch) */
div#mod-custom115 img, 
footer .mod-custom img, 
footer .custom img {
    width: 150px !important;      /* Deine Wunschbreite */
    max-width: 150px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;    /* Zentriert das Logo in seiner Spalte */
}

/* 2. Die 3 Footer-Module nebeneinander erzwingen (Desktop ab 992px) */
@media (min-width: 992px) {
    footer .container-footer .grid-child {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Jedem der drei Module exakt 33% Platz zuweisen */
    footer .container-footer .grid-child > div,
    footer .container-footer .grid-child > ul {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        padding: 0 15px !important;
        text-align: center !important;
    }
}

/* 3. Mobil-Ansicht (unter 992px) - Alles untereinander */
@media (max-width: 991.98px) {
    .navbar-brand img {
		width: 160px !important;
	}
	
	footer .grid-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important;
    }
    
    /* Logo auf dem Handy etwas kleiner, falls nötig */
    div#mod-custom115 img {
        width: 120px !important;
    }
}

footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

footer ul li a {
    color: #ffffff; /* Oder var(--bmk-gold) */
    text-decoration: none;
    line-height: 1.8;
}

footer ul li a:hover {
    color: var(--bmk-gold);
    text-decoration: underline;
}

/* Footer Text-Styling */
footer .container-footer {
    color: #ffffff; /* Grundfarbe Weiß */
}

footer h4 {
    color: var(--bmk-gold) !important; /* Überschriften in Vereins-Gold */
    margin-bottom: 15px;
    font-size: var(--fs-lg);
    text-transform: uppercase;
}

footer a {
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--bmk-gold) !important;
}

/* Erzwungene Anzeige und Design der Footer-Modultitel */
footer .grid-child h3, 
footer .grid-child h4,
footer .mod-menu h3,
footer .mod-menu h4 {
    display: block !important;
    color: var(--bmk-gold) !important; /* Dein Vereins-Gold */
    font-size: var(--fs-lg) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    margin-bottom: 15px !important;
    border-bottom: 1px solid rgba(212, 182, 112, 0.3); /* Dezente Gold-Linie */
    padding-bottom: 5px;
}

/* Speziell für das Menü-Modul in Spalte 1 */
footer .mod-menu {
    display: flex;
    flex-direction: column;
}

/* Social Media Icons Styling */
.social-icons a {
    display: inline-block;
    font-size: var(--fs-xl);
    color: white;
}
/* Social Icons Feinabstimmung */
.social-icons {
    display: flex;
    gap: 20px; /* Gleichmäßiger Abstand zwischen den Icons */
    margin-top: 15px;
    justify-content: center; /* Zentriert die Icons unter dem Text (für Mobil & Desktop) */
}

@media (min-width: 992px) {
    .social-icons {
        justify-content: flex-start; /* Auf Desktop linksbündig in der rechten Spalte */
    }
}

.social-icons a i {
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-icons a:hover i {
    color: var(--bmk-gold) !important;
    transform: translateY(-3px); /* Kleiner "Hüpfer" beim Drüberfahren */
}

/* ========================================================
   5. SEITENMENÜ (SIDEBAR) DESIGN
   ======================================================== */

/* Der äußere Container (die Box) */
div.container-sidebar-left .card {
    border: none !important;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.05) !important;
    background-color: #ffffff !important;
    margin-bottom: 20px !important;
}

/* Die Modul-Überschrift (z.B. Ausschuss, Register) */
div.container-sidebar-left .card-title,
div.container-sidebar-left h3 {
    color: var(--bmk-rot) !important;
    font-size: var(--fs-lg) !important;
    font-weight: bold !important;
    border-bottom: 2px solid var(--bmk-gold) !important;
    padding-bottom: 8px !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
}

/* Die Liste im Card-Body */
div.container-sidebar-left .card-body ul.menu,
div.container-sidebar-left .card-body ul.nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Die einzelnen Menüpunkte */
div.container-sidebar-left .card-body li {
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 0 !important;
}

/* Die Links */
div.container-sidebar-left .card-body li a {
    display: block !important;
    padding: 10px 12px !important;
    color: var(--bmk-dunkel) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border-left: 3px solid transparent !important;
}

/* Hover-Effekt */
div.container-sidebar-left .card-body li a:hover {
    background-color: #fcfaf5 !important; /* Ganz helles Gold-Beige */
    color: var(--bmk-gold) !important;
    padding-left: 18px !important; /* Sanftes Einrücken */
}

/* Aktuelle Seite (wo du wirklich gerade bist) - bekommt den "Du bist hier"-Kasten */
div.container-sidebar-left .card-body li.current > a {
    background-color: #f9f2f2 !important; /* Ganz helles Rot-Weiß */
    color: var(--bmk-rot) !important;
    font-weight: bold !important;
    border-left: 3px solid var(--bmk-rot) !important;
}

/* Aktiver Vorfahre (z.B. "Register", wenn "Querflöte" die aktuelle Seite ist):
   bewusst OHNE Kasten/Hintergrund - bleibt eine normale Überschrift, damit
   sie nicht wie eine ausgewählte Seite aussieht, sondern nur automatisch
   aufklappt (siehe weiter oben im Header-Bereich der Datei). */
div.container-sidebar-left .card-body li.active:not(.current) > a {
    background-color: transparent !important;
    border-left: 3px solid transparent !important;
}

/* HINWEIS: Kontaktkarten wurden vereinheitlicht.
   Das frühere .contact-card / .contact-grid System (Kontaktseite) wurde
   entfernt und durch das website-weite .bmk-kontakt-* System ersetzt.
   Siehe Abschnitt "BMK Brandenberg - Kontaktkarten (Website-weiter Standard)"
   weiter unten in dieser Datei.
   WICHTIG: Das HTML auf der Kontaktseite (Custom-Modul mit den 3 Karten
   Obmann/Kapellmeister/Jugendreferentin) muss auf die neuen Klassennamen
   umgestellt werden - siehe Chat-Anleitung. */

/* ==========================================================================
   BMK Brandenberg - Verbessertes News-Grid Design
   ========================================================================== */

/* 1. Sektions-Hintergrund (für besseren Kontrast) */
.news-grid {
    background-color: #f6f6f6;
    padding: 60px 0;
    border-top: none;
    border-bottom: none;
}

.grid-child.container-bottom-a .bottom-a.card {
    border: none !important;
    border-top: 2px solid var(--bmk-gold, #D4B670) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 2. Überschrift zentrieren */
.news-grid h3.mod-articlesnews-title {
    text-align: center;
    color: var(--bmk-rot);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

/* 3. Container-Flexbox anpassen */
.news-grid .mod-articlesnews {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Mehr Abstand zwischen den Karten */
    justify-content: center;
    max-width: 1320px; /* Begrenzt die Gesamtbreite */
    margin: 0 auto;
    padding: 0 15px;
}

/* 4. Die verbesserte Beitrags-Card */
.news-grid .mod-articlesnews > div {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px; /* Leicht abgerundete Ecken */
    padding: 0; /* Wichtig: Padding hier auf 0, damit das Bild zum Rand geht */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Verhindert, dass Ecken des Bildes rausstehen */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Dezenter Schatten */
    transition: all 0.3s ease;
}

/* Hover-Effekt für die Karte */
.news-grid .mod-articlesnews > div:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
    border-color: var(--bmk-gold);
}

/* 5. Bild-Styling (Voraussetzung: Einleitungsbild im Beitrag gesetzt) */
.news-grid img {
    width: 100%;
    height: 220px; /* Feste Höhe für Einheitlichkeit */
    object-fit: cover; /* Schneidet Bilder passend zu */
    border-bottom: 1px solid #eee;
}

/* 6. Text-Bereich innerhalb der Karte */
.news-grid .newsflash-title {
    margin-bottom: 15px !important;
    margin-top: 0 !important;
    padding: 10 !important; /* Padding kommt jetzt vom Container oben */
    font-size: var(--fs-lg);
    color: var(--bmk-rot);
    line-height: 1.3;
	display: block;
}

/* ---------- News-Karten: Bild randlos und oben ----------
   Angleichung an die Berichte-Seite. Die negativen Margins heben das
   Innen-Padding der Karte (25px) genau am Bild wieder auf; order: -1
   schiebt das Bild im Flex-Container vor den Titel. */
.news-grid .newsflash-image {
    order: -1;
    margin: -25px -25px 20px -25px;
    width: auto;
}

.news-grid .newsflash-title {
    margin-top: 0 !important;
}

.news-grid .mod-articlesnews__item {
    padding: 25px !important; /* Erzeugt den Abstand nach innen zum Rahmen */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #ffffff;
    height: 100%;
}

/* Abstand für den Text (p) */
.news-grid .newsflash-text .p {
    margin-bottom: 20px !important;
    padding: 10px !important;
    line-height: 1.6;
}

/* Den Button-Container nach unten drücken (Layout, Farbe siehe zentraler Weiterlesen-Button-Block) */
.news-grid .readmore {
    margin-top: auto !important;
    padding: 0 !important;
}

/* Falls im Editor (wie im Bild zu sehen) ein Inline-Style mit 12pt ist, 
   kannst du das hier global für die Karten schöner machen: */
.news-grid .mod-articlesnews__item span {
    font-size: var(--fs-md);
    line-height: 1.6;
}

.news-grid .mod-articlesnews__item p {
    font-size: var(--fs-md);
    line-height: 1.6;
}

.news-grid .newsflash-text {
    padding: 0px 20px 20px 20px !important; /* Rechts und Links auf 20px erhöht */
    font-size: var(--fs-md);
    line-height: 1.6;
    color: #444;
    flex-grow: 1; /* Drückt den Button nach unten */
}


/* ---------- Mobil: News-Karten so breit wie die Berichte-Karten ----------
   Auf der Berichte-Seite fuellen die Karten ab 991px die volle Spaltenbreite.
   Die News-Karten waren durch min-width/max-width schmaler. Beide Werte
   werden hier aufgehoben, damit die Kartenkante auf beiden Seiten gleich
   sitzt. Der Breakpoint entspricht bewusst dem der Blog-Karten. */
@media (max-width: 991px) {

    /* Joomlas Karten-Innenabstand um das Modul herum aufheben. Die
       Berichte-Seite hat diesen Rahmen nicht - dadurch sassen die
       News-Karten rund 16px weiter innen als die Blog-Karten. */
    .news-grid > .card-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .news-grid .mod-articlesnews {
        padding: 0;
        gap: 20px;
    }

    .news-grid .mod-articlesnews > div {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }
}

/* Phoca Gallery Lightbox über den fixierten Header legen */
.pswp {
    z-index: 99999 !important;
}

/* ==========================================================================
   BMK Brandenberg - Modernes, harmonisches Berichte-Layout
   ========================================================================== */

/* 1. Die Jahres-Kategorien als moderne Filter-Buttons stylen */
.com-content-category-blog__children {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    padding: 0;
    list-style: none;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
}

.com-content-category-blog__children h3 {
    display: none; /* Versteckt die Überschrift "Unterkategorien" */
}

.com-content-category-blog__children > li {
    margin: 0;
}

/* Die Jahreszahlen als dezente Kacheln */
.com-content-category-blog__children a {
    display: inline-block;
    padding: 8px 18px;
    background: #f8f9fa;
    color: #444 !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: var(--fs-sm);
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    transition: all 0.2s ease-in-out;
}

.com-content-category-blog__children a:hover {
    background: var(--bmk-rot);
    color: #ffffff !important;
    border-color: var(--bmk-rot);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 2. Das saubere 2-2-3 Kartenraster mit einheitlicher Höhe */

/* Wir sprechen hier sowohl die offizielle Komponente als auch die Template-Klasse an */
.com-content-category-blog__items,
.blog-items {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 30px !important; /* Das bringt den Abstand (Luft) zwischen die Karten! */
    list-style: none;
    padding: 0;
    margin: 30px 0 !important;
}

/* Jede Karte nimmt standardmäßig 3 von 6 Spalten ein (= 2 pro Reihe) */
.com-content-category-blog__item,
.blog-item {
    grid-column: span 3 !important;
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 25px;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 320px;
    float: none !important; /* Deaktiviert Joomlas altes Layout-Verhalten */
    width: auto !important;  /* Verhindert, dass die Karten die volle Breite erzwingen */
}

/* Fuehrende Beitraege: 2 pro Zeile, alle weiteren: 3 pro Zeile.

   Frueher stand hier :nth-child(n+5). Das hat nicht funktioniert, weil
   Joomla Fuehrende und Einleitungsbeitraege in ZWEI getrennte Container
   ausgibt - nth-child zaehlt in jedem Container wieder bei 1 an und hat
   die 5 daher nie erreicht. Deshalb wird jetzt nach Container
   unterschieden statt nach Position gezaehlt. */
.items-leading > .com-content-category-blog__item,
.items-leading > .blog-item {
    grid-column: span 3 !important;
}

.com-content-category-blog__items:not(.items-leading) > .com-content-category-blog__item,
.blog-items:not(.items-leading) > .blog-item {
    grid-column: span 2 !important;
    min-height: 350px;
}

/* Beim Hovern minimal anheben für den modernen Touch */
.com-content-category-blog__item:hover,
.blog-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    border-color: #ccc;
}

/* Responsive Anpassung für Handys und Tablets */
@media (max-width: 991px) {
    .com-content-category-blog__items,
    .blog-items {
        grid-template-columns: 1fr !important;
    }
    .com-content-category-blog__item,
    .blog-item,
    .items-leading > .blog-item,
    .blog-items:not(.items-leading) > .blog-item {
        grid-column: span 1 !important;
        min-height: auto;
    }
}

/* 3. Titel & Meta-Details */
.com-content-category-blog__item .page-header {
    margin-bottom: 12px;
}

.com-content-category-blog__item .page-header h2 {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.com-content-category-blog__item .page-header h2 a {
    color: #111 !important;
    text-decoration: none;
    transition: color 0.2s;
}

.com-content-category-blog__item :hover .page-header h2 a {
    color: var(--bmk-rot) !important;
}

/* Die dezente Infozeile */
.com-content-category-blog__item .article-info {
    font-size: var(--fs-xs);
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.com-content-category-blog__item .article-info dd {
    margin: 0;
}

/* 4. Textbereich limitieren */
.com-content-category-blog__item .com-content-category-blog__description {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: #555;
    margin-bottom: 25px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Schneidet zu langen Text elegant nach 3 Zeilen ab */
    -webkit-box-orient: vertical;
}

/* Weiterlesen-Button ans untere Ende der Karte ausrichten (Layout, Farbe siehe zentraler Weiterlesen-Button-Block) */
.com-content-category-blog__item .readmore {
    margin-top: auto; /* Richtet den Button immer exakt am unteren Rand aus */
}

/* --- Einleitungsbilder im Kategorie-Blog oben bündig ausrichten & abrunden --- */
.com-content-category-blog__item .item-image,
.blog-item .item-image {
    margin-top: 0px !important; /* Setzt die 3px vom Template auf Null zurück */
}

/* --- Einleitungsbilder im Kategorie-Blog dezent abrunden --- */
.com-content-category-blog__item .item-image img,
.blog-item .item-image img {
    border-radius: 4px !important; /* Gleicher Radius wie bei deinen Karten */
    margin-bottom: 15px; /* Kleiner Abstand nach unten zum Text/Titel */
}

/* --- Textbereich innerhalb der Beitragskarten auflockern --- */
.com-content-category-blog__item .item-content,
.blog-item .item-content {
    padding: 10px !important;
}

/* ==========================================================================
   BMK Brandenberg - Seitennummerierung (Pagination) im Vereinsdesign
   ========================================================================== */

/* Container zentrieren / aufräumen */
.com-content-category-blog__navigation,
.pagination-wrapper {
    margin-top: 40px !important;
}

.pagination {
    display: flex;
    gap: 6px;
    padding: 0;
    list-style: none;
}

/* Alle einzelnen Buttons (Inaktiv / Pfeile) */
.pagination .page-link {
    color: #444 !important;
    background-color: #ffffff !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 4px !important;
    padding: 8px 14px;
    font-weight: 600;
    font-size: var(--fs-sm);
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
    box-shadow: none !important;
}

/* Hover-Zustand für inaktive Buttons */
.pagination .page-link:hover {
    color: #ffffff !important;
    background-color: var(--bmk-gold) !important;
    border-color: var(--bmk-gold) !important;
}

/* Aktive Seite (Die aktuell ausgewählte Seitenzahl) */
.pagination .active .page-link,
.pagination .page-item.active .page-link {
    color: #ffffff !important;
    background-color: var(--bmk-rot) !important;
    border-color: var(--bmk-rot) !important;
}

/* Deaktivierte Pfeile (z. B. "Zurück" auf Seite 1) */
.pagination .disabled .page-link {
    color: #ccc !important;
    background-color: #f8f9fa !important;
    border-color: #e9ecef !important;
    cursor: not-allowed;
}

/* ==========================================================================
   BMK Brandenberg - Zentriertes, harmonisches Kontakt-Layout
   ========================================================================== */

/* 1. Haupt-Container mittig ausrichten und auf max. 750px begrenzen */
.com-contact__container,
.contact {
    display: block !important;
    max-width: 750px !important;
    margin: 40px auto !important;
    padding: 0 15px;
}

/* 2. Titel "Bundesmusikkapelle Brandenberg" ausblenden/aufräumen */
.com-contact__container h2,
.contact h2 {
    display: none; /* Verhindert doppelte/verrutschte Titel */
}

/* 3. Kontaktdaten oben zentrieren & dezent gestalten */
.com-contact__details,
.contact-address {
    background: #f8f9fa;
    padding: 20px 30px;
    border-radius: 6px;
    border: 1px solid #e8e8e8;
    text-align: center;
    margin-bottom: 25px;
}

.com-contact__details address,
.contact-address address {
    font-style: normal;
    line-height: 1.8;
    color: #444;
    font-size: var(--fs-sm);
    margin: 0;
}

.com-contact__details a,
.contact-address a {
    color: var(--bmk-rot) !important;
    font-weight: 600;
    text-decoration: none;
}

.com-contact__details a:hover {
    color: var(--bmk-gold) !important;
}

/* 4. Das Formular als saubere, weiße Karte darunter */
.com-contact__form,
.contact-form {
    background: #ffffff;
    padding: 35px;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

/* Formular-Überschrift ("Eine E-Mail senden") */
.com-contact__form h3,
.contact-form legend {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: #222;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--bmk-rot);
    padding-bottom: 10px;
    text-align: left;
}

/* Eingabefelder aufhübscheln */
.com-contact form .form-control,
.contact-form .form-control {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 11px 15px;
    font-size: var(--fs-sm);
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}

.com-contact form .form-control:focus,
.contact-form .form-control:focus {
    border-color: var(--bmk-rot) !important;
    box-shadow: 0 0 0 3px rgba(160, 0, 0, 0.1) !important;
    outline: none;
}

/* Beschriftungen (Labels) */
.com-contact form label,
.contact-form label {
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    display: block;
}

/* Der Senden-Button */
.com-contact form button[type="submit"],
.contact-form button[type="submit"] {
    background-color: var(--bmk-rot) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 32px;
    font-weight: 700;
    font-size: var(--fs-sm);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
    width: auto;
}

.com-contact form button[type="submit"]:hover,
.contact-form button[type="submit"]:hover {
    background-color: var(--bmk-gold) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   BMK Brandenberg - Terminliste Tabellen-Design (Volle Breite)
   ========================================================================== */

/* 1. Haupt-Container auf volle Breite öffnen */
#jevents_body, 
.jevents {
    max-width: 100% !important;
    width: 100% !important;
    margin: 30px 0 !important;
    font-family: inherit;
}

/* 2. Gesamte Tabelle auf volle Breite setzen */
#jevents_body table,
.jevents table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    border: 1px solid #e5e5e5 !important;
    table-layout: fixed !important; /* Sorgt für eine saubere Spaltenaufteilung */
}

/* 3. Spaltenbreiten gezielt definieren (4 Spalten) */
#jevents_body table th:nth-child(1),
#jevents_body table td:nth-child(1) {
    width: 28% !important; /* Spalte Termin */
}

#jevents_body table th:nth-child(2),
#jevents_body table td:nth-child(2) {
    width: 20% !important; /* Spalte Datum */
}

#jevents_body table th:nth-child(3),
#jevents_body table td:nth-child(3) {
    width: 20% !important; /* Spalte Ort */
}

#jevents_body table th:nth-child(4),
#jevents_body table td:nth-child(4) {
    width: 32% !important; /* Spalte Info (bekommt weiterhin am meisten Platz) */
}

/* 4. Tabellenkopf (Überschriften: Termin | Datum | Info) */
#jevents_body table th,
.jevents table th {
    background-color: var(--bmk-rot, #8b0000) !important;
    color: #ffffff !important;
    padding: 16px 24px !important;
    font-size: var(--fs-sm) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    text-align: left !important;
}

/* 5. Tabellenzeilen & Zellen (Inhalte) */
#jevents_body table tr,
.jevents table tr {
    transition: background-color 0.2s ease !important;
}

#jevents_body table td,
.jevents table td {
    padding: 18px 24px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    color: #333333 !important;
    font-size: var(--fs-sm) !important;
    vertical-align: middle !important;
}

/* Letzte Zeile ohne unteren Rahmen */
#jevents_body table tr:last-child td {
    border-bottom: none !important;
}

/* Hover-Effekt: Zeile hebt sich beim Drüberfahren dezent gold/warm ab */
#jevents_body table tr:hover td {
    background-color: #fcf8f2 !important;
}

/* 6. Spalte 1 (Termin-Titel & Links) */
#jevents_body table td:first-child a,
.jevents table td a {
    color: var(--bmk-rot, #8b0000) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: var(--fs-md) !important;
    transition: color 0.2s ease !important;
}

#jevents_body table td:first-child a:hover,
.jevents table td a:hover {
    color: var(--bmk-gold, #c5a059) !important;
}

/* 7. Spalte 2 (Datum) */
#jevents_body table td:nth-child(2) {
    font-weight: 600 !important;
    color: #444444 !important;
}

/* 8. Spalte 3 (Beschreibung/Info) */
#jevents_body table td:nth-child(3) {
    color: #666666 !important;
    font-size: var(--fs-sm) !important;
    line-height: 1.4 !important;
}

/* Drucken-Icon im Kopfbereich dezent ausblenden */
.print-icon, .jev_toprow .print-icon {
    display: none !important;
}

@media (max-width: 768px) {
    /* JS-Plugin "Resizable Columns" auf Mobile aushebeln - volle Breite erzwingen */
    #eventlist,
    #eventlist .rc-handle-container,
    #jevents_body table.eventlist,
    .jevents table.eventlist {
        width: 100% !important;
        max-width: 100% !important;
    }

    #eventlist .rc-handle-container {
        display: none !important;
        pointer-events: none !important;
    }

    /* Tabelle & alle Bestandteile in Block-Elemente verwandeln */
    #jevents_body table, .jevents table,
    #jevents_body table thead, .jevents table thead,
    #jevents_body table tbody, .jevents table tbody,
    #jevents_body table th, .jevents table th,
    #jevents_body table tr, .jevents table tr {
        display: block !important;
    }

    /* Äußere Tabellen-Umrandung/Schatten entfernen - nur Karten sollen umrandet sein */
    #jevents_body table, .jevents table {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    /* Original-Tabellenkopf ausblenden (Labels kommen stattdessen pro Zelle) */
    #jevents_body table thead tr, .jevents table thead tr {
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }

    /* Jede Zeile wird zur eigenen Karte */
    #jevents_body table tr, .jevents table tr {
        margin-bottom: 15px !important;
        border: 1px solid #e5e5e5 !important;
        border-radius: 8px !important;
        padding: 8px 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
        background: #ffffff !important;
    }

    /* Zelle: Label + Wert sauber nebeneinander als Flexbox */
    #jevents_body table td, .jevents table td {
        display: flex !important;
        align-items: baseline !important;
        gap: 12px !important;
        border: none !important;
        border-bottom: 1px solid #f5f5f5 !important;
        padding: 10px 12px !important;
        text-align: left !important;
        width: 100% !important;
    }
    #jevents_body table tr:last-child td:last-child,
    .jevents table tr:last-child td:last-child {
        border-bottom: none !important;
    }

    /* Label: feste, schmale Breite, holt sich den Text automatisch von JEvents */
    #jevents_body table td::before, .jevents table td::before {
        content: attr(data-label) !important;
        flex: 0 0 68px !important;
        max-width: 68px !important;
        font-weight: 700 !important;
        color: var(--bmk-rot, #A32423) !important;
        text-transform: uppercase !important;
        font-size: var(--fs-xs) !important;
        letter-spacing: 0.3px !important;
        padding-top: 1px !important;
    }
	/* Desktop-Spaltenbreiten (nth-child 1-4) gezielt auf Mobile zurücksetzen */
    #jevents_body table th:nth-child(1), #jevents_body table td:nth-child(1),
    #jevents_body table th:nth-child(2), #jevents_body table td:nth-child(2),
    #jevents_body table th:nth-child(3), #jevents_body table td:nth-child(3),
    #jevents_body table th:nth-child(4), #jevents_body table td:nth-child(4),
    .jevents table th:nth-child(1), .jevents table td:nth-child(1),
    .jevents table th:nth-child(2), .jevents table td:nth-child(2),
    .jevents table th:nth-child(3), .jevents table td:nth-child(3),
    .jevents table th:nth-child(4), .jevents table td:nth-child(4) {
        width: 100% !important;
    }
	/* Desktop-Regel "letzte Zeile ohne Rahmen" für Mobile-Karten aufheben */
    #jevents_body table tr:last-child td, .jevents table tr:last-child td {
        border-bottom: 1px solid #f5f5f5 !important;
    }
    /* ...außer bei der wirklich letzten Zelle der letzten Karte */
    #jevents_body table tr:last-child td:last-child, .jevents table tr:last-child td:last-child {
        border-bottom: none !important;
    }
}

/* ==========================================================================
   BMK Brandenberg - High-End Event-Detailansicht (Naturgetreue Texte)
   ========================================================================== */

/* 1. Unnötigen JEvents-Ballast (Navigation, Lupe, Hits) ausblenden */
#jevents_body .jev_toprow,
#jevents_body form[name="jevform"],
#jevents_body .navigation_top,
#jevents_body .hits,
#jevents_body .jev_hits,
#jevents_body img[src*="search"] {
    display: none !important;
}

/* 2. Karten-Container vergrößern & veredeln */
#jevents_body, 
.jevents {
    max-width: 1200px !important;
    margin: 40px auto !important;
}

.jev_evdt,
#jevents_body .jev_evdt {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 45px 50px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e9ecef !important;
    border-top: 6px solid var(--bmk-rot, #8b0000) !important; /* Roter BMK-Akzent oben */
}

/* 3. Event-Titel groß & präsent */
.jev_evdt h2,
#jevents_body h2 {
    color: var(--bmk-rot, #8b0000) !important;
    font-size: var(--fs-3xl) !important;
    font-weight: 800 !important;
    margin: 0 0 15px 0 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.1 !important;
}

/* 4. Datum & Uhrzeit als kompakte Info-Zeile */
.jev_evdt_date,
#jevents_body .ev_detail {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #fdf8f2 !important; /* Dezent gold-warmer Hintergrund */
    border: 1px solid rgba(197, 160, 89, 0.3) !important;
    border-left: 4px solid var(--bmk-gold, #c5a059) !important;
    padding: 10px 18px !important;
    border-radius: 6px !important;
    color: #2c3e50 !important;
    font-weight: 700 !important;
    font-size: var(--fs-md) !important;
    margin-bottom: 30px !important;
}

/* 5. Haupttext & Absätze (Nutzt originale Editor-Formatierung) */
.jev_evdt p,
#jevents_body p {
    color: #333333 !important;
    font-size: var(--fs-md) !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
}

/* 6. Aufzählungen (ul/li) unverfälscht darstellen */
.jev_evdt ul,
#jevents_body ul {
    margin: 20px 0 !important;
    padding-left: 25px !important; /* Behält die normalen Aufzählungspunkte bei */
    background: transparent !important;
    border: none !important;
}

.jev_evdt ul li,
#jevents_body ul li {
    font-size: var(--fs-md) !important;
    line-height: 1.7 !important;
    color: #333333 !important;
    margin-bottom: 8px !important;
    border: none !important;
    padding: 0 !important;
}

/* Fettgedruckte Texte behalten ihre Editor-Formatierung, nur dezente BMK-Farbe */
.jev_evdt ul li strong,
#jevents_body ul li strong {
    color: var(--bmk-rot, #8b0000) !important;
    font-weight: 700 !important;
    display: inline !important; /* Nicht mehr als feste Tabelle erzwingen */
    min-width: 0 !important;
}

/*Styling eines Event-Bildes*/
.bmk-event-image {
  margin: 24px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.bmk-event-image img {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  display: block;
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    .jev_evdt, #jevents_body .jev_evdt {
        padding: 25px 20px !important;
    }
    .jev_evdt h2, #jevents_body h2 {
        font-size: var(--fs-2xl) !important;
    }
}
/* ==========================================================================
   BMK Brandenberg - Location & Extra Info (Einheitliches Design)
   ========================================================================== */

/* 1. Gemeinsame Basis für beide Boxen - identisches Aussehen */
.ev_detail_location,
.ev_detail_extra {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #fdfbf7 !important;
    border: 1px solid #f0e6d6 !important;
    border-left: 4px solid var(--bmk-rot, #A32423) !important;
    padding: 12px 18px !important;
    border-radius: 6px !important;
    font-size: var(--fs-sm) !important;
    color: #2c3e50 !important;
    font-weight: 400 !important; /* normale Textdekoration für den Wert-Text */
    margin-top: 15px !important;
}

/* 2. Label ("Location:", "Extra Info:") fett in BMK-Rot */
.ev_detail_location strong,
.ev_detail_extra strong {
    color: var(--bmk-rot, #A32423) !important;
    font-weight: 700 !important;
    margin-right: 2px !important;
}

/* 3. Piktogramm: Location (Pinnadel) */
.ev_detail_location::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-color: var(--bmk-rot, #A32423) !important;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>') no-repeat center / contain !important;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>') no-repeat center / contain !important;
    flex-shrink: 0 !important;
}

/* 4. Piktogramm: Extra Info (i-Symbol) */
.ev_detail_extra::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-color: var(--bmk-rot, #A32423) !important;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>') no-repeat center / contain !important;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>') no-repeat center / contain !important;
    flex-shrink: 0 !important;
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    .ev_detail_location,
    .ev_detail_extra {
        font-size: var(--fs-sm) !important;
    }
}

/* ==========================================================================
   BMK Brandenberg - Abgesagte Termine hervorheben
   ========================================================================== */

/* Desktop: gesamte Zeile leicht abgedunkelt */
#jevents_body table tr.event-cancelled td,
.jevents table tr.event-cancelled td {
    background-color: #fdecea !important;
    opacity: 0.75 !important;
}

/* "ABGESAGT"-Wort selbst: rot & fett */
.cancelled-label {
    color: #b33a3a !important;
    font-weight: 700 !important;
}
/* Unsichtbares Absagen-Erkennungs-Skript: kompletten Modul-Rahmen ausblenden */
.js-only-hidden {
    display: none !important;
}

/* Mobile: gesamte Karte */
@media (max-width: 768px) {
    #jevents_body table tr.event-cancelled,
    .jevents table tr.event-cancelled {
        background-color: #fdecea !important;
        border-color: #e0a5a0 !important;
        opacity: 0.8 !important;
    }
}

/* ==========================================================================
   BMK Brandenberg - Jugendseite: Info-Boxen & Highlight-Box
   ========================================================================== */

/* 1. Drei Info-Boxen (Musikschule / Ausbildung / BMK Brandenberg) */
.bmk-info-boxen {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    margin: 30px 0 40px 0 !important;
}

.bmk-info-box {
    flex: 1 1 280px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 32px 24px !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e9ecef !important;
    border-top: 4px solid var(--bmk-rot, #A32423) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.bmk-info-box:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1) !important;
}

.bmk-info-icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 18px auto !important;
    border-radius: 50% !important;
    background: var(--bmk-rot, #A32423) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bmk-info-icon i,
.bmk-info-icon em {
    color: #ffffff !important;
    font-size: var(--fs-xl) !important;
    font-style: normal !important; /* verhindert Kursivschrift, da <em> von Natur aus kursiv ist */
}

.bmk-info-box h3.bmk-info-box-titel {
    color: var(--bmk-rot, #A32423) !important;
    font-size: var(--fs-md) !important;
    font-weight: 700 !important;
    margin: 0 0 12px 0 !important;
}

.bmk-info-box p {
    color: #444444 !important;
    font-size: var(--fs-sm) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.bmk-info-box a {
    color: var(--bmk-rot, #A32423) !important;
    font-weight: 700 !important;
}

/* 2. Hervorhebungs-Box */
.bmk-highlight-box {
    background: linear-gradient(90deg, var(--bmk-rot, #A32423), var(--bmk-gold, #D4B670)) !important;
    border-left: none !important;
    border-radius: 8px !important;
    padding: 24px 30px !important;
    margin: 30px 0 !important;
    box-shadow: 0 4px 15px rgba(163, 36, 35, 0.2) !important;
}

.bmk-highlight-box p {
    color: #ffffff !important;
    font-size: var(--fs-md) !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-align: center !important;
}

/* ==========================================================================
   BMK Brandenberg - Kontaktkarten (Website-weiter Standard)
   Verwendet auf: Kontaktseite, Jugendseite, künftige Personen-Übersichten
   ========================================================================== */

.bmk-kontakt-boxen {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    justify-content: center !important;
    align-items: stretch !important;
    max-width: 1200px !important;
    margin: 30px auto !important;
}

.bmk-kontakt-box {
    background: #fdfbf7 !important;
    border: 1px solid #f0e6d6 !important;
    border-radius: 12px !important;
    padding: 36px 28px !important;
    text-align: center !important;
    flex: 1 !important;
    min-width: 280px !important;
    max-width: 380px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Foto im goldenen Ring.
   Achtung: .bmk-kontakt-foto ist ein DIV, das ein img enthaelt - nicht
   das Bild selbst. object-fit gehoert deshalb auf das img, nicht hierher;
   auf einem div bleibt es wirkungslos. Der Kreis entsteht ueber
   border-radius plus overflow: hidden am Container. */
.bmk-kontakt-foto {
    width: 140px !important;
    height: 140px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    margin: 0 auto 16px auto !important;
    display: block !important;
    border: 3px solid var(--bmk-gold, #D4B670) !important;
    background: #ffffff;
    flex: 0 0 auto;
}

/* Das Bild fuellt den Ring formatfuellend. max-width: none hebt
   Cassiopeias globale img-Regel auf, die sonst dazwischenfunkt.
   object-position: center top schneidet bei Portraits unten ab
   statt mittig - der Kopf bleibt dadurch im Bild. */
.bmk-kontakt-foto img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    border-radius: 0 !important;
    border: none !important;
}

/* Name (prominenter, in BMK-Rot) */
.bmk-kontakt-box .bmk-kontakt-name {
    font-weight: bold !important;
    font-size: var(--fs-md) !important;
    color: var(--bmk-rot, #A32423) !important;
    margin: 0 0 4px 0 !important;
}

/* Rolle (dezent grau, NICHT fett) */
.bmk-kontakt-box .bmk-kontakt-rolle {
    color: #888888 !important;
    font-size: var(--fs-xs) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 12px 0 !important;
}

/* Optionale Funktionsbeschreibung (z. B. auf der Kontaktseite) */
.bmk-kontakt-box .bmk-kontakt-beschreibung {
    font-size: var(--fs-sm) !important;
    line-height: 1.4 !important;
    color: #666 !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #f0e6d6 !important;
}

.bmk-kontakt-daten {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: auto !important; /* Kontaktdaten rutschen bei unterschiedlich langem Text an den unteren Rand */
}

.bmk-kontakt-box .bmk-kontakt-item {
    color: var(--bmk-dunkel) !important;
    text-decoration: none !important;
    font-size: var(--fs-sm) !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: color 0.3s ease !important;
}

.bmk-kontakt-item i,
.bmk-kontakt-item em {
    color: var(--bmk-gold, #D4B670) !important;
    width: 20px !important;
    text-align: center !important;
    font-style: normal !important; /* falls <em> statt <i> verwendet wird */
}

.bmk-kontakt-item:hover,
.bmk-kontakt-item:hover i,
.bmk-kontakt-item:hover em {
    color: var(--bmk-rot, #A32423) !important;
}

/* Mobile: Karten stapeln */
@media (max-width: 768px) {
    .bmk-info-boxen, .bmk-kontakt-boxen {
        flex-direction: column !important;
    }
}

/* ==========================================================================
   BMK Brandenberg - Basis-Typografie für Artikel (einheitlich für alle Beiträge)
   ========================================================================== */

/* 1. Grundschrift: Fließtext & Listen */
.com-content-article__body p,
.com-content-article__body li,
.item-page p,
.item-page li {
    font-family: inherit !important;
    font-size: var(--fs-md);
    line-height: 1.7 !important;
    color: #333333 !important;
}

/* 3. Überschriften innerhalb von Artikeln */
.com-content-article__body h2,
.item-page h2 {
    color: var(--bmk-rot, #A32423) !important;
    font-size: var(--fs-xl);
    font-weight: 700 !important;
    margin: 32px 0 16px 0 !important;
}

.com-content-article__body h3,
.item-page h3 {
    color: var(--bmk-rot, #A32423) !important;
    font-size: var(--fs-lg);
    font-weight: 700 !important;
    margin: 24px 0 12px 0 !important;
}

.com-content-article__body h4,
.item-page h4 {
    color: var(--bmk-dunkel, #222222) !important;
    font-size: var(--fs-md);
    font-weight: 700 !important;
    margin: 20px 0 10px 0 !important;
}

/* 4. Links im Fließtext */
.com-content-article__body p a,
.item-page p a {
    color: var(--bmk-rot, #A32423) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

.com-content-article__body p a:hover,
.item-page p a:hover {
    color: var(--bmk-gold, #D4B670) !important;
}

/* Mobile Schriftgroessen kommen jetzt aus der Typografie-Skala ganz oben
   (:root im Media Query). Eigene Ausnahmen hier sind nicht mehr noetig -
   sie wuerden die Skala nur wieder aushebeln. */
/* ==========================================================================
   BMK Brandenberg - Typografie auch für Berichte-Übersicht (Blog-Ansicht)
   ========================================================================== */

/* 1. Fließtext & Absicherung gegen Inline-Styles */
.item-content p,
.item-content li {
    font-family: inherit !important;
    font-size: var(--fs-md);
    line-height: 1.7 !important;
    color: #333333 !important;
}

/* 2. Beitrags-Titel (h2 in der Übersicht) in BMK-Rot */
.item-content .page-header h2 a {
    color: var(--bmk-rot, #A32423) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.item-content .page-header h2 a:hover {
    color: var(--bmk-gold, #D4B670) !important;
}

/* ==========================================================================
   BMK Brandenberg - "Weiterlesen"-Button (EINZIGE Quelle der Wahrheit)
   Greift überall, wo ein Joomla-Readmore-Link mit btn/btn-secondary steht:
   Startseite (.news-grid), Berichte-Übersicht (.com-content-category-blog),
   und jede künftige Stelle mit demselben Markup - unabhängig vom Container.
   ========================================================================== */
.readmore .btn-secondary,
.readmore a.btn.btn-secondary {
    display: inline-block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 25px !important;
    background-color: #ffffff !important;
    color: var(--bmk-gold, #D4B670) !important;
    border: 2px solid var(--bmk-gold, #D4B670) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: var(--fs-sm) !important;
    border-radius: 2px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

.readmore .btn-secondary:hover,
.readmore a.btn.btn-secondary:hover {
    background-color: var(--bmk-gold, #D4B670) !important;
    color: #ffffff !important;
    border-color: var(--bmk-gold, #D4B670) !important;
}

.readmore .btn-secondary .icon-chevron-right,
.readmore a.btn.btn-secondary .icon-chevron-right {
    color: inherit !important;
}

/* ==========================================================================
   BMK Brandenberg - News-Grid Karte: leerer Abstand + dezenter Hintergrund
   ========================================================================== */
.main-top.card.news-grid {
    padding-top: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Titelleiste "Aktuelles von der BMK Brandenberg" - Design wie .social-title */
.news-grid > .card-header {
    background-color: transparent !important;
    border-bottom: none !important;
    color: var(--bmk-rot, #A32423) !important;
    font-size: var(--fs-2xl) !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 40px 20px 8px 20px !important;
    margin: 0 !important;
}

/* Wenn direkt ein Hero-Modul vorausgeht, weniger Luft oben */
.container-banner:has(.bmk-hero) + .container-component .news-grid > .card-header {
    padding-top: 12px !important;
}

/* ==========================================================================
   BMK Brandenberg - Einzelbeitrag: Abstände & Titelfarbe
   ========================================================================== */

/* Titel in BMK-Rot */
.item-page .page-header h1 {
    color: var(--bmk-rot, #A32423) !important;
    margin-bottom: 30px !important;
}

/* Mehr Luft zwischen Titel und Autor/Datum-Zeile */
.item-page .article-info {
    margin-bottom: 40px !important;
}

/* Mehr Luft zwischen Autor/Datum-Zeile und dem eigentlichen Beitragstext */
.item-page .com-content-article__body {
    margin-top: 8px !important;
}

.item-page .com-content-article__body > p:first-child {
    margin-top: 8px !important;
}

/* ---------- Sanftes Einblenden der News-Karten (Startseite) ---------- */

/* Startzustand haengt an der Klasse bmk-reveal-ready, die das Skript
   selbst setzt. Ohne JavaScript bleiben die Karten sofort sichtbar. */
.bmk-reveal-ready .mod-articlesnews__item {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .9s ease, transform .9s ease;
}

.bmk-reveal-ready .mod-articlesnews__item.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .bmk-reveal-ready .mod-articlesnews__item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   BMK Brandenberg - Social Media Feed (Startseite, unten)
   ========================================================================== */

.social-wrapper {
    text-align: center;
    padding: 40px 20px;
}

.social-title {
    color: var(--bmk-rot, #A32423) !important;
    font-size: var(--fs-2xl) !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

.social-wrapper > p {
    color: #666666 !important;
    font-size: var(--fs-sm) !important;
    margin-bottom: 24px !important;
}

/* Der Platzhalter-Kasten vor dem Laden des Feeds */
.social-placeholder {
    max-width: 500px;
    margin: 0 auto;
    background: #fdfbf7;
    border: 1px solid #f0e6d6;
    border-radius: 12px;
    padding: 36px 28px;
}

.overlay-content i.fa-instagram {
    color: var(--bmk-gold, #D4B670) !important;
    margin-bottom: 16px;
}

.overlay-content h3 {
    color: var(--bmk-dunkel, #222222) !important;
    font-size: var(--fs-lg) !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

.overlay-content p {
    color: #666666 !important;
    font-size: var(--fs-sm) !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

.overlay-content p a {
    color: var(--bmk-rot, #A32423) !important;
    text-decoration: underline !important;
}

/* Button "Inhalt jetzt laden" - im BMK-Farbschema */
.btn-load-social {
    display: inline-block;
    padding: 12px 28px;
    background-color: var(--bmk-rot, #A32423) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px;
    font-weight: 700;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-load-social:hover {
    background-color: var(--bmk-gold, #D4B670) !important;
}

#social-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ==========================================================================
   BMK Brandenberg - Hero-Modul (nächster Termin, Startseite)
   ========================================================================== */

.bmk-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 420px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 8px;
}

.bmk-hero__bg {
    position: absolute;
    inset: 0;
    background-color: var(--bmk-dunkel, #222222);
    background-size: cover;
    background-position: center;
}

.bmk-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0) 100%);
}

.bmk-hero__content {
    position: relative;
    width: 100%;
    padding: 32px 36px 40px;
    color: #ffffff;
}

.bmk-hero__badge {
    display: inline-block;
    background-color: var(--bmk-rot, #A32423);
    color: #ffffff;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.bmk-hero__title {
    color: #ffffff !important;
    font-size: var(--fs-2xl) !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
}

.bmk-hero__title-link {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.bmk-hero__title-link:hover {
    color: var(--bmk-gold, #D4B670) !important;
    text-decoration: underline !important;
}

/* Abgesagte Termine - Farbschema an bestehende Absage-Kennzeichnung angelehnt */
.bmk-hero--cancelled .bmk-hero__bg {
    filter: grayscale(60%);
}

.bmk-hero--cancelled .bmk-hero__overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.05) 100%);
}

.bmk-hero__badge--cancelled {
    background-color: #b33a3a !important;
}

.bmk-hero__cancelled-note {
    display: inline-block;
    color: #ffffff;
    background-color: #b33a3a;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 6px;
    margin: 0;
    font-size: var(--fs-sm);
}

.bmk-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 24px;
}

.bmk-hero__meta-item {
    display: inline-flex;
    align-items: center;
}

.bmk-hero__icon {
    color: var(--bmk-gold, #D4B670);
    margin-right: 8px;
    font-size: var(--fs-sm);
}

.bmk-hero__btn {
    display: inline-block;
    background-color: var(--bmk-gold, #D4B670);
    color: var(--bmk-dunkel, #222222) !important;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 700;
    font-size: var(--fs-sm);
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.bmk-hero__btn:hover {
    background-color: #c4a25c;
    color: var(--bmk-dunkel, #222222) !important;
}

@media (min-width: 992px) {
    .bmk-hero {
        min-height: 560px;
    }
}

@media (max-width: 768px) {
    .bmk-hero {
        min-height: 340px;
    }

    .bmk-hero__content {
        padding: 24px 20px 28px;
    }

    .bmk-hero__title {
        font-size: var(--fs-xl) !important;
    }

    .bmk-hero__meta {
        gap: 12px;
        font-size: var(--fs-sm);
    }
}

/* =========================================================
   BMK Brandenberg - Zeitstrahl (Chronik)
   Anhaengen an: media/templates/site/cassiopeia/css/user.css
   ========================================================= */

/* ---------- Grundgeruest ---------- */

.bmk-timeline {
    list-style: none;
    margin: 2rem 0 1rem;
    padding: 0;
    position: relative;
}

/* durchgehende Linie */
.bmk-timeline::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: #e5e0d6;
}

.bmk-tl-item {
    position: relative;
    padding: 0 0 1.75rem 2.25rem;
}

.bmk-tl-item:last-child {
    padding-bottom: 0;
}

/* Punkt auf der Linie */
.bmk-tl-item::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.4rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #D4B670;
    border: 3px solid #ffffff;
    box-sizing: border-box;
    transition: background-color .25s ease, transform .25s ease;
}

/* ---------- Jahr und Inhalt ---------- */

.bmk-tl-year {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #777777;
    letter-spacing: .01em;
    margin-bottom: .15rem;
    transition: color .25s ease;
}

.bmk-tl-body {
    transition: opacity .25s ease;
    opacity: .75;
}

.bmk-tl-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: #222222;
    margin: 0 0 .2rem;
    line-height: 1.35;
}

.bmk-tl-text {
    font-size: var(--fs-sm);
    color: #555555;
    line-height: 1.65;
    margin: 0;
}

.bmk-tl-text p {
    margin: 0 0 .6rem;
}

.bmk-tl-text p:last-child {
    margin-bottom: 0;
}

/* ---------- Aktiver Eintrag (Scroll-Spy) ---------- */

/* Inaktive Eintraege zuruecknehmen - ueber Farbe, nicht ueber
   Transparenz, damit der Text lesbar bleibt. */
.bmk-timeline.is-enhanced .bmk-tl-body {
    opacity: 1;
}

.bmk-timeline.is-enhanced .bmk-tl-title {
    color: #A32423;
    transition: color .25s ease;
}

.bmk-timeline.is-enhanced .bmk-tl-text,
.bmk-timeline.is-enhanced .bmk-tl-text p {
    color: #a5a5a5 !important;
    transition: color .25s ease;
}

/* Aktiver Eintrag: Karte mit rotem Balken links */
.bmk-tl-item.is-active .bmk-tl-body {
    background: #fdfbf7;
    border-left: 4px solid #A32423;
    border-radius: 0;
    padding: .85rem 1.1rem;
    margin: -.35rem 0 0 -1.1rem;
    transition: background-color .25s ease;
}

.bmk-tl-item.is-active .bmk-tl-title {
    color: #A32423;
}

.bmk-tl-item.is-active .bmk-tl-text,
.bmk-tl-item.is-active .bmk-tl-text p { 
    color: #333333 !important;
}

.bmk-tl-item.is-active .bmk-tl-year {
    color: #A32423;
}

.bmk-tl-item.is-active::before {
    background: #A32423;
    transform: scale(1.35);
    box-shadow: 0 0 0 4px rgba(163, 36, 35, .15);
}

/* ---------- Mobiles Jahres-Band ---------- */

.bmk-tl-sticky {
    display: none;
    position: sticky;
    top: var(--bmk-tl-offset);
    z-index: 5;
    margin: 0 0 .75rem;
    padding: .35rem .9rem;
    background: #A32423;
    color: #ffffff;
    font-size: var(--fs-sm);
    font-weight: 600;
    border-radius: 6px;
    width: fit-content;
}

.bmk-tl-sticky.is-on {
    display: block;
}

@media (min-width: 768px) {
    .bmk-tl-sticky.is-on {
        display: none;
    }
}

/* ---------- Desktop-Layout: Jahr in eigener Spalte ---------- */

@media (min-width: 768px) {

    .bmk-timeline::before {
        left: 129px;
    }

    .bmk-tl-item {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr);
        column-gap: 2.5rem;
        padding-left: 0;
        padding-bottom: 2rem;
    }

    .bmk-tl-item::before {
        left: 123px;
    }

    .bmk-tl-year {
        text-align: right;
        margin-bottom: 0;
        padding-top: .1rem;
    }

}

/* ---------- Barrierefreiheit ---------- */

@media (prefers-reduced-motion: reduce) {

    .bmk-tl-item::before,
    .bmk-tl-year,
    .bmk-tl-body {
        transition: none;
    }

    .bmk-tl-item.is-active::before {
        transform: none;
    }
}

/* Ohne JavaScript bleibt alles gleichwertig lesbar */
.bmk-timeline:not(.is-enhanced) .bmk-tl-body {
    opacity: 1;
}

/* ==========================================================================
   BMK Brandenberg - Suchergebnisse (Smart Search / com_finder)
   ========================================================================== */

/* --- Suchformular --- */
.com-finder__search {
    margin-bottom: 32px;
}

.com-finder__search input[type="text"],
.com-finder__search .form-control {
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    padding: 10px 14px;
    font-size: var(--fs-md);
}

.com-finder__search input[type="text"]:focus,
.com-finder__search .form-control:focus {
    border-color: var(--bmk-gold, #D4B670);
    box-shadow: 0 0 0 3px rgba(212, 182, 112, .2);
    outline: none;
}

/* --- Trefferliste als Karten --- */
.com-finder .search-results,
.com-finder__results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.com-finder .result__item,
.com-finder .search-results > li {
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 16px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.com-finder .result__item:hover,
.com-finder .search-results > li:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
    border-color: #ccc;
}

/* --- Titel --- */
.com-finder .result__title,
.com-finder .search-results h3 {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.35;
}

.com-finder .result__title a,
.com-finder .search-results h3 a {
    color: var(--bmk-rot, #A32423);
    text-decoration: none;
}

.com-finder .result__title a:hover,
.com-finder .search-results h3 a:hover {
    color: var(--bmk-gold, #D4B670);
    text-decoration: underline;
}

/* --- Textauszug --- */
.com-finder .result__body,
.com-finder .search-results p {
    font-size: var(--fs-md);
    line-height: 1.65;
    color: #444444;
    margin: 0 0 10px;
}

/* --- Meta-Zeile (Typ, Autor, Kategorie) --- */
.com-finder .result__taxonomy {
    font-size: var(--fs-sm);
    color: #777777;
}

/* --- Fundstellen hervorheben: Gold statt Signalgelb --- */
.com-finder .highlight,
.com-finder mark {
    background: rgba(212, 182, 112, .35);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 600;
}

/* --- Zeile "2 Ergebnisse gefunden" --- */
.com-finder__results > p:first-of-type {
    font-size: var(--fs-sm);
    color: #666666;
    margin-bottom: 24px;
}

/* ==========================================================================
   BMK Brandenberg - Suchmodul auf der Berichte-Seite
   --------------------------------------------------------------------------
   Joomla 6 gibt das Suchmodul als natives <search>-Element aus, nicht mit
   einer eigenen Klasse. Deshalb wird hier ueber das Element selektiert.
   Bewusst zurueckhaltend: das Suchfeld ist ein Werkzeug, kein Inhalt.
   ========================================================================== */

/* Kartenrahmen des Moduls aufloesen */
.main-top.card:has(search) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 28px !important;
}

.main-top.card:has(search) > .card-body {
    padding: 0 !important;
}

/* Beschriftung "Suchen" weg - das Lupensymbol erklaert sich selbst */
search label {
    display: none !important;
}

/* Eingabefeld und Button als eine Einheit, rechtsbuendig */
search form {
    display: flex;
    gap: 0;
    max-width: 380px;
    margin-left: auto;
}

search input[type="text"],
search input[type="search"] {
    flex: 1;
    min-width: 0;
    border: 1px solid #dcdcdc;
    border-right: none;
    border-radius: 4px 0 0 4px;
    padding: 9px 14px;
    font-size: var(--fs-sm);
    background: #ffffff;
}

search input[type="text"]:focus,
search input[type="search"]:focus {
    border-color: var(--bmk-gold, #D4B670);
    box-shadow: none;
    outline: none;
}

search .btn,
search button[type="submit"] {
    border-radius: 0 4px 4px 0 !important;
    padding: 9px 16px !important;
    font-size: var(--fs-sm) !important;
    white-space: nowrap;
}

/* Mobil volle Breite */
@media (max-width: 767px) {

    search form {
        max-width: none;
        margin-left: 0;
    }
}

/* ==========================================================================
   BMK Brandenberg - Phoca Gallery, Kategorie-Uebersicht (Fotos)
   --------------------------------------------------------------------------
   Angleichung an die Kartenoptik der Berichte: Titelbild oben, Beschriftung
   darunter auf weissem Grund - statt Phocas Standardvariante mit Text im
   Bild. Raster wie im Blog: 3 pro Zeile, ab 991px einspaltig.
   ========================================================================== */

/* Herstellerhinweis (klassenloses div mit Inline-Styles, deshalb ueber
   die Position selektiert) und Feed-Symbol ausblenden */
#phocagallery > div:last-child,
#phocagallery .pg-top-icons {
    display: none !important;
}

/* Raster: vier Karten pro Zeile auf grossen Schirmen, darunter in
   Stufen weniger. Fuenf waeren moeglich, machen die Karten aber so
   schmal, dass die Titel mehrzeilig umbrechen. */
.pg-categories-items-box {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 0 0 32px;
}

@media (max-width: 1200px) {

    .pg-categories-items-box {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Die Kachel: das Bild fuellt die ganze Karte, der Titel liegt darauf.
   Festes Seitenverhaeltnis 4:3, damit alle Karten gleich hoch stehen -
   unabhaengig vom Format des jeweiligen Titelbildes. */
.pg-category-box {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #e8e4dc;
    border: none !important;
    border-radius: 10px;
    overflow: hidden;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    transition: transform .25s ease, box-shadow .25s ease;
}

.pg-category-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}

/* Bildflaeche. Phoca legt das Foto als Hintergrund auf das <a>,
   deshalb wird hier das a-Element aufgezogen statt eines img. */
.pg-category-box-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    overflow: hidden;
}

.pg-category-box-image a {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: transform .35s ease;
}

.pg-category-box:hover .pg-category-box-image a {
    transform: scale(1.05);
}

/* Falls Phoca doch ein img ausliefert, fuellt es die Karte formatfuellend */
.pg-category-box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
}

/* Beschriftung liegt ueber dem Bild. Der Farbverlauf haelt den Text
   lesbar, ohne das Foto mit einer harten Flaeche zu zerschneiden. */
.pg-category-box-info {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    z-index: 2;
    padding: 42px 16px 14px !important;
    background: linear-gradient(to top, rgba(20, 14, 12, .85), rgba(20, 14, 12, .55) 45%, rgba(20, 14, 12, 0)) !important;
    border: none !important;
    pointer-events: none;
}

.pg-category-box-title {
    position: static !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    background: none !important;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.pg-category-box-title a {
    color: #ffffff !important;
    text-decoration: none;
    pointer-events: auto;
}

.pg-category-box-title a:hover {
    color: var(--bmk-gold, #D4B670) !important;
}

/* Bildanzahl in BMK-Gold, dezent daneben */
.pg-category-box-title span,
.pg-category-box-info .pg-category-box-count {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--bmk-gold, #D4B670);
    margin-left: 6px;
}

/* Ordnersymbol vor dem Titel weg. Phoca setzt es je nach Version als
   <img>, als Icon-Font oder als ::before mit Hintergrundbild - deshalb
   sind hier alle Varianten abgedeckt. */
.pg-category-box-title img,
.pg-category-box-title i,
.pg-category-box-title svg,
.pg-category-box-title .icon-folder,
.pg-category-box-title [class*="icon"],
.pg-category-box-info .pg-icon {
    display: none !important;
}

.pg-category-box-title::before,
.pg-category-box-title a::before,
.pg-category-box-info::before {
    content: none !important;
    display: none !important;
    background-image: none !important;
}

@media (prefers-reduced-motion: reduce) {

    .pg-category-box,
    .pg-category-box-image a {
        transition: none;
    }

    .pg-category-box:hover,
    .pg-category-box:hover .pg-category-box-image a {
        transform: none;
    }
}

/* Mobil einspaltig - derselbe Breakpoint wie bei den Blog-Karten */
@media (max-width: 991px) {

    .pg-categories-items-box {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width: 560px) {

    .pg-categories-items-box {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ==========================================================================
   BMK Brandenberg - Registerseiten (com_contact, Kategorieansicht)
   --------------------------------------------------------------------------
   Joomla gibt die Mitglieder eines Registers als Tabelle aus. Hier wird
   daraus ein Raster aus Namenskarten - dieselbe Optik wie bei den uebrigen
   Karten der Seite. Die Tabellenstruktur bleibt im HTML erhalten (gut fuer
   Screenreader), nur die Darstellung aendert sich.
   ========================================================================== */

/* --- Registerbild und Beschreibungstext --- */

.com-contact-category .category-desc {
    margin-bottom: 28px;
    font-size: var(--fs-md);
    color: #555555;
    line-height: 1.65;
}

/* Registertitel an die uebrigen Seitenueberschriften angleichen.
   Joomla setzt hier ein h1 ausserhalb der sonst ueblichen
   .page-header-Struktur, deshalb eine eigene Regel. */
.com-contact-category .contact-category > h1 {
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--bmk-rot, #A32423);
    line-height: 1.2;
    margin: 0 0 20px;
}

/* Das Bild steht im HTML direkt vor dem Text ohne eigenen Container.
   display: block schiebt den Text darunter statt daneben. */
.com-contact-category .category-desc img {
    width: 100%;
	max-width: 700px;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 0 0 14px;
}

/* --- Tabelle zum Kartenraster umbauen --- */

/* Zwischenueberschrift vor der Namensliste. Bewusst per CSS statt in
   der Kategoriebeschreibung - dort wuerde sie auch in der
   Registeruebersicht auftauchen, wo sie keinen Sinn ergibt. */
#contactList::before {
    content: "Unsere Musikantinnen und Musikanten";
    grid-column: 1 / -1;
    display: block;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--bmk-rot, #A32423);
    padding-top: 20px;
    margin-bottom: 4px;
    border-top: 1px solid #f0e6d6;
}

#contactList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    width: 100%;
    border: none !important;
    background: none !important;
    margin: 0 0 24px;
}

/* Ueberschriftenzeile und die leere Details-Spalte weg */
#contactList caption,
#contactList thead {
    display: none !important;
}

/* Die zweite Tabellenspalte enthaelt das Feld "Position" - bei uns die
   Stimme, etwa "1. Klarinette". Sie wird nicht ausgeblendet, sondern
   unter den Namen gesetzt. Ist keine Position hinterlegt, bleibt die
   Zelle leer und faellt durch das :empty nicht ins Gewicht. */
/* Im Feld "Position" steht bei uns eine Funktion wie "Obmann" oder
   "Kassier" - die haben nur wenige Mitglieder. Deshalb bewusst kein
   abgesetzter Streifen: Das wuerde aus einer Ausnahme ein
   Gestaltungselement machen und die uebrigen Karten wirken lassen,
   als fehle dort etwas. Nur eine dezente Zeile unter dem Namen.
   Kein min-height - die Karten gleichen sich im Raster ohnehin
   zeilenweise an. */
#contactList td {
    display: block;
    padding: 0 15px 12px !important;
    border: none !important;
    background: none !important;
    font-size: var(--fs-xs);
    color: #9a9086;
    line-height: 1.4;
}

#contactList td:not(:empty) {
    padding-top: 1px !important;
}

/* Bootstrap faerbt Tabellenzellen bei den Klassen table-striped und
   table-hover NICHT ueber background-color, sondern ueber einen
   innenliegenden Schatten:
       box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, ...)
   Der fuellt die Zelle komplett aus und laesst sich mit
   background-Regeln nicht uebersteuern - deshalb wird er hier direkt
   abgeschaltet. Sichtbar wurde das bei Karten ohne Eintrag im Feld
   "Position": dort lag kein Text ueber dem Schatten und die leere
   Zelle erschien andersfarbig als die Karte.
   Sauberer waere, die Klassen table-striped/table-hover im Menuepunkt
   abzuwaehlen - dann entfaellt die Ursache statt nur der Wirkung. */
#contactList tr,
#contactList th,
#contactList td {
    box-shadow: none !important;
    --bs-table-bg-state: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-bg: transparent;
}

/* Hinweis: Ist keine Position hinterlegt, bleibt die Zelle optisch leer,
   enthaelt aber Leerzeichen und Umbrueche - :empty greift daher nicht.
   Der Abstand faellt trotzdem kaum auf. */

/* display: contents loest den tbody auf, damit die Zeilen direkt
   zu Rasterfeldern werden. */
#contactList tbody {
    display: contents;
}

#contactList tr {
    display: block;
    background: #fdfbf7 !important;
    border: 1px solid #f0e6d6 !important;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    transition: border-color .2s ease, transform .2s ease;
}

#contactList tr:hover {
    border-color: var(--bmk-gold, #D4B670) !important;
    transform: translateY(-2px);
}

#contactList th.list-title {
    display: block;
    padding: 13px 15px 3px !important;
    border: none !important;
    background: none !important;
    font-weight: 500;
    font-size: var(--fs-sm);
}

#contactList th.list-title a {
    color: #333333;
    text-decoration: none;
    display: block;
}

#contactList tr:hover th.list-title a {
    color: var(--bmk-rot, #A32423);
}

@media (prefers-reduced-motion: reduce) {

    #contactList tr,
    #contactList tr:hover {
        transition: none;
        transform: none;
    }
}

/* ==========================================================================
   BMK Brandenberg - Registeruebersicht (com_contact, Kategorienliste)
   --------------------------------------------------------------------------
   Joomla gibt die Register als schlichte Liste aus Ueberschrift plus
   Beschreibung aus. Hier wird daraus ein Kachelraster.
   ========================================================================== */

.com-contact-categories.categories-list {
    display: grid;
    /* Breiter als vorher (260px), damit das Registerbild als kleines
       Banner Platz hat, ohne die Kachel zu quetschen. */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    margin-top: 8px;
}

/* Einleitungstext der Elternkategorie ueber die volle Breite */
.com-contact-categories > .base-desc {
    grid-column: 1 / -1;
    font-size: var(--fs-md);
    color: #555555;
    line-height: 1.65;
    margin: 0 0 10px;
}

/* Eine Registerkachel */
.com-contact-categories__items {
    background: #fdfbf7;
    border: 1px solid #f0e6d6;
    border-radius: 10px;
    padding: 18px 20px 20px;
    transition: border-color .2s ease, transform .2s ease;
}

.com-contact-categories__items:hover {
    border-color: var(--bmk-gold, #D4B670);
    transform: translateY(-3px);
}

.com-contact-categories__items > .page-header {
    margin: 0 0 6px;
    padding: 0;
    border: none;
}

.com-contact-categories__items h3.item-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.com-contact-categories__items h3.item-title a {
    color: var(--bmk-rot, #A32423);
    text-decoration: none;
}

.com-contact-categories__items:hover h3.item-title a {
    color: var(--bmk-gold, #D4B670);
}

/* Zaehler-Badge: Joomlas blaues Bootstrap-Etikett zu einer dezenten
   Zeile machen. Die Beschriftung "Kontaktanzahl:" laesst sich per CSS
   nicht entfernen - dafuer im Menuepunkt die Anzeige abschalten. */
.com-contact-categories__items .badge {
    background: none !important;
    color: #888888 !important;
    font-size: var(--fs-sm);
    font-weight: 400;
    padding: 0;
    display: block;
    margin-top: 2px;
}

.com-contact-categories__items .category-desc {
    font-size: var(--fs-sm);
    color: #666666;
    line-height: 1.6;
    margin: 0;
    /* overflow: hidden + border-radius liegen bewusst hier am Container
       und nicht am <img> - border-radius direkt am Bild zwingt manche
       Desktop-Browser (Chrome/Edge unter Windows) in einen
       GPU-Compositing-Pfad mit schlechterer Skalierungsqualitaet, was
       bei starker Verkleinerung zu sichtbar unscharfen/verpixelten
       Bildern fuehrt - Handy-GPUs sind davon meist nicht betroffen.
       Gleiches Muster wie beim Kontaktfoto-Ring. */
    overflow: hidden;
    border-radius: 8px;
}


/* --- Bildunterschrift zum Registerfoto --- */

/* Nennt die auf dem Bild sichtbaren Personen. Sie steht in der
   Kategoriebeschreibung, weil Joomla kein eigenes Feld dafuer kennt.
   Die Namensliste darunter kommt dagegen aus den Kontakten und ist
   vollstaendig - sie enthaelt auch Mitglieder, die beim Fototermin
   gefehlt haben. */
.bmk-bildunterschrift {
    font-size: var(--fs-sm);
    color: #777777;
    line-height: 1.55;
    margin: 8px 0 14px;
}

/* In der Registeruebersicht (Menuepunkt "Mitglieder") wuerde die
   Namensliste unter dem Foto (Bildunterschrift) den Rahmen sprengen und
   ist hier auch nicht noetig - sie bleibt der Detailseite vorbehalten. */
.com-contact-categories__items .bmk-bildunterschrift {
    display: none;
}

/* Das Registerbild selbst wird in der Uebersicht wieder eingeblendet,
   aber in kompakter Banner-Groesse statt der Detailseiten-Groesse aus
   Zeile ~3124 (dort max-width: 700px - das wuerde die Kachel sprengen).
   aspect-ratio + object-fit: cover sorgen dafuer, dass Bilder mit
   unterschiedlichem Seitenverhaeltnis trotzdem einheitlich aussehen. */
.com-contact-categories__items .category-desc img {
    display: block;
    width: 100%;
    /*aspect-ratio: 16 / 9;*/
    object-fit: cover;
	border-radius: 8px;
    margin: 14px 0 12px;
}