/* ── css/01-alap.css ── */
/* 01-alap.css – betűk, téma-változók (sötét + világos), alapstílusok. AIMDEV-653, részletek: docs/kinezet.md
   A mai (WordPress-es) oldal Elementor Kit 11 színei: #101010 háttér, #269BDB kiemelő kék, #0071BC, #00507C, #333333,
   #FFFFFFCC szöveg, #269BDB29 kék kártya, #FFFFFF1A üveg-kártya. A téma a gép beállítását követi (prefers-color-scheme). */

/* Betűk helyben (OFL, assets/fonts/OFL-*.txt) – latin + latin-ext (hu, de, ro, sk, sr latin). */
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/assets/fonts/rubik-latin-ext.09472f217a.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/assets/fonts/rubik-latin.691cd1d9b4.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: "Audiowide"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/audiowide-latin-ext.bc0d2b852e.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Audiowide"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/audiowide-latin.e21fd195dd.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; }

/* ── Sötét téma = a mai oldal (alap). A .tema-sotet elem (hero, lapfej, CTA) világos témában is sötét marad. ── */
:root, .tema-sotet {
  /* 2. változat „Útvonal” (D 10-13): Éjkék alap a #101010 helyett; D késő este: „kicsit sötétítsd” → ~28 %-kal sötétebb,
     halványabb minta, és a kártyák / üvegblokkok szinte fedők (≥ 92 %), hogy a minta vonalai ne látsszanak át rajtuk. */
  --hatter: #0A1E2C;                            /* Éjkék (sötétített) */
  --hatter-2: #071824;
  --hero-alja: #09304D;                         /* a hero kék átfedésének alja → lágyan az Éjkékbe */
  --uveg: rgba(9, 24, 35, .94);                 /* hosszú szöveg, GYIK, űrlap „üvege” – szinte fedő */
  --uveg-szegely: rgba(38, 155, 219, .30);
  --ut-szin: #269BDB;                           /* a GPS-útvonal */
  --halo-szin: rgba(38, 155, 219, .07);         /* az úthálózat-minta (halványabb) */
  --felulet: rgba(34, 53, 65, .95);             /* kártya: a mai #FFFFFF1A színe az Éjkéken, de fedőn */
  --felulet-hover: rgba(44, 63, 76, .96);
  --felulet-2: rgba(255, 255, 255, .05);        /* #FFFFFF0D */
  --felulet-kek: rgba(14, 50, 72, .95);         /* kék kártya (a mai #269BDB29 színe), fedőn */
  --kartya-szegely: transparent;
  --szegely: rgba(255, 255, 255, .14);
  --szoveg: rgba(255, 255, 255, .80);           /* #FFFFFFCC */
  --szoveg-eros: #FFFFFF;
  --szoveg-halvany: rgba(255, 255, 255, .64);
  --kek: #269BDB;                               /* fő kiemelő (ikon, keret, fókusz) */
  --kek-szoveg: #3AA8E4;                        /* kék SZÖVEG: 5,5:1 az Éjkéken, 4,7:1 a minta vonalán is */
  --kek-2: #0071BC;
  --kek-3: #00507C;
  --gomb-hatter: transparent;                   /* a mai gomb: kék keret, átlátszó, hover #269BDB29 */
  --gomb-szoveg: #FFFFFF;
  --gomb-szegely: #269BDB;
  --gomb-hover: rgba(38, 155, 219, .16);
  --gomb-hover-szoveg: #FFFFFF;
  --gomb2-hatter: linear-gradient(90deg, #D5D5D5 0%, #FFFFFF 100%); /* a mai világos gomb */
  --gomb2-szoveg: #333333;
  --gomb2-szegely: #D5D5D5;
  --fejlec-hatter: #0B1E2C;
  --fejlec-arnyek: 0 0 20px rgba(38, 155, 219, .65);
  --lenyilo-hatter: #133246;
  --lenyilo-hover: #0071BC;
  --lenyilo-hover-szoveg: #FFFFFF;
  --arnyek: 0 10px 30px rgba(0, 0, 0, .2);
  --mezo-hatter: rgba(255, 255, 255, .06);
  --mezo-szegely: rgba(255, 255, 255, .34);
  --javaslat-szoveg: #FFC98B;
  --javaslat-hatter: rgba(255, 188, 125, .14);
  --javaslat-szegely: #FFBC7D;
  --hiba: #FF8A80;
  --siker: #7FD9A0;
  color-scheme: dark;
}

/* ── Világos téma: ugyanaz a kék kiemelés, kék szövegnél a sötétebb #0071BC (5,1:1 fehéren, WCAG AA). ── */
@media (prefers-color-scheme: light) {
  /* docs/tervezesi-terv.md: Papír #F4F7FA alap, Tinta #0E1A24 szöveg, Áramkék #0071BC akcentus, fehér kártya #D6E2EC kerettel */
  :root {
    --hatter: #F4F7FA;
    --hatter-2: #FFFFFF;
    --uveg: rgba(255, 255, 255, .96);
    --uveg-szegely: rgba(0, 113, 188, .22);
    --ut-szin: #0071BC;
    --halo-szin: rgba(74, 110, 140, .08);
    --felulet-hover: #FFFFFF;
    --felulet: #FFFFFF;
    --felulet-2: #EEF3F7;
    --felulet-kek: #E1EAF5;                     /* a korábbi #0071BC 8 % a Papíron – fedőn (a minta ne látsszon át) */
    --kartya-szegely: #D6E2EC;
    --szegely: #D6E2EC;
    --szoveg: #24323E;
    --szoveg-eros: #0E1A24;
    --szoveg-halvany: #4A5A68;
    --kek-szoveg: #0071BC;
    --gomb-hatter: #0071BC;
    --gomb-szoveg: #FFFFFF;
    --gomb-szegely: #0071BC;
    --gomb-hover: #00507C;
    --gomb-hover-szoveg: #FFFFFF;
    --gomb2-hatter: #FFFFFF;
    --gomb2-szoveg: #00507C;
    --gomb2-szegely: #0071BC;
    --fejlec-hatter: #FFFFFF;
    --fejlec-arnyek: 0 0 20px rgba(38, 155, 219, .35);
    --lenyilo-hatter: #FFFFFF;
    --lenyilo-hover: #E6F3FB;
    --lenyilo-hover-szoveg: #00507C;
    --arnyek: 0 10px 30px rgba(16, 16, 16, .08);
    --mezo-hatter: #FFFFFF;
    --mezo-szegely: #7D8C99;
    --javaslat-szoveg: #7A3E00;
    --javaslat-hatter: #FFF0DC;
    --javaslat-szegely: #D9822B;
    --hiba: #B3261E;
    --siker: #1E7B45;
    color-scheme: light;
  }
}

/* ── Alap ── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-width: 0; overflow-x: clip;
  background: var(--hatter); color: var(--szoveg);
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px; line-height: 1.6; font-weight: 400;
}
.tema-sotet { color: var(--szoveg); }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
/* Címsor-tördelés (D 10-12: „a szövegtördelés olvashatatlanná teszi”): elválasztás SOHA, kiegyensúlyozott sorok; szóközépi
   törés csak mobilon és csak akkor, ha a leghosszabb szó különben kilógna (break-word = csak túlcsorduláskor tör). */
h1, h2, h3, h4 {
  color: var(--szoveg-eros); line-height: 1.2; margin: 0 0 .5em; font-weight: 600;
  hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; text-wrap: balance;
}
@media (max-width: 599px) { h1, h2, h3, h4 { overflow-wrap: break-word; } }
p { margin: 0 0 1em; }
a { color: var(--kek-szoveg); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .3s; }
a:hover { color: var(--szoveg-eros); }
:focus-visible { outline: 2px solid var(--kek); outline-offset: 2px; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
ul, ol { padding-left: 1.2em; }
main:focus { outline: none; }

/* A mai oldal szakaszjele: 90×4 px-es, lekerekített kék színátmenetes vonal a szakaszcím fölött (Elementor „Rectangle”
   SVG: #269BDB → #0071BC). Szemöldök-szöveg (felcím) NINCS – tervezési terv, 3. elv; az eredetin sincs. */
.szakasz__jel { display: block; width: 90px; height: 4px; border-radius: 2px; margin: 0 0 20px;
  background: linear-gradient(90deg, #269BDB 0%, #0071BC 100%); }
.szakasz__fej--kozep .szakasz__jel, .cta__doboz .szakasz__jel { margin-inline: auto; }
/* Audiowide: az eredeti kijelző-betűje – H1, szakaszcím (NAGYBETŰS, mint a mai „TERMÉKEINK”), kártyacím (mint a mai
   iparági kártyák). Betűköz +0,02em; a tördelést a h1–h4 szabály adja (nincs elválasztás). */
.szakasz__cim, .lapfej__cim, .hero__cim, .termek__nev, .kartya__cim, .lablec__cim {
  font-family: "Audiowide", "Rubik", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .02em;
}
.szakasz__cim { font-size: clamp(24px, 3.2vw, 36px); }
/* Minden szöveg törhető (hosszú URL, e-mail-cím, összetett szó) – a vízszintes kilógás ellen. */
p, li, dd, dt, td, th, label, summary, address, blockquote, figcaption { overflow-wrap: break-word; }
.szakasz__bevezeto { font-size: 18px; line-height: 1.6; color: var(--szoveg); max-width: 68ch; }
.folyo { max-width: 72ch; }
.folyo > :last-child { margin-bottom: 0; }

.ikon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }
.ikon--kicsi { width: 1em; height: 1em; }
.rejtett, .mezo--csapda {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ugras { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--kek-2); color: #FFFFFF; padding: 12px 16px; border-radius: 8px; }
.ugras:focus { top: 8px; color: #FFFFFF; }

/* Javaslat = Klaus által írt, még jóváhagyásra váró szöveg. D 10-12: alapból NEM torzíthatja a dizájnt. D 10-13 (OEM-kör):
   a sima URL-en SEMMI jelölés (a korábbi vékony szaggatott aláhúzás is kikerült – D képén minden szöveg aláhúzva látszott);
   a jelölés csak a jóváhagyó nézetben: ?javaslatok=1 (a <head> szkriptje teszi fel a html.javaslat-nezet osztályt). */
.javaslat { text-decoration: none; }
html.javaslat-nezet .javaslat {
  color: var(--javaslat-szoveg); background: var(--javaslat-hatter); text-decoration: none;
  outline: 1px dashed var(--javaslat-szegely); outline-offset: 1px; border-radius: 3px; padding: 0 .15em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; cursor: help;
}

/* ── css/02-elrendezes.css ── */
/* 02-elrendezes.css – keret, szakaszok, rács, gombok, sticky fejléc (hamburger mobilon), nyelvváltó, lábléc.
   Mobil első: 360 px-től; oldalsó margó mobilon 16 px; fix szélesség nincs (csak max-width). AIMDEV-653 */

.keret { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 16px; }
.keret--keskeny { max-width: 840px; }
@media (min-width: 768px) { .keret { padding-inline: 20px; } }

.szakasz { padding-block: 48px; }
@media (min-width: 768px) { .szakasz { padding-block: 80px; } }
.szakasz__fej { margin-bottom: 32px; }

.racs { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; margin: 0; }
@media (min-width: 600px) {
  .racs--2, .racs--3, .racs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .racs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .racs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Grid/flex gyerek alapból min-width:auto (= a leghosszabb szó) – ez nyújtotta túl a tartalmat mobilon (10-12 éjjel). */
.racs > *, .szoveg__racs > *, .termek__racs > *, .kosar__racs > *, .lablec__racs > *, .urlap__mezok > *,
.gombsor > *, .termekkartya__lab > *, .szuro > *, .hero__tartalom > *, .szamok__lista > *, .videolista > *,
.oktatas-app__lejatszo > *, .lablec__also > *, .termek__kosarba > * { min-width: 0; }

/* ── Gombok (a mai oldal: 36 px-es lekerekítés, kék keret; másodlagos: világos színátmenet) ── */
.gombsor { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.gomb {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 28px; border-radius: 36px; border: 2px solid var(--gomb-szegely);
  background: var(--gomb-hatter); color: var(--gomb-szoveg); font-weight: 500; font-size: 16px; line-height: 1.2;
  text-decoration: none; text-align: center; transition: background-color .3s, color .3s, border-color .3s, transform .3s;
}
.gomb:hover, .gomb:focus-visible { background: var(--gomb-hover); color: var(--gomb-hover-szoveg); }
.gomb--masodlagos { background: var(--gomb2-hatter); color: var(--gomb2-szoveg); border-color: var(--gomb2-szegely); }
.gomb--masodlagos:hover, .gomb--masodlagos:focus-visible { background: var(--gomb2-hatter); color: var(--gomb2-szoveg); transform: translateY(-2px); }
.gomb--kicsi { min-height: 44px; padding: 8px 18px; font-size: 15px; }
.gomb[disabled] { opacity: .6; cursor: progress; }
.gomb { max-width: 100%; white-space: normal; overflow-wrap: break-word; }
/* Mobilon a gombsor gombjai teljes szélességűek, egymás alatt (nem lóg ki a második gomb). */
@media (max-width: 599px) { .gombsor > .gomb { flex: 1 1 100%; } }

/* ── Fejléc (sticky, kék fénylő árnyék, mint ma) ── */
.fejlec { position: sticky; top: 0; z-index: 50; background: var(--fejlec-hatter); box-shadow: var(--fejlec-arnyek); color: var(--szoveg-eros); }
.fejlec__belso { display: flex; align-items: center; gap: 12px; min-height: 64px; position: relative; }
.fejlec__logo { display: block; width: 150px; flex: none; color: var(--szoveg-eros); }
.logo { display: block; width: 100%; height: auto; }
.fejlec__eszkozok { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.fejlec__kosar { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--szoveg-eros); }
.fejlec__kosar .ikon { width: 24px; height: 24px; }
.fejlec__kosar-db {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--kek-2); color: #FFFFFF; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600;
}

.fomenu__lista { list-style: none; margin: 0; padding: 0; }
.fomenu__link {
  display: flex; align-items: center; min-height: 48px; padding: 12px 16px; color: var(--szoveg-eros); text-decoration: none;
  font-weight: 600; text-transform: uppercase; font-size: 15px; letter-spacing: .02em;
}
.fomenu__link:hover, .fomenu__link[aria-current="page"] { color: var(--kek-szoveg); }

/* Mobil/tablet: hamburger, a menü a fejléc alatt lenyílik (a mai lenyíló: #333 háttér, #0071BC hover). */
.menugomb {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--kek);
}
.menugomb__vonal { display: block; width: 24px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s, opacity .3s; }
.menugomb[aria-expanded="true"] .menugomb__vonal:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menugomb[aria-expanded="true"] .menugomb__vonal:nth-child(2) { opacity: 0; }
.menugomb[aria-expanded="true"] .menugomb__vonal:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1319px) {
  .js .fomenu {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    background: var(--lenyilo-hatter); box-shadow: var(--arnyek); padding: 8px 0 16px;
    max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain;
  }
  .js .fomenu[data-nyitva] { display: block; }
  .fomenu__link:hover { background: var(--lenyilo-hover); color: var(--lenyilo-hover-szoveg); }
  .fomenu__gomb { margin: 12px 16px 0; }
  html:not(.js) .fomenu { order: 10; width: 100%; }
  html:not(.js) .fejlec__belso { flex-wrap: wrap; }
  html:not(.js) .menugomb { display: none; }
}
/* Asztali menü 1320 px-től (7 menüpont + fejléc-gomb + nyelv + kosár ennyi helyet kér – mérve: reszponziv_proba.sh);
   a fejléc kerete szélesebb a tartalomnál, hogy egy sorban maradjon. */
@media (min-width: 1320px) {
  /* a mai fejléc: teljes szélességű, a logó a bal szélen (20 px), a menü középen, 76 px magas */
  .fejlec .keret { max-width: none; padding-inline: 20px; }
  .fejlec__belso { min-height: 76px; gap: 16px; }
  .fejlec__logo { width: 180px; }
  .fomenu { display: flex; align-items: center; gap: 12px; margin-inline: auto; }
  .fomenu__lista { display: flex; }
  .fomenu__link { padding: 26px 8px; min-height: 0; font-size: 14px; white-space: nowrap; }
  /* aktív menüpont: fehér felirat + 4 px-es kék sáv alul, mint ma */
  .fomenu__link[aria-current="page"] { color: var(--szoveg-eros); box-shadow: inset 0 -4px 0 var(--kek); }
  .fomenu__link:hover { color: var(--kek-szoveg); }
  /* a fejléc-gomb nem zsugorodhat betűoszloppá (10-12: „Flottaaudit” 1 betű szélesre nyomódott) */
  .fomenu__gomb { flex: none; white-space: nowrap; }
  .fejlec__eszkozok { margin-left: 0; }
  .menugomb { display: none; }
}
@media (min-width: 1440px) {
  .fomenu__link { padding-inline: 10px; font-size: 15px; }
}
@media (min-width: 1680px) {
  .fomenu__link { padding-inline: 20px; }
}

/* Nyelvváltó: nyelvkóddal (HU EN DE RO SK SR), natív <details>, JS nélkül is működik. */
.nyelvvalto { position: relative; }
.nyelvvalto__gomb {
  display: inline-flex; align-items: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 0 8px;
  list-style: none; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--szoveg-eros); border-radius: 8px;
}
.nyelvvalto__gomb::-webkit-details-marker { display: none; }
.nyelvvalto[open] .nyelvvalto__gomb .ikon { transform: rotate(180deg); }
.nyelvvalto__lista {
  position: absolute; right: 0; top: 100%; z-index: 60; margin: 4px 0 0; padding: 6px; list-style: none;
  background: var(--lenyilo-hatter); border-radius: 10px; box-shadow: var(--arnyek); min-width: 88px;
}
.nyelvvalto__lista a {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 6px;
  color: var(--szoveg-eros); text-decoration: none; font-weight: 600;
}
.nyelvvalto__lista a:hover { background: var(--lenyilo-hover); color: var(--lenyilo-hover-szoveg); }
.nyelvvalto__lista a[aria-current="true"] { color: var(--kek-szoveg); }

/* ── Lapfej (oldalak hero nélkül) ── */
.lapfej { padding-block: 56px 40px; background: linear-gradient(180deg, rgba(38, 155, 219, .46) 0%, var(--hero-alja) 84%, var(--hatter) 100%); }
.lapfej__cim { font-size: clamp(22px, 6vw, 46px); margin: 0; }

/* ── Lábléc (a mai: logó, link-oszlopok, elérhetőségek; #0071BC elválasztó) ── */
.lablec { border-top: 2px solid var(--kek-2); background: var(--hatter-2); padding-top: 48px; font-size: 15px; }
.lablec__racs { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .lablec__racs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lablec__racs { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } }
.lablec__logo { display: block; width: 180px; color: var(--szoveg-eros); margin-bottom: 16px; }
.lablec__cim { font-family: "Audiowide", "Rubik", sans-serif; font-weight: 400; font-size: 16px; text-transform: uppercase; margin-bottom: 12px; }
.lablec ul { list-style: none; margin: 0; padding: 0; }
.lablec__oszlop a { display: inline-flex; align-items: center; min-height: 44px; color: var(--szoveg); text-decoration: none; }
.lablec__oszlop a:hover { color: var(--kek-szoveg); }
.lablec__oszlop address a { min-height: 32px; }
.lablec__kozossegi { display: flex; gap: 8px; }
.lablec__kozossegi a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--felulet); color: var(--szoveg-eros);
}
.lablec__kozossegi a:hover { background: var(--kek-2); color: #FFFFFF; }
.lablec__also {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center;
  margin-top: 40px; padding-block: 20px; border-top: 1px solid var(--szegely); color: var(--szoveg-halvany);
}
.lablec__also p { margin: 0; }
.lablec__jogi { display: flex; flex-wrap: wrap; gap: 0 20px; }
.lablec__jogi a { display: inline-flex; align-items: center; min-height: 44px; color: var(--szoveg-halvany); }

/* Gyökér nyelvválasztó lap (index.html tartalék) */
.nyelvlap { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 32px; text-align: center; color: var(--szoveg-eros); }
.nyelvlap .logo { width: 220px; }
.nyelvlap__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; padding: 0; margin: 0; }

/* ── css/03-blokkok.css ── */
/* 03-blokkok.css – a tartalmi blokkok (templates/blokk/*.php) kinézete. AIMDEV-653
   Hero: a mai videós háttér + kék→sötét átfedés (linear-gradient(180deg, #269BDB75, #101010)), mindig sötét, így
   világos témában is olvasható. Kártyák: #FFFFFF1A, 16 px lekerekítés, árnyék; hover csak kék keret
   (docs/tervezesi-terv.md – a mai oldal −18 px-es ugrása helyett). */

/* ── Hero ── */
/* A rács egyetlen oszlopa minmax(0, 1fr): enélkül az implicit „auto” oszlop a leghosszabb szóig (min-content) nyúlik,
   és mobilon a cím/gombok jobbra kilógnak (10-12 éjjeli hiba). */
/* A mai oldal arányai (mérve, 1920×1080): a hero tartalom-magasságú (Elementor: min. 500 px, padding 80/40 – nem
   teljes képernyős), a tartalom felülről indul; aloldalon kisebb. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  min-height: 420px; padding-block: 48px 56px;
  background: var(--hatter); color: var(--szoveg); text-align: center;
}
@media (min-width: 768px) { .hero { min-height: 500px; padding-block: 80px 72px; } }
.hero.hero--fel { min-height: 360px; padding-block: 48px 48px; }
@media (min-width: 768px) { .hero.hero--fel { min-height: 420px; padding-block: 80px 64px; } }
.hero__hatter { position: absolute; inset: 0; z-index: -1; }
.hero__poszter, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
/* a videó csak lejátszáskor jelenik meg (a fw.js teszi be a forrást és a .megy osztályt) – addig a poszter látszik */
.hero__video { opacity: 0; transition: opacity .8s ease; }
.hero__video.megy { opacity: 1; }
/* a <picture> ne legyen külön doboz: a benne lévő <img> a szülőhöz méreteződik (hero, kártya, termék) */
picture { display: contents; }
/* a mai átfedés (#269BDB75 felül), alul a 2. változat szerint #0B3A5C → lágyan az Éjkék oldal-alapba (D 10-13) */
.hero__hatter::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38, 155, 219, .46) 0%, var(--hero-alja) 84%, var(--hatter) 100%);
}
.hero__tartalom { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.hero__tartalom > * { min-width: 0; max-width: 100%; }
.hero .szakasz__jel { margin-inline: auto; }
/* H1: a mai „KIKNEK AJÁNLJUK” – Audiowide 50 px (mobilon 30), nagybetűs */
.hero__cim { font-size: clamp(30px, 4.2vw, 50px); max-width: 22ch; margin-bottom: 12px; letter-spacing: .02em; }
/* alcím-cím: a mai „Milyen iparágban szeretne hatékonyságot növelni?” – Audiowide 30 px, vegyes írás */
.hero__cim2 {
  font-family: "Audiowide", "Rubik", sans-serif; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.25; letter-spacing: .02em;
  color: #FFFFFF; max-width: 34ch; margin: 0 0 28px; text-wrap: balance;
}
/* a mai bevezető: Rubik 16 px, 1,5 sormagasság, ~780 px széles hasáb (asztalon 4 sor) */
.hero__alcim { font-size: 16px; line-height: 1.5; max-width: 780px; color: rgba(255, 255, 255, .8); margin-bottom: 0; }
.hero .gombsor { justify-content: center; }
.hero__szoveg { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; }
.hero__szoveg > * { min-width: 0; max-width: 100%; }
/* aloldal: balra zárt, mint a mai „RÓLUNK” / „FLOTTAKEZELÉS” (szakaszjel és cím a bal szélen, szöveghasáb ~640 px) */
.hero--bal { text-align: left; }
.hero--bal .hero__tartalom { align-items: stretch; }
.hero--bal .hero__szoveg { align-items: flex-start; max-width: 680px; }
.hero--bal .szakasz__jel { margin-inline: 0; }
.hero--bal .hero__cim { max-width: none; }
.hero--bal .gombsor { justify-content: flex-start; }
/* kétoszlopos aloldal-hero: balra a szöveg, jobbra a kép (mint a mai flottakezelés-oldal eszközképe) */
.hero__media { margin-top: 32px; }
.hero__oldalkep { width: 100%; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
@media (min-width: 900px) {
  .hero--ketoszlop .hero__tartalom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
  .hero--ketoszlop .hero__media { margin-top: 0; }
  /* fél hasábban a nagybetűs Audiowide-cím leghosszabb szava (pl. FLOTTAMENEDZSMENT?) is férjen ki */
  .hero--ketoszlop .hero__cim { font-size: clamp(26px, 2.5vw, 44px); }
}
/* a mai kék dupla chevron (eredeti SVG) a bevezető és a csempék között */
.hero__lefele { display: block; margin: 36px auto 32px; line-height: 0; }
.hero__chevron { width: 30px; height: 35px; }
/* iparági csempék – a mai kártyák: 360 px széles, ~107 px magas, #FFFFFF1A, 16 px lekerekítés, ikon 60 px + Audiowide 18 px;
   3 oszlop, az utolsó páratlan középen (flex-wrap, középre). Hover: csak kék keret (tervezési terv 2. elv, nincs „ugrás”). */
.csempek { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; list-style: none; margin: 0; padding: 0; width: 100%; max-width: 1120px; }
.csempe {
  position: relative; flex: 1 1 100%; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 14px;
  padding: 24px 20px; border-radius: 16px; background: var(--felulet); box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  transition: box-shadow .25s ease, background-color .25s ease;
}
@media (min-width: 600px) { .csempe { flex-basis: calc((100% - 20px) / 2); flex-grow: 0; } }
@media (min-width: 1024px) {
  .csempe { flex-basis: calc((100% - 40px) / 3); grid-template-columns: 60px minmax(0, 1fr); justify-items: start; align-items: center;
    gap: 26px; padding: 22px 26px; min-height: 107px; text-align: left; }
}
.csempe__ikon { display: block; line-height: 0; }
.csempe__svg { width: 60px; height: 60px; }
.csempe__cim { font-family: "Audiowide", "Rubik", sans-serif; font-size: 18px; line-height: 1.25; letter-spacing: .02em;
  text-transform: uppercase; color: #FFFFFF; text-decoration: none; text-wrap: balance; }
.csempe--link .csempe__cim::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.csempe--link:hover { background: var(--felulet-hover); box-shadow: 0 10px 30px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(38, 155, 219, .7); }
.csempe--link:focus-within { outline: 2px solid var(--kek); outline-offset: 3px; }
.hiba404 .felcim { font-size: 18px; }

/* ── Kijelentés (templates/resz/kijelentes.php) – az áramköri kék háttér folytatása, középre zárt, a belső doboz max. 1000 px;
   kétszintű tipográfia (Audiowide nagybetűs / vegyes írás), szín- és dobozkiemelés nélkül (D 10-12). ── */
.kijelentes { position: relative; isolation: isolate; overflow: hidden; background: var(--hatter); text-align: center; padding-block: 56px; }
@media (min-width: 768px) { .kijelentes { padding-block: 96px; } }
.kijelentes__hatter { position: absolute; inset: 0; z-index: -1; }
/* …és ugyanígy a második helyre került hero (D 10-13: a kezdőlapon a nyitó kijelentés után; H2, videó nélkül) */
.kijelentes__kep, .hero--folytatas .hero__poszter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; opacity: .55; transform: scaleY(-1); }
/* a hero alja (#0B3A5C) folytatódik, középen kék fény, alul az Éjkék oldal-alap */
.kijelentes__hatter::after, .hero--folytatas .hero__hatter::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(38, 155, 219, .30) 0%, rgba(38, 155, 219, 0) 70%),
    linear-gradient(180deg, var(--hero-alja) 0%, rgba(11, 58, 92, .55) 28%, rgba(14, 42, 61, .6) 72%, var(--hatter) 100%);
}
.kijelentes__belso { max-width: 1000px; display: flex; flex-direction: column; align-items: center; }
.kijelentes__belso > * { min-width: 0; max-width: 100%; }
.kijelentes .szakasz__jel { margin: 0 auto 24px; }
.kijelentes__cim { margin: 0 0 24px; font-weight: 400; }
/* 1. sor: asztalon egy sorban („EZ NEM GPS-NYOMKÖVETÉS.”), mobilon a kötőjelnél törhet */
.kijelentes__sor1 { display: block; font-family: "Audiowide", "Rubik", sans-serif; font-size: clamp(28px, 3.5vw, 48px); line-height: 1.12;
  text-transform: uppercase; letter-spacing: .02em; color: #FFFFFF; text-wrap: balance; }
.kijelentes__sor2 { display: block; margin-top: .55em; font-family: "Audiowide", "Rubik", sans-serif; font-size: clamp(18px, 2vw, 28px);
  line-height: 1.3; letter-spacing: .02em; color: rgba(255, 255, 255, .8); text-wrap: balance; }
.kijelentes__szoveg { max-width: 60ch; margin-inline: auto; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
@media (min-width: 768px) { .kijelentes__szoveg { font-size: 17px; } }
.kijelentes .gombsor { justify-content: center; margin-top: 28px; }
/* NYITÓ kijelentés (D 10-13): az első képernyő a hero helyén – teljes erejű poszter + videó, a hero kék→sötét átfedése és kék fény */
.kijelentes--nyito { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: clamp(480px, calc(100svh - 76px), 860px); }
.kijelentes--nyito .kijelentes__hatter::after { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(38, 155, 219, .28) 0%, rgba(38, 155, 219, 0) 70%),
  linear-gradient(180deg, rgba(38, 155, 219, .46) 0%, var(--hero-alja) 100%); }

/* A „fajdalmak” kártyák a nyitó alsó részében (D 10-18, 8.1): a gombok alatt, áttetsző sötétkék kártyák az áramköri háttéren, egy képernyőn a
   főcímmel (1920×1040-ben is); mobilon egymás alatt. A nyitó ilyenkor nem „teljes képernyő magas üres résszel”: a tartalom adja a magasságot. */
.kijelentes--fajdalmakkal { min-height: 0; padding-block: 40px 36px; }
@media (min-width: 768px) { .kijelentes--fajdalmakkal { padding-block: 56px 48px; } }
.kijelentes--fajdalmakkal .kijelentes__belso { max-width: 1160px; }
.kijelentes--fajdalmakkal .gombsor { margin-top: 22px; }
.fajdalmak { width: 100%; margin-top: 36px; scroll-margin-top: 96px; }
.fajdalmak__felcim { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--kek-szoveg); }
.fajdalmak__cim { margin: 0 0 18px; font-family: "Audiowide", "Rubik", sans-serif; font-size: clamp(18px, 2vw, 24px); font-weight: 400; line-height: 1.25; color: #FFFFFF; text-wrap: balance; }
.fajdalmak__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .fajdalmak__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.fajdalom-kartya { text-align: left; padding: 18px 22px 20px; border-radius: 16px; color: #FFFFFF;
  background: rgba(10, 30, 60, .62); border: 1px solid rgba(120, 190, 235, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fajdalom-kartya__ikon .ikon { width: 30px; height: 30px; color: var(--kek-szoveg); }
.fajdalom-kartya__cim { margin: 8px 0 6px; font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; line-height: 1.25; color: #FFFFFF; }
.fajdalom-kartya__szoveg { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .84); }

/* ── Szöveg (+ kép) ── */
.szoveg__racs { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) {
  .szoveg--keppel .szoveg__racs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
  .szoveg--kep-bal .szoveg__media { order: -1; }
}
.szoveg__torzs .szakasz__fej { margin-bottom: 16px; }
.szoveg__kep, .hasab__kep { width: 100%; border-radius: 16px; }
.pipalista { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 8px; }
.pipalista li { display: flex; gap: 10px; align-items: flex-start; }
.pipalista .ikon { color: var(--kek); margin-top: .3em; }

/* ── Kártyák ── */
.kartya {
  position: relative; background: var(--felulet); border: 1px solid var(--kartya-szegely); border-radius: 16px;
  padding: 24px; box-shadow: var(--arnyek); transition: transform .3s ease, box-shadow .3s ease, background-color .3s;
  min-width: 0;
}
.kartya--kek { background: var(--felulet-kek); }
/* hover: csak kék keret (tervezési terv 2. elv – a −18 px-es „ugrás” helyett) */
.kartya--link:hover { border-color: rgba(38, 155, 219, .7); }
/* a mai szakaszfej: középre zárt cím (szakaszjel fölötte) és bevezető a rács- és listablokkoknál; a szöveg-blokk balra zár */
:is(.kartyak, .lepesek, .gyik, .idezetek, .logok, .termekek, .szamok, .kapcsolodo, .oktatas, .video) .szakasz__fej { text-align: center; }
:is(.kartyak, .lepesek, .gyik, .idezetek, .logok, .termekek, .szamok, .kapcsolodo, .oktatas, .video) :is(.szakasz__jel, .szakasz__bevezeto) { margin-inline: auto; }
.kartya--link .kartya__cim a { color: inherit; text-decoration: none; }
.kartya--link .kartya__cim a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kartya--link:focus-within { outline: 2px solid var(--kek); outline-offset: 2px; }
.kartya__ikon { display: inline-flex; color: var(--kek); margin-bottom: 16px; }
.kartya__ikon .ikon { width: 56px; height: 56px; }
.kartya__kep { width: 100%; border-radius: 12px; margin-bottom: 16px; aspect-ratio: 16 / 10; object-fit: cover; }
.kartya__cim { font-family: "Audiowide", "Rubik", sans-serif; font-weight: 400; font-size: 18px; text-transform: uppercase; margin-bottom: 10px; }
/* mondat-hosszú cím: vegyes írás, mint a mai „Kapcsolódjon a SMART világhoz!” (cim_hossz_osztaly(), sablon_seged.php) */
.szakasz__cim--hosszu { text-transform: none; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; }
.kartya__cim--hosszu { text-transform: none; font-size: 17px; line-height: 1.3; }
.kartya__szoveg { margin-bottom: 0; }
.kartya__tovabb { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--kek-szoveg); font-weight: 500; }
.hasab .gombsor { margin-top: 16px; }
.hasab__cim { font-size: 22px; }

/* ── Számok ── */
.szamok__lista { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
@media (min-width: 900px) { .szamok__lista { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.szamok__elem { background: var(--felulet-kek); border-radius: 16px; padding: 24px 16px; text-align: center; }
.szamok__szam { display: block; font-family: "Audiowide", "Rubik", sans-serif; font-size: clamp(30px, 5vw, 48px); line-height: 1.1; color: var(--kek-szoveg); }
.szamok__egyseg { font-size: .55em; margin-left: 2px; }
.szamok__cimke { display: block; margin-top: 8px; color: var(--szoveg); }

/* ── Karusszel (Swiper helyett saját: scroll-snap + fw.js) ── */
.karusszel { position: relative; }
.karusszel__sav {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain; padding: 4px 2px 16px;
}
.karusszel__sav::-webkit-scrollbar { display: none; }
.karusszel__elem { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.karusszel--logok .karusszel__elem { flex-basis: calc((100% - 20px) / 2); display: flex; align-items: center; justify-content: center; }
@media (min-width: 768px) { .karusszel--logok .karusszel__elem { flex-basis: calc((100% - 60px) / 4); } }
@media (min-width: 900px) { .karusszel--idezetek .karusszel__elem { flex-basis: calc((100% - 20px) / 2); } }
.karusszel__vezerlo { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.karusszel__gomb {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--szegely); background: transparent; color: var(--szoveg-halvany);
}
.karusszel__gomb:hover { color: var(--szoveg-eros); border-color: var(--kek); }

/* ── Logók ── */
.logok__racs { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 40px; list-style: none; padding: 0; margin: 0; }
.logok__kep { max-height: 64px; width: auto; max-width: 180px; object-fit: contain; }

/* ── Idézetek ── */
.idezet { margin: 0; height: 100%; display: flex; flex-direction: column; gap: 16px; border-radius: 20px; }
.idezet__jel { color: var(--kek); width: 36px; height: 36px; }
.idezet__szoveg { margin: 0; font-size: 17px; color: var(--szoveg-eros); }
.idezet__ki { display: flex; align-items: center; gap: 12px; margin-top: auto; color: var(--szoveg-halvany); font-size: 15px; }
.idezet__ki strong { color: var(--szoveg-eros); }
.idezet__kep { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

/* ── GYIK ── */
.gyik__lista { border-top: 1px solid var(--szegely); }
.gyik__elem { border-bottom: 1px solid var(--szegely); }
.gyik__kerdes {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 0;
  cursor: pointer; list-style: none; font-weight: 500; font-size: 17px; color: var(--szoveg-eros);
}
.gyik__kerdes::-webkit-details-marker { display: none; }
.gyik__jel { color: var(--kek); transition: transform .3s; }
.gyik__elem[open] .gyik__jel { transform: rotate(45deg); }
.gyik__valasz { padding: 0 0 20px; }
/* hover/fókusz: csak szín (tervezési terv) */
.gyik__kerdes:hover, .gyik__elem[open] > .gyik__kerdes { color: var(--kek-szoveg); }
/* két független oszlop asztalon (a szolgáltatások listái): két külön lista egymás mellett, nem sor-páros rács */
.gyik__oszlopok { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1023px) { .gyik--ketoszlop .gyik__lista + .gyik__lista { border-top: 0; } }
@media (min-width: 1024px) {
  .gyik--ketoszlop .gyik__oszlopok { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
}
/* horgonyra érkezve a fejléc ne takarja (a fw.js nyitja ki az elemet) */
.gyik__elem { scroll-margin-top: 100px; }

/* ── CTA ── */
.cta__doboz {
  border-radius: 20px; padding: 40px 20px; text-align: center; border: 1px solid rgba(38, 155, 219, .45);
  background: linear-gradient(135deg, #00507C 0%, #0B1E2C 100%); box-shadow: var(--arnyek);
}
@media (min-width: 768px) { .cta__doboz { padding: 56px 48px; } }
.cta__doboz .szakasz__fej { margin-bottom: 0; }
.cta__doboz .szakasz__bevezeto { margin-inline: auto; }
.cta__doboz .gombsor { justify-content: center; }

/* ── Táblázat (mobilon a dobozában görgethető, az oldal nem) ── */
.tablazat__doboz { overflow-x: auto; border-radius: 12px; border: 1px solid var(--szegely); }
.tablazat table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tablazat th, .tablazat td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--szegely); vertical-align: top; }
.tablazat thead th { background: var(--felulet-kek); color: var(--szoveg-eros); font-weight: 600; white-space: nowrap; }
.tablazat tbody th { color: var(--szoveg-eros); font-weight: 500; }
.tablazat tbody tr:last-child > * { border-bottom: 0; }

/* ── Lépések ── */
.lepesek__lista { counter-reset: none; }
.lepes__szam {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--kek-2); color: #FFFFFF; font-family: "Audiowide", "Rubik", sans-serif; font-size: 20px; margin-bottom: 16px;
}

/* ── Kapcsolódó termékek ── */
.kapcsolodo__logo { max-height: 56px; width: auto; max-width: 100%; margin-bottom: 16px; object-fit: contain; }

/* ── Videó blokk + közös 16:9 lejátszó (az oktatás-app is ezt használja) ── */
.lejatszo { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000000; border-radius: 16px; overflow: hidden; box-shadow: var(--arnyek); }
.lejatszo video, .lejatszo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Mátrix-táblázat (D 10-18, SEO/GEO 2.): a jelek középre, az első oszlop görgetéskor a helyén marad, jelmagyarázat és alámondat */
.tablazat tbody th[scope="row"] { position: sticky; left: 0; background: var(--hatter); z-index: 1; min-width: 160px; }
.tablazat__jel { text-align: center; white-space: nowrap; }
.tablazat__jel-ikon { font-size: 1.1em; }
.tablazat__jel-szoveg { font-size: .85em; color: var(--szoveg-halvany); }
.tablazat__jelmagyarazat { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; font-size: 14px; color: var(--szoveg-halvany); }
.tablazat__jelmagyarazat-cim { font-weight: 600; color: var(--szoveg-eros); }
.tablazat__megjegyzes { margin: 12px 0 0; font-size: 14px; max-width: 80ch; }

/* ── Definíció-doboz (templates/blokk/definicio.php) – 40–60 szavas, önállóan idézhető összefoglaló ── */
.definicio { padding-block: 24px 8px; }
.definicio-doboz { border-left: 4px solid var(--kek); border-radius: 0 12px 12px 0; padding: 14px 20px; background: var(--felulet-kek); }
.definicio-doboz__felirat { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kek-szoveg); }
.definicio-doboz__szoveg { margin: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; color: var(--szoveg-eros); }


/* ── „Utolsó frissítés” (bin/lib/frissitve.php) ── */
.frissitve-sor { padding-block: 24px 8px; }
.frissitve { margin: 0; font-size: 14px; color: var(--szoveg-halvany); }

/* ── css/04-urlap.css ── */
/* 04-urlap.css – űrlapok, ⓘ buborék, webshop (terméklista, termékoldal, kosár), oktatás (nyitólap + oktatas-app).
   Érintésre kényelmes: minden célterület legalább 44 px; a beviteli mezők 16 px-esek (iOS nem nagyít). AIMDEV-653 */

/* ── Űrlap ── */
.urlap__form { display: grid; gap: 20px; }
.urlap__mezok { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .urlap__mezok { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mezo--szeles { grid-column: 1 / -1; }
.mezo label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 15px; color: var(--szoveg-eros); }
.mezo input:not([type="checkbox"]), .mezo textarea, .mezo select {
  display: block; width: 100%; min-height: 48px; padding: 12px 14px; font-size: 16px;
  background: var(--mezo-hatter); color: var(--szoveg-eros); border: 1px solid var(--mezo-szegely); border-radius: 10px;
}
.mezo textarea { resize: vertical; min-height: 120px; }
.mezo input:focus, .mezo textarea:focus { outline: 2px solid var(--kek); outline-offset: 1px; border-color: var(--kek); }
.mezo input:user-invalid, .mezo textarea:user-invalid { border-color: var(--hiba); }
.kotelezo { color: var(--kek-szoveg); }
.mezo--pipa { display: flex; align-items: flex-start; gap: 12px; }
.mezo--pipa input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--kek-2); }
.mezo--pipa label { margin: 0; font-weight: 400; color: var(--szoveg); }
.urlap__form .gomb { justify-self: start; }
.urlap__uzenet { margin: 0; padding: 12px 16px; border-radius: 10px; border: 1px solid currentColor; }
.urlap__uzenet[data-allapot="siker"] { color: var(--siker); }
.urlap__uzenet[data-allapot="hiba"] { color: var(--hiba); }
.urlap__uzenet[data-allapot="folyamatban"] { color: var(--szoveg-halvany); border-style: dashed; }

/* ── ⓘ buborék (D: magyarázat csak buborékban) ── */
.info { position: relative; display: inline-flex; vertical-align: middle; }
.info__gomb {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0;
  border: 0; background: transparent; color: var(--kek-szoveg); font-size: 20px; line-height: 1;
}
.info__buborek {
  display: none; position: absolute; bottom: calc(100% + 4px); right: -8px; z-index: 30; width: max-content; max-width: min(300px, 80vw);
  padding: 12px 14px; border-radius: 10px; background: var(--lenyilo-hatter); color: var(--szoveg-eros);
  box-shadow: var(--arnyek); font-size: 14px; line-height: 1.5; text-align: left; font-weight: 400;
}
.info:hover .info__buborek, .info:focus-within .info__buborek, .info__gomb[aria-expanded="true"] + .info__buborek { display: block; }

/* ── Webshop: szűrő, termékkártya ── */
.szuro { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.szuro__gomb {
  min-height: 44px; padding: 8px 18px; border-radius: 36px; border: 1px solid var(--szegely); background: transparent;
  color: var(--szoveg-eros); font-weight: 500;
}
.szuro__gomb[aria-pressed="true"] { background: var(--felulet-kek); border-color: var(--kek); color: var(--kek-szoveg); }
.termekkartya { display: flex; flex-direction: column; }
.termekkartya[hidden] { display: none; }
.termekkartya__kep { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--felulet-2); margin-bottom: 16px; }
.termekkartya__kep img { width: 100%; height: 100%; object-fit: contain; }
.termekkartya .kartya__cim a { color: inherit; text-decoration: none; }
.termekkartya .kartya__cim a:hover { color: var(--kek-szoveg); }
.termekkartya__lab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.termekkartya__ar, .termek__ar { margin: 0; display: flex; flex-direction: column; }
.ar { font-weight: 600; color: var(--szoveg-eros); }
.ar--ajanlat { color: var(--kek-szoveg); font-weight: 500; }
.ar--havi { font-weight: 400; color: var(--szoveg); font-size: .9em; }
[data-kosarba][data-allapot="kesz"] { background: var(--kek-2); border-color: var(--kek-2); color: #FFFFFF; }

/* ── Termékoldal ── */
.termek__bovebben { margin: 8px 0 0; }
.termek__bovebben a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; }
.termek__vissza a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; }
.termek__racs { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: 8px; }
@media (min-width: 900px) { .termek__racs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } .termek__racs--kep-nelkul { grid-template-columns: minmax(0, 1fr); } }
.termek__media { padding: 16px; }
.termek__kep { width: 100%; border-radius: 12px; }
.termek__nev { font-size: clamp(22px, 5.6vw, 38px); }
.termek__ar { font-size: 22px; margin: 16px 0 24px; }
.termek__kosarba { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.termek__db { width: 96px; min-height: 48px; padding: 10px 12px; font-size: 16px; border-radius: 10px; border: 1px solid var(--mezo-szegely); background: var(--mezo-hatter); color: var(--szoveg-eros); }
.termek__leiras { margin-top: 48px; margin-inline: 0; }

/* ── Kosár ── */
.kosar__racs { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .kosar__racs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.kosar__lista { list-style: none; padding: 0; margin: 0 0 16px; }
.kosar__tetel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--szegely); }
.kosar__tetel a { color: var(--szoveg-eros); text-decoration: none; font-weight: 500; }
.kosar__tetel .ar { grid-column: 1 / 2; font-size: 14px; }
.kosar__db { width: 72px; min-height: 44px; padding: 8px; font-size: 16px; border-radius: 8px; border: 1px solid var(--mezo-szegely); background: var(--mezo-hatter); color: var(--szoveg-eros); }
.kosar__torles { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--szoveg-halvany); display: inline-flex; align-items: center; justify-content: center; }
.kosar__torles:hover { color: var(--hiba); background: var(--felulet-2); }
.kosar__osszeg { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; color: var(--szoveg-eros); margin: 0; }
.kosar__ures { margin: 0; }

/* ── Oktatás: nyitólap (témák lakattal, belépés) ── */
.oktatas__lakat .ikon { width: 40px; height: 40px; }
.oktatas__videok { list-style: none; padding: 0; margin: 16px 0 0; font-size: 15px; }
.oktatas__videok li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--szegely); color: var(--szoveg); }
.oktatas__videok .ikon { color: var(--szoveg-halvany); }
.oktatas__hossz { margin-left: auto; color: var(--szoveg-halvany); font-variant-numeric: tabular-nums; }
.oktatas__belepes { max-width: 600px; margin: 40px auto 0; }
/* belépve (D 10-13: „olyan, mint a nyilvános oldal”): a sor link a videóra, „Új”, haladás (sáv + %), kész: ✓, témánként összesítő */
.oktatas__tema-fej { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.oktatas__tema-fej .kartya__cim { margin: 0; }
.oktatas__videok--belepve li { padding: 0; }
.oktatas__videok--belepve a { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 0; color: inherit; text-decoration: none; }
.oktatas__videok--belepve a:hover .oktatas__sor-cim, .oktatas__videok--belepve a:focus-visible .oktatas__sor-cim { color: var(--kek-szoveg); }
.oktatas__videok--belepve a:focus-visible { outline: 2px solid var(--kek); outline-offset: 2px; }
.oktatas__lejatszas { flex: none; color: var(--kek) !important; }
.oktatas__sor-cim { min-width: 0; flex: 1 1 auto; }
.oktatas__uj { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.6;
  background: var(--felulet-kek); color: var(--kek-szoveg); vertical-align: 1px; }
.oktatas__szazalek { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--szoveg-halvany); font-variant-numeric: tabular-nums; }
.oktatas__szazalek--kesz { color: var(--siker); font-weight: 700; font-size: 15px; }
.halad--kicsi { display: inline-block; width: 40px; border-radius: 2px; overflow: hidden; }
.oktatas__videok--belepve .oktatas__hossz { margin-left: 4px; flex: none; }

/* ── Oktatás-app (backend által renderelt védett oldalak – docs/kinezet.md „Oktatás-app”) ── */
.videolista { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; margin: 0; }
@media (min-width: 600px) { .videolista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .videolista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.videokartya { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.videokartya > a { display: flex; flex-direction: column; min-height: 44px; color: inherit; text-decoration: none; height: 100%; }
.videokartya__kep { position: relative; aspect-ratio: 16 / 9; background: #000000; }
.videokartya__kep img { width: 100%; height: 100%; object-fit: cover; }
.videokartya__hossz { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .75); color: #FFFFFF; font-size: 13px; font-variant-numeric: tabular-nums; }
.videokartya__torzs { padding: 16px 20px 20px; }
.videokartya__cim { font-size: 17px; font-weight: 500; margin: 0 0 6px; color: var(--szoveg-eros); }
.halad { height: 4px; background: var(--szegely); }
.halad > span { display: block; height: 100%; width: var(--halad, 0%); background: var(--kek); }
.allapotcimke { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 36px; background: var(--felulet-kek); color: var(--kek-szoveg); font-size: 13px; font-weight: 500; }
.oktatas-app__fej { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.oktatas-app__lejatszo { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .oktatas-app__lejatszo { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.oktatas-app__lejatszo .videolista { grid-template-columns: minmax(0, 1fr); }

/* ── css/05-animacio.css ── */
/* 05-animacio.css – mozgás (AIMDEV-653; docs/tervezesi-terv.md 2. elv): EGY betöltési pillanat – az ELSŐ képernyő (.nyito:
   a lap első hero-ja, vagy a kezdőlapon a nyitó kijelentés – D 10-13) tartalma egyszer, lépcsőzve úszik be (a mai oldal
   fadeInUp-ja, ~0,6 s, 24 px). A többi szekció NEM úszik be (a szétszórt fade-up a terv szerint zaj); a sablonok data-anim
   jelei a .nyito-n kívül (pl. a második helyre került hero csempéin) hatástalanok.
   Csak .js alatt rejt el, így JS nélkül minden látszik; prefers-reduced-motion: semmi mozgás, a videó helyett a poszter. */

.js .nyito [data-anim] {
  opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--k, 0) * 80ms);
}
.js .nyito [data-anim].lathato { opacity: 1; transform: none; }
/* Biztonsági háló: ha a fw.js nem fut le (hiba, letiltás, lassú hálózat), 2,5 s után minden látszik. A fw.js induláskor
   felteszi a html.fw-kesz osztályt, onnantól az IntersectionObserver dönt. (10-12 éjjel: üres asztali képernyőkép.) */
html.js:not(.fw-kesz) .nyito [data-anim]:not(.lathato) { animation: fw-lathato 0s linear 2.5s forwards; }
@keyframes fw-lathato { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .nyito [data-anim] { opacity: 1; transform: none; transition: none; }
  .hero__video { display: none; }
  .kartya, .gomb, .menugomb__vonal, .gyik__jel { transition: none; }
  .karusszel__sav { scroll-behavior: auto; }
}

/* Nyomtatás: animáció és videó nélkül, minden látszik */
@media print {
  .js .nyito [data-anim] { opacity: 1; transform: none; }
  .fejlec, .hero__video, .karusszel__vezerlo, .menugomb { display: none; }
}

/* ── css/06-flottaaudit.css ── */
/* 06-flottaaudit.css – a flottaaudit-kérdőív és -sáv (AIMDEV-653, docs/flottaaudit.md). Csak a meglévő színváltozók (01-alap.css) –
   így a sötét/világos téma és a közös dizájn öröklődik; a javaslat-szövegek a közös .javaslat jelölést kapják (külön stílus nincs).
   Mobil első, 360 px-től; célterület ≥ 44 px; fix szélesség nincs. */

/* ── Kérdőív ── */
.fa__form { display: grid; gap: 24px; }
.fa__haladas { height: 6px; border-radius: 6px; background: var(--felulet-2); overflow: hidden; }
.fa__haladas-sav { display: block; height: 100%; width: 0; background: var(--kek); border-radius: 6px; transition: width .3s ease; }
html:not(.js) .fa__haladas { display: none; }
.fa__lepesszam { margin: -12px 0 0; font-size: 14px; color: var(--szoveg-halvany); }
.fa__lepesszam:empty { display: none; }
.fa__lepes { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 28px; }
.fa__lepes[hidden] { display: none; }
.fa__lepescim { padding: 0; margin-bottom: 4px; font-size: clamp(20px, 5vw, 26px); font-weight: 600; color: var(--szoveg-eros); }
.fa__kerdes { border: 0; margin: 0; padding: 0; min-width: 0; position: relative; }
.fa__cim { padding: 0; margin-bottom: 10px; font-weight: 500; font-size: 16px; color: var(--szoveg-eros); display: inline; }
.fa__kerdes > .info, .fa__kerdes .mezo > .info { margin-left: 2px; }
.fa__opciok { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fa__opcio { position: relative; display: inline-flex; }
.fa__opcio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fa__opcio span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 22px; cursor: pointer;
  border: 1px solid var(--mezo-szegely); background: var(--mezo-hatter); color: var(--szoveg-eros); font-size: 15px; line-height: 1.3;
}
.fa__opcio span:hover { border-color: var(--kek); }
.fa__opcio input:checked + span { background: var(--felulet-kek); border-color: var(--kek); color: var(--kek-szoveg); font-weight: 500; }
.fa__opcio input:focus-visible + span { outline: 2px solid var(--kek); outline-offset: 2px; }
.fa__kerdes--hiba .fa__opcio span, .fa__kerdes--hiba select { border-color: var(--hiba); }
.fa__kerdes--hiba .fa__cim { color: var(--hiba); }
.fa__evjarat { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.fa__evjarat label { font-weight: 400; font-size: 14px; color: var(--szoveg); }
.fa__al { margin-top: 12px; }
.fa__al[hidden] { display: none; }
.fa__bizalmi { margin: 0; font-size: 14px; color: var(--szoveg-halvany); }
.fa__gombok { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.fa__gombok [data-fa-tovabb], .fa__gombok [data-fa-kuld] { margin-left: auto; }
.fa__gombok [hidden] { display: none; }
@media (max-width: 479px) { .fa__gombok .gomb { flex: 1 1 100%; justify-content: center; } .fa__gombok [data-fa-tovabb], .fa__gombok [data-fa-kuld] { order: -1; } }
.fa__form[hidden] { display: none; }

/* ── Előzetes összegzés ── */
.fa__eredmeny { display: grid; gap: 12px; }
.fa__eredmeny[hidden] { display: none; }
.fa__eredmeny:focus { outline: none; }
.fa__eredmeny h3 { margin: 0; font-size: clamp(22px, 5.4vw, 30px); color: var(--szoveg-eros); }
.fa__eredmeny h4 { margin: 12px 0 0; font-size: 17px; color: var(--szoveg-eros); }
.fa__eredmeny p { margin: 0; }
.fa__zaszlok, .fa__modulok { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.fa__zaszlok strong { color: var(--szoveg-eros); }
.fa__zaszlok a, .fa__modulok a, .fa__eredmeny p a { color: var(--kek-szoveg); }
.fa__zaro { padding-top: 12px; border-top: 1px solid var(--szegely); color: var(--szoveg-halvany); }

/* ── Sáv (sarok-kártya; mobilon alsó sáv) – visszafogott, bezárható, nem takarja ki a tartalmat ── */
.fa-sav {
  position: fixed; z-index: 40; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 14px 52px 14px 16px; border-radius: 14px; background: var(--lenyilo-hatter); color: var(--szoveg-eros);
  border: 1px solid var(--kartya-szegely); box-shadow: var(--arnyek); animation: fa-sav-be .35s ease both;
}
.fa-sav[hidden] { display: none; }
.fa-sav__szoveg { margin: 0; flex: 1 1 200px; font-weight: 500; line-height: 1.4; }
.fa-sav__zar {
  position: absolute; top: 4px; right: 4px; min-width: 44px; min-height: 44px; border: 0; background: transparent;
  color: var(--szoveg-halvany); font-size: 24px; line-height: 1; cursor: pointer;
}
.fa-sav__zar:hover, .fa-sav__zar:focus-visible { color: var(--szoveg-eros); }
@media (min-width: 768px) { .fa-sav { left: auto; right: 24px; bottom: 24px; max-width: 380px; } }
@keyframes fa-sav-be { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fa-sav { animation: none; } .fa__haladas-sav { transition: none; } }
@media print { .fa-sav { display: none; } }

/* ── css/07-utvonal.css ── */
/* 07-utvonal.css – 2. változat „Útvonal” (docs/tervezesi-terv.md; D 10-13: „mégse tetszik, nagyon sötét”):
   Éjkék alap + halvány úthálózat-minta a szakaszok mögött, hosszú szöveg / GYIK / űrlap szinte fedő „üvegen”, és a kezdőlapon
   EGY merész elem: a görgetéskor kirajzolódó GPS-útvonal megállókkal és célállomással (assets/js/05-utvonal.js).
   Rögzített háttér nincs. A hero és a kijelentés saját (áramköri) háttere takarja a mintát. */

/* ── Úthálózat-minta: maszk + színváltozó (témánként más szín), nagy lépték, hézagmentesen ismétlődő 1600×2400-as csempe ── */
main { position: relative; isolation: isolate; }
main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--halo-szin);
  -webkit-mask: url("/assets/kepek/uthalozat.037da02594.svg") center top / 1600px auto repeat;
  mask: url("/assets/kepek/uthalozat.037da02594.svg") center top / 1600px auto repeat;
}

/* ── Üveg: hosszú szöveg, GYIK, űrlap, termékleírás, táblázat (#0B1E2C 75 %, vékony kék keret) – a kártyák maradnak ── */
.szoveg__torzs, .gyik__lista, .urlap__form, .termek__leiras, .tablazat__doboz {
  background: var(--uveg); border: 1px solid var(--uveg-szegely); border-radius: 16px;
}
.szoveg__torzs, .urlap__form, .termek__leiras { padding: 24px 20px; }
@media (min-width: 768px) { .szoveg__torzs, .urlap__form, .termek__leiras { padding: 32px 36px; } }
.gyik__lista { padding: 0 20px; }
.gyik__elem:last-child { border-bottom: 0; }
@media (max-width: 1023px) { .gyik--ketoszlop .gyik__lista + .gyik__lista { border-top: 1px solid var(--uveg-szegely); margin-top: 16px; } }

/* ── GPS-útvonal (csak a kezdőlap .utvonal-zona-jában) ──
   JS nélkül: statikus függőleges szaggatott vonal a bal margóban, üres megálló minden szakaszcímnél, teli célállomás a
   záró CTA-nál. A fw.js (html.ut-kesz) ezt a pontosan mért, rajzolódó SVG-útvonalra cseréli. */
.utvonal-zona { position: relative; isolation: isolate; --ut-x: max(10px, calc((100% - 1180px) / 2 - 28px)); }
.utvonal-zona > .szakasz { position: relative; }
.utvonal-zona > .szakasz::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--ut-x); width: 2px; margin-left: -1px; pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--ut-szin) 0 8px, transparent 8px 18px);
}
.utvonal-zona > .szakasz:has(.szakasz__jel)::after {
  content: ""; position: absolute; top: 43px; left: var(--ut-x); width: 16px; height: 16px; margin-left: -8px; pointer-events: none;
  border: 2.5px solid var(--ut-szin); border-radius: 50%; background: var(--hatter);
}
.utvonal-zona > .szoveg:has(.szakasz__jel)::after { top: 68px; }
@media (min-width: 768px) { .utvonal-zona > .szoveg:has(.szakasz__jel)::after { top: 76px; } }
.utvonal-zona > .cta:last-child::before { bottom: auto; height: 92px; }
.utvonal-zona > .cta:last-child::after { top: 84px; background: var(--ut-szin); }
html.ut-kesz .utvonal-zona > .szakasz::before, html.ut-kesz .utvonal-zona > .szakasz::after { content: none; }

.utvonal { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; pointer-events: none; }
.utvonal__vonal { fill: none; stroke: var(--ut-szin); stroke-width: 2.25; stroke-dasharray: 8 10; stroke-linecap: round; }
.utvonal__megallo { fill: var(--hatter); stroke: var(--ut-szin); stroke-width: 2.5; }
.utvonal__cel { fill: var(--ut-szin); }
.utvonal__cel-gyuru { fill: none; stroke: var(--ut-szin); stroke-width: 1.5; opacity: .45; }

@media print {
  main::before, .utvonal, .utvonal-zona > .szakasz::before, .utvonal-zona > .szakasz::after { display: none; }
}

/* ── css/08-oem.css ── */
/* 08-oem.css – AIMDEV-653 OEM-ellenőrző, adatforrás-blokk, márka-aloldal (docs/tervezesi-terv.md 3. „OEM-ellenőrző”).
   Az emlékezetes elem: a „10 perces út” – a gyártó helyzetadatai pontokként egy útvonalon (sűrűn = folytonos vonal, ritkán = néhány
   pont, „út végén” = csak a cél). Ez az Útvonal-dizájn nyelvét viszi tovább; minden más visszafogott. Csak a 01-alap.css változói
   (sötét + világos téma öröklődik); mobil első (360 px-től), célterület ≥ 44 px, fix szélesség nincs; reduced-motion: semmi mozgás. */

/* ── Belépő sor: „28 márka · 33 hajtáslánc · szerelés nélkül” ── */
.oem__stat {
  font-family: "Audiowide", sans-serif; color: var(--szoveg-eros); line-height: 1.25; text-wrap: balance;
  font-size: clamp(20px, 3.2vw, 32px); margin: 0 auto 28px; text-align: center; max-width: 900px;
}

/* ── Ellenőrző ── */
.oem__ellenorzo { background: var(--uveg); border: 1px solid var(--uveg-szegely); border-radius: 16px; padding: clamp(18px, 3vw, 32px); }
html:not(.js) .oem__ellenorzo { display: none; } /* JS nélkül a statikus márkalista marad */
.oem__valaszto { display: grid; gap: 14px; }
@media (min-width: 768px) { .oem__valaszto { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } }
.oem__valaszto .mezo { margin: 0; }
.oem__valaszto .mezo[hidden] { display: none; }
.oem__valaszto select { min-height: 48px; }
.oem__valaszto select:focus-visible { outline: 2px solid var(--kek); outline-offset: 1px; }
.oem__valasz { margin-top: 24px; padding: 18px 0 0 18px; border-left: 4px solid var(--kek); }
.oem__valasz[hidden] { display: none; }
.oem__valasz[data-allapot="igen"] { border-left-color: var(--siker); }
.oem__valasz[data-allapot="nem"] { border-left-color: var(--szoveg-halvany); }
.oem__valasz-fo { font-size: clamp(18px, 2.2vw, 22px); font-weight: 500; color: var(--szoveg-eros); margin: 0 0 16px; max-width: 70ch; }
.oem__valasz h4 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--szoveg-halvany); }
.oem__gyak, .oem__adatkorok { margin-bottom: 16px; }
.oem__gyak-szoveg { margin: 0 0 8px; color: var(--szoveg-eros); }
.oem__cimkek { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.oem__cimkek li { padding: 6px 12px; border-radius: 16px; background: var(--felulet-kek); color: var(--szoveg-eros); font-size: 14px; }
.oem__megj { color: var(--szoveg-halvany); font-size: 15px; }
.oem__cta { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 8px 0 0; }
.oem__reszletek { color: var(--kek-szoveg); min-height: 44px; display: inline-flex; align-items: center; }

/* ── A 10 perces út (inline SVG, díszítő) ── */
.oem-ping { margin: 0; max-width: 420px; }
.oem-ping figcaption { font-size: 13px; color: var(--szoveg-halvany); margin-top: 4px; }
.oem-ut { display: block; width: 100%; height: auto; overflow: visible; }
.oem-ut__vonal { fill: none; stroke: var(--szegely); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.oem-ut__suru { fill: none; stroke: var(--ut-szin); stroke-width: 3; stroke-linecap: round; }
.oem-ut__pont { fill: var(--ut-szin); }
.oem-ut__cel { fill: none; stroke: var(--ut-szin); stroke-width: 2.5; }
@media (prefers-reduced-motion: no-preference) {
  .oem__valasz .oem-ut__suru { stroke-dasharray: 340; stroke-dashoffset: 340; animation: oem-rajzol .9s ease-out forwards; }
  .oem__valasz .oem-ut__pont { opacity: 0; animation: oem-pont .5s ease-out .25s forwards; }
}
@keyframes oem-rajzol { to { stroke-dashoffset: 0; } }
@keyframes oem-pont { to { opacity: 1; } }

/* ── Kereshető márkalista (statikus táblázat; a kereső csak JS-sel) ── */
.oem__lista { margin-top: 40px; }
.oem__lista-cim { font-size: clamp(18px, 2.2vw, 22px); margin: 0 0 12px; color: var(--szoveg-eros); }
.oem__kereso { max-width: 360px; margin-bottom: 12px; }
.oem__kereso[hidden], .oem__nincs[hidden] { display: none; }
.oem__tabla:focus-visible { outline: 2px solid var(--kek); outline-offset: 2px; }
.oem__tabla tbody[hidden] { display: none; }
.oem__tabla tbody + tbody { border-top: 1px solid var(--uveg-szegely); }
.oem__tabla tbody th a { color: var(--kek-szoveg); }
.oem__tabla td { min-width: 0; }
.oem__audit { color: var(--szoveg-halvany); font-style: italic; }
.oem__tabla tbody:target th { color: var(--kek-szoveg); }
.oem__tabla tbody:target { outline: 2px solid var(--kek); outline-offset: -2px; }
.oem__megjegyzes { font-size: 14px; color: var(--szoveg-halvany); margin-top: 10px; max-width: 80ch; }

/* ── Egy platform – háromféle adatforrás: a BNI-prezentáció 4. diája (D 10-13) ── */
.adatforrasok__racs { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
@media (min-width: 960px) { .adatforrasok__racs { grid-template-columns: .9fr 1.2fr 1fr; align-items: center; gap: 24px; } }
@media (max-width: 959px) { .adatforras--kiemelt { order: -1; } } /* mobilon a saját eszköz elöl */
.adatforras { min-width: 0; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.adatforras__torzs { padding: 24px; display: grid; gap: 14px; }
.adatforras__kep { aspect-ratio: 16 / 10; background: #FFFFFF; }
.adatforras__kep img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adatforras__fej { display: flex; gap: 14px; align-items: center; }
.adatforras__ikon { width: 48px; height: 48px; flex: none; }
.adatforras__cim { margin: 0; font-size: 20px; line-height: 1.25; }
.adatforras__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.adatforras__lista li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.45; }
.adatforras__lista li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; }
/* bal: külső gyártó eszköze – halvány, kisebb, szürke */
.adatforras--halvany { background: rgba(255, 255, 255, .03); border: 1px solid rgba(124, 139, 150, .35); color: #7C8B96; }
.adatforras--halvany .adatforras__cim { color: #A9B7C2; font-size: 18px; }
.adatforras--halvany .adatforras__kep { opacity: .75; }
@media (min-width: 960px) { .adatforras--halvany .adatforras__torzs { padding: 20px; } }
/* közép: a saját eszközünk – a legnagyobb, sötét, kék keret + kék fény, alul teli kék garancia-sáv */
.adatforras--kiemelt { background: #0B1A24; border: 2px solid #269BDB; box-shadow: 0 0 36px rgba(38, 155, 219, .45); color: #CFE3F0; }
.adatforras--kiemelt .adatforras__cim { color: #FFFFFF; font-size: clamp(20px, 2vw, 26px); font-weight: 700; }
.adatforras--kiemelt .adatforras__lista li { font-size: 16px; }
.adatforras--kiemelt .adatforras__lista li::before { background: #269BDB; opacity: 1; }
@media (min-width: 960px) { .adatforras--kiemelt .adatforras__torzs { padding: 28px 32px; } }
.adatforras__sav { margin: 0; padding: 16px 24px; background: #269BDB; color: #FFFFFF; text-align: center; display: grid; gap: 2px; }
.adatforras__sav strong { font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; }
.adatforras__sav span { font-size: 14px; opacity: .92; }
/* jobb: gyári (OEM) adat – éjkék, kék keret, elválasztó alatt halvány lábjegy */
.adatforras--oem { background: #0B2438; border: 1px solid #269BDB; color: #CFE3F0; }
.adatforras--oem .adatforras__cim { color: #FFFFFF; font-weight: 700; }
.adatforras--oem .adatforras__lista li::before { background: #8FC3E4; opacity: 1; }
.adatforras__stat { margin: 4px 0 0; font-family: "Audiowide", sans-serif; font-size: clamp(18px, 1.7vw, 22px); color: #FFFFFF; line-height: 1.3; }
.adatforras__link { margin: 0; }
.adatforras__labjegy { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(143, 195, 228, .35); font-size: 14px; color: #7C8B96; font-style: italic; }
.adatforrasok__zaro { margin: 32px auto 0; max-width: 760px; text-align: center; color: var(--kek-szoveg); font-size: clamp(17px, 1.8vw, 20px); font-weight: 500; text-wrap: balance; }
@media (prefers-color-scheme: light) {
  .adatforras--halvany { background: #F4F6F8; border-color: #D6E2EC; color: #7C8B96; }
  .adatforras--halvany .adatforras__cim { color: #3A3F44; }
  .adatforras--kiemelt { box-shadow: 0 0 28px rgba(38, 155, 219, .35); }
}

/* ── Márka-aloldal ── */
.oem-marka__bevezeto { font-size: clamp(18px, 2.2vw, 21px); color: var(--szoveg-eros); max-width: 65ch; }
.oem-marka__valtozatok { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 16px; }
.oem-valtozat { padding: 20px 24px; }
.oem-valtozat__cim { font-size: 18px; margin: 0 0 10px; }
.oem-valtozat__adatok { display: grid; gap: 10px; margin: 0 0 14px; }
@media (min-width: 768px) { .oem-valtozat__adatok { grid-template-columns: 1fr 1.4fr 1.6fr; } }
.oem-valtozat__adatok dt { font-size: 13px; color: var(--szoveg-halvany); font-weight: 600; }
.oem-valtozat__adatok dd { margin: 2px 0 0; color: var(--szoveg-eros); }
.oem-marka__megj { display: flex; gap: 8px; align-items: flex-start; color: var(--szoveg-halvany); }
.oem-marka__korlatok { margin-top: 24px; padding: 20px 24px; }
.oem-marka__al { font-size: 20px; margin: 0 0 12px; }

/* ── Webshop: az FC-előfizetés kiemelt sora („Gyári adattal hardver nélkül is indulhat.”) ── */
.termek-kiemeles { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; font-weight: 500; color: var(--szoveg-eros); }
.termek-kiemeles .ikon { flex: none; margin-top: .2em; color: var(--kek); }
.termek-kiemeles a { color: var(--kek-szoveg); }

/* ── Webshop-kártyák (D 10-13: „csak kicsit designold meg”): egységes fehér termékfotó-doboz, „melyiket válasszam” sor, 3 jellemző pipával ── */
.termekkartya .termekkartya__kep { background: #FFFFFF; border: 1px solid var(--kartya-szegely); }
.termekkartya__valasztas { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--kek-szoveg); }
.termekkartya__jellemzok { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.termekkartya__jellemzok li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.termekkartya__jellemzok .ikon { flex: none; margin-top: .2em; color: var(--kek); }

/* ── Gyártói logók (D 10-13: engedély megvan; FELTÉTEL: egyforma séma, egyik sem lóghat ki) – minden logó ugyanabban a
   sötét csempében (mindkét témában sötét: a logók egyszínű fehérek), azonos méret, keret, háttér; nincs kiemelés, nincs hover. ── */
.oem-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 72px; height: 48px; padding: 2px 4px;
  border-radius: 8px; background: #0B2438; border: 1px solid rgba(143, 195, 228, .30); box-sizing: border-box; }
.oem-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.oem__tabla tbody th { white-space: nowrap; }
.oem__tabla tbody th .oem-logo { vertical-align: middle; margin-right: 10px; }
.oem__nev { vertical-align: middle; }
.oem__valasz-fej { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.oem__valasz-fej .oem__valasz-fo { margin: 0; }
.adatforras__logok { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.adatforras__logok .oem-logo { width: 54px; height: 36px; padding: 1px 3px; }
.adatforras__logok-tobb { font-size: 14px; color: #A9B7C2; padding-left: 4px; }

/* ── Szöveg-blokk két jelvénnyel (Rólunk: ISO 27001 + Díjnyertes Termék; kep2) – egyforma magasság, egymás mellett ── */
.szoveg__jelvenyek { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; }
.szoveg__jelvenyek .szoveg__kep, .szoveg__jelvenyek img { max-height: 200px; width: auto; max-width: 46%; height: auto; object-fit: contain; }

/* ── css/09-webshop.css ── */
/* 09-webshop.css – a webshop-bontás (AIMDEV-762, D 2026-10-18): csoportok, NETTÓ ár-jelzés, Hamarosan, függőség-sorok, helyőrző képcsempe,
   műszaki adatok, kosár (kötelező társ-tétel, ajánlott kiegészítők, összegek). Színek csak a témaváltozókból (sötét/világos). */

/* ── Csoportok (csoport → alcsoport) ── */
.termekek__netto { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--szegely); border-radius: 12px; background: var(--felulet-2); font-size: 15px; }
.termekek__netto .ikon { flex: none; margin-top: .2em; color: var(--kek-szoveg); }
.termekek__ugras { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.termekek__ugras .szuro__gomb { display: inline-flex; align-items: center; text-decoration: none; }
.termekcsoport { margin-top: 40px; scroll-margin-top: 96px; }
.termekcsoport:first-of-type { margin-top: 24px; }
.termekcsoport__cim { margin: 0 0 8px; font-size: clamp(22px, 5vw, 30px); }
.termekcsoport__alcim { margin: 24px 0 12px; font-size: clamp(17px, 4vw, 21px); color: var(--kek-szoveg); font-weight: 600; }
.termekcsoport__alcim:first-of-type { margin-top: 8px; }
.termekkartya .kartya__cim { margin-bottom: 8px; }

/* ── Ár: nettó jelzés, további díj, Hamarosan ── */
.ar__netto { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--szoveg-halvany); }
.ar--tovabbi { font-size: .85em; }
.ar--hamarosan { display: inline-flex; align-self: flex-start; padding: 4px 12px; border-radius: 36px; border: 1px dashed var(--kek); color: var(--kek-szoveg); font-weight: 600; font-size: 14px; }
.termekkartya--hamarosan { border-style: dashed; }
.termekkartya__kedvezmeny, .termek__netto-megj { margin: 10px 0 0; font-size: 13px; color: var(--szoveg-halvany); }
.termek__netto-megj { margin: -8px 0 16px; }

/* ── Függőségek („Ehhez szükséges”, „Ajánlott hozzá”) és megjegyzés-sor ── */
.termek-fuggoseg { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; font-size: 14px; }
.termek-fuggoseg .ikon { flex: none; margin-top: .2em; color: var(--kek); }
.termek-fuggoseg a { color: var(--kek-szoveg); }
.termek-fuggoseg--ajanlott { color: var(--szoveg-halvany); }
.termekkartya__megjegyzes, .termek__megjegyzes { margin: 0 0 10px; font-size: 14px; color: var(--szoveg); border-left: 3px solid var(--kek); padding-left: 10px; }

/* ── Helyőrző képcsempe (kép híján; a valódi kép később MCP-n cserélhető) ── */
.termekkartya__kep--helyorzo, .termek__kep--helyorzo {
  display: flex; align-items: center; justify-content: center; color: var(--kek-szoveg);
  background: linear-gradient(135deg, var(--felulet-2), var(--felulet-kek)); border: 1px dashed var(--szegely);
}
.termekkartya__kep--helyorzo { aspect-ratio: 4 / 3; border-radius: 12px; margin-bottom: 16px; }
.termek__kep--helyorzo { aspect-ratio: 4 / 3; width: 100%; border-radius: 12px; }
.termekkartya__kep--helyorzo svg, .termek__kep--helyorzo svg { width: 46%; height: auto; opacity: .85; }

/* ── Műszaki adatok (termékoldal) ── */
.termek__muszaki { margin-top: 40px; margin-inline: 0; }
.termek__muszaki-cim { font-size: clamp(20px, 4.5vw, 26px); margin: 0 0 16px; }
.muszaki { margin: 0; border: 1px solid var(--szegely); border-radius: 12px; overflow: hidden; }
.muszaki__sor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 16px; border-bottom: 1px solid var(--szegely); }
.muszaki__sor:last-child { border-bottom: 0; }
.muszaki__sor:nth-child(odd) { background: var(--felulet-2); }
.muszaki dt { font-weight: 600; color: var(--szoveg-eros); }
.muszaki dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 720px) { .muszaki__sor:not(.muszaki__sor--teljes) { grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: 16px; } }

/* ── Kosár: kötelező társ-tétel, ajánlott kiegészítők, összegek ── */
.kosar__tetel { grid-template-columns: minmax(0, 1fr) auto auto; }
.kosar__kotelezo { grid-column: 1 / -1; font-size: 13px; color: var(--kek-szoveg); }
.kosar__torles:disabled { opacity: .35; cursor: not-allowed; }
.kosar__torles:disabled:hover { color: var(--szoveg-halvany); background: transparent; }
.kosar__ajanlott { margin: 0 0 16px; padding: 12px 14px; border: 1px dashed var(--kek); border-radius: 12px; display: grid; gap: 8px; font-size: 14px; }
.kosar__ajanlott[hidden] { display: none; }
.kosar__ajanlott-sor { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kosar__osszeg { display: grid; gap: 4px; margin: 0; }
.kosar__osszeg[hidden] { display: none; }
.kosar__osszeg-sor { display: flex; justify-content: space-between; gap: 12px; }
.kosar__osszeg-megj { font-size: 13px; font-weight: 400; color: var(--szoveg-halvany); }

/* ── Kiemelt garancia (UniTrack adatküldési garancia) ── */
.termek-garancia { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--kek); background: var(--felulet-kek); font-size: 14px; font-weight: 500; color: var(--szoveg-eros); }
.termek-garancia .ikon { flex: none; margin-top: .15em; color: var(--kek-szoveg); }

/* ── Termékkártya: kinyíló „Bővebben” (natív details; D 10-18, 3. kör) ── */
.termekkartya__bovebben { margin-top: 12px; border-top: 1px solid var(--szegely); padding-top: 10px; }
.termekkartya__bovebben > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-block: 10px; font-weight: 600; font-size: 15px; color: var(--kek-szoveg); }
.termekkartya__bovebben > summary::-webkit-details-marker { display: none; }
.termekkartya__bovebben > summary::after { content: ""; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-top: -.2em; }
.termekkartya__bovebben[open] > summary::after { transform: rotate(-135deg); margin-top: .2em; }
.termekkartya__bovebben > summary:focus-visible { outline: 2px solid var(--kek); outline-offset: 3px; border-radius: 4px; }
.termekkartya__reszletek { margin-top: 12px; }
.termekkartya__reszletek > :last-child { margin-bottom: 0; }
.muszaki--kartya { margin: 0 0 10px; font-size: 13px; border-radius: 8px; }
.muszaki--kartya .muszaki__sor { padding: 6px 10px; }
@media (min-width: 720px) { .muszaki--kartya .muszaki__sor:not(.muszaki__sor--teljes) { grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr); gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .termekkartya__bovebben > summary::after { transition: none; } }