/* ============================================================
   gta6karte.de — Hero „Leonida Control Center" (nur Startseite)
   ------------------------------------------------------------
   CTAs + 3 Status-Kacheln, unter dem bestehenden Countdown im
   selben .cd-hero. Reines CSS, keine externen Assets, keine
   JS-Abhaengigkeit. Alles ueber die vorhandenen Theme-Tokens
   -> passt automatisch zu Dark / Vice City / Grassrivers / Police.
   z-index bleibt sauber: Kinder liegen via hero-atmosphere.css
   (.cd-hero>:not(.hero-atmo){z-index:1}) ueber der Atmo-Ebene.
   ============================================================ */

/* Anker-Ziel der Karte sauber unter dem Sticky-Header ausrichten. */
#map{scroll-margin-top:64px}

/* ---------- Dashboard-Type-Scale ----------
   EINE Skala fuer das ganze Hero-Instrument (Countdown, CTAs,
   Status-Kacheln). Vier Rollen:
   - Label   (--hero-fs-label): Uppercase-Kicker, 800, .07em
   - Wert    (--hero-fs-num):   Anton-Display wie die Countdown-
     Ziffern -> Zahlen sprechen ueberall dieselbe Sprache
   - Caption (--hero-fs-cap):   ruhige Woerter um den Wert, muted
   - Button  (--hero-fs-btn):   CTA-Text
   .cd-lbl (index.html) nutzt dieselben Label-Werte. */
.cd-hero{
  --hero-fs-label:10.5px; --hero-ls-label:.07em;
  --hero-fs-num:21px;
  --hero-fs-cap:12.5px;
  --hero-fs-sub:11px;
  --hero-fs-btn:14.5px;
}

/* ---------- CTA-Buttons ---------- */
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin:22px auto 0;max-width:540px}
.hc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-weight:800;font-size:var(--hero-fs-btn,14.5px);letter-spacing:.01em;
  text-decoration:none;
  padding:13px 22px;border-radius:var(--r-m);min-height:48px;
  transition:transform .14s,filter .14s,border-color .14s,color .14s,box-shadow .14s}
.hc-btn svg{width:18px;height:18px;flex:none}
.hc-btn.primary{background:var(--sunset);color:#0a0a12;
  box-shadow:0 6px 22px rgba(255,62,136,.26)}
.hc-btn.primary:hover{transform:translateY(-1px);filter:brightness(1.06);
  box-shadow:0 9px 30px rgba(255,62,136,.4)}
.hc-btn.ghost{background:rgba(255,255,255,.035);color:var(--ink);
  border:1px solid var(--line2)}
.hc-btn.ghost:hover{border-color:var(--teal);color:var(--teal);
  box-shadow:0 0 16px rgba(31,182,166,.18)}
.hc-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---------- Status-Kacheln (Glassmorphism) ---------- */
.hero-status{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;
  margin:20px auto 2px;max-width:560px}
.hs-tile{position:relative;overflow:hidden;padding:14px 14px;border-radius:var(--r-m);
  border:1px solid var(--line2);
  /* gleiche Oberflaeche wie die Countdown-Leiste (.cd-grid, index.html)
     -> Countdown + Status lesen sich als EIN Dashboard */
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 62%) rgba(9,15,21,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* dezente Neon-Akzentkante oben (Theme-Sunset) — bewusst leiser als die
   Ziffern, damit drei Kacheln nicht mit dem Countdown konkurrieren */
.hs-tile::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:var(--sunset);opacity:.55}
.hs-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:rgba(31,182,166,.14);color:var(--teal);margin-bottom:10px}
.hs-ic svg{width:17px;height:17px}
.hs-k{display:block;font-size:var(--hero-fs-label,10.5px);font-weight:800;text-transform:uppercase;
  letter-spacing:var(--hero-ls-label,.07em);color:var(--muted);margin-bottom:4px}
/* Wert-Zeile = ruhige Caption (muted) um einen betonten Wert herum:
   "Noch [134] Tage" / "[6] Leonida-Regionen erfasst" lesen sich so als
   Instrument-Wert + Beschriftung statt als fetter Fliesstext-Satz. */
.hs-v{display:block;font-size:var(--hero-fs-cap,12.5px);font-weight:600;color:var(--muted);line-height:1.4}
/* Hauptwert in der Display-Schrift der Countdown-Ziffern (Anton hat nur
   Schnitt 400) -> Zahlen im ganzen Dashboard aus einer Familie. Solid
   ink statt Verlauf: der grosse Countdown bleibt das Haupt-Instrument. */
.hs-num{font-family:var(--display);font-weight:400;font-size:var(--hero-fs-num,21px);
  line-height:1;letter-spacing:.01em;color:var(--ink);vertical-align:-.06em}
/* Kleiner Zusatztext unter dem Live-Wert (Datum bzw. Marker-Zaehler) */
.hs-sub{display:block;font-size:var(--hero-fs-sub,11px);font-weight:600;color:var(--faint);margin-top:3px}
.hs-live{display:inline-flex;align-items:center;gap:6px}
.hs-live::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--pink);
  box-shadow:0 0 7px var(--pink);flex:none;animation:hs-pulse 2s infinite}
@keyframes hs-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- Theme-Betonung: Vice City am auffaelligsten ---------- */
html[data-theme="vice-city"] .hs-tile{border-color:rgba(255,62,136,.32)}
html[data-theme="vice-city"] .hs-ic{background:rgba(34,211,238,.16);color:#22d3ee}
/* Vice-CTA-Glow bewusst NICHT mehr hier gesetzt: das globale Glow-Budget-Token
   --glow-strong (theme.css) regelt den Primaer-CTA jetzt einheitlich. */

/* ---------- Mobile: Buttons voll, Kacheln gestapelt (Icon links) + kompaktere Groessen ----------
   Breakpoint bewusst auf 640px angehoben, damit der Hero schon auf groesseren
   Phones/kleinen Tablets kompakter wird. Nur Groessen/Abstaende – Desktop unberuehrt. */
@media(max-width:640px){
  .cd-hero{--hero-fs-label:10px;--hero-fs-num:19px;--hero-fs-cap:12px;
    --hero-fs-sub:10.5px;--hero-fs-btn:14px}
  .hero-cta{gap:9px;margin-top:14px}
  .hc-btn{flex:1 1 100%;padding:11px 16px;min-height:44px}
  .hc-btn svg{width:17px;height:17px}
  .hero-status{grid-template-columns:1fr;gap:8px;max-width:360px;margin-top:14px}
  .hs-tile{display:flex;align-items:center;gap:11px;padding:10px 12px}
  .hs-ic{margin-bottom:0;width:26px;height:26px}
  .hs-ic svg{width:15px;height:15px}
  .hs-txt{min-width:0}
  .hs-k{margin-bottom:2px}
}

@media(prefers-reduced-motion:reduce){.hs-live::before{animation:none}}