/* =========================================
   CHILD-TEMPLATE: Gommern Startseite
   ========================================= */

/* 1. Globale Variablen (Farben & Schriften) definieren */
:root {
    --cassiopeia-color-01: #0081c6; /* Blau */
    --cassiopeia-color-02: #f7d500; /* Gelb */
    --cassiopeia-color-03: #e3000f; /* Rot */
    --cassiopeia-color-04: #70aa01; /* Grün */
    --cassiopeia-color-hover: #005f94;
    --cassiopeia-color-link: #0081c6;
    --cassiopeia-font-family-body: "Open Sans", Helvetica, Arial, sans-serif;
    --cassiopeia-font-family-headings: "Open Sans", Helvetica, Arial, sans-serif;
}

/* 2. Das Hintergrundbild für die gesamte Website */
body.site {
    background: #ECF3FB url('/images/design/bg-html-00.jpg') center top no-repeat;
    color: #444;
    font-family: var(--cassiopeia-font-family-body);
}

/* =========================================
   DER HEADER (Proportional & VOLLFLÄCHIG KLICKBAR!)
   ========================================= */
header.container-header {
    width: 100% !important;
    max-width: 1320px !important;
    margin: 0px auto !important;
    margin-top: 0px !important;
    background-image: url('/images/headers/header-01.jpg') !important;
    background-repeat: no-repeat !important;
    background-size: 100% auto !important;

    aspect-ratio: 1320 / 300;
    height: auto !important;
    min-height: unset !important;

    border-radius: 0px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);

    position: relative !important;
    overflow: hidden;
    z-index: 10;
}

/* 1. Zwingt Container im Header auf Durchzug */
header.container-header > div,
header.container-header .navbar-brand {
    position: static !important;
}

/* 2. Spannt den ECHTEN Startseiten-Link vollflächig über den Header! */
header.container-header .brand-logo {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 20;
    display: block;
    width: 100%;
    height: 100%;
}

/* 3. Versteckt den hässlichen "CASSIOPEIA" Text, behält aber den Link aktiv */
header.container-header .navbar-brand {
    color: transparent !important;
    font-size: 0px !important;
}

/* 4. Hält das Menü klickbar, indem es ÜBER dem vollflächigen Logo-Link liegt */
.container-nav {
    margin-right: 20px;
    position: relative;
    z-index: 100;
}


/* =========================================
   Überschriften und Trennlinien im Gommern-Look
   ========================================= */
h1, h2, h3, h4, h5, h6 {
    color: var(--cassiopeia-color-01);
    text-shadow: 0px 0px 2px #c8e8f9;
    font-family: var(--cassiopeia-font-family-headings);
}

h1 { font-size: 2rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 1rem; }
h2 { font-size: 1.75rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.8rem; }
h3 { font-size: 1.5rem; font-weight: 600; margin-top: 1.2rem; margin-bottom: 0.5rem; }
h4 { font-size: 1.25rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; }
h5 { font-size: 1.0rem; font-weight: 400; margin-top: 1rem; margin-bottom: 0.5rem; }

hr { border-bottom: 1px var(--cassiopeia-color-01) dotted; }

/* =========================================
   NAHTLOSES RASTER (Jeden Spalt killen)
   ========================================= */
.site-grid {
    gap: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0px!important;
}

/* =========================================
   DIE 4-TEILIGE NAVIGATION (Zentriert & Vollflächige Schraffur)
   ========================================= */
.container-top-a .navbar,
.container-top-a .navbar > .container,
.container-top-a .navbar > .container-fluid {
    padding: 0 !important;
    margin: 0 !important;
}

.container-top-a .moduletable,
.container-top-a .card, .container-top-a .card-body {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.container-top-a {
    grid-column: main-start / main-end !important;
    padding: 0 !important;
    margin: 0 !important;
}

.container-top-a ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.container-top-a ul > li {
    flex: 1 1 25% !important;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 6px);
    border-right: 1px solid rgba(255,255,255,0.2);
}

.container-top-a ul > li:last-child {
    border-right: none;
}

.container-top-a ul > li > a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    width: 100% !important;
    padding: 15px 10px;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: none;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Hier wurden die Hex-Codes durch deine Variablen ersetzt */
.container-top-a ul > li:nth-child(1) { background-color: var(--cassiopeia-color-01); }
.container-top-a ul > li:nth-child(2) { background-color: var(--cassiopeia-color-02); }
.container-top-a ul > li:nth-child(3) { background-color: var(--cassiopeia-color-03); }
.container-top-a ul > li:nth-child(4) { background-color: var(--cassiopeia-color-04); }

.container-top-a ul > li:hover { filter: brightness(0.85); cursor: pointer; }

/* =========================================
   Inhaltsbereiche & Spalten (Eckig, nahtlos verschmolzen)
   ========================================= */
.container-component {
    background-color: #ffffff !important;
    padding: 25px !important;
    margin-top: 0 !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}

.container-sidebar-left,
.container-sidebar-right {
    background-color: #ffffff !important;
    padding: 20px !important;
    margin-top: 0 !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}

.container-sidebar-left .card,
.container-sidebar-right .card {
    background-color: transparent;
    box-shadow: none;
    border: none;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.container-bottom-a {
    grid-column: main-start / main-end !important;
    padding: 0 !important;
    margin: 0 !important;
}
.container-bottom-a .mod-custom, .container-bottom-a p{
    padding: 0 !important;
    margin: 0 !important;
}

.container-bottom-a .moduletable,
.container-bottom-a .card, .container-bottom-a .card-body {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* =========================================
   LINKE SIDEBAR NAVIGATION (Ebenen / Hierarchie)
   ========================================= */

/* WICHTIG: Macht alle Zeilen relativ, damit das Plus/Minus rechts außen verankert werden kann */
.container-sidebar-left ul.mod-menu li {
    position: relative !important;
}

/* -----------------------------------------
   DER PERFEKTE FIX FÜR DAS PLUS/MINUS
   ----------------------------------------- */

/* 1. Basis-Reset für ALLE Joomla-Button-Kästen im Menü */
.container-sidebar-left ul.mod-menu button.mm-toggler {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 2. Wenn der Button nur der Pfeil neben einem echten Link ist: Absolut nach rechts setzen */
.container-sidebar-left ul.mod-menu button.mm-toggler-link {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 40px !important; /* Feste Breite für die Klickfläche */
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

/* 3. Das echte PLUS-Zeichen generieren (für Link-Buttons UND Nolink-Buttons) */
.container-sidebar-left ul.mod-menu .mm-toggler::after {
    content: "+" !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 22px !important;
    font-weight: bold !important;
    border: none !important;
    background: none !important;

    color: var(--cassiopeia-color-01) !important;

    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* Blockiert die Standard-Dropdown-Drehung von Joomla */
    transition: none !important;

    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

/* 4. Wenn das Menü aufgeklappt ist, wird aus dem Plus ein MINUS */
.container-sidebar-left ul.mod-menu .mm-toggler[aria-expanded="true"]::after {
    content: "−" !important; /* FEHLER BEHOBEN: Hier fehlte das Minuszeichen! */
    transform: translateY(-50%) !important;
}

/* 5. Farbe des Plus/Minus passend zum Untermenü (Dunkelgrau auf hellen Ebenen) */
.container-sidebar-left ul.mod-menu > li > ul .mm-toggler::after {
    color: #333333 !important;
}

/* 6. Eventuelle Text-Pfeile vom Metismenu zur Sicherheit verstecken */
.container-sidebar-left ul.mod-menu .has-arrow::after {
    display: none !important;
}

/* -----------------------------------------
   Basis-Reset für das Sidebar-Menü
   ----------------------------------------- */
.container-sidebar-left ul.mod-menu,
.container-sidebar-left ul.mod-menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent;
}

/* -----------------------------------------
   EBENE 1 (Hauptpunkte in der Sidebar)
   ----------------------------------------- */
.container-sidebar-left ul.mod-menu > li {
    border-bottom: 1px dotted var(--cassiopeia-color-01);
    padding: 0px 0px !important;
}

.container-sidebar-left button, .container-sidebar-left a {
    font-size: 0.9em !important;
    color: var(--cassiopeia-color-01) !important;
}

.container-sidebar-left ul.mod-menu > li > a,
.container-sidebar-left ul.mod-menu > li > span,
.container-sidebar-left ul.mod-menu > li > button.mm-toggler-nolink {
    display: block;
    width: 100%;
    padding: 8px 40px 4px 0px; /* Rechts 40px Platz für das Pluszeichen lassen! */
    background-color: transparent!important;
    font-weight: bold;
    text-align: left;
    color: inherit;
    border-bottom: 0px dotted var(--cassiopeia-color-01);
}

/* -----------------------------------------
   EBENE 2 (Erste Unterebene)
   ----------------------------------------- */
.container-sidebar-left ul.mod-menu > li > ul > li {
    padding: 0 !important;
    margin: 0 !important;
}

.container-sidebar-left ul.mod-menu > li > ul{
    width:100% !important;
}

.container-sidebar-left ul.mod-menu > li > ul > li > a,
.container-sidebar-left ul.mod-menu > li > ul > li > span,
.container-sidebar-left ul.mod-menu > li > ul > li > button.mm-toggler-nolink {
    display: block;
    width: 100% !important;
    padding: 5px 40px 0px 5px; /* 30px eingerückt, 40px Platz rechts */
    background-color: #fff !important;
    color: var(--cassiopeia-color-02);
    font-weight: normal;
    text-align: left;
    border-bottom: 0px dotted var(--cassiopeia-color-01) !important;
}

/* -----------------------------------------
   EBENE 3 (Zweite Unterebene)
   ----------------------------------------- */

.container-sidebar-left ul.mod-menu > li > ul > li > ul{
    background-color: #fff !important;
}

.container-sidebar-left ul.mod-menu > li > ul > li > ul > li > a,
.container-sidebar-left ul.mod-menu > li > ul > li > ul > li > span,
.container-sidebar-left ul.mod-menu > li > ul > li > ul > li > button.mm-toggler-nolink {
    display: block;
    width: 100%;
    padding: 3px 40px 3px 0px; /* 45px eingerückt */
    background-color: transparent !important;
    color: var(--cassiopeia-color-01);
    font-size: 0.95em;
    border-bottom: 1px dotted var(--cassiopeia-color-01);
    text-align: left;
}

/* -----------------------------------------
   EBENE 4 (Dritte Unterebene)
   ----------------------------------------- */
.container-sidebar-left ul.mod-menu > li > ul > li > ul > li > ul > li > a,
.container-sidebar-left ul.mod-menu > li > ul > li > ul > li > ul > li > span,
.container-sidebar-left ul.mod-menu > li > ul > li > ul > li > ul > li > button.mm-toggler-nolink {
    display: block;
    width: 100%;
    padding: 6px 40px 6px 60px; /* 60px eingerückt */
    background-color: #f00 !important;
    color: #555555 !important;
    font-size: 0.9em;
    border-bottom: 1px dotted var(--cassiopeia-color-01);
    text-align: left;
}

/* -----------------------------------------
   Hover-Effekt für alle Ebenen
   ----------------------------------------- */
.container-sidebar-left ul.mod-menu a:hover {
    filter: brightness(0.85);
    text-decoration: none;
}

/* =========================================
   DER FOOTER (In Gommern-Blau & Zentriert)
   ========================================= */
.footer {
    margin-top: 0px !important;
    background: none !important;
    background-color: var(--cassiopeia-color-01) !important;
    color: #ffffff !important;
    text-align: center !important;
}

/* Hält auch die Links im Footer weiß */
.footer a {
    color: #ffffff !important;
}

/* NEU: Zwingt alle Flexbox- und Grid-Elemente im Footer rigoros in die Mitte */
.footer .container,
.footer .container-fluid,
.footer .grid-child,
.footer .mod-custom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Sichert ab, dass auch Absätze und reine Texteinheiten innerhalb des Moduls zentriert sind */
.footer p,
.footer span,
.footer div {
    text-align: center !important;
    justify-content: center !important;
}

/* =========================================
   Allgemeine Inhalts-Klassen
   ========================================= */
.img-100Prozent { width: 100% !important; }
.img-left { float: left; margin: 0px 15px 10px 0px; padding: 2px; border: 2px solid var(--cassiopeia-color-01); box-shadow: 0px 0px 3px #c8e8f9; }
.img-right { float: right; margin: 0px 0px 10px 15px; padding: 2px; border: 2px solid var(--cassiopeia-color-01); box-shadow: 0px 0px 3px #c8e8f9; }

/* =========================================
   MOBILE VERSION (Handy & Tablet)
   ========================================= */
@media (max-width: 991px) {
    /* 1. Top-Navigation Stapeln */
    .container-top-a ul { flex-direction: column !important; }
    .container-top-a ul > li { flex: 1 1 100% !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.2); }

    /* 2. Top-Navigation: Hamburger verstecken & Menü zeigen */
    .container-top-a .navbar-toggler { display: none !important; }
    .container-top-a .collapse:not(.show),
    .container-top-a .navbar-collapse { display: block !important; visibility: visible !important; height: auto !important; }

    /* 3. NEU: Untermenü (Seitenleiste): Hamburger-Button komplett ausblenden */
    .container-sidebar-left .navbar-toggler,
    .container-sidebar-right .navbar-toggler {
        display: none !important;
    }

    /* 4. NEU: Untermenü (Seitenleiste): Das automatische Einklappen blockieren und Navigation dauerhaft zeigen */
    .container-sidebar-left .collapse:not(.show),
    .container-sidebar-right .collapse:not(.show),
    .container-sidebar-left .navbar-collapse,
    .container-sidebar-right .navbar-collapse {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
    }

    /* 5. NEU: Sorgt dafür, dass die Links untereinander schön getrennt sind */
    .container-sidebar-left ul.mod-menu > li,
    .container-sidebar-right ul.mod-menu > li {
        border-bottom: 1px solid #eee;
    }
}

/* =========================================
   CSS Accordion / Tabs (Grün & Rot)
   ========================================= */
.tabs { border-radius: 0px; color: white; overflow: hidden; box-shadow: 0 0px 3px -2px rgba(0, 0, 0, 0.5); }
.tab { width: 100%; overflow: hidden; }
.tab-label { display: flex; justify-content: space-between; padding: 1em; background: var(--cassiopeia-color-04); font-weight: bold; cursor: pointer; border-bottom: 1px solid #fff; }
.tab-label:hover { background: var(--cassiopeia-color-04); }
.tab-label::after { content: "❯"; width: 1em; height: 1em; color: white; text-align: center; transition: all 0.35s; }
.tab-content { max-height: 0; padding: 0 1em; color: var(--cassiopeia-color-04); background: #DDFBA4; transition: all 0.35s; }
.tab-close { display: flex; justify-content: flex-end; padding: 1em; font-size: 0.75em; background: var(--cassiopeia-color-04); cursor: pointer; }
.tab-close:hover { background: var(--cassiopeia-color-04); }
.tabs input { position: absolute; opacity: 0; z-index: -1; }
.tabs input:checked + .tab-label { background: var(--cassiopeia-color-04); }
.tabs input:checked + .tab-label::after { transform: rotate(90deg); }
.tabs input:checked ~ .tab-content { max-height: 130vh; padding: 1em; }
.tabs .chck2 .tab-label { background: #EB1B33 !important; }
.tabs .chck2 .tab-content, .tabs .chck2 .tab-content a { color: #EB1B33; background: #F6B8C0; }

/* =========================================
   RSMEDIA
   ========================================= */

ul.rsmg-content-gallery li div.rsmg-content-item-container {
    background: none repeat scroll 0 0 white;
    border: 2px solid var(--cassiopeia-color-01) !important;
    box-shadow: 0px 0px 3px var(--cassiopeia-color-01) !important;
}