@charset "UTF-8";
/* ==========================================================================
   G.S. GLADIÁTOR ÖKÖLVÍVÓ SPORTEGYESÜLET — weboldal stíluslap
   Arculat: éjfekete / mélykék / klubkék / arany
   Szerkezet: 1) tokenek 2) alap 3) elrendezés 4) komponensek 5) szekciók
              6) oldalspecifikus 7) reszponzív 8) akadálymentesség/nyomtatás
   ========================================================================== */

/* ==========================================================================
   1) TOKENEK
   ========================================================================== */
:root {
  /* Alapszínek */
  --fekete:        #0B0D10;
  --fekete-lagy:   #101419;
  --melykek:       #071426;
  --melykek-lagy:  #0A1D33;
  --klubkek:       #063B75;
  --klubkek-vilagos:#0A54A3;
  --arany:         #F5B800;
  --arany-melyebb: #D19E00;
  --arany-halvany: #FFD966;
  --feher:         #FFFFFF;
  --fust:          #9AA6B4;
  --fust-halk:     #6E7A88;
  --piros:         #C1121F;   /* csak sürgős / verseny elemekhez */
  --zold:          #2E7D32;   /* csak visszajelzésekhez */

  /* Felületek */
  --felulet:       #0E1319;
  --felulet-2:     #131A22;
  --felulet-3:     #182029;
  --vonal:         rgba(255,255,255,.10);
  --vonal-eros:    rgba(255,255,255,.20);
  --arany-halo:    rgba(245,184,0,.14);

  /* Tipográfia */
  --betu-display: "Anton", "Oswald", "Arial Narrow", "Haettenschweiler", sans-serif;
  --betu-utility: "Oswald", "Arial Narrow", sans-serif;
  --betu-torzs:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Térköz */
  --terkoz-1: .25rem;  --terkoz-2: .5rem;   --terkoz-3: .75rem;
  --terkoz-4: 1rem;    --terkoz-5: 1.5rem;  --terkoz-6: 2rem;
  --terkoz-7: 3rem;    --terkoz-8: 4rem;    --terkoz-9: 6rem;

  /* Elrendezés */
  --keret: 1240px;
  --keret-szuk: 780px;
  --fejlec-magassag: 76px;
  --radius: 4px;
  --radius-nagy: 8px;

  /* Mozgás */
  --atmenet: 220ms cubic-bezier(.4,.0,.2,1);
  --atmenet-lassu: 420ms cubic-bezier(.4,.0,.2,1);

  /* Árnyék */
  --arnyek-1: 0 2px 8px rgba(0,0,0,.35);
  --arnyek-2: 0 12px 32px rgba(0,0,0,.45);
  --arnyek-3: 0 24px 64px rgba(0,0,0,.55);
}

/* ==========================================================================
   2) ALAP
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--fejlec-magassag) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fekete);
  color: #E7ECF2;
  font-family: var(--betu-torzs);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--arany); text-decoration: none; transition: color var(--atmenet); }
a:hover { color: var(--arany-halvany); }

h1, h2, h3, h4 {
  font-family: var(--betu-display);
  font-weight: 400;
  /* 1.14: az Anton nagybetűi magasak, és a magyar Ő/Ű kettős ékezete még
     ezek fölé nyúlik – ennél kisebb sorköznél belelóg a fenti sorba. */
  line-height: 1.14;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 var(--terkoz-4);
  color: var(--feher);
}

h1 { font-size: clamp(2.125rem, 5.2vw, 4rem); }

/* Biztonsági háló az ikonokhoz.
   A viewBox-os SVG-nek nincs saját mérete: ha sem CSS, sem attribútum nem
   adja meg, kitölti a szülő teljes szélességét. A kapcsolat oldalon a
   „Megnyitás nagyobb térképen” link nyila így fél képernyős lett.
   Ez a szabály csak ott hat, ahol semmi más nem méretez – minden
   osztályalapú szabály (.gomb svg, .kampany-lista svg stb.) felülírja. */
svg { width: 1.05em; height: 1.05em; vertical-align: -.14em; }

/* Szövegközi link kísérő ikonnal (pl. „Megnyitás nagyobb térképen ›”).
   Inline-flex, hogy a nyíl ne szakadjon külön sorba a szöveg végén. */
.link-nyillal { display: inline-flex; align-items: center; gap: .4em; }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.625rem); }
h4 { font-size: clamp(1rem, 1.6vw, 1.1875rem); }

p { margin: 0 0 var(--terkoz-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--terkoz-4); padding-left: 1.25rem; }
li { margin-bottom: var(--terkoz-2); }

strong { color: var(--feher); font-weight: 600; }
small { font-size: .8125rem; }

::selection { background: var(--arany); color: var(--fekete); }

:focus-visible {
  outline: 3px solid var(--arany);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Képernyőolvasóknak */
.vizualisan-rejtett {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.ugras-tartalomra {
  position: absolute; top: -100px; left: var(--terkoz-4);
  z-index: 2000;
  background: var(--arany); color: var(--fekete);
  padding: var(--terkoz-3) var(--terkoz-5);
  font-family: var(--betu-utility); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  transition: top var(--atmenet);
}
.ugras-tartalomra:focus { top: var(--terkoz-3); color: var(--fekete); }

/* ==========================================================================
   3) ELRENDEZÉS
   ========================================================================== */
.keret { width: 100%; max-width: var(--keret); margin-inline: auto; padding-inline: var(--terkoz-5); }
.keret-szuk { width: 100%; max-width: var(--keret-szuk); margin-inline: auto; padding-inline: var(--terkoz-5); }

.szekcio { padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; }
.szekcio--tomor { padding-block: clamp(2.5rem, 5vw, 4rem); }
.szekcio--sotet { background: var(--fekete); }
.szekcio--melykek { background: var(--melykek); }
.szekcio--felulet { background: var(--felulet); }
.szekcio--klubkek { background: linear-gradient(160deg, var(--klubkek) 0%, var(--melykek) 78%); }

.szekcio--textura::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 4px 4px;
}
.szekcio > .keret, .szekcio > .keret-szuk { position: relative; z-index: 1; }

.racs { display: grid; gap: var(--terkoz-5); }
.racs--2 { grid-template-columns: repeat(2, 1fr); }
.racs--3 { grid-template-columns: repeat(3, 1fr); }
.racs--4 { grid-template-columns: repeat(4, 1fr); }
.racs--5 { grid-template-columns: repeat(5, 1fr); }
.racs--laza { gap: var(--terkoz-6); }

.kozepre { text-align: center; }
.kozepre .szekcio-fej { margin-inline: auto; }

/* ==========================================================================
   4) KOMPONENSEK
   ========================================================================== */

/* --- 4.1 Szekciófej ------------------------------------------------------ */
.szekcio-fej { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.szekcio-fej p { color: var(--fust); font-size: 1.0625rem; }

.cimke {
  display: inline-flex; align-items: center; gap: var(--terkoz-3);
  font-family: var(--betu-utility);
  font-size: .8125rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--arany);
  margin-bottom: var(--terkoz-4);
}
.cimke::before {
  content: ""; width: 34px; height: 2px;
  background: var(--arany); flex: none;
}
.kozepre .cimke::after {
  content: ""; width: 34px; height: 2px; background: var(--arany); flex: none;
}
.kozepre .cimke { justify-content: center; }

/* --- 4.2 Gombok ---------------------------------------------------------- */
.gomb {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--terkoz-3);
  font-family: var(--betu-utility);
  font-size: .9375rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 1rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: transform var(--atmenet), background-color var(--atmenet),
              border-color var(--atmenet), color var(--atmenet), box-shadow var(--atmenet);
  position: relative;
}
.gomb:active { transform: translateY(1px); }
.gomb svg { width: 18px; height: 18px; flex: none; }

.gomb--elsodleges {
  background: var(--arany); color: var(--fekete);
  box-shadow: 0 6px 20px rgba(245,184,0,.25);
}
.gomb--elsodleges:hover {
  background: var(--arany-halvany); color: var(--fekete);
  box-shadow: 0 10px 28px rgba(245,184,0,.38);
  transform: translateY(-2px);
}

.gomb--masodlagos {
  background: transparent; color: var(--feher);
  border-color: var(--vonal-eros);
}
.gomb--masodlagos:hover {
  border-color: var(--arany); color: var(--arany);
  background: rgba(245,184,0,.06);
  transform: translateY(-2px);
}

.gomb--kek { background: var(--klubkek); color: var(--feher); }
.gomb--kek:hover { background: var(--klubkek-vilagos); color: var(--feher); transform: translateY(-2px); }

.gomb--teli-szeles { width: 100%; }
.gomb--nagy { padding: 1.15rem 2.25rem; font-size: 1rem; }
.gomb--kicsi { padding: .7rem 1.25rem; font-size: .8125rem; }

.gomb-sor { display: flex; flex-wrap: wrap; gap: var(--terkoz-4); }
.kozepre .gomb-sor { justify-content: center; }

/* --- 4.3 Ringkötél (aláírás-elem) ---------------------------------------- */
/* A klub valódi ringjének három kötele adja a szekcióhatárok motívumát. */
.ringkotel {
  display: block; width: 100%; height: 14px;
  position: relative; overflow: hidden;
  background: transparent;
}
.ringkotel::before, .ringkotel::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px;
  border-radius: 3px;
}
.ringkotel::before { top: 2px;  background: linear-gradient(90deg, transparent, var(--klubkek) 12%, var(--klubkek) 88%, transparent); }
.ringkotel::after  { top: 9px;  background: linear-gradient(90deg, transparent, var(--arany) 12%, var(--arany) 88%, transparent); opacity: .85; }

.ringkotel--sotet::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.14) 12%, rgba(255,255,255,.14) 88%, transparent); }
.ringkotel--sotet::after  { background: linear-gradient(90deg, transparent, var(--arany) 12%, var(--arany) 88%, transparent); opacity: .55; }

/* Két vízszintes kötél, közöttük a feszítőpántokkal – a valódi ringről */
.ringkotel-szalag {
  position: relative; height: 22px; overflow: hidden;
  background: var(--melykek);
  border-block: 1px solid var(--vonal);
}
/* Feszítőpántok: rövid függőleges kötözések a két kötél között */
.ringkotel-szalag::before {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 8px;
  background-image: repeating-linear-gradient(90deg,
      transparent 0 58px,
      rgba(255,255,255,.22) 58px 61px);
}
/* A két kötél */
.ringkotel-szalag::after {
  content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 12px;
  background:
    linear-gradient(var(--klubkek-vilagos), var(--klubkek)) top/100% 3px no-repeat,
    linear-gradient(var(--arany), var(--arany-melyebb)) bottom/100% 3px no-repeat;
}

/* --- 4.4 Kártyák --------------------------------------------------------- */
.kartya {
  background: var(--felulet-2);
  border: 1px solid var(--vonal);
  border-radius: var(--radius-nagy);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--atmenet), border-color var(--atmenet), box-shadow var(--atmenet);
}
.kartya:hover { transform: translateY(-4px); border-color: var(--arany-halo); box-shadow: var(--arnyek-2); }

.kartya__kep { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--melykek); }
.kartya__kep img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--atmenet-lassu); }
.kartya:hover .kartya__kep img { transform: scale(1.045); }
.kartya__kep::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,13,16,0) 35%, rgba(11,13,16,.88) 100%);
}

.kartya__jelvény, .kartya__jelveny {
  position: absolute; top: var(--terkoz-4); left: var(--terkoz-4); z-index: 2;
  font-family: var(--betu-utility); font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  padding: .35rem .7rem; border-radius: 2px;
  background: var(--arany); color: var(--fekete);
}
.kartya__jelveny--kek { background: var(--klubkek); color: var(--feher); }

.kartya__cim-kepen {
  position: absolute; bottom: var(--terkoz-4); left: var(--terkoz-5); right: var(--terkoz-5);
  z-index: 2; margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.kartya__torzs { padding: var(--terkoz-5); display: flex; flex-direction: column; flex: 1; gap: var(--terkoz-4); }
.kartya__torzs p { color: var(--fust); font-size: .9375rem; }
.kartya__lab { margin-top: auto; padding-top: var(--terkoz-2); }

.kartya__lista { list-style: none; padding: 0; margin: 0; font-size: .875rem; }
.kartya__lista li {
  padding-left: 1.5rem; position: relative; color: var(--fust);
  margin-bottom: var(--terkoz-2);
}
.kartya__lista li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; background: var(--arany);
  transform: rotate(45deg);
}

/* Kártyasorok összehangolása
   ---------------------------------------------------------------
   Ha a kártyákban eltérő hosszúságú a bevezető szöveg, a felsorolás
   és a gomb más-más magasságban kezdődik. A subgrid a szomszédos
   kártyák megfelelő sorait egy vonalba hozza: kép / szöveg /
   felsorolás / gomb. Régebbi böngészőben a fenti flexbox marad
   érvényben – ott a gomb alul igazodik, a többi sor nem. */
@supports (grid-template-rows: subgrid) {
  .racs--kartyak > .kartya {
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .racs--kartyak > .kartya > .kartya__torzs {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: var(--terkoz-4);
  }
  .racs--kartyak > .kartya > .kartya__torzs > .kartya__lab {
    align-self: end;
    margin-top: 0;
  }
}

/* Plakátkártya: a kép már tartalmazza a feliratot, ezért nincs rajta
   sötétítő átfedés, és a jelvény a jobb felső sarokba kerül, hogy ne
   takarja a plakát saját címét. */
.kartya__kep--plakat { aspect-ratio: 2/3; }
.kartya__kep--plakat::after { display: none; }
/* A plakát saját feliratot tartalmaz, ezért a korosztály-jelvény a
   szöveges részbe kerül, hogy ne takarja a grafikát. */
.kartya__cimke-sor {
  display: inline-block; width: auto;
  font-family: var(--betu-utility); font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  padding: .35rem .7rem; border-radius: 2px;
  background: var(--arany); color: var(--fekete);
  margin-bottom: var(--terkoz-2);
}
.kartya__cimke-sor--kek { background: var(--klubkek); color: var(--feher); }

/* --- 4.5 Előnykártya (ikon + szöveg) ------------------------------------- */
.elony {
  padding: var(--terkoz-5);
  background: var(--felulet-2);
  border: 1px solid var(--vonal);
  border-radius: var(--radius-nagy);
  border-top: 3px solid var(--arany);
  transition: transform var(--atmenet), background-color var(--atmenet);
}
.elony:hover { transform: translateY(-3px); background: var(--felulet-3); }
.elony__ikon {
  width: 46px; height: 46px; color: var(--arany);
  margin-bottom: var(--terkoz-4);
}
.elony__ikon svg { width: 100%; height: 100%; }
.elony h3 { font-size: 1.125rem; margin-bottom: var(--terkoz-3); }
.elony p { color: var(--fust); font-size: .9375rem; margin: 0; }

/* --- 4.6 Bizalmi sáv ----------------------------------------------------- */
.bizalmi-sav {
  background: var(--melykek);
  border-block: 1px solid var(--vonal);
  padding-block: var(--terkoz-5);
}
.bizalmi-sav__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--terkoz-4) var(--terkoz-6);
}
.bizalmi-sav__lista li {
  display: flex; align-items: center; gap: var(--terkoz-3);
  font-family: var(--betu-utility); font-size: .875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  color: #D4DBE4; margin: 0;
}
.bizalmi-sav__lista svg { width: 20px; height: 20px; color: var(--arany); flex: none; }

/* --- 4.7 Menet-lépések (aláírás-elem) ------------------------------------ */
/* A folyamat lépései ökölvívó menetekként vannak számozva. */
.menet-lista { display: grid; gap: var(--terkoz-5); counter-reset: menet; }
.menet {
  position: relative;
  padding: var(--terkoz-6) var(--terkoz-5) var(--terkoz-5);
  background: var(--felulet-2);
  border: 1px solid var(--vonal);
  border-radius: var(--radius-nagy);
}
.menet__szam {
  position: absolute; top: -22px; left: var(--terkoz-5);
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fekete);
  border: 2px solid var(--arany);
  font-family: var(--betu-display);
  font-size: 1.5rem; color: var(--arany); line-height: 1;
}
.menet__cimke {
  font-family: var(--betu-utility); font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em; color: var(--fust-halk);
  display: block; margin-bottom: var(--terkoz-2);
}
.menet h3 { font-size: 1.25rem; margin-bottom: var(--terkoz-3); }
.menet p { color: var(--fust); font-size: .9375rem; margin: 0; }

/* --- 4.8 Órarend --------------------------------------------------------- */
.orarend-szuro {
  display: flex; flex-wrap: wrap; gap: var(--terkoz-3);
  margin-bottom: var(--terkoz-5);
}
.szuro-gomb {
  font-family: var(--betu-utility); font-size: .8125rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  padding: .6rem 1.1rem;
  background: transparent; color: var(--fust);
  border: 1px solid var(--vonal-eros); border-radius: 100px;
  cursor: pointer;
  transition: all var(--atmenet);
}
.szuro-gomb:hover { color: var(--feher); border-color: var(--feher); }
.szuro-gomb[aria-pressed="true"] { background: var(--arany); color: var(--fekete); border-color: var(--arany); }

/* Öt nap fér el egymás mellett; szűkebb kijelzőn fokozatosan tördeljük.
   A napok különböző hosszúak (szerdán és csütörtökön kevesebb tétel van),
   ezért az oszlopok tetejéhez igazítjuk őket. */
.orarend-racs {
  display: grid; gap: var(--terkoz-4);
  grid-template-columns: repeat(5, 1fr); align-items: start;
}
@media (max-width: 1200px) { .orarend-racs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .orarend-racs { grid-template-columns: repeat(2, 1fr); } }
.orarend-nap {
  background: var(--felulet-2);
  border: 1px solid var(--vonal);
  border-radius: var(--radius-nagy);
  overflow: hidden;
}
.orarend-nap__fej {
  padding: var(--terkoz-4) var(--terkoz-5);
  background: var(--melykek);
  border-bottom: 2px solid var(--arany);
  font-family: var(--betu-display); font-size: 1.25rem;
  text-transform: uppercase; color: var(--feher);
}
.orarend-nap__torzs { padding: var(--terkoz-3); }
.orarend-tetel {
  /* Öt nap egymás mellett szűk oszlopokat jelent, ezért az időpont a név
     fölé kerül – így a hosszabb csoportnevek nem törnek szét ötfelé. */
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--terkoz-3) var(--terkoz-4);
  border-radius: var(--radius);
  transition: background-color var(--atmenet);
}
.orarend-tetel + .orarend-tetel { border-top: 1px solid var(--vonal); }
.orarend-tetel:hover { background: rgba(255,255,255,.03); }
.orarend-tetel[hidden] { display: none; }
.orarend-tetel__ido {
  font-family: var(--betu-utility); font-weight: 600; font-size: .9375rem;
  color: var(--arany); flex: none; letter-spacing: .01em;
}
.orarend-tetel__nev { font-size: .9375rem; color: #E7ECF2; }
.orarend-tetel__kor { display: block; font-size: .8125rem; color: var(--fust-halk); }

.orarend-ures {
  padding: var(--terkoz-5); text-align: center;
  color: var(--fust-halk); font-size: .9375rem;
}

/* --- 4.9 Árkártyák ------------------------------------------------------- */
.ar-kartya {
  background: var(--felulet-2);
  border: 1px solid var(--vonal);
  border-radius: var(--radius-nagy);
  padding: var(--terkoz-6) var(--terkoz-5);
  display: flex; flex-direction: column; gap: var(--terkoz-4);
  position: relative;
}
.ar-kartya--kiemelt { border-color: var(--arany); background: var(--melykek-lagy); }
.ar-kartya--kiemelt::before {
  content: "Legnépszerűbb";
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--arany); color: var(--fekete);
  font-family: var(--betu-utility); font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  padding: .3rem .85rem; border-radius: 2px; white-space: nowrap;
}
.ar-kartya h3 { font-size: 1.375rem; margin: 0; }
.ar-kartya__ar {
  font-family: var(--betu-display); font-size: 2.75rem; color: var(--arany);
  line-height: 1;
}
.ar-kartya__ar span {
  font-family: var(--betu-torzs); font-size: .875rem; color: var(--fust);
  text-transform: none; letter-spacing: 0;
}
.ar-kartya ul { list-style: none; padding: 0; margin: 0; flex: 1; }
.ar-kartya li {
  padding-left: 1.6rem; position: relative;
  font-size: .9375rem; color: var(--fust); margin-bottom: var(--terkoz-3);
}
.ar-kartya li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 10px; height: 6px;
  border-left: 2px solid var(--arany); border-bottom: 2px solid var(--arany);
  transform: rotate(-45deg);
}

/* --- 4.10 Vélemények ----------------------------------------------------- */
.velemeny {
  background: var(--felulet-2);
  border: 1px solid var(--vonal);
  border-left: 3px solid var(--arany);
  border-radius: var(--radius-nagy);
  padding: var(--terkoz-6) var(--terkoz-5) var(--terkoz-5);
  position: relative;
}
.velemeny::before {
  content: "\201E";
  position: absolute; top: -.15em; left: var(--terkoz-4);
  font-family: var(--betu-display); font-size: 5rem;
  color: var(--arany-halo); line-height: 1; pointer-events: none;
}
.velemeny blockquote { margin: 0 0 var(--terkoz-5); font-size: 1.0625rem; color: #E7ECF2; position: relative; }
.velemeny figcaption { display: flex; align-items: center; gap: var(--terkoz-3); }
.velemeny__monogram {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--klubkek); color: var(--feher);
  font-family: var(--betu-utility); font-weight: 600; font-size: .9375rem;
}
.velemeny__nev { font-weight: 600; color: var(--feher); font-size: .9375rem; }
.velemeny__szerep { display: block; font-size: .8125rem; color: var(--fust-halk); font-weight: 400; }

/* --- 4.11 GYIK ----------------------------------------------------------- */
.gyik { border-top: 1px solid var(--vonal); }
.gyik details {
  border-bottom: 1px solid var(--vonal);
}
.gyik summary {
  list-style: none; cursor: pointer;
  padding: var(--terkoz-5) 3rem var(--terkoz-5) 0;
  position: relative;
  font-family: var(--betu-utility); font-weight: 500;
  font-size: 1.0625rem; color: var(--feher);
  transition: color var(--atmenet);
}
.gyik summary::-webkit-details-marker { display: none; }
.gyik summary:hover { color: var(--arany); }
.gyik summary::after {
  content: ""; position: absolute; right: var(--terkoz-3); top: 50%;
  width: 14px; height: 14px;
  border-right: 2px solid var(--arany); border-bottom: 2px solid var(--arany);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--atmenet);
}
.gyik details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.gyik details > div { padding: 0 3rem var(--terkoz-5) 0; color: var(--fust); }
.gyik details > div p { font-size: .9375rem; }

/* --- 4.12 Űrlap ---------------------------------------------------------- */
.urlap { display: grid; gap: var(--terkoz-5); }
.urlap-sor { display: grid; gap: var(--terkoz-5); grid-template-columns: 1fr 1fr; }
.mezo { display: flex; flex-direction: column; gap: var(--terkoz-2); }
.mezo label {
  font-family: var(--betu-utility); font-size: .8125rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; color: #D4DBE4;
}
.mezo label .kotelezo { color: var(--arany); }
.mezo input, .mezo select, .mezo textarea {
  width: 100%;
  padding: .9rem 1rem;
  background: var(--fekete);
  border: 1px solid var(--vonal-eros);
  border-radius: var(--radius);
  color: var(--feher);
  font-family: var(--betu-torzs); font-size: 1rem;
  transition: border-color var(--atmenet), background-color var(--atmenet);
}
.mezo textarea { resize: vertical; min-height: 110px; }
.mezo input:hover, .mezo select:hover, .mezo textarea:hover { border-color: var(--fust); }
.mezo input:focus, .mezo select:focus, .mezo textarea:focus {
  outline: none; border-color: var(--arany); background: var(--felulet);
  box-shadow: 0 0 0 3px rgba(245,184,0,.15);
}
.mezo input::placeholder, .mezo textarea::placeholder { color: var(--fust-halk); }
.mezo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--arany) 50%),
                    linear-gradient(135deg, var(--arany) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.mezo__sugo { font-size: .8125rem; color: var(--fust-halk); }

.jelolo {
  display: flex; align-items: flex-start; gap: var(--terkoz-3);
  font-size: .875rem; color: var(--fust); line-height: 1.5;
}
.jelolo input[type="checkbox"] {
  width: 20px; height: 20px; flex: none; margin-top: 2px;
  accent-color: var(--arany); cursor: pointer;
}
.jelolo a { text-decoration: underline; }

.urlap-hiba {
  color: #FF8A8A; font-size: .8125rem; font-weight: 500;
  display: none;
}
.mezo.hibas input, .mezo.hibas select { border-color: #FF8A8A; }
.mezo.hibas .urlap-hiba { display: block; }

.urlap-visszajelzes {
  padding: var(--terkoz-5);
  border-radius: var(--radius-nagy);
  border: 1px solid var(--arany);
  background: rgba(245,184,0,.08);
  color: var(--feher);
  font-size: .9375rem;
}

.urlap-doboz {
  background: var(--felulet-2);
  border: 1px solid var(--vonal);
  border-radius: var(--radius-nagy);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Botcsapda: emberi szemnek láthatatlan mező */
.mezo--csapda { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* --- Captcha -------------------------------------------------------------
   A kép fehér alapon jön (SVG a captcha.php-ból), ezért fehér mezőbe kerül.
   A beviteli mező szándékosan szűk: öt karakter megy bele, így a látogató
   látja, hogy nem hosszú szöveget kérünk. */
.captcha {
  display: flex; align-items: center; gap: var(--terkoz-3); flex-wrap: wrap;
}
.captcha__kep {
  background: #fff; border-radius: var(--radius);
  width: 200px; height: 64px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.captcha__kep svg { display: block; width: 200px; height: 64px; }
.captcha__tolt {
  font-size: .75rem; color: var(--fust-halk); text-align: center;
  padding: 0 var(--terkoz-3); line-height: 1.3;
}
.captcha__ujra {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  background: var(--felulet-2); color: var(--fust);
  border: 1px solid var(--vonal); border-radius: var(--radius);
  cursor: pointer; transition: color var(--atmenet), border-color var(--atmenet);
}
.captcha__ujra:hover { color: var(--arany); border-color: var(--arany); }
/* Méret nélküli SVG kitölti a szülőt – lásd a stíluslap elején lévő
   biztonsági szabályt. Itt explicit méretet adunk. */
.captcha__ujra svg { width: 20px; height: 20px; }
/* A beviteli mező szélessége.
   Itt NE használj ch egységet: a ch a „0” karakter szélessége, és nem
   számol a letter-spacinggel, ezért öt karakter már kicsúszott a mezőből.
   Az em a mező saját betűméretéhez (1.25rem) igazodik, a belső margóval
   együtt így kényelmesen kifér nyolc karakter is.
   A text-indent a záró letter-spacinget egyenlíti ki – anélkül a szöveg
   balra tolódva állna a mezőben. */
.captcha input[name="captcha"] {
  width: 7.5em; min-width: 7.5em; flex-shrink: 0;
  font-family: var(--betu-utility); font-size: 1.25rem;
  letter-spacing: .18em; text-transform: uppercase; text-align: center;
  text-indent: .18em;
}
.captcha input[name="captcha"]:disabled {
  opacity: .5; cursor: not-allowed;
}

/* Küldési hibaüzenet a gomb felett */
.urlap-uzenet {
  font-size: .875rem; line-height: 1.5; margin: 0 0 var(--terkoz-4);
  padding: var(--terkoz-3) var(--terkoz-4);
  border-radius: var(--radius);
}
.urlap-uzenet--hiba {
  color: #FFD6D6; background: rgba(193,18,31,.16);
  border: 1px solid rgba(255,138,138,.45);
}

@media (max-width: 420px) {
  .captcha__kep, .captcha__kep svg { width: 160px; height: 52px; }
}

/* --- 4.13 Galéria -------------------------------------------------------- */
.galeria-racs {
  display: grid; gap: var(--terkoz-3);
  grid-template-columns: repeat(4, 1fr);
}
.galeria-elem {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius); background: var(--melykek);
  border: 0; padding: 0; cursor: zoom-in; display: block;
}
.galeria-elem img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--atmenet-lassu); }
.galeria-elem::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(11,13,16,.25); transition: background-color var(--atmenet);
}
.galeria-elem:hover img { transform: scale(1.07); }
.galeria-elem:hover::after { background: rgba(6,59,117,.25); }

/* Nagyító */
.nagyito {
  position: fixed; inset: 0; z-index: 1500;
  display: none; place-items: center;
  background: rgba(6,10,14,.94);
  padding: var(--terkoz-5);
}
.nagyito[open], .nagyito.aktiv { display: grid; }
.nagyito img { max-width: min(1100px, 92vw); max-height: 82vh; object-fit: contain; border-radius: var(--radius); }
.nagyito__zar, .nagyito__lep {
  position: absolute; background: transparent; border: 1px solid var(--vonal-eros);
  color: var(--feher); width: 48px; height: 48px; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center;
  transition: all var(--atmenet); font-size: 1.5rem; line-height: 1;
}
.nagyito__zar:hover, .nagyito__lep:hover { background: var(--arany); color: var(--fekete); border-color: var(--arany); }
.nagyito__zar { top: var(--terkoz-5); right: var(--terkoz-5); }
.nagyito__lep--elozo { left: var(--terkoz-5); top: 50%; transform: translateY(-50%); }
.nagyito__lep--kovetkezo { right: var(--terkoz-5); top: 50%; transform: translateY(-50%); }
.nagyito__szamlalo {
  position: absolute; bottom: var(--terkoz-5); left: 50%; transform: translateX(-50%);
  font-family: var(--betu-utility); font-size: .875rem; letter-spacing: .1em; color: var(--fust);
}

/* --- 4.13b Kis csempés galéria -------------------------------------------
   A klub közösségi felületeiről mentett fotókhoz. Ezek kisebb felbontásúak,
   ezért szándékosan kis csempeként jelennek meg: így élesek maradnak, és
   nincs rajtuk nagyító, ami elmosná őket. */
.csempe-racs {
  display: grid; gap: var(--terkoz-3);
  grid-template-columns: repeat(6, 1fr);
}
.csempe {
  margin: 0; position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius);
  background: var(--melykek);
  border: 1px solid var(--vonal);
  transition: transform var(--atmenet), border-color var(--atmenet);
}
.csempe img { width: 100%; height: 100%; object-fit: cover; }
.csempe:hover { transform: translateY(-3px); border-color: var(--arany-halo); }

@media (max-width: 980px) { .csempe-racs { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .csempe-racs { grid-template-columns: repeat(3, 1fr); } }

/* --- 4.14 Statisztika ---------------------------------------------------- */
.statisztika { text-align: center; }
.statisztika__szam {
  font-family: var(--betu-display); font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--arany); line-height: 1; display: block;
}
.statisztika__cimke {
  font-family: var(--betu-utility); font-size: .8125rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--fust);
  margin-top: var(--terkoz-2); display: block;
}

/* --- 4.15 Jegyzetdoboz --------------------------------------------------- */
.jegyzet {
  border: 1px dashed var(--vonal-eros);
  border-left: 3px solid var(--arany);
  background: rgba(245,184,0,.05);
  border-radius: var(--radius);
  padding: var(--terkoz-4) var(--terkoz-5);
  font-size: .875rem; color: var(--fust);
  margin-bottom: var(--terkoz-5);
}
.jegyzet strong { color: var(--arany); }
.jegyzet p { margin-bottom: var(--terkoz-2); }

/* --- 4.15b Akciósáv ------------------------------------------------------
   Határidős kampány kiemelése az árak fölött. Szándékosan feltűnőbb, mint
   a .jegyzet: arany keret és saroksáv. A plakátrészlet jobbra kerül, mert
   az árakat olvasó tekintet balról indul. */
.akcio-sav {
  display: grid; grid-template-columns: 1fr auto; gap: var(--terkoz-6);
  align-items: center;
  border: 1px solid var(--arany); border-radius: var(--radius-nagy);
  background:
    linear-gradient(120deg, rgba(245,184,0,.10) 0%, rgba(245,184,0,.02) 55%),
    var(--melykek);
  padding: var(--terkoz-5) var(--terkoz-6);
  margin-bottom: var(--terkoz-7);
}
/* A főoldalon a szekció végén áll, nem az árkártyák előtt:
   ott felül kell a levegő, alul nem. */
.akcio-sav--fooldal { margin-top: var(--terkoz-7); margin-bottom: 0; }
.akcio-sav__kep { width: 150px; flex-shrink: 0; }
.akcio-sav__kep img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--vonal-eros);
}

/* Kedvezményjelvény. Szándékosan rajzolt elem, nem kép: a plakátból kivágott
   részlet a saját tipográfiáját hozta magával, és felskálázva mosódott.
   Így minden képernyőn éles, és az oldal betűivel szól. */
.jelveny {
  flex-shrink: 0; width: 190px; text-align: center;
  background: var(--arany); color: var(--fekete);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(245,184,0,.16);
}
.jelveny__fej {
  font-family: var(--betu-utility); font-weight: 600; font-size: .75rem;
  letter-spacing: .22em; text-transform: uppercase;
  padding: .6rem 0 .5rem; background: rgba(11,13,16,.88); color: var(--arany);
}
.jelveny__torzs { padding: 1.1rem 1rem 1.25rem; }
.jelveny__ertek {
  font-family: var(--betu-display); font-size: 4rem; line-height: .88;
  letter-spacing: -.01em; display: block;
}
.jelveny__ertek span {
  font-size: 1.75rem; line-height: 1;
  vertical-align: top; position: relative; top: .35rem; margin-left: 3px;
}
.jelveny__cimke {
  font-family: var(--betu-utility); font-weight: 600; font-size: .875rem;
  letter-spacing: .18em; text-transform: uppercase; display: block; margin-top: .45rem;
}
.jelveny__labjegyzet {
  font-family: var(--betu-torzs); font-size: .8125rem; font-weight: 500;
  line-height: 1.3; display: block;
  margin-top: .7rem; padding-top: .7rem;
  border-top: 1px solid rgba(11,13,16,.28);
  color: rgba(11,13,16,.78);
}
.akcio-sav h3 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  margin-bottom: var(--terkoz-3);
}
.akcio-sav h3 em { font-style: normal; color: var(--arany); }
.akcio-sav p { color: var(--fust); margin-bottom: var(--terkoz-2); }
.akcio-sav p strong { color: var(--feher); }
.akcio-sav .gomb-sor { margin-top: var(--terkoz-5); }

@media (max-width: 700px) {
  /* Mobilon a jelvény kerül előre: az a figyelemfelkeltő elem. */
  .akcio-sav { grid-template-columns: 1fr; gap: var(--terkoz-5); padding: var(--terkoz-5); }
  .jelveny { width: 170px; order: -1; margin: 0 auto; }
}

/* --- 4.15c Videósáv ------------------------------------------------------
   Álló (9:16) telefonos felvétel a teremből. Nem hero-videó: nem indul
   magától, és preload="none" miatt egy bájtot sem tölt le, amíg a látogató
   rá nem nyom. Így a főoldal betöltési ideje nem romlik. */
.video-sav {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--terkoz-7); align-items: center;
}
.video-sav__lejatszo {
  width: 320px; flex-shrink: 0;
  border-radius: var(--radius-nagy); overflow: hidden;
  border: 1px solid var(--vonal-eros);
  background: var(--fekete);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.video-sav__lejatszo video {
  width: 100%; height: auto; display: block;
  aspect-ratio: 9/16; object-fit: cover; background: var(--fekete);
}
.video-sav__alairas {
  font-family: var(--betu-utility); font-size: .75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--fust-halk);
  text-align: center; margin-top: var(--terkoz-3);
}

@media (max-width: 900px) {
  .video-sav { grid-template-columns: 1fr; gap: var(--terkoz-6); }
  .video-sav__lejatszo { width: 100%; max-width: 320px; margin: 0 auto; }
}

/* --- 4.16 Táblázat ------------------------------------------------------- */
.tablazat-gorgo { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.adat {
  width: 100%; border-collapse: collapse; font-size: .9375rem;
  min-width: 520px;
}
table.adat caption {
  text-align: left; color: var(--fust-halk); font-size: .8125rem;
  padding-bottom: var(--terkoz-3);
}
table.adat th, table.adat td {
  padding: var(--terkoz-4);
  border-bottom: 1px solid var(--vonal);
  text-align: left; vertical-align: top;
}
table.adat thead th {
  font-family: var(--betu-utility); font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--arany);
  border-bottom: 2px solid var(--arany);
  white-space: nowrap;
}
table.adat tbody tr:hover { background: rgba(255,255,255,.025); }
table.adat td strong { color: var(--feher); }

/* --- 4.17 Kenyérmorzsa --------------------------------------------------- */
.morzsa {
  padding-block: var(--terkoz-4);
  border-bottom: 1px solid var(--vonal);
  background: var(--fekete);
}
.morzsa ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--terkoz-2);
  font-size: .8125rem;
}
.morzsa li { margin: 0; display: flex; align-items: center; gap: var(--terkoz-2); color: var(--fust-halk); }
.morzsa li:not(:last-child)::after { content: "›"; color: var(--fust-halk); }
.morzsa a { color: var(--fust); }
.morzsa a:hover { color: var(--arany); }
.morzsa [aria-current="page"] { color: var(--feher); }

/* ==========================================================================
   5) SZEKCIÓK
   ========================================================================== */

/* --- 5.1 Fejléc ---------------------------------------------------------- */
.fejlec {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--fejlec-magassag);
  display: flex; align-items: center;
  background: rgba(11,13,16,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--atmenet), border-color var(--atmenet);
}
.fejlec.gorgetve {
  background: rgba(11,13,16,.96);
  border-bottom-color: var(--vonal);
  box-shadow: var(--arnyek-1);
}
.fejlec > .keret { display: flex; align-items: center; justify-content: space-between; gap: var(--terkoz-5); }

.marka { display: flex; align-items: center; gap: var(--terkoz-3); flex: none; }
.marka img { width: 48px; height: 48px; }
.marka__szoveg { display: flex; flex-direction: column; line-height: 1.05; }
.marka__nev {
  font-family: var(--betu-display); font-size: 1.125rem;
  color: var(--feher); text-transform: uppercase; letter-spacing: .02em;
}
.marka__alcim {
  font-family: var(--betu-utility); font-size: .625rem; font-weight: 500;
  color: var(--arany); text-transform: uppercase; letter-spacing: .18em;
}

.fomenu { display: flex; align-items: center; gap: var(--terkoz-2); }
.fomenu ul { display: flex; align-items: center; gap: var(--terkoz-1); list-style: none; margin: 0; padding: 0; }
.fomenu li { margin: 0; position: relative; }
.fomenu > ul > li > a {
  display: flex; align-items: center; gap: .35rem;
  padding: .6rem .75rem;
  font-family: var(--betu-utility); font-size: .875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
  color: #D4DBE4; white-space: nowrap;
  border-radius: var(--radius);
}
.fomenu > ul > li > a:hover { color: var(--arany); background: rgba(255,255,255,.04); }
.fomenu > ul > li > a[aria-current="page"] { color: var(--arany); }
.fomenu > ul > li > a[aria-current="page"]::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .15rem;
  height: 2px; background: var(--arany);
}

/* Legördülő */
.almenu-nyito svg { width: 10px; height: 10px; transition: transform var(--atmenet); }
.fomenu li:hover .almenu-nyito svg, .fomenu li:focus-within .almenu-nyito svg { transform: rotate(180deg); }
.almenu {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: var(--felulet-2);
  border: 1px solid var(--vonal); border-top: 2px solid var(--arany);
  border-radius: 0 0 var(--radius-nagy) var(--radius-nagy);
  box-shadow: var(--arnyek-2);
  padding: var(--terkoz-2);
  display: flex !important; flex-direction: column; gap: 2px;
  /* A .fomenu ul szabály align-items: center-t ad; oszlopirányban ez a
     tételeket a saját szövegük szélességére zsugorítaná és középre húzná.
     A stretch teszi őket egyforma szélessé és balra igazítottá. */
  align-items: stretch;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all var(--atmenet);
}
.almenu li { width: 100%; }
.fomenu li:hover > .almenu, .fomenu li:focus-within > .almenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.almenu a {
  display: block; padding: .65rem .85rem;
  font-size: .875rem; color: #D4DBE4; border-radius: var(--radius);
  font-family: var(--betu-torzs); text-transform: none; letter-spacing: 0;
}
.almenu a:hover { background: var(--klubkek); color: var(--feher); }
.almenu a[aria-current="page"] { color: var(--arany); }
.almenu strong { display: block; font-size: .9375rem; }
.almenu span { display: block; font-size: .75rem; color: var(--fust-halk); }
.almenu a:hover span { color: rgba(255,255,255,.7); }

.fejlec__cselekves { display: flex; align-items: center; gap: var(--terkoz-3); flex: none; }
.fejlec__telefon {
  display: flex; align-items: center; gap: var(--terkoz-2);
  font-family: var(--betu-utility); font-size: .875rem; font-weight: 600;
  color: var(--feher); letter-spacing: .04em; white-space: nowrap;
}
.fejlec__telefon svg { width: 16px; height: 16px; color: var(--arany); }
.fejlec__telefon:hover { color: var(--arany); }

/* Hamburger */
.menu-kapcsolo {
  display: none; width: 46px; height: 46px;
  background: transparent; border: 1px solid var(--vonal-eros);
  border-radius: var(--radius); cursor: pointer;
  padding: 0; place-items: center;
}
.menu-kapcsolo span {
  display: block; width: 20px; height: 2px; background: var(--feher);
  position: relative; transition: background-color var(--atmenet);
}
.menu-kapcsolo span::before, .menu-kapcsolo span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: var(--feher); transition: transform var(--atmenet);
}
.menu-kapcsolo span::before { top: -6px; }
.menu-kapcsolo span::after { top: 6px; }
.menu-kapcsolo[aria-expanded="true"] span { background: transparent; }
.menu-kapcsolo[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-kapcsolo[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --- 5.2 Hero ------------------------------------------------------------ */
.hero {
  position: relative;
  /* A főoldali fejléckép szélesebb és alacsonyabb formátumú, mint a többi,
     ezért itt a fejléc is laposabb – így a kép kevésbé vágódik oldalt. */
  min-height: min(74vh, 620px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--fejlec-magassag) + 2.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  overflow: hidden;
  background: var(--fekete);
}
.hero__hatter { position: absolute; inset: 0; z-index: 0; }
.hero__hatter img { width: 100%; height: 100%; object-fit: cover; }
.hero__hatter::after {
  content: ""; position: absolute; inset: 0;
  /* Világosabb fátyol, hogy a terem színei és a háttér látszódjanak.
     A szöveg mögötti sáv sötétebb marad az olvashatóság miatt – ezért
     erősebb balra és alul, és szinte áttetsző a kép jobb oldalán. */
  background:
    linear-gradient(180deg, rgba(11,13,16,.62) 0%, rgba(11,13,16,.10) 40%, rgba(11,13,16,.80) 100%),
    linear-gradient(100deg, rgba(7,20,38,.86) 0%, rgba(7,20,38,.60) 34%, rgba(7,20,38,.14) 62%, transparent 82%);
}
.hero__tartalom { position: relative; z-index: 1; max-width: 830px; }
.hero h1 {
  margin-bottom: var(--terkoz-5);
  /* Két rétegű árnyék: a szűk, sötét kontúr a mennyezeti lámpák világos
     foltjain is olvashatóvá teszi a betűket, a széles pedig lágyan
     elválasztja a szöveget a fotótól. Így a képet nem kell sötétíteni. */
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 4px 30px rgba(0,0,0,.6);
}
.hero h1 em { font-style: normal; color: var(--arany); display: block; }
.hero__alcim {
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  color: #D9E1EA; max-width: 58ch;
  margin-bottom: var(--terkoz-6);
}
.hero__alcim strong { color: var(--arany); font-weight: 600; }
.hero .gomb-sor { margin-bottom: var(--terkoz-5); }
.hero__lab {
  font-family: var(--betu-utility); font-size: .8125rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--fust);
  display: flex; align-items: center; gap: var(--terkoz-3);
}
.hero__lab svg { width: 16px; height: 16px; color: var(--arany); }

/* Hero alsó ringkötél-sáv: a fotón látható ringhez kapcsolódik */
.hero__kotel {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
  height: 40px; pointer-events: none;
}
.hero__kotel i {
  position: absolute; left: 0; right: 0; height: 4px; border-radius: 4px; display: block;
}
.hero__kotel i:nth-child(1) { bottom: 26px; background: var(--klubkek); opacity: .85; }
.hero__kotel i:nth-child(2) { bottom: 14px; background: var(--arany); opacity: .75; }
.hero__kotel i:nth-child(3) { bottom: 2px;  background: var(--klubkek); opacity: .85; }

/* Aloldali fejléc-hero */
.oldal-hero {
  /* A háttérkép függőleges fókuszpontja. A keret alacsonyabb, mint a kép,
     ezért a böngésző levág belőle; ez az érték dönti el, honnan.
     Nagyobb szám = a kép feljebb csúszik, több látszik az alsó részéből.
     Oldalanként felülírható: style="--hero-fokusz:86%" */
  --hero-fokusz: 50%;
  position: relative;
  /* Egységes minimummagasság: enélkül a rövidebb című oldalak
     (pl. Edzések) észrevehetően alacsonyabb fejlécet kapnának,
     mint a három soros címűek. */
  min-height: clamp(420px, 52vw, 760px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--fejlec-magassag) + clamp(2rem, 5vw, 3.5rem));
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  overflow: hidden; background: var(--melykek);
}
.oldal-hero__hatter { position: absolute; inset: 0; z-index: 0; }
.oldal-hero__hatter img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center var(--hero-fokusz);
}
.oldal-hero__hatter::after {
  content: ""; position: absolute; inset: 0;
  /* Világosabb fátyol – a fotó színei átjönnek, a szöveg mögött
     (bal oldal és alsó sáv) marad elég kontraszt az olvasáshoz. */
  background:
    linear-gradient(180deg, rgba(11,13,16,.66) 0%, rgba(7,20,38,.34) 55%, rgba(11,13,16,.80) 100%),
    linear-gradient(100deg, rgba(7,20,38,.72) 0%, rgba(7,20,38,.20) 58%, transparent 82%);
}
.oldal-hero .keret { position: relative; z-index: 1; }
.oldal-hero h1 {
  max-width: 20ch;
  text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 4px 24px rgba(0,0,0,.5);
}
.oldal-hero .cimke, .oldal-hero__bevezeto { text-shadow: 0 1px 3px rgba(0,0,0,.75); }
.oldal-hero__bevezeto { max-width: 62ch; color: #D9E1EA; font-size: 1.0625rem; }

/* --- 5.3 Kép + szöveg blokk ---------------------------------------------- */
.kep-szoveg { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr 1fr; }
.kep-szoveg--forditott .kep-szoveg__kep { order: 2; }
.kep-szoveg__kep { position: relative; }
.kep-szoveg__kep img { width: 100%; border-radius: var(--radius-nagy); }
.kep-szoveg__kep::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-nagy);
  border: 1px solid var(--vonal); pointer-events: none;
}
.kep-szoveg__kep--keretes { padding: var(--terkoz-4); background: var(--melykek); border-radius: var(--radius-nagy); }
.kep-szoveg__szoveg p { color: var(--fust); }
.kep-szoveg__szoveg p.vezeto { color: #E7ECF2; font-size: 1.125rem; }

/* --- Kiemelt esemény sáv (főoldal) -------------------------------------
   HATÁRIDŐS: a bajnokság után a hozzá tartozó szekcióval együtt törölhető.
   A plakát fekvő és kis felbontású (526x275), ezért kap egy felső korlátot,
   és nem nyúlik a rács teljes szélességére – nagyítva mosódna. */
.esemeny-kiemelt {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 526px) minmax(0, 1fr);
  align-items: center;
}
.esemeny-kiemelt__kep {
  display: block; position: relative; line-height: 0;
  border-radius: var(--radius-nagy); overflow: hidden;
  transition: transform var(--atmenet), box-shadow var(--atmenet);
}
.esemeny-kiemelt__kep img { width: 100%; height: auto; display: block; }
/* A <picture> inline elem, magasság nélkül – lásd a stíluslap elején lévő
   szabályt. Itt a kép magassága automatikus, ezért csak display kell. */
.esemeny-kiemelt__kep picture { display: block; }
.esemeny-kiemelt__kep::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-nagy);
  border: 1px solid var(--vonal); pointer-events: none;
}
.esemeny-kiemelt__kep:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.esemeny-kiemelt__szoveg h2 { margin-block: var(--terkoz-3) var(--terkoz-4); }
.esemeny-kiemelt__szoveg p { color: var(--fust); }
.esemeny-kiemelt__szoveg p.vezeto { color: #E7ECF2; font-size: 1.125rem; }

@media (max-width: 900px) {
  .esemeny-kiemelt { grid-template-columns: 1fr; }
}

/* --- Plakátrács (esemény plakátjai) -------------------------------------
   HATÁRIDŐS: a bajnokság után a hozzá tartozó blokkal együtt törölhető.
   A plakátok Facebookról származnak, 526 px szélesek, ezért a hasábok
   szándékosan nem lesznek ennél nagyobbak. */
.plakat-racs {
  display: grid; gap: var(--terkoz-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 760px;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.plakat { margin: 0; }
/* A <picture> inline elem – magasság nélkül a benne lévő kép szabályai
   nem érvényesülnek. Lásd a stíluslap elején lévő szabályt. */
.plakat picture { display: block; }
.plakat img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-nagy);
  border: 1px solid var(--vonal);
}
.plakat figcaption {
  margin-top: var(--terkoz-3);
  font-size: .8125rem; line-height: 1.5; color: var(--fust-halk);
}

/* --- Hírbejegyzés (hirek.html) ------------------------------------------
   A bejegyzés egy hasábban fut, olvasható sorhosszal. Az eredménylista és
   a fotórács szélesebb lehet, ezért azoknak nincs szélességkorlátja. */
.hir { max-width: 100%; }
.hir__fej { max-width: 68ch; }
.hir__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--terkoz-3);
  font-family: var(--betu-utility); font-size: .8125rem;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--arany); margin-bottom: var(--terkoz-4);
}
.hir__meta span[aria-hidden] { color: var(--fust-halk); }
.hir__meta > span:not([aria-hidden]) { color: var(--fust); }
.hir__fej h2 { margin-bottom: var(--terkoz-4); }
.hir__fej p.vezeto { color: #E7ECF2; font-size: 1.125rem; }

.hir__szoveg { max-width: 68ch; margin-top: clamp(2rem, 4vw, 2.75rem); }
.hir__szoveg p { color: var(--fust); margin-bottom: var(--terkoz-4); }
.hir__szoveg p.hir__zaras {
  color: #E7ECF2; margin-top: var(--terkoz-5);
  padding-top: var(--terkoz-4); border-top: 1px solid var(--vonal);
}

/* Eredménylista: helyezés, név, kategória egy sorban. */
.hir__eredmenyek { margin-top: clamp(2rem, 4vw, 2.75rem); }
.eredmeny-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--terkoz-3); }
.eredmeny-lista li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--terkoz-3);
  padding: var(--terkoz-4);
  background: var(--felulet-2); border: 1px solid var(--vonal);
  border-radius: var(--radius); border-left: 3px solid var(--vonal-eros);
}
.eredmeny-lista strong { color: var(--feher); font-size: 1.0625rem; }
.eredmeny-lista__hely {
  font-family: var(--betu-utility); font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--fust); flex: none;
  min-width: 10ch;
}
.eredmeny-lista__hely--arany { color: var(--arany); }
.eredmeny-lista__hely--ezust { color: #CFD6DE; }
.eredmeny-lista li:has(.eredmeny-lista__hely--arany) { border-left-color: var(--arany); }
.eredmeny-lista li:has(.eredmeny-lista__hely--ezust) { border-left-color: #CFD6DE; }
.eredmeny-lista__kategoria { color: var(--fust-halk); font-size: .875rem; }

/* Fotórács a bejegyzés alatt. A képek telefonfotók, ezért nem nyújtjuk
   őket – a hasábok szélessége felül van korlátozva. */
.hir__kepek {
  display: grid; gap: var(--terkoz-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 900px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.hir__kepek figure { margin: 0; }
/* A <picture> inline elem – lásd a stíluslap elején lévő szabályt. */
.hir__kepek picture { display: block; }
.hir__kepek img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-nagy); border: 1px solid var(--vonal);
}
.hir__kepek figcaption {
  margin-top: var(--terkoz-3);
  font-size: .8125rem; line-height: 1.5; color: var(--fust-halk);
}

/* --- 5.4 Záró felhívás --------------------------------------------------- */
.zaro-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--klubkek) 0%, var(--melykek) 65%, var(--fekete) 100%);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.zaro-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 5px 5px;
}
.zaro-cta .keret { position: relative; z-index: 1; }
.zaro-cta h2 { max-width: 16ch; }
.zaro-cta__racs { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr 1fr; align-items: center; }
.zaro-cta__adatok { display: grid; gap: var(--terkoz-4); }
.zaro-cta__adat {
  display: flex; gap: var(--terkoz-4); align-items: flex-start;
  padding: var(--terkoz-4); background: rgba(11,13,16,.45);
  border: 1px solid var(--vonal); border-radius: var(--radius-nagy);
}
.zaro-cta__adat svg { width: 22px; height: 22px; color: var(--arany); flex: none; margin-top: 3px; }
.zaro-cta__adat strong { display: block; font-family: var(--betu-utility); font-size: .8125rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--arany); margin-bottom: 2px; }
.zaro-cta__adat span { font-size: .9375rem; color: #D9E1EA; }
.zaro-cta__adat a { color: var(--feher); }
.zaro-cta__adat a:hover { color: var(--arany); }

/* --- 5.5 Lábléc ---------------------------------------------------------- */
.lablec {
  background: var(--fekete);
  border-top: 1px solid var(--vonal);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  font-size: .9375rem;
}
.lablec__racs {
  display: grid; gap: var(--terkoz-6);
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  padding-bottom: var(--terkoz-7);
}
.lablec h4 {
  font-family: var(--betu-utility); font-size: .8125rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: var(--arany);
  margin-bottom: var(--terkoz-4);
}
.lablec ul { list-style: none; padding: 0; margin: 0; }
.lablec li { margin-bottom: var(--terkoz-3); }
.lablec a { color: var(--fust); }
.lablec a:hover { color: var(--arany); }
.lablec__leiras { color: var(--fust); max-width: 34ch; }
.lablec__marka { display: flex; align-items: center; gap: var(--terkoz-3); margin-bottom: var(--terkoz-4); }
.lablec__marka img { width: 56px; height: 56px; }

.kozossegi { display: flex; gap: var(--terkoz-3); margin-top: var(--terkoz-4); }
.kozossegi a {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--vonal-eros); color: var(--feher);
  transition: all var(--atmenet);
}
.kozossegi a:hover { background: var(--arany); border-color: var(--arany); color: var(--fekete); transform: translateY(-2px); }
.kozossegi svg { width: 18px; height: 18px; }

.lablec__alj {
  border-top: 1px solid var(--vonal);
  padding-block: var(--terkoz-5);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--terkoz-4);
  color: var(--fust-halk); font-size: .8125rem;
}
.lablec__alj ul { display: flex; flex-wrap: wrap; gap: var(--terkoz-5); }
.lablec__alj li { margin: 0; }

/* Támogatói megjelenések a láblécben — kötelező nyilvánosság.
   Két külön támogatás, két külön sáv: Magyar Falu Program Falusi Civil Alap,
   illetve Nemzeti Együttműködési Alap. Mindkét logó fehér alapra készült,
   ezért az oldal sötét hátterén fehér mezőbe kerülnek – ezt a takaróflekket
   az arculati kézikönyv kifejezetten megengedi sötét háttéren. */
.tamogatok {
  display: flex; flex-direction: column; gap: var(--terkoz-5);
  border-top: 1px solid var(--vonal);
  padding-block: var(--terkoz-5);
}
.tamogatok__blokk {
  display: flex; align-items: center; gap: var(--terkoz-5);
}

/* A fehér mező SARKA ÉLES marad.
   Az arculati kézikönyv tiltja a keret használatát, és a lekerekített sarok
   keretszerű hatást kelt. Ne tegyél ide border-radius-t. */
.tamogatok__logo {
  flex-shrink: 0; background: #fff; line-height: 0;
}

/* Magyar Falu Program.
   A 300x316-os fájlban a logó maga 222x234 px, a többi saját fehér margó.
   140 px-es fájlszélességnél a logó ~104x109 px, tehát teljesül a kötelező
   100x100 px-es minimum. NE VIDD 140 PX ALÁ.
   A 14 px padding a fájl saját margójával együtt adja ki a kézikönyv
   szerinti „A” biztonsági eltartást. */
.tamogatok__logo--mfp { padding: 12px 14px; }
.tamogatok__logo--mfp img { width: 140px; height: auto; display: block; }

/* Nemzeti Együttműködési Alap — hivatalos hármas logócsoport, egyben.
   A fájlnak szintén van saját fehér margója, ezért itt kisebb a padding. */
.tamogatok__logo--nea { padding: 8px 10px; }
.tamogatok__logo--nea img { width: 420px; height: auto; display: block; }

.tamogatok__szoveg {
  font-size: .8125rem; color: var(--fust-halk); max-width: 62ch; margin: 0;
  line-height: 1.6;
}
.tamogatok__szoveg strong { color: var(--fust); font-weight: 600; }
.tamogatok__szoveg em { font-style: normal; color: var(--fust); }

@media (max-width: 900px) {
  .tamogatok__logo--nea img { width: 320px; }
}
@media (max-width: 560px) {
  .tamogatok__blokk { flex-direction: column; align-items: flex-start; gap: var(--terkoz-4); }
  /* A logó itt sem mehet 140 px alá. */
  .tamogatok__logo--nea img { width: min(280px, 100%); }
}

/* --- 5.6 Fix mobil cselekvési sáv ---------------------------------------- */
.mobil-sav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  display: none;
  background: rgba(11,13,16,.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--vonal);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobil-sav ul { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; }
.mobil-sav li { margin: 0; }
.mobil-sav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: .7rem .25rem;
  font-family: var(--betu-utility); font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: #D4DBE4; min-height: 60px;
}
.mobil-sav svg { width: 20px; height: 20px; }
.mobil-sav li:last-child a { background: var(--arany); color: var(--fekete); }
.mobil-sav li:not(:last-child) a:hover { color: var(--arany); }
.mobil-sav li:not(:last-child) + li a { border-left: 1px solid var(--vonal); }

/* --- 5.7 Süti-sáv -------------------------------------------------------- */
.suti-sav {
  position: fixed; left: var(--terkoz-4); right: var(--terkoz-4); bottom: var(--terkoz-4);
  z-index: 1200; max-width: 560px;
  background: var(--felulet-2);
  border: 1px solid var(--vonal-eros); border-top: 3px solid var(--arany);
  border-radius: var(--radius-nagy); box-shadow: var(--arnyek-3);
  padding: var(--terkoz-5);
  display: none;
}
.suti-sav.aktiv { display: block; }
.suti-sav h4 { font-family: var(--betu-utility); font-size: .875rem; letter-spacing: .12em; color: var(--arany); }
.suti-sav p { font-size: .875rem; color: var(--fust); }
.suti-sav .gomb-sor { margin-top: var(--terkoz-4); }

/* ==========================================================================
   6) OLDALSPECIFIKUS
   ========================================================================== */

/* Próbaedzés: letisztult konverziós oldal.
   A főmenü korábban itt el volt rejtve (fókusz az űrlapon), de így a
   látogatónak nem volt visszaút, mobilon pedig a hamburger gomb halott
   volt: a .fomenu display:none miatt megnyitni sem lehetett. */
.csupasz .fejlec { background: var(--fekete); border-bottom: 1px solid var(--vonal); }

.konverzios-racs { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1.05fr .95fr; align-items: start; }
.konverzios-elonyok { display: grid; gap: var(--terkoz-5); }
.konverzios-elony { display: flex; gap: var(--terkoz-4); align-items: flex-start; }
.konverzios-elony__ikon {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(245,184,0,.12); color: var(--arany);
  border: 1px solid var(--arany-halo);
}
.konverzios-elony__ikon svg { width: 20px; height: 20px; }
.konverzios-elony h3 { font-size: 1.0625rem; margin-bottom: var(--terkoz-2); }
.konverzios-elony p { font-size: .9375rem; color: var(--fust); margin: 0; }

/* Köszönőoldal */
.koszono { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
.koszono__pipa {
  width: 96px; height: 96px; margin: 0 auto var(--terkoz-6);
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(245,184,0,.12); border: 2px solid var(--arany); color: var(--arany);
}
.koszono__pipa svg { width: 44px; height: 44px; }

/* Kampányoldalak */
.kampany-hero { min-height: min(78vh, 700px); }
.kampany-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--terkoz-3); }
.kampany-lista li {
  display: flex; gap: var(--terkoz-3); align-items: flex-start;
  font-size: 1rem; color: #D9E1EA; margin: 0;
}
.kampany-lista svg { width: 20px; height: 20px; color: var(--arany); flex: none; margin-top: 3px; }

/* Jogi szövegoldal */
.jogi-szoveg { max-width: 72ch; }
.jogi-szoveg h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: var(--terkoz-7); }
.jogi-szoveg h3 { font-size: 1.125rem; margin-top: var(--terkoz-6); }
.jogi-szoveg p, .jogi-szoveg li { color: var(--fust); font-size: .9375rem; }
.jogi-szoveg ul { padding-left: 1.25rem; }

/* Térkép */
.terkep-doboz {
  position: relative; border-radius: var(--radius-nagy); overflow: hidden;
  border: 1px solid var(--vonal); background: var(--melykek);
  aspect-ratio: 16/10;
}
.terkep-doboz iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.35) contrast(1.05); }

/* Eseménykártya */
.esemeny {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--terkoz-5);
  padding: var(--terkoz-5);
  background: var(--felulet-2); border: 1px solid var(--vonal);
  border-radius: var(--radius-nagy);
  transition: border-color var(--atmenet), transform var(--atmenet);
}
.esemeny:hover { border-color: var(--arany-halo); transform: translateY(-3px); }
.esemeny__datum {
  text-align: center; padding: var(--terkoz-4) var(--terkoz-2);
  background: var(--melykek); border-radius: var(--radius);
  border-bottom: 3px solid var(--arany); align-self: start;
}
.esemeny__nap { font-family: var(--betu-display); font-size: 2.25rem; color: var(--feher); line-height: 1; display: block; }
.esemeny__honap {
  font-family: var(--betu-utility); font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: var(--arany); display: block; margin-top: 4px;
}
.esemeny h3 { font-size: 1.25rem; margin-bottom: var(--terkoz-2); }
.esemeny p { color: var(--fust); font-size: .9375rem; }
.esemeny__meta {
  display: flex; flex-wrap: wrap; gap: var(--terkoz-4);
  font-family: var(--betu-utility); font-size: .8125rem; color: var(--fust-halk);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: var(--terkoz-3);
}

/* Eredménysor */
.eredmeny-sor {
  display: flex; align-items: center; gap: var(--terkoz-5);
  padding: var(--terkoz-4) var(--terkoz-5);
  border-bottom: 1px solid var(--vonal);
}
.eredmeny-sor__ev {
  font-family: var(--betu-display); font-size: 1.5rem; color: var(--arany);
  flex: none; min-width: 4.5ch;
}
.eredmeny-sor__szoveg { flex: 1; }
.eredmeny-sor__szoveg strong { display: block; color: var(--feher); }
.eredmeny-sor__szoveg span { font-size: .875rem; color: var(--fust); }

/* Edzőkártya */
.edzo__kep { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-nagy); background: var(--melykek); position: relative; }
.edzo__kep img { width: 100%; height: 100%; object-fit: cover; }
.edzo__nev { font-family: var(--betu-display); font-size: 1.375rem; color: var(--feher); margin: var(--terkoz-4) 0 var(--terkoz-1); text-transform: uppercase; }
.edzo__szerep {
  font-family: var(--betu-utility); font-size: .8125rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--arany);
  display: block; margin-bottom: var(--terkoz-3);
}
.edzo p { font-size: .9375rem; color: var(--fust); }

/* Görgetésre megjelenő elemek */
.belep { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
.belep.lathato { opacity: 1; transform: none; }

/* ==========================================================================
   FONTOS: a <picture> elem magassága
   ==========================================================================
   Minden képünk <picture> elemben van (WebP + JPG). A <picture> alapból
   inline elem, magasság nélkül. Ezért a benne lévő img `height: 100%`
   szabálya NEM érvényesült: a százalék egy „auto” magasságú szülőre
   vonatkozott, így a kép a natív arányában maradt.

   Ez a fejlécképeknél látszott a legjobban: mobilon a 16:9 fotó csak a
   sáv felső ~70%-át fedte, alatta üres háttér maradt – mintha a kép
   „le lenne vágva”. Asztali nézetben véletlenül nem tűnt fel, mert ott
   a kép magassága amúgy is meghaladta a keretet.
   ========================================================================== */
.hero__hatter picture,
.oldal-hero__hatter picture,
.kartya__kep picture,
.galeria-elem picture,
.csempe picture,
.edzo__kep picture {
  display: block; width: 100%; height: 100%;
}

/* ==========================================================================
   7) RESZPONZÍV
   ========================================================================== */
@media (max-width: 1100px) {
  .lablec__racs { grid-template-columns: 1fr 1fr; }
  .fomenu > ul > li > a { padding: .6rem .55rem; font-size: .8125rem; }
  .fejlec__telefon { display: none; }
}

@media (max-width: 980px) {
  :root { --fejlec-magassag: 68px; }

  .menu-kapcsolo { display: grid; }

  .fomenu {
    position: fixed; top: var(--fejlec-magassag); left: 0; right: 0;
    max-height: calc(100dvh - var(--fejlec-magassag));
    overflow-y: auto;
    background: var(--fekete);
    border-top: 1px solid var(--vonal);
    padding: var(--terkoz-5) var(--terkoz-5) var(--terkoz-8);
    flex-direction: column; align-items: stretch; gap: 0;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--atmenet), visibility var(--atmenet);
  }
  .fomenu.nyitva { transform: translateX(0); visibility: visible; }
  .fomenu ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .fomenu > ul > li { border-bottom: 1px solid var(--vonal); }
  .fomenu > ul > li > a { padding: 1rem .25rem; font-size: 1rem; justify-content: space-between; }
  .fomenu > ul > li > a[aria-current="page"]::after { display: none; }

  .almenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none;
    padding: 0 0 var(--terkoz-4) var(--terkoz-4);
    display: none !important;
  }
  .almenu.nyitva { display: flex !important; }
  .almenu a { padding: .6rem .5rem; }

  .fejlec__cselekves .gomb { display: none; }

  .mobil-sav { display: block; }
  body { padding-bottom: 62px; }
  .suti-sav { bottom: 74px; }

  .racs--3, .racs--4, .racs--5 { grid-template-columns: repeat(2, 1fr); }
  .orarend-racs { grid-template-columns: 1fr; }
  .kep-szoveg, .zaro-cta__racs, .konverzios-racs { grid-template-columns: 1fr; }
  .kep-szoveg--forditott .kep-szoveg__kep { order: 0; }
  .galeria-racs { grid-template-columns: repeat(3, 1fr); }
  .lablec__racs { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  :root { --terkoz-9: 4rem; }
  .keret, .keret-szuk { padding-inline: var(--terkoz-4); }
  .racs--2, .racs--3, .racs--4, .racs--5 { grid-template-columns: 1fr; }
  .urlap-sor { grid-template-columns: 1fr; }
  .galeria-racs { grid-template-columns: repeat(2, 1fr); }
  .lablec__racs { grid-template-columns: 1fr; gap: var(--terkoz-6); }
  .gomb { width: 100%; }
  .gomb-sor { flex-direction: column; align-items: stretch; }
  .hero { min-height: auto; padding-top: calc(var(--fejlec-magassag) + 4rem); }

  /* --------------------------------------------------------------------
     Fejlécek mobilon
     A képernyő alján ott a fix gombsáv (Hívás / Órarend / Jelentkezés),
     ezért a főoldali fejléc két gombja duplikáció volt: helyet vett el,
     és lejjebb tolta a képet. A címsor és a bevezető is kisebb lehet,
     így több látszik a fotóból.
     A kampányoldalak (box napok, sporttábor) egyetlen CTA-gombja marad:
     ott az a lap egyetlen célja, és nincs helyette más.
     -------------------------------------------------------------------- */
  .hero .gomb-sor { display: none; }
  .hero h1 { font-size: clamp(1.75rem, 8.4vw, 2.375rem); margin-bottom: var(--terkoz-4); }
  .hero__alcim { font-size: .9375rem; margin-bottom: var(--terkoz-5); }
  .hero__lab { font-size: .6875rem; letter-spacing: .08em; }

  .oldal-hero { min-height: clamp(280px, 58vw, 400px); }
  .oldal-hero h1 { font-size: clamp(1.625rem, 7.8vw, 2.25rem); max-width: none; }
  .oldal-hero__bevezeto { font-size: .9375rem; }
  /* A kampányoldalak fejléce magasabb marad, mert gomb is van benne. */
  .kampany-hero { min-height: clamp(360px, 76vw, 520px); }

  .esemeny { grid-template-columns: 1fr; }
  .esemeny__datum { display: inline-block; min-width: 92px; }
  .marka__nev { font-size: 1rem; }
  .marka img { width: 42px; height: 42px; }
  .bizalmi-sav__lista { gap: var(--terkoz-3) var(--terkoz-5); }
  .bizalmi-sav__lista li { font-size: .75rem; }
  .nagyito__lep { width: 40px; height: 40px; }
  .nagyito__lep--elozo { left: var(--terkoz-2); }
  .nagyito__lep--kovetkezo { right: var(--terkoz-2); }
  .statisztika__szam { font-size: 2.75rem; }
}

@media (max-width: 420px) {
  .galeria-racs { grid-template-columns: 1fr 1fr; gap: var(--terkoz-2); }
  .marka__alcim { display: none; }
}

/* ==========================================================================
   8) AKADÁLYMENTESSÉG ÉS NYOMTATÁS
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .belep { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --fust: #C3CCD6; --fust-halk: #A9B4C0; --vonal: rgba(255,255,255,.25); }
}

@media print {
  .fejlec, .mobil-sav, .suti-sav, .nagyito, .hero__kotel, .ringkotel, .ringkotel-szalag { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .szekcio { padding-block: 1rem; background: #fff !important; }
  h1, h2, h3, h4 { color: #000; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  img { max-width: 60%; }
}