/* Bankkalauz márkaréteg (bk) az Affiliate design terv (af-) közös alapjára — 2026-09-28, tervezési szakasz.
   Színek: kl-light a :root-on, kl-dark a prefers-color-scheme + data-theme ágon (G1: 78 pár, 0 hiba).
   Betűk: Schibsted Grotesk 700/800 (címsor) + IBM Plex Sans 400–700 (törzs); élesben self-hosted woff2 (B, G2). */
/* tokenek: kl-tokens.css (tokens2css.py generálja) */

/* ---- kl- site-extrák (csak közös tokenekből) ---- */
.kl-wrap{max-width:var(--wide-width);margin:0 auto;padding:0 var(--space-6)}
.kl-col{max-width:var(--content-width);margin:0 auto}
.kl-logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.4px;color:var(--brand);text-decoration:none}
.kl-logo svg{width:40px;height:40px;flex:none}
.kl-logo span b{color:var(--ink);font-weight:800}

/* Nyitókép: bal oldalt a válasz, jobb oldalt a „ma a legtöbb” ajánlatkötet */
.kl-hero{background:var(--brand);color:var(--on-brand);position:relative;overflow:hidden}
.kl-hero__in{max-width:var(--wide-width);margin:0 auto;padding:var(--space-8) var(--space-6);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-7);align-items:center;position:relative}
.kl-hero h1{color:var(--on-brand)}
.kl-hero .af-lead{color:var(--on-brand);opacity:.92}
.kl-hero .af-eyebrow{color:var(--decor-2)}
.kl-hero__rings{position:absolute;right:-160px;top:-160px;width:620px;height:620px;border-radius:50%;border:2px solid color-mix(in srgb, var(--on-brand) 10%, transparent);box-shadow:0 0 0 70px color-mix(in srgb, var(--on-brand) 3%, transparent),0 0 0 140px color-mix(in srgb, var(--on-brand) 2%, transparent)}
.kl-hero .af-btn--outline{color:var(--on-brand);border-color:color-mix(in srgb, var(--on-brand) 55%, transparent)}
.kl-hero .af-btn--outline:hover{border-color:var(--on-brand)}
.kl-hero .kl-hero__proof{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);font-size:var(--fs-small);color:var(--on-brand);opacity:.9}
.kl-hero .kl-hero__proof span{display:inline-flex;gap:6px;align-items:center}
.kl-hero .kl-hero__proof svg{width:16px;height:16px;stroke:var(--decor-2);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* Ajánlatkötet a nyitóképen */
.kl-stack{background:var(--surface-raised);color:var(--ink);border-radius:var(--radius-lg);box-shadow:0 30px 60px -30px color-mix(in srgb, var(--ink) 45%, transparent);padding:var(--space-5);display:grid;gap:var(--space-3)}
.kl-stack__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.kl-stack__row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-3);border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--line)}
.kl-stack__row.is-top{background:var(--surface-sand);border-color:transparent}
.kl-bank{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--on-brand);background:var(--brand)}
.kl-bank--2{background:var(--brand-strong)}
.kl-bank--3{background:var(--ink)}
.kl-stack__amt{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.4px;color:var(--positive);white-space:nowrap;text-align:right}
.kl-stack__amt small{display:block;font-family:var(--font-body);font-size:var(--fs-label);font-weight:600;color:var(--ink-muted);letter-spacing:0}

/* Ajánlatkártya (akciós oldal) */
.kl-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.kl-offer{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);display:grid;gap:var(--space-3);align-content:start;box-shadow:var(--shadow-card)}
.kl-offer.is-pick{border:2px solid var(--brand)}
.kl-offer__top{display:flex;align-items:center;gap:var(--space-3)}
.kl-offer__amt{font-family:var(--font-display);font-weight:800;font-size:38px;line-height:1;letter-spacing:-1px;color:var(--positive)}
.kl-offer ul{margin:0;padding-left:1.1em;display:grid;gap:4px;font-size:var(--fs-small)}
.kl-offer .af-btn{width:100%}
.kl-deadline{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--sponsored-ink);background:var(--sponsored-surface);border-radius:var(--radius-sm);padding:3px 8px;justify-self:start}

/* Híd-blokk: hibaelhárító cikkből a második számla felé */
.kl-hid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4) var(--space-5);align-items:center;background:var(--surface-sand);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6)}
.kl-hid__ico{width:56px;height:56px;border-radius:50%;background:var(--surface-raised);display:grid;place-items:center;box-shadow:var(--shadow-card)}
.kl-hid__ico svg{width:28px;height:28px;stroke:var(--brand);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Lépések a hibaelhárításban */
.kl-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);counter-reset:bk}
.kl-steps li{counter-increment:bk;display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--space-3);align-items:start;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4)}
.kl-steps li::before{content:counter(bk);width:40px;height:40px;border-radius:50%;background:var(--surface-sky);color:var(--brand);font-family:var(--font-display);font-weight:800;display:grid;place-items:center}

/* Hírlevél-sáv (Reach-űrlap a márka színeiben, nem a sablon kékjében) */
.kl-news{background:var(--brand);color:var(--on-brand);border-radius:var(--radius-xl);padding:var(--space-7);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-6);align-items:center}
.kl-news h2{color:var(--on-brand)}
.kl-news p{color:var(--on-brand);opacity:.92}
.kl-form{display:grid;gap:var(--space-2)}
.kl-form label{font-size:var(--fs-label);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.kl-form__row{display:flex;gap:var(--space-2)}
.kl-form input{flex:1;min-height:52px;border-radius:12px;border:2px solid transparent;padding:0 var(--space-4);font:inherit;color:var(--ink);background:var(--surface-raised)}
.kl-form .af-btn--accent{min-height:52px}
.kl-form small{font-size:var(--fs-small);opacity:.9}

.kl-sec{padding:var(--space-8) 0}
.kl-sec--sand{background:var(--surface-sand)}
.kl-sec__head{display:flex;justify-content:space-between;align-items:end;gap:var(--space-4);margin-bottom:var(--space-5)}
.kl-sec__head a{font-weight:650}
.kl-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.kl-trust>div{display:grid;gap:var(--space-2);align-content:start}
.kl-trust svg{width:32px;height:32px;stroke:var(--brand);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kl-author{display:flex;gap:var(--space-3);align-items:center}
.kl-author i{width:44px;height:44px;border-radius:50%;background:var(--decor-3);display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--brand);font-family:var(--font-display)}

/* Telefon (a vászon mobil tábláin a gyökérelem kapja: .kl-phone) */
.kl-phone .kl-wrap{padding:0 var(--space-4)}
.kl-phone .kl-hero__in{grid-template-columns:1fr;padding:var(--space-6) var(--space-4);gap:var(--space-5)}
.kl-phone .af-display-xl{font-size:var(--fs-display-xl-phone)}
.kl-phone .af h1,.kl-phone h1{font-size:var(--fs-h1-phone)}
.kl-phone .af h2{font-size:calc(var(--fs-h2) - 5px)}
.kl-phone .af-lead{font-size:18px}
.kl-phone .af-bento{grid-template-columns:1fr}
.kl-phone .af-bento__tile--wide{grid-column:auto}
.kl-phone .kl-offers,.kl-phone .kl-trust,.kl-phone .af-info{grid-template-columns:1fr}
.kl-phone .kl-news{grid-template-columns:1fr;padding:var(--space-6) var(--space-5);border-radius:var(--radius-lg)}
.kl-phone .kl-form__row{flex-direction:column}
.kl-phone .kl-sec{padding:var(--space-7) 0}
.kl-phone .kl-hid{grid-template-columns:1fr;padding:var(--space-5)}
.kl-phone .af-nav{display:none}
.kl-phone .af-menu{display:block}
.kl-phone .af-header__in{padding:var(--space-2) var(--space-4)}
.kl-phone .af-footer__in{grid-template-columns:1fr 1fr;padding:var(--space-6) var(--space-4) var(--space-4)}
.kl-phone .af-footer__about{grid-column:1/-1}
.kl-phone .af-bar{grid-template-columns:1fr;gap:4px}
.kl-phone .kl-sec__head{flex-direction:column;align-items:start}

/* A közös alap .af{font-variant-numeric:tabular-nums} ennél a betűpárnál az írásjeleket is kiszélesíti („pénzt ,”, „2026 : ki”) —
   szövegben arányos számok, táblázatban és összegeknél marad a táblázatos (mérve a 2026-09-28-i előnézeten). */
.af :is(h1,h2,h3,p,li,summary,a,span,.af-title,.af-display-xl){font-variant-numeric:normal}
.af :is(td,th,.af-num,.af-price,.af-bar__value,.af-bento__num,.kl-stack__amt,.kl-offer__amt){font-variant-numeric:tabular-nums}
/* Telefonos fejléc: logó + „Akciók most” + Menü 390 px-en elférjen (mérve: 1.0-val 431 px lett, túlcsordult) */
@media (max-width:860px){.af-header .kl-logo{font-size:19px;gap:8px}.af-header .kl-logo svg{width:30px;height:30px}.af-menu>summary{padding:0 10px}}

/* ---- v2 (2026-09-28 este): WL40/SSN-tanulságok — képek, idővonal, csempe-ikonok ---- */
.kl-tile-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--surface);margin-bottom:var(--space-2)}
.af-bento__tile--brand .kl-tile-ico{background:color-mix(in srgb, var(--on-brand) 14%, transparent)}
.kl-tile-ico svg{width:24px;height:24px;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.af-bento__tile--brand .kl-tile-ico svg{stroke:var(--on-brand)}
/* Határidő-idővonal: valódi dátumok, a mai naptól */
.kl-timeline{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);display:grid;gap:var(--space-4)}
.kl-timeline ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.kl-timeline ol::before{content:"";position:absolute;left:12px;right:12px;top:11px;height:3px;background:var(--line);border-radius:2px}
.kl-timeline li{position:relative;display:grid;gap:4px;padding-top:34px}
.kl-timeline li::before{content:"";position:absolute;left:4px;top:3px;width:19px;height:19px;border-radius:50%;background:var(--surface-raised);border:3px solid var(--line-strong)}
.kl-timeline li.is-now::before{background:var(--brand);border-color:var(--brand)}
.kl-timeline li.is-soon::before{background:var(--accent);border-color:var(--accent-strong)}
.kl-timeline b{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.3px}
.kl-phone .kl-timeline ol{grid-template-columns:1fr;gap:var(--space-4)}
.kl-phone .kl-timeline ol::before{left:12px;right:auto;top:12px;bottom:12px;width:3px;height:auto}
.kl-phone .kl-timeline li{padding:0 0 0 40px}
.kl-phone .kl-timeline li::before{top:2px}
/* „Így ellenőrzünk” sáv: képernyőkép + bizalmi pontok */
.kl-proof{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-7);align-items:center}
.kl-phone .kl-proof{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
.kl-proof .kl-trust{grid-template-columns:1fr;gap:var(--space-5)}
.kl-proof .kl-trust>div{grid-template-columns:40px minmax(0,1fr);column-gap:var(--space-3)}
.kl-proof .kl-trust svg{grid-row:span 2}
.kl-portrait{width:64px;height:64px;border-radius:50%;background:var(--decor-3);display:grid;place-items:center;text-align:center;font-size:10.5px;line-height:1.2;color:var(--ink-muted);border:2px dashed var(--line-strong)}
.af-shot__slot mark{background:var(--sponsored-surface);color:var(--sponsored-ink);padding:0 4px;border-radius:4px}
/* a telefonos rácsban a hosszú, nem törő URL-sáv ne tolja ki a hasábot (SSN-tanulság) */
.af-shot,.af-shot__frame{min-width:0;max-width:100%}
/* a v16 alapban az „összes” sor nem volt félkövér (SSN a v19-ben javította; itt tartalék) */
.af .af-nav .af-dd__all a,.af .af-menu__panel .af-dd__all a{font-weight:650}
.kl-proof .kl-trust>.kl-author{display:flex;gap:var(--space-4);align-items:center}
.kl-portrait{flex:none}

/* ---- v3 (2026-09-28 éjjel): kód-lap, kalkulátor, gyűjtő-hub ---- */
.kl-code{background:var(--brand);color:var(--on-brand);border-radius:var(--radius-lg);padding:var(--space-6);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4) var(--space-6);align-items:center}
.kl-code .af-eyebrow{color:var(--decor-2)}
.kl-code .kl-code__val{font-family:var(--font-display);font-weight:800;font-size:64px;line-height:1;letter-spacing:6px;color:var(--on-brand);background:color-mix(in srgb, var(--on-brand) 10%, transparent);border:2px dashed color-mix(in srgb, var(--on-brand) 45%, transparent);border-radius:var(--radius-md);padding:14px 22px;display:inline-block;font-variant-numeric:tabular-nums}
.kl-code p{color:var(--on-brand)}
.kl-code .af-actions{justify-content:flex-end}
.kl-code .af-btn--outline{color:var(--on-brand);border-color:color-mix(in srgb, var(--on-brand) 60%, transparent)}
.kl-phone .kl-code{grid-template-columns:1fr;padding:var(--space-5)}
.kl-phone .kl-code .kl-code__val{font-size:44px;letter-spacing:4px}
.kl-phone .kl-code .af-actions{justify-content:stretch}
.kl-phone .kl-code .af-actions .af-btn{flex:1 1 100%}
.kl-calc{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-5) var(--space-6);display:grid;gap:var(--space-5)}
.kl-calc__fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.kl-calc__f{display:grid;gap:6px}
.kl-calc__f label{font-size:var(--fs-small);font-weight:650}
.kl-calc__in{display:flex;align-items:center;border:2px solid var(--line-strong);border-radius:12px;background:var(--surface);padding:0 var(--space-3);min-height:48px}
.kl-calc__in input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.kl-calc__in span{color:var(--ink-muted);font-size:var(--fs-small)}
.kl-phone .kl-calc{padding:var(--space-5)}
.kl-phone .kl-calc__fields{grid-template-columns:1fr}
.kl-win{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);background:var(--surface-sky);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5)}
.kl-win b{font-family:var(--font-display);font-weight:800;font-size:28px;color:var(--brand)}
.kl-sym{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.kl-sym__col{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);display:grid;gap:var(--space-3);align-content:start}
.kl-sym__col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.kl-sym__col a{display:flex;align-items:center;min-height:var(--target-min);font-weight:600}
.kl-phone .kl-sym{grid-template-columns:1fr}
/* a kód és a gombok a 720 px-es oszlopban egymás mellett nem férnek el (mérve: átfedés) → egymás alatt */
.kl-code{grid-template-columns:minmax(0,1fr)}
.kl-code .af-actions{justify-content:flex-start}

/* G3/B (09-28 mérés): elrendezés osztályból, nem inline display-ből (a Hostingeren a safecss kitörli) */
.kl-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
.kl-phone .kl-split{grid-template-columns:minmax(0,1fr)}
.kl-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5)}
.kl-swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--space-4)}
.kl-swatch{display:grid;gap:6px}
.kl-swatch__bar{height:64px;border-radius:12px;display:flex;overflow:hidden;border:1px solid var(--line)}
.kl-swatch__bar span{flex:1}
/* G3: látható fókusz a saját mezőkön is */
.kl-calc__in:focus-within,.kl-form input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.kl-news .kl-form input:focus-visible{outline-color:var(--on-brand)}

/* Hostinger Reach hírlevél-űrlap a márka színeiben (élő tesztlapon mérve 09-28: a sablon kék gombja jelent meg). Csak stílus, a működéshez nem nyúl. */
.af .hostinger-reach-block-subscription-form-wrapper{background:var(--surface-sky);border-radius:var(--radius-lg);padding:var(--space-5)}
.af .hostinger-reach-block-subscription-form label{font-size:var(--fs-label);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink)}
.af .hostinger-reach-block-subscription-form input[type=email]{min-height:48px;border:2px solid var(--line-strong);border-radius:12px;background:var(--surface-raised);color:var(--ink);font:inherit;padding:0 var(--space-4)}
.af .hostinger-reach-block-subscription-form input[type=email]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.af .hostinger-reach-block-submit{background:var(--brand)!important;color:var(--on-brand)!important;border-radius:var(--btn-radius)!important;min-height:var(--target-min);font-family:var(--font-body);font-weight:700}
.af .hostinger-reach-block-submit:hover{background:var(--brand-strong)!important}
.af .hostinger-reach-block-submit:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ── KERET a téma CSS-e nélkül (RED-1, core 2.0.4) ──────────────────────────────────────────────
   Az af-lapokon a Blocksy main.min.css + page-title.min.css NEM töltődik (render-blokkolás ~1,2 s, PSI 09-29).
   Amit a téma eddig adott és nekünk kell: box-sizing, a tartalomhasáb szélessége és függőleges térköze,
   a rejtett ugrólink, a szerző–dátum–kategória sor. Mérve: számított stílusok téma-CSS-sel és nélküle. */
body.af-v2{margin:0;overflow-x:clip;background:var(--surface)}
body.af-v2 *,body.af-v2 *::before,body.af-v2 *::after{box-sizing:border-box}
body.af-v2 .ct-drawer-canvas{display:none}
body.af-v2 .screen-reader-text:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.af-v2 img{max-width:100%;height:auto}
body.af-v2 .ct-container-full{padding:var(--space-7) var(--space-4) var(--space-8)}
body.af-v2 article.af>.is-width-constrained,body.af-v2 article.af>.entry-content{max-width:var(--content-width);margin-inline:auto}
body.af-v2 article.af>.entry-content{margin-top:var(--space-6)}
body.af-v2 .entry-meta{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-size:var(--fs-label);font-weight:600;line-height:1.3;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-muted)}
body.af-v2 .entry-meta li{display:inline-flex;align-items:center;gap:var(--space-2);margin:0}
body.af-v2 .entry-meta li+li::before{content:"/";color:var(--line-strong)}
body.af-v2 .entry-meta a{display:inline-flex;align-items:center;gap:var(--space-2);color:inherit;text-decoration:none}
body.af-v2 .entry-meta a:hover{text-decoration:underline}
body.af-v2 .entry-meta .ct-media-container-static{display:inline-flex}
body.af-v2 .entry-meta .ct-media-container-static img{display:block;width:24px;height:24px;border-radius:50%}
@media (max-width:720px){body.af-v2 .ct-container-full{padding:var(--space-6) var(--space-4) var(--space-7)}body.af-v2 article.af>.entry-content{margin-top:var(--space-5)}}
body.af-v2 article.af>.is-width-constrained{display:block}
/* a közös lábléc alsó sora: a link középre igazít, a két szöveg nem (az alapban is így — SSN-nek jelezve) */
body.af-v2 .af-footer__base{align-items:center}
/* A téma bevezetője (.page-description) = af-lead (2.1.4). A téma CSS-e adta a térközt, és telefonon elrejtette (ct-hidden-sm);
   a tervben a lead telefonon is látszik, ezért itt nem rejtjük. Mérve 2026-09-30: a cím alatt 0 px volt a rés. */
body.af-v2 .entry-header .page-description{margin-top:var(--space-4);font-size:var(--fs-lead);line-height:1.55}
@media (max-width:720px){body.af-v2 .entry-header .page-description{font-size:calc(var(--fs-lead) - 2px)}}
/* (8/22) 2026-09-30 — az átíró új dobozai */
/* Kód-doboz: a link a zöld háttéren a márkaszínnel olvashatatlan lenne → on-brand, aláhúzva; a hosszú kód (Erste: 10 karakter) telefonon ne lógjon ki */
body.af-v2 .kl-code a{color:var(--on-brand);text-decoration:underline;text-underline-offset:3px}
body.af-v2 .kl-code .kl-code__val{max-width:100%;overflow-wrap:anywhere}
@media (max-width:720px){body.af-v2 .kl-code .kl-code__val{font-size:clamp(26px,8.5vw,44px);letter-spacing:2px}}
/* Ajánlóprogram-tábla (95): telefonon kártyanézet — a lap saját inline <style>-ja helyett, tokenekből */
@media (max-width:640px){
body.af-v2 .kl-ajanlo{overflow:visible;border:0;background:transparent}
body.af-v2 .kl-ajanlo table,body.af-v2 .kl-ajanlo tbody,body.af-v2 .kl-ajanlo tr,body.af-v2 .kl-ajanlo td{display:block;width:100%;min-width:0}
body.af-v2 .kl-ajanlo thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body.af-v2 .kl-ajanlo tr{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-raised);padding:var(--space-3) var(--space-4);margin:0 0 var(--space-3)}
body.af-v2 .kl-ajanlo td{border:0;padding:var(--space-1) 0;text-align:left}
body.af-v2 .kl-ajanlo td[data-label="Bank"]{font-weight:700;font-size:1.1em;padding-bottom:var(--space-2)}
body.af-v2 .kl-ajanlo td:not([data-label="Bank"])::before{content:attr(data-label);display:block;font-size:var(--fs-label);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand)}
}
/* (9/22) 2026-09-30 — a 3. hullám képernyőképeiből */
/* Több kategória („Business, Segítség”): a flex-rés a vessző elé is szóközt tett → a kategória-elem sorközi blokk, a „/” elválasztó margóval */
body.af-v2 .entry-meta li.meta-categories{display:inline-block}
body.af-v2 .entry-meta li.meta-categories::before{margin-right:var(--space-2)}
/* A tábla első oszlopa (dátumok, csomagnevek) ne zsugorodjon két sorba törő „2026. 10. / 01.”-re */
body.af-v2 .af-table :is(td,th):first-child{min-width:10em}

/* Startseite (2.0.4): volle Breite, die Theme-Überschrift „Startseite“ entfällt (die H1 steht im Hero) */
body.af-v2.kl-startseite .ct-container-full{padding:0}
body.af-v2.kl-startseite article.af>.entry-content{max-width:none;margin-top:0}
body.af-v2.kl-startseite article.af>.is-width-constrained{display:none}
body.af-v2.kl-startseite .kl-hero .af-actions{margin-top:var(--space-5)}
body.af-v2.kl-startseite .kl-hero__proof{margin-top:var(--space-5)}
/* Problemliste im Hero: ganze Zeile ist der Link */
body.af-v2 a.kl-stack__row{color:inherit;text-decoration:none}
body.af-v2 a.kl-stack__row:hover strong{text-decoration:underline}
body.af-v2 a.kl-stack__row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Startseite auf dem Telefon (2.0.7, 2026-10-01): die Regeln standen nur unter .kl-phone (Entwurfs-Leinwand) —
   live blieb der Hero zweispaltig, die H1 und die Karte „Häufige Probleme“ wurden rechts abgeschnitten (Screenshot 375 px). */
@media (max-width:760px){
body.af-v2.kl-startseite .kl-wrap{padding:0 var(--space-4)}
body.af-v2.kl-startseite .kl-hero__in{grid-template-columns:minmax(0,1fr);padding:var(--space-6) var(--space-4);gap:var(--space-5)}
body.af-v2.kl-startseite .af-display-xl{font-size:var(--fs-display-xl-phone);overflow-wrap:break-word}
body.af-v2.kl-startseite .af-lead{font-size:18px}
body.af-v2.kl-startseite .af-bento{grid-template-columns:minmax(0,1fr)}
body.af-v2.kl-startseite .af-bento__tile--wide{grid-column:auto}
body.af-v2.kl-startseite .kl-trust{grid-template-columns:minmax(0,1fr)}
body.af-v2.kl-startseite .kl-sec{padding:var(--space-7) 0}
body.af-v2.kl-startseite .kl-sec__head{flex-direction:column;align-items:start}
}
/* Hero-Outline-Button: die Basisregel `.af .af-btn--outline` war stärker als die der `.kl-hero` → dunkle Schrift auf Blau (gemessen 2026-10-01). */
body.af-v2 .kl-hero a.af-btn--outline{color:var(--on-brand);border-color:color-mix(in srgb, var(--on-brand) 55%, transparent)}
body.af-v2 .kl-hero a.af-btn--outline:hover{border-color:var(--on-brand)}
