/* **********************************************
 *          CONTAINS THE COMPLETE FOOTER        *
 * ******************************************** */

/* 
  * RESETS
  */

.footer-nav {
    margin: unset;
    list-style: none;

    /* NEW STYLINGS */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    padding: 1rem 0;
}

@media screen and (min-width: 1200px) {
    .footer-nav {
        /* Zentriert wie unter 1200px - vorher stand die Meta-Zeile hier allein
           linksbündig, der Kunde möchte sie mittig. */
        justify-content: center;
        padding: 1rem 15px;
    }
}

.footer-nav a {
    color: #FFFFFF;
}

/* Der "Nach oben"-Block darüber endet in Firefox 1px tiefer als in Chromium und lässt
   seinen Float damit offen. .footer-bg-top bildet mit display: flex einen eigenen
   Formatting-Context, weicht dem Float aus und schrumpft auf 135px am rechten Rand -
   das obere Footer-Band war dort nur ein blauer Streifen statt durchgehend blau. */
.footer {
    clear: both;
}

.footer-bg-top {
    background-color: #003da5;
}

.footer-bg-main {
    background-color: #003da5;
}

/* @media screen and (min-width: 768px) {
    .footer-bg-main {
        max-width: 100%;
    }
}

@media screen and (min-width: 1200px) {
    .footer-bg-main {
        max-width: unset;
    }
} */

@media screen and (min-width: 1200px) {
    /* Der Footer-Inhalt hat mit .col-xs-12 in der Spalte eine Padding-Ebene mehr als der
       News-Bereich darüber und stünde 15px eingerückt. -30px statt -15px auf die innere
       Zeile setzt Adressblock und Zertifikate auf die Textkante der News-Spalten. */
    .footer-container-full .row-lg {
        margin-left: -30px;
    }

    /* Feste Breite statt 5/12: die Spalte wüchse sonst mit und schöbe die Zertifikate nach
       rechts. 325px wie im abgenommenen Stand, breiteste Textzeile misst 196px. */
    .footer-container-full .footer-adressspalte {
        width: 325px;
    }

    /* Seit der Adressblock linksbündig zu den News steht, klaffte rechts der Zertifikate eine
       doppelt so grosse Lücke wie links (149px zu 348px). 100px verteilen die drei Blöcke
       gleichmässig (249px zu 248px). Achtung: das lockert bewusst c9bd439, wo die Zertifikate
       näher an den Adressblock rücken sollten - damals stand der Block noch weiter rechts. */
    .footer-container-full .row-lg > span.col-lg-3 {
        margin-left: 100px;
    }

    /* Die Karte hängt an .footer-bg-main statt an ihrer Spalte: nur dieser Block reicht
       bis an die Metaleiste, deshalb sitzt sie mit bottom: 0 auch dann bündig, wenn
       Firefox/Edge die Textspalte anders hoch rendern (mit fester Höhe tat sie das nicht).
       Die min-height entspricht der festen Kartenhöhe aus dem Live-System: der Inhalt
       misst nur 193px, also bestimmt sie die Blockhöhe und damit die Karte — als
       CSS-Länge in jeder Engine gleich, anders als eine aus Text errechnete Höhe. */
    .footer-container-full .footer-bg-main {
        position: relative;
        min-height: 23.5rem;
    }

    /* Block statt inline: so entfällt die Whitespace-Zeile, die den Text 18,5px unter die
       Kartenoberkante drückte. Ohne die genullten Margins würden die -15px der .row hier
       wirksam und der Inhalt liefe nach links aus. */
    .footer-container-full .row.px-row {
        display: block;
        margin-left: 0;
        margin-right: 0;
    }

    .footer-container-full .row.px-row,
    .footer-container-full .map-container,
    .footer-container-full #map_container {
        position: static;
    }
}

.footer-lg-bg-main {
    background-color: #003da5;
}

.footer-bg-bottom {
    background-color: #2a6ebb;
}

.footer-color-white {
    color: #FFFFFF;
}

.footer-color-grey {
    color: #ffffff;
}

/* Kundenwunsch 30.07.: Adressblock im Footer eine Stufe grösser als der
   Seitenfliesstext (14px). Das Metaband bleibt bei 14px. */
.footer-bg-main .footer-color-grey,
.footer-bg-main .footer-color-grey a {
    font-size: 16px;
}

.footer-logo {
    margin-top: 0;
}

.footer-logo-wrapper {
    text-align: center;
}

@media screen and (min-width: 1200px) {
    .footer-logo-wrapper {

        padding: 0 15px;
    }
}

/* Footer-Logobalken entfernt - farbliche Ueberarbeitung */

/* Social-Icons weiss (Font-Awesome) */
.footer-socials {
    margin-top: 1.2rem; /* vorher 0: Icons klebten direkt an der E-Mail-Zeile */
}
.footer-socials i {
    font-size: 2.6rem; /* vorher 2rem = 20px; auf Kundenwunsch etwas kräftiger */
    color: #ffffff;
    line-height: 1;
}
.footer-socials a:hover i,
.footer-socials a:focus i {
    opacity: 0.8;
}

/* Auf Phones stand der Adressblock durch .w-50 auf halber Breite, wodurch "HSB Automation
   GmbH" nach "Automation" umbrach. Der Text bleibt zentriert, nutzt jetzt aber die volle
   Breite - erst durch die grössere Footer-Schrift ab 30.07. wurde der Umbruch sichtbar. */
@media screen and (max-width: 767px) {
    .footer-bg-main .footer-color-grey p.w-50 {
        width: 100%;
    }
}

/* Unterhalb 1200px sind die col-lg-Spans reine Wrapper ohne Layoutfunktion, behalten aber
   Bootstraps 15px-Padding. Als inline-Elemente schoben sie in Safari/WebKit 45px über den
   Viewport hinaus (echter horizontaler Scroll, auf Live identisch). Als Block ohne Padding
   ist der Footer in allen drei Engines gleich hoch. */
@media screen and (max-width: 1199px) {
    .footer-bg-main .row-lg,
    .footer-bg-main .row-lg > span[class*="col-lg-"] {
        display: block;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Kontaktdaten & Co. linksbuendig ab Tablet - farbliche Ueberarbeitung.
   Auf schmalen Phones (<768px) bewusst zentriert, da dort der fixierte
   "Katalog herunterladen"-Balken links den Text sonst ueberdeckt. */
@media (min-width: 768px) and (max-width: 1199px) {
    .footer-bg-main .footer-color-grey p,
    .footer-bg-main .footer-color-grey .text-align-center {
        text-align: left;
        width: 100%;
    }
    .footer-bg-main .footer-color-grey .flex-center,
    .footer-bg-main .footer-socials {
        justify-content: flex-start;
    }

    /* Der Zertifikate-Block ist flex-direction: column, dort steuert align-items die
       waagerechte Achse - das justify-content oben wirkt senkrecht. Deshalb rückte nur die
       Überschrift nach links, die drei Logos blieben mittig. */
    .footer-bg-main .zertifikat-klein .flex-center {
        align-items: flex-start;
    }
}

/*
 * display
 */
.block {
    display: block;
}

.flex {
    display: flex;
}

.inline-block {
    display: inline-block;
}

@media screen and (min-width: 1200px) {
.block-lg {
        display: block;
    }
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.top-0 {
    top: 0;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 768px) {
.flex-md-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}





.flex-col {
    flex-direction: column;
}

.gap-1rem {
    gap: 1rem;
}

/*
 * TEXT
 */

.text-align-center {
    text-align: center;
}

.bold {
    font-weight: bold;
}

.nested-link a {
    color: #ffffff;
    text-decoration: none;
}

.nested-link a:hover {
    text-decoration: underline;
}


/*
 * WIDTH
 */
.w-100 {
    width: 100%;
}

.w-50 {
    width: 50%;
}

.w-rem-3 {
    width: 3rem;
}

/*
 * paddings
 */

.p-x-2rem {
    padding: 2rem;
}



.p-none {
    padding: 0;
}

.nested-m-none p,
.nested-m-none img {
    margin: 0;
}

.nested-m-none img {
    height: 48px;
}

.m-x-0 {
    margin-left: 0;
    margin-right: 0;
}

.mt-2rem {
    margin-top: 2rem;
}

.mb-6rem {
    margin-bottom: 6rem;
}

.facebook {
    z-index: 1;
}

.zertifikat-klein a, .zertifikat-klein span.nested-m-none {
    z-index: 1;
}

@media screen and (min-width: 1200px) {
    .row-lg {
        display: flex;
        margin-right: -15px;
        margin-left: -15px;
    }
}

.p-x-none {
    padding-left: 0;
    padding-right: 0;
}

@media screen and (min-width: 1200px) {
.p-lg-x {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/*
 * height
 */

@media screen and (min-width: 1200px) {
    .h-calc {
        height: calc(100% - 8px - 2rem);
    }
}


@media screen and (min-width: 1200px) {
    .container-lg {
        width: 1170px;
        margin-left: auto;
        margin-right: auto;
    }
}

.margin-x-auto {
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 1200px) {
.margin-lg-x-auto-reset {
        margin-left: -15px;
        margin-right: -15px;
    }
}


@media screen and (min-width: 1200px) {
.footer-bg-bottom .row-lg {

        padding-left: 0;
    }
}

@media screen and (min-width: 1200px) {
.footer-bg-bottom .col-lg-offset-3 {
        margin-left: calc(25% - 1rem);
        padding-left: 0;
    }
}


@media screen and (min-width: 1200px) {
    .text-align-lg-left {
        text-align: left;
    }
}

/* ******************************************************************** *
 *                              OSM MAP                                 *
 * ******************************************************************** */
 .map-container {
    margin-bottom: -16px;
 }

.row.px-row {
    position: relative;
}

/* position: relative ist Pflicht, nicht Kosmetik: Leaflet setzt es beim Start selbst, wenn der
   Container static ist. Verkleinert man das Fenster über 1200px hinweg, greift die
   Desktop-Regel unten nicht mehr, der Container fiel auf static zurück und die absolut
   positionierten Kartenebenen verloren ihren Bezugsrahmen - sie ragten unter den Footer und
   erzeugten horizontalen Scroll (Safari: 1.4k Pixel). Erst ein Reload heilte das. */
#map_2 {
    display: block;
    position: relative;
    width: 100%;

    height: 18rem;
 }

@media (min-width: 768px) {
    #map_2 {
        height: 28rem;
    }
}

/* screen und der .footer-container-full-Scope sind Pflicht: der Bezugsrahmen oben steht in
   @media screen. Ohne beides greifen left/right im Druck ohne ihren Rahmen, die Karte bindet
   dann an die Bootstrap-Spalte (position: relative) und kollabiert auf Breite 0. */
@media screen and (min-width: 1200px) {
    /* Relativ zu .footer-bg-main: oben an der Blockkante und damit auf Höhe der ersten
       Adresszeile, unten an der Metaleiste. Rechts bündig zur Textkante der News-Spalten,
       links an der 8/12-Grenze plus die beiden Spalten-Paddings. */
    .footer-container-full #map_2 {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(66.66667% + 30px);
        right: 15px;
        width: auto;
        height: auto;
    }
}


 @media screen and (min-width: 1200px) {
    .flex-lg-unset {
        display: unset;
    }

    .flex-lg-start-col {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .flex-lg-end {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    
    .flex-lg-start {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .flex-lg-row {
        display: flex;
        flex-direction: row;
    }

    .text-align-lg-left {
        text-align: left;
    }

    /* 0 statt 2rem: die Überschrift "Zertifikate" muss auf der Höhe der ersten
       Adresszeile stehen, nicht 20px darunter */
    .zertifikat-klein {
        margin-top: 0;
    }

    .w-lg-unset {
        width: unset;
    }

    .m-lg-r-15 {
        margin-right: 15px;
    }

    .mb-lg-1rem { 
        margin-bottom: 1rem;  
    }
}