@charset "UTF-8";

/* Sammlung von lokalen Ãœberschreibungen von oase.beta.wysiwyg.de */

body {
    /*font-family: "TheSansC5";*/
    font-weight: 300;
}

/* 20px paddig top/bottom aus bootstrap passen nicht zu navi/footer, underline-hover */

.page__body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

a.nav__link:hover {
    text-decoration: none;
    color: inherit;
}


/* graue Linie aus Spacer-hr raus */

hr { border-top: 1px solid transparent; }

/* z-index Gerangel mit sticky nav */

[class^=pic-container-] {
    z-index: 0;
}

[class^=pic-container-] + div.teaser-content {
    z-index: auto;
}


/* display-n (Bootstrap) zu gross xs & sm wg überlanger Wörter */

@media screen and (max-width: 35.9375em) {
    div[class^="col-"].teaser-container .teaser-content .display-3,
    h1.jumbotron-heading.display-3 { font-size: 9.15vw; } /* ~34px */

    div[class^="col-"].teaser-container .teaser-content .display-4,
    h1.jumbotron-heading.display-4 { font-size: 8.5vw; } /* ~32px */

    div[class^="col-"].teaser-container .teaser-content h4 {
        font-size: 1.3rem;
    }
    div[class^="col-"].teaser-container .teaser-content p,
    div[class^="col-"].teaser-container .teaser-content div.extra-feature {
        font-size: 0.825rem;
        line-height: 30px;
    }
}

/* kleinere Headlines für 6sp Teaser */

.col-xl-2.teaser-container h4 {
    font-size: 1.2rem;
}


/* Desktop Teaser Grid flex center (wenn nicht komplett gefüllt) */

@media screen and (min-width: 768px) {
    .teaser-incomplete-center .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}


/* zentrierte Typo in quadratisch-zweispaltigen Bilder-Teasern */

.col-md-6.picture-teaser.teaser-container .teaser-content {
    text-align: center;
}
.col-md-6.picture-teaser.teaser-container .teaser-content h4 {
    font-size: 150%;
    font-weight: 300;
}

@media screen and (min-width: 992px) {
    .col-md-6.picture-teaser.teaser-container .teaser-content {
        bottom: 20%;
    }
    .col-md-6.picture-teaser.teaser-container .teaser-content h4 {
        padding-top: 0;
        font-size: 300%;
        font-weight: 300;
    }
}


/* zentrierter Text Grid-Teaser */

.teaser-content-center div[class^="col-"].teaser-container .teaser-content h4 {
    text-align: center;
}
.teaser-content-center div[class^="col-"].teaser-container .teaser-content p,
.teaser-content-center div[class^="col-"].teaser-container .teaser-content div.extra-feature {
    text-align: center;
}


/* navigation: auto-highlight prevention for navi flyout 1st link */

a.nav__link:focus {
    outline: none !important;
}


/* vertikal zentrierter Text Gallery */

.main-headline-vertical-center .picture-teaser .teaser-content  {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

/* fifty-fifty picture-standard-teaser a la schelberg */
/* entsprechend Homepage Product Highllight Teaser 2x1 Text nebeneinander Tablet/Desktop */

/* md */
@media screen and (min-width: 48em) {
    .closed-row div[class^="pic-container-"] {
      width: calc(100% + var(--grid-gap));
      margin-left: calc( var(--grid-gap) / -2);
      margin-right: calc( var(--grid-gap) / -2);
    }
}
/* zweispaltiger Teasertext unter 2x1 Bild desktop */
@media screen and (min-width: 62em) {
    div.closed-row.twocolumn-text > section > div > div > div > a > div.teaser-content {
        display: flex;
    }
    div.closed-row.twocolumn-text > section > div > div > div > a > div.teaser-content > h4 {
        align-self: flex-start;
        width: 50%;
    }
    div.closed-row.twocolumn-text > section > div > div > div > a > div.teaser-content > p {
        align-self: flex-end;
        width: 45%;
        padding-top: 1.4em;
    }
}

/* Formatwechsel von 2:1 Desktop auf 1:1 Tablet Portrait  */

@media screen and (max-width: 48em) {
    div.closed-row div.col-md-6.teaser-container > a > div.pic-container-2x1 {
        padding-bottom: 100%;
    }
}


/* Aquaristik/HighLine ################################################### */
/* Grössenänderungen die - später - global für sm geändert werden sollten… */

@media screen and (max-width: 415px) {
    .header-gallery-highline .teaser-content h4 {
        font-size: 2.8rem;
    }
    .header-gallery-highline .teaser-content p {
        font-size: 0.825rem;
    }
}


/* hier hovert der Titel ohne Link !? */

ul.nav li.nav__item span.nav__link:hover {
    text-decoration: none;
}


/* Button-Reparatur (flex) für CTA-Teaser auf Headline-Box-Basis + Hintergrundfarbe… */

.headline-teaser-box > section.jumbotron > div.container {
    display: block;
}
.headline-teaser-box.bg-section-ecgray > section.jumbotron {
    background-color: #ececec;
}