/* ═══════════════════════════════════════════════════════════════════════
   BEAUTY DESIGNER — „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 {
  display: block;                 /* ⚠️ <span>: enélkül inline marad */
  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); }
/* ⚠️ Kifejezett rácshelyek: a `.terulet__alt` második sora nélkül az
   automatikus elhelyezés a nyilat a 2. sorba dobná a foglaló listáján is. */
.terulet strong { grid-area: 1 / 1; }
.terulet a > span { grid-area: 1 / 2; }
.terulet__alt { grid-area: 2 / 1 / 3 / 3; display: none; }
.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;
  /* ⚠️ A nyíl `<svg>`-je BLOKK szintű, ezért saját sorba esett a „2 clinics ·
     30 min" alá — a `white-space: nowrap` ezen nem fog, mert az a
     SORTÖRÉST tiltja, nem a blokkot teszi soron belülivé. Flex kell. */
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
@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 {
  display: block;                 /* ⚠️ <span>: enélkül inline marad */
  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;
  /* A .lablec__alj a NEGATÍV margóval nagyítja a szöveges hivatkozások
     érintőfelületét (padding + ugyanannyi negatív margó). Ezek a gombok
     viszont már 36 px-esek: ott a trükk csak összehúzza őket, a 10 px-es
     közből -2 px lesz, és a körök egymásra csúsznak. Ezért itt nullázzuk. */
  margin: 0; padding: 0;
  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; }
}



.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;
}

/* ═══════════════════════════════════════════════════════════════════════
   TELEFON — levegő

   ⚠️ Az asztali ritmus telefonon ZSÚFOLTNAK hat, és nem azért, mert kevés a
      margó, hanem mert az ARÁNYOK felborulnak: az egyhasábos elrendezésben
      a kártyák közti hézag ugyanakkora lesz, mint a kártyán BELÜLI padding,
      így a lista egyetlen összefüggő szalaggá olvad. A javítás nem
      „mindenhol több margó", hanem a belső és a külső köz szétválasztása.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .sav { padding-inline: 20px; }

  /* Szekcióritmus: több levegő a szakaszok közt, és a fej is kap helyet. */
  .szekcio { padding-block: 88px; }
  .szekcio--kicsi { padding-block: 60px; }
  .fej { margin-bottom: 44px; padding-top: var(--t4); }

  /* A szekciócím kisebb: 33 px-es antikva egy 390 px-es hasábban falként
     áll. 29 px mellett ugyanaz a hangsúly, több levegővel. */
  .cim-1 { font-size: clamp(2.15rem, 8.4vw, 3rem); }
  .cim-2 { font-size: 1.82rem; }
  .cim-3 { font-size: 1.32rem; }

  /* ⚠️ A rácshézag NAGYOBB, mint a kártya belső paddingja (24 px) — csak így
     olvasódik külön objektumnak minden kártya. */
  .racs { gap: 40px; }
  .racs--3[style*="gap:48px"], .racs--2[style*="gap:48px"] { gap: 44px !important; }

  /* ── Heró ──────────────────────────────────────────────────────────── */
  .hero { min-height: auto; padding-block: 128px 56px; }
  .hero h1 { margin-bottom: 22px; }
  .hero__lead { margin-bottom: 34px; }
  .hero__gombok { gap: 14px; }
  .hero__gombok .knapp { flex: 1 1 100%; justify-content: center; }

  /* ⚠️ A mérőszámok FLEXBEN 3+1-re törtek: három egy sorban, a negyedik
     alatta egyedül. Rácsban 2×2 lesz, és a sorok egy vonalon ülnek. */
  .hero__adat {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px var(--t5);
    margin-top: 44px;
    padding-top: 28px;
  }

  .lapfej { padding-top: 124px; padding-bottom: 52px; }
  .lapfej .bevezeto { margin-top: 20px; }

  .knapp { padding: 13px 21px; }
  .lepes { grid-template-columns: 34px minmax(0, 1fr); gap: var(--t4); }
  .lepesek { gap: 28px; }

  /* Képes kártya: alacsonyabb kép (16:9) és több hely a szöveg fölött.
     A 4:3-as kép egymás alatt négyszer egy végtelen szalag érzetét kelti. */
  .kort--kep .kort__media { aspect-ratio: 16 / 9; margin-bottom: 20px; }
  .hir__media { aspect-ratio: 16 / 9; margin-bottom: 18px; }

  /* Helykártya: a belső köz kisebb marad, mint a kártyák közti hézag. */
  .hely { padding: 22px; gap: 14px; }
  .hely__cimkek { margin-top: 2px; }

  /* Szűrősor: a pirulák több sorba törnek, kell közéjük sormagasság. */
  .szuro { gap: 18px; margin-bottom: 40px; padding-bottom: 28px; }
  .pirulak { gap: 10px; }
  .talalat-szam { margin-bottom: 28px; }

  /* Harmonika: nagyobb sorköz, hogy a címek ne érjenek össze. */
  .harm__gomb { padding: 26px 0; gap: var(--t4); }

  /* Számsor a sötét sávon: 2×2, bőségesebb köz. */
  .szamok { gap: 34px var(--t5); }

  /* Osztott blokk és idézet: több levegő a kép és a szöveg közt. */
  .osztott { gap: 40px; }
  .idezet-blokk { gap: 36px; }

  /* Nagy felhívás: a kép ne nyomja rá magát a szövegre. */
  .felhivas__kep { min-height: 176px; }
  .felhivas__szoveg { padding: 36px 24px 40px; }

  /* Lábléc: a három hasáb egymás alatt — külön kell válniuk. */
  .lablec { padding-block: 80px 32px; }
  .lablec__fo { gap: 44px; padding-bottom: 44px; }
}

@media (max-width: 420px) {
  /* A leghosszabb feliratú gombok 390 px-en tördelnének. */
  .knapp { font-size: .74rem; letter-spacing: .09em; }
}


/* ═══════════════════════════════════════════════════════════════════════
   TELEFON — LAPOK, NEM FOLYAM

   ⚠️ Mérve, nem érzésre. Telefonon a `.kort--kep`, a `.hir`, a `.lepes` és a
      `.terulet` számított háttere `rgba(0,0,0,0)`: NINCS felületük, nincs
      keretük, nincs árnyékuk. Ahol van felület (`.hely`, `.kort`), ott
      #FBF8F4 ül #F5F1EC-en — 6 pont a 255-ből, 2,5 %. Egy telefonkijelzőn
      nappali fényben ez nem létező különbség. Ezért olvad a 9586 px magas
      kezdőlap egyetlen szürke szalaggá.

   A javítás NEM „keretet mindenre" — attól webáruház-sablon lenne. Az
   arculat vezérmotívuma a FÉNY, és a fény síkokat választ el. Asztalon ezt
   a hasábköz végzi; telefonon egy hasáb van, tehát a MÉLYSÉGNEK kell
   elvégeznie: a lap alapja lejjebb lép egy tónust, a tartalom papírlapokra
   kerül, a levél éle meleg hajszálvonal, az árnyék pedig szórt, nem
   dobozos. Mivel a leveleknek most már valódi élük van, a köz SZŰKÜLHET —
   ettől a lap rövidebb és rendezettebb lesz, nem zsúfoltabb.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  :root {
    /* ⚠️ NEM írjuk felül a --csont/--len változót: azokat világos SZÖVEG-
       színként is használjuk sötét alapon (.szekcio--ko, pirula, .nap).
       Külön telefonos felület-változók kellenek. */
    --alap-m:  #E9E2D8;                  /* a lap alapja — mélyebb tónus */
    --papir-m: #FFFDFA;                  /* a levél: a legvilágosabb sík */
    --savm:    #E0D8CB;                  /* szekciósáv, lapfej, lábléc */
    --el-m:    rgba(74, 60, 42, .14);    /* a levél éle: meleg, nem szürke */
    --arny-m:  0 1px 1px rgba(74, 60, 42, .05),
               0 12px 26px -16px rgba(74, 60, 42, .34);

    /* ⚠️ A mélyebb sáv ÁRAT kér: a halk szöveg 4,45:1-re, a réz felirat
       4,40:1-re esett rajta — mindkettő a 4,5 alatt. Nem a sávot világosítjuk
       vissza (akkor elveszne a lépés, ami az egész javítás lényege), hanem a
       két szövegszínt visszük lejjebb egy fokkal. Csak telefonon, és csak
       FÖLFELÉ visz: a papírlevélen is nő a kontraszt (6,19 → 6,80).
         --halk   #605950 → 4,88 a sávon
         --rez-sz #76541E → 4,86 a sávon */
    --halk:   #605950;
    --rez-sz: #76541E;
  }

  body { background: var(--alap-m); }

  /* ── Sávok: a váltás legyen LÁTHATÓ lépés, ne sejtés ────────────────── */
  .szekcio--len, .lapfej, .lablec { background: var(--savm); }
  .szekcio--len { box-shadow: inset 0 1px 0 var(--el-m), inset 0 -1px 0 var(--el-m); }
  .lapfej { box-shadow: inset 0 -1px 0 var(--el-m); }
  .lablec { border-top-color: var(--el-m); }
  /* a fénymosás halványabb a mélyebb sávon, különben visszamossa a lépést */
  .szekcio--len::before { opacity: .5; }

  /* ── A LEVÉL ───────────────────────────────────────────────────────── */
  .kort, .kort--kep, .hir, .hely, .idezet,
  .teruletek, .harmonika, .osszegzes, .jegy {
    background: var(--papir-m);
    border: 1px solid var(--el-m);
    border-radius: var(--ker-n);
    box-shadow: var(--arny-m);
  }

  /* ── Képes levél: a fotó a levél SZÉLÉIG ér ────────────────────────── */
  .kort--kep, .hir {
    padding: 0 20px 24px;
    overflow: hidden;
  }
  .kort--kep .kort__media, .hir__media {
    margin: 0 -20px 18px;
    border-radius: 0;
    aspect-ratio: 16 / 10;
  }
  .kort--kep::before { display: none; }

  /* A sima kártya belső csillanása a világosabb papíron túl erős lenne. */
  .kort::before { opacity: .5; }

  /* ── Listalevél: a 27 sor egyetlen dokumentum, nem lebegő főkönyv ──── */
  .teruletek { padding: 4px 20px; }
  .terulet a { padding-block: 17px; }
  .terulet:last-child a { border-bottom: 0; }
  .terulet strong { font-size: 1.1rem; }
  /* a réz nyíl sort ad a lista jobb szélének — ez a vezérmotívum folytatása */
  .terulet a svg { color: var(--rez); }
  /* A leírás csak itt látszik: egy hasábban ez különbözteti meg a sorokat. */
  .terulet__alt {
    display: block;
    font-family: var(--felirat);
    font-size: .79rem;
    line-height: 1.45;
    letter-spacing: .005em;
    color: var(--halk);
    margin-top: 3px;
    padding-right: var(--t5);
  }
  .terulet a { padding-block: 15px; align-items: start; }
  .terulet a > span { margin-top: 3px; }

  /* ── Harmonika: levél, a kérdések a lapon ülnek ─────────────────────── */
  .harmonika { border-top: 0; padding: 0 20px; }
  .harm:last-child { border-bottom: 0; }

  /* ── Lépések: számozott sor, saját síkon ───────────────────────────── */
  .lepes {
    background: var(--papir-m);
    border: 1px solid var(--el-m);
    border-radius: var(--ker-n);
    box-shadow: var(--arny-m);
    padding: 20px 20px 22px;
    border-bottom: 1px solid var(--el-m);
  }
  .lepesek { gap: 14px; }

  /* ── Idézet: a levélen a rézvonás vezeti be ────────────────────────── */
  .idezet { max-width: none; padding: 26px 22px 28px; }
  .idezet::before {
    content: '';
    display: block;
    width: 34px; height: 2px;
    background: var(--rez);
    margin-bottom: 18px;
  }

  /* ── A köz szűkülhet: a leveleknek már van éle ─────────────────────── */
  .racs { gap: 26px; }
  .racs--3[style*="gap:48px"], .racs--2[style*="gap:48px"] { gap: 26px !important; }
  .szekcio { padding-block: 72px; }
  .szekcio--kicsi { padding-block: 52px; }
  .fej { margin-bottom: 36px; }

  /* ── Foglaló: az összegzés és a jegy is önálló sík ──────────────────── */
  .osszegzes { position: static; }
  .idosav, .nap { background: var(--papir-m); border-color: var(--el-m); }
  .idosav { border-width: 1px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ⚠️ EZ A BLOKK A FÁJL VÉGÉN ÁLL, ÉS OTT IS KELL MARADNIA.

   A média-lekérdezés NEM ad specificitást. A fentebbi
   `@media (max-width: 620px) { .knapp { padding: 13px 21px } }` azonos
   erősségű a `.fejlec__belep`-pel, tehát a KÉSŐBBI nyer. Amikor ez a blokk
   feljebb állt, a `padding: 0` némán hatástalan maradt, a gomb belső
   szélessége nullára esett, és az ikon eltűnt belőle — a keret viszont
   látszott, így a hiba csak a kirenderelt képen derült ki.
   ═══════════════════════════════════════════════════════════════════════ */
/* ⚠️ 440 px alatt a tömör réz gomb + a menügomb kitölti a teljes fejlécsávot,
   és a logóval versenyez — ez a lap legzsúfoltabb pontja telefonon. A gombot
   nem rejtjük el (ez a legfontosabb művelet), hanem a menügombbal AZONOS
   korong-formára hozzuk: két egyforma ikonkorong + a jel nyugodt fejlécet ad.
   A felirat a mobil fiókban megmarad, tehát a jelentés nem vész el. */
@media (max-width: 440px) {
  .fejlec__belep span, .fejlec__belep .csak-szeles { display: none; }
  .fejlec__belep {
    width: 40px; height: 40px;
    padding: 0; gap: 0;
    display: inline-grid; place-items: center;
    background: transparent;
    color: var(--szoveg);
    border-color: var(--vonal);
  }
  .fejlec__belep:hover { background: rgba(30, 31, 28, .05); transform: none; box-shadow: none; }
  .fejlec__belep svg { width: 18px; height: 18px; }
  .fejlec[data-allapot='atlatszo'] .fejlec__belep {
    color: #F2EBE2;
    border-color: rgba(255, 255, 255, .3);
  }
  .fejlec__jobb { gap: 10px; }
}

@media (max-width: 360px) {
  .fejlec__jel svg { width: 30px; height: 30px; }
  .jel-szo { font-size: 1.26rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   FOGLALÁS

   A foglaló külön PHP alkalmazás, de ugyanaz az oldal: ugyanez a stíluslap
   szolgálja ki. Így nincs két igazság a gombok és a mezők méretéről.

   ⚠️ Ez a rész a build során az `beautydesigner.css` VÉGÉRE fűződik, a 440 px-es
      fejléc-szabályok után. Nem nyúl a `.knapp` alapértékeihez — csak új
      osztályokat ad hozzá —, így a sorrend nem okoz csendes felülírást.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Lépcső ───────────────────────────────────────────────────────────── */
.lepcso {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t3) var(--t5);
  list-style: none;
  margin-bottom: var(--t7);
  padding-bottom: var(--t5);
  border-bottom: 1px solid var(--vonal);
}
.lepcso__elem { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lepcso__szam {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--vonal);
  font-family: var(--felirat);
  font-size: .78rem;
  color: var(--halk);
}
.lepcso__nev {
  font-family: var(--felirat);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--halk);
}
.lepcso__elem[data-allapot="most"] .lepcso__szam {
  background: var(--tinta); border-color: var(--tinta); color: var(--csont);
}
.lepcso__elem[data-allapot="most"] .lepcso__nev { color: var(--tinta); font-weight: 500; }
.lepcso__elem[data-allapot="kesz"] .lepcso__szam {
  background: var(--rez-gomb); border-color: var(--rez-gomb); color: #fff;
}

/* ── Naptár ───────────────────────────────────────────────────────────── */
.naptar { border: 1px solid var(--vonal); border-radius: var(--ker-n); overflow: hidden; }
.naptar__fej {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--t4) var(--t5);
  border-bottom: 1px solid var(--vonal);
  background: #FBF8F4;
}
.naptar__fej strong { font-family: var(--kijelzo); font-size: 1.1rem; font-weight: 400; }
.naptar__lep {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--vonal);
  border-radius: 999px;
  color: var(--szoveg);
  text-decoration: none;
  flex: none;
}
.naptar__lep:hover { background: var(--len); }

/* ⚠️ Vízszintesen görgethető sáv: 14 nap 320 px-en nem fér ki, és a
   tördelés szétesne. A görgetés a SAJÁT dobozában marad, nem a lapon. */
.naptar__sav {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: var(--t3);
  background: var(--len);
}
.nap {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 74px;
  padding: 12px 6px 10px;
  border-radius: var(--ker);
  background: #FBF8F4;
  text-align: center;
  text-decoration: none;
  color: var(--szoveg);
  border: 1px solid transparent;
  transition: background var(--ido-gyors), border-color var(--ido-gyors);
}
.nap:hover { background: #fff; border-color: var(--vonal); }
.nap__nev {
  display: block;
  font-family: var(--felirat); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--halk);
}
.nap__szam {
  display: block;
  font-family: var(--kijelzo); font-size: 1.5rem; font-weight: 300;
  line-height: 1.1; margin-top: 2px; color: var(--tinta);
}
.nap__db {
  display: block; margin-top: 4px;
  font-family: var(--felirat); font-size: .68rem; color: var(--rez-sz);
}
.nap[data-most="1"] { background: var(--tinta); border-color: var(--tinta); }
.nap[data-most="1"] .nap__nev,
.nap[data-most="1"] .nap__db { color: rgba(245, 241, 236, .74); }
.nap[data-most="1"] .nap__szam { color: var(--csont); }
.nap[data-ures="1"] { opacity: .45; }
.nap[data-ures="1"] .nap__db { color: var(--halk); }

/* ── Idősávok ─────────────────────────────────────────────────────────── */
.idosavok {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: var(--t3);
}
.idosav {
  display: grid; place-items: center;
  padding: 15px 8px;
  border: 1px solid var(--vonal);
  border-radius: var(--ker);
  background: #FBF8F4;
  font-family: var(--felirat);
  font-size: 1.02rem;
  letter-spacing: .03em;
  color: var(--tinta);
  text-decoration: none;
  transition: background var(--ido-gyors), border-color var(--ido-gyors), transform var(--ido-gyors);
}
.idosav:hover {
  background: var(--tinta); border-color: var(--tinta); color: var(--csont);
  transform: translateY(-1px);
}

/* ── Űrlap ────────────────────────────────────────────────────────────── */
.foglalo {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) {
  .foglalo { grid-template-columns: minmax(0, 1fr); }
  .foglalo .osszegzes { order: -1; }
}

.urlap { display: grid; gap: var(--t5); }
.urlap--kesk { max-width: 420px; }
.urlap__racs { display: grid; gap: var(--t5); }

.mezo { display: block; min-width: 0; }
.mezo__cimke {
  display: block;
  font-family: var(--felirat);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--tinta);
  margin-bottom: 8px;
}
.mezo__cimke em { font-style: normal; font-weight: 400; color: var(--halk); }
.beir {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--vonal);
  border-radius: var(--ker);
  background: #FCFAF7;
  font-family: var(--felirat);
  font-size: 1rem;
  color: var(--tinta);
}
.beir::placeholder { color: var(--halk); opacity: .75; }
.beir:focus {
  outline: none;
  border-color: var(--rez);
  box-shadow: 0 0 0 3px rgba(163, 129, 63, .14);
}
.beir[aria-invalid="true"] { border-color: #9A3412; background: #FDF6F3; }
textarea.beir { resize: vertical; min-height: 88px; line-height: 1.55; }

/* ⚠️ A csupasz `select` a böngésző saját szürke doboza marad — sötétebb
   témán és Windowson kirívóan idegen. Saját háttér és saját nyíl kell rá. */
select.beir {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23665F57' stroke-width='1.6'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.mezo__hiba {
  display: block; margin-top: 7px;
  font-family: var(--felirat); font-size: .82rem; color: #9A3412;
}
.mezo__sug {
  display: block; margin-top: 7px;
  font-family: var(--felirat); font-size: .8rem; color: var(--halk);
}

.csoport { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.csoport legend { padding: 0; margin-bottom: 4px; }

.valaszt {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 18px;
  border: 1px solid var(--vonal);
  border-radius: var(--ker);
  background: #FBF8F4;
  cursor: pointer;
  transition: border-color var(--ido-gyors), background var(--ido-gyors);
}
.valaszt:hover { border-color: rgba(30, 31, 28, .3); }
.valaszt input { margin-top: 3px; flex: none; accent-color: var(--rez-gomb); width: 17px; height: 17px; }
.valaszt:has(input:checked) { border-color: var(--rez); background: rgba(163, 129, 63, .07); }
.valaszt__cim {
  display: block; font-family: var(--felirat); font-size: .96rem;
  font-weight: 500; color: var(--tinta);
}
.valaszt__alcim {
  display: block; font-family: var(--felirat); font-size: .84rem; color: var(--halk); margin-top: 2px;
}

.knapp--nagy { padding: 17px 32px; font-size: .84rem; justify-self: start; }

/* ── Összegzés ────────────────────────────────────────────────────────── */
.osszegzes {
  background: var(--len);
  border-radius: var(--ker-n);
  padding: var(--t5) var(--t5) var(--t6);
  position: sticky;
  top: 96px;
  min-width: 0;
}
.osszegzes h2 { margin-bottom: var(--t4); }
.osszegzes dl { display: grid; gap: var(--t4); margin-bottom: var(--t5); }
.osszegzes dt {
  font-family: var(--felirat); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rez-sz); margin-bottom: 5px;
}
.osszegzes dd { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--tinta); }

/* ── Jegy ─────────────────────────────────────────────────────────────── */
.jegy {
  border: 1px solid var(--vonal);
  border-radius: var(--ker-n);
  background: #FBF8F4;
  overflow: hidden;
  box-shadow: var(--arny-2);
}
.jegy__fej {
  display: flex; align-items: center; gap: var(--t4); flex-wrap: wrap;
  padding: var(--t5);
  background: var(--ko);
}
.jegy__fej .cimke { color: var(--rez-halk); }
.jegy__fej .cimke::after { display: none; }
.jegy__ref {
  font-family: var(--felirat); font-size: 1.5rem; font-weight: 500;
  letter-spacing: .1em; color: #FBF7F1; margin-right: auto;
}
.jelolo {
  font-family: var(--felirat); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: #F3EDE4;
}
.jelolo--le { background: rgba(154, 52, 18, .34); color: #F8E2D9; }
.jegy__adat { display: grid; gap: var(--t5); padding: var(--t6) var(--t5); margin: 0; }
@media (min-width: 620px) { .jegy__adat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jegy__adat > div { min-width: 0; }
.jegy__adat dt {
  font-family: var(--felirat); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rez-sz); margin-bottom: 6px;
}
.jegy__adat dd { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--tinta); overflow-wrap: anywhere; }
.jegy__adat a { color: var(--rez-sz); }

/* ── Üzenetek ─────────────────────────────────────────────────────────── */
.uzenet {
  border-radius: var(--ker);
  padding: 16px 20px;
  margin-bottom: var(--t5);
  font-size: .98rem;
}
.uzenet p { margin: 0; display: flex; align-items: center; gap: 10px; }
.uzenet--jo { background: rgba(90, 116, 70, .13); color: #3A4C2C; }
.uzenet--baj { background: rgba(154, 52, 18, .1); color: #8A3212; }

/* ── Admin ────────────────────────────────────────────────────────────── */
.admin__fej {
  display: flex; flex-wrap: wrap; gap: var(--t4); align-items: center;
  margin-bottom: var(--t6); padding-bottom: var(--t5);
  border-bottom: 1px solid var(--vonal);
}
.admin__szuro { display: flex; gap: var(--t3); align-items: center; }
.admin__szuro .beir { padding: 9px 14px; font-size: .9rem; }
.pirulak a.pirula { text-decoration: none; display: inline-block; }
.pirula[aria-current="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--csont); }
.pirula[aria-current="true"] .halk { color: rgba(245, 241, 236, .72); }

/* ⚠️ A táblázat a SAJÁT dobozában görög. Ha a lap görögne helyette,
   320 px-en az egész elrendezés elcsúszna. */
.tabla-doboz { overflow-x: auto; margin-inline: calc(var(--t5) * -1); padding-inline: var(--t5); }
.tabla-admin { width: 100%; border-collapse: collapse; min-width: 740px; }
.tabla-admin th {
  text-align: left; padding: 0 var(--t4) var(--t3) 0;
  font-family: var(--felirat); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rez-sz);
  border-bottom: 1px solid var(--vonal); white-space: nowrap;
}
.tabla-admin td {
  padding: var(--t4) var(--t4) var(--t4) 0;
  border-bottom: 1px solid var(--vonal-h);
  font-size: .95rem; vertical-align: top;
}
.tabla-admin code {
  font-family: var(--felirat); font-size: .9rem; letter-spacing: .08em; color: var(--tinta);
}
.tabla-admin .jelolo { background: var(--len); color: var(--halk); margin-top: 6px; display: inline-block; }
.tabla-admin .jelolo--le { background: rgba(154, 52, 18, .1); color: #8A3212; }

.level {
  border: 1px solid var(--vonal); border-radius: var(--ker);
  background: #FBF8F4; padding: var(--t5); margin-bottom: var(--t4);
}
.level header { display: grid; gap: 4px; margin-bottom: var(--t4); }
.level header .halk { font-family: var(--felirat); font-size: .84rem; }
.level pre {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--felirat); font-size: .9rem; line-height: 1.6; color: var(--szoveg);
}

@media (max-width: 620px) {
  .lepcso { gap: 10px var(--t4); margin-bottom: var(--t6); }
  .lepcso__nev { font-size: .76rem; }
  .idosavok { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
  .osszegzes { position: static; }
  .jegy__fej { padding: var(--t5) 20px; }
  .jegy__adat { padding: var(--t5) 20px; gap: var(--t5); }
  .knapp--nagy { width: 100%; justify-content: center; }
  .admin__szuro { width: 100%; }
  .admin__szuro .mezo { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Tartalomkezelő (admin)
   ═══════════════════════════════════════════════════════════════════════ */
.cms { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .cms { grid-template-columns: 1fr; } }

.cms-menu {
  position: sticky; top: 96px;
  border: 1px solid var(--vonal); border-radius: 4px;
  background: var(--papir); overflow: hidden;
  max-height: 70vh; overflow-y: auto;
}
@media (max-width: 860px) { .cms-menu { position: static; max-height: 240px; } }

.cms-menu__tetel {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 13px; border-bottom: 1px solid var(--vonal);
  font-family: var(--felirat); font-size: .8rem; color: var(--szoveg);
  text-decoration: none; min-height: 40px;
}
.cms-menu__tetel:last-child { border-bottom: 0; }
.cms-menu__tetel:hover { background: var(--len); }
.cms-menu__tetel b { color: var(--halk); font-weight: 500; font-size: .72rem; }
.cms-menu__tetel--aktiv { background: var(--tinta); color: var(--csont); }
.cms-menu__tetel--aktiv b { color: rgba(245, 241, 236, .7); }

.cms-fej { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.cms-db { font-family: var(--felirat); font-size: .76rem; color: var(--halk); }

.cms-mezo { padding: 14px 0; border-bottom: 1px solid var(--vonal); }
.cms-mezo:last-of-type { border-bottom: 0; }

/* A megváltoztatott mezőt a sárgaréz hajszálvonal jelöli — ugyanaz a
   vezérmotívum, mint a lapon a szerepcímkék alatt. */
.cms-mezo--valtozott { border-left: 2px solid var(--rez); padding-left: 14px; margin-left: -16px; }

.cms-eredeti {
  margin: 6px 0 0; font-family: var(--felirat); font-size: .74rem; color: var(--halk);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.cms-eredeti span { color: var(--szoveg); opacity: .75; }
.cms-vissza {
  border: 1px solid var(--vonal); background: none; border-radius: 999px;
  padding: 3px 10px; font: inherit; color: var(--rez-sz); cursor: pointer; min-height: 26px;
}
.cms-vissza:hover { background: var(--len); }

.cms-gombok { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cms-arvak { margin: 8px 0 12px; padding-left: 18px; font-size: .82rem; }

.cms-kepek { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 18px; }
.cms-kep { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start;
           border: 1px solid var(--vonal); border-radius: 4px; padding: 10px; background: var(--papir); }
.cms-kep img { width: 96px; height: 72px; object-fit: cover; border-radius: 3px; display: block; background: var(--len); }
.cms-kep b { display: block; font-family: var(--felirat); font-size: .8rem; }
.cms-kep span { display: block; font-size: .74rem; color: var(--halk); margin: 2px 0 8px; }
.beir--fajl { padding: 6px; font-size: .74rem; }
.knapp--kicsi { padding: 6px 14px; font-size: .76rem; margin-top: 6px; }

/* A blokkcím a mezők fölött: ugyanaz a tagolás, amit a látogató a lapon lát. */
.cms-blokk {
  font-family: var(--felirat); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rez-sz);
  margin: 26px 0 2px; padding-top: 14px; border-top: 1px solid var(--vonal);
}
.cms-blokk:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.cms-sug {
  margin: 6px 0 0; font-family: var(--felirat); font-size: .74rem;
  color: var(--halk); line-height: 1.5;
}
.cms-sug code { font-size: .92em; background: var(--len); padding: 1px 4px; border-radius: 2px; }