/* ═══ ZSOBUILD-KER KFT. — STÍLUSLAP ═══
   Minden formázás itt van: színek, méretek, elrendezés.
   Az osztálynevek (.hero, .jobs) angolok, mert az index.html-ben is így
   szerepelnek — mindegyik mellett ott a magyar magyarázat. */


/* ═══ 1. BETŰTÍPUSOK ═══ */
/* Saját tárhelyről töltődnek, nem a Google-tól: gyorsabb, és nem kerül adat harmadik félhez. */

@font-face{font-family:'Barlow Condensed';src:url(/fonts/barlowcond-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(/fonts/barlow-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(/fonts/barlow-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}


/* ═══ 2. ALAPÉRTÉKEK ═══ */
/* Minden szín és alapméret egy helyen. Itt átírva az egész oldalon átveszi. */

:root{
  /* színek */
  --black:#0B0B0A;          /* fő fekete: fejléc, sötét szakaszok */
  --asphalt:#161613;        /* aszfalt: gépkártyák, térkép háttere */
  --steel:#232320;          /* acél: képek mögötti üres felület */
  --yellow:#FFC300;         /* márkasárga: gombok, kiemelések */
  --yellow-deep:#E0A800;    /* sötétebb sárga: világos háttéren */
  --concrete:#E4E2DC;       /* beton: az oldal világos háttere */
  --concrete-2:#CFCCC4;     /* sötétebb beton: elválasztó vonalak */
  --ink:#17150F;            /* szövegszín világos háttéren */
  --ink-soft:#55524A;       /* halványabb szöveg világos háttéren */
  --on-dark-soft:#A9A69C;   /* halványabb szöveg sötét háttéren */

  /* betűtípusok */
  --display:'Barlow Condensed',Impact,'Haettenschweiler','Arial Narrow',sans-serif;  /* nagy címek */
  --body:'Barlow','Segoe UI',system-ui,-apple-system,sans-serif;                      /* folyó szöveg */

  /* méretek */
  --pad:clamp(1.25rem,5vw,5rem);   /* oldalsó margó, képernyőmérethez igazodva */
  --gap:clamp(2.5rem,7vw,6rem);    /* szakaszok közti függőleges térköz */
  --maxw:1400px;                   /* a tartalom legnagyobb szélessége */
  --bar:0px;                       /* a mobil hívás-sáv magassága, lásd 21. pont */
}


/* ═══ 3. ALAPBEÁLLÍTÁSOK ═══ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--concrete);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;
  overflow-x:hidden;padding-bottom:var(--bar);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  line-height:.88;letter-spacing:-.015em;margin:0;
  text-wrap:balance;
}

p{margin:0}

/* billentyűzettel navigálóknak: jól látható sárga keret */
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:2px}


/* ═══ 4. ISMÉTLŐDŐ ELEMEK ═══ */

/* .wrap = tartalomdoboz: középre húzza és megfogja a tartalmat */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* .eyebrow = kis felcím a nagy címsor fölött (pl. „SZOLGÁLTATÁSOK") */
.eyebrow{
  font-family:var(--body);font-weight:600;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.2em;
}

/* .stripe = figyelmeztető csík. Az oldal védjegye: a munkagépekről ismerős
   sárga-fekete ferde sáv, szakaszhatárként. */
.stripe{
  height:10px;border:0;margin:0;
  background:repeating-linear-gradient(-45deg,var(--yellow) 0 14px,var(--black) 14px 28px);
  background-size:39.6px 39.6px;
}

/* a --live változat lassan csúszik; aki kikapcsolta az animációkat, annak áll */
@media (prefers-reduced-motion:no-preference){
  .stripe--live{animation:crawl 3s linear infinite}
}
@keyframes crawl{to{background-position:39.6px 0}}


/* ═══ 5. FEJLÉC ═══ */
/* Görgetéskor a tetején ragad, hogy a telefonszám mindig kéznél legyen. */

.hdr{
  position:sticky;top:0;z-index:50;background:var(--black);
  border-bottom:1px solid #2a2a25;
}
.hdr__in{
  max-width:var(--maxw);margin-inline:auto;padding:.55rem var(--pad);
  display:flex;align-items:center;gap:1.5rem;
}

/* logó — magasság szerint méretezve: a benne lévő felirat a rajz
   magasságának 18,4%-a, 62 pixel alatt olvashatatlanná válna */
.logo{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.logo img{height:62px;width:auto;display:block;transition:opacity .2s ease}
.logo:hover img{opacity:.8}

/* menü — csak 900 pixel felett látszik, lásd 21. pont */
.nav{display:none;gap:1.6rem}
.nav a{
  font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--on-dark-soft);text-decoration:none;position:relative;
  display:flex;align-items:center;min-height:44px;
  transition:color .2s ease;
}
/* aláhúzás, ami ráhúzáskor balról jobbra kifut */
.nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--yellow);transition:right .25s ease;
}
.nav a:hover{color:#fff}
.nav a:hover::after{right:0}

/* telefongomb a fejlécben */
.tel-btn{
  display:inline-flex;align-items:center;gap:.55rem;flex:none;
  background:var(--yellow);color:var(--black);text-decoration:none;
  font-family:var(--display);font-size:1.15rem;text-transform:uppercase;
  padding:.5rem 1rem;letter-spacing:.01em;min-height:44px;   /* ujjal is eltalálható */
  transition:background .2s ease,transform .2s ease;
}
.tel-btn svg{width:17px;height:17px;flex:none}
.tel-btn:hover{background:#fff;transform:translateY(-1px)}
.tel-btn span{display:none}   /* a szám csak 600 pixel felett fér ki */


/* ═══ 6. NYITÓKÉPERNYŐ ═══ */
/* Bal oldalon a nagy cím és a telefonszám, jobb oldalon a gép fotója. */

.hero{background:var(--black);color:#fff;position:relative}
.hero__grid{display:grid}

/* bal oldal: szöveg */
.hero__copy{padding:clamp(2.5rem,8vw,5.5rem) var(--pad) clamp(2.5rem,7vw,4.5rem)}
.hero__copy>*+*{margin-top:clamp(1.1rem,2.5vw,1.6rem)}
.hero .eyebrow{color:var(--yellow);display:flex;align-items:center;gap:.7rem}
.hero .eyebrow::before{content:'';width:34px;height:2px;background:var(--yellow);flex:none}
.hero h1{
  font-size:clamp(3.1rem,12.5vw,7.4rem);color:#fff;
  max-width:14ch;
}
.hero h1 em{font-style:normal;color:var(--yellow)}   /* a sárgával kiemelt szavak */
.hero__lead{
  color:#D6D3CA;font-size:clamp(1.02rem,2.3vw,1.2rem);max-width:46ch;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:stretch}


/* ═══ 7. GOMBOK ═══ */
/* --primary = sárga, kitöltött (hívás) · --ghost = csak keretes (másodlagos) */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--display);text-transform:uppercase;text-decoration:none;
  font-size:clamp(1.35rem,4vw,1.7rem);padding:.72rem 1.5rem;
  border:2px solid transparent;transition:background .2s,color .2s,transform .2s,border-color .2s;
}
.btn svg{width:22px;height:22px;flex:none}
.btn--primary{background:var(--yellow);color:var(--black)}
.btn--primary:hover{background:#fff;transform:translateY(-2px)}
.btn--ghost{border-color:#4a4842;color:#fff}
.btn--ghost:hover{border-color:var(--yellow);color:var(--yellow);transform:translateY(-2px)}


/* ═══ 8. NYITÓKÉPERNYŐ — A FOTÓ ═══ */

.hero__media{position:relative;background:var(--steel)}

/* A kép kitölti a panelt, ezért ha az arányok nem egyeznek, vágnia kell.
     0 (függőleges) = a kép TETEJE a panel tetejéhez rögzítve, így felülről
                      soha nem vág — a gém teteje mindig látszik. Ha kell
                      vágni, azt alulról teszi, ahol csak murva van.
     42% (vízszintes) = keskeny képernyőn oldalt vág; balra húzva a gém és a
                      kanál marad meg, a jobb oldali üres beálló tűnik el. */
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:42% 0}

/* képaláírás a fotó alján */
.hero__tag{
  position:absolute;left:0;bottom:0;background:var(--black);color:#fff;
  padding:.7rem 1rem;font-weight:600;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.17em;
  border-top:3px solid var(--yellow);max-width:min(90%,30ch);
}


/* ═══ 9. ÍGÉRET-SÁV ═══ */
/* A három szó a cég saját szórólapjáról. */

.promise{background:var(--yellow);color:var(--black)}
.promise ul{
  max-width:var(--maxw);margin-inline:auto;padding:1rem var(--pad);
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem clamp(1.5rem,5vw,4rem);margin-block:0;
}
.promise li{
  font-family:var(--display);font-size:clamp(1.15rem,3.4vw,1.6rem);
  text-transform:uppercase;display:flex;align-items:center;gap:.55rem;
}
/* elforgatott kis négyzet elválasztónak */
.promise li::before{
  content:'';width:9px;height:9px;background:var(--black);flex:none;
  transform:rotate(45deg);
}


/* ═══ 10. SZAKASZOK KÖZÖS KERETE ═══ */
/* Minden nagy szakasz ezt használja; a --dark változat a fekete hátterű. */

.sec{padding-block:var(--gap)}
.sec--dark{background:var(--black);color:#fff}
.sec--dark .sec__title{color:#fff}

.sec__head{margin-bottom:clamp(2rem,4.5vw,3.2rem);max-width:62ch}
.sec__head .eyebrow{color:var(--ink-soft);display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.sec__head .eyebrow::before{content:'';width:26px;height:2px;background:var(--yellow);flex:none}
.sec--dark .sec__head .eyebrow{color:var(--yellow)}
.sec__title{font-size:clamp(2.2rem,6.5vw,4.2rem)}
.sec__intro{margin-top:1.1rem;color:var(--ink-soft);max-width:56ch}
.sec--dark .sec__intro{color:var(--on-dark-soft)}


/* ═══ 11. SZOLGÁLTATÁSOK ═══ */
/* Szándékosan sorok, nem kártyák: 12 tételnél a sor gyorsabban átfutható,
   főleg telefonon. Olyan, mint egy munkalap. */

.jobs{border-top:2px solid var(--ink);list-style:none;padding:0;margin:0}
.jobs li{border-bottom:1px solid var(--concrete-2)}

.jobs__row{
  display:grid;gap:.15rem .9rem;grid-template-columns:auto 1fr;
  align-items:baseline;padding:1.05rem .6rem 1.05rem .3rem;
  position:relative;transition:padding-left .25s ease,background .25s ease;
}
/* ráhúzáskor sárga csík fut be balról */
.jobs__row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--yellow);transition:width .25s ease;
}
.jobs li:hover .jobs__row{padding-left:1.1rem;background:#DDDBD3}
.jobs li:hover .jobs__row::before{width:5px}

/* elforgatott sárga négyzet a sor elején */
.jobs__mark{
  width:11px;height:11px;background:var(--yellow);flex:none;
  transform:rotate(45deg) translateY(-2px);
  border:1px solid var(--ink);
}
.jobs__name{font-family:var(--display);font-size:clamp(1.5rem,4.4vw,2.05rem);text-transform:uppercase;grid-column:2}
.jobs__desc{grid-column:2;color:var(--ink-soft);font-size:.97rem;line-height:1.55}


/* ═══ 12. GÉPPARK ═══ */
/* Kártyák: fotó + géptípus + rövid leírás. */

.fleet{display:grid;gap:clamp(1.5rem,3.5vw,2.2rem);list-style:none;padding:0;margin:0}
.machine{background:var(--asphalt);border:1px solid #2c2c27;display:flex;flex-direction:column}

.machine__pic{position:relative;background:var(--steel);aspect-ratio:4/3;overflow:hidden}
.machine__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transition:transform .5s cubic-bezier(.2,.6,.3,1)}
.machine:hover .machine__pic img{transform:scale(1.04)}   /* finom ráközelítés */

.machine__body{padding:1.2rem 1.3rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
/* sárga címke: „Minikotró", „Billencs" stb. */
.machine__plate{
  align-self:flex-start;background:var(--yellow);color:var(--black);
  font-weight:600;font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;
  padding:.28rem .6rem;
}
.machine__name{font-family:var(--display);font-size:clamp(1.5rem,4vw,1.95rem);text-transform:uppercase;color:#fff}
.machine__desc{color:var(--on-dark-soft);font-size:.95rem}


/* ═══ 13. GALÉRIA ═══ */
/* Minden kép egy gomb — kattintásra megnyílik a nagyítóban (14. pont). */

.gal{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr);list-style:none;padding:0;margin:0}
.gal li{background:var(--concrete-2)}
.gal button{
  display:block;width:100%;padding:0;border:0;cursor:pointer;position:relative;
  background:var(--concrete-2);aspect-ratio:3/4;overflow:hidden;
}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.3,1)}
.gal button:hover img,.gal button:focus-visible img{transform:scale(1.05)}

/* nagyító-jelvény a sarokban, hogy látszódjon: ide kattintani lehet
   (a háttérkép egy beágyazott ikon, nem külön fájl) */
.gal button::after{
  content:'';position:absolute;right:.55rem;bottom:.55rem;width:34px;height:34px;
  background:var(--yellow) no-repeat center/17px 17px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0A' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.5-4.5M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;
}
.gal button:hover::after,.gal button:focus-visible::after{opacity:1;transform:none}
/* érintőképernyőn nincs „ráhúzás", ezért ott mindig látszik */
@media (hover:none){ .gal button::after{opacity:1;transform:none} }


/* ═══ 14. KÉPNAGYÍTÓ ═══ */
/* A böngésző beépített <dialog> eleme adja a fókuszkezelést és az Esc-et. */

.lb{
  border:0;padding:0;margin:auto;max-width:100vw;max-height:100vh;width:100%;height:100%;
  background:transparent;overflow:hidden;
}
.lb::backdrop{background:rgba(8,8,7,.94)}

/* A görgetészár szándékosan CSS-ben van, nem JavaScriptben: a JS-es megoldás
   beragadhat, ha a dialógus „close" eseménye nem tüzel. Így nem tud. */
body:has(dialog[open]){overflow:hidden}

.lb__stage{
  width:100%;height:100%;display:grid;place-items:center;
  padding:clamp(.75rem,3vw,2.5rem);position:relative;
}
.lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:.9rem;max-height:100%}
.lb__fig img{
  max-width:100%;max-height:calc(100vh - 9rem);width:auto;height:auto;
  object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.lb__cap{
  color:#D6D3CA;font-size:.92rem;text-align:center;max-width:60ch;
  display:flex;align-items:center;gap:.8rem;
}
.lb__count{   /* „2/4" számláló */
  font-family:var(--display);font-size:1.1rem;color:var(--yellow);
  border:2px solid #38382f;padding:.05rem .5rem;flex:none;
}

/* bezárás / előző / következő gombok */
.lb__btn{
  position:absolute;border:0;cursor:pointer;background:var(--yellow);color:var(--black);
  display:grid;place-items:center;width:48px;height:48px;
  transition:background .2s ease,transform .2s ease;
}
.lb__btn:hover{background:#fff;transform:scale(1.06)}
.lb__btn svg{width:24px;height:24px}
.lb__close{top:clamp(.6rem,2vw,1.4rem);right:clamp(.6rem,2vw,1.4rem)}
.lb__prev{left:clamp(.4rem,2vw,1.4rem);top:50%;margin-top:-24px}
.lb__next{right:clamp(.4rem,2vw,1.4rem);top:50%;margin-top:-24px}

@media (max-width:600px){
  .lb__prev{left:.4rem}.lb__next{right:.4rem}
  .lb__fig img{max-height:calc(100vh - 11rem)}
}


/* ═══ 15. MUNKATERÜLET ═══ */
/* Települések kis keretes címkékben; az első (a telephely) sárgával kiemelve. */

.area{display:grid;gap:clamp(1.8rem,4vw,3rem)}
.towns{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.towns li{
  border:1px solid #38382f;color:#D6D3CA;padding:.4rem .8rem;
  font-weight:600;font-size:.82rem;letter-spacing:.04em;
}
.towns li:first-child{background:var(--yellow);color:var(--black);border-color:var(--yellow)}


/* ═══ 16. GYAKORI KÉRDÉSEK ═══ */
/* Lenyíló blokkok. A böngésző <details> eleme csinálja, nincs hozzá JavaScript. */

.faq{display:grid;gap:.6rem;max-width:60rem}
.faq details{background:#DDDBD3;border-left:4px solid var(--yellow)}
.faq summary{
  cursor:pointer;list-style:none;padding:1rem 1.2rem;
  font-family:var(--display);font-size:clamp(1.25rem,3.4vw,1.55rem);
  text-transform:uppercase;display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}   /* a böngésző saját nyilát elrejtjük */
/* helyette „+" jel, ami nyitáskor „×"-szé fordul */
.faq summary::after{content:'+';color:var(--yellow-deep);font-size:1.5em;line-height:1;transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 1.2rem 1.2rem;color:var(--ink-soft);max-width:62ch}


/* ═══ 17. KAPCSOLAT ═══ */

.contact{display:grid;gap:clamp(2rem,5vw,3.5rem)}

/* a nagy, sárga telefonszám */
.contact__big{
  font-family:var(--display);text-transform:uppercase;color:var(--yellow);
  font-size:clamp(2.6rem,9vw,5.2rem);text-decoration:none;display:inline-block;
  line-height:.9;padding-block:.35rem;transition:color .2s ease,transform .2s ease;
}
.contact__big:hover{color:#fff;transform:translateX(4px)}

/* adatlista: cégnév, ügyvezető, telephely, vármegye */
.dl{display:grid;gap:1.4rem;margin:0}
.dl dt{
  font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.19em;
  color:var(--yellow);margin-bottom:.25rem;
}
.dl dd{margin:0;color:#E4E2DC;font-size:1.05rem}
.dl dd a{text-decoration:none;border-bottom:1px solid #4a4842;transition:border-color .2s;display:inline-block;padding-block:.55rem}
.dl dd a:hover{border-color:var(--yellow)}

/* e-mail: a telefon melletti második, jól látható elérhetőség */
.contact__mail{
  display:inline-flex;align-items:center;gap:.9rem;margin-top:1.8rem;
  border:2px solid #4a4842;padding:.85rem 1.3rem;text-decoration:none;color:#fff;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.contact__mail svg{width:30px;height:30px;flex:none;color:var(--yellow)}
.contact__mail small{
  font-weight:600;font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:.25rem;
}
.contact__mail span{
  display:flex;flex-direction:column;line-height:1.1;
  font-family:var(--display);font-size:clamp(1.4rem,4.4vw,1.9rem);text-transform:none;
}
.contact__mail:hover{border-color:var(--yellow);background:#191916;transform:translateY(-2px)}


/* ═══ 18. TÉRKÉP ═══ */

.map{background:var(--asphalt)}
.map__bar{
  max-width:var(--maxw);margin-inline:auto;padding:1.6rem var(--pad);
  display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;justify-content:space-between;
}
.map__addr{
  font-family:var(--display);text-transform:uppercase;color:#fff;
  font-size:clamp(1.5rem,4.5vw,2.2rem);line-height:1;margin-top:.5rem;
}

/* a doboz, amibe a térkép kerül */
.map__slot{
  position:relative;width:100%;height:clamp(300px,45vh,460px);
  border-top:1px solid #2c2c27;background:var(--steel);overflow:hidden;
  max-width:1200px;margin-inline:auto;border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,.7);
}
.map__frame{display:block;width:100%;height:100%;border:0;filter:grayscale(.25) contrast(1.05);border-radius:8px}

/* Helyőrző, amíg a látogató oda nem görget. Aki soha nem jut el idáig, annak
   a gépe egyetlen külső szervert sem keres meg. A rácsos háttér térképet idéz. */
.map__ph{
  position:absolute;inset:0;width:100%;border:0;cursor:pointer;color:#D6D3CA;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  background:
    repeating-linear-gradient(0deg,transparent 0 39px,#2a2a26 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,#2a2a26 39px 40px),
    var(--steel);
  font-family:var(--body);font-size:.9rem;transition:background-color .2s ease;
}
.map__ph svg{width:38px;height:38px;color:var(--yellow)}
.map__ph strong{
  font-family:var(--display);font-size:1.4rem;text-transform:uppercase;color:#fff;letter-spacing:.01em;
}
.map__ph span{
  border:2px solid var(--yellow);color:var(--yellow);padding:.45rem 1rem;
  font-weight:600;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
}
.map__ph:hover span,.map__ph:focus-visible span{background:var(--yellow);color:var(--black)}


/* ═══ 18/b. IMPRESSZUM ÉS ADATKEZELÉS ═══ */
/* Külön oldalon van: impresszum.html. A főoldalról a lábléc visz oda. */

.legal{background:var(--asphalt);color:var(--on-dark-soft)}
.legal .sec__title{color:#fff}
.legal .eyebrow{color:var(--yellow)}
.legal__grid{display:grid;gap:clamp(2rem,4vw,3rem)}
.legal__h{
  font-family:var(--display);font-size:1.5rem;text-transform:uppercase;
  color:var(--yellow);margin-bottom:1rem;
}
.legal__dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.2rem;margin:0;font-size:.92rem}
.legal__dl dt{font-weight:600;color:#fff}
.legal__dl dd{margin:0}
.legal__p{font-size:.92rem;line-height:1.7;max-width:70ch}
.legal__p+.legal__p{margin-top:.9rem}
.legal__p strong{color:#fff}
.legal__p--small{font-size:.82rem;color:#7E7B73;margin-top:1.4rem}
.legal__back{margin-top:2rem}
.legal__dl dd a{color:var(--yellow);text-decoration:none;border-bottom:1px solid #4a4842}
.legal__p a{color:var(--yellow)}

@media (min-width:900px){
  .legal__grid{grid-template-columns:.85fr 1.15fr}
}


/* ═══ 19. LÁBLÉC ═══ */

.ftr{background:var(--black);color:var(--on-dark-soft);font-size:.85rem}
.ftr__in{
  max-width:var(--maxw);margin-inline:auto;padding:1.8rem var(--pad);
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;justify-content:space-between;
}
.ftr a{color:var(--on-dark-soft);text-decoration:none}
.ftr a:hover{color:var(--yellow)}
.ftr nav{display:flex;flex-wrap:wrap;gap:.1rem 1.3rem}
.ftr nav a{display:inline-block;padding-block:.72rem}


/* ═══ 20. MOBIL HÍVÁS-SÁV ═══ */
/* A képernyő aljára ragasztva. Egy ilyen vállalkozásnál ez hozza a legtöbb
   hívást. 900 pixel felett eltűnik (21. pont). */

.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--black);display:block;
}
.callbar__in{display:flex;align-items:stretch;gap:1px;background:#2a2a25}
.callbar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem .5rem;text-decoration:none;background:var(--black);
  font-family:var(--display);font-size:1.3rem;text-transform:uppercase;color:#fff;
}
.callbar a svg{width:19px;height:19px;flex:none}
.callbar a.is-primary{background:var(--yellow);color:var(--black);flex:1.6}   /* a hívás gomb szélesebb */


/* ═══ 21. ANIMÁCIÓK ═══ */
/* Fontos: a .js osztályhoz kötve, amit az index.html fejlécében lévő rövid
   script tesz a lapra. Így ha a JavaScript nem működik, a tartalom nem
   marad láthatatlan. */

@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.6,.3,1)}
  .js .rv.in{opacity:1;transform:none}

  /* a nyitóképernyő szövege betöltéskor lépcsőzetesen úszik be */
  .hero__copy>*{animation:rise .7s cubic-bezier(.2,.6,.3,1) both}
  .hero__copy>*:nth-child(1){animation-delay:.05s}
  .hero__copy>*:nth-child(2){animation-delay:.13s}
  .hero__copy>*:nth-child(3){animation-delay:.21s}
  .hero__copy>*:nth-child(4){animation-delay:.29s}
}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}


/* ═══ 22. KÉPERNYŐMÉRETEK ═══ */
/* Itt dől el, mi hogyan rendeződik át telefonon, tableten, gépen. */

/* 899 pixelig: telefon és kisebb tablet */
@media (max-width:899px){
  :root{--bar:70px}                /* hely a fix hívás-sávnak (csík + 56px sor) */
  .hero__media{aspect-ratio:4/5}   /* álló képsáv a nagy cím alatt */
  .fleet{grid-template-columns:1fr}
}

/* 600 pixel felett: nagyobb telefon, tablet */
@media (min-width:600px){
  .fleet{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  /* a szolgáltatás neve és leírása egymás mellé kerül */
  .jobs__row{grid-template-columns:auto minmax(0,22ch) minmax(0,1fr);align-items:baseline}
  .jobs__name{grid-column:2}
  .jobs__desc{grid-column:3;padding-top:.15rem}
  .tel-btn span{display:inline}   /* itt már kifér a telefonszám a fejlécben */
}

/* 900 pixel felett: asztali gép */
@media (min-width:900px){
  .callbar{display:none}   /* itt már nem kell a mobil hívás-sáv */
  .nav{display:flex}       /* helyette megjelenik a menü */

  /* a nyitóképernyő kettéválik: szöveg | fotó */
  .hero__grid{grid-template-columns:1.15fr .85fr;align-items:stretch;min-height:min(88vh,860px)}
  .hero__copy{display:flex;flex-direction:column;justify-content:center;padding-block:clamp(3rem,6vw,6rem)}
  /* a két oldal határán fut a figyelmeztető csík */
  .hero__media{border-left:10px solid transparent;
    border-image:repeating-linear-gradient(-45deg,var(--yellow) 0 14px,var(--black) 14px 28px) 10}

  .area{grid-template-columns:1fr 1.25fr;align-items:start}
  .contact{grid-template-columns:1.1fr .9fr;align-items:start}
  .dl{grid-template-columns:repeat(2,1fr);gap:1.8rem}
  .gal{grid-template-columns:repeat(4,1fr)}
}

/* 1100 pixel felett: széles képernyő */
@media (min-width:1100px){
  .fleet{grid-template-columns:repeat(4,1fr)}   /* mind a 4 gép egy sorban */
}