/* ==========================================================================
   TRIPMATCH HEADER / FOOTER — 1:1 AUS DEM GELIEFERTEN HAUPTSEITEN-CODE
   Keine Umbenennung, kein Scoping, keine Dimensionsanpassung.
   ========================================================================== */
  /* --- 1) Variablen & Grund-Reset ------------------------------ */
  :root{
    --color-primary: #14B8A6;
    --color-primary-dark: #0d9488;
    --color-primary-light: #5eead4;
    --color-dark: #0F172A;
    --color-dark-2: #1e293b;
    --color-accent: #F59E0B;
    --color-bg: #F8FAFC;
    --color-white: #FFFFFF;
    --color-muted: #64748b;
    --color-border: rgba(15,23,42,0.08);
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    --radius-xl: 28px;
    --radius-lg: 22px;
    --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 30px 70px rgba(15, 23, 42, 0.18);
    --shadow-xl: 0 40px 90px rgba(15, 23, 42, 0.22);
    --shadow-glow: 0 20px 50px rgba(20,184,166,0.28);
    --max-width: 1180px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    font-family: var(--font-main);
    background: var(--color-bg);
    color: var(--color-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    font-size: 16px;
  }

  img, svg{ display:block; max-width:100%; }
  a{ text-decoration:none; color:inherit; }
  ul{ list-style:none; }
  button{ font-family: inherit; cursor:pointer; border:none; background:none; }

  /* --- 2) Layout-Helper ----------------------------------------- */
  .container{
    width:100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 22px;
  }

  .section{ padding: 88px 0; }

  .section-header{
    text-align:center;
    max-width: 640px;
    margin: 0 auto 56px;
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    background: linear-gradient(135deg, rgba(20,184,166,0.14), rgba(20,184,166,0.06));
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
    border: 1px solid rgba(20,184,166,0.18);
  }

  .section-header h2{
    font-size: clamp(1.75rem, 4.2vw, 2.5rem);
    font-weight: 800;
    color: var(--color-dark);
    margin-bottom: 14px;
    letter-spacing: -0.025em;
    line-height: 1.2;
  }

  .section-header p{
    color: var(--color-muted);
    font-size: 1.05rem;
  }

  /* Buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding: 17px 32px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.02rem;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
    white-space: nowrap;
    letter-spacing: -0.01em;
  }

  .btn-primary{
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    box-shadow: var(--shadow-glow);
    position: relative;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  }
  .btn-primary:hover{
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 22px 48px rgba(20,184,166,0.38);
  }
  .btn-primary:active{
    transform: translateY(0) scale(0.98);
    box-shadow: 0 10px 24px rgba(20,184,166,0.3);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }

  .btn-primary.pulse::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:999px;
    border: 2px solid var(--color-primary);
    animation: pulseRing 2.6s ease-out infinite;
    pointer-events:none;
  }

  @keyframes pulseRing{
    0%{ transform: scale(1); opacity: 0.6; }
    100%{ transform: scale(1.35); opacity: 0; }
  }

  .btn-small{ padding: 11px 20px; font-size: 0.9rem; }

  /* Skip-Link: nur sichtbar, wenn er per Tastatur fokussiert wird */
  .skip-link{
    position: absolute;
    top: -60px;
    left: 12px;
    background: var(--color-dark);
    color: var(--color-white);
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    z-index: 200;
    transition: top 0.25s ease;
  }
  .skip-link:focus{ top: 12px; }

  /* Sichtbarer, hochwertiger Fokuszustand für Tastaturbedienung */
  .btn:focus-visible{
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 3px;
  }
  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
    border-radius: 4px;
  }
  /* ============================================================
     3) HEADER
  ============================================================ */
  header.tm-header{
    position: relative;
    z-index: 100;
    background: rgba(248,250,252,0.72);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    display: block; /* explizit gegen evtl. Kadence-Kollisionen */
  }
  /* Weicher, nahtloser Übergang statt harter Trennlinie:
     dezenter Fade unterhalb des Headers, verschmilzt mit dem Hero-Bereich */
  header.tm-header::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height: 28px;
    transform: translateY(100%);
    background: linear-gradient(180deg, rgba(248,250,252,0.55), rgba(248,250,252,0));
    pointer-events:none;
  }

  .tm-header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 20px 22px;
    max-width: var(--max-width);
    margin: 0 auto;
  }

  /* --- Header-Logo als Bild --- */
  .tm-logo-link{
    display:flex;
    align-items:center;
    flex-shrink:0;
  }
  .tm-logo-image{
    height: 88px;           /* Desktop-Zielhöhe, verdoppelt */
    max-height: 96px;
    width: auto;
    max-width: 360px;       /* verhindert überproportional grosses Logo */
    object-fit: contain;    /* keine Verzerrung, unabhängig vom Seitenverhältnis */
    display:block;
  }
  @media (max-width: 480px){
    .tm-logo-image{ height: 60px; max-height: 64px; max-width: 220px; } /* dezente, App-artige Logogrösse auf Mobile */
  }

  .tm-nav-links{
    display:none;
    gap: 32px;
    font-weight: 600;
    font-size: 0.94rem;
    color: #334155;
  }
  .tm-nav-links a{ transition: color 0.2s ease; position: relative; }
  .tm-nav-links a:hover{ color: var(--color-primary-dark); }

  .tm-header-actions{ display:flex; align-items:center; gap:12px; }

  @media (min-width: 768px){ .tm-nav-links{ display:flex; } }

  /* ============================================================
     HEADER MOBILE-FIX (≤ 768px)
     Header bleibt schlank & sticky, nur das Logo oben links
     ist sichtbar – Nav und CTA-Button werden ausgeblendet,
     damit der Header nicht überläuft/verschwindet.
  ============================================================ */
  @media (max-width: 768px){

    header.tm-header{
      display: block !important;
      visibility: visible !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 20 !important;
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border: none !important;
      box-shadow: none !important;
    }

    header.tm-header::before,
    header.tm-header::after{
      content: none !important;
      display: none !important;
    }

    .tm-header-inner{
      padding: 18px 20px 8px 12px !important;
      background: transparent !important;
      display: flex !important;
    }

    .tm-header-actions,
    .tm-nav-links{
      display: none !important;
    }

    .tm-logo-link{
      display: flex !important;
    }

    .tm-logo-image{
      /* dezenteres, App-/Startup-artiges Branding statt grossem Banner */
      height: 60px !important;
      max-height: 64px !important;
      max-width: 220px !important;
      display: block !important;
    }

    .hero{
      padding-top: 108px !important;
      /* Näher an der Desktop-Optik: heller, dezenter, weniger Türkis-Fläche */
      background:
        radial-gradient(circle at 88% -60px, rgba(20,184,166,0.10) 0%, rgba(20,184,166,0.05) 30%, rgba(20,184,166,0) 58%),
        radial-gradient(circle at 8% 300px, rgba(245,158,11,0.07) 0%, rgba(245,158,11,0) 50%),
        #F8FAFC !important;
    }

    /* --- Hero kompakter: Abstände zwischen Logo, Headline, Text, Button
           und Analysekarte reduziert, damit alles harmonischer zusammenrückt --- */
    .hero-inner{
      gap: 30px !important;
    }

    .hero-text h1{
      font-size: clamp(1.7rem, 7.2vw, 2.05rem) !important;
      line-height: 1.18 !important;
      margin-bottom: 14px !important;
    }

    .hero-text p.subtitle{
      font-size: 0.98rem !important;
      margin-bottom: 20px !important;
    }

    .hero-cta{
      gap: 12px !important;
    }

    /* Button-Glow dezenter, damit er auf Mobile ruhiger wirkt */
    .btn-primary{
      box-shadow: 0 10px 24px rgba(20,184,166,0.22) !important;
    }
    .btn-primary.pulse::after{
      border-color: rgba(20,184,166,0.45) !important;
    }

    /* Analysekarte rückt näher an den Hero-Text heran */
    .analysis-card{
      margin-top: 2px !important;
    }
  }
  /* ============================================================
     10) FOOTER
  ============================================================ */
  footer.site-footer{
    padding: 48px 0 36px;
    text-align:center;
    color: var(--color-muted);
    font-size: 0.88rem;
  }
  footer.site-footer .footer-logo{
    font-weight: 800;
    color: var(--color-dark);
    margin-bottom: 14px;
    font-size: 1.05rem;
  }
  footer.site-footer .footer-logo span{ color: var(--color-primary); }
  footer.site-footer .footer-links{
    display:flex;
    justify-content:center;
    gap: 24px;
  }
  footer.site-footer .footer-links a{
    color:#475569;
    font-weight: 600;
    transition: color 0.2s ease;
  }
  footer.site-footer .footer-links a:hover{ color: var(--color-primary); }

/* ==========================================================================
   TRIPMATCH REISEZIELE — INTERAKTIVE WELTKARTE
   1. VARIABLEN & GRUNDDESIGN
   ========================================================================== */
.tm-map-wrapper {
  --tm-primary: #14B8A6;
  --tm-primary-dark: #0d9488;
  --tm-primary-light: #5eead4;
  --tm-primary-wash: #e6f9f6;
  --tm-dark: #0F172A;
  --tm-dark-2: #1e293b;
  --tm-accent: #F59E0B;
  --tm-bg: #F8FAFC;
  --tm-white: #FFFFFF;
  --tm-muted: #64748b;
  --tm-muted-2: #94a3b8;
  --tm-border: #e2e8f0;
  --tm-ocean: #eef4f8;
  --tm-land-inactive: #d7dee5;
  --tm-land-inactive-hover: #d7dee5;
  --tm-radius-xs: 8px;
  --tm-radius-sm: 12px;
  --tm-radius-md: 18px;
  --tm-radius-lg: 26px;
  --tm-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --tm-shadow-md: 0 12px 28px -8px rgba(15,23,42,.16);
  --tm-shadow-lg: 0 24px 70px -12px rgba(15,23,42,.28);
  --tm-ease: cubic-bezier(.4,0,.2,1);
  --tm-ease-out: cubic-bezier(.16,1,.3,1);

  display: block;
  position: relative;
  width: 100%;
  background: var(--tm-bg);
  color: var(--tm-dark);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  box-sizing: border-box;
}


.tm-map-wrapper *,
.tm-map-wrapper *::before,
.tm-map-wrapper *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.tm-map-wrapper img { max-width: 100%; display: block; }
.tm-map-wrapper button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.tm-map-wrapper a { color: inherit; text-decoration: none; }
.tm-map-wrapper :focus { outline: none; }
.tm-map-wrapper :focus-visible {
  outline: 2.5px solid var(--tm-primary);
  outline-offset: 3px;
  border-radius: 6px;
}
.tm-map-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.tm-map-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}

/* ==========================================================================
   2. HERO
   ========================================================================== */
.tm-map-hero { text-align: center; margin: 0 auto 40px; max-width: 720px; }
.tm-map-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--tm-primary-dark);
  background: var(--tm-primary-wash);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.tm-map-hero h1 {
  font-size: clamp(28px, 4.6vw, 44px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tm-dark);
  margin: 0 0 16px;
}
.tm-map-hero-sub {
  font-size: clamp(15px, 1.8vw, 17.5px);
  color: var(--tm-muted);
  margin: 0 0 18px;
  line-height: 1.6;
}
.tm-map-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tm-dark-2);
}
.tm-map-hero-meta .tm-map-dot { color: var(--tm-primary); }
.tm-map-hero-meta strong { color: var(--tm-primary-dark); font-weight: 700; }

/* ==========================================================================
   3. FILTER & SUCHE
   ========================================================================== */
.tm-map-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
.tm-map-search {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}
.tm-map-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  color: var(--tm-muted-2);
  pointer-events: none;
  display: flex;
  z-index: 2;
}
.tm-map-search-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.tm-map-search-input {
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 48px 13px 54px !important;
  text-indent: 0 !important;
  line-height: 1.4 !important;
  min-height: 48px;
  border-radius: var(--tm-radius-lg);
  border: 1.5px solid var(--tm-border);
  background: var(--tm-white);
  box-shadow: var(--tm-shadow-sm);
  color: var(--tm-dark);
  transition: border-color .18s var(--tm-ease), box-shadow .18s var(--tm-ease);
}
.tm-map-search-input::placeholder { color: var(--tm-muted-2); }
.tm-map-search-input:focus {
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 4px rgba(20,184,166,.14);
}
.tm-map-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--tm-muted);
  background: var(--tm-bg);
}
.tm-map-search-clear.tm-map-is-visible { display: flex; }
.tm-map-search-clear:hover { background: var(--tm-border); color: var(--tm-dark); }

.tm-map-search-results {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 8px);
  background: var(--tm-white);
  border-radius: var(--tm-radius-md);
  box-shadow: var(--tm-shadow-lg);
  border: 1px solid var(--tm-border);
  overflow: hidden;
  z-index: 40;
  max-height: 320px;
  overflow-y: auto;
  display: none;
}
.tm-map-search-results.tm-map-is-open { display: block; }
.tm-map-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tm-dark);
  border-bottom: 1px solid var(--tm-bg);
}
.tm-map-search-result:last-child { border-bottom: none; }
.tm-map-search-result:hover,
.tm-map-search-result.tm-map-is-active { background: var(--tm-primary-wash); color: var(--tm-primary-dark); }
.tm-map-search-result .tm-map-flag { font-size: 18px; }
.tm-map-search-result .tm-map-result-region { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--tm-muted-2); }
.tm-map-search-empty { padding: 16px; font-size: 13.5px; color: var(--tm-muted); text-align: center; }

.tm-map-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  justify-content: center;
  flex-wrap: wrap;
}
.tm-map-filters::-webkit-scrollbar { display: none; }
.tm-map-filter {
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--tm-white);
  border: 1.5px solid var(--tm-border);
  color: var(--tm-dark-2);
  transition: background .16s var(--tm-ease), border-color .16s var(--tm-ease), color .16s var(--tm-ease), transform .12s var(--tm-ease);
  white-space: nowrap;
}
.tm-map-filter:hover { border-color: var(--tm-primary-light); color: var(--tm-primary-dark); }
.tm-map-filter:active { transform: scale(.96); }
.tm-map-filter[aria-pressed="true"] {
  background: var(--tm-dark);
  border-color: var(--tm-dark);
  color: var(--tm-white);
}

/* ==========================================================================
   4. KARTENCONTAINER
   ========================================================================== */
.tm-map-stage {
  position: relative;
  border-radius: var(--tm-radius-lg);
  background: linear-gradient(180deg, var(--tm-ocean) 0%, #e4edf3 100%);
  box-shadow: var(--tm-shadow-md);
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
  height: 520px;
  isolation: isolate;
}
.tm-map-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.tm-map-viewport.tm-map-is-panning { cursor: grabbing; }
.tm-map-svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  will-change: transform;
}
.tm-map-svg-inner { transform-origin: 0 0; }

.tm-map-country {
  fill: var(--tm-land-inactive);
  stroke: var(--tm-bg);
  stroke-width: .6;
  vector-effect: non-scaling-stroke;
  transition: fill .16s var(--tm-ease), filter .16s var(--tm-ease);
}
.tm-map-country--active {
  fill: #99e2d8;
  cursor: pointer;
}
.tm-map-country--active:hover,
.tm-map-country--active.tm-map-is-hovered {
  fill: var(--tm-primary);
  filter: drop-shadow(0 0 7px rgba(20,184,166,.55));
}
.tm-map-country--active:focus-visible {
  fill: var(--tm-primary);
  filter: drop-shadow(0 0 5px rgba(15,23,42,.7));
  outline: 2.5px solid var(--tm-dark);
  outline-offset: 1px;
}
.tm-map-country--active.tm-map-is-selected {
  fill: var(--tm-primary-dark);
}
.tm-map-country--pulse { animation: tmMapPulse .85s var(--tm-ease-out); }
@keyframes tmMapPulse {
  0%   { filter: drop-shadow(0 0 0 rgba(20,184,166,.85)); }
  55%  { filter: drop-shadow(0 0 16px rgba(20,184,166,.85)); }
  100% { filter: drop-shadow(0 0 7px rgba(20,184,166,.4)); }
}

.tm-map-marker {
  fill: #99e2d8;
  stroke: var(--tm-white);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill .16s var(--tm-ease), r .16s var(--tm-ease);
}
.tm-map-marker:hover,
.tm-map-marker.tm-map-is-hovered { fill: var(--tm-primary); }
.tm-map-marker:focus-visible { fill: var(--tm-primary); }
.tm-map-marker.tm-map-is-selected { fill: var(--tm-primary-dark); }

.tm-map-zoom-controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
}
.tm-map-zoom-btn {
  width: 44px; height: 44px;
  border-radius: var(--tm-radius-sm);
  background: var(--tm-white);
  box-shadow: var(--tm-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tm-dark-2);
  font-size: 19px;
  font-weight: 700;
  transition: background .15s var(--tm-ease), color .15s var(--tm-ease), transform .12s var(--tm-ease);
}
.tm-map-zoom-btn:hover { background: var(--tm-dark); color: var(--tm-white); }
.tm-map-zoom-btn:active { transform: scale(.93); }
.tm-map-zoom-btn svg { width: 18px; height: 18px; }

.tm-map-hint {
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tm-muted-2);
  margin-top: 12px;
  display: none;
}
.tm-map-hint svg { vertical-align: -3px; margin-right: 4px; width: 14px; height: 14px; }

.tm-map-tooltip {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  background: var(--tm-dark);
  color: var(--tm-white);
  padding: 12px 16px;
  border-radius: var(--tm-radius-sm);
  box-shadow: var(--tm-shadow-lg);
  min-width: 190px;
  max-width: 240px;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity .12s var(--tm-ease), transform .12s var(--tm-ease);
}
.tm-map-tooltip.tm-map-is-visible { opacity: 1; transform: translate(-50%, -14px); }
.tm-map-tooltip-title {
  font-size: 14.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}
.tm-map-tooltip-sub {
  font-size: 12px;
  color: #cbd5e1;
  margin-bottom: 6px;
}
.tm-map-tooltip-cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--tm-primary-light);
}

/* ==========================================================================
   6. COUNTRY PREVIEW / BOTTOM SHEET
   ========================================================================== */
.tm-map-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--tm-ease);
  z-index: 90;
}
.tm-map-backdrop.tm-map-is-open { opacity: 1; visibility: visible; }

.tm-map-preview {
  position: absolute;
  z-index: 50;
  width: 320px;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(6px);
  border-radius: var(--tm-radius-md);
  box-shadow: var(--tm-shadow-lg);
  border: 1px solid rgba(255,255,255,.6);
  padding: 22px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.98);
  transition: opacity .2s var(--tm-ease-out), transform .2s var(--tm-ease-out), visibility .2s;
}
.tm-map-preview.tm-map-is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.tm-map-preview-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tm-muted);
  background: var(--tm-bg);
  transition: background .15s var(--tm-ease), color .15s var(--tm-ease);
}
.tm-map-preview-close:hover { background: var(--tm-border); color: var(--tm-dark); }
.tm-map-preview-flag { font-size: 38px; line-height: 1; margin-bottom: 10px; }
.tm-map-preview-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tm-dark);
  margin: 0 0 3px;
  padding-right: 30px;
}
.tm-map-preview-region {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tm-primary-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 12px;
}
.tm-map-preview-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tm-dark-2);
  margin-bottom: 16px;
}
.tm-map-preview-highlights {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tm-map-preview-highlights li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tm-dark-2);
}
.tm-map-preview-highlights svg { flex-shrink: 0; color: var(--tm-accent); width: 15px; height: 15px; }
.tm-map-preview-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--tm-primary);
  color: var(--tm-white);
  font-size: 15px;
  font-weight: 700;
  padding: 13px 20px;
  border-radius: var(--tm-radius-sm);
  transition: background .15s var(--tm-ease), transform .12s var(--tm-ease);
}
.tm-map-preview-cta:hover { background: var(--tm-primary-dark); }
.tm-map-preview-cta:active { transform: scale(.98); }
.tm-map-preview-cta svg { transition: transform .15s var(--tm-ease); }
.tm-map-preview-cta:hover svg { transform: translateX(3px); }

.tm-map-sheet-handle { display: none; }

/* ==========================================================================
   7. LÄNDERÜBERSICHT
   ========================================================================== */
.tm-map-list-section { margin-top: 64px; }
.tm-map-list-heading {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tm-dark);
  text-align: center;
  margin: 0 0 8px;
}
.tm-map-list-sub {
  text-align: center;
  color: var(--tm-muted);
  font-size: 14.5px;
  margin: 0 0 40px;
}
.tm-map-list-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 34px 28px;
}
.tm-map-list-group-title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tm-primary-dark);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tm-primary-wash);
}
.tm-map-list-items { list-style: none; margin: 0; padding: 0; }
.tm-map-list-items li { margin: 0; }
.tm-map-list-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tm-dark-2);
  border-radius: 8px;
  transition: color .15s var(--tm-ease), background .15s var(--tm-ease), padding-left .15s var(--tm-ease);
}
.tm-map-list-link:hover {
  color: var(--tm-primary-dark);
  background: var(--tm-primary-wash);
  padding-left: 10px;
}
.tm-map-list-link .tm-map-flag { font-size: 17px; }

/* ==========================================================================
   8. RESPONSIVE / MOBILE
   ========================================================================== */
@media (max-width: 780px) {
  .tm-map-inner { padding: 40px 16px 64px; }
  .tm-map-hero { margin-bottom: 28px; }
  .tm-map-stage { height: 62vh; min-height: 380px; max-height: 620px; border-radius: var(--tm-radius-md); }
  .tm-map-hint { display: block; }
  .tm-map-filters { justify-content: flex-start; flex-wrap: nowrap; }

  /* Bottom sheet takeover */
  .tm-map-preview {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    width: 100%;
    max-height: 78vh;
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
    padding: 14px 22px 28px;
    transform: translateY(100%);
    z-index: 95;
    box-shadow: 0 -20px 60px rgba(15,23,42,.28);
  }
  .tm-map-preview.tm-map-is-open { transform: translateY(0); }
  .tm-map-sheet-handle {
    display: block;
    width: 40px; height: 4px;
    border-radius: 999px;
    background: var(--tm-border);
    margin: 0 auto 16px;
  }
  .tm-map-preview-close { top: 14px; }
  .tm-map-list-groups { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px 20px; }
}

/* Mobile spacing: the original TripMatch header is absolutely positioned on
   small screens. Reserve enough vertical room before the world-map hero so
   the 60px logo never overlaps "Reiseziele entdecken". */
@media (max-width: 768px) {
  .tm-map-wrapper .tm-map-inner {
    padding-top: 116px;
  }
}

@media (max-width: 480px) {
  .tm-map-preview-flag { font-size: 34px; }
  .tm-map-preview-title { font-size: 19px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tm-map-wrapper * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}