/*
 * Cassiopeia-Anpassung nach dem bereitgestellten Schema
 * Joomla 6.1.3
 *
 * Breitenprinzip:
 * - farbige/weiße Balken: 100 % Browserbreite
 * - Inhalte in diesen Balken: zentrierter Innenbereich
 * - Hauptcontent: derselbe zentrierte Innenbereich
 */

:root {
    /* Im Schema ist die mittlere Spalte ungefähr 50 % der Bildschirmbreite. */
    --layout-inner-width: 50%;

    /* Farben aus der schematischen Darstellung */
    --layout-topinfo-bg: #0b4b80;
    --layout-menu-bg: #ffffff;
    --layout-breadcrumb-bg: #57a9dc;
    --layout-bottominfo-bg: #0b4b80;
    --layout-footer-bg: #86c900;

    --layout-light-text: #ffffff;
    --layout-dark-text: #111111;
}

/* Cassiopeia-Raster für dieses Layout bewusst neutralisieren */
body.site {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/*
 * Der entscheidende Baustein:
 * Die äußeren .layout-strip-Elemente sind immer 100 % breit,
 * .layout-inner hält ihren Inhalt mittig.
 */
.layout-strip {
    width: 100%;
    max-width: none;
    margin: 0;
}

.layout-inner {
    width: var(--layout-inner-width);
    margin-inline: auto;
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   Obere Infoleiste
   Modulposition: topbar
   --------------------------------------------------------- */
.layout-strip-topinfo {
    background: var(--layout-topinfo-bg);
    color: var(--layout-light-text);
}

.layout-strip-topinfo .layout-inner {
    min-height: 36px;
    display: flex;
    align-items: center;
}

.layout-strip-topinfo .moduletable,
.layout-strip-topinfo .mod-custom,
.layout-strip-topinfo p {
    margin: 0;
    width: 100%;
}

/* ---------------------------------------------------------
   Mega-Menü
   Modulposition: menu
   --------------------------------------------------------- */
.layout-strip-menu {
    background: var(--layout-menu-bg);
    color: var(--layout-dark-text);
    z-index: 1000;
}

.layout-menu-inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.layout-megamenu {
    flex: 1 1 auto;
    min-width: 0;
}

.layout-search {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Entfernt typische Cassiopeia-Header-Hintergründe/-Schatten */
.container-header,
.header {
    background: none;
    box-shadow: none;
}

/* ---------------------------------------------------------
   Breadcrumb
   Modulposition: breadcrumbs
   --------------------------------------------------------- */
.layout-strip-breadcrumb {
    background: var(--layout-breadcrumb-bg);
    color: var(--layout-dark-text);
}

.layout-strip-breadcrumb .layout-inner {
    min-height: 36px;
    display: flex;
    align-items: center;
}

.layout-strip-breadcrumb .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
}


/* ---------------------------------------------------------
   Banner / Slideshow
   Modulposition: banner
   --------------------------------------------------------- */
.container-banner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.container-banner .moduletable,
.container-banner .mod-custom {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.container-banner img,
.container-banner picture,
.container-banner video {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

.container-banner > div {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* ---------------------------------------------------------
   Content
   --------------------------------------------------------- */
.layout-main {
    width: 100%;
    flex: 1 0 auto;
    background: #ffffff;
}

.layout-main > .layout-inner {
    min-height: 560px;
    padding-block: 2rem;
}

.layout-main .container-component {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------
   Untere Infoleiste 1
   Modulposition: bottom-a
   --------------------------------------------------------- */
.layout-strip-bottominfo {
    background: var(--layout-bottominfo-bg);
    color: var(--layout-light-text);
}

.layout-strip-bottominfo .layout-inner {
    min-height: 160px;
    display: flex;
    align-items: center;
}

.layout-strip-bottominfo .moduletable,
.layout-strip-bottominfo .mod-custom {
    width: 100%;
}

/* ---------------------------------------------------------
   Untere Infoleiste 2
   Modulposition: footer
   --------------------------------------------------------- */
.layout-strip-footer {
    background: var(--layout-footer-bg);
    color: var(--layout-light-text);
    margin-top: 0;
}

.layout-strip-footer .layout-inner {
    min-height: 66px;
    display: flex;
    align-items: center;
	font-size:30px;
}

.layout-strip-footer .moduletable,
.layout-strip-footer .mod-custom {
    width: 100%;
}

/* Keine von Cassiopeia erzwungene Footer-Farbe/-Abstände */
.container-footer,
.footer {
    background: none;
    margin-top: 0;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 1100px) {
    .layout-inner {
        width: calc(100% - 2rem);
    }
}

@media (max-width: 767.98px) {
    .layout-inner {
        width: calc(100% - 1.5rem);
    }

    .layout-menu-inner {
        min-height: auto;
        padding-block: .75rem;
        flex-wrap: wrap;
    }

    .layout-megamenu,
    .layout-search {
        width: 100%;
    }

    .layout-search {
        margin-left: 0;
    }

    .layout-main > .layout-inner {
        min-height: 0;
        padding-block: 1.5rem;
    }

    .layout-strip-bottominfo .layout-inner {
        min-height: 120px;
		font-size: 30px;
    }
}