/* Smartphone-Hero (Kundenwunsch): Kennzeichnung oben, Überschrift und Button
   unten an die Bühne gedockt, kein Fließtext – das Foto bleibt dazwischen frei. */
@media (max-width: 767px) {
    .stage {
        align-items: stretch;
    }
    .stage > .container {
        display: flex;
        flex-direction: column;
    }
    .stage-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        /* unten Platz für den Scroll-Hinweis (Label + Linie, ca. 110px, plus Abstand) */
        padding: 36px 0 160px 0;
    }
    .stage h1 {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        margin: 0;
    }
    .stage h1 .eyebrow {
        margin: 0 0 auto 0;
    }
    .stage h1 .headline {
        margin-top: 32px;
    }
    .stage .lead {
        display: none;
    }
    .stage .actions {
        margin-top: 22px;
    }
}

/* Gestapelte Zweispalter (unter 1400px): Bild und Goldrahmen halten denselben
   Seitenabstand wie der Text, statt bis an den Rand zu laufen */
@media (max-width: 1399px) {
    .hero-content .hero:not(.content) {
        padding: 0 calc(var(--bs-gutter-x) * .5 + 18px) 18px calc(var(--bs-gutter-x) * .5);
    }
    .hero-content .hero:not(.content)::after {
        inset: 18px calc(var(--bs-gutter-x) * .5) 0 calc(var(--bs-gutter-x) * .5 + 18px);
    }
    .hero-content.hero-first .hero:not(.content) {
        padding: 0 calc(var(--bs-gutter-x) * .5) 18px calc(var(--bs-gutter-x) * .5 + 18px);
    }
    .hero-content.hero-first .hero:not(.content)::after {
        inset: 18px calc(var(--bs-gutter-x) * .5 + 18px) 0 calc(var(--bs-gutter-x) * .5);
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .hero-content .hero {
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    .stage-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .stage-strip .strip-item:nth-child(2n + 1) {
        border-right: 1px solid color-mix(in srgb, var(--color-secondary-200) calc((1 - var(--strip-progress)) * 100%), rgb(255 255 255 / .3));
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    html {
        font-size: 110%;
    }
    html[data-textsize="0"] {
        font-size: 95%;
    }
    html[data-textsize="2"] {
        font-size: 126%;
    }

    .container:not(.stage) > .row {
        margin-top: 130px;
        margin-bottom: 130px;
    }

    .stage h1 {
        font-size: 2.6rem;
    }
    .stage-body {
        padding: 80px 0 160px 0;
    }
    .stage-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .stage-strip .strip-item {
        border-bottom: none;
        border-right: 1px solid color-mix(in srgb, var(--color-secondary-200) calc((1 - var(--strip-progress)) * 100%), rgb(255 255 255 / .3));
    }
    .stage-strip .strip-item:last-child {
        border-right: none;
    }

    section.band h2 {
        font-size: 2.7rem;
    }
    h1 {
        font-size: 2.9rem;
    }
    h2 {
        font-size: 2.35rem;
    }

    .sidebar-nav a {
        font-size: 1.2rem;
    }
}

/* X-Large devices (large desktops, 1200px and up): Menüspalte links, Inhalt rechts */
@media (min-width: 1200px) {
    .page {
        margin-left: var(--sidebar-w);
    }

    .sidebar {
        inset: auto;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-w);
        /* Desktop: immer sichtbar, keine Enthüllung */
        visibility: visible;
        clip-path: none;
        transition: none;
    }
    .sidebar {
        background-color: var(--color-primary-900);
    }
    .menu-backdrop {
        display: none;
    }
    .sidebar .sidebar-media {
        /* am Viewport fixiert: dieselben Bildkoordinaten wie im Hero – ein
           transform würde das aushebeln, daher hier keiner */
        display: block;
        background-attachment: fixed;
        transform: none;
        transition: none;
    }
    /* Desktop: Unschärfe und Abdunklung über dem eigenen, fixierten Bild */
    .sidebar-blur {
        backdrop-filter: blur(50px) brightness(.6) saturate(.9);
        -webkit-backdrop-filter: blur(50px) brightness(.6) saturate(.9);
        background: linear-gradient(180deg, rgba(10, 19, 34, .35) 0%, rgba(10, 19, 34, .6) 55%, rgba(10, 19, 34, .88) 100%);
    }
    .sidebar .sidebar-brand, .sidebar .sidebar-nav > *, .sidebar .sidebar-footer > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
    /* der CTA-Button behält seine Hover-Animation */
    .sidebar .sidebar-footer > .button {
        transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
    }
    :root {
        /* Oberkante der ersten Menüzeile – die Hero-Überschrift beginnt auf derselben Höhe */
        --nav-top: 230px;
        /* Innenabstand oben (44px) + Logo (74px): Unterkante des Logos */
        --brand-h: 118px;
    }
    .sidebar-inner {
        padding: 44px 34px 30px 26px;
        text-align: right;
    }
    /* Weißes Logo in voller Breite auf dem dunklen Grund */
    .sidebar-brand {
        display: block;
        flex: 0 0 auto;
        height: calc(var(--brand-h) - 44px);
    }
    .sidebar-brand img {
        margin: 0 0 0 auto;
        width: 100%;
        max-width: 100%;
    }
    .sidebar-nav {
        align-items: flex-end;
        /* unter dem Logo-Block bis --nav-top; unten bleibt auto */
        margin: calc(var(--nav-top) - var(--brand-h)) 0 auto 0;
    }
    .sidebar .sidebar-nav a {
        font-size: .88rem;
        padding: 8px 0;
        width: auto;
        text-align: right;
    }
    /* Desktop: kein Balken, der weiße Pfeil markiert die aktive Seite */
    .sidebar .sidebar-nav a.active {
        color: var(--color-white) !important;
        background-color: transparent;
        padding: 8px 0;
        clip-path: none;
    }
    .sidebar-nav .line {
        margin-left: auto;
        background: linear-gradient(270deg, transparent, var(--color-accent-500));
    }
    /* Pfeil am rechten Rand der Menüspalte: zeigt auf den aktuellen Inhalt und
       gleitet beim Seitenwechsel zum neuen Menüpunkt (--arrow-y setzt scripts.js:
       Mitte des aktiven Menüpunkts). Solange der Hero neben dem Pfeil liegt, nur
       weiße Kontur; danach gefüllt (Klasse past-stage, weich überblendet). */
    .sidebar-arrow {
        display: block;
        position: absolute;
        right: 0;
        top: var(--arrow-y, -100px);
        width: 20px;
        height: 30px;
        margin-top: -15px;
        z-index: 3;
        opacity: 0;
        transition: top .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
    }
    .sidebar.has-active .sidebar-arrow {
        opacity: 1;
    }
    .sidebar-arrow::before, .sidebar-arrow::after {
        content: "";
        position: absolute;
        inset: 0;
        background: no-repeat right center / 20px 30px;
        transition: opacity .3s ease;
    }
    /* Kontur ohne Basislinie: die beiden Schenkel laufen bis an die Kante,
       damit an der Grenze zum Inhalt keine Linie entsteht */
    .sidebar-arrow::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Cpolyline points='21,-0.5 2,15 21,30.5' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='miter'/%3E%3C/svg%3E");
    }
    /* Füllung reicht über den Rand hinaus, wird an der Kante beschnitten */
    .sidebar-arrow::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Cpolygon points='22,-2 2,15 22,32' fill='%23ffffff'/%3E%3C/svg%3E");
        opacity: 0;
    }
    .sidebar.past-stage .sidebar-arrow::before {
        opacity: 0;
    }
    .sidebar.past-stage .sidebar-arrow::after {
        opacity: 1;
    }
    /* Goldene Haarlinie in zwei Teilen mit Lücke auf Pfeilhöhe; der Verlauf ist am
       Viewport fixiert, damit beide Teile wie eine Linie wirken. Top/Höhe hängen an
       --arrow-y und gleiten mit dem Pfeil. */
    .sidebar-edge {
        display: block;
        position: absolute;
        right: 0;
        width: 1px;
        z-index: 3;
        background: linear-gradient(180deg, rgba(200, 164, 93, .1), rgba(200, 164, 93, .6), rgba(200, 164, 93, .1));
        background-attachment: fixed;
        transition: top .45s cubic-bezier(.22, 1, .36, 1), height .45s cubic-bezier(.22, 1, .36, 1);
    }
    .sidebar-edge.top {
        top: 0;
        height: calc(var(--arrow-y, -100px) - 16px);
    }
    .sidebar-edge.bottom {
        top: calc(var(--arrow-y, -100px) + 16px);
        bottom: 0;
    }
    .sidebar:not(.has-active) .sidebar-edge.top {
        height: 100%;
    }
    .sidebar:not(.has-active) .sidebar-edge.bottom {
        display: none;
    }
    .sidebar-footer {
        align-items: flex-end;
    }

    .stage {
        min-height: 100vh;
        min-height: 100dvh;
        /* Text oben ausrichten, damit die Überschrift mit dem Menü fluchtet */
        align-items: flex-start;
    }
    .stage-media {
        background-attachment: fixed;
    }
    .stage-body {
        /* Menüzeile hat 8px Innenabstand – das Label über der Überschrift
           beginnt auf derselben Höhe wie der erste Menüpunkt */
        padding: calc(var(--nav-top) + 8px) 0 140px 0;
        /* in rem: die Textspalte wächst mit der Schriftgröße, der Umbruch bleibt gleich */
        max-width: 38.75rem;
    }
    .stage h1 {
        font-size: 3rem;
    }
    /* Überschrift bleibt in der schmalen Spalte links neben der Person */
    .stage h1 .headline {
        max-width: 620px;
    }
    .stage .lead p {
        font-size: 1.2rem;
    }

    main > section:first-child:not(.stage) {
        margin-top: 80px;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    html {
        font-size: 115%;
    }
    html[data-textsize="0"] {
        font-size: 100%;
    }
    html[data-textsize="2"] {
        font-size: 132%;
    }

    :root {
        --sidebar-w: 320px;
    }

    .container {
        max-width: 1480px;
    }

    .hero-content .hero {
        padding: 0;
    }
    .hero-content .hero:not(.content) {
        padding: 0 18px 18px 0;
    }
    .hero-content.hero-first .hero:not(.content) {
        padding: 0 0 18px 18px;
    }

    /* nur die reine Textspalte – Rasterspalten tragen ebenfalls .content */
    .hero-content.hero-first > .content:not(.hero) {
        order: 1;
        padding-left: 70px;
    }
    .hero-content:not(.hero-first) > .content:not(.hero) {
        padding-right: 70px;
    }
    /* Rasterspalten behalten den Bootstrap-Innenabstand, damit die negativen
       Ränder ihrer Zeilen nicht über die Container-Kante hinausragen */
    .hero-content > .hero.content {
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    .stage-body {
        max-width: 43.75rem;
    }
    .stage h1 {
        font-size: 3.5rem;
    }
    .stage h1 .headline {
        max-width: 700px;
    }
}

/* Schnellzugriff-Streifen im Startseiten-Hero: erst ab 1500px, wo die vier
   Einträge sauber nebeneinander passen. Derselbe Umbruchpunkt gilt für die
   vier Kacheln darunter (.situations.quad). */
@media (min-width: 1500px) {
    .stage.has-strip .stage-body {
        padding-bottom: 170px;
    }
    .stage.has-strip .stage-scroll {
        bottom: 140px;
    }
    /* Der Streifen hängt von der Unterkante der Bühne nach oben: die Unterkante
       liegt exakt auf dem Ende des Heros, egal wie hoch der Streifen gerade ist */
    .stage-strip-wrap {
        display: block;
        position: relative;
        height: 0;
        margin-top: 0;
    }
    .stage-strip {
        position: absolute;
        left: calc(var(--bs-gutter-x) * .5);
        right: calc(var(--bs-gutter-x) * .5);
        bottom: 0;
    }
    .stage-strip .strip-item {
        gap: 16px;
        padding: 28px 28px;
    }
}

/* Niedrige Desktop-Fenster (typische Notebooks): Menüspalte kompakter, damit
   Menü, Button und Telefonnummer ohne Scrollen sichtbar bleiben. Der Hero
   rückt über --nav-top automatisch mit nach oben. */
@media (min-width: 1200px) and (max-height: 899px) {
    :root {
        --nav-top: 160px;
        --brand-h: 100px;
    }
    .sidebar-inner {
        padding-bottom: 20px;
    }
    .sidebar-brand img {
        width: 76%;
    }
    .sidebar .sidebar-nav a, .sidebar .sidebar-nav a.active {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .sidebar-nav .line {
        margin-top: 12px;
        margin-bottom: 12px;
    }
    .sidebar-footer {
        gap: 10px;
    }
}

/* Startseite auf niedrigen Bildschirmen: Zwischen Buttons und Schnellzugriff
   bleibt kein Platz für den Scroll-Hinweis – der Streifen zeigt dort selbst,
   dass es weitergeht. */
@media (min-width: 1500px) and (max-height: 1070px) {
    .stage.has-strip .stage-scroll {
        display: none;
    }
}

/* Startseiten-Hero: Das Bild ist links erweitert, damit die Person am Desktop
   rechts neben dem Text steht. Auf schmalen Bildschirmen den rechten Teil mit
   der Person zeigen statt der Erweiterung. */
@media (max-width: 1199px) {
    .wrapper[data-page="index"] .stage-media {
        background-position: 77% 20% !important;
    }
    /* Über mich: beide Personen zeigen statt nur den rechten Bildrand */
    .wrapper[data-page="about"] .stage-media {
        background-position: 70% 0 !important;
    }
    /* Trennung & Scheidung: Burkhart und die Frau zeigen statt nur den rechten Bildrand */
    .wrapper[data-page="separation"] .stage-media {
        background-position: 62% 0 !important;
    }
}