/* Belső szolgáltatásoldalak. A design-tokeneket és a közös elemeket
   (section-heading, seo-copy, process-section, faq-accordion) az oldal.css
   adja; itt csak a belső oldali szerkezet szerepel. Új színérték nincs. */

/* A belső oldal hero-ja sötét fotó, ezért a fejléc nem lebeghet fölötte: a
   grafit menüszöveg és a sötét logóváltozat olvashatatlan lenne rajta. Ugyanaz
   a fejléckomponens marad, csak saját, világos sávot kap. */
.site-header { position: relative; background: #fff; }

@media (min-width: 1200px) {
  /* A sarok-hívógomb a főoldalon a hero fotóra ül, mert ott az egész fejléc a
     kép fölött lebeg. Belső oldalon a fejléc saját fehér sávot kap, ezért a
     blokk beleolvadna — így itt szándékosan túlnyúlik a sávon, és a hero felső
     élére lóg. A tartalom felülre igazítva a menüvel egy vonalban marad. */
  /* Az árnyék a burkolóra kerül: a gombra tett filtert a saját clip-path-ja
     levágná. Két réteg — szoros él és lágy vetés —, hogy a fotóra lógó rész
     alul és a ferde élnél is elváljon. */
  .corner-call { min-height: 116px; align-items: flex-start; }
  .corner-call-hely { filter: drop-shadow(0 2px 3px #0003) drop-shadow(0 12px 18px #0006); }
}

/* A morzsamenü nem kap külön sávot: a hero felső élén ül, abszolút elhelyezéssel,
   ezért a hero tartalma nem tolódik el és betöltéskor sem ugrik. A 12px a
   konténer belső margója, így a morzsa a szövegoszloppal egy vonalban kezdődik.
   1200px alatt teljesen rejtett, mert ott a hely a tartalomé. */
.morzsa { display: none; }
.morzsa ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: 13px; }
.morzsa li { display: flex; align-items: center; gap: 8px; color: #d5d8da; }
.morzsa li + li::before { content: ""; width: 5px; height: 5px; border-top: 1.5px solid #d5d8da; border-right: 1.5px solid #d5d8da; transform: rotate(45deg); }
.morzsa a:hover { text-decoration: underline; }
.morzsa [aria-current="page"] { color: #fff; font-weight: 800; }

@media (min-width: 1200px) {
  .belso-hero .morzsa { display: block; position: absolute; left: 12px; right: 12px; top: 26px; }
}

.belso-hero { position: relative; overflow: hidden; background: var(--black); }
.belso-hero-photo { position: absolute; inset: 0; }
.belso-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
/* A szöveg fotón ül, ezért a fedőréteg a token-fekete átlátszó változata: a
   copy alatt gyakorlatilag tömör, így a kontraszt a képtartalomtól független. */
.belso-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--black) 0 30%, #111315f2 44%, #11131599 62%, #11131500 84%); }
.belso-hero-inner { position: relative; z-index: 2; padding-block: clamp(72px, 8vw, 112px); }
.belso-hero-copy { color: #fff; }
.belso-hero-copy .overline { color: #fff; }
.belso-hero-copy h1 { max-width: 12em; margin: 0 0 22px; font-size: clamp(38px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -.03em; font-weight: 850; }
.belso-hero-copy > p { max-width: 40em; margin: 0 0 30px; color: #d5d8da; font-size: 17px; line-height: 1.72; }
.belso-hero-gombok { display: flex; flex-wrap: wrap; gap: 16px; }
.belso-hero-bizalom { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 26px; }
.belso-hero-bizalom li { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; }
.belso-hero-bizalom svg { width: 21px; height: 21px; color: var(--yellow); flex: 0 0 auto; }

.szekcio { padding-block: var(--section-space); background: #fff; }
/* A szervizbejelentés két szekciója szorosan egymáshoz zár: a kiegészítő kártya
   a bevezető szöveg mellett áll, a bejelentő űrlap pedig közvetlenül alatta
   kezdődik. A szabályoknak a .szekcio alapértéke UTÁN kell állniuk, különben az
   nyer — ez a fájl az oldal.css után töltődik. */
.szekcio-szb-fejlec { padding-bottom: clamp(26px, 3vw, 38px); }
.szekcio-szb-urlap { padding-top: 0; }
.szekcio-hibak,
.szekcio-markak,
.szekcio-karb-tartalom,
.szekcio-karb-meres,
.szekcio-karb-koltseg,
.szekcio-csere-dontes,
.szekcio-csere-folyamat,
.szekcio-csere-valasztas,
.szekcio-csere-koltseg,
.szekcio-gsz-gazszag,
.szekcio-gsz-menet,
.szekcio-gsz-valasztas,
.szekcio-gsz-koltseg,
.szekcio-fut-munkak,
.szekcio-fut-menet,
.szekcio-fut-csohalozat,
.szekcio-fut-atadas,
.szekcio-fut-kapcsolodo,
.szekcio-konv-tunetek,
.szekcio-konv-orlang,
.szekcio-konv-feg,
.szekcio-konv-folyamat,
.szekcio-feg-keszulekek,
.szekcio-feg-hibak,
.szekcio-feg-orlang,
.szekcio-feg-dontes,
.szekcio-feg-megrendeles,
.szekcio-ari-marka,
.szekcio-ari-hibakodok,
.szekcio-ari-keszulekek,
.szekcio-ari-folyamat,
.szekcio-ari-miert,
.szekcio-baxi-marka,
.szekcio-baxi-hibakodok,
.szekcio-baxi-keszulekek,
.szekcio-baxi-folyamat,
.szekcio-baxi-miert,
.szekcio-sd-marka,
.szekcio-sd-hibakodok,
.szekcio-sd-keszulekek,
.szekcio-sd-folyamat,
.szekcio-sd-miert,
.szekcio-img-marka,
.szekcio-img-hibakodok,
.szekcio-img-keszulekek,
.szekcio-img-folyamat,
.szekcio-img-miert,
.szekcio-jk-marka,
.szekcio-jk-hibakodok,
.szekcio-jk-keszulekek,
.szekcio-jk-folyamat,
.szekcio-jk-miert,
.szekcio-vl-marka,
.szekcio-vl-hibakodok,
.szekcio-vl-keszulekek,
.szekcio-vl-folyamat,
.szekcio-vl-miert,
.szekcio-hk-kereso,
.szekcio-hk-nincs-talalat,
.szekcio-kapcsolat-modok,
.szekcio-kapcsolat-folyamat,
.szekcio-kapcsolat-urlap,
.szekcio-szb-fejlec,
.szekcio-szb-urlap,
.szekcio-gyik { background: #f5f5f4; }

/* Belső hivatkozások a szekció végén, folyó szöveg után. A még nem élő cél a
   belso_link() jóvoltából nem fókuszálható szövegként jelenik meg, ezért a
   felsorolás akkor is olvasható marad, ha a céloldal még nem készült el. */
.tovabbi-olvasnivalo { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.tovabbi-olvasnivalo li { position: relative; padding-left: 26px; font-size: 15px; font-weight: 700; line-height: 1.5; }
.tovabbi-olvasnivalo li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 2px; background: var(--yellow); }
.tovabbi-olvasnivalo a { color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
.tovabbi-olvasnivalo a:hover { color: #111315; }
.tovabbi-olvasnivalo span[aria-disabled="true"] { color: var(--muted); }

/* Kiemelt figyelmeztető kártya. A .biztonsag doboz konvencióját követi (bal
   oldali sárga hangsúlycsík), de sötét felületen, hogy a világos szekcióban
   elváljon a folyó szövegtől. */
.info-kartya { position: relative; padding: clamp(24px, 2.6vw, 30px) clamp(24px, 2.6vw, 30px) clamp(24px, 2.6vw, 30px) clamp(26px, 2.8vw, 32px); border-left: 6px solid var(--yellow); border-radius: 0 9px 9px 0; background: linear-gradient(135deg, var(--graphite), var(--black)); box-shadow: 0 10px 26px #00000024; }
.info-kartya > svg { width: 28px; height: 28px; margin-bottom: 13px; color: var(--yellow); }
.info-kartya p { margin: 0; color: #d5d8da; font-size: 15px; line-height: 1.7; }
.info-kartya strong { color: #fff; font-weight: 800; }

/* Vészhelyzeti változat: ugyanaz a kártya önálló szekcióként, saját címsorral.
   A hangsúlyt a vastagabb sárga él és a nagyobb ikon adja, animáció nélkül. */
.gazszag-doboz { border-left-width: 10px; }
.gazszag-doboz > svg { width: 40px; height: 40px; margin-bottom: 15px; stroke-width: 2; }
.gazszag-doboz h2 { margin: 0 0 16px; color: #fff; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; letter-spacing: -.02em; font-weight: 850; }
.gazszag-doboz p { font-size: 16px; }
.gazszag-doboz p + p { margin-top: 15px; }

/* A készüléktípusonkénti céloldalak felsorolásban állnak: aláhúzás nélkül a
   félkövér név nem különböztethető meg a környező szövegtől, tehát nem lenne
   felismerhető hivatkozás. Nem élő célnál a helper span-t ad, amely jelöletlen
   marad — így halott linknek látszó elem nem keletkezik. */
.szekcio-gsz-valasztas .fault-list a { text-decoration: underline; text-underline-offset: 3px; }
.szekcio-gsz-valasztas .fault-list a:hover { color: #111315; }

/* A fűtésszerelés oldal két figyelmeztető doboza a felsorolás alatt, önálló
   sorban áll, és címsor nélkül, egyetlen bekezdéssel: ezért kapja meg külön a
   felső térközt és az ikon alatti rést. */
.fut-info-kartya,
.fut-biztonsag { margin-top: 30px; }
.fut-biztonsag > svg { margin-bottom: 12px; }

/* A kapcsolódó szolgáltatások listája után a kizáró mondat önálló bekezdés:
   térköz nélkül negyedik, félkövér listaelemnek látszana. */
.szekcio-fut-kapcsolodo .tovabbi-olvasnivalo { margin-bottom: 22px; }

/* A gázszagos doboz után még folyó szöveg következik, ezért alul is kap
   térközt. Hangsúlyos, de animáció és riasztó jelzés nélküli. */
.konv-biztonsag-doboz { margin-bottom: 26px; }

/* A konvektoros hero fotóján a készülék a kép középső harmadában áll, nem a
   jobb szélén, ezért az alapértelmezett fedőréteg a lényegi tárgyat takarná el.
   A szövegoszlop mögött a felület tömör marad, a kifutás viszont korábban
   kezdődik, így a konvektor felismerhető. Ugyanez a fotó a FÉG oldal hero-ja. */
.belso-hero-konvektor .belso-hero-photo::after,
.belso-hero-feg .belso-hero-photo::after {
  background: linear-gradient(100deg, var(--black) 0 27%, #111315f0 40%, #1113158c 54%, #11131500 72%);
}

/* A kapcsolati hero fotóján a diszpécser közvetlenül a szövegoszlop jobb széle
   mellett áll. A fedőréteg ezért itt vízszintes — a döntött változat ugyanazt az
   x-et a hero alján és tetején eltérően sötétítené, és a diszpécser arcára
   csúszna —, és a szövegzóna után gyorsan kifut. A szövegoszlop teljes szélessége
   0,90 fölötti fedést kap, a diszpécser arca és headsetje 0,07 alattit. */
.belso-hero-kapcsolat .belso-hero-photo::after {
  background: linear-gradient(90deg, var(--black) 0 44%, #111315e6 48%, #11131540 51.5%, #11131500 55%);
}

/* Márkaazonosító embléma a szekció élén. Natív méretben marad, hogy ne
   mosódjon el. */
.marka-emblema { margin-bottom: 26px; }
.marka-emblema img { width: 152px; height: auto; }
/* Az Ariston szójel fekvő, 6:1 arányú, ezért 152px-en alig lenne olvasható.
   Az intrinsic 1280×212 marad az attribútumokban, a magasságot a height: auto
   számolja, tehát az embléma nem torzul. */
.marka-emblema-ariston img { width: 240px; }
/* A BAXI szójel 3:1 arányú: a 152px-es alapérték mellett a felirat apró lenne,
   a 240px pedig aránytalanul magas blokkot adna. */
.marka-emblema-baxi img { width: 200px; }
/* A Saunier Duval szójel az Aristonéhoz hasonlóan fekvő, közel 6:1 arányú. */
.marka-emblema-sd img { width: 240px; }
/* Az Immergas asset szlogennel együtt érkezett, ezért tömbösebb (2,8:1). A 392
   px-es natív szélesség a felső korlát: fölötte lágyulna. */
.marka-emblema-img img { width: 200px; }
/* A Junkers szójel a háromszögjellel együtt fekvő, 5,6:1 arányú. */
.marka-emblema-jk img { width: 240px; }
/* A Vaillant szójel a nyúlemblémával együtt tömbösebb, 3,5:1 arányú. */
.marka-emblema-vl img { width: 200px; }

/* Folyó szövegbe ágyazott szolgáltatáslinkek: aláhúzás nélkül nem lennének
   felismerhető hivatkozások. Nem élő célnál a helper sima szöveget ad, amely
   jelöletlen marad, tehát halott linknek látszó elem nem keletkezik. */
.kapcsolodo-szolgaltatasok a { text-decoration: underline; text-underline-offset: 3px; }
.kapcsolodo-szolgaltatasok a:hover { color: #111315; }

/* Számozott folyamatlista. A javítás oldal ikonos process-step komponense négy
   lépéshez készült; itt nyolc szöveges lépés van, ezért valódi <ol> marad, a
   sorszám a lista saját számlálójából jön. */
.csere-folyamat { list-style: none; counter-reset: lepes; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.csere-folyamat li { counter-increment: lepes; position: relative; padding-left: 46px; min-height: 30px; color: #35393b; font-size: 15px; line-height: 1.62; }
.csere-folyamat li::before { content: counter(lepes); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: #111315; font-size: 14px; font-weight: 850; display: flex; align-items: center; justify-content: center; }

.karb-cta-gombok { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 16px; }
/* A jóváhagyott kiemelések csak a megjelölt mondatrészeket érintik. Sötét
   szekcióban a félkövérség önmagában alig látszik a halvány szövegszínen,
   ezért ott a kiemelés fehérre vált; világos szekcióban sötétebb grafitra. */
.seo-copy strong,
.szekcio-bevezeto-szoveg strong,
.faq-accordion .accordion-body strong { color: var(--graphite); font-weight: 800; }
.belso-hero-copy strong,
.zaro-cta strong { color: #fff; font-weight: 800; }
.szekcio-bevezeto-szoveg { max-width: 62em; margin: -10px 0 32px; color: #35393b; font-size: 16px; line-height: 1.78; }

.biztonsag { padding: 26px 28px; border-left: 4px solid var(--yellow); border-radius: 0 7px 7px 0; background: #f5f5f4; }
.biztonsag svg { width: 30px; height: 30px; color: var(--graphite); }
.biztonsag h3 { margin: 12px 0 10px; font-size: 19px; line-height: 1.25; font-weight: 850; color: var(--graphite); }
.biztonsag p { margin: 0; color: #35393b; font-size: 15px; line-height: 1.7; }

.hiba-racs { --bs-gutter-x: 22px; --bs-gutter-y: 22px; }
.hiba-kartya { height: 100%; position: relative; padding: 26px 26px 26px 28px; border: 1px solid #e1e1df; border-radius: 7px; background: #fff; }
.hiba-kartya::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; background: var(--yellow); }
.hiba-kartya > strong { display: block; color: var(--graphite); font-size: 30px; line-height: 1; font-weight: 850; }
.hiba-kartya h3 { margin: 12px 0 10px; font-size: 19px; line-height: 1.25; font-weight: 850; }
.hiba-kartya p { margin: 0; color: #35393b; font-size: 15px; line-height: 1.65; }

/* Kompakt CTA-sor a kártyarács után. A sárga bal él és a fehér lap ugyanaz a
   vizuális nyelv, mint a fölötte álló hibajelenség-kártyáké. */
.kompakt-cta { margin-top: 30px; padding: 24px 26px; border: 1px solid #e1e1df; border-left: 3px solid var(--yellow); border-radius: 7px; background: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.kompakt-cta h3 { margin: 0; max-width: 26em; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.25; font-weight: 850; }
.kompakt-cta-gombok { display: flex; flex-wrap: wrap; gap: 14px; }

.diagnosztika-kep { border-radius: 7px; overflow: hidden; }
.diagnosztika-kep img { width: 100%; height: auto; }

.szekcio-folyamat .process-intro { margin-bottom: 46px; }
.szekcio-folyamat h2 { margin-bottom: 0; }
/* A belső oldali lépések szövege hosszabb a főoldaliaknál, ezért a sorszám és
   az ikon a szöveg fölé kerül; egy sorban ~150px-es szövegoszlop maradna. */
.szekcio-folyamat .process-step { grid-template-columns: auto 1fr; align-items: center; row-gap: 18px; }
.szekcio-folyamat .process-step > div { grid-column: 1 / -1; }

.marka-racs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
/* A height: 100% miatt a kártya kitölti a rácscellát: szűk nézetben a két sorba
   tördelődő márkanév enélkül magasabbra húzta a saját kártyáját a sorbeli
   szomszédjánál. */
.marka-elem { height: 100%; min-height: 108px; padding: 16px 14px; border: 1px solid #d8d8d8; border-radius: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; background: #fff; color: var(--graphite); font-size: 15px; font-weight: 850; }
/* Ellenőrzött asset nélküli márkánál a logómező el is marad; a kártya külső
   méretét a min-height tartja, ezért a rács azonos magasságú marad. */
.marka-logo { height: 32px; display: grid; place-items: center; }
.marka-logo img { width: auto; max-width: 120px; height: 100%; object-fit: contain; }
.marka-pontositas { max-width: 62em; margin: 26px 0 0; color: #35393b; font-size: 14px; line-height: 1.7; }

/* Gyors kiszállási impulzus a szekciócím alatti, addig üres területen. */
.impulzus { margin-top: 26px; padding-top: 24px; border-top: 1px solid #e1e1df; }
.impulzus h3 { margin: 9px 0 14px; font-size: clamp(21px, 2.1vw, 26px); line-height: 1.2; font-weight: 850; }
.impulzus p { margin: 0; color: #35393b; font-size: 15px; line-height: 1.7; }
.impulzus .impulzus-pontositas { margin-top: 18px; font-size: 13px; line-height: 1.6; }
.impulzus-jelolok { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; }
.impulzus-jelolok li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; }
.impulzus-jelolok svg { width: 21px; height: 21px; color: var(--graphite); flex: 0 0 auto; }

.szervizauto-kep { margin-top: 26px; border-radius: 7px; overflow: hidden; }
.szervizauto-kep img { width: 100%; height: auto; }
/* A kiszállási terület fotója kis eredeti felbontású (334×171). Teljes
   oszlopszélességre nyújtva látványosan lágy lenne, ezért a saját méretéhez
   közeli felső korlátot kap. */
.szervizauto-kep-kicsi { max-width: 520px; }

.kiszallas { margin-top: clamp(40px, 4vw, 56px); padding: clamp(26px, 3vw, 36px); border: 1px solid #e1e1df; border-radius: 7px; background: #f5f5f4; }
.kiszallas h3 { margin: 9px 0 16px; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.18; font-weight: 850; }
.kiszallas p { margin: 0 0 14px; max-width: 62em; color: #35393b; font-size: 15px; line-height: 1.72; }
.kiszallas .kiszallas-pontositas { font-size: 13px; }
.kiszallas .kiszallas-impulzus { margin-bottom: 22px; color: var(--graphite); font-weight: 800; }
.kiszallas-gombok { display: flex; flex-wrap: wrap; gap: 16px; }

/* Aktív promóció. A megjelenítést a főoldalról ismert, teljes szélességű
   .offer-section komponens adja: ferde elválasztás, kör alakú jelvény és a
   reszponzív viselkedés onnan öröklődik, párhuzamos banner nem készül. Itt
   csak az akcióra jellemző árblokk szerepel. Ár és dátum a stíluslapon nem
   jelenhet meg. */
.akcio-szekcio .offer-copy h2 span { display: block; }
.akcio-ervenyesseg { margin: 18px 0 0; color: #35393b; font-size: 12px; font-weight: 700; }
/* Érintési felület: a szám a főoldali komponensben szöveges link, itt viszont
   önálló CTA, ezért eléri a 44px-es küszöböt. A főoldal nem változik. */
.akcio-szekcio .offer-phone { min-height: 44px; }

.akcio-normal-ar { margin: 0 0 2px; color: #d5d8da; font-size: 16px; font-weight: 700; }
.akcio-normal-ar s { text-decoration-thickness: 2px; }
.akcio-akcios-ar { margin: 0; color: var(--yellow); font-size: clamp(44px, 5vw, 68px); line-height: 1; font-weight: 850; letter-spacing: -.03em; white-space: nowrap; }
.akcio-akcios-ar span { margin-left: 8px; font-size: .4em; font-weight: 800; }
.akcio-netto-ar { margin: 6px 0 0; color: #d5d8da; font-size: 15px; font-weight: 700; }
.akcio-megjegyzes { margin: 12px 0 0; max-width: 21em; color: #d5d8da; font-size: 12px; font-weight: 800; letter-spacing: .07em; line-height: 1.5; text-transform: uppercase; }

.kozbenso-cta { margin-top: clamp(48px, 5vw, 64px); padding: clamp(28px, 3vw, 40px); border-radius: 7px; color: #fff; background: linear-gradient(110deg, var(--graphite), var(--black)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; }
.kozbenso-cta h3 { margin: 0 0 10px; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.18; font-weight: 850; }
.kozbenso-cta p { max-width: 46em; margin: 0; color: #d5d8da; font-size: 15px; line-height: 1.65; }
.kozbenso-cta-gombok { display: flex; flex-wrap: wrap; gap: 16px; }
/* Sötét háttéren a sötét gomb elveszne, ezért ott a világos változat megy. */
.kozbenso-cta .site-btn-dark,
.zaro-cta .site-btn-dark { border-color: #d8d8d8; background: #fff; color: #111315; }

.zaro-cta { padding-block: clamp(64px, 7vw, 88px); color: #fff; background: linear-gradient(110deg, var(--graphite), var(--black)); text-align: center; }
.zaro-cta .seo-eyebrow { color: #c28700; }
.zaro-cta h2 { margin: 9px 0 18px; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.14; font-weight: 850; letter-spacing: -.02em; }
.zaro-cta p { max-width: 56em; margin: 0 auto; color: #d5d8da; font-size: 16px; line-height: 1.75; }
/* Több bekezdéses záró blokknál a középre igazított nulla margó összeragasztaná
   a bekezdéseket. */
.zaro-cta p + p { margin-top: 16px; }
.zaro-cta-gombok { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* A visszahívási köszönőoldal a záró CTA szekció megjelenését használja, de a
   címsora H1, ezért a méretet külön kapja meg. A szekció kevés tartalmat hordoz,
   ezért a záró CTA nagy belső margója itt indokolatlan üres sötét felületet adna
   — a magasságot ezért csak ezen az oldalon vesszük vissza. */
.koszono { padding-block: clamp(40px, 4.6vw, 60px); }
.koszono h1 { margin: 0 0 14px; font-size: clamp(28px, 2.9vw, 38px); line-height: 1.16; font-weight: 850; letter-spacing: -.02em; }
.koszono p { max-width: 44em; }
.koszono .zaro-cta-gombok { margin-top: 24px; }
/* Telefonszám és toldaléka: sortörésnél olvashatatlan lenne. */
.nem-torik { white-space: nowrap; }
/* A köszönőoldal rövid, ezért a lábléc azonnal látszik: a lebegő hívógomb
   ráúszna a láblécre. A JavaScriptes elhalványítás időzítéstől függ, ezért itt
   determinisztikusan, CSS-ből marad ki — a saját sárga hívás CTA amúgy is a
   képernyőn van, tehát nem vész el hívási lehetőség. */
body:has(.koszono) .floating-call { display: none; }

/* Hibakódhub. A vészhelyzeti blokk a hero saját sötét felületén áll, ezért nem
   az .info-kartya világos-sötét kártyáját használja. */
.hibakod-veszhelyzet { margin-top: 30px; padding: 18px 20px; border-left: 4px solid var(--yellow); border-radius: 0 7px 7px 0; background: #11131599; display: flex; gap: 14px; }
.hibakod-veszhelyzet svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--yellow); }
.hibakod-veszhelyzet p { margin: 0; color: #d5d8da; font-size: 14px; line-height: 1.65; }
.hibakod-veszhelyzet strong { color: #fff; font-weight: 800; }

/* A kereső szekció csak akkor jelenik meg, ha van JavaScript: enélkül hatástalan
   űrlap és egy alatta üres címsor maradna a képernyőn. A hibakódlista skript
   nélkül is teljes és olvasható, ezért itt semmilyen tartalom nem vész el. */
.szekcio-hk-kereso { display: none; }
.js .szekcio-hk-kereso { display: block; }
.hibakod-szuro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: end; }
.hibakod-szuro-mezo { margin: 0; display: grid; gap: 7px; }
.hibakod-szuro-mezo label { color: var(--graphite); font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.hibakod-szuro-mezo select,
.hibakod-szuro-mezo input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #d8d8d8; border-radius: 5px; background: #fff; color: #111315; font: inherit; font-size: 15px; }
.hibakod-nulltalalat { margin: 18px 0 0; padding: 16px 18px; border-left: 3px solid var(--yellow); background: #fff; color: #35393b; font-size: 15px; line-height: 1.65; }

/* Találati állapotsáv. Erősen elkülönül a szűrőktől: sötét felület, sárga
   szegély. Szűrt állapotban sárga keretet és rövid kiemelést kap. */
.hibakod-allapotsav { margin-top: 26px; padding: 16px 20px; border-left: 4px solid var(--yellow); border-radius: 0 7px 7px 0; background: linear-gradient(135deg, var(--graphite), var(--black)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.hibakod-allapot-szoveg { margin: 0; color: #fff; font-size: 17px; font-weight: 850; letter-spacing: -.01em; }
.hibakod-allapotsav.is-szurt { border-left-color: var(--yellow-2); }
.hibakod-allapotsav.is-szurt .hibakod-allapot-szoveg { color: var(--yellow); }
.hibakod-allapot-gomb { min-height: 44px; padding: 10px 18px; border: 1px solid var(--yellow); border-radius: 5px; display: inline-flex; align-items: center; background: var(--yellow); color: #111315; font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.hibakod-allapot-gomb:hover { background: var(--yellow-2); }
/* Rövid, visszafogott kiemelés: nincs mesterséges betöltő, mert a szűrés
   azonnali — a villanás csak jelzi, hogy a szám frissült. */
@keyframes hibakod-allapot-frissult {
  from { box-shadow: 0 0 0 0 #fdbc1800; }
  30%  { box-shadow: 0 0 0 4px #fdbc1866; }
  to   { box-shadow: 0 0 0 0 #fdbc1800; }
}
.hibakod-allapotsav.is-frissult { animation: hibakod-allapot-frissult .5s ease-out; }

/* Hat egymást követő márkablokk teljes szekciótérközzel túl hosszúra nyújtaná
   az oldalt, ezért ezek a szekciók szűkebb függőleges térközt kapnak. */
.szekcio-hk-marka { padding-block: clamp(40px, 4vw, 56px); }
/* A folyó szövegbe ágyazott hivatkozások sem színben, sem súlyban nem térnek el
   a környezetüktől: jelölés nélkül nem ismerhetők fel hivatkozásként. */
.szekcio-hk-marka .seo-copy a,
.szekcio-hk-nincs-talalat .seo-copy a { text-decoration: underline; text-underline-offset: 3px; }
.szekcio-hk-marka .seo-copy a:hover,
.szekcio-hk-nincs-talalat .seo-copy a:hover { color: #111315; }
/* A készülékcsalád neve egyszer, a saját táblázata fölött áll. Így a táblázat
   három oszlopos marad, és a hosszú családnév nem ismétlődik soronként. */
.hibakod-csalad-blokk + .hibakod-csalad-blokk { margin-top: 34px; }
.hibakod-csalad-cim { max-width: 58em; margin: 30px 0 0; padding-left: 15px; border-left: 3px solid var(--yellow); color: var(--graphite); font-size: 17px; line-height: 1.45; font-weight: 850; }
.hibakod-tabla-doboz { margin-top: 16px; border: 1px solid #e1e1df; border-radius: 7px; overflow-x: auto; }
.hibakod-tabla { width: 100%; min-width: 620px; border-collapse: collapse; }
.hibakod-tabla th,
.hibakod-tabla td { padding: 13px 16px; border-bottom: 1px solid #e1e1df; text-align: left; vertical-align: top; font-size: 14px; line-height: 1.6; }
.hibakod-tabla thead th { background: #f5f5f4; color: var(--graphite); font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.hibakod-tabla tbody tr:last-child td { border-bottom: 0; }
/* Horgonnyal érkező látogatónál a megcélzott sor kiemelve jelenik meg. */
.hibakod-tabla tbody tr:target { background: #fdbc1826; }
.hibakod-tabla .hibakod-kod { width: 11%; color: var(--graphite); font-weight: 850; white-space: nowrap; }
.hibakod-tabla .hibakod-lepes { width: 45%; color: #35393b; }

/* Súlyossági besorolás: ikon ÉS szöveg, tehát a jelentés nem kizárólag színnel
   közvetített. A szövegszín kontrasztja a saját hátterén 6:1 fölött van. */
/* A jelentés és a biztonságos lépés saját blokkelemben áll, különben a jelzés és
   a gomb a folyó szöveg közepébe úszna be. */
.hibakod-jelentes,
.hibakod-lepes-szoveg { display: block; }
.hibakod-sulyossag { margin-top: 9px; padding: 4px 10px 4px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; letter-spacing: .02em; line-height: 1.35; }
.hibakod-sulyossag svg { width: 15px; height: 15px; flex: 0 0 auto; }
.hibakod-sulyossag-szukseges { background: var(--sulyos-piros-hatter); color: var(--sulyos-piros); }
.hibakod-sulyossag-javasolt { background: var(--sulyos-borostyan-hatter); color: var(--sulyos-borostyan); }
.hibakod-sulyossag-ellenorzes { background: var(--sulyos-kek-hatter); color: var(--sulyos-kek); }

/* Soronkénti telefonos CTA a biztonságos lépés után. Mobilon legalább 48 px
   magas érintési cél, asztali nézetben kompakt. */
.hibakod-sor-cta { margin-top: 12px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--yellow); border-radius: 5px; display: inline-flex; align-items: center; gap: 9px; background: var(--yellow); color: #111315; }
.hibakod-sor-cta:hover { background: var(--yellow-2); }
.hibakod-sor-cta svg { width: 18px; height: 18px; flex: 0 0 auto; }
.hibakod-sor-cta span { font-size: 12px; font-weight: 900; letter-spacing: .02em; line-height: 1.3; text-transform: uppercase; }
.hibakod-sor-cta b { display: block; font-size: 13px; }

/* Biztonsági és felelősségi blokk a teljes lista után. */
.hibakod-biztonsag { border-left-width: 10px; }
.hibakod-biztonsag > svg { width: 40px; height: 40px; margin-bottom: 15px; stroke-width: 2; }
.hibakod-biztonsag h2 { margin: 0 0 16px; color: #fff; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; letter-spacing: -.02em; font-weight: 850; }
.hibakod-biztonsag p { font-size: 16px; }
.hibakod-biztonsag p + p { margin-top: 15px; }
.hibakod-biztonsag-cta { margin-top: 24px; min-height: 48px; padding: 11px 20px; border-radius: 5px; display: inline-flex; align-items: center; gap: 11px; background: var(--yellow); color: #111315; }
.hibakod-biztonsag-cta:hover { background: var(--yellow-2); }
.hibakod-biztonsag-cta svg { width: 22px; height: 22px; flex: 0 0 auto; }
.hibakod-biztonsag-cta span { font-size: 13px; font-weight: 900; letter-spacing: .02em; }

/* Kapcsolat oldal */

.kapcsolat-hero-jelzes { margin: 26px 0 0; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

.kapcsolat-mod { display: flex; flex-direction: column; }
.kapcsolat-mod > svg { width: 30px; height: 30px; color: var(--graphite); }
.kapcsolat-mod h3 { margin: 14px 0 10px; }
/* A leírás nyúlik, így a kártyák CTA-i egy vonalban maradnak. */
.kapcsolat-mod p { flex: 1 1 auto; }
.kapcsolat-mod .site-btn { margin-top: 20px; min-width: 0; }

.kapcsolat-folyamat li + li { margin-top: 4px; }
.kapcsolat-folyamat h3 { margin: 3px 0 6px; font-size: 17px; line-height: 1.3; font-weight: 850; }
.kapcsolat-folyamat p { margin: 0; }

.kapcsolat-biztonsag,
.kapcsolat-nincs-ugyfelfogadas { margin-top: 30px; border-left-width: 10px; }
.kapcsolat-biztonsag > svg,
.kapcsolat-nincs-ugyfelfogadas > svg { width: 38px; height: 38px; stroke-width: 2; }
.kapcsolat-nincs-ugyfelfogadas p { color: #fff; font-size: 17px; font-weight: 800; line-height: 1.6; }

.cegadat-lista { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 30px; }
.cegadat-lista dt { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.cegadat-lista dd { margin: 5px 0 0; color: var(--graphite); font-size: 17px; font-weight: 800; line-height: 1.45; }
.cegadat-lista a { color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
.cegadat-lista a:hover { color: #111315; }

/* Halasztott javításig oldalra szűkítve: a folyó szövegbe ágyazott horgony
   aláhúzás nélkül nem ismerhető fel hivatkozásként. */
.szekcio-kapcsolat-elokeszites a,
.szekcio-kapcsolat-terulet .seo-copy a,
.belso-hero-kapcsolat .belso-hero-copy p a { text-decoration: underline; text-underline-offset: 3px; }

/* Jogi oldalak. Kép nélküli, sötét fejléc: ehhez a munkacsomaghoz nem érkezett
   képi asset, placeholder pedig nem kerülhet ki. A morzsamenü itt minden
   töréspontnál látszik, mert nem hero fotó fölött ül. */
.jogi-fejlec { padding-block: clamp(44px, 5.5vw, 76px); color: #fff; background: var(--black); }
.jogi-fejlec .morzsa { display: block; margin-bottom: 18px; }
.jogi-fejlec h1 { max-width: 14em; margin: 0; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -.02em; font-weight: 850; }
.jogi-fejlec h1::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 20px; background: var(--yellow); }

/* A szövegoszlop a projekt meglévő mértékét kapja (.szekcio-bevezeto-szoveg),
   így a jogi oldal nem lóg ki a többi belső oldal elrendezéséből. A törhető
   szótörés a hosszú, szóköz nélküli hatósági URL-ek miatt kell: enélkül
   mobilon vízszintes görgetés keletkezne. */
.jogi-szoveg { max-width: 62em; color: #35393b; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; }
.jogi-szoveg p { margin: 0 0 18px; }
.jogi-szoveg h2 { margin: 46px 0 18px; padding-top: 22px; border-top: 2px solid var(--yellow); color: var(--graphite); font-size: clamp(22px, 2.4vw, 27px); line-height: 1.25; font-weight: 850; }
.jogi-szoveg h3 { margin: 30px 0 14px; color: var(--graphite); font-size: 18px; line-height: 1.4; font-weight: 850; }
.jogi-szoveg ul { margin: 0 0 18px; padding-left: 22px; }
.jogi-szoveg li { margin-bottom: 6px; }
.jogi-szoveg a { color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
.jogi-szoveg a:hover { color: #111315; }

.jogi-adatok { margin: 0 0 18px; }
.jogi-adatok > div { display: flex; flex-wrap: wrap; gap: 0 8px; }
.jogi-adatok > div + div { margin-top: 4px; }
.jogi-adatok dt { font-weight: 800; }
.jogi-adatok dd { margin: 0; }

@media (max-width: 1199.98px) {
  .marka-racs { grid-template-columns: repeat(3, 1fr); }
  /* Ebben a sávban a hero szövegoszlopa col-lg-7, ezért vízszintesen ráfut a
     diszpécser arcára: mérve a szöveg a hero 54,7–55,9 %-áig ér, az arc az
     52,2–54,1 %-nál van. A kettő nem fér el egymás mellett, és a szöveg
     olvashatósága az elsődleges, ezért itt a kifutás később kezdődik. 1200 px
     fölött a szövegoszlop col-xl-6, és az alapszabály érvényes. */
  .belso-hero-kapcsolat .belso-hero-photo::after {
    background: linear-gradient(90deg, var(--black) 0 54.5%, #111315e6 57%, #11131540 60%, #11131500 63.5%);
  }
}

/* A mobil crop nem vághatja le a szerelő arcát, a logót vagy a kazánt, ezért
   a kép itt teljes egészében, natív arányban jelenik meg a szöveg alatt. */
@media (max-width: 991.98px) {
  .belso-hero { display: flex; flex-direction: column-reverse; }
  .belso-hero-photo { position: relative; inset: auto; }
  .belso-hero-photo img { height: auto; object-fit: fill; }
  .belso-hero-photo::after { display: none; }
  .belso-hero-inner { padding-block: 34px 48px; }
  .kozbenso-cta-gombok,
  .kompakt-cta-gombok,
  .kiszallas-gombok,
  .zaro-cta-gombok { width: 100%; }
  .hibakod-szuro { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 767.98px) {
  .belso-hero-copy > p { font-size: 16px; }
  .belso-hero-gombok,
  .kozbenso-cta-gombok,
  .kompakt-cta-gombok,
  .kiszallas-gombok,
  .karb-cta-gombok,
  .zaro-cta-gombok { display: grid; grid-template-columns: 1fr; }
  .belso-hero-bizalom { gap: 12px 20px; }
  .marka-racs { grid-template-columns: repeat(2, 1fr); }
  .biztonsag { padding: 22px 20px; }
  .hiba-kartya { padding: 22px 22px 22px 24px; }
  .kozbenso-cta { padding: 26px 22px; }
  .kompakt-cta { padding: 22px 20px; }
  .hibakod-veszhelyzet { padding: 16px 16px; }
  .hibakod-tabla th,
  .hibakod-tabla td { padding: 11px 13px; }
  /* Mobilon a soronkénti CTA teljes szélességű, legalább 48 px magas érintési cél. */
  .hibakod-sor-cta { width: 100%; min-height: 48px; justify-content: center; }
  .hibakod-allapotsav { padding: 14px 16px; }
  .hibakod-allapot-gomb { width: 100%; justify-content: center; min-height: 48px; }
  .hibakod-biztonsag-cta { width: 100%; justify-content: center; }
  .cegadat-lista { grid-template-columns: 1fr; gap: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .hibakod-allapotsav.is-frissult { animation: none; }
}