/* ===========================================================================
   4MyVIP — reise.css
   Stylesheet für Destinations-Landingpages und Rechtsseiten.
   Ausgeliefert unter /reise.css (langlebig cachebar).

   ZWECK: Präsentation ist vollständig von den Inhalten getrennt. Die
   Content-Datenbank für Urlaubsziele weltweit kann unabhängig davon wachsen —
   jede neue Destination erbt automatisch das Layout, ohne Code-Änderung.

   ---------------------------------------------------------------------------
   KLASSEN-VERTRAG (das erwartet dieses Stylesheet vom Markup)

   <body class="vip">
     <div class="vip-wrap">
       <nav class="vip-nav"><a href="/">4My<span>VIP</span></a></nav>
       <h1 class="vip-title">…</h1>
       <p  class="vip-claim">…</p>        Untertitel/Eyecatcher (content.title)
       <p  class="vip-kicker">…</p>       Kategorien, z. B. "Strand · Familie"
       <img class="vip-hero" …>           1200×675, 16:9
       <div class="vip-facts">
         <div class="vip-fact"><b>Label</b>Wert</div>  … beliebig viele
       </div>
       <p  class="vip-prose">…</p>        content.spotlight
       <h2 class="vip-h2">Must See</h2>
       <p  class="vip-prose">…</p>        content.tosee
       <h2 class="vip-h2">Must Do</h2>
       <p  class="vip-prose">…</p>        content.todo
       <div class="vip-note"><strong>…</strong> …</div>   content.when
       <a  class="vip-cta" href="…">…</a>
       <footer class="vip-footer">…</footer>
     </div>
   </body>

   Zusätzlich für Rechtsseiten: .vip-legal (Textseite), .vip-warn (Hinweisbox),
   .vip-meta (Stand-Zeile).

   CONTENT-SCHEMA (data/seo-content.json, Schlüssel = Ziel-Slug):
   { "kreta": { "title": "…", "description": "…", "spotlight": "…",
                "tosee": "…", "todo": "…", "when": "…" } }

   THEMING: alle Farben, Radien und Schriftgrößen sind Custom Properties in
   :root — für Whitelabel oder Kampagnenseiten genügt das Überschreiben unten.
   =========================================================================== */

:root {
  /* Farben */
  --vip-bg: #fbfbfd;
  --vip-surface: #ffffff;
  --vip-ink: #1d1d1f;
  --vip-ink-2: #424245;
  --vip-ink-3: #6e6e73;
  --vip-ink-4: #a1a1a6;
  --vip-line: #e8e8ed;
  --vip-accent: #0071e3;
  --vip-accent-ink: #ffffff;
  --vip-warn-bg: #fff4f4;
  --vip-warn-ink: #8a0010;
  --vip-warn-line: #d70015;

  /* Typografie */
  --vip-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --vip-size-title: clamp(30px, 7vw, 42px);
  --vip-size-claim: 19px;
  --vip-size-h2: 22px;
  --vip-size-body: 16px;
  --vip-line-height: 1.65;

  /* Form */
  --vip-radius: 16px;
  --vip-radius-lg: 22px;
  --vip-radius-pill: 980px;
  --vip-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
  --vip-shadow-hero: 0 10px 30px rgba(0, 0, 0, 0.10);
  --vip-wrap: 720px;
}

/* --- Grundlage --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body.vip { margin: 0; background: var(--vip-bg); color: var(--vip-ink); font-family: var(--vip-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.vip h1, .vip h2, .vip h3, .vip p, .vip ul, .vip figure { margin: 0; }
.vip-wrap { max-width: var(--vip-wrap); margin: 0 auto; padding: 34px 22px 80px; }
.vip a { color: var(--vip-accent); }

/* --- Kopf -------------------------------------------------------------- */
.vip-nav a { font-size: 19px; font-weight: 600; color: var(--vip-ink); text-decoration: none; letter-spacing: -0.3px; }
.vip-nav span { color: var(--vip-accent); }

.vip-title { font-size: var(--vip-size-title); font-weight: 700; letter-spacing: -1px; line-height: 1.08; margin: 34px 0 10px; }
.vip-claim { font-size: var(--vip-size-claim); font-weight: 500; color: var(--vip-ink); margin-bottom: 6px; line-height: 1.4; }
.vip-kicker { font-size: 15px; color: var(--vip-ink-3); margin-bottom: 24px; letter-spacing: 0.1px; }

/* --- Hero-Bild (Layout-Shift-frei durch aspect-ratio) ------------------ */
.vip-hero {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--vip-radius-lg); margin: 6px 0 24px;
  box-shadow: var(--vip-shadow-hero); background: var(--vip-line);
}

/* --- Fakten-Raster ---------------------------------------------------- */
.vip-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 26px 0 30px; }
.vip-fact { background: var(--vip-surface); border-radius: var(--vip-radius); padding: 16px; box-shadow: var(--vip-shadow-card); font-size: 15px; color: var(--vip-ink-2); }
.vip-fact b { display: block; font-size: 12px; font-weight: 600; color: var(--vip-ink-4); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }

/* --- Textkörper ------------------------------------------------------- */
.vip-h2 { font-size: var(--vip-size-h2); font-weight: 600; letter-spacing: -0.4px; margin: 36px 0 12px; }
.vip-prose { font-size: var(--vip-size-body); line-height: var(--vip-line-height); color: var(--vip-ink-2); margin: 14px 0; }
.vip-prose strong { color: var(--vip-ink); font-weight: 600; }
.vip-list { padding-left: 20px; margin: 12px 0; }
.vip-list li { font-size: 15.5px; line-height: 1.7; color: var(--vip-ink-2); margin-bottom: 8px; }

/* --- Hinweisbox (z. B. beste Reisezeit) -------------------------------- */
.vip-note {
  background: var(--vip-surface); border-left: 3px solid var(--vip-accent);
  border-radius: 12px; padding: 14px 18px; margin: 26px 0;
  font-size: 15px; line-height: 1.6; color: var(--vip-ink-2);
}
.vip-note strong { color: var(--vip-ink); }

/* --- Handlungsaufruf -------------------------------------------------- */
.vip-cta {
  display: inline-block; margin-top: 26px; padding: 15px 34px;
  background: var(--vip-accent); color: var(--vip-accent-ink) !important;
  border-radius: var(--vip-radius-pill); font-size: 17px; font-weight: 600;
  text-decoration: none; transition: transform .12s ease, filter .12s ease;
}
.vip-cta:hover { filter: brightness(1.06); }
.vip-cta:active { transform: scale(.97); }

/* --- Fuß -------------------------------------------------------------- */
.vip-footer { border-top: 1px solid var(--vip-line); margin-top: 56px; padding-top: 22px; font-size: 12px; color: var(--vip-ink-4); line-height: 1.7; }
.vip-footer a { color: var(--vip-ink-3); text-decoration: none; margin-right: 14px; }
.vip-footer a:hover { text-decoration: underline; }
.vip-footer p { margin: 6px 0; }

/* --- Rechtsseiten ----------------------------------------------------- */
.vip-legal h2 { font-size: 17px; font-weight: 600; margin: 28px 0 8px; letter-spacing: -0.2px; }
.vip-legal p { font-size: 15px; line-height: 1.7; color: var(--vip-ink-2); white-space: pre-line; }
.vip-warn { background: var(--vip-warn-bg); border-left: 3px solid var(--vip-warn-line); border-radius: 12px; padding: 14px 18px; margin: 0 0 26px; font-size: 14px; line-height: 1.6; color: var(--vip-warn-ink); }
.vip-warn code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.vip-meta { font-size: 12px; color: var(--vip-ink-4); margin-top: 36px; }

/* --- Mobil ------------------------------------------------------------ */
@media (max-width: 700px) {
  .vip-wrap { padding: 26px 18px 64px; }
  .vip-facts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vip-fact { padding: 14px; }
  .vip-hero { border-radius: 18px; }
  .vip-cta { display: block; text-align: center; padding: 16px 24px; }
}

/* --- Druck ------------------------------------------------------------ */
@media print {
  .vip-cta, .vip-nav { display: none; }
  body.vip { background: #fff; }
  .vip-hero { box-shadow: none; }
}

/* --- Bewegungsreduktion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vip-cta { transition: none; }
}

/* ===========================================================================
   ERWEITERUNG: Buchungsmaske, GetYourGuide-Block, Startseite, Highlights
   Diese Klassen ergänzen den Vertrag oben. Alles weiterhin themebar über :root.
   =========================================================================== */

/* --- Buchungsmaske (booking.inc) -------------------------------------- */
.vip-booking {
  background: var(--vip-surface); border-radius: var(--vip-radius-lg);
  box-shadow: var(--vip-shadow-hero); padding: 22px; margin: 30px 0 34px;
  border: 1px solid var(--vip-line);
}
.vip-booking-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.vip-booking-title { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; }
.vip-booking-ort { font-size: 14px; color: var(--vip-ink-3); }
.vip-booking-ort strong { color: var(--vip-ink); font-weight: 600; }

.vip-tabs { display: inline-flex; gap: 2px; background: var(--vip-bg); border-radius: var(--vip-radius-pill); padding: 3px; margin-bottom: 18px; }
.vip-tab {
  appearance: none; border: 0; cursor: pointer; font: inherit;
  padding: 9px 18px; border-radius: var(--vip-radius-pill);
  font-size: 14px; font-weight: 500; color: var(--vip-ink-3); background: transparent;
  transition: background .15s ease, color .15s ease;
}
.vip-tab[aria-selected="true"] { background: var(--vip-surface); color: var(--vip-ink); font-weight: 600; box-shadow: var(--vip-shadow-card); }

.vip-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.vip-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vip-field label { font-size: 12px; font-weight: 600; color: var(--vip-ink-4); text-transform: uppercase; letter-spacing: 0.5px; }
.vip-input {
  font: inherit; font-size: 16px;              /* 16px verhindert Auto-Zoom auf iOS */
  padding: 12px 14px; border: 1px solid var(--vip-line); border-radius: 12px;
  background: var(--vip-bg); color: var(--vip-ink); width: 100%; min-width: 0;
}
.vip-input:focus { outline: 2px solid var(--vip-accent); outline-offset: -1px; background: var(--vip-surface); }
.vip-booking-submit { margin-top: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.vip-booking-hint { font-size: 12px; color: var(--vip-ink-4); line-height: 1.6; margin-top: 12px; }
.vip-booking-error { font-size: 13px; color: var(--vip-warn-ink); background: var(--vip-warn-bg); border-radius: 10px; padding: 10px 14px; margin-top: 12px; }
.vip-booking[hidden], [hidden] { display: none !important; }

/* --- Aktivitäten / GetYourGuide --------------------------------------- */
.vip-activities { margin: 34px 0; }
.vip-activity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 14px; }
.vip-activity {
  display: block; background: var(--vip-surface); border: 1px solid var(--vip-line);
  border-radius: var(--vip-radius); padding: 16px 18px; text-decoration: none;
  color: var(--vip-ink); transition: transform .12s ease, box-shadow .12s ease;
}
.vip-activity:hover { transform: translateY(-2px); box-shadow: var(--vip-shadow-card); }
.vip-activity b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.vip-activity span { font-size: 13px; color: var(--vip-ink-3); line-height: 1.5; }

/* --- Highlights & Reiseideen ------------------------------------------ */
.vip-highlight { background: var(--vip-surface); border-radius: var(--vip-radius); padding: 18px 20px; margin-bottom: 12px; box-shadow: var(--vip-shadow-card); }
.vip-highlight-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.vip-highlight-head b { font-size: 16px; font-weight: 600; }
.vip-badge { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vip-accent); background: var(--vip-bg); border-radius: var(--vip-radius-pill); padding: 3px 10px; }
.vip-highlight p { font-size: 15px; line-height: 1.65; color: var(--vip-ink-2); }
.vip-highlight-adr { font-size: 12.5px; color: var(--vip-ink-4); margin-top: 8px; }
.vip-highlight-adr a { color: var(--vip-ink-3); }

.vip-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.vip-tag { font-size: 13px; color: var(--vip-ink-2); background: var(--vip-surface); border: 1px solid var(--vip-line); border-radius: var(--vip-radius-pill); padding: 6px 14px; }

/* --- Startseite -------------------------------------------------------- */
.vip-wrap--wide { max-width: 1040px; }
.vip-hero-home { text-align: center; padding: 56px 0 30px; }
.vip-hero-home h1 { font-size: clamp(34px, 8vw, 56px); font-weight: 700; letter-spacing: -1.6px; line-height: 1.05; margin: 0 0 14px; }
.vip-hero-home h1 span { color: var(--vip-ink-3); }
.vip-hero-home p { font-size: clamp(17px, 2.4vw, 21px); color: var(--vip-ink-3); max-width: 620px; margin: 0 auto; line-height: 1.5; }

.vip-usps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 40px 0; }
.vip-usp { background: var(--vip-surface); border-radius: var(--vip-radius); padding: 20px; box-shadow: var(--vip-shadow-card); }
.vip-usp b { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.vip-usp p { font-size: 14.5px; line-height: 1.6; color: var(--vip-ink-2); }

.vip-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 16px 0 8px; }
.vip-card {
  display: block; text-decoration: none; color: var(--vip-ink);
  background: var(--vip-surface); border-radius: var(--vip-radius); overflow: hidden;
  box-shadow: var(--vip-shadow-card); transition: transform .12s ease, box-shadow .12s ease;
}
.vip-card:hover { transform: translateY(-3px); box-shadow: var(--vip-shadow-hero); }
.vip-card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--vip-line); }
.vip-card-body { padding: 15px 17px 17px; }
.vip-card-body b { display: block; font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.vip-card-body span { font-size: 13.5px; color: var(--vip-ink-3); line-height: 1.5; }

/* --- Mobil ------------------------------------------------------------- */
@media (max-width: 700px) {
  .vip-booking { padding: 18px; border-radius: 18px; }
  .vip-fields { grid-template-columns: 1fr 1fr; }
  .vip-field--wide { grid-column: 1 / -1; }
  .vip-booking-submit .vip-cta { width: 100%; }
  .vip-tabs { width: 100%; }
  .vip-tab { flex: 1; padding: 10px 12px; }
  .vip-hero-home { padding: 36px 0 22px; }
}

@media (hover: none) {
  .vip-card:hover, .vip-activity:hover { transform: none; }
}

/* --- Buchungsmaske: fünf Produkte ------------------------------------- */
.vip-tabs--wrap { display: flex; flex-wrap: wrap; gap: 3px; width: 100%; }
.vip-tabs--wrap .vip-tab { flex: 1 1 auto; white-space: nowrap; }

.vip-kinderalter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-top: 12px;
}
.vip-kinderalter .vip-field label { font-size: 12px; font-weight: 600; color: var(--vip-ink-4); text-transform: uppercase; letter-spacing: .5px; }
.vip-kinderalter select.vip-input { appearance: none; background-image: none; }

.vip-check {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  font-size: 14.5px; color: var(--vip-ink-2); cursor: pointer;
}
.vip-check input { width: 18px; height: 18px; accent-color: var(--vip-accent); cursor: pointer; }

.vip-fields + .vip-fields { margin-top: 12px; }

@media (max-width: 700px) {
  .vip-tabs--wrap { flex-direction: column; }
  .vip-tabs--wrap .vip-tab { width: 100%; }
  .vip-kinderalter { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================================
   HIERARCHIE: Breadcrumb, Zwei-Spalten-Layout, Karte, Nachbarorte
   =========================================================================== */

/* --- Breadcrumb --------------------------------------------------------
   Erscheint erst ab 769px. Auf Mobilgeräten kostet er Platz, ohne zu helfen —
   dort führt der Zurück-Knopf des Browsers ans Ziel.
   Das BreadcrumbList-JSON-LD im Kopf bleibt IMMER erhalten: Suchmaschinen
   lesen die Hierarchie also auch dann, wenn sie nicht sichtbar ist. */
.vip-crumbs { display: none; }

@media (min-width: 769px) {
  .vip-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 22px 0 4px; font-size: 13.5px; color: var(--vip-ink-3);
  }
  .vip-crumbs a { color: var(--vip-ink-3); text-decoration: none; }
  .vip-crumbs a:hover { color: var(--vip-accent); text-decoration: underline; }
  .vip-crumbs [aria-current="page"] { color: var(--vip-ink); font-weight: 500; }
  .vip-crumb-sep { color: var(--vip-ink-4); user-select: none; }
}

/* --- Zwei Spalten (Vorbild: .columns der Testseite) --------------------
   Mobil untereinander, ab 769px 2fr / 1fr. */
.vip-columns { display: block; margin-top: 8px; }
.vip-columns > .vip-col-haupt,
.vip-columns > .vip-col-neben { margin-bottom: 26px; min-width: 0; }

@media (min-width: 769px) {
  .vip-columns { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
  .vip-columns > .vip-col-haupt,
  .vip-columns > .vip-col-neben { margin-bottom: 0; }
  .vip-col-neben { position: sticky; top: 22px; }
}
.vip-col-neben .vip-h2 { font-size: 19px; margin-top: 0; }
.vip-col-neben .vip-h2 + * { margin-top: 0; }
.vip-col-neben .vip-highlight { padding: 15px 17px; }
.vip-col-neben .vip-highlight p { font-size: 14.5px; }

/* --- Volle Breite unterhalb der Spalten -------------------------------- */
.vip-full { margin: 34px 0; }
.vip-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }

/* --- Google-Karte ------------------------------------------------------ */
.vip-map { margin: 26px 0 8px; border-radius: var(--vip-radius); overflow: hidden; background: var(--vip-line); }
.vip-map iframe { display: block; width: 100%; height: 260px; border: 0; }
.vip-map-hinweis {
  font-size: 12.5px; color: var(--vip-ink-3); background: var(--vip-surface);
  padding: 10px 14px; margin: 0; line-height: 1.5;
}
.vip-map-hinweis a { color: var(--vip-accent); text-decoration: none; }
@media (min-width: 769px) { .vip-map iframe { height: 320px; } }

/* --- Nächstgelegene Orte ---------------------------------------------- */
.vip-nahe { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 14px; }
.vip-nahe-ort {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  background: var(--vip-surface); border: 1px solid var(--vip-line);
  border-radius: 12px; padding: 12px 14px; color: var(--vip-ink);
  transition: border-color .12s ease, transform .12s ease;
}
.vip-nahe-ort:hover { border-color: var(--vip-accent); transform: translateY(-2px); }
.vip-nahe-ort b { font-size: 14.5px; font-weight: 600; }
.vip-nahe-ort span { font-size: 12.5px; color: var(--vip-ink-3); }
@media (hover: none) { .vip-nahe-ort:hover { transform: none; } }

/* --- Fuß: Partner und Länderliste ------------------------------------- */
.vip-footer-partner { margin: 10px 0; }
.vip-footer-partner a { color: var(--vip-ink-2); text-decoration: underline; margin: 0; }
.vip-footer-partner a:hover { color: var(--vip-accent); }

.vip-footer-laender {
  display: flex; flex-wrap: wrap; gap: 4px 0;
  margin: 14px 0; padding: 12px 0;
  border-top: 1px solid var(--vip-line); border-bottom: 1px solid var(--vip-line);
  line-height: 1.9;
}
.vip-footer-laender:empty { display: none; border: 0; margin: 0; padding: 0; }
.vip-footer-laender a { margin: 0; padding: 0 10px; border-right: 1px solid var(--vip-line); white-space: nowrap; }
.vip-footer-laender a:first-child { padding-left: 0; }
.vip-footer-laender a:last-child { border-right: 0; }

/* --- Restaurants ------------------------------------------------------- */
.vip-restaurant {
  background: var(--vip-surface); border-radius: var(--vip-radius);
  padding: 18px 20px; box-shadow: var(--vip-shadow-card);
  display: flex; flex-direction: column;
}
.vip-restaurant .vip-highlight-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.vip-restaurant .vip-highlight-head b { font-size: 16px; font-weight: 600; }
.vip-restaurant p { font-size: 15px; line-height: 1.6; color: var(--vip-ink-2); margin: 0 0 8px; }
.vip-badge--preis { color: var(--vip-ink-2); background: var(--vip-bg); letter-spacing: 0; }
.vip-spezialitaet { font-size: 14.5px; }
.vip-spezialitaet strong { color: var(--vip-ink); }

.vip-merkmale {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px 14px; margin: 10px 0 4px;
  border-top: 1px solid var(--vip-line); padding-top: 12px;
}
.vip-merkmale:empty { display: none; border: 0; padding: 0; margin: 0; }
.vip-merkmal { display: flex; flex-direction: column; gap: 1px; }
.vip-merkmal b { font-size: 11px; font-weight: 600; color: var(--vip-ink-4); text-transform: uppercase; letter-spacing: .5px; }
.vip-merkmal span { font-size: 14px; color: var(--vip-ink-2); }

.vip-route {
  align-self: flex-start; margin-top: 12px; padding: 9px 16px;
  background: var(--vip-bg); border: 1px solid var(--vip-line); border-radius: var(--vip-radius-pill);
  font-size: 14px; font-weight: 500; color: var(--vip-ink); text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
.vip-route:hover { border-color: var(--vip-accent); background: var(--vip-surface); color: var(--vip-accent); }