/* betűtípusok saját tárhelyről (latin + magyar ékezetek, 2026-11-08) */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-800.woff2) format('woff2')}
/* haztetotisztitas.hu — "Háztetőtisztítás – Banga Endre" országos arculat
   Színek: éjkék #13233A · márkakék #2F5AA8 (a logóból) · égkék #4479D9 · halvány ég #EAF0F9 · papír #FFFFFF · napsárga #F5B700
   Jel: tetőgerinc – a hero alja és a címsorok előtti kis "^" a tető hajlásszögét idézi.
   A sárga csak jelzésre (gerincjel, fókusz, kiemelő sáv), szövegszínként csak sötét háttéren. */

:root{
  --ej:#13233A; --ej-2:#1C3150;
  --kek:#2F5AA8; --kek-v:#4479D9; --eg:#EAF0F9; --eg-2:#D5E1F3;
  --papir:#FFFFFF; --szurke:#5A6472; --vonal:#D9E0EA;
  --nap:#F5B700;
  --max:1180px; --cikk:72ch; --gutter:16px;
  --display:'Barlow Condensed','Arial Narrow',sans-serif;
  --text:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--papir);color:var(--ej);font-family:var(--text);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--kek);text-underline-offset:3px}
a:hover{color:var(--ej)}
:focus-visible{outline:3px solid var(--nap);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ej);color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:8px}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
@media (min-width:700px){:root{--gutter:28px}}

h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;line-height:1.05;color:inherit}
h1{font-size:clamp(38px,5.2vw,64px);letter-spacing:-.005em;font-weight:800;text-transform:uppercase;line-height:.98}
h2{font-size:clamp(28px,3.2vw,38px)}
h3{font-size:22px;line-height:1.2}

/* ---------- fejléc ---------- */
.fejlec{position:sticky;top:0;z-index:50;background:var(--ej);border-bottom:1px solid #22385A}
.fejlec .container{display:flex;align-items:center;gap:18px;min-height:68px}
.marka{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;flex:none}
.marka img{width:52px;height:auto;flex:none;background:#fff;border-radius:7px;padding:3px 4px}
.marka span{font-family:var(--display);font-weight:700;font-size:21px;line-height:1;white-space:nowrap}
.marka small{display:block;font-family:var(--text);font-weight:600;font-size:13px;color:var(--nap);margin-top:3px}
.menu{margin-left:auto;display:flex;align-items:center;gap:4px}
.menu a{color:#DCE6F5;text-decoration:none;font-weight:600;font-size:15.5px;padding:8px 9px;border-radius:6px;white-space:nowrap}
.menu a:hover,.menu a[aria-current]{background:#22385A;color:#fff}
.menu .hivas{background:var(--nap);color:var(--ej);margin-left:8px;padding:9px 14px}
.menu .hivas:hover{background:#FFC933;color:var(--ej)}
.almenu{position:relative}
.almenu>button{background:none;border:0;font:600 15.5px var(--text);color:#DCE6F5;padding:8px 9px;border-radius:6px;cursor:pointer;white-space:nowrap}
.almenu>button::after{content:"";display:inline-block;margin-left:6px;border:5px solid transparent;border-top-color:currentColor;transform:translateY(3px)}
.almenu:hover>button,.almenu:focus-within>button{background:#22385A;color:#fff}
.almenu .lista a{color:var(--ej)}
.almenu .lista a:hover{background:var(--eg);color:var(--kek)}
.almenu .lista{display:none;position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--vonal);border-radius:8px;box-shadow:0 12px 28px rgba(19,35,58,.14);padding:6px}
.almenu:hover .lista,.almenu:focus-within .lista{display:flex;flex-direction:column}
.almenu .lista a{padding:10px 12px}
.menugomb{display:none;margin-left:auto;background:none;border:1px solid #3A5378;border-radius:8px;padding:8px 12px;font:600 15px var(--text);color:#fff;cursor:pointer;min-height:44px}
@media (max-width:1100px){
  .menugomb{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ej);border-bottom:4px solid var(--nap);flex-direction:column;align-items:stretch;padding:8px var(--gutter) 16px;gap:2px}
  .menu.nyitva{display:flex}
  .menu a{padding:12px 10px;font-size:17px}
  .menu .hivas{margin:8px 0 0;text-align:center}
  .almenu>button{display:none}
  .almenu .lista{display:flex;flex-direction:column;position:static;border:0;box-shadow:none;padding:0;min-width:0;background:none}
  .almenu .lista a{color:#DCE6F5}
  .almenu .lista a{padding:12px 10px}
}
@media (max-width:1100px) and (min-width:0){.marka{flex:0 1 auto;min-width:0}.marka span{overflow:hidden;text-overflow:ellipsis}}
@media (max-width:380px){.marka small{display:none}.marka span{font-size:18px}.marka img{width:38px}}

/* ---------- morzsamenü ---------- */
.morzsa{background:var(--ej);color:#B9C6DA;font-size:14.5px}
.morzsa ol{list-style:none;margin:0;padding:10px 0 0;display:flex;flex-wrap:wrap;gap:4px 8px}
.morzsa li+li::before{content:"›";margin-right:8px;color:#6F84A4}
.morzsa a{color:#DCE5F2;text-decoration:none}
.morzsa a:hover{text-decoration:underline;color:#fff}

/* ---------- hero: tetőgerinc alsó éllel ---------- */
.hero{position:relative;background:var(--ej);color:#fff;padding:34px 0 90px;clip-path:polygon(0 0,100% 0,100% calc(100% - 44px),50% 100%,0 calc(100% - 44px))}
.hero .container{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.hero .container{grid-template-columns:1.15fr .85fr}.hero{padding-bottom:110px;clip-path:polygon(0 0,100% 0,100% calc(100% - 72px),50% 100%,0 calc(100% - 72px))}}
.eyebrow{display:inline-block;font-weight:600;font-size:15px;color:var(--ej);background:var(--nap);padding:3px 10px;border-radius:3px;margin-bottom:16px}
.hero h1{max-width:18ch}
.hero .lead{font-size:clamp(18px,1.6vw,21px);color:#D3DDEB;max-width:56ch;margin:18px 0 26px}
.hero-kep{border-radius:6px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.hero-kep img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero-kep figcaption{background:var(--ej-2);color:#AFC0D8;font-size:14px;padding:8px 12px}
.gombok{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:6px;font-weight:700;font-size:17px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-primary{background:var(--nap);color:var(--ej)}
.btn-primary:hover{background:#FFC933;color:var(--ej)}
.btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-secondary:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.vilagos .btn-secondary{color:var(--kek);border-color:var(--kek)}
.vilagos .btn-secondary:hover{background:var(--eg);color:var(--ej)}

/* ---------- cikk + oldalsáv ---------- */
.torzs{padding:40px 0 64px}
.torzs .container{display:grid;gap:44px}
@media (min-width:1000px){.torzs .container{grid-template-columns:minmax(0,1fr) 320px}}
.cikk{max-width:var(--cikk);min-width:0}
.cikk>p:first-child{font-size:20px;color:var(--ej)}
.cikk h2{margin:1.9em 0 .55em;position:relative;padding-top:18px}
.cikk h2::before{content:"";position:absolute;top:0;left:0;width:36px;height:13px;background:var(--nap);clip-path:polygon(0 100%,50% 0,100% 100%,84% 100%,50% 34%,16% 100%)}
.cikk h3{margin:1.4em 0 .4em}
.cikk p,.cikk li{color:#2B3A50}
.cikk ul,.cikk ol{padding-left:1.3em}
.cikk li{margin:.35em 0}
.cikk strong{color:var(--ej)}

.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0}
.stat-card{background:var(--eg);border-radius:6px;padding:16px 14px}
.stat-card .num{display:block;font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,34px);color:var(--kek);line-height:1}
.stat-card .label{display:block;font-size:14.5px;color:var(--szurke);margin-top:6px;line-height:1.35}
@media (max-width:520px){.stat-row{grid-template-columns:1fr}.stat-card{display:flex;align-items:baseline;gap:12px}.stat-card .label{margin:0}}

.callout{border-left:5px solid var(--nap);background:#FFF8E1;padding:16px 20px;margin:1.8em 0;border-radius:0 6px 6px 0}
.callout p{margin:0;color:var(--ej)}

table.compare{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:16.5px}
table.compare th,table.compare td{border-bottom:1px solid var(--vonal);padding:11px 10px;text-align:left;vertical-align:top}
table.compare th{font-family:var(--display);font-size:18px;color:var(--ej);border-bottom:2px solid var(--ej)}
table.compare td:last-child{white-space:nowrap;font-weight:700;color:var(--ej)}

.faq-item{border-top:1px solid var(--vonal);padding:16px 0}
.faq-item:last-of-type{border-bottom:1px solid var(--vonal)}
.faq-item h3{margin:0 0 6px;font-size:21px}
.faq-item p{margin:0}

.cta-box{background:var(--ej);color:#fff;border-radius:8px;padding:30px 26px;margin:2.6em 0 1em}
.cta-box h3{margin:0 0 8px;font-size:28px;color:#fff}
.cta-box p{color:#C9D5E6;margin:0}
.cta-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

.telepules-lista{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px}
.telepules-lista a,.telepules-lista span{display:inline-block;padding:7px 14px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;border:1.5px solid var(--vonal);color:var(--szurke);background:#fff}
.telepules-lista a{border-color:var(--kek);color:var(--kek);background:var(--eg)}
.telepules-lista a:hover{background:var(--kek);color:#fff}
.telepules-lista a[aria-current]{background:var(--ej);border-color:var(--ej);color:#fff}

.kep{margin:1.8em 0}
.kep img{border-radius:6px;width:100%}
.kep figcaption{font-size:15px;color:var(--szurke);margin-top:8px}

/* oldalsáv */
.oldalsav{min-width:0}
.oldalsav .kartya{position:sticky;top:88px;border:1px solid var(--vonal);border-radius:8px;padding:22px;background:#fff}
.oldalsav h2{font-size:26px;margin-bottom:10px}
.oldalsav .arak{list-style:none;margin:0 0 16px;padding:0;font-size:16px}
.oldalsav .arak li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--vonal)}
.oldalsav .arak b{white-space:nowrap}
.oldalsav .btn{width:100%;margin-top:8px}
.oldalsav .btn-secondary{color:var(--kek);border-color:var(--kek)}
.oldalsav .btn-secondary:hover{background:var(--eg);color:var(--ej)}
.oldalsav p{font-size:15px;color:var(--szurke);margin:12px 0 0}
@media (max-width:999px){.oldalsav .kartya{position:static}}

/* helyi-domain jelzés */
.helyi{display:grid;gap:6px;border:2px solid var(--kek);border-radius:8px;padding:20px 22px;margin:1.6em 0;background:var(--eg)}
.helyi strong{font-family:var(--display);font-size:24px}
.helyi a{font-weight:700}

/* ---------- lábléc ---------- */
.lablec{background:var(--ej);color:#B9C6DA;padding:56px 0 28px;font-size:16px;border-top:6px solid var(--nap)}
.lablec .container{display:grid;gap:32px}
@media (min-width:800px){.lablec .container{grid-template-columns:1.1fr 1fr 1.6fr}}
.lablec h2{color:#fff;font-size:22px;margin-bottom:12px}
.lablec a{color:#E3EAF5;text-decoration:none}
.lablec a:hover{text-decoration:underline;color:#fff}
.lablec ul{list-style:none;margin:0;padding:0}
.lablec li{margin:6px 0}
.lablec .megyek{columns:2;column-gap:20px}
.lablec .also{grid-column:1/-1;border-top:1px solid #2C4263;padding-top:18px;font-size:14px;display:flex;flex-wrap:wrap;gap:8px 20px}

/* mobil hívássáv */
.mobilsav{display:none}
@media (max-width:700px){
  .mobilsav{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;box-shadow:0 -4px 14px rgba(0,0,0,.18)}
  .mobilsav a{display:flex;align-items:center;justify-content:center;min-height:54px;font-weight:700;text-decoration:none;font-size:16px}
  .mobilsav .h{background:var(--kek);color:#fff}
  .mobilsav .k{background:var(--nap);color:var(--ej)}
  body{padding-bottom:54px}
}
.hero .container>*,.torzs .container>*{min-width:0}
h1,h2,h3{overflow-wrap:break-word}
@media (max-width:420px){h1,h2{hyphens:auto}}
table.compare{table-layout:auto}
@media (max-width:420px){table.compare{font-size:15px}table.compare td:last-child{white-space:normal}}
.hero-tenyek{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hero-tenyek li{background:var(--ej-2);border-left:4px solid var(--nap);border-radius:0 6px 6px 0;padding:14px 18px;color:#C9D5E6;font-size:17px;line-height:1.4}
.hero-tenyek b{display:block;font-family:var(--display);font-size:26px;color:#fff;line-height:1.1}

/* =====================================================================
   Főoldal és szolgáltatás-oldalak – "Gerinc" (A) terv
   ===================================================================== */
.fo-hero{position:relative;background:var(--ej);color:#fff;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%)}
@media (min-width:900px){.fo-hero{clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%)}}
.fo-hero>img,.fo-hero>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.fo-hero>img.tukor,.fo-hero>picture>img.tukor{transform:scaleX(-1);object-position:12% 100%}
@media (max-width:899px){.fo-hero>picture>img.tukor{object-position:40% 100%}}
.fo-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,35,58,.95) 0%,rgba(19,35,58,.84) 45%,rgba(19,35,58,.35) 78%,rgba(19,35,58,.15) 100%)}
@media (max-width:899px){.fo-hero::after{background:rgba(19,35,58,.82)}}
.fo-hero .container{position:relative;z-index:1;padding-top:72px;padding-bottom:190px}
@media (min-width:900px){.fo-hero .container{padding-top:104px;padding-bottom:250px}}
.fo-hero h1{font-size:clamp(40px,6.2vw,88px);max-width:15ch;margin-bottom:22px}
.fo-hero .lead{font-size:clamp(18px,1.7vw,21px);color:#DCE6F5;max-width:54ch;margin:0 0 32px}
.fo-hero .btn{font-family:var(--display);font-size:21px;min-height:54px;padding:12px 26px}
.szolg-hero h1{font-size:clamp(36px,5vw,70px);max-width:20ch}

.gerinc-stat{position:relative;z-index:2;margin-top:-118px;text-align:center;padding:0 var(--gutter) 24px}
@media (min-width:900px){.gerinc-stat{margin-top:-158px}}
/* mobilon a felirat ne lógjon bele a sötét hero-képbe: sekély bevágás, a cím teljesen a fehér részen */
@media (max-width:899px){.fo-hero{clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 56px),0 100%)}.fo-hero .container{padding-bottom:110px}.gerinc-stat{margin-top:-50px;padding-top:0}.gerinc-stat svg{margin-bottom:22px}}
.gerinc-stat svg{display:block;margin:0 auto 12px}
.gerinc-stat h2{font-size:clamp(24px,2.6vw,30px);margin-bottom:6px}
.gerinc-stat p{margin:0;color:#3A4B66;font-size:17px}
.gerinc-stat b{font-family:var(--display);font-size:26px;color:var(--kek)}

.szakasz{padding:72px 0}
@media (min-width:900px){.szakasz{padding:92px 0}}
.szakasz--eg{background:var(--eg)}
.szakasz--ej{background:var(--ej);color:#fff}
.szakasz--nap{background:var(--nap);color:var(--ej)}
.szakasz h2{font-size:clamp(32px,3.7vw,50px);font-weight:800;text-transform:uppercase;line-height:1.02}
.szakasz-fej{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:end;margin-bottom:40px}
.szakasz-fej h2{flex:1 1 420px}
.szakasz-fej p{flex:1 1 420px;margin:0;font-size:18px;color:#3A4B66;line-height:1.6}
.szakasz--ej .szakasz-fej p{color:#B9C8E2}

.racs{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.szolg-kartya{display:flex;flex-direction:column}
.szolg-kartya img{width:100%;aspect-ratio:4/3;object-fit:cover}
.szolg-kartya h3{font-size:26px;margin:20px 0 10px}
.szolg-kartya p{margin:0 0 16px;color:#3A4B66;line-height:1.6}
.szolg-kartya a.tovabb{margin-top:auto;font-weight:700}

.elo-kartya{background:#fff;display:flex;flex-direction:column}
.elo-kartya img{width:100%;aspect-ratio:3/2;object-fit:cover}
.elo-kartya .belso{padding:22px 24px 26px}
.elo-kartya h3{font-size:32px;font-weight:800;color:var(--kek);margin-bottom:12px}
.elo-kartya dl{margin:0;display:grid;gap:12px;line-height:1.55}
.elo-kartya dt{font-weight:700}
.elo-kartya dd{margin:2px 0 0;color:#3A4B66}

.tipusok{display:grid;grid-template-columns:minmax(0,1fr);border-top:3px solid var(--ej)}
.tipusok>div{padding:22px 0 26px;border-bottom:1px solid var(--vonal)}
@media (min-width:700px){.tipusok{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:22px}}
@media (min-width:1000px){.tipusok{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tipusok img.foto{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;border-radius:4px}
.tipusok svg{display:block}
.tipusok h3{font-size:26px;margin:14px 0 8px}
.tipusok p{margin:0;color:#3A4B66;line-height:1.55}
/* mobilon soronként: kép balra, szöveg jobbra — mind az 5 kép egyforma méretű */
@media (max-width:699px){.tipusok>div{display:grid;grid-template-columns:136px minmax(0,1fr);column-gap:16px;align-items:start;padding:18px 0}.tipusok img.foto{grid-row:1/span 2}.tipusok h3{font-size:21px;margin:0 0 4px}.tipusok p{font-size:15.5px}}
.nem-vallaljuk{margin:22px 0 0;font-size:17px;color:#3A4B66}

.ref-racs{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin:0;padding:0;list-style:none}
.ref-racs figure{margin:0}
.ref-racs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px}
.ref-racs--szeles img{aspect-ratio:16/9}
.ref-racs figcaption{font-family:var(--display);font-size:20px;font-weight:700;margin-top:10px}
.szakasz--ej a{color:var(--nap)}

.kalk .container{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center}
.kalk h2{font-size:clamp(28px,3.2vw,44px);text-transform:none;margin-bottom:8px}
.kalk p{margin:0;font-size:19px}
.kalk .szoveg{flex:1 1 480px}
.kalk .gombok .btn{font-family:var(--display);font-size:21px}
.btn-ej{background:var(--ej);color:#fff}
.btn-ej:hover{background:#22385A;color:#fff}
.btn-keret{border-color:var(--ej);color:var(--ej)}
.btn-keret:hover{background:rgba(19,35,58,.08);color:var(--ej)}

.kiemelt .container{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:center}
.kiemelt .kepek{flex:1 1 440px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kiemelt .kepek img{width:100%;aspect-ratio:3/4;object-fit:cover}
.kiemelt .kepek img+img{margin-top:48px}
.kiemelt .szoveg{flex:1 1 420px}
.kiemelt .szoveg p{font-size:19px;color:#3A4B66;line-height:1.65}
.kiemelt .teljesitmeny{font-family:var(--display);font-size:30px;font-weight:700;color:var(--kek);line-height:1.15}

.velemenyek blockquote{margin:0;background:#fff;padding:26px 26px 24px;border-radius:4px}
.velemenyek .csillag{color:#B98A00;letter-spacing:3px;font-size:19px;margin:0 0 10px}
.velemenyek blockquote p{margin:0;font-size:17px;line-height:1.6}

.gyik-lista{max-width:900px}
.gyik-lista details{border-top:2px solid var(--ej)}
.gyik-lista details:last-child{border-bottom:2px solid var(--ej)}
.gyik-lista summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:700;font-size:19px;line-height:1.35}
.gyik-lista summary::-webkit-details-marker{display:none}
.gyik-lista summary::after{content:"+";color:var(--kek);font-size:30px;line-height:.8;flex:none;transition:transform .2s}
.gyik-lista details[open] summary::after{transform:rotate(45deg)}
.gyik-lista details p{margin:0 0 20px;color:#3A4B66;line-height:1.65}
.gyik-lista h3{font:inherit;margin:0}

/* szolgáltatás-oldal cikk */
.cikk .alcim{font-size:20px;color:var(--ej);font-weight:600}
.cikk .parameter{border-left:4px solid var(--kek-v);padding:4px 0 4px 16px;margin:14px 0}
.tabla-doboz{overflow-x:auto;margin:1.4em 0}
.tabla-doboz table.compare{min-width:520px;margin:0}
table.compare td:last-child{white-space:normal}
table.compare td:nth-child(2){color:var(--szurke)}
.cikk figure.szinskala{margin:1.8em 0;max-width:420px}
.velemenyek blockquote{display:flex;flex-direction:column}
.velemenyek .ki{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;font-size:15px;line-height:1.35}
.velemenyek .ki b{font-family:var(--display);font-size:19px}
.velemenyek .ki span{color:var(--szurke)}

/* ---------- egyéb oldalak ---------- */
@media (min-width:900px){.hero--egy .container{grid-template-columns:1fr}.hero--egy h1{max-width:22ch}}
.cikk-meta{font-size:15px;color:var(--szurke);margin:0 0 1.2em}
.tovabbi-cikkek{margin-top:3em;border-top:3px solid var(--ej);padding-top:8px}
.tovabbi-cikkek ul{list-style:none;padding:0;margin:0}
.tovabbi-cikkek li{border-bottom:1px solid var(--vonal);margin:0}
.tovabbi-cikkek a{display:block;padding:12px 0;font-weight:600;text-decoration:none}
.tovabbi-cikkek a:hover{text-decoration:underline}

.blog-racs{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.blog-kartya{display:flex;flex-direction:column;border-top:6px solid var(--kek);background:#fff}
.blog-kartya img{width:100%;aspect-ratio:16/10;object-fit:cover}
.blog-kartya .belso{display:flex;flex-direction:column;flex:1;padding:18px 0 4px}
.blog-kartya .cimke{align-self:flex-start;font-weight:700;font-size:14px;color:var(--ej);background:var(--nap);padding:2px 10px;border-radius:3px}
.blog-kartya h2{font-size:25px;line-height:1.15;margin:12px 0 8px;text-transform:none;font-weight:700}
.blog-kartya h2 a{color:var(--ej);text-decoration:none}
.blog-kartya h2 a:hover{color:var(--kek)}
.blog-kartya p{margin:0 0 14px;color:#3A4B66;line-height:1.6;font-size:17px}
.blog-kartya .tovabb{margin-top:auto;font-weight:700}

.urlap-szakasz{background:var(--eg)}
.urlap-doboz{max-width:880px;margin:0 auto;background:#fff;border-top:6px solid var(--nap);box-shadow:0 18px 40px -24px rgba(19,35,58,.45);padding:clamp(8px,2vw,24px)}
.urlap-tel{text-align:center;margin:22px 0 0;font-size:17px}
.urlap-tel a{font-weight:700}

.video-sor{display:flex;flex-wrap:wrap;gap:28px;justify-content:center}
.video-sor--szeles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.video{margin:0;width:100%}
.video>div{position:relative;border-radius:6px;overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{font-family:var(--display);font-size:20px;font-weight:700;margin-top:10px;text-align:center}

.lepesek{list-style:none;margin:0;padding:0;display:grid;gap:0 48px;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));counter-reset:l}
.lepesek li{counter-increment:l;position:relative;padding:26px 0 26px 76px;border-top:1px solid var(--vonal)}
.lepesek li::before{content:counter(l);position:absolute;left:0;top:22px;width:54px;height:54px;display:grid;place-items:center;background:var(--ej);color:var(--nap);font-family:var(--display);font-weight:800;font-size:28px;clip-path:polygon(50% 0,100% 38%,100% 100%,0 100%,0 38%)}
.lepesek h3{font-size:24px;margin:0 0 6px}
.lepesek p{margin:0;color:#3A4B66;line-height:1.6}

.terulet-racs{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.terulet-kartya{border-top:5px solid var(--kek);background:var(--eg);padding:18px 20px 20px}
.terulet-kartya h2{font-size:22px;line-height:1.2;text-transform:none;font-weight:700;margin:0 0 10px}
.terulet-kartya h2 a{color:var(--ej);text-decoration:none}
.terulet-kartya h2 a:hover{color:var(--kek);text-decoration:underline}
.terulet-kartya ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.terulet-kartya li a{display:inline-block;padding:4px 11px;border-radius:999px;background:#fff;border:1.5px solid var(--kek);font-weight:600;font-size:15px;text-decoration:none}
.terulet-kartya li a:hover{background:var(--kek);color:#fff}
.terulet-kartya p{margin:0;font-size:16px}

.jogi{max-width:80ch}
.jogi h2{font-size:24px}
.jogi p{margin:.5em 0}
.helyi span{color:#3A4B66}

/* Rólam – portré */
.rolam .container{display:flex;flex-wrap:wrap;gap:40px 64px;align-items:center}
.portre{flex:0 1 380px;margin:0;position:relative}
.portre img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px 6px 0 0;border-bottom:8px solid var(--nap);box-shadow:0 26px 50px -24px rgba(0,0,0,.6)}
.rolam .container{position:relative;z-index:0}
.portre figcaption{margin-top:16px;display:flex;flex-direction:column;line-height:1.25}
.portre figcaption b{font-family:var(--display);font-size:28px;color:#fff}
.portre figcaption span{color:#B9C8E2}
.rolam .szoveg{flex:1 1 420px}
.rolam h2{margin-bottom:18px}
.rolam .idezet{font-size:clamp(20px,2vw,26px);line-height:1.5;color:#fff;margin:0 0 28px;border-left:5px solid var(--nap);padding-left:22px}
.rolam-tenyek{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-wrap:wrap;gap:12px 36px;color:#B9C8E2}
.rolam-tenyek b{display:block;font-family:var(--display);font-size:34px;color:var(--nap);line-height:1}

.szakasz--ej a.btn-primary{color:var(--ej)}
.szakasz--ej a.btn-primary:hover{color:var(--ej)}

/* képek: ne vágjuk le őket – a teljes kép látszódjon a keretben (természetes képarány) */
.szolg-kartya img,.elo-kartya img,.ref-racs img,.ref-racs--szeles img,.blog-kartya img,.kiemelt .kepek img,.hero-kep img,.kep img{aspect-ratio:auto;height:auto;object-fit:contain}
.ref-racs,.racs,.blog-racs{align-items:start}
.kiemelt .kepek{align-items:start}
.szolg-kartya,.blog-kartya{align-self:stretch}
.szolg-kartya img,.blog-kartya img{background:transparent}