@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Marker";font-style:normal;font-display:swap;font-weight:400;src:url(fonts/permanent-marker-latin-400-normal.woff2) format("woff2");}

/* =========================================================
   streetworkout.hu - „Editorial street” dizájn
   Grafitszürke + fehér, óriási széles betűk, halvány graffiti-tag,
   apró letisztult kísérőszövegek, fehér/fekete pill gombok.
   Kontraszt: tinta/papír 16+, fehér/grafit 16+, tompított/papír 5.9.
   ========================================================= */
:root {
  --graphite: #1C1F22;
  --graphite-2: #2A2E32;
  --steel: #5C6166;
  --paper: #ECECE9;
  --card: #FFFFFF;
  --ink: #111315;
  --muted: #555A5F;
  --line: #D2D2CE;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --r: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #141618; --card: #1D2023; --ink: #EDEDEA; --muted: #A3A8AD; --line: #2E3236; }
}
/* a látogató saját választása (fejléc gomb) felülírja a rendszerbeállítást */
:root[data-theme="dark"] { --paper: #141618; --card: #1D2023; --ink: #EDEDEA; --muted: #A3A8AD; --line: #2E3236; color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--font); }
img { max-width: 100%; display: block; }
a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1440px; margin: 0 auto; padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- tipográfia ---------- */
h1, h2, h3 { margin: 0; font-family: var(--font); }
.mega {
  display: block; font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  line-height: .78; letter-spacing: -0.035em; white-space: nowrap; font-size: 17vw; width: max-content; max-width: none;
}
h2 { font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.03em; line-height: .9; font-size: clamp(34px, 6.4vw, 92px); }
h3 { font-weight: 800; font-size: 21px; line-height: 1.2; }
.lead { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 54ch; margin: 14px 0 0; }
.small { font-size: 15px; font-weight: 500; }

/* ---------- fejléc (a hero része, grafit) ---------- */
.top { background: var(--graphite); color: #fff; position: sticky; top: 0; z-index: 1000; }
.top .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 68px; gap: 16px; }
.meta-left { display: flex; gap: 18px; align-items: baseline; font-size: 15px; }
.brand { color: #fff; text-decoration: none; font-weight: 800; letter-spacing: -0.01em; }
.clock { color: #A9AEB3; font-weight: 500; font-variant-numeric: tabular-nums; }
.nav { display: flex; gap: 6px; justify-content: center; }
.nav a { color: #E8E8E5; text-decoration: none; font-weight: 500; font-size: 16px; padding: 8px 14px; border-radius: 999px; display: flex; align-items: center; gap: 8px; }
.nav a svg { width: 20px; height: 20px; display: none; }
.nav a:hover { background: var(--graphite-2); }
.nav a[aria-current="page"] { background: #fff; color: var(--graphite); }
.near { justify-self: end; color: #fff; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; }
.near:hover { background: var(--graphite-2); }
.near svg { width: 22px; height: 22px; }
@media (max-width: 760px) {
  body { padding-bottom: 78px; }
  .top .wrap { grid-template-columns: 1fr auto; min-height: 58px; }
  .clock { display: none; }
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; background: var(--graphite);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); justify-content: space-around; gap: 6px;
  }
  .nav a { flex: 1; flex-direction: column; gap: 3px; font-size: 12.5px; padding: 8px 4px; border-radius: 14px; min-height: 58px; justify-content: center; }
  .nav a svg { display: block; }
}

/* ---------- HERO: grafit, óriási szó, fotó jobbra, tag a háttérben ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff; isolation: isolate;
  background: linear-gradient(115deg, var(--graphite) 0%, #3A3F44 55%, var(--steel) 100%);
}
.hero .photo {
  position: absolute; z-index: 1; right: 0; bottom: 0; width: 52%; height: 88%;
  background: var(--img) center 30% / cover no-repeat; filter: grayscale(1) contrast(1.1) brightness(.92);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}
.hero .tag {
  position: absolute; z-index: 0; left: 18%; top: 42%; transform: rotate(-9deg);
  font: 400 clamp(90px, 15vw, 240px)/0.9 "Marker", cursive; color: rgba(255,255,255,.10); white-space: nowrap; pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-rows: auto auto 1fr auto; min-height: min(calc(100vh - 68px), 900px); padding-top: clamp(14px, 2vw, 28px); padding-bottom: clamp(20px, 3vw, 40px); }
.hero .mega { color: #fff; margin: 0 0 clamp(12px, 2vw, 24px) -0.04em; }
.hero-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: end; font-size: 16px; }
.hero-row .c { text-align: left; }
.hero-row .r { justify-self: end; }
.hero-row a { color: #fff; text-decoration: none; font-weight: 500; }
.hero-row a.dim { color: #9CA1A6; }
.hero-row a:hover { text-decoration: underline; }
.count { font-weight: 500; color: #D4D6D8; }
.hero-cta { max-width: 360px; justify-self: end; }
.hero-cta h1 { font-weight: 500; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35; letter-spacing: -0.01em; margin-bottom: 16px; }
.hero.small .wrap { min-height: min(62vh, 620px); grid-template-rows: auto auto 1fr; }
.hero.small .photo { width: 46%; }
.crumbs { font-size: 15px; color: #A9AEB3; margin-bottom: 10px; }
.crumbs a { color: #fff; font-weight: 500; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .hero .photo { width: 100%; height: 100%; opacity: .45; -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 60%); mask-image: linear-gradient(0deg, transparent 0%, #000 60%); }
  .hero .wrap { min-height: auto; padding-bottom: 28px; }
  .hero-row { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .hero-row .c { text-align: right; }
  .hero-row.bottom { grid-template-columns: 1fr; }
  .hero-row.bottom .scroll, .hero-row.bottom .copy { display: none; }
  .hero-cta { justify-self: start; margin-top: 40px; max-width: none; }
  .hero .tag { left: -10%; top: 30%; font-size: 34vw; }
}

/* ---------- gombok: pill, nyíllal ---------- */
.btn {
  font: 600 16px/1 var(--font); border: 0; border-radius: 999px; padding: 0 22px; min-height: 50px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ink); color: var(--paper); transition: transform .15s ease;
}
.btn::after { content: "→"; font-weight: 500; transition: transform .15s ease; }
.btn.no-arrow::after { display: none; }
.btn:hover { color: var(--paper); }
.btn:hover::after { transform: translateX(3px); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn.light, .hero .btn, .dark-block .btn, .section.dark .btn { background: #fff; color: var(--graphite); }
.btn.light:hover, .hero .btn:hover, .section.dark .btn:hover { color: var(--graphite); }
.btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.btn.ghost:hover { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.line:hover { color: var(--ink); }
.btn.mint { background: #fff; color: var(--graphite); }
@media (prefers-reduced-motion: reduce) { .btn::after { transition: none; } }

/* ---------- űrlapelemek ---------- */
input[type="text"], input[type="search"], input[type="number"], select, textarea {
  font: inherit; color: var(--ink); background: var(--card); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 13px 16px; width: 100%; min-height: 52px;
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; }
.err { color: #C62828; font-weight: 600; min-height: 1.4em; margin: 10px 0 0; }

/* ---------- szekciók ---------- */
.section { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
.section-head { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 24px 40px; align-items: end; margin-bottom: clamp(24px, 3vw, 40px); border-bottom: 1.5px solid var(--ink); padding-bottom: 20px; }
.section-head .lead { margin: 0; }
@media (max-width: 760px) { .section-head { grid-template-columns: 1fr; } }

.search { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.search input { flex: 1 1 260px; }
.map-big { height: min(70vh, 640px); min-height: 400px; border-radius: var(--r); background: #D9DAD6; }
.map-city { height: 440px; border-radius: var(--r); background: #D9DAD6; }
.legend { display: flex; gap: 22px; margin-top: 14px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; border: 2px solid var(--paper); box-shadow: 0 0 0 1.5px var(--ink); }

/* sötét edzésterv blokk */
.section.dark { background: var(--graphite); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.section.dark .tag { position: absolute; z-index: -1; right: -4%; top: 8%; transform: rotate(-8deg); font: 400 clamp(90px, 14vw, 220px)/0.9 "Marker", cursive; color: rgba(255,255,255,.07); white-space: nowrap; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.feature .ph { aspect-ratio: 4 / 5; border-radius: var(--r); background: var(--graphite-2) var(--img) center / cover no-repeat; filter: grayscale(1) contrast(1.08); }
.feature h2 { margin-bottom: 18px; }
.feature p { color: #BFC3C7; max-width: 46ch; margin: 0 0 28px; }
.steps { list-style: none; padding: 0; margin: 0 0 34px; border-top: 1px solid #3C4146; }
.steps li { display: grid; grid-template-columns: 54px 1fr; padding: 16px 0; border-bottom: 1px solid #3C4146; color: #E8E8E5; }
.steps li span { font-weight: 500; color: #8E9398; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature .ph { aspect-ratio: 16 / 10; } }

/* városlista: szerkesztőségi sorok */
.cities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 40px; }
.cities a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.cities a span { font-weight: 500; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cities a:hover { border-bottom-color: var(--ink); }
.cities a:hover span { color: var(--ink); }
.letter { font-size: clamp(40px, 6vw, 80px); margin: 48px 0 6px; }

/* parkkártyák */
.parks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.park { background: var(--card); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 10px; border: 1px solid transparent; }
.park:target { border-color: var(--ink); }
.park .where { color: var(--muted); font-size: 15px; }
.park .actions { display: flex; gap: 16px; margin-top: auto; padding-top: 10px; flex-wrap: wrap; align-items: center; }
.park .actions .btn { min-height: 44px; font-size: 15px; padding: 0 18px; }
.park .actions a.small { font-size: 14px; font-weight: 500; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip, .tags .tag { font-size: 13px; font-weight: 500; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.tags .tag.bar { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.note { font-size: 14px; color: var(--muted); margin-top: 22px; }
@media (max-width: 400px) { .parks { grid-template-columns: 1fr; } }

.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--graphite); color: #fff; border-radius: var(--r); padding: clamp(28px, 4vw, 48px); margin: 64px 0 0; position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before { content: "edzés"; position: absolute; z-index: -1; right: 4%; top: -10%; transform: rotate(-8deg); font: 400 140px/1 "Marker", cursive; color: rgba(255,255,255,.08); }
.cta-band h2 { font-size: clamp(30px, 4.4vw, 60px); }
.cta-band p { margin: 10px 0 0; color: #BFC3C7; }
.cta-band .btn { background: #fff; color: var(--graphite); }

/* ---------- edzésterv űrlap ---------- */
.planform { display: grid; gap: 30px; background: var(--card); border-radius: var(--r); padding: clamp(20px, 4vw, 44px); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend, .flabel { font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; padding: 0; display: block; }
.hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.levels input, .chips input { position: absolute; opacity: 0; pointer-events: none; }
.levels label { display: block; cursor: pointer; border: 1.5px solid var(--line); border-radius: 14px; padding: 18px; font-size: 15px; color: var(--muted); height: 100%; }
.levels label b { display: block; color: var(--ink); font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.02em; font-size: 20px; line-height: 1; margin-bottom: 8px; }
.levels input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.levels input:checked + label b { color: var(--paper); }
.levels input:focus-visible + label, .chips input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 600; font-size: 15px; }
.chips input:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width: 680px) { .row2 { grid-template-columns: 1fr; } }

.plan { margin-top: 48px; }
.plan h2 { font-size: clamp(30px, 5vw, 68px); }
.plan .meta { display: inline-block; margin: 16px 0 6px; font-weight: 600; border: 1.5px solid var(--ink); padding: 7px 14px; border-radius: 999px; }
.plan table { width: 100%; border-collapse: collapse; background: var(--card); font-size: 15px; }
.plan th, .plan td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.plan th { background: var(--ink); color: var(--paper); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.plan td.n { font-weight: 800; font-stretch: 112%; white-space: nowrap; }
.plan td small { display: block; color: var(--muted); margin-top: 3px; }
.tablewrap { overflow-x: auto; border-radius: 14px; }
.plan h3 { margin: 36px 0 12px; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.02em; font-size: 22px; }
.plan ul { margin: 0; padding-left: 20px; }
.plan .tools { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.disclaimer { font-size: 14px; color: var(--muted); margin-top: 28px; }

/* ---------- lábléc ---------- */
footer { background: var(--graphite); color: #A9AEB3; font-size: 14px; padding: 48px 0 40px; overflow: hidden; }
.foot-word { width: max-content; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.04em; line-height: .8; color: #2E3337; white-space: nowrap; font-size: 11.6vw; margin: 0 0 28px -0.04em; }
.foot-cols { display: grid; grid-template-columns: auto 1fr auto; gap: 16px 40px; }
footer p { margin: 0; }
footer a { color: #fff; font-weight: 500; }
@media (max-width: 760px) { .foot-cols { grid-template-columns: 1fr; } }

/* ---------- térkép ---------- */
.pin { width: 18px; height: 18px; border-radius: 50%; background: #111315; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.pin.fitness { background: #34424A; }
.marker-cluster-custom { background: #111315; color: #fff; border-radius: 50%; display: grid; place-items: center; font: 800 14px/1 "Archivo", sans-serif; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.leaflet-popup-content { font: 400 15px/1.45 "Archivo", sans-serif; margin: 14px 16px; color: #111315; }
.leaflet-popup-content h3 { font-size: 18px; margin-bottom: 4px; color: #111315; }
.leaflet-popup-content .pop-badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #fff; background: var(--red); border-radius: 999px; padding: 2px 9px; margin-bottom: 6px; }
.leaflet-popup-content .pop-badge.fit { background: #34424A; }
.leaflet-popup-content .pop-eq { margin: 6px 0; color: #4E5D66; }
.leaflet-container { font-family: "Archivo", sans-serif; }
.leaflet-container a { color: #111315; }
.leaflet-bar a, .leaflet-bar a:hover { color: #111315; }

#plan-out, .park, #terkep { scroll-margin-top: 90px; }
@media print {
  .top, .nav, .planform, footer, .plan .tools, .hero, .noprint { display: none !important; }
  body { background: #fff; color: #000; font-size: 12px; padding: 0; }
  .plan th { background: #ddd !important; color: #000; }
}
.hero-row .dim { color: #9CA1A6; }

/* ================= Piros pötty + asztali finomítás ================= */
:root { --red: #E3262B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --red: #FF4A4F; } }
:root[data-theme="dark"] { --red: #FF4A4F; }

/* piros jelzések - mindig kicsi */
h2::after, h2 > .lw::after { content: ""; display: inline-block; width: .16em; height: .16em; background: var(--red); margin-left: .08em; vertical-align: baseline; }
/* a pont az utolsó szóhoz ragad (a build <span class="lw">-be teszi az utolsó szót) */
h2 > .lw { white-space: nowrap; }
h2:has(> .lw)::after { content: none; }
.section-head .lead a { white-space: nowrap; }
.mega::after { content: ""; display: inline-block; width: .11em; height: .11em; background: var(--red); margin-left: .02em; }
.btn::after { color: var(--red); }
.btn:not(.light):not(.line)::after { color: #FF6B6F; }
.hero .btn::after, .section.dark .btn::after, .cta-band .btn::after { color: var(--red); }
.nav a[aria-current="page"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
@media (max-width: 760px) { .nav a[aria-current="page"]::before { position: absolute; margin-top: -40px; } .nav a { position: relative; } }
.clock::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 7px; vertical-align: 1px; animation: blink 2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .clock::before { animation: none; } }
.hero .tag { color: rgba(227,38,43,.20); }
.section.dark .tag, .cta-band::before { color: rgba(227,38,43,.16); }
.section-head { border-bottom-color: var(--ink); position: relative; }

.cities a:hover span, .quick a:hover span { color: var(--red); }
.steps li span { color: var(--red); font-weight: 700; }
.tags .tag.bar { position: relative; padding-left: 22px; }
.tags .tag.bar::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--red); }

/* térkép jelölők: street workout = piros */
.pin { background: var(--red); }
.pin.fitness { background: #34424A; }
.leaflet-tile-pane { filter: grayscale(.92) contrast(1.02); }
.legend i.lg-street { background: var(--red); }
.legend i.lg-fit { background: #34424A; }

/* ---------- asztali elrendezés: a szélesség kihasználása ---------- */
.map-layout { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 28px; align-items: start; }
.map-side { position: sticky; top: 92px; display: grid; gap: 18px; }
.map-side .search { margin: 0; }
.map-side .search input { flex-basis: 100%; }
.map-side .search .btn { flex: 1 1 0; }
.map-side .err { margin: -8px 0 0; min-height: 0; }
.map-side .err:empty { display: none; }
.side-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: 14px; overflow: hidden; }
.side-stats div { background: var(--card); padding: 16px 18px; }
.side-stats b { display: block; font-weight: 900; font-stretch: 125%; font-size: 40px; line-height: 1; letter-spacing: -0.03em; }
.side-stats span { color: var(--muted); font-size: 14px; }
.quick { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.quick a { display: flex; justify-content: space-between; padding: 12px 2px; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 700; }
.quick a span { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.map-layout .map-big { height: min(78vh, 720px); }
.map-side .legend { margin: 0; }
@media (max-width: 960px) { .map-layout { grid-template-columns: 1fr; } .map-side { position: static; } .quick, .side-stats { display: none; } }

@media (min-width: 761px) {
  /* hero: a fotó teljes magasságú, a szó rálóg; kompaktabb magasság */
  .hero .wrap { min-height: min(calc(100vh - 68px), 820px); }
  .hero .photo { height: 100%; width: 50%; }
  .hero.small .wrap { min-height: min(58vh, 560px); }
  .hero-cta { max-width: 400px; }
  .hero-cta h1 { font-size: clamp(22px, 1.9vw, 28px); }
  .feature { grid-template-columns: 1.1fr 1fr; }
  .section-head h2 { font-size: clamp(56px, 7.4vw, 120px); }
}

/* mobilon az alsó sávban nem kell a piros pont */
@media (max-width: 760px) { .nav a[aria-current="page"]::before { display: none; } }

/* ---------- Zenék ---------- */
.pfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(32px, 4vw, 56px); }
.chip { font: 500 15px/1 "Archivo", sans-serif; padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; min-height: 44px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.music-group { margin-bottom: clamp(48px, 6vw, 88px); scroll-margin-top: 90px; }
.playlists { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.pl { background: var(--card); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 6px; min-height: 200px; }
.pl .plat { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; margin-bottom: 8px; }
.pl h3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }
.pl .by { color: var(--muted); font-size: 14px; }
.pl .btn { margin-top: auto; align-self: flex-start; min-height: 44px; font-size: 15px; padding: 0 18px; }
.pl[hidden], .tracks a[hidden] { display: none; }
.tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tracks li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 120px auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tracks .no { color: var(--red); font-weight: 700; font-variant-numeric: tabular-nums; }
.tracks .tt { display: flex; flex-direction: column; font-size: 15px; color: var(--muted); }
.tracks .tt b { color: var(--ink); font-size: 18px; font-weight: 700; }
.tracks .st { font-size: 14px; color: var(--muted); }
.tracks .go { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tracks .go a { font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); min-height: 36px; display: inline-flex; align-items: center; }
.tracks .go a:hover { border-color: var(--ink); }
@media (max-width: 760px) {
  .tracks li { grid-template-columns: 34px minmax(0, 1fr); row-gap: 10px; }
  .tracks .st { display: none; }
  .tracks .go { grid-column: 2; justify-content: flex-start; }
  .pl { min-height: 0; }
}
.music-group .section-head h2 { font-size: clamp(36px, 5.2vw, 76px); }
@media (max-width: 760px) {
  .playlists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pl { padding: 16px; }
  .pl h3 { font-size: 18px; }
  .pl .plat { font-size: 10.5px; padding: 3px 8px; margin-bottom: 4px; }
  .pl .btn { min-height: 40px; font-size: 14px; padding: 0 14px; margin-top: 12px; }
  .music-group .section-head h2 { font-size: clamp(28px, 8.4vw, 52px); }
  .pfilter .chip { padding: 10px 14px; font-size: 14px; }
}
@media (max-width: 400px) { .pl { padding: 14px; } .pl .btn { padding: 0 12px; font-size: 13.5px; } }
/* főoldal: ugyanakkora fejléckép, mint az aloldalakon */
.hero.small.home .wrap { grid-template-rows: auto auto 1fr auto; }
@media (max-width: 760px) { .hero.small .photo { width: 100%; } }

/* ---------- graffiti felirat a fejlécképen: bal lent, a szöveg fölött, mindig teljes egészében ---------- */
.hero .wrap { display: flex; flex-direction: column; z-index: 3; }
.hero .wrap > .hero-row { width: 100%; }
.hero .wrap > .tag, .hero-row.bottom > .tag {
  position: relative; z-index: 0; left: auto; top: auto; right: auto; bottom: auto;
  align-self: flex-start; margin: auto 0 clamp(10px, 1.6vw, 22px) -0.02em;
  transform: rotate(-6deg); transform-origin: left bottom;
  font: 400 min(76px, calc(min(46vw, 620px) / (var(--len, 10) * 0.62)))/1 "Marker", cursive;
  color: rgba(227,38,43,.82); white-space: nowrap; pointer-events: none;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
@media (max-width: 760px) {
  .hero .wrap > .tag { font-size: min(58px, calc((100vw - 40px) / (var(--len, 10) * 0.62))); margin-bottom: 6px; color: rgba(227,38,43,.72); }
  .hero .wrap > .tag + .hero-row .hero-cta { margin-top: 8px; }
}

.hero-row.bottom > .tag { grid-column: span 2; align-self: end; margin-bottom: 0; font-size: min(96px, calc(min(54vw, 720px) / (var(--len, 10) * 0.62))); }
@media (max-width: 760px) {
  .hero-row.bottom > .tag { grid-column: auto; font-size: min(58px, calc((100vw - 40px) / (var(--len, 10) * 0.62))); color: rgba(227,38,43,.72); margin-top: 0; }
  .hero-row.bottom > .tag + .hero-cta { margin-top: 8px; }
}

/* ---------- Térkép oldal ---------- */
.mapbar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding-top: 22px; padding-bottom: 18px; }
.mapbar h1 { font: 900 clamp(22px, 2.4vw, 32px)/1.1 "Archivo", sans-serif; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; margin: 0; }
.mapbar h1::after { content: ""; display: inline-block; width: .3em; height: .3em; background: var(--red); margin-left: .1em; }
.mapbar p { margin: 0; color: var(--muted); }
.mapfull { padding-bottom: 28px; }
.mapfull .map-side { top: 84px; }
.map-full { height: calc(100vh - 68px - 98px); min-height: 460px; border-radius: var(--r); background: #D9DAD6; }
@media (max-width: 960px) { .map-full { height: calc(100svh - 300px); min-height: 380px; } }
@media (max-width: 760px) { .map-full { height: calc(100svh - 68px - 90px - 250px); min-height: 360px; } .mapfull { padding-bottom: 110px; } }
.hero .wrap > .hero-row.bottom { margin-top: auto; }
.top { z-index: 1200; }
@media (max-width: 760px) { .nav { z-index: 1200; } .mapbar p { font-size: 15px; } }

/* lefelé görgetve a felső sáv elbújik, felfelé görgetve visszajön (mobilon az alsó menü marad) */
.top { transition: top .28s ease; }
html.hide-top .top { top: -70px; }
@media (prefers-reduced-motion: reduce) { .top { transition: none; } }

/* motivációs feliratok: halványabbak */
.hero .wrap > .tag, .hero-row.bottom > .tag { color: var(--red) !important; opacity: .65; text-shadow: none; }
.mapfull.section { padding-top: clamp(28px, 4vw, 56px); }
.map-full { height: calc(100vh - 140px); }
@media (max-width: 760px) { .map-full { height: calc(100svh - 230px); } }
/* ékezetes nagybetűk (É, Á) ne vágódjanak le a fejléc tetején */
.hero .wrap > .mega { padding-top: .14em; }
@media (max-width: 760px) {
  .hero-row > .hero-cta { grid-column: 1 / -1; }
  .hero-row > div:empty { display: none; }
  .hero-row > .r { justify-self: start; }
}
@media (max-width: 760px) { .nav a { text-align: center; line-height: 1.1; padding-left: 2px; padding-right: 2px; } }
@media (max-width: 380px) { .nav a { font-size: 11.5px; } }
@media (min-width: 761px) and (max-width: 1140px) { .clock { display: none; } }

/* ---------- motivációs feliratok: 30%-kal nagyobbak (kilóghatnak), 30% átlátszóság ---------- */
.hero .tag { opacity: .3 !important; transform: rotate(-6deg) scale(1.3) !important; transform-origin: left bottom; }

/* ---------- főoldal: Napi motiváció ---------- */
.motd { grid-column: span 2; align-self: end; display: flex; flex-direction: column; align-items: flex-start; max-width: 620px; }
.motd > .tag {
  position: relative; z-index: 0; white-space: nowrap; pointer-events: none; color: var(--red) !important;
  font: 400 min(64px, calc(min(46vw, 620px) / (var(--len, 10) * 0.62)))/1 "Marker", cursive;
  margin: 0 0 clamp(10px, 1.2vw, 16px) -0.02em;
}
.motd h1 { font-weight: 500; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 10px; color: #fff; }
.motd .quote { margin: 0; color: #BFC3C7; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; min-height: 3em; transition: opacity .45s ease; }
.motd .quote.out { opacity: 0; }
.home .hero-cta p { font-weight: 500; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 16px; }
@media (min-width: 761px) { .home .hero-cta p { font-size: clamp(20px, 1.6vw, 24px); } }
@media (max-width: 760px) {
  .motd { grid-column: 1 / -1; }
  .motd > .tag { font-size: min(58px, calc((100vw - 40px) / (var(--len, 10) * 0.62))); margin-bottom: 10px; }
  .motd + .hero-cta { margin-top: 26px; }
  .home .hero-cta p { font-size: 17px; color: #E8E8E5; }
}
@media (prefers-reduced-motion: reduce) { .motd .quote { transition: none; } }
@media (max-width: 400px) {
  .home .hero-cta p { display: none; }
  .motd + .hero-cta { margin-top: 18px; }
  .motd .quote { font-size: 15px; min-height: 4.5em; }
}
.motd > .tag { left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; }

/* ---------- menü: mobilon rövid feliratok ---------- */
.nav .ls { display: none; }
@media (max-width: 760px) {
  .nav .lf { display: none; }
  .nav .ls { display: inline; }
  .nav a { font-size: 11.5px; gap: 4px; }
  .nav a svg { width: 19px; height: 19px; }
}
@media (min-width: 761px) and (max-width: 1240px) { .nav a { padding: 8px 10px; font-size: 15px; } .nav { gap: 2px; } }
@media (min-width: 761px) and (max-width: 1000px) { .brand { font-size: 14px; } .nav a { padding: 7px 8px; font-size: 14px; } }

/* ---------- Gyakorlatok ---------- */
.ex-group { margin-bottom: clamp(48px, 6vw, 88px); scroll-margin-top: 90px; }
.ex-group .section-head h2 { font-size: clamp(36px, 5.2vw, 76px); }
.exlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ex a { display: flex; flex-direction: column; gap: 6px; height: 100%; background: var(--card); border-radius: var(--r); padding: 22px; text-decoration: none; color: var(--ink); border: 1px solid transparent; transition: border-color .15s; }
.ex a:hover { border-color: var(--ink); }
.ex h3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; margin-top: 6px; }
.ex .en { color: var(--muted); font-size: 14px; }
.ex p { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 6px 0 0; }
.ex .more { margin-top: auto; padding-top: 14px; font-weight: 700; font-size: 15px; }
.ex .more::after { content: " →"; color: var(--red); }
.ex[hidden], .ex-group[hidden] { display: none; }
.lvl { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; }
.lvl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.lvl-halado::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.lvl-profi::before { background: var(--red); border-color: var(--red); }

.ex-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.ex-intro { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; margin: 0 0 clamp(32px, 4vw, 56px); max-width: 760px; }
.ex-main .section-head h2 { font-size: clamp(32px, 4.2vw, 60px); }
.ex-steps { list-style: none; margin: 0; padding: 0; }
.ex-steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ex-steps li span { color: var(--red); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.ex-steps li p { margin: 0; font-size: 18px; line-height: 1.5; }
.ex-mistakes { margin: 0; padding: 0; list-style: none; }
.ex-mistakes li { position: relative; padding: 14px 0 14px 32px; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.5; }
.ex-mistakes li::before { content: "✕"; position: absolute; left: 2px; top: 14px; font-weight: 800; color: var(--muted); }
.ex-steps-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ex-steps-nav a { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border-radius: var(--r); background: var(--card); text-decoration: none; color: var(--ink); border: 1px solid transparent; }
.ex-steps-nav a:hover { border-color: var(--ink); }
.ex-steps-nav a.harder { text-align: right; }
.ex-steps-nav small { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.ex-steps-nav b { font-size: 20px; }
.ex-steps-nav a:not(.harder) b::before { content: "← "; color: var(--red); }
.ex-steps-nav a.harder b::after { content: " →"; color: var(--red); }
.ex-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 12px; background: var(--card); border-radius: var(--r); padding: 24px; }
.ex-side .btn { justify-content: center; }
.ex-facts { margin: 0 0 8px; }
.ex-facts > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.ex-facts > div:first-child { padding-top: 0; }
.ex-facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.ex-facts dd { margin: 0; font-size: 16px; line-height: 1.4; }
.ex-side .note { margin: 4px 0 0; font-size: 13px; }
@media (max-width: 960px) { .ex-layout { grid-template-columns: minmax(0, 1fr); } .ex-side { position: static; } }
@media (max-width: 760px) {
  .exlist { grid-template-columns: 1fr; gap: 10px; }
  .ex a { padding: 18px; }
  .ex-steps li { grid-template-columns: 40px minmax(0, 1fr); }
  .ex-steps li p, .ex-mistakes li { font-size: 16px; }
  .ex-steps-nav { grid-template-columns: 1fr; }
  .ex-steps-nav a.harder { text-align: left; }
  .ex-group .section-head h2 { font-size: clamp(28px, 8.4vw, 52px); }
}
.ex-main .section-head { grid-template-columns: 1fr; }
.clock { white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1380px) { .clock { display: none; } }

/* ---------- 404 ---------- */
.lost { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.lost a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px; border-radius: var(--r); background: var(--card); text-decoration: none; color: var(--ink); border: 1px solid transparent; }
.lost a:hover { border-color: var(--ink); }
.lost b { font-size: 22px; letter-spacing: -0.01em; }
.lost b::after { content: " →"; color: var(--red); }
.lost span { color: var(--muted); font-size: 15px; }
@media (max-width: 760px) { .lost { grid-template-columns: 1fr; gap: 10px; } }
/* edzésterv: eszközcsoportok */
.chips-title { margin: 14px 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.chips-title:first-of-type { margin-top: 4px; }
legend .hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 14px; margin-left: 8px; }
#eq-err:empty { display: none; }

/* gyakorlatok: eszközök */
.exfilters { display: grid; gap: 10px; margin-bottom: clamp(32px, 4vw, 56px); }
.exfilters .pfilter { margin-bottom: 0; align-items: center; }
.flt-label { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); min-width: 64px; }
.flt-empty { margin: 6px 0 0; }
.ex .exeq { font-size: 13px; font-weight: 600; color: var(--ink); display: inline-flex; gap: 6px; align-items: center; margin-top: 2px; }
.ex .exeq::before { content: ""; width: 10px; height: 3px; background: var(--red); border-radius: 2px; }
.eqchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.eqc { font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.eqc-floor { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.eqc-opt { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
@media (max-width: 760px) {
  .exfilters .pfilter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .exfilters .pfilter::-webkit-scrollbar { display: none; }
  .exfilters .chip { flex: 0 0 auto; }
  .flt-label { min-width: auto; margin-right: 4px; flex: 0 0 auto; }
}

/* edzésprogram: szakaszok */
.phases { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: ph; }
.phases li { background: var(--card); border-radius: var(--r); padding: 16px 18px; counter-increment: ph; }
.phases b { display: block; font-size: 17px; }
.phases b::before { content: counter(ph) ". "; color: var(--red); }
.phases span { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.phases p { margin: 8px 0 0; font-size: 15px; line-height: 1.45; }
.plan th small { display: block; font-weight: 500; font-size: 12px; opacity: .75; margin-top: 2px; text-transform: none; letter-spacing: 0; }
.plan .meta { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) { .phases { grid-template-columns: 1fr; } }
.plan .meta { display: flex; border: 0; padding: 0; border-radius: 0; }
.plan .meta span { display: inline-block; font-weight: 600; border: 1.5px solid var(--ink); padding: 7px 14px; border-radius: 999px; }
.plan .meta:empty { display: none; }

/* ---------- süti sáv ---------- */
.consent {
  position: fixed; z-index: 1300; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-left: auto;
  background: #FFD84D; color: #1C1F22; border-radius: var(--r); padding: 18px 20px 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35), 0 0 0 3px #1C1F22; display: grid; gap: 12px;
  transform: translateY(calc(100% + 140px)); opacity: 0;
  transition: transform .55s cubic-bezier(.2,1.25,.4,1), opacity .3s ease;
}
.consent.in { transform: none; opacity: 1; }
.consent[hidden] { display: none; }
.consent p { margin: 0; font-size: 15px; line-height: 1.5; }
.consent .consent-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.consent .consent-title svg { width: 24px; height: 24px; flex: none; }
.consent a { color: #1C1F22; font-weight: 700; }
.consent-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.consent .btn { min-height: 46px; font-size: 15px; padding: 0 22px; background: #1C1F22; color: #FFD84D; }
.consent .btn:hover { color: #fff; }
.consent .btn.line { background: transparent; color: #1C1F22; border: 0; box-shadow: inset 0 0 0 2px #1C1F22; }
.consent .btn.line:hover { color: #1C1F22; background: rgba(28,31,34,.08); }
.consent .btn:focus-visible { outline: 3px solid #1C1F22; outline-offset: 3px; }
@media (max-width: 760px) { .consent { bottom: calc(92px + env(safe-area-inset-bottom)); left: 10px; right: 10px; } .consent-btns .btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .consent { transition: opacity .2s ease; transform: none; } }

/* ---------- jogi oldalak ---------- */
.legal { max-width: 860px; }
.legal h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 40px 0 12px; }
.legal h2::after, .legal h2 > .lw::after { width: .22em; height: .22em; }
.legal p { font-size: 17px; line-height: 1.6; margin: 0 0 14px; }
.legal-facts { margin: 0 0 24px; border-top: 1px solid var(--line); }
.legal-facts > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.legal-facts dt { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--muted); padding-top: 3px; }
.legal-facts dd { margin: 0; font-size: 17px; }
@media (max-width: 760px) { .legal-facts > div { grid-template-columns: 1fr; gap: 4px; } }
.hero .wrap > .mega + .hero-row { margin-top: auto; }

/* főoldal: kulcsszavas H1 a gomb fölött, „Napi motiváció” H2 (változatlan kinézet) */
.motd .motd-title { font-family: "Archivo", sans-serif; font-weight: 500; font-stretch: 100%; text-transform: none; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 10px; color: #fff; }
.motd .motd-title::after, .motd .motd-title > .lw::after { display: none; }
.home .hero-cta h1 { font-weight: 500; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 16px; color: #fff; }
@media (max-width: 760px) { .home .hero-cta h1 { font-size: 17px; color: #E8E8E5; } }
@media (max-width: 400px) { .home .hero-cta h1 { font-size: 15px; margin-bottom: 10px; } .motd + .hero-cta { margin-top: 12px; } .motd .quote { min-height: 4.5em; } }
@media (max-width: 400px) {
  .home .hero-cta h1 { font-size: 14px; line-height: 1.3; margin-bottom: 8px; }
  .motd + .hero-cta { margin-top: 6px; }
  .motd .motd-title { font-size: 20px; margin-bottom: 6px; }
  .motd > .tag { margin-bottom: 4px; }
}

/* főoldal: STREET = H1 (a teljes kulcsszavas szöveg csak a keresőknek és képernyőolvasóknak), nagyobb „No limit” */
.hero h1.mega { font-size: 100px; }
.hero h1.mega .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.home .hero-row.bottom { grid-template-columns: 1fr; }
.home .motd { grid-column: 1 / -1; max-width: 760px; }
.home .motd > .tag { font-size: min(118px, calc(min(64vw, 860px) / (var(--len, 10) * 0.62))) !important; margin-bottom: clamp(18px, 2.4vw, 34px); }
@media (max-width: 760px) { .home .motd > .tag { font-size: min(84px, calc((100vw - 40px) / (var(--len, 10) * 0.62))) !important; margin-bottom: 18px; } }
@media (max-width: 400px) { .home .motd > .tag { margin-bottom: 12px; } }
@media (min-width: 761px) { .home .motd > .tag { font-size: min(104px, calc(min(60vw, 820px) / (var(--len, 10) * 0.62))) !important; margin-bottom: clamp(8px, 1.2vw, 18px); } }

/* főoldal: STREET / WORKOUT két sorban, azonos szélességben */
.mega-wrap { margin: 0; padding-top: .02em; }
.mega-wrap .mega { margin: 0; }
.mega-wrap .mega::after { display: none; }
.mega-wrap .mega:first-child { padding-top: clamp(4px, 1vw, 14px); margin-bottom: .05em; }
.mega-wrap .mega-2 { margin-bottom: clamp(10px, 1.6vw, 22px); }
.mega-wrap .mega-2::after { display: inline-block; content: ""; width: .11em; height: .11em; background: var(--red); margin-left: .03em; }

/* edzésterv: a fotó tetejéből vágunk */
.plan-hero .photo { background-position: center 85%; }
/* főoldal desktop: a graffiti kikerül a folyásból, hogy a hero ne legyen magasabb a többinél */
@media (min-width: 761px) {
  .home .motd { position: relative; }
  .home .motd > .tag { position: absolute !important; left: -0.02em !important; bottom: calc(100% + 4px) !important; margin: 0 !important; line-height: 1; }
}
@media (min-width: 761px) { .hero.small .wrap { min-height: clamp(470px, 40vw, 580px); } }
/* főoldal desktop: a graffiti a kép jobb alsó sarkában */
@media (min-width: 761px) {
  .home .motd { position: static; }
  .home .motd > .tag { left: auto !important; right: clamp(20px, 3vw, 40px) !important; bottom: clamp(20px, 3vw, 40px) !important; transform-origin: right bottom !important; }
}
@media (min-width: 761px) { .home .motd > .tag { bottom: clamp(46px, 4.6vw, 70px) !important; } }
@media (min-width: 761px) and (max-width: 1100px) { .home .motd > .tag { font-size: min(72px, 7vw) !important; } }

/* ---------- Útmutatók (cikkek) ---------- */
.prose { max-width: 760px; min-width: 0; }
.prose h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; hyphens: auto; overflow-wrap: break-word; margin: 56px 0 16px; scroll-margin-top: 90px; }
.prose h3 { font-size: clamp(20px, 2vw, 24px); margin: 32px 0 10px; }
.prose p, .prose li { font-size: 18px; line-height: 1.65; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 1.3em; }
.prose li { margin: 0 0 8px; }
.prose ul li::marker { color: var(--red); }
.prose ol li::marker { color: var(--red); font-weight: 700; }
.prose a { color: var(--ink); text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose strong { font-weight: 700; }
.prose blockquote { margin: 24px 0; padding: 18px 22px; background: var(--card); border-left: 4px solid var(--red); border-radius: 0 var(--r) var(--r) 0; }
.prose blockquote p { margin: 0; font-size: 17px; }
.prose table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 16px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; border-bottom: 1.5px solid var(--ink); }
.prose .ex-intro { margin-bottom: 24px; }
.toc-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin: 0 0 8px; }
.toc ol { list-style: none; margin: 0 0 8px; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; border-bottom: 1px solid var(--line); }
.toc a { display: flex; gap: 10px; padding: 9px 0; color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.35; }
.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--red); font-weight: 700; font-size: 13px; padding-top: 1px; }
.toc a:hover { text-decoration: underline; }
.side-text { margin: 8px 0 4px; font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (max-width: 760px) {
  .prose p, .prose li { font-size: 17px; }
  .prose h2 { margin-top: 44px; font-size: 25px; }
}
/* 7 menüpont: mobilon a Főoldal kimarad a sávból (a fejlécben a streetworkout.hu felirat a főoldalra visz), tableten szűkebb gombok */
@media (min-width: 761px) and (max-width: 900px) { .nav a { padding: 6px 6px; font-size: 13px; } .nav { gap: 0; } .brand { font-size: 13px; } }
.more-head h2 { font-size: clamp(32px, 4.6vw, 64px) !important; }
.prose td:last-child { white-space: nowrap; }
.guide-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.guide-links a { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border-radius: var(--r); background: var(--card); text-decoration: none; color: var(--ink); border: 1px solid transparent; }
.guide-links a:hover { border-color: var(--ink); }
.guide-links small { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.guide-links b { font-size: 19px; line-height: 1.25; }
.guide-links b::after { content: " →"; color: var(--red); }
.ex-side .note a { color: inherit; text-decoration-color: var(--red); }
.legal h2 { hyphens: auto; overflow-wrap: break-word; }
.mega.split { line-height: .9; }

/* ---------- Térkép oldal: teljes képernyős térkép, lebegő keresőpanellel ---------- */
.mapfs { position: relative; }
#terkep.mapfs { scroll-margin-top: 68px; } /* a „Teljes képernyős térkép” link pont a felső sáv alá ugrik */
.map-fs { height: calc(100svh - 68px); min-height: 480px; background: #D9DAD6; }
.map-panel { position: absolute; z-index: 1000; top: 16px; left: 16px; width: 360px; max-width: calc(100% - 32px);
  background: var(--card); color: var(--ink); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 14px 16px 16px; }
.map-panel .search { margin: 0; }
.map-panel .search input { flex-basis: 100%; }
.map-panel .search .btn { flex: 1 1 0; }
.map-panel .err { margin: 10px 0 0; min-height: 0; }
.map-panel .err:empty { display: none; }
.panel-stats { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.panel-stats b { color: var(--ink); }
.map-panel .legend { margin-top: 10px; gap: 6px 16px; font-size: 13px; }
.panel-toggle { display: block; margin: 0 0 10px auto; background: none; border: 0; padding: 4px 2px; font: 600 13px "Archivo", sans-serif; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 24px; }
.panel-toggle .pt-closed { display: none; }
.map-panel.closed { width: auto; padding: 6px 12px; }
.map-panel.closed .panel-body { display: none; }
.map-panel.closed .panel-toggle { margin: 0; color: var(--ink); }
.map-panel.closed .pt-open { display: none; }
.map-panel.closed .pt-closed { display: inline; }
@media (max-width: 760px) {
  /* mobilon marad egy sáv a térkép alatt, amin tovább lehet görgetni az oldalt */
  #terkep.mapfs { scroll-margin-top: 58px; }
  .map-fs { height: calc(100svh - 58px - 74px - 48px); min-height: 420px; }
  .map-fs .leaflet-control-zoom { display: none; } /* mobilon csippentéssel nagyítunk, a gombok a panel alá esnének */
  .map-panel { top: 10px; left: 10px; right: 10px; width: auto; max-width: none; padding: 8px 12px 10px; border-radius: 14px; }
  .map-panel .search { gap: 8px; }
  .map-panel .search input { flex-basis: 100%; min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  .map-panel .search .btn { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  .panel-stats { display: none; }
  .panel-toggle { margin-bottom: 4px; }
  .map-panel .legend { margin-top: 8px; font-size: 12px; gap: 4px 12px; }
  .map-panel.closed { right: auto; }
}

/* ---------- térképszűrő: a jelmagyarázat elemei kapcsolók ---------- */
.lg-btn { display: inline-flex; align-items: center; gap: 0; min-height: 32px; padding: 4px 12px 4px 8px; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); font: 600 13px/1.2 "Archivo", sans-serif; cursor: pointer; text-align: left; }
.lg-btn[aria-pressed="false"] { opacity: .5; text-decoration: line-through; background: transparent; }
.lg-btn:hover { border-color: var(--ink); }
.map-filter { gap: 8px; }
.marker-cluster-custom.has-sw { border-color: var(--red); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.35); }
.map-empty { position: absolute; z-index: 900; left: 50%; bottom: 28px; transform: translateX(-50%); background: #111315; color: #fff;
  font: 600 14px/1.3 "Archivo", sans-serif; padding: 10px 16px; border-radius: 999px; pointer-events: none; white-space: nowrap; }
.map-empty[hidden] { display: none; }

/* ---------- parkoldal ---------- */
.map-park { height: clamp(280px, 42vh, 420px); }
.park-eq { display: flex; flex-wrap: wrap; gap: 8px; }
.park h3 a { text-decoration: none; }
.park h3 a:hover { text-decoration: underline; }
.park-cta-m { margin-top: 24px; justify-content: center; width: 100%; }
@media (min-width: 961px) { .park-cta-m { display: none; } }
.cities a span { white-space: nowrap; }
.cities a span.dname, .cities a:hover span.dname { display: flex; flex-direction: column; gap: 2px; white-space: normal; color: inherit; font-size: inherit; font-weight: 700; }
.cities a span.dname small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.sw-link { margin: 0 0 14px; font-weight: 700; }
.sw-link a { display: inline-flex; align-items: center; gap: 8px; text-underline-offset: 4px; min-height: 24px; }
.sw-link a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.sw-link a::after { content: "→"; color: var(--red); }
.section-head.sw-group h2 { font-size: clamp(30px, 4.2vw, 60px); }
@media (max-width: 760px) { .section-head.sw-group h2 { font-size: clamp(26px, 7.6vw, 44px); } }

/* ---------- Városok: kereső és betűsáv ---------- */
.city-tools { position: sticky; top: 68px; z-index: 50; background: var(--paper); padding: 12px 0 10px; margin-top: 16px; border-bottom: 1px solid var(--line); }
html.hide-top .city-tools { top: 0; }
.city-tools input { width: 100%; }
.abc { display: flex; gap: 2px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.abc::-webkit-scrollbar { display: none; }
.abc a { flex: 0 0 auto; min-width: 32px; min-height: 32px; display: grid; place-items: center; font-weight: 800; text-decoration: none; border-radius: 8px; }
.abc a:hover, .abc a:focus-visible { background: var(--ink); color: var(--paper); }
.letter { scroll-margin-top: 190px; }
#filter-results { margin-top: 24px; }
@media (max-width: 760px) { .city-tools { top: 58px; } html.hide-top .city-tools { top: 0; } .letter { scroll-margin-top: 170px; } }

/* ---------- menü (2026-10): asztalon Parkok · Edzésterv · Gyakorlatok · Útmutatók · Zenék + Közelemben gomb;
   mobilon alsó sáv: Parkok · Gyakorlatok · Közelemben · Útmutatók · Edzésterv ---------- */
.nav .n-near { display: none; }
.near { width: auto; height: auto; border-radius: 999px; padding: 8px 14px 8px 10px; gap: 8px; display: inline-flex; align-items: center;
  border: 1.5px solid rgba(255,255,255,.35); font-weight: 600; font-size: 15px; text-decoration: none; }
.near:hover { background: var(--graphite-2); border-color: #fff; }
.near svg { width: 20px; height: 20px; color: var(--red); }
@media (min-width: 761px) and (max-width: 900px) { .near span { display: none; } .near { padding: 8px; } }
@media (max-width: 760px) {
  .top .near { display: none; }
  .nav .n-music { display: none; }
  .nav .n-near { display: flex; }
  .nav .n-parks { order: 1; } .nav .n-ex { order: 2; } .nav .n-near { order: 3; } .nav .n-guides { order: 4; } .nav .n-plan { order: 5; }
  .nav .n-near svg { color: #fff; background: var(--red); border-radius: 50%; padding: 4px; width: 30px; height: 30px; margin-top: -6px; }
  .nav a { font-size: 11px; }
}
/* lábléc menü */
.foot-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; margin: 8px 0 36px; }
.foot-nav div { display: flex; flex-direction: column; gap: 6px; }
.foot-nav a { color: #E8E8E5; text-decoration: none; font-weight: 500; font-size: 15px; padding: 3px 0; min-height: 24px; overflow-wrap: anywhere; }
.foot-nav a:hover { color: #fff; text-decoration: underline; }
.foot-h { color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; margin: 0 0 4px !important; }
@media (max-width: 760px) { .foot-nav { grid-template-columns: 1fr 1fr; } }

/* ---------- fejlécképek WebP-ben (asztalon 1600 px, mobilon 900 px); ahol nem támogatott, marad a JPG ---------- */
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .hero .photo { background-image: image-set(var(--img-w, var(--img)) type("image/webp"), var(--img) type("image/jpeg")); }
  .feature .ph { background-image: image-set(var(--img-w, var(--img)) type("image/webp"), var(--img) type("image/jpeg")); }
  @media (max-width: 760px) {
    .hero .photo, .feature .ph { background-image: image-set(var(--img-m, var(--img)) type("image/webp"), var(--img) type("image/jpeg")); }
  }
}

/* ---------- akadálymentesség ---------- */
/* „Ugrás a tartalomra”: csak billentyűzetes fókusznál látszik */
.skip { position: absolute; left: 12px; top: -60px; z-index: 3000; background: #fff; color: #111315; font-weight: 700; padding: 10px 16px; border-radius: 999px; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.skip:focus { top: 12px; }
main:focus { outline: none; }
/* kis szöveges linkek: nagyobb kattintható terület (min. 24 px), a sorköz nem változik */
.crumbs a, .park .actions a.small, .section-head .lead a, .note a, .lead a, footer .foot-cols a, .where a { padding: 5px 0; }
.leaflet-container a.leaflet-popup-close-button { width: 32px; height: 32px; font-size: 22px; line-height: 30px; }
.leaflet-marker-icon:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 50%; }

/* ---------- mentett terv: link, haladás, saját tervek ---------- */
.plan .tools { display: flex; flex-wrap: wrap; gap: 10px; }
.share { margin-top: 28px; background: var(--card); border-radius: var(--r); padding: 20px; }
.share label { display: block; font-weight: 800; margin-bottom: 8px; }
.share-row { display: flex; gap: 10px; flex-wrap: wrap; }
.share-row input { flex: 1 1 260px; min-width: 0; font-size: 15px; }
.share .small { margin: 10px 0 0; color: var(--muted); }
.progress { background: var(--card); border-radius: var(--r); padding: 20px 20px 16px; margin-bottom: 8px; }
.progress h3 { margin: 0 0 6px; font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 22px; }
.progress .lead { margin: 0 0 10px; }
.progress .bar { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.progress .bar i { display: block; height: 100%; width: 0; background: var(--red); border-radius: 999px; transition: width .3s; }
.progress .weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px 18px; }
.progress .wk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.progress .wk b { min-width: 52px; font-size: 14px; }
.tick { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; cursor: pointer; }
.tick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tick span:first-of-type { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ink); font-size: 13px; font-weight: 700; }
.tick input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.tick input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.progress .small { margin: 12px 0 0; color: var(--muted); }
.my-plans { margin-top: 40px; }
.my-plans h3 { font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 20px; margin: 0 0 10px; }
.my-plans ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.my-plans li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.my-plans li span { color: var(--muted); font-size: 14px; white-space: nowrap; }

/* ---------- szintmérő ---------- */
.lvl-form { background: var(--card); border-radius: var(--r); padding: 24px; }
.lvl-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0 18px; }
.lvl-inputs label { display: block; }
.lvl-inputs input { width: 100%; }
.lvl-inputs small { font-weight: 500; color: var(--muted); }
@media (max-width: 760px) { .lvl-inputs { grid-template-columns: minmax(0, 1fr); } }
.lvl-inputs input { min-width: 0; box-sizing: border-box; }
.lvl-result { margin-top: 28px; background: var(--card); border-radius: var(--r); padding: 24px; }
.lvl-badge { display: inline-block; margin: 0 0 12px; background: var(--red); color: #fff; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(24px, 4vw, 40px); padding: 4px 18px; border-radius: 12px; }
.lvl-result h3 { margin: 24px 0 8px; font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 18px; }
.lvl-result ul { margin: 0; padding-left: 20px; }
.lvl-result li { margin: 4px 0; }
.lvl-bar { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.lvl-bar i { display: block; height: 100%; background: var(--red); border-radius: 999px; }
.lvl-result .small { color: var(--muted); margin: 6px 0 0; }
.lvl-result .tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---------- tervkészítés közbeni visszajelzés ---------- */
.plan-wait { margin-top: 32px; background: var(--card); border-radius: var(--r); padding: 22px 24px; }
.pw-step { margin: 0 0 14px; font-weight: 800; font-size: 19px; min-height: 1.4em; }
.pw-bar { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.pw-bar i { display: block; height: 100%; width: 0; background: var(--red); border-radius: 999px; transition: width 1s linear; }
.pw-meta { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .pw-bar i { transition: none; } }

/* ---------- világos/sötét mód gomb ---------- */
.top-right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.theme-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: #fff; cursor: pointer; padding: 0; }
.theme-btn:hover { background: var(--graphite-2); }
.theme-btn svg { width: 21px; height: 21px; }
.theme-btn .i-sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; } :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; } }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }

/* „no excuses” háttérfelirat: asztalon a jobb oszlopba férjen, ne bújjon a fotó mögé, és ne vágódjon le a széle */
@media (min-width: 861px) {
  .section.dark > .tag { right: 2%; font-size: min(220px, calc(50vw / 6)); }
}
@media (max-width: 860px) {
  .section.dark > .tag { top: auto; bottom: 3%; right: 50%; transform: translateX(50%) rotate(-8deg); font-size: calc((100vw - 32px) / 5.6); }
}