body.home-page .hero-live-map {
      position: relative;
      z-index: 0;
      isolation: isolate;
      width: 100%;
      aspect-ratio: 1448 / 1086;
      border-radius: 20px;
      overflow: hidden;
      /* Map-ähnlicher Gradient als LCP-Anchor: ist sofort da, bevor Tiles laden.
         Töne aus Carto Positron: warmes Beige-Grau Basis + sanfter Grün-Hauch
         (Park-Hint) + zarter Blau-Hauch (Donau-Hint). */
      background:
        radial-gradient(60% 35% at 75% 25%, rgba(207, 227, 210, 0.55) 0%, transparent 70%),
        radial-gradient(70% 40% at 25% 80%, rgba(207, 227, 210, 0.35) 0%, transparent 70%),
        radial-gradient(45% 25% at 80% 65%, rgba(188, 215, 232, 0.32) 0%, transparent 75%),
        linear-gradient(135deg, #f1f2f4 0%, #e6e8ec 100%);
      box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.04),
        0 18px 42px rgba(15, 23, 42, 0.10);
    }
    body.home-page .hero-live-map-tiles {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      background: #e5e9ee;
    }
    body.home-page .hero-live-map-live {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }
    body.home-page .hero-live-map-live .maplibregl-canvas {
      outline: none;
    }
    body.home-page .hero-live-map-live .maplibregl-ctrl-attrib {
      font-size: 9px;
      color: #6b7280;
      background: rgba(255, 255, 255, 0.72);
    }
    body.home-page .hero-live-map-live .maplibregl-ctrl-logo {
      display: none;
    }
    body.home-page .hero-live-map::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(120% 90% at 50% 50%, rgba(255,255,255,0) 55%, rgba(15,23,42,0.07) 100%);
      z-index: 1;
    }

    /* LIVE Badge */
    body.home-page .hero-live-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      z-index: 600;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px 7px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
      color: #111827;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.02em;
      line-height: 1;
    }
    body.home-page .hero-live-badge .hero-live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ef4444;
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
      animation: heroLivePulse 1.6s ease-out infinite;
    }
    body.home-page .hero-live-badge .hero-live-label {
      color: #ef4444;
      font-weight: 900;
      letter-spacing: 0.08em;
    }
    body.home-page .hero-live-badge .hero-live-sep {
      width: 1px;
      height: 12px;
      background: #d1d5db;
    }
    body.home-page .hero-live-badge .hero-live-count strong {
      color: #00a63e;
      font-weight: 900;
    }
    body.home-page .hero-live-badge.is-next-opening .hero-live-dot {
      background: #16a34a;
      box-shadow: none;
      animation: none;
    }
    body.home-page .hero-live-badge.is-next-opening .hero-live-label {
      color: #16834a;
    }
    body.home-page .hero-live-badge .hero-live-count {
      white-space: nowrap;
    }

    /* Top-Down Van (AVIF-Sprites, Aspekt pro Variante) */
    body.home-page .hero-live-van {
      position: absolute;
      z-index: 500;
      pointer-events: none;
      opacity: 1;
      transform: translate3d(0, 0, 0) rotate(0deg);
      transition: opacity 1.4s ease;
      will-change: transform, opacity;
    }
    body.home-page .hero-live-van.is-fading { opacity: 0; }
    body.home-page .hero-live-van .hero-live-van-body {
      display: block;
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.28));
    }
    /* Pro-Variante: einheitliche Breite (Realität), Höhe nach Fahrzeuglänge */
    body.home-page .hero-live-van--m,
    body.home-page .hero-live-van--m-dark,
    body.home-page .hero-live-van--m-green,
    body.home-page .hero-live-van--m-yellow {
      width: 18px; height: 37px; margin: -18.5px 0 0 -9px;
    }
    body.home-page .hero-live-van--s {
      width: 18px; height: 35px; margin: -17.5px 0 0 -9px;
    }
    body.home-page .hero-live-van--l {
      width: 18px; height: 46px; margin: -23px 0 0 -9px;
    }
    body.home-page .hero-live-van--box,
    body.home-page .hero-live-van--box-green {
      width: 18px; height: 41px; margin: -20.5px 0 0 -9px;
    }
    body.home-page .hero-live-van .hero-live-van-pulse {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 28px;
      height: 28px;
      margin: -14px 0 0 -14px;
      border-radius: 50%;
      background: rgba(0, 184, 64, 0.22);
      transform: scale(0.4);
      animation: heroVanPulse 2.8s ease-out infinite;
      z-index: -1;
      transition: opacity 0.5s ease;
    }
    /* Parkende/pausierende Vans: kein Puls (sie sind nicht aktiv unterwegs) */
    body.home-page .hero-live-van.is-parked .hero-live-van-pulse {
      opacity: 0;
    }

    @keyframes heroLivePulse {
      0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
      70%  { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); }
      100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    }
    @keyframes heroVanPulse {
      0%   { transform: scale(0.35); opacity: 0.7; }
      80%  { transform: scale(1.7);  opacity: 0; }
      100% { transform: scale(1.7);  opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      body.home-page .hero-live-van,
      body.home-page .hero-live-van-pulse,
      body.home-page .hero-live-badge .hero-live-dot {
        animation: none !important;
      }
    }

    @media (max-width: 767px) {
      body.home-page .hero-live-map {
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
      }
    }