<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="strict-origin-when-cross-origin">

<!-- Apple Touch Icon (iOS Safari "Add to Home Screen") -->
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="icons/icon-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="icons/icon-512.png">
<link rel="icon" type="image/x-icon" href="icons/favicon.ico">

<!-- iOS specifikus webapp beállítások -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Road to HM">

<!-- Android Chrome beállítások -->
<meta name="theme-color" content="#0e0f0c">
<meta name="mobile-web-app-capable" content="yes">
<link rel="manifest" href="manifest.json">

<title>Road to Half-Marathon</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #0e0f0c;
    --bg-elev: #1a1c17;
    --bg-card: #181a15;
    --ink: #f4f1e8;
    --ink-dim: #a8a59a;
    --ink-muted: #6d6b62;
    --accent: #d4ff3a;
    --accent-warm: #ff7a3a;
    --line: #2b2d27;
    --danger: #ff5757;
    --success: #6dd47e;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Fraunces', Georgia, serif;
    font-feature-settings: "ss01" on;
    line-height: 1.6;
    overflow-x: hidden;
  }

  a { color: var(--accent); }

  /* === HERO === */
  .hero {
    padding: 60px 24px 40px;
    max-width: 1280px;
    margin: 0 auto;
    border-bottom: 1px solid var(--line);
    position: relative;
  }

  .hero::before {
    content: "";
    position: absolute;
    top: 30px;
    right: 24px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    opacity: 0.08;
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
  }

  .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 20px;
  }

  .eyebrow::before { content: "◆"; margin-right: 12px; color: var(--accent); }

  h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(40px, 7vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
  }

  h1 .accent {
    color: var(--accent);
    font-style: italic;
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: 0.85em;
    display: inline-block;
    transform: translateY(-0.05em);
  }

  .hero-meta {
    font-size: 16px;
    color: var(--ink-dim);
    margin-bottom: 40px;
  }

  .hero-meta strong { color: var(--ink); font-weight: 600; }

  /* === DASHBOARD === */
  .dashboard {
    max-width: 1280px;
    margin: 0 auto 32px;
    padding: 0 24px;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }

  .stat {
    background: var(--bg-card);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-muted);
  }

  .stat-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 48px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.005em;
  }

  .stat-value.highlight { color: var(--accent); }
  .stat-value.success { color: var(--success); }

  .stat-unit {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--ink-dim);
    margin-left: 6px;
  }

  .stat-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-dim);
  }

  .stat-sub.up::before { content: "▲ "; color: var(--success); }
  .stat-sub.down::before { content: "▼ "; color: var(--danger); }
  .stat-sub.neutral::before { content: "● "; color: var(--ink-muted); }

  /* === PROGRESS BAR === */
  .progress-section {
    max-width: 1280px;
    margin: 0 auto 60px;
    padding: 0 24px;
  }

  .progress-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
  }

  .progress-label-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-muted);
  }

  .progress-label-pct {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px;
    color: var(--accent);
  }

  .progress-bar {
    height: 8px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    overflow: hidden;
    position: relative;
  }

  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-warm) 100%);
    transition: width 1s ease-out;
  }

  .progress-marks {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
  }

  /* === TABS === */
  .tabs {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 0;
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 50;
  }

  .tab {
    background: none;
    border: 0;
    padding: 24px 28px;
    color: var(--ink-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .tab:hover { color: var(--ink); }
  .tab.active { color: var(--accent); }

  .tab.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 28px;
    right: 28px;
    height: 2px;
    background: var(--accent);
  }

  .tab-num {
    color: var(--ink-muted);
    font-size: 10px;
  }

  .tab.active .tab-num { color: var(--accent); }

  /* === TAB CONTENT === */
  .tab-content {
    display: none;
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 24px 80px;
  }

  .tab-content.active { display: block; }

  /* === SECTION NAV (a heti terv fül tetején) === */
  .section-nav {
    background: var(--bg);
    border: 1px solid var(--line);
    margin-bottom: 32px;
    padding: 16px 20px;
  }

  .section-nav-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-muted);
    display: block;
    margin-bottom: 12px;
  }

  .section-nav-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .section-nav-loading {
    color: var(--ink-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
  }

  .section-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    color: var(--ink-dim);
    text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .section-nav-item:hover {
    background: var(--bg-elev);
    border-color: var(--accent);
    color: var(--ink);
  }

  .section-nav-item.active {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
  }

  .section-nav-item .nav-num {
    font-weight: 600;
    color: var(--accent);
  }

  .section-nav-item:hover .nav-num,
  .section-nav-item.active .nav-num {
    color: var(--bg);
  }

  /* === MARKDOWN STYLES (Tab 1) === */
  .md h1, .md h2, .md h3, .md h4 {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: -0.005em;
    margin-top: 56px;
    margin-bottom: 18px;
    line-height: 1.05;
    scroll-margin-top: 80px;
  }

  .md h1 { font-size: clamp(36px, 5vw, 60px); }
  .md h2 {
    font-size: clamp(28px, 4vw, 42px);
    border-top: 1px solid var(--line);
    padding-top: 40px;
  }
  .md h3 { font-size: clamp(22px, 3vw, 28px); color: var(--ink); }
  .md h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    margin-top: 32px;
    margin-bottom: 12px;
  }

  .md p {
    margin-bottom: 16px;
    color: var(--ink-dim);
    font-size: 17px;
    line-height: 1.65;
    max-width: 760px;
  }

  .md p strong { color: var(--ink); font-weight: 600; }
  .md p em { color: var(--ink); font-style: italic; }

  .md ul, .md ol {
    margin-bottom: 20px;
    padding-left: 0;
    list-style: none;
    max-width: 760px;
  }

  .md li {
    color: var(--ink-dim);
    font-size: 16px;
    padding: 6px 0 6px 24px;
    position: relative;
    line-height: 1.6;
  }

  .md ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent);
  }

  .md li strong { color: var(--ink); font-weight: 600; }

  .md table {
    width: 100%;
    max-width: 880px;
    border-collapse: collapse;
    margin: 24px 0;
    background: var(--bg-card);
    border: 1px solid var(--line);
    overflow-x: auto;
  }

  .md th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    text-align: left;
    padding: 14px 16px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--line);
    font-weight: 400;
  }

  .md td {
    padding: 14px 16px;
    color: var(--ink-dim);
    font-size: 14px;
    border-bottom: 1px solid var(--line);
  }

  .md tr:last-child td { border-bottom: 0; }
  .md td strong { color: var(--ink); }

  .md blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 20px;
    margin: 24px 0;
    color: var(--ink-dim);
    font-style: italic;
  }

  .md code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    background: var(--bg-elev);
    padding: 2px 6px;
    color: var(--accent);
    border: 1px solid var(--line);
  }

  .md hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 56px 0;
  }

  .md a { color: var(--accent); }

  /* === GUIDE TAB === */
  .guide-cta {
    background: var(--bg-card);
    border: 1px solid var(--line);
    padding: 48px;
    text-align: center;
  }

  .guide-cta h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1;
    margin-bottom: 20px;
    letter-spacing: -0.005em;
  }

  .guide-cta p {
    color: var(--ink-dim);
    font-size: 17px;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
  }

  .guide-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--accent);
    color: var(--bg);
    text-decoration: none;
    padding: 18px 32px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    transition: background 0.2s ease;
  }

  .guide-button:hover { background: var(--accent-warm); }
  .guide-button::after { content: "→"; }

  .guide-overview {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }

  .guide-cat {
    background: var(--bg-card);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .guide-cat-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--accent);
    letter-spacing: 0.2em;
  }

  .guide-cat-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    line-height: 1;
  }

  .guide-cat-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-muted);
    margin-top: 4px;
  }

  /* === FOOTER === */
  .footer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 60px 24px 80px;
    text-align: center;
    border-top: 1px solid var(--line);
  }

  .footer p {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-muted);
    line-height: 1.8;
  }

  .footer-line {
    width: 60px;
    height: 2px;
    background: var(--accent);
    margin: 24px auto;
  }

  /* Mobile fine-tuning */
  @media (max-width: 720px) {
    .tab { padding: 18px 16px; font-size: 11px; }
    .tab.active::after { left: 16px; right: 16px; }
    .stat-value { font-size: 36px; }
    .md table { font-size: 12px; }
    .md th, .md td { padding: 10px 12px; }
  }


  /* === GYAKORLAT-KALAUZ scope-olt stílusai (#kalauz scope) === */





  /* --- HEADER --- */
  #kalauz .hero {
    padding: 80px 24px 60px;
    max-width: 1200px;
    margin: 0 auto;
    border-bottom: 1px solid var(--line);
    position: relative;
  }

  #kalauz .hero::before {
    content: "";
    position: absolute;
    top: 30px;
    right: 24px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    opacity: 0.08;
    filter: blur(40px);
    z-index: 0;
  }

  #kalauz .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
  }

  #kalauz .eyebrow::before {
    content: "◆";
    margin-right: 12px;
    color: var(--accent);
  }

  #kalauz h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(48px, 9vw, 120px);
    line-height: 0.92;
    letter-spacing: -0.01em;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
  }

  #kalauz h1 .accent {
    color: var(--accent);
    font-style: italic;
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: 0.85em;
    display: inline-block;
    transform: translateY(-0.06em);
  }

  #kalauz .lead {
    font-size: clamp(17px, 2vw, 21px);
    color: var(--ink-dim);
    max-width: 680px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
  }

  #kalauz .lead strong {
    color: var(--ink);
    font-weight: 600;
  }

  /* --- TOC --- */
  #kalauz .toc {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
    border-bottom: 1px solid var(--line);
  }

  #kalauz .toc h2 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-muted);
    margin-bottom: 24px;
  }

  #kalauz .toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    background: var(--line);
  }

  #kalauz .toc-item {
    background: var(--bg);
    padding: 20px 24px;
    text-decoration: none;
    color: var(--ink);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  #kalauz .toc-item:hover {
    background: var(--bg-elev);
  }

  #kalauz .toc-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--accent);
  }

  #kalauz .toc-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 18px;
  }

  #kalauz .toc-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-muted);
  }

  /* --- SECTIONS --- */
  #kalauz .section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px 40px;
    border-bottom: 1px solid var(--line);
  }

  #kalauz .section-header {
    margin-bottom: 56px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    align-items: end;
  }

  @media (max-width: 720px) {
    #kalauz .section-header {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }

  #kalauz .section-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--accent);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  #kalauz .section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.005em;
    margin-top: 12px;
  }

  #kalauz .section-desc {
    font-size: 17px;
    color: var(--ink-dim);
    line-height: 1.6;
  }

  /* --- EXERCISE GRID --- */
  #kalauz .exercises {
    display: grid;
    gap: 32px;
  }

  #kalauz .exercise {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: border-color 0.3s;
  }

  #kalauz .exercise:hover {
    border-color: var(--accent);
  }

  @media (max-width: 880px) {
    #kalauz .exercise {
      grid-template-columns: 1fr;
    }
  }

  #kalauz .exercise-video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
  }

  #kalauz .exercise-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  /* Thumbnail-as klikk-link a videóhoz */
  #kalauz .video-thumb {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    text-decoration: none;
    color: inherit;
  }

  #kalauz .video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.3s ease;
    filter: brightness(0.85);
  }

  #kalauz .video-thumb:hover img {
    transform: scale(1.04);
    filter: brightness(1);
  }

  #kalauz .play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
  }

  #kalauz .play-overlay svg {
    transition: transform 0.3s ease;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.6));
  }

  #kalauz .video-thumb:hover .play-overlay svg {
    transform: scale(1.08);
  }

  #kalauz .play-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #fff;
    background: rgba(0,0,0,0.6);
    padding: 6px 12px;
    border: 1px solid var(--accent);
    backdrop-filter: blur(4px);
  }

  #kalauz .video-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-elev);
    color: var(--ink-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-align: center;
    padding: 20px;
  }

  #kalauz .exercise-body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  @media (max-width: 880px) {
    #kalauz .exercise-body {
      padding: 24px;
    }
  }

  #kalauz .exercise-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    width: fit-content;
  }

  #kalauz .exercise-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
  }

  #kalauz .exercise-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    line-height: 1;
    letter-spacing: 0;
  }

  #kalauz .exercise-title small {
    font-family: 'Fraunces', serif;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    color: var(--ink-dim);
    display: block;
    letter-spacing: 0.02em;
    margin-top: 6px;
  }

  #kalauz .exercise-desc {
    font-size: 16px;
    color: var(--ink-dim);
    line-height: 1.6;
  }

  #kalauz .exercise-cues {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

  #kalauz .exercise-cues h4 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-muted);
    font-weight: 400;
    margin-bottom: 4px;
  }

  #kalauz .cue {
    font-size: 14px;
    color: var(--ink);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
  }

  #kalauz .cue::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent);
  }

  #kalauz .cue.warning {
    color: #ffc8c8;
  }

  #kalauz .cue.warning::before {
    content: "⚠";
    color: var(--danger);
  }

  #kalauz .exercise-meta {
    display: flex;
    gap: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  #kalauz .exercise-meta span strong {
    color: var(--ink);
    margin-left: 4px;
  }

  /* --- BACKUP LINK --- */
  #kalauz .backup-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--accent);
    text-decoration: none;
    margin-top: 4px;
    border-bottom: 1px dashed var(--line);
    padding-bottom: 2px;
    width: fit-content;
  }

  #kalauz .backup-link:hover {
    color: var(--accent-warm);
    border-color: var(--accent-warm);
  }

  /* --- FOOTER --- */
  #kalauz .footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px 80px;
    text-align: center;
  }

  #kalauz .footer p {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.8;
  }

  #kalauz .footer .accent-line {
    width: 60px;
    height: 2px;
    background: var(--accent);
    margin: 24px auto;
  }

  /* --- BACK TO TOP --- */
  #kalauz .back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--accent);
    color: var(--bg);
    padding: 14px 20px;
    border: 0;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 100;
  }

  #kalauz .back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  #kalauz .back-to-top:hover {
    background: var(--accent-warm);
  }

</style>
</head>
<body>

<!-- ====== HERO ====== -->
<header class="hero">
  <div class="eyebrow">Road to · 2026</div>
  <h1>ROAD TO<br><span class="accent">half-marathon</span></h1>
  <p class="hero-meta">
    Cél-verseny: <strong>Wizz Air Budapest félmaraton, 2026. szeptember 6.</strong> · <strong>19 hét felkészülés</strong> · Cél: első félmaraton, fenntartható tempóval, mosolyogva.
  </p>
</header>

<!-- ====== DASHBOARD ====== -->
<section class="dashboard">
  <div class="stats-grid">
    <div class="stat">
      <span class="stat-label">Hátralévő idő</span>
      <span class="stat-value highlight" id="stat-days">131<span class="stat-unit">nap</span></span>
      <span class="stat-sub neutral" id="stat-days-sub">19 hét felkészülés</span>
    </div>
    <div class="stat">
      <span class="stat-label">Aktuális hét</span>
      <span class="stat-value" id="stat-week">1<span class="stat-unit">/ 19</span></span>
      <span class="stat-sub neutral" id="stat-week-sub">Regenerációs hét</span>
    </div>
    <div class="stat">
      <span class="stat-label">Eddig futott</span>
      <span class="stat-value" id="stat-km">0<span class="stat-unit">km</span></span>
      <span class="stat-sub neutral" id="stat-km-sub">A felkészülés még nem indult</span>
    </div>
    <div class="stat">
      <span class="stat-label">Aktuális súly</span>
      <span class="stat-value" id="stat-weight">79<span class="stat-unit">kg</span></span>
      <span class="stat-sub neutral" id="stat-weight-sub">Cél: kb. 73-75 kg</span>
    </div>
    <div class="stat">
      <span class="stat-label">VO₂ max</span>
      <span class="stat-value success" id="stat-vo2">46.2</span>
      <span class="stat-sub up" id="stat-vo2-sub">+9% utolsó 5 hónap</span>
    </div>
  </div>
</section>

<!-- ====== PROGRESS ====== -->
<section class="progress-section">
  <div class="progress-label">
    <span class="progress-label-text">Felkészülési előrehaladás</span>
    <span class="progress-label-pct" id="progress-pct">5%</span>
  </div>
  <div class="progress-bar">
    <div class="progress-fill" id="progress-fill" style="width: 5%"></div>
  </div>
  <div class="progress-marks">
    <span>Ápr 28 · Start</span>
    <span>Júl · Csúcs</span>
    <span>Szept 6 · Verseny</span>
  </div>
</section>

<!-- ====== TABS ====== -->
<nav class="tabs">
  <a class="tab active" data-tab="terv" href="#terv">
    <span class="tab-num">01</span>
    <span>Heti terv</span>
  </a>
  <a class="tab" data-tab="kalauz" href="#kalauz">
    <span class="tab-num">02</span>
    <span>Gyakorlat-kalauz</span>
  </a>
</nav>

<!-- ====== TAB 1: TERV ====== -->
<div class="tab-content active" id="terv">
  <nav class="section-nav" id="section-nav" aria-label="Szekció-navigáció">
    <span class="section-nav-label">Tartalom</span>
    <div class="section-nav-items" id="section-nav-items">
      <span class="section-nav-loading">Betöltés…</span>
    </div>
  </nav>
  <div class="md" id="markdown-content">
    <p style="color: var(--ink-muted);"><em>Heti terv betöltése…</em></p>
  </div>
</div>

<!-- ====== TAB 2: GYAKORLAT-KALAUZ (integrálva, nincs külön HTML fájl) ====== -->
<div class="tab-content" id="kalauz">
  <header class="hero">
  <div class="eyebrow">Felkészülési kalauz · 2026</div>
  <h1>GYAKORLAT-<br><span class="accent">kalauz</span></h1>
  <p class="lead">
    Beágyazott videós útmutatók a 19 hetes félmaraton-felkészülésed minden gyakorlatához. <strong>Erőedzések</strong>, <strong>nyújtások</strong> és <strong>mobilizáló mozdulatok</strong> — egy helyen, profi forrásokból. A videóra kattintva indul a lejátszás közvetlenül itt, az oldalon.
  </p>
</header>
  <nav class="toc">
  <h2>Tartalomjegyzék</h2>
  <div class="toc-grid">
    <a class="toc-item" href="#otthoni-ero">
      <span class="toc-num">01</span>
      <span class="toc-title">Otthoni erőedzés (A)</span>
      <span class="toc-meta">8 gyakorlat</span>
    </a>
    <a class="toc-item" href="#konditermi-ero">
      <span class="toc-num">02</span>
      <span class="toc-title">Konditermi erőedzés (B)</span>
      <span class="toc-meta">9 gyakorlat</span>
    </a>
    <a class="toc-item" href="#nyujtas-futas-utan">
      <span class="toc-num">03</span>
      <span class="toc-title">Nyújtás futás után</span>
      <span class="toc-meta">8 gyakorlat</span>
    </a>
    <a class="toc-item" href="#mobilitas-reggel">
      <span class="toc-num">04</span>
      <span class="toc-title">Reggeli mobilizálás</span>
      <span class="toc-meta">5 gyakorlat</span>
    </a>
    <a class="toc-item" href="#mikro-szunet">
      <span class="toc-num">05</span>
      <span class="toc-title">Mikro-szünetek (asztaltól)</span>
      <span class="toc-meta">5 gyakorlat</span>
    </a>
  </div>
</nav>
  <section class="section" id="otthoni-ero">
  <div class="section-header">
    <div>
      <div class="section-num">01 / Erőedzés A</div>
      <h2 class="section-title">Otthoni<br>erőedzés</h2>
    </div>
    <p class="section-desc">
      Testsúlyos és gumiszalagos gyakorlatok. <strong>3 szett, 8-15 ismétlés, 60 mp pihenő</strong>. Az alapok, amik a derék-stabilitást és glute-erőt építik. Hetente egyszer.
    </p>
  </div>

  <div class="exercises">

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=wPM8icPu6H8" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Glute Bridge">
          <img src="https://img.youtube.com/vi/wPM8icPu6H8/hqdefault.jpg" alt="Glute Bridge" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">A1 — Glute / hátsó lánc</span>
        <h3 class="exercise-title">Glute bridge<small>Csípőemelés hanyatt fekve</small></h3>
        <p class="exercise-desc">A glute (farizom) erősítésének alapgyakorlata. Derék-barát, nem terheli a gerincet, és pont a futáshoz szükséges hátsó lánc izmait dolgozza meg.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Hanyatt fekve, talpak földön, térd hajlítva</div>
          <div class="cue">Csípőt felnyomod, glute-t összeszorítod a tetején</div>
          <div class="cue">A mozgás a glute-ból jön, nem a derékból</div>
          <div class="cue warning">Ne hyperextend-eld a derekad — egyenes vonal vállból csípőből térdig</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3</strong></span>
          <span>Ism: <strong>12-15</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=MeIiIdhvXT4" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Goblet Squat">
          <img src="https://img.youtube.com/vi/MeIiIdhvXT4/hqdefault.jpg" alt="Goblet Squat" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">A2 — Láb / quad</span>
        <h3 class="exercise-title">Goblet squat<small>Súlyzós guggolás mellkasnál</small></h3>
        <p class="exercise-desc">Súly nélkül is jó (akkor csak testsúlyos guggolás). Egy kettlebellt vagy súlyzót tartasz a mellkasnál, és úgy guggolsz le. A goblet pozíció természetesen segíti az egyenes hátat.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Talp egész szélességben a földön, súly a sarkon</div>
          <div class="cue">Térd a lábujj irányába, ne befelé</div>
          <div class="cue">Combvízszintesig le, vagy mélyebbre, ha kényelmes</div>
          <div class="cue warning">Ha térdfájdalom: csak combvízszintesig menj le</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3</strong></span>
          <span>Ism: <strong>10-12</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=_4mBCHBowFM" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Single-leg Romanian Deadlift">
          <img src="https://img.youtube.com/vi/_4mBCHBowFM/hqdefault.jpg" alt="Single-leg Romanian Deadlift" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">A3 — Hátsó lánc / egyensúly</span>
        <h3 class="exercise-title">Single-leg deadlift<small>Egylábas előrehajlás</small></h3>
        <p class="exercise-desc">Egyensúly, hátsó comb és glute. Eleinte súly nélkül, csak testsúllyal — később lehet kis súlyzót fogni. A futóknak különösen hasznos, mert futás közben is egy lábon vagyunk.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Egy lábon állsz, csípőből hajolsz előre</div>
          <div class="cue">Hátsó láb a folytatása a hátadnak (egyenes vonal)</div>
          <div class="cue">Hát egyenes, ne kerekedj</div>
          <div class="cue warning">Ne csavard ki a csípőt — szögek párhuzamosan a földdel</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3</strong></span>
          <span>Ism: <strong>8-10 / oldal</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=IODxDxX7oi4" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Push-up Form">
          <img src="https://img.youtube.com/vi/IODxDxX7oi4/hqdefault.jpg" alt="Push-up Form" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">A4 — Mell / tricepsz / váll</span>
        <h3 class="exercise-title">Push-up<small>Fekvőtámasz (térdről variáció elérhető)</small></h3>
        <p class="exercise-desc">A klasszikus testsúlyos felsőtest-gyakorlat. Mellizom, tricepsz, vállak. Ha a klasszikus 12+ ism nehéz, kezdd térdről.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Test egyenes vonal sarokból fejtetőig (plank pozíció)</div>
          <div class="cue">Könyökök 45 fokban, ne kifelé</div>
          <div class="cue">Mellkast viszed közel a földhöz, nem az állat</div>
          <div class="cue warning">Ha a derék behajlik vagy felgömbölödik, csökkentsd az ismétlést</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3</strong></span>
          <span>Ism: <strong>8-12</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=xQ6FVk0BoRM" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: TRX Row / Resistance Band Row">
          <img src="https://img.youtube.com/vi/xQ6FVk0BoRM/hqdefault.jpg" alt="TRX Row / Resistance Band Row" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">A5 — Felső hát / húzás</span>
        <h3 class="exercise-title">Szalag/TRX húzás<small>Inverted row gumiszalaggal vagy TRX-szel</small></h3>
        <p class="exercise-desc">Felső hát erősítő — pont az ülőmunka ellenpólusa. Gumiszalagot ajtóhoz rögzítesz, és könyökig húzod. Ha TRX van otthon, az még jobb.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Lapocka előrehúzás, mintha ceruzát szorítanál a vállak közé</div>
          <div class="cue">Könyök a test mellett, nem kifelé</div>
          <div class="cue">Egyenes test, nincs csípő-süllyedés</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3</strong></span>
          <span>Ism: <strong>10-12</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=pSHjTRCQxIw" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Plank Form">
          <img src="https://img.youtube.com/vi/pSHjTRCQxIw/hqdefault.jpg" alt="Plank Form" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">A6 — Mély core</span>
        <h3 class="exercise-title">Plank<small>Alkar-támasz</small></h3>
        <p class="exercise-desc">A mély core (transversus abdominis) erősítésének klasszikusa. Statikus tartás, nincs ismétlés. Indulj 30 mp-cel, dolgozz fel 60 mp-ig.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Alkarok talajon, könyök a váll alatt</div>
          <div class="cue">Test egyenes vonal sarokból fejtetőig</div>
          <div class="cue">Hasizmot meghúzod, glute-t összeszorítod</div>
          <div class="cue warning">Ne süllyedjen le a csípő — ha igen, lépj vissza térdről plankra</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3</strong></span>
          <span>Tartás: <strong>30-60 mp</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=wiFNA3sqjCA" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Bird Dog Exercise">
          <img src="https://img.youtube.com/vi/wiFNA3sqjCA/hqdefault.jpg" alt="Bird Dog Exercise" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">A7 — Anti-rotációs core / derék</span>
        <h3 class="exercise-title">Bird-dog<small>"Madár-kutya" — derék-stabilizáló</small></h3>
        <p class="exercise-desc">A te derék-problémádra az egyik legjobb gyakorlat. Négykézláb, ellentétes kar és láb kinyújtása. Anti-rotációs core, segíti a deréktájékot.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Négykézláb, kéz közvetlenül a váll alatt, térd a csípő alatt</div>
          <div class="cue">Egyik kar előre, ellenkező láb hátra</div>
          <div class="cue">Tartás 2 mp, lassan visszahúzod</div>
          <div class="cue">Csípő ne forduljon el — egyenesben marad</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3</strong></span>
          <span>Ism: <strong>8-10 / oldal</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=g_BYB0R-4Ws" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Dead Bug Exercise">
          <img src="https://img.youtube.com/vi/g_BYB0R-4Ws/hqdefault.jpg" alt="Dead Bug Exercise" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">A8 — Mély core / derék-óvó</span>
        <h3 class="exercise-title">Dead bug<small>"Holt bogár" — hanyatt fekve</small></h3>
        <p class="exercise-desc">A bird-dog párja, csak hanyatt fekve. Mély core, kifejezetten derék-stabilizáló. A kulcs: a derék végig a földön marad.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Hanyatt, kar és láb a plafon felé (90 fokos hajlítás)</div>
          <div class="cue">Egyik kart a fej fölé, ellenkező lábat lefelé nyújtod</div>
          <div class="cue">Derék végig a földön — ez a kulcs</div>
          <div class="cue warning">Ha a derék elemelkedik, csökkentsd a mozgástartomány-t</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3</strong></span>
          <span>Ism: <strong>8-10 / oldal</strong></span>
        </div>
      </div>
    </article>

  </div>
</section>

<section class="section" id="konditermi-ero">
  <div class="section-header">
    <div>
      <div class="section-num">02 / Erőedzés B</div>
      <h2 class="section-title">Konditermi<br>erőedzés</h2>
    </div>
    <p class="section-desc">
      Súlyzós gyakorlatok edzőteremben. <strong>3-4 szett, 8-12 ismétlés, 90 mp pihenő</strong>. A szabad súlyok és gépek kombinációja, futóknak optimalizálva. Hetente egyszer.
    </p>
  </div>

  <div class="exercises">

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=p23eduObNI4" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Leg Press Form">
          <img src="https://img.youtube.com/vi/p23eduObNI4/hqdefault.jpg" alt="Leg Press Form" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">B1 — Láb / quad / glute</span>
        <h3 class="exercise-title">Lábtoló<small>Leg press — derék-óvó láb-gyakorlat</small></h3>
        <p class="exercise-desc">Mivel a derekadat akarjuk óvni, a lábtoló jobb választás, mint a klasszikus súlyemelős guggolás. Nem terheli statikusan a gerincet, ugyanakkor erősíti a quad, glute és hátsó comb izmokat.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Lábak vállszélességben, talp egész szélességben a platformon</div>
          <div class="cue">Térd a lábujj irányába, ne befelé</div>
          <div class="cue">Térdet ne reteszeld a tetején</div>
          <div class="cue warning">Derék végig az ülésen, ne emelkedjen el a leengedéskor</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3-4</strong></span>
          <span>Ism: <strong>10-12</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=2SHsk9AzdjA" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Romanian Deadlift Form">
          <img src="https://img.youtube.com/vi/2SHsk9AzdjA/hqdefault.jpg" alt="Romanian Deadlift Form" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">B2 — Hátsó lánc / glute</span>
        <h3 class="exercise-title">Romanian deadlift<small>Súlyzós előrehajlás — RDL</small></h3>
        <p class="exercise-desc">A hátsó comb (hamstring) és glute legjobb erősítője. Indulj könnyű súllyal (10-15 kg), a forma fontosabb, mint a súly. <strong>Derék-figyelő gyakorlat</strong>: ha kiegyenesedik vagy bizonytalan, kihagyni vagy csökkenteni.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Csípőből hajolsz, nem derékból</div>
          <div class="cue">Térd enyhén hajlított, de nem guggolva</div>
          <div class="cue">Súlyzók végig a lábhoz közel mennek (térd alatti pontig)</div>
          <div class="cue warning">A derekad SOSEM kerekíted el — egyenes hát mindig</div>
          <div class="cue warning">Ha bizonytalan: hagyd ki, helyette single-leg glute bridge súlyzóval</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3-4</strong></span>
          <span>Ism: <strong>10</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=CAwf7n6Luuc" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Lat Pulldown Form">
          <img src="https://img.youtube.com/vi/CAwf7n6Luuc/hqdefault.jpg" alt="Lat Pulldown Form" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">B3 — Felső hát / lat / bicepsz</span>
        <h3 class="exercise-title">Lehúzó<small>Lat pulldown — széles fogással</small></h3>
        <p class="exercise-desc">A te problémás területeid (felső hát, lapocka, ülőmunka-ellenpólus) #1 erősítője. Széles fogás, mellkasig húzod a rudat.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Széles fogás (kicsit szélesebb a vállnál)</div>
          <div class="cue">Mellkast húzod a rúd felé, nem a rudat le</div>
          <div class="cue">Lapocka előbb mozdul, csak utána a kar</div>
          <div class="cue">Hát kissé hátradőlt (kb. 15 fok), nem teljesen egyenes</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3-4</strong></span>
          <span>Ism: <strong>10-12</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=rT7DgCr-3pg" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Bench Press Form">
          <img src="https://img.youtube.com/vi/rT7DgCr-3pg/hqdefault.jpg" alt="Bench Press Form" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">B4 — Mell / tricepsz / váll</span>
        <h3 class="exercise-title">Fekvenyomás<small>Bench press — rúddal vagy súlyzókkal</small></h3>
        <p class="exercise-desc">A felsőtest-nyomás klasszikusa. Sok futó kihagyja, pedig pont ez kell ahhoz, hogy a karod látványosabbá váljon, ahogy szeretnéd.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Lapocka be- és lehúzva (stabil alap)</div>
          <div class="cue">Talp végig a földön, derék enyhe természetes ívben</div>
          <div class="cue">Rudat a mellbimbó vonalához viszed le, nem a nyakhoz</div>
          <div class="cue">Könyök 45 fokban a testtől, ne 90 fokban</div>
          <div class="cue warning">Indulj könnyű súllyal — soha ne nyomj nehézzel biztosító nélkül</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3-4</strong></span>
          <span>Ism: <strong>10</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=GZbfZ033f74" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Seated Cable Row Form">
          <img src="https://img.youtube.com/vi/GZbfZ033f74/hqdefault.jpg" alt="Seated Cable Row Form" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">B5 — Felső hát / középső trapéz</span>
        <h3 class="exercise-title">Ülő evezés<small>Seated cable row vagy bent-over row súlyzóval</small></h3>
        <p class="exercise-desc">Tovább erősíti a felső hátat és a középső trapézt. Ha nincs cable row gép, súlyzós bent-over row helyettesíti.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Egyenes hát, mellkas fent</div>
          <div class="cue">Lapocka be- és lehúzás, mellkasig húzod a fogantyút</div>
          <div class="cue">Könyök a test mellett, nem kifelé</div>
          <div class="cue">A mozgás a hátból jön, nem a karból</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3-4</strong></span>
          <span>Ism: <strong>10-12</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=0Po47vvj9g4" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Face Pull / Band Pull-Apart">
          <img src="https://img.youtube.com/vi/0Po47vvj9g4/hqdefault.jpg" alt="Face Pull / Band Pull-Apart" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">B6 — Vállhátsó / tartás</span>
        <h3 class="exercise-title">Face pull<small>Vagy gumiszalag pull-apart</small></h3>
        <p class="exercise-desc">A tartás-javítás bajnoka. Ha szalaggal csinálod (pull-apart), bárhol megy. Ha cable van, az is ugyanúgy működik. Az ülőmunka-pózod ellen.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Szalag/kötél a homlokod magasságába húzod</div>
          <div class="cue">Könyök magasan, vízszintes szögben</div>
          <div class="cue">Lapocka össze, mintha papírt csípnél össze a hátadon</div>
          <div class="cue">Könnyű súly — ez nem erőgyakorlat, hanem korrekciós</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3</strong></span>
          <span>Ism: <strong>12-15</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=pSHjTRCQxIw" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Plank Form">
          <img src="https://img.youtube.com/vi/pSHjTRCQxIw/hqdefault.jpg" alt="Plank Form" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">B7 — Mély core</span>
        <h3 class="exercise-title">Plank<small>Konditeremben is, mint otthon</small></h3>
        <p class="exercise-desc">Ugyanaz a gyakorlat, mint az otthoni edzésen. Itt versenytársi megfigyelés van — más is csinálja, pörögni fog. Cél: 45-60 mp.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Test egyenes vonalban</div>
          <div class="cue">Hasizmot meghúzod, glute-t szorítod</div>
          <div class="cue">Légzés folyamatos, nem visszafojtott</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3</strong></span>
          <span>Tartás: <strong>45-60 mp</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=ykJmrZ5v0Oo" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Dumbbell Bicep Curl">
          <img src="https://img.youtube.com/vi/ykJmrZ5v0Oo/hqdefault.jpg" alt="Dumbbell Bicep Curl" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">B8 — Bicepsz</span>
        <h3 class="exercise-title">Bicepsz curl<small>Súlyzós kar-hajlítás</small></h3>
        <p class="exercise-desc">Direkt karerősítés — pont ez kell ahhoz, hogy a karod látványosabbá váljon. Súlyzókkal állva vagy ülve, mindkét kar egyszerre vagy felváltva.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Könyök a test mellett, NEM mozog</div>
          <div class="cue">Lassú leengedés (kontrolláltabb mint a fel)</div>
          <div class="cue">Csukló egyenes</div>
          <div class="cue warning">Ne lendíts a testtel — tiszta izomerővel emeld</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3</strong></span>
          <span>Ism: <strong>10-12</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=2-LAMcpzODU" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Tricep Pushdown Form">
          <img src="https://img.youtube.com/vi/2-LAMcpzODU/hqdefault.jpg" alt="Tricep Pushdown Form" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">B9 — Tricepsz</span>
        <h3 class="exercise-title">Tricepsz pushdown<small>Lehúzón, kötéllel vagy egyenes rúddal</small></h3>
        <p class="exercise-desc">A másik karfej. A tricepsz a kar 2/3-a — ha látványos kart akarsz, ez kell. Lehúzó gépen, kötéllel vagy egyenes rúddal.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Könyök rögzítve a test mellett</div>
          <div class="cue">Csak az alkar mozog</div>
          <div class="cue">Le egészen kinyújtásig, vissza csak addig, ahol a könyök még a testnél</div>
        </div>
        <div class="exercise-meta">
          <span>Szettek: <strong>3</strong></span>
          <span>Ism: <strong>10-12</strong></span>
        </div>
      </div>
    </article>

  </div>
</section>

<section class="section" id="nyujtas-futas-utan">
  <div class="section-header">
    <div>
      <div class="section-num">03 / Nyújtás</div>
      <h2 class="section-title">Nyújtás<br>futás után</h2>
    </div>
    <p class="section-desc">
      <strong>7-10 perc, sose hagyd ki</strong> — különösen hosszú futás után. Statikus nyújtás (tartás 30-60 mp), hideg izmokat sose nyújts. A futófelkészülésed láthatatlan, de kritikus eleme.
    </p>
  </div>

  <div class="exercises">

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=wD_1Xv2xVEE" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Couch Stretch Tutorial">
          <img src="https://img.youtube.com/vi/wD_1Xv2xVEE/hqdefault.jpg" alt="Couch Stretch Tutorial" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">N1 — Csípőhajlító / quad</span>
        <h3 class="exercise-title">Couch stretch<small>Csípőhajlító nyújtás kanapénál</small></h3>
        <p class="exercise-desc">A #1 nyújtás minden futónak. Térdelve, hátsó láb falhoz vagy kanapéhoz támasztva, csípő előre. Az ülőmunka okozta összerövidült csípőhajlítók megnyitása.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Térdelő-pózba mész, hátsó láb a falhoz/kanapéhoz támaszkodik</div>
          <div class="cue">Csípő előre tolása, glute összeszorítva</div>
          <div class="cue">Felsőtest egyenes (vagy hátradőlve, ha kibírod)</div>
          <div class="cue">A nyújtást a hátsó láb csípőhajlítójában érezd</div>
          <div class="cue warning">Ha térd-fájdalom: párnát vagy szőnyeget tegyél a térd alá</div>
        </div>
        <div class="exercise-meta">
          <span>Tartás: <strong>60 mp / oldal</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=2eyDjtEZH28" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Pigeon Pose Tutorial">
          <img src="https://img.youtube.com/vi/2eyDjtEZH28/hqdefault.jpg" alt="Pigeon Pose Tutorial" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">N2 — Glute / csípőtok</span>
        <h3 class="exercise-title">Pigeon pose<small>Galamb póz — glute-nyújtás</small></h3>
        <p class="exercise-desc">A glute és a külső csípőizmok mély nyújtása. Egy lábat keresztben behajlítod, a másikat hátra nyújtod. Eleinte intenzív lehet — ne erőltesd.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Elülső láb keresztben, sípcsont a test előtt</div>
          <div class="cue">Hátsó láb hosszan kinyújtva mögötted</div>
          <div class="cue">Csípő egyenesben (mindkét oldal a földhöz közel)</div>
          <div class="cue">Lassú előredőlés, ahogy a csípő engedi</div>
          <div class="cue warning">Ha térdfájdalom: térd alá párnát, vagy hagyd ki — válts hanyatt-fekvő variációra</div>
        </div>
        <div class="exercise-meta">
          <span>Tartás: <strong>60 mp / oldal</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=zh53lNDaZsY" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Lying Figure 4 Stretch">
          <img src="https://img.youtube.com/vi/zh53lNDaZsY/hqdefault.jpg" alt="Lying Figure 4 Stretch" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">N3 — Glute (térdkímélő alternatíva)</span>
        <h3 class="exercise-title">Lying figure-4<small>Hanyatt fekvő 4-es — pigeon biztonságos alternatívája</small></h3>
        <p class="exercise-desc">Hanyatt fekve, egyik bokát a másik térdre teszed (4-es alak), majd a hátsó comb hátulját megfogva magad felé húzod. A glute mély nyújtása, de térdkímélően. <strong>Ha pigeon-ban fáj a térded, használd ezt helyette.</strong></p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Hanyatt fekszel, mindkét térd hajlítva</div>
          <div class="cue">Egyik bokát a másik térdre teszed</div>
          <div class="cue">A támasztó láb hátsó combját megfogod két kézzel és magad felé húzod</div>
          <div class="cue">A nyújtást a felső láb glute-jában érezd</div>
          <div class="cue warning">Csak az egyik gyakorlatot csináld a pigeon-nal együtt — ne mindkettőt</div>
        </div>
        <div class="exercise-meta">
          <span>Tartás: <strong>60 mp / oldal</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=2lPMSPpGEa8" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: IT Band Stretch">
          <img src="https://img.youtube.com/vi/2lPMSPpGEa8/hqdefault.jpg" alt="IT Band Stretch" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">N4 — IT band (oldalsó comb)</span>
        <h3 class="exercise-title">IT band stretch<small>Állva, keresztezett láb, oldalra dőlés</small></h3>
        <p class="exercise-desc">Állva, a hátsó lábadat keresztezed az elülső előtt, és a kar oldalra-fel emelve oldalra dőlsz. <strong>Az ITBS (IT band szindróma) megelőzése — a futósérülések egyik leggyakoribb forrása.</strong> Térdfájdalmat okoz a térd külső oldalán, ha ezt elhanyagolod.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Hátsó láb keresztezve az elülső előtt</div>
          <div class="cue">Az elülső láb oldali karját felemeled</div>
          <div class="cue">Lassan oldalra dőlsz a hátsó láb felé</div>
          <div class="cue">A nyújtást a hátsó láb külső combjában érezd (csípőtől térdig)</div>
        </div>
        <div class="exercise-meta">
          <span>Tartás: <strong>30 mp / oldal</strong></span>
        </div>
      </div>
    </article>
          <img src="https://img.youtube.com/vi/T0Cl8K8j_Es/hqdefault.jpg" alt="Hamstring Stretch" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">N5 — Hátsó comb</span>
        <h3 class="exercise-title">Hamstring nyújtás<small>Hátsó comb — ülve</small></h3>
        <p class="exercise-desc">Ülve, egyik láb előre kinyújtva, a másik behajlítva. Lassan előrehajolsz a kinyújtott láb felé. A futás után gyakran feszes hátsó combot oldja.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Ülve, egyik láb kinyújtva, másik behajlítva</div>
          <div class="cue">Hát egyenes — előrehajlás csípőből, nem deréktól</div>
          <div class="cue">Mellkast viszed a térd felé, nem a fejet</div>
          <div class="cue warning">Ha derék-feszesség: csak ameddig nem érzed a derekadat</div>
        </div>
        <div class="exercise-meta">
          <span>Tartás: <strong>45 mp / oldal</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=Tn_KsZYWYCs" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Standing Quad Stretch">
          <img src="https://img.youtube.com/vi/Tn_KsZYWYCs/hqdefault.jpg" alt="Standing Quad Stretch" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">N6 — Quad / elülső comb</span>
        <h3 class="exercise-title">Standing quad stretch<small>Combnyújtás állva</small></h3>
        <p class="exercise-desc">Állva, egyik bokát fenékhez húzod ugyanazon oldali kézzel. Egyensúlyhoz fogd meg a falat. Az elülső comb (quadriceps) klasszikus nyújtása.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Boka a fenék felé, NEM oldalra</div>
          <div class="cue">Térdek egymás mellett (nem szétnyitva)</div>
          <div class="cue">Csípő enyhén előre, glute meghúzva</div>
          <div class="cue">Egyensúlyhoz fogd meg a falat vagy egy fix pontot</div>
        </div>
        <div class="exercise-meta">
          <span>Tartás: <strong>30 mp / oldal</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=Dd3lvVA0g6w" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Calf Stretch Wall">
          <img src="https://img.youtube.com/vi/Dd3lvVA0g6w/hqdefault.jpg" alt="Calf Stretch Wall" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">N7 — Vádli / Achilles</span>
        <h3 class="exercise-title">Calf stretch<small>Vádlinyújtás falnál</small></h3>
        <p class="exercise-desc">Kar a falon, egyik láb hátra nyújtva, sarka végig a földön. A vádli és Achilles megnyújtása. Futóknál kritikus, mert a folyamatos lefutás összerövidíti a vádlit.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Hátsó láb teljesen kinyújtva, sarka a földön</div>
          <div class="cue">Hátsó láb és test egyenes vonalban</div>
          <div class="cue">Csípő előre nyom — nem a felsőtested dől</div>
          <div class="cue">A nyújtást a hátsó vádliban érezd</div>
        </div>
        <div class="exercise-meta">
          <span>Tartás: <strong>30 mp / oldal</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=Eh00_rniF8E" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Child's Pose Yoga">
          <img src="https://img.youtube.com/vi/Eh00_rniF8E/hqdefault.jpg" alt="Child's Pose Yoga" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">N8 — Hát / regeneráció</span>
        <h3 class="exercise-title">Child's pose<small>Gyermek póz — yoga klasszikus</small></h3>
        <p class="exercise-desc">A regeneráció pózja. Térdelve, fenék a sarokra, mellkas a földhöz, karok előre kinyújtva. Hát és csípő passzív megnyúlása.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Térdelve, fenék hátradől a sarokra</div>
          <div class="cue">Mellkas közeledik a földhöz</div>
          <div class="cue">Karok kinyújtva előre vagy oldalra a test mentén</div>
          <div class="cue">Mély légzés — minden kilégzéssel mélyebbre</div>
        </div>
        <div class="exercise-meta">
          <span>Tartás: <strong>60 mp</strong></span>
        </div>
      </div>
    </article>

  </div>
</section>

<section class="section" id="mobilitas-reggel">
  <div class="section-header">
    <div>
      <div class="section-num">03 / Mobilitás</div>
      <h2 class="section-title">Reggeli<br>mobilizálás</h2>
    </div>
    <p class="section-desc">
      <strong>5 perc, opcionális, de ajánlott</strong>. Az ízületek "felébresztése", még a kávé előtt. Ha rendszeresen csinálod, a derekad <em>jelentősen</em> hálás lesz. Hideg izmokat is mozdíthatsz, mert a mozgás dinamikus.
    </p>
  </div>

  <div class="exercises">

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=kqnua4rHVVA" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Cat Cow Tutorial">
          <img src="https://img.youtube.com/vi/kqnua4rHVVA/hqdefault.jpg" alt="Cat Cow Tutorial" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">M1 — Gerinc</span>
        <h3 class="exercise-title">Cat-cow<small>Macska-tehén — gerinc-mobilizálás</small></h3>
        <p class="exercise-desc">Négykézláb, gerinc hullámzó mozgása. Cat = hát felfelé domború (mint egy ijedt macska). Cow = derék lefelé, mellkas felfelé. A teljes gerinc mobilizálása.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Lassú, kontrollált mozgás — nem ringatás</div>
          <div class="cue">Belégzés a "cow"-nál, kilégzés a "cat"-nél</div>
          <div class="cue">Minden gerinccsigolya külön mozog (nem csak a derék)</div>
        </div>
        <div class="exercise-meta">
          <span>Ism: <strong>10</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=EDMAjvwI4Qo" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Knee to Chest Stretch">
          <img src="https://img.youtube.com/vi/EDMAjvwI4Qo/hqdefault.jpg" alt="Knee to Chest Stretch" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">M2 — Csípő / glute</span>
        <h3 class="exercise-title">Knee-to-chest<small>Térd a mellkashoz — hanyatt</small></h3>
        <p class="exercise-desc">Hanyatt fekve, egy térdet két kézzel a mellkasra húzol, a másik láb nyújtva marad. Csípő- és alsó hát-mobilizálás, dinamikusan.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Hanyatt fekszel, derék végig a földön</div>
          <div class="cue">Egy térdet két kézzel húzol a mellkasra</div>
          <div class="cue">Másik láb kinyújtva, nem felemelve</div>
          <div class="cue">Lassan engedj el, váltogasd a lábakat</div>
        </div>
        <div class="exercise-meta">
          <span>Ism: <strong>10 / oldal</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=g25mlW8Up2g" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Supine Spinal Twist">
          <img src="https://img.youtube.com/vi/g25mlW8Up2g/hqdefault.jpg" alt="Supine Spinal Twist" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">M3 — Gerinc / derék</span>
        <h3 class="exercise-title">Supine spinal twist<small>Gerinc-csavarodás hanyatt</small></h3>
        <p class="exercise-desc">Hanyatt fekve, egyik térdet áthúzod a másik oldalra, miközben a vállak a földön maradnak. Gerincet csavarod, derékizmokat oldod.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Hanyatt, karok oldalt T-alakban</div>
          <div class="cue">Egy térd áthúzódik a másik oldalra</div>
          <div class="cue">A vállak végig a földön maradnak — kulcs!</div>
          <div class="cue">Fej az ellenkező irányba fordul</div>
        </div>
        <div class="exercise-meta">
          <span>Ism: <strong>10 / oldal</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=aXl5z2MsM3w" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Thoracic Spine Mobility">
          <img src="https://img.youtube.com/vi/aXl5z2MsM3w/hqdefault.jpg" alt="Thoracic Spine Mobility" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">M4 — Felső hát (thoracic)</span>
        <h3 class="exercise-title">Thoracic mobility<small>Felső hát mobilizálás</small></h3>
        <p class="exercise-desc">A te problémás területed (felső hát, lapocka) napi mobilizálása. Térdelve, kezet a mellkasra, könyök a plafon felé. Felső gerinc forgatása.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Térdelve, egyik kéz a mellkason</div>
          <div class="cue">Másik kéz a fejre vagy nyakra</div>
          <div class="cue">Könyököt a plafon felé fordítod, gerinc csavarodik</div>
          <div class="cue">A mozgás a felső hátból jön, nem a derékból</div>
        </div>
        <div class="exercise-meta">
          <span>Ism: <strong>10 / oldal</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=wPM8icPu6H8" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Glute Bridge Activation">
          <img src="https://img.youtube.com/vi/wPM8icPu6H8/hqdefault.jpg" alt="Glute Bridge Activation" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">M5 — Glute aktiváció</span>
        <h3 class="exercise-title">Glute bridge<small>Csípőemelés — a glute "ébresztője"</small></h3>
        <p class="exercise-desc">Ugyanaz, mint az erőedzésen, csak könnyű ismétléssorozattal reggel. Megaktiválja a glute-t a napi mozgáshoz, segíti a derék-stabilitást.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">10 lassú, kontrollált ismétlés</div>
          <div class="cue">A tetején 1-2 mp-es tartás, glute össze</div>
          <div class="cue">Lassan le, ne ejtsd</div>
        </div>
        <div class="exercise-meta">
          <span>Ism: <strong>10</strong></span>
        </div>
      </div>
    </article>

  </div>
</section>

<section class="section" id="mikro-szunet">
  <div class="section-header">
    <div>
      <div class="section-num">05 / Mikro-szünetek</div>
      <h2 class="section-title">Asztaltól<br>mozdulj.</h2>
    </div>
    <p class="section-desc">
      Te magad mondtad: <em>"túl sokat ülök, ülő munkát csinálok és napközben kevésszer jut eszembe átmozgatni magam"</em>. Ez a szekció a megoldás. <strong>Naponta 4-5x, max 2 perc / alkalom</strong>. Pomodoro-szünetekben tökéletes.
    </p>
  </div>

  <div class="exercises">

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=0HFGNvjEukE" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Seated Figure 4 Stretch">
          <img src="https://img.youtube.com/vi/0HFGNvjEukE/hqdefault.jpg" alt="Seated Figure 4 Stretch" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">MS1 — Csípő ülve</span>
        <h3 class="exercise-title">Seated figure-4<small>Ülve csípő-tágítás (irodai)</small></h3>
        <p class="exercise-desc">Az asztalnál ülve csinálható csípő-nyújtás. Egyik bokát a másik térdre teszed (4-es alak), kicsit előrehajolsz. A glute és a csípőtok megnyitása.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Egyenes hát ülve</div>
          <div class="cue">Egyik boka a másik térdre (4-es alak)</div>
          <div class="cue">Kicsit előrehajolsz csípőből — nem deréktól</div>
          <div class="cue">Nyújtást a felül lévő láb glute-jában érezd</div>
        </div>
        <div class="exercise-meta">
          <span>Tartás: <strong>30 mp / oldal</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=uIirLkzfWeg" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Chest Opener Stretch">
          <img src="https://img.youtube.com/vi/uIirLkzfWeg/hqdefault.jpg" alt="Chest Opener Stretch" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">MS2 — Mellkas / vállhát</span>
        <h3 class="exercise-title">Mellkas-megnyitás<small>Két kéz hátul összekulcsolva</small></h3>
        <p class="exercise-desc">A monitorhoz görnyedt tartás ellenpólusa. Két kezet hátul összekulcsolod, mellkas előre. A mellizom és a vállhát megnyitása.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Két kéz hátul összekulcsolva</div>
          <div class="cue">Karok kinyújtva, kissé felfelé húzva</div>
          <div class="cue">Mellkas előre tolódik</div>
          <div class="cue">Lapocka össze</div>
        </div>
        <div class="exercise-meta">
          <span>Tartás: <strong>30 mp</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=dEqoiR9k4cU" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Neck Stretch">
          <img src="https://img.youtube.com/vi/dEqoiR9k4cU/hqdefault.jpg" alt="Neck Stretch" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">MS3 — Nyak / felső csapda</span>
        <h3 class="exercise-title">Nyak oldalra hajtás<small>Egyszerű nyaknyújtás</small></h3>
        <p class="exercise-desc">Fej oldalra dől, ellenkező kéz finoman segít a fej súlyával. A monitor előtt görnyedés okozta nyak-feszesség oldása.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Egyenes hát, váll lefelé húzva</div>
          <div class="cue">Fej lassan oldalra dől</div>
          <div class="cue">Ellenkező kéz a fejen — csak a kéz súlyával húzol</div>
          <div class="cue warning">Soha ne ránts a nyakat — minden lassú és kontrollált</div>
        </div>
        <div class="exercise-meta">
          <span>Tartás: <strong>30 mp / oldal</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=aclHkVaku9U" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Bodyweight Squat Form">
          <img src="https://img.youtube.com/vi/aclHkVaku9U/hqdefault.jpg" alt="Bodyweight Squat Form" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">MS4 — Vér felpumpálás</span>
        <h3 class="exercise-title">5 lassú guggolás<small>Felállás + 5 testsúlyos squat</small></h3>
        <p class="exercise-desc">A legegyszerűbb, mégis legértékesebb mikro-szünet. Egyszerűen állj fel, és csinálj 5 lassú guggolást. A vérkeringést beindítja, a csípőt mobilizálja.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Felállsz az asztaltól</div>
          <div class="cue">5 lassú, kontrollált guggolás</div>
          <div class="cue">Lassan le, lassan fel — nem rohanva</div>
        </div>
        <div class="exercise-meta">
          <span>Ism: <strong>5</strong></span>
        </div>
      </div>
    </article>

    <article class="exercise">
      <div class="exercise-video">
        <a class="video-thumb" href="https://www.youtube.com/watch?v=kqnua4rHVVA" target="_blank" rel="noopener noreferrer" aria-label="Videó megnyitása új lapon: Cat Cow Standing">
          <img src="https://img.youtube.com/vi/kqnua4rHVVA/hqdefault.jpg" alt="Cat Cow Standing" loading="lazy">
          <div class="play-overlay">
            <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
              <circle cx="40" cy="40" r="38" fill="rgba(0,0,0,0.75)" stroke="#d4ff3a" stroke-width="2"/>
              <polygon points="32,26 32,54 56,40" fill="#d4ff3a"/>
            </svg>
            <span class="play-label">Videó YouTube-on</span>
          </div>
        </a>
      </div>
      <div class="exercise-body">
        <span class="exercise-tag">MS5 — Gerinc</span>
        <h3 class="exercise-title">Cat-cow ülve vagy állva<small>Gerinc-hullámzás bárhol</small></h3>
        <p class="exercise-desc">Ugyanaz, mint a négykézláb cat-cow, csak ülve vagy állva. Az asztalnál ülve is csinálható, senki sem fogja észrevenni — mégis nagyon hasznos a derekadnak.</p>
        <div class="exercise-cues">
          <h4>Mire figyelj</h4>
          <div class="cue">Ülve: a hát hullámzó mozgása előre-hátra</div>
          <div class="cue">Belégzés: mellkas előre, derék hátra</div>
          <div class="cue">Kilégzés: hát ívben hátrafelé, áll a mellkason</div>
          <div class="cue">Lassú ritmus, mély légzés</div>
        </div>
        <div class="exercise-meta">
          <span>Ism: <strong>10</strong></span>
        </div>
      </div>
    </article>

  </div>
</section>
</div>

<!-- ====== FOOTER ====== -->
<footer class="footer">
  <p>
    Vezérlőpult · 2026.04.28<br>
    Frissítendő: minden vasárnap este, az aktuális heti adatokkal.
  </p>
  <div class="footer-line"></div>
  <p>
    A heti terv tartalma a <code>felmaraton_terv.md</code> fájlból töltődik be.<br>
    Tartsd a HTML-t és az .md fájlt egy mappában.
  </p>
</footer>

<!-- ====== MARKED.JS — Markdown renderer (CDN) ====== -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<script>
  // ============================================================
  //  KONFIGURÁCIÓ (a data.json felülírja, ha létezik)
  // ============================================================
  const CONFIG_DEFAULT = {
    raceName: "Wizz Air Budapest félmaraton",
    raceDate: "2026-09-06",
    startDate: "2026-04-28",
    totalWeeks: 19,
    weight: 79,
    weightTarget: "73-75",
    vo2max: 46.2,
    vo2trend: "+9% utolsó 5 hónap",
    totalKm: 0,
    weightDelta: null
  };

  // ============================================================
  //  DINAMIKUS DASHBOARD-FRISSÍTÉS
  // ============================================================
  function updateDashboard(cfg) {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const race = new Date(cfg.raceDate);
    const start = new Date(cfg.startDate);

    // Hátralévő napok
    const daysLeft = Math.max(0, Math.ceil((race - today) / 86400000));
    document.getElementById('stat-days').innerHTML =
      daysLeft + '<span class="stat-unit">nap</span>';

    // Aktuális hét (1-indexes)
    const totalDays = Math.ceil((race - start) / 86400000);
    const elapsedDays = Math.max(0, Math.ceil((today - start) / 86400000));
    const currentWeek = Math.min(cfg.totalWeeks, Math.max(1, Math.ceil(elapsedDays / 7) || 1));

    document.getElementById('stat-week').innerHTML =
      currentWeek + '<span class="stat-unit">/ ' + cfg.totalWeeks + '</span>';

    // Hét leírása
    const weekLabels = {
      1: "Regenerációs hét",
      2: "Indítás", 3: "Növelés", 4: "Kirakó hét",
      5: "Strides", 6: "Első tempófutás", 7: "Első intervallum",
      8: "Kirakó hét", 9: "Specifikus", 10: "Specifikus", 11: "Specifikus",
      12: "Kirakó hét", 13: "Csúcs felé", 14: "Féltáv-szimuláció", 15: "PEAK",
      16: "Tartás", 17: "Visszafogás", 18: "Tapering", 19: "Verseny hete"
    };
    document.getElementById('stat-week-sub').textContent = weekLabels[currentWeek] || "—";

    // Eddig futott km
    document.getElementById('stat-km').innerHTML =
      cfg.totalKm + '<span class="stat-unit">km</span>';
    if (cfg.totalKm === 0) {
      document.getElementById('stat-km-sub').textContent = "A felkészülés még nem indult";
    } else {
      document.getElementById('stat-km-sub').textContent =
        "Heti átlag: " + (cfg.totalKm / currentWeek).toFixed(1) + " km";
    }

    // Súly
    document.getElementById('stat-weight').innerHTML =
      cfg.weight + '<span class="stat-unit">kg</span>';
    if (cfg.weightDelta !== null && cfg.weightDelta !== undefined) {
      const sub = document.getElementById('stat-weight-sub');
      const delta = cfg.weightDelta;
      sub.textContent = (delta >= 0 ? "+" : "") + delta.toFixed(1) + " kg az induláshoz képest";
      sub.className = 'stat-sub ' + (delta < 0 ? 'up' : delta > 0 ? 'down' : 'neutral');
    } else {
      document.getElementById('stat-weight-sub').textContent = "Cél: kb. " + cfg.weightTarget + " kg";
    }

    // VO2 max
    document.getElementById('stat-vo2').textContent = cfg.vo2max;
    document.getElementById('stat-vo2-sub').textContent = cfg.vo2trend;

    // Progress bar
    const progressPct = Math.max(0, Math.min(100, Math.round((elapsedDays / totalDays) * 100)));
    document.getElementById('progress-pct').textContent = progressPct + '%';
    document.getElementById('progress-fill').style.width = progressPct + '%';
  }

  // ============================================================
  //  TAB SWITCHING
  // ============================================================
  const tabs = document.querySelectorAll('.tab');
  const tabContents = document.querySelectorAll('.tab-content');

  tabs.forEach(tab => {
    tab.addEventListener('click', (e) => {
      e.preventDefault();
      const target = tab.dataset.tab;
      tabs.forEach(t => t.classList.remove('active'));
      tabContents.forEach(c => c.classList.remove('active'));
      tab.classList.add('active');
      document.getElementById(target).classList.add('active');
      history.replaceState(null, '', '#' + target);
    });
  });

  if (window.location.hash) {
    const hash = window.location.hash.slice(1);
    const targetTab = document.querySelector(`.tab[data-tab="${hash}"]`);
    if (targetTab) targetTab.click();
  }

  // ============================================================
  //  ADATOK BETÖLTÉSE
  // ============================================================
  async function loadConfig() {
    try {
      const res = await fetch('data.json?t=' + Date.now());
      if (!res.ok) throw new Error('No data.json');
      const data = await res.json();
      return { ...CONFIG_DEFAULT, ...data };
    } catch {
      return CONFIG_DEFAULT;
    }
  }

  async function loadMarkdown() {
    const target = document.getElementById('markdown-content');
    try {
      const response = await fetch('felmaraton_terv.md?t=' + Date.now());
      if (!response.ok) throw new Error('Nem sikerült betölteni');
      const md = await response.text();
      target.innerHTML = marked.parse(md);
      buildSectionNav();
      setupScrollSpy();
    } catch (err) {
      target.innerHTML = `
        <div style="background: var(--bg-card); border: 1px solid var(--line); padding: 32px; max-width: 760px;">
          <h3 style="color: var(--accent-warm); font-family: 'Bebas Neue', sans-serif; font-size: 28px; margin-bottom: 16px;">Nem sikerült betölteni a tervet</h3>
          <p style="color: var(--ink-dim); margin-bottom: 16px;">A <code style="background: var(--bg-elev); padding: 2px 6px; color: var(--accent);">felmaraton_terv.md</code> fájl nem érhető el.</p>
          <p style="color: var(--ink-dim); margin-bottom: 16px;"><strong style="color: var(--ink);">Ha mobilon nézed, deploy után működni fog.</strong> Lokálisan webszerver kell:</p>
          <ul style="list-style: none; padding-left: 0;">
            <li style="padding: 6px 0 6px 24px; position: relative; color: var(--ink-dim);"><span style="position: absolute; left: 0; color: var(--accent);">→</span> <code style="background: var(--bg-elev); padding: 2px 6px; color: var(--accent);">python3 -m http.server</code> a mappában</li>
            <li style="padding: 6px 0 6px 24px; position: relative; color: var(--ink-dim);"><span style="position: absolute; left: 0; color: var(--accent);">→</span> Vagy VS Code Live Server bővítmény</li>
            <li style="padding: 6px 0 6px 24px; position: relative; color: var(--ink-dim);"><span style="position: absolute; left: 0; color: var(--accent);">→</span> Vagy push GitHub-ra → Cloudflare Pages</li>
          </ul>
        </div>
      `;
    }
  }

  // ============================================================
  //  SECTION NAVIGÁCIÓ — a markdown H2-iből generálja
  // ============================================================
  function slugify(text) {
    return text.toLowerCase()
      .replace(/[áàâä]/g, 'a').replace(/[éèêë]/g, 'e').replace(/[íìîï]/g, 'i')
      .replace(/[óòôöő]/g, 'o').replace(/[úùûüű]/g, 'u')
      .replace(/[^a-z0-9]+/g, '-')
      .replace(/^-+|-+$/g, '');
  }

  function buildSectionNav() {
    const navContainer = document.getElementById('section-nav-items');
    const headings = document.querySelectorAll('#markdown-content h2');

    if (headings.length === 0) {
      document.getElementById('section-nav').style.display = 'none';
      return;
    }

    navContainer.innerHTML = '';
    headings.forEach((h, idx) => {
      // Adj ID-t a fejlécnek, ha még nincs
      if (!h.id) h.id = slugify(h.textContent);

      // Számozott prefix kinyerése (pl. "1. A te...")
      const text = h.textContent.trim();
      const numMatch = text.match(/^(\d+)\.?\s+(.+)/);
      const num = numMatch ? numMatch[1] : (idx + 1);
      const title = numMatch ? numMatch[2] : text;

      // Rövidített cím (max 28 karakter)
      const short = title.length > 28 ? title.slice(0, 26) + '…' : title;

      const link = document.createElement('a');
      link.className = 'section-nav-item';
      link.href = '#' + h.id;
      link.innerHTML = `<span class="nav-num">${num}</span><span>${short}</span>`;
      link.dataset.target = h.id;

      link.addEventListener('click', (e) => {
        e.preventDefault();
        const top = h.getBoundingClientRect().top + window.scrollY - 130;
        window.scrollTo({ top, behavior: 'smooth' });
        history.replaceState(null, '', '#' + h.id);
      });

      navContainer.appendChild(link);
    });
  }

  // ============================================================
  //  SCROLL-SPY — aktív szekció kiemelése
  // ============================================================
  function setupScrollSpy() {
    const headings = Array.from(document.querySelectorAll('#markdown-content h2'));
    const navItems = document.querySelectorAll('.section-nav-item');

    if (headings.length === 0) return;

    let ticking = false;
    function updateActive() {
      const offset = 200;
      let current = headings[0].id;

      for (const h of headings) {
        const rect = h.getBoundingClientRect();
        if (rect.top <= offset) {
          current = h.id;
        } else {
          break;
        }
      }

      navItems.forEach(item => {
        if (item.dataset.target === current) item.classList.add('active');
        else item.classList.remove('active');
      });
      ticking = false;
    }

    window.addEventListener('scroll', () => {
      if (!ticking) {
        requestAnimationFrame(updateActive);
        ticking = true;
      }
    }, { passive: true });

    updateActive();
  }

  // INDÍTÁS
  (async () => {
    const cfg = await loadConfig();
    updateDashboard(cfg);
    loadMarkdown();
  })();
</script>

</body>
</html>
