/* NO-BO Klíma – az új arculat: „tervezőasztal” (inc/terv.php, Boldi kérése, 2026-10-18)
   Az oldal egy műszaki rajzlap (Boldi, 2026-10-19: ne matekfüzet legyen): tiszta fehér lap rács nélkül, a két szélén
   kettős rajzlapkeret osztásjelekkel (.t-lapkeret), a rajzok egyenes, vonalzós vonalai grafitszínűek, a feliratok keskeny,
   szabványírás-szerű betűvel (--t-felirat), a méretek és a jelölések kékek, két szakasz (Így dolgozunk, Ajánlatkérés) kék
   tervrajz. Narancs csak a cselekvő gomb, rámutatáskor ceruzakeret rajzolódik köré. A régi oldalakat
   nem érinti: minden szabály a html.terv alatt él, a site.css után töltődik. */

/* Színvilág: „Rajzkarton” (Boldi választása a három tervezetből, 2026-10-23): krémes rajzpapír, indigó tinta,
   jelzőnarancs. A krém otthonos és nem vakít, a műszaki rajzkarton színe; az indigó a tervrajzok tintája
   (szakértelem, nyugalom); a narancs a kék kiegészítő színe, és egyedül a fő gomb kapja – a nyugodt papíron ez az
   egyetlen meleg, telített folt, ezért a tekintet oda megy (60–30–10: papír, tinta és vonal, fő gomb). A régi
   oldalstílus (site.css) változói is ide igazodnak (--white, --paper, --line, --ink).
   A kék 2026-10-24 óta a Nordic indigo (#263BAA; Boldi: „a kéket változtasd meg, a vanília ne kerüljön be”): a nagy
   címek, a kiemelés és a kék sávok tiszta indigók, a szöveg ugyanennek mély árnyalata (a narancs gombon is olvasható);
   a krém papír, a grafit vonalak és a narancs gomb maradt. */
html.terv {
  --t-papir: #FAF6EE;
  --t-halo: #EDE6D8;
  --t-halo-eros: #E2D8C5;
  --t-grafit: #3D3A35;
  --t-grafit-2: #8F897E;
  --t-tinta: #172366;
  --t-tinta-2: #48528F;
  --t-kek: #263BAA;
  --t-tervrajz: #263BAA;
  --t-cim: #263BAA;                 /* a nagy címek (h1, h2); a teli indigó felületen a doboz színét öröklik */
  --t-fenykek: #B4BEFF;             /* kiemelés a teli indigón (lépésszám, csepp, szkenner) */
  --t-kek-halvany: #F0F1F9;         /* halvány indigó: sor rámutatáskor, a szalag végkártyája */
  --t-szalag: rgba(98, 114, 214, .5);  /* a fotókat tartó ragasztószalag */
  --t-tervrajz-vonal: rgba(255, 255, 255, .13);
  --t-narancs: #F26B1D;
  --t-csillag: #E0A100;             /* a Google-értékelés csillagai (sárga, nem a narancs gombszín) */
  --white: #FFFDF8;
  --paper: #FAF6EE;
  --line: #E6DED0;
  --line-strong: #CFC3AE;
  --ink: #172366;
  --ink-soft: #48528F;
  --t-kezi: var(--font);            /* a feliratok betűje (régen kézírás): keskeny, szabványírás-szerű, lásd .t-felirat-betu */
  --t-szemcse: url("../img/terv/grafit-szemcse.png");
  --t-ease: cubic-bezier(.23, 1, .32, 1);
  /* a szakaszok térköze (Boldi, 2026-10-20: „nagyon nagy hézag van”): telefonon 72 helyett 40, asztalon 120 helyett 80 pont */
  --space: clamp(2.5rem, 5.5vw, 5rem);
  background: var(--t-papir);
}
html.terv body {
  position: relative;
  z-index: 0;
  background-color: var(--t-papir);
  color: var(--t-tinta);
}
/* a rajzlap kerete: a két szélén kettős vonal (vékony kívül, vastag belül), köztük osztásjelek – mint egy műszaki rajzlapon */
.t-lapkeret { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.t-lapkeret::before, .t-lapkeret::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  border-left: 1px solid rgba(58, 63, 70, .3);
  border-right: 2px solid rgba(58, 63, 70, .55);
  background: repeating-linear-gradient(to bottom, transparent 0 119px, rgba(58, 63, 70, .4) 119px 120px);
}
.t-lapkeret::before { left: 12px; }
.t-lapkeret::after { right: 12px; transform: scaleX(-1); }
@media (max-width: 760px) { .t-lapkeret { display: none; } }
/* a feliratok (megjegyzés, szám, kép alatti cím): keskeny, kissé ritkított, mint a műszaki rajzok szabványírása */
.t-szlogen, .t-hos-megj, .t-szolg-fotok-cim, .t-lepes-szam, .t-felirat, .t-cetli h3, .t-markak-megj { font-stretch: 75%; letter-spacing: .015em; }
.terv ::selection { background: #F8DCC8; }
/* telefonon natív érzés (mobile-native skill): nincs szürke villanás koppintáskor, a gombok és linkek azonnal reagálnak
   (nincs dupla koppintásra váró késés), a gombok felirata hosszan nyomva sem jelölődik ki, és a mezők legalább 16 pontosak
   (különben az iPhone ránagyít, és nem nagyít vissza) */
html.terv { -webkit-tap-highlight-color: transparent; }
.terv :is(a, button, .btn, .t-gomb, [role="button"], summary, label) { touch-action: manipulation; }
.terv :is(button, .btn, .t-gomb, [role="button"]) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (pointer: coarse) {
  .terv :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: max(16px, 1em); }
}
/* tördelés: a címek sorai kiegyensúlyozottak, a bekezdések végén nem marad egyetlen szó egy sorban (ahol a böngésző tudja) */
.terv :is(h1, h2, h3, .t-szlogen) { text-wrap: balance; }
/* a hosszú összetett szó (Szivárgásvizsgálat, fűtéskorszerűsítés) keskeny telefonon se lógjon ki: elválasztva, végső
   esetben bárhol törik */
.terv :is(h1, h2, h3) { hyphens: auto; overflow-wrap: anywhere; }
/* a szavanként előcsúszó címben (terv.js, Megjelenés: .szo) a szó a mozgás alatt dobozban áll, és a dobozt a böngésző nem
   választja el; a mozgás végén a doboz megszűnik, és az elválasztás más sortörést adna – a cím ugrana (Boldi, 2026-10-27:
   „betöltés közben a címben a Dunakanyarban szó egybe tölt be, aztán ugrik át Duna-kanyarban felirattá”). Ezért ezekben a
   címekben a szó sehol nem törik el – se elválasztással, se máshogy –, csak a szóközöknél: a sor ugyanott törik a mozgás alatt
   és utána is. (Az első javítás csak az elválasztást kapcsolta ki, de a Safari azután is eltörte a szót, rossz helyen – Boldi,
   2026-10-27: „most még rosszabb”; a nowrap minden böngészőben tart.) A leghosszabb szó is elfér 320 px-en (próba:
   scratchpad teszt/cim-szavak.mjs). */
.terv .szo { white-space: nowrap; -webkit-hyphens: manual; hyphens: manual; }
.terv p { text-wrap: pretty; }
.terv :focus-visible { outline-color: var(--t-kek); }
.terv h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-stretch: 116%; font-weight: 740; line-height: 1.04; letter-spacing: -.015em; }
.terv :is(h1, h2) { color: var(--t-cim); }
.terv :is(.t-kek, .cta-band, .quote, .hero, .kalk-eredmeny, .tr-eredmeny, .eszkoz-cta, .project-card, .munka-foto) { --t-cim: currentColor; }
@media (max-width: 400px) {
  .terv .page-hero h1 { font-size: clamp(1.7rem, 7.6vw, 2.1rem); }
  .terv h2 { font-size: clamp(1.6rem, 7.2vw, 2rem); }
}
.terv .section-head p { color: var(--t-tinta-2); }
/* a régi szakaszok saját háttere helyett a rajzlap látszik; a régi gombok is szögletesek */
.terv .chooser, .terv .eszkoz-szakasz, .terv .szalag, .terv .area, .terv .gep-ajanlo { background: transparent; }
.terv .btn { border-radius: 4px; }
.terv .btn-ghost { border-color: var(--t-tinta); color: var(--t-tinta); }
@media (hover: hover) and (pointer: fine) { .terv .btn-ghost:hover { background: var(--t-tinta); color: var(--white); } }

/* ---------- Fejléc: áttetsző papír, ceruzavonal alatta ---------- */
.terv .site-header {
  background: rgba(250, 246, 238, .9);
  -webkit-backdrop-filter: saturate(1.15) blur(10px);
  backdrop-filter: saturate(1.15) blur(10px);
  border-bottom: 1px solid rgba(58, 63, 70, .3);
}
.terv .main-nav a:not(.btn) { color: var(--t-tinta); }
.terv .nav-call { background: transparent; color: var(--t-tinta); box-shadow: inset 0 0 0 1.5px var(--t-tinta); }
.terv .menu-toggle { border-radius: 4px; border-color: var(--t-tinta); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .terv .main-nav a:not(.btn):hover { color: var(--t-tinta); border-bottom-color: var(--t-narancs); }
  .terv .nav-call:hover { background: var(--t-tinta); color: var(--white); box-shadow: none; }
}
@media (max-width: 1099px) {
  .terv .main-nav { background: var(--t-papir); border-bottom: 1px solid rgba(58, 63, 70, .3); }
}

/* ---------- Gombok: narancs (fő) és körvonalas; rámutatáskor ceruzakeret ---------- */
.t-gomb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  padding: .8rem 1.45rem;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 1.02rem;
  font-stretch: 106%;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .18s var(--t-ease), background-color .2s ease, color .2s ease;
}
.t-gomb > span { display: inline-flex; align-items: center; gap: .55rem; }
.t-gomb .icon { width: 1.15rem; height: 1.15rem; }
.t-gomb-fo { background: var(--t-narancs); color: var(--t-tinta); }
.t-gomb-fo:hover { color: var(--t-tinta); }
.t-gomb-masod { background: transparent; color: var(--t-tinta); box-shadow: inset 0 0 0 2px var(--t-tinta); }
.t-gomb-masod:hover { color: var(--t-tinta); }
.t-gomb:active { transform: scale(.96); }
.t-gomb-fo:active { background: #DE5C10; }
.t-gomb-masod:active { background: rgba(26, 33, 80, .06); }
.t-gomb:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 5px; border-radius: 4px; }
/* max-width: none – az általános „svg legfeljebb 100%” szabály különben a gomb szélességére vágná, és a keret jobb oldala a gombra csúszna */
.t-keret { position: absolute; top: -7px; left: -8px; width: calc(100% + 16px); max-width: none; height: calc(100% + 14px); overflow: visible; pointer-events: none; }
.t-keret path {
  fill: none;
  stroke: var(--t-grafit);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 600px;          /* képpontban: a nem nyúló vonal szaggatását a böngésző így méri */
  stroke-dashoffset: 600px;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset .45s cubic-bezier(.4, .1, .3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .t-gomb:hover { transform: translateY(-2px); }
  .t-gomb:hover .t-keret path { stroke-dashoffset: 0; }
  .t-gomb:active { transform: scale(.97); }
}
.t-gomb:focus-visible .t-keret path { stroke-dashoffset: 0; }
/* a narancs gomb ceruzakerete egyszer kirajzolódik és ott marad (terv.js: .is-keretes): érintős képernyőn, amikor a gomb
   a képernyőre ér; a nyitóképen gépen is, a megjelenési sorozat végén (Rajzkarton, 2026-10-23) – a tekintet ott álljon meg */
.t-gomb.is-keretes .t-keret path { stroke-dashoffset: 0; transition-duration: .8s; }
@media (hover: none) {
  /* a keret egy kicsit kijjebb fut, a narancs szélén kívül */
  .t-gomb .t-keret { top: -10px; left: -11px; width: calc(100% + 22px); height: calc(100% + 20px); }
}

/* ---------- Kirajzolódó vonalak (terv.js: .js-rajz a <html>-en, .is-rajzolva a rajzon) ----------
   .r = vonal, ami kihúzódik (pathLength=1), .m = szöveg vagy jel, ami előtűnik. Csökkentett mozgásnál a kész rajz. */
.js-rajz [data-rajzol] .r { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js-rajz [data-rajzol] .m { opacity: 0; }
.js-rajz [data-rajzol].is-rajzolva .r { animation: t-huz var(--t, .8s) cubic-bezier(.45, .05, .25, 1) var(--d, 0s) forwards; }
.js-rajz [data-rajzol].is-rajzolva .m { animation: t-megjelen .5s ease var(--d, 0s) forwards; }
@keyframes t-huz { to { stroke-dashoffset: 0; } }
@keyframes t-megjelen { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js-rajz [data-rajzol] .r { stroke-dashoffset: 0 !important; }
  .js-rajz [data-rajzol] .m { opacity: 1 !important; }
}

/* ---------- Rajzkarton: fotók színezése, tusrajz a papíron, izzó fő gomb (Boldi, 2026-10-23) ----------
   A hangulatfotók (nyitókép, oldalfej, munkák, rólunk, blog) enyhén meleg, papíros tónust kapnak, hogy a krém lapba
   simuljanak; a termékfotók (klímák) színe sosem változik. A ház tusrajza fehér papírra készült: szorzó keveréssel a
   tinta a krém papírra kerül, fehér folt nélkül. A fő gomb körül enyhe, meleg derengés (Boldi: „a kiemelt gombok
   legyenek olyanok, mint a tervrajz stílusban, enyhén glowing”) – a fejléc telefonszáma nem fő gomb. */
.terv :is(.t-hos-foto, .page-hero-photo img, .t-ragasztott img, .photo-grid img, .post-figure img, .post-card-photo img) {
  filter: sepia(.07) saturate(.95) contrast(1.02);
}
.terv .t-m-render { mix-blend-mode: multiply; }
.terv :is(.t-gomb-fo, .btn-primary):not(.nav-call) {
  box-shadow: 0 0 0 1px rgba(255, 160, 90, .35), 0 12px 32px -12px rgba(255, 122, 26, .8);
}

/* ---------- Megjelenés (terv.js, 7.; Boldi, 2026-10-22: „a képek és a szövegek ne statikusan jelenjenek meg”) ----------
   A címek szavanként csúsznak elő egy vonal alól (.szo: a maszk – kicsit nagyobb a szónál, hogy az ékezet és a szár ne
   vágódjon le, a negatív margó miatt a sor nem mozdul; .szo-b: a szó), a többi elem finoman felemelkedik, a fotók a
   keretükben felülről tárulnak fel, közben kicsit kicsinyednek. Sorban (--mk: a késleltetés a JS-től). A nyitókép és az
   oldalfej szövegei a JS indulásáig rejtve vannak, hogy ne villanjanak fel (a lista ugyanaz, mint a terv.js NYITO-ja); ha a
   JS 3 mp alatt sem indul el, a <head> szkriptje megjeleníti őket. Csökkentett mozgásnál semmi sem rejtett. */
@media (prefers-reduced-motion: no-preference) {
  .js-rajz:not(.mozgas-indult) :is(.t-hos-szoveg > :is(.t-szlogen, h1), .t-hos-jobb > *,
    .page-hero .wrap > :is(.crumbs, .gep-hero-marka, h1, .lead, ul, .hero-actions, .eszkozgombok),
    .page-hero .page-hero-grid > div > :is(.crumbs, .gep-hero-marka, h1, .lead, ul, .hero-actions, .eszkozgombok, .ardoboz, .gep-hero-linkek),
    .page-hero .page-hero-grid > :is(.page-hero-photo, .gep-hero-rajz)) { opacity: 0; }

  /* animáció, nem átmenet (transition): az oldal első kirajzolása előtt indított átmenetet a Chrome átugorja, így a
     nyitókép hol beúszott, hol mozdulatlanul állt – az animáció ilyenkor is végigfut; a kész állapot az alapérték */
  .mozog-cim .szo { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .06em .14em; margin: -.16em -.06em -.14em; }
  .mozog-cim .szo-b { display: inline-block; translate: 0 115%; }
  .mozog-cim.is-megjelent .szo-b { translate: none; animation: mozog-szo .8s var(--t-ease) calc(var(--mk, 0ms) + var(--i, 0) * 45ms) both; }

  .mozog-fel { opacity: 0; translate: 0 1.1rem; }
  .mozog-fel.is-megjelent { opacity: 1; translate: none; animation: mozog-attun .6s ease var(--mk, 0ms) both, mozog-emel .8s var(--t-ease) var(--mk, 0ms) both; }
  @keyframes mozog-szo { from { translate: 0 115%; } to { translate: none; } }
  @keyframes mozog-attun { from { opacity: 0; } to { opacity: 1; } }
  @keyframes mozog-emel { from { translate: 0 1.1rem; } to { translate: none; } }

  /* a fotó a megjelenésig csak átlátszó, NEM kivágott: a kivágott (clip-path) képet a böngésző nem tölti be előre
     („lazy”) – a kivágás csak a feltárulás közben van rajta, amikor a kép már úton van */
  .mozog-kep { opacity: 0; }
  .mozog-kep img { scale: 1.08; }
  .mozog-kep.is-megjelent { opacity: 1; animation: kep-feltarul .9s cubic-bezier(.65, 0, .35, 1) calc(var(--mk, 0ms) + 120ms) both; }
  .mozog-kep.is-megjelent img { scale: 1; transition: scale 1.3s var(--t-ease) calc(var(--mk, 0ms) + 120ms); }
  @keyframes kep-feltarul { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
}

/* A gombok felirata rámutatáskor átgördül (terv.js, 7/b): felfelé kicsúszik, alulról a másolata (a felirat árnyéka,
   1,6em-mel lejjebb) jön a helyére. Csak egérrel; nagy kontrasztú módban nincs árnyék, ott a felirat marad. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .gomb-gordul { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .12em; margin-block: -.12em; }
  .gomb-gordul > span { display: inline-block; text-shadow: 0 1.6em currentColor; transition: translate .3s var(--t-ease); }
  :is(.t-gomb, .btn):hover .gomb-gordul > span { translate: 0 -1.6em; }
}
@media (forced-colors: active) { .gomb-gordul > span { translate: none !important; } }
/* ha a felirat két sorba törik (keskeny gomb), az árnyék-másolata a második sorra esne: ott nincs gördülés (terv.js) */
.gomb-gordul.is-tobb-sor > span { text-shadow: none; translate: none !important; }

/* ---------- Nyitókép: cím a rajzlapon, alatta a ház – balra terv, jobbra a kész ház ---------- */
.t-hos { padding: clamp(1.5rem, 3.2vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.t-hos-szoveg { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.t-szlogen { margin: 0 0 .5rem; font-family: var(--t-kezi); font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 650; line-height: 1.2; color: var(--t-kek); }
.t-hos h1 { max-width: 30ch; font-size: clamp(2.15rem, 3.6vw, 3.4rem); font-stretch: 118%; font-weight: 770; line-height: 1.02; letter-spacing: -.02em; }
/* a cím alatt: balra a bevezető, jobbra a gombok és az „Új” jelzés */
.t-hos-jobb {
  display: grid;
  grid-template-columns: minmax(0, 38rem) auto;
  grid-template-areas: "lead gombok" "lead uj";
  justify-content: space-between;
  align-items: end;
  gap: .9rem 3rem;
  margin-top: 1.2rem;
}
.t-hos-lead { grid-area: lead; margin: 0; font-size: 1.1rem; color: var(--t-tinta-2); }
.t-gombok { grid-area: gombok; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .9rem 1.1rem; }
.t-uj { grid-area: uj; justify-self: end; display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--t-tinta); text-decoration: none; }
.t-uj-cimke { padding: .05rem .5rem; border: 1.5px solid var(--t-kek); border-radius: 3px; color: var(--t-kek); font-size: .82rem; font-weight: 750; }
.t-uj > span:last-child { text-decoration: underline; text-decoration-color: rgba(26, 33, 80, .3); text-underline-offset: .2em; }
@media (hover: hover) and (pointer: fine) { .t-uj:hover > span:last-child { text-decoration-color: var(--t-kek); } }
.t-hos-megj { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 1rem auto 0; font-family: var(--t-kezi); font-size: 1rem; font-weight: 550; color: var(--t-tinta-2); }

/* a kép kivágása a fotó képpontjaiban: --x0/--y0 a bal felső sarok, --cw/--ch a látszó szélesség és magasság */
.t-hos-kep { width: min(100% - 2 * var(--gutter), 86rem); margin: clamp(1.25rem, 2.6vw, 2rem) auto 0; }
.t-hos-keret {
  --x0: 150; --y0: 420; --cw: 3100; --ch: 1150;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3100 / 1150;
  border-top: 1px solid rgba(58, 63, 70, .4);
  border-bottom: 1px solid rgba(58, 63, 70, .4);
}
/* a fotó és fölötte a rajzok közös doboza: a teljes kép, a kivágáshoz (--x0, --y0, --cw, --ch) igazítva */
.t-hos-belso {
  position: absolute;
  left: calc(var(--x0) / var(--cw) * -100%);
  top: calc(var(--y0) / var(--ch) * -100%);
  width: calc(var(--kw, 3500) / var(--cw) * 100%);
  aspect-ratio: var(--kw, 3500) / var(--kh, 2103);
}
.t-hos-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Röntgenes nyitókép (Boldi ötlete, 2026-10-19) ----------
   Asztalon balra a cím, jobbra a ház fotója a lap széléig; a kurzor körül egy körben a ház tervrajza látszik a gépészettel
   (inc/terv.php: terv_rontgen_rajz, terv.js 6.). Telefonon a kép a cím alá kerül, a kört húzni vagy a képre koppintani
   lehet. JavaScript nélkül a kör a nyugvóponton áll. */
.t-hos-rontgen {
  display: grid;
  grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 29rem) clamp(1.75rem, 3.5vw, 3.5rem) minmax(0, calc(var(--wrap) - 32.5rem)) minmax(var(--gutter), 1fr);
  grid-template-areas: ". szoveg . kep kep";
  align-items: center;
}
.t-hos-rontgen .t-hos-szoveg { grid-area: szoveg; width: auto; margin: 0; }
.t-hos-rontgen .t-hos-kep { grid-area: kep; width: auto; margin: 0; }
.t-hos-rontgen h1 { font-size: clamp(2.1rem, 3vw, 2.85rem); }
.t-hos-rontgen .t-hos-jobb { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "gombok" "uj"; justify-content: start; gap: 1.1rem; }
.t-hos-rontgen .t-gombok { justify-content: flex-start; }
.t-hos-rontgen .t-uj { justify-self: start; }
/* a cím alatti sor (évszám nélkül – Boldi, 2026-10-20) */
.t-hos-rontgen .t-hos-szoveg > .t-hos-megj { width: auto; margin: 1.3rem 0 0; }
.t-rontgen .t-hos-keret { --kw: 2736; --kh: 1829; --x0: 330; --y0: 40; --cw: 2406; --ch: 1590; aspect-ratio: 2406 / 1590; border: 0; border-radius: 6px 0 0 6px; box-shadow: 0 30px 60px -42px rgba(10, 20, 60, .55); }
@media (hover: hover) and (pointer: fine) { .t-rontgen .t-hos-keret { cursor: crosshair; } }
/* a röntgenréteg: a fotóval azonos dobozban, a lencse körére vágva (--lx, --ly, --lr: a doboz képpontjaiban) */
.t-rontgen-reteg { position: absolute; inset: 0; clip-path: circle(var(--lr, 130px) at var(--lx, 45.7%) var(--ly, 33.9%)); pointer-events: none; }
.t-rontgen-rajz { position: absolute; inset: 0; width: 100%; height: 100%; }
/* a fotón álló gépek élő ventilátora (terv_rontgen_elo): a lapátok forognak a rács mögött, csak ha a kép látszik */
.t-rontgen-elo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.t-elo-lapat path { fill: #545a54; }
.t-elo-racs { fill: none; stroke: #8b928c; stroke-width: 1.15; opacity: .85; }
.t-elo-tengely { fill: #646b65; }
.t-elo-lapat { animation: t-forog .85s linear infinite; animation-play-state: paused; }
.js-rajz .t-rontgen.is-lathato .t-elo-lapat { animation-play-state: running; }
/* a lencse gyűrűje (a kép keretében): JS nélkül a nyugvóponton áll, JS-sel a transform viszi */
.t-lencse {
  position: absolute;
  z-index: 2;
  left: calc(38.2% - var(--lr, 130px));
  top: calc(36.5% - var(--lr, 130px));
  width: calc(var(--lr, 130px) * 2);
  height: calc(var(--lr, 130px) * 2);
  border-radius: 50%;
  /* a gyűrű vastagsága legfeljebb a sugár: zárt körnél (--lr: 0) nem marad ott egy kék pötty */
  box-shadow: 0 0 0 min(2px, var(--lr, 130px)) rgba(255, 255, 255, .95), 0 0 0 min(7px, var(--lr, 130px)) rgba(38, 59, 170, .25), 0 18px 40px -12px rgba(10, 20, 60, .6), inset 0 0 44px rgba(4, 12, 40, .5);
  pointer-events: none;
  touch-action: none;
}
/* gyors mozgásnál a lencse kicsit megnő (terv.js) és felragyog */
.t-lencse { transition: box-shadow .25s ease; }
.t-rontgen.is-mozog .t-lencse { box-shadow: 0 0 0 2px #fff, 0 0 0 8px rgba(180, 190, 255, .42), 0 0 36px rgba(180, 190, 255, .5), 0 18px 40px -12px rgba(10, 20, 60, .6), inset 0 0 44px rgba(4, 12, 40, .5); }
.t-rontgen.is-elo .t-lencse { left: 0; top: 0; transform: translate3d(calc(var(--kx, 0px) - var(--lr, 0px)), calc(var(--ky, 0px) - var(--lr, 0px)), 0); will-change: transform; }
.t-rontgen.is-elo .t-rontgen-reteg { clip-path: circle(var(--lr, 0px) at var(--lx, 0px) var(--ly, 0px)); }
.t-rontgen.is-teljes .t-lencse { box-shadow: none; }
/* érintésnél az ujj a képet „fogja” (terv.js 6.): hosszú nyomásra se kijelölés, se a kép menüje (mentés, megosztás) */
.t-rontgen .t-hos-keret { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.t-rontgen img { -webkit-user-drag: none; }
/* „Teljes tervrajz”: a kör kitágul az egész képre (és vissza) – egér nélkül, billentyűvel is */
.t-rontgen-gomb {
  position: absolute;
  right: .85rem;
  bottom: .85rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  padding: .45rem .85rem;
  border: 0;
  border-radius: 4px;
  background: rgba(251, 252, 254, .92);
  color: var(--t-tinta);
  box-shadow: 0 0 0 1px rgba(58, 63, 70, .35), 0 8px 18px -10px rgba(10, 20, 60, .5);
  font: inherit;
  font-size: .9rem;
  font-weight: 650;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .16s var(--t-ease), background-color .2s ease, color .2s ease, opacity .3s ease;
}
.t-rontgen-gomb svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.t-rontgen-gomb:active { transform: scale(.96); }
.t-rontgen-gomb[aria-pressed="true"] { background: var(--t-tervrajz); color: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 8px 18px -10px rgba(10, 20, 60, .5); }
.t-rontgen-gomb:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .t-rontgen-gomb:hover { background: var(--white); } .t-rontgen-gomb[aria-pressed="true"]:hover { background: #4053B4; } }
/* a tervrajz: sötétkék lap, fehér szerkezet, a gépészet szakmánként a saját színében (a sötét lapon világosabban) */
.t-rontgen-rajz path { vector-effect: non-scaling-stroke; }
.t-rontgen-rajz .x-hatter { fill: var(--t-tervrajz); }
.t-rontgen-rajz .x-racs { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1; }
.t-rontgen-rajz .x-v { fill: none; stroke: rgba(234, 242, 255, .85); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.t-rontgen-rajz .x-vastag { stroke-width: 2.2; }
.t-rontgen-rajz .x-vekony { stroke-width: 1; stroke: rgba(234, 242, 255, .55); }
.t-rontgen-rajz .x-satir { fill: none; stroke: rgba(234, 242, 255, .28); stroke-width: .9; }
.x-hutes { --c: #6FC3FF; }
.x-futes { --c: #FF9F62; }
.x-legtech { --c: #8EE6CB; }
.x-viz { --c: #AFBDFF; }
.t-rontgen-rajz .x-gep, .t-rontgen-rajz .x-cso, .t-rontgen-rajz .x-padlo, .t-rontgen-rajz .x-lapat path { fill: none; stroke: var(--c); stroke-linecap: round; stroke-linejoin: round; }
.t-rontgen-rajz .x-gep { stroke-width: 1.9; }
.t-rontgen-rajz .x-cso { stroke-width: 1.5; }
.t-rontgen-rajz .x-padlo { stroke-width: 1.3; }
.t-rontgen-rajz .x-lapat path { stroke-width: 1.6; }
.t-rontgen-rajz .x-meleg-viz { stroke-dasharray: 6 5; }
.t-rontgen-rajz .x-csat { fill: none; stroke: #C7D0E6; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.t-rontgen-rajz .x-cimke { font-family: var(--t-kezi); font-size: 44px; font-stretch: 75%; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; fill: var(--c); }
/* műszaki jelölések (terv_rontgen_rajz, 2026-10-21): méret- és szintvonalak, tengelyvonal, helyiségnevek, cím, jelmagyarázat –
   halványabbak a gépészetnél, hogy az maradjon elöl */
.t-rontgen-rajz .x-meret { fill: none; stroke: rgba(234, 242, 255, .52); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.t-rontgen-rajz .x-szintjel { fill: rgba(234, 242, 255, .62); stroke: none; }
.t-rontgen-rajz .x-kozep { fill: none; stroke: rgba(234, 242, 255, .38); stroke-width: .8; stroke-dasharray: 12 4 2 4; }
.t-rontgen-rajz .x-apro { font-family: var(--t-kezi); font-size: 30px; font-stretch: 75%; font-weight: 600; letter-spacing: .04em; fill: rgba(234, 242, 255, .8); }
.t-rontgen-rajz .x-helyiseg { font-family: var(--t-kezi); font-size: 30px; font-stretch: 75%; font-weight: 600; letter-spacing: .12em; fill: rgba(234, 242, 255, .5); }
.t-rontgen-rajz .x-cim { font-weight: 700; letter-spacing: .08em; fill: rgba(234, 242, 255, .9); }
.t-rontgen-rajz .x-kod { fill: var(--c); }
/* mozgás a körben: ventilátor, hűvös és meleg levegő, befújt levegő, víz, zuhany, csatorna – csak ha a kép látszik */
.t-rontgen-rajz .x-lapat { animation: t-forog 1.1s linear infinite; animation-play-state: paused; }
.t-rontgen-rajz .x-aram { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 8 9; animation: t-aram var(--ido, 1.3s) linear infinite; animation-play-state: paused; }
.t-rontgen-rajz .x-aram { --per: 17px; }
.t-rontgen-rajz .x-a-hideg { --ido: 1.2s; }
.t-rontgen-rajz .x-a-meleg { --ido: 1.6s; }
.t-rontgen-rajz .x-a-leg { --ido: 1s; }
.t-rontgen-rajz .x-a-viz { --ido: .9s; stroke: #FFFFFF; stroke-width: 1.2; stroke-dasharray: 3 14; }
.t-rontgen-rajz .x-a-csepp { --ido: .55s; stroke-dasharray: 6 11; }
.t-rontgen-rajz .x-a-csat { --ido: 1.3s; stroke: var(--t-tervrajz); stroke-width: 1.4; stroke-dasharray: 4 13; }
/* áramló szemcsék a csövekben: hűtőközeg, fűtővíz, friss levegő, meleg víz (a vezeték irányában) */
.t-rontgen-rajz .x-a-cso { --per: 18px; --ido: .7s; stroke: #fff; stroke-opacity: .85; stroke-width: 1.4; stroke-dasharray: 2 16; }
.t-rontgen-rajz .x-a-padlo { --ido: 1.15s; }
.js-rajz .t-rontgen.is-lathato :is(.x-aram, .x-lapat) { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .t-rontgen-rajz :is(.x-aram, .x-lapat), .t-elo-lapat { animation: none !important; }
}

/* ---------- „Tervből valóság” nyitás (Boldi választása, 2026-10-19) ----------
   Betöltéskor a kép egy pillanatig a ház tervrajza: a vonalak kirajzolódnak (pathLength=1, .is-huz), aztán egy pásztázó
   vonal lefelé végigmegy rajta, és mögötte előtűnik a fotó (terv.js 6.: a mozgó elemek eltolása közvetlenül, a vonal
   helye). Amíg a JS nem végez (.nyitas-kesz), a tervrajz takarja a képet, így a fotó nem villan fel előtte. Csökkentett
   mozgásnál és JS nélkül nincs nyitás. */
.t-rontgen-szkenner {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid var(--t-fenykek);
  box-shadow: 0 0 12px 1px rgba(180, 190, 255, .75);
  transform: translate3d(0, 0, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.t-rontgen.is-szkennel .t-rontgen-szkenner { opacity: 1; }
.t-rontgen-szkenner span {
  position: absolute;
  left: .9rem;
  bottom: .5rem;
  padding: .1rem .45rem;
  border: 1.5px solid var(--t-fenykek);
  border-radius: 3px;
  background: rgba(23, 35, 102, .88);
  color: #EAF2FF;
  font-size: .78rem;
  font-weight: 700;
  font-stretch: 75%;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
/* a vágás eltolással (csak transform, a böngésző nem rajzol újra): a külső doboz a vonalig lecsúszik, a belső ugyanennyit
   vissza – így a tervrajz a helyén marad, de csak a vonal alatt látszik. Pásztázás közben a lencse köre nem vág, az áramlás
   szünetel. */
.t-nyit-vag, .t-nyit-vag-belso { position: absolute; inset: 0; }
.t-nyit-vag { overflow: hidden; }
.t-rontgen.is-szkennel .t-rontgen-reteg { clip-path: none; }
.js-rajz .t-rontgen.is-szkennel :is(.x-aram, .x-lapat) { animation-play-state: paused; }
/* a „vázlat”: a fotó tollrajz-változata (eszkoz/tus-vazlat.mjs) egy sávban a vonal fölött, felfelé a színes fotóba olvad
   – így a sorrend: tervrajz → vázlat → valóság. A sáv a vonallal együtt csúszik, a kép benne visszafelé (a helyén marad). */
.t-nyit-sav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -140px, 0);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 50%);
  mask-image: linear-gradient(to bottom, transparent, #000 50%);
}
.t-nyit-vazlat { position: absolute; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 2736 / 1829; }
.t-rontgen.is-szkennel .t-nyit-sav { opacity: 1; }
/* a vonal alatt egy halvány fénysáv a tervrajzon, mint egy letapogatónál */
.t-rontgen-szkenner::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 72px; background: linear-gradient(to bottom, rgba(180, 190, 255, .3), rgba(180, 190, 255, 0)); }
@media (prefers-reduced-motion: no-preference) {
  .js-rajz .t-rontgen:not(.nyitas-kesz) .t-rontgen-reteg { clip-path: none; }
  .js-rajz .t-rontgen:not(.nyitas-kesz) :is(.t-lencse, .t-rontgen-gomb) { opacity: 0; pointer-events: none; }
  .js-rajz .t-rontgen:not(.nyitas-kesz) .t-rontgen-rajz :is(.x-v, .x-satir, .x-gep, .x-cso, .x-padlo, .x-csat):not(.x-meleg-viz) { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js-rajz .t-rontgen:not(.nyitas-kesz) .t-rontgen-rajz :is(.x-aram, .x-cimke, .x-lapat, .x-meleg-viz, .x-jel) { opacity: 0; }
  .t-rontgen.is-huz .t-rontgen-rajz :is(.x-v, .x-satir, .x-gep, .x-cso, .x-padlo, .x-csat):not(.x-meleg-viz) { animation: t-huz .62s cubic-bezier(.45, .05, .25, 1) var(--d, 0s) forwards; }
  .t-rontgen.is-huz .t-rontgen-rajz :is(.x-aram, .x-cimke, .x-lapat, .x-meleg-viz, .x-jel) { animation: t-megjelen .35s ease .55s forwards; animation-play-state: running; }
  /* előbb a ház, aztán sorban a szakmák */
  .t-rontgen-rajz .x-legtech { --d: .1s; }
  .t-rontgen-rajz .x-futes { --d: .16s; }
  .t-rontgen-rajz .x-hutes { --d: .22s; }
  .t-rontgen-rajz .x-viz { --d: .28s; }
  /* kirajzolás után (.is-rajzolt, a pásztázás előtt) sima vonal: a szaggatás minden képkockán drága lenne */
  .js-rajz .t-rontgen.is-rajzolt:not(.nyitas-kesz) .t-rontgen-rajz :is(.x-v, .x-satir, .x-gep, .x-cso, .x-padlo, .x-csat):not(.x-meleg-viz) { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .js-rajz .t-rontgen.is-rajzolt:not(.nyitas-kesz) .t-rontgen-rajz :is(.x-aram, .x-cimke, .x-lapat, .x-meleg-viz, .x-jel) { opacity: 1; animation: none; }
}

/* ---------- Miben segíthetünk: egy ház metszetrajza, a három szolgáltatás egy-egy réteg (inc/terv.php) ----------
   Mint egy tervezőprogramban: a kapcsoló (A, B, C) be- és kikapcsolja a réteget. Kikapcsolva a réteg halvány vázlat,
   bekapcsolva kirajzolódik, és „működni” kezd: forog a ventilátor, áramlik a levegő, a víz és a meleg (terv.js). */
.t-szolg { padding-block: var(--space); }
.t-szolg-fej { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.t-szolg-fej h2 { margin-bottom: .6rem; }
.t-szolg-fej p { margin: 0; color: var(--t-tinta-2); }
/* asztalon (Boldi, 2026-10-20: „ott sem látszik, hogy mi az, ami lenyílik”) is úgy, mint telefonon: bal oszlopban a
   kapcsolók, közvetlenül alattuk a felszólítás vagy a találatdoboz; jobbra a rajz, ami a képernyőn marad, amíg a listát
   görgetik (lent: .t-lap tapad) */
.t-szolg-panel {
  display: grid;
  grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "retegek lap" "also lap";
  gap: 1.25rem clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.t-betu {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border: 1.6px solid var(--t-kek);
  border-radius: 50%;
  color: var(--t-kek);
  font-size: 1.15rem;
  font-weight: 750;
  transition: background-color .2s ease, color .2s ease;
}

/* a három szolgáltatás színe, mint a régi oldalon (Boldi, 2026-10-19): hűtés kék, fűtés meleg vörös, épületgépészet sötétkék */
.t-reteg-hutes, .t-m-hutes, .t-m-jel-hutes { --c: var(--cool); --c-tint: #EAF1FD; }
.t-reteg-futes, .t-m-futes, .t-m-jel-futes { --c: var(--warm); --c-tint: #FFF1E7; }
.t-reteg-epuletgepeszet, .t-m-epuletgepeszet, .t-m-jel-epuletgepeszet { --c: var(--navy); --c-tint: #ECEEF8; }

/* a rétegkapcsolók: betű, név, kapcsoló – lenyomásra azonnal visszajeleznek */
.t-retegek { grid-area: retegek; display: grid; gap: .6rem; }
.t-reteg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  min-height: 4.1rem;
  padding: .65rem .9rem .65rem .75rem;
  border: 1.5px solid rgba(58, 63, 70, .35);
  border-radius: 4px;
  background: var(--t-papir);
  color: var(--t-tinta);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .16s var(--t-ease);
}
.t-reteg:hover { color: var(--t-tinta); }
.t-reteg:active { transform: scale(.985); }
.t-reteg:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 3px; }
.t-reteg-szoveg { display: grid; gap: .1rem; min-width: 0; }
.t-reteg-nev { font-size: 1.15rem; font-stretch: 110%; font-weight: 700; line-height: 1.2; }
.t-reteg-al { font-size: .9rem; line-height: 1.35; color: var(--t-tinta-2); }
.t-kapcsolo { position: relative; flex: none; width: 2.75rem; height: 1.6rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(58, 63, 70, .55); transition: background-color .22s ease, box-shadow .22s ease; }
.t-kapcsolo::after {
  content: "";
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--t-papir);
  box-shadow: 0 0 0 1.5px rgba(58, 63, 70, .55), 0 2px 4px rgba(26, 33, 80, .15);
  transition: transform .28s var(--t-ease), box-shadow .2s ease;
}
.t-reteg .t-betu { border-color: var(--c); color: var(--c); }
.t-reteg.is-on { border-color: var(--c); background: var(--c-tint); box-shadow: 4px 4px 0 color-mix(in srgb, var(--c) 14%, transparent); }
.t-reteg.is-on .t-betu { background: var(--c); color: var(--white); }
.t-reteg.is-on .t-kapcsolo { background: var(--c); box-shadow: none; }
.t-reteg.is-on .t-kapcsolo::after { transform: translateX(1.15rem); box-shadow: 0 2px 5px rgba(10, 20, 60, .3); }
@media (hover: hover) and (pointer: fine) { .t-reteg:hover, .t-reteg.is-elonezet { border-color: var(--c); } }
.t-mind {
  justify-self: start;
  margin-top: .15rem;
  padding: .4rem 0;
  border: 0;
  background: none;
  color: var(--t-kek);
  font: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(38, 59, 170, .35);
  text-underline-offset: .2em;
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) { .t-mind:hover { text-decoration-color: currentColor; } }

/* a kijelöléshez illő cím és tipp: rajzfejléc, alatta a cselekvés – most sehol nem látszik (a találatdoboz fejléce és gombja
   vette át a szerepét; a site.js továbbra is frissíti) */
.t-szolg-fejlec { display: none; }
.t-szolg-fejlec { grid-area: fejlec; padding: 1.1rem 1.2rem 1.25rem; border: 1.5px solid var(--t-grafit); background: var(--t-papir); box-shadow: 4px 4px 0 rgba(58, 63, 70, .08); }
.t-szolg-fejlec h3 { margin: 0 0 .4rem; font-size: 1.25rem; font-stretch: 110%; font-weight: 720; line-height: 1.25; }
.t-szolg-fejlec p { margin: 0 0 1.15rem; color: var(--t-tinta-2); }

/* a rajzlap: kettős keret, benne a metszet */
.t-lap {
  grid-area: lap;
  padding: clamp(.55rem, 1.2vw, .9rem);
  background: var(--t-papir);
  box-shadow: 0 0 0 1px rgba(58, 63, 70, .5), inset 0 0 0 5px var(--t-papir), inset 0 0 0 6.5px rgba(58, 63, 70, .45), 6px 6px 0 rgba(26, 33, 80, .05);
}
.t-metszet { --tk: 1.6s; display: block; width: 100%; height: auto; pointer-events: none; }
.t-metszet.is-kesz { --tk: 0s; }
.t-metszet .v { fill: none; stroke: var(--t-grafit); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.t-metszet .v-vastag { stroke-width: 3.4; }
.t-metszet .v-vekony { stroke-width: 1.4; opacity: .8; }
.t-metszet .v-halvany { stroke-width: 1.2; opacity: .35; }
.t-metszet .satir { fill: none; stroke: var(--t-grafit); stroke-width: 1.1; opacity: .42; }
.t-metszet .v-meret { fill: none; stroke: var(--t-kek); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t-metszet .szam { font-family: var(--font); font-size: 20px; font-stretch: 82%; font-weight: 650; fill: var(--t-kek); }
/* a rétegek: halvány vázlat (h), bekapcsolva kihúzódó tinta (i, --k sorrendben), a gépek háttere (t-m-test) */
.t-m-talalat { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; }
.t-metszet .h { fill: none; stroke: var(--t-grafit); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .3; transition: opacity .18s ease, stroke .18s ease; }
.t-metszet .h.csat { stroke-width: 2.6; }
.t-metszet .i { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .28s cubic-bezier(.4, 0, 1, 1); }
.t-metszet .i.g { stroke: var(--t-grafit); stroke-width: 2.6; }
.t-metszet .i.gv { stroke: var(--t-grafit); stroke-width: 1.6; }
.t-metszet .i.cso { stroke: var(--c); stroke-width: 2.8; }
.t-metszet .i.viz { stroke: var(--c); stroke-width: 2.4; }
.t-metszet .i.csat { stroke: var(--t-grafit); stroke-width: 4.4; }
.t-metszet .i.kor { stroke: var(--c); stroke-width: 2; }
.t-m-test { fill: var(--c-tint); stroke: none; opacity: 0; transition: opacity .25s ease; }
.on-hutes .t-m-hutes .i, .on-futes .t-m-futes .i, .on-epuletgepeszet .t-m-epuletgepeszet .i {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .62s cubic-bezier(.45, .05, .25, 1) calc(var(--tk) + var(--k, 0) * 80ms);
}
.on-hutes .t-m-hutes .t-m-test, .on-futes .t-m-futes .t-m-test, .on-epuletgepeszet .t-m-epuletgepeszet .t-m-test { opacity: 1; transition: opacity .3s ease calc(var(--tk) + .2s); }
/* működés: ventilátor, légáram, felszálló meleg, víz, zuhany, csatorna – csak bekapcsolt rétegen és a képernyőn */
.t-m-lapat { animation: t-forog 1.1s linear infinite; animation-play-state: paused; }
.t-m-aram path { fill: none; stroke-linecap: round; opacity: 0; transition: opacity .2s ease; animation: t-aram var(--ido, 1.4s) linear infinite; animation-play-state: paused; }
.t-m-aram .a-hideg { --per: 19px; --ido: 1.25s; stroke: var(--c); stroke-width: 2; stroke-dasharray: 9 10; }
.t-m-aram .a-meleg { --per: 16px; --ido: 1.5s; stroke: var(--c); stroke-width: 1.8; stroke-dasharray: 7 9; }
.t-m-aram .a-viz { --per: 16px; --ido: .9s; stroke: var(--t-papir); stroke-width: 1.6; stroke-dasharray: 3 13; }
.t-m-aram .a-csepp { --per: 14px; --ido: .55s; stroke: var(--c); stroke-width: 1.6; stroke-dasharray: 5 9; }
.t-m-aram .a-csat { --per: 20px; --ido: 1.3s; stroke: var(--t-papir); stroke-width: 1.6; stroke-dasharray: 4 16; }
.on-hutes .t-m-hutes .t-m-aram path, .on-futes .t-m-futes .t-m-aram path, .on-epuletgepeszet .t-m-epuletgepeszet .t-m-aram path { opacity: 1; transition: opacity .4s ease calc(var(--tk) + .6s); }
.js-rajz .on-hutes .t-metszet.is-lathato .t-m-hutes :is(.t-m-lapat, .t-m-aram path),
.js-rajz .on-futes .t-metszet.is-lathato .t-m-futes :is(.t-m-lapat, .t-m-aram path),
.js-rajz .on-epuletgepeszet .t-metszet.is-lathato .t-m-epuletgepeszet .t-m-aram path { animation-play-state: running; }
@keyframes t-forog { to { transform: rotate(360deg); } }
@keyframes t-aram { to { stroke-dashoffset: calc(var(--per) * -2); } }
/* a betűjelek: bekapcsolva teli kék, rámutatáskor (egérrel) a réteg halványan kékül – előnézet */
.t-m-jel circle { fill: var(--t-papir); stroke: var(--c); stroke-width: 2.2; transition: fill .2s ease; }
.t-m-jel text { font-family: var(--font); font-size: 26px; font-weight: 750; fill: var(--c); transition: fill .2s ease; }
.on-hutes .t-m-jel-hutes circle, .on-futes .t-m-jel-futes circle, .on-epuletgepeszet .t-m-jel-epuletgepeszet circle { fill: var(--c); }
.on-hutes .t-m-jel-hutes text, .on-futes .t-m-jel-futes text, .on-epuletgepeszet .t-m-jel-epuletgepeszet text { fill: var(--white); }
.t-metszet .t-m-ping { fill: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.js-rajz .t-metszet.is-rajzolva .t-m-ping { animation: t-ping 1.3s ease-out calc(var(--d, 0s) + .45s) 1; }
@keyframes t-ping { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
.elonezet-hutes .t-m-hutes .h, .elonezet-futes .t-m-futes .h, .elonezet-epuletgepeszet .t-m-epuletgepeszet .h { opacity: .55; stroke: var(--c); }
/* a tusrajz (Boldi, 2026-10-20, minta: heronaiapp.com): amikor a rajz vonalai kirajzolódtak és a rajz nagyrészt látszik
   (terv.js: .is-tus), alulról felfelé, tintafolt-szerű széllel előtűnik a kész, árnyalt tollrajz (kép, .t-m-render;
   eszkoz/metszet-tus.mjs). Két maszk emelkedik kicsit más ütemben: így a perem menet közben is változik, mint a folyó tus.
   A maszk 2,4-szer magasabb a rajznál, a tintaszél a közepén, ±16 %-os sávban: 2,86 %-nál épp a rajz alatt, 97,15 %-nál
   épp fölötte van. JS nélkül és csökkentett mozgásnál a kép rögtön egészben látszik. */
.t-m-vaszon { position: relative; }
.t-m-render { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-m-vaszon .t-metszet { position: relative; }
.js-rajz .t-m-render {
  -webkit-mask-image: url(../img/terv/tus-maszk.png), url(../img/terv/tus-maszk-2.png);
  mask-image: url(../img/terv/tus-maszk.png), url(../img/terv/tus-maszk-2.png);
  -webkit-mask-size: 100% 240%;
  mask-size: 100% 240%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 2.86%, 0 2.86%;
  mask-position: 0 2.86%, 0 2.86%;
}
.js-rajz .t-m-vaszon.is-tus .t-m-render { -webkit-mask-position: 0 97.15%, 0 97.15%; mask-position: 0 97.15%, 0 97.15%; }
@keyframes t-tus {
  0%   { -webkit-mask-position: 0 2.86%, 0 2.86%;   mask-position: 0 2.86%, 0 2.86%; }
  12%  { -webkit-mask-position: 0 10.4%, 0 6.63%;   mask-position: 0 10.4%, 0 6.63%; }
  28%  { -webkit-mask-position: 0 27.38%, 0 19.83%; mask-position: 0 27.38%, 0 19.83%; }
  45%  { -webkit-mask-position: 0 47.18%, 0 42.46%; mask-position: 0 47.18%, 0 42.46%; }
  62%  { -webkit-mask-position: 0 65.09%, 0 66.98%; mask-position: 0 65.09%, 0 66.98%; }
  80%  { -webkit-mask-position: 0 83.01%, 0 85.84%; mask-position: 0 83.01%, 0 85.84%; }
  100% { -webkit-mask-position: 0 97.15%, 0 97.15%; mask-position: 0 97.15%, 0 97.15%; }
}
@media (prefers-reduced-motion: no-preference) {
  .js-rajz .t-m-vaszon.is-tus .t-m-render { animation: t-tus 3.2s linear both; }
}
/* görgetés előtt (JS-sel) a tinta rejtve marad, a bevezető rajz végén húzódik ki (--tk) */
.js-rajz .t-metszet:not(.is-rajzolva) .i { stroke-dashoffset: 1 !important; transition: none !important; }
.js-rajz .t-metszet:not(.is-rajzolva) :is(.t-m-test, .t-m-aram path) { opacity: 0 !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .t-metszet .i, .t-m-test, .t-m-aram path, .t-reteg, .t-kapcsolo, .t-kapcsolo::after { transition: none !important; }
  .t-m-lapat, .t-m-aram path, .t-metszet .t-m-ping { animation: none !important; }
}

/* a találatdoboz (Boldi választása, 2026-10-20: „nem egyértelmű, mit csinál a gomb”): JS-sel, kijelölés nélkül a gombok
   alatt csak egy felszólítás látszik (felfelé mutató nyíllal); kijelölés után egy keretes doboz: fejléce „Hűtés – ezt
   vállaljuk (3)” (terv.js 4.), benne a kijelöléshez illő szolgáltatások, telefonon az ajánlatkérés, és a hasonló munkák.
   JS nélkül a doboz az összes szolgáltatással látszik. */
.t-talalat-hivas { grid-column: 1 / -1; display: none; align-items: center; gap: .55rem; margin: .35rem 0 0; font-size: 1.08rem; font-weight: 680; line-height: 1.3; color: var(--t-kek); }
.t-talalat-hivas svg { flex: none; width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.t-talalat-hivas .t-csak-ujj { display: none; }
@media (hover: none), (pointer: coarse) { .t-talalat-hivas .t-csak-eger { display: none; } .t-talalat-hivas .t-csak-ujj { display: inline; } }
.js-rajz .t-szolg-panel:not(.on-hutes):not(.on-futes):not(.on-epuletgepeszet) .t-talalat-hivas { display: flex; }
.js-rajz .t-szolg-panel:not(.on-hutes):not(.on-futes):not(.on-epuletgepeszet) .t-szolg-also { display: none; }
@keyframes t-nyil { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes t-doboz-be { from { opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: no-preference) {
  .t-talalat-hivas.is-lathato svg { animation: t-nyil 1.5s ease-in-out infinite; }
  .t-szolg-also { animation: t-doboz-be .4s var(--t-ease); }
}
.t-szolg-also {
  grid-area: also;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.1rem 1.15rem 1.3rem;
  border: 1.5px solid var(--t-grafit);
  background: var(--t-papir);
  box-shadow: 4px 4px 0 rgba(58, 63, 70, .08);
}
.t-talalat-cim { grid-column: 1 / -1; justify-self: start; margin: 0; padding: .15rem .35rem; border-radius: 3px; font-size: 1.25rem; font-stretch: 110%; font-weight: 740; line-height: 1.25; color: var(--t-tinta); }
.t-talalat-gomb { margin-top: 1.1rem; }
/* a dobozban a sor egymás alatt: név, leírás, címkék (a keskeny oszlopban így fér el) */
.t-szolg-also .row { grid-template-columns: minmax(0, 1fr) 1.25rem; grid-template-areas: "name go" "short go" "tags go"; }
.t-szolg-also .row-tags { justify-content: flex-start; margin-top: .35rem; }
/* asztalon a rajz a képernyőn marad, amíg mellette a listát görgetik */
@media (min-width: 961px) and (min-height: 640px) {
  .t-lap { position: sticky; top: 5.75rem; }
}
.terv .rows { position: relative; border-top: 1.5px solid var(--t-grafit); }
.terv .row { border-bottom: 1px solid rgba(58, 63, 70, .22); border-radius: 0; }
@media (hover: hover) and (pointer: fine) { .terv .row:hover { background: var(--t-kek-halvany, #EEF4FF); } }
.terv .row-tags .tag { border-radius: 3px; }
.t-szolg .row-tags { display: grid; grid-template-columns: 4.4rem 4.4rem 7.9rem; gap: .3rem .35rem; justify-items: start; }
.t-szolg .tag-hutes { grid-column: 1; }
.t-szolg .tag-futes { grid-column: 2; }
.t-szolg .tag-epuletgepeszet { grid-column: 3; }
.t-szolg .tag { gap: .3rem; padding: .1rem .45rem .1rem .22rem; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent); color: var(--c); font-weight: 600; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.t-szolg .tag::before { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; background: none; box-shadow: inset 0 0 0 1.2px currentColor; font-size: .66rem; font-weight: 800; line-height: 1; }
.t-szolg .tag-hutes::before { content: "A"; content: "A" / ""; }
.t-szolg .tag-futes::before { content: "B"; content: "B" / ""; }
.t-szolg .tag-epuletgepeszet::before { content: "C"; content: "C" / ""; }
.on-hutes .tag-hutes, .on-futes .tag-futes, .on-epuletgepeszet .tag-epuletgepeszet { background: var(--c-tint); box-shadow: inset 0 0 0 1.5px var(--c); }
.t-szolg-oldalak { margin: 1rem 0 0; font-size: .95rem; color: var(--t-tinta-2); }
.t-szolg-oldalak a { color: var(--t-kek); font-weight: 600; }
.t-szolg-fotok-cim { margin: 0 0 1.1rem; font-family: var(--t-kezi); font-size: .92rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; color: var(--t-tinta-2); }
.terv .thumbs { gap: 1.1rem; }
.terv .thumbs a { position: relative; overflow: visible; aspect-ratio: auto; border-radius: 0; padding: 5px 5px 7px; background: var(--white); box-shadow: 0 1px 2px rgba(26, 33, 80, .14), 0 8px 16px -12px rgba(26, 33, 80, .5); }
.terv .thumbs li:nth-child(odd) a { rotate: -1.4deg; }
.terv .thumbs li:nth-child(even) a { rotate: 1.2deg; }
.terv .thumbs img { aspect-ratio: 4 / 3; }
/* asztalon az első látszó fotó nagy, alatta kettő kicsi */
@media (min-width: 961px) {
  .t-szolg-fotok .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }
  .t-szolg-fotok .thumbs li:nth-child(1 of :not([hidden])) { grid-column: 1 / -1; }
  .t-szolg-fotok .thumbs li:nth-child(1 of :not([hidden])) a { rotate: -.8deg; }
}
.t-szolg-fotok .thumbs a::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -.55rem;
  left: 50%;
  width: 3.4rem;
  height: 1.1rem;
  margin-left: -1.7rem;
  background: var(--t-szalag, rgba(86, 146, 232, .55));
  rotate: -3deg;
  -webkit-mask-image: var(--t-szemcse);
  mask-image: var(--t-szemcse);
  -webkit-mask-size: 48px;
  mask-size: 48px;
}

/* ---------- Kék tervrajz (Így dolgozunk, Ajánlatkérés) ---------- */
.t-kek {
  background-color: var(--t-tervrajz);
  box-shadow: inset 0 0 0 12px var(--t-tervrajz), inset 0 0 0 13px rgba(255, 255, 255, .3), inset 0 0 0 19px var(--t-tervrajz), inset 0 0 0 21px rgba(255, 255, 255, .45);
  color: #EAF2FF;
}
@media (max-width: 760px) { .t-kek { box-shadow: none; } }
.t-kek h2, .t-kek h3 { color: var(--white); }
.t-kek .t-keret path { stroke: var(--white); }
.t-kek .t-gomb:focus-visible { outline-color: var(--white); }

/* ---------- Így dolgozunk: csőpár köti össze a lépéseket, görgetéskor töltődik (terv.js: --p) ---------- */
.t-folyamat { padding-block: var(--space); }
.t-lepesek-keret { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
.t-lepesek { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.t-lepes { position: relative; }
.t-lepes-jel {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 1.15rem;
  border-radius: 50%;
  background: var(--t-tervrajz);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .45);
  transition: box-shadow .4s ease;
}
.t-lepes.is-kesz .t-lepes-jel { box-shadow: 0 0 0 2px var(--white), 0 0 0 9px rgba(255, 255, 255, .1); }
.t-lepes-ikon { width: 44px; height: 44px; fill: none; stroke: var(--white); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.t-lepes-szam { display: block; font-family: var(--t-kezi); font-size: 1.15rem; font-weight: 700; line-height: 1; color: var(--t-fenykek, #9DD7FF); }
.t-lepes h3 { margin: .25rem 0 .5rem; font-size: 1.28rem; font-stretch: 108%; font-weight: 720; line-height: 1.2; }
.t-lepes p { margin: 0; color: rgba(234, 242, 255, .84); }
.js-rajz .t-lepes-ikon path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.45, .05, .25, 1); }
.js-rajz .t-lepes.is-kesz .t-lepes-ikon path { stroke-dashoffset: 0; }
.js-rajz .t-lepes h3, .js-rajz .t-lepes p, .js-rajz .t-lepes-szam { opacity: .38; transition: opacity .45s ease; }
.js-rajz .t-lepes.is-kesz h3, .js-rajz .t-lepes.is-kesz p, .js-rajz .t-lepes.is-kesz .t-lepes-szam { opacity: 1; }
/* a cső: a terv.js teszi a lépésjelek közepére (--x1, --x2 vagy --y1, --y2) */
.t-cso { position: absolute; z-index: 0; left: var(--x1, 38px); width: calc(var(--x2, 0px) - var(--x1, 0px)); top: calc(var(--y1, 38px) - 6px); height: 12px; border-top: 1.5px solid rgba(255, 255, 255, .28); border-bottom: 1.5px solid rgba(255, 255, 255, .28); }
.t-cso-tolt { position: absolute; inset: -1.5px 0; border-top: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.t-csepp { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--t-fenykek, #9DD7FF); box-shadow: 0 0 0 5px rgba(180, 190, 255, .22); }
@media (prefers-reduced-motion: reduce) {
  .js-rajz .t-lepes-ikon path { stroke-dashoffset: 0 !important; }
  .js-rajz .t-lepes h3, .js-rajz .t-lepes p, .js-rajz .t-lepes-szam { opacity: 1 !important; }
  .t-csepp { display: none; }
}

/* ---------- Klímák: a futószalag ceruzavázlatként (inc/gepek.php, assets/js/futoszalag.js) ---------- */
.terv .szalag-fej p { color: var(--t-tinta-2); }
.terv .szalag-szint-csik { height: 2px; background: rgba(58, 63, 70, .25); }
.terv .szalag-szint-csik span { background: var(--t-kek); }
.terv .szalag-szintek a.is-aktiv { color: var(--t-tinta); }
.terv .szalag-szo-nev { color: rgba(38, 97, 222, .07); -webkit-text-stroke: max(2px, .012em) rgba(58, 63, 70, .5); }
.terv .szalag-szo-leiras { color: var(--t-tinta-2); }
.terv .szalag-jelzes { font-weight: 680; color: var(--t-kek); }
.terv .szalag-sor::after {
  border-top: 2px solid var(--t-grafit);
  border-bottom: 2px solid var(--t-grafit);
  border-radius: 0;
  background: repeating-linear-gradient(90deg, rgba(58, 63, 70, .5) 0 1.5px, transparent 1.5px 1.4rem) 0 0 / 100% 45% no-repeat, var(--t-papir);
  box-shadow: none;
}
.terv .szalag-sor::before,
.terv .szalag-terep::after,
.terv .szalag.is-ragado .szalag-terep::after {
  background:
    linear-gradient(var(--t-grafit), var(--t-grafit)) 0 0 / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(22rem - 3px), var(--t-grafit) calc(22rem - 3px) 22rem) 0 2px / 100% 100% no-repeat;
  opacity: .8;
}
.terv .szalag-sor::before {
  background:
    radial-gradient(circle closest-side, var(--t-grafit) 0 14%, var(--t-papir) 16% 80%, var(--t-grafit) 82% 90%, transparent 93%) 1.5rem 0 / 5.5rem var(--gorgo) repeat-x,
    linear-gradient(var(--t-grafit), var(--t-grafit)) 0 var(--gorgo) / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(22rem - 3px), var(--t-grafit) calc(22rem - 3px) 22rem) 0 calc(var(--gorgo) + 2px) / 100% 100% no-repeat;
}
.terv .szalag-gorgok span { background: var(--t-papir); box-shadow: inset 0 0 0 1.6px var(--t-grafit); }
.terv .szalag-gorgok span::before { background: linear-gradient(90deg, transparent 45%, var(--t-grafit) 45% 55%, transparent 55%); opacity: .7; }
.terv .szalag-gorgok span::after { background: var(--t-grafit); }
.terv .szalag-gep { border: 1.5px solid var(--t-grafit); border-radius: 4px; background: var(--t-papir); box-shadow: 4px 4px 0 rgba(58, 63, 70, .1); }
/* a kártya színe a kategóriát sugallja (Boldi, 2026-10-23: „ne olvadjon egybe a lap színével”, majd „a színek is sugallják
   azt, hogy a gép melyik kategóriába tartozik”): belépő acélszürke, közép kék, prémium pezsgőarany – a kártya, a keret, a
   címke, a szintsáv és a háttérszó is (lent); a termékfotó doboza mindig a fotó saját (fehér) háttere marad */
/* 2026-10-26 (Boldi: az egyszínű tónus is „basic”, „valami gradiens szín”): fehérből a kategória színébe futó átmenet, a
   jobb felső sarokban halvány fényfolttal, a keret és az árnyék a kategória színében – ár-érték bajnok: zsálya,
   közép: indigó, prémium: pezsgőarany */
.terv .szalag-elem[data-szint="belepo"] .szalag-gep {
  border-color: #8DB0A3;
  background: radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, .9), transparent 55%), linear-gradient(165deg, #FFFFFF 0%, #EEF5F1 48%, #D3E6DD 100%);
  box-shadow: 4px 4px 0 rgba(47, 107, 92, .14);
}
.terv .szalag-elem[data-szint="kozep"] .szalag-gep {
  border-color: rgba(38, 59, 170, .5);
  background: radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, .9), transparent 55%), linear-gradient(165deg, #FFFFFF 0%, #EEF1FC 48%, #D5DCF6 100%);
  box-shadow: 4px 4px 0 rgba(38, 59, 170, .14);
}
.terv .szalag-elem[data-szint="premium"] .szalag-gep {
  border: 1.5px solid #B8964F;
  background: radial-gradient(120% 70% at 100% 0%, rgba(255, 253, 244, .95), transparent 55%), linear-gradient(165deg, #FFFEF9 0%, #F8EFDA 48%, #EAD5A4 100%);
  box-shadow: 4px 4px 0 rgba(150, 112, 40, .2);
}
.terv .szalag-gep-rajz { border-radius: 2px 2px 0 0; background: transparent; border-bottom: 1px dashed rgba(58, 63, 70, .4); }
.terv .szalag-gep-rajz .gep-rajz rect { fill: var(--t-papir); stroke: var(--t-grafit); stroke-width: 3; }
.terv .szalag-gep-rajz .gep-rajz path { stroke: var(--t-grafit); opacity: .55; }
.terv .szalag-gep-rajz .gep-rajz ellipse { fill: var(--t-grafit); opacity: .07; }
.terv .szalag-gep-rajz .gep-rajz circle { fill: var(--t-kek); }
.terv .szalag-gep .tag { border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: var(--t-kek); }
.terv .szalag-gep-tovabb { color: var(--t-kek); }
.terv .szalag-gep-tovabb .icon { border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1.4px currentColor; }
/* a kategória színe a címkén (a szalagon és a részletezőben is), a szintsávon és a háttérszón */
.terv .tag.szint-belepo { color: #2F6B5C; background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.terv .tag.szint-kozep { color: var(--t-kek); background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.terv .tag.szint-premium { color: #5A4416; background: #F3EAD3; box-shadow: inset 0 0 0 1px #C2A66C; }
.terv .szalag-szintek [data-szalag-szint="belepo"] .szalag-szint-csik span { background: linear-gradient(90deg, #8DC2B0, #3F7F6E); }
.terv .szalag-szintek [data-szalag-szint="kozep"] .szalag-szint-csik span { background: linear-gradient(90deg, #7F92E6, var(--t-kek)); }
.terv .szalag-szintek [data-szalag-szint="premium"] .szalag-szint-csik span { background: linear-gradient(90deg, #DDB95F, #A97F2F); }
.terv [data-szalag-szo="belepo"] .szalag-szo-nev { color: rgba(63, 127, 110, .08); -webkit-text-stroke-color: rgba(47, 107, 92, .55); }
.terv [data-szalag-szo="kozep"] .szalag-szo-nev { color: rgba(38, 59, 170, .07); -webkit-text-stroke-color: rgba(38, 59, 170, .55); }
.terv [data-szalag-szo="premium"] .szalag-szo-nev { color: rgba(214, 172, 80, .16); -webkit-text-stroke-color: rgba(160, 120, 40, .8); }
/* a hőszivattyúk kártyáin (hsz_szalag_kartya) az „Alap” a klímák ár-érték bajnokának zsályáját kapja – az üvegkártya alapszíne is
   ez –, a prémium ugyanaz a pezsgőarany */
.terv .tag.szint-alap { color: #2F6B5C; background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.terv .szalag-szintek [data-szalag-szint="alap"] .szalag-szint-csik span { background: linear-gradient(90deg, #8DC2B0, #3F7F6E); }
.terv [data-szalag-szo="alap"] .szalag-szo-nev { color: rgba(63, 127, 110, .08); -webkit-text-stroke-color: rgba(47, 107, 92, .55); }
@media (hover: hover) and (pointer: fine) {
  .terv .szalag-gep:hover { border-color: var(--t-kek); box-shadow: 6px 10px 0 rgba(58, 63, 70, .1); }
  .terv .szalag-gep:hover .szalag-gep-tovabb .icon { background: var(--t-kek); color: var(--white); box-shadow: none; }
}
.terv .szalag-elem.is-leemelve .szalag-gep { border-style: dashed; box-shadow: none; }
.terv .szalag-vege-kartya { border: 1.5px solid var(--t-grafit); border-radius: 4px; background: var(--t-kek-halvany, #EEF4FF); box-shadow: 4px 4px 0 rgba(58, 63, 70, .1); }
/* a lapozó nyilak (a tapadás nélküli sorban) rajzlap-gombok */
.terv .szalag-lapoz { border-color: var(--t-grafit); border-radius: 4px; background: var(--t-papir); box-shadow: 3px 3px 0 rgba(58, 63, 70, .14); color: var(--t-tinta); }
@media (hover: hover) and (pointer: fine) { .terv .szalag-lapoz:hover { border-color: var(--t-kek); color: var(--t-kek); } }

/* ---------- 3D üvegkártyák (Boldi, 2026-10-26: „glassmorphism stílusban 3 különböző színben”, majd „valódi 3d
   üveghatásra”, a középhez más színnel) ----------
   Rétegek: mögötte a kategória színes fényfoltja (.szalag-elem::before); a kártya áttetsző, a mögötte lévőt elmosó üveg,
   vastag peremmel (világos felső-bal, színes alsó-jobb él, alatta az üveglap vastagsága); a peremen fénytörés-csík
   (::before); felül fényes visszaverődés (::after), ami egérrel követi a mutatót, és a kártya a mutató felé dől
   (futoszalag.js: --dol-x, --dol-y, --feny-x, --feny-y). A fenti színátmenetes kártyát ez a blokk írja felül – törlésével
   az visszajön. */
.terv .szalag-elem { --uveg-a: rgba(38, 170, 132, .85); --uveg-b: rgba(110, 214, 186, .8); --uveg-el: rgba(24, 112, 88, .32); --uveg-arnyek: rgba(30, 110, 90, .3); position: relative; isolation: isolate; }
.terv .szalag-elem[data-szint="kozep"] { --uveg-a: rgba(164, 82, 232, .8); --uveg-b: rgba(234, 108, 196, .66); --uveg-el: rgba(112, 48, 170, .3); --uveg-arnyek: rgba(112, 48, 170, .3); }
/* prémium: pezsgőarany – barack nélkül, hogy a narancs csak a gombok színe maradjon (Boldi, 2026-10-26) */
.terv .szalag-elem[data-szint="premium"] { --uveg-a: rgba(222, 178, 64, .82); --uveg-b: rgba(240, 214, 140, .78); --uveg-el: rgba(138, 104, 28, .34); --uveg-arnyek: rgba(138, 106, 36, .3); }
.terv .szalag-elem::before {
  content: ""; position: absolute; z-index: -1; inset: 8% 3% 3%; border-radius: 24px; pointer-events: none;
  background: radial-gradient(85% 55% at 12% 52%, var(--uveg-a), transparent 72%), radial-gradient(80% 55% at 92% 92%, var(--uveg-b), transparent 72%), radial-gradient(60% 40% at 85% 38%, var(--uveg-b), transparent 75%);
}
.terv .szalag-elem[data-szint] .szalag-gep {
  --dol-x: 0deg; --dol-y: 0deg; --feny-x: 18%; --feny-y: 0%;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 18px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .14) 55%, rgba(255, 255, 255, .26));
  -webkit-backdrop-filter: blur(16px) saturate(175%); backdrop-filter: blur(16px) saturate(175%);
  transform: perspective(900px) rotateX(var(--dol-x)) rotateY(var(--dol-y));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 1.5px 0 0 rgba(255, 255, 255, .55),
    inset 0 -2.5px 0 var(--uveg-el), inset -1.5px 0 0 var(--uveg-el),
    0 3px 0 -1px var(--uveg-el), 0 5px 0 -2px rgba(255, 255, 255, .45),
    0 26px 40px -22px var(--uveg-arnyek), 0 10px 16px -12px rgba(20, 24, 50, .22);
}
/* fénytörés a peremen: a kerethez simuló, színeiben változó vékony csík */
.terv .szalag-elem[data-szint] .szalag-gep::before {
  content: ""; position: absolute; z-index: 2; inset: -1px; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), var(--uveg-a) 30%, rgba(255, 255, 255, .25) 55%, var(--uveg-b) 80%, rgba(255, 255, 255, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .8;
}
/* fényes visszaverődés: ferde csík felül + a mutatót követő fényfolt */
.terv .szalag-elem[data-szint] .szalag-gep::after {
  content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(40% 30% at var(--feny-x) var(--feny-y), rgba(255, 255, 255, .5), transparent 70%),
    linear-gradient(118deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .1) 22%, transparent 23%, transparent 62%, rgba(255, 255, 255, .12) 63%, transparent 76%);
  mix-blend-mode: soft-light;
}
/* a termékfotó fehér hátterű: belül lekerekített fehér tábla, kicsit az üvegbe süllyesztve */
.terv .szalag-elem[data-szint] .szalag-gep-rajz { margin: .5rem .5rem 0; border: 0; border-radius: 12px; box-shadow: inset 0 1px 3px rgba(20, 30, 60, .1), 0 1px 0 rgba(255, 255, 255, .8); }
.terv .szalag-elem[data-szint] .tag { background: rgba(255, 255, 255, .55); }
@media (hover: hover) and (pointer: fine) {
  .terv .szalag-elem[data-szint] .szalag-gep:hover {
    border-color: rgba(255, 255, 255, .8);
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 1.5px 0 0 rgba(255, 255, 255, .6),
      inset 0 -2.5px 0 var(--uveg-el), inset -1.5px 0 0 var(--uveg-el),
      0 3px 0 -1px var(--uveg-el), 0 5px 0 -2px rgba(255, 255, 255, .45),
      0 40px 50px -26px var(--uveg-arnyek), 0 16px 22px -14px rgba(20, 24, 50, .26);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .terv .szalag-elem[data-szint] .szalag-gep { transition: translate .3s cubic-bezier(.23, 1, .32, 1), scale .12s ease-out, box-shadow .3s cubic-bezier(.23, 1, .32, 1), border-color .2s ease, transform .25s ease-out; }
  .terv .szalag-elem[data-szint] .szalag-gep.is-dol { transition: translate .3s cubic-bezier(.23, 1, .32, 1), scale .12s ease-out, box-shadow .3s cubic-bezier(.23, 1, .32, 1), border-color .2s ease, transform .08s linear; }
}
.terv .szalag-elem.is-leemelve[data-szint] .szalag-gep { border: 1.5px dashed rgba(58, 63, 70, .35); background: rgba(255, 255, 255, .3); box-shadow: none; transform: none; }
.terv .szalag-elem.is-leemelve[data-szint] .szalag-gep::before, .terv .szalag-elem.is-leemelve[data-szint] .szalag-gep::after { display: none; }
.terv .szalag-elem.is-leemelve::before { opacity: .35; }
/* a középszint a címkén, a szintsávon és a háttérszón is orchidea */
.terv .tag.szint-kozep { color: #7A3DB8; }
.terv .szalag-szintek [data-szalag-szint="kozep"] .szalag-szint-csik span { background: linear-gradient(90deg, #D49BEF, #8A4FD0); }
.terv [data-szalag-szo="kozep"] .szalag-szo-nev { color: rgba(138, 79, 208, .07); -webkit-text-stroke-color: rgba(122, 61, 184, .55); }
/* a szalag végi csempe is üveg, semleges kékben */
.terv .szalag-vege-kartya {
  border: 1px solid rgba(255, 255, 255, .78); border-radius: 18px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .7), rgba(232, 238, 255, .4));
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -2px 0 rgba(38, 59, 170, .14), 0 3px 0 -1px rgba(38, 59, 170, .2), 0 22px 36px -20px rgba(38, 59, 170, .26);
}
/* a részletező: rajzlap, a gép itt már a valódi színében */
.terv .szr-panel { border-radius: 6px; background: var(--t-papir); box-shadow: 0 0 0 1.5px var(--t-grafit), 0 40px 90px -40px rgba(10, 14, 40, .75); }
.terv .szr-galeria { background: transparent; border-right: 1px solid rgba(58, 63, 70, .3); }
.terv .szr-meretlista li { border-radius: 3px; border-color: rgba(58, 63, 70, .3); }
/* az ár méretválasztóval (gep_ardoboz, hsz_ardoboz) rajzlap-doboz, mint a többi: szögletes, grafit keret, kis eltolt árnyék */
.terv .ardoboz { border: 1.5px solid var(--t-grafit); border-radius: 4px; background: var(--white); box-shadow: 4px 4px 0 rgba(58, 63, 70, .08); }
.terv .ardoboz-valaszto { border-color: rgba(58, 63, 70, .55); border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .terv .ardoboz-valaszto:hover { border-color: var(--t-kek); } }
.terv .ardoboz-ar strong, .terv .ardoboz-ar.is-keres { color: var(--t-tinta); }
.terv .szr-bezar { border-radius: 4px; }

/* ---------- Tervezze meg előre: az eszközök rajzlapokon ---------- */
.terv .eszkoz-link { border: 1.5px solid var(--t-grafit); border-radius: 4px; background: var(--t-papir); box-shadow: 4px 4px 0 rgba(58, 63, 70, .08); }
.terv .eszkoz-link:focus-visible { border-radius: 4px; }
.terv .eszkoz-abra { background: transparent; border-bottom: 1px dashed rgba(58, 63, 70, .4); }
.terv .ea-racs { display: none; }
.terv .ea-fal { stroke: var(--t-grafit); }
.terv .ea-gep { fill: var(--t-papir); stroke: var(--t-grafit); }
.terv .eszkoz-uj { border-radius: 3px; background: var(--t-narancs); color: var(--t-tinta); }
.terv .eszkoz-kiemeles { border-radius: 3px; }
.terv .eszkoz-gomb { color: var(--t-kek); }
@media (hover: hover) and (pointer: fine) {
  .terv .eszkoz-link:hover { border-color: var(--t-kek); box-shadow: 6px 10px 0 rgba(58, 63, 70, .1); transform: translateY(-2px); }
}

/* ---------- Feltűzött fotók: fehér szélű kép, kék festőszalaggal ---------- */
.t-ragasztott {
  position: relative;
  display: block;
  padding: 9px 9px 11px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(26, 33, 80, .16), 0 14px 26px -18px rgba(26, 33, 80, .5);
  color: var(--white);
  rotate: var(--r, 0deg);
  transition: rotate .35s var(--t-ease), translate .35s var(--t-ease), box-shadow .35s var(--t-ease);
}
.t-ragasztott img { display: block; width: 100%; height: auto; }
.t-ragasztott::before,
.t-ragasztott::after {
  content: "";
  position: absolute;
  top: -.75rem;
  width: 5.4rem;
  height: 1.55rem;
  background: var(--t-szalag, rgba(86, 146, 232, .55));
  -webkit-mask-image: var(--t-szemcse);
  mask-image: var(--t-szemcse);
  -webkit-mask-size: 48px;
  mask-size: 48px;
}
.t-ragasztott::before { left: -1.3rem; rotate: -36deg; }
.t-ragasztott::after { right: -1.3rem; rotate: 34deg; }
/* a munkák fotóin egy szalag felül középen (két sarokszalag csak a nagy fotón) */
.t-tabla .t-ragasztott::before,
.t-ragasztott-kicsi::before { left: 50%; margin-left: -2.6rem; rotate: -4deg; }
.t-tabla-elem:nth-child(even) .t-ragasztott::before { rotate: 3deg; }
.t-ragasztott-kicsi::before { margin-left: -2.2rem; width: 4.4rem; }
.t-tabla .t-ragasztott::after,
.t-ragasztott-kicsi::after { display: none; }
.t-ragasztott::before { transform-origin: 0 50%; }
.t-ragasztott::after { transform-origin: 100% 50%; }
/* feltűzés (terv.js: data-tuz → is-tuzve): a fotó kicsit fölülről, nagyobban és jobban megdöntve ereszkedik a helyére,
   aztán ráragad a szalag; a cetli ugyanígy, a pecsét lecsapódik – sorban (--dl). Egyszer, az első megjelenéskor. */
.js-rajz [data-tuz]:not(.is-tuzve) .t-ragasztott,
.js-rajz [data-tuz]:not(.is-tuzve) .t-cetli { opacity: 0; translate: 0 -14px; scale: 1.04; rotate: calc(var(--r, 0deg) + 3deg); }
.js-rajz [data-tuz]:not(.is-tuzve) .t-ragasztott::before,
.js-rajz [data-tuz]:not(.is-tuzve) .t-ragasztott::after { scale: 0 1; }
.js-rajz [data-tuz].is-tuzve:not(.is-tuzve-kesz) .t-ragasztott,
.js-rajz [data-tuz].is-tuzve:not(.is-tuzve-kesz) .t-cetli {
  transition: opacity .3s ease var(--dl, 0s), translate .65s var(--t-ease) var(--dl, 0s), scale .65s var(--t-ease) var(--dl, 0s), rotate .65s var(--t-ease) var(--dl, 0s);
}
.js-rajz [data-tuz].is-tuzve:not(.is-tuzve-kesz) .t-ragasztott::before,
.js-rajz [data-tuz].is-tuzve:not(.is-tuzve-kesz) .t-ragasztott::after { transition: scale .24s cubic-bezier(.3, .7, .4, 1) calc(var(--dl, 0s) + .45s); }
.js-rajz .t-markak [data-tuz]:not(.is-tuzve) .t-logo { opacity: 0; scale: 1.15; }
.js-rajz .t-markak [data-tuz].is-tuzve:not(.is-tuzve-kesz) .t-logo { transition: opacity .12s linear var(--dl, 0s), scale .26s cubic-bezier(.2, .9, .35, 1) var(--dl, 0s); }
@media (prefers-reduced-motion: reduce) {
  .js-rajz [data-tuz]:not(.is-tuzve) .t-ragasztott,
  .js-rajz [data-tuz]:not(.is-tuzve) .t-cetli { opacity: 1; translate: none; scale: none; rotate: var(--r, 0deg); }
  .js-rajz [data-tuz]:not(.is-tuzve) .t-ragasztott::before,
  .js-rajz [data-tuz]:not(.is-tuzve) .t-ragasztott::after,
  .js-rajz .t-markak [data-tuz]:not(.is-tuzve) .t-logo { opacity: 1; scale: none; }
}

/* ---------- Rólunk ---------- */
/* a feltűzés közben a nagyobbra vett fotó ne nyújtsa meg oldalra a lapot (telefonon a fotó teljes szélességű) */
.t-rolunk, .t-munkak { overflow-x: clip; }
.t-rolunk { padding-block: var(--space); }
.t-rolunk-racs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2rem, 6vw, 5.5rem); }
/* a szélesség előre adott (nem a betöltött képhez zsugorodik): a lusta kép helye így betöltés előtt is kitart, és a lejjebb
   mutató horgonyok (#ajanlat, #munkaink) első ugrásra is a helyükre érnek */
.t-ragasztott-nagy { width: min(100%, 26rem); max-width: 26rem; justify-self: center; }
.t-rolunk-szoveg p { font-size: 1.08rem; color: var(--t-tinta-2); }
.t-fejlec-tabla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.75rem 0 0; border: 1.5px solid var(--t-grafit); }
.t-fejlec-tabla > div { padding: .9rem 1.1rem 1rem; }
.t-fejlec-tabla > div + div { border-left: 1px solid rgba(58, 63, 70, .45); }
.t-fejlec-tabla dt { font-size: clamp(1.9rem, 3vw, 2.5rem); font-stretch: 115%; font-weight: 760; line-height: 1.05; color: var(--t-tinta); }
.t-fejlec-tabla dd { margin: .3rem 0 0; font-size: .95rem; line-height: 1.4; color: var(--t-tinta-2); }

/* ---------- Munkáink: a rajzlapra tűzött fotók, alattuk ceruzás felirat ---------- */
.t-munkak { padding-block: var(--space); }
.t-tabla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 4.5vw, 3.75rem) clamp(1.75rem, 3.2vw, 3rem); margin: 0; padding: 0; list-style: none; }
.t-tabla-elem .t-ragasztott { cursor: zoom-in; }
.t-tabla-elem .t-ragasztott img { aspect-ratio: 4 / 3; object-fit: cover; }
.t-fotoszam { position: absolute; right: 17px; bottom: 19px; display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .55rem; border-radius: 3px; background: rgba(26, 33, 80, .78); color: var(--white); font-size: .82rem; font-weight: 650; }
.t-fotoszam .icon { width: 1rem; height: 1rem; }
.t-felirat { margin: 1.05rem 0 .25rem; font-family: var(--t-kezi); font-size: 1.12rem; font-weight: 700; line-height: 1.2; color: var(--t-tinta); }
.t-felirat-mit { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--t-tinta-2); }
@media (hover: hover) and (pointer: fine) {
  .t-tabla-elem .t-ragasztott:hover { rotate: 0deg; translate: 0 -5px; box-shadow: 0 2px 4px rgba(26, 33, 80, .18), 0 26px 40px -22px rgba(26, 33, 80, .55); }
}
.t-ragasztott:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 4px; }
.t-cetli-elem { align-self: center; }
.t-cetli { padding: 1.5rem 1.5rem 1.6rem; background: #E6F0FF; box-shadow: 0 1px 2px rgba(26, 33, 80, .14), 0 14px 26px -18px rgba(26, 33, 80, .5); rotate: var(--r, 0deg); }
.t-cetli h3 { margin-bottom: .5rem; font-family: var(--t-kezi); font-size: 1.35rem; font-weight: 720; line-height: 1.15; color: var(--t-tinta); }
.t-cetli p { color: var(--t-tinta-2); }
.t-cetli-tel { display: block; margin-bottom: .4rem; font-size: 1.5rem; font-stretch: 112%; font-weight: 700; color: var(--t-tinta); text-decoration: none; }
.t-cetli .t-gomb { margin-top: .9rem; }
/* az ötödik csempe az albumba visz (a hatodik az ajánlatkérés cetlije; Boldi, 2026-10-23) */
.t-tabla-elem .t-album-kartya { cursor: pointer; text-decoration: none; }
.t-album-kartya-szoveg {
  position: absolute;
  inset: 9px 9px 11px;
  display: grid;
  place-content: center;
  gap: .45rem;
  padding: .75rem;
  background: color-mix(in srgb, var(--t-tinta) 76%, transparent);
  color: var(--white);
  text-align: center;
  transition: background-color .25s ease;
}
.t-album-kartya-szoveg strong { font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-stretch: 112%; font-weight: 720; line-height: 1.15; }
.t-album-kartya-szoveg span { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font-size: .95rem; font-weight: 600; line-height: 1.3; }
.t-album-kartya-szoveg .icon { flex: none; width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .t-album-kartya:hover .t-album-kartya-szoveg { background: color-mix(in srgb, var(--t-tinta) 86%, transparent); }
}

/* ---------- Munkáink: a teljes fotóalbum (pages/munkaink.php) ----------
   A nagyobb munkák egy-egy lapon, alattuk rajzfejléc (hol, mit, melyik terület); a többi fotó a rajzlapra tűzve, hasábokban. */
.t-album { overflow-x: clip; padding-block: clamp(2.5rem, 5vw, 4rem) var(--space); }
.t-album-cim { margin: 0 0 1.75rem; font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-stretch: 112%; font-weight: 720; }
.t-album-cim:not(:first-child) { margin-top: clamp(3.5rem, 6vw, 5rem); }
.t-album-munkak { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.t-album-munka { display: grid; gap: .8rem; min-width: 0; }
.t-album-munka.is-szeles { grid-column: 1 / -1; }
.t-album-fo, .t-album-kicsik a {
  position: relative;
  display: block;
  padding: 9px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(26, 33, 80, .16), 0 14px 26px -18px rgba(26, 33, 80, .5);
  cursor: zoom-in;
  transition: translate .35s var(--t-ease), box-shadow .35s var(--t-ease);
}
.t-album-fo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.t-album-munka.is-szeles .t-album-fo img { aspect-ratio: 2 / 1; }
.t-album-kicsik { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.t-album-kicsik a { width: 6.5rem; padding: 5px; }
.t-album-kicsik img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
/* rajzfejléc: mint a tervlap sarkában a szövegmező */
.t-album-fejlec { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem 1.25rem; padding: .85rem 1.1rem .95rem; border: 1.5px solid var(--t-grafit); background: var(--t-papir); }
.t-album-fejlec h3 { margin: 0 0 .25rem; font-family: var(--t-kezi); font-size: 1.15rem; font-stretch: 75%; font-weight: 700; letter-spacing: .015em; line-height: 1.2; color: var(--t-tinta); }
.t-album-fejlec p { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--t-tinta-2); }
.t-album-cimkek { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.t-album-cimkek .t-pecset { padding: .2rem .55rem; font-size: .78rem; }
.t-album-tabla { columns: 3; column-gap: clamp(1.5rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.t-album-tabla li { break-inside: avoid; padding: .9rem 0 clamp(1.25rem, 2.5vw, 2rem); }
.t-album-tabla .t-ragasztott { cursor: zoom-in; }
.t-album-veg { display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.t-album-veg .t-cetli { max-width: 26rem; }
@media (hover: hover) and (pointer: fine) {
  .t-album-fo:hover, .t-album-kicsik a:hover { translate: 0 -4px; box-shadow: 0 2px 4px rgba(26, 33, 80, .18), 0 26px 40px -22px rgba(26, 33, 80, .55); }
  .t-album-tabla .t-ragasztott:hover { rotate: 0deg; translate: 0 -5px; box-shadow: 0 2px 4px rgba(26, 33, 80, .18), 0 26px 40px -22px rgba(26, 33, 80, .55); }
}
.t-album-fo:focus-visible, .t-album-kicsik a:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 4px; }
.t-markak { margin-top: clamp(3rem, 6vw, 4.5rem); }
.t-markak-cim { margin-bottom: 1rem; font-weight: 700; color: var(--t-tinta); }
/* szerelt márkák: a gyártó logója fehér címkén (Boldi, 2026-10-23). Elöl a kínálatunk négy márkája nagyobb címkén – ezek a
   gépeink oldalára visznek –, utánuk a többi hat: 12 hasábos rács, 4 × 3 + 6 × 2. --lh a logó magassága (home-terv.php). */
.t-logok { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.7rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.t-logo { grid-column: span 2; rotate: var(--r, 0deg); }
.t-logo-kinalat { grid-column: span 3; }
.t-logo-lap {
  position: relative;
  display: grid;
  place-items: center;
  height: 4.75rem;
  padding: .6rem 1rem;
  border: 1px solid rgba(26, 33, 80, .14);
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(26, 33, 80, .12), 0 10px 18px -14px rgba(26, 33, 80, .5);
  color: var(--t-tinta);
  font-weight: 750;
  text-decoration: none;
}
.t-logo-kinalat .t-logo-lap { height: 5.75rem; border-color: rgba(38, 59, 170, .35); }
.t-logo-lap img { display: block; width: auto; max-width: 100%; height: var(--lh, 28px); object-fit: contain; }
a.t-logo-lap { transition: translate .2s ease, box-shadow .2s ease, scale .15s ease; }
a.t-logo-lap:active { scale: .98; }
a.t-logo-lap:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 10px; }
/* a kínálat címkéje: amikor a sáv a képernyőre ér, rácsapódik a „Kínálat” pecsét, és ott marad, hogy telefonon is látsszon:
   ez kattintható; utána időnként hullám fut végig a négy címkén – sorban megemelkednek és visszaülnek (Boldi, 2026-10-23:
   „a 4 logó inkább rendelkezzen egy kis motionnel”) */
.js-rajz .t-logok.is-tuzve-kesz .t-logo-kinalat,
html:not(.js-rajz) .t-logo-kinalat { animation: t-logo-hullam 5s cubic-bezier(.3, .7, .4, 1) calc(var(--i, 0) * .16s + .4s) infinite; }
@keyframes t-logo-hullam {
  0%, 24%, 100% { translate: 0 0; }
  8% { translate: 0 -8px; }
  16% { translate: 0 1.5px; }
}
.t-logo-pecset {
  --r: -6deg;
  position: absolute;
  right: -.6rem;
  bottom: -.85rem;
  padding: .14rem .45rem;
  background: #fff;
  font-size: .72rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.js-rajz .t-logok:not(.is-tuzve) .t-logo-pecset { opacity: 0; scale: 1.6; }
.js-rajz .t-logok.is-tuzve:not(.is-tuzve-kesz) .t-logo-pecset {
  transition: opacity .12s linear calc(var(--dl, 0s) + 1.05s), scale .28s cubic-bezier(.2, .9, .35, 1) calc(var(--dl, 0s) + 1.05s), background-color .2s ease, color .2s ease;
}
a.t-logo-lap:focus-visible .t-logo-pecset { background: var(--t-kek); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  a.t-logo-lap:hover { translate: 0 -3px; box-shadow: 0 2px 4px rgba(26, 33, 80, .16), 0 16px 26px -16px rgba(26, 33, 80, .55); }
  a.t-logo-lap:hover .t-logo-pecset { background: var(--t-kek); color: var(--white); }
}
@media (prefers-reduced-motion: reduce) {
  .js-rajz .t-logok:not(.is-tuzve) .t-logo-pecset { opacity: 1; scale: none; }
  .t-logok .t-logo-kinalat { animation: none !important; }
}
.t-pecset {
  padding: .3rem .75rem;
  border: 2px solid rgba(38, 59, 170, .75);
  border-radius: 3px;
  color: rgba(38, 59, 170, .9);
  font-size: .9rem;
  font-stretch: 82%;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
  rotate: var(--r, 0deg);
  -webkit-mask-image: var(--t-szemcse);
  mask-image: var(--t-szemcse);
  -webkit-mask-size: 64px;
  mask-size: 64px;
}
.t-markak-megj { margin: 1rem 0 0; font-family: var(--t-kezi); font-size: 1rem; font-weight: 550; color: var(--t-tinta-2); }

/* ---------- Hol dolgozunk: helyszínrajz ---------- */
.terv .area-text p { color: var(--t-tinta-2); }
.terv .towns li { border-radius: 3px; border-color: rgba(58, 63, 70, .4); background: var(--t-papir); }
.terv .towns .is-home { border-color: var(--t-tinta); background: var(--t-tinta); }
.terv .towns .has-munka { background: none; }
.terv .towns .has-munka a { border-radius: 3px; }
.terv .area-map { border-radius: 4px; background: var(--t-papir); box-shadow: 0 0 0 1.5px var(--t-grafit), 6px 6px 0 rgba(58, 63, 70, .07); }
.terv .map-river { stroke: #A9CDF2; }
.terv .map-city { fill: var(--t-papir); stroke: var(--t-grafit); }
.terv .map-dot { fill: var(--t-grafit); stroke: var(--t-papir); }
.terv .map-home circle { fill: var(--t-tinta); }
.terv .map-label { fill: var(--t-tinta); stroke: var(--t-papir); }
.terv .map-card { border-radius: 4px; }
.terv .map-card-foto { border-radius: 2px; }
/* a helyszínrajz: előbb a Duna rajzolódik ki, utána ugranak elő a munkák jelei (site.js: is-varakozik → is-latszik) */
.terv .map-wrap.is-varakozik .map-river { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.terv .map-wrap.is-latszik .map-river { animation: t-huz 1.4s cubic-bezier(.45, .05, .25, 1) forwards; }
.terv .map-wrap.is-latszik .map-river + .map-river { animation-delay: .35s; }
.terv .map-wrap.is-latszik .map-pin-jel { animation-delay: calc(var(--i, 0) * 110ms + 1000ms); }
.terv .map-wrap.is-latszik .map-pin-jel::after { animation-delay: calc(var(--i, 0) * 110ms + 1500ms); }

/* ---------- Ajánlatkérés: megrendelőlap a kék tervrajzon ---------- */
.terv .t-ajanlat .quote-intro p { color: rgba(234, 242, 255, .86); }
.terv .t-ajanlat .field input,
.terv .t-ajanlat .field select,
.terv .t-ajanlat .field textarea { border-radius: 3px; border: 1.5px solid rgba(255, 255, 255, .0); }
.terv .t-ajanlat .field input:focus-visible,
.terv .t-ajanlat .field select:focus-visible,
.terv .t-ajanlat .field textarea:focus-visible { outline: 3px solid var(--t-narancs); outline-offset: 1px; }
/* a választó ugyanolyan magas legyen, mint a beviteli mezők (a böngésző a select sorát alacsonyabbra méri) */
.terv .t-ajanlat .field select { min-height: 3.33rem; line-height: 1.6; }
/* a kék lapon a linkek és a pipa fókuszkerete is narancs (az alap kék a kéken alig látszik) */
.terv .t-ajanlat :is(a, .check input):focus-visible { outline: 3px solid var(--t-narancs); outline-offset: 3px; }
.terv .t-ajanlat .field [aria-invalid="true"] { border-color: var(--t-narancs); }
.terv .t-ajanlat .pill-face { border-radius: 3px; }
.terv .t-ajanlat .t-gomb { justify-self: start; }
.terv .t-ajanlat .check input { accent-color: var(--t-narancs); }
/* elküldés után: krétával kipipálva (ritka, örömteli pillanat – egyszer rajzolódik ki) */
.t-pipa { display: block; width: 4rem; height: 4rem; margin-bottom: .75rem; }
.t-pipa path { fill: none; stroke: var(--white); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Lábléc: rajzfejléc – a három cella egy keretben, vékony elválasztó vonalakkal; az alsó sáv kereten kívül ---------- */
.terv .site-footer { background: transparent; color: var(--t-tinta-2); }
.terv .lablec { gap: 0; border: 1.5px solid var(--t-grafit); background: var(--t-papir); }
.terv .lablec > * { padding: 1rem 1.25rem; }
.terv .lablec > * + * { border-left: 1px solid rgba(58, 63, 70, .4); }
.terv .lablec-also { border-top: 0; padding-top: 0; }
@media (max-width: 960px) {
  .terv .lablec-oldalak { border-left: 0 !important; border-top: 1px solid rgba(58, 63, 70, .4); }
}
@media (max-width: 600px) {
  .terv .lablec > * { padding: .75rem .9rem; }
  .terv .lablec > * + * { border-left: 0; border-top: 1px solid rgba(58, 63, 70, .4); }
  .terv .site-footer { padding-block: 1.25rem .6rem; }
}

/* ---------- Telefonon: alsó sáv ---------- */
.terv .mobile-bar { background: rgba(250, 246, 238, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top-color: rgba(58, 63, 70, .3); }
.terv .mobile-bar .btn { border-radius: 4px; }
.terv .mobile-bar .btn-primary { background: var(--t-narancs); color: var(--t-tinta); }
/* Gépelés közben (telefonon, nyitott billentyűzetnél) az alsó sáv lecsúszik a képernyő aljáról, hogy ne takarja a kitöltött
   mezőt; a mező elhagyásakor visszacsúszik (mobile-native skill) */
@media (pointer: coarse) and (max-width: 760px) {
  .terv .mobile-bar { transition: translate .2s var(--t-ease), visibility 0s linear 0s; }
  .terv:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), textarea, select):focus) .mobile-bar {
    translate: 0 110%;
    visibility: hidden;
    transition: translate .2s var(--t-ease), visibility 0s linear .2s;
  }
}

/* ---------- Nagy kijelzők (Boldi, 2026-10-19: 27 colos monitoron a bal negyed üres volt; 2026-10-22: „nagyon szét van
   húzva”, „nagy monitoron is legfeljebb kb. 1400 px széles legyen a tartalom, középen”) ----------
   1600 px fölött a tartalom 1400 px széles sávban áll, középen, a két oldalán egyforma margóval (a futószalag is ebben fut). A
   nyitókép is ebben a keretben marad: balra a cím a logó vonalában, jobbra a kép a telefongomb vonaláig, és nem nő a képernyő
   magasságán túl, hogy egészben látsszon. 2100 px fölött (27 col, 2560 × 1440) a betű nagyobb. */
@media (min-width: 1600px) {
  html.terv { --wrap: 1400px; }
  .t-hos-rontgen {
    --hos-w: min(100% - 2 * var(--gutter), var(--wrap));
    --hos-res: clamp(3rem, 4vw, 5.5rem);
    --hos-kep: min(calc((100svh - 12rem) * 2406 / 1590), calc(var(--hos-w) - 32rem - var(--hos-res)));
    grid-template-columns: minmax(0, 1fr) calc(var(--hos-w) - var(--hos-kep) - var(--hos-res)) var(--hos-res) var(--hos-kep) minmax(0, 1fr);
    grid-template-areas: ". szoveg . kep .";
  }
  .t-hos-rontgen h1 { font-size: clamp(2.85rem, 2.5vw, 4rem); }
  .t-hos-rontgen .t-hos-lead { font-size: 1.18rem; }
  .t-rontgen .t-hos-keret { border-radius: 6px; }
}
@media (min-width: 2100px) {
  html.terv { font-size: 112.5%; }
}

/* ---------- Kisebb kijelzők ---------- */

/* a röntgenes nyitókép 1100 px alatt egymás alatt: cím, kép (teljes szélességben), bevezető */
@media (max-width: 1099px) {
  .t-hos-rontgen { display: flex; flex-direction: column; }
  .t-hos-rontgen .t-hos-szoveg { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
  .t-hos-rontgen .t-hos-kep { width: min(100% - 2 * var(--gutter), 62rem); margin: clamp(1.25rem, 2.6vw, 2rem) auto 0; }
  .t-rontgen .t-hos-keret { border-radius: 6px; }
}
@media (max-width: 960px) {
  .t-hos-jobb { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "gombok" "uj"; }
  .t-gombok { justify-content: flex-start; }
  .t-uj { justify-self: start; }
  /* a metszet felül, alatta a három kapcsoló egy sorban, közvetlenül alattuk a felszólítás vagy a találatdoboz */
  .t-szolg-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "lap" "retegek" "also"; gap: 1.25rem; }
  .t-retegek { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t-mind { grid-column: 1 / -1; }
  .t-tabla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-rolunk-racs { grid-template-columns: minmax(0, 1fr); }
  /* az „Így dolgozunk” lépései egymás alatt, a cső függőlegesen fut */
  .t-lepesek { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; max-width: 40rem; }
  .t-lepes { min-height: 76px; padding-left: 100px; }
  .t-lepes-jel { position: absolute; top: 0; left: 0; margin: 0; }
  .t-cso { left: calc(var(--x1, 38px) - 6px); width: 12px; top: var(--y1, 38px); height: calc(var(--y2, 0px) - var(--y1, 0px)); border: 0; border-left: 1.5px solid rgba(255, 255, 255, .28); border-right: 1.5px solid rgba(255, 255, 255, .28); }
  .t-cso-tolt { inset: 0 -1.5px; border: 0; border-left: 2px solid var(--white); border-right: 2px solid var(--white); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
  .t-csepp { top: calc(var(--p, 0) * 100%); left: 50%; }
}
@media (max-width: 760px) {
  /* telefonon a kép rögtön a cím alá kerül (a hívás és az ajánlatkérés az alsó sávban amúgy is kéznél van) */
  .t-hos { display: flex; flex-direction: column; }
  .t-hos-szoveg { display: contents; }
  .t-szlogen, .t-hos h1, .t-hos-jobb { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }
  .t-szlogen { order: 1; }
  /* 362 px alatt a betű kisebb lehet (legkisebb 28 px), hogy az „a Dunakanyarban” elférjen egy sorban, ne a szó közepén törjön */
  .t-hos h1 { order: 2; font-size: clamp(1.75rem, 8.4vw, 2.3rem); }
  .t-hos-kep { order: 3; margin-top: 1.1rem; }
  .t-hos-jobb { order: 4; margin-top: 1.4rem; }
  .t-hos-megj { order: 5; }
  /* röntgen telefonon: a ház egészben látszik (a kivágás a ház bal falánál kezdődik), a kép a lap széléig ér */
  .t-hos-rontgen .t-hos-kep { width: 100%; margin-top: 1.1rem; }
  .t-rontgen .t-hos-keret { --x0: 520; --y0: 50; --cw: 2216; --ch: 1520; aspect-ratio: 2216 / 1520; border-radius: 0; }
  .t-hos-rontgen .t-hos-szoveg > .t-hos-megj { width: calc(100% - 2 * var(--gutter)); margin: 1.2rem auto 0; }
  /* a gombok teljes szélességben, egymás alatt: könnyű eltalálni, és egyértelmű, melyik a fő lépés */
  .t-hos .t-gombok { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .t-hos .t-gomb, .t-talalat-gomb .t-gomb, .t-cetli .t-gomb { width: 100%; }
  .t-rontgen-szkenner::after { height: 40px; }
  .t-rontgen-szkenner span { left: .6rem; font-size: .72rem; }
  .t-rontgen-rajz .x-cimke { font-size: 86px; }
  .t-rontgen-rajz :is(.x-apro, .x-helyiseg) { font-size: 50px; }
  .t-rontgen-rajz .x-csak-gep { display: none; }
  .t-rontgen-gomb { right: .6rem; bottom: .6rem; min-height: 2.5rem; padding: .35rem .7rem; font-size: .84rem; }
  .t-lepes { padding-left: 92px; }
  /* telefonon a kapcsolók egymás alatt; a metszet vonalai, jelei vastagabbak (a rajz itt harmadakkora) */
  /* telefonon (Boldi, 2026-10-20: koppintás után nem látszott, mi változik): a három kapcsoló egy sorban, tömör gombként,
     közvetlenül alattuk a találatdoboz (a kijelöléshez illő szolgáltatások, ajánlatkérés, fotók) */
  .t-szolg-also { gap: .9rem; padding: .9rem .85rem 1.1rem; }
  .t-talalat-cim { font-size: 1.12rem; }
  .t-retegek { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  .t-reteg { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: .35rem; min-height: 0; padding: .6rem .3rem .7rem; text-align: center; }
  .t-reteg .t-betu { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
  .t-reteg-nev { font-size: .95rem; font-stretch: 100%; }
  .t-reteg-al, .t-kapcsolo { display: none; }
  .t-lap { margin-inline: calc(var(--gutter) * -.4); padding: .45rem; }
  .t-metszet .v { stroke-width: 3.6; }
  .t-metszet .v-vastag { stroke-width: 5.2; }
  .t-metszet .v-vekony { stroke-width: 2.4; }
  .t-metszet .satir { stroke-width: 1.8; }
  .t-metszet .v-meret { stroke-width: 3; }
  .t-metszet .szam { display: none; }
  .t-metszet .h { stroke-width: 2.4; }
  .t-metszet .h.csat { stroke-width: 4; }
  .t-metszet .i.g { stroke-width: 4; }
  .t-metszet .i.gv { stroke-width: 2.6; }
  .t-metszet .i.cso { stroke-width: 4.4; }
  .t-metszet .i.viz { stroke-width: 3.8; }
  .t-metszet .i.csat { stroke-width: 6.4; }
  .t-metszet .i.kor { stroke-width: 3; }
  .t-m-aram .a-hideg, .t-m-aram .a-meleg { stroke-width: 3; }
  .t-m-aram .a-viz, .t-m-aram .a-csat { stroke-width: 2.4; }
  .t-m-aram .a-csepp { stroke-width: 2.6; }
  .t-m-jel { transform-box: fill-box; transform-origin: center; scale: 1.45; }
  .t-szolg .thumbs { gap: .8rem; }
  .t-tabla { grid-template-columns: minmax(0, 1fr); }
  /* a kínálat 2 × 2, a többi 3 × 2 */
  .t-logok { gap: 1.6rem 1.1rem; }
  .t-logo { grid-column: span 4; }
  .t-logo-kinalat { grid-column: span 6; }
  .t-logo-lap { height: 3.9rem; padding: .45rem .55rem; }
  .t-logo-kinalat .t-logo-lap { height: 4.9rem; }
  .t-logo-lap img { height: calc(var(--lh, 28px) * .82); }
  .t-album-munkak { grid-template-columns: minmax(0, 1fr); }
  .t-album-munka.is-szeles .t-album-fo img { aspect-ratio: 4 / 3; }
  .t-album-fejlec { flex-direction: column; }
  .t-album-cimkek { justify-content: flex-start; }
  .t-album-tabla { columns: 2; column-gap: 1.1rem; }
  .t-album-kicsik a { width: 5.5rem; }
  .t-fejlec-tabla { grid-template-columns: minmax(0, 1fr); }
  .t-fejlec-tabla > div + div { border-left: 0; border-top: 1px solid rgba(58, 63, 70, .45); }
}
@media (prefers-reduced-motion: reduce) {
  .t-ragasztott { transition: none; }
}

/* =====================================================================================================================
   ALOLDALAK (Boldi, 2026-10-21: „ezt a stílust a többi oldalra is, hasonló kritériumokat követve, a skilleket figyelembe
   véve”): a régi oldalak elemei az új arculatban – rajzlap, grafit vonal, narancs fő gomb, kék jelölés, szögletes kártyák
   kis eltolt árnyékkal, feltűzött fotók. A régi főoldal (html:not(.terv)) nem változik. Rámutatás csak egérrel (hover:
   hover), lenyomásra azonnali visszajelzés (:active), csökkentett mozgásnál nincs mozgás.
   ===================================================================================================================== */

/* ---------- Gombok: a narancs a fő cselekvés, a körvonalas a második; a régi, ragadó :hover helyett lenyomás ---------- */
.terv .btn { font-stretch: 106%; font-weight: 700; transition: transform .18s var(--t-ease), background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.terv .btn:active { transform: scale(.96); }
.terv .btn-primary, .terv .btn-primary:hover { background: var(--t-narancs); color: var(--t-tinta); }
.terv .btn-primary:active { background: #DE5C10; }
.terv .btn-ghost, .terv .btn-ghost:hover { border-color: transparent; background: transparent; box-shadow: inset 0 0 0 2px var(--t-tinta); color: var(--t-tinta); }
.terv .btn-ghost:active { background: rgba(26, 33, 80, .06); }
.terv .btn-light, .terv .btn-light:hover { background: var(--t-papir); color: var(--t-tinta); }
.terv .btn-outline-light, .terv .btn-outline-light:hover { border-color: transparent; background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); color: var(--white); }
.terv .btn-outline-light:active { background: rgba(255, 255, 255, .1); }
@media (hover: hover) and (pointer: fine) {
  .terv .btn-primary:hover { background: #F57A31; }
  .terv .btn-ghost:hover { background: var(--t-tinta); color: var(--white); }
  .terv .btn-light:hover { background: var(--white); }
  .terv .btn-outline-light:hover { background: rgba(255, 255, 255, .1); }
}
.terv .btn:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 4px; }

/* ---------- Oldalfej: rajzlapon, alatta ceruzavonal; a fotó feltűzve (fehér szél, kék festőszalag) ---------- */
.terv .page-hero { background: transparent; border-bottom: 1px solid rgba(58, 63, 70, .3); }
.terv .page-hero h1 { font-weight: 740; letter-spacing: -.015em; color: var(--t-cim); }
.terv .page-hero .lead, .terv .crumbs, .terv .page-tags { color: var(--t-tinta-2); }
.terv .crumbs a { color: var(--t-tinta-2); text-decoration-color: rgba(26, 33, 80, .3); }
.terv .page-hero-photo { position: relative; padding: 6px 6px 8px; background: var(--white); box-shadow: 0 1px 2px rgba(26, 33, 80, .14), 0 14px 26px -18px rgba(26, 33, 80, .55); rotate: -.8deg; }
.terv .page-hero-photo img { border-radius: 0; }
.terv .page-hero-photo::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -.6rem;
  left: 50%;
  width: 4.2rem;
  height: 1.2rem;
  margin-left: -2.1rem;
  background: var(--t-szalag, rgba(86, 146, 232, .55));
  rotate: -3deg;
  -webkit-mask-image: var(--t-szemcse);
  mask-image: var(--t-szemcse);
  -webkit-mask-size: 48px;
  mask-size: 48px;
}
/* a szolgáltatás „csöve” a fotó alatt: vékony vonal a saját színében */
.terv .page-hutes .page-hero-photo::after, .terv .page-futes .page-hero-photo::after, .terv .page-epuletgepeszet .page-hero-photo::after { height: 3px; margin-top: .55rem; border-radius: 0; }

/* ---------- Címkék: szögletes, körvonalas, a szolgáltatás színében ---------- */
.terv .tag { border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.terv .tag::before { border-radius: 1px; }

/* ---------- Eszközgombok (kalkulátor, felpróbáló, rajzoló): rajzlap-kártya grafit kerettel, a szolgáltatás színes „csöve”
   alul vékony vonalként ---------- */
.terv .eszkozgomb { border: 1.5px solid var(--t-grafit); border-radius: 4px; background: var(--t-papir); box-shadow: 4px 4px 0 rgba(58, 63, 70, .08); color: var(--t-tinta); }
.terv .eszkozgomb:hover { background: var(--t-papir); box-shadow: 4px 4px 0 rgba(58, 63, 70, .08); color: var(--t-tinta); }
.terv .eszkozgomb::after { height: 2px; }
.terv .eszkozgomb-ikon { border-radius: 3px; background: transparent; color: var(--t-kek); }
.terv .eszkozgomb-hoszivattyu .eszkozgomb-ikon { color: var(--warm); }
.terv .eszkozgomb-szoveg span, .terv .eszkozgomb-hoszivattyu .eszkozgomb-szoveg span { color: var(--t-kek); }
.terv .eszkozgomb > .icon { color: var(--t-tinta); }
.terv .eszkozgomb:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .terv .eszkozgomb:hover { border-color: var(--t-kek); box-shadow: 6px 8px 0 rgba(58, 63, 70, .1); }
}

/* ---------- Sötét sáv (ajánlatkérés az oldal alján): kék tervrajz, mint a főoldal kék szakaszai ---------- */
.terv .cta-band { background-color: var(--t-tervrajz); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(255, 255, 255, .3); }
.terv .cta-band p { color: #D9E6FF; }

/* ---------- Pipás lista: kék pipa ---------- */
.terv .pipa-lista .icon { color: var(--c, var(--t-kek)); }
/* a fejléc telefonszáma körvonalas marad (a narancs a lap fő cselekvése) */
.terv .nav-call, .terv .nav-call:hover { background: transparent; color: var(--t-tinta); box-shadow: inset 0 0 0 1.5px var(--t-tinta); }
@media (hover: hover) and (pointer: fine) { .terv .nav-call:hover { background: var(--t-tinta); color: var(--white); box-shadow: none; } }

/* ---------- Kártyák és dobozok: szögletes rajzlap-kártya grafit kerettel, kis eltolt árnyékkal (mint a főoldalon) ---------- */
.terv :is(.combo-link, .post-card, .post-toc, .szolg-mod, .gep-kartya, .gep-meret, .marka-tenyek, .fp-panel, .tr-kartya) {
  border: 1.5px solid var(--t-grafit);
  border-radius: 4px;
  background: var(--t-papir);
  box-shadow: 4px 4px 0 rgba(58, 63, 70, .08);
}
.terv .gep-nev a::after { border-radius: 4px; }
/* halvány dobozok (összegzés, csomag, ár, gázszámla, pontosabb számítás, új helyiség): papír, vékony grafit vonal, árnyék nélkül */
.terv :is(.legal-summary, .gep-csomag, .ar-kartya, .kalk-gaz, .kalk-pontosabb, .kalk-szobak.is-tobb > .kalk-szoba, .tr-uj-szoba, .table-wrap) { border: 1px solid rgba(58, 63, 70, .35); border-radius: 4px; background: var(--t-papir); }
.terv .post-draft { border-radius: 4px; }
/* a gép rajza a sorozat oldalán: tiszta rajzlap, rajzfejléc-szerű vékony kerettel */
.terv .gep-hero-rajz { border: 1px solid rgba(58, 63, 70, .35); border-radius: 4px; background: var(--white); }
/* sötét dobozok (kalkulátor eredménye, rajzoló összegzése, eszközök ajánlatkérése): kék tervrajz, mint a főoldal kék szakaszai */
.terv :is(.kalk-eredmeny, .tr-eredmeny, .eszkoz-cta) { border-radius: 4px; background-color: var(--t-tervrajz); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.terv .tr-ar-blokk { border-radius: 3px; }
.terv .csatolt-rajz { border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
  .terv :is(.combo-link, .post-card, .gep-kartya, .szolg-mod):hover { border-color: var(--t-kek); box-shadow: 6px 8px 0 rgba(58, 63, 70, .1); }
}
.terv :is(.combo-link, .post-card, .gep-kartya):active { transform: scale(.985); transition: transform .12s var(--t-ease); }
.terv .combo-icon { border-radius: 3px; }

/* ---------- Szűrők és választók (méret, téma, helyiség típusa): szögletes, a kijelölt a saját színében ---------- */
.terv .blog-filter a, .terv .kalk-chip span { border-radius: 4px; border-color: rgba(58, 63, 70, .45); color: var(--t-tinta); }
.terv .blog-filter a[aria-current] { border-color: var(--c, var(--t-kek)); background: var(--c-tint, #EAF1FD); color: var(--c, var(--t-kek)); }
.terv .kalk-chip input:checked + span { border-color: var(--c, var(--t-kek)); background: var(--c, var(--t-kek)); color: var(--white); }
.terv .kalk-chip:hover span, .terv .blog-filter a:hover { border-color: rgba(58, 63, 70, .45); }
@media (hover: hover) and (pointer: fine) { .terv .kalk-chip:hover span, .terv .blog-filter a:hover { border-color: var(--c, var(--t-kek)); } }
.terv .kalk-chip input:checked:hover + span { border-color: var(--c, var(--t-kek)); }
.terv .kalk-chip:active span, .terv .blog-filter a:active { transform: scale(.96); }
.terv .kalk-chip span, .terv .blog-filter a { transition: transform .12s var(--t-ease), background-color .2s ease, border-color .2s ease, color .2s ease; }

/* ---------- Mezők: szögletes, grafit keret (a sötét ajánlatkérőben fehér) ---------- */
.terv .field :is(input, select, textarea) { border-radius: 4px; }
.terv :is(.kalk, .fp-panel, .tr) .field :is(input, select, textarea), .terv .fp-panel select { border-color: rgba(58, 63, 70, .5); }
.terv .field :is(input, select, textarea):focus-visible { outline-color: var(--t-kek); }

/* ---------- Fotók: fehér szél, kis árnyék (mint a feltűzött munkafotók, szalag nélkül) ---------- */
.terv :is(.photo-grid a, .gallery-grid a, .post-figure a) { border-radius: 0; padding: 5px 5px 7px; background: var(--white); box-shadow: 0 1px 2px rgba(26, 33, 80, .14), 0 8px 16px -12px rgba(26, 33, 80, .5); }
.terv :is(.photo-grid a, .gallery-grid a, .post-figure a) img { border-radius: 0; }

/* ---------- Felpróbáló és rajzoló: szögletes lap, gombok ---------- */
.terv .fp-szinpad { border-radius: 4px; border-color: rgba(58, 63, 70, .45); background: var(--white); }
.terv .fp-valodi { border-radius: 3px; }
.terv .tr-lap { border: 1.5px solid var(--t-grafit); border-radius: 4px; }
.terv .tr-bal.is-teljes { background: var(--t-papir); }
.terv .tr-vaszon:focus-visible { border-radius: 4px; }
.terv :is(.tr-eszkoz, .tr-ikon-gomb, .tr-szint-ful, .tr-nezet, .tr-oldal-valaszt select, .tr-nev, .tr-torol) { border-radius: 4px; }
.terv .tr-nezet button { border-radius: 3px; }
.terv .tr-ures-lista { border-radius: 4px; }
.terv .tr-allapot-sor { border-radius: 4px; }
.terv :is(.tr-eszkoz, .tr-ikon-gomb, .tr-szint-ful):active { transform: scale(.95); }

/* ---------- Hol dolgozunk: települések és munkák ---------- */
.terv .hely-lista li { border: 1px solid rgba(58, 63, 70, .35); border-radius: 4px; background: var(--t-papir); }
.terv .hely-lista .is-home { border-color: var(--t-kek); box-shadow: inset 3px 0 0 var(--t-kek); }
.terv .hely-nev a { color: var(--t-kek); }
.terv .munka { border: 1.5px solid var(--t-grafit); border-radius: 4px; background: var(--t-papir); box-shadow: 4px 4px 0 rgba(58, 63, 70, .08); }

/* ---------- Színválasztó (sorozatoldal, felpróbáló): szögletes, a kijelölt a gép színében ---------- */
.terv .szin-gomb { border-radius: 4px; border-color: rgba(58, 63, 70, .45); }
@media (hover: hover) and (pointer: fine) { .terv .szin-gomb:hover { border-color: var(--t-kek); } }
.terv .szin-gomb:has(input:checked) { border-color: var(--c, var(--t-kek)); box-shadow: inset 0 0 0 1px var(--c, var(--t-kek)); }

/* ---------- Így zajlik (szolgáltatásoldal): a lépések jele körvonalas kör, mint a rajzokon a jelölések; a sáv rajzlap ---------- */
.terv .process { background: transparent; border-top: 1px solid rgba(58, 63, 70, .3); }
.terv .steps::before { height: 1.5px; background: var(--t-grafit); opacity: .45; }
.terv .step-no { border: 1.6px solid var(--t-kek); background: var(--t-papir); color: var(--t-kek); box-shadow: none; }

/* ---------- Csúszka (felpróbáló: nagyság, dőlés) ----------
   A böngésző szürke csúszkája helyett vonalzó: vékony tintavonal tizedenként osztásjellel (a fogó középpontjának útja mentén),
   a fogó papírszínű kör tintakerettel és kis eltolt árnyékkal, mint a kártyák. Megfogáskor kicsit nő (azonnali visszajelzés);
   a mező 44 pont magas, hogy ujjal is könnyen elkapható legyen. */
.terv .fp input[type="range"] {
  --fogo: 22px;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.terv .fp input[type="range"]::-webkit-slider-runnable-track {
  height: 12px;
  background:
    linear-gradient(var(--t-tinta-2), var(--t-tinta-2)) 0 50% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent calc(100% - 1.5px), rgba(72, 82, 143, .5) 0) calc(var(--fogo) / 2) 50% / calc(100% - var(--fogo) + 1.5px) 8px no-repeat,
    repeating-linear-gradient(90deg, rgba(72, 82, 143, .5) 0 1.5px, transparent 1.5px 10%) calc(var(--fogo) / 2) 50% / calc(100% - var(--fogo)) 8px no-repeat;
}
.terv .fp input[type="range"]::-moz-range-track {
  height: 12px;
  background:
    linear-gradient(var(--t-tinta-2), var(--t-tinta-2)) 0 50% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent calc(100% - 1.5px), rgba(72, 82, 143, .5) 0) calc(var(--fogo) / 2) 50% / calc(100% - var(--fogo) + 1.5px) 8px no-repeat,
    repeating-linear-gradient(90deg, rgba(72, 82, 143, .5) 0 1.5px, transparent 1.5px 10%) calc(var(--fogo) / 2) 50% / calc(100% - var(--fogo)) 8px no-repeat;
}
.terv .fp input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--fogo);
  height: var(--fogo);
  margin-top: calc((12px - var(--fogo)) / 2);
  border: 2px solid var(--t-tinta);
  border-radius: 50%;
  background: var(--t-papir);
  box-shadow: 2px 2px 0 rgba(58, 63, 70, .28);
  transition: transform .12s var(--t-ease);
}
.terv .fp input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--fogo);
  height: var(--fogo);
  border: 2px solid var(--t-tinta);
  border-radius: 50%;
  background: var(--t-papir);
  box-shadow: 2px 2px 0 rgba(58, 63, 70, .28);
  transition: transform .12s var(--t-ease);
}
.terv .fp input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.terv .fp input[type="range"]:active::-moz-range-thumb { transform: scale(1.12); }
.terv .fp input[type="range"]:focus-visible { outline: none; box-shadow: none; }
.terv .fp input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--t-papir), 0 0 0 5px var(--t-kek); }
.terv .fp input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--t-papir), 0 0 0 5px var(--t-kek); }
/* amíg nincs fotó (a csoport letiltva), halvány és nem fogható */
.terv .fp input[type="range"]:disabled { cursor: default; opacity: .4; }

/* ---------- Hibakód-kereső (pages/hibakod.php, pages/hibakod-marka.php, inc/hibakodok.php) ----------
   A kód a klíma kijelzőjéhez hasonló sötét ablakban; a válasz rajzlap-kártya: mit jelent, mi okozhatja, mit tehet Ön. */
.hk { padding-block: clamp(2rem, 4vw, 3rem) var(--space); }
.hk-racs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; gap: clamp(1.75rem, 4vw, 3.5rem); }
.hk-urlap { display: grid; gap: 1.5rem; }
.hk-kod-sor { display: flex; flex-wrap: wrap; gap: .6rem; }
.hk-kod-sor input { width: 9.5rem; font-size: 1.55rem; font-stretch: 112%; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.hk-kod-sor input::placeholder { font-weight: 500; letter-spacing: .02em; text-transform: none; }
.hk-eredmeny { display: grid; gap: 1.25rem; min-width: 0; }
.hk-ures { margin: 0; padding: 1.1rem 1.3rem; border: 1.5px dashed rgba(58, 63, 70, .45); color: var(--t-tinta-2); line-height: 1.55; }
.hk-kijelzo {
  display: inline-grid;
  place-items: center;
  min-width: 4.4rem;
  padding: .45rem .75rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--t-tinta) 72%, #000);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07), inset 0 -8px 14px rgba(0, 0, 0, .35);
  color: #EAF4FF;
  font-size: 1.6rem;
  font-stretch: 112%;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  line-height: 1;
  text-shadow: 0 0 10px rgba(140, 195, 255, .6);
}
.hk-kijelzo-kicsi { min-width: 2.9rem; padding: .3rem .45rem; border-radius: 6px; font-size: 1rem; }
.hk-kartya { padding: 1.2rem 1.35rem 1.35rem; border: 1.5px solid var(--t-grafit); background: var(--t-papir); scroll-margin-top: 6rem; }
.hk-kartya:target { outline: 3px solid var(--t-kek); outline-offset: 3px; }
.hk-kartya-fej { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem 1rem; }
/* a kártya címe a keresőben h2, a márkaoldalon h3 – mindkettő ugyanolyan (a .terv h2 nagy címstílusa ne öröklődjön) */
.terv .hk-kartya-cim { margin: 0; font-size: 1.12rem; font-stretch: 100%; font-weight: 700; line-height: 1.32; letter-spacing: 0; color: var(--t-tinta); }
.hk-marka { display: block; margin-bottom: .15rem; font-size: .84rem; font-weight: 650; color: var(--t-tinta-2); }
.hk-jel { padding: .2rem .55rem; font-size: .78rem; white-space: nowrap; }
.hk-kartya.is-szerelo .hk-jel { border-color: var(--t-kek); background: var(--t-kek); color: var(--white); }
.hk-sorok { display: grid; gap: .65rem; margin: 1.1rem 0 0; }
.hk-sorok > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .75rem; }
.hk-sorok dt { font-weight: 650; color: var(--t-tinta); }
.hk-sorok dd { margin: 0; line-height: 1.5; color: var(--t-tinta-2); }
.hk-cta { display: grid; gap: .85rem; padding: 1.1rem 1.3rem 1.25rem; background: #ECEEF8; }
.hk-cta p { margin: 0; color: var(--t-tinta); }
.hk-cta-gombok { display: flex; flex-wrap: wrap; gap: .6rem; }
.hk-lista { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.hk-lista a { display: flex; align-items: center; gap: .8rem; padding: .55rem .75rem; border: 1px solid rgba(58, 63, 70, .35); background: var(--t-papir); color: var(--t-tinta); text-decoration: none; }
.hk-tobb { margin: .7rem 0 0; color: var(--t-tinta-2); line-height: 1.5; }
@media (hover: hover) and (pointer: fine) { .hk-lista a:hover { border-color: var(--t-kek); } }
.hk-tudni { padding-block: var(--space); border-top: 1px solid rgba(58, 63, 70, .25); }
.hk-tudni-racs { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
.hk-tudni h2 { margin-bottom: 1.1rem; font-size: clamp(1.35rem, 2.3vw, 1.75rem); font-stretch: 112%; font-weight: 720; }
.hk-lepesek { display: grid; gap: .7rem; margin: 0 0 1.25rem; padding-left: 1.4rem; font-size: 1.05rem; line-height: 1.55; color: var(--t-tinta); }
.hk-megj { font-size: .93rem; line-height: 1.55; color: var(--t-tinta-2); }
.hk-markak { display: grid; gap: .6rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.hk-markak a { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border: 1.5px solid var(--t-grafit); background: var(--t-papir); color: var(--t-tinta); text-decoration: none; }
.hk-markak span { margin-left: auto; font-size: .9rem; color: var(--t-tinta-2); }
.hk-markak .icon { flex: none; width: 1.1rem; height: 1.1rem; transition: transform .25s var(--t-ease); }
@media (hover: hover) and (pointer: fine) {
  .hk-markak a:hover { border-color: var(--t-kek); }
  .hk-markak a:hover .icon { transform: translateX(3px); }
}
.hk-kijelzes { margin-bottom: 2.25rem; padding: 1.1rem 1.3rem; border-left: 3px solid var(--t-kek); background: var(--t-papir); }
.hk-kijelzes h2 { margin-bottom: .5rem; }
.hk-kijelzes p { margin: 0; line-height: 1.6; color: var(--t-tinta); }
.hk-teljes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.25rem; margin: 1.25rem 0 2.25rem; }
@media (max-width: 760px) {
  .hk-racs, .hk-tudni-racs, .hk-teljes { grid-template-columns: minmax(0, 1fr); }
  .hk-kartya-fej { grid-template-columns: auto minmax(0, 1fr); }
  .hk-jel { grid-column: 1 / -1; justify-self: start; }
  .hk-sorok > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .hk-cta-gombok .btn { flex: 1 1 100%; }
}
/* a hibakód-kereső a főoldalon is (Boldi, 2026-10-24: „csináld könnyebben felfedezhetővé”): a nyitókép második linkje –
   olyan, mint az „Új” tervrajz-link, a címke helyén a kereső ikonjával –, és egy gyorskereső sáv az eszközök után (nem a
   „Tervezze meg előre” része: az nem tervező eszköz, Boldi 10-23-i döntése). Az űrlap ugyanaz, mint a /hibakod oldalon. */
.t-hibakod-link { justify-self: start; display: inline-flex; align-items: center; gap: .6rem; margin-top: -.35rem; font-weight: 600; color: var(--t-tinta); text-decoration: none; }
.t-hibakod-link svg { flex: none; width: 1.6rem; height: 1.6rem; overflow: visible; fill: none; stroke: var(--t-kek); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.t-hibakod-link > span { text-decoration: underline; text-decoration-color: rgba(26, 33, 80, .3); text-underline-offset: .2em; text-wrap: balance; }
@media (hover: hover) and (pointer: fine) { .t-hibakod-link:hover > span { text-decoration-color: var(--t-kek); } }
.t-hibakod-sav { padding-block: 0 var(--space); }
.t-hibakod-sav-belso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3.5vw, 2.5rem);
  border: 1.5px solid var(--t-grafit);
  border-radius: 4px;
  background: var(--white);
  box-shadow: 4px 4px 0 rgba(58, 63, 70, .08);
}
.t-hibakod-sav-fej { display: flex; align-items: flex-start; gap: 1rem; }
.t-hibakod-sav-ikon { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 4px; background: var(--t-kek-halvany); }
.t-hibakod-sav-ikon svg { width: 2rem; height: 2rem; overflow: visible; fill: none; stroke: var(--t-kek); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.t-hibakod-sav h2 { margin: 0; font-size: clamp(1.45rem, 2.4vw, 2rem); }
.t-hibakod-sav-fej p { margin: .45rem 0 0; color: var(--t-tinta-2); }
.t-hibakod-sav .hk-urlap { gap: 1rem; }
.t-hibakod-sav .hk-kod-sor input { width: 8.5rem; font-size: 1.35rem; }
@media (max-width: 860px) {
  .t-hibakod-sav-belso { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .t-hibakod-sav-fej { flex-direction: column; gap: .75rem; }
  .t-hibakod-sav .hk-kod-sor { flex-wrap: nowrap; }
  .t-hibakod-sav .hk-kod-sor input { flex: 1 1 6rem; width: 6rem; min-width: 0; }
}

/* ---------- Az átnézés apró javításai (Boldi, 2026-10-24: „javítsd ki a hibákat és a kisebb hibákat”) ---------- */
/* ha a terv.js 3 mp alatt sem indul el (a fejléc tartaléka: .terv-tartalek), a feltűzött fotók, a cetlik és a logók is
   látsszanak – eddig rejtve maradtak (pl. a /munkaink „További munkáink” része) */
.terv-tartalek [data-tuz] :is(.t-ragasztott, .t-cetli, .t-logo) { opacity: 1 !important; translate: none !important; scale: none !important; rotate: var(--r, 0deg) !important; }
/* „Kattintson” helyett érintőképernyőn „Koppintson” – bárhol a lapon (a választóban már így volt) */
.t-csak-ujj { display: none; }
@media (hover: none), (pointer: coarse) { .t-csak-eger { display: none; } .t-csak-ujj { display: inline; } }
/* a nagyító képe egérrel húzva is lapozzon: a böngésző saját képhúzása ne vigye el az egeret */
.lb-img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
/* „Teljes tervrajz”: a szakmák felirata a csővonalak fölött is olvasható (a lap színével körberajzolva) */
.t-rontgen-rajz .x-cimke { paint-order: stroke; stroke: var(--t-tervrajz); stroke-width: 12px; stroke-linejoin: round; }
/* a nyitókép alatti link utolsó sora ne egyetlen szó legyen */
.t-uj > span:last-child { text-wrap: balance; }
/* telefonon legalább ~44 px magas érintési felület: lábléc-linkek, „Süti-beállítások”, a csatolt rajz „Eltávolítás”-a, a
   térképkártya bezárója, a címkék; a térkép feliratai nagyobbak */
@media (pointer: coarse) {
  .quote .link-btn { padding: .7rem .25rem; }
  .map-card-close { top: .25rem; right: .25rem; width: 2.75rem; height: 2.75rem; }
  .terv a.tag { padding-block: .35rem; }
  .kalk-chip span, .szin-gomb, .blog-filter a { min-height: 2.75rem; }
  .kalk-chip span, .blog-filter a { display: inline-flex; align-items: center; }
}
@media (max-width: 520px) { .map-label { font-size: 12.5px; } .map-label.is-home { font-size: 15px; } }
/* a 761–900 px-es sávban a tartalom ne érjen a lapkeret vonalához */
@media (min-width: 761px) and (max-width: 900px) { .terv { --gutter: max(3rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); } }
/* az „Új” jelzés kék: a narancs csak a cselekvő gombé (README, Rajzkarton) */
.terv .eszkoz-uj { background: var(--t-kek); color: var(--white); }
/* hibakód-kereső: a kód mezője látsszon, a „Nem hiba” / „Ön is megoldhatja” pecsét teli kékkel (kontraszt) */
.hk-kod-sor input { border: 1.5px solid rgba(58, 63, 70, .5); }
.hk-jel { border-color: var(--t-kek); color: var(--t-kek); }
/* a Klímák oldal szintjei is a kategória színét kapják (mint a főoldali szalag: belépő acélszürke, közép kék, prémium arany) */
.gep-szint > h2::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .4em; vertical-align: .1em; border-radius: 2px; background: var(--szint-szin, var(--t-kek)); }
#belepo.gep-szint { --szint-szin: #8C96A3; }
#kozep.gep-szint { --szint-szin: var(--t-kek); }
#premium.gep-szint { --szint-szin: linear-gradient(135deg, #DDB95F, #A97F2F); }
/* 2026-10-26: a kínálat kártyái is üvegből vannak (gep_kartya), ezért a szint jele az üveg színét kapja: ár-érték bajnok és
   a hőszivattyúk „Alap”-ja zsálya, közép orchidea, prémium pezsgőarany */
:is(#belepo, #alap).gep-szint { --szint-szin: linear-gradient(135deg, #8DC2B0, #3F7F6E); }
#kozep.gep-szint { --szint-szin: linear-gradient(135deg, #D49BEF, #8A4FD0); }
/* hőszivattyú-kártya: a fotó ne lógjon ki a dobozából (Altherma 4 H) */
.hsz-kartya .gep-kartya-rajz { overflow: hidden; }
/* hőszivattyú-táblázat: a fejléc apró betűje olvashatóbb */
.hsz-tabla thead small { font-size: .82rem; }
/* felpróbáló: a fotóválasztó „gombokon” is látsszon a billentyűzetes fókusz */
.fp-fajl-gomb:has(input:focus-visible), .fp-masik:has(input:focus-visible) { outline: 3px solid var(--t-kek); outline-offset: 3px; }
/* felpróbáló: a gép és a mérőpöttyök körül nagyobb (láthatatlan) fogófelület; érintőképernyőn nincs billentyűs súgó; telefonon
   a fekvő fotó a fejléc alatt marad, amíg lent a csúszkákkal igazít (felprobalo.js: tapadas) */
.fp-gep::after { content: ""; position: absolute; inset: -12px; }
.fp-pont::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
@media (pointer: coarse) { .fp-csak-billentyu { display: none; } }
.fp-bal.is-tapad { position: sticky; top: 4rem; z-index: 3; padding-bottom: .5rem; background: var(--t-papir); }
.fp-meres .fp-hiba { margin: 0; }
/* klímák: 761–1100 px között három oszlop – a kategóriánkénti három kártyából ne maradjon árva */
@media (min-width: 761px) and (max-width: 1100px) { .gep-kartyak { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* eszközök: öt kártya 3 + 2 sorban (nem 4 + 1), tableten 2 + 2 + egy teljes szélességű */
@media (min-width: 900px) {
  .eszkozok:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .eszkozok:has(> li:nth-child(5):last-child) > li { grid-column: span 2; }
  .eszkozok:has(> li:nth-child(5):last-child) > li:nth-child(n + 4) { grid-column: span 3; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .eszkozok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eszkozok > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* „Ez válogatás” a Rajzkarton keretében: grafit, szaggatott ceruzavonal (Boldi, 2026-10-24) */
.terv .gep-valogatas { border-color: rgba(58, 63, 70, .45); border-radius: 4px; }
/* érintéssel a kis, szöveges célpontok is legalább ~44 pont magasak (Fitts törvénye; a 2026-10-24-i délutáni audit):
   a látvány nem változik, csak a koppintható terület nő meg egy láthatatlan réteggel (a futószalag szint-fülei, a
   „válogatás” linkje, a rajzoló „Új rajz” gombja, a kalkulátor eredményének linkje) */
@media (pointer: coarse) {
  .terv :is(.szalag-szintek a, .gep-valogatas .link-btn, .tr-lap-alatt .link-btn, .kalk-eredmeny .kalk-gepek) { position: relative; }
  .terv :is(.szalag-szintek a, .gep-valogatas .link-btn, .tr-lap-alatt .link-btn, .kalk-eredmeny .kalk-gepek)::after { content: ""; position: absolute; inset: -9px -4px; }
}

/* ---------- Google-értékelés (Boldi, 2026-10-26): a nyitóképen a kiemelések alatt és az ajánlatkérésnél ----------
   2026-10-27 (Boldi: „valahogy szebben kéne megjeleníteni, mert most csak oda van hányva két helyre”): kis keretes jelvény,
   mint a többi rajzlap-doboz – balra nagyban az átlag, mellette a csillagok és a vélemények száma, jobbra nyíl; az egész a
   Google Cégprofilra visz (google_ertekeles_html()). A kék ajánlatkérő sávon is papírszínű, így ott is kiemelkedik. */
.terv .google-ert { display: inline-flex; align-items: center; gap: .75rem; padding: .55rem .8rem .55rem .9rem; border: 1.5px solid var(--t-grafit); border-radius: 4px; background: var(--t-papir); box-shadow: 3px 3px 0 rgba(58, 63, 70, .12); color: var(--t-tinta); line-height: 1.2; text-decoration: none; }
.terv .google-ert .ge-atlag { font-size: 1.75rem; font-stretch: 112%; font-weight: 780; letter-spacing: -.01em; }
.terv .google-ert .ge-jobb { display: grid; gap: .2rem; }
.terv .google-ert .ge-csillagok { display: inline-flex; gap: 2px; }
.terv .google-ert svg:not(.ge-nyil) { width: 1rem; height: 1rem; fill: var(--t-csillag); }
.terv .google-ert svg.ures { fill: none; stroke: var(--t-csillag); stroke-width: 1.6; }
.terv .google-ert .ge-db { font-size: .86rem; font-weight: 600; color: var(--t-tinta-2); }
.terv .google-ert .ge-nyil { width: 1.15rem; height: 1.15rem; margin-left: auto; padding-left: .15rem; color: var(--t-kek); }
/* asztalon a tartalom szélességéig ér; telefonon (760 px alatt) teljes szélességű, mint a fölötte álló gombok, a nyíl a szélén */
@media (min-width: 761px) { .terv .google-ert { width: fit-content; max-width: 100%; } }
@media (max-width: 760px) { .terv .google-ert { display: flex; } }
.terv .google-ert:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 3px; }
.terv .t-kek .google-ert:focus-visible { outline-color: var(--t-fenykek); }
@media (prefers-reduced-motion: no-preference) { .terv .google-ert { transition: border-color .2s ease, box-shadow .2s ease; } }
@media (hover: hover) and (pointer: fine) { .terv .google-ert:hover { border-color: var(--t-kek); box-shadow: 5px 5px 0 rgba(58, 63, 70, .12); } }
.terv .quote-google { margin-top: 1.5rem; }
.terv .td-bizalom + .google-ert { margin-top: 1rem; }

/* ---------- Érintős készüléken könnyített megjelenés (Boldi, 2026-10-26: „gyengébb telefonokon se akadozzon semmi”) ----------
   Az elmosás (backdrop-filter) minden görgetett képkockánál újraszámolja a mögötte lévőt: a tapadó fejlécnél és a mozgó
   futószalag kártyáinál ez a gyengébb telefonon akadást okozhat. Érintőn ezért nincs elmosás – helyette kicsit tömörebb
   a háttér, így a kinézet szinte ugyanaz –, és a 3D üvegkártya sem dől (ott úgysincs egér), a csillogása egyszerű áttetsző
   réteg keverés nélkül. */
@media (hover: none) and (pointer: coarse) {
  .terv .site-header { background: rgba(250, 246, 238, .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .terv .mobile-bar { background: rgba(250, 246, 238, .98); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .t-rontgen-gomb { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .terv .szalag-elem[data-szint] .szalag-gep {
    background: linear-gradient(140deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .38) 55%, rgba(255, 255, 255, .5));
    -webkit-backdrop-filter: none; backdrop-filter: none; transform: none;
  }
  .terv .szalag-elem[data-szint] .szalag-gep::after { mix-blend-mode: normal; opacity: .55; }
  .terv .szalag-vege-kartya { background: linear-gradient(140deg, rgba(255, 255, 255, .85), rgba(232, 238, 255, .7)); -webkit-backdrop-filter: none; backdrop-filter: none; }
}