/* ===========================================================================
   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; }
}

/* ---------------------------------------------------------------------------
   WEG IN DIE SUCHE — der wichtigste Link der ganzen Seite.

   Er hat gefehlt. Die statischen Reiseseiten liegen unter sites/ und werden
   VOR der React-Oberfläche ausgeliefert; damit war die Startseite die
   SEO-Landingpage — und von dort führte kein einziger Link zur eigentlichen
   Suche. Das Produkt war da, erreichbar war es nicht.
   --------------------------------------------------------------------------- */
.vip-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vip-nav a.vip-nav-cta {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 20px; border-radius: 980px;
  background: #0071e3; color: #fff;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background .16s ease;
}
.vip-nav a.vip-nav-cta:hover { background: #0058b9; text-decoration: none; }
.vip-nav a.vip-nav-cta:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  .vip-nav a.vip-nav-cta { background: #0a6ed8; }
  .vip-nav a.vip-nav-cta:hover { background: #0060c0; }
}