/* Kezdő útmutató fejezetoldal — FRONTEND_DESIGN_SYSTEM §12–15, §21–23.
   Rács: [TOC 248 px] [fő tartalmi zóna ≤1080 px]; a folyószöveg olvasó magja ≤760 px (§7.2),
   a blokkok (költségidővonal, ársáv, videó, ellenőrzőlista, ábra) a teljes fő zónát használják. */

.tananyag {
  --racs-gap: clamp(40px, 4vw, 72px);
  --fo-zona: 1080px;
  --toc: 248px;
  --olvaso: 960px;
  --blokk-ter: clamp(36px, 4vw, 48px);
  background: var(--td-hatter, var(--aq-paper));
}

/* ---------- Rács ---------- */

.tananyag-racs { display: grid; grid-template-columns: minmax(0, 1fr); }
.tananyag-racs > * { min-width: 0; }
@media (min-width: 820px) {
  .tananyag-racs { grid-template-columns: minmax(0, 920px); justify-content: center; }
}
@media (min-width: 1200px) {
  .tananyag-racs { grid-template-columns: var(--toc) minmax(0, var(--fo-zona)); column-gap: var(--racs-gap); }
  .tananyag-racs > * { grid-column: 2; }
  .tananyag-racs--torzs > .tananyag-vezetokep { grid-row: 1; }
  .tananyag-racs--torzs > .tananyag-toc { grid-column: 1; grid-row: 2 / span 40; }
  .tananyag-racs--torzs > .tananyag-torzs { grid-row: 2; }
}

/* ---------- Fejezetindító hero: sötét, rétegzett, nem landing-banner ---------- */

.fejezet-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(24px, 3.5vw, 48px) 0 clamp(92px, 10vw, 150px);
  color: var(--aq-vilagos);
  background:
    radial-gradient(60% 90% at 88% 0%, rgba(60, 148, 141, .26), transparent 62%),
    radial-gradient(50% 70% at 0% 100%, rgba(63, 112, 80, .30), transparent 65%),
    var(--aq-deep);
}
.fejezet-hero::after {
  content: ""; position: absolute; z-index: -1; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--td-teal-attetszo, rgba(159, 211, 201, .25)), transparent);
}
/* A fejezetszám tipográfiai rétegként: tartalmi jelentése van (01/10), nem dísz-illusztráció. */
.fejezet-hero__szam {
  position: absolute; z-index: -1; right: -.04em; bottom: -.2em;
  font-size: clamp(11rem, 24vw, 26rem); font-weight: 800; line-height: .8; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 2px rgba(159, 211, 201, .13); user-select: none; pointer-events: none;
}
.fejezet-hero__racs { display: grid; gap: 0; }
.morzsa ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 clamp(22px, 3vw, 36px); padding: 0; list-style: none; font-size: .875rem; color: var(--td-halk, var(--aq-muted)); }
.morzsa li + li::before { content: "/"; margin: 0 10px; color: #A9B5AE; }
.morzsa a { color: inherit; text-underline-offset: .2em; }
.morzsa--vilagos ol { color: rgba(238, 241, 234, .66); }
.morzsa--vilagos li + li::before { color: rgba(238, 241, 234, .35); }
.morzsa--vilagos a:hover { color: #fff; }
.morzsa--vilagos [aria-current] { color: #fff; font-weight: 700; }

.fejezet-hero__jelzes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; }
.fejezet-hero__badge {
  display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border-radius: 99px;
  background: var(--td-teal-attetszo, rgba(159, 211, 201, .14)); color: var(--aq-accent-vilagos);
  font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.fejezet-hero__sorszam { font-size: .9375rem; font-weight: 700; color: rgba(238, 241, 234, .7); }
.fejezet-hero__sorszam strong { color: #fff; font-size: 1.25rem; }
.fejezet-hero__cim {
  max-width: 22ch; margin: 0 0 20px; color: #fff;
  font-size: clamp(2.05rem, 1.3rem + 2.5vw, 3.35rem); line-height: 1.04; letter-spacing: -.034em; text-wrap: balance;
}
.fejezet-hero__lead { max-width: 60ch; margin: 0 0 24px; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); line-height: 1.65; color: var(--aq-vilagos-halvany); }
.fejezet-hero__lead strong { color: #fff; }
.fejezet-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 22px; padding: 0; list-style: none; font-size: .9375rem; color: rgba(238, 241, 234, .72); }
.fejezet-hero__meta li { display: inline-flex; align-items: center; gap: 7px; }
.fejezet-hero__meta .ikon { width: 18px; height: 18px; color: var(--aq-accent-vilagos); }
.fejezet-hero__ut { display: flex; gap: 6px; max-width: 280px; margin: 0; padding: 0; list-style: none; }
.fejezet-hero__ut li { flex: 1; height: 6px; border-radius: 99px; background: var(--td-siker-attetszo, rgba(238, 241, 234, .16)); }
.fejezet-hero__ut li.aktualis { background: var(--aq-accent-vilagos); }

.fejezet-hero__roviden {
  position: relative; margin-top: 30px; padding: 24px 24px 22px; border-radius: var(--radius-lg);
  background: var(--td-siker-attetszo, rgba(238, 241, 234, .06)); border: 1px solid rgba(159, 211, 201, .18);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .25); backdrop-filter: blur(2px);
}
.fejezet-hero__roviden-cim { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #fff; font-weight: 800; font-size: 1.0625rem; }
.fejezet-hero__roviden-cim .ikon { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--aq-accent-sotet); color: #fff; stroke-width: 2.6; }
.fejezet-hero__roviden ul { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; font-size: .9687rem; line-height: 1.5; color: var(--aq-vilagos-halvany); }
.fejezet-hero__roviden li { position: relative; padding-left: 18px; }
.fejezet-hero__roviden li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--aq-accent-vilagos); }
.fejezet-hero__roviden strong { color: #fff; }
.fejezet-hero__ugras {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: #fff;
  text-decoration: underline; text-decoration-color: var(--aq-accent-vilagos); text-decoration-thickness: 2px; text-underline-offset: .3em;
}
.fejezet-hero__ugras:hover { color: var(--aq-accent-vilagos); }

@media (min-width: 1024px) and (max-width: 1199px) {
  .fejezet-hero__racs { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); column-gap: 48px; align-items: end; max-width: 920px; margin-inline: auto; }
  .fejezet-hero__szoveg { grid-column: 1; }
  .fejezet-hero__roviden { grid-column: 2; margin-top: 0; }
}
@media (min-width: 820px) and (max-width: 1023px) {
  .fejezet-hero__racs { max-width: 920px; margin-inline: auto; }
}
/* Széles nézet: a hero ugyanarra a rácsra fut, mint a törzs (a bal élek egy vonalban). */
@media (min-width: 1200px) {
  .fejezet-hero__racs {
    grid-template-columns: var(--toc) minmax(0, 1fr) minmax(320px, 380px);
    grid-template-areas: "morzsa morzsa morzsa" "jel cim rov" "jel lead rov" "jel meta rov" "jel . rov";
    column-gap: var(--racs-gap); align-items: start;
    max-width: calc(var(--toc) + var(--racs-gap) + var(--fo-zona)); margin-inline: auto;
  }
  .fejezet-hero__szoveg { display: contents; }
  .fejezet-hero .morzsa { grid-area: morzsa; }
  .fejezet-hero__jelzes { grid-area: jel; flex-direction: column; align-items: flex-start; gap: 14px; margin: 6px 0 0; }
  .fejezet-hero__sorszam { display: grid; font-size: .9375rem; }
  .fejezet-hero__sorszam strong { font-size: 5.25rem; line-height: .9; letter-spacing: -.05em; }
  .fejezet-hero__cim { grid-area: cim; }
  .fejezet-hero__lead { grid-area: lead; }
  .fejezet-hero__meta { grid-area: meta; }
  .fejezet-hero__ut { grid-area: jel; align-self: end; margin-bottom: 8px; max-width: 200px; }
  .fejezet-hero__roviden { grid-area: rov; margin-top: 4px; }
}

/* ---------- Vezetőkép: ráfut a hero aljára, a fő zóna szélességében ---------- */

.tananyag-vezetokep { position: relative; z-index: 2; margin: calc(-1 * clamp(56px, 7vw, 108px)) 0 0; }
.tananyag-vezetokep picture { position: relative; z-index: 1; display: block; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); }
.tananyag-vezetokep img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 339; object-fit: cover; }
.tananyag-vezetokep::before {
  content: ""; position: absolute; z-index: 0; left: 22px; right: -14px; top: 22px; bottom: 30px;
  border-radius: var(--radius-lg); background: rgba(128, 96, 68, .24); transform: rotate(.8deg);
}
.tananyag-vezetokep figcaption { position: relative; margin-top: 14px; font-size: .875rem; color: var(--td-halk, var(--aq-muted)); }
@media (max-width: 819px) {
  .tananyag-vezetokep { margin-top: -44px; }
  .tananyag-vezetokep img { aspect-ratio: 16 / 7; }
}

/* ---------- Tartalomjegyzék ---------- */

.tananyag-racs--torzs { padding-bottom: var(--szekcio-ter); }
.tananyag-toc { margin-top: clamp(28px, 4vw, 44px); }
.tananyag-toc__doboz { border: 1px solid var(--td-keret, var(--aq-line)); border-radius: var(--radius-md); background: var(--td-felulet-2, #FBFAF6); }
.tananyag-toc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 12px 18px;
  font-weight: 800; cursor: pointer; list-style: none;
}
.tananyag-toc summary::-webkit-details-marker { display: none; }
.tananyag-toc__jel { width: 20px; height: 20px; transition: transform .2s ease; }
.tananyag-toc details[open] .tananyag-toc__jel { transform: rotate(180deg); }
.tananyag-toc ol { margin: 0; padding: 0 18px 16px; list-style: none; counter-reset: toc; }
.tananyag-toc li { counter-increment: toc; }
.tananyag-toc a {
  display: flex; gap: 10px; min-height: 44px; align-items: center; padding: 8px 0; border-top: 1px solid var(--td-keret, var(--aq-line));
  color: var(--td-szoveg, var(--aq-text)); font-size: .9375rem; font-weight: 600; line-height: 1.35; text-decoration: none;
}
.tananyag-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; min-width: 1.7em; color: var(--td-halk, var(--aq-muted)); font-variant-numeric: tabular-nums; }
.tananyag-toc a:hover, .tananyag-toc a.aktiv { color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.tananyag-toc a.aktiv::before { color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
@media (min-width: 1200px) {
  .tananyag-toc { position: sticky; top: calc(var(--fejlec-magassag) + 28px); align-self: start; margin-top: clamp(44px, 5vw, 64px); }
  .tananyag-toc__doboz { padding: 20px 18px 14px; }
  .tananyag-toc summary { min-height: 0; padding: 0 0 12px; cursor: default; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--td-halk, var(--aq-muted)); }
  .tananyag-toc__jel { display: none; }
  .tananyag-toc ol { padding: 0; }
  .tananyag-toc a { min-height: 0; padding: 8px 0 8px 12px; border-top: 0; border-left: 2px solid var(--td-keret, var(--aq-line)); font-size: .875rem; }
  .tananyag-toc a.aktiv { border-left-color: var(--aq-accent-sotet); background: linear-gradient(90deg, rgba(60, 148, 141, .08), transparent); }
}

/* ---------- Törzs: olvasó mag + széles blokkok, szellős ritmus ---------- */

.tananyag-torzs { margin-top: clamp(40px, 5vw, 64px); font-size: 1.0625rem; line-height: 1.75; }
@media (min-width: 560px) { .tananyag-torzs { font-size: 1.125rem; } }
@media (min-width: 1440px) { .tananyag-torzs { font-size: 1.1875rem; } }
.tananyag-torzs > p, .tananyag-torzs > .tananyag-lista { max-width: var(--olvaso); }
.tananyag-torzs > p { margin: 0 0 1.35em; }
.tananyag-torzs a:not([class]) { color: var(--td-teal-szoveg, var(--aq-accent-sotet)); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.tananyag-torzs a:not([class]):hover { color: var(--td-teal-szoveg, var(--aq-accent-sotetebb)); text-decoration-thickness: 2px; }
.tananyag-cim { text-wrap: balance; }
.tananyag-cim--h2 {
  margin: clamp(72px, 8vw, 112px) 0 24px;
  font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em;
}
.tananyag-cim--h2::before { content: ""; display: block; width: 44px; height: 4px; margin-bottom: 20px; border-radius: 2px; background: var(--kat-kezdo); }
.tananyag-cim--h3 { margin: 40px 0 14px; font-size: 1.35rem; }
.tananyag-torzs > .tananyag-cim--h2:first-child { margin-top: 0; }
.tananyag-lista { margin: 0 0 1.35em; padding-left: 1.3em; }
.tananyag-lista li { margin-bottom: .5em; }

/* ---------- Kiemelések (§14–15): roviden < tipp < fontos < figyelmeztetes ---------- */

.kiemeles { margin: var(--blokk-ter) 0; padding: 24px 28px 22px; border-radius: var(--radius-md); font-size: 1.0625rem; line-height: 1.65; }
.kiemeles p { margin: 0 0 .7em; }
.kiemeles p:last-child, .kiemeles ul:last-child { margin-bottom: 0; }
.kiemeles ul { margin: 0 0 .7em; padding-left: 1.2em; }
.kiemeles li { margin-bottom: .45em; }
.kiemeles__cim { display: flex; align-items: center; gap: 10px; margin-bottom: 12px !important; font-size: 1.125rem; font-weight: 800; line-height: 1.3; }
.kiemeles__ikon { flex: none; width: 24px; height: 24px; }
.kiemeles--roviden { background: var(--td-felulet-2, var(--aq-surface)); border-left: 5px solid var(--aq-plant); }
.kiemeles--roviden .kiemeles__ikon { color: var(--aq-plant); }
.kiemeles--roviden p:not(.kiemeles__cim) { font-size: 1.25rem; font-weight: 600; line-height: 1.45; }
.kiemeles--tipp { background: rgba(60, 148, 141, .09); border-left: 4px solid var(--aq-accent); }
.kiemeles--tipp .kiemeles__ikon { color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.kiemeles--fontos { background: var(--td-felulet-2, var(--aq-paper-meleg)); border-left: 5px solid var(--aq-wood); }
.kiemeles--fontos .kiemeles__ikon { color: var(--td-figyelem-szoveg, var(--aq-wood)); }
.kiemeles--figyelmeztetes { background: var(--td-figyelem-halvany, #F6EEE3); border: 1px solid var(--td-figyelem-keret, #E2CFB6); box-shadow: var(--shadow-soft); }
.kiemeles--figyelmeztetes .kiemeles__ikon { color: var(--td-figyelem-szoveg, #9A5B22); }
.kiemeles__zaras { padding-top: 12px; border-top: 1px solid rgba(154, 91, 34, .22); font-weight: 700; }
@media (max-width: 559px) { .kiemeles { padding: 20px 18px 18px; } }

/* ---------- Képek (§16): natív méret fölé soha ---------- */

/* Két tartalom közötti kép (projektgazdai szabály, 2026-09-27): fekvő → a szövegoszlop teljes szélessége,
   minden más a szövegoszlopon belül középen; az „oldal” változat sem úszik (a lebegő kép összecsúszott a szöveggel). */
.tananyag-kep {
  --kep-max: 760px; position: relative; max-width: var(--kep-max);
  margin: var(--blokk-ter) 0 var(--blokk-ter) max(0px, (min(100%, var(--olvaso)) - var(--kep-max)) / 2);
}
.tananyag-kep--fekvo { --kep-max: var(--olvaso); }
.tananyag-kep--kicsi, .tananyag-kep--allo, .tananyag-kep--oldal { --kep-max: 480px; }
.tananyag-kep--negyzetes { --kep-max: 640px; }
.tananyag-kep--magas { --kep-max: 380px; }
.tananyag-kep__keret { position: relative; width: 100%; }
.tananyag-kep__keret::before {
  content: ""; position: absolute; z-index: 0; inset: 14px -12px -12px 14px; border-radius: var(--radius-md);
  background: rgba(60, 148, 141, .16); transform: rotate(-1deg);
}
.tananyag-kep picture { position: relative; z-index: 1; display: block; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.tananyag-kep img { display: block; width: 100%; height: auto; }
.tananyag-kep figcaption { margin-top: 16px; font-size: .875rem; line-height: 1.5; color: var(--td-halk, var(--aq-muted)); }
.tananyag-cim--h2 { clear: both; }

/* ---------- Költségtípusok: egy rácsra illesztett idővonal (marker, címke, kártya egy ritmusban) ---------- */

.koltseg-ido { position: relative; display: grid; gap: 26px; margin: 36px 0 var(--blokk-ter); padding: 0; list-style: none; }
.koltseg-ido__szakasz { position: relative; display: grid; grid-template-rows: auto 1fr; }
.koltseg-ido__mikor { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 24px; margin: 0 0 14px; }
.koltseg-ido__pont {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--td-hatter, var(--aq-paper)); box-shadow: inset 0 0 0 6px var(--kat-kezdo);
}
.koltseg-ido__cimke {
  padding-right: 12px; background: var(--td-hatter, var(--aq-paper));
  font-size: .8125rem; font-weight: 800; letter-spacing: .12em; line-height: 1; text-transform: uppercase; color: var(--kat-kezdo);
}
.koltseg-ido__kartya { padding: 22px 24px 20px; border-radius: var(--radius-md); background: var(--td-felulet-2, #FBFAF6); box-shadow: var(--shadow-soft); }
.koltseg-ido__cim { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.25; }
.koltseg-ido__leiras { margin: 0 0 14px; color: var(--td-szoveg-2, #34423C); line-height: 1.6; }
.koltseg-ido__elemek { display: grid; gap: 7px; margin: 0; padding: 14px 0 0 1.1em; border-top: 1px solid var(--td-keret, var(--aq-line)); font-size: 1rem; line-height: 1.45; }
.koltseg-ido__szakasz--kiemelt .koltseg-ido__kartya { box-shadow: inset 0 4px 0 var(--kat-kezdo), var(--shadow-card); }
.koltseg-ido__szakasz--kiemelt .koltseg-ido__pont { background: var(--kat-kezdo); box-shadow: 0 0 0 5px rgba(128, 96, 68, .2); }
/* Mobil/tablet: függőleges vonal a markerek középvonalán. */
.koltseg-ido::before { content: ""; position: absolute; z-index: 0; left: 11px; top: 12px; bottom: 12px; width: 2px; background: var(--td-keret, var(--aq-line)); }
.koltseg-ido__kartya { margin-left: 36px; }
@media (min-width: 820px) {
  .koltseg-ido { grid-template-columns: 1.25fr 1fr 1fr; gap: 0 22px; }
  /* Vízszintes vonal pontosan a markerek középvonalán (24 px magas fejsor közepe). */
  .koltseg-ido::before { left: 12px; right: 0; top: 11px; bottom: auto; width: auto; height: 2px; }
  .koltseg-ido__kartya { margin-left: 0; height: 100%; }
}

/* ---------- Ársávok: desktopon táblázat, mobilon címke–érték kártyák (§22) ---------- */

.arpelda { margin: 32px 0 var(--blokk-ter); }
.arpelda__tabla { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.55; }
.arpelda__tabla caption { padding-bottom: 14px; text-align: left; font-weight: 800; font-size: 1.125rem; }
.arpelda__tabla th, .arpelda__tabla td { padding: 18px 16px; border-top: 1px solid var(--td-keret, var(--aq-line)); text-align: left; vertical-align: top; }
.arpelda__tabla thead th { padding-top: 10px; padding-bottom: 10px; border-top: 0; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--td-halk, var(--aq-muted)); }
.arpelda__tabla tbody th { font-weight: 400; }
.arpelda__nev { display: block; font-weight: 800; }
.arpelda__meret { display: block; font-size: .9375rem; color: var(--td-halk, var(--aq-muted)); }
.arpelda__osszeg { display: block; font-size: 1.25rem; white-space: nowrap; color: var(--td-szoveg, var(--aq-text)); }
.arpelda__jellemzo, .arpelda__megjegyzes { display: block; font-size: .9375rem; color: var(--td-halk, var(--aq-muted)); }
.arpelda__megjegyzes { margin-top: 6px; }
.arpelda__szett { max-width: var(--olvaso); margin: 26px 0 14px; }
.arpelda__megjegyzesek { max-width: var(--olvaso); margin: 0 0 22px; padding-left: 1.2em; font-size: 1rem; color: var(--td-szoveg-2, #34423C); }
.arpelda__megjegyzesek li { margin-bottom: .5em; }
.arpelda__figyelmeztetes { display: flex; gap: 12px; margin: 0 0 12px; padding: 16px 18px; border-radius: var(--radius-sm); background: rgba(60, 148, 141, .09); font-size: .9375rem; line-height: 1.55; }
.arpelda__ikon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.arpelda__forras { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--td-halk, var(--aq-muted)); }
.arpelda__forras span { font-weight: 700; }
@media (min-width: 820px) {
  .arpelda__tabla { border-radius: var(--radius-md); overflow: hidden; background: var(--td-felulet-2, #FBFAF6); box-shadow: var(--shadow-soft); }
  .arpelda__tabla caption { padding-left: 2px; }
  .arpelda__tabla thead th { padding-top: 16px; background: rgba(231, 236, 230, .6); }
  .arpelda__tabla th:first-child { width: 28%; padding-left: 22px; }
  .arpelda__tabla td:last-child { width: 24%; padding-right: 22px; }
  .arpelda__tabla tbody tr:hover { background: rgba(231, 236, 230, .45); }
}
@media (max-width: 819px) {
  .arpelda__tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .arpelda__tabla caption { display: block; }
  .arpelda__tabla, .arpelda__tabla tbody, .arpelda__tabla tr, .arpelda__tabla th, .arpelda__tabla td { display: block; width: 100%; }
  .arpelda__tabla tr { margin-bottom: 14px; padding: 18px 18px 6px; border-radius: var(--radius-md); background: var(--td-felulet-2, #FBFAF6); box-shadow: var(--shadow-soft); }
  .arpelda__tabla th, .arpelda__tabla td { padding: 0 0 12px; border: 0; }
  .arpelda__tabla td::before { content: attr(data-cimke); display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--td-halk, var(--aq-muted)); }
  .arpelda__osszeg { white-space: normal; }
}

/* ---------- Tudás + technika + idő (szemléltető modell) ---------- */

.eroforras { margin: var(--blokk-ter) 0; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--td-felulet-2, #FBFAF6); box-shadow: var(--shadow-card); }
.eroforras__keplet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.eroforras__chip { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 14px; border-radius: 99px; font-size: .9375rem; font-weight: 800; color: #fff; }
.eroforras__chip--tudas, .eroforras__resz--tudas { background: var(--aq-accent-sotet); }
.eroforras__chip--technika, .eroforras__resz--technika { background: var(--kat-technika); }
.eroforras__chip--ido, .eroforras__resz--ido { background: var(--aq-wood); }
.eroforras__chip--eredmeny { background: var(--td-felulet-2, var(--aq-surface)); color: var(--td-siker-szoveg, var(--aq-plant-sotet)); box-shadow: inset 0 0 0 2px var(--aq-plant); }
.eroforras__plusz { font-weight: 800; color: var(--td-halk, var(--aq-muted)); }
.eroforras__nyil { width: 22px; height: 22px; color: var(--td-halk, var(--aq-muted)); }
.eroforras__cim { margin: 0 0 16px; font-size: 1.1875rem; font-weight: 800; }
.eroforras__sor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 20px; }
.eroforras__sornev { margin: 0; font-size: .875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--td-halk, var(--aq-muted)); }
.eroforras__sav { display: flex; min-height: 64px; margin: 0; padding: 0; overflow: hidden; border-radius: var(--radius-sm); list-style: none; }
.eroforras__resz {
  display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; padding: 8px 10px;
  color: #fff; font-size: .8125rem; line-height: 1.2; hyphens: auto;
}
.eroforras__resz + .eroforras__resz { border-left: 2px solid var(--td-keret, #FBFAF6); }
.eroforras__resznev { font-weight: 800; }
.eroforras__ertek { opacity: .88; }
.eroforras__resz--20 { flex-basis: 20%; } .eroforras__resz--25 { flex-basis: 25%; } .eroforras__resz--35 { flex-basis: 35%; }
.eroforras__resz--45 { flex-basis: 45%; } .eroforras__resz--50 { flex-basis: 50%; }
.eroforras__cel { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .875rem; font-weight: 700; color: var(--td-siker-szoveg, var(--aq-plant-sotet)); }
.eroforras__pipa { width: 18px; height: 18px; }
.eroforras figcaption { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--td-keret, var(--aq-line)); font-size: .9375rem; line-height: 1.6; color: var(--td-halk, var(--aq-muted)); }
@media (min-width: 560px) {
  .eroforras__sor { grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 16px; }
  .eroforras__resz { font-size: .9375rem; padding: 10px 14px; }
}

/* ---------- Lépéssor: az olcsó kezdés köre ---------- */

.lepessor { margin: 30px 0 var(--blokk-ter); padding: 0; list-style: none; }
.lepessor__lepes { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 12px 16px 12px 0; }
.lepessor__szam {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--td-felulet-2, var(--aq-surface)); font-size: .9375rem; font-weight: 800; color: var(--td-szoveg, var(--aq-text));
}
.lepessor__szoveg { padding-top: 5px; line-height: 1.55; }
.lepessor__lepes--kor { padding-left: 14px; background: rgba(154, 91, 34, .06); border-left: 3px dashed rgba(154, 91, 34, .45); }
.lepessor__lepes--kor .lepessor__szam { background: var(--td-figyelem-halvany, #EAD9C4); }
.lepessor__lepes--kor-eleje { border-top-right-radius: var(--radius-sm); }
.lepessor__lepes--kor-vege { padding-bottom: 16px; border-bottom-right-radius: var(--radius-sm); }
.lepessor__kor-felirat { grid-column: 2; font-size: .875rem; font-weight: 700; font-style: italic; color: var(--td-figyelem-szoveg, #9A5B22); }
.lepessor__lepes--vege { margin-top: 6px; }
.lepessor__lepes--vege .lepessor__szam { background: var(--aq-accent-sotet); color: #fff; }
.lepessor__lepes--vege .lepessor__szoveg { font-weight: 700; }

/* ---------- Ellenőrzőlista ---------- */

.ellenorzolista { display: grid; gap: 12px 16px; margin: 28px 0 var(--blokk-ter); padding: 0; list-style: none; }
.ellenorzolista li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--td-felulet-2, #FBFAF6); box-shadow: var(--shadow-soft); line-height: 1.5; }
.ellenorzolista__ikon { flex: none; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--td-felulet-2, var(--aq-surface)); color: var(--td-siker-szoveg, var(--aq-plant-sotet)); stroke-width: 2.4; }
@media (min-width: 820px) { .ellenorzolista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Kérdéspár ---------- */

.kerdespar { margin: var(--blokk-ter) 0; padding: clamp(24px, 3.5vw, 40px); border-radius: var(--radius-lg); background: var(--td-felulet-2, var(--aq-surface)); }
.kerdespar p { margin: 0; }
.kerdespar__bevezeto { max-width: var(--olvaso); margin-bottom: 18px !important; }
.kerdespar__rossz { font-size: 1.35rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
.kerdespar__rossz s { text-decoration-thickness: 2px; text-decoration-color: var(--td-figyelem-szoveg, rgba(154, 91, 34, .7)); }
.kerdespar__elotag { margin: 18px 0 6px !important; font-weight: 700; }
.kerdespar__jo { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--td-siker-szoveg, var(--aq-plant-sotet)); }

/* ---------- Videóblokk (§23): pontos helyfoglalás, adatvédelmi homlokzat ---------- */

.videoblokk { margin: var(--blokk-ter) 0; }
.videoblokk__poszter {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
  background: #0B1411; box-shadow: var(--shadow-card);
}
.videoblokk__poszter picture, .videoblokk__poszter img { display: block; width: 100%; height: 100%; object-fit: cover; }
.videoblokk__poszter img { transition: transform .5s ease, filter .3s ease; }
.videoblokk__poszter:hover img { transform: scale(1.02); filter: brightness(.9); }
.videoblokk__gomb {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%;
  background: rgba(13, 26, 23, .82); color: #fff; transform: translate(-50%, -50%); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: background-color .2s ease, transform .2s ease;
}
.videoblokk__gomb .ikon { width: 30px; height: 30px; margin-left: 4px; }
.videoblokk__poszter:hover .videoblokk__gomb, .videoblokk__poszter:focus-visible .videoblokk__gomb { background: var(--aq-accent-sotet); transform: translate(-50%, -50%) scale(1.06); }
.videoblokk__hossz { position: absolute; right: 12px; bottom: 12px; padding: 3px 8px; border-radius: 6px; background: rgba(13, 26, 23, .85); color: #fff; font-size: .8125rem; font-weight: 700; }
.videoblokk iframe { display: block; width: 100%; height: 100%; border: 0; }
.videoblokk__szoveg { margin-top: 20px; }
.videoblokk__szoveg p { margin: 0 0 8px; }
.videoblokk__felirat { font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--kat-kezdo); }
.videoblokk__cim { font-size: 1.3rem; font-weight: 800; line-height: 1.3; }
.videoblokk__leiras { max-width: var(--olvaso); font-size: 1.0625rem; line-height: 1.6; color: var(--td-szoveg-2, #34423C); }
.videoblokk__fejezetek { display: grid; gap: 2px 24px; margin: 14px 0 12px; padding: 0; list-style: none; font-size: .9375rem; }
.videoblokk__fejezetek a { display: flex; gap: 10px; min-height: 40px; align-items: center; color: var(--td-szoveg, var(--aq-text)); text-decoration: none; }
.videoblokk__fejezetek a:hover { color: var(--td-teal-szoveg, var(--aq-accent-sotet)); text-decoration: underline; }
.videoblokk__fejezetek time { flex: none; min-width: 3.2em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.videoblokk__megjegyzes { font-size: .9375rem; font-weight: 600; color: var(--td-figyelem-szoveg, #7A4C1E); }
@media (min-width: 820px) { .videoblokk__fejezetek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Kapcsolódó videó: sötét kártya nagy poszterrel (a főoldali YouTube-blokk nyelvén), a fő videónál kompaktabb. */
.videoblokk--kompakt {
  display: grid; gap: 22px; padding: clamp(18px, 3vw, 34px); border-radius: var(--radius-xl); color: var(--aq-vilagos);
  background: radial-gradient(70% 90% at 100% 0%, rgba(60, 148, 141, .24), transparent 60%), var(--aq-deep);
  box-shadow: var(--shadow-card);
}
.videoblokk--kompakt .videoblokk__poszter { border-radius: var(--radius-md); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
.videoblokk--kompakt .videoblokk__gomb { width: 70px; height: 70px; background: #E8203A; }
.videoblokk--kompakt .videoblokk__poszter:hover .videoblokk__gomb, .videoblokk--kompakt .videoblokk__poszter:focus-visible .videoblokk__gomb { background: #C8162D; }
.videoblokk--kompakt .videoblokk__szoveg { margin-top: 0; }
.videoblokk--kompakt .videoblokk__felirat { color: var(--aq-accent-vilagos); }
.videoblokk--kompakt .videoblokk__cim { margin-bottom: 10px; color: #fff; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; }
.videoblokk--kompakt .videoblokk__leiras { color: var(--aq-vilagos-halvany); }
.videoblokk--kompakt .videoblokk__fejezetek { grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 16px 0 14px; }
.videoblokk--kompakt .videoblokk__fejezetek a { min-height: 40px; color: #fff; }
.videoblokk--kompakt .videoblokk__fejezetek a:hover { color: var(--aq-accent-vilagos); }
.videoblokk--kompakt .videoblokk__fejezetek time { min-width: 0; padding: 3px 9px; border-radius: 99px; background: var(--td-teal-attetszo, rgba(159, 211, 201, .14)); color: var(--aq-accent-vilagos); font-size: .875rem; }
.videoblokk--kompakt .videoblokk__megjegyzes { margin: 0; padding-top: 14px; border-top: 1px solid rgba(238, 241, 234, .14); font-size: .9375rem; font-weight: 500; color: var(--aq-vilagos-halvany); }
.videoblokk--kompakt .videoblokk__megjegyzes a { color: #fff; text-decoration-color: var(--aq-accent-vilagos); }
@media (min-width: 900px) {
  .videoblokk--kompakt { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 3.5vw, 48px); align-items: center; }
}

/* ---------- Kép + kiemelés egymás mellett: a kép natív méretben, a sor mégis kitölti a teljes zónát ---------- */

.kep-par { display: grid; gap: 28px; margin: var(--blokk-ter) 0; clear: both; }
.kep-par__kep { position: relative; margin: 0; }
.kep-par__kep::before {
  content: ""; position: absolute; z-index: 0; inset: 16px -12px 44px 16px; border-radius: var(--radius-lg);
  background: rgba(60, 148, 141, .16); transform: rotate(-1deg);
}
.kep-par__kep picture { position: relative; z-index: 1; display: block; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.kep-par__kep img { display: block; width: 100%; height: auto; }
.kep-par__kep figcaption { position: relative; margin-top: 16px; font-size: .875rem; line-height: 1.5; color: var(--td-halk, var(--aq-muted)); }
.kep-par .kiemeles { margin: 0; }
@media (min-width: 1024px) {
  .kep-par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 3.5vw, 48px); align-items: center; }
  .kep-par__kep { max-width: 640px; }
}

/* ---------- GYIK (§21): natív details ---------- */

.gyik { margin-top: 16px; }
.gyik__elem { border-bottom: 1px solid var(--td-keret, var(--aq-line)); }
.gyik__elem:first-of-type { border-top: 1px solid var(--td-keret, var(--aq-line)); }
.gyik__elem summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 60px; padding: 16px 0; cursor: pointer; list-style: none; }
.gyik__elem summary::-webkit-details-marker { display: none; }
.gyik__kerdes { margin: 0; font-size: 1.0937rem; font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.gyik__jel { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--td-felulet-2, var(--aq-surface)); }
.gyik__jel::before, .gyik__jel::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--aq-text); transform: translate(-50%, -50%); transition: transform .2s ease; }
.gyik__jel::after { transform: translate(-50%, -50%) rotate(90deg); }
.gyik__elem[open] .gyik__jel::after { transform: translate(-50%, -50%) rotate(0deg); }
.gyik__elem summary:hover .gyik__kerdes { color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.gyik__elem p { max-width: var(--olvaso); margin: 0 0 20px; padding-right: 40px; font-size: 1.0625rem; line-height: 1.7; color: var(--td-szoveg-2, #2C3833); }

/* ---------- Tanulási haladás és fejezetváltás ---------- */

.tanulas { padding: var(--szekcio-ter) 0; background: var(--td-felulet-2, var(--aq-surface)); }
.tanulas__cim { margin: 0 0 10px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.tanulas__allapot { margin: 0 0 18px; color: var(--td-szoveg-2, #34423C); }
.tanulas__sav { overflow: hidden; height: 8px; margin-bottom: 26px; border-radius: 99px; background: rgba(13, 26, 23, .1); }
.tanulas__toltes { display: block; height: 100%; border-radius: 99px; background: var(--aq-accent-sotet); }
.tanulas__toltes--1 { width: 10%; } .tanulas__toltes--2 { width: 20%; } .tanulas__toltes--3 { width: 30%; } .tanulas__toltes--4 { width: 40%; }
.tanulas__toltes--5 { width: 50%; } .tanulas__toltes--6 { width: 60%; } .tanulas__toltes--7 { width: 70%; } .tanulas__toltes--8 { width: 80%; }
.tanulas__toltes--9 { width: 90%; } .tanulas__toltes--10 { width: 100%; }
.tanulas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; margin: 0 0 36px; padding: 0; list-style: none; }
.tanulas__pont a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--td-szoveg, var(--aq-text)); font-size: .9375rem; font-weight: 600; line-height: 1.3; text-decoration: none; }
.tanulas__pont a:hover .tanulas__nev { text-decoration: underline; }
.tanulas__szam { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--td-felulet-2, #FBFAF6); font-size: .8125rem; font-weight: 800; box-shadow: inset 0 0 0 1px var(--aq-line); }
.tanulas__pont--aktualis .tanulas__szam { background: var(--aq-accent-sotet); color: #fff; box-shadow: none; }
.tanulas__pont--aktualis .tanulas__nev { font-weight: 800; }
@media (max-width: 559px) { .tanulas__lista { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1200px) { .tanulas__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.fejezetvaltas { display: grid; gap: 14px; }
.fejezetvaltas__link {
  display: grid; gap: 6px; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius-lg); text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fejezetvaltas__link--kovetkezo { background: var(--aq-deep); color: #fff; box-shadow: var(--shadow-card); }
.fejezetvaltas__link--elozo { background: var(--td-felulet-2, #FBFAF6); color: var(--td-szoveg, var(--aq-text)); box-shadow: inset 0 0 0 1px var(--aq-line); }
.fejezetvaltas__link:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); }
.fejezetvaltas__felirat { font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--aq-accent-vilagos); }
.fejezetvaltas__link--elozo .fejezetvaltas__felirat { color: var(--td-halk, var(--aq-muted)); }
.fejezetvaltas__cim { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.fejezetvaltas__leiras { color: var(--aq-vilagos-halvany); }

/* ---------- Kapcsolódó tananyagok ---------- */

.kapcsolodo { padding: var(--szekcio-ter) 0 clamp(48px, 6vw, 80px); }
.kapcsolodo__cim { margin: 0 0 20px; font-size: clamp(1.4rem, 1.15rem + .8vw, 1.9rem); }
.kapcsolodo__lista { display: grid; gap: 0 36px; margin: 0; padding: 0; list-style: none; }
.kapcsolodo__lista a { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--td-keret, var(--aq-line)); color: var(--td-szoveg, var(--aq-text)); text-decoration: none; }
.kapcsolodo__nev { font-weight: 800; }
.kapcsolodo__leiras { font-size: .9375rem; color: var(--td-halk, var(--aq-muted)); }
.kapcsolodo__lista a:hover .kapcsolodo__nev { color: var(--td-teal-szoveg, var(--aq-accent-sotet)); text-decoration: underline; }
@media (min-width: 820px) { .kapcsolodo__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Még el nem készült céloldal: nincs 404-es link, csak előkészített kapcsolat ---------- */

.elokeszitett-link { color: inherit; }
.tanulas__hamarosan { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--td-halk, var(--aq-muted)); }
.tanulas__hamarosan .tanulas__szam { color: var(--td-halk, var(--aq-muted)); }
.tanulas__cimke { margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: var(--td-hover, rgba(13, 26, 23, .06)); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.fejezetvaltas__link--hamarosan { background: #24342F; box-shadow: none; }
.fejezetvaltas__link--hamarosan:hover { transform: none; box-shadow: none; }
.fejezetvaltas__link--hamarosan .fejezetvaltas__cim { color: rgba(255, 255, 255, .82); }
@media (min-width: 1200px) {
  .tanulas__hamarosan .tanulas__nev { display: grid; }
  .tanulas__cimke { justify-self: start; margin: 4px 0 0; }
}

.tananyag-piszkozat {
  margin: 18px 0 0; padding: 10px 14px; border: 1px dashed var(--aq-accent-vilagos); border-radius: var(--radius-xs);
  font-size: .875rem; font-weight: 700; color: var(--aq-accent-vilagos);
}

@media (prefers-reduced-motion: reduce) {
  .videoblokk__poszter img, .videoblokk__gomb, .fejezetvaltas__link, .tananyag-toc__jel, .gyik__jel::before, .gyik__jel::after { transition: none; }
  .fejezetvaltas__link:hover { transform: none; }
}

/* A széles blokkok soha nem préselődnek egy lebegő kép mellé. */
.videoblokk, .koltseg-ido, .arpelda, .eroforras, .ellenorzolista, .lepessor, .kerdespar, .kiemeles { clear: both; }

/* Mobil: tömörebb fejezetindító (a „Röviden” kártya marad, mert tartalmi összefoglaló). */
@media (max-width: 559px) {
  .fejezet-hero { padding-bottom: 76px; }
  .morzsa ol { margin-bottom: 18px; }
  .fejezet-hero__cim { font-size: 1.95rem; margin-bottom: 14px; }
  .fejezet-hero__lead { font-size: 1rem; line-height: 1.6; margin-bottom: 18px; }
  .fejezet-hero__meta { gap: 6px 16px; margin-bottom: 16px; font-size: .875rem; }
  .fejezet-hero__roviden { margin-top: 22px; padding: 18px 18px 14px; }
  .fejezet-hero__roviden ul { gap: 8px; margin-bottom: 10px; font-size: .9375rem; }
}

/* ---------- Biológiai ábrák (02. fejezet): közös keret és színkulcs ----------
   A nitrogénformák színe minden ábrán ugyanaz: ammónia = vörös, nitrit = narancs, nitrát = vízkék. */

.tananyag {
  --n-szerves: var(--aq-wood);
  --n-bontas: #62783C;
  --n-ammonia: #A8432E;
  --n-nitrit: #B8651A;
  --n-nitrat: #2F6F86;
  --n-kivezetes: var(--aq-plant);
  --n-nitrifikacio: var(--aq-accent-sotet);
}
.folyamat, .halmaz, .merleg, .elohelyek, .bejaratas {
  clear: both; margin: var(--blokk-ter) 0; padding: clamp(20px, 3vw, 36px);
  border-radius: var(--radius-lg); background: var(--td-felulet-2, #FBFAF6); box-shadow: var(--shadow-card);
}
.abra-cim { margin: 0 0 20px; font-size: 1.1875rem; font-weight: 800; line-height: 1.3; }
.folyamat figcaption, .halmaz figcaption, .merleg figcaption, .elohelyek figcaption, .bejaratas figcaption {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--td-keret, var(--aq-line)); font-size: .9375rem; line-height: 1.6; color: var(--td-halk, var(--aq-muted));
}

/* A: folyamatlánc — mobilon függőleges, 700 px-től 3 oszlop, 1200 px-től egy sor szakaszsávokkal. */
.folyamat__lanc { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.folyamat__lepes {
  --c: var(--aq-muted);
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px;
  border-top: 5px solid var(--c); border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft);
}
.folyamat__lepes--szerves { --c: var(--n-szerves); }
.folyamat__lepes--bontas { --c: var(--n-bontas); }
.folyamat__lepes--ammonia { --c: var(--n-ammonia); }
.folyamat__lepes--nitrit { --c: var(--n-nitrit); }
.folyamat__lepes--nitrat { --c: var(--n-nitrat); }
.folyamat__lepes--kivezetes { --c: var(--n-kivezetes); }
.folyamat__lepes > p { margin: 0; }
.folyamat__szam { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; font-size: .9375rem; font-weight: 800; }
.folyamat__nev { font-size: 1.0625rem; font-weight: 800; line-height: 1.25; }
.folyamat__keplet { font-size: 1.0625rem; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.folyamat__leiras { font-size: .9375rem; line-height: 1.45; color: var(--td-szoveg-2, #34423C); }
.folyamat__veszely { align-self: flex-start; padding: 3px 10px; border-radius: 99px; font-size: .8125rem; font-weight: 800; }
.folyamat__veszely--magas { background: rgba(168, 67, 46, .12); color: var(--td-hiba-szoveg, #8A3322); }
.folyamat__veszely--kozepes { background: rgba(47, 111, 134, .12); color: var(--td-teal-szoveg, #245A6D); }
.folyamat__szakaszok { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto !important; padding-top: 6px; }
.folyamat__szakasz-cimke, .folyamat__sav {
  display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; border-radius: 99px;
  font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.folyamat__szakasz-cimke--bontas, .folyamat__sav--bontas { background: rgba(98, 120, 60, .16); color: var(--td-siker-szoveg, #4A5C2B); }
.folyamat__szakasz-cimke--nitrifikacio, .folyamat__sav--nitrifikacio { background: rgba(43, 117, 112, .15); color: var(--td-teal-szoveg, #1F5B57); }
.folyamat__szakasz-cimke--kivezetes, .folyamat__sav--kivezetes { background: rgba(63, 112, 80, .16); color: var(--td-siker-szoveg, var(--aq-plant-sotet)); }
.folyamat__lepes:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: -17px; width: 11px; height: 11px;
  border-top: 2.5px solid var(--aq-muted); border-right: 2.5px solid var(--aq-muted); transform: translateX(-50%) rotate(135deg);
}
.folyamat__savok { display: none; }
.folyamat__vissza {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 0; padding: 12px 16px;
  border: 2px dashed rgba(63, 112, 80, .4); border-radius: var(--radius-sm); font-size: .9375rem; font-weight: 600; color: var(--td-siker-szoveg, var(--aq-plant-sotet));
}
.folyamat__vissza-ikon { flex: none; width: 22px; height: 22px; transform: rotate(180deg); }
@media (min-width: 700px) {
  .folyamat__lanc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 26px; }
  .folyamat__lepes:not(:last-child)::after { left: auto; right: -19px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(45deg); }
  .folyamat__lepes:nth-child(3n)::after { display: none; }
}
@media (min-width: 1200px) {
  .folyamat__lanc--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
  .folyamat__lanc--6 .folyamat__lepes:nth-child(3n):not(:last-child)::after { display: block; }
  .folyamat__lepes:not(:last-child)::after { right: -14px; width: 9px; height: 9px; }
  .folyamat__lanc--6 .folyamat__lepes { padding: 14px 12px 12px; }
  .folyamat__veszely { white-space: nowrap; padding: 3px 8px; font-size: .75rem; }
  .folyamat__szakaszok { display: none; }
  .folyamat__savok--6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 18px; margin-top: 14px; }
  .folyamat__sav { min-height: 32px; }
  .folyamat__sav--1-3 { grid-column: 1 / 4; grid-row: 1; }
  .folyamat__sav--3-5 { grid-column: 3 / 6; grid-row: 2; }
  .folyamat__sav--6-6 { grid-column: 6 / 7; grid-row: 2; }
}

/* B: halmaz — a biológiai szűrés kerete, benne a nitrifikáció csak egy elem. */
.halmaz__racs { display: grid; gap: 10px; margin-top: 30px; }
.halmaz__kulso, .halmaz__kivul { position: relative; padding: 34px 16px 16px; border-radius: var(--radius-lg); }
.halmaz__kulso { border: 2px dashed rgba(43, 117, 112, .55); background: rgba(60, 148, 141, .05); }
.halmaz__kivul { margin-top: 12px; border: 2px solid rgba(63, 112, 80, .25); background: rgba(63, 112, 80, .06); }
.halmaz__fules, .halmaz__kivul-cim {
  position: absolute; top: -17px; left: 16px; display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 6px 14px 6px 10px; border-radius: 99px; color: #fff; font-size: .9375rem; font-weight: 800;
}
.halmaz__fules { background: var(--n-nitrifikacio); }
.halmaz__kivul-cim { background: var(--aq-plant); }
.halmaz__fules-ikon { width: 20px; height: 20px; }
.halmaz__elemek { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.halmaz__elem { position: relative; padding: 16px 16px 14px; border-left: 4px solid var(--td-keret, var(--aq-line)); border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.halmaz__elem--bontas { border-left-color: var(--n-bontas); }
.halmaz__elem--nitrifikacio { border-left-color: var(--n-nitrifikacio); box-shadow: inset 0 0 0 2px rgba(43, 117, 112, .5), var(--shadow-soft); }
.halmaz__elem--biofilm { border-left-color: var(--n-szerves); }
.halmaz__elem--kivul { border-left-color: var(--aq-plant); }
.halmaz__elem > p { margin: 0; }
.halmaz__cimke {
  display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: 99px; background: var(--n-nitrifikacio);
  color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.halmaz__nev { margin-bottom: 4px !important; font-size: 1.0625rem; font-weight: 800; }
.halmaz__szoveg { font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
.halmaz__plusz { justify-self: center; align-self: center; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--td-halk, var(--aq-muted)); }
@media (min-width: 700px) {
  .halmaz__kulso .halmaz__elemek { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .halmaz__elemek--kivul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .halmaz__kulso, .halmaz__kivul { padding: 38px 20px 20px; }
}
@media (min-width: 1200px) {
  .halmaz__racs { grid-template-columns: minmax(0, 3fr) auto minmax(0, 1.1fr); gap: 18px; }
  .halmaz__kivul { margin-top: 0; }
  .halmaz__elemek--kivul { grid-template-columns: minmax(0, 1fr); }
}

/* C: mérleg — terhelés és kapacitás, alatta a két kimenet. */
.merleg__karok { display: grid; }
.merleg__kar { padding: 20px 22px 16px; border-top: 5px solid var(--aq-accent-sotet); border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.merleg__kar--terheles { border-top-color: var(--kat-garnela); }
.merleg__kar-cim { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.125rem; font-weight: 800; }
.merleg__ikon { width: 28px; height: 28px; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.merleg__kar--terheles .merleg__ikon { color: var(--kat-garnela); }
.merleg__kar ul { margin: 0; padding-left: 1.1em; font-size: 1rem; line-height: 1.5; }
.merleg__kar li { margin-bottom: .4em; }
.merleg__tengely { position: relative; z-index: 1; display: grid; place-items: center; height: 60px; }
.merleg__tengely span {
  margin: 0 -16px; display: grid; place-items: center; width: 52px; height: 52px; border: 4px solid var(--td-keret, #FBFAF6); border-radius: 50%;
  background: var(--aq-deep); color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1;
}
.merleg__allapotok { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.merleg__allapot { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 1rem; line-height: 1.5; }
.merleg__allapot p { margin: 0; }
.merleg__allapot--jo { background: rgba(63, 112, 80, .1); }
.merleg__allapot--rossz { background: rgba(164, 95, 66, .12); }
.merleg__jelzo { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; }
.merleg__allapot--jo .merleg__jelzo { background: var(--aq-plant); }
.merleg__allapot--rossz .merleg__jelzo { background: var(--kat-garnela); }
.merleg__jelzo .ikon { width: 18px; height: 18px; }
@media (min-width: 820px) {
  .merleg__karok { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); align-items: stretch; }
  .merleg__tengely { height: auto; }
  .merleg__allapotok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* D: élőhelyek — széles kép a kártya tetején, alatta az élőhelyek és az igények. */
.elohelyek { overflow: hidden; }
.elohelyek__kep { position: relative; margin: calc(-1 * clamp(20px, 3vw, 36px)) calc(-1 * clamp(20px, 3vw, 36px)) 22px; }
.elohelyek__kep img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.elohelyek__cim {
  position: absolute; left: clamp(16px, 3vw, 36px); bottom: 16px; margin: 0; padding: 8px 16px; border-radius: 99px;
  background: rgba(13, 26, 23, .82); color: #fff; font-size: 1rem;
}
.elohelyek__lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.elohelyek__hely { padding: 16px 18px 14px; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.elohelyek__hely > p { margin: 0; }
.elohelyek__hely--nem { background: transparent; border: 2px dashed rgba(164, 95, 66, .45); box-shadow: none; }
.elohelyek__szerep { display: inline-block; margin-bottom: 8px !important; padding: 3px 9px; border-radius: 99px; font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.elohelyek__szerep--fo { background: var(--aq-accent-sotet); color: #fff; }
.elohelyek__szerep--fugg { background: rgba(98, 120, 60, .18); color: var(--td-siker-szoveg, #4A5C2B); }
.elohelyek__szerep--kieg { background: var(--td-felulet-2, var(--aq-surface)); color: var(--td-szoveg-2, #44524B); }
.elohelyek__szerep--nem { background: rgba(164, 95, 66, .14); color: var(--td-figyelem-szoveg, #8A4A2E); }
.elohelyek__nev { margin-bottom: 4px !important; font-size: 1.0625rem; font-weight: 800; }
.elohelyek__szoveg { font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
.elohelyek__igenyek { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
.elohelyek__igenyek-cim { margin: 0; font-size: .9375rem; font-weight: 800; }
.elohelyek__igenyek ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.elohelyek__igenyek li { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 13px; border-radius: 99px; background: var(--td-felulet-2, var(--aq-surface)); color: var(--td-siker-szoveg, var(--aq-plant-sotet)); font-size: .9375rem; font-weight: 700; }
.elohelyek__igeny-ikon { width: 18px; height: 18px; }
@media (min-width: 560px) { .elohelyek__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 820px) { .elohelyek__kep img { aspect-ratio: 21 / 8; } }
@media (min-width: 1024px) { .elohelyek__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* E: bejáratás — szemléltető görbék időbeosztás nélkül, a szakaszok leírása és a mérési kritériumok. */
.bejaratas__jelmagyarazat { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 14px; padding: 0; list-style: none; font-size: .9375rem; font-weight: 700; }
.bejaratas__jel { display: inline-flex; align-items: center; gap: 8px; }
.bejaratas__jel::before { content: ""; width: 26px; border-top: 4px solid var(--c); }
.bejaratas__jel--ammonia { --c: var(--n-ammonia); }
.bejaratas__jel--nitrit { --c: var(--n-nitrit); }
.bejaratas__jel--nitrit::before { border-top-style: dashed; }
.bejaratas__jel--nitrat { --c: var(--n-nitrat); }
.bejaratas__grafikon { position: relative; padding-left: 26px; }
.bejaratas__tengely { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--td-halk, var(--aq-muted)); }
.bejaratas__tengely--y { position: absolute; left: 0; top: 0; bottom: 28px; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); }
.bejaratas__tengely--x { margin-top: 6px; text-align: right; letter-spacing: .02em; text-transform: none; font-size: .8125rem; }
.bejaratas__rajz { position: relative; }
.bejaratas__svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 340; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); }
.bejaratas__szamok { position: absolute; inset: 10px 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; pointer-events: none; }
.bejaratas__szamok li { display: grid; place-items: center; width: 30px; height: 30px; margin-left: 10px; border: 2px solid var(--td-keret, var(--aq-line)); border-radius: 50%; background: var(--td-felulet, #fff); font-size: .875rem; font-weight: 800; }
@media (max-width: 719px) { .bejaratas__svg { aspect-ratio: auto; height: 230px; } }
.bejaratas__sav { fill: rgba(13, 26, 23, .025); }
.bejaratas__sav--2 { fill: rgba(13, 26, 23, .055); }
.bejaratas__sav--4 { fill: rgba(63, 112, 80, .1); }
.bejaratas__alap { stroke: var(--td-halk, var(--aq-muted)); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bejaratas__gorbe { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bejaratas__gorbe--ammonia { stroke: var(--n-ammonia); }
.bejaratas__gorbe--nitrit { stroke: var(--n-nitrit); stroke-dasharray: 10 6; }
.bejaratas__gorbe--nitrat { stroke: var(--n-nitrat); }
.bejaratas__fazisok { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: fazis; }
.bejaratas__fazisok li { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); font-size: .9375rem; line-height: 1.45; counter-increment: fazis; }
.bejaratas__fazisok li:last-child { box-shadow: inset 0 0 0 2px rgba(63, 112, 80, .35); }
.bejaratas__fazisok p { margin: 0; }
.bejaratas__fazis-nev { margin-bottom: 4px !important; font-weight: 800; }
.bejaratas__fazis-nev::before { content: counter(fazis) ". "; color: var(--td-halk, var(--aq-muted)); }
.bejaratas__kriteriumok { margin-top: 22px; padding: 20px 22px; border-left: 5px solid var(--aq-plant); border-radius: var(--radius-md); background: rgba(63, 112, 80, .08); }
.bejaratas__kriterium-cim { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.0625rem; font-weight: 800; }
.bejaratas__kriterium-ikon { width: 24px; height: 24px; color: var(--td-siker-szoveg, var(--aq-plant-sotet)); }
.bejaratas__kriteriumok ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 1rem; line-height: 1.55; }
.bejaratas__kriteriumok li { display: flex; gap: 10px; }
.bejaratas__pipa { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--aq-plant); }
@media (min-width: 720px) {
  .bejaratas__fazisok { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-left: 26px; }
}

/* Kártyarács: nitrogénformák összevetése és a baktériumok feltételei. */
.kartyak { display: grid; gap: 16px; margin: 28px 0 var(--blokk-ter); padding: 0; list-style: none; clear: both; }
.kartya { --c: var(--aq-accent-sotet); padding: 22px 22px 20px; border-top: 5px solid var(--c); border-radius: var(--radius-md); background: var(--td-felulet-2, #FBFAF6); box-shadow: var(--shadow-soft); }
.kartya--ammonia { --c: var(--n-ammonia); }
.kartya--nitrit { --c: var(--n-nitrit); }
.kartya--nitrat { --c: var(--n-nitrat); }
.kartya__ikon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 50%; background: var(--td-felulet-2, var(--aq-surface)); color: var(--td-siker-szoveg, var(--aq-plant-sotet)); }
.kartya__ikon .ikon { width: 24px; height: 24px; }
.kartya__cim { margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.kartya__jellemzo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.kartya__keplet { font-size: 1.125rem; font-weight: 800; color: var(--c); }
.kartya__cimke { padding: 3px 10px; border-radius: 99px; background: rgba(168, 67, 46, .12); color: var(--td-hiba-szoveg, #8A3322); font-size: .8125rem; font-weight: 800; }
.kartya--nitrit .kartya__cimke { background: rgba(184, 101, 26, .14); color: var(--td-figyelem-szoveg, #83470F); }
.kartya--nitrat .kartya__cimke { background: rgba(47, 111, 134, .12); color: var(--td-teal-szoveg, #245A6D); }
.kartya__szoveg { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--td-szoveg-2, #34423C); }
.kartyak--feltetelek .kartya { border-top-color: var(--aq-plant); }
@media (min-width: 720px) {
  .kartyak--4, .kartyak--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .kartyak--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Kép + kiemelés fordított sorrendben (a ritmus kedvéért a kép jobbra kerül). */
@media (min-width: 1024px) {
  .kep-par--fordit .kep-par__kep { order: 2; justify-self: end; }
}
/* Kis natív méretű kép: soha nem nő a saját szélessége fölé. */
.kep-par--kicsi .kep-par__kep { max-width: 560px; }

/* ---------- 03. fejezet: halválasztás ábrái (F–M) — közös keret, közös állapotszínek ----------
   Állapotszínek: rendben = növényzöld, szűk / figyelj = borostyán, nem jó = vörösesbarna (a 02-es ammónia-szín). */

.tananyag {
  --all-jo: var(--aq-plant);
  --all-jo-hatter: rgba(63, 112, 80, .12);
  --all-jo-szoveg: var(--td-siker-szoveg, #2D5A3C);
  --all-figy: #B8651A;
  --all-figy-hatter: rgba(184, 101, 26, .13);
  --all-figy-szoveg: var(--td-figyelem-szoveg, #7A420F);
  --all-rossz: #A8432E;
  --all-rossz-hatter: rgba(168, 67, 46, .11);
  --all-rossz-szoveg: var(--td-hiba-szoveg, #86301F);
}
.dontes, .meretek, .tartomany, .uszoter, .vizretegek, .terhelespelda {
  clear: both; margin: var(--blokk-ter) 0; padding: clamp(20px, 3vw, 36px);
  border-radius: var(--radius-lg); background: var(--td-felulet-2, #FBFAF6); box-shadow: var(--shadow-card);
}
.dontes figcaption, .meretek figcaption, .tartomany figcaption, .uszoter figcaption, .vizretegek figcaption, .terhelespelda figcaption {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--td-keret, var(--aq-line)); font-size: .9375rem; line-height: 1.6; color: var(--td-halk, var(--aq-muted));
}

/* F: döntési folyamat — mobilon függőleges lánc, 1100 px-től egy sor igen-nyilakkal, a nem-kilépés alul. */
.dontes__lanc { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.dontes__lepes { display: grid; gap: 8px; }
.dontes__kerdes-doboz {
  position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 16px 14px;
  border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); border-top: 5px solid var(--aq-accent-sotet);
}
.dontes__kerdes-doboz p { margin: 0; }
.dontes__fej { display: flex; align-items: center; gap: 10px; }
.dontes__szam { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--aq-accent-sotet); color: #fff; font-size: .9375rem; font-weight: 800; }
.dontes__ikon { width: 24px; height: 24px; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.dontes__kerdes { font-size: 1.0625rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.dontes__leiras { font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
.dontes__igen { display: none; }
.dontes__nem {
  margin: 0; padding: 10px 12px; border: 2px dashed rgba(168, 67, 46, .35); border-radius: var(--radius-sm);
  font-size: .9063rem; line-height: 1.45; color: var(--td-hiba-szoveg, #5A3027); background: rgba(168, 67, 46, .04);
}
.dontes__nem-jel { font-weight: 800; color: var(--all-rossz); }
.dontes__lepes--vege .dontes__kerdes-doboz { border-top-color: var(--aq-plant); background: var(--all-jo-hatter); box-shadow: inset 0 0 0 2px rgba(63, 112, 80, .35); }
.dontes__lepes--vege .dontes__ikon { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: var(--aq-plant); color: #fff; stroke-width: 2.6; }
@media (max-width: 1099px) {
  .dontes__lepes:not(.dontes__lepes--vege) { position: relative; padding-bottom: 24px; }
  .dontes__lepes:not(.dontes__lepes--vege)::after {
    content: "igen"; position: absolute; left: 30px; bottom: 0; padding-left: 12px; height: 22px;
    border-left: 2px solid var(--aq-accent-sotet);
    font-size: .75rem; font-weight: 800; line-height: 22px; letter-spacing: .08em; text-transform: uppercase; color: var(--td-teal-szoveg, var(--aq-accent-sotet));
  }
}
@media (min-width: 1100px) {
  .dontes__lanc { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 22px; }
  .dontes__lanc--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dontes__lanc--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dontes__lepes { grid-template-rows: 1fr auto; min-width: 0; }
  .dontes__lepes:nth-last-child(2) .dontes__igen { display: none; }
  .dontes__lepes--vege { grid-column: 1 / -1; }
  .dontes__lepes--vege .dontes__kerdes-doboz { flex-direction: row; align-items: center; gap: 14px; padding: 14px 18px; border-top-width: 0; border-left: 5px solid var(--aq-plant); }
  .dontes__igen {
    position: absolute; z-index: 1; right: -24px; top: 18px; display: grid; place-items: center; width: 26px; height: 26px;
    border-radius: 50%; background: var(--aq-accent-sotet); color: #fff; font-size: 0;
  }
  .dontes__igen .ikon { width: 16px; height: 16px; stroke-width: 2.6; }
  .dontes__lepes--vege { grid-template-rows: 1fr; }
}

/* G: kifejlett méretek — sáv a testhosszal, szaggatott referencia egy 60 cm-es akváriumhoz. */
.meretek__jelmagyarazat { display: flex; align-items: center; gap: 10px; margin: -8px 0 18px; font-size: .9375rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
.meretek__ref-jel { width: 0; height: 22px; border-left: 3px dashed var(--aq-wood); }
.meretek__lista { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.meretek__sor { display: grid; gap: 4px 18px; grid-template-columns: minmax(0, 1fr) 124px; align-items: center; }
.meretek__nev { grid-column: 1 / -1; margin: 0; font-size: 1rem; line-height: 1.3; }
.meretek__latin { font-style: italic; color: var(--td-halk, var(--aq-muted)); font-size: .875rem; }
.meretek__sav svg { display: block; width: 100%; height: 22px; overflow: visible; }
.meretek__test { fill: var(--kat-hal); }
.meretek__sor--tul .meretek__test { fill: var(--all-rossz); }
.meretek__ref { stroke: var(--td-figyelem-szoveg, var(--aq-wood)); stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.meretek__adat { display: grid; justify-items: end; margin: 0; line-height: 1.2; font-variant-numeric: tabular-nums; }
.meretek__adat strong { font-size: 1.125rem; }
.meretek__adat span { font-size: .8125rem; color: var(--td-halk, var(--aq-muted)); white-space: nowrap; }
.meretek__tengely { display: flex; justify-content: space-between; margin: 10px 142px 0 0; font-size: .75rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
@media (max-width: 559px) { .meretek__tengely span:nth-child(even) { visibility: hidden; } }
@media (min-width: 900px) {
  .meretek__sor { grid-template-columns: 250px minmax(0, 1fr) 150px; }
  .meretek__nev { grid-column: auto; }
  .meretek__tengely { margin-left: 268px; margin-right: 168px; }
}

/* H: tartomány-metszet — panelenként fajsávok, a közös rész kiemelve, pH-nál sav–lúg színskála. */
.tartomany__panelek { display: grid; gap: 16px; }
.tartomany__panel { --c: var(--all-jo); padding: 18px 18px 16px; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); border-top: 5px solid var(--c); }
.tartomany__panel--szuk { --c: var(--all-figy); }
.tartomany__panel--rossz { --c: var(--all-rossz); }
.tartomany__panel p { margin: 0; }
.tartomany__cim { display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.tartomany__cim .ikon { width: 22px; height: 22px; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.tartomany__jelzes {
  display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 14px !important; padding: 3px 11px 3px 8px; border-radius: 99px;
  font-size: .8125rem; font-weight: 800; background: var(--all-jo-hatter); color: var(--all-jo-szoveg);
}
.tartomany__jelzes .ikon { width: 16px; height: 16px; stroke-width: 2.6; }
.tartomany__panel--szuk .tartomany__jelzes { background: var(--all-figy-hatter); color: var(--all-figy-szoveg); }
.tartomany__panel--rossz .tartomany__jelzes { background: var(--all-rossz-hatter); color: var(--all-rossz-szoveg); }
.tartomany__sor { margin-bottom: 8px; }
.tartomany__nev { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.tartomany__nev span { font-weight: 600; color: var(--td-halk, var(--aq-muted)); font-variant-numeric: tabular-nums; }
.tartomany__svg { display: block; width: 100%; height: 22px; margin-top: 3px; }
.tartomany__alap { fill: rgba(13, 26, 23, .07); }
.tartomany__kozos { fill: var(--c); opacity: .2; }
.tartomany__sav--0 { fill: var(--kat-viz); }
.tartomany__sav--1 { fill: var(--kat-garnela); }
.tartomany__pont { stroke: var(--all-rossz); stroke-width: 3; vector-effect: non-scaling-stroke; }
.tartomany__ph-skala { display: block; width: 100%; height: 8px; margin-top: 10px; border-radius: 4px; }
.ph-stop--savas { stop-color: var(--td-figyelem-szoveg, #D4863A); }
.ph-stop--semleges { stop-color: var(--td-siker-szoveg, #7FB069); }
.ph-stop--lugos { stop-color: var(--td-info-szoveg, #3F6FA0); }
.tartomany__ph-cimkek { display: grid; grid-template-columns: 3fr 2fr; margin-top: 3px !important; font-size: .75rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
.tartomany__ph-cimkek span:first-child { padding-right: 6px; border-right: 2px solid var(--aq-muted); text-align: right; }
.tartomany__ph-cimkek span:last-child { padding-left: 6px; }
.tartomany__tengely { display: flex; justify-content: space-between; margin-top: 4px !important; font-size: .75rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); font-variant-numeric: tabular-nums; }
.tartomany__szoveg { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--td-keret, var(--aq-line)); font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
@media (min-width: 760px) { .tartomany__panelek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* I: literszám ≠ úszótér — két akvárium léptékhelyes oldalnézete. */
.uszoter__racs { display: grid; gap: 18px; }
.uszoter__akvarium { --c: var(--all-jo); padding: 18px; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.uszoter__akvarium--rossz { --c: var(--all-figy); }
.uszoter__akvarium p { margin: 0; }
.uszoter__svg { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto 10px; }
.uszoter__viz { fill: rgba(52, 122, 145, .2); }
.uszoter__talaj { fill: rgba(121, 90, 58, .45); }
.uszoter__uveg { fill: none; stroke: var(--td-szoveg, var(--aq-text)); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.uszoter__tav { stroke: var(--c); stroke-width: 3; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.uszoter__nyil { fill: var(--c); }
.uszoter__tavolsag { text-align: center; font-size: 1rem; color: var(--td-halk, var(--aq-muted)); }
.uszoter__tavolsag strong { display: block; font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; color: var(--c); }
.uszoter__nev { margin-top: 12px !important; font-weight: 800; }
.uszoter__nev span { display: block; font-weight: 600; font-size: .875rem; color: var(--td-halk, var(--aq-muted)); font-variant-numeric: tabular-nums; }
.uszoter__szoveg { margin-top: 6px !important; font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
@media (min-width: 640px) { .uszoter__racs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* J: fajgaléria — fotó + adatbázis-adatok kártyán. */
.fajgaleria { clear: both; margin: var(--blokk-ter) 0; }
.fajgaleria__bevezeto { max-width: var(--olvaso); margin: 0 0 20px; }
.fajgaleria__lista { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.fajkartya { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-md); background: var(--td-felulet-2, #FBFAF6); box-shadow: var(--shadow-soft); }
.fajkartya__kep { position: relative; }
.fajkartya__kep img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.fajkartya__cimke {
  position: absolute; left: 12px; bottom: 12px; padding: 4px 11px; border-radius: 99px;
  background: rgba(13, 26, 23, .82); color: #fff; font-size: .8125rem; font-weight: 800;
}
.fajkartya__torzs { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; }
.fajkartya__torzs p { margin: 0; }
.fajkartya__nev { margin: 0; font-size: 1.1875rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.fajkartya__latin { margin-top: -6px !important; font-style: italic; font-size: .9375rem; color: var(--td-halk, var(--aq-muted)); }
.fajkartya__adatok { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.fajkartya__adatok li {
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 10px 3px 8px; border-radius: 99px;
  background: var(--td-felulet-2, var(--aq-surface)); color: var(--td-szoveg-2, #2E3D36); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fajkartya__adatok .ikon { width: 16px; height: 16px; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.fajkartya__szoveg { font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
.fajgaleria__zaras { max-width: var(--olvaso); margin: 18px 0 0; font-size: 1rem; color: var(--td-szoveg-2, #34423C); }
@media (min-width: 560px) { .fajgaleria__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .fajgaleria__lista--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fajgaleria__lista--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fajgaleria__lista--5 > li { grid-column: span 2; }
  .fajgaleria__lista--5 > li:nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 1440px) {
  .fajgaleria__lista--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fajgaleria__lista--5 > li, .fajgaleria__lista--5 > li:nth-child(4) { grid-column: auto; }
}

/* N: fokozatos kategóriaskála (vízkeménység) — egyenlő lépcsők, világos → sötét; mobilon függőleges. */
.skala { clear: both; margin: var(--blokk-ter) 0; }
.skala__fokok { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.skala__fok { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: var(--radius-xs); }
.skala__fok--1 { background: var(--td-teal-halvany, #E3F0F2); color: var(--td-teal-szoveg, #1F4A55); }
.skala__fok--2 { background: #BFDDE3; color: #1F4A55; }
.skala__fok--3 { background: #7FB3C0; color: #0E2E36; }
.skala__fok--4 { background: #3F7F91; color: #fff; }
.skala__fok--5 { background: #22505D; color: #fff; }
.skala__ertek { font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.skala__nev { font-size: .9375rem; font-weight: 700; }
.skala figcaption { margin-top: 12px; font-size: .9375rem; line-height: 1.6; color: var(--td-halk, var(--aq-muted)); }
@media (min-width: 720px) {
  .skala__fokok { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .skala__fok { flex-direction: column; justify-content: flex-end; min-height: 96px; border-radius: 0; }
  .skala__fok--1 { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
  .skala__fok--5 { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
}

/* K: vízrétegek — az akvárium metszete felszíntől talajig; a leírás mellette (mobilon alatta). */
.vizretegek__akvarium { margin: 0; padding: 0; list-style: none; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); }
.vizreteg { display: grid; background: var(--td-felulet, #fff); }
.vizreteg + .vizreteg { border-top: 1px dashed rgba(52, 122, 145, .35); }
.vizreteg__sav { position: relative; padding: 18px 18px 16px; color: #fff; }
.vizreteg--felso .vizreteg__sav { background: linear-gradient(180deg, #5A9CAD, #3B8193); border-top: 5px solid var(--td-teal-keret, #9FD3E0); }
.vizreteg--kozep .vizreteg__sav { background: linear-gradient(180deg, #3B8193, #296575); }
.vizreteg--also .vizreteg__sav { background: linear-gradient(180deg, #296575, #1D4F5C 76%, #7A6446 76%, #65513A); padding-bottom: 38px; }
.vizreteg__cim { margin: 0 0 10px; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
.vizreteg__fajok { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vizreteg__fajok li {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 13px 5px 10px; border-radius: 99px;
  background: rgba(255, 255, 255, .16); font-size: .9063rem; font-weight: 700; line-height: 1.2;
}
.vizreteg__fajok .ikon { flex: none; width: 20px; height: 20px; }
.vizreteg__fajok em { display: block; font-weight: 500; font-size: .75rem; opacity: .85; }
.vizreteg__leiras { padding: 16px 18px; font-size: .9687rem; line-height: 1.55; color: var(--td-szoveg-2, #34423C); }
.vizreteg__leiras p { margin: 0; }
.vizreteg__megjegyzes { display: flex; gap: 8px; margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--td-keret, var(--aq-line)); font-size: .875rem; font-weight: 600; color: var(--td-figyelem-szoveg, #5A4632); }
.vizreteg__megjegyzes .ikon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--td-figyelem-szoveg, var(--aq-wood)); }
@media (min-width: 820px) {
  .vizreteg { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .vizreteg__sav { padding: 22px 24px; }
  .vizreteg__leiras { display: flex; flex-direction: column; justify-content: center; padding: 18px 24px; }
}

/* L: jó és rossz összeállítás — tábla + közös léptékű sáv az akvárium literszámához. */
.terhelespelda__racs { display: grid; gap: 18px; }
.terhelespelda__pelda { --c: var(--all-jo); padding: 18px; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); border-top: 5px solid var(--c); }
.terhelespelda__pelda--rossz { --c: var(--all-rossz); }
.terhelespelda__fej { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 12px; }
.terhelespelda__jel { display: inline-flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 800; color: var(--c); }
.terhelespelda__jel .ikon { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--c); color: #fff; stroke-width: 2.8; }
.terhelespelda__ossz { font-size: .9375rem; color: var(--td-halk, var(--aq-muted)); font-variant-numeric: tabular-nums; }
.terhelespelda__ossz strong { font-size: 1.375rem; color: var(--td-szoveg, var(--aq-text)); }
.terhelespelda__tabla { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.terhelespelda__tabla th, .terhelespelda__tabla td { padding: 7px 6px; border-bottom: 1px solid var(--td-keret, var(--aq-line)); text-align: left; vertical-align: top; }
.terhelespelda__tabla thead th { font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--td-halk, var(--aq-muted)); }
.terhelespelda__tabla tbody th { font-weight: 700; }
.terhelespelda__tabla td:nth-child(3) { font-weight: 800; white-space: nowrap; }
.terhelespelda__sav { margin-top: 14px; }
.terhelespelda__sav svg { display: block; width: 100%; height: 26px; }
.terhelespelda__keret { fill: rgba(52, 122, 145, .14); }
.terhelespelda__igeny { fill: var(--c); }
.terhelespelda__hatar { stroke: var(--td-szoveg, var(--aq-text)); stroke-width: 2; vector-effect: non-scaling-stroke; }
.terhelespelda__sav-felirat { display: flex; justify-content: space-between; margin: 4px 0 0; font-size: .8125rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
.terhelespelda__pontok { display: grid; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.45; }
.terhelespelda__pontok li { display: flex; gap: 8px; }
.terhelespelda__pontok .ikon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--c); }
@media (max-width: 479px) { .terhelespelda__tabla th:nth-child(4), .terhelespelda__tabla td:nth-child(4) { display: none; } }
@media (min-width: 900px) { .terhelespelda__racs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Kártyarács 03-as változatai: névpár (latin név a képlet helyén), az 1,5 L/cm levezetés, viselkedés. */
.kartyak--nevek .kartya__keplet { font-style: italic; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.kartyak--nevek .kartya__cimke, .kartyak--keplet .kartya__cimke { background: var(--td-felulet-2, var(--aq-surface)); color: var(--td-szoveg-2, #2E3D36); }
.kartyak--keplet .kartya { border-top-color: var(--kat-hal); }
.kartyak--keplet .kartya__keplet { display: inline-block; padding: 6px 12px; border-radius: var(--radius-xs); background: var(--aq-deep); color: #fff; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.kartyak--viselkedes .kartya { border-top-color: var(--all-figy); }
.kartyak--viselkedes .kartya__cimke { background: var(--all-figy-hatter); color: var(--all-figy-szoveg); }

/* M: ajánlott videók — kiemelt videó + kártyarács; mobilon vízszintesen lapozható sáv. */
.videoajanlo { clear: both; margin: 8px 0 var(--blokk-ter); }
.videoajanlo iframe { display: block; width: 100%; height: 100%; border: 0; }
.videoajanlo__kiemelt {
  display: grid; gap: 22px; padding: clamp(18px, 3vw, 34px); border-radius: var(--radius-xl); color: var(--aq-vilagos);
  background: radial-gradient(70% 90% at 100% 0%, rgba(60, 148, 141, .24), transparent 60%), var(--aq-deep); box-shadow: var(--shadow-card);
}
.videoajanlo__kiemelt .videoblokk__poszter { border-radius: var(--radius-md); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
.videoajanlo .videoblokk__gomb { background: #E8203A; }
.videoajanlo .videoblokk__poszter:hover .videoblokk__gomb, .videoajanlo .videoblokk__poszter:focus-visible .videoblokk__gomb { background: #C8162D; }
.videoajanlo__szoveg p { margin: 0; }
.videoajanlo__cimke {
  display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 99px; background: var(--td-teal-attetszo, rgba(159, 211, 201, .14));
  color: var(--aq-accent-vilagos); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.videoajanlo__cim { margin: 0 0 10px; color: #fff; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; }
.videoajanlo__leiras { margin-bottom: 14px !important; color: var(--aq-vilagos-halvany); line-height: 1.6; }
.videoajanlo__meta { display: inline-flex; align-items: center; gap: 7px; font-size: .875rem; font-weight: 700; color: rgba(238, 241, 234, .7); font-variant-numeric: tabular-nums; }
.videoajanlo__meta .ikon { width: 17px; height: 17px; color: var(--aq-accent-vilagos); }
.videoajanlo__lista { display: grid; gap: 18px; margin: 22px 0 0; padding: 0; list-style: none; }
.videoajanlo__kartya { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.videoajanlo__kartya .videoblokk__poszter { margin-bottom: 8px; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.videoajanlo__kartya .videoblokk__gomb { width: 56px; height: 56px; }
.videoajanlo__kartya .videoblokk__gomb .ikon { width: 22px; height: 22px; }
.videoajanlo__kartya .videoajanlo__cimke { align-self: flex-start; margin: 0; background: var(--td-felulet-2, var(--aq-surface)); color: var(--td-siker-szoveg, var(--aq-plant-sotet)); }
.videoajanlo__kartya-cim { margin: 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.3; letter-spacing: 0; }
.videoajanlo__kartya-leiras { margin: 0; font-size: .9063rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
.videoajanlo__kartya .videoajanlo__meta { margin: 0; color: var(--td-halk, var(--aq-muted)); }
.videoajanlo__csatorna { margin: 22px 0 0; }
.videoajanlo__csatorna .szoveglink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.videoajanlo__csatorna .ikon { width: 24px; height: 24px; color: var(--td-hiba-szoveg, #E8203A); }
@media (max-width: 719px) {
  .videoajanlo__lista {
    grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 10px; scroll-padding-inline: var(--gutter);
  }
  .videoajanlo__kartya { scroll-snap-align: start; }
}
@media (min-width: 720px) { .videoajanlo__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; } }
@media (min-width: 900px) {
  .videoajanlo__kiemelt { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 3.5vw, 48px); align-items: center; }
}
@media (min-width: 1024px) { .videoajanlo__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; } }

/* ---------- 04. fejezet: vízkémia ábrái (O–U) — a 03-as keret és állapotszínek újrahasznosításával ----------
   Vízszínek: keménység (Ca/Mg) = vízkék, nátrium/kálium = borostyán, hidrogén-karbonát (KH) = növényzöld. */

.tananyag {
  --v-kemeny: var(--kat-viz);
  --v-natrium: #C27A2C;
  --v-kh: var(--aq-plant);
  --v-egyeb: #A3AFA9;
}
.osszevetes, .puffer, .ionmerleg, .vizforrasok, .ioncsere, .oszlopok {
  clear: both; margin: var(--blokk-ter) 0; padding: clamp(20px, 3vw, 36px);
  border-radius: var(--radius-lg); background: var(--td-felulet-2, #FBFAF6); box-shadow: var(--shadow-card);
}
.osszevetes figcaption, .puffer figcaption, .ionmerleg figcaption, .vizforrasok figcaption, .ioncsere figcaption, .oszlopok figcaption {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--td-keret, var(--aq-line)); font-size: .9375rem; line-height: 1.6; color: var(--td-halk, var(--aq-muted));
}

/* O: összehasonlító táblázat — 820 px alatt soronként kártya, a cellák címkéje a data-cimke attribútumból. */
.osszevetes__tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9375rem; line-height: 1.5; }
.osszevetes__tabla thead th {
  padding: 0 14px 10px; border-bottom: 2px solid var(--td-keret, var(--aq-line)); text-align: left;
  font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--td-halk, var(--aq-muted));
}
.osszevetes__tabla tbody th, .osszevetes__tabla td { padding: 16px 14px; border-bottom: 1px solid var(--td-keret, var(--aq-line)); text-align: left; vertical-align: top; }
.osszevetes__tabla tbody tr:last-child > * { border-bottom: 0; }
.osszevetes__tabla td { color: var(--td-szoveg-2, #34423C); }
.osszevetes__tabla td:nth-of-type(3) { color: var(--td-halk, var(--aq-muted)); }
.osszevetes__fej { display: flex; align-items: center; gap: 12px; min-width: 150px; }
.osszevetes__ikon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--td-felulet-2, var(--aq-surface)); color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.osszevetes__ikon .ikon { width: 22px; height: 22px; }
.osszevetes__fej strong { display: block; font-size: 1.1875rem; font-weight: 800; line-height: 1.2; }
.osszevetes__fej small { display: block; font-size: .8125rem; font-weight: 600; line-height: 1.35; color: var(--td-halk, var(--aq-muted)); }
@media (max-width: 819px) {
  .osszevetes__tabla, .osszevetes__tabla tbody, .osszevetes__tabla tr, .osszevetes__tabla th, .osszevetes__tabla td { display: block; }
  .osszevetes__tabla thead { display: none; }
  .osszevetes__tabla tbody { display: grid; gap: 12px; }
  .osszevetes__tabla tr { padding: 16px 16px 6px; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
  .osszevetes__tabla tbody th { padding: 0 0 12px; }
  .osszevetes__tabla td { padding: 10px 0; border-bottom: 1px solid var(--td-keret, var(--aq-line)); }
  .osszevetes__tabla tr > td:last-child { border-bottom: 0; }
  .osszevetes__tabla td::before {
    content: attr(data-cimke); display: block; margin-bottom: 2px;
    font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--td-teal-szoveg, var(--aq-accent-sotet));
  }
}

/* P: pufferkapacitás — két számított pH-görbe, rácsvonalak pH 4–8-nál, HTML-skála a bal oldalon. */
.puffer__jelmagyarazat { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 18px; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.4; }
.puffer__jel { display: flex; align-items: center; gap: 10px; }
.puffer__jel::before { content: ""; flex: none; width: 26px; height: 4px; border-radius: 2px; background: var(--c); }
.puffer__jel--alacsony { --c: #C27A2C; }
.puffer__jel--magas { --c: var(--kat-viz); }
.puffer__jel--jelolo { color: var(--td-halk, var(--aq-muted)); font-size: .875rem; }
.puffer__jel--jelolo::before { height: 0; border-top: 2px dashed var(--aq-muted); background: none; }
.puffer__jel { align-items: flex-start; }
.puffer__jel::before { margin-top: .6em; }
.puffer__jel-szoveg > span { font-variant-numeric: tabular-nums; color: var(--td-halk, var(--aq-muted)); white-space: nowrap; }
.puffer__grafikon { position: relative; padding-left: 36px; }
.puffer__rajz { position: relative; height: clamp(220px, 32vw, 340px); border-left: 2px solid var(--td-keret, #B9C4BD); border-bottom: 2px solid var(--td-keret, #B9C4BD); background: var(--td-felulet, #fff); }
.puffer__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.puffer__racs { stroke: rgba(13, 26, 23, .09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.puffer__jelolo { stroke: var(--td-halk, var(--aq-muted)); stroke-width: 1.5; stroke-dasharray: 7 6; vector-effect: non-scaling-stroke; }
.puffer__gorbe { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.puffer__gorbe--alacsony { stroke: var(--td-figyelem-szoveg, #C27A2C); }
.puffer__gorbe--magas { stroke: var(--kat-viz); }
.puffer__skala {
  position: absolute; top: 0; bottom: 0; right: calc(100% + 8px); display: grid; grid-template-rows: repeat(5, 1fr); align-items: center;
  margin: 0; padding: 0; list-style: none; font-size: .8125rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); font-variant-numeric: tabular-nums; text-align: right;
}
.puffer__tengely { margin: 0; font-size: .8125rem; font-weight: 800; color: var(--td-halk, var(--aq-muted)); }
.puffer__tengely--y { position: absolute; top: -24px; left: 0; }
.puffer__tengely--x { margin-top: 6px; text-align: right; }
.puffer__pontok { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; counter-reset: puffer; }
.puffer__pontok li {
  --c: var(--all-jo); position: relative; padding: 12px 14px 12px 50px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft);
  font-size: .9375rem; line-height: 1.5; counter-increment: puffer;
}
.puffer__pontok li:nth-child(2) { --c: var(--all-figy); }
.puffer__pontok li:nth-child(3) { --c: var(--all-rossz); }
.puffer__pontok li::before {
  content: counter(puffer); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--c); color: #fff; font-size: .8125rem; font-weight: 800;
}
.puffer__pontok strong { color: var(--c); }
.puffer__pontok li:nth-child(1) strong { color: var(--all-jo-szoveg); }
.puffer__pontok li:nth-child(2) strong { color: var(--all-figy-szoveg); }
.puffer__pontok li:nth-child(3) strong { color: var(--all-rossz-szoveg); }
@media (min-width: 820px) { .puffer__pontok { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 559px) { .puffer__grafikon { padding-left: 28px; } .puffer__jelmagyarazat { font-size: .875rem; } }

/* Q: ionmérleg — pozitív és negatív ionok sávja esetenként; a két sáv egyforma hosszú (töltésegyensúly). */
.ionmerleg__esetek { display: grid; gap: 16px; }
.ionmerleg__eset { --c: var(--v-kemeny); padding: 18px 18px 16px; border-top: 5px solid var(--c); border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.ionmerleg__eset--natrium { --c: var(--v-natrium); }
.ionmerleg__eset p { margin: 0; }
.ionmerleg__fej { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px !important; }
.ionmerleg__fej strong { font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.ionmerleg__fej span { padding: 2px 10px; border-radius: 99px; background: var(--td-felulet-2, var(--aq-surface)); font-size: .8125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ionmerleg__sor { margin-bottom: 12px; }
.ionmerleg__sornev { margin-bottom: 4px !important; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--td-halk, var(--aq-muted)); }
.ionmerleg__svg { display: block; width: 100%; height: 24px; border-radius: 6px; overflow: hidden; }
.ionmerleg__resz { fill: var(--c); stroke: var(--td-felulet, #fff); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ionmerleg__resz--gh { --c: var(--v-kemeny); }
.ionmerleg__resz--na { --c: var(--v-natrium); }
.ionmerleg__resz--kh { --c: var(--v-kh); }
.ionmerleg__resz--egyeb { --c: var(--v-egyeb); }
.ionmerleg__jelek { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; list-style: none; font-size: .8125rem; font-weight: 600; color: var(--td-szoveg-2, #34423C); font-variant-numeric: tabular-nums; }
.ionmerleg__jelek li { display: flex; align-items: center; gap: 6px; }
.ionmerleg__folt { flex: none; width: 11px; height: 11px; border-radius: 3px; background: var(--c); }
.ionmerleg__szoveg { margin-top: 4px !important; padding-top: 12px; border-top: 1px solid var(--td-keret, var(--aq-line)); font-size: .9375rem; line-height: 1.55; color: var(--td-szoveg-2, #34423C); }
@media (min-width: 820px) { .ionmerleg__esetek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* R: vízforrás-kártyák — ikonos (4) és fotós (3) csoport, minősítő címkével. */
.vizforrasok > .abra-cim:not(:first-child) { margin-top: 30px; }
.vizforrasok__lista { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.vizforras { --c: var(--all-jo); --c-bg: var(--all-jo-hatter); --c-szoveg: var(--all-jo-szoveg); display: flex; flex-direction: column; overflow: hidden; border-top: 5px solid var(--c); border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.vizforras--felt { --c: var(--all-figy); --c-bg: var(--all-figy-hatter); --c-szoveg: var(--all-figy-szoveg); }
.vizforras--kerul { --c: var(--all-rossz); --c-bg: var(--all-rossz-hatter); --c-szoveg: var(--all-rossz-szoveg); }
.vizforras__ikon { display: grid; place-items: center; width: 48px; height: 48px; margin: 18px 18px 0; border-radius: 50%; background: var(--td-felulet-2, var(--aq-surface)); color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.vizforras__ikon .ikon { width: 24px; height: 24px; }
.vizforras__kep img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.vizforras__torzs { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 18px; }
.vizforras__torzs p { margin: 0; }
.vizforras__cimke {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 99px;
  background: var(--c-bg); color: var(--c-szoveg); font-size: .8125rem; font-weight: 800;
}
.vizforras__cimke .ikon { width: 15px; height: 15px; stroke-width: 2.6; }
.vizforras__cim { margin: 0; font-size: 1.1875rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.vizforras__szoveg { font-size: .9375rem; line-height: 1.55; color: var(--td-szoveg-2, #34423C); }
.vizforras__alcim { margin-top: 4px !important; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--td-halk, var(--aq-muted)); }
.vizforras__pontok { display: grid; gap: 4px; margin: 0; padding: 0 0 0 1.1em; font-size: .875rem; line-height: 1.45; color: var(--td-szoveg-2, #34423C); }
.vizforras__pontok li::marker { color: var(--c); }
@media (min-width: 560px) { .vizforrasok__lista--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vizforrasok__lista--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1680px) { .vizforrasok__lista--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* S: RO, háztartási ioncserés lágyító és teljes sótalanítás — bemenő és kimenő ionok, GH / KH / TDS hatás. */
.ioncsere__racs { display: grid; gap: 16px; }
.ioncsere__eljaras { --c: var(--kat-viz); display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; border-top: 5px solid var(--c); border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.ioncsere__eljaras--kation { --c: var(--v-natrium); }
.ioncsere__eljaras--di { --c: var(--kat-hal); }
.ioncsere__eljaras p { margin: 0; }
.ioncsere__fej { display: flex; align-items: center; gap: 12px; }
.ioncsere__fej strong { display: block; font-size: 1.125rem; font-weight: 800; line-height: 1.25; }
.ioncsere__fej small { display: block; font-size: .8125rem; font-weight: 600; line-height: 1.35; color: var(--td-halk, var(--aq-muted)); }
.ioncsere__ikon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--td-felulet-2, var(--aq-surface)); color: var(--c); }
.ioncsere__ikon .ikon { width: 22px; height: 22px; }
.ioncsere__folyam { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 12px; border-radius: var(--radius-sm); background: var(--td-felulet-2, #F3F6F2); }
.ioncsere__felirat { margin-bottom: 6px !important; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--td-halk, var(--aq-muted)); }
.ioncsere__ionok { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ioncsere__ion { padding: 2px 8px; border-radius: 99px; font-size: .8125rem; font-weight: 800; line-height: 1.5; white-space: nowrap; }
.ioncsere__ion--kemeny { background: rgba(52, 122, 145, .16); color: var(--td-teal-szoveg, #1F4A55); }
.ioncsere__ion--kation { background: rgba(194, 122, 44, .17); color: var(--td-figyelem-szoveg, #7A420F); }
.ioncsere__ion--anion { background: rgba(63, 112, 80, .15); color: var(--td-siker-szoveg, var(--aq-plant-sotet)); }
.ioncsere__nyil .ikon { width: 22px; height: 22px; color: var(--c); }
.ioncsere__maradek { font-size: .8125rem; font-weight: 700; line-height: 1.35; color: var(--td-halk, var(--aq-muted)); }
.ioncsere__ionok + .ioncsere__maradek { margin-top: 6px !important; }
.ioncsere__hatas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ioncsere__hatas-elem { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: .8125rem; font-weight: 600; }
.ioncsere__hatas-elem::before { font-weight: 800; }
.ioncsere__hatas-elem--le { background: rgba(52, 122, 145, .12); color: var(--td-teal-szoveg, #1F4A55); }
.ioncsere__hatas-elem--le::before { content: "↓"; content: "↓" / ""; }
.ioncsere__hatas-elem--marad { background: var(--td-felulet-2, var(--aq-surface)); color: var(--td-szoveg-2, #34423C); }
.ioncsere__hatas-elem--marad::before { content: "="; content: "=" / ""; }
.ioncsere__hatas-elem--fel { background: var(--all-figy-hatter); color: var(--all-figy-szoveg); }
.ioncsere__hatas-elem--fel::before { content: "↑"; content: "↑" / ""; }
.ioncsere__szoveg { font-size: .9375rem; line-height: 1.55; color: var(--td-szoveg-2, #34423C); }
@media (min-width: 1024px) { .ioncsere__racs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* T: vízszintes oszlopdiagram. */
.oszlopok { --c: var(--all-figy); }
.oszlopok--semleges { --c: var(--kat-viz); }
.oszlopok__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.oszlopok__sor { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) 4.5em; align-items: center; gap: 12px; }
.oszlopok__cimke { font-size: .9375rem; font-weight: 800; }
.oszlopok__svg { display: block; width: 100%; height: 24px; border-radius: 6px; overflow: hidden; }
.oszlopok__hatter { fill: rgba(13, 26, 23, .07); }
.oszlopok__sav { fill: var(--c); }
.oszlopok__ertek { font-size: 1rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; color: var(--td-szoveg, var(--aq-text)); }

/* Vízelőkészítési folyamat (A újrahasznosítva): 6 lépés, 3 szakasz egy sorban. */
.folyamat__lepes--elovilag { --c: var(--kat-hal); }
.folyamat__lepes--forras { --c: var(--kat-viz); }
.folyamat__lepes--meres { --c: var(--kat-technika); }
.folyamat__lepes--kezeles { --c: var(--aq-accent-sotet); }
.folyamat__lepes--ellenorzes { --c: var(--all-figy); }
.folyamat__lepes--akvarium { --c: var(--aq-plant); }
.folyamat__szakasz-cimke--terv, .folyamat__sav--terv { background: rgba(52, 139, 131, .15); color: var(--td-teal-szoveg, #1F5B57); }
.folyamat__szakasz-cimke--keszites, .folyamat__sav--keszites { background: rgba(52, 122, 145, .15); color: var(--td-teal-szoveg, #1F4A55); }
.folyamat__szakasz-cimke--rutin, .folyamat__sav--rutin { background: rgba(63, 112, 80, .16); color: var(--td-siker-szoveg, var(--aq-plant-sotet)); }
@media (min-width: 1200px) {
  .folyamat__sav--1-2 { grid-column: 1 / 3; grid-row: 1; }
  .folyamat__sav--1-2 ~ .folyamat__sav { grid-row: 1; }
}

/* Fajonkénti sávok a 4 fajos tartomány-panelben. */
.tartomany__panel:only-child { grid-column: 1 / -1; }
.tartomany__sav--2 { fill: var(--kat-noveny); }
.tartomany__sav--3 { fill: var(--kat-kezdo); }

/* Kártyavariánsok. */
.kartyak--forras .kartya { border-top-color: var(--kat-viz); }
.kartyak--forras .kartya__cimke, .kartyak--meres .kartya__cimke { background: var(--td-felulet-2, var(--aq-surface)); color: var(--td-szoveg-2, #2E3D36); }
.kartyak--klor .kartya:first-child { border-top-color: var(--kat-viz); }
.kartyak--klor .kartya:first-child .kartya__cimke { background: rgba(52, 122, 145, .13); color: var(--td-teal-szoveg, #1F4A55); }
.kartyak--klor .kartya:last-child { border-top-color: var(--all-figy); }
.kartyak--klor .kartya:last-child .kartya__cimke { background: var(--all-figy-hatter); color: var(--all-figy-szoveg); }
.kartyak--regi .kartya { border-top-color: var(--all-rossz); }
.kartyak--regi .kartya__ikon { color: var(--all-rossz); }
.kartyak--meres .kartya { border-top-color: var(--kat-technika); }

/* ---------- 05. fejezet: szűrés ábrái (V–AF) — a 03–04-es keret, állapot- és vízszínek újrahasznosításával ----------
   Szűrőfunkció-színek: mechanikai = barna (részecske), biológiai = növényzöld, keringetés = vízkék, kémiai = szürkéslila. */

.tananyag {
  --sz-mech: #8B6A45;
  --sz-bio: var(--aq-plant);
  --sz-kering: var(--kat-viz);
  --sz-kem: #6A6488;
  --sz-viz: #3F8FB0;
}
.szf, .tenyezok, .fojtas, .aram, .kvadrans, .felulet, .vizut, .robb, .tudas, .kepkartyak, .medter, .techhely, .belsoabra, .szszabra, .atfkep, .sdg, .fa {
  clear: both; margin: var(--blokk-ter) 0; padding: clamp(20px, 3vw, 36px);
  border-radius: var(--radius-lg); background: var(--td-felulet-2, #FBFAF6); box-shadow: var(--shadow-card);
}
.szf figcaption, .tenyezok figcaption, .fojtas figcaption, .aram figcaption, .kvadrans figcaption, .felulet figcaption,
.vizut figcaption, .robb figcaption, .tudas figcaption, .kepkartyak figcaption, .medter figcaption, .techhely figcaption, .belsoabra figcaption, .szszabra figcaption, .atfkep figcaption, .sdg figcaption, .fa figcaption {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--td-keret, var(--aq-line)); font-size: .9375rem; line-height: 1.6; color: var(--td-halk, var(--aq-muted));
}

/* V: a szűrés négy feladata — mini-illusztrációk, alattuk a „jó szűrés” lánca. */
.szf__lista { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.szf__panel { --c: var(--sz-mech); display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; border-top: 5px solid var(--c); border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.szf__panel--biologiai { --c: var(--sz-bio); }
.szf__panel--keringetes { --c: var(--sz-kering); }
.szf__panel--kemiai { --c: var(--sz-kem); border-top-style: dashed; }
.szf__panel p { margin: 0; }
.szf__rajz { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto 4px; }
.szf__rajz * { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.szf__viz { stroke: var(--sz-viz); stroke-width: 2.5; opacity: .55; }
.szf__viz--tiszta { opacity: 1; }
.szf__nyil { stroke: var(--sz-viz); stroke-width: 2.5; }
.szf__nyil--bio { stroke: var(--sz-bio); }
.szf__halo { stroke: var(--td-halk, #8C9A93); stroke-width: 1.6; }
.szf__reszecske { fill: var(--sz-mech) !important; }
.szf__hordozo { fill: #E6DDCC !important; }
.szf__biofilm { stroke: var(--sz-bio); stroke-width: 5; }
.szf__baci { fill: var(--sz-bio) !important; opacity: .85; }
.szf__molekula { fill: var(--td-hiba-szoveg, #C0563E) !important; }
.szf__molekula--kesz { fill: var(--sz-bio) !important; }
.szf__tartaly { stroke: #9FB3AC; stroke-width: 2; fill: rgba(63, 143, 176, .08) !important; }
.szf__kor { stroke: var(--sz-kering); stroke-width: 3; }
.szf__buborek { stroke: var(--sz-kering); stroke-width: 1.6; }
.szf__szem { fill: var(--td-szoveg-2, #4A4458) !important; }
.szf__kotott { fill: var(--td-figyelem-szoveg, #E7B93E) !important; }
.szf__szabad { fill: none; stroke: var(--td-figyelem-szoveg, #B38A1F); stroke-width: 1.8; }
.szf__fej { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 1.0625rem; line-height: 1.3; }
.szf__szam { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; font-size: .8125rem; font-weight: 800; }
.szf__cimke { padding: 2px 9px; border-radius: 99px; background: rgba(106, 100, 136, .13); color: var(--td-info-szoveg, #4D4868); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.szf__szoveg { font-size: .9375rem; line-height: 1.55; color: var(--td-szoveg-2, #34423C); }
.szf__pontok { display: grid; gap: 3px; margin: 2px 0 0; padding: 0 0 0 1.1em; font-size: .875rem; line-height: 1.45; color: var(--td-halk, var(--aq-muted)); }
.szf__pontok li::marker { color: var(--c); }
.szf__keplet { margin-top: 22px; padding: 18px 20px; border-radius: var(--radius-md); background: var(--aq-deep); color: var(--aq-vilagos); }
.szf__keplet-cim { margin: 0 0 12px; font-size: .9375rem; font-weight: 700; color: var(--aq-accent-vilagos); }
.szf__lanc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.szf__lanc li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; background: var(--td-teal-attetszo, rgba(159, 211, 201, .14)); font-size: .9375rem; font-weight: 700; }
.szf__lanc li + li::before { content: "+"; content: "+" / ""; margin-left: -4px; color: var(--aq-accent-vilagos); font-weight: 800; }
@media (min-width: 560px) { .szf__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .szf__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* O kiegészítés: fotós sorfej és a sok oszlopos („széles”) változat, amely 1100 px alatt kártyára vált. */
.osszevetes--szeles .osszevetes__tabla td:nth-of-type(3) { color: var(--td-szoveg-2, #34423C); }
.osszevetes__kep { display: grid; place-items: center; flex: none; width: 72px; height: 72px; padding: 4px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: inset 0 0 0 1px var(--aq-line); }
.osszevetes__kep img { display: block; max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
@media (min-width: 820px) and (max-width: 1099px) {
  .osszevetes--szeles .osszevetes__tabla, .osszevetes--szeles .osszevetes__tabla tbody, .osszevetes--szeles .osszevetes__tabla tr,
  .osszevetes--szeles .osszevetes__tabla th, .osszevetes--szeles .osszevetes__tabla td { display: block; }
  .osszevetes--szeles .osszevetes__tabla thead { display: none; }
  .osszevetes--szeles .osszevetes__tabla tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .osszevetes--szeles .osszevetes__tabla tr { padding: 16px 16px 6px; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
  .osszevetes--szeles .osszevetes__tabla tbody th { padding: 0 0 12px; }
  .osszevetes--szeles .osszevetes__tabla td { padding: 10px 0; border-bottom: 1px solid var(--td-keret, var(--aq-line)); }
  .osszevetes--szeles .osszevetes__tabla tr > td:last-child { border-bottom: 0; }
  .osszevetes--szeles .osszevetes__tabla td::before {
    content: attr(data-cimke); display: block; margin-bottom: 2px;
    font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--td-teal-szoveg, var(--aq-accent-sotet));
  }
}
@media (min-width: 1100px) {
  .osszevetes--szeles .osszevetes__tabla { font-size: .875rem; }
  .osszevetes--szeles .osszevetes__tabla tbody th, .osszevetes--szeles .osszevetes__tabla td { padding: 14px 10px; }
  .osszevetes--szeles .osszevetes__fej { flex-direction: column; align-items: flex-start; min-width: 118px; }
}

/* W: méretezési tényezők. */
.tenyezok__kozep { display: flex; align-items: center; justify-content: center; gap: 12px; width: fit-content; max-width: 100%; margin: 0 auto 18px; padding: 12px 20px; border-radius: 99px; background: var(--aq-deep); color: #fff; font-size: 1.0625rem; font-weight: 800; text-align: center; }
.tenyezok__kozep .ikon { flex: none; width: 24px; height: 24px; color: var(--aq-accent-vilagos); }
.tenyezok__csoportok { display: grid; gap: 14px; }
.tenyezok__csoport { --c: var(--kat-viz); padding: 16px 18px; border-top: 5px solid var(--c); border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.tenyezok__csoport--elovilag { --c: var(--kat-hal); }
.tenyezok__csoport--technika { --c: var(--kat-technika); }
.tenyezok__cim { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.0625rem; font-weight: 800; }
.tenyezok__cim .ikon { width: 22px; height: 22px; color: var(--c); }
.tenyezok__chipek { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tenyezok__chipek li { padding: 5px 11px; border-radius: 99px; background: var(--td-felulet-2, var(--aq-surface)); font-size: .875rem; font-weight: 700; color: var(--td-szoveg-2, #2E3D36); }
@media (min-width: 820px) { .tenyezok__csoportok { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* X: névleges → valós áramlás. */
.fojtas__abra { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: center; }
.fojtas__svg { display: block; width: 100%; height: 90px; }
.fojtas__sav { fill: var(--sz-viz); opacity: .85; }
.fojtas__hatar { stroke: var(--td-felulet, #fff); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.fojtas__vege { display: flex; flex-direction: column; margin: 0; line-height: 1.3; }
.fojtas__vege strong { font-size: 1.125rem; font-weight: 800; }
.fojtas__vege span { font-size: .8125rem; color: var(--td-halk, var(--aq-muted)); }
.fojtas__vege--valos strong { color: var(--sz-viz); }
.fojtas__vege--valos .szoveglink { align-self: flex-start; min-height: 32px; font-size: .9375rem; font-weight: 800; }
.fojtas__tenyezok { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: fojtas; }
.fojtas__tenyezok li { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); font-size: .9375rem; line-height: 1.5; }
.fojtas__tenyezok .ikon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--sz-viz); }
@media (min-width: 720px) {
  .fojtas__abra { grid-template-columns: 150px minmax(0, 1fr) 150px; }
  .fojtas__vege--valos { text-align: right; }
  .fojtas__vege--valos .szoveglink { align-self: flex-end; }
  .fojtas__tenyezok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) { .fojtas__tenyezok { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Y: áramlástérkép — felülnézeti medencék. */
.aram__jelek { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 16px; padding: 0; list-style: none; font-size: .8125rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
.aram__jel { display: flex; align-items: center; gap: 7px; }
.aram__jel::before { content: ""; flex: none; width: 18px; height: 10px; border-radius: 3px; }
.aram__jel--nyil::before { height: 3px; background: var(--sz-viz); }
.aram__jel--pango::before { background: rgba(139, 106, 69, .25); box-shadow: inset 0 0 0 1.5px rgba(139, 106, 69, .6); }
.aram__jel--szivo::before { width: 12px; height: 12px; border-radius: 50%; background: var(--td-felulet, #fff); box-shadow: inset 0 0 0 2px #5B6962; }
.aram__jel--kifolyo::before { width: 14px; background: var(--aq-deep); }
.aram__panelek { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.aram__panel { --c: var(--all-jo); display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 16px; border-top: 5px solid var(--c); border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.aram__panel--figy { --c: var(--all-figy); }
.aram__panel--rossz { --c: var(--all-rossz); }
.aram__panel p { margin: 0; }
.aram__svg { display: block; width: 100%; height: auto; }
.aram__tartaly { fill: rgba(63, 143, 176, .07); stroke: #9FB3AC; stroke-width: 3; }
.aram__pango { fill: rgba(139, 106, 69, .16); stroke: var(--td-figyelem-szoveg, rgba(139, 106, 69, .55)); stroke-width: 1.5; stroke-dasharray: 6 5; }
.aram__deko { fill: #C9BBA3; stroke: var(--td-figyelem-szoveg, #A89274); stroke-width: 2; }
.aram__szivo { fill: var(--td-felulet, #fff); stroke: var(--td-halk, #5B6962); stroke-width: 3; }
.aram__szivo-racs { stroke: var(--td-halk, #5B6962); stroke-width: 2; }
.aram__kifolyo { fill: var(--td-szoveg, var(--aq-deep)); }
.aram__kifolyo-nyilas { stroke: var(--aq-accent-vilagos); stroke-width: 3; }
.aram__nyil { fill: none; stroke: var(--sz-viz); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.aram__nyil--gyenge { stroke-width: 2.5; stroke-dasharray: 3 7; opacity: .7; }
.aram__hegy path { fill: var(--sz-viz); }
.aram__cim { display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; }
.aram__cim .ikon { width: 20px; height: 20px; color: var(--c); stroke-width: 2.4; }
.aram__szoveg { font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
@media (min-width: 900px) { .aram__panelek { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* AA: pumpa vs. médiatér — kétdimenziós mező. */
.kvadrans__racs { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; }
.kvadrans__tengely { margin: 0; font-size: .8125rem; font-weight: 800; letter-spacing: .04em; color: var(--td-halk, var(--aq-muted)); }
.kvadrans__tengely--y { position: relative; grid-row: 1; grid-column: 1; border-right: 2px solid var(--td-keret, #B9C4BD); }
.kvadrans__tengely--y span { position: absolute; left: 50%; top: 50%; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg); }
.kvadrans__tengely--x { grid-row: 2; grid-column: 2; padding-top: 8px; border-top: 2px solid var(--td-keret, #B9C4BD); text-align: right; }
.kvadrans__mezok { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; grid-row: 1; grid-column: 2; margin: 0 0 10px 10px; padding: 0; list-style: none; }
.kvadrans__mezo { --c: var(--all-figy); --bg: var(--all-figy-hatter); display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px; border-radius: var(--radius-md); background: var(--bg); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 35%, transparent); }
.kvadrans__mezo--jo { --c: var(--all-jo); --bg: var(--all-jo-hatter); }
.kvadrans__mezo--rossz { --c: var(--all-rossz); --bg: var(--all-rossz-hatter); }
.kvadrans__mezo p { margin: 0; }
.kvadrans__helyzet { font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--td-halk, var(--aq-muted)); }
.kvadrans__cim { display: flex; align-items: center; gap: 8px; font-size: 1rem; line-height: 1.3; }
.kvadrans__cim .ikon { flex: none; width: 20px; height: 20px; color: var(--c); }
.kvadrans__szoveg { font-size: .875rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
@media (max-width: 559px) {
  .kvadrans__racs { grid-template-columns: 24px minmax(0, 1fr); }
  .kvadrans__mezok { grid-template-columns: minmax(0, 1fr); margin-left: 8px; }
}

/* AB: elméleti vs. elérhető felület. */
.felulet__jelek { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 16px; padding: 0; list-style: none; font-size: .8125rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
.felulet__jel { display: flex; align-items: center; gap: 7px; }
.felulet__jel::before { content: ""; flex: none; width: 16px; height: 12px; border-radius: 3px; }
.felulet__jel--film::before { background: var(--sz-bio); }
.felulet__jel--porus::before { background: var(--td-felulet-3, #D9DEDB); box-shadow: inset 0 0 0 1px #A5AFAA; }
.felulet__jel--viz::before { height: 3px; background: var(--sz-viz); }
.felulet__panelek { display: grid; gap: 16px; }
.felulet__panel { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.felulet__panel p { margin: 0; }
.felulet__svg { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.felulet__szemcse { fill: var(--td-grafikon-racs, #EFE9DC); }
.felulet__film { fill: none; stroke: var(--sz-bio); stroke-width: 7; }
.felulet__porus { fill: var(--td-grafikon-racs, #D9DEDB); stroke: #A5AFAA; stroke-width: 1; }
.felulet__szivacstest { fill: #CFE0EA; stroke: #8FB2C4; stroke-width: 2; }
.felulet__lyuk { fill: var(--td-grafikon-racs, #F4F8FA); }
.felulet__szivacsfilm { fill: rgba(63, 112, 80, .45); }
.felulet__viz { fill: none; stroke: var(--sz-viz); stroke-width: 3; stroke-linecap: round; }
.felulet__viz--halvany { opacity: .4; }
.felulet__nyil { fill: none; stroke: var(--sz-viz); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.felulet__cim { font-size: 1.0625rem; }
.felulet__szoveg { font-size: .9375rem; line-height: 1.55; color: var(--td-szoveg-2, #34423C); }
@media (min-width: 760px) { .felulet__panelek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* AC: a víz útja — a lista mindig a víz sorrendjében, az irányt rádiógomb (CSS) váltja. */
.vizut__valaszto { min-width: 0; margin: 0; padding: 0; border: 0; }
.vizut__kerdes { float: left; width: 100%; margin: 0 0 12px; padding: 0; font-size: .9375rem; font-weight: 800; }
.vizut__kerdes + * { clear: both; }
.vizut__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vizut__gomb {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin: 0 8px 8px 0; padding: 8px 14px; border-radius: var(--radius-sm);
  background: var(--td-felulet, #fff); box-shadow: inset 0 0 0 1.5px var(--aq-line); font-size: .9375rem; font-weight: 800; line-height: 1.2; cursor: pointer;
}
.vizut__gomb small { display: block; font-size: .75rem; font-weight: 600; color: var(--td-halk, var(--aq-muted)); }
.vizut__gomb .ikon { flex: none; width: 22px; height: 22px; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.vizut__radio:checked + .vizut__gomb { background: var(--aq-deep); box-shadow: none; color: #fff; }
.vizut__radio:checked + .vizut__gomb small { color: var(--aq-accent-vilagos); }
.vizut__radio:checked + .vizut__gomb .ikon { color: var(--aq-accent-vilagos); }
.vizut__radio:focus-visible + .vizut__gomb { outline: 3px solid var(--aq-accent); outline-offset: 2px; }
.vizut__abra { display: grid; gap: 18px; margin-top: 10px; }
.vizut__lanc { position: relative; display: flex; flex-direction: column-reverse; gap: 6px; margin: 0 auto; padding: 14px 14px 14px 44px; width: 100%; max-width: 420px; border-radius: 22px; background: var(--td-felulet-2, #E9EFEC); box-shadow: inset 0 0 0 2px #C5D1CB; list-style: none; }
.vizut__lanc::before { content: ""; position: absolute; left: 20px; top: 22px; bottom: 22px; width: 4px; border-radius: 2px; background: linear-gradient(to top, var(--sz-viz), rgba(63, 143, 176, .35)); }
.vizut__lanc::after { content: ""; position: absolute; left: 14px; top: 12px; width: 12px; height: 12px; border-top: 4px solid var(--sz-viz); border-left: 4px solid var(--sz-viz); transform: rotate(45deg); }
.vizut__reteg { --c: var(--sz-mech); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--td-felulet, #fff); box-shadow: inset 5px 0 0 var(--c); }
.vizut__reteg--finom { --c: #B08C62; }
.vizut__reteg--bio { --c: var(--sz-bio); min-height: 64px; }
.vizut__reteg--polir { --c: var(--sz-kem); }
.vizut__reteg--opcio { background: repeating-linear-gradient(135deg, var(--td-felulet, #fff) 0 10px, var(--td-felulet-2, #F6F7F4) 10px 20px); }
.vizut__szam { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; font-size: .8125rem; font-weight: 800; }
.vizut__nev { font-size: .9375rem; line-height: 1.3; }
.vizut__nev em { font-size: .75rem; font-style: normal; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
.vizut__pelda { font-size: .8125rem; color: var(--td-halk, var(--aq-muted)); }
.vizut__vege { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: .8125rem; font-weight: 800; color: var(--sz-viz); }
.vizut__vege .ikon { flex: none; width: 20px; height: 20px; }
.vizut__magyarazatok { margin: 0; padding: 0; list-style: none; }
.vizut__magyarazat { display: none; padding: 14px 16px; border-left: 4px solid var(--sz-viz); border-radius: var(--radius-sm); background: rgba(63, 143, 176, .08); font-size: .9375rem; line-height: 1.55; }
.vizut__radio--alulrol:checked ~ .vizut__abra .vizut__magyarazat--alulrol,
.vizut__radio--felulrol:checked ~ .vizut__abra .vizut__magyarazat--felulrol,
.vizut__radio--vizszintes:checked ~ .vizut__abra .vizut__magyarazat--vizszintes { display: block; }
.vizut__radio--felulrol:checked ~ .vizut__abra .vizut__lanc, .vizut__radio--vizszintes:checked ~ .vizut__abra .vizut__lanc { flex-direction: column; }
.vizut__radio--felulrol:checked ~ .vizut__abra .vizut__lanc::before, .vizut__radio--vizszintes:checked ~ .vizut__abra .vizut__lanc::before { background: linear-gradient(to bottom, var(--sz-viz), rgba(63, 143, 176, .35)); }
.vizut__radio--felulrol:checked ~ .vizut__abra .vizut__lanc::after, .vizut__radio--vizszintes:checked ~ .vizut__abra .vizut__lanc::after { top: auto; bottom: 12px; transform: rotate(225deg); }
@media (min-width: 720px) {
  .vizut__radio--vizszintes:checked ~ .vizut__abra .vizut__lanc { flex-direction: row; max-width: none; padding: 44px 14px 14px; }
  .vizut__radio--vizszintes:checked ~ .vizut__abra .vizut__lanc::before { left: 22px; right: 22px; top: 20px; bottom: auto; width: auto; height: 4px; background: linear-gradient(to right, var(--sz-viz), rgba(63, 143, 176, .35)); }
  .vizut__radio--vizszintes:checked ~ .vizut__abra .vizut__lanc::after { left: auto; right: 14px; top: 14px; bottom: auto; transform: rotate(135deg); }
  .vizut__radio--vizszintes:checked ~ .vizut__abra .vizut__reteg { flex: 1 1 0; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 150px; box-shadow: inset 0 5px 0 var(--c); }
  .vizut__radio--vizszintes:checked ~ .vizut__abra .vizut__szam { grid-row: auto; margin-bottom: 6px; }
  .vizut__radio--vizszintes:checked ~ .vizut__abra .vizut__vege { flex: 0 0 76px; flex-direction: column; text-align: center; }
}
@media (min-width: 1024px) { .vizut__abra { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; } }
@media (min-width: 1024px) { .vizut__radio--vizszintes:checked ~ .vizut__abra { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) { .vizut__lanc { transition: padding .2s ease; } }

/* AD: robbantott külső szűrő. */
.robb__racs { display: grid; gap: 20px; align-items: start; }
.robb__svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.robb__tartaly { fill: rgba(63, 143, 176, .08); stroke: #9FB3AC; stroke-width: 3; }
.robb__vizszint { stroke: var(--td-info-szoveg, rgba(63, 143, 176, .5)); stroke-width: 2; stroke-dasharray: 8 6; }
.robb__cso, .robb__kifolyo { fill: none; stroke: var(--td-info-szoveg, #7FA3B3); stroke-width: 6; stroke-linecap: round; }
.robb__kifolyo { stroke: var(--td-info-szoveg, #5E8FA3); }
.robb__racs-elem { fill: var(--td-felulet, #fff); stroke: var(--td-halk, #5B6962); stroke-width: 2; stroke-dasharray: 3 3; }
.robb__tomlo { fill: none; stroke: #B7C6BF; stroke-width: 9; stroke-linecap: round; }
.robb__tomlo--ki { stroke: #A9C3CF; }
.robb__csap { fill: var(--td-halk, #5B6962); }
.robb__csap-kar { fill: none; stroke: var(--td-halk, #5B6962); stroke-width: 3; stroke-linecap: round; }
.robb__fej { fill: var(--td-szoveg-2, #2E3D36); }
.robb__rotor { fill: none; stroke: var(--aq-accent-vilagos); stroke-width: 2.5; }
.robb__rotor-lapat { stroke: var(--aq-accent-vilagos); stroke-width: 2.5; stroke-linecap: round; }
.robb__tomites { fill: none; stroke: var(--td-szoveg, #1F2A26); stroke-width: 4; }
.robb__kosar { stroke-width: 2; }
.robb__kosar--perlon { fill: var(--td-grafikon-racs, #F4F3EE); stroke: #C9C6BA; }
.robb__kosar--bio { fill: #E3DCCB; stroke: #BBAE8F; }
.robb__kosar--szivacs { fill: var(--td-info-szoveg, #5E8FD1); stroke: var(--td-info-szoveg, #3D6FB2); }
.robb__vodor { fill: var(--td-grafikon-racs, #DCE3DF); stroke: #9FB3AC; stroke-width: 2.5; }
.robb__uledek { fill: none; stroke: var(--td-figyelem-szoveg, #8B6A45); stroke-width: 5; stroke-linecap: round; opacity: .6; }
.robb__aram { fill: none; stroke: var(--sz-viz); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 8; }
.robb__hegy path { fill: var(--sz-viz); }
.robb__jel circle { fill: var(--td-szoveg, var(--aq-deep)); }
.robb__jel text { fill: var(--td-felulet, #fff); font: 800 14px/1 system-ui, sans-serif; text-anchor: middle; }
.robb__lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: robb; }
.robb__lista li { position: relative; padding: 8px 10px 8px 42px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); font-size: .9063rem; line-height: 1.5; counter-increment: robb; }
.robb__lista li::before { content: counter(robb); position: absolute; left: 10px; top: 9px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--aq-deep); color: #fff; font-size: .75rem; font-weight: 800; }
@media (min-width: 1100px) { .robb__racs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* AE: tudásszintek. */
.tudas__lista { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.tudas__szint { --c: var(--aq-plant); display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft), inset 0 4px 0 var(--c); }
.tudas__szint--tapasztalat { --c: var(--kat-viz); }
.tudas__szint--termek { --c: var(--aq-wood); }
.tudas__fej { display: flex; align-items: center; gap: 12px; margin: 0; }
.tudas__fej strong { display: block; font-size: 1.0625rem; font-weight: 800; line-height: 1.25; }
.tudas__fej small { display: block; font-size: .8125rem; font-weight: 600; color: var(--td-halk, var(--aq-muted)); }
.tudas__ikon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, var(--td-felulet, #fff)); color: var(--c); }
.tudas__ikon .ikon { width: 20px; height: 20px; }
.tudas__pontok { display: grid; gap: 8px; margin: 0; padding: 0 0 0 1.1em; font-size: .9375rem; line-height: 1.55; color: var(--td-szoveg-2, #34423C); }
.tudas__pontok li::marker { color: var(--c); }
@media (min-width: 1024px) { .tudas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* AF: funkció szerinti képkártyák. */
.kepkartyak__csoport { --c: var(--sz-mech); margin-top: 20px; }
.kepkartyak__csoport:first-of-type { margin-top: 0; }
.kepkartyak__csoport--finom { --c: #B08C62; }
.kepkartyak__csoport--bio { --c: var(--sz-bio); }
.kepkartyak__csoport--kemiai { --c: var(--sz-kem); }
.kepkartyak__csoportcim { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; padding: 8px 0 8px 12px; border-left: 5px solid var(--c); font-size: 1.0625rem; }
.kepkartyak__csoportcim .ikon { width: 22px; height: 22px; color: var(--c); }
.kepkartyak__csoportcim span { flex-basis: 100%; font-size: .875rem; color: var(--td-halk, var(--aq-muted)); }
.kepkartyak__lista { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.kepkartya { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.kepkartya__kep { display: grid; place-items: center; height: 170px; padding: 10px; background: var(--td-felulet, #fff); border-bottom: 1px solid var(--td-keret, var(--aq-line)); }
.kepkartya__kep picture { display: contents; }
.kepkartya__kep img { display: block; max-width: 100%; max-height: 150px; width: auto; height: auto; object-fit: contain; }
.kepkartya__torzs { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 16px; }
.kepkartya__torzs p { margin: 0; }
.kepkartya__cimke { align-self: flex-start; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--c) 14%, var(--td-felulet, #fff)); color: var(--td-szoveg-2, #2E3D36); font-size: .75rem; font-weight: 800; }
.kepkartya__cim { margin: 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.25; }
.kepkartya__szoveg { font-size: .875rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
.kepkartya__figyelj { display: flex; gap: 7px; margin-top: 4px !important; padding: 8px 10px; border-radius: 8px; background: var(--all-figy-hatter); color: var(--all-figy-szoveg); font-size: .8125rem; font-weight: 600; line-height: 1.45; }
.kepkartya__figyelj .ikon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
@media (max-width: 559px) {
  .kepkartya__kep { height: 130px; }
  .kepkartya__kep img { max-height: 112px; }
}
@media (min-width: 560px) { .kepkartyak__lista--2, .kepkartyak__lista--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .kepkartyak__lista--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 560px) { .kepkartyak__lista--1 { grid-template-columns: minmax(0, 1fr); max-width: 50%; } }
@media (min-width: 1200px) {
  .kepkartyak { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 22px 14px; }
  .kepkartyak > .abra-cim, .kepkartyak > figcaption { grid-column: 1 / -1; }
  .kepkartyak > .abra-cim { margin-bottom: 0; }
  .kepkartyak__csoport { display: flex; flex-direction: column; margin-top: 0; }
  .kepkartyak__csoport--n1 { grid-column: span 1; }
  .kepkartyak__csoport--n2 { grid-column: span 2; }
  .kepkartyak__csoport--n3 { grid-column: span 3; }
  .kepkartyak__csoport--n4 { grid-column: span 4; }
  .kepkartyak__lista { flex: 1; }
  .kepkartyak__lista--1 { max-width: none; }
  .kepkartyak__lista--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kepkartyak__lista--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kepkartyak__csoportcim { min-height: 64px; align-content: center; }
}

/* Folyamat (A) — karbantartás: 6 lépés, szakaszok egy sorban (1–3, 4–5, 6). */
.folyamat__lepes--leallitas { --c: var(--kat-technika); }
.folyamat__lepes--mechanikai { --c: var(--sz-mech); }
.folyamat__lepes--biologiai { --c: var(--sz-bio); }
.folyamat__lepes--rotor { --c: var(--aq-accent-sotet); }
.folyamat__lepes--tomites { --c: var(--all-figy); }
.folyamat__lepes--inditas { --c: var(--kat-viz); }
.folyamat__szakasz-cimke--tisztitas, .folyamat__sav--tisztitas { background: rgba(139, 106, 69, .15); color: var(--td-figyelem-szoveg, #6A4F2F); }
.folyamat__szakasz-cimke--ellenorzes, .folyamat__sav--ellenorzes { background: var(--all-figy-hatter); color: var(--all-figy-szoveg); }
.folyamat__szakasz-cimke--inditas, .folyamat__sav--inditas { background: rgba(52, 122, 145, .15); color: var(--td-teal-szoveg, #1F4A55); }
@media (min-width: 1200px) {
  .folyamat__sav--4-5 { grid-column: 4 / 6; grid-row: 1; }
  .folyamat__sav--1-3 ~ .folyamat__sav--6-6 { grid-row: 1; }
}

/* Kártyavariánsok és 6 kártyás rács. */
.kartyak--kifolyo .kartya { border-top-color: var(--sz-viz); }
.kartyak--kifolyo .kartya__cimke, .kartyak--zaj .kartya__cimke { background: var(--td-felulet-2, var(--aq-surface)); color: var(--td-szoveg-2, #2E3D36); }
.kartyak--jelek .kartya { border-top-color: var(--all-figy); }
.kartyak--jelek .kartya__ikon { color: var(--all-figy-szoveg); background: var(--all-figy-hatter); }
.kartyak--zaj .kartya { border-top-color: var(--kat-technika); }
@media (min-width: 720px) { .kartyak--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kartyak--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Videóajánló kiegészítés: két kiemelt egymás mellett, kártyarács 4 videóra, ugrólista a cikkbeli videókra. */
.videoajanlo__kiemeltek { display: grid; gap: 18px; }
.videoajanlo__kiemelt--dupla { align-content: start; }
@media (min-width: 1024px) {
  .videoajanlo__kiemeltek { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .videoajanlo__kiemelt--dupla { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .videoajanlo__kiemelt--dupla .videoajanlo__cim { font-size: 1.3rem; }
}
@media (min-width: 1200px) { .videoajanlo__lista--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; } }
@media (min-width: 1024px) and (max-width: 1199px) { .videoajanlo__lista--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.videoajanlo__cikkben { margin-top: 26px; padding: 18px; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.videoajanlo__cikkben-cim { margin: 0 0 12px; font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--td-halk, var(--aq-muted)); }
.videoajanlo__cikkben-lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.videoajanlo__ugras { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 6px; border-radius: var(--radius-sm); color: inherit; text-decoration: none; }
.videoajanlo__ugras:hover, .videoajanlo__ugras:focus-visible { background: var(--td-felulet-2, var(--aq-surface)); }
.videoajanlo__ugras-kep { flex: none; width: 96px; overflow: hidden; border-radius: 8px; }
.videoajanlo__ugras-kep img { display: block; width: 100%; height: auto; }
.videoajanlo__ugras-szoveg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.videoajanlo__ugras-szoveg small { font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.videoajanlo__ugras-szoveg strong { font-size: .9375rem; line-height: 1.3; }
@media (min-width: 720px) { .videoajanlo__cikkben-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 03. fejezet V3-kiegészítések: letöltőkártya (AH), eredmény-magyarázó kártyák, latin nevek ---------- */
.letoltes { clear: both; margin: var(--blokk-ter) 0; }
.letoltes__kartya { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--td-felulet-2, #FBFAF6); box-shadow: var(--shadow-card); border-left: 6px solid #2E7D4F; }
.letoltes__ikon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; background: rgba(46, 125, 79, .12); color: var(--td-siker-szoveg, #2E7D4F); }
.letoltes__ikon .ikon { width: 26px; height: 26px; }
.letoltes__torzs { display: grid; gap: 8px; min-width: 0; }
.letoltes__torzs p { margin: 0; }
.letoltes__cim { font-size: 1.1875rem; font-weight: 800; line-height: 1.25; }
.letoltes__szoveg { font-size: .9375rem; line-height: 1.55; color: var(--td-szoveg-2, #34423C); }
.letoltes__gomb { justify-self: start; min-height: 46px; }
.letoltes__kepek { display: grid; gap: 14px; margin-top: 16px; }
.letoltes__kep { margin: 0; }
.letoltes__kep picture, .letoltes__kep img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); background: var(--td-felulet, #fff); }
.letoltes__kep figcaption, .letoltes > figcaption { margin-top: 8px; font-size: .875rem; line-height: 1.5; color: var(--td-halk, var(--aq-muted)); }
.kartyak--eredmeny .kartya { border-top-color: var(--aq-accent-sotet); }
/* Kis natív méretű kép (pl. 320 px-es ábra): nem nagyítjuk fel, a kiemelés kapja a helyet. */
.kep-par--szuk .kep-par__kep { max-width: 320px; justify-self: center; }
@media (min-width: 1024px) { .kep-par--szuk { grid-template-columns: 320px minmax(0, 1fr); } }
.kartyak--viselkedes .kartya__keplet { font-style: italic; font-weight: 700; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }

/* ---------- Szerzői gyakorlat (AJ, 05/V3): témaspecifikus cím, diszkrét „Saját gyakorlat” jelvény ---------- */

.szerzoi { clear: both; max-width: calc(var(--olvaso) + 60px); margin: var(--blokk-ter) 0; padding: 22px 28px 10px; border-left: 5px solid var(--aq-wood); border-radius: var(--radius-md); background: linear-gradient(180deg, var(--td-felulet-2, #FBF8F1), var(--td-felulet, #fff) 120px); box-shadow: var(--shadow-soft); font-size: 1.0625rem; line-height: 1.7; }
.szerzoi p { margin: 0 0 .85em; }
.szerzoi__fej { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.szerzoi__arc { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--td-felulet-2, var(--aq-paper-meleg)); box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(121, 90, 58, .28); }
.szerzoi__arc img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.szerzoi__cim { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 !important; }
.szerzoi__cim strong { font-size: 1.1875rem; font-weight: 800; line-height: 1.3; color: var(--td-szoveg, var(--aq-text)); }
.szerzoi__lista { margin: 0 0 .9em; padding-left: 1.25em; }
.szerzoi__lista li { margin-bottom: .45em; }
.szerzoi__lista li::marker { color: var(--td-figyelem-szoveg, var(--aq-wood)); font-weight: 800; }
.jelveny { display: inline-block; padding: 2px 9px; border: 1px solid rgba(121, 90, 58, .3); border-radius: 99px; background: var(--td-figyelem-halvany, #F7F1E6); color: var(--td-figyelem-szoveg, #6B4F32); font-size: .6875rem; font-weight: 800; letter-spacing: .05em; line-height: 1.6; text-transform: uppercase; vertical-align: .25em; white-space: nowrap; }
.tananyag-cim .jelveny { margin-left: 6px; }
@media (max-width: 559px) { .szerzoi { padding: 18px 18px 8px; font-size: 1rem; } .szerzoi__arc { width: 44px; height: 44px; } }

/* ---------- 05: szűrőtípus-szakasz ábrái (AK–AN) ---------- */

/* AK: médiatér-összevetés deciliteres négyzetekben. */
.medter__tartalom { display: grid; gap: 18px; align-items: center; }
.medter__osszeg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.medter__szam { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
.medter__szam span { margin-right: 6px; font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--td-teal-szoveg, #1F4A55); font-variant-numeric: tabular-nums; }
.medter__szam--cel span { color: var(--sz-mech); }
.medter__nyil { margin: 0; font-size: .9375rem; font-weight: 800; color: var(--td-halk, var(--aq-muted)); }
.medter__racs { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; width: 100%; max-width: 540px; margin: 0; padding: 0; list-style: none; }
.medter__cella { aspect-ratio: 1; border: 2px solid rgba(139, 106, 69, .5); border-radius: 5px; background: rgba(139, 106, 69, .1); }
.medter__cella--lehet { border-color: var(--sz-viz); background: repeating-linear-gradient(45deg, rgba(63, 143, 176, .45) 0 4px, rgba(63, 143, 176, .12) 4px 8px); }
.medter__cella--belso { border-color: var(--sz-viz); background: var(--sz-viz); }
.medter__jelek { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0 0; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.45; color: var(--td-szoveg-2, #34423C); }
.medter__jelek li { display: flex; align-items: center; gap: 8px; }
.medter__jel { flex: none; width: 16px; height: 16px; border: 2px solid rgba(139, 106, 69, .5); border-radius: 4px; background: rgba(139, 106, 69, .1); }
.medter__jel--belso { border-color: var(--sz-viz); background: var(--sz-viz); }
.medter__jel--lehet { border-color: var(--sz-viz); background: repeating-linear-gradient(45deg, rgba(63, 143, 176, .45) 0 3px, rgba(63, 143, 176, .12) 3px 6px); }
@media (min-width: 900px) { .medter__tartalom { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 32px; } .medter__osszeg { flex-direction: column; align-items: flex-start; } .medter__szam span { display: block; } }

/* AL: hol van a technika — két elölnézeti panel. */
.techhely__panelek { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.techhely__panel { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.techhely__cim { margin: 0; font-size: 1.0625rem; font-weight: 800; }
.techhely__svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.techhely__pontok { display: grid; gap: 4px; margin: 0; padding-left: 1.15em; font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
.techhely__panel--belso .techhely__pontok li::marker { color: var(--td-figyelem-szoveg, #B8651A); }
.techhely__panel--kulso .techhely__pontok li::marker { color: var(--sz-bio); }
@media (min-width: 760px) { .techhely__panelek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* AM / AN: belső szűrő elhelyezése, szivacsszűrő működése (a jelölők és a lista a robb ábráé). */
.belsoabra__svg, .szszabra__svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }

/* Közös rajzelemek (AL–AN). */
.tech__szekreny { fill: #E9DECB; stroke: #BBA786; stroke-width: 2; }
.tech__uveg { fill: none; stroke: #9FB3AC; stroke-width: 3; }
.tech__viz { fill: rgba(63, 143, 176, .12); }
.tech__felszin { fill: none; stroke: var(--td-info-szoveg, rgba(63, 143, 176, .6)); stroke-width: 2; stroke-dasharray: 6 5; }
.tech__talaj { fill: #DCCDAE; }
.tech__noveny { fill: none; stroke: var(--sz-bio); stroke-width: 4; stroke-linecap: round; }
.tech__fa { fill: var(--td-figyelem-szoveg, #8B6A45); }
.tech__hal { fill: var(--td-figyelem-szoveg, #D9853B); }
.tech__eszkoz { fill: var(--td-halk, #6B7A72); }
.tech__eszkoz-fej { fill: var(--td-szoveg-2, #2E3D36); }
.tech__kazetta-csik { fill: none; stroke: #9FB0A8; stroke-width: 2; }
.tech__kabel { fill: none; stroke: var(--td-szoveg-2, #2E3D36); stroke-width: 1.6; stroke-dasharray: 3 3; }
.tech__foglalt { fill: rgba(184, 101, 26, .08); stroke: var(--td-figyelem-szoveg, #B8651A); stroke-width: 2; stroke-dasharray: 6 4; }
.tech__szabad { fill: rgba(63, 112, 80, .07); stroke: var(--sz-bio); stroke-width: 2; stroke-dasharray: 6 4; }
.tech__cso { fill: none; stroke: var(--td-info-szoveg, #7FA3B3); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.tech__tomlo { fill: none; stroke: var(--td-halk, #8FA79D); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 6; }
.tech__skimmer { fill: var(--td-info-szoveg, #5E8FA3); }
.tech__racs { fill: var(--td-felulet, #fff); stroke: var(--td-halk, #5B6962); stroke-width: 1.5; stroke-dasharray: 2 2; }
.tech__lily { fill: var(--td-info-szoveg, #5E8FA3); }
.tech__kulso { fill: var(--td-szoveg-2, #3A4A43); }
.tech__kazetta { stroke-width: 1.5; }
.tech__kazetta--szivacs { fill: var(--td-info-szoveg, #5E8FD1); stroke: var(--td-info-szoveg, #3D6FB2); }
.tech__kazetta--bio { fill: #E3DCCB; stroke: #BBAE8F; }
.tech__rovatka { fill: none; stroke: var(--td-szoveg-2, #2E3D36); stroke-width: 2; stroke-linecap: round; }
.tech__aram { fill: none; stroke: var(--sz-viz); stroke-width: 3; stroke-linecap: round; }
.tech__hegy path { fill: var(--sz-viz); }
.tech__fodor { fill: none; stroke: var(--sz-viz); stroke-width: 2; stroke-linecap: round; }
.tech__meret { fill: none; stroke: var(--td-szoveg-2, #34423C); stroke-width: 1.5; }
.tech__polc { fill: #BBA786; }
.tech__pumpa { fill: var(--td-halk, #5B6962); }
.tech__pumpa-jel { stroke: var(--td-grafikon-racs, #DCE3DF); stroke-width: 3; stroke-linecap: round; }
.tech__levego { fill: none; stroke: var(--td-szoveg-2, #2E3D36); stroke-width: 2; stroke-linejoin: round; }
.tech__felszallo { fill: var(--td-grafikon-racs, rgba(255, 255, 255, .55)); stroke: var(--td-info-szoveg, #7FA3B3); stroke-width: 2; }
.tech__buborek { fill: var(--td-felulet, #fff); stroke: var(--sz-viz); stroke-width: 1.2; }
.tech__szivacs { fill: var(--td-info-szoveg, #5E8FD1); stroke: var(--td-info-szoveg, #3D6FB2); stroke-width: 2; }
.tech__porus { fill: var(--td-grafikon-racs, rgba(255, 255, 255, .35)); }
.tech__felirat { fill: var(--td-szoveg-2, #34423C); font: 700 13px/1 system-ui, sans-serif; }
.tech__felirat--foglalt { fill: var(--td-figyelem-szoveg, #8A4A12); }
.tech__felirat--szabad { fill: var(--td-siker-szoveg, #2D5A3C); }
.tech__felirat--vilagos { fill: var(--td-felulet, #fff); }

/* Szivacsszűrő „terepkártyái”. */
.kartyak--terep .kartya { border-top-color: var(--sz-bio); }
.kartyak--terep .kartya--szerintem { border-top-color: var(--aq-wood); }
.kartyak--terep .kartya__cimke { background: var(--td-felulet-2, var(--aq-surface)); color: var(--td-szoveg-2, #2E3D36); }

/* ---------- 05: átforgatás-szakasz ábrái (AO, AP) ---------- */

/* AO: átforgatás számkártyákkal és egyórás idővonallal; a számkártyákat a sávdiagram képlete is használja. */
.atfkep__keplet { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0 0 18px; }
.atfkep__tag { display: flex; flex: 1 1 140px; flex-direction: column; justify-content: center; gap: 2px; margin: 0; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.atfkep__szam { font-size: 1.625rem; font-weight: 800; line-height: 1.15; color: var(--td-teal-szoveg, #1F4A55); font-variant-numeric: tabular-nums; }
.atfkep__nev { font-size: .8125rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
.atfkep__tag--eredmeny { background: var(--sz-viz); }
.atfkep__tag--eredmeny .atfkep__szam, .atfkep__tag--eredmeny .atfkep__nev { color: #fff; }
.atfkep__jel { display: flex; align-items: center; font-size: 1.75rem; font-weight: 800; color: var(--td-halk, var(--aq-muted)); }
.atfkep__ido { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.atfkep__svg { display: block; width: 100%; height: auto; }
.atfkep__alap { stroke: #B9C4BD; stroke-width: 5; stroke-linecap: round; }
.atfkep__osztas { stroke: var(--td-halk, #8C9A93); stroke-width: 2; }
.atfkep__pont { fill: var(--sz-viz); stroke: var(--td-felulet, #fff); stroke-width: 3; }
.atfkep__pontszam { fill: var(--td-felulet, #fff); font: 800 15px/1 system-ui, sans-serif; text-anchor: middle; }
.atfkep__skala, .sdg__skala { display: flex; justify-content: space-between; margin: 2px 3.125% 0; font-size: .8125rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); font-variant-numeric: tabular-nums; }
.atfkep__skala span, .sdg__skala span { display: flex; justify-content: center; width: 0; white-space: nowrap; }
.atfkep__szoveg { margin: 10px 0 0; font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
@media (max-width: 559px) { .atfkep__jel { width: 100%; justify-content: center; font-size: 1.375rem; line-height: 1; } .atfkep__tag { flex-basis: 100%; } }

/* AP: sávdiagram közös skálán. */
.sdg__sorok { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sdg__sor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.sdg__nev { margin: 0; line-height: 1.3; }
.sdg__nev strong { display: block; font-size: 1rem; font-weight: 800; }
.sdg__nev small { display: block; font-size: .8125rem; font-weight: 600; color: var(--td-halk, var(--aq-muted)); }
.sdg__svg { display: block; width: 100%; height: 26px; border-radius: 4px; background: var(--td-felulet-2, #EDF1EE); }
.sdg__racs { stroke: var(--td-felulet, #fff); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sdg__sav { fill: var(--sz-viz); }
.sdg__sav--halvany { fill: rgba(63, 143, 176, .35); }
.sdg__sav--gyarto { fill: #9FB3AC; }
.sdg__sav--sajat { fill: var(--sz-mech); }
.sdg__jelolo { stroke: var(--td-szoveg, #1F2A26); stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.sdg__szoveg { margin: 0; padding: 4px 10px; border-radius: 4px; background: var(--td-felulet-2, #EDF1EE); font-size: .9375rem; font-style: italic; color: var(--td-szoveg-2, #34423C); }
.sdg__ertek { margin: 0; font-size: 1.0625rem; font-weight: 800; color: var(--td-teal-szoveg, #1F4A55); font-variant-numeric: tabular-nums; }
.sdg__sor--skala { display: none; padding: 0 14px; background: none; box-shadow: none; }
.sdg__skala { margin: 0; }
.sdg__jelmagyarazat { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: .875rem; font-weight: 700; color: var(--td-szoveg-2, #34423C); }
.sdg__jelolo-minta { flex: none; width: 0; height: 18px; border-left: 2px dashed #1F2A26; }
.sdg__keplet { margin-bottom: 16px; }
@media (min-width: 760px) {
  .sdg__sor { grid-template-columns: 220px minmax(0, 1fr) 150px; }
  .sdg__sor--skala { display: grid; }
  .sdg__ertek { text-align: right; }
}

/* ---------- 06. fejezet: világítás ábrái (AQ–BB) ----------
   Közös: .fa kártya; az SVG-feliratok mobilon nagyobb betűt kapnak, hogy a kicsinyített rajzban is olvashatók legyenek. */
.fa__svg { display: block; width: 100%; max-width: 580px; height: auto; margin: 0 auto; overflow: visible; }
.fa__t { fill: var(--td-szoveg-2, #34423C); font: 700 15px/1 system-ui, sans-serif; }
.fa__t--halvany { fill: var(--td-halk, #6B7A72); }
.fa__t--kicsi { font-weight: 600; }
@media (min-width: 560px) { .fa__t { font-size: 12.5px; } }
.fa__tengely { fill: none; stroke: var(--td-halk, #8C9A93); stroke-width: 1.5; }
.fa__racs { stroke: var(--td-grafikon-racs, #E3E8E4); stroke-width: 1; }
.fa__jelmagyarazat { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 0; list-style: none; font-size: .875rem; font-weight: 700; line-height: 1.4; color: var(--td-szoveg-2, #34423C); }
.fa__jelmagyarazat li { display: flex; align-items: center; gap: 8px; }
.fa__minta { flex: none; width: 24px; height: 4px; border-radius: 2px; background: #34423C; }
.fa__minta--kor { width: 16px; height: 16px; border-radius: 50%; }

/* AQ: spektrum */
.spk__em--1 { fill: var(--td-szoveg-2, #3A3F4A); }
.spk__em--2 { fill: var(--td-halk, #525A66); }
.spk__em--uv { fill: var(--td-lila-szoveg, #54406E); }
.spk__em--ir { fill: var(--td-hiba-szoveg, #5A1E1E); }
.spk__em--3 { fill: var(--td-figyelem-szoveg, #6E5A4A); }
.spk__em--4 { fill: var(--td-figyelem-szoveg, #8A7A66); }
.spk__nagyito { fill: none; stroke: var(--td-halk, #8C9A93); stroke-width: 1.5; stroke-dasharray: 4 3; }
.spk .fa__t { paint-order: stroke; stroke: var(--td-grafikon-racs, #FBFAF6); stroke-width: 5px; stroke-linejoin: round; }
.spk__osztas { stroke: var(--td-szoveg-2, #34423C); stroke-width: 1.5; }
.spk__sav { fill: none; stroke-width: 3; stroke-linejoin: round; }
.spk__sav--par { stroke: var(--td-siker-szoveg, #2F7A4E); }
.spk__sav--epar { stroke: var(--td-hiba-szoveg, #B0412A); stroke-dasharray: 6 4; }
.spk__sav--uva { stroke: var(--td-lila-szoveg, #6A4C9C); }
.spk__sav--tavoli { stroke: var(--td-hiba-szoveg, #8E1B1B); }
.spk__felirat--par { fill: var(--td-siker-szoveg, #2F7A4E); }
.spk__felirat--epar { fill: var(--td-hiba-szoveg, #B0412A); }
.spk__felirat--uva { fill: var(--td-lila-szoveg, #6A4C9C); }
.spk__felirat--tavoli { fill: var(--td-hiba-szoveg, #8E1B1B); }

/* AR: pigmentek */
.pig__gorbe { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pig__gorbe--kla { stroke: var(--td-siker-szoveg, #2E8B57); }
.pig__gorbe--klb { stroke: var(--td-teal-szoveg, #1F9AA6); }
.pig__gorbe--karot { stroke: var(--td-figyelem-szoveg, #E0901A); }
.pig__gorbe--level { stroke: var(--td-szoveg-2, #34423C); stroke-width: 2.5; stroke-dasharray: 7 5; }
.pig__minta--kla { background: #2E8B57; }
.pig__minta--klb { background: #1F9AA6; }
.pig__minta--karot { background: #E0901A; }
.pig__minta--level { background: repeating-linear-gradient(90deg, #34423C 0 7px, transparent 7px 11px); }

/* AS: lumen vagy PAR */
.lpar__par { fill: rgba(47, 122, 78, .1); stroke: var(--td-siker-szoveg, #2F7A4E); stroke-width: 1.5; stroke-dasharray: 5 4; }
.lpar__epar { fill: rgba(176, 65, 42, .08); stroke: var(--td-hiba-szoveg, #B0412A); stroke-width: 1.5; stroke-dasharray: 5 4; }
.lpar__cimke-par { fill: var(--td-siker-szoveg, #2F7A4E); }
.lpar__cimke-epar { fill: var(--td-hiba-szoveg, #B0412A); }
.lpar__csucs { opacity: .78; }
.lpar__csucs--kek { fill: var(--td-info-szoveg, #3B5BD6); }
.lpar__csucs--zold { fill: var(--td-siker-szoveg, #2EAE4A); }
.lpar__csucs--voros { fill: var(--td-hiba-szoveg, #D6341C); }
.lpar__szem { fill: none; stroke: var(--td-szoveg, #1F2A26); stroke-width: 3; stroke-linejoin: round; }
.lpar__minta--szem { background: #1F2A26; }
.lpar__minta--par { height: 12px; border: 1.5px dashed #2F7A4E; background: rgba(47, 122, 78, .18); }
.lpar__minta--rgb { background: linear-gradient(90deg, #3B5BD6 0 33%, #2EAE4A 33% 66%, #D6341C 66%); }

/* AT: fénygörbe */
.fgorbe__veszteseg { fill: rgba(184, 101, 26, .07); }
.fgorbe__nulla { stroke: var(--td-szoveg-2, #34423C); stroke-width: 1.5; }
.fgorbe__gorbe { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.fgorbe__gorbe--arnyektures { stroke: var(--td-siker-szoveg, #2F7A4E); }
.fgorbe__gorbe--fenyigenyes { stroke: var(--td-info-szoveg, #2D5FC4); }
.fgorbe__nev--arnyektures { fill: var(--td-siker-szoveg, #2F7A4E); }
.fgorbe__nev--fenyigenyes { fill: var(--td-info-szoveg, #2D5FC4); }
.fgorbe__komp { stroke: var(--td-felulet, #fff); stroke-width: 2; }
.fgorbe__komp--arnyektures { fill: var(--td-siker-szoveg, #2F7A4E); }
.fgorbe__komp--fenyigenyes { fill: var(--td-info-szoveg, #2D5FC4); }

/* AU: zöld fény a levélben */
.zf__level { fill: #D9EBCB; stroke: var(--td-siker-szoveg, #7FA86A); stroke-width: 1.5; }
.zf__level--also { fill: #CFE3BE; }
.zf__borszovet { fill: var(--td-grafikon-racs, #EEF5E6); stroke: #9BBF86; stroke-width: 1; }
.zf__sejt { stroke: var(--td-siker-szoveg, #7FA86A); stroke-width: 1; }
.zf__sejt--oszlop { fill: #A9CF8E; }
.zf__sejt--szivacs { fill: #BFDDA6; }
.zf__stop--kek { stop-color: var(--td-info-szoveg, #2F5BE0); }
.zf__stop--voros { stop-color: var(--td-hiba-szoveg, #E0341C); }
.zf__stop--zold { stop-color: var(--td-siker-szoveg, #1FA84A); }
.zf__stop--ki { stop-opacity: 0; }
.zf__sugar { opacity: .85; }
.zf__nev--kek { fill: var(--td-info-szoveg, #2F5BE0); }
.zf__nev--voros { fill: var(--td-hiba-szoveg, #C22A14); }
.zf__nev--zold { fill: var(--td-siker-szoveg, #178A3C); }

/* AV: kelvin */
.kelv__sav { stroke: var(--td-grafikon-racs, #D7DDD8); stroke-width: 1; }
.kelv__kiemelt { fill: none; stroke: var(--td-teal-szoveg, #1F4A55); stroke-width: 2.5; }
.kelv__osztas { stroke: var(--td-halk, #6B7A72); stroke-width: 1.5; }
.kelv__elemek { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.kelv__elem { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); font-size: .9375rem; line-height: 1.5; }
.kelv__ertek { grid-row: span 2; font-weight: 800; color: var(--td-teal-szoveg, #1F4A55); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 760px) { .kelv__elemek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* AW: PAR-térkép */
.pterk__kup { fill: rgba(242, 196, 66, .16); }
.pterk__lampa { fill: var(--td-szoveg-2, #2E3D36); }
.pterk__tengely { stroke: var(--td-halk, #6B7A72); stroke-width: 2; stroke-dasharray: 4 4; }
.pterk__sor { stroke: var(--td-grafikon-racs, #E3E8E4); stroke-width: 6; stroke-linecap: round; }
.pterk__kor { stroke: var(--td-felulet, #fff); stroke-width: 3; }
.pterk__kor--alacsony { fill: #BFDDE8; }
.pterk__kor--kozepes { fill: var(--td-info-szoveg, #3F8FB0); }
.pterk__kor--magas { fill: var(--td-teal-szoveg, #1F4A55); }
.pterk__minta--alacsony { background: var(--td-info-halvany, #BFDDE8); }
.pterk__minta--kozepes { background: #3F8FB0; }
.pterk__minta--magas { background: #1F4A55; }
.pterk__szam { font-weight: 800; }
.pterk__szam--alacsony { fill: var(--td-teal-szoveg, #1F4A55); }
.pterk__szam--kozepes, .pterk__szam--magas { fill: var(--td-felulet, #fff); }

/* AX: lámpák fényeloszlása */
.lsz__panelek { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.lsz__panel { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.lsz__cim { margin: 0; font-size: 1.0625rem; font-weight: 800; }
.lsz__svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.lsz__pontok { display: grid; gap: 4px; margin: 0; padding-left: 1.15em; font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
.lsz__kup { fill: rgba(242, 196, 66, .32); }
.lsz__sotet { fill: rgba(31, 42, 38, .14); }
.lsz__lampa { fill: var(--td-szoveg-2, #2E3D36); }
.lsz__kabel { stroke: var(--td-halk, #6B7A72); stroke-width: 1.5; }
.lsz__arnyek { fill: none; stroke: var(--td-siker-szoveg, #4E7A3A); stroke-width: 4; stroke-linecap: round; }
@media (min-width: 760px) { .lsz__panelek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* AY: fotoperiódus */
.fper__sorok { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fper__sor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.fper__sor--sajat { box-shadow: inset 0 0 0 2px var(--sz-bio), var(--shadow-soft); }
.fper__nev { margin: 0; line-height: 1.3; }
.fper__nev strong { display: block; font-size: 1rem; font-weight: 800; }
.fper__nev small { display: block; font-size: .8125rem; font-weight: 600; color: var(--td-halk, var(--aq-muted)); }
.fper__svg { display: block; width: 100%; height: 36px; border-radius: 4px; }
.fper__ej { fill: var(--td-szoveg-2, #243241); }
.fper__racs { stroke: var(--td-grafikon-racs, rgba(255, 255, 255, .18)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fper__feny { fill: var(--td-figyelem-szoveg, #F4C542); }
.fper__ertek { margin: 0; font-size: 1rem; font-weight: 800; color: var(--td-teal-szoveg, #1F4A55); font-variant-numeric: tabular-nums; }
.fper__sor--skala { padding: 0 14px; background: none; box-shadow: none; }
.fper__skala { display: flex; justify-content: space-between; margin: 0; font-size: .8125rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); font-variant-numeric: tabular-nums; }
.fper__skala span { display: flex; justify-content: center; width: 0; white-space: nowrap; }
.fper__skala span:first-child { justify-content: flex-start; }
.fper__skala span:last-child { justify-content: flex-end; }
@media (min-width: 760px) {
  .fper__sor { grid-template-columns: 220px minmax(0, 1fr) 150px; }
  .fper__ertek { text-align: right; }
}

/* AZ: lámpacsatornák */
.fcs__lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fcs__elem { --c: #C9CFCB; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-top: 5px solid var(--c); border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.fcs__elem--feher { --c: #D8DDE6; }
.fcs__elem--voros { --c: #D6341C; }
.fcs__elem--zold { --c: #2EAE4A; }
.fcs__elem--kek { --c: #3B5BD6; }
.fcs__elem--uv { --c: #6A4C9C; border-top-style: dashed; }
.fcs__fej { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 1.0625rem; }
.fcs__folt { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.fcs__cimke { font-size: .8125rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
.fcs__szoveg { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--td-szoveg-2, #34423C); }
.fcs__szint { display: flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
.fcs__sav { flex: 1 1 auto; min-width: 0; height: 8px; border-radius: 4px; }
.fcs__sav-hat { fill: var(--td-grafikon-racs, #EDF1EE); }
.fcs__sav-ertek { fill: var(--c); }
.fcs__elem--feher .fcs__sav-ertek { fill: #9AA6B8; }
@media (min-width: 640px) { .fcs__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fcs__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* BA: idővonal */
.idov__lista { position: relative; display: grid; gap: 14px; margin: 0; padding: 0 0 0 26px; list-style: none; }
.idov__lista::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 7px; width: 3px; border-radius: 2px; background: linear-gradient(#F2A20C, #3F8FB0, #2F7A4E); }
.idov__elem { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.idov__pont { position: absolute; top: 16px; left: -25px; width: 15px; height: 15px; border: 3px solid var(--td-keret, #fff); border-radius: 50%; background: #1F4A55; box-shadow: 0 0 0 1px #C9D3CD; }
.idov__elem p { margin: 0; }
.idov__kor { font-size: .8125rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--td-halk, var(--aq-muted)); }
.idov__cim { font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.idov__mertek { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--td-teal-halvany, #E3F0F2); font-size: .8125rem; font-weight: 800; color: var(--td-teal-szoveg, #1F4A55); }
.idov__szoveg { font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
@media (min-width: 1000px) {
  .idov__lista { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; padding: 26px 0 0; }
  .idov__lista::before { top: 7px; right: 8px; bottom: auto; left: 8px; width: auto; height: 3px; background: linear-gradient(90deg, #F2A20C, #3F8FB0, #2F7A4E); }
  .idov__pont { top: -25px; left: 14px; }
}

/* BB: fény–tápanyag–CO₂ egyensúly */
.egy__helyzetek { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.egy__helyzet { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-top: 5px solid var(--sz-bio); border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.egy__helyzet--rossz { border-top-color: #B8651A; }
.egy__cim { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.egy__jel { display: inline-flex; flex: none; color: var(--sz-bio); }
.egy__helyzet--rossz .egy__jel { color: var(--td-figyelem-szoveg, #B8651A); }
.egy__jel .ikon { width: 22px; height: 22px; }
.egy__svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.egy__alap { stroke: #B9C4BD; stroke-width: 2; }
.egy__oszlop--feny { fill: var(--td-figyelem-szoveg, #F2C542); }
.egy__oszlop--tap { fill: var(--td-info-szoveg, #3F8FB0); }
.egy__oszlop--co2 { fill: var(--td-halk, #8C9A93); }
.egy__szoveg { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
@media (min-width: 760px) { .egy__helyzetek { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 07. fejezet: berendezés ábrái (BD–BJ) — a 06-os .fa kártyával és a 05-ös tech__* rajzelemekkel ---------- */

/* BD: talajvastagság és lejtés */
.tmsz__talaj { fill: #C9B38C; stroke: var(--td-figyelem-szoveg, #8B6A45); stroke-width: 1.5; }
.tmsz__gyoker { fill: none; stroke: var(--td-figyelem-szoveg, #9C7B52); stroke-width: 1.6; stroke-linecap: round; }
.tmsz__min { stroke: var(--td-figyelem-szoveg, #6B4F2E); stroke-width: 1.5; stroke-dasharray: 6 4; }
.tmsz__min-t { fill: var(--td-figyelem-szoveg, #6B4F2E); }

/* BE: szemcseméret */
.szemcse__panelek { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.szemcse__panel { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; border-top: 5px solid #B8651A; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.szemcse__panel--jo { border-top-color: var(--sz-bio); }
.szemcse__panel p { margin: 0; }
.szemcse__svg { display: block; width: 100%; height: auto; border-radius: 6px; }
.szemcse__viz { fill: rgba(63, 143, 176, .12); }
.szemcse__szem { fill: #D8C7A4; stroke: var(--td-figyelem-szoveg, #A88B5E); stroke-width: .8; }
.szemcse__kosz { fill: var(--td-figyelem-szoveg, #5E4A33); }
.szemcse__meret { font-size: 1.25rem; font-weight: 800; color: var(--td-teal-szoveg, #1F4A55); font-variant-numeric: tabular-nums; }
.szemcse__cim { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.szemcse__cim .ikon { flex: none; width: 20px; height: 20px; color: var(--td-figyelem-szoveg, #B8651A); }
.szemcse__panel--jo .szemcse__cim .ikon { color: var(--sz-bio); }
.szemcse__szoveg { font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
@media (min-width: 760px) { .szemcse__panelek { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* BF: táptalaj rétegrend */
.tapt__fedo { fill: var(--td-szoveg-2, #4A3B2E); }
.tapt__tasak { fill: var(--td-figyelem-szoveg, #9C6B3A); stroke: #E8D7B8; stroke-width: 1.5; stroke-dasharray: 3 2; }
.tapt__halo { stroke: #E8D7B8; stroke-width: 1; stroke-dasharray: 2 3; }
.tapt__tasak-t { fill: var(--td-figyelem-szoveg, #7A4E22); }
.tapt__meret { fill: none; stroke: #F1E6D2; stroke-width: 1.5; }
.tapt__vilagos { fill: var(--td-grafikon-racs, #F7F1E6); }

/* BG: dekoráció-biztonsági ellenőrzőlista */
.dcs__lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: dcs; }
.dcs__elem { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.dcs__elem p { margin: 0; }
.dcs__kerdes { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; line-height: 1.3; }
.dcs__ikon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--td-felulet-2, #F3F6F2); color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.dcs__ikon .ikon { width: 22px; height: 22px; }
.dcs__sor { display: flex; gap: 8px; font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
.dcs__sor .ikon { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.dcs__sor--mehet .ikon { color: var(--sz-bio); }
.dcs__sor--nem .ikon { color: var(--td-figyelem-szoveg, #B8651A); }
@media (min-width: 760px) { .dcs__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .dcs__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* BH: előtér / középtér / háttér */
.nret__rajzok { display: grid; gap: 14px; }
.nret__rajz { padding: 12px 14px 14px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.nret__nezet { margin: 0 0 6px; font-size: .8125rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--td-halk, var(--aq-muted)); }
.nret__svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.nret__szar { fill: none; stroke-linecap: round; }
.nret__szar--hatter { stroke: var(--td-siker-szoveg, #2F6B45); stroke-width: 4; }
.nret__bokor { fill: var(--td-siker-szoveg, #4E9A5E); stroke: var(--td-siker-szoveg, #3B7A49); stroke-width: 1.5; }
.nret__gyep { fill: var(--td-siker-szoveg, #9CCB6A); stroke: var(--td-siker-szoveg, #7FB052); stroke-width: 1; }
.nret__sav--hatter { fill: var(--td-siker-szoveg, rgba(47, 107, 69, .55)); }
.nret__sav--kozep { fill: rgba(78, 154, 94, .4); }
.nret__sav--eloter { fill: rgba(156, 203, 106, .45); }
.nret__t { fill: var(--td-szoveg, #1F2A26); }
.nret__lista { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.nret__elem { display: grid; gap: 2px; padding: 12px 14px 12px 18px; border-left: 6px solid #2F6B45; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); font-size: .9375rem; line-height: 1.5; }
.nret__elem--kozep { border-left-color: #4E9A5E; }
.nret__elem--eloter { border-left-color: #9CCB6A; }
@media (min-width: 760px) { .nret__rajzok { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nret__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* BI: úszótér vagy dekoráció (a panelek az AX .lsz__* szabályait használják) */
.zsuf__targy { fill: var(--td-halk, #8C8C8C); stroke: var(--td-halk, #6B6B6B); stroke-width: 1; }
.zsuf__giccs { fill: var(--td-lila-szoveg, #E0569B); }
.zsuf__ko { fill: var(--td-halk, #8E9690); }
.zsuf__panel--zsufolt .lsz__cim .ikon { color: var(--td-figyelem-szoveg, #B8651A); }
.zsuf__panel--jo .lsz__cim .ikon { color: var(--sz-bio); }
.lsz__cim .ikon { display: inline-block; width: 20px; height: 20px; vertical-align: -3px; }

/* BJ: berendezési sorrend */
.sorr__lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sorr__lepes { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.sorr__lepes p { margin: 0; }
.sorr__fej { display: flex; align-items: center; justify-content: space-between; }
.sorr__szam { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #1F4A55; color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.sorr__ikon { color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.sorr__ikon .ikon { width: 24px; height: 24px; }
.sorr__cim { font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.sorr__szoveg { font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
@media (min-width: 640px) { .sorr__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sorr__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 08. fejezet: üzemeltetés ábrái (BL–BO) ---------- */

/* BL: vízcsere vagy párolgás (a panelek az AX .lsz__* szabályait használják) */
.vcsp__potty, .vcsp__minta { fill: #B8651A; background: #B8651A; }
.vcsp__potty--ki { opacity: .7; }
.vcsp__tomlo { fill: none; stroke: var(--td-halk, #8FA79D); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.vcsp__friss { stroke: var(--sz-viz); stroke-width: 4; stroke-linecap: round; }
.vcsp__friss-hegy { fill: var(--sz-viz); }
.vcsp__goz { fill: none; stroke: #9FB3AC; stroke-width: 2.5; stroke-linecap: round; }
.vcsp__eredeti { fill: none; stroke: var(--td-halk, #6B7A72); stroke-width: 1.5; stroke-dasharray: 5 4; }
.vcsp__halvany { fill: var(--td-halk, #6B7A72); }

/* BM: ok-okozati lánc */
.lanc__lista { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.lanc__elem { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-top: 5px solid #8B6A45; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.lanc__elem + .lanc__elem::before { content: "↓"; position: absolute; top: -27px; left: 50%; transform: translateX(-50%); font-size: 1.25rem; font-weight: 800; color: var(--td-halk, var(--aq-muted)); }
.lanc__elem--vege { border-top-color: var(--sz-viz); background: var(--td-felulet-2, #F1F8FB); }
.lanc__cim { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.lanc__ikon { display: inline-flex; flex: none; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.lanc__ikon .ikon { width: 22px; height: 22px; }
.lanc__pontok { display: grid; gap: 4px; margin: 0; padding-left: 1.15em; font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
@media (min-width: 1000px) {
  .lanc__lista { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 30px; }
  .lanc__elem + .lanc__elem::before { content: "→"; top: 50%; left: -24px; transform: translateY(-50%); }
}

/* BN: öregvíz-szindróma */
.oreg__veszely { fill: rgba(184, 101, 26, .07); }
.oreg__csuszas { fill: none; stroke: var(--td-figyelem-szoveg, #8B6A45); stroke-width: 3.5; stroke-linecap: round; }
.oreg__sokk { stroke: var(--td-hiba-szoveg, #B03A2E); stroke-width: 3.5; }
.oreg__sokk-hegy { fill: var(--td-hiba-szoveg, #B03A2E); }
.oreg__lepcso { fill: none; stroke: var(--sz-bio); stroke-width: 3.5; stroke-dasharray: 7 4; stroke-linejoin: round; }
.oreg__t--sokk { fill: var(--td-hiba-szoveg, #B03A2E); }
.oreg__t--lepcso { fill: var(--td-siker-szoveg, #2F6B45); }

/* BO: gázcsere */
.gcs__hullam { fill: none; stroke: var(--sz-viz); stroke-width: 2.5; }
.gcs__ko { fill: var(--td-info-szoveg, #5E8FA3); }
.gcs__kabel { stroke: var(--td-halk, #6B7A72); stroke-width: 2; stroke-dasharray: 3 3; }
.gcs__buborek { fill: var(--td-grafikon-racs, rgba(255, 255, 255, .7)); stroke: var(--td-info-szoveg, #7FA3B3); stroke-width: 1.5; }
.gcs__aram { fill: none; stroke: var(--sz-viz); stroke-width: 2.5; stroke-dasharray: 8 5; stroke-linecap: round; }
.gcs__hegy { fill: var(--sz-viz); }
.gcs__o2 { stroke: var(--td-siker-szoveg, #2F7A4E); stroke-width: 3; }
.gcs__o2-hegy { fill: var(--td-siker-szoveg, #2F7A4E); }
.gcs__co2 { stroke: var(--td-figyelem-szoveg, #8B6A45); stroke-width: 3; }
.gcs__co2-hegy { fill: var(--td-figyelem-szoveg, #8B6A45); }
.gcs__t--o2 { fill: var(--td-siker-szoveg, #2F7A4E); }
.gcs__t--co2 { fill: var(--td-figyelem-szoveg, #8B6A45); }

/* ---------- 09. fejezet: növénytápok ábrái (BQ–BW) ---------- */

/* BQ: fény–CO₂–táp háromszög */
.har__racs { display: grid; gap: 18px; align-items: center; }
.har__svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.har__el { fill: rgba(47, 122, 78, .06); stroke: #9FB3AC; stroke-width: 3; stroke-dasharray: 8 6; stroke-linejoin: round; }
.har__noveny { fill: none; stroke: var(--sz-bio); stroke-width: 4; stroke-linecap: round; }
.har__kozep { fill: var(--td-siker-szoveg, #2F6B45); }
.har__csucs { stroke: var(--td-felulet, #fff); stroke-width: 4; }
.har__csucs--feny { fill: var(--td-figyelem-szoveg, #F2C542); }
.har__csucs--szen { fill: var(--td-halk, #8C9A93); }
.har__csucs--tap { fill: var(--td-info-szoveg, #3F8FB0); }
.har__csucs-t { fill: var(--td-szoveg, #1F2A26); font-weight: 800; }
.har__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.har__elem { display: grid; gap: 2px; padding: 12px 14px 12px 18px; border-left: 6px solid #F2C542; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); font-size: .9375rem; line-height: 1.5; }
.har__elem--szen { border-left-color: #8C9A93; }
.har__elem--tap { border-left-color: #3F8FB0; }
@media (min-width: 900px) { .har__racs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* BR: tápanyagcsoportok */
.tcs__lista { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.tcs__csoport { --c: #2F7A4E; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; border-top: 5px solid var(--c); border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.tcs__csoport--masodlagos { --c: #8B6A45; }
.tcs__csoport--mikro { --c: #3F8FB0; }
.tcs__csoport p { margin: 0; }
.tcs__cim { font-size: 1.0625rem; font-weight: 800; line-height: 1.25; }
.tcs__cim small { display: block; font-size: .8125rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
.tcs__elemek { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tcs__elem { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; background: var(--td-felulet-2, #F3F6F2); font-size: .875rem; font-weight: 700; }
.tcs__vegyjel { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 99px; background: var(--c); color: #fff; font-weight: 800; }
.tcs__szoveg { font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
@media (min-width: 900px) { .tcs__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* BS: gyökértáp vagy vízoszlop (panelek: .lsz__*) */
.gyv__talaj { fill: var(--td-szoveg-2, #4A3B2E); }
.gyv__tabletta { fill: #D8B26A; stroke: var(--td-figyelem-szoveg, #8B6A45); stroke-width: 1.5; }
.gyv__gyoker { fill: none; stroke: #E8D7B8; stroke-width: 2; stroke-linecap: round; }
.gyv__level { fill: var(--td-siker-szoveg, #4E9A5E); }
.gyv__nyil { fill: none; stroke: var(--td-figyelem-szoveg, #F2C542); stroke-width: 3; stroke-linecap: round; }
.gyv__hegy { fill: var(--td-figyelem-szoveg, #F2C542); }
.gyv__csepp { fill: var(--td-info-szoveg, #3F8FB0); opacity: .75; }

/* BT: mit ad a táp, mit ad az akvárium? */
.tmg__helyzetek { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.tmg__helyzet { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.tmg__cim { margin: 0; line-height: 1.3; }
.tmg__cim strong { display: block; font-size: 1.0625rem; }
.tmg__cim small { display: block; font-size: .8125rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
.tmg__sorok { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tmg__sor { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 84px; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 6px; background: var(--td-felulet-2, #F3F6F2); font-size: .875rem; }
.tmg__sor--hiany { background: var(--mk-hiba-bg, rgba(168, 67, 46, .11)); }
.tmg__elem { font-weight: 800; }
.tmg__forras { padding: 2px 8px; border-radius: 99px; background: var(--td-felulet, #fff); color: #A5B0AA; font-size: .75rem; font-weight: 800; text-decoration: line-through; }
.tmg__forras--van { background: var(--td-siker-halvany, #DDEEE2); color: var(--td-siker-szoveg, #2F6B45); text-decoration: none; }
.tmg__eredmeny { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--td-siker-szoveg, #2F6B45); }
.tmg__eredmeny .ikon { width: 16px; height: 16px; }
.tmg__sor--hiany .tmg__eredmeny { color: var(--td-hiba-szoveg, #86301F); }
@media (min-width: 760px) { .tmg__helyzetek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* BU: pH és felvehetőség */
.phf__zona { fill: rgba(47, 122, 78, .08); stroke: rgba(47, 122, 78, .35); stroke-dasharray: 4 4; }
.phf__sav { fill: var(--td-info-szoveg, #3F8FB0); opacity: .8; }
.phf__sav--makro { fill: var(--td-siker-szoveg, #2F7A4E); }
.phf__sav--masodlagos { fill: var(--td-figyelem-szoveg, #8B6A45); }
.phf__sav--mikro { fill: var(--td-info-szoveg, #3F8FB0); }

/* BV: kelát (panelek: .lsz__*) */
.kel__fe { fill: var(--td-figyelem-szoveg, #B8651A); stroke: var(--td-felulet, #fff); stroke-width: 2; }
.kel__fe-t { fill: var(--td-felulet, #fff); font: 800 11px/1 system-ui, sans-serif; }
.kel__karom { fill: none; stroke: var(--td-lila-szoveg, #6A4C9C); stroke-width: 5; stroke-linecap: round; }
.kel__nyil { fill: none; stroke: var(--td-halk, #6B7A72); stroke-width: 2.5; stroke-dasharray: 5 4; }
.kel__hegy { fill: var(--td-halk, #6B7A72); }
.kel__rozsda { fill: var(--td-figyelem-szoveg, #9C5A2E); }
.kel__rozsda-t { fill: var(--td-figyelem-szoveg, #7A3E16); }

/* BW: egyszerű táblázat */
.tbl__keret { overflow-x: auto; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.tbl__tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.tbl__tabla th { padding: 10px 14px; background: #1F4A55; color: #fff; font-weight: 800; text-align: center; }
.tbl__tabla td { padding: 8px 14px; border-top: 1px solid var(--td-keret, var(--aq-line)); text-align: center; }
.tbl__kiemelt td { background: rgba(63, 143, 176, .12); font-weight: 800; }

/* ---------- 10. fejezet: tesztek ábrái (CD–CI) ---------- */

/* CD: amit látsz, és amit csak mérni tudsz */
.lth__racs { display: grid; gap: 16px; }
.lth__oldal { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.lth__oldal--rejtett { background: #1F4A55; color: #fff; }
.lth__fej { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.0625rem; font-weight: 800; }
.lth__fej .ikon { width: 22px; height: 22px; }
.lth__svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.lth__viz { fill: rgba(63, 143, 176, .08); }
.lth__talaj { fill: #C9B28E; }
.lth__hal { fill: var(--td-figyelem-szoveg, #E0873A); }
.lth__hal--2 { fill: var(--td-teal-szoveg, #3C948D); }
.lth__kerdes circle { fill: rgba(31, 74, 85, .12); stroke: var(--td-teal-szoveg, #1F4A55); stroke-width: 1.5; stroke-dasharray: 3 3; }
.lth__kerdes text { fill: var(--td-teal-szoveg, #1F4A55); font: 800 16px/1 system-ui, sans-serif; }
.lth__t { fill: var(--td-siker-szoveg, #2F6B45); }
.lth__lathato { display: grid; gap: 4px; margin: 0; padding-left: 1.15em; font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
.lth__rejtett { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lth__elem { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .86); }
.lth__elem strong { color: #fff; }
.lth__jel { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 2px 6px; border-radius: 8px; background: var(--td-teal-attetszo, rgba(159, 211, 201, .18)); color: var(--aq-accent-vilagos); font-weight: 800; font-size: .875rem; text-align: center; }
@media (min-width: 900px) { .lth__racs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

/* CE: GH és KH cseppszámlálással (panelek: .lsz__*) */
.ghk__pohar { fill: var(--td-grafikon-racs, rgba(255, 255, 255, .6)); stroke: #9FB3AC; stroke-width: 2.5; }
.ghk__veg { fill: none; stroke: var(--td-teal-szoveg, #1F4A55); stroke-width: 2.5; stroke-dasharray: 5 4; }
.ghk__nyil { fill: none; stroke: var(--td-halk, #8C9A93); stroke-width: 2.5; }
.ghk__hegy { fill: var(--td-halk, #8C9A93); }

/* CF: színleolvasás */
.szl__racs { display: grid; gap: 16px; }
.szl__resz { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.szl__fej { margin: 0; font-size: 1.0625rem; font-weight: 800; }
.szl__fenyek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; text-align: center; }
.szl__feny { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: var(--radius-sm); background: var(--td-felulet-2, #F3F6F2); font-size: .875rem; line-height: 1.3; }
.szl__feny small { color: var(--td-halk, var(--aq-muted)); font-size: .8125rem; }
.szl__kuvetta, .sts__svg { display: block; width: 52px; height: auto; }
.szl__uveg { fill: none; stroke: var(--td-halk, #8C9A93); stroke-width: 2.5; }
.szl__skala { display: grid; gap: 4px; }
.szl__skala-cim { margin: 0; font-size: .9375rem; font-weight: 800; }
.szl__svg { max-width: 420px; margin: 0; }
.szl__minta { stroke: var(--td-szoveg, #1F2A26); stroke-width: 1.5; }
.szl__jelolo { stroke: var(--td-szoveg, #1F2A26); stroke-width: 2; }
.szl__megjegyzes { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--td-halk, var(--aq-muted)); }
@media (min-width: 900px) { .szl__racs { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

/* CG: standard oldatos ellenőrzés */
.sts__lepesek { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: none; }
.sts__lepes { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); font-size: .9375rem; line-height: 1.45; }
.sts__lepes > span:last-child { grid-column: 1 / -1; color: var(--td-szoveg-2, #34423C); }
.sts__szam { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #1F4A55; color: #fff; font-weight: 800; font-size: .875rem; }
.sts__ikon .ikon { width: 22px; height: 22px; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.sts__fiolak { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; padding: 14px; border-radius: var(--radius-md); background: var(--td-felulet-2, #F3F6F2); list-style: none; }
.sts__fiola { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: .875rem; line-height: 1.35; }
.sts__ismert strong { font-size: 1.0625rem; }
.sts__mert { color: var(--td-halk, var(--aq-muted)); font-style: italic; }
@media (min-width: 1000px) {
  .sts__lepesek { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sts__lepes { align-content: start; }
}

/* CH: pontosság, ismételhetőség, felbontás */
.clt__panelek { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.clt__panel { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 14px; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.clt__svg { display: block; width: 100%; max-width: 170px; height: auto; margin: 0 auto 4px; overflow: visible; }
.clt__kor { fill: var(--td-grafikon-racs, #F3F6F2); stroke: #C9D3CD; stroke-width: 2; }
.clt__kor--belso { fill: var(--td-grafikon-racs, #E4EEE8); }
.clt__kozep { fill: var(--td-siker-szoveg, #2F7A4E); }
.clt__potty { fill: var(--td-figyelem-szoveg, #B8651A); stroke: var(--td-felulet, #fff); stroke-width: 2; }
.clt__jel { stroke: var(--td-szoveg-2, #34423C); stroke-width: 2; }
.clt__minta { fill: var(--td-figyelem-szoveg, #B8651A); }
.clt__cim { margin: 0; font-size: 1.0625rem; font-weight: 800; }
.clt__szoveg { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }

/* CI: standard oldatos mérési grafikon */
.mgr__racs { display: grid; gap: 16px; align-items: start; }
.mgr__svg { max-width: 520px; }
.mgr__ideal { fill: none; stroke: var(--td-szoveg, #1F2A26); stroke-width: 2; stroke-dasharray: 6 5; }
.mgr__ideal-t { fill: var(--td-szoveg, #1F2A26); }
.mgr__s { --c: #2F7A4E; fill: var(--c); stroke: var(--td-felulet, #fff); stroke-width: 1.5; }
.mgr__s--1 { --c: #3F8FB0; }
.mgr__s--2 { --c: #B8651A; }
.mgr__s--3 { --c: #6A4C9C; }
.mgr__s--4 { --c: #A8432E; }
.mgr__s--5 { --c: #1F4A55; }
.mgr__sav { fill: none; stroke: var(--c); stroke-width: 4; stroke-linecap: round; opacity: .45; }
.mgr__x { fill: none; stroke: var(--c); stroke-width: 3; }
.mgr__jelmagyarazat { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mgr__jm { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); font-size: .9375rem; line-height: 1.45; color: var(--td-szoveg-2, #34423C); stroke-width: 1; }
.mgr__jm svg { width: 22px; height: 22px; margin-top: 1px; overflow: visible; fill: var(--c, var(--td-siker-szoveg, #2F7A4E)); stroke: var(--td-felulet, #fff); stroke-width: 1.5; }
.mgr__jm--ideal svg { fill: none; }
.mgr__jm strong { color: var(--td-szoveg, #1F2A26); }
.mgr__szamok { margin-top: 14px; }
.mgr__szamok summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 800; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.mgr__szamok .tbl__tabla th[scope="row"] { background: var(--td-felulet-2, #F3F6F2); color: var(--td-szoveg, #1F2A26); }
@media (min-width: 1000px) { .mgr__racs { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

/* CJ: „Milyen tesztet vegyek elő?” döntési segéd (a .mk kereten belül) */
.tv [hidden] { display: none !important; }
.tv__urlap { display: grid; gap: 14px; padding: clamp(14px, 2.2vw, 24px); }
.tv__valasztas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.tv__legend { margin: 0 0 10px; padding: 0; color: var(--td-szoveg, #1F2A26); font-size: 1rem; font-weight: 800; }
.tv__opcio { position: relative; display: flex; }
.tv__opcio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tv__kartya { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 2px solid transparent; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); color: var(--td-szoveg, #1F2A26); line-height: 1.3; }
.tv__ikon .ikon { width: 26px; height: 26px; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.tv__nev { display: grid; gap: 2px; }
.tv__nev small { font-size: .8125rem; color: var(--td-halk, var(--aq-muted)); font-weight: 600; }
.tv__opcio input:checked + .tv__kartya { border-color: var(--aq-accent-sotet); background: var(--td-teal-halvany, #E6F3F0); box-shadow: 0 0 0 3px rgba(60, 148, 141, .18); }
.tv__opcio input:focus-visible + .tv__kartya { outline: 3px solid var(--aq-accent); outline-offset: 2px; }
.tv__eredmenyek { display: grid; gap: 12px; margin: 0 clamp(14px, 2.2vw, 24px) clamp(14px, 2.2vw, 24px); padding: 18px; border-radius: var(--radius-lg); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.tv__ures { display: flex; gap: 10px; align-items: center; color: var(--td-halk, var(--aq-muted)); font-weight: 600; }
.tv__ures .ikon { flex: none; width: 22px; height: 22px; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.tv__panel { display: grid; gap: 12px; }
.tv__panel-cim { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 800; color: var(--td-szoveg, #1F2A26); }
.tv__panel-cim .ikon { flex: none; width: 26px; height: 26px; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.tv__parameterek { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tv__parameter { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--td-felulet-2, #F3F6F2); font-size: .9375rem; line-height: 1.45; color: var(--td-szoveg-2, #34423C); }
.tv__jel { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 2px 6px; border-radius: 8px; background: #1F4A55; color: #fff; font-weight: 800; font-size: .875rem; text-align: center; }
.tv__olvass { font-size: .9375rem; line-height: 1.6; }
.tv__nem-diagnozis { margin: 0; padding-top: 10px; border-top: 1px solid var(--td-keret, var(--aq-line)); font-size: .875rem; line-height: 1.5; color: var(--td-halk, var(--aq-muted)); }
@media (min-width: 1000px) { .tv__parameterek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Akvárium indítása: ábrák és ellenőrzőlista (CK–CO) ---------- */

/* CK: növényátállás (panelek: .lsz__*) */
.atl__level { fill: var(--td-siker-szoveg, #6E9A3E); }
.atl__olvado { fill: var(--td-figyelem-szoveg, #B7A36A); opacity: .75; }
.atl__uj { fill: var(--td-siker-szoveg, #4E9A5E); }
.atl__halvany { fill: var(--td-figyelem-szoveg, #7A6A45); }
@media (min-width: 1000px) { .atl__panelek { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* CL: indulási jelenségek */
.jlz__racs { display: grid; gap: 16px; }
.jlz__oszlop { --c: #2F7A4E; padding: 16px 18px 18px; border-top: 5px solid var(--c); border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.jlz__oszlop--figyelj { --c: #B8651A; }
.jlz__fej { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.0625rem; font-weight: 800; }
.jlz__fej .ikon { flex: none; width: 24px; height: 24px; color: var(--c); }
.jlz__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.jlz__lista li { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--td-felulet-2, #F3F6F2); font-size: .9375rem; line-height: 1.45; color: var(--td-szoveg-2, #34423C); }
.jlz__oszlop--figyelj .jlz__lista li { background: var(--td-figyelem-halvany, #FFF4E5); }
.jlz__lista strong { color: var(--td-szoveg, #1F2A26); }
@media (min-width: 900px) { .jlz__racs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* CM: fotós idővonal */
.fiv__lista { position: relative; display: grid; gap: 18px; margin: 0; padding: 0 0 0 26px; list-style: none; }
.fiv__lista::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(#3C948D, #2F7A4E); }
.fiv__elem { position: relative; display: grid; gap: 6px; }
.fiv__elem::before { content: ""; position: absolute; left: -25px; top: 6px; width: 15px; height: 15px; border: 3px solid var(--td-keret, #fff); border-radius: 50%; background: #3C948D; box-shadow: 0 0 0 2px #3C948D; }
.fiv__kep { order: 3; overflow: hidden; border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); }
.fiv__kep img { display: block; width: 100%; height: auto; }
.fiv__ido { order: 1; margin: 0; font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.fiv__cim { order: 2; margin: 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.fiv__szoveg { order: 4; margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
@media (min-width: 700px) {
  .fiv__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 0; }
  .fiv__lista::before, .fiv__elem::before { display: none; }
  .fiv__elem { padding-top: 14px; border-top: 3px solid #3C948D; }
}
@media (min-width: 1200px) { .fiv__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* CO: indítási mód */
.imd__kerdes { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 16px; border-radius: var(--radius-sm); background: #1F4A55; color: #fff; font-weight: 800; }
.imd__kerdes .ikon { flex: none; width: 22px; height: 22px; color: var(--aq-accent-vilagos); }
.imd__agak { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.imd__ag { --c: #2F7A4E; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; border-top: 5px solid var(--c); border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.imd__ag--aktiv { --c: #8B6A45; }
.imd__ag--nelkul { --c: #3F8FB0; }
.imd__fej { display: flex; align-items: center; gap: 12px; margin: 0; line-height: 1.3; }
.imd__fej strong { display: block; font-size: 1.0625rem; }
.imd__fej small { display: block; font-size: .8125rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
.imd__ikon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, var(--td-felulet, #fff)); }
.imd__ikon .ikon { width: 22px; height: 22px; color: var(--c); }
.imd__lepesek { display: grid; gap: 6px; margin: 0; padding-left: 1.3em; font-size: .9375rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
.imd__figyelj { display: flex; gap: 8px; margin: auto 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--td-figyelem-halvany, #FFF4E5); font-size: .875rem; line-height: 1.5; color: var(--td-figyelem-szoveg, #7A4A12); }
.imd__figyelj .ikon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--td-figyelem-szoveg, #B8651A); }
@media (min-width: 1000px) { .imd__agak { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* CN: akváriumindítási ellenőrzőlista (a .mk kereten belül) */
.il [hidden] { display: none !important; }
.il__torzs { display: grid; gap: 16px; padding: clamp(14px, 2.2vw, 24px); }
.il__haladas { position: sticky; top: calc(var(--fejlec-magassag) + 8px); z-index: 2; display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.il__haladas-cimke { font-weight: 800; color: var(--td-szoveg, #1F2A26); }
.il__sav { width: 100%; height: 14px; border: 0; border-radius: 99px; background: var(--td-felulet-2, #E4EBE6); overflow: hidden; -webkit-appearance: none; appearance: none; }
.il__sav::-webkit-progress-bar { border-radius: 99px; background: var(--td-felulet-2, #E4EBE6); }
.il__sav::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, #3C948D, #2F7A4E); }
.il__sav::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg, #3C948D, #2F7A4E); }
.il__csoport { min-width: 0; margin: 0; padding: 14px 16px 16px; border: 0; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.il__csoport-cim { float: left; width: 100%; padding: 0; margin: 0 0 8px; font-size: 1.0625rem; font-weight: 800; color: var(--td-szoveg, #1F2A26); }
.il__lista { clear: both; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.il__lepes { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 6px; border-radius: 8px; cursor: pointer; font-size: .9375rem; line-height: 1.45; color: var(--td-szoveg-2, #34423C); }
.il__lepes:hover { background: var(--td-felulet-2, #F3F6F2); }
.il__lepes input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer; }
.il__jel { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border: 2px solid #9FB3AC; border-radius: 7px; background: var(--td-felulet, #fff); color: transparent; }
.il__jel .ikon { width: 18px; height: 18px; stroke-width: 3; }
.il__lepes input:checked + .il__jel { border-color: #2F7A4E; background: #2F7A4E; color: #fff; }
.il__lepes input:checked ~ .il__szoveg { color: var(--td-halk, var(--aq-muted)); text-decoration: line-through; text-decoration-color: var(--td-siker-szoveg, rgba(47, 122, 78, .5)); }
.il__lepes input:focus-visible + .il__jel { outline: 3px solid var(--aq-accent); outline-offset: 2px; }
.il__lab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.il__megjegyzes { margin: 0; font-size: .875rem; color: var(--td-halk, var(--aq-muted)); }
@media (min-width: 1000px) { .il__torzs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .il__haladas, .il__kesz, .il__lab { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: no-preference) { .il__jel { transition: background .15s ease, border-color .15s ease; } }

/* Színskála (pl. DropChecker): színes minta + név + jelentés */
.szsk__lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.szsk__elem { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.szsk__elem strong { font-size: 1.0625rem; }
.szsk__elem span:last-child { grid-column: 2; font-size: .9375rem; color: var(--td-szoveg-2, #34423C); }
.szsk__minta { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), 0 2px 8px rgba(13, 26, 23, .18); }
.szsk__elem--kek .szsk__minta { background: #2F6FB5; }
.szsk__elem--zold .szsk__minta { background: #3E9B4F; }
.szsk__elem--sarga .szsk__minta { background: #E3C12B; }
@media (min-width: 760px) { .szsk__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Blog: „Mindent a pH-ról” ábrái (phskala, phlepcso, ammoniaarany, phsavok, phnapi, co2tabla) ---------- */
.nh3, .phsv, .ctb {
  clear: both; margin: var(--blokk-ter) 0; padding: clamp(20px, 3vw, 36px);
  border-radius: var(--radius-lg); background: var(--td-felulet-2, #FBFAF6); box-shadow: var(--shadow-card);
}
.nh3 figcaption, .phsv figcaption, .ctb figcaption {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--td-keret, var(--aq-line)); font-size: .9375rem; line-height: 1.6; color: var(--td-halk, var(--aq-muted));
}

/* pH-skála */
.phsk__ikon { fill: none; stroke: var(--td-teal-szoveg, #1F4A55); stroke-width: 2; }
.phsk__ikon--tele { fill: rgba(52, 122, 145, .14); }
.phsk__jelolo { fill: var(--td-szoveg, #1F2A26); }
.phsk__osztas { stroke: var(--td-halk, #8C9A93); stroke-width: 1.5; }
.phsk__sav { fill: none; stroke: var(--td-siker-szoveg, #2F7A4E); stroke-width: 2.5; }
.phsk__sav-t { fill: var(--td-siker-szoveg, #2F7A4E); }

/* Logaritmikus lépcső */
.phl__oszlop--0 { fill: #4FA559; }
.phl__oszlop--1 { fill: #A5B83C; }
.phl__oszlop--2 { fill: #E0A23A; }
.phl__oszlop--3 { fill: #D9583A; }
.phl__szorzo { fill: var(--td-szoveg, #1F2A26); font-weight: 800; }

/* NH₃-arány két hőmérsékleten */
.nh3 { --c0: #E0A23A; --c1: #A8432E; }
.nh3__jelmagyarazat { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 18px; padding: 0; list-style: none; font-size: .9375rem; font-weight: 700; }
.nh3__jel { display: flex; align-items: center; gap: 10px; }
.nh3__jel::before { content: ""; flex: none; width: 22px; height: 12px; border-radius: 3px; background: var(--c); }
.nh3__jel--0 { --c: var(--c0); }
.nh3__jel--1 { --c: var(--c1); }
.nh3__lista { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.nh3__sor { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); align-items: center; gap: 12px; }
.nh3__cimke { font-size: .9375rem; font-weight: 800; }
.nh3__savok { display: grid; gap: 4px; }
.nh3__sav-sor { display: grid; grid-template-columns: minmax(0, 1fr) 4.2em; align-items: center; gap: 10px; }
.nh3__svg { display: block; width: 100%; height: 16px; border-radius: 4px; overflow: hidden; }
.nh3__hatter { fill: rgba(13, 26, 23, .07); }
.nh3__sav--0 { fill: var(--c0); }
.nh3__sav--1 { fill: var(--c1); }
.nh3__ertek { font-size: .9375rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; color: var(--td-szoveg, var(--aq-text)); }

/* pH-sávok */
.phsv__lista { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.phsv__sor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.phsv__nev { font-size: .9375rem; font-weight: 700; line-height: 1.35; }
.phsv__nev small { font-weight: 600; color: var(--td-halk, var(--aq-muted)); }
.phsv__ertek { font-size: .9375rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--td-szoveg-2, #34423C); }
.phsv__svg { grid-column: 1 / -1; display: block; width: 100%; height: 18px; border-radius: 5px; overflow: hidden; }
.phsv__hatter { fill: rgba(13, 26, 23, .06); }
.phsv__sav--savas { fill: #E0A23A; }
.phsv__sav--semleges { fill: #4FA559; }
.phsv__sav--lugos { fill: #2F86A6; }
.phsv__sav--tengeri { fill: #3D5A98; }
.phsv__semleges { stroke: var(--td-szoveg, #1F2A26); stroke-width: 1.5; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.phsv__sor--tengely { margin-top: -4px; }
.phsv__tengely { grid-column: 1 / -1; display: block; width: 100%; height: auto; overflow: visible; }
.phsv__tengely-cim { margin: 6px 0 0; font-size: .8125rem; font-weight: 700; color: var(--td-halk, var(--aq-muted)); }
@media (min-width: 760px) {
  .phsv__sor { grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 6.5em; align-items: center; }
  .phsv__svg, .phsv__tengely { grid-column: 2; grid-row: 1; }
  .phsv__ertek { text-align: right; }
}

/* Napi pH-görbe */
.phn__feny { fill: rgba(233, 190, 60, .14); }
.phn__feny-t { fill: var(--td-figyelem-szoveg, #8B6A45); }
.phn__gorbe { fill: none; stroke: var(--kat-viz); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.phn__pont { stroke: var(--td-felulet, #fff); stroke-width: 2; }
.phn__pont--also { fill: #E0A23A; }
.phn__pont--felso { fill: var(--kat-viz); }
.phn__t--also { fill: var(--td-figyelem-szoveg, #7A420F); }
.phn__t--felso { fill: var(--td-teal-szoveg, #1F4A55); }

/* pH–KH–CO₂ táblázat */
.ctb__gorgeto { overflow-x: auto; border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.ctb__gorgeto:focus-visible { outline: 3px solid var(--aq-accent); outline-offset: 2px; }
.ctb__tabla { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 3px; font-size: .9375rem; font-variant-numeric: tabular-nums; text-align: center; }
.ctb__tabla th { padding: 8px 6px; font-weight: 800; color: var(--td-szoveg-2, #34423C); background: var(--td-felulet, #fff); }
.ctb__tabla thead th { border-bottom: 2px solid var(--td-keret, #B9C4BD); }
.ctb__tabla tbody th { position: sticky; left: 0; z-index: 1; border-right: 2px solid var(--td-keret, #B9C4BD); }
.ctb__sarok { font-size: .75rem; line-height: 1.25; white-space: nowrap; }
.ctb__c { min-width: 44px; padding: 8px 4px; border-radius: 6px; font-weight: 700; }
.ctb__c--keves, .ctb__jel--keves::before { background: #F3EDD3; color: #5F5420; }
.ctb__c--merseklet, .ctb__jel--merseklet::before { background: #D9EBD6; color: #2D5A3C; }
.ctb__c--cel, .ctb__jel--cel::before { background: #8CC89A; color: #123A22; }
.ctb__c--sok, .ctb__jel--sok::before { background: #E9A99A; color: #6E1E12; }
.ctb__jelmagyarazat { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 16px 0 0; padding: 0; list-style: none; font-size: .9375rem; font-weight: 700; }
.ctb__jel { display: flex; align-items: center; gap: 10px; }
.ctb__jel::before { content: ""; flex: none; width: 22px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(13, 26, 23, .12); }
.ctb__jel span { font-weight: 600; color: var(--td-halk, var(--aq-muted)); }