/* ==========================================================================
   DERICOM ARCULATI RETEG  (brand layer)
   --------------------------------------------------------------------------
   Eredet: NEW CLEAN IMPLEMENTATION. Ez a fajl ebben a projektben keszult.
   Nem tartalmaz atvett kodot a regi dericom.hu implementaciobol.

   ARCULATI FORRAS
     A DeriCom es a NetDoktor UGYANAZT a vizualis designrendszert hasznalja.
     Az itt szereplo token-ERTEKEK a jelenlegi sajat clean NetDoktor projekt
     arculati retegebol (`src/theme/netdoktor-theme.css` + `-patterns.css`)
     szarmaznak, 1:1 atultetve. A regi dericom.hu CSS-e NEM forras.
     A regi/legacy NetDoktor rendszerbol semmi nem kerult at.

     Token-megfeleltetes (DeriCom  <->  NetDoktor clean):
       --dc-deep-900 <-> --nd-deep-900   #0b3a4d
       --dc-deep-800 <-> --nd-deep-800   #0d4c66
       --dc-deep-700 <-> --nd-deep-700   #0c5c7a   elsodleges markaszin
       --dc-deep-600 <-> --nd-deep-600   #17a0bf
       --dc-deep-500 <-> --nd-deep-500   #1bb5cf   vilagos turkiz
       --dc-deep-400 <-> --nd-deep-400   #3594b7
       --dc-deep-300 <-> --nd-deep-300   #45a4c4
       --dc-mist-100 <-> --nd-mist-100   #eef4f6
       --dc-mist-050 <-> --nd-mist-050   #f6fafb
       --dc-warm-500 <-> --nd-warm-500   #ff9e42
       --dc-warm-600 <-> --nd-warm-600   #f6851f   accent
       --dc-warm-700 <-> --nd-warm-700   #d96c0f
       --dc-ink-900  <-> --nd-ink-900    #16303d
       --dc-ink-600  <-> --nd-ink-600    #3f5560
       --dc-ink-500  <-> --nd-ink-500    #5a6b72

   MI KULONBOZTETI MEG A DERICOMOT
     - a hivatalos DeriCom logo (az egyetlen jovahagyott vizualis asset)
     - a DeriCom sajat tartalma
     Vizualisan ugyanabba a markacsaladba tartozik, de onallo weboldal.

   AT NEM VETT NETDOKTOR-ELEM
     - hexagon hatter-motivum: a NetDoktor projekt sajat megjegyzese szerint
       "NETDOKTOR PROPRIETARY VISUAL CONCEPT", ezert NEM kerult at (sem a
       CSS-e, sem az SVG-je)
     - `nd-brandmark` helyorzo alakzat: a DeriComnak valodi logoja van
     - NetDoktor logo, szemely-vizualok, app-/platform-mockupok, partnerlogok

   Nevter: minden ittani osztaly prefixe "dc-".
   ========================================================================== */

:root {
  /* =============================================================== PALETTA */
  --dc-deep-900: #0b3a4d;   /* legmelyebb, lablec vege */
  --dc-deep-800: #0d4c66;   /* lablec eleje */
  --dc-deep-700: #0c5c7a;   /* elsodleges markaszin */
  --dc-deep-600: #17a0bf;   /* elsodleges atmenet vege */
  --dc-deep-500: #1bb5cf;   /* vilagos turkiz kiemeles */
  --dc-deep-400: #3594b7;   /* hero-atmenet vege */
  --dc-deep-300: #45a4c4;
  --dc-mist-100: #eef4f6;
  --dc-mist-050: #f6fafb;

  --dc-warm-500: #ff9e42;
  --dc-warm-600: #f6851f;   /* kiemelt muvelet */
  --dc-warm-700: #d96c0f;

  --dc-ink-900: #16303d;
  --dc-ink-600: #3f5560;
  --dc-ink-500: #5a6b72;

  /* ============================================ SZEMANTIKUS FELULIRASOK */
  --color-primary:          var(--dc-deep-700);
  --color-primary-strong:   #094a63;
  --color-primary-soft:     rgba(12, 92, 122, 0.07);
  --color-primary-contrast: #ffffff;

  --color-secondary:          var(--dc-deep-600);
  --color-secondary-strong:   #128aa5;
  --color-secondary-soft:     rgba(27, 181, 207, 0.14);
  --color-secondary-contrast: #ffffff;

  --color-accent:          var(--dc-warm-600);
  --color-accent-strong:   var(--dc-warm-700);
  --color-accent-soft:     rgba(255, 158, 66, 0.14);
  --color-accent-contrast: #ffffff;

  --surface:         #ffffff;
  --surface-alt:     var(--dc-mist-100);
  --surface-sunken:  var(--dc-mist-050);
  --surface-inverse: var(--dc-deep-800);
  --surface-overlay: rgba(11, 58, 77, 0.62);

  --text-primary:   var(--dc-ink-900);
  --text-secondary: var(--dc-ink-600);
  --text-muted:     var(--dc-ink-500);
  --text-inverse:   #ffffff;

  --border:        rgba(12, 92, 122, 0.16);
  --border-strong: rgba(12, 92, 122, 0.28);
  --border-subtle: rgba(12, 92, 122, 0.10);

  --color-success: #1f8a5a;
  --color-warning: #b7791f;
  --color-error:   #c0392f;

  --focus-ring: var(--dc-deep-600);

  /* ============================================================ TIPOGRAFIA
     Inter, ha a rendszeren elerheto; egyebkent rendszerfont-stack.
     KULSO FONT-BETOLTES NINCS (0 harmadik feles hoszt-hivas).              */
  --font-body:    Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);

  --font-size-display: clamp(1.875rem, 1.05rem + 3.6vw, 3.5rem);   /*  30 -> 56 px */
  --font-size-title:   clamp(1.75rem, 1.15rem + 2.6vw, 3rem);      /*  28 -> 48 px */
  --font-size-section: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);     /*  24 -> 36 px */

  --font-weight-semibold: 700;
  --font-weight-bold:     800;

  --line-height-tight: 1.1;
  --line-height-snug:  1.28;

  /* =============================================================== TERKOZ */
  --section-space-y: clamp(2rem, 1.1rem + 3.9vw, 5rem);

  /* ======================================================== FORMA, ARNYEK */
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-sm: 0 6px 18px rgba(12, 92, 122, 0.08);
  --shadow-md: 0 14px 38px rgba(12, 92, 122, 0.12);
  --shadow-lg: 0 26px 60px rgba(11, 58, 77, 0.22);
  --shadow-focus: 0 0 0 3px rgba(27, 181, 207, 0.38);

  /* =========================================================== KONTENEREK */
  --container-lg: 72.5rem;   /* ~1160 px tartalomszelesseg */
  --container-xl: 81.25rem;

  /* =========================================================== VAZMERETEK */
  --header-height:    6rem;      /* 96 px asztali */
  --header-height-sm: 4.125rem;  /* 66 px szuk nezeten */
  --field-height:     3rem;

  /* ============================================================ ATMENETEK */
  --dc-gradient-primary: linear-gradient(135deg, var(--dc-deep-700) 0%, var(--dc-deep-600) 100%);
  --dc-gradient-hero:    linear-gradient(135deg, var(--dc-deep-700) 0%, var(--dc-deep-400) 100%);
  --dc-gradient-band:    linear-gradient(135deg, #1a7d9c 0%, var(--dc-deep-300) 100%);
  --dc-gradient-accent:  linear-gradient(135deg, var(--dc-warm-500) 0%, var(--dc-warm-600) 100%);
  --dc-gradient-footer:  linear-gradient(180deg, var(--dc-deep-800) 0%, var(--dc-deep-900) 100%);
  --dc-glow-top:         radial-gradient(1100px 360px at 50% -8%, rgba(27, 181, 207, 0.16), transparent 70%);

  /* ================================================================= LOGO
     A logo egyszinu szoveggorbe-halmaz: a szinet a `currentColor` adja, igy
     a fejlecben es a lablecben egyarant olvashato marad.                   */
  --dc-logo-height:    42px;
  --dc-logo-height-sm: 32px;
  --dc-logo-ratio:     895.12 / 197.4;
}

/* A fejlec szuk nezeten alacsonyabb (96 -> 66 px). A shell a
   --header-height tokent hasznalja a fotartalom eltolasahoz is. */
@media (max-width: 63.99rem) {
  :root { --header-height: var(--header-height-sm); }
}

/* ==========================================================================
   SEMA: KIZAROLAG VILAGOS
   A kozos designrendszer (NetDoktor clean brand layer) jelenleg hivatalosan
   csak vilagos temat hasznal, ezert a DeriCom is azt hasznalja. NINCS sajat
   DeriCom sotet paletta, es a NetDoktor tokenekbol sem vezetunk le ujat.

   A shell temavalto-infrastrukturaja (tokens.css sotet blokkja, theme-toggle
   modul) SZANDEKOSAN a motorban marad, de INAKTIV: a `data-color-scheme`
   attributumot semmi nem allitja, a kapcsolo nem kerul az oldalakra, es a
   modul nem kerul a buildbe. Ha a kozos designrendszer kesobb hivatalos
   sotet temat kap, itt kell aktivalni.
   ========================================================================== */
:root { color-scheme: light; }

/* ==========================================================================
   KOMPONENSVARIANSOK
   A shell alaposztalyait nem irjuk at: minden varians a `gs-` osztaly melle
   kerul. A karakter a kozos designrendszere: pill gombok, 48 px magassag,
   16 px kartyasarok, halvany kek keret, melykek lagy arnyek.
   ========================================================================== */

/* --------------------------------------------------------------- 1. LOGO */
.dc-logo {
  display: block;
  block-size: var(--dc-logo-height);
  inline-size: auto;
  aspect-ratio: var(--dc-logo-ratio);
  fill: currentColor;
}

/* A `--bp-md` (48rem) alatti tartomany. Az ertek a kozos designrendszer
   tenyleges irasmodja (`max-width: 47.999rem`), nem sajat valasztas. */
@media (max-width: 47.999rem) {
  .dc-logo { block-size: var(--dc-logo-height-sm); }
}

/* ------------------------------------------------------------- 2. FEJLEC
   A fejlec atlatszo alapon indul a heron, es gorgetesre valik tomorre.
   A `data-gs-scrolled` allapotot a shell navigation modulja adja.          */
.dc-header {
  background: transparent;
  border-block-end-color: transparent;
}
.dc-header .gs-header__brand    { color: #fff;   /* mindig sotet gradiens savon all */ }
.dc-header .gs-nav__link        { color: rgba(255, 255, 255, 0.88); }
.dc-header .gs-nav__link:hover  { color: #fff; background: rgba(255, 255, 255, 0.14); }
.dc-header .gs-nav__link[aria-current="page"] { color: #fff; }
.dc-header .gs-nav-toggle       { color: #fff;   /* mindig sotet gradiens savon all */ }
.dc-header .gs-nav-toggle:hover { background: rgba(255, 255, 255, 0.16); }

.dc-header[data-gs-scrolled="true"] {
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-block-end-color: var(--border-subtle);
}
.dc-header[data-gs-scrolled="true"] .gs-header__brand { color: var(--dc-deep-700); }
.dc-header[data-gs-scrolled="true"] .gs-nav__link { color: #2f2f2f; }
.dc-header[data-gs-scrolled="true"] .gs-nav__link:hover { color: var(--dc-deep-700); background: var(--color-primary-soft); }
.dc-header[data-gs-scrolled="true"] .gs-nav__link[aria-current="page"] { color: var(--dc-deep-700); }
.dc-header[data-gs-scrolled="true"] .gs-nav-toggle { color: var(--dc-ink-900); }
.dc-header[data-gs-scrolled="true"] .gs-nav-toggle:hover { background: var(--color-primary-soft); }

/* -------------------------------------------------------------- 3. GOMBOK
   Pill alak, atmenetes kitoltes, 48 px magassag.                           */
.gs-btn { border-radius: var(--radius-pill); font-weight: 600; }
.gs-btn:not(.gs-btn--sm):not(.gs-btn--lg) { --gs-btn-height: 3rem; }

.dc-btn-primary {
  background-image: var(--dc-gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(12, 92, 122, 0.22);
}
.dc-btn-primary:hover { background-image: linear-gradient(135deg, #094a63 0%, #128aa5 100%); color: #fff; }

.dc-btn-accent {
  background-image: var(--dc-gradient-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(246, 133, 31, 0.26);
}
.dc-btn-accent:hover { background-image: linear-gradient(135deg, var(--dc-warm-600) 0%, var(--dc-warm-700) 100%); color: #fff; }

/* ---------------------------------------------------------------- 4. HERO
   A hero atmenetes melykek-turkiz savon all, vilagos szoveggel. Kep nem
   szukseges hozza: a DeriComhoz jelenleg nincs jovahagyott hero-vizual.    */
.dc-hero {
  background-image: var(--dc-gradient-hero);
  color: #fff;   /* mindig sotet gradiens savon all */
  min-height: clamp(26rem, 20rem + 18vw, 36rem);
}
.dc-hero :where(h1, h2, h3, h4) { color: inherit; }
.dc-hero .gs-hero__title { font-weight: 800; letter-spacing: -0.025em; }
.dc-hero .gs-hero__lead  { color: rgba(255, 255, 255, 0.88); }

/* --------------------------------------------------- 5. HERO DIASOR (fooldal)
   A shell generikus sliderjen ul, teljes szelessegu diakkal. A magassagot a
   tartalom adja, ezert nincs kesoi meretvaltozas.                          */
.dc-hero-slider {
  background-image: var(--dc-gradient-hero);
  color: #fff;   /* mindig sotet gradiens savon all */
}
.dc-hero-slider .gs-slider__track { gap: 0; }
.dc-hero-slider .gs-slider__slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  min-block-size: clamp(24rem, 20rem + 18vw, 34rem);
  padding-block: var(--space-2xl);
}
/* A shell `gs-page--flush` modja az elso `.gs-hero` ala teszi a fejlec-
   kompenzaciot. A fooldalon az elso blokk a diasor, ezert a kompenzacio a
   diakra kerul - ugyanabbol a kozos tokenbol. */
.gs-page--flush .gs-page__main > .dc-hero-slider .gs-slider__slide {
  padding-block-start: var(--header-clearance);
}
@media (max-width: 47.999rem) {
  .gs-page--flush .gs-page__main > .dc-hero-slider .gs-slider__slide {
    padding-block-start: var(--header-clearance-sm);
  }
}

.dc-hero-slider .gs-slider__controls { padding-block-end: var(--space-lg); }
.dc-hero-slider .gs-slider__dot { background: rgba(255, 255, 255, 0.45); }
.dc-hero-slider .gs-slider__dot[aria-current="true"] { background: #fff; }

.dc-hero-slide__inner { max-inline-size: 46rem; }

.dc-hero-slide__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--font-size-display);
  font-weight: 800;
  line-height: var(--line-height-tight);
  letter-spacing: -0.025em;
  color: inherit;
}

.dc-hero-slide__lead {
  margin: 0;
  max-inline-size: var(--measure);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.88);
}

.dc-hero-slide__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-xs);
}

.dc-hero-slide__points li {
  position: relative;
  padding-inline-start: var(--space-lg);
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.9);
}

/* A jelolo tiszta CSS-bol keszul: nincs ikon-asset. */
.dc-hero-slide__points li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.55em;
  inset-inline-start: 0;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: var(--radius-pill);
  background-color: var(--dc-deep-500);
}

/* ------------------------------------------------------------- 6. KARTYAK
   A kozos designrendszer kartyakaraktere: 16 px sarok, halvany kek keret,
   melykek lagy arnyek. A shell `gs-card` komponensere epul - NEM onallo
   kartyarendszer, csak a `gs-` osztaly melle kerulo varians.               */
.dc-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  background: var(--surface);
}
.dc-card .gs-card__body { --gs-card-padding: 1.625rem 1.375rem 1.5rem; }
.dc-card.gs-card--interactive:hover { box-shadow: 0 20px 48px rgba(12, 92, 122, 0.18); }

/* Kiemelt (feature) valtozat: halvany markatonus, keret es arnyek nelkul. */
.dc-card--feature {
  background: linear-gradient(135deg, rgba(12, 92, 122, 0.10), rgba(27, 181, 207, 0.16));
  border-color: transparent;
  box-shadow: none;
}

/* A szolgaltatas-kartyak szovege SZO SZERINTI forrasreszlet, ezert nemelyik
   mondat kozepebol emelve kisbetuvel kezdodik. Az adat valtozatlan marad
   (a clean-room audit szo szerint keresi vissza); a nagy kezdobetu kizarolag
   MEGJELENITESI normalizalas. */
.dc-services .gs-card__text::first-letter { text-transform: uppercase; }

/* Szekcio-hatterek */
.dc-section-tint  { background: var(--color-primary-soft); }
.dc-section-mist  { background: var(--surface-alt); }
.dc-section-light { background: var(--surface); }

/* Pipas felsorolas a kiemelt kartyaban - tiszta CSS, nincs ikon-asset. */
.dc-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2xs);
}
.dc-checklist li {
  position: relative;
  padding-inline-start: var(--space-lg);
  color: var(--text-secondary);
}
.dc-checklist li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.42em;
  inset-inline-start: 0.15rem;
  inline-size: 0.5rem;
  block-size: 0.85rem;
  border: solid var(--color-secondary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Cimzett-lista: a shell sajat badge komponensere epul. */
.dc-audience {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dc-audience .gs-badge { font-size: var(--font-size-xs); padding: 0.3rem var(--space-sm); }

/* ------------------------------------------------------------- 7. IDEZET
   A referencia-/velemenykartya karaktere: keret nelkul, lagy tonuson.      */
.dc-quote {
  margin: 0;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  background: var(--surface);
}

.dc-quote__text {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
}

.dc-quote__cite {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--text-primary);
}

.dc-quote__place {
  display: block;
  font-weight: 400;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* -------------------------------------------------------- 7. PARTNER LISTA
   A regi oldal itt logokat mutatott. A logok harmadik felek vedjegyei,
   ezert a clean-room szabaly szerint nem kerultek at: a lista szoveges.
   A racs a logosav ritmusat koveti.                                        */
.dc-partners {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 45%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.dc-partners li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 4.5rem;
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background-color: var(--surface);
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}

/* ---------------------------------------------------- 8. KAPCSOLATI ADATOK */
.dc-contact-list {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
}

.dc-contact-list div { display: grid; gap: 0.15rem; }

.dc-contact-list dt {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-muted);
}

.dc-contact-list dd { margin: 0; color: var(--text-primary); }

/* ----------------------------------------------------------------- 9. CTA */
.dc-cta {
  background-image: var(--dc-gradient-band);
  color: #fff;   /* mindig sotet gradiens savon all */
}
.dc-cta .gs-cta__title { color: inherit; font-weight: 800; letter-spacing: -0.02em; }
.dc-cta .gs-cta__text  { color: rgba(255, 255, 255, 0.86); }

/* -------------------------------------------------------------- 10. LABLEC */
.dc-footer { background-image: var(--dc-gradient-footer); color: #fff;   /* mindig sotet gradiens savon all */ }
.dc-footer .gs-footer__title { color: rgba(255, 255, 255, 0.95); }
.dc-footer .gs-footer__link  { color: rgba(255, 255, 255, 0.82); }
.dc-footer .gs-footer__link:hover { color: #fff; }
.dc-footer .gs-footer__bottom { color: rgba(255, 255, 255, 0.72); }

/* --------------------------------------------------- 11. SZEKCIOFEJLECEK */
.gs-section__head h2 { font-weight: 800; letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   12. IDEIGLENES FEJLESZTESI TAJEKOZTATO  (.dc-devnotice)
   --------------------------------------------------------------------------
   ATMENETI ELEM. Eltavolitas a fejlesztes lezarasakor, KET lepesben:
     1) config/site.json -> developmentNotice.enabled = false  (majd ujraepites)
     2) ez a CSS-blokk torolheto  (semmi mas nem hivatkozik ra)

   A kozos designrendszer megoldasat koveti: `position: absolute`, ezert NEM
   lesz a hero flex-soranak masodik eleme - nem tolja el a meglevo tartalmat
   es nem noveli a hero magassagat sem. A hero meglevo also terkozeben ul.

   Szin: SZANDEKOSAN literal feher-arnyalat, nem `--text-inverse` - a hero
   hattere mindig ugyanaz a melykek-turkiz gradiens, igy az olvashatosag
   fuggetlen a token-ertekektol.
   -------------------------------------------------------------------------- */
.gs-hero .dc-devnotice,
.dc-hero-slider .dc-devnotice {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--space-sm);
  z-index: 2;
  margin: 0;
  padding-inline: var(--space-md);
  /* A base.css `p { max-width: var(--measure) }` szabalya kulonben ~65ch-re
     szukitene, es a kozepre igazitas nem a herohoz, hanem ahhoz a szuk
     dobozhoz igazodna. */
  max-inline-size: none;
  font-size: var(--font-size-sm);
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  color: rgba(255, 255, 255, 0.82);
  /* Sose fogjon el kattintast a hero CTA-i vagy a diasor pontjai elol. */
  pointer-events: none;
}

.gs-hero .dc-devnotice__lead,
.dc-hero-slider .dc-devnotice__lead {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

/* A fooldali diasor also savjaban mar ott ulnek a pont-indikatorok, ezert a
   kontrollsav annyival feljebb kerul, amennyit a tajekoztato elfoglal.
   `:has()` nelkuli motoron a sav valtozatlan marad, a szoveg pedig a diasor
   also terkozeben fer el. */
.dc-hero-slider:has(.dc-devnotice) .gs-slider__controls {
  padding-block-end: calc(var(--space-lg) + 0.75rem);
}

/* Keskeny kepernyon a szoveg tobb sorba tordel; ott kap a hero annyi also
   belso terkozt, amennyit a tajekoztato tenylegesen elfoglal - se tobbet. */
@media (max-width: 47.999rem) {
  .gs-hero:has(.dc-devnotice) { padding-block-end: calc(var(--space-2xl) + 2.5rem); }
  .dc-hero-slider:has(.dc-devnotice) .gs-slider__controls {
    padding-block-end: calc(var(--space-lg) + 3.25rem);
  }
}

@media (prefers-contrast: more) {
  .gs-hero .dc-devnotice,
  .dc-hero-slider .dc-devnotice { color: rgba(255, 255, 255, 0.92); }
  .gs-hero .dc-devnotice__lead,
  .dc-hero-slider .dc-devnotice__lead { color: #fff; }
}

/* ------------------------------------------------------------ 13. SITEMAP */
.dc-sitemap { display: grid; gap: var(--space-xl); }
.dc-sitemap ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.dc-sitemap a { color: var(--color-primary); font-weight: 600; }