/* ====================================================================
   1. GLOBALER HINTERGRUND, HEADER
   ==================================================================== */

/* 1. Die Decke der gesamten Inhalts-Box angehoben lassen */
.container-component, 
.site-grid > main {
    margin-top: -20px !important;   
    position: relative !important;
    z-index: 5 !important;          /* Liegt sicher unter dem Menü */
}

/* 2. NUR die echten Header-Container nach vorne holen (ohne die Klasse .header) */
header.header, 
.site-header,
.container-header {
    position: relative !important;
    z-index: 999 !important;        
}

.navbar, 
.dropdown-menu,
.metismenu {
    position: relative !important;  
    z-index: 1000 !important;       /* Garantiert die oberste Ebene für alle Submenüs */
}

/* 6. Moderne, DSGVO-sichere System-Schriften global für alle Texte */
body, p, h1, h2, h3, h4, h5, h6, .page-header, .item-title, label, textarea, input, select, span, li, td, th {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

html, body {
    background-color: #f7f5f0 !important;
    background-image: none !important;
}

.container-header, .header {
    background-color: #ffffff !important;
    background-image: none !important;
    position: sticky !important; 
    top: 0 !important;
    z-index: 1050 !important; 
}

.site-container { 
    margin-top: 20px !important; 
}

.site-grid, .body-innerwrapper, main, .container-component {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 7. KACHEL-SPERRE FÜR DAS BANNERBILD */
#mod-custom126,
#mod-custom134,
#mod-custom147,
#mod-custom148 {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    min-height: 400px !important;
}

/* 8. BLÄTTERFUNKTION / PAGINATION (HOVER-FARBE ROT STATT BLAU) */
/* Findet den Textlink wie "Zurück zu den Terminen" im Normalzustand */
.pagenav a, 
.item-page .pagenav a, 
.page-nav a, 
.pagination a {
    color: #860822 !important; /* Ihr edles Dunkelrot */
    text-decoration: none !important;
    font-weight: 500 !important;
}

/* 9. Zwingt den Hover-Effekt (Mouseover) von Blau auf Ihr helleres Rot */
.pagenav a:hover, 
.item-page .pagenav a:hover, 
.page-nav a:hover, 
.pagination a:hover,
.pagenav a:focus,
.pagination a:focus {
    color: #a3112e !important; /* Ihr helleres Hover-Rot */
    text-decoration: underline !important; /* Unterstrich beim Hovern */
}

/* ====================================================================
   1b. GLOBALE FLIESSTEXT-LINKS (ROT STATT STANDARDBLAU)
   ==================================================================== */
/* Betrifft alle normalen Links innerhalb von Beiträgen und Texten */
main a,
.com-content-article a,
.item-page a {
    color: #860822 !important; /* Ihr edles Dunkelrot im Normalzustand */
    text-decoration: underline !important; /* Standardmäßig dezent unterstrichen */
    text-underline-offset: 2px !important;
}
/* Ändert die Hover-Farbe auf Rot und macht die Schrift dicker */
main a:hover,
main a:focus,
.com-content-article a:hover,
.item-page a:hover {
    color: #a3112e !important; /* Ihr helleres Hover-Rot */
    font-weight: 600 !important; /* Erhöht die Schriftstärke (Semi-Bold) */
    text-decoration: underline !important;
}


/* ====================================================================
   2. NAVIGATIONS-MENÜ (HAUPTPUNKTE & HAMBURGER) - REPARIERT
   ==================================================================== */

/* Desktop-Ausrichtung NUR anwenden, wenn der Bildschirm groß genug ist (ab 992px) */
@media (min-width: 992px) {
    .container-header .navbar, 
    .container-header .container-nav, 
    .container-header nav {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .container-header .mod-menu { 
        display: flex !important;
        justify-content: center !important;
        width: auto !important;
    }
    .container-header .mod-menu > li {
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        position: relative !important;
    }
}

/* Gemeinsame Navigations-Leiste (Desktop & Mobil) - HÖHE REPARIERT */
.container-header .navbar, 
.container-header .container-nav, 
.container-header nav {
    background-color: #860822 !important;
    padding: 2px 10px !important; 
    
    /* Zwingt den roten Balken, um 4px höher zu werden */
    min-height: 46px !important; 
}

.container-header .mod-menu { 
    background-color: transparent !important; 
}

.container-header .mod-menu a, 
.container-header .mod-menu span, 
.container-header .mod-menu button {
    color: #ffffff !important; 
    font-weight: 400 !important; 
    text-decoration: none !important;
    padding: 10px 6px !important;  /* Macht das Menü oben und unten um je 4px dicker */
    font-size: 1.1rem !important;  
}

.container-header .mod-menu a:hover, 
.container-header .mod-menu button:hover {
    color: #ffffff !important;
}

/* REPARATUR: Der Hamburger-Button Rahmen (KOMPAKTER & KLEINER) */
.container-header .navbar-toggler { 
    border: 1px solid rgba(255, 255, 255, 0.8) !important; 
    padding: 0 !important; 
    margin: 5px 0 !important; 
    background-color: transparent !important;
    width: 38px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* REPARATUR: Alle 3 Linien bombenfest positionieren */
.container-header .navbar-toggler::before {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;                 
    top: 9px !important;                   
    width: 18px !important;                
    height: 2px !important;
    background-color: #ffffff !important;  
    box-shadow: 0 6px 0 #ffffff !important; 
}

/* Die UNTERE Linie zeichnen */
.container-header .navbar-toggler::after {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    width: 18px !important;                
    height: 2px !important;
    background-color: #ffffff !important;  
    top: 21px !important;                  
}

/* Das unsichtbare Joomla-Icon komplett ignorieren und stilllegen */
.container-header .navbar-toggler-icon {
    display: none !important;
}

.container-header .navbar-toggler:focus { 
    outline: none !important; 
    box-shadow: none !important; 
}

/* ====================================================================
   BEHEBUNG: DOPPELTE HOVER-LINIEN IM HAUPTMENÜ
   ==================================================================== */

/* Nur den Standard-Textunterstrich beim Link erlauben, keine Rahmenlinien */
.container-header .mod-menu a:hover,
.container-header .mod-menu button:hover,
.container-header .mod-menu li:hover > a,
.container-header .mod-menu li:hover > span {
    border-bottom: none !important;      /* Entfernt eventuelle Rahmenlinien */
    text-decoration: underline !important; /* Erzwingt die saubere, einzelne Standardlinie */
}

/* Unsichtbare Pseudoelemente (wie ::after) löschen, die Geisterstriche erzeugen */
.container-header .mod-menu li::after,
.container-header .mod-menu a::after {
    border-bottom: none !important;
    content: none !important; /* Verhindert, dass Cassiopeia hier eigene Linien zeichnet */
}

/* Den Klickbereich der Hauptpunkte optimieren, damit kein "Hover-Spalt" entsteht */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
    display: inline-block !important;
    margin-bottom: 0 !important;
}


/* ====================================================================
   3. DROPDOWN-HÖHEN (METIS-MENU) - DOCKUNG KORRIGIERT & REPARIERT
   ==================================================================== */
.container-header .mod-menu li.parent { 
    position: relative !important; 
}

/* DESKTOP-REGELN (AB 992px) */
@media (min-width: 992px) {
    
    /* Der Umschalter sitzt im Desktop eng rechts direkt am Textende */
    .container-header .mod-menu .mm-toggler { 
        position: absolute !important; 
        top: 0 !important; 
        right: 0 !important; 
        width: 24px !important; 
        height: 100% !important; 
        background: transparent !important; 
        border: none !important; 
        z-index: 2 !important; 
        cursor: pointer !important; 
    }
    
    /* Kleiner, eleganter Pfeil direkt neben dem Wort */
    .container-header .mod-menu .mm-toggler::after { 
        position: absolute !important; 
        right: 6px !important; 
        top: 55% !important; 
        transform: translateY(-50%) !important; 
        color: #ffffff !important; 
        border-style: solid !important;
    }
    
    /* DESKTOP-ANPASSUNG: Spezifischerer Selektor für die aufklappende Box */
    .container-header .mod-menu ul.mm-collapse,
    .container-header .mod-menu .dropdown-menu,
    .container-header .mod-menu li.parent ul { 
        position: absolute !important;
        top: 56px !important;           /* <<< HIER IST DEIN PERFEKTER ABSTAND NUN SICHER VERANKERT! */
        left: 0 !important;
        z-index: 99999 !important;      
        min-width: 200px !important;
        background-color: #860822 !important; 
        border: 1px solid #a3112e !important; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; 
        padding: 5px 0 !important; 
        margin-top: 0 !important;       
    }

} /* DIESE Klammer schließt nun alle obigen Desktop-Regeln gemeinsam und fehlerfrei! */


/* MOBIL-ANPASSUNG: Für kleinere Bildschirme (Unter 992px) */
@media (max-width: 991.98px) {
    .container-header .mod-menu ul.mm-collapse,
    .container-header .mod-menu .dropdown-menu { 
        background-color: #860822 !important; 
        border: 1px solid #a3112e !important; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; 
        padding: 5px 0 !important; 
        margin-top: 5px !important; 
    }
}

/* ====================================================================
   4. BUTTONS & 5. FUSSZEILE (FOOTER)
   ==================================================================== */
.btn-primary, .readmore-link .btn { 
    background-color: #860822 !important; 
    border-color: #860822 !important; 
    color: #ffffff !important; 
    transition: background-color 0.2s ease-in-out; 
}

.btn-primary:hover, .btn-primary:focus, .readmore-link .btn:hover { 
    background-color: #a3112e !important; 
    border-color: #a3112e !important; 
    color: #ffffff !important; 
}

footer, .footer, .container-footer { 
    background-color: #860822 !important; 
    color: #ffffff !important; 
    padding-top: 1px !important; 
    padding-bottom: 2px !important; 
    margin: 0 !important; 
    min-height: auto !important; 
}

.container-footer .mod-custom, .container-footer .mod-footer, .container-footer p, .container-footer div, .container-footer span { 
    background-color: transparent !important; 
    color: #ffffff !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    line-height: 1.2 !important; 
}

.container-footer a { 
    color: #ffffff !important; 
    text-decoration: underline !important; 
}

.container-footer a:hover { 
    color: #a3112e !important; 
}

/* ====================================================================
   6. AKKORDEON & 7. BLOG-LAYOUT
   ==================================================================== */
.accordion-button { color: #333333 !important; background-color: #f8f9fa !important; font-weight: 500 !important; }
.accordion-button:not(.collapsed) { background-color: #860822 !important; color: #ffffff !important; box-shadow: none !important; }
.accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1) !important; }
.accordion-body { border-left: 3px solid #860822 !important; background-color: #ffffff !important; color: #333333 !important; }

.blog-item .item-image { max-width: 250px !important; margin-right: 20px !important; float: left !important; }
.blog-item .item-image img { width: 100% !important; height: auto !important; object-fit: cover; }
.blog-item .com-content-category-blog__body, .blog-item .item-content { max-width: 600px !important; display: inline-block !important; }
.blog-item .readmore-link { clear: both !important; display: block !important; padding-top: 10px !important; }
.blog-item { border-bottom: 1px solid #860822 !important; padding-bottom: 25px !important; margin-bottom: 25px !important; }
.blog .blog-items .blog-item:last-child { border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
@media (max-width: 575.98px) {
    .blog-item .item-image { max-width: 100% !important; float: none !important; margin-right: 0 !important; margin-bottom: 15px !important; }
    .blog-item .com-content-category-blog__body, .blog-item .item-content { max-width: 100% !important; }
}
/* ====================================================================
   7. RÜCKBLICK (UNTERKATEGORIE-TITEL TYPOGRAFIE - FIX)
   ==================================================================== */
/* Findet exakt die Struktur aus Ihrem HTML und bändigt den Titel */
.com-content-category-blog__child h3.page-header.item-title,
.com-content-category-blog__child h3.page-header.item-title a,
.cat-children .com-content-category-blog__child a {
    font-size: 1rem !important;  /* Schön dezent statt riesig */
    line-height: 1.2 !important;   
    font-weight: 400 !important;   /* Normal/Medium statt fett */
    color: #860822 !important;     /* In Ihrem edlen Dunkelrot */
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* ====================================================================
   7. RÜCKBLICK (UNTERKATEGORIE-TITEL TYPOGRAFIE)
   ==================================================================== */

/* HOVER-EFFEKT: Hier fügen wir das "Fettwerden" speziell für den Rückblick ein */
html body .cat-children .com-content-category-blog__child a:hover,
html body .com-content-category-blog__children .com-content-category-blog__child a:hover {
    color: #a3112e !important;    /* Ihr helleres Hover-Rot */
    font-weight: 600 !important;   /* Zwingt nun auch den Rückblick-Titel beim Hovern auf Semi-Bold! */
    text-decoration: underline !important;
}



/* ====================================================================
   8. TABELLEN-LISTE IM RÜCKBLICK (BEITRÄGE & TEXTE)
   ==================================================================== */
/* Formatierung der Beitrags-Links in der Liste/Tabelle darunter */
.category-list table a, 
.category-list .list-title a {
    font-size: 1.1rem !important; 
    line-height: 1.2 !important; 
    font-weight: 500 !important; 
    color: #860822 !important; 
    text-decoration: underline !important; /* Schön lesbar unterstrichen */
    text-underline-offset: 3px !important;
}

/* Hover-Effekt für die Tabellen-Links (wird etwas heller) */
.category-list table a:hover, 
.category-list .list-title a:hover {
    color: #a3112e !important; 
}

/* Tabellen-Metadaten (Datum, Zugriffe etc.) dezent grau halten */
.category-list table, 
.category-list td, 
.category-list .list-author, 
.category-list .list-hits, 
.category-list .list-date { 
    color: #444444 !important; 
    font-size: 0.95rem !important;
}

/* Tabellenkopf (Spaltenüberschriften wie "Titel", "Zugriffe") */
.category-list th, 
.category-list th a { 
    color: #555555 !important; 
    font-weight: 600 !important; 
    font-size: 0.85rem !important; 
    text-transform: uppercase !important; 
    letter-spacing: 0.5px !important; 
    text-decoration: none !important; 
}

/* Zeilenabstände innerhalb der Tabelle luftiger gestalten */
.category-list td { 
    padding: 12px 10px !important; 
    border-bottom: 1px solid rgba(134, 8, 34, 0.12) !important;
}

/* Blätterfunktion unter der Tabelle (Pagination) */
.pagenav a, 
.item-page .pagenav a, 
.page-nav a, 
.pagination a {
    font-size: 1.0rem !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    color: #860822 !important;
    text-decoration: none !important;
}


/* ====================================================================
   9. KONTAKTFORMULAR & SYSTEM-BUTTONS
   ==================================================================== */
.btn, div.blog-item .readmore-link a, div.blog-item a.btn-primary, div.blog-item a.btn-secondary, .com-content-category-blog__body .readmore-link a, .readmore-link .btn, .item-page .btn,
.contact-form button, .contact-form .btn, .contact-form button[type="submit"] {
    background-color: #860822 !important; border-color: #860822 !important; color: #ffffff !important; padding: 4px 12px !important; display: inline-block !important; font-weight: 500 !important; font-size: 0.9rem !important; text-decoration: none !important; box-shadow: none !important; background-image: none !important; transition: background-color 0.2s ease-in-out;
}
.btn:hover, .btn:focus, div.blog-item .readmore-link a:hover, .item-page .btn:hover, .contact-form button:hover, .contact-form .btn:hover, .contact-form button[type="submit"]:hover { background-color: #a3112e !important; border-color: #a3112e !important; color: #ffffff !important; }
.contact-form .form-control { border: 1px solid #cccccc !important; border-radius: 2px !important; padding: 8px 12px !important; background-color: #ffffff !important; color: #333333 !important; box-shadow: none !important; transition: border-color 0.2s ease-in-out; }
.contact-form .form-control:focus { border-color: #860822 !important; box-shadow: 0 0 0 2px rgba(134, 8, 34, 0.15) !important; }
.contact-form label { font-weight: 500 !important; color: #333333 !important; margin-bottom: 4px !important; margin-top: 10px !important; }


/* ====================================================================
   10. NAVIGATIONSPFAD & RECHTLICHE SEITEN (KOMPLETT-OPTIMIERUNG)
   ==================================================================== */

/* 1. Äußerer Block: Perfekt positioniert & in strahlendem Reinweiß */
.mod-breadcrumbs__wrapper {
    background: #f7f5f0 !important;           /* Löscht das Joomla-Standardgrau */
    background-color: #f7f5f0 !important; 
    border-radius: 0 !important;
    margin-top: 10px !important;              /* Dein perfekter Puffer unter dem Menü */
    margin-bottom: 15px !important; 
    padding: 0.5rem 1rem !important;          /* Gibt dem Text Abstand zum Rand */
    position: relative !important;
    z-index: 10 !important;         
    border: none !important;                  /* Entfernt graue Haarlinien */
    box-shadow: none !important;              /* Entfernt feine graue Schatten */
}

/* 2. Alle umschließenden Hilfs-Container ebenfalls f7f5f0 schalten */
.site-breadcrumbs,
.mod-breadcrumbs,
.breadcrumb,
.container-breadcrumbs,
.breadcrumb-item {                            
    background: #f7f5f0 !important;
    background-color: #f7f5f0 !important;
    text-decoration: none !important;
    box-shadow: none !important;              
    border: none !important;                  
}

/* 3. Links im Navigationspfad (Weinrot) */
.breadcrumb a, 
.mod-breadcrumbs a { 
    color: #a3112e !important; 
    text-decoration: underline !important; 
    font-weight: 400 !important; 
}

/* 4. Links beim Drüberfahren (Dunkelrot & Unterstrichen) */
.breadcrumb a:hover, 
.mod-breadcrumbs a:hover { 
    color: #860822 !important; 
    text-decoration: none !important; 
}

/* 5. Aktuelle (letzte) Seite im Pfad (Fett & Dunkelrot im Ruhezustand) */
.breadcrumb-item.active, 
.mod-breadcrumbs .active { 
    color: #860822 !important; 
    font-weight: 600 !important; 
}

/* 6. FINALE RETTUNG: Jedes Geister-Grau & Haarlinien beim Hovern der Zielseite vernichten */
.breadcrumb-item.active:hover,
.mod-breadcrumbs .active:hover,
.breadcrumb-item[aria-current="page"]:hover,
.mod-breadcrumbs__wrapper span:hover,
.mod-breadcrumbs__wrapper li:hover,
.breadcrumb-item:hover { 
    color: #860822 !important;                 /* Bleibt bombenfest in deinem Dunkelrot */
    text-decoration: none !important;          /* Keine normale Unterstreichung */
    border-bottom: 0px solid transparent !important; /* Zerschlägt die hauchdünne 1px-Grafiklinie */
    outline: none !important;                  /* Entfernt den Fokus-Rahmen des Browsers */
    box-shadow: none !important;               
}

/* 7. Trennzeichen farblich anpassen (Weg mit dem harten Grau!) */
.breadcrumb-item + .breadcrumb-item::before { 
    color: #a3112e !important;                /* Dein edles Weinrot statt Grau */
    opacity: 1 !important;                  /* Macht den Slash hauchzart und unaufdringlich */
    content: "/" !important;                  
}

/* 8. SMARTPHONE-OPTIMIERUNG (EINZEILIG & WISCHBAR) */
@media (max-width: 991.98px) {
    .mod-breadcrumbs__wrapper {
        margin-top: 5px !important;        
        overflow-x: auto !important;          /* Macht die Box seitlich wischbar */
        white-space: nowrap !important;       /* Verhindert den Zeilenumbruch */
        -webkit-overflow-scrolling: touch; 
        background: #ffffff !important;      
        background-color: #ffffff !important;
    }
    .mod-breadcrumbs__wrapper::-webkit-scrollbar {
        display: none !important;             /* Versteckt den Scrollbalken auf Handys */
    }
    .breadcrumb-item, 
    .breadcrumb-item a,
    .mod-breadcrumbs .active {
        font-size: 0.95rem !important;     
    }
}



/* Aktuelle (letzte) Seite im Pfad (Fett & Dunkelrot im Ruhezustand & bei JEDEM Hover) */
.breadcrumb-item.active, 
.mod-breadcrumbs .active,
.breadcrumb-item[aria-current="page"]:hover,
.breadcrumb-item.active:hover,
.mod-breadcrumbs .active:hover { 
    color: #860822 !important;    /* Garantiert fest in deinem Dunkelrot */
    font-weight: 600 !important;   
    text-decoration: none !important; /* Verhindert das Durchstreichen */
    border-bottom: 0px solid transparent !important; /* Überschreibt die 1px-Haarlinie radikal */
    box-shadow: none !important;
    outline: none !important;
}


/* Hintergrund für farbige Seiten-Layouts zurücksetzen */
body.bg-farbig, 
body.bg-farbig main, 
body.bg-farbig .site-container, 
body.bg-farbig .container-component { 
    background-color: #f8f9fa !important; 
    background-image: none !important; 
}



/* Custom-Modul auf volle Bildschirmbreite zwingen */
#mod-custom126 { 
    width: 100vw !important; 
    max-width: 100vw !important; 
}

/* Chevron-/Pfeil-Icons bei Weiterlesen-Links und Buttons ausblenden */
.readmore a .icon-chevron-right, 
.readmore-link a [class*="icon-"], 
.btn [class*="icon-chevron"] { 
    display: none !important; 
}


/* ====================================================================
   11. FEINTUNING: SCHLANKE HÖHE & FIXIERTE ACHSEN
   ==================================================================== */
.container-header nav, .container-header .navbar,
.container-header .mod-menu > li > a, .container-header .mod-menu > li > span {
    padding-top: 0px !important; padding-bottom: 0px !important;
    height: 34px !important; line-height: 34px !important;
}
.container-header .mod-menu .mm-toggler {
    height: 34px !important; min-height: 34px !important; top: 0 !important;
}
.container-header .mod-menu .mm-toggler::after {
    top: 22px !important; transform: none !important;
}
.container-header .mod-menu li.mm-active .mm-toggler::after,
.container-header .mod-menu li.parent[aria-expanded="true"] .mm-toggler::after {
    transform: rotate(180deg) !important; top: 18px !important;
}
.container-header .mod-menu ul.mm-collapse {
    position: absolute !important; top: 100% !important; left: 0 !important; z-index: 999 !important;
}
.container-header .mod-menu ul.mm-collapse li { display: block !important; }


/* ==========================================
   12. FEINTUNING: MENÜ NÄHER AN DIE TOPBAR
   ========================================== */
/* Reduziert den Abstand unter dem Logo, damit das Menü nach oben nachrückt */
.container-topbar, 
#mod-custom126 {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.container-below-top, 
.container-nav {
    padding-top: 0 !important;
    margin-top: -8px !important;
}


/* ====================================================================
   13. SCHLANKE HÖHE & PERFEKTE KLICKFLÄCHEN-VERSCHMELZUNG
   ==================================================================== */
/* Deine goldene Original-Einstellung: Knackig flach und absolut stabil */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    height: 40px !important;
    line-height: 34px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Streckt den Klick-Button unsichtbar über das gesamte Wort */
.container-header .mod-menu .mm-toggler {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 40px !important;
    background: transparent !important; border: none !important;
    z-index: 2 !important; cursor: pointer !important;
}

/* Setzt die weißen Pfeile perfekt nach unten auf deine Wunschtiefe */
.container-header .mod-menu .mm-toggler::after {
    top: 26px !important; transform: none !important;
}

/* Verhindert das Weghüpfen des Pfeils beim aufgeklappten Zustand */
.container-header .mod-menu li.mm-active .mm-toggler::after,
.container-header .mod-menu li.parent[aria-expanded="true"] .mm-toggler::after {
    transform: rotate(180deg) !important; top: 22px !important;
}

/* Sichert das Untermenü sauber und flach untereinander */
.container-header .mod-menu ul.mm-collapse {
    position: absolute !important; top: 100% !important; left: 0 !important; z-index: 999 !important;
}
.container-header .mod-menu ul.mm-collapse li { display: block !important; }

/* TRICK: Macht die Rahmenlinien beim aktiven Druidengarten unsichtbar */
.container-header .mod-menu li.active, .container-header .mod-menu li.active > a,
.container-header .mod-menu li.active > span, .container-header .mod-menu li.mm-active,
.container-header .mod-menu .mm-toggler {
    border-color: transparent !important; outline-color: transparent !important; box-shadow: none !important;
}

/* ====================================================================
   14. TRANSPARENTER LICHTSCHLEIER-HOVER (ABSOLUT TANZSICHER)
   ==================================================================== */
/* Verpasst den einfachen Text-Links (Start, Termine etc.) ihre bündige Höhe */
.container-header .mod-menu li:hover > a,
.container-header .mod-menu li:hover > span {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    margin-top: 0 !important;
    height: 38px !important;       /* Bündige Höhe für Standard-Links */
    line-height: 34px !important;
}

/* Verbietet dem Klick-Button strikt, eine eigene Hover-Farbe zu erzeugen */
.container-header .mod-menu li.parent:hover .mm-toggler {
    background-color: transparent !important;
}

/* Verhindert, dass die Unterpunkte beim Aufklappen den Haupt-Hover erben */
.container-header .mod-menu ul.mm-collapse a {
    background-color: transparent !important; height: auto !important; line-height: 1.2 !important; padding: 6px 20px !important;
}
.container-header .mod-menu ul.mm-collapse a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ====================================================================
   15. FEINTUNING: DER PIXEL-SCHNITT FÜR ELTERNELEMENTE
   ==================================================================== */
/* Korrigiert exakt die 2px-Abweichung bei Druidengarten & Kontakt */
.container-header .mod-menu li.parent:hover > a,
.container-header .mod-menu li.parent:hover > span {
    height: 36px !important; /* Stutzt den Schleier hier perfekt bündig zurecht */
}

/* ====================================================================
   16. FEINTUNING: KLICK-RAHMEN RADIKAL ENTFERNEN (ONCLICK-OUTLINE-STOPP)
   ==================================================================== */
/* Vernichtet den störenden Rahmen im Moment des Draufklickens komplett */
.container-header .mod-menu a:active,
.container-header .mod-menu a:focus,
.container-header .mod-menu span:active,
.container-header .mod-menu span:focus,
.container-header .mod-menu button:active,
.container-header .mod-menu button:focus,
.container-header .mod-menu .mm-toggler:active,
.container-header .mod-menu .mm-toggler:focus {
    outline: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    box-shadow: 0 0 0 0 transparent !important;
    border: none !important;
}

/* ====================================================================
   17. DESIGN-FINALE: MENÜLEISTE AUF VOLLE BILDSHIRMBREITE STRECKEN
   ==================================================================== */
/* Befreit das Menü aus dem engen Raster und streckt es auf 100% Breite */
.container-header .container-below-top {
    grid-column: full-start / full-end !important; /* Zwingt Cassiopeia zur vollen Breite */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;      /* Zentrierungs-Trick für absolute Bündigkeit */
    margin-right: calc(50% - 50vw) !important;
}

/* Garantiert, dass der rote Balken im Inneren nahtlos bis an die Ränder läuft */
.container-header nav,
.container-header .navbar {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important; /* Löscht eventuelle runde Ecken an den Außenkanten */
}

/* ====================================================================
   18. DESIGN-FINALE: MENÜEINTRÄGE HORIZONTAL ZENTRIEREN
   ==================================================================== */
/* Zentriert die gesamte Menü-Liste innerhalb der roten Vollbreiten-Leiste */
.container-header .navbar-collapse {
    justify-content: center !important; /* Richtet die Einträge exakt mittig aus */
}

/* Verhindert, dass die Liste im Desktop-Modus nach links ausbricht */
.container-header .mod-menu_dropdown-metismenu {
    display: flex !important;
    justify-content: center !important;
    width: auto !important; /* Erlaubt der Liste, sich harmonisch in der Mitte zu sammeln */
}

/* ====================================================================
   19. DESIGN-FINALE: DROPDOWNS NÄHER AN DIE MENÜLEISTE ZIEHEN
   ==================================================================== */
/* Zieht die aufklappende Box des Untermenüs exakt um 6px nach oben */
.container-header .mod-menu ul.mm-collapse {
    margin-top: -10px !important; /* Verringert den Abstand, dockt perfekt an die 34px-Leiste an */
}

/* ====================================================================
   SIDEBAR LEFT: RAHMEN ENTFERNEN & PADDING ANPASSEN (RETTUNG)
   ==================================================================== */
/* 1. Die äußere Box/Card der linken Sidebar komplett neutralisieren */
.container-sidebar-left .sidebar-left.card {
    border: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Hier definierst du jetzt DEIN ganz eigenes Padding für den Inhalt (Gartenbild) */
.container-sidebar-left .sidebar-left .card-body {
    /* Reihenfolge: Oben (0px) - Rechts (5px) - Unten (0px) - Links (0px) */
    padding: 70px 30px 0px 0px !important; 
    
    /* Schiebt das Modul dezent ein Stück höher */
    margin-top: -5px !important; 
}

/* 3. Das eigentliche Custom-Modul im Inneren absolut sauber halten */
#mod-custom137 {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 4. SANFTE REINIGUNG DER BREITE (Damit nichts das Grid sprengt) */
@media (min-width: 992px) {
    .container-sidebar-left {
        min-width: 340px !important; 
        max-width: 400px !important;
    }
}

/* ====================================================================
   MENÜ-BREITE: ZWINGT DAS ROTEN BAND AUF DIE VOLLE FENSTERBREITE
   ==================================================================== */
/* Drückt das Menüband links und rechts wieder komplett an den Rand */
.container-below-top,
.container-header nav,
.container-header .navbar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

//* ====================================================================
   10. TITEL- & TABELLENZÄHMUNG (JEAN PAUL & RÜCKBLENDE)
   ==================================================================== */
/* Zwingt die Tabellen-Links (Jean Paul etc.) auf ein dezentes Maß und eure Logen-Farbe */
.category-list table.com-content-category__table tbody tr th.list-title a,
.category-list table.com-content-category__table tbody tr th.list-title a span,
.category-list table a,
.category-list .list-title a {
    font-size: 11pt !important;    /* Deine Wunschgröße */
    font-weight: 400 !important;   /* Hebt das fette Standard-Design auf */
    font-style: normal !important; 
    color: #860822 !important;     /* Euer schönes Logen-Rot */
    text-decoration: none !important;
}

/* Hover-Effekt: Wird beim Drüberfahren leicht heller rot */
.category-list table.com-content-category__table tbody tr th.list-title a:hover,
.category-list table a:hover {
    color: #a3112e !important;
}

/* Sicherheitsnetz für die Tabellenköpfe dieser spezifischen Komponente */
.com-content-category__articles table th a,
.com-content-category__articles table th.list-title a {
    font-size: 11pt !important;
    font-weight: 400 !important;
    color: #860822 !important;
}
/* ====================================================================
   ORIGINAL-ERFOLGSCODE: RÜCKBLICK-TITEL & JEAN-PAUL-LISTE (GEZÄHMT)
   ==================================================================== */
/* Zwingt den sturen Blog-Titel "Rückblick" und die Tabelle auf 11pt und un-fett */
.page-header h1, 
.page-header h1 span,
.page-header h1 a,
h1 [itemprop="name"],
h1.page-title,
.com-content-category-blog__title,
.com-content-category__title,
.category-list table.com-content-category__table tbody tr th.list-title,
.category-list table.com-content-category__table tbody tr th.list-title a,
.category-list table.com-content-category__table tbody tr th.list-title a span {
    font-size: 11pt !important;    /* Deine dezente Wunschgröße */
    font-weight: 400 !important;   /* Löscht das wuchtige Standard-Fett komplett */
    font-style: normal !important; 
}

/* Sicherheitsnetz für die Tabellenköpfe dieser spezifischen Komponente */
.com-content-category__articles table th a,
.com-content-category__articles table th.list-title a {
    font-size: 11pt !important;
    font-weight: 400 !important;
}

/* GLOBALE VARIABLEN-RETTUNG: Zwingt alle Links im System ins Logen-Rot */
:root {
    --cassiopeia-color-link: #860822 !important; 
    --link-color: #860822 !important;
    --bs-link-color: #860822 !important;
}


/* ====================================================================
   8. RÜCKBLENDE & BEITRAGSLISTE (GRAFIK-TYPO)
   ==================================================================== */
.com-content-category-blog__child .page-header i,
.com-content-category__child .page-header h3,
.category-list h1, .category-list h2, .category-list h3, .category-list h4,
.category-list table a, .category-list .list-title a,
.pagenav a, .item-page .pagenav a, .page-nav a, .pagination a {
    font-size: 1.1rem !important; line-height: 1.2 !important; font-weight: 500 !important; color: #860822 !important; text-decoration: underline !important; text-underline-offset: 3px !important;
}
.category-list table, .category-list td, .category-list .list-author, .category-list .list-hits, .category-list .list-date { color: #444444 !important; }
.category-list th, .category-list th a { color: #555555 !important; font-weight: 600 !important; font-size: 0.85rem !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-decoration: none !important; }
.category-list td { padding: 12px 10px !important; border-bottom: 1px solid rgba(134, 8, 34, 0.12) !important; }

/* Repariert das Hamburger-Icon in Cassiopeia */
.navbar-toggler-icon::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    content: "\f0c9" !important;
}

/* ====================================================================
   FINALE MOBIL-REPARATUR: LINIEN & ROTER MENÜ-HINTERGRUND (SICHER)
   ==================================================================== */

/* 1. F0C9-Text komplett blockieren */
.container-header .navbar-toggler,
.container-header .navbar-toggler *,
.container-header .navbar-toggler::before,
.container-header .navbar-toggler::after {
    content: "" !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    background-image: none !important;
}

/* 2. Hamburger-Button Box einstellen */
.container-header .navbar-toggler {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 44px !important;
    height: 36px !important;
}

/* 3. Die 3 weißen Linien MECHANISCH zeichnen */
.container-header .navbar-toggler-icon {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 22px !important;
    height: 2px !important;
    background-color: #ffffff !important; /* Mittlere Linie */
    background-image: none !important;
    font-size: 0 !important;
}

/* Obere und untere Linie hinzufügen */
.container-header .navbar-toggler-icon::before,
.container-header .navbar-toggler-icon::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    width: 22px !important;
    height: 2px !important;
    background-color: #ffffff !important;
}
.container-header .navbar-toggler-icon::before { top: -7px !important; }
.container-header .navbar-toggler-icon::after { top: 7px !important; }

/* ====================================================================
   4. ROTER HINTERGRUND FÜR DAS AUSGEKLAPPTE MOBIL-MENÜ
   ==================================================================== */
@media (max-width: 991px) {
    /* Erzwingt das weinrote Banner für den gesamten aufgeklappten Bereich */
    .container-header .navbar-collapse,
    .container-header .collapse,
    .container-header .collapsing {
        background-color: #860822 !important;
        width: 100% !important;
        padding: 10px 15px !important;
        margin-top: 5px !important;
        border-radius: 4px !important;
    }

    /* Ordnet die mobilen Menüpunkte sauber untereinander an */
    .container-header .mod-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .container-header .mod-menu > li {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .container-header .mod-menu a {
        display: block !important;
        padding: 10px 5px !important;
    }
}

/* Verhindert, dass der Template-Name "Cassiopeia" im mobilen Menü erscheint */
.container-header .navbar-brand,
.container-header .brand {
    display: none !important;
}


/* Verhindert, dass der Template-Name "Cassiopeia" im mobilen Menü erscheint */
.container-header .navbar-brand,
.container-header .brand {
    display: none !important;
}

/* ====================================================================
   RADIKALE MOBIL-PFEIL-REPARATUR: TEXT LINKS, BOX/PFEIL RECHTS
   ==================================================================== */
@media (max-width: 991px) {

    /* 1. Sorgt dafür, dass der Menüpunkt die volle Breite nutzt */
    .container-header .mod-menu > li.parent,
    .container-header .mod-menu li {
        position: relative !important;
        display: block !important;
        width: 100% !important;
    }

    /* 2. Text wird komplett nach links gedrückt und bekommt rechts Schutzabstand */
    .container-header .mod-menu > li.parent > a,
    .container-header .mod-menu > li.parent > span {
        display: block !important;
        text-align: left !important;
        padding-left: 10px !important;   /* Abstand zum linken Rand */
        padding-right: 60px !important;  /* Sicherheitsabstand zur rechten Box */
        width: auto !important;
    }

        /* 3. Das Kästchen unsichtbar machen (nur den Pfeil behalten) */
    .container-header .mod-menu .mm-toggler {
        position: absolute !important;
        right: 10px !important;          /* Festgewachsen am rechten Rand */
        top: 6px !important;             /* Mittig zum Text ausrichten */
        width: 34px !important;
        height: 34px !important;
        background-color: transparent !important; /* REPARATUR: Kein Hintergrund */
        border: none !important;                 /* REPARATUR: Kein Rahmen/Kästchen mehr! */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        left: auto !important;           
    }


    /* 4. Das Zeichen IM Kästchen leeren und einen echten weißen Pfeil zeichnen */
    .container-header .mod-menu .mm-toggler::before {
        display: none !important;
        content: "" !important;
    }
    
    .container-header .mod-menu .mm-toggler::after {
        content: "" !important;
        display: block !important;
        width: 0 !important;
        height: 0 !important;
        border-style: solid !important;
        border-width: 6px 5px 0 5px !important;
        border-color: #ffffff transparent transparent transparent !important; /* Weißer Pfeil nach unten */
    }

    /* 5. Dreht den Pfeil um, wenn das Untermenü geöffnet ist */
    .container-header .mod-menu li.mm-active .mm-toggler::after,
    .container-header .mod-menu li.parent[aria-expanded="true"] .mm-toggler::after {
        border-width: 0 5px 6px 5px !important;
        border-color: transparent transparent #ffffff transparent !important; /* Pfeil nach oben */
    }
}

/* Verzweifelter, aber sicherer Versuch: Echtes Text-Symbol für den Hamburger */
.container-header .navbar-toggler-icon {
    background-image: none !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    display: inline-block !important;
}
.container-header .navbar-toggler-icon::before {
    content: "☰" !important; /* Nutzt ein universelles Text-Symbol */
    font-family: sans-serif !important;
}

/* ====================================================================
   RADIKALKUBATUR: KOMPLETTE LINIENFREIHEIT FÜR TEXT & PFEILE
   ==================================================================== */

/* 1. JEDE Form von automatischer Linie, Schatten oder Deko im gesamten Navigations-Baum verbieten */
.container-header nav,
.container-header .navbar,
.container-header .mod-menu,
.container-header .mod-menu *,
.container-header .mod-menu *::before,
.container-header .mod-menu *::after,
.metismenu,
.metismenu *,
.dropdown-menu,
.dropdown-menu *,
.mm-collapse,
.mm-collapse * {
    text-decoration: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important; 
    transition: none !important; 
    animation: none !important;
}

/* 2. Den Pfeil-Button im Desktop radikal von allen Linien befreien */
@media (min-width: 992px) {
    .container-header .mod-menu .mm-toggler,
    .container-header .mod-menu .mm-toggler::before,
    .container-header .mod-menu .mm-toggler::after {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        /* Schaltet eventuelle versteckte SVG-Linien des Pfeils ab */
        content: none !important; 
    }
    
    /* Falls das MetisMenu ein alternatives Dreieck erzwingt, machen wir es hier sauber und linienfrei nach */
    .container-header .mod-menu .mm-toggler {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* 3. ELEGANT-MODERNER HOVER-EFFEKT: Das Feld färbt sich beim Drüberfahren edel ein */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
    transition: background-color 0.2s ease !important; 
    border-radius: 4px !important; 
}

/* Hauptmenüpunkte bekommen beim Hover einen sauberen, weinroten Hintergrund-Kasten */
.container-header .mod-menu > li:hover > a,
.container-header .mod-menu > li:hover > span {
    background-color: #a3112e !important; 
    color: #ffffff !important;
}

/* 4. Dropdown-Unterpunkte farblich sauber trennen beim Drüberfahren */
.container-header .mod-menu ul.mm-collapse li a:hover,
.container-header .mod-menu .dropdown-menu li a:hover {
    background-color: #a3112e !important; 
    color: #ffffff !important;
}


/* ====================================================================
   ZUSATZ: PERFEKTER PFEIL-HOVER-FIX (OHNE PHANTOMLINIEN)
   ==================================================================== */

/* 1. Schaltet die hellrote Vektor- und Grafiklinie beim Pfeil rigoros ab */
.container-header .mod-menu .mm-toggler,
.container-header .mod-menu .mm-toggler::after {
    border-bottom: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* 2. Der originale Pfeil bleibt geschützt und behält seine weiße Farbe */
.container-header .mod-menu .mm-toggler::after,
.container-header .mod-menu li:hover > .mm-toggler::after {
    color: #ffffff !important;
    border-top-color: #ffffff !important; /* Hält das Dreieck strahlend weiß */
}

/* 3. Alle heimlichen Grafik- und Animationslinien im Menü endgültig blockieren */
.container-header .mod-menu *::before,
.container-header .mod-menu *::after,
.mm-collapse * {
    background-image: none !important; 
    transition: none !important; 
    animation: none !important;
    border-bottom: none !important;
}

/* 4. Dropdown exakt unter die rote Menüleiste schieben */
@media (min-width: 992px) {
    .container-header .mod-menu ul.mm-collapse,
    .container-header .mod-menu .dropdown-menu { 
        top: 44px !important;           
        margin-top: 0 !important;       
    }
}

/* ====================================================================
   ALTERNATIVER PFEIL-FIX: RECHTS & ABSOLUT LINIENFREI
   ==================================================================== */
@media (min-width: 992px) {
    /* Das blockierte Nachher-Element bleibt weiterhin strikt deaktiviert */
    .container-header .mod-menu li.parent > a::after,
    .container-header .mod-menu li.parent > span::after {
        content: none !important;
        display: none !important;
        border: none !important;
    }

    /* Den Menü-Link in ein Flex-Layout verwandeln (Text links, Pfeil rechts) */
    .container-header .mod-menu li.parent > a,
    .container-header .mod-menu li.parent > span {
        display: inline-flex !important;
        align-items: center !important;
        flex-direction: row-reverse !important; 
    }

    
    /* DEIN WUNSCH: Die unterbrochene Unterstreichung bei den Dropdown-Hauptpunkten komplett abschalten */
    .container-header .mod-menu li.parent > a:hover,
    .container-header .mod-menu li.parent > span:hover,
    .container-header .mod-menu li.parent:hover > a {
        text-decoration: none !important;  /* Löscht die fehlerhafte, gestückelte Linie restlos */
        border-bottom: none !important;
    }
}

/* ====================================================================
   FINALE HARMONISIERUNG: HOVER-LINIEN BEI ALLEN MENÜPUNKTEN ABSCHALTEN
   ==================================================================== */

/* Löscht die Hover-Unterstreichung bei absolut JEDEM Hauptmenüpunkt (START, Kontakt etc.) */
.container-header .mod-menu a:hover,
.container-header .mod-menu span:hover,
.container-header .mod-menu button:hover,
.container-header .mod-menu li:hover > a,
.container-header .mod-menu li:hover > span {
    text-decoration: none !important; /* Entfernt den klassischen Unterstrich */
    border-bottom: none !important;    /* Entfernt eventuelle Rahmen-Unterstriche */
}

/* ====================================================================
   ZUSATZ: FEINTUNING FÜR DROPDOWN-UNTERPUNKTE (DESKTOP & MOBIL)
   ==================================================================== */

/* Abstand und Klickbereich der einzelnen Unterpunkte vergrößern */
.container-header .mod-menu ul.mm-collapse li a,
.container-header .mod-menu .dropdown-menu li a {
    padding: 10px 20px !important;       /* Mehr Platz oben/unten und links/rechts */
    font-size: 1rem !important;          /* Minimal kleiner als die Hauptpunkte (1.1rem) */
    font-weight: 400 !important;
    display: block !important;           /* Macht die gesamte Breite klickbar */
    color: #ffffff !important;           /* Textfarbe immer Reinweiß */
    text-decoration: none !important;    /* Garantiert linienfrei */
}

/* Trennlinie zwischen den Unterpunkten (optional, für saubere Struktur) */
.container-header .mod-menu ul.mm-collapse li:not(:last-child),
.container-header .mod-menu .dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Hauchzarte, weiße Trennlinie */
}


/* ====================================================================
   KORREKTUR TEIL 1C: GEÖFFNETE MENÜS REPARIEREN (BREITE DOCKUNG)
   ==================================================================== */

@media (min-width: 992px) {
    /* ====================================================================
       1. HIER STEUERST DU DIE BREITE DER BOX
       ==================================================================== */
    .container-header .mod-menu ul.mm-collapse,
    .container-header .mod-menu .dropdown-menu,
    .container-header .mod-menu li.parent ul {
        min-width: 200 !important;
        
        /* 'max-content' macht die Box exakt so breit wie das längste Wort. 
           Wenn du die Box künstlich breiter machen willst, kannst du hier 
           auch feste Werte wie 160px oder 180px eintragen. */
        width: max-content !important; 
    }

   /* ====================================================================
   RADIKALE HÖHEN-REDUZIERUNG FÜR DAS DROPDOWN (FLACHSTE STUFE)
   ==================================================================== */

@media (min-width: 992px) {
    /* 1. Die unsichtbaren Abstände der Listenelemente komplett löschen */
    .container-header .mod-menu ul.mm-collapse li,
    .container-header .mod-menu .dropdown-menu li {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.5 !important; /* Zwingt das Element auf die reine Schrifthöhe */
    }

    /* 2. Die Schrifthöhe im Link maximal komprimieren */
    .container-header .mod-menu ul.mm-collapse li a,
    .container-header .mod-menu .dropdown-menu li a {
        padding: 4px 2px !important;    /* 4px oben/unten gibt dem Text wieder minimal Luft zum Atmen */
        line-height: 1.5 !important;       /* Drückt den Textraum auf das absolute Minimum zusammen */
        font-size: 0.95rem !important;   /* Minimal kleiner (dezent), verringert ebenfalls die Gesamthöhe */
    }
}

/* ====================================================================
   KORREKTUR: ABSOLUTE SYMMETRIE FÜR DIE DROPDOWN-BOX (RANDPOLSTER LÖSCHEN)
   ==================================================================== */

@media (min-width: 992px) {
    /* Die Polsterung des gesamten dunkelroten Kastens oben und unten komplett nullen */
    .container-header .mod-menu ul.mm-collapse,
    .container-header .mod-menu .dropdown-menu,
    .container-header .mod-menu li.parent ul {
        padding-top: 0px !important;    /* Entfernt den künstlichen Abstand über dem 1. Eintrag */
        padding-bottom: 0px !important; /* Entfernt den künstlichen Abstand unter dem letzten Eintrag */
    }
}

/* ====================================================================
   ZUSATZ: AUTOMATISCHES AUFKLAPPEN DER DROPDOWNS BEIM MAUSOVER (HOVER)
   ==================================================================== */

@media (min-width: 992px) {
    /* Sobald die Maus über dem Listenpunkt (li) schwebt,
       wird das darin liegende Untermenü sofort sichtbar geschaltet */
    .container-header .mod-menu li.parent:hover > ul.mm-collapse,
    .container-header .mod-menu li.parent:hover > .dropdown-menu,
    .container-header .mod-menu li.parent:hover > ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
}

/* ====================================================================
   DYNAMISCHE PFEIL-DREHUNG BEIM MOUSEOVER (HOVER)
   ==================================================================== */
@media (min-width: 992px) {
    /* 1. Der Pfeil im Normalzustand: Zeigt nach RECHTS und bereitet die Drehung vor */
    .container-header .mod-menu li.parent > a::before,
    .container-header .mod-menu li.parent > span::before {
        content: "▶" !important;          /* Startet als Pfeil nach rechts */
        display: inline-block !important;
        font-size: 1rem !important;        
        padding-left: 8px !important;      
        color: #ffffff !important;         
        border: none !important;           
        
        /* Das ist der Zauber für die fließende Drehung */
        transition: transform 0.25s ease !important; 
        transform: rotate(0deg) !important; /* Startposition */
    }

    /* 2. Der Pfeil beim HOVER: Dreht sich um 90 Grad nach unten */
    .container-header .mod-menu li.parent:hover > a::before,
    .container-header .mod-menu li.parent:hover > span::before {
        transform: rotate(90deg) !important; /* Dreht das "►" exakt zu einem "▼" nach unten! */
        color: #ffffff !important;
    }
}

/* ====================================================================
   FRONTEND-LOGIN: FONT AWESOME ICONS FÜR BEARBEITEN-MODUS RETTEN
   ==================================================================== */

/* Zwingt alle Icons im System, ihre echte Symbol-Schriftart zu behalten */
[class^="icon-"]::before, 
[class*=" icon-"]::before,
[class^="fa-"]::before,
[class*=" fa-"]::before,
.icon-edit,
.edit-icon,
.btn-group.edit * {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Fontawesome", "Joomla Icons" !important;
    font-weight: 900 !important; /* Wichtig, damit die Icons ausgefüllt und sichtbar sind */
    display: inline-block !important;
    text-decoration: none !important;
}
/* ====================================================================
   FRONTEND-LOGIN: FOOTER-TEXT & ICON MINIMALISTISCH BÄNDIGEN
   ==================================================================== */

/* Zwingt den gesamten Admin-Block im Footer in ein dezentes Gewand */
.footer a[href*="task=module.edit"],
footer a[href*="task=module.edit"],
.footer .btn-group.edit,
footer .btn-group.edit,
.footer .btn-group.edit * {
    font-size: 10pt !important;      /* Schön klein und unaufdringlich */
    color: #a0a0a0 !important;          /* Ein neutrales, feines Grau statt Knallgrün */
    background: transparent !important; /* Entfernt eventuelle grüne Hintergründe */
    border: none !important;            
    box-shadow: none !important;
    text-align: center !important;
    
    /* Hebt alle experimentellen Spiegelungen auf, damit das Icon wieder links/mittig sitzt */
    flex-direction: row !important; 
}

/* Gibt dem kleinen Bleistift-Symbol selbst die dezente graue Farbe */
.footer a[href*="task=module.edit"]::before,
footer a[href*="task=module.edit"]::before,
.footer .icon-edit::before,
footer .icon-edit::before {
    color: #a0a0a0 !important;
    margin-right: 6px !important;       /* Feiner Abstand zum Text */
}