/* Céges Weboldal – digitális műhely: fehér és hűvös világosszürke lapok, élénk indigó márkaszín, indigós feketébe hajló szöveg, mély éjkék sávok, hajszálvonalak. */

:root {
  color-scheme: light;
  --indigo: #4433ff;
  --indigo-mely: #3324db;
  --indigo-kozep: #c5c1ff;
  --indigo-halvany: #efeeff;
  --indigo-vilagos: #b4afff;
  --ejkek: #15123f;
  --korall: #ff6a3d;
  --tinta: #14132b;
  --tinta-2: #1f1e3a;
  --szoveg: #2d2c47;
  --halk: #5b5d78;
  --lap: #ffffff;
  --feher: #ffffff;
  --ko: #f3f4f9;
  --ko-mely: #e9eaf3;
  --vonal: #e3e4ef;
  --vonal-eros: #c8cadc;
  --arnyek-kicsi: 0 1px 2px rgba(20, 19, 60, .06);
  --arnyek: 0 1px 2px rgba(20, 19, 60, .05), 0 8px 24px -12px rgba(20, 19, 60, .18);
  --arnyek-nagy: 0 2px 6px rgba(20, 19, 60, .06), 0 24px 48px -24px rgba(20, 19, 60, .28);
  --kijelzo: "League Spartan", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --torzs: "SUSE", "Segoe UI", system-ui, -apple-system, sans-serif;
  --szeles: 1200px;
  --margo: clamp(16px, 4vw, 40px);
  --r: 10px;
  --r-nagy: 14px;
  --atmenet-ido: .18s cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--lap);
  color: var(--szoveg);
  font-family: var(--torzs);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: var(--indigo); }

::selection { background: #dcd9ff; color: var(--tinta); }

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

[id] { scroll-margin-top: 96px; }
main:focus { outline: none; }

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

.ugrolink {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--tinta);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--atmenet-ido);
}
.ugrolink:focus { top: 12px; }

/* ---------- Védjegy ---------- */

.logo { display: block; width: auto; height: 32px; flex: none; }
.logo text { font-kerning: normal; }

/* ---------- Gombok ---------- */

.gomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: 600 1rem/1.2 var(--torzs);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--atmenet-ido), border-color var(--atmenet-ido), color var(--atmenet-ido);
}
.gomb .jel { flex: none; transition: transform var(--atmenet-ido); }
.gomb:hover .jel--nyil { transform: translateX(3px); }
.gomb:hover .jel--le { transform: translateY(2px); }

.gomb--teli { background: var(--indigo); color: #fff; }
.gomb--teli:hover { background: var(--indigo-mely); }

.gomb--vonal { background: transparent; color: var(--tinta); border-color: var(--vonal-eros); }
.gomb--vonal:hover { border-color: var(--tinta); }

.gomb--feher { background: var(--lap); color: var(--tinta); }
.gomb--feher:hover { background: #fff; color: var(--indigo); }

.gomb--atlatszo { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.gomb--atlatszo:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------- Fejsáv ---------- */

.fejsav {
  position: relative;
  z-index: 50;
  background: var(--lap);
  border-bottom: 1px solid var(--vonal);
}
@media (min-width: 760px) {
  .fejsav { position: sticky; top: 0; }
}

.fejsav__belso {
  max-width: var(--szeles);
  margin: 0 auto;
  padding: 14px var(--margo) 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.vedjegy {
  display: inline-flex;
  align-items: center;
  color: var(--tinta);
  text-decoration: none;
  margin-right: auto;
}
.vedjegy .logo { height: 28px; }

.fejsav__menu { order: 3; width: 100%; }
.fejsav__menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 22px;
}
.fejsav__menu a {
  display: block;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  color: var(--szoveg);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--atmenet-ido), color var(--atmenet-ido);
}
.fejsav__menu a:hover { color: var(--tinta); border-bottom-color: var(--vonal-eros); }
.fejsav__menu a[aria-current="page"] { color: var(--tinta); font-weight: 600; border-bottom-color: var(--indigo); }

.fejsav__csomag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--indigo);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--atmenet-ido);
}
.fejsav__csomag:hover { background: var(--indigo-mely); }

@media (min-width: 760px) {
  .fejsav__belso { flex-wrap: nowrap; min-height: 72px; padding-block: 0; gap: 20px 40px; }
  .vedjegy .logo { height: 32px; }
  .fejsav__menu { order: 0; width: auto; }
  .fejsav__menu ul { gap: 28px; }
  .fejsav__menu a { padding: 24px 0 22px; }
}

/* ---------- Szakasz-alapok ---------- */

.szakasz { padding-block: clamp(72px, 9vw, 128px); }
.szakasz__belso {
  max-width: var(--szeles);
  margin: 0 auto;
  padding-inline: var(--margo);
}

.szakaszfej { margin-bottom: clamp(36px, 5vw, 64px); }
.szakaszfej--kozep {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.szakaszfej--kozep .szakaszfej__bevezeto { margin-inline: auto; }

.szakaszfej__felirat {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--indigo);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.szakaszfej__felirat::before {
  content: "";
  width: 24px; height: 2px;
  background: currentColor;
}
.szakaszfej__cim {
  margin: 16px 0 0;
  color: var(--tinta);
  font: 800 clamp(2.05rem, 1.35rem + 2.5vw, 3.3rem)/1.03 var(--kijelzo);
  letter-spacing: -.03em;
}
.szakaszfej__bevezeto {
  max-width: 60ch;
  margin: 18px 0 0;
  color: var(--halk);
  font-size: 1.125rem;
  line-height: 1.65;
}
.szakaszfej__bevezeto p { margin: 0; }
.szakaszfej__bevezeto p + p { margin-top: 1em; }

@media (min-width: 920px) {
  .szakaszfej--ketoszlop {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 64px;
    align-items: end;
  }
  .szakaszfej--ketoszlop .szakaszfej__bevezeto { margin-top: 0; }
}

/* ---------- Nyitóblokk ---------- */

.nyito {
  position: relative;
  overflow: clip;
  padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 96px);
  background: var(--lap);
}

.nyito__belso {
  max-width: var(--szeles);
  margin: 0 auto;
  padding-inline: var(--margo);
  display: grid;
  gap: clamp(44px, 6vw, 64px);
  align-items: center;
}
@media (min-width: 1040px) {
  .nyito__belso { grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr); gap: 56px; }
}

.nyito__felirat {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--indigo);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nyito__felirat::before { content: ""; width: 24px; height: 2px; background: var(--korall); }

.nyito__cim {
  margin: 20px 0 0;
  color: var(--tinta);
  font: 800 clamp(2.45rem, 1.5rem + 3.4vw, 4.1rem)/1 var(--kijelzo);
  letter-spacing: -.03em;
}
.nyito__kiemeles { color: var(--indigo); }
.nyito__alcim {
  max-width: 34em;
  margin: 24px 0 0;
  color: var(--halk);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem);
  line-height: 1.6;
}
.nyito__lepesek {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 34px 0 0;
}
.nyito__pontok {
  list-style: none;
  margin: 30px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--vonal);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.nyito__pontok li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--szoveg);
  font-size: .95rem;
  font-weight: 500;
}
.nyito__pontok .jel { color: var(--indigo); stroke-width: 2.4; }
@media (max-width: 479px) {
  .nyito__lepesek .gomb { flex: 1 1 100%; }
  .nyito__pontok { flex-direction: column; }
}

/* Alapsáv a nyitóblokk alján: hajszálvonalas rács */
.alapsav {
  max-width: var(--szeles);
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding-inline: var(--margo);
}
.alapsav__felirat {
  margin: 0 0 14px;
  color: var(--halk);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.alapsav__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--vonal);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--vonal);
}
.alapsav__lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: var(--feher);
  color: var(--tinta);
  font-size: .93rem;
  font-weight: 500;
  line-height: 1.3;
}
.alapsav__lista .jel { flex: none; color: var(--indigo); }
@media (min-width: 700px) {
  .alapsav__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .alapsav__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .alapsav__lista li { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
}

/* ---------- Makett (nyitóblokk): pékség weboldala ---------- */

.makett-tarto {
  container-type: inline-size;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}
.makett {
  --u: calc(100cqi / 60);
  --pek-barna: #3b2a20;
  --pek-krem: #fbf6ee;
  --pek-tegla: #a8432a;
  position: relative;
  font-size: calc(100cqi / 60);
  width: 60em;
  height: 47em;
  color: var(--pek-barna);
  font-family: var(--torzs);
  line-height: 1.25;
  user-select: none;
}
.makett i, .makett b, .makett em { display: block; font-style: normal; }

.makett__ablak {
  position: absolute;
  left: 0; top: 3em;
  width: 51em; height: 38em;
  overflow: hidden;
  border-radius: 1em;
  border: 1px solid var(--vonal-eros);
  background: var(--pek-krem);
  box-shadow: var(--arnyek-nagy);
}
.makett__sav, .minta__sav {
  display: flex;
  align-items: center;
  gap: 1em;
  height: 3em;
  padding: 0 1.2em;
  background: #eef0f6;
  border-bottom: 1px solid #dcdfea;
}
.makett__pontok { display: flex; gap: .5em; flex: none; }
.makett__pontok i {
  width: .8em; height: .8em;
  border-radius: 50%;
  background: #cfd2df;
}
.makett__cim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  flex: 0 1 22em;
  height: 1.9em;
  margin-inline: auto;
  border-radius: .45em;
  background: #fff;
  border: 1px solid #dcdfea;
  color: #5d6075;
  font-size: .95em;
}
.makett__cim .jel { width: 1em; height: 1em; color: var(--indigo); }
.makett__fulek { display: flex; gap: .5em; width: 3.4em; justify-content: flex-end; }
.makett__fulek i { width: 1.1em; height: .3em; border-radius: 1em; background: #c8cbd9; }

.makett__lap { height: calc(100% - 3em); }
.mk-nav {
  display: flex;
  align-items: center;
  gap: 1.6em;
  height: 4.4em;
  padding: 0 2em;
  background: var(--pek-krem);
  border-bottom: 1px solid #eadfcf;
}
.mk-logo {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-right: auto;
  font: 700 1.15em/1 var(--kijelzo);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.mk-logo i {
  width: 1.2em; height: 1.2em;
  border-radius: 50%;
  border: .28em solid var(--pek-tegla);
}
.mk-linkek { display: flex; gap: 1.4em; color: #6b5b4f; font-size: .82em; font-weight: 500; }
.mk-gomb {
  display: inline-block;
  padding: .65em 1.15em;
  border-radius: .35em;
  font-size: .8em;
  font-weight: 600;
  white-space: nowrap;
}
.mk-gomb--teli { background: var(--pek-tegla); color: #fff; }
.mk-gomb--vilagos { background: #fff; color: var(--pek-barna); }

.mk-nyito {
  position: relative;
  height: 20.5em;
  overflow: hidden;
  color: #fff;
}
.mk-nyito__kep {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
}
/* Az egyik tudatos átmenet: sötétítés a fotó bal oldalán, hogy a ráírt szöveg olvasható maradjon. */
.mk-nyito::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(28, 20, 14, .82) 0%, rgba(28, 20, 14, .62) 42%, rgba(28, 20, 14, 0) 72%);
}
.mk-nyito__szoveg {
  position: relative;
  z-index: 2;
  max-width: 24em;
  padding: 3em 2em 0;
}
.mk-felirat {
  display: block;
  color: #f2c9a5;
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mk-cim {
  display: block;
  margin: .4em 0 .45em;
  font: 800 2.55em/1 var(--kijelzo);
  letter-spacing: -.02em;
}
.mk-bekezdes { display: block; max-width: 22em; color: rgba(255, 255, 255, .86); font-size: .92em; line-height: 1.45; }
.mk-gombok { display: flex; gap: .6em; margin-top: 1.5em; }

.mk-csempek {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 1.6em 2em;
}
.mk-csempe {
  display: block;
  padding: 0 1.4em;
  border-left: 1px solid #e6dccd;
}
.mk-csempe:first-child { padding-left: 0; border-left: 0; }
.mk-csempe b { font: 700 1em/1.1 var(--kijelzo); }
.mk-csempe em { margin-top: .45em; color: #77665a; font-size: .78em; line-height: 1.4; }

.makett__telefon {
  position: absolute;
  right: 0; top: 12em;
  width: 16em; height: 34.5em;
  padding: .5em;
  border-radius: 2.6em;
  background: var(--tinta);
  box-shadow: var(--arnyek-nagy);
}
.makett__kijelzo {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 2.5em 1.1em 1em;
  border-radius: 2.15em;
  background: var(--pek-krem);
}
.mt-sziget {
  position: absolute;
  top: .7em; left: 50%;
  width: 4.8em; height: 1.25em;
  transform: translateX(-50%);
  border-radius: 1em;
  background: var(--tinta);
}
.mt-nav { display: flex; align-items: center; justify-content: space-between; }
.mt-nav .mk-logo { font-size: .92em; }
.mt-menu { display: grid; gap: .25em; }
.mt-menu i { width: 1.2em; height: .16em; border-radius: 1em; background: var(--pek-barna); }
.mt-kep {
  width: calc(100% + 2.2em);
  max-width: none;
  height: 10.5em;
  margin: .9em -1.1em 1em;
  object-fit: cover;
  object-position: 55% 40%;
}
.mt-felirat { color: var(--pek-tegla); font-size: .6em; }
.mt-cim { display: block; margin: .4em 0 .4em; font: 800 1.55em/1 var(--kijelzo); letter-spacing: -.02em; }
.mt-bekezdes { display: block; color: #6b5b4f; font-size: .75em; line-height: 1.4; }
.mt-gomb { display: block; margin-top: 1em; padding: .8em; text-align: center; font-size: .75em; }
.mt-sor { display: flex; justify-content: space-between; margin-top: 1em; padding-top: .8em; border-top: 1px solid #e6dccd; font-size: .72em; }
.mt-sor em { color: #77665a; }

.makett__cimke {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .55em .9em;
  border: 1px solid var(--vonal-eros);
  border-radius: .4em;
  background: var(--feher);
  box-shadow: var(--arnyek);
  color: var(--tinta);
  font: 600 max(11px, 1.25em)/1 var(--torzs);
  white-space: nowrap;
}
.makett__cimke .jel { width: 1.15em; height: 1.15em; color: var(--indigo); }
.makett__cimke--gyors { top: 0; right: calc(var(--u) * 13); }
.makett__cimke--mobil { top: calc(var(--u) * 44); right: calc(var(--u) * 15.5); }
.makett__cimke--gdpr { left: calc(var(--u) * 2.5); bottom: calc(var(--u) * 3.6); }

/* ---------- Mintatervek ---------- */

.minta { background: var(--ko); border-top: 1px solid var(--vonal); }
.minta__sor {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 48px;
  max-width: 560px;
  margin-inline: auto;
}
@media (min-width: 680px) and (max-width: 979px) {
  .minta__sor { max-width: none; }
  .minta__tetel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: center; }
}
@media (min-width: 980px) {
  .minta__sor { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}
.minta__tetel { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 680px) and (max-width: 979px) {
  .minta__tetel { display: grid; }
}

.minta__keret-tarto { container-type: inline-size; }
.minta__keret {
  position: relative;
  font-size: calc(100cqi / 36);
  width: 36em;
  height: 27em;
  overflow: hidden;
  border-radius: .8em;
  border: 1px solid var(--vonal-eros);
  background: #fff;
  box-shadow: var(--arnyek);
  line-height: 1.25;
  user-select: none;
  transition: box-shadow var(--atmenet-ido), border-color var(--atmenet-ido);
}
.minta__keret i, .minta__keret b, .minta__keret em { display: block; font-style: normal; }
.minta__tetel:hover .minta__keret { box-shadow: var(--arnyek-nagy); border-color: var(--halk); }
.minta__sav { height: 2.3em; padding: 0 1em; gap: .8em; }
.minta__sav .makett__pontok i { width: .62em; height: .62em; }
.minta__url {
  flex: 0 1 13em;
  height: 1.45em;
  margin-inline: auto;
  border-radius: .35em;
  background: #fff;
  border: 1px solid #dcdfea;
  color: #66687f;
  font-size: .7em;
  line-height: 1.35em;
  text-align: center;
}

.minta__felirat { padding-inline: 2px; }
.minta__jelzes {
  margin: 0;
  color: var(--halk);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.minta__cim {
  margin: 8px 0 6px;
  color: var(--tinta);
  font: 700 1.5rem/1.15 var(--kijelzo);
  letter-spacing: -.02em;
}
.minta__szoveg { margin: 0; color: var(--halk); font-size: 1rem; line-height: 1.6; }

/* Fodrászszalon: krém, szilvabarna, terrakotta; ívelt képkivágás */
.mf { height: calc(100% - 2.3em); padding: 1.2em 1.6em; background: #f6efe6; color: #3a2620; }
.mf-nav { display: flex; align-items: center; gap: 1.2em; }
.mf-logo { margin-right: auto; font: 700 .95em/1 var(--kijelzo); letter-spacing: .26em; text-transform: uppercase; }
.mf-linkek { display: flex; gap: 1em; color: #7a5d50; font-size: .62em; font-weight: 500; }
.mf-gomb { display: inline-block; padding: .55em 1em; border-radius: 2em; background: #b5543a; color: #fff; font-size: .62em; font-weight: 600; white-space: nowrap; }
.mf-nyito { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.4em; align-items: center; margin-top: 1.3em; }
.mf-felirat { display: block; color: #a2462e; font-size: .56em; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.mf-cim { display: block; margin: .4em 0 .45em; font: 700 1.95em/1 var(--kijelzo); letter-spacing: -.025em; }
.mf-bekezdes { display: block; color: #6e544a; font-size: .66em; line-height: 1.45; }
.mf-gomb--nagy { margin-top: 1.1em; padding: .75em 1.25em; font-size: .64em; }
.mf-kep {
  width: 100%;
  height: 14.6em;
  border-radius: 6em 6em .6em .6em;
  object-fit: cover;
  object-position: 50% 60%;
}
.mf-lista { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.2em; border-top: 1px solid #e3d3c4; }
.mf-lista span { display: grid; gap: .3em; padding: .75em .7em 0 0; }
.mf-lista span + span { padding-left: .8em; border-left: 1px solid #e3d3c4; }
.mf-lista b { font-size: .68em; font-weight: 600; }
.mf-lista em { color: #8a6e60; font-size: .58em; }

/* Könyvelőiroda: fehér, sötétkék, osztott nyitókép */
.mk2 { height: calc(100% - 2.3em); background: #fff; color: #142a4c; }
.mk2-nav { display: flex; align-items: center; gap: 1.2em; height: 3.3em; padding: 0 1.6em; background: #142a4c; color: #fff; }
.mk2-logo { display: inline-flex; align-items: center; gap: .45em; margin-right: auto; font: 700 .85em/1 var(--kijelzo); white-space: nowrap; }
.mk2-logo i { width: 1.1em; height: 1.1em; border: .22em solid #fff; border-radius: .15em; }
.mk2-linkek { display: flex; gap: 1em; color: #c9d4e6; font-size: .6em; }
.mk2-gomb { display: inline-block; padding: .6em 1em; border-radius: .3em; background: #fff; color: #142a4c; font-size: .6em; font-weight: 600; white-space: nowrap; }
.mk2-nyito .mk2-gomb { background: #142a4c; color: #fff; }
.mk2-nyito .mk2-gomb--vonal { background: #fff; color: #142a4c; box-shadow: inset 0 0 0 1px #b9c5d8; }
.mk2-nyito { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; height: 16.4em; border-bottom: 1px solid #e3e8f0; }
.mk2-nyito__szoveg { align-self: center; padding: 1em 1.2em 1em 1.6em; }
.mk2-felirat { display: block; color: #3d6aa8; font-size: .56em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mk2-cim { display: block; margin: .45em 0 .7em; font: 700 1.62em/1.04 var(--kijelzo); letter-spacing: -.02em; }
.mk2-gombok { display: flex; gap: .5em; }
.mk2-kep { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.mk2-csempek { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; padding: 1.1em 1.6em; }
.mk2-csempek span { display: grid; gap: .3em; }
.mk2-csempek i { width: 1.4em; height: .25em; margin-bottom: .3em; background: #3d6aa8; }
.mk2-csempek b { font-size: .72em; font-weight: 700; }
.mk2-csempek em { color: #5d6b80; font-size: .58em; }

/* Építőipari vállalkozás: grafit, jelzősárga, teljes szélességű fotó */
.me { height: calc(100% - 2.3em); background: #17191c; color: #fff; }
.me-nav { display: flex; align-items: center; gap: 1.2em; height: 3.3em; padding: 0 1.6em; }
.me-logo { display: inline-flex; align-items: center; gap: .45em; margin-right: auto; font: 800 .82em/1 var(--kijelzo); letter-spacing: .12em; white-space: nowrap; }
.me-logo i { width: 1.15em; height: 1.05em; background: #f2c300; clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%); }
.me-linkek { display: flex; gap: 1em; color: #a9adb4; font-size: .6em; }
.me-gomb { display: inline-block; padding: .6em 1em; border-radius: .15em; background: #f2c300; color: #17191c; font-size: .6em; font-weight: 700; white-space: nowrap; }
.me-nyito { position: relative; height: 16.4em; overflow: hidden; }
.me-kep { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.me-nyito::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(15, 16, 18, .58); }
.me-nyito__szoveg { position: relative; z-index: 2; padding: 3.4em 1.6em 0; }
.me-felirat { display: block; color: #f2c300; font-size: .56em; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.me-cim { display: block; max-width: 9em; margin: .45em 0 .6em; font: 800 2em/1 var(--kijelzo); letter-spacing: -.02em; }
.me-gomb--nagy { padding: .75em 1.2em; font-size: .64em; }
.me-csempek { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; padding: 1em 1.6em; }
.me-csempek span { display: flex; align-items: center; gap: .6em; padding: .8em .9em; background: #22252a; border-top: .2em solid #f2c300; }
.me-csempek i { width: 1.1em; height: 1.1em; border: .18em solid #f2c300; }
.me-csempek b { font-size: .68em; font-weight: 600; }

/* ---------- Mit kap? ---------- */

.kinalat { background: var(--lap); }
.kinalat__racs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  border: 1px solid var(--vonal);
  border-radius: var(--r-nagy);
  overflow: hidden;
  background: var(--vonal);
}
@media (min-width: 640px) { .kinalat__racs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .kinalat__racs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kinalat__elem {
  padding: clamp(24px, 3vw, 36px);
  background: var(--feher);
}
.kinalat__jel { display: block; color: var(--indigo); }
.kinalat__jel .jel { width: 28px; height: 28px; stroke-width: 1.6; }
.kinalat__cim {
  margin: 20px 0 8px;
  color: var(--tinta);
  font: 700 1.3rem/1.15 var(--kijelzo);
  letter-spacing: -.015em;
}
.kinalat__szoveg { margin: 0; color: var(--halk); font-size: 1rem; line-height: 1.6; }

/* ---------- Csomagok ---------- */

.csomagok { background: var(--ko); border-block: 1px solid var(--vonal); }
.csomagok__sor {
  display: grid;
  gap: 32px;
  max-width: 580px;
  margin-inline: auto;
}
@media (min-width: 1000px) {
  .csomagok__sor { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
}

.csomag {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 36px;
  border: 1px solid var(--vonal);
  border-radius: var(--r-nagy);
  background: var(--feher);
}
.csomag--kiemelt {
  border: 2px solid var(--indigo);
  padding: 33px 29px 35px;
  box-shadow: var(--arnyek);
}
.csomag__jelzes {
  position: absolute;
  top: -13px; left: 28px;
  margin: 0;
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--indigo);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.csomag__jel {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--vonal);
  border-radius: var(--r);
  color: var(--indigo);
}
.csomag--kiemelt .csomag__jel { background: var(--indigo-halvany); border-color: var(--indigo-kozep); }
.csomag__nev {
  margin: 22px 0 10px;
  color: var(--tinta);
  font: 800 1.75rem/1.05 var(--kijelzo);
  letter-spacing: -.03em;
}
.csomag__kinek { margin: 0; color: var(--halk); line-height: 1.55; }
.csomag__fej {
  margin: 26px 0 4px;
  padding-top: 22px;
  border-top: 1px solid var(--vonal);
  color: var(--tinta);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.csomag__lista { list-style: none; margin: 0; padding: 0; }
.csomag__lista li {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  font-size: .98rem;
  line-height: 1.5;
}
.csomag__lista .jel {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 3px;
  color: var(--indigo);
  stroke-width: 2.6;
}

.csomagok__megjegyzes {
  display: flex;
  gap: 14px;
  max-width: 860px;
  margin: 56px auto 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--vonal-eros);
  color: var(--halk);
  font-size: .95rem;
  line-height: 1.6;
}
.csomagok__megjegyzes .jel { flex: none; margin-top: 1px; color: var(--indigo); }

/* ---------- Folyamat ---------- */

.folyamat {
  background: var(--ejkek);
  color: rgba(255, 255, 255, .74);
}
.folyamat .szakaszfej__felirat { color: var(--indigo-vilagos); }
.folyamat .szakaszfej__cim { color: #fff; }
.folyamat__fej { display: grid; gap: 32px; margin-bottom: clamp(44px, 6vw, 72px); }
.folyamat__fej .szakaszfej { margin-bottom: 0; }
.folyamat__kep { margin: 0; }
.folyamat__kep img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r);
}
@media (min-width: 920px) {
  .folyamat__fej { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: end; }
  .folyamat__kep img { aspect-ratio: 2 / 1; }
}

.menet {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.menet__lepes {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 16px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.menet__szam {
  grid-row: 1 / span 2;
  color: var(--indigo-vilagos);
  font: 700 2rem/1 var(--kijelzo);
  letter-spacing: -.02em;
}
.menet__cim {
  margin: 4px 0 8px;
  color: #fff;
  font: 700 1.2rem/1.2 var(--kijelzo);
  letter-spacing: -.01em;
}
.menet__szoveg { margin: 0; font-size: .97rem; line-height: 1.6; }

@media (min-width: 680px) {
  .menet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
  .menet__lepes { display: block; padding: 22px 0 36px; }
  .menet__cim { margin-top: 18px; }
}
@media (min-width: 1100px) {
  .menet { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .menet__lepes { padding-bottom: 0; }
  .menet__szoveg { font-size: .93rem; }
}

/* ---------- Gyakori kérdések ---------- */

.kerdesek { background: var(--lap); }
.kerdesek__racs { display: grid; gap: 40px; }
@media (min-width: 980px) {
  .kerdesek__racs { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .kerdesek__fej { position: sticky; top: 112px; margin-bottom: 0; }
}
.kerdesek__fej .szakaszfej__cim { font-size: clamp(2rem, 1.4rem + 1.9vw, 2.8rem); }
.kerdesek__tovabb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  color: var(--indigo);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--indigo-kozep);
  text-underline-offset: .25em;
}
.kerdesek__tovabb:hover { text-decoration-color: currentColor; }

.kerdesek__lista { border-top: 1px solid var(--vonal-eros); }
.kerdes { border-bottom: 1px solid var(--vonal-eros); }
.kerdes__fej {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0;
  color: var(--tinta);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.kerdes__fej::-webkit-details-marker { display: none; }
.kerdes__fej:hover { color: var(--indigo); }
.kerdes__jel {
  flex: none;
  width: 28px; height: 28px;
  padding: 5px;
  border: 1px solid var(--vonal-eros);
  border-radius: 6px;
  color: var(--tinta);
  transition: transform var(--atmenet-ido), background-color var(--atmenet-ido), color var(--atmenet-ido), border-color var(--atmenet-ido);
}
.kerdes[open] .kerdes__jel { transform: rotate(45deg); background: var(--indigo); border-color: var(--indigo); color: #fff; }
.kerdes__valasz { padding: 0 48px 24px 0; color: var(--szoveg); line-height: 1.7; }
.kerdes__valasz p { margin: 0; }
.kerdes__forras { margin-top: 12px !important; font-size: .95rem; color: var(--halk); }
.kerdes__forras a { font-weight: 600; text-decoration-color: var(--indigo-kozep); text-underline-offset: .2em; }
.kerdes__forras a:hover { text-decoration-color: var(--indigo); }
@media (max-width: 559px) { .kerdes__valasz { padding-right: 0; } }

/* ---------- Tudástár ---------- */

.tudastar { background: var(--ko); border-top: 1px solid var(--vonal); }

.vezerfonal {
  position: relative;
  display: grid;
  gap: 28px;
  margin-bottom: 20px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--vonal);
  border-radius: var(--r-nagy);
  background: var(--feher);
  overflow: hidden;
  transition: border-color var(--atmenet-ido), box-shadow var(--atmenet-ido);
}
.vezerfonal:hover { border-color: var(--vonal-eros); box-shadow: var(--arnyek); }
.vezerfonal:focus-within { outline: 2px solid var(--indigo); outline-offset: 3px; }
.vezerfonal a:focus-visible { outline: none; }
@media (min-width: 820px) {
  .vezerfonal { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 48px; }
}
.vezerfonal__felirat {
  margin: 0;
  color: var(--indigo);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vezerfonal__cim {
  margin: 12px 0 10px;
  font: 800 clamp(1.55rem, 1.15rem + 1.3vw, 2.1rem)/1.08 var(--kijelzo);
  letter-spacing: -.03em;
}
.vezerfonal__cim a { color: var(--tinta); text-decoration: none; }
.vezerfonal__cim a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vezerfonal:hover .vezerfonal__cim a { color: var(--indigo); }
.vezerfonal__leiras { margin: 0; color: var(--halk); max-width: 56ch; }
.vezerfonal__jel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--indigo);
  font-weight: 600;
}
.vezerfonal:hover .vezerfonal__jel .jel { transform: translateX(3px); }
.vezerfonal__jel .jel { transition: transform var(--atmenet-ido); }
.vezerfonal__rajz {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: 28px;
  border-radius: var(--r);
  background: var(--indigo-halvany);
}
.vezerfonal__lap {
  display: grid;
  gap: 14px;
  width: min(270px, 100%);
  padding: 22px 22px 24px;
  border: 1px solid var(--indigo-kozep);
  border-radius: 8px;
  background: #fff;
}
.vf-sor { display: flex; align-items: center; gap: 12px; }
.vf-sor b {
  position: relative;
  flex: none;
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--vonal-eros);
}
.vf-sor--kesz b { background: var(--indigo); border-color: var(--indigo); }
.vf-sor--kesz b::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.vf-sor em { display: block; width: var(--sz); height: 7px; border-radius: 2px; background: var(--vonal); }
.vf-sor--kesz em { background: var(--indigo-kozep); }
.vf-sor i, .vf-sor b, .vf-sor em { font-style: normal; }
.vezerfonal__lap i { display: flex; font-style: normal; }

/* Cikk-kártyák */
.lajstrom {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) { .lajstrom { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .lajstrom { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

.lajstrom__tetel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border: 1px solid var(--vonal);
  border-radius: var(--r-nagy);
  background: var(--feher);
  transition: border-color var(--atmenet-ido), box-shadow var(--atmenet-ido);
}
.lajstrom__tetel:hover { border-color: var(--vonal-eros); box-shadow: var(--arnyek); }
.lajstrom__tetel:focus-within { outline: 2px solid var(--indigo); outline-offset: 3px; }
.lajstrom__fej { display: flex; align-items: center; gap: 10px; }
.lajstrom__jel { display: grid; place-items: center; color: var(--indigo); }
.lajstrom__meta { color: var(--halk); font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.lajstrom__cim {
  text-wrap: pretty;
  margin: 4px 0 0;
  font: 700 1.3rem/1.18 var(--kijelzo);
  letter-spacing: -.02em;
}
.lajstrom__cim a { color: var(--tinta); text-decoration: none; transition: color var(--atmenet-ido); }
.lajstrom__cim a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-nagy); }
.lajstrom__cim a:focus-visible { outline: none; }
.lajstrom__tetel:hover .lajstrom__cim a { color: var(--indigo); }
.lajstrom__sor { margin: 0; color: var(--halk); font-size: .98rem; line-height: 1.55; }
.lajstrom--tomor .lajstrom__tetel { padding: 22px 24px; }
.lajstrom--tomor .lajstrom__cim { font-size: 1.18rem; }

/* ---------- Záró sáv és ajánló: egyetlen tömör indigó felület ---------- */

.zaro { background: var(--ko); padding-block: 0 clamp(72px, 9vw, 120px); }
.zaro__belso, .ajanlo__belso {
  max-width: var(--szeles);
  margin: 0 auto;
  padding-inline: var(--margo);
}
.zaro__panel, .ajanlo__panel {
  display: grid;
  gap: 32px;
  padding: clamp(32px, 6vw, 72px);
  border-radius: var(--r-nagy);
  background: var(--indigo);
  color: rgba(255, 255, 255, .86);
}
@media (min-width: 900px) {
  .zaro__panel, .ajanlo__panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 56px; }
}
.zaro__cim, .ajanlo__cim {
  margin: 0;
  color: #fff;
  font: 800 clamp(2rem, 1.3rem + 2.6vw, 3.3rem)/1.03 var(--kijelzo);
  letter-spacing: -.03em;
}
.ajanlo__cim { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); }
.zaro__alcim, .ajanlo__alcim { max-width: 48ch; margin: 18px 0 0; font-size: 1.125rem; line-height: 1.6; }
.ajanlo__felirat {
  margin: 0 0 14px;
  color: #dcd9ff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.zaro__lepesek, .ajanlo__lepesek {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
@media (min-width: 900px) {
  .zaro__lepesek, .ajanlo__lepesek { flex-direction: column; align-items: stretch; }
}
@media (max-width: 519px) {
  .zaro__lepesek .gomb, .ajanlo__lepesek .gomb { flex: 1 1 100%; white-space: normal; text-align: center; }
}

.ajanlo { background: var(--ko); padding-block: 8px clamp(72px, 8vw, 112px); }

/* ---------- Lábléc ---------- */

.lablec {
  background: var(--ejkek);
  color: rgba(255, 255, 255, .68);
  font-size: .97rem;
}
.lablec__belso {
  max-width: var(--szeles);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 88px) var(--margo) 0;
  display: grid;
  gap: 48px;
}
@media (min-width: 980px) {
  .lablec__belso { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 72px; }
}
.lablec__nev { display: inline-block; text-decoration: none; }
.lablec__nev .logo { height: 34px; }
.lablec__ige { max-width: 36ch; margin: 20px 0 0; line-height: 1.6; }
.lablec__jegyek {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.lablec__jegyek li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .85);
  font-size: .88rem;
  font-weight: 500;
}
.lablec__jegyek .jel { color: var(--indigo-vilagos); }

.lablec__oszlopok {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 24px;
}
.lablec__oszlop--szeles { grid-column: 1 / -1; order: 3; }
@media (min-width: 640px) {
  .lablec__oszlopok { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); }
  .lablec__oszlop--szeles { grid-column: auto; order: 0; }
}
.lablec__fej {
  margin: 0 0 16px;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lablec__fej a { color: #fff; text-decoration: none; }
.lablec__fej a:hover { color: var(--indigo-vilagos); }
.lablec__oszlop ul { list-style: none; margin: 0; padding: 0; }
.lablec__oszlop li { margin-top: 10px; }
.lablec__oszlop li a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color var(--atmenet-ido);
}
.lablec__oszlop li a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.lablec__alj {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 24px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .58);
  font-size: .875rem;
}
.lablec__alj p { margin: 0; }

/* ---------- Belső oldalak fejléce ---------- */

.lapfej {
  padding-block: clamp(36px, 6vw, 80px) clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--vonal);
  background: var(--ko);
}
.lapfej__belso {
  max-width: var(--szeles);
  margin: 0 auto;
  padding-inline: var(--margo);
}
.lapfej--cikk .lapfej__belso, .nezet-lap .lapfej__belso { max-width: calc(1040px + 2 * var(--margo)); }
.lapfej__morzsa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--halk);
  font-size: .9rem;
}
.lapfej__morzsa a { color: var(--halk); text-decoration: none; }
.lapfej__morzsa a:hover { color: var(--indigo); text-decoration: underline; text-underline-offset: .2em; }
.lapfej__morzsa .jel { color: var(--vonal-eros); }
.lapfej__cimke {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 28px 0 0;
  color: var(--indigo);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lapfej__cim {
  max-width: 22ch;
  margin: 14px 0 0;
  color: var(--tinta);
  font: 800 clamp(2.1rem, 1.4rem + 2.6vw, 3.3rem)/1.04 var(--kijelzo);
  letter-spacing: -.03em;
}
.lapfej--tar .lapfej__cim, .tevut .lapfej__cim { margin-top: 22px; }
.lapfej__bevezeto {
  max-width: 62ch;
  margin: 20px 0 0;
  color: var(--halk);
  font-size: clamp(1.07rem, 1rem + .3vw, 1.22rem);
  line-height: 1.6;
}
.lapfej__adatok {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--vonal-eros);
}
.lapfej__adatok > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--szoveg);
  font-size: .92rem;
  font-weight: 500;
}
.lapfej__adatok .jel { color: var(--indigo); }

/* ---------- Olvasónézet ---------- */

.olvaso {
  max-width: calc(1040px + 2 * var(--margo));
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) var(--margo) clamp(64px, 8vw, 96px);
}
.jegyzek { display: none; }
.jegyzek-mobil {
  margin-bottom: 32px;
  border: 1px solid var(--vonal);
  border-radius: var(--r);
  background: var(--feher);
}
.jegyzek-mobil summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  color: var(--tinta);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r);
}
.jegyzek-mobil summary::-webkit-details-marker { display: none; }
.jegyzek-mobil summary .jel { color: var(--indigo); }
.jegyzek-mobil nav { padding: 0 18px 16px; }

.jegyzek ul, .jegyzek-mobil ul { list-style: none; margin: 0; padding: 0; }
.jegyzek ul ul, .jegyzek-mobil ul ul { padding-left: 14px; }
.jegyzek a, .jegyzek-mobil a {
  display: block;
  padding: 6px 0 6px 14px;
  border-left: 1px solid var(--vonal-eros);
  color: var(--halk);
  font-size: .92rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--atmenet-ido), border-color var(--atmenet-ido);
}
.jegyzek ul ul a, .jegyzek-mobil ul ul a { font-size: .86rem; }
.jegyzek a:hover, .jegyzek-mobil a:hover { color: var(--indigo); border-color: var(--indigo); }
.jegyzek__fej {
  margin: 0 0 14px;
  color: var(--tinta);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (min-width: 1080px) {
  .olvaso--jegyzekkel {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
  .jegyzek {
    display: block;
    position: sticky;
    top: 104px;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    padding-right: 4px;
  }
  .jegyzek-mobil { display: none; }
}

.cikktest {
  max-width: 70ch;
  color: var(--szoveg);
  font-size: 1.09rem;
  line-height: 1.75;
  overflow-wrap: break-word;
}
.olvaso:not(.olvaso--jegyzekkel) .cikktest { margin-inline: 0; }
.cikktest > :first-child { margin-top: 0; }
.cikktest p, .cikktest ul, .cikktest ol { margin: 1.15em 0 0; }
.cikktest > p:first-child { color: var(--tinta); font-size: 1.16rem; }
.cikktest h2 {
  margin: 2.1em 0 0;
  color: var(--tinta);
  font: 700 clamp(1.6rem, 1.3rem + 1vw, 2.05rem)/1.12 var(--kijelzo);
  letter-spacing: -.025em;
}
.cikktest h3 {
  margin: 1.8em 0 0;
  color: var(--tinta);
  font: 700 1.35rem/1.2 var(--kijelzo);
  letter-spacing: -.015em;
}
.cikktest h2 + p, .cikktest h3 + p { margin-top: .7em; }
.cikktest a {
  color: var(--indigo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--indigo-kozep);
  text-underline-offset: .2em;
  transition: text-decoration-color var(--atmenet-ido), color var(--atmenet-ido);
}
.cikktest a:hover { color: var(--indigo-mely); text-decoration-color: currentColor; }
.cikktest strong { color: var(--tinta); font-weight: 650; }
.cikktest ul, .cikktest ol { padding-left: 1.35em; }
.cikktest li { margin-top: .5em; padding-left: .25em; }
.cikktest ul > li::marker { color: var(--indigo); }
.cikktest ol > li::marker { color: var(--indigo); font-weight: 700; }
.cikktest blockquote {
  margin: 1.8em 0 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--indigo);
  color: var(--tinta);
}
.cikktest blockquote > :first-child { margin-top: 0; }
.cikktest code {
  padding: .1em .38em;
  border: 1px solid var(--vonal);
  border-radius: 4px;
  background: var(--ko);
  font: .88em/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.cikktest pre {
  max-width: 100%;
  overflow-x: auto;
  margin: 1.6em 0 0;
  padding: 18px 20px;
  border-radius: var(--r);
  background: var(--tinta);
  color: #e7e8f4;
}
.cikktest pre code { padding: 0; border: 0; background: none; color: inherit; }
.cikktest hr { height: 1px; margin: 2.6em 0; border: 0; background: var(--vonal); }

.tablatarto {
  max-width: 100%;
  overflow-x: auto;
  margin: 1.8em 0 0;
  border: 1px solid var(--vonal);
  border-radius: var(--r);
  background: var(--feher);
}
.tablatarto table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.5;
}
.tablatarto th {
  padding: 13px 16px;
  border-bottom: 1px solid var(--vonal-eros);
  background: var(--ko);
  color: var(--tinta);
  font-weight: 650;
  text-align: left;
  vertical-align: bottom;
}
.tablatarto td { padding: 13px 16px; border-bottom: 1px solid var(--vonal); vertical-align: top; }
.tablatarto tr:last-child td { border-bottom: 0; }

.cikktest__megjegyzes {
  display: flex;
  gap: 12px;
  margin-top: 2.6em !important;
  padding: 18px 0 0;
  border-top: 1px solid var(--vonal-eros);
  color: var(--halk);
  font-size: .95rem;
  line-height: 1.6;
}
.cikktest__megjegyzes .jel { flex: none; margin-top: 2px; color: var(--indigo); }

/* Kapcsolódó olvasnivaló */
.tovabb { background: var(--ko); border-top: 1px solid var(--vonal); padding-block: clamp(56px, 7vw, 88px) clamp(40px, 5vw, 56px); }
.tovabb__belso { max-width: var(--szeles); margin: 0 auto; padding-inline: var(--margo); }
.tovabb__fej {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 10px 32px;
  margin-bottom: 28px;
}
.tovabb__cim {
  margin: 0;
  color: var(--tinta);
  font: 800 clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem)/1.05 var(--kijelzo);
  letter-spacing: -.03em;
}
.tovabb__kezikonyv { margin: 0; color: var(--halk); }
.tovabb__kezikonyv a { font-weight: 600; text-decoration-color: var(--indigo-kozep); text-underline-offset: .2em; }

/* Tudástár-lista */
.szakasz--tar { background: var(--ko); padding-block: clamp(40px, 6vw, 72px) clamp(48px, 6vw, 72px); }
.lapfej + .szakasz--tar, .lapfej--tar ~ .szakasz--tar { background: var(--lap); }
.szakasz--tar .vezerfonal { margin-bottom: 24px; }

/* ---------- 404 ---------- */

.tevut__belso { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .tevut__belso { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; } }
.tevut__lepesek { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.tevut__rajz { display: grid; place-items: center; }
.tevut__ablak {
  width: min(420px, 100%);
  overflow: hidden;
  border: 1px solid var(--vonal-eros);
  border-radius: var(--r-nagy);
  background: var(--feher);
  box-shadow: var(--arnyek-nagy);
  font-size: 14px;
}
.tevut__ablak i { display: block; }
.tevut__url {
  flex: 0 1 16em;
  margin-inline: auto;
  padding: .2em .9em;
  border: 1px solid #dcdfea;
  border-radius: .35em;
  background: #fff;
  color: #66687f;
  font-size: .85em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tevut__lap { padding: 40px 28px 48px; text-align: center; }
.tevut__szam {
  display: block;
  color: var(--indigo);
  font: 800 7rem/1 var(--kijelzo);
  letter-spacing: -.05em;
}
.tevut__sor { display: block; width: var(--sz); height: 8px; margin: 14px auto 0; border-radius: 2px; background: var(--vonal); }

/* ---------- Mozgáscsökkentés ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}