/*
 * MeerHeimatLiebe r223 – globale finale Layout-Geometrie
 *
 * Zweck:
 * - Fixed Header darf keinen Seiteninhalt überdecken
 * - breite Viewport-Nutzung nach r207-Vorbild
 * - konsistente Seitenabstände
 * - 100%-Browseransicht ohne CSS-Zoom-Tricks
 * - bestehende Spezial-CSS bleibt unangetastet
 */

/* ---------------------------------------------------------
   1. Zentrale Layoutvariablen
   --------------------------------------------------------- */

:root {
    --mhl-header-space: 108px;
    --mhl-content-max: 1720px;
    --mhl-content-gutter: clamp(20px, 3vw, 56px);
}


/* ---------------------------------------------------------
   2. Fixed Header: Platz im Dokumentfluss sichern
   --------------------------------------------------------- */

html {
    scroll-padding-top: calc(var(--mhl-header-space) + 1rem) !important;
}

body {
    padding-top: calc(var(--mhl-header-space) + .35rem) !important;
}


/* ---------------------------------------------------------
   3. Hauptinhalt grundsätzlich breit und zentriert
   --------------------------------------------------------- */

main.site-main {
    width: min(
        calc(100% - var(--mhl-content-gutter)),
        var(--mhl-content-max)
    ) !important;

    max-width: var(--mhl-content-max) !important;
    min-width: 0 !important;
    margin-inline: auto !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   4. Page Header niemals unter den Header schieben
   --------------------------------------------------------- */

main.site-main > .page-header,
main.site-main > .page-hero {
    position: relative !important;
    z-index: 6 !important;
    margin-top: 0 !important;
}

main.site-main > .page-header:first-child,
main.site-main > .page-hero:first-child {
    scroll-margin-top: calc(var(--mhl-header-space) + 1rem) !important;
}


/* ---------------------------------------------------------
   5. Direkte Seiteninhalte nicht künstlich verengen
   --------------------------------------------------------- */

main.site-main > .page-header + *,
main.site-main > .page-hero + * {
    min-width: 0 !important;
}

main.site-main img,
main.site-main video,
main.site-main iframe {
    max-width: 100%;
}


/* ---------------------------------------------------------
   6. Tidenplaner übernimmt exakt dieselbe breite
      Seitengeometrie
   --------------------------------------------------------- */

.tide-page-shell {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   7. Küstenkodex / r207 explizit nicht verschlechtern
   --------------------------------------------------------- */

.r207-policy-shell,
.r207-gallery-shell {
    width: 100%;
    max-width: none;
    min-width: 0;
}


/* ---------------------------------------------------------
   8. Typografie: keine künstliche Verkleinerung
   --------------------------------------------------------- */

main.site-main {
    font-size: 1rem;
}

main.site-main button,
main.site-main input,
main.site-main textarea,
main.site-main select {
    font-size: inherit;
}


/* ---------------------------------------------------------
   9. Große Desktop-Ansichten
   --------------------------------------------------------- */

@media (min-width: 1201px) {
    main.site-main {
        padding-top: clamp(18px, 2.2vw, 36px) !important;
        padding-bottom: clamp(72px, 8vw, 130px) !important;
    }
}


/* ---------------------------------------------------------
   10. Tablet
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   11. Mobile
   --------------------------------------------------------- */


/* =========================================================
   r223 FINAL – Header/Viewport-Geometrie
   ========================================================= */

/*
 * Der Header ist fixed.
 * Der Hauptinhalt bekommt deshalb einen eindeutigen,
 * globalen Sicherheitsabstand.
 */

:root {
    --mhl-header-clearance: 128px;
}

html {
    scroll-padding-top: var(--mhl-header-clearance) !important;
}

body {
    padding-top: var(--mhl-header-clearance) !important;
}


/*
 * Der erste Seiteninhalt darf niemals direkt unter
 * der Headerkante kleben.
 */

main.site-main {
    padding-top: 24px !important;
}


/*
 * Page Header selbst bekommt keinen negativen Versatz.
 * Der zusätzliche Abstand wird oberhalb des Headers
 * und nicht innerhalb seiner Inhalte erzeugt.
 */

main.site-main > .page-header,
main.site-main > .page-hero {
    margin-top: 0 !important;
    transform: none !important;
}


/*
 * Desktop: großzügige, aber kontrollierte Seitenfläche.
 */

@media (min-width: 1201px) {
    main.site-main {
        width: min(
            calc(100% - clamp(20px, 3vw, 56px)),
            1720px
        ) !important;

        max-width: 1720px !important;
        padding-top: 24px !important;
    }
}


/*
 * Tablet
 */


/*
 * Mobile
 */


/*
 * Das Grid selbst darf nicht die natürliche Kartenhöhe
 * erzwingen.
 */
.home-content-collapsible {
    align-items: start !important;
}

/*
 * Karte grundsätzlich ohne künstliche Höhenbegrenzung.
 */
.home-content-collapsible > .home-content-card {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-height: none !important;
    align-self: start !important;

    /* Hover darf die Karte nicht verschieben. */
    transform: none !important;
    translate: none !important;
    top: auto !important;
}

/*
 * Geöffnete Karte:
 * vollständiger vorhandener Inhalt, keine Abschneidung.
 */
.home-content-collapsible > .home-content-card.is-expanded {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: start !important;
}

/*
 * Eingeklappte Karte:
 * nur der Header – exakt der bestehende Collapse-Zustand.
 */
.home-content-collapsible > .home-content-card.is-collapsed {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    align-self: start !important;
}

/*
 * Bildbereich einer geöffneten Karte.
 * Bestehende Breite bleibt erhalten, Höhe darf den
 * vorhandenen Inhalt vollständig darstellen.
 */
.home-content-card.is-expanded .home-content-card__image {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.home-content-card.is-expanded .home-content-card__image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/*
 * Keine Positionsanimation beim Mouseover.
 * Schatten/Border dürfen weiterhin reagieren.
 */
.home-content-collapsible > .home-content-card,
.home-content-collapsible > .home-content-card:hover {
    transition:
        box-shadow .22s ease,
        border-color .22s ease,
        background-color .22s ease !important;
}

/*
 * Schrift etwas größer, aber ohne neue Größenlogik
 * für die übrige Homepage.
 */
.home-content-card .home-content-card__title strong,
.home-content-card .home-content-card__title h3 {
    font-size: clamp(1.02rem, .96rem + .18vw, 1.16rem) !important;
    line-height: 1.22 !important;
}

.home-content-card .home-content-card__title small {
    font-size: clamp(.78rem, .74rem + .10vw, .86rem) !important;
    line-height: 1.35 !important;
}

.home-content-card .home-content-card__content {
    min-width: 0 !important;
    font-size: clamp(.88rem, .84rem + .10vw, .96rem) !important;
    line-height: 1.42 !important;
}

/*
 * Desktop: beide Karten bleiben nebeneinander.
 */
@media (min-width: 1200px) {
    .home-content-collapsible {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .home-content-collapsible > .home-content-card {
        width: 100% !important;
    }
}

/*

 */


/*
 * Größere Karten im Desktop durch großzügigere Innenabstände.
 * Die natürliche Höhe des vorhandenen Inhalts bleibt erhalten.
 */
@media (min-width: 1200px) {
    .home-content-collapsible > .home-content-card {
        padding: 0 !important;
    }

    .home-content-card .home-content-card__header {
        min-height: 84px !important;
        padding: 18px 18px !important;
    }

    .home-content-card .home-content-card__content {
        padding-bottom: 18px !important;
    }
}

/*
 * Größere, besser lesbare Überschriften.
 */
.home-content-card .home-content-card__title strong,
.home-content-card .home-content-card__title h3 {
    font-size: clamp(1.05rem, .98rem + .22vw, 1.22rem) !important;
    line-height: 1.22 !important;
}

/*
 * Untertitel.
 */
.home-content-card .home-content-card__title small {
    font-size: clamp(.80rem, .75rem + .12vw, .88rem) !important;
    line-height: 1.35 !important;
}

/*
 * Inhaltstext.
 */
.home-content-card .home-content-card__content {
    font-size: clamp(.90rem, .86rem + .12vw, 1rem) !important;
    line-height: 1.45 !important;
}

/*
 * Keine Positionsänderung beim Mouseover.
 * Nur der visuelle Hover-Effekt des bestehenden Designs bleibt.
 */
.home-content-collapsible > .home-content-card:hover {
    transform: none !important;
    translate: none !important;
}

/*
 * Desktop-Bild etwas größer.
 * Keine feste Kartenhöhe und keine Änderung des
 * Collapse-Zustands.
 */
@media (min-width: 1200px) {
    .home-content-card .home-content-card__content > .home-content-card__image {
        min-height: 150px !important;
    }

    .home-content-card .home-content-card__content > .home-content-card__image img {
        min-height: 150px !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

/*

 */


/*

 * Die bereits vorhandenen 92px/82px Bildhöhen werden nicht
 * überschrieben.
 */


/* ============================================================
   MHL – HOME CARDS FINAL
   Darstellung בלבד – bestehende JS-Logik unangetastet.
   ============================================================ */

/*
 * Desktop:
 * Zwei gleich breite Spalten.
 */
@media (min-width: 1200px) {

    .home-content-collapsible {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 14px !important;
    }

    /*
     * Beide geöffneten Karten bekommen eine gemeinsame,
     * großzügige Mindesthöhe.
     *
     * Ist mehr Inhalt vorhanden, wächst die Karte weiter.
     */
    .home-content-collapsible > .home-content-card.is-expanded {
        min-height: 460px !important;
        height: auto !important;
        max-height: none !important;

        align-self: stretch !important;
        box-sizing: border-box !important;

        overflow: visible !important;
    }

    /*
     * Eingeklappte Karte bleibt kompakt.
     */
    .home-content-collapsible > .home-content-card.is-collapsed {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;

        align-self: start !important;
    }

    /*
     * Der Inhalt einer geöffneten Karte darf vollständig
     * nach unten wachsen.
     */
    .home-content-card.is-expanded .home-content-card__content {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /*
     * Bildbereich.
     */
    .home-content-card.is-expanded .home-content-card__image {
        width: 100% !important;
        min-height: 165px !important;
        overflow: hidden !important;
    }

    .home-content-card.is-expanded .home-content-card__image img {
        display: block !important;
        width: 100% !important;
        height: 165px !important;
        max-width: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;
    }
}

/*
 * Kartenüberschrift etwas größer.
 */
.home-content-card .home-content-card__title strong,
.home-content-card .home-content-card__title h3 {
    font-size: clamp(1.10rem, 1rem + .22vw, 1.24rem) !important;
    line-height: 1.24 !important;
}

/*
 * Untertitel.
 */
.home-content-card .home-content-card__title small {
    font-size: clamp(.82rem, .78rem + .10vw, .90rem) !important;
    line-height: 1.35 !important;
}

/*
 * Inhaltstext / Einträge.
 */
.home-content-card .home-content-card__content {
    font-size: clamp(.92rem, .88rem + .10vw, 1rem) !important;
    line-height: 1.48 !important;
}

/*
 * Kleine Zusatztexte.
 */
.home-content-card .home-content-card__content small {
    font-size: .84rem !important;
    line-height: 1.38 !important;
}

/*
 * Keine Bewegung der Karten beim Hover.
 */
.home-content-collapsible > .home-content-card:hover {
    transform: none !important;
    translate: none !important;
}

/*
 * Buttons gut lesbar.
 */
.home-content-card .btn,
.home-content-card button {
    font-size: .92rem !important;
}

/*

 * eine Spalte, vollständige natürliche Höhe.
 */


/*

 */


/* ============================================================
   MHL – HOME CARDS FINAL
   Alle Inhalte sichtbar / beide Karten exakt gleich hoch
   Collapse/Expand bleibt unangetastet
   ============================================================ */

/*
 * Desktop:
 * Zwei identisch breite Karten.
 */
@media (min-width: 1200px) {

    .home-content-collapsible {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 14px !important;
        grid-auto-rows: 1fr !important;
    }

    /*
     * GEÖFFNETE KARTEN
     *
     * Höhe bewusst großzügig:
     * Header + Bild + 3 Download-/Logbuch-Einträge.
     */
    .home-content-collapsible
        > .home-content-card:not(.is-collapsed) {

        height: 540px !important;
        min-height: 540px !important;
        max-height: 540px !important;

        align-self: stretch !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /*
     * Kartenkopf.
     */
    .home-content-card
        .home-content-card__header {

        flex: 0 0 78px !important;
        min-height: 78px !important;
        box-sizing: border-box !important;
    }

    /*
     * Der eigentliche geöffnete Inhaltsbereich
     * bekommt den kompletten Rest der Karte.
     */
    .home-content-card
        .home-content-card__content {

        flex: 1 1 auto !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    /*
     * Bildbereich.
     */
    .home-content-card
        .home-content-card__image {

        flex: 0 0 170px !important;

        width: 100% !important;
        height: 170px !important;
        min-height: 170px !important;
        max-height: 170px !important;

        overflow: hidden !important;
    }

    .home-content-card
        .home-content-card__image img {

        display: block !important;

        width: 100% !important;
        height: 170px !important;
        min-height: 170px !important;
        max-height: 170px !important;

        object-fit: cover !important;
        object-position: center center !important;
    }

    /*
     * Sämtliche Listenbereiche dürfen nicht künstlich
     * kleiner werden.
     */
    .home-content-card
        .home-content-card__content > * {

        max-height: none !important;
    }

    /*
     * Download-Zeilen.
     */
    .home-content-card
        .download-row,
    .home-content-card
        .download-item {

        min-height: 50px !important;
        height: auto !important;
        max-height: none !important;

        box-sizing: border-box !important;
    }

    /*
     * Logbuch-Einträge.
     */
    .home-content-card
        .logbook-entry,
    .home-content-card
        .news-item {

        min-height: 72px !important;
        height: auto !important;
        max-height: none !important;

        box-sizing: border-box !important;
    }

    /*
     * Typografie etwas größer.
     */
    .home-content-card
        .home-content-card__title strong,
    .home-content-card
        .home-content-card__title h3 {

        font-size: 1.18rem !important;
        line-height: 1.25 !important;
    }

    .home-content-card
        .home-content-card__title small {

        font-size: .88rem !important;
        line-height: 1.35 !important;
    }

    .home-content-card
        .home-content-card__content {

        font-size: .96rem !important;
        line-height: 1.48 !important;
    }

    .home-content-card
        .home-content-card__content small {

        font-size: .84rem !important;
        line-height: 1.38 !important;
    }

    /*
     * Kein Verrutschen beim Hover.
     */
    .home-content-collapsible
        > .home-content-card:hover {

        transform: none !important;
        translate: none !important;
    }
}

/*
 * Eingeklappt:
 * kompakt bleiben, keine erzwungene 540px-Höhe.
 */
@media (min-width: 1200px) {

    .home-content-collapsible
        > .home-content-card.is-collapsed {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        align-self: start !important;
    }
}

/*

 * natürliche Höhe.
 */


/* ============================================================
   MHL – STORY BACKGROUND: PRELOADER
   ============================================================ */

body.scene-stories {
    background-color: #06283a !important;
    background-image: url('../backgrounds/preloader.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

body.scene-stories .site-backdrop {
    background-image: url('../backgrounds/preloader.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

body.scene-stories::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0 !important;
    pointer-events: none !important;

    background:
        linear-gradient(
            180deg,
            rgba(3, 28, 43, .14),
            rgba(3, 28, 43, .30)
        ),
        url('../backgrounds/preloader.webp') !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;

    filter: none !important;
    transform: none !important;
}

body.scene-stories > header,
body.scene-stories > main,
body.scene-stories > footer,
body.scene-stories > .site-header,
body.scene-stories > .site-main,
body.scene-stories > .site-footer {
    position: relative !important;
    z-index: 5 !important;
}


/* ============================================================
   MHL – STORY FULL PAGE BACKGROUND
   preloader.webp
   ============================================================ */

body.scene-stories {
    position: relative !important;
    background: #06283a url('../backgrounds/preloader.webp') center center / cover no-repeat fixed !important;
}

/* Vollflächige Bildschicht hinter dem gesamten Seiteninhalt */
body.scene-stories::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0 !important;
    pointer-events: none !important;

    background-image: url('../backgrounds/preloader.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;

    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

/* Kein zweites dunkles Bild über den Hintergrund legen */
body.scene-stories .site-backdrop {
    background: transparent !important;
    background-image: none !important;
}

/* Inhalt sicher oberhalb des Hintergrundes */
body.scene-stories > header,
body.scene-stories > main,
body.scene-stories > footer,
body.scene-stories > .site-header,
body.scene-stories > .site-main,
body.scene-stories > .site-footer {
    position: relative !important;
    z-index: 5 !important;
}

/* ============================================================
   MHL FINAL STORY BACKGROUND
   ============================================================ */

html,
body.scene-stories {
    min-height: 100% !important;
}

body.scene-stories {
    background-color: #06283a !important;
    background-image: url('../backgrounds/preloader.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* Bestehende zentrale Backdrop-Ebene vollständig neutralisieren */
body.scene-stories .site-backdrop,
body.scene-stories .site-backdrop::before,
body.scene-stories .site-backdrop::after {
    background: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
}

/* Eigene feste Bildebene */
body.scene-stories::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;

    background-image: url('../backgrounds/preloader.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;

    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

/* Alle echten Seiteninhalte vor den Hintergrund */
body.scene-stories > .site-header,
body.scene-stories > header,
body.scene-stories > .site-main,
body.scene-stories > main,
body.scene-stories > .site-footer,
body.scene-stories > footer {
    position: relative !important;
    z-index: 5 !important;
}

/* Auch der Story-Inhalt selbst */
body.scene-stories .north-journal,
body.scene-stories .north-journal > .page-header,
body.scene-stories .north-journal__hero,
body.scene-stories .north-journal__featured,
body.scene-stories .north-journal__thoughts,
body.scene-stories .north-journal__catalog,
body.scene-stories .north-journal__entries {
    position: relative !important;
    z-index: 5 !important;
}

/* ============================================================
   MHL – CLEAN STORY BACKGROUND
   ============================================================ */

/*
 * Die generischen rotierenden Szenen-Backdrops werden auf
 * Story-Seiten vollständig ausgeblendet.
 */
body.scene-stories .site-backdrop,
body.scene-stories .site-backdrop.site-backdrop--a,
body.scene-stories .site-backdrop.site-backdrop--b {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: none !important;
    background-image: none !important;
}

/*
 * Die eigentliche Seite bleibt transparent, damit der feste
 * Story-Hintergrund sichtbar wird.
 */
html {
    background: #06283a !important;
}

body.scene-stories {
    background-color: #06283a !important;
    background-image: url('../backgrounds/preloader.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/*
 * Kein vollflächiger Hintergrund auf main, der das Bild
 * verdecken könnte.
 */
body.scene-stories main#content.site-main,
body.scene-stories main#content.site-main.shell,
body.scene-stories .site-main,
body.scene-stories .site-main.shell {
    background-color: transparent !important;
    background-image: none !important;
}

/*
 * Der äußere Story-Container bleibt ebenfalls transparent.
 * Die eigentlichen Karten behalten ihre vorhandenen Hintergründe.
 */
body.scene-stories .north-journal {
    background: transparent !important;
}

/*
 * Header / Inhalt / Footer über dem Hintergrund halten.
 */
body.scene-stories > header,
body.scene-stories > main,
body.scene-stories > footer,
body.scene-stories > .site-header,
body.scene-stories > .site-main,
body.scene-stories > .site-footer {
    position: relative !important;
    z-index: 5 !important;
}


/* ============================================================
   MHL – NEWS / LOGBOOK FULL PAGE PRELOADER BACKGROUND
   ============================================================ */

body.scene-logbook.news-show-page {
    background-color: #06283a !important;
    background-image: url('../backgrounds/preloader.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* Rotierenden Szenen-Hintergrund auf Artikelseiten ausblenden */
body.scene-logbook.news-show-page .site-backdrop,
body.scene-logbook.news-show-page .site-backdrop.site-backdrop--a,
body.scene-logbook.news-show-page .site-backdrop.site-backdrop--b {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: none !important;
    background-image: none !important;
}

/* Seitenfläche transparent */
body.scene-logbook.news-show-page main#content.site-main,
body.scene-logbook.news-show-page main#content.site-main.shell,
body.scene-logbook.news-show-page .site-main,
body.scene-logbook.news-show-page .site-main.shell {
    background: transparent !important;
    background-image: none !important;
}

/* Artikel-Wrapper transparent – Karten behalten ihre eigenen Flächen */
body.scene-logbook.news-show-page .news-show-page,
body.scene-logbook.news-show-page .north-journal {
    background: transparent !important;
}

/* Inhalt vor den Hintergrund */
body.scene-logbook.news-show-page > header,
body.scene-logbook.news-show-page > main,
body.scene-logbook.news-show-page > footer,
body.scene-logbook.news-show-page > .site-header,
body.scene-logbook.news-show-page > .site-main,
body.scene-logbook.news-show-page > .site-footer {
    position: relative !important;
    z-index: 5 !important;
}


/* ============================================================
   MHL – LOGBOOK FINAL LAYOUT
   ============================================================ */

/*
 * HEADER:
 * Der feste Header soll wieder direkt oben am Viewport sitzen.
 * Der Bildhintergrund bleibt darunter sichtbar.
 */
body.scene-logbook.news-show-page .site-header {
    top: 0 !important;
    margin-top: 0 !important;
}

/*
 * Der Seiteninhalt bekommt weiterhin den korrekten Abstand
 * unter dem festen Header.
 */
body.scene-logbook.news-show-page .site-main {
    padding-top: clamp(18px, 2.2vw, 36px) !important;
}

/*
 * DESKTOP:
 * Linke Storybox und rechte Einordnungsbox auf exakt gleiche
 * Höhe bringen.
 */
@media (min-width: 1200px) {

    body.scene-logbook.news-show-page .north-journal {
        align-items: stretch !important;
    }

    /*
     * Alle zweispaltigen Inhaltsraster strecken.
     */
    body.scene-logbook.news-show-page
    .north-journal__featured-grid,
    body.scene-logbook.news-show-page
    .north-journal__catalog-grid {
        align-items: stretch !important;
        grid-auto-rows: 1fr !important;
    }

    /*
     * Story-Reader als vollhohe linke Box.
     */
    body.scene-logbook.news-show-page
    .north-journal__story-reader {
        height: 100% !important;
        min-height: 100% !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }

    /*
     * Die rechte Info-Spalte ebenfalls über die komplette
     * verfügbare Höhe ziehen.
     */
    body.scene-logbook.news-show-page
    .north-journal__story-reader + * {
        height: 100% !important;
        min-height: 100% !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }

    /*
     * Falls die beiden Boxen in einem direkten Grid-Parent
     * liegen, erzwingen wir gleiche Zeilenhöhe.
     */
    body.scene-logbook.news-show-page
    .north-journal > :is(.content-grid, .two-columns, .story-grid) {
        align-items: stretch !important;
        grid-auto-rows: 1fr !important;
    }
}

/*

 * Keine künstliche Gleichhöhe, damit die Inhalte natürlich
 * untereinander laufen.
 */


/* ============================================================
   MHL – LOGBOOK HEADER FINAL
   ============================================================ */

/*
 * Wichtig:
 * Der vorherige News-Background-Patch hatte den Header
 * versehentlich auf position:relative gesetzt.
 */
body.scene-logbook.news-show-page .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 5000 !important;
}

/*
 * Body darf den Abstand für den festen Header behalten.
 * Dadurch beginnt der Seiteninhalt unterhalb des Headers,
 * während der Header selbst oben bleibt.
 */
body.scene-logbook.news-show-page {
    padding-top: calc(var(--header-offset, 108px) + .35rem) !important;
}

/*
 * Dropdown immer über dem Seiteninhalt.
 */
body.scene-logbook.news-show-page .site-header,
body.scene-logbook.news-show-page .site-header .header-inner,
body.scene-logbook.news-show-page .site-header .site-nav,
body.scene-logbook.news-show-page .site-header .nav-dropdown {
    overflow: visible !important;
}

body.scene-logbook.news-show-page .nav-dropdown {
    position: relative !important;
    z-index: 10000 !important;
}

body.scene-logbook.news-show-page .nav-dropdown__menu {
    position: absolute !important;
    z-index: 10001 !important;
}

/*
 * Der Main-Content bleibt unter dem Header/Dropdown.
 */
body.scene-logbook.news-show-page .site-main {
    position: relative !important;
    z-index: 5 !important;
}

/* ============================================================
   MHL – LOGBOOK EQUAL HEIGHT CONTENT BOXES
   ============================================================ */

@media (min-width: 1200px) {

    /*
     * Die zentrale zweispaltige Story-Zeile soll die Höhe
     * des höchsten Kindes für beide Spalten verwenden.
     */
    body.scene-logbook.news-show-page
    .north-journal__featured-grid {
        display: grid !important;
        align-items: stretch !important;
        grid-auto-rows: 1fr !important;
    }

    /*
     * Die beiden direkten Spalten jeweils vollständig strecken.
     */
    body.scene-logbook.news-show-page
    .north-journal__featured-grid > * {
        height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }

    /*
     * Reader selbst als volle Box.
     */
    body.scene-logbook.news-show-page
    .north-journal__story-reader {
        height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }

    /*
     * Falls der rechte Block keinen festen Klassennamen hat,
     * wird der zweite direkte Grid-Kind ebenfalls gestreckt.
     */
    body.scene-logbook.news-show-page
    .north-journal__featured-grid > :nth-child(2) {
        height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }
}

/*

 */


/* ============================================================
   MHL R228 – LOGBOOK EQUAL HEIGHT
   ============================================================ */

@media (min-width: 1200px) {

    body.scene-logbook.news-show-page
    .north-journal__featured-grid {
        align-items: stretch !important;
    }

    body.scene-logbook.news-show-page
    .north-journal__featured-grid > * {
        align-self: stretch !important;
        box-sizing: border-box !important;
    }
}


/* ============================================================
   MHL R229 – ALLE 3 STORY-KARTEN GLEICHE HÖHE
   ============================================================ */

@media (min-width: 1200px) {

    /*
     * Sämtliche direkten Karten eines Story-Grid-Containers
     * werden auf die Höhe der höchsten Karte gestreckt.
     */
    body.scene-logbook.news-show-page
    .north-journal :is(
        .north-journal__featured-grid,
        .north-journal__thought-grid,
        .north-journal__catalog-grid
    ) {
        display: grid !important;
        align-items: stretch !important;
    }

    body.scene-logbook.news-show-page
    .north-journal :is(
        .north-journal__featured-grid,
        .north-journal__thought-grid,
        .north-journal__catalog-grid
    ) > * {
        height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }

    /*
     * Falls in einem der drei Grids genau drei Karten liegen,
     * gleiche Grid-Reihe erzwingen.
     */
    body.scene-logbook.news-show-page
    .north-journal :is(
        .north-journal__featured-grid,
        .north-journal__thought-grid,
        .north-journal__catalog-grid
    ) {
        grid-auto-rows: 1fr !important;
    }

    /*
     * Alle drei Karten erhalten einen identischen Innenaufbau,
     * damit die Höhe nicht durch unterschiedliche Flex-Regeln
     * wieder auseinanderläuft.
     */
    body.scene-logbook.news-show-page
    .north-journal :is(
        .north-journal__featured-grid,
        .north-journal__thought-grid,
        .north-journal__catalog-grid
    ) > * {
        display: flex !important;
        flex-direction: column !important;
    }
}

/*
 * Auf kleineren Displays nicht künstlich strecken.
 */


/* ============================================================
   MHL – 3 RECHTE STORY-SIDE-CARDS EXAKT GLEICHE HÖHE
   ============================================================ */

@media (min-width: 1200px) {

    /*
     * Die rechte Spalte besteht exakt aus drei
     * .r175-side-card-Elementen.
     */
    body.scene-logbook.news-show-page
    .r175-story-side {
        display: grid !important;
        grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        height: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    /*
     * Jede der drei Karten erhält exakt dieselbe
     * Grid-Zeilenhöhe.
     */
    body.scene-logbook.news-show-page
    .r175-story-side > .r175-side-card {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: stretch !important;
        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;
    }
}

/*

 */


/* ============================================================
   MHL – FINAL BOTTOM STORY PAIR
   Nur linker Story-Kasten + rechtes Gesamt-Aside
   ============================================================ */

@media (min-width: 1200px) {

    body.scene-logbook.news-show-page
    .r175-story-side {
        align-self: stretch !important;
        box-sizing: border-box !important;
    }

    body.scene-logbook.news-show-page
    .r175-story-side > .r175-side-card {
        box-sizing: border-box !important;
    }
}


/* ============================================================
   MHL – RIGHT STORY CARDS TEXT FINAL
   Einordnung / Weiterlesen / Lesetipp
   ============================================================ */

body.scene-logbook.news-show-page
.r175-story-side > .r175-side-card {

    /* Inhalt näher an den linken Kartenrand */
    padding-left: 16px !important;

    /*
     * Rechts etwas mehr Raum lassen, damit der Blocksatz
     * nicht unnötig eng wird.
     */
    padding-right: 14px !important;

    box-sizing: border-box !important;
}

/*
 * Fließtext in ALLEN drei Karten im Blocksatz.
 */
body.scene-logbook.news-show-page
.r175-story-side > .r175-side-card p {

    text-align: justify !important;
    text-justify: inter-word !important;

    /*
     * Keine zusätzlichen Einrückungen.
     */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/*
 * Überschriften ebenfalls sauber links ausrichten.
 */
body.scene-logbook.news-show-page
.r175-story-side > .r175-side-card h3,
body.scene-logbook.news-show-page
.r175-story-side > .r175-side-card .eyebrow {

    text-align: left !important;
    margin-left: 0 !important;
}

/*
 * Die drei Weiterlesen-Buttons bleiben bündig zur
 * linken Textkante.
 */
body.scene-logbook.news-show-page
.r175-story-side > .r175-side-card .r175-side-links {

    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.scene-logbook.news-show-page
.r175-story-side > .r175-side-card .r175-side-links .btn {

    width: 100% !important;
    box-sizing: border-box !important;
}


/* ============================================================
   MHL – STORY HEADING ALIGNMENT
   ============================================================ */

/*
 * GROSSER STORY-KASTEN:
 * "DIE GANZE GESCHICHTE" exakt auf die Textkante
 * des Story-Inhalts setzen.
 */
body.scene-logbook.news-show-page
.north-journal__story-reader > .eyebrow,
body.scene-logbook.news-show-page
.north-journal__story-reader > .story-kicker {
    margin-left: 90px !important;
    padding-left: 0 !important;
    text-align: left !important;
}

/*
 * RECHTE 3 KARTEN:
 * Eyebrow, Überschrift und Fließtext exakt auf
 * dieselbe linke Kante setzen.
 */
body.scene-logbook.news-show-page
.r175-story-side > .r175-side-card {
    padding-left: 16px !important;
    padding-right: 14px !important;
}

body.scene-logbook.news-show-page
.r175-story-side > .r175-side-card .eyebrow,

body.scene-logbook.news-show-page
.r175-story-side > .r175-side-card h3,

body.scene-logbook.news-show-page
.r175-story-side > .r175-side-card p,

body.scene-logbook.news-show-page
.r175-story-side > .r175-side-card .r175-side-links {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

/*
 * Fließtexte bleiben im Blocksatz.
 */
body.scene-logbook.news-show-page
.r175-story-side > .r175-side-card p {
    text-align: justify !important;
    text-justify: inter-word !important;
}


/* ============================================================
   MHL – STORY READER EYEBROW ALIGNMENT
   ============================================================ */

@media (min-width: 1200px) {

    /*
     * Das Label "DIE GANZE GESCHICHTE" muss exakt auf
     * derselben linken Kante wie der eigentliche Storytext
     * beginnen.
     *
     * Der Storytext sitzt innerhalb des Reader-Inhalts.
     * Deshalb wird das äußere Label nicht mehr pauschal
     * mit einem großen margin-left verschoben.
     */
    body.scene-logbook.news-show-page
    .r175-story-reader > .eyebrow,
    body.scene-logbook.news-show-page
    .r175-story-reader > .story-kicker {
        margin-left: 0 !important;
        padding-left: 90px !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    /*
     * Die drei rechten Karten bleiben auf ihrer bisherigen
     * linken Textkante.
     */
    body.scene-logbook.news-show-page
    .r175-story-side > .r175-side-card .eyebrow,
    body.scene-logbook.news-show-page
    .r175-story-side > .r175-side-card h3,
    body.scene-logbook.news-show-page
    .r175-story-side > .r175-side-card p {
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-align: left !important;
    }

    /*
     * Fließtext rechts weiterhin Blocksatz.
     */
    body.scene-logbook.news-show-page
    .r175-story-side > .r175-side-card p {
        text-align: justify !important;
        text-justify: inter-word !important;
    }
}

/* ============================================================
   MHL – STORY HEADING CLEAN FINAL
   ============================================================ */

@media (min-width: 1200px) {

    /*
     * DIE GANZE GESCHICHTE:
     * exakt auf dieselbe linke Textkante wie
     * r175-story-body__content.
     *
     * Der Storytext sitzt 90px innerhalb der Karte.
     */
    body.scene-logbook.news-show-page
    .r175-story-body > .eyebrow {

        margin-left: 90px !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        text-align: left !important;
        transform: none !important;

        box-sizing: border-box !important;
    }

    /*
     * Story-Inhalt selbst unverändert lassen.
     */
    body.scene-logbook.news-show-page
    .r175-story-body__content {

        margin-left: 0 !important;
        text-align: left !important;
    }

    /*
     * Die drei rechten Karten bleiben exakt bündig.
     */
    body.scene-logbook.news-show-page
    .r175-story-side > .r175-side-card .eyebrow,
    body.scene-logbook.news-show-page
    .r175-story-side > .r175-side-card h3,
    body.scene-logbook.news-show-page
    .r175-story-side > .r175-side-card p {

        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /*
     * Rechte Fließtexte weiterhin Blocksatz.
     */
    body.scene-logbook.news-show-page
    .r175-story-side > .r175-side-card p {

        text-align: justify !important;
        text-justify: inter-word !important;
    }
}

/* ============================================================
   MHL – NUR STORY-ÜBERSCHRIFT BÜNDIG
   ============================================================ */

@media (min-width: 1200px) {

    /*
     * Der eigentliche Storytext bleibt in seiner bisherigen
     * Position.
     */
    body.scene-logbook.news-show-page
    .r175-story-body__content {
        margin-left: 90px !important;
    }

    /*
     * NUR "DIE GANZE GESCHICHTE" wird auf dieselbe
     * linke Textkante gesetzt.
     */
    body.scene-logbook.news-show-page
    .r175-story-body > .eyebrow {
        margin-left: 90px !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
        transform: none !important;
    }
}


/* MHL V34 DESKTOP FIX – SKIP LINK + STORY HEADER */

/*
 * Desktop-only accessibility skip link:
 * standardmäßig unsichtbar/off-screen,
 * bei echtem Tastaturfokus sichtbar.
 */
a.skip-link {
    position: fixed !important;
    top: -6rem !important;
    left: 1rem !important;

    display: block !important;
    width: max-content !important;
    max-width: calc(100vw - 2rem) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    z-index: 2147483000 !important;
}

a.skip-link:focus,
a.skip-link:focus-visible {
    top: 1rem !important;
    left: 1rem !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/*
 * Küstengeschichten:
 * r223 setzt direkte Story-Header auf relative.
 * Der globale Desktop-Header muss jedoch auch hier
 * fest am oberen Bildschirmrand bleiben.
 */
body.scene-stories > header.site-header,
body.scene-stories > .site-header,
body.scene-stories header[data-site-header],
body.scene-stories [data-site-header] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    inset-block-start: 0 !important;

    width: 100% !important;
    margin: 0 !important;

    z-index: 2000 !important;
}

/*
 * Story-Inhalt bleibt unterhalb des festen Headers.
 * Die bestehende Header-Höhenmessung darf weiterhin
 * den tatsächlichen Offset liefern.
 */
body.scene-stories main#content.site-main {
    position: relative !important;
}