/* ==========================================================================
   NetDoktor — LAKOSSAGI VIZUALIS RETEG
   --------------------------------------------------------------------------
   HATOKOR: a lakossagi/paciens oldalak (`body.dm-demo`). A `/lakossagi-
   szolgaltatasok` a TELJES lap-temat kapja (`dm-t-paciens`), a `/gyik`, az
   `/adatvedelem` es az `/idopontfoglalas-feltetelei` CSAK a fejlecet
   (`dm-a-paciens`) — a tartalmuk megjelenese valtozatlan marad.
   Mas oldal nem hivatkozik erre a fajlra.

   EREDET: a jovahagyott `/demmo/paciensek` bemutatolap stiluslapja. A fajlt
   NEM kezzel szerkesztjuk: a `tools/lakossagi-css.pl` allitja elo a
   `demmo/assets/demmo.css`-bol, hogy a dizajnnak egyetlen forrasa legyen.

   ELTERES A BEMUTATOTOL (szandekos, eles kornyezet):
     *  a bemutato-specifikus blokkok kimaradnak (celcsoport-valto utility-sav,
        „bemutato valtozat" jelzes, belepo oldal, visszateres-sav,
        foglalas-vazlat, app-mockup),
     *  a `Bemutato valtozat` jelzes kimarad; a utility-savon csak a
        celcsoport-valto all,
     *  a kephivatkozasok a `/assets/approved/lakossagi` mappara mutatnak, nem a `/demmo` fara.
   ========================================================================== */


/* ============================================ 0. BEMUTATO-PALETTA ========
   Hideg, neutralis-kekes feher skala. A NetDoktor kek marad a markaszin, a
   narancs pedig kizarolag akcio- es kiemeloszin. Egyetlen meleg (sargas)
   hattertonus sincs a rendszerben.                                          */

.dm-demo {
  --dm-cool-000: #ffffff;
  --dm-cool-050: #fbfdfd;
  --dm-cool-100: #f6f9fa;
  --dm-cool-200: #f0f5f6;
  --dm-cool-300: #e6eef0;

  /*  3. hatterszint: hatarozottabb, de tovabbra is vilagos NetDoktor-tonus.
      Nem szurke es nem tulzottan kek: a zold csatorna magas, ezert turkizes
      marad (HSL kb. 194deg / 39% / 94%) — friss, egeszsegugyi, premium.  */
  --dm-surface-3: #e9f3f6;

  --dm-hairline:        rgba(12, 92, 122, 0.10);
  --dm-hairline-strong: rgba(12, 92, 122, 0.16);

  --dm-radius-pill: 999px;
  --dm-audbar-h: 2.375rem;   /* 38 px — vekony utility-sav */
}

@media (max-width: 47.999rem) {
  .dm-demo { --dm-audbar-h: 2.25rem; }   /* 36 px */
}



/* ================================ 1. BEMUTATO-SCOPE ES VAZELTOLAS ========
   Az utility-sav a fix fejlec FOLE kerul, ezert a fejlecet es a fotartalom
   felso kitolteset ugyanannyival lejjebb kell tolni. Egyetlen tokenbol.     */

.dm-demo .gs-header { inset-block-start: var(--dm-audbar-h); }

/* Nem-flush oldalak: a shell a `--header-height`-tal kompenzal, ide jon a sav. */
.dm-demo .gs-page__main { padding-block-start: calc(var(--header-height) + var(--dm-audbar-h)); }

/* Flush oldalak: ott a hero sajat felso terkoze kompenzal. */
.dm-demo .gs-page--flush .gs-page__main { padding-block-start: 0; }
.dm-demo .gs-page--flush .gs-page__main > .gs-hero {
  padding-block-start: calc(var(--header-clearance) + var(--dm-audbar-h));
}
@media (max-width: 47.999rem) {
  .dm-demo .gs-page--flush .gs-page__main > .gs-hero {
    padding-block-start: calc(var(--header-clearance-sm) + var(--dm-audbar-h));
  }
}

/* A horgonyos bemutato-navigacio miatt minden szekcio a fix fejlec ALATT
   alljon meg, kulonben a cim a navigacio moge csuszik. */
.dm-demo [id] { scroll-margin-block-start: calc(var(--header-height) + var(--dm-audbar-h) + 0.75rem); }
.dm-demo { scroll-behavior: smooth; }

/* A fejlec also hajszalvonala kotelezo: az utility-sav es a fejlec ugyanabbol
   a vilagos csaladbol valo, igy ez valasztja el a tartalomtol. */
.dm-demo .gs-header { border-block-end: 1px solid var(--dm-hairline); }


/* ================================ 2. UTILITY-SAV + CELCSOPORT-VALTO ======
   Vekony, vilagos sav a fejlec folott. Nem onallo fejlec: azonos vilagos
   csaladbol valo, mint a fejlec, es csak egy hajszalvonal valasztja el.
   Balra a diszkret bemutato-jelzes, jobbra a valto.                        */

.dm-audbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: calc(var(--z-header) + 1);
  min-block-size: var(--dm-audbar-h);
  display: flex;
  align-items: center;
  background: var(--dm-cool-100);
  border-block-end: 1px solid var(--dm-hairline);
  color: var(--nd-ink-500, #5a6b72);
}

.dm-audbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  inline-size: 100%;
}

@media (max-width: 35.999rem) {
  .dm-audbar__inner { justify-content: space-between; gap: 0.5rem; }
}

/* --- a valto: minimal szoveges kapcsolo --------------------------------- */

.dm-switch {
  display: flex;
  align-items: stretch;
  margin-inline-end: -0.5rem;   /* a szoveg optikailag a raccsal egy vonalban */
}

.dm-switch__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.6875rem;
  font-size: 0.6875rem;         /* 11 px */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--nd-ink-500, #5a6b72);
  transition: color 180ms var(--ease-standard, ease);
}

/* Hajszalvekony elvalaszto a ket allapot kozott. */
.dm-switch__link + .dm-switch__link::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0.5rem;
  inline-size: 1px;
  background: var(--dm-hairline-strong);
}

.dm-switch__link:hover,
.dm-switch__link:focus-visible { color: var(--nd-ink-900, #16303d); }

/* AKTIV allapot: sotetebb tinta + vekony also jel. Nincs kitoltott pirula. */
.dm-switch__link[aria-current="true"] {
  color: var(--nd-deep-700, #0c5c7a);
  font-weight: 700;
}
.dm-switch__link[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0.6875rem;
  inset-block-end: -1px;
  block-size: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--nd-deep-600, #17a0bf);
}

/* Pacienskornyezet: az aktiv jel narancs — ez az egyetlen narancs a savon. */
.dm-t-paciens .dm-switch__link[aria-current="true"] { color: var(--nd-warm-700, #d96c0f); }
.dm-t-paciens .dm-switch__link[aria-current="true"]::after { background: var(--nd-warm-600, #f6851f); }

@media (max-width: 29.999rem) {
  .dm-switch__link { padding-inline: 0.5rem; letter-spacing: 0.05em; }
}

/* --- a valto a mobil fiokban -------------------------------------------
   Nyitott mobilmenuben a fiok (z-index 300) eltakarja a fix savot, ezert a
   valto a fiok tetejen is ott van. Ott nincs korulotte utility-sav, ezert
   kap egy visszafogott, vilagos alatetet.                                  */

.dm-drawer-switch {
  background: var(--dm-cool-100);
  border: 1px solid var(--dm-hairline);
  border-radius: var(--radius-md);
  padding: 0.25rem;
  margin-block-end: 1.25rem;
}
.dm-switch--fiok { display: grid; grid-template-columns: 1fr 1fr; margin-inline-end: 0; }
.dm-switch--fiok .dm-switch__link { justify-content: center; padding-block: 0.5625rem; }
.dm-switch--fiok .dm-switch__link[aria-current="true"] {
  background: var(--surface);
  border-radius: calc(var(--radius-md) - 0.25rem);
  box-shadow: 0 1px 3px rgba(12, 92, 122, 0.10);
}
.dm-switch--fiok .dm-switch__link[aria-current="true"]::after { inset-block-end: 0.3125rem; inset-inline: 1.25rem; }
.dm-switch--fiok .dm-switch__link + .dm-switch__link::before { display: none; }


/* ============================================== 5. PACIENS-HANGULAT ======
   NEM uj marka: a NetDoktor kek marad a markaszin, a tipografia, a hexagon
   motivum es a feher kartyak valtozatlanok. A hatterek HIDEG, neutralis-
   kekes feherre valtanak (#F4F7F8 csalad) — sehol nincs meleg/sargas tonus —,
   a narancs pedig kizarolag akcio- es kiemeloszinkent jelenik meg.        */

.dm-t-paciens {
  --surface-alt:    #f4f7f8;
  --surface-sunken: #f9fbfc;
  --nd-mist-100:    #f4f7f8;
  --nd-mist-050:    #f9fbfc;
}

body.dm-t-paciens { background: var(--dm-cool-050); }

/* Vilagos szekciovaltozatok: tiszta feher / hideg neutralis valtakozas. */
.dm-t-paciens .nd-section-light { background: var(--dm-cool-000); }
.dm-t-paciens .nd-section-mist  { background: var(--dm-cool-100); }
.dm-t-paciens .nd-section-tint  { background: var(--dm-cool-200); }
.dm-t-paciens .gs-section--alt  { background: var(--dm-cool-100); }

/*  SZEKCIORITMUS — harom hatterszint.
    A besorolast a builder (`hatter_ritmus`) vegzi TARTALOM alapjan, nem
    `nth-child`-del: az osszetartozo szekciok azonos szintet kapnak.
    A hatter mindig a teljes viewport-szelesseget kitolti, a belso
    `gs-container` szelessege valtozatlan. Elvalaszto vonal NINCS — magat
    az elkulonitest a hatterlepcso adja.
      1 = feher                 2 = nagyon halvany hideg
      3 = hatarozottabb turkizes tonus (a fo ritmust ez adja)             */
.dm-t-paciens .dm-bg--1 { background: var(--dm-cool-000); }
.dm-t-paciens .dm-bg--2 { background: var(--dm-cool-100); }
.dm-t-paciens .dm-bg--3 { background: var(--dm-surface-3); }

/* Kiemelesek: eyebrow, jelolonegyzetek, aktiv menupont narancsban. */
.dm-t-paciens .gs-section__eyebrow:not(.nd-hex .gs-section__eyebrow) { color: var(--nd-warm-700, #d96c0f); }
.dm-t-paciens .gs-nav__link[aria-current="page"] { color: var(--nd-warm-700, #d96c0f); }

/* A pipa-jel hideg alatetet kap, maga a pipa narancs — igy a narancs
   kiemeles marad, nem szinezi at a feluletet. */
.dm-t-paciens .nd-checklist__mark {
  color: var(--nd-warm-700, #d96c0f);
  background: var(--dm-cool-200);
}

.dm-t-paciens .nd-header .nd-btn-accent { box-shadow: 0 8px 20px rgba(214, 108, 15, 0.22); }

/* --- lakossagi hero: vilagos, hideg valtozat ----------------------------
   A belepo paciens-fele vilagos; ha innen egy sotet savra erkezne a nezo, a
   ket kepernyo szetesne. Ezert a lakossagi hero ugyanazt a hideg gradienst
   kapja, mint a belepo jobb fele. A SZERKEZET, a mockup, a szoveg es minden
   muvelet valtozatlan — csak a hatter es a szovegszinek fordulnak at.
   (A `nd-hex` alapertelmezesben feher tintat kenyszerit, ezert kell a lenti
   nehany celzott felulriras.)                                             */

.dm-t-paciens .nd-lakhero {
  color: var(--nd-ink-900, #16303d);
  border-block-end: 1px solid var(--dm-hairline);
}

/* A `nd-hex` sajat hexagon-retege KIKAPCSOLVA a lakossagi heron: a
   fejlec-hatterkepben mar van finom geometriai textura, a ketto egymasra
   rajzolva zsufolt lenne. (Az orvosi feluleteket ez NEM erinti.) */
.dm-t-paciens .nd-lakhero::before { display: none; }

.dm-t-paciens .nd-lakhero p,
.dm-t-paciens .nd-lakhero .gs-hero__lead,
.dm-t-paciens .nd-lakhero .nd-rating { color: var(--nd-ink-600, #3f5560); }
.dm-t-paciens .nd-lakhero .nd-rating--plain { color: var(--nd-ink-500, #5a6b72); }
.dm-t-paciens .nd-lakhero strong { color: var(--nd-ink-900, #16303d); }

.dm-t-paciens .nd-lakhero .gs-section__eyebrow,
.dm-t-paciens .nd-lakhero__eyebrow { color: var(--nd-warm-700, #d96c0f); }
.dm-t-paciens .nd-lakhero__accent  { color: var(--nd-warm-600, #f6851f); }

/* A masodlagos CTA sotet savra keszult (tomor feher gomb); vilagos alapon
   korvonalas valtozatra van szukseg, kulonben eltunik a hatteren. */
.dm-t-paciens .nd-lakhero .nd-btn-on-light {
  background: var(--surface);
  border-color: var(--dm-hairline-strong);
  color: var(--nd-deep-700, #0c5c7a);
  box-shadow: 0 1px 2px rgba(12, 92, 122, 0.06);
}
.dm-t-paciens .nd-lakhero .nd-btn-on-light:hover {
  background: var(--dm-cool-100);
  border-color: var(--nd-deep-600, #17a0bf);
}


/* ================== 5/b. LAKOSSAGI FEJLEC-HATTERKEP =====================
   Kozos hatterkep MINDEN paciens-fejlecen: a lakossagi hero (`nd-lakhero`)
   es az aloldalak fejrésze (`dm-pagehero`). Az orvosi feluleteket NEM erinti.

   A kep 1774x887 (2:1), vilagos, hideg-kek; a bal/kozepso resze nyugodt
   negativ ter, a latvanyos geometria (hullamok, hexagonok) a JOBB oldalon ul.

   MERETEZES
     * `cover` + `no-repeat` — nincs torzulas es nincs ismetlodes.
     * Asztali nezeten a doboz aranya SZELESEBB, mint a kepe, ezert a
       bongeszo szelessegre skalaz es fuggolegesen vag: a teljes kepszelesseg
       latszik, vagyis a geometria ott marad, ahol lennie kell — jobbra, az
       app-mockup mogott. A fuggoleges fokuszpont 42%, ott halad at a nagy
       hullam es ott ulnek a hexagonok.
     * Szuk nezeten a doboz MAGASABB, mint szeles, ezert magassagra skalaz es
       vizszintesen vag. Ott a fokuszpont kulon van hangolva (lasd lentebb).

   OVERLAY: csak egy NAGYON enyhe, vilagos mosas balrol — pontosan ott, ahol a
   szoveg all. 60% utan teljesen eltunik, hogy a jobb oldali geometria tiszta
   maradjon. Sotet overlay SEHOL nincs.                                      */

.dm-t-paciens .nd-lakhero,
.dm-pagehero {
  background-color: var(--dm-cool-100);      /* tartalek, ha a kep nem tolt be */
  background-image:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.30) 34%,
      rgba(255, 255, 255, 0.00) 60%),
    url("/assets/approved/lakossagi/paciensek-header-bg.png");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center center, center 42%;
}

/* Szuk nezet: a kep magassagra skalazodik, ezert vizszintesen kell fokuszalni.
   68% -> a nagy hullam es nehany hexagon belefer, de a szoveg mogott megmarad
   a vilagos felulet; a mosas itt egyenletes, hogy a felirat mindenhol tiszta. */
@media (max-width: 47.999rem) {
  .dm-t-paciens .nd-lakhero,
  .dm-pagehero {
    background-image:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.22) 60%,
        rgba(255, 255, 255, 0.08) 100%),
      url("/assets/approved/lakossagi/paciensek-header-bg.png");
    background-position: center center, 72% center;
  }
}


/* ================================ 7. EGYSZERU BEMUTATO-OLDALAK ==========
   A paciens aloldalak (idopontfoglalas, app, segitseg, GYIK, adatvedelem)
   kozos, tomor fejrésze es lepessora.                                      */

.dm-pagehero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);
  border-block-end: 1px solid var(--dm-hairline);
}

/* A shell morzsaja onallo, kitoltott sav; a bemutato oldalfejen belul viszont
   csak feliratkent kell — kulonben idegen csik ul a gradiensen. */
.dm-pagehero .gs-breadcrumb {
  background: transparent;
  border-block-end: 0;
  padding-block: 0;
  margin-block-end: 1.375rem;
}

.dm-pagehero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nd-warm-700, #d96c0f);
  margin-block-end: 0.75rem;
}
.dm-pagehero__eyebrow::before {
  content: "";
  inline-size: 1.625rem;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
}
.dm-pagehero__title {
  margin: 0;
  font-size: var(--font-size-title);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
}
.dm-pagehero__lead {
  margin: 0.875rem 0 0;
  max-inline-size: 44rem;
  font-size: var(--font-size-lg);
  line-height: 1.62;
  color: var(--nd-ink-600, #3f5560);
}
.dm-pagehero__actions { margin-block-start: 1.625rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --- ikondoboz vilagos kartyan ------------------------------------------
   A shell `nd-iconblock__icon`-ja SOTET savra keszult (fehér 16% alap), a
   maszkos `nd-ico` pedig onallo, 20 px-es elem — a ketto egy osztalylistaban
   utkozne. Ezert a bemutato kartyai sajat, vilagos hatteru ikondobozt
   hasznalnak, es az `nd-ico`-t VALTOZATLANUL, belso elemkent teszik bele.  */

.dm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: none;
  border-radius: var(--radius-md);
  margin-block-end: 0.9375rem;
  background: rgba(12, 92, 122, 0.07);
  color: var(--nd-deep-700, #0c5c7a);
}
/*  IKONMERET — a keret 44 px, ezert 34 px-es glif kell, hogy a rajz
    tenylegesen kitoltse. Bongeszoben merve: 22 px glif -> 19 px tinta ->
    12,4 px margo (44% kitoltes). 34 px glif -> 32,6 px tinta -> 5,7 px
    margo (74% kitoltes). A keret merete VALTOZATLAN.                   */
.dm-icon .nd-ico { inline-size: 2.125rem; block-size: 2.125rem; }

/* Pacienskornyezet: hideg alatet, NARANCS ikon — kiemeles, nem hattérszin. */
.dm-t-paciens .dm-icon {
  background: var(--dm-cool-200);
  color: var(--nd-warm-700, #d96c0f);
}

/* --- lepessor ----------------------------------------------------------- */

.dm-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.125rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  counter-reset: dm-step;
}
.dm-steps__item {
  position: relative;
  padding: 1.625rem 1.375rem 1.375rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--dm-hairline);
  box-shadow: 0 1px 2px rgba(12, 92, 122, 0.04);
}
.dm-steps__item::before {
  counter-increment: dm-step;
  content: counter(dm-step);
  position: absolute;
  inset-block-start: -0.875rem;
  inset-inline-start: 1.375rem;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9e42 0%, #f6851f 100%);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(214, 108, 15, 0.24);
}
.dm-steps__title { margin: 0 0 0.4375rem; font-size: var(--font-size-lg); letter-spacing: -0.01em; }
.dm-steps__text  { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.62; }

/* --- bemutato-megjegyzes (mit lat a nezo, mi keszul kesobb) --------------
   Hideg alap, narancs jelzocsik — a narancs igy kiemeles marad.           */

.dm-note {
  margin-block-start: 1.625rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--dm-cool-100);
  border: 1px solid var(--dm-hairline);
  border-inline-start: 3px solid var(--nd-warm-600, #f6851f);
  font-size: var(--font-size-sm);
  line-height: 1.62;
  color: var(--nd-ink-600, #3f5560);
}
.dm-note strong { color: var(--nd-ink-900, #16303d); }
.dm-note--kozep { max-inline-size: 56rem; margin-inline: auto; }

/* Kozepre igazitott muveletsor (pl. az aruhaz-gombok a letoltes savon). */
.dm-center { justify-content: center; }

/* Lablec-megjegyzes: „ez bemutato felulet". */
.dm-footnote { opacity: 0.7; margin-block-start: 0.75rem; }

/* Bemutato-linkek: latszolag mukodnek, de nem visznek ki az eles oldalra. */
.dm-inert { cursor: default; }


/* ============================================ 7/b. FOTOHELYEK ===========
   Emberkozpontu fotoblokkok elore kialakitott, EGYSEGES helye.

   MIERT IGY: a vegleges emberi fotokat a megrendelo keszitteti, ezert ide
   most SEMMILYEN stockfoto vagy generalt szemely nem kerul. Helyettuk egy
   elegans, vilagos placeholder all, amely MEGMONDJA, milyen temaju kep varja
   a helyet, es milyen technikai parameterekkel.

   CSERE: a `<figure class="dm-photo">` belsejeben ott a keszre irt `<img>`
   sor kommentben — elég kikommentezni es a placeholdert torolni.

   VEZERLO TOKENEK (elemenkent, inline `style`-lal is allithatoak):
     --dm-photo-ratio  a kephely oldalaranya   (pl. 3 / 2, 4 / 5)
     --dm-photo-focus  a vagas fokuszpontja    (pl. 50% 32%)                */

.dm-photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: var(--dm-photo-ratio, 3 / 2);
  background-image: linear-gradient(150deg, #fbfdfd 0%, #eaf1f4 100%);
  border: 1px solid var(--dm-hairline);
  box-shadow: 0 10px 30px rgba(12, 92, 122, 0.09);
  isolation: isolate;
}

/*  A kesz foto ide kerul: kitolti a helyet, a fokuszpont szerint vagva.
    A `object-position` tokenbol jon, ezert reszponzivan is kiszamithato. */
.dm-photo img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--dm-photo-focus, 50% 40%);
  display: block;
}

/*  Finom geometriai textura a placeholder alatt — ugyanaz a motivum, mint a
    fejleceken, hogy a kephely is a rendszer resze legyen. */
.dm-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/assets/approved/images/nd-hex-bg.svg");
  background-size: cover;
  background-position: 60% 50%;
  opacity: 0.5;
  pointer-events: none;
}

.dm-photo__ph {
  position: absolute;
  inset: 0.75rem;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1rem;
  border: 1px dashed rgba(12, 92, 122, 0.28);
  border-radius: calc(var(--radius-lg) - 0.5rem);
}

.dm-photo__ikon {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--dm-hairline);
  color: var(--nd-deep-700, #0c5c7a);
  margin-block-end: 0.125rem;
}
.dm-photo__ikon svg { inline-size: 1.375rem; block-size: 1.375rem; }

.dm-photo__cimke {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nd-warm-700, #d96c0f);
}
.dm-photo__temaja {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--nd-ink-900, #16303d);
  max-inline-size: 22rem;
}
.dm-photo__spec {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--nd-ink-500, #5a6b72);
  max-inline-size: 20rem;
}
.dm-photo__spec code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  background: rgba(255, 255, 255, 0.7);
  padding: 0.0625rem 0.3125rem;
  border-radius: 4px;
}

/* Kis kephelyeken a szoveg tomorebb. */
@media (max-width: 63.999rem) {
  .dm-photo__temaja { font-size: 0.875rem; }
  .dm-photo__spec   { font-size: 0.6875rem; }
}

/* --- valodi paciensfotok aranya es fokuszpontja ------------------------- */

/*  Varandos par a kanapen (1400x934, 3:2). A fokusz kisse balra-felfele:
    ott vannak az arcok es a telefon. */
.dm-photo--varandos { --dm-photo-ratio: 3 / 2; --dm-photo-focus: 42% 42%; }

/*  Idos holgy es a lanya (1400x934, 3:2). A ket arc a kep kozepen-felul all. */
.dm-photo--idos { --dm-photo-ratio: 3 / 2; --dm-photo-focus: 46% 38%; }

/*  Szuk nezeten mindketto tomorebb, allobb kivagast kap, hogy az arcok
    nagyobbak legyenek es ne vesszen el a jelenet. */
@media (max-width: 47.999rem) {
  .dm-photo--varandos { --dm-photo-ratio: 4 / 3; --dm-photo-focus: 40% 40%; }
  .dm-photo--idos     { --dm-photo-ratio: 4 / 3; --dm-photo-focus: 48% 36%; }
}


/* ================================ 7/c. EMBERI SAV (szeles csaladi kep) ===
   Egy fekvo fotó, ra atlapolva egy kis kartya. A kartya SZANDEKOSAN kilog a
   kep also-bal sarkabol: ez adja az „enyhe overlap" hatast anelkul, hogy a
   szoveg raulne az arcokra.                                                */

.dm-bandsec { padding-block-start: 0; }

.dm-band {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: visible;
  isolation: isolate;
}

.dm-band__kep {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1800 / 950;
  object-fit: cover;
  object-position: 58% 42%;      /* a telefonos jelenet a kep jobb feleben van */
  border-radius: var(--radius-xl);
  box-shadow: 0 22px 54px rgba(12, 92, 122, 0.18);
}

.dm-band__kartya {
  position: absolute;
  inset-block-end: clamp(-1.25rem, -0.5rem - 1vw, -0.75rem);
  inset-inline-start: clamp(1rem, 0.4rem + 2vw, 3rem);
  inline-size: min(30rem, calc(100% - 2rem));
  padding: clamp(1.125rem, 0.9rem + 1vw, 1.625rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--dm-hairline);
  border-inline-start: 3px solid var(--nd-warm-600, #f6851f);
  box-shadow: 0 18px 44px rgba(12, 92, 122, 0.16);
}

.dm-band__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nd-warm-700, #d96c0f);
  margin-block-end: 0.5rem;
}
.dm-band__eyebrow::before {
  content: "";
  inline-size: 1.375rem;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.6;
}

.dm-band__szoveg {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--nd-ink-600, #3f5560);
}
.dm-band__szoveg strong { color: var(--nd-ink-900, #16303d); }

/*  Szuk nezeten a kartya NEM lebeg: a kep ala kerul, teljes szelessegben —
    kulonben egy telefonon a fotó felet eltakarna. */
@media (max-width: 47.999rem) {
  .dm-band__kep { aspect-ratio: 4 / 3; object-position: 62% 45%; }
  .dm-band__kartya {
    position: static;
    inline-size: auto;
    margin-block-start: -1.75rem;
    margin-inline: 0.75rem;
  }
}


/* ================================ 7/d. KEPES-SZOVEGES BLOKK (dm-story) ===
   Kep + szoveg egymas mellett, valtakozo iranyban. A kep moge turkiz-kek
   folt kerul (a NetDoktor markaszinbol), enyhe eltolassal — ettol lesz a
   kompozicio retegzett, de nem zsufolt.                                    */

.dm-story__racs {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2.6vw, 3.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/*  Forditott valtozat: a szoveg all elol, a kep masodik. Mobilon viszont
    MINDIG a kep jon eloszor — az vezeti be a szekciot. */
.dm-story--forditott .dm-story__media { order: 2; }

@media (max-width: 63.999rem) {
  .dm-story__racs { grid-template-columns: minmax(0, 1fr); }
  .dm-story--forditott .dm-story__media { order: 0; }
}

/*  A folt a figure-on KIVUL all: a `.dm-photo` `overflow: hidden`-je kulonben
    levagna, es semmi nem latszana belole. */
.dm-story__media { position: relative; isolation: isolate; }

/*  Marka-folt a kep mogott (kek/turkiz), atlosan kilogva. */
.dm-story__folt {
  position: absolute;
  inset-block: 1.5rem -1.5rem;
  inset-inline: 1.75rem -1.75rem;
  z-index: -1;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(12, 92, 122, 0.16) 0%, rgba(27, 181, 207, 0.26) 100%);
  pointer-events: none;
}
.dm-story--forditott .dm-story__folt {
  inset-inline: -1.75rem 1.75rem;
}

@media (max-width: 63.999rem) {
  .dm-story__folt { inset-block: 1rem -1rem; inset-inline: 1rem -1rem; }
  .dm-story--forditott .dm-story__folt { inset-inline: -1rem 1rem; }
}

.dm-story__szoveg > h2 { margin-block: 0.25rem 0.75rem; }
.dm-story__szoveg .gs-section__lead { margin-block-end: 1.5rem; }


/* --- ikonos jellemzo-sor (a kepes blokkok listaihoz) -------------------- */

.dm-featlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.dm-featrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9375rem;
  align-items: start;
}
.dm-featrow .dm-icon { margin-block-end: 0; }
.dm-featrow__text  { display: grid; gap: 0.1875rem; }
.dm-featrow__cim   { font-size: var(--font-size-md); color: var(--nd-ink-900, #16303d); }
.dm-featrow__leiras{ font-size: var(--font-size-sm); line-height: 1.6; color: var(--text-secondary); }


/*  A jellemzo-sorok ikonja ERGSEBB kontrasztot kap: telitett narancs tinta
    melegebb alaten. Halvany tonuson a maszkos ikon 20 px-en elmosodna. */
.dm-t-paciens .dm-featrow .dm-icon {
  background: rgba(246, 133, 31, 0.14);
  color: var(--nd-warm-700, #d96c0f);
}


/* --- nagyobb ikondoboz szekciofejlecbe ----------------------------------
   Tomor markagradiens + feher ikon: ugyanaz a nyelv, mint az app-elony
   kartyak ikondobozain, igy a ket szekcio osszetartozik.                   */

.dm-icon--nagy {
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: var(--radius-lg);
  margin-block-end: 1rem;
  background: var(--nd-gradient-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(12, 92, 122, 0.20);
}
.dm-t-paciens .dm-icon--nagy {
  background: var(--nd-gradient-primary);
  color: #fff;
}
/*  52 px-es keret: 28 px glif -> 27 px tinta -> 12,6 px margo (52%).
    42 px glif -> 40,3 px tinta -> 5,9 px margo (78%).                  */
.dm-icon--nagy .nd-ico { inline-size: 2.625rem; block-size: 2.625rem; }


/* ================= 7/e. HERO AVATAROK + KIEGESZITO IKONDEFINICIOK =======
   Mindket blokk SAJAT, bemutato-scope-os: a demo igy nem fugg attol, hogy az
   eles `netdoktor-patterns.css` / `visual-2.css` epp melyik verzion all.    */

/*  Az eles lakossagi oldal ertekelo-sora ot kis, atlapolo avatart mutat. Az
    eles stilus a `visual-2.css`-ben van, amit a bemutato NEM tolt be — ezert
    a demo sajat, egyenerteku megjelenest kap. (Enelkul a ket kepnek nincs
    merete, es ot hatalmas portre csuszik egymas ala.)                       */
.dm-avatars {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-inline-end: 0.25rem;
}
.dm-avatar {
  inline-size: 2rem;                 /* 32 px */
  block-size: 2rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;          /* arcmagassagra vagva */
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(4, 30, 42, 0.20);
  margin-inline-start: -0.5rem;      /* enyhe atlapolas */
  background: var(--dm-cool-200, #f0f5f6);
}
.dm-avatar:first-child { margin-inline-start: 0; }

@media (max-width: 29.999rem) {
  .dm-avatar { inline-size: 1.75rem; block-size: 1.75rem; }
}

/*  IKONCSALAD  (`demmo/assets/ikonok/`) ---------------------------------
    A lakossagi bemutato ikonjai a MEGRENDELO ALTAL ATADOTT premium
    egeszsegugyi ikoncsomagokbol valogatva. Nem sajat rajz, nem kulso
    ikonkonyvtar, nem CDN. A csomagok:

      [C] shutterstock 2726016987   (97 SVG — a NetDoktor `nd-*` keszlet forrasa)
      [B] shutterstock 2658968443   (42 SVG — = shutterstock_2610940499.eps,
                                     „21 HEALTHCARE line icons” cimkezett lap)
      [A] shutterstock 2634367193   (21 SVG)
      [E] shutterstock_2740296381.eps  (naptar / ora / helyszin-tu / csengo)

    Kartya                      -> asset            -> forras
    ---------------------------------------------------------------------
    Idopontfoglalas             naptar.svg          [E] pontracsos naptar
                                                        (a DEC-felirat NELKUL)
    Ertesitesek                 csengo.svg          [E] csengo
    E-receptek                  recept.svg          [C] 034 recept + uveg
    Gyogyszerfeliratas          gyogyszer.svg       [C] 042 kapszulak/tablettak
    Dokumentumok                dokumentum.svg      [C] 017 orvosi dokumentum
    Uzenetek                    uzenet.svg          [C] 028 telefon + chat
    Online konzultacio          konzultacio.svg     [B] 020 monitor + orvos
    Kerdoivek                   kerdoiv.svg         [C] 063 kerdoiv
    Szolgaltataskereso          kereses.svg         [C] 074 helyszin-tu +
    Egeszseg                    egeszseg.svg        [C] 001 sziv + pulzus
    Meresi naplok               meres.svg           [C] 055 monitor + EKG
    NetDoktor fiok              csalad.svg          [A] 001 csalad
    Ingyenes letoltes           letoltes.svg        [A] 007 telefon +
    Ajanlja orvosanak           ajanlas.svg         [A] 003 orvos
    Support                     tamogatas.svg       [B] 026 CALL
    XXI. szazadi technologia    technologia.svg     [B] 016 binaris +
    30 ev tapasztalat           pajzs.svg           [B] 036 PREVENTION
    Folyamatos fejlesztes       frissites.svg       [B] 012 fogaskerek + halozat
    Platform fuggetlen          eszkozok.svg        [B] 017 laptop +
    Koltseghatekony             koltseg.svg         [B] 033 COST
    GDPR megfeleloseg           zar.svg             [B] 013 pajzs + adathalozat
    Telefon (Segitseg)          telefon.svg         [C] 011 telefonkagylo +
    Iroda (Segitseg)            iroda.svg           [C] 021 korhaz
    E-mail (Segitseg)           email.svg           NetDoktor `mail.svg`
                                                    (a csomagokban nincs borotek)
    Szuresek es oltasok         oltas.svg           [C] 064 fecskendo + fiola
    Ismeros felulet             mobil.svg           [B] 007 MOBILE HEALTHCARE
    Belepo: Egy marka           marka.svg           [A] 008 caduceus
    Belepo: Ket navigacio       agak.svg            [B] 015 elagazo halozat
    Belepo: Egy kattintas       valto.svg           [B] 002 korkoros halozat
    Adatvedelem: beallitasok    fogaskerek.svg      [B] 003 nagyito + szerszam
    Checklist-jeloles           pipa.svg            SAJAT — az EGYETLEN sajat
                                                    rajz: onallo pipa egyik
                                                    atadott csomagban sincs
    ---------------------------------------------------------------------
    Az assetek EREDETI rajza valtozatlan: sem stroke-ot, sem reszletesseget
    nem normalizaltunk. A `naptar`/`csengo` az EPS-bol vagott VALODI vektor
    (feher hatterlap eltavolitva, tomor viewBox a festek-hatarok szerint).  */
.dm-demo .dm-ico--agak         { --nd-ico: url("/assets/approved/lakossagi/ikonok/agak.svg"); }
.dm-demo .dm-ico--ajanlas      { --nd-ico: url("/assets/approved/lakossagi/ikonok/ajanlas.svg"); }
.dm-demo .dm-ico--csalad       { --nd-ico: url("/assets/approved/lakossagi/ikonok/csalad.svg"); }
.dm-demo .dm-ico--csengo       { --nd-ico: url("/assets/approved/lakossagi/ikonok/csengo.svg"); }
.dm-demo .dm-ico--eeszt        { --nd-ico: url("/assets/approved/lakossagi/ikonok/eeszt.svg"); }
.dm-demo .dm-ico--dokumentum   { --nd-ico: url("/assets/approved/lakossagi/ikonok/dokumentum.svg"); }
.dm-demo .dm-ico--egeszseg     { --nd-ico: url("/assets/approved/lakossagi/ikonok/egeszseg.svg"); }
.dm-demo .dm-ico--email        { --nd-ico: url("/assets/approved/lakossagi/ikonok/email.svg"); }
.dm-demo .dm-ico--eszkozok     { --nd-ico: url("/assets/approved/lakossagi/ikonok/eszkozok.svg"); }
.dm-demo .dm-ico--fogaskerek   { --nd-ico: url("/assets/approved/lakossagi/ikonok/fogaskerek.svg"); }
.dm-demo .dm-ico--frissites    { --nd-ico: url("/assets/approved/lakossagi/ikonok/frissites.svg"); }
.dm-demo .dm-ico--gyogyszer    { --nd-ico: url("/assets/approved/lakossagi/ikonok/gyogyszer.svg"); }
.dm-demo .dm-ico--iroda        { --nd-ico: url("/assets/approved/lakossagi/ikonok/iroda.svg"); }
.dm-demo .dm-ico--kerdoiv      { --nd-ico: url("/assets/approved/lakossagi/ikonok/kerdoiv.svg"); }
.dm-demo .dm-ico--kereses      { --nd-ico: url("/assets/approved/lakossagi/ikonok/kereses.svg"); }
.dm-demo .dm-ico--koltseg      { --nd-ico: url("/assets/approved/lakossagi/ikonok/koltseg.svg"); }
.dm-demo .dm-ico--konzultacio  { --nd-ico: url("/assets/approved/lakossagi/ikonok/konzultacio.svg"); }
.dm-demo .dm-ico--letoltes     { --nd-ico: url("/assets/approved/lakossagi/ikonok/letoltes.svg"); }
.dm-demo .dm-ico--marka        { --nd-ico: url("/assets/approved/lakossagi/ikonok/marka.svg"); }
.dm-demo .dm-ico--meres        { --nd-ico: url("/assets/approved/lakossagi/ikonok/meres.svg"); }
.dm-demo .dm-ico--mobil        { --nd-ico: url("/assets/approved/lakossagi/ikonok/mobil.svg"); }
.dm-demo .dm-ico--naptar       { --nd-ico: url("/assets/approved/lakossagi/ikonok/naptar.svg"); }
.dm-demo .dm-ico--oltas        { --nd-ico: url("/assets/approved/lakossagi/ikonok/oltas.svg"); }
.dm-demo .dm-ico--pajzs        { --nd-ico: url("/assets/approved/lakossagi/ikonok/pajzs.svg"); }
.dm-demo .dm-ico--pipa         { --nd-ico: url("/assets/approved/lakossagi/ikonok/pipa.svg"); }
.dm-demo .dm-ico--recept       { --nd-ico: url("/assets/approved/lakossagi/ikonok/recept.svg"); }
.dm-demo .dm-ico--tamogatas    { --nd-ico: url("/assets/approved/lakossagi/ikonok/tamogatas.svg"); }
.dm-demo .dm-ico--technologia  { --nd-ico: url("/assets/approved/lakossagi/ikonok/technologia.svg"); }
.dm-demo .dm-ico--telefon      { --nd-ico: url("/assets/approved/lakossagi/ikonok/telefon.svg"); }
.dm-demo .dm-ico--uzenet       { --nd-ico: url("/assets/approved/lakossagi/ikonok/uzenet.svg"); }
.dm-demo .dm-ico--valto        { --nd-ico: url("/assets/approved/lakossagi/ikonok/valto.svg"); }
.dm-demo .dm-ico--zar          { --nd-ico: url("/assets/approved/lakossagi/ikonok/zar.svg"); }

/*  A szines SVG a shell ikondobozaban ugyanakkora helyet foglal, mint a
    maszkos tarsai, es `contain`-nel nem torzul.                           */
.dm-demo .gs-card__icon > .nd-icoimg {
  display: block;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  object-fit: contain;
}
/*  A SZINES ikon doboza vilagos, kulonben a kartya kek gradiense elnyomna
    a jelet. (Osztallyal, nem `:has()`-sal: a builder teszi ra.)           */
.dm-demo .gs-card__icon.dm-icon--szines {
  background: #fff;
  border: 1px solid var(--dm-hairline);
}

/* --- CTA-sav: doktorno-alak, mint az eles lakossagi oldalon --------------
   Vizualis referencia: https://netdoktor.hu/lakossagi-szolgaltatasok zaro
   savja. Ott a cim, a leiras ES a ket store-gomb EGY, balra igazitott
   oszlopban all, a doktorno alakja pedig a konteneer jobb szelen, a sav
   also hatarara allitva.

   A demo sajat retegeben reprodukaljuk: a `.nd-download` racsot egy
   oszloposra allitjuk (a globalis `.nd-download` szabalyhoz NEM nyulunk,
   csak a `.dm-t-paciens .nd-cta` alatt), es a jobb oldali terkoz tartja fenn az
   alak helyet. A kep csak HIVATKOZOTT approved asset, nem modositjuk.     */
.dm-t-paciens .nd-cta {
  /*  A sav es a lablec kulonallo szakasz marad: az alak nem lophat at.   */
  overflow: clip;
  /*  Enyhe, szimmetrikus magassagnoveles, hogy az alak elferjen.          */
  padding-block: calc(var(--section-space-y) + 1.25rem);
}
.dm-t-paciens .nd-cta::after {
  content: "";
  position: absolute;
  inset-inline-end: max(var(--container-gutter), calc((100% - var(--container-xl)) / 2 + var(--container-gutter)));
  inset-block-end: 0;
  block-size: 13.5rem;      /* 216 px */
  inline-size: 9.9375rem;   /* 159 px = 216 x (665/904), aranytarto */
  background: url("/assets/approved/images/cta/cta-doktorno.webp") no-repeat center bottom / contain;
  pointer-events: none;
  z-index: 1;
}
/*  A gombsor SOHA nem kerul az alak ala. Ket valtozat van a bemutatoban:
    a lakossagi letoltesi sav (`.nd-download`) es az orvosi CTA gombsora
    (`.gs-cta__actions`) — az eles oldal is ket kulon szabalyt hasznal.   */
@media (min-width: 48rem) {
  .dm-t-paciens .nd-cta .gs-cta__actions { margin-inline-end: 11.5rem; }
}
/*  DESKTOP: egy oszlop (cim + szoveg + gombok balra), jobbra terkoz.      */
@media (min-width: 48rem) {
  .dm-t-paciens .nd-cta .nd-download {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--space-md, 1.5rem);
    padding-inline-end: 11.5rem;
  }
}
/*  MOBIL: az alak a tartalom ALA kerul, kozepre, a sav aljara allitva.    */
@media (max-width: 47.999rem) {
  .dm-t-paciens .nd-cta { padding-block-end: calc(var(--section-space-y) + 7rem); }
  .dm-t-paciens .nd-cta::after {
    inset-inline: 0;
    inline-size: auto;
    block-size: 8.5rem;
    background-position: center bottom;
  }
}


/* --- kartya-ikonok: a maszkos `nd-ico` a shell ikondobozaban ------------
   A shell a `> svg`-t meretezi 1.4rem-re; a maszkos span nem svg, ezert az
   `nd-ico` sajat 1.25rem-jet kapna. Itt allitjuk azonosra, hogy a sorban
   allo negy kartya ikonja PONTOSAN egyforma legyen.                        */

/*  44 px-es kartya-ikondoboz: 24 px glif -> 21 px tinta -> 11,6 px margo
    (47%). 34 px glif -> 32,6 px tinta -> 5,7 px margo (74%).           */
.dm-demo .gs-card--icon .gs-card__icon > .nd-ico {
  inline-size: 2.125rem;
  block-size: 2.125rem;
}


/* --- a regi, placeholderes kephely-osztalyok (felnott/idos/csalad/
   foglalas) TOROLVE: a valodi fotok sajat `--varandos` es `--idos`
   osztalyt kaptak feljebb. A `--idos` nev utkozott, es a KESOBBI (4/5-os,
   allo) definicio nyert — ettol lett a bizalmi blokk kepe tul magas. */

/* --- a fotoblokkok elrendezese ----------------------------------------- */

/*  Nagy, vezeto blokk: kep + szoveg egymas mellett. */
.dm-humans__vezeto {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
@media (max-width: 63.999rem) {
  .dm-humans__vezeto { grid-template-columns: minmax(0, 1fr); }
}

/*  Harom allo kephely, kepalairassal. */
.dm-humans__racs {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-block-start: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.dm-humans__elem { display: grid; gap: 0.875rem; align-content: start; }
.dm-humans__cim  { margin: 0; font-size: var(--font-size-lg); letter-spacing: -0.01em; }
.dm-humans__szoveg {
  margin: 0.25rem 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.62;
  color: var(--text-secondary);
}


/* ============================================= 8. MOZGAS-ERZEKENYSEG ==== */

@media (prefers-reduced-motion: reduce) {
  .dm-demo { scroll-behavior: auto; }
  .dm-entry__grid,
  .dm-entry__media img,
  .dm-entry__cta { transition: none; }
  .dm-entry__half:hover .dm-entry__media img { transform: none; }
  .dm-entry__half:hover .dm-entry__cta { transform: none; }
}


/* ================================= 9. FOGLALAS BEMUTATO-VAZLAT ==========
   Statikus, kattinthato foglalo-vazlat: `radio` + `label`, JS nelkul.
   Nem hiv rendszert, nem tarol adatot — a folyamat SZERKEZETET mutatja.  */

.dm-book {
  max-inline-size: 52rem;
  margin-inline: auto;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--dm-hairline);
  box-shadow: 0 18px 44px rgba(12, 92, 122, 0.10);
  overflow: hidden;
}

.dm-book__head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.25rem 1.625rem;
  background-image: linear-gradient(120deg, #0a3d52 0%, #0c5c7a 55%, #14789b 100%);
  color: #fff;
}
.dm-book__avatar {
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.dm-book__avatar svg { inline-size: 1.375rem; block-size: 1.375rem; }
.dm-book__name { display: block; font-size: var(--font-size-lg); line-height: 1.2; letter-spacing: -0.01em; }
.dm-book__role { display: block; font-size: var(--font-size-xs); opacity: 0.8; margin-block-start: 0.1875rem; }

.dm-book__body { padding: 1.625rem; display: grid; gap: 1.5rem; }

.dm-book__step { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.dm-book__legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  margin-block-end: 0.6875rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-primary);
}
.dm-book__num {
  inline-size: 1.375rem;
  block-size: 1.375rem;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.6875rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ff9e42 0%, #f6851f 100%);
}

.dm-book__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.dm-book__chip { display: inline-flex; }
.dm-book__chip input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.dm-book__chip span {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9375rem;
  border-radius: var(--dm-radius-pill);
  border: 1px solid var(--dm-hairline-strong);
  background: var(--surface);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.dm-book__chip span:hover { border-color: var(--nd-warm-600, #f6851f); color: var(--text-primary); }
.dm-book__chip input:checked + span {
  background: linear-gradient(135deg, #ff9e42 0%, #f6851f 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(214, 108, 15, 0.22);
}
.dm-book__chip input:focus-visible + span {
  outline: 2px solid var(--nd-warm-700, #d96c0f);
  outline-offset: 2px;
}

.dm-book__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  padding-block-start: 1.125rem;
  border-block-start: 1px solid var(--dm-hairline);
}
.dm-book__hint {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  max-inline-size: 26rem;
}

@media (max-width: 35.999rem) {
  .dm-book__body { padding: 1.125rem; }
  .dm-book__foot { flex-direction: column; align-items: stretch; }
  .dm-book__foot .gs-btn { inline-size: 100%; justify-content: center; }
}


/* --- EESZT-kartya: az ikon a CIM MELLE kerul ----------------------------
   A „Rendeljen barhol” racsban a tobbi het kartyanak nincs ikonja. Ha az
   EESZT-jel kulon sorban all a cim FOLOTT, egyedul ennek a kartyanak
   csuszik lejjebb a cimsora — a sor tipografiai vonala megtorik.
   Ezert ennel az EGY kartyanal ketoszlopos a torzs: ikon | cim, alatta a
   szoveg teljes szelessegben. Igy mind a nyolc cim ugyanabban a
   magassagban all.                                                        */
.dm-demo .nd-card--tint.gs-card--icon > .gs-card__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: center;
}
.dm-demo .nd-card--tint.gs-card--icon > .gs-card__body > .gs-card__icon { grid-column: 1; }
.dm-demo .nd-card--tint.gs-card--icon > .gs-card__body > .gs-card__title { grid-column: 2; margin-block: 0; }
.dm-demo .nd-card--tint.gs-card--icon > .gs-card__body > :not(.gs-card__icon):not(.gs-card__title) {
  grid-column: 1 / -1;
}



/* ================================ 12. MOZGAS: HOVER ES BELEPES ==========
   Ket, SZANDEKOSAN visszafogott mozgas a teljes lakossagi bemutatoban.
   Nincs zoom, forgas, bounce, pulzalas es nincs narancs glow.             */

/*  a) KIS FUNKCIOKARTYAK — csak MUTATOS eszkozon (`hover: hover`), igy
       erintokepernyon nem ragad be a hover-allapot.                       */
@media (hover: hover) and (pointer: fine) {
  .dm-t-paciens .gs-card {
    transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .dm-t-paciens .gs-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(4, 30, 42, 0.10);
    border-color: var(--dm-hairline-strong);
  }
  /*  az ikondoboz nagyon enyhe reakcioja — meret NEM valtozik            */
  .dm-t-paciens .gs-card .gs-card__icon {
    transition: box-shadow 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .dm-t-paciens .gs-card:hover .gs-card__icon {
    box-shadow: 0 4px 10px rgba(12, 92, 122, 0.20);
  }
}

/*  b) BELEPO ANIMACIO — a nagyobb tartalmi blokkok EGYSZER usznak be.
       A `dm-be` osztalyt a builder teszi a szekcio-fejlecre, a racsra es a
       kepes blokkokra; a lathatova valast az `dm-belepo.js` figyeli.
       Alapertelmezes: LATHATO. A rejtes csak akkor kapcsol be, ha a JS
       elindult (`dm-be-kesz` a <html>-en) — igy JS nelkul semmi nem tunik el. */
.dm-be-kesz .dm-t-paciens .dm-be {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.dm-be-kesz .dm-t-paciens .dm-be.dm-be--lathato {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/*  A kep+szoveg blokk EGY egysegkent jon be; a masodik fele csak egy hajszallal
    kesobb — nem soronkent, nem „PowerPoint”-szeruen.                      */
.dm-be-kesz .dm-t-paciens .dm-be--keses { transition-delay: 90ms; }

@media (prefers-reduced-motion: reduce) {
  .dm-t-paciens .gs-card,
  .dm-t-paciens .gs-card__icon { transition: none; }
  .dm-t-paciens .gs-card:hover { transform: none; box-shadow: none; }
  .dm-t-paciens .gs-card:hover .gs-card__icon { box-shadow: none; }
  .dm-be-kesz .dm-t-paciens .dm-be,
  .dm-be-kesz .dm-t-paciens .dm-be.dm-be--lathato {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================ 13. KAPCSOLODASI UTAK (lepeskartyak) ======
   A `sugo.pdf` 2.1 / 2.2 fejezete szerinti KET valos folyamat. A meglevo
   kartya- es tipografiai rendszert hasznalja: feher felulet, finom keret,
   ugyanaz a radius es arnyek, narancs cimke, sotet NetDoktor cim.        */
.dm-t-paciens .dm-utak { align-items: start; }

.dm-t-paciens .dm-ut {
  background: var(--dm-cool-000);
  border: 1px solid var(--dm-hairline);
  border-radius: var(--radius-lg, 1rem);
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 1.75rem);
  box-shadow: 0 1px 2px rgba(4, 30, 42, 0.04);
}

.dm-ut__fej { display: grid; grid-template-columns: auto 1fr; column-gap: 0.875rem; row-gap: 0.125rem; }
.dm-ut__jel {
  grid-row: 1 / span 3;
  display: grid; place-items: center;
  inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, var(--nd-deep-500, #1ba7c6), var(--nd-deep-700, #0c5c7a));
  color: #fff;
}
.dm-ut__jel > .nd-ico { inline-size: 2.125rem; block-size: 2.125rem; }
.dm-ut__cimke {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nd-warm-700, #d96c0f);
}
.dm-ut__cim { margin: 0; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; }
.dm-ut__lead { margin: 0; color: var(--text-secondary); font-size: 0.9375rem; }

.dm-lepesek { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.dm-lepes {
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: start;
  padding: 0.75rem 0.875rem;
  background: var(--dm-cool-100);
  border: 1px solid var(--dm-hairline);
  border-radius: 0.75rem;
}
.dm-lepes__szam {
  font-size: 0.8125rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--nd-warm-700, #d96c0f);
  padding-block-start: 0.0625rem;
}
.dm-lepes__szoveg { font-size: 0.9375rem; line-height: 1.55; color: var(--text-secondary); }
.dm-lepes__szoveg strong { color: var(--text-primary); font-weight: 700; }

.dm-jegyzet {
  margin: 1.5rem auto 0;
  max-inline-size: 52rem;
  padding: 1rem 1.125rem;
  background: var(--dm-surface-3);
  border: 1px solid var(--dm-hairline);
  border-radius: 0.875rem;
  font-size: 0.9375rem; line-height: 1.6;
  color: var(--text-secondary);
}
.dm-jegyzet strong { color: var(--text-primary); }

.dm-ut__muvelet {
  /*  a `.gs-btn` flex-elem, ezert a `text-align` nem kozepre tenne          */
  display: flex; justify-content: center;
  margin: 1.5rem 0 0;
}
.dm-ut__muvelet .gs-btn { gap: 0.5rem; }
.dm-ut__muvelet .nd-ico { inline-size: 1.125rem; block-size: 1.125rem; }
.dm-ut__kulso { font-size: 0.875rem; opacity: 0.7; }

@media (max-width: 47.999rem) {
  .dm-t-paciens .dm-utak { gap: 1rem; }
  .dm-ut__fej { column-gap: 0.75rem; }
}




/* ============================ TOVABBI LINKEK (masodlagos gombsor) ========
   A szekcio vegen allo, masodlagos muvelet. Ugyanaz a viselkedes, ami eddig
   a v2-retegben volt: felso terkoz, kozepre zart szekciofej utan kozepre.  */

.dm-tovabbi { margin-block-start: var(--space-lg); }
.dm-demo .gs-section__head--centered ~ .dm-tovabbi,
.dm-demo .gs-grid + .dm-tovabbi { text-align: center; }


/* ====================== ELES FEJLEC: CELCSOPORT ES AKTIV ALLAPOT ========
   A bemutatoban a utility-sav bal oldalan allt a „bemutato valtozat" jelzes,
   ezert a sav `space-between`-nel a valto jobbra kerult. Elesben ez a jelzes
   nincs, igy a valtot MI toljuk jobbra — a sav kepe valtozatlan.            */

.dm-audbar__inner > .dm-switch { margin-inline-start: auto; }

/* A CELCSOPORT jelolese (`dm-a-paciens`) fuggetlen a lap-tematol
   (`dm-t-paciens`): az aloldalak csak a fejlecet kapjak meg, a tartalmuk
   megjelenese valtozatlan marad, de a valto aktiv jele ott is narancs.      */

.dm-a-paciens .dm-switch__link[aria-current="true"] { color: var(--nd-warm-700, #d96c0f); }
.dm-a-paciens .dm-switch__link[aria-current="true"]::after { background: var(--nd-warm-600, #f6851f); }

/* AKTUALIS OLDAL a menuben es a mobilmenuben. */
.dm-a-paciens .gs-nav__link[aria-current="page"],
.dm-a-paciens .gs-drawer__link[aria-current="page"] {
  color: var(--nd-warm-700, #d96c0f);
  font-weight: 700;
}
.dm-a-paciens .gs-drawer__link[aria-current="page"] {
  background: var(--dm-cool-200);
  border-radius: var(--radius-sm, 0.5rem);
}

/* ==========================================================================
   STORE-GOMBOK: KONTRASZT HOVER/FOKUSZ ALLAPOTBAN (2026-09-25)
   --------------------------------------------------------------------------
   Ok: a base.css altalanos `a:hover { color: var(--color-primary-strong) }`
   szabalya (specificitas 0,1,1) felulirja a `.nd-store__btn { color:#fff }`
   szabalyt (0,1,0), ezert a felirat ES a `currentColor`-ral rajzolt ikon is
   sotetkekre (#2a5292) valt a sotet gombon - gyakorlatilag olvashatatlan.
   Javitas: elem+osztaly+pszeudo (0,2,1) specificitassal visszaallitjuk a
   feheret. A gombok merete, kerete, hattere es linkjei valtozatlanok.
   ========================================================================== */
a.nd-store__btn,
a.nd-store__btn:link,
a.nd-store__btn:visited,
a.nd-store__btn:hover,
a.nd-store__btn:focus,
a.nd-store__btn:focus-visible,
a.nd-store__btn:active { color: #fff; }

/* A ket belso felirat szintien orokolje a feheret (currentColor-t hasznalnak). */
a.nd-store__btn:hover .nd-store__small,
a.nd-store__btn:focus .nd-store__small { opacity: .92; }