/* Hauptmenü horizontal anordnen – für das Joomla-4/5 Dropdown-Metismenu-Layout */
.navigation .mod-menu.mod-menu_dropdown-metismenu {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation .mod-menu.mod-menu_dropdown-metismenu li.metismenu-item {
    position: relative;
    list-style: none;
}

.navigation .mod-menu.mod-menu_dropdown-metismenu>li.metismenu-item>a {
    display: block;
    padding: 12px 15px;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
}

.navigation .mod-menu.mod-menu_dropdown-metismenu>li.metismenu-item:hover>a,
.navigation .mod-menu.mod-menu_dropdown-metismenu>li.metismenu-item.current>a,
.navigation .mod-menu.mod-menu_dropdown-metismenu>li.metismenu-item.active>a {
    background-color: #005c2f;
}

/* MetisMenu setzt für Untermenüs die Klasse "mm-collapse" (nicht mod-menu__sub) */
.navigation .mod-menu_dropdown-metismenu .mm-collapse {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: #007140;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1000;
    font-size: 14px;
}

.navigation .mod-menu_dropdown-metismenu li.metismenu-item:hover>.mm-collapse {
    display: block !important;
}

/* Untermenüs ab der 3. Ebene seitlich statt untereinander öffnen */
.navigation .mm-collapse .mm-collapse {
    top: 0;
    left: 100%;
}

.navigation .mm-collapse li {
    list-style: none;
}

.navigation .mm-collapse a {
    display: block;
    padding: 8px 15px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.navigation .mm-collapse a:hover,
.navigation .mm-collapse a:focus {
    background-color: #005c2f;
}

/* Den (leeren) MetisMenu-Umschalt-Button ausblenden – wir öffnen per Hover, nicht per Klick */
.navigation .mod-menu_dropdown-metismenu .mm-toggler {
    display: none;
}

/* iCagenda-Kalender: Basis-Schriftgröße EINMAL hier auf die Seiten-Basis gesetzt
   (body { font-size: 13px; font-family: Arial, sans-serif; } aus template.css).
   Alle Regeln darunter verwenden "em" relativ zu dieser Basis statt fixer Pixel-
   werte – ändert sich die Basis der Seite künftig, reicht eine Anpassung hier. */
#icagenda_calendar_content,
#icagenda_calendar_content .ic-calendar-container {
    font-size: 13px !important;
    font-family: Arial, sans-serif !important;
}

/* Formularelemente (Monats-Auswahl, Jahresfeld, Buttons) übernehmen Schriftart/-größe
   in den meisten Browsern NICHT automatisch von umgebendem Text – deshalb explizit.
   1em = die oben gesetzte Basisgröße. */
#icagenda_calendar_content select,
#icagenda_calendar_content input,
#icagenda_calendar_content button {
    font-size: 1em !important;
    font-family: Arial, sans-serif !important;
}

/* Die Tageszahlen (1–31) sind in icagenda-calendar.css fest auf "font-size: 1rem"
   gesetzt. "rem" bezieht sich immer auf die Wurzel-Schriftgröße des Browsers
   (meist 16px) und ignoriert dabei jede vererbte Größe. "em" bezieht sich dagegen
   auf die tatsächlich vererbte/umgebende Schriftgröße – deshalb hier em statt rem,
   damit es automatisch der Basis oben folgt. */
#icagenda_calendar_content .ic-calendar-date {
    font-size: 1em !important;
}

/* Wochentags-Kürzel (Mo, Di, ...) – im Original .875rem; hier im selben Verhältnis
   als em, damit die optische Abstufung zu den Tageszahlen erhalten bleibt. */
#icagenda_calendar_content .ic-calendar-top-day {
    font-size: .875em !important;
}

/* Kategorie-Blog-Übersicht "OL-Karten" (Menüpunkt Itemid 166, neu-ol-karten) und
   "Vorstand" (Menüpunkt Itemid 169, neu-vorstand):
   olcgraz bringt für die moderne Joomla-5-Ausgabe (com-content-category-blog__items/
   blog-item/item-content) kein Grid-/Spalten-CSS mit, und Joomla selbst liefert dafür
   auch keins – das kommt normalerweise nur vom Template. Ohne Grid werden die Kacheln
   nur gestapelt, und die <table align="left"> im Artikeltext "schwimmt" unbegrenzt in
   die nächste Kachel hinein, was die Überlappungen verursacht.
   WICHTIG: bewusst auf body.itemid-166 / body.itemid-169 eingegrenzt, da dieselben
   Joomla-Klassennamen auf jeder Blog-Kategorie-Seite der Website vorkommen – ohne
   diese Eingrenzung würde die Regel auch alle anderen Kategorie-Übersichten auf
   3 Spalten umstellen. Für eine weitere Seite hier einfach body.itemid-<ID> ergänzen. */
body.itemid-166 .com-content-category-blog__items.blog-items,
body.itemid-169 .com-content-category-blog__items.blog-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
}

body.itemid-166 .com-content-category-blog__item.blog-item,
body.itemid-169 .com-content-category-blog__item.blog-item {
    /* Begrenzt den Float der Tabelle im Artikeltext auf die eigene Kachel. */
    overflow: hidden;
}

@media (max-width: 992px) {
    body.itemid-166 .com-content-category-blog__items.blog-items,
    body.itemid-169 .com-content-category-blog__items.blog-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    body.itemid-166 .com-content-category-blog__items.blog-items,
    body.itemid-169 .com-content-category-blog__items.blog-items {
        grid-template-columns: 1fr;
    }
}

/* Passkey-Login-Button (Joomla-5-Funktion "Mit Passkey anmelden"): Das SVG-Icon
   (media/plg_system_webauthn/images/fido-passkey-black.svg) hat im Quellcode keine
   width/height, nur ein viewBox – ohne CSS-Vorgabe rendert der Browser ein
   nicht skaliertes Inline-SVG standardmäßig riesig (oft ~300x150px). Joomlas
   Standardtemplate "Cassiopeia" bringt dafür eigenes CSS mit, olcgraz nicht.
   Diese Klasse ist eindeutig nur für den Passkey-Button, daher hier bewusst ohne
   Eingrenzung auf eine einzelne Seite. */
.plg_system_webauthn_login_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
}

.plg_system_webauthn_login_button svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}