/* ============================================================
   Rostock Airport – Responsive-Ebene
   Überschreibt die festen 1440px-Desktop-Inline-Styles fluide.
   Wird in alle Seiten via <link> eingebunden. Desktop bleibt
   unverändert; Regeln greifen erst ab den Breakpoints unten.
   ============================================================ */

/* ----- Grundlage (alle Breiten): Container fluide machen ----- */
[style*="width:1440px"] {
  width: 100% !important;
  max-width: 1440px !important;
}
img { max-width: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }

/* ============================================================
   TABLET  (<= 1024px): grosse Abstände etwas reduzieren
   ============================================================ */
@media (max-width: 1024px) {
  [style*="padding:130px 52px"],
  [style*="padding:120px 52px"],
  [style*="padding:110px 52px"],
  [style*="padding:100px 52px"] {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  [style*="52px"] { padding-left: 34px !important; padding-right: 34px !important; }
}

/* ============================================================
   PHONE / kleines Tablet (<= 768px): Hauptumbruch
   ============================================================ */
@media (max-width: 768px) {

  /* --- horizontale Innenabstände deutlich verkleinern --- */
  [style*="52px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* --- vertikale Section-Abstände verkleinern --- */
  [style*="padding:130px 52px"],
  [style*="padding:120px 52px"],
  [style*="padding:110px 52px"],
  [style*="padding:100px 52px"],
  [style*="padding:120px 52px 110px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* --- mehrspaltige Raster stapeln --- */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 0.9fr"],
  [style*="grid-template-columns:0.9fr 1.1fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* KPI-/Feature-Raster: auf 2 Spalten */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
  }

  /* --- Hero- und grosse Bildflächen: feste Höhe -> fluid --- */
  [style*="height:920px"],
  [style*="height:860px"],
  [style*="height:840px"],
  [style*="height:820px"],
  [style*="height:720px"],
  [style*="height:700px"],
  [style*="height:640px"] {
    height: auto !important;
    min-height: 78vh !important;
  }
  [style*="height:560px"],
  [style*="height:520px"],
  [style*="height:460px"] {
    height: auto !important;
    min-height: 56vh !important;
  }
  /* Bild-Kacheln kompakter */
  [style*="height:440px"],
  [style*="height:420px"] { height: 300px !important; }
  [style*="height:280px"] { height: 220px !important; }

  /* --- grosse Schriftgrössen fluide skalieren --- */
  [style*="font-size:104px"],
  [style*="font-size:96px"],
  [style*="font-size:92px"] { font-size: clamp(40px, 11.5vw, 92px) !important; }

  [style*="font-size:74px"],
  [style*="font-size:64px"],
  [style*="font-size:62px"],
  [style*="font-size:60px"],
  [style*="font-size:58px"],
  [style*="font-size:56px"],
  [style*="font-size:54px"],
  [style*="font-size:52px"],
  [style*="font-size:50px"] { font-size: clamp(28px, 7.2vw, 52px) !important; }

  [style*="font-size:48px"],
  [style*="font-size:46px"],
  [style*="font-size:42px"],
  [style*="font-size:40px"] { font-size: clamp(24px, 5.6vw, 40px) !important; }

  /* --- Mobile-Navigation: Inline-Links aus, Burger aktiv --- */
  .ra-desktop-nav { display: none !important; }
  /* Logo im Header verkleinern (bleibt rechts) */
  header img[style*="height:99px"] { height: 58px !important; }
  /* CTA-/Info-Reihen umbrechen */
  [style*="display:flex"][style*="gap"] { flex-wrap: wrap !important; }
}

/* ============================================================
   KLEINES PHONE (<= 480px): letzte Feinheiten
   ============================================================ */
@media (max-width: 480px) {
  /* auch KPI-Raster einspaltig */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Gestaffelte Zell-Paddings/Trennlinien im Einspalter zurücksetzen
     (sonst „treppen" die nummerierten Kacheln nach rechts) */
  [style*="grid-template-columns:repeat(3,1fr)"] > div,
  [style*="grid-template-columns:repeat(4,1fr)"] > div,
  [style*="grid-template-columns:repeat(5,1fr)"] > div,
  [style*="grid-template-columns:repeat(6,1fr)"] > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
  }
  [style*="52px"] { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Timeline-Zeilen auf Mobil stapeln */
@media (max-width: 768px) {
  [data-tl] { grid-template-columns: 1fr !important; gap: 6px !important; }
  /* Reiseziel-Zeilen: feste Spalten auf Mobil kompakter, damit der Städtename Platz behält */
  [style*="grid-template-columns:1fr 150px"] { grid-template-columns: 1fr auto auto !important; gap: 8px 14px !important; }
}

/* ============================================================
   Burger-Overlay-Menü (mobil primär, funktioniert überall)
   ============================================================ */
.ra-burger { cursor: pointer; }
.ra-menu {
  position: fixed; inset: 0; z-index: 100000;
  background: #0A2540; display: none; flex-direction: column;
  padding: 92px 32px 40px; gap: 2px; overflow-y: auto;
}
.ra-menu.open { display: flex; }
.ra-menu a {
  color: #fff; font-family: 'Archivo Narrow', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 26px;
  padding: 16px 2px; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.ra-menu a:hover { color: #E63946; opacity: 1; }
.ra-menu .ra-close {
  position: absolute; top: 20px; right: 24px; background: none; border: none;
  color: #fff; font-size: 46px; line-height: 1; cursor: pointer; padding: 4px 10px;
}

/* Bewegung reduzieren (Marquee anhalten) */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
}