/* Trigger gomb (gettouch + triggergettouch) — alapertelmezett pozicio
   felulirasa a static.chomox.hu/styles/_fixes.scss `:root` valtozoira.
   Reszponziv: mobilon kompaktabb, asztalin nagyobb gomb es tobb levego. */
:root {
	--trigger-size: 80px;
	--trigger-right: 15px;
	--trigger-bottom: 15px;
}
@media (min-width: 769px) {
	:root {
		--trigger-size: 88px;
		--trigger-right: 30px;
		--trigger-bottom: 30px;
	}
}

#offcanvasNavbar.mck-offcanvas {
	/* A benyíló navigáció FIXEN ENCO kék – minden oldalon, a fejléc
	   színsémájától függetlenül, hogy a fehér logó mindig látszódjon. */
	--mck-kek: var(--c05, 0, 69, 140);
	--mck-bg: rgb(var(--mck-kek));
	--mck-bg-2: rgba(255, 255, 255, 0.08);
	--mck-fg: #fff;
	--mck-fg-muted: rgba(255, 255, 255, 0.68);
	--mck-divider: rgba(255, 255, 255, 0.16);
	--mck-fg-rgb: 255, 255, 255;
	--mck-bg-rgb: var(--mck-kek);
	--mck-accent: rgb(var(--c03, 250, 99, 41));

	--mck-sub-bg: #fff;
	--mck-sub-fg: rgb(var(--mck-kek));
	--mck-sub-fg-muted: rgba(var(--mck-kek), 0.6);
	--mck-sub-divider: rgba(var(--mck-kek), 0.12);

	--mck-primary-w: 25vw;
	--mck-sub-w: 75vw;
	--mck-primary-min: 320px;
	--mck-pad: 2rem;
	--mck-header-h: 97px;
	--mck-footer-h: 142px;

	width: var(--mck-primary-w) !important;
	min-width: var(--mck-primary-min);
	max-width: 100vw;
	background-color: var(--mck-bg) !important;
	color: var(--mck-fg);
	border: 0;
	box-shadow: none;
	transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
	overflow: visible;
}

/* Submenu nyitva: a teljes offcanvas 100vw szeles asztalin (primary 25vw + tree 75vw) */
#offcanvasNavbar.mck-offcanvas.mck-sub-open {
	width: 100vw !important;
}

@media (max-width: 768px) {
	#offcanvasNavbar.mck-offcanvas {
		--mck-primary-w: 100vw;
		--mck-sub-w: 100vw;
		--mck-header-h: 81px;
		width: 100vw !important;
		max-width: 100vw;
	}
	#offcanvasNavbar.mck-offcanvas.mck-sub-open { width: 100vw !important; }
}

/* ───── BACKDROP ───── */
.offcanvas-backdrop.show {
	background-color: rgba(var(--mck-backdrop-rgb, var(--c05, 0, 69, 140)), 0.78);
	opacity: 1;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* ───── FAB HAMBURGER ───── */
.mck-fab-toggle {
	position: fixed;
	top: 1.25rem;
	left: 1.25rem;
	z-index: 1045;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--bs-text, #fff);
	cursor: pointer;
	transition: opacity 200ms ease, transform 200ms ease;
}
.mck-fab-toggle:hover { opacity: 0.7; }
.mck-fab-toggle:active { transform: scale(0.92); }

.mck-fab-bars,
.mck-fab-bars::before,
.mck-fab-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	transition: transform 240ms ease, opacity 240ms ease;
}
.mck-fab-bars { position: relative; }
.mck-fab-bars::before,
.mck-fab-bars::after { content: ""; position: absolute; left: 0; }
.mck-fab-bars::before { top: -7px; }
.mck-fab-bars::after { top: 7px; }

body.mck-menu-open .mck-fab-toggle { opacity: 0; pointer-events: none; }

/* ───── HEADER (X + brand a kek panel tetejen) ───── */
#offcanvasNavbar.mck-offcanvas .mck-offcanvas-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
	width: var(--mck-primary-w);
	min-width: var(--mck-primary-min);
	border-bottom: 1px solid var(--mck-divider);
	z-index: 5;
	box-sizing: border-box;
}

/* Header magassagat a --mck-header-h valtozo adja (asztali 97px, mobil 81px az override-bol) */
#offcanvasNavbar.mck-offcanvas .mck-offcanvas-header {
	height: var(--mck-header-h);
	min-height: var(--mck-header-h);
}

/* Asztali nezet: padding csak balrol 2rem */
@media (min-width: 769px) {
	#offcanvasNavbar.mck-offcanvas .mck-offcanvas-header {
		padding: 0 0 0 2rem !important;
	}
}

/* Mobil: uniform 1.5rem padding */
@media (max-width: 768px) {
	#offcanvasNavbar.mck-offcanvas .mck-offcanvas-header {
		padding: 1.5rem !important;
	}
}

#offcanvasNavbar.mck-offcanvas .mck-close {
	background: transparent;
	border: 0;
	color: var(--mck-fg);
	padding: 0;
	margin: 0;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 220ms ease, opacity 220ms ease;
}
#offcanvasNavbar.mck-offcanvas .mck-close svg { width: 24px; height: 24px; fill: currentColor; display: block; }
#offcanvasNavbar.mck-offcanvas .mck-close:hover { opacity: 0.7; transform: rotate(90deg); }

#offcanvasNavbar.mck-offcanvas .mck-brand { margin: 0; min-width: 0; flex: 1 1 auto; }
#offcanvasNavbar.mck-offcanvas .mck-brand a,
#offcanvasNavbar.mck-offcanvas .mck-brand a:hover {
	color: var(--mck-fg) !important;
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-decoration: none;
}
#offcanvasNavbar.mck-offcanvas .mck-brand .logo {
	flex-shrink: 0;
	object-fit: contain;
}

/* a <b> alapertelmezett `bolder` (=900) helyett sima `bold` (700) az offcanvasban */
#offcanvasNavbar.mck-offcanvas b,
#offcanvasNavbar.mck-offcanvas strong {
	font-weight: 700;
}

/* ───── BODY ─────
   FONTOS: az offcanvas-body es mck-nav NEM positioned — igy a feher submenu panel
   absolute pozicija a .offcanvas elemhez (fixed) igazodik, vagyis a teljes
   offcanvas magassagaban (a header tetejetol kezdve) tud kiterulni. */
#offcanvasNavbar.mck-offcanvas .offcanvas-body {
	padding: 0 !important;
	background-color: transparent !important;
	position: static !important;
	height: calc(100dvh - var(--mck-header-h) - var(--mck-footer-h));
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
#offcanvasNavbar.mck-offcanvas .offcanvas-body::-webkit-scrollbar {
	width: 8px;
	height: 0;
}
#offcanvasNavbar.mck-offcanvas .offcanvas-body::-webkit-scrollbar-track {
	background: transparent;
}
#offcanvasNavbar.mck-offcanvas .offcanvas-body::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	border: 2px solid transparent;
	background-clip: padding-box;
	transition: background-color 200ms ease;
}
#offcanvasNavbar.mck-offcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255, 255, 255, 0.45);
}

#offcanvasNavbar.mck-offcanvas .mck-nav {
	position: static !important;
	width: 100%;
	height: 100%;
}

/* PRIMARY (gyokerszintu) ul = bal kek panel
   FONTOS: overflow nem allithato itt — kulonben a kifele (left:25vw) pozicionalt
   feher submenu paneleket levagja. A scroll-t a .offcanvas-body kezeli. */
#offcanvasNavbar.mck-offcanvas .mck-nav > ul {
	list-style: none;
	margin: 0;
	padding: 0.75rem 0;
	width: var(--mck-primary-w);
	min-width: var(--mck-primary-min);
	height: auto;
	overflow: visible;
	background-color: var(--mck-bg);
}

/* SUB-CONTAINER (a JS hozza letre az offcanvas-body-be) — a panelek itt elnek (mobile drilldown),
   keletkezett struktura: .mck-sub-container > .mck-sub-panel[data-mck-id] > (header + ul) */
#offcanvasNavbar.mck-offcanvas .mck-sub-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--mck-primary-w);
	right: 0;
	width: var(--mck-sub-w);
	pointer-events: none;
	z-index: 10;
}

@media (max-width: 768px) {
	#offcanvasNavbar.mck-offcanvas .mck-sub-container {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100dvh;
		z-index: 1060;
	}
}

/* TREE-CONTAINER (asztali nézet) — a 75vw jobb oldal, ahol a teljes nested fa megjelenik */
#offcanvasNavbar.mck-offcanvas .mck-tree-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--mck-primary-w);
	right: 0;
	width: var(--mck-sub-w);
	background-color: var(--mck-sub-bg);
	color: var(--mck-sub-fg);
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 10;
	display: none;
}

/* Asztali nézetben tree-container látszik, sub-container rejtve */
@media (min-width: 769px) {
	#offcanvasNavbar.mck-offcanvas.mck-sub-open .mck-tree-container { display: block; }
	#offcanvasNavbar.mck-offcanvas .mck-sub-container { display: none !important; }
}

/* Mobilon a tree rejtve, panel-rendszer aktiv */
@media (max-width: 768px) {
	#offcanvasNavbar.mck-offcanvas .mck-tree-container { display: none !important; }
}

/* TREE-PANEL = wrapper (header + tree). A scroll a panelen, NEM a tree-n
   (kulonben az overflow:auto block formatting context tonkretenne a columns-ot) */
#offcanvasNavbar.mck-offcanvas .mck-tree-panel {
	display: none;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}
#offcanvasNavbar.mck-offcanvas .mck-tree-panel.mck-active {
	display: flex;
}

/* a header rogzitve marad mig a tree scrollol — sticky tetejen */
#offcanvasNavbar.mck-offcanvas .mck-tree-panel > .mck-sub-header {
	position: sticky;
	top: 0;
	background-color: var(--mck-sub-bg);
	z-index: 1;
}

/* TREE — a primary li klonozott teljes submenuja, NINCS overflow rajta.
   FONTOS: display: block (felulirja az orokolt webkit-box-ot, kulonben columns nem fog) */
#offcanvasNavbar.mck-offcanvas .mck-tree {
	display: block !important;
	list-style: none;
	margin: 0;
	padding: 1.5rem var(--mck-pad) 2rem var(--mck-pad);
	background: transparent;
	column-wrap: wrap;
}

/* Tree li-k */
#offcanvasNavbar.mck-offcanvas .mck-tree li {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Top-level (level 2) item: bold, nagyobb */
#offcanvasNavbar.mck-offcanvas .mck-tree > li {
	margin-bottom: 0;
	break-inside: avoid;
}
#offcanvasNavbar.mck-offcanvas .mck-tree > li > a,
#offcanvasNavbar.mck-offcanvas .mck-tree > li > button {
	display: inline-block;
	padding: 0.4rem 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--mck-sub-fg) !important;
	text-decoration: none;
	transition: color 200ms ease;
}
#offcanvasNavbar.mck-offcanvas .mck-tree > li > a:hover,
#offcanvasNavbar.mck-offcanvas .mck-tree > li > button:hover {
	color: var(--mck-accent) !important;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Beágyazott szintek: vékonyabb font, nincs border, nincs padding */
#offcanvasNavbar.mck-offcanvas .mck-tree ul {
	list-style: none;
	margin: 0.4rem 0 0 0;
	padding: 0;
	border-left: 0;
}

#offcanvasNavbar.mck-offcanvas .mck-tree ul li {
	margin: 0.15rem 0;
}

#offcanvasNavbar.mck-offcanvas .mck-tree ul a,
#offcanvasNavbar.mck-offcanvas .mck-tree ul button {
	display: inline-block;
	padding: 0.35rem 0;
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--mck-sub-fg) !important;
	text-decoration: none;
	transition: color 200ms ease;
}
#offcanvasNavbar.mck-offcanvas .mck-tree ul a:hover,
#offcanvasNavbar.mck-offcanvas .mck-tree ul button:hover {
	color: var(--mck-accent) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Tree elrendezes asztalin + 3 navigacios elem-stilus
   Griddel, NEM multi-columnnal: a hasábos elrendezés függőlegesen töltött,
   így a csoportok az első oszlop alján folytatódtak a második tetején.
   Griddel balról jobbra, sorfolytonosan követik egymást. */
@media (min-width: 769px) {
	#offcanvasNavbar.mck-offcanvas .mck-tree {
		column-count: auto;
		display: grid !important;   /* a 323. sorban display: block !important áll */
		/* annyi hasáb, amennyi kifér: 21rem az a legkisebb szélesség, amin a
		   leghosszabb menüpont („Kötelező energetikai felülvizsgálat") még
		   egy sorba fér. Nagy monitoron így 4, közepesen 3, kisebben 2 lesz. */
		grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
		align-content: start;
		align-items: start;
		column-gap: 2rem;
		row-gap: 1.5rem;
		max-height: calc(100vh - 97px);
		overflow-y: auto;
	}

	#offcanvasNavbar.mck-offcanvas ul.mck-tree > li.nav-item.dropdown {
		/* break-before: column; */
	}

	#offcanvasNavbar.mck-offcanvas .mck-tree > li {
		margin-bottom: 25px;
	}

	/* (1) Elso szintu csoport (van child ul) — 500 + arrow ikon lefele */
	#offcanvasNavbar.mck-offcanvas .mck-tree > li:has(> ul) > a,
#offcanvasNavbar.mck-offcanvas .mck-tree > li:has(> ul) > button {
		font-size: 1rem;
		line-height: 1.5rem;
		font-weight: 500;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
	}
	/* arrow_back SVG, 90 fokkal forgatva (lefele mutat) */
	#offcanvasNavbar.mck-offcanvas .mck-tree > li:has(> ul) > a::after,
#offcanvasNavbar.mck-offcanvas .mck-tree > li:has(> ul) > button::after {
		content: "";
		display: inline-block;
		width: 18px;
		height: 18px;
		flex-shrink: 0;
		background-color: currentColor;
		mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M400-120 160-360l241-241 56 57-144 144h367v-400h80v480H313l144 143-57 57Z'/></svg>");
		-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M400-120 160-360l241-241 56 57-144 144h367v-400h80v480H313l144 143-57 57Z'/></svg>");
		mask-repeat: no-repeat;
		-webkit-mask-repeat: no-repeat;
		mask-position: center;
		-webkit-mask-position: center;
		mask-size: contain;
		-webkit-mask-size: contain;
		transform: rotate(-90deg) translateX(-5px);
	}

	/* (2) Elso szintu leaf (nincs child ul) — 500, normal case */
	#offcanvasNavbar.mck-offcanvas .mck-tree > li:not(:has(> ul)) > a,
#offcanvasNavbar.mck-offcanvas .mck-tree > li:not(:has(> ul)) > button {
		font-size: 1rem;
		line-height: 1.5rem;
		font-weight: 500;
		text-transform: none;
	}

	/* (3) Beagyazott szintek (level 2/3/4) — 300 weight */
	#offcanvasNavbar.mck-offcanvas .mck-tree li li > a,
#offcanvasNavbar.mck-offcanvas .mck-tree li li > button {
		font-size: 1rem;
		line-height: 1.5rem;
		font-weight: 300;
		text-transform: none;
	}
}

/* PANEL — wrapper a header + items koruleget. Default: rejtve, balrol kicsit eltolva. */
#offcanvasNavbar.mck-offcanvas .mck-sub-panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background-color: var(--mck-sub-bg);
	color: var(--mck-sub-fg);
	border-left: 1px solid var(--mck-sub-divider);
	transform: translateX(-12px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
	transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease, visibility 0s linear 380ms;
}

#offcanvasNavbar.mck-offcanvas .mck-sub-panel.mck-active {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease, visibility 0s linear 0s;
}

/* HEADER (back gomb + breadcrumb + title egy sorban) — ugyanolyan magas mint a kek main header */
#offcanvasNavbar.mck-offcanvas .mck-sub-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	height: var(--mck-header-h);
	min-height: var(--mck-header-h);
	padding: 0 var(--mck-pad);
	border-bottom: 1px solid var(--mck-sub-divider);
	flex-shrink: 0;
	box-sizing: border-box;
}

/* Breadcrumb — szulo-szintek lanca, kattinthato lepesek */
#offcanvasNavbar.mck-offcanvas .mck-breadcrumb {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
	color: var(--mck-sub-fg-muted);
	min-width: 0;
}

#offcanvasNavbar.mck-offcanvas .mck-bc-step {
	display: inline-block;
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--mck-sub-fg-muted);
	cursor: pointer;
	max-width: 14ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 200ms ease, text-decoration-color 200ms ease;
}
#offcanvasNavbar.mck-offcanvas .mck-bc-step:hover {
	color: var(--mck-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

#offcanvasNavbar.mck-offcanvas .mck-bc-sep {
	color: var(--mck-sub-fg-muted);
	opacity: 0.5;
	user-select: none;
}

/* Vissza gomb — csak ikon, kor formaju, jol kattinthato meret.
   Asztali nezeten elrejtve (a breadcrumb-bol/main nav-bol egyertelmu az ugras),
   csak mobilon (≤768px) latszik. */
#offcanvasNavbar.mck-offcanvas .mck-sub-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--mck-sub-fg-muted);
	background: transparent;
	border: 1px solid var(--mck-sub-divider);
	border-radius: 999px;
	cursor: pointer;
	flex-shrink: 0;
	transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

@media (min-width: 769px) {
	#offcanvasNavbar.mck-offcanvas .mck-sub-back { display: none; }
}
#offcanvasNavbar.mck-offcanvas .mck-sub-back:hover {
	color: var(--mck-sub-fg);
	background-color: rgba(5, 28, 44, 0.04);
	border-color: rgba(5, 28, 44, 0.2);
}
#offcanvasNavbar.mck-offcanvas .mck-sub-back:hover .mck-icon-arrow-left {
	transform: translateX(-2px);
}
#offcanvasNavbar.mck-offcanvas .mck-sub-back .mck-icon-arrow-left {
	transition: transform 200ms ease;
}

/* Title link (cim + kor formaju kek nyil-gomb).
   Mobilon jobbra (a back gomb mellett), asztalin balra. */
#offcanvasNavbar.mck-offcanvas .mck-sub-title {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
	font-family: var(--bs-font-header, var(--bs-font-sans-serif)), sans-serif;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mck-sub-fg);
	letter-spacing: 0;
	text-decoration: none;
	transition: color 200ms ease;
}

@media (min-width: 769px) {
	#offcanvasNavbar.mck-offcanvas .mck-sub-title {
		margin-left: 0;
		margin-right: auto;
	}
}

/* a nyil ikon a sub-title-ben kor formaju keret. Hatter atlatszo, szin a fonttal egyezik. */
#offcanvasNavbar.mck-offcanvas .mck-sub-title .mck-icon-arrow-right {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background-color: transparent;
	color: var(--mck-sub-fg);
	flex-shrink: 0;
	transition: transform 200ms ease, color 200ms ease;
}

/* mivel a mck-icon span eredetileg mask-tal mutatja az ikont (currentColor szinnel),
   itt felulirjuk: a span-on belul allitjuk a mask-imaget — de mivel a span MAGA mutatja
   az ikont, kell egy belso elem ami a tenyleges ikon. Egyszerubb: pseudo-elem ::before */
#offcanvasNavbar.mck-offcanvas .mck-sub-title .mck-icon-arrow-right::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100%;
	mask-size: 100%;
}

/* a sub-title saját mask-imagejat letiltjuk, mert a ::before-on van */
#offcanvasNavbar.mck-offcanvas .mck-sub-title .mck-icon-arrow-right {
	-webkit-mask-image: none;
	mask-image: none;
}

#offcanvasNavbar.mck-offcanvas a.mck-sub-title:hover {
	color: var(--mck-accent);
}
#offcanvasNavbar.mck-offcanvas a.mck-sub-title:hover .mck-icon-arrow-right {
	color: var(--mck-accent);
	transform: translateX(2px);
}

/* MCK ICON utility (Material SVG mask) — fekete alapszinnel */
#offcanvasNavbar.mck-offcanvas .mck-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: currentColor;   /* volt: #000 — a nyilak feketék voltak az almenükben */
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100%;
	mask-size: 100%;
	flex-shrink: 0;
	vertical-align: middle;
}

/* Vissza ikon — level 2 (elso sub-panel): klasszikus arrow_back */
#offcanvasNavbar.mck-offcanvas .mck-icon-arrow-left {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M313-440l224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M313-440l224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z'/></svg>");
	width: 24px;
	height: 24px;
}

/* Vissza ikon — level 3+ panelekben: u-turn-left SVG, -90 fok elforgatva */
#offcanvasNavbar.mck-offcanvas .mck-sub-panel[data-level="3"] .mck-icon-arrow-left,
#offcanvasNavbar.mck-offcanvas .mck-sub-panel[data-level="4"] .mck-icon-arrow-left,
#offcanvasNavbar.mck-offcanvas .mck-sub-panel[data-level="5"] .mck-icon-arrow-left,
#offcanvasNavbar.mck-offcanvas .mck-sub-panel[data-level="6"] .mck-icon-arrow-left,
#offcanvasNavbar.mck-offcanvas .mck-sub-panel[data-level="7"] .mck-icon-arrow-left {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M200-160v-480h447L503-783l57-57 240 240-241 241-56-57 144-144H280v400h-80Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M200-160v-480h447L503-783l57-57 240 240-241 241-56-57 144-144H280v400h-80Z'/></svg>");
	width: 24px;
	height: 24px;
	transform: rotate(-90deg);
}

#offcanvasNavbar.mck-offcanvas .mck-icon-arrow-right {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/></svg>");
	width: 24px;
	height: 24px;
	transition: transform 200ms ease, background-color 200ms ease;
}

/* ITEMS (3 oszlopos flow layout sok elemnel) */
#offcanvasNavbar.mck-offcanvas .mck-sub-items {
	list-style: none;
	margin: 0;
	padding: 1.5rem var(--mck-pad) 2rem var(--mck-pad);
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	column-gap: 2rem;
	column-fill: balance;
}

/* alapertelmezett 1-2 oszlopos bekapcs reszponzivig, sok elem eseten 3 oszlop */
/* Grid, nem multi-column: a többhasábos elrendezés FÜGGŐLEGESEN töltött,
   így a szemnek vissza kellett ugrania az oszlop tetejére. Griddel az elemek
   balról jobbra, sorfolytonosan követik egymást. */
#offcanvasNavbar.mck-offcanvas .mck-sub-items {
	columns: auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
	align-items: start;
	column-gap: 2rem;
	row-gap: .5rem;
}

@media (min-width: 1180px) {
	#offcanvasNavbar.mck-offcanvas .mck-sub-items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	#offcanvasNavbar.mck-offcanvas .mck-sub-items {
		grid-template-columns: minmax(0, 1fr);
	}
}

#offcanvasNavbar.mck-offcanvas .mck-sub-items li {
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	border: 0 !important;
	padding: 0;
	margin: 0 0 0.4rem 0;
	display: block;
}

#offcanvasNavbar.mck-offcanvas .mck-sub-items li.mck-sub-header,
#offcanvasNavbar.mck-offcanvas .mck-sub-items > li.mck-sub-header,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.mck-back-li {
	display: none;
}

#offcanvasNavbar.mck-offcanvas .mck-sub-items a,
#offcanvasNavbar.mck-offcanvas .mck-sub-items button {
	display: inline-block;
	padding: 0.5rem 0;
	font-size: 1rem;
	font-weight: 400;
	color: var(--mck-sub-fg) !important;
	line-height: 1.4;
	text-align: left !important;
	text-decoration: none;
	background: transparent;
	border: 0;
	width: auto;
	transition: color 200ms ease, text-decoration-color 200ms ease;
}

#offcanvasNavbar.mck-offcanvas .mck-sub-items a:hover,
#offcanvasNavbar.mck-offcanvas .mck-sub-items button:hover {
	color: var(--mck-accent) !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	background: transparent;
	padding-left: 0;
}

/* a sub-items-en belul ha van mck-has-children li (mélyebb szint), chevron jobbra
   — jelzi, hogy van submenu, kattintásra panel nyilik mobilon */
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.mck-has-children > a,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.mck-has-children > button,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.dropdown > a,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.dropdown > button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

#offcanvasNavbar.mck-offcanvas .mck-sub-items li.mck-has-children > a::after,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.mck-has-children > button::after,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.dropdown > a::after,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.dropdown > button::after {
	content: "" !important;
	display: inline-block !important;
	width: 24px !important;
	height: 24px !important;
	margin-left: auto !important;
	background-color: var(--mck-sub-fg-muted);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100%;
	mask-size: 100%;
	border: 0 !important;
	transition: transform 200ms ease, background-color 200ms ease;
	flex-shrink: 0;
}

#offcanvasNavbar.mck-offcanvas .mck-sub-items li.mck-has-children > a:hover::after,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.dropdown > a:hover::after {
	background-color: var(--mck-accent);
	transform: translateX(3px);
}

/* ───── PRIMARY NAV (bal kek panel — McKinsey stilusban) ───── */
#offcanvasNavbar.mck-offcanvas .mck-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	position: relative;
}

#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li {
	padding: 1rem 2.5rem 1rem 1.5rem; /* mdc spacing: 16 40 16 24 */
	transition: background-color 200ms ease;
}

/* Asztali finomitas: kisebb font + szukebb fuggoleges padding */
@media (min-width: 769px) {
	#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li {
		padding: 0.75rem 2.5rem 0.75rem 1.5rem;
	}
	#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > a,
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > button {
		font-size: 1rem;
		line-height: 1.5rem;
	}
}

#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > a,
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0;
	font-family: var(--bs-font-header, var(--bs-font-sans-serif)), sans-serif;
	font-size: 1rem;
	line-height: 1.55; /* 28px */
	font-weight: 500;
	letter-spacing: 0;
	color: var(--mck-fg) !important;
	background: transparent;
	border: 0;
	width: 100%;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: text-decoration-color 200ms ease;
}

/* hover/focus: McKinsey-szerű underline (vastag, 6px alatt) */
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > a:hover,
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > button:hover,
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > a:focus,
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > button:focus {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	text-decoration-skip-ink: none;
}

/* aktiv (kibontott) primary item: enyhébb kék bg + underline */
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li.mck-open {
	background-color: rgba(255, 255, 255, 0.06);
}

#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li.mck-open > a,
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li.mck-open > button {
	color: var(--mck-fg) !important;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	text-decoration-skip-ink: none;
}

/* a chevron (::after) ne kapja meg az underline-t */
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > a::after,
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > button::after {
	text-decoration: none !important;
}

/* Bootstrap natív caret triangle elrejtese */
#offcanvasNavbar.mck-offcanvas .mck-nav .dropdown-toggle::after {
	border: 0 !important;
	margin: 0 !important;
	vertical-align: baseline !important;
	content: "" !important;
	display: none !important;
}

/* CHEVRON (Material Design `chevron_right`) — SVG mask-imgge, currentColor szinnel */
#offcanvasNavbar.mck-offcanvas .mck-nav li.mck-has-children > a::after,
#offcanvasNavbar.mck-offcanvas .mck-nav li.mck-has-children > button::after,
#offcanvasNavbar.mck-offcanvas .mck-nav li.dropdown > a::after,
#offcanvasNavbar.mck-offcanvas .mck-nav li.dropdown > button::after {
	content: "" !important;
	display: inline-block !important;
	width: 24px !important;
	height: 24px !important;
	margin-left: auto !important;
	background-color: var(--mck-fg-muted);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100%;
	mask-size: 100%;
	border: 0 !important;
	vertical-align: middle !important;
	transition: transform 240ms ease, background-color 240ms ease;
	flex-shrink: 0;
}

#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li.mck-open > a::after,
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li.mck-open > button::after {
	transform: translateX(4px);
}

#offcanvasNavbar.mck-offcanvas .mck-nav li.mck-has-children > a:hover::after,
#offcanvasNavbar.mck-offcanvas .mck-nav li.mck-has-children > button:hover::after,
#offcanvasNavbar.mck-offcanvas .mck-nav li.dropdown > a:hover::after,
#offcanvasNavbar.mck-offcanvas .mck-nav li.dropdown > button:hover::after {
	background-color: var(--mck-fg);
	transform: translateX(4px);
}

/* ───── FOOTER ───── */
#offcanvasNavbar.mck-offcanvas .offcanvas-footer {
	width: var(--mck-primary-w);
	min-width: var(--mck-primary-min);
	height: var(--mck-footer-h);
	min-height: var(--mck-footer-h);
	border-top: 1px solid var(--mck-divider);
	padding: 0 !important;
	background-color: var(--mck-bg);
	z-index: 5;
	box-shadow: none !important;
}

/* a belso wrapper: 2x2 grid mind a 4 gombnak — fehér elvalaszto vonalakkal */
#offcanvasNavbar.mck-offcanvas .offcanvas-footer > div {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn {
	background-color: transparent;
	color: var(--mck-fg);
	border: 0;
	border-radius: 0;
	gap: 0.5rem;
	font-weight: 500;
	font-size: 0.9rem;
	padding: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	box-shadow: none;
	transition: background-color 200ms ease;
}

/* Asztali padding: bal oldali behuzas 4rem */
@media (min-width: 769px) {
	#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn {
		padding: 1.5rem 1rem 1.5rem 4rem;
	}
}

/* Mobil padding: bal oldali behuzas 3rem */
@media (max-width: 768px) {
	#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn {
		padding: 1.5rem 1rem 1.5rem 3rem;
	}
}

/* csak a 2. sor (3. es 4. gomb) kap felulre vonalat — az 1. sor tisztan marad */
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn:nth-child(n+3) {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* a paros gombok (2., 4.) bal oldalan vonal — fuggoleges elvalaszto a 2 oszlop kozott */
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn:nth-child(2n) {
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn:hover { background-color: rgba(255, 255, 255, 0.14); color: var(--mck-fg); }
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn.mix-btn-accent,
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn[href^="tel:"] {
	background-color: var(--mck-accent);
	color: #fff;
}
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn svg { fill: currentColor; }

/* a footer gombok ne mutassanak chevront (azt csak a nav-bar items-en akarjuk) */
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn::after { content: none !important; display: none !important; }

/* az offcanvas konteneren is shadow off */
#offcanvasNavbar.mck-offcanvas { box-shadow: none !important; }
#offcanvasNavbar.mck-offcanvas .mck-offcanvas-header { box-shadow: none !important; }

/* ───── SCROLLBAR ───── */
#offcanvasNavbar.mck-offcanvas .mck-nav > ul::-webkit-scrollbar { width: 6px; }
#offcanvasNavbar.mck-offcanvas .mck-nav > ul::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
#offcanvasNavbar.mck-offcanvas .mck-nav > ul::-webkit-scrollbar-track { background: transparent; }

#offcanvasNavbar.mck-offcanvas .mck-nav ul ul::-webkit-scrollbar { width: 6px; }
#offcanvasNavbar.mck-offcanvas .mck-nav ul ul::-webkit-scrollbar-thumb { background: rgba(5, 28, 44, 0.18); border-radius: 3px; }
#offcanvasNavbar.mck-offcanvas .mck-nav ul ul::-webkit-scrollbar-track { background: transparent; }

/* ───── BELÉPŐ ANIMÁCIÓ A NAV ELEMEKRE (csak első szint) ─────
   FONTOS: alapból rejtve vannak (opacity 0 + eltolva), hogy a slide-in alatt
   ne villanjanak be a teljesen latszo allapotban. Csak ha az offcanvas .show,
   futnak az animaciok. */
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li {
	opacity: 0;
	transform: translateX(16px);
}

#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li {
	animation: mck-nav-enter 480ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(1) { animation-delay: 100ms; }
#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(2) { animation-delay: 140ms; }
#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(3) { animation-delay: 180ms; }
#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(4) { animation-delay: 220ms; }
#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(5) { animation-delay: 260ms; }
#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(6) { animation-delay: 300ms; }
#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(7) { animation-delay: 340ms; }
#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(n+8) { animation-delay: 380ms; }

@keyframes mck-nav-enter {
	to { opacity: 1; transform: translateX(0); }
}

/* "Hivasunk vissza" SVG belso korenek pulzalasa + a hullamok vastagabbra es
   nagyobbra hangolasa. A hullamokat az SVGator player vezérli, az `r`/`stroke-width`
   atrribútumokat NEM allitja, igy CSS-szel felulirhatjuk. */
#eibxfctt6w4p2 {
	transform-origin: 46px 46px;
	animation: mck-call-pulse 1.4s ease-in-out infinite;
}

@keyframes mck-call-pulse {
	0%,
100% { r: 31; }
	50% { r: 38; }
}

/* Vastagabb es nagyobb hullamok */
#eibxfctt6w4p3 { r: 42; stroke-width: 4; }
#eibxfctt6w4p4 { r: 52; stroke-width: 3; }

/* A megnovelt sugar tulnyulhat a viewBox-on, ezert overflow: visible az SVG-en */
#eibxfctt6w4p1 { overflow: visible; }

/* ============================================================
   "Hivasunk vissza" #callup buborek-panel
   - Asztalin: jobb-also sarok, csorrel a triggergettouch fele
   - Mobilon: kozepen, gomb felett, falaktol 3rem
   - Toggle: a meglevo `.active` osztaly (toggleGetTouch JS)
   - Minden meret/padding/szin valtozoban tarolva
   ============================================================ */
#callup {
	/* === MATERIAL 3 SURFACE / SHAPE / ELEVATION === */
	--callup-bg:           #fff;
	--callup-color:        #1C1B1F;                         /* on-surface */
	--callup-color-muted:  rgba(28, 27, 31, 0.65);          /* on-surface-variant */
	--callup-divider:      rgba(28, 27, 31, 0.10);
	--callup-radius:       1rem;
	--callup-padding-y:    1.5rem;
	--callup-padding-x:    1.5rem;
	--callup-gap:          1rem;
	/* MD3 elevation level 3 */
	--callup-shadow:
		0 6px 10px 4px rgba(0, 0, 0, 0.07),
		0 2px 3px 0   rgba(0, 0, 0, 0.10);
	--callup-tail-size:    0.75rem;

	/* === TYPOGRAPHY (MD3 typescale) === */
	--callup-title-size:   1rem;       /* title-medium 16/24 */
	--callup-title-weight: 500;
	--callup-title-tracking: 0.15px;
	--callup-sub-size:     0.875rem;   /* body-medium 14/20 */
	--callup-sub-tracking: 0.25px;

	/* === BUTTONS (MD3 spec) === */
	--callup-btn-radius:   999px;       /* full-rounded */
	--callup-btn-padding:  0 1.5rem;    /* 24dp horizontal */
	--callup-btn-height:   2.5rem;      /* 40dp standard */
	--callup-btn-font:     0.9rem;
	--callup-btn-weight:   500;
	--callup-btn-tracking: 0.1px;
	--callup-btn-gap:      0.5rem;      /* 8dp icon→label */
	--callup-btn-icon:     18px;        /* MD3 icon-button: 18dp */

	/* Pozicionalas — gomb teteje folott + 1rem gap */
	--callup-offset:       calc(var(--trigger-bottom, 5px) + var(--trigger-size, 80px) + 1rem);

	/* Alap allapot — rejtve, alul keszul a megjelenes */
	position: fixed !important;
	width: auto !important;
	height: auto !important;
	background: var(--callup-bg) !important;
	color: var(--callup-color);
	border-radius: var(--callup-radius) !important;
	box-shadow: var(--callup-shadow) !important;
	padding: var(--callup-padding-y) var(--callup-padding-x) !important;
	z-index: 300;

	display: flex !important;
	flex-direction: column;
	gap: var(--callup-gap);

	opacity: 0;
	pointer-events: none;
	transform: translateY(8px) scale(0.96);
	transition:
		opacity 0.18s ease-out,
		transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Asztali nezet: jobb-also sarokba pozicionalva, csor jobbra-lent
   (a triggergettouch tetejehez kozeli) — mintha onnan nyilna ki */
@media (min-width: 769px) {
	#callup {
		right: var(--trigger-right, 40px) !important;
		bottom: var(--callup-offset) !important;
		left: auto !important;
		top: auto !important;
		width: max-content;
		max-width: 600px;
		transform-origin: bottom right;
	}
	#callup::after {
		content: "";
		position: absolute;
		right: calc(var(--trigger-size, 92px) / 2 - var(--callup-tail-size) / 2);
		bottom: calc(-1 * var(--callup-tail-size) / 2);
		width: var(--callup-tail-size);
		height: var(--callup-tail-size);
		background: var(--callup-bg);
		transform: rotate(45deg);
		box-shadow: 6px 6px 12px -2px rgba(0, 0, 0, 0.07);
		z-index: -1;
	}
}

/* Mobil nezet: kozepen, falaktol 3rem, gomb felett, csor kozepen lent */
@media (max-width: 768px) {
	#callup {
		--callup-padding-y:   2rem;
		--callup-padding-x:   2rem;
		--callup-radius:      1rem;
		--callup-gap:         1.25rem;
		--callup-title-size:  1.25rem;     /* title-large mobilon */
		--callup-title-weight: 500;
		--callup-sub-size:    0.9375rem;
		--callup-btn-font:    1rem;
		--callup-btn-height:  3rem;        /* 48dp tappable mobilon */
		--callup-btn-icon:    20px;
		--callup-btn-padding: 0 1.5rem;

		left: 3rem !important;
		right: 3rem !important;
		bottom: var(--callup-offset) !important;
		top: auto !important;
		max-width: none;
		transform-origin: bottom center;
	}
	#callup::after {
		content: "";
		position: absolute;
		right: 16px;
		left: auto;
		bottom: calc(-1 * var(--callup-tail-size) / 2);
		width: var(--callup-tail-size);
		height: var(--callup-tail-size);
		background: var(--callup-bg);
		transform: rotate(45deg);
		box-shadow: 4px 4px 10px -2px rgba(0, 0, 0, 0.07);
		z-index: -1;
	}
}

/* Aktiv allapot — a JS toggleGetTouch teszi `.active`-ra */
#callup.active {
	opacity: 1 !important;
	pointer-events: all !important;
	transform: translateY(0) scale(1);
}

/* Header — MD3 typescale, cim alatt subtle alcim */
#callup .callup-header {
	padding: 0;
	margin-bottom: 0.25rem;
}
#callup .callup-title {
	margin: 0;
	font-size: var(--callup-title-size);
	font-weight: var(--callup-title-weight);
	letter-spacing: var(--callup-title-tracking);
	color: var(--callup-color);
	line-height: 1.5;
}
#callup .callup-subtitle {
	margin: 0.125rem 0 0 0;
	font-size: var(--callup-sub-size);
	letter-spacing: var(--callup-sub-tracking);
	color: var(--callup-color-muted);
	line-height: 1.43;
}

/* Gomb sor — MD3 vertical action group */
#callup .callup-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* === MATERIAL 3 BUTTONS ===
   Filled / Outlined valtozat, MD3 spec szerint:
   - height 40dp (asztali) / 48dp (mobil)
   - padding 0 24dp
   - icon 18dp (asztali) / 20dp (mobil), gap 8dp
   - state layer hover-on (12% saját szín) */
#callup .callup-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--callup-btn-gap);
	height: var(--callup-btn-height);
	padding: var(--callup-btn-padding);
	border-radius: var(--callup-btn-radius);
	font-size: var(--callup-btn-font);
	font-weight: var(--callup-btn-weight);
	letter-spacing: var(--callup-btn-tracking);
	text-decoration: none;
	transition:
		background-color 180ms cubic-bezier(0.2, 0, 0, 1),
		box-shadow 180ms cubic-bezier(0.2, 0, 0, 1),
		color 180ms ease;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
}
#callup .callup-btn svg {
	width: var(--callup-btn-icon);
	height: var(--callup-btn-icon);
	flex-shrink: 0;
}

/* === MATERIAL RIPPLE (CSS-only) ===
   `::before` egy radial-gradient-bol indul a gomb kozepebol, ami `:active`
   allapotban kifelé skalalodik. Filled gombnal feher, outlined-nal sotet. */
#callup .callup-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), currentColor 0%, currentColor 25%, transparent 30%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0% 0%;
	opacity: 0;
	pointer-events: none;
	transition: background-size 600ms ease-out, opacity 800ms ease-out;
}
#callup .callup-btn:active::before {
	background-size: 250% 250%;
	opacity: 0.18;
	transition: background-size 0s, opacity 0s;
}
#callup .callup-btn-filled::before {
	color: #fff;
}
#callup .callup-btn-filled:active::before {
	opacity: 0.35;
}
#callup .callup-btn-outlined::before {
	color: var(--callup-color);
}

/* Filled — MD3 primary container szín, elevation level 0 alapból, level 1 hoverre */
#callup .callup-btn-filled {
	background-color: var(--bs-accent, #d62828);
	color: #fff;
	box-shadow: none;
}
#callup .callup-btn-filled:hover {
	color: #fff;
	box-shadow:
		0 1px 2px 0 rgba(0, 0, 0, 0.30),
		0 1px 3px 1px rgba(0, 0, 0, 0.15);
	background-image: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08));
}
#callup .callup-btn-filled:active {
	background-image: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12));
}

/* Outlined — 1dp outline, no fill, hover state layer 8% on-surface */
#callup .callup-btn-outlined {
	background-color: transparent;
	color: var(--callup-color);
	border: 1px solid var(--callup-divider);
}
#callup .callup-btn-outlined:hover {
	background-color: rgba(28, 27, 31, 0.08);
	color: var(--callup-color);
	border-color: var(--callup-divider);
}
#callup .callup-btn-outlined:active {
	background-color: rgba(28, 27, 31, 0.12);
}

/* === CHATBOT (AI asszisztens) ===
   A 3 gomb UTAN megjelenik egy chat-felulet ami a /chatbot.php endpoint-ot
   hivja Claude Haiku 4.5-tel, system prompt-kent a /chatbot.txt-tol. */
#callup .callup-chat {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.5rem;
	min-width: 280px;
	padding: 0;
}
#callup .callup-chat-divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	color: var(--callup-color-muted);
	letter-spacing: 0.4px;
}
#callup .callup-chat-divider::before,
#callup .callup-chat-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--callup-divider);
}
#callup .callup-chat-messages {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	max-height: 260px;
	overflow-y: auto;
	font-size: 0.875rem;
	line-height: 1.4;
	scrollbar-width: thin;
}
#callup .callup-chat-messages:empty { display: none; }
#callup .callup-chat-msg {
	padding: 0.5rem 0.75rem;
	border-radius: 1rem;
	max-width: 85%;
	white-space: pre-wrap;
	word-wrap: break-word;
}
#callup .callup-chat-msg-user {
	align-self: flex-end;
	background: var(--bs-accent, #d62828);
	color: #fff;
	border-bottom-right-radius: 0.25rem;
}
#callup .callup-chat-msg-bot {
	align-self: flex-start;
	background: rgba(28, 27, 31, 0.06);
	color: var(--callup-color);
	border-bottom-left-radius: 0.25rem;
}
#callup .callup-chat-msg-bot.is-loading::after {
	content: "•••";
	display: inline-block;
	letter-spacing: 0.1em;
	animation: callup-typing 1.4s steps(3, end) infinite;
}
@keyframes callup-typing {
	0% { content: "•"; }
	33% { content: "••"; }
	66% { content: "•••"; }
	100% { content: "•"; }
}
#callup .callup-chat-form {
	display: flex;
	gap: 0.5rem;
	margin: 0;
}
#callup .callup-chat-input {
	flex: 1;
	min-width: 0;
	height: 2.5rem;
	padding: 0 1rem;
	border: 1px solid var(--callup-divider);
	border-radius: 999px;
	font-size: 0.9rem;
	color: var(--callup-color);
	background: #fff;
	outline: none;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
#callup .callup-chat-input::placeholder { color: var(--callup-color-muted); }
#callup .callup-chat-input:focus {
	border-color: var(--bs-accent, #d62828);
	box-shadow: 0 0 0 3px rgba(214, 40, 40, 0.15);
}
#callup .callup-chat-send {
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border: 0;
	border-radius: 999px;
	background: var(--bs-accent, #d62828);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 180ms ease, opacity 180ms ease;
}
#callup .callup-chat-send svg { width: 18px; height: 18px; }
#callup .callup-chat-send:hover { background: color-mix(in srgb, var(--bs-accent, #d62828) 90%, #000 10%); }
#callup .callup-chat-send:disabled { opacity: 0.5; cursor: wait; }

#callup .callup-chat-msg a { color: inherit; text-decoration: underline; }
#callup .callup-chat-msg h4 { font-size: 1.05rem; font-weight: 600; margin: 0.6rem 0 0.3rem; line-height: 1.3; }
#callup .callup-chat-msg h5 { font-size: 1rem; font-weight: 600; margin: 0.5rem 0 0.25rem; line-height: 1.3; }
#callup .callup-chat-msg h6 { font-size: 0.95rem; font-weight: 600; margin: 0.4rem 0 0.2rem; line-height: 1.3; }
#callup .callup-chat-msg h4:first-child,
#callup .callup-chat-msg h5:first-child,
#callup .callup-chat-msg h6:first-child { margin-top: 0; }
#callup .callup-chat-msg ul,
#callup .callup-chat-msg ol { margin: 0.35rem 0; padding-left: 1.25rem; }
#callup .callup-chat-msg li { margin: 0.1rem 0; }
#callup .callup-chat-msg hr { border: 0; border-top: 1px solid var(--callup-divider); margin: 0.6rem 0; }
#callup .callup-chat-msg p { margin: 0.35rem 0; }
#callup .callup-chat-msg p:first-child { margin-top: 0; }
#callup .callup-chat-msg p:last-child { margin-bottom: 0; }

/* Asztali felbontason is ugyanazok a gombok mint mobilon: a mobile-link/felirat
   variansok mindenhol latszanak, a desktop-only variansok mindenhol rejtve. */
#callup .callup-label-desktop { display: none; }
#callup .callup-action-desktop { display: none !important; }

/* Chat-szekcio fejlec — "Kérdezze a chatbotunkat!".
   Mint a callup-title, csak szurkebb (muted). A divider-vonalakat eltuntetjuk,
   helyette flex layout: szoveg balra, expand-gomb jobbra. */
#callup .callup-chat-divider {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 0.25rem 0;
	font-size: var(--callup-title-size);
	font-weight: var(--callup-title-weight);
	letter-spacing: var(--callup-title-tracking);
	color: var(--callup-color-muted);
	line-height: 1.5;
	text-transform: none;
}
#callup .callup-chat-divider::before,
#callup .callup-chat-divider::after { content: none !important; }
#callup .callup-chat-divider span { color: inherit; }

/* Expand + close (X) gomb wrapper a divider jobb szelen.
   Asztalon mind a 2 lathato; mobilon a wrapper teljes egesze rejtve (a mobil-X
   a callup-header-be megy). */
#callup .callup-chat-divider-actions {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
}
#callup .callup-chat-expand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--callup-color-muted);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
	padding: 0;
	flex-shrink: 0;
}
#callup .callup-chat-expand:hover { background: rgba(28, 27, 31, 0.08); color: var(--callup-color); }
#callup .callup-chat-expand svg { width: 18px; height: 18px; }

@media (max-width: 768px) {
	/* Mobilon a divider-wrapper rejtve — a header-X kezeli a bezarast */
	#callup .callup-chat-divider-actions { display: none; }
}
@media (min-width: 769px) {
	/* Asztalon a header-X rejtve (a divider-wrapper-ben van mar) */
	#callup .callup-header .callup-close { display: none; }
}

/* Asztal: kibovitett allapot — szelesebb es magasabb, kozepre helyezve.
   Csak asztali gepen mukodik (a min-width: 769px scope alatt). */
@media (min-width: 769px) {
	#callup.expanded {
		width: 90vw !important;
		max-width: 1400px !important;
		height: 80vh !important;
		max-height: 800px !important;
		right: 5vw !important;
		bottom: 5vh !important;
		left: auto !important;
		top: auto !important;
	}
	#callup.expanded::after { display: none; }
	#callup.expanded .callup-chat {
		max-width: none;
	}
	#callup.expanded .callup-chat-messages {
		max-height: calc(80vh - 220px);
	}
}

/* Chat felulet wrapper (`callup-chat` mar tarsul a meglevo CSS-szel) — width-cap */
#callup .callup-chat {
	min-width: 280px;
}

/* Asztal: 2-oszlopos rács — bal: header+actions, jobb: callup-chat (~fél monitor)
   A `#callup` alap max-width 600px-jet override-oljuk hogy a 800px chat is elferjen. */
@media (min-width: 769px) {
	#callup {
		display: grid !important;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto 1fr;
		column-gap: 1.5rem;
		row-gap: 0.5rem;
		align-items: stretch;
		max-width: min(1100px, 95vw) !important;
	}
	#callup .callup-header { grid-column: 1; grid-row: 1; }
	#callup .callup-actions { grid-column: 1; grid-row: 2; align-self: start; }
	#callup .callup-chat {
		grid-column: 2;
		grid-row: 1 / span 2;
		min-width: 480px;
		max-width: 800px;
		margin-top: 0;
	}
	#callup .callup-chat-messages { max-height: 360px; }
}

/* Mobil: column flex (default), kartya magassaga 100svh - 210px (a trigger-gomb es
   margok felett), chat alulra igazitva (margin-top: auto a flex-tracton). */
@media (max-width: 768px) {
	#callup {
		/* Mobilon teljes-kepernyos chat */
		height: 100svh !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		min-height: 0 !important;
		width: 100vw !important;
		max-width: none !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		border-radius: 0 !important;
	}
	#callup::after { display: none !important; }
	#callup .callup-chat {
		flex-grow: 1;
		min-width: 0;
		max-width: none;
		min-height: 0;
	}
	#callup .callup-chat-messages {
		flex-grow: 1;
		max-height: none;
		min-height: 0;
	}
}

/* z-index fix: a #callup mindig a #triggergettouch (es altalaban a fixed UI) folott
   legyen, kulonben a trigger-gomb takarja a (mobil-fullscreen) chat tetejet. */
#callup { z-index: 2000 !important; }
#callup.active { z-index: 2000 !important; }

/* ============================================================
   #triggerprompt — idoszakos chat-buborek a trigger-gomb mellett.
   ============================================================ */
#triggerprompt {
	position: fixed;
	z-index: 290;        /* trigger-gomb alatt vagy mellette, callup alatt */
	background: #fff;
	color: var(--callup-color, #1C1B1F);
	padding: 10px 14px;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.08);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	max-width: 200px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 350ms ease, transform 350ms ease;
	white-space: nowrap;
}
#triggerprompt.visible { opacity: 1; }

@media (min-width: 769px) {
	#triggerprompt {
		right: calc(var(--trigger-right, 30px) + var(--trigger-size, 88px) + 14px);
		bottom: calc(var(--trigger-bottom, 30px) + var(--trigger-size, 88px) / 2 - 22px);
		transform: translateX(8px);
	}
	#triggerprompt.visible { transform: translateX(0); }
	#triggerprompt::after {
		content: "";
		position: absolute;
		right: -6px;
		top: 50%;
		margin-top: -6px;
		border: 6px solid transparent;
		border-left-color: #fff;
		filter: drop-shadow(2px 0 1px rgba(0,0,0,0.06));
	}
}

@media (max-width: 768px) {
	#triggerprompt {
		right: calc(var(--trigger-right, 15px) + 4px);
		bottom: calc(var(--trigger-bottom, 15px) + var(--trigger-size, 80px) + 14px);
		transform: translateY(8px);
	}
	#triggerprompt.visible { transform: translateY(0); }
	#triggerprompt::after {
		content: "";
		position: absolute;
		right: 22px;
		bottom: -6px;
		border: 6px solid transparent;
		border-top-color: #fff;
		filter: drop-shadow(0 2px 1px rgba(0,0,0,0.06));
	}
}

/* Header layout: cim balra, X gomb jobbra (a `Miben segithetunk?` mellett) */
#callup .callup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}
#callup .callup-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--callup-color-muted);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
	padding: 0;
	flex-shrink: 0;
}
#callup .callup-close:hover { background: rgba(28, 27, 31, 0.08); color: var(--callup-color); }
#callup .callup-close svg { width: 22px; height: 22px; }

/* Asztalin a telefonszam keret nelkuli accent felirat (nem gomb) —
   ikonnal egyutt egy sima sorba, mintha "kontakt info" lenne kiirva. */
#callup .callup-phone-display {
	display: inline-flex;
	align-items: center;
	gap: var(--callup-btn-gap);
	height: var(--callup-btn-height);
	padding: var(--callup-btn-padding);
	color: var(--bs-accent, #d62828);
	font-size: var(--callup-btn-font);
	font-weight: 600;
	letter-spacing: var(--callup-btn-tracking);
	user-select: text;
	cursor: text;
}
#callup .callup-phone-display svg {
	width: var(--callup-btn-icon);
	height: var(--callup-btn-icon);
	flex-shrink: 0;
}

/* Mobil: a hívás-gomb körül enyhe pulzáló glow ami "csengetve" hívja a figyelmet */
@media (max-width: 768px) {
	#callup.active .callup-action-mobile {
		animation: callup-pulse 2s ease-out infinite;
	}
}
@keyframes callup-pulse {
	0% { box-shadow: 0 0 0 0   rgba(214, 40, 40, 0.55); }
	70% { box-shadow: 0 0 0 7px rgba(214, 40, 40, 0); }
	100% { box-shadow: 0 0 0 0   rgba(214, 40, 40, 0); }
}

/* Trigger ikon (gettouch / chat-buborek) — fehér színű */
.trigger-icon {
	color: #fff;
}

/* Hand-wave (integetes) ikon mindenhol fehér — barhova teszi a HTML, automatikusan
   egyezik a path-d kezdetével. */
svg path[d^="M23 17C23 20.31 20.31 23 17 23"] { fill: #fff !important; }

/* ============================================================
   Ajánlatkérő űrlap finomítók — Select2 + Places autocomplete
   Hozzáigazítás az oldal --bs-accent (runtime) színéhez és a
   Bootstrap .form-control magasságához.
   ============================================================ */

/* Egyseges 36px magassag a form-input-okhoz (input + select), hogy a
   Select2-vel pontosan egyezzenek. A textarea-t nem fixaljuk, az nőhet. */
input.form-control,
select.form-control {
	height: 36px !important;
}

/* Select2 single — pontosan 36px, illeszkedjen a .form-control mellé */
.select2-container--default .select2-selection--single {
	height: 36px !important;
	min-height: 36px !important;
	display: flex;
	align-items: center;
	padding: 0 .75rem;
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: var(--bs-border-radius, .375rem);
	background-color: var(--bs-body-bg, #fff);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--bs-body-color, #212529);
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	display: block;
	padding-left: 0;
	padding-right: 22px;
	line-height: 1.4;
	color: inherit;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--bs-secondary-color, #6c757d);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 36px !important;
	top: 0;
	right: .5rem;
	width: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Select2 multiple — chips/pills accent szinben */
.select2-container--default .select2-selection--multiple {
	min-height: 36px !important;
	padding: 3px 6px !important;
	border: 1px solid var(--bs-border-color, #dee2e6) !important;
	border-radius: var(--bs-border-radius, .375rem) !important;
	background-color: var(--bs-body-bg, #fff) !important;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--bs-body-color, #212529);
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: var(--bs-accent, #d62828) !important;
	box-shadow: 0 0 0 .25rem rgba(var(--bs-accent-rgb, 214, 40, 40), .15) !important;
	outline: 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
	padding: 0 !important;
	margin: 0 !important;
	width: 100%;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: var(--bs-accent, #d62828) !important;
	border: 1px solid var(--bs-accent, #d62828) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 2px 12px 2px 32px !important;
	padding-left: 32px !important;
	margin: 2px 4px 2px 0 !important;
	font-size: .875rem;
	line-height: 1.4;
	display: inline-flex;
	align-items: center;
	position: relative;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
	padding: 0 !important;
	color: inherit;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	height: 25.6px;
	aspect-ratio: 1;
	position: absolute !important;
	left: 2px;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 999px !important;
	background-color: rgba(255, 255, 255, .18) !important;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 14px 14px !important;
	color: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	opacity: 1;
	transition: background-color .15s;
}
/* A Select2 default <span aria-hidden="true">×</span> elrejtve — helyette SVG */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove > * {
	display: none !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	background-color: rgba(0, 0, 0, .25) !important;
}
.select2-container--default .select2-search--inline .select2-search__field {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--bs-body-color, #212529);
	margin-top: 4px !important;
	margin-left: 4px !important;
	padding: 0 !important;
	min-height: 22px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--bs-secondary-color, #6c757d) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent var(--bs-secondary-color, #6c757d) transparent;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--bs-accent, #d62828) !important;
	box-shadow: 0 0 0 .25rem rgba(var(--bs-accent-rgb, 214, 40, 40), .15) !important;
	outline: 0;
}
/* "Clear all" gomb (single ÉS multi) — SVG ikonra cserélve, span elrejtve */
.select2-container--default .select2-selection__clear {
	background-color: transparent !important;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236c757d' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 16px 16px !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	border: 0 !important;
	padding: 0 !important;
	width: 18px !important;
	height: 18px !important;
	cursor: pointer;
	opacity: .55;
	transition: opacity .15s;
}
.select2-container--default .select2-selection__clear:hover {
	opacity: 1;
}
.select2-container--default .select2-selection__clear > * {
	display: none !important;
}
/* Single-mode-ban abszolút pozícióval az arrow elott */
.select2-container--default .select2-selection--single .select2-selection__clear {
	position: absolute;
	right: 26px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}

/* Dropdown panel */
.select2-dropdown {
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: var(--bs-border-radius, .375rem);
	box-shadow: 0 6px 16px rgba(0,0,0,.08);
	font-family: inherit;
	overflow: hidden;
}
.select2-dropdown .select2-results__option {
	padding: .5rem .75rem;
	font-size: .95rem;
	line-height: 1.4;
	color: var(--bs-body-color, #212529);
}
/* Highlight (keyboard / hover) — v4.1 az uj `.select2-results__option--selectable`
   osztalyt hasznalja, a regi `[aria-selected]` szelektort is megtartjuk. */
.select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--bs-accent, #d62828) !important;
	color: #fff !important;
}
/* Selected (kivalasztott elem) — finom accent hatter, sotetebb betuvel */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
	background-color: rgba(var(--bs-accent-rgb, 214, 40, 40), .08) !important;
	color: var(--bs-body-color, #212529) !important;
}

/* Search box a dropdown tetején */
.select2-search--dropdown {
	padding: .5rem;
}
.select2-search--dropdown .select2-search__field {
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: var(--bs-border-radius, .375rem);
	padding: .375rem .625rem;
	font-family: inherit;
	font-size: .95rem;
	line-height: 1.4;
	color: var(--bs-body-color, #212529);
	background-color: var(--bs-body-bg, #fff);
	width: 100%;
}
.select2-search--dropdown .select2-search__field:focus {
	border-color: var(--bs-accent, #d62828);
	box-shadow: 0 0 0 .2rem rgba(var(--bs-accent-rgb, 214, 40, 40), .15);
	outline: 0;
}

/* Places autocomplete (custom dropdown az address inputon) */
.places-autocomplete-wrap {
	position: relative;
}
.places-autocomplete-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 2px;
	background: var(--bs-body-bg, #fff);
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: var(--bs-border-radius, .375rem);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
	z-index: 1050;
	max-height: 280px;
	overflow-y: auto;
	display: none;
	font-family: inherit;
}
.places-autocomplete-dropdown.open {
	display: block;
}
.places-autocomplete-item {
	padding: .5rem .75rem;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.08));
	font-size: .95rem;
	line-height: 1.35;
	color: var(--bs-body-color, #212529);
}
.places-autocomplete-item:last-child { border-bottom: 0; }
.places-autocomplete-item:hover,
.places-autocomplete-item.active {
	background: var(--bs-accent, #d62828);
	color: #fff;
}
.places-autocomplete-item .pa-main { font-weight: 500; }
.places-autocomplete-item .pa-sec { font-size: .8rem; opacity: .8; }
.places-autocomplete-item:hover .pa-sec,
.places-autocomplete-item.active .pa-sec { opacity: 1; color: rgba(255,255,255,.85); }

/* ==========================================================================
   #innav — aloldali navigáció animációja (csak asztali nézet, ≥992px)
   ========================================================================== */
@media (min-width: 992px) {
	#innav {
		--innav-accent: var(--mix-accent);
		--innav-ease: cubic-bezier(.19, 1, .22, 1);
		--innav-spring: cubic-bezier(.34, 1.56, .64, 1);
	}
	#innav .navbar-nav {
		position: relative;
		isolation: isolate;
	}

	/* ---- Főmenüpontok: csak finom színváltás ------------------------------ */
	#innav .navbar-nav > .nav-item > .nav-link {
		position: relative;
		padding: 1.1rem 1rem;
		color: rgba(var(--mix-text), 1);
		transition: color .45s cubic-bezier(.4, 0, .2, 1);
	}
	#innav .navbar-nav > .nav-item.active > .nav-link,
#innav .dropdown-menu > .nav-item.active > .nav-link { font-weight: 800; }
	#innav .navbar-nav > .nav-item:hover > .nav-link,
#innav .navbar-nav > .nav-item:has(:focus-visible) > .nav-link,
#innav .navbar-nav > .nav-item.active > .nav-link {
		color: rgba(var(--innav-accent), 1);
	}
	/* „ahonnan jöttem”: az aktuális oldal szülő-menüpontja (vagy maga az aktív főpont) félkövér + accent */
	#innav .navbar-nav > .nav-item.active > .nav-link,
#innav .navbar-nav > .nav-item:has(.nav-item.active) > .nav-link {
		color: rgba(var(--innav-accent), 1);
		font-weight: 800;
	}
	/* a közös styles.css chevron-vonalai (::before/::after) kikapcsolva */
	#innav .navbar-nav > .nav-item > .nav-link::before,
#innav .navbar-nav > .nav-item > .nav-link::after {
		content: none !important;
		display: none !important;
	}

	
	#innav .navbar-nav > .dropdown > .dropdown-menu {
		display: block;
		top: calc(100% + 10px);
		left: 0;
		margin: 0;
		padding: .9rem 0 .7rem;
		min-width: 17rem;
		border-radius: 1rem;
		border: 1px solid rgba(0, 0, 0, .06) !important;
		background: #fff;
		box-shadow:
			0 2rem 4rem -1.25rem rgba(10, 25, 60, .35),
			0 .5rem 1.25rem -.5rem rgba(10, 25, 60, .15) !important;
		counter-reset: innav;
		visibility: hidden;
		pointer-events: none;
		opacity: 0;
		/* függöny: felülről lefelé nyílik; negatív inset → az árnyék nem vágódik */
		clip-path: inset(-1.75rem -4rem 100% -4rem round 1rem);
		transform: translateY(-6px) scale(.98);
		transform-origin: 1.75rem 0;
		transition:
			clip-path .45s var(--innav-ease) .08s,
			opacity .3s ease .08s,
			transform .45s var(--innav-ease) .08s,
			visibility 0s linear .55s;
	}
	#innav .navbar-nav > .dropdown:hover > .dropdown-menu,
#innav .navbar-nav > .dropdown:has(:focus-visible) > .dropdown-menu {
		visibility: visible;
		pointer-events: auto;
		opacity: 1;
		clip-path: inset(-1.75rem -4rem -5rem -4rem round 1rem);
		transform: none;
		transition:
			clip-path .7s var(--innav-ease),
			opacity .25s ease,
			transform .7s var(--innav-spring),
			visibility 0s;
	}
	/* láthatatlan híd + kis nyíl a menüpont felé */
	#innav .navbar-nav > .dropdown > .dropdown-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -16px;
		height: 16px;
	}
	#innav .navbar-nav > .dropdown > .dropdown-menu > .nav-item:first-child::after {
		content: "";
		position: absolute;
		top: calc(-.9rem - 6px);
		left: 1.5rem;
		width: 12px;
		height: 12px;
		border-radius: 3px 0 0 0;
		background: #fff;
		border-left: 1px solid rgba(0, 0, 0, .06);
		border-top: 1px solid rgba(0, 0, 0, .06);
		transform: rotate(45deg);
	}

	/* ---- Almenüpontok ----------------------------------------------------- */
	#innav .dropdown-menu > .nav-item {
		position: relative;
		padding: 0 .5rem;
		background: transparent !important;
		counter-increment: innav;
		opacity: 0;
		filter: blur(6px);
		transform: translateY(10px);
		transition: opacity .25s ease, filter .25s ease, transform .25s ease;
	}
	#innav .dropdown:hover > .dropdown-menu > .nav-item,
#innav .dropdown:has(:focus-visible) > .dropdown-menu > .nav-item {
		opacity: 1;
		filter: blur(0);
		transform: none;
		transition: opacity .5s ease, filter .5s ease, transform .7s var(--innav-spring);
	}
	#innav .dropdown:hover > .dropdown-menu > .nav-item:nth-child(1) { transition-delay: .10s; }
	#innav .dropdown:hover > .dropdown-menu > .nav-item:nth-child(2) { transition-delay: .15s; }
	#innav .dropdown:hover > .dropdown-menu > .nav-item:nth-child(3) { transition-delay: .20s; }
	#innav .dropdown:hover > .dropdown-menu > .nav-item:nth-child(4) { transition-delay: .25s; }
	#innav .dropdown:hover > .dropdown-menu > .nav-item:nth-child(5) { transition-delay: .30s; }
	#innav .dropdown:hover > .dropdown-menu > .nav-item:nth-child(6) { transition-delay: .35s; }
	#innav .dropdown:hover > .dropdown-menu > .nav-item:nth-child(7) { transition-delay: .40s; }
	#innav .dropdown:hover > .dropdown-menu > .nav-item:nth-child(8) { transition-delay: .45s; }
	#innav .dropdown:hover > .dropdown-menu > .nav-item:nth-child(9) { transition-delay: .50s; }
	#innav .dropdown:hover > .dropdown-menu > .nav-item:nth-child(10) { transition-delay: .55s; }

	/* sorszám: 01, 02, … */
	#innav .dropdown-menu > .nav-item::before {
		content: counter(innav, decimal-leading-zero);
		position: absolute;
		left: 1.35rem;
		top: 50%;
		z-index: 1;
		font-size: .62rem;
		font-weight: 700;
		letter-spacing: .06em;
		font-variant-numeric: tabular-nums;
		color: rgba(var(--mix-text), .3);
		transform: translateY(-50%);
		pointer-events: none;
		transition: color .3s ease, transform .5s var(--innav-spring);
	}
	#innav .dropdown-menu > .nav-item:hover::before,
#innav .dropdown-menu > .nav-item.active::before {
		color: rgba(var(--innav-accent), 1);
		transform: translateY(-50%) scale(1.15);
	}

	#innav .dropdown-menu > .nav-item > .nav-link {
		position: relative;
		display: block;
		padding: .6rem 3.25rem .6rem 3rem;
		border-radius: .6rem;
		overflow: hidden;
		color: rgba(var(--mix-text), .85);
		transition: color .3s ease, padding .5s var(--innav-ease);
	}
	/* háttér balról beúszó színátmenettel */
	#innav .dropdown-menu > .nav-item > .nav-link::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		background: linear-gradient(90deg, rgba(var(--innav-accent), .16), rgba(var(--innav-accent), .03) 70%, rgba(var(--innav-accent), 0));
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform .55s var(--innav-ease);
	}
	/* nyíl, ami jobbról becsúszik */
	#innav .dropdown-menu > .nav-item > .nav-link::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 1.1rem;
		width: 16px;
		height: 16px;
		background: rgba(var(--innav-accent), 1);
		-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/></svg>") center / 100% no-repeat;
		mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/></svg>") center / 100% no-repeat;
		opacity: 0;
		transform: translate(-14px, -50%);
		transition: opacity .3s ease, transform .5s var(--innav-spring);
	}
	#innav .dropdown-menu > .nav-item > .nav-link:hover,
#innav .dropdown-menu > .nav-item.active > .nav-link {
		color: rgba(var(--innav-accent), 1);
		padding-left: 3.35rem;
		padding-right: 2.9rem;
	}
	#innav .dropdown-menu > .nav-item > .nav-link:hover::before,
#innav .dropdown-menu > .nav-item.active > .nav-link::before {
		transform: scaleX(1);
	}
	#innav .dropdown-menu > .nav-item > .nav-link:hover::after {
		opacity: 1;
		transform: translate(0, -50%);
	}
	#innav .dropdown-menu > .nav-item > .nav-link:active {
		transform: scale(.98);
	}
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
	#innav *,
#innav *::before,
#innav *::after {
		animation: none !important;
		transition-duration: .01s !important;
		transition-delay: 0s !important;
	}
}

/* ==========================================================================
   Fejléc-almenü (.midcontainer) — McKinsey-stílus, csak asztali nézet (≥992px)
   - a sáv bal/jobb széle a .container tartalmi széléhez igazodik, de nem csúszik
     rá a logóra (bal) és a social ikonokra (jobb)
   - felül a szülő menüpont (li.nav-parent), alatta a testvérek egy sorban
   - ami nem fér ki, átcsúszik a 2. sorba, amit az overflow:hidden elrejt
   - hover/aktív: accent szín + vastag csík a fejléc alsó élén
   ========================================================================== */
@media (min-width: 992px) {
	section.layout.header:has(.midcontainer) {
		position: relative;
		--mc-w: 960px;
		--mc-gutter: .75rem;
		--mc-reserve-l: 17rem;
		--mc-reserve-r: 12rem;
		--mc-bar: 4px;
		--mc-bar-bleed: .35rem; /* a csík ennyivel lóg túl a szövegen; a lenyíló panel is ehhez igazodik */
		--mc-text-pad: calc(1.6rem + 3px);
	}
	section.layout.header .midcontainer {
		--mc-accent: var(--c05); /* ENCO kék a palettából */
		position: absolute !important;
		top: 0;
		bottom: 0;
		left: max(calc((100% - var(--mc-w)) / 2 + var(--mc-gutter)), var(--mc-reserve-l));
		right: max(calc((100% - var(--mc-w)) / 2 + var(--mc-gutter)), var(--mc-reserve-r));
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		z-index: 2;
	}
	section.layout.header .midcontainer > .content-box,
section.layout.header .midcontainer nav.navbar {
		height: 100%;
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
		display: block;
	}
	section.layout.header .midcontainer .navbar-nav {
		position: relative;
		display: flex !important;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: flex-start;
		height: 100%;
		margin: 0 !important;
		padding: 0 !important;
		gap: 0 1.75rem !important;
		overflow: hidden;
		text-transform: none !important;
		font-weight: 400 !important;
		font-size: .9375rem !important;
	}
	section.layout.header .midcontainer .navbar-nav > .nav-item {
		height: 100%;
		padding: 0;
		flex: 0 0 auto;
	}
	section.layout.header .midcontainer .navbar-nav > .nav-item > .nav-link {
		position: relative;
		display: flex;
		align-items: flex-end;
		height: 100%;
		padding: 0 0 var(--mc-text-pad) !important;
		white-space: nowrap;
		line-height: 1.2;
		color: rgba(var(--mix-text), .85);
		transition: color .3s ease;
	}
	/* közös styles.css chevron-vonalak ki */
	section.layout.header .midcontainer .navbar-nav > .nav-item > .nav-link::before {
		content: none !important;
		display: none !important;
	}
	/* csík a fejléc alján */
	section.layout.header .midcontainer .navbar-nav > .nav-item > .nav-link::after {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		left: calc(-1 * var(--mc-bar-bleed)) !important;
		right: calc(-1 * var(--mc-bar-bleed)) !important;
		bottom: 0 !important;
		top: auto !important;
		width: auto !important;
		height: var(--mc-bar) !important;
		margin: 0 !important;
		border: 0 !important;
		background: rgba(var(--mc-accent), 1) !important;
		transform: scaleY(0) !important;
		transform-origin: bottom center;
		transition: transform .25s cubic-bezier(.4, 0, .2, 1) !important;
	}
	section.layout.header .midcontainer .navbar-nav > .nav-item:not(.nav-parent) > .nav-link:hover,
section.layout.header .midcontainer .navbar-nav > .nav-item:not(.nav-parent) > .nav-link.active {
		color: rgba(var(--mc-accent), 1);
	}
	section.layout.header .midcontainer .navbar-nav > .nav-item:not(.nav-parent) > .nav-link:hover::after,
section.layout.header .midcontainer .navbar-nav > .nav-item:not(.nav-parent) > .nav-link.active::after {
		transform: scaleY(1) !important;
	}

	/* szülő: kicsi, félkövér címke a sor fölött, nem foglal helyet a sorban */
	section.layout.header .midcontainer .navbar-nav > .nav-item.nav-parent {
		position: absolute;
		left: 0;
		top: auto;
		bottom: calc(var(--mc-text-pad) + 1.3rem + 3px);
		height: auto;
		z-index: 3;
		max-width: 100%;
	}
	section.layout.header .midcontainer .navbar-nav > .nav-item.nav-parent > .nav-link {
		height: auto;
		padding: 0 !important;
		display: block;
		line-height: 1.2;
		cursor: pointer;
		font-size: .75rem;
		font-weight: 700;
		color: rgba(var(--mix-text), 1);
		overflow: hidden;
		text-overflow: ellipsis;
	}
	section.layout.header .midcontainer .navbar-nav > .nav-item.nav-parent > .nav-link:hover {
		color: rgba(var(--mc-accent), 1);
	}
	section.layout.header .midcontainer .navbar-nav > .nav-item.nav-parent > .nav-link::after {
		content: none !important;
		display: none !important;
	}
}
@media (min-width: 1200px) { section.layout.header:has(.midcontainer) { --mc-w: 1140px; } }
@media (min-width: 1400px) { section.layout.header:has(.midcontainer) { --mc-w: 1320px; } }
@media (min-width: 1800px) { section.layout.header:has(.midcontainer) { --mc-w: 1340px; } }

/* Fejléc-almenü „…” gomb + lenyíló panel (a site.js teszi be) */
section.layout.header .midcontainer .navbar-nav > .nav-item.nav-more-hidden {
	display: none !important;
}
@media (min-width: 992px) {
	section.layout.header .midcontainer .navbar-nav > .nav-item.nav-more > .nav-link {
		background: none;
		border: 0;
		cursor: pointer;
		font: inherit;
	}
	section.layout.header .midcontainer .navbar-nav > .nav-item.nav-more svg {
		width: 1.35rem;
		height: 1.35rem;
		fill: currentColor;
		display: block;
		transform: translateY(.2rem);
	}
	section.layout.header .midcontainer .navbar-nav > .nav-item.nav-more.has-active > .nav-link,
section.layout.header .midcontainer.nav-more-open .navbar-nav > .nav-item.nav-more > .nav-link {
		color: rgba(var(--mc-accent), 1);
	}
	section.layout.header .midcontainer.nav-more-open .navbar-nav > .nav-item.nav-more > .nav-link::after,
section.layout.header .midcontainer .navbar-nav > .nav-item.nav-more.has-active > .nav-link::after {
		transform: scaleY(1) !important;
	}

	section.layout.header .midcontainer .nav-more-panel {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		min-width: 16rem;
		margin: 0;
		padding: .5rem 0;
		list-style: none;
		background: #fff;
		border: 1px solid rgba(0, 0, 0, .06);
		border-radius: 0 0 .75rem .75rem;
		box-shadow: 0 1.5rem 3rem -1rem rgba(10, 25, 60, .3);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-6px);
		transition: opacity .2s ease, transform .3s cubic-bezier(.19, 1, .22, 1), visibility 0s linear .3s;
	}
	section.layout.header .midcontainer.nav-more-open .nav-more-panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition: opacity .2s ease, transform .3s cubic-bezier(.19, 1, .22, 1), visibility 0s;
	}
	section.layout.header .midcontainer .nav-more-panel > li > a {
		position: relative;
		display: block;
		padding: .6rem 1.25rem;
		font-size: .9375rem;
		line-height: 1.3;
		white-space: nowrap;
		color: rgba(var(--mix-text), .85);
		text-decoration: none;
		transition: color .2s ease, background-color .2s ease;
	}
	section.layout.header .midcontainer .nav-more-panel > li > a::before {
		content: "";
		position: absolute;
		left: 0;
		top: 20%;
		bottom: 20%;
		width: 3px;
		background: rgba(var(--mc-accent), 1);
		transform: scaleY(0);
		transition: transform .25s cubic-bezier(.4, 0, .2, 1);
	}
	section.layout.header .midcontainer .nav-more-panel > li > a:hover,
section.layout.header .midcontainer .nav-more-panel > li.active > a {
		color: rgba(var(--mc-accent), 1);
		background: rgba(var(--mc-accent), .06);
	}
	section.layout.header .midcontainer .nav-more-panel > li > a:hover::before,
section.layout.header .midcontainer .nav-more-panel > li.active > a::before {
		transform: scaleY(1);
	}
}

/* ==========================================================================
   Fejléc-almenü lenyíló panelek (a korábbi #innav dizájn, ENCO kékkel)
   ========================================================================== */
@media (min-width: 992px) {
	section.layout.header .midcontainer {
		--mc-ease: cubic-bezier(.19, 1, .22, 1);
		--mc-spring: cubic-bezier(.34, 1.56, .64, 1);
	}
	/* JS után a kilógó elemeket a site.js rejti, így a panelek kilóghatnak a sávból */
	section.layout.header .midcontainer.mc-js .navbar-nav {
		overflow: visible !important;
	}
	section.layout.header .midcontainer .navbar-nav > .nav-item.dropdown:hover > .nav-link,
section.layout.header .midcontainer .navbar-nav > .nav-item.dropdown:has(:focus-visible) > .nav-link {
		color: rgba(var(--mc-accent), 1);
	}
	section.layout.header .midcontainer .navbar-nav > .nav-item.dropdown:hover > .nav-link::after {
		transform: scaleY(1) !important;
	}
	/* jobb szélen: a panel jobbra igazodik (site.js teszi rá a .dd-right-ot) */
	section.layout.header .midcontainer .navbar-nav > .dropdown.dd-right > .dropdown-menu {
		left: auto;
		right: calc(-1 * var(--mc-bar-bleed));
	}
	section.layout.header .midcontainer .dropdown-menu > .nav-item.active > .nav-link {
		font-weight: 800;
	}

	
	section.layout.header .midcontainer .navbar-nav > .dropdown > .dropdown-menu {
		display: block;
		top: 100%;
		left: calc(-1 * var(--mc-bar-bleed));
		margin: 0;
		padding: .45rem 0 .7rem;
		min-width: 17rem;
		border-radius: 0 0 1rem 1rem;
		border: 1px solid rgba(0, 0, 0, .06) !important;
		background: #fff;
		box-shadow:
			0 2rem 4rem -1.25rem rgba(10, 25, 60, .35),
			0 .5rem 1.25rem -.5rem rgba(10, 25, 60, .15) !important;
		counter-reset: mcdd;
		visibility: hidden;
		pointer-events: none;
		opacity: 0;
		/* egyszerű beúszás: nincs clip-path (az hit-testet és az árnyékot is rángatta) */
		transform: translateY(-10px);
		transition:
			opacity .12s ease .04s,
			transform .16s cubic-bezier(.2, .9, .25, 1) .04s,
			visibility 0s linear .16s;
	}
	section.layout.header .midcontainer .navbar-nav > .dropdown:hover > .dropdown-menu,
section.layout.header .midcontainer .navbar-nav > .dropdown:has(:focus-visible) > .dropdown-menu {
		visibility: visible;
		pointer-events: auto;
		opacity: 1;
		transform: none;
		transition:
			opacity .14s ease,
			transform .22s cubic-bezier(.2, .9, .25, 1),
			visibility 0s;
	}

	/* ---- Almenüpontok ----------------------------------------------------- */
	section.layout.header .midcontainer .dropdown-menu > .nav-item {
		position: relative;
		padding: 0 .5rem;
		background: transparent !important;
		counter-increment: mcdd;
		opacity: 0;
		filter: blur(3px);
		transform: translateY(8px);
		transition: opacity .1s ease, filter .1s ease, transform .1s ease;
	}
	section.layout.header .midcontainer .dropdown:hover > .dropdown-menu > .nav-item,
section.layout.header .midcontainer .dropdown:has(:focus-visible) > .dropdown-menu > .nav-item {
		opacity: 1;
		filter: blur(0);
		transform: none;
		transition: opacity .2s ease, filter .2s ease, transform .25s cubic-bezier(.2, .9, .25, 1);
	}
	section.layout.header .midcontainer .dropdown:hover > .dropdown-menu > .nav-item:nth-child(1) { transition-delay: 0.020s; }
	section.layout.header .midcontainer .dropdown:hover > .dropdown-menu > .nav-item:nth-child(2) { transition-delay: 0.045s; }
	section.layout.header .midcontainer .dropdown:hover > .dropdown-menu > .nav-item:nth-child(3) { transition-delay: 0.070s; }
	section.layout.header .midcontainer .dropdown:hover > .dropdown-menu > .nav-item:nth-child(4) { transition-delay: 0.095s; }
	section.layout.header .midcontainer .dropdown:hover > .dropdown-menu > .nav-item:nth-child(5) { transition-delay: 0.120s; }
	section.layout.header .midcontainer .dropdown:hover > .dropdown-menu > .nav-item:nth-child(6) { transition-delay: 0.145s; }
	section.layout.header .midcontainer .dropdown:hover > .dropdown-menu > .nav-item:nth-child(7) { transition-delay: 0.170s; }
	section.layout.header .midcontainer .dropdown:hover > .dropdown-menu > .nav-item:nth-child(8) { transition-delay: 0.195s; }
	section.layout.header .midcontainer .dropdown:hover > .dropdown-menu > .nav-item:nth-child(9) { transition-delay: 0.220s; }
	section.layout.header .midcontainer .dropdown:hover > .dropdown-menu > .nav-item:nth-child(10) { transition-delay: 0.245s; }

	/* sorszám: 01, 02, … */
	section.layout.header .midcontainer .dropdown-menu > .nav-item::before {
		content: counter(mcdd, decimal-leading-zero);
		position: absolute;
		left: 1.35rem;
		top: 50%;
		z-index: 1;
		font-size: .62rem;
		font-weight: 700;
		letter-spacing: .06em;
		font-variant-numeric: tabular-nums;
		color: rgba(var(--mc-accent), 1);
		transform: translateY(-50%);
		pointer-events: none;
		transition: color .15s ease, transform .25s var(--mc-spring);
	}
	section.layout.header .midcontainer .dropdown-menu > .nav-item:hover::before,
section.layout.header .midcontainer .dropdown-menu > .nav-item.active::before {
		color: rgba(var(--mc-accent), 1);
		transform: translateY(-50%) scale(1.15);
	}

	section.layout.header .midcontainer .dropdown-menu > .nav-item > .nav-link {
		position: relative;
		display: block;
		padding: .6rem 3.25rem .6rem 3rem;
		border-radius: .6rem;
		overflow: hidden;
		color: rgba(var(--mix-text), .85);
		transition: color .15s ease, padding .25s cubic-bezier(.2, .9, .25, 1);
	}
	/* háttér balról beúszó színátmenettel */
	section.layout.header .midcontainer .dropdown-menu > .nav-item > .nav-link::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		background: linear-gradient(90deg, rgba(var(--mc-accent), .16), rgba(var(--mc-accent), .03) 70%, rgba(var(--mc-accent), 0));
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform .25s cubic-bezier(.2, .9, .25, 1);
	}
	/* nyíl, ami jobbról becsúszik */
	section.layout.header .midcontainer .dropdown-menu > .nav-item > .nav-link::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 1.1rem;
		width: 16px;
		height: 16px;
		background: rgba(var(--mc-accent), 1);
		-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/></svg>") center / 100% no-repeat;
		mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/></svg>") center / 100% no-repeat;
		opacity: 0;
		transform: translate(-14px, -50%);
		transition: opacity .15s ease, transform .25s var(--mc-spring);
	}
	section.layout.header .midcontainer .dropdown-menu > .nav-item > .nav-link:hover,
section.layout.header .midcontainer .dropdown-menu > .nav-item.active > .nav-link {
		color: rgba(var(--mc-accent), 1);
		padding-left: 3.35rem;
		padding-right: 2.9rem;
	}
	section.layout.header .midcontainer .dropdown-menu > .nav-item > .nav-link:hover::before,
section.layout.header .midcontainer .dropdown-menu > .nav-item.active > .nav-link::before {
		transform: scaleX(1);
	}
	section.layout.header .midcontainer .dropdown-menu > .nav-item > .nav-link:hover::after {
		opacity: 1;
		transform: translate(0, -50%);
	}
	section.layout.header .midcontainer .dropdown-menu > .nav-item > .nav-link:active {
		transform: scale(.98);
	}
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
	section.layout.header .midcontainer .dropdown-menu,
section.layout.header .midcontainer .dropdown-menu * {
		transition-duration: .01s !important;
		transition-delay: 0s !important;
	}
}

/* Szövegárnyék háttérképes szekciókhoz (a benne lévő összes szövegre öröklődik) */
.section-text-background-shadow {
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Hero (háttérképes / háttérvideós szekció) — mobil elrendezés, csak CSS
   < 992px: felül 16:9-es videó/kép sáv, alatta a szöveg szürke dobozban.
   A DOM változatlan: a háttér-elem abszolút a sáv helyére kerül, a section
   a sáv magasságával lejjebb tolja a tartalmat, a mix-színeket felülírjuk.
   ========================================================================== */
@media (max-width: 991.98px) {
	section.layout.background-image:not(.header):has(> .background-video-source,
> .background-image-source) {
		--mix-bg: var(--c07);   /* világosszürke doboz */
		--mix-text: var(--c02); /* sötét szöveg */
		padding-top: 56.25vw !important;
		padding-bottom: 0 !important;
		text-shadow: none;
	}
	section.layout.background-image:not(.header) > .background-video-source,
section.layout.background-image:not(.header) > .background-image-source {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: auto !important;
		width: 100% !important;
		height: 56.25vw !important;
		opacity: 1 !important;
		transform: none !important;
	}
	section.layout.background-image:not(.header) > .background-video-source video,
section.layout.background-image:not(.header) > .background-image-source img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		-webkit-mask-image: none !important;
		mask-image: none !important;
		filter: none !important;
	}
	section.layout.background-image:not(.header):has(> .background-video-source,
> .background-image-source) > .container {
		padding-top: 1.75rem;
		padding-bottom: 2rem;
	}
	section.layout.background-image:not(.header):has(> .background-video-source,
> .background-image-source) :is(h1,
h2,
h3,
p,
article) {
		color: rgba(var(--mix-text), 1);
		text-shadow: none;
	}
}

/* ==========================================================================
   Nyelvválasztó a fejlécben ({languageswitch} — services/class.languages.php)
   ========================================================================== */
.lang { --lang-accent: var(--c05, 0, 74, 142); /* ENCO kék; az élő oldalon a paletta adja */ display: flex; align-items: center; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; }
.lang a,
.lang button { text-decoration: none; color: rgba(var(--mix-text), .75); transition: color .25s ease, background-color .25s ease, border-color .25s ease; }
.lang svg { fill: currentColor; display: block; }

/* B — lenyíló: globe + aktuális nyelv + chevron, alatta panel (fejléc-menü stílus) */
.lang-drop { position: relative; }
.lang-drop .lang-toggle { display: flex; align-items: center; gap: .35rem; padding: .35rem .5rem; border: 0; border-radius: .5rem; background: none; font: inherit; cursor: pointer; }
.lang-drop .lang-globe { width: 1.15rem; height: 1.15rem; }
.lang-drop .lang-toggle > span { line-height: 1; margin-top: 3px; }
.lang-drop .lang-chev { width: .85rem; height: .85rem; transition: transform .3s cubic-bezier(.2,.9,.25,1); }
.lang-drop:hover .lang-toggle,
.lang-drop:focus-within .lang-toggle { color: rgba(var(--lang-accent), 1); background: rgba(var(--lang-accent), .08); }
.lang-drop:hover .lang-chev,
.lang-drop:focus-within .lang-chev { transform: rotate(180deg); }
.lang-drop .lang-menu { position: absolute; top: calc(100% + .4rem); right: 0; z-index: 30; min-width: 11rem; margin: 0; padding: .35rem 0; list-style: none;
	background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: .75rem; box-shadow: 0 1.25rem 2.5rem -1rem rgba(10,25,60,.35);
	opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .22s cubic-bezier(.2,.9,.25,1), visibility 0s linear .2s; }
.lang-drop:hover .lang-menu,
.lang-drop:focus-within .lang-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .15s ease, transform .22s cubic-bezier(.2,.9,.25,1), visibility 0s; }
.lang-drop .lang-menu a { display: flex; align-items: baseline; gap: .5rem; padding: .45rem 1rem; font-weight: 400; }
.lang-drop .lang-menu b { min-width: 1.6rem; font-size: .75rem; letter-spacing: .06em; color: rgba(var(--lang-accent), 1); }
.lang-drop .lang-menu a:hover { background: rgba(var(--lang-accent), .07); color: rgba(var(--lang-accent), 1); }
.lang-drop .lang-menu li.active a { font-weight: 700; color: rgba(var(--lang-accent), 1); background: rgba(var(--lang-accent), .05); }

/* ==========================================================================
   Social bar a fejlécben ({socialbar} — services/class.socialbar.php)
   Kibomló: alapból csak az első ikon látszik, hoverre kicsúszik a többi.
   ========================================================================== */
.sb {
	--sb-accent: var(--c05, 0, 74, 142);
	display: flex;
	align-items: center;
}
.sb a {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: rgba(var(--mix-text), .7);
	transition: color .25s ease, background-color .25s ease;
}
.sb svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: currentColor;
	display: block;
}
.sb-expand {
	gap: .35rem;
}
.sb-expand a {
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: rgba(var(--mix-text), .06);
	flex: 0 0 auto;
}
.sb-expand a:not(:first-child):not(:last-child) {
	width: 0;
	margin-left: -.35rem;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
	transition: width .35s cubic-bezier(.2, .9, .25, 1), margin .35s cubic-bezier(.2, .9, .25, 1), opacity .25s ease, background-color .25s ease, color .25s ease;
}
.sb-expand:hover a:not(:first-child):not(:last-child),
.sb-expand:focus-within a:not(:first-child):not(:last-child) {
	width: 2rem;
	margin-left: 0;
	opacity: 1;
	pointer-events: auto;
}
.sb-expand a:hover {
	color: #fff;
	background: rgba(var(--sb-accent), 1);
}

/* Mobil: a fejléc jobb oldali blokkja (nyelvválasztó + social) is látszik */
@media (max-width: 991.98px) {
	/* a keresőgomb miatt marad látható: a nyelvválasztó és a közösségi ikonok
	   mobilon átkerülnek a menü aljára, így rájuk már nem hivatkozhatunk */
	section.layout.header figure.d-none.d-lg-block:has(.srch-toggle) {
		display: block !important;
	}
	section.layout.header figure.d-none.d-lg-block:has(.srch-toggle) > .content-box {
		gap: .5rem;
		justify-content: flex-end;
	}
	.sb-expand a { width: 1.85rem; height: 1.85rem; }
	.sb-expand:hover a:not(:first-child):not(:last-child),
.sb-expand:focus-within a:not(:first-child):not(:last-child) { width: 1.85rem; }
	/* érintésnél nincs hover: koppintásra is bomoljon ki */
	.sb-expand:active a:not(:first-child):not(:last-child) { width: 1.85rem; margin-left: 0; opacity: 1; pointer-events: auto; }
}

/* Fejléc logó-felirat: MINDIG egy sorban (a korábbi mobil sortörés kikerült) */
section.layout.header [data-type="logo"] p {
	white-space: nowrap;
}

/* ==========================================================================
   Kereső a fejlécben ({searchbox} — services/class.search.php)
   Gomb: nagyító + „Keresés” (mobilon csak a nagyító). Modál: magas z-index,
   nagy tapintható elemek, 17px-es input (iOS így nem zoomol rá).
   ========================================================================== */
.srch-toggle {
	--srch-accent: var(--c05, 0, 74, 142);
	display: flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .5rem;
	border: 0;
	border-radius: .5rem;
	background: none;
	font: inherit;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: rgba(var(--mix-text), .75);
	cursor: pointer;
	transition: color .25s ease, background-color .25s ease;
}
.srch-toggle span { line-height: 1; margin-top: 3px; }
.srch-toggle .srch-icon { width: 1.15rem; height: 1.15rem; fill: currentColor; display: block; }
.srch-toggle:hover,
.srch-toggle[aria-expanded="true"] {
	color: rgba(var(--srch-accent), 1);
	background: rgba(var(--srch-accent), .08);
}
@media (max-width: 991.98px) {
	.srch-toggle span { display: none; }      /* mobilon csak a nagyító */
	.srch-toggle { padding: .35rem; }
}

.srch-modal {
	--srch-accent: var(--c05, 0, 74, 142);
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: max(12vh, 4rem) 1rem 1rem;
}
.srch-modal[hidden] { display: none; }
/* A homály a kereső körül a legerősebb (~10px) és kifelé gyengül 3px-ig:
   három egymásra rakott réteg, a felsőket radiális maszk halványítja.
   A középpontot a JS állítja be (--srch-cx / --srch-cy), a panel közepére. */
.srch-backdrop {
	position: absolute;
	inset: 0;
	--srch-cx: 50%;
	--srch-cy: 18vh;
	background: rgba(6, 20, 40, .62);
	-webkit-backdrop-filter: blur(3px) saturate(1.1);
	backdrop-filter: blur(3px) saturate(1.1);
	animation: srch-fade .55s cubic-bezier(.25, .8, .3, 1) both;
}
.srch-backdrop::before,
.srch-backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.srch-backdrop::before {
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	-webkit-mask-image: radial-gradient(circle 340px at var(--srch-cx) var(--srch-cy), #000 0%, rgba(0, 0, 0, 0) 100%);
	mask-image: radial-gradient(circle 340px at var(--srch-cx) var(--srch-cy), #000 0%, rgba(0, 0, 0, 0) 100%);
}
.srch-backdrop::after {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	-webkit-mask-image: radial-gradient(circle 180px at var(--srch-cx) var(--srch-cy), #000 0%, rgba(0, 0, 0, 0) 100%);
	mask-image: radial-gradient(circle 180px at var(--srch-cx) var(--srch-cy), #000 0%, rgba(0, 0, 0, 0) 100%);
}
.srch-panel {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5rem;
	width: min(40rem, 100%);
	padding: .5rem .5rem .5rem .75rem;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 2rem 4rem -1rem rgba(6, 20, 40, .45);
	animation: srch-pop .32s cubic-bezier(.2, .9, .25, 1) .06s both;
}
@keyframes srch-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes srch-pop { from { opacity: 0; transform: translateY(-12px) } to { opacity: 1; transform: none } }
.srch-field {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: rgba(var(--mix-text), .55);
}
.srch-field .srch-icon { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: 0 0 auto; }
.srch-field input {
	flex: 1 1 auto;
	min-width: 0;
	height: 3rem;
	border: 0;
	outline: 0;
	background: none;
	font-family: inherit;
	font-size: 1.0625rem;      /* 17px — iOS így nem nagyít rá */
	color: rgba(var(--mix-text), 1);
	-webkit-appearance: none;
	appearance: none;
}
.srch-field input::placeholder { color: rgba(var(--mix-text), .45); }
.srch-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.srch-submit {
	flex: 0 0 auto;
	height: 3rem;
	padding: 0 1.25rem;
	border: 0;
	border-radius: .75rem;
	background: rgba(var(--srch-accent), 1);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: filter .2s ease;
}
.srch-submit:hover { filter: brightness(1.12); }
.srch-close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: .75rem;
	background: none;
	color: rgba(var(--mix-text), .6);
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease;
}
.srch-close svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.srch-close span { display: none; }
.srch-close:hover { color: rgba(var(--mix-text), 1); background: rgba(var(--mix-text), .07); }
@media (max-width: 575.98px) {
	.srch-modal { padding: 3.5rem .75rem 1rem; }
	.srch-panel { flex-wrap: wrap; padding: 3.5rem .75rem .75rem; }
	.srch-field { order: 2; flex: 1 1 100%; }
	.srch-submit { order: 3; flex: 1 1 100%; width: 100%; height: 3.25rem; font-size: 1.0625rem; }
	/* bezárás a panel jobb felső sarkában, X + felirat */
	.srch-close {
		order: 1;
		position: absolute;
		top: .5rem;
		right: .5rem;
		width: auto;
		height: 2.5rem;
		gap: .35rem;
		padding: 0 .75rem;
		font-size: .875rem;
		font-weight: 700;
	}
	.srch-close span { display: inline; }
}

/* --- Kereső: automatikus kiegészítés ------------------------------------- */
.srch-suggest {
	position: absolute;
	top: calc(100% + .5rem);
	left: 0;
	right: 0;
	z-index: 2;
	max-height: 21rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0;
	padding: .375rem;
	list-style: none;
	background: #fff;
	border-radius: .875rem;
	box-shadow: 0 1.25rem 2.5rem -.75rem rgba(6, 20, 40, .35);
	animation: srch-pop .18s cubic-bezier(.2, .9, .25, 1) both;
}
.srch-suggest[hidden] { display: none; }
.srch-suggest li {
	padding: .625rem .75rem;
	border-radius: .625rem;
	font-size: 1rem;
	line-height: 1.3;
	color: rgba(var(--mix-text), .8);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.srch-suggest li b { font-weight: 700; color: rgba(var(--srch-accent), 1); }
.srch-suggest li.is-active {
	background: rgba(var(--srch-accent), .08);
	color: rgba(var(--mix-text), 1);
}
.srch-suggest li.is-active b { color: rgba(var(--srch-accent), 1); }

@media (max-width: 575.98px) {
	/* mobilon nem lebeg: a mező és a Keresés gomb közé kerül */
	.srch-suggest {
		position: static;
		order: 3;
		flex: 1 1 100%;
		max-height: 14.5rem;
		margin: .5rem 0 0;
		padding: .25rem;
		box-shadow: none;
		border: 1px solid rgba(var(--mix-text), .12);
	}
	.srch-suggest li { padding: .6875rem .625rem; }
	.srch-submit { order: 4; }
}

/* --- Fejléc jobb oldali blokk: a belső nav ne takarja, és legyen kontrasztos --- */
/* a .midcontainer abszolút és z-index:2 — a gombsor kerüljön fölé */
section.layout.header .content-box:has(> .srch-toggle) {
	position: relative;
	z-index: 3;
}
/* üres belső nav (pl. a főoldalon) ne fogja el a kattintást */
section.layout.header .midcontainer .navbar-nav:not(:has(li)) { pointer-events: none; }

/* Olvashatóság — CSAK ott, ahol a fejléc mögött háttérvideó/kép van
   (a főoldalon). A sima aloldalak fejléce marad az eredeti stílusában. */
section.layout.header:has(> .background-video-source,
> .background-image-source) .srch-toggle,
section.layout.header:has(> .background-video-source,
> .background-image-source) .lang-toggle,
section.layout.header:has(> .background-video-source,
> .background-image-source) .sb a {
	color: rgba(var(--mix-text), 1);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
section.layout.header:has(> .background-video-source,
> .background-image-source) .srch-toggle svg,
section.layout.header:has(> .background-video-source,
> .background-image-source) .lang-toggle svg,
section.layout.header:has(> .background-video-source,
> .background-image-source) .sb svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }

/* --- Zene-kapcsoló a fejlécben (csak ahol van háttérvideó) ------------- */
.hang-gomb {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: calc(.5rem - 2px) calc(.9rem - 2px);
	margin-right: .35rem;
	border-radius: 2rem;
	background: transparent;                 /* kikapcsolva: fehér keret */
	border: 2px solid rgba(255, 255, 255, .9);
	color: #fff;
	font: inherit;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 .125rem .5rem -.125rem rgba(6, 20, 40, .45);
	transition: background-color .2s ease, transform .2s ease;
}
.hang-gomb:hover { background: rgba(255, 255, 255, .18); }
.hang-gomb:active { transform: scale(.97); }
.hang-gomb svg { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: 0 0 auto; }
.hang-gomb.szol {
	background: #fff;                        /* bekapcsolva: tömör fehér */
	border-color: #fff;
	color: rgba(var(--c05, 0, 74, 142), 1);
	box-shadow: 0 .125rem .5rem -.125rem rgba(6, 20, 40, .35);
}
.hang-gomb.szol:hover { background: #fff; filter: brightness(.96); }
/* mobilon nincs zene, így gomb sincs */
@media (max-width: 991.98px) { .hang-gomb { display: none; } }
section.layout.header .content-box:has(> .hang-gomb) { position: relative; z-index: 3; }

.srch-modal { --srch-szoveg: 15, 23, 42; }
.srch-panel,
.srch-panel * { text-shadow: none; }
.srch-field { color: rgba(var(--srch-szoveg), .55); }
.srch-field input { color: rgba(var(--srch-szoveg), 1); }
.srch-field input::placeholder { color: rgba(var(--srch-szoveg), .45); }
.srch-close { color: rgba(var(--srch-szoveg), .6); }
.srch-close:hover { color: rgba(var(--srch-szoveg), 1); background: rgba(var(--srch-szoveg), .07); }
.srch-suggest li { color: rgba(var(--srch-szoveg), .8); }
.srch-suggest li.is-active { color: rgba(var(--srch-szoveg), 1); }
@media (max-width: 575.98px) {
	.srch-suggest { border-color: rgba(var(--srch-szoveg), .12); }
}

.lang-drop .lang-menu { --lang-szoveg: 15, 23, 42; }
.lang-drop .lang-menu a { color: rgba(var(--lang-szoveg), .85); text-shadow: none; }
.lang-drop .lang-menu a span { color: inherit; }
.lang-drop .lang-menu a:hover { color: rgba(var(--lang-accent), 1); }
.lang-drop .lang-menu li.active a { color: rgba(var(--lang-accent), 1); }

/* --- A fejléc felső sora mindig a hero tartalma FÖLÖTT legyen ----------
   Enélkül a nyelvválasztó és a kereső legördülője a hero szövege alá kerül
   (a .container-content a DOM-ban később jön, így azonos szinten az nyerne). */
section.layout.header > .container-top {
	position: relative;
	z-index: 20;
}

/* --- Betűméret nagy képernyőn: fs-lg-1 … fs-lg-9 -----------------------
   A keretrendszerben csak töréspont nélküli fs-* van, így pl. a fejléc-logó
   nem tud mobilon kisebb lenni. A skála a styles.css fs-* értékeit követi. */
@media (min-width: 992px) {
	.fs-lg-1 { font-size: 2.5rem !important; }
	.fs-lg-2 { font-size: 2rem !important; }
	.fs-lg-3 { font-size: 1.75rem !important; }
	.fs-lg-4 { font-size: 1.5rem !important; }
	.fs-lg-5 { font-size: 1.25rem !important; }
	.fs-lg-6 { font-size: 1rem !important; }
	.fs-lg-7 { font-size: .9rem !important; }
	.fs-lg-8 { font-size: .8rem !important; }
	.fs-lg-9 { font-size: .75rem !important; }
}

/* --- A fejléc legördülő paneljein nincs szövegárnyék --------------------
   A hero section .section-text-background-shadow-ja örökölhető, a fehér
   panelekre viszont nem való. */
section.layout.header .dropdown-menu,
section.layout.header .dropdown-menu *,
section.layout.header .nav-more-panel,
section.layout.header .nav-more-panel *,
section.layout.header .lang-menu,
section.layout.header .lang-menu * { text-shadow: none !important; }

section.layout.header .midcontainer .dropdown-menu,
section.layout.header .midcontainer .nav-more-panel {
	--mix-text: 15, 23, 42;
	--mc-accent: var(--c05);     /* a fehér panelen a kiemelés marad ENCO kék */
}

/* Ahol a fejléc mögött videó/kép van (főoldal), a sáv sötét: ott a hover és
   az aktív jelölés fehér, mert a kék nem válna el a háttértől. */
section.layout.header:has(> .background-video-source,
> .background-image-source) .midcontainer {
	--mc-accent: 255, 255, 255;
}

/* --- A videós fejlécben a menü tisztán fehér, lágy árnyékkal -----------
   A világosabb képkockákon a 85%-os fehér és a finom 1px-es árnyék
   elveszett; itt teljes fehér + mélyebb, szórt árnyék kell.
   A legördülő paneleket ez nem érinti (ott text-shadow: none áll). */
@media (min-width: 992px) {
	section.layout.header:has(> .background-video-source,
> .background-image-source) .midcontainer .navbar-nav > .nav-item > .nav-link,
section.layout.header:has(> .background-video-source,
> .background-image-source) .midcontainer .nav-parent,
section.layout.header:has(> .background-video-source,
> .background-image-source) .midcontainer .nav-parent > .nav-link,
section.layout.header:has(> .background-video-source,
> .background-image-source) .midcontainer .nav-more > .nav-link {
		color: rgba(var(--mix-text), 1);
		text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 14px rgba(0, 0, 0, .45);
	}
}

/* --- Logó: „ENCO" vastag, „Energy" vékony, egy sorban ------------------- */
section.layout.header [data-type="logo"] p,
#offcanvasNavbar.mck-offcanvas .mck-brand p {
	white-space: nowrap;
	font-weight: var(--bs-font-navigation-weight-normal, 400);
}
section.layout.header [data-type="logo"] p b,
#offcanvasNavbar.mck-offcanvas .mck-brand p b { font-weight: 800; }

/* --- Mobil fejléc: nagyobb, ujjal is fogható gombok --------------------- */
@media (max-width: 991.98px) {
	section.layout.header .srch-toggle,
section.layout.header .lang-toggle {
		min-width: 48px;
		min-height: 48px;
		justify-content: center;
	}
	section.layout.header .srch-toggle .srch-icon,
section.layout.header .lang-toggle .lang-globe { width: 1.45rem; height: 1.45rem; }

	/* a közösségi ikonok mobilon a menü láblécébe kerülnek (site.js);
	   a nyelvválasztó marad a fejlécben */
	section.layout.header .sb { display: none !important; }
}

/* --- Közösségi ikonok a nagy menü láblécében (mobil) --------------------
   Itt NINCS hover, ezért mind a négy ikon egyszerre látszik — a fejlécben
   használt „kibomló" viselkedést (.sb-expand) felülírjuk. A menü háttere
   ENCO kék, ezért az ikonok fehérek. */
/* a lábléc fix magasságú (--mck-footer-h), ezért az ikonsor helyét hozzá
   kell adni, különben kicsúszik a képernyő aljáról */
@media (max-width: 991.98px) {
	#offcanvasNavbar.mck-offcanvas:has(.sb-menuben) { --mck-footer-h: 226px; }
	#offcanvasNavbar.mck-offcanvas .offcanvas-footer {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
}

#offcanvasNavbar.mck-offcanvas .offcanvas-footer .sb.sb-menuben {
	color: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5rem;
	width: 100%;
	padding: .75rem var(--mck-pad) 1rem;
	border-top: 1px solid var(--mck-divider);
}
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .sb.sb-menuben a,
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .sb.sb-menuben a:not(:first-child):not(:last-child) {
	width: 48px;
	height: 48px;
	min-width: 48px;
	margin-left: 0;
	opacity: 1;
	pointer-events: auto;
	overflow: visible;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	/* a menü színsémáját követik: a főoldalon fehér a kéken,
	   az aloldalakon ENCO kék a fehéren */
	position: relative;
	background: transparent;
	color: inherit;          /* a menü szövegszínét örökli — a var(--mck-*) ezen az
	                            elemen nem oldódott fel megbízhatóan */
}
/* a kör hátterét currentColor adja: így mindig az ikon színét követi
   (a főoldalon fehér a kéken, az aloldalakon ENCO kék a fehéren) */
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .sb.sb-menuben a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: currentColor;
	opacity: .12;
	transition: opacity .2s ease;
}
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .sb.sb-menuben a:hover::before,
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .sb.sb-menuben a:active::before { opacity: .25; }
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .sb.sb-menuben a svg { position: relative; z-index: 1; }

#offcanvasNavbar.mck-offcanvas .offcanvas-footer .sb.sb-menuben svg {
	width: 1.35rem;
	height: 1.35rem;
	fill: currentColor;
}

/* ==========================================================================
   ENCO dinamikus blokk sablonok (modules/smartslides/templates/dynamic_block_enco_*)
   A keretrendszer csak változókat ad a .dynamic-block-ra, a megjelenést
   itt írjuk le. Három sablon: spotlight (nagy, képes), magazin (soros,
   számozott), hasonló (a fejléc-legördülő hangulata).
   ========================================================================== */
.dynamic-block.enco-spotlight,
.dynamic-block.enco-magazin,
.dynamic-block.enco-hasonlo {
	--enco-kek: var(--c05, 0, 74, 142);
	--enco-narancs: var(--c03, 250, 100, 40);
	--enco-szoveg: 15, 23, 42;
}

/* --- 1) SPOTLIGHT: nagy képes kártyák ---------------------------------- */
.dynamic-block.enco-spotlight {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1.25rem;
}
.enco-spotlight .es-item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 1rem;
	min-height: 20rem;
	text-decoration: none;
	color: #fff;
	isolation: isolate;
	box-shadow: 0 .75rem 2rem -1rem rgba(6, 20, 40, .45);
}
.enco-spotlight .es-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	overflow: hidden;
}
.enco-spotlight .es-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.01);
	transition: transform 4s cubic-bezier(.2, .6, .2, 1);
}
.enco-spotlight .es-item:hover .es-media img { transform: scale(1.12); }
.enco-spotlight .es-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to top, rgba(var(--enco-kek), .92) 0%, rgba(var(--enco-kek), .55) 38%, rgba(var(--enco-kek), 0) 72%),
		linear-gradient(to top, rgba(6, 20, 40, .35), rgba(6, 20, 40, 0) 55%);
	transition: opacity .4s ease;
}
.enco-spotlight .es-item:hover .es-veil { opacity: .92; }
.enco-spotlight .es-body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: block;
	padding: 1.25rem 1.35rem 1.35rem;
}
.enco-spotlight .es-title {
	display: block;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.25;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.enco-spotlight .es-rule {
	display: block;
	width: 2.25rem;
	height: 3px;
	margin: .6rem 0 .55rem;
	border-radius: 2px;
	background: rgba(var(--enco-narancs), 1);
	transition: width .45s cubic-bezier(.2, .9, .25, 1);
}
.enco-spotlight .es-item:hover .es-rule { width: 4.5rem; }
.enco-spotlight .es-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .875rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, .88);
	max-height: 0;
	opacity: 0;
	transition: max-height .5s cubic-bezier(.2, .9, .25, 1), opacity .35s ease;
}
.enco-spotlight .es-item:hover .es-desc { max-height: 5rem; opacity: 1; }
.enco-spotlight .es-cta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: .7rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.enco-spotlight .es-cta svg { width: 1.05rem; height: 1.05rem; fill: currentColor; transition: transform .3s ease; }
.enco-spotlight .es-item:hover .es-cta svg { transform: translateX(.3rem); }

/* --- 2) MAGAZIN: soronként két keretes kártya ------------------------- */
.dynamic-block.enco-magazin {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	align-items: start;
}
.enco-magazin .em-item {
	position: relative;
	display: grid;
	grid-template-columns: 11rem 1fr;
	align-items: stretch;
	gap: 0;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: .9rem;
	background: #fff;
	text-decoration: none;
	color: rgba(var(--enco-szoveg), 1);
	transition: border-color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2, .9, .25, 1);
}
.enco-magazin .em-item::before {          /* bal oldali akcentuscsík hoverre */
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	z-index: 2;
	background: rgba(var(--enco-narancs), 1);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .35s cubic-bezier(.2, .9, .25, 1);
}
.enco-magazin .em-item:hover {
	border-color: rgba(var(--enco-kek), .3);
	box-shadow: 0 .75rem 1.75rem -1rem rgba(6, 20, 40, .28);
	transform: translateY(-3px);
}
.enco-magazin .em-item:hover::before { transform: scaleY(1); }
.enco-magazin .em-media {
	display: block;
	overflow: hidden;
	background: rgba(var(--enco-kek), .06);
}
.enco-magazin .em-media img {
	width: 100%;
	height: 100%;
	min-height: 9.5rem;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(.2, .9, .25, 1);
}
.enco-magazin .em-item:hover .em-media img { transform: scale(1.07); }
.enco-magazin .em-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 1.1rem 1.25rem;
}
.enco-magazin .em-title {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	transition: color .25s ease;
}
.enco-magazin .em-item:hover .em-title { color: rgba(var(--enco-kek), 1); }
.enco-magazin .em-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: .4rem;
	font-size: .875rem;
	line-height: 1.5;
	color: rgba(var(--enco-szoveg), .65);
}
.enco-magazin .em-cta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: .7rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(var(--enco-kek), 1);
	transition: color .25s ease;
}
.enco-magazin .em-cta svg { width: 1rem; height: 1rem; fill: currentColor; transition: transform .25s ease; }
.enco-magazin .em-item:hover .em-cta { color: rgba(var(--enco-narancs), 1); }
.enco-magazin .em-item:hover .em-cta svg { transform: translateX(.3rem); }
@media (max-width: 991.98px) {
	.dynamic-block.enco-magazin { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
	.enco-magazin .em-item { grid-template-columns: 7.5rem 1fr; }
	.enco-magazin .em-body { padding: .85rem .95rem; }
}

/* --- 3) HASONLÓ OLDALAK: a fejléc-legördülő hangulata ------------------ */
.dynamic-block.enco-hasonlo {
	display: block;
	padding: .5rem;
	background: #fff;
	border: 1px solid rgba(var(--enco-szoveg), .08);
	border-radius: 1rem;
	box-shadow: 0 1.5rem 3rem -1.5rem rgba(10, 25, 60, .35);
	counter-reset: encohas;
}
.enco-hasonlo .eh-item {
	position: relative;
	display: grid;
	grid-template-columns: 2.25rem 1fr 1.25rem;
	align-items: center;
	gap: .5rem;
	padding: .7rem .75rem;
	border-radius: .65rem;
	text-decoration: none;
	color: rgba(var(--enco-szoveg), .85);
	transition: background-color .2s ease, color .2s ease;
}
.enco-hasonlo .eh-item + .eh-item::after {
	content: "";
	position: absolute;
	top: 0;
	left: .75rem;
	right: .75rem;
	border-top: 1px solid rgba(var(--enco-szoveg), .08);
}
.enco-hasonlo .eh-item:hover {
	background: rgba(var(--enco-kek), .07);
	color: rgba(var(--enco-kek), 1);
}
.enco-hasonlo .eh-item:hover::after,
.enco-hasonlo .eh-item:hover + .eh-item::after { border-color: transparent; }
.enco-hasonlo .eh-num {
	counter-increment: encohas;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: rgba(var(--enco-kek), 1);
}
.enco-hasonlo .eh-num::before { content: counter(encohas, decimal-leading-zero); }
.enco-hasonlo .eh-text { display: block; min-width: 0; }
.enco-hasonlo .eh-title {
	display: block;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.3;
}
.enco-hasonlo .eh-desc {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: .15rem;
	font-size: .8125rem;
	line-height: 1.35;
	color: rgba(var(--enco-szoveg), .55);
}
.enco-hasonlo .eh-item:hover .eh-desc { color: rgba(var(--enco-kek), .7); }
.enco-hasonlo .eh-arrow {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
	opacity: 0;
	transform: translateX(-.25rem);
	transition: opacity .2s ease, transform .25s ease;
}
.enco-hasonlo .eh-item:hover .eh-arrow { opacity: 1; transform: none; }

/* --- 5) ZEBRA: váltakozó oldalú széles sávok --------------------------- */
.dynamic-block.enco-zebra {
	--enco-kek: var(--c05, 0, 74, 142);
	--enco-narancs: var(--c03, 250, 100, 40);
	--enco-szoveg: 15, 23, 42;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.enco-zebra .ezb-item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 1rem;
	background: #fff;
	text-decoration: none;
	color: rgba(var(--enco-szoveg), 1);
	transition: border-color .25s ease, box-shadow .3s ease;
}
.enco-zebra .ezb-item:nth-child(even) .ezb-media { order: 2; }
.enco-zebra .ezb-item:hover {
	border-color: rgba(var(--enco-kek), .3);
	box-shadow: 0 1rem 2.5rem -1.25rem rgba(6, 20, 40, .3);
}
.enco-zebra .ezb-media { display: block; overflow: hidden; min-height: 15rem; }
.enco-zebra .ezb-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(.2, .9, .25, 1);
}
.enco-zebra .ezb-item:hover .ezb-media img { transform: scale(1.06); }
.enco-zebra .ezb-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.75rem 2rem;
	min-width: 0;
}
.enco-zebra .ezb-kicker {
	display: block;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(var(--enco-narancs), 1);
}
.enco-zebra .ezb-title {
	display: block;
	margin-top: .5rem;
	font-size: 1.45rem;
	font-weight: 800;
	line-height: 1.2;
	transition: color .25s ease;
}
.enco-zebra .ezb-item:hover .ezb-title { color: rgba(var(--enco-kek), 1); }
.enco-zebra .ezb-desc {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: .65rem;
	font-size: .9375rem;
	line-height: 1.55;
	color: rgba(var(--enco-szoveg), .68);
}
.enco-zebra .ezb-cta {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	align-self: flex-start;
	margin-top: 1.1rem;
	padding: .55rem 1.1rem;
	border-radius: 2rem;
	background: rgba(var(--enco-kek), 1);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: background-color .25s ease;
}
.enco-zebra .ezb-cta svg { width: 1rem; height: 1rem; fill: currentColor; transition: transform .25s ease; }
.enco-zebra .ezb-item:hover .ezb-cta { background: rgba(var(--enco-narancs), 1); }
.enco-zebra .ezb-item:hover .ezb-cta svg { transform: translateX(.25rem); }
@media (max-width: 767.98px) {
	.enco-zebra .ezb-item { grid-template-columns: minmax(0, 1fr); }
	.enco-zebra .ezb-item:nth-child(even) .ezb-media { order: 0; }
	.enco-zebra .ezb-media { min-height: 11rem; }
	.enco-zebra .ezb-body { padding: 1.25rem; }
	.enco-zebra .ezb-title { font-size: 1.2rem; }
}

/* --- Ajánló blokk kerete: fejléc + lábléc a „többi” gombbal ------------- */
.enco-ajanlo {
	--enco-kek: var(--c05, 0, 74, 142);
	--enco-narancs: var(--c03, 250, 100, 40);
	--enco-szoveg: 15, 23, 42;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 1rem;
	box-shadow: 0 1.5rem 3rem -1.5rem rgba(10, 25, 60, .35);
}
/* a blokk saját kerete és árnyéka a keretre költözött */
.enco-ajanlo .dynamic-block.enco-hasonlo {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: .35rem .5rem;
	margin: 0;
}
.enco-ajanlo-fej {
	position: relative;
	margin: 0;
	padding: 1.15rem 1.25rem 1rem;
	border-bottom: 1px solid rgba(var(--enco-szoveg), .1);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: rgba(var(--enco-szoveg), 1);
}
.enco-ajanlo-fej::after {          /* rövid narancs jelzés a cím alatt */
	content: "";
	position: absolute;
	left: 1.25rem;
	bottom: -2px;
	width: 2.25rem;
	height: 3px;
	border-radius: 2px;
	background: rgba(var(--enco-narancs), 1);
}
.enco-ajanlo-lab {
	padding: .5rem .6rem .75rem;
	border-top: 1px solid rgba(var(--enco-szoveg), .1);
}
.enco-ajanlo-tobb {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	width: 100%;
	padding: .7rem 1rem;
	border: 0;
	border-radius: .65rem;
	background: rgba(var(--enco-kek), .07);
	color: rgba(var(--enco-kek), 1);
	font: inherit;
	font-size: .8125rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.enco-ajanlo-tobb:hover { background: rgba(var(--enco-kek), 1); color: #fff; }
.enco-ajanlo-tobb svg { width: 1.05rem; height: 1.05rem; fill: currentColor; transition: transform .25s ease; }
.enco-ajanlo-tobb:hover svg { transform: translateY(2px); }

/* az ajánló lista hat elem magas ablakban görög */
.enco-hasonlo.enco-hasonlo-gorgo {
	overflow-y: auto;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--enco-kek), .35) transparent;
}
.enco-hasonlo.enco-hasonlo-gorgo::-webkit-scrollbar { width: 6px; }
.enco-hasonlo.enco-hasonlo-gorgo::-webkit-scrollbar-track { background: transparent; }
.enco-hasonlo.enco-hasonlo-gorgo::-webkit-scrollbar-thumb {
	background: rgba(var(--enco-kek), .3);
	border-radius: 3px;
}
.enco-hasonlo.enco-hasonlo-gorgo::-webkit-scrollbar-thumb:hover { background: rgba(var(--enco-kek), .5); }
/* a lista alján a gomb marad, csak elszürkül */
.enco-ajanlo-tobb:disabled {
	background: rgba(var(--enco-szoveg), .05);
	color: rgba(var(--enco-szoveg), .35);
	cursor: default;
}
.enco-ajanlo-tobb:disabled:hover {
	background: rgba(var(--enco-szoveg), .05);
	color: rgba(var(--enco-szoveg), .35);
}
.enco-ajanlo-tobb:disabled svg { opacity: .45; }
.enco-ajanlo-tobb:disabled:hover svg { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.enco-hasonlo.enco-hasonlo-gorgo { scroll-behavior: auto; }
}.dynamic-block.enco-iv,
.dynamic-block.enco-notch,
.dynamic-block.enco-szalag,
.dynamic-block.enco-lepcso,
.dynamic-block.enco-pakli,
.layout.enco-sect-ferde,
.dynamic-block.enco-sorok,
.dynamic-block.enco-uveg,
.layout.enco-sect-tiszta,
.layout.enco-sect-ejszaka,
.dynamic-block.enco-ajanlo-medal,
.dynamic-block.enco-ajanlo-sor,
.layout.enco-hr,
.layout.enco-hr-felul,
.layout.enco-hr-alul {
	--enco-kek: var(--c05, 0, 69, 140);
	--enco-narancs: var(--c03, 250, 99, 41);
	--enco-zold: 20, 140, 69;
	--enco-citrom: 250, 171, 51;
	--enco-szoveg: 15, 23, 42;
	--enco-ak: var(--enco-kek);
	--enco-minta-feher: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='72'%20viewBox='0%200%20240%2072'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-dasharray='2%2012'%3E%3Cpath%20d='M0%2012C48%202%2072%2022%20120%2012S192%2022%20240%2012'/%3E%3Cpath%20d='M0%2036C48%2046%2072%2026%20120%2036S192%2026%20240%2036'/%3E%3Cpath%20d='M0%2060C48%2050%2072%2070%20120%2060S192%2070%20240%2060'/%3E%3C/g%3E%3C/svg%3E");
	--enco-minta-kek: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='72'%20viewBox='0%200%20240%2072'%3E%3Cg%20fill='none'%20stroke='%2300458c'%20stroke-width='2'%20stroke-linecap='round'%20stroke-dasharray='2%2012'%3E%3Cpath%20d='M0%2012C48%202%2072%2022%20120%2012S192%2022%20240%2012'/%3E%3Cpath%20d='M0%2036C48%2046%2072%2026%20120%2036S192%2026%20240%2036'/%3E%3Cpath%20d='M0%2060C48%2050%2072%2070%20120%2060S192%2070%20240%2060'/%3E%3C/g%3E%3C/svg%3E");
	--enco-korok: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='600'%20viewBox='0%200%20600%20600'%3E%3Cg%20fill='none'%20stroke='%2300458c'%20stroke-width='2'%20stroke-linecap='round'%20stroke-dasharray='2%2014'%3E%3Ccircle%20cx='300'%20cy='300'%20r='40'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='64'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='88'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='112'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='136'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='160'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='184'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='208'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='232'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='256'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='280'/%3E%3C/g%3E%3C/svg%3E");
	/* a kézikönyv színaránya tömör sávokban: 10% narancs · 20% citrom · 40% zöld · 30% kék */
	--enco-arany: linear-gradient(to right,
		rgba(var(--enco-narancs), 1) 0 10%,
		rgba(var(--enco-citrom), 1) 10% 30%,
		rgba(var(--enco-zold), 1) 30% 70%,
		rgba(var(--enco-kek), 1) 70% 100%);
	--enco-racs: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='24'%20viewBox='0%200%2014%2024'%3E%3Cpath%20d='M1%206v12'%20fill='none'%20stroke='%2300458c'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E");
}

/* A kézikönyv színaránya (zöld 40% · kék 30% · citrom 20% · narancs 10%)
   tíz elemenként ismétlődő ciklusban. Egy felületen mindig egy szín. */
.enco-iv .dynamic-block-item:nth-child(10n+1),
.enco-szalag .dynamic-block-item:nth-child(10n+1),
.enco-lepcso .dynamic-block-item:nth-child(10n+1),
.enco-sorok .dynamic-block-item:nth-child(10n+1),
.enco-uveg .dynamic-block-item:nth-child(10n+1),
.enco-iv .dynamic-block-item:nth-child(10n+3),
.enco-szalag .dynamic-block-item:nth-child(10n+3),
.enco-lepcso .dynamic-block-item:nth-child(10n+3),
.enco-sorok .dynamic-block-item:nth-child(10n+3),
.enco-uveg .dynamic-block-item:nth-child(10n+3),
.enco-iv .dynamic-block-item:nth-child(10n+5),
.enco-szalag .dynamic-block-item:nth-child(10n+5),
.enco-lepcso .dynamic-block-item:nth-child(10n+5),
.enco-sorok .dynamic-block-item:nth-child(10n+5),
.enco-uveg .dynamic-block-item:nth-child(10n+5),
.enco-iv .dynamic-block-item:nth-child(10n+8),
.enco-szalag .dynamic-block-item:nth-child(10n+8),
.enco-lepcso .dynamic-block-item:nth-child(10n+8),
.enco-sorok .dynamic-block-item:nth-child(10n+8),
.enco-uveg .dynamic-block-item:nth-child(10n+8) { --enco-ak: var(--enco-zold); }
.enco-iv .dynamic-block-item:nth-child(10n+2),
.enco-szalag .dynamic-block-item:nth-child(10n+2),
.enco-lepcso .dynamic-block-item:nth-child(10n+2),
.enco-sorok .dynamic-block-item:nth-child(10n+2),
.enco-uveg .dynamic-block-item:nth-child(10n+2),
.enco-iv .dynamic-block-item:nth-child(10n+6),
.enco-szalag .dynamic-block-item:nth-child(10n+6),
.enco-lepcso .dynamic-block-item:nth-child(10n+6),
.enco-sorok .dynamic-block-item:nth-child(10n+6),
.enco-uveg .dynamic-block-item:nth-child(10n+6),
.enco-iv .dynamic-block-item:nth-child(10n+9),
.enco-szalag .dynamic-block-item:nth-child(10n+9),
.enco-lepcso .dynamic-block-item:nth-child(10n+9),
.enco-sorok .dynamic-block-item:nth-child(10n+9),
.enco-uveg .dynamic-block-item:nth-child(10n+9) { --enco-ak: var(--enco-kek); }
.enco-iv .dynamic-block-item:nth-child(10n+4),
.enco-szalag .dynamic-block-item:nth-child(10n+4),
.enco-lepcso .dynamic-block-item:nth-child(10n+4),
.enco-sorok .dynamic-block-item:nth-child(10n+4),
.enco-uveg .dynamic-block-item:nth-child(10n+4),
.enco-iv .dynamic-block-item:nth-child(10n+7),
.enco-szalag .dynamic-block-item:nth-child(10n+7),
.enco-lepcso .dynamic-block-item:nth-child(10n+7),
.enco-sorok .dynamic-block-item:nth-child(10n+7),
.enco-uveg .dynamic-block-item:nth-child(10n+7) { --enco-ak: var(--enco-citrom); }
.enco-iv .dynamic-block-item:nth-child(10n),
.enco-szalag .dynamic-block-item:nth-child(10n),
.enco-lepcso .dynamic-block-item:nth-child(10n),
.enco-sorok .dynamic-block-item:nth-child(10n),
.enco-uveg .dynamic-block-item:nth-child(10n) { --enco-ak: var(--enco-narancs); }

/* --- 7) HULLÁM: arculati mintázattal teli kék mező, üveglap-kártyák ----- */

/* --- 8) ÍV: körívekből épülő kártyák, arculati színhierarchiával -------- */
.dynamic-block.enco-iv {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
	gap: 1.5rem;
}
.enco-iv .ei-item {
	display: grid;
	grid-template-rows: auto auto;
	overflow: hidden;
	border-radius: 5rem 1.25rem 5rem 1.25rem;
	background: rgba(var(--enco-ak), 1);
	text-decoration: none;
	color: #fff;
	transition: transform .35s cubic-bezier(.2, .9, .25, 1), box-shadow .35s ease;
}
.enco-iv .ei-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 1.5rem 2.75rem -1.25rem rgba(6, 20, 40, .45);
}
.enco-iv .ei-media {
	grid-area: 1 / 1;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: rgba(var(--enco-ak), .5);
}
.enco-iv .ei-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(.2, .9, .25, 1);
}
.enco-iv .ei-item:hover .ei-media img { transform: scale(1.08); }
.enco-iv .ei-arc {                        /* a szín körív, ami a képre fut */
	grid-area: 2 / 1;
	align-self: stretch;
	z-index: 1;
	margin: -3.25rem -2px 0;
	background: rgba(var(--enco-ak), 1);
	border-radius: 55% 55% 0 0 / 3.25rem 3.25rem 0 0;
	transition: margin-top .4s cubic-bezier(.2, .9, .25, 1);
}
.enco-iv .ei-item:hover .ei-arc { margin-top: -4.5rem; }
.enco-iv .ei-body {
	grid-area: 2 / 1;
	z-index: 2;
	padding: .35rem 1.5rem 1.6rem;
	text-align: center;
}
.enco-iv .ei-title {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}
.enco-iv .ei-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: .45rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .92);
}
.enco-iv .ei-cta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: 1rem;
	padding: .45rem 1rem;
	border-radius: 2rem;
	background: rgba(255, 255, 255, .16);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: background-color .25s ease, color .25s ease;
}
.enco-iv .ei-cta svg { width: .95rem; height: .95rem; fill: currentColor; transition: transform .25s ease; }
.enco-iv .ei-item:hover .ei-cta { background: #fff; color: rgba(var(--enco-ak), 1); }
.enco-iv .ei-item:hover .ei-cta svg { transform: translateX(.25rem); }
@media (max-width: 575.98px) {
	.enco-iv .ei-item { border-radius: 3.5rem 1rem 3.5rem 1rem; }
}

/* --- 9) NOTCH: az arculati sarok-kivágás, benne a továbblépés gombja ---- */
.dynamic-block.enco-notch {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr));
	gap: 1.75rem;
}
.enco-notch .en-item {
	--en-gomb: 2.8rem;          /* a gomb átmérője */
	--en-jobb: .15rem;          /* a gomb távolsága a kártya jobb szélétől */
	--en-res: .35rem;           /* egyenletes rés a gomb körül */
	position: relative;
	display: block;
	height: 100%;
	text-decoration: none;
	color: rgba(var(--enco-szoveg), 1);
}
.enco-notch .en-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 1.25rem;
	background: rgba(var(--enco-kek), .055);
	box-shadow: inset 0 0 0 1px rgba(var(--enco-kek), .14), 0 .75rem 2rem -1rem rgba(6, 20, 40, .22);
	transition: box-shadow .3s ease;
}
.enco-notch .en-item:hover .en-card {
	box-shadow: inset 0 0 0 1px rgba(var(--enco-kek), .35), 0 1.25rem 2.5rem -1rem rgba(6, 20, 40, .4);
}
.enco-notch .en-media {
	position: relative;
	display: block;
	flex: 0 0 auto;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 1.25rem 1.25rem 0 0;   /* a maszk miatt itt kell a lekerekítés */
	background: rgba(var(--enco-kek), .08);
	/* Az arculati bevágás a gombbal KONCENTRIKUS: azonos középpont, a sugár
	   a gomb sugara + a rés, így a rés körben mindenhol egyforma. */
	-webkit-mask-image: radial-gradient(circle calc(var(--en-gomb) / 2 + var(--en-res))
		at calc(100% - var(--en-jobb) - var(--en-gomb) / 2) 100%, transparent 98%, #000 100%);
	mask-image: radial-gradient(circle calc(var(--en-gomb) / 2 + var(--en-res))
		at calc(100% - var(--en-jobb) - var(--en-gomb) / 2) 100%, transparent 98%, #000 100%);
}
.enco-notch .en-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(.2, .9, .25, 1);
}
.enco-notch .en-item:hover .en-media img { transform: scale(1.06); }
.enco-notch .en-media::after {             /* arculati mintázat a kép alján */
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 4.5rem;
	background-image: var(--enco-minta-feher);
	background-repeat: repeat;
	-webkit-mask-image: linear-gradient(to top, #000, transparent);
	mask-image: linear-gradient(to top, #000, transparent);
	opacity: .55;
	pointer-events: none;
}
.enco-notch .en-body {
	position: relative;
	display: block;
	flex: 1 1 auto;
	padding: 1.1rem 1.25rem 1.5rem;
}
.enco-notch .en-kicker {
	display: block;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(var(--enco-narancs), 1);
}
.enco-notch .en-title {
	display: block;
	margin-top: .35rem;
	padding-right: 3rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
	transition: color .25s ease;
}
.enco-notch .en-item:hover .en-title { color: rgba(var(--enco-kek), 1); }
.enco-notch .en-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: .4rem;
	font-size: .875rem;
	line-height: 1.5;
	color: rgba(var(--enco-szoveg), .62);
}
.enco-notch .en-go {                       /* a bevágásban ül, a kép alsó élén */
	position: absolute;
	top: calc(var(--en-gomb) / -2);
	right: var(--en-jobb);
	display: grid;
	place-items: center;
	width: var(--en-gomb);
	height: var(--en-gomb);
	border-radius: 50%;
	background: rgba(var(--enco-kek), 1);
	color: #fff;
	transition: background-color .25s ease, transform .3s cubic-bezier(.2, .9, .25, 1);
}
.enco-notch .en-go svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.enco-notch .en-item:hover .en-go {
	background: rgba(var(--enco-narancs), 1);
	transform: scale(1.06);
}

/* --- 10) SZALAG: nyíló színpanelek, egy felületen egy arculati szín ----- */
.dynamic-block.enco-szalag {
	display: flex;
	gap: .5rem;
	height: 21rem;
}
.enco-szalag .et-item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	border-radius: 1.25rem;
	text-decoration: none;
	color: #fff;
	isolation: isolate;
	transition: flex-grow .5s cubic-bezier(.2, .9, .25, 1);
}
.enco-szalag .et-item:hover,
.enco-szalag .et-item:focus-visible { flex-grow: 2.6; }
.enco-szalag .et-media { position: absolute; inset: 0; display: block; }
.enco-szalag .et-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.enco-szalag .et-ink {
	position: absolute;
	inset: 0;
	/* felül átlátszóbb, hogy a fotó látszódjon, alul tömör szín a szöveg alá */
	background-image: var(--enco-minta-feher),
		linear-gradient(to top, rgba(var(--enco-ak), .94) 0%, rgba(var(--enco-ak), .78) 30%, rgba(var(--enco-ak), .34) 66%, rgba(var(--enco-ak), .12) 100%);
	background-repeat: repeat, no-repeat;
	background-blend-mode: soft-light, normal;
	transition: opacity .45s ease;
}
.enco-szalag .et-item:hover .et-ink { opacity: .72; }
.enco-szalag .et-tag {
	position: absolute;
	top: 1.1rem;
	right: 1.05rem;
	writing-mode: vertical-rl;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}
.enco-szalag .et-body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.25rem 2.5rem 1.35rem 1.35rem;
	isolation: isolate;
}
.enco-szalag .et-body::before {        /* a kézikönyv szerinti fekete sötétítés */
	content: "";
	position: absolute;
	inset: -3.5rem 0 0 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}
.enco-szalag .et-title {
	display: block;
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.22;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.enco-szalag .et-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: .4rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .88);
	max-height: 0;
	opacity: 0;
	transition: max-height .5s cubic-bezier(.2, .9, .25, 1), opacity .35s ease;
}
.enco-szalag .et-item:hover .et-desc { max-height: 4.5rem; opacity: 1; }
.enco-szalag .et-cta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: 0;
	padding: 0 .9rem;
	max-height: 0;
	overflow: hidden;
	border-radius: 2rem;
	background: #fff;
	color: rgba(var(--enco-ak), 1);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: 0;
	transition: max-height .4s cubic-bezier(.2, .9, .25, 1), margin-top .4s cubic-bezier(.2, .9, .25, 1), padding .4s ease, opacity .3s ease .05s;
}
.enco-szalag .et-cta svg { width: .9rem; height: .9rem; fill: currentColor; }
.enco-szalag .et-item:hover .et-cta {
	max-height: 2.5rem;
	margin-top: .8rem;
	padding: .4rem .9rem;
	opacity: 1;
}
@media (max-width: 991.98px) {
	.dynamic-block.enco-szalag { flex-direction: column; height: auto; gap: .75rem; }
	.enco-szalag .et-item { flex: 0 0 auto; height: 9.5rem; }
	.enco-szalag .et-item:hover,
.enco-szalag .et-item:focus-visible { flex-grow: 0; }
	.enco-szalag .et-desc { max-height: 3rem; opacity: 1; -webkit-line-clamp: 2; }
	.enco-szalag .et-cta { display: none; }
	.enco-szalag .et-ink { opacity: .92; }
}

/* --- 11) LÉPCSŐ: eltolt rács koncentrikus arculati mintázat előtt ------- */
.dynamic-block.enco-lepcso {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	column-gap: 1.25rem;
	row-gap: 8.5rem;
	padding-bottom: 7rem;
	counter-reset: encolep;
	isolation: isolate;
}
.dynamic-block.enco-lepcso::before {          /* koncentrikus szaggatott körök */
	content: "";
	position: absolute;
	top: -6rem;
	right: -6rem;
	width: 34rem;
	height: 34rem;
	max-width: 100%;
	background: var(--enco-korok) no-repeat center / contain;
	opacity: .45;
	pointer-events: none;
	z-index: -1;
}
.enco-lepcso .el-item {
	--el-y: 0rem;
	--el-h: 0rem;
	position: relative;
	display: block;
	text-decoration: none;
	color: rgba(var(--enco-szoveg), 1);
	transform: translateY(calc(var(--el-y) + var(--el-h)));
	transition: transform .35s cubic-bezier(.2, .9, .25, 1);
}
.enco-lepcso .el-item:nth-child(4n+2) { --el-y: 2.25rem; }
.enco-lepcso .el-item:nth-child(4n+3) { --el-y: 4.5rem; }
.enco-lepcso .el-item:nth-child(4n+4) { --el-y: 6.75rem; }
.enco-lepcso .el-item:hover { --el-h: -.6rem; }
.enco-lepcso .el-num {
	display: block;
	counter-increment: encolep;
	margin-bottom: .35rem;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: rgba(var(--enco-ak), .45);
	transition: color .3s ease;
}
.enco-lepcso .el-num::before { content: counter(encolep, decimal-leading-zero); }
.enco-lepcso .el-item:hover .el-num { color: rgba(var(--enco-ak), 1); }
.enco-lepcso .el-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border-radius: 1rem 1rem 1rem 3rem;
	background: rgba(var(--enco-kek), .08);
}
.enco-lepcso .el-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(.2, .9, .25, 1);
}
.enco-lepcso .el-item:hover .el-media img { transform: scale(1.07); }
.enco-lepcso .el-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(var(--enco-ak), .55) 0%, rgba(var(--enco-ak), 0) 55%);
	opacity: 0;
	transition: opacity .35s ease;
}
.enco-lepcso .el-item:hover .el-media::after { opacity: 1; }
.enco-lepcso .el-body { display: block; padding: .85rem .15rem 0; }
.enco-lepcso .el-title {
	display: block;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.3;
	transition: color .25s ease;
}
.enco-lepcso .el-item:hover .el-title { color: rgba(var(--enco-ak), 1); }
.enco-lepcso .el-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: .3rem;
	font-size: .8125rem;
	line-height: 1.45;
	color: rgba(var(--enco-szoveg), .6);
}
.enco-lepcso .el-cta {
	display: inline-grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	margin-top: .6rem;
	border-radius: 50%;
	background: rgba(var(--enco-ak), .1);
	color: rgba(var(--enco-ak), 1);
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.enco-lepcso .el-cta svg { width: .95rem; height: .95rem; fill: currentColor; }
.enco-lepcso .el-item:hover .el-cta {
	background: rgba(var(--enco-ak), 1);
	color: #fff;
	transform: translateX(.2rem);
}
@media (max-width: 991.98px) {
	.dynamic-block.enco-lepcso {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 3.5rem;
		padding-bottom: 2.5rem;
	}
	.enco-lepcso .el-item:nth-child(4n+2),
.enco-lepcso .el-item:nth-child(4n+3),
.enco-lepcso .el-item:nth-child(4n+4) { --el-y: 0rem; }
	.enco-lepcso .el-item:nth-child(2n) { --el-y: 1.75rem; }
	.dynamic-block.enco-lepcso::before { top: -3rem; right: -8rem; width: 24rem; height: 24rem; }
}
@media (prefers-reduced-motion: reduce) {
	.enco-iv .ei-item,
.enco-szalag .et-item,
.enco-lepcso .el-item,
.enco-notch .en-go { transition: none; }
}

/* ==========================================================================
   SECTION + DINAMIKUS BLOKK PÁROSOK (a section maga is egyedi)
   14) ablak · 15) vonal · 16) pakli · 17) szamlalo · 18) hasab
   ========================================================================== */

/* --- 16) SECTION: ferdén vágott világos sáv ----------------------------- */
.layout.enco-sect-ferde {
	position: relative;
	background: linear-gradient(115deg, rgba(var(--enco-kek), .09) 0%, rgba(var(--enco-zold), .07) 100%);
	-webkit-clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 calc(100% - 2.5rem));
	clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 calc(100% - 2.5rem));
}

/* --- 16b) BLOKK: egymásra csúsztatott, elforgatott kártyapakli ---------- */
.dynamic-block.enco-pakli {
	display: flex;
	justify-content: center;
	padding: 1.5rem 0 1rem;
}
.enco-pakli .ep-item {
	flex: 0 1 19rem;
	min-width: 0;
	text-decoration: none;
	color: rgba(var(--enco-szoveg), 1);
}
/* a lapok töltsék ki a sor magasságát: a 4 soros leírás-klip miatt
   különben eltérő magasságúak lennének a kártyák */
.enco-pakli .ep-item { display: flex; }
.enco-pakli .ep-item + .ep-item { margin-left: -2.75rem; }
.enco-pakli .ep-lap {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	overflow: hidden;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 1rem 2.25rem -1rem rgba(6, 20, 40, .45), inset 0 0 0 1px rgba(0, 0, 0, .08);
	transform: rotate(var(--ep-dol, 0deg));
	transform-origin: 50% 90%;
	transition: transform .4s cubic-bezier(.2, .9, .25, 1), box-shadow .3s ease;
}
.enco-pakli .ep-item:nth-child(odd) { --ep-dol: -3.5deg; }
.enco-pakli .ep-item:nth-child(even) { --ep-dol: 3deg; }
.enco-pakli .ep-item:nth-child(3n) { --ep-dol: -1.5deg; }
.enco-pakli .ep-item:hover { position: relative; z-index: 3; }
.enco-pakli .ep-item:hover .ep-lap {
	transform: rotate(0deg) translateY(-.6rem) scale(1.04);
	box-shadow: 0 1.75rem 3rem -1rem rgba(6, 20, 40, .5), inset 0 0 0 1px rgba(var(--enco-kek), .3);
}
.enco-pakli .ep-media { display: block; overflow: hidden; aspect-ratio: 5 / 4; background: rgba(var(--enco-kek), .08); flex: 0 0 auto; }
.enco-pakli .ep-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.enco-pakli .ep-body { position: relative; display: block; flex: 1 1 auto; padding: 1rem 1rem 1.2rem; }
.enco-pakli .ep-title {
	display: block;
	padding-right: 2rem;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.3;
}
.enco-pakli .ep-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: .3rem;
	font-size: .8125rem;
	line-height: 1.45;
	color: rgba(var(--enco-szoveg), .6);
}
.enco-pakli .ep-cta {
	position: absolute;
	top: .8rem;
	right: .9rem;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: rgba(var(--enco-kek), .1);
	color: rgba(var(--enco-kek), 1);
	transition: background-color .25s ease, color .25s ease;
}
.enco-pakli .ep-cta svg { width: .9rem; height: .9rem; fill: currentColor; }
.enco-pakli .ep-item:hover .ep-cta { background: rgba(var(--enco-narancs), 1); color: #fff; }
@media (max-width: 991.98px) {
	.dynamic-block.enco-pakli { flex-wrap: wrap; gap: 1rem; }
	.enco-pakli .ep-item { flex: 1 1 13rem; }
	.enco-pakli .ep-item + .ep-item { margin-left: 0; }
	.enco-pakli .ep-lap { transform: none; }
}

/* --- 17) SECTION: kiemelt fehér lap, tetején az arculati színaránnyal --- */

/* --- 17b) BLOKK: nagy sorszámok, kép nélkül ----------------------------- */

/* Pakli: a rákövetkező lap takarása miatt nagyobb jobb térköz a szövegnek */
.enco-pakli .ep-body { padding-right: 3.4rem; }
@media (max-width: 991.98px) {
	.enco-pakli .ep-body { padding-right: 2.5rem; }
}

/* ==========================================================================
   SECTION + BLOKK PÁROSOK – 2. kör (rétegzett, „fizikai” kártyák)
   19) legyezo · 20) fiokok · 21) fulek · 22) lehuzo · 23) flip
   ========================================================================== */

/* --- 19) SECTION: sötét színpad, alulról jövő fénnyel ------------------- */

/* --- 19b) BLOKK: ívben álló legyező, hoverre kiegyenesedik -------------- */

/* öt kártyás ívre hangolva, ötösével ismétlődik */

/* --- 20) SECTION: keretes mező ------------------------------------------ */

/* --- 20b) BLOKK: függőleges harmonika („fiókok”) ------------------------ */

/* --- 21) SECTION: arculati rácsminta, „jegyzetlap” ---------------------- */

/* --- 21b) BLOKK: dossziéfüles kártyák ----------------------------------- */

/* --- 22) SECTION: világos mező, széles rácsmintával a szélén ------------ */

/* --- 22b) BLOKK: lecsúszó színes fedőlap, a cím végig látszik --------- */

/* --- 23) SECTION: világos mező, alul arculati színpadlóval -------------- */

/* --- 23b) BLOKK: átforduló kártyák -------------------------------------- */

/* Érintős eszközön nincs hover: a fiókok tartalma és a lehúzó képe
   ne maradjon elérhetetlen. */

/* ==========================================================================
   SECTION + BLOKK PÁROSOK – 3. kör
   24) boritek · 25) redony · 26) polaroid · 27) jegy · 28) matrica
   ========================================================================== */

/* --- 24) SECTION: meleg, halvány papírmező --------------------------- */

/* --- 24b) BORÍTÉK: a levél a zsebből csúszik ki ------------------------- */

/* --- 25) SECTION: halvány függőleges színsávok ------------------------- */

/* --- 25b) REDŐNY: lamellák nyílnak szét --------------------------------- */

/* --- 26) SECTION: sötét tábla ------------------------------------------ */

/* --- 27) SECTION: perforált szelvény-mező ------------------------------ */

/* --- 28) SECTION: pöttyös mező ----------------------------------------- */

/* ==========================================================================
   SECTION + BLOKK PÁROSOK – 3. kör, második fele
   29) domino · 30) retegek · 31) szalagcim · 32) konyv · 33) szeletek
   ========================================================================== */

/* --- 29) SECTION: sínek közé fogott mező ------------------------------- */

/* --- 29b) DOMINÓ: szorosan álló csempék, hoverre kidől ----------------- */

/* --- 30) SECTION: mélységérzetű mező ----------------------------------- */

/* --- 30b) RÉTEGEK: mögötte két elcsúsztatott színes lap ---------------- */

/* --- 31) SECTION: átlós csíkos mező ------------------------------------ */

/* --- 31b) SZALAGCÍM: átlós szalag a kártya sarkában -------------------- */

/* --- 32) SECTION: polc, alul vetett árnyékkal -------------------------- */

/* --- 32b) KÖNYV: térben elfordított borító, gerinccel ------------------ */

/* --- 33) SECTION: ferdén vágott alsó él -------------------------------- */

/* Érintős eszközön a 3. kör hover-tartalmai is elérhetők maradnak */

/* Telefonon a kis képarányú lapok két oszlopban férnek el jól */

/* ==========================================================================
   SECTION + BLOKK PÁROSOK – 4. kör (Stripe-ihletésű: hajszálvékony keretek,
   cím felül, aszimmetria, mesh-színátmenetek, vízszintes vásznak)
   34) karuszel · 35) idezo · 36) panel · 37) sorok · 38) gradiens
   ========================================================================== */

/* --- 34) SECTION: széles vászon a kifutó karuszelnek -------------------- */

/* a JS által beszúrt vezérlő */

/* --- 35) SECTION: halvány mező a teljes szélességű diáknak -------------- */

/* --- 35b) IDÉZŐ: egész szélességű diák, pontokkal ---------------------- */

/* a JS által beszúrt pontok */

/* --- 36) SECTION: nagyon halvány szürkéskék mező ------------------------ */

/* --- 37) SECTION: tiszta fehér, hajszálvonalak közt --------------------- */
.layout.enco-sect-tiszta {
	background: #fff;
	border-top: 1px solid rgba(var(--enco-szoveg), .1);
	border-bottom: 1px solid rgba(var(--enco-szoveg), .1);
}

/* --- 37b) SOROK: hajszálrács, szöveg és semmi más ---------------------- */
.dynamic-block.enco-sorok {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 0;
}
.enco-sorok .eso-item {
	display: block;
	padding: 1.4rem 1.5rem 1.6rem;
	border-top: 2px solid rgba(var(--enco-ak), 1);
	box-shadow: inset -1px 0 0 rgba(var(--enco-szoveg), .08);
	text-decoration: none;
	color: rgba(var(--enco-szoveg), 1);
	transition: background-color .25s ease;
}
.enco-sorok .eso-item:hover { background: rgba(var(--enco-ak), .04); }
.enco-sorok .eso-title {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	transition: color .25s ease;
}
.enco-sorok .eso-item:hover .eso-title { color: rgba(var(--enco-ak), 1); }
.enco-sorok .eso-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: .45rem;
	font-size: .875rem;
	line-height: 1.55;
	color: rgba(var(--enco-szoveg), .58);
}
.enco-sorok .eso-cta {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-top: .8rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(var(--enco-ak), 1);
}
.enco-sorok .eso-cta svg { width: .9rem; height: .9rem; fill: currentColor; transition: transform .25s ease; }
.enco-sorok .eso-item:hover .eso-cta svg { transform: translateX(.25rem); }

/* --- 38) SECTION: halvány mesh-színátmenet ------------------------------ */

/* ==========================================================================
   4. kör, második fele
   39) sztori · 40) ikonsor · 41) uveg · 42) ferdekartya · 43) szelesbanner
   ========================================================================== */

/* --- 39) SECTION: világosszürke mező ------------------------------------ */

/* --- 40) SECTION: keskeny, levegős mező --------------------------------- */

/* --- 41) SECTION: éjszakai mező fényekkel ------------------------------- */
.layout.enco-sect-ejszaka {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(45rem 24rem at 10% 0%, rgba(var(--enco-kek), .55), transparent 65%),
		radial-gradient(40rem 22rem at 90% 80%, rgba(var(--enco-zold), .35), transparent 65%),
		#07162c;
	color: #fff;
}
.layout.enco-sect-ejszaka > .container { position: relative; z-index: 1; }

/* --- 41b) ÜVEG: áttetsző lapok világító kerettel ----------------------- */
.dynamic-block.enco-uveg {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
}
.enco-uveg .euv-item {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 1.25rem 1.25rem 1.4rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, .07);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	text-decoration: none;
	color: #fff;
	transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.enco-uveg .euv-item:hover {
	transform: translateY(-3px);
	background: rgba(255, 255, 255, .12);
	box-shadow: inset 0 0 0 1px rgba(var(--enco-ak), .8), 0 1rem 2.5rem -1rem rgba(0, 0, 0, .6);
}
.enco-uveg .euv-fenyek {
	position: absolute;
	top: -4rem;
	right: -4rem;
	width: 12rem;
	height: 12rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--enco-ak), .55), transparent 70%);
	opacity: .8;
	transition: opacity .35s ease, transform .5s ease;
	pointer-events: none;
}
.enco-uveg .euv-item:hover .euv-fenyek { opacity: 1; transform: scale(1.15); }
.enco-uveg .euv-body { position: relative; display: block; }
.enco-uveg .euv-title { display: block; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.enco-uveg .euv-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: .4rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .72);
}
.enco-uveg .euv-cta {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-top: .85rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
}
.enco-uveg .euv-cta svg { width: .9rem; height: .9rem; fill: currentColor; transition: transform .25s ease; }
.enco-uveg .euv-item:hover .euv-cta svg { transform: translateX(.25rem); }

/* --- 42) SECTION: döntött háttércsík ------------------------------------ */

/* --- 42b) FERDE KÁRTYA: szöveg és kép ferde határral ------------------- */

/* --- 43) SECTION: nagy, levegős mező ------------------------------------ */

/* --- 43b) SZÉLES BANNER: kilógó képpel --------------------------------- */

/* Kép nélküli oldalnál ne az alt-szöveg és a törött kép ikonja látszódjon,
   hanem a kártya saját színe. */
.dynamic-block[class*="enco-"] img { color: transparent; }

/* ==========================================================================
   SECTION + BLOKK PÁROSOK – 5. kör (Stripe aloldalak mintái)
   44) valto · 45) pipas · 46) mockup · 47) statlead · 48) logofal · 49) szegely
   ========================================================================== */

/* --- 44) SECTION: két hasábra osztott mező ----------------------------- */

/* --- 44b) VÁLTÓ: bal oldalt a lista, jobbra az előnézet ---------------- */

/* --- 45) SECTION: tiszta fehér, felül kicker-vonallal ------------------ */

/* --- 45b) PIPÁS: ikonos jellemző-rács ---------------------------------- */

/* --- 46) SECTION: hűvös üveglap-mező ----------------------------------- */

/* --- 47) SECTION: hajszálvonalak közti mező ---------------------------- */

/* --- 48) SECTION: halvány szürke mező ---------------------------------- */

/* --- 48b) LOGÓFAL: egyforma csempék, hoverre színesednek --------------- */

/* --- 49) SECTION: sötétkék mező ---------------------------------------- */

/* --- 49b) SZEGÉLY: színátmenetes keretű kártyák ------------------------ */

/* ==========================================================================
   5. kör, második fele
   50) nagyidezet · 51) arlap · 52) kettos · 53) arnyalat · 54) kiemelo · 55) csik
   ========================================================================== */

/* --- 50) SECTION: kiemelt színes mező ---------------------------------- */

/* --- 50b) NAGY IDÉZET: tipográfia-központú kiemelések ------------------ */

/* --- 51) SECTION: csomagválasztó mező ---------------------------------- */

/* --- 51b) ÁRLAP: csomagkártyák, a másodikkal kiemelve ------------------ */

/* --- 52) SECTION: dokumentum-szerű, keskeny mező ----------------------- */

/* --- 52b) KETTŐS: cím balra, leírás jobbra, hajszálvonalakkal ---------- */

/* --- 53) SECTION: árnyalat-skála mező ---------------------------------- */

/* --- 53b) ÁRNYALAT: a kézikönyv 80/60/40/20/5%-os árnyalatai ----------- */

/* --- 54) SECTION: galéria-mező ----------------------------------------- */

/* --- 54b) KIEMELŐ: egy nagy + több kicsi -------------------------------- */

/* --- 55) SECTION: teljes szélességű szalagpálya ------------------------ */

/* --- 55b) CSÍK: folyamatosan úszó szalag ------------------------------- */

/* ==========================================================================
   AJÁNLÓ („hasonló oldalak") – tíz koncepció
   Mind önállóan működik, a klasszikus enco-hasonlo keret nélkül is.
   ========================================================================== */

/* --- A1) MEDÁL: kerek kép + cím + leírás ------------------------------- */
.dynamic-block.enco-ajanlo-medal { display: flex; flex-direction: column; }
.enco-ajanlo-medal .am-item {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	align-items: center;
	gap: .85rem;
	padding: .7rem .25rem;
	border-bottom: 1px solid rgba(var(--enco-szoveg), .09);
	text-decoration: none;
	color: rgba(var(--enco-szoveg), 1);
	transition: background-color .2s ease;
}
.enco-ajanlo-medal .am-item:last-child { border-bottom: 0; }
.enco-ajanlo-medal .am-item:hover { background: rgba(var(--enco-kek), .04); }
.enco-ajanlo-medal .am-medal {
	display: block;
	width: 3rem;
	height: 3rem;
	overflow: hidden;
	border-radius: 50%;
	background: rgba(var(--enco-kek), .1);
	box-shadow: 0 0 0 2px rgba(var(--enco-kek), .18);
	transition: box-shadow .25s ease;
}
.enco-ajanlo-medal .am-item:hover .am-medal { box-shadow: 0 0 0 2px rgba(var(--enco-narancs), 1); }
.enco-ajanlo-medal .am-medal img { display: block; width: 100%; height: 100%; object-fit: cover; }
.enco-ajanlo-medal .am-title { display: block; font-size: .875rem; font-weight: 700; line-height: 1.3; }
.enco-ajanlo-medal .am-item:hover .am-title { color: rgba(var(--enco-kek), 1); }
.enco-ajanlo-medal .am-desc {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: .15rem;
	font-size: .75rem;
	line-height: 1.4;
	color: rgba(var(--enco-szoveg), .55);
}

/* --- A4) SOR: minimál sorok beúszó nyíllal ----------------------------- */
.dynamic-block.enco-ajanlo-sor { display: flex; flex-direction: column; }
.enco-ajanlo-sor .as-item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1.25rem;
	align-items: center;
	gap: .5rem;
	padding: .8rem .25rem .8rem 0;
	border-bottom: 1px solid rgba(var(--enco-szoveg), .09);
	text-decoration: none;
	color: rgba(var(--enco-szoveg), 1);
	transition: padding-left .25s ease;
}
.enco-ajanlo-sor .as-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: .8rem;
	bottom: .8rem;
	width: 2px;
	border-radius: 2px;
	background: rgba(var(--enco-kek), 1);
	transform: scaleY(0);
	transform-origin: 50% 50%;
	transition: transform .3s cubic-bezier(.2, .9, .25, 1);
}
.enco-ajanlo-sor .as-item:hover { padding-left: .7rem; }
.enco-ajanlo-sor .as-item:hover::before { transform: none; }
.enco-ajanlo-sor .as-title { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.enco-ajanlo-sor .as-item:hover .as-title { color: rgba(var(--enco-kek), 1); }
.enco-ajanlo-sor .as-nyil { display: grid; place-items: center; opacity: 0; transform: translateX(-.3rem); transition: opacity .25s ease, transform .25s ease; }
.enco-ajanlo-sor .as-nyil svg { width: 1rem; height: 1rem; fill: rgba(var(--enco-kek), 1); }
.enco-ajanlo-sor .as-item:hover .as-nyil { opacity: 1; transform: none; }

/* ==========================================================================
   ENCO elválasztó csík – a kézikönyv 10 · 20 · 40 · 30 színaránya
   (narancs · citrom · zöld · kék, tömör sávokban)
   .enco-hr        – önálló section: maga a mező a csík
   .enco-hr-felul  – csík egy meglévő mező tetején
   .enco-hr-alul   – csík egy meglévő mező alján
   ========================================================================== */
.layout.enco-hr {
	height: var(--enco-sav, .5rem);
	min-height: 0;
	padding: 0;
	background: var(--enco-arany);
	overflow: hidden;
}
.layout.enco-hr > .container,
.layout.enco-hr > .background-image-source,
.layout.enco-hr > .background-video-source { display: none; }

.layout.enco-hr-felul,
.layout.enco-hr-alul { position: relative; }
.layout.enco-hr-felul::before,
.layout.enco-hr-alul::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--enco-sav, .5rem);
	background: var(--enco-arany);
}
.layout.enco-hr-felul::before { top: 0; }
.layout.enco-hr-alul::after { bottom: 0; }

/* ==========================================================================
   ▼▼▼  TIPOGRÁFIA – az arculati kézikönyv szerint (2026-09-24)  ▼▼▼
   A pt-értékek 1:1 px-ben. FIX pontok a kézikönyvből / a megrendeléstől:
     Cím ................. 46 / 55   → H2 és .fs-1
     Bekezdési cím ....... 29 / 35   → H3 és .fs-3
     Kenyérszöveg ........ 18 / 29   → sima szöveg és .fs-6 (20 px térköz előtte)
     fs-7 ................ 15 / 24
     Megjegyzés .......... 13 / 21   → .fs-8
   A köztes fokozatok (H1, H4, H5, H6, fs-2, fs-4, fs-5, fs-9) ezekből
   vannak arányosan levezetve.  A betűcsaládot ez a blokk nem érinti.
   ========================================================================== */

/* --- fs-skála (mindig erősebb, mint a natív címméret) -------------------- */
.fs-1, .fs-1 > p { font-size: 2.875rem !important;  line-height: 3.4375rem !important; }  /* 46 / 55 */
.fs-2, .fs-2 > p { font-size: 2.25rem !important;   line-height: 2.75rem !important; }    /* 36 / 44 */
.fs-3, .fs-3 > p { font-size: 1.8125rem !important; line-height: 2.1875rem !important; }  /* 29 / 35 */
.fs-4, .fs-4 > p { font-size: 1.5rem !important;    line-height: 1.9375rem !important; }  /* 24 / 31 */
.fs-5, .fs-5 > p { font-size: 1.3125rem !important; line-height: 1.75rem !important; }    /* 21 / 28 */
.fs-6, .fs-6 > p { font-size: 1.125rem !important;  line-height: 1.8125rem !important; }  /* 18 / 29 */
.fs-7, .fs-7 > p { font-size: .9375rem !important;  line-height: 1.5rem !important; }     /* 15 / 24 */
.fs-8, .fs-8 > p { font-size: .8125rem !important;  line-height: 1.3125rem !important; }  /* 13 / 21 */
.fs-9, .fs-9 > p { font-size: .75rem !important;    line-height: 1.1875rem !important; }  /* 12 / 19 */

/* --- címsorok: csak ott, ahol nincs kézzel adott fs-* méret -------------- */
h1:not([class*="fs-"]), .h1:not([class*="fs-"]) { font-size: 3.5rem;    line-height: 4.125rem; }   /* 56 / 66 */
h2:not([class*="fs-"]), .h2:not([class*="fs-"]) { font-size: 2.875rem;  line-height: 3.4375rem; }  /* 46 / 55 */
h3:not([class*="fs-"]), .h3:not([class*="fs-"]) { font-size: 1.8125rem; line-height: 2.1875rem; }  /* 29 / 35 */
h4:not([class*="fs-"]), .h4:not([class*="fs-"]) { font-size: 1.5rem;    line-height: 1.9375rem; }  /* 24 / 31 */
h5:not([class*="fs-"]), .h5:not([class*="fs-"]) { font-size: 1.3125rem; line-height: 1.75rem; }    /* 21 / 28 */
h6:not([class*="fs-"]), .h6:not([class*="fs-"]) { font-size: 1.125rem;  line-height: 1.5rem; }     /* 18 / 24 */

/* --- kenyérszöveg: 18 / 29, 20 px térköz a bekezdések előtt -------------- */
section.layout article:not([class*="fs-"]),
section.layout article:not([class*="fs-"]) p,
section.layout p:not([class*="fs-"]):not([class*="display-"]) {
	font-size: 1.125rem;
	line-height: 1.8125rem;
}
section.layout article:not([class*="fs-"]) p + p,
section.layout figure[data-type="article"] + figure[data-type="article"] > article:not([class*="fs-"]) {
	margin-top: 1.25rem;                 /* 20 px */
}

/* --- display-* (hero-címek) a skálához igazítva -------------------------- */
.display-1 { font-size: 4.5rem !important;  line-height: 5.25rem !important; }   /* 72 / 84 */
.display-2 { font-size: 4rem !important;    line-height: 4.75rem !important; }   /* 64 / 76 */
.display-3 { font-size: 3.5rem !important;  line-height: 4.125rem !important; }  /* 56 / 66 */
.display-4 { font-size: 3.125rem !important; line-height: 3.75rem !important; }  /* 50 / 60 */
.display-5 { font-size: 2.875rem !important; line-height: 3.4375rem !important; }/* 46 / 55 – a kézikönyv címmérete */
.display-6 { font-size: 2.25rem !important; line-height: 2.75rem !important; }   /* 36 / 44 */

/* --- telefon és tablet: a nagy fokozatok arányosan kisebbek ------------- */
@media (max-width: 991.98px) {
	.fs-1, .fs-1 > p { font-size: 2rem !important;      line-height: 2.375rem !important; }   /* 32 / 38 */
	.fs-2, .fs-2 > p { font-size: 1.75rem !important;   line-height: 2.125rem !important; }   /* 28 / 34 */
	.fs-3, .fs-3 > p { font-size: 1.5rem !important;    line-height: 1.875rem !important; }   /* 24 / 30 */
	.fs-4, .fs-4 > p { font-size: 1.3125rem !important; line-height: 1.6875rem !important; }  /* 21 / 27 */
	.fs-5, .fs-5 > p { font-size: 1.1875rem !important; line-height: 1.5625rem !important; }  /* 19 / 25 */
	.fs-6, .fs-6 > p { font-size: 1.0625rem !important; line-height: 1.6875rem !important; }  /* 17 / 27 */

	h1:not([class*="fs-"]), .h1:not([class*="fs-"]) { font-size: 2.25rem;  line-height: 2.75rem; }    /* 36 / 44 */
	h2:not([class*="fs-"]), .h2:not([class*="fs-"]) { font-size: 2rem;     line-height: 2.375rem; }   /* 32 / 38 */
	h3:not([class*="fs-"]), .h3:not([class*="fs-"]) { font-size: 1.5rem;   line-height: 1.875rem; }   /* 24 / 30 */
	h4:not([class*="fs-"]), .h4:not([class*="fs-"]) { font-size: 1.3125rem; line-height: 1.6875rem; } /* 21 / 27 */

	section.layout article:not([class*="fs-"]),
	section.layout article:not([class*="fs-"]) p,
	section.layout p:not([class*="fs-"]):not([class*="display-"]) { font-size: 1.0625rem; line-height: 1.6875rem; }

	.display-1 { font-size: 2.75rem !important; line-height: 3.25rem !important; }   /* 44 / 52 */
	.display-2 { font-size: 2.5rem !important;  line-height: 3rem !important; }      /* 40 / 48 */
	.display-3 { font-size: 2.25rem !important; line-height: 2.75rem !important; }   /* 36 / 44 */
	.display-4 { font-size: 2.125rem !important; line-height: 2.5625rem !important; }/* 34 / 41 */
	.display-5 { font-size: 2rem !important;    line-height: 2.375rem !important; }  /* 32 / 38 */
	.display-6 { font-size: 1.75rem !important; line-height: 2.125rem !important; }  /* 28 / 34 */
}
/* ▲▲▲  TIPOGRÁFIA VÉGE  ▲▲▲ */


/* ══════════════════════════════════════════════════════════════════════════
   ARCULATI SÁV A KICKER ELŐTT – .article-focus
   Rövid arculati színsáv a szöveg ELŐTT, egy sorban vele, egymáshoz
   függőlegesen középre igazítva. A sáv MINDIG színes; csak az árnyalat-készlet
   függ a környező mix-* mezőtől (kék mezőn a kék szakasz kimarad).
   ══════════════════════════════════════════════════════════════════════════ */
.article-focus,
.article-focus-secondary {
	--af-kek:     var(--c05, 0, 69, 140);
	--af-narancs: var(--c03, 250, 99, 41);
	--af-zold:    20, 140, 69;
	--af-citrom:  250, 171, 51;

	/* a kézikönyv színaránya: 10% narancs · 20% citrom · 40% zöld · 30% kék */
	--af-arany: linear-gradient(to right,
		rgba(var(--af-narancs), 1) 0 10%,
		rgba(var(--af-citrom),  1) 10% 30%,
		rgba(var(--af-zold),    1) 30% 70%,
		rgba(var(--af-kek),     1) 70% 100%);

	/* a másodlagos sáv tömör színe – az .article-focus-{blue,red,green,yellow}
	   osztályok írják felül */
	--af-szin: var(--af-kek);
}
/* a bekezdés inline-flex, így a szülő text-center / text-lg-start
   igazítása változatlanul működik rá */
.article-focus p:first-child,
.article-focus-secondary p:first-child {
	display: inline-flex;
	align-items: center;
	margin-bottom: 0;
	/* a kiajánló-oldalak .ek-kicker hangolása: ritkított verzál.
	   A betűvastagsághoz szándékosan nem nyúlunk – azt az elemre írt
	   inline súlyok adják. */
	text-transform: uppercase;
	letter-spacing: .22em;
}
/* alap: a teljes négyszínű arculati gradiens */
.article-focus p:first-child::before,
.article-focus-secondary p:first-child::before {
	content: "";
	/* a térköz margóval megy, NEM gap-pel: a gap a bekezdésen belüli
	   szövegdarabok (pl. <b>ENCO</b> + " ENERGY") közé is beszúrna egyet */
	flex: 0 0 auto;
	margin-right: .7rem;
	width: 4rem;
	height: 4px;
	border-radius: 2px;
	background: var(--af-arany);
}
/* Kék/sötét mezőn a teljes arculati gradiens kék vége beleolvadna a háttérbe,
   ezért ott a maradék három szín tölti ki a sávot – a kézikönyv arányát
   megtartva (narancs 1 : citrom 2 : zöld 4). */
.mix-dark-1 .article-focus p:first-child::before,
.mix-dark-2 .article-focus p:first-child::before,
.mix-darkest-1 .article-focus p:first-child::before,
.mix-darkest-2 .article-focus p:first-child::before {
	width: 4rem;
	background: linear-gradient(to right,
		rgba(var(--af-narancs), 1) 0 14.3%,
		rgba(var(--af-citrom),  1) 14.3% 42.9%,
		rgba(var(--af-zold),    1) 42.9% 100%);
}

/* ── MÁSODLAGOS VÁLTOZAT – .article-focus-secondary ─────────────────────
   Feleakkora sáv (2rem), tömör színnel. A szín a .article-focus-{blue,red,
   green,yellow} osztállyal állítható, alapból ENCO-kék. A mix-dark-* mezőkre
   is fel kell sorolni, különben az ottani gradiens-szabály fajsúlya nyerne.
   FIGYELEM: a szín fix, tehát kék mezőn ne a blue változatot használd. */
.article-focus-secondary p:first-child::before,
.mix-dark-1 .article-focus-secondary p:first-child::before,
.mix-dark-2 .article-focus-secondary p:first-child::before,
.mix-darkest-1 .article-focus-secondary p:first-child::before,
.mix-darkest-2 .article-focus-secondary p:first-child::before {
	width: 2rem;
	background: rgb(var(--af-szin));
}
/* színválasztók (a primer, gradienses változatra is ráhúzhatók) */
.article-focus-blue   { --af-szin: var(--af-kek); }
.article-focus-red    { --af-szin: var(--af-narancs); }
.article-focus-green  { --af-szin: var(--af-zold); }
.article-focus-yellow { --af-szin: var(--af-citrom); }



/* ══════════════════════════════════════════════════════════════════════════
   ARCULATI HULLÁM-MINTÁZAT – .enco-lines
   A sectionre téve a háttérmédia (kép VAGY videó) fölé teszi a kézikönyv
   szaggatott hullám-mintázatát. A tartalom fölé nem kerül, kattintást nem fog.
   Finomhangolás sectiononként: --el-opacity, --el-meret.
   Világos mezőn: az .enco-lines-kek osztállyal kék mintázat.
   ══════════════════════════════════════════════════════════════════════════ */
.enco-lines {
	--el-minta: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='72'%20viewBox='0%200%20240%2072'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-dasharray='2%2012'%3E%3Cpath%20d='M0%2012C48%202%2072%2022%20120%2012S192%2022%20240%2012'/%3E%3Cpath%20d='M0%2036C48%2046%2072%2026%20120%2036S192%2026%20240%2036'/%3E%3Cpath%20d='M0%2060C48%2050%2072%2070%20120%2060S192%2070%20240%2060'/%3E%3C/g%3E%3C/svg%3E");
	--el-meret: 240px 72px;
	--el-opacity: .14;
}
.enco-lines.enco-lines-kek {
	--el-minta: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='72'%20viewBox='0%200%20240%2072'%3E%3Cg%20fill='none'%20stroke='%2300458c'%20stroke-width='2'%20stroke-linecap='round'%20stroke-dasharray='2%2012'%3E%3Cpath%20d='M0%2012C48%202%2072%2022%20120%2012S192%2022%20240%2012'/%3E%3Cpath%20d='M0%2036C48%2046%2072%2026%20120%2036S192%2026%20240%2036'/%3E%3Cpath%20d='M0%2060C48%2050%2072%2070%20120%2060S192%2070%20240%2060'/%3E%3C/g%3E%3C/svg%3E");
}
.enco-lines .background-image-source::after,
.enco-lines .background-video-source::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--el-minta);
	background-size: var(--el-meret);
	opacity: var(--el-opacity);
	pointer-events: none;
}

/* A betűméret itt él, a gyári .fs-* osztályok mintájára (a keretrendszer
   bekezdés-szabálya különben felülütné). Emiatt az elemről le kell venni a
   Grid fs-* osztályát – az !important-os lenne és győzne ezzel szemben. */
.article-focus,
.article-focus > p,
.article-focus-secondary,
.article-focus-secondary > p {
	font-size: .8125rem !important;    /* 13px */
	line-height: 1.3125rem !important; /* 21px */
}


/* ══════════════════════════════════════════════════════════════════════════
   ARCULATI KÖRMINTÁZAT A TARTALOM MÖGÉ – .enco-korok
   Bármely elemre (leggyakrabban egy kép <figure>-jére) rátéve a kézikönyv
   koncentrikus szaggatott körmintázatát teszi MÖGÉ, a sarkára középezve.
   Alap: jobb felső sarok; a .order-lg-first oszlopban automatikusan balra vált.
   Módosítók: .enco-korok-balra, .enco-korok-jobbra, .enco-korok-lent,
   .enco-korok-feher (sötét mezőre). Hangolás: --k-meret, --k-op.

   Két dolog miatt nem z-index:-1 (ahogy a dynamic blockoknál):
     • a -1 a legközelebbi stacking context HÁTTERE mögé is bekerülne, így egy
       tömör hátterű sectionben (pl. mix-light-1) egyszerűen eltűnne;
     • helyette a minta z-index:0, az elem saját tartalma z-index:1.
   A méret vw-vel skálázódik, hogy a sarkon túlnyúló rész sose okozzon
   vízszintes görgetést; lg alatt a dísz elmarad (ott szűk a hely).
   ══════════════════════════════════════════════════════════════════════════ */
.enco-korok {
	--k-minta: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='600'%20viewBox='0%200%20600%20600'%3E%3Cg%20fill='none'%20stroke='%2300458c'%20stroke-width='2'%20stroke-linecap='round'%20stroke-dasharray='2%2014'%3E%3Ccircle%20cx='300'%20cy='300'%20r='40'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='64'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='88'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='112'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='136'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='160'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='184'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='208'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='232'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='256'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='280'/%3E%3C/g%3E%3C/svg%3E");
	--k-meret: min(28rem, 20vw);
	--k-el: calc(var(--k-meret) / -2);   /* a körök középpontja a sarokra esik */
	--k-op: .45;

	position: relative;
}
/* fehér mintázat sötét mezőre */
.enco-korok.enco-korok-feher {
	--k-minta: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='600'%20viewBox='0%200%20600%20600'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-dasharray='2%2014'%3E%3Ccircle%20cx='300'%20cy='300'%20r='40'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='64'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='88'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='112'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='136'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='160'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='184'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='208'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='232'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='256'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='280'/%3E%3C/g%3E%3C/svg%3E");
}
.enco-korok::before {
	content: "";
	position: absolute;
	top: var(--k-el);
	right: var(--k-el);
	bottom: auto;
	left: auto;
	width: var(--k-meret);
	height: var(--k-meret);
	background: var(--k-minta) no-repeat center / contain;
	opacity: var(--k-op);
	pointer-events: none;
	z-index: 0;
}
/* az elem saját tartalma a minta FÖLÉ kerül */
.enco-korok > * { position: relative; z-index: 1; }

/* sarok-módosítók (kombinálhatók) */
.enco-korok.enco-korok-balra::before { right: auto; left: var(--k-el); }
.enco-korok.enco-korok-lent::before  { top: auto; bottom: var(--k-el); }

/* AUTOMATIKUS oldalváltás: ha a kép a sor BAL oldalára van rendezve
   (.order-lg-first), akkor a körök is balra kerüljenek – így nem a szöveg
   felé, hanem a lap széle felé lógnak ki. Külön osztály nélkül működik;
   a .enco-korok-balra ugyanezt csinálja kézzel. */
.order-lg-first .enco-korok::before { right: auto; left: var(--k-el); }
/* ha valaki mégis jobbra kéri egy bal oldali képnél, ez üti felül */
.order-lg-first .enco-korok.enco-korok-jobbra::before { left: auto; right: var(--k-el); }

/* mobilon nincs hely a kilógó résznek – a dísz elmarad */
@media (max-width: 991.98px) {
	.enco-korok::before { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   IDŐVONAL – .enco-idovonal  (1041 · Történetünk)
   Bal oldalon tapadó évszám-görgető: egy sín, rajta VÁNDORLÓ jelölő (nem
   külön pötty tételenként), az évszámok az aktívnál megnőnek. A jelölőt a
   site.js teszi a tényleges gombpozícióra, így bármilyen sormagasságnál
   illeszkedik. Nincs nyíl és nincs görgetés-elkapás.
   ══════════════════════════════════════════════════════════════════════════ */
.enco-idovonal {
	--ei-kek:     var(--c05, 0, 69, 140);
	--ei-narancs: var(--c03, 250, 99, 41);
	--ei-citrom:  250, 171, 51;
	--ei-zold:    20, 140, 69;
	/* a haladással változó szín – a site.js állítja (narancs → citrom → zöld → kék) */
	--ei-jelolo-szin: var(--ei-narancs);
	/* mindkét sín (bal oldali görgető és a tételek vonala) ugyanez */
	--ei-sin-szin: rgba(var(--ei-kek), .05);
	--ei-e:       cubic-bezier(.22, .8, .28, 1);
}
.enco-idovonal .place { display: contents; }
.enco-idovonal .ei-fejcim { line-height: 1.2; text-wrap: balance; }
.enco-idovonal .ei-bev p  { max-width: 64ch; opacity: .75; margin: 0; line-height: 1.6; }

/* ── bal oldali görgető (a site.js építi) ─────────────────────────────── */
.enco-idovonal .ei-nav-oszlop { margin-top: 3.25rem; }
.enco-idovonal .ei-nav {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-left: 1.5rem;
}
/* a sín és a rajta mozgó jelölő */
.enco-idovonal .ei-nav-sin,
.enco-idovonal .ei-nav-jelolo {
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	border-radius: 2px;
	pointer-events: none;
}
.enco-idovonal .ei-nav-sin {
	bottom: 0;
	background: var(--ei-sin-szin);
}
.enco-idovonal .ei-nav-jelolo {
	height: 0;
	background: rgb(var(--ei-jelolo-szin));
	/* csak a pozíció mozog – a szín váltása azonnali */
	transition: transform .5s var(--ei-e), height .5s var(--ei-e), width .5s var(--ei-e);
}

.enco-idovonal .ei-nav-elem {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .1rem;
	padding: .7rem 0 .7rem 1rem;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	transition: padding-left .4s var(--ei-e);
}
.enco-idovonal .ei-nav-ev {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
	/* ugyanaz a szín, mint a görgető jelölője – halványabban */
	color: rgba(var(--ei-jelolo-szin), .38);
	transition: color .35s var(--ei-e), font-size .35s var(--ei-e), letter-spacing .35s var(--ei-e);
}
.enco-idovonal .ei-nav-alcim {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.2;
	color: rgba(var(--ei-jelolo-szin), .32);
	transition: color .35s var(--ei-e), opacity .35s var(--ei-e);
}
.enco-idovonal .ei-nav-elem:hover .ei-nav-ev,
.enco-idovonal .ei-nav-elem:hover .ei-nav-alcim { color: rgba(var(--ei-jelolo-szin), .75); }
.enco-idovonal .ei-nav-elem:hover { padding-left: 1.25rem; }

/* aktív évszám: nagyobb, telített, kicsit ritkítva */
.enco-idovonal .ei-nav-elem.ei-aktiv { padding-left: 1.25rem; }
.enco-idovonal .ei-nav-elem.ei-aktiv .ei-nav-ev {
	font-size: 1.6rem;
	letter-spacing: -.015em;
	color: rgb(var(--ei-jelolo-szin));
}
.enco-idovonal .ei-nav-elem.ei-aktiv .ei-nav-alcim { color: rgb(var(--ei-jelolo-szin)); }

@media (min-width: 992px) {
	.enco-idovonal .ei-nav-oszlop { position: sticky; top: 7rem; align-self: flex-start; }
}
/* mobilon vízszintes, görgethető évszámsáv – a jelölő oldalra fordul */
@media (max-width: 991.98px) {
	.enco-idovonal .ei-nav-oszlop { margin-top: 1.25rem; }
	.enco-idovonal .ei-nav {
		flex-direction: row;
		gap: 1.5rem;
		padding: 0 0 .9rem;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.enco-idovonal .ei-nav::-webkit-scrollbar { display: none; }
	.enco-idovonal .ei-nav-sin,
	.enco-idovonal .ei-nav-jelolo {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: auto;
		height: 4px;
	}
	.enco-idovonal .ei-nav-jelolo { right: auto; width: 0; }
	.enco-idovonal .ei-nav-elem { flex: 0 0 auto; padding: .25rem 0 .7rem; }
	.enco-idovonal .ei-nav-elem:hover,
	.enco-idovonal .ei-nav-elem.ei-aktiv { padding-left: 0; }
	.enco-idovonal .ei-nav-elem.ei-aktiv .ei-nav-ev { font-size: 1.25rem; }
}

/* ── jobb oldali tételek ──────────────────────────────────────────────── */
/* A vonal és a pontok egyetlen középvonalból számolódnak, így garantáltan
   egybeesnek: --ei-sin-x a vonal középvonala a listához képest.
   Szándékosan EGÉSZ PIXELEKBEN: rem-ben törtpixelre esnének, és a böngésző
   a 2 px-es vonalat meg a kerek pontot máshová kerekítené (a pont balra csúszna). */
.enco-idovonal .ei-lista {
	--ei-sin-x:   6px;   /* a vonal középvonala */
	--ei-behuz:  36px;   /* a lista bal behúzása */
	--ei-pont:   12px;   /* a pont átmérője (páros, hogy a fele is egész legyen) */
	--ei-elso-y: 10px;   /* az első pont középvonala */
	position: relative;
	padding: 0 0 0 var(--ei-behuz) !important;
	margin-top: 3.25rem;
}
.enco-idovonal .ei-lista::before {
	content: "";
	position: absolute;
	/* ugyanaz a vastagság, mint a bal oldali sínen: 4 px */
	left: calc(var(--ei-sin-x) - 2px);
	top: var(--ei-elso-y);
	bottom: 1.25rem;
	width: 4px;
	border-radius: 2px;
	background: var(--ei-sin-szin);
}
.enco-idovonal .ei-elem {
	position: relative;
	padding: 0 0 2.75rem !important;
	margin-bottom: 0 !important;
}
.enco-idovonal .ei-lista > :last-child .ei-elem { padding-bottom: 0 !important; }
/* pont a vonalon – az aktív tételnél telítődik, a bal oldali jelölővel együtt */
.enco-idovonal .ei-elem::before {
	content: "";
	position: absolute;
	/* a pont közepe pontosan a vonal középvonalára esik */
	left: calc(var(--ei-sin-x) - var(--ei-behuz) - var(--ei-pont) / 2);
	top: calc(var(--ei-elso-y) - var(--ei-pont) / 2);
	width: var(--ei-pont);
	height: var(--ei-pont);
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 2px rgba(var(--ei-kek), .3);
	transition: box-shadow .35s var(--ei-e), scale .35s var(--ei-e);
}
.enco-idovonal .ei-elem.ei-aktiv::before {
	box-shadow: inset 0 0 0 .35rem rgb(var(--ei-jelolo-szin));
	scale: 1.2;
}

/* a dátum kis, ritkított címke (font-body fs-7 a markupban) */
.enco-idovonal .ei-datum,
.enco-idovonal .ei-datum b {
	font-weight: 900;
}
.enco-idovonal .ei-datum {
	margin-bottom: .35rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: rgb(var(--ei-narancs));
}
.enco-idovonal .ei-cim { line-height: 1.3; }
.enco-idovonal .ei-szoveg p { margin: 0; max-width: 62ch; line-height: 1.65; opacity: .78; }

@media (max-width: 991.98px) {
	.enco-idovonal .ei-lista { --ei-behuz: 26px; margin-top: 1.5rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   MUNKATÁRS-BEMUTATÓ – .enco-team  (1044 · Munkatársaink)
   Két változat, mindkettő ugyanazt a .et-* elemkészletet használja:

     1) .enco-team-kartya  „Csapatunk tagjai”
        Fehér kártyarács, kerek portré, felül teljes szélességű arculati
        színátmenet. A gombok kék, középről kinyíló állapotréteget kapnak.

     2) .enco-team-portre  „Az arcok mögött a szakértelem”
        Kék mezőn 3:4 portré-csempék, a névtábla a képre ül, a bemutatkozás
        rámutatásra úszik fel. A gombok mindig látszanak, hover = opacity .9.

   Közös rész (változók, címek, .et-gomb alap) alább, a változatok utána.
   ══════════════════════════════════════════════════════════════════════════ */
.enco-team {
	--et-kek:     var(--c05, 0, 69, 140);
	--et-narancs: var(--c03, 250, 99, 41);
	--et-zold:    20, 140, 69;
	--et-citrom:  250, 171, 51;
	--et-r:       1rem;
	--et-arny:    0 1px 2px rgba(15, 23, 42, .04), 0 14px 36px -14px rgba(15, 23, 42, .2);
	--et-arny-2:  0 2px 6px rgba(15, 23, 42, .06), 0 30px 60px -22px rgba(var(--et-kek), .4);
	--et-e:       cubic-bezier(.2, .7, .3, 1);
}
/* a Grid editorban a figure-ök egy ul.place-ben ülnek – az a flex/grid
   elrendezést megtörné, ezért átlátszóvá tesszük a dobozmodellben */
.enco-team .place { display: contents; }
/* FONTOS: a keretrendszer a figure-ök szélességét maga állítja (w-lg-* logika),
   ezért a portrék méretezése csak !important-tal érvényesül. */

.enco-team .et-cim   { line-height: 1.2; text-wrap: balance; }
.enco-team .et-bev p { max-width: 62ch; opacity: .75; margin: 0; line-height: 1.6; }
.enco-team .et-racs  { margin-top: 2.75rem; }
.enco-team .et-nev   { line-height: 1.25; }
.enco-team .et-poz p {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	color: rgb(var(--et-narancs));
}
.enco-team .et-bio p { margin: 0; line-height: 1.6; opacity: .72; }

/* kapcsolat-gombok – fehér Material-gombok (48 px magas, verzál felirat)
   A hover egy középről kinyíló „state layer”: a gomb kékre vált, és megemelkedik. */
.enco-team .et-kapcsolat {
	padding: 0 !important;
	/* a középre igazítást a markupban lévő gyári justify-content-center adja */
	gap: .625rem !important;
	flex-wrap: wrap;
}
.enco-team .et-gomb {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .625rem;
	height: 48px;                 /* Material touch target */
	padding: 0 1.25rem;
	border-radius: 24px;
	background: #fff;
	color: rgb(var(--et-kek));
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 1px 3px 1px rgba(15, 23, 42, .06);
	transition: box-shadow .28s var(--et-e), color .28s var(--et-e), transform .28s var(--et-e);
}
/* középről kinyíló állapotréteg */
.enco-team .et-gomb::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: rgb(var(--et-kek));
	transform: scale(0);
	transition: transform .42s var(--et-e);
}
.enco-team .et-gomb:hover::before,
.enco-team .et-gomb:focus-visible::before { transform: scale(1); }
.enco-team .et-gomb:hover,
.enco-team .et-gomb:focus-visible {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(15, 23, 42, .12), 0 10px 20px -6px rgba(var(--et-kek), .5);
}
.enco-team .et-gomb:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(15, 23, 42, .14); }

.enco-team .et-gomb .link-icon {
	flex: 0 0 auto;
	margin: 0;
	width: 1.125rem;             /* Material ikonméret gombban */
	height: 1.125rem;
	fill: currentColor;
}
.enco-team .et-gomb-felirat {
	font-size: .875rem;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .0892em;      /* Material button tracking */
	white-space: nowrap;
}

/* ════ 1. VÁLTOZAT · .enco-team-kartya – „Csapatunk tagjai” ══════════════
   Középre zárt fehér kártyák, kerek portréval és felső akcentcsíkkal.      */
.enco-team-kartya .et-kartya {
	position: relative;
	height: 100%;
	padding: 2.5rem 1.75rem 2rem !important;
	/* felül 2 px, alul marad a lekerekítés */
	border-radius: 2px 2px var(--et-r) var(--et-r);
	background: #fff;
	box-shadow: var(--et-arny);
	text-align: center;
	overflow: hidden;
	transition: transform .35s var(--et-e), box-shadow .35s var(--et-e);
}
.enco-team-kartya .et-kartya::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	/* a kézikönyv színaránya: 10% narancs · 20% citrom · 40% zöld · 30% kék */
	background: linear-gradient(to right,
		rgba(var(--et-narancs), 1) 0 10%,
		rgba(var(--et-citrom),  1) 10% 30%,
		rgba(var(--et-zold),    1) 30% 70%,
		rgba(var(--et-kek),     1) 70% 100%);
}
.enco-team-kartya .et-kartya:hover { transform: translateY(-6px); box-shadow: var(--et-arny-2); }

.enco-team-kartya .et-foto { width: 8.5rem !important; margin: 0 auto 1.4rem !important; }
.enco-team-kartya .et-kor {
	display: block;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(var(--et-kek), .08);
	transition: box-shadow .35s var(--et-e);
}
.enco-team-kartya .et-kartya:hover .et-kor { box-shadow: 0 0 0 4px rgba(var(--et-narancs), .35); }
.enco-team-kartya .et-kapcsolat { justify-content: center; }


/* ════ 2. VÁLTOZAT · .enco-team-portre – „Az arcok mögött a szakértelem” ═
   Teljes felületű 3:4 portré, a névtábla a képre ül, a bemutatkozás
   rámutatásra úszik fel. A tábla figure-je pozicionált (et-tabla-fig).     */
.enco-team-portre .et-csempe {
	position: relative;
	padding: 0 !important;
	border-radius: var(--et-r);
	overflow: hidden;
	background: rgb(var(--et-kek));
}
.enco-team-portre .et-foto img { object-position: center 20%; transition: transform 1s var(--et-e); }
.enco-team-portre .et-csempe:hover .et-foto img { transform: scale(1.05); }
.enco-team-portre .et-csempe::after {
	content: "";
	position: absolute;
	inset: 35% 0 0 0;
	background: linear-gradient(to top, rgba(var(--et-kek), .96) 12%, rgba(var(--et-kek), .6) 45%, rgba(var(--et-kek), 0) 100%);
	pointer-events: none;
	transition: inset .4s var(--et-e);
}
.enco-team-portre .et-csempe:hover::after { inset: 0; }

.enco-team-portre .et-tabla-fig { position: absolute; inset: auto 0 0 0; z-index: 2; }
.enco-team-portre .et-tabla { padding: 1.4rem 1.4rem 1.5rem !important; color: #fff; }
.enco-team-portre .et-nev b  { color: #fff; }
.enco-team-portre .et-poz p  { color: rgba(255, 255, 255, .85); }
.enco-team-portre .et-bio p {
	color: rgba(255, 255, 255, .88);
	opacity: 0;
	max-height: 0;
	margin-top: 0;
	overflow: hidden;
	transition: opacity .35s var(--et-e), max-height .45s var(--et-e), margin-top .35s var(--et-e);
}
.enco-team-portre .et-csempe:hover .et-bio p { opacity: 1; max-height: 12rem; margin-top: .75rem; }

/* Kapcsolat-gombok a névtáblán – nincs megjelenés-animáció, mindig láthatók.
   Nincs állapotréteg és nincs emelés sem: a hover csak 90%-ra halványít. */
.enco-team-portre .et-kapcsolat {
	justify-content: flex-start !important;
	margin-top: 1rem;
}
.enco-team-portre .et-gomb {
	transition: opacity .25s var(--et-e);
}
.enco-team-portre .et-gomb::before { display: none; }
.enco-team-portre .et-gomb:hover,
.enco-team-portre .et-gomb:focus-visible {
	opacity: .9;
	color: rgb(var(--et-kek));
	transform: none;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 1px 3px 1px rgba(15, 23, 42, .06);
}

/* érintős/keskeny nézeten nincs hover, ezért ott mindig látszanak */
@media (max-width: 991.98px), (hover: none) {
	.enco-team-portre .et-bio p { opacity: 1; max-height: 12rem; margin-top: .75rem; }
}


/* ════ 3. VÁLTOZAT · .enco-team-kartya.enco-team-szines ══════════════════
   Az 1. változat kártyája, PONTOSAN három eltéréssel – semmi más:
     • nincs felső arculati díszcsík
     • mind a négy sarok az alsó lekerekítést kapja
     • a titulus ciklikusan színes, a kézikönyv arányában
       (tíz elemenként 4 zöld · 3 kék · 2 citrom · 1 narancs)
   A citrom fehér alapon szövegként olvashatatlan, ezért ott sötétített
   változatot használunk (--et-citrom-szoveg). */
.enco-team-szines {
	--et-citrom-szoveg: 176, 118, 12;
}
.enco-team-szines .et-kartya { border-radius: var(--et-r); }
.enco-team-szines .et-kartya::before { display: none; }
/* a portré ugyanazt a vetett árnyékot kapja, mint a gombok (a gyűrű helyett) */
.enco-team-szines .et-kor {
	box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 1px 3px 1px rgba(15, 23, 42, .06);
}
.enco-team-szines .et-kartya:hover .et-kor {
	box-shadow: 0 2px 4px rgba(15, 23, 42, .12), 0 8px 18px -6px rgba(15, 23, 42, .25);
}

/* FONTOS: a rács elemei a Grid <figure> burkolói, a .et-kartya azokon BELÜL
   ül, ezért a ciklust a figure-ökön kell számolni. */
.enco-team-szines .et-racs figure:nth-child(10n+1) .et-poz p,
.enco-team-szines .et-racs figure:nth-child(10n+3) .et-poz p,
.enco-team-szines .et-racs figure:nth-child(10n+5) .et-poz p,
.enco-team-szines .et-racs figure:nth-child(10n+8) .et-poz p { color: rgb(var(--et-zold)); }

.enco-team-szines .et-racs figure:nth-child(10n+2) .et-poz p,
.enco-team-szines .et-racs figure:nth-child(10n+6) .et-poz p,
.enco-team-szines .et-racs figure:nth-child(10n+9) .et-poz p { color: rgb(var(--et-kek)); }

.enco-team-szines .et-racs figure:nth-child(10n+4) .et-poz p,
.enco-team-szines .et-racs figure:nth-child(10n+7) .et-poz p { color: rgb(var(--et-citrom-szoveg)); }

.enco-team-szines .et-racs figure:nth-child(10n) .et-poz p { color: rgb(var(--et-narancs)); }



/* ══════════════════════════════════════════════════════════════════════════
   CSOPORTOSÍTOTT MENÜPONTOK – bal benyíló navigáció, CSAK asztali nézeten
   ──────────────────────────────────────────────────────────────────────────
   MI EZ?  A .mck-tree egy CSS-rács: minden közvetlen <li> külön oszlopba kerül.
           Az almenü nélküli pontok így egyesével szétszóródnának az oszlopok
           között. A site.js ezért minden egybefüggő, legalább kételemű,
           almenü nélküli sorozatot EGYETLEN <li>-be fűz össze → egy oszlop,
           a linkek egymás alatt, főmenüpont nélkül.

   HOL VAN A LOGIKA?  site.js, „almenü nélküli menüpontok csoportosítása” blokk.
           A DOM-ot a JS építi, mobilon (992 px alatt) automatikusan visszabomlik.

   KAPASZKODÓK – innen lehet a jövőben stílust adni neki:
           li.mck-csoport       a burkoló elem (ez tölt ki egy rács-oszlopot)
           a.mck-csoport-link   a csoportba került linkek

   MOST CSAK ANNYIT CSINÁLUNK, hogy a linkek egymás alá kerüljenek – a szín,
   a méret és a térköz szándékosan a meglévő .mck-tree > li > a szabályból jön,
   hogy a csoportosított pontok ugyanúgy nézzenek ki, mint a többi főmenüpont.
   (A keretrendszer inline-block-ra állítja őket, ezért kell az !important.)
   ══════════════════════════════════════════════════════════════════════════ */
.mck-tree > li.mck-csoport { /* a burkoló – jelenleg nem kell rá külön stílus */ }

.mck-tree > li.mck-csoport > a.mck-csoport-link {
	display: block !important;
}

/* Példák, ha később mégis meg akarod különböztetni őket – csak vedd ki a
   kommentből:
.mck-tree > li.mck-csoport { border-left: 2px solid rgba(255,255,255,.15); padding-left: 1rem; }
.mck-tree > li.mck-csoport > a.mck-csoport-link { font-weight: 400; opacity: .9; }
*/


/* ══════════════════════════════════════════════════════════════════════════
   FEJLÉC-ALMENÜ: VISSZA gomb és „Áttekintés”  (2026-09-29)
   A felső sor (li.nav-parent) mostantól mindig egy szinttel FELJEBB mutat,
   nem az aktuális oldalra – ezért kap egy nyilat és a .nav-vissza osztályt.
   A listát az „Áttekintés” (li.nav-attekintes) nyitja: arra a pontra mutat,
   amelyiknek a gyerekeit éppen látjuk.
   A logika: services/class.navigations.php → GetSectionMenu()
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
	section.layout.header .midcontainer .navbar-nav > .nav-item.nav-vissza > .nav-link {
		display: inline-flex;
		align-items: center;
		gap: .35rem;
	}
	/* A nyíl a VISSZA jelentést adja a fölérendelt menüpont neve elé.
	   FIGYELEM: fentebb egy szabály `content: none !important`-tal kikapcsolja a
	   ::before-t az összes fejléc-linken (a styles.css chevronjai miatt), ezért
	   itt is !important kell. */
	section.layout.header .midcontainer .navbar-nav > .nav-item.nav-vissza > .nav-link::before {
		content: "" !important;
		display: block !important;
		flex: 0 0 auto;
		width: .75rem;
		height: .75rem;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z'/%3E%3C/svg%3E") center / contain no-repeat;
		transition: transform .25s cubic-bezier(.2, .7, .3, 1);
	}
	section.layout.header .midcontainer .navbar-nav > .nav-item.nav-vissza > .nav-link:hover::before {
		transform: translateX(-2px);
	}
}


/* ══════════════════════════════════════════════════════════════════════════
   LOGOPARK – .enco-lp  (2026-09-30)
   Referencia-logók hajszálvonalas rácsban. Két változat:

     .enco-lp-racs        világos mezőn (mix-lightest-1), fekete logókkal
                          → /themes/default/images/logopark/
     .enco-lp-sotetracs   kék mezőn (mix-dark-2), fehér logókkal
                          → /themes/default/images/logopark-feher/
                          (a .enco-lp-sotet osztályt is meg kell kapnia)

   A rács vonalai NEM keretből jönnek, hanem a rács 1 pixeles réséből, ami a
   szülő háttérszínét mutatja: így nincs dupla vonal és nincsenek nth-child
   kivételek a szélein.

   Markup (Grid):
     section.layout.mix-bg.mix-lightest-1.enco-lp.enco-lp-racs
       .col-lg-8   → article.article-focus + h2.lp-cim + article.lp-bev
       .col-lg-12  → figure.d-grid.grid-lg-6.lp-racs
                       minden logó: div.content-box.lp-cella > figure.lp-kep > kép
   Hangolás: --lp-nyugalom (a logók alap-fedettsége, hoverre 1).
   ══════════════════════════════════════════════════════════════════════════ */
.enco-lp {
	--lp-kek: var(--c05, 0, 69, 140);
	--lp-e: cubic-bezier(.2, .7, .3, 1);
	--lp-nyugalom: .45;      /* a logók alap-fedettsége */
}
.enco-lp .place { display: contents; }
.enco-lp .lp-cim { line-height: 1.2; text-wrap: balance; }
.enco-lp .lp-bev p { max-width: 62ch; opacity: .72; margin: 0; line-height: 1.6; }

/* a képelem csomagolója ne vigyen saját méretet */
.enco-lp .lp-kep,
.enco-lp .lp-kep a { display: block; width: 100% !important; margin: 0 !important; }
.enco-lp .lp-kep img {
	opacity: var(--lp-nyugalom);
	transition: opacity .3s var(--lp-e);
}

/* --- a rács --- */
.enco-lp .lp-racs {
	margin-top: 3rem;
	gap: 1px !important;
	background: rgba(var(--lp-kek), .14);
	overflow: hidden;
	border-radius: 2px;
}
.enco-lp .lp-cella {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.9rem 1.25rem !important;
	background: #fff;
	transition: background-color .3s var(--lp-e);
}
.enco-lp .lp-cella:hover { background: rgba(var(--lp-kek), .04); }
.enco-lp .lp-cella:hover .lp-kep img { opacity: 1; }

/* --- sötét változat: a rés fehér, a cella maga az enco-kék --- */
.enco-lp-sotet { --lp-nyugalom: .6; }
.enco-lp-sotet .lp-racs { background: rgba(255, 255, 255, .14); }
.enco-lp-sotet .lp-cella { background: rgb(var(--lp-kek)); }
.enco-lp-sotet .lp-cella:hover { background: rgba(255, 255, 255, .06); }

/* --- mobil: a keretrendszer grid-lg-* osztályai lg alatt egy oszlopra
       esnének, attól a logórács indokolatlanul hosszú lenne --- */
@media (max-width: 991.98px) {
	.enco-lp .lp-racs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.enco-lp .lp-cella { padding: 1.1rem .75rem !important; }
}
@media (max-width: 575.98px) {
	.enco-lp .lp-racs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}