/* Fejléc, felső sáv, oldalsó panel (vászon) + nyitókép-finomítások — közös a Csicsergő és a Röpke oldalán.
   A házak színeit/betűit a változók adják; az #id-s kijelölők a public.css általános szabályai fölé kerülnek. */
.csi-wrap { --hd-ink:#2B2419; --hd-acc:#BF724B; --hd-acc-strong:#A65B37; --hd-cream:#FEFAE0; --hd-paper:#FFFFFF; --hd-bg:#FBF7EE; --hd-muted:#6F6251; --hd-line:rgba(43,36,25,.12);
  --hd-serif:'Playfair Display', Georgia, serif; --hd-word:'Playfair Display', Georgia, serif; --hd-word-w:600; --hd-word-case:none; --hd-word-track:-.01em; --hd-sans:'Inter', system-ui, sans-serif; }
.rkw-wrap { --hd-ink:#2A2520; --hd-acc:#5A8697; --hd-acc-strong:#456F7F; --hd-cream:#F7F4ED; --hd-paper:#FFFFFF; --hd-bg:#F8F5EE; --hd-muted:#6B6258; --hd-line:rgba(42,37,32,.12);
  --hd-serif:'Libre Baskerville', Georgia, serif; --hd-word:'Cinzel', 'Libre Baskerville', serif; --hd-word-w:500; --hd-word-case:uppercase; --hd-word-track:.08em; --hd-sans:'Open Sans', system-ui, sans-serif; }

#hd-topbar, #hd-header, #hd-canvas { font-family: var(--hd-sans); }
#hd-topbar *, #hd-header *, #hd-canvas * { box-sizing: border-box; }
.hd-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- felső sáv ---------- */
#hd-topbar { background: var(--hd-ink); color: var(--hd-cream); font-size: 13px; }
#hd-topbar .hd-tb { max-width: 1280px; margin: 0 auto; padding: 9px 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 40px; }
#hd-topbar .hd-tb-left, #hd-topbar .hd-tb-right { display: flex; align-items: center; gap: 18px; min-width: 0; }
#hd-topbar .hd-tb-right { justify-content: flex-end; }
#hd-topbar .hd-tb-mid { text-align: center; color: rgba(254,250,224,.92); white-space: nowrap; }
#hd-topbar .hd-tb-mid strong { color: #fff; font-weight: 600; }
#hd-topbar a { color: rgba(254,250,224,.88); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
#hd-topbar a:hover { color: #fff; }
#hd-topbar .hd-tb-loc { display: inline-flex; align-items: center; gap: 7px; color: rgba(254,250,224,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hd-topbar .hd-tb-link { padding: 3px 10px; border: 1px solid rgba(254,250,224,.3); border-radius: 999px; }
#hd-topbar .hd-tb-link:hover { border-color: rgba(254,250,224,.7); }
#hd-topbar .hd-tb-loc-m { display: none; }
@media (min-width: 861px) { #hd-topbar.hd-tb-a .hd-tb-phone, #hd-topbar.hd-tb-b .hd-tb-phone { display: none; } }
@media (max-width: 980px) { #hd-topbar .hd-tb-email { display: none; } }
@media (max-width: 760px) { #hd-topbar .hd-tb-account span { display: none; } #hd-topbar .hd-tb-right { gap: 14px; } }
@media (max-width: 760px) {
  #hd-topbar .hd-tb { grid-template-columns: 1fr auto; padding: 8px 16px; }
  #hd-topbar .hd-tb-left { display: none; }
  #hd-topbar .hd-tb-loc-m { display: inline-flex; }
  #hd-topbar .hd-tb-mid { text-align: left; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
  #hd-topbar .hd-tb-link { display: none; }
  #hd-topbar .hd-tb-phone span { display: none; }
}

/* ---------- fejléc ---------- */
#hd-header { position: sticky; top: 0; z-index: 900; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--hd-line); transition: box-shadow .25s; }
#hd-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.06); }
#hd-header .hd-bar { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 84px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 20px; }
#hd-header .hd-l, #hd-header .hd-r { display: flex; align-items: center; gap: 22px; min-width: 0; }
#hd-header .hd-r { justify-content: flex-end; }
#hd-header .hd-c { display: flex; justify-content: center; }

#hd-header .hd-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--hd-ink); }
#hd-header .hd-logo-img { display: block; height: 60px; width: auto; max-width: 220px; object-fit: contain; }
#hd-header .hd-logo-tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--hd-acc); }
#hd-header .hd-logo-tile svg { width: 21px; height: 21px; fill: none; stroke: var(--hd-cream); stroke-width: 1.8; stroke-linejoin: round; }
#hd-header .hd-logo-word { font-family: var(--hd-word); font-weight: var(--hd-word-w); text-transform: var(--hd-word-case); letter-spacing: var(--hd-word-track); font-size: 25px; line-height: 1; white-space: nowrap; }

#hd-header .hd-links { display: flex; align-items: center; gap: 26px; }
#hd-header .hd-links a { color: var(--hd-ink); opacity: .78; text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; transition: opacity .2s; }
#hd-header .hd-links a:hover { opacity: 1; }
#hd-header .hd-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: var(--hd-ink); color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background .2s; }
#hd-header .hd-cta:hover { background: var(--hd-acc-strong); }
#hd-header .hd-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#hd-header .hd-burger { display: inline-flex; align-items: center; gap: 10px; padding: 0; height: 44px; min-width: 44px; justify-content: center; border: 1px solid var(--hd-line); border-radius: 999px; background: var(--hd-paper); color: var(--hd-ink); cursor: pointer; font: 600 14.5px var(--hd-sans); }
#hd-header .hd-burger.has-label { padding: 0 18px 0 14px; }
#hd-header .hd-burger:hover { border-color: var(--hd-ink); }
#hd-header .hd-burger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#hd-header .hd-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--hd-ink); text-decoration: none; font-size: 14.5px; font-weight: 500; opacity: .8; white-space: nowrap; }
#hd-header .hd-phone:hover { opacity: 1; }
#hd-header a:focus-visible, #hd-header button:focus-visible, #hd-canvas a:focus-visible, #hd-canvas button:focus-visible { outline: 2px solid var(--hd-acc); outline-offset: 3px; }

/* „A”: logó középen, jobbra a menü + foglalás + hamburger */
@media (min-width: 861px) { #hd-header.hd-a .hd-bar, #hd-header.hd-b .hd-bar { column-gap: 48px; } }
#hd-header.hd-a .hd-links a:nth-child(n+4) { display: none; }
@media (max-width: 1240px) { #hd-header.hd-a .hd-links a:nth-child(n+3) { display: none; } }
@media (max-width: 1100px) { #hd-header.hd-a .hd-links { display: none; } }
/* „C”: logó balra, menü középen */
#hd-header.hd-c-layout .hd-bar { grid-template-columns: auto minmax(0,1fr) auto; }
#hd-header.hd-c-layout .hd-c { justify-content: center; }
@media (max-width: 1180px) { #hd-header.hd-c-layout .hd-links a:nth-child(n+5) { display: none; } }
@media (max-width: 1020px) { #hd-header.hd-c-layout .hd-links { display: none; } }

@media (max-width: 860px) {
  #hd-header .hd-bar { height: 68px; padding: 0 14px; gap: 10px; }
  #hd-header .hd-logo-img { height: 46px; max-width: 150px; }
  #hd-header .hd-logo-word { font-size: 21px; }
  #hd-header .hd-logo-tile { width: 34px; height: 34px; }
  #hd-header .hd-phone span, #hd-header .hd-burger .hd-burger-lbl { display: none; }
  #hd-header .hd-burger.has-label { padding: 0; }
  #hd-header .hd-cta { padding: 10px 15px; font-size: 14px; }
  #hd-header .hd-cta svg { display: none; }
  #hd-header.hd-c-layout .hd-r { gap: 8px; }
}
@media (max-width: 400px) {
  #hd-header .hd-bar { gap: 6px; padding: 0 10px; }
  #hd-header .hd-cta { padding: 9px 12px; font-size: 13.5px; }
  #hd-header .hd-logo-word { font-size: 19px; }
}

/* ---------- oldalsó panel (vászon) ---------- */
#hd-canvas { position: fixed; inset: 0; z-index: 5000; visibility: hidden; pointer-events: none; }
#hd-canvas.is-open { visibility: visible; pointer-events: auto; }
#hd-canvas .hd-shade { position: absolute; inset: 0; background: rgba(20,16,12,.45); opacity: 0; transition: opacity .3s ease; }
#hd-canvas.is-open .hd-shade { opacity: 1; }
#hd-canvas .hd-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--hd-bg); color: var(--hd-ink); overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform .38s cubic-bezier(.2,.8,.2,1); box-shadow: -20px 0 60px rgba(0,0,0,.18); display: flex; flex-direction: column; }
#hd-canvas.is-open .hd-panel { transform: none; }
#hd-canvas .hd-p-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; background: var(--hd-bg); border-bottom: 1px solid var(--hd-line); }
#hd-canvas .hd-p-head .hd-logo-img { height: 44px; width: auto; }
#hd-canvas .hd-p-brand { font-family: var(--hd-word); font-weight: var(--hd-word-w); text-transform: var(--hd-word-case); letter-spacing: var(--hd-word-track); font-size: 22px; }
#hd-canvas .hd-close { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--hd-line); background: var(--hd-paper); color: var(--hd-ink); display: grid; place-items: center; cursor: pointer; }
#hd-canvas .hd-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#hd-canvas .hd-p-body { padding: 8px 24px 32px; display: flex; flex-direction: column; gap: 28px; }
#hd-canvas .hd-p-nav { display: flex; flex-direction: column; margin-top: 8px; }
#hd-canvas .hd-p-nav a { font-family: var(--hd-serif); font-size: 24px; line-height: 1.25; color: var(--hd-ink); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--hd-line); display: flex; justify-content: space-between; align-items: center; }
#hd-canvas .hd-p-nav a::after { content: "→"; font-family: var(--hd-sans); font-size: 16px; opacity: .35; transition: transform .2s, opacity .2s; }
#hd-canvas .hd-p-nav a:hover::after { opacity: 1; transform: translateX(4px); }
#hd-canvas .hd-p-cta { display: flex; gap: 10px; flex-wrap: wrap; }
#hd-canvas .hd-p-cta a { flex: 1 1 160px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 14px 18px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; }
#hd-canvas .hd-p-book { background: var(--hd-ink); color: #fff; }
#hd-canvas .hd-p-book:hover { background: var(--hd-acc-strong); }
#hd-canvas .hd-p-call { border: 1px solid var(--hd-line); color: var(--hd-ink); background: var(--hd-paper); }
#hd-canvas h3 { font-family: var(--hd-sans); font-size: 13px; font-weight: 600; color: var(--hd-muted); margin: 0 0 12px; letter-spacing: .02em; }
#hd-canvas .hd-p-about p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--hd-ink); }
#hd-canvas .hd-p-gal { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
#hd-canvas .hd-p-gal a { display: block; aspect-ratio: 1; border-radius: 10px; background: var(--hd-line) center/cover no-repeat; transition: opacity .2s; }
#hd-canvas .hd-p-gal a:hover { opacity: .85; }
#hd-canvas .hd-p-more { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--hd-acc-strong); text-decoration: none; }
#hd-canvas .hd-p-more:hover { text-decoration: underline; }
#hd-canvas .hd-p-rev { margin: 0 0 12px; padding: 16px 18px; background: var(--hd-paper); border: 1px solid var(--hd-line); border-radius: 14px; }
#hd-canvas .hd-p-rev p { margin: 0 0 8px; font-family: var(--hd-serif); font-style: italic; font-size: 15px; line-height: 1.55; }
#hd-canvas .hd-p-rev footer { font-size: 13px; color: var(--hd-muted); display: flex; justify-content: space-between; gap: 10px; }
#hd-canvas .hd-p-rev footer b { color: var(--hd-ink); font-weight: 600; }
#hd-canvas .hd-p-contact { font-size: 14.5px; line-height: 1.8; }
#hd-canvas .hd-p-contact a { color: var(--hd-ink); text-decoration: none; }
#hd-canvas .hd-p-contact a:hover { text-decoration: underline; }
#hd-canvas .hd-p-social { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
#hd-canvas .hd-p-social a { font-size: 13.5px; padding: 6px 12px; border: 1px solid var(--hd-line); border-radius: 999px; text-decoration: none; color: var(--hd-ink); }
html.hd-lock, html.hd-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { #hd-canvas .hd-panel, #hd-canvas .hd-shade { transition: none; } }

/* ---------- nyitókép: logó a helyjelző fölött, olvasható képfeliratok ---------- */
.csi-wrap .hd-hero-logo, .rkw-wrap .hd-hero-logo { display: flex; align-items: center; gap: 18px; margin: 0 0 26px; color: var(--hd-ink); text-decoration: none; }
.csi-wrap .hd-hero-logo img, .rkw-wrap .hd-hero-logo img { display: block; height: 132px; width: auto; max-width: min(340px, 100%); object-fit: contain; }
.csi-wrap .hd-hl-tile, .rkw-wrap .hd-hl-tile { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 20px; background: var(--hd-acc); }
.csi-wrap .hd-hl-tile svg, .rkw-wrap .hd-hl-tile svg { width: 40px; height: 40px; fill: none; stroke: var(--hd-cream); stroke-width: 1.7; stroke-linejoin: round; }
.csi-wrap .hd-hl-word, .rkw-wrap .hd-hl-word { font-family: var(--hd-word); font-weight: var(--hd-word-w); text-transform: var(--hd-word-case); letter-spacing: var(--hd-word-track); font-size: 52px; line-height: 1; white-space: nowrap; }
@media (max-width: 860px) {
  .csi-wrap .hd-hero-logo img, .rkw-wrap .hd-hero-logo img { height: 100px; }
  .csi-wrap .hd-hl-tile, .rkw-wrap .hd-hl-tile { width: 60px; height: 60px; border-radius: 16px; }
  .csi-wrap .hd-hl-tile svg, .rkw-wrap .hd-hl-tile svg { width: 32px; height: 32px; }
  .csi-wrap .hd-hl-word, .rkw-wrap .hd-hl-word { font-size: 40px; }
}
@media (max-width: 400px) {
  .csi-wrap .hd-hero-logo, .rkw-wrap .hd-hero-logo { gap: 14px; margin-bottom: 20px; }
  .csi-wrap .hd-hero-logo img, .rkw-wrap .hd-hero-logo img { height: 84px; }
  .csi-wrap .hd-hl-word, .rkw-wrap .hd-hl-word { font-size: 32px; }
}
/* a főcím sorai kiegyensúlyozottan törjenek (ne maradjon egy árva „A” külön sorban) */
.csi-wrap .csi-hero h1, .rkw-wrap .rkw-hero h1 { text-wrap: balance; }
/* két oszlopnál: a képek teteje a felirattal egy vonalban (a logó fölötte áll), nem középre igazítva elcsúszva */
@media (min-width: 1025px) {
  .csi-wrap .csi-hero-grid, .rkw-wrap .rkw-hero-grid { align-items: start; }
  .csi-wrap .hd-hero-logo, .rkw-wrap .hd-hero-logo { min-height: 132px; }
  .csi-wrap .csi-hero-grid:has(.hd-hero-logo) .csi-hero-mosaic, .rkw-wrap .rkw-hero-grid:has(.hd-hero-logo) .rkw-hero-mosaic { margin-top: var(--hd-hl-h, 158px); }
}
.csi-wrap .csi-mosaic-label, .rkw-wrap .rkw-mosaic-label { right: 24px; }
.csi-wrap .csi-mosaic-label-title, .rkw-wrap .rkw-mosaic-label-title { font-size: clamp(16px, 1.3vw, 19px) !important; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.csi-wrap .csi-mosaic-label, .rkw-wrap .rkw-mosaic-label { color: #fff !important; }
.csi-wrap .csi-mosaic-label-eyebrow, .rkw-wrap .rkw-mosaic-label-eyebrow {
  display: inline-block; padding: 6px 12px; border-radius: 999px; opacity: 1 !important; margin-bottom: 8px;
  background: rgba(20,16,12,.48); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff !important;
  text-shadow: none; box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.csi-wrap .csi-mosaic-label-title, .rkw-wrap .rkw-mosaic-label-title { color: #fff !important; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
#hd-header .hd-m { display: none; }
@media (max-width: 860px) {
  #hd-header .hd-d { display: none !important; }
  #hd-header .hd-m { display: inline-flex; }
}

/* álló logó (pl. a Röpke házikós logója): nagyobban, a fejlécből „fülként” lelógva; görgetéskor visszahúzódik a sávba */
#hd-header.hd-logo-tall .hd-logo { position: relative; z-index: 2; align-self: start; margin-top: 10px; padding: 0 18px 10px; background: var(--hd-paper);
  border: 1px solid var(--hd-line); border-top: 0; border-radius: 0 0 24px 24px; box-shadow: 0 10px 24px -14px rgba(43,36,25,.35);
  transition: margin .25s ease, padding .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease; }
#hd-header.hd-logo-tall .hd-logo-img { height: 108px; max-width: none; transition: height .25s ease; }
#hd-header.hd-logo-tall.is-scrolled .hd-logo { align-self: center; margin-top: 0; padding: 0; background: transparent; border-color: transparent; box-shadow: none; }
#hd-header.hd-logo-tall.is-scrolled .hd-logo-img { height: 70px; }
@media (max-width: 860px) {
  #hd-header.hd-logo-tall .hd-logo { margin-top: 6px; padding: 0 12px 8px; border-radius: 0 0 18px 18px; }
  #hd-header.hd-logo-tall .hd-logo-img { height: 80px; }
  #hd-header.hd-logo-tall.is-scrolled .hd-logo-img { height: 56px; }
}
#hd-header.hd-logo-tall .hd-bar { grid-template-rows: 100%; } /* a lelógó logó ne tolja le a sor többi elemét */
#hd-header.hd-logo-tall .hd-bar > div { align-self: stretch; min-height: 0; }
#hd-header.hd-logo-tall .hd-logo { align-self: flex-start; }
#hd-header.hd-logo-tall.is-scrolled .hd-logo, body:has(.hd-hero-logo) #hd-header.hd-logo-tall .hd-logo { align-self: center; }
/* a kezdőlapon a nyitókép fölött már ott a nagy logó → a fejlécben elég a kicsi */
body:has(.hd-hero-logo) #hd-header.hd-logo-tall .hd-logo { align-self: center; margin-top: 0; padding: 0; background: transparent; border-color: transparent; box-shadow: none; }
body:has(.hd-hero-logo) #hd-header.hd-logo-tall .hd-logo-img { height: 70px; }
@media (max-width: 860px) { body:has(.hd-hero-logo) #hd-header.hd-logo-tall .hd-logo-img { height: 56px; } }
@media (prefers-reduced-motion: reduce) { #hd-header.hd-logo-tall .hd-logo, #hd-header.hd-logo-tall .hd-logo-img { transition: none; } }
#hd-canvas .hd-p-head .hd-logo-img.is-tall { height: 64px; }