/****************************************************************************
 * Header Section
 *
 * INFO: Slider-Section, die per manuell vergebener CSS-Klasse "header_section"
 *       das Layout des Multicontent-Sliders uebernimmt:
 *         - volle Viewport-Hoehe (100svh), kein Section-Innenabstand
 *         - Slider-Bild vollflaechig als Hintergrund (Ratio-Platzhalter aus)
 *         - dunkles Overlay ueber dem Bild, unter dem Text
 *         - Text-Inhalt unten ausgerichtet (statt vertikal zentriert),
 *           grosszuegiger Innenabstand, begrenzte Textbreite, Text-Schatten
 *
 * HTML: .content_section.slider_section.header_section
 *          > .slider_wrapper
 *              > .slick_slider ...  figure.slide > [data-ratio] > img
 *              > .slider_content_wrapper
 *                  > .row > .columns
 *                      > .content_title / p / .button-group
 ****************************************************************************/

/****************************************************************************
 * Section
 ****************************************************************************/
.header_section {
    min-height: 100svh;
    position: relative;
}
.header_section.content_section {
    padding: 0;
    overflow: hidden;
}
/* erste Section direkt unter die (transparente) Topbar ziehen */
.content > .header_section:first-child {
    margin-top: -4rem;
}

/****************************************************************************
 * Slider fuellt die gesamte Section
 ****************************************************************************/
.slider_section.header_section > .slider_wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
}
/* Seitenverhaeltnis-Platzhalter des Sliders deaktivieren */
.header_section .slider_wrapper::before {
    content: none;
}

/****************************************************************************
 * Bild-Ebene: vollflaechig
 ****************************************************************************/
.header_section .slick_slider .slide,
.header_section .slick_slider .slide [data-ratio] {
    height: 100%;
}
.header_section .slick_slider .slide [data-ratio]::before {
    content: none;
}
.header_section .slick_slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* dunkles Overlay ueber dem Bild, unter dem Text
   (fuer einen Verlauf statt Flaeche: background auf
    linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,.2)) aendern) */
.header_section .slider_wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.25);
}

/****************************************************************************
 * Text-Inhalt: unten statt vertikal zentriert
 ****************************************************************************/
.header_section .slider_content_wrapper {
    top: auto;
    bottom: 0;
    transform: none;
    z-index: 20;
    padding: 8rem 1.5rem 4rem;
}
.header_section .slider_content_wrapper > .row {
    max-width: 75rem;
    margin: 0 auto;
}
.header_section .slider_content_wrapper .columns {
    color: #ffffff;
    text-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.3);
}
.header_section .slider_content_wrapper .columns > * {
    max-width: 25rem;
}
.header_section .slider_content_wrapper .content_title {
    padding: 0;
}
.header_section .slider_content_wrapper .columns p:last-child {
    margin: 0;
}

/****************************************************************************
 * Responsive (analog Multicontent-Slider)
 ****************************************************************************/
@media screen and (min-width: 40em) {
    .header_section .slider_content_wrapper {
        padding: 8rem 4rem;
    }
}

@media screen and (min-width: 64em) {
    .header_section .slider_content_wrapper {
        padding: 8rem 4rem 4rem;
    }
}

@media screen and (min-width: 64em) and (max-height: 50em) {
    .header_section .slider_content_wrapper .h1,
    .header_section .slider_content_wrapper h1 {
        font-size: 4rem;
    }
}