/* NO-BO Klíma – stílus
   A színek a logóból jönnek: sötétkék felirat, cián→kék tető (hűtés), sárga→narancs→piros
   gyökér (fűtés). Egyetlen betűcsalád (Archivo): a nagy címek szélesítve, mint a logó felirata.
   Az egyetlen színátmenetes elem a „cső”: a választóban a kijelölt igények hőmérsékletét
   viszi, a kategóriaoldalakon a kategória színét. Máshol a fotók díszítenek, a keret csendes. */

/* Az Archivo a saját tárhelyről (assets/fonts/, SIL Open Font License 1.1 – OFL.txt), hogy a látogató böngészője ne
   forduljon a Google-hoz (adatkezelési tájékoztató, 4. pont). A Google Fonts latin és latin-ext része, változó
   szélességgel (62–125%) és vastagsággal (300–800); a magyar ő és ű a latin-ext részben van. Frissítés: README. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #1A2150;          /* szöveg: mély sötétkék */
  --ink-soft: #4A5480;     /* másodlagos szöveg */
  --navy: #263BAA;         /* Nordic indigo (2026-10-24 óta; előtte a logó feliratának #2B3990-e); épületgépészet */
  --paper: #F4F7FB;        /* hideg törtfehér háttér */
  --white: #FFFFFF;
  --line: #DDE3EE;
  --line-strong: #B9C3D8;

  --cool: #2661DE;         /* hűtés (a logó tetejének kékje) */
  --cool-2: #32BEEF;
  --cool-3: #36E0F5;
  --warm: #CC3F0C;         /* fűtés, szövegen is olvasható árnyalat */
  --warm-1: #FDC603;       /* a logó gyökere: sárga → narancs → piros */
  --warm-2: #FA7305;
  --warm-3: #F81907;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 74rem;
  /* fekvő telefonon a kivágás (notch) és a lekerekített sarok mellett is marad hely (viewport-fit=cover, inc/layout.php) */
  --gutter: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --space: clamp(4.5rem, 9vw, 7.5rem);
  --radius: 14px;
}

/* Az igények színei: a címkék, a választó, az űrlap és az oldalak ugyanezt használják. */
.choice-hutes, .tag-hutes, .need-hutes, .combo-hutes, .page-hutes, .nav-hutes, .nav-klimak { --c: var(--cool); --c-tint: #EAF1FD; --c-pipe: linear-gradient(var(--dir, 90deg), var(--cool-3), var(--cool)); }
.choice-futes, .tag-futes, .need-futes, .combo-futes, .page-futes, .nav-futes, .nav-hoszivattyuk { --c: var(--warm); --c-tint: #FFF1E7; --c-pipe: linear-gradient(var(--dir, 90deg), var(--warm-1), var(--warm-2), var(--warm-3)); }
.choice-epuletgepeszet, .tag-epuletgepeszet, .need-epuletgepeszet, .combo-epuletgepeszet, .page-epuletgepeszet, .nav-epuletgepeszet { --c: var(--navy); --c-tint: #ECEEF8; --c-pipe: linear-gradient(var(--dir, 90deg), #7A86D6, var(--navy)); }

.nav-eszkozok { --c: var(--navy); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* scrollbar-gutter: ha a nagyító vagy a részletező nyitva van (a lap nem görgethető), ne ugorjon oldalra a tartalom */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
}

img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
::selection { background: #CDE3FB; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--navy); } }

:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { margin: 0; line-height: 1.1; color: inherit; }

h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-stretch: 112%;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

p { margin: 0 0 1em; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow > * { max-width: 44rem; }

.icon { width: 1.25rem; height: 1.25rem; flex: none; }

.skip { position: absolute; left: -999px; top: 0; padding: .75rem 1rem; background: var(--ink); color: var(--white); z-index: 50; }
.skip:focus { left: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.section-head p { margin: 0; font-size: 1.1rem; color: var(--ink-soft); }

/* ---------- Gombok ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3.1rem;
  padding: .75rem 1.35rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn .icon { width: 1.15rem; height: 1.15rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--navy); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--ink); color: var(--white); } }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { border-color: var(--navy); color: var(--navy); } }
.btn-light { background: var(--white); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn-light:hover { background: var(--paper); color: var(--ink); } }
.btn-outline-light { border-color: rgba(255, 255, 255, .6); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn-outline-light:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); color: var(--white); } }
/* A gombok finom mozgása (csökkentett mozgásnál nincs): rámutatáskor kicsit megemelkednek, kattintáskor „lenyomódnak”, a
   hívógomb telefonja megcsörren. Oldalbetöltéskor egyszer: a nyitókép „Ajánlatot kérek” gombján végigfut egy fény, és
   telefonon az alsó sáv hívógombja megcsörren. */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
  @media (hover: hover) and (pointer: fine) { .btn:hover:not(:disabled) { transform: translateY(-1px); } }
  .btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
  @media (hover: hover) and (pointer: fine) { .btn-primary:hover, .btn-light:hover { box-shadow: 0 12px 24px -16px rgba(26, 33, 80, .65); } }
  a[href^="tel:"]:focus-visible .icon { animation: csorog .7s ease; }
@media (hover: hover) and (pointer: fine) { a[href^="tel:"]:hover .icon { animation: csorog .7s ease; } }
  .hero-actions .btn-outline-light { position: relative; overflow: hidden; isolation: isolate; }
  .hero-actions .btn-outline-light::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
    transform: translateX(-130%);
    animation: fenycsik 1.2s ease 1.6s 1 both;
    pointer-events: none;
  }
  .mobile-bar a[href^="tel:"] .icon { animation: csorog .8s ease 2.5s 1; }
}
@keyframes csorog { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes fenycsik { to { transform: translateX(130%); } }

/* ---------- Fejléc ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); }
.header-inner { position: relative; display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.brand { display: block; flex: none; }
.brand img { width: auto; height: 2.9rem; }

.main-nav { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; font-weight: 550; }
.main-nav a:not(.btn) { padding: .35rem 0; border-bottom: 2px solid transparent; color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .main-nav a:not(.btn):hover { color: var(--navy); border-bottom-color: var(--line-strong); } }
.main-nav a[aria-current="page"] { border-bottom-color: var(--c); }
.nav-call { min-height: 2.75rem; padding: .55rem 1.1rem; white-space: nowrap; }
/* 1100–1359 px között a teljes menü (az Eszközök és a Hőszivattyúk ponttal együtt) csak szorosabban fér ki egy sorba – 1100 px-en
   így is csak kb. 16 px marad –; 1100 px alatt a „Menü” gomb nyitja. */
@media (min-width: 1100px) and (max-width: 1359px) { .main-nav { gap: 1rem; } }

.menu-toggle {
  display: none;
  align-items: center;
  gap: .45rem;
  margin-left: auto;
  padding: .55rem .9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
/* nyitva a három vonal ×-szé fordul össze: látszik, hogy ugyanazzal a gombbal zárható (csökkentett mozgásnál azonnal vált) */
.menu-ikon path { transform-box: fill-box; transform-origin: center; transition: transform .2s cubic-bezier(.23, 1, .32, 1), opacity .12s ease; }
.menu-toggle[aria-expanded="true"] .menu-ikon path:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-ikon path:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-ikon path:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1099px) {
  .brand img { height: 2.5rem; }
  .header-inner { min-height: 4rem; }
  .menu-toggle { display: inline-flex; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--gutter));
    right: calc(-1 * var(--gutter));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .25rem var(--gutter) 1.25rem;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -28px rgba(26, 33, 80, .45);
  }
  .main-nav.is-open { display: flex; }
  /* a menü a fejléc alól csúszik elő, és oda húzódik vissza (rövid, gyorsan induló mozgás); ahol a böngésző ezt nem tudja,
     ott azonnal nyílik, mint eddig */
  .main-nav { opacity: 0; translate: 0 -.5rem; transition: opacity .16s ease, translate .2s cubic-bezier(.23, 1, .32, 1), display .2s allow-discrete; }
  .main-nav.is-open { opacity: 1; translate: none; }
  @starting-style { .main-nav.is-open { opacity: 0; translate: 0 -.5rem; } }
  .main-nav a:not(.btn) { padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .main-nav a[aria-current="page"] { color: var(--c); border-bottom-color: var(--line); }
  .nav-call { margin-top: 1rem; }
}

/* ---------- Nyitó rész: teljes szélességű munkafotó ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--white); }

.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media picture,
.hero-media img { display: block; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 72% 40%; }
/* Balról és alulról sötétítés, hogy a szöveg a fotón is olvasható legyen. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 26, 64, .93) 0%, rgba(20, 26, 64, .8) 32%, rgba(20, 26, 64, .25) 64%, rgba(20, 26, 64, 0) 86%),
    linear-gradient(0deg, rgba(20, 26, 64, .7) 0%, rgba(20, 26, 64, 0) 38%);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(88vh, 52rem);
  min-height: min(88svh, 52rem);
  padding-block: 7rem 8.5rem;
}

.hero-slogan {
  margin: 0 0 1.5rem;
  font-size: clamp(2.6rem, 6.8vw, 5.6rem);
  font-stretch: 125%;
  font-weight: 340;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.hero-slogan span { display: block; }

.hero h1 { max-width: 34ch; margin-bottom: .75rem; font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 600; line-height: 1.35; }
.hero-lead { max-width: 40rem; font-size: 1.1rem; color: rgba(255, 255, 255, .84); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero-note { margin: 1.25rem 0 0; font-size: .95rem; color: rgba(255, 255, 255, .72); }
/* „Új” jelzés a nyitóképen: az új eszközre (tervrajz-rajzoló) mutat; a címke betöltés után egyszer finoman felvillan */
.hero-uj {
  display: inline-flex;
  align-self: flex-start;   /* a nyitókép oszlopában csak akkora, mint a szövege */
  align-items: center;
  gap: .6rem;
  max-width: 100%;
  margin-top: 1.4rem;
  padding: .35rem .85rem .35rem .4rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .hero-uj:hover { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .18); color: var(--white); } }
.hero-uj-cimke { flex: none; padding: .2rem .6rem; border-radius: 999px; background: var(--white); color: var(--navy); font-size: .78rem; font-weight: 700; }
.hero-uj .icon { width: 1rem; height: 1rem; transition: transform .25s ease; }
@media (hover: hover) and (pointer: fine) { .hero-uj:hover .icon { transform: translateX(3px); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-uj-cimke { animation: uj-villan 1.3s ease 2.2s 1; }
}
@keyframes uj-villan { 0%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 40% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(255, 255, 255, .22); } }

/* Telefonon a fotó felül áll, a szöveg az elsötétedő alján kezdődik. */
@media (max-width: 699px) {
  .hero-media { bottom: auto; height: 62vh; height: 62svh; }
  .hero-media img { object-position: 50% 50%; }
  .hero-media::after {
    background: linear-gradient(180deg, rgba(20, 26, 64, .15) 0%, rgba(20, 26, 64, 0) 25%, rgba(20, 26, 64, .65) 66%, var(--ink) 100%);
  }
  .hero-inner { min-height: 0; padding-top: 40vh; padding-top: 40svh; padding-bottom: 5rem; }
  .hero-lead { font-size: 1.02rem; }
}

/* ---------- Választó: mire van szüksége? ---------- */
.chooser { position: relative; z-index: 2; margin-top: -4.5rem; padding-bottom: var(--space); }

.chooser-panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) 8px minmax(0, 7fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 0 0 1px var(--line), 0 34px 60px -40px rgba(26, 33, 80, .55);
}

.chooser-pick h2 { margin-bottom: .5rem; font-size: clamp(1.7rem, 2.6vw, 2.25rem); }
.chooser-hint { margin-bottom: 1.5rem; color: var(--ink-soft); }

.choices { display: grid; gap: .75rem; }
.choice {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 1.6rem;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .choice:hover { border-color: var(--c); color: var(--ink); } }
.choice-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: var(--c-tint);
  color: var(--c);
  transition: background-color .2s ease, color .2s ease;
}
.choice-icon .icon { width: 1.65rem; height: 1.65rem; }
.choice-text { display: grid; gap: .1rem; min-width: 0; }
.choice-name { font-size: 1.2rem; font-stretch: 112%; font-weight: 650; line-height: 1.2; }
.choice-sub { font-size: .92rem; line-height: 1.35; color: var(--ink-soft); }
.choice-check {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.choice-check .icon { width: 1rem; height: 1rem; stroke-width: 2.4; }
.choice.is-on { border-color: var(--c); background: var(--c-tint); }
.choice.is-on .choice-icon { background: var(--c); color: var(--white); }
.choice.is-on .choice-check { border-color: var(--c); background: var(--c); color: var(--white); }

.choice-all {
  margin-top: 1rem;
  padding: .25rem 0;
  border: 0;
  background: none;
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

/* A „cső”: a kijelölt igények színe tölti ki a választás és a találatok között;
   a hengeres fény-árnyék teszi csőszerűvé. */
.pipe { --dir: 180deg; --shade: 90deg; display: flex; flex-direction: column; overflow: hidden; border-radius: 999px; background: var(--line); }
.pipe-seg { position: relative; flex: 0 1 0%; min-width: 0; min-height: 0; background: var(--c-pipe); transition: flex-grow .55s cubic-bezier(.3, .7, .2, 1); }
.pipe-seg.is-on { flex-grow: 1; }
.pipe-seg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--shade), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%, rgba(10, 20, 60, .2)); }

/* A ház-rajz: egy ház, három rendszer. Ami nincs kijelölve, szürke vázlat. Kijelöléskor a
   rendszer „bekapcsol”, rövid jelenetben: kirajzolódik a cső (0–0,8 s), kigyullad a gép,
   felpörög a ventilátor, cseppek indulnak a csőben, végül a levegő és a szoba színe, a
   termosztát rááll a hőfokra; kint hűtésnél süt a nap, fűtésnél esik a hó. Kikapcsoláskor
   minden gyorsan, késleltetés nélkül áll vissza. Képernyőn kívül a mozgás szünetel (site.js). */
.house { margin: 1.75rem 0 0; padding: .9rem .9rem .75rem; border-radius: 16px; background: var(--paper); }
.house svg { width: 100%; height: auto; }
.house figcaption { margin-top: .4rem; font-size: .9rem; color: var(--ink-soft); }
.house.is-paused,
.house.is-paused * { animation-play-state: paused !important; }

.h-soil { fill: #E7ECF4; }
.h-frame { fill: none; stroke: #9AA6C0; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.h-frame .h-inner { stroke: #C3CBDA; stroke-width: 1.6; }

.h-sys { color: #C3CBDA; transition: color .35s ease; }
.h-sys :is(path, rect, circle) { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.h-sys .h-unit { fill: var(--white); transition: fill .35s ease; }
.h-sys .base { stroke: #C3CBDA; }
.h-sys .live { stroke-width: 3.4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .3s ease, opacity .3s ease; }
.h-sys .dots { stroke-width: 3.8; stroke-dasharray: 0 11; opacity: 0; transition: opacity .25s ease; }
.h-sys .h-air { stroke-dasharray: 4 7; opacity: 0; transition: opacity .3s ease; }
.h-sys text { fill: currentColor; font-family: var(--font); font-size: 13px; font-weight: 650; opacity: 0; transition: opacity .3s ease; }
.h-sys .h-tankfill { fill: #DCE3F6; stroke: none; transform: scaleY(0); transform-origin: 117px 233px; transform-box: view-box; transition: transform .35s ease; }
.h-sys .h-drop { fill: currentColor; stroke: none; opacity: 0; }
.fan { transform-box: view-box; }

.house.on-hutes .h-hutes { color: var(--cool); }
.house.on-futes .h-futes { color: var(--warm); }
.house.on-epuletgepeszet .h-epuletgepeszet { color: var(--navy); }

:is(.house.on-hutes .h-hutes, .house.on-futes .h-futes, .house.on-epuletgepeszet .h-epuletgepeszet) .live {
  opacity: .3; stroke-dashoffset: 0;
  transition: stroke-dashoffset .8s cubic-bezier(.5, 0, .2, 1), opacity .2s ease;
}
:is(.house.on-hutes .h-hutes, .house.on-futes .h-futes, .house.on-epuletgepeszet .h-epuletgepeszet) .h-unit {
  fill: color-mix(in srgb, currentColor 9%, white);
  filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 45%, transparent));
  transition: fill .4s ease .25s;
}
:is(.house.on-hutes .h-hutes, .house.on-futes .h-futes, .house.on-epuletgepeszet .h-epuletgepeszet) .dots {
  opacity: 1; transition: opacity .4s ease .7s; animation: house-dots 1.1s linear infinite;
}
:is(.house.on-hutes .h-hutes, .house.on-futes .h-futes) .h-air {
  opacity: .85; transition: opacity .5s ease .9s; animation: house-air 1.3s linear infinite;
}
:is(.house.on-hutes .h-hutes, .house.on-futes .h-futes, .house.on-epuletgepeszet .h-epuletgepeszet) text {
  opacity: 1; transition: opacity .4s ease .5s;
}
:is(.house.on-hutes .h-hutes, .house.on-futes .h-futes) .fan {
  animation: fan-start 1.1s cubic-bezier(.45, 0, 1, 1) .35s, fan-spin .55s linear 1.45s infinite;
}
.house.on-epuletgepeszet .h-tankfill { transform: scaleY(1); transition: transform 1.4s cubic-bezier(.3, .7, .2, 1) .4s; }
.house.on-epuletgepeszet .h-drop { animation: drip 1.6s ease-in 1.2s infinite; }

/* A szoba levegője: hűtésnél fentről hűvös, fűtésnél a padlótól meleg árad. */
.h-glow { opacity: 0; transition: opacity .4s ease; }
.house.on-hutes .h-glow-hutes,
.house.on-futes .h-glow-futes { opacity: 1; transition: opacity 1.4s ease .8s; }

/* Kint: hűtésnél nap süt, fűtésnél hó esik. */
.h-sun { opacity: 0; transform: scale(.6); transform-origin: 48px 44px; transform-box: view-box; transition: opacity .3s ease, transform .3s ease; }
.h-sun circle { fill: #FFE07A; stroke: var(--warm-1); stroke-width: 2; }
.h-rays { fill: none; stroke: var(--warm-1); stroke-width: 2.4; stroke-linecap: round; transform-box: view-box; }
.house.on-hutes .h-sun { opacity: 1; transform: none; transition: opacity .6s ease .2s, transform .8s cubic-bezier(.3, 1.5, .5, 1) .2s; }
.house.on-hutes .h-rays { animation: fan-spin 24s linear infinite; }
.h-snow { opacity: 0; transition: opacity .4s ease; }
.flake { fill: none; stroke: #8FB8EA; stroke-width: 1.6; stroke-linecap: round; }
.house.on-futes .h-snow { opacity: 1; transition: opacity .8s ease .3s; }
.house.on-futes .flake { animation: snow-fall 4.5s linear infinite; }

/* A termosztát a falon: a szám a site.js-ből jön, a színe a kijelölésből. */
.h-stat { fill: var(--white); stroke: #C3CBDA; stroke-width: 1.6; transition: stroke .4s ease; }
.h-stat-num { fill: #9AA6C0; font-family: var(--font); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; transition: fill .4s ease; }
.house[data-mode="hutes"] .h-stat { stroke: var(--cool); }
.house[data-mode="hutes"] .h-stat-num { fill: var(--cool); }
.house[data-mode="futes"] .h-stat { stroke: var(--warm); }
.house[data-mode="futes"] .h-stat-num { fill: var(--warm); }
.house[data-mode="auto"] .h-stat { stroke: var(--navy); }
.house[data-mode="auto"] .h-stat-num { fill: var(--navy); }

@keyframes house-dots { to { stroke-dashoffset: -22; } }
@keyframes house-air { to { stroke-dashoffset: -22; } }
@keyframes fan-start { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fan-spin { to { transform: rotate(360deg); } }
@keyframes drip {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  70% { transform: translateY(7px); opacity: 1; }
  100% { transform: translateY(9px); opacity: 0; }
}
@keyframes snow-fall {
  0% { transform: translate(0, -8px); opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { transform: translate(6px, 70px); opacity: 0; }
}
.pipe-hutes { --c-pipe: linear-gradient(var(--dir), var(--cool-3), var(--cool)); }
.pipe-futes { --c-pipe: linear-gradient(var(--dir), var(--warm-1), var(--warm-2), var(--warm-3)); }
.pipe-epuletgepeszet { --c-pipe: linear-gradient(var(--dir), #7A86D6, var(--navy)); }

.chooser-result { min-width: 0; }
.result-head h3 { margin-bottom: .4rem; font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-stretch: 108%; font-weight: 650; line-height: 1.2; }
.result-head p { max-width: 48ch; margin-bottom: 1.25rem; color: var(--ink-soft); }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.25rem;
  grid-template-areas: "name tags go" "short short go";
  align-items: center;
  gap: .2rem 1rem;
  padding: .95rem .35rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background-color .15s ease;
}
@media (hover: hover) and (pointer: fine) { .row:hover { background: var(--paper); color: var(--ink); } }
.row-name { grid-area: name; font-size: 1.08rem; font-stretch: 106%; font-weight: 650; }
.row-short { grid-area: short; font-size: .95rem; line-height: 1.45; color: var(--ink-soft); }
.row-tags { grid-area: tags; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
.row-go { grid-area: go; width: 1.25rem; height: 1.25rem; color: var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .row:hover .row-go { color: var(--navy); } }

.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .12rem .55rem;
  border-radius: 999px;
  background: var(--c-tint);
  color: var(--c);
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
}
.tag::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }

.result-photos { margin-top: 1.5rem; }
.result-label { margin-bottom: .6rem; font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.thumbs a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--paper); cursor: zoom-in; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.result-pages { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.result-pages a { color: var(--navy); font-weight: 600; }

@media (max-width: 900px) {
  .chooser { margin-top: -2.5rem; }
  .chooser-panel { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; border-radius: 18px; }
  .pipe { --dir: 90deg; --shade: 180deg; flex-direction: row; height: 8px; }
  .house { max-width: 30rem; }
}
@media (max-width: 520px) {
  .row { grid-template-columns: minmax(0, 1fr) 1.25rem; grid-template-areas: "name go" "short go" "tags go"; }
  .row-tags { justify-content: flex-start; margin-top: .35rem; }
  .choice { gap: .8rem; padding: .75rem .85rem; }
}

/* ---------- Így dolgozunk ---------- */
.process { padding-block: var(--space); background: var(--paper); }
.steps {
  position: relative;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.steps::before { content: ""; position: absolute; top: 1.4rem; left: 1.4rem; right: 1.4rem; height: 2px; background: var(--line-strong); }
.steps li { position: relative; }
.step-no {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-stretch: 110%;
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--paper);
}
.steps h3 { margin-bottom: .45rem; font-size: 1.15rem; font-weight: 650; }
.steps p { margin: 0; color: var(--ink-soft); }

@media (max-width: 860px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .steps::before { top: 1.4rem; bottom: 1.4rem; left: 1.4rem; right: auto; width: 2px; height: auto; }
  .steps li { padding-left: 4.25rem; min-height: 2.8rem; }
  .step-no { position: absolute; top: 0; left: 0; margin: 0; }
}

/* ---------- Munkáink: fotós csempék ---------- */
.projects { padding-block: var(--space); }

.project-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(15.5rem, auto);
  grid-auto-flow: dense;
  gap: 1rem;
}
.tile-big { grid-column: span 4; grid-row: span 2; }
.tile-tall { grid-column: span 2; grid-row: span 2; }
.tile-small,
.tile-cta { grid-column: span 2; }
.tile-wide { grid-column: span 4; }

.project-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
}
.project-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(20, 26, 64, .92) 0%, rgba(20, 26, 64, .5) 40%, rgba(20, 26, 64, 0) 68%);
}
@media (hover: hover) and (pointer: fine) { .project-card:hover { color: var(--white); } }
@media (hover: hover) and (pointer: fine) { .project-card:hover img { transform: scale(1.04); } }

.project-count {
  position: absolute;
  top: .85rem;
  right: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .65rem .25rem .5rem;
  border-radius: 999px;
  background: rgba(20, 26, 64, .66);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}
.project-count .icon { width: 1rem; height: 1rem; }
.project-body { padding: 1.25rem 1.4rem 1.35rem; }
.project-place { margin-bottom: .35rem; font-size: clamp(1.3rem, 2vw, 1.6rem); font-stretch: 108%; font-weight: 650; line-height: 1.15; }
.tile-big .project-place { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.project-what { max-width: 34rem; margin: 0; font-size: .97rem; line-height: 1.45; color: rgba(255, 255, 255, .86); }

.project-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .6rem;
  height: 100%;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white);
}
.project-cta h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); font-stretch: 108%; font-weight: 650; }
.project-cta p { margin: 0; font-size: .97rem; line-height: 1.45; color: rgba(255, 255, 255, .86); }
.project-cta a { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .project-cta a:hover { color: var(--white); text-decoration-thickness: 2px; } }
.cta-phone { font-size: clamp(1.4rem, 2.3vw, 1.75rem); font-stretch: 110%; font-weight: 600; text-decoration: none; }
.cta-link { font-weight: 600; }

@media (max-width: 960px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(14rem, auto); }
  .tile-big, .tile-wide { grid-column: span 2; }
  .tile-tall { grid-column: span 1; grid-row: span 2; }
  .tile-small, .tile-cta { grid-column: span 1; }
}
@media (max-width: 560px) {
  .project-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .project-grid > li { grid-column: auto; grid-row: auto; }
  .project-card { height: auto; min-height: 19rem; }
  .tile-big .project-card,
  .tile-tall .project-card { min-height: 24rem; }
}

/* Márkák */
.brands {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: .4rem 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-strong);
}
.brands-label { margin: 0; font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.brand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem 1.75rem; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-stretch: 118%; font-weight: 450; line-height: 1.3; color: var(--navy); }
.brand-list .brand-main { font-weight: 700; color: var(--ink); }   /* a fő márkák (BRANDS_MAIN) */
.brands-note { grid-column: 2; margin: .4rem 0 0; color: var(--ink-soft); }

@media (max-width: 640px) {
  .brands { grid-template-columns: minmax(0, 1fr); }
  .brands-note { grid-column: 1; }
}

/* ---------- Rólunk ---------- */
.about { padding-block: var(--space); background: var(--paper); }
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2.5rem, 7vw, 6rem); }
.about-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.about-text p { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.55; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.facts dt { font-size: clamp(1.8rem, 3vw, 2.4rem); font-stretch: 120%; font-weight: 400; line-height: 1.1; color: var(--navy); }
.facts dd { margin: .35rem 0 0; color: var(--ink-soft); }

@media (max-width: 860px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-photo { max-width: 26rem; }
  .about-photo img { aspect-ratio: 4 / 3.4; }
}

/* ---------- Galéria ---------- */
.gallery { padding-block: var(--space); }
.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.gallery-grid a { display: block; height: 100%; overflow: hidden; border-radius: 10px; background: var(--paper); cursor: zoom-in; }
.gallery-grid img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) { .gallery-grid a:hover img { transform: scale(1.04); } }

@media (min-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 13.5rem; grid-auto-flow: dense; gap: .8rem; }
  .gallery-grid img { aspect-ratio: auto; }
  .g-tall { grid-row: span 2; }
  .g-wide { grid-column: span 2; }
}

/* ---------- Hol dolgozunk: térkép ---------- */
.area { padding-block: var(--space); background: var(--paper); }
.area-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.area-text p { font-size: 1.1rem; color: var(--ink-soft); }
.towns { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.towns li { padding: .4rem .95rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); font-weight: 550; line-height: 1.3; }
.towns .is-home { border-color: var(--navy); background: var(--navy); color: var(--white); }

.area-map { padding: clamp(1rem, 3vw, 2rem); border-radius: 22px; background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.map { width: 100%; max-width: 30rem; height: auto; margin-inline: auto; }
.map-river { fill: none; stroke: #C4E4F8; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.map-dot { fill: var(--navy); stroke: var(--white); stroke-width: 2; }
.map-city { fill: var(--white); stroke: var(--navy); stroke-width: 2.5; }
.map-home circle { fill: var(--navy); }
.map-home path { fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.map-label { fill: var(--ink); font-family: var(--font); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--white); stroke-width: 4px; stroke-linejoin: round; }
.map-label.is-home { fill: var(--navy); font-size: 14px; font-weight: 750; }
.map-label.has-munka { font-weight: 750; }

/* Munkáink a térképen: ahol fotós munkánk van, ott fotós jel áll; rákattintva mellette kártya nyílik
   (assets/js/site.js). A jel a térkép szélességéhez igazodik, a kattintható felület mindig 44 px. */
.map-wrap { position: relative; max-width: 30rem; margin-inline: auto; container-type: inline-size; }
.map-kep { position: relative; }   /* a jelek ehhez a dobozhoz (csak a térképhez) igazodnak */
.map-wrap .map { display: block; max-width: none; }
.map-pin {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
  border-radius: 50%;
  color: var(--white);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .map-pin:hover { color: var(--white); } }
.map-pin-jel {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(1.45rem, 7.4cqw, 1.95rem);
  height: clamp(1.45rem, 7.4cqw, 1.95rem);
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 2.5px var(--white), 0 3px 10px rgba(20, 26, 64, .28);
  transition: background-color .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.map-pin-jel .icon { width: 56%; height: 56%; }
.map-pin.is-otthon .map-pin-jel { width: clamp(1.15rem, 5.6cqw, 1.5rem); height: clamp(1.15rem, 5.6cqw, 1.5rem); }
/* a fotós jel a munka kis fotója: kerek kép fehér szegéllyel; kijelölve a szegély kék (Boldi, 2026-10-21) */
.map-pin-jel.is-foto,
.map-pin.is-otthon .map-pin-jel.is-foto { width: clamp(1.95rem, 10cqw, 2.6rem); height: clamp(1.95rem, 10cqw, 2.6rem); background: var(--white); }
.map-pin-jel.is-foto img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.map-pin.is-aktiv .map-pin-jel.is-foto { background: var(--white); box-shadow: 0 0 0 3px var(--cool), 0 3px 10px rgba(20, 26, 64, .28); }
@media (hover: hover) and (pointer: fine) { .map-pin:hover .map-pin-jel { transform: scale(1.12); } }
.map-pin.is-aktiv .map-pin-jel { background: var(--cool); transform: scale(1.12); }
.map-pin:focus-visible { outline: none; }
.map-pin:focus-visible .map-pin-jel { outline: 3px solid var(--cool-2); outline-offset: 3px; }

/* Amikor a térkép először a képernyőre ér, a jelek egyenként előugranak, és egyszer „pingelnek”. */
.map-wrap.is-varakozik:not(.is-latszik) .map-pin-jel { opacity: 0; }
.map-wrap.is-latszik .map-pin-jel { animation: map-pin-be .55s cubic-bezier(.2, .9, .3, 1.25) calc(var(--i, 0) * 110ms + 150ms) backwards; }
.map-pin-jel::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--cool-2);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.map-wrap.is-latszik .map-pin-jel::after { animation: map-pin-ping 1.3s ease-out calc(var(--i, 0) * 110ms + 650ms) 1; }
@keyframes map-pin-be { from { opacity: 0; transform: scale(.35); } }
@keyframes map-pin-ping { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(2); } }

/* A kártya: a jel mellett (a JS teszi a helyére), keskeny térképen a térkép alatt. */
.map-card {
  position: absolute;
  z-index: 3;
  width: 17rem;
  padding: 1rem 1rem 1.1rem;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line), 0 22px 44px -20px rgba(20, 26, 64, .5);
  opacity: 0;
  translate: 8px 0;
  transition: opacity .22s ease, translate .3s cubic-bezier(.2, .8, .2, 1);
  scroll-margin: 5.5rem 0 6.5rem;   /* a ragadós fejléc és a telefonos alsó sáv ne takarja */
}
.map-card.is-balra { translate: -8px 0; }
.map-card.is-nyitva { opacity: 1; translate: 0 0; }
.map-card::before {
  content: "";
  position: absolute;
  top: var(--nyil, 50%);
  left: -7px;
  width: 14px;
  height: 14px;
  background: var(--white);
  box-shadow: -1px 1px 0 var(--line);
  translate: 0 -50%;
  rotate: 45deg;
}
.map-card.is-balra::before { left: auto; right: -7px; box-shadow: 1px -1px 0 var(--line); }
.map-card.is-alul { position: relative; width: auto; margin-top: 1rem; translate: 0 8px; }
.map-card.is-alul.is-nyitva { translate: 0 0; }
.map-card.is-alul::before { display: none; }
.map-card h3 { margin: 0 2.25rem .7rem 0; font-size: 1.2rem; font-stretch: 110%; font-weight: 700; line-height: 1.2; }
.map-card p { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink-soft); }
.map-card p strong { display: block; margin-bottom: .1rem; font-weight: 650; color: var(--ink); }
.map-card-close {
  position: absolute;
  top: .45rem;
  right: .45rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .map-card-close:hover { background: var(--paper); color: var(--ink); } }
.map-card-close .icon { width: 1.15rem; height: 1.15rem; }
.map-card-foto { position: relative; display: block; overflow: hidden; margin-bottom: .75rem; border-radius: 10px; color: var(--white); }
@media (hover: hover) and (pointer: fine) { .map-card-foto:hover { color: var(--white); } }
.map-card-foto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) { .map-card-foto:hover img { transform: scale(1.04); } }
.map-card-foto .project-count { top: .5rem; right: .5rem; font-size: .78rem; }
/* Több munka egy településen: kisképes sorok. */
.map-card.is-tobb .map-card-munka { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.map-card.is-tobb .map-card-munka + .map-card-munka { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.map-card.is-tobb .map-card-foto { margin: 0; }
.map-card.is-tobb .map-card-foto img { aspect-ratio: 1; }
.map-card.is-tobb .project-count { display: none; }
.map-card-tovabb { display: inline-block; margin-top: .85rem; font-weight: 600; color: var(--navy); }
/* sima mondat (a régi minta-ikon kikerült; a rugalmas doboz a mondatot darabokra szedte – 2026-10-24-i audit) */
.map-jelmagyarazat { margin: .75rem 0 0; font-size: .92rem; color: var(--ink-soft); text-align: center; text-wrap: balance; }
.map-pin-minta { flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--navy); color: var(--white); }
.map-pin-minta .icon { width: 56%; height: 56%; }

/* A településlistában a fotós munkás település a térkép kártyáját nyitja. */
.towns .has-munka { padding: 0; border: 0; background: none; }
.towns .has-munka a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem .4rem .95rem;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .towns .has-munka a:hover { background: var(--navy); color: var(--white); } }
.towns .has-munka .icon { width: 1rem; height: 1rem; }
.towns .is-home.has-munka a { background: var(--navy); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .map-card, .map-pin-jel, .map-card-foto img { transition: none; }
}

/* Rétegzett, lassú mozgás (assets/js/site.js, csak ha fut): a nyitókép fotója lassabban halad a tartalomnál, a nagy
   munkafotók a keretükben csúsznak el. Ehhez a képek kicsit nagyobbak a keretüknél, és a keret levágja a szélüket. */
.parallaxis .hero-media { overflow: hidden; }
.parallaxis .hero-media img { will-change: translate, scale; }
.parallaxis .project-card img,
.parallaxis .about-photo img,
.parallaxis .page-hero-photo img { scale: 1.12; }
/* will-change NÉLKÜL (2026-10-25, Boldi: „ez a kép még mindig pixeles”): külön rétegen a böngésző a képet 1:1-ben rajzolta meg,
   és utána nagyította 1,12-szeresre (és forgatta a ferde kerettel) – homályos lett; így minden görgetésnél élesen rajzolja újra */
.parallaxis .about-photo,
.parallaxis .page-hero-photo { overflow: hidden; border-radius: var(--radius); }

@media (max-width: 860px) {
  .area-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ajánlatkérés ---------- */
.quote { padding-block: var(--space); background: var(--ink); color: var(--white); }
.quote a { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .quote a:hover { color: var(--cool-3); } }
/* a bevezető két részben: a cím és az első mondat fent, a többi (tervrajz, telefonszámok, értékelés) az űrlap után áll a
   kódban – asztalon a bal hasábban egymás alatt, telefonon az űrlap alatt (Boldi, 2026-10-28: az „Ajánlatot kérek” gomb így
   rögtön a mezőkhöz visz, és a küldés utáni visszaigazolás is látszik, #ajanlat-urlap) */
.quote-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: auto 1fr;
  grid-template-areas: "fej urlap" "tobbi urlap"; column-gap: clamp(2rem, 6vw, 5rem); row-gap: 0; }
.quote-grid > .quote-intro { grid-area: fej; }
.quote-grid > .quote-tobbi { grid-area: tobbi; }
.quote-grid > :is(.quote-form, .form-message) { grid-area: urlap; }
.quote-intro p { color: rgba(255, 255, 255, .8); }
.quote-phone { display: grid; margin-top: 1.5rem; }
.quote-phone a { font-size: 1.6rem; font-stretch: 112%; font-weight: 550; text-decoration: none; }
.quote-phone span { font-size: .95rem; }

.quote-form { display: grid; gap: 1.1rem; }
.needs-field { margin: 0; padding: 0; border: 0; }
.needs-field legend { margin-bottom: .6rem; padding: 0; font-size: .98rem; font-weight: 600; }
.need-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.need-pill { position: relative; cursor: pointer; }
.need-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pill-face {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.05rem;
  border: 1.5px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pill-face .icon { width: 1.2rem; height: 1.2rem; }
@media (hover: hover) and (pointer: fine) { .need-pill:hover .pill-face { border-color: rgba(255, 255, 255, .7); } }
.need-pill input:checked + .pill-face { border-color: var(--white); background: var(--white); color: var(--c); }
.need-pill input:focus-visible + .pill-face { outline: 3px solid var(--cool-2); outline-offset: 2px; }

.field { display: grid; gap: .35rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field label { font-size: .98rem; font-weight: 600; }
.optional { font-weight: 400; color: rgba(255, 255, 255, .7); }   /* az indigó sávon is ≥ 4,5:1 */
/* a kötelező mezők csillaga és a jelentése a szövegdoboz alatt (Boldi, 2026-10-27) */
.kotelezo { font-weight: 700; color: #FFB37A; }   /* világos narancs: az indigó sávon ~5:1 */
.kotelezo-magyarazat { margin: .4rem 0 0; font-size: .88rem; color: rgba(255, 255, 255, .75); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .75rem .85rem;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 1px; }

.check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .75rem; font-size: .95rem; color: rgba(255, 255, 255, .84); }
.check input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--cool-2); }
.quote-form .btn { justify-self: start; }

.hp { position: absolute; left: -9999px; }
.form-error { margin: 0; padding: .75rem 1rem; border-left: 3px solid var(--warm-2); background: rgba(255, 255, 255, .1); }
/* hibás mező (site.js / ajanlatkeres.php): narancs keret, alatta, mit kell tenni */
.field-hiba { margin: .1rem 0 0; font-size: .92rem; font-weight: 600; line-height: 1.35; color: #FFD7BF; }
.check .field-hiba { grid-column: 1 / -1; margin: 0; }
.quote-form .field [aria-invalid="true"] { border-color: var(--warm-2); }
.quote-form .check input[aria-invalid="true"] { outline: 2px solid var(--warm-2); outline-offset: 2px; }
.form-message h3 { margin-bottom: .5rem; font-size: 1.5rem; font-stretch: 110%; }

/* A tervrajz-rajzolóból csatolt rajz (site.js): kis kép, mellette az eltávolítás. */
.csatolt-rajz { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: .75rem; border: 1.5px solid rgba(255, 255, 255, .32); border-radius: 12px; }
.csatolt-rajz img { width: 100%; height: 5.5rem; object-fit: contain; border-radius: 6px; background: var(--white); }
.csatolt-rajz p { margin: 0 0 .35rem; font-size: .95rem; line-height: 1.45; color: rgba(255, 255, 255, .85); }
.csatolt-rajz strong { color: var(--white); }
.quote .link-btn { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .quote .link-btn:hover { color: var(--cool-3); } }

@media (max-width: 860px) { .quote-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "fej" "urlap" "tobbi"; row-gap: 2rem; } }
@media (max-width: 520px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .csatolt-rajz { grid-template-columns: 5.5rem minmax(0, 1fr); } }

/* ---------- Kategória- és szolgáltatásoldalak ---------- */
.page-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); background: var(--paper); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.page-hero h1 { margin-bottom: 1rem; font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-stretch: 112%; font-weight: 600; line-height: 1.06; letter-spacing: -0.01em; }
.page-hero .lead { max-width: 40rem; font-size: 1.15rem; color: var(--ink-soft); }
.page-hero .hero-actions { margin-top: 1.5rem; }
.page-hero-photo img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); }
/* A kategória „csöve” a fotó alatt: ugyanaz a szín, mint a választóban. */
.page-hutes .page-hero-photo::after,
.page-futes .page-hero-photo::after,
.page-epuletgepeszet .page-hero-photo::after { content: ""; display: block; height: 6px; margin-top: .8rem; border-radius: 999px; background: var(--c-pipe); }
.crumbs { margin-bottom: 1rem; font-size: .95rem; color: var(--ink-soft); }
.page-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1rem 0 0; font-size: .95rem; color: var(--ink-soft); }

.intro { padding-block: var(--space); }
.intro p { margin: 0; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.5; }

.cat-section { padding-block: var(--space); }
.cat-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: clamp(2rem, 5vw, 4.5rem); }
.cat-grid h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.cat-combos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.combo-link { display: grid; gap: .3rem; padding: 1.1rem 1.2rem; border: 1.5px solid var(--line); border-radius: 16px; color: var(--ink); text-decoration: none; transition: border-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .combo-link:hover { border-color: var(--navy); color: var(--ink); } }
.combo-icons { display: flex; gap: .35rem; margin-bottom: .35rem; }
.combo-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; background: var(--c-tint); color: var(--c); }
.combo-icon .icon { width: 1.3rem; height: 1.3rem; }
.combo-title { font-stretch: 106%; font-weight: 650; }
.combo-tip { font-size: .95rem; color: var(--ink-soft); }

.cat-photos { padding-bottom: var(--space); }
.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.photo-grid a { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--paper); cursor: zoom-in; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }

.cta-band { padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--ink); color: var(--white); }
.cta-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; }
.cta-band h2 { margin-bottom: .4rem; }
.cta-band p { margin: 0; color: rgba(255, 255, 255, .8); }
.cta-band .hero-actions { margin: 0; }

@media (max-width: 860px) {
  .page-hero-grid,
  .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .page-hero-photo img { aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Adatkezelési tájékoztató ---------- */
.legal h2 { margin: 2.75rem 0 .8rem; font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.legal h3 { margin: 1.9rem 0 .6rem; font-size: 1.15rem; font-stretch: 112%; font-weight: 650; line-height: 1.3; }
.legal code { padding: .05em .35em; border-radius: 5px; background: var(--paper); font-size: .92em; }
.intro.legal p { margin: 0 0 1em; font-size: inherit; line-height: inherit; }
.legal ul { margin: 0 0 1em; padding-left: 1.25rem; }
.legal li { margin-bottom: .45rem; }
.legal a { overflow-wrap: anywhere; }
.legal-summary { padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius); background: var(--paper); }
.legal-summary h2 { margin-top: 0; }
.legal-summary ul { margin: 0; }
.legal-summary .legal-facts, .legal-summary .legal-facts dd:last-child { margin-bottom: 0; }
.legal-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 1.5rem; margin: 0 0 1.25rem; }
.legal-facts dt { font-weight: 650; }
.legal-facts dd { margin: 0; }
.intro.legal .legal-date { margin-top: 2.5rem; color: var(--ink-soft); }
@media (max-width: 560px) {
  .legal-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .legal-facts dd { margin-bottom: .75rem; }
}

/* ---------- Blog (pages/blog.php, pages/blog-post.php, inc/blog.php) ----------
   Kártyák a fotóval és a téma színes címkéjével; a cikk szövege egy keskeny, jól olvasható
   hasábban fut, a kiemelt doboz és a táblázat a cikk fő témájának színét veszi fel. */
.blog-list { padding-block: clamp(2.5rem, 5vw, 4rem) var(--space); }
.blog-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.blog-filter a {
  padding: .4rem .95rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .blog-filter a:hover { border-color: var(--c, var(--navy)); } }
.blog-filter a[aria-current] { border-color: var(--c, var(--navy)); background: var(--c-tint, var(--paper)); color: var(--c, var(--navy)); }
.blog-empty { max-width: 40rem; margin: 0; font-size: 1.15rem; color: var(--ink-soft); }

.post-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; }
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .post-card:hover { border-color: var(--navy); color: var(--ink); } }
.post-card-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper); }
.post-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) { .post-card:hover .post-card-photo img { transform: scale(1.03); } }
.post-card-body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1.1rem 1.25rem 1.25rem; }
.post-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.post-card-title { margin: 0; font-size: 1.22rem; font-stretch: 108%; font-weight: 650; line-height: 1.25; }
.post-card-desc { font-size: .97rem; line-height: 1.5; color: var(--ink-soft); }
.post-card-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: auto; padding-top: .4rem; font-size: .88rem; color: var(--ink-soft); }

/* A bloglista legújabb cikke kiemelve: asztali nézetben fotó és szöveg egymás mellett. */
@media (min-width: 761px) {
  .blog-list .post-cards > li:first-child { grid-column: 1 / -1; }
  .blog-list .post-cards > li:first-child .post-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .blog-list .post-cards > li:first-child .post-card-photo { aspect-ratio: auto; min-height: 20rem; }
  .blog-list .post-cards > li:first-child .post-card-body { justify-content: center; padding: clamp(1.5rem, 3vw, 2.5rem); }
  .blog-list .post-cards > li:first-child .post-card-title { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; }
  .blog-list .post-cards > li:first-child .post-card-desc { font-size: 1.05rem; }
  .blog-list .post-cards > li:first-child .post-card-meta { margin-top: .5rem; }
}

.page-hero .post-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; margin: 1rem 0 0; font-size: .95rem; color: var(--ink-soft); }

.post-body { padding-block: clamp(2.5rem, 5vw, 3.5rem) var(--space); }
.post-draft { padding: .9rem 1.1rem; border: 1px solid #F5C9A9; border-radius: 12px; background: #FFF1E7; font-size: .97rem; }
.post-toc { margin-bottom: 2.25rem; padding: 1.1rem 1.35rem; border: 1.5px solid var(--line); border-radius: 14px; }
.post-toc-title { margin: 0 0 .4rem; font-weight: 650; }
.post-toc ul { list-style: none; margin: 0; padding: 0; }
.post-toc li { margin: .25rem 0; }
.post-toc a { color: var(--ink); }

.post-text { font-size: 1.1rem; line-height: 1.7; }
.post-text > :first-child { margin-top: 0; }
.post-text p { margin: 0 0 1.1em; }
.post-text h2 { margin: 2.6rem 0 .8rem; font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-stretch: 112%; font-weight: 600; line-height: 1.15; }
.post-text h3 { margin: 2rem 0 .5rem; font-size: 1.22rem; font-stretch: 108%; font-weight: 650; line-height: 1.3; }
.post-text ul,
.post-text ol { margin: 0 0 1.2em; padding-left: 1.35rem; }
.post-text li { margin-bottom: .45rem; }
.post-text li::marker { color: var(--c, var(--navy)); }
.post-text a { color: var(--navy); }
.post-text strong { font-weight: 650; }
.post-text code { padding: .05em .35em; border-radius: 5px; background: var(--paper); font-size: .9em; }
.post-note {
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--c, var(--navy));
  border-radius: 0 12px 12px 0;
  background: var(--c-tint, var(--paper));
}
.post-note p { margin: 0; }
.post-figure { margin: 2rem 0; }
.post-figure a { display: block; overflow: hidden; border-radius: 12px; background: var(--paper); cursor: zoom-in; }
/* Az álló fotó se nyúljon a képernyő fölé: legfeljebb 34rem magas, a többi a nagyítóban látszik. */
.post-figure img { width: 100%; height: auto; max-height: 34rem; object-fit: cover; }
.post-figure figcaption { margin-top: .6rem; font-size: .92rem; line-height: 1.45; color: var(--ink-soft); }
.table-wrap { margin: 1.75rem 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .98rem; line-height: 1.45; }
.table-wrap th,
.table-wrap td { padding: .65rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table-wrap thead th { background: var(--c-tint, var(--paper)); font-weight: 650; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 520px) {
  /* telefonon a három oszlop is kiférjen: kisebb betű, szűkebb cella, magyar elválasztás */
  .table-wrap table { font-size: .88rem; }
  .table-wrap th,
  .table-wrap td { padding: .5rem .55rem; hyphens: auto; }
}

.post-author { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-soft); }
.post-author p { margin: 0 0 .3rem; }
.post-author .post-author-name { font-weight: 650; color: var(--ink); }
.post-updated { font-size: .92rem; }

.post-services { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.post-services h2,
.post-more h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.post-more { padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--paper); }

/* ---------- Szolgáltatásoldalak részletei (pages/service.php, inc/szolgaltatasok.php) ----------
   Balra a szöveg és a pipás lista, jobbra a ragadós árkártya; a két tisztítási mód egymás mellett. */
.szolg { padding-block: var(--space); }
.szolg-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 5vw, 4.5rem); }
.szolg-szoveg > p { max-width: 42rem; font-size: 1.1rem; line-height: 1.65; }
.szolg-szoveg h2 { margin: 2.25rem 0 1rem; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.pipa-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .7rem 1.5rem; }
.pipa-lista li { display: flex; align-items: flex-start; gap: .6rem; font-size: 1.05rem; line-height: 1.45; }
.pipa-lista .icon { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .05rem; color: var(--c, var(--navy)); stroke-width: 2.4; }
.szolg-modok { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin-top: 2rem; }
.szolg-mod { display: flex; flex-direction: column; padding: 1.35rem 1.4rem; border: 1.5px solid var(--line); border-radius: 16px; }
.szolg-mod h3 { margin-bottom: .35rem; font-size: 1.25rem; font-stretch: 108%; font-weight: 650; }
.szolg-mod p { margin: 0 0 .8rem; line-height: 1.55; color: var(--ink-soft); }
.szolg-mod .szolg-mod-mikor { font-weight: 600; color: var(--c, var(--navy)); }
.szolg-mod .szolg-mod-ar { margin: auto 0 0; padding-top: .8rem; border-top: 1px solid var(--line); font-size: 1.35rem; font-stretch: 108%; font-weight: 650; color: var(--ink); }
.szolg-mod-ar span { font-size: .95rem; font-weight: 500; color: var(--ink-soft); }

.ar-kartya { position: sticky; top: 5.5rem; display: grid; gap: .9rem; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: 20px; background: var(--paper); }
.ar-kartya h2 { margin: 0; font-size: 1.5rem; }
.ar-kartya dl { display: grid; gap: .25rem; margin: 0; }
.ar-kartya dt { font-size: .95rem; color: var(--ink-soft); }
.ar-kartya dd { margin: 0 0 .7rem; font-size: 1.3rem; font-stretch: 108%; font-weight: 650; }
.ar-kartya p { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--ink-soft); }
.ar-kartya .btn { justify-self: start; }

@media (max-width: 900px) {
  .szolg-grid { grid-template-columns: minmax(0, 1fr); }
  .ar-kartya { position: static; }
}

/* ---------- Hol dolgozunk és munkakártyák (pages/hol-dolgozunk.php, pages/telepules.php, inc/telepulesek.php) ----------
   A munkakártyák a szolgáltatásoldalak „Munkáink” részében is megjelennek (pages/service.php). */
.szolg-munkak { padding-bottom: var(--space); }
.hely-szakasz { padding-top: var(--space); }
.hely-szakasz + .cta-band { margin-top: var(--space); }

.hely-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: .6rem 1rem; }
.hely-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; padding: .85rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--radius); }
.hely-lista .is-home { border-color: var(--navy); }
.hely-nev { font-size: 1.15rem; font-stretch: 106%; font-weight: 650; }
.hely-nev a { color: var(--navy); }
.hely-ut { color: var(--ink-soft); }
.hely-ut small { display: block; font-size: .85rem; }
.hely-resz { order: 3; flex-basis: 100%; font-size: .95rem; color: var(--ink-soft); }
.hely-munka { order: 4; flex-basis: 100%; font-size: .95rem; font-weight: 600; color: var(--navy); }
.hely-tav { margin: 0; font-size: 1.1rem; }
.hely-forras { margin-top: 1.75rem; font-size: .93rem; color: var(--ink-soft); }
.area-text .area-more { margin: 1.25rem 0 0; font-size: 1rem; }
.area-more a { font-weight: 600; color: var(--navy); }

.munkak { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.munka { display: flex; flex-direction: column; overflow: hidden; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--white); }
.munka-foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper); cursor: zoom-in; }
.munka-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) { .munka-foto:hover img { transform: scale(1.04); } }
.munka-foto .project-count { color: var(--white); }
.munka-szoveg { display: flex; flex: 1; flex-direction: column; gap: .45rem; padding: 1rem 1.15rem 1.15rem; }
.munka-szoveg h3 { font-size: 1.15rem; font-stretch: 106%; font-weight: 650; line-height: 1.25; }
.munka-szoveg p { margin: 0; line-height: 1.5; color: var(--ink-soft); }
.munka-szoveg .munka-tagek { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .2rem; }

/* ---------- Méretező kalkulátorok (pages/kalkulator-*.php, assets/js/kalkulator.js) ----------
   Balra a kérdések pirulákban, jobbra a ragadós eredménykártya: a nagy szám a javasolt gyári
   teljesítmény, alatta a teljesítménysor, amin a javasolt gép a téma „csövének” színével kigyullad
   (határesetben a szomszédja szaggatott kerettel). */
/* Eszközgombok (inc/eszkozok.php: kalkulátor, felpróbáló, rajzoló a lapok tetején): ikon, cím és felszólítás. Az ikon
   első megjelenéskor egyszer, rámutatáskor újra mozog (site.js: is-latszik); csökkentett mozgásnál nem. */
.eszkozgombok { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }
/* Boldi választása (2026-10-18, „A” változat): mélykék csempe fehér szöveggel, alul a márka színátmenetes „csöve” csíkként
   (a hőszivattyúnál meleg színekkel). */
.eszkozgomb {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  max-width: 100%;
  min-height: 3.6rem;
  padding: .5rem 1rem .6rem .5rem;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: var(--ink);
  box-shadow: 0 14px 28px -20px rgba(26, 33, 80, .8);
  color: var(--white);
  text-decoration: none;
  transition: background-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.eszkozgomb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cool-3), var(--cool), var(--cool-3)) 0 0 / 200% 100%;
  transform-origin: left;
}
.eszkozgomb-hoszivattyu::after { background-image: linear-gradient(90deg, var(--warm-1), var(--warm-2), var(--warm-3), var(--warm-1)); }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover { background: var(--navy); box-shadow: 0 18px 32px -20px rgba(26, 33, 80, .9); color: var(--white); } }
.eszkozgomb-ikon { display: grid; place-items: center; flex: none; width: 2.8rem; height: 2.8rem; border-radius: 12px; background: rgba(255, 255, 255, .1); color: var(--white); }
.eszkozgomb-ikon svg { width: 1.9rem; height: 1.9rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.eszkozgomb-szoveg { display: grid; gap: .05rem; min-width: 0; line-height: 1.25; }
.eszkozgomb-szoveg strong { font-weight: 650; }
.eszkozgomb-szoveg span { color: var(--cool-3); font-size: .9rem; font-weight: 600; }
.eszkozgomb-hoszivattyu .eszkozgomb-szoveg span { color: var(--warm-1); }
.eszkozgomb > .icon { width: 1.05rem; height: 1.05rem; flex: none; margin-left: .1rem; color: var(--white); transition: transform .25s ease; }
.eszkozgomb:focus-visible > .icon { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover > .icon { transform: translateX(3px); } }
/* telefonon egymás alatt, egyforma szélesen, a nyíl a jobb szélen */
@media (max-width: 560px) {
  .eszkozgomb { flex: 1 1 100%; }
  .eszkozgomb > .icon { margin-left: auto; }
}
.eg-halvany { opacity: .5; }
.eg-tele { fill: currentColor; stroke: none; }
.eg-mutato { transform-box: view-box; transform-origin: 12px 17.5px; }
.eg-mutato path { stroke: var(--warm); stroke-width: 2; }
.eg-cso { stroke: var(--warm-2); stroke-dasharray: 1; stroke-dashoffset: 0; }
.eg-ho path { stroke: var(--warm-2); }
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) { .eszkozgomb:hover { transform: translateY(-2px); } }
  /* első megjelenéskor egyszer (a gombok sorban, egymás után) */
  .eszkozgombok.is-latszik .eg-mutato { animation: eg-mutato-be 1.1s cubic-bezier(.2, .8, .3, 1.25) .3s both; }
  .eszkozgombok.is-latszik .eg-gep { animation: eg-gep-be .8s cubic-bezier(.3, .7, .3, 1.3) .5s both; }
  .eszkozgombok.is-latszik .eg-cso { animation: eg-cso-be 1s ease .7s both; }
  .eszkozgombok.is-latszik .eg-ho path { animation: eg-ho-be .9s ease .4s both; }
  /* a „cső”-csík: megjelenéskor balról kirajzolódik, rámutatáskor fény fut végig rajta */
  .eszkozgombok.is-varakozik .eszkozgomb::after { transform: scaleX(0); }
  .eszkozgombok.is-latszik .eszkozgomb::after { animation: eg-csik-be .9s cubic-bezier(.4, 0, .2, 1) .15s both; }
  .eszkozgombok.is-latszik .eszkozgomb + .eszkozgomb::after { animation-delay: .3s; }
  .eszkozgombok.is-latszik .eszkozgomb + .eszkozgomb + .eszkozgomb::after { animation-delay: .45s; }
  .eszkozgomb:focus-visible::after { animation: eg-csik-fut 1.2s linear infinite; }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover::after { animation: eg-csik-fut 1.2s linear infinite; } }
  /* rámutatáskor (vagy billentyűvel ráállva) újra */
  .eszkozgomb:focus-visible .eg-mutato { animation: eg-mutato 1s cubic-bezier(.2, .8, .3, 1.25); }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover .eg-mutato { animation: eg-mutato 1s cubic-bezier(.2, .8, .3, 1.25); } }
  .eszkozgomb:focus-visible .eg-gep { animation: eg-gep .7s cubic-bezier(.3, .7, .3, 1.3); }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover .eg-gep { animation: eg-gep .7s cubic-bezier(.3, .7, .3, 1.3); } }
  .eszkozgomb:focus-visible .eg-cso { animation: eg-cso .8s ease; }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover .eg-cso { animation: eg-cso .8s ease; } }
  .eszkozgomb:focus-visible .eg-ho path { animation: eg-ho 1.2s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover .eg-ho path { animation: eg-ho 1.2s ease-in-out infinite; } }
  .eszkozgomb:focus-visible .eg-ho path + path { animation-delay: .3s; }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover .eg-ho path + path { animation-delay: .3s; } }
}
@keyframes eg-mutato-be { from { transform: rotate(-115deg); } to { transform: none; } }
@keyframes eg-mutato { from { transform: rotate(-115deg); } to { transform: none; } }
@keyframes eg-gep-be { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes eg-gep { from { opacity: .2; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes eg-cso-be { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes eg-cso { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes eg-ho-be { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes eg-ho { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .45; transform: translateY(-2.5px); } }
@keyframes eg-csik-be { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes eg-csik-fut { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .eszkozgomb, .eszkozgomb > .icon { transition: none; }
}

.kalk { padding-block: clamp(2rem, 4vw, 3rem) var(--space); }
.kalk-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: clamp(1.5rem, 4vw, 3.5rem); }
.kalk-form { display: grid; gap: 1.5rem; }
.kalk-mezok { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.kalk .field input { border-color: var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .kalk .field input:hover { border-color: var(--navy); } }
.kalk .optional { font-weight: 400; color: var(--ink-soft); }
.kalk-csoport { margin: 0; padding: 0; border: 0; }
.kalk-csoport legend { margin-bottom: .6rem; padding: 0; font-size: .98rem; font-weight: 600; }
.kalk-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.kalk-chip { position: relative; cursor: pointer; }
.kalk-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kalk-chip span {
  display: inline-block;
  padding: .55rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .kalk-chip:hover span { border-color: var(--c, var(--navy)); } }
.kalk-chip input:checked + span { border-color: var(--c, var(--navy)); background: var(--c, var(--navy)); color: var(--white); }
.kalk-chip input:focus-visible + span { outline: 3px solid var(--cool-2); outline-offset: 2px; }
.kalk-check { display: flex; align-items: center; gap: .6rem; font-weight: 600; cursor: pointer; }
.kalk-check input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--c, var(--navy)); }
.kalk-gaz { display: grid; gap: 1.1rem; padding: 1.25rem; border-radius: var(--radius); background: var(--paper); }
.kalk-gaz-cim { margin: 0; font-weight: 650; }
.kalk-tipp { margin: -.4rem 0 0; font-size: .92rem; color: var(--ink-soft); }
/* ha a beírt szám kívül esik a számolható tartományon (kalkulator.js: korlatJel): mivel számoltunk */
.kalk-korlat { margin: .25rem 0 0; padding-left: .6rem; border-left: 3px solid var(--warm-2); font-size: .9rem; line-height: 1.4; color: var(--ink); }
.kalk-mezok-egy { grid-template-columns: minmax(0, 15rem); }
/* „Pontosabb számítás”: becsukva, aki bele akar merülni, kinyitja (Boldi, 2026-10-23) */
.kalk-pontosabb { border-radius: var(--radius); background: var(--paper); }
.kalk-pontosabb > summary { padding: 1rem 1.25rem; font-weight: 650; cursor: pointer; }
.kalk-pontosabb > summary .optional { font-weight: 400; }
.kalk-pontosabb-test { display: grid; gap: 1.25rem; padding: .25rem 1.25rem 1.25rem; }
/* Több helyiség (Boldi, 2026-10-23): egy helyiségnél nincs keret, fejléc és saját eredménysor – olyan, mint eddig */
.kalk-szobak { display: grid; gap: 1.25rem; }
.kalk-szoba { display: grid; gap: 1.5rem; min-width: 0; }
.kalk-szoba-fej, .kalk-szoba-eredmeny { display: none; }
.kalk-szobak.is-tobb .kalk-szoba { gap: 1.25rem; padding: .75rem 1.25rem 1.25rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius); }
.kalk-szobak.is-tobb .kalk-szoba-fej { display: flex; align-items: center; gap: .5rem; margin-inline: -.6rem; }
.kalk-szobak.is-tobb .kalk-szoba-eredmeny { display: block; margin: -.25rem 0 0; font-weight: 650; color: var(--c, var(--navy)); }
.kalk-szoba-nev { flex: 1; min-width: 0; padding: .4rem .6rem; border: 1.5px solid transparent; border-radius: 10px; background: none; font: inherit; font-size: 1.15rem; font-weight: 650; color: var(--ink); }
.kalk-szoba-nev::placeholder { color: var(--ink-soft); opacity: 1; }
.kalk-szoba-nev:focus { border-color: var(--line-strong); outline: none; }
.kalk-szoba-nev:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 1px; }
.kalk-szoba-torol { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 1.5px solid transparent; border-radius: 10px; background: none; color: var(--ink-soft); cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .kalk-szoba-nev:hover { border-color: var(--line-strong); }
  .kalk-szoba-torol:hover { border-color: var(--line-strong); color: var(--ink); }
}
.kalk-szoba-torol:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 1px; }
.kalk-szoba-uj { justify-self: start; gap: .45rem; }
.kalk-szoba-uj[hidden] { display: none; }
.kalk-tetelek { display: grid; gap: .45rem; margin: 0 0 1.25rem; padding-left: 1.2rem; font-size: 1.05rem; line-height: 1.6; }
.kalk-szamok { margin: 1.25rem 0; }
.kalk-szamok > summary { font-weight: 650; cursor: pointer; }
.kalk-szamok .table-wrap { margin: 1rem 0 .75rem; }
.kalk-szamok tbody th { font-weight: 600; }
.kalk-modszer .kalk-forras { font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }

.kalk-eredmeny {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: .8rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: 20px;
  background: var(--ink);
  color: var(--white);
}
.kalk-eredmeny p { margin: 0; }
.kalk-cimke { font-size: .95rem; font-weight: 600; color: rgba(255, 255, 255, .7); }
.kalk-osztaly { font-size: clamp(2.6rem, 6vw, 3.6rem); font-stretch: 112%; font-weight: 650; line-height: 1; letter-spacing: -.01em; }
.kalk-igeny { color: rgba(255, 255, 255, .82); }
/* A teljesítménysor mindig egy sorban: egyforma széles cellák, bármennyi osztály van. */
.kalk-skala { list-style: none; margin: .2rem 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .3rem; }
.kalk-skala li {
  min-width: 0;
  padding: .3rem 0;
  border: 1.5px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  color: rgba(255, 255, 255, .72);         /* halványabb a kiemeltnél, de az indigó sávon is olvasható (≥ 4,5:1) */
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.kalk-skala li.is-fo { border-color: transparent; background: var(--c-pipe, var(--navy)); color: var(--white); }
.kalk-skala li.is-masik { border-style: dashed; border-color: rgba(255, 255, 255, .8); color: var(--white); }
.kalk-ajanlas { line-height: 1.5; }
.kalk-markak { font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.kalk-megjegyzes { padding: .75rem .9rem; border-left: 3px solid var(--warm-2); border-radius: 0 10px 10px 0; background: rgba(255, 255, 255, .08); font-size: .93rem; line-height: 1.5; }
.kalk-eredmeny .kalk-cta { justify-self: start; background: var(--white); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .kalk-eredmeny .kalk-cta:hover { background: var(--paper); color: var(--ink); } }
.kalk-eredmeny .kalk-gepek { justify-self: start; color: var(--white); font-weight: 600; text-decoration-thickness: 1.5px; }
@media (hover: hover) and (pointer: fine) { .kalk-eredmeny .kalk-gepek:hover { color: rgba(255, 255, 255, .85); } }
.kalk-lepesek { font-size: .9rem; color: rgba(255, 255, 255, .78); }
.kalk-lepesek summary { cursor: pointer; font-weight: 600; color: rgba(255, 255, 255, .92); }
.kalk-lepesek ol { display: grid; gap: .25rem; margin: .5rem 0 0; padding-left: 1.2rem; }
.kalk-lepesek ol.is-tobb { padding-left: 0; list-style: none; }
.kalk-lepesek li.kalk-lepes-fej { margin-top: .5rem; font-weight: 650; color: rgba(255, 255, 255, .92); }
.kalk-gep-lista { display: grid; gap: .45rem; margin: 0; padding-left: 1.25rem; line-height: 1.45; }
.kalk-gep-lista small { font-size: .9rem; color: rgba(255, 255, 255, .75); }
.kalk-apro { font-size: .85rem; color: rgba(255, 255, 255, .75); }

.kalk-modszer { padding-bottom: var(--space); }
.process + .kalk-modszer { padding-top: var(--space); }   /* szolgáltatásoldalon a szürke „Így zajlik” után */
.kalk-modszer h2 { margin-top: 2.5rem; font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.kalk-modszer h2:first-child { margin-top: 0; }
.kalk-modszer p { font-size: 1.05rem; line-height: 1.65; }
.faq h3 { margin: 1.6rem 0 .4rem; font-size: 1.15rem; font-stretch: 108%; font-weight: 650; line-height: 1.3; }
.faq p { margin: 0; line-height: 1.65; }

/* a tapadó eredménykártya nem lóghat ki a képernyőből (több helyiségnél, kinyitott „Így jött ki”-vel hosszú): belül görgethető */
@media (min-width: 901px) {
  .kalk-eredmeny { max-height: calc(100vh - 6.5rem); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 900px) {
  .kalk-grid { grid-template-columns: minmax(0, 1fr); }
  .kalk-eredmeny { position: static; }
}

/* ---------- Klímák (pages/gepek.php, pages/gep.php, inc/gepek.php) ----------
   Amíg nincs termékfotó, a beltéri egységet kódból rajzoljuk, a valódi színében, egy világos „falon”.
   Az egész kártya kattintható (a címben álló link kiterjed rá), az ár a kártya alján áll. */
.gepek { padding-block: clamp(2rem, 4vw, 3rem) var(--space); }
.gep-szint + .gep-szint { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.gep-szint h2,
.gep-meretek h2 { margin-bottom: .4rem; font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.gep-szint-leiras { margin-bottom: 1.25rem; color: var(--ink-soft); }

.gep-kartyak { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; }
.gep-kartya {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  transition: border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .gep-kartya:hover { border-color: var(--navy); } }
.gep-kartya-rajz { display: grid; place-items: center; padding: 2.25rem 1.5rem 1.5rem; background: linear-gradient(#F8FAFD, #ECF0F7); }
.gep-kartya-rajz .gep-rajz { width: min(100%, 17rem); }
.gep-kartya-test { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.1rem 1.25rem 1.25rem; }
.gep-nev { font-size: 1.35rem; font-stretch: 108%; font-weight: 650; line-height: 1.2; }
.gep-nev a { color: var(--ink); text-decoration: none; }
.gep-nev a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.gep-nev a:focus-visible { outline: none; }
.gep-nev a:focus-visible::after { outline: 3px solid var(--cool-2); outline-offset: -3px; }
.gep-marka { display: block; margin-bottom: .1rem; font-size: .92rem; font-stretch: 100%; font-weight: 600; color: var(--ink-soft); }
.gep-tenyek { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; font-size: .95rem; color: var(--ink-soft); }
.gep-ar { margin: auto 0 0; padding-top: .75rem; border-top: 1px solid var(--line); font-size: 1.2rem; font-stretch: 106%; font-weight: 650; }
.gep-ar small,
.gep-meret-ar small { font-size: .85rem; font-stretch: 100%; font-weight: 500; color: var(--ink-soft); }
.gep-ar.is-keres,
.gep-meret .gep-meret-ar.is-keres { font-size: 1rem; font-stretch: 100%; font-weight: 600; color: var(--ink-soft); }

.szin-pottyok { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .92rem; color: var(--ink-soft); }
.szin-potty { width: 1rem; height: 1rem; border: 1.5px solid var(--line-strong); border-radius: 50%; }
.szin-feher { background: #FFFFFF; }
.szin-fekete { border-color: #1F2228; background: #1F2228; }
.szin-sotetszurke { border-color: #4A4E56; background: #4A4E56; }
.szin-nevek { margin-left: .2rem; }

.gep-csomag { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.25rem, 3vw, 2rem); border-radius: 20px; background: var(--paper); }
.gep-csomag h2,
.gep-reszlet h2 { margin-bottom: 1rem; font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.gep-csomag .pipa-lista { margin-bottom: 1.1rem; }
.gep-csomag p { margin: 0; color: var(--ink-soft); }

/* Sorozatoldal: a gép nagyban, alatta a méretek kártyái és az adatok. */
.gep-hero-marka { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; font-size: 1.05rem; font-weight: 650; color: var(--ink-soft); }
.gep-kiemelt { grid-template-columns: minmax(0, 1fr); margin-top: 1.25rem; }
.gep-hero-rajz { padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem) 1.25rem; border-radius: 20px; background: linear-gradient(#FFFFFF, #E9EEF6); }
.gep-hero-rajz figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.gep-illusztracio { font-size: .85rem; color: var(--ink-soft); }
/* Színválasztó: a választott szín rajza látszik. :has() nélküli böngészőben az első szín marad. */
.gep-rajzok > .gep-rajz:not(:first-child) { display: none; }
.gep-hero-rajz:has(:checked) .gep-rajzok > .gep-rajz { display: none; }
.gep-hero-rajz:has([value="feher"]:checked) .rajz-feher,
.gep-hero-rajz:has([value="fekete"]:checked) .rajz-fekete,
.gep-hero-rajz:has([value="sotetszurke"]:checked) .rajz-sotetszurke { display: block; }
/* Gyári fotók (inc/gepek.php: gep_fotok(), gep_kepdoboz()): a doboz a fotó hátterének színét kapja (fehér, az Altherma képeinél világos
   bézs), így a fotó széle nem látszik; a kártyán és a szalagon egyforma magas sávban, torzítás nélkül */
:is(.gep-kartya-rajz, .szalag-gep-rajz, .gep-hero-rajz, .szr-galeria).is-foto[style] { background: var(--foto-hatter, #FFFFFF); }
.gep-foto { height: auto; max-width: 100%; }
:is(.gep-kartya-rajz, .szalag-gep-rajz) .gep-foto { aspect-ratio: 2.4; object-fit: contain; }
.hsz-kartya .gep-kartya-rajz .gep-foto { width: auto; height: 100%; aspect-ratio: auto; }
img.szr-repulo { object-fit: contain; }
.gep-hero-rajz .gep-foto { width: 100%; max-height: min(24rem, 56vh); object-fit: contain; object-position: center bottom; }
/* A sorozatoldal feje (pages/gep.php, pages/hoszivattyu.php; Boldi, 2026-10-26: „nem látom egyből az árat, ami a
   legfontosabb”): balra a név, alatta rögtön az ár a méretválasztóval és a gombokkal, utána a leírás; jobbra a kép.
   860 px alatt egy oszlopban: a név, a kép, az ár, a leírás. */
.gep-hero-racs { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "fej kep" "vasar kep" "tobb kep"; grid-template-rows: auto auto 1fr; align-items: start; row-gap: 1.5rem; }
.gep-hero-fej { grid-area: fej; }
.gep-hero-fej h1 { margin-bottom: 0; }
.gep-hero-racs > .gep-hero-rajz { grid-area: kep; }
.gep-hero-vasar { grid-area: vasar; display: grid; gap: .75rem; }
.gep-hero-tobb { grid-area: tobb; }
.gep-hero-linkek { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: 0; font-size: .95rem; }
@media (max-width: 860px) {
  .gep-hero-racs { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fej" "kep" "vasar" "tobb"; grid-template-rows: none; row-gap: 1.25rem; }
  /* a kép kisebb, hogy az ár és az ajánlatkérés is az első képernyőre férjen */
  .gep-hero-racs > .gep-hero-rajz { padding: 1rem 1rem .9rem; }
  .gep-hero-racs > .gep-hero-rajz figcaption { margin-top: .6rem; }
  .gep-hero-racs .gep-hero-rajz .gep-foto { max-height: min(13rem, 30vh); }
  .page-hero.gep-hero { padding-top: 1.5rem; }
}

/* Ár méretválasztóval (gep_ardoboz, hsz_ardoboz): a sorozatoldal fejében és a futószalag részletezőjében. Nagyban az ár – a
   legfontosabb –, kisebben a bontás és két adat, a gombok közvetlenül alatta, a döntés mellett. */
.ardoboz { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem .8rem; max-width: 31rem; padding: 1.1rem 1.25rem 1.25rem; border: 1.5px solid var(--line); border-radius: 16px; background: var(--white); }
.ardoboz-cimke { font-size: .95rem; font-weight: 650; color: var(--ink-soft); }
/* a „Méret” felirat a legördülő mellett áll (egy sort spórol), minden más a teljes szélességet kapja */
.ardoboz > :not(.ardoboz-cimke, .ardoboz-valaszto) { grid-column: 1 / -1; }
.ardoboz-valaszto { width: 100%; min-height: 3rem; padding: .55rem 2.75rem .55rem .9rem; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2150' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .85rem center / 1.15rem; color: var(--ink); font: inherit; font-size: 1.02rem; font-weight: 600; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ardoboz-valaszto:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ardoboz-valaszto:hover { border-color: var(--navy); } }
.ardoboz-meret { display: grid; gap: .2rem; margin-top: .3rem; }
.ardoboz-ar { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin: 0; }
.ardoboz-ar-cimke { font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.ardoboz-ar strong { font-size: clamp(1.75rem, 3.4vw, 2.2rem); font-stretch: 108%; font-weight: 700; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ardoboz-ar.is-keres { font-size: 1.35rem; font-stretch: 106%; font-weight: 650; color: var(--ink); }
.ardoboz-bontas, .ardoboz-tenyek { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.ardoboz-gombok { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.szr-adatok .ardoboz { max-width: none; margin: .5rem 0 .4rem; }
@media (max-width: 860px) { .gep-hero-vasar .ardoboz { max-width: none; } }
/* a részletező telefonos lapján a fotó kisebb, hogy az ár és a két gomb hamar látsszon (Boldi: „eltűnik a teljes adatlap gomb”) */
@media (max-width: 760px) {
  .szalag-reszlet .szr-galeria { padding-top: 2.75rem; }
  .szalag-reszlet .szr-galeria .kepsor-kep .gep-foto { max-height: min(12rem, 26vh); }
}

/* a kínálat rácsában is a futószalag üvegkártyái (gep_kartya → gep_szalag_kartya, hsz_kartya → hsz_szalag_kartya) */
.gep-kartyak > .szalag-elem { width: auto; }
.gep-segitseg { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.gep-segitseg h2 { margin-bottom: 1rem; }
/* a kínálattal összevont szolgáltatásoldal (pages/gepek.php, pages/hoszivattyuk.php; inc/szolg-reszek.php): a szerelés
   tudnivalóinak címe a kínálat után, és a fotók megjegyzése a gépek alatt */
.szolg-fo-cim { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.szolg-szoveg > h3 { margin: 2rem 0 .9rem; font-size: clamp(1.3rem, 2.2vw, 1.55rem); }
.ar-kartya h3 { margin: 0; font-size: 1.4rem; }
.gep-fotok-megjegyzes { margin-top: 1rem; font-size: .9rem; color: var(--ink-soft); }

/* ---------- Képsor (inc/gepek.php: gep_kepsor, site.js) ----------
   A képek egy oldalra görgethető sávban, képenként megállva (telefonon húzással – a böngésző saját görgetése), két kerek
   nyíllal; a fotóra kattintva a nagyító nyílik. Alatta a látható kép neve és a számláló. */
.kepsor { position: relative; display: flex; flex-direction: column; min-width: 0; }
/* Több színben fotózott gép (gep_szin_kepsorok): színenként egy képsor; alapból – és :has() nélkül – az első szín (fehér)
   látszik, a színválasztóban választva a többi (Boldi, 2026-10-21) */
.kepsor[data-szin].kepsor-masik-szin { display: none; }
:is(.gep-hero-rajz, .szr-galeria):has(.szin-valaszto :checked) .kepsor[data-szin] { display: none; }
:is(.gep-hero-rajz, .szr-galeria):has(.szin-valaszto [value="feher"]:checked) .kepsor[data-szin="feher"],
:is(.gep-hero-rajz, .szr-galeria):has(.szin-valaszto [value="fekete"]:checked) .kepsor[data-szin="fekete"],
:is(.gep-hero-rajz, .szr-galeria):has(.szin-valaszto [value="sotetszurke"]:checked) .kepsor[data-szin="sotetszurke"] { display: flex; }
.kepsor-ablak { position: relative; }
.kepsor-sav { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.kepsor-sav::-webkit-scrollbar { display: none; }
.kepsor-sav:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 3px; }
.kepsor-kep { flex: 0 0 100%; display: grid; place-items: center; min-width: 0; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.kepsor-nagyit { position: relative; display: block; width: 100%; cursor: zoom-in; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.kepsor-lupe { position: absolute; right: .5rem; bottom: .5rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px -2px rgba(20, 26, 64, .3); color: var(--ink); pointer-events: none; }
.kepsor-lupe .icon { width: 1.15rem; height: 1.15rem; }
.kepsor-nyil { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 6px 16px -10px rgba(20, 26, 64, .45); cursor: pointer; touch-action: manipulation; transition: opacity .2s ease, transform .12s cubic-bezier(.23, 1, .32, 1); }
.kepsor-nyil .icon { width: 1.25rem; height: 1.25rem; }
.kepsor-elozo { left: .35rem; }
.kepsor-elozo .icon { transform: scaleX(-1); }
.kepsor-kovetkezo { right: .35rem; }
.kepsor-nyil:disabled { opacity: 0; pointer-events: none; }
.kepsor-nyil:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .kepsor-nyil:hover { border-color: var(--navy); } }
.kepsor-nyil:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 2px; }
.kepsor-alatt { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: .6rem 0 0; font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.kepsor-szam { font-variant-numeric: tabular-nums; font-weight: 500; }
.kepsor-alatt.is-csak-szam { justify-content: center; }
.szin-valaszto { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; border: 0; }
.szin-gomb { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .45rem; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--white); font-size: .92rem; font-weight: 600; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .szin-gomb:hover { border-color: var(--navy); } }
.szin-gomb:has(input:checked) { border-color: var(--c, var(--navy)); box-shadow: inset 0 0 0 1px var(--c, var(--navy)); }
.szin-gomb:has(input:focus-visible) { outline: 3px solid var(--cool-2); outline-offset: 2px; }

.gep-meretek { padding-block: var(--space); }
.gep-meretek-tipp { max-width: 46rem; margin-bottom: 1.5rem; color: var(--ink-soft); }
.gep-meret-kartyak { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; }
.gep-meret { display: flex; flex-direction: column; gap: .9rem; padding: 1.35rem 1.4rem 1.4rem; border: 1.5px solid var(--line); border-radius: 16px; }
.gep-meret p { margin: 0; }
.gep-meret-kw { font-size: 2.4rem; font-stretch: 112%; font-weight: 650; line-height: 1; }
.gep-meret .gep-meret-terulet { margin-top: -.45rem; font-weight: 600; color: var(--c, var(--navy)); }
.gep-meret dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem 1rem; margin: 0; font-size: .95rem; }
.gep-meret dt { color: var(--ink-soft); }
.gep-meret dd { margin: 0; font-weight: 600; }
.gep-meret .gep-meret-kod { font-weight: 500; overflow-wrap: anywhere; }
.gep-meret-kod-szin { display: block; }
.gep-meret .gep-meret-ar { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line); font-size: 1.3rem; font-stretch: 106%; font-weight: 650; }
/* a gép ára alatt külön az alapszerelés (Boldi, 2026-10-24: „külön a gép és külön a szerelés ára”) */
.gep-meret .gep-meret-szereles { margin: -.3rem 0 0; font-size: 1rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* a kártyákon a „+ alapszerelés …” a gépár alatt, külön sorban */
.gep-ar small, .szalag-gep-ar small, .szr-ar small { display: block; margin-top: .1rem; }
/* a bontásban a „+ alapszerelés …” egyben marad: ha nem fér, előtte törik a sor */
.ar-szereles { white-space: nowrap; }
.gep-meret .btn { justify-content: center; }

/* Márkaoldal (pages/marka.php): a hős mellett a márka adatai, alatta a sorozatok. */
.gepek > .wrap > h2 { margin-bottom: 1.25rem; font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.marka-tenyek { padding: clamp(1.25rem, 3vw, 1.75rem); border: 1.5px solid var(--line); border-radius: 20px; background: var(--white); }
.marka-tenyek dl { display: grid; gap: .2rem; margin: 0; }
.marka-tenyek dt { font-size: .9rem; font-weight: 600; color: var(--ink-soft); }
.marka-tenyek dd { margin: 0 0 .8rem; line-height: 1.45; }
.marka-tenyek dd:last-child { margin-bottom: 0; }
/* „Ez válogatás” (gep_valogatas_html): csendes, szaggatott keretes megjegyzés a kínálat és a márkaoldal sorozatai alatt */
.gep-valogatas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; max-width: 52rem; margin: 2rem 0 0; padding: 1rem 1.2rem;
  border: 1.5px dashed var(--line-strong); border-radius: 12px; color: var(--ink-soft); line-height: 1.55; }
.gep-valogatas p { flex: 1 1 24rem; margin: 0; }
.gep-valogatas strong { color: var(--ink); }
.gep-valogatas .link-btn { font-weight: 650; white-space: nowrap; }
.marka-tobbi { margin: 1.5rem 0 0; color: var(--ink-soft); }
.marka-tobbi a { font-weight: 650; color: var(--ink); }
.gep-markak { margin: 1rem 0 0; color: var(--ink-soft); }
.gep-markak a { font-weight: 650; color: var(--ink); }

/* Ajánló a főoldalon és a hűtés-oldalon (gep_ajanlo). */
.gep-ajanlo { padding-block: var(--space); }
.gep-ajanlo.is-szurke { background: var(--paper); }
.chooser + .gep-ajanlo { padding-top: 0; }
.gep-ajanlo + .cat-photos { padding-top: var(--space); }
.gep-ajanlo-fej { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.gep-ajanlo-fej h2 { margin-bottom: .5rem; }
.gep-ajanlo-fej p { max-width: 40rem; margin: 0; color: var(--ink-soft); }

.gep-reszlet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.gep-reszlet .gep-csomag { margin-top: 0; }
.gep-forras { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.gep-osszes { margin: 1.5rem 0 0; font-weight: 650; }

/* ---------- Futószalag a főoldalon (inc/gepek.php: gep_futoszalag, assets/js/futoszalag.js) ----------
   A gépek egy futószalagon állnak, belépőtől prémiumig. JS-sel (ha a mozgás nincs csökkentve, és a kártyák kiférnek) a
   szalag a képernyőhöz tapad (.is-ragado), és a lefelé görgetés oldalra viszi: a heveder a sor része, a gépekkel együtt
   halad; a görgők és az állvány a keret részei, állnak, a görgők forognak. Enélkül a szalag oldalra húzható sor, és a
   görgők, az állvány is a sorral együtt mozdulnak. Rámutatáskor (csak egérrel) a gép kicsit felemelkedik. */
.szalag {
  --szalag-fent: 4.6rem;     /* a ragadós fejléc magassága (a JS méri) */
  --szalag-lent: 0px;        /* telefonon az alsó gombsor magassága (a JS méri) */
  --kartya: clamp(13.5rem, min(20vw, calc(var(--szalag-ablak, 100vh) * .36)), 19rem);
  --koz: clamp(1.1rem, 2.4vw, 2rem);
  --heveder: 1rem;
  --gorgo: 1.5rem;
  --labazat: 2.25rem;
  --sor-eleje: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  position: relative;
  padding: var(--space) 0 calc(var(--space) * .6);
  background: var(--white);
}
.szalag-fej { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.szalag-fej h2 { margin-bottom: .5rem; }
.szalag-fej p { max-width: 42rem; margin: 0; color: var(--ink-soft); }

/* A szintek sávja: ugrás a szalagon, és közben mutatja, hol tartunk (a JS tölti a --toltes-t). */
.szalag-szintek { display: flex; gap: .5rem; margin-bottom: clamp(.5rem, 2vh, 1.25rem); margin-bottom: clamp(.5rem, calc(var(--szalag-ablak, 100vh) * .02), 1.25rem); }
.szalag-szintek a { flex: 1 1 0; display: grid; gap: .4rem; font-size: .92rem; font-weight: 650; color: var(--ink-soft); text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.szalag-szintek a.is-aktiv { color: var(--ink); }
.szalag-szint-csik { display: block; height: 4px; overflow: hidden; border-radius: 999px; background: var(--line); }
.szalag-szint-csik span { display: block; height: 100%; border-radius: inherit; background: var(--c-pipe); transform: scaleX(var(--toltes, 0)); transform-origin: 0 50%; }

.szalag-terep { position: relative; }
/* nagy monitoron a szalag is a tartalom sávjában fut, nem a képernyő széléig (Boldi, 2026-10-22) */
@media (min-width: 1600px) {
  .szalag { --sor-eleje: 0px; }
  .szalag-terep { width: 100%; max-width: var(--wrap); margin-inline: auto; }
}
.szalag-hatter { display: none; }
/* Jelzés a szalag elején (Boldi, 2026-10-20: telefonon 2/2 ember oldalra próbálta lapozni a szalagot): a gépek bal
   oldalán, az üres helyen, a kártyák felső felénél; amint a szalag elindul, eltűnik (.is-elindult), visszagörgetve újra
   látszik. Csak a tapadó szalagon – oldalra húzható sorban (JS nélkül) nem kell. */
.szalag-jelzes { display: none; }
.szalag.is-ragado .szalag-jelzes {
  position: absolute;
  z-index: 1;
  left: var(--sor-eleje);
  bottom: calc(var(--labazat) + var(--gorgo) + var(--heveder) + var(--kartya-mag, 16rem) * .5);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  width: calc(46% - var(--sor-eleje) - 1.25rem);
  max-width: 17rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--navy);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.szalag.is-ragado.is-elindult .szalag-jelzes { opacity: 0; transform: translateX(-1rem); }
.szalag-jelzes svg { flex: none; width: 1.35rem; height: 1.35rem; margin-top: -.05rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes szalag-nyil { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: no-preference) {
  .szalag.is-lathato:not(.is-elindult) .szalag-jelzes svg { animation: szalag-nyil 1.4s ease-in-out infinite; }
}
.szalag-palya {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--sor-eleje);
  padding: 1rem 0 calc(var(--heveder) + var(--gorgo) + var(--labazat) + .25rem);
}
/* a kártyák egyforma magasak (a legmagasabbé – Boldi, 2026-10-23: „legyen az is ugyanakkora méretű”), a „Részletek” mindegyiken
   alul: egy soros rács, a sor a szalagon ül (align-content: end), a kártyák kitöltik a sor magasságát; a vége-kártya a saját
   magasságában ül a szalagon */
.szalag-sor { position: relative; display: grid; grid-auto-flow: column; align-content: end; align-items: stretch; gap: var(--koz); width: max-content; min-width: 100%; margin: 0; padding: 0 var(--sor-eleje); list-style: none; }
/* a heveder: felül a világosabb, bordázott futófelület, alatta az oldala */
.szalag-sor::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--heveder);
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 1.4rem) 0 0 / 100% 38% no-repeat,
    linear-gradient(#3B4683, #2C3569 38%, #1A2150 38%, #0F1438);
  box-shadow: 0 .8rem 1rem -.75rem rgba(26, 33, 80, .6);
}
/* görgők és állvány az oldalra húzható sorban (a tapadó szalagnál a keret rajzolja őket, ott a görgők forognak) */
.szalag-sor::before,
.szalag-terep::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) 0 0 / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(22rem - 8px), #D3D9E5 calc(22rem - 8px) 22rem) 0 3px / 100% 100% no-repeat;
}
.szalag-sor::before {
  top: calc(100% + var(--heveder));
  height: calc(var(--gorgo) + var(--labazat));
  background:
    radial-gradient(circle closest-side, #5B6683 0 24%, #CBD2DF 29% 86%, transparent 92%) 1.5rem 0 / 5.5rem var(--gorgo) repeat-x,
    linear-gradient(var(--line-strong), var(--line-strong)) 0 var(--gorgo) / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(22rem - 8px), #D3D9E5 calc(22rem - 8px) 22rem) 0 calc(var(--gorgo) + 3px) / 100% 100% no-repeat;
}
.szalag-terep::after { display: none; bottom: 0; height: var(--labazat); }
.szalag-gorgok { display: none; }
/* Lapozó nyilak a tapadás nélküli, oldalra húzható sorhoz (csökkentett mozgásnál, alacsony ablakban): egérgörgővel a sor nem
   halad oldalra, a nyíllal igen (2026-10-25). A JS mutatja meg őket (futoszalag.js: lapozoAllas); a sor két szélén, a
   kártyák képének magasságában (ott nem takar szöveget). */
.szalag-lapoz {
  position: absolute;
  z-index: 2;
  top: calc(var(--kartya) / 4.8 + 1.85rem);
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 .6rem 1.1rem -.6rem rgba(26, 33, 80, .55);
  translate: 0 -50%;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.szalag-lapoz[hidden], .szalag.is-ragado .szalag-lapoz { display: none; }
.szalag-lapoz .icon { width: 1.3rem; height: 1.3rem; }
.szalag-lapoz-elozo { left: max(.4rem, calc(var(--sor-eleje) - 1.45rem)); }
.szalag-lapoz-elozo .icon { rotate: 180deg; }
.szalag-lapoz-kov { right: max(.4rem, calc(var(--sor-eleje) - 1.45rem)); }
.szalag-lapoz:active { scale: .94; }
.szalag-lapoz:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .szalag-lapoz:hover { border-color: var(--navy); color: var(--navy); } }

/* Egy gép a szalagon. A link (a név) az egész kártyát lefedi; a --dolles a billenés (a JS adja, tapadó szalagon). */
.szalag-elem { flex: none; display: flex; flex-direction: column; width: var(--kartya); scroll-snap-align: start; }
.szalag-elem > .szalag-gep { flex: 1 0 auto; }
.szalag-gep {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 .9rem 1rem -.85rem rgba(26, 33, 80, .6);
  rotate: var(--dolles, 0deg);
  transform-origin: 50% 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.szalag-gep:active { scale: .98; }
.szalag-gep-rajz { position: relative; display: grid; place-items: center; padding: 1.6rem 1.1rem 1rem; border-radius: 14.5px 14.5px 0 0; background: linear-gradient(#F8FAFD, #ECF0F7); }
.szalag-gep-rajz .gep-rajz { width: 100%; }
.szalag-gep-test { flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: .85rem 1.1rem 1rem; }
.szalag-gep-nev { font-size: 1.22rem; font-stretch: 108%; font-weight: 650; line-height: 1.2; }
.szalag-gep-nev a { color: var(--ink); text-decoration: none; }
.szalag-gep-nev a::after { content: ""; position: absolute; inset: -1.5px; border-radius: 16px; }
.szalag-gep-nev a:focus-visible { outline: none; }
.szalag-gep-nev a:focus-visible::after { outline: 3px solid var(--cool-2); outline-offset: 2px; }
.szalag-gep .gep-tenyek { font-size: .9rem; line-height: 1.45; }
.szalag-gep-ar { margin: .1rem 0 0; font-weight: 650; }
.szalag-gep-ar small { font-weight: 500; color: var(--ink-soft); }
.szalag-gep-tovabb { display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; font-size: .92rem; font-weight: 650; color: var(--c); }
.szalag-gep-tovabb .icon { width: 1.45rem; height: 1.45rem; padding: .2rem; border-radius: 50%; background: var(--c-tint); stroke-width: 2.2; }
@media (prefers-reduced-motion: no-preference) {
  .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; }
}
@media (hover: hover) and (pointer: fine) {
  .szalag-gep:hover { translate: 0 -.55rem; border-color: var(--navy); box-shadow: 0 2.2rem 2rem -1.7rem rgba(26, 33, 80, .5); }
  .szalag-gep:hover .szalag-gep-tovabb .icon { background: var(--c); color: var(--white); }
  .szalag-szintek a:hover { color: var(--ink); }
}
/* a leemelt gép helye: amíg a részletező nyitva van, szaggatott körvonal marad a szalagon */
.szalag-elem.is-leemelve .szalag-gep { border-style: dashed; border-color: var(--line-strong); box-shadow: none; translate: none; }
.szalag-elem.is-leemelve .szalag-gep-rajz .gep-rajz { visibility: hidden; }
.szalag-elem.is-leemelve .szalag-gep-rajz::after { content: ""; position: absolute; inset: 1rem; border: 2px dashed var(--line-strong); border-radius: 12px; }

/* A sor vége: merre tovább (kalkulátor, teljes kínálat). */
.szalag-vege { flex: none; align-self: end; width: calc(var(--kartya) * 1.2); scroll-snap-align: start; }
.szalag-vege-kartya { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; padding: 1.35rem 1.35rem 1.25rem; border: 1.5px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 .9rem 1rem -.85rem rgba(26, 33, 80, .45); }
.szalag-vege-kartya h3 { font-size: 1.3rem; font-stretch: 108%; font-weight: 650; line-height: 1.2; }
.szalag-vege-kartya p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
/* a végkártya két fele (gep_szalag: „Melyik illik…” és „Mást keres?”) egymás mellett, egyforma magasan */
/* a végkártya egy csempe, benne két rész egymás alatt, szaggatott vonallal elválasztva (Boldi, 2026-10-25) */
.szalag-vege:has(.szalag-vege-egyben) { width: calc(var(--kartya) * 1.3); }
.szalag-vege-egyben { gap: 0; padding: 0; }
.szalag-vege-resz { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; width: 100%; padding: 1.05rem 1.15rem; }
.szalag-vege-resz + .szalag-vege-resz { border-top: 1.5px dashed var(--line-strong); }
.szalag-vege-egyben h3 { font-size: 1.15rem; }
.szalag-vege-egyben p { font-size: .9rem; line-height: 1.45; }
.szalag-vege-kartya .eszkozgombok { width: 100%; margin: 0; }
.szalag-vege-kartya .eszkozgomb { width: 100%; }

/* A tapadó szalag: a keret a fejléc és (telefonon) az alsó gombsor közé tapad; a sor a JS-től kapja az eltolást. */
.szalag.is-ragado { padding-bottom: 0; }
.szalag.is-ragado .szalag-keret {
  position: sticky;
  top: calc(var(--szalag-fent) + var(--szalag-kozep, 0px));
  display: flex;
  flex-direction: column;
  /* az ablak magassága a JS-től (--szalag-ablak): érintőképernyőn rögzített, hogy a beépített böngészők (Messenger…)
     megjelenő-eltűnő sávjai ne méretezzék át a szalagot – különben minden, ami alatta van, megugrik. Nagy monitoron
     legfeljebb 46rem magas, és a JS függőlegesen középre teszi (--szalag-kozep) – Boldi, 2026-10-22: „kisebbre kéne venni
     az egészet, mert olyan nagy” */
  height: calc(100vh - var(--szalag-fent) - var(--szalag-lent));
  height: min(calc(var(--szalag-ablak, 100svh) - var(--szalag-fent) - var(--szalag-lent)), 46rem);
  padding: clamp(.75rem, 3vh, 2rem) 0 clamp(.5rem, 2vh, 1.25rem);
  padding: clamp(.75rem, calc(var(--szalag-ablak, 100vh) * .03), 2rem) 0 clamp(.5rem, calc(var(--szalag-ablak, 100vh) * .02), 1.25rem);
}
.szalag.is-ragado .szalag-terep { flex: 1 1 auto; min-height: 0; overflow: hidden; overflow: clip; }
.szalag.is-ragado .szalag-palya { position: absolute; inset: 0; overflow: hidden; overflow: clip; padding: 0; scroll-snap-type: none; }
.szalag.is-ragado .szalag-sor { position: absolute; left: 0; top: .75rem; bottom: calc(var(--labazat) + var(--gorgo) + var(--heveder)); padding-left: 46%; will-change: transform; }
.szalag.is-ragado .szalag-sor::before { display: none; }
.szalag.is-ragado .szalag-sor::after { left: -50vw; right: -50vw; }   /* a heveder vége ne látsszon a keret szélén */
.szalag.is-ragado .szalag-gep { will-change: transform; }              /* a billenés így nem rajzolja újra a kártyát */
.szalag.is-ragado .szalag-terep::after { display: block; }
/* magas, széles képernyőn a szalag hosszabb lábakon áll, alul padlóvonallal: így nem marad üres sáv a gépek fölött */
@media (min-width: 761px) and (min-height: 700px) {
  .szalag.is-ragado { --labazat: clamp(2.25rem, calc(var(--szalag-ablak, 100vh) * .11), 6.5rem); }
  .szalag.is-ragado .szalag-terep::after {
    background:
      linear-gradient(var(--line-strong), var(--line-strong)) 0 0 / 100% 3px no-repeat,
      linear-gradient(var(--line), var(--line)) 0 100% / 100% 2px no-repeat,
      repeating-linear-gradient(90deg, transparent 0 calc(22rem - 8px), #D3D9E5 calc(22rem - 8px) 22rem) 0 3px / 100% 100% no-repeat;
  }
}
.szalag.is-ragado .szalag-gorgok { position: absolute; left: 0; right: 0; bottom: var(--labazat); display: flex; gap: calc(5.5rem - var(--gorgo)); padding-left: calc(1.5rem + (5.5rem - var(--gorgo)) / 2); overflow: hidden; }
.szalag-gorgok span { position: relative; flex: none; width: var(--gorgo); height: var(--gorgo); border-radius: 50%; background: linear-gradient(160deg, #F2F5FA, #AEB8CA 62%, #8C97AD); box-shadow: inset 0 0 0 1px rgba(26, 33, 80, .22); }
.szalag-gorgok span::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; background: linear-gradient(90deg, transparent 44%, rgba(26, 33, 80, .38) 44% 56%, transparent 56%); rotate: var(--forgas, 0deg); }
.szalag-gorgok span::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: #5B6683; }
/* hátul az épp látott szint neve körvonalas óriásbetűvel, alatta a szint egy mondata; a gépek fölötti szabad helyen,
   takarás nélkül, középen (Boldi, 2026-10-22: a kártyák ne takarják, és legyen észrevehetőbb) – a betűméretet és a helyet a
   JS adja (--szo-meret, --szo-fent: a szó kitölti a szabad helyet); lassabban halad, mint a szalag */
.szalag.is-ragado .szalag-hatter { display: block; position: absolute; inset: 0; pointer-events: none; }
.szalag-hatter > span {
  position: absolute;
  top: var(--szo-fent, 0px);
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  max-width: var(--szo-szel, 100%);   /* a tartalom szélessége (a JS adja): a mondat ezen belül tördelődik */
  opacity: 0;
  transition: opacity .6s ease;
}
.szalag-hatter > span.is-aktiv { opacity: 1; }
.szalag-szo-nev {
  font-size: var(--szo-meret, clamp(4.5rem, 14vw, 12rem));
  font-stretch: 125%;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: rgba(26, 33, 80, .04);
  -webkit-text-stroke: max(2px, .012em) #A9B4C6;   /* a nagy szón vastagabb, hogy ott is látsszon */
}
.szalag-szo-leiras { max-width: 30rem; padding-left: .15em; font-size: clamp(.95rem, 1.1vw, 1.15rem); font-weight: 600; line-height: 1.35; color: var(--ink-soft); }
/* alacsony, széles helyen a mondat a szó mellé kerül (a JS választja: így nagyobb lehet a szó) */
.szalag-hatter.is-sorban > span { flex-direction: row; align-items: flex-end; gap: 1.5rem; }
.szalag-hatter.is-sorban .szalag-szo-leiras { flex: none; width: 19rem; padding: 0 0 .25em; }
.szalag-hatter.is-csak-szo .szalag-szo-leiras { display: none; }   /* kicsi, alacsony telefonon nem fér el */
.szalag-hatter.is-nincs-szo .szalag-szo-nev { visibility: hidden; }   /* még alacsonyabb helyen a szó sem (a fülsávon ott a szint neve) */
/* alacsony képernyőn (a legtöbb telefonon) fokozatosan tömörebb kártya, hogy a szalag fölé férjen – a teljes adat a
   részletezőben van. A fokot a JS választja (futoszalag.js: tomorit): a legkisebbet, amelynél a legmagasabb kártya is kifér.
   (2026-10-25-ig a hely magassága döntött – @container –, és maradt olyan sáv, ahol egyik fok sem fért ki: ott a szalag nem
   tapadt, és a fel-le görgetéstől nem haladt.) */
.szalag.is-tomor-1 .szalag-gep-rajz { padding: 1rem .9rem .55rem; }
.szalag.is-tomor-1 .szalag-gep-test { gap: .3rem; padding: .65rem .9rem .75rem; }
.szalag.is-tomor-1 .szalag-gep .gep-tenyek li:nth-child(3) { display: none; }
.szalag.is-tomor-1 .szalag-vege-kartya { gap: .6rem; padding: 1rem; }
.szalag.is-tomor-1 .szalag-vege-egyben { gap: 0; padding: 0; }
.szalag.is-tomor-1 .szalag-vege-resz { gap: .45rem; padding: .8rem .95rem; }
.szalag.is-tomor-2 .szalag-gep .gep-tenyek li:nth-child(2),
.szalag.is-tomor-2 .szalag-gep-tovabb,
.szalag.is-tomor-2 .szalag-gep-ar small,   /* a „+ alapszerelés” sor: a részletezőben és a gépoldalon ott van */
.szalag.is-tomor-2 .szalag-vege-kartya p { display: none; }
/* a gép ára is férjen ki (2026-10-24): szűkebb képmargó, szorosabb ársor */
.szalag.is-tomor-2 .szalag-gep-rajz { padding: .7rem .8rem .4rem; }
.szalag.is-tomor-2 .szalag-gep-ar { line-height: 1.25; }
.szalag.is-tomor-3 .szalag-gep .tag { display: none; }
/* a legalacsonyabb ablakban (pl. 360 × 520): kisebb kép a kártyán */
.szalag.is-tomor-4 .szalag-gep-rajz { padding: .45rem .8rem .3rem; }
.szalag.is-tomor-4 .szalag-gep-rajz .gep-rajz { height: 3.6rem; }
.szalag.is-tomor-4 .szalag-gep .gep-tenyek { display: none; }   /* a legalacsonyabb ablakban csak a név és az ár (2026-10-25: a felszerelt ár egy sorral magasabb) */
/* a mérés idejére (futoszalag.js) a kártyák a saját magasságukat mutatják, nem nyúlnak a sor magasságára */
.szalag-sor.is-meres { align-items: start; }
/* a végcsempe ne legyen magasabb a gépeknél (különben azok is megnyúlnának vele): előbb az első, aztán a második részének
   szövege marad el – a gomb és a link mindig marad (a JS dönti el, futoszalag.js: tomorit) */
.szalag-vege.is-rovid-1 .szalag-vege-resz:first-child p,
.szalag-vege.is-rovid-2 .szalag-vege-resz p,
.szalag-vege.is-rovid-3 .eszkozgomb-szoveg span { display: none; }
/* a legrövidebb végcsempe: kisebb cím, kisebb gombok, szorosabb részek */
.szalag-vege.is-rovid-3 .szalag-vege-resz { gap: .4rem; padding: .65rem .85rem; }
.szalag-vege.is-rovid-3 h3 { font-size: 1.02rem; }
.szalag-vege.is-rovid-3 .eszkozgomb { min-height: 0; gap: .55rem; padding: .3rem .8rem .35rem .3rem; }
.szalag-vege.is-rovid-3 .eszkozgomb-ikon { width: 2.2rem; height: 2.2rem; }
.szalag-vege.is-rovid-3 .eszkozgomb-ikon svg { width: 1.5rem; height: 1.5rem; }
.szalag-vege.is-rovid-3 .btn { min-height: 2.75rem; padding-block: .5rem; }

/* ---------- A részletező: a leemelt gép nagyban, a képekkel és az adatokkal (natív <dialog>, a JS nyitja) ---------- */
.szalag-reszlet {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--ink);
  overscroll-behavior: contain;
}
.szalag-reszlet[open] { display: grid; place-items: center; }
.szalag-reszlet::backdrop { background: transparent; }
.szr-fuggony { position: fixed; inset: 0; background: rgba(14, 18, 44, .58); }
.szr-panel {
  position: relative;
  width: min(100% - 2rem, 64rem);
  overflow: hidden;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 40px 90px -40px rgba(10, 14, 40, .75);
}
/* a sor magassága a képernyőhöz igazodik (max-height + 1fr): a hosszú adatoszlop magában görget, a képek állnak */
.szr-tartalom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); }
.szr-galeria { display: flex; flex-direction: column; gap: 1rem; min-height: 0; padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2.25rem) 1.25rem; background: linear-gradient(#FFFFFF, #E9EEF6); }
/* a képsor a galéria közepén; a képek legfeljebb 26rem szélesek, a fotó a képernyőhöz igazodó magasságú */
.szr-galeria .kepsor { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.szr-galeria .kepsor-kep > .gep-rajz, .szr-galeria .kepsor-nagyit { width: min(100%, 26rem); }
.szr-galeria .kepsor-kep .gep-foto { width: 100%; max-height: min(20rem, 42vh); object-fit: contain; }
.szr-meretek { display: flex; align-items: flex-start; gap: 1rem; width: 100%; }
.szr-meret { flex: 1 1 0; display: grid; gap: .45rem; min-width: 0; }
.szr-meret .gep-rajz { width: 100%; }
.szr-meret p { margin: 0; font-size: .82rem; line-height: 1.35; color: var(--ink-soft); }
/* méretvonal: |—— 804 mm ——| a beltéri test szélességében (a rajzon a test a szélesség 2,5–97,5%-a) */
.szr-meret-szel { display: flex; align-items: center; gap: .35rem; margin: -.15rem 2.5% .2rem; font-size: .78rem; font-weight: 650; white-space: nowrap; color: var(--ink-soft); }
.szr-meret-szel::before,
.szr-meret-szel::after { content: ""; flex: 1; min-width: .5rem; height: .6rem; background: linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 1.5px no-repeat; }
.szr-meret-szel::before { border-left: 1.5px solid var(--line-strong); }
.szr-meret-szel::after { border-right: 1.5px solid var(--line-strong); }
.szr-meret strong { display: block; font-size: .9rem; color: var(--ink); }
.szr-meret p span { display: block; font-size: .78rem; white-space: nowrap; }
.szr-megjegyzes { margin: 0; font-size: .85rem; color: var(--ink-soft); }

.szr-adatok { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2rem); }
.szr-fej { display: flex; align-items: center; gap: .6rem; margin: 0 3rem .35rem 0; }
.szr-fej .gep-marka { margin: 0; font-size: 1rem; }
.szr-cim { margin-bottom: .6rem; font-size: clamp(1.7rem, 3vw, 2.2rem); font-stretch: 112%; font-weight: 650; }
.szr-leiras { color: var(--ink-soft); }
.szr-kiemelt { grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-bottom: 1.5rem; }
.szr-kiemelt li { font-size: 1rem; }
.szr-alcim { margin: 0 0 .6rem; font-size: 1.1rem; font-weight: 650; }
.szr-meretlista { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.szr-meretlista li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .1rem .9rem; padding: .7rem .9rem; border: 1.5px solid var(--line); border-radius: 12px; font-size: .92rem; color: var(--ink-soft); }
.szr-meretlista strong { grid-row: span 3; font-size: 1.15rem; font-stretch: 108%; color: var(--ink); }
.szr-ar { font-weight: 650; color: var(--ink); }
.szr-ar small { font-weight: 500; color: var(--ink-soft); }
.szr-ar.is-keres { font-weight: 600; color: var(--ink-soft); }
.szr-tipp { margin: .6rem 0 1.25rem; font-size: .85rem; color: var(--ink-soft); }
.szr-alapszereles { margin: .6rem 0 0; padding: .55rem .75rem; border-left: 3px solid var(--line-strong); font-size: .85rem; line-height: 1.45; color: var(--ink-soft); }
.szr-alapszereles strong { color: var(--ink); }
.szr-tenyek { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0 0 1.5rem; font-size: .92rem; }
.szr-tenyek dt { color: var(--ink-soft); }
.szr-tenyek dd { margin: 0; font-weight: 600; }
.szr-gombok { display: flex; flex-wrap: wrap; gap: .6rem; }
.szr-adatok .eszkozgombok { margin-top: 1rem; }

.szr-bezar {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  box-shadow: 0 4px 14px -6px rgba(26, 33, 80, .45);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.szr-bezar .icon { width: 1.3rem; height: 1.3rem; }
.szr-bezar:active { scale: .94; }
@media (hover: hover) and (pointer: fine) { .szr-bezar:hover { background: var(--white); color: var(--navy); } }
/* a szalagról a részletezőbe (és vissza) repülő gép */
.szr-repulo { position: fixed; z-index: 2; margin: 0; transform-origin: 0 0; pointer-events: none; }

/* telefonon alulról felcsúszó lap: fent a képek, alatta az adatok, együtt görgethető */
@media (max-width: 760px) {
  .szalag-reszlet[open] { place-items: end stretch; }
  .szr-panel { width: 100%; border-radius: 22px 22px 0 0; }
  .szr-tartalom { display: block; max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); overflow-y: auto; overscroll-behavior: contain; }
  .szr-galeria { padding: 3.25rem 1.25rem 1rem; }
  .szr-adatok { overflow: visible; padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  .szr-fej { margin-right: 0; }
  /* fogó a lap tetején: lefelé húzva a lap bezárul (futoszalag.js) */
  .szr-panel::before { content: ""; position: absolute; top: .55rem; left: 50%; z-index: 3; width: 2.5rem; height: 4px; margin-left: -1.25rem; border-radius: 2px; background: rgba(26, 33, 80, .24); pointer-events: none; }
}

@media (max-width: 860px) {
  .gep-reszlet { grid-template-columns: minmax(0, 1fr); }
}

/* Hőszivattyúk (pages/hoszivattyuk.php, pages/hoszivattyu.php): ugyanazok a kártyák, a kültéri egység rajzával. */
.hsz-kartya .gep-kartya-rajz { height: 12.5rem; }   /* egyforma magas rajz: a feliratok egy vonalba esnek */
.hsz-kartya .hsz-rajz { width: auto; max-width: 100%; height: 100%; }
.hsz-hero-rajz .hsz-rajz { display: block; width: min(100%, 22rem); margin-inline: auto; }
/* A Quiet Mark-tanúsítvány a sorozatoldal kiemelt pontjai között (pages/hoszivattyu.php, a sorozat 'quiet_mark' mezője): a
   logó a pipa helyén, mellette két sor. */
.gep-kiemelt .hsz-jelveny { align-items: center; gap: .8rem; margin-top: .3rem; font-size: .9rem; line-height: 1.4; color: var(--ink-soft); }
.szr-kiemelt .hsz-jelveny { align-items: center; gap: .7rem; font-size: .88rem; line-height: 1.4; color: var(--ink-soft); }   /* a hőszivattyú-részletezőben (hsz_szalag_reszlet) */
.szr-kiemelt .hsz-jelveny img { width: 3rem; height: 3rem; }
.szr-kiemelt .hsz-jelveny strong { font-size: .98rem; }
.hsz-jelveny img { flex: none; width: 3.5rem; height: 3.5rem; }
.hsz-jelveny strong { display: block; font-size: 1.05rem; font-weight: 650; color: var(--ink); }
.hsz-meretek .gep-meret-kartyak { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }   /* több adat: szélesebb kártya */
/* A két vízhőfok (padlófűtés 35 °C, radiátor 55 °C) gyártói adatai egymás mellett. */
.hsz-tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hsz-tabla th, .hsz-tabla td { padding: .35rem .4rem; border-bottom: 1px solid var(--line); text-align: left; }
.hsz-tabla thead th { font-size: .85rem; font-weight: 650; line-height: 1.25; color: var(--ink); vertical-align: bottom; }
.hsz-tabla thead small { display: block; font-weight: 500; color: var(--ink-soft); }
.hsz-tabla tbody th { font-weight: 500; color: var(--ink-soft); }
.hsz-tabla td { font-weight: 650; }
.hsz-tabla tr > :first-child { padding-left: 0; }

/* ---------- Felpróbáló (pages/felprobalo.php, assets/js/felprobalo.js) ----------
   A színpad felveszi a fotó arányát, ezért a gép helye és mérete a kép %-ában marad pontos bármekkora
   képernyőn. A gép árnyéka a falra vetül (drop-shadow), a mérővonal narancs, mint a logó hő-gyökere. */
.fp { padding-block: clamp(2rem, 4vw, 3rem) var(--space); }
.fp-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: clamp(1.5rem, 4vw, 3rem); }
.fp-szinpad {
  position: relative;
  min-height: 22rem;
  overflow: hidden;
  border: 1.5px dashed var(--line-strong);
  border-radius: 18px;
  background: linear-gradient(#FFFFFF, #EEF2F8);
  user-select: none;
  -webkit-user-select: none;
}
.fp-szinpad.van-kep { width: min(100%, calc(72vh * var(--ar))); min-height: 0; margin-inline: auto; aspect-ratio: var(--ar); border: 0; background: #DCE2EC; }
.fp-foto { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.fp-ures { display: grid; justify-items: center; gap: .6rem; padding: clamp(2rem, 6vw, 3.5rem) 1.5rem; text-align: center; }
.fp-ures p { max-width: 30rem; margin: 0; color: var(--ink-soft); }
.fp-ures .fp-ures-cim { font-size: clamp(1.35rem, 2.4vw, 1.6rem); font-stretch: 108%; font-weight: 650; color: var(--ink); }
.fp-ures-rajz { width: min(70%, 16rem); margin-bottom: 1rem; }
.fp-ures-gombok { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .75rem; }
.fp-fajl-gomb { position: relative; }
.fp-gep { position: absolute; z-index: 2; cursor: grab; touch-action: none; filter: drop-shadow(0 .5vw .7vw rgba(10, 16, 40, .3)); }
.fp-gep.is-huz { cursor: grabbing; }
.fp-gep svg { display: block; width: 100%; height: auto; pointer-events: none; }
.fp-gep img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.fp-gep:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 4px; border-radius: 6px; }
.fp-mero { position: absolute; inset: 0; z-index: 3; }
.fp-mero-vonal { position: absolute; height: 3px; margin-top: -1.5px; background: var(--warm-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); transform-origin: 0 50%; pointer-events: none; }
.fp-pont {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  padding: 0;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--warm-2);
  box-shadow: 0 2px 6px rgba(10, 16, 40, .4);
  cursor: grab;
  touch-action: none;
}
.fp-pont:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 2px; }
.fp-sugo, .fp-hiba { margin: .75rem 0 0; font-size: .93rem; color: var(--ink-soft); }
.fp-hiba { font-weight: 600; color: var(--warm); }

.fp-panel { display: grid; gap: 1.5rem; padding: clamp(1.25rem, 3vw, 1.75rem); border: 1.5px solid var(--line); border-radius: 20px; background: var(--white); }
.fp-csoport { display: grid; gap: .9rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.fp-csoport legend { margin-bottom: .2rem; padding: 0; font-size: 1.15rem; font-stretch: 106%; font-weight: 650; }
.fp-csoport[disabled] { opacity: .5; }
.fp-csoport[disabled] .btn:disabled { opacity: 1; }   /* a halványítást már a csoport adja */
.fp .field select,
.fp .field input[type="text"] { border-color: var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .fp .field select:hover, .fp .field input[type="text"]:hover { border-color: var(--navy); } }
.fp input[type="range"] { width: 100%; margin: .2rem 0; accent-color: var(--c, var(--navy)); }
.fp-valodi { margin: 0; padding: .6rem .8rem; border-radius: 10px; background: var(--c-tint, var(--paper)); font-size: .95rem; font-weight: 600; color: var(--c, var(--navy)); }
.fp-meres-gomb { justify-self: start; }
.fp-meres { display: grid; gap: .8rem; padding: 1rem; border-left: 3px solid var(--warm-2); border-radius: 0 12px 12px 0; background: #FFF6EE; }
.fp-meres p { margin: 0; font-size: .95rem; line-height: 1.5; }
.fp-meres-gombok { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.fp-gombok { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
.fp-masik { position: relative; font-weight: 600; cursor: pointer; }
.fp-adatvedelem { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.fp-tippek { grid-template-columns: minmax(0, 1fr); margin-bottom: 1.25rem; }

@media (max-width: 900px) {
  .fp-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Tervrajz-rajzoló (pages/tervrajz.php, assets/js/tervrajz.js) ----------
   Balra a rajzlap (milliméterpapír a hűtés kékjében) az eszközsorral – asztalon ragadós, hogy a jobb oldali adatok
   görgetése közben is látsszon –, jobbra a helyiségek és a klímák adatai, alattuk sötét kártyán az összesítés.
   A rajz színeit a JS ezekből a változókból veszi: fal --ink, cső --warm-2 (a rézcső narancsa), kiemelés --cool. */
.tr-hero { padding-block: clamp(2rem, 4.5vw, 3.25rem) clamp(1.75rem, 3.5vw, 2.75rem); }
.tr { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem); }
.tr-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; gap: clamp(1.25rem, 3vw, 2.5rem); }
.tr-bal { position: sticky; top: 5.5rem; display: grid; gap: .6rem; min-width: 0; }
/* Egyszerű tervezésben a jobb oldali panel rövid: a rajzlap ott nem tapad, különben az első helyiség után – amikor a panel
   megnő – lejjebb ugrana a rajz alatt (2026-10-23) */
html:not(.tr-reszletes) .tr-bal { position: static; }
.tr-eszkozok { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.tr-modok { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .35rem; flex: 1 1 100%; }
/* egyszerű és részletes tervezés (tervrajz.js: html.tr-reszletes; Boldi, 2026-10-23: „ne legyen ennyi szöveg és változó”):
   alapból a részletes eszközök és mezők rejtve (a helyükön egy-egy rövid sor), egyszerűben öt eszköz egy sorban */
html:not(.tr-reszletes) .tr-csak-reszletes { display: none !important; }
html.tr-reszletes .tr-csak-egyszeru { display: none !important; }
html:not(.tr-reszletes) .tr-modok { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tr-reszletes-kapcs { justify-self: start; font-size: .95rem; }
/* „Három lépés” a rajzlap fölött (tervrajz.js lepesekFrissit; Boldi, 2026-10-26: egy kipróbálónak elsőre bonyolult volt):
   helyiség → beltéri → kültéri; a soron következő kiemelve (és az eszközsávban az eszköze is), a kész pipát kap */
.tr-harom-sav { position: relative; display: grid; gap: .3rem; padding: .45rem 2.75rem .55rem .55rem; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--white); }
.tr-harom { display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.tr-harom li { display: flex; flex: 0 1 auto; align-items: center; gap: .25rem; min-width: 0; }
.tr-harom li + li::before { content: ""; flex: none; width: .8rem; height: 1.5px; background: var(--line-strong); }
.tr-harom button { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; min-height: 2.6rem; padding: .2rem .7rem .2rem .25rem; border: 1.5px solid transparent; border-radius: 999px; background: none; color: var(--ink-soft); font: inherit; font-size: .92rem; font-weight: 650; line-height: 1.15; cursor: pointer; }
.tr-harom-szam { display: inline-grid; flex: none; place-items: center; width: 1.65rem; height: 1.65rem; border: 1.5px solid currentColor; border-radius: 50%; font-size: .8rem; font-weight: 700; }
.tr-harom-nev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-harom button.is-most { border-color: var(--navy); background: #EEF1FB; color: var(--ink); }
.tr-harom button.is-most .tr-harom-szam { border-color: var(--navy); background: var(--navy); color: var(--white); }
.tr-harom button.is-kesz { color: var(--ink); }
.tr-harom button.is-kesz .tr-harom-szam { border-color: var(--navy); background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4 9-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; color: transparent; }
@media (hover: hover) and (pointer: fine) { .tr-harom button:hover { border-color: var(--line-strong); } .tr-harom button.is-most:hover { border-color: var(--navy); } }
.tr-harom button:focus-visible, .tr-harom-bezar:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 2px; }
.tr-harom-sugo { margin: 0 0 0 .3rem; font-size: .88rem; line-height: 1.4; color: var(--ink-soft); }
.tr-harom-sav.is-kesz .tr-harom-sugo { color: var(--ink); font-weight: 600; }
.tr-harom-tovabb { justify-self: start; margin-left: .3rem; padding: .4rem .9rem; font-size: .9rem; }
.tr-harom-bezar { position: absolute; top: .35rem; right: .35rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .tr-harom-bezar:hover { color: var(--ink); background: var(--paper); } }
/* az eszközsávban a soron következő lépés eszköze */
.tr-eszkoz.is-kovetkezo { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(38, 59, 170, .22); }
/* teljes képernyős rajzolásnál a hely a rajzé */
.tr-bal.is-teljes .tr-harom-sav { display: none; }
/* gépen a rajzlap ennyivel alacsonyabb, amíg a lépéssor látszik – így az eszközök és a rajzlap most is együtt férnek el */
.tr-bal:has(> .tr-harom-sav:not([hidden])) { --tr-lepesek: 5.25rem; }
/* keskenyen tömörebb: a magyarázó sor helyett a rajzlap alatti súgó szól (a lépésre koppintva), csak a „Kész!” marad */
@media (max-width: 900px) {
  .tr-harom-sav { padding-block: .3rem; }
  .tr-harom-sav:not(.is-kesz) .tr-harom-sugo { display: none; }
}
@media (max-width: 420px) {
  .tr-harom-sav { padding-right: 2.5rem; }
  .tr-harom li + li::before { width: .35rem; }
  .tr-harom button { gap: .3rem; padding-right: .5rem; font-size: .86rem; }
  .tr-harom-szam { width: 1.45rem; height: 1.45rem; font-size: .75rem; }
}
.tr-reszletes-kapcs .tr-halk { font-weight: 400; color: var(--ink-soft); }
.tr-sugo-doboz > summary, .tr-ossz-reszlet > summary { cursor: pointer; font-weight: 650; }
.tr-sugo-doboz > summary { font-size: .9rem; color: var(--ink-soft); }
.tr-sugo-doboz[open] > summary { margin-bottom: .4rem; }
.tr-ossz-reszlet > summary { padding: .35rem 0; }
.tr-ossz-reszlet[open] > summary { margin-bottom: .75rem; }
.tr-modszer-resz > summary { cursor: pointer; }
.tr-modszer-resz > summary h2 { display: inline; margin: 0; }
.tr-modszer-resz + .tr-modszer-resz { margin-top: 1.5rem; }
.tr-modszer-resz[open] > summary { margin-bottom: 1rem; }
/* oldalnézetben az eszközök halványak (egy eszköz választása visszavisz a felülnézetre) */
.tr-modok.is-tompa .tr-eszkoz { opacity: .55; }
.tr-modok.is-tompa .tr-eszkoz[aria-pressed="true"] { border-color: var(--line-strong); background: var(--white); color: var(--ink); }
.tr-muveletek { display: flex; flex: none; gap: .3rem; }
.tr-eszkoz {
  display: grid;
  justify-items: center;
  gap: .12rem;
  min-width: 0;
  padding: .45rem .2rem .4rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: .8rem;
  font-stretch: 92%;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tr-eszkoz span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .tr-eszkoz:hover { border-color: var(--navy); } }
.tr-eszkoz[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: var(--white); }
.tr-ikon-gomb {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .tr-ikon-gomb:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); } }
.tr-ikon-gomb:disabled { opacity: .4; cursor: not-allowed; }
/* A rajzlap fölött: a szintek fülei (melyiket rajzolja; oldalnézetben a klíma választója), a műveletek és a nézetváltó.
   A fülek sora oldalra görgethető, ha sok a szint. */
.tr-nezetsor { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; min-width: 0; }
.tr-szintek { display: flex; flex: 1 1 8rem; gap: .3rem; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.tr-szint-ful {
  flex: none;
  min-height: 2.3rem;
  padding: .3rem .85rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .tr-szint-ful:hover { border-color: var(--navy); } }
.tr-szint-ful[aria-pressed="true"] { border-color: var(--navy); background: var(--c-tint, #EAF1FD); color: var(--navy); }
.tr-szint-plusz { border-style: dashed; color: var(--ink-soft); }
/* a klíma választója magában is érthető („2. beltéri – Szoba 3 (1. emelet)”): a felirata csak a felolvasónak szól */
.tr-oldal-valaszt { display: inline-flex; flex: 1 1 12rem; align-items: center; min-width: 0; font-size: .88rem; font-weight: 600; }
.tr-oldal-valaszt span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tr-oldal-valaszt select {
  flex: 1;
  min-width: 0;
  max-width: 22rem;
  min-height: 2.3rem;
  padding: .3rem .6rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
}
.tr-nezet { display: inline-flex; flex: none; margin-left: auto; padding: 3px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--white); }
.tr-nezet button {
  min-height: 2.1rem;
  padding: .25rem .85rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}
.tr-nezet button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.tr-nezet button:focus-visible, .tr-szint-ful:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 2px; }
.tr-lap[data-nezet="oldal"] .tr-vaszon { cursor: grab; }

.tr-lap-tarto { position: relative; }
.tr-lap { position: relative; height: clamp(18rem, calc(100vh - 19rem - var(--tr-lepesek, 0px)), 42rem); overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: 16px; background: #FBFDFF; }
.tr-vaszon { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: crosshair; }
.tr-lap[data-mod="valaszt"] .tr-vaszon { cursor: default; }
.tr-vaszon:focus-visible { outline: 3px solid var(--cool-2); outline-offset: -3px; border-radius: 16px; }
.tr-tinta { fill: none; stroke: var(--navy); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; opacity: .55; vector-effect: non-scaling-stroke; pointer-events: none; }
.tr-tinta.is-cso { stroke: var(--warm-2); }
.tr-tinta.is-elhalvanyul { opacity: 0; transition: opacity .3s ease; }
.tr-ures { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem; padding: 1.5rem; text-align: center; pointer-events: none; }
.tr-ures p { max-width: 25rem; margin: 0; color: var(--ink-soft); }
.tr-ures .tr-ures-cim { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-stretch: 108%; font-weight: 650; color: var(--ink); }
.tr-ures .btn, .tr-ures a { pointer-events: auto; }
.tr-ures a { white-space: nowrap; }
.tr-ures .btn { margin-top: .5rem; }
/* rajzolás közben az üres rajzlap felirata nem takarja a vonalat (tervrajz.js: .is-rajzol) */
.tr-ures { transition: opacity .15s ease; }
.tr-lap.is-rajzol .tr-ures { opacity: 0; }
/* alacsony rajzlapon (kis telefon, tervrajz.js: uresMeret) a felirat tömörebb; ha szint-gombok is vannak rajta (másolás,
   tetőtér), a magyarázó szöveg nélkül – az emeletnél a látogató már rajzolt, és így minden elfér */
.tr-ures.is-tomor { gap: .35rem; padding: .6rem; }
.tr-ures.is-tomor .tr-ures-cim { font-size: 1.1rem; }
.tr-ures.is-tomor p { font-size: .85rem; line-height: 1.4; }
.tr-ures.is-tomor .btn { margin-top: .15rem; padding: .45rem .9rem; font-size: .9rem; }
.tr-ures.is-tomor.is-szint p:not(.tr-ures-cim) { display: none; }
.tr-csak-keskeny { display: none; }
.tr-kijelolve {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: calc(100% - 1.2rem);
  padding: .3rem .35rem .3rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 12px 26px -16px rgba(26, 33, 80, .55);
  font-size: .9rem;
  font-weight: 600;
}
.tr-kijelolve span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-kijelolve-torles {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: none;
  padding: .4rem .75rem;
  border: 0;
  border-radius: 999px;
  background: #FFF1E7;
  color: var(--warm);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.tr-kijelolve-torles .icon { width: 1.05rem; height: 1.05rem; }
@media (hover: hover) and (pointer: fine) { .tr-kijelolve-torles:hover { background: #FFE2CF; } }
/* A Villany eszköz választója: konnektor vagy elosztótábla. */
.tr-almod { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.tr-almod legend { float: left; margin-right: .3rem; padding: 0; font-size: .92rem; font-weight: 600; }
.tr-almod .kalk-chip span { padding: .4rem .85rem; font-size: .9rem; }
/* Kijelölt ablak szélessége: − és + a kijelölés sávjában. */
.tr-ablak-meret { display: inline-flex; flex: none; gap: .25rem; }
.tr-ablak-meret button,
.tr-jel-gombok button:not(.tr-torol) {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .tr-ablak-meret button:hover, .tr-jel-gombok button:not(.tr-torol):hover { border-color: var(--navy); color: var(--navy); } }
/* A visszajelzés asztalon a rajzlap alján (a következő rajzolásnál eltűnik), telefonon alatta (lent); üresen láthatatlan, de
   a felolvasónak megmarad. */
.tr-allapot-sor {
  position: absolute;
  left: .6rem;
  bottom: .6rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .7rem;
  max-width: min(38rem, calc(100% - 1.2rem));
  padding: .45rem 2.4rem .45rem .8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 12px 26px -18px rgba(26, 33, 80, .55);
  transition: opacity .2s ease;
}
/* a szövegén át lehet rajzolni és mozgatni (az érintés a rajzlapra megy), csak a gombjai kattinthatók */
.tr-allapot-sor { pointer-events: none; }
.tr-allapot-sor button { pointer-events: auto; }
.tr-allapot-sor.is-ures, .tr-lap-tarto:has(.tr-ures:not([hidden])) .tr-allapot-sor { opacity: 0; }
.tr-lap-tarto:has(.tr-ures:not([hidden])) .tr-allapot-sor button { visibility: hidden; }
.tr-allapot-sor .tr-allapot { flex: 1 1 14rem; }
.tr-allapot-gomb { min-height: 2.3rem; padding: .35rem .95rem; background: var(--white); font-size: .9rem; }
.tr-allapot { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink); }
.tr-allapot-bezar {
  position: absolute;
  top: .2rem;
  right: .25rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .tr-allapot-bezar:hover { background: var(--paper); color: var(--ink); } }
.tr-lap-alatt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.tr-lap-alatt .link-btn { font-weight: 600; }
/* ha van rajz, de a mentése nincs bekapcsolva (tervrajz.js, mentesJelFrissit) */
.tr-mentes-jel { color: var(--warm); }
.tr-sugo { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); }

.tr-panel { display: grid; gap: 1.75rem; min-width: 0; }
.tr-resz { display: grid; gap: .9rem; min-width: 0; }
.tr-resz > .btn { justify-self: start; }
.tr-resz-cim { margin: 0; font-size: 1.35rem; font-stretch: 108%; font-weight: 650; }
.tr-lista { display: grid; gap: .75rem; }
.tr-ures-lista { margin: 0; padding: .9rem 1rem; border: 1.5px dashed var(--line-strong); border-radius: 14px; font-size: .95rem; color: var(--ink-soft); }
.tr-kartya { display: grid; gap: .75rem; min-width: 0; padding: 1rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--white); transition: border-color .2s ease, box-shadow .2s ease; }
.tr-kartya[aria-current="true"] { border-color: var(--cool); box-shadow: 0 0 0 3px var(--c-tint, #EAF1FD); }
.tr-kartya-fej { display: flex; align-items: center; gap: .5rem; }
.tr-kartya-cim { display: flex; align-items: center; gap: .55rem; flex: 1; min-width: 0; margin: 0; font-weight: 650; }
.tr-nev {
  flex: 1;
  min-width: 0;
  padding: .45rem .65rem;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 650;
}
@media (hover: hover) and (pointer: fine) { .tr-nev:hover { border-color: var(--line-strong); } }
.tr-nev:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 1px; }
.tr-torol {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .tr-torol:hover { border-color: #F6C8AE; color: var(--warm); } }
.tr-mezok { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .75rem; }
.tr .field label { font-size: .92rem; }
/* a szövegmező beépített szélessége (size=20) ne tolja szét keskeny kártyán a rácsot */
.tr .field, .tr .field input, .tr .field select, .tr-kartya > * { min-width: 0; }
.tr .field input,
.tr .field select { padding: .6rem .7rem; border-color: var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .tr .field input:hover, .tr .field select:hover { border-color: var(--navy); } }
.tr .optional { font-weight: 400; color: var(--ink-soft); }
.tr .kalk-csoport legend { font-size: .92rem; }
.tr .kalk-chip span { padding: .45rem .85rem; font-size: .9rem; }
.tr-szam-mezo { max-width: 16rem; }
.tr-kartya-sor { margin: 0; font-size: .95rem; line-height: 1.5; }
.tr-sugo-kicsi { margin: -.25rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
.tr-reszletek summary { cursor: pointer; font-size: .93rem; font-weight: 600; color: var(--navy); }
.tr-reszletek-test { display: grid; gap: 1rem; margin-top: .9rem; }
.tr-reszletek + .tr-reszletek { margin-top: -.25rem; }
/* A helyiség jelei a kártyán: lista (ablaknál − és + a szélességhez), alatta a felvétel gombjai. */
.tr-jel-lista { list-style: none; display: grid; gap: .35rem; margin: 0; padding: 0; }
.tr-jel-lista:empty { display: none; }
.tr-jel-lista li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .75rem; font-size: .95rem; }
.tr-jel-gombok { display: inline-flex; align-items: center; gap: .25rem; }
/* az ajtó magassága a sora alatt (ettől függ, elfér-e fölötte beltéri) */
.tr-jel-lista .tr-jel-mag { display: flex; flex: 1 1 100%; align-items: center; gap: .6rem; }
.tr-jel-lista .tr-jel-mag label { font-size: .88rem; font-weight: 500; color: var(--ink-soft); }
.tr-jel-lista .tr-jel-mag input { width: 5.5rem; padding: .4rem .6rem; }
/* figyelmeztetés (pl. az ajtó fölött nem fér el a beltéri) */
.tr-kartya .tr-figy { font-weight: 600; color: var(--warm); }
.tr-eredmeny .tr-figy { font-weight: 600; color: #FFC6A6; }
.tr-jel-gombok .tr-torol { width: 2.1rem; height: 2.1rem; }
.tr-jel-uj { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.tr .tr-kis-gomb { min-height: 2.4rem; padding: .4rem .85rem; font-size: .9rem; }
.tr-jel {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
}
.tr-jel.is-kul { background: var(--ink); }
.tr-uj-szoba { display: grid; gap: .8rem; padding: 1rem; border-radius: 14px; background: var(--paper); }
.tr-uj-szoba .btn { justify-self: start; min-height: 2.75rem; }
.tr-uj-szoba .field input { border-color: var(--line-strong); }
.tr-alcim { margin: 0; font-weight: 650; }
.tr-hiba { margin: 0; font-size: .93rem; font-weight: 600; color: var(--warm); }

.tr-osszesites { padding-bottom: var(--space); }
.tr-eredmeny { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 3.5vw, 2.25rem); border-radius: 22px; background: var(--ink); color: var(--white); }
.tr-eredmeny h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.tr-eredmeny h3 { margin: 0 0 .6rem; font-size: 1.05rem; font-stretch: 104%; font-weight: 650; }
.tr-eredmeny a:not(.btn) { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .tr-eredmeny a:not(.btn):hover { color: var(--cool-3); } }
.tr-eredmeny p { margin: 0; }
.tr-eredmeny-tartalom { display: grid; gap: 1.4rem; }
.tr-eredmeny-ures { color: rgba(255, 255, 255, .85); }
.tr-gep-lista { list-style: none; display: grid; gap: .9rem; margin: 0; padding: 0; }
.tr-gep-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .8rem; line-height: 1.5; }
.tr-gep-lista .tr-jel { margin-top: .05rem; background: var(--white); color: var(--ink); }
.tr-gep-lista .tr-jel.is-kul { background: rgba(255, 255, 255, .16); color: var(--white); }
.tr-gep-lista .tr-jel.is-ures { background: rgba(255, 255, 255, .16); }
.tr-meret { margin-top: .15rem !important; font-size: 1.1rem; font-weight: 650; }
.tr-reszlet { font-size: .93rem; color: rgba(255, 255, 255, .78); }
.tr-ar-blokk { display: grid; gap: .35rem; padding: 1rem 1.15rem; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.tr-cimke { font-size: .95rem; font-weight: 600; color: rgba(255, 255, 255, .7); }
.tr-ar { font-size: clamp(1.9rem, 5vw, 2.8rem); font-stretch: 112%; font-weight: 650; line-height: 1.05; }
.tr-ar-bontas { font-size: .95rem; line-height: 1.45; color: rgba(255, 255, 255, .88); font-variant-numeric: tabular-nums; }
.tr-ketto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2.5rem; }
.tr-pipak, .tr-tetelek { list-style: none; display: grid; gap: .4rem; margin: 0; padding: 0; font-size: .95rem; line-height: 1.45; }
.tr-pipak li { position: relative; padding-left: 1.5rem; color: rgba(255, 255, 255, .88); }
.tr-pipak li::before { content: ""; position: absolute; left: .15rem; top: .38em; width: .75rem; height: .4rem; border-left: 2px solid var(--cool-3); border-bottom: 2px solid var(--cool-3); transform: rotate(-45deg); }
.tr-tetelek li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.tr-tetelek small { color: rgba(255, 255, 255, .65); }
.tr-tetel-ar { margin-left: auto; font-weight: 650; white-space: nowrap; }
.tr-apro { font-size: .9rem; line-height: 1.55; color: rgba(255, 255, 255, .75); }
.tr-cta { display: flex; flex-wrap: wrap; gap: .6rem; }
/* <button> gomboknál a böngésző szürke alapszíne ne üssön át (a linkként írt gomboknak nincs háttere) */
.tr-cta .btn-outline-light { background: transparent; }
.tr button.btn-ghost { background: var(--white); }
.tr-adatvedelem { font-size: .88rem; line-height: 1.5; color: rgba(255, 255, 255, .68); }
.tr-lepesek { display: grid; gap: .7rem; margin: 0 0 2rem; padding-left: 1.3rem; font-size: 1.05rem; line-height: 1.6; }

@media (max-width: 900px) {
  .tr-grid { grid-template-columns: minmax(0, 1fr); }
  .tr-bal { position: static; }
  /* az eszközsor és a rajzlap együtt férjen el a fejléc és a telefon alján álló „Hívás / Ajánlatkérés” sáv között */
  .tr-lap { height: clamp(13rem, calc(100vh - 23rem), 36rem); height: clamp(13rem, calc(100svh - 23rem), 36rem); }
  .tr-csak-szeles { display: none; }
  .tr-csak-keskeny { display: inline; }
}
@media (max-width: 640px) {
  .tr-ketto { grid-template-columns: minmax(0, 1fr); }
  .tr-modok { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* keskenyen: elöl a műveletek és a nézetváltó („Felül / Oldal”), alattuk a szintek fülei (vagy a klíma választója) */
  .tr-muveletek { order: 1; }
  .tr-nezet { order: 2; margin-left: auto; }
  .tr-szintek, .tr-oldal-valaszt { order: 3; flex-basis: 100%; }
  .tr-nezet-vege { display: none; }
  .tr-oldal-valaszt select { max-width: none; }
}
/* érintőképernyős telefonon két ujjal nagyít: a nagyítógombok helyét a többi kapja */
@media (max-width: 640px) and (pointer: coarse) {
  .tr-nagyito { display: none; }
}
/* érintőképernyőn a kis gombok is legalább kb. 44 képpontosak (fülek, választók, −/+, kuka, bezárás) */
@media (pointer: coarse) {
  .tr-szint-ful, .tr-oldal-valaszt select, .tr .tr-kis-gomb, .tr-allapot-gomb { min-height: 2.75rem; }
  .tr-nezet button { min-height: 2.5rem; }   /* a keretével együtt kb. 44 képpont */
  .tr .kalk-chip span { padding-block: .7rem; }
  .tr-ablak-meret button, .tr-jel-gombok button:not(.tr-torol), .tr-jel-gombok .tr-torol, .tr-torol { width: 2.75rem; height: 2.75rem; }
  .tr-kijelolve-torles { min-height: 2.5rem; }
  .tr-allapot-sor { padding-right: 3rem; }
  .tr-allapot-bezar { top: 0; right: 0; width: 2.75rem; height: 2.75rem; }
}
/* Telefonon (Boldi, 2026-10-21: „a segéd szövegeket a rajzterületre szúrja be … nem látod, mit rajzolsz közben”) a
   visszajelzés nem a rajzlapon van, hanem közvetlenül alatta, a sorban; üresen nem foglal helyet. A korábbi, a képernyő
   alján lebegő változat is a rajz fölé került, megszűnt. */
@media (max-width: 900px) {
  .tr-allapot-sor { position: relative; left: auto; bottom: auto; max-width: none; margin-top: .55rem; pointer-events: auto; box-shadow: none; }
  .tr-allapot-sor.is-ures { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
  .tr-lap-tarto:has(.tr-ures:not([hidden])) .tr-allapot-sor:not(.is-ures) { opacity: 1; }
  .tr-lap-tarto:has(.tr-ures:not([hidden])) .tr-allapot-sor button { visibility: visible; }
}
/* érintőképernyőn a nagyobb gombok miatt a rajzlap kicsit alacsonyabb, hogy a sávok közé most is beférjen – az alatta lévő
   üzenet (2–3 sor) is (Boldi, 2026-10-21: az üzenet már nem a rajzlapon van) */
@media (max-width: 900px) and (pointer: coarse) {
  .tr-lap { height: clamp(12rem, calc(100vh - 24.5rem), 36rem); height: clamp(max(12rem, min(15.5rem, 100svh - 24.5rem)), calc(100svh - 28rem), 36rem); }
}
@media (max-width: 359px) {
  .tr-eszkoz { font-size: .74rem; }
  .tr-ikon-gomb { width: 2.45rem; height: 2.45rem; }
}
/* Teljes képernyős rajzolás (Boldi, 2026-10-24: „mehet a teljesképernyős rajzolás, de abban az esetben is látszódjanak a
   rajzeszközök”; tervrajz.js): keskeny képernyőn a gomb a műveletek mellett. Teljes képernyőn a bal oszlop kitölti a
   képernyőt: fölül az eszközök és a műveletek, alattuk a rajzlap, legalul az üzenet állandó helyen (így a rajzlap nem
   ugrál, amikor egy üzenet jön vagy eltűnik); a többi (jelölések, súgó) rejtve, a fejléc és az alsó sáv is. */
.tr-teljes-gomb, .tr-teljes-ki, .tr-bal.is-teljes .tr-teljes-be { display: none; }
.tr-bal.is-teljes .tr-teljes-ki { display: inline-grid; }
@media (max-width: 900px) {
  .tr-teljes-gomb { display: inline-flex; gap: .35rem; width: auto; padding-inline: .6rem .75rem; font: inherit; font-size: .88rem; font-weight: 650; white-space: nowrap; }
  /* részletes tervezésben (több gomb a sorban) csak az ikon; teljes képernyőn ott is kiírja: „Kész” */
  html.tr-reszletes .tr-bal:not(.is-teljes) .tr-teljes-szoveg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  html.tr-reszletes .tr-bal:not(.is-teljes) .tr-teljes-gomb { width: 2.6rem; padding: 0; justify-content: center; }
}
html.tr-teljes, html.tr-teljes body { overflow: hidden; overscroll-behavior: none; }
html.tr-teljes .site-header, html.tr-teljes .mobile-bar { visibility: hidden; }
html.tr-teljes .tr-bal.is-teljes {   /* erősebb, mint az egyszerű tervezés „position: static”-ja */
  position: fixed;
  inset: 0;
  z-index: 35;   /* a fejléc (20) és az alsó sáv (30) fölött, a sütiablak (40) alatt */
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: calc(.5rem + env(safe-area-inset-top, 0px)) calc(.6rem + env(safe-area-inset-right, 0px)) calc(.45rem + env(safe-area-inset-bottom, 0px)) calc(.6rem + env(safe-area-inset-left, 0px));
  background: var(--white);
}
.tr-bal.is-teljes > :not(.tr-eszkozok):not(.tr-nezetsor):not(.tr-lap-tarto):not(.tr-almod) { display: none; }
.tr-bal.is-teljes .tr-lap-tarto { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.tr-bal.is-teljes .tr-lap { flex: 1 1 auto; height: auto; min-height: 8rem; }
.tr-bal.is-teljes .tr-allapot-sor,
.tr-bal.is-teljes .tr-allapot-sor.is-ures { position: relative; left: auto; bottom: auto; flex: none; width: auto; max-width: none; height: 4.3rem; margin: .45rem 0 0; padding: .35rem 2.6rem .35rem .7rem; overflow-y: auto; clip-path: none; border: 1px solid var(--line); box-shadow: none; pointer-events: auto; }
.tr-bal.is-teljes .tr-allapot-sor.is-ures { visibility: hidden; }
.tr-bal.is-teljes .tr-allapot { font-size: .9rem; line-height: 1.4; }
.tr-bal.is-teljes .tr-ures-meretek { display: none; }   /* a méretes felvétel mezői a rajzlap alatt vannak, teljes képernyőn nem látszanak */
@media (prefers-reduced-motion: reduce) {
  .tr-tinta.is-elhalvanyul, .tr-eszkoz, .tr-kartya, .tr-allapot-sor { transition: none; }
}

/* ---------- Eszközök (inc/eszkozok.php): kártyák kis, mozgó ábrával ----------
   Az ábra akkor rajzolódik ki, amikor a kártyák a képernyőre érnek (site.js: is-varakozik → is-latszik); rámutatáskor
   finoman mozog (a cső árama, a ventilátor, a mutató, a meleg). JavaScript nélkül és csökkentett mozgásnál a kész ábra
   látszik, mozgás nélkül. */
.eszkoz-szakasz { padding-block: var(--space); background: var(--paper); }
.eszkoz-sav { background: var(--white); border-top: 1px solid var(--line); }
.eszkoz-oldal { padding-top: 0; }   /* az /eszkozok oldalon a cím alatt rögtön a kártyák (a háttér ugyanaz) */
.eszkozok { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1.25rem; margin: 0; padding: 0; }
.eszkoz { display: flex; min-width: 0; }
.eszkoz:nth-child(2) { --kartya: .12s; }
.eszkoz:nth-child(3) { --kartya: .24s; }
.eszkoz:nth-child(4) { --kartya: .36s; }
.eszkoz-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover { border-color: var(--navy); box-shadow: 0 20px 40px -28px rgba(26, 33, 80, .6); color: var(--ink); } }
.eszkoz-link:focus-visible { border-radius: 18px; }
.eszkoz-abra { display: block; aspect-ratio: 5 / 3; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #F8FAFE, #EEF3FB); }
.eszkoz-abra svg { display: block; width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.eszkoz-szoveg { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1.1rem 1.25rem 1.25rem; }
.eszkoz-cim { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.15rem; font-stretch: 106%; font-weight: 650; line-height: 1.25; }
.eszkoz-uj { padding: .15rem .55rem; border-radius: 999px; background: var(--navy); color: var(--white); font-size: .75rem; font-stretch: 100%; font-weight: 700; letter-spacing: .02em; }
.eszkoz-leiras { color: var(--ink-soft); font-size: .97rem; line-height: 1.5; }
/* ha minden ár megvan, a rajzoló kártyáján kiemelve: tájékoztató ár -tól -ig */
.eszkoz-kiemeles { align-self: flex-start; padding: .2rem .65rem; border-radius: 999px; background: #EAF1FD; color: var(--navy); font-size: .85rem; font-weight: 700; }
.eszkoz-gomb { display: inline-flex; align-items: center; gap: .3rem; margin-top: auto; padding-top: .4rem; color: var(--navy); font-weight: 650; }
.eszkoz-gomb .icon { width: 1.1rem; height: 1.1rem; transition: transform .25s ease; }
.eszkoz-link:focus-visible .eszkoz-gomb .icon { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .eszkoz-gomb .icon { transform: translateX(4px); } }

/* az ábrák elemei */
.ea-racs { stroke: #E3E9F4; stroke-width: 1; }
.ea-fal { stroke: var(--navy); stroke-width: 3; }
.ea-gep { fill: var(--white); stroke: var(--navy); stroke-width: 2; }
.ea-ventil { stroke: var(--cool); stroke-width: 2; transform-box: fill-box; transform-origin: 50% 50%; }
.ea-cso { stroke: var(--warm-2); stroke-width: 3; }
.ea-cso-aram { stroke: var(--white); stroke-width: 1.3; stroke-dasharray: .04 .06; opacity: 0; }
.ea-papir { fill: var(--white); stroke: var(--line-strong); stroke-width: 1.5; }
.ea-keret { stroke: var(--cool); stroke-width: 2.5; }
.ea-vonal-vekony { stroke: var(--line-strong); stroke-width: 1.5; }
.ea-led { fill: var(--cool-2); }
.ea-meret { stroke: var(--warm-2); stroke-width: 2; }
.ea-felirat { fill: var(--ink-soft); font-family: var(--font); font-size: 11px; font-weight: 650; }
.ea-aramlas path { stroke: var(--cool-2); stroke-width: 2; opacity: 0; }
.ea-skala-alap { stroke: var(--line); stroke-width: 10; }
.ea-skala { stroke: var(--cool); stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: .3; }
.ea-rovatkak { stroke: var(--line-strong); stroke-width: 2; }
.ea-mutato, .ea-mutato-ing { transform-box: view-box; transform-origin: 100px 92px; }
.ea-mutato { transform: rotate(36deg); }
.ea-mutato path { stroke: var(--warm); stroke-width: 3.5; }
.ea-tengely { fill: var(--navy); }
.ea-ho path { stroke: var(--warm-2); stroke-width: 2.5; }
.ea-talaj { stroke: var(--line-strong); stroke-width: 2; }
.ea-kijelzo { fill: var(--navy); }
.ea-kod { fill: #EAF4FF; font-family: var(--font); font-size: 10.5px; font-weight: 750; letter-spacing: .08em; }
.ea-lencse { fill: rgba(255, 255, 255, .14); stroke: var(--navy); stroke-width: 3; }
.ea-nyel { stroke: var(--navy); stroke-width: 6; stroke-linecap: round; }

/* kirajzolódás, amikor a kártyák a képernyőre érnek */
.eszkozok.is-varakozik .ea-rajzol { stroke-dasharray: 1; stroke-dashoffset: 1; }
.eszkozok.is-varakozik .ea-skala { stroke-dashoffset: 1; }
.eszkozok.is-varakozik .ea-feltunik, .eszkozok.is-varakozik .ea-leereszkedik { opacity: 0; }
.eszkozok.is-varakozik .ea-mutato { transform: rotate(-90deg); }
.eszkozok.is-latszik .ea-rajzol { animation: ea-rajzol 1.1s cubic-bezier(.4, 0, .2, 1) both; }
.eszkozok.is-latszik .ea-skala { animation: ea-skala 1.4s cubic-bezier(.2, .8, .2, 1) both; }
.eszkozok.is-latszik .ea-feltunik { animation: ea-feltunik .5s ease both; }
.eszkozok.is-latszik .ea-leereszkedik { animation: ea-leereszkedik .8s cubic-bezier(.3, .7, .3, 1.2) both; }
.eszkozok.is-latszik .ea-mutato { animation: ea-mutato 1.5s cubic-bezier(.2, .8, .3, 1.15) both; }
.eszkozok.is-latszik .ea-k1 { animation-delay: calc(var(--kartya, 0s) + .1s); }
.eszkozok.is-latszik .ea-k2 { animation-delay: calc(var(--kartya, 0s) + .55s); }
.eszkozok.is-latszik .ea-k3 { animation-delay: calc(var(--kartya, 0s) + .95s); }
.eszkozok.is-latszik .ea-k4 { animation-delay: calc(var(--kartya, 0s) + 1.2s); }
.eszkozok.is-latszik .ea-k5 { animation-delay: calc(var(--kartya, 0s) + 1.6s); }
@keyframes ea-rajzol { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ea-skala { from { stroke-dashoffset: 1; } to { stroke-dashoffset: .3; } }
@keyframes ea-feltunik { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ea-leereszkedik { 0% { opacity: 0; transform: translateY(-22px); } 60% { opacity: 1; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }
@keyframes ea-mutato { from { transform: rotate(-90deg); } to { transform: rotate(36deg); } }

/* rámutatáskor (vagy billentyűvel a kártyára lépve) finom mozgás */
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) { .eszkoz-link:hover { transform: translateY(-3px); } }
  .eszkoz-link:focus-visible .ea-cso-aram { opacity: .95; animation: ea-aramlik .9s linear infinite; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-cso-aram { opacity: .95; animation: ea-aramlik .9s linear infinite; } }
  .eszkoz-link:focus-visible .ea-ventil { animation: ea-forog 1.6s linear infinite; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-ventil { animation: ea-forog 1.6s linear infinite; } }
  .eszkoz-link:focus-visible .ea-aramlas path { animation: ea-fuj 1.5s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-aramlas path { animation: ea-fuj 1.5s ease-in-out infinite; } }
  .eszkoz-link:focus-visible .ea-aramlas path:nth-child(2) { animation-delay: .2s; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-aramlas path:nth-child(2) { animation-delay: .2s; } }
  .eszkoz-link:focus-visible .ea-aramlas path:nth-child(3) { animation-delay: .4s; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-aramlas path:nth-child(3) { animation-delay: .4s; } }
  .eszkoz-link:focus-visible .ea-mutato-ing { animation: ea-ingadozik 1.4s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-mutato-ing { animation: ea-ingadozik 1.4s ease-in-out infinite; } }
  .eszkoz-link:focus-visible .ea-ho path { animation: ea-emelkedik 1.6s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-ho path { animation: ea-emelkedik 1.6s ease-in-out infinite; } }
  .eszkoz-link:focus-visible .ea-ho path:nth-child(2) { animation-delay: .25s; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-ho path:nth-child(2) { animation-delay: .25s; } }
  .eszkoz-link:focus-visible .ea-ho path:nth-child(3) { animation-delay: .5s; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-ho path:nth-child(3) { animation-delay: .5s; } }
  .eszkoz-link:focus-visible .ea-villog { animation: ea-villog 1s steps(1) infinite; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-villog { animation: ea-villog 1s steps(1) infinite; } }
}
@keyframes ea-villog { 50% { opacity: 0; } }
@keyframes ea-aramlik { to { stroke-dashoffset: -.2; } }
@keyframes ea-forog { to { transform: rotate(360deg); } }
@keyframes ea-fuj { 0% { opacity: 0; transform: translateY(-3px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(7px); } }
@keyframes ea-ingadozik { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
@keyframes ea-emelkedik { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-5px); opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .eszkoz-link, .eszkoz-gomb .icon, .hero-uj .icon { transition: none; }
}

/* telefonon tömören: két oszlop, ábra, cím és gomb (a leírás csak az Eszközök oldalon, ott egy oszlopban marad) */
@media (max-width: 560px) {
  .eszkozok:not(.eszkozok-reszletes) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .eszkozok:not(.eszkozok-reszletes) .eszkoz-leiras { display: none; }
  .eszkozok:not(.eszkozok-reszletes) .eszkoz-szoveg { gap: .35rem; padding: .8rem .85rem .9rem; }
  .eszkozok:not(.eszkozok-reszletes) .eszkoz-cim { font-size: 1rem; }
  .eszkozok:not(.eszkozok-reszletes) .eszkoz-gomb { font-size: .95rem; }
  .eszkoz-link, .eszkoz-link:focus-visible { border-radius: 14px; }
}

/* az eszközök oldalán a végén: ha inkább beszélne velünk */
.eszkoz-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding: 1.5rem 1.75rem; border-radius: 18px; background: var(--ink); color: var(--white); }
.eszkoz-cta p { margin: 0; font-size: 1.1rem; font-weight: 600; }
.eszkoz-cta div { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Lábléc (Boldi, 2026-10-27: „a lábléc szerintem még mindig nagyon nagy”) ----------
   Címsorok nélkül, három cellában: a cég (a logó a neve mellett), az elérhetőség, az oldalak folyó hasábokban; alatta egy
   sávban a szerzői jog, a jogi oldalak és a közösségi oldalak. Minden korábbi link megmaradt. */
.site-footer { padding-block: 2rem 1.25rem; background: var(--paper); font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.site-footer a { color: var(--ink); }
.site-footer p { margin: 0; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.lablec { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr) minmax(0, 1.55fr); gap: 1.5rem 2rem; }
.lablec-ceg { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: center; gap: .4rem .8rem; }
.lablec-logo { width: auto; height: 2.4rem; }
.lablec-ceg p { font-size: .86rem; line-height: 1.4; }
.lablec-ceg .lablec-fgaz { grid-column: 1 / -1; }
.lablec-kapcsolat { display: grid; align-content: start; gap: .1rem; }
.lablec-oldalak ul { columns: 3 8.5rem; column-gap: 1.25rem; }
.lablec-oldalak li { break-inside: avoid; padding-block: .06rem; }
.lablec-also { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.5rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .85rem; }
.lablec-also ul { display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; }
.lablec-kozosseg { margin-left: auto; }
@media (max-width: 960px) {
  .lablec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lablec-oldalak { grid-column: 1 / -1; }
  .lablec-oldalak ul { columns: 3 9rem; }
}
/* telefonon egy oszlop; a cégadat két sorban a kisebb logó mellett; az oldalak folyó sorokban (nem listában egymás alatt), a
   három külön eszköz nélkül – az „Ingyenes online eszközeink” oldalon és a lenti „Eszközök” fülön is ott vannak */
@media (max-width: 600px) {
  .lablec { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .lablec-logo { height: 2rem; }
  .lablec-ceg p { font-size: .8rem; line-height: 1.35; }
  .lablec-oldalak .lablec-eszkoz { display: none; }
  .lablec-oldalak ul { columns: auto; display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
  .lablec-kozosseg { margin-left: 0; }
}
/* érintőképernyőn a linkek érintési felülete a WCAG 24 px-es alsó határa fölött marad */
@media (pointer: coarse) {
  .lablec-oldalak a, .lablec-also a, .lablec-also .link-btn { display: inline-block; padding-block: .3rem; }
  .lablec-kapcsolat a { display: inline-block; padding-block: .22rem; }   /* a telefonszám és az e-mail: a leggyakoribb koppintás */
}

/* ---------- Telefonon: hívás és ajánlatkérés mindig kéznél ---------- */
.mobile-bar { display: none; }
@media (max-width: 760px) {
  .mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 30px -24px rgba(26, 33, 80, .5);
  }
  .mobile-bar .btn { min-height: 2.9rem; padding-inline: .75rem; }
  body { padding-bottom: 4.4rem; }
}

/* ---------- Süti-ablak (assets/js/site.js) ----------
   Nem takarja el az oldalt (jobbra lent: a nyitókép szövege és gombjai balra vannak), és a két gomb
   egyforma: elutasítani ugyanolyan könnyű, mint elfogadni. */
.suti {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: min(26rem, 100% - 2.5rem);
  padding: 1.25rem 1.35rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 26px 50px -26px rgba(26, 33, 80, .5);
  animation: suti-be .4s cubic-bezier(.2, .7, .2, 1);
}
.suti p { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.suti .suti-cim { margin-bottom: .35rem; font-size: 1.15rem; font-stretch: 112%; font-weight: 650; line-height: 1.25; color: var(--ink); }
.suti .suti-allapot { font-weight: 600; color: var(--ink); }
.suti-gombok { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.suti-gombok .btn { min-height: 2.75rem; padding-inline: .7rem; }
.suti .suti-reszlet { margin: 0; font-size: .9rem; }
.suti .suti-reszlet a { color: var(--ink); }

@keyframes suti-be { from { opacity: 0; transform: translateY(1rem); } }

@media (max-width: 760px) {
  .suti { left: max(.5rem, env(safe-area-inset-left, 0px)); right: max(.5rem, env(safe-area-inset-right, 0px)); bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); width: auto; padding: 1.1rem 1.1rem 1rem; }
}
@media (max-width: 359px) {
  .suti-gombok { grid-template-columns: minmax(0, 1fr); }
}

/* Linknek látszó gomb (pl. „Süti-beállítások” a láblécben). */
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .link-btn:hover { color: var(--navy); } }

/* ---------- Fotónagyító (assets/js/site.js) ---------- */
.lb-open { overflow: hidden; }

.lb {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(14, 18, 44, .96);
  color: var(--white);
  overscroll-behavior: contain;
}
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: rgba(14, 18, 44, .6); }
/* áttűnéssel nyílik és zárul, a fotó kicsit közelebb jön (rövid, gyorsan induló mozgás); ahol a böngésző nem tudja, azonnal */
.lb, .lb::backdrop { opacity: 0; transition: opacity .2s ease, display .2s allow-discrete, overlay .2s allow-discrete; }
.lb[open], .lb[open]::backdrop { opacity: 1; }
@starting-style { .lb[open], .lb[open]::backdrop { opacity: 0; } }
.lb-figure { transition: scale .25s cubic-bezier(.23, 1, .32, 1); }
@starting-style { .lb[open] .lb-figure { scale: .97; } }

.lb-figure { display: grid; justify-items: center; gap: .75rem; max-width: 100%; padding: 4rem 4.5rem 1.5rem; }
.lb-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 9.5rem);
  max-height: calc(100dvh - 9.5rem);
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  transition: opacity .25s ease;
}
.lb-img.is-loading { opacity: .35; }
.lb-cap { max-width: 52rem; text-align: center; font-size: .95rem; color: rgba(255, 255, 255, .8); }
.lb-count { position: fixed; top: max(1.2rem, env(safe-area-inset-top, 0px)); left: max(1.25rem, env(safe-area-inset-left, 0px)); margin: 0; font-size: .95rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .72); }

.lb-btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  cursor: pointer;
  transition: background-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .lb-btn:hover { background: rgba(255, 255, 255, .22); } }
.lb-btn svg { width: 1.4rem; height: 1.4rem; }
.lb-btn[hidden] { display: none; }
.lb-close { top: max(.75rem, env(safe-area-inset-top, 0px)); right: max(.75rem, env(safe-area-inset-right, 0px)); }
.lb-prev,
.lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: max(.75rem, env(safe-area-inset-left, 0px)); }
.lb-next { right: max(.75rem, env(safe-area-inset-right, 0px)); }

@media (max-width: 700px) {
  .lb-figure { padding: 3.75rem .75rem calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
  .lb-img { max-height: calc(100vh - 12rem); max-height: calc(100dvh - 12rem); }
  .lb-prev,
  .lb-next { top: auto; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: none; }
  .lb-prev { left: calc(50% - 3.75rem); }
  .lb-next { right: calc(50% - 3.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  @media (hover: hover) and (pointer: fine) { .project-card:hover img, .gallery-grid a:hover img, .post-card:hover .post-card-photo img { transform: none; } }
}