html * {
    padding: 0;
    margin: 0;
}

/* Globale Box-Sizing-Basis: verhindert Überläufe und vereinfacht Layouts */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #000000;
    background-color: #ffffff;
}

.seite {
    max-width: 1024px;
    background-color: darkgrey;
    margin: 0 auto;
}

header {
}

main {
    background-color: #ffffff;
    padding-bottom: 40px;
    position: relative;
}

footer {
}

h1,
.h1 {
    font-size: 20px;
    font-weight: 700;
    color: #50AFE1;
    padding-bottom: 10px;
}

h2 {
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 15px;
}

.kopfbereich {

    max-height: 232px;
    overflow: hidden;
}

.kopfbild {
    width: 100%;
}

.kopfbild img {
    width: 100%;
/*  height: 232px;  */

}

.vorteile-box {
    background-color: #D9EEF8;
    padding: 30px 30px 30px 30px;
}

.vorteile-box ul {
    list-style-type: square;
    padding-left: 15px;
}

.vorteile-box ul li {
    color: #000000;
    padding-bottom: 10px;
}

.einleitung, .vorteile_video {
    padding: 10px 20px;
}

/* Vorteile + Video: gleichmäßig nebeneinander mit 30px Abstand */
.vorteile-video {
    display: flex;
    gap: 30px;
    align-items: stretch;
}

.vorteile-video {
    display: flex;
    flex-direction: column; /* <- hier wird die Richtung von horizontal auf vertikal geändert */
    gap: 20px; /* optional: Abstand zwischen Vorteil-Box und Video */
}

/* Float/Width der bestehenden Box in diesem Kontext neutralisieren */
.vorteile-video .vorteile-box {
    float: none;
    width: auto;
}

.vorteile-video .video-box iframe,
.vorteile-video .video-poster {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
}

.vorteile-video .video-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vorteile-video .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.vorteile-video .play-button::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 5px;
}

.vorteile-video .video-box:hover .play-button {
    background-color: #1db2e4;
}

/* Optional: auf kleinen Bildschirmen untereinander */
@media (max-width: 700px) {
    .vorteile-video {
        flex-direction: column;
    }
}

h1.ueberschrift_artikel_liste {
    padding-left:18px;
    font-size: 20px;
    font-weight: 700;
    color: #50AFE1;
    padding-bottom: 20px;

}

.artikel-liste {
    padding: 0px 10px;
    /* Zwei Spalten mit 30px Abstand analog zur oberen Section */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

/* Unter 700px: eine Spalte */
@media (max-width: 700px) {
    .artikel-liste {
        grid-template-columns: 1fr;
    }
}

.artikel {
    background-color: #fff;
    overflow: hidden;
    /* Artikel-Container als Grid: Bild links | rechte Spalte für Headline, Text, Button */
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 15px;
    row-gap: 10px;
    padding: 0 10px 20px 10px;
}

.artikel__ueberschrift {
    padding-top: 10px;
    padding-left: 10px;
    max-height: 35px;
    margin-bottom: 0.62rem;
    text-overflow: ellipsis;
    font-size: 18px;
    line-height: 1.25rem;
    width: 100%;
    margin: 0 0 .875rem;
    color: #1db2e4;
    font-weight: 700;
}

.artikel__inhalt {
    position: relative;
    /* Inhalte am Eltern-Grid teilnehmen lassen */
    display: contents;
    padding-left: 0;
    padding-bottom: 0;
    overflow: visible;
}

.artikel__bild {
    /* Floats neutralisieren, Breite ergibt sich aus Bild */
    float: none;
    width: auto;
    grid-column: 1;
    grid-row: 1 / span 3;
}

.artikel__bild img {
    width: 225px;
    height: 225px;
    /* Margins entfernen, Abstand wird über Grid column-gap geregelt */
    margin-right: 0;
    margin-bottom: 0;
    background-clip: border-box;
    font-family: "object-fit: cover";
    object-fit: cover
}

.artikel__text {
    /* Text in rechter Spalte, unter der Headline */
    width: auto;
    float: none;
    grid-column: 2;
    grid-row: 2;
}

.textabschnitt {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.textabstand-oben {
    margin-top: 10px !important;
}

/* Entfernt: .textButtonSpacer (nicht verwendet) */

.artikel__aktion {
    /* Unterhalb der Textspalte in gleicher Breite anzeigen */
    grid-column: 2;
    grid-row: 3;
    margin-top: 0;
    position: static;
    right: auto;
    bottom: auto;
    width: 100%;
}

/* Headline in die rechte Spalte setzen und linken Innenabstand entfernen */
.artikel .artikel__ueberschrift {
    grid-column: 2;
    grid-row: 1;
    padding-left: 0;
    padding-top: 0;
    margin: 0;
}

.schaltflaeche {
    display: inline-block;
    min-width: 2.5rem;
    max-width: 100%;
    margin: 0;
    padding: .75rem 1.875rem;
    transition: background-color, color;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    border: 0;
    border-radius: 4px;
    background-color: #50AFE1;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    vertical-align: middle;
    user-select: none;
    touch-action: manipulation;
    appearance: none;
}

button:hover {
    background-color: #2375aa;
    color: #fff;
}

.hinweis-text {
    font-size: 0.875rem;
    padding: 15px;
}

.kontakt-box {
    background-color: #50AFE1;
    /*border: 2px solid #1db2e4;*/
    margin: 20px 10px;
    padding: 30px;
    overflow: hidden;
}

/* Oberer Abstand für alle Sections außer dem Kopfbereich */
main > section:not(.kopfbereich) {
    margin-top: 30px;
}

.kontakt {
    width: 100%;
}
.kontakt h2.h2_weiss {
    color: #ffffff;
    padding-bottom: 1rem;
    text-align: center;
    font-size: 42px;
    font-weight: 200;
}
.kontakt p {
    font-size: 19px;
    text-align: center;
}

.telefon {
    padding-top: 15px;
}

.symbol {
    display: inline-block;
    width: 40px;
    height: 40px;
    color: #000000;
    vertical-align: middle;
    pointer-events: none;
}

.kontakt-link {
    display: inline-block;
    color: #000000;
    font-size: 19px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}

.vererbt {
    font-size:inherit;
    font-weight:inherit;
    text-decoration:inherit;
    color:inherit;
}

.kein-umbruch {
    white-space: nowrap;
}

/* ##############################################
   ##### MEDIA TABLET                       #####
   ############################################## 
*/

@media (max-width: 768px) {
    .seite {
        max-width: 768px;
    }
    .kopfbereich {
        background-color: #ffffff;
        max-height: 100%;
    }
    .kopfbild {
        clear: left;
        width: 100%;
        height: 100%;
    }
    .kopfbild img {
        width: 768px;
    }

    .artikel {
        /* Tablet: eine Spalte untereinander */
        grid-template-columns: 1fr;
    }
    /* Grid-Positionen zurücksetzen, natürliche Reihenfolge: Bild, Headline, Text, Button */
    .artikel .artikel__bild,
    .artikel .artikel__ueberschrift,
    .artikel .artikel__text,
    .artikel .artikel__aktion {
        grid-column: auto;
        grid-row: auto;
    }
    .artikel__bild {
        width: auto;
    }
    .artikel__text { width: 100%; }
    .artikel__aktion {
        position: static;
        padding-bottom: 10px;
        padding-right: 10px;
    }
    .schaltflaeche {
        display: block;
    }
    /* Oberer Abstand mobil/tablet: 15px */
    main > section:not(.kopfbereich) {
        margin-top: 15px;
    }
}


/* ##############################################
   ##### MEDIA SMARTPHONE                   #####
   ############################################## 
*/

@media (max-width: 480px) {
    .seite {
        max-width: 480px;
    }
    .kopfbereich {
        background-color: #ffffff;
    }
    .kopfbild img {
        width: 100%;
        height: 100%;
    }
    .artikel__ueberschrift {
        max-height: 30px;
        margin-bottom: 0.62rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 18px;
        line-height: 1.5rem;
        width: 100%;
        margin: 0 0 .875rem;
        color: #1db2e4;
        font-weight: 700;
    }
    .artikel {
        /* Smartphone: ebenfalls 1 Spalte */
        grid-template-columns: 1fr;
    }
    /* Grid-Positionen zurücksetzen */
    .artikel .artikel__bild,
    .artikel .artikel__ueberschrift,
    .artikel .artikel__text,
    .artikel .artikel__aktion {
        grid-column: auto;
        grid-row: auto;
    }
    .artikel__bild { }
    .artikel__bild img {
        width: 100%;
        height: auto;
        max-height: 240px;
        display: block;
    }
    .artikel__text { width: 100%; }
    .textabschnitt,
    .hinweis-text {
        font-size: 13px;
        line-height: 1.2;
        display: block;
        position: relative;
        margin: 0;
        padding-right: 10px;
    }
    .artikel__aktion { margin-top: 20px; }
    .kontakt { width: 100%; text-align: center; }
    /* Oberer Abstand Smartphone: 15px (Absicherung des Tablet-Werts) */
    main > section:not(.kopfbereich) {
        margin-top: 15px;
    }
}