/* ============================================================
   FARMER HORGÁSZTÓ — stíluslap
   Betűk:  Oswald (címek, menü, gombok, árak) · Roboto (folyószöveg)
   Színek: #4e5b3f mélyzöld · #f1eae2 krém · #c2a44b arany

   1) Tokenek  2) Alapok  3) Fejléc  4) Gombok  5) Főoldali hero
   6) Aloldali hero  7) Szekciócímek  8) Jegykártyák  9) Panelek
   10) Árlista  11) Ikonsáv  12) Szolgáltatáskártyák  13) Kétosztatú
   14) Pipás lista  15) CTA sáv  16) Galéria  17) Jogi szövegek
   18) Lábléc  19) Animáció  20) Reszponzív
   Atmoszféra: 2b) légtér-réteg  9b) vízszint-szekciók
   14c) fotósáv  22) szintvonal-motívum  24) kapcsolati űrlap
   ============================================================ */

/* --- 1. Tokenek ------------------------------------------- */
:root{
  /* A márka sötétzöldje. A -2 és a -3 ugyanennek egy-egy fokkal
     világosabb lépcsője (kártyaalap, illetve hover) — a ramp azért
     halad fölfelé, mert a sötét felületen a kiemelés világosodik. */
  --dark:#4e5b3f;          /* fejléc, lábléc, sötét panelek */
  --dark-2:#566745;        /* sötét kártyaalap */
  --dark-3:#5a6b48;        /* hover */
  --cream:#f1eae2;         /* oldal háttér */
  --paper:#f8f4ec;         /* világos kártya */
  --sand:#e6dfd0;          /* tónusos panel */
  --gold:#c2a44b;
  --gold-l:#d8c07c;

  /* Atmoszféra. A tó fotóin a hajnali köd hűvös, zöldes-szürke – ez a
     --haze; a --deep a vízoszlop alja, egy fokkal a --dark alatt. */
  --haze:#e0e2d7;         /* párás, hűvös sáv (a meleg --sand párja) */
  --deep:#3f4a33;         /* legmélyebb sáv */
  --ink:#26301f;
  --ink-soft:#515b48;
  /* A vonalak a --dark áttetsző változatai. Az alfa azért nagyobb, mint
     korábban (.17/.3 helyett .22/.38), mert a világosabb alapszín
     ugyanannyi átlátszósággal halványabb vonalat adna — így a keretek
     súlya marad a régi. */
  --line:rgba(78,91,63,.22);
  --line-2:rgba(78,91,63,.38);

  --disp:"Oswald","Arial Narrow",Arial,sans-serif;
  --body:"Roboto","Helvetica Neue",Arial,sans-serif;

  --wrap:1280px;
  --pad:clamp(16px,3.4vw,40px);
  --hdr-h:108px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* papírszemcse – egy helyen definiálva, több rétegben újrahasználva */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.05'/></svg>");
}

/* --- 2. Alapok -------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}

body{
  margin:0;
  /* a fejléc fix, ezért állandó helyet tartunk neki — így az
     összezárás nem mozgatja meg az oldal tartalmát (nincs ugrálás) */
  padding-top:var(--hdr-h);
  background-color:var(--cream);
  /* --- 2b. Légtér-réteg ------------------------------------------
     Nem egyetlen lapos krém: két nagy, lágy páraudvar + egy függőleges
     tónus + a szemcse. A páraudvarok a nézethez vannak szögezve, ezért
     nem görögnek a tartalommal — így az az érzés, hogy lefelé haladunk
     a vízoszlopban, nem pedig végig egy papírlapon. */
  background-image:
    radial-gradient(115% 68% at 76% -10%,rgba(250,247,241,.92) 0%,rgba(250,247,241,0) 60%),
    radial-gradient(88% 62% at 6% 46%,rgba(178,192,166,.34) 0%,rgba(178,192,166,0) 66%),
    linear-gradient(to bottom,rgba(214,216,203,0) 34%,rgba(178,190,168,.3) 100%),
    var(--grain);
  background-attachment:fixed,fixed,fixed,scroll;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  color:var(--ink);
  font-family:var(--body);font-size:16px;font-weight:400;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
strong{font-weight:700}

h1,h2,h3,h4,.disp{
  font-family:var(--disp);font-weight:600;line-height:1.1;
  text-transform:uppercase;letter-spacing:.01em;
}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrap--n{max-width:900px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:var(--gold);color:var(--dark)}
.skip:focus{left:12px;top:12px}
::selection{background:var(--gold);color:var(--dark)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.sec{padding:clamp(48px,6.5vw,92px) 0;position:relative}
.sec--tight{padding:clamp(34px,4vw,54px) 0}
.sec--sand{
  background-color:var(--sand);
  background-image:var(--grain);
  border-top:1px solid rgba(194,164,75,.4);
  border-bottom:1px solid rgba(194,164,75,.4);
}
.sec--paper{background:var(--paper)}
.sec--dark{background:var(--dark);color:var(--cream)}

/* --- 9b. Vízszint-szekciók ---------------------------------------
   A tó fotói mindig két sávra válnak: megvilágított felszín fölött,
   leülő mélység alatt. A szekciók ugyanígy találkoznak — felső
   peremük fénylik, az aljuk beárnyékolódik, nem éles vonallal. */
.sec--haze{
  background-color:var(--haze);
  background-image:
    linear-gradient(to bottom,rgba(252,250,245,.62) 0%,rgba(252,250,245,0) 24%),
    linear-gradient(to top,rgba(78,91,63,.09) 0%,rgba(78,91,63,0) 20%),
    var(--grain);
  border-top:1px solid rgba(194,164,75,.34);
  border-bottom:1px solid rgba(194,164,75,.34);
}

.sec--deep{
  position:relative;overflow:hidden;
  background-color:var(--deep);color:var(--cream);
  background-image:
    linear-gradient(to bottom,rgba(215,226,205,.16) 0%,rgba(215,226,205,0) 30%),
    linear-gradient(to top,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 42%);
  border-top:1px solid rgba(194,164,75,.34);
  border-bottom:1px solid rgba(194,164,75,.34);
}
.sec--deep>.wrap{position:relative;z-index:1}
.sec--deep .lead{color:rgba(241,234,226,.82)}

/* a paneles/adatsávos elemek sötét mezőben */
.sec--deep .specs,.sec--deep .feats{
  background:transparent;border-color:rgba(241,234,226,.2);
}
.sec--deep .specs li,.sec--deep .feats li{border-left-color:rgba(241,234,226,.2)}
.sec--deep .specs b,.sec--deep .feats span,.sec--deep .feats .ico{color:var(--cream)}
.sec--deep .specs span{color:rgba(241,234,226,.62)}

.ico{width:36px;height:36px;flex:0 0 auto;color:currentColor}
.lead{font-size:1.08rem;color:var(--ink-soft);line-height:1.8}
.center{text-align:center}
.mx{margin-left:auto;margin-right:auto}

/* --- 3. Fejléc -------------------------------------------- */
/* FIX pozíció: a body padding-top tartja a helyet. Ha a fejléc sticky
   lenne, az összezáráskor változó magasság elmozdítaná a tartalmat,
   ami újabb görgetési eseményt szülne — innen jött az ugrálás. */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:var(--dark);
  border-bottom:1px solid rgba(241,234,226,.1);
  transition:box-shadow .5s var(--ease);
}
.hdr.is-stuck{box-shadow:0 14px 34px -20px rgba(0,0,0,.75)}

/* Lefelé görgetve a fejléc összezár, felfelé görgetve visszanyílik. */
.hdr__in,.logo__fish,.logo__n,.logo__s{
  transition:min-height .45s var(--ease),width .45s var(--ease),
             font-size .45s var(--ease),opacity .35s var(--ease),
             margin .45s var(--ease),padding .45s var(--ease);
}
.hdr.is-compact .hdr__in{min-height:68px}
.hdr.is-compact .logo__fish{width:40px}
.hdr.is-compact .logo__n{font-size:1.24rem}
/* Összezárt fejlécben a „HORGÁSZTÓ" korábban eltűnt (font-size:0,
   opacity:0), és lefelé görgetve csak a „FARMER" maradt. A logó
   viszont a két sor EGYÜTT — ezért összezárva is látszik, csak egy
   fokkal kisebben, hogy a 68 px-es fejlécbe elférjen. */
.hdr.is-compact .logo__s{font-size:.62rem;letter-spacing:.26em;margin-top:2px}

/* a logó a bal sarokban áll, a menü jobbra tömörödik */
.hdr__in{
  display:flex;align-items:center;gap:clamp(20px,3vw,60px);
  max-width:none;margin:0;
  padding:0 clamp(12px,1.6vw,26px) 0 6px;
  min-height:var(--hdr-h);
}

.logo{display:flex;align-items:center;gap:10px;color:var(--cream);flex:0 0 auto;padding:10px 0}
.logo__fish{width:58px;height:auto;margin-left:-4px;color:var(--cream);transition:transform .5s var(--ease)}
.logo:hover .logo__fish{transform:translateX(-3px)}
.logo__t{display:block;line-height:1}
.logo__n{
  display:block;font-family:var(--disp);font-weight:700;font-size:1.62rem;
  letter-spacing:.05em;text-transform:uppercase;
}
.logo__s{
  display:flex;align-items:center;gap:7px;justify-content:center;
  font-family:var(--disp);font-weight:400;font-size:.7rem;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(241,234,226,.8);
  margin-top:3px;
}
.logo__s::before,.logo__s::after{content:"";flex:1 1 auto;height:1px;background:rgba(241,234,226,.45)}

/* a menü a maradék szélességet kitölti, de a linkek a jobb szélhez
   igazodnak — nem szóródnak szét a teljes fejlécen */
.nav{display:flex;align-items:center;flex:1 1 auto;justify-content:flex-end;gap:clamp(20px,1.9vw,40px)}
.nav ul{
  display:flex;align-items:center;
  flex:0 1 auto;justify-content:flex-end;
  gap:clamp(20px,1.9vw,40px);
}
.nav a{
  display:block;position:relative;padding:8px 2px;
  font-family:var(--disp);font-weight:400;font-size:.88rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav a:hover{color:var(--gold-l)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--gold)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

.burger{display:none;width:46px;height:38px;position:relative;margin-left:auto;flex:0 0 auto}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--cream);transition:transform .4s var(--ease),opacity .25s}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:18px}
.burger span:nth-child(3){top:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --- 4. Gombok -------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:13px 26px;
  font-family:var(--disp);font-weight:500;font-size:.83rem;
  letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid var(--dark);color:var(--dark);background:transparent;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{background:var(--dark);color:var(--cream)}
.btn__a{width:17px;height:9px;flex:0 0 auto;transition:transform .35s var(--ease)}
.btn:hover .btn__a{transform:translateX(4px)}

.btn--dark{background:var(--dark);color:var(--cream)}
.btn--dark:hover{background:var(--dark-3);border-color:var(--dark-3)}
.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--dark)}
.btn--gold:hover{background:var(--gold-l);border-color:var(--gold-l);color:var(--dark)}
.btn--ghost{border-color:rgba(241,234,226,.65);color:var(--cream)}
.btn--ghost:hover{background:var(--cream);color:var(--dark);border-color:var(--cream)}
.btn--wide{width:100%}

/* --- 5. Főoldali hero ------------------------------------- */
.hero{
  position:relative;min-height:calc(100vh - var(--hdr-h));
  display:flex;align-items:flex-end;overflow:hidden;background:var(--dark);
}
@supports (min-height:100svh){.hero{min-height:calc(100svh - var(--hdr-h))}}

.hero__img{position:absolute;inset:0}
/* Egyenletes vágás: felül és alul is egy kicsit veszünk el, így a fák
   teteje és a vízfelület is bent marad. Nincs nagyítás. */
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(14,20,11,.82) 0%,rgba(14,20,11,.52) 34%,rgba(14,20,11,.1) 66%,rgba(14,20,11,0) 88%),
    linear-gradient(to top,rgba(14,20,11,.6) 0%,rgba(14,20,11,0) 46%);
}
/* A hero alján KORÁBBAN egy krém színű átmenet olvasztotta a fotót a lap
   hátterébe. Ez a fátyol a víz rajzán tejes, ködös csíknak látszott, és
   a kép alsó ~100 képpontját elvette — ezért nem is ért le a fotó a
   képernyő aljáig. A sáv törölve: a fénykép éles széllel, teljes
   magasságban záródik. A szövegek olvashatóságáról továbbra is a
   .hero__scrim sötét gradiense gondoskodik, az változatlan. */
.hero__in{
  position:relative;z-index:3;width:100%;
  padding:clamp(40px,7vh,90px) var(--pad) clamp(52px,10vh,120px) clamp(22px,2.8vw,52px);
  max-width:none;margin:0;
}
.hero__t{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(3rem,9.6vw,8.4rem);line-height:1.04;
  letter-spacing:.005em;color:var(--cream);
  margin-left:-.045em;   /* Oswald bal oldali üres sávjának optikai kiegyenlítése */
  text-shadow:0 4px 30px rgba(10,14,8,.5);
}
.hero__t span{display:block}
.hero__rule{width:84px;height:3px;background:var(--gold);margin:clamp(20px,2.6vw,32px) 0 clamp(14px,1.8vw,20px)}
.hero__sub{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(.82rem,1.6vw,1.1rem);letter-spacing:.19em;text-transform:uppercase;
  color:var(--cream);text-shadow:0 2px 16px rgba(10,14,8,.55);
}
.hero__sub b{font-weight:400;color:var(--gold-l);padding:0 .3em}
.hero__btns{display:flex;flex-wrap:wrap;gap:13px;margin-top:clamp(24px,3.2vw,40px)}

/* --- 6. Aloldali hero ------------------------------------- */
.phero{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(340px,44vw,560px);
  overflow:hidden;background:var(--dark);text-align:center;
}
.phero__img{position:absolute;inset:0}
.phero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.phero::after{
  content:"";position:absolute;inset:0;
  /* A krémfátyol itt is elmarad (lásd az 5. szakasz megjegyzését), csak
     a szöveg olvashatóságát adó sötét gradiens marad. */
  background:
    linear-gradient(to bottom,rgba(14,20,11,.52),rgba(14,20,11,.28) 45%,rgba(14,20,11,.62));
}
.pagehero,.phero__pad{padding-top:0}
.phero__in{position:relative;z-index:1;padding:clamp(56px,7vw,86px) var(--pad)}
.phero__t{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(2.1rem,7.4vw,5.6rem);line-height:1;
  letter-spacing:.008em;color:var(--cream);
  text-shadow:0 4px 28px rgba(10,14,8,.55);
}
.phero__sub{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(.86rem,2vw,1.32rem);letter-spacing:.13em;text-transform:uppercase;
  color:var(--cream);margin-top:.7em;text-shadow:0 2px 16px rgba(10,14,8,.6);
}
.phero__rule{width:76px;height:2px;background:var(--gold);margin:clamp(16px,2vw,24px) auto 0}

/* --- 7. Szekciócímek ------------------------------------- */
.shead{
  display:flex;align-items:center;justify-content:center;gap:22px;
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.3rem,3vw,2.1rem);letter-spacing:.04em;text-transform:uppercase;
  color:var(--dark);margin-bottom:clamp(26px,3.4vw,44px);text-align:center;
}
.shead::before,.shead::after{content:"";width:clamp(24px,7vw,90px);height:1.5px;background:var(--line-2);flex:0 0 auto}
.sec--dark .shead,.sec--deep .shead,
.sec--dark .shead2,.sec--deep .shead2{color:var(--cream)}
.sec--dark .shead::before,.sec--dark .shead::after,
.sec--deep .shead::before,.sec--deep .shead::after{background:rgba(241,234,226,.35)}

.shead2{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.3rem,3vw,2.05rem);letter-spacing:.04em;text-transform:uppercase;
  color:var(--dark);text-align:center;
}
.shead2--l{text-align:left}
.uline{width:66px;height:3px;background:var(--gold);margin:14px auto 0}
.shead2--l+.uline{margin-left:0}

/* --- 8. Jegykártyák -------------------------------------- */
.tickets{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.2vw,18px);align-items:stretch}
.ticket{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--paper)}
.ticket__ico{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,2.4vw,30px) 12px;color:var(--dark);
}
.ticket__ico .ico{width:clamp(42px,4.6vw,62px);height:clamp(42px,4.6vw,62px)}
/* PNG vektorgrafikus jegyikonok (Árak oldal) */
.tico{width:clamp(78px,9vw,124px);height:auto;margin:0 auto}
.ticket__b{
  background:var(--dark-2);color:var(--cream);
  padding:16px 14px 20px;text-align:center;
  display:flex;flex-direction:column;flex:1 1 auto;
}
.ticket__n{font-family:var(--disp);font-weight:500;font-size:.98rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
.ticket__d{
  font-family:var(--disp);font-weight:300;font-size:.76rem;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(241,234,226,.82);margin-top:.5em;line-height:1.4;
}
.ticket__b hr{width:26px;height:1.5px;background:var(--gold);border:0;margin:14px auto}
.ticket__p{
  font-family:var(--disp);font-weight:600;font-size:clamp(1.15rem,2vw,1.5rem);
  letter-spacing:0;margin-top:auto;
}
.ticket__p em{font-style:normal;font-weight:300;font-size:.72em}

/* --- 9. Panelek ------------------------------------------ */
.panel{background:var(--sand);padding:clamp(22px,3vw,38px)}
.panel--paper{background:var(--paper);border:1px solid var(--line)}
.panel--dark{background:var(--dark);color:var(--cream)}
.panel--dark .shead2{color:var(--cream)}

.pfish{
  display:grid;grid-template-columns:auto auto 1fr;gap:clamp(18px,3vw,42px);align-items:center;
}
.pfish__ico{color:var(--dark)}
.pfish__ico .ico{width:clamp(56px,6vw,84px);height:clamp(56px,6vw,84px)}
.pfish__t{font-family:var(--disp);font-weight:600;font-size:clamp(1.4rem,2.8vw,2.1rem);letter-spacing:.03em;text-transform:uppercase;color:var(--dark)}
.pfish__p{font-family:var(--disp);font-weight:600;font-size:clamp(1.4rem,2.8vw,2.1rem);color:var(--dark);margin-top:.1em}
.pfish__p em{font-style:normal;font-weight:300;font-size:.68em}
.pfish__list{display:grid;grid-template-columns:1fr 1fr;gap:9px 26px}

.checks{display:grid;gap:10px}
.checks li{display:flex;gap:12px;align-items:flex-start;line-height:1.6}
.checks .ico{width:20px;height:20px;margin-top:4px;color:var(--dark)}
/* Hosszú felsorolás több hasábban: egy hasábban a tizenkét tétel
   aránytalanul megnyújtaná a szakaszt. */
.checks--cols{grid-template-columns:repeat(3,1fr);gap:14px clamp(20px,3vw,44px)}
@media (max-width:900px){.checks--cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.checks--cols{grid-template-columns:1fr}}
.panel--dark .checks .ico,.sec--dark .checks .ico,
.sec--deep .checks .ico{color:var(--gold)}

/* --- 10. Árlista (pontozott) ----------------------------- */
.plist{display:grid;gap:4px}
.plist li{display:flex;align-items:baseline;gap:10px}
.plist .ico{width:22px;height:22px;color:var(--dark);align-self:center}
.plist__n{white-space:nowrap}
.plist__dots{flex:1 1 auto;border-bottom:1.5px dotted var(--line-2);transform:translateY(-4px)}
.plist__v{font-family:var(--disp);font-weight:500;white-space:nowrap;letter-spacing:.01em}

.bigprice{display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);justify-content:center}
.bigprice .ico{width:clamp(48px,5vw,68px);height:clamp(48px,5vw,68px);color:var(--dark)}
.bigprice__v{font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,3.2vw,2.3rem);color:var(--dark)}
.bigprice__v em{font-style:normal;font-weight:300;font-size:.66em}

/* --- 10b. Árpanel (nagy ár + magyarázat) ------------------ */
.pricepanel{
  display:grid;grid-template-columns:1fr 1px 1fr;
  gap:clamp(20px,4vw,58px);align-items:center;
}
.pricepanel__div{background:var(--line);align-self:stretch;min-height:90px}
.pricepanel__label{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.1rem,2.2vw,1.55rem);letter-spacing:.04em;
  text-transform:uppercase;color:var(--dark);
}
.pricepanel__when{font-size:.95rem;color:var(--ink-soft);margin-top:.25em}
.pricepanel__v{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.05;
  color:var(--dark);margin-top:.35em;
}
.pricepanel__v em{font-style:normal;font-weight:300;font-size:.46em}
.pricepanel__note{font-size:.97rem;color:var(--ink-soft);line-height:1.75}
.pricepanel__note strong{color:var(--dark)}
@media (max-width:820px){
  .pricepanel{grid-template-columns:1fr;text-align:center}
  .pricepanel__div{width:100%;height:1px;min-height:0}
}

/* --- 11. Ikonsáv ---------------------------------------- */
.feats{
  display:grid;grid-template-columns:repeat(var(--n,5),1fr);
  background:var(--paper);border:1px solid var(--line);
}
.feats li{
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  padding:clamp(20px,2.6vw,32px) clamp(8px,1.4vw,18px);
  border-left:1px solid var(--line);
}
.feats li:first-child{border-left:0}
.feats .ico{width:clamp(34px,3.6vw,46px);height:clamp(34px,3.6vw,46px);color:var(--dark)}
.feats span{
  font-family:var(--disp);font-weight:500;font-size:.85rem;
  letter-spacing:.05em;text-transform:uppercase;line-height:1.35;color:var(--dark);
}
.feats--bare{background:transparent;border:0}
.feats--bare li{border-left:1px solid var(--line)}
.feats--bare li:first-child{border-left:0}

/* --- 11c. Eseménykártyák (céges rendezvények) --------------
   Nem a .feats sávot használjuk: nyolc elemnél az összefüggő,
   keretes rács üres táblázatnak látszott. Külön kártyák, közöttük
   réssel; a kártya tetején arany hajszálvonal fut ki rámutatásra,
   ugyanaz a mozdulat, mint a menü aláhúzásánál. */
.evcards{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,18px);
}
.evcards li{
  position:relative;background:var(--paper);border:1px solid var(--line);
  padding:clamp(24px,2.8vw,36px) clamp(14px,1.6vw,22px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px,1.4vw,18px);text-align:center;
  transition:border-color .35s var(--ease),transform .35s var(--ease),
             background-color .35s var(--ease);
}
.evcards li::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--gold);transform:scaleX(0);
  transition:transform .4s var(--ease);
}
.evcards li:hover{border-color:var(--line-2);background:#fbf8f2;transform:translateY(-3px)}
.evcards li:hover::before{transform:scaleX(1)}
.evcards .ico{width:clamp(40px,4vw,52px);height:clamp(40px,4vw,52px);color:var(--dark)}
.evcards span{
  font-family:var(--disp);font-weight:500;font-size:.86rem;
  letter-spacing:.05em;text-transform:uppercase;line-height:1.4;color:var(--dark);
}
@media (max-width:900px){.evcards{grid-template-columns:repeat(2,1fr)}}
/* Telefonon is kettő egy sorban, négyzetes csempékkel. Az aspect-ratio
   csak a kívánt méretet adja: ahol a hosszabb felirat nem fér el, ott a
   csempe megnő, és a sor minden eleme vele együtt — így a rács nem
   csúszik szét, de a szöveg sem vágódik le. */
@media (max-width:640px){
  .evcards{gap:10px}
  .evcards li{aspect-ratio:1;padding:16px 12px;gap:10px}
  .evcards .ico{width:36px;height:36px}
  .evcards span{font-size:.78rem;letter-spacing:.03em}
}

/* --- 11d. Számozott lépések --------------------------------
   Az ajánlatkéréshez szükséges adatok sora. Nem pipás lista: itt a
   sorrend maga az információ, ezért számozott kártyák, arany körben
   álló sorszámmal. */
.steps{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.2vw,18px);
  /* a 2. szakasz csak az <ul>-t reseteli; ez <ol>, ezért a böngésző
     40 px-es bal behúzása külön kioltandó, különben jobbra csúszik */
  margin:0;padding:0;list-style:none;
}
.steps li{
  position:relative;background:var(--paper);border:1px solid var(--line);
  padding:clamp(26px,3vw,38px) clamp(12px,1.4vw,20px);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:clamp(12px,1.4vw,18px);text-align:center;
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.steps li:hover{border-color:var(--line-2);transform:translateY(-3px)}
.steps__n{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:clamp(42px,3.8vw,54px);height:clamp(42px,3.8vw,54px);
  border:2px solid var(--gold);border-radius:50%;
  font-family:var(--disp);font-weight:600;line-height:1;
  font-size:clamp(1.1rem,1.9vw,1.5rem);color:var(--dark);
}
.steps p{
  font-family:var(--disp);font-weight:400;font-size:clamp(.9rem,1.05vw,1.02rem);
  letter-spacing:.04em;text-transform:uppercase;line-height:1.45;color:var(--dark);
}
@media (max-width:1000px){.steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:400px){.steps{grid-template-columns:1fr}}

/* --- 11d. Elérhetőség-sáv mélyzöld mezőn -------------------
   A kapcsolat oldal sávja. A zöld mező maga adja a hangsúlyt,
   ezért nincs benne ikon: csak a felirat és az érték, a mezőben
   középen. A nyitvatartás két sorban áll, a másik két érték
   egyben — hogy a feliratok mégis egy vonalban maradjanak, minden
   érték ugyanannyi helyet kap, és abban van középre igazítva. */
.feats--dark{--n:4;background:var(--dark);border-color:rgba(241,234,226,.2)}
.feats--dark li{
  gap:9px;justify-content:center;
  padding:clamp(18px,2vw,26px) clamp(10px,1.4vw,20px);
  border-left-color:rgba(241,234,226,.2);
}
.feats--dark li > :last-child{
  display:flex;align-items:center;justify-content:center;
  min-height:3.1rem;text-align:center;
}
.feats--dark span{color:var(--cream)}
.feats--dark a{color:var(--cream)}
.feats--dark a:hover{color:var(--gold-l)}

/* --- 11b. Adatsáv (ikon nélkül, érték + felirat) ---------- */
.specs{
  display:grid;grid-template-columns:repeat(var(--n,5),1fr);
  background:var(--paper);border:1px solid var(--line);
}
.specs li{
  padding:clamp(22px,2.6vw,34px) clamp(10px,1.4vw,20px);
  text-align:center;border-left:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;gap:.45em;
}
.specs li:first-child{border-left:0}
.specs b{
  display:block;font-family:var(--disp);font-weight:600;
  font-size:clamp(1.1rem,1.9vw,1.5rem);letter-spacing:.02em;
  text-transform:uppercase;color:var(--dark);line-height:1.15;
}
.specs b em{font-style:normal;color:inherit}
.specs span{
  font-size:.78rem;letter-spacing:.06em;color:var(--ink-soft);line-height:1.45;
}
@media (max-width:900px){
  .specs{grid-template-columns:repeat(3,1fr)}
  .specs li:nth-child(3n+1){border-left:0}
  .specs li:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:600px){
  .specs{grid-template-columns:repeat(2,1fr)}
  .specs li:nth-child(3n+1){border-left:1px solid var(--line)}
  .specs li:nth-child(2n+1){border-left:0}
  .specs li:nth-child(n+3){border-top:1px solid var(--line)}
}

/* --- 12. Szolgáltatáskártyák ---------------------------- */
.scards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.scard{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.scard:hover{transform:translateY(-5px);box-shadow:0 26px 50px -34px rgba(26,36,22,.6)}
.scard__fig{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--dark-2)}
.scard__fig img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.scard:hover .scard__fig img{transform:scale(1.05)}
.scard__b{padding:clamp(22px,2.4vw,30px) clamp(18px,2.2vw,28px) clamp(20px,2.4vw,28px);text-align:center;display:flex;flex-direction:column;justify-content:center;flex:1 1 auto}
.scard__t{font-family:var(--disp);font-weight:600;font-size:1.2rem;letter-spacing:.04em;text-transform:uppercase;color:var(--dark)}
.scard__b .uline{margin:11px auto 15px}
.scard__b p{color:var(--ink-soft);font-size:.96rem;line-height:1.65;margin-bottom:1.5em}
.scard__b p:last-child{margin-bottom:0}
.scard__b .btn{margin-top:auto;align-self:center}

/* --- 13. Kétosztatú kártya ------------------------------ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px)}
.scard2{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border:1px solid var(--line)}
/* A kép abszolút pozícióban tölti ki a helyét, tehát nem határozza meg a
   kártya magasságát — azt a szöveg és a min-height adja. (Enélkül egy álló
   fotó a saját képarányával nyújtotta meg a kártyát, és a szöveg alatt nagy
   üres folt maradt.) */
.scard2__fig{margin:0;position:relative;overflow:hidden;background:var(--dark-2);min-height:260px}
.scard2__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scard2__b{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;justify-content:center}
.scard2__h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.scard2__h h3{font-size:1.24rem;letter-spacing:.04em;color:var(--dark)}
/* A kártyacím mellé kerülő ikon a címmel együtt nő, és a cím színét veszi fel. */
.scard2__h .ico{width:clamp(26px,2.4vw,34px);height:clamp(26px,2.4vw,34px);color:var(--dark)}
/* Cím a fotón. Telefonon a kártya egy hasábra esik, és a balra zárt cím
   külön állt a középre zárt szövegtől — a képre ültetve a kettő nem
   versenyez egymással. A kép alján sötét fátyol adja az olvashatóságot. */
.scard2--overlay .scard2__fig{display:flex;align-items:flex-end}
.scard2--overlay .scard2__fig::after{
  content:"";position:absolute;inset:auto 0 0;height:62%;
  background:linear-gradient(to top,rgba(14,20,11,.8),rgba(14,20,11,0));
  pointer-events:none;
}
.scard2--overlay .scard2__h{
  position:relative;z-index:1;width:100%;margin:0;
  padding:clamp(16px,2.4vw,26px);
}
.scard2--overlay .scard2__h h3{color:var(--cream);text-shadow:0 2px 14px rgba(10,14,8,.6)}
/* A kép alatti szöveg sorkizárt. Az elválasztás bekapcsolva: sorkizárt
   szedésnél a hosszú magyar szavak enélkül nagy szóközlyukakat nyitnának,
   főleg a keskeny telefonos hasábban. A lap nyelve hu, ebből tudja a
   böngésző, melyik elválasztási szabályt használja. A szabály erősebb,
   mint a 24d szakasz „mindent középre" beállítása, ezért telefonon is él. */
.scard2--overlay .scard2__b p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.scard2__b p{font-size:.95rem;color:var(--ink-soft);line-height:1.65}
.scard2__b hr{width:100%;height:1px;background:var(--line);border:0;margin:15px 0}
/* Az ár korábban mélyzöld sávban állt: a szám beleolvadt a sötét
   talpba. Világos sávon, arany vonallal a tetején sokkal előbb
   megtalálja a szem, és a mértékegység is olvasható marad. */
.scard2__price{
  margin-top:auto;
  background:var(--sand);border-top:2px solid var(--gold);
  color:var(--dark);
  font-family:var(--disp);font-weight:600;font-size:1.42rem;
  letter-spacing:.01em;
  padding:15px 18px;text-align:center;
}
.scard2__price em{font-style:normal;font-weight:400;font-size:.66em;color:var(--ink-soft)}

/* --- 13b. Kétosztatú kártya teljes szélességben --------------------
   Félszélességben (két kártya egymás mellett) a fotó és a szöveg is
   szűk volt. Egymás alatt, teljes szélességben mindkettő megkapja a
   helyét; a második kártyán a fotó átkerül a jobb oldalra, hogy ne
   két egyforma sáv legyen. */
.split--stack{grid-template-columns:1fr;gap:clamp(18px,2.2vw,32px)}
.split--stack .scard2{grid-template-columns:1.06fr 1fr}
.split--stack .scard2__fig{min-height:clamp(300px,33vw,440px)}
.split--stack .scard2__b{padding:clamp(26px,3.2vw,48px)}
.split--stack .scard2__h{margin-bottom:18px}
/* a fotóra ültetett cím a kép aljához simul, nem kér alsó térközt */
.split--stack .scard2--overlay .scard2__h{margin-bottom:0}
.split--stack .scard2__h h3{font-size:clamp(1.45rem,2.5vw,2.1rem)}
.split--stack .scard2__b p{font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.72}
.split--stack .scard2__b hr{margin:19px 0}
.split--stack .scard2__price{font-size:clamp(1.5rem,2.4vw,2.05rem);padding:18px}
.split--stack .scard2:nth-child(even) .scard2__fig{order:2}

/* --- 13c. Kép + szöveg kétosztatú blokk -----------------------
   Korábban a fotó a saját képarányával nőtt meg (a 'height:100%'
   automatikus magasságú szülőn nem érvényesül), a szövegpanel pedig
   a rács miatt kénytelen volt felnőni hozzá — így a rövid szöveg
   alatt nagy üres folt maradt. Itt a kép abszolút pozícióban tölti
   ki a helyét, tehát nem határozza meg a sor magasságát: azt a
   szöveg adja. A szöveg emellett egy fokkal nagyobb, és függőlegesen
   középen áll. */
.mediasplit{align-items:stretch}
.mediasplit figure{
  margin:0;position:relative;overflow:hidden;
  background:var(--dark-2);min-height:clamp(240px,26vw,360px);
}
.mediasplit figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mediasplit .panel{display:flex;flex-direction:column;justify-content:center}
.mediasplit .panel p{font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.75}
.mediasplit .panel .checks{gap:14px}
.mediasplit .panel .checks li{font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.7}
@media (max-width:900px){
  /* egy hasábban a kép már nem tud 'kitöltő' lenni: kapjon fix arányt */
  .mediasplit figure{aspect-ratio:3/2;min-height:0}
}

/* --- 13d. Fotó + hozzázárt sötét mező ------------------------
   Rés nélkül: a kép és a zöld mező egyetlen sávot alkot, a kettő
   széle összeér. A kép kap több helyet, a mező pedig mélyzöld —
   így ez a blokk nem téveszthető össze a világos papírpaneles
   kétosztatú blokkokkal. */
.mediasplit--flush{gap:0;grid-template-columns:1.1fr .9fr}
.mediasplit--flush .panel{padding:clamp(28px,4vw,56px)}
.mediasplit .panel--dark p{color:rgba(241,234,226,.88)}
.mediasplit .panel--dark p:first-of-type{color:var(--cream)}
.mediasplit .panel--dark .g{color:var(--gold-l);font-weight:500}
@media (max-width:900px){.mediasplit--flush{grid-template-columns:1fr}}
@media (max-width:780px){
  .split--stack .scard2{grid-template-columns:1fr}
  .split--stack .scard2:nth-child(even) .scard2__fig{order:0}
  .split--stack .scard2__fig{min-height:clamp(230px,44vw,320px)}
}

/* --- 14. Kiemelt sötét blokk (ikon nélkül, középre igazítva) ---- */
.hl{
  position:relative;overflow:hidden;
  background:var(--dark);color:var(--cream);
  padding:clamp(34px,5vw,68px) clamp(20px,4vw,56px);
  text-align:center;
}
/* halvány arany keret-vonalak a sötét belól */
.hl::before{
  content:"";position:absolute;inset:12px;
  border:1px solid rgba(194,164,75,.28);pointer-events:none;
}
/* A szintvonalak helyett halk fényjáték: fentről meleg arany derengés,
   lent beülő mélység. Mintázat nélkül, hogy a szöveg maradjon a
   főszereplő — a keretvonal (::before) adja a rendet. */
.hl::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(122% 88% at 15% -14%,rgba(194,164,75,.17) 0%,rgba(194,164,75,0) 58%),
    radial-gradient(92% 72% at 93% 110%,rgba(0,0,0,.36) 0%,rgba(0,0,0,0) 62%);
}
.hl__body{position:relative;z-index:1;max-width:78ch;margin:0 auto}
.hl__t{
  display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,26px);
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.35rem,3.4vw,2.4rem);
  letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:.7em;
}
.hl__t::before,.hl__t::after{content:"";width:clamp(18px,6vw,74px);height:1.5px;background:var(--gold);flex:0 0 auto}
.hl__body p{margin-top:.8em;color:rgba(241,234,226,.9)}
.hl__body p:first-of-type{font-size:1.1rem;color:var(--cream)}
.hl .g{color:var(--gold-l);font-weight:500}

/* --- 14b. Vízszintes, görgetéssel vezérelt kártyasáv --------------
   A .hscroll magasságát a JS állítja: ragadó rész + a vízszintes út.
   Ugyanaz a megoldás, mint a Parton oldal galeriájánál. */
.hscroll{
  position:relative;
  background-color:var(--sand);
  background-image:var(--grain);
  border-top:1px solid rgba(194,164,75,.4);
  border-bottom:1px solid rgba(194,164,75,.4);
}
.hscroll__sticky{
  position:sticky;top:0;
  height:min(96vh,1000px);
  /* a fix fejléc magassága: különben kinyitáskor rácsúszik a címre */
  padding-top:var(--hdr-h);box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(22px,3.4vh,46px);
  overflow:hidden;
}
.hscroll__head{flex:none;text-align:center;padding-inline:var(--pad)}
.hscroll__head .shead{margin-bottom:0}
.hscroll__track{
  display:flex;align-items:stretch;
  gap:clamp(12px,1.4vw,24px);
  padding-inline:clamp(12px,1.4vw,24px);
  width:100%;
}
/* valódi flex-elem távtartó: a track záró paddingjét a böngészők nem
   számítják bele a scrollWidth-be. Szélessége = a bal oldali padding,
   így az utolsó kártya után ugyanakkora rés marad, mint az első előtt. */
.hscroll__track::after{content:"";flex:none;width:clamp(12px,1.4vw,24px)}
.hscroll__item{
  flex:none;width:clamp(340px,33vw,540px);
  margin:0;
  display:flex;
}
.hscroll__item .scard{width:100%}
/* a nagyobb kártyákon a szöveg is nagyobb */
.hscroll__item .scard__t{font-size:clamp(1.3rem,1.7vw,1.7rem)}
.hscroll__item .scard__b{padding:clamp(24px,2.2vw,36px) clamp(22px,2vw,36px) clamp(24px,2.2vw,34px)}
.hscroll__item .scard__b p{font-size:clamp(1rem,.9vw,1.1rem);line-height:1.7}

/* haladásjelző hajszálvonal — a kártyasáv ALATT, a folyamatban */
.hscroll__bar{
  flex:none;align-self:stretch;
  margin-inline:clamp(12px,1.4vw,24px);
  height:1px;background:var(--line);
}
.hscroll__bar span{display:block;width:0;height:1px;background:var(--gold)}

/* nyilak — csak kis kijelzőn */
.hscroll__nav{display:none;justify-content:center;gap:16px;margin-top:20px}
.hscroll__arrow{
  width:52px;height:52px;display:grid;place-items:center;padding:0;
  background:transparent;border:1px solid var(--line-2);border-radius:50%;
  color:var(--dark);cursor:pointer;
  transition:background-color .35s var(--ease),color .35s var(--ease),opacity .35s var(--ease),border-color .35s var(--ease);
}
.hscroll__arrow:hover,.hscroll__arrow:active{background:var(--dark);border-color:var(--dark);color:var(--cream)}
.hscroll__arrow[disabled]{opacity:.3;cursor:default}
.hscroll__arrow svg{width:17px;height:10px}
.hscroll__arrow--prev svg{transform:scaleX(-1)}

@media (max-width:900px){
  .hscroll{height:auto !important}
  .hscroll__sticky{
    position:static;height:auto;overflow:visible;
    padding-block:clamp(34px,6vw,56px);gap:clamp(18px,4vw,30px);
  }
  .hscroll__track{
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    transform:none !important;gap:clamp(10px,3vw,18px);padding-inline:8vw;
  }
  .hscroll__track::after{display:none}
  .hscroll__track::-webkit-scrollbar{display:none}
  .hscroll__item{width:82vw;scroll-snap-align:center}
  .hscroll__bar{display:none}
  .hscroll__nav{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .hscroll{height:auto !important}
  .hscroll__sticky{position:static;height:auto;overflow:visible;padding-block:40px}
  .hscroll__track{overflow-x:auto;transform:none !important}
  .hscroll__item{width:min(82vw,520px);transform:none !important;opacity:1 !important}
  .hscroll__bar{display:none}
  .hscroll__nav{display:flex}
}

/* --- 14c. Fotósáv --------------------------------------------------
   A tó fotói a lap anyaga, nem díszítés. Ahol a szöveg megülne, egy
   teljes szélességű képsáv választja el a szekciókat — a kép alja
   sűrűbb, ahogy a tó tükre is besötétül a part felé. */
.band{
  position:relative;display:grid;align-items:end;
  min-height:clamp(360px,44vw,620px);
  overflow:hidden;background:var(--dark);
}
.band__img{position:absolute;inset:0;z-index:0}
.band__img img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
/* A nagyobb szöveg alatt sűrűbb a fátyol, hogy világos égnél is
   olvasható maradjon. */
.band::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(11,17,9,.92) 0%,rgba(11,17,9,.62) 26%,
                    rgba(11,17,9,.16) 62%,rgba(11,17,9,.28) 100%);
}
.band__in{
  position:relative;z-index:2;width:100%;
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(52px,7vw,96px) var(--pad) clamp(40px,5.4vw,76px);
}
.band__t{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.65rem,4vw,3.15rem);line-height:1.12;
  letter-spacing:.015em;text-transform:uppercase;
  color:var(--cream);max-width:24ch;
  text-shadow:0 3px 30px rgba(10,14,8,.62);
}
/* arany vonal a sor fölött — ugyanaz a rögzítés, mint a hero címénél */
.band__t::before{
  content:"";display:block;width:72px;height:3px;background:var(--gold);
  margin-bottom:clamp(18px,2.2vw,30px);
}
/* számadatok: a bot alatti mélységmérés hangja — érték nagyban, felirat halkan */
.band__m{
  display:flex;flex-wrap:wrap;
  gap:clamp(16px,2vw,26px) clamp(24px,4vw,58px);
  margin-top:clamp(26px,3.2vw,42px);
}
.band__m div{position:relative;padding-top:14px}
.band__m div::before{
  content:"";position:absolute;top:0;left:0;width:26px;height:2px;background:var(--gold);
}
.band__m b{
  display:block;font-family:var(--disp);font-weight:600;
  font-size:clamp(1.15rem,2.1vw,1.62rem);letter-spacing:.02em;
  color:var(--cream);line-height:1.15;
}
.band__m span{
  display:block;font-size:.86rem;letter-spacing:.05em;
  color:rgba(241,234,226,.8);margin-top:.25em;
}
/* A kapcsolat oldalon a sáv nem egy mondatot tart, hanem a megközelítés
   adatait: kisebb cím, alatta cím-sor, egy mondat és a két térképgomb.
   Így elhagyható lett a korábbi külön „Cím + térkép” szekció. */
.band--info{min-height:clamp(380px,34vw,500px)}
/* Itt nem egy nagy sor, hanem folyószöveg is van, ezért a fátyol
   balról sűrűbb: a szöveg olvasható marad, a kép jobb oldala nyitva. */
.band--info::after{
  background:
    linear-gradient(to right,rgba(11,17,9,.9) 0%,rgba(11,17,9,.66) 36%,
                    rgba(11,17,9,.2) 68%,rgba(11,17,9,.06) 100%),
    linear-gradient(to top,rgba(11,17,9,.55) 0%,rgba(11,17,9,.1) 55%);
}
.band--info .band__t{font-size:clamp(1.5rem,3vw,2.5rem);max-width:none}
.band__addr{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.1rem,1.9vw,1.5rem);line-height:1.3;
  letter-spacing:.01em;text-transform:none;color:var(--cream);
  margin-top:clamp(16px,2vw,26px);
  text-shadow:0 3px 24px rgba(10,14,8,.6);
}
.band__d{
  max-width:46ch;margin-top:.7em;line-height:1.7;
  color:rgba(241,234,226,.86);
  text-shadow:0 2px 18px rgba(10,14,8,.6);
}
.band__btns{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:clamp(20px,2.4vw,30px);
}
/* Szűk nézetben a szöveg a teljes szélességet elfoglalja, ezért a
   fátyol ott végig sűrű, nem csak a bal oldalon. */
@media (max-width:760px){
  .band--info::after{
    background:
      linear-gradient(to right,rgba(11,17,9,.88) 0%,rgba(11,17,9,.72) 60%,
                      rgba(11,17,9,.58) 100%),
      linear-gradient(to top,rgba(11,17,9,.5) 0%,rgba(11,17,9,.12) 60%);
  }
}
@media (max-width:460px){
  .band__btns .btn{width:100%}
}

@media (max-width:560px){.band__m{gap:14px 26px}}

/* --- 15. CTA sáv ---------------------------------------- */
.ctabar{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2.4vw,28px);align-items:center;
  background:var(--paper);border:1px solid var(--line);padding:clamp(18px,2.4vw,28px);
}
.ctabar--dark{background:var(--dark);border-color:var(--dark);color:var(--cream)}
.ctabar .ico{width:clamp(40px,4.4vw,58px);height:clamp(40px,4.4vw,58px);color:var(--dark)}
.ctabar--dark .ico{color:var(--cream)}
.ctabar__t{font-family:var(--disp);font-weight:600;font-size:clamp(1.02rem,2.2vw,1.5rem);letter-spacing:.03em;text-transform:uppercase;color:var(--dark)}
.ctabar--dark .ctabar__t{color:var(--gold)}
.ctabar__d{font-size:.95rem;color:var(--ink-soft);margin-top:.25em}
.ctabar--dark .ctabar__d{color:rgba(241,234,226,.88)}

/* --- 16. Galéria (mozaik) -------------------------------- */
.wrap--wide{max-width:1760px}

.gal{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(120px,9.5vw,175px);
  grid-auto-flow:dense;
  gap:clamp(8px,.85vw,14px);
}
/* Alap csempe: 1 hasáb × 2 sor. A magasság MINDEN csempénél ennyi, csak a
   szélesség változik (.wide = 2 hasáb). Ez szándékos: ha a magasság is
   változna (korábban .tall = 3 sor, .big = 2×3), a sorok kicsúsznak a
   ritmusból, és a dense-elhelyezés nem tudja betölteni az így keletkező
   egysoros réseket — mert minden csempe legalább 2 sor magas. Innen jöttek
   a lyukak a rács közepén. */
.gal a{
  position:relative;display:block;overflow:hidden;
  grid-column:span 1;grid-row:span 2;
  background:var(--dark-2);
  cursor:pointer;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.gal a.wide{grid-column:span 2}
/* A rács csak akkor telik ki maradék nélkül, ha a csempék összesített
   területe osztható a hasábszámmal. Egy csempe 1 egység, a .wide 2, tehát
   N kép és W széles csempe esetén a terület N + W. A hasábszám viszont
   1100 px alatt 3-ra, 760 px alatt 2-re vált, ezért egy fix W nem tud
   mindháromra kijönni. Erre való ez a két jelölő: a 3 hasábos sávban
   egyetlen csempe szélessége átvált, és a terület újra osztható lesz.
     .wide--opt  — széles, KIVÉVE a 3 hasábos sávban  (galéria: 5 → 4)
     .wide--3    — széles CSAK a 3 hasábos sávban     (rólunk:  1 → 2) */
@media (min-width:761px) and (max-width:1100px){
  .gal a.wide--opt{grid-column:span 1}
  .gal a.wide--3{grid-column:span 2}
}

.gal img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.gal a::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,20,11,.45),rgba(14,20,11,0) 58%);
  opacity:0;transition:opacity .45s var(--ease);
}
.gal a:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 56px -28px rgba(14,20,11,.6);
  z-index:2;
}
.gal a:hover img{transform:scale(1.07)}
.gal a:hover::after{opacity:1}

/* egyszerű, egyenletes rács (rendezvényterem oldal) */
.gal--plain{grid-auto-rows:auto}
.gal--plain a{grid-column:auto;grid-row:auto;aspect-ratio:3/2}

/* a képek egyenként úszhatnak be */
.gal a.rv{opacity:0;transform:translateY(12px)}
.gal a.rv.in{opacity:1;transform:none}

@media (max-width:1100px){
  .gal{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(96px,20vw,150px)}
  .gal a.wide{grid-column:span 2}
  /* Az egyenletes rács (Vendégeink képei, A terem) NEM veheti át a fenti
     mozaik-sormagasságot. A .gal--plain csempéi aspect-ratio:3/2-ből
     méreteződnek: telefonszélességen ~175 px széles csempe ~117 px-t
     kér, a mozaik sora viszont 96 px — a csempe kilógott a saját
     sávjából, és rácsúszott az alatta lévő képre. (A .gal és a
     .gal--plain azonos erősségű szelektor, ezért a fentebbi
     grid-auto-rows:auto-t forrássorrendben ez a blokk ütötte ki —
     itt kell visszaadni.)
     A rés is nagyobb: két hasábban a 8 px-es mozaik-rés összemosta a
     szomszédos fotókat, így egyetlen foltnak látszottak. */
  .gal--plain{
    grid-template-columns:repeat(2,1fr) !important;
    grid-auto-rows:auto;
    gap:clamp(10px,3vw,16px);
  }
  /* Két hasábban a páratlan csempeszám fél üres sort hagy a rács alján.
     Ezzel a jelölővel egy-egy kép kimarad a telefonos nézetből, hogy a
     sorok teljesek legyenek — nagy nézetben viszont ott marad. */
  .gal a.hide-sm{display:none}
}

/* --- 16b. Képnézegető (lightbox) ------------------------- */
.lb{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(12,17,10,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity .38s var(--ease),visibility .38s;
}
.lb.open{opacity:1;visibility:visible}

.lb__stage{
  position:relative;
  max-width:min(92vw,1400px);
  max-height:min(84vh,900px);
  display:flex;align-items:center;justify-content:center;
}
.lb__img{
  max-width:min(92vw,1400px);
  max-height:min(84vh,900px);
  width:auto;height:auto;object-fit:contain;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
  opacity:0;transform:scale(.94);
  transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.lb__img.show{opacity:1;transform:none}
/* irányfüggő beúsztás */
.lb__img.from-right{transform:translateX(46px) scale(.96)}
.lb__img.from-left{transform:translateX(-46px) scale(.96)}

.lb__btn{
  position:absolute;z-index:3;
  width:56px;height:56px;display:grid;place-items:center;
  border:1px solid rgba(241,234,226,.34);border-radius:50%;
  background:rgba(12,17,10,.5);color:var(--cream);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background-color .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),transform .3s var(--ease);
}
.lb__btn:hover{background:var(--cream);color:var(--dark);border-color:var(--cream)}
.lb__btn svg{width:20px;height:20px}
.lb__prev{left:clamp(10px,3vw,44px);top:50%;transform:translateY(-50%)}
.lb__next{right:clamp(10px,3vw,44px);top:50%;transform:translateY(-50%)}
.lb__prev:hover{transform:translateY(-50%) translateX(-3px)}
.lb__next:hover{transform:translateY(-50%) translateX(3px)}
.lb__close{top:clamp(12px,3vw,32px);right:clamp(12px,3vw,32px);position:fixed}
.lb__count{
  position:fixed;left:0;right:0;bottom:clamp(14px,3vw,30px);
  text-align:center;
  font-family:var(--disp);font-weight:400;font-size:.82rem;
  letter-spacing:.18em;color:rgba(241,234,226,.75);
}
.lb__count b{color:var(--gold);font-weight:500}

@media (max-width:660px){
  .lb__prev,.lb__next{
    top:auto;bottom:clamp(52px,12vw,80px);transform:none;
    width:48px;height:48px;
  }
  .lb__prev{left:22%}
  .lb__next{right:22%}
  .lb__prev:hover,.lb__next:hover{transform:none}
}

/* --- 17. Jogi / szöveges oldalak ------------------------ */
.prose{max-width:820px}
.prose h2{font-size:clamp(1.2rem,2.4vw,1.6rem);margin:2.2em 0 .2em;color:var(--dark)}
.prose h2:first-child{margin-top:0}
.prose h2+.uline{margin:0 0 1.1em}
.prose h3{font-size:1.02rem;font-weight:500;letter-spacing:.05em;margin:1.6em 0 .4em;color:var(--dark)}
.prose p{margin-bottom:.9em;color:var(--ink-soft)}
.prose ul{margin:0 0 1.1em;display:grid;gap:.35em}
.prose ul li{position:relative;padding-left:20px;color:var(--ink-soft)}
.prose ul li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;background:var(--gold)}
.prose dl{display:grid;grid-template-columns:auto 1fr;gap:.5em 1.4em;margin:0 0 1.4em}
.prose dt{font-family:var(--disp);font-weight:500;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dark);padding-top:.25em}
.prose dd{margin:0;color:var(--ink-soft)}
.prose a:not(.btn){color:var(--dark);border-bottom:1px solid var(--gold)}
.prose .note{background:var(--sand);padding:16px 20px;margin:0 0 1.4em}
.prose .note p:last-child{margin-bottom:0}

/* --- 17b. Szövegblokk két hasábban + kiemelt mondat ------ */
.intro{max-width:1040px;margin:0 auto}
.intro__lead{
  font-family:var(--disp);font-weight:400;text-transform:none;
  font-size:clamp(1.25rem,2.2vw,1.72rem);line-height:1.45;letter-spacing:.005em;
  color:var(--dark);text-align:center;
}
/* Egy bekezdés egy hasáb, és a hasábok száma a bekezdésekhez igazodik:
   kettőnél két hasáb, háromnál három. Fix `repeat(3,1fr)` esetén két
   bekezdés mellett üresen maradt a harmadik hasáb helye, a szöveg meg
   feleslegesen keskenyre tördelődött. (Korábban `columns:2` volt, az
   meg három bekezdést osztott el egyenetlenül.) A bekezdések fölötti
   rövid arany vonal ugyanaz a jelölés, mint a fotósáv adatainál. */
.intro__cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(20px,2.8vw,42px);
  margin-top:clamp(26px,3.4vw,46px);
  color:var(--ink-soft);
}
.intro__cols p{
  position:relative;padding-top:clamp(14px,1.6vw,19px);
  font-size:.98rem;line-height:1.72;
}
.intro__cols p::before{
  content:"";position:absolute;top:0;left:0;
  width:32px;height:2px;background:var(--gold);
}
/* egy hasáb alatt a rövid mérték már olvashatatlanul keskeny lenne */
@media (max-width:900px){
  .intro__cols{grid-template-columns:1fr;gap:clamp(16px,2.4vw,24px)}
}

.pull{margin:clamp(30px,4vw,52px) auto 0;text-align:center;max-width:46ch}
.pull::before{
  content:"";display:block;width:56px;height:3px;background:var(--gold);
  margin:0 auto clamp(16px,2vw,24px);
}
.pull p{
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.05rem,2vw,1.45rem);letter-spacing:.05em;line-height:1.35;
  color:var(--dark);
}

.toc{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(24px,3vw,40px)}
.toc a{
  font-family:var(--disp);font-weight:400;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;
  padding:8px 15px;border:1px solid var(--line-2);color:var(--dark);transition:background-color .3s,color .3s;
}
.toc a:hover{background:var(--dark);color:var(--cream);border-color:var(--dark)}

/* --- 18. Lábléc ----------------------------------------- */
/* A zöld lábléc felső pereme nem éles vonal, hanem vízszerű hullám.
   Ugyanazzal a technikával, mint a 25. szakasz Parton-blokkja: a
   hullámot beágyazott SVG szinuszgörbe rajzolja (igazi szinusz, nem
   félkörös csipke), maszkként vízszintesen ismételve; alatta egy tömör
   réteg tartja meg a lábléc többi részét.
   Miért maszk és nem rárakott csík: így a hullámvölgyekben a LAP
   háttere látszik át, nem egy általunk kitalált szín — a perem tehát
   akkor is illeszkedik, ha a lábléc fölötti szekció háttere más.
   A padding-top a hullám magasságával nő, hogy a görbe ne vágjon
   bele a lábléc tartalmába.

   FONTOS: a hullámvölgyekben a lap krém háttere látszik át, ezért a
   lábléc elé mindig sima, lapszínű szekció kell — ne teljes szélességű
   fotósáv, mert ott a krém idegen csíkként ékelődik a fotó és a zöld
   közé. Minden oldal `.sec`-kel zárul emiatt. */
.ftr{
  --wv-w:56px;            /* egy fél hullám szélessége */
  --wv-h:20px;            /* hullámmagasság */
  --wv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q20 0 40 8 Q60 16 80 8 L80 16 L0 16 Z' fill='black'/%3E%3C/svg%3E");

  background:var(--dark);color:rgba(241,234,226,.86);
  position:relative;overflow:hidden;
  padding-top:var(--wv-h);
  -webkit-mask:
    var(--wv) top left/calc(var(--wv-w)*2) var(--wv-h) repeat-x,
    linear-gradient(#000 0 0) left bottom/100% calc(100% - var(--wv-h)) no-repeat;
  mask:
    var(--wv) top left/calc(var(--wv-w)*2) var(--wv-h) repeat-x,
    linear-gradient(#000 0 0) left bottom/100% calc(100% - var(--wv-h)) no-repeat;
}
.ftr__top{
  display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:clamp(24px,4vw,56px);
  max-width:var(--wrap);margin:0 auto;padding:clamp(38px,5vw,64px) var(--pad) clamp(26px,3.4vw,40px);
  position:relative;z-index:1;
}
.ftr__n{font-family:var(--disp);font-weight:700;font-size:1.5rem;letter-spacing:.05em;text-transform:uppercase;color:var(--cream);line-height:1.1}
.ftr__c{font-family:var(--disp);font-weight:600;font-size:1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:2px}
.ftr__tags{font-family:var(--disp);font-weight:300;font-size:.92rem;letter-spacing:.03em;line-height:1.7;margin-top:1.1em;color:rgba(241,234,226,.8)}
.ftr__rows{display:grid;gap:15px}
.ftr__row{display:flex;gap:13px;align-items:flex-start}
.ftr__row .ico{width:19px;height:19px;margin-top:5px;color:var(--gold)}
.ftr__row a:hover{color:var(--gold-l)}
.ftr__sm{font-size:.88rem;color:rgba(241,234,226,.66);line-height:1.6}
/* két telefonszám, cél szerint felirattal: a szám blokk, hogy külön sorba
   kerüljön a fölötte lévő felirattól */
.ftr__phones a{display:block}
.ftr__phones p:not(:first-child){margin-top:.7em}
.ftr .g{color:var(--gold-l)}
.ftr__btn{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:10px 18px;
  border:1.5px solid rgba(241,234,226,.55);
  font-family:var(--disp);font-weight:500;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  transition:background-color .3s,color .3s,border-color .3s;
}
.ftr__btn:hover{background:var(--cream);color:var(--dark);border-color:var(--cream)}
.ftr__fish{position:absolute;right:2%;bottom:16%;width:min(230px,26vw);opacity:.055;z-index:0}
.ftr__bot{
  border-top:1px solid rgba(241,234,226,.13);position:relative;z-index:1;
  max-width:var(--wrap);margin:0 auto;padding:16px var(--pad) 20px;
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between;
  font-size:.8rem;color:rgba(241,234,226,.6);
}
.ftr__bot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.ftr__bot a:hover{color:var(--gold-l)}

/* --- 19. Animáció --------------------------------------- */
/* Suttogás, nem felvonulás: a korábbi 22px/0.8s minden szekciónál
   külön bejelentette magát. A nyitómozdulat a heroé, itt csak annyi
   kell, hogy a tartalom ne ugorjon be. */
.rv{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .scard:hover{transform:none}
  *{transition-duration:.01ms !important}
}

/* --- 20b. Horgászbot motívum (Parton levél-mintára) -------
   A szekció két szélén egy-egy bot, a nyeléből „kibontakozva”.
   A JS a látótérbe érve adja rá az .is-grown osztályt. */
.rods{position:relative;overflow:hidden}
.rods>.wrap{position:relative;z-index:1}
.rod{
  position:absolute;top:50%;
  width:clamp(84px,8.2vw,142px);height:auto;
  color:var(--dark);
  opacity:0;pointer-events:none;user-select:none;
  clip-path:circle(0% at 16% 94%);
  transition:clip-path 1.9s var(--ease),opacity 1.2s var(--ease),transform 1.9s var(--ease);
}
.rod--l{left:clamp(8px,2.4vw,52px);transform:translateY(-50%) rotate(-8deg) scale(.86)}
.rod--r{right:clamp(8px,2.4vw,52px);transform:translateY(-50%) scaleX(-1) rotate(-8deg) scale(.86)}
.rods.is-grown .rod{opacity:.26;clip-path:circle(150% at 16% 94%)}
.rods.is-grown .rod--l{transform:translateY(-50%) rotate(0deg) scale(1)}
.rods.is-grown .rod--r{transform:translateY(-50%) scaleX(-1) rotate(0deg) scale(1)}

@media (max-width:900px){
  .rod{display:none}
}

/* --- 21c. Adatsáv mélyzöld mezőn -----------------------------------
   A .specs reszponzív szabályai a fájlban lentebb állnak és ugyanolyan
   súlyúak, mint a 9b. szakasz felülírásai — ezért a sötét változat itt,
   a lap végén záródik le, különben kis kijelzőn visszatérnek a világos
   háttérhez tervezett szegélyek. */
.sec--deep .specs,.sec--deep .feats{background:transparent}
.sec--deep .specs li,.sec--deep .feats li,
.sec--deep .specs li:nth-child(3n+1),.sec--deep .specs li:nth-child(2n+1),
.sec--deep .feats li:nth-child(3n+1),.sec--deep .feats li:nth-child(2n+1){
  border-color:rgba(241,234,226,.2);
}
.sec--deep .specs li:first-child,.sec--deep .feats li:first-child{border-left:0}

/* --- 22. Szintvonal-motívum ----------------------------------------
   A tó mélységtérképének egymásba ágyazott szintvonalai a lap saját
   textúrája. Csak a láblécben fut: a mélyzöld szekciókban a sima,
   dísztelen zöld a kért megjelenés.
   Maszkként használjuk, így egy fájl bármilyen színt fel tud venni.
   A @supports azért kell, mert maszk nélkül a színréteg letakarná a
   szekciót — támogatás híján egyszerűen elmarad a díszítés. */
@supports ((-webkit-mask-image:url("../img/contours.svg")) or (mask-image:url("../img/contours.svg"))){
  .ftr::before{
    content:"";position:absolute;inset:-30% -10% auto;height:190%;
    z-index:0;pointer-events:none;
    background:var(--gold);opacity:.1;
    -webkit-mask:url("../img/contours.svg") no-repeat 50% 48%/cover;
            mask:url("../img/contours.svg") no-repeat 50% 48%/cover;
    -webkit-mask-mode:alpha;mask-mode:alpha;
  }
}

/* --- 23. Nyitómozdulat (csak a főoldali hero) ----------------------
   Egyetlen megkomponált pillanat oldalbetöltéskor: a kép lassan leül,
   mint a hajnali köd, és a szöveg utána érkezik. Nem ismétlődik. */
@media (prefers-reduced-motion:no-preference){
  .hero__img img{animation:hero-settle 18s var(--ease) both}
  .hero__t span,.hero__rule,.hero__sub,.hero__btns{animation:hero-rise .9s var(--ease) both}
  .hero__t span:nth-child(1){animation-delay:.12s}
  .hero__t span:nth-child(2){animation-delay:.26s}
  .hero__rule{animation-delay:.42s}
  .hero__sub{animation-delay:.52s}
  .hero__btns{animation-delay:.64s}
}
@keyframes hero-settle{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes hero-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- 24. Kapcsolati űrlap -------------------------------------------
   A kapcsolat oldal űrlapja. Beküldés a Web3Forms végpontjára megy,
   a hozzáférési kulcs a kapcsolat.html rejtett mezőjében van (lásd
   README). A mezők a meglévő tokeneket használják, hogy az űrlap
   ugyanabban a képben maradjon, mint a panelek és a gombok. */
.form{display:grid;gap:clamp(15px,1.7vw,21px)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(15px,1.7vw,21px)}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field--full{grid-column:1 / -1}
.field label{
  font-family:var(--disp);font-weight:500;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dark);
}
.req{color:var(--gold)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;
  font-family:var(--body);font-size:1rem;line-height:1.5;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:0;
  -webkit-appearance:none;appearance:none;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.field textarea{min-height:158px;resize:vertical;line-height:1.65}
.field select{
  padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231a2416' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(81,91,72,.58)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(194,164,75,.22);
}
/* csak beküldés után jelöljük hibásnak — gépelés közben ne piruljon */
.form.is-checked :invalid{border-color:rgba(162,69,47,.7)}

.form__consent{
  display:flex;gap:12px;align-items:flex-start;
  font-size:.94rem;color:var(--ink-soft);line-height:1.6;cursor:pointer;
}
.form__consent input{
  width:19px;height:19px;margin:3px 0 0;flex:0 0 auto;
  accent-color:var(--gold);cursor:pointer;
}
.form__consent a{
  color:var(--dark);text-decoration:underline;
  text-decoration-color:var(--gold);text-underline-offset:3px;
}
.form__consent a:hover{color:var(--gold)}

.form__foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.form__note{font-size:.86rem;color:var(--ink-soft)}

/* robotcsapda: ember nem látja, képernyőolvasó sem olvassa */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__status{
  padding:13px 16px;background:var(--paper);
  border-left:3px solid var(--line-2);
  font-size:.95rem;line-height:1.6;
}
.form__status:empty{display:none}
.form__status.is-ok{border-left-color:#4d7a3a;color:#315023;background:rgba(77,122,58,.08)}
.form__status.is-err{border-left-color:#a2452f;color:#7d3020;background:rgba(162,69,47,.07)}

.form [data-form-submit][disabled]{opacity:.55;cursor:progress}

@media (max-width:660px){
  .form__grid{grid-template-columns:1fr}
  .form__foot{flex-direction:column-reverse;align-items:stretch}
  .form__foot .btn{width:100%}
  .form__note{text-align:center}
}

/* --- 21. Reszponzív ------------------------------------- */
/* Kis kijelzőn a rögzített hátterek minden görgetésnél újrafestenek,
   ezért ott a légtér a tartalommal együtt mozog. */
@media (max-width:900px),(hover:none){
  body{background-attachment:scroll,scroll,scroll,scroll}
}
/* A menü a Parton-mintára 1080 px alatt vált hamburgerre. */
/* 1120px: nyolc menüpont. A „Szolgáltatások" kikerülésével a sor rövidült,
   de a „Céges rendezvények" hosszabb nála, ezért az eredeti 1080px-nél
   valamivel korábban kell hamburgerre váltani. */
@media (max-width:1120px){
  .burger{display:block}
  .nav{
    position:fixed;inset:var(--hdr-h) 0 0;display:block;
    background:var(--dark);padding:20px var(--pad) 40px;
    overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
  }
  .nav ul{flex:0 0 auto}
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav li{border-bottom:1px solid rgba(241,234,226,.12)}
  .nav a{padding:15px 0;font-size:1.18rem;letter-spacing:.05em}
  .nav a::after{display:none}
  .tickets{grid-template-columns:repeat(3,1fr)}
  .ftr__top{grid-template-columns:1fr 1fr}
  .ftr__brand{grid-column:1 / -1}
}

@media (max-width:900px){
  .scards{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .pfish{grid-template-columns:auto 1fr}
  .pfish__list{grid-template-columns:1fr;grid-column:1 / -1}
  .feats{--n:3}
  .feats li:nth-child(3n+1){border-left:0}
  .feats li:nth-child(n+4){border-top:1px solid var(--line)}
  .hl{grid-template-columns:1fr;justify-items:center;text-align:center}
  .ctabar{grid-template-columns:auto 1fr;text-align:left}
  .ctabar .btn{grid-column:1 / -1;justify-self:start}
}

@media (max-width:660px){
  body{font-size:15.5px}
  .logo__fish{width:42px}
  .logo__n{font-size:1.28rem}
  .logo__s{font-size:.6rem;letter-spacing:.24em}
  .tickets{grid-template-columns:repeat(2,1fr)}
  .scards{grid-template-columns:1fr}
  .scard2{grid-template-columns:1fr}
  .scard2__fig{min-height:200px}
  .feats{--n:2}
  .feats li:nth-child(2n+1){border-left:0}
  .feats li:nth-child(3n+1){border-left:1px solid var(--line)}
  .feats li:nth-child(n+3){border-top:1px solid var(--line)}
  .pfish{grid-template-columns:1fr;text-align:center;justify-items:center}
  .hero__img img{object-position:50% 50%}
  .ftr__top{grid-template-columns:1fr}
  .ftr__bot{flex-direction:column;align-items:flex-start}
}

/* --- 24b. Elérhetőség-sáv szűk nézetben ------------------------------
   660 px alatt két hasáb, 520 px alatt egy — három hasábban a
   telefonszám és az e-mail-cím szó közben tördelődne. A választóvonalak
   itt világosak, mert zöld mezőn futnak. A fájl végén áll, hogy a 21.
   szakasz általános .feats-szabályait forrássorrendben is felülírja. */
@media (max-width:660px){
  /* két hasábban a páratlanul maradó utolsó mező a teljes sort kitölti */
  .feats.feats--dark li:last-child:nth-child(odd){grid-column:1 / -1}
  /* egymás alatt már nincs mihez igazítani: a mező a tartalomra szűkül */
  .feats.feats--dark li > :last-child{min-height:0}
  .feats.feats--dark li{border-left:1px solid rgba(241,234,226,.2);border-top:0}
  .feats.feats--dark li:nth-child(2n+1){border-left:0}
  .feats.feats--dark li:nth-child(n+3){border-top:1px solid rgba(241,234,226,.2)}
}
@media (max-width:520px){
  .feats.feats--dark{--n:1}
  .feats.feats--dark li{border-left:0}
  .feats.feats--dark li + li{border-top:1px solid rgba(241,234,226,.2)}
}

/* --- 24c. Mobil finomhangolás ----------------------------------------
   A 21. szakasz általános mobilszabályait két helyen egy inline style
   ütötte ki: az árak oldal „Tudnivalók" sávja (--n:3) és a
   rendezvényterem kétosztatú panelje (grid-template-columns) a HTML-ben
   kapta a hasábszámot. Inline stílust a media query nem tud
   felülírni, ezért telefonon is 2-3 hasáb maradt, és a bekezdések
   ujjnyi csíkokba szorultak. A hasábszám ezért innen, osztályból jön —
   így a törésponti szabályok újra érvényesülnek.
   A blokk a fájl végén áll, hogy forrássorrendben is nyerjen. */

/* Tudnivalók-sáv (árak): nagy kijelzőn ikon és szöveg egymás mellett,
   telefonon egymás alatt, középre zárva. */
.feats--info{--n:3;background:var(--sand)}
.feats--info li{flex-direction:row;align-items:flex-start;text-align:left;gap:16px}

@media (max-width:900px){
  .feats.feats--info{--n:2}
}
@media (max-width:660px){
  .feats.feats--info{--n:1}
  .feats.feats--info li{
    flex-direction:column;align-items:center;text-align:center;
    border-left:0;
  }
  .feats.feats--info li + li{border-top:1px solid var(--line)}
}

/* Kapcsolatsáv a céges oldalon: két hasáb, 520 px alatt egy. A
   hasábszám osztályból jön, nem inline style-ból: azt a media query
   nem tudná felülírni, és a cím kilógna a csempéből telefonon. */
.feats--2{--n:2}
@media (max-width:520px){
  .feats.feats--2{--n:1}
  .feats.feats--2 li{border-left:0}
  .feats.feats--2 li + li{border-top:1px solid var(--line)}
}

/* Kétosztatú panel eltérő hasábaránnyal (rendezvényterem). 900 px alatt
   a 21. szakasz .split-szabálya egy hasábra állítja — ezt most már nem
   akadályozza inline style. */
.split--w{grid-template-columns:.85fr 1.15fr;align-items:center}
@media (max-width:900px){
  .split.split--w{grid-template-columns:1fr}
}

/* A fejléc 108 px-es magassága telefonon a képernyő közel ötödét elvitte,
   pedig a logó 660 px alatt már kisebb betűkkel áll. A magasság egyetlen
   változóból jön, ezért ennek átállítása egyszerre igazítja a törzs
   felső térközét, a lenyíló menü tetejét, a hero magasságát és a
   horgonyokhoz tartozó scroll-padding-ot — nem csúszik el egymáshoz
   képest semmi. */
@media (max-width:660px){
  :root{--hdr-h:76px}
}

/* Érintőkijelzőn nincs igazi hover, a böngésző viszont koppintás után
   „ottragadt" hover-állapotot emulál. A galéria csempéi ilyenkor
   megemelkedtek (translateY + nagy árnyék + z-index:2), és rákerültek a
   szomszédos képekre — ez volt a „képek egymásra lógnak" hiba a
   Vendégeink képei rácsban és a rendezvényterem képsávjában. Ahol nincs
   hover, ott a hover-állapot sem szól bele semmibe. */
@media (hover:none){
  .gal a:hover{transform:none;box-shadow:none;z-index:auto}
  .gal a:hover img{transform:none}
  .gal a:hover::after{opacity:0}
}

/* Az oldalra csúsztatható kártyasáv csak vízszintesen mozoghat. Az
   overflow-x:auto mellett az overflow-y „visible" maradt, amit a CSS
   automatikusan auto-ra számol — így a sáv függőlegesen is egy kicsit
   elgörgethető volt. */
@media (max-width:900px){
  .hscroll__track{overflow-y:hidden}
}
@media (prefers-reduced-motion:reduce){
  .hscroll__track{overflow-y:hidden}
}

/* A nyitókép telefonon lejjebb néz: a keskeny, magas kivágásban a
   felső felét szinte teljesen az ég vitte el, a tó tükre kicsúszott
   alul. A 72% a víz felé tolja a kivágást. */
@media (max-width:660px){
  .hero__img img{object-position:50% 72%}
}

/* Halas jegy és Halárak telefonon. A pipás lista balra zárt tömbként
   áll (lásd a 24d szakasz kivételét), a pontozott árlista pedig
   szűkebb, középre zárt blokká válik — így a név és az ár nem a
   kijelző két széléhez tapad, hanem együtt, olvasható tömbben áll. */
@media (max-width:660px){
  .pfish .checks li{justify-content:flex-start;text-align:left}
  .plist{max-width:23em;margin-inline:auto}
}

/* Napijegyek: öt kártya két hasábban 2+2+1 — az ötödik (Vendégjegy)
   egyedül maradt egy fél sorban. Ha páratlanként utolsó, a teljes sort
   megkapja, és fekvő elrendezésre vált: ikon balra, szöveg jobbra. */
@media (max-width:660px){
  .tickets .ticket:last-child:nth-child(odd){
    grid-column:1 / -1;
    flex-direction:row;align-items:stretch;
  }
  .tickets .ticket:last-child:nth-child(odd) .ticket__ico{
    flex:0 0 38%;padding:14px 10px;
  }
  .tickets .ticket:last-child:nth-child(odd) .tico{width:clamp(64px,22vw,104px)}
  .tickets .ticket:last-child:nth-child(odd) .ticket__b{
    flex:1 1 auto;justify-content:center;
  }
  .tickets .ticket:last-child:nth-child(odd) .ticket__p{margin-top:.5em}
}

/* Lábléc telefonon: minden blokk középre zárva, az ikon a hozzá tartozó
   szöveg fölé kerül — egy hasábban az ikon+szöveg sor balra tapadt, és
   a lábléc szétesett. */
@media (max-width:660px){
  /* szűk kijelzőn arányosan kisebb hullám — 56 px-es félhullámból
     telefonszélességben alig két teljes periódus férne ki */
  .ftr{--wv-w:34px;--wv-h:14px}
  .ftr__top{justify-items:center;text-align:center}
  .ftr__row{flex-direction:column;align-items:center;gap:8px}
  .ftr__row .ico{margin-top:0}
  .ftr__phones a{display:block}
  .ftr__bot{justify-content:center}
  .ftr__bot nav{justify-content:center}
}

/* FANTOMIKONOK telefonon ---------------------------------------------
   A sprite ikonjai (<use href="icons.svg#...">) iOS Safariban nem
   töltődnek be: a WebKit a külső <use>-t nem kéri le — ugyanez a
   megjegyzés a 25. szakaszban is szerepel, ott ezért lett beágyazva a
   Parton-blokk dísze. Az <svg> viszont a CSS-ből megkapja a méretét,
   így a ki nem rajzolt ikon HELYET FOGLAL: a CTA-sávok, a Halas jegy
   panel és az árlisták tetején ettől lett egy üres sáv, ami lenyomta a
   szöveget, és a blokk középre zárása elcsúszottnak tűnt.
   Ezek az ikonok díszítők (aria-hidden), a jelentésből semmi nem
   múlik rajtuk, ezért szűk nézetben egyszerűen elmaradnak — így a
   szöveg tényleg a doboz közepén áll.

   FRISSÍTVE: a készlet azóta minden oldalba be van ágyazva, tehát az
   ikonok kirajzolódnak, nem fantomok. A pipás listáknál (.checks) ezért
   visszakerültek: ott nem dísz, hanem FELSOROLÁSJEL — nélküle a tételek
   jelöletlen sorokká estek szét. A többi itt felsorolt ikon továbbra is
   elmarad telefonon, mert azok egy hasábban tényleg csak magasságot
   vinnének a szöveg fölött. */
@media (max-width:660px){
  .ctabar > .ico{display:none}
  .pfish__ico{display:none}
  .plist .ico{display:none}
  .bigprice .ico{display:none}
  /* a lábléc sorai és a tudnivaló-sávok egy hasábban ikon-fölött-szöveg
     felállásba kerültek — ott a fantomikon üres sort nyitott a szöveg
     fölé, ezért ezek is elmaradnak */
  .ftr__row .ico{display:none}
  .feats .ico{display:none}
  /* A logó hala ugyanígy fantom: 42 px + 10 px rés maradt üresen a
     „FARMER" előtt, ami elhúzta a logót a bal sarokból. Nélküle a
     feliratos logó tényleg a sarokban áll.
     (A lábléc dísz-hala marad: az absztolút pozíciójú, 5%-os
     vízjel — helyet nem foglal, tördelést nem befolyásol.) */
  .logo__fish{display:none}
  .logo{gap:0}
}

/* Középre zárás telefonon. A balra igazított szekciócímek, a CTA-sávok
   és a lábléc alja is középre kerül, hogy a szűk hasábban egységes
   legyen a ritmus. A hosszú folyószöveg (.prose) és az ikonos listák
   (.checks, .plist) szándékosan balra zártak maradnak: középre zárva a
   sorkezdetek elcsúsznak, és a felsorolás olvashatatlanná válik. */
@media (max-width:660px){
  .shead2--l{text-align:center}
  .shead2--l+.uline{margin-left:auto;margin-right:auto}
  .ctabar{grid-template-columns:1fr;justify-items:center;text-align:center}
  .ctabar .btn{grid-column:1 / -1;justify-self:center}
  .ftr__bot{align-items:center;text-align:center}
}

/* Ahol a kétosztatú blokk két fele egymás alá kerül, ott a .split
   alaprése (14–26 px) kevés: az árak oldalon a SZÁLLÁS cím közvetlenül
   a halárak utolsó sorára ült. Vékony vonal és nagyobb, szimmetrikus
   térköz választja el a két felet. A szabály csak az egy hasábos
   sávban él — két hasábban egymás mellett állnak, ott nincs mit
   elválasztani. A gap ezért 0, a távolságot a margó és a belső térköz
   adja, így a vonal fölött és alatt ugyanannyi hely marad. */
@media (max-width:900px){
  .split--sep{gap:0}
  .split--sep > * + *{
    margin-top:clamp(26px,6vw,38px);
    padding-top:clamp(26px,6vw,38px);
    border-top:1px solid var(--line);
  }
}

/* --- 24d. Minden szöveg középre telefonon ----------------------------
   Kifejezett kérés: szűk nézetben MINDEN szöveg középre zárva áll.
   A főtartalom és a lábléc egy közös igazítást kap, mert a text-align
   öröklődik — így nem kell minden komponenst külön felsorolni.
   Amit viszont a text-align nem mozgat, azt külön kezeljük:
     · a flexbox-alapú sorok (pipás lista, árlista, lábléc-sorok) igazítása
       a justify-content, nem a text-align dolga;
     · az árlista pontozott kitöltése középre zárt sorban értelmét veszti
       (a nevet és az árat a két szélre feszítené), ezért elmarad;
     · a jogi oldalak listajelei absztolút pozícióban, a sor bal szélén
       ültek — középre zárt szöveg mellett elszakadtak volna tőle, ezért
       inline jelölővé válnak, közvetlenül a szöveg előtt. */
@media (max-width:660px){
  main{text-align:center}
  .ftr{text-align:center}

  /* Kivétel a középre zárás alól: a PIPÁS LISTA balra zárt marad, és
     csak maga a lista mint blokk kerül középre. Középre zárt sorokban
     minden tétel máshol kezdődik, a felsorolásjelek szétszóródnak —
     hosszabb listán ettől lesz kusza és olvashatatlan. Így viszont a
     pipák egy függőleges vonalban állnak, a többsoros tétel folytatása
     pedig a szöveg alá fut be, nem a jel alá. */
  .checks{text-align:left;max-width:23rem;margin-inline:auto}
  .checks li{justify-content:flex-start}
  /* a többhasábos változat nem kap szélességkorlátot: 560 és 660 px
     között még két hasábban áll, ott a 23rem beszorítaná */
  .checks--cols{max-width:none}

  /* flex-sorok: a tartalom a sor közepére */
  .plist li{justify-content:center}
  .plist__dots{display:none}
  .plist{max-width:none}
  .bigprice{justify-content:center}
  .band__m{justify-content:center}
  .ftr__row{justify-content:center}
  .ftr__bot,.ftr__bot nav{justify-content:center}

  /* Fix szélességű ARANY VONALAK. Ezeket a text-align nem mozdítja:
     vagy blokk-szintűek (a saját szélességükön belül igazít, a blokk
     maga marad balra), vagy absztolút pozíciójúak left:0-val. Ezért a
     hero vonala és a számadatok fölötti vonalkák a középre zárt szöveg
     alatt/fölött balra csúsztak. Nagy kijelzőn ez helyes — ott a hero
     és a fotósáv szövege is balra zárt —, ezért csak itt középre. */
  .hero__rule{margin-inline:auto}
  .band__t::before{margin-inline:auto}
  .band__m div::before{left:50%;transform:translateX(-50%)}
  .intro__cols p::before{left:50%;transform:translateX(-50%)}
  .prose h2+.uline{margin-left:auto;margin-right:auto}

  /* jogi oldalak: a listajel a szöveg elé, a behúzás megszűnik */
  .prose ul li{padding-left:0}
  .prose ul li::before{
    position:static;display:inline-block;
    margin-right:8px;vertical-align:middle;
  }
  .prose dl{grid-template-columns:1fr;gap:.15em 0;justify-items:center}
  .prose dt{padding-top:.6em}
}

/* --- 25. „Parton" átvezető blokk ------------------------------------
   A rendezvényterem saját oldalára (partonrendezveny.hu) vezet, ezért
   nem a farmeri mélyzöld-arany párost viseli, hanem a Parton-oldal
   zsályazöldjét és meleg krémjét — így ránézésre is látszik, hogy egy
   másik oldalra visz. A fel-le hullámos perem a névre („parton") és a
   tóra utal; maszkkal készül, hogy a lapháttér átlátsszon a hullámok
   között, ne egy kitöltött csík fedje.
   A díszítő ikon szándékosan beágyazott SVG, nem a sprite-ból jön:
   a WebKit a külső <use>-t nem tölti be. */
.pcta{
  --p-green:#6c7d58;      /* Parton zsálya */
  --p-dark:#4e5b3f;
  --p-cream:#fff6e0;
  --wave-w:46px;          /* egy fél hullám szélessége */
  --wave-h:16px;          /* hullámmagasság */

  position:relative;overflow:hidden;
  padding:calc(var(--wave-h) + clamp(26px,3.4vw,44px)) clamp(22px,3.4vw,52px);
  background:
    radial-gradient(120% 130% at 100% 0%,rgba(255,246,224,.16) 0%,rgba(255,246,224,0) 55%),
    linear-gradient(135deg,var(--p-green) 0%,var(--p-dark) 100%);
  color:var(--p-cream);

  /* Hullámos felső ÉS alsó perem. A hullámot beágyazott SVG rajzolja
     (igazi szinusz, nem félkörös csipke), maszkként ismételve vízszintesen;
     a középső linear-gradient tartja meg a két perem közti tömböt. Mivel
     maszk, a lapháttér átlátszik a hullámok között — nincs kitöltött csík. */
  --wave-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q20 0 40 8 Q60 16 80 8 L80 16 L0 16 Z' fill='black'/%3E%3C/svg%3E");
  --wave-bot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q20 16 40 8 Q60 0 80 8 L80 0 L0 0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask:
    var(--wave-top) top left/calc(var(--wave-w)*2) var(--wave-h) repeat-x,
    var(--wave-bot) bottom left/calc(var(--wave-w)*2) var(--wave-h) repeat-x,
    linear-gradient(#000 0 0) center/100% calc(100% - var(--wave-h)*2) no-repeat;
  mask:
    var(--wave-top) top left/calc(var(--wave-w)*2) var(--wave-h) repeat-x,
    var(--wave-bot) bottom left/calc(var(--wave-w)*2) var(--wave-h) repeat-x,
    linear-gradient(#000 0 0) center/100% calc(100% - var(--wave-h)*2) no-repeat;
}

.pcta__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr auto;
  gap:clamp(18px,3vw,44px);align-items:center;
}
.pcta__eyebrow{
  font-family:var(--disp);font-weight:500;font-size:.76rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,246,224,.72);
}
.pcta__t{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.05;
  letter-spacing:.06em;text-transform:uppercase;
  margin-top:.28em;
}
.pcta__t em{
  font-style:normal;font-weight:300;
  font-size:.44em;letter-spacing:.14em;
  display:block;color:rgba(255,246,224,.66);margin-top:.5em;
}
.pcta__d{
  margin-top:.9em;max-width:52ch;line-height:1.7;
  color:rgba(255,246,224,.9);
}
/* a gomb a Parton krémjét viseli, nem a farmeri aranyat */
.pcta__btn{
  background:var(--p-cream);border-color:var(--p-cream);color:var(--p-dark);
  white-space:nowrap;
}
.pcta__btn:hover{background:#fff;border-color:#fff;color:var(--p-dark)}

/* fodrozódó vízvonalak a jobb szélen — csak dísz, kicsiben elmarad */
.pcta__ripple{
  position:absolute;right:-44px;bottom:-40px;width:clamp(200px,24vw,340px);
  height:auto;color:rgba(255,246,224,.13);pointer-events:none;z-index:0;
}

@media (max-width:820px){
  .pcta__in{grid-template-columns:1fr;gap:clamp(16px,3vw,24px)}
  .pcta__btn{justify-self:start}
  .pcta__ripple{display:none}
}


/* --- 26. Archív képpár (rólunk oldal) ------------------------------
   Régi, kis felbontású családi fotók. Itt nincs vágás: a kép a saját
   arányában áll (height:auto), mert egy archív felvételnél a teljes
   kompozíció a lényeg — és a 960 px-es forrás nem is bír el nagyítást. */
.archive{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.4vw,32px);
  margin-top:clamp(24px,3vw,40px);
}
.archive a{
  display:block;overflow:hidden;background:var(--dark-2);
  border:1px solid var(--line);
}
.archive img{width:100%;height:auto;transition:transform .8s var(--ease)}
.archive a:hover img{transform:scale(1.03)}
@media (max-width:700px){
  .archive{grid-template-columns:1fr}
}