/*
 * Flatman — teljes stíluslap.
 *
 * Egyetlen fájl, egyetlen kérés. Oldalépítő és keretrendszer nélkül.
 * A tokenek az eredeti arculatból származnak (Elementor kit, post-10.css).
 */

/* ------------------------------------------------------------ betűtípusok
 *
 * Helyben kiszolgálva, nem CDN-ről. Így egyetlen külső kérés sem indul a
 * betöltéskor — ez a feltétele annak, hogy az oldalnak ne kelljen süti-sáv.
 * A latin-ext részhalmaz hordozza a magyar ő és ű betűket; a böngésző csak
 * azt a fájlt tölti le, amelyikre a szövegben ténylegesen szükség van.
 */

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

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

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

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

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

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

/* --------------------------------------------------------------- tokenek */

:root {
	/* Színek */
	--fm-kek: #109be9;
	--fm-kek-vilagos: #32c6f4;
	--fm-kek-kozep: #4594be;
	--fm-narancs: #f79a19;
	--fm-szoveg: #7a7a7a;
	--fm-cimsor: #54595f;
	/* A lap alapháttere mérve #F8F8F8 — a fehér dobozok ezen emelkednek ki. */
	--fm-hatter: #f8f8f8;
	--fm-keret: #dce0e0;
	--fm-halvany: #f8f8f8;

	/*
	 * Tipográfia — az eredeti oldalról mérve (getComputedStyle).
	 * A Russo One nem csak a címsorokat viszi: a menü, a gombok, az árak, a
	 * kártyacímek és a felső sáv is ezzel van szedve. A hosszú folyó szöveg
	 * viszont más, semleges betűvel fut — ott a Russo One olvashatatlan lenne.
	 */
	/*
	 * A tartaléklánc sorrendje az eredetit másolja (Arial, majd Helvetica).
	 * Nem kozmetika: a két talpatlan betű sortörése eltér, és megfordítva
	 * a hosszabb bekezdések eggyel kevesebb sorba futnak.
	 */
	--fm-font-cimsor: "Russo One", Arial, Helvetica, sans-serif;
	--fm-font-szoveg: "Russo One", Arial, Helvetica, sans-serif;
	--fm-font-torzs: Arial, Helvetica, sans-serif;
	--fm-font-urlap: "Lato", Arial, Helvetica, sans-serif;

	/* Szövegszín az eredetiről: #383838, nem a halvány szürke. */
	--fm-szoveg-sotet: #383838;
	/* Az áttekintő rács ikonjai és mezőnevei ezen a halványabb szürkén futnak. */
	--fm-halvany-szoveg: #5c6872;

	/* Rács */
	--fm-max: 1140px;
	--fm-gap: 24px;
	--fm-radius: 4px;
}

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

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/*
	 * Engedélyezi a `height: 0` → `height: auto` átmenetet. Enélkül a nyíló-
	 * csukódó elemeknél vagy fix pixelmagasságot kellene találgatni, vagy a
	 * mozgás ugrana. Ahol a böngésző nem ismeri, egyszerűen nem animál.
	 */
	interpolate-size: allow-keywords;
}

/*
 * Lapváltás átúszással.
 *
 * A több lapból álló oldal alapértelmezett viselkedése az, hogy kattintásra a
 * régi tartalom eltűnik, és egy pillanatra üres, fehér felület marad, majd
 * beugrik az új. Ez a villanás. A böngésző beépített nézetváltása ezt oldja
 * meg: pillanatképet készít a régi és az új lapról, és átúsztatja őket.
 *
 * Ahol a böngésző ezt nem ismeri, minden marad a régiben — a szabály
 * észrevétlenül hatástalan, nincs mit kikapcsolni utána.
 */
@view-transition {
	navigation: auto;
}

/*
 * A fejléc szándékosan NEM kap saját pillanatképet: úgy mozdulatlan maradna a
 * lapváltás alatt, ami ragadós fejléc benyomását kelti. Az egész lap egyben
 * úszik át, a fejléccel együtt.
 */

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .26s;
	animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/*
 * Egységes átmenet minden felületen, ami a mutatóra vagy a fókuszra reagál.
 *
 * Két dolgot érdemes tudni róla:
 *
 * 1. A kifutás LASSABB, mint a befutás (0,34 s szemben 0,18-cal). Ez a
 *    kézenfekvő megoldás arra, amit „visszavillanásnak” szoktak nevezni: a
 *    mutató elvételekor a szem már máshol jár, és egy azonos hosszú visszaút
 *    ilyenkor kapkodásnak érződik. A hosszabb elengedés puha, a rövid
 *    rákapcsolás pedig azonnali válasznak hat.
 * 2. A lágyítás nem `ease`, hanem egy gyorsan induló, lassan kifutó görbe —
 *    ugyanaz, amit a felületi mozgásoknál a rendszerek is használnak.
 *
 * Itt, a lap elején áll, hogy a lentebbi elem-szabályok bármikor
 * felülírhassák; ez csak az alapérték.
 */
a,
button,
summary,
input,
select,
textarea,
label,
.fm-gomb,
.fm-cimke,
.fm-kartya,
.fm-hir,
.fm-mini,
.fm-galeria__elem,
.fm-galeria__ful,
.fm-tetejere,
.fm-lightbox__zar,
.fm-lightbox__nyil {
	transition:
		color .34s cubic-bezier(.22, .61, .36, 1),
		background-color .34s cubic-bezier(.22, .61, .36, 1),
		border-color .34s cubic-bezier(.22, .61, .36, 1),
		opacity .34s cubic-bezier(.22, .61, .36, 1),
		box-shadow .34s cubic-bezier(.22, .61, .36, 1),
		text-decoration-color .34s cubic-bezier(.22, .61, .36, 1),
		outline-color .34s cubic-bezier(.22, .61, .36, 1),
		transform .34s cubic-bezier(.22, .61, .36, 1);
}

/* Rákapcsolás gyorsan, elengedés lassan — lásd a fenti magyarázatot. */
a:hover,
button:hover,
summary:hover,
input:hover,
select:hover,
textarea:hover,
label:hover,
.fm-gomb:hover,
.fm-cimke:hover,
.fm-kartya:hover,
.fm-hir:hover,
.fm-mini:hover,
.fm-galeria__elem:hover,
.fm-galeria__ful:hover,
.fm-tetejere:hover,
.fm-lightbox__zar:hover,
.fm-lightbox__nyil:hover,
a:focus-visible,
button:focus-visible,
.fm-gomb:focus-visible {
	transition-duration: .18s;
}

body {
	margin: 0;
	background: var(--fm-hatter);
	color: var(--fm-szoveg-sotet);
	font-family: var(--fm-font-szoveg);
	font-size: 15px;
	line-height: 25px;
	/*
	 * Az eredeti alapértelmezett vonalvastagsága 300. A használt betűkészletek
	 * egyikének sincs 300-as vágata, tehát a rajzolat változatlan — a mérés
	 * viszont enélkül minden szövegen eltérést jelezne.
	 */
	font-weight: 300;
}

/*
 * A visszatartás — a párja a `header.php` fejbe írt szkriptje.
 *
 * A `fm-tolt` osztályt maga a JavaScript teszi a gyökérelemre, és maga is
 * veszi le. Ebből következik, ami a lényeg: aki JavaScript nélkül nézi az
 * oldalt, ezt a szabályt SOHA nem kapja meg — nála a lap ugyanúgy azonnal
 * látszik, mint eddig.
 *
 * CSAK A KÉSVE ÉRKEZŐ TARTALMAT tartjuk vissza — a fejléckép és a
 * hirdetéskártyák —, a lap keretét nem.
 *
 * Az első változat az egész `body`-t rejtette, és ez rossz volt: a kék felső
 * sáv, a fejléc és a címsor is eltűnt vele, pedig azok mindig is azonnal ott
 * voltak. MÉRVE: a képernyő 1160-tól 1900 ms-ig egyetlen üres felület volt.
 * Egy hosszú fehér szünet rosszabb, mint a baj, amit orvosolni akart.
 *
 * Így viszont a keret az első pillanattól kirajzolódik, és a hiányzó rész a
 * kereten BELÜL töltődik ki — ez betöltésnek látszik, nem hibának.
 *
 * A kártyát egészben rejtjük, nem csak a képét: ha csak a kép várna, a
 * „KIEMELT” és „KIADÓ” jelölők ott lebegnének egy üres doboz fölött, ami
 * pontosan az a látvány, ami miatt az egész munka elkezdődött.
 *
 * A FEJLÉCKÉP NINCS ITT, és ANIMÁCIÓ SINCS SEHOL. Mindkettőt kipróbáltuk, és
 * mindkettő megbukott — nem a méréseken, hanem a szemen:
 *
 * - A fejléckép áttűnése túl nagy gesztus: egy teljes szélességű, közel
 *   félképernyős fotó világosodását a szem végigköveti, és az áttűnés magára
 *   vonja a figyelmet ahelyett, hogy észrevétlen maradna. A hero ezért végig
 *   látszik: a sáv halvány alapszíne kezdettől a helyén van, és a fotó
 *   egyszerűen megjelenik, amikor megérkezik.
 *
 * - A kártyák 0,4 másodperces áttűnése a mérésen hibátlan volt (egyenletes
 *   0→1, elrendezés-ugrás nélkül), a gyakorlatban mégis pislogásnak látszott.
 *   Gyorsítótárból érkező lapon ugyanis alig van mire várni: a doboz épp csak
 *   megjelenik, és már halványodik is — minden egyes lapbetöltésnél. Három
 *   kártyán zavaró, ötvenen tűrhetetlen.
 *
 * A lényeg nem az animációtól van, hanem a visszatartástól: a kártya a
 * KÉPÉVEL EGYÜTT kerül a helyére, egyszerre a többivel. Ez megmarad; az
 * áttűnés megy el. Ezért `prefers-reduced-motion` ág sincs — nincs mit
 * kikapcsolni.
 *
 * A `data-fm-kulcskep` jelölés a heron MEGMARAD: a kártyák továbbra is
 * megvárják, tehát a fotó és a kártyák egyszerre kerülnek a helyükre.
 */
.fm-tolt .fm-kartya {
	opacity: 0;
}

/*
 * A hirdetésszűrő sávja csak akkor van értelme, ha a szűrés működik — tehát
 * ha van JavaScript. Korábban ezt a `hidden` attribútum és az `app.js`
 * intézte, de a szkript a lap kirajzolása UTÁN vette le a `hidden`-t, és a
 * sáv ekkor lökte lejjebb a hirdetésrácsot 64 px-cel (elrendezés-ugrás
 * 0,0355 — minden egyes listaoldal-betöltésnél).
 *
 * Így a döntés ugyanaz, csak a stíluslap hozza meg, még az első kirajzoláskor:
 * a sáv vagy ott van kezdettől fogva, vagy sosem jelenik meg. Köztes állapot,
 * amiben utólag benyomakodik, nincs.
 */
html:not(.fm-js) .fm-szuro-doboz {
	display: none;
}


/*
 * Folyó szöveg: semleges betű, nagyobb méret, lazább sorköz.
 * Az eredetin a bekezdések 18px/26px-en futnak, nem a felület 15px-én.
 */
/*
 * BETŰVÁLTÁS az eredetihez képest, tudatosan.
 *
 * A régi oldalon a hirdetés leírása a felület betűjével futott (Russo One
 * 15/25), és a másolat eddig ezt követte. A Russo One viszont dísz-betű:
 * egyenletes vastagságú, széles, nagy x-magasságú — egy címsorban ettől
 * határozott, egy féloldalas leírásban ugyanettől fárasztó. Aki hirdetést
 * olvas, negyven-ötven szónál tovább marad a szövegben; ez már folyó szöveg,
 * nem felirat.
 *
 * A méret és a sorköz VÁLTOZATLAN (15/25) — így a tördelés nem mozdul, csak a
 * betű cserélődik. Ugyanaz az érték, mint a jogi lapok hosszú szövegein
 * (`.fm-oldal-szoveg`), tehát az oldalon minden hosszú szöveg egy kézből
 * származik.
 */
.fm-leiras {
	font-family: var(--fm-font-torzs);
	font-size: 15px;
	line-height: 25px;
	color: var(--fm-szoveg-sotet);
}

/*
 * A bemutatkozó szöveg egyetlen ponton tér el a többitől: ritkított
 * szóközökkel fut (mérve: betűköz .2 px, szóköz +4 px). Enélkül eggyel
 * kevesebb sorba tördelődik, és az egész blokk feljebb csúszik.
 */
.fm-bemutatkozas__szoveg {
	font-family: var(--fm-font-torzs);
	font-size: 18px;
	line-height: 26px;
	letter-spacing: .2px;
	word-spacing: 4px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/*
 * Az aláhúzás mindig ott van, csak átlátszó — így a mutató alatt nem
 * „bekapcsol”, hanem beúszik, és elvételkor ugyanúgy elhalványul. A
 * `text-decoration: none` → `underline` váltás ezzel szemben ugrik: azt a
 * böngésző nem tudja átmenettel megjeleníteni.
 */
a {
	color: var(--fm-kek);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/*
 * A böngésző alapértelmezése `bolder`, ami RELATÍV: a 300-as törzsvastagsághoz
 * képest csak 400-at adna, és a folyó szövegben eltűnnének a kiemelések.
 */
strong,
b {
	font-weight: 700;
}

a:hover,
a:focus-visible {
	color: var(--fm-narancs);
	text-decoration-color: currentColor;
}

/*
 * Ezeken a felületeken soha nincs aláhúzás: menü, gombok, kártyacímek,
 * morzsamenü, lábléc. Fontos, hogy ezt az ALAPÁLLAPOT mondja ki, ne a
 * `:hover` — a vonal megjelenése és eltűnése ugyanis nem animálható, tehát
 * hoverre kikapcsolva minden mutatómozgásnál megvillanna. Így viszont nincs
 * mit ki- vagy bekapcsolni: a vonal eleve nincs ott.
 */
.fm-felso a,
.fm-logo,
.fm-menu a,
.fm-kartya__cim a,
.fm-kartya__fedolink,
.fm-gomb,
.fm-morzsa a,
.fm-mini__cim,
.fm-lablec a,
.fm-hir__cim a,
.fm-hir__tovabb a,
.fm-tovabbi-tetel__cim a,
.fm-tovabbi-doboz__mind a,
.fm-lapozo a,
.fm-nyelv a {
	text-decoration-line: none;
}

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

/*
 * Gombokon és képhivatkozásokon gyűrű, nem keret. Ha a látogató gépén be van
 * kapcsolva a rendszerszintű „teljes billentyűzetes hozzáférés”, a böngésző
 * egérkattintásra is kirajzolja a fókuszjelzést — ilyenkor a lágyabb gyűrű
 * illeszkedik a felülethez, míg az éles keret idegen testként ült rajta.
 */
button:focus-visible,
.fm-gomb:focus-visible,
.fm-galeria__elem:focus-visible,
.fm-galeria__ful:focus-visible,
.fm-kartya__fedolink:focus-visible,
.fm-logo:focus-visible,
summary:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(16, 155, 233, .35);
}

/*
 * Beviteli mezők fókuszjelzése.
 *
 * Az általános kék keret hivatkozásokon és gombokon a helyén van, egy szövegdoboz
 * körül viszont idegen: a mezőnek amúgy is van szegélye, azt kell kiemelni.
 * Kék szegély és halvány gyűrű — ugyanolyan jól látható, de a mező része marad,
 * nem ráragasztott keret.
 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.fm-urlap input:focus-visible,
.fm-urlap textarea:focus-visible,
.fm-szuro input:focus-visible,
.fm-szuro select:focus-visible {
	outline: none;
	border-color: var(--fm-kek);
	box-shadow: 0 0 0 3px rgba(16, 155, 233, .16);
}

/*
 * A jelölőnégyzet és a rádiógomb ugyanazt a gyűrűt kapja, mint a szövegmezők —
 * a keretes jelzés az űrlapon idegen testként hatott. A `outline-offset` a
 * gyűrű helyét adja, a szín az általános kék.
 */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(16, 155, 233, .3);
}

h1, h2, h3, h4 {
	font-family: var(--fm-font-cimsor);
	font-weight: 500;
	color: var(--fm-cimsor);
	line-height: 1;
	margin: 0 0 .5em;
}

h1 { font-size: clamp(1.75rem, 3.125vw, 2.5rem); line-height: 1; }
h2 { font-size: clamp(1.35rem, 2.35vw, 1.875rem); }
h3 { font-size: .95rem; }

p { margin: 0 0 1em; }

.fm-kont {
	max-width: var(--fm-max);
	margin-inline: auto;
	padding-inline: 0;
}

@media (max-width: 1180px) {
	.fm-kont {
		padding-inline: 16px;
	}
}

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

.fm-ugras {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 10px 16px;
	background: var(--fm-kek);
	color: #fff;
}

.fm-ugras:focus {
	left: 8px;
	top: 8px;
}

/* --------------------------------------------------------------- fejléc */

/* Mérve: 46 px belmagasság + 3 px narancs szegély = 49 px. */
.fm-felso {
	background: var(--fm-kek);
	color: #fff;
	border-bottom: 3px solid var(--fm-narancs);
	font-size: 15px;
}

.fm-felso .fm-kont {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 32px;
	padding-block: 0;
	padding-inline: 8px;
	min-height: 46px;
}

/* Az ikon és a felirat közé az eredetin 5 px kerül — ott a szöveget körülvevő
   span bal belső tere adja, nálunk a rács-köz a legrövidebb út ugyanoda. */
.fm-felso a {
	color: #fff;
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/*
 * Az eredetin a felső sáv hivatkozásai nem reagálnak a mutatóra. Nálunk igen:
 * minden kattintható szöveg ugyanazt a narancs visszajelzést adja, hogy a
 * látogatónak ne kelljen próbálgatnia, mi a hivatkozás. Aláhúzás nincs — azt a
 * színváltás helyettesíti.
 */
.fm-felso a:hover,
.fm-felso a:focus-visible {
	color: var(--fm-narancs);
}

/*
 * Mérve: az ikon 18 px-es dobozban ül, a szöveg 5 px-re utána kezdődik. Méret
 * nélkül az SVG a saját 300×150-es alapértelmezéséhez nyúlna, és a mellette
 * álló feliratot karakterenkénti oszlopba törné — a menübe került példányon
 * pontosan ez történt.
 */
.fm-felso svg,
.fm-menu__elerhetoseg svg {
	width: 18px;
	height: 14px;
	fill: currentColor;
	flex: none;
}

.fm-menu__elerhetoseg a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.fm-menu__elerhetoseg {
	display: none;
}

/*
 * A nyelvváltó az eredetin nem jelöli meg az aktuális nyelvet — mindkét felirat
 * egyforma fehér. Szándékos: a zászló és a felirat maga mondja meg, hol vagyunk.
 */
/*
 * A jobb oldali negatív margó a hivatkozások 20 px-es belső terét egyenlíti ki,
 * hogy a felirat a sáv szélére essen. Csak addig szabad, amíg a sáv egy sorban
 * fut: tördeléskor a dokumentumot szélesítené, és vízszintes görgetést okozna.
 */
.fm-nyelv {
	margin-left: auto;
	margin-right: -8px;
	display: flex;
	gap: 0;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0;
}

.fm-nyelv a {
	padding: 13px 20px 13px 25px;
	font-size: 15px;
	line-height: 20px;
	gap: 5px;
}

/*
 * Nem ragad be. Az eredetin a fejléc együtt görög az oldallal — 600 px után
 * nyoma sincs a képernyőn. A visszatérést a jobb alsó „fel" gomb adja.
 */
.fm-fejlec {
	background: var(--fm-kek);
	position: relative;
	z-index: 50;
}

/* Mérve: a 75 px-es logó fölött-alatt 10-10 px, a sáv így 95 px. */
.fm-fejlec .fm-kont {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-block: 10px;
}

/* A logó hivatkozás: a mutató alatt egy árnyalatnyit halványul. */
.fm-logo:hover,
.fm-logo:focus-visible {
	opacity: .82;
}

.fm-logo {
	font-family: var(--fm-font-cimsor);
	font-size: 1.15rem;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .03em;
	flex: none;
	margin-left: 10px;
}

.fm-menu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Mérve az eredetin: 46 px magas menüpontok, 13/20 px belső margóval. */
.fm-menu a {
	display: block;
	padding: 13px 20px;
	color: #fff;
	font-family: var(--fm-font-cimsor);
	font-size: 15px;
	/* Mérve: a menü az oldal alapértelmezett 300-as vastagságával fut. */
	font-weight: 300;
	line-height: 20px;
	text-transform: uppercase;
	/*
	 * Betűköz nélkül: az eredeti menü sem tágít. A korábbi .03em 15 px-en
	 * 0,45 px-t adott karakterenként, amitől minden menüpont 2-6 px-szel
	 * szélesebb lett, és a menü egésze 25 px-szel balra tolódott.
	 */
}

.fm-menu a:hover,
.fm-menu a:focus-visible,
.fm-menu .current-menu-item > a,
.fm-menu .current_page_item > a,
.fm-menu .current-menu-ancestor > a {
	color: var(--fm-narancs);
}

.fm-menu-gomb {
	display: none;
	border: 0;
	background: none;
	color: #fff;
	padding: 6px;
	cursor: pointer;
}

.fm-menu-gomb svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

/* ----------------------------------------------------------------- hero */

.fm-hero {
	position: relative;
	min-height: clamp(220px, 31.3vw, 470px);
	background: var(--fm-halvany) center/cover no-repeat;
}

.fm-hero img {
	width: 100%;
	height: clamp(220px, 31.3vw, 470px);
	object-fit: cover;
}

.fm-hero-cim {
	text-align: center;
	padding: 40px 20px 8px;
}

.fm-hero-cim h1 {
	margin-bottom: .25em;
}

/* --------------------------------------------------------------- szekció */

/*
 * Térközrendszer az eredetiről mérve: a szekciók belső margója 10 px, a
 * szekciók közti rés 40-50 px. A korábbi 64 px-es padding szekciónként
 * ~90 px többletet adott, ezért lett minden lejjebb.
 */
.fm-szekcio {
	padding-block: 20px;
}

.fm-szekcio--halvany {
	background: var(--fm-halvany);
	padding-block: 32px;
}

/*
 * Mérve: a listaoldalak címe 36/36, a főoldal mottója viszont 40/40 — a
 * kettő az eredetin sem azonos.
 */
/*
 * A cím fölött és alatt egyforma a levegő: a szekció 30 px-es felső belső
 * teréhez igazodik az alsó térköz is. A korábbi 8 px alul azt a látszatot
 * keltette, hogy a cím a kártyákhoz tapad, nem középen áll a saját sávjában.
 */
.fm-szekcio-cim {
	max-width: 1120px;
	margin-inline: auto;
	text-align: center;
	margin-bottom: 30px;
	font-size: 36px;
	line-height: 36px;
}

.home .fm-szekcio-cim {
	font-size: 40px;
	line-height: 40px;
}

/*
 * A címsorok lépcsője az eredetiről mérve. A kezdőlap főcíme 1200 px alatt nem
 * ugrik, hanem folyamatosan zsugorodik (768 px-en 33,52, 1200-on 40 — ez pont
 * a 22 px + 1,5vw egyenes), 768 alatt pedig fix 27 px. Enélkül a hosszú magyar
 * összetett szavak keskeny kijelzőn kilógnak a lapból.
 */
@media (max-width: 1199px) {
	.home .fm-szekcio-cim {
		font-size: calc(22px + 1.5vw);
		line-height: 1;
	}
}

@media (max-width: 767px) {
	.fm-szekcio-cim {
		font-size: 26px;
		line-height: 30px;
	}

	.home .fm-szekcio-cim {
		font-size: 27px;
		line-height: 27px;
	}

	.fm-cta__szoveg h2 {
		font-size: 35px;
		line-height: 35px;
	}
}

.fm-szekcio-alcim {
	text-align: center;
	margin-bottom: 32px;
	color: var(--fm-szoveg);
}

/* ---------------------------------------------------------------- kártya */

/* Mérve: 3 × 364 px kártya, 24 px köz — pontosan kitölti az 1140 px-es sávot. */
.fm-racs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

@media (max-width: 1024px) {
	.fm-racs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.fm-racs {
		grid-template-columns: minmax(0, 1fr);
	}
}

.fm-kartya {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--fm-keret);
	border-radius: var(--fm-radius);
	overflow: hidden;
	/*
	 * Az `opacity` SZÁNDÉKOSAN nincs az átmenetek között. A kártya a
	 * betöltéskor nem úszik be, hanem egyszerűen ott van — ugyanaz a döntés,
	 * mint a fejlécképnél, és ugyanabból az okból.
	 *
	 * Volt egy változat, ami 0,4 másodperc alatt halványította be a kártyákat.
	 * A méréseken hibátlan volt: az átlátszóság szép egyenletes vonalban ment
	 * 0-tól 1-ig, elrendezés-ugrás nélkül. A SZEMNEK mégis rossz volt. Egy
	 * gyorsítótárból érkező lapon ugyanis alig van mire várni: a doboz épp
	 * csak megjelenik, és már halványodik is — ez minden egyes
	 * lapbetöltésnél egy pislogás. Három kártyán zavaró, ötvenen tűrhetetlen.
	 *
	 * A lényeg — hogy a kártya a KÉPÉVEL EGYÜTT, egyszerre kerüljön a helyére,
	 * ne jelölők lebegjenek üres dobozok fölött — nem az animációtól van,
	 * hanem a visszatartástól. Az megmarad; csak az áttűnés megy el.
	 */
	transition:
		box-shadow .34s cubic-bezier(.22, .61, .36, 1),
		transform .34s cubic-bezier(.22, .61, .36, 1);
}

/*
 * A kártya az eredetin nem emelkedik meg és nem kap árnyékot: a mutatóra
 * egyedül a cím színe vált. A hovert a kártyához kötjük, nem a címhez: a
 * teljes felületet lefedő hivatkozás miatt a mutató amúgy sem a cím fölött
 * áll, amikor a látogató a kártyára mutat.
 */
.fm-kartya:hover .fm-kartya__cim a,
.fm-kartya__cim a:focus-visible {
	color: var(--fm-kek);
}

.fm-kartya--kep img {
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.fm-kartya--kep:hover img {
	transform: scale(1.05);
}

.fm-kartya__cim a {
}

.fm-kartya__kep {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--fm-halvany);
}

.fm-kartya__kep img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Címkék az eredeti elrendezés szerint: a kiemelés balra, az állapot jobbra.
 * Így a két jelölés akkor sem takarja egymást, ha egy hirdetésen mindkettő ott van.
 */
.fm-cimke {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	/* Mérve az eredetin: 52x18 px, 10 px sormagasság, 4 px margó és sugár. */
	padding: 4px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .65);
	color: #fff;
	font-size: 10px;
	line-height: 10px;
	/* Mérve: az állapotcímkék az oldal 300-as alapvastagságával futnak. */
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/*
 * A címkeszínek az eredeti oldalról mérve.
 *
 * Az ELKELT hirdetés (kiadva / eladva) a semleges sötét alapot kapja: ez nem
 * ajánlat, csak tájékoztatás — nem szabad, hogy magára húzza a tekintetet.
 * Ami viszont MÉG ELÉRHETŐ, az hívogat, és a kettőnek ránézésre el kell
 * válnia: a kiadó kék, az eladó meleg narancs. Így a listán végigfutva a szem
 * a színből tudja, mit talált, mielőtt a szót elolvasná.
 */
.fm-cimke--kiadva,
.fm-cimke--eladva {
	background: rgba(0, 0, 0, .65);
}

.fm-cimke--kiado {
	background: var(--fm-kek);
}

.fm-cimke--elado {
	background: var(--fm-narancs);
}

.fm-cimke--kiemelt {
	right: auto;
	left: 10px;
	background: #77c720;
}

/* Kép-hátteres változat (archívum) */

/* A háttér a kép betöltéséig látszik: a lap halvány alapszíne kevésbé
   feltűnő, mint a sötét szürke. */
.fm-kartya--kep {
	border: 0;
	background: var(--fm-halvany);
}

.fm-kartya--kep .fm-kartya__kep {
	aspect-ratio: 364 / 273;
	height: 100%;
}

/*
 * A fedés sötétít, hogy a fotóra írt fehér szöveg olvasható maradjon — világos
 * képen (fehér falú szoba, égbolt) enélkül a cím és az ár elveszne.
 *
 * KORÁBBAN TÚLLŐTT A CÉLON: 95%-os feketével indult, és 45%-ig 85%-on maradt.
 * Ez a kártya alsó felét gyakorlatilag átlátszatlan fekete sávvá tette — a fotó
 * alsó harmada, amiért a kártya egyáltalán képes, eltűnt alatta.
 *
 * Amit a MÉRÉS mondott: a cím a fedés 73%-ánál ül, az ár a 16%-ánál. A sötétség
 * tehát pont ott volt a legerősebb, ahol a legkevésbé kellett — az ár egyetlen
 * rövid sora alatt, a fotó alján.
 *
 * A megoldás nem az, hogy egyenletesen csökkentjük. A gradiens ALAKJA változik:
 * a csúcs jóval alacsonyabb, és a görbe végig ereszkedik, plató nélkül. Egy
 * folyamatos átmenetet a szem fényként lát, egy platót viszont sávként — ezért
 * hatott az előző „fekete aljúnak” akkor is, amikor még átlátszó volt.
 *
 * A helyi olvashatóságot a szövegárnyék viszi (lásd lentebb): az pontosan a
 * betűk körül ad kontrasztot, anélkül hogy a képből bármit elvenne.
 */
.fm-kartya--kep .fm-kartya__fedes {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 20px;
	color: #fff;
	background: linear-gradient(to top,
		rgba(0, 0, 0, .55) 0%,
		rgba(0, 0, 0, .54) 32%,
		rgba(0, 0, 0, .52) 62%,
		rgba(0, 0, 0, .45) 84%,
		rgba(0, 0, 0, .18) 94%,
		rgba(0, 0, 0, 0) 100%);
}

/* Mérve: 18 px / 26 px, 500-as vonalvastagság, alatta 8 px. */
.fm-kartya--kep .fm-kartya__cim {
	font-size: 18px;
	line-height: 26px;
	font-weight: 500;
	margin: 0 0 8px;
	/*
	 * KÉT árnyék, nem egy. A szűk és sötét (2 px) a betű élét rajzolja ki, a
	 * tág és halvány (10 px) egy alig látható glóriát ad köré. Együtt akkor is
	 * olvashatóvá teszik a szöveget, ha a fedés alig sötétít — és a fotóból
	 * semmit nem vesznek el, mert csak a betűk körül hatnak.
	 */
	text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .5);
}

.fm-kartya--kep .fm-kartya__cim a,
.fm-kartya--kep .fm-kartya__hely,
.fm-kartya--kep .fm-jellemzok,
.fm-kartya--kep .fm-ar {
	color: #fff;
}

.fm-kartya--kep .fm-kartya__hely,
.fm-kartya--kep .fm-jellemzok {
	/* Eddig nem volt rajtuk árnyék, mert a sűrű fedés elvégezte helyettük.
	   Halványabb fedés mellett nekik is kell. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

.fm-kartya--kep .fm-kartya__hely {
	margin-bottom: 6px;
	opacity: .85;
}

/* Mérve: 14 px / 16 px, 500-as vonalvastagság, ikon 15 px + 8 px köz. */
.fm-kartya--kep .fm-jellemzok {
	font-size: 14px;
	line-height: 16px;
	font-weight: 500;
	gap: 4px 18px;
}

.fm-kartya--kep .fm-jellemzok li {
	gap: 8px;
}

.fm-kartya--kep .fm-jellemzok svg {
	stroke: #fff;
	width: 15px;
	height: 15px;
}

/*
 * Mérve: 16 px / 16 px, 300-as vonalvastagsággal — a listakártyán az ár nem
 * félkövér, csak a hirdetés fejlécében és az oldalsávi widgetben az.
 */
.fm-kartya--kep .fm-ar {
	display: block;
	margin: 20px 0 0;
	font-size: 16px;
	line-height: 16px;
	font-weight: 300;
	/* Ugyanaz a kettős árnyék, mint a címen — az ár 300-as vonalvastagságú,
	   tehát vékonyabb betű, és még inkább rászorul. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .5);
}

/* Az egész kártya kattintható, de a cím marad a valódi, felolvasható link. */
/*
 * A kártya teljes felülete hivatkozás. A link nem burkolja be a tartalmat —
 * az blokkszintű elemeket tenne egy `a`-ba, és a képernyőolvasó az egész
 * kártyát egyetlen hosszú linkszövegként olvasná —, hanem átlátszó rétegként
 * fekszik rajta. A benne álló saját hivatkozások (kerület, jellemző) fölé
 * emelkednek, így külön is kattinthatók maradnak.
 */
.fm-kartya {
	position: relative;
}

.fm-kartya__fedolink {
	position: absolute;
	inset: 0;
	z-index: 3;
}

.fm-kartya__test a:not(.fm-kartya__fedolink),
.fm-kartya__fedes a:not(.fm-kartya__fedolink) {
	position: relative;
	z-index: 4;
}

.fm-kartya--kep .fm-kartya__cim a {
	position: relative;
	z-index: 4;
}

/* Mérve az eredeti vitrinben: 20 px belső tér, a cím alatt 15 px, az ár után 16 px. */
.fm-kartya__test {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
	gap: 15px;
}

.fm-kartya__cim {
	font-size: 18px;
	line-height: 1.35;
	margin: 0;
}

/* Mérve: 16 px / 22,5 px, 300-as vonalvastagság, az ár 16 px-en, kéken. */
.fm-kartya--alap .fm-kartya__cim {
	font-size: 16px;
	line-height: 22.5px;
	font-weight: 300;
}

.fm-kartya--alap .fm-ar {
	margin: 0;
	font-size: 16px;
	line-height: 16px;
	font-weight: 300;
}

.fm-kartya--alap .fm-jellemzok {
	font-size: 14px;
	line-height: 16px;
	font-weight: 500;
	color: var(--fm-szoveg-sotet);
	gap: 4px 12px;
}

.fm-kartya--alap .fm-jellemzok li {
	gap: 8px;
}

.fm-kartya--alap .fm-jellemzok svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
}

.fm-kartya--alap .fm-kartya__kep {
	aspect-ratio: 367 / 275;
}

.fm-kartya__cim a {
	color: var(--fm-cimsor);
}

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

.fm-kartya__hely {
	font-size: 12px;
	color: var(--fm-szoveg);
	margin: 0;
}

.fm-jellemzok {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--fm-szoveg);
}

.fm-jellemzok li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.fm-jellemzok svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--fm-kek);
	stroke-width: 1.7;
	flex: none;
}

.fm-kartya__lab {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--fm-keret);
}

.fm-ar {
	font-family: var(--fm-font-cimsor);
	font-size: 16px;
	font-weight: 700;
	color: var(--fm-kek);
	white-space: nowrap;
}

/* -------------------------------------------------------------- kiemelt */

/*
 * A kiemelt vitrin: egyetlen álló kártya a sáv közepén. Mérve az eredetin:
 * 367 px széles, a kép 367×275, a szövegblokk 20 px belső térrel.
 */
/*
 * Kiemelt vitrin. Rugalmas sor, nem rács: egyetlen kártya középre kerül, több
 * pedig egymás mellé — de mindegyik megtartja a 367 px-es vitrinszélességet,
 * hogy kettő vagy négy hirdetésnél se nyúljanak szét.
 */
.fm-kiemelt {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

/*
 * A 367 px az alapméret, nem parancs: háromnál a kártyák együtt 1161 px-t
 * kérnének a 1140-es sávban, ezért egy hajszálnyit zsugorodnak, és egy sorban
 * maradnak. A 300 px-es alsó határ alá viszont nem mennek — ott inkább tördel.
 */
.fm-kiemelt .fm-kartya {
	/*
	 * A 300 px-es alap és a 367-es felső korlát együtt adja a viselkedést:
	 * három kártya elfér egy sorban (3×300+60 ≤ 1140), ott a növekedés kitölti
	 * a sávot a maximumig, négynél viszont már tördel. Fordítva — 367-es
	 * alappal — a flexbox előbb tördelne, mint hogy egy hajszálnyit zsugorítson.
	 */
	flex: 1 1 300px;
	max-width: 367px;
	border: 0;
}

/* --------------------------------------------------------------- szűrő */

/*
 * Az összecsukott szűrő. Zárva mindössze egy gomb-szerű sor — az eredeti
 * listaoldal ránézésre változatlan marad, a szűrés mégis egy kattintásra van.
 */
.fm-szuro-doboz {
	margin-bottom: 24px;
}

.fm-szuro-doboz > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	padding: 9px 16px;
	border: 1px solid var(--fm-keret);
	border-radius: var(--fm-radius);
	background: #fff;
	color: var(--fm-szoveg-sotet);
	font-size: 14px;
	line-height: 20px;
	cursor: pointer;
	list-style: none;
}

.fm-szuro-doboz > summary::-webkit-details-marker {
	display: none;
}

.fm-szuro-doboz > summary:hover {
	border-color: var(--fm-kek);
	color: var(--fm-kek);
}

.fm-szuro-doboz > summary svg {
	width: 15px;
	height: 15px;
}

.fm-szuro-doboz[open] > summary {
	margin-bottom: 16px;
}

.fm-szuro {
	background: var(--fm-halvany);
	border: 1px solid var(--fm-keret);
	border-radius: var(--fm-radius);
	padding: 18px;
	margin-bottom: 28px;
}

.fm-szuro__racs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
	gap: 12px 16px;
}

/*
 * A cellák oszlopirányú flexek, a címke pedig kitölti a maradék helyet.
 * Enélkül egy kétsorosra törő címke lejjebb tolná a saját beviteli mezőjét,
 * és a sor összes vezérlője elcsúszna egymáshoz képest.
 */
/*
 * A „csak elérhető” kapcsoló. A rács többi cellája címke + mező egymás alatt;
 * ez egyetlen sor, ezért a saját cellájában alulra igazodik, hogy a mezők
 * vonalára essen és ne lógjon ki a sorból.
 */
.fm-szuro__kapcsolo {
	display: flex;
	align-items: flex-end;
}

/*
 * A szülő is bekerül a szelektorba, és ez nem stílusfelesleg.
 *
 * A `.fm-szuro label` szabály (lentebb) ugyanolyan fajsúlyú, mint egy csupasz
 * `.fm-szuro__kapcsolo label` — és mivel LENTEBB áll, ő nyerne. A doboz ekkor a
 * szöveg fölé, középre került, a többi mező vonalától elcsúszva. Ránézésre
 * elrontott elrendezés, a stíluslapban viszont semmi nem jelzi: mindkét szabály
 * érvényes és hibátlan, csak az egyik erősebb.
 */
.fm-szuro .fm-szuro__kapcsolo label {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding-bottom: 9px;
	text-transform: none;
	letter-spacing: normal;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
	user-select: none;
}

.fm-szuro__kapcsolo input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--fm-kek);
	cursor: pointer;
}

.fm-szuro__racs > div {
	display: flex;
	flex-direction: column;
}

.fm-szuro label {
	display: block;
	flex: 1;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--fm-cimsor);
	margin-bottom: 4px;
}

.fm-szuro select,
.fm-szuro input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--fm-keret);
	border-radius: 4px;
	background: #fff;
	font: inherit;
	font-size: .9rem;
	color: var(--fm-cimsor);
}

.fm-szuro__lab {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
}

.fm-talalat {
	font-size: .9rem;
	color: var(--fm-szoveg);
}

.fm-talalat strong {
	color: var(--fm-cimsor);
}

.fm-gomb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 24px;
	border: 1px solid var(--fm-kek);
	border-radius: 3px;
	background: var(--fm-kek);
	color: #fff;
	font-family: var(--fm-font-cimsor);
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	text-align: center;
}

/* A bérbeadói ajánlat gombja az eredetin jóval nagyobb: 24/24, 15-30 padding,
   keret nélkül — így lesz pontosan 54 px magas. */
.fm-cta .fm-gomb {
	font-size: 24px;
	line-height: 24px;
	padding: 15px 30px;
	border: 0;
	border-radius: 4px;
}

.fm-cta .fm-gomb svg {
	width: 21px;
	height: 24px;
}

.fm-gomb svg {
	width: 1em;
	height: 1em;
	flex: none;
}

/*
 * Hover: az eredetin minden gomb NARANCSRA vált (#F79A19), nem sötétebb kékre.
 * Ez a márka egyik legjellegzetesebb mozdulata — a kék/narancs váltás.
 */
.fm-gomb:hover,
.fm-gomb:focus-visible {
	background-color: var(--fm-narancs);
	border-color: var(--fm-narancs);
	color: #fff;
}

.fm-gomb--halvany {
	background: transparent;
	color: var(--fm-kek);
}

.fm-gomb--halvany:hover,
.fm-gomb--halvany:focus-visible {
	background-color: var(--fm-narancs);
	border-color: var(--fm-narancs);
	color: #fff;
}

.fm-gomb--narancs {
	background: var(--fm-narancs);
	border-color: var(--fm-narancs);
}

.fm-gomb--narancs:hover {
	background-color: #dd8712;
	border-color: #dd8712;
}

/*
 * A `hidden` attribútum tényleg rejtsen.
 *
 * A böngésző beépített szabálya (`[hidden] { display: none }`) a leggyengébb,
 * amit van: BÁRMELY saját `display` felülírja. Így egy `display: flex`
 * kártyát vagy listatételt hiába jelölünk meg `hidden`-nel — ott marad,
 * helyet foglal, csak épp senki nem érti, miért.
 *
 * Ebbe a csapdába ezen az oldalon már kétszer beleléptünk: előbb a
 * hirdetésszűrőnél (`.fm-kartya`), aztán az oldalsáv rövidítésénél
 * (`.fm-mini` — a rejtett tételek tovább nyomták a sávot, és a mérés hiába
 * volt helyes). Ezért nem elemenként foltozzuk, hanem egyszer, mindenre.
 *
 * Az `!important` itt nem lustaság: pontosan az a dolga, hogy a `hidden`
 * erősebb legyen minden `display`-nél. Ha valamit láthatóvá kell tenni,
 * a `hidden`-t kell levenni — nem a stílust felülírni.
 */
[hidden] {
	display: none !important;
}

.fm-ures {
	padding: 40px 0;
	text-align: center;
	color: var(--fm-szoveg);
}

/* ------------------------------------------------------- ingatlan aloldal */

/* A címsáv az eredetin 12 px-el beljebb kezdődik, alatta 30 px a galériáig. */
.fm-ingatlan-fej {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 24px;
	padding-inline: 12px;
	margin-bottom: 30px;
}

/* A címblokk az eredetin 594 px — a sáv fele —, az ár a jobb szélen áll. */
.fm-ingatlan-fej > div {
	flex: 0 1 594px;
	min-width: 0;
}

/* Mérve: 28 px, az összeg 700-as, a „/hó” utótag 400-as vonalvastagsággal. */
.fm-ingatlan-fej .fm-ar {
	flex: 0 0 auto;
	margin: 0;
	font-size: 28px;
	color: var(--fm-szoveg-sotet);
	text-align: right;
}

.fm-ar__per {
	font-weight: 400;
}

/*
 * A négyzetméterár a vételár alatt, halványabban.
 *
 * Nem az ár mellé kerül, hanem alá: két szám egy sorban versenyez egymással,
 * és a látogató elsőre a teljes összeget keresi. Külön sorban viszont
 * kiegészítés marad — pontosan az, ami.
 */
.fm-ar__nm {
	display: block;
	margin-top: 2px;
	font-size: .5em;
	font-weight: 400;
	color: var(--fm-szoveg);
}

/* Mérve: 30 px betű, 36 px sordoboz, 500-as vonalvastagság, #383838. */
.fm-ingatlan-fej h1 {
	font-size: 30px;
	line-height: 1.2;
	font-weight: 500;
	color: var(--fm-szoveg-sotet);
	/*
	 * Az eredetin a címdoboz jobb oldalán 24 px marad az árnak. Egy pixellel
	 * kevesebbet hagyunk: a leghosszabb cím pont a doboz szélességével egyezik,
	 * és a tört pixeleken múlik, hogy egy vagy két sorba fut — a ráhagyás nélkül
	 * a magyar és az angol címek fele két sorosra törne.
	 */
	margin: 0 23px 8px 0;
}



/* Az aloldal háttere világos, a tartalom fehér dobozokban ül. */
.fm-oldal {
	background: var(--fm-halvany);
}

/* Az aloldal tartalomsávja 1210 px — szélesebb a többi oldalénál. */
.fm-oldal > .fm-kont {
	max-width: 1210px;
}

/*
 * Mérve: 12 px behúzás, 13 px, 25 px sormagasság, alatta 16 px a címig.
 * Szándékosan nem rugalmas doboz: a hivatkozások így inline elemek maradnak,
 * és a magasságukat a betűkép adja (16 px), nem a 25 px-es sorköz.
 */
.fm-morzsa {
	padding-inline: 12px;
	margin-bottom: 16px;
	font-size: 13px;
	line-height: 25px;
	color: var(--fm-szoveg-sotet);
}

.fm-morzsa > span[aria-hidden] {
	margin-inline: 10px;
}

/*
 * Az eredetin a morzsa nem vált színt — nálunk igen, ahogy minden más
 * kattintható szöveg. A kék alapszínről narancsra: azonos színnel a
 * visszajelzés láthatatlan lenne.
 */
.fm-morzsa a:hover,
.fm-morzsa a:focus-visible {
	color: var(--fm-narancs);
}

/* Csak a kezdőlap-hivatkozás visel ikont. */
.fm-morzsa > a:first-child svg {
	width: 13px;
	height: 13px;
	margin-right: 10px;
	vertical-align: -2px;
}

.fm-morzsa span[aria-hidden] {
	opacity: .5;
}

/* Mérve az eredetin: a záró elem 75%-os feketével, halványabban a linkeknél. */
.fm-morzsa__vege {
	color: rgba(33, 37, 41, .75);
}


.fm-doboz {
	background: #fff;
	border: 1px solid var(--fm-keret);
	border-radius: var(--fm-radius);
	padding: 30px;
	margin-bottom: 30px;
}

/* Mérve az eredetin: 18 px / 21,6 px sorköz, #383838, alatta 30 px. */
.fm-doboz > h2,
.fm-doboz__fej h2 {
	font-size: 18px;
	line-height: 21.6px;
	color: var(--fm-szoveg-sotet);
	margin-bottom: 30px;
}

/*
 * Az eredetin minden szekciócím vízszintes fejlécsávban ül (a jobb oldalára
 * kerülhet gomb) — egyedül a leírásé nem. Ettől a cím a szövegéhez zsugorodik,
 * a leírásé viszont teljes szélességű marad. Ezt a különbséget megtartjuk.
 */
.fm-doboz__fej {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 30px;
}

.fm-doboz__fej h2 {
	margin: 0;
}

.fm-apro {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--fm-szoveg);
}

/* Galéria: nagy főkép, alatta bélyegkép-sor. */

/* A galéria méretei az eredetiről: főkép 823×617, bélyegkép 99×74, köz 5 px. */

.fm-galeria {
	margin-bottom: 30px;
}

.fm-galeria__media {
	position: relative;
}

/* A képnézet/térkép fülpár a főkép jobb felső sarkában, 30 px-re a szélektől. */
.fm-galeria__fulek {
	position: absolute;
	z-index: 2;
	top: 30px;
	right: 30px;
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fm-galeria__ful {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: var(--fm-radius);
	background: rgba(0, 0, 0, .65);
	color: #fff;
	cursor: pointer;
}

.fm-galeria__ful[aria-pressed="true"] {
	background: var(--fm-narancs, #f79a19);
}

.fm-galeria__ful svg {
	width: 18px;
	height: 18px;
}

/*
 * A kép és a térkép egymáson fekszik, és áttűnéssel váltják egymást. A
 * korábbi `hidden` attribútum azonnal kapcsolt: a fotó eltűnt, a térkép
 * beugrott — pont az a fajta villanás, amit sehol nem szeretnénk.
 *
 * A rejtett réteg `visibility: hidden`-t is kap, hogy ne fogja el a
 * kattintást, és a billentyűzet se álljon meg rajta.
 */
.fm-galeria__terkep {
	position: absolute;
	inset: 0;
	border: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--fm-radius);
}

.fm-galeria__fo,
.fm-galeria__terkep {
	transition: opacity .24s ease, visibility .24s;
}

.fm-galeria__fo[data-rejtve],
.fm-galeria__terkep[data-rejtve] {
	opacity: 0;
	visibility: hidden;
}

/*
 * A szűrő nyílása és csukódása. A `::details-content` a nyitható elem
 * tartalmát adja: enélkül a `<details>` az `open` attribútummal egyszerre,
 * ugrásszerűen jelenítené meg. Ahol a böngésző nem ismeri, pontosan ez marad.
 */
.fm-szuro-doboz::details-content {
	height: 0;
	overflow: hidden;
	content-visibility: hidden;
	transition:
		height .28s ease,
		content-visibility .28s allow-discrete;
}

.fm-szuro-doboz[open]::details-content {
	height: auto;
	content-visibility: visible;
}

.fm-galeria__fo {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--fm-radius);
	overflow: hidden;
	background: var(--fm-halvany);
	cursor: zoom-in;
	aspect-ratio: 4 / 3;
}

.fm-galeria__fo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Fix nyolc oszlop, nem automatikus kitöltés: az `auto-fill` a 823 px-es
 * sávban hetet fektetett le, és a nyolcadik — épp a „+X” jelölést viselő —
 * bélyeg magában maradt a következő sorban.
 */
.fm-galeria__sor {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 5px;
	margin-top: 5px;
}

.fm-galeria__elem {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: var(--fm-halvany);
	aspect-ratio: 4 / 3;
	cursor: zoom-in;
	overflow: hidden;
}

.fm-galeria__elem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.fm-galeria__elem:hover img,
.fm-galeria__elem:focus-visible img {
	transform: scale(1.06);
}

/*
 * A galéria vezérlőinek is van visszajelzésük. A bélyegképnél eddig csak a
 * kép nagyítása jelezte a mutatót, a füleknél és a főképnél semmi — pedig
 * mindhárom kattintható.
 */
.fm-galeria__ful:hover,
.fm-galeria__ful:focus-visible {
	background-color: rgba(0, 0, 0, .85);
}

.fm-galeria__ful[aria-pressed="true"]:hover,
.fm-galeria__ful[aria-pressed="true"]:focus-visible {
	background-color: #dd8712;
}

/*
 * A bélyegkép és a főkép belső gyűrűt kap. `box-shadow` és nem `outline`: az
 * előbbi animálható, tehát ugyanabban a ritmusban jelenik meg, mint minden más
 * visszajelzés a lapon.
 */
.fm-galeria__elem:hover,
.fm-galeria__fo:hover {
	box-shadow: inset 0 0 0 2px var(--fm-kek);
}

/* A főkép enyhén világosodik is: jelzi, hogy nagyítható. */
.fm-galeria__fo img {
	transition: opacity .34s cubic-bezier(.22, .61, .36, 1);
}

.fm-galeria__fo:hover img,
.fm-galeria__fo:focus-visible img {
	opacity: .93;
}

.fm-galeria__tobb {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-family: var(--fm-font-cimsor);
	font-size: 18px;
	line-height: 24px;
}

.fm-ingatlan {
	display: grid;
	grid-template-columns: 70% 30%;
	gap: 0;
	align-items: start;
}

.fm-ingatlan__fo,
.fm-oldalsav {
	padding-inline: 12px;
}

/*
 * Áttekintő rács. Mérve az eredetin: hat oszlop, cellánként 131 px, a doboz
 * széléhez képest 12-12 px negatív margóval — így a bal szélső érték pontosan
 * a szöveg vonalára esik. Cellánként két sor: ikon + érték, alatta a mező neve.
 */
.fm-attekintes {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 24px 0;
	margin: 24px -12px 0;
	padding: 0;
	list-style: none;
}

.fm-attekintes li {
	display: block;
	padding-inline: 12px;
	font-size: 15px;
	line-height: 25px;
}

.fm-attekintes__ertek {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Mérve: az ikon és a mezőnév #5C6872, csak az érték a sötét törzsszín. */
.fm-attekintes svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: var(--fm-halvany-szoveg);
	stroke-width: 1.5;
	flex: none;
}

.fm-attekintes b {
	font-family: var(--fm-font-cimsor);
	font-size: 15px;
	line-height: 25px;
	font-weight: 700;
	color: var(--fm-szoveg-sotet);
}

/*
 * A mezőnév az érték alá kerül, nem az ikon alá: az ikon szélességével
 * behúzva a két sor egy oszlopba rendeződik. Enélkül keskeny nézetben a
 * „86 m²” és az „alapterület” eltolva állt egymás alatt, és a rács kuszának
 * látszott.
 */
.fm-attekintes__cimke {
	display: block;
	padding-left: 32px;
	/*
	 * A hosszabb feliratok („nincs a házban”) két sorba törnek a hatoszlopos
	 * rácsban. A `balance` egyenletesen osztja el őket, így a törés
	 * szándékosnak látszik, nem elcsúszásnak.
	 */
	text-wrap: balance;
	font-size: 15px;
	line-height: 25px;
	color: var(--fm-halvany-szoveg);
}

@media (max-width: 1024px) {
	.fm-attekintes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.fm-attekintes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mérve: két oszlop, soronként 42 px (8 px fent-lent + 25 px sor). */
.fm-adatok {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 0;
}

/* A térkép fölötti cím/irányítószám lista teljes szélességben fut, belső tér nélkül. */
.fm-adatok--egy {
	grid-template-columns: 1fr;
	margin-bottom: 16px;
}

.fm-adatok--egy div {
	padding-inline: 0;
}

/*
 * A részletek táblázata az eredetin kiemelt, világoskék mezőben ül — ez
 * választja el a hosszú adatlistát a leírás folyó szövegétől. A 18 px-es
 * oldalsó tér adja ki a mért 362 px-es cellákat a 761 px-es dobozban.
 */
.fm-adatok--kiemelt {
	background: rgba(16, 155, 233, .34);
	border: 0;
	border-radius: 4px;
	padding: 30px 18px;
	gap: 0;
}

.fm-adatok div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--fm-keret);
}

.fm-adatok dt,
.fm-adatok dd {
	font-size: 15px;
	line-height: 25px;
	color: var(--fm-szoveg-sotet);
}

.fm-adatok dt {
	font-weight: 700;
}

.fm-adatok dd {
	font-weight: 400;
	margin: 0;
}

.fm-adatok--kiemelt div {
	border-bottom-color: rgba(84, 89, 95, .22);
}

.fm-adatok--kiemelt div:last-child,
.fm-adatok--egy div:last-child {
	border-bottom: 0;
}

/* Mérve: a mezőnév félkövér, az érték a törzs vastagságával fut — mindkettő
   a sötét törzsszínen, kiemelt mezőben is. */
.fm-adatok dd {
	margin: 0;
	font-weight: 300;
	text-align: right;
}

/*
 * Nagyon keskeny kijelzőn (320 px) az adatsor két oszlopa nem fér el egymás
 * mellett: a mezőnév és az érték együtt szélesebb, mint a lap, és 16 px-es
 * oldalirányú görgetést okozott. Ilyenkor egymás alá kerülnek, az érték balra
 * zárva — a jobbra igazítás csak akkor olvasható, ha van mihez viszonyítani.
 */
/*
 * Keskeny kijelzőn a részletek táblája egy oszlop. Kettőben a mezőnév és az
 * érték nem fér el egymás mellett: a szomszédos cellák szövege összeér, és
 * olyasmi olvasható ki belőle, hogy „325.000Ft/hóalapterület”. Egy oszlopban
 * minden sor teljes szélességet kap, a mezőnév balra, az érték jobbra.
 */
@media (max-width: 782px) {
	.fm-adatok,
	.fm-adatok--kiemelt {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * A legkeskenyebb kijelzőn a mezőnév és az érték egymás alá kerül. 340 px
 * fölött egy sorba is kiférnek — a leghosszabb pár a „légkondicionáló: van”,
 * ami 15 px-es betűvel 160 px köré jön ki.
 */
@media (max-width: 340px) {
	.fm-adatok > div {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.fm-adatok dd {
		text-align: left;
	}
}

/* Oldalsávi mini-lista (hasonló ingatlanok) — mérve az eredetin:
   widget 289×118, kép 90×90 + 16 px, cím 13/22 (500), jellemzők 12/16
   ikonnal 14×14 + 8 px, típussor teljes szélességben, ár 13/22 (700). */

.fm-mini-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fm-mini {
	display: flex;
	align-items: center;
	margin-top: 16px;
}

.fm-mini__kep {
	flex: 0 0 90px;
	width: 90px;
	height: 90px;
	margin-right: 16px;
	display: block;
	border-radius: 4px;
	overflow: hidden;
	background: var(--fm-halvany);
}

.fm-mini__kep img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fm-mini__test {
	flex: 1 1 auto;
	min-width: 0;
}

.fm-mini__cim {
	display: block;
	color: var(--fm-szoveg-sotet);
	font-weight: 500;
	font-size: 13px;
	line-height: 22px;
	margin-bottom: 4px;
}

/*
 * Az eredeti oldalsávi widgetben a cím nem reagált a mutatóra. Nálunk igen:
 * minden kattintható szöveg ugyanazt a visszajelzést adja, különben a
 * látogatónak próbálgatnia kell, mi hivatkozás és mi nem.
 */
.fm-mini__cim:hover,
.fm-mini__cim:focus-visible {
	color: var(--fm-narancs);
}

.fm-mini .fm-jellemzok {
	font-size: 12px;
	line-height: 16px;
	gap: 8px 12px;
	margin-bottom: 8px;
}

.fm-mini .fm-jellemzok li {
	gap: 8px;
}

.fm-mini .fm-jellemzok svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
}

/* Az eredeti widgetben minden szöveg és ikon egyszínű — nincs kék kiemelés. */
.fm-mini .fm-jellemzok,
.fm-mini .fm-ar {
	color: var(--fm-szoveg-sotet);
}

/* A típus az eredetin az ikonsor alatt, teljes szélességben, csupa nagybetűvel,
   600-as vonalvastagsággal. */
.fm-jellemzok__tipus {
	flex: 0 0 100%;
	text-transform: uppercase;
	font-weight: 600;
}

.fm-mini .fm-ar {
	display: block;
	font-size: 13px;
	line-height: 22px;
}

/* Mérve az eredetin: 28 px magas (8+12+8), 12 px betű, a cím alatt 8 px-re. */
.fm-cimke--allo {
	position: static;
	display: inline-block;
	margin-top: 0;
	padding: 8px 10px;
	font-size: 12px;
	line-height: 12px;
}

/* Mérve az eredeti térkép-gombon: 33 px magas, 15 px betű, 9 px oldalt. */
.fm-gomb--kicsi {
	padding: 4px 9px;
	font-size: 15px;
	line-height: 25px;
	gap: 4px;
}

.fm-gomb--kicsi svg {
	width: 15px;
	height: 15px;
}

.fm-terkep {
	height: 340px;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 20px;
	border-radius: var(--fm-radius);
	overflow: hidden;
	background: var(--fm-halvany);
}

.fm-video {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	border-radius: var(--fm-radius);
	overflow: hidden;
	background: #000;
}

.fm-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
 * Az oldalsáv csak oszlop: az eredetin a fehér doboz a widget maga
 * (mérve: oszlop 363 px, 12 px belső tér, widget 339 px, benne 25 px padding).
 */
/*
 * Ragadós oldalsáv. A fejléc elgörög, ezért 20 px elég a lap tetejétől.
 *
 * KORÁBBAN a sáv MAGA volt görgethető (`overflow-y: auto`), hogy az alacsony
 * kijelzőkön se vesszen el az alja. Ennek két ára volt: megjelent egy második
 * görgetősáv a lapon belül, és a görgő a doboz fölött nem a lapot mozgatta —
 * a látogató ilyenkor azt hiszi, megakadt az oldal.
 *
 * Helyette a lista rövidül: annyi ajánló látszik, amennyi a képernyő
 * magasságába tényleg belefér (`oldalsavotRovidit()` az app.js-ben). Így nincs
 * mit görgetni a dobozon belül, mert nem lóg ki semmi.
 *
 * A ragadós viselkedést az `fm-js` osztályhoz kötjük, mert a kettő EGYÜTT
 * működik: rövidítés nélkül a rögzített sáv alja elérhetetlen lenne. Ha nincs
 * JavaScript, a sáv egyszerűen a tartalommal együtt görög — minden elérhető.
 */
.fm-oldalsav {
	position: static;
}

html.fm-js .fm-oldalsav {
	position: sticky;
	top: 20px;
	/* `dvh`, nem `vh`: mobilon a címsáv ki-be csúszása így nem vágja el az alját. */
	max-height: calc(100dvh - 40px);
	/*
	 * Biztonsági háló, nem működési elem: ha egy tétel a rövidítés után
	 * mégis túlnyúlna (például kép nélküli, szokatlanul hosszú cím miatt),
	 * inkább levágjuk, mint hogy kilógjon a keretből.
	 */
	overflow: hidden;
}

.fm-oldalsav .fm-doboz {
	padding: 25px;
	margin-bottom: 25px;
	border: 0;
}

/*
 * Csak a szöveg fogható meg.
 *
 * A böngésző alapból minden hivatkozást és képet húzhatónak tekint: egy ikonra
 * vagy gombra lenyomva az egeret a mutató „elviszi” az elemet egy áttetsző
 * kerettel, és a hivatkozás címét ejti a célba. Szövegnél ez hasznos, egy
 * ikonnál vagy egy gombnál csak zavaró — kijelölni akkor sincs mit rajtuk.
 * A szövegek kijelölhetősége érintetlen marad.
 */
svg,
img,
button,
.fm-gomb,
.fm-cimke,
.fm-menu-gomb,
.fm-galeria__elem,
.fm-galeria__ful,
.fm-tetejere,
.fm-kartya__fedolink {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}

/* A képek külön is: a `draggable` attribútum nélkül a Chrome még húzná őket. */
img {
	-webkit-user-drag: none;
}


/* ---------------------------------------------------------------- űrlap */

/* Mérve: a mezőcsoportok 85 px-enként követik egymást (25 címke + 8 + 42 mező),
   a doboz belsejében további 10 px-el beljebb. */
/* Az alsó 10 px az eredetin is megvan: a gomb nem ér le a doboz aljáig. */
.fm-urlap {
	display: grid;
	gap: 10px;
	padding-inline: 10px;
	padding-bottom: 10px;
}

/*
 * Az űrlap címkéi az eredetin Lato 16 px-en, halványszürkén futnak, és a
 * szövegükhöz zsugorodnak — nem a mező teljes szélességét foglalják.
 */
.fm-urlap label {
	display: inline-block;
	font-family: var(--fm-font-urlap);
	font-size: 16px;
	line-height: 25px;
	font-weight: 500;
	color: var(--fm-szoveg);
	margin-bottom: 8px;
}

.fm-urlap .fm-gdpr {
	font-family: var(--fm-font-urlap);
	font-size: 16px;
}

/* Mérve: 42 px magas mezők, 14 px betű, 6 px sarok, #54595F. */
.fm-urlap input,
.fm-urlap textarea {
	width: 100%;
	padding: 6px 12px;
	border: 1px solid var(--fm-keret);
	border-radius: 6px;
	font: inherit;
	font-size: 14px;
	line-height: 28px;
	color: var(--fm-cimsor);
	background: #fff;
}

/*
 * Az üzenetmező az eredetin 90 px magas, 14 px-es térközzel. A `block`
 * megjelenítés nem díszítés: `inline-block`-ként a mező alatt ott marad a
 * betűk leszállóágának sortere, és a mezőcsoport 7 px-szel magasabb lesz.
 */
.fm-urlap textarea {
	display: block;
	min-height: 90px;
	padding: 5px 14px;
	border-radius: 3px;
	line-height: 25px;
	resize: vertical;
}

.fm-mez {
	position: absolute !important;
	left: -9999px;
}

.fm-uzenet {
	padding: 12px 16px;
	border-radius: 4px;
	border-left: 4px solid;
}

.fm-uzenet--ok {
	background: #edf7ed;
	border-color: #2e7d32;
	color: #1b5e20;
}

.fm-uzenet--hiba {
	background: #fdecea;
	border-color: #d32f2f;
	color: #a71d17;
}

/* --------------------------------------------------------------- lábléc */

/*
 * A lábléc az eredetin fehér hátterű, a linkek pedig kékek (#109BE9) —
 * nem sötétszürkék. Mérve: 15px / Russo One.
 */
.fm-lablec {
	background: #fff;
	color: var(--fm-szoveg-sotet);
	font-size: 15px;
	/* Az eredetin 40 px üres sáv választja el a lábléc fölötti tartalomtól. */
	padding-top: 40px;
}

.fm-lablec a {
	color: #706464;
}

.fm-lablec a:hover,
.fm-lablec a:focus-visible {
	color: var(--fm-narancs);
}

.fm-lablec__racs > div {
	padding-inline: 10px;
}

.fm-lablec__racs {
	display: grid;
	grid-template-columns: 319px 275px;
	justify-content: start;
	gap: 10px;
	padding-block: 50px;
}

.fm-lablec h2 {
	font-size: 24px;
	margin-bottom: .8em;
}

/* Mérve: 28 px magas sorok, 2 px köz — összesen 30 px lépésköz. */
.fm-lablec ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

.fm-lablec li {
	display: flex;
	align-items: center;
	gap: 0;
	min-height: 28px;
}

/* A menüelemeknél az ikon a linken BELÜL van (wp_nav_menu link_before). */
.fm-lablec li > a {
	display: inline-flex;
	align-items: center;
	gap: 0;
}

.fm-lablec svg {
	width: 20px;
	height: 14px;
	color: var(--fm-kek);
	flex: none;
}

.fm-lablec__alj {
	padding-block: 5px;
	font-size: 12px;
	color: var(--fm-cimsor);
}

/*
 * A készítő-logó a 12 px-es szövegsorban ül. Az inline-flex azért kell, mert a
 * kép alapból az alapvonalra ül, és alatta marad egy pár pixeles rés — attól a
 * sor magasabb lesz, mint a szöveg, és a lábléc alsó sávja megnő.
 * A gap fél szóköznyi: a kettőspont és a logó között ugyanaz a távolság marad,
 * mint korábban a kettőspont és a szöveges link között.
 */
.fm-lablec__keszito {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.fm-lablec__keszito img {
	display: block;
	height: 18px;
	width: auto;
}

/*
 * A hivatkozás csak a logót fogja körbe (a „Fejlesztő és karbantartó:” felirat
 * kívül van), így a hivatkozás halványítása pontosan a logót halványítja. Az
 * érték a fejléc logójáéval egyezik: ugyanaz a mozdulat, ugyanaz a mérték.
 * Az átmenet a lap közös `a` szabályából jön — nem kell külön időzítés.
 */
.fm-lablec__keszito a:hover,
.fm-lablec__keszito a:focus-visible {
	/*
	 * Erősebb halványodás, mint a fejléc logójánál (.82). Ez a jel 31 px széles
	 * és fekete-fehér: ekkora felületen a 18%-os változás a mérőműszernek
	 * látszik, a szemnek nem. A nagy, színes fejléclogónál ugyanez a 18%
	 * bőven elég.
	 */
	opacity: .5;
}

.fm-lablec__alj-racs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
}

/* ------------------------------------------------- főoldali szekciók */

/* Mérve az eredetin: 200×75, 10 px-el beljebb a sáv szélétől. */
.fm-logo__kep {
	width: 200px;
	max-height: 75px;
	height: auto;
}

@media (max-width: 782px) {
	/*
	 * A magasság vezet, a szélesség követi. A korábbi `width: 200px` és
	 * `max-height: 44px` együtt összenyomta a képet: a böngésző a szélességet
	 * kötelezőnek vette, a magasságot pedig levágta — a logó ellapult.
	 */
	.fm-logo__kep {
		width: auto;
		height: 54px;
		max-height: none;
	}
}

.fm-zaszlo {
	font-size: 14px;
	line-height: 1;
}

.fm-szekcio--szuk {
	padding-top: 30px;
	padding-bottom: 20px;
}

/* A „kiemelt ajánlatunk” / „kínálatunkból” feliratok az eredetiben
   kisbetűsek és a törzsszöveg színénél sötétebbek. */
.fm-alcim--kiemelt {
	font-family: var(--fm-font-cimsor);
	font-size: clamp(1.15rem, 2.35vw, 1.875rem);
	line-height: 1.2;
	color: var(--fm-cimsor);
	text-transform: lowercase;
	/* A két sor külön gondolat: a főcím a szolgáltatás, az alcím a kínálat. */
	margin-top: 40px;
	margin-bottom: 28px;
}



.fm-kiemelt__gomb {
	margin: 6px 0 0;
}

.fm-kozepre {
	text-align: center;
	margin: 32px 0 0;
}

/* Bemutatkozás */

.fm-bemutatkozas__racs {
	display: grid;
	grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
	gap: clamp(24px, 3.5vw, 44px);
	align-items: start;
	background: #fff;
	border-radius: var(--fm-radius);
	padding: clamp(24px, 3vw, 40px);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

/*
 * A bemutatkozó szöveg az eredetin balra zárt — a korábbi sorkizárás
 * téves feltevés volt, a mérés `text-align: start`-ot mutat.
 */
.fm-bemutatkozas__szoveg {
	text-align: left;
}

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

.fm-bemutatkozas__kep img {
	width: 100%;
	border-radius: var(--fm-radius);
}

/* Bérbeadói ajánlat — az eredetiben önálló, lekerekített világoskék doboz. */

.fm-cta {
	padding-block: clamp(20px, 3vw, 32px);
}

/* Mérve: 1140×403-as doboz, benne két 550 px-es oszlop 20 px köz. */
.fm-cta__racs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: center;
	background: rgba(16, 155, 233, .11);
	border-radius: 5px;
	padding: 10px;
}

/* A szövegoszlop az eredetin további 18 px-el beljebb kezdődik. */
.fm-cta__szoveg {
	padding-inline: 18px;
	text-align: center;
}

/* Mérve: 39/39, 500-as vonalvastagság, #54595F. */
.fm-cta__szoveg h2 {
	font-size: 39px;
	line-height: 39px;
	font-weight: 500;
	color: var(--fm-cimsor);
	margin-bottom: 20px;
}

/* A bekezdés és a gomb közé az eredetin egy 20 px-es térköz-elem is kerül. */
.fm-cta__szoveg p {
	font-family: var(--fm-font-torzs);
	font-size: 20px;
	font-weight: 400;
	line-height: 25px;
	color: var(--fm-szoveg-sotet);
	margin-bottom: 60px;
}

.fm-cta__kep img {
	width: 400px;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	margin-inline: auto;
	background: transparent;
}

/* Kapcsolatfelvétel */

/*
 * A főoldali kapcsolatfelvétel az eredetin nem háttérképes sáv, hanem egy
 * balra igazított fehér doboz (mérve: 570×563, 10 px belső tér, 5 px sarok).
 */
/*
 * Mérve: teljes szélességű sáv, benne a nappali-fotó `cover`-rel, a bal felső
 * sarokból. A doboz balra kerül, a jobb fele üresen hagyja a képet.
 */
/*
 * A háttérkép címét a sablon adja két méretben, CSS-változóban. A háttérkép
 * nem `img`, tehát `srcset`-je nem lehet: enélkül telefonon is a teljes,
 * 268 kB-os fájl töltött volna. A halvány alapszín addig is kitölti a sávot,
 * amíg a kép megérkezik — üres fehér folt így nincs.
 */
.fm-kapcsolat {
	position: relative;
	padding-block: 70px;
	padding-inline: 10px;
	background-color: var(--fm-halvany);
	background-image: var(--fm-kapcsolat-kep, none);
	background-size: cover;
	background-position: 0 0;
	background-repeat: no-repeat;
}

@media (max-width: 767px) {
	.fm-kapcsolat {
		background-image: var(--fm-kapcsolat-kep-keskeny, var(--fm-kapcsolat-kep, none));
	}
}

/* A Kapcsolat oldalon a sáv közvetlenül a fejléc alatt kezdődik. */
.fm-kapcsolat--szuk {
	padding-block: 30px;
}

.fm-kapcsolat__doboz {
	position: relative;
	max-width: 570px;
	background: #fff;
	border-radius: 5px;
	padding: 10px 10px 20px;
}

/* Mérve: 20 px, középre, fölötte 10, alatta 30 px. */
.fm-kapcsolat__doboz h2 {
	font-size: 20px;
	line-height: 20px;
	color: var(--fm-szoveg-sotet);
	text-align: center;
	margin-block: 10px 30px;
}

/* Kötelező mezők jelölése — az eredetin piros csillag. */
.fm-kotelezo {
	color: #d63638;
	font-weight: 700;
}

/*
 * A jelölőnégyzetes sor felülírja a .fm-urlap label blokk-megjelenítését,
 * különben a négyzet a szöveg fölé kerülne saját sorba.
 */
/* Mérve: 20 px-es jelölőnégyzet, tőle 10 px-re a 16/25-ös szöveg. */
.fm-urlap .fm-gdpr {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 25px;
	color: var(--fm-szoveg);
}

.fm-urlap .fm-gdpr input {
	width: 20px;
	height: 20px;
	margin: 3px 0 0;
	flex: none;
	accent-color: var(--fm-kek);
}

/* A küldés gomb az eredetin 40 px magas, világosabb kék, 3 px sarok. */
.fm-gomb--teljes {
	width: 100%;
	height: 40px;
	padding-inline: 24px;
	border: 0;
	border-radius: 3px;
	background: #00aeff;
	font-size: 15px;
	line-height: 40px;
	font-weight: 500;
}

/* ------------------------------------------------------------- lightbox */

/*
 * A nagyító az eredetin nem teljes képernyős sötét réteg, hanem fehér,
 * lekerekített ablak sötét fejlécsávval — a lap háttere körben látszik.
 * Mérve: az ablak 28 px-el a lap teteje alatt, a fejléc 47 px magas #2D2D2D-n,
 * a lapozók 40×40-esek, 3 px sarokkal, a márka kékjén.
 *
 * A megjelenítést az [open] állapothoz kötjük: enélkül a display felülírná a
 * <dialog> beépített display:none-ját, és a nagyító zárt állapotban is
 * kitakarná az oldalt.
 */
/*
 * A nagyító nyitása és zárása átúszik.
 *
 * A `display` és a takaróréteg nem folytonos tulajdonság — nincs köztes érték
 * „látszik” és „nem látszik” között —, ezért `allow-discrete` kell hozzá, a
 * kezdőállapotot pedig a `@starting-style` adja meg. Enélkül a párbeszédablak
 * csak megjelenne, animáció nélkül; ahol a böngésző ezt nem ismeri, pontosan
 * az történik, ami eddig.
 */
.fm-lightbox {
	/*
	 * A belső méretek innen indulnak. `svh` — a KIS látható magasság, vagyis
	 * amennyi a mobil címsávval EGYÜTT is biztosan látszik. Se a `vh`, se a
	 * `dvh` nem jó helyette: a `dvh` a címsáv ki-be csúszásakor változik, és
	 * ilyenkor a nagyító görgetés közben magától átrendeződne; a `vh` viszont
	 * a nagyobbik magasságot adja, amiből a fotó alja lelógna. Az `svh`
	 * mindkettőt elkerüli, és — ami itt a lényeg — SOHA nem változik menet
	 * közben, tehát nagyításkor sem tördel újra semmit.
	 */
	--fm-lb-magas: 100svh;

	/*
	 * A nagyító állandó díszei — külső margó, fejlécsáv, képmező belső tere.
	 * Nem azért változók, hogy szépek legyenek: az alábbi `--fm-lb-max`
	 * ezekből számol, és az alkalmazó szabályok is ezeket használják, tehát ha
	 * bármelyik érték változik, a korlát magától követi. Kézzel beírt 133 px
	 * mellett a következő padding-módosítás némán visszahozná a hibát.
	 */
	--fm-lb-parna: 28px;
	--fm-lb-fej: 47px;
	--fm-lb-mezo-parna: 15px;

	/*
	 * Ennél magasabb kép már nem fér a nagyítóba. Az arányos (78%-os) korlát
	 * önmagában kevés: alacsony ablaknál — négyszeres nagyításban a látható sáv
	 * 300 px magas — a 78% plusz a díszek együtt túllépnék a rendelkezésre álló
	 * helyet, és a fotó alja lelógna a fehér ablakról. A kettő közül a kisebb
	 * érvényes.
	 */
	--fm-lb-max: calc(var(--fm-lb-magas) - 2 * var(--fm-lb-parna) - var(--fm-lb-fej) - 2 * var(--fm-lb-mezo-parna));
	--fm-lb-mezo: min(calc(var(--fm-lb-magas) * .78), var(--fm-lb-max));

	opacity: 0;
	transform: scale(.985);
	transition:
		opacity .22s ease,
		transform .22s ease,
		overlay .22s ease allow-discrete,
		display .22s ease allow-discrete;
}

.fm-lightbox:not([open]) {
	display: none;
}

/*
 * A nagyító tartalma függőlegesen középre kerül. Korábban a lap tetejéhez
 * tapadt, és egy alacsonyabb kép alatt nagy üres sáv maradt — keskeny
 * kijelzőn ez adta a „félig üres ablak” érzetet.
 */
.fm-lightbox[open] {
	opacity: 1;
	transform: scale(1);
	display: flex;
	flex-direction: column;
	position: fixed;
	inset: 0;
	z-index: 100;
	background: transparent;
	border: 0;
	padding: var(--fm-lb-parna) 0;
	margin: 0;
	width: 100%;
	height: 100svh;
	max-width: none;
	max-height: none;
	overflow: auto;
	/* A nagyítón belüli görgetés ne folytatódjon a lapon, ha a végére ért. */
	overscroll-behavior: contain;
}

@starting-style {
	.fm-lightbox[open] {
		opacity: 0;
		transform: scale(.985);
	}
}

.fm-lightbox::backdrop {
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition:
		opacity .22s ease,
		overlay .22s ease allow-discrete,
		display .22s ease allow-discrete;
}

.fm-lightbox[open]::backdrop {
	opacity: 1;
}

@starting-style {
	.fm-lightbox[open]::backdrop {
		opacity: 0;
	}
}

/*
 * A nyitáskor a párbeszédablak maga kapja a fókuszt (lásd app.js) — így nem a
 * bezárás gomb villan fel kék kerettel. Az ablaknak viszont nem kell keretet
 * mutatnia: a modális állapotot a sötétített háttér jelzi.
 */
.fm-lightbox:focus,
.fm-lightbox:focus-visible {
	outline: none;
}

/*
 * Az ablak mérete állandó, nem a képhez igazodik. Enélkül egy álló és egy
 * fekvő fotó között az ablak — és vele a lapozónyilak — helyet cserélnek,
 * úgyhogy a következő kattintás már máshová esne, mint az előző.
 */
.fm-lightbox__doboz {
	/*
	 * A szélesség a NAGYÍTÓHOZ igazodik, nem a `100vw`-hez. A `vw` az
	 * elrendezési ablakot méri: csippentéses nagyításnál az nem változik, így
	 * a fehér ablak szélesebb maradt, mint amennyi a képernyőre fért, és a
	 * fotó egy része lelógott róla.
	 */
	width: min(1100px, calc(100% - 32px));
	margin-inline: auto;
	/*
	 * Függőleges középre igazítás automatikus margóval, nem
	 * `justify-content: center`-rel. A kettő ugyanúgy néz ki, amíg az ablak
	 * belefér a képernyőbe — ha viszont magasabb nála, a `center` a tetejét a
	 * látható sáv FÖLÉ tolja, és oda görgetéssel sem lehet eljutni. Az automata
	 * margó ilyenkor magától nullára esik, és a tartalom a tetejéről indul.
	 */
	margin-block: auto;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
}

.fm-lightbox__fej {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: var(--fm-lb-fej);
	padding-inline: 24px;
	background: #2d2d2d;
}

/*
 * A kép mezője ugyanakkora marad minden fotónál: a szélességet az ablak adja,
 * a magasságot a képek felső korlátja (78vh). A fotó ezen belül középre kerül,
 * a nyilak pedig a mező széleihez képest állnak — így mindig ugyanott vannak.
 */
.fm-lightbox__test {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	min-height: var(--fm-lb-mezo);
	padding: var(--fm-lb-mezo-parna);
}

.fm-lightbox img {
	max-width: 100%;
	max-height: var(--fm-lb-mezo);
	object-fit: contain;
	display: block;
	/* Lapozáskor áttűnik: a szkript a betöltés köré időzíti az átlátszóságot. */
	transition: opacity .18s ease;
}

/*
 * A képmezőn belüli mozdulatokat a szkript kezeli, nem a böngésző: itt a
 * csippentés a FOTÓT nagyítja. A mezőn KÍVÜL (fejlécsáv, háttér) a böngésző
 * lapnagyítása változatlanul működik — az akadálymentes nagyítás nem vész el,
 * csak nem az az eszköz kezeli a fotót, amelyik nem való rá.
 *
 * Az `overflow: hidden` a nagyított képet vágja a mezőhöz, különben az a fehér
 * ablakon kívülre, a lap fölé nyúlna.
 */
.fm-lightbox__test {
	overflow: hidden;
	touch-action: none;
}

.fm-lightbox[data-nagyitva] img {
	cursor: grab;
}

.fm-lightbox[data-nagyitva] img:active {
	cursor: grabbing;
}

/*
 * Nagyítás közben a lapozónyilak félreállnak: nagyított képen a következő
 * kép nem az, amit a látogató keres, a nyilak viszont pont a kép szélén
 * ülnek, ahová húzni akar.
 */
.fm-lightbox[data-nagyitva] .fm-lightbox__nyil {
	opacity: 0;
	pointer-events: none;
}

.fm-lightbox__zar {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.fm-lightbox__zar:hover {
	background-color: rgba(255, 255, 255, .15);
}

/* Mérve: 40×40, 3 px sarok, a márka kékje, a képen belül a széleken. */
.fm-lightbox__nyil {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: var(--fm-kek);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.fm-lightbox__nyil:hover {
	background-color: var(--fm-kek-sotet, #0d7fbe);
}

.fm-lightbox__nyil--elozo {
	left: 35px;
}

.fm-lightbox__nyil--kovetkezo {
	right: 35px;
}

@media (max-width: 782px) {
	.fm-lightbox[open] {
		--fm-lb-parna: 12px;
		--fm-lb-mezo-parna: 8px;
		--fm-lb-mezo: min(calc(var(--fm-lb-magas) * .68), var(--fm-lb-max));
	}

	/*
	 * Keskeny kijelzőn a képmező alacsonyabb. A 78vh-s magasság telefonon egy
	 * fekvő fotó fölé-alá is 180-180 px üres fehéret tett — a nyilak stabil
	 * helyéért cserébe túl nagy ár. 46vh mellett a fotó kitölti a mezőt, és a
	 * gombok így is ugyanott maradnak minden képnél.
	 */
	.fm-lightbox__test {
		min-height: min(calc(var(--fm-lb-magas) * .46), var(--fm-lb-max));
	}

	.fm-lightbox__nyil--elozo {
		left: 12px;
	}

	.fm-lightbox__nyil--kovetkezo {
		right: 12px;
	}
}

/* --------------------------------------------------------------- lapozó */

.fm-lapozo {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 36px;
}

.fm-lapozo .page-numbers {
	padding: 8px 14px;
	border: 1px solid var(--fm-keret);
	border-radius: 4px;
	color: var(--fm-cimsor);
}

.fm-lapozo .current {
	background: var(--fm-kek);
	border-color: var(--fm-kek);
	color: #fff;
}

/* ----------------------------------------------------------- reszponzív */

@media (max-width: 782px) {
	/*
	 * Egységes oldalsó margó. A kapcsolati sáv saját 10 px-es belső teret
	 * kapott, a bloglista címe 12-t — így három különböző távolságra kezdődött
	 * a tartalom a képernyő szélétől. Keskenyen ez azonnal feltűnik, mert
	 * nincs mihez viszonyítani: a szem a képernyő szélét használja vonalzónak.
	 */
	.fm-kapcsolat {
		padding-inline: 0;
	}

	.fm-blog-cim,
	.fm-oldalsav,
	.fm-ingatlan__fo {
		padding-inline: 0;
	}

}

@media (max-width: 900px) {
	/*
	 * A kapcsolati doboz középre kerül. Széles kijelzőn balra ül, mert
	 * mellette a háttérfotó jobb fele adja a kompozíciót; tabletméretben
	 * viszont már csak egy keskeny fotócsík maradna mellette, ami
	 * kiegyensúlyozatlan.
	 */
	.fm-kapcsolat__doboz {
		margin-inline: auto;
	}

	/*
	 * Keskeny nézetben a lábléc két hasábja egymás alá kerül. Balra zárva a
	 * két blokk és az alsó sor egyenetlen, csapott képet adott; középre
	 * rendezve a lap alja szimmetrikus lesz, és a térközök is egyformák.
	 */
	.fm-lablec__racs {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 36px;
		padding-block: 44px;
	}

	.fm-lablec__racs > div {
		width: 100%;
	}

	/*
	 * A listák sorai is középre kerülnek, nem csak a blokk. Korábban a `ul`
	 * középre húzott, de belül balra zárt tömb volt: az ikonok egy vonalban
	 * álltak, a sorok viszont különböző hosszúak, így a jobb szél csapott
	 * maradt. Soronkénti középre igazítással a lábléc mindkét széle egyenes.
	 */
	.fm-lablec__racs ul {
		display: grid;
		justify-items: center;
	}

	.fm-lablec__racs li {
		justify-content: center;
	}

	.fm-lablec__alj-racs {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 12px;
	}

	.fm-lablec__keszito {
		justify-content: center;
	}

	.fm-ingatlan {
		grid-template-columns: 1fr;
	}

	.fm-ingatlan__fo,
	.fm-oldalsav {
		padding-inline: 0;
	}

	.fm-bemutatkozas__racs,
	.fm-cta__racs {
		grid-template-columns: 1fr;
	}

	.fm-bemutatkozas__kep {
		max-width: 380px;
		margin-inline: auto;
	}



	.fm-cta__racs {
		text-align: center;
	}

	.fm-cta__kep {
		order: -1;
	}

	/*
	 * Keskeny nézetben a sáv a tartalom alá kerül, nem mellé — ott végig lehet
	 * görgetni, tehát sem rögzítés, sem magasságkorlát, sem rövidítés nem kell.
	 * A `hirdetesOldalsav()` ugyanezt a `position` értéket kérdezi meg, így a
	 * töréspont egyetlen helyen, itt van leírva.
	 */
	.fm-oldalsav,
	html.fm-js .fm-oldalsav {
		position: static;
		max-height: none;
		overflow: visible;
	}

}

/*
 * Érintőcélok keskeny nézetben.
 *
 * Ujjal célozva a 25 px magas szöveghivatkozás kevés — a WCAG 24 px-et ír elő
 * minimumként, a kényelmes méret 44. A megoldás nem a betű nagyítása: a
 * hivatkozás körüli áttetsző terület nő meg, a szöveg mérete és a sorok
 * távolsága változatlan marad.
 */
@media (max-width: 1023px), (pointer: coarse) {
	.fm-lablec a,
	.fm-morzsa a,
	.fm-menu__elerhetoseg a,
	.fm-hir__tovabb a,
	.fm-gdpr a,
	.fm-mini__cim,
	.fm-tovabbi-tetel__cim a,
	.fm-tovabbi-doboz__mind a {
		position: relative;
	}

	.fm-lablec a::after,
	.fm-morzsa a::after,
	.fm-menu__elerhetoseg a::after,
	.fm-hir__tovabb a::after,
	.fm-gdpr a::after,
	.fm-mini__cim::after,
	.fm-tovabbi-tetel__cim a::after,
	.fm-tovabbi-doboz__mind a::after {
		content: '';
		position: absolute;
		inset: -11px -6px;
	}

	/* A jelölőnégyzet maga is legyen elég nagy, ne csak a felirata. */
	.fm-urlap .fm-gdpr input {
		width: 24px;
		height: 24px;
		margin-top: 1px;
	}

	/* Az ikonos hivatkozások (Facebook, fejlesztő) körül is legyen fogás. */
	.fm-felso a,
	.fm-lablec__keszito a {
		min-height: 24px;
	}

	/*
	 * Folyószövegbe ágyazott hivatkozás (jogi oldalak, cikkek). Itt óvatosan
	 * kell növelni: a 25 px-es sorköz a felső határ, afölött az egymás alatti
	 * sorok céljai átfednének, és a látogató a rossz hivatkozást találná el.
	 */
	.fm-oldal-szoveg a,
	.fm-hir-szoveg a {
		position: relative;
	}

	.fm-oldal-szoveg a::after,
	.fm-hir-szoveg a::after {
		content: '';
		position: absolute;
		inset: -5px 0;
	}
}

@media (max-width: 782px) {
	/*
	 * A kék felső sáv keskenyen három sorba tördelődne, és a fejléc magasságát
	 * a duplájára hizlalná. Az eredeti ilyenkor az egészet elrejti — csak épp
	 * pótlás nélkül, így ott mobilon se telefonszám, se menü nem marad. Nálunk
	 * a sáv szintén eltűnik, a tartalma viszont a lenyíló menü aljára költözik.
	 */
	.fm-felso {
		display: none;
	}

	.fm-menu__elerhetoseg {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid rgba(255, 255, 255, .2);
		font-size: 16px;
	}

	.fm-menu__elerhetoseg a {
		display: inline-flex;
		padding: 8px 0;
	}

	.fm-menu__elerhetoseg .fm-nyelv {
		margin: 4px 0 0;
		gap: 8px;
	}

	.fm-menu__elerhetoseg .fm-nyelv a {
		padding: 8px 14px;
		border: 1px solid rgba(255, 255, 255, .35);
		border-radius: 3px;
	}

	/*
	 * Az eredeti mobil fejléce 84-90 px magas (igaz, üresen). Nálunk ugyanennyi
	 * hely van, csak nem kihasználatlanul: a logó és a menügomb kap levegőt.
	 */
	.fm-fejlec .fm-kont {
		padding-block: 20px;
	}

	/*
	 * Keskeny nézetben a fejléc a lap tetejéhez rögzül. Széles kijelzőn a menü
	 * amúgy is egy mozdulatnyira van, telefonon viszont a lap aljáról
	 * visszagörgetni a navigációhoz hosszú út — ott a ragadós fejléc többet ad,
	 * mint amennyi helyet elvesz (64 px a 844-ből).
	 */
	/*
	 * Ragadós fejléc — és mivel elgörög fölötte a tartalom, kell alá egy
	 * halvány vetett árnyék. Enélkül a fejléc és a lap közötti határ eltűnik:
	 * a kék sáv alatt átcsúszó kép vagy doboz úgy néz ki, mintha a fejléc
	 * része lenne. Az árnyék NEM állandó: a lap tetején nincs mit elválasztani,
	 * ott csak zajt adna a nyugodt kezdőképhez — a szkript görgetéskor kapcsolja
	 * be (`data-gorgetve`), és az áttűnés teszi észrevétlenné a váltást.
	 */
	.fm-fejlec {
		position: sticky;
		top: 0;
		z-index: 60;
		transition: box-shadow .34s cubic-bezier(.22, .61, .36, 1);
	}

	.fm-fejlec[data-gorgetve] {
		box-shadow: 0 2px 12px rgba(0, 0, 0, .16);
	}

	/* A közösségi ikon a lenyíló menüben nem kap helyet — lásd elerhetoseg.php. */
	.fm-menu__elerhetoseg .fm-elerhetoseg__kozossegi {
		display: none;
	}

	.fm-menu-gomb {
		display: block;
	}

	/*
	 * A lenyíló menü magasság-átmenettel nyílik.
	 *
	 * A `height: 0` → `height: auto` átmenetet az `interpolate-size` teszi
	 * lehetővé (lásd a lap elején): enélkül a böngésző nem tud a kulcsszóra
	 * animálni, és a menü — ahogy régen — ugrana. Ahol ez hiányzik, pontosan
	 * annyi történik, mint eddig: a menü megjelenik, csak átmenet nélkül.
	 *
	 * A magasságot nem becsüljük fix pixelben: a menü tartalma nyelvenként és
	 * menüpontonként más, egy elvétett `max-height` pedig vagy levágná az
	 * alját, vagy üres helyet hagyna alatta.
	 */
	/*
	 * A magasságot a szkript állítja pixelre (lásd app.js): így az átmenet
	 * minden böngészőben lefut, nem csak ott, ahol a `height: auto`
	 * animálható. A `height: 0` itt a kiindulóállapot.
	 */
	.fm-menu {
		position: absolute;
		inset: 100% 0 auto;
		height: 0;
		overflow: hidden;
		background: var(--fm-kek);
		border-top: 1px solid rgba(255, 255, 255, .2);
		padding: 0 20px;
		opacity: 0;
		visibility: hidden;
		transition:
			height .26s ease,
			opacity .2s ease,
			padding .26s ease,
			visibility .26s;
	}

	.fm-menu[data-nyitva] {
		padding: 8px 20px 18px;
		opacity: 1;
		visibility: visible;
	}

	.fm-menu ul {
		flex-direction: column;
		gap: 0;
	}

	.fm-menu li {
		border-bottom: 1px solid rgba(255, 255, 255, .13);
	}

	.fm-menu a {
		display: block;
		padding: 11px 0;
	}

	.fm-fejlec .fm-kont {
		position: relative;
	}

}

@media (max-width: 560px) {
	.fm-attekintes {
		gap: 12px 20px;
	}
}



/* --------------------------------------------------------- vissza a tetejére
 *
 * Az eredetin is van ilyen gomb (Houzez icon-arrow-up-1). Csak akkor jelenik
 * meg, ha a látogató lejjebb görgetett — így rövid oldalon nem takar semmit.
 */
.fm-tetejere {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 60;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 4px;
	background: var(--fm-kek);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .34s cubic-bezier(.22, .61, .36, 1), transform .34s cubic-bezier(.22, .61, .36, 1), visibility .34s, background-color .34s cubic-bezier(.22, .61, .36, 1);
}

.fm-tetejere[data-lathato] {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.fm-tetejere:hover,
.fm-tetejere:focus-visible {
	background-color: var(--fm-narancs);
}

.fm-tetejere svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}


/* ------------------------------------------------------ statikus oldalak */

/*
 * Az oldalak törzse az eredetin talpatlan 15/25-ös szedés, teljes
 * konténerszélességben — nem a hirdetések Russo One-os szedése. Külön osztály,
 * mert a két helyen mért érték tényleg eltér.
 */
/*
 * A tördelési engedély nem esztétikai kérdés: a jogi szövegekben teljes
 * hivatkozások állnak (a sütitájékoztatóban egy 528 px-es Google-cím), amit a
 * böngésző egyben tartana, és keskeny kijelzőn az egész lapot 164 px-rel
 * szélesebbre feszítené.
 */
.fm-oldal-szoveg {
	font-family: var(--fm-font-torzs);
	font-size: 15px;
	line-height: 25px;
	color: var(--fm-szoveg-sotet);
	overflow-wrap: break-word;
}

.fm-oldal-szoveg > * {
	margin-block: 0 16px;
}

.fm-oldal-szoveg > *:last-child {
	margin-bottom: 0;
}

/* Mérve: 33 px / 500-as vonalvastagság, #54595F. */
.fm-oldal-szoveg > h1,
.fm-szeles-doboz > h1,
.fm-oldal-racs__szoveg > h1 {
	font-family: var(--fm-font-cimsor);
	width: fit-content;
	font-size: 33px;
	line-height: 1;
	font-weight: 500;
	color: var(--fm-cimsor);
	margin-block: 0 24px;
}

.fm-oldal-szoveg > h2,
.fm-oldal-szoveg__en > h2,
.fm-oldal-racs__szoveg > h2 {
	font-family: var(--fm-font-cimsor);
	font-size: 24px;
	line-height: 1;
	font-weight: 500;
	color: var(--fm-cimsor);
	margin-block: 24px 16px;
}

/*
 * A h3 az eredetin címsor-betűvel fut, a h4 viszont a törzsével — az angol
 * szakasz alcímei ezért néznek ki másként, mint a magyaréi. Megtartjuk.
 */
.fm-oldal-szoveg h3,
.fm-oldal-szoveg h4,
.fm-oldal-szoveg h5 {
	font-size: 12px;
	line-height: 14.4px;
	font-weight: 500;
	color: var(--fm-cimsor);
	margin-block: 24px 8px;
}

.fm-oldal-szoveg h3,
.fm-oldal-szoveg h5 {
	font-family: var(--fm-font-cimsor);
}

.fm-oldal-szoveg h4 {
	font-family: var(--fm-font-torzs);
}

.fm-oldal-szoveg > h6,
.fm-oldal-szoveg__en > h6 {
	font-family: var(--fm-font-cimsor);
	font-size: 16px;
	line-height: 16px;
	font-weight: 500;
	color: var(--fm-cimsor);
	text-align: center;
	margin-block: 4px 24px;
}

.fm-oldal-szoveg ul,
.fm-oldal-szoveg ol {
	padding-left: 32px;
}

.fm-oldal-szoveg li {
	margin-bottom: 0;
}

.fm-oldal-szoveg img {
	height: auto;
	border-radius: var(--fm-radius);
}

/* A jogi szövegek sorkizártak és világosabb szürkével futnak; a bennük lévő
   főcímek középre húzódnak — így különülnek el a szakaszok. */
.fm-oldal-szoveg--jogi {
	text-align: justify;
	color: var(--fm-cimsor);
}

.fm-oldal-szoveg--jogi > h1,
.fm-oldal-szoveg--jogi .fm-oldal-szoveg__en > h1 {
	width: auto;
	font-size: 40px;
	line-height: 40px;
	text-align: center;
	margin-block: 40px 24px;
}

.fm-oldal-szoveg--jogi > h1:first-child {
	margin-top: 0;
}

/*
 * A sütitájékoztató 10 px-el beljebb ül, mint az adatkezelési szöveg.
 */
.fm-oldal-szoveg--suti {
	padding-inline: 10px;
}

/*
 * A két jogi dokumentum 2026-ban újraíródott, és saját címsor-lépcsőt kapott.
 * Az eredetiről örökölt 12 px-es alcím kisebb volt a törzsnél — ilyet egy
 * szerkesztő sem szánt volna szándékosan, és pont a tagolást tette
 * olvashatatlanná abban a szövegben, ahol a tagolás a legfontosabb.
 */
.fm-oldal-szoveg--jogi > h1,
.fm-oldal-szoveg--jogi .fm-oldal-szoveg__en > h1 {
	margin-top: 0;
}

.fm-oldal-szoveg--jogi > h1 ~ h1,
.fm-oldal-szoveg--jogi .fm-oldal-szoveg__en > h1 {
	margin-top: 56px;
}

.fm-oldal-szoveg--jogi h3 {
	font-family: var(--fm-font-cimsor);
	font-size: 18px;
	line-height: 24px;
	margin-block: 26px 10px;
}

/*
 * Záró impresszum a jogi lapok alján: halványabb és kisebb, mint a törzs —
 * tartozéka a dokumentumnak, nem része az érdemi szövegnek.
 */
.fm-oldal-szoveg--jogi hr {
	height: 0;
	margin-block: 34px 18px;
	border: 0;
	border-top: 1px solid var(--fm-keret);
}

/*
 * A 26 px-es sorköz nem tipográfiai szeszély: az e-mail cím ujjal célzott
 * felülete a sorközből nő ki, és 22 px-nél egy híján maradt a 24 px-es
 * minimum alatt.
 */
.fm-jogi-impresszum {
	font-size: 13px;
	line-height: 26px;
	color: var(--fm-szoveg);
	text-align: left;
}

/* A számozott fejezetcím alatt szűkebb a köz: összetartoznak. */
.fm-oldal-szoveg--jogi > h2 {
	margin-block: 40px 14px;
}

.fm-oldal-szoveg--jogi ul {
	margin-bottom: 18px;
}

.fm-oldal-szoveg--jogi li {
	margin-bottom: 8px;
}

/* Az angol szakasz az eredetin balra zárt. */
.fm-oldal-szoveg__en {
	text-align: start;
}

/* A kiemelések az eredetin ugyanazzal a talpatlan betűvel futnak, mint a
   körülöttük lévő szöveg — nem váltanak címsor-betűre. */
.fm-oldal-szoveg strong,
.fm-oldal-szoveg b,
.fm-oldal-szoveg em,
.fm-oldal-szoveg i {
	font-family: inherit;
}


/* Kétoszlopos oldal-elrendezés (bemutatkozás, bérbeadóknak).
   Mérve: 550/550 illetve 516/584 oszlopok, 20 px köz. */
.fm-oldal-racs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

/*
 * A kép bal széle a fölötte álló címmel egy vonalban áll, ezért a rács nem kap
 * oldalsó belső teret. A szövegoszlop annál inkább: a kettő együtt ugyanoda
 * teszi a szöveget, ahol eddig is volt.
 */
.fm-oldal-racs--kep-elol {
	grid-template-columns: 516px minmax(0, 1fr);
}

.fm-oldal-racs--kep-elol .fm-oldal-racs__szoveg {
	padding-inline: 20px;
}

.fm-oldal-racs__kep {
	text-align: center;
}

/*
 * A kép a saját hasábjában középen áll. A `text-align` itt nem elég: a téma
 * alapbeállítása blokk-szintűvé teszi a képeket, azokra pedig az automatikus
 * oldalmargó hat.
 */
.fm-oldal-racs__kep img {
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

/* A bemutatkozó szöveg az eredetin nagyobb és sorkizárt. */
/*
 * A bemutatkozó szöveg az eredetin a törzsnél telítettebb: 400-as vastagság,
 * 18/26-os ritmus, sorkizárva, 16 px-es bekezdésközzel.
 */
.fm-oldal-racs__szoveg--nagy {
	font-size: 18px;
	line-height: 26px;
	font-weight: 400;
	/*
	 * Balra zárva, sornyújtás nélkül: a sorkizárás a magyar szöveg hosszú
	 * összetett szavai mellett feltűnő „folyókat” hagy a hasábban.
	 */
	text-align: left;
	letter-spacing: .2px;
}

.fm-oldal-racs__szoveg--nagy p {
	margin-bottom: 16px;
}

/*
 * Fehér kártya a szürke lapon — mérve 5 px sarok, körben 10 px belső tér, és
 * 40 px-re a fejléc alatti térköz alatt kezdődik.
 */
.fm-oldal-racs--doboz {
	margin-top: 40px;
	padding: 10px;
	border-radius: 5px;
	background: #fff;
}

/* A kártyán az utolsó bekezdés alsó térköze is megmarad — mérve 26 px a keretig. */
.fm-oldal-racs--doboz .fm-oldal-racs__szoveg > *:last-child {
	margin-bottom: 16px;
}

.fm-oldal-racs__szoveg > *:last-child {
	margin-bottom: 0;
}

/*
 * Teljes szélességű oldaltartalom: a sáv maga hozza a saját belső terét, a
 * sablon nem tesz köré sem keretet, sem felső térközt.
 */
/*
 * A `flow-root` nem díszítés: nélküle a fehér kártya felső margója átszivárogna
 * a szülőn (margin-collapse), és a kártya a fejléchez tapadva kezdődne.
 */
.fm-oldal-teljes > .fm-oldal-szoveg {
	display: flow-root;
}

.fm-oldal-teljes > .fm-oldal-szoveg > *:first-child {
	margin-top: 0;
}

/*
 * A Bérbeadóknak lapon a fehér kártya szélesebb a szokásos tartalomsávnál:
 * mérve 1260 px, 60 px-es oldalsó belső térrel, tehát a szöveg ugyanoda esik,
 * mint máshol — csak a fehér mező nyúlik túl rajta jobbra-balra.
 */
.fm-oldal-teljes > .fm-oldal-szoveg > .fm-szeles-doboz:first-child {
	margin-top: 60px;
}

.fm-szeles-doboz {
	max-width: 1260px;
	margin: 60px auto 0;
	padding: 10px 60px;
	border-radius: 5px;
	background: #fff;
}

.fm-szeles-doboz > h1 {
	margin-bottom: 20px;
}

@media (max-width: 782px) {
	.fm-oldal-racs,
	.fm-oldal-racs--kep-elol {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Az oldal-tartalomban álló gombok. A telefonos és a „bővebben” gomb az
   eredetin ikont is visel — azt a betűkép elé tett SVG helyett itt
   háttér-maszk nélkül, egyszerű szövegjelöléssel oldjuk meg. */
.fm-oldal-szoveg .fm-gomb {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}


/* ---------------------------------------------------------------- blog */

/* Mérve az eredetin: 30 px cím, alatta 823 px-es fő oszlop és 363 px oldalsáv. */
.fm-blog-cim {
	padding-inline: 12px;
	margin-bottom: 30px;
	font-size: 30px;
	line-height: 36px;
	font-weight: 500;
	color: var(--fm-szoveg-sotet);
}

/* A bejegyzés-kivonatok háromoszlopos rácsban, 221 px-es kártyákkal — a 20 px
   belső tér az, ami a doboz 763 px-éből pontosan 723-at hagy a rácsnak. Ezt a
   rácsot már csak a bejegyzés-aloldal alja használja; a bloglistán a lentebbi,
   kivonatos elrendezés fut. */
.fm-blog-racs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	padding-inline: 20px;
	align-items: start;
}

.fm-hir {
	padding: 30px;
	border-radius: var(--fm-radius);
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .09);
}

/* Mérve: 21 px / 25 px, kék, 500-as vonalvastagság. */
.fm-hir__cim {
	margin: 0;
	font-size: 21px;
	line-height: 25px;
	font-weight: 500;
}

.fm-hir__cim a {
	color: var(--fm-kek);
}

/*
 * A kék cím a kék alapszínről narancsra vált — enélkül csak az aláhúzás
 * jelezné a mutatót, ami a többi hivatkozáshoz képest halkabb visszajelzés.
 * A saját szabály azért kell, mert az általános `a:hover` gyengébb nála.
 */
.fm-hir__cim a:hover,
.fm-hir__cim a:focus-visible {
	color: var(--fm-narancs);
}

/* A „tovább” hivatkozás csupa nagybetűvel jelenik meg, de a jelölésben nem az. */
.fm-hir__tovabb {
	margin: 24px 0 0;
	font-size: 12px;
	line-height: 25px;
	font-weight: 700;
	text-transform: uppercase;
}

.fm-hir__tovabb a {
	display: inline-block;
	line-height: 25px;
	color: var(--fm-kek);
}

@media (max-width: 1024px) {
	.fm-blog-racs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.fm-blog-racs {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ------------------------------------------------------- bloglista */

/*
 * A bloglista saját elrendezése. A blogon nincs kiemelt kép és nincs kézzel
 * írt kivonat, ezért a sorrendet és a súlyt tipográfia hordozza: a legfrissebb
 * írás széles vezető kártyát kap, a többi kettesével fut alatta.
 */
.fm-doboz--blog {
	padding: 30px;
}

.fm-blog-lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.fm-doboz--blog .fm-hir {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border: 1px solid var(--fm-keret);
	border-radius: var(--fm-radius);
	box-shadow: none;
	transition: border-color .34s cubic-bezier(.22, .61, .36, 1), box-shadow .34s cubic-bezier(.22, .61, .36, 1);
}

.fm-doboz--blog .fm-hir:hover,
.fm-doboz--blog .fm-hir:focus-within {
	border-color: var(--fm-kek);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .09);
}

/*
 * A vezető kártya a doboz teljes szélességét kapja, világoskék alapon — így
 * első pillantásra elválik a többitől, kép nélkül is.
 */
.fm-hir--vezeto {
	margin-bottom: 24px;
	padding: 30px;
	border-color: transparent;
	background: linear-gradient(180deg, rgba(16, 155, 233, .07), rgba(16, 155, 233, .02));
}

.fm-hir--vezeto .fm-hir__cim {
	font-size: 28px;
	line-height: 34px;
}

.fm-hir--vezeto .fm-hir__kivonat {
	font-size: 16px;
	line-height: 26px;
}

/* Dátum és olvasási idő: halvány, kis kapitálisokkal, ponttal elválasztva. */
.fm-hir__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--fm-halvany-szoveg);
}

.fm-hir__kivonat {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 25px;
	color: var(--fm-szoveg);
}

/* A tovább-hivatkozás a kártya aljára ül, hogy a kártyák egy vonalban végezzenek. */
.fm-doboz--blog .fm-hir__tovabb {
	margin-top: auto;
	padding-top: 18px;
}

.fm-doboz--blog .fm-hir__tovabb a:hover,
.fm-doboz--blog .fm-hir__tovabb a:focus-visible {
	color: var(--fm-narancs);
}

@media (max-width: 640px) {
	/* Nyolc bélyeg keskenyen 40 px-es lenne; négyesével két teljes sor lesz. */
	.fm-galeria__sor {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.fm-doboz--blog {
		padding: 20px;
	}

	.fm-blog-lista {
		grid-template-columns: minmax(0, 1fr);
	}

	.fm-hir--vezeto .fm-hir__cim {
		font-size: 24px;
		line-height: 30px;
	}
}


/* ------------------------------------------------- blogbejegyzés aloldal */

/*
 * A cikk feje: metasor, cím, felütés. Ugyanaz a hármas, ami a listakártyán is
 * áll — a bejegyzés így nem „másik oldal”, hanem a kártya kinyitva.
 */
.fm-hir-fej {
	max-width: 740px;
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--fm-keret);
}

.fm-hir-fej .fm-hir__meta {
	margin-bottom: 14px;
}

/*
 * A felütés a törzsnél nagyobb és halványabb: szemmel elkülönül a szövegtől,
 * de nem versenyez a címmel.
 */
.fm-hir-felutes {
	margin: 18px 0 0;
	font-family: var(--fm-font-torzs);
	font-size: 18px;
	line-height: 28px;
	color: var(--fm-szoveg);
}

/* Szakaszhatár a cikkben: halvány vonal, bőven levegővel. */
.fm-hir-szoveg .fm-elvalaszto {
	height: 0;
	margin-block: 32px;
	border: 0;
	border-top: 1px solid var(--fm-keret);
}

/* A további bejegyzések blokkja a lista dobozát viszi tovább. */
.fm-tovabbi {
	padding-top: 0;
}

.fm-tovabbi__cim {
	margin: 0 0 20px;
	font-family: var(--fm-font-cimsor);
	font-size: 24px;
	line-height: 30px;
	font-weight: 500;
	color: var(--fm-szoveg-sotet);
}

/*
 * Oldalsávi tétellista a cikk mellett. Kivonat nincs benne: a keskeny hasábban
 * három sor felütés többet takarna, mint amennyit segít — a dátum, a szerző és
 * a cím elég a választáshoz.
 */
.fm-tovabbi-doboz {
	padding: 24px;
}

.fm-tovabbi-doboz .fm-tovabbi__cim {
	margin-bottom: 16px;
	font-size: 20px;
	line-height: 26px;
}

.fm-tovabbi-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fm-tovabbi-tetel {
	padding-block: 14px;
	border-top: 1px solid var(--fm-keret);
}

.fm-tovabbi-tetel:first-child {
	padding-top: 0;
	border-top: 0;
}

.fm-tovabbi-tetel .fm-hir__meta {
	margin-bottom: 6px;
}

.fm-tovabbi-tetel__cim {
	margin: 0;
	font-size: 16px;
	line-height: 23px;
	font-weight: 500;
}

/*
 * Blokkszintű hivatkozás: a két-három soros cím teljes doboza kattintható és
 * a mutatóra is egyben reagál. Soron belüli hivatkozásként a sorok közé eső
 * pont már nem tartozott a linkhez — se kattintás, se színváltás nem történt.
 */
.fm-tovabbi-tetel__cim a {
	display: block;
	color: var(--fm-szoveg-sotet);
}

.fm-tovabbi-tetel__cim a:hover,
.fm-tovabbi-tetel__cim a:focus-visible {
	color: var(--fm-narancs);
}

.fm-tovabbi-doboz__mind {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--fm-keret);
	font-size: 12px;
	line-height: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.fm-tovabbi-doboz__mind a {
	color: var(--fm-kek);
}

/*
 * Saját hover-szabályok. Az általános `a:hover` gyengébb ezeknél az
 * osztályszelektoroknál, ezért a színváltás nélkülük elmaradna — pont azokon
 * a hivatkozásokon, amelyek a leggyakrabban kerülnek a mutató alá.
 */
.fm-tovabbi-doboz__mind a:hover,
.fm-tovabbi-doboz__mind a:focus-visible {
	color: var(--fm-narancs);
}

.fm-blog-lista--harmas {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.fm-blog-lista--harmas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.fm-blog-lista--harmas {
		grid-template-columns: minmax(0, 1fr);
	}

	.fm-hir-fej {
		margin-bottom: 22px;
		padding-bottom: 18px;
	}

	.fm-hir-felutes {
		font-size: 17px;
		line-height: 27px;
	}
}

/*
 * Mérve az eredetin: 740 px-es hasáb a lap bal oldalán, 40 px-es cím,
 * talpatlan 16/25-ös törzs. A hasáb szándékosan nincs középre zárva.
 */
.fm-hir-cim {
	max-width: 740px;
	margin: 0 0 20px;
	font-size: 40px;
	line-height: 40px;
	font-weight: 500;
	color: var(--fm-szoveg-sotet);
}

.fm-hir-szoveg {
	max-width: 740px;
	font-family: var(--fm-font-torzs);
	font-size: 16px;
	line-height: 25px;
	color: var(--fm-szoveg-sotet);
}

/*
 * A 40 px-es cikkcím keskeny kijelzőn hat sorba tördelt, és a szöveg eleje a
 * hajtás alá került. 28 px-en három sor lesz belőle. A szabály szándékosan itt
 * áll, az alapérték után: a média-lekérdezés nem erősebb, csak későbbi.
 */
@media (max-width: 640px) {
	.fm-hir-cim {
		font-size: 28px;
		line-height: 34px;
	}
}

.fm-hir-szoveg > * {
	margin-block: 0 16px;
}

.fm-hir-szoveg > *:last-child {
	margin-bottom: 0;
}

/* Mérve: 24/29, címsor-betű, #383838. */
.fm-hir-szoveg h2 {
	font-family: var(--fm-font-cimsor);
	font-size: 24px;
	line-height: 29px;
	font-weight: 500;
	color: var(--fm-szoveg-sotet);
	margin-block: 25px 12px;
}

.fm-hir-szoveg h3 {
	font-family: var(--fm-font-cimsor);
	font-size: 20px;
	line-height: 25px;
	font-weight: 500;
	color: var(--fm-szoveg-sotet);
	margin-block: 25px 10px;
}

.fm-hir-szoveg ul,
.fm-hir-szoveg ol {
	padding-left: 32px;
}

.fm-hir-szoveg img {
	height: auto;
	border-radius: var(--fm-radius);
}

/* A bejegyzés alatti hármas ajánló: 360 px-es kártyák, 30 px köz. */
.fm-blog-racs--harmas {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding-inline: 0;
}

/* A Gutenberg térköz-eleme az eredetin 25 px — ne törje szét a ritmust. */
.fm-hir-szoveg .wp-block-spacer {
	height: 25px !important;
	margin: 0;
}


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

/*
 * Mérve az eredetin: 1280×485-ös sáv #001C38-on, a „404” 299 px-es és
 * #ADADAD, a cím 31 px-es fehér — a kettő egymásra csúsztatva.
 */
.fm-404 {
	background: #001c38;
	padding: 10px 10px 25px;
	text-align: center;
}

.fm-404__fej {
	display: grid;
	place-items: center stretch;
}

.fm-404__szam {
	grid-area: 1 / 1;
	margin: 0;
	text-align: center;
	font-family: var(--fm-font-cimsor);
	font-size: 299px;
	line-height: 299px;
	font-weight: 700;
	color: #adadad;
	user-select: none;
}

/* A cím az eredetin nem pontosan a szám közepén ül, hanem 15 px-el feljebb. */
.fm-404__cim {
	grid-area: 1 / 1;
	margin: 0;
	transform: translateY(-15px);
	font-size: 31px;
	line-height: 31px;
	font-weight: 700;
	color: #fff;
}

.fm-404__gomb {
	margin: 21px 0 60px;
}

/* A kezdőlap-gomb az eredetin keret és háttér nélküli, csak fehér felirat. */
.fm-gomb--attetszo {
	padding: 25px 50px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 20px;
	line-height: 20px;
	font-weight: 500;
	gap: 4px;
}

.fm-gomb--attetszo:hover,
.fm-gomb--attetszo:focus-visible {
	background-color: rgba(255, 255, 255, .12);
	color: #fff;
}

.fm-gomb--attetszo svg {
	width: 23px;
	height: 20px;
}

@media (max-width: 640px) {
	.fm-404__szam {
		font-size: 34vw;
		line-height: 1;
	}

	.fm-404__cim {
		font-size: 22px;
		line-height: 28px;
	}
}

/* ------------------------------------- oldalsávi kártya (blog) */

/*
 * A blog oldalsávjában álló hirdetés az eredetin a harmadik kártyaváltozat:
 * a kép alul az árral, alatta nagyobb cím, helymegjelölés és jellemzők.
 * Mérve: kártya 339 px, kép 254 px magas, cím 24/26, hely 13 px #636363,
 * jellemzők 14 px 500-as vastagsággal, 18 px-es ikonokkal.
 */
.fm-kartya--oldalsav {
	border: 0;
	background: transparent;
}

.fm-kartya--oldalsav .fm-kartya__kep {
	aspect-ratio: 339 / 254;
	border-radius: var(--fm-radius);
	overflow: hidden;
}

.fm-ar--kepen {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 2;
	margin: 0;
	color: #fff;
	font-size: 16px;
	line-height: 16px;
	font-weight: 700;
	/*
	 * Ez az ár GRADIENS NÉLKÜL ül a fotón — az oldalsávi kártyán nincs fedés.
	 * Neki tehát a szövegárnyék az EGYETLEN kontrasztforrása, világos képen
	 * pedig egy halvány árnyék kevés. Ugyanaz a kettős árnyék, mint a
	 * listakártyákon: szűk és sötét a betű élére, tág és halvány köré.
	 */
	text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .6);
}

.fm-kartya--oldalsav .fm-kartya__test {
	padding: 20px;
	gap: 8px;
}

.fm-kartya--oldalsav .fm-kartya__cim {
	font-size: 24px;
	line-height: 26px;
	font-weight: 500;
}

.fm-kartya--oldalsav .fm-kartya__cim a {
	color: var(--fm-szoveg-sotet);
}

.fm-kartya--oldalsav .fm-kartya__hely {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	line-height: 25px;
	color: #636363;
	margin: 0;
}

.fm-kartya--oldalsav .fm-kartya__hely svg {
	width: 13px;
	height: 13px;
	flex: none;
}

.fm-kartya--oldalsav .fm-jellemzok {
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	color: var(--fm-szoveg-sotet);
	gap: 6px 20px;
}

.fm-kartya--oldalsav .fm-jellemzok svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
}

/* ------------------------------------------------- keskeny nézet: belső terek
 *
 * Ez a blokk szándékosan a stíluslap végén áll: a dobozok belső tere több
 * helyen is definiálva van, és a média-lekérdezés nem erősebb a sima
 * szabálynál — csak későbbi. Feljebb elhelyezve az alapértékek felülírnák.
 *
 * Egymásba ágyazva (lap → doboz → kártya) a nagy belső terek összeadódnak:
 * 390 px-ből hatvanat elvett a puszta levegő, és ettől lett szűk a szöveg
 * hasábja.
 */
@media (max-width: 782px) {
	.fm-szeles-doboz {
		padding: 16px;
	}

	.fm-doboz--blog {
		padding: 12px;
	}

	.fm-doboz--blog .fm-hir {
		padding: 18px;
	}

	.fm-hir--vezeto {
		padding: 20px;
	}

	.fm-tovabbi-doboz {
		padding: 18px;
	}

	.fm-oldal-racs--doboz {
		padding: 8px;
	}

	.fm-kapcsolat__doboz {
		padding: 10px 10px 18px;
	}
}

/*
 * Az áttekintő rács a legkeskenyebb kijelzőn egy oszlopra vált, és a mezőnév
 * az érték mellé kerül. Két oszlopban a hosszabb nevek („összes szoba”)
 * kettétörtek, és a rács ettől nézett rendetlennek.
 */
@media (max-width: 480px) {
	.fm-attekintes {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px 0;
	}

	/*
	 * `center`, nem `baseline`. A `baseline` itt megtévesztő: az érték egy
	 * BELSŐ flex-doboz (ikon + szám), és egy flex-konténer alapvonalát az első
	 * eleme adja — az pedig az SVG, aminek nincs szövegalapvonala, tehát az
	 * alja számít annak. Így az érték „alapvonala” 24 px-re került, a mezőnévé
	 * viszont a saját betűihez: a kettő lépcsőzött, és a sor kettétört
	 * benyomását keltette. Középre igazítva mindkettő egy vonalban ül.
	 */
	.fm-attekintes li {
		display: flex;
		align-items: center;
		gap: 7px;
	}

	.fm-attekintes__cimke {
		padding-left: 0;
	}
}