/* ── design tokenek ───────────────────────────────────────────────────────── */
html{
  /* a ragadós nav 48 px magas — enélkül a #horgonyra ugrás alácsúsztatja a címet */
  scroll-padding-top:60px;
}
:root{
  color-scheme: dark;
  --bg:#0b1016; --surface:#0e141b; --surface-2:#131b24; --line:#1e2a36; --line-2:#2a3a4a;
  /* --ink-3 apró másodlagos szövegen is használt, ezért WCAG AA (4,5:1) fölött tartjuk.
     Mind a HÁROM felületen mérni kell, nem csak a --surface-en: a korábbi #6d8294 a
     --surface-en 4,65:1 volt (átmegy), a --surface-2-n viszont csak 4,36:1 (megbukik) —
     és a táblázatfejléc meg a park-panel épp azon ül. A #708597 mindhármon átmegy:
     --bg 4,99:1 · --surface 4,84:1 · --surface-2 4,54:1. */
  --ink:#eef4f8; --ink-2:#9fb0be; --ink-3:#708597;

  /* validált kategorikus paletta (sötét felület, ΔE-ellenőrzött) */
  --szel:#1f9ec7; --nap:#c98500; --atom:#9085e9; --fosszilis:#d95926; --megujulo:#199e70;
  --egyeb:#4a5866;
  --szel-feny:#6fd0ee;   /* csak szövegkiemelésre / ragyogásra */

  /* egy-hue-ú szekvenciális rámpa: sötét = szélcsend, világos = viharos */
  --w0:#09232b; --w1:#003646; --w2:#004a61; --w3:#005e7b; --w4:#007394;
  --w5:#0088a9; --w6:#2b9cbc; --w7:#56b0cd; --w8:#7cc3dc;

  --jo:#0ca30c; --figyelem:#fab219; --kritikus:#d03b3b;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
     font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:640;letter-spacing:-.02em;line-height:1.15}
p{margin:0 0 .9em}
a{color:var(--szel-feny)}

.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
@media(max-width:640px){.wrap{padding-inline:16px}}

.cimke{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
       color:var(--ink-3);font-family:var(--sans)}
.jegyzet{font-size:13px;color:var(--ink-2);line-height:1.62;max-width:74ch}
.jegyzet strong{color:var(--ink);font-weight:620}
.apro{font-size:12px;color:var(--ink-3);line-height:1.6}

/* ── fejléc ───────────────────────────────────────────────────────────────── */
header{border-bottom:1px solid var(--line);position:relative;overflow:hidden;background:
   radial-gradient(1100px 380px at 22% -12%, #123244 0%, transparent 62%), var(--surface)}
header>.wrap{position:relative;z-index:2}

/* ── fejléc-jelenet ──────────────────────────────────────────────────────────
   A fejléc hátterében szélpark-hologram áll (public/jelenet-szel.js — a holanap
   public/kozos/jelenetek.js szél-részének másolata, a stílusa a holanap
   public/kozos/jelenetek.css szél-részéből jön; változtatáskor mindkét helyen át kell vezetni).
   A szkript (szel.js) egyszer rajzolja a .fejlec-jelenet-be; a rotorok fordulatideje az élő
   kihasználtságból jön, szélcsendben (2 % alatt) állnak.
   Csak a fejléc sávjában mozog: a .on osztályt a szel.js adja, amíg a fejléc látszik és a fül
   nem rejtett — enélkül minden animáció szünetel. Csökkentett mozgásnál álló kép.
   Olvashatóság (WCAG AA, 4,5:1): a szöveg és a jelenet között a ::after sötétítő réteg áll. A jelenet legfényesebb
   pontja a közeli lapát (#e3f2f9, 93 %); a .82-es réteg alatt ez a --bg-nél alig világosabb (relatív fénysűrűség
   ≈ 0,04), így a --ink-2 szín alatta ≥ 5,3:1. A fejlécben a --ink-3 (#708597, a sima felületen is csak 4,5–5:1)
   itt nem elég: a fejléc saját, világosabb másodlagos szürkét kap (#94a7b7, a legfényesebb lapáton is ≥ 4,8:1).
   Mérés: a szövegdobozok alatti legfényesebb képpontból, a rotorok hét fázisában, három nyelven, 1440/1024/768/390 px-en. */
.fejlec-jelenet{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fejlec-jelenet svg{display:block;width:100%;height:100%}
/* csak ha van jelenet: nélküle (hiba, kikapcsolt JS) a fejléc megtartja a saját, világosabb hátterét */
.fejlec-jelenet:not(:empty)::after{content:"";position:absolute;inset:0;background:rgba(11,16,22,.82)}
header{--ink-3:#94a7b7}

.sc{--zold:#2fbf5a;--lassu:cubic-bezier(.2,.7,.15,1)}
/* A szünet/futás !important: a jelenet-osztályok az `animation` rövidítéssel írják az animációt, ami a
   play-state-et is `running`-ra állítaná, és az egyenlő vagy nagyobb specificitású szabály legyőzné a
   `.sc *` szünetet. */
.sc *{animation-play-state:paused!important}
.on .sc *{animation-play-state:running!important}
/* a `forog` keyframe-et lejjebb, a turbinás ábrák szakasza definiálja (ugyanez a tartalma) */
.sc .rot{transform-origin:0 0;animation:forog 6s linear infinite}
.sc .rot.all{animation:none}
.sc .jelzofeny{animation:jelzo 1.5s steps(1,end) infinite}
@keyframes jelzo{0%{opacity:1}50%{opacity:.12}}
.sc .tw{animation:villan 3.4s ease-in-out infinite}
@keyframes villan{0%,100%{opacity:.25}50%{opacity:1}}
.sc .felho{animation:sodor 26s ease-in-out infinite alternate}
.sc .felho.f2{animation-duration:34s}.sc .felho.f3{animation-duration:21s}
@keyframes sodor{from{transform:translateX(-50px)}to{transform:translateX(60px)}}
.sc .sv{stroke-dasharray:70 420;opacity:0;transition:opacity 1s;animation:fuj 2.8s linear infinite}
.on .sc .sv{opacity:.45}
@keyframes fuj{from{stroke-dashoffset:490}to{stroke-dashoffset:0}}
.sc .fenyes{opacity:0;transition:opacity 1.4s var(--lassu)}
.on .sc .fenyes{opacity:1}
.sc .m1,.sc .m2,.sc .m3{transition:transform .6s ease-out}
/* csökkentett mozgás: nincs forgás, villogás, sodródás, pásztázás; a jelenet álló kép */
@media (prefers-reduced-motion: reduce){
  .sc *{animation:none!important}
  .sc .fenyes,.sc .sv{transition:none!important}
  .sc .m1,.sc .m2,.sc .m3{transition:none!important}
}
.fej{padding-block:26px 22px;display:flex;flex-wrap:wrap;gap:22px;
     align-items:flex-end;justify-content:space-between}
.logo{font-size:clamp(34px,6.4vw,58px);font-weight:760;letter-spacing:-.045em;line-height:.94}
.logo em{font-style:normal;color:var(--szel-feny)}
.mottó{color:var(--ink-2);font-size:14px;margin-top:9px;max-width:46ch}
.testver{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.testver a{font-size:12px;font-weight:600;color:var(--ink-2);text-decoration:none;font-family:var(--sans);
  border:1px solid var(--line-2);border-radius:7px;padding:5px 10px;background:var(--surface-2)}
.testver a:hover,.testver a:focus-visible{color:var(--szel-feny);border-color:var(--szel)}
/* a két testvéroldal a saját színével (holanap.hu: borostyán, holatarolo.hu: lila) */
.testver a.nap-link{border-color:rgba(201,133,0,.55)}
.testver a.tarolo-link{border-color:rgba(155,108,240,.55)}
.testver a.energia-link{border-color:rgba(238,244,248,.32)}
.testver a.energia-link:hover,.testver a.energia-link:focus-visible{color:var(--ink);border-color:var(--ink-2)}
.ora{text-align:right;font-family:var(--mono);flex-shrink:0}
@media(max-width:620px){.fej{gap:14px}.ora{text-align:left;width:100%}
  .ora .t{font-size:22px}.logo{font-size:40px}}
.ora .t{font-size:27px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ora .d{font-size:12px;color:var(--ink-3);margin-top:2px}
.frissult{margin-top:7px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.frissult b{color:var(--szel-feny);font-weight:640}
/* frissesség: állapotpötty és késési sáv (a holagaz.hu „Lezárt gáznap" paneljének párja) */
/* Az állapot minden szélességen külön sor: a szövege (friss / „a szokásosnál jobban késik" /
   „a frissítés nem sikerül") különben a .ora szélességét változtatná, a flex-shrink:0-s .ora
   pedig 900–1000 px körül a logó alá törne, és az állapotváltáskor ugrana a fejléc. */
.allapot{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin:0 0 3px}
.allapot i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);display:block}
.allapot.friss i{background:#2fbf5a;box-shadow:0 0 6px rgba(47,191,90,.55)}
.allapot.kesik i{background:var(--figyelem)}
.allapot.kesik #allapot-szoveg{color:var(--figyelem)}
.allapot.elakadt i{background:var(--kritikus)}
.allapot.elakadt #allapot-szoveg{color:#f3a08a}
.kesesi-sav{display:flex;height:4px;border-radius:2px;background:var(--line);overflow:hidden;
  width:min(100%,250px);margin:9px 0 3px auto}
.kesesi-sav i{display:block;height:100%}
#k-szel{background:var(--szel)}
#k-halo{background:var(--line-2)}
.kesesi-cimke{display:flex;justify-content:space-between;width:min(100%,250px);margin-left:auto;
  font-size:10.5px;color:var(--ink-3)}
/* A magyarázat sora a késési sáv szélességéig törik. Enélkül a hosszabb változat („… további 40 percet")
   kiszélesítené a flex-shrink:0-s .ora-t, és a fejléc az állapottól függő szélességnél (850–870 px)
   törne a logó alá: ugyanazon a szélességen más magasság, állapotváltáskor ugrás. A hosszabb
   változat 250 px-en két sorba törik, a rövidebb egybe fér: két sort foglalunk le (3,2em =
   2 × az .apro 1,6-os sormagassága), hogy a fejléc magassága ne függjön a késés hosszától.
   Telefonon (≤620 px) a sor a fejléc szélességéig ér (max-width:none), de a két sort itt is
   lefoglaljuk: különben a rövid és a hosszú változat között 17,6 px-t ugrana a fejléc. */
#kesés-magyarazat{max-width:250px;min-height:3.2em;margin-left:auto}
@media(max-width:620px){.kesesi-sav,.kesesi-cimke,#kesés-magyarazat{margin-left:0}
  #kesés-magyarazat{max-width:none}
  .allapot{justify-content:flex-start}}

/* A nyelvváltó a fejléc jobb felső sarkában (az óra fölött); a mostani nyelv kiemelve (aria-current). Mindhárom
   nyelv a saját nevén és a saját lang-jával áll — ugyanúgy, mint a holanap.hu-n és a holatarolo.hu-n. */
.nyelvvalto{display:flex;justify-content:flex-end;gap:4px;margin:0 -8px 9px 0;font-family:var(--sans)}
.nyelvvalto a{font-size:12px;font-weight:600;color:var(--ink-3);text-decoration:none;padding:3px 8px;
  border:1px solid transparent;border-radius:6px}
.nyelvvalto a:hover,.nyelvvalto a:focus-visible{color:var(--ink);border-color:var(--line-2)}
.nyelvvalto a[aria-current]{color:var(--ink);border-color:var(--line-2);background:var(--surface-2)}
@media(max-width:620px){.nyelvvalto{justify-content:flex-start;margin:0 0 9px -8px}
  /* az angol és a német cím hosszabb a magyarnál: telefonon kisebb betű */
  html:not([lang="hu"]) .logo{font-size:clamp(28px,9vw,40px)}}
.testver a[lang="hu"]{white-space:nowrap}

nav{border-bottom:1px solid var(--line);background:rgba(11,16,22,.9);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    position:sticky;top:0;z-index:40}
nav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
nav .wrap::-webkit-scrollbar{display:none}
nav a{padding:13px 13px;font-size:12.5px;font-weight:560;color:var(--ink-3);
      text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
nav a:hover{color:var(--ink)}
nav a.aktiv{color:var(--szel-feny);border-bottom-color:var(--szel)}

/* ── szekciók ─────────────────────────────────────────────────────────────── */
section{padding-block:44px;border-bottom:1px solid var(--line)}
section>.wrap>h2{font-size:clamp(20px,3.1vw,27px);margin-bottom:8px}
.fejlec-sor{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;margin-bottom:15px}
.fejlec-sor .cimke{padding-top:2px}
.forras b{color:var(--ink-2);font-weight:700}

/* ── kártyák, csempék ─────────────────────────────────────────────────────── */
.racs{display:grid;gap:12px}
.r2{grid-template-columns:repeat(2,1fr)}
.r3{grid-template-columns:repeat(3,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.r4{grid-template-columns:repeat(2,1fr)}.r3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.r4,.r3,.r2{grid-template-columns:1fr}}

.csempe{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:16px 17px}
.csempe .cimke{display:block;margin-bottom:9px}
.csempe .ertek{font-size:30px;font-weight:700;letter-spacing:-.03em;
               font-variant-numeric:tabular-nums;line-height:1.05}
.csempe .ertek small{font-size:15px;font-weight:600;color:var(--ink-2);margin-left:3px;letter-spacing:0}
.csempe .alá{font-size:12.5px;color:var(--ink-3);margin-top:7px;line-height:1.5}

/* hero */
.hero{background:linear-gradient(168deg,#11242f 0%,var(--surface) 58%);
      border:1px solid var(--line-2);border-radius:14px;padding:20px 24px 18px;
      display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:30px;align-items:center}
@media(max-width:820px){.hero{grid-template-columns:1fr;gap:22px}}
.hero .szam{font-size:clamp(52px,10.5vw,92px);font-weight:780;letter-spacing:-.05em;
            line-height:.9;color:var(--szel-feny);font-variant-numeric:tabular-nums;
            text-shadow:0 0 44px rgba(31,158,199,.34)}
.hero .szam small{font-size:.31em;font-weight:620;color:var(--ink-2);
                  margin-left:8px;letter-spacing:-.01em;text-shadow:none}
.hero .mondat{font-size:14.5px;color:var(--ink-2);margin-top:13px;line-height:1.55}
.hero .mondat b{color:var(--ink);font-weight:640}

.delta{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:620;
       font-variant-numeric:tabular-nums;padding:2px 8px;border-radius:5px;
       background:var(--surface-2);border:1px solid var(--line)}
.delta.fel{color:#6ee7a8} .delta.le{color:#f3a08a} .delta.egy{color:var(--ink-3)}

/* ── diagramok ────────────────────────────────────────────────────────────── */
figure{margin:0}
figcaption{font-size:12.5px;color:var(--ink-3);margin-top:9px;line-height:1.55}
.diagram{background:var(--surface);border:1px solid var(--line);border-radius:11px;
         padding:16px 17px 12px;position:relative}
svg{display:block;overflow:visible}
.tengely{font-size:10.5px;fill:var(--ink-3);font-family:var(--mono)}
.racsvonal{stroke:var(--line);stroke-width:1}
.jelmagy{display:flex;flex-wrap:wrap;gap:6px 17px;margin-bottom:13px;align-items:center}
.jm{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.jm i{width:11px;height:11px;border-radius:3px;display:block;flex-shrink:0}
.jm.vonal i{height:3px;border-radius:2px;width:15px}

/* flottagörbe: a pontfelhő vásznon, fölötte az SVG a tengelyekkel és a görbékkel */
.gorbe-racs{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:12px;align-items:start}
@media(max-width:860px){.gorbe-racs{grid-template-columns:1fr}}
.gorbe-rajz{position:relative}
.gorbe-rajz canvas{position:absolute;left:0;top:0;pointer-events:none}
.gorbe-rajz svg{position:relative}
.turbina{cursor:default}.turbina:focus{outline:none}.turbina:focus-visible circle:first-child{stroke:var(--szel-feny);stroke-width:2}
@keyframes forog{to{transform:rotate(360deg)}}
.forgas-szunet .rotor{animation-play-state:paused!important}
@media (prefers-reduced-motion: reduce){.rotor{animation:none!important}}
.halo{paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.gorbe-ha label{display:block;font-size:13px;color:var(--ink-2);margin:2px 0 10px}
.gorbe-ha label b{color:var(--szel-feny);font-size:19px;font-variant-numeric:tabular-nums}
.gorbe-ha input[type=range]{width:100%;margin:0;accent-color:var(--szel)}
.gorbe-skala{display:flex;justify-content:space-between;font:10.5px var(--mono);color:var(--ink-3);margin:3px 0 16px}
.gorbe-ha .alá p{margin:0 0 .55em}
.gorbe-ha .alá b{color:var(--ink);font-weight:620}
/* a szomszédok: élő kártyák és az éves tábla */
.alcim{font-size:17px}
.szomszed-racs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.szomszed{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:13px 14px}
.szomszed.hu{border-color:var(--szel);background:#10262f}
.szomszed .nev{font-size:12.5px;font-weight:650;color:var(--ink-2)}
.szomszed .mw{font-size:24px;font-weight:720;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:4px 0 3px}
.szomszed .mw small{font-size:13px;color:var(--ink-2);font-weight:600;margin-left:2px;letter-spacing:0}
.szomszed .al{font-size:11.5px;color:var(--ink-3);line-height:1.5}
.szomszed .al b{color:var(--ink-2);font-weight:620}
.szomszed .al .egy{white-space:nowrap}   /* a „%-a” ne törjön a kötőjelnél */
/* A magyar kártya #10262f háttérén a --ink-3 csak 4,10:1 — a :root szerint minden felületen
   legalább 4,5:1 kell. */
.szomszed.hu .al{color:var(--ink-2)}
.szomszed-racs .tolt{grid-column:1/-1}     /* a „betöltés…" ne az első rácscellába szoruljon */
.regio-sav{display:inline-block;height:8px;border-radius:2px;background:var(--szel);vertical-align:middle;margin-right:8px}
tr.hu td{color:var(--ink);font-weight:650;background:rgba(31,158,199,.08)}

/* buborék */
.buborek{position:fixed;z-index:90;pointer-events:none;opacity:0;transition:opacity .09s;
  background:#0a1219;border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;
  font-size:12.5px;line-height:1.5;box-shadow:0 10px 34px rgba(0,0,0,.66);max-width:290px}
.buborek.lat{opacity:1}
.buborek .cim{font-weight:680;margin-bottom:5px;font-size:13px}
.buborek .sor{display:flex;justify-content:space-between;gap:16px;color:var(--ink-2)}
.buborek .sor b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:620}
.buborek .lab{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);
              font-size:11.5px;color:var(--ink-3)}

/* ── térkép ───────────────────────────────────────────────────────────────── */
.terkep-doboz{background:var(--surface);border:1px solid var(--line);border-radius:12px;
              padding:14px;position:relative}
/* Mobilon a térkép a legszűkebb, pedig ez a legfontosabb elem — kitörjük a
   szélső margóból, hogy visszanyerjük a 32 képpontot, és a jelölők is nagyobbak. */
@media(max-width:640px){
  .terkep-doboz{margin-inline:-16px;border-radius:0;border-left:none;border-right:none;padding:10px 8px}
  .terkep-vezerlo{padding-inline:6px}
  .skala,.park-panel{padding-inline:6px}
  .park-panel{margin-inline:6px}
}
.terkep-belso{position:relative;width:100%}
.terkep-belso canvas,.terkep-belso svg{position:absolute;inset:0;width:100%;height:100%}
.terkep-belso #mezo{z-index:0}
.terkep-belso #aramlas{z-index:1;pointer-events:none}
.terkep-belso svg{z-index:2}
.megye{fill:none;stroke:rgba(163,199,222,.34);stroke-width:.9;vector-effect:non-scaling-stroke;
       stroke-dasharray:5 4}
.megye-nev{fill:rgba(198,227,242,.55);font-size:12.5px;font-weight:620;letter-spacing:.04em;
           text-anchor:middle;paint-order:stroke;stroke:rgba(6,13,19,.85);stroke-width:3.5px;
           pointer-events:none;text-transform:uppercase}
.orszag{fill:none;stroke:rgba(205,232,248,.62);stroke-width:1.7;vector-effect:non-scaling-stroke;
        stroke-linejoin:round}
.park{cursor:pointer}
.park circle.mag{transition:stroke .12s}
.park:hover circle.mag,.park.kiv circle.mag,.park:focus-visible circle.mag{
  stroke:#fff!important;stroke-width:2.6!important}
.park:focus{outline:none}
.nyil{stroke:rgba(225,243,250,.5);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.skala{display:flex;align-items:center;gap:9px;margin-top:12px;flex-wrap:wrap}
.skala .sav{display:flex;height:9px;border-radius:5px;overflow:hidden;width:190px;flex-shrink:0}
.skala .sav i{flex:1}
.terkep-vezerlo{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.gomb{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
      border-radius:7px;padding:6px 12px;font-size:12.5px;font-weight:560;cursor:pointer;
      font-family:inherit}
.gomb:hover{border-color:var(--line-2);color:var(--ink)}
.gomb.aktiv{background:#13313f;border-color:var(--szel);color:var(--szel-feny)}
.nezd-meg{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:-4px 0 12px}
.nezd-meg .gomb{padding:4px 10px;font-size:12px}
.vs-sor[data-park]{cursor:pointer;border-radius:6px}
.vs-sor[data-park]:hover .vs-cimke,.vs-sor[data-park]:focus-visible .vs-cimke{color:var(--ink)}
.vs-sor[data-park]:focus-visible{outline:2px solid var(--szel);outline-offset:3px}

/* park panel */
.park-panel{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
            padding:15px 16px;margin-top:12px;min-height:118px}
.park-panel .nev{font-size:19px;font-weight:700;letter-spacing:-.02em}
.park-panel .megye{font-size:12px;color:var(--ink-3);margin-top:1px}
.park-adatok{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:13px}
@media(max-width:600px){.park-adatok{grid-template-columns:repeat(2,1fr)}}
.park-adatok div .cimke{display:block;margin-bottom:3px}
.park-adatok div .v{font-size:17px;font-weight:680;font-variant-numeric:tabular-nums}

/* ── táblázat ─────────────────────────────────────────────────────────────── */
.tabla-doboz{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13px;min-width:520px}
th,td{padding:9px 13px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
   font-weight:700;position:sticky;top:0;background:var(--surface-2)}
/* A .tabla-doboz az overflow-x:auto miatt görgetőkonténer, de nincs függőleges
   túlcsordulása, így a sticky fejléc valójában soha nem ragadt meg. A magasságkorlát
   adja meg neki azt, amihez ragadhat — és egyben láthatóvá teszi, hogy van még sor. */
@media(max-width:640px){.tabla-doboz{max-height:70vh;overflow-y:auto}}
td:first-child,th:first-child{text-align:left}
tbody tr:hover{background:rgba(31,158,199,.07)}
tbody tr:last-child td{border-bottom:none}
td.sz{font-variant-numeric:tabular-nums}
.pont{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:1px}

/* ── idővonal ─────────────────────────────────────────────────────────────── */
.idovonal{position:relative;padding-left:26px;margin-top:6px}
.idovonal::before{content:"";position:absolute;left:6px;top:7px;bottom:7px;width:2px;
                  background:linear-gradient(180deg,var(--line-2),var(--line))}
.esemeny{position:relative;padding-bottom:22px}
.esemeny::before{content:"";position:absolute;left:-24px;top:6px;width:10px;height:10px;
  border-radius:50%;background:var(--surface);border:2px solid var(--line-2)}
.esemeny.kiemelt::before{background:var(--szel);border-color:var(--szel);
  box-shadow:0 0 0 4px rgba(31,158,199,.19)}
.esemeny.tilt::before{background:var(--kritikus);border-color:var(--kritikus)}
.esemeny .ev{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.04em}
.esemeny .cim{font-weight:660;font-size:15px;margin-top:1px}
.esemeny .le{font-size:13px;color:var(--ink-2);margin-top:4px;line-height:1.56;max-width:64ch}

/* ── összehasonlító sávok ─────────────────────────────────────────────────── */
.vs{display:grid;gap:13px}
.vs-sor{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:center}
@media(max-width:560px){.vs-sor{grid-template-columns:100px minmax(0,1fr);gap:10px}}
.vs-cimke{font-size:13.5px;font-weight:620;text-align:right;color:var(--ink-2)}
.vs-cimke span{display:block;font-size:11px;color:var(--ink-3);font-weight:500}
.vs-sav{height:30px;border-radius:0 5px 5px 0;position:relative;min-width:2px;
        display:flex;align-items:center;transition:width .5s cubic-bezier(.22,1,.36,1)}
.vs-ertek{position:absolute;left:calc(100% + 10px);font-size:13px;font-weight:680;
          font-variant-numeric:tabular-nums;white-space:nowrap}
/* A sáv a sáv-sáv 86-88%-áig nyúlhat; a maradék 12-14% keskeny kijelzőn nem elég a
   címkének, és a túllógás a <html>-ig propagál — az egész oldal oldalirányban csúszkál
   (320 px-en 36, 390 px-en 27 képpont). Ilyenkor a címke a sávba kerül. A JS teszi rá,
   a sáv tényleges szélessége alapján. */
.vs-ertek.benn{left:auto;right:11px;color:#06131a}
.vs-sor{overflow:hidden}                 /* védőháló, ha a mérés mégis mellémenne */

/* kiemelt blokk */
.kiemelo{border-left:3px solid var(--szel);background:linear-gradient(90deg,#10262f,transparent 72%);
         padding:15px 18px;border-radius:0 9px 9px 0;margin-block:18px}
.kiemelo .fej{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--szel-feny);
              font-weight:700;padding:0;display:block;margin-bottom:5px}
.kiemelo p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.6}
.kiemelo p b{color:var(--ink)}

/* ── érvelő szekciók ─────────────────────────────────────────────────────────
   Ezek nem műszerek, hanem szöveg: a látogató ne adatot olvasson bennük, hanem
   állítást. A jelzést szerkezettel adjuk, nem külön színpalettával — világos
   felületen a szél teal színe nem éri el a telítettségi küszöböt, és külön
   világos paletta azt jelentené, hogy ugyanaz az adat két hue-t kap. */
section.erv{background:linear-gradient(180deg,#14161c 0%,#111318 100%);
            border-top:1px solid rgba(250,178,25,.30)}
section.erv>.wrap>h2{font-size:clamp(23px,3.6vw,33px);max-width:20ch;line-height:1.1}
section.erv .jegyzet,section.erv .esemeny .le{font-size:17px;line-height:1.66;
            color:var(--ink);max-width:66ch}
section.erv .cimke{color:var(--figyelem);opacity:.85}
section.erv .forras b{color:var(--figyelem)}   /* a kiemelt szó a legfényesebb, nem a szürke .forras b */
section.erv .csempe{background:rgba(255,255,255,.028);border-color:rgba(255,255,255,.09)}
section.erv .kiemelo{border-left-color:var(--figyelem);
            background:linear-gradient(90deg,rgba(250,178,25,.09),transparent 72%)}
section.erv .kiemelo .fej{color:var(--figyelem)}
section.erv .esemeny .cim{font-size:16.5px}

.kettos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
@media(max-width:820px){.kettos{grid-template-columns:1fr}}

.tolt{color:var(--ink-3);font-size:13px;padding:22px 0;text-align:center}
.hiba{color:#f3a08a;font-size:13px;padding:14px;background:rgba(208,59,59,.09);
      border:1px solid rgba(208,59,59,.28);border-radius:9px}

footer{padding-block:34px 46px;color:var(--ink-3);font-size:12.5px;line-height:1.7}
footer b{color:var(--ink-2);font-weight:620}
.kolofon{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.tabla-kapcsolo{background:none;border:none;color:var(--ink-3);font-size:11.5px;
  cursor:pointer;text-decoration:underline;padding:0;font-family:inherit;margin-top:9px}
.tabla-kapcsolo:hover{color:var(--szel-feny)}
[hidden]{display:none!important}