/* ============================================================
   marrakech-sahara.com — style.css
   Component classes listed in /components.md — do not add ad-hoc.
   Farbwelt: Sand/Ocker auf tiefem Indigo (Nachthimmel über den Dünen),
   ruhig, ohne Verläufe in Komponenten.
   ============================================================ */

:root {
    /* Colours — deep indigo (desert night sky) as the base, burnt ochre
       (dune sand in the late sun) as the accent, pale sand for surfaces.
       Indigo carries hero, footer, ink and hover states; ochre carries
       buttons and links. WCAG AA (10.10.2026, gemessen):
       white on --c-primary 6.6:1 · --c-primary on --c-muted 6.1:1 ·
       --c-ink on white 15.7:1 · --c-ink-soft on --c-muted 7.8:1 ·
       --c-aurora (sand gold) on --c-ink 9.8:1 · white on --c-primary-dark 13.1:1. */
    --c-ink: #1c2044;
    --c-ink-soft: #4f4b5e;
    --c-bg: #ffffff;
    --c-primary: #8f4c0e;
    --c-primary-dark: #262c5e;
    --c-primary-soft: #f6ead4;
    --c-warm: #f3ecdf;
    --c-warm-dark: #e6d9c0;
    --c-muted: #faf6ee;
    --c-border: #ebe2d2;
    --c-star: #d97706;
    --c-danger: #b4231f;
    --c-success: #047857;
    /* Name aus der Vorlage behalten (Klassen nutzen ihn): hier Sandgold
       auf Indigo, nicht Aurora-Grün. */
    --c-aurora: #e8c98e;
    /* Wüstennacht: Indigo oben, ein schwacher Sandschimmer am Horizont —
       Grund jedes Heros, solange (oder falls) kein Foto liegt. */
    --hero-sky: radial-gradient(120% 70% at 50% 120%, rgba(232,201,142,0.30), rgba(232,201,142,0) 60%),
                linear-gradient(180deg, #121531 0%, #1c2044 55%, #2f2a4a 100%);

    /* Spacing scale */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 16px;
    --s-4: 24px;
    --s-5: 40px;
    --s-6: 64px;
    --s-7: 96px;

    /* Radii */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 22px;

    /* Typography */
    --f-serif: 'Fraunces', Georgia, serif;
    --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* Layout */
    --page-max: 1200px;
}

/* — Reset ————————————————————————————————— */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
/* Das display:block oben würde das hidden-Attribut aushebeln (Autor- schlägt
   UA-Stylesheet) — site.js blendet Platzhalter-Bilder über `hidden` ein/aus. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--c-primary-dark); }

/* — Base ————————————————————————————————— */
.mst-body {
    font-family: var(--f-sans);
    color: var(--c-ink);
    background: var(--c-bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--f-serif); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p { margin: 0 0 var(--s-3); }

.mst-container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--s-4); }
.mst-container--narrow { max-width: 900px; }

.mst-skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--c-ink); color: #fff; padding: var(--s-2) var(--s-3);
    z-index: 999;
}
.mst-skip:focus { left: var(--s-2); top: var(--s-2); }

.mst-only-desktop { display: initial; }
.mst-only-mobile { display: none; }
@media (max-width: 899px) {
    .mst-only-desktop { display: none !important; }
    .mst-only-mobile { display: initial; }
}
.mst-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.mst-center { text-align: center; }

/* — Header ————————————————————————————————— */
.mst-header {
    background: rgba(255,255,255,0.94);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--c-border);
    position: sticky; top: 0; z-index: 40;
}
.mst-header .mst-container {
    display: flex; align-items: center; gap: var(--s-4);
    padding-top: var(--s-3); padding-bottom: var(--s-3);
}
.mst-brand {
    display: inline-flex; align-items: center; gap: var(--s-2);
    color: var(--c-ink); text-decoration: none; font-weight: 700;
    font-family: var(--f-serif); font-size: 1.15rem;
}
.mst-brand__mark { color: var(--c-primary); font-size: 1.25rem; }
.mst-brand__logo { display: block; height: 42px; width: auto; }
.mst-footer__logo { display: inline-block; height: 30px; width: auto; vertical-align: middle; }
.mst-nav--desktop {
    display: flex; gap: var(--s-4); margin-left: auto;
}
.mst-nav__item {
    position: relative; padding: var(--s-3) 0;
}
.mst-nav__link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--c-ink-soft); text-decoration: none; font-weight: 500;
    padding: var(--s-1) 0;
}
.mst-nav__link:hover, .mst-nav__item:hover .mst-nav__link { color: var(--c-primary); }
.mst-nav__link--noref { cursor: default; }
.mst-nav__caret { font-size: 0.7em; color: var(--c-ink-soft); transition: transform .15s; }
.mst-nav__item:hover .mst-nav__caret { transform: rotate(-180deg); color: var(--c-primary); }

.mst-nav__dropdown {
    position: absolute; top: 100%; left: 0;
    min-width: 260px;
    background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md);
    box-shadow: 0 12px 32px rgba(28,32,68,0.12);
    padding: var(--s-2) 0;
    opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity .15s, transform .15s;
    z-index: 50;
}
.mst-nav__item:hover .mst-nav__dropdown,
.mst-nav__item:focus-within .mst-nav__dropdown {
    opacity: 1; transform: translateY(0); pointer-events: auto;
}
.mst-nav__dropdown a {
    display: block; padding: 10px var(--s-3);
    color: var(--c-ink); text-decoration: none; font-weight: 500; font-size: 0.95rem;
    border-left: 3px solid transparent;
}
.mst-nav__dropdown a:hover {
    background: var(--c-primary-soft); color: var(--c-primary-dark);
    border-left-color: var(--c-primary);
}
.mst-nav__dropdown-lead {
    color: var(--c-primary-dark) !important; font-weight: 700 !important;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 4px; padding-bottom: 10px !important;
}

/* Burger button (mobile only) */
.mst-burger {
    display: none;
    background: transparent; border: 0; padding: 8px;
    cursor: pointer; margin-left: auto;
    width: 44px; height: 44px;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.mst-burger__bar {
    display: block; width: 24px; height: 2px;
    background: var(--c-ink); border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.mst-burger[aria-expanded="true"] .mst-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mst-burger[aria-expanded="true"] .mst-burger__bar:nth-child(2) { opacity: 0; }
.mst-burger[aria-expanded="true"] .mst-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav panel (revealed by burger) */
.mst-mobile-nav-wrap { display: none; }
.mst-mobile-nav-wrap.is-open { display: block; }
.mst-nav--mobile { display: flex; flex-direction: column; width: 100%; gap: 0; }
.mst-nav__mobile-group { border-bottom: 1px solid var(--c-border); }
.mst-nav__mobile-group summary {
    padding: var(--s-3) 0; cursor: pointer; user-select: none;
    font-weight: 600; color: var(--c-ink);
    display: flex; justify-content: space-between; align-items: center;
    list-style: none;
}
.mst-nav__mobile-group summary::-webkit-details-marker { display: none; }
.mst-nav__mobile-group[open] summary { color: var(--c-primary-dark); }
.mst-nav__mobile-group[open] summary span { transform: rotate(-180deg); display: inline-block; transition: transform .15s; }
.mst-nav__mobile-group a {
    display: block; padding: var(--s-2) 0 var(--s-2) var(--s-3);
    color: var(--c-ink-soft); text-decoration: none; font-size: 0.95rem;
}
.mst-nav__mobile-group a:hover { color: var(--c-primary); }

/* Language-switcher visibility per viewport */
.mst-langswitch-slot--mobile { display: none; }
.mst-langswitch-slot--mobile .mst-langswitch { margin: var(--s-3) 0 var(--s-2); }
.mst-langswitch-slot--mobile .mst-langswitch__menu { position: static; box-shadow: none; border: 0; padding: var(--s-2) 0 0; margin-top: 0; min-width: 0; }
.mst-langswitch-slot--mobile .mst-langswitch__link { padding: 10px var(--s-2); }

@media (max-width: 899px) {
    .mst-nav--desktop { display: none !important; }
    .mst-burger { display: flex; }
    .mst-header .mst-container { flex-wrap: wrap; gap: var(--s-2); align-items: center; }
    .mst-brand { margin-right: auto; }
    .mst-langswitch-slot--desktop { display: none; }
    .mst-langswitch-slot--mobile { display: block; }
    .mst-mobile-nav-wrap { flex-basis: 100%; }
    .mst-mobile-nav-wrap.is-open { display: block; border-top: 1px solid var(--c-border); padding-top: var(--s-2); }
}
.mst-langswitch { margin-left: var(--s-3); position: relative; }
.mst-langswitch__dropdown { position: relative; }
.mst-langswitch__dropdown summary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: var(--r-sm);
    background: var(--c-muted); border: 1px solid var(--c-border);
    color: var(--c-ink); font-weight: 600; font-size: 0.85rem;
    cursor: pointer; list-style: none; user-select: none;
    transition: background .15s, border-color .15s;
}
.mst-langswitch__dropdown summary::-webkit-details-marker { display: none; }
.mst-langswitch__dropdown summary:hover { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary-dark); }
.mst-langswitch__dropdown[open] summary { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary-dark); }

.mst-langswitch__menu {
    position: absolute; top: 100%; right: 0; margin-top: 4px;
    min-width: 180px;
    background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md);
    box-shadow: 0 12px 32px rgba(28,32,68,0.12);
    padding: 6px 0; z-index: 50;
}
.mst-langswitch__link {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 8px var(--s-3);
    color: var(--c-ink); text-decoration: none; font-size: 0.9rem;
    border-left: 3px solid transparent;
}
.mst-langswitch__link .mst-langswitch__code {
    font-weight: 700; font-size: 0.75rem;
    color: var(--c-ink-soft); letter-spacing: 0.05em;
    min-width: 24px;
}
.mst-langswitch__link .mst-langswitch__label { flex: 1; }
.mst-langswitch__link:hover, .mst-langswitch__link.is-active {
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
    border-left-color: var(--c-primary);
}
.mst-langswitch__link.is-active .mst-langswitch__code { color: var(--c-primary); }

/* — Hero ————————————————————————————————— */
.mst-hero {
    position: relative; color: #fff;
    /* Kein Foto im CSS: das Hero-Foto setzt die Seite selbst (inline), und nur
       wenn die Datei liegt. Ohne Foto trägt der Nachthimmel-Verlauf. */
    background: var(--hero-sky);
    background-color: var(--c-ink);
    padding: clamp(64px, 12vw, 140px) 0;
    min-height: 68vh;
    display: flex; align-items: center;
}
.mst-hero--home { }
.mst-hero__inner { max-width: 780px; }
.mst-hero__title { color: #fff; margin-bottom: var(--s-3); }
.mst-hero__sub { color: rgba(255,255,255,0.95); font-size: 1.15rem; max-width: 640px; margin-bottom: var(--s-4); }
.mst-hero__ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.mst-trustline {
    display: inline-flex; align-items: center; gap: var(--s-2);
    margin-top: var(--s-4);
    color: rgba(255,255,255,0.9); font-size: 0.95rem;
    padding: 8px 14px; background: rgba(28,32,68,0.35); border-radius: 999px;
    backdrop-filter: blur(6px);
}
.mst-hero__stats {
    display: flex; gap: var(--s-5); margin-top: var(--s-5);
    padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,0.25);
    color: #fff;
}
.mst-hero__stat { font-size: 0.9rem; color: rgba(255,255,255,0.85); }
.mst-hero__stat strong { display: block; font-family: var(--f-serif); font-size: 1.9rem; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 4px; letter-spacing: -0.02em; }
@media (max-width: 899px) {
    .mst-hero { min-height: 56vh; }
}

/* — Buttons ————————————————————————————————— */
.mst-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--s-2); text-decoration: none; font-weight: 600;
    padding: 12px 22px; border-radius: var(--r-md);
    border: 1px solid transparent; transition: transform .08s, background .15s, color .15s;
    color: var(--c-ink);
}
.mst-btn:active { transform: translateY(1px); }
.mst-btn--primary { background: var(--c-primary); color: #fff; }
.mst-btn--primary:hover { background: var(--c-primary-dark); color: #fff; }
.mst-btn--secondary { background: #fff; color: var(--c-primary-dark); border-color: rgba(255,255,255,0.7); }
.mst-btn--secondary:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.mst-btn--ghost { background: transparent; color: var(--c-primary-dark); border-color: var(--c-border); }
.mst-btn--ghost:hover { background: var(--c-muted); }
.mst-btn--dark { background: var(--c-ink); color: #fff; }
.mst-btn--large { padding: 14px 28px; font-size: 1.05rem; }
.mst-btn--block { width: 100%; }

.mst-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
    background: var(--c-warm); color: var(--c-ink);
}
.mst-chip--live { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.mst-chip--warn { background: #fef3c7; color: #92400e; }

/* — Trust bar ————————————————————————————————— */
.mst-trustbar {
    background: var(--c-warm); border-bottom: 1px solid var(--c-warm-dark);
}
.mst-trustbar .mst-container {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3);
    padding-top: var(--s-4); padding-bottom: var(--s-4);
}
.mst-trustbar__item {
    display: flex; gap: var(--s-2); align-items: flex-start;
    font-size: 0.95rem; color: var(--c-ink);
}
.mst-trustbar__item::before {
    content: '✓'; color: var(--c-primary); font-weight: 700; flex-shrink: 0;
}
@media (max-width: 899px) {
    .mst-trustbar .mst-container { grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-3); }
}

/* — Sections ————————————————————————————————— */
.mst-section { padding: var(--s-6) 0; }
.mst-section--muted { background: var(--c-muted); }
.mst-section--dark { background: var(--c-ink); color: #fff; }
.mst-section--tight { padding: var(--s-5) 0; }
.mst-section__title { margin-bottom: var(--s-2); }
.mst-section__sub { color: var(--c-ink-soft); margin-bottom: var(--s-5); font-size: 1.05rem; }
.mst-section--dark .mst-section__sub { color: rgba(255,255,255,0.8); }
.mst-section--dark h2 { color: #fff; }

/* — Grids ————————————————————————————————— */
.mst-grid { display: grid; gap: var(--s-4); }
.mst-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mst-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mst-grid--4 { grid-template-columns: repeat(4, 1fr); }
.mst-grid--6 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 900px) { .mst-grid--6 { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 899px) {
    .mst-grid--3, .mst-grid--4, .mst-grid--6 { grid-template-columns: 1fr 1fr; }
    .mst-grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
    .mst-grid--2, .mst-grid--3, .mst-grid--4, .mst-grid--6 { grid-template-columns: 1fr; }
}

/* — Cards ————————————————————————————————— */
.mst-card {
    background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
    overflow: hidden; color: var(--c-ink); text-decoration: none;
    display: flex; flex-direction: column;
    transition: transform .15s, box-shadow .15s;
}
.mst-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(28,32,68,0.08); }
.mst-card__img { aspect-ratio: 4/3; object-fit: cover; width: 100%; background: var(--c-muted); }
.mst-card__body { padding: var(--s-3) var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.mst-card__title { font-family: var(--f-serif); font-size: 1.15rem; font-weight: 700; color: var(--c-ink); }
.mst-card__usp { color: var(--c-ink-soft); font-size: 0.95rem; }
.mst-card__meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: var(--s-2); border-top: 1px solid var(--c-border); }
.mst-card__price { font-weight: 700; font-size: 1.1rem; color: var(--c-ink); }
.mst-card__price-note { display: block; font-weight: 400; font-size: 0.8rem; color: var(--c-ink-soft); margin-top: 2px; }
.mst-card__rating { color: var(--c-ink-soft); font-size: 0.9rem; }
.mst-card__rating strong { color: var(--c-star); }
.mst-card__cta { margin-top: var(--s-2); align-self: flex-start; }

/* — Legal pages (legal notice, privacy policy) — */
.mst-legal { max-width: 780px; margin: 0 auto; color: var(--c-ink); }
.mst-legal h1 { font-family: var(--f-serif); font-size: 2rem; font-weight: 700; margin: 0 0 var(--s-4); line-height: 1.2; }
.mst-legal h2 { font-family: var(--f-serif); font-size: 1.35rem; font-weight: 700; margin: var(--s-5) 0 var(--s-2); color: var(--c-ink); border-bottom: 1px solid var(--c-border); padding-bottom: var(--s-2); }
.mst-legal h3 { font-family: var(--f-serif); font-size: 1.1rem; font-weight: 700; margin: var(--s-4) 0 var(--s-2); color: var(--c-primary-dark); }
.mst-legal h4 { font-size: 1rem; font-weight: 700; margin: var(--s-3) 0 var(--s-2); color: var(--c-ink); }
.mst-legal p { margin: 0 0 var(--s-3); line-height: 1.7; color: var(--c-ink); font-size: 0.96rem; }
.mst-legal ul { margin: 0 0 var(--s-3); padding-left: 1.2em; }
.mst-legal li { line-height: 1.6; margin-bottom: var(--s-1); color: var(--c-ink); }
.mst-legal a { color: var(--c-primary-dark); word-break: break-word; }
.mst-legal-addr {
    padding: var(--s-3) var(--s-4); background: var(--c-muted);
    border-left: 3px solid var(--c-primary); border-radius: var(--r-sm);
    font-family: var(--f-sans); line-height: 1.5;
}

/* — Trip Planning pages — content components — */
.mst-planning { max-width: 820px; margin: 0 auto; }
.mst-planning h2 {
    font-family: var(--f-serif); font-size: 1.7rem; font-weight: 700;
    /* Abschnittsabstand vergrößert (QA 11.09.2026): s-6 → s-7, die
       Vergleichs-Unterseiten wirkten zu gedrängt. */
    color: var(--c-ink); margin: var(--s-7) 0 var(--s-3);
    line-height: 1.2; letter-spacing: -0.01em;
}
.mst-planning h2:first-child { margin-top: 0; }
.mst-planning h2::before {
    content: '';
    display: inline-block; width: 8px; height: 24px;
    background: var(--c-primary); border-radius: 2px;
    margin-right: var(--s-2); vertical-align: -4px;
}
.mst-planning h3 {
    font-family: var(--f-serif); font-size: 1.15rem; font-weight: 700;
    color: var(--c-primary-dark); margin: var(--s-4) 0 var(--s-2);
}
.mst-planning p { margin-bottom: var(--s-3); line-height: 1.7; color: var(--c-ink); font-size: 1rem; }
.mst-planning ul, .mst-planning ol { margin: 0 0 var(--s-4); padding-left: 0; list-style: none; }
.mst-planning li {
    position: relative; padding-left: 1.8em;
    margin-bottom: var(--s-2);
    line-height: 1.6; color: var(--c-ink);
}
.mst-planning li::before {
    content: '◆'; position: absolute; left: 0.4em;
    color: var(--c-primary); font-size: 0.75em; top: 0.35em;
}
.mst-planning strong { color: var(--c-ink); font-weight: 700; }

.mst-planning-lead {
    font-size: 1.2rem; line-height: 1.6; color: var(--c-ink);
    padding: var(--s-4) 0 var(--s-5);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--s-5);
    font-family: var(--f-serif); font-weight: 500;
}

/* Callout — highlighted takeaway box */
.mst-callout {
    display: flex; gap: var(--s-3); align-items: flex-start;
    padding: var(--s-4);
    border-radius: var(--r-lg);
    margin: var(--s-4) 0 var(--s-5);
    background: var(--c-warm);
    border-left: 4px solid var(--c-warm-dark);
}
.mst-callout__icon {
    flex-shrink: 0; width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.7); border-radius: 50%;
    font-size: 1.1rem; font-weight: 700;
}
.mst-callout__body { flex: 1; }
.mst-callout__body p:last-child { margin-bottom: 0; }
.mst-callout__body strong { display: block; margin-bottom: 4px; font-family: var(--f-serif); font-size: 1.05rem; }
.mst-callout--tip { background: var(--c-primary-soft); border-left-color: var(--c-primary); }
.mst-callout--warn { background: #fef3c7; border-left-color: #d97706; }
.mst-callout--info { background: var(--c-muted); border-left-color: var(--c-ink-soft); }

/* Fact box — big number + short label */
.mst-factgrid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-3); margin: var(--s-4) 0 var(--s-6);
}
.mst-fact {
    padding: var(--s-3) var(--s-4);
    background: #fff;
    border: 1px solid var(--c-border); border-radius: var(--r-md);
    border-top: 4px solid var(--c-primary);
}
.mst-fact__num {
    display: block; font-family: var(--f-serif); font-size: 2rem; font-weight: 700;
    color: var(--c-ink); line-height: 1; letter-spacing: -0.02em; margin-bottom: 4px;
}
.mst-fact__label { font-size: 0.9rem; color: var(--c-ink-soft); line-height: 1.4; }

/* Two-column compare inside planning body (e.g. QT vs Te Anau) */
.mst-versus {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
    margin: var(--s-4) 0 var(--s-6);
}
@media (max-width: 599px) { .mst-versus { grid-template-columns: 1fr; } }
.mst-versus__col {
    padding: var(--s-4);
    background: #fff;
    border: 1px solid var(--c-border); border-radius: var(--r-lg);
}
.mst-versus__col h3 {
    margin-top: 0 !important; padding-bottom: var(--s-2);
    border-bottom: 2px solid var(--c-primary);
}
.mst-versus__col ul { margin-bottom: 0; }

/* Season strip for best-time page */
.mst-seasonrow {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
    margin: var(--s-4) 0 var(--s-5);
}
@media (max-width: 899px) { .mst-seasonrow { grid-template-columns: 1fr; } }
.mst-season {
    padding: var(--s-4);
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    border-top: 4px solid var(--c-primary);
}
.mst-season--summer { border-top-color: #f59e0b; }
.mst-season--autumn { border-top-color: #d97706; }
.mst-season--winter { border-top-color: #38bdf8; }
.mst-season--spring { border-top-color: #10b981; }
.mst-season h3 { margin-top: 0 !important; font-family: var(--f-serif); font-size: 1.2rem; }
.mst-season__tag {
    display: inline-block; font-size: 0.75rem; font-weight: 700;
    color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.mst-season p:last-child { margin-bottom: 0; }
.mst-season em { color: var(--c-primary-dark); font-style: normal; font-weight: 600; }

/* "For whom X" — good/bad fit block on operator pages */
.mst-fit-h2 { margin-top: var(--s-6) !important; margin-bottom: var(--s-4) !important; }
.mst-fit-grid { gap: var(--s-5) !important; margin-bottom: var(--s-5) !important; }
.mst-fit-title {
    font-family: var(--f-serif); font-size: 1.15rem; font-weight: 700;
    margin: 0 0 var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--c-border);
}
.mst-fit-title--good { color: var(--c-primary); }
.mst-fit-title--bad { color: var(--c-danger); }
.mst-fit-grid ul { margin-top: 0; padding-left: 1.1em; color: var(--c-ink-soft); line-height: 1.6; }
.mst-fit-grid ul li { margin-bottom: var(--s-2); }

.mst-card__imglink { display: block; }
.mst-card__titlelink { color: inherit; text-decoration: none; }
.mst-card__titlelink:hover { color: var(--c-primary); }
.mst-card__actions { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }

.mst-card--pain .mst-card__title { font-size: 1.05rem; }
.mst-card--pain .mst-card__body { min-height: 200px; display: flex; flex-direction: column; }
.mst-card--pain .mst-card__usp { flex: 1; }
.mst-card--pain .mst-card__cta { margin-top: auto; align-self: flex-start; }

.mst-card--overnight .mst-card__body { padding-bottom: var(--s-4); }

/* Tour-type card — home page primary orientation.
   Uniform height across all six cards: image, then body flex-column so
   every element lines up regardless of USP text length. */
.mst-card--tourtype .mst-card__img { aspect-ratio: 16/10; }
.mst-card--tourtype .mst-card__title { font-size: 1.2rem; }
.mst-card--tourtype .mst-card__usp { font-size: 0.95rem; min-height: 4.2em; flex: 1; }
.mst-card--tourtype .mst-card__stats {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-2) 0; margin-top: var(--s-2);
    border-top: 1px solid var(--c-border);
    font-size: 0.9rem; color: var(--c-ink-soft);
    white-space: nowrap;
}
.mst-card--tourtype .mst-card__stat--price { color: var(--c-ink); font-weight: 700; font-size: 0.95rem; }
.mst-card--tourtype .mst-card__cta {
    display: inline-block; margin-top: auto; padding-top: var(--s-2);
    color: var(--c-primary-dark); font-weight: 600;
}

/* Operator card — text-only, dezenter Trust-Block ohne Fotos */
.mst-card--operator-text {
    padding: var(--s-4); background: #fff;
    border: 1px solid var(--c-border); border-top: 4px solid var(--c-primary);
    border-radius: var(--r-lg);
    color: var(--c-ink); text-decoration: none;
    display: flex; flex-direction: column; gap: var(--s-2);
    transition: transform .12s, box-shadow .12s, border-top-color .12s;
}
.mst-card--operator-text:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(28,32,68,0.08); border-top-color: var(--c-primary-dark); }
.mst-card--operator-text .mst-card__body { padding: 0; gap: var(--s-2); }
.mst-card--operator-text .mst-card__meta { padding-top: var(--s-2); border-top: 1px solid var(--c-border); }
.mst-card--operator-text .mst-card__cta { display: inline-block; margin-top: auto; padding-top: var(--s-2); color: var(--c-primary-dark); font-weight: 600; font-size: 0.95rem; }
.mst-card--operator-text .mst-card__body { min-height: 190px; display: flex; flex-direction: column; }
.mst-card--operator-text .mst-card__usp { flex: 1; }

/* — Product list (cluster + operator pages: full tour cards + expandable details) — */
.mst-productlist { display: flex; flex-direction: column; gap: var(--s-4); }

.mst-product {
    background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
    overflow: hidden; color: var(--c-ink);
    box-shadow: 0 1px 0 var(--c-border);
}
.mst-product__summary {
    display: grid; grid-template-columns: 320px 1fr; gap: 0;
}
.mst-product--nopic .mst-product__summary { grid-template-columns: 1fr; }
.mst-product--nopic .mst-product__img { display: none; }
@media (max-width: 799px) {
    .mst-product__summary { grid-template-columns: 1fr; }
}
.mst-product__img {
    width: 100%; height: 100%; min-height: 220px;
    object-fit: cover; background: var(--c-muted);
    aspect-ratio: 4/3;
}
@media (max-width: 799px) {
    .mst-product__img { aspect-ratio: 16/10; min-height: 0; }
}
.mst-product__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.mst-product__title { font-family: var(--f-serif); font-size: 1.3rem; font-weight: 700; color: var(--c-ink); margin: var(--s-1) 0 0; }
.mst-product__usp { color: var(--c-ink-soft); font-size: 0.95rem; margin: 0; }
.mst-product__facts {
    list-style: none; padding: 0; margin: var(--s-2) 0 0;
    display: flex; flex-wrap: wrap; gap: var(--s-3);
    font-size: 0.9rem; color: var(--c-ink-soft);
}
.mst-product__facts li { display: inline-flex; align-items: center; gap: 6px; }
.mst-product__facts strong { color: var(--c-ink); font-weight: 600; margin-right: 4px; }
.mst-product__cancel { color: var(--c-success); font-weight: 500; }
.mst-product__meta {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
    padding-top: var(--s-3); margin-top: auto;
    border-top: 1px solid var(--c-border);
    flex-wrap: wrap;
}
.mst-product__price { font-weight: 700; font-size: 1.15rem; color: var(--c-ink); }
.mst-product__rating { color: var(--c-ink-soft); font-size: 0.9rem; }
.mst-product__rating strong { color: var(--c-star); font-weight: 700; }
.mst-product__body .mst-btn { align-self: flex-start; margin-top: var(--s-3); }

/* Expandable details section */
.mst-product__details {
    border-top: 1px solid var(--c-border);
    background: var(--c-muted);
}
.mst-product__details summary {
    padding: var(--s-3) var(--s-4);
    cursor: pointer; user-select: none;
    font-weight: 600; color: var(--c-primary-dark);
    display: flex; justify-content: space-between; align-items: center;
    list-style: none;
}
.mst-product__details summary::-webkit-details-marker { display: none; }
.mst-product__details summary::after { content: '▾'; transition: transform .15s; color: var(--c-primary); }
.mst-product__details[open] summary::after { transform: rotate(180deg); }
.mst-product__details summary:hover { background: rgba(143, 76, 14, 0.06); }

.mst-product__details-inner {
    padding: var(--s-3) var(--s-4) var(--s-5);
    border-top: 1px dashed var(--c-border);
    background: #fff;
}
.mst-product__block { margin-bottom: var(--s-4); }
.mst-product__block:last-child { margin-bottom: 0; }
.mst-product__block h4 {
    font-family: var(--f-serif); font-size: 1.05rem; font-weight: 700; color: var(--c-ink);
    margin: 0 0 var(--s-2); letter-spacing: -0.01em;
}
.mst-product__block p { margin: 0 0 var(--s-2); color: var(--c-ink-soft); font-size: 0.95rem; line-height: 1.6; }
.mst-product__block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mst-product__block li { color: var(--c-ink-soft); font-size: 0.93rem; line-height: 1.5; padding-left: 1.2em; text-indent: -1.2em; }
.mst-product__block li::before { content: '•'; color: var(--c-primary); font-weight: 700; margin-right: 8px; }
.mst-product__include li::before { content: '✓'; color: var(--c-success); }
.mst-product__exclude li::before { content: '✗'; color: var(--c-danger); }
.mst-product__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 599px) { .mst-product__grid2 { grid-template-columns: 1fr; } }
.mst-product__source {
    margin-top: var(--s-4); padding-top: var(--s-3);
    border-top: 1px solid var(--c-border);
    font-size: 0.8rem; color: var(--c-ink-soft); font-style: italic;
}

/* — Comparison table ————————————————————————————————— */
.mst-compare { overflow-x: auto; margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4); }

/* QA 11.09.2026 (Patrick): Vergleichstabellen in Schmal-Containern
   (Planning-/Versus-Seiten) wirkten schmaler als auf der Home. Ab
   Desktop-Breite brechen Tabelle + zugehörige Note auf die volle
   Seitenbreite aus (16px Sicherheitsabzug für die Scrollbar, da 100vw
   sie mitzählt). Unter 900px greift ohnehin das Karten-Layout. */
@media (min-width: 900px) {
    .mst-container--narrow .mst-compare {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: min(calc(100vw - 16px), var(--page-max));
        margin-inline: 0;
    }
    .mst-container--narrow .mst-compare__note {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: min(calc(100vw - 16px), var(--page-max));
        padding-inline: var(--s-4);
    }
}
@media (max-width: 699px) { .mst-compare { overflow-x: visible; } }
.mst-compare__table { width: 100%; border-collapse: collapse; min-width: 780px; background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 1px 0 var(--c-border); }
.mst-compare__table th, .mst-compare__table td { padding: var(--s-3); text-align: left; border-bottom: 1px solid var(--c-border); font-size: 0.95rem; color: var(--c-ink); }
.mst-compare__table th { background: var(--c-muted); font-weight: 600; color: var(--c-ink-soft); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }
.mst-compare__table tbody tr:hover { background: var(--c-primary-soft); }
.mst-compare__cell--price { font-weight: 700; }
.mst-compare__cell--price small { display: block; color: var(--c-ink-soft); font-weight: 400; font-size: 0.75rem; margin-top: 2px; }
.mst-compare__fee-badge { display: inline-block; margin-top: 4px; font-size: 0.75rem; padding: 2px 6px; border-radius: var(--r-sm); background: var(--c-warm); color: var(--c-ink); }
.mst-compare__cta { text-align: right; white-space: nowrap; }
.mst-compare__cta .mst-btn { padding: 6px 12px; font-size: 0.9rem; }
.mst-compare__terminal { color: var(--c-ink-soft); }
.mst-compare__note { margin-top: var(--s-3); color: var(--c-ink-soft); font-size: 0.9rem; }

/* Foto-Spalte (QA 11.09.2026): Tour-Bild aus dem GYG-Cache, kompakt und
   abgerundet; ohne Bild bleibt eine neutrale Zelle stehen. */
.mst-compare__cell--img { width: 112px; min-width: 112px; padding-right: 0; }
.mst-compare__img { width: 96px; max-width: none; height: 64px; object-fit: cover; border-radius: var(--r-sm); } /* max-width: none, sonst schrumpft die Fotospalte (globales img max-width: 100%) bei langen Texten bis auf null (QA 14.10.2026) */
.mst-compare__img-fallback { display: block; width: 96px; height: 64px; border-radius: var(--r-sm); background: var(--c-muted); border: 1px dashed var(--c-border); }
.mst-compare__img:not([hidden]) + .mst-compare__img-fallback { display: none; }

/* Mobile card layout for compare table */
@media (max-width: 699px) {
    .mst-compare__table {
        min-width: 0; display: block; background: transparent; box-shadow: none; border-radius: 0;
    }
    .mst-compare__table thead { display: none; }
    .mst-compare__table tbody { display: block; }
    .mst-compare__table tr {
        display: block; background: #fff;
        border: 1px solid var(--c-border); border-radius: var(--r-lg);
        padding: var(--s-3); margin-bottom: var(--s-3);
        box-shadow: 0 1px 0 var(--c-border);
    }
    .mst-compare__table tr:hover { background: #fff; }
    .mst-compare__table td {
        display: flex; justify-content: space-between; align-items: baseline;
        gap: var(--s-3); padding: 8px 0; border-bottom: 1px dashed var(--c-border);
        font-size: 0.95rem; text-align: right;
    }
    .mst-compare__table td:last-child { border-bottom: 0; padding-top: var(--s-3); }
    .mst-compare__table td::before {
        content: attr(data-label);
        font-weight: 600; color: var(--c-ink-soft); font-size: 0.8rem;
        text-transform: uppercase; letter-spacing: 0.03em;
        flex-shrink: 0; text-align: left;
    }
    /* Die Karte beginnt mit dem Foto (ohne Label), darunter der Tourname
       als Kopfzeile — Klassen statt :first-child, seit die Foto-Spalte
       davor sitzt (QA 11.09.2026). */
    .mst-compare__table td.mst-compare__cell--img::before,
    .mst-compare__table td.mst-compare__cell--tour::before { display: none; }
    .mst-compare__table td.mst-compare__cell--img {
        justify-content: flex-start;
        border-bottom: 0; padding: 0 0 var(--s-2);
    }
    .mst-compare__table td.mst-compare__cell--tour {
        justify-content: flex-start; text-align: left;
        border-bottom: 1px solid var(--c-border); padding: 0 0 var(--s-3);
        margin-bottom: var(--s-2);
    }
    .mst-compare__cta { text-align: center; }
    .mst-compare__cta .mst-btn { display: block; width: 100%; padding: 12px 16px; font-size: 1rem; }
}

/* — Selector ————————————————————————————————— */
.mst-selector { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--c-border); padding: var(--s-5); }
.mst-selector__step { display: none; }
.mst-selector__step.is-active { display: block; }
.mst-selector__q { font-family: var(--f-serif); font-size: 1.4rem; font-weight: 700; margin-bottom: var(--s-3); }
.mst-selector__options { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); margin-bottom: var(--s-3); }
@media (max-width: 599px) { .mst-selector__options { grid-template-columns: 1fr; } }
.mst-selector__option {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md);
    background: #fff; text-align: left; font-size: 0.95rem;
    transition: border-color .12s, background .12s;
    color: var(--c-ink);
}
.mst-selector__option:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
.mst-selector__option.is-selected { border-color: var(--c-primary); background: var(--c-primary-soft); }
.mst-selector__progress { display: flex; gap: 6px; margin-bottom: var(--s-4); }
.mst-selector__dot { width: 22px; height: 6px; border-radius: 999px; background: var(--c-border); }
.mst-selector__dot.is-active { background: var(--c-primary); }
.mst-selector__result { display: none; padding-top: var(--s-3); border-top: 1px solid var(--c-border); }
.mst-selector__result.is-active { display: block; }
.mst-selector__result h3 { margin-bottom: var(--s-2); }
/* "Start over"-Reset unter dem Ergebnis (QA 11.09.2026) */
.mst-selector__restart { margin-top: var(--s-3); margin-left: var(--s-2); }
@media (max-width: 599px) { .mst-selector__restart { margin-left: 0; display: block; } }

/* — Pain-solver cards row ————————————————————————————————— */
.mst-painrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); }
@media (max-width: 1000px) { .mst-painrow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .mst-painrow { grid-template-columns: 1fr; } }

/* — Overnight block ————————————————————————————————— */
.mst-overnight-block { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: var(--s-4); align-items: center; }
@media (max-width: 899px) { .mst-overnight-block { grid-template-columns: 1fr; } }
.mst-overnight-block h2 { margin-bottom: var(--s-3); }
.mst-overnight-block__intro p { color: rgba(255,255,255,0.85); }

/* — FAQ ————————————————————————————————— */
.mst-faq { display: flex; flex-direction: column; gap: var(--s-2); max-width: 820px; margin: 0 auto; }
.mst-faq__item {
    background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
}
.mst-faq__item summary {
    cursor: pointer; font-family: var(--f-serif); font-size: 1.1rem; font-weight: 600;
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
}
.mst-faq__item summary::after { content: '+'; font-size: 1.5rem; color: var(--c-primary); flex-shrink: 0; }
.mst-faq__item[open] summary::after { content: '−'; }
.mst-faq__item p { margin-top: var(--s-3); color: var(--c-ink-soft); }

/* — Closing / sticky bar ————————————————————————————————— */
.mst-closing {
    background: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary));
    color: #fff; text-align: center; padding: var(--s-6) 0;
}
.mst-closing h2 { color: #fff; margin-bottom: var(--s-2); }
.mst-closing p { color: rgba(255,255,255,0.9); margin-bottom: var(--s-4); }

.mst-stickybar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
    background: var(--c-ink); color: #fff;
    padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
    display: none !important; flex-direction: row !important; flex-wrap: nowrap;
    align-items: center; gap: var(--s-3); box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
}
@media (max-width: 899px) {
    .mst-stickybar { display: flex !important; }
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
.mst-stickybar__label { font-size: 0.85rem; flex: 1; color: rgba(255,255,255,0.9); }
.mst-stickybar__cta { flex-shrink: 0; }

/* — Footer ————————————————————————————————— */
.mst-footer { background: var(--c-ink); color: rgba(255,255,255,0.85); padding: var(--s-6) 0 var(--s-4); margin-top: var(--s-6); }
.mst-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--s-5);
    margin-bottom: var(--s-5);
    align-items: start;
}
@media (max-width: 999px) { .mst-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .mst-footer__grid { grid-template-columns: 1fr; gap: var(--s-4); } }

.mst-footer__brand-mark { display: flex; align-items: center; gap: var(--s-2); }
.mst-footer__brand-mark .mst-brand__mark { color: var(--c-primary); font-size: 1.4rem; }
.mst-footer__brand strong { color: #fff; font-family: var(--f-serif); font-size: 1.1rem; }
.mst-footer__tagline { margin-top: var(--s-3); font-size: 0.9rem; color: rgba(255,255,255,0.7); max-width: 320px; line-height: 1.55; }

.mst-footer__heading {
    color: #fff; font-family: var(--f-serif); font-size: 0.95rem; font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 var(--s-3); padding-bottom: var(--s-2);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.mst-footer__heading--sub { margin-top: var(--s-4); }

.mst-footer__col ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: var(--s-1);
}
.mst-footer__col li { line-height: 1.5; }
.mst-footer__col a {
    color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.9rem;
    display: block; padding: 3px 0;
    transition: color .12s, transform .12s;
}
.mst-footer__col a:hover { color: #fff; transform: translateX(2px); }

.mst-footer__meta {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: var(--s-4);
    text-align: center;
}
.mst-footer__affiliate { font-size: 0.85rem; color: rgba(255,255,255,0.6); max-width: 700px; margin: 0 auto var(--s-2); line-height: 1.55; }
.mst-footer__copy { font-size: 0.85rem; color: rgba(255,255,255,0.5); margin: 0; }

/* — About / operator transparency page — */
.mst-about__intro { font-size: 1.075rem; line-height: 1.65; color: var(--c-muted); margin: 0 0 var(--s-4); }
.mst-about p { line-height: 1.75; }
.mst-about a { word-break: break-word; }

/* ── Vergleichskarten (Overnight: Mariner vs. Jewel) ──────────────────────
   Zwei Karten nebeneinander, deren Aufzählungen unterschiedlich lang sind.
   Ohne Zutun endet jede Karte, wo ihr Text endet — und die Buchungsknöpfe
   stehen auf verschiedenen Höhen, was den direkten Vergleich genau an der
   Stelle bricht, an der er zählt.

   Deshalb: Karte als Flex-Spalte auf volle Rasterhöhe, die Liste nimmt den
   Rest, der Knopf wird nach unten geschoben. Chip, Überschrift und der
   Listenanfang stehen dadurch von selbst auf einer Linie. */
.mst-grid--2 > .mst-card--overnight {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.mst-grid--2 > .mst-card--overnight > ul {
    flex: 1 1 auto;
    margin-bottom: var(--s-3);
}
.mst-grid--2 > .mst-card--overnight > .mst-btn {
    margin-top: auto;
}

/* — Reviews (echte GYG-Reviews, Welle 2) —————————————————————————
   Karten-Raster für partials/_reviews.php. Kritische Reviews (≤ 3★)
   liegen auf der Cream-Farbwelt (--c-warm), die 5★-Karten auf Weiß mit
   Eisblau-Rahmen — beide Welten aus den :root-Variablen. */
.mst-reviews {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3); margin-top: var(--s-4); align-items: start;
}
@media (max-width: 999px) { .mst-reviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .mst-reviews { grid-template-columns: 1fr; } }
.mst-review {
    background: var(--c-bg); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: var(--s-4); margin: 0;
    box-shadow: 0 1px 0 var(--c-border);
}
.mst-review--critical { background: var(--c-warm); border-color: var(--c-warm-dark); box-shadow: none; }
.mst-review__stars { color: var(--c-star); letter-spacing: 2px; font-size: 0.95rem; margin-bottom: var(--s-2); }
.mst-review__text { margin: 0 0 var(--s-3); font-size: 0.95rem; line-height: 1.65; color: var(--c-ink); }
.mst-review__meta { font-size: 0.85rem; color: var(--c-ink-soft); line-height: 1.5; }
.mst-review__meta strong { color: var(--c-ink); }
.mst-review__tour { display: block; margin-top: var(--s-1); font-size: 0.8rem; color: var(--c-ink-soft); }
.mst-reviews__note {
    text-align: center; font-size: 0.85rem; color: var(--c-ink-soft);
    margin: var(--s-4) auto 0; max-width: 700px;
}

/* — Finnisch-Lappland-Block (29.09.2026) —
   Eigener Block unter den Footer-Spalten, bewusst vom Tromsø-Netzwerk
   getrennt: anderes Reiseziel, eigene Überschrift. */
.mst-footer__cross {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: var(--s-4);
    margin-bottom: var(--s-4);
}
.mst-footer__crosssub {
    font-size: 0.85rem; color: rgba(255,255,255,0.6);
    margin: var(--s-1) 0 var(--s-2); line-height: 1.55;
}
.mst-footer__crosslist {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
}
.mst-footer__crosslist a {
    color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.9rem;
    display: block; padding: 3px 0;
    transition: color .12s, transform .12s;
}
.mst-footer__crosslist a:hover { color: #fff; transform: translateX(2px); }

/* — Unterseiten: kompakter Hero + Schnellauswahl above the fold (05.10.2026) —
   Vorlage Milford-Sound-Tours.com. Vorher 52vh Bild, dann Fließtext: auf dem
   Handy war im ersten Bildschirm nichts anzuklicken. Jetzt: kurzer Hero,
   darunter ein weißer Kasten mit den buchbaren Touren der Seite, der in den
   Hero hineinragt. Markup: partials/_quick-picks.php. */
.mst-hero--page {
    min-height: 0;
    padding: 44px 0 40px;
    background-position: center;
    background-size: cover;
}
.mst-hero--page.mst-hero--with-qp { padding-bottom: 84px; }
.mst-hero--page .mst-container { width: 100%; }
.mst-hero--page .mst-hero__title { margin-top: var(--s-2) !important; margin-bottom: var(--s-2); font-size: clamp(1.8rem, 4vw, 2.9rem); }
.mst-hero--page .mst-hero__sub { margin-bottom: 0; font-size: 1.05rem; }
@media (max-width: 899px) {
    .mst-hero--page { min-height: 0; padding: 22px 0 22px; }
    .mst-hero--page.mst-hero--with-qp { padding-bottom: 64px; }
    .mst-hero--page .mst-hero__title { font-size: 1.7rem; }
    .mst-hero--page .mst-hero__sub { font-size: 0.95rem; line-height: 1.45;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

.mst-qp { position: relative; z-index: 2; margin-top: -60px; margin-bottom: var(--s-2); }
.mst-qp__box {
    background: #fff; color: var(--c-ink);
    border-radius: var(--r-lg);
    box-shadow: 0 14px 36px rgba(28,32,68,0.16), 0 1px 0 var(--c-border);
    padding: var(--s-3) var(--s-4) var(--s-2);
}
.mst-qp__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-1); }
.mst-qp__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-soft); }
.mst-qp__tabs { display: inline-flex; background: var(--c-muted); border: 1px solid var(--c-border); border-radius: 999px; padding: 3px; gap: 2px; }
.mst-qp__tab {
    padding: 6px 14px; border-radius: 999px; font-size: 0.9rem; font-weight: 600;
    color: var(--c-ink-soft); text-decoration: none; white-space: nowrap;
}
.mst-qp__tab.is-active { background: var(--c-primary); color: #fff; }
.mst-qp__tab:hover { color: var(--c-ink); }
.mst-qp__tab.is-active:hover { color: #fff; }
.mst-qp__panelabel { display: none; }
/* Ohne JS stehen alle Reiter untereinander, jeweils mit Zwischenüberschrift. */
.mst-qp__box:not(.is-js) [data-mst-pane] .mst-qp__panelabel { display: block; margin: var(--s-3) 0 0; font-weight: 700; font-size: 0.9rem; color: var(--c-primary-dark); }
.mst-qp__box.is-js [data-mst-pane]:not(.is-active) { display: none; }
.mst-qp__row {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; align-items: center;
    gap: var(--s-2) var(--s-4);
    padding: 12px 0; border-top: 1px solid var(--c-border);
}
.mst-qp__pane .mst-qp__row:first-of-type { border-top: 0; }
.mst-qp__img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); background: var(--c-primary-soft); }
.mst-qp__info { display: flex; flex-direction: column; min-width: 0; }
.mst-qp__op { font-size: 0.8rem; color: var(--c-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mst-qp__name { font-weight: 600; color: var(--c-ink); line-height: 1.3; }
.mst-qp__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.mst-qp__rating { font-size: 0.85rem; color: var(--c-ink-soft); }
.mst-qp__rating strong { color: var(--c-star); }
.mst-qp__price { font-weight: 700; color: var(--c-ink); }
.mst-qp__btn { padding: 10px 16px; white-space: nowrap; }
.mst-qp__foot { border-top: 1px solid var(--c-border); padding: 10px 0 6px; text-align: center; }
.mst-qp__more { font-weight: 600; color: var(--c-primary-dark); text-decoration: none; }
.mst-qp__more:hover { text-decoration: underline; }

/* Genau eine Tour auf der Seite: großer Einzel-Kasten statt einer einsamen
   Zeile — mit Dauer und Storno, breiterem Bild und kräftigem Knopf. */
.mst-qp--single .mst-qp__row { grid-template-columns: 120px minmax(0, 1fr) auto auto; padding: 14px 0; }
.mst-qp--single .mst-qp__img { width: 120px; height: 96px; }
.mst-qp--single .mst-qp__name { font-size: 1.12rem; }
.mst-qp__facts { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.86rem; color: var(--c-ink-soft); }
.mst-qp__facts li { margin: 2px 0; }
.mst-qp__cancel { color: var(--c-success, #1f7a4d); }
.mst-qp--single .mst-qp__price { font-size: 1.15rem; }
.mst-qp--single .mst-qp__btn { padding: 12px 22px; }

@media (max-width: 899px) {
    .mst-qp { margin-top: -46px; }
    .mst-qp .mst-container { padding: 0 12px; }
    .mst-qp__box { padding: 12px 14px 4px; border-radius: var(--r-md); }
    .mst-qp__head { gap: var(--s-2); }
    .mst-qp__tabs { width: 100%; }
    .mst-qp__tab { flex: 1 1 auto; min-width: 0; text-align: center; padding: 6px 6px; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; }
    .mst-qp__row { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "img info info" "img meta btn"; gap: 6px 12px; padding: 10px 0; align-items: start; }
    .mst-qp__img { grid-area: img; width: 64px; height: 64px; margin-top: 2px; }
    .mst-qp__info { grid-area: info; }
    .mst-qp__meta { grid-area: meta; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
    .mst-qp__btn { grid-area: btn; align-self: end; padding: 8px 14px; font-size: 0.95rem; }
    .mst-qp__name { font-size: 0.97rem; }
    /* Einzel-Tour am Handy: Bild + Text oben, Preis links, Knopf über die volle Breite. */
    .mst-qp--single .mst-qp__row { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "img info" "meta meta" "btn btn"; }
    .mst-qp--single .mst-qp__img { width: 84px; height: 84px; }
    .mst-qp--single .mst-qp__meta { flex-direction: row; align-items: baseline; justify-content: space-between; width: 100%; }
    .mst-qp--single .mst-qp__btn { width: 100%; padding: 12px 16px; font-size: 1rem; }
    .mst-qp--single .mst-qp__name { font-size: 1.02rem; }
    .mst-qp__facts { font-size: 0.82rem; }
}
.mst-anchor { display: block; position: relative; top: -80px; visibility: hidden; }


/* — Vorlage northern-lights-tromso.com (Bauwelle 1, 06.10.2026), übernommen für marrakech-sahara.com ————————————————— */

/* Wortmarke, solange kein Logo-Bild liegt */
.mst-brand__mark { color: var(--c-primary); }
.mst-brand__name { color: var(--c-ink); }
.mst-footer__brand-mark .mst-brand__mark { color: var(--c-aurora); }
.mst-nav__mobile-link { display: block; padding: 12px 0; font-weight: 600; color: var(--c-ink); text-decoration: none; border-top: 1px solid var(--c-border); }

/* Startseite: Hero mit Schnellauswahl darunter — kompakter als der
   Vorlagen-Hero, damit buchbare Touren im ersten Bildschirm stehen. */
.mst-hero--home.mst-hero--with-qp { min-height: 0; padding: clamp(56px, 9vw, 110px) 0 110px; }
@media (max-width: 899px) {
    .mst-hero--home.mst-hero--with-qp { min-height: 0; padding: 36px 0 80px; }
    .mst-hero--home .mst-hero__sub { font-size: 1rem; }
}
.mst-hero__kicker { display: inline-block; color: var(--c-aurora); font-weight: 600; letter-spacing: 0.02em; margin-bottom: var(--s-2); }

/* Storno: nicht erstattbare Angebote sichtbar markieren */
.mst-product__cancel { margin: var(--s-2) 0 0; font-size: 0.92rem; color: var(--c-success); }
.mst-product__cancel--none,
.mst-qp__cancel--none,
.mst-compare__nonref { color: var(--c-danger); font-weight: 600; }
.mst-qp__nonref {
    display: inline-block; margin-top: 2px; font-size: 0.75rem; font-weight: 700;
    color: var(--c-danger); background: #fdecea; border-radius: var(--r-sm); padding: 1px 6px;
}
.mst-compare__nonref { white-space: nowrap; }

/* Tabelle: Anbieter unter dem Tournamen, Regel-Zelle */
.mst-compare__op { display: block; color: var(--c-ink-soft); font-weight: 400; font-size: 0.82rem; margin-top: 2px; }
.mst-compare__cell--rule small { display: block; color: var(--c-ink-soft); font-size: 0.8rem; line-height: 1.35; margin-top: 4px; max-width: 30ch; }
.mst-rule {
    display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 2px 8px;
    border-radius: 999px; background: var(--c-warm); color: var(--c-ink); white-space: nowrap;
}
.mst-rule--retry, .mst-rule--refund { background: var(--c-primary-soft); color: #5e3209; }
.mst-rule--discount { background: #fff4d6; color: #7a4b00; }
.mst-rule--none { background: var(--c-warm); color: var(--c-ink); }
.mst-rule--standard { background: var(--c-muted); color: var(--c-ink-soft); }
.mst-rule--unknown { background: transparent; color: var(--c-ink-soft); font-weight: 600; padding-left: 0; }

/* Segment-Karten der Startseite */
.mst-seg__tag {
    align-self: flex-start; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--c-primary); margin-bottom: var(--s-2);
}
.mst-card--seg ul { margin: var(--s-2) 0 var(--s-3); padding-left: 1.1em; color: var(--c-ink-soft); font-size: 0.92rem; }
.mst-card--seg li { margin-bottom: 4px; }
.mst-card--seg { border-top: 4px solid var(--c-primary); }
.mst-card--seg .mst-card__body { display: flex; flex-direction: column; height: 100%; }
.mst-card--seg .mst-card__cta { margin-top: auto; }

/* Typen-Vergleich auf /tour-comparison/ (Bus · Minibus · Premium) */
.mst-typegrid { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-6); font-size: 0.95rem; background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 1px 0 var(--c-border); }
.mst-typegrid th, .mst-typegrid td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--c-border); }
.mst-typegrid thead th { background: var(--c-primary-dark); color: #fff; font-weight: 600; }
.mst-typegrid tbody th { width: 22%; color: var(--c-ink); font-weight: 600; background: var(--c-muted); }
@media (max-width: 699px) {
    .mst-typegrid thead { display: none; }
    .mst-typegrid, .mst-typegrid tbody, .mst-typegrid tr, .mst-typegrid th, .mst-typegrid td { display: block; width: 100%; }
    .mst-typegrid tr { margin-bottom: var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
    .mst-typegrid tbody th { background: var(--c-primary-dark); color: #fff; }
    .mst-typegrid td::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-primary); margin-bottom: 2px; }
}

/* Saison-Teaser */
.mst-season-teaser { background: var(--hero-sky); color: #fff; border-radius: var(--r-lg); padding: var(--s-5) var(--s-4); }
.mst-season-teaser h2 { color: #fff; }
.mst-season-teaser p { color: rgba(255,255,255,0.9); }
.mst-season-teaser .mst-fact { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.mst-season-teaser .mst-fact__num { color: var(--c-aurora); }
.mst-season-teaser .mst-fact__label { color: rgba(255,255,255,0.85); }

.mst-btn--on-dark { color: #fff; border-color: rgba(255,255,255,0.55); }
.mst-btn--on-dark:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Entscheidung in drei Spalten (Pilotseite /tour-comparison/) */
.mst-versus--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 899px) { .mst-versus--3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Ruhigere Gestaltung (06.10.2026) — typische Muster generierter Seiten
   zurückgenommen: keine Akzentleisten an Boxen und Karten, keine Icon-Kreise
   in Hinweisboxen, Chips als schlichte Textlabels, Hero-Kennzahlen als
   Textzeile statt Zahlenbanner, Abschlussband ohne Verlauf.
   ========================================================================== */
.mst-callout {
    border-left: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm, 6px);
    background: var(--c-muted);
    padding: var(--s-3) var(--s-4);
}
.mst-callout--tip, .mst-callout--warn, .mst-callout--info { background: var(--c-muted); border-color: var(--c-border); }
.mst-callout__icon { display: none; }
.mst-callout__body strong { font-family: var(--f-sans); font-size: 1rem; }
.mst-fact, .mst-season, .mst-card--operator-text { border-top-width: 1px; border-top-color: var(--c-border); }
.mst-chip {
    background: none; border: 0; padding: 0; border-radius: 0;
    font-size: 0.85rem; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--c-ink-soft);
}
.mst-hero .mst-chip, .mst-overnight-block .mst-chip, .mst-hero--compact .mst-chip { color: rgba(255,255,255,0.85); }
.mst-card .mst-chip { color: var(--c-ink-soft); }
.mst-hero__stats { gap: var(--s-4); }
.mst-hero__stat strong {
    display: inline; font-family: var(--f-sans); font-size: 1rem; font-weight: 700; margin: 0 0.25em 0 0;
}
.mst-closing { background: var(--c-primary-dark); }
.mst-qp__label { letter-spacing: 0; text-transform: none; font-size: 0.9rem; }
/* Kontrast (06.10.2026): Bewertungszahlen und Sterne in dunklerem Bernstein, damit kleiner Text auf Weiß WCAG AA erreicht. */
.mst-qp__rating strong, .mst-product__rating strong, .mst-compare__rating strong { color: #a85a05; }
.mst-review__stars { color: #b45309; }

/* — marrakech-sahara.com (Bauwelle 1, 10.10.2026) ————————————————— */
/* Fakten-Labels der Produktkarte ohne <strong> (KI-Regel: Fett-Labels nur
   in einer Liste je Seite) — gedämpfte Farbe statt Fettdruck. */
.mst-product__factlabel { color: var(--c-ink-soft); font-weight: 500; }
/* Optionsraster der Pilotseite: Kurzname unter dem Anbieter. */
.mst-typegrid tbody th small { display: block; font-weight: 400; color: var(--c-ink-soft); margin-top: 2px; }
@media (max-width: 699px) { .mst-typegrid tbody th small { color: rgba(255,255,255,0.8); } }

/* QA Patrick 11.10.2026 — Optionsreiter als klare Knöpfe, Tabellenkopf ohne
   Umbruch, mehr Luft in den Vergleichstabellen. */
.mst-qp__tabs { background: none; border: 0; padding: 0; gap: 8px; flex-wrap: wrap; }
.mst-qp__tab {
    background: #fff; border: 2px solid var(--c-primary); color: var(--c-primary);
    padding: 7px 16px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.mst-qp__tab:hover { background: var(--c-muted); color: var(--c-primary-dark); }
.mst-qp__tab.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: none; }
.mst-qp__tab:focus-visible { outline: 3px solid var(--c-primary-dark); outline-offset: 2px; }
.mst-compare__table th[data-sort] { white-space: nowrap; }
@media (min-width: 900px) {
    .mst-compare__table td, .mst-compare__table th { padding-left: 14px; padding-right: 14px; }
    .mst-compare__table td:not(.mst-compare__cell--img):not(.mst-compare__cta):not(.mst-compare__cell--price) { min-width: 9.5rem; }
    .mst-compare__table .mst-compare__cell--tour { min-width: 15rem; }
}
@media (max-width: 640px) {
    .mst-qp__tabs { gap: 6px; }
    .mst-qp__tab { padding: 7px 10px; }
}

/* QA Patrick 11.10.2026 — Entscheidungs-Kacheln mit konkreten Touren
   (mst_pick_html() in _bootstrap.php). */
.mst-decide { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin: var(--s-4) 0 var(--s-6); }
@media (max-width: 699px) { .mst-decide { grid-template-columns: 1fr; } }
.mst-decide__item { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-4); display: flex; flex-direction: column; }
.mst-decide__item h3 { margin: 0 0 var(--s-2); font-size: 1.15rem; }
.mst-decide__item > p { margin: 0 0 var(--s-3); color: var(--c-ink-soft); }
.mst-pick { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: var(--s-3); }
.mst-pick__tour { display: flex; flex-direction: column; gap: 2px; padding-top: var(--s-3); border-top: 1px solid var(--c-border); }
.mst-pick__name { font-weight: 700; color: var(--c-ink); line-height: 1.3; }
.mst-pick__op { color: var(--c-ink-soft); }
.mst-pick__note { font-size: 0.92rem; }
.mst-pick__live { font-size: 0.92rem; color: var(--c-ink-soft); }
.mst-pick__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }
.mst-pick__btn { padding: 8px 16px; font-size: 0.95rem; }
.mst-pick__more { font-weight: 600; }
.mst-card--seg ul.mst-pick { margin: auto 0 0; padding-left: 0; color: inherit; font-size: 1rem; }
.mst-card--seg:hover { transform: none; }
.mst-card--seg .mst-card__link { display: inline-block; margin-top: var(--s-3); font-weight: 600; }

/* QA 12.10.2026: Hinweis-Kasten („Gut zu wissen") als ruhiges Raster aus Einzelpunkten.
   Die Listen tragen teils Inline-Styles, daher !important nur für Abstand/Listenform. */
.mst-callout { padding: var(--s-4); border-radius: 14px; }
.mst-callout__body > h2 { font-size: 1.35rem !important; margin: 0 0 var(--s-3) !important; }
.mst-callout__body > ul {
    list-style: none; margin: 0 !important; padding: 0 !important;
    display: grid; gap: 12px; color: var(--c-ink-soft);
}
.mst-callout__body > ul > li {
    margin: 0; padding: 14px 16px 14px 18px; background: #fff;
    border: 1px solid var(--c-border); border-left: 3px solid var(--c-primary);
    border-radius: 10px; font-size: 0.95rem; line-height: 1.55;
}
.mst-callout__body > ul > li::before { content: none; }
.mst-callout__body > ul > li > strong:first-child {
    display: block; margin-bottom: 4px; color: var(--c-ink);
    font-family: var(--f-serif); font-size: 1.05rem; line-height: 1.3;
}
@media (min-width: 900px) {
    .mst-callout__body > ul { grid-template-columns: 1fr 1fr; }
    .mst-callout__body > ul > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Mobile Kartenansicht der Vergleichstabelle (14.10.2026): Preis mit „per person“
   in einer Zeile, Bewertung zusammen, Buchungsbutton kompakt und zentriert ohne Label. */
@media (max-width: 699px) {
    .mst-compare__table td.mst-compare__cta { justify-content: center; text-align: center; }
    .mst-compare__table td.mst-compare__cta::before { display: none; }
    .mst-compare__table td.mst-compare__cta .mst-btn { display: inline-block; width: auto; min-width: 11em; padding: 10px 28px; }
    .mst-compare__table td.mst-compare__cell--price,
    .mst-compare__table td[data-key="reviews"] { align-items: center; }
    .mst-compare__table td.mst-compare__cell--price small { display: inline; margin: 0 0 0 0.35em; }
}