/* ==========================================================================
   1. SEITENHINTERGRUND & CONTAINER (HELLGRAU / WEISS)
   ========================================================================== */
body {
    margin: 0 auto;
    padding: 0;
    background-color: #F9F9F9 !important;
    background-image: url('../images/Page-BgTexture.jpg') !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: top center !important;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif !important;
}

.site-grid {
    max-width: 960px !important;
    margin: 0 auto !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    padding: 0 !important;
}

/* ==========================================================================
   NEU: DAS DESIGN-SYSTEM VON CASSIOPEIA AUF ROT UMSTELLEN
   ========================================================================== */
:root {
    /* Überschreibt Cassiopeias lila Standard-Farbwerte systemweit mit Ihrem Rot */
    --cassiopeia-color-primary: #96080F !important;
    --cassiopeia-color-hover: #C70A14 !important;
    --cassiopeia-color-link: #4F4F4F !important;
}

/* ==========================================================================
   2. TEXTFARBEN, LINKS & ÜBERSCHRIFTEN (ENDGÜLTIGER FIX FÜR DAS BLAU)
   ========================================================================== */
.com-content-article, main article, .site-container {
    color: #474747 !important;
    font-size: 12px !important;
}

/* Formatierung aller Standard-Textlinks im Inhalt */
main article a, .com-content-article a {
    text-decoration: underline !important;
    color: #4F4F4F !important;
}
main article a:hover {
    color: #96080F !important; /* Wird rot beim Drüberfahren */
}

/* Zwingt ALLE Überschriften-Klassen von Cassiopeia auf das Altdesign-Rot */
h1, h2, h3, h4, h5, h6,
.page-title, .page-header h1, .page-header h2,
main h1, main h2, main h3,
article h1, article h2, article h3 {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif !important;
    text-shadow: none !important;
}

/* Ebene 1: Hauptüberschriften & Beitrags-Titel (Großes Dunkelrot) */
h1, .page-title, main h1, .page-header h1, article h1,
h1 a, .page-title a, main h1 a, article h1 a {
    color: #96080F !important;
    font-size: 28px !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

/* Ebene 2: Unterüberschriften & Blog-Titel (Mittelrot) */
h2, main h2, .page-header h2, article h2,
h2 a, main h2 a, .page-header h2 a, article h2 a,
h2 a:link, h2 a:visited {
    color: #C70A14 !important;
    font-size: 22px !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

/* Hover-Effekt für klickbare Überschriften (z.B. im Blog-Layout) */
h1 a:hover, h2 a:hover, .page-title a:hover {
    color: #96080F !important;
    text-decoration: underline !important;
}

/* Ebene 3: Kleinere Überschriften (Dunkelgrau) */
h3, main h3, article h3,
h3 a, main h3 a, article h3 a {
    color: #4F4F4F !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-decoration: none !important;
}


/* ==========================================================================
   3. KOPFZEILEN DER MODULE (RECHTS/LINKS IN DUNKELROT)
   ========================================================================== */
.card-header, .module-title, div[class*="sidebar-"] h3 {
    background-color: #96080F !important;
    color: #FBBBBE !important;
    padding: 6px 12px !important;
    margin: 0 0 10px 0 !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* ==========================================================================
   4. HEADER, LOGO & MENÜ
   ========================================================================== */
header.header {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 920px !important;
    height: 168px !important;
    position: relative;
    background-image: url('../images/Header.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    background-size: cover !important;
    display: block !important;
}

header.header .navbar-brand, header.header .container-nav {
    background: none !important;
}

.navbar-brand a, .site-title {
    color: #FBBBBE !important;
    font-size: 18px !important;
}

.container-nav {
    max-width: 920px !important;
    margin: 0 auto !important;
    height: 30px !important;
    background-image: url('../images/nav.png') !important;
    background-repeat: repeat-x !important;
}

/* ==========================================================================
   4. HORIZONTALES HAUPTMENÜ & KLICK-VERHALTEN (BEREINIGT)
   ========================================================================== */
.container-nav {
    max-width: 920px !important;
    margin: 0 auto !important;
    height: 30px !important;
    background-image: url('../images/nav.png') !important;
    background-repeat: repeat-x !important;
}

/* Das Hauptmenü-Modul */
.metismenu.mod-menu {
    display: flex !important;
    padding: 3px !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Die Hauptmenü-Links */
.metismenu.mod-menu > li > a {
    display: block !important;
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 22px !important;
    color: #FBB6BA !important;
    font-size: 12px !important;
    background-image: url('../images/MenuItem.png') !important;
    text-decoration: none !important;
}

.metismenu.mod-menu > li > a:hover {
    color: #F2F2F2 !important;
    background-position: 0 -24px !important;
}

/* ==========================================================================
   5. DROPDOWN-UNTERMENÜS (NUR SICHTBAR WENN AKTIV GEKLICKT)
   ========================================================================== */
/* Versteckt Untermenüs standardmäßig im modernen Joomla-System */
.metismenu.mod-menu ul {
    display: none !important; /* Verhindert das Aufklappen per Maus-Hover */
    list-style: none !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    position: absolute;
    min-width: 180px !important;
    border: 1px solid #919191 !important;
    background-color: #FFFFFF !important;
    z-index: 999;
}

/* ZEIGT das Untermenü NUR an, wenn der Hauptpunkt angeklickt/aktiv ist */
.metismenu.mod-menu li.active ul,
.metismenu.mod-menu li.current ul {
    display: block !important; /* Wird erst aktiv, wenn man sich auf der Seite befindet */
}

/* Links im Untermenü */
.metismenu.mod-menu ul a {
    display: block !important;
    color: #4E0408 !important;
    font-size: 12px !important;
    height: 20px !important;
    line-height: 20px !important;
    padding-left: 12px !important;
    background-image: url('../images/subitem-bg.png') !important;
    background-repeat: repeat-x !important;
    text-decoration: none !important;
}

.metismenu.mod-menu ul a:hover {
    color: #000000 !important;
    border-color: #787878 !important;
    background-position: 0 -20px !important;
}

}

/* ==========================================================================
   5. INHALTSBEREICH ABSTÄNDE
   ========================================================================== */
.site-grid > main, .site-grid > .sidebar-left, .site-grid > .sidebar-right {
    padding: 20px !important;
}

/* ==========================================================================
   6. FUSSZEILE (DUNKELROT, SUPER-SCHMAL & OHNE LILA-OVERLAY)
   ========================================================================== */
footer.footer, 
.footer,
header.header + .footer {
    background-color: #96080F !important; /* Ihr Altdesign-Dunkelrot */
    background-image: none !important; /* Vernichtet Cassiopeias lila-blauen Standard-Verlauf */
    padding: 8px 0 !important; /* Noch schmaler (von 10px auf 8px herabgesetzt) */
    min-height: auto !important;
    height: auto !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Container-Fix im Footer (Cassiopeias innere Boxen bändigen) */
footer.footer .container,
footer.footer div {
    padding: 0 !important;
    margin: 0 auto !important;
    background: transparent !important;
}

/* Text und Links in der schmalen roten Fußzeile */
footer.footer, footer.footer a, footer.footer p, footer.footer span, footer.footer small {
    color: #FBB6BA !important; /* Helles Rosa */
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* Ihre kleinen Logos in der mini Fußzeile */
footer.footer img {
    max-height: 50px !important; /* Minimal kleiner, damit der Footer flach bleibt */
    width: auto !important;
    margin: 0 10px !important;
    vertical-align: middle !important;
    background: transparent !important;
}