/*
  A Száva Terem arculata.
  Forrás és indoklás: docs/business/arculat/vizualis-nyelv.md
  Élő minta: docs/business/arculat/szava-arculat.html
  A színek fényképekből MÉRTEK. Ne hangold őket szemre.

  Három szabály, ami mindent eldönt:
    1. A bakelitpiros SOSEM szövegszín, és a lapon PONTOSAN KÉT helyen
       dolgozik: a gomb háttere (--bakelit-g) és a bakelitlemez-grafika.
       (A .pont kitöltött folt, ezért szabályos.) A harmadik előfordulás
       elvenné a figyelmet a fontosról — ezért nincs piros a .sik-4-en.
    2. Minden térköz a --t1..--t7 skáláról jön, minden felület ugyanazt
       a belső behúzást (--bel) kapja. Ad hoc px a rendezésben nincs.
    3. Egy lapon EGY teljes falszelet van, a .fo panelen. A többi panel
       csak egy vékony billentyűvonalat kap — ettől tud kiemelkedni.
*/

/* ---------- 1. a jelkészlet ------------------------------------------ */

:root{
  /* VILÁGOS VÁLTOZAT — Levente kérése, 2026-09-03: a lap a logóhoz igazodik
     (fehér alap, türkiz jel), nem a terem éjszakai árnyékához.
     Minden érték mérve: a kontrasztok a panelen és a lapon is teljesülnek. */
  --ej:        #EDF2F2;   /* lap alap — halvány hűvös fehér */
  /* A szövegdobozok nem tiszta fehérek, hanem MELEG fehérek: az OSB-lemez
     felé húznak egy hajszálnyit. Levente választása 2026-09-03-án, három
     változatból (halvány türkiz / határozott türkiz / meleg fehér).
     Ez erősíti a „nappali” érzetet, amit a szövegek is mondanak. */
  --panel:     250,247,240;
  --panel-a:   .94;
  --ink:       #14252B;   /* szöveg — 15,6:1 ✓ */
  --ink-2:     #4B5F66;   /* másodlagos — 6,6:1 ✓ */
  --ink-3:     #56676D;   /* halk címke — a színes kártyákon is 4,7:1 ✓ */
  --tabla:     #2A464F;   /* a falfestmény síkjai — dekoráció, nem szöveg */
  --tabla-vil: #92ACB4;   /* dekoráció: keretvonal, falszelet */
  --turkiz-vil:#8FC8C5;   /* dekoráció */
  /* A két világos falszín SÖTÉT párja. Világos lapon az eredeti árnyalat
     1,9:1 és 1,6:1 volt — az ikon gyakorlatilag eltűnt. Ugyanaz a színezet
     és telítettség, csak sötétebb, hogy 4,5:1 fölé kerüljön. */
  --tabla-jel: #506C74;   /* 4,5:1 ✓ */
  --turkiz-jel:#397370;   /* 4,6:1 ✓ */
  --osb:       #8A6636;   /* borostyán, sötétítve — 5,2:1 ✓ */
  --marka:     #339A99;   /* a logó teli türkize — FOLT: gomb, vonal, ikon */
  --marka-vil: #46B9BC;   /* a logó betűszíne — sötét felületen */
  --jel:       #247675;   /* türkiz SZÖVEGNEK és linknek — 5,3:1 ✓ */
  --bakelit:   #D24538;   /* CSAK folt */
  --bakelit-g: #B33B30;   /* gombháttér, fehér szöveggel 5,9:1 ✓ */
  --sug:       2px;
  --t1:  8px;  --t2: 18px; --t3: 28px; --t4: 44px;
  --t5: 66px;  --t6:100px; --t7:144px;
  --bel: var(--t4);
  --oszlop: 720px;
  --sav: 320px;

  /* A keret- és elválasztóvonal a festett ajtó kékjéből, halkítva. */
  --vonal:   rgba(20,37,43,.14);
  --vonal-2: rgba(20,37,43,.24);

  /* A falszelet két rétegének magassága — a .fo behúzása ebből számol. */
  --sor: 26px;   /* billentyűsáv */
  --sik: 46px;   /* hajtogatott színsíkok */
  --vonalka: 8px; /* a többi panel vékony billentyűvonala */
}
@media (max-width: 700px){ :root{ --bel: 26px; } }

/* ---------- 2. a váz — ez a lineáris elrendezés ----------------------- */

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

/* ---------- sorkizárás a leíró bekezdéseken -------------------------------
   Levente kérése, 2026-09-03. A szövegek tele vannak hosszú márkanevekkel
   (Laney Ironheart, Yamaha Motif ES6), amiktől a jobb szél nagyon csipkés
   lett — a bekezdés rendezetlennek látszott.

   AZ ELVÁLASZTÁS NÉLKÜL A SORKIZÁRÁS ROSSZ: szóközfolyók keletkeznének.
   A lap `lang="hu"`, ezért a `hyphens:auto` magyar szabály szerint választ
   el (cintá-nyérokkal, basszus-erősítő).

   CSAK A FOLYÓSZÖVEG. A címeket, címkéket, árakat, listákat és a vezető
   bekezdést nem érinti: rövid sorokon a sorkizárás ritkás és csúnya. */
.szakasz > p,
.hely > p,
.nappali p,
.tovabb > p,
.elonyok li .halk,
.kiknek-bevezeto{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* Keskeny kijelzőn a sorkizárás elromlik: kevés szó fér egy sorba, ezért
   nagyra nyílnak a szóközök. Ott marad a sima balra zárás. */
@media (max-width: 560px){
  .szakasz > p,
  .hely > p,
  .nappali p,
  .tovabb > p,
  .elonyok li .halk,
  .kiknek-bevezeto{ text-align:left; }
}

body{
  margin:0; background:var(--ej); color:var(--ink);
  font-family:"Source Serif 4", Georgia, serif;
  font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* A címsorok a logó betűjét viszik. Az eredeti logó erősen kondenzált
   groteszk — a mérés szerint szélesség/nagybetű = 4,09. A Google-kínálatból
   a Big Shoulders Display áll a legközelebb (5,30). Az Antonio ugyanilyen
   keskeny, de a magyar ékezetet rosszul teszi ki: az Á vesszője magasan és
   balra csúszik. A Big Shoulders az Ő-t és az Ű-t is helyesen rajzolja. */
h1,h2,h3,.kiiras{
  font-family:"Big Shoulders Display", "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
  font-weight:600; text-wrap:balance; margin:0;
}
h1{ font-size:clamp(30px, 4.4vw, 46px); line-height:1.12; letter-spacing:-.01em; }
h2{ font-size:clamp(21px, 2.6vw, 27px); line-height:1.2; }
h3{ font-size:20px; line-height:1.3; }
p{ margin:0; }

.szam, .ar{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums; }

img{ max-width:100%; height:auto; display:block; }

.vaz{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--sav);
  gap:var(--t5);
  max-width:calc(var(--oszlop) + var(--sav) + var(--t5) + 2*var(--bel));
  margin:0 auto; padding:var(--t5) var(--bel) var(--t7);
  align-items:start;
}
.tartalom{ max-width:var(--oszlop); min-width:0; }
.tartalom > * + *{ margin-top:var(--t4); }

/* A jobb sávban KIZÁRÓLAG az ajánlatdoboz van. Semmi más. */
.ajanlo-sav{ position:sticky; top:var(--t3); }

@media (max-width: 1100px){
  .vaz{ grid-template-columns:minmax(0,1fr); gap:var(--t4); }
  .ajanlo-sav{ position:static; }
  /* Mobilon a lapot a teljes űrlap zárja — a tömör doboz nem kell. */
  .ajanlo-sav{ display:none; }
}

/* Széles tartalom sosem tolja el a lapot. */
.tetellista, .artabla{ overflow-x:auto; }

/* Választható extra — külön doboz, hogy ne úgy nézzen ki, mintha az
   alapárral együtt kellene megvenni. A tulajdonos kifogása, 2026-09-01.
   FIGYELEM: ez a szabály korábban EGY szelektorlistába csúszott a fenti
   overflow-sorral, így minden .tetellista és .artabla megkapta a
   szaggatott keretet — és el is vesztette az overflow-x:auto-t. */
.extra-doboz{ margin-top:var(--t3); padding:var(--t3);
  border:1px dashed rgba(20,37,43,.30); border-radius:var(--sug);
  background:rgba(20,37,43,.05); }
.extra-doboz .cimke{ font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--osb); margin:0 0 var(--t1); }
.extra-doboz .kiiras{ font-size:18px; margin:0; }
.extra-doboz .ar{ font-size:22px; color:var(--osb); margin:var(--t1) 0 0; }
.extra-doboz .halk{ margin-top:var(--t1); }

/* ---------- 3. a fényképes háttér ------------------------------------ */

.hatter{ position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--ej); }
.hatter .kep{
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  filter:blur(6px) saturate(1.06) brightness(1.02);
  opacity:0; transition:opacity 1100ms ease;
  animation:uszas 96s ease-in-out infinite alternate;
}
.hatter .kep.aktiv{ opacity:1; }
@keyframes uszas{
  from{ transform:scale(1.10) translate3d(-1.8%,-.7%,0); }
  to  { transform:scale(1.10) translate3d( 1.8%, .7%,0); }
}
/* A fátyol: a fénykép fölé sötét, hogy a szöveg a panelen kívül is olvasson. */
.hatter::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(118% 88% at 22% 24%, rgba(237,242,242,.08), rgba(237,242,242,.46) 86%),
    linear-gradient(168deg, rgba(237,242,242,.30) 0%, rgba(237,242,242,.22) 50%, rgba(237,242,242,.44) 100%);
}

/* ---------- 4. a billentyűsáv és a falszelet -------------------------- */
/* Egy oktáv = 12 hang: 7 fehér és 5 fekete, 2-es és 3-as csoportban.
   Két dolog, amit egy zenész azonnal kiszúr, ezért mérve van:

   1. Az oktáv két szélén FÉL elválasztó vonal áll (0.7). Ismétléskor a két
      fél összeér egy egésszé. Enélkül a H és a következő C egyetlen dupla
      széles fehér billentyűvé olvad — ez volt a hiba 2026-09-03 előtt.
   2. A fekete billentyűk NEM a fehérek határára vannak középre téve. Úgy
      állnak, hogy a fehérek látszó felső része csoporton belül egyenlő
      legyen: a C-D-E hármasban 12, az F-G-A-H négyesben 11 egység.
      Ez a valódi zongora szerkesztése. */

.falszelet::before,
.panel::before{
  content:""; position:absolute; top:0; left:0; right:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='26' viewBox='0 0 140 26'%3E%3Crect width='140' height='26' fill='%23EFE7DA'/%3E%3Cg fill='%23101619'%3E%3Crect x='0' width='.7' height='26'/%3E%3Crect x='19.3' width='1.4' height='26'/%3E%3Crect x='39.3' width='1.4' height='26'/%3E%3Crect x='59.3' width='1.4' height='26'/%3E%3Crect x='79.3' width='1.4' height='26'/%3E%3Crect x='99.3' width='1.4' height='26'/%3E%3Crect x='119.3' width='1.4' height='26'/%3E%3Crect x='139.3' width='.7' height='26'/%3E%3Crect x='12' width='12' height='16'/%3E%3Crect x='36' width='12' height='16'/%3E%3Crect x='71' width='12' height='16'/%3E%3Crect x='94' width='12' height='16'/%3E%3Crect x='117' width='12' height='16'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x; background-size:auto 100%;
  border-radius:var(--sug) var(--sug) 0 0;
  height:var(--vonalka);
}

/* A teljes falszelet: billentyűsáv, alatta a hajtogatott színsíkok
   a fröccsent festékkel. Pontosan úgy rétegződik, ahogy a falon.
   LAPONKÉNT EGYSZER, a .fo panelen. */
.falszelet::before{
  height:var(--sor);
  /* Két réteg: elöl EGYETLEN oktáv piros Cisszel és Disszel, középre zárva;
     mögötte a sima oktáv ismétlődik. Mindkettő `center`-hez igazodik, ezért
     a piros oktáv pontosan ráül az ismétlődő rács egyik oktávjára.
     A piros így a lapon egyszer fordul elő a sávban, nem minden oktávban. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='26' viewBox='0 0 140 26'%3E%3Crect width='140' height='26' fill='%23EFE7DA'/%3E%3Cg fill='%23101619'%3E%3Crect x='0' width='.7' height='26'/%3E%3Crect x='19.3' width='1.4' height='26'/%3E%3Crect x='39.3' width='1.4' height='26'/%3E%3Crect x='59.3' width='1.4' height='26'/%3E%3Crect x='79.3' width='1.4' height='26'/%3E%3Crect x='99.3' width='1.4' height='26'/%3E%3Crect x='119.3' width='1.4' height='26'/%3E%3Crect x='139.3' width='.7' height='26'/%3E%3Crect x='71' width='12' height='16'/%3E%3Crect x='94' width='12' height='16'/%3E%3Crect x='117' width='12' height='16'/%3E%3C/g%3E%3Cg fill='%23D24538'%3E%3Crect x='12' width='12' height='16'/%3E%3Crect x='36' width='12' height='16'/%3E%3C/g%3E%3C/svg%3E"),
                   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='26' viewBox='0 0 140 26'%3E%3Crect width='140' height='26' fill='%23EFE7DA'/%3E%3Cg fill='%23101619'%3E%3Crect x='0' width='.7' height='26'/%3E%3Crect x='19.3' width='1.4' height='26'/%3E%3Crect x='39.3' width='1.4' height='26'/%3E%3Crect x='59.3' width='1.4' height='26'/%3E%3Crect x='79.3' width='1.4' height='26'/%3E%3Crect x='99.3' width='1.4' height='26'/%3E%3Crect x='119.3' width='1.4' height='26'/%3E%3Crect x='139.3' width='.7' height='26'/%3E%3Crect x='12' width='12' height='16'/%3E%3Crect x='36' width='12' height='16'/%3E%3Crect x='71' width='12' height='16'/%3E%3Crect x='94' width='12' height='16'/%3E%3Crect x='117' width='12' height='16'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat, repeat-x;
  background-position:center, center;
  background-size:auto 100%, auto 100%;
  box-shadow:0 3px 0 rgba(20,37,43,.24), 0 4px 14px rgba(20,37,43,.14);
}
.falszelet::after{
  content:""; position:absolute; left:0; right:0; top:var(--sor);
  height:var(--sik);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271200%27%20height%3D%2756%27%20viewBox%3D%270%200%201200%2056%27%20preserveAspectRatio%3D%27none%27%3E%20%3Crect%20width%3D%271200%27%20height%3D%2756%27%20fill%3D%27%232A464F%27%2F%3E%20%3Cpath%20d%3D%27M0%2056%20L0%2026%20L300%208%20L640%2034%20L900%2014%20L1200%2030%20L1200%2056%20Z%27%20fill%3D%27%2336555F%27%2F%3E%20%3Cpath%20d%3D%27M0%2056%20L0%2042%20L380%2022%20L720%2046%20L1200%2024%20L1200%2056%20Z%27%20fill%3D%27%233E6E7E%27%20opacity%3D%27.85%27%2F%3E%20%3Cpath%20d%3D%27M0%2056%20L0%2050%20L460%2036%20L860%2054%20L1200%2040%20L1200%2056%20Z%27%20fill%3D%27%2392ACB4%27%20opacity%3D%27.55%27%2F%3E%20%3Cpath%20d%3D%27M980%200%20L1060%200%20L1030%2056%20L950%2056%20Z%27%20fill%3D%27%23153151%27%20opacity%3D%27.45%27%2F%3E%20%3C%2Fsvg%3E");
  background-size:100% 100%; background-repeat:no-repeat;
}

/* ---------- 5. a felületek -------------------------------------------- */
/* Az olvashatóság nem függhet attól, milyen fénykép van mögötte:
   a --panel-a fedettség fix. Minden felület UGYANAZT a --bel behúzást kapja. */

.panel,
.szakasz, .modok, .elonyok, .hely, .csoport, .tovabb{
  position:relative;
  background:rgba(var(--panel), var(--panel-a));
  border:1px solid var(--vonal);
  border-radius:var(--sug);
  padding:var(--bel);
}
/* A billentyűvonal a panelek jele — a halkabb szakaszfelületek nem kapják meg. */
.panel{ padding-top:calc(var(--bel) + var(--vonalka)); }

/* A fő panel: itt fut a teljes falszelet, ezért nagyobb a felső behúzása. */
.fo{ padding-top:calc(var(--bel) + var(--sor) + var(--sik)); }
.fo::before{ box-shadow:0 3px 0 rgba(20,37,43,.24), 0 4px 14px rgba(20,37,43,.14); }

.panel > * + *,
.szakasz > * + *,
.modok > * + *,
.elonyok > * + *,
.hely > * + *,
.csoport > * + *,
.tovabb > * + *{ margin-top:var(--t2); }

.panel h2 + *, .szakasz h2 + *, .modok h2 + *,
.elonyok h2 + *, .hely h2 + *, .tovabb h2 + *{ margin-top:var(--t3); }

/* Vezető bekezdés: a lap hangja. Nagyobb, világosabb, kevés belőle. */
.vezeto{ font-size:clamp(19px, 2vw, 22px); line-height:1.5; color:var(--ink); }
.halk{ color:var(--ink-3); font-size:16px; line-height:1.55; }

/* ---------- 6. fejléc, menü, lábléc ----------------------------------- */

.fejlec{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--t3);
  padding:10px var(--bel);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--vonal);
}
/* ---- A szóvédjegy: az eredeti logó felépítése -------------------------
   Forrás: Documents/Száva/Logó/szava logo 1a-plain.png. A logó három sor,
   középre zárva: a név fölött és alatt egy-egy erősen ritkított kisbetűs
   sor. A név KESKENY és tömör (wdth 62) — ez a logó legjellemzőbb vonása,
   nem a szélesség. A ritkítás a kis sorokat a névvel egy szélességre hozza.

   Alapállapotban egyenes és szabályos (Levente döntése, 2026-09-03).
   A kartonbetű-játék megmarad, de csak hoveren kel életre. */
.szovedjegy{
  display:inline-flex; flex-direction:column; align-items:center;
  font-family:"Big Shoulders Display", "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
  color:var(--jel); text-decoration:none;
  line-height:1; white-space:nowrap;
}
.sv-kis{
  font-weight:600; font-size:9px;
  letter-spacing:1.227em; text-indent:1.227em;  /* a kis sorok így érnek a névvel
                                                egy szélességbe, mint a logón */
  opacity:.9;
}
.sv-nev{
  display:inline-flex; gap:.012em;
  font-weight:700;
  font-size:29px; letter-spacing:.005em;
  /* A hézag az eredeti logó arányaiból: a nagybetű-magassághoz mérve
     fölötte .19, alatta .17. Kell is: az Á vesszője kilóg a sorból,
     és összeérne a fölötte álló „ó" ékezetével. */
  margin:.22em 0 .13em;
}
.sv-nev i{
  font-style:normal; display:inline-block; transform-origin:50% 80%;
  transition:transform 260ms cubic-bezier(.34,1.56,.64,1);
}
.sv-nev i.koz{ width:.30em; }
.szovedjegy:hover .sv-nev i:nth-child(odd){ transform:rotate(-4deg) translateY(-2px); }
.szovedjegy:hover .sv-nev i:nth-child(even){ transform:rotate(4deg) translateY(2px); }

.menu{ margin-left:auto; }
.menu ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--t1);
}
.menu a{
  display:inline-block;
  font-family:Archivo, "Helvetica Neue", Arial, sans-serif;
  font-stretch:104%; font-weight:500;
  font-size:12.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none;
  padding:var(--t1); border-radius:var(--sug);
  transition:color 180ms ease;
}
.menu a:hover{ color:var(--ink); }

/* A mobil menü nyitógombja. Asztali nézetben nincs rá szükség; a HTML-ben
   `hidden`, és csak a JS veszi le róla — JS nélkül a lapos menü marad.
   FELIRATA VAN („Menü"): a korábbi lenyíló épp azért került ki, mert
   név nélküli háromszög volt. */
.menu-kapcsolo{
  display:none; align-items:center; gap:9px;
  font-family:Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); background:none; cursor:pointer;
  border:1px solid var(--vonal); border-radius:var(--sug);
  padding:9px 13px;
}
.menu-kapcsolo:hover{ color:var(--ink); border-color:var(--vonal-2); }
/* A három vonal: a középső maga az elem, a másik kettő a ::before/::after. */
.menu-vonalak{ position:relative; display:block; width:16px; height:2px;
  background:currentColor; }
.menu-vonalak::before, .menu-vonalak::after{
  content:""; position:absolute; left:0; width:16px; height:2px;
  background:currentColor;
}
.menu-vonalak::before{ top:-5px; }
.menu-vonalak::after{ top:5px; }
.menu a[aria-current="page"]{ color:var(--jel); box-shadow:inset 0 -2px 0 var(--jel); }
/* A „Felszereltség” az ELSŐ elem, és MÁS SZÍNŰ, mint a többi.
   Miért az --osb: a --jel már két jelentést visel a fejlécben (a szóvédjegy
   és az „itt jársz” aláhúzás), a --tabla-vil pedig halkabb az --ink-2-nél,
   így kiemelés helyett elhalványítana. Az --osb (5,2:1) az egyetlen
   palettaszín, ami szövegként megáll és a menüben még szabad. A bakelitpiros
   szóba sem jön: az sosem szövegszín. */
.menu-kiemelt a{ color:var(--osb); font-weight:600; }
.menu-kiemelt a:hover{ color:var(--ink); }
.menu-kiemelt a[aria-current="page"]{
  color:var(--osb); box-shadow:inset 0 -2px 0 var(--osb);
}

/* Mobilon a menü saját sort kap a szóvédjegy alatt, és ott az öt elem
   két sorba fér. A lenyíló („Szolgáltatások”) kikerült: a felirat volt az
   egyetlen neve, név nélkül nem maradhatott. */
@media (max-width: 700px){
  /* Három hasáb: üres | VÉDJEGY | gomb. Az üres első hasáb ellensúlyozza
     a gombot, ezért a védjegy pontosan középen áll. Levente kérése,
     2026-09-03. A menü alattuk, teljes szélességben. */
  .fejlec{
    display:grid; grid-template-columns:1fr auto 1fr;
    align-items:center; gap:var(--t2) 0;
  }
  .szovedjegy{ grid-column:2; justify-self:center; }
  .menu-osszecsukhato .menu-kapcsolo:not([hidden]){
    display:inline-flex; grid-column:3; justify-self:end;
  }
  .menu{ grid-column:1 / -1; margin-left:0; width:100%; }

  /* Összecsukva nem látszik. A `menu-osszecsukhato` osztályt a JS teszi föl —
     nélküle a menü végig látható marad, ahogy eddig. */
  .menu-osszecsukhato .menu[data-nyitva="nem"]{ display:none; }

  /* Kinyitva egymás alatt, kényelmesen üthető sorokban. Így a menü hossza
     már nem szorít: nem kell apró betű és szoros betűköz, mint korábban. */
  .menu ul{ flex-direction:column; align-items:stretch; gap:0; }
  .menu li{ border-top:1px solid var(--vonal); }
  .menu a{ display:block; font-size:13px; letter-spacing:.06em; padding:13px 2px; }

  .sv-nev{ font-size:23px; }
  .sv-kis{ font-size:7.5px; letter-spacing:1.136em; text-indent:1.136em; }
}

.lablec{
  max-width:calc(var(--oszlop) + var(--sav) + var(--t5) + 2*var(--bel));
  margin:0 auto var(--t5); width:calc(100% - 2*var(--bel));
  color:var(--ink-2);
}
.lablec .kiiras{ display:block; font-size:22px; color:var(--ink); }

/* A lábléc két hasáb: balra az elérhetőségek, jobbra a térkép. Ez az
   EGYETLEN blokk, ami minden lapon ott van — sok látogató keresőből
   egyenesen egy szolgáltatás-oldalra érkezik, és a főoldalig el sem jut.
   Levente kérése, 2026-09-03. A térkép itt kisebb, mint a főoldalon. */
.lablec{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,var(--sav));
  gap:var(--t4);
  /* STRETCH, nem start: a térkép töltse ki a sort. A bal hasáb 2026-09-03-án
     megnőtt (ügyfélszolgálati idő, cégadatok), és a fix magasságú térkép
     alatt üres sáv maradt — a lábléc féloldalasnak látszott. Így a térkép
     magától követi a szöveget, ha az később még nő. */
  align-items:stretch;
}
.lablec > * + *{ margin-top:0; }          /* a rácsban a margó fölösleges */
.lablec-szoveg > * + *{ margin-top:var(--t2); }
.lablec-terkep{
  border-radius:var(--sug); overflow:hidden; border:1px solid var(--vonal);
  display:flex;                      /* hogy az iframe kitölthesse */
}
.lablec-terkep iframe{
  display:block; width:100%; height:100%; min-height:200px; border:0;
}
@media (max-width: 700px){
  .lablec{ grid-template-columns:1fr; gap:var(--t3); }
  /* Egy hasábon a nyújtásnak nincs értelme; a min-height-ot is vissza kell
     venni, különben az felülírná ezt a magasságot. */
  .lablec-terkep iframe{ height:190px; min-height:0; }
}

/* ---------- 6/b. a naptár ---------------------------------------------- */
/* Az ajánlatkérő FÖLÖTT áll, minden lapon. Nincs külön menüpontja: a
   „ráérünk csütörtökön?” kérdés ott merül fel, ahol foglalni lehet.
   A Google beágyazása saját stílusú doboz — nem tudjuk belülről festeni,
   ezért kívülről kap keretet és sarkot, hogy a lap része legyen. */
.naptar{ margin-top:var(--t3); }
.naptar-fejlec{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:var(--t1) var(--t2); margin:0 0 var(--t2);
}
.naptar iframe{
  display:block; width:100%; height:470px; border:0;
  border:1px solid var(--vonal); border-radius:var(--sug);
  background:#fff;
}
@media (max-width: 700px){ .naptar iframe{ height:420px; } }

/* ---------- 7. az ajánlatdoboz ---------------------------------------- */

.ajanlo{ overflow:hidden; }
/* A falra festett lemez a hangkarral — a lap egyetlen igazi „logója”.
   Szó szerint az arculat-mintából (.bakelit-grafika). Egy lemez forog. */
.ajanlo::after{
  content:""; position:absolute; right:calc(-1 * var(--t2)); bottom:calc(-1 * var(--t2));
  width:118px; height:118px; opacity:.55; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%20%3Ccircle%20cx%3D%2742%27%20cy%3D%2756%27%20r%3D%2727%27%20fill%3D%27%23D24538%27%2F%3E%20%3Ccircle%20cx%3D%2742%27%20cy%3D%2756%27%20r%3D%2716%27%20fill%3D%27none%27%20stroke%3D%27%23B33B30%27%20stroke-width%3D%271.1%27%20opacity%3D%27.7%27%2F%3E%20%3Ccircle%20cx%3D%2742%27%20cy%3D%2756%27%20r%3D%275%27%20fill%3D%27%23EFE7DA%27%2F%3E%3Ccircle%20cx%3D%2742%27%20cy%3D%2756%27%20r%3D%271.8%27%20fill%3D%27%23101619%27%2F%3E%20%3Cpath%20d%3D%27M86%2017%20L52%2046%27%20stroke%3D%27%23101619%27%20stroke-width%3D%273.4%27%20stroke-linecap%3D%27round%27%2F%3E%20%3Ccircle%20cx%3D%2788%27%20cy%3D%2714%27%20r%3D%277.5%27%20fill%3D%27%23101619%27%2F%3E%20%3Ccircle%20cx%3D%2773%27%20cy%3D%2783%27%20r%3D%273.2%27%20fill%3D%27%23101619%27%2F%3E%3Ccircle%20cx%3D%2784%27%20cy%3D%2774%27%20r%3D%271.7%27%20fill%3D%27%23101619%27%2F%3E%20%3Ccircle%20cx%3D%2718%27%20cy%3D%2722%27%20r%3D%272.1%27%20fill%3D%27%23101619%27%2F%3E%20%3C%2Fsvg%3E");
  background-size:contain; background-repeat:no-repeat; background-position:center;
  animation:forog 34s linear infinite;
}
@keyframes forog{ to{ transform:rotate(360deg); } }

.ajanlo-cim{
  display:block; font-size:20px; color:var(--ink);
}
.ajanlo .ar{
  font-size:30px; font-weight:600; color:var(--osb); line-height:1.1;
}
/* A mértékegység EGYBEN marad. A „/ 90 perc" különben úgy tördelt, hogy a
   „90" fent maradt, a „perc" leesett — mintha elromlott volna a lap. */
.ar-egyseg{
  font-size:15px; color:var(--ink-3); font-weight:400;
  white-space:nowrap;
}
.ar-tol{ color:var(--ink-2); font-size:16px; }
/* A második hossz: ugyanaz a forma, mint a fő ár, csak halkabb és kisebb.
   A térköz és a vékony vonal a KÉT ÁR szétválasztására kell: 2 px-nél a
   „/ 90 perc" és a „vagy 12 000 Ft" egyetlen összefolyó blokknak látszott. */
.ar-masik{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric:tabular-nums;
  font-size:16px; color:var(--ink-3);
  margin-top:var(--t3); padding-top:var(--t2);
  border-top:1px solid var(--vonal);
}
.ar-masik .ar-egyseg{ font-size:13px; }
.ajanlo .gomb{ display:block; text-align:center; }
.ajanlo-tel{ font-size:15px; color:var(--ink-3); }

/* ---------- 8. a gomb és a linkek ------------------------------------- */

a{ color:var(--jel); }
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--jel); outline-offset:3px;
}

.gomb{
  display:inline-block; background:var(--bakelit-g); color:#fff;
  border:0; border-radius:var(--sug);
  padding:var(--t2) var(--t3);
  font-family:Archivo, sans-serif; font-size:17px; font-weight:600;
  cursor:pointer; text-decoration:none;
  transition:transform 200ms cubic-bezier(.34,1.4,.64,1), background 170ms ease;
}
.gomb:hover{ transform:rotate(-.6deg); }        /* max 4° — itt bőven alatta */
.gomb:focus-visible{ outline:3px solid var(--jel); outline-offset:3px; }
/* A halk gomb sosem piros: a piros a lapon egy dolgot jelent — „ezt nyomd meg”. */
.gomb-halk{
  background:transparent; color:var(--ink);
  border:1px solid var(--vonal-2);
}
.gomb-halk:hover{ background:rgba(146,172,180,.10); }

/* A bakelitpiros folt — SOSEM szöveg. */
.pont{ background:var(--bakelit); width:10px; height:10px; border-radius:50%; }

/* ---------- 9. az űrlap ----------------------------------------------- */

.ajanlat{ scroll-margin-top:var(--t6); }
.ajanlat form{ margin-top:var(--t3); }
.mezo + .mezo{ margin-top:var(--t2); }
/* A min-inline-size a fieldset miatt kell: alapból nem zsugorodik a
   tartalma alá, és keskeny kijelzőn a bérletrács kitolná az egész lapot. */
.mezo{ display:flex; flex-direction:column; gap:var(--t1); border:0; padding:0; margin:0;
  min-width:0; min-inline-size:0; }
.mezo > label, .mezo legend{
  font-family:Archivo, "Helvetica Neue", Arial, sans-serif;
  font-stretch:104%; font-weight:600;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); padding:0;
}
.mezo input, .mezo select, .mezo textarea{
  width:100%; font:inherit; font-size:17px; color:var(--ink);
  background:rgba(255,255,255,.75);
  border:1px solid var(--vonal-2); border-radius:var(--sug);
  padding:var(--t1) var(--t2);
}
.mezo textarea{ resize:vertical; }
/* A bejelölt négyzet jel-kék, nem piros: a piros a lapon két dolgot jelöl,
   a gombot és a lemezt. A „be van jelölve” a jel színe. */
.mezo input[type="checkbox"]{ width:auto; accent-color:var(--jel); }

/* A bérlet-kapcsoló egy sor, nem egy címke fölött lebegő négyzet. */
/* Dátum · ettől · eddig — egy sorban, mert egy döntés három része.
   Szűk kijelzőn a dátum teljes szélességű, alatta a két óra egymás mellett. */
.idosav{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--t2); }
.idosav > span{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.idosav label{ font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-2); }
.idosav input, .idosav select{ width:100%; }
.aprocska{ font-size:13px; margin-top:var(--t1); }
@media (max-width: 560px){
  .idosav{ grid-template-columns:1fr 1fr; }
  .idosav > span:first-child{ grid-column:1 / -1; }
}

/* Csak az űrlap beküldő gombja kap felső térközt — a .kuldes gombjai
   a sor gap-jéből és a .kesz > * + *-ból élnek. Ha ide is jutna --t3,
   18 + 28 = 46 px lenne, ami nincs a skálán, és tördeléskor vándorol. */
.ajanlat > form > .gomb{ margin-top:var(--t3); }

.kesz{
  margin-top:var(--t4); padding-top:var(--t3);
  border-top:1px solid var(--vonal-2);
}
.kesz > * + *{ margin-top:var(--t2); }
.uzenet-elonezet{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:14px; line-height:1.6; color:var(--ink-2);
  white-space:pre-wrap; word-break:break-word;
  background:rgba(20,37,43,.05);
  border:1px solid var(--vonal); border-radius:var(--sug);
  padding:var(--t2); margin:var(--t2) 0 0; overflow-x:auto;
}
.kuldes{ display:flex; flex-wrap:wrap; gap:var(--t1); }

/* ---------- 10. a főoldal --------------------------------------------- */

/* SZTENDERD NÉGY DOBOZ: minden sor egyforma magas, a tartalom nem
   nyújtja meg. A grid-auto-rows:1fr osztja el egyenlően a sormagasságot. */
.mod-racs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  grid-auto-rows:1fr; gap:var(--t2); }
.mod-kartya{ display:flex; flex-direction:column; gap:var(--t1);
  padding:var(--t3); border-radius:var(--sug); text-decoration:none;
  color:var(--ink); border-top:4px solid transparent;
  transition:transform 220ms cubic-bezier(.34,1.4,.64,1); }
.mod-kartya:hover{ transform:rotate(-.5deg); }
.mod-kartya:nth-child(even):hover{ transform:rotate(.5deg); }
.mod-kartya .kiiras{ font-size:19px; }
/* Az ikon a kártya AZONOSÍTÓ színét viseli — currentColor-on át, hogy a
   szín a termékkel maradjon, ha valaki átrendezi a sorrendet. */
.mod-ikon{ display:block; width:38px; height:38px; margin-bottom:var(--t2); flex:none; }
.sik-1 .mod-ikon{ color:var(--jel); }
.sik-2 .mod-ikon{ color:var(--osb); }
.sik-3 .mod-ikon{ color:var(--tabla-jel); }
.sik-4 .mod-ikon{ color:var(--turkiz-jel); }
/* A leírás a doboz aljára ül, így a négy kártya szövege egy vonalban van. */
.mod-kartya .halk{ margin-top:auto; }
/* Hány fő — a kártya bal felső sarkában, halkan. A látogató első kérdése
   nem az ár, hanem hogy egyáltalán rá vonatkozik-e. */
.mod-fo{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  margin-top:-4px; }

/* Térkép a Hol vagyunk alatt. 16:10, a lapszélességhez igazodva. */
.terkep{ margin-top:var(--t3); border-radius:var(--sug); overflow:hidden;
  border:1px solid rgba(146,172,180,.22); background:var(--tabla); }
.terkep iframe{ display:block; width:100%; height:320px; border:0; }
@media (max-width: 700px){ .terkep iframe{ height:240px; } }
/* A szín AZONOSÍTÓ, nem rangsor — átrendezéskor a termékkel marad. */
.sik-1{ background:rgba(51,154,153,.16); border-top-color:var(--marka); }
.sik-2{ background:rgba(201,167,126,.14); border-top-color:var(--osb); }
.sik-3{ background:rgba(146,172,180,.20); border-top-color:var(--tabla-vil); }
.sik-4{ background:rgba(143,200,197,.20); border-top-color:var(--turkiz-vil); }

.elonyok ul{
  list-style:none; margin:var(--t3) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:var(--t3);
}
.elonyok li{ display:flex; flex-direction:column; gap:var(--t1); }
.elonyok .kiiras{ font-size:17px; color:var(--osb); }

/* A hangulat-blokk: itt a szöveg viszi a lapot, ezért nagyobb és lazább.
   A meleg OSB-borostyán cím a „nappali” érzet egyetlen jelzése. */
.nappali h2{ color:var(--osb); }
.nappali p{ font-size:clamp(19px, 2vw, 22px); line-height:1.55; }

/* A közösség: a nevek a lap végén, halkan — referencia, nem hirdetés. */
.kozosseg p{ color:var(--ink-2); }
.nevsor{ color:var(--ink-2); font-size:16px; }
.nevsor a{ text-decoration:none; }
.nevsor a:hover{ text-decoration:underline; }

/* ---------- 11. felszerelés ------------------------------------------- */

.csoport h2 .szam{
  font-family:Archivo, sans-serif; font-stretch:118%; font-weight:800;
  font-size:1.5em; color:var(--tabla-vil); opacity:.85; letter-spacing:0;
  transform:rotate(-4deg); display:inline-block; margin-right:var(--t1);
}
.kat-racs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:var(--t2); }
.kat-doboz{
  display:flex; flex-direction:column; gap:var(--t1);
  padding:var(--t2); border-radius:var(--sug);
  background:rgba(255,255,255,.70); border:1px solid var(--vonal);
  color:var(--ink); text-decoration:none;
  transition:transform 220ms cubic-bezier(.34,1.4,.64,1), border-color 170ms ease;
}
.kat-doboz:hover{ transform:rotate(-.5deg); border-color:var(--tabla-vil); }
.kat-doboz img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--sug); }
.kat-doboz .kiiras{ font-size:17px; }

.nagykep{ margin:0; }
.nagykep img{ width:100%; border-radius:var(--sug); border:1px solid var(--vonal); }

.vissza{ font-size:15px; }
.vissza a{ text-decoration:none; }
.vissza a:hover{ text-decoration:underline; }

.tovabb .tetellista{ margin-top:var(--t2); }

/* Lista-pont: egy megbillentett billentyű, nem golyó. */
/* A `margin:0` korábban ELNYELTE a .panel > * + * térközét, így a lista
   nekiszaladt a fölötte álló vezető mondatnak. A --t3 elválasztja őket,
   a sorok közti --t2-nél nagyobb léptékkel — így látszik, hol kezdődik. */
.tetellista{ list-style:none; margin:var(--t3) 0 0; padding:0; }
.tetellista li{ position:relative; padding-left:var(--t3); }
/* A sorok közti tér: a tulajdonos kérésére --t1-ről --t2-re. A tételek
   önálló mondatok, nem egy folyó bekezdés sorai — kell közéjük levegő. */
.tetellista li + li{ margin-top:var(--t2); }
.tetellista li{ line-height:1.55; }
.tetellista li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:11px; height:11px; border-radius:1px;
  background:var(--tabla-vil); transform:rotate(-3deg);
}
.tetellista li:nth-child(even)::before{ background:var(--osb); transform:rotate(2.5deg); }
.tetellista li:nth-child(3n)::before{ background:var(--jel); }

/* ---------- 12. az ártábla -------------------------------------------- */

.artabla{ width:100%; border-collapse:collapse; }
.artabla th{
  text-align:left; font-family:"Source Serif 4", Georgia, serif;
  font-weight:400; color:var(--ink-2); padding:var(--t1) 0;
  border-bottom:1px solid var(--vonal);
}
.artabla td{
  text-align:right; white-space:nowrap; color:var(--ink);
  padding:var(--t1) 0 var(--t1) var(--t2);
  border-bottom:1px solid var(--vonal);
}
.artabla .kiemelt th, .artabla .kiemelt td{
  color:var(--osb); font-weight:600;
  border-bottom:2px solid var(--osb);
}

/* ---------- 13. segédosztályok ---------------------------------------- */

.rejtett{ display:none !important; }

/* ---------- 14. mozgáscsökkentés -------------------------------------- */
/* Csak a háttér és a lemez mozog, és csak alig. Kérésre minden megáll. */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hatter .kep{ animation:none; transition:none; }
  *{ animation:none !important; transition:none !important; }
}