/* ═══════════════════════════════════════════════════════════════════════
   ALERIS — „NORDISKT LJUS"

   Arculati irány: meleg, világos, szerkesztőségi nyugalom. A vezérmotívum a
   FÉNY: a Design_offering.pdf minden vázlatán lágy, ferde nappali fény esik
   egy halvány falra. Ezt nem képként, hanem SZERKEZETKÉNT építjük be —
   a heróban, a szekcióváltásokon és a kártyákon is ugyanaz a fénypászta fut.

   A második állandó a SÁRGARÉZ HAJSZÁLVONAL: minden szerepcímke alatt egy
   28 px-es réz vonás áll (a vázlat „Good Morning, Josefin!" alatti arany
   vonása). Ez köti össze a 14 oldalt.

   Betű: Newsreader (kijelző + folyószöveg, optikai mérettel) + Jost (felirat,
   navigáció, adat). Az egészségügyi oldalak sans-serif folyószövege
   személytelen; az antikva testszöveg az, amitől ez az oldal gondoltnak
   látszik, nem sablonnak.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Betűk ────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: optional;
}
@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: optional;
}

/* ── Alapegységek ─────────────────────────────────────────────────────── */
:root {
  /* Szín. A rézből HÁROM árnyalat van, és nem cserélhetők fel:
     --rez     csak grafika (vonal, ikon) — kis szövegre nem elég a kontraszt
     --rez-sz  szövegként használható réz (4,6:1 a csontfehéren)
     --rez-gomb  gombalap, fehér felirattal (5,1:1) */
  --csont:    #F5F1EC;
  --len:      #EDE7E0;
  --lap:      #E3DBD2;
  --lap-2:    #D9D0C5;
  --tinta:    #1E1F1C;
  --szoveg:   #47433D;
  --halk:     #665F57;
  --ko:       #574F47;
  --ko-2:     #6B6259;
  --rez:      #A3813F;
  --rez-sz:   #7E5A22;
  --rez-gomb: #8A6836;
  --rez-halk: #C8AE7E;
  --vonal:    rgba(30, 31, 28, .14);
  --vonal-h:  rgba(30, 31, 28, .08);
  --feher-v:  rgba(255, 255, 255, .55);

  /* Tipográfia */
  --kijelzo: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --felirat: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;

  /* Ritmus — 4 px-es rácson */
  --t1: 4px;  --t2: 8px;  --t3: 12px; --t4: 16px; --t5: 24px;
  --t6: 32px; --t7: 48px; --t8: 64px; --t9: 96px; --t10: 128px;

  --ker: 6px;            /* sarok — kicsi, mértéktartó */
  --ker-n: 14px;         /* nagy felületek (kép, tábla) */
  --sav: 1240px;         /* tartalomoszlop */

  /* Árnyék: meleg, nem szürke. Szürke árnyék hideggé teszi a csontfehéret. */
  --arny-1: 0 1px 2px rgba(74, 60, 42, .05);
  --arny-2: 0 6px 22px -10px rgba(74, 60, 42, .22), 0 2px 6px rgba(74, 60, 42, .05);
  --arny-3: 0 22px 48px -22px rgba(74, 60, 42, .34), 0 4px 12px rgba(74, 60, 42, .07);

  --ido: .42s cubic-bezier(.22, .61, .36, 1);
  --ido-gyors: .2s cubic-bezier(.22, .61, .36, 1);
}

/* ── Nullázás ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--csont);
  color: var(--szoveg);
  font-family: var(--kijelzo);
  font-size: 17.5px;
  line-height: 1.68;
  font-weight: 380;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video { max-width: 100%; display: block; }
/* ⚠️ A <picture> soron belüli elem: a képdobozokban rá kell tenni a
   nyújtást, különben a 100%-os magasságú <img> nem talál szülőmagasságot. */
picture { display: contents; }
img { height: auto; }

/* ⚠️ A `hidden` attribútum nem üti a display:flex/grid szabályokat. */
[hidden] { display: none !important; }

/* ⚠️ A svéd összetett szavak (Hälsoundersökning, Specialistområden) 320 px-en
   szélesebbek a hasábnál. Kötőjelezés nélkül kilógatják a lapot — és a
   `html lang="sv"` miatt a böngésző valódi svéd elválasztást tud tenni. */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.018em;
  color: var(--tinta);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul, ol { margin: 0; padding: 0; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--rez-sz);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--rez-halk); color: var(--tinta); }

/* ── Szerkezet ────────────────────────────────────────────────────────── */
.sav {
  width: 100%;
  max-width: var(--sav);
  margin-inline: auto;
  padding-inline: var(--t5);
}

.sav--kesk { max-width: 860px; }

section { position: relative; }

.szekcio { padding-block: clamp(64px, 8.4vw, 118px); }
.szekcio--kicsi { padding-block: clamp(48px, 5.6vw, 76px); }

/* A világos és a vászonszínű szekció váltakozik. A váltás nem sík:
   a szekció TETEJÉN halvány meleg derengés ül — ez a fénymotívum. */
.szekcio--len {
  background: var(--len);
}
.szekcio--len::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 220px;
  background: linear-gradient(to bottom, rgba(255, 252, 246, .8), rgba(255, 252, 246, 0));
  pointer-events: none;
}

.szekcio--ko {
  background: var(--ko);
  color: #E8E1D8;
}
.szekcio--ko h1, .szekcio--ko h2, .szekcio--ko h3 { color: #FBF7F1; }

/* Papírszemcse — nagyon halvány, de ettől nem „nyomtatott síkfelület". */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}

/* ── Tipográfiai osztályok ────────────────────────────────────────────── */
.cim-1 { font-size: clamp(2.6rem, 6.2vw, 5.1rem); line-height: .99; }
.cim-2 { font-size: clamp(2.05rem, 4.1vw, 3.35rem); line-height: 1.04; }
.cim-3 { font-size: clamp(1.42rem, 2.1vw, 1.85rem); line-height: 1.16; letter-spacing: -.012em; }
.cim-4 { font-size: 1.18rem; line-height: 1.3; letter-spacing: -.008em; }

.dolt { font-style: italic; font-weight: 400; }

.bevezeto {
  font-size: clamp(1.08rem, 1.35vw, 1.26rem);
  line-height: 1.62;
  color: var(--szoveg);
}

.halk { color: var(--halk); }

/* Szerepcímke: Jost, ritkított verzál, alatta a RÉZ VONÁS.
   Ez a lap központi írásjele — minden szekció ezzel kezdődik. */
.cimke {
  display: block;
  font-family: var(--felirat);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--rez-sz);
  margin: 0 0 var(--t4);
}
.cimke::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  margin-top: 10px;
  background: var(--rez);
}
.szekcio--ko .cimke { color: var(--rez-halk); }
.szekcio--ko .cimke::after { background: var(--rez-halk); }

/* Szekciófej: cím balra, kísérőszöveg + gomb jobbra — a fej fölött
   végigfut egy hajszálvonal, amelyen a címke ül. */
.fej {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--t5) var(--t8);
  align-items: end;
  padding-top: var(--t5);
  border-top: 1px solid var(--vonal);
  margin-bottom: var(--t7);
}
.fej__jobb { padding-bottom: 4px; }
.szekcio--ko .fej { border-top-color: rgba(255, 255, 255, .18); }

@media (max-width: 860px) {
  .fej { grid-template-columns: 1fr; gap: var(--t4); margin-bottom: var(--t6); }
}

/* ── Gombok ───────────────────────────────────────────────────────────── */
.knapp {
  --gomb-alap: var(--rez-gomb);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--gomb-alap);
  color: #FFF;
  font-family: var(--felirat);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ido-gyors), transform var(--ido-gyors), box-shadow var(--ido-gyors);
}
.knapp:hover { background: #75561F; transform: translateY(-1px); box-shadow: var(--arny-2); }
.knapp:active { transform: translateY(0); }

.knapp--kontur {
  background: transparent;
  color: var(--tinta);
  border-color: var(--vonal);
}
.knapp--kontur:hover { background: rgba(30, 31, 28, .045); border-color: rgba(30, 31, 28, .3); box-shadow: none; }

.knapp--vilagos {
  background: transparent;
  color: #F6F1EA;
  border-color: rgba(255, 255, 255, .34);
}
.knapp--vilagos:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }

.knapp--kicsi { padding: 10px 18px; font-size: .72rem; }

/* Szöveges hivatkozás nyíllal */
.tovabb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--felirat);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--rez-sz);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(163, 129, 63, .38);
  transition: border-color var(--ido-gyors), color var(--ido-gyors);
}
.tovabb:hover { color: #6D4F1B; border-bottom-color: var(--rez-sz); }
.tovabb svg { transition: transform var(--ido-gyors); flex: none; }
.tovabb:hover svg { transform: translateX(4px); }
.szekcio--ko .tovabb { color: var(--rez-halk); border-bottom-color: rgba(200, 174, 126, .45); }
.szekcio--ko .tovabb:hover { color: #E5D2AC; }

/* ── Fejléc ───────────────────────────────────────────────────────────── */
/* ⚠️ A fejléc MAGASSÁGA nem változik görgetésre. A változó magasságú,
   összecsukódó fejléc újrafolyást okoz, a lap ugrál alatta, és a
   horgonyok is elcsúsznak. Csak a háttér és a vonal jelenik meg. */
.fejlec {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 78px;
  display: flex;
  align-items: center;
  transition: background var(--ido), box-shadow var(--ido), border-color var(--ido);
  border-bottom: 1px solid transparent;
}
.fejlec__sav {
  width: 100%;
  max-width: var(--sav);
  margin-inline: auto;
  padding-inline: var(--t5);
  display: flex;
  align-items: center;
  gap: var(--t6);
}

.fejlec[data-allapot='tapadt'],
.fejlec[data-allapot='vilagos'] {
  background: rgba(245, 241, 236, .93);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--vonal-h);
}

/* Átlátszó fejléc a sötét heró fölött */
.fejlec[data-allapot='atlatszo'] { color: #F7F2EB; }
.fejlec[data-allapot='atlatszo'] .nav a { color: #F2EBE2; }
.fejlec[data-allapot='atlatszo'] .nav a:hover { color: #FFF; }
.fejlec[data-allapot='atlatszo'] .jel-szo { color: #FBF7F1; }
.fejlec[data-allapot='atlatszo'] .fejlec__jel { color: #FBF7F1; }
.fejlec[data-allapot='atlatszo'] .ikongomb { color: #F2EBE2; border-color: rgba(255, 255, 255, .3); }

.fejlec__jel {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--tinta);
  flex: none;
}
.fejlec__jel svg { width: 34px; height: 34px; }

.jel-szo {
  font-family: var(--felirat);
  font-size: 1.42rem;
  font-weight: 400;
  letter-spacing: .004em;
  color: var(--tinta);
  line-height: 1;
}
.jel-szo small {
  display: block;
  font-size: .53rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--rez-sz);
  margin-top: 3px;
}
.fejlec[data-allapot='atlatszo'] .jel-szo small { color: var(--rez-halk); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--t5);
  list-style: none;
  margin-inline-end: auto;
}
.nav a {
  font-family: var(--felirat);
  font-size: .93rem;
  font-weight: 400;
  text-decoration: none;
  color: var(--szoveg);
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
  transition: color var(--ido-gyors);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ido-gyors);
}
.nav a:hover { color: var(--tinta); }
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); }
.nav a[aria-current='page'] { color: var(--tinta); }

.fejlec__jobb { display: flex; align-items: center; gap: var(--t3); flex: none; }

.ikongomb {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--vonal);
  border-radius: 999px;
  background: transparent;
  color: var(--szoveg);
  cursor: pointer;
  transition: background var(--ido-gyors), border-color var(--ido-gyors);
}
.ikongomb:hover { background: rgba(30, 31, 28, .05); }

.menugomb { display: none; }

/* ── Mobil fiók ───────────────────────────────────────────────────────── */
/* ⚠️ A fiók a BODY gyereke, nem a fejlécé: a fejléc backdrop-filterje
   saját festési kontextust nyit, és a benne lévő fixed elemet a fejléc
   dobozára vágja. */
.fiok {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr;
  pointer-events: none;
}
.fiok__arny {
  position: absolute;
  inset: 0;
  background: rgba(30, 26, 20, .42);
  opacity: 0;
  transition: opacity var(--ido);
}
.fiok__lap {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(400px, 88vw);
  background: var(--csont);
  padding: 84px var(--t6) var(--t6);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--ido);
  box-shadow: var(--arny-3);
}
.fiok[data-nyitva='1'] { pointer-events: auto; }
.fiok[data-nyitva='1'] .fiok__arny { opacity: 1; }
.fiok[data-nyitva='1'] .fiok__lap { transform: none; }

.fiok__zar {
  position: absolute;
  top: 19px; right: var(--t5);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--vonal);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.fiok__nav { list-style: none; display: grid; gap: 2px; }
.fiok__nav a {
  display: block;
  padding: 13px 0;
  font-family: var(--kijelzo);
  font-size: 1.34rem;
  font-weight: 350;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--vonal-h);
}
.fiok__nav a:hover { color: var(--rez-sz); }

/* ── Heró ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(90vh, 780px);
  display: grid;
  align-items: center;
  padding-block: 140px var(--t9);
  background: var(--lap);
  overflow: hidden;
  isolation: isolate;
}

.hero__kep {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__kep img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 66% 40%;
}

/* A fénypászta: széles, nagyon lágy, ferde meleg sáv — ez a lap
   vezérmotívuma, és egyben ez teszi olvashatóvá a szöveget a képen. */
/* A fénypászta — egyben OLVASHATÓSÁGI ÁRNYALÓ.
   ⚠️ A javítás az árnyalóban van, nem a szövegszínben. A fehér szöveg a
      fotón mérve 1,2–2,7:1-re jött ki (kirenderelt képpontokból mérve, nem
      a tokenekből) — a szöveget világosítani itt nem segít, mert már majdnem
      fehér. Csak a HÁTTERET lehet sötétíteni.

   Négy réteg, mindegyiknek dolga van:
   – a szövegoszlop alatti ellipszis: pontosan ott sötétít, ahol a betűk
     futnak, és kifelé elhal — így a fotó a másik oldalon nyitva marad,
   – a ferde sáv adja a fény irányát,
   – a felső mosás a FEJLÉC alá kell (a nav fehér, a fotó ott világos),
   – az alsó mosás a mérőszámsorhoz,
   – a jobb felső derengés a „napfény" — enélkül a kép csak sötét lenne. */
.hero__fenny {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(76% 92% at 24% 52%,
      rgba(18, 14, 10, .74) 0%,
      rgba(18, 14, 10, .58) 42%,
      rgba(18, 14, 10, .20) 72%,
      transparent 88%),
    linear-gradient(to bottom, rgba(20, 17, 12, .52) 0%, rgba(20, 17, 12, .18) 10%, transparent 19%),
    linear-gradient(to top, rgba(24, 20, 15, .58) 0%, rgba(24, 20, 15, .12) 32%, transparent 56%),
    linear-gradient(104deg,
      rgba(22, 18, 13, .74) 0%,
      rgba(22, 18, 13, .60) 32%,
      rgba(34, 28, 21, .30) 58%,
      rgba(40, 33, 24, .12) 74%,
      rgba(255, 249, 234, .10) 88%,
      rgba(255, 250, 238, .04) 100%),
    radial-gradient(120% 90% at 82% 6%, rgba(255, 246, 226, .24), transparent 58%);
}

/* Telefonon és táblán a szöveg a TELJES szélességet elfoglalja, tehát a
   fotó világos része is alá kerül. Ott az oldalirányú pászta nem elég:
   függőleges, erős mosás kell. A kép így atmoszférikus háttérré válik —
   ez a helyes csere, a rosszul olvasható cím nem az. */
@media (max-width: 860px) {
  .hero__fenny {
    background:
      linear-gradient(to bottom,
        rgba(17, 14, 10, .86) 0%,
        rgba(17, 14, 10, .78) 34%,
        rgba(19, 15, 11, .70) 62%,
        rgba(19, 15, 11, .74) 100%),
      radial-gradient(90% 40% at 76% 4%, rgba(255, 246, 226, .20), transparent 62%);
  }
}

.hero__tartalom { position: relative; max-width: 660px; color: #F7F2EA; }
.hero h1 { color: #FDFBF7; margin-bottom: var(--t5); }
/* ⚠️ A herón a szerepcímke a FOTÓN ül. A --rez-halk (#C8AE7E) ott 4,26:1-et
   ad 768 px-en — 11 px-es verzálnál ez kevés. Kirenderelt képpontokból mérve
   a #F5E8CE megy át minden szélességen.
   ⚠️ Ez a szabály a fájlban KÉSŐBB áll, mint a .cimke alapszíne — ha valaki
      feljebb próbálja átírni, csendben hatástalan marad. */
.hero .cimke { color: #F5E8CE; }
.hero .cimke::after { background: var(--rez-halk); }
.hero__lead {
  font-size: clamp(1.06rem, 1.35vw, 1.24rem);
  line-height: 1.6;
  color: rgba(252, 249, 244, .96);
  max-width: 34em;
  margin-bottom: var(--t6);
}
.hero__gombok { display: flex; flex-wrap: wrap; gap: var(--t3); }

/* Heró-adatsor: a kép alján ülő, finom mérőszámok */
.hero__adat {
  position: relative;
  margin-top: clamp(40px, 6vw, 76px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  padding-top: var(--t5);
  border-top: 1px solid rgba(255, 255, 255, .22);
  max-width: 700px;
}
.hero__adat div { min-width: 0; }
.hero__adat b {
  display: block;
  font-family: var(--kijelzo);
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  font-weight: 300;
  color: #FDFBF7;
  line-height: 1;
  letter-spacing: -.02em;
}
.hero__adat span {
  display: block;
  margin-top: 7px;
  font-family: var(--felirat);
  font-size: .71rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(246, 240, 231, .72);
}

/* Belső oldalak rövid feje */
.lapfej {
  padding: 148px 0 var(--t8);
  background: var(--len);
  position: relative;
}
.lapfej::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--vonal-h);
}
.lapfej__morzsa {
  font-family: var(--felirat);
  font-size: .76rem;
  letter-spacing: .05em;
  color: var(--halk);
  margin-bottom: var(--t5);
}
.lapfej__morzsa a {
  display: inline-block;
  padding: 4px 2px;
  color: var(--halk);
  text-decoration: none;
}
.lapfej__morzsa a:hover { color: var(--rez-sz); }
.lapfej__morzsa span { margin-inline: 8px; opacity: .5; }
.lapfej h1 { max-width: 17ch; }
.lapfej .bevezeto { max-width: 56ch; margin-top: var(--t5); }

/* ── Kártyák ──────────────────────────────────────────────────────────── */
.racs { display: grid; gap: var(--t5); }
.racs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.racs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.racs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1040px) { .racs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .racs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  {
  .racs--2, .racs--3, .racs--4 { grid-template-columns: minmax(0, 1fr); }
}

/* A kártya nem doboz, hanem egy fénnyel megvilágított lap. */
.kort {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #FBF8F4;
  border-radius: var(--ker-n);
  padding: var(--t5) var(--t5) var(--t6);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--arny-1);
  transition: transform var(--ido-gyors), box-shadow var(--ido-gyors), background var(--ido-gyors);
  overflow: hidden;
}
.kort::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(148deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 46%);
  pointer-events: none;
}
.kort > * { position: relative; }
a.kort:hover { transform: translateY(-3px); box-shadow: var(--arny-2); }

.kort__ikon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--len);
  color: var(--rez-sz);
  margin-bottom: var(--t5);
  flex: none;
  transition: background var(--ido-gyors);
}
a.kort:hover .kort__ikon { background: #E7DCC8; }
.kort__ikon svg { width: 24px; height: 24px; }

.kort h3 { margin-bottom: var(--t3); }
.kort h3::after {
  content: '';
  display: block;
  width: 28px; height: 1px;
  margin-top: 13px;
  background: var(--rez);
  transition: width var(--ido);
}
a.kort:hover h3::after { width: 58px; }

.kort p { font-size: .96rem; line-height: 1.58; color: var(--halk); }

.kort__nyil {
  margin-top: auto;
  padding-top: var(--t5);
  align-self: flex-end;
  color: var(--rez-sz);
  transition: transform var(--ido-gyors);
}
a.kort:hover .kort__nyil { transform: translateX(5px); }

/* Képes kártya */
.kort--kep { padding: 0; background: transparent; box-shadow: none; }
.kort--kep::before { display: none; }
.kort--kep .kort__media {
  border-radius: var(--ker-n);
  overflow: hidden;
  background: var(--lap);
  aspect-ratio: 4 / 3;
  margin-bottom: var(--t5);
}
.kort--kep .kort__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
a.kort--kep:hover { transform: none; }
a.kort--kep:hover .kort__media img { transform: scale(1.04); }
.kort--kep h3::after { display: none; }
.kort--kep .kort__cimke {
  font-family: var(--felirat);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rez-sz);
  display: block;
  margin-bottom: 9px;
}

/* ── Osztott blokk: kép + szöveg ──────────────────────────────────────── */
.osztott {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.osztott--forditva .osztott__kep { order: 2; }
.osztott__kep {
  border-radius: var(--ker-n);
  overflow: hidden;
  background: var(--lap);
  aspect-ratio: 5 / 4;
}
.osztott__kep img { width: 100%; height: 100%; object-fit: cover; }
.osztott__szoveg { min-width: 0; }
.osztott__szoveg h2 { margin-bottom: var(--t5); }

@media (max-width: 860px) {
  .osztott { grid-template-columns: 1fr; }
  .osztott--forditva .osztott__kep { order: 0; }
}

/* ── Lépéssor ─────────────────────────────────────────────────────────── */
.lepesek { list-style: none; display: grid; gap: var(--t5); counter-reset: l; }
.lepes {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--t5);
  padding-bottom: var(--t5);
  border-bottom: 1px solid var(--vonal-h);
  counter-increment: l;
}
.lepes:last-child { border-bottom: 0; padding-bottom: 0; }
.lepes::before {
  content: counter(l, decimal-leading-zero);
  font-family: var(--felirat);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--rez-sz);
  padding-top: 5px;
}
.lepes h3 { font-size: 1.16rem; margin-bottom: 7px; }
.lepes p { font-size: .98rem; color: var(--halk); }

/* ── Számsor ──────────────────────────────────────────────────────────── */
.szamok {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--t6);
}
.szamok > div {
  min-width: 0;
  padding-top: var(--t4);
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.szamok b {
  display: block;
  font-family: var(--kijelzo);
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  font-weight: 250;
  line-height: 1;
  letter-spacing: -.03em;
  color: #FCF9F4;
}
.szamok span {
  display: block;
  margin-top: var(--t3);
  font-family: var(--felirat);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(240, 233, 223, .74);
  line-height: 1.5;
}
@media (max-width: 860px) { .szamok { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t5); } }

/* ── Harmonika ────────────────────────────────────────────────────────── */
.harmonika { border-top: 1px solid var(--vonal); }
.harm {
  border-bottom: 1px solid var(--vonal);
}
.harm__gomb {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--t5);
  padding: var(--t5) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--tinta);
}
.harm__gomb h3 { flex: 1; min-width: 0; font-size: clamp(1.16rem, 1.9vw, 1.55rem); }
/* ⚠️ A 45°-os forgatás az IKONRA megy, nem a körre. A körre téve a 34 px-es
   négyzet befoglalója 48 px-re nő (34·√2), ami 320 px-en kilógatja a lapot —
   és a hiba némán jelentkezik: a kör kereknek látszik, csak a szélek csúsznak. */
.harm__jel {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--vonal);
  border-radius: 999px;
  color: var(--rez-sz);
  transition: background var(--ido-gyors);
}
.harm__jel svg { transition: transform var(--ido); }
.harm__gomb:hover .harm__jel { background: var(--len); }
.harm__gomb[aria-expanded='true'] .harm__jel svg { transform: rotate(45deg); }

.harm__test {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ido);
}
.harm__gomb[aria-expanded='true'] + .harm__test { grid-template-rows: 1fr; }
.harm__test > div { overflow: hidden; min-height: 0; }
.harm__test p {
  max-width: 62ch;
  padding-bottom: var(--t5);
  color: var(--halk);
}

/* ⚠️ JS nélkül minden panel legyen NYITVA: a zárt alapállapot
   szkript nélkül elérhetetlenné tenné a tartalmat. */
.nincs-js .harm__test { grid-template-rows: 1fr; }
.nincs-js .harm__jel { display: none; }

/* ── Szűrhető lista ───────────────────────────────────────────────────── */
.szuro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t3);
  align-items: center;
  margin-bottom: var(--t6);
  padding-bottom: var(--t5);
  border-bottom: 1px solid var(--vonal);
}
.kereso {
  position: relative;
  flex: 1 1 300px;
  min-width: 0;
}
.kereso input {
  width: 100%;
  padding: 13px 18px 13px 44px;
  border: 1px solid var(--vonal);
  border-radius: 999px;
  background: #FCFAF7;
  font-family: var(--felirat);
  font-size: .95rem;
  color: var(--tinta);
}
.kereso input::placeholder { color: var(--halk); }
.kereso input:focus { outline: none; border-color: var(--rez); box-shadow: 0 0 0 3px rgba(163, 129, 63, .14); }
.kereso svg {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--halk);
  pointer-events: none;
}

.pirulak { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.pirula {
  padding: 9px 17px;
  border: 1px solid var(--vonal);
  border-radius: 999px;
  background: transparent;
  font-family: var(--felirat);
  font-size: .82rem;
  color: var(--szoveg);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ido-gyors), color var(--ido-gyors), border-color var(--ido-gyors);
}
.pirula:hover { background: rgba(30, 31, 28, .05); }
.pirula[aria-pressed='true'] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--csont);
}

.talalat-szam {
  font-family: var(--felirat);
  font-size: .84rem;
  color: var(--halk);
  margin-bottom: var(--t5);
}

/* Terület-lista */
.teruletek { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--t7); }
.terulet a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--t4);
  align-items: baseline;
  padding: var(--t4) 0;
  border-bottom: 1px solid var(--vonal-h);
  text-decoration: none;
  color: var(--tinta);
  transition: color var(--ido-gyors);
}
.terulet a:hover { color: var(--rez-sz); }
.terulet strong { font-weight: 400; font-size: 1.06rem; min-width: 0; }
.terulet span {
  font-family: var(--felirat);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--halk);
  white-space: nowrap;
}
@media (max-width: 1040px) { .teruletek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .teruletek { grid-template-columns: 1fr; } }

/* Mottagning-kártya */
.hely {
  display: grid;
  gap: var(--t4);
  padding: var(--t5);
  background: #FBF8F4;
  border-radius: var(--ker-n);
  box-shadow: var(--arny-1);
  min-width: 0;
}
.hely h3 { font-size: 1.14rem; }
.hely__adat {
  display: grid;
  gap: 7px;
  font-family: var(--felirat);
  font-size: .88rem;
  color: var(--halk);
}
.hely__adat div { display: flex; gap: 10px; align-items: flex-start; }
.hely__adat svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--rez); }
/* ⚠️ A hosszú cím és a telefonszám kifeszítené a rácsot 320 px-en. */
.hely__adat span { min-width: 0; overflow-wrap: anywhere; }
/* A telefonszám ÉLŐ hívás-hivatkozás telefonon — 24 px-es célpont kell alá. */
.hely__adat a {
  display: inline-block;
  padding-block: 3px;
  color: inherit;
  text-decoration: none;
}
.hely__adat a:hover { color: var(--rez-sz); }
.hely__cimkek { display: flex; flex-wrap: wrap; gap: 6px; }
.hely__cimkek em {
  font-family: var(--felirat);
  font-style: normal;
  font-size: .7rem;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--len);
  color: var(--halk);
}

/* ── Idézet ───────────────────────────────────────────────────────────── */
.idezet { max-width: 20ch; }
.idezet blockquote {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.22;
  font-weight: 300;
  letter-spacing: -.016em;
  color: var(--tinta);
}
.idezet figcaption {
  margin-top: var(--t5);
  font-family: var(--felirat);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--halk);
}
.idezet-blokk { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.idezet-blokk .idezet { max-width: none; }
@media (max-width: 860px) { .idezet-blokk { grid-template-columns: 1fr; } }

/* ── Hírek ────────────────────────────────────────────────────────────── */
.hir { display: block; text-decoration: none; color: inherit; min-width: 0; }
.hir__media {
  border-radius: var(--ker-n);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--lap);
  margin-bottom: var(--t4);
}
.hir__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.hir:hover .hir__media img { transform: scale(1.04); }
.hir time {
  font-family: var(--felirat);
  font-size: .73rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rez-sz);
}
.hir h3 { font-size: 1.2rem; margin: 10px 0 8px; }
.hir:hover h3 { color: var(--rez-sz); }
.hir p { font-size: .95rem; color: var(--halk); }

/* ── Nagy felhívás ────────────────────────────────────────────────────── */
.felhivas {
  position: relative;
  border-radius: var(--ker-n);
  overflow: hidden;
  background: var(--ko);
  color: #F3EDE4;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  isolation: isolate;
}
.felhivas__szoveg { padding: clamp(36px, 5vw, 72px); }
.felhivas h2 { color: #FDFAF5; margin-bottom: var(--t4); }
.felhivas p { color: rgba(243, 237, 228, .8); max-width: 44ch; margin-bottom: var(--t6); }
.felhivas__gombok { display: flex; flex-wrap: wrap; gap: var(--t3); }
.felhivas__kep { position: relative; align-self: stretch; min-height: 280px; }
.felhivas__kep img { width: 100%; height: 100%; object-fit: cover; }
.felhivas__kep::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ko), rgba(87, 79, 71, .22) 46%, rgba(87, 79, 71, 0));
}
@media (max-width: 860px) {
  .felhivas { grid-template-columns: 1fr; }
  .felhivas__kep { order: -1; min-height: 200px; }
  .felhivas__kep::after { background: linear-gradient(180deg, rgba(87,79,71,.1), var(--ko)); }
}

/* ── Lábléc ───────────────────────────────────────────────────────────── */
.lablec {
  background: var(--len);
  padding-block: var(--t9) var(--t6);
  border-top: 1px solid var(--vonal-h);
}
.lablec__fo {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--t7) var(--t6);
  padding-bottom: var(--t7);
  border-bottom: 1px solid var(--vonal);
}
.lablec__jel { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--tinta); margin-bottom: var(--t5); }
.lablec__jel svg { width: 38px; height: 38px; }
.lablec__fo p { font-size: .95rem; color: var(--halk); max-width: 32ch; }
.lablec h4 {
  font-family: var(--felirat);
  font-size: .71rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--rez-sz);
  margin-bottom: var(--t4);
}
.lablec ul { list-style: none; display: grid; gap: 2px; }
/* ⚠️ Az érinthető célpont legalább 24 px magas. Csupasz szöveges
   hivatkozásnál ez 15–18 px lenne: a sorköz a szemnek elég, az ujjnak nem. */
.lablec ul a {
  display: inline-block;
  padding-block: 5px;
  font-size: .96rem;
  color: var(--szoveg);
  text-decoration: none;
  transition: color var(--ido-gyors);
}
.lablec ul a:hover { color: var(--rez-sz); }

.lablec__alj {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t4) var(--t5);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--t5);
  font-family: var(--felirat);
  font-size: .8rem;
  color: var(--halk);
}
.lablec__alj nav { display: flex; flex-wrap: wrap; gap: 4px var(--t3); }
.lablec__alj a {
  display: inline-block;
  padding: 4px 6px;
  margin: -4px -6px;
  color: var(--halk);
  text-decoration: none;
}
.lablec__alj a:hover { color: var(--rez-sz); }
.kozosseg { display: flex; gap: 10px; }
.kozosseg a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--vonal);
  border-radius: 999px;
  color: var(--szoveg);
  transition: background var(--ido-gyors), color var(--ido-gyors);
}
.kozosseg a:hover { background: var(--tinta); color: var(--csont); border-color: var(--tinta); }
.kozosseg svg { width: 16px; height: 16px; }

@media (max-width: 980px) { .lablec__fo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lablec__fo { grid-template-columns: 1fr; gap: var(--t6); } }

/* Koncepció-jelzés: ez egy arculati javaslat, nem az éles oldal. */
.jelzes {
  background: var(--tinta);
  color: rgba(245, 241, 236, .82);
  font-family: var(--felirat);
  font-size: .76rem;
  letter-spacing: .03em;
  text-align: center;
  padding: 11px var(--t5);
}
.jelzes b { color: #FBF7F1; font-weight: 500; }
.jelzes a {
  display: inline-block;
  padding: 3px 4px;
  margin: -3px -4px;
  color: var(--rez-halk);
}

/* ── Mozgás ───────────────────────────────────────────────────────────── */
/* ⚠️ A beúszó elemek alapból LÁTHATÓK. A rejtett alapállapot szkript nélkül
   (és a megfigyelő hibája esetén) üres lapot adna. A JS előbb rejti el
   őket — csak akkor, ha tényleg fut. */
.js [data-uszik] {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.js [data-uszik].latszik { opacity: 1; transform: none; }

/* Betöltési sorrend a heróban */
@keyframes fel {
  from { opacity: 0; transform: translateY(13px); }
  to   { opacity: 1; transform: none; }
}
/* ⚠️ A heró szövegének beúszása RÖVID. A címsor gyakran maga az LCP-elem,
   és amíg átlátszó, a böngésző nem tekinti kifestettnek — egy 0,8 s-os
   fade a mérőszámot 1,1 s-ra tolta ki egy 40 ms alatt kész lapon.
   Fél másodperc alatt ugyanaz a hatás, mérhető ár nélkül. */
.js .hero__tartalom > * {
  animation: fel .46s cubic-bezier(.22,.61,.36,1) backwards;
}
.js .hero__tartalom > *:nth-child(1) { animation-delay: .03s; }
.js .hero__tartalom > *:nth-child(2) { animation-delay: .08s; }
.js .hero__tartalom > *:nth-child(3) { animation-delay: .13s; }
.js .hero__tartalom > *:nth-child(4) { animation-delay: .18s; }
.js .hero__tartalom > *:nth-child(5) { animation-delay: .23s; }

/* ⚠️ A nyitókép beúszása CSAK nagyítás lehet, átlátszóság SOHA.
   Az `opacity: 0`-ról induló kép a böngésző szerint nincs kifestve, ezért az
   LCP-t az animáció VÉGÉRE teszi: a kép 43 ms-nál megérkezett, az LCP mégis
   1680 ms lett. A `transform` nem számít bele a festésbe — ugyanaz a hatás,
   1,6 másodperccel jobb mérőszám. */
@keyframes kep-be {
  from { transform: scale(1.055); }
  to   { transform: none; }
}
.js .hero__kep img { animation: kep-be 1.4s cubic-bezier(.22,.61,.36,1) backwards; }

@media (prefers-reduced-motion: reduce) {
  .js [data-uszik] { opacity: 1 !important; transform: none !important; transition: none; }
  .js .hero__tartalom > *, .js .hero__kep img { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ── Hozzáférés ───────────────────────────────────────────────────────── */
.ugras {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--tinta);
  color: var(--csont);
  border-radius: 0 0 var(--ker) 0;
  font-family: var(--felirat);
  font-size: .85rem;
  text-decoration: none;
}
.ugras:focus { left: 0; top: 0; }

.rejtve {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Mobil ────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menugomb { display: inline-grid; }
  .fejlec__sav { gap: var(--t4); justify-content: space-between; }
}

/* ⚠️ 360 px alatt a „Mina sidor" felirat + a menügomb együtt kilógat.
   A gombot nem rejtjük el — az a legfontosabb művelet a lapon —, csak a
   feliratot és a záró nyilat ejtjük. A KULCS-ikon marad, mert egy csupasz
   nyíl-korong nem mond semmit: a jelentést az ikonnak kell vinnie. */
@media (max-width: 360px) {
  .fejlec__belep span, .fejlec__belep .csak-szeles { display: none; }
  .fejlec__belep { padding: 11px; gap: 0; }
  .fejlec__belep svg { width: 18px; height: 18px; }
  .fejlec__jel svg { width: 30px; height: 30px; }
  .jel-szo { font-size: 1.26rem; }
}

.terulet a { padding-block: 15px; }
.lepes h3 { hyphens: auto; }

/* Szövegközi telefon- és e-mail hivatkozás is hívható célpont telefonon. */
p a[href^='tel:'], p a[href^='mailto:'] {
  display: inline-block;
  padding-block: 5px;
  margin-block: -5px;
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .sav { padding-inline: 20px; }
  .cim-1 { font-size: clamp(2.15rem, 8.4vw, 3rem); }
  .hero { min-height: auto; padding-block: 120px var(--t7); }
  .hero__adat { gap: var(--t5) var(--t6); }
  .lapfej { padding-top: 118px; padding-bottom: var(--t6); }
  .knapp { padding: 13px 21px; }
  .hero__gombok .knapp { flex: 1 1 100%; justify-content: center; }
  .lepes { grid-template-columns: 34px minmax(0, 1fr); gap: var(--t4); }
}