/* area header */
header { padding: 3vh 0; }
header.scrolled { opacity: 0.9; }
header.scrolled:hover { opacity: 0.9; }
header .Logo img { height: 43px ; }
header div.addons { display: none; }
.LayoutTop { padding: 0; }

footer .footnavi , footer { 
	background-color: var(--logo-color-1-dark); 
	padding-top: 30px;

}

#bottom .LayoutBottom.footcontent > div .Body {
    width: 100%; 
}

#bottom .LayoutBottom.footcontent > div:last-child { flex-basis: 66%; }
.LayoutBottom .ContentText:first-of-type p:not(:first-of-type) { text-align: left; padding-left: 125px; }

@media all and (min-width: 1200px) { header .navBlockdrop { display: none; } }
#top  { align-items: flex-end; flex-wrap: nowrap; column-gap: 30px; }
@media (max-width: 600px) {#top { flex-wrap:  wrap; } .socialNetworx { gap: 5px; } }
header div.addons { margin-right: 0px; justify-content: flex-end; }
@media all and (max-width: 1199px) { header div.addons { margin-right: 60px; } }


/* ====== Responsive Layout für kleine Screens ====== */
#bottom .LayoutBottom.footcontent { display: flex; flex-wrap: nowrap; justify-content: space-between; padding: 0; }
#bottom .LayoutBottom.footcontent .Body p {
    width: 300px;
}

.ContentText .Body h2{
    color: var(--logo-color-1-light) ;
}

/* ====== Basis-Styles für kleine Screens (bis 1100px) ====== */
@media (max-width: 1100px) {
    #bottom .LayoutBottom.footcontent {
        flex-wrap: wrap;
        justify-content: center;
    }

    #bottom .LayoutBottom.footcontent > .ContentText {
        flex: 1 1 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
    }

    #bottom .LayoutBottom.footcontent > .ContentText .Body {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        text-align: center;
    }

    #bottom .LayoutBottom.footcontent .Body img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    #bottom .LayoutBottom.footcontent .Body p {
        width: 100%;
        /* max-width: 600px; */
        flex-basis: 100%;
        text-align: center;
        font-size: clamp(1rem, 1.5vw + 1rem, 1.5rem);
        line-height: 1.5;
    }

    #bottom .LayoutBottom.footcontent .Body div {
        width: 100%;
        max-width: 100%;
    }

    #bottom .LayoutBottom.footcontent .Body p:nth-of-type(2) {
        padding-left: unset;
        text-align: left;
        flex-basis: 50%;
    }
    #bottom .LayoutBottom.footcontent .Body p:nth-of-type(3) {
        padding-left: unset;
        text-align: right;
        flex-basis: 50%;
    }

}

@media (max-width: 700px) {

    /* ✅ Explizit die Sonderfälle überschreiben */
    #bottom .LayoutBottom.footcontent .Body p:nth-of-type(2),
    #bottom .LayoutBottom.footcontent .Body p:nth-of-type(3) {
        flex-basis: 100% ;
        text-align: center ;
    }

}

/* Mobil-Ansicht */
@media screen and (max-width: 500px) {
    header .LayoutTop {
        flex-direction: column;
        align-items: center;
        position: relative;
        padding-bottom: 60px; /* Platz für Navi und Language unten */
    }

    header .Logo {
        order: 1;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }

    header .Logo img {
        max-width: 100%;
        height: 100%  ;
    }

    header nav.navi {
        position: absolute;
        bottom: 10px;
        left: 10px;
        order: 2;
    }

    header .LanguageSelect {
        position: absolute;
        bottom: 10px;
        right: 10px;
        order: 3;
    }


}

@media (max-width: 1300px) {
    header .navidrop, header .navMega {
        display: none;
    }
    header .navi, header .navResponsive {
        display: block
}
}