/* ============================================================
   PORTFÓLIÓ-SPECIFIKUS KOMPONENSEK
   A stilus.css (világos alaprendszer) és a premium.css (éjkék-arany réteg)
   fölé épül. Csak azt tartalmazza, ami ehhez az oldalszerkezethez kell.
   ============================================================ */

/* ---------- fejléc-telefon ---------- */
.fejlec-telefon{
  font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 20,'WONK' 0,'opsz' 24;
  font-size:16px;text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap;
  letter-spacing:.01em;transition:color .2s;
}
.fejlec-telefon:hover{color:var(--rez)}
@media(max-width:700px){.fejlec-telefon{display:none}}

.vissza-link{font-size:13.5px;color:var(--halvany);text-decoration:none;transition:color .2s}
.vissza-link:hover{color:var(--tinta)}

/* ---------- LUXUS FŐBANNER ---------- */
.banner{
  min-height:min(84vh,760px);display:flex;align-items:center;
  padding:clamp(60px,9vw,120px) 0 clamp(48px,7vw,96px);
}
.banner-tart{width:100%}
.banner h1{
  margin-top:20px;font-size:clamp(40px,7.4vw,84px);line-height:1.02;
  letter-spacing:-.02em;max-width:13ch;
}
.banner-alcim{
  margin-top:26px;max-width:52ch;font-size:clamp(16px,1.75vw,19.5px);line-height:1.62;
}
.banner-gombok{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(30px,4vw,44px)}
.banner-adatok{
  display:flex;gap:clamp(28px,5vw,68px);flex-wrap:wrap;
  margin-top:clamp(44px,6vw,80px);padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--ej-vonal-halk);
}
.banner-adatok b{
  display:block;font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'SOFT' 20,'WONK' 0,'opsz' 40;
  font-size:clamp(28px,3.6vw,44px);line-height:1;font-weight:500;font-variant-numeric:tabular-nums;
}
.banner-adatok span{
  display:block;margin-top:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ej-szoveg-halk);max-width:18ch;line-height:1.45;
}

/* ---------- szakasz-fejek ---------- */
.szakasz-fej{
  display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(20px,3vw,44px);
  flex-wrap:wrap;margin-bottom:clamp(32px,4vw,52px);
}
.szakasz-fej h2{margin-top:12px}
.szakasz-bevezeto{max-width:46ch;color:var(--szurke);font-size:15.5px;margin:0}

/* ---------- PORTFÓLIÓ-KÁRTYA ---------- */
.tetel-racs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,44px)}
@media(max-width:820px){.tetel-racs{grid-template-columns:1fr}}

.tetel{
  text-decoration:none;display:flex;flex-direction:column;
  background:var(--papir);border:1px solid var(--vonal);
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.tetel:hover{border-color:var(--rez);transform:translateY(-3px);box-shadow:0 18px 44px -28px rgba(23,21,31,.4)}
.tetel-kep{position:relative;overflow:hidden;background:var(--vonal)}
.tetel-kep img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.tetel:hover .tetel-kep img{transform:scale(1.035)}
.tetel-szam{
  position:absolute;left:0;top:0;background:var(--tinta);color:var(--krem);
  font-size:11px;letter-spacing:.16em;font-weight:650;padding:8px 13px;
}
.tetel-torzs{padding:22px 24px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.tetel-fej{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:4px}
.tetel h3{font-size:clamp(21px,2.2vw,26px)}
.tetel-alcim{font-size:14.5px;color:var(--rez);font-weight:600;margin:0}
.tetel-mondat{font-size:15px;color:var(--szurke);margin-top:8px;flex:1}
.tetel-lab{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--vonal);
}
.tetel-ar{
  font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 20,'WONK' 0,'opsz' 30;
  font-size:22px;font-variant-numeric:tabular-nums;color:var(--tinta);
}
.tetel-adat{font-size:13px;color:var(--halvany);font-variant-numeric:tabular-nums}

/* állapot-jelölés */
.allapot.terv{border-color:var(--rez);color:var(--rez)}

/* ---------- kép-jelölések ---------- */
.kep-jel{
  position:absolute;left:0;bottom:0;z-index:3;
  background:var(--tinta);color:#fff;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;padding:7px 11px;font-weight:600;
}
.kep-jel.most{background:#fff;color:var(--tinta)}

/* ---------- ingatlan-oldal fejrésze ---------- */
.hero-kep{position:relative;margin:0}
.hero-kep img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--vonal)}
@media(max-width:700px){.hero-kep img{aspect-ratio:4/3}}
.hero-jel{
  position:absolute;left:0;bottom:0;background:var(--tinta);color:#fff;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;padding:9px 15px;font-weight:600;
}
.hero-jel.most{background:#fff;color:var(--tinta)}

.cim-sor{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.cim-alcim{
  margin-top:12px;font-size:clamp(16px,1.8vw,19px);color:var(--rez);font-weight:600;
  letter-spacing:.01em;
}
.itelet{
  margin-top:24px;font-size:clamp(17px,2vw,21px);line-height:1.5;
  color:var(--tinta-lagy);max-width:48ch;
}

/* ---------- kép-rács: párok és galéria ---------- */
.kep-racs{display:flex;flex-direction:column;gap:clamp(26px,3.2vw,44px)}
.par{margin:0}
.par-kepek{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
@media(max-width:620px){.par-kepek{grid-template-columns:1fr}}
.par-kep{position:relative}
.par-kep img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--vonal)}
.par figcaption,.galeria-kep figcaption{
  margin-top:12px;font-size:14px;color:var(--szurke);line-height:1.45;max-width:62ch;
}
.par figcaption{
  font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 20,'WONK' 0,'opsz' 20;
  font-size:17px;color:var(--tinta);
}
.galeria-kep{margin:0}
.galeria-kep img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--vonal)}
@media(min-width:760px){
  .kep-racs{display:grid;grid-template-columns:1fr 1fr}
  .kep-racs .par{grid-column:span 2}
  .kep-racs .galeria-kep:nth-child(3n+1){grid-column:span 2}
  .kep-racs .galeria-kep:nth-child(3n+1) img{aspect-ratio:21/9}
}

/* ---------- a többi kialakítás ---------- */
.mas-racs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  margin-top:clamp(28px,3.4vw,44px)}
@media(max-width:820px){.mas-racs{grid-template-columns:1fr}}
.mas-tetel{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--ej-kartya);border:1px solid var(--ej-vonal-halk);
  transition:border-color .3s,transform .3s;
}
.mas-tetel:hover{border-color:var(--arany);transform:translateY(-3px)}
.mas-tetel img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.mas-tetel > div{padding:16px 18px 20px;display:flex;flex-direction:column;gap:4px}
.mas-tetel h4{color:#fff;font-size:17px;margin-top:6px}
.mas-tetel p{font-size:13.5px;color:var(--ej-szoveg-halk);margin:0}
.mas-ar{
  margin-top:10px;font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'SOFT' 20,'WONK' 0,'opsz' 24;
  font-size:17px;color:var(--arany);font-variant-numeric:tabular-nums;
}

/* ---------- nyomtatás ---------- */
@media print{
  .banner{min-height:auto;padding:20pt 0}
  .banner-adatok,.mas-racs,.ugropontok{display:none}
  .tetel-racs,.kep-racs,.par-kepek{display:block}
  .par{break-inside:avoid;margin-bottom:14pt}
  .hero-kep img{aspect-ratio:21/9;max-height:9cm}
}

/* ---------- 3D HÁZNÉZET ---------- */
.h3d{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(18px,2.4vw,32px);align-items:start;
  margin-top:clamp(26px,3.2vw,40px)}
@media(max-width:900px){.h3d{grid-template-columns:1fr}}
.h3d-vaszon{position:relative;min-width:0;background:linear-gradient(160deg,#0A1428 0%,#0E1B33 55%,#0A1730 100%);
  border:1px solid var(--ej-vonal);aspect-ratio:16/11;overflow:hidden;
  box-shadow:inset 0 0 80px -20px rgba(0,0,0,.7)}
@media(max-width:900px){.h3d-vaszon{aspect-ratio:4/3}}
.h3d-vaszon canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.h3d-vaszon canvas:active{cursor:grabbing}
.h3d-vaszon canvas:focus-visible{outline:2px solid var(--arany);outline-offset:-2px}
.h3d-sugo{position:absolute;left:12px;bottom:12px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(239,234,224,.5);pointer-events:none}

.h3d-panel{display:flex;flex-direction:column;gap:16px;min-width:0;
  background:rgba(255,255,255,.035);border:1px solid var(--ej-vonal-halk);padding:20px 20px 18px}
.h3d-vezerlo{display:flex;flex-direction:column;gap:12px;padding-bottom:16px;
  border-bottom:1px solid var(--ej-vonal-halk)}
.h3d-sor{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.h3d-cimke{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ej-szoveg-halk);width:100%}
.h3d-gomb{font:inherit;font-size:12px;letter-spacing:.06em;background:rgba(255,255,255,.05);
  border:1px solid var(--ej-vonal-halk);color:var(--ej-szoveg);padding:8px 13px;cursor:pointer;
  transition:all .2s}
.h3d-gomb:hover{border-color:var(--arany)}
.h3d-gomb[aria-pressed="true"]{background:var(--arany-lagy);color:#20180A;border-color:transparent;font-weight:650}
.h3d-csuszka{width:100%;accent-color:#C9A96A;cursor:pointer}
.h3d-info h3{font-size:20px;color:#fff}
.h3d-adat{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--arany);
  margin-top:6px;font-variant-numeric:tabular-nums}
.h3d-kep{position:relative;margin-top:14px}
.h3d-kep img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:rgba(0,0,0,.3)}
.h3d-labjegyzet{font-size:12px;color:var(--ej-szoveg-halk);line-height:1.5;margin-top:auto;
  padding-top:14px;border-top:1px solid var(--ej-vonal-halk)}

/* ---------- fotó-bejárás csík ---------- */
.bejaras-sav{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(12px,1.6vw,20px);margin-top:clamp(24px,3vw,36px)}
.bejaras-lepes{position:relative;text-decoration:none;display:block}
.bejaras-lepes img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--vonal);
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.bejaras-lepes:hover img{transform:scale(1.04)}
.bejaras-lepes span{position:absolute;left:0;bottom:0;background:var(--tinta);color:#fff;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;font-weight:600}

/* ============================================================
   FŐOLDAL — HERO, BEMUTATKOZÁS, LÉPÉSEK
   ============================================================ */

/* ---------- HERO: a kép a szolgáltatás, nem díszlet ---------- */
.hero-uj{position:relative;min-height:calc(100svh - var(--fejlec-magassag,66px));display:flex;align-items:flex-end;
  overflow:hidden;background:#080F1E}
/* A .kep-jel alapból left:0;bottom:0 — ezeket kötelező visszavenni, különben a
   címke kifeszül az egész szekcióra és eltakarja a képet. */
.hero-uj-jel{position:absolute;top:calc(var(--fejlec-magassag,72px) + 18px);right:24px;
  left:auto;bottom:auto;z-index:4}
/* saját név: a .hero-kep az ingatlan-oldalé, ott 16/9 arányt ad az img-nek */
.hero-uj-kep{position:absolute;inset:0}
.hero-uj-kep img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:auto}
/* a szöveg bal alul ül, ezért ott sűrűbb a fátyol — a kép jobb, kész fele szabadon marad */
/* A szöveg az ALSÓ sávban ül, mert a képnek ott a legsötétebb harmada (mérve:
   0,05-0,19 luminancia, szemben a középső sáv 0,36-0,51 értékével). Így elég egy
   enyhe fátyol, és a kép közepe - az átmenet nyersből készbe - végig látszik.
   Mért kontraszt ezzel: arany 6,3:1, fehér 6,7:1, alcím 16,5:1. */
.hero-uj::after{content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(100deg,rgba(8,15,30,.46) 0%,rgba(8,15,30,.26) 52%,
             rgba(8,15,30,.04) 100%),
             linear-gradient(0deg,rgba(8,15,30,.93) 0%,rgba(8,15,30,.76) 22%,
             rgba(8,15,30,.26) 40%,rgba(8,15,30,0) 56%)}
.hero-uj-tart{position:relative;z-index:3;padding-bottom:clamp(28px,4.5vh,52px);
  /* A felső térköz csak a fejlécet kerüli ki. Korábban fix 120-200px volt, és egy
     alacsonyabb ablakban ez tolta ki a szöveg alját a képernyő alá. */
  padding-top:clamp(20px,6vh,72px)}
.hero-uj h1{font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'SOFT' 10,'WONK' 1,'opsz' 72;
  font-size:clamp(32px,min(5.2vw,7.1vh),68px);line-height:1.06;font-weight:300;letter-spacing:-.025em;
  color:#fff;margin:14px 0 0;max-width:17ch}
.hero-uj-alcim{color:rgba(239,234,224,.86);font-size:clamp(15px,min(1.6vw,2.05vh),18px);line-height:1.62;
  max-width:54ch;margin:20px 0 0}
.hero-uj .banner-gombok{margin-top:clamp(22px,3vh,32px)}
.hero-uj-gorget{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:3;
  color:rgba(239,234,224,.5);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:9px}
.hero-uj-gorget i{width:1px;height:34px;background:linear-gradient(rgba(201,169,106,0),rgba(201,169,106,.9))}
@media(max-width:760px){
  .hero-uj::after{background:linear-gradient(180deg,rgba(8,15,30,.72) 0%,rgba(8,15,30,.86) 55%,rgba(8,15,30,.95) 100%)}
  .hero-uj-gorget{display:none}
}

/* ---------- BEMUTATKOZÁS: a portré és a hitvallás ---------- */
.bemutatkozas{padding-top:clamp(52px,7vh,84px);padding-bottom:clamp(52px,7vh,84px)}
/* a fotó szándékosan keskeny: a szekció így nem nyúlik el, és a szöveg viszi a hangsúlyt */
.bemutat-racs{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,1fr);
  gap:clamp(30px,4vw,58px);align-items:center;position:relative;z-index:2}
.bemutat-kep{margin:0;position:relative;border-radius:3px;overflow:hidden}
.bemutat-kep img{width:100%;height:auto;display:block}
/* a stúdióháttér kékesszürke, az oldalé éjkék — ez a fátyol köti össze a kettőt */
.bemutat-kep::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,18,31,.30) 0%,rgba(11,18,31,0) 26%,
             rgba(11,18,31,0) 62%,rgba(11,18,31,.86) 100%),
             radial-gradient(120% 80% at 50% 40%,rgba(11,18,31,0) 52%,rgba(11,18,31,.55) 100%)}
.bemutat-szoveg h2{font-family:'Fraunces',Georgia,serif;font-size:clamp(28px,4vw,50px);
  font-weight:300;line-height:1.1;letter-spacing:-.02em;color:#fff}
.bemutat-szoveg p{color:rgba(239,234,224,.78);font-size:clamp(15px,1.55vw,16.5px);
  line-height:1.72;max-width:60ch;margin:15px 0 0}
.bemutat-adatok{margin-top:26px;padding-top:22px;border-top:1px solid rgba(201,169,106,.22)}
.bemutat-adatok div{display:flex;flex-direction:column;gap:8px}
.bemutat-adatok b{font-family:'Fraunces',Georgia,serif;font-size:clamp(18px,2vw,22px);
  font-weight:400;line-height:1.25}
.bemutat-adatok span{color:rgba(239,234,224,.74);font-size:14.5px;line-height:1.68;
  letter-spacing:0;text-transform:none;max-width:58ch}
@media(max-width:900px){
  .bemutat-racs{grid-template-columns:1fr}
  .bemutat-kep{max-width:320px}
}

/* ---------- A NÉGY LÉPÉS ---------- */
.lepesek{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,36px);
  margin-top:clamp(34px,4.5vw,56px)}
.lepes{border-top:1px solid rgba(11,18,31,.16);padding-top:22px;min-width:0}
.lepes-szam{font-size:11px;letter-spacing:.2em;color:#8A7340}
.lepes h3{font-family:'Fraunces',Georgia,serif;font-size:clamp(19px,2vw,23px);font-weight:400;
  margin:10px 0 10px;line-height:1.2}
.lepes p{font-size:15px;line-height:1.7;color:rgba(20,28,42,.74);margin:0}
@media(max-width:960px){.lepesek{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lepesek{grid-template-columns:1fr}}

/* ---------- PORTFÓLIÓ: négy egy sorban ---------- */
.tetel-racs.negyes{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,26px)}
.tetel-racs.negyes .tetel-kep{aspect-ratio:4/3}
.tetel-racs.negyes .tetel-torzs{padding:20px 20px 24px}
.tetel-racs.negyes h3{font-size:clamp(18px,1.7vw,22px);line-height:1.18}
.tetel-racs.negyes .tetel-alcim{font-size:13.5px}
.tetel-racs.negyes .tetel-mondat{font-size:14px;line-height:1.62}
.tetel-racs.negyes .tetel-lab{flex-wrap:wrap;gap:6px}
.tetel-racs.negyes .tetel-ar{font-size:16.5px}
.tetel-racs.negyes .tetel-adat{font-size:11px}
@media(max-width:1180px){.tetel-racs.negyes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.tetel-racs.negyes{grid-template-columns:1fr}}

/* A .arany-szoveg gradiense sötétbarnával indul és végződik (#8C6B2F) — sötét éjkéken
   ez még elmegy, de a hero fényképe fölött csak 1,36:1-et ad, ami olvashatatlan.
   Itt ezért egyszínű, világosabb arany megy: mérve 4,1:1 a legvilágosabb 10%-on. */
.hero-uj h1 .arany-szoveg{
  background:none;animation:none;color:#E4C77E;-webkit-text-fill-color:#E4C77E}

/* ---------- visszafogott lábléc ---------- */
.halk-lablec{padding:36px 0 40px}
.halk-lablec .zaras{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;
  justify-content:space-between;border-top:0;padding-top:0}
.lablec-jogi{display:flex;flex-wrap:wrap;gap:6px 22px}
.lablec-jogi a{font-size:13px}
.lablec-jeloles{margin:18px 0 0;font-size:12.5px;line-height:1.6;
  color:rgba(244,242,236,.5);max-width:80ch}

/* A kártya két apró szövege nem érte el a 4,5:1-et világos alapon (alcím 3,18:1,
   adatsor 2,85:1 — mérve). Sötétebb réz és szürke, hogy kis méretben is olvasható legyen. */
.tetel-alcim{color:#7A6842}
.tetel-adat{color:#6E6A66}
/* a terv-állapot címkéje is a rézzel ment (3,18:1) — ugyanaz a sötétebb árnyalat */
.allapot.terv{border-color:#7A6842;color:#7A6842}

/* A --halvany (11px-es helymegjelölés) és az alap állapot-címke 2,85 és 3,18:1-et adott
   a kártya világos alapján — kis szövegnél 4,5:1 a küszöb. Csak a kártyán belül sötétítünk,
   hogy a halvány szürke máshol megmaradjon díszítő szerepben. */
.tetel .eyebrow.halk{color:#6E6A66}
.tetel .allapot{color:#4A4640;border-color:#4A4640}
.tetel .allapot.terv{color:#7A6842;border-color:#7A6842}

/* Világos alapon a --rez (#9E8B63) 11px-es ritkított nagybetűvel csak 2,96:1 —
   kis szöveg, tehát 4,5:1 a küszöb. Sötét szekcióban marad az arany. */
.szakasz:not(.ejjel) .eyebrow{color:#7A6842}
.lepes-szam{color:#6E5B33}
/* a lábléc jelölése 2,66:1 volt a sötét alapon */
.lablec-jeloles{color:rgba(244,242,236,.72)}
/* a jelölés-megjegyzések (.apro) világos alapon 2,66:1-et adtak — ezek jogilag fontos
   szövegek, nem díszítés: legyenek olvashatók */
.szakasz:not(.ejjel) .apro{color:#5C5852}

/* ============================================================
   PORTFÓLIÓ-BLOKKOK — váltakozva, egymás alatt
   ------------------------------------------------------------
   Nincs egymásra csúszás: minden blokk a maga helyén marad, és a kép
   oldala soronként vált. A mozgást a klip adja, plusz egy visszafogott
   belépés és enyhe parallax a médián.
   ============================================================ */
.p-lanc{position:relative;margin-top:clamp(34px,4.5vw,60px);
  display:flex;flex-direction:column;gap:clamp(46px,7vh,96px)}
/* az összekötő vonal a blokkok között fut */
.p-vonal{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
  background:rgba(23,21,31,.07);overflow:hidden;z-index:0}
.p-vonal i{display:block;width:100%;height:100%;transform-origin:top;transform:scaleY(0);
  background:linear-gradient(180deg,rgba(201,169,106,0),#C9A96A 12%,#8C6B2F);
  transition:transform .12s linear}
@media(max-width:900px){ .p-vonal{left:0;margin-left:0} }

.p-blokk{position:relative;z-index:1;background:var(--krem);
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(24px,3.4vw,54px);align-items:center}
/* soronként vált az oldal */

.p-media{position:relative;overflow:hidden;border-radius:4px;background:var(--vonal);
  aspect-ratio:4/3;box-shadow:0 34px 70px -50px rgba(23,21,31,.6)}
.p-media video,.p-media img.p-ken{position:absolute;inset:-4% 0;width:100%;height:108%;
  object-fit:cover;display:block;will-change:transform}
.p-media img.p-ken{animation:p-ken 26s ease-in-out infinite alternate;transform-origin:58% 62%}
@keyframes p-ken{ from{transform:scale(1.02)} to{transform:scale(1.12)} }
.p-mozgo{position:absolute;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:7px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);
  background:rgba(8,15,30,.55);backdrop-filter:blur(6px);padding:6px 10px}
.p-mozgo::before{content:'';width:5px;height:5px;border-radius:50%;background:#C9A96A;
  animation:p-lukt 2s ease-in-out infinite}
@keyframes p-lukt{0%,100%{opacity:.35}50%{opacity:1}}

.p-tart{display:flex;flex-direction:column;gap:9px;
  padding:clamp(0px,1.6vw,26px) clamp(0px,1.2vw,18px)}
.p-fej{display:flex;align-items:center;gap:16px}
.p-szam{font-family:'Fraunces',Georgia,serif;font-size:clamp(30px,3.6vw,46px);line-height:1}
.p-tart h3{font-family:'Fraunces',Georgia,serif;font-size:clamp(24px,3vw,38px);font-weight:400;
  line-height:1.12;margin:10px 0 0;letter-spacing:-.015em}
.p-alcim{font-size:15.5px;font-weight:600;margin:0;color:#7A6842}
.p-mondat{color:var(--szurke);font-size:16px;line-height:1.7;margin:10px 0 0;max-width:46ch}
.p-adatok{display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--vonal)}
.p-adatok div{display:flex;flex-direction:column;gap:3px;min-width:0}
.p-adatok b{font-family:'Fraunces',Georgia,serif;font-size:clamp(16px,1.35vw,19px);font-weight:400;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.p-adatok span{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.p-tovabb{margin-top:24px;align-self:flex-start}

@media(max-width:860px){
  .p-blokk{grid-template-columns:1fr;gap:20px}
  .p-media{aspect-ratio:16/10}
  .p-tart{padding:0}
}
@media (prefers-reduced-motion: reduce){
  .p-media img.p-ken{animation:none}
  .p-media video,.p-media img.p-ken{inset:0;height:100%}
}

/* a nagy arany sorszám krém alapon 2,98:1-et adott — ez a sötétebb árnyalat 3,4:1 */
.p-szam{color:#967E45}
.p-blokk .allapot{color:#4A4640;border-color:#4A4640}
.p-blokk .allapot.terv{color:#7A6842;border-color:#7A6842}

/* A fő klip alatti három miniatűr: ettől látszik, hogy egy egész kialakításról van szó */
.p-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.p-mini img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:3px;
  opacity:.86;transition:opacity .3s,transform .3s}
.p-blokk:hover .p-mini img{opacity:1}
/* A média-oszlopban a klip és alatta a miniatűrök; a szöveg végig a másik oszlopban. */
.p-blokk{grid-template-rows:auto auto}
.p-blokk > .p-media{grid-column:1;grid-row:1}
.p-blokk > .p-mini{grid-column:1;grid-row:2}
.p-blokk > .p-tart{grid-column:2;grid-row:1 / 3}
.p-blokk:nth-of-type(even) > .p-media,
.p-blokk:nth-of-type(even) > .p-mini{grid-column:2}
.p-blokk:nth-of-type(even) > .p-tart{grid-column:1}
@media(max-width:860px){
  .p-blokk > .p-media,.p-blokk > .p-mini,.p-blokk > .p-tart,
  .p-blokk:nth-of-type(even) > .p-media,.p-blokk:nth-of-type(even) > .p-mini,
  .p-blokk:nth-of-type(even) > .p-tart{grid-column:1;grid-row:auto}
}

/* ── Logó ──────────────────────────────────────────────────────────────────
   Monogram-jel + kétsoros névjegy. Az SVG currentColor-t használ, ezért a
   sötét (filmes) és a világos fejlécen is a szöveg színét veszi fel. */
.logo,.f-logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  white-space:nowrap;letter-spacing:normal;text-transform:none;font-weight:400}
.logo-jel{width:30px;height:30px;flex:0 0 auto;display:block}
.logo-szo{display:flex;flex-direction:column;line-height:1.05}
.logo-nev{font-family:'Fraunces',Georgia,serif;font-size:19px;letter-spacing:.005em;
  font-weight:600;line-height:1}
.logo-nev em{font-style:normal;font-weight:300;color:var(--rez,#B08D57);letter-spacing:.01em}
.logo-alcim{font-size:8.5px;letter-spacing:.19em;text-transform:uppercase;
  opacity:.58;margin-top:5px;white-space:nowrap}
@media (max-width:560px){
  .logo-jel{width:26px;height:26px}
  .logo-nev{font-size:17px}
  .logo-alcim{display:none}
}

/* ── „Az új megközelítés" szakasz elválasztása ─────────────────────────────
   Először krém alapot kapott, de a LAP alapszíne maga a krém — így semmi nem
   látszott belőle. Ezért sötét („ejjel") lett: a portfólió világos sávja után
   egyértelmű váltás, és a lábléc előtti lezárás is erősebb.
   A négy lépés-kártya sötét szövegre és sötét vonalra készült, ezt itt írjuk át. */
.ejjel .lepes{border-top-color:rgba(255,255,255,.2)}
.ejjel .lepes p{color:var(--ej-szoveg-halk)}
.ejjel .lepes-szam{color:var(--arany)}
.ejjel .apro{color:rgba(239,234,224,.62)}

/* ---------- Nyelvválasztó a fejlécben: kerek zászlók ----------
   A zászló nyelvtudás nélkül is érthető — egy német látogató nem a „DE"
   rövidítést keresi, hanem a saját zászlóját. Az aktuális nyelv fehér korongon
   ül, finom árnyékkal és hajszálnyi nagyítással; a másik kettő hoverre megnő. */
.nyelvvalto{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:6px;border:1px solid var(--vonal);border-radius:999px;
  background:rgba(23,21,31,.04);
}
.nyelv-gomb{
  width:30px;height:30px;border-radius:50%;border:0;padding:0;
  background:transparent;display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
  transition:transform .25s,background-color .25s,box-shadow .25s;
}
a.nyelv-gomb{cursor:pointer}
a.nyelv-gomb:hover,a.nyelv-gomb:focus-visible{background:rgba(158,139,99,.18);transform:scale(1.1)}
.nyelv-gomb.aktiv{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15);transform:scale(1.05);cursor:default}
.nyelv-zaszlo{
  display:block;width:22px;height:22px;border-radius:50%;overflow:hidden;
  background:#ddd;border:1px solid rgba(0,0,0,.1);
}
.nyelv-zaszlo svg{width:100%;height:100%;display:block}
@media (max-width:700px){
  .nyelvvalto{gap:6px;padding:5px}
  .nyelv-gomb{width:26px;height:26px}
  .nyelv-zaszlo{width:20px;height:20px}
}
/* sötét (filmes) fejlécen */
.f-oldal .nyelvvalto{border-color:rgba(239,234,224,.28);background:rgba(255,255,255,.08)}
.f-oldal a.nyelv-gomb:hover,.f-oldal a.nyelv-gomb:focus-visible{background:rgba(255,255,255,.2)}
.f-oldal .nyelv-gomb.aktiv{background:rgba(255,255,255,.94)}
@media print{.nyelvvalto{display:none!important}}