:root { --header-h: 90px; }   /* auf deine Headerhöhe anpassen */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: var(--header-h); }


h1 {
  padding-bottom: 2rem;
}

p {
    font-size: 0.85rem;
    line-height: 1.85;
}

a {
    font-size: 0.85rem;
}

h1.theme {
    font-size: 6rem;
    line-height: 5rem;
    font-family: var(--script-font), serif;
    text-transform: uppercase;
}

h2.headline {
    font-size: 6rem;
    line-height: 5rem;
    font-family: var(--new-script-font), serif;
    text-transform: uppercase;
}

p.vorspann {
    font-size: 0.85rem;
    line-height: 1.85;
    font-weight: 500;
}

p.interlude {
    font-size: 0.85rem;
    line-height: 1.85;
    font-weight: 500;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

p.big {
    font-size: 1.25rem;
    line-height: 1.85;
    font-weight: 400;
}

.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr; /* zwei gleich breite Spalten */
}

.split-section_2 {
    padding-bottom: 2rem;
}

.split-section > .text-section,
.split-section > .video-section {
    min-width: 0;     /* wichtig: verhindert Overflow bei flex/grid Kindern */
    min-height: 0;
}

.video-section {
    position: relative;
    width: 100%;      /* füllt exakt die halbe Grid-Spalte */
    height: 100%;     /* wird durch Grid gestreckt */
    overflow: hidden; /* Video darf nicht rauslaufen */
}

.video-section .myVideo {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* immer proportional, ohne überzuziehen */
    max-width: 100%;     /* verhindert Überschreiten */
}

.three-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 gleich breite Spalten */
    gap: 1.5rem;
    padding: 3rem 5rem;
    margin-bottom: 3rem;
    border-radius: 8px;
    align-items: start; /* Inhalte oben ausrichten */
}

.two-columns {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 1.5rem;
}

.two-columns_50_50 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Optional: lange Wörter/URLs umbrechen */
.two-columns,
.two-columns_50_50 {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.two-columns > *,
.two-columns_50_50{
    min-width: 0;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.two-columns img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover; /* ok – wirkt vor allem, wenn du auch eine fixe Höhe setzt */
}

.two-plus-one {
    display: grid;
    grid-template-columns: 1fr 1fr; /* zwei Spalten */
    grid-template-rows: 1fr 1fr;    /* zwei Zeilen */
    gap: 1.5rem;
}

/* linke obere Box */
.two-plus-one .left-top {
    grid-column: 1;
    grid-row: 1;
}

/* linke untere Box */
.two-plus-one .left-bottom {
    grid-column: 1;
    grid-row: 2;
}

/* rechte Box: über beide Zeilen spannen */
.two-plus-one .right {
    grid-column: 2;
    grid-row: 1 / span 2; /* spannt über beide Zeilen */
}

.socials {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
}

.overlay {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index: 1;

}

.overlay h1 {
    position: absolute;
    font-size: 2.5rem;
    letter-spacing: 10px;
    color: var(--darkblue);
    z-index: 2;
    opacity: 1;
    text-align: center;
    width: 100%;
    font-family: var(--script-font), serif;
    text-transform: uppercase;
}

.overlay p {
    position: absolute;
    font-size: 1rem;
    letter-spacing: 10px;
    color: #fff;
    z-index: 2;
    opacity: 1;
    text-align: center;
    width: 100%;
    font-family: var(--body-font), sans-serif;
    margin-top: 4rem;
    font-weight: 400;
    padding-top: 1.5rem;
}

.overlay h4 {
    position: absolute;
    font-size: 2rem;
    color: #fff;
    z-index: 2;
    opacity: 1;
    text-align: center;
    width: 100%;
    font-family: var(--body-font), sans-serif;
    margin-top: 6rem;
    font-weight: 400;

}

span.light {
    font-family: var(--body-font), sans-serif;
    font-weight: 300;
    padding-left: 5px;
}

.spacer {
    height: 5rem;
}

.nav__toggle .nav__toggle-menu { display: inline-block; }
.nav__toggle .nav__toggle-close { display: none; }

.nav__toggle[aria-expanded="true"] .nav__toggle-menu { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-close { display: inline-block; }





@media screen and (min-width: 1481px) and (max-width: 1920px) {

    .overlay {
        top: 20%;
    }

    .overlay h1 {
        font-size: 1.75rem;
        letter-spacing: 10px;
    }

    h2.headline {
        font-size: 3.75rem;
        line-height: 3.5rem;
    }

    p {
        line-height: 1.65;
    }

    p.vorspann {
        line-height: 1.65;
    }

    a.button {
        padding: 0.25rem;
        margin-bottom: 3rem;
    }

    .text-section_2 {
        padding-bottom: 0;
    }

    .two-columns {
        grid-template-columns: 6fr 4fr;
    }

    .two-columns,
    .two-columns_50_50 {
        overflow-wrap: unset;
        word-break: initial;
    }

    .ri-3x {
        font-size: 2.25rem;
    }
}

    @media screen and (min-width:1201px) and (max-width: 1480px) {

        h2.headline {
            font-size: 2.35rem;
            line-height: 2.5rem;
        }


        .split-section {
            grid-template-columns: 1fr 1fr;
            align-items: stretch; /* wichtig */
        }

        .content_semi {
            width: 87%;
        }

        /* Die beiden direkten Kinder müssen sich wirklich strecken */
        .split-section > .text-section,
        .split-section > .video-section {
            align-self: stretch; /* überschreibt evtl. abweichende Defaults */
            min-height: 0; /* verhindert min-content-Clamping in Flex/Innerem */
        }

        /* Linke Spalte: kein Vertikalzentrieren, sonst „Luft“ oben */
        .text-section {
            display: flex;
            align-items: flex-start; /* nicht center */
            justify-content: center;
        }

        .text-section .content {
            width: clamp(75%, 80%, 85%);
            /* besser hier statt inline: */
            /* padding-top: 5rem; */
        }

        .two-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }

        .three-columns {
            padding: 1rem;
            gap: 1rem;
        }

        .three-columns .column p {
            line-height: 1.55;
        }

        .button.white {
            margin: 0 auto;
            max-width: 300px;
        }

        /* Rechte Spalte: Container füllt die Zeilenhöhe, Video füllt Container */
        .video-section {
            position: relative; /* Referenz für das absolute Video */
            overflow: hidden;
            background: #000; /* Fallback, falls Video noch lädt */
        }

        .video-section .myVideo {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* wie background-size: cover */
            display: block;
        }

        .overlay {
            top: 25%;
        }

        .overlay h1 {
            font-size: 1.45rem;
            letter-spacing: 8px;
        }

        .overlay p {
            letter-spacing: 3px;
            font-size: 0.85rem;
            margin-top: 3rem;
        }

        .ri-3x {
            font-size: 1.5rem;
        }
    }

    @media screen and (min-width: 769px)and (max-width: 1200px) {

        .overlay {
            top: 18%;
        }

        h2.headline {
            font-size: 3rem;
            line-height: 3rem;
        }

        p.big {
            font-size: 1rem;
            line-height: 1.85;
            font-weight: 400;
        }

        .split-section {
            grid-template-columns: 1fr 1fr;
            align-items: stretch; /* Items an die Zeilenhöhe anpassen */
        }

        .overlay h1 {
            font-size: 1.15rem;
            letter-spacing: 4px;
            line-height: 1.1;
        }

        .overlay h4 {
            margin-top: 3rem;
            font-size: 1.35rem;
        }

        .overlay p {
            letter-spacing: 3px;
            font-size: 0.75rem;
            margin-top: 1rem;
        }

        .two-columns,
        .two-columns_50_50 {
            display: block;
        }

        .three-columns {
            grid-template-columns: 1fr;
            padding: 1rem;
            gap: 1rem;
        }

        .three-columns .column img {
            width: 80%;
            display: block;
            margin: auto;
            padding-top: 3rem;
            padding-left: 2rem;
        }

        .column {
            gap: 1.25rem;
            padding-bottom: 1.5rem;
        }

        .split-section_2 {
            padding-bottom: 0.75rem;
        }

        .text-section_2 {
            padding-bottom: 0;
        }

        .content_semi {
            padding-bottom: 0;
        }

        .text-section.jade_gradient.buch .two-columns {
            display: block;
        }

        .container_coloured_content {
            width: 80%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 5rem 0;
            margin: auto;
        }

        a.button {
            padding: 0.25rem 0.45rem;
            width: 300px;
            font-size: 10px;
            display: block;
            margin-bottom: 3rem;
        }

        .ri-3x {
            font-size: 1.5rem;
        }
    }

@media screen and (max-width: 768px) {

    p.vorspann {
        font-size: 0.85rem;
    }

    p.big {
        font-size: 1rem;
        line-height: 1.85;
        font-weight: 400;
    }

    .overlay {
        top: 40%;
    }

    .overlay h1 {
        font-size: 1.15rem;
        letter-spacing: 3px;
        line-height: 1.15;
    }

    .overlay h4 {
        margin-top: 3rem;
        font-size: 1.5rem;
    }

    .overlay p {
        font-size: 0.65rem;
        letter-spacing: 3px;
        margin-top: 2rem;
    }

    h2.headline {
        font-size: 3rem;
        line-height: 3rem;
    }

    .split-section {
        display: flex;
        flex-direction: column;
    }

    .split-section_2 {
        display: flex;
        gap: 0.5rem;
        flex-direction: column-reverse;
        padding-bottom: 0.75rem;
    }

    .two-plus-one {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .two-plus-one .right {
        grid-row: auto;
        grid-column: auto;
    }

    .two-columns,
    .two-columns_50_50 {
        grid-template-columns: 1fr;
    }

    .three-columns {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1rem;
    }

    .three-columns .column img {
        width: 80%;
        display: block;
        margin: auto;
        padding-top: 3rem;
        padding-left: 2rem;
    }

    .socials {
        gap: 1.5rem;
    }

    .ri-3x {
        font-size: 1.25rem;
    }
}