/* ===== Ons verhaal ===== */
.verhaal { padding: 0; }
.verhaal section { padding: 5rem var(--gutter); }
.verhaal .section-head { max-width: var(--max); margin: 0 auto 2.5rem; }

/* hero */
.vh-hero { position: relative; min-height: 88svh; display: flex; align-items: flex-end; padding: 8rem var(--gutter) 4rem; background-size: cover; background-position: center 30%; }
.vh-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,12,1) 0%, rgba(13,13,12,0.8) 45%, rgba(13,13,12,0.35) 100%); }
.vh-hero-inner { position: relative; max-width: var(--max); margin: 0 auto; width: 100%; }
.vh-hero h1 { font-size: clamp(3rem, 8vw, 6.5rem); margin-bottom: 1rem; }
.vh-hero .lead { max-width: 56ch; }
.vh-hero-cijfers { display: grid; grid-template-columns: repeat(4, auto); gap: 2.5rem; margin-top: 2rem; justify-content: start; }
.vh-hero-cijfers strong { display: block; font-family: var(--kop); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--geel); }
.vh-hero-cijfers span { color: var(--grijs); font-size: 0.9rem; }
.vh-scroll { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); width: 1.6rem; height: 2.6rem; border: 2px solid rgba(255,255,255,0.4); border-radius: 1rem; }
.vh-scroll span { position: absolute; left: 50%; top: 0.4rem; width: 3px; height: 0.6rem; margin-left: -1.5px; background: var(--geel); border-radius: 2px; animation: vh-scroll 1.8s infinite; }
@keyframes vh-scroll { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(1rem); opacity: 0; } 100% { opacity: 0; } }

/* zij-navigatie */
.vh-nav { position: fixed; right: 1.25rem; top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; gap: 0.9rem; }
.vh-nav a { position: relative; width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 2px solid var(--grijs); background: transparent; transition: background 0.2s, border-color 0.2s; }
.vh-nav a.actief { background: var(--geel); border-color: var(--geel); }
.vh-nav a span { position: absolute; right: 1.4rem; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; color: var(--wit); background: var(--donker); padding: 0.2rem 0.6rem; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.vh-nav a:hover span { opacity: 1; }
@media (max-width: 1100px) { .vh-nav { display: none; } }

/* het begin */
.vh-begin-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.vh-begin figure { margin: 0; position: relative; }
.vh-begin img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.vh-begin figcaption { position: absolute; left: 0; bottom: 0; padding: 0.4rem 0.8rem; background: var(--geel); color: var(--zwart); font-family: var(--kop); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; }
.vh-quote { margin: 0 0 1.25rem; font-family: var(--kop); font-weight: 800; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; color: var(--wit); }
.vh-begin p { color: var(--grijs); max-width: 52ch; }

/* drie panelen */
.vh-drie { background: var(--donker); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.vh-panelen { max-width: var(--max); margin: 0 auto; display: flex; gap: 0.6rem; height: 32rem; }
.vh-paneel { position: relative; flex: 1; min-width: 0; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--wit); background-size: cover; background-position: center; overflow: hidden; transition: flex 0.6s cubic-bezier(0.2,0.8,0.2,1); }
.vh-paneel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,12,0.98) 0%, rgba(13,13,12,0.6) 50%, rgba(13,13,12,0.3) 100%); transition: background 0.4s; }
.vh-paneel.actief { flex: 3; }
.vh-paneel-kop { position: absolute; left: 1.5rem; bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.2rem; transition: bottom 0.5s; }
.vh-paneel-kop .nr { color: var(--geel); font-family: var(--kop); font-weight: 800; }
.vh-paneel-kop strong { font-family: var(--kop); font-weight: 800; font-size: 2.4rem; line-height: 1; text-transform: uppercase; }
.vh-paneel-tekst { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; max-width: 46ch; color: #d8d3c8; opacity: 0; transform: translateY(12px); transition: opacity 0.4s 0.2s, transform 0.4s 0.2s; display: grid; gap: 0.6rem; }
.vh-paneel-tekst .link-plain { justify-self: start; font-size: 1rem; }
.vh-paneel.actief .vh-paneel-kop { bottom: 9.5rem; }
.vh-paneel.actief .vh-paneel-tekst { opacity: 1; transform: none; }
.vh-paneel:not(.actief):hover::before { background: linear-gradient(to top, rgba(13,13,12,0.9), rgba(13,13,12,0.2)); }
.vh-paneel:not(.actief) .vh-paneel-kop strong { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.6rem; }
.vh-paneel:not(.actief) .vh-paneel-kop { bottom: 1.5rem; left: 1.2rem; }

/* waarden */
.vh-waarden-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.vh-waarde { background: var(--donker); border: 1px solid var(--lijn); padding: 1.75rem 1.5rem; transition: transform 0.2s, border-color 0.2s; }
.vh-waarde:hover { transform: translateY(-4px); border-color: var(--geel); }
.vh-waarde i { font-size: 1.6rem; color: var(--geel); margin-bottom: 0.9rem; display: block; }
.vh-waarde h3 { font-size: 1.5rem; margin: 0 0 0.4rem; }
.vh-waarde p { color: var(--grijs); margin: 0; }

/* voor wie */
.vh-voorwie { background: var(--donker); border-top: 1px solid var(--lijn); }
.vh-chips { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.vh-chips a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border: 1px solid var(--lijn); border-left: 4px solid var(--kleur); color: var(--wit); text-decoration: none; font-family: var(--kop); font-weight: 600; text-transform: uppercase; font-size: 1.05rem; transition: border-color 0.15s, transform 0.15s; }
.vh-chips a i { color: var(--kleur); }
.vh-chips a:hover { border-color: var(--kleur); transform: translateY(-2px); }
.vh-rooster { max-width: var(--max); margin: 2rem auto 0; }

/* tijdlijn binnen deze pagina */
.verhaal .tijdlijn-sectie { width: auto; margin: 0; padding: 5rem var(--gutter); }
.verhaal .cta-balk { margin: 3rem auto; }

@media (max-width: 800px) {
  .verhaal section { padding: 3rem var(--gutter); }
  .vh-hero { min-height: 70svh; padding: 6rem var(--gutter) 3rem; }
  .vh-hero-cijfers { grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
  .vh-hero-cijfers strong { font-size: 2rem; }
  .vh-begin-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .vh-begin img { aspect-ratio: 4 / 3; }
  .vh-panelen { flex-direction: column; height: auto; }
  .vh-paneel { min-height: 6rem; }
  .vh-paneel.actief { min-height: 22rem; flex: none; }
  .vh-paneel:not(.actief) .vh-paneel-kop strong { writing-mode: horizontal-tb; transform: none; font-size: 1.6rem; }
  .vh-paneel:not(.actief) .vh-paneel-kop { flex-direction: row; align-items: baseline; gap: 0.6rem; bottom: 1.2rem; left: 1.2rem; }
  .vh-paneel.actief .vh-paneel-kop { bottom: auto; top: 1.2rem; }
  .vh-paneel.actief .vh-paneel-tekst { bottom: 1.2rem; }
  .vh-waarden-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .vh-waarde { padding: 1.1rem 1rem; }
  .vh-waarde h3 { font-size: 1.2rem; }
  .vh-waarde p { font-size: 0.9rem; }
  .vh-chips a { font-size: 0.95rem; padding: 0.55rem 0.9rem; }
  .vh-rooster .btn { width: 100%; text-align: center; }
}

/* meer dan sport */
.vh-meer { position: relative; background-size: cover; background-position: center; background-attachment: fixed; }
.vh-meer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,13,12,0.97) 0%, rgba(13,13,12,0.9) 60%, rgba(13,13,12,0.75) 100%); }
.vh-meer-inner { position: relative; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; }
.vh-meer-tekst h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); margin-bottom: 1rem; }
.vh-meer-tekst p { color: #d8d3c8; max-width: 58ch; }
.vh-meer-tekst .rij-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 1.5rem; }
.vh-meer-kaarten { display: grid; gap: 0.75rem; }
.vh-meer-kaarten > div { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 1rem; align-items: center; padding: 1rem 1.2rem; background: rgba(28,26,23,0.85); border: 1px solid var(--lijn); border-left: 4px solid var(--geel); backdrop-filter: blur(4px); }
.vh-meer-kaarten i { grid-row: 1 / 3; font-size: 1.4rem; color: var(--geel); }
.vh-meer-kaarten strong { font-family: var(--kop); font-weight: 800; text-transform: uppercase; font-size: 1.15rem; }
.vh-meer-kaarten span { color: var(--grijs); font-size: 0.92rem; }
@media (max-width: 800px) {
  .vh-meer { background-attachment: scroll; }
  .vh-meer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .vh-meer-tekst .rij-acties .btn { width: 100%; text-align: center; }
}