/* MeerHeimatLiebe 2.5.2-r46
   Footer bereinigt, Impressum wieder geschützt sichtbar,
   Seitenbreiten harmonisiert und Admin-Leitstand typografisch veredelt. */

:root {
  --r45-content-width: 1500px;
}

/* Footer unten ruhiger und ohne die linken Rechtslinks. */
.footer-legal-nav {
  display: none !important;
}

.footer-inner {
  display: grid !important;
  justify-items: center !important;
  gap: .42rem !important;
  text-align: center !important;
}

.footer-inner .copyright,
.footer-inner .image-credit {
  margin: 0 !important;
}

/* Impressum: Anschrift wie früher geschützt, kurz sichtbar und dann wieder verborgen. */
.imprint-contact-card address {
  display: grid;
  gap: .58rem;
}

.imprint-private-address {
  display: grid;
  gap: .35rem;
  justify-items: start;
}

.private-address__hint {
  display: block;
  color: #9de6f1;
  font-size: .76rem;
  line-height: 1.45;
}

/* Schutz- und Inhaltsseiten auf die großzügige Breite des Tidenplaners bringen. */
.reading-shell,
.reading-shell.prose-page,
.prose-page.protection-guide,
.site-main > .reading-shell,
.site-main > .protection-guide,
.site-main > section,
.site-main > article,
.site-main > form,
.site-main > nav,
.page-header {
  width: min(100%, var(--r45-content-width)) !important;
}

.reading-shell,
.prose-page.protection-guide {
  max-width: none !important;
}

.prose-page p,
.prose-page ul,
.prose-page ol,
.prose-page .notice-callout,
.prose-page .legal-mini-list {
  max-width: none !important;
}

/* Footer-Segelboot sichtbar nach unten setzen und das Clipping lösen. */
.site-footer {
  min-height: 270px !important;
  padding-top: 11.35rem !important;
}

.shoreline {
  height: 184px !important;
  overflow: visible !important;
}

.shoreline > span {
  bottom: 18px !important;
}

.shore-sailboat {
  bottom: 13px !important;
  width: 66px !important;
  height: 66px !important;
}

.shore-sailboat-svg {
  width: 66px !important;
  height: 66px !important;
  overflow: visible !important;
}

/* Admin-Leitstand: Karten und Texte klar getrennt, mit Abstand und professionellem Rhythmus. */
.dashboard-menu > *,
.admin-grid > *,
.panel-grid > *,
.activity-grid > *,
.metric-grid > *,
.admin-dashboard-grid > *,
.admin-nav > *,
.stats-strip > div {
  min-width: 0 !important;
}

.dashboard-menu > *,
.admin-grid > *,
.panel-grid > *,
.activity-grid > *,
.metric-grid > *,
.admin-dashboard-grid .glass-card,
.admin-dashboard-grid a,
.admin-nav > * {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: .4rem !important;
}

.dashboard-menu strong,
.admin-grid strong,
.panel-grid strong,
.activity-grid strong,
.metric-grid strong,
.admin-dashboard-grid strong,
.admin-nav strong,
.stats-strip strong {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .55rem !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.dashboard-menu .mhl-admin-copy,
.admin-grid .mhl-admin-copy,
.panel-grid .mhl-admin-copy,
.activity-grid .mhl-admin-copy,
.metric-grid .mhl-admin-copy,
.admin-dashboard-grid .mhl-admin-copy,
.admin-nav .mhl-admin-copy,
.stats-strip .mhl-admin-copy {
  display: block !important;
  margin-top: .12rem !important;
  color: var(--muted, #c8dbe2) !important;
  line-height: 1.55 !important;
}

.stats-strip > div {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.stats-strip strong {
  margin-bottom: .16rem !important;
}








/* Alle primären Seitencontainer zuverlässig zentrieren. */
.site-main,
.site-main > section,
.site-main > article,
.site-main > form,
.site-main > nav,
.site-main > .page-header,
.site-main > .reading-shell,
.site-main > .protection-guide,
.page-header,
.reading-shell,
.prose-page,
.glass-card.prose-page {
  margin-inline: auto !important;
}

.site-main > section,
.site-main > article,
.site-main > form,
.site-main > nav,
.page-header,
.reading-shell,
.prose-page.protection-guide {
  max-width: var(--r45-content-width, 1500px) !important;
}

/* Inhalt in breiten Textboxen bleibt lesbar, aber der Kasten selbst steht mittig. */
.prose-page > h2,
.prose-page > h3,
.prose-page > p,
.prose-page > ul,
.prose-page > ol,
.prose-page > .notice-callout {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  border-radius: 18px !important;
}
/* ===== r46 Komplettkorrektur: echtes Mobile-/Tablet-Layout, volle Seitenbreite,
   unverkrampfte Überschriften, geschütztes Impressum und Kapitäns-Login ===== */

:root {
  --r46-shell: 1760px;
  --r46-gutter: clamp(.75rem, 2.2vw, 2.6rem);
  --r46-header-desktop: 92px;
}

/* Alle Seiten nutzen den verfügbaren Platz konsistent und zentriert. */
.shell,
.site-main {
  width: min(calc(100% - (var(--r46-gutter) * 2)), var(--r46-shell)) !important;
  max-width: var(--r46-shell) !important;
  margin-inline: auto !important;
}

.site-main > section,
.site-main > article,
.site-main > form,
.site-main > nav,
.site-main > .page-header,
.site-main > .reading-shell,
.site-main > .protection-guide,
.page-header,
.reading-shell,
.prose-page,
.glass-card.prose-page,
.attractions-planner,
.tide-page,
.dashboard-shell,
.admin-shell,
.forum-shell,
.gallery-shell,
.chat-shell,
.member-shell {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}


.feature-grid,
.gallery-grid,
.member-grid,
.dashboard-menu,
.metric-grid,
.admin-grid,
.panel-grid,
.activity-grid,
.protection-grid,
.imprint-contact-grid,
.rank-grid,
.forum-grid,
.download-grid,
.cards-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)) !important;
  gap: clamp(.8rem, 1.35vw, 1.35rem) !important;
  align-items: stretch !important;
}

/* Keine unerwünschten Wort- oder Silbentrennungen. */
.page-header h1,
.hero h1,
.page-hero h1,
.article h1,
.goodbye-card h1,
.rank-hero h1,
.forum-ranks h1 {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-wrap: balance !important;
  max-width: none !important;
}

.page-header p,
.hero p,
.page-hero p,
.prose-page p,
.prose-page li {
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

@media (min-width: 1200px) {
  .page-header h1,
  .rank-hero h1,
  .forum-ranks h1 {
    white-space: nowrap !important;
    font-size: clamp(2.35rem, 4.4vw, 4.8rem) !important;
    line-height: .98 !important;
  }
}

/* Impressum wie in r38: Anschrift bleibt am Anbieter, ist zunächst blurred,
   wird nur auf bewussten Klick kurz sichtbar und danach automatisch verborgen. */
.imprint-contact-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.imprint-contact-card {
  min-width: 0;
}

.imprint-contact-card address {
  display: grid !important;
  gap: .75rem !important;
  font-style: normal !important;
}

.imprint-private-address {
  display: grid;
  gap: .4rem;
  justify-items: start;
  width: 100%;
}

.imprint-private-address .private-address {
  width: min(100%, 470px);
  min-height: 88px;
  display: grid !important;
  align-content: center;
  border-radius: 14px !important;
}

.private-address__hint {
  color: #a9dce5 !important;
  font-size: .76rem !important;
  line-height: 1.45 !important;
}

/* Kapitäns-Login farblich abheben. */
.icon-captain .captain-face,
.icon-captain .captain-neck {
  stroke: #f1d1a4;
}

.icon-captain .captain-cap,
.icon-captain .captain-badge {
  stroke: #f3c96f;
}

.icon-captain .captain-coat {
  stroke: #84e5f2;
}

.icon-captain .captain-pipe {
  stroke: #d88a5d;
}

.nav-account.mhl-captain-login,
.mhl-captain-login {
  background: linear-gradient(145deg, rgba(18, 116, 143, .86), rgba(6, 61, 87, .92)) !important;
  border-color: rgba(150, 237, 247, .5) !important;
  box-shadow: 0 9px 24px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.mhl-captain-login .icon-captain {
  width: 25px !important;
  height: 25px !important;
  flex: 0 0 25px;
}








/*
 * ============================================================
 * MHL IMPRESSUM FIX V6
 * ============================================================
 *
 * Private Anschrift:
 *
 * AUTH:
 *   bestehende private-address / Reveal-Funktion unverändert
 *
 * GUEST:
 *   keine echte Anschrift im HTML
 *   maskierter Bereich
 *   Hover / Focus zeigt Login-Hinweis
 *   Klick führt zur Anmeldung
 *
 * Layout:
 *   Impressum-Kontaktkarte darf horizontal nicht ausbrechen.
 *
 * Nur Impressum / Desktop-Kontext.
 * Kein globaler Mobile-/Tablet-Fix.
 * ============================================================
 */

/* ------------------------------------------------------------
 * Container-Sicherheit
 * ------------------------------------------------------------ */

.scene-legal .imprint-contact-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.scene-legal .imprint-contact-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.scene-legal .imprint-contact-card {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.scene-legal .imprint-contact-card > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.scene-legal .imprint-contact-card address {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
}

.scene-legal .imprint-contact-card a,
.scene-legal .imprint-contact-card button,
.scene-legal .imprint-contact-card input,
.scene-legal .imprint-contact-card textarea,
.scene-legal .imprint-contact-card select {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.scene-legal .imprint-private-address {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* ------------------------------------------------------------
 * Guest-Bereich
 * ------------------------------------------------------------ */

.scene-legal .imprint-private-address--guest {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.scene-legal .private-address--guest {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;

    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    user-select: none;

    border-radius: inherit;
}

/*
 * Wichtig:
 * Der Blur liegt NUR auf dem maskierten Inhalt.
 * Dadurch bleibt der Login-Hinweis scharf.
 */

.scene-legal .private-address--guest .private-address__masked {
    display: block;
    filter: blur(5px);
    user-select: none;
}

.scene-legal .private-address--guest .private-address__guest-hint {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem;
    box-sizing: border-box;

    text-align: center;
    font-weight: 700;
    line-height: 1.35;

    opacity: 0;
    pointer-events: none;

    background: rgba(255, 255, 255, 0.92);
    border-radius: inherit;

    transition: opacity 0.18s ease;
}

.scene-legal .private-address--guest:hover .private-address__guest-hint,
.scene-legal .private-address--guest:focus-visible .private-address__guest-hint {
    opacity: 1;
}

.scene-legal .private-address--guest:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* ============================================================
   MHL IMPRESSUM – PRIVATE ADDRESS GUEST V11
   ============================================================
   Gast:
   - nur der künstliche Adressinhalt wird geblurt
   - keine █-Zeichen
   - keine weißen Balken
   - Label bleibt scharf
   - Login-Hinweis bleibt scharf
   - Klick führt weiterhin zum Login
   ============================================================ */

/* Äußerer Gastbereich */
.scene-legal .imprint-private-address--guest {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Klickfläche */
.scene-legal .imprint-private-address--guest .private-address--guest {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    max-width: 470px !important;
    min-width: 0 !important;
    min-height: 88px !important;

    box-sizing: border-box !important;
    padding: 14px 18px !important;

    overflow: hidden !important;

    text-decoration: none !important;
    cursor: pointer !important;

    border-radius: 14px !important;

    background: rgba(255,255,255,0.055) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;

    filter: none !important;
}

/* Hover / Fokus der gesamten Fläche */
.scene-legal .imprint-private-address--guest .private-address--guest:hover,
.scene-legal .imprint-private-address--guest .private-address--guest:focus-visible {
    background: rgba(255,255,255,0.085) !important;
    border-color: rgba(255,255,255,0.38) !important;
}

/* Gesamter maskierter Container: KEIN Blur */
.scene-legal .imprint-private-address--guest .private-address__masked {
    position: relative !important;

    display: block !important;

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

    background: none !important;
    border: 0 !important;
    box-shadow: none !important;

    color: rgba(255,255,255,0.92) !important;

    line-height: 1.45 !important;

    pointer-events: none !important;
}

/* "Private Anschrift" bleibt scharf */
.scene-legal .imprint-private-address--guest
.private-address__masked-label {
    display: block !important;

    margin-bottom: 5px !important;

    font-weight: 700 !important;

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

/* ============================================================
   NUR DER FAKE-ADRESSINHALT WIRD GEBLURT
   ============================================================ */

.scene-legal .imprint-private-address--guest
.private-address__masked-address {
    display: inline-block !important;

    filter: blur(6px) !important;
    opacity: 0.72 !important;

    background: none !important;
    border: 0 !important;
    box-shadow: none !important;

    color: rgba(255,255,255,0.92) !important;

    line-height: 1.6 !important;

    pointer-events: none !important;

    user-select: none !important;

    transform: translateZ(0);
}

/* ============================================================
   LOGIN-HINWEIS
   Komplett scharf und ohne weißen Balken.
   ============================================================ */

.scene-legal .imprint-private-address--guest
.private-address__guest-hint {
    position: absolute !important;
    inset: 0 !important;

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

    align-items: center !important;
    justify-content: center !important;

    gap: 3px !important;

    padding: 12px 18px !important;

    box-sizing: border-box !important;

    text-align: center !important;

    font-weight: 700 !important;
    line-height: 1.35 !important;

    color: rgba(255,255,255,0.98) !important;

    background: rgba(12,35,46,0.88) !important;

    border-radius: inherit !important;

    opacity: 0 !important;

    filter: none !important;
    pointer-events: none !important;

    transition: opacity 180ms ease !important;
}

/* Hinweis bei Maus */
.scene-legal .imprint-private-address--guest
.private-address--guest:hover
.private-address__guest-hint,

/* Hinweis bei Tastaturfokus */
.scene-legal .imprint-private-address--guest
.private-address--guest:focus-visible
.private-address__guest-hint {
    opacity: 1 !important;
}

/* Fokus sichtbar */
.scene-legal .imprint-private-address--guest
.private-address--guest:focus-visible {
    outline: 2px solid rgba(255,255,255,0.50) !important;
    outline-offset: 3px !important;
}

/* Deutsche Sonderzeichen normal behandeln */
.scene-legal .imprint-private-address--guest
.private-address__masked,
.scene-legal .imprint-private-address--guest
.private-address__masked-address,
.scene-legal .imprint-private-address--guest
.private-address__guest-hint {
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
}


/*
 * ============================================================
 * MHL IMPRESSUM ROUNDED V1
 * ============================================================
 *
 * Nur der äußere Impressum-Container wird abgerundet.
 *
 * Ziel:
 *   section.reading-shell.glass-card.prose-page.protection-guide
 *
 * Innenliegende Karten und das private Adressfeld
 * bleiben unverändert.
 *
 * Kein Mobile-/Tablet-Fix.
 * ============================================================
 */

.scene-legal section.reading-shell.glass-card.prose-page.protection-guide {
    border-radius: 28px !important;
    overflow: hidden !important;
}


/* MHL WIE-GEBAUT PROFESSIONAL V3 */
@media (min-width: 1430px) and (min-height: 754px) {
    .how-built-compact {
        border-radius: 28px !important;
        overflow: hidden !important;
    }

    .how-built-compact h2 {
        line-height: 1.25;
    }

    .how-built-compact p {
        line-height: 1.7;
    }
}



/* ============================================================
   MHL IMPRESSUM HERO V3
   Echter Hero-Kasten – gleiche Breite wie Content
   ============================================================ */

@media (min-width: 1430px) and (min-height: 754px) {

    .scene-legal .mhl-impressum-hero-shell {
        width: calc(100% - 164px) !important;
        max-width: 1516px !important;

        min-height: 390px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        border-radius: 28px !important;
        overflow: hidden !important;

        position: relative !important;

        background:
            linear-gradient(
                180deg,
                rgba(7, 42, 56, 0.84),
                rgba(5, 31, 43, 0.94)
            ) !important;

        border: 1px solid rgba(111, 220, 238, 0.32) !important;

        box-shadow:
            0 18px 50px rgba(0, 0, 0, 0.22) !important;
    }

    /*
     * Der eigentliche Page Header wird zum
     * Inhalt des neuen Kastens.
     */

    .scene-legal .mhl-impressum-hero-shell > * {
        width: 100% !important;
        max-width: none !important;

        min-height: 390px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        border-radius: 0 !important;
    }

    /*
     * Innenabstand wie beim übrigen Seitenlayout.
     */

    .scene-legal .mhl-impressum-hero-shell
    > * {
        padding-left: 94px !important;
        padding-right: 94px !important;
        padding-top: 72px !important;
        padding-bottom: 58px !important;
    }

    /*
     * Titel kompakter:
     * vollständiger Titel bleibt innerhalb
     * des Kastens und kollidiert nicht mit dem Symbol.
     */

    .scene-legal .mhl-impressum-hero-shell h1 {
        font-size: clamp(3rem, 3.35vw, 4.05rem) !important;

        line-height: 1.04 !important;

        letter-spacing: -0.025em !important;

        max-width: calc(100% - 190px) !important;

        margin-right: 150px !important;
    }

    .scene-legal .mhl-impressum-hero-shell p {
        max-width: calc(100% - 220px) !important;

        line-height: 1.6 !important;
    }

    /*
     * Icon-/Symbolbereich:
     * nicht mehr über dem Titel,
     * sondern sauber rechts mittig im Hero.
     *
     * Wir greifen bewusst auf Elemente mit SVG
     * innerhalb des Page-Headers zurück und vermeiden
     * Abhängigkeit von einer einzelnen Icon-Klasse.
     */

    .scene-legal .mhl-impressum-hero-shell svg {
        max-width: 100% !important;
        max-height: 100% !important;
    }

    /*
     * Häufiger Page-Header-Aufbau:
     * direkte Elemente mit absoluter Positionierung
     * werden innerhalb des neuen Kastens gehalten.
     */

    .scene-legal .mhl-impressum-hero-shell
    [class*="icon"],
    .scene-legal .mhl-impressum-hero-shell
    [class*="Icon"] {
        box-sizing: border-box !important;
    }

    /*
     * Falls der Page-Header sein Icon absolut positioniert,
     * bleibt es innerhalb des Heroes.
     */

    .scene-legal .mhl-impressum-hero-shell
    > * [style*="right"],
    .scene-legal .mhl-impressum-hero-shell
    > * [style*="position"] {
        max-width: 110px !important;
    }

}

/* ============================================================
   ENDE MHL IMPRESSUM HERO V3
   ============================================================ */

/* MHL-IMPRESSUM-HERO-REFERENCE V1 */
@media (min-width: 1430px) and (min-height: 754px) {

    /*
     * Impressum-Hero:
     * gleiche äußere Breite wie der nachfolgende
     * reading-shell/prose-page Bereich.
     */
    .scene-legal .mhl-impressum-hero-reference {
        width: calc(100% - 164px) !important;
        max-width: none !important;
        margin: 0 auto 28px auto !important;
        box-sizing: border-box !important;
        position: relative !important;
        border-radius: 28px !important;
        overflow: hidden !important;
    }

    /*
     * Page-Header selbst wird zum eigentlichen Hero-Kasten.
     */
    .scene-legal .mhl-impressum-hero-reference > * {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;

        border-radius: 28px !important;
        overflow: hidden !important;

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

    /*
     * Inhalt darf den Kasten nicht mehr überlaufen.
     */
    .scene-legal .mhl-impressum-hero-reference h1 {
        max-width: calc(100% - 230px) !important;
        width: auto !important;
        box-sizing: border-box !important;

        font-size: clamp(42px, 3.35vw, 68px) !important;
        line-height: 1.04 !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;
        hyphens: auto !important;
    }

    /*
     * Untertitel sauber innerhalb des Hero-Kastens.
     */
    .scene-legal .mhl-impressum-hero-reference p {
        max-width: min(760px, calc(100% - 260px)) !important;
        box-sizing: border-box !important;
        line-height: 1.55 !important;
    }

    /*
     * Vorhandenes rechtes Symbol:
     * nicht verändern, nur sauber innerhalb des Kastens halten.
     */
    .scene-legal .mhl-impressum-hero-reference [class*="icon"],
    .scene-legal .mhl-impressum-hero-reference svg {
        max-width: 100% !important;
        flex-shrink: 0 !important;
    }

    /*
     * Falls der Header ein rechtes Icon-/Action-Element besitzt,
     * bleibt es innerhalb des Hero-Kastens.
     */
    .scene-legal .mhl-impressum-hero-reference > * {
        position: relative !important;
    }

    /*
     * Der große untere Impressum-Kasten bleibt in seiner
     * bestehenden Breite. Nur der Abstand zum Hero wird
     * definiert.
     */
    .scene-legal section.reading-shell.glass-card.prose-page.protection-guide {
        margin-top: 0 !important;
    }
}

/* END MHL-IMPRESSUM-HERO-REFERENCE V1 */





/* ============================================================
   MHL IMPRESSUM HERO V5
   Breite exakt an unteren Content-Kasten angleichen
   Höhe kompakter
   ============================================================ */

@media (min-width: 1430px) and (min-height: 754px) {

    /*
     * Der aktuelle Page-Header liegt in einem engeren
     * inneren Container als der untere Impressum-Kasten.
     *
     * Ziel:
     *   1516px bei 1680px Viewport
     *   exakt zentriert
     *
     * Die Breite wird deshalb aus dem Viewport berechnet
     * und gleichzeitig gegenüber dem engeren Parent
     * horizontal herausgezogen.
     */
    .scene-legal .mhl-impressum-hero-shell {
        width: min(1516px, calc(100vw - 164px)) !important;
        max-width: min(1516px, calc(100vw - 164px)) !important;
        min-width: 0 !important;

        /*
         * Parent-Breite -> Zielbreite:
         * automatisch mittig herausziehen.
         */
        margin-left: calc(
            (100% - min(1516px, calc(100vw - 164px))) / 2
        ) !important;

        margin-right: 0 !important;

        transform: none !important;

        box-sizing: border-box !important;

        border-radius: 28px !important;
        overflow: hidden !important;

        /*
         * Kompakter als V4.
         */
        min-height: 0 !important;

        margin-bottom: 42px !important;
    }

    /*
     * Page Header vollständig in den neuen Kasten setzen.
     */
    .scene-legal .mhl-impressum-hero-shell > * {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        border-radius: 28px !important;
        overflow: hidden !important;

        /*
         * Deutlich kompaktere Höhe.
         */
        padding-top: 54px !important;
        padding-right: 150px !important;
        padding-bottom: 48px !important;
        padding-left: 58px !important;

        min-height: 0 !important;
    }

    /*
     * Titel:
     * groß genug für die Seite, aber bewusst kompakter
     * als bisher.
     */
    .scene-legal .mhl-impressum-hero-shell h1 {
        width: auto !important;
        max-width: calc(100% - 10px) !important;

        font-size: clamp(42px, 3vw, 56px) !important;
        line-height: 1.04 !important;

        letter-spacing: -0.025em !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        hyphens: auto !important;

        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }

    /*
     * Untertitel kompakt halten.
     */
    .scene-legal .mhl-impressum-hero-shell p {
        width: auto !important;
        max-width: 900px !important;

        line-height: 1.45 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;

        margin-bottom: 0 !important;
    }

    /*
     * Vorhandenes Symbol ausdrücklich beibehalten.
     * Nur innerhalb des Heroes halten.
     */
    .scene-legal .mhl-impressum-hero-shell
    [class*="icon"],
    .scene-legal .mhl-impressum-hero-shell
    [class*="Icon"] {
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    .scene-legal .mhl-impressum-hero-shell svg {
        max-width: 48px !important;
        max-height: 48px !important;
    }

    /*
     * Unterer Kasten:
     * keinerlei Breitenänderung.
     */
    .scene-legal section.reading-shell.glass-card.prose-page.protection-guide {
        box-sizing: border-box !important;
    }
}

/* END MHL IMPRESSUM HERO V5 */


/* ============================================================
   MHL IMPRESSUM HERO V6
   Referenz: /kuestengeschichten
   ============================================================ */

@media (min-width: 1430px) and (min-height: 754px) {

    /*
     * Der Hero befindet sich konstruktionsbedingt in einem
     * engeren inneren Page-Header-Container als der untere
     * Impressum-Kasten.
     *
     * Screenshot-Referenz:
     * ca. 90px fehlen links
     * ca. 90px fehlen rechts
     *
     * Deshalb wird ausschließlich der Hero um diesen Betrag
     * aus seinem inneren Container herausgezogen.
     */
    .scene-legal .mhl-impressum-hero-shell {
        width: calc(100% + 180px) !important;
        max-width: none !important;
        min-width: 0 !important;

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

        box-sizing: border-box !important;

        border-radius: 28px !important;
        overflow: hidden !important;

        transform: none !important;

        /*
         * Abstand zum unteren Kasten.
         */
        margin-bottom: 42px !important;
    }

    /*
     * Page Header selbst vollständig auf die neue Hero-Breite
     * ziehen.
     */
    .scene-legal .mhl-impressum-hero-shell > * {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        border-radius: 28px !important;
        overflow: hidden !important;

        /*
         * Kompakte Hero-Höhe.
         */
        padding-top: 48px !important;
        padding-right: 150px !important;
        padding-bottom: 42px !important;
        padding-left: 58px !important;

        min-height: 0 !important;
    }

    /*
     * Überschrift:
     * Zwei saubere Zeilen wie in der Referenz,
     * aber vollständig innerhalb des Kastens.
     */
    .scene-legal .mhl-impressum-hero-shell h1 {
        width: auto !important;
        max-width: calc(100% - 20px) !important;

        font-size: 56px !important;
        line-height: 1.04 !important;
        letter-spacing: -0.025em !important;

        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: auto !important;

        margin-top: 0 !important;
        margin-bottom: 18px !important;
    }

    /*
     * Untertitel.
     */
    .scene-legal .mhl-impressum-hero-shell p {
        max-width: 900px !important;

        line-height: 1.45 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;

        margin-bottom: 0 !important;
    }

    /*
     * Vorhandenes Symbol NICHT ersetzen.
     */
    .scene-legal .mhl-impressum-hero-shell
    [class*="icon"],
    .scene-legal .mhl-impressum-hero-shell
    [class*="Icon"] {
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    .scene-legal .mhl-impressum-hero-shell svg {
        max-width: 48px !important;
        max-height: 48px !important;
    }

    /*
     * Unterer Kasten bleibt unangetastet.
     */
    .scene-legal section.reading-shell.glass-card.prose-page.protection-guide {
        box-sizing: border-box !important;
    }
}

/* END MHL IMPRESSUM HERO V6 */


/* ============================================================
   MHL IMPRESSUM HERO V7
   NUR BREITE – HÖHE UNVERÄNDERT
   ============================================================ */

@media (min-width: 1430px) and (min-height: 754px) {

    /*
     * Der untere Impressum-Kasten beginnt bei der Referenz
     * ungefähr 82px vom linken Viewport-Rand.
     *
     * Der Hero soll exakt dieselbe Außenkante erhalten.
     *
     * Daher:
     *   links 82px
     *   rechts 82px
     *   Breite = viewport - 164px
     *
     * Keine Änderung an der Höhe.
     */
    .scene-legal .mhl-impressum-hero-shell {
        width: calc(100vw - 164px) !important;
        max-width: calc(100vw - 164px) !important;
        min-width: 0 !important;

        margin-left: 50% !important;
        margin-right: 0 !important;

        transform: translateX(-50%) !important;

        box-sizing: border-box !important;
    }

}

/* END MHL IMPRESSUM HERO V7 */


/* ============================================================
   MHL IMPRESSUM HERO V8
   NUR BREITE
   ============================================================ */

@media (min-width: 1430px) and (min-height: 754px) {

    /*
     * V7 war sichtbar ca. 24px insgesamt zu breit.
     *
     * Ziel:
     * Hero-Kanten = Kanten des unteren Impressum-Kastens.
     *
     * 1680px Referenz:
     * unterer Kasten ≈ 1516px
     * gewünschter linker/rechter Rand ≈ 82px
     */
    .scene-legal .mhl-impressum-hero-shell {
        width: calc(100vw - 188px) !important;
        max-width: calc(100vw - 188px) !important;
        min-width: 0 !important;

        margin-left: 50% !important;
        margin-right: 0 !important;

        transform: translateX(-50%) !important;

        box-sizing: border-box !important;
    }

}

/* END MHL IMPRESSUM HERO V8 */



/* ============================================================
   MHL IMPRESSUM SHEEP V4
   Weiter links – Größe und Höhe unverändert
   ============================================================ */

@media (min-width: 1430px) and (min-height: 754px) {

    .scene-legal .mhl-impressum-hero-shell {
        position: relative !important;
    }

    .scene-legal .mhl-impressum-hero-shell::after {
        content: "" !important;

        position: absolute !important;

        width: 210px !important;
        height: auto !important;
        aspect-ratio: 1041 / 447 !important;

        /*
         * Weiter links als V3.
         */
        right: 405px !important;

        top: 50% !important;
        transform: translateY(-50%) !important;

        background-image: url("/assets/header/sheep-love-r102.png") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;

        display: block !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

}

/* END MHL IMPRESSUM SHEEP V4 */