/* ==========================================================================
   VIN-FAKTOR Zrt. – honlap stíluslap
   --------------------------------------------------------------------------
   ÚTVONALAK
   Ebben a fájlban minden hivatkozás relatív a stíluslap helyéhez képest
   (../fonts/…), a HTML-ben pedig az oldal helyéhez képest. Így a site
   tetszőleges alkönyvtárba kitehető, gyökérre mutató (/) útvonal nincs.

   BETŰTÍPUS
   Az Inter helyben tárolt, saját szerverről szolgáljuk ki. Ez összhangban
   van az Adatkezelés oldal állításával: a honlap nem hív külső szolgáltatót.

   SZÍNKONTRASZT (WCAG 2.1 AA, számított értékek)
   - #1C2733 törzsszöveg fehéren ............... 15,1:1
   - #4A5666 halk szöveg fehéren ................ 7,5:1
   - #14487F linkszín fehéren ................... 9,3:1
   - #FFFFFF fehér a #003366 mélykéken ......... 12,6:1
   - #B9C9DC halk szöveg a mélykéken ............ 7,5:1
   - #D4AF37 arany a #003366 mélykéken .......... 6,0:1  (AA, szövegként is)
   - #D4AF37 arany fehéren ...................... 1,9:1  NEM megfelelő,
     ezért az arany fehér háttéren kizárólag dekoratív vonal, sosem szöveg.
   - #8C92AC ezüst fehéren ...................... 3,1:1  NEM megfelelő,
     ezért az ezüst kizárólag szegély és dekoráció, sosem törzsszöveg.
   ========================================================================== */

/* --- 1. Betűtípusok (saját szerverről, nem CDN-ről) --------------------- */

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-latin-ext-600-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter-latin-ext-700-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. Arculati változók ---------------------------------------------- */

:root {
	/* Márkaszínek */
	--kek: #003366;
	--kek-melyebb: #002851;
	--arany: #d4af37;
	--ezust: #8c92ac;

	/* Származtatott, kontraszthelyes árnyalatok */
	--link: #14487f;
	--szoveg: #1c2733;
	--szoveg-halk: #4a5666;
	--hatter: #ffffff;
	--hatter-semleges: #f5f7f9;
	--keret: #dce3ec;
	--keret-eros: #c2cddc;

	/* Sötét szekció (mélykék háttéren) */
	--sotet-szoveg: #e8eef5;
	--sotet-halk: #b9c9dc;
	--sotet-keret: #23507f;

	/* Figyelmeztetés / szerkesztői jelölés */
	--jelzo-hatter: #fdf6e3;
	--jelzo-keret: #9a6b00;
	--jelzo-szoveg: #6b4a00;

	/* Tipográfia */
	--betu: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;

	/* Vázméretek */
	--kontener: 70rem;          /* 1120 px */
	--oldalter: clamp(1.25rem, 4vw, 2.5rem);
	--szakaszter: clamp(3rem, 7vw, 6.5rem);
	--mertek: 68ch;             /* olvasható szövegoszlop szélessége */
	--ker: 6px;                 /* kártyák sarokkerekítése */
	--ker-gomb: 4px;            /* gombok sarokkerekítése */
	--fejlecmagassag: 4.25rem;
}

/* --- 3. Alapok ---------------------------------------------------------- */

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

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--hatter);
	color: var(--szoveg);
	font-family: var(--betu);
	font-size: 1.0625rem;      /* 17 px */
	line-height: 1.7;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

/* Hosszú, tördelhetetlen adatok (e-mail, bankszámlaszám) sosem lógnak ki. */
a,
dd,
td {
	overflow-wrap: break-word;
}

/* --- 4. Tipográfiai skála ---------------------------------------------- */

h1,
h2,
h3,
h4 {
	color: var(--kek);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.012em;
	/* Címsorokban nem engedjük az automatikus elválasztást. */
	hyphens: none;
	text-wrap: balance;
	/* Végszükség-tördelés: a magyar összetett szavak (pl.
	   „Dokumentumarchívum") 320 px-en egyetlen szóként sem lóghatnak ki. */
	overflow-wrap: break-word;
}

h1 {
	margin: 0 0 1.125rem;
	font-size: clamp(1.875rem, 4.4vw, 2.8125rem);
	line-height: 1.16;
	letter-spacing: -0.02em;
}

h2 {
	margin: 0 0 1rem;
	font-size: clamp(1.375rem, 2.6vw, 1.8125rem);
}

h3 {
	margin: 0 0 0.6rem;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.005em;
}

h4 {
	margin: 0 0 0.4rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--szoveg);
	letter-spacing: 0;
}

p,
ul,
ol,
dl {
	margin: 0 0 1.1rem;
}

:where(p, li) {
	/* A magyar szöveg hosszú összetett szavai miatt engedjük az elválasztást. */
	hyphens: auto;
}

a {
	color: var(--link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

a:hover {
	color: var(--kek);
}

strong {
	font-weight: 600;
}

abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
}

/* Olvasható szövegoszlop – legfeljebb ~68 karakter. */
.mertek {
	max-width: var(--mertek);
}

/* Szekció fölötti kis felirat. Nem helyettesít címsort. */
.felirat {
	margin: 0 0 0.75rem;
	color: var(--szoveg-halk);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	hyphens: none;
}

/* Halk kísérőszöveg. */
.halk {
	color: var(--szoveg-halk);
}

/* Külső hivatkozás és fájltípus szöveges jelzése – felolvasóval is érthető,
   nem csak ikonnal jelöljük. */
.jel {
	color: var(--szoveg-halk);
	font-size: 0.8125rem;
	font-weight: 400;
	white-space: nowrap;
}

/* Mélykék háttéren a halk szürke jelzés nem érné el az AA kontrasztot. */
.sotet .jel,
.lablec .jel {
	color: var(--sotet-halk);
}

/* Szerkesztői jelölés a még nem ellenőrzött adatokhoz. */
.ellenorizendo {
	display: inline-block;
	padding: 0.05em 0.4em;
	border: 1px dashed var(--jelzo-keret);
	border-radius: 3px;
	background: var(--jelzo-hatter);
	color: var(--jelzo-szoveg);
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
}

/* --- 5. Akadálymentesség: fókusz és kihagyó link ------------------------ */

:focus-visible {
	outline: 3px solid var(--link);
	outline-offset: 2px;
}

/* Mélykék háttéren a kék fókuszkeret nem látszana. */
.sotet :focus-visible,
.lablec :focus-visible,
.segedsav :focus-visible {
	outline-color: #ffffff;
}

.atlepes {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 200;
	padding: 0.8rem 1.25rem;
	background: var(--kek);
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
}

.atlepes:focus {
	left: 0;
}

/* Csak felolvasónak szánt szöveg. */
.csak-felolvaso {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* A fókuszált szakasz ne kapjon dupla keretet a JS-es fókuszáláskor. */
[tabindex="-1"]:focus {
	outline: none;
}

/* --- 6. Váz és szekciók ------------------------------------------------- */

.kontener {
	width: 100%;
	max-width: var(--kontener);
	margin: 0 auto;
	padding-inline: var(--oldalter);
}

.szakasz {
	padding-block: var(--szakaszter);
	/* A sticky fejléc miatt az ugrópontok ne csússzanak a fejléc alá. */
	scroll-margin-top: calc(var(--fejlecmagassag) + 0.5rem);
}

/* Szándékosan background-color (nem background rövidítés): a háttérképes
   változatok így tudják külön beállítani a background-image-et, és a szín
   tartalék marad, ha a kép nem töltődik be. */
.szakasz--semleges {
	background-color: var(--hatter-semleges);
	border-block: 1px solid var(--keret);
}

/* Belső oldalakon szűkebb függőleges tér. */
.szakasz--szuk {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.sotet {
	background-color: var(--kek);
	color: var(--sotet-szoveg);
}

.sotet h1,
.sotet h2,
.sotet h3,
.sotet h4 {
	color: #ffffff;
}

/* Sötét háttéren a halk szürkék nem érnék el az AA kontrasztot. */
.sotet .halk,
.sotet .felirat,
.sotet .panel__forras,
.sotet .adatlista dt {
	color: var(--sotet-halk);
}

.sotet a {
	color: #ffffff;
	text-decoration: underline;
}

.sotet a:hover {
	color: var(--arany);
}

/* --- 6b. Háttérképes szekciók ------------------------------------------- */

/*
   Az overlay-erősségek NEM becsültek: a négy kép mért átlagos relatív
   luminanciájából számoltuk őket úgy, hogy a szöveg-nagyságú területeken a
   szövegkontraszt mindenhol 7:1 felett legyen (WCAG AA kétszeres tartalékkal).

   Mért kép-luminanciák (0 = fekete, 1 = fehér):
     hero-compliance ....... 0,080   (eleve sötét)
     megkozelites-process .. 0,320   (világos)
     bizalom-megfeleles .... 0,146
     kapcsolat-footer ...... 0,035   (nagyon sötét)

   A képek tehát már eleve overlay-hez gradingelt anyagok. Ezért a
   kapcsolat-footer 44–80%-os, a hero pedig 68–90%-os átmenetet kap: a
   feladatleírás 75–85%-os fix fedése ezeken a képeken lapos, alig
   érzékelhető felületet adna, és pont az atmoszférát oltaná ki.

   Az overlay és a kép külön custom propertyben van, hogy a mobil
   breakpointon csak a kisebb képet kelljen kicserélni – a gradienst nem.
   background-attachment: fixed szándékosan NINCS (parallax nem kívánt).
*/
.kepes {
	background-image: var(--kep-overlay), var(--kep);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/* 1. Hero – a bal oldal a legerősebb, mert ott van a headline és a szöveg;
   jobbra oldódik, hogy az épületbejárat felismerhető maradjon. */
.kepes--hero {
	--kep: url("../../images/hero-compliance-final.webp");
	--kep-overlay: linear-gradient(
		100deg,
		rgba(14, 24, 34, 0.93) 0%,
		rgba(14, 24, 34, 0.86) 40%,
		rgba(14, 24, 34, 0.70) 100%
	);
}

/* 2. Megközelítés – VILÁGOS kezelés. Sötét overlay-jel a kép sáros
   barnaszürkévé mosódna, és két szomszédos sötét szekció keletkezne
   (Megközelítés + Bizalom), ami megtörné az oldal ritmusát. Így viszont a
   csempe-rács és az átlós geometria strukturális textúraként marad meg, a
   törzsszöveg pedig sötét és 9:1 felett olvasható.

   A KÉP ELŐÁLLÍTÁSA (reprodukálható)
   Forrás: Unsplash, Xiang Ji – fotó-azonosító: Wv0eXHL2rTc
   (a 1920×2880-as eredetiből), az alábbi lépésekkel:
     1. vágás: crop(0, 700, 1920, 1980)  -> 1920×1280 (3:2)
     2. átméretezés 1600×1067-re (Lanczos)
     3. hidegítés: 58% deszaturálás, majd R ×0,985 és B ×1,030
        (az eredeti krémes-meleg csempe így illeszkedik a hideg palettához)
     4. szemcseszűrés: median 5 px (különben a WebP nem tömöríthető)
     5. clarity: unsharp mask radius 16, 110%, threshold 3
     6. kontraszt ×1,20, világosság ×1,05
     7. mentés: WebP quality 58 -> ~92 kB;  mobil: 960×640, quality 74
   A 3:2 arány szándékos: a szekció desktopon 1,24–1,82 arányú, ezt a
   vágás cover mellett is jól bírja. */
.kepes--megkozelites {
	--kep: url("../../images/megkozelites-process-final.webp");
	--kep-overlay: linear-gradient(
		rgba(245, 247, 249, 0.82) 0%,
		rgba(245, 247, 249, 0.86) 45%,
		rgba(245, 247, 249, 0.92) 100%
	);
	/* A kép legvilágosabb részei fölött a szokásos halk tónus (#4A5666) csak
	   4,6:1-en állna – átmegy, de tartalék nélkül. Ebben a szekcióban ezért
	   egy fokkal sötétebb halk szöveget használunk (5,8:1). A változó
	   újradefiniálása minden leszármazottra érvényes, így nem kell
	   elemenként felülírni. */
	--szoveg-halk: #3c4757;
}

/* 3. Bizalom és megfelelés – a raszteres homlokzat a jobb oldalon marad
   érzékelhető. Az overlay szándékosan telítetlen mélykék (#081A2D), nem a
   márka #003366: azzal a képpel erős, telített kék mosás keletkezne, ami
   épp a kerülendő „fintech gradient” hatást adná. */
.kepes--bizalom {
	--kep: url("../../images/bizalom-megfeleles-final.webp");
	--kep-overlay: linear-gradient(
		100deg,
		rgba(8, 26, 45, 0.84) 0%,
		rgba(8, 26, 45, 0.76) 50%,
		rgba(8, 26, 45, 0.66) 100%
	);
}

/* 4. Kapcsolat / záró blokk – a legnyugodtabb felület. A kép már eleve
   nagyon sötét (0,035), ezért itt a legkisebb fedés is elég. */
.kepes--kapcsolat {
	--kep: url("../../images/kapcsolat-footer-final.webp");
	--kep-overlay: linear-gradient(
		100deg,
		rgba(10, 20, 32, 0.82) 0%,
		rgba(10, 20, 32, 0.64) 55%,
		rgba(10, 20, 32, 0.46) 100%
	);
}

/* Mobil: kisebb képváltozat (960 px). Csak a --kep cserélődik. A crop
   középre igazított; a hero és a záró blokk kompozíciója így is nyugodt
   marad, mert a képek bal/középső harmada mindkettőnél sík felület. */
@media (max-width: 48rem) {
	.kepes--hero {
		--kep: url("../../images/hero-compliance-final-960.webp");
		background-position: 60% center;
	}

	/* Mobilon a Megközelítés szekció nagyon magas és keskeny (kb. 0,22 arány).
	   A cover ilyenkor akkorát nagyít, hogy a geometria felismerhetetlen,
	   jellegtelen felületté mosódik. Ezért a képet natúr méretarányban,
	   teljes szélességben a szekció TETEJÉRE tesszük strukturális sávként, és
	   az overlay a sáv alatt teljesen átlátszatlanná válik – így a kép alsó
	   széle nem látszik, alatta a sima szekciószín folytatódik. */
	.kepes--megkozelites {
		--kep: url("../../images/megkozelites-process-final-960.webp");
		--kep-overlay: linear-gradient(
			rgba(245, 247, 249, 0.80) 0%,
			rgba(245, 247, 249, 0.88) 10%,
			rgba(245, 247, 249, 1) 18%
		);
		background-size: 100% 100%, 100% auto;
		background-position: top center, top center;
	}

	.kepes--bizalom {
		--kep: url("../../images/bizalom-megfeleles-final-960.webp");
		background-position: 72% center;
	}

	.kepes--kapcsolat {
		--kep: url("../../images/kapcsolat-footer-final-960.webp");
		background-position: 62% center;
	}
}

/* Arany akcentusvonal a szekciócímek fölött – dekoratív, információt nem hordoz. */
.szakaszfej {
	margin: 0 0 2.5rem;
	max-width: var(--mertek);
}

.szakaszfej::before {
	content: "";
	display: block;
	width: 2rem;
	height: 3px;
	margin-bottom: 1.25rem;
	background: var(--arany);
}

.szakaszfej > :last-child {
	margin-bottom: 0;
}

/* --- 7. Gombok ---------------------------------------------------------- */

.gomb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.875rem;
	padding: 0.7rem 1.35rem;
	border: 1px solid var(--kek);
	border-radius: var(--ker-gomb);
	background: var(--kek);
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	hyphens: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gomb:hover {
	background: var(--kek-melyebb);
	border-color: var(--kek-melyebb);
	color: #ffffff;
}

.gomb--masodlagos {
	background: transparent;
	border-color: var(--keret-eros);
	color: var(--kek);
}

.gomb--masodlagos:hover {
	background: var(--hatter-semleges);
	border-color: var(--kek);
	color: var(--kek);
}

.gomb--vilagos {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--kek);
}

.gomb--vilagos:hover {
	background: #e8eef5;
	border-color: #e8eef5;
	color: var(--kek-melyebb);
}

.gombsor {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

/* --- 8. Fejléc ---------------------------------------------------------- */

/* Felső segédsáv: jogi és fogyasztóvédelmi oldalak. Mobilon rejtett,
   ott ugyanezek a linkek a menüben szerepelnek. */
.segedsav {
	display: none;
	background: var(--kek);
	color: var(--sotet-szoveg);
	font-size: 0.8125rem;
}

.segedsav__belso {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.5rem;
	padding-block: 0.5rem;
}

.segedsav__cim {
	margin: 0;
	color: var(--sotet-halk);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.75rem;
}

.segedsav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.segedsav a {
	color: #ffffff;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.segedsav a:hover {
	border-bottom-color: var(--arany);
	color: #ffffff;
}

/* Az aktuális oldal jelölése nem csak színnel: aláhúzás is jelzi. */
.segedsav a[aria-current="page"] {
	border-bottom-color: var(--arany);
	font-weight: 600;
}

@media (min-width: 48rem) {
	.segedsav {
		display: block;
	}
}

/* A fejléc fő sora tapad, a segédsáv elgördül – így a tapadó rész kompakt. */
.fejlec__fo {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--hatter);
	border-bottom: 1px solid var(--keret);
}

.fejlec__belso {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--fejlecmagassag);
	padding-block: 0.75rem;
}

/* Vízszintes logólockup: az arculati monogram + szöveges wordmark.
   A wordmark valódi szöveg, így minden méretben éles és kimásolható. */
.logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
	text-decoration: none;
	color: var(--kek);
	hyphens: none;
}

.logo img {
	display: block;
	width: auto;
	height: 1.875rem;
}

.logo__nev {
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
}

.logo__forma {
	margin-left: 0.15rem;
	color: var(--szoveg-halk);
	font-size: 0.8125rem;
	font-weight: 600;
}

@media (min-width: 48rem) {
	.logo img {
		height: 2.125rem;
	}

	.logo__nev {
		font-size: 1.3125rem;
	}
}

/* Nagyon szűk kijelzőn (320 px-es eszköz, függőleges görgetősávval ~305 px
   tényleges szélesség) a logó + menügomb együtt nem férne ki, ezért itt
   lekicsinyítjük őket. A "Zrt." forma ilyenkor rejtett: a logóhivatkozás
   aria-label attribútuma, az oldalcím és a lábléc továbbra is tartalmazza,
   így információ nem veszik el. */
@media (max-width: 25rem) {
	.fejlec__belso {
		gap: 0.5rem;
	}

	.logo {
		gap: 0.45rem;
	}

	.logo img {
		height: 1.625rem;
	}

	.logo__nev {
		font-size: 1.0625rem;
	}

	.logo__forma {
		display: none;
	}

	.menu-nyito {
		padding-inline: 0.7rem;
	}
}

/* Menünyitó gomb – JS nélkül nem jelenik meg, mert akkor a menü mindig látszik. */
.menu-nyito {
	display: none;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.75rem;
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--keret-eros);
	border-radius: var(--ker-gomb);
	background: var(--hatter);
	color: var(--kek);
	font: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
}

.js .menu-nyito {
	display: inline-flex;
}

.menu-nyito:hover {
	background: var(--hatter-semleges);
	border-color: var(--kek);
}

.menu-nyito__ikon {
	position: relative;
	display: block;
	width: 1.125rem;
	height: 2px;
	background: currentcolor;
}

.menu-nyito__ikon::before,
.menu-nyito__ikon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentcolor;
}

.menu-nyito__ikon::before { top: -5px; }
.menu-nyito__ikon::after  { top: 5px; }

/* Mobil menüpanel */
.fomenu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100vh - var(--fejlecmagassag));
	overflow-y: auto;
	padding: 0.5rem var(--oldalter) 1.5rem;
	background: var(--hatter);
	border-bottom: 1px solid var(--keret);
	box-shadow: 0 8px 16px -12px rgba(0, 51, 102, 0.35);
}

.js .fomenu[hidden] {
	display: none;
}

.fomenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fomenu__fo > li > a {
	display: block;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--keret);
	color: var(--kek);
	font-weight: 600;
	text-decoration: none;
	hyphens: none;
}

.fomenu__fo > li > a:hover {
	color: var(--link);
	text-decoration: underline;
}

.fomenu__cim {
	margin: 1.5rem 0 0.5rem;
	color: var(--szoveg-halk);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fomenu__jogi > li > a {
	display: block;
	padding: 0.5rem 0;
	color: var(--link);
	font-size: 0.9375rem;
	hyphens: none;
}

.fomenu__jogi > li > a[aria-current="page"] {
	font-weight: 600;
	color: var(--kek);
}

.fomenu .gomb {
	margin-top: 1.25rem;
	width: 100%;
}

/* Asztali nézet: vízszintes menü, panel helyett sor. */
@media (min-width: 64rem) {
	/* 1024–1151 px között szűkebb a menütér: öt menüpont + CTA + logó
	   csak így fér ki vízszintes görgetés nélkül. 1152 px-től lazítunk. */
	.fejlec__belso {
		gap: 1.5rem;
	}

	.js .menu-nyito,
	.menu-nyito {
		display: none;
	}

	.fomenu,
	.js .fomenu[hidden] {
		display: flex;
		position: static;
		align-items: center;
		gap: 1rem;
		max-height: none;
		overflow: visible;
		padding: 0;
		border: 0;
		box-shadow: none;
		margin-left: auto;
	}

	.fomenu__fo {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.fomenu__fo > li > a {
		padding: 0.35rem 0;
		border-bottom: 2px solid transparent;
		font-size: 0.9375rem;
	}

	.fomenu__fo > li > a:hover {
		border-bottom-color: var(--arany);
		text-decoration: none;
	}

	.fomenu__cim,
	.fomenu__jogi {
		display: none;
	}

	.fomenu .gomb {
		width: auto;
		margin-top: 0;
		min-height: 2.5rem;
		padding: 0.5rem 1.1rem;
		font-size: 0.9375rem;
	}
}

/* Nagyobb kijelzőn már van hely a lazább menütérre. */
@media (min-width: 72rem) {
	.fejlec__belso {
		gap: 2rem;
	}

	.fomenu,
	.js .fomenu[hidden] {
		gap: 1.75rem;
	}

	.fomenu__fo {
		gap: 1.75rem;
	}
}

/* --- 9. Hero (nyitóoldal) ---------------------------------------------- */

.hero {
	padding-block: clamp(2.75rem, 6vw, 5rem);
}

.hero__racs {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 64rem) {
	.hero__racs {
		/* Kéthasábos, körülbelül 60/40 arány. */
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: 4rem;
		align-items: start;
	}
}

.hero__szoveg {
	max-width: 34rem;
}

.hero__bevezeto {
	margin: 0 0 2rem;
	max-width: 46ch;
	color: var(--szoveg-halk);
	font-size: 1.1875rem;
	line-height: 1.65;
}

/* Háttérképes hero: több függőleges tér kell, hogy a kép felületként
   működjön, ne szalagként. */
.hero.kepes {
	padding-block: clamp(3.5rem, 8vw, 7rem);
}

.hero.sotet .hero__bevezeto {
	color: var(--sotet-halk);
}

/* A gombok nem viselkedhetnek linkként a sötét szekcióban: a `.sotet a`
   szabály különben felülírná a saját szövegszínüket (nagyobb specificitás)
   és alá is húzná őket. */
.sotet .gomb {
	text-decoration: none;
}

.sotet .gomb--vilagos {
	color: var(--kek);
}

.sotet .gomb--vilagos:hover {
	color: var(--kek-melyebb);
}

/* Sötét háttéren a másodlagos gomb kontúrja és szövege világos. */
.sotet .gomb--masodlagos {
	border-color: rgba(255, 255, 255, 0.45);
	color: #ffffff;
	background: transparent;
}

.sotet .gomb--masodlagos:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #ffffff;
	color: #ffffff;
}

/* A bizalmi panel a képes heroban áttetsző, sötét felület: így a kép
   atmoszférája megmarad, és nem üt lyukat a szekcióba egy világos doboz.
   Szándékosan nincs backdrop-filter (üvegkártya-hatás nem kívánt). */
.sotet .panel {
	background-color: rgba(6, 16, 28, 0.72);
	border-color: rgba(255, 255, 255, 0.16);
	border-top-color: var(--arany);
}

.sotet .panel h2 {
	color: #ffffff;
}

.sotet .adatlista > div {
	border-top-color: rgba(255, 255, 255, 0.14);
}

.sotet .adatlista dd {
	color: #ffffff;
}

.sotet .panel__linkek {
	border-top-color: rgba(255, 255, 255, 0.24);
}

/* --- Adattábla és ügyfélfogadás sötét szekcióban -------------------------
   A záró blokkban szándékosan NEM hagyjuk fehéren a táblázatot és a
   kártyát: két nagy világos téglalap szétvágná a felületet, és épp a
   „legnyugodtabb, legletisztultabb blokk” célt rontaná el. Helyette a
   panelek finoman kivilágosított, áttetsző felületet kapnak, így a szekció
   egyetlen nyugodt egységként olvasható. */
.sotet .adatok th,
.sotet .adatok td {
	border-color: rgba(255, 255, 255, 0.18);
	background-color: transparent;
}

.sotet .adatok th {
	background-color: rgba(255, 255, 255, 0.06);
	color: #ffffff;
}

.sotet .adatok td {
	color: var(--sotet-szoveg);
}

.sotet .adatok .halk,
.sotet .fogadas .halk,
.sotet .fogadas dd {
	color: var(--sotet-halk);
}

.sotet .fogadas {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
}

.sotet .fogadas h3 {
	color: #ffffff;
}

.sotet .fogadas dt {
	color: var(--arany);
}

/* --- 10. Belső oldalak fejrésze ---------------------------------------- */

.oldalfej {
	padding-block: clamp(2rem, 4vw, 3.25rem);
	background: var(--hatter-semleges);
	border-bottom: 1px solid var(--keret);
}

/* A minimum szándékosan 1.5rem: 320 px-en a leghosszabb egyszavas
   oldalcím („Dokumentumarchívum") így még kilógás nélkül kifér. */
.oldalfej h1 {
	margin: 0;
	font-size: clamp(1.5rem, 4.5vw, 2.375rem);
	max-width: 22ch;
}

.oldalfej__bevezeto {
	margin: 1rem 0 0;
	max-width: 62ch;
	color: var(--szoveg-halk);
	font-size: 1.125rem;
	line-height: 1.65;
}

/* Morzsamenü – tájékozódás a belső oldalakon. */
.morzsa {
	padding-block: 0.75rem;
	border-bottom: 1px solid var(--keret);
	font-size: 0.875rem;
}

.morzsa ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.morzsa li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--szoveg-halk);
	hyphens: none;
}

.morzsa li + li::before {
	content: "/";
	color: var(--ezust);
}

/* --- 11. Panel (cégadatok kiemelt doboza) ------------------------------ */

.panel {
	padding: 1.5rem;
	background: var(--hatter-semleges);
	border: 1px solid var(--keret);
	border-top: 3px solid var(--arany);
	border-radius: var(--ker);
}

.panel h2 {
	margin: 0 0 0.25rem;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0;
}

.panel__forras {
	margin: 0 0 1.25rem;
	color: var(--szoveg-halk);
	font-size: 0.8125rem;
}

/* Adatlista: címke/érték párok. */
.adatlista {
	margin: 0;
	font-size: 0.9375rem;
}

.adatlista > div {
	padding: 0.6rem 0;
	border-top: 1px solid var(--keret);
}

.adatlista > div:first-child {
	border-top: 0;
	padding-top: 0;
}

.adatlista dt {
	color: var(--szoveg-halk);
	font-size: 0.8125rem;
}

.adatlista dd {
	margin: 0.1rem 0 0;
	font-weight: 600;
}

.panel__linkek {
	margin: 1.25rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--keret-eros);
	list-style: none;
	font-size: 0.9375rem;
}

.panel__linkek li + li {
	margin-top: 0.5rem;
}

/* --- 12. Kétoszlopos elrendezés ---------------------------------------- */

.ketto {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 64rem) {
	.ketto {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: 4rem;
		align-items: start;
	}
}

/* Kiegyensúlyozott két hasáb (belső oldalak). */
.ketto--egyenlo {
	gap: 2rem;
}

@media (min-width: 64rem) {
	.ketto--egyenlo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3rem;
	}
}

/* Szegéllyel tagolt pontlista – nem háromoszlopos grid. */
.pontok {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pontok > li {
	padding: 1.25rem 0;
	border-top: 1px solid var(--keret);
}

.pontok > li:first-child {
	padding-top: 0;
	border-top: 0;
}

.pontok > li:last-child {
	padding-bottom: 0;
}

.pontok h3 {
	margin: 0 0 0.4rem;
	font-size: 1rem;
}

.pontok p {
	margin: 0;
	color: var(--szoveg-halk);
	max-width: 60ch;
}

/* --- 13. Kártyák (2×2) -------------------------------------------------- */

.kartyak {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.kartyak {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

.kartya {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	background: var(--hatter);
	border: 1px solid var(--keret);
	border-radius: var(--ker);
	box-shadow: 0 1px 2px rgba(0, 51, 102, 0.04);
}

.kartya h3 {
	margin: 0 0 0.65rem;
}

.kartya > p {
	margin: 0 0 1rem;
	color: var(--szoveg-halk);
	font-size: 1rem;
}

.kartya__lista {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.kartya__lista li {
	position: relative;
	padding-left: 1.05rem;
}

.kartya__lista li + li {
	margin-top: 0.4rem;
}

/* Arany jelölő négyzet – kis méretben dekoratív, nem hordoz információt. */
.kartya__lista li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 5px;
	height: 5px;
	background: var(--arany);
}

/* Ellenőrizhető működési vagy compliance szempont a kártya alján. */
.kartya__megfeleles {
	margin: auto 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--keret);
	color: var(--szoveg-halk);
	font-size: 0.875rem;
	line-height: 1.6;
}

.kartya__megfeleles b {
	display: block;
	margin-bottom: 0.15rem;
	color: var(--kek);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

/* Partner- és testületkártyák adatlistája. */
.kartya dl {
	margin: 0;
	font-size: 0.9375rem;
}

.kartya dt {
	margin-top: 0.65rem;
	color: var(--szoveg-halk);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kartya dt:first-of-type {
	margin-top: 0;
}

.kartya dd {
	margin: 0.1rem 0 0;
}

/* --- 14. Számozott lépések --------------------------------------------- */

.lepesek {
	counter-reset: lepes;
	display: grid;
	gap: 1.5rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.lepesek {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem 2.5rem;
	}
}

.lepesek > li {
	counter-increment: lepes;
	padding-top: 1rem;
	border-top: 2px solid var(--keret-eros);
}

.lepesek h3 {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0 0 0.4rem;
	font-size: 1.0625rem;
}

.lepesek h3::before {
	content: counter(lepes, decimal-leading-zero);
	color: var(--ezust);
	font-size: 0.9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.lepesek p {
	margin: 0;
	color: var(--szoveg-halk);
	font-size: 1rem;
	max-width: 46ch;
}

/* --- 15. Témák (sötét szekció) ----------------------------------------- */

.temak {
	display: grid;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.temak {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
	}
}

.temak > li {
	padding-top: 1.25rem;
	border-top: 1px solid var(--sotet-keret);
}

.temak h3 {
	margin: 0 0 0.6rem;
	font-size: 1.0625rem;
}

.temak p {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	max-width: 52ch;
}

.temak ul {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.temak ul li + li {
	margin-top: 0.4rem;
}

/* Kiemelt figyelemfelhívó blokk sötét háttéren. */
.jelzes {
	margin: 2.5rem 0 0;
	padding: 1.5rem;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--sotet-keret);
	border-left: 3px solid var(--arany);
	border-radius: var(--ker);
}

.jelzes h3 {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
}

.jelzes p {
	margin: 0 0 0.75rem;
	max-width: 72ch;
	font-size: 1rem;
}

.jelzes > :last-child {
	margin-bottom: 0;
}

/* --- 16. Próza és kiemelt idézetblokk ----------------------------------- */

.proza {
	max-width: var(--mertek);
}

.proza h3 {
	margin: 2.25rem 0 0.6rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--keret);
}

.proza h3:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.proza p:last-child {
	margin-bottom: 0;
}

/* Kiemelt információs blokk világos háttéren. */
.kiemelt {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--hatter-semleges);
	border: 1px solid var(--keret);
	border-left: 3px solid var(--kek);
	border-radius: 0 var(--ker) var(--ker) 0;
}

.kiemelt > :last-child {
	margin-bottom: 0;
}

.kiemelt h2,
.kiemelt h3 {
	margin-top: 0;
}

/* Figyelmeztető blokk (pl. archívum: már nem hatályos dokumentumok). */
.figyelem {
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--jelzo-hatter);
	border: 1px solid #e4d3a8;
	border-left: 3px solid var(--jelzo-keret);
	border-radius: 0 var(--ker) var(--ker) 0;
	color: var(--jelzo-szoveg);
}

.figyelem > :last-child {
	margin-bottom: 0;
}

.figyelem a {
	color: #5a3d00;
}

/* --- 17. Letölthető dokumentumok ---------------------------------------- */

.letoltesek {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.75rem;
}

@media (min-width: 48rem) {
	.letoltesek--parban {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
}

.letoltesek > li {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--keret);
	border-radius: var(--ker);
	background: var(--hatter);
}

.dok {
	display: block;
	padding: 1rem 1.15rem;
	text-decoration: none;
}

.dok:hover .dok__cim {
	text-decoration: underline;
}

.dok__cim {
	display: block;
	color: var(--link);
	font-weight: 600;
	font-size: 1.0625rem;
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.dok__meta {
	display: block;
	margin-top: 0.25rem;
	color: var(--szoveg-halk);
	font-size: 0.875rem;
	text-decoration: none;
}

.dok__leiras,
.dok__valtozat {
	margin: 0;
	padding: 0 1.15rem 1rem;
	color: var(--szoveg-halk);
	font-size: 0.9375rem;
}

.dok__leiras + .dok__valtozat {
	padding-top: 0;
}

/* Már nem hatályos dokumentum jelölése. */
.dok--regi .dok__cim {
	color: var(--szoveg-halk);
}

/* --- 18. Hivatkozáslisták ----------------------------------------------- */

.linkek {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.linkek li {
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--keret);
}

.linkek li:first-child {
	border-top: 1px solid var(--keret);
}

.linkek__leiras {
	display: block;
	color: var(--szoveg-halk);
	font-size: 0.9375rem;
}

/* --- 19. Adattáblák ------------------------------------------------------ */

.adatok {
	width: 100%;
	margin: 0 0 1.5rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
	text-align: left;
}

.adatok th,
.adatok td {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--keret);
	vertical-align: top;
}

.adatok th {
	width: 40%;
	background: var(--hatter);
	color: var(--kek);
	font-weight: 600;
	hyphens: none;
}

.adatok td {
	background: var(--hatter);
}

@media (max-width: 34rem) {
	.adatok th,
	.adatok td {
		display: block;
		width: 100%;
	}

	.adatok td {
		border-top: 0;
	}

	.adatok tr + tr th {
		border-top: 0;
	}
}

/* --- 20. Ügyfélfogadási blokk -------------------------------------------- */

.fogadas {
	padding: 1.5rem;
	background: var(--hatter);
	border: 1px solid var(--keret);
	border-radius: var(--ker);
}

.fogadas h3 {
	margin: 0 0 1rem;
}

.fogadas dl {
	margin: 0 0 1.25rem;
}

.fogadas dt {
	margin-top: 0.85rem;
	color: var(--kek);
	font-size: 0.9375rem;
	font-weight: 600;
}

.fogadas dt:first-child {
	margin-top: 0;
}

.fogadas dd {
	margin: 0.1rem 0 0;
	color: var(--szoveg-halk);
	font-size: 0.9375rem;
}

.fogadas > :last-child {
	margin-bottom: 0;
}

/* --- 21. Kattintásra betöltő térkép -------------------------------------- */

/* A térkép alapállapotban nem hív külső szolgáltatót: az iframe csak a
   látogató kattintására jön létre (lásd assets/js/menu.js). */
.terkep {
	position: relative;
	margin: 0 0 1.5rem;
	background: var(--hatter-semleges);
	border: 1px solid var(--keret);
	border-radius: var(--ker);
	overflow: hidden;
}

.terkep__elonezet {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.5rem;
}

.terkep__hely {
	margin: 0;
	color: var(--kek);
	font-weight: 600;
	font-size: 1rem;
	hyphens: none;
}

.terkep__info {
	margin: 0;
	max-width: 52ch;
	color: var(--szoveg-halk);
	font-size: 0.875rem;
	line-height: 1.6;
}

.terkep__muvelet {
	margin: 0;
}

/* JS nélkül a gomb nem működne, ezért olyankor el is rejtjük – a látogató a
   lenti közvetlen hivatkozással tudja megnyitni a térképet. */
.terkep__gomb {
	display: none;
}

.js .terkep__gomb {
	display: inline-flex;
}

.terkep__alt {
	margin: 0;
	font-size: 0.9375rem;
}

/* Betöltés utáni állapot: a beágyazott térkép. */
.terkep--betoltve {
	background: var(--hatter);
}

.terkep__keret {
	display: block;
	width: 100%;
	height: 20rem;
	border: 0;
}

@media (min-width: 48rem) {
	.terkep__keret {
		height: 24rem;
	}
}

/* A térkép alatti lábjegyzet betöltés után (szolgáltató megnevezése). */
.terkep__lablec {
	margin: 0;
	padding: 0.75rem 1rem;
	border-top: 1px solid var(--keret);
	color: var(--szoveg-halk);
	font-size: 0.8125rem;
}

/* Hibaüzenet, ha a beágyazás nem töltődik be. */
.terkep__hiba {
	margin: 0;
	padding: 1.25rem 1.5rem;
	background: var(--jelzo-hatter);
	border-top: 1px solid #e4d3a8;
	color: var(--jelzo-szoveg);
	font-size: 0.9375rem;
}

.terkep__hiba a {
	color: #5a3d00;
}

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

.lablec {
	background: var(--kek);
	color: var(--sotet-szoveg);
	font-size: 0.9375rem;
}

.lablec a {
	color: #ffffff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.lablec a:hover {
	color: var(--arany);
	border-bottom-color: var(--arany);
}

.lablec__fo {
	display: grid;
	gap: 2.25rem;
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 48rem) {
	.lablec__fo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
	}
}

@media (min-width: 64rem) {
	.lablec__fo {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: 2.5rem;
	}
}

.lablec h2 {
	margin: 0 0 0.9rem;
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	hyphens: none;
}

.lablec ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lablec li + li {
	margin-top: 0.55rem;
}

.lablec p {
	margin: 0 0 0.75rem;
}

.lablec p:last-child {
	margin-bottom: 0;
}

.lablec__zaras {
	padding-block: 1.25rem;
	border-top: 1px solid var(--sotet-keret);
	color: var(--sotet-halk);
	font-size: 0.8125rem;
}

.lablec__zaras p {
	margin: 0 0 0.4rem;
}

.lablec__zaras p:last-child {
	margin-bottom: 0;
}

/* --- 23. Nyomtatás ------------------------------------------------------- */

@media print {
	body {
		font-size: 11pt;
		color: #000;
		background: #fff;
	}

	.segedsav,
	.fejlec__fo,
	.atlepes,
	.gombsor,
	.morzsa,
	.menu-nyito {
		display: none !important;
	}

	.szakasz,
	.hero,
	.oldalfej {
		padding-block: 0.75rem;
		border: 0;
	}

	/* Háttérképet nem nyomtatunk: tintát fogyaszt és olvashatatlanná tenné
	   a szöveget. A .kepes az összes képes szekciót lefedi. */
	.kepes,
	.szakasz--semleges,
	.oldalfej,
	.sotet,
	.lablec,
	.panel,
	.kartya,
	.jelzes,
	.fogadas,
	.kiemelt,
	.figyelem {
		background: #fff !important;
		color: #000 !important;
		box-shadow: none;
	}

	.kepes {
		background-image: none !important;
	}

	.sotet .adatok th,
	.sotet .adatok td,
	.sotet .panel,
	.sotet .fogadas {
		border-color: #999 !important;
		color: #000 !important;
	}

	.sotet .fogadas dt,
	.sotet .adatok th,
	.sotet .panel h2 {
		color: #000 !important;
	}

	.sotet h2,
	.sotet h3,
	.lablec h2,
	.lablec a,
	.sotet a {
		color: #000 !important;
	}

	.kartyak,
	.lepesek,
	.temak,
	.letoltesek,
	.lablec__fo {
		display: block;
	}

	a[href^="http"]::after,
	a[href$=".pdf"]::after,
	a[href$=".docx"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}
}

/* --- 24. Csökkentett mozgás ---------------------------------------------- */

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

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}