/* Lassú pénz – közös stílus. Képregényes: tusvonal-keretek, eltolt árnyék, szóbuborékok. */
:root {
  color-scheme: light;
  --papir: #f3eee3;
  --papir-2: #fbf8f1;
  --feher: #ffffff;
  --tinta: #1d1d1b;
  --cim: #1b2a4a;
  --szoveg: #2b2b2b;
  --halvany: #5d5a52;
  --vonal: #d9d2c2;
  --zold: #3f7a3a;
  --zold-sotet: #2f5e2b;
  --kek: #3b5ba0;
  --terrakotta: #c8754a;
  --arany: #e3c24a;
  --kiemelo: #f6d96b;
  --hiba: #a3341f;
  --keret: 3px solid var(--tinta);
  --arnyek: 6px 6px 0 var(--tinta);
  --arnyek-kicsi: 4px 4px 0 var(--tinta);
  --sugar: 12px;
  --betu: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --szel: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background-color: var(--papir);
  /* enyhe papírtextúra, mint a rajzokon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--szoveg);
  font-family: var(--betu);
  font-size: 1.0625rem;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--zold-sotet); text-underline-offset: 3px; }
a:hover { color: var(--cim); }
:focus-visible { outline: 3px solid var(--kek); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { color: var(--cim); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

.tarolo { width: 100%; max-width: var(--szel); margin: 0 auto; padding: 0 16px; }
.szakasz { padding: 56px 0; }
.szakasz--keskeny { padding: 32px 0; }
.kozep { text-align: center; }
.halvany { color: var(--halvany); }
.kicsi { font-size: .9rem; }
.rejtett { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Fejléc ---------- */
.fejlec { background: var(--papir-2); border-bottom: var(--keret); position: sticky; top: 0; z-index: 20; }
.fejlec .tarolo { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cim); font-weight: 800; font-size: 1.25rem; }
.marka img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--tinta); }
.menu { margin-left: auto; display: flex; gap: 4px 18px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.menu a { color: var(--cim); text-decoration: none; font-weight: 700; font-size: .98rem; }
.menu a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .fejlec .tarolo { flex-wrap: wrap; gap: 4px 12px; padding-top: 8px; padding-bottom: 8px; }
  .menu { margin-left: 0; width: 100%; justify-content: flex-start; font-size: .95rem; }
  .menu .gomb { display: none; }
  .marka img { width: 34px; height: 34px; }
}

/* ---------- Gombok ---------- */
.gomb {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 800; font-size: 1rem; line-height: 1.2;
  padding: 12px 20px; border: var(--keret); border-radius: 999px;
  background: var(--kiemelo); color: var(--tinta); text-decoration: none; cursor: pointer;
  box-shadow: var(--arnyek-kicsi); transition: transform .12s ease, box-shadow .12s ease;
}
.gomb:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tinta); color: var(--tinta); }
.gomb:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
.gomb--zold { background: var(--zold); color: #fff; }
.gomb--zold:hover { color: #fff; }
.gomb--feher { background: var(--feher); }
.gomb--kicsi { padding: 8px 14px; font-size: .92rem; }
.gomb svg { width: 20px; height: 20px; flex: none; }
.gombsor { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

/* ---------- Panel (képregénykocka) ---------- */
.panel { background: var(--papir-2); border: var(--keret); border-radius: var(--sugar); box-shadow: var(--arnyek); }
.panel--feher { background: var(--feher); }
.panel-kep { overflow: hidden; }
.panel-kep img { width: 100%; }

/* ---------- Szóbuborék ---------- */
.buborek {
  position: relative; background: var(--feher); border: var(--keret); border-radius: 22px;
  padding: 14px 18px; font-weight: 700; color: var(--tinta); line-height: 1.4; max-width: 300px;
  box-shadow: var(--arnyek-kicsi);
}
.buborek::before, .buborek::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; }
/* farok lefelé-balra */
.buborek--le::before { left: 34px; bottom: -22px; border-width: 22px 18px 0 0; border-color: var(--tinta) transparent transparent transparent; }
.buborek--le::after { left: 37px; bottom: -15px; border-width: 16px 13px 0 0; border-color: var(--feher) transparent transparent transparent; }
/* farok balra (a szereplő a buborék bal oldalán) */
.buborek--bal::before { left: -24px; top: 26px; border-width: 0 24px 16px 0; border-color: transparent var(--tinta) transparent transparent; }
.buborek--bal::after { left: -16px; top: 29.5px; border-width: 0 17px 11px 0; border-color: transparent var(--feher) transparent transparent; }

/* ---------- Nyitó ---------- */
.nyito { padding: 40px 0 24px; overflow: hidden; }
.nyito-racs { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; }
.nyito h1 { margin-bottom: .2em; }
.alcim { font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 700; color: var(--cim); margin-bottom: .8em; }
.nyito-szoveg p { max-width: 36em; }
/* a buborék a fejek fölött, saját helyen; a farka a főszereplő felé mutat */
.szereplo-blokk { display: flex; flex-direction: column; align-items: center; }
.szereplo-blokk .buborek { max-width: 300px; font-size: .98rem; margin: 0 0 30px; align-self: flex-start; margin-left: 6%; }
.szereplo-blokk .buborek--le::before { left: 30%; }
.szereplo-blokk .buborek--le::after { left: calc(30% + 3px); }
/* a talajvonal csak a szereplők alatt fut */
.szereplok { display: flex; justify-content: center; align-items: flex-end; width: 100%; border-bottom: var(--keret); }
.szereplok img { width: 48%; max-width: 280px; }
.szereplok .kata { width: 41%; max-width: 239px; margin-left: -4%; }
@media (max-width: 820px) {
  .nyito-racs { grid-template-columns: 1fr; }
  .szereplo-blokk { max-width: 520px; margin: 8px auto 0; width: 100%; }
  .szereplo-blokk .buborek { max-width: 250px; margin-left: 0; }
}

/* ---------- Fa-sor: így nő ---------- */
.fasor { display: grid; grid-template-columns: 305fr 275fr 265fr 377fr; column-gap: 14px; margin-top: 24px; max-width: 860px; }
.fasor figure { margin: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.fasor figure .panel { align-self: end; }
.fasor .panel { overflow: hidden; }
.fasor figcaption { padding: 12px 4px 0; }
.fasor figcaption strong { display: block; color: var(--cim); font-size: 1.05rem; }
.fasor figcaption span { color: var(--halvany); font-size: .95rem; line-height: 1.45; display: block; }
.fasor .lepes { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--kiemelo); border: 2px solid var(--tinta); font-weight: 800; font-size: .9rem; margin-bottom: 4px; }
/* a képek teljes magasságukban látszanak (a fák a cserepek fölött nőnek) */
.fasor .panel img { width: 100%; height: auto; }
@media (max-width: 760px) {
  .fasor { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .fasor .panel { max-width: 220px; }
}

/* ---------- Történetek ---------- */
.kartyak { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.kartya { display: flex; flex-direction: column; overflow: hidden; }
.kartya img { border-bottom: var(--keret); aspect-ratio: 16 / 9; object-fit: cover; }
.kartya .kartya-test { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.kartya .resz { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--terrakotta); }
.kartya h3 { margin: 0; }
.kartya p { margin: 0; color: var(--halvany); font-size: .97rem; }
.kartya .szamok { margin-top: auto; padding-top: 10px; font-weight: 700; color: var(--zold-sotet); font-size: .95rem; }
@media (max-width: 900px) { .kartyak { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- Kiemelt sáv (kalkulátor-ajánló) ---------- */
.ajanlo { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; padding: 28px; }
.ajanlo img { width: 200px; }
@media (max-width: 640px) { .ajanlo { grid-template-columns: 1fr; padding: 20px; } .ajanlo img { width: 150px; } }

/* ---------- Feliratkozás ---------- */
.feliratkozas { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: end; padding: 28px 28px 0; overflow: hidden; }
.feliratkozas .kata-kep { width: 240px; align-self: end; }
.feliratkozas .urlap-resz { padding-bottom: 28px; }
@media (max-width: 760px) {
  .feliratkozas { grid-template-columns: 1fr; padding: 20px 20px 0; }
  .feliratkozas .kata-kep { width: 170px; order: 2; justify-self: center; }
  .feliratkozas .urlap-resz { padding-bottom: 8px; }
}
.urlap { display: grid; gap: 14px; max-width: 520px; }
.urlap label { font-weight: 700; color: var(--cim); }
.mezo {
  width: 100%; font: inherit; font-size: 1.05rem; padding: 12px 14px; border: var(--keret); border-radius: 10px;
  background: var(--feher); color: var(--tinta);
}
.mezo:focus { outline: 3px solid var(--kek); outline-offset: 1px; }
.jelolo { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-weight: 400 !important; color: var(--szoveg) !important; font-size: .95rem; line-height: 1.45; }
.jelolo input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--zold); }
.mez { position: absolute; left: -5000px; } /* csapda a robotoknak */
.uzenet { border: 2px solid var(--tinta); border-radius: 10px; padding: 12px 14px; font-weight: 600; }
.uzenet--ok { background: #e3efd9; }
.uzenet--info { background: #fbf1cf; }
.uzenet--hiba { background: #f6ddd5; color: var(--hiba); }

/* ---------- Kalkulátor ---------- */
.kalk { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; }
@media (max-width: 920px) { .kalk { grid-template-columns: 1fr; } }
.kalk-urlap { padding: 22px; display: grid; gap: 18px; }
.kalk-urlap fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.kalk-urlap legend { font-weight: 800; color: var(--cim); margin-bottom: 6px; padding: 0; }
.mezo-csop { display: grid; gap: 6px; }
.mezo-csop label { font-weight: 700; color: var(--cim); }
.mezo-sor { display: flex; align-items: center; gap: 8px; }
.mezo-sor .mezo { flex: 1; min-width: 0; }
.mezo-sor .egyseg { font-weight: 700; color: var(--halvany); min-width: 2.4em; }
.mezo-csop input[type="range"] { width: 100%; accent-color: var(--zold); }
.sugo { font-size: .87rem; color: var(--halvany); line-height: 1.4; }
.valaszto { display: grid; gap: 8px; }
.valaszto label { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 2px solid var(--tinta); border-radius: 10px; background: var(--feher); cursor: pointer; font-weight: 400; line-height: 1.35; }
.valaszto label strong { display: block; color: var(--cim); }
.valaszto label span { font-size: .87rem; color: var(--halvany); }
.valaszto input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--zold); }
.valaszto label:has(input:checked) { background: #eef5e6; box-shadow: var(--arnyek-kicsi); }

.eredmeny { padding: 22px; display: grid; gap: 18px; }
.eredmeny-fej { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
.fo-szam { font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 800; color: var(--cim); line-height: 1.05; font-variant-numeric: tabular-nums; }
.fo-felirat { font-weight: 700; color: var(--halvany); }
.fa-allapot { width: 92px; text-align: center; font-size: .8rem; font-weight: 700; color: var(--halvany); }
.fa-allapot .panel { overflow: hidden; box-shadow: var(--arnyek-kicsi); border-width: 2px; border-radius: 8px; }
.fa-allapot img { width: 100%; height: auto; }
.csempek { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.csempe { border: 2px solid var(--tinta); border-radius: 10px; padding: 10px 12px; background: var(--feher); }
.csempe .c-cim { font-size: .85rem; color: var(--halvany); font-weight: 700; }
.csempe .c-ertek { font-size: clamp(1rem, 2.2vw, 1.25rem); font-weight: 800; overflow-wrap: anywhere; color: var(--cim); font-variant-numeric: tabular-nums; }
.csempe .c-pont { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: 0; border: 1.5px solid var(--tinta); }
.megjegyzes { border-left: 5px solid var(--arany); background: #fbf3d8; padding: 12px 14px; border-radius: 0 10px 10px 0; font-size: .95rem; }
.megjegyzes p:last-child { margin-bottom: 0; }

.jelmagyarazat { display: flex; gap: 18px; flex-wrap: wrap; font-size: .9rem; font-weight: 700; color: var(--szoveg); }
.jelmagyarazat span { display: inline-flex; align-items: center; gap: 6px; }
.jelmagyarazat i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.grafikon { position: relative; }
.grafikon svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.grafikon .tengely text { font-size: 12px; fill: var(--halvany); font-family: var(--betu); }
.grafikon .racs line { stroke: var(--vonal); stroke-width: 1; }
.grafikon .alapvonal { stroke: var(--tinta); stroke-width: 1.5; }
.grafikon .cimke { font-size: 13px; font-weight: 700; fill: var(--szoveg); font-family: var(--betu); }
.grafikon .szalkereszt { stroke: var(--tinta); stroke-width: 1; stroke-dasharray: 3 3; }
.sugobuborek { position: absolute; pointer-events: none; background: var(--feher); border: 2px solid var(--tinta); border-radius: 10px; padding: 8px 10px; font-size: .85rem; line-height: 1.4; box-shadow: 3px 3px 0 var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; z-index: 2; }
.sugobuborek b { color: var(--cim); }
.tablazat-doboz { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--vonal); text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { color: var(--cim); border-bottom: 2px solid var(--tinta); }
details > summary { cursor: pointer; font-weight: 700; color: var(--cim); }

.felelosseg { border: var(--keret); border-radius: var(--sugar); background: #fff7df; padding: 16px 18px; box-shadow: var(--arnyek-kicsi); }
.felelosseg strong { color: var(--cim); }
.kalk-szereplo { display: flex; align-items: flex-end; gap: 6px; }
.kalk-szereplo img { width: 150px; }
.kalk-szereplo .buborek { margin-bottom: 70px; }
@media (max-width: 640px) { .kalk-szereplo img { width: 110px; } .kalk-szereplo .buborek { margin-bottom: 40px; font-size: .95rem; } }

/* ---------- Szöveges oldalak (jogi) ---------- */
.dokumentum { padding: 28px; max-width: 820px; margin: 0 auto; }
.dokumentum h2 { font-size: 1.35rem; margin-top: 1.6em; }
.dokumentum h3 { font-size: 1.1rem; margin-top: 1.2em; }
.dokumentum ul { padding-left: 1.2em; }
.dokumentum li { margin-bottom: .35em; }
.kitoltendo { background: #ffe58a; border: 1.5px dashed var(--tinta); border-radius: 4px; padding: 0 4px; font-weight: 700; }
.adat { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 6px 16px; }
.adat dt { font-weight: 700; color: var(--cim); }
.adat dd { margin: 0; }
@media (max-width: 560px) { .adat { grid-template-columns: 1fr; } .adat dd { margin-bottom: 8px; } .dokumentum { padding: 20px; } }

/* ---------- Lábléc ---------- */
.lablec { margin-top: 40px; border-top: var(--keret); background: var(--papir-2); }
.lablec-fa { height: 150px; background: url("../kepek/nagy_fa.webp") center 38% / cover no-repeat; border-bottom: var(--keret); }
.lablec .tarolo { padding-top: 24px; padding-bottom: 32px; display: grid; gap: 10px; }
.lablec nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 700; }
.lablec nav a { color: var(--cim); }
.lablec p { margin: 0; font-size: .9rem; color: var(--halvany); max-width: 60em; }
.gombsor--ter { margin-top: 28px; }
.feliratkozas .buborek { margin: 0 0 18px; }
.felelosseg .forras { margin: 0; }
.kozep-kep { max-width: min(420px, 100%); margin: 0 auto 20px; border: var(--keret); border-radius: var(--sugar); }
.gombsor--kozep { justify-content: center; }
.kalk > * { min-width: 0; }
@media (max-width: 520px) {
  .eredmeny, .kalk-urlap { padding: 16px; }
  .eredmeny-fej { grid-template-columns: 1fr 70px; gap: 10px; }
  .fa-allapot { width: 70px; }
  .fo-szam { font-size: 1.85rem; }
  .csempek { grid-template-columns: 1fr 1fr; gap: 8px; }
  .csempe { padding: 8px 10px; }
  .csempe .c-ertek { font-size: 1rem; }
}
.eredmeny { grid-template-columns: minmax(0, 1fr); }
.eredmeny-fej > div { min-width: 0; }
.fa-allapot { margin: 0; }
[id] { scroll-margin-top: 96px; }
.sugobuborek { white-space: normal; max-width: min(330px, 100%); }
/* kiemelt figyelmeztetés (nyugdíjpénztár: lekötött pénz) */
.figyelem { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; border: var(--keret); border-radius: 12px; background: #fde4d8; padding: 14px 16px; box-shadow: var(--arnyek-kicsi); color: var(--tinta); }
.figyelem[hidden] { display: none; }
.figyelem svg { width: 34px; height: 34px; color: var(--hiba); }
.figyelem p { margin: 0 0 6px; }
.figyelem p:last-child { margin: 0; }
.figyelem .figyelem-cim { font-weight: 800; font-size: 1.12rem; color: var(--hiba); }
.valaszto .figyelem-sor { color: var(--hiba); font-weight: 800; }
.figyelem-lista { margin: 4px 0 8px; padding-left: 1.2em; }
.figyelem-lista li { margin-bottom: 2px; }