:root {
--yellow: #fdbc18;
--yellow-2: #ffd34a;
--black: #111315;
--dark: #171a1c;
--graphite: #23282b;
--muted: #606468;
--line: #d8d8d8;
--white: #fff;
--site: 1180px;
--section-space: clamp(64px, 7vw, 88px);
/* Súlyossági státuszszínek a hibakódlistához. Tulajdonosi döntés: a három
besorolás piros, borostyán és kék jelölést kap. Mindegyik szövegszínének
kontrasztja a saját hátterén 6:1 fölött van, tehát a jelentés nem kizárólag
színnel közvetített — ikon és szöveges besorolás is kíséri. */
--sulyos-piros: #b3261e;
--sulyos-piros-hatter: #fdecea;
--sulyos-borostyan: #8a5300;
--sulyos-borostyan-hatter: #fdf2e3;
--sulyos-kek: #14508c;
--sulyos-kek-hatter: #eaf1f9;
/* A szervizbejelentő űrlap formkártyája egy árnyalattal szürkébb a szekció
törtfehér hátterénél, hogy ne olvadjon bele. */
--szb-kartya: #f1f1ef;
--szb-keret: #e2e2df;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: #171717;
background: #fff;
font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.7;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* Kettős gyűrű, mert a jelölésre a nem szöveges elemek 3:1 küszöbe vonatkozik:
a sárga önmagában világos háttéren csak 1,70:1. A belső grafit világos
háttéren 14,90:1, a külső sárga a grafithoz és a sötét szekciókhoz képest
8,78:1 fölött van, így minden háttéren látható. */
:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--graphite);
}
.skip-link { position: absolute; z-index: 100; left: -9999px; top: 0; padding: 12px 20px; background: var(--yellow); color: #111; font-weight: 800; }
.skip-link:focus { left: 0; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.site-container { max-width: var(--site) !important; }
.site-header { position: absolute; inset: 0 0 auto; z-index: 10; }
.navbar { min-height: 96px; }
/* A jobb oldali térköz és a menüköz a jóváhagyott hat menüpont helyett a
kanonikus menüfa hét eleméhez van szabva; enélkül a menü a logóra és a
sarok-hívógombra csúszna. A hívógomb ferde bal éle miatt a menü 240px-ig
nyúlhat be biztonságosan. */
.navbar > .site-container { max-width: 1520px !important; padding-left: clamp(24px, 3vw, 48px); padding-right: 240px; }
.navbar-brand { margin: 0; }
/* A height: auto kötelező: a HTML width/height attribútuma prezentációs
tippként fix magasságot adna, és a logó a 420:108 arányból kitorzulna.
Az attribútum CLS-védelemként marad. */
.navbar-brand img { width: clamp(154px, 13vw, 185px); height: auto; }
.navbar-collapse { min-width: 0; align-self: stretch; }
.navbar-nav { min-height: 100%; gap: clamp(12px, 1.2vw, 20px); }
.navbar .nav-link {
min-height: 100%;
padding: 0 !important;
display: flex;
align-items: center;
position: relative;
color: #121212;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
white-space: nowrap;
}
/* A jelölés saját pszeudoelemet kap. A Bootstrap nyílhegye az ::after elemen ül,
és felülírva a kerete fekete csíkot rajzolt a sárga jelölés fölé, kiesve a
folyamból pedig 9 px-et ugrasztott a menüponton. Így a nyílhegy minden
állapotban helyben marad. */
.navbar .nav-link.active::before,
.navbar .nav-link:hover::before { content: ""; position: absolute; left: 0; right: 0; bottom: 29px; height: 2px; background: var(--yellow); }
/* Kompakt, világos lenyíló a meglévő tokenekből, vékony sárga felső akcentussal.
A data-bs-display="static" miatt a panel CSS-ből pozicionált, nem Popperből,
így nem ugrik és mindig a saját kiváltója alatt marad. Abszolút pozicionált,
ezért a nyitás nem mozdítja el a fejlécet és a hero-t. */
.navbar .dropdown-menu {
--bs-dropdown-spacer: 8px;
min-width: 238px;
padding: 7px;
border: 1px solid var(--line);
border-top: 3px solid var(--yellow);
border-radius: 7px;
background: #fff;
box-shadow: 0 14px 30px #00000024;
}
/* A látható rés hover-holtteret hozna létre, ezért a panel egy átlátszó
pszeudoelemmel áthidalja a kiváltóig. Mérete a rés és a felső keret összege. */
.navbar .dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 11px; }
.navbar .dropdown-item { padding: 9px 12px; border-radius: 5px; color: var(--graphite); font-size: 13px; font-weight: 700; white-space: normal; }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus-visible { color: #111315; background: var(--yellow); }
/* A még nem élő célok látszanak, de nem kattinthatók és nem mozognak. */
.navbar span.dropdown-item[aria-disabled="true"] { color: var(--muted); background: transparent; }
/* A Bootstrap .nav-link:focus-visible és .navbar-toggler:focus szabálya
elnyomná a projekt kettős gyűrűjét, és a Bootstrap kék jelölését rajzolná ki.
A sima :focus jelöletlen marad, így egérrel aktiválva nincs keret; a
billentyűzetes :focus-visible a projekt saját tokenjeit kapja vissza. */
.navbar .nav-link:focus-visible,
.navbar-toggler:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--graphite);
}
.navbar-toggler:focus:not(:focus-visible) { box-shadow: none; }
/* A pozicionálás a burkolón van, a vágás a gombon: a clip-path a saját elemére
tett árnyékot is levágná, ezért a vetett árnyék csak a burkolóra kerülhet. */
.corner-call-hely {
position: absolute;
right: 0;
top: 0;
}
.corner-call {
width: 270px;
min-height: 104px;
padding: 13px 26px 13px 62px;
clip-path: polygon(13% 0, 100% 0, 100% 100%, 25% 100%);
display: flex;
align-items: center;
gap: 14px;
background: #fff;
filter: drop-shadow(0 5px 16px #0002);
}
.corner-call svg { width: 31px; height: 31px; color: var(--yellow); stroke-width: 2.3; }
.corner-call span { display: grid; line-height: 1.15; }
.corner-call small { font-size: 12px; }
.corner-call b { font-size: 19px; white-space: nowrap; }
.corner-call em { margin-top: 8px; padding: 7px 13px; border-radius: 4px; text-align: center; color: #111; background: var(--yellow); font-size: 11px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.hero {
min-height: 760px;
position: relative;
overflow: hidden;
background: linear-gradient(105deg, #fff 0 50%, #f2f2ef 65%, #deded9 100%);
}
.hero::before {
content: "";
position: absolute;
inset: 100px 47% 0 29%;
opacity: .09;
background: repeating-linear-gradient(90deg, transparent 0 70px, #70777c 71px 72px), repeating-linear-gradient(0deg, transparent 0 70px, #70777c 71px 72px);
mask-image: radial-gradient(ellipse, #000, transparent 70%);
}
.hero-photo { position: absolute; z-index: 1; right: 0; top: 96px; bottom: 0; width: calc(52% + clamp(56px, 7vw, 96px)); overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.hero-photo::before { display: none; content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 9%; background: linear-gradient(90deg, #fff, transparent); }
.hero-inner { min-height: 760px; position: relative; z-index: 3; }
.hero-copy { padding-top: clamp(165px, 16vw, 205px); padding-bottom: 92px; }
.overline { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.overline > span { width: 44px; height: 2px; background: var(--yellow); }
.overline i { font-style: normal; }
.hero-copy h1 { max-width: 690px; margin: 0 0 24px; font-size: clamp(48px, 5vw, 64px); line-height: 1.02; letter-spacing: -.04em; font-weight: 850; }
/* A sárga a világos hero-háttéren 1,70:1 volt, a grafit mögötte 8,78:1-re emeli.
A háttér méretezett, mert az inline elem törzsdoboza (1,42em) a h1 1,02-es
sortávolságánál a szomszédos sorokba lógna; a clone miatt több sorra törve is
minden töredék megkapja. */
.hero-copy h1 strong {
color: var(--yellow);
font-weight: 850;
padding-inline: .16em;
background: linear-gradient(var(--graphite), var(--graphite)) 0 50% / 100% 1.06em no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.hero-copy > p { max-width: 610px; margin: 0 0 32px; color: #414141; font-size: 17px; line-height: 1.75; }
.hero-buttons { gap: 16px !important; }
.site-btn { min-height: 58px; padding: 11px 20px; border: 1px solid #777; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-transform: uppercase; box-shadow: 0 8px 20px #0001; transition: transform .2s ease, box-shadow .2s ease; }
.site-btn:hover { transform: translateY(-2px); box-shadow: 0 11px 24px #0002; }
.site-btn svg { width: 25px; height: 25px; flex: 0 0 auto; }
.site-btn span { font-size: 12px; font-weight: 900; line-height: 1.35; white-space: nowrap; }
.site-btn b { display: block; font-size: 14px; }
.site-btn-yellow { min-width: 190px; border-color: var(--yellow); background: linear-gradient(135deg, #ffcf38, #f6b900); color: #111; }
.site-btn-dark { min-width: 190px; border-color: #191b1d; background: linear-gradient(135deg, #242729, #111); color: #fff; }
.site-btn-outline { min-width: 190px; background: #fff; color: #111; }
/* A teljes szélességű elemek igazítása a tartalmi nézethez igazodik. A 100vw a
görgetősávot is beleszámolta, ezért annak szélességével elcsúszott; a
százalék a szülő tartalmi dobozából számol, tehát görgetősáv-független.
A 12px a konténer belső margója: a szövegoszlop ennyivel beljebb kezdődik,
mint a --site szélességű konténerdoboz. */
.hero-info-card { position: absolute; z-index: 5; right: max(30px, calc((100% - var(--site)) / 2 + 12px)); top: 255px; width: 265px; padding: 25px 22px; border-radius: 9px; background: #fffffff2; box-shadow: 0 14px 36px #0003; backdrop-filter: blur(6px); display: grid; gap: 17px; }
.hero-info-card > div { display: flex; align-items: center; gap: 14px; }
.hero-info-card svg { width: 27px; height: 27px; color: #202326; flex: 0 0 auto; }
.hero-info-card p { margin: 0; line-height: 1.25; }
.hero-info-card b, .hero-info-card span { display: block; }
.hero-info-card b { font-size: 14px; }
.hero-info-card span { margin-top: 3px; font-size: 12px; color: #4b4f52; }
.trust-strip { padding-block: 34px; color: #fff; background: linear-gradient(100deg, #24282b, #131618); }
.trust-item { min-height: 70px; display: flex; align-items: center; justify-content: center; gap: 17px; position: relative; }
.trust-item:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 7px; bottom: 7px; width: 1px; background: #777; }
.trust-item svg { width: 39px; height: 39px; color: var(--yellow); }
.trust-item p { margin: 0; line-height: 1.25; }
.trust-item b, .trust-item span { display: block; }
.trust-item b { font-size: 16px; }
.trust-item span { margin-top: 4px; color: #d7d9da; font-size: 13px; }
/* A 12px-es címkék normál szövegnek számítanak (a WCAG nagy szöveg küszöbe
24px, félkövéren 18,66px), ezért 4,5:1 kell. Az arany világos háttéren csak
3,11:1-et adott, így ott a grafit tokent használják. */
.section-heading > span,
.quick-copy > span,
.coverage-copy > span,
.seo-eyebrow { color: var(--graphite); font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
/* Sötét szekcióban a grafit olvashatatlan lenne; ott a meglévő arany marad. */
.process-section .seo-eyebrow { color: #c28700; }
/* Örökzöld karbantartási szekció. Nem akció: árat, kedvezményt, dátumot és
visszaszámlálót nem tartalmazhat. */
.offer-section { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.offer-left, .offer-right { min-width: 0; padding-block: 72px; }
/* A két oszlop egyenként a tartalmi nézet fele, ezért itt a 100% már a felével
számol: a szövegoszlop széléig tartó margó 100% - a tartalmi szélesség fele.
A 24px-es alsó korlát a konténer belső margója, így szűkebb nézetben sem
csúszik el a szövegoszloptól. */
.offer-left { position: relative; padding-left: max(24px, calc(100% - var(--site) / 2 + 12px)); padding-right: 145px; background: linear-gradient(135deg, #ffda4c, #ffc21d); isolation: isolate; }
.offer-left::before { content: ""; position: absolute; inset: 0; opacity: .13; background: repeating-linear-gradient(45deg, transparent 0 44px, #957300 45px 46px); mask-image: linear-gradient(to right, transparent, #000); }
.offer-left::after { content: ""; position: absolute; z-index: 3; top: 0; right: -54px; width: 105px; height: 100%; background: #fff; clip-path: polygon(44% 0, 100% 0, 56% 50%, 100% 100%, 44% 100%, 0 50%); }
.offer-copy { position: relative; z-index: 2; max-width: 520px; }
.offer-copy > span { color: var(--graphite); font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.offer-copy h2 { margin: 10px 0 18px; font-size: clamp(30px, 3vw, 40px); line-height: 1.15; font-weight: 850; }
.offer-copy > p { margin: 0 0 18px; max-width: 500px; font-size: 15px; line-height: 1.65; }
.offer-copy ul { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.75; }
.offer-copy li::before { content: "✓"; margin-right: 9px; font-weight: 900; }
.offer-tool { position: absolute; z-index: 4; right: 38px; top: 50%; transform: translateY(-50%); width: 110px; aspect-ratio: 1; border: 8px solid #333b40; border-radius: 50%; display: grid; place-items: center; color: var(--yellow); background: radial-gradient(circle, #41474b, #111); box-shadow: 0 9px 18px #0006; }
.offer-tool svg { width: 61px; height: 61px; stroke-width: 2.4; }
.offer-right { display: grid; align-content: center; gap: 28px; padding-left: 82px; padding-right: max(24px, calc(100% - var(--site) / 2 + 12px)); color: #fff; background: radial-gradient(circle at 30% 20%, #2c3033, #111416 70%); }
.offer-copy-right h3 { margin: 0 0 12px; font-size: clamp(23px, 2.2vw, 29px); line-height: 1.2; font-weight: 850; }
.offer-copy-right p { margin: 0; max-width: 34em; color: #d5d8da; font-size: 15px; line-height: 1.65; }
.offer-action { display: grid; justify-items: start; gap: 18px; }
.offer-action .site-btn { min-width: 255px; }
.offer-phone { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; }
.offer-phone svg { width: 28px; height: 28px; color: var(--yellow); }
.services-section { padding-block: var(--section-space); background: #fff; }
.section-heading { margin-bottom: 30px; }
.section-heading h2 { margin: 7px 0 0; font-size: clamp(31px, 3.2vw, 40px); line-height: 1.15; font-weight: 850; }
/* Rács a Bootstrap sor helyett: a grid-auto-rows: 1fr mind a hat kártyát
azonos magasságúra hozza, nem csak az egy sorban állókat. */
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 22px; }
.service-card { height: 100%; min-height: 190px; position: relative; display: grid; grid-template-columns: 78px 1fr 30px; align-items: center; padding: 28px 30px; gap: 20px; color: #111; background: #e6d5a4; clip-path: polygon(0 0, 91% 0, 100% 50%, 91% 100%, 0 100%); filter: drop-shadow(0 8px 14px #0001); }
.service-card::before { content: ""; position: absolute; inset: 1px; background: #fff; clip-path: inherit; }
.service-card > * { position: relative; z-index: 1; }
.service-card > svg { width: 62px; height: 62px; stroke-width: 1.25; }
/* Rácsoszlop auto minimuma nélkül a hosszú, nagybetűs mikró-CTA felirat
szétfeszítené a kártyát, és a nyíl kicsúszna a jobb szélen. A szövegoszlop
kifeszítése teszi egy tengelyre a címeket és a mikró-CTA-kat. */
.service-card > div { min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.service-card h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.12; font-weight: 850; }
.service-card p { margin: 0; color: #555; font-size: 14px; line-height: 1.5; }
.service-card i { color: var(--yellow); }
.service-card i svg { width: 27px; }
a.service-card:hover { background: var(--yellow); }
/* A mikró-CTA a jóváhagyott sárga karaktert a szegéllyel viszi tovább: a
korábbi arany szövegszín 11–12px-en nem érte el a 4,5:1 küszöböt. */
.service-link { display: inline-block; align-self: flex-start; margin-top: auto; padding: 12px 0 2px; border-bottom: 2px solid var(--yellow); color: var(--graphite); font-size: 12px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
.service-link-inline { align-self: center; margin-top: 0; padding-top: 0; }
/* A nem élő kártya vizuálisan azonos, de nem kattintható és nem mozdul. */
span.service-card { cursor: default; }
.seo-section { margin-top: clamp(72px, 8vw, 104px); position: relative; }
.seo-section h2,
.process-section h2 { margin: 10px 0 22px; font-size: clamp(32px, 3.4vw, 43px); line-height: 1.15; font-weight: 850; letter-spacing: -.02em; }
.seo-copy p { margin: 0 0 20px; color: #35393b; font-size: 16px; line-height: 1.78; }
.seo-copy p:last-child { margin-bottom: 0; }
.seo-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 16px; }
.blueprint-visual { min-height: 430px; position: relative; display: grid; place-items: center; color: #9ea4a7; opacity: .65; background: repeating-linear-gradient(90deg, transparent 0 53px, #c3c6c8 54px 55px), repeating-linear-gradient(0deg, transparent 0 53px, #c3c6c8 54px 55px); mask-image: radial-gradient(ellipse, #000 15%, transparent 72%); will-change: transform; }
.blueprint-visual svg { width: min(70%, 270px); height: auto; aspect-ratio: 1; stroke-width: .7; }
/* A földrajzi blokk stilizált térképe másodlagos vizuális elem: a saját
képarányát tartja, a natív WebP-szélességénél nem nő nagyobbra, és a rács
saját oszlopában marad, ezért nem takarja a szöveget. */
.terkep-visual { display: grid; place-items: center; }
.terkep-visual img { width: 100%; max-width: 400px; height: auto; }
.seo-faults { padding-top: 72px; border-top: 1px solid #e1e1df; }
.fault-list { list-style: none; margin: 0; padding: 8px 0 8px 30px; border-left: 2px solid var(--yellow); display: grid; gap: 15px; }
.fault-list li { position: relative; padding-left: 27px; font-size: 15px; line-height: 1.45; }
.fault-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 11px; height: 2px; background: var(--yellow); }
.brands-box { margin-block: clamp(72px, 8vw, 100px) 64px; padding: 36px 22px 30px; border: 1px solid #e6d5a4; border-radius: 7px; position: relative; }
.brands-box > span { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 0 18px; color: var(--graphite); background: #fff; font-size: 12px; font-weight: 850; text-transform: uppercase; white-space: nowrap; }
.brands-row { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; text-align: center; }
.brands-row b { min-height: 56px; padding-inline: 14px; border-right: 1px solid #e3e3e3; display: grid; place-items: center; font-size: 19px; }
.brands-row b:last-child { border: 0; }
.brands-row small { font-size: 11px; }
.brands-row .ariston { color: #cf1d2a; }
.brands-row .baxi { color: #193983; font-size: 25px; }
.brands-row .immergas { color: #ee4d23; }
.brands-row .junkers { color: #122b58; font-size: 16px; }
.brands-row .junkers small { display: block; font-size: 10px; }
.brands-row .vaillant { color: #087875; }
.seo-convector { padding-top: 72px; border-top: 1px solid #e1e1df; }
.convector-visual svg { width: min(78%, 310px); }
.seo-brands { margin-top: 0; padding-top: 64px; border-top: 1px solid #e1e1df; }
.seo-copy-divided { padding-left: clamp(24px, 4vw, 54px); border-left: 1px solid #d7d9da; }
.process-section { padding-block: clamp(72px, 8vw, 96px); color: #fff; background: radial-gradient(circle at 70% 15%, #2c3033, #111416 72%); position: relative; overflow: hidden; }
.process-section::before { content: ""; position: absolute; inset: 0; opacity: .12; background: repeating-linear-gradient(90deg, transparent 0 90px, #899095 91px 92px), repeating-linear-gradient(0deg, transparent 0 90px, #899095 91px 92px); mask-image: radial-gradient(circle at 20% 40%, #000, transparent 52%); }
.process-section .site-container { position: relative; }
.process-section .seo-copy p { color: #d5d8da; }
.process-intro { margin-bottom: 54px; }
.process-steps { position: relative; }
.process-step { min-height: 210px; padding: 28px 24px; border-top: 1px solid #6b6248; display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 14px; background: linear-gradient(135deg, #1d2124aa, transparent); }
.process-step > strong { color: var(--yellow); font-size: 40px; line-height: 1; }
.process-step > svg { width: 38px; height: 38px; stroke-width: 1.2; }
.process-step h3 { margin: 2px 0 11px; font-size: 20px; }
.process-step p { margin: 0; color: #c7cbcd; font-size: 14px; line-height: 1.55; }
/* Sötét szakmai és bizalmi szekció. Nem véleményblokk: nem tartalmaz
ügyfélidézetet, értékelést és review strukturált adatot. */
.expertise-section { padding-block: clamp(64px, 7vw, 80px); color: #fff; background: radial-gradient(circle at 70% 30%, #2c3033, #111416 75%); }
.expertise-intro { margin-bottom: 42px; }
.expertise-head > span { color: var(--yellow); font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.expertise-head h2 { margin: 10px 0 0; font-size: clamp(29px, 3vw, 38px); line-height: 1.1; font-weight: 850; }
.expertise-copy p { margin: 0; color: #d5d8da; font-size: 16px; line-height: 1.76; }
.expertise-card { height: 100%; padding: 28px 25px 21px; border-radius: 7px; color: #222; background: #fff; box-shadow: 0 8px 24px #0005; display: flex; flex-direction: column; }
.expertise-card h3 { margin: 0 0 14px; font-size: 21px; line-height: 1.2; font-weight: 850; }
.expertise-card p { margin: 0 0 18px; color: #4b4f52; font-size: 15px; line-height: 1.62; }
.expertise-card > span { margin-top: auto; align-self: flex-start; padding-bottom: 2px; border-bottom: 2px solid var(--yellow); color: var(--graphite); font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.quick-help { padding-block: 50px; position: relative; overflow: hidden; background: #fff; }
.quick-hand { position: absolute; right: 0; inset-block: 0; width: 38%; }
/* A kép ![]()
-ként kerül ki a méretezhető srcset miatt; a gradiens ezért kap
z-indexet, különben a DOM-sorrend a kép alá tenné. */
/* A jobb oldali kivágás a szerelőt és a kazánt tartja a képben; a bal
oldali üres fal esik ki, így nincs értelmetlen testrész-levágás. */
.quick-hand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.quick-hand::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, #fff 0 14%, transparent 76%); }
.quick-copy { position: relative; z-index: 2; }
.quick-copy h2 { margin: 8px 0 8px; font-size: clamp(30px, 3vw, 39px); line-height: 1.08; font-weight: 850; }
.quick-copy p { margin: 0; font-size: 15px; line-height: 1.6; }
.quick-help .site-btn { position: relative; z-index: 2; }
.coverage-faq { padding-block: 80px; background: #f5f5f4; }
.coverage-faq .row { --bs-gutter-x: 38px; }
/* A Bootstrap sor negatív oldalmargója a rácsköz fele, ezért a konténer belső
margójánál nagyobb rácsköznél a sor kilóg a konténerből. Ha a belső margó
legalább a fél rácsköz, a sor sosem lép ki; a max-width ugyanennyivel nő,
így a tartalom szélessége nem változik. Ez a megoldás nem támaszkodik
töréspontra és görgetősáv-szélességre. */
.coverage-faq .site-container { max-width: calc(var(--site) + 16px) !important; padding-inline: 20px; }
.coverage-card { min-height: 420px; position: relative; overflow: hidden; border-radius: 7px; background: #1e2224; }
.coverage-photo { position: absolute; inset: 0 0 0 34%; }
/* A végleges szöveg megnyújtotta a kártyát; függőlegesen középre igazítva a
kép a címsor mögé kerülne, ezért az alsó sávban ül. */
.coverage-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom right; }
.coverage-photo::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, #1d2225 0, #1d2225 8%, transparent 58%); }
.coverage-copy { position: relative; z-index: 2; max-width: 62%; padding: 50px 0 50px 36px; color: #fff; }
.coverage-copy p { margin: 14px 0 20px; font-size: 14px; line-height: 1.6; color: #d5d8da; }
.coverage-copy span { color: var(--yellow); }
.coverage-copy h2 { margin: 10px 0 22px; font-size: clamp(31px, 3vw, 40px); line-height: 1.12; }
.coverage-copy ul { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.8; }
.coverage-copy li::before { content: "✓"; margin-right: 10px; color: var(--yellow); }
.small-heading { margin-bottom: 18px; }
.faq-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.faq-accordion { border: 1px solid #ddd; border-radius: 7px; overflow: hidden; }
.faq-accordion .accordion-item { border-bottom: 1px solid #ddd; }
.faq-accordion .accordion-item:last-child { border: 0; }
.faq-accordion .accordion-button { min-height: 75px; padding: 18px 22px; color: #111; background: #fff; box-shadow: none; font-size: 15px; font-weight: 700; }
.faq-accordion .accordion-button::after { width: 13px; height: 13px; background-size: 13px; }
.faq-accordion .accordion-body { padding: 4px 22px 24px; font-size: 15px; line-height: 1.65; }
.site-footer { padding: 74px 0 24px; color: #fff; background: linear-gradient(110deg, #23282b, #111416); }
/* JavaScript nélkül a lebegő hívásgomb nem tud elrejtőzni, ezért ott a lábléc
alatt marad annyi hely, hogy a gomb ne takarjon lényegi tartalmat. */
html:not(.js) .site-footer { padding-bottom: 190px; }
.footer-main { padding-bottom: 50px; }
.footer-brand img { width: 185px; height: auto; }
.footer-brand p { max-width: 280px; margin: 14px 0; color: #d0d2d3; font-size: 13px; line-height: 1.55; }
.site-footer h3 { margin: 0 0 14px; color: var(--yellow); font-size: 12px; text-transform: uppercase; }
.site-footer .footer-main > div > a,
.site-footer .footer-main > div > span { display: flex; align-items: center; gap: 9px; color: #eee; font-size: 13px; line-height: 1.65; }
.site-footer .footer-main > div > a:hover { color: var(--yellow); }
/* A sütibeállítás gomb, nem hivatkozás: nincs mögötte oldal, a hozzájárulás-kezelőt
nyitja. A megjelenése a szomszédos láblécelemekhez igazodik. */
.lablec-suti { padding: 0; border: 0; display: flex; align-items: center; gap: 9px; color: #eee; background: none; font: inherit; font-size: 13px; line-height: 1.65; text-align: left; cursor: pointer; }
.lablec-suti:hover { color: var(--yellow); }
.site-footer .footer-main > div > a svg,
.site-footer .footer-main > div > span svg { width: 17px; height: 17px; color: var(--yellow); }
.footer-call { display: flex; justify-content: center; align-items: flex-start; }
.footer-call > a { width: 150px; min-height: 158px; display: flex !important; flex-direction: column; align-items: center !important; justify-content: flex-start; color: #111 !important; background: transparent; }
.footer-call svg { width: 104px !important; height: 104px !important; min-width: 104px; min-height: 104px; padding: 34px; border-radius: 50%; color: #111 !important; background: var(--yellow); }
.footer-call span { position: static; display: block; width: 140px; margin: -10px auto 0; padding: 8px 10px; border-radius: 5px; color: #111; background: #fff; text-align: center; text-transform: uppercase; line-height: 1.1; transform: none; }
.footer-call b { display: block; font-size: 10px; white-space: nowrap; }
.footer-bottom { padding-top: 22px; border-top: 1px solid #4a4e50; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 40px; color: #b5b8ba; font-size: 11px; }
.floating-call { position: fixed; z-index: 30; right: 64px; bottom: 96px; width: 70px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #111; background: var(--yellow); box-shadow: 0 7px 22px #0005; transition: opacity .28s ease, visibility .28s ease; }
/* A lábléc saját hívóeleme átveszi a szerepet, ezért a lebegő gomb ott
elhalványul és kattinthatatlanná válik; visszagörgetéskor visszatér. */
.floating-call.is-rejtett { opacity: 0; visibility: hidden; pointer-events: none; }
/* A fehér feliratdoboz fehér oldalszakaszon beleolvadt a háttérbe. A hajszálvékony
gyűrű és a kétlépcsős grafit árnyék box-shadow-ként készül, ezért a doboz
geometriája nem változik, és nincs elmozdulás. */
.floating-call span { position: absolute; left: 50%; top: 61px; min-width: 142px; padding: 5px 8px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px #23282b1a, 0 2px 8px #23282b1a, 0 10px 28px #23282b33; font-size: 10px; line-height: 1.2; text-align: center; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); }
.floating-call b { display: block; font-size: 11px; }
/* Figyelemfelhívó jelzés a lebegő hívógombon: ötmásodpercenként egyetlen rövid
csengetés és egy kifutó gyűrű. A mozgás a ciklus első tizedében történik, a
többi idő szünet — így nem válik zavaró, folyamatos animációvá. A feliratdoboz
nem mozdul, ezért a szöveg végig olvasható marad.
A prefers-reduced-motion globális szabálya ezt is kikapcsolja. */
/* A gyűrű negatív z-indexszel a gomb saját háttere és a feliratdoboz MÖGÖTT
fut ki, ezért sem a sárga kört, sem a telefonszámot nem takarja el. A
backwards kitöltés miatt a késleltetés alatt már a kiinduló állapotot
veszi fel: betöltéskor nem villan fel egy álló gyűrű. */
.floating-call::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 50%; border: 2px solid var(--yellow); pointer-events: none; animation: floating-call-gyuru 5s ease-out 3s infinite backwards; }
.floating-call svg { transform-origin: 50% 60%; animation: floating-call-csenges 5s ease-in-out 3s infinite backwards; }
/* Elhalványult állapotban nincs mit jelezni. */
.floating-call.is-rejtett::after, .floating-call.is-rejtett svg { animation: none; }
@keyframes floating-call-gyuru {
0% { transform: scale(1); opacity: .7; }
16% { transform: scale(1.75); opacity: 0; }
100% { transform: scale(1.75); opacity: 0; }
}
@keyframes floating-call-csenges {
0%, 12%, 100% { transform: rotate(0) scale(1); }
2% { transform: rotate(-15deg) scale(1.08); }
4% { transform: rotate(13deg) scale(1.08); }
6% { transform: rotate(-10deg) scale(1.06); }
8% { transform: rotate(7deg) scale(1.04); }
10% { transform: rotate(-4deg) scale(1.02); }
}
.mobile-sticky-actions { display: none; }
/* Hozzájárulás-kezelő fal. Nem