/* ============================================================
   header.css — Közös fejléc-stílusok (SZIL-ADR Protect)
   A header.js párja: a fejléc stílusai (a markup a nyers HTML-ben él)
   itt élnek, így nem tudnak fájlonként szétcsúszni.

   Tartalmazza a .gker gradiens-keret osztályokat is — azokat a
   fejlécen kívül is használjuk (Szolgáltatások-panel, GYIK-lista,
   CTA-dobozok), ezért itt, egy közös helyen a legjobb nekik.

   FÜGG a közös tokenkészlettől (--paper, --ink, --petrol, --line,
   --radius, --fs-1 stb.) — azok a kozos.css :root blokkjában élnek,
   ezért a kozos.css-nek az oldal saját <style>-ja után kell töltenie.
   (Frissítve: 2026-08-23, thai — korábban „azok maradnak az oldalakon”.)
   (Frissítve: 2026-09-30, thai — a markup már nem JS-ből generált; a review-kori
   maradványok — .logo-zona, review.css-utalás — törölve.)
   ============================================================ */

/* ── Fejléc-váz ── */
/* Minden horgony-ugrás (fejléc-menü, footer-linkek, GYIK-hivatkozások) vegye figyelembe
   a sticky fejlécet, különben a cél a fejléc ALÁ csúszik. A JS ezt felülírja a fejléc
   tényleges magasságával — ez itt a JS nélküli, biztonságos alapérték. */
html{scroll-padding-top:94px;}
/* (2026-10-10, 38. kör) MINDIG SÖTÉT FEJLÉC — tulajdonosi döntés: a fejléc minden oldalon és minden
   szélességen a hero alapszínén (--ink) ül, így kiemelkedik az oldalból, és görgetéskor semmi nem fut
   át a logó mögött. A korábbi átlátszó „fejléc a hero-n” állapot (és a header.js heroFigyelo-ja)
   kivezetve. A sötét alapon minden fejléc-elem fehér; a lenyílók paneljei világosak maradnak. */
header{position:sticky;top:0;z-index:200;background:var(--ink);border-bottom:1px solid var(--ink);}
header .wrap{max-width:none;display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px;gap:16px;}

/* ── Logó ──
   A cégnév-szöveg helyére Szilárd színes, 3D-s logója került (2026-08-23).
   A magassága úgy van hangolva, hogy a fejléc 82px-es magassága ne változzon.
   (2026-10-10, 38. kör) A fejléc mindig sötét: a szóvédjegy a fehér változat
   (kepek/szoveg-feher.webp), a jel színes — csere és árnyék nem kell. */
.logo{display:flex;align-items:center;}
/* Magasság 58px + 12px padding = 82px fejléc — pontosan annyi, mint a
   korábbi 50+16. A fejléc magassága futásidőben mérve van (header.js:
   scroll-padding-top), a 94px-es tartalék így továbbra is helyes. (2026-08-24) */
.logo{gap:12px;}
.logo img{width:auto;display:block;}
/* a logó-link fókuszkerete currentColor — a sötét fejlécen fehér (2026-10-10) */
header .logo{color:#fff;}
.logo-jel{height:58px;}
/* A szóvédjegy a jel mellett: a cégnév eddig SEHOL nem szerepelt a hajtás
   fölött — a látogató csak egy lángot és egy hamburgert látott.
   Magasság: a jel 72%-a. Nem a jel teljes magassága, mert a szóvédjegy 5,11-es
   arányú — 58px-en 296px széles lenne, és eluralná a jelet. Így a kettő
   OPTIKAILAG egyenrangú. A -2px eltolás a domborítás alsó árnyékát
   kompenzálja, hogy a betűk közepe essen egybe a jel közepével. (2026-08-24) */
.logo-nev{height:42px;transform:translateY(-2px);}
/* 400px alatt a szóvédjegy kisebb: a fejlécben a márkajel mellé bekerült a
   kapcsolat-gomb is. Mérve 360px-en: 40+123+8+44+16+44 = 275px a 312px-es
   sávban (28px-es szóvédjeggyel 302px lett volna). (2026-09-14) */
/* (2026-10-10, 38. kör) SORREND: a ≤576-os szabály a kisebb töréspontok ELŐTT áll. Eddig utánuk
   jött, így a 24/20 px-es szóvédjegy sosem érvényesült (mérve 320 px-en: 7 px átfedés a hívógombbal). */
@media(max-width:576px){.logo-jel{height:40px;}.logo-nev{height:28px;transform:translateY(-1px);}.logo{gap:9px;}}
@media(max-width:400px){.logo-nev{height:24px;}}
@media(max-width:340px){.logo-nev{height:20px;}}

/* ── Asztali navigáció ── */
nav.main-nav{display:block;}
nav.main-nav.js-hide{display:none;}
nav.main-nav ul{display:flex;gap:10px;flex-wrap:wrap;row-gap:8px;align-items:center;}
/* Minden menüpont azonos magasságú és függőlegesen középre igazított, hogy a
   színes gombok és a sima szöveges linkek egy vonalban üljenek. */
nav.main-nav > ul > li{display:flex;align-items:center;}
nav.main-nav > ul > li > a{display:flex;align-items:center;min-height:38px;}
nav.main-nav a{font-weight:600;font-size:var(--fs-1);color:#fff;}
nav.main-nav a:hover{text-decoration:underline;text-underline-offset:4px;}

/* ── Lenyíló menük ── */
.nav-dropdown{position:relative;display:flex;align-items:center;gap:2px;border-radius:var(--radius);}
/* Nyitott/hover állapotban a gomb és a panel EGYBEFÜGGŐ dobozként jelenik meg —
   a gomb alsó, a panel felső sarka lekerekítés nélküli, hogy a varrat láthatatlan legyen.
   Negatív margóval kompenzálva, hogy a padding megjelenése ne tolja el a szomszéd nav-elemeket. */
/* Nyitott állapotban a gomb és a panel EGYETLEN folytonos keretes egység.
   Nincs kitöltött háttér — így a sötét fejlécen nem keletkezik
   „kivágott doboz” a menüpont körül. */
.nav-dropdown:hover,.nav-dropdown.open{position:relative;z-index:251;}
/* nyitott állapotban a konténer alsó sarka kiegyenesedik és az alsó szegély
   eltűnik, hogy a panelhez varrat nélkül csatlakozzon */
.nav-dropdown:hover,.nav-dropdown.open{border-bottom-left-radius:0;border-bottom-right-radius:0;
  border-bottom-color:transparent;}
/* (2026-09-30) min. 24×24 px — WCAG 2.2 2.5.8 (AUDIT: 17×26 volt). MÉRVE: az asztali
   menü küszöbe ettől 1220 → 1230 px; fejléc-magasság és kilógás változatlan. */
.nav-caret-btn{background:none;border:none;cursor:pointer;color:inherit;font-size:var(--fs-1);padding:4px;line-height:1;transition:transform .15s;min-width:24px;min-height:24px;}
.nav-dropdown-menu{position:absolute;top:calc(100% + 1.5px);left:-1.5px;right:auto;background:var(--surface);border:1.5px solid var(--line);border-top:none;border-radius:0 0 var(--radius) var(--radius);box-shadow:0 4px 16px rgba(0,0,0,.14);min-width:200px;padding:8px 0;margin:0;list-style:none;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility .15s;z-index:250;}
.nav-dropdown-menu--tudastar{min-width:280px;max-height:min(70vh,520px);overflow-y:auto;right:0;left:auto;}
.nav-dropdown-menu li{margin:4px 8px;border-radius:var(--radius);display:block;width:calc(100% - 16px);}
.nav-dropdown-menu li a{display:block;}
.nav-dropdown-menu li.gker{padding:2px;}
.nav-dropdown-menu li.gker a{border-radius:var(--radius);background:#fff;}
.nav-dropdown-menu a{display:block;padding:10px 18px;color:var(--ink)!important;font-weight:600;font-size:var(--fs-1);text-decoration:none;white-space:nowrap;}
.nav-dropdown-menu a:hover{background:var(--paper-alt);}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown-menu.open{opacity:1;visibility:visible;transform:translateY(0);}
.nav-dropdown:hover .nav-caret-btn,.nav-caret-btn[aria-expanded="true"]{transform:rotate(180deg);}

/* ── Webshop-gomb ── */
/* A két lenyíló menüpont: piros test, dupla vastag sárga (bal) és narancs (jobb)
   oldalcsíkkal. A csíkok 12px-esek, a piros térköz 7px — így a gomb nem szélesebb,
   mint egy sima menüpont, a felirat mégis tisztán olvasható (fehér piroson 5.90:1). */
/* A két lenyíló menüpont: vékony, áttetsző keret — jelöl, de nem versenyez a
   két cselekvés-gombbal (Webshop, Hívjon most). A ▾ nyíl fehér: a fejléc mindig
   sötét (2026-10-10, 38. kör); a keret 42%-os fehér = 4,1:1 a sötét alapon. */
/* A keret a KONTÉNERRE kerül, hogy a ▾ nyilat is befogja — így a gomb és a
   nyíl egyetlen, zárt egységként olvasható. */
nav.main-nav .nav-dropdown{border:1.5px solid rgba(255,255,255,.42);border-radius:var(--radius);
  padding:0 9px 0 4px;min-height:38px;}
nav.main-nav .nav-dropdown > a{background:transparent;border:none;
  padding:0 6px 0 9px;font-weight:600;min-height:36px;color:#fff!important;}
.nav-caret-btn{color:#fff;font-weight:600;}
.nav-webshop-btn{background:var(--gold)!important;color:#fff!important;padding:0 18px;min-height:38px;border-radius:100px;font-weight:600!important;}
.nav-webshop-btn:hover{background:var(--gold-dark)!important;}

/* ── Telefon-gomb ── */
.header-phone{display:flex;align-items:center;font-weight:600;background:#2E7D32;color:#fff!important;white-space:nowrap;padding:0 20px;min-height:38px;border-radius:100px;}
.header-phone.js-hide{display:none;}
.header-phone:hover{background:#256B29;}

/* ── Hamburger ── */
.hamburger{width:44px;height:44px;flex:0 0 auto;color:#fff;border:1.5px solid rgba(255,255,255,.4);border-radius:var(--radius);background:transparent;cursor:pointer;display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.hamburger.js-show{display:flex;}
.hamburger span{display:block;width:20px;height:2px;background:#fff;}

/* ── Mobil menü ── */
/* ══ Mobilmenü — teljes képernyős modális panel (2026-09-14) ══
   Azonos váz a kapcsolat-panellel: fejléc + görgethető törzs + alsó fogantyú.
   Szín CSAK a három szakterület-kártyán (20/9: egyszer elmagyarázzuk, utána
   utalunk rá); minden más semleges fekete-fehér. */
#mobile-nav{display:none;position:fixed;inset:0;z-index:400;background:var(--paper);
  flex-direction:column;transition:transform .25s ease;}
#mobile-nav.open{display:flex;}
.mnav-fejlec{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);}
.mnav-cim{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:var(--fs-3);color:var(--ink);}
.mnav-bezar{width:44px;height:44px;flex:0 0 auto;border:1.5px solid var(--line);
  border-radius:var(--radius);background:var(--paper);color:var(--ink);font-size:1.7rem;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.mnav-torzs{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 20px 8px;}

/* Csoportcím — a 20/6 .demo-section-title mintája. */
/* A csoport tartalma 16px-rel beljebb kezdődik, és egy 1px-es hajszál fut
   mellette — ettől ránézésre látszik, mi tartozik melyik csoporthoz.
   Szín: var(--line), tehát nem színezünk semmit (20/9). (2026-09-15) */
.mnav-csoport-tartalom{padding-left:16px;border-left:1px solid var(--line);margin-bottom:4px;}
.mnav-hub a{font-weight:600;}
.mnav-csoportcim{margin:22px 0 10px;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-2);color:var(--ink);
  border-bottom:2px solid var(--line);padding-bottom:6px;}
.mnav-torzs>.mnav-csoportcim:first-child{margin-top:0;}

/* Szakterület-kártyák: a --sav minta (20/6) — geometria itt, szín egy változóban. */
.mnav-kartyak{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.mnav-kartya>a,.mnav-kartya>.nav-itt-vagy{position:relative;display:flex;align-items:center;gap:14px;
  padding:14px 16px 14px 22px;border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);text-decoration:none;font-weight:600;
  font-size:var(--fs-2);min-height:64px;}
.mnav-kartya>a::before,.mnav-kartya>.nav-itt-vagy::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:7px;background:var(--sav-szin);border-radius:var(--radius) 0 0 var(--radius);}
.mnav-kartya--tuz{--sav-szin:var(--tuz);}
.mnav-kartya--munka{--sav-szin:var(--munka);}
.mnav-kartya--adr{--sav-szin:var(--adr);}
/* stroke:currentColor KELL: a tűz- és az ADR-ikon SVG-jéből hiányzik a
   stroke attribútum (csak a munkavédelemében van), fill="none" mellett pedig
   enélkül láthatatlan vonalrajz. Az indexen ez nem tűnt fel. (2026-09-15) */
.mnav-ikon{width:30px;height:30px;flex:0 0 auto;stroke:currentColor;}
.mnav-kartya-nev{flex:1 1 auto;min-width:0;}
.mnav-nyil{flex:0 0 auto;font-weight:700;}

/* „Melyik kell nekem?" — a kártyák alatt, keretes választó. */
.mnav-valaszto,.mnav-csoport-tartalom>.nav-itt-vagy{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--radius);
  color:var(--ink);text-decoration:none;font-weight:600;font-size:var(--fs-1);min-height:52px;}

/* „A főoldalon" — horgonyok, jelöletlenül; a csoportcím mondja ki, hova visznek. */
.mnav-lista{list-style:none;margin:0;padding:0;}
/* A sorok NEM Oswald nagybetűsek: úgy összekeverhetők voltak a csoportcímmel.
   IBM Plex Sans, normál írásmód — a cím marad a hierarchia teteje. (2026-09-15) */
.mnav-lista a,.mnav-lista .nav-itt-vagy{display:block;padding:13px 0;font-weight:600;
  font-size:var(--fs-2);font-family:var(--font-body);text-transform:none;
  letter-spacing:0;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line);}
.mnav-lista li:last-child a{border-bottom:none;}

/* Lábléc: egyetlen elsődleges cselekvés + másodlagos, keretes webshop. */
.mnav-lablec{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;
  padding:14px 20px 0;border-top:1px solid var(--line);}
/* (2026-09-20) Görgetés-affordancia: fade a menü alján — jelzi, hogy van még
   tartalom; a lista legalján (JS: .mnav-alul) eltűnik. Szín tokenből (20/1). */
.mnav-lablec{position:relative;}
.mnav-lablec::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:36px;
  background:linear-gradient(to bottom, transparent, var(--paper));pointer-events:none;
  opacity:1;transition:opacity .2s;}
#mobile-nav.mnav-alul .mnav-lablec::before{opacity:0;}
/* A két másodlagos gomb egy sorban. Az „Írjon nekünk" semleges keretes — a zöld
   a hívásé marad (20/9: a szín cselekvést kódol, nem díszít). */
/* flex-wrap: 320px alatt magától két sorba tördel, Kapcsolat elöl (DOM-sorrend).
   Mérve: a két gomb 280px, a sáv 320px-es képernyőn 280px — pont a határon. */
.mnav-lablec-sor{display:flex;flex-wrap:wrap;gap:10px;}
.mnav-lablec-sor>*{flex:1 1 140px;}
/* Zöld, teli: ez a menü egyetlen cselekvése, és PONTOSAN ugyanazt csinálja,
   mint a fejléc zöld telefon-gombja — azonos művelet, azonos szín (20/9).
   A „Hívás most" gomb megszűnt: a hívás a panelből megy, egy koppintással
   több, cserébe a lábléc 190px-ről 98px-re fogyott. (2026-09-15) */
.mnav-kapcsolat{display:flex;align-items:center;justify-content:center;min-height:52px;
  border:none;border-radius:var(--radius);background:#2E7D32;
  color:#FFFFFF;font-family:inherit;font-weight:600;font-size:var(--fs-1);cursor:pointer;}
.mnav-kapcsolat:focus-visible{outline:3px solid var(--link);outline-offset:2px;}
.mnav-webshop{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:50px;border:1.5px solid var(--gold);border-radius:var(--radius);
  color:var(--gold);text-decoration:none;font-weight:600;font-size:var(--fs-1);}
/* Fogantyú a rendszer-minták szerint (Apple 36×5pt, Material 32×4dp): 40×4px
   egy 34px-es sávban. A 44px-es érintőcél a FEJLÉC X-gombja — ez másodlagos
   affordancia, a fő művelete a húzás, nem a koppintás. (2026-09-15) */
.mnav-fogantyu{flex:0 0 auto;width:100%;height:34px;border:none;background:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:center;padding-top:10px;touch-action:none;}
.mnav-fogantyu span{display:block;width:40px;height:4px;border-radius:100px;background:var(--line);}
.mnav-bezar:focus-visible,.mnav-kapcsolat:focus-visible,.mnav-fogantyu:focus-visible span{
  outline:3px solid var(--link);outline-offset:2px;}
.mobile-subnav a{padding-left:36px!important;font-size:1em;color:var(--ink)!important;font-weight:600!important;}
.mobile-subnav.gker{margin:6px 16px;border-radius:10px;padding:2px;}
.mobile-subnav.gker a{border-radius:var(--radius);background:#fff;padding-left:34px!important;}

/* ── Gradiens-sarok keret (Szilárd-színek) ──
   A fejlécen kívül is használt: Szolgáltatások-panel, GYIK-lista, CTA-dobozok. */
.gker{position:relative;}
.gker::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:2.5px;pointer-events:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.gker--tuz{border-color:transparent!important;}
.gker--tuz::after{background:linear-gradient(135deg,var(--tuz) 0%,var(--tuz) 15%,rgba(196,30,36,.15) 55%,rgba(196,30,36,0) 90%);}
.gker--munka{border-color:transparent!important;}
.gker--munka::after{background:linear-gradient(135deg,#D9A400 0%,#D9A400 15%,rgba(217,164,0,.15) 55%,rgba(217,164,0,0) 90%);}
.gker--adr{border-color:transparent!important;}
.gker--adr::after{background:linear-gradient(135deg,var(--adr) 0%,var(--adr) 15%,rgba(232,96,12,.15) 55%,rgba(232,96,12,0) 90%);}
.gker--semleges{border-color:transparent!important;}
.gker--semleges::after{background:linear-gradient(135deg,var(--ink) 0%,var(--ink) 15%,rgba(20,20,20,.15) 55%,rgba(20,20,20,0) 90%);}

/* ── Hover-kiemelés: a teljes keret megtelik színnel és vastagszik ──
   Csak KATTINTHATÓ elemeken. A ::after position:absolute, ezért a
   vastagítás NEM tolja el a tartalmat — nincs "ugrás" hover-kor. */
.nav-dropdown-menu li.gker:hover::after,
a.tudastar-card.gker:hover::after{padding:4px;}
.nav-dropdown-menu li.gker--tuz:hover::after,
a.tudastar-card.gker--tuz:hover::after{background:var(--tuz);}
.nav-dropdown-menu li.gker--munka:hover::after,
a.tudastar-card.gker--munka:hover::after{background:#D9A400;}
.nav-dropdown-menu li.gker--adr:hover::after,
a.tudastar-card.gker--adr:hover::after{background:var(--adr);}
.nav-dropdown-menu li.gker--semleges:hover::after,
a.tudastar-card.gker--semleges:hover::after{background:var(--ink);}

/* ── "Itt vagy" jelölés: teli keret az aktuális oldal menüpontján ──
   Csak aloldalakon/cikkeken jelenik meg (a főoldalon nincs). A keret KÍVÜLRE nyúlik
   (inset:-4px -10px), így a nav-elem mérete változatlan marad — nem tolja el a
   szomszédokat és nem töri két sorba a navigációt. */
.nav-dropdown.nav-aktiv{position:relative;}
.nav-dropdown.nav-aktiv::before{
  content:"";position:absolute;inset:-4px -5px;border-radius:var(--radius);
  padding:3px;pointer-events:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* (2026-10-10, 38. kör) A fejléc mindig sötét: a keret a sötét-alapú színváltozatot kapja
   (tűz 4,97 · munka 11,86 · ADR 5,36 : 1 a #141414-en), a semleges fehér (18,42:1) —
   a korábbi --ink keret a sötét fejlécen láthatatlan lett volna (1:1). */
.nav-dropdown.nav-aktiv--tuz::before{background:var(--tuz-dark-bg);}
.nav-dropdown.nav-aktiv--munka::before{background:var(--munka-dark-bg);}
.nav-dropdown.nav-aktiv--adr::before{background:var(--adr-dark-bg);}
.nav-dropdown.nav-aktiv--semleges::before{background:#fff;}

/* ── "Itt vagy" a lenyílón belül: teli háttér a kategória színével ──
   A teli szín ugyanazt jelenti, mint a Szolgáltatások-füleknél: ez az aktuális.
   A gradiens-keretet elrejtjük, hogy ne legyen dupla jelzés. */
.nav-dropdown-menu li .nav-itt-vagy{display:block;padding:10px 18px;border-radius:100px;
  font-weight:700;font-size:var(--fs-1);white-space:nowrap;cursor:default;}
.nav-dropdown-menu li.gker:has(.nav-itt-vagy)::after{display:none;}
.nav-dropdown-menu li.gker--tuz .nav-itt-vagy{background:var(--tuz);color:#FFFFFF;}
.nav-dropdown-menu li.gker--munka .nav-itt-vagy{background:var(--munka);color:#141414;}
.nav-dropdown-menu li.gker--adr .nav-itt-vagy{background:var(--adr);color:#141414;}
.nav-dropdown-menu li.gker--semleges .nav-itt-vagy{background:var(--ink);color:#FFFFFF;}
.mobile-subnav .nav-itt-vagy{display:block;font-weight:700;cursor:default;border-radius:100px;padding:12px 34px!important;}
.mobile-subnav.gker:has(.nav-itt-vagy)::after{display:none;}
.mobile-subnav.gker--tuz .nav-itt-vagy{background:var(--tuz);color:#FFFFFF;}
.mobile-subnav.gker--munka .nav-itt-vagy{background:var(--munka);color:#141414;}
.mobile-subnav.gker--adr .nav-itt-vagy{background:var(--adr);color:#141414;}
.mobile-subnav.gker--semleges .nav-itt-vagy{background:var(--ink);color:#FFFFFF;}
/* ══ „Itt vagy” — egységes TELI kiemelés a mobilmenü minden jelölési helyén (2026-09-30) ══
   Eddig csak a cikk-lista (fent) kapott pirulát; a szakterület-kártyán, a választón, a Tudástár-
   hubon és a Pályázatok-tételen csak egy apró „▸” jelölt (tulajdonosi észrevétel, XAMPP-teszt).
   A kártya a saját sávszínével telik ki; a semleges helyek sötét alapot kapnak.
   Kontraszt: tűz/fehér 5,9 · munka/#141414 12,9 · ADR/#141414 5,4 · #141414/fehér 18,4 :1. */
.mnav-kartya>.nav-itt-vagy{background:var(--sav-szin);border-color:var(--sav-szin);cursor:default;}
.mnav-kartya--tuz>.nav-itt-vagy{color:#FFFFFF;}
.mnav-kartya--munka>.nav-itt-vagy,.mnav-kartya--adr>.nav-itt-vagy{color:#141414;}
.mnav-csoport-tartalom>.nav-itt-vagy{background:var(--ink);border-color:var(--ink);color:#FFFFFF;cursor:default;}
.mnav-hub .nav-itt-vagy,.mnav-lista .nav-itt-vagy{display:block;background:var(--ink);color:#FFFFFF;
  font-weight:700;border-radius:100px;padding:12px 18px;border-bottom:none;cursor:default;}

/* ══ Mobil Tudástár-almenü (2026-09-20: MINDIG NYITVA — a lenyíló caret és a
   rejtő attribútum kivezetve tulajdonosi döntésre; a görgethetőséget a lábléc
   fölötti fade jelzi). ══ */
#mobile-nav .mnav-almenu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
#mobile-nav .mnav-almenu a{display:block;padding:12px 0;font-weight:600;color:var(--ink);text-decoration:none;}

/* ══ Kapcsolat-panel a hamburger mellett (2026-09-14) ══
   Öt sor, mind a kapcsolat-szekció MEGLÉVŐ gombjaiból — új hex nincs (20/1).
   Kontraszt fehér szöveggel: 5,13 · 5,74 · 4,70 · 18,42 · 10,86 : 1. */
/* margin-left:auto — a header .wrap space-between-je különben szétdobná a
   logó és a hamburger közé; így a két gomb együtt ül a jobb szélen.
   (2026-10-10, 38. kör) A hívógomb és a hamburger közti rés a felére (tulajdonosi kérés):
   16 px gap + 10 px margó = 26 px → 16 − 3 = 13 px. */
.fej-kapcsolat{display:none;width:44px;height:44px;flex:0 0 auto;margin:0 -3px 0 auto;
  border:1.5px solid transparent;border-radius:var(--radius);background:#2E7D32;
  cursor:pointer;padding:0;align-items:center;justify-content:center;}
.fej-kapcsolat.js-show{display:inline-flex;}
.fej-kapcsolat svg{width:22px;height:22px;fill:#FFFFFF;}
.fej-kapcsolat[aria-expanded="true"]{background:#256B29;}
.fej-kapcsolat:focus-visible{outline:3px solid var(--link-dark-bg);outline-offset:2px;}
/* (2026-10-12, 51. kör) CSS-ALAPÚ MOBIL FEJLÉC — a JS csak finomít. A menü elférését a header.js méri
   (fits), de a deferrel töltött szkript az első festés UTÁN fut: addig, és JS nélkül mindig, keskeny
   képernyőn a teljes asztali menü látszott, sorokba törve (mérve 375 px-en: 247 px-es fejléc a JS-es
   69 helyett; lassú hálózaton a főoldal CLS-e 0,176). Ezért 1210 px-ig a CSS eleve a mobil elrendezést
   adja (hamburger + hívógomb). A határ mérve: a JS az asztali menüt alap betűvel 1211 px-től, nagy
   betűvel 1344 px-től mutatja, minden lapon — 1210 alatt sosem, így a két döntés nem ütközik.
   Amint a header.js lefut, a html.nav-js osztállyal ez a blokk hatástalan, és a js-hide/js-show
   osztályok döntenek, mint eddig (JS-sel pixelre azonos). JS nélkül a hamburger nem nyit — eddig
   sem nyitott; a lap tartalmi linkjei és a lábléc elérhetők. */
@media(max-width:1210px){
  html:not(.nav-js) nav.main-nav,html:not(.nav-js) .header-phone{display:none;}
  html:not(.nav-js) .hamburger{display:flex;}
  html:not(.nav-js) .fej-kapcsolat{display:inline-flex;}
}

/* Teljes képernyős, modális panel (21/1: role=dialog, aria-modal, fókusz-csapda,
   fókusz-visszaadás, Esc, háttérgörgés-zár — mind a header.js-ben). */
#kapcsolat-panel{display:none;position:fixed;inset:0;z-index:500;background:var(--paper);
  flex-direction:column;transition:transform .25s ease;}
#kapcsolat-panel.open{display:flex;}
.kp-fejlec{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);}
.kp-cim{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:var(--fs-3);color:var(--ink);}
.kp-bezar{width:44px;height:44px;flex:0 0 auto;border:1.5px solid var(--line);
  border-radius:var(--radius);background:var(--paper);color:var(--ink);
  font-size:1.7rem;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center;}
.kp-bezar:focus-visible{outline:3px solid var(--link);outline-offset:2px;}
#kapcsolat-panel ul{flex:1 1 auto;list-style:none;margin:0;overflow-y:auto;
  display:flex;flex-direction:column;justify-content:center;
  padding:20px 24px;gap:12px;}
/* Alsó „redőny": felhúzásra zár (25%-os küszöb, visszapattanás — a
   kepnezegeto.js bevált mintája), koppintásra szintén. */
.kp-fogantyu{flex:0 0 auto;width:100%;height:34px;border:none;background:none;
  cursor:pointer;display:flex;align-items:flex-start;justify-content:center;
  padding-top:10px;touch-action:none;}
.kp-fogantyu span{display:block;width:40px;height:4px;border-radius:100px;background:var(--line);}
.kp-fogantyu:focus-visible span{background:var(--link);}
.kp-sor{display:flex;flex-direction:column;width:100%;padding:14px 20px;
  border:none;border-radius:var(--radius);cursor:pointer;text-align:left;
  font-family:inherit;font-size:var(--fs-1);font-weight:600;color:#FFFFFF;
  text-decoration:none;}
.kp-mell{font-weight:700;margin-top:2px;}
.kp-sor--hivas{background:#2E7D32;}
.kp-sor--sms{background:var(--gold);}
.kp-sor--wa{background:#178540;}
/* ID-s szelektor KELL: a kozos.css .email-inline-masol{background:none;padding:0;
   text-decoration:underline} azonos specificitású, de KÉSŐBB tölt — enélkül a sor
   aláhúzott sima linknek látszik, keret nélkül. (2026-09-14) */
#kapcsolat-panel .kp-sor--masol{background:var(--petrol);color:#FFFFFF;padding:14px 20px;
  border-radius:var(--radius);text-decoration:none;font:inherit;font-weight:600;}
.kp-sor--urlap{background:var(--gold-dark);}
.kp-sor:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}

/* A sorok apró lépcsőben tűnnek fel — ez adja az „összeáll" érzetet. */
#kapcsolat-panel.open .kp-sor{animation:kp-be .28s ease-out backwards;}
#kapcsolat-panel.open li:nth-child(2) .kp-sor{animation-delay:.05s;}
#kapcsolat-panel.open li:nth-child(3) .kp-sor{animation-delay:.10s;}
#kapcsolat-panel.open li:nth-child(4) .kp-sor{animation-delay:.15s;}
#kapcsolat-panel.open li:nth-child(5) .kp-sor{animation-delay:.20s;}
@keyframes kp-be{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){
  #kapcsolat-panel.open .kp-sor{animation:none;}
  #kapcsolat-panel,#mobile-nav{transition:none;}
  }

/* ── Olvasási folyamatjelző ──
   (2026-10-10, 38. kör) HÁROMSZÍNŰ: a sötét fejlécen a korábbi grafit csík nem látszana. A sáv a három
   szakterület színe (a sötét-alapú változatok, mint a hero-aláhúzás); görgetésre BALRÓL tárul fel: egy
   grafit fedő (span) húzódik vissza a jobb szélhez — scaleX(1 − arány), a header.js számolja. Így a
   színek helye rögzített (tűz → munka → ADR), nem nyúlnak a csíkkal. 1100px felett elrejtve. */
/* (2026-10-11, 45. kör) 3 → 6 px: telefonon túl vékony volt (tulajdonosi észrevétel; a Material Design vízszintes
   folyamatjelzője 4 px). Az alja a fejléc külső aljához igazodik, a tartalomra nem lóg rá. */
.olvaso-csik{position:absolute;left:0;right:0;bottom:-1px;height:6px;
  background:linear-gradient(90deg,var(--tuz-dark-bg) 0 33.3%,var(--munka-dark-bg) 33.3% 66.6%,var(--adr-dark-bg) 66.6% 100%);}
.olvaso-csik>span{display:block;height:100%;background:#3E3E3E;
  transform:scaleX(1);transform-origin:100% 50%;will-change:transform;}
@media(min-width:1100px){.olvaso-csik{display:none;}}