/* ===================================================================
   A JELENLEGI weconstruct.hu MASOLATA.

   MINDEN ERTEK MERESBOL JON, es a meresek a `meres/` mappaban allnak:
     szakasz-geometria  epites/geometria.py  -> meres/geometria-eles-1440.json
     kep- es kartyadoboz epites/geometria2.py -> meres/geometria2-eles-1440.json
     tipografia         epites/tipo-meres.py  -> meres/tipografia-computed-1440.json
     hattérszinek       pixel-mintavetel a referenciakeprol (alap-eredeti-teljes-1440.png)

   A MERT SAVTERKEP (1440 px nezet, a lap 3037 px hosszu):
     fejlec             y=   0  h= 100
     hero (video)       y= 100  h= 930
     SZOLGALTATASAINK   y=1030  h= 805
     ROLUNK             y=1835  h= 683
     KAPCSOLAT          y=2518  h= 452
     lablec             y=2970  h=  67
   Tartalom-oszlop: x=230, szelesseg 980.

   KET KORABBI HIBA, amit ez a valtozat javit, es azert all itt, mert a
   KOVETKEZO masolat ugyanigy keszulne el:
   1. A KEPEKET A FORRASBELI SORRENDJUK SZERINT NEVEZTEM EL, nem a tartalmuk
      szerint -- es az egesz keszlet EGGYEL ELFORDULT (a naperomu-kartyara a
      villamos foto kerult, a Rolunk savba a naperomu-foto). A rendereles
      HIBATLANUL mukodott, csak mast mutatott. A javitas a nevadas: minden kep
      a KONTAKT-LAP MEGNEZESE utan kapta a nevet.
   2. A HERO ALATT >>felho-savot<< lattam a referenciakepen, es beepitettem.
      NEM LETEZIK: a referenciakepem gorgetett darabokbol van osszefuzve, a
      hero-videó kozben tovabb jatszott, es a masodik darab egy egbolt-gazdag
      KOCKAT kapott el -- pont az illesztesi pontnal. A sav a SAJAT MEROM
      mutermeke volt. A geometria-meres dontotte el: a hero 930 px, es utana
      KOZVETLENUL a szolgaltatas-sav jon.
   =================================================================== */

/* MONTSERRAT, BEAGYAZVA a ceges arculati keszletbol (`agents/studio/brand/fonts/`).
   A gepre is felvettem, de a lap ONHORDO: a @font-face miatt mas gepen is helyes. */
@font-face{font-family:MontserratW;src:url("media/betu/Montserrat-Regular.ttf") format("truetype");font-weight:400;font-display:swap;}
@font-face{font-family:MontserratW;src:url("media/betu/Montserrat-Bold.ttf") format("truetype");font-weight:700;font-display:swap;}
/* OPEN SANS -- a TORZSSZOVEG betuje. MERVE 2026-10-08 az elo lapon: a szoveges elemek
   kozul 21 szamol >>open sans<<-t es 14 Montserratot, es a `document.fonts` szerint
   PONTOSAN KET vagas toltodik be: 400 es 700. A szerep-oszlas ezert nem izles kerdese.
   A fajl a Google Fonts kanonikus TTF-je (Apache 2.0); glif-szinten visszamerve a
   `cmap` tablabol: mind a 19 magyar ekezetes betu megvan, az o-hullamos es u-hullamos is. */
@font-face{font-family:OpenSansW;src:url("media/betu/OpenSans-Regular.ttf") format("truetype");font-weight:400;font-display:swap;}
@font-face{font-family:OpenSansW;src:url("media/betu/OpenSans-Bold.ttf") format("truetype");font-weight:700;font-display:swap;}

:root{
  --feher:#FFFFFF;
  --fekete:#000000;        /* fejlec -- MERT, pixel-mintavetel (720,50) */
  --sarga:#EED714;         /* MERT, az aktiv menupont szine a DOM-bol: rgb(238,215,20) */
  --szoveg:#3B3A3A;        /* rgb(59,58,58) */
  --kek:#1E2D3B;           /* szakaszcimek: rgb(30,45,59) */
  --kartyacim:#3D5975;     /* MERT: rgb(61,89,117) -- VILAGOSABB, mint a szakaszcim */
  --halvany:#F6F6F6;       /* kartya-hatter, Rolunk-sav, lablec */
  --tartalom:980px;        /* MERT: x=230..1210 */
  --szurke-k:#949494;      /* MERT: az urlap-mezok kerete, rgb(148,148,148) */
  --sarga2:#EDCD1F;        /* MERT: a Karrier urlap-gombja, rgb(237,205,31) -- NEM azonos
                              a menu aktiv sargajaval (#EED714). Az eles lapon KET sarga van. */
  --cim-betu:MontserratW,Montserrat,"Helvetica Neue",-apple-system,sans-serif;
  --torzs-betu:OpenSansW,"Open Sans","Helvetica Neue",-apple-system,sans-serif;
}
*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;                /* Peti kerese: ne ugorjon, gorduljon */
  /* A sticky fejlec 100 px magas, tehat a horgony-cel elso 100 px-et eltakarna:
     a `#szolgaltatasaink`-ra ugras utan a szakaszcim a fejlec ALATT allna.
     A `scroll-padding-top` a HTML-en MINDEN horgonyra hat, nem kell a celokat
     egyenkent jelolni. Telefonon 72 px, mert ott a fejlec is annyi. */
  scroll-padding-top:100px;
}
html,body{margin:0;padding:0;}
body{
  background:var(--feher); color:var(--szoveg);
  font-family:var(--torzs-betu);
  font-size:15px; line-height:1.45;
}
img{display:block; max-width:100%;}

/* ---- FEJLEC: y=0 h=100, FEKETE, logo 219x64 x=103 ---- */
header{
  /* Peti kerese (2026-10-12 13:01): a menusor maradjon a lap tetejen gorgetesnel.
     A `z-index` 2 helyett 50: a mobil also sav 40-en all, es egy sticky fejlec
     gorgetes kozben MINDEN szakasszal talalkozik, nem csak a hero-val. */
  position:sticky; top:0; z-index:50;
  background:var(--fekete); height:100px; display:flex; align-items:center;
  justify-content:space-between; padding:0 103px;
}
header .logo img{width:219px; height:64px; object-fit:contain;}
nav a{
  font-family:var(--cim-betu);
  color:var(--feher); text-decoration:none; margin-left:34px;
  font-size:14px; line-height:37px; text-transform:uppercase; font-weight:400;
}
nav a.aktiv{color:var(--sarga);}

/* ---- HERO: y=100 h=930, VEGTELENITETT timelapse ---- */
.hero{position:relative; width:100%; height:930px; background:var(--fekete);
      clip-path:inset(0);}    /* tartalmazo blokk a fixed gyereknek -> a savra vag */
.hero video{
  /* MIERT 100% ES NEM 100vw: a `vw` a gorgetosav helyet IS beleszamolja, a fixed elem
     szazalekos szelessege viszont NEM -- tehat klasszikus (helyet foglalo) gorgetosav
     mellett a 100vw a sav szelessegevel tulnyulna, es a lap vizszintesen gorogne.
     EZEN A GEPEN NEM MERHETO: a macOS atlapolo savja 0 px, igy a ketto azonos (1440).
     A csere ITT nulla valtozas, MASHOL megelozes. */
  position:fixed; top:0; left:0; width:100%; height:100vh;
  object-fit:cover; display:block; z-index:0;
}
.hero .cim{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; text-align:center;
  padding-top:261px;            /* MERT: a cimdoboz teteje y=361, a hero y=100 */
}
.hero h1{
  font-family:var(--cim-betu);
  color:var(--feher); margin:0; width:608px;   /* MERT: a cimdoboz 608 px -> KET sor */
  font-size:60px; font-weight:700; line-height:66px; letter-spacing:3px;
  text-shadow:0 2px 20px rgba(0,0,0,.4);
}
.hero .nyil{margin-top:49px; width:54px; height:31px;}   /* MERT: 54x31, y=550 */

/* ---- SZAKASZCIM: kozepre zart, SARGA vonallal (MERT: 116x10, y=1168) ---- */
.szakasz{max-width:var(--tartalom); margin:0 auto;}
.szakasz-cim{text-align:center;}
.szakasz-cim h2{
  font-family:var(--cim-betu);
  color:var(--kek); margin:0;
  font-size:55px; font-weight:700; line-height:1.22; letter-spacing:2.75px;
}
.szakasz-cim .vonal{width:116px; height:10px; background:var(--sarga); margin:13px auto 0;}

/* ---- SZOLGALTATASOK: sav 1030..1835 ---- */
.szolg{padding:58px 0 83px; position:relative; z-index:1; background:var(--feher);}
/* MERT: a kartyak alja y=1752, a sav vege 1835. A hatter KELL: a rogzitett hero-video
   kulonben atlatszana alatta. */
.szolg .kartyak{
  display:grid; grid-template-columns:repeat(3,231px); gap:16px;  /* MERT: 231 px, res 16. 2026-10-12: 4 -> 3 oszlop, mert hat kartya lett (2x3 racs) */
  justify-content:center; margin-top:59px;                        /* MERT: kep y=1237 */
}
.kartya{background:var(--halvany); box-shadow:0 1px 8px rgba(0,0,0,.07);
        padding-bottom:18px; min-height:515px;}   /* MERT: a kartyadoboz 515 px, mind a negy */
.kartya .kep{width:231px; height:171px; object-fit:cover;}        /* MERT: 231x171 */
.kartya h3{
  font-family:var(--torzs-betu);   /* MERT: a kartya-cim Open Sans, nem Montserrat */
  color:var(--kartyacim); margin:17px 10px 13px;
  font-size:18px; font-weight:700; line-height:19.8px;            /* MERT */
}
.kartya p{margin:0 10px 13px; font-size:14px; line-height:22.4px; color:var(--szoveg);}

/* ---- ROLUNK: sav 1835..2518 (h=683), bal szoveg x=250 w=408, jobb fele a fotó ---- */
.rolunk{
  background:var(--halvany); height:683px; position:relative;
  clip-path:inset(0);
}
/* MERVE: az elo lapon a daru-foto 1440x848 (nezet-magassagu), es LASSABBAN mozog, mint
   a gorgetes -- a sav 683 px, a kep 848, tehat VAGVA van es gorgetes kozben MAS reszlete
   latszik. Ugyanaz a rogzites, csak a jobb felre. */
.rolunk .kep{
  position:fixed; top:0; left:50%; width:50%; height:100vh;
  object-fit:cover; z-index:0;
}
.rolunk .szoveg{position:relative; z-index:1; width:408px; margin-left:250px; padding-top:56px;}
.rolunk h2{font-family:var(--cim-betu); color:var(--kek); margin:0; font-size:55px; font-weight:700;
           line-height:1.22; letter-spacing:2.75px;}
.rolunk .vonal{width:116px; height:10px; background:var(--sarga); margin:13px 0 0;}
.rolunk p{font-size:20px; line-height:34px; margin:0 0 22px;}     /* MERT: 20/34, w=385 */
.rolunk .torzs{margin-top:66px;}                                  /* MERT: p teteje y=2030 */

/* ---- KAPCSOLAT: sav 2518..2970, oszlopok x=250 w=425 es x=800 w=389 ---- */
.kapcsolat{padding:56px 0 111px; position:relative; z-index:1; background:var(--feher);}
/* MERT: a szakasz 2518..2970, osszesen 452 */
.kapcsolat .oszlopok{
  max-width:1440px; margin:39px 0 0; padding:0 250px 0 250px;      /* MERT: p teteje y=2751 */
  display:grid; grid-template-columns:425px 389px; justify-content:space-between;
}
.kapcsolat h3{font-family:var(--cim-betu); color:var(--kek);
              font-size:25px; font-weight:700; line-height:1.3; margin:0 0 16px;}
.kapcsolat p{margin:0; font-size:18px; line-height:27px;}         /* MERT: 18/27 */
.kapcsolat a{color:var(--szoveg);}

/* ---- LABLEC: 2970..3037, h=67 ---- */
footer{
  font-family:var(--cim-betu);
  position:relative; z-index:1;
  background:var(--halvany); height:67px; padding:0 250px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:14px; letter-spacing:.56px; color:var(--szoveg);
}
footer .fb{
  width:30px; height:30px; border-radius:50%; background:var(--sarga);
  display:flex; align-items:center; justify-content:center;
  color:var(--feher); font-weight:700; text-decoration:none; font-size:17px;
}

/* ===================================================================
   KARRIER ALOLDAL. A MERT geometria (1440 px nezet, a lap 4742 px):
     fejlec          y=   0  h= 100
     hero (foto)     y= 100  h= 660   -- NEM rogzitett, ellentetben a fooldaleval
     Allast keresel? y= 760  h= 735   -- bal foto 590x483 (x=230, y=834), jobb szoveg
     Poziciok        y=1495  h=2323
     Urlap           y=3818  h= 857   -- jobb foto 634x483 (x=616)
     lablec          y=4675  h=  67
   =================================================================== */
.k-hero{position:relative; height:660px; overflow:hidden;}
.k-hero img{width:100%; height:100%; object-fit:cover;}
.k-hero .cim{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; color:var(--feher);
}
.k-hero h1{font-family:var(--cim-betu); font-size:80px; font-weight:400; margin:0;
           line-height:1.1; text-shadow:0 2px 20px rgba(0,0,0,.4);}   /* MERT: 80px, suly 400 */
.k-hero .alcim{font-size:20px; font-weight:700; margin:22px 0 0;
               text-shadow:0 2px 14px rgba(0,0,0,.4);}                /* MERT: 20px/700 */
.gomb{
  display:inline-block; margin-top:28px; padding:13px 38px;
  background:var(--sarga); color:var(--kek); text-decoration:none;
  font-family:var(--cim-betu); font-weight:700; font-size:14px; letter-spacing:1.2px;
  border:0; cursor:pointer;
}
.k-sav{max-width:1180px; margin:0 auto; padding:74px 32px;}
.k-sav.ketoszlop{display:grid; grid-template-columns:590px 1fr; gap:56px; align-items:center;}
.k-sav.ketoszlop img{width:590px; height:483px; object-fit:cover;}    /* MERT: 590x483 */
.k-sav h2{font-family:var(--cim-betu); color:var(--kek); font-size:30px; font-weight:700;
          margin:0 0 20px;}                                           /* MERT: 30px/700 */
.k-sav p{font-size:18px; line-height:27px; margin:0 0 16px;}
.poziciok{background:var(--halvany); padding:66px 0 74px;}
.poziciok .szakasz-cim h2{font-size:30px; letter-spacing:normal;}
.poziciok .racs{
  max-width:1180px; margin:46px auto 0; padding:0 32px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
}
.pozicio{background:var(--feher); padding:30px 32px 34px; box-shadow:0 1px 8px rgba(0,0,0,.07);}
.pozicio h3{font-family:var(--cim-betu); color:var(--kek); font-size:20px; font-weight:700;
            margin:0 0 4px; line-height:1.25;}                        /* MERT: 20px/700 */
.pozicio .alcim{color:var(--kartyacim); font-size:15px; margin:0 0 20px;}
.pozicio h4{color:var(--kek); font-size:15px; font-weight:700; margin:20px 0 8px;}
.pozicio ul{margin:0; padding-left:20px; font-size:14px; line-height:22px;}
.pozicio li{margin:0 0 4px;}
.urlap-sav{max-width:1180px; margin:0 auto; padding:74px 32px;
           display:grid; grid-template-columns:1fr 634px; gap:56px; align-items:center;}
.urlap-sav img{width:634px; height:483px; object-fit:cover;}          /* MERT: 634x483 */
.urlap-sav h2{font-family:var(--cim-betu); color:var(--kek); font-size:30px; font-weight:700;
              margin:0 0 28px;}
.urlap{max-width:450px;}                 /* MERT: a teljes szelessegu mezok 450 px */
.urlap .sor{display:grid; grid-template-columns:210px 210px; gap:30px;}  /* MERT */
.urlap label{display:block; font-size:14px; font-weight:700; color:var(--kek); margin:0 0 7px;}
.urlap .mezo{margin:0 0 18px;}
.urlap input[type=text], .urlap input[type=email], .urlap input[type=tel]{
  width:100%; height:37px; padding:0 11px; font:inherit; font-size:15px;
  border-radius:0; -webkit-appearance:none; appearance:none;
  border:1px solid var(--szurke-k); background:transparent;
}
.urlap .sugo{font-size:13px; color:var(--kartyacim); margin:6px 0 20px;}
.urlap .gomb{margin-top:6px; width:450px; height:36px; padding:0;
             background:var(--sarga2); text-align:center;}   /* MERT: 450x36, #EDCD1F */

/* ===================================================================
   RESZPONZIV RETEG.

   KIKOTES: az 1440 px-es nezet MERT geometriaja NEM MOZDULHAT -- a masolat hitelesseget
   az adja, hogy mind a hat sav dy=0 dh=0. Ezert MINDEN itteni szabaly `max-width` lekerdezes
   ALATT all, vagyis 1440-en egyik sem aktiv.

   A KIINDULO MERES (2026-10-08, `epites/reszponziv.py`):
       390 px nezet -> scrollWidth 1064, a lap 674 px-szel OLDALRA GORDUL, 33 elem log ki
       768 px nezet -> scrollWidth 1064, 296 px tullogas, 12 elem
      1440 px nezet -> nincs tulcsordulas
   A fo okozok: a Kapcsolat rogzitett 250 px-es oldalmargoja es 425+389-es hasabjai,
   a kartyaracs `repeat(4,231px)`-e, es a hero cimenek fix 608 px-e.
   =================================================================== */

@media (max-width:1320px){
  header{padding:0 32px;}
  footer{padding:0 32px;}
  .kapcsolat .oszlopok{padding:0 32px; grid-template-columns:1fr 1fr; gap:48px;}
  .rolunk .szoveg{margin-left:32px;}
  .k-sav, .urlap-sav, .poziciok .racs{padding-left:32px; padding-right:32px;}
}

/* A KET HASABOS URLAP-SAV MINIMUMA 1204 px NEZET, A HASABOLAS VISZONT CSAK 1024-NEL
   KAPCSOL AT -- a koztes 180 px-es savban a kep KILOGOTT (merve 2026-10-10 01:10,
   karrier.html, hat szelessegen):
       1440 / 1320 / 1250 / 1200 px  ->  TUL 0
       1150 px -> 22 | 1100 px -> 72 | 1050 px -> 122      <- a kep jobb szele mindvegig 1172
       1024 px ->  0   (itt mar EGY hasab)
   A LEVEZETES: a bal hasab `1fr`, de a `min-width:auto` miatt a tartalma ala nem megy
   (`.urlap .sor` 210+30+210 = 450 px), tehat a racs 450 + 56 gap + 634 kep = 1140 px
   tartalmat kiván, plusz 2x32 px padding = 1204 px nezet. Ez alatt EGY hasab kell.
   Ugyanazt a ket deklaraciot hasznalja, amit a 1024-es blokk mar definialt -- uj
   elrendezest NEM vezetunk be, csak a mar megtervezett allapot hatarat toljuk ki. */
@media (max-width:1203px){
  .urlap-sav{grid-template-columns:1fr; gap:28px;}
  .urlap-sav img{width:100%; height:auto;}
}

/* A ROGZITETT HATTER KESZULEKEN DRAGA ES NEM IS LATSZIK JOL: szuk nezeten visszateszunk
   normal folyasba. A `clip-path` maradhat, a `fixed` lesz `absolute`. */
@media (max-width:1024px){
  .hero{height:560px;}
  /* A `clip-path` CSAK LATVANYBAN vag: a GORGETHETO TULCSORDULAST nem szunteti meg
     (merve 2026-10-10 00:55). Itt a video `absolute`, tehat a `be-kep` `scale(1.07)`-je
     a lapot 390 px-en 14 px-rel szelesebbre tolta a beuszas alatt. Az `overflow:hidden`
     VISZONT megszunteti -- es a fixed gyerek tartalmazo blokkjat nem erinti, azt a
     `clip-path` adja. 1440 px-en a video `fixed`, ami a dokumentum tulcsordulasahoz
     amugy sem jarul hozza, ezert ott erre nincs szukseg. */
  .hero{overflow:hidden;}
  .hero video{position:absolute; width:100%; height:100%;}
  .hero .cim{padding-top:150px;}
  .hero h1{width:min(608px,86vw); font-size:clamp(30px,6.4vw,60px); line-height:1.12;
           letter-spacing:2px;}
  .szakasz-cim h2, .rolunk h2{font-size:clamp(28px,5vw,55px); letter-spacing:1.6px;}

  .szolg .kartyak{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:620px;
                  margin-left:auto; margin-right:auto;}
  .kartya .kep{width:100%;}
  .kartya{min-height:0;}

  .rolunk{height:auto; clip-path:none;}
  .rolunk .kep{position:static; width:100%; height:300px; left:auto;}
  .rolunk .szoveg{width:auto; max-width:620px; margin:0 auto; padding:48px 32px;}
  .rolunk p{font-size:17px; line-height:28px;}

  .k-sav.ketoszlop{grid-template-columns:1fr; gap:28px;}
  .k-sav.ketoszlop img{width:100%; height:auto;}
  .poziciok .racs{grid-template-columns:1fr;}
  .urlap-sav{grid-template-columns:1fr; gap:28px;}
  .urlap-sav img{width:100%; height:auto;}
  .k-hero{height:420px;}
  .k-hero h1{font-size:clamp(32px,7vw,80px);}
}

@media (max-width:760px){
  header{height:auto; flex-direction:column; gap:12px; padding:16px 20px;}
  header .logo img{width:176px; height:51px;}
  nav{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px;}
  nav a{margin-left:0; font-size:13px; line-height:1.6;}

  .szolg{padding:44px 0 56px;}
  .szolg .kartyak{grid-template-columns:1fr; max-width:360px; margin-top:38px;}
  .kartya .kep{height:180px;}

  .kapcsolat{padding:44px 0 56px;}
  .kapcsolat .oszlopok{grid-template-columns:1fr; gap:30px; margin-top:38px; padding:0 24px;}
  .kapcsolat p{font-size:16px; line-height:25px;}

  footer{height:auto; flex-direction:column; gap:12px; padding:20px 24px; text-align:center;}

  .urlap{max-width:100%;}
  .urlap .sor{grid-template-columns:1fr; gap:0;}
  .urlap .gomb{width:100%;}
  .k-sav{padding:48px 24px;}
  .urlap-sav{padding:48px 24px;}
  .poziciok .racs{padding:0 24px;}
  .pozicio{padding:24px 22px 28px;}
}

/* A legszukebb keszulekek: a vizszintes tulcsordulas SZERKEZETI tiltasa.
   Ez nem elfedi a hibat, csak a kep- es tablazat-szeru elemek tulnyulasat vagja le;
   a meres (`epites/reszponziv.py`) ettol fuggetlenul a scrollWidth-et nezi. */
@media (max-width:420px){
  .szakasz{padding-left:0; padding-right:0;}
  .szolg .kartyak{max-width:100%; padding:0 20px;}
  .pozicio ul{padding-left:18px;}
}

/* ===================================================================
   JOGI LAPOK (ASZF, adatkezelesi tajekoztato). Egyszeru, olvashato tipografia;
   a markajegyek (fejlec, lablec, betuk, sarga vonal) a kozos reszbol jonnek.
   =================================================================== */
.jogi{max-width:820px; margin:0 auto; padding:64px 32px 84px;}
.jogi h1{font-family:var(--cim-betu); color:var(--kek); font-size:clamp(26px,3.6vw,38px);
         font-weight:700; margin:0 0 10px; line-height:1.2;}
.jogi .vonal{width:116px; height:10px; background:var(--sarga); margin:0 0 26px;}
.jogi .kelt{color:var(--kartyacim); font-size:15px; margin:0 0 36px;}
.jogi h2{font-family:var(--cim-betu); color:var(--kek); font-size:21px; font-weight:700;
         margin:40px 0 12px; line-height:1.3;}
.jogi h3{font-family:var(--cim-betu); color:var(--kartyacim); font-size:17px; font-weight:700;
         margin:26px 0 8px;}
.jogi p, .jogi li{font-size:17px; line-height:28px;}
.jogi p{margin:0 0 14px;}
.jogi ul, .jogi ol{margin:0 0 16px; padding-left:24px;}
.jogi li{margin:0 0 7px;}
.jogi a{color:var(--kek);}
.jogi .adatlap{border-left:5px solid var(--sarga); padding:4px 0 4px 20px; margin:0 0 20px;}
.jogi .adatlap p{margin:0 0 6px; font-size:16px; line-height:26px;}
.jogi table{border-collapse:collapse; width:100%; margin:0 0 22px; font-size:15px;}
.jogi th, .jogi td{border:1px solid var(--szurke-k); padding:10px 12px; text-align:left;
                   vertical-align:top; line-height:23px;}
.jogi th{background:var(--halvany); font-family:var(--cim-betu); color:var(--kek);
         font-weight:700; font-size:14px;}
/* NYITOTT PONT: olyan adat, amit a Szolgaltatonak kell megadnia. Lathatoan jelolve,
   mert egy jogi dokumentumban a KITALALT adat rosszabb, mint a lathato hiany. */
.jogi .nyitott{background:#FFF6D6; border:1px dashed #C9A227; padding:12px 14px; margin:0 0 18px;
               font-size:15px; line-height:24px;}
.jogi .nyitott b{color:#7A5C00;}
.jogi-lablec-link{margin-left:14px;}
@media (max-width:760px){
  .jogi{padding:44px 22px 60px;}
  .jogi p, .jogi li{font-size:16px; line-height:26px;}
  .jogi table{font-size:14px;}
  .jogi th, .jogi td{padding:8px 9px;}
}

/* SZELES TABLAZAT SZUK NEZETEN: gorgetheto keret. MERVE 2026-10-08: a GDPR-lap
   otoszlopos tablaja 390 px-en 653 px-re tolta a lapot, 14 elem logott ki. A keret
   NEM rejt el tartalmat, csak a TABLAT teszi gorgethetove a LAP helyett. */
.jogi .tabla-keret{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 22px;}
.jogi .tabla-keret table{margin:0; min-width:560px;}

/* A FELTOLTES HELYEN allo adatkezelesi tajekoztatas. Kiemelt, mert a >>benyujtassal
   tudomasul veszi<< allitas csak akkor igaz, ha az informacio OTT van abban a pillanatban. */
.urlap .sugo.adatkezeles{
  background:var(--halvany); border-left:4px solid var(--sarga);
  padding:11px 13px; margin:10px 0 20px; color:var(--szoveg); line-height:22px;
}

/* ====================================================================
   SZOLGALTATAS-ALOLDALAK (2026-10-08)
   A vezeto grafika NEM foto, hanem arculati szinu rendszer-abra (inline SVG).
   Ok, MERVE: a negy szolgaltatas-foto 700 keppont szeles (hero-nak keves),
   es energiatarolasra egyaltalan nincs kepanyag.
   ==================================================================== */
.sz-hero{
  position:relative; min-height:420px; display:flex; align-items:center;
  background:linear-gradient(135deg,var(--kek) 0%,var(--kartyacim) 100%);
  color:var(--feher); overflow:hidden;
}
.sz-hero::after{                       /* halvany racs, hogy a sav ne legyen lapos */
  content:""; position:absolute; inset:0; opacity:.13; pointer-events:none;
  background-image:linear-gradient(var(--feher) 1px,transparent 1px),
                   linear-gradient(90deg,var(--feher) 1px,transparent 1px);
  background-size:68px 68px;
}
.sz-hero .belso{position:relative; z-index:1; width:var(--tartalom); max-width:100%;
                margin:0 auto; padding:72px 0;}
.sz-hero .morzsa{font-size:13px; letter-spacing:1.4px; text-transform:uppercase;
                 margin:0 0 18px; opacity:.72;}
.sz-hero .morzsa a{color:var(--feher); text-decoration:none;}
.sz-hero .morzsa a:hover{text-decoration:underline;}
.sz-hero h1{font-family:var(--cim-betu); font-size:62px; font-weight:400;
            margin:0; line-height:1.1; max-width:860px;}
.sz-hero .alcim{font-size:19px; line-height:1.62; margin:26px 0 0; max-width:720px;}
.sz-hero .sarga-vonal{width:88px; height:4px; background:var(--sarga); margin:30px 0 0;}

.sz-szakasz{padding:84px 0; background:var(--feher);}
.sz-szakasz.halvany{background:var(--halvany);}
.sz-szakasz .belso{width:var(--tartalom); max-width:100%; margin:0 auto;}
.sz-szakasz h2{font-family:var(--cim-betu); color:var(--kek); font-size:34px;
               font-weight:400; margin:0; letter-spacing:.6px;}
.sz-szakasz h2 + .vonal{width:62px; height:3px; background:var(--sarga); margin:16px 0 34px;}
.sz-szakasz .bevezeto{font-size:17px; line-height:1.75; color:var(--szoveg);
                      max-width:760px; margin:0 0 42px;}

/* rendszer-abra */
.abra{background:var(--feher); border:1px solid #E4E4E4; padding:30px 24px; margin:0 0 42px;}
.sz-szakasz.halvany .abra{background:var(--feher);}
.abra svg{width:100%; height:auto; display:block;}
.abra figcaption{font-size:13.5px; line-height:1.6; color:#6A6A6A; margin:22px 0 0;
                 padding-top:18px; border-top:1px solid #EDEDED;}

/* szamozott lepesek */
.lepesek{list-style:none; margin:0; padding:0; counter-reset:l;}
.lepesek li{position:relative; padding:0 0 26px 62px; counter-increment:l;}
.lepesek li::before{
  content:counter(l); position:absolute; left:0; top:-2px;
  width:40px; height:40px; border-radius:50%; background:var(--sarga);
  color:var(--kek); font-family:var(--cim-betu); font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.lepesek li:not(:last-child)::after{
  content:""; position:absolute; left:19.5px; top:44px; bottom:4px;
  width:1px; background:#DCDCDC;
}
.lepesek h3{font-family:var(--cim-betu); color:var(--kartyacim); font-size:18px;
            font-weight:700; margin:8px 0 7px;}
.lepesek p{font-size:15.5px; line-height:1.72; color:var(--szoveg); margin:0;}

/* elony-kartyak */
.elonyok{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.elonyok.ketto{grid-template-columns:repeat(2,1fr);}
.elony{background:var(--feher); padding:32px 28px; border-top:4px solid var(--sarga);}
.sz-szakasz:not(.halvany) .elony{background:var(--halvany); }
.elony h3{font-family:var(--cim-betu); color:var(--kek); font-size:17px; font-weight:700;
          margin:0 0 12px; line-height:1.35;}
.elony p{font-size:15px; line-height:1.72; color:var(--szoveg); margin:0;}

/* kinek jo */
.kinek{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:start;}
.kinek img{width:100%; height:auto; display:block;}
.kinek ul{list-style:none; margin:0; padding:0;}
.kinek li{position:relative; padding:0 0 20px 34px; font-size:16px; line-height:1.7;
          color:var(--szoveg);}
.kinek li::before{
  content:""; position:absolute; left:0; top:9px; width:11px; height:11px;
  background:var(--sarga); transform:rotate(45deg);
}
.kinek li b{color:var(--kek);}

/* hatokor-tablazat */
.hatokor{width:100%; border-collapse:collapse; font-size:15.5px;}
.hatokor th,.hatokor td{text-align:left; padding:16px 18px; border-bottom:1px solid #E2E2E2;
                        vertical-align:top; line-height:1.68; color:var(--szoveg);}
.hatokor th{font-family:var(--cim-betu); color:var(--kek); font-weight:700;
            white-space:nowrap; width:34%;}
.hatokor tr:last-child th,.hatokor tr:last-child td{border-bottom:0;}

/* zaro felhivas */
.sz-cta{background:var(--kek); color:var(--feher); padding:68px 0; text-align:center;}
.sz-cta h2{font-family:var(--cim-betu); font-size:32px; font-weight:400; margin:0 0 16px;}
.sz-cta p{font-size:17px; line-height:1.7; margin:0 auto; max-width:620px; opacity:.9;}
.sz-cta .gomb{margin-top:32px;}

/* tovabbi szolgaltatasok */
.tovabbi{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.tovabbi a{display:block; padding:24px 20px; background:var(--halvany);
           text-decoration:none; border-left:3px solid var(--sarga);
           font-family:var(--cim-betu); color:var(--kek); font-size:15px;
           font-weight:700; line-height:1.45; transition:background .18s;}
.tovabbi a:hover{background:#ECECEC;}

@media (max-width:1320px){
  .sz-hero .belso,.sz-szakasz .belso{width:auto; padding-left:34px; padding-right:34px;}
}
@media (max-width:1024px){
  .sz-hero h1{font-size:46px;}
  .sz-szakasz{padding:62px 0;}
  .elonyok,.elonyok.ketto{grid-template-columns:1fr 1fr;}
  .kinek{grid-template-columns:1fr; gap:34px;}
  .tovabbi{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .sz-hero{min-height:0;}
  .sz-hero .belso{padding:54px 22px;}
  .sz-hero h1{font-size:34px;}
  .sz-hero .alcim{font-size:16.5px;}
  .sz-szakasz .belso{padding-left:22px; padding-right:22px;}
  .sz-szakasz h2{font-size:26px;}
  .elonyok,.elonyok.ketto,.tovabbi{grid-template-columns:1fr;}
  .abra{padding:18px 14px;}
  .lepesek li{padding-left:52px;}
  .hatokor th{white-space:normal; width:40%;}
  .hatokor th,.hatokor td{padding:13px 10px; font-size:14.5px;}
}
.kinek.egy{grid-template-columns:1fr;}
.kinek.egy ul{columns:2; column-gap:54px;}
/* A HASABTORES TILTASA A TETELEN BELUL. Peti merte 2026-10-09: a harmadik tetel
   mondata az elso hasab aljan megszakadt, es a folytatasa a MASODIK hasab TETEJEN
   jelent meg, a kovetkezo felsorolas-jel FOLOTT arvan. A `columns` alapbol barhol
   torhet; a tetel-szintu tiltas az egyetlen szerkezeti javitas. */
.kinek.egy ul li{break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;}
@media (max-width:760px){ .kinek.egy ul{columns:1;} }
a.kartya{display:block; text-decoration:none; transition:box-shadow .18s, transform .18s;}
a.kartya:hover{box-shadow:0 4px 18px rgba(0,0,0,.14); transform:translateY(-2px);}
a.kartya h3{text-decoration:underline; text-decoration-color:var(--sarga);
            text-decoration-thickness:2px; text-underline-offset:3px;}
.abra.szeles{padding:26px 18px;}
.abra.szeles svg{max-width:100%;}

/* ====================================================================
   MOBIL-IGAZITAS az ELES lap telefonos nezetehez (2026-10-08 19:15)
   Peti videoja alapjan, kockankent visszamerve. Ot elteres volt:
   fejlec-magassag (141 kontra kb. 71), hamburger helyett kiirt menu,
   kozepre zart szakaszcim a BALRA ZART helyett, bepaddingelt kartya a
   TELJES SZELESSEGU helyett, es a hianyzo also kapcsolati sav.
   A DESKTOP geometria NEM valtozik: minden szabaly max-width alatt all.
   ==================================================================== */

/* --- beuszas: a hero kepe es cime --- */
@keyframes be-kep   { from{opacity:0; transform:scale(1.07);} to{opacity:1; transform:scale(1);} }
@keyframes be-cim   { from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }
@keyframes be-nyil  { from{opacity:0;} to{opacity:.85;} }

/* A `.hero` SZANDEKOSAN KIMARAD a `be-kep`-bol (merve 2026-10-10 00:50).
   A `be-kep` `scale(1.07)`-rol indul, es a `.hero` NEM fixed -- tehat a felnagyitott
   boxa VIZSZINTESEN szelesebbre tolta a lapot a beuszas 1500 ms-ara:
       1440 px nezeten  TUL = 49 px  (t=1 ms)  ->  0 px  (t=1800 ms)
        390 px nezeten  TUL = 28 px  (t=0 ms)  ->  0 px  (t=1800 ms)
   A VIDEO viszont `position:fixed` ES a `.hero` `clip-path:inset(0)`-ja vagja, tehat a
   nagyitasa NEM tolja a lapot. A latvany ugyanaz (a kep uszik be), a tulcsordulas nelkul.
   A `.k-hero img` ugyanezt az animaciot hasznalja, de ott a `.k-hero{overflow:hidden}` vag. */
.hero video{animation:be-kep 1500ms cubic-bezier(.22,.61,.36,1) both;}
.hero .cim h1{animation:be-cim 1100ms cubic-bezier(.22,.61,.36,1) 420ms both;}
.hero .nyil{animation:be-nyil 900ms ease-out 1100ms both;}
.k-hero img{animation:be-kep 1500ms cubic-bezier(.22,.61,.36,1) both;}
.k-hero h1{animation:be-cim 1100ms cubic-bezier(.22,.61,.36,1) 360ms both;}
.sz-hero h1{animation:be-cim 900ms cubic-bezier(.22,.61,.36,1) 120ms both;}
.sz-hero .alcim{animation:be-cim 900ms cubic-bezier(.22,.61,.36,1) 320ms both;}

@media (prefers-reduced-motion:reduce){
  .hero,.hero video,.hero .cim h1,.hero .nyil,
  .k-hero img,.k-hero h1,.sz-hero h1,.sz-hero .alcim{animation:none;}
}

/* --- hamburger gomb: asztali nezeten nincs --- */
.menu-gomb{
  display:none; background:none; border:0; padding:8px 4px; cursor:pointer;
  width:42px; height:36px; flex-direction:column; justify-content:center; gap:6px;
}
.menu-gomb span{
  display:block; height:3px; background:var(--feher); border-radius:2px;
  transform:skewX(-18deg); transition:width .22s, transform .22s, opacity .22s;
}
.menu-gomb span:nth-child(1){width:26px; margin-left:8px;}
.menu-gomb span:nth-child(2){width:34px;}
.menu-gomb span:nth-child(3){width:20px; margin-left:14px;}
.menu-gomb[aria-expanded="true"] span:nth-child(1){width:30px; margin-left:4px; transform:skewX(0) rotate(45deg) translate(5px,5px);}
.menu-gomb[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-gomb[aria-expanded="true"] span:nth-child(3){width:30px; margin-left:4px; transform:skewX(0) rotate(-45deg) translate(5px,-5px);}

/* --- also kapcsolati sav: CSAK telefonon --- */
.mobil-sav{display:none;}

@media (max-width:760px){
  /* a fejlec itt 72 px, tehat a horgony-eltolas is annyi. A `scroll-padding-top` a
     SCROLL-KONTENERRE hat, vagyis a `html`-re: a headeren NEMAN hatastalan lenne
     (a CSS parszol, a szabaly bent van, es semmit nem tesz). */
  html{scroll-padding-top:72px;}

  /* fejlec: EGY sor, kozepen a logo, jobbra a hamburger */
  header{
    height:72px; flex-direction:row; align-items:center; gap:0;
    padding:0 16px; justify-content:center;
    /* NEM `relative`: a fo szabaly `sticky`-jet ez a sor irta volna vissza, es a
       sticky CSAK telefonon esett volna ki -- nema, mert a desktop mukodik.
       A `.menu-gomb` absolute pozicionalasa valtozatlanul mukodik: a `sticky` is
       pozicionalt elem. */
  }
  header .logo img{width:150px; height:44px;}
  .menu-gomb{display:flex; position:absolute; right:14px; top:50%; transform:translateY(-50%);}

  /* a menu lenyilo panel lesz */
  header nav{
    position:absolute; left:0; right:0; top:72px; z-index:5;
    background:var(--fekete); flex-direction:column; align-items:stretch;
    gap:0; padding:0 22px; max-height:0; overflow:hidden;
    transition:max-height .28s ease, padding .28s ease;
  }
  header nav.nyitva{max-height:340px; padding:6px 22px 18px;}
  header nav a{
    margin:0; font-size:15px; line-height:1; padding:15px 2px;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  header nav a:last-child{border-bottom:0;}

  /* szakaszcim BALRA, a sarga vonal is balra */
  .szakasz-cim{text-align:left; padding:0 22px;}
  .szakasz-cim h2{text-align:left; font-size:27px;}
  .szakasz-cim .vonal{margin-left:0; margin-right:auto;}
  .rolunk h2{text-align:left;}

  /* a kartya-fotok TELJES SZELESSEGBEN, ahogy az eles lapon */
  .szolg .kartyak{max-width:100%; padding:0; gap:28px;}
  .kartya{background:var(--feher); box-shadow:none; min-height:0; padding-bottom:0;}
  .kartya .kep{width:100%; height:215px;}
  .kartya h3{margin:16px 22px 10px; font-size:19px; line-height:1.3;}
  .kartya p{margin:0 22px 14px; font-size:15px; line-height:1.6;}

  /* helyet hagyunk az also savnak, hogy ne takarja a lablecet */
  body{padding-bottom:62px;}
  .mobil-sav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    height:62px; background:var(--feher); border-top:1px solid #E4E4E4;
    align-items:center; justify-content:space-around;
    box-shadow:0 -2px 14px rgba(0,0,0,.07);
  }
  .mobil-sav a{
    display:flex; align-items:center; justify-content:center;
    width:54px; height:44px; text-decoration:none;
  }
  .mobil-sav svg{width:28px; height:28px; display:block;}
}


/* ---- REFERENCIA-RACS: a kartya META-sora (ev, helyszin, teljesitmeny) ----
   MIERT KULON SOR es nem a leirasban: a racsban a szem fuggolegesen pasztaz, es a
   meta-adat igy MINDEN kartyan ugyanabban a magassagban all. */
.elony .meta{
  font-family:var(--torzs-betu);
  font-size:12.5px; line-height:1.5; letter-spacing:.04em;
  text-transform:uppercase; color:var(--szurke-k);
  margin:-6px 0 12px;
}

/* A referencia-racs surubb, mint a szolgaltatas-lapok elony-racsa: tobb, rovidebb tetel. */
.sz-szakasz .elonyok{align-items:start;}
.elony .meta + p{margin-top:0;}

/* megbizoi logo-sav */
.logo-sav { list-style:none; margin:0; padding:0; display:grid;
            grid-template-columns:repeat(6,1fr); gap:18px; }
.logo-sav li { background:var(--feher); border:1px solid #E6E6E6; border-radius:2px;
               min-height:88px; padding:14px 16px;
               display:flex; align-items:center; justify-content:center; }
.logo-sav img { display:block; max-width:100%; max-height:46px; width:auto; height:auto;
                object-fit:contain; }
.logo-jegyzet { font-size:12.5px; line-height:1.7; color:var(--szurke-k); margin:34px 0 0; }
@media (max-width:980px) { .logo-sav { grid-template-columns:repeat(4,1fr); gap:16px; } }
@media (max-width:620px) { .logo-sav { grid-template-columns:repeat(3,1fr); gap:12px; }
                           .logo-sav li { min-height:70px; padding:10px 12px; }
                           .logo-sav img { max-height:36px; } }