/*
 * Meer.Weit Premium Design Update 2026 – Phase 1 Quick Wins
 * Loaded last; safely overrides CSS variables and component styles.
 */

/* ─── 1. ADELIA DISPLAY FONT ──────────────────────────────────────── */

@font-face {
    font-family: 'Adelia';
    src: url('../fonts/adelia.woff2') format('woff2'),
         url('../fonts/adelia.otf')   format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ─── Jost (Primärschrift, Redesign 2026) ──────────────────────────
   Auch hier definiert, damit die Schrift unabhängig vom PHP-/OPcache-
   Status sofort verfügbar ist (latin-Subset, deckt Deutsch ab). Die volle
   Variante (inkl. latin-ext) liegt zusätzlich in meerweit-fonts.css. */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/jost-300.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jost-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jost-500.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/jost-600.woff2') format('woff2'); }

/* ─── 2. CORE CSS VARIABLE UPDATES ───────────────────────────────── */

:root {
    /* Display script font (Adelia) for decorative headlines & labels */
    --mw-display: 'Adelia', cursive;

    /* Redesign 2026: Jost als Primärschrift (Headlines + Body) */
    --mw-serif: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mw-sans: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Gold accent – slightly warmer, less brassy */
    --mw-gold: #C5AB51;
    --mw-gold-light: rgba(197, 171, 81, 0.12);

    /* Section spacing – one step up for more breathing room */
    --mw-section-space: 96px;
    --mw-space-xl: 96px;

    /* Card corner radius – slightly tighter for a luxury feel */
    --mw-card-radius: 20px;
}

/* ─── 3. TYPOGRAPHY – HEADLINES & EYEBROW REFINEMENT ─────────────── */

/* Redesign 2026 – Jost Type-Scale: großzügig, leicht, editorial.
   Jost (geometrischer Sans) wirkt in großen Größen mit Weight 300 am edelsten. */
/* Schrift kommt sauber aus dem Token-System (--mw-serif/--mw-sans = Jost).
   Body-Größe via Token --mw-body-size (19px); hier nur Premium-Zeilenhöhe 1.8. */
body.mw-site { line-height: 1.8; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 { font-family: var(--mw-serif); }

h1, .h1 { font-size: clamp(2.75rem, 6vw, 6rem); font-weight: 300; letter-spacing: -0.01em; line-height: 1.05; }
h2, .h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 300; letter-spacing: -0.005em; line-height: 1.1; }
h3, .h3 { font-size: clamp(1.5rem, 2.4vw, 2.125rem); font-weight: 400; line-height: 1.2; }

/*
 * EYEBROW LABELS (.mw-eyebrow)
 * Computed weight was 800 — far too heavy for premium feel.
 * Reduce to 400 + add generous letter-spacing = sophisticated, editorial.
 */
.mw-eyebrow {
    font-weight: 400 !important;
    letter-spacing: 0.18em !important;
    font-size: 0.72rem !important;
    opacity: 0.65;
    outline: none;
}

/*
 * CARD FACT LABELS (DATUM / DAUER / PREIS P.P. AB: / GÄSTE / KABINEN / DECKS / LÄNGE)
 * Computed weight was 800 — reduce to 500 for readability without heaviness.
 */
.mw-card-facts dt {
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    font-size: 0.68rem !important;
}

/*
 * NAVIGATION LINKS
 * Computed weight was 700 — reduce to 400 for a more refined, quiet navigation.
 * Premium travel sites use lighter nav weight to let content breathe.
 * Selectors confirmed via live DOM inspection: .mw-nav__list a / .mw-mega a
 */
.mw-nav__list > li > a,
.mw-nav__list > .menu-item > a {
    font-weight: 400 !important;
    letter-spacing: 0.01em;
}

/* Mega menu links also too heavy */
.mw-mega a {
    font-weight: 400 !important;
}

/* "Alle Reiseziele ansehen" intro link */
.mw-mega__intro {
    font-weight: 400 !important;
}

/* Nav läuft nie in die Seite: ab Desktop kein Zeilenumbruch möglich */
@media (min-width: 1025px) {
    .mw-nav__list { flex-wrap: nowrap !important; }
}

/* Nav-Komprimierung bei mittleren Breiten */
@media (min-width: 1025px) and (max-width: 1400px) {
    .mw-nav__list { gap: 8px !important; }
    .mw-nav { gap: 12px !important; }
    .mw-nav__list > li > a,
    .mw-nav__list > .menu-item > a,
    .mw-nav__list--mega summary { font-size: .76rem !important; }
    .mw-nav__cta { padding-inline: 12px !important; font-size: .76rem !important; }
}

/* Stärkere Komprimierung bei 1025–1200 px (enge Desktop-Viewports) */
@media (min-width: 1025px) and (max-width: 1200px) {
    .mw-nav__list { gap: 4px !important; }
    .mw-nav { gap: 8px !important; }
    .mw-nav__list > li > a,
    .mw-nav__list > .menu-item > a,
    .mw-nav__list--mega summary { font-size: .72rem !important; letter-spacing: .02em !important; }
    .mw-nav__cta { padding-inline: 10px !important; font-size: .72rem !important; }
}

/* Cormorant Garamond for footer headline in dark bg */
.mw-footer__headline {
    font-family: var(--mw-serif);
    font-weight: 300;
}

/* ─── 4. PRICE ELEMENTS – GOLD ACCENT ────────────────────────────── */

/* Prices in trip cards and detail pages */
.mw-card-facts dd.mw-price,
.mw-trip-card .mw-price,
.mw-ship-card .mw-price,
[class*="price"] dd,
.mw-trip-detail__price,
.mw-price-highlight,
.mw-price {
    color: var(--mw-gold);
    font-weight: 600;
}

/* Price dt labels keep muted style but gain slight gold tint */
.mw-card-facts dt:last-of-type {
    color: color-mix(in srgb, var(--mw-gold) 60%, var(--mw-muted));
}

/* ─── 5. ADELIA FOR DESTINATION LABELS ───────────────────────────── */

/* Destination list names displayed in the elegant script */
.mw-destination-list strong,
.mw-region-label,
.mw-section-eyebrow {
    font-family: var(--mw-display);
    font-size: 1.4em;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

/* ─── 6. CARD HOVER – SLOWER, MORE PREMIUM ───────────────────────── */

/* Override the existing 0.35s with a more deliberate 0.55s */
.mw-trip-card img,
.mw-ship-card img {
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.mw-trip-card:hover img,
.mw-ship-card:hover img {
    transform: scale(1.04);
}

/* ─── 7. SHIP CARD BUTTON HIERARCHY FIX ─────────────────────────── */

/*
 * In card-schiff.php, "Zum Schiff" uses mw-button--secondary (outline)
 * and "Schiff anfragen" uses mw-button--ghost (white/transparent).
 * On a light card background, ghost looks broken. Fix both:
 * - First button → primary filled style
 * - Second button → secondary outline (appropriate on light bg)
 */

.mw-ship-card__actions .mw-button--secondary:first-child,
.mw-ship-card .mw-ship-card__actions > a:first-child {
    background-color: var(--mw-accent);
    color: #fff;
    border-color: var(--mw-accent);
}

.mw-ship-card__actions .mw-button--secondary:first-child:hover,
.mw-ship-card .mw-ship-card__actions > a:first-child:hover {
    background-color: color-mix(in srgb, var(--mw-accent) 85%, #000);
    border-color: color-mix(in srgb, var(--mw-accent) 85%, #000);
}

/* Ghost button → secondary style on light backgrounds */
.mw-ship-card__actions .mw-button--ghost {
    background-color: transparent;
    color: var(--mw-ink);
    border: 1.5px solid var(--mw-line);
}

.mw-ship-card__actions .mw-button--ghost:hover {
    border-color: var(--mw-accent);
    color: var(--mw-accent);
    background-color: var(--mw-gold-light);
}

/* ─── 8. FOOTER ACCORDIONS ON DESKTOP ────────────────────────────── */

/*
 * Footer accordions are opened on desktop via JS (mw_upgrade_footer_accordion_js).
 * Once JS sets the [open] attribute, hide the chevron and remove pointer cursor.
 */
@media (min-width: 900px) {
    /* When forced open by JS: hide the chevron indicator */
    .mw-footer-group[open] summary::after {
        display: none !important;
    }

    /* When forced open by JS: default cursor (not a toggle control on desktop) */
    .mw-footer-group[open] summary {
        cursor: default;
    }
}

/* ─── 9. SUBTLE CARD REFINEMENTS ─────────────────────────────────── */

/* Slightly more shadow depth for premium feel */
.mw-trip-card,
.mw-ship-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.mw-trip-card:hover,
.mw-ship-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* ─── 10. GLOBAL SECTION SPACING APPLICATION ─────────────────────── */

/* Ensure section space variable propagates to the main spacing utilities */
.mw-section {
    padding-block: var(--mw-section-space);
}

/* Finder and trust strip — give slightly more air */
.mw-finder,
.mw-trust-strip {
    padding-block: calc(var(--mw-section-space) * 0.75);
}

/* Trip card overlay: remove the fact grid from the image,
 * keep only title + ghost CTA button.
 * (Konsolidiert aus dem früheren Inline-Patch in inc/setup.php, Prio 32.) */
.mw-trip-card__overlay .mw-card-facts {
    display: none !important;
}

/* h3 had min-height: 3.15em (space for 3 lines) — no longer needed */
.mw-trip-card__overlay h3 {
    min-height: 0 !important;
    padding-bottom: 12px;
}

/* Give the overlay a bit more bottom padding now that facts are gone */
.mw-trip-card__overlay {
    padding-bottom: 24px;
}

/* Route / ship meta label — "JAPAN, SÜDKOREA  SH MINERVA" */
.mw-trip-card__overlay .mw-trip-card__meta,
.mw-trip-card__meta {
    font-weight: 400 !important;
    letter-spacing: 0.10em !important;
    font-size: 0.68rem !important;
    opacity: 0.78;
}

/*
 * "Entdecken" button — currently opaque white (font-weight: 850).
 * Switch to ghost style: transparent bg + white border.
 * Sits on dark overlay → ghost reads as clean and premium.
 */
.mw-trip-card__overlay .mw-card-cta {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
    color: #fff !important;
    font-weight: 500 !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.mw-trip-card__overlay .mw-card-cta:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
}

/* ─── 11. GLOBAL SECTION SPACING APPLICATION ─────────────────────── */

/* Ensure section space variable propagates to the main spacing utilities */
.mw-section {
    padding-block: var(--mw-section-space);
}

/* Finder and trust strip — give slightly more air */
.mw-finder,
.mw-trust-strip {
    padding-block: calc(var(--mw-section-space) * 0.75);
}

/*
 * TRIP CARD BODY FACTS (Desktop ≥681px)
 * _body-facts ← FACTS we want to show
 *     p                             ← description (always visible)
 *     a.mw-trip-card__body-cta      ← display:none on desktop
 *
 * Fix: show the parent (.body-summary) → hide duplicates (title, route) → style facts.
 * All desktop overrides are wrapped in min-width: 681px to avoid
 * touching the mobile layout (which already works correctly).
 */
@media (min-width: 681px) {
    /* 1. Show the wrapper (parent — otherwise child facts stay hidden) */
    .mw-trip-card__body-summary {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* 2. Hide items that are already in the image overlay on desktop */
    .mw-trip-card__body-summary .mw-trip-card__body-title,
    .mw-trip-card__body-summary .mw-trip-card__route--body {
        display: none !important;
    }

    /* 3. Activate the fact row in desktop 3-column layout */
    .mw-trip-card__body-facts {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0 !important;
        margin: 18px 0 2px !important;
        border: 1px solid var(--mw-line) !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        background: var(--mw-line) !important; /* shows as 1px separator between cells */
    }

    .mw-trip-card__body-facts > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px;
        padding: 11px 14px !important;
        background: var(--mw-surface, #faf9f7) !important;
        border: 0 !important;
    }

    /* Fact labels: TERMINE / DAUER / PREIS P.P. AB: */
    .mw-trip-card__body-facts dt {
        color: var(--mw-muted) !important;
        font-size: 0.65rem !important;
        font-weight: 500 !important;
        letter-spacing: 0.11em !important;
        text-transform: uppercase !important;
        margin: 0 !important;
    }

    /* Fact values */
    .mw-trip-card__body-facts dd {
        color: var(--mw-ink) !important;
        font-size: 0.86rem !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    /* Price cell (always last div) → gold */
    .mw-trip-card__body-facts > div:last-child dd {
        color: var(--mw-gold) !important;
        font-weight: 600 !important;
        font-size: 0.92rem !important;
    }
}

/* ─── 11. GLOBAL SECTION SPACING APPLICATION ─────────────────────── */

/* Ensure section space variable propagates to the main spacing utilities */
.mw-section {
    padding-block: var(--mw-section-space);
}

/* Finder and trust strip — give slightly more air */
.mw-finder,
.mw-trust-strip {
    padding-block: calc(var(--mw-section-space) * 0.75);
}

/* ─── 12. CARD MEDIA SCRIM – KONTRAST (A11y, Phase 1.5) ──────────── */

/*
 * Reise-/Schiff-Cards: weißer Titel, Meta und Ghost-CTA sitzen unten auf dem
 * Bild. Der Basis-Scrim (meerweit.css) endete bei nur ~46 % Petrol – über
 * hellen Motiven (Himmel, Schnee, Wasser, Sand) zu schwach für sicher lesbaren
 * weißen Text. Dieser Override verstärkt gezielt NUR den unteren Bereich; der
 * obere Bildausschnitt bleibt klar. Premium und ruhig, Lesbarkeit zuerst.
 * Overlay-Text-Ziel: >= 4.5:1 auch über hellen Bildern.
 */
.mw-trip-card__media::after,
.mw-ship-card__media::after {
    background: linear-gradient(
        180deg,
        rgba(37, 37, 37, 0) 0%,
        rgba(37, 37, 37, 0.10) 45%,
        rgba(37, 37, 37, 0.58) 76%,
        rgba(37, 37, 37, 0.72) 100%
    );
}

/* ─── 13. HEADER-REDESIGN 2026 ─────────────────────────────────────
   Ziele: transparenter Hero-Header → schlanker Ivory-Header beim Scrollen,
   Logo-Crossfade (hell ↔ dunkel), Telefonnummer rechts, Gold-Hover. */

/* Basis-Transition: alle Zustandswechsel weich */
.mw-header {
    transition: background 0.36s ease, box-shadow 0.36s ease;
}

/* Default: transparent (Basis; Zustände unten überschreiben) */
.mw-header { background: transparent; }

/* Header über Hero: dezenter dunkler Verlauf von oben (Lesbarkeit auf hellen
   Bildern), zusätzlich Text-Shadow. Stärke einheitlich über --mw-header-scrim
   (Meer.Weit → Einstellungen), Default 0.25 = sehr dezent. Verlauf läuft nach
   unten transparent aus und verschmilzt so mit dem Hero. */
.mw-header--transparent:not(.is-scrolled) {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, var(--mw-header-scrim, .25)) 0%,
        rgba(0, 0, 0, calc(var(--mw-header-scrim, .25) * .5)) 58%,
        rgba(0, 0, 0, 0) 100%) !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
}
.mw-header--transparent:not(.is-scrolled) .mw-nav a,
.mw-header--transparent:not(.is-scrolled) .mw-nav__list--mega summary,
.mw-header--transparent:not(.is-scrolled) .mw-nav__cta {
    color: #fff;
    text-shadow: 0 1px 12px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.30);
}

/* Solid (kein Hero): Ivory von Anfang an — wird via body class gesteuert */
.mw-header--solid,
body:not(.has-page-hero) .mw-header--transparent:not(.is-scrolled) {
    background: rgba(247, 245, 241, 0.97) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 22px rgba(37,37,37,.06);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

/* Kein-Hero: Logo dunkel, Nav-Links dunkel, CTA Gold */
body:not(.has-page-hero) .mw-header--transparent:not(.is-scrolled) .mw-nav a,
body:not(.has-page-hero) .mw-header--transparent:not(.is-scrolled) .mw-nav__list--mega summary {
    color: var(--mw-text, var(--mw-ink)) !important;
}
body:not(.has-page-hero) .mw-header--transparent:not(.is-scrolled) .mw-nav a:hover,
body:not(.has-page-hero) .mw-header--transparent:not(.is-scrolled) .mw-nav summary:hover {
    color: var(--mw-gold, var(--mw-accent)) !important;
}
/* Kein Text-Schatten auf dunklen Links auf hellem Hintergrund */
body:not(.has-page-hero) .mw-header--transparent:not(.is-scrolled) .mw-nav a,
body:not(.has-page-hero) .mw-header--transparent:not(.is-scrolled) .mw-nav__list--mega summary,
body:not(.has-page-hero) .mw-header--transparent:not(.is-scrolled) .mw-nav__cta { text-shadow: none; }
body:not(.has-page-hero) .mw-header--transparent:not(.is-scrolled) .mw-brand__logo--dark  { opacity: 1 !important; }
body:not(.has-page-hero) .mw-header--transparent:not(.is-scrolled) .mw-brand__logo--light { opacity: 0 !important; }
body:not(.has-page-hero) .mw-header--transparent:not(.is-scrolled) .mw-header__tel {
    color: var(--mw-text, #252525);
    opacity: 0.65;
}
body:not(.has-page-hero) .mw-header--transparent:not(.is-scrolled) .mw-nav__cta {
    background: var(--mw-taupe, var(--mw-primary)) !important;
    border-color: var(--mw-taupe, var(--mw-primary)) !important;
    color: #fff !important;
}

/* ── Hero-Seiten: Parent-Theme-Gradient vollständig überschreiben ──────
   Das Parent-Theme setzt body.home .mw-header { background: linear-gradient(rgba(37,37,37,.28)…) }
   mit Spezifität 0,3,0 — wir matchen diese und setzen !important obendrauf. */
body.has-page-hero .mw-header:not(.is-scrolled) {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, var(--mw-header-scrim, .25)) 0%,
        rgba(0, 0, 0, calc(var(--mw-header-scrim, .25) * .5)) 58%,
        rgba(0, 0, 0, 0) 100%) !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.has-page-hero .mw-header:not(.is-scrolled) .mw-nav a,
body.has-page-hero .mw-header:not(.is-scrolled) .mw-nav__list--mega summary {
    color: #fff !important;
    text-shadow: 0 1px 12px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.30);
}
body.has-page-hero .mw-header:not(.is-scrolled) .mw-nav a:hover,
body.has-page-hero .mw-header:not(.is-scrolled) .mw-nav__list--mega summary:hover {
    color: rgba(255,255,255,.75) !important;
}
body.has-page-hero .mw-header:not(.is-scrolled) .mw-nav__cta {
    background: transparent !important;
    border-color: rgba(255,255,255,.60) !important;
    color: #fff !important;
    text-shadow: none;
}
body.has-page-hero .mw-header:not(.is-scrolled) .mw-nav__cta:hover {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.85) !important;
}
body.has-page-hero .mw-header:not(.is-scrolled) .mw-brand__logo--dark  { opacity: 0 !important; }
body.has-page-hero .mw-header:not(.is-scrolled) .mw-brand__logo--light { opacity: 1 !important; }
body.has-page-hero .mw-header:not(.is-scrolled) .mw-header__tel {
    color: rgba(255,255,255,.80) !important;
    opacity: 1;
}

/* ── Hero-Überlagerung: mw-main padding entfernen ───────────────────
   Das Parent-Theme gibt .mw-main ein padding-top = Headerhöhe (79 px),
   damit Content nicht hinter dem fixed Header startet. Bei Hero-Seiten
   wollen wir aber, dass der Hero hinter dem transparenten Header liegt.
   Der Hero hat selbst padding-top ≥ 94 px für seinen Inhaltsbereich.   */
body.has-page-hero .mw-main {
    padding-top: 0 !important;
}

/* Scrolled: Ivory-Backdrop mit Blur für Tiefe */
.mw-header.is-scrolled {
    background: rgba(247, 245, 241, 0.97) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 22px rgba(37,37,37,.06);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

/* ── Dual-Logo: Hell ↔ Dunkel Crossfade ─────────────────────────── */
/* Container definiert Höhe via Dark-Logo (in Flow), Light-Logo liegt obenauf */
.mw-brand__logo-set { position: relative; display: block; }

.mw-brand__logo--dark,
.mw-brand__logo--light {
    display: block;
    transition: opacity 0.36s ease, height 0.36s ease, width 0.36s ease;
}

/* Dark-Logo: in Flow, sichtbar by default (für scrolled/solid Header) */
.mw-brand__logo--dark { opacity: 1; }

/* Light-Logo: absolut gestapelt, unsichtbar by default */
.mw-brand__logo--light {
    position: absolute;
    inset: 0;
    width: auto;
    height: 100%;
    opacity: 0;
}

/* Transparent (Hero): Light-Logo ein, Dark-Logo aus */
.mw-header--transparent:not(.is-scrolled) .mw-brand__logo--dark { opacity: 0; }
.mw-header--transparent:not(.is-scrolled) .mw-brand__logo--light { opacity: 1; }

/* ── Slim-on-Scroll: Logo verkleinert sich beim Scrollen ─────────── */
.mw-brand img,
.mw-brand__fallback-logo {
    transition: height 0.36s ease, width 0.36s ease;
    height: var(--mw-logo-height, 54px) !important;
    max-height: var(--mw-logo-height, 54px) !important;
    width: auto !important;
}
.mw-header.is-scrolled .mw-brand img,
.mw-header.is-scrolled .mw-brand__fallback-logo {
    height: var(--mw-logo-height-scrolled, 40px) !important;
    max-height: var(--mw-logo-height-scrolled, 40px) !important;
    width: auto !important;
}

/* ── Nav-Links: weiß auf transparentem Hero, dunkel wenn scrolled ── */
.mw-header--transparent:not(.is-scrolled) .mw-nav a,
.mw-header--transparent:not(.is-scrolled) .mw-nav__list--mega summary {
    color: rgba(255, 255, 255, 0.90) !important;
}
.mw-header--transparent:not(.is-scrolled) .mw-nav a:hover,
.mw-header--transparent:not(.is-scrolled) .mw-nav a:focus-visible,
.mw-header--transparent:not(.is-scrolled) .mw-nav summary:hover,
.mw-header--transparent:not(.is-scrolled) .mw-nav summary:focus-visible {
    color: #fff !important;
}

/* Scrolled: Primärtext-Farbe für Nav-Links */
.mw-header.is-scrolled .mw-nav a,
.mw-header.is-scrolled .mw-nav__list--mega summary {
    color: var(--mw-text, var(--mw-ink)) !important;
}
.mw-header.is-scrolled .mw-nav a:hover,
.mw-header.is-scrolled .mw-nav a:focus-visible,
.mw-header.is-scrolled .mw-nav summary:hover,
.mw-header.is-scrolled .mw-nav summary:focus-visible {
    color: var(--mw-gold, var(--mw-accent)) !important;
}

/* ── CTA-Button: Ghost-Outline auf Hero, Gold-Solid wenn scrolled ── */
.mw-header--transparent:not(.is-scrolled) .mw-nav__cta {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    color: #fff !important;
    transition: background 0.24s ease, border-color 0.24s ease;
}
.mw-header--transparent:not(.is-scrolled) .mw-nav__cta:hover,
.mw-header--transparent:not(.is-scrolled) .mw-nav__cta:focus-visible {
    background: rgba(255, 255, 255, 0.20) !important;
    border-color: #fff !important;
}

/* Gold-Button-Transition beim Scrollen (scrolled = Customizer-Default aktiv) */
.mw-nav__cta { transition: background 0.36s ease, border-color 0.36s ease, color 0.36s ease; }

/* CTA „Angebot anfragen“: Text beim Hover lesbar halten. Die generische
   Menü-Link-Hover-Regel (.mw-nav a:hover → var(--mw-turquoise)) hat durch das
   a-Element eine höhere Spezifität als .mw-nav__cta:hover und färbt sonst auch
   den Button-Text um → auf dem dunklen Button unsichtbar. Der CTA ist ein
   Button, kein normaler Link: Text bleibt in allen Header-Zuständen weiß. */
.mw-header .mw-nav a.mw-nav__cta:hover,
.mw-header .mw-nav a.mw-nav__cta:focus-visible,
.mw-header .mw-nav a.mw-nav__cta:hover span,
.mw-header .mw-nav a.mw-nav__cta:focus-visible span {
    color: var(--mw-button-text, #FFFFFF) !important;
    text-shadow: none !important;
}

/* Mega-Menu-Panel-Links: immer dunkel, unabhängig vom Header-Zustand.
   Die übergeordneten .mw-nav a-Regeln setzen !important white — hier
   explizit zurücksetzen, da Dropdown-Panel immer hellen Hintergrund hat. */
.mw-header--transparent:not(.is-scrolled) .mw-mega a,
body.has-page-hero .mw-header:not(.is-scrolled) .mw-mega a {
    color: var(--mw-text, var(--mw-ink)) !important;
    text-shadow: none !important;
}
.mw-header--transparent:not(.is-scrolled) .mw-mega a:hover,
body.has-page-hero .mw-header:not(.is-scrolled) .mw-mega a:hover {
    color: var(--mw-gold, var(--mw-accent)) !important;
}

/* ── §9. Mega-Menü & Link-Chips: Taupe statt Petrol/Türkis ─────────────────
   Parent-Theme (meerweit.css) hat hartcodierte rgba(62, 56, 51,x)-Borders und
   rgba(238, 231, 220)-Hintergründe. Alle werden hier auf Taupe überschrieben. */

/* 9a. Mega-Menü Box */
.mw-mega {
    background: #FFFFFF !important;
    border: 1px solid rgba(98, 86, 78, .14) !important;
    box-shadow: 0 28px 80px rgba(81, 78, 72, .14) !important;
}

/* 9b. Intro-Karte im Mega-Menü (linkes Panel) */
.mw-mega__intro {
    background: linear-gradient(135deg, var(--mw-foam, var(--mw-foam)), #FFF8EC) !important;
}
.mw-mega__intro span { color: var(--mw-primary, var(--mw-primary)) !important; }
.mw-mega__intro a    { color: var(--mw-primary, var(--mw-primary)) !important; }

/* 9c. Destination-/Schiffs-Pills im Mega-Menü (Desktop) */
.mw-mega__cols a {
    border-color: rgba(98, 86, 78, .16) !important;
    color: var(--mw-ink) !important;
}
.mw-mega__cols a:hover,
.mw-mega__cols a:focus-visible {
    background: rgba(98, 86, 78, .06) !important;
    border-color: rgba(98, 86, 78, .28) !important;
    color: var(--mw-primary) !important;
}

/* 9d. Link-Chips (allgemein: .mw-link-chip — Schiff-Auswahl, Abfahrten etc.) */
.mw-link-chip {
    border-color: rgba(98, 86, 78, .16) !important;
}
.mw-link-chip:hover,
.mw-link-chip:focus-visible {
    background: rgba(98, 86, 78, .08) !important;
    border-color: rgba(98, 86, 78, .30) !important;
    color: var(--mw-primary-hover) !important;
}
.mw-link-chip.is-selected {
    background: rgba(98, 86, 78, .08) !important;
    border-color: rgba(98, 86, 78, .35) !important;
    color: var(--mw-primary) !important;
}

/* ── Unterline-Hover: reveal from center (eleganter als left→right) ─ */
.mw-nav a {
    font-weight: 500;
    letter-spacing: 0.01em;
    position: relative;
    transition: color var(--mw-dur-micro, 200ms) var(--mw-ease, cubic-bezier(.22,1,.36,1));
}
.mw-nav a:hover,
.mw-nav a:focus-visible,
.mw-nav summary:hover,
.mw-nav summary:focus-visible { color: var(--mw-gold, #C5AB51); }

.mw-nav__list > li > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -5px;
    height: 1px;
    background: var(--mw-gold, #C5AB51);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.30s cubic-bezier(.22,1,.36,1);
}
.mw-nav__list > li > a:hover::after,
.mw-nav__list > li > a:focus-visible::after { transform: scaleX(1); }

/* ── Telefonnummer im Header ─────────────────────────────────────── */
.mw-header__tel {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mw-sans, 'Jost', sans-serif);
    font-size: .74rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-decoration: none;
    color: var(--mw-text, #252525);
    opacity: 0.65;
    flex-shrink: 0;
    transition: opacity 0.20s ease, color 0.20s ease;
}
.mw-header__tel:hover { opacity: 1; color: var(--mw-gold, #C5AB51); }

.mw-header--transparent:not(.is-scrolled) .mw-header__tel {
    color: rgba(255, 255, 255, 0.85);
    opacity: 1;
}
.mw-header--transparent:not(.is-scrolled) .mw-header__tel:hover {
    color: #fff;
}

.mw-header__tel-icon { flex-shrink: 0; }

/* Tel-Text nur auf breiten Viewports, Icon immer */
@media (max-width: 1380px) { .mw-header__tel-text { display: none; } }
@media (max-width: 1024px) { .mw-header__tel { display: none; } }

/* ── Hero-Text: Lesbarkeit auf hellen Bildern ───────────────────── */
.mw-hero__content,
.mw-home-hero__content { text-shadow: 0 1px 28px rgba(0, 0, 0, 0.28); }

@media (prefers-reduced-motion: reduce) {
    .mw-header { transition: none; }
    .mw-brand img,
    .mw-brand__logo--dark,
    .mw-brand__logo--light,
    .mw-brand__fallback-logo { transition: none; }
    .mw-nav a,
    .mw-nav__list > li > a::after,
    .mw-nav__cta { transition: none; }
}

/* ─── 14. PHASE 3 – KARTEN: BILD ZUERST (Redesign 2026) ────────────
   Strikte Hierarchie: Bild → Titel → Route → Dauer → Preis → CTA.
   Lange Beschreibungstexte unter den Karten entfallen – die Detailseite
   übernimmt die ausführlichen Infos. Texte bleiben für SEO/Fallback im
   DOM, werden nur visuell ausgeblendet (keine Inhalte gelöscht). */
.mw-trip-card__body > p,
.mw-ship-card__subtitle {
    display: none;
}

/* Body ruhiger & kompakter ohne Fließtext – das Bild bleibt der Held. */
.mw-trip-card__body,
.mw-ship-card__body { min-height: 0; }

/* Einheitliche, ruhige Karten: dezente Rundung aus dem Token (6px). */
.mw-trip-card,
.mw-ship-card { border-radius: 12px; overflow: hidden; }

/* ─── 15. PHASE 4 – REISEFINDER: PREMIUM-REISEBERATER (Redesign 2026) ──
   Filterfelder wirken wie hochwertige UI-Elemente statt Formularfelder:
   ruhige Flächen, Gold-Akzent bei Hover/geöffnet, leise, klare Typografie.
   Bewusst additiv – die bestehende Pill-Box bleibt unangetastet. */
.mw-finder__field summary {
    border: none !important;
}

/* Label leise in Versalien, Wert in Jost/Deep Ocean */
.mw-finder__field summary em {
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.68rem;
    color: var(--mw-muted);
}
.mw-finder__field summary strong {
    font-weight: 500;
    color: var(--mw-heading, #252525);
}

@media (prefers-reduced-motion: reduce) {
    .mw-finder__field summary { transition: none; }
}

/* ─── 16. PHASE 5 – DETAILSEITEN: EDITORIAL (Redesign 2026) ─────────
   "Warum besonders"-Highlights ruhiger & editorialer: weniger Box-Wirkung,
   kein schwerer Schatten, feiner Gold-Akzent statt Türkis-Balken,
   Überschriften in Deep Ocean, dezente Rundung aus dem Token. */
.mw-highlight-grid--compact article {
    box-shadow: none;
    border-color: var(--mw-line);
    border-radius: var(--mw-card-radius, 6px);
}
.mw-highlight-grid--compact article::before {
    width: 3px;
    background: var(--mw-gold);
}
.mw-highlight-grid span:not(:empty),
.mw-highlight-grid--compact article > span:not(:empty) {
    border-color: var(--mw-gold);
    color: var(--mw-gold);
}
.mw-highlight-grid article h3,
.mw-highlight-grid--compact article h3 { color: var(--mw-heading, #252525); }

/* ─── RECHTSTEXTE: kein Scroll-Reveal auf Fallback-Content (Bugfix) ─────
 * .mw-page-landing__fallback rendert the_content() auf premium-landing.php-
 * Seiten ohne Elementor-Inhalt (AGB, Datenschutz, Impressum, Cookie-Richtlinie).
 * Rechtlicher Pflichtinhalt muss IMMER sofort sichtbar sein – Absicherung gegen
 * den opacity:0-Reveal-Flicker, falls die .mw-reveal-Klasse doch gesetzt wird. */
.mw-page-landing__fallback,
.mw-page-landing__fallback.mw-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ─── 17. PHASE 5 REST – SCHIFF-DETAIL: RESORT-SUITE EDITORIAL (Redesign 2026) ─
   Kabinen als Resort-Suiten: Türkis-Akzente → Gold, Deep-Ocean-Headings,
   Token-Radius (6px), ruhigere Schatten, Sand-Hintergrund für Kabinen-Sektion.
   Ship-Highlights (ship-Variante): weniger Boxwirkung, Token-Radius. */

/* — Schiff-Highlights (ship-Variante): Token-Radius, kein Schatten — */
.mw-ship-highlights .mw-highlight-grid--ship article {
    border-radius: var(--mw-card-radius, 6px);
    box-shadow: none;
    border: 1px solid var(--mw-line);
}

/* — Kabinen-Sektion: Sand-Hintergrund (Resort-Atmosphäre) — */
.mw-ship-cabins {
    background: var(--mw-sand, #EDE7DA);
}

/* — Kabinen-Eyebrow: Gold — */
.mw-ship-cabins .mw-eyebrow {
    color: var(--mw-gold);
    border-color: rgba(197, 171, 81, .35);
}

/* — Kabinen-Tab: Token-Radius, Gold-Hover, Deep Ocean aktiv — */
.mw-ship-cabin-tab {
    border-radius: var(--mw-card-radius, 6px);
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.mw-ship-cabin-tab:hover,
.mw-ship-cabin-tab:focus-visible {
    border-color: rgba(197, 171, 81, .55);
    background: rgba(197, 171, 81, .08);
    box-shadow: none;
    transform: none;
    color: var(--mw-heading);
}
.mw-ship-cabin-tab.is-active {
    border-color: var(--mw-heading, #252525);
    background: var(--mw-heading, #252525);
    box-shadow: none;
    transform: none;
    color: #fff;
}
.mw-ship-cabin-tab:hover span,
.mw-ship-cabin-tab:focus-visible span,
.mw-ship-cabin-tab:hover small,
.mw-ship-cabin-tab:focus-visible small {
    color: var(--mw-heading);
}
.mw-ship-cabin-tab.is-active span,
.mw-ship-cabin-tab.is-active small {
    color: rgba(255, 255, 255, .9);
}

/* — Kabinen-Panel: Token-Radius, kein Schatten, Weiß auf Sand — */
.mw-ship-cabin-panel {
    border-radius: var(--mw-card-radius, 6px);
    box-shadow: none;
    background: #fff;
    border-color: var(--mw-line);
}
.mw-ship-cabin-panel__media {
    border-radius: var(--mw-card-radius, 6px);
}
.mw-ship-cabin-panel__content h3 {
    color: var(--mw-heading, #252525);
}

/* — Thumbnail-Leiste: Token-Radius, Gold-Aktiv — */
.mw-ship-cabin-panel__thumbs {
    border-radius: 4px;
    background: rgba(237, 231, 218, .88);
    box-shadow: none;
}
.mw-ship-cabin-panel__thumb {
    border-radius: 2px;
}
.mw-ship-cabin-panel__thumb.is-active,
.mw-ship-cabin-panel__thumb:focus-visible,
.mw-ship-cabin-panel__thumb:hover {
    border-color: var(--mw-gold);
}

/* — Feature-Bullets: Gold statt Türkis — */
.mw-ship-cabin-features li::before {
    background: var(--mw-gold);
}

/* — Kabinen-Meta-Grid: Token-Radius, Gold-Labels — */
.mw-ship-cabin-meta {
    border-radius: var(--mw-card-radius, 6px);
    background: rgba(37, 37, 37, .07);
    border-color: var(--mw-line);
}
.mw-ship-cabin-meta div {
    background: rgba(255, 255, 255, .85);
}
.mw-ship-cabin-meta dt {
    color: var(--mw-gold);
}

/* — Kategorie-Chip im Panel: Gold-Tönung — */
.mw-ship-cabin-panel__content .mw-chip--soft {
    border-color: rgba(197, 171, 81, .35);
    color: var(--mw-gold);
    background: rgba(197, 171, 81, .08);
}

/* — Schiff-Intro: Gold-Eyebrow — */
.mw-ship-intro .mw-eyebrow {
    color: var(--mw-gold);
}

@media (prefers-reduced-motion: reduce) {
    .mw-ship-cabin-tab { transition: none; }
}

/* ─── 18. PHASE 6 – MOBILE-FEINSCHLIFF (Redesign 2026) ─────────────
   Token-Radius nach §17-Basis-CSS-Override halten, Card-Hover auf Touch
   deaktivieren, Kabinen-Tab-Touch-Target ≥44px. */

/* — Card-Hover auf Touch-Geräten: kein Sticky-Hover — */
@media (hover: none) {
    .mw-trip-card:hover,
    .mw-ship-card:hover {
        transform: none;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
    }
}

/* — Tablet ≤980px: Tab-Touch-Target + kompaktere Gap — */
@media (max-width: 980px) {
    .mw-ship-cabin-tab {
        min-height: 52px;
    }
    .mw-ship-cabins-nav {
        gap: 10px;
    }
}

/* — Mobil ≤680px: Token-Radius nach Basis-CSS-Override halten — */
@media (max-width: 680px) {
    .mw-ship-cabin-panel {
        border-radius: var(--mw-card-radius, 6px);
    }
    .mw-filter-form {
        border-radius: var(--mw-card-radius, 6px);
    }
    .mw-ship-cabin-tab {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mw-trip-card,
    .mw-ship-card { transition: none; }
}

/* ─── 19. TOP-ANGEBOTE SPACING + ACCORDION GLOBAL (Redesign 2026) ───
   –mw-section-space global auf clamp(56,5vw,80px) reduziert (setup.php).
   Content-Sektionen zusätzlich kompakter; Accordion (JS + native details +
   .mw-note) vereinheitlicht: Card-Design, Token-Radius, Plus/Minus statt Chevron. */

/* ── 19a. CONTENT-SEKTIONEN: SPACING-OVERRIDES ── */
.mw-overview-seo,
.mw-overview-intro,
.mw-seo-text,
.mw-seo-text--ship {
    padding-block: 60px;
}

.mw-faq-section {
    padding-block: 60px;
}

@media (max-width: 680px) {
    .mw-overview-seo,
    .mw-overview-intro,
    .mw-seo-text,
    .mw-seo-text--ship { padding-block: 36px; }
    .mw-faq-section { padding-block: 40px; }
}

/* ── 19a-2. SEO-Text Toggle: „Weniger anzeigen" — Taupe-Outline ──────────
   Klasse mw-button mw-button--secondary: Parent-Codex überschreibt background
   mit !important → hier gegenhalten. */
.mw-region-seo-text__toggle {
    background: transparent !important;
    border: 2px solid var(--mw-primary) !important;
    color: var(--mw-primary) !important;
    box-shadow: none !important;
}
.mw-region-seo-text__toggle:hover,
.mw-region-seo-text__toggle:focus-visible {
    background: var(--mw-primary) !important;
    border-color: var(--mw-primary) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 37, 37, .12) !important;
}

/* ── 19a-3. Einordnungs-Intro: „Weiterlesen"-Toggle ──────────────────────
   Erster Absatz sichtbar, Rest einklappbar. Ohne JS ist alles sichtbar. */
.mw-region-intro__text-rest[hidden] { display: none; }

.mw-readmore-toggle {
    display: none; /* erst per JS einblenden – ohne JS bleibt der Text vollständig sichtbar */
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 0 !important;
    /* !important auf der Basisregel: neutralisiert die pinke button:hover-Farbe des
       Parent-Themes in allen Zuständen und überlebt WP Rockets „Ungenutztes CSS“,
       da die Klasse .mw-readmore-toggle im statischen HTML vorkommt. */
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid currentColor;
    color: var(--mw-primary) !important;
    box-shadow: none !important;
    font: inherit;
    font-size: .95em;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    transition: color .2s ease;
}
.mw-readmore-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-bottom: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.mw-readmore-toggle[aria-expanded="true"]::after {
    margin-bottom: -2px;
    transform: rotate(-135deg);
}
.mw-readmore-toggle.is-ready { display: inline-flex; }
/* Parent-Theme setzt für button:hover/:focus einen pinken Hintergrund (#CC3366).
   Hier gezielt neutralisieren – kein Mouseover-Hintergrund, dezente Textfarbe. */
.mw-readmore-toggle:hover,
.mw-readmore-toggle:focus,
.mw-readmore-toggle:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--mw-primary) !important;
}

/* ── 19b. .mw-accordion: Card-Design, Plus/Minus ── */
.mw-accordion { gap: 8px; }

.mw-accordion__item {
    border-color: var(--mw-line);
    border-radius: var(--mw-card-radius, 6px);
    box-shadow: none;
}

.mw-accordion__button {
    min-height: 60px;
    padding: 18px 22px;
    background: #fff;
    color: var(--mw-heading, #252525);
    transition: background .15s ease;
}

.mw-accordion__button:hover,
.mw-accordion__button:focus-visible {
    background: rgba(197, 171, 81, .05);
}

.mw-accordion__button strong {
    font-size: 1.04rem;
    font-weight: 400;
    color: var(--mw-heading, #252525);
}

/* Plus-Icon (ersetzt Chevron-Dreieck) */
.mw-accordion__button::after {
    content: "+";
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(197, 171, 81, .4);
    border-radius: 50%;
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1;
    color: var(--mw-gold);
    background: transparent;
    transform: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.mw-accordion__button[aria-expanded="true"]::after {
    content: "−";
    background: var(--mw-heading, #252525);
    border-color: var(--mw-heading, #252525);
    color: #fff;
    transform: none;
}

/* Antwort-Bereich: kompakteres Padding (kein Platz für Chevron nötig) */
.mw-accordion__panel p,
.mw-accordion__answer {
    padding: 4px 22px 20px;
}

/* ── 19c. .mw-note: Plus/Minus, Card-Stil ── */
.mw-note {
    border: 1px solid var(--mw-line);
    border-radius: var(--mw-card-radius, 6px);
    box-shadow: none;
    background: #fff;
}

.mw-note summary {
    display: grid;
    grid-template-columns: 1fr 28px;
    align-items: center;
    gap: 16px;
    min-height: 60px;
    padding: 18px 22px;
    list-style: none;
    cursor: pointer;
    color: var(--mw-heading, #252525);
    transition: background .15s ease;
}

.mw-note summary::-webkit-details-marker { display: none; }
.mw-note summary:hover { background: rgba(197, 171, 81, .05); }

.mw-note summary::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(197, 171, 81, .4);
    border-radius: 50%;
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1;
    color: var(--mw-gold);
    background: transparent;
    transform: none !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.mw-note[open] summary::after {
    content: "−";
    background: var(--mw-heading, #252525);
    border-color: var(--mw-heading, #252525);
    color: #fff;
}

/* ── 19d. Native <details> in Content-Bereichen ──
   .mw-itinerary__item wird explizit ausgeschlossen (eigenes Flex-Layout). */
.mw-content details:not(.mw-itinerary__item),
.mw-faq-section details,
.mw-single details:not(.mw-itinerary__item) {
    border: 1px solid var(--mw-line);
    border-radius: var(--mw-card-radius, 6px);
    background: #fff;
    overflow: hidden;
    margin-block: 8px;
}

.mw-content details:not(.mw-itinerary__item) > summary,
.mw-faq-section details > summary,
.mw-single details:not(.mw-itinerary__item) > summary {
    display: grid;
    grid-template-columns: 1fr 28px;
    align-items: center;
    gap: 16px;
    min-height: 60px;
    padding: 18px 22px;
    list-style: none;
    cursor: pointer;
    color: var(--mw-heading, #252525);
    font-family: var(--mw-serif);
    font-size: 1.04rem;
    font-weight: 400;
    line-height: 1.4;
    transition: background .15s ease;
}

.mw-content details:not(.mw-itinerary__item) > summary::-webkit-details-marker,
.mw-faq-section details > summary::-webkit-details-marker,
.mw-single details:not(.mw-itinerary__item) > summary::-webkit-details-marker { display: none; }

.mw-content details:not(.mw-itinerary__item) > summary:hover,
.mw-faq-section details > summary:hover,
.mw-single details:not(.mw-itinerary__item) > summary:hover { background: rgba(197, 171, 81, .05); }

.mw-content details:not(.mw-itinerary__item) > summary::after,
.mw-faq-section details > summary::after,
.mw-single details:not(.mw-itinerary__item) > summary::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1px solid rgba(197, 171, 81, .4);
    border-radius: 50%;
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1;
    color: var(--mw-gold);
    background: transparent;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.mw-content details:not(.mw-itinerary__item)[open] > summary::after,
.mw-faq-section details[open] > summary::after,
.mw-single details:not(.mw-itinerary__item)[open] > summary::after {
    content: "−";
    background: var(--mw-heading, #252525);
    border-color: var(--mw-heading, #252525);
    color: #fff;
}

.mw-content details:not(.mw-itinerary__item) > *:not(summary),
.mw-faq-section details > *:not(summary),
.mw-single details:not(.mw-itinerary__item) > *:not(summary) {
    padding: 4px 22px 20px;
}

@media (prefers-reduced-motion: reduce) {
    .mw-accordion__button,
    .mw-accordion__button::after,
    .mw-note summary,
    .mw-note summary::after { transition: none; }
}

/* ── 19e. FAQ Premium Look ───────────────────────────────────────────
   Weißer Hintergrund, Card mit Schatten und großem Radius. */
.mw-faq-section {
    background: #FFFFFF !important;
}
.mw-faq-section .mw-accordion {
    background: #FFFFFF;
    border: 1px solid rgba(98,86,78,.10);
    box-shadow: 0 24px 70px rgba(81,78,72,.08);
    border-radius: 28px;
    padding: 8px;
    gap: 6px;
}
.mw-faq-section .mw-accordion__item {
    border-radius: 20px !important;
    border-color: rgba(98,86,78,.12) !important;
}
.mw-faq-section .mw-accordion__item:has([aria-expanded="true"]),
.mw-faq-section .mw-accordion__item[data-open="true"] {
    background: #FAF8F5 !important;
    border-color: rgba(98,86,78,.18) !important;
}
.mw-faq-section .mw-accordion__button:hover,
.mw-faq-section .mw-accordion__button:focus-visible {
    background: rgba(98,86,78,.04) !important;
}
.mw-faq-section details {
    border-radius: 20px !important;
    border-color: rgba(98,86,78,.12) !important;
}
.mw-faq-section details[open] {
    background: #FAF8F5 !important;
    border-color: rgba(98,86,78,.18) !important;
}
.mw-faq-section details > summary:hover {
    background: rgba(98,86,78,.04) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   § 20 — REISE-DETAILSEITEN: Hero · Ship-Teaser · Service-Panel
   Ziel: Journaway-Level Premium — Bild dominiert, Kontrast gesichert.
   Lokal ≠ Server — erst deployen, dann live-testen.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 20a. Hero — Bild-dominiert, Inhalt unten verankert ── */

/* Basis-Klasse hat bereits align-items: end; reise-Override wird hier zurückgesetzt */
.mw-hero--reise {
    align-items: end;
    min-height: clamp(var(--mw-hero-height-mobile, 560px), 82vh, var(--mw-hero-height, 1040px));
}

/* Stärkerer Gradient: oben dezent, unten kräftig für Lesbarkeit */
.mw-hero--reise .mw-hero__shade {
    background:
        linear-gradient(
            180deg,
            rgba(37,37,37,.30) 0%,
            rgba(37,37,37,.04) 35%,
            rgba(37,37,37,.52) 68%,
            rgba(37,37,37,.86) 100%
        ),
        linear-gradient(90deg, rgba(37,37,37,.28) 0%, transparent 60%) !important;
}

/* Inhalt: oben Luft für Breadcrumbs, unten am Bild verankert */
.mw-hero--reise .mw-hero__content {
    padding-top: clamp(80px, 10vh, 130px);
    padding-bottom: clamp(52px, 6vh, 80px);
}

/* H1: etwas kleiner — Bild darf dominieren */
.mw-hero--reise h1 {
    max-width: 860px;
    font-size: clamp(2.5rem, 4.2vw, 4.8rem);
    line-height: 1.02;
    text-wrap: balance;
}

/* Subtitle: kompakter */
.mw-hero--reise .mw-hero__content > p {
    font-size: 1.08rem;
    max-width: 680px;
    margin-top: 1rem;
    opacity: .9;
}

/* Route-Badge: schlanker, Gold-Akzent */
.mw-trip-hero__route {
    min-height: 32px;
    padding: 0 12px;
    font-size: .82rem;
    font-weight: 700;
    border-color: rgba(197,171,81,.40);
    background: rgba(197,171,81,.18);
}

/* Datumsbox: kompakter, mehr Tiefe */
.mw-trip-hero__meta {
    margin-top: 20px;
    padding: 11px 17px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(37,37,37,.50);
    backdrop-filter: blur(16px);
}
.mw-trip-hero__meta span {
    font-size: .67rem;
    letter-spacing: .05em;
}
.mw-trip-hero__meta strong {
    font-size: 1.18rem;
}

/* ── 20b. Ship-Teaser: Kontrast-Fix + Premium-Look ── */

/* KRITISCH: H2 war --mw-ink (dunkel) auf dunklem Teal-Hintergrund */
.mw-feature-block.mw-ship-teaser h2 {
    color: #fff;
    font-size: clamp(2.1rem, 3vw, 2.9rem);
    line-height: 1.08;
}

/* Eyebrow war var(--mw-petrol) auf dunklem Hintergrund = unsichtbar */
.mw-feature-block.mw-ship-teaser .mw-eyebrow {
    color: var(--mw-gold, #C5AB51);
}

/* Rechtes Panel: tiefes Dunkelblau mit eleganter Tiefe */
.mw-feature-block.mw-ship-teaser > div {
    background: linear-gradient(158deg, #312D29 0%, #3E3833 52%, #4A4440 100%);
    padding: clamp(36px, 3.8vw, 52px);
}

/* Ship-Button auf dunklem Panel: Gold-Akzent */
.mw-feature-block.mw-ship-teaser .mw-button {
    border-color: rgba(197,171,81,.60);
    color: rgba(240,235,225,.94);
    background: transparent;
}
.mw-feature-block.mw-ship-teaser .mw-button:hover,
.mw-feature-block.mw-ship-teaser .mw-button:focus-visible {
    background: var(--mw-gold, #C5AB51);
    border-color: var(--mw-gold, #C5AB51);
    color: #fff;
}

/* Ship Mini-Facts: Token-Radius, leicht mehr Kontrast */
.mw-ship-mini-facts {
    border-radius: var(--mw-card-radius, 6px);
    border-color: rgba(255,255,255,.16);
}

/* ── 20c. Service-Panel: Eyebrow-Kontrast + Note-Cards ── */

/* "SERVICE" Eyebrow auf dunklem Teal-Panel war unsichtbar */
.mw-trip-service-panel .mw-eyebrow {
    color: var(--mw-gold, #C5AB51);
}

/* Panel-Hintergrund: etwas tiefer und ruhiger */
.mw-trip-service-panel {
    background: linear-gradient(148deg, #312D29 0%, #3E3833 58%, #4A4440 100%);
    border-radius: var(--mw-card-radius, 6px);
    padding: 38px;
}

/* Service-Note-Karten: besserer Kontrast, Token-Radius */
.mw-service-notes article {
    background: rgba(255,255,255,.13);
    border-color: rgba(255,255,255,.22);
    border-radius: var(--mw-card-radius, 6px);
    padding: 20px;
}
.mw-service-notes h3 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

/* ── 20d. Mobile-Anpassungen ── */

@media (max-width: 1024px) {
    .mw-hero--reise h1 {
        font-size: clamp(2.3rem, 5vw, 3.8rem);
    }
}

@media (max-width: 680px) {
    .mw-hero--reise .mw-hero__content {
        padding-top: clamp(70px, 11vh, 110px);
        padding-bottom: 40px;
    }
    .mw-hero--reise h1 {
        font-size: clamp(1.9rem, 8vw, 2.8rem);
        line-height: 1.06;
    }
    .mw-feature-block.mw-ship-teaser > div {
        padding: 28px 22px;
    }
    .mw-trip-service-panel {
        padding: 26px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mw-feature-block.mw-ship-teaser .mw-button { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   § 21 — SCHIFF-KABINEN: Textumbruch · Aktiv-Zustand · Passolution
   ══════════════════════════════════════════════════════════════════════ */

/* ── 21a. Kabinen-Tab: sauberer Textumbruch für lange Namen ── */

.mw-ship-cabin-tab span {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: balance;
    white-space: normal;
}

.mw-ship-cabin-tab small {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* ── 21b. Kabinen-Tab Aktiv-Zustand: Text und Code auf Weiß ──
   meerweit-components.css setzt color: var(--mw-primary) !important auf span/small.
   Gegenmittel: eigenes !important mit höherer Spezifität (.mw-ship-cabins-Kontext). */

.mw-ship-cabins .mw-ship-cabin-tab.is-active {
    background: var(--mw-heading, #252525);
    border-color: var(--mw-heading, #252525);
    color: #fff !important;
}

.mw-ship-cabins .mw-ship-cabin-tab.is-active span {
    color: #fff !important;
}

.mw-ship-cabins .mw-ship-cabin-tab.is-active small {
    color: rgba(255, 255, 255, .82) !important;
}

/* ── 21c. Kabinen-Panel rechts: H3 umbricht sauber ── */

.mw-ship-cabin-panel__content h3 {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    max-width: 100%;
}

/* ── 21d. Passolution-Embed: volle Breite erzwingen ── */

#passolution .mw-page-landing__form-wrap {
    grid-template-columns: 1fr;
    max-width: 100%;
}

#passolution .mw-page-landing__form-panel {
    width: 100%;
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

#passolution .pds-embed,
#passolution iframe {
    width: 100% !important;
    max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   §22  PREMIUM CARD SYSTEM 2.0 — Aman · Explora · NatGeo-Niveau
   Architektur: Bild dominiert (4:5) · Badges oben-links gestapelt ·
   Region über Titel · sauberer Facts-Strip darunter.
   ═══════════════════════════════════════════════════════════════ */

/* ── 22a. Bildformat 4:5 — Portrait, editorial ── */

.mw-trip-card__media {
    aspect-ratio: 4 / 5;
    height: auto !important; /* override fixed height from meerweit.css */
}

/* Scrim: oben klar, unten tief — Titel immer lesbar */
.mw-trip-card__media::after {
    background: linear-gradient(
        180deg,
        rgba(37, 37, 37,.00) 0%,
        rgba(37, 37, 37,.04) 35%,
        rgba(37, 37, 37,.62) 68%,
        rgba(37, 37, 37,.92) 100%
    );
}

/* ── 22b. Badge-Stack: oben-links, vertikal gestapelt ── */

/* Wrapper für beide Badges — absolute oben-links im Bild */
.mw-trip-card__badges {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

/* Badge 1 – Gold-Kapsel (Top-Angebot) */
.mw-trip-card__badges .mw-chip {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-self: flex-start !important;
    width: auto !important;
    background: var(--mw-gold, #C5AB51);
    color: #fff !important;
    border: none !important;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.20);
    min-height: 0;
    white-space: nowrap;
    line-height: 1.6;
}

/* Badge 2 – Dark-Glass-Label (Deutschsprachige Reiseleitung o. ä.) */
.mw-trip-card__badges .mw-card-badge {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-self: flex-start !important;
    width: auto !important;
    background: var(--mw-badge-label-bg, rgba(37, 37, 37,.42));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--mw-badge-label-color, rgba(247,245,240,.92)) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 3px;
    padding: 3px 9px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    box-shadow: none;
    min-height: 0;
    white-space: nowrap;
    line-height: 1.6;
}

/* ── 22c. Overlay: Region · Titel — sauber im unteren Bilddrittel ── */

.mw-trip-card__overlay .mw-trip-card__meta { display: none; }
.mw-trip-card__overlay .mw-trip-card__route--overlay { display: none; }
.mw-trip-card__overlay .mw-card-facts { display: none; }
.mw-trip-card__overlay .mw-card-cta { display: none; }

/* Reiseziel/Gebiet — kleine Versalien über dem Titel */
.mw-trip-card__region {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(247,245,240,.70);
    margin-bottom: 6px;
    line-height: 1.3;
}

.mw-trip-card__overlay h3 {
    min-height: 0 !important;
    font-size: clamp(1.18rem, 1.5vw, 1.6rem);
    line-height: 1.16;
    margin: 0 0 0 0;
}

/* ── 22d. Body-Facts-Strip: konfigurierbare Spalten ──
   meerweit.css schaltet body-summary und body-facts via
   display:none aus — wir reaktivieren mit höherer Spezifität. */

.mw-trip-card .mw-trip-card__body {
    flex: none;
    padding: 0;
    position: relative; /* Positionierungskontext für den Body-Stretch-Link */
}

/* Info-/Body-Bereich klickbar: transparenter Link über dem gesamten Body.
   Facts liegen darunter (kein z-index) und lösen so den Link aus. */
.mw-trip-card .mw-trip-card__body-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

/* Ship-Card: ganze Kachel klickbar (Body-Link über dem Body); Name-Link + CTA
   bleiben als zugängliche Links darüber. */
.mw-ship-card .mw-ship-card__body { position: relative; }
.mw-ship-card .mw-ship-card__body-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}
.mw-ship-card .mw-ship-card__name a,
.mw-ship-card .mw-ship-card__cta {
    position: relative;
    z-index: 2;
}

/* Cruise-Compass-Card: NUR der Fakten-Bereich klickbar zum Angebot – der Fuß
   (eigener Beratungs-/Angebot-Link) bleibt bewusst separat. */
.mw-trip-card--compass .mw-trip-card__body-summary { position: relative; }
.mw-trip-card--compass .mw-compass-card__facts-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

.mw-trip-card .mw-trip-card__body-summary {
    display: block;
}

.mw-trip-card .mw-trip-card__route--body { display: none; }
.mw-trip-card .mw-trip-card__body-title { display: none; }
.mw-trip-card .mw-trip-card__body-cta  { display: none; }

.mw-trip-card .mw-trip-card__body-facts {
    display: grid !important;
    grid-template-columns: 2.2fr 1fr 1.2fr !important;
    margin: 0 !important;
    background: transparent !important;
    border-top: 1px solid var(--mw-line, rgba(37,37,37,.10));
    border-radius: 0 !important;
    overflow: visible !important;
    gap: 0 !important;
}

.mw-trip-card .mw-trip-card__body-facts > div {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 16px !important;
    border-right: 1px solid var(--mw-line, rgba(37,37,37,.10)) !important;
    background: transparent !important;
    min-height: 64px;
    justify-content: flex-start;
}

.mw-trip-card .mw-trip-card__body-facts > div:last-child {
    border-right: 0;
}

.mw-trip-card .mw-trip-card__body-facts dt {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mw-muted, #6B665F);
    line-height: 1;
    margin: 0 0 .32rem;
}

.mw-trip-card .mw-trip-card__body-facts dd {
    font-size: .84rem;
    line-height: 1.32;
    color: var(--mw-heading, #252525);
    margin: 0;
}

/* Preis-Zelle: Gold — via .mw-price class auf dem <dd> */
.mw-trip-card .mw-trip-card__body-facts dd.mw-price {
    color: var(--mw-gold, var(--mw-accent)) !important;
    font-size: .9rem;
    font-weight: 600;
}

/* Ganze Karte: signalisiert Klickbarkeit */
.mw-trip-card { cursor: pointer; }

/* ── 22e. Ship-Card: Trip-Card-Design ── */

.mw-ship-card { cursor: pointer; }

/* Facts-Bar unterhalb des Bilds */
.mw-ship-card__body-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    gap: 1px;
    background: var(--mw-line, rgba(37,37,37,.10));
    border-top: 1px solid var(--mw-line, rgba(37,37,37,.10));
}

.mw-ship-card__body-facts > div {
    padding: 12px 14px;
    background: var(--mw-bg, #F7F5F0);
    min-height: 0;
}

.mw-ship-card__body-facts dt {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--mw-muted, #6B665F);
    margin-bottom: .2rem;
    white-space: nowrap;
}

.mw-ship-card__body-facts dd {
    margin: 0;
    font-family: 'Jost', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    color: var(--mw-heading, #252525);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* ── 22f. Mobile ── */

@media (max-width: 680px) {
    .mw-trip-card__media {
        aspect-ratio: 3 / 4;
    }

    .mw-trip-card .mw-trip-card__body-facts {
        grid-template-columns: 1fr !important;
    }

    .mw-trip-card .mw-trip-card__body-facts > div {
        padding: 10px 14px !important;
        min-height: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--mw-line, rgba(37,37,37,.10)) !important;
        justify-content: flex-start !important;
    }

    .mw-trip-card .mw-trip-card__body-facts > div:last-child {
        border-bottom: 0 !important;
    }

    .mw-trip-card .mw-trip-card__body-facts dt { font-size: .55rem; }
    .mw-trip-card .mw-trip-card__body-facts dd { font-size: .78rem; }

    .mw-ship-card__body-facts {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── 22g. Ship-Card-Grid: 3 Spalten wie Reisen ── */

/* Override parent theme: 2 → 3 Spalten */
.mw-ship-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Bildhöhe passend für schmalere 3-Spalten-Karten */
.mw-ship-card-grid .mw-ship-card__media {
    height: clamp(260px, 22vw, 380px) !important;
    min-height: 0 !important;
}

/* Kleinerer Overlay-Titel (war für 2-Spalten-Karten dimensioniert) */
.mw-ship-card-grid .mw-ship-card__overlay h3 {
    font-size: clamp(1.4rem, 1.6vw, 1.9rem) !important;
    max-width: 18ch !important;
}

/* Kompaktere Subtitle im 3-Spalten-Layout */
.mw-ship-card-grid .mw-ship-card__subtitle {
    font-size: .82rem !important;
    min-height: 0 !important;
    margin-bottom: 12px !important;
    -webkit-line-clamp: 2 !important;
}

/* Faktenleiste anpassen */
.mw-ship-card-grid .mw-card-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
    .mw-ship-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .mw-ship-card-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   §23  HERO SYSTEM V3 — Premium Expedition Design
   Aman · Explora · NatGeo-Niveau. Emotion vor Information.
   Hierarchie: Bild → Titel → Route/Datum → Faktenleiste.
   Technisch: CSS-Grid-Placement überschreibt DOM-Reihenfolge —
   Breadcrumb bleibt oben, Chips + H1 verankern unten.
   ═══════════════════════════════════════════════════════════════ */

/* ── 23a. Hero-Container: volle Bildwirkung, maximale Höhe ── */

.mw-hero--reise {
    min-height: clamp(var(--mw-hero-height-mobile, 560px), 90vh, var(--mw-hero-height, 1040px));
    align-items: stretch;
}

/* Premium-Scrim: oben minimal → Bild sichtbar; unten stark → Titel lesbar */
.mw-hero--reise .mw-hero__shade {
    background:
        linear-gradient(
            180deg,
            rgba(37, 37, 37,.20) 0%,
            rgba(37, 37, 37,.03) 26%,
            rgba(37, 37, 37,.48) 60%,
            rgba(37, 37, 37,.92) 100%
        ),
        linear-gradient(90deg, rgba(37, 37, 37,.28) 0%, transparent 52%) !important;
}

/* ── 23b. Content-Grid: visuelle Hierarchie via Grid-Placement ──
   Zeile 1: Breadcrumb  |  Zeile 2: Spacer  |  Zeile 3: Badges (opt.)
   Zeile 4: Info-Strip  |  Zeile 5: H1 (Anker unten)              */

.mw-hero--reise .mw-trip-hero__content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto auto;
    column-gap: 0;
    row-gap: 0;
    align-items: end;
    padding-top: clamp(72px, 9vh, 108px);
    padding-bottom: clamp(52px, 6.5vh, 80px);
}

/* Breadcrumb: Zeile 1 — dezenter Anker oben */
.mw-hero--reise .mw-trip-hero__content .mw-breadcrumbs {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-bottom: 0;
    font-size: .72rem;
    opacity: .60;
    letter-spacing: .01em;
    color: rgba(255,255,255,.80);
}
.mw-hero--reise .mw-trip-hero__content .mw-breadcrumbs a { color: rgba(255,255,255,.80); }

/* Eyebrow/Kicker: dezent über H1 — nur sichtbar wenn gesetzt */
.mw-hero--reise .mw-trip-hero__content .mw-eyebrow {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(197,171,81,.90);
    margin-bottom: 10px;
}

/* Hero Badges: Zeile 3 — Gold-Chip + Label über H1 */
.mw-hero--reise .mw-trip-hero__content .mw-trip-hero__badges {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

/* Eyebrow verstecken wenn Badges aktiv */
.mw-hero--reise .mw-trip-hero__badges ~ .mw-eyebrow { display: none; }

.mw-hero--reise .mw-trip-hero__badges .mw-chip {
    display: inline-flex !important;
    background: var(--mw-gold, #C5AB51);
    color: #fff !important;
    border: none !important;
    border-radius: 999px;
    padding: 4px 13px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    white-space: nowrap;
    position: static !important;
}

.mw-hero--reise .mw-trip-hero__badges .mw-card-badge {
    display: inline-flex !important;
    background: var(--mw-badge-label-bg, rgba(37, 37, 37,.42));
    backdrop-filter: blur(8px);
    color: var(--mw-badge-label-color, rgba(247,245,240,.92)) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 3px;
    padding: 4px 11px;
    font-size: .60rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    white-space: nowrap;
    position: static !important;
}

/* H1: Zeile 4 — der einzige Held */
.mw-hero--reise .mw-trip-hero__content h1 {
    grid-column: 1;
    grid-row: 4;
    max-width: 900px;
    font-size: clamp(3.375rem, 6vw, 5.75rem);
    line-height: .97;
    font-weight: 300;
    letter-spacing: -.01em;
    text-wrap: balance;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    text-shadow: 0 2px 44px rgba(37, 37, 37,.24);
}

/* Subtitle: gehört nicht in den Hero */
.mw-hero--reise .mw-trip-hero__content > p { display: none; }

/* Info-Strip: Zeile 5 — horizontale Chips-Reihe unter H1 */
.mw-hero--reise .mw-trip-hero__content .mw-trip-hero__info-strip {
    grid-column: 1;
    grid-row: 5;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
}

/* Einzelner Info-Chip im Strip */
.mw-hero--reise .mw-trip-hero__meta {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(37, 37, 37,.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: fit-content;
    margin-top: 0;
    flex-shrink: 0;
}

/* CTA-Buttons: Hero verkauft Emotion, nicht Aktionen */
.mw-hero--reise .mw-home-hero__actions { display: none; }

/* Altes Route-Chip-Element (Fallback-Kompatibilität) */
.mw-hero--reise .mw-trip-hero__content .mw-trip-hero__route { display: none; }

/* ── 23c. Info-Chip Typografie ── */

.mw-hero--reise .mw-trip-hero__meta span {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(197,171,81,.88);
    font-family: inherit;
}

.mw-hero--reise .mw-trip-hero__meta strong {
    font-size: .83rem;
    font-weight: 500;
    color: rgba(247,245,240,.94);
    font-family: inherit;
}

/* ── 23e. Faktenleiste: elegant, nicht konkurrierend ── */

.mw-info-bar__inner > div {
    min-height: 72px;
    padding: 13px clamp(16px, 1.8vw, 24px);
}

.mw-info-bar__inner > div > span {
    font-size: .64rem;
    letter-spacing: .05em;
}

.mw-info-bar__inner > div > strong {
    font-size: clamp(.92rem, 1.1vw, 1.06rem);
}

/* ── 23f. Mobile ── */

@media (max-width: 680px) {
    .mw-hero--reise {
        min-height: clamp(var(--mw-hero-height-mobile, 560px), 88svh, var(--mw-hero-height-tablet, 760px));
    }

    .mw-hero--reise .mw-trip-hero__content {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto auto auto;
        padding-top: clamp(62px, 8vh, 88px);
        padding-bottom: clamp(36px, 5vh, 52px);
        column-gap: 0;
    }

    .mw-hero--reise .mw-trip-hero__content .mw-trip-hero__badges {
        grid-row: 3;
        margin-bottom: 10px;
    }

    .mw-hero--reise .mw-trip-hero__content .mw-trip-hero__info-strip {
        grid-row: 5;
        margin-top: 12px;
        gap: 5px;
    }

    /* H1: Zeile 4 */
    .mw-hero--reise .mw-trip-hero__content h1 {
        grid-column: 1;
        grid-row: 4;
        font-size: clamp(2.4rem, 9vw, 3.2rem);
        line-height: 1.02;
        margin-top: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mw-hero--reise * { transition: none !important; animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §24 — Premium Landing: neue Block-Typen + SEO Mehr-lesen
   ───────────────────────────────────────────────────────────────────────────── */

/* 24a — Mehr-lesen Button */
.mw-read-more__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    padding: 8px 0;
    background: none;
    border: none;
    color: var(--mw-gold, #C5AB51);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: opacity .18s;
}
.mw-read-more__btn:hover { opacity: .7; }
.mw-read-more__btn svg { flex-shrink: 0; }

/* 24b — Zitat / Testimonial */
.mw-page-landing__quote {
    margin: 0;
    padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 52px);
    border-left: 3px solid var(--mw-gold, #C5AB51);
    background: rgba(255,255,255,.72);
    border-radius: 0 8px 8px 0;
}
.mw-page-landing__quote > p {
    margin: 0;
    font-size: clamp(1.1rem, 1.8vw, 1.38rem);
    font-family: var(--mw-serif);
    font-weight: 400;
    line-height: 1.55;
    color: var(--mw-heading, #252525);
    font-style: italic;
}
.mw-page-landing__quote-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}
.mw-page-landing__quote-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.mw-page-landing__quote-footer cite {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mw-page-landing__quote-footer cite strong {
    font-size: .88rem;
    font-weight: 700;
    color: var(--mw-heading, #252525);
}
.mw-page-landing__quote-footer cite span {
    font-size: .75rem;
    color: var(--mw-muted);
}

/* 24c — Extern-Widget / Embed */
.mw-page-landing__block--embed { background: var(--mw-sand, #F5F2EC); }
.mw-page-landing__embed-wrap {
    margin-top: 28px;
    padding: clamp(20px, 2.5vw, 36px);
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--mw-line);
}
.mw-page-landing__embed-wrap iframe {
    width: 100%;
    border: none;
    display: block;
}

/* 25 — Intro-Sektion Layout-Varianten */

/* Volle Breite: Textbreite nicht durch Split begrenzen */
.mw-page-landing__intro--full .mw-page-landing__intro-copy { max-width: 72ch; }
.mw-page-landing__intro--full .mw-page-landing__intro-copy .mw-content { max-width: none; }

/* Text / Bild: Bild rechts im Editorial-Split */
.mw-page-landing__intro-media {
    min-width: 0;
    align-self: start;
}
.mw-page-landing__intro-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--mw-card-radius, 8px);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* Benefits unterhalb (Text/Bild + Benefits kombiniert) */
.mw-page-landing__benefits--below { margin-top: clamp(28px, 3vw, 44px); }

/* Mobile: Split einspaltig */
@media (max-width: 767px) {
    .mw-page-landing__intro-img { aspect-ratio: 16 / 9; }
}

/* ═══════════════════════════════════════════════════════════════
   §26  FOOTER NAVIGATION — Menü-Optik statt Accordion-Karten
   Farben via Customizer: --mw-footer-text · --mw-footer-link-hover
   · --mw-footer-card-bg · --mw-footer-card-border
   ═══════════════════════════════════════════════════════════════ */

/* ── 26a. Footer-Gruppen: kein Kartendesign ── */

.mw-footer-group {
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.mw-footer-group[open] {
    background: transparent !important;
}

/* CTA-Karte: bleibt als einzige Card-Karte */
.mw-footer__cta-card {
    background: var(--mw-footer-card-bg, rgba(255,255,255,.08)) !important;
    border: 1px solid var(--mw-footer-card-border, rgba(255,255,255,.18)) !important;
    border-radius: var(--mw-card-radius, 20px) !important;
    box-shadow: none !important;
}

/* ── 26b. Spaltenüberschrift (summary) als Navigations-Header ── */

.mw-footer-group summary,
.mw-footer--compact .mw-footer-group summary {
    background: transparent !important;
    min-height: 0 !important;
    padding: 0 0 10px !important;
    margin-bottom: 14px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--mw-footer-text, #fff) !important;
    opacity: .50;
    border-bottom: 1px solid var(--mw-footer-card-border, rgba(255,255,255,.18));
    cursor: pointer;
    pointer-events: auto;
}

/* Desktop: kein Pfeil, kein Click-Cursor */
@media (min-width: 900px) {
    .mw-footer-group summary {
        cursor: default !important;
        pointer-events: none !important;
    }
    .mw-footer-group summary::after { display: none !important; }
}

/* ── 26c. Navigationslinks ── */

.mw-footer-menu,
.mw-footer-menu ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.mw-footer-menu li { list-style: none !important; }

.mw-footer-menu a,
.mw-footer-menu li a,
.mw-footer-group > a,
.mw-footer--compact .mw-footer-group a,
.mw-footer--compact .mw-footer-menu a {
    display: block !important;
    padding: 5px 0 !important;
    font-size: var(--mw-footer-menu-size, 14px);
    line-height: 1.55;
    background: transparent !important;
    border: none !important;
    color: color-mix(in srgb, var(--mw-footer-text, #fff) 68%, transparent) !important;
    text-decoration: none !important;
    transition: color .15s ease;
}

.mw-footer-menu a:hover,
.mw-footer-menu li a:hover,
.mw-footer-group > a:hover {
    color: var(--mw-footer-link-hover, #fff) !important;
    background: transparent !important;
}

/* ── 26d. Inline-Texte (Öffnungszeiten etc.) ── */

.mw-footer-group__text,
.mw-footer--compact .mw-footer-group__text {
    display: block !important;
    padding: 5px 0 !important;
    font-size: .9rem;
    background: transparent !important;
    color: color-mix(in srgb, var(--mw-footer-text, #fff) 58%, transparent) !important;
}

/* ── 26e. Social-Buttons als Pills ── */

.mw-footer__social {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.mw-footer__social a {
    display: inline-flex !important;
    align-items: center;
    padding: 5px 14px !important;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.26) !important;
    border-radius: 999px;
    background: transparent !important;
    color: color-mix(in srgb, var(--mw-footer-text, #fff) 78%, transparent) !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    text-decoration: none !important;
}

.mw-footer__social a:hover {
    background: rgba(255,255,255,.12) !important;
    color: var(--mw-footer-text, #fff) !important;
    border-color: rgba(255,255,255,.45) !important;
}

/* ── 26f. Mobile: Gruppen mit Trennlinie statt Karte ── */

@media (max-width: 899px) {
    .mw-footer-group {
        border-bottom: 1px solid var(--mw-footer-card-border, rgba(255,255,255,.12)) !important;
        padding-bottom: 8px !important;
        margin-bottom: 4px !important;
    }

    .mw-footer-group summary {
        padding: 12px 0 12px !important;
        margin-bottom: 0;
        border-bottom: none;
        opacity: .80;
    }

    .mw-footer-group[open] summary {
        margin-bottom: 10px;
        opacity: .90;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   §27  PREMIUM UX UPDATE — Typografie · Hero-Overlay · Karten · Infobar
   Cormorant Garamond für Headlines · Leichtere Hero-Overlays · Badge-Neuordnung
   Statische Infobar unter Hero · Schiff-Hero aligned mit Reisen-Hero
   ══════════════════════════════════════════════════════════════════════ */

/* ── 27-pre. Faktenleiste (mw-trip-facts) — nie scrollen, nie abschneiden ──── */

/* Kein horizontales Scrollen (No-Go). Die Zellen füllen die Kartenbreite und
   schrumpfen bei Bedarf; reicht der Platz nicht, bricht die Reihe sauber um.
   Der CTA bleibt eine normale Zelle in der Reihe (kein Sticky-Fremdkörper). */
.mw-trip-facts .mw-info-bar__inner {
    flex-wrap: wrap !important;
    overflow: visible !important;
    align-items: stretch !important;
    gap: 6px !important;
}
.mw-trip-facts .mw-info-bar__inner::-webkit-scrollbar { display: none; }

/* Alle Zellen: wachsen um die Breite zu füllen, schrumpfen um zu passen.
   Inhalt oben ausgerichtet, damit alle Labels (Termine, Dauer, Preis …) auf
   gleicher Höhe beginnen – auch wenn ein Wert (Datum, Flug) zweizeilig wird. */
.mw-trip-facts .mw-info-bar__inner > div {
    flex: 1 1 auto !important;
    /* min-content: Zelle wird nie schmaler als ihr längstes Wort/Label →
       keine hässlichen Wort-/Silbentrennungen (z. B. „Irace-ma"). Lange Werte
       (Flug, Datum) brechen stattdessen an Leerzeichen um. */
    min-width: min-content !important;
    min-height: 66px !important;
    padding: 10px 13px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}
/* CTA-Zelle: Button (ohne Eyebrow) vertikal zentriert. */
.mw-trip-facts .mw-info-bar__inner > .mw-trip-facts__cta {
    justify-content: center !important;
    align-items: flex-start !important;
}

/* ── TERMINE: nimmt den restlichen Platz ─────────────────────────────────── */
.mw-trip-facts .mw-trip-fact--date {
    flex: 1 0 150px !important;
    min-width: 140px !important;
    position: relative !important;
    cursor: pointer;
}

/* Sichtbares Datum — eigene Styles, KEINE Label-Styles erben */
.mw-trip-facts .mw-trip-fact__date-display,
.mw-trip-facts .mw-trip-fact__date-display > span {
    display: block !important;
    font-family: 'Jost', sans-serif !important;
    font-size: .93rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--mw-heading, var(--mw-ink)) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    pointer-events: none;
}

/* Transparenter Select-Overlay */
.mw-trip-facts .mw-trip-fact--date .mw-trip-fact__selector {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    opacity: 0 !important;
    z-index: 2;
    cursor: pointer;
    display: block !important;
}
.mw-trip-facts .mw-trip-fact--date .mw-trip-fact__selector select {
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
}

/* ── Termin wählbar: klar als Auswahlfeld erkennbar (nur bei mehreren Terminen) ── */
.mw-trip-facts .mw-trip-fact--date:has(.mw-trip-fact__selector) {
    border: 1px solid rgba(197, 171, 81, .45) !important;
    border-radius: 10px !important;
    background: rgba(197, 171, 81, .06) !important;
    padding: 8px 46px 8px 14px !important;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.mw-trip-facts .mw-trip-fact--date:has(.mw-trip-fact__selector):hover,
.mw-trip-facts .mw-trip-fact--date:has(.mw-trip-fact__selector):focus-within {
    border-color: var(--mw-gold, #C5AB51) !important;
    background: rgba(197, 171, 81, .12) !important;
    box-shadow: 0 4px 14px rgba(197, 171, 81, .16) !important;
}
/* Label „TERMIN AUSWÄHLEN“ dezent in Gold als zusätzlicher Hinweis */
.mw-trip-facts .mw-trip-fact--date:has(.mw-trip-fact__selector) > span:first-child {
    color: var(--mw-gold, #9B8B6C) !important;
}

/* Chevron: größer, gold, in dezentem runden Badge → klares Dropdown-Signal */
.mw-trip-facts .mw-trip-fact--date:has(.mw-trip-fact__selector)::after {
    content: '▾';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(197, 171, 81, .16);
    color: var(--mw-gold, #C5AB51);
    font-size: .82rem;
    line-height: 1;
    pointer-events: none;
    transition: background-color .2s ease, color .2s ease;
    z-index: 1;
}
.mw-trip-facts .mw-trip-fact--date:has(.mw-trip-fact__selector):hover::after,
.mw-trip-facts .mw-trip-fact--date:has(.mw-trip-fact__selector):focus-within::after {
    background: var(--mw-gold, #C5AB51);
    color: #FFFFFF;
}

/* DAUER: "7 Nächte" — Inhalt treibt Breite */
.mw-trip-facts .mw-trip-fact--duration {
    flex: 0 0 auto !important;
    min-width: 72px !important;
}

/* PREIS: max "10.999 €" */
.mw-trip-facts .mw-trip-fact--price {
    flex: 0 0 auto !important;
    min-width: 80px !important;
}

/* SCHIFF: längste Schiffsnamen variieren */
.mw-trip-facts .mw-trip-fact--ship {
    flex: 0 0 auto !important;
    min-width: 90px !important;
    max-width: 160px !important;
}

/* SPRACHE: kompakt */
.mw-trip-facts .mw-trip-fact--language {
    flex: 0 0 auto !important;
    min-width: 50px !important;
}

/* FLUG & ANREISE, STATUS */
.mw-trip-facts .mw-trip-fact--flight,
.mw-trip-facts .mw-trip-fact--status {
    flex: 0 0 auto !important;
    min-width: 72px !important;
}

/* Labels — immer vollständig lesbar (nie abschneiden); bei Bedarf zweizeilig. */
.mw-trip-facts .mw-info-bar__inner > div > span:first-child {
    font-family: 'Jost', sans-serif !important;
    font-size: .57rem !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    color: var(--mw-muted, #6B665F) !important;
    display: block !important;
    margin-bottom: 3px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.15 !important;
    max-width: 100%;
}

/* Werte — alle Zellen. Keine Silbentrennung und kein Umbruch mitten im Wort;
   nur an Leerzeichen umbrechen (nur ein einzelnes, überlanges Wort würde als
   letzte Reserve gebrochen). Verhindert „Irace-ma" & Co. */
.mw-trip-facts .mw-info-bar__inner > div > strong {
    font-family: 'Jost', sans-serif !important;
    font-size: .93rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
}

/* ── CTA-Zelle: kompakter, linksbündiger Button (dunkles Taupe), vertikal
   zentriert. Nimmt weniger Breite ein, sodass die Fakten mehr Raum bekommen. ── */
.mw-trip-facts__cta {
    padding: 10px 13px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}
.mw-trip-facts__cta .mw-button,
.mw-trip-facts__cta .mw-button--primary {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    align-self: flex-start !important;
    margin-top: 0 !important;
    padding: 11px 16px !important;
    background: rgba(37, 37, 37, 0.9) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--mw-sand, #EDE7DA) !important;
    border: 1px solid rgba(197, 171, 81, 0.38) !important;
    border-radius: 999px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    transition: background .2s ease, border-color .2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
.mw-trip-facts__cta .mw-button:hover,
.mw-trip-facts__cta .mw-button--primary:hover {
    background: rgba(37, 37, 37, 0.96) !important;
    border-color: rgba(197, 171, 81, 0.62) !important;
}
.mw-trip-facts__cta .mw-button svg,
.mw-trip-facts__cta .mw-button--primary svg {
    width: 13px !important;
    height: 13px !important;
    fill: var(--mw-sand, #EDE7DA) !important;
    stroke: none !important;
    flex-shrink: 0;
    transition: transform .2s ease !important;
}
/* Beim Hover Pfeil dezent golden + kleiner Vorschub – klare Handlungsaufforderung */
.mw-trip-facts__cta .mw-button:hover svg,
.mw-trip-facts__cta .mw-button--primary:hover svg {
    fill: var(--mw-gold, var(--mw-accent)) !important;
    transform: translateX(2px) !important;
}

/* Desktop: alles in EINER Zeile, ohne Scroll. Zellen schrumpfen und lange
   Werte (Datum, Flug) brechen intern dezent um; der CTA behält eine feste
   Breite und bleibt als letzte Zelle sauber integriert. Mobil greift die
   umbrechende Basis (flex-wrap:wrap) — dort stapeln die Fakten statt zu
   scrollen. Live verifiziert (Go-Live 2026-07). */
@media (min-width: 981px) {
    .mw-trip-facts .mw-info-bar__inner {
        flex-wrap: nowrap !important;
    }
    .mw-trip-facts .mw-trip-fact--date {
        flex: 1.3 1 120px !important;
    }
    .mw-trip-facts .mw-trip-fact--flight {
        flex: 1.3 1 110px !important;
    }
    /* „Sprache" braucht etwas mehr Platz, damit das Label vollständig passt. */
    .mw-trip-facts .mw-trip-fact--language {
        min-width: 58px !important;
    }
    /* CTA-Zelle kompakt und bei Bedarf leicht schrumpfbar, damit alles in einer
       Zeile bleibt (statt den CTA in eine zweite Zeile umzubrechen). */
    .mw-trip-facts .mw-info-bar__inner > .mw-trip-facts__cta {
        flex: 0 1 150px !important;
        min-width: 128px !important;
        max-width: 150px !important;
    }
}

/* ── 27a. Typografie: Jost durchgängig für Überschriften + Body ─────────
   --mw-serif und --mw-sans beide auf Jost — einheitliche Sansschrift. */

:root {
    --mw-serif: 'Jost', ui-sans-serif, sans-serif;
}

/* Gewicht-Korrekturen für Jost-Überschriften */
h1, .h1 {
    font-weight: 400 !important;
    font-size: clamp(3rem, 6.5vw, 6.5rem) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.01 !important;
}
h2, .h2 {
    font-weight: 400 !important;
    font-size: clamp(2.25rem, 4.2vw, 4.2rem) !important;
    letter-spacing: -0.012em !important;
    line-height: 1.07 !important;
}
h3, .h3 {
    font-weight: 400 !important;
    font-size: clamp(1.45rem, 2vw, 2.2rem) !important;
    line-height: 1.14 !important;
}

/* Trip-Card H3: kompakter für das schmale Kartenformat */
.mw-trip-card__overlay h3 {
    font-family: 'Jost', ui-sans-serif, sans-serif !important;
    font-size: clamp(1.18rem, 1.5vw, 1.6rem) !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;
}

/* Ship-Card H3 */
.mw-ship-card__overlay h3 {
    font-family: 'Jost', ui-sans-serif, sans-serif !important;
    font-size: clamp(1.22rem, 1.6vw, 1.68rem) !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;
}

/* Hero H1 — Jost */
.mw-hero h1,
.mw-home-hero h1,
.mw-hero--reise .mw-trip-hero__content h1 {
    font-family: 'Jost', ui-sans-serif, sans-serif !important;
    font-weight: 400 !important;
}

/* UI-Elemente bleiben Jost (kleinere Schrift, Labels, Navigation) */
.mw-eyebrow,
.mw-card-facts dt,
.mw-trip-card__body-facts dt,
.mw-ship-card__body .mw-card-facts dt,
.mw-nav a,
.mw-button,
button,
input, select, textarea, label,
.mw-trip-hero__meta span,
.mw-trip-hero__meta strong,
.mw-trip-infobar__label,
.mw-trip-infobar__value {
    font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
}

/* ── 27b. Hero-Overlay: Bild dominiert, Text perfekt lesbar ─────────────
   Oben 60–70 % des Bilds nahezu klar; nur im Inhaltsbereich abdunkeln.
   Drei Stärken via CSS-Klasse; Standard = was Reinhard im Customizer wählt. */

/* Allgemeiner Hero (Archive, Übersichtsseiten) */
.mw-hero.has-image .mw-hero__shade {
    background:
        linear-gradient(
            180deg,
            rgba(37, 37, 37,.0)  0%,
            rgba(37, 37, 37,.0)  52%,
            rgba(37, 37, 37,.44) 78%,
            rgba(37, 37, 37,.70) 100%
        ) !important;
}

/* Reise-Hero: oben offen, unten kräftig für H1-Lesbarkeit */
.mw-hero--reise .mw-hero__shade {
    background:
        linear-gradient(
            180deg,
            rgba(37, 37, 37,.10) 0%,
            rgba(37, 37, 37,.0)  26%,
            rgba(37, 37, 37,.44) 62%,
            rgba(37, 37, 37,.90) 100%
        ),
        linear-gradient(
            90deg,
            rgba(37, 37, 37,.22) 0%,
            transparent       50%
        ) !important;
}

/* Schiff-Hero: gleiche Logik wie Reise */
.mw-hero--ship .mw-hero__shade {
    background:
        linear-gradient(
            180deg,
            rgba(37, 37, 37,.08) 0%,
            rgba(37, 37, 37,.0)  28%,
            rgba(37, 37, 37,.42) 62%,
            rgba(37, 37, 37,.88) 100%
        ) !important;
}

/* Overlay-Typen (Backend-gesteuert per Klasse am <header>) */
.mw-hero--overlay-light .mw-hero__shade {
    background:
        linear-gradient(
            180deg,
            rgba(37, 37, 37,.0)  0%,
            rgba(37, 37, 37,.0)  62%,
            rgba(37, 37, 37,.36) 86%,
            rgba(37, 37, 37,.56) 100%
        ) !important;
}
.mw-hero--overlay-standard .mw-hero__shade {
    /* Standardwert oben — keine Änderung nötig */
}
.mw-hero--overlay-strong .mw-hero__shade {
    background:
        linear-gradient(
            180deg,
            rgba(37, 37, 37,.10) 0%,
            rgba(37, 37, 37,.16) 28%,
            rgba(37, 37, 37,.64) 68%,
            rgba(37, 37, 37,.96) 100%
        ),
        linear-gradient(
            90deg,
            rgba(37, 37, 37,.36) 0%,
            transparent       52%
        ) !important;
}

/* ── 27c. Reise-Karten: Zielgebiet oben-links · TOP-ANGEBOT oben-rechts ─
   Neue .mw-trip-card__topbar ersetzt das alte .mw-trip-card__badges-System.
   Altes System wird CSS-seitig deaktiviert; PHP liefert die neue Struktur. */

/* Alte Badge-Wrapper ausblenden (PHP liefert neue Topbar) */
.mw-trip-card__badges { display: none !important; }

/* Neue Topbar: Flex-Row über dem gesamten Bild */
.mw-trip-card__topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 13px 14px;
    z-index: 4;
    pointer-events: none;
}

/* Zielgebiet-Chip (oben-links) — Dark-Glass */
.mw-trip-card__dest-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 3px;
    background: rgba(37, 37, 37,.46);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(247,245,240,.90);
    font-family: 'Jost', sans-serif;
    font-size: .53rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.14);
    white-space: nowrap;
    pointer-events: auto;
}

/* TOP-ANGEBOT-Badge (oben-rechts) — Gold */
.mw-trip-card__topbar .mw-chip {
    display: inline-flex !important;
    align-items: center !important;
    height: 22px;
    padding: 0 11px !important;
    border-radius: 999px !important;
    background: var(--mw-gold, var(--mw-accent)) !important;
    color: #fff !important;
    border: none !important;
    font-family: 'Jost', sans-serif !important;
    font-size: .55rem !important;
    font-weight: 700 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.20) !important;
    line-height: 1 !important;
    pointer-events: auto !important;
    position: static !important;
    top: auto !important; right: auto !important;
}

/* Zielgebiet aus dem Overlay entfernen (jetzt in Topbar) */
.mw-trip-card__region { display: none !important; }

/* ── 27d. Karten: Termine vollständig lesbar — kein Kürzen ─────────────
   Termine darf umbrechen; Dauer und Preis bleiben einzeilig. */

.mw-trip-card .mw-trip-card__body-facts {
    height: auto !important;
    overflow: visible !important;
}

.mw-trip-card .mw-trip-card__body-facts > div {
    height: auto !important;
    overflow: visible !important;
    justify-content: flex-start !important;
}

.mw-trip-card .mw-trip-card__body-facts dd {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
}

.mw-trip-card .mw-trip-card__body-facts > div:nth-child(2) dd,
.mw-trip-card .mw-trip-card__body-facts > div:last-child dd {
    white-space: nowrap !important;
}

/* ── 27e. Statische Infobar unter Hero (Reisen + Schiffe) ───────────────
   Reisedatum · Dauer · Preis · Sprache · Schiff — immer sichtbar.
   PHP liefert .mw-trip-infobar nach dem schließenden </header>-Tag. */

.mw-trip-infobar {
    background: var(--mw-sand, #EDE7DA);
    border-bottom: 1px solid rgba(37,37,37,.08);
}

.mw-trip-infobar__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

.mw-trip-infobar__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 28px;
    border-right: 1px solid rgba(37,37,37,.09);
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.mw-trip-infobar__item:last-child { border-right: 0; }

.mw-trip-infobar__label {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--mw-muted, #6B665F);
    margin-bottom: .35rem;
    line-height: 1;
}

.mw-trip-infobar__value {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: .96rem;
    font-weight: 500;
    color: var(--mw-heading, #252525);
    line-height: 1.3;
    /* Datum und andere Werte dürfen umbrechen — kein hartes Abschneiden */
}

/* Reisedatum braucht mehr Platz als Dauer/Schiff */
.mw-trip-infobar__item:first-child {
    flex: 2 1 0;
}

.mw-trip-infobar__value--price {
    color: var(--mw-gold, #C5AB51);
    font-weight: 600;
}

@media (max-width: 900px) {
    .mw-trip-infobar__inner { flex-wrap: wrap; }
    .mw-trip-infobar__item {
        flex: 1 1 calc(50% - 1px);
        padding: 16px 20px;
    }
    .mw-trip-infobar__item:nth-child(2n) { border-right: 0; }
    .mw-trip-infobar__item:nth-child(n+3) {
        border-top: 1px solid rgba(37,37,37,.09);
    }
}

@media (max-width: 500px) {
    .mw-trip-infobar__item {
        flex: 1 1 100%;
        border-right: 0;
        border-top: 1px solid rgba(37,37,37,.09);
    }
    .mw-trip-infobar__item:first-child { border-top: 0; }
}

/* ── 27f. Schiff-Hero: Kategorie entfernt, H1 prominent, mit Breadcrumb ─
   CSS sichert korrekte Darstellung; PHP entfernt den Kategorie-Eyebrow. */

.mw-hero--ship {
    min-height: clamp(600px, 82vh, 940px);
    align-items: stretch;
}

.mw-hero--ship .mw-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: clamp(72px, 9vh, 108px);
    padding-bottom: clamp(48px, 5.5vh, 76px);
}

/* Eyebrow/Kategorie: in PHP entfernt — CSS-Fallback deaktiviert */
.mw-hero--ship .mw-hero__content > .mw-eyebrow:not(.mw-breadcrumbs .mw-eyebrow) {
    display: none !important;
}

.mw-hero--ship .mw-hero__content h1 {
    font-family: 'Jost', ui-sans-serif, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(2.8rem, 5vw, 5.4rem) !important;
    line-height: 1.01 !important;
    max-width: 820px;
    margin-top: 12px;
}

.mw-hero--ship .mw-hero__content > p {
    font-size: 1.05rem;
    max-width: 640px;
    margin-top: .9rem;
    color: rgba(255,255,255,.84);
    opacity: 1;
}

.mw-hero--ship .mw-hero__content .mw-breadcrumbs {
    font-size: .72rem;
    opacity: .60;
    color: rgba(255,255,255,.80);
    margin-bottom: auto; /* schiebt Breadcrumb nach oben */
}
.mw-hero--ship .mw-hero__content .mw-breadcrumbs a {
    color: rgba(255,255,255,.80);
}

/* ── 27g. Schiff-Karte: Premium-Ästhetik analog Reisekarte ─────────────
   Kategorie über Titel · Bild dominant · saubere Facts-Leiste */

/* Bildformat: editorialer Portrait-Ausschnitt */
.mw-ship-card__media {
    aspect-ratio: 4 / 5;
    height: auto !important;
}

/* Overlay: nur Titel — kein Kategorie-Label, kein CTA-Link */
.mw-ship-card__overlay {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    padding: 20px !important;
}

.mw-ship-card .mw-card-cta { display: none !important; }

/* Topbar: Typ links · Badge rechts — analog Reisekarten */
.mw-ship-card__topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 13px 14px;
    z-index: 4;
    pointer-events: none;
}

/* Schiffstyp-Chip (links) — Dark Glass */
.mw-ship-card__type-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 3px;
    background: rgba(37, 37, 37,.46);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(247,245,240,.90);
    font-family: 'Jost', sans-serif;
    font-size: .53rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.14);
    white-space: nowrap;
    pointer-events: auto;
}

/* Badge-Chip (rechts) — Gold */
.mw-ship-card__topbar .mw-chip {
    display: inline-flex !important;
    align-items: center !important;
    height: 22px;
    padding: 0 11px !important;
    border-radius: 999px !important;
    background: var(--mw-gold, var(--mw-accent)) !important;
    color: #fff !important;
    border: none !important;
    font-family: 'Jost', sans-serif !important;
    font-size: .55rem !important;
    font-weight: 700 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.20) !important;
    line-height: 1 !important;
    pointer-events: auto !important;
    position: static !important;
    top: auto !important; right: auto !important;
}

/* Altes Kategorie-Label im Overlay ausblenden */
.mw-ship-card__category { display: none !important; }

@media (max-width: 680px) {
    .mw-ship-card__media { aspect-ratio: 3 / 4; }
}

/* ── 27h. Schiffe-Übersicht: Content-Blöcke & Steps ────────────────────
   CSS für Inhaltsblöcke der sortier­baren Schiffe-Übersichtsseite.
   mw-content-split = Text links / Bild rechts (oder umgekehrt).
   mw-steps-list = nummerierte Schritt-Liste. */

.mw-content-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}

.mw-content-split--reversed .mw-content-split__image { order: -1; }

.mw-content-split__image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

.mw-content-split__text .mw-eyebrow { margin-bottom: .7rem; }
.mw-content-split__text h2 { margin-top: 0; }
.mw-content-split__text .mw-lead-content { margin-top: 1.2rem; }

/* Steps List */
.mw-steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2rem;
    counter-reset: steps-counter;
}

.mw-steps-list__item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 20px;
    align-items: flex-start;
    padding-top: 2rem;
    border-top: 1px solid rgba(37,37,37,.08);
}

.mw-steps-list__item:first-child { border-top: 0; padding-top: 0; }

.mw-steps-list__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--mw-sea, #3E3833);
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    flex-shrink: 0;
}

.mw-steps-list__item h3 {
    font-size: 1.3rem !important;
    font-weight: 400 !important;
    margin: 0 0 .5rem !important;
}

.mw-steps-list__item p {
    margin: 0;
    color: var(--mw-muted, #6B665F);
    line-height: 1.65;
}

/* Responsive: Content-Blöcke */
@media (max-width: 860px) {
    .mw-content-split { grid-template-columns: 1fr; }
    .mw-content-split--reversed .mw-content-split__image { order: 0; }
    .mw-steps-list { grid-template-columns: 1fr; }
}

/* ─── 17. LAYOUT-SICHERHEIT: Kein Overflow, kein Ineinanderlaufen ────
   Route-Karte und Warum-Highlights sind jetzt getrennte Blöcke (PHP).
   Diese Regeln stellen sicher, dass Überschriften nie aus ihrer Spalte
   laufen und lange Komposita (Traumkreuzfahrt, etc.) brechen. */

/* Warum-Highlights: volle Breite unterhalb des Übersichts-Grids */
.mw-trip-highlights {
    margin-top: clamp(36px, 5vw, 60px);
}
.mw-trip-highlights .mw-highlight-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    margin-top: 0;
}
.mw-trip-highlights .mw-subsection-title {
    margin-top: 0;
    margin-bottom: 22px;
}

/* Grid-Spalten: min-width: 0 verhindert Overflow durch overflow:visible */
.mw-trip-overview__content,
.mw-contact-copy,
.mw-inquiry-form__intro {
    min-width: 0;
}

/* Überschriften und Text: brechen bei langen Komposita weich um */
.mw-section h1,
.mw-section h2,
.mw-section h3,
.mw-contact-copy h2,
.mw-inquiry-form h2,
.mw-trip-overview__content h2,
.mw-trip-map-card h2 {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Medien und eingebettete Inhalte: nie breiter als ihr Container */
img, video, iframe, embed, object {
    max-width: 100%;
}

/* Horizontaler Scroll auf Seiten-Ebene unterbinden */
body { overflow-x: hidden; }

@media (max-width: 1024px) {
    .mw-trip-highlights .mw-highlight-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .mw-trip-highlights .mw-highlight-grid--compact {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   § 28 — HERO SYSTEM 2.0: Luxury · Unified · Image-First
   Aman / Explora / Cheval Blanc Niveau.
   Das Bild ist der Star. Kein Full-Overlay — Gradient nur links + unten
   für Textkontrasthalt. Inhalt via CSS-Grid am unteren Rand verankert,
   Breadcrumb immer oben sichtbar. Buttons kleiner, schärfer, Gold + Ghost.
   Gilt für alle via template-parts/hero.php erzeugten Bereiche
   (.mw-page-hero): Startseite · Übersichten · Archive · Service.
   Trip-Hero (.mw-hero--reise) und Schiff-Hero (.mw-hero--ship) bleiben
   in §23 / §27f geregelt und werden hier nicht berührt.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 28a. Mindesthöhe: vh — Customizer-gesteuert ──
   height + min-height zusammen erzeugen eine "definite" Cross-Size für
   den Flex-Container: Nur so greift align-self: stretch am Content-Kind
   zuverlässig in allen Browsern (Safari ≤ 15 ignoriert sonst min-height). */

.mw-page-hero.has-image {
    min-height: clamp(600px, var(--mw-hero-min-height-vh, 90vh), 1020px);
    height:     clamp(600px, var(--mw-hero-min-height-vh, 90vh), 1020px);
}

@media (max-width: 1024px) {
    .mw-page-hero.has-image {
        min-height: clamp(520px, var(--mw-hero-min-height-tablet-vh, 75vh), 860px);
        height:     clamp(520px, var(--mw-hero-min-height-tablet-vh, 75vh), 860px);
    }
}

@media (max-width: 680px) {
    .mw-page-hero.has-image {
        min-height: clamp(420px, var(--mw-hero-min-height-mobile-vh, 65vh), 680px);
        height:     clamp(420px, var(--mw-hero-min-height-mobile-vh, 65vh), 680px);
    }
}

/* ── 28b. Shade: Direktionaler Gradient ──
   Links: dunkel für Textkontrasthalt.
   Rechts: transparent — Bild zeigt sich ungefiltert.
   Unten: starker Fade — H1 hebt sich sicher ab. */

.mw-page-hero.has-image .mw-hero__shade {
    background:
        linear-gradient(
            90deg,
            rgba(15,15,15,.50) 0%,
            rgba(15,15,15,.22) 46%,
            rgba(15,15,15,0)   100%
        ),
        linear-gradient(
            180deg,
            rgba(15,15,15,.14) 0%,
            transparent        30%,
            rgba(15,15,15,.52) 68%,
            rgba(15,15,15,.90) 100%
        ) !important;
}

/* ── 28c. Content-Layout ──
   Flex-Column streckt die Content-Box auf volle Hero-Höhe.
   margin-bottom: auto auf .mw-breadcrumbs drückt alle nachfolgenden
   Elemente nach unten (Spacer-Trick ohne CSS Grid).
   Auf Seiten ohne Breadcrumb: margin-top: auto auf dem ersten
   inhaltlichen Element (.mw-eyebrow oder h1) verankert den Block am
   unteren Hero-Rand — kein align-self: stretch nötig. */

.mw-page-hero.has-image .mw-hero__content {
    align-self:      stretch !important;
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     flex-start !important;
    justify-content: flex-start !important;
    padding-top:     clamp(80px, 10vh, 128px) !important;
    padding-bottom:  clamp(48px, 6vh, 76px) !important;
    gap:             0 !important;
}

/* ── 28d. Vertikal-Anker ── */

/* MIT Breadcrumb: Breadcrumb oben → Rest automatisch unten */
.mw-page-hero.has-image .mw-hero__content > .mw-breadcrumbs {
    flex-shrink:   0;
    margin-bottom: auto !important;
}

/* OHNE Breadcrumb: erstes Inhaltselement schiebt sich nach unten */
.mw-page-hero.has-image .mw-hero__content > .mw-eyebrow:first-child,
.mw-page-hero.has-image .mw-hero__content > h1:first-child {
    margin-top: auto !important;
}

/* Abstände zwischen den Inhaltselementen */
.mw-page-hero.has-image .mw-hero__content > .mw-eyebrow { margin-bottom: 10px; }
.mw-page-hero.has-image .mw-hero__content > h1          { margin-top: 0;  margin-bottom: 0; }
.mw-page-hero.has-image .mw-hero__content > p,
.mw-page-hero.has-image .mw-hero__content > .mw-hero__intro { margin-top: 14px; }
.mw-page-hero.has-image .mw-hero__content > .mw-hero__actions { margin-top: 22px; }

/* ── 28e. Content-Breite: Links im Bild (Customizer: --mw-hero-content-width) ── */

.mw-page-hero.has-image .mw-hero__content > .mw-eyebrow,
.mw-page-hero.has-image .mw-hero__content > h1,
.mw-page-hero.has-image .mw-hero__content > p,
.mw-page-hero.has-image .mw-hero__content > .mw-hero__intro,
.mw-page-hero.has-image .mw-hero__content > .mw-hero__actions {
    max-width: var(--mw-hero-content-width, 62%);
}

/* ── 28f. Breadcrumb: Oben verankert · weiß · elegant ── */

.mw-page-hero.has-image .mw-breadcrumbs,
.mw-page-hero.has-image .mw-breadcrumbs a {
    font-size: .70rem;
    letter-spacing: .03em;
    color: rgba(255,255,255,.72) !important;
    text-decoration: none;
}

.mw-page-hero.has-image .mw-breadcrumbs a:hover {
    color: rgba(255,255,255,.96) !important;
}

/* ── 28g. Eyebrow / Kicker: Gold · Uppercase · über H1 ── */

.mw-page-hero.has-image .mw-hero__content > .mw-eyebrow {
    display: block;
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(197,171,81,.92) !important;
}

/* ── 28h. H1: Weiß · leicht · Bild dominiert ── */

.mw-page-hero.has-image .mw-hero__content > h1 {
    color: #fff !important;
    font-family: 'Jost', ui-sans-serif, sans-serif !important;
    font-size: clamp(3.0rem, 5.2vw, 5.2rem) !important;
    font-weight: 300 !important;
    letter-spacing: -.01em !important;
    line-height: .97 !important;
    text-wrap: balance;
    text-shadow: 0 2px 38px rgba(12,12,12,.16) !important;
    max-width: var(--mw-hero-content-width, 62%);
}

/* ── 28i. Subtitle: Zurückhaltend · elegantes Weiß ── */

.mw-page-hero.has-image .mw-hero__content > p {
    color: rgba(255,255,255,.78) !important;
    font-size: clamp(.98rem, 1.4vw, 1.12rem);
    line-height: 1.56;
    margin-bottom: 0;
}

/* ── 28j. Buttons: Kleiner · schärfer · Gold-Primär + Ghost-Sekundär ── */

.mw-page-hero .mw-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.mw-page-hero .mw-hero__actions .mw-button {
    padding: 10px 22px !important;
    font-size: .80rem !important;
    letter-spacing: .07em !important;
    border-radius: 2px !important;
    font-weight: 400 !important;
    transition: opacity .20s ease, box-shadow .20s ease !important;
    transform: none !important;
}

.mw-page-hero .mw-hero__actions .mw-button--primary {
    background:   var(--mw-gold, var(--mw-accent)) !important;
    border-color: var(--mw-gold, var(--mw-accent)) !important;
    color:        #fff !important;
    box-shadow:   0 2px 16px rgba(197,171,81,.28) !important;
}

.mw-page-hero .mw-hero__actions .mw-button--ghost,
.mw-page-hero .mw-hero__actions .mw-button--outline,
.mw-page-hero .mw-hero__actions .mw-button--secondary {
    background:   transparent !important;
    border:       1px solid rgba(255,255,255,.65) !important;
    color:        #fff !important;
    box-shadow:   none !important;
}

.mw-page-hero .mw-hero__actions .mw-button:hover {
    opacity: .86 !important;
    transform: none !important;
}

/* ── 28k. Tablet (≤ 1024px) ── */

@media (max-width: 1024px) {
    .mw-page-hero.has-image .mw-hero__content > .mw-eyebrow,
    .mw-page-hero.has-image .mw-hero__content > h1,
    .mw-page-hero.has-image .mw-hero__content > p,
    .mw-page-hero.has-image .mw-hero__content > .mw-hero__intro,
    .mw-page-hero.has-image .mw-hero__content > .mw-hero__actions {
        max-width: 76%;
    }
}

/* ── 28l. Mobil (≤ 680px) ── */

@media (max-width: 680px) {
    .mw-page-hero.has-image .mw-hero__content {
        padding-top:    clamp(64px, 8vh, 88px);
        padding-bottom: clamp(34px, 5vh, 50px);
    }

    .mw-page-hero.has-image .mw-hero__content > .mw-eyebrow,
    .mw-page-hero.has-image .mw-hero__content > h1,
    .mw-page-hero.has-image .mw-hero__content > p,
    .mw-page-hero.has-image .mw-hero__content > .mw-hero__intro,
    .mw-page-hero.has-image .mw-hero__content > .mw-hero__actions {
        max-width: 100%;
    }

    .mw-page-hero.has-image .mw-hero__content > h1 {
        font-size: clamp(2.2rem, 9vw, 3.2rem) !important;
    }

    /* Auf Mobil: kein Links-Gradient — nur Bottom-Fade */
    .mw-page-hero.has-image .mw-hero__shade {
        background:
            linear-gradient(
                180deg,
                rgba(15,15,15,.16) 0%,
                rgba(15,15,15,.04) 26%,
                rgba(15,15,15,.54) 65%,
                rgba(15,15,15,.92) 100%
            ) !important;
    }

    .mw-page-hero .mw-hero__actions .mw-button {
        padding: 9px 18px !important;
        font-size: .76rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   § 29 — LUXURY LIGHTBOX 2.0
   Aman / Explora / Cheval Blanc Niveau.
   Bild im Fokus. Kein weißer Kasten. Kein Plugin — mw-lightbox ist
   vollständig hauseigen. Nur CSS-Overrides, JS bleibt unberührt.
   Customizer: --mw-lb-opacity · --mw-lb-blur · --mw-lb-radius
   ══════════════════════════════════════════════════════════════════════ */

/* ── 29a. Overlay: dunkler, ruhiger Hintergrund mit Unschärfe ── */

.mw-lightbox {
    background: rgba(18, 18, 18, var(--mw-lb-opacity, .88)) !important;
    backdrop-filter: blur(var(--mw-lb-blur, 6px)) !important;
    -webkit-backdrop-filter: blur(var(--mw-lb-blur, 6px)) !important;
    padding: 0 !important;
}

/* ── 29b. Dialog: kein weißer Kasten — füllt den Overlay vollständig ──
   Der Dialog wird zur unsichtbaren Platzhalter-Box, die Bild und
   Controls enthält. Keine Hintergrundfarbe, kein Padding, kein Radius. */

.mw-lightbox__dialog {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100% !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── 29c. Content: zentriert, maximal groß ── */

.mw-lightbox__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    max-width: 88vw !important;
}

.mw-lightbox__content img {
    width: auto !important;
    height: auto !important;
    max-width: 88vw !important;
    max-height: 82vh !important;
    object-fit: contain !important;
    border-radius: var(--mw-lb-radius, 4px) !important;
    box-shadow: 0 8px 60px rgba(0, 0, 0, .48) !important;
    display: block !important;
}

/* ── 29d. Close-Button: oben rechts, schwebend, dunkel-transparent ── */

.mw-lightbox__close {
    position: absolute !important;
    top: 20px !important;
    right: 24px !important;
    left: auto !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: rgba(37, 37, 37, .72) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    color: rgba(255, 255, 255, .88) !important;
    font-size: 1.4rem !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background .20s ease, color .20s ease, border-color .20s ease !important;
    z-index: 4 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.mw-lightbox__close:hover,
.mw-lightbox__close:focus-visible {
    background: var(--mw-gold, var(--mw-accent)) !important;
    border-color: transparent !important;
    color: #fff !important;
    outline: none !important;
}

/* ── 29e. Navigation: seitlich schwebend, dunkel-transparent ── */

.mw-lightbox__nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(37, 37, 37, .60) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    color: rgba(255, 255, 255, .90) !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    cursor: pointer !important;
    transition: background .20s ease, color .20s ease, border-color .20s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mw-lightbox__nav:hover,
.mw-lightbox__nav:focus-visible {
    background: rgba(197, 171, 81, .88) !important;
    border-color: transparent !important;
    color: #fff !important;
    outline: none !important;
}

.mw-lightbox__nav--prev {
    left: 20px !important;
    right: auto !important;
}

.mw-lightbox__nav--next {
    right: 20px !important;
    left: auto !important;
}

.mw-lightbox__nav span {
    font-size: 1.6rem !important;
    line-height: 1 !important;
}

/* ── 29f. Meta: Caption + Zähler dezent unter dem Bild ── */

.mw-lightbox__meta {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: 100% !important;
    margin-top: 14px !important;
    background: none !important;
    padding: 0 !important;
}

.mw-lightbox__caption {
    font-size: .82rem !important;
    color: rgba(255, 255, 255, .68) !important;
    letter-spacing: .02em !important;
    margin-top: 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
}

.mw-lightbox__counter {
    font-size: .72rem !important;
    font-weight: 400 !important;
    letter-spacing: .04em !important;
    color: rgba(255, 255, 255, .46) !important;
    white-space: nowrap !important;
}

/* ── 29g. Mobile (≤ 680px) ── */

@media (max-width: 680px) {
    .mw-lightbox__content,
    .mw-lightbox__content img {
        max-width: 94vw !important;
    }

    .mw-lightbox__content img {
        max-height: 78vh !important;
    }

    .mw-lightbox__close {
        width: 36px !important;
        height: 36px !important;
        top: 14px !important;
        right: 16px !important;
        font-size: 1.2rem !important;
    }

    .mw-lightbox__nav {
        width: 38px !important;
        height: 38px !important;
    }

    .mw-lightbox__nav--prev { left: 12px !important; }
    .mw-lightbox__nav--next { right: 12px !important; }

    .mw-lightbox__nav span {
        font-size: 1.4rem !important;
    }

    .mw-lightbox__caption {
        font-size: .74rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   § 30 — REISEFINDER: Abstand zum Hero + kompaktere Überschrift
   ══════════════════════════════════════════════════════════════════════ */

/* Weniger negatives Overlap — finder liegt nicht mehr direkt am Hero */
.mw-home-finder--below-hero {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
}

/* Schiff-Übersicht: Finder ebenfalls mit korrektem Abstand */
.mw-ship-archive .mw-home-finder--below-hero,
.mw-overview-page .mw-home-finder--below-hero {
    margin-top: 24px !important;
}

/* Finder-Überschrift kleiner */
.mw-finder__header h2,
.mw-finder .mw-finder__header h2 {
    font-size: 1.4rem !important;
    font-weight: 400 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   § 31 — SCHIFF EINZELSEITE: Kabinen-Sprungmarke
   Das Kabinen-Bild soll direkt nach dem Header sichtbar werden.
   Dafür Anchor-Ziel auf den Shell (Panels) versetzt (via PHP),
   und scroll-margin-top erhöht um Abschnitt-Heading auszusparen.
   ══════════════════════════════════════════════════════════════════════ */

/* Anchor-Ziel ist jetzt die Shell (Bild und Tabs auf gleicher Höhe, kein Heading obendrauf) */
.mw-ship-cabins-shell,
.mw-ship-cabins {
    scroll-margin-top: calc(var(--mw-header-height, 78px) + var(--mw-admin-bar-height, 0px) + 24px) !important;
}

/* Hero-Sprungmarken der Schiff-Einzelseite ("Schiff entdecken" → #schiff-einstieg,
   "Reisen anzeigen" → #reisen-mit-diesem-schiff): knapp unter den Header springen.
   Die globale Regel (body * → Header+18px) plus das Section-Padding (46px) ergibt
   sonst einen doppelten Leerraum oben. Das Section-Padding zählt bereits als
   Atem-Abstand, daher scroll-margin bewusst kleiner (Ziel-Padding bleibt sichtbar,
   nur ~20px landen unter dem Header). Betrifft nur den Sprung, nicht das Layout. */
body.single-schiffe #schiff-einstieg,
body.single-schiffe #reisen-mit-diesem-schiff {
    scroll-margin-top: calc(var(--mw-header-height, 78px) + var(--mw-admin-bar-height, 0px) - 24px) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   § 31b — SCHIFF-TEASER (Single-Reise): Querformat-Bild voll, Text 2-spaltig
   Schiffsbilder sind Querformat. Das alte Grid (Bild links | Text rechts)
   beschnitt sie zu Hochformat. Neu: Bild über die volle Breite in seinem
   natürlichen Querformat, darunter zweispaltig links Titel/Text, rechts
   Mini-Fakten + Button. Dunkles Taupe-Panel & Attribute bleiben erhalten.
   ══════════════════════════════════════════════════════════════════════ */
.mw-feature-block.mw-ship-teaser {
    display: block !important;
    grid-template-columns: none !important;
    overflow: hidden;
}

/* Bild: volle Breite, komplettes Schiff sichtbar (kein Beschnitt) */
.mw-feature-block.mw-ship-teaser > [data-mw-ship-figure] {
    margin: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    background: var(--mw-foam);
}
.mw-feature-block.mw-ship-teaser > [data-mw-ship-figure] img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
}

/* Textbereich: Titel/Text (main) und Fakten/Button (aside) jeweils über die
   volle Breite, gestapelt – aside ist damit genauso breit wie main. */
.mw-feature-block.mw-ship-teaser > .mw-ship-teaser__body {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    height: auto !important;
    padding: 44px !important;
}
.mw-ship-teaser__main { min-width: 0; }
.mw-ship-teaser__main h2 { margin: 0; }
.mw-ship-teaser__main p { margin: 16px 0 0 !important; max-width: none !important; }
.mw-ship-teaser__aside {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}
/* Vier Kern-Fakten in einer Reihe (Gäste · Kabinen · Länge · Baujahr) */
.mw-ship-teaser__aside .mw-ship-mini-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100%;
    margin: 0 !important;
}
.mw-ship-teaser__aside [data-mw-ship-btn] { display: inline-flex; align-self: start; }

/* Tablet & Mobile: ruhigere Innenabstände, Fakten in 2 Reihen */
@media (max-width: 860px) {
    .mw-feature-block.mw-ship-teaser > .mw-ship-teaser__body {
        gap: 24px;
        padding: 32px !important;
    }
    .mw-ship-teaser__aside .mw-ship-mini-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 600px) {
    .mw-feature-block.mw-ship-teaser > .mw-ship-teaser__body {
        padding: 24px !important;
    }
}
@media (max-width: 460px) {
    .mw-ship-teaser__aside .mw-ship-mini-facts {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   § 32 — TRIP HERO: Route-Badge
   Stile für den dritten Badge (Ost/West-Route) im Reise-Hero.
   ══════════════════════════════════════════════════════════════════════ */

.mw-trip-hero__badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

.mw-card-badge--route {
    background: rgba(197, 171, 81, .18) !important;
    border: 1px solid rgba(197, 171, 81, .44) !important;
    color: #fff !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    font-size: .70rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    padding: 5px 10px !important;
    border-radius: 20px !important;
}


/* ══════════════════════════════════════════════════════════════════════
   § 33 — FLEXIBLE LANDING BLOCKS: Spacing-Modifier
   ══════════════════════════════════════════════════════════════════════ */

.mw-flex-block.mw-section--pt-0  { padding-top: 0 !important; }
.mw-flex-block.mw-section--pt-sm { padding-top: 28px !important; }
.mw-flex-block.mw-section--pt-lg { padding-top: 96px !important; }
.mw-flex-block.mw-section--pb-0  { padding-bottom: 0 !important; }
.mw-flex-block.mw-section--pb-sm { padding-bottom: 28px !important; }
.mw-flex-block.mw-section--pb-lg { padding-bottom: 96px !important; }

.mw-section--white {
    background: #fff;
}

.mw-section-subheading {
    margin-top: 8px;
    font-size: 1.05rem;
    color: var(--mw-text-muted, #666);
    max-width: 640px;
}

.mw-section-cta {
    margin-top: 32px;
}

/* ══════════════════════════════════════════════════════════════════════
   § 34 — SEO TEXT: Zweispaltig Editorial & Magazin
   ══════════════════════════════════════════════════════════════════════ */

.mw-content--two-col {
    columns: 2;
    column-gap: clamp(32px, 5vw, 56px);
    column-rule: 1px solid var(--mw-border, rgba(0,0,0,.08));
}

.mw-content--two-col > * {
    break-inside: avoid;
}

.mw-content--two-col h2,
.mw-content--two-col h3 {
    column-span: all;
}

@media (max-width: 680px) {
    .mw-content--two-col {
        columns: 1;
        column-rule: none;
    }
}

.mw-content--magazin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px clamp(32px, 5vw, 56px);
}

.mw-content--magazin > *:first-child {
    grid-column: 1 / -1;
}

@media (max-width: 680px) {
    .mw-content--magazin {
        grid-template-columns: 1fr;
    }
    .mw-content--magazin > *:first-child {
        grid-column: 1;
    }
}

.mw-content--editorial {
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 72ch;
}

/* SEO-Accordion: <details>/<summary> native collapse */
.mw-seo-accordion details {
    border-bottom: 1px solid var(--mw-border, rgba(0,0,0,.1));
    padding: 18px 0;
}

.mw-seo-accordion details:first-child {
    border-top: 1px solid var(--mw-border, rgba(0,0,0,.1));
}

.mw-seo-accordion summary {
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.mw-seo-accordion summary::-webkit-details-marker { display: none; }

.mw-seo-accordion summary::after {
    content: '+';
    font-size: 1.3rem;
    font-weight: 300;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.mw-seo-accordion details[open] summary::after {
    transform: rotate(45deg);
}

.mw-seo-accordion details > *:not(summary) {
    margin-top: 14px;
    padding-left: 0;
    line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════════════
   § 35 — HIGHLIGHT CARDS: Luxury card grid
   ══════════════════════════════════════════════════════════════════════ */

.mw-highlight-card {
    background: var(--mw-surface, #fff);
    border-radius: var(--mw-radius, 4px);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--mw-border, rgba(0,0,0,.08));
    transition: box-shadow .2s ease, transform .2s ease;
}

.mw-highlight-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

.mw-highlight-card__image {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: calc(var(--mw-radius, 4px) - 1px);
    margin-bottom: 4px;
}

.mw-highlight-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mw-highlight-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

.mw-highlight-card p {
    font-size: .94rem;
    color: var(--mw-text-muted, #666);
    line-height: 1.6;
    margin: 0;
}

.mw-highlight-grid--two {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 680px) {
    .mw-highlight-grid--two,
    .mw-highlight-grid--three {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   § 36 — ICON VORTEILE: Advantages list
   ══════════════════════════════════════════════════════════════════════ */

.mw-icon-vorteile {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.mw-icon-vorteil {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--mw-surface, #fff);
    border-radius: var(--mw-radius, 4px);
    border: 1px solid var(--mw-border, rgba(0,0,0,.07));
}

.mw-icon-vorteil__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mw-gold, #C5AB51);
}

.mw-icon-vorteil__icon svg {
    width: 28px;
    height: 28px;
}

.mw-icon-vorteil__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mw-icon-vorteil__body strong {
    font-size: .97rem;
    font-weight: 600;
    display: block;
}

.mw-icon-vorteil__body span {
    font-size: .88rem;
    color: var(--mw-text-muted, #666);
    line-height: 1.55;
}

/* ══════════════════════════════════════════════════════════════════════
   § 37 — STATEMENT / ZITAT: Quote block
   ══════════════════════════════════════════════════════════════════════ */

.mw-statement {
    margin: 0;
    padding: 48px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.mw-statement .mw-eyebrow {
    letter-spacing: .15em;
}

.mw-statement__quote {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 400;
    line-height: 1.45;
    color: var(--mw-heading-color, #1a1a1a);
    max-width: 720px;
    margin: 0;
    font-style: italic;
}

.mw-statement__quote::before { content: '\201E'; }
.mw-statement__quote::after  { content: '\201C'; }

.mw-statement__attribution {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}

.mw-statement__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.mw-statement__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mw-statement__attribution cite {
    font-style: normal;
    font-weight: 600;
    font-size: .94rem;
    display: block;
}

.mw-statement__role {
    font-size: .84rem;
    color: var(--mw-text-muted, #666);
}

/* ══════════════════════════════════════════════════════════════════════
   § 38 — VIDEO TEASER
   ══════════════════════════════════════════════════════════════════════ */

.mw-video-teaser {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.mw-embed-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--mw-radius, 4px);
}

.mw-embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.mw-video-teaser__image img {
    width: 100%;
    border-radius: var(--mw-radius, 4px);
    display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   § 39 — GALLERY / MOODBOARD
   ══════════════════════════════════════════════════════════════════════ */

.mw-gallery-grid {
    display: grid;
    gap: 12px;
}

.mw-gallery-grid--standard {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.mw-gallery-grid--mood-3 {
    grid-template-columns: repeat(3, 1fr);
}

.mw-gallery-grid--masonry {
    columns: 3;
    column-gap: 12px;
    display: block;
}

.mw-gallery-grid--masonry .mw-gallery-item {
    break-inside: avoid;
    margin-bottom: 12px;
}

.mw-gallery-grid--full {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.mw-gallery-item {
    margin: 0;
    overflow: hidden;
    border-radius: var(--mw-radius, 4px);
}

.mw-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.mw-gallery-item:hover img {
    transform: scale(1.03);
}

@media (max-width: 680px) {
    .mw-gallery-grid--mood-3,
    .mw-gallery-grid--masonry {
        columns: 2;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .mw-gallery-grid--mood-3,
    .mw-gallery-grid--masonry,
    .mw-gallery-grid--standard {
        columns: 1;
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   § 40 — TRUST / WARUM MEER.WEIT Block
   ══════════════════════════════════════════════════════════════════════ */

.mw-trust-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.mw-trust-block--with-image {
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

@media (max-width: 768px) {
    .mw-trust-block--with-image {
        grid-template-columns: 1fr;
    }
}

.mw-trust-block__image {
    border-radius: var(--mw-radius, 4px);
    overflow: hidden;
    aspect-ratio: 4/3;
}

.mw-trust-block__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mw-trust-block__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mw-trust-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mw-trust-items li {
    padding-left: 24px;
    position: relative;
    font-size: .95rem;
    line-height: 1.55;
}

.mw-trust-items li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 12px;
    height: 2px;
    background: var(--mw-gold, #C5AB51);
}

/* ══════════════════════════════════════════════════════════════════════
   § 41 — CRUISE COMPASS iFrame
   ══════════════════════════════════════════════════════════════════════ */

.mw-cruise-compass {
    width: 100%;
    overflow: hidden;
}

.mw-cruise-compass iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   § 42 — FAQ BLOCK: Verbesserte Abstände & Animation
   ══════════════════════════════════════════════════════════════════════ */

.mw-flex-block--faq .mw-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Falls das Theme eigene details/summary nutzt, Abstände verbessern */
.mw-flex-block--faq details,
.mw-tax-faq details {
    border-bottom: 1px solid var(--mw-border, rgba(0,0,0,.1));
}

.mw-flex-block--faq details:first-child,
.mw-tax-faq details:first-child {
    border-top: 1px solid var(--mw-border, rgba(0,0,0,.1));
}

.mw-flex-block--faq summary,
.mw-tax-faq summary {
    padding: 20px 0;
    font-size: 1rem;
    line-height: 1.5;
}

.mw-flex-block--faq details > *:not(summary),
.mw-tax-faq details > *:not(summary) {
    padding-bottom: 20px;
    line-height: 1.72;
}

/* ══════════════════════════════════════════════════════════════════════
   § 42b — mw-tax-faq: Card-Wrapper + Icon + Farb-Reset
   Überschreibt Parent-Codex-Styles (pink/petrol active state, Chevron-Icon)
   mit !important. Identisches Design zu mw-faq-section.
   ══════════════════════════════════════════════════════════════════════ */

/* Card-Wrapper */
.mw-tax-faq .mw-accordion {
    display: flex !important;
    flex-direction: column !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(98, 86, 78, .10) !important;
    box-shadow: 0 24px 70px rgba(81, 78, 72, .08) !important;
    border-radius: 28px !important;
    padding: 8px !important;
    gap: 6px !important;
}

.mw-tax-faq .mw-accordion__item {
    border-radius: 20px !important;
    border-color: rgba(98, 86, 78, .12) !important;
    overflow: clip !important;
}

.mw-tax-faq .mw-accordion__item:has([aria-expanded="true"]),
.mw-tax-faq .mw-accordion__item[data-open="true"] {
    background: #FAF8F5 !important;
    border-color: rgba(98, 86, 78, .18) !important;
}

/* Button-Basis: kein Pink, kein Petrol */
.mw-tax-faq .mw-accordion__button {
    background: #FFFFFF !important;
    color: var(--mw-ink) !important;
    box-shadow: none !important;
}

.mw-tax-faq .mw-accordion__button strong {
    color: var(--mw-ink) !important;
    font-size: 1.04rem !important;
    font-weight: 400 !important;
}

.mw-tax-faq .mw-accordion__button:hover,
.mw-tax-faq .mw-accordion__button:focus-visible {
    background: rgba(98, 86, 78, .04) !important;
    box-shadow: none !important;
}

/* Aktiver Zustand: kein Pink/Petrol */
.mw-tax-faq .mw-accordion__button[aria-expanded="true"] {
    background: rgba(98, 86, 78, .04) !important;
    color: var(--mw-ink) !important;
    box-shadow: none !important;
}

/* Icon: + Kreis (neutralisiert Chevron aus components.css + Parent-SVG) */
.mw-tax-faq .mw-accordion__button::after {
    content: "+" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(197, 171, 81, .40) !important;
    border-radius: 50% !important;
    font-size: 1.15rem !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    color: var(--mw-gold, var(--mw-accent)) !important;
    transform: none !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease !important;
    flex-shrink: 0 !important;
}

.mw-tax-faq .mw-accordion__button[aria-expanded="true"]::after {
    content: "−" !important;
    background: var(--mw-ink) !important;
    background-image: none !important;
    border-color: var(--mw-ink) !important;
    color: #FFFFFF !important;
    transform: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   §43  SERVICE PAGE – HERO
   ───────────────────────────────────────────────────────────────────────────── */

.mw-service-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    min-height: clamp(600px, var(--mw-hero-min-height-vh, 90vh), 1020px);
}

.mw-service-hero--medium   { min-height: clamp(480px, calc(var(--mw-hero-min-height-vh, 90vh) - 20vh), 760px); }
.mw-service-hero--large    { min-height: clamp(600px, var(--mw-hero-min-height-vh, 90vh), 1020px); }
.mw-service-hero--xlarge   { min-height: clamp(600px, var(--mw-hero-min-height-vh, 90vh), 1020px); }
.mw-service-hero--fullscreen { min-height: 100vh; }

.mw-service-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.mw-service-hero__bg img,
.mw-service-hero__bg picture,
.mw-service-hero__bg source {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--srv-focal, center center);
    display: block;
}

.mw-service-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.mw-service-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: clamp(80px, 10vw, 160px);
    padding-bottom: clamp(48px, 6vw, 80px);
}

.mw-service-hero--pos-bottom-left  .mw-service-hero__inner { align-self: flex-end; }
.mw-service-hero--pos-bottom-center .mw-service-hero__inner { align-self: flex-end; text-align: center; }
.mw-service-hero--pos-center-left  .mw-service-hero__inner { align-self: center; }

.mw-service-hero__logo {
    margin-bottom: 24px;
    opacity: .92;
}

.mw-service-hero__logo img {
    max-height: 48px;
    width: auto;
}

.mw-service-hero__content {
    max-width: 680px;
}

.mw-service-hero--pos-bottom-center .mw-service-hero__content {
    margin: 0 auto;
}

.mw-service-hero .mw-eyebrow {
    color: var(--mw-gold, #C5AB51);
    margin-bottom: .75rem;
}

.mw-service-hero__title {
    font-size: clamp(2.4rem, 5.5vw, 4.4rem);
    line-height: 1.08;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .75rem;
}

.mw-service-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.22rem);
    color: rgba(255,255,255,.85);
    line-height: 1.6;
    margin: 0 0 2rem;
}

.mw-service-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

@media (max-width: 680px) {
    .mw-service-hero--m-medium  { min-height: clamp(380px, calc(var(--mw-hero-min-height-mobile-vh, 65vh) - 10vh), 560px); }
    .mw-service-hero--m-large   { min-height: clamp(420px, var(--mw-hero-min-height-mobile-vh, 65vh), 680px); }
    .mw-service-hero--m-xlarge  { min-height: clamp(420px, var(--mw-hero-min-height-mobile-vh, 65vh), 680px); }

    .mw-service-hero__title    { font-size: clamp(1.9rem, 8vw, 2.8rem); }
    .mw-service-hero__actions  { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §44  SERVICE CARDS – 5 LAYOUT VARIANTEN
   ───────────────────────────────────────────────────────────────────────────── */

.mw-service-cards-section { padding: clamp(60px,8vw,120px) 0; }

.mw-srv-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

/* Base card */
.mw-srv-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(37,37,37,.07);
    transition: box-shadow .25s ease, transform .25s ease;
    display: flex;
    flex-direction: column;
}

.mw-srv-card:hover {
    box-shadow: 0 8px 32px rgba(37,37,37,.13);
    transform: translateY(-3px);
}

.mw-srv-card--highlight {
    border: 2px solid var(--mw-gold, #C5AB51);
}

.mw-srv-card--highlight::after {
    content: 'Empfohlen';
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--mw-gold, #C5AB51);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 99px;
}

/* Standard Card */
.mw-srv-card--standard .mw-srv-card__icon {
    width: 56px;
    height: 56px;
    color: var(--mw-gold, #C5AB51);
    margin: 28px 28px 0;
    flex-shrink: 0;
}

.mw-srv-card--standard .mw-srv-card__icon svg {
    width: 100%;
    height: 100%;
}

.mw-srv-card--standard .mw-srv-card__thumb {
    height: 180px;
    overflow: hidden;
}

.mw-srv-card--standard .mw-srv-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.mw-srv-card--standard:hover .mw-srv-card__thumb img {
    transform: scale(1.04);
}

.mw-srv-card--standard .mw-srv-card__body {
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.mw-srv-card--standard .mw-srv-card__sub {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mw-gold, #C5AB51);
    font-weight: 600;
}

.mw-srv-card--standard h3 {
    font-size: 1.15rem;
    line-height: 1.25;
    margin: 0;
    color: var(--mw-ocean, #54463A);
}

.mw-srv-card--standard .mw-content {
    font-size: .95rem;
    line-height: 1.65;
    color: #555;
    margin-top: 4px;
}

.mw-srv-card--standard .mw-srv-card__link {
    margin-top: auto;
    padding-top: 12px;
    color: var(--mw-ocean, #54463A);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .2s;
}

.mw-srv-card--standard .mw-srv-card__link:hover { color: var(--mw-gold, #C5AB51); }

/* Gold accent line at bottom for standard */
.mw-srv-card--standard::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--mw-gold, #C5AB51);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.mw-srv-card--standard:hover::before { transform: scaleX(1); }

/* Premium Image Card */
.mw-srv-card--premium-image {
    min-height: 340px;
}

.mw-srv-card--premium-image .mw-srv-card__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.mw-srv-card--premium-image .mw-srv-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.mw-srv-card--premium-image:hover .mw-srv-card__media img {
    transform: scale(1.05);
}

.mw-srv-card--premium-image .mw-srv-card__overlay {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 28px;
    background: linear-gradient(to top, rgba(37,37,37,.88) 0%, rgba(37,37,37,.4) 60%, transparent 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 140px;
    justify-content: flex-end;
}

.mw-srv-card--premium-image .mw-eyebrow {
    color: var(--mw-gold, #C5AB51);
    font-size: .72rem;
}

.mw-srv-card--premium-image h3 {
    font-size: 1.2rem;
    margin: 0;
    color: #fff;
}

.mw-srv-card--premium-image .mw-srv-card__link {
    color: rgba(255,255,255,.8);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s;
}

.mw-srv-card--premium-image .mw-srv-card__link:hover { color: var(--mw-gold, #C5AB51); }

/* Split Card */
.mw-srv-card--split {
    flex-direction: row;
    min-height: 240px;
    grid-column: span 2;
}

.mw-srv-card--split .mw-srv-card__media {
    flex: 0 0 42%;
    overflow: hidden;
}

.mw-srv-card--split .mw-srv-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.mw-srv-card--split:hover .mw-srv-card__media img {
    transform: scale(1.04);
}

.mw-srv-card--split .mw-srv-card__body {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.mw-srv-card--split .mw-eyebrow {
    color: var(--mw-gold, #C5AB51);
    font-size: .72rem;
}

.mw-srv-card--split h3 {
    font-size: 1.3rem;
    margin: 0;
    color: var(--mw-ocean, #54463A);
}

.mw-srv-card--split .mw-content {
    font-size: .93rem;
    line-height: 1.65;
    color: #555;
}

.mw-srv-card--split .mw-srv-card__link {
    color: var(--mw-ocean, #54463A);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 8px;
    transition: color .2s;
}

.mw-srv-card--split .mw-srv-card__link:hover { color: var(--mw-gold, #C5AB51); }

/* Minimal Card */
.mw-srv-card--minimal {
    background: transparent;
    box-shadow: none;
    border: 1px solid rgba(37,37,37,.12);
    padding: 28px;
}

.mw-srv-card--minimal:hover {
    box-shadow: 0 4px 16px rgba(37,37,37,.1);
    border-color: var(--mw-gold, #C5AB51);
    transform: translateY(-2px);
}

.mw-srv-card--minimal h3 {
    font-size: 1.1rem;
    margin: 0 0 8px;
    color: var(--mw-ocean, #54463A);
}

.mw-srv-card--minimal .mw-srv-card__sub {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mw-gold, #C5AB51);
    font-weight: 600;
    margin-bottom: 12px;
    display: block;
}

.mw-srv-card--minimal .mw-content {
    font-size: .92rem;
    line-height: 1.65;
    color: #666;
}

.mw-srv-card--minimal .mw-srv-card__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--mw-ocean, #54463A);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 14px;
    transition: color .2s;
}

.mw-srv-card--minimal .mw-srv-card__link:hover { color: var(--mw-gold, #C5AB51); }

/* Large Feature Card */
.mw-srv-card--large-feature {
    grid-column: 1 / -1;
    min-height: 420px;
    flex-direction: row;
}

.mw-srv-card--large-feature .mw-srv-card__media {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.mw-srv-card--large-feature .mw-srv-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.mw-srv-card--large-feature:hover .mw-srv-card__media img {
    transform: scale(1.04);
}

.mw-srv-card--large-feature .mw-srv-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(37,37,37,.85) 0%, rgba(37,37,37,.4) 100%);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    gap: 10px;
}

.mw-srv-card--large-feature .mw-eyebrow { color: var(--mw-gold, #C5AB51); }

.mw-srv-card--large-feature h3 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin: 0;
    color: #fff;
    max-width: 560px;
}

.mw-srv-card--large-feature .mw-srv-card__link {
    color: rgba(255,255,255,.85);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s;
    align-self: flex-start;
}

.mw-srv-card--large-feature .mw-srv-card__link:hover { color: var(--mw-gold, #C5AB51); }

/* Light text variant */
.mw-srv-card--light-text .mw-srv-card__body h3,
.mw-srv-card--light-text .mw-srv-card__body .mw-srv-card__sub,
.mw-srv-card--light-text .mw-srv-card__body .mw-srv-card__link {
    color: #fff;
}

.mw-srv-card--light-text .mw-srv-card__body .mw-content { color: rgba(255,255,255,.8); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mw-srv-card, .mw-srv-card__media img { transition: none; }
    .mw-srv-card:hover { transform: none; }
}

@media (max-width: 860px) {
    .mw-srv-card--split   { flex-direction: column; grid-column: span 1; }
    .mw-srv-card--split .mw-srv-card__media { height: 200px; flex: none; }
    .mw-srv-card--large-feature { min-height: 280px; }
    .mw-srv-card--large-feature .mw-srv-card__overlay { padding: 24px; }
}

@media (max-width: 600px) {
    .mw-srv-card-grid { grid-template-columns: 1fr; gap: 16px; }
    .mw-srv-card--split, .mw-srv-card--large-feature { grid-column: span 1; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §45  SERVICE FLEX BLOCKS – EDITORIAL, PROZESS, ANSPRECHPARTNER, DOWNLOADS
   ───────────────────────────────────────────────────────────────────────────── */

/* Editorial band (Bild+Text / Text+Bild) */
.mw-editorial-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.mw-editorial-band.is-reversed .mw-editorial-band__media {
    order: 2;
}

.mw-editorial-band__media {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.mw-editorial-band__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.mw-editorial-band:hover .mw-editorial-band__media img {
    transform: scale(1.03);
}

.mw-editorial-band__content { display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 860px) {
    .mw-editorial-band {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .mw-editorial-band.is-reversed .mw-editorial-band__media { order: 0; }
}

/* Prozess-Schritte */
.mw-prozess-steps {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mw-prozess-step {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 28px 0;
    border-bottom: 1px solid rgba(37,37,37,.1);
}

.mw-prozess-step:first-child { border-top: 1px solid rgba(37,37,37,.1); }

.mw-prozess-step__number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--mw-gold, #C5AB51);
    color: var(--mw-gold, #C5AB51);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

.mw-prozess-step__content { flex: 1; }

.mw-prozess-step__icon {
    width: 28px;
    height: 28px;
    color: var(--mw-gold, #C5AB51);
    display: block;
    margin-bottom: 8px;
}

.mw-prozess-step__content h3 {
    font-size: 1.05rem;
    margin: 0 0 6px;
    color: var(--mw-ocean, #54463A);
}

.mw-prozess-step__content p {
    font-size: .95rem;
    line-height: 1.65;
    color: #555;
    margin: 0;
}

/* Ansprechpartner */
.mw-ansprechpartner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 28px;
    margin-top: 40px;
}

.mw-ansprechpartner-card {
    display: flex;
    gap: 20px;
    padding: 28px;
    border: 1px solid rgba(37,37,37,.1);
    border-radius: 12px;
    background: #fff;
    transition: box-shadow .25s;
}

.mw-ansprechpartner-card:hover {
    box-shadow: 0 6px 24px rgba(37,37,37,.1);
}

.mw-ansprechpartner-card__image {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.mw-ansprechpartner-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mw-ansprechpartner-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mw-ansprechpartner-card__body strong {
    font-size: 1rem;
    color: var(--mw-ocean, #54463A);
}

.mw-ansprechpartner-card__role {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mw-gold, #C5AB51);
    font-weight: 600;
}

.mw-ansprechpartner-card__body p {
    font-size: .88rem;
    line-height: 1.55;
    color: #666;
    margin: 4px 0;
}

.mw-ansprechpartner-card__contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.mw-ansprechpartner-card__contact a {
    font-size: .85rem;
    color: var(--mw-ocean, #54463A);
    text-decoration: none;
    transition: color .2s;
}

.mw-ansprechpartner-card__contact a:hover { color: var(--mw-gold, #C5AB51); }

/* Downloads */
.mw-download-list {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mw-download-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(37,37,37,.1);
}

.mw-download-item:first-child { border-top: 1px solid rgba(37,37,37,.1); }

.mw-download-item__type {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: var(--mw-sand, #EEE7DC);
    border: 1px solid rgba(37,37,37,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--mw-ocean, #54463A);
    flex-shrink: 0;
}

.mw-download-item__type--pdf  { background: #FEF3F3; border-color: #FCA5A5; color: #991B1B; }
.mw-download-item__type--word { background: #EFF6FF; border-color: #93C5FD; color: #1E40AF; }

.mw-download-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mw-download-item__info strong {
    font-size: .95rem;
    color: var(--mw-ocean, #54463A);
}

.mw-download-item__info span {
    font-size: .83rem;
    color: #888;
}

.mw-download-item__btn {
    flex-shrink: 0;
    padding: 8px 18px;
    border: 1px solid var(--mw-ocean, #54463A);
    border-radius: 4px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--mw-ocean, #54463A);
    text-decoration: none;
    transition: background .2s, color .2s;
}

.mw-download-item__btn:hover {
    background: var(--mw-ocean, #54463A);
    color: #fff;
}

/* Newsletter Teaser */
.mw-newsletter-teaser {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.mw-newsletter-teaser h2 { margin: 0; }
.mw-newsletter-teaser p { color: #555; line-height: 1.65; margin: 0; }

/* CTA Band */
.mw-cta-band {
    position: relative;
    overflow: hidden;
}

.mw-cta-band__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: var(--mw-cta-band-img-opacity, .18);
}

.mw-cta-band__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mw-cta-band__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.mw-cta-band__inner .mw-eyebrow { color: var(--mw-cta-band-eyebrow, var(--mw-gold, #C5AB51)); }
.mw-cta-band__inner h2 { color: var(--mw-cta-band-heading, #fff) !important; margin: .25em 0 .4em; }
.mw-cta-band__inner p { color: var(--mw-cta-band-text, rgba(255,255,255,.75)); margin: 0; }

@media (max-width: 680px) {
    .mw-cta-band__inner { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §46  SERVICE PAGE – CUSTOMIZER SECTION BACKGROUNDS
   ───────────────────────────────────────────────────────────────────────────── */

.mw-svc-block--editorial-intro.mw-section--bg-light,
.mw-svc-block--vorteile.mw-section--bg-light,
.mw-svc-block--faq.mw-section--bg-light,
.mw-svc-block--ansprechpartner.mw-section--bg-light,
.mw-svc-block--newsletter.mw-section--bg-light {
    background: var(--mw-sand, #EEE7DC);
}

.mw-svc-block--editorial-intro.mw-section--bg-white,
.mw-svc-block--downloads.mw-section--bg-white {
    background: #fff;
}

.mw-svc-block--cta.mw-section--bg-default,
.mw-svc-block--cta.mw-section--bg-dark {
    background: var(--mw-ocean, #54463A);
}

.mw-svc-block--cta.mw-section--bg-accent {
    background: var(--mw-gold, #C5AB51);
}

/* Watcher for section spacing classes defined in §33 – already covers mw-svc-block-* */

/* ═══════════════════════════════════════════════════════════════════════════
   §50 FINAL DESIGN SYSTEM — Luxury Warm Palette
   Ziel: kein Petrol/Türkis, alles hell-warm-creme + Gold-Akzent + Taupe-Footer
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §50.1 CSS Token overrides — Design System 2.0 ──────────────────── */
:root {
    /* Graue Palette */
    --mw-gray-dark:       #514E48;
    --mw-gray-mid:        #848484;
    --mw-gray-light:      #C0BDB5;
    /* Taupe Palette 2.0 */
    --mw-taupe-dark:      #62564E;
    --mw-taupe-base:      #62564E;
    --mw-taupe-mid:       #B5A193;
    --mw-taupe-medium:    #B5A193;
    --mw-taupe-light:     #CBB9A8;
    --mw-sand:            #D4CCB8;
    /* Gold — nur sparsam */
    --mw-gold:            #C5AB51;
    --mw-gold-hover:      #B89B40;
    --mw-gold-light:      rgba(197,171,81,.10);
    /* Hintergründe */
    --mw-bg:              #FFFFFF;
    --mw-bg-soft:         #F7F5F1;
    --mw-card-bg:         #FFFFFF;
    /* Text */
    --mw-text:            #3A3A3A;
    --mw-ink:             #252525;
    --mw-heading:         #252525;
    --mw-muted:           #6B665F;
    /* Aliase */
    --mw-petrol:          #252525;
    --mw-ocean:           #62564E;
    /* Linien */
    --mw-line:            rgba(98,86,78,.12);
    --mw-border-color:    rgba(98,86,78,.12);
    /* Buttons — Taupe (nicht Gold) */
    --mw-button-bg:       #62564E;
    --mw-button-hover:    #514E48;
    --mw-button-text:     #FFFFFF;
    --mw-primary:         #62564E;
    --mw-primary-hover:   #514E48;
    /* Links (Gold — sparsam) */
    --mw-link:            #C5AB51;
    --mw-link-color:      #C5AB51;
    /* Footer 2.0 */
    --mw-footer-bg:       #62564E;
    --mw-footer-text:     #F5F2ED;
    --mw-footer-link:     #F5F2ED;
    --mw-footer-link-hover: #D4CCB8;
    --mw-footer-card-bg:  rgba(255,255,255,.06);
    --mw-footer-card-border: rgba(212,204,184,.20);
    --mw-footer-border:   rgba(212,204,184,.20);
    --mw-footer-button-bg:      rgba(255,255,255,.14);
    --mw-footer-button-text:    #F5F2ED;
    --mw-footer-button-hover-bg: rgba(255,255,255,.26);
    --mw-footer-button-hover-text: #FFFFFF;
    /* Mobile-Menü — hell, wie das Desktop-Dropdown (2026-07) */
    --mw-mobile-menu-bg:  #FFFFFF;
    --mw-mobile-menu-text: #252525;
    /* Hero-Gradient */
    --mw-hero-gradient:
        linear-gradient(
            90deg,
            rgba(37,37,37,.55) 0%,
            rgba(37,37,37,.25) 55%,
            rgba(37,37,37,0)   100%
        );
}

/* ── §50.2 Body + Seiten-Hintergrund — reines Weiß ──────────────────── */
body.mw-site,
.mw-site { background-color: var(--mw-bg-main, #FFFFFF) !important; }

/* ── §50.3 Footer — Design System 2.0 Taupe ─────────────────────────── */
.mw-footer,
footer.mw-footer {
    background: var(--mw-footer-bg, var(--mw-primary)) !important;
    color: var(--mw-footer-text, var(--mw-footer-text)) !important;
}
.mw-footer a,
.mw-footer__link { color: var(--mw-footer-link, var(--mw-footer-text)) !important; }
.mw-footer a:hover,
.mw-footer__link:hover { color: var(--mw-footer-link-hover, var(--mw-sand)) !important; }
.mw-footer hr,
.mw-footer__divider,
.mw-footer-group summary { border-color: var(--mw-footer-border, rgba(212,204,184,.20)) !important; }

/* Footer-CTA-Karte */
.mw-footer__cta-card,
.mw-footer .mw-cta-card {
    background: var(--mw-footer-card-bg, rgba(255,255,255,.06)) !important;
    border: 1px solid var(--mw-footer-card-border, rgba(212,204,184,.20)) !important;
}

/* Footer CTA-Button — Ghost-Stil auf dunklem Hintergrund */
.mw-footer .mw-button,
.mw-footer .mw-button--primary,
.mw-footer .mw-nav__cta {
    background: var(--mw-footer-button-bg, rgba(255,255,255,.14)) !important;
    border: 1px solid rgba(212,204,184,.35) !important;
    color: var(--mw-footer-button-text, var(--mw-footer-text)) !important;
}
.mw-footer .mw-button:hover,
.mw-footer .mw-button--primary:hover {
    background: var(--mw-footer-button-hover-bg, rgba(255,255,255,.26)) !important;
    border-color: rgba(212,204,184,.55) !important;
}

/* ── §50.4 Header — Ivory, via CSS-Variablen ────────────────────────── */
.mw-header {
    background: var(--mw-header-bg-scrolled, rgba(247,245,241,.96)) !important;
}
.mw-header.mw-header--transparent:not(.is-scrolled) {
    background: var(--mw-header-bg, rgba(247,245,241,0)) !important;
}
.mw-header.is-scrolled {
    background: var(--mw-header-bg-scrolled, rgba(247,245,241,.97)) !important;
}
/* CTA im scrolled-Zustand: Gold-Outline */
.mw-header.is-scrolled .mw-nav__cta {
    background: transparent !important;
    border: 1px solid var(--mw-gold, var(--mw-accent)) !important;
    color: var(--mw-heading, var(--mw-ink)) !important;
}
.mw-header.is-scrolled .mw-nav__cta:hover,
.mw-header.is-scrolled .mw-nav__cta:focus-visible {
    background: var(--mw-gold, var(--mw-accent)) !important;
    color: var(--mw-button-text, #FFFFFF) !important;
}

/* ── §50.5 Buttons global — Luxury Hotel Stil ───────────────────────── */
/* Primary: Taupe (nicht Gold) — viel Padding, sanfte Transition */
.mw-button,
.mw-button--primary,
button.mw-button {
    background: var(--mw-button-bg, #62564E);
    border: 1px solid var(--mw-button-bg, #62564E);
    color: var(--mw-button-text, #FFFFFF);
    transition: background 380ms ease, border-color 380ms ease, transform 200ms ease, box-shadow 200ms ease;
    letter-spacing: 0.04em;
}
.mw-button:hover,
.mw-button--primary:hover {
    background: var(--mw-button-hover, #514E48);
    border-color: var(--mw-button-hover, #514E48);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37,37,37,.14);
}

/* Secondary: Outline-Stil — gleiche Taupe-Farbe */
.mw-button--secondary,
.mw-button--outline {
    background: transparent;
    border: 1px solid var(--mw-button-bg, #62564E);
    color: var(--mw-button-bg, #62564E);
    transition: background 380ms ease, color 380ms ease, transform 200ms ease;
}
.mw-button--secondary:hover,
.mw-button--outline:hover {
    background: var(--mw-button-bg, #62564E);
    border-color: var(--mw-button-bg, #62564E);
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* Dark: tiefes Taupe */
.mw-button--dark {
    background: var(--mw-taupe-dark, #62564E);
    border-color: var(--mw-taupe-dark, #62564E);
    color: #FFFFFF;
}
.mw-button--dark:hover {
    background: var(--mw-gray-dark, #514E48);
    border-color: var(--mw-gray-dark, #514E48);
}

/* Gold-Button — nur wenn wirklich notwendig */
.mw-button--gold,
.mw-button--accent {
    background: var(--mw-gold, #C5AB51);
    border-color: var(--mw-gold, #C5AB51);
    color: #FFFFFF;
}
.mw-button--gold:hover,
.mw-button--accent:hover {
    background: var(--mw-gold-hover, #B89B40);
    border-color: var(--mw-gold-hover, #B89B40);
}

/* Focus-Ring: Gold */
:focus-visible { outline-color: var(--mw-gold, var(--mw-accent)) !important; }

/* ── §50.6 Karten — weiß, 18px Radius, warmer Hover ─────────────────── */
.mw-card,
.mw-trip-card,
.mw-ship-card,
.mw-service-card,
.mw-ansprechpartner-card,
.mw-srv-card {
    background: #FFFFFF;
    border-radius: var(--mw-card-radius, 18px);
    border: 1px solid rgba(98,86,78,.08);
    box-shadow: 0 8px 28px rgba(37,37,37,.05);
    transition: transform 380ms ease, box-shadow 380ms ease;
}
.mw-card:hover,
.mw-trip-card:hover,
.mw-ship-card:hover,
.mw-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 52px rgba(37,37,37,.10);
}
/* Bild-Zoom beim Hover */
.mw-trip-card:hover .mw-trip-card__media img,
.mw-ship-card:hover .mw-ship-card__media img,
.mw-card:hover .mw-card__media img {
    transform: scale(1.04);
    transition: transform 600ms ease;
}
.mw-trip-card__media img,
.mw-ship-card__media img,
.mw-card__media img {
    transition: transform 600ms ease;
}

/* Karten-Placeholder (kein Bild): warmer Verlauf */
.mw-card__placeholder,
.mw-trip-card__media--placeholder,
.mw-ship-card__media--placeholder {
    background: linear-gradient(135deg, var(--mw-foam) 0%, #EDE8E2 100%) !important;
}

/* ── §50.7 Sektions-Hintergründe ────────────────────────────────────── */
.mw-section--bg-soft,
.mw-section--bg-sand,
[class*="bg-light"],
.mw-bg-soft {
    background: var(--mw-foam) !important;
}
.mw-section--bg-white,
.mw-bg-white {
    background: #FFFFFF !important;
}
.mw-section--bg-dark,
.mw-svc-block--cta.mw-section--bg-default,
.mw-svc-block--cta.mw-section--bg-dark {
    background: var(--mw-taupe-dark, var(--mw-primary)) !important;
    color: var(--mw-footer-text, var(--mw-footer-text)) !important;
}
.mw-cta-band {
    background: var(--mw-cta-band-bg, var(--mw-primary)) !important;
    color: var(--mw-cta-band-text, var(--mw-footer-text)) !important;
}

/* ── Home-CTA: optisch aufgewertet + an Customizer angebunden ─────────── */
/* Der Gradient wird jetzt aus der Customizer-Farbe --mw-cta-band-bg abgeleitet
   (heller/dunkler gemischt) → „CTA-Band Hintergrundfarbe" wirkt wieder und ist
   live steuerbar. Kompaktere Box: deutlich reduziertes Padding. */
.mw-cta-band.mw-home-cta {
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--mw-cta-band-bg, #62564E) 84%, #000) 0%,
        var(--mw-cta-band-bg, #62564E) 56%,
        color-mix(in srgb, var(--mw-cta-band-bg, #62564E) 90%, #fff) 100%) !important;
    padding: clamp(46px, 5.5vw, 66px) 0 !important;
    isolation: isolate;
    /* Kontrolliertes Kärtchen statt full-bleed: auf Container-Breite (1180px)
       wie das Accordion, mittig, mit Seitenrand; Abstand nach unten, damit es
       nicht am Footer klebt. overflow:hidden hält Glow/Hinterbild im Radius. */
    position: relative;
    width: min(calc(100% - 40px), var(--mw-container, 1180px));
    margin: clamp(10px, 2vw, 26px) auto clamp(40px, 5vw, 64px);
    border-radius: var(--mw-card-radius, 28px);
    overflow: hidden;
}

/* Dekorativer Gold-Glow oben rechts */
.mw-cta-band.mw-home-cta .mw-cta-band__deco {
    position: absolute;
    top: -30%;
    right: -8%;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197,171,81,.16) 0%, rgba(197,171,81,.04) 50%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.mw-cta-band.mw-home-cta .mw-cta-band__inner {
    position: relative;
    z-index: 1;
    align-items: center;
    gap: 56px;
}

.mw-cta-band.mw-home-cta .mw-cta-band__text {
    flex: 1 1 auto;
    max-width: 700px;
}

.mw-cta-band.mw-home-cta .mw-eyebrow {
    color: var(--mw-cta-band-eyebrow, var(--mw-gold, var(--mw-accent))) !important;
    opacity: 1 !important;
}

.mw-cta-band.mw-home-cta h2 {
    color: var(--mw-cta-band-heading, #FFFFFF) !important;
    margin: .25em 0 .5em !important;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem) !important;
    line-height: 1.14 !important;
}

.mw-cta-band.mw-home-cta p {
    color: var(--mw-cta-band-text, rgba(245,242,237,.78)) !important;
    font-size: 1.02rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.mw-cta-band.mw-home-cta .mw-cta-band__action {
    flex: 0 0 auto;
}

/* Hintergrundbild: sanfte Überlagerung über dem Dunkel-Gradient */
.mw-cta-band.mw-home-cta .mw-cta-band__bg {
    opacity: .10;
}

@media (max-width: 768px) {
    .mw-cta-band.mw-home-cta {
        padding: clamp(40px, 9vw, 52px) 0 !important;
    }
    .mw-cta-band.mw-home-cta .mw-cta-band__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }
    .mw-cta-band.mw-home-cta .mw-cta-band__deco {
        width: 320px;
        height: 320px;
        right: -20%;
        top: -20%;
    }
}

/* ── §50.8 Hero-Overlay — warmes Dunkel, kein Petrol ────────────────── */
.mw-hero__overlay,
.mw-hero::after,
.mw-hero::before {
    background: linear-gradient(
        90deg,
        rgba(37,37,37,.55) 0%,
        rgba(37,37,37,.25) 55%,
        rgba(37,37,37,0)   100%
    ) !important;
}

/* Trip-Detail-Hero: stärkerer unterer Scrim für Lesbarkeit */
.mw-hero--reise .mw-hero__overlay,
.mw-trip-hero__overlay {
    background: linear-gradient(
        180deg,
        rgba(37,37,37,0)    0%,
        rgba(37,37,37,.12) 40%,
        rgba(37,37,37,.56) 72%,
        rgba(37,37,37,.72) 100%
    ) !important;
}

/* ── §50.9 Ship-Teaser + Service-Panel — warmes Taupe 2.0 ───────────── */
.mw-feature-block.mw-ship-teaser > div,
.mw-trip-service-panel {
    background: linear-gradient(148deg, #3E3330 0%, var(--mw-primary) 58%, #7A6A60 100%) !important;
}
.mw-feature-block.mw-ship-teaser h2 { color: #FFFFFF; }
.mw-feature-block.mw-ship-teaser .mw-eyebrow,
.mw-trip-service-panel .mw-eyebrow { color: #C5AB51; }
.mw-feature-block.mw-ship-teaser .mw-button {
    border-color: rgba(212,204,184,.45);
    color: rgba(245,242,237,.94);
    background: transparent;
}
.mw-feature-block.mw-ship-teaser .mw-button:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(212,204,184,.70);
    color: #fff;
}

/* ── §50.10 Reise-/Schiff-Card Scrim — warmes Dunkel ────────────────── */
.mw-trip-card__media::after,
.mw-ship-card__media::after {
    background: linear-gradient(
        180deg,
        rgba(37,37,37,0)    0%,
        rgba(37,37,37,.12) 45%,
        rgba(37,37,37,.60) 76%,
        rgba(37,37,37,.75) 100%
    ) !important;
}

/* ── §50.11 Focus-Ring → wird in §50.5 Buttons gesetzt ──────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   §51  SCHIFFE-ÜBERSICHT — Hero + Finder + Karten (Redesign 2026)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── §51.1 Ships-Hero: identische Höhe wie alle anderen Hero-Bereiche ── */
.mw-overview-hero--ships.has-image {
    min-height: clamp(640px, var(--mw-hero-min-height-vh, 76vh), 960px) !important;
    height:     clamp(640px, var(--mw-hero-min-height-vh, 76vh), 960px) !important;
}

@media (max-width: 1024px) {
    .mw-overview-hero--ships.has-image {
        min-height: clamp(480px, var(--mw-hero-min-height-tablet-vh, 68vh), 780px) !important;
        height:     clamp(480px, var(--mw-hero-min-height-tablet-vh, 68vh), 780px) !important;
    }
}

@media (max-width: 680px) {
    .mw-overview-hero--ships.has-image {
        min-height: clamp(380px, var(--mw-hero-min-height-mobile-vh, 58vh), 580px) !important;
        height:     clamp(380px, var(--mw-hero-min-height-mobile-vh, 58vh), 580px) !important;
    }
}

/* ── §51.2 Finder-Sektion Wrapper ───────────────────────────────────── */
/* Positionierung unter dem Hero übernimmt .mw-home-finder--below-hero
   (identisch zum Reisefinder auf /reiseziele/). Kein negativer Overlap mehr,
   damit die Karte nicht in den Hero hineinragt. */
.mw-ship-finder-section {
    position: relative;
    z-index: 20;
    margin-bottom: 48px;
}

.mw-ship-finder-section .mw-overview-finder {
    padding: 0;
    margin: 0;
}

.mw-ship-finder-section .mw-overview-finder > .mw-container {
    width: min(calc(100% - 40px), 1240px);
    padding: 0;
}

@media (max-width: 540px) {
    .mw-ship-finder-section {
        margin-bottom: 32px;
    }
}

/* ── §51.3 mw-finder--ships: Premium Card (identisch zum Reisefinder) ─ */
.mw-finder--ships {
    background: rgba(250, 248, 243, .98);
    border-radius: 32px;
    box-shadow: 0 28px 60px rgba(37, 37, 37, .085);
    border: 1px solid rgba(84, 70, 58, .10);
    backdrop-filter: blur(18px);
}

/* Header: kompakter als Reisefinder, dezenter */
.mw-finder--ships .mw-finder__header {
    margin-bottom: 18px;
}

.mw-finder--ships .mw-finder__header h2 {
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    font-weight: 400;
    color: var(--mw-ink, #252525);
    margin: .15rem 0 0;
}

.mw-finder--ships .mw-finder__subtitle {
    margin: 8px 0 0;
    color: var(--mw-muted, #826D5A);
    font-size: .97rem;
    line-height: 1.55;
}

/* Form-Grid: 3 Felder + Aktionen-Spalte */
.mw-finder--ships .mw-finder__form {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(170px, auto);
}

.mw-finder--ships.mw-finder--2col .mw-finder__form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(170px, auto);
}

.mw-finder--ships.mw-finder--1col .mw-finder__form {
    grid-template-columns: 1fr minmax(170px, auto);
}

/* Felder: Gold statt Teal bei Hover/Focus */
.mw-finder--ships .mw-finder__field:hover,
.mw-finder--ships .mw-finder__field[open],
.mw-finder--ships .mw-finder__field:focus-within {
    border-color: rgba(197, 171, 81, .42);
    background: var(--mw-surface, #FFFFFF);
    box-shadow: 0 18px 38px rgba(37, 37, 37, .07);
}

/* Icon-Hintergrund: Taupe — identisch zum Home-Reisefinder */
.mw-finder--ships .mw-finder__icon {
    background: rgba(98, 86, 78, .08) !important;
    color: var(--mw-primary) !important;
}
.mw-finder--ships .mw-finder__field:hover .mw-finder__icon,
.mw-finder--ships .mw-finder__field[open] .mw-finder__icon {
    background: rgba(98, 86, 78, .14) !important;
    color: var(--mw-primary-hover) !important;
}

/* Icon-Hintergrund: Taupe statt Petrol (Travel/Hero-Finder) */
.mw-home-finder .mw-finder__icon {
    background: rgba(98, 86, 78, .08) !important;
    color: var(--mw-primary) !important;
}
.mw-home-finder .mw-finder__field:hover .mw-finder__icon,
.mw-home-finder .mw-finder__field[open] .mw-finder__icon {
    background: rgba(98, 86, 78, .14) !important;
    color: var(--mw-primary-hover) !important;
}

/* Aktionen-Spalte: Submit füllt die Zeile, Reset klein darunter */
.mw-finder--ships .mw-finder__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    justify-content: center;
    align-self: stretch;
}

/* Felder-Höhe explizit setzen — Basis für Submit-Höhe */
.mw-finder--ships .mw-finder__field > summary {
    min-height: 76px;
    display: flex;
    align-items: center;
}

.mw-finder--ships .mw-finder__submit {
    flex: 1;
    min-height: 52px;
    padding-inline: 28px;
    border-radius: 22px;
}

.mw-finder--ships .mw-finder__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px;
    color: var(--mw-muted, #826D5A);
    font-size: .79rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    transition: color .18s, background .18s;
    white-space: nowrap;
    flex-shrink: 0;
}

.mw-finder--ships .mw-finder__reset:hover {
    color: var(--mw-ink, #252525);
    background: rgba(37, 37, 37, .05);
}

/* Finder-Panel: Gold-Akzent bei Checkbox */
.mw-finder--ships .mw-finder__choices input {
    accent-color: var(--mw-gold, #C5AB51);
}

/* ── §51.4 Responsive Filter ────────────────────────────────────────── */
@media (max-width: 960px) {
    .mw-finder--ships .mw-finder__form,
    .mw-finder--ships.mw-finder--2col .mw-finder__form,
    .mw-finder--ships.mw-finder--3col .mw-finder__form {
        grid-template-columns: 1fr 1fr;
    }

    .mw-finder--ships .mw-finder__actions {
        grid-column: 1 / -1;
        flex-direction: row;
        min-height: 0;
    }

    .mw-finder--ships .mw-finder__submit {
        flex: 1;
        min-height: 56px;
    }

    .mw-finder--ships .mw-finder__reset {
        align-self: center;
    }
}

@media (max-width: 600px) {
    /* Volle Spezifität, damit die ≤960px-2-Spalten-Regel (…--3col …) sicher
       überschrieben wird und Felder mobil einspaltig stehen – verhindert
       enge Felder mit Label-Umbrüchen wie „REISEZIEL / GEBIET". */
    .mw-finder--ships .mw-finder__form,
    .mw-finder--ships.mw-finder--1col .mw-finder__form,
    .mw-finder--ships.mw-finder--2col .mw-finder__form,
    .mw-finder--ships.mw-finder--3col .mw-finder__form {
        grid-template-columns: 1fr;
    }

    .mw-finder--ships .mw-finder__field {
        min-height: 64px;
    }

    .mw-finder--ships .mw-finder__field summary {
        min-height: 64px;
    }

    .mw-finder--ships .mw-finder__submit {
        min-height: 54px;
        border-radius: 18px;
    }
}

/* ── §51.5 Backwards-compat: altes mw-ship-filterbar (depr.) ────────── */
/* Diese Klasse wird nicht mehr ausgegeben — CSS bleibt für Server-Cache */
.mw-ship-filterbar__field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.mw-ship-filterbar__label {
    display: block;
    color: #6E6359;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

.mw-ship-filterbar__select-wrap {
    position: relative;
}

.mw-ship-filterbar__select {
    width: 100%;
    min-height: 54px;
    padding: 0 44px 0 16px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #EEE7DC;
    border-radius: 14px;
    background: #FFFFFF;
    color: #252525;
    font: inherit;
    font-size: .97rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
}

.mw-ship-filterbar__select:hover,
.mw-ship-filterbar__select:focus {
    border-color: #C5AB51;
    outline: none;
    box-shadow: 0 0 0 3px rgba(197, 171, 81, .15);
}

.mw-ship-filterbar__chevron {
    pointer-events: none;
    position: absolute;
    right: 14px;
    top: 50%;
    translate: 0 -50%;
    color: #6E6359;
    transition: color .18s;
}

.mw-ship-filterbar__select:focus ~ .mw-ship-filterbar__chevron {
    color: #C5AB51;
}

/* ── §51.6 Actions: Submit + Reset ─────────────────────────────────── */
.mw-ship-filterbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.mw-ship-filterbar__btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 54px;
    padding-inline: 22px;
    white-space: nowrap;
}

.mw-ship-filterbar__btn-reset {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 10px;
    color: #6E6359;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .18s, background .18s;
    white-space: nowrap;
}

.mw-ship-filterbar__btn-reset:hover {
    background: rgba(37, 37, 37, .06);
    color: #252525;
}

/* ── §51.7 Filter-Bar Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
    .mw-ship-filterbar__form,
    .mw-ship-filterbar--2col .mw-ship-filterbar__form,
    .mw-ship-filterbar--1col .mw-ship-filterbar__form {
        grid-template-columns: 1fr;
    }

    .mw-ship-filterbar__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mw-ship-filterbar__btn-submit {
        width: 100%;
        justify-content: center;
    }

    .mw-ship-filterbar {
        border-radius: 20px;
    }
}

@media (max-width: 540px) {
    .mw-ship-filterbar {
        padding: 22px 18px;
    }
}

/* ── §51.6 Neue Schiffskarte — Body-Below-Image Design ──────────────── */

/* Alte Overlay/Topbar-Elemente ausblenden (nicht mehr im Template) */
.mw-ship-card__topbar,
.mw-ship-card__overlay {
    display: none !important;
}

/* Karte selbst */
.mw-ship-card {
    display: flex;
    flex-direction: column;
    background: var(--mw-card-bg, #FFFFFF);
    border: 1px solid var(--mw-bg-soft, #EEE7DC);
    border-radius: 18px;
    overflow: hidden;
    transition: box-shadow .22s, transform .22s;
    cursor: pointer;
}

.mw-ship-card:hover {
    box-shadow: 0 8px 32px rgba(37, 37, 37, .14);
    transform: translateY(-3px);
}

/* Bild-Link */
.mw-ship-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: #EEE7DC;
    flex-shrink: 0;
}

.mw-ship-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .42s ease;
}

.mw-ship-card:hover .mw-ship-card__media img {
    transform: scale(1.05);
}

/* Kein Scrim mehr über dem Bild (da Name jetzt im Body steht) */
.mw-ship-card__media::after {
    content: none !important;
}

/* Badge in Bild-Ecke */
.mw-ship-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 11px;
    border-radius: 20px;
    background: var(--mw-ship-badge-bg, #62564E);
    color: #FFFFFF;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
}

/* Body-Bereich unterhalb Bild */
.mw-ship-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 20px 20px;
    gap: 6px;
}

/* Schiffstyp-Label */
.mw-ship-card__type {
    display: inline-block;
    color: var(--mw-gold, #C5AB51);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
}

/* Schiffsname h3 */
.mw-ship-card__name {
    margin: 0;
    color: #252525;
    font-family: var(--mw-serif, Georgia, serif);
    font-size: clamp(1.12rem, 1.5vw, 1.32rem);
    line-height: 1.18;
    font-weight: 700;
}

.mw-ship-card__name a {
    color: inherit;
    text-decoration: none;
    transition: color .18s;
}

.mw-ship-card__name a:hover {
    color: #C5AB51;
}

/* Facts-Block: kompakter Statistik-Block, Taupe-Welt, kein Grün/Petrol */
.mw-ship-card__facts {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    margin: 14px 0 12px !important;
    padding: 0 !important;
    background: #F7F4EF !important;
    border: 1px solid rgba(98, 86, 78, .16) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    min-height: 0 !important;
    list-style: none;
}

.mw-ship-card__facts > div {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center !important;
}

.mw-ship-card__facts > div + div {
    border-left: 1px solid rgba(98, 86, 78, .14) !important;
}

.mw-ship-card__facts dt {
    order: 0 !important;
    color: var(--mw-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    text-align: center !important;
    margin: 0 !important;
}

.mw-ship-card__facts dd {
    order: 1 !important;
    color: var(--mw-ink) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-align: center !important;
}

@media (max-width: 640px) {
    .mw-ship-card__facts {
        min-height: 0 !important;
    }

    .mw-ship-card__facts > div {
        min-height: 0 !important;
        padding: 8px 8px !important;
    }

    .mw-ship-card__facts dt {
        font-size: 10px !important;
        letter-spacing: .12em !important;
    }

    .mw-ship-card__facts dd {
        font-size: 20px !important;
    }
}

/* Trennlinie vor CTA */
.mw-ship-card__body .mw-ship-card__facts + .mw-ship-card__cta {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--mw-bg-soft, #EEE7DC);
}

/* CTA-Link */
.mw-ship-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    align-self: flex-start;
    color: var(--mw-gold, #C5AB51);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    transition: gap .18s, color .18s;
}

.mw-ship-card__cta:hover {
    gap: 10px;
    color: #54463A;
}

.mw-ship-card__cta svg {
    flex-shrink: 0;
    transition: translate .18s;
}

.mw-ship-card__cta:hover svg {
    translate: 3px 0;
}

/* Alte höhenbasierte Media-Override neutralisieren */
.mw-ship-card-grid .mw-ship-card__media {
    height: auto !important;
    min-height: 0 !important;
}

/* ── §51.7 Grid-Spalten: Desktop-Override + Tablet/Mobil via CSS-Var ─── */
.mw-ship-card-grid.mw-card-grid--two   { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.mw-ship-card-grid.mw-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.mw-ship-card-grid.mw-card-grid--four  { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.mw-ship-card-grid.mw-card-grid--one   { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }

/* ── §51.8 Grid-Spalten Tablet/Mobil ────────────────────────────────── */
@media (max-width: 900px) {
    .mw-ship-card-grid,
    .mw-ship-card-grid.mw-card-grid--two,
    .mw-ship-card-grid.mw-card-grid--three,
    .mw-ship-card-grid.mw-card-grid--four {
        grid-template-columns: repeat(var(--mw-ship-cards-tablet, 2), minmax(0, 1fr)) !important;
    }
}

@media (max-width: 540px) {
    .mw-ship-card-grid,
    .mw-ship-card-grid.mw-card-grid--two,
    .mw-ship-card-grid.mw-card-grid--three,
    .mw-ship-card-grid.mw-card-grid--four {
        grid-template-columns: repeat(var(--mw-ship-cards-mobile, 1), minmax(0, 1fr)) !important;
    }

    .mw-ship-card__body {
        padding: 14px 16px 16px;
    }
}


/* ─── §47 Card Scroll Carousel ──────────────────────────────────────────────── */

.mw-card-scroll-outer {
    position: relative;
}

.mw-card-scroll-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.mw-card-scroll-track::-webkit-scrollbar { display: none; }

.mw-card-scroll-track > * {
    flex: 0 0 calc((100% - 2 * 24px) / 3);
    max-width: calc((100% - 2 * 24px) / 3);
    scroll-snap-align: start;
    min-width: 0;
}

/* Ship cards in carousel — keep their min-height */
.mw-card-scroll-track .mw-region-ship-card {
    border-radius: 18px;
}

.mw-scroll-btn {
    position: absolute;
    top: calc(50% - 28px);
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(98, 86, 78, 0.2);
    background: #fff;
    color: #62564E;
    font-size: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms, color 200ms, border-color 200ms;
    box-shadow: 0 2px 12px rgba(37, 37, 37, 0.08);
    flex-shrink: 0;
}
.mw-scroll-btn--prev { left: -16px; }
.mw-scroll-btn--next { right: -16px; }
.mw-scroll-btn[hidden] { display: none !important; }
/* Parent-Theme faerbt button:focus/:active pink (#CC3366) - hier neutralisiert,
   sonst bleibt der Pfeil nach dem Klick rosa stehen. */
.mw-scroll-btn:focus,
.mw-scroll-btn:active { background: #fff; color: #62564E; border-color: rgba(98, 86, 78, 0.2); }
.mw-scroll-btn:hover,
.mw-scroll-btn:focus:hover,
.mw-scroll-btn:active:hover { background: #62564E; color: #fff; border-color: #62564E; }
.mw-scroll-btn:focus-visible { outline: 2px solid #62564E; outline-offset: 2px; }

@media (max-width: 960px) {
    .mw-card-scroll-track > * {
        flex: 0 0 calc((100% - 24px) / 2);
        max-width: calc((100% - 24px) / 2);
    }
}

@media (max-width: 600px) {
    .mw-card-scroll-track > * {
        flex: 0 0 88%;
        max-width: 88%;
    }
    .mw-scroll-btn { display: none; }
}

/* ═══════════════════════════════════════════════════
   §48  HERO SYSTEM — Final.
   Zwei Ebenen: Bild (absolut) + ::after Gradient (unten).
   Breadcrumb: eigene absolute Ebene oben.
   Content: absolute unten, nie mittig.
   Header: vollständig transparent, kein eigenes Overlay.
   ═══════════════════════════════════════════════════ */

/* ── Basis ────────────────────────────────────────── */
.mw-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: block;
    min-height: clamp(620px, 82vh, 860px);
}

/* Bild */
.mw-hero__picture {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}
.mw-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* ── Scrim: Ausgerichtet am oberen Rand von mw-hero__content-inner ──
   content-inner = 247px hoch, positioniert bei bottom: ~37px.
   → content-inner-Oberkante liegt ~284px vom Hero-Boden entfernt.
   Scrim-Höhe muss 284px + Auslauf (~60px) ≈ 50% des 740px-Heros abdecken.
   Gradient: unten transparent (Strand/Himmel zeigt naturell), dunkel
   hinter Buttons/Titel, fade oben über dem content-inner.              */
.mw-hero::before { display: none !important; }
.mw-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--mw-scrim-height, 50%);
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to top,
        transparent 0%,                                  /* Foto-Boden: komplett klar */
        transparent 8%,                                  /* Puffer unter Buttons */
        var(--mw-scrim-bottom, rgba(12,13,14,.18)) 20%, /* Buttons-Ebene */
        var(--mw-scrim-mid,    rgba(12,13,14,.30)) 48%, /* Titel-Ebene — Maximum */
        var(--mw-scrim-top,    rgba(12,13,14,.18)) 72%, /* Kicker-Ebene */
        transparent 100%                                 /* content-inner-Top: fade komplett weg */
    );
}

/* Alten Shade entfernen */
.mw-hero > .mw-hero__shade { display: none !important; }

/* ── Hero-Höhe: ALLE Seitentypen einheitlich via Customizer ─────────
   Eine Variable steuert Homepage, Landingpages, Archive, Reisen, Schiffe.
   Standard: 90vh — entspricht dem visuellen Eindruck der Startseite.
   vh = % der sichtbaren Fensterhöhe. 90vh bei 830px Fenster = 747px.  */
.home .mw-hero,
.front-page .mw-hero,
.page .mw-hero,
.archive .mw-hero,
.tax-reiseziel .mw-hero,
.tax-region .mw-hero,
.single-reise .mw-hero,
.single-schiffe .mw-hero {
    min-height: clamp(600px, var(--mw-hero-min-height-vh, 90vh), 1020px);
}

/* Explizite Modifier: skalieren relativ zur Basis-Variable */
.mw-hero--h-xlarge { min-height: clamp(700px, calc(var(--mw-hero-min-height-vh, 90vh) + 4vh), 1060px) !important; }
.mw-hero--h-large  { min-height: clamp(600px, var(--mw-hero-min-height-vh, 90vh), 1020px) !important; }
.mw-hero--h-medium { min-height: clamp(480px, calc(var(--mw-hero-min-height-vh, 90vh) - 20vh), 760px) !important; }
.mw-hero--h-small  { min-height: clamp(380px, calc(var(--mw-hero-min-height-vh, 90vh) - 36vh), 580px) !important; }

/* ── Breadcrumb: oben, eigene Ebene ───────────────── */
.mw-hero__breadcrumb {
    position: absolute;
    top: calc(var(--mw-header-height, 78px) + 24px);
    left: 50%;
    transform: translateX(-50%);
    width: min(1180px, calc(100vw - 120px));
    z-index: 4;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: .10em;
    text-transform: uppercase;
    line-height: 1.4;
}
.mw-hero__breadcrumb *,
.mw-hero__breadcrumb a,
.mw-hero__breadcrumb span,
.mw-hero__breadcrumb li,
.mw-hero__breadcrumb ol,
.mw-hero__breadcrumb nav {
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: rgba(255,255,255,.58) !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.50);
    background: none !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.mw-hero__breadcrumb a:hover {
    color: rgba(255,255,255,.90) !important;
}
.mw-hero__breadcrumb .mw-breadcrumbs__current,
.mw-hero__breadcrumb [aria-current="page"],
.mw-hero__breadcrumb li:last-child,
.mw-hero__breadcrumb li:last-child * {
    color: rgba(255,255,255,.85) !important;
}

/* ── Content: absolut unten, tiefer positioniert ─── */
/* Parent-Theme setzt padding: 112px 0 84px → explizit auf 0 setzen */
.mw-hero__content {
    position: absolute !important;
    left: 50% !important;
    bottom: clamp(36px, 4.5vh, 60px) !important;
    transform: translateX(-50%) !important;
    width: min(1180px, calc(100vw - 120px));
    z-index: 3;
    padding: 0 !important;
    margin: 0 !important;
}
.mw-hero__content-inner {
    max-width: 980px;
    text-align: left;
}
.home .mw-hero__content-inner {
    max-width: 1180px;
}

/* ── Kicker / Badge ──────────────────────────────── */
.mw-hero__kicker-row {
    margin-bottom: 10px;
}
.mw-hero__kicker {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.7;
}
.mw-hero__kicker--gold  { background: var(--mw-gold, #9B8B6C); color: #fff; }
.mw-hero__kicker--dark  {
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.92);
}
.mw-hero__kicker--light {
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.26);
    color: #fff;
}

/* ── Titel ───────────────────────────────────────── */
/* Parent-Theme: .mw-hero h1 { font-size: 5.2rem } mit Spezifität 0,1,1
   → wir brauchen mindestens 0,2,1 um zu gewinnen */
.mw-hero h1.mw-hero__title,
.mw-hero__title {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(40px, 4vw, 64px) !important;
    font-weight: 300 !important;
    line-height: .98 !important;
    letter-spacing: -.025em !important;
    text-wrap: balance;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: break-word;
    max-width: none !important;
    width: 100%;
}
.home .mw-hero h1.mw-hero__title,
.home .mw-hero__title {
    font-size: clamp(46px, 4.2vw, 70px) !important;
    max-width: 1180px !important;
}
.single-reise .mw-hero h1.mw-hero__title,
.single-reise .mw-hero__title,
.page .mw-hero h1.mw-hero__title,
.page .mw-hero__title {
    font-size: clamp(38px, 3.8vw, 60px) !important;
    max-width: 1040px !important;
}

/* ── Teaser ──────────────────────────────────────── */
.mw-hero__teaser {
    max-width: 760px;
    margin: 18px 0 0;
    font-size: clamp(17px, 1.3vw, 22px);
    font-weight: 400;
    line-height: 1.55;
    color: rgba(255,255,255,.84) !important;
}

/* ── Chips ───────────────────────────────────────── */
.mw-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.mw-hero__chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 2px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(255,255,255,.14);
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.5;
}
.mw-hero__chip-l {
    color: rgba(255,255,255,.44);
    font-weight: 400;
    margin-right: .3em;
}
.mw-hero__chip-l::after { content: ':'; }
.mw-hero__chip-v { color: rgba(255,255,255,.90); font-weight: 500; }

/* ── Buttons ─────────────────────────────────────── */
.mw-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

/* ── No-Image-Fallback ───────────────────────────── */
.mw-hero.no-image { min-height: 0; }
.mw-hero.no-image::after  { display: none !important; }
.mw-hero.no-image .mw-hero__content   { position: relative; bottom: auto; left: auto; transform: none; width: auto; padding: 80px 0 60px; }
.mw-hero.no-image .mw-hero__breadcrumb { position: relative; top: auto; left: auto; transform: none; width: auto; padding: 40px 0 0; margin-bottom: 0; }
.mw-hero.no-image .mw-hero__title     { color: var(--mw-ink) !important; }
.mw-hero.no-image .mw-hero__teaser    { color: var(--mw-muted) !important; }
.mw-hero.no-image .mw-hero__chip      { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.09); }
.mw-hero.no-image .mw-hero__chip-l    { color: var(--mw-muted); }
.mw-hero.no-image .mw-hero__chip-v    { color: var(--mw-ink); }
.mw-hero.no-image .mw-hero__kicker--dark,
.mw-hero.no-image .mw-hero__kicker--light { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.11); color: var(--mw-ink); }
.mw-hero.no-image .mw-hero__breadcrumb .mw-breadcrumbs,
.mw-hero.no-image .mw-hero__breadcrumb .mw-breadcrumbs a { color: var(--mw-muted); text-shadow: none; }

/* ── Nachfolgende Boxen / Finder-Overlap ─────────── */
.mw-section-overlap { margin-top: -32px; }
.mw-home-finder--below-hero { margin-top: 0 !important; }
.mw-ship-archive .mw-home-finder--below-hero,
.mw-overview-page .mw-home-finder--below-hero,
.post-type-archive-reisen .mw-home-finder--below-hero { margin-top: 24px !important; }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1024px) {
    .mw-hero__content {
        width: calc(100vw - 80px);
        bottom: clamp(48px, 7vh, 80px);
    }
    .mw-hero__breadcrumb { width: calc(100vw - 80px); }
    .mw-hero__title { font-size: clamp(40px, 5vw, 64px) !important; }
}
@media (max-width: 768px) {
    .mw-hero { min-height: clamp(480px, 78vh, 660px); }
    .mw-hero.no-image { min-height: 0; }
    .mw-hero__content {
        width: calc(100vw - 48px);
        bottom: clamp(40px, 6vh, 64px);
    }
    .mw-hero__breadcrumb {
        top: calc(var(--mw-header-height, 72px) + 20px);
        width: calc(100vw - 48px);
    }
    .mw-hero__content-inner,
    .home .mw-hero__content-inner { max-width: 100%; }
    .mw-hero__title,
    .home .mw-hero__title,
    .single-reise .mw-hero__title,
    .page .mw-hero__title { font-size: clamp(32px, 6.5vw, 52px) !important; line-height: 1.04; }
    .mw-hero__teaser { font-size: clamp(15px, 2.4vw, 18px) !important; max-width: 100%; }
    .mw-hero__chips  { gap: 8px; }
    .mw-hero__chip   { font-size: 12px; padding: 4px 10px; }
    .mw-hero__actions { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 20px; }
}
@media (max-width: 480px) {
    .mw-hero { min-height: clamp(400px, 72vh, 580px); }
    .mw-hero__content { width: calc(100vw - 32px); bottom: 36px; }
    .mw-hero__breadcrumb { width: calc(100vw - 32px); font-size: 11px; }
    .mw-hero__title,
    .home .mw-hero__title,
    .single-reise .mw-hero__title,
    .page .mw-hero__title { font-size: clamp(28px, 7.5vw, 44px) !important; }
    .mw-hero__teaser { font-size: 15px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §60  MOBILMENÜ — Design System 2.0
   Slide-in Panel von rechts (≤ 980px)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §60.1 Hamburger-Button — auf Hero: dunkles Glas ────────────────────── */
/* Dunkler Scrim (statt weißem Glas): die weißen Balken bleiben so über JEDEM
   Hero sichtbar – auch über hellen Bildern und dem weißen Header-Band. Zuvor
   weiß-auf-weiß (Kontrast 1:1 = unsichtbarer Burger). Jetzt weiß auf ~#878787
   ≈ 3,5:1 (WCAG AA für UI-Komponenten). */
body.has-page-hero .mw-header:not(.is-scrolled) .mw-menu-toggle {
    background: rgba(37,37,37,.55) !important;
    border-color: rgba(255,255,255,.30) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.has-page-hero .mw-header:not(.is-scrolled) .mw-menu-toggle span:not(.screen-reader-text) {
    background: #fff !important;
}
/* Scrolled / ohne Hero */
.mw-header.is-scrolled .mw-menu-toggle,
body:not(.has-page-hero) .mw-menu-toggle {
    background: rgba(98,86,78,.08) !important;
    border-color: rgba(98,86,78,.22) !important;
}
.mw-header.is-scrolled .mw-menu-toggle span:not(.screen-reader-text),
body:not(.has-page-hero) .mw-menu-toggle span:not(.screen-reader-text) {
    background: var(--mw-primary) !important;
}

/* ── §60.2 Header: Taupe wenn Menü offen ────────────────────────────────── */
body.mw-nav-open .mw-header {
    background: var(--mw-primary) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
body.mw-nav-open .mw-brand__logo--dark  { opacity: 0 !important; }
body.mw-nav-open .mw-brand__logo--light { opacity: 1 !important; }
body.mw-nav-open .mw-menu-toggle {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(245,242,237,.30) !important;
}
body.mw-nav-open .mw-menu-toggle span:not(.screen-reader-text) {
    background: var(--mw-footer-text) !important;
}

/* ── §60.3 Nav-Panel: Taupe-Dunkel ─────────────────────────────────────── */
@media (max-width: 980px) {

    /* Panel: Tiefes Taupe */
    .mw-nav {
        background: var(--mw-primary) !important;
        border-left: 1px solid rgba(245,242,237,.12) !important;
        box-shadow: -12px 0 48px rgba(37,37,37,.22) !important;
        gap: 0 !important;
        /* Das Panel sitzt bereits per inset unter dem Header – daher hier nur
           ein kleiner Atem-Abstand statt einer zweiten vollen Header-Höhe
           (behob den ~68px-Leerraum vor dem ersten Menüpunkt). */
        padding-top: 24px !important;
        padding-bottom: 32px !important;
    }

    /* Nav-Liste: Trennlinien in hellem Taupe */
    .mw-nav > .mw-nav__list {
        gap: 0 !important;
        border-top: 1px solid rgba(245,242,237,.12) !important;
        height: auto !important;
        align-content: start !important;
    }
    .mw-nav__list > li {
        border-bottom: 1px solid rgba(245,242,237,.12) !important;
    }

    /* ── §60.4 Haupt-Links & Summary ────────────────────────────────────── */
    .mw-nav__list > li > a,
    .mw-nav__list > li > details > summary {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 15px 20px !important;
        color: var(--mw-footer-text) !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        letter-spacing: 0.02em !important;
        text-shadow: none !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        cursor: pointer !important;
    }
    .mw-nav__list > li > a:hover,
    .mw-nav__list > li > details > summary:hover,
    .mw-nav__list > li > details[open] > summary {
        color: #FFFFFF !important;
        background: rgba(255,255,255,.08) !important;
    }

    /* ── §60.5 Mega-Menü: Intro ausblenden, Links als Liste ─────────────── */
    .mw-mega {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(0,0,0,.18) !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border-top: 1px solid rgba(245,242,237,.10) !important;
        transform: none !important;
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Intro-Karte: nur den "Alle … ansehen"-Übersichtslink als Menüzeile
       zeigen (Label/Beschreibung sind Desktop-Deko und bleiben verborgen).
       Reihenfolge: erst die Einzel-Links, dann der Übersichtslink unten. */
    .mw-mega__cols  { order: 1 !important; }
    .mw-mega__intro { order: 2 !important; }
    .mw-mega__intro {
        display: block !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .mw-mega__intro span,
    .mw-mega__intro strong { display: none !important; }
    .mw-mega__intro a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 10px 20px 10px 36px !important;
        background: transparent !important;
        border: none !important;
        border-top: 1px solid rgba(245,242,237,.08) !important;
        border-radius: 0 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        color: var(--mw-footer-text) !important;
        text-shadow: none !important;
    }
    .mw-mega__intro a::before {
        content: '›' !important;
        margin-right: 10px !important;
        margin-left: -16px !important;
        color: var(--mw-gold, #9B8B6C) !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }
    .mw-mega__intro a:hover,
    .mw-mega__intro a:focus-visible {
        background: rgba(255,255,255,.08) !important;
        color: #FFFFFF !important;
    }

    /* Destination-Links: saubere Liste in hell */
    .mw-mega__cols {
        display: block !important;
        padding: 4px 0 !important;
    }
    .mw-mega__cols a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: 10px 20px 10px 36px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(245,242,237,.08) !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        color: var(--mw-sand) !important;
        transform: none !important;
    }
    .mw-mega__cols a:last-child { border-bottom: none !important; }
    .mw-mega__cols a:hover {
        background: rgba(255,255,255,.08) !important;
        color: #FFFFFF !important;
    }
    /* Pfeil-Indent-Marker */
    .mw-mega__cols a::before {
        content: '›' !important;
        margin-right: 10px !important;
        margin-left: -16px !important;
        color: rgba(245,242,237,.40) !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }

    /* ── §60.6 CTA-Button: Ghost auf Taupe ──────────────────────────────── */
    .mw-nav > .mw-nav__cta {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 20px 20px 0 !important;
        width: calc(100% - 40px) !important;
        min-height: 52px !important;
        background: rgba(255,255,255,.14) !important;
        border: 1px solid rgba(245,242,237,.35) !important;
        color: var(--mw-footer-text) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        text-shadow: none !important;
        border-radius: 6px !important;
        box-shadow: none !important;
    }
    .mw-nav > .mw-nav__cta:hover {
        background: rgba(255,255,255,.24) !important;
        border-color: rgba(245,242,237,.55) !important;
        color: #FFFFFF !important;
    }

    /* ── §60.7 Tel-Link im Menü ──────────────────────────────────────────── */
    .mw-nav .mw-header__tel {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 12px 20px 0 !important;
        padding: 10px 0 !important;
        color: rgba(245,242,237,.60) !important;
        font-size: 14px !important;
        border-top: 1px solid rgba(245,242,237,.14) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §61  DIVERSE UI-FIXES — DS 2.0 Nachbesserungen
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §61.1 Admin-Bar Mobile: Header-Gap schließen ───────────────────────── */
/* WordPress blendet Admin-Bar auf < 600px aus, aber body.admin-bar bleibt.
   Das parent-theme-Regel "body.admin-bar .mw-header { top: 32px; }" erzeugt
   dann einen weißen Balken oben. Fix: Header auf top:0 zurücksetzen. */
@media (max-width: 600px) {
    body.admin-bar .mw-header {
        top: 0 !important;
    }
    body.admin-bar {
        --mw-admin-bar-height: 0px !important;
    }
}

/* ── §61.2 Buttons — einheitlicher border-radius + sichtbarer Primary-Rand ─ */
.mw-button {
    border-radius: var(--mw-button-radius, 6px) !important;
}
.mw-button--primary {
    border-color: var(--mw-primary, var(--mw-primary)) !important;
}
.mw-button--primary:hover,
.mw-button--primary:focus-visible {
    border-color: var(--mw-primary-hover, var(--mw-primary-hover)) !important;
}
/* Ghost/Light auf hellem Hintergrund: klare Outline */
.mw-button--secondary {
    border-radius: var(--mw-button-radius, 6px) !important;
}

/* ── §61.3 Destination-Tiles: <small>-Beschreibung ausblenden ───────────── */
.mw-destination-tile small,
.mw-destination-tiles small,
.mw-destination-list small {
    display: none !important;
}

/* ── §61.4 Reisefinder: Hover-Border rund (Field, nicht Summary) ────────── */
/* Die Border muss auf dem Field liegen (border-radius: 22px dort vorhanden).
   Summary-Border entfernt (§725), Field-Border Gold statt Teal. */
.mw-finder__field:hover,
.mw-finder__field[open],
.mw-finder__field:focus-within {
    border-color: rgba(197, 171, 81, .50) !important;
    box-shadow: 0 10px 30px rgba(37, 37, 37, .08) !important;
}

/* ── §61.5 Footer: summary-Überschrift größer ───────────────────────────── */
.mw-footer-group summary,
.mw-footer--compact .mw-footer-group summary {
    font-size: .72rem !important;
    letter-spacing: .12em !important;
    opacity: .65 !important;
    padding: 0 0 12px !important;
    margin-bottom: 16px !important;
}

/* ── §61.6 Footer-Menü-Links: kompaktere Abstände ───────────────────────── */
.mw-footer-menu a,
.mw-footer-menu li a,
.mw-footer-group > a,
.mw-footer--compact .mw-footer-group a,
.mw-footer--compact .mw-footer-menu a {
    padding: 3px 0 !important;
    font-size: .88rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §62  Home-Hero Buttons — .mw-hero .mw-hero__actions
   Home-Startseite nutzt mw-button--light + mw-button--ghost.
   Bestehende Regeln (§28j) decken nur .mw-page-hero ab → hier ergänzt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* §62.1 Primär-CTA (--light auf Startseite) → Taupe-Dunkel mit weißem Text */
.mw-hero .mw-hero__actions .mw-button--light,
.mw-hero .mw-hero__actions .mw-button--primary {
    background:   var(--mw-primary, var(--mw-primary)) !important;
    border-color: var(--mw-primary, var(--mw-primary)) !important;
    color:        #fff !important;
    text-shadow:  none !important;
}
.mw-hero .mw-hero__actions .mw-button--light:hover,
.mw-hero .mw-hero__actions .mw-button--primary:hover {
    background:   var(--mw-primary-hover, var(--mw-primary-hover)) !important;
    border-color: var(--mw-primary-hover, var(--mw-primary-hover)) !important;
}

/* §62.2 Ghost-CTA (Reisefinder) → halbtransparent weiß auf dunklem Hero */
.mw-hero .mw-hero__actions .mw-button--ghost,
.mw-hero .mw-hero__actions .mw-button--outline,
.mw-hero .mw-hero__actions .mw-button--secondary {
    background:              rgba(255, 255, 255, .12) !important;
    border:                  1px solid rgba(255, 255, 255, .55) !important;
    color:                   #fff !important;
    backdrop-filter:         blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    text-shadow:             none !important;
}
.mw-hero .mw-hero__actions .mw-button--ghost:hover,
.mw-hero .mw-hero__actions .mw-button--outline:hover,
.mw-hero .mw-hero__actions .mw-button--secondary:hover {
    background:   rgba(255, 255, 255, .25) !important;
    border-color: rgba(255, 255, 255, .75) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §63  Sammelfixes 2026-07-02
   ═══════════════════════════════════════════════════════════════════════════ */

/* §63.1  h2 auf hellem Hintergrund: Headline-Farbe (Dunkelgrau/Schwarz)
   --mw-headline-color = mw_color_headline (#252525). Dunkle Sektionen/Heroes
   überschreiben weiter unten mit explizitem color:#fff. */
h2, .h2 {
    color: var(--mw-headline-color, #252525);
}

/* §63.2  Reisefinder: Submit-Button und Field gleicher border-radius
   §61.2 setzt alle .mw-button auf --mw-button-radius; Submit-Button braucht
   jedoch den Finder-Radius, damit er visuell zu den runden Feldern passt. */
.mw-finder__field,
.mw-home-finder .mw-finder__field {
    border-radius: var(--mw-finder-radius, 22px) !important;
}
.mw-finder__submit.mw-button,
.mw-finder__submit {
    border-radius: var(--mw-finder-radius, 22px) !important;
}

/* §63.3  Trip-Card Dest-Chip: Pill-Form + Customizer-Variablen statt Hardcode */
.mw-trip-card__dest-chip {
    border-radius: 999px !important;
    padding:       0 11px !important;
    font-size:     .55rem !important;
    background: var(--mw-badge-label-bg,  rgba(37, 37, 37, .82)) !important;
    color:      var(--mw-badge-label-color, #fff) !important;
    border:     1px solid var(--mw-chip-border, rgba(255, 255, 255, .14)) !important;
}

/* §63.4  TOP-ANGEBOT-Chip: gleiche Border wie Dest-Chip */
.mw-trip-card__topbar .mw-chip {
    border: 1px solid var(--mw-chip-border, rgba(255, 255, 255, .14)) !important;
}

/* §63.3b  Route-Chip im Overlay (direkt über dem Titel) — Optik wie der
   Dest-Chip, nur etwas dezenter (kleiner, transparenter). Erscheint nur, wenn
   im Feld „Route" (route_label) ein Wert gepflegt ist. */
.mw-trip-card__overlay .mw-trip-card__route-chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    max-width: 100%;
    height: 20px;
    margin: 0 0 7px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mw-badge-label-bg, rgba(37, 37, 37, .82)) 66%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(247, 245, 240, .88);
    font-family: 'Jost', sans-serif;
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, .12);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* §63.5  Destination-Tiles: strong immer weiß — kein Lila-Hover/Visited-Erbe vom <a> */
.mw-destination-tile strong,
.mw-travel-type-tile strong {
    color: #fff !important;
}
.mw-destination-tile:visited strong,
.mw-destination-tile:hover strong,
.mw-travel-type-tile:visited strong,
.mw-travel-type-tile:hover strong {
    color: #fff !important;
}

/* §63.6  Destination-Tile focus-visible: Taupe statt altem Teal */
.mw-destination-tile:focus-visible {
    outline-color: rgba(197, 171, 81, .65) !important;
}

/* §63.7  Body-Schriftgröße: meerweit.css hat body.mw-site{font-size:17px} als
   späteren Override des var()-Eintrags — höhere Spezifität (0,1,1) schlägt unser
   Dynamic-CSS body{…} (0,0,1). !important hier ist der einzige saubere Weg. */
body.mw-site {
    font-size: var(--mw-body-size, 16px) !important;
    line-height: var(--mw-body-line-height, 1.65) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §64  Customizer Typography — vollständige Kontrolle über alle Größen
   meerweit.css überschreibt CSS-Variablen mit hart codierten Werten und
   oft mit höherer Spezifität (bis zu 0,4,1). !important ist hier der
   einzig saubere Weg. upgrade.css lädt nach meerweit.css → gewinnt.
   Das Customizer-Preview-JS (buildVars) setzt die Vars in :root live;
   diese !important-Regeln greifen die aktualisierten Vars sofort auf.
   ═══════════════════════════════════════════════════════════════════════════ */

/* §64.1  H1 — Hero, Archiv, Home-Hero-Elementor-Widget */
h1,
.mw-hero h1, .mw-archive-hero h1, .mw-home-hero h1,
body.home .mw-elementor-content--frontpage .mw-home-hero h1,
body.home .mw-elementor-content--frontpage .mw-home-hero .elementor-heading-title,
body.home .mw-elementor-content--frontpage .mw-home-hero .elementor-widget-heading .elementor-heading-title {
    font-size: clamp(var(--mw-h1-mobile, 38px), 6vw, var(--mw-h1-desktop, 72px)) !important;
}
@media (max-width: 1024px) {
    h1,
    .mw-hero h1, .mw-archive-hero h1, .mw-home-hero h1,
    body.home .mw-elementor-content--frontpage .mw-home-hero h1,
    body.home .mw-elementor-content--frontpage .mw-home-hero .elementor-heading-title {
        font-size: clamp(var(--mw-h1-mobile, 38px), 7vw, var(--mw-h1-tablet, 54px)) !important;
    }
}

/* §64.2  H2 — Seiten-Überschriften + alle Home-Sektions-Titel */
h2, .h2,
.mw-section-heading h2, .mw-editorial-split h2, .mw-cta-band h2,
body.home .mw-elementor-content--frontpage .mw-home-feeling .elementor-heading-title,
body.home .mw-elementor-content--frontpage .mw-home-top-offers .elementor-heading-title,
body.home .mw-elementor-content--frontpage .mw-home-destinations .elementor-heading-title,
body.home .mw-elementor-content--frontpage .mw-home-trip-types .elementor-heading-title,
body.home .mw-elementor-content--frontpage .mw-home-ships .elementor-heading-title,
body.home .mw-elementor-content--frontpage .mw-home-trust .elementor-heading-title,
body.home .mw-elementor-content--frontpage .mw-home-final-cta .elementor-heading-title,
body.home .mw-elementor-content--frontpage .mw-home-faq .elementor-heading-title {
    font-size: clamp(calc(var(--mw-h3-size, 31px) + 4px), 4vw, var(--mw-h2-size, 46px)) !important;
}

/* §64.3  H3 — global; Karten-Overlay-Ausnahme direkt unten */
h3, .h3 {
    font-size: clamp(calc(var(--mw-h3-size, 31px) - 4px), 3vw, var(--mw-h3-size, 31px)) !important;
}
/* Karten-Overlay-H3 skaliert proportional zur H3-Einstellung,
   bleibt aber sichtbar größer (Faktor ×1.1+4px bis ×1.5) */
.mw-trip-card__overlay h3,
.mw-ship-card__overlay h3 {
    font-size: clamp(
        calc(var(--mw-h3-size, 31px) * 1.1 + 4px),
        2.8vw,
        calc(var(--mw-h3-size, 31px) * 1.5)
    ) !important;
}

/* §64.4  Buttons: Schrift, Radius, Padding */
.mw-button, .mw-nav__cta, .mw-finder__submit {
    font-size: var(--mw-button-size, 15px) !important;
}
.mw-button,
.mw-nav__cta,
.mw-finder__submit,
.mw-cta-band .mw-button,
.mw-footer__cta-card .mw-button,
.mw-home-hero__actions .mw-button,
.mw-hero .mw-hero__actions .mw-button {
    border-radius: var(--mw-button-radius, 999px) !important;
    padding: var(--mw-button-padding-y, 14px) var(--mw-button-padding-x, 22px) !important;
}

/* §64.5  Navigation Schriftgröße */
.mw-header .mw-nav a,
.mw-header .mw-nav__list--mega summary {
    font-size: var(--mw-nav-size, 15px) !important;
}

/* §64.6  Sektionsabstand */
.mw-section {
    padding-block: var(--mw-space-xl, 84px) !important;
}

/* §64.7  Container-Breite */
.mw-container {
    max-width: var(--mw-container, 1180px) !important;
}

/* §64.8  Label Letter-Spacing (Eyebrow, Finder, FAQ, Footer) */
.mw-eyebrow,
.mw-finder em,
.mw-faq summary,
.mw-footer-group summary {
    letter-spacing: var(--mw-label-tracking, 0.12em) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   §65  HERO — VIDEO-HINTERGRUND
   ═══════════════════════════════════════════════════════════════════════ */

.mw-hero .mw-hero__video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    display: block;
}

.mw-hero .mw-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.mw-hero .mw-hero__video-fallback {
    display: none;
}

/* Video auf allen Geräten zeigen — hat autoplay muted loop playsinline */

/* ── Galerie / Fade-Slider ────────────────────────────────────────────── */
.mw-hero .mw-hero__gallery {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.mw-hero .mw-hero__gallery-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
    pointer-events: none;
}

.mw-hero .mw-hero__gallery-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.mw-hero .mw-hero__gallery-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Dots — sehr dezent, unten zentriert */
.mw-hero .mw-hero__gallery-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 10;
}

.mw-hero .mw-hero__gallery-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .40);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .3s ease, transform .3s ease;
    appearance: none;
}

.mw-hero .mw-hero__gallery-dot.is-active,
.mw-hero .mw-hero__gallery-dot:hover {
    background: rgba(255, 255, 255, .90);
    transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
    .mw-hero .mw-hero__gallery-slide { transition: none; }
    .mw-hero .mw-hero__gallery-dot   { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   § 70 — LANDINGPAGE: ABLAUF-ACCORDION (Steps)
   ══════════════════════════════════════════════════════════════════════ */

/* Outer container: white card with large radius */
.mw-page-landing__steps {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid rgba(98,86,78,.10);
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(81,78,72,.07);
    padding: 12px;
    margin-top: clamp(24px, 3vw, 40px);
}

/* Accordion item */
.mw-page-landing__step {
    height: auto !important;
    border-radius: 20px;
    border: 1px solid rgba(98,86,78,.10);
    background: transparent;
    overflow: hidden;
    transition: border-color .25s ease, background .25s ease;
}
.mw-page-landing__step[open] {
    border-color: rgba(98,86,78,.18);
    background: #FAF8F5;
}
.mw-page-landing__step:not([open]):hover {
    border-color: rgba(98,86,78,.16);
    background: rgba(250,248,244,.5);
}

/* Summary row: number + title + toggle */
.mw-page-landing__step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.mw-page-landing__step-header::-webkit-details-marker { display: none; }
.mw-page-landing__step-header::marker { display: none; }

/* Toggle circle (+ / −) */
.mw-page-landing__step-header::after {
    content: '';
    display: block;
    flex-shrink: 0;
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(98,86,78,.18);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cline x1='6' y1='1' x2='6' y2='11' stroke='%2362564E' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='1' y1='6' x2='11' y2='6' stroke='%2362564E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    transition: background-color .25s ease, border-color .25s ease;
}
.mw-page-landing__step[open] .mw-page-landing__step-header::after {
    background-color: rgba(98,86,78,.08);
    border-color: rgba(98,86,78,.28);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cline x1='1' y1='6' x2='11' y2='6' stroke='%2362564E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* No text = no toggle */
.mw-page-landing__step:not(:has(.mw-page-landing__step-body)) .mw-page-landing__step-header {
    cursor: default;
    pointer-events: none;
}
.mw-page-landing__step:not(:has(.mw-page-landing__step-body)) .mw-page-landing__step-header::after {
    display: none;
}

/* Number circle */
.mw-page-landing__step-index {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(98,86,78,.10);
    color: #62564E;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .02em;
    transition: background .25s ease, color .25s ease;
}
.mw-page-landing__step[open] .mw-page-landing__step-index {
    background: #62564E;
    color: #FFFFFF;
}

/* Heading inside summary */
.mw-page-landing__step-header h3 {
    flex: 1;
    font-size: clamp(1rem, .96rem + .18vw, 1.08rem);
    font-weight: 600;
    color: #252525;
    margin: 0;
    line-height: 1.35;
    hyphens: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Body text: override UA display:none for smooth transition */
.mw-page-landing__step-body {
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .35s ease, opacity .25s ease;
}
.mw-page-landing__step[open] > .mw-page-landing__step-body {
    max-height: 600px;
    opacity: 1;
}
.mw-page-landing__step-body p {
    /* align with title: left-padding = summary-padding + circle-width + gap */
    padding: 0 24px 22px 80px;
    font-size: .95rem;
    color: #3A3A3A;
    line-height: 1.7;
    margin: 0;
    hyphens: none;
}

@media (max-width: 680px) {
    .mw-page-landing__steps  { padding: 8px; border-radius: 20px; }
    .mw-page-landing__step   { border-radius: 14px; }
    .mw-page-landing__step-header { padding: 16px 18px; gap: 12px; }
    .mw-page-landing__step-index  { width: 34px; height: 34px; font-size: .82rem; }
    .mw-page-landing__step-body p { padding: 0 18px 20px 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .mw-page-landing__step,
    .mw-page-landing__step-index,
    .mw-page-landing__step-header::after { transition: none; }
    .mw-page-landing__step-body { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   § 71 — LANDINGPAGE: BENEFITS-KARTEN (Premium Cards)
   ══════════════════════════════════════════════════════════════════════ */

/* Wider grid columns for 3–4 column layouts */
.mw-page-landing__benefits {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
    gap: clamp(16px, 2vw, 22px) !important;
}

/* Premium card base */
.mw-page-landing__benefits > article {
    background: #FFFFFF !important;
    border-radius: 24px !important;
    border: 1px solid rgba(98,86,78,.12) !important;
    padding: 34px 32px !important;
    box-shadow: 0 18px 55px rgba(81,78,72,.05) !important;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.mw-page-landing__benefits > article:hover {
    box-shadow: 0 24px 65px rgba(81,78,72,.09) !important;
    border-color: rgba(98,86,78,.20) !important;
}

/* Left accent: taupe instead of gold */
.mw-page-landing__benefits > article::before {
    background: var(--mw-primary) !important;
    width: 3px !important;
}

/* Icon: 56px taupe circle */
.mw-page-landing__benefits > article > .mw-highlight-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(98,86,78,.08) !important;
    border-radius: 50% !important;
    border: none !important;
    color: var(--mw-primary) !important;
}
.mw-page-landing__benefits > article > .mw-highlight-icon svg {
    width: 26px !important;
    height: 26px !important;
    color: inherit;
    flex-shrink: 0;
}

/* Heading: correct color, no hyphenation */
.mw-page-landing__benefits > article > h3 {
    color: var(--mw-ink) !important;
    hyphens: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Body text color */
.mw-page-landing__benefits > article > p {
    color: var(--mw-text) !important;
}

@media (max-width: 680px) {
    .mw-page-landing__benefits > article {
        padding: 26px 22px !important;
        border-radius: 18px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   §72 — MOBILE / INFO-BARS / KABINENBEREICH
   ══════════════════════════════════════════════════════════════════════ */

/* ── §72.1 Schiffs-Info-Bar: gleichmäßige Spalten, kompakter Button ── */
.mw-ship-facts .mw-info-bar__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    overflow-x: auto;
    scrollbar-width: none;
}
.mw-ship-facts .mw-info-bar__inner::-webkit-scrollbar { display: none; }

.mw-ship-facts .mw-info-bar__inner > div:not(.mw-trip-facts__cta) {
    flex: 1 1 0 !important;
    min-width: 80px !important;
    min-height: 62px !important;
    padding: 11px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.mw-ship-facts .mw-trip-facts__cta {
    flex: 0 0 148px !important;
    min-width: 128px !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mw-ship-facts .mw-trip-facts__cta .mw-button,
.mw-ship-facts .mw-trip-facts__cta .mw-button--primary {
    min-height: 46px !important;
    font-size: 14.88px !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    padding-inline: 20px !important;
    border-radius: 999px !important;
    background: rgba(37, 37, 37, .82) !important;
    backdrop-filter: blur(14px) !important;
    color: var(--mw-sand, #EDE7DA) !important;
    border: 1px solid rgba(197, 171, 81, .38) !important;
    box-shadow: none !important;
    width: 100% !important;
    justify-content: center !important;
}

.mw-ship-facts .mw-trip-facts__cta .mw-button:hover,
.mw-ship-facts .mw-trip-facts__cta .mw-button--primary:hover {
    background: rgba(37, 37, 37, .96) !important;
    border-color: rgba(197, 171, 81, .62) !important;
}

@media (max-width: 680px) {
    .mw-ship-facts .mw-info-bar__inner {
        flex-wrap: wrap !important;
        overflow-x: hidden !important;
    }
    .mw-ship-facts .mw-info-bar__inner > div:not(.mw-trip-facts__cta) {
        flex: 1 1 42% !important;
        min-width: 110px !important;
    }
    .mw-ship-facts .mw-trip-facts__cta {
        flex: 1 1 100% !important;
        padding: 4px 12px 14px !important;
        justify-content: flex-start !important;
    }
    .mw-ship-facts .mw-trip-facts__cta .mw-button,
    .mw-ship-facts .mw-trip-facts__cta .mw-button--primary {
        width: auto !important;
        min-width: 180px !important;
    }
}

/* ── §72.2 Kabinenbereich: Abstände ── */
.mw-ship-cabins.mw-section {
    padding-block: clamp(52px, 6vw, 88px) !important;
}

.mw-ship-cabin-panel {
    margin-top: 4px;
}

/* Desktop: Sidebar-Grid restaurieren (meerweit.css-Default) */
@media (min-width: 769px) {
    .mw-ship-cabins-shell {
        display: grid !important;
        grid-template-columns: minmax(220px, .3fr) minmax(0, .7fr) !important;
        gap: clamp(24px, 3.4vw, 40px) !important;
        align-items: start !important;
    }
    .mw-ship-cabins-nav {
        position: sticky !important;
        top: calc(var(--mw-header-height, 72px) + var(--mw-admin-bar-height, 0px) + 28px) !important;
        display: grid !important;
        gap: 10px !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 768px) {
    .mw-ship-cabins.mw-section {
        padding-block: 40px 52px !important;
    }
}

/* ── §72.3 Kabinen-Tabs: Scroll-Offset (Sticky/Fixed Header) ──
   Header-abhängig statt statisch: nach dem Klick auf eine Kabinen-Sprungmarke
   landet das aktive Panel (mit Bild + <h3>) immer sauber UNTER dem fixierten
   Header inkl. Admin-Bar – die <h3> wird nicht mehr verdeckt. Nutzt dieselben
   per JS gesetzten Variablen wie der Rest des Themes. */
.mw-ship-cabin-panel,
.mw-ship-cabins [id] {
    scroll-margin-top: calc(var(--mw-header-height, 78px) + var(--mw-admin-bar-height, 0px) + var(--mw-info-bar-height, 0px) + 28px);
}

/* ── §72.4 Kabinenbereich: aktives Panel immer sichtbar (hidden-Attribut überschreiben) ── */
.mw-ship-cabin-panel.is-active {
    display: grid !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
}

.mw-ship-cabin-panel.is-active .mw-ship-cabin-panel__media {
    display: grid !important; /* wie Basis: place-items:stretch → Bild füllt den 3:2-Rahmen */
    visibility: visible !important;
    height: auto !important;
    min-height: 180px;
    overflow: hidden !important; /* Bild im Rahmen beschneiden – verhindert Überlappung des Textes (Mobil, Hochformat-Bilder) */
}

.mw-ship-cabin-panel.is-active .mw-ship-cabin-panel__content {
    display: block !important;
    visibility: visible !important;
}

/* Bild im Panel: füllt die Bildfläche vollständig (kein Leerraum unter dem
   Querformat-Bild). Der Container gibt ein ruhiges 3:2-Querformat vor. */
.mw-ship-cabin-panel__media {
    aspect-ratio: 3 / 2 !important;
    min-height: 0 !important;
}
.mw-ship-cabin-panel__media img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    display: block;
}

/* ── §72.8 Kabinen Mobile: Vertikale Liste + einspaltige Panels ── */
@media (max-width: 768px) {
    .mw-ship-cabins-shell {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .mw-ship-cabins-nav {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        margin-bottom: 20px !important;
        overflow-x: unset !important;
        flex-wrap: wrap !important;
    }

    /* Tabs: kompakte Listenreihen statt Desktop-Karten */
    .mw-ship-cabin-tab {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 58px !important;
        padding: 12px 18px !important;
        border: 1px solid rgba(98, 86, 78, .14) !important;
        border-radius: 14px !important;
        background: #FFFFFF !important;
        text-align: left !important;
        white-space: normal !important;
        flex-shrink: unset !important;
        transform: none !important;
        box-shadow: none !important;
        gap: 10px !important;
    }
    .mw-ship-cabin-tab:hover,
    .mw-ship-cabin-tab:focus-visible {
        border-color: rgba(197, 171, 81, .35) !important;
        background: rgba(98, 86, 78, .03) !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .mw-ship-cabin-tab.is-active {
        border-color: rgba(197, 171, 81, .55) !important;
        background: rgba(98, 86, 78, .05) !important;
        transform: none !important;
        box-shadow: 0 2px 12px rgba(98, 86, 78, .08) !important;
    }
    .mw-ship-cabin-tab span {
        font-size: .95rem !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
        hyphens: auto !important;
    }
    .mw-ship-cabin-tab small {
        margin-top: .15rem !important;
        font-size: .78rem !important;
    }

    /* Panel: einspaltig, Maar.Weit-Karte */
    .mw-ship-cabin-panel {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        border-radius: 20px !important;
        padding: 18px !important;
        border-color: rgba(98, 86, 78, .12) !important;
        box-shadow: 0 8px 28px rgba(98, 86, 78, .07) !important;
    }
    .mw-ship-cabin-panel__media img {
        border-radius: 14px;
    }
    .mw-ship-cabins-panels {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* ── §72.5 Mobile: kein horizontaler Überlauf ── */
@media (max-width: 768px) {
    .mw-site,
    body.mw-site {
        overflow-x: hidden !important;
    }
    .mw-container,
    .mw-section > .mw-container {
        max-width: 100% !important;
        padding-inline: 16px !important;
    }
}

/* ── §72.6 Mobile Menü: helle Farbwelt via CSS-Variablen (2026-07) ──
   Border/Link leiten sich vom Text-Token ab, damit auch abweichende
   Customizer-Farben (hell wie dunkel) konsistent bleiben. */
:root {
    --mw-mobile-menu-bg:   #FFFFFF;
    --mw-mobile-menu-text: #252525;
    --mw-mobile-menu-link: var(--mw-mobile-menu-text, #252525);
    --mw-mobile-menu-border: color-mix(in srgb, var(--mw-mobile-menu-text, #252525) 12%, transparent);
}

/* ── §72.7 Hero Mobile: kein weißer Spalt, Mindesthöhe ── */
@media (max-width: 680px) {
    .mw-hero {
        min-height: clamp(420px, 75svh, 680px);
    }
    .mw-hero--archive,
    .mw-overview-hero {
        min-height: clamp(320px, 55svh, 540px);
    }
    /* Kein weißer Spalt zwischen Header und Hero */
    .mw-header + .mw-hero,
    .mw-header ~ * .mw-hero:first-child {
        margin-top: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Mobil-Menü Feinschliff (Go-Live 2026-07)
   Ergänzt die bestehende Overlay-Logik (meerweit.css §60). Reines Add-on,
   greift nur ≤980px. Burger animiert zu X, dezenter Backdrop-Scrim.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
    .mw-menu-toggle span:not(.screen-reader-text) {
        transition: transform .3s var(--mw-ease, cubic-bezier(.22, 1, .36, 1)),
                    opacity .2s ease,
                    background .3s ease;
        transform-origin: center;
    }
    body.mw-nav-open .mw-menu-toggle span:nth-of-type(1) { transform: translateY(6px) rotate(45deg); }
    body.mw-nav-open .mw-menu-toggle span:nth-of-type(2) { opacity: 0; }
    body.mw-nav-open .mw-menu-toggle span:nth-of-type(3) { transform: translateY(-6px) rotate(-45deg); }

    /* Backdrop-Scrim hinter dem Panel (v. a. Tablet, Panel = 420px).
       Liegt unter Panel (z 1200) und Header (z 9000); Klick schließt (JS). */
    body.mw-nav-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1150;
        background: rgba(37, 37, 37, .38);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        animation: mwNavScrimIn .25s ease both;
    }
}
@keyframes mwNavScrimIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .mw-menu-toggle span:not(.screen-reader-text) { transition: background .3s ease; }
    body.mw-nav-open::before { animation: none; }
}

/* ── Mobil-Nav: offener Zustand garantiert sichtbar ─────────────────────────
   Härtet gegen die zwei historischen .mw-nav-Implementierungen in meerweit.css
   ab (ältere translateX-Slide-in ~Z.2977 + neuere translateY-Dropdown ~Z.11117).
   Deren Transform-Konflikt kann sonst zu unsichtbaren/flackernden Panels führen.
   TODO Go-Live-Nacharbeit: ältere (tote) Variante entfernen und diese Absicherung
   danach zurückbauen. */
@media (max-width: 980px) {
    body.mw-nav-open [data-mw-nav] {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
}

/* ── Transparenter Overlay-Header auf Mobil (Hero-Seiten) ───────────────────
   Spiegelt das Desktop-Verhalten: der transparente Header wird aus dem Fluss
   genommen (position:fixed), damit das Hero-Bild bis ganz nach oben HINTER den
   Header reicht – kein weißer Streifen mehr. Der --mw-header-height-Wert (per JS
   gesetzt) bleibt gültig, daher startet das Mobil-Menü-Panel weiterhin korrekt
   unter dem Header. Nur Seiten mit has-page-hero; Seiten ohne Hero behalten den
   bisherigen sticky-Header unverändert. */
@media (max-width: 980px) {
    body.has-page-hero .mw-header {
        position: fixed !important;
        top: var(--mw-admin-bar-height, 0px) !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* ── Mobil-Menü: Submenü-Lesbarkeit + Feinschliff ───────────────────────────
   Submenü-Links folgen dem Menü-Text-Token (nicht mehr fix hell), damit die
   Lesbarkeit bei jeder Customizer-Farbwahl erhalten bleibt. Hohe Spezifität,
   damit die vielen historischen !important-Regeln sicher geschlagen werden. */
@media (max-width: 980px) {
    body.mw-nav-open .mw-header .mw-nav .mw-mega__cols a {
        color: var(--mw-mobile-menu-text, #252525) !important;
    }
    body.mw-nav-open .mw-header .mw-nav .mw-mega__cols a::before {
        color: var(--mw-gold, #C5AB51) !important;
    }
    body.mw-nav-open .mw-header .mw-nav .mw-mega__cols a:hover,
    body.mw-nav-open .mw-header .mw-nav .mw-mega__cols a:focus-visible {
        color: color-mix(in srgb, var(--mw-mobile-menu-text, #252525) 72%, var(--mw-gold, #C5AB51) 28%) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Footer Mobil: sauberes Stapeln (Go-Live 2026-07)
   Der Footer-Redesign-Block (meerweit.css) lässt .mw-footer__top auch auf
   schmalen Phones 2-spaltig → die Marken-Headline bricht auf ~8 Zeilen um.
   Hier wird der obere Footer-Bereich mobil sauber gestapelt. ══════════════ */
@media (max-width: 680px) {
    .mw-footer__top {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .mw-footer__brand h2 {
        font-size: clamp(1.55rem, 6.2vw, 1.95rem) !important;
        line-height: 1.15 !important;
    }
    .mw-footer__quick-contact {
        grid-template-columns: 1fr !important;
    }
    .mw-footer__quick-contact a {
        justify-content: center !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Cruise Compass Embed (Polaris, cross-origin) – Doppelscroll & Höhe
   Polaris liefert KEINE Höhe (kein postMessage) und der Inhalt ist cross-origin
   nicht lesbar → eine inhaltsgenaue Auto-Höhe ist technisch unmöglich. Statt
   einer riesigen Fix-Höhe (Seite + iFrame scrollen gegeneinander) wird der
   Compass als klar abgegrenzte, viewport-hohe Scroll-Region dargestellt:
   fokussierte Höhe, interne Scroll-Kette begrenzt, sauber gerahmt. ══════════ */
.mw-cruise-compass-embed {
    position: relative;
    border-radius: var(--mw-card-radius, 12px);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 34px rgba(37, 37, 37, .07);
    border: 1px solid var(--mw-line, rgba(98,86,78,.12));
    overscroll-behavior: contain;
}
.mw-cruise-compass-embed iframe {
    display: block;
    width: 100% !important;
    height: clamp(640px, 82vh, 1080px) !important;
    border: 0 !important;
    overscroll-behavior: contain;
}
@media (max-width: 768px) {
    .mw-cruise-compass-embed iframe {
        height: 80vh !important;
        min-height: 540px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Startseite „Experten/Vertrauen"-Panel: Mobil-Überlagerung beheben
   .mw-home-experts .mw-expert-panel ist 2-spaltig mit minmax(320px) in Spalte 2.
   Auf Phones frisst die 320px-Mindestbreite fast die ganze Zeile → Spalte 1
   (Überschrift) kollabiert und überlagert die Karten. Mobil sauber stapeln. */
@media (max-width: 820px) {
    .mw-home-experts .mw-expert-panel,
    .mw-taxonomy-landing .mw-expert-panel,
    .mw-region-landing .mw-expert-panel {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Mobil-Abstände: Section-Rhythmus straffen
   Eine globale Regel erzwingt padding-block: var(--mw-space-xl) !important auf
   allen .mw-section – auf Mobil sind das ~84px oben+unten (=168px zwischen den
   Inhalten), zu viel Scrollweg. Hier auf ein ruhiges, aber effizienteres Maß
   reduziert. Desktop/Tablet bleiben unverändert großzügig. */
@media (max-width: 680px) {
    .mw-section {
        padding-block: clamp(46px, 9vw, 62px) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Kabinen mobil = echtes Akkordeon (Go-Live 2026-07)
   Das JS verschiebt jedes Panel direkt unter seinen Tab und klappt alle ein.
   Hier: der (bereits vollbreite) Tab-Button bekommt einen Chevron-Indikator,
   das Panel liegt als Akkordeon-Inhalt direkt darunter, der leere Panels-
   Container wird ausgeblendet. Inhalt erscheint nur beim Ausklappen. ═══════ */
@media (max-width: 768px) {
    .mw-ship-cabins-panels:empty {
        display: none !important;
    }
    .mw-ship-cabins-nav .mw-ship-cabin-tab {
        justify-content: flex-start !important;
    }
    .mw-ship-cabins-nav .mw-ship-cabin-tab > span {
        flex: 1 1 auto !important;
    }
    .mw-ship-cabins-nav .mw-ship-cabin-tab::after {
        content: "" !important;
        flex: 0 0 auto !important;
        width: 9px;
        height: 9px;
        margin-left: 12px;
        border-right: 2px solid var(--mw-primary, #62564E);
        border-bottom: 2px solid var(--mw-primary, #62564E);
        transform: rotate(45deg);
        transition: transform .25s ease, opacity .25s ease;
        opacity: .6;
    }
    .mw-ship-cabins-nav .mw-ship-cabin-tab.is-active::after {
        transform: rotate(-135deg);
        opacity: 1;
    }
    /* Panel als Akkordeon-Inhalt direkt unter dem Button */
    .mw-ship-cabins-nav .mw-ship-cabin-panel {
        margin: 6px 0 14px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mw-ship-cabins-nav .mw-ship-cabin-tab::after { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Kabinen-Akkordeon: aufgeklapptes Panel bulletproof (kein Leerraum)
   Verhindert, dass das Bild-Feld (Desktop-2-Spalten-Grid, align stretch) auf
   Mobil in die Höhe gezogen wird und unter dem Bild ein großer Leerraum
   entsteht. Einspaltig, oben ausgerichtet, Bildhöhe = Bild. ════════════════ */
@media (max-width: 768px) {
    .mw-ship-cabins-nav .mw-ship-cabin-panel {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        align-items: start !important;
    }
    /* Sprungziel im Akkordeon: angetippte Kategorie landet sauber unter dem
       fixen Header (siehe scrollIntoView in meerweit.js). */
    .mw-ship-cabins-nav .mw-ship-cabin-tab,
    .mw-ship-cabins-nav .mw-ship-cabin-panel {
        scroll-margin-top: calc(var(--mw-header-height, 78px) + var(--mw-admin-bar-height, 0px) + 12px);
    }

    .mw-ship-cabins-nav .mw-ship-cabin-panel__media {
        align-self: start !important;
        aspect-ratio: 3 / 2 !important;
        min-height: 0 !important;
        height: auto !important;
    }
    .mw-ship-cabins-nav .mw-ship-cabin-panel__media img {
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Fremd-Pink neutralisieren (Go-Live 2026-07)
   reset.css (Parent/Plugin) setzt [type=button]:focus/:hover und
   [type=submit]:focus/:hover ein Pink (#CC3366) als Hintergrund. Das schlug im
   FAQ auf den fokussierten/angetippten Button durch (und potenziell auf andere
   Buttons ohne eigenen State-Hintergrund). Hier marken­konform überschrieben. */
.mw-accordion__button:hover,
.mw-accordion__button:focus,
.mw-accordion__button:focus-visible,
.mw-accordion__button:active {
    background-color: rgba(247, 245, 240, .92) !important;
    color: var(--mw-ink, #252525) !important;
}
/* CTA-Buttons: Fokus behält die jeweilige Marken-Optik statt Pink */
.mw-button:focus,
.mw-button--primary:focus,
.mw-button:active {
    background-color: var(--mw-button-bg, #62564E) !important;
    color: var(--mw-button-text, #FFFFFF) !important;
}
.mw-button--secondary:focus,
.mw-button--ghost:focus {
    background-color: transparent !important;
    color: var(--mw-primary, #62564E) !important;
}
/* Mehr-lesen-Textlink: bleibt Gold-Link, kein Pink-Hintergrund bei
   Hover/Fokus/Aktiv (reset.css [type=button]:hover setzt sonst #CC3366). */
.mw-read-more__btn:hover,
.mw-read-more__btn:focus,
.mw-read-more__btn:focus-visible,
.mw-read-more__btn:active {
    background: none !important;
    background-color: transparent !important;
    color: var(--mw-gold, #C5AB51) !important;
    border: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   KRITISCH: hidden-Attribut auf Kabinen-Panels durchsetzen (Go-Live 2026-07)
   Bug: .mw-ship-cabin-panel { display:grid } (meerweit.css) steht in der
   Kaskade NACH [hidden]{display:none} (reset.css) bei gleicher Spezifität →
   gewinnt → das hidden-Attribut wird ignoriert und ALLE Panels sind sichtbar
   (Desktop gestapelt, Mobil-Akkordeon nie eingeklappt). Live verifiziert:
   ohne diese Regel 7/7 Panels sichtbar, mit ihr nur das aktive.
   Diese Regel erzwingt echtes Verstecken nicht-aktiver Panels. ═════════════ */
.mw-ship-cabin-panel[hidden] {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Kabinen: Button-Breite eingeklappt + Aktiv/Hover-Farben (Go-Live 2026-07)
   1) Eingeklappt schrumpfte die Nav auf die Textbreite (219px) statt volle
      Breite (313px, wie ausgeklappt) → Buttons wirkten schmaler. Nav/Shell
      werden mobil auf volle Breite gestreckt.
   2) Aktiver Tab war hartes Schwarz (#252525) und Hover nur 8% Gold (kaum
      sichtbar, teils Alt-Petrol). Jetzt markenkonform: Taupe-Aktiv, klarer
      Taupe-Hover mit ausreichendem Kontrast. ════════════════════════════════ */
@media (max-width: 768px) {
    .mw-ship-cabins-shell {
        align-items: stretch !important;
    }
    .mw-ship-cabins-nav {
        width: 100% !important;
        align-self: stretch !important;
    }
}

/* Aktiver Tab: Marken-Taupe statt Schwarz (weißer Text, Kontrast ~7:1) */
.mw-ship-cabin-tab.is-active {
    background: var(--mw-primary, #62564E) !important;
    border-color: var(--mw-primary, #62564E) !important;
    color: #FFFFFF !important;
}
.mw-ship-cabin-tab.is-active span,
.mw-ship-cabin-tab.is-active small {
    color: #FFFFFF !important;
}
/* Hover/Focus (nicht aktiv): dezenter, aber sichtbarer Taupe-Ton, dunkler Text */
.mw-ship-cabin-tab:hover:not(.is-active),
.mw-ship-cabin-tab:focus-visible:not(.is-active) {
    background: rgba(98, 86, 78, .10) !important;
    border-color: rgba(98, 86, 78, .40) !important;
    color: var(--mw-heading, #252525) !important;
}
.mw-ship-cabin-tab:hover:not(.is-active) span,
.mw-ship-cabin-tab:hover:not(.is-active) small,
.mw-ship-cabin-tab:focus-visible:not(.is-active) span,
.mw-ship-cabin-tab:focus-visible:not(.is-active) small {
    color: var(--mw-heading, #252525) !important;
}

/* ════════════════════════════════════════════════════════════════════
   LAUNCH-FIXES 2026-07 (siehe LAUNCH-AUDIT.md: K1, K2, K3)
   ════════════════════════════════════════════════════════════════════ */

/* K3: Footer-Eyebrow war dunkles Taupe auf Taupe (~1,2:1).
   Jetzt Footer-Textfarbe, volle Deckkraft → ≥ 6:1 auf --mw-footer-bg. */
.mw-footer .mw-eyebrow {
    color: var(--mw-footer-text, #F5F2ED) !important;
    opacity: 1 !important;
}

/* K3: Finder-Labels defensiv auf die vorgesehenen, lesbaren Farben pinnen
   (Live-Messung ergab 1,36:1 durch eine übersteuernde Regel außerhalb
   der Theme-Dateien). Gilt auf den hellen Finder-Feldern. */
.mw-finder__field summary em {
    color: var(--mw-muted, #6B665F) !important;
}
.mw-finder__field summary strong {
    color: var(--mw-ink, #252525) !important;
}

/* K2: Pflichtfeld-Markierung + Datenschutzhinweis im Anfrageformular */
.mw-form__required {
    color: var(--mw-muted, #6B665F);
    font-weight: 400;
}
.mw-form .mw-form__privacy {
    margin: 2px 0 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--mw-muted, #6B665F);
}
.mw-form .mw-form__privacy a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mw-form .mw-form__privacy a:hover,
.mw-form .mw-form__privacy a:focus-visible {
    color: var(--mw-ink, #252525);
}

/* Bedingtes Anfragefeld (z. B. Abflughafen) sicher verstecken.
   Grund: „.mw-form label { display:grid }“ (Spezifität 0,1,1) überstimmt das
   [hidden]-Attribut (0,1,0) → ein hidden-Feld bliebe sonst sichtbar (gleiches
   Kaskaden-Muster wie beim Kabinen-Panel-Bug). Diese Regel erzwingt das
   Verstecken, solange JS das Feld nicht per Auswahl „Ja“ einblendet. */
.mw-form label.mw-form__conditional[hidden] {
    display: none !important;
}

/* K1: Consent-Fassade für externe Embeds (2-Klick, DSGVO) */
.mw-embed-consent {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 14px;
    text-align: center;
    padding: clamp(28px, 5vw, 56px) clamp(18px, 4vw, 42px);
    background: var(--mw-bg-soft, #F7F5F1);
    border: 1px solid var(--mw-line, rgba(98, 86, 78, 0.12));
    border-radius: var(--mw-card-radius, 18px);
}
.mw-embed-consent__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--mw-heading, #252525);
}
.mw-embed-consent__text {
    margin: 0 auto;
    max-width: 52ch;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--mw-muted, #6B665F);
}
.mw-embed-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    justify-content: center;
    align-items: center;
}
.mw-embed-consent__policy {
    font-size: 0.82rem;
    color: var(--mw-muted, #6B665F);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mw-embed-consent__policy:hover,
.mw-embed-consent__policy:focus-visible {
    color: var(--mw-ink, #252525);
}

/* Fassade im responsiven Video-Wrapper (16:9-Box, Kinder absolut) */
.mw-embed-responsive .mw-embed-consent {
    position: absolute;
    inset: 0;
    height: 100%;
    padding: 18px;
    border-radius: inherit;
}

/* Fassade im Cruise-Compass-Rahmen: Innenrundung übernehmen, keine
   feste Riesenhöhe vor dem Klick */
.mw-cruise-compass__frame-wrap .mw-embed-consent {
    border: 0;
    border-radius: 22px;
    min-height: 320px;
}

/* ════════════════════════════════════════════════════════════════════
   MOBIL-MENÜ HELL & ELEGANT (2026-07, v2)
   Eigenständiger Komponenten-Zustand: Im geöffneten Mobilmenü kommen
   ALLE Farben aus den Customizer-Tokens --mw-mobile-menu-bg/-text.
   Selektoren nutzen die ID #mw-primary-nav (Spezifität 1,x,x), damit
   sie jeden Header-Zustand sicher schlagen — insbesondere die weißen
   Hero-Header-Regeln (.mw-header--transparent / body.has-page-hero),
   die zuvor ins Panel durchschlugen (weiße Schrift auf weißem Grund).
   Abgeleitete Flächen/Linien via color-mix → funktioniert mit jeder
   Customizer-Farbwahl, hell wie dunkel. Nur ≤980px, nur bei offenem Menü.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {

    /* Panel: deckend, ruhig, feine Linie statt hartem Schatten */
    body.mw-nav-open #mw-primary-nav {
        background: var(--mw-mobile-menu-bg, #FFFFFF) !important;
        color: var(--mw-mobile-menu-text, #252525) !important;
        border-top: 1px solid color-mix(in srgb, var(--mw-mobile-menu-text, #252525) 10%, transparent) !important;
        border-left: 0 !important;
        box-shadow: 0 24px 60px rgba(37, 37, 37, .14) !important;
    }

    /* Alle Menütexte: Token-Farbe — schlägt die weißen Hero-Header-Regeln */
    body.mw-nav-open #mw-primary-nav a:not(.mw-nav__cta),
    body.mw-nav-open #mw-primary-nav summary,
    body.mw-nav-open #mw-primary-nav strong,
    body.mw-nav-open #mw-primary-nav span:not(.screen-reader-text) {
        color: var(--mw-mobile-menu-text, #252525) !important;
        text-shadow: none !important;
    }

    body.mw-nav-open #mw-primary-nav a:not(.mw-nav__cta):hover,
    body.mw-nav-open #mw-primary-nav a:not(.mw-nav__cta):focus-visible,
    body.mw-nav-open #mw-primary-nav summary:hover,
    body.mw-nav-open #mw-primary-nav summary:focus-visible {
        color: var(--mw-taupe-dark, #62564E) !important;
    }

    /* Trennlinien der Hauptpunkte */
    body.mw-nav-open #mw-primary-nav .mw-nav__list > li > a,
    body.mw-nav-open #mw-primary-nav .mw-nav__list > li > details > summary {
        border-bottom-color: color-mix(in srgb, var(--mw-mobile-menu-text, #252525) 10%, transparent) !important;
    }

    /* Aufgeklappte Untermenüs: hauchzarte Fläche + Rundung wie Desktop-Karte */
    body.mw-nav-open #mw-primary-nav .sub-menu,
    body.mw-nav-open #mw-primary-nav .mw-mega {
        background: color-mix(in srgb, var(--mw-mobile-menu-bg, #FFFFFF) 96%, var(--mw-mobile-menu-text, #252525) 4%) !important;
        border-color: color-mix(in srgb, var(--mw-mobile-menu-text, #252525) 8%, transparent) !important;
        border-radius: 14px;
    }

    body.mw-nav-open #mw-primary-nav .mw-mega__cols a::before {
        color: var(--mw-gold, #C5AB51) !important;
    }

    /* Aktiver Menüpunkt: Taupe-Dunkel (AA) mit Gold-Akzentlinie */
    body.mw-nav-open #mw-primary-nav a.is-current,
    body.mw-nav-open #mw-primary-nav a[aria-current="page"] {
        color: var(--mw-taupe-dark, #62564E) !important;
        box-shadow: inset 3px 0 0 var(--mw-gold, #C5AB51);
        padding-left: 12px !important;
    }

    /* Burger im offenen Zustand: an helles Panel angepasst */
    body.mw-nav-open .mw-menu-toggle {
        border-color: color-mix(in srgb, var(--mw-mobile-menu-text, #252525) 22%, transparent) !important;
        background: color-mix(in srgb, var(--mw-mobile-menu-text, #252525) 6%, transparent) !important;
        color: var(--mw-mobile-menu-text, #252525) !important;
    }
    body.mw-nav-open .mw-menu-toggle span:not(.screen-reader-text) {
        background: var(--mw-mobile-menu-text, #252525) !important;
    }

    /* CTA als vollwertiger Primary-Button — schlägt die transparente
       Hero-Header-Variante (border weiß / Schrift weiß) sicher */
    body.mw-nav-open #mw-primary-nav .mw-nav__cta {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 50px;
        margin-top: 6px;
        background: var(--mw-button-bg, #62564E) !important;
        color: var(--mw-button-text, #FFFFFF) !important;
        border: 0 !important;
        border-radius: var(--mw-radius-button, 6px);
        letter-spacing: .06em;
        text-decoration: none;
        text-shadow: none !important;
    }
    body.mw-nav-open #mw-primary-nav .mw-nav__cta:hover,
    body.mw-nav-open #mw-primary-nav .mw-nav__cta:focus-visible {
        background: var(--mw-button-hover, #514E48) !important;
        color: var(--mw-button-text, #FFFFFF) !important;
    }
    body.mw-nav-open #mw-primary-nav .mw-nav__cta span {
        color: var(--mw-button-text, #FFFFFF) !important;
    }

    /* Telefon-Link im Panel */
    body.mw-nav-open #mw-primary-nav .mw-header__tel,
    body.mw-nav-open #mw-primary-nav .mw-header__tel-text {
        color: var(--mw-mobile-menu-text, #252525) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL-FIXES (Go-Live 2026-07)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1) Reise-Kachel: Titel auch ≤680px auf dem Bild ──────────────────────
   meerweit.css blendet ≤680px den Overlay-Titel (.mw-trip-card__overlay h3)
   aus und zeigt stattdessen den Body-Titel; upgrade.css versteckt jedoch den
   Body-Titel global (kein doppelter Titel auf Desktop). Ergebnis war: auf dem
   Handy gar kein Titel. Wir zeigen den Titel – konsistent zur Desktop-
   Darstellung – wieder auf dem Bild. Der tiefe Scrim (.mw-trip-card__media
   ::after, oben definiert) hält ihn gut lesbar. ─────────────────────────── */
@media (max-width: 680px) {
    .mw-trip-card__overlay h3 {
        display: block !important;
        margin: 0;
        color: #fff;
        font-family: var(--mw-serif);
        font-size: clamp(1.18rem, 5.4vw, 1.5rem);
        line-height: 1.14;
        text-wrap: balance;
    }
    /* Body-Titel bleibt ausgeblendet – kein doppelter Titel. */
    .mw-trip-card .mw-trip-card__body-title {
        display: none !important;
    }
}

/* ── 2) Anfrageformular: leere „Ausgewählter Termin"-Pills nie als leere
   Kapseln zeigen. Die Box selbst wird bereits serverseitig nur ausgegeben,
   wenn mindestens ein Wert vorhanden ist (inquiry-form.php). Einzelne leere
   Pills tragen das hidden-Attribut; .mw-summary-pill{display:inline-flex}
   überschreibt aber [hidden]{display:none} in der Kaskade → hier erzwungen
   ausblenden. ─────────────────────────────────────────────────────────── */
.mw-summary-pill[hidden] {
    display: none !important;
}

/* ── 3) Landing „Angebot anfordern": Anfrageformular volle Breite ─────────
   Der Panel-Wrapper (.mw-page-landing__form-panel) trägt historisch die
   .mw-form-Grid-Klasse (2 Spalten). Da er nur noch das vollständige Anfrage-
   Formular (eigene Sektion mit eigenem Layout) enthält, wurde dieses auf die
   halbe Breite gequetscht (leere zweite Spalte). Panel als Block, Formular
   ohne inneres Karten-Chrome (Panel ist bereits die Karte) und auf großen
   Screens im 2-Spalten-Layout (Intro | Felder) wie auf Reise-/Schiffseiten. */
.mw-page-landing__form-panel.mw-form {
    display: block;
}
.mw-page-landing__form-panel .mw-inquiry-form {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}
@media (min-width: 981px) {
    .mw-page-landing__form-panel .mw-inquiry-form {
        display: grid;
        grid-template-columns: minmax(240px, .84fr) minmax(0, 1.16fr);
        gap: clamp(24px, 4vw, 44px);
        align-items: start;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   /reisen/ Ergebnisse: konfigurierbare Spalten (2/4) + „Mehr laden"
   (Go-Live 2026-07). Kein klassisches Paging mehr. ═════════════════════════ */
.mw-card-grid--two  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mw-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) {
    .mw-card-grid--four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .mw-card-grid--two,
    .mw-card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .mw-card-grid--two,
    .mw-card-grid--four { grid-template-columns: 1fr; }
}

.mw-loadmore {
    display: flex;
    justify-content: center;
    margin-top: clamp(28px, 4vw, 44px);
}
.mw-loadmore__btn[disabled],
.mw-loadmore__btn.is-loading {
    opacity: .6;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Team-Karten (Landing-Blöcke): Alt-Petrol/Türkis raus → Marken-Palette
   (Taupe / Sand / dezentes Gold). Betrifft Akzentleiste, Bildfläche,
   Rollen-Pill, Link-Buttons inkl. Hover und Icon-Ringe. ══════════════════ */
.mw-page-landing__team-card {
    border-color: var(--mw-line, rgba(98, 86, 78, .12)) !important;
    box-shadow: 0 18px 40px rgba(37, 37, 37, .07) !important;
}
.mw-page-landing__team-card::before {
    background: linear-gradient(90deg,
        rgba(181, 161, 147, .85) 0%,
        rgba(197, 171, 81, .70) 100%) !important;
}
.mw-page-landing__team-media {
    background: linear-gradient(135deg, rgba(212, 204, 184, .55), rgba(247, 245, 241, .94)) !important;
    border-color: var(--mw-line, rgba(98, 86, 78, .12)) !important;
}
.mw-page-landing__team-role {
    border-color: rgba(197, 171, 81, .28) !important;
    background: rgba(212, 204, 184, .38) !important;
    color: var(--mw-ink, #252525) !important;
}
.mw-page-landing__team-links a {
    border-color: var(--mw-line, rgba(98, 86, 78, .12)) !important;
    box-shadow: 0 12px 24px rgba(37, 37, 37, .05) !important;
}
.mw-page-landing__team-links a:hover,
.mw-page-landing__team-links a:focus-visible {
    background: rgba(212, 204, 184, .42) !important;
    border-color: rgba(197, 171, 81, .40) !important;
    box-shadow: 0 16px 28px rgba(37, 37, 37, .08) !important;
}
.mw-page-landing__team-link-icon {
    border-color: rgba(197, 171, 81, .28) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Cruise Compass: scrollbares Viewport-Fenster statt fixer Riesenhöhe
   (Go-Live 2026-07). Verhindert Abschneiden – lange Anbieter-Seiten sind
   vollständig per Scroll erreichbar; Höhe an Viewport gekoppelt. ══════════ */
.mw-cruise-compass__frame {
    height: min(var(--mw-cruise-compass-height-desktop, 4000px), 82vh) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 1024px) {
    .mw-cruise-compass__frame {
        height: min(var(--mw-cruise-compass-height-tablet, 3000px), 80vh) !important;
    }
}
@media (max-width: 640px) {
    .mw-cruise-compass__frame {
        height: min(var(--mw-cruise-compass-height-mobile, 2600px), 82vh) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   § 74 — Weitere Termine: Datum-Umbruch, aktive Karte in Gold, Picker,
   Faktenleisten-Feedback beim Terminwechsel
   ══════════════════════════════════════════════════════════════════════ */

/* Datum: Start- und Enddatum je als nicht umbrechende Einheit; ein Umbruch
   ist nur zwischen beiden möglich (schöner auf Mobil). */
.mw-departure-card__date-part { white-space: nowrap; }
.mw-departure-card__date-sep { color: var(--mw-gold, #9B8B6C); }

/* Aktive Terminkarte: dezenter Gold-Ton statt neutralem Hintergrund. */
.mw-departure-card.is-selected {
    background: rgba(197, 171, 81, .07) !important;
    border-color: rgba(197, 171, 81, .42) !important;
    box-shadow: 0 0 0 1px rgba(197, 171, 81, .28) !important;
}

/* Direkt-Termin-Auswahl (Picker): volle Breite, damit der Preis-zuerst-Text
   im geschlossenen Feld nicht abgeschnitten wird. */
.mw-trip-departure-toolbar__control select {
    width: 100%;
    max-width: 100%;
}

/* Faktenleisten-Feedback: kurzer, dezenter Gold-Schleier, der ausblendet,
   sobald der Nutzer einen anderen Termin wählt. Overlay auf dem inneren
   Container, damit die (mobil statische, sonst sticky) Positionierung der
   Leiste unberührt bleibt. */
.mw-trip-facts .mw-info-bar__inner { position: relative; }
.mw-trip-facts.is-updated .mw-info-bar__inner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(197, 171, 81, .20);
    pointer-events: none;
    z-index: 2;
    animation: mw-facts-flash 1s ease forwards;
}
@keyframes mw-facts-flash {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mw-trip-facts.is-updated .mw-info-bar__inner::after { animation: none; opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   § 75 — Spam-Schutzfeld (Honeypot) sicher verstecken
   Die generische Regel „.mw-form input { width:100% }“ hat höhere Spezifität
   als „.mw-honeypot { width:1px }“ und blähte das absolut positionierte Feld
   auf 400px auf → ~51px horizontaler Overflow / Seitwärts-Scroll auf Mobil.
   Hier ohne jede Layout-Breite verstecken (bleibt für Bots im DOM erreichbar).
   ══════════════════════════════════════════════════════════════════════ */
.mw-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   § 76 — Breadcrumb-Leiste unter dem Hero (statt Overlay im Bild)
   Ruhige, helle Leiste direkt unter dem Hero – gut lesbar, am Container
   ausgerichtet, überlagert das Bild nicht mehr.
   ══════════════════════════════════════════════════════════════════════ */
.mw-breadcrumb-bar {
    background: var(--mw-surface, #FFFFFF);
    border-bottom: 1px solid var(--mw-line, #E0D9D0);
}
.mw-breadcrumb-bar .mw-breadcrumbs {
    margin: 0 !important;
    padding: 12px 0;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mw-muted, #6E6359);
}
.mw-breadcrumb-bar .mw-breadcrumbs a {
    color: var(--mw-muted, #6E6359) !important;
    text-decoration: none;
    text-shadow: none !important;
}
.mw-breadcrumb-bar .mw-breadcrumbs a:hover,
.mw-breadcrumb-bar .mw-breadcrumbs a:focus-visible {
    color: var(--mw-gold, #9B8B6C) !important;
}
.mw-breadcrumb-bar .mw-breadcrumbs span {
    color: var(--mw-line, #C0BDB5);
}
.mw-breadcrumb-bar .mw-breadcrumbs > span:last-child {
    color: var(--mw-ink, #252525);
}
@media (max-width: 680px) {
    .mw-breadcrumb-bar .mw-breadcrumbs { padding: 10px 0; font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════════
   SPRUNGMARKE ANFRAGEFORMULAR (2026-07)
   #anfrage landet exakt unter Header + Termin-Leiste (Single-Reise).
   Die Höhen kommen aus den per JS gepflegten CSS-Variablen.
   ════════════════════════════════════════════════════════════════════ */
#anfrage,
.mw-inquiry-form {
    /* --mw-sticky-info-height ist nur > 0, wenn die Termin-Leiste wirklich
       oben klebt (Desktop sticky). Mobil ist sie static → Offset nur Header. */
    scroll-margin-top: calc(
        var(--mw-header-height, 78px)
        + var(--mw-admin-bar-height, 0px)
        + var(--mw-sticky-info-height, 0px)
        + 16px
    ) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   §64  COMPASS-ANGEBOTE — Kacheln, die in den Cruise Compass verlinken
   ──────────────────────────────────────────────────────────────────────
   Bewusst additiv: die Kacheln nutzen die bestehende .mw-trip-card, damit
   Rundung, Schatten, Bildverhalten und Typografie identisch bleiben.
   Ergänzt werden nur drei Dinge — Vorteils-Chips auf dem Bild, ein
   sichtbarer Button und der Herkunftshinweis darunter.
   ══════════════════════════════════════════════════════════════════════ */

/* Vorteils-Chips: rechts unter der Topbar, gestapelt. */
.mw-trip-card--compass .mw-trip-card__benefits {
    position: absolute;
    top: 46px;
    right: 14px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: calc(100% - 28px);
    pointer-events: none;
}

.mw-trip-card--compass .mw-trip-card__benefits[data-no-topbar="1"] {
    top: 13px;
}

.mw-trip-card--compass .mw-trip-card__benefits li {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 999px;
    /* Bewusst ruhig gehalten: warmes Milchglas statt hartes Weiß, damit das
       Bild der Held bleibt und die Kachel nicht nach Reiseportal aussieht. */
    background: rgba(250, 248, 244, .80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .38);
    color: var(--mw-heading, #252525);
    font-family: 'Jost', sans-serif;
    font-size: .58rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .015em;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fußbereich: Button + Hinweis. Der Body der Trip-Card hat padding:0,
   deshalb bekommt der Footer seine Innenabstände selbst. */
.mw-trip-card--compass .mw-compass-card__footer {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px 16px 16px;
    margin-top: auto;
    border-top: 1px solid var(--mw-line, rgba(37, 37, 37, .10));
}

.mw-trip-card--compass .mw-compass-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    align-self: stretch;
    text-align: center;
}

/* Außen-Symbol: der Theme-Button bringt normalerweise einen gefüllten Pfeil
   mit — hier explizit auf Linien-Icon zurücksetzen. */
.mw-trip-card--compass .mw-compass-card__cta .mw-compass-card__cta-icon {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    fill: none !important;
    stroke: currentColor;
    opacity: .7;
}

.mw-trip-card--compass .mw-compass-card__note {
    font-family: 'Jost', sans-serif;
    font-size: .62rem;
    line-height: 1.45;
    color: var(--mw-muted, #6E6359);
    letter-spacing: .01em;
}

/* Auf kleinen Karten die Chips etwas kompakter halten. */
@media (max-width: 680px) {
    .mw-trip-card--compass .mw-trip-card__benefits li {
        font-size: .58rem;
        padding: 4px 9px;
    }
    .mw-trip-card--compass .mw-compass-card__footer {
        padding: 12px 14px 14px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   § 65 — Cruise Compass: automatische Höhe (postMessage)
   Sobald der Compass seine Inhaltshöhe meldet, setzt assets/js/compass-resize.js
   die Höhe inline mit !important. Diese Klasse ist die CSS-Entsprechung dazu —
   sie hebt die Viewport-Deckelung aus § "scrollbares Viewport-Fenster" auf,
   damit kein Scroll-im-Scroll mehr entsteht. Ohne Meldung greift weiterhin die
   bisherige Festhöhe (Rückfallebene).
   ══════════════════════════════════════════════════════════════════════════ */
.mw-cruise-compass__frame.mw-compass-frame--auto,
.mw-flex-block--cruise-compass iframe.mw-compass-frame--auto {
    max-height: none !important;
    overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 66 — Compass-Kachel: Beratungszeile
   Ersetzt den früheren Hinweis „Buchung über den Cruise Compass". Bewusst als
   Link gesetzt: der einzige Weg auf dieser Kachel, bei dem der Gast auf
   meer-weit.de bleibt. Text und Ziel sind im Customizer pflegbar; ein leerer
   Text blendet die Zeile aus.
   ══════════════════════════════════════════════════════════════════════════ */
.mw-trip-card--compass .mw-compass-card__advice {
    display: inline-block;
    /* Der Footer ist ein Flex-Container: ohne align-self würde der Link auf
       volle Kachelbreite gestreckt und die Unterstreichung liefe quer durch
       die Karte. */
    align-self: flex-start;
    margin-top: .35rem;
    font-family: 'Jost', sans-serif;
    font-size: .7rem;
    line-height: 1.4;
    letter-spacing: .01em;
    color: var(--mw-color-primary, #62564E);
    text-decoration: none;
    border-bottom: 1px solid rgba(197, 171, 81, .45);
    padding-bottom: 1px;
    transition: color .2s ease, border-color .2s ease;
}
.mw-trip-card--compass .mw-compass-card__advice:hover,
.mw-trip-card--compass .mw-compass-card__advice:focus-visible {
    color: var(--mw-color-accent, #C5AB51);
    border-bottom-color: var(--mw-color-accent, #C5AB51);
}


/* ==========================================================================
   §73 — PRESSE & MEDIEN (inc/press.php, template-parts/press-list.php)
   Ruhige Editorial-Liste: Bild links, Text rechts, Vorschau aufklappbar.
   ========================================================================== */

.mw-press__list {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    max-width: 1080px;
    margin-inline: auto;
}

.mw-press-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
    border-bottom: 1px solid var(--mw-line, #E0D9D0);
}
.mw-press-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.mw-press-item.has-media {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    align-items: start;
}

/* Hervorgehobener Beitrag: dezente Goldlinie, keine Fläche */
.mw-press-item.is-featured {
    position: relative;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(197, 171, 81, .55);
}

.mw-press-item__media {
    overflow: hidden;
    border-radius: var(--mw-radius, 4px);
    background: var(--mw-bg-soft, #EEE7DC);
    aspect-ratio: 4 / 3;
}
.mw-press-item__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mw-press-item__media.is-logo {
    display: grid;
    place-items: center;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--mw-line, #E0D9D0);
}
.mw-press-item__media.is-logo img {
    width: auto;
    max-width: 70%;
    height: auto;
    max-height: 90px;
    object-fit: contain;
}

.mw-press-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
    margin: 0 0 .65rem;
    font-family: 'Jost', sans-serif;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mw-muted, #6E6359);
}
.mw-press-item__medium {
    color: var(--mw-color-primary, #62564E);
    font-weight: 600;
}
.mw-press-item__medium::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    margin-left: .9rem;
    vertical-align: middle;
    background: var(--mw-accent, #C5AB51);
}
.mw-press-item__badge {
    padding: .15rem .55rem;
    border: 1px solid var(--mw-line, #E0D9D0);
    border-radius: 999px;
    font-size: .66rem;
    letter-spacing: .06em;
    color: var(--mw-muted, #6E6359);
}

.mw-press-item__title {
    margin: 0 0 .75rem;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.3;
    hyphens: manual;
}
.mw-press-item__teaser {
    margin: 0;
    color: var(--mw-text, #3A3A3A);
    line-height: 1.7;
}

/* Aufklappen: natives <details> */
.mw-press-item__more {
    margin-top: .9rem;
}
.mw-press-item__more summary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    list-style: none;
    font-family: 'Jost', sans-serif;
    font-size: .85rem;
    font-weight: 500;
    color: var(--mw-color-primary, #62564E);
    border-bottom: 1px solid rgba(197, 171, 81, .55);
    padding-bottom: 2px;
    transition: color .2s ease, border-color .2s ease;
}
.mw-press-item__more summary::-webkit-details-marker { display: none; }
.mw-press-item__more summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}
.mw-press-item__more[open] summary::after {
    transform: translateY(2px) rotate(-135deg);
}
.mw-press-item__more summary:hover,
.mw-press-item__more summary:focus-visible {
    color: #62564E;
    border-bottom-color: var(--mw-accent, #C5AB51);
}
.mw-press-item__more summary:focus-visible {
    /* Gold auf Weiss erreicht nur 2,25:1 - der Fokusrahmen braucht 3:1. */
    outline: 2px solid #62564E;
    outline-offset: 4px;
}
.mw-press-item__more-close,
.mw-press-item__more[open] .mw-press-item__more-open { display: none; }
.mw-press-item__more[open] .mw-press-item__more-close { display: inline; }
.mw-press-item__more .mw-content {
    margin-top: 1rem;
    padding-left: 1.1rem;
    border-left: 1px solid rgba(197, 171, 81, .55);
}
.mw-press-item__more .mw-content > :last-child { margin-bottom: 0; }

.mw-press-item__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    margin-top: 1.4rem;
}
.mw-press-item__pdf {
    font-size: .85rem;
    color: var(--mw-color-primary, #62564E);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(197, 171, 81, .55);
}
.mw-press-item__pdf:hover,
.mw-press-item__pdf:focus-visible { color: #62564E; text-decoration-color: var(--mw-accent, #C5AB51); }

.mw-press__more-link {
    justify-content: center;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 760px) {
    .mw-press-item.has-media { grid-template-columns: minmax(0, 1fr); }
    .mw-press-item__media { aspect-ratio: 16 / 10; }
    .mw-press-item__actions .mw-button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .mw-press-item__more summary,
    .mw-press-item__more summary::after { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   §74 — KATALOGBESTELLUNG (Shortcode [meerweit_anfrageformular typ="katalog"])
   Katalogauswahl als ruhige Liste aus Wahlkarten: Titel und Kurztext links,
   eigener Auswahlhaken rechts. Native Checkbox bleibt erhalten (Tastatur,
   Screenreader, Pflichtprüfung) – nur ihr Aussehen wird ersetzt. ═══════════ */
.mw-form .mw-catalog-choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    min-width: 0;
}
.mw-form .mw-catalog-choice legend {
    float: left;
    width: 100%;
    margin: 0 0 4px;
    padding: 0;
}
.mw-form .mw-catalog-choice legend > span {
    color: #6B665F;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Karte */
.mw-form .mw-catalog-choice__option {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 20px 22px 20px 24px;
    background: #FFFFFF;
    border: 1px solid #D4CCB8;
    border-radius: 14px;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.mw-form .mw-catalog-choice__option::before {
    /* feine Goldlinie links – nur bei Auswahl sichtbar */
    content: "";
    position: absolute;
    left: -1px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    border-radius: 2px;
    background: #C5AB51;
    opacity: 0;
    transition: opacity .2s ease;
}
.mw-form .mw-catalog-choice__option:hover {
    border-color: #B5A193;
}
.mw-form .mw-catalog-choice__option:has(input:checked) {
    background: #FAF8F4;
    border-color: #62564E;
}
.mw-form .mw-catalog-choice__option:has(input:checked)::before {
    opacity: 1;
}
.mw-form .mw-catalog-choice__option:has(input:focus-visible) {
    outline: 2px solid #62564E;
    outline-offset: 3px;
}

/* Text */
.mw-form .mw-catalog-choice__body {
    display: grid;
    gap: 5px;
    min-width: 0;
}
.mw-form .mw-catalog-choice__body,
.mw-form .mw-catalog-choice__body strong,
.mw-form .mw-catalog-choice__body small {
    letter-spacing: normal;
    text-transform: none;
}
.mw-form .mw-catalog-choice__body strong {
    color: #252525;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.35;
}
.mw-form .mw-catalog-choice__body small {
    color: #6B665F;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.55;
}

/* Auswahlhaken rechts */
.mw-form .mw-catalog-choice__option input[type="checkbox"] {
    order: 2;
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 24px;
    height: 24px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid #9C8A7C; /* 3,3:1 auf Weiß – Bedienelement braucht 3:1 */
    border-radius: 50%;
    background: #FFFFFF center / 12px 12px no-repeat;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}
.mw-form .mw-catalog-choice__option input[type="checkbox"]:checked {
    background-color: #62564E;
    border-color: #62564E;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.8 8.8 9.8 3.4' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mw-form .mw-catalog-choice__option input[type="checkbox"]:focus-visible {
    outline: none; /* Fokus zeigt die ganze Karte */
}
/* Fallback ohne :has() – dann trägt die Checkbox selbst den Fokus */
@supports not selector(:has(*)) {
    .mw-form .mw-catalog-choice__option input[type="checkbox"]:focus-visible {
        outline: 2px solid #62564E;
        outline-offset: 3px;
    }
}

@media (max-width: 760px) {
    .mw-form .mw-catalog-choice__option {
        gap: 14px;
        padding: 16px 16px 16px 18px;
    }
    .mw-form .mw-catalog-choice__body strong { font-size: 1rem; }
    .mw-form .mw-catalog-choice__body small { font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mw-form .mw-catalog-choice__option,
    .mw-form .mw-catalog-choice__option::before,
    .mw-form .mw-catalog-choice__option input[type="checkbox"] { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   §75 — STARTSEITE: Reiseziele oben, Einleitung ausklappbar (2026-10)
   ═══════════════════════════════════════════════════════════════════════ */
/* Reiseziele: Einleitungstext über die volle Containerbreite */
.mw-home-destinations .mw-section-heading,
.mw-home-destinations .mw-section-heading p {
    max-width: none;
}
/* Meer.Weit-Einleitung: „Mehr lesen" direkt unter dem ersten Absatz */
.mw-home-intro .mw-read-more__btn {
    margin-top: 6px;
}
.mw-home-intro .mw-read-more__body > :first-child {
    margin-top: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   §76 — HERO-VIDEO: Standbild zuerst, weiches Einblenden, Pause-Knopf (2026-10)
   ═══════════════════════════════════════════════════════════════════════ */
.mw-hero .mw-hero__video-still {
    position: absolute;
    inset: 0;
    display: block;
}
.mw-hero .mw-hero__video {
    opacity: 0;
    transition: opacity .9s ease;
}
.mw-hero .mw-hero__video.is-playing {
    opacity: 1;
}
.mw-hero .mw-hero__video-toggle {
    position: absolute;
    right: max(20px, calc((100vw - 1180px) / 2));
    bottom: clamp(36px, 4.5vh, 60px);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: rgba(37, 37, 37, .35);
    color: #FFFFFF;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background-color .2s ease, border-color .2s ease;
}
.mw-hero .mw-hero__video-toggle[hidden] {
    display: none;
}
/* reset.css färbt [type=button]:hover/focus sonst pink → hier festhalten */
.mw-hero .mw-hero__video-toggle:hover,
.mw-hero .mw-hero__video-toggle:focus,
.mw-hero .mw-hero__video-toggle:active {
    background: rgba(37, 37, 37, .55) !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}
.mw-hero .mw-hero__video-toggle:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}
.mw-hero .mw-hero__video-icon--play { display: none; }
.mw-hero .mw-hero__video-toggle.is-paused .mw-hero__video-icon--play { display: block; }
.mw-hero .mw-hero__video-toggle.is-paused .mw-hero__video-icon--pause { display: none; }
@media (max-width: 760px) {
    .mw-hero .mw-hero__video-toggle {
        top: 88px;
        bottom: auto;
        right: 16px;
        width: 36px;
        height: 36px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mw-hero .mw-hero__video { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   §77 — VIDEO-BLOCK im Inhaltsbereich (inc/video-block.php, 2026-10)
   16:9-Rahmen, ruhige Fläche bis zum Abspielen. YouTube/Vimeo: 2-Klick-
   Fassade über dem Vorschaubild.
   ═══════════════════════════════════════════════════════════════════════ */
.mw-video {
    margin: 0;
}
.mw-video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--mw-card-radius, 18px);
    background: #F5F2ED;
}
.mw-video__frame > video,
.mw-video__frame > iframe,
.mw-video__frame > .mw-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.mw-video__frame > video {
    object-fit: cover;
    background: #252525;
}
.mw-video__frame > .mw-video__poster {
    object-fit: cover;
}
.mw-video__frame > .mw-embed-consent {
    position: absolute;
    inset: 0;
    height: 100%;
    border: 0;
    border-radius: inherit;
    padding: clamp(18px, 4vw, 40px);
}
/* Mit Vorschaubild: Hinweis halbtransparent über dem Bild */
.mw-video--has-poster .mw-video__frame > .mw-embed-consent {
    /* gleichmäßig abgedunkelt, damit der Hinweis auch über hellen Stellen
       (Sonne, Strand) gut lesbar bleibt */
    background: rgba(37, 37, 37, .58);
}
.mw-video--has-poster .mw-embed-consent__title,
.mw-video--has-poster .mw-embed-consent__text,
.mw-video--has-poster .mw-embed-consent__policy {
    color: #FFFFFF;
}
.mw-video--has-poster .mw-embed-consent__text {
    opacity: .9;
}
.mw-video__caption {
    margin-top: 12px;
    padding-left: 14px;
    border-left: 1px solid rgba(197, 171, 81, .55);
    color: #6B665F;
    font-size: .9rem;
    line-height: 1.5;
}
.mw-video-section .mw-section-heading + .mw-video {
    margin-top: 8px;
}
@media (max-width: 760px) {
    .mw-video__frame {
        border-radius: 14px;
    }
    /* Auf dem Handy ist 16:9 zu niedrig für den Hinweistext */
    .mw-video--embed .mw-video__frame {
        aspect-ratio: auto;
        min-height: 260px;
    }
    .mw-video--embed .mw-video__frame:has(> iframe) {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }
}

/* ==========================================================================
   §78 Katalogbestellung – eingebettetes Polaris-Bestellformular (iframe)
   Die Höhe lässt sich domainübergreifend nicht automatisch messen, daher feste
   Höhen passend zum Formular (Desktop ca. 1.270 px, mobil ca. 1.650 px Inhalt)
   – so entsteht kein zweiter Scrollbalken im Formular.
   ========================================================================== */
iframe[src*="buchen.polaris-tours.de"] {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 1340px !important;
    border: 0;
    overflow: hidden;
}
@media (max-width: 899px) {
    iframe[src*="buchen.polaris-tours.de"] { height: 1720px !important; }
}

/* ==========================================================================
   §79 Anfrage gesendet – Bestätigungskarte statt Formular + Sende-Zustand
   ========================================================================== */
#anfrage,
.mw-inquiry-success {
    scroll-margin-top: calc(var(--mw-header-height, 78px) + var(--mw-admin-bar-height, 0px) + var(--mw-sticky-info-height, 0px) + 24px);
}
.mw-inquiry-success {
    background: #FFFFFF;
    border: 1px solid #E0D9D0;
    border-radius: 16px;
    padding: clamp(26px, 4vw, 40px);
    box-shadow: 0 24px 60px rgba(37, 37, 37, .07);
    color: #3A3A3A;
    animation: mwSuccessIn .5s ease both;
}
.mw-inquiry-success:focus { outline: none; }
.mw-inquiry-success:focus-visible { outline: 2px solid #C5AB51; outline-offset: 4px; }
@keyframes mwSuccessIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mw-inquiry-success { animation: none; } }
.mw-inquiry-success__check {
    width: 56px; height: 56px; border-radius: 50%;
    border: 1px solid #C5AB51; color: #A88F3D;
    display: grid; place-items: center; margin-bottom: 20px;
}
.mw-inquiry-success__label {
    margin: 0 0 10px; font-size: 11px; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase; color: #A88F3D;
}
.mw-main .mw-inquiry-success__title,
.mw-inquiry-success__title {
    margin: 0 0 14px; font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2rem);
    line-height: 1.2; color: #252525;
}
.mw-inquiry-success__text { margin: 0 0 18px; font-size: 1rem; line-height: 1.7; }
.mw-inquiry-success__trip {
    display: flex; gap: 16px; align-items: center;
    background: #F7F5F1; border-radius: 12px; padding: 14px 16px; margin: 6px 0 18px;
}
.mw-inquiry-success__trip .mw-inquiry-success__img {
    width: 88px; height: 64px; object-fit: cover; border-radius: 8px; flex: none;
}
.mw-inquiry-success__trip strong { display: block; font-weight: 500; color: #252525; font-size: 1.05rem; line-height: 1.35; }
.mw-inquiry-success__trip span { display: block; margin-top: 2px; font-size: .88rem; color: #6B665F; }
.mw-inquiry-success__mail {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 0 0 22px; padding: 14px 0;
    border-top: 1px solid #E0D9D0; border-bottom: 1px solid #E0D9D0;
    font-size: .95rem; line-height: 1.6;
}
.mw-inquiry-success__mail svg { flex: none; margin-top: 3px; color: #62564E; }
.mw-inquiry-success__steps {
    list-style: none; margin: 0 0 26px; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: 14px;
    font-size: .92rem; line-height: 1.55; color: #6B665F;
}
.mw-inquiry-success__steps li { position: relative; padding-left: 38px; }
.mw-inquiry-success__steps b {
    display: block; margin-bottom: 2px;
    font-weight: 500; font-size: .98rem; color: #252525;
}
.mw-inquiry-success__steps i {
    position: absolute; left: 0; top: 0;
    font-style: normal; width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid #C5AB51; color: #A88F3D; display: grid; place-items: center; font-size: 12px;
}
.mw-inquiry-success__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mw-inquiry-success__actions .mw-button--secondary {
    background: transparent; border: 1px solid #62564E; color: #62564E;
}
.mw-inquiry-success__actions .mw-button--secondary:hover,
.mw-inquiry-success__actions .mw-button--secondary:focus-visible {
    background: #62564E; color: #FFFFFF;
}
.mw-inquiry-success__again {
    display: inline-block; margin-top: 16px; font-size: .9rem; color: #6B665F;
    text-decoration: underline; text-underline-offset: 3px;
}
.mw-inquiry-success__again:hover { color: #252525; }
@media (max-width: 640px) {
    .mw-inquiry-success__actions .mw-button { width: 100%; justify-content: center; text-align: center; }
    .mw-inquiry-success__trip .mw-inquiry-success__img { width: 72px; height: 54px; }
}

/* Sende-Zustand des Absende-Buttons */
.mw-form button[type="submit"].is-sending {
    cursor: progress;
    opacity: .88;
    pointer-events: none;
}
.mw-form button[type="submit"].is-sending::before {
    content: "";
    width: 16px; height: 16px; margin-right: 10px; flex: none;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: mwSpin .8s linear infinite;
    display: inline-block; vertical-align: -3px;
}
@keyframes mwSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mw-form button[type="submit"].is-sending::before { animation-duration: 2s; } }

/* §80 Footer-Claim: war eine H2 (SEO: Überschrift im Footer auf jeder Seite),
   jetzt ein div mit identischem Aussehen. */
.mw-footer__brand .mw-footer__claim {
    margin: 8px 0 16px;
    max-width: 560px;
    color: #FFFDF8;
    font-family: var(--mw-serif);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 400;
    line-height: 1.07;
    letter-spacing: -0.012em;
}
@media (max-width: 680px) {
    .mw-footer__brand .mw-footer__claim {
        font-size: clamp(1.55rem, 6.2vw, 1.95rem) !important;
        line-height: 1.15 !important;
    }
}

/* §81 Anfrageformular: Mitreisende (Person 2, 3, …) */
.mw-form .mw-travelers {
    display: grid;
    gap: 14px;
}
.mw-form .mw-travelers[hidden] {
    display: none !important;
}
.mw-form .mw-travelers__intro {
    margin: 4px 0 0;
    color: #6B665F;
    font-size: .9rem;
}
.mw-form .mw-travelers__list {
    display: grid;
    gap: 14px;
}
.mw-form .mw-traveler {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    min-width: 0;
    margin: 0;
    padding: 14px 18px 18px;
    border: 1px solid rgba(62, 56, 51, .14);
    border-radius: 12px;
    background: #FFFFFF;
}
.mw-form .mw-traveler legend {
    padding: 0 6px;
    color: #62564E;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}
@media (max-width: 480px) {
    .mw-form .mw-traveler {
        grid-template-columns: 1fr;
        padding: 12px 14px 16px;
    }
}