main {

    /* Allgemein */

    *, html {
        font-size: clamp(1rem, 1.1vw, 1.2rem);
        font-family: 'Corbert-Regular', sans-serif;
    }

    h2 {
        font-size: clamp(1.5rem, 1.9vw, 1.9rem);
        color: #004972;
        font-weight: bold;
    }

    h3 {
        font-size: clamp(1.3rem, 1.7vw, 1.7rem);
    }

    /* Hero */

    .hero {
        h2 {
            font-weight: normal;
            font-size: clamp(1.5rem, 2vw, 2rem);
        }
        h3 {
            font-weight: normal;
        }
    }

    .hero_box {
        height: 90%;
        position: relative;
        background:
                linear-gradient(rgba(0, 29, 46), rgba(0, 73, 114), rgba(133, 230, 231));
        z-index: 2;
        margin-top: -1.5rem; /* Ausgleich zum header-nav-margin */
    }

    .hero-overlay {
        position: absolute;
        margin:0;
        padding:0;
        top: 0; left: 0;
        opacity: 0.4;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }

    /* Content */

    .contentSection {
        background-color: #F7F7FC;
        padding: 3% 6%;
    }

    .inner-shadow {
        box-shadow:
                inset 0 0 20px rgba(0,0,0,0.5);
        z-index: 1;
    }

    .image {
        background: linear-gradient(rgba(0, 29, 46), rgba(0, 73, 114));
    }

    .video-segment {
        background-color: #004972;
        padding: 5% 25%;
    }

    .video-container {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }

    .video-container iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        display: block;
    }

    /* Breakpoints: */

    @media screen and (min-width: 768px) and (min-height: 1000px){
        .hero {
            height: calc(100vh - 102px) !important;
        }
    }

    @media screen and (min-width: 768px) {
        .img-limit {
            max-height: 50rem !important;
        }
    }

    @media screen and (max-width: 768px) {
        h3 {
            font-size: 1.2rem !important;
        }
        h1 {
            font-size: 2.7rem !important;
        }
        .content {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        .video-segment {
            padding:  5% 8%;
        }
    }
    @media screen and (max-width: 480px) {

        h1 {
            font-size: 2rem !important;
        }
    }

    /* Besonderheiten, Akzente, Farben: */

    .tags em {
        color: white;
        font-size: clamp(1.5rem, 1.9vw, 1.9rem);
    }

    .marker {
        height: 1.8em;
        width: auto;
        vertical-align: middle;
        position: relative;
        top: -0.12em;
        padding-right: 0.2em;
    }

    .divider {
        background-color: #004972;
        padding: 1.5rem;
    }

    figcaption {
        color: dimgray;
    }

    li {
        list-style-type: square;
    }

    li::marker {
        color: #004972;
    }

    strong {
        color: #004972;
        font-weight: bold;
    }

    button:hover {
        transform: scale(1.05);
        outline: solid #004972 0.1rem;
        transition: all 0.2s ease;
    }

    button:active {
        transform: scale(1);
    }

    a, a:link, a:visited {
        color: #004972;
    }

    a:hover {
        color: #85c4e7;
    }

    .ecke-lo {
        position: relative;
        background: #f6f6f6;
    }

    .ecke-lo::after {
        content: "";
        position: absolute;
        top: -0.5%;
        left: 0;
        width: 3rem;
        height: 3rem;
        background: #004972;
        clip-path: polygon(100% 0%, 0% 100%, 0% 0%);
    }

    .ecke-ru {
        position: relative;
        background: #f6f6f6;
    }

    .ecke-ru::before {
        content: "";
        position: absolute;
        bottom: -0.5%;
        right: 0;
        width: 3rem;
        height: 3rem;
        background: #004972;
        clip-path: polygon(0 100%, 100% 100%, 100% 0%); ;
    }
}