/* ═══════════════════════════════════════════════════════════════════════════
   landing.css — a csapat nyilvános honlapja: arculat, főoldal, naptár, zöld számsáv.

   A vezetői rendszer (software) arculatára épül — ugyanaz a bordó, erdőzöld és
   parázs, ugyanaz a két betűtípus —, csak VILÁGOS, és sokkal mozgékonyabb.
   Minden animáció kikapcsol, ha a látogató a rendszerében kevesebb mozgást kért
   (prefers-reduced-motion) — lásd a fájl végét.

   A hosszú oldal többi szakaszának (Cserkészet, A csapat, Felépítés, Vezetőség, Galéria,
   Szülőknek) és a menünek a szabályai az oldalak.css-ben vannak, a szakaszonkénti
   háttér a hatter.css-ben; ezeket EZUTÁN kell betölteni.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bordo:#A4281F; --bordo-600:#8C201A; --cimer:#8D1626;
  --parazs:#E08A3C; --mez:#F4B860;
  --erdo:#3E5C48; --erdo-300:#7FA88C; --menta:#E4F0E5;
  --egbolt:#5E93B8; --egbolt-100:#DDEBF5;
  --papir:#FBF5EC; --papir-2:#FFFDF8; --krem:#F4E8D8;
  --tinta:#2A1F1C; --halk:#6B5B54; --vonal:rgba(42,31,28,.10);
  --cim-betu:'Space Grotesk', system-ui, sans-serif;
  --szoveg-betu:'Inter', system-ui, sans-serif;
  --kerek:22px; --kerek-sm:14px; --pill:999px;
  --arnyek:0 14px 40px rgba(122,58,30,.12);
  --rugos:cubic-bezier(.34,1.56,.64,1);
  --sima:cubic-bezier(.22,.61,.36,1);
  --oldal:clamp(16px, 4vw, 40px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; background:var(--papir); color:var(--tinta);
  font-family:var(--szoveg-betu); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:
    radial-gradient(60rem 40rem at 110% -10%, rgba(244,184,96,.22), transparent 60%),
    radial-gradient(50rem 36rem at -20% 20%, rgba(127,168,140,.18), transparent 60%);
}
h1,h2,h3{font-family:var(--cim-betu); line-height:1.1; letter-spacing:-.02em; margin:0}
a{color:var(--bordo)}
img{max-width:100%; display:block}
:focus-visible{outline:3px solid var(--parazs); outline-offset:3px; border-radius:6px}

.ugro{position:absolute; left:-999px; top:8px; background:var(--tinta); color:#fff; padding:8px 14px; border-radius:8px; z-index:100}
.ugro:focus{left:8px}

/* ─── Gombok ─── */
.gomb{
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:12px 22px;
  border-radius:var(--pill); font-weight:600; font-size:16px; text-decoration:none;
  border:2px solid transparent; cursor:pointer;
  transition:transform .25s var(--rugos), box-shadow .25s var(--sima), background .2s;
}
.gomb:hover{transform:translateY(-3px) rotate(-1deg)}
.gomb:active{transform:scale(.96)}
.gomb--fo{background:var(--bordo); color:#fff; box-shadow:0 8px 0 var(--cimer), 0 14px 30px rgba(164,40,31,.3)}
.gomb--fo:hover{box-shadow:0 11px 0 var(--cimer), 0 18px 34px rgba(164,40,31,.32)}
.gomb--masod{background:#fff; color:var(--tinta); border-color:var(--tinta); box-shadow:0 6px 0 var(--tinta)}
.gomb--kontur{background:transparent; color:var(--bordo); border-color:var(--bordo)}
.gomb--kontur svg{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.gomb--kicsi{min-height:40px; padding:8px 16px; font-size:14px}
.gomb-sor{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.nyil-le{display:inline-block; animation:pattog 1.6s var(--sima) infinite}

/* ─── Fejléc ─── */
.fejlec{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:18px;
  padding:12px var(--oldal); background:rgba(251,245,236,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--vonal);
}
.marka{display:flex; align-items:center; gap:10px; color:var(--tinta); text-decoration:none; font-family:var(--cim-betu); font-size:15px; min-width:0}
.marka img{border-radius:50%; transition:transform .5s var(--rugos)}
.marka:hover img{transform:rotate(-12deg) scale(1.08)}
.marka span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fomenu{display:flex; gap:22px; margin-left:auto}
.fomenu a{color:var(--tinta); text-decoration:none; font-weight:500; font-size:15px; position:relative}
.fomenu a::after{content:""; position:absolute; left:0; right:100%; bottom:-4px; height:3px; border-radius:3px; background:var(--parazs); transition:right .3s var(--sima)}
.fomenu a:hover::after{right:0}

/* ─── Hős ─── */
.hos{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,5vw,64px); align-items:center;
  max-width:1200px; margin:0 auto; padding:clamp(32px,6vw,80px) var(--oldal) 48px;
}
.jelvenyke{
  display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 12px; border-radius:var(--pill);
  background:#fff; border:2px solid var(--tinta); font-weight:600; font-size:14px;
  box-shadow:0 4px 0 var(--tinta); animation:beuszik .7s var(--rugos) both;
}
.pulzus{width:10px; height:10px; border-radius:50%; background:var(--parazs); box-shadow:0 0 0 0 rgba(224,138,60,.6); animation:pulzal 1.8s infinite}
.hos-felirat{margin:22px 0 8px; font-family:var(--cim-betu); font-weight:600; color:var(--bordo); letter-spacing:.02em}
.hos h1{font-size:clamp(46px,8.5vw,96px)}
.ugralo{display:block; color:var(--bordo)}
.ugralo span{display:inline-block; animation:betu-be .8s var(--rugos) both, hullam 6s ease-in-out infinite; animation-delay:calc(var(--i) * 70ms), calc(2s + var(--i) * 90ms)}
/* Egy szó betűi együtt maradnak: keskeny oszlopban sem kerül a „!” egyedül a következő sorba. */
.ugralo .szo{display:inline-block; white-space:nowrap; font-weight:inherit}
.hos-sor2{display:block; font-size:.42em; margin-top:10px; color:var(--tinta); animation:beuszik .8s .7s var(--sima) both}
.aldiszes{position:relative; white-space:nowrap}
.aldiszes svg{position:absolute; left:0; bottom:-12px; width:100%; height:16px; overflow:visible}
.aldiszes path{fill:none; stroke:var(--parazs); stroke-width:6; stroke-linecap:round; stroke-dasharray:340; stroke-dashoffset:340; animation:rajzol 1s 1.3s var(--sima) forwards}
.hos-lead{font-size:clamp(17px,2vw,19px); color:var(--halk); max-width:34em; margin:28px 0 0; animation:beuszik .8s .9s var(--sima) both}

.hos-kep{position:relative; animation:felbukkan 1s .2s var(--rugos) both}
.tabor{width:100%; height:auto; display:block; border-radius:44px; box-shadow:var(--arnyek), 0 0 0 6px #fff; transform:rotate(1.5deg)}
.cimer-gomb{
  position:absolute; top:-26px; left:-22px; z-index:2; padding:0; border:0; background:none; cursor:pointer;
  border-radius:50%; animation:lebeg 5s ease-in-out infinite;
}
.cimer-gomb img{width:clamp(84px,11vw,132px); height:auto; border-radius:50%; box-shadow:0 10px 30px rgba(141,22,38,.35), 0 0 0 5px #fff; transition:transform .5s var(--rugos)}
.cimer-gomb:hover img{transform:rotate(-14deg) scale(1.06)}

/* A jelenet mozgásai. Ahol a CSS transform-ot használ, ott a belső csoport mozog,
   nem az, amelyiknek transform attribútuma van — a CSS felülírná azt. */
.tabor *{transform-box:fill-box}
.nap-sugarak{transform-origin:center; animation:forog 24s linear infinite}
.felho{animation:sodrodik 14s ease-in-out infinite alternate}
.felho--2{animation-duration:18s; animation-delay:-6s}
.madar{transform:translate(-60px,150px); animation:repul 16s linear infinite}
.madar--2{animation-delay:-7s; animation-duration:19s}
.ring{transform-origin:50% 100%; animation:ringat 5s ease-in-out infinite}
.ring--2{animation-delay:-1.5s}
.ring--3{animation-delay:-3s}
.zaszlo{transform-origin:0 50%; animation:lobog 1.4s ease-in-out infinite}
.sator-ajto{transform-origin:0 0; animation:ajto 4s ease-in-out infinite}
.tabla{transform-origin:0 100%; animation:billeg 3.5s ease-in-out infinite}
.tuz-feny{transform-origin:center; animation:izzik 1.8s ease-in-out infinite}
.lang{transform-origin:50% 100%}
.lang--1{animation:lobban 1.1s ease-in-out infinite}
.lang--2{animation:lobban 0.9s ease-in-out infinite reverse}
.lang--3{animation:lobban 0.7s ease-in-out infinite}
.szikra{opacity:0; animation:szall 3s var(--d) ease-out infinite}

/* ─── Szalag ─── */
.szalag{overflow:hidden; background:var(--tinta); color:var(--papir); transform:rotate(-1.5deg); margin:24px -20px 0; padding:14px 0}
.szalag-sav{display:flex; gap:28px; width:max-content; animation:fut 28s linear infinite; font-family:var(--cim-betu); font-weight:700; font-size:clamp(20px,3vw,28px)}
.szalag-sav i{font-style:normal; color:var(--mez)}
.szalag:hover .szalag-sav{animation-play-state:paused}

/* ─── Szakaszok ─── */
.szakasz{max-width:1200px; margin:0 auto; padding:clamp(64px,9vw,112px) var(--oldal) 0}
.szakasz-fej{max-width:760px; margin-bottom:40px}
.szakasz-fej h2{font-size:clamp(34px,5vw,54px); margin:14px 0 14px}
.szakasz-fej p{color:var(--halk); font-size:18px; margin:0}
.matrica{
  display:inline-block; padding:6px 14px; border-radius:10px; background:var(--bordo); color:#fff;
  font-family:var(--cim-betu); font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase;
  transform:rotate(-4deg); box-shadow:3px 3px 0 var(--tinta);
}
.matrica--zold{background:var(--erdo)}
.matrica--narancs{background:var(--parazs); color:var(--tinta)}

/* ─── Rajok ─── */
.rajok{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.raj{
  position:relative; padding:26px 24px 24px; border-radius:var(--kerek); background:var(--papir-2);
  border:2px solid var(--tinta); box-shadow:6px 6px 0 var(--tinta);
  transform:rotate(calc((var(--i) - 1) * 1.6deg));
  transition:transform .35s var(--rugos), box-shadow .35s var(--sima);
  animation:felbukkan .8s calc(var(--i) * 120ms) var(--rugos) backwards;
  animation-timeline:view(); animation-range:entry 0% entry 60%;
}
.raj:hover{transform:rotate(0) translateY(-8px); box-shadow:10px 12px 0 var(--tinta)}
.raj--egbolt{background:var(--egbolt-100)}
.raj--erdo{background:var(--menta)}
.raj--parazs{background:#FCE6CF}
.raj-fej{display:flex; align-items:baseline; gap:6px}
.raj-kor{font-family:var(--cim-betu); font-weight:700; font-size:40px; color:var(--bordo)}
.raj-kor-felirat{font-weight:600; color:var(--halk)}
.raj h3{font-size:24px; margin:4px 0 8px}
.raj p{margin:0 0 16px; color:var(--halk); font-size:15.5px}
.orsok{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.orsok li{
  padding:5px 12px; border-radius:var(--pill); background:#fff; border:1.5px solid var(--tinta);
  font-size:13.5px; font-weight:600; transition:transform .3s var(--rugos);
}
/* A mancs SVG, nem emoji: az emoji kis méretben eszközönként másképp (vagy egyszínű
   pöttyként) jelenik meg, ez viszont mindenhol ugyanaz a bordó mancs. */
.orsok li{display:inline-flex; align-items:center; gap:6px}
.orsok li::before{content:""; width:13px; height:13px; flex:none; transition:transform .3s var(--rugos);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A4281F'%3E%3Cellipse cx='12' cy='16' rx='5.2' ry='4.3'/%3E%3Cellipse cx='5.4' cy='10' rx='2.2' ry='2.8'/%3E%3Cellipse cx='9.6' cy='5.8' rx='2.2' ry='2.9'/%3E%3Cellipse cx='14.4' cy='5.8' rx='2.2' ry='2.9'/%3E%3Cellipse cx='18.6' cy='10' rx='2.2' ry='2.8'/%3E%3C/svg%3E") center/contain no-repeat}
.orsok li:hover::before{transform:rotate(-20deg) scale(1.2)}
.orsok li:hover{transform:translateY(-3px) rotate(-4deg)}

/* ─── Tevékenységek ─── */
.tevekenysegek{list-style:none; padding:0; margin:48px 0 0; display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.tevekenysegek li{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  padding:20px 10px; border-radius:var(--kerek-sm); background:#fff; border:1px solid var(--vonal);
  transition:transform .35s var(--rugos), box-shadow .3s;
  animation:felbukkan .7s calc(var(--i) * 80ms) var(--rugos) backwards;
  animation-timeline:view(); animation-range:entry 0% entry 70%;
}
.tevekenysegek li:hover{transform:translateY(-6px) rotate(2deg); box-shadow:var(--arnyek)}
.tev-ikon{font-size:34px; line-height:1; transition:transform .4s var(--rugos)}
.tevekenysegek li:hover .tev-ikon{transform:scale(1.25) rotate(-10deg)}
.tevekenysegek strong{font-family:var(--cim-betu); font-size:15.5px}
.tevekenysegek small{color:var(--halk); font-size:13px; line-height:1.4}

/* ─── Számok: a zöld sáv ───
   Teljes szélességű, hullámos szélű sáv. CSAK akkor látszik, ha a végpont valódi
   számokat adott (a landing.js kezeli a [hidden]-t): kitalált szám sehol nem jelenik
   meg. A minta-számok csak fájlként megnyitva vagy ?minta=1-gyel látszanak, külön
   „Minta számok” jelöléssel. A sáv helye a főoldalon van; a számokat ugyanaz a
   végpont adja, mint a naptárat. */
:root{--zold-sav:#34634A; --zold-sav-mely:#2A5240}
.szam-sav{
  position:relative; margin-top:clamp(96px,11vw,144px); color:var(--papir); isolation:isolate;
  background:
    radial-gradient(42rem 24rem at 92% -20%, rgba(244,184,96,.28), transparent 62%),
    radial-gradient(34rem 22rem at 4% 120%, rgba(127,168,140,.35), transparent 60%),
    radial-gradient(rgba(255,255,255,.075) 1.6px, transparent 1.7px) 0 0/28px 28px,
    linear-gradient(180deg, var(--zold-sav), var(--zold-sav-mely));
}
.szam-sav[hidden]{display:none}
.szam-hullam{position:absolute; left:0; width:100%; height:clamp(30px,4.4vw,60px); display:block; pointer-events:none}
.szam-hullam--fent{bottom:calc(100% - 1px); fill:var(--zold-sav)}
.szam-hullam--lent{top:calc(100% - 1px); fill:var(--zold-sav-mely); transform:scaleY(-1)}
.szam-sav-belso{position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:clamp(48px,6vw,72px) var(--oldal) clamp(52px,6vw,76px)}
.szam-sav-fej{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px; margin-bottom:clamp(28px,4vw,44px)}
.szam-sav-fej > div{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.szam-sav h2{font-size:clamp(30px,4.4vw,46px); color:#fff; margin:0}
.szam-sav .matrica{background:var(--mez); color:var(--tinta); box-shadow:3px 3px 0 rgba(0,0,0,.28)}
.szam-minta{display:inline-block; padding:4px 12px; border-radius:var(--pill); background:rgba(255,255,255,.14); border:1px dashed rgba(255,255,255,.55); font-size:13px; font-weight:600}
.szam-minta[hidden]{display:none}
.szamok{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:clamp(14px,2vw,22px)}
.szam-csempe{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  padding:26px 14px 22px; border-radius:var(--kerek); background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.26); box-shadow:0 6px 0 rgba(0,0,0,.18);
  transition:transform .35s var(--rugos), background .25s;
  animation:felbukkan .8s calc(var(--i) * 110ms) var(--rugos) backwards;
  animation-timeline:view(); animation-range:entry 0% entry 70%;
}
.szam-csempe[hidden]{display:none}
.szam-csempe:hover{transform:translateY(-8px) rotate(-1.5deg); background:rgba(255,255,255,.14)}
.szam-ikon{display:grid; place-items:center; width:64px; height:64px; margin-bottom:8px; border-radius:50%; background:rgba(244,184,96,.18); color:var(--mez); transition:transform .45s var(--rugos)}
.szam-csempe:hover .szam-ikon{transform:rotate(-12deg) scale(1.12)}
.szam-ikon svg{width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.szam-ikon svg.tomor{fill:currentColor; stroke:none}
.szamok strong{display:block; font-family:var(--cim-betu); font-size:clamp(46px,6.4vw,72px); font-weight:700; color:var(--mez); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.szamok span{font-size:15.5px; line-height:1.35; opacity:.92}
@media (max-width:560px){
  /* Telefonon két oszlop: öt csempe egymás alatt egy képernyőnyi görgetés lenne. */
  .szamok{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .szam-csempe{padding:20px 8px 16px}
  .szam-ikon{width:52px; height:52px}
  .szam-ikon svg{width:26px; height:26px}
  .szam-csempe:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ─── Naptár (a tartalmát a landing.js rajzolja) ─── */
.naptar-allapot{display:inline-flex; align-items:center; gap:10px; font-size:15px !important}
.elo-pont{width:10px; height:10px; border-radius:50%; background:#3FA463; box-shadow:0 0 0 0 rgba(63,164,99,.5); animation:pulzal-zold 2s infinite}
.naptar{min-height:160px}
.naptar-ures{padding:40px 24px; border-radius:var(--kerek); background:#fff; border:2px dashed var(--vonal); text-align:center; color:var(--halk)}
.naptar-reszlet{margin:16px auto 0; max-width:520px; text-align:left; font-size:13.5px; color:var(--halk)}
.naptar-reszlet summary{cursor:pointer; font-weight:600; text-align:center}
.naptar-reszlet p{margin:8px 0 0; word-break:break-word}
.naptar-labjegyzet{color:var(--halk); font-size:14.5px; margin:24px 0 0}

/* ─── Ösvény ─── */
.osveny{list-style:none; padding:0 0 0 8px; margin:0; position:relative; max-width:640px}
.osveny::before{content:""; position:absolute; left:31px; top:24px; bottom:24px; border-left:4px dashed var(--erdo-300)}
.osveny li{
  position:relative; display:flex; align-items:center; gap:18px; padding:12px 0;
  animation:beuszik-bal .7s calc(var(--i) * 120ms) var(--rugos) backwards;
  animation-timeline:view(); animation-range:entry 0% entry 70%;
}
.osveny-pont{
  flex:none; width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:3px solid var(--tinta); font-family:var(--cim-betu); font-weight:700; z-index:1;
}
.osveny li.kesz .osveny-pont{background:var(--erdo); color:#fff; border-color:var(--erdo)}
.osveny strong{display:block; font-family:var(--cim-betu); font-size:19px}
.osveny small{color:var(--halk); font-size:15px}

/* ─── Lábléc ─── */
.lab{margin-top:clamp(80px,10vw,128px); background:var(--cimer); color:#FCEFEA}
.lab-hullam{display:block; width:100%; height:60px; fill:var(--cimer); background:var(--papir)}
.lab-belso{max-width:1200px; margin:0 auto; padding:24px var(--oldal) 48px; text-align:center}
.lab-belso p{margin:6px 0}
.lab a{color:#FFD9A8}
.lab-koszones{font-family:var(--cim-betu); font-weight:700; font-size:clamp(28px,4vw,40px)}
.liliom{display:inline-block; transform-origin:50% 100%; animation:ringat 3s ease-in-out infinite}

/* ─── A hős rétegei ───
   A hulló levelek (az „évszak-vászon”) már nem a hősben ülnek, hanem az egész lap mögött:
   lásd hatter.css / hatter.js. */
.hos{position:relative}
.hos-szoveg,.hos-kep{position:relative; z-index:1}

/* ─── Görgetésjelző ─── */
.gorgetes-csik{
  position:fixed; top:0; left:0; right:0; height:4px; z-index:60; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--erdo-300), var(--mez), var(--parazs), var(--bordo));
}

/* ─── Naptár: állapotsor ─── */
.naptar-allapot.tolt .elo-pont{background:var(--parazs); animation:pulzal 1s infinite}
.naptar-allapot.hibas .elo-pont{background:#B9AEA4; animation:none}
.minta-sav{
  margin:0 0 18px; padding:10px 16px; border-radius:var(--kerek-sm); font-size:14.5px; font-weight:600;
  background:repeating-linear-gradient(-45deg, #FFF4D6 0 14px, #FCE9B8 14px 28px); border:2px dashed var(--parazs);
}
.naptar-ures p{margin:6px 0}
.naptar-ures .gomb{margin-top:12px}
.naptar-ures-ikon{font-size:48px; animation:lebeg 4s ease-in-out infinite; display:inline-block}
.naptar-ures-cim{font-family:var(--cim-betu); font-weight:700; font-size:20px; color:var(--tinta)}

/* ─── Következő kaland ─── */
.kovetkezo{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:28px clamp(20px,3vw,36px); border-radius:28px; margin-bottom:28px; color:#fff; overflow:hidden;
  background:linear-gradient(135deg, var(--bordo), var(--cimer)); box-shadow:0 18px 40px rgba(141,22,38,.28);
  animation:felbukkan .7s var(--rugos) backwards;
}
.kovetkezo--tura{background:linear-gradient(135deg, #4F7A5C, var(--erdo))}
.kovetkezo--mozi{background:linear-gradient(135deg, #6EA3C7, #3F6F93)}
.kovetkezo::before{
  content:""; position:absolute; width:340px; height:340px; right:-90px; top:-120px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); animation:lebeg 7s ease-in-out infinite;
}
.kovetkezo-bal{position:relative; min-width:0; flex:1 1 320px}
.kovetkezo-felirat{
  display:inline-block; padding:4px 12px; border-radius:var(--pill); background:rgba(255,255,255,.18);
  font-family:var(--cim-betu); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
}
.kovetkezo h3{font-size:clamp(26px,3.6vw,38px); margin:10px 0 8px}
.kovetkezo-meta{margin:0; opacity:.92; font-size:15.5px}
.visszaszamlalo{position:relative; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.vsz-egyseg{
  min-width:72px; padding:10px 8px; border-radius:16px; text-align:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
}
.vsz-egyseg strong{display:block; font-family:var(--cim-betu); font-size:32px; line-height:1.1; font-variant-numeric:tabular-nums}
.vsz-egyseg span{font-size:12.5px; opacity:.85}
.vsz-egyseg--mp strong{animation:tik 1s steps(1) infinite}
.vsz-utana{font-family:var(--cim-betu); font-weight:700; font-size:22px}
.most-zajlik{font-family:var(--cim-betu); font-weight:700; font-size:26px; animation:pattog 1.2s ease-in-out infinite; display:inline-block}

/* ─── Kis naptár + lista ─── */
.naptar-racs{display:grid; grid-template-columns:330px 1fr; gap:28px; align-items:start}
.kisnaptar{
  position:sticky; top:96px; padding:20px; border-radius:var(--kerek); background:#fff;
  border:2px solid var(--tinta); box-shadow:6px 6px 0 var(--tinta);
}
.kisnaptar-fej{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.kisnaptar-cim{font-family:var(--cim-betu); font-size:17px}
.kisnaptar-lapoz{
  width:36px; height:36px; border-radius:50%; border:2px solid var(--tinta); background:var(--papir);
  font-size:20px; line-height:1; cursor:pointer; transition:transform .25s var(--rugos);
}
.kisnaptar-lapoz:hover:not(:disabled){transform:scale(1.12) rotate(-8deg)}
.kisnaptar-lapoz:disabled{opacity:.3; cursor:default}
.kisnaptar-racs{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center}
.kisnaptar-hetnap{font-size:11.5px; font-weight:700; color:var(--halk); padding-bottom:4px}
.kisnaptar-nap{
  position:relative; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:10px; border:0; background:none; font:inherit; font-size:14px; color:var(--tinta); padding:0;
}
.kisnaptar-nap.mult{color:#B5A69E}
.kisnaptar-nap.ma{box-shadow:inset 0 0 0 2px var(--parazs); font-weight:700}
.kisnaptar-nap.van{background:var(--menta); font-weight:700; cursor:pointer; transition:transform .25s var(--rugos), background .2s}
.kisnaptar-nap.van:hover{transform:scale(1.14) rotate(-4deg); background:#D3E8D6}
.kisnaptar-nap.kijelolt{background:var(--tinta); color:#fff}
.kisnaptar-pottyok{display:flex; gap:2px; margin-top:2px}
.potty{width:5px; height:5px; border-radius:50%; background:var(--bordo)}
.potty--tura{background:var(--erdo)}
.potty--mozi{background:var(--egbolt)}
.potty--kulonprogram{background:var(--parazs)}
.kisnaptar-nap.kijelolt .potty{background:#fff}
.kisnaptar-sugo{margin:12px 0 0; font-size:13px; color:var(--halk); text-align:center}

.naptar-lista{display:flex; flex-direction:column; gap:14px}
.lista-honap{font-size:15px; text-transform:uppercase; letter-spacing:.08em; color:var(--halk); margin:10px 0 0}
.lista-honap:first-child{margin-top:0}
.esemeny{
  display:flex; gap:18px; align-items:stretch; padding:16px; border-radius:var(--kerek); background:#fff;
  border:1px solid var(--vonal); box-shadow:0 4px 0 rgba(42,31,28,.06);
  transition:transform .3s var(--rugos), box-shadow .3s, opacity .3s;
  animation:beuszik .6s calc(var(--i) * 70ms) var(--sima) backwards;
}
.esemeny:hover{transform:translateY(-4px) rotate(-.6deg); box-shadow:var(--arnyek)}
.esemeny.kiemelt{border-color:var(--tinta); box-shadow:6px 6px 0 var(--tinta); transform:translateY(-3px)}
.esemeny.halvany{opacity:.4}
.esemeny-datum{
  flex:none; width:72px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:16px; background:var(--krem); padding:8px 4px; line-height:1.1;
}
.esemeny--tura .esemeny-datum{background:var(--menta)}
.esemeny--mozi .esemeny-datum{background:var(--egbolt-100)}
.esemeny--kulonprogram .esemeny-datum{background:#FCE6CF}
.ed-honap{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--halk)}
.ed-nap{font-family:var(--cim-betu); font-size:30px; font-weight:700}
.ed-het{font-size:12px; color:var(--halk)}
.esemeny-test{min-width:0; flex:1}
.esemeny-cimkek{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px}
.tipus-cimke,.relativ,.uj-jelveny{
  display:inline-block; padding:2px 10px; border-radius:var(--pill); font-size:12.5px; font-weight:600;
  background:var(--papir); border:1px solid var(--vonal);
}
.relativ--ma{background:var(--parazs); color:var(--tinta); border-color:transparent; animation:ringat 1.2s ease-in-out infinite}
.uj-jelveny{background:var(--bordo); color:#fff; border-color:transparent; animation:pattog 1s ease-in-out infinite}
.esemeny h4{font-family:var(--cim-betu); font-size:19px; margin:0 0 4px; line-height:1.25}
.esemeny-meta{display:flex; flex-wrap:wrap; gap:4px 16px; margin:0; color:var(--halk); font-size:14.5px}
.esemeny--ma{border:2px solid var(--parazs)}

/* ─── Meglepetések ─── */
.liliom-repul{position:fixed; z-index:80; pointer-events:none; line-height:1; will-change:transform, opacity}
.cimer-gomb.porog img{animation:porog .9s var(--rugos)}
.tuz.fellobban .lang{animation-duration:.35s}
.tuz.fellobban .tuz-feny{animation:izzik .35s ease-in-out 3}

@media (max-width:900px){
  .naptar-racs{grid-template-columns:1fr}
  .kisnaptar{position:static; max-width:420px}
}
@media (max-width:560px){
  .kovetkezo{padding:22px 18px}
  .vsz-egyseg{min-width:58px}
  .vsz-egyseg strong{font-size:26px}
  .esemeny{gap:12px; padding:12px}
  .esemeny-datum{width:60px}
  .ed-nap{font-size:24px}
}

/* ─── Mozgások ───
   A belépő animációk „backwards” kitöltésűek, nem „both”: lefutás után így a
   rendes stílus érvényes — különben a végállapot felülírná a hover-emelést és a
   naptár kijelölésének halványítását. */
@keyframes betu-be{from{opacity:0; transform:translateY(60px) rotate(12deg) scale(.6)} to{opacity:1; transform:none}}
@keyframes hullam{0%,88%,100%{transform:none} 92%{transform:translateY(-14px) rotate(-6deg)} 96%{transform:translateY(2px)}}
@keyframes beuszik{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
@keyframes beuszik-bal{from{opacity:0; transform:translateX(-30px)} to{opacity:1; transform:none}}
@keyframes felbukkan{from{opacity:0; transform:translateY(40px) scale(.92)} to{opacity:1}}
@keyframes rajzol{to{stroke-dashoffset:0}}
@keyframes pattog{0%,100%{transform:none} 50%{transform:translateY(4px)}}
@keyframes pulzal{0%{box-shadow:0 0 0 0 rgba(224,138,60,.6)} 70%{box-shadow:0 0 0 12px rgba(224,138,60,0)} 100%{box-shadow:0 0 0 0 rgba(224,138,60,0)}}
@keyframes pulzal-zold{0%{box-shadow:0 0 0 0 rgba(63,164,99,.5)} 70%{box-shadow:0 0 0 10px rgba(63,164,99,0)} 100%{box-shadow:0 0 0 0 rgba(63,164,99,0)}}
@keyframes lebeg{0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes forog{to{transform:rotate(360deg)}}
@keyframes sodrodik{from{transform:translateX(-20px)} to{transform:translateX(40px)}}
@keyframes repul{from{transform:translate(-60px,150px)} 50%{transform:translate(320px,120px)} to{transform:translate(720px,140px)}}
@keyframes ringat{0%,100%{transform:rotate(-2.5deg)} 50%{transform:rotate(2.5deg)}}
@keyframes lobog{0%,100%{transform:scaleX(1) skewY(0)} 50%{transform:scaleX(.82) skewY(6deg)}}
@keyframes ajto{0%,100%{transform:rotate(0)} 50%{transform:rotate(-6deg)}}
@keyframes billeg{0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)}}
@keyframes izzik{0%,100%{transform:scale(1); opacity:.85} 50%{transform:scale(1.12); opacity:1}}
@keyframes lobban{0%,100%{transform:scale(1,1) skewX(0)} 33%{transform:scale(.94,1.08) skewX(3deg)} 66%{transform:scale(1.04,.94) skewX(-3deg)}}
@keyframes szall{0%{opacity:0; transform:translate(0,0)} 15%{opacity:1} 100%{opacity:0; transform:translate(var(--x),-90px)}}
@keyframes fut{to{transform:translateX(-50%)}}
@keyframes tik{0%{opacity:1} 50%{opacity:.55}}
@keyframes porog{from{transform:rotate(0) scale(1)} 50%{transform:rotate(200deg) scale(1.18)} to{transform:rotate(360deg) scale(1)}}

/* A görgetéshez kötött megjelenést csak az a böngésző kapja, amelyik ismeri.
   A többinél az elemek egyszerűen a betöltéskor bukkannak fel. */
@supports not (animation-timeline: view()){
  .raj,.tevekenysegek li,.osveny li,.szam-csempe{animation-timeline:auto; animation-range:normal}
}

/* ─── Mobil ─── */
@media (max-width:960px){
  .hos{grid-template-columns:1fr}
  .hos-kep{max-width:560px; margin:24px auto 0; width:100%}
  .rajok{grid-template-columns:1fr; max-width:560px}
  .raj{transform:none}
  .tevekenysegek{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .marka span{display:none}
  .tevekenysegek{grid-template-columns:repeat(2,1fr)}
  .cimer-gomb{top:-18px; left:-6px}
  .gomb-sor .gomb{flex:1 1 100%; justify-content:center}
}

/* ─── Kevesebb mozgás: aki ezt kérte, annak minden áll ─── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .aldiszes path{stroke-dashoffset:0}
  .szalag-sav{flex-wrap:wrap; width:auto; justify-content:center}
}