/* WebRendbe teszt: „Miért kevés az ügyfél és miért dolgozol este is?” és a köszönőoldala (/teszt/koszonom/).
   2026-11-04: az új dizájnban (wr2, mint a főoldal): narancs-barack színek, Playfair Display a címeken, Figtree minden máson,
   16 px lekerekítés, finom kártyaárnyék. A fejlécet és a láblécet a közös új sablon adja (includes/wr2.php).
   Betűskála nézetenként 5 méret: főcím / szakaszcím / kártyacím / alapszöveg és gombok / kis felirat
   mobil 56/36/29/19/14, tablet (768-1279) 67/48/32/22/18, gép (1280+) 78/60/32/24/20 (a WebRendbe-skála, 2026-11-04). Térköz: 8 többszörösei.
   Minden szabály „html body.wr2” alatt, hogy a wr2.css (később töltődik be) ne írja felül. */

html body.wr2 .wrt, html body.wr2 .wrtk {
	--h1: 56px; --h2: 36px; --h3: 29px; --p: 19px; --s: 14px;
	--cim: #3B322C; --szoveg: #5E544D; --halvany: #73675E; --gomb: #D9701A; --gomb-hover: #C4620F; --gomb-betu: #1F140C;
	--hatter: #FFF6EA; --krem: #FFEBD3; --barack: #FFE3C4; --keret: #F1DCC3; --keret2: #E8B98A; --feher: #FFFFFF;
	--arnyek: 4px 4px 32px rgba(58, 30, 12, .08); --r: 16px;
	--serif: 'Playfair Display', Georgia, serif; --sans: Figtree, Arial, sans-serif;
}
@media (min-width: 768px) {
	html body.wr2 .wrt, html body.wr2 .wrtk { --h1: 67px; --h2: 48px; --h3: 32px; --p: 22px; --s: 18px; }
}
@media (min-width: 1280px) {
	html body.wr2 .wrt, html body.wr2 .wrtk { --h1: 78px; --h2: 60px; --h3: 32px; --p: 24px; --s: 20px; }
}

/* ---------- A teszt ---------- */
html body.wr2 .wrt-szakasz.e-con { background: #FFF6EA !important; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
html body.wr2 .wrt {
	position: relative; min-height: 0; background: var(--hatter); color: var(--szoveg);
	font: 400 var(--p)/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
html body.wr2 .wrt *, html body.wr2 .wrt *::before, html body.wr2 .wrt *::after { box-sizing: border-box; }
html body.wr2 .wrt-wrap { position: relative; max-width: 100%; margin: 0 auto; padding: 48px 24px 72px; }
/* A saját régi fejléc nem kell: a közös új fejléc (logó + Menü) adja. */
html body.wr2 .wrt-head { display: none; }

html body.wr2 .wrt-card {
	background: var(--feher); border: 1px solid var(--keret) !important; border-radius: var(--r) !important;
	padding: 32px 24px !important; box-shadow: var(--arnyek) !important;
}
html body.wr2 .wrt-screen[hidden] { display: none; }
html body.wr2 .wrt p { margin: 0 0 16px; font-size: var(--p); line-height: 1.5; color: var(--szoveg); text-wrap: pretty; }
html body.wr2 .wrt b, html body.wr2 .wrt strong { color: var(--cim); font-weight: 700; }
html body.wr2 .wrt .center { text-align: center; }

/* Címek */
html body.wr2 .wrt h1, html body.wr2 .wrt h2, html body.wr2 .wrt h3, html body.wr2 .wrt .final {
	font-family: var(--serif) !important; color: var(--cim); outline: none; text-wrap: balance; letter-spacing: 0; text-transform: none;
}
html body.wr2 .wrt h1, html body.wr2 .wrtk h1.elementor-heading-title { hyphens: manual; -webkit-hyphens: manual; }
html body.wr2 .wrt h1 { font-size: var(--h1); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; margin: 0 0 24px; }
html body.wr2 .wrt h2 { font-size: var(--h2); line-height: 1.1; font-weight: 800; margin: 0 0 24px; }
html body.wr2 .wrt h3 { font-size: var(--h3); line-height: 1.1; font-weight: 700; margin: 32px 0 8px; }
html body.wr2 .wrt #q-text { font-size: var(--h3); line-height: 1.1; font-weight: 700; margin: 0 0 16px; }
html body.wr2 .wrt h1 span, html body.wr2 .wrt .final span { color: var(--gomb); }

html body.wr2 .wrt .eyebrow { margin: 0 0 16px; font: 700 var(--s)/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cim); }
html body.wr2 .wrt .whyq { margin: 0 0 24px; color: var(--halvany); font-size: var(--s); }
html body.wr2 .wrt .whyq b { color: var(--gomb); }
html body.wr2 .wrt .muted, html body.wr2 .wrt .opt { color: var(--halvany); font-size: var(--s); font-weight: 400; }

/* Gombok: nagyok, mint a főoldal fő gombja */
html body.wr2 .wrt .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 0;
	padding: 24px 48px; border-radius: var(--r); border: 0; cursor: pointer;
	font: 800 var(--p)/1.2 var(--sans) !important; text-decoration: none; text-transform: none; letter-spacing: 0;
	background: var(--gomb); color: var(--gomb-betu); box-shadow: none; transition: background-color .2s, transform .15s ease;
}
html body.wr2 .wrt .btn:hover, html body.wr2 .wrt .btn:focus-visible { background: var(--gomb-hover); color: var(--gomb-betu); transform: translateY(-2px); }
html body.wr2 .wrt .btn svg { width: 24px; height: 24px; flex: 0 0 24px; }
html body.wr2 .wrt .btn.full { width: 100%; }
html body.wr2 .wrt .btn:focus-visible, html body.wr2 .wrt .ans:focus-visible, html body.wr2 .wrt .link:focus-visible { outline: 3px solid var(--cim); outline-offset: 3px; }
html body.wr2 .wrt .btn[disabled] { opacity: .6; cursor: wait; }

/* Kezdő képernyő: ágválasztás */
html body.wr2 .wrt .wrt-kerdes-elso { margin: 32px 0 16px; font-size: var(--p); }
html body.wr2 .wrt .wrt-kerdes-elso strong { color: var(--cim); }
html body.wr2 .wrt .wrt-agak { display: grid; gap: 16px; margin: 0 0 24px; }
html body.wr2 .wrt .btn.ag { width: 100%; justify-content: flex-start; text-align: left; padding: 24px 32px; }
html body.wr2 .wrt .btn.ag-2 { background: var(--barack); color: var(--cim); box-shadow: inset 0 0 0 1.5px var(--keret2); }
html body.wr2 .wrt .btn.ag-2:hover, html body.wr2 .wrt .btn.ag-2:focus-visible { background: #FFD6A8; color: var(--cim); }
html body.wr2 .wrt .ag-ikon { display: inline-flex; }
html body.wr2 .wrt .wrt-nem-kell { margin: 0; display: flex; justify-content: center; align-items: center; gap: 8px; text-align: center; }
html body.wr2 .wrt .wrt-nem-kell svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* Kérdés */
html body.wr2 .wrt .progress { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; font-size: var(--s); color: var(--halvany); font-weight: 700; }
html body.wr2 .wrt .bar { flex: 1; height: 8px; background: var(--krem); border-radius: 999px; overflow: hidden; }
html body.wr2 .wrt .bar i { display: block; height: 100%; width: 0; background: var(--gomb); border-radius: 999px; transition: width .4s ease; }
html body.wr2 .wrt .answers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
html body.wr2 .wrt .ans {
	min-height: 0; padding: 24px 16px; border-radius: var(--r); border: 1.5px solid var(--keret2); background: var(--feher); color: var(--cim);
	font: 800 var(--p)/1.2 var(--sans) !important; cursor: pointer; transition: border-color .15s, background .15s;
}
html body.wr2 .wrt .ans:hover, html body.wr2 .wrt .ans:focus-visible { border-color: var(--gomb); background: var(--barack); color: var(--cim); }
html body.wr2 .wrt .link {
	background: none; border: 0; padding: 8px 0; color: var(--halvany); font: 700 var(--s)/1.5 var(--sans) !important; cursor: pointer;
	text-decoration: underline; text-decoration-color: var(--keret2); text-underline-offset: 4px; display: inline-flex; align-items: center; gap: 8px;
}
html body.wr2 .wrt .link, html body.wr2 .wrt .link:hover, html body.wr2 .wrt .link:focus { background: none !important; box-shadow: none !important; border: 0 !important; min-height: 0; }
html body.wr2 .wrt .link:hover { color: var(--cim); }
html body.wr2 .wrt .link svg { width: 16px; height: 16px; }
html body.wr2 .wrt .row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; flex-wrap: wrap; gap: 8px; }

/* Két szám */
html body.wr2 .wrt .field { margin: 0 0 32px; }
html body.wr2 .wrt .field label { display: block; font-weight: 700; margin: 0 0 8px; color: var(--cim); font-size: var(--p); }
html body.wr2 .wrt .field .hint { display: block; font-weight: 400; color: var(--halvany); font-size: var(--s); margin-top: 8px; }
html body.wr2 .wrt .slider { display: flex; align-items: center; gap: 16px; }
html body.wr2 .wrt input[type=range] { flex: 1; accent-color: var(--gomb) !important; height: 32px; }
html body.wr2 .wrt .val { min-width: 96px; text-align: right; font: 800 var(--p)/1.2 var(--sans); color: var(--gomb); }
html body.wr2 .wrt #value, html body.wr2 .wrt .wrt-email-sor input {
	width: 100%; min-height: 0; padding: 24px !important; border-radius: var(--r) !important; border: 1.5px solid var(--keret2) !important;
	background: var(--feher); color: var(--cim); font: 400 var(--p)/1.4 var(--sans) !important; box-shadow: none;
}
html body.wr2 .wrt input:focus { border-color: var(--gomb) !important; box-shadow: 0 0 0 3px rgba(217, 112, 26, .18) !important; outline: none; }
html body.wr2 .wrt input::placeholder { color: var(--halvany); opacity: 1; }

/* Eredmény */
html body.wr2 .wrt .score { display: flex; align-items: baseline; gap: 16px; margin: 0 0 8px; }
html body.wr2 .wrt .score b { font: 800 var(--h1)/1 var(--serif); color: var(--gomb); }
html body.wr2 .wrt .score span { color: var(--halvany); font-size: var(--p); }
html body.wr2 .wrt .verdict { font-size: var(--h2); margin: 0 0 16px; }
html body.wr2 .wrt .numbers { display: grid; gap: 16px; margin: 24px 0; }
html body.wr2 .wrt .numbers[hidden] { display: none; }
html body.wr2 .wrt .num { border: 1px solid var(--keret); border-radius: var(--r); padding: 24px; background: var(--hatter); }
html body.wr2 .wrt .num b { display: block; font: 700 var(--h3)/1.1 var(--serif); color: var(--cim); }
html body.wr2 .wrt .num.cy b { color: var(--gomb); }
html body.wr2 .wrt .num span { display: block; font-size: var(--p); color: var(--szoveg); margin-top: 8px; }
html body.wr2 .wrt .loss { margin: 8px 0 32px; padding: 0; list-style: none; }
html body.wr2 .wrt .loss li { padding: 16px 0; border-top: 1px solid var(--keret); }
html body.wr2 .wrt .loss li:first-child { border-top: 0; }
html body.wr2 .wrt .loss b { display: block; font-weight: 700; font-size: var(--p); color: var(--cim); line-height: 1.5; }
html body.wr2 .wrt .loss span { display: block; color: var(--szoveg); font-size: var(--p); margin-top: 8px; }
html body.wr2 .wrt .loss span::before { content: 'Ha nem: '; color: var(--gomb); font-weight: 700; }

/* Megnyugtatás + Keress meg (nem minden igen) */
html body.wr2 .wrt .wrt-hivj { margin: 32px 0 24px; padding: 32px 24px; border: 1.5px solid var(--keret2); border-radius: var(--r); background: var(--krem); }
html body.wr2 .wrt-hivj[hidden] { display: none !important; }
html body.wr2 .wrt .final { font-size: var(--h2); line-height: 1.1; font-weight: 800; margin: 0 0 16px; }
html body.wr2 .wrt .final-sub { margin: 0 0 24px; }
html body.wr2 .wrt .cta-note { display: block; text-align: center; margin-top: 16px; font-size: var(--s); color: var(--halvany); }

/* Eredmény e-mailben */
html body.wr2 .wrt .wrt-email { margin: 0 0 32px; padding: 32px 24px; border: 1px solid var(--keret); border-radius: var(--r); background: var(--hatter); }
html body.wr2 .wrt .wrt-email-cim { margin: 0 0 16px; }
html body.wr2 .wrt .wrt-email-cim b { font-weight: 700; color: var(--cim); }
html body.wr2 .wrt .wrt-email-sor { display: flex; gap: 16px; flex-wrap: wrap; }
html body.wr2 .wrt .wrt-email-sor input { flex: 1 1 240px; width: auto; }
html body.wr2 .wrt .wrt-email-sor .btn { flex: 1 1 auto; }
html body.wr2 .wrt .wrt-pipa { display: flex; gap: 8px; align-items: flex-start; font: 400 var(--s)/1.5 var(--sans) !important; color: var(--szoveg); margin: 16px 0 8px; cursor: pointer; }
html body.wr2 .wrt .wrt-pipa input { width: 24px; height: 24px; margin: 0; accent-color: var(--gomb); flex: 0 0 24px; }
html body.wr2 .wrt .wrt-adat { font-size: var(--s); color: var(--halvany); margin: 8px 0 0; }
html body.wr2 .wrt .wrt-adat a { color: var(--gomb); text-decoration: underline; text-underline-offset: 3px; }
html body.wr2 .wrt .wrt-email-allapot { font-size: var(--s); margin: 8px 0 0; color: var(--cim); font-weight: 700; }
html body.wr2 .wrt .wrt-email-allapot:empty { display: none; }
html body.wr2 .wrt .wrt-email-kesz { color: var(--cim); font-weight: 700; margin: 0; display: flex; gap: 8px; align-items: flex-start; }
html body.wr2 .wrt .wrt-email-kesz[hidden] { display: none; }
html body.wr2 .wrt .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html body.wr2 .wrt .wr-csapda { position: absolute; left: -9999px; }

/* „Ezt a tesztet is én építettem” */
html body.wr2 .wrt .made { margin: 0 0 24px; padding: 24px; border: 1px solid var(--keret); border-radius: var(--r); background: var(--hatter); }
html body.wr2 .wrt .made svg { display: none; }
html body.wr2 .wrt .made p { margin: 0; font-size: var(--p); }
html body.wr2 .wrt .made b { display: block; font: 700 var(--h3)/1.1 var(--serif); margin-bottom: 8px; color: var(--cim); }

/* Szlogen és aláírás: a név külön sorban, 32 px-re a szlogentől */
html body.wr2 .wrt .sign { text-align: center; margin: 32px 0 0; color: var(--szoveg); font-size: var(--p); line-height: 1.5; }
html body.wr2 .wrt .sign strong { display: block; color: var(--cim); font-weight: 700; }
html body.wr2 .wrt .sign .name { display: block; margin-top: 32px; font: 700 var(--h3)/1.1 var(--serif); color: var(--cim); }

/* Beszélgetés képernyő (a „Keress meg” már a /beszeljunk/ oldalra visz, ez csak tartalék) */
html body.wr2 .wrt .wr-urlap-form > .wr-urlap-cim, html body.wr2 .wrt .wr-urlap-form > .wr-urlap-alcim { display: none; }

@media (min-width: 768px) {
	html body.wr2 .wrt-wrap { max-width: 816px; padding: 64px 48px 96px; }
	html body.wr2 .wrt-card { padding: 48px !important; }
	html body.wr2 .wrt .wrt-hivj, html body.wr2 .wrt .wrt-email { padding: 32px; }
	html body.wr2 .wrt .btn.ag { padding: 24px 48px; }
}
@media (min-width: 1280px) {
	html body.wr2 .wrt-wrap { max-width: 1056px; padding: 64px 64px 112px; }
	html body.wr2 .wrt-card { padding: 64px !important; }
	html body.wr2 .wrt .btn { padding: 24px 64px; }
	html body.wr2 .wrt .btn.ag { padding: 24px 48px; }
}
@media (max-width: 480px) {
	html body.wr2 .wrt-card { padding: 32px 16px !important; }
	html body.wr2 .wrt .wrt-hivj, html body.wr2 .wrt .wrt-email, html body.wr2 .wrt .made { padding: 24px 16px; }
	html body.wr2 .wrt .btn { padding: 24px 32px; }
	html body.wr2 .wrt .wrt-email-sor .btn, html body.wr2 .wrt .wrt-hivj .btn { padding: 24px 16px; gap: 8px; }
	html body.wr2 .wrt .wrt-email-sor .btn svg { display: none; }
	html body.wr2 .wrt .btn.ag { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	html body.wr2 .wrt .btn, html body.wr2 .wrt .bar i { transition: none; }
	html body.wr2 .wrt .btn:hover { transform: none; }
}

/* ---------- A teszt köszönőoldala (/teszt/koszonom/, .wrtk szakaszok) ---------- */
html body.wr2 .wrtk.e-con, html body.wr2 .wrtk.e-con > .e-con-inner { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 32px; --row-gap: 32px; --column-gap: 32px; gap: 32px !important; }
html body.wr2 .wrtk.e-con { padding: 72px 24px !important; border-top: 1px solid var(--keret); }
html body.wr2 .wrtk.e-con > .e-con-inner { padding: 0 !important; }
html body.wr2 .wrtk.wrtk-elso.e-con { border-top: 0; }
html body.wr2 .wrtk.e-con { background: var(--hatter) !important; }
html body.wr2 .wrtk.wrtk-krem.e-con { background: var(--krem) !important; }
html body.wr2 .wrtk .elementor-heading-title { font-family: var(--serif) !important; color: var(--cim) !important; line-height: 1.1 !important; text-wrap: balance; letter-spacing: 0; }
html body.wr2 .wrtk h1.elementor-heading-title { font-size: var(--h1) !important; font-weight: 800 !important; letter-spacing: -.02em; }
html body.wr2 .wrtk h2.elementor-heading-title { font-size: var(--h2) !important; font-weight: 800 !important; }
html body.wr2 .wrtk .elementor-widget-text-editor, html body.wr2 .wrtk .elementor-widget-text-editor p { font-family: var(--sans) !important; font-size: var(--p) !important; line-height: 1.5 !important; color: var(--szoveg) !important; max-width: 680px; margin-left: auto; margin-right: auto; }
html body.wr2 .wrtk .elementor-widget-text-editor p { margin: 0 0 8px; }
html body.wr2 .wrtk .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
html body.wr2 .wrtk .e-con.wrtk-kartya {
	background: var(--feher) !important; border: 1px solid var(--keret) !important; border-radius: var(--r) !important;
	padding: 32px 24px !important; box-shadow: var(--arnyek) !important; --padding-top: 32px; --padding-bottom: 32px; --padding-left: 24px; --padding-right: 24px;
}
html body.wr2 .wrtk .elementor-icon-box-title { font: 700 var(--h3)/1.1 var(--serif) !important; color: var(--cim) !important; margin: 0 0 8px !important; }
html body.wr2 .wrtk .elementor-icon-box-description { font: 400 var(--p)/1.5 var(--sans) !important; color: var(--szoveg) !important; }
html body.wr2 .wrtk .elementor-icon-box-icon { margin-bottom: 16px !important; }
html body.wr2 .wrtk .elementor-icon-box-icon .elementor-icon { width: 64px; height: 64px; font-size: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); background: var(--hatter) !important; border: 1.5px solid var(--keret); color: var(--cim) !important; }
html body.wr2 .wrtk .elementor-icon-box-icon .elementor-icon svg { width: 32px; height: 32px; }
html body.wr2 .wrtk .wrtk-gomb .elementor-button {
	padding: 24px 48px !important; font: 800 var(--p)/1.2 var(--sans) !important; border-radius: var(--r) !important; border: 0 !important;
	background: var(--gomb) !important; color: var(--gomb-betu) !important; gap: 16px;
}
html body.wr2 .wrtk .wrtk-gomb .elementor-button:hover { background: var(--gomb-hover) !important; }
html body.wr2 .wrtk .wrtk-gomb .elementor-button-icon svg, html body.wr2 .wrtk .wrtk-gomb .elementor-button-icon i { fill: var(--gomb-betu) !important; color: var(--gomb-betu) !important; }
/* Hírlevél a köszönőoldalon: egy fehér kártyában, középen */
html body.wr2 .wrtk .wr-hirlevel { max-width: 680px; margin: 0 auto; background: var(--feher); border: 1px solid var(--keret); border-radius: var(--r); padding: 32px 24px; box-shadow: var(--arnyek); text-align: left; }
html body.wr2 .wrtk .wr-hirlevel .wr-urlap-cim { font: 700 var(--h3)/1.1 var(--serif) !important; color: var(--cim) !important; margin: 0 0 8px; }
html body.wr2 .wrtk .wr-hirlevel p, html body.wr2 .wrtk .wr-hirlevel .wr-urlap-alcim { font-size: var(--p) !important; line-height: 1.5; color: var(--szoveg) !important; }
html body.wr2 .wrtk .wr-hirlevel .wr-pipa { font-size: var(--s) !important; }
html body.wr2 .wrtk .wr-hirlevel input[type=email] { border: 1.5px solid var(--keret2) !important; border-radius: var(--r) !important; padding: 16px 24px !important; font: 400 var(--p)/1.4 var(--sans) !important; color: var(--cim) !important; background: var(--feher) !important; }
html body.wr2 .wrtk .wr-hirlevel .wr-gomb { padding: 24px 48px !important; font: 800 var(--p)/1.2 var(--sans) !important; border-radius: var(--r) !important; background: var(--gomb) !important; color: var(--gomb-betu) !important; }
html body.wr2 .wrtk .wr-hirlevel .wr-gomb:hover { background: var(--gomb-hover) !important; }
html body.wr2 .wrtk .wr-kozosseg .elementor-social-icon { background-color: var(--gomb) !important; width: 56px; height: 56px; }

@media (min-width: 768px) {
	html body.wr2 .wrtk.e-con { padding: 96px 48px !important; }
	html body.wr2 .wrtk .e-con.wrtk-kartya, html body.wr2 .wrtk .wr-hirlevel { padding: 32px !important; }
}
@media (min-width: 1280px) {
	html body.wr2 .wrtk.e-con { padding: 112px max(64px, calc((100% - 1440px) / 2)) !important; }
	html body.wr2 .wrtk .wrtk-gomb .elementor-button, html body.wr2 .wrtk .wr-hirlevel .wr-gomb { padding: 24px 64px !important; }
}

/* „Keress meg” gombok egérre megrezegnek (Magdolna 2026-11-04); minden, a Beszéljünk oldalra vivő gomb */
@keyframes wrRezeg { 0%,100% { transform: translateX(0) rotate(0); } 15% { transform: translateX(-4px) rotate(-2deg); } 30% { transform: translateX(4px) rotate(2deg); } 45% { transform: translateX(-3px) rotate(-1.5deg); } 60% { transform: translateX(3px) rotate(1.5deg); } 75% { transform: translateX(-1px) rotate(-.5deg); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	a[href*="beszeljunk"]:hover, a[href*="beszeljunk"]:hover .elementor-button, .elementor-button[href*="beszeljunk"]:hover { animation: wrRezeg .5s ease-in-out both; }
}