/* ============================================================
   favela-tours.com — style.css
   Component classes listed in /components.md — do not add ad-hoc.
   Farbwelt: Ziegel/Terrakotta der Hangbebauung, Grün der Hügel,
   dunkles Blau als Grundton. Ruhig, keine Farbexplosion.
   ============================================================ */

:root {
    /* Colours — dark blue as the base, brick terracotta for buttons and
       links, the green of Rio's hills for small accents on dark ground and
       for "free cancellation". Calm on purpose: no colour burst.
       WCAG AA (10.10.2026, gemessen): white on --c-primary 6.3:1 ·
       --c-primary on --c-muted 5.7:1 · --c-ink on white 14.3:1 ·
       --c-ink-soft on --c-muted 6.4:1 · --c-hill on --c-ink 8.7:1 ·
       white on --c-primary-dark 11.7:1 · --c-success on white 6.4:1. */
    --c-ink: #1d2b3d;
    --c-ink-soft: #4f5a66;
    --c-bg: #ffffff;
    --c-primary: #a3412a;
    --c-primary-dark: #243a52;
    --c-primary-soft: #f7e6de;
    --c-warm: #f4ece2;
    --c-warm-dark: #e6d6c3;
    --c-muted: #f7f4ef;
    --c-border: #e5ddd1;
    --c-star: #d97706;
    --c-danger: #b4231f;
    --c-success: #2f6b3f;
    --c-hill: #a8d5a2;
    /* Hero-Grund ohne Foto: dunkles Blau, nach unten ins Hügelgrün. */
    --hero-sky: linear-gradient(180deg, #1d2b3d 0%, #22384a 65%, #2a4a37 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(29,43,61,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(29,43,61,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(29,43,61,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(29,43,61,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(29,43,61,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(163, 65, 42, 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; padding-right: 0; }
.mst-compare__img { width: 96px; height: 64px; object-fit: cover; border-radius: var(--r-sm); }
.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(29,43,61,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; }


/* — Site-Ergänzungen (aus northern-lights-tromso.com, Bauwelle 1) ————————— */

/* 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-hill); }
.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: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.35); 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: var(--c-ink); }
.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-hill); }
.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; }


/* ==========================================================================
   favela-tours.com (Bauwelle 1, 10.10.2026)
   ========================================================================== */

/* Reisehinweis direkt unter dem Hero (Startseite + Pilot): schlichte Box,
   keine Akzentleiste, kein Icon, keine Warnfarbe. */
.mst-advisory { padding: var(--s-4) 0 0; }
.mst-advisory .mst-callout { margin: 0; background: #fff; }
.mst-advisory .mst-callout__body p { margin: 0 0 var(--s-2); color: var(--c-ink); }
.mst-advisory__links { margin: 0; padding-left: 1.1em; font-size: 0.92rem; }
.mst-advisory__links li { margin-bottom: 2px; }

/* Bewohner-Angabe in Tabelle und Karte: Text, keine Pille */
.mst-resident { font-weight: 600; color: var(--c-success); }
.mst-resident--none { font-weight: 400; color: var(--c-ink-soft); }

/* Kriterien-Raster der Startseite: Karten ohne Farbkante */
.mst-criteria { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin: var(--s-4) 0 0; }
.mst-criteria > div { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.mst-criteria h3 { font-size: 1.1rem; margin-bottom: var(--s-2); }
.mst-criteria p { margin: 0; color: var(--c-ink-soft); }
@media (max-width: 699px) { .mst-criteria { grid-template-columns: 1fr; } }

/* Favela-Abschnitte der Startseite */
.mst-area { padding: var(--s-4) 0; border-top: 1px solid var(--c-border); }
.mst-area:first-of-type { border-top: 0; }
.mst-area h3 { margin-bottom: var(--s-2); }
.mst-area p { color: var(--c-ink-soft); max-width: 70ch; }

/* Faktlabels der Produktkarten: hervorgehoben, aber kein <strong> (KI-Regel Fett-Labels) */
.mst-product__factlabel { font-weight: 600; color: var(--c-ink); margin-right: 4px; }

/* ==========================================================================
   QA 10.10.2026 (Patrick, Kaffee-Site) — gilt als Template-Regel für alle
   Südamerika-Sites. Bewusst als Override am Dateiende, damit es diffbar bleibt.
   ========================================================================== */

/* 1. Reiter der Schnellauswahl müssen sofort als Knöpfe erkennbar sein:
      jede Pille mit eigener Kontur, aktive Pille gefüllt, kein Abschneiden. */
.mst-qp__label { text-transform: none; letter-spacing: 0; font-size: 0.92rem; font-weight: 600; color: var(--c-ink); }
.mst-qp__tabs { background: transparent; border: 0; padding: 0; gap: 8px; flex-wrap: wrap; }
.mst-qp__tab {
    border: 1.5px solid var(--c-primary); background: #fff; color: var(--c-primary);
    padding: 7px 16px; cursor: pointer;
}
.mst-qp__tab:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.mst-qp__tab.is-active, .mst-qp__tab.is-active:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
@media (max-width: 699px) {
    .mst-qp__tabs { width: 100%; }
    .mst-qp__tab { flex: 0 1 auto; white-space: normal; overflow: visible; text-overflow: clip; padding: 6px 12px; font-size: 0.86rem; }
}

/* 2. Vergleichstabelle: Kopf ohne Versalien und ohne Umbruch (Sortierpfeil
      bleibt neben dem Wort), Fotospalte mit fester Breite, ruhigere Zeilen. */
.mst-compare__table th { text-transform: none; letter-spacing: 0; white-space: nowrap; font-size: 0.86rem; }
.mst-compare__table td { line-height: 1.4; vertical-align: middle; }
.mst-compare__cell--img { width: 112px; min-width: 112px; }
.mst-compare__img, .mst-compare__img-fallback { width: 96px; min-width: 96px; max-width: none; height: 64px; }
.mst-compare__cell--tour { min-width: 190px; }
.mst-compare__cell--price, .mst-compare__cta { white-space: nowrap; }
@media (max-width: 699px) {
    .mst-compare__cell--img, .mst-compare__img { min-width: 0; }
}

/* 3. Ruhiges Design: keine Akzentleiste vor Überschriften. */
.mst-planning h2::before { content: none; display: none; }

/* favela-tours.com, QA 10.10.2026 (Regel A): Kurzwerte der Info-Spalten
   bleiben ab Desktop-Breite einzeilig; umbrechen darf nur die Tour-Spalte
   (Name + Anbieter). Voraussetzung: Kurzfelder ≤ 25 Zeichen im Datenblatt. */
@media (min-width: 1100px) {
    .mst-compare__table th, .mst-compare__table td { padding-left: 10px; padding-right: 10px; }
    .mst-compare__table td:not(.mst-compare__cell--tour) { white-space: nowrap; }
}

/* Reisehinweis, QA 10.10.2026: kompakt, nicht von der Schnellauswahl überdeckt. */
.mst-advisory { padding: var(--s-4) 0 0; }
.mst-advisory__box { background: var(--c-primary-soft); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); color: var(--c-ink); }
.mst-advisory__lead { margin: 0 0 4px; font-size: 1rem; }
.mst-advisory__title { font-weight: 700; margin-right: 6px; }
.mst-advisory__links { margin: 0; padding: 0; font-size: 0.92rem; color: var(--c-ink-soft); }
.mst-advisory__more { margin-top: var(--s-2); font-size: 0.92rem; }
.mst-advisory__more summary { cursor: pointer; color: var(--c-primary); font-weight: 600; }
.mst-advisory__more p { margin: var(--s-2) 0 0; }
.mst-advisory ~ .mst-qp, .mst-advisory + * .mst-qp { margin-top: var(--s-4); }

/* QA 10.10.2026, Regel D: Startseiten-Tabellen nach Kategorie gegliedert,
   je Gruppe eine h3 und eine kleine Tabelle (höchstens 6 Zeilen). */
.mst-compare-group { margin-top: var(--s-5); }
.mst-compare-group:first-of-type { margin-top: var(--s-4); }
.mst-compare-group__title { font-size: clamp(1.1rem, 1.8vw, 1.3rem); margin: 0 0 var(--s-2); }
.mst-compare-group__more { margin: var(--s-2) 0 0; }

/* Reisehinweis, Nachprüfung 10.10.2026 (Screenshots 1366/390): Zeilenlänge
   begrenzen, damit der Text auf breiten Bildschirmen gut lesbar bleibt. */
.mst-advisory__lead, .mst-advisory__links, .mst-advisory__more { max-width: 82ch; }

/* Welle 2 (10.10.2026): Live-Preisspanne je Favela auf /favela-tour-prices/ */
.mst-compare-group__range { margin: 0 0 var(--s-2); color: var(--c-ink-soft); font-size: 0.95rem; }
.mst-compare-group__lead { margin: 0 0 var(--s-2); }

/* ==========================================================================
   Live-Check 11.10.2026 (_batch/live-check-2026-10-11-visuell.md), auf allen
   sechs Südamerika-Sites gleich. Bewusst als Override am Dateiende.
   ========================================================================== */

/* N4. Schnellauswahl-Reiter: Panes 2 ff. tragen schon im HTML `hidden`, damit
       beim Start von site.js nichts springt. Die Zwischenüberschriften je Pane
       zeigt nur noch die noscript-Regel in head.php. */
.mst-qp__pane[hidden] { display: none; }   /* (Grundregel [hidden] mit !important steht oben; die noscript-Regel in head.php hebt sie auf.) */
.mst-qp__box:not(.is-js) [data-mst-pane] .mst-qp__panelabel { display: none; }

/* N2. Schnellauswahl mobil: Preis und Knopf bleiben immer ganz sichtbar.
       Lange Formate („a partir de US$ 80") brechen nach dem Präfix um, der
       Betrag selbst bleibt zusammen; die Meta-Spalte ist mindestens so breit
       wie ihr längstes Stück. Unter 360 px steht der Knopf in voller Breite
       unter dem Preis. */
@media (max-width: 899px) {
    .mst-qp__row { grid-template-columns: 64px 1fr auto; }
    .mst-qp__info { min-width: 0; }
    .mst-qp__meta { white-space: normal; min-width: auto; }
    .mst-qp__rating, .mst-qp__price [data-mst-price] { white-space: nowrap; }
    .mst-qp__price { line-height: 1.25; }
    .mst-qp--single .mst-qp__row { grid-template-columns: 84px minmax(0, 1fr); }
    .mst-qp--single .mst-qp__meta { flex-wrap: wrap; gap: 2px 12px; }
}
@media (max-width: 359px) {
    .mst-qp__row { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "img info" "img meta" "btn btn"; }
    .mst-qp__btn { width: 100%; text-align: center; }
}

/* N6. Hero-Untertitel mobil vollständig zeigen, nicht nach zwei Zeilen mit „…". */
@media (max-width: 899px) {
    .mst-hero--page .mst-hero__sub { display: block; -webkit-line-clamp: unset; overflow: visible; }
}

/* N5. Überschriften mit Domainnamen („About colombiacoffeetours.com") dürfen
       mobil innerhalb des Worts umbrechen, statt die Seite zu verbreitern. */
h1, h2, h3 { overflow-wrap: break-word; }
.mst-about h1, .mst-about h2, .mst-legal h1, .mst-legal h2 { overflow-wrap: anywhere; }

/* N3. Vergleichstabelle am Desktop: nur Kurzwerte bleiben einzeilig
       (Bewertung, Preis, Buchungsknopf), Info-Zellen und Spaltenköpfe dürfen
       umbrechen. Der Sortierpfeil hängt per &nbsp; am Wort. So passt die
       Tabelle bei 1200 px Inhaltsbreite auch in DE/FR/NL/PT ohne Scrollen,
       und der Knopf wird nie angeschnitten. Selektor bewusst spezifisch, er
       muss die älteren nowrap-Regeln der einzelnen Sites schlagen (daher die
       doppelte Klasse .mst-compare__table.mst-compare__table). */
@media (min-width: 700px) {
    .mst-compare > .mst-compare__table.mst-compare__table > thead > tr > th { white-space: normal; vertical-align: bottom; }
    .mst-compare > .mst-compare__table.mst-compare__table > thead > tr > th[data-sort] { white-space: nowrap; }
    .mst-compare > .mst-compare__table.mst-compare__table > tbody > tr > td { white-space: normal; }
    .mst-compare > .mst-compare__table.mst-compare__table > tbody > tr > td[data-key],
    .mst-compare > .mst-compare__table.mst-compare__table > tbody > tr > td.mst-compare__cta,
    .mst-compare > .mst-compare__table.mst-compare__table > tbody > tr > td .mst-fee { white-space: nowrap; }
    .mst-compare .mst-compare__cell--tour { min-width: 10.5em; }
    .mst-compare .mst-compare__nonref { white-space: normal; }
}
@media (min-width: 900px) {
    /* Ab Desktop braucht die Tabelle keine Mindestbreite mehr. */
    .mst-compare > .mst-compare__table.mst-compare__table { min-width: 0; }
    .mst-compare > .mst-compare__table.mst-compare__table > * > tr > th,
    .mst-compare > .mst-compare__table.mst-compare__table > * > tr > td { padding-left: 10px; padding-right: 10px; }
    /* Viele Spalten (ab neun): engere Zellen, kleineres Foto. */
    .mst-compare > .mst-compare__table.mst-compare__table:has(> thead > tr > th:nth-child(9)) > * > tr > th,
    .mst-compare > .mst-compare__table.mst-compare__table:has(> thead > tr > th:nth-child(9)) > * > tr > td { padding-left: 8px; padding-right: 8px; font-size: 0.9rem; }
    .mst-compare > .mst-compare__table.mst-compare__table:has(> thead > tr > th:nth-child(9)) .mst-compare__cell--img { width: 88px; min-width: 88px; }
    .mst-compare > .mst-compare__table.mst-compare__table:has(> thead > tr > th:nth-child(9)) .mst-compare__img,
    .mst-compare > .mst-compare__table.mst-compare__table:has(> thead > tr > th:nth-child(9)) .mst-compare__img-fallback { width: 80px; min-width: 80px; height: 54px; }
    .mst-compare > .mst-compare__table.mst-compare__table:has(> thead > tr > th:nth-child(9)) .mst-compare__cta .mst-btn { padding: 6px 10px; }
}

/* 4. Mobil darf keine Tabelle die Seite verbreitern. Die kleine Tabelle
      Gewicht/Mindestalter (paraglidinginmedellin.com) bricht um und scrollt
      notfalls im eigenen Rahmen; die Wandertabelle El Chaltén
      (elcalafatedaytours.com) bricht auch in den Spaltenköpfen um. */
@media (max-width: 699px) {
    .mst-compare:has(> .mst-compare__table--limits) { overflow-x: auto; padding-left: 12px; padding-right: 12px; }
    .mst-compare > .mst-compare__table.mst-compare__table--limits > * > tr > th,
    .mst-compare > .mst-compare__table.mst-compare__table--limits > * > tr > td { white-space: normal; overflow-wrap: break-word; hyphens: auto; }
    .mst-compare > .mst-compare__table.mst-compare__table--limits > * > tr > td.mst-compare__cell--tour { min-width: 0; }
    .mst-compare > .mst-compare__table.mst-compare__table--limits > * > tr > th,
    .mst-compare > .mst-compare__table.mst-compare__table--limits > * > tr > td { padding-left: 6px; padding-right: 6px; }
    .mst-compare > .mst-compare__table.mst-compare__table--limits > thead > tr > th { font-size: 0.78rem; }
    .mst-facttable { max-width: 100%; }
    .mst-facttable thead th, .mst-facttable th, .mst-facttable td { white-space: normal; overflow-wrap: break-word; hyphens: auto; }
    .mst-facttable--walks thead th { white-space: normal; }
    .mst-facttable--walks th, .mst-facttable--walks td { padding: 8px 6px; }
}

/* ==========================================================================
   Nachscan 11.10.2026 (_batch/live-check-2026-10-11-nachscan.md, B1 bis B3),
   auf allen sechs Südamerika-Sites gleich. Bewusst als Override am Dateiende.
   ========================================================================== */

/* B3. Schriften liegen auf der eigenen Domain (assets/fonts/, SIL Open Font
       License, Dateien unverändert von Google Fonts: Fraunces v38, Inter v20,
       variabel, Teilmengen latin und latin-ext). head.php lädt die beiden
       latin-Dateien vor. font-display: optional heißt: Ist die Schrift beim
       ersten Zeichnen nicht da, bleibt die Seite bei der Ersatzschrift und
       springt nicht mehr um (vorher bis CLS 0,126 durch Umbruch der H1).
       Ab der zweiten Seite kommt die Schrift aus dem Browser-Cache.
       Gewichte wie bei Google je einzeln, damit die Darstellung gleich bleibt. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: optional; src: url('../fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: optional; src: url('../fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: optional; src: url('../fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: optional; src: url('../fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: optional; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: optional; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: optional; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: optional; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: optional; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: optional; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: optional; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: optional; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* B2. Startseite mobil: Hero kompakter, damit die Schnellauswahl beim Laden
       bei 390 × 844 im Bild beginnt (vorher auf peritomorenocruise.com und
       einigen Sprachfassungen erst unter der Falz). Kicker, H1, Untertitel
       und Knöpfe enger, Untertitel bleibt vollständig. */
@media (max-width: 899px) {
    .mst-hero--home.mst-hero--with-qp { padding: 20px 0 62px; }
    .mst-hero--home .mst-hero__kicker { font-size: 0.85rem; margin-bottom: 4px; }
    .mst-hero--home .mst-hero__title { font-size: 1.7rem; line-height: 1.12; margin-bottom: 10px; }
    .mst-hero--home .mst-hero__sub { font-size: 0.95rem; line-height: 1.45; margin-bottom: 14px; }
    .mst-hero--home .mst-hero__ctas { gap: 8px; }
    .mst-hero--home .mst-hero__ctas .mst-btn { padding: 10px 16px; }
}
@media (max-width: 699px) {
    /* Reiter-Pillen etwas enger, damit sie seltener in eine dritte Zeile umbrechen. */
    .mst-qp__tabs { gap: 6px; }
    .mst-qp__tab { padding: 5px 10px; }
}

/* B1. Sticky-Leiste auf der Startseite mobil erst zeigen, wenn die
       Schnellauswahl nach oben aus dem Bild gescrollt ist (site.js setzt
       .is-shown per IntersectionObserver). Vorher lag die Leiste beim Laden
       über dem Preis der ersten Schnellauswahl-Zeile. Ohne JS (Klasse mst-js
       fehlt) oder ohne :has() bleibt die Leiste wie bisher immer sichtbar. */
@media (max-width: 899px) {
    .mst-stickybar { transition: transform .25s ease, visibility 0s linear 0s; }
    html.mst-js body:has(.mst-qp__box) .mst-stickybar:not(.is-shown) {
        transform: translateY(calc(100% + 24px)); visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
    }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
    .mst-stickybar, html.mst-js body:has(.mst-qp__box) .mst-stickybar:not(.is-shown) { transition: none; }
}