/* ═══════════════════════════════════════════════════════════════
   ARENA — GEDEELDE PAGINA-ONDERDELEN (PR 6b): .pg-hero / .stat / .urgency / .reg-card / .btn uit global.css,
   plus de pagina-eigen onderdelen van /subsidies/ en /isolatieglas/. Alleen presentatie; markup, inhoud,
   schema, bedragen en links zijn ongewijzigd. Alles onder html[data-skin="arena"].
   ═══════════════════════════════════════════════════════════════ */

/* ── knoppen ── */
html[data-skin="arena"] .btn { border-radius: 9999px; font-family: var(--arena-font-sans); }
html[data-skin="arena"] .btn-primary { background: var(--arena-ink); color: #fff; font-weight: 600; box-shadow: none; }
html[data-skin="arena"] .btn-primary:hover { background: var(--arena-moss); color: #fff; transform: none; }
html[data-skin="arena"] .btn-ghost { background: #fff; color: var(--arena-ink-soft); border: 1px solid var(--arena-sand); font-weight: 500; }
html[data-skin="arena"] .btn-ghost:hover { border-color: var(--arena-ink); color: var(--arena-ink); background: #fff; }
html[data-skin="arena"] .btn:focus-visible { outline: 2px solid var(--arena-moss); outline-offset: 3px; }

/* ── sectiekoppen ── */
html[data-skin="arena"] .sec-tag { font-family: var(--arena-font-sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--arena-moss); }
html[data-skin="arena"] .sec-tag::before { width: 2rem; background: var(--arena-brand); }
html[data-skin="arena"] .sec-h { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; color: var(--arena-ink); font-size: clamp(2rem, 3.6vw, 3rem); }
html[data-skin="arena"] .sec-h em { font-style: italic; color: var(--arena-moss); }
html[data-skin="arena"] .sec-sub { color: rgba(42, 49, 44, .85); }

/* ── PageHero (forest) ── */
html[data-skin="arena"] .pg-hero { background: var(--arena-forest); color: #fff; padding: 8rem 0 4rem; }
html[data-skin="arena"] .pg-hero::before {
  inset: auto; left: -8rem; top: -7rem; width: 30rem; height: 30rem; border-radius: 9999px; background: rgba(34, 197, 94, .12); filter: blur(64px); mask-image: none; -webkit-mask-image: none;
}
html[data-skin="arena"] .pg-hero::after {
  content: ""; position: absolute; right: -6rem; top: 4rem; width: 26rem; height: 26rem; border-radius: 9999px; background: rgba(255, 210, 138, .07); filter: blur(64px); pointer-events: none;
}
html[data-skin="arena"] .pg-crumb { font-family: var(--arena-font-sans); font-size: 11px; color: rgba(255, 255, 255, .7); margin: 0 0 28px; }
html[data-skin="arena"] .pg-crumb a { color: rgba(255, 255, 255, .8); }
html[data-skin="arena"] .pg-crumb a:hover { color: #fff; }
html[data-skin="arena"] .pg-crumb a:focus-visible { outline: 2px solid var(--arena-lime); outline-offset: 2px; }
html[data-skin="arena"] .pg-crumb-curr { color: #fff; }
html[data-skin="arena"] .pg-hero .sec-tag { color: var(--arena-lime); }
html[data-skin="arena"] .pg-h1 { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.02; color: #fff; font-size: clamp(2.6rem, 6vw, 4.8rem); }
html[data-skin="arena"] .pg-h1 em { font-style: italic; color: var(--arena-sun); }
html[data-skin="arena"] .pg-lede { font-family: var(--arena-font-sans); color: rgba(255, 255, 255, .8); font-size: 1.0625rem; }
html[data-skin="arena"] .pg-hero .stat { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 1rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-skin="arena"] .pg-hero .stat-n { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; color: var(--arena-lime); }
html[data-skin="arena"] .pg-hero .stat-n.warn { color: var(--arena-sun); }
html[data-skin="arena"] .pg-hero .stat-l { color: rgba(255, 255, 255, .72); font-family: var(--arena-font-sans); letter-spacing: .12em; }
html[data-skin="arena"] .pg-hero .urgency-bar { background: rgba(255, 210, 138, .1); border: 1px solid rgba(255, 210, 138, .3); border-radius: 1.25rem; }
html[data-skin="arena"] .pg-hero .urgency-bar::before { background: radial-gradient(circle, rgba(255, 210, 138, .14) 0%, transparent 70%); }
html[data-skin="arena"] .pg-hero .urgency-pulse { background: var(--arena-sun); box-shadow: 0 0 18px rgba(255, 210, 138, .8); }
html[data-skin="arena"] .pg-hero .urgency-tag { color: var(--arena-sun); font-family: var(--arena-font-sans); }
html[data-skin="arena"] .pg-hero .urgency-title { color: #fff; font-family: var(--arena-font-sans); }
html[data-skin="arena"] .pg-hero .urgency-title strong { color: var(--arena-sun); }
html[data-skin="arena"] .pg-hero .urgency-sub { color: rgba(255, 255, 255, .8); }
html[data-skin="arena"] .pg-hero .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
html[data-skin="arena"] .pg-hero .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }
html[data-skin="arena"] .pg-hero .btn:focus-visible { outline-color: var(--arena-lime); }

/* ── regelingenbord (subsidies) ── */
html[data-skin="arena"] .board-section { background: var(--arena-paper); padding: 4.5rem 0; }
html[data-skin="arena"] .reg-card { background: #fff; border: 1px solid var(--arena-sand); border-radius: 1.5rem; box-shadow: 0 18px 44px -34px rgba(12, 34, 25, .3); transition: transform .3s var(--arena-ease), border-color .3s, box-shadow .3s; }
html[data-skin="arena"] .reg-card:hover { border-color: rgba(24, 64, 47, .35); transform: translateY(-2px); box-shadow: 0 22px 55px -30px rgba(12, 34, 25, .45); }
html[data-skin="arena"] .reg-card-urgent { border-color: rgba(242, 167, 75, .6); background: linear-gradient(180deg, rgba(255, 210, 138, .12), #fff); }
html[data-skin="arena"] .reg-card-l { background: var(--arena-cream); border-right-color: var(--arena-sand); }
html[data-skin="arena"] .reg-card-cat { color: rgba(42, 49, 44, .78); font-family: var(--arena-font-sans); }
html[data-skin="arena"] .reg-card-badge { background: #fff !important; color: var(--arena-moss) !important; border-color: var(--arena-sand) !important; font-family: var(--arena-font-sans); }
html[data-skin="arena"] .reg-card-name { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; font-size: 1.5rem; line-height: 1.1; color: var(--arena-ink); }
html[data-skin="arena"] .reg-card-tagline { color: rgba(42, 49, 44, .88); }
html[data-skin="arena"] .reg-card-meta { border-color: var(--arena-sand); }
html[data-skin="arena"] .reg-meta-l { color: rgba(42, 49, 44, .75); font-family: var(--arena-font-sans); }
html[data-skin="arena"] .reg-meta-v { color: var(--arena-ink); }
html[data-skin="arena"] .reg-card-diff { background: var(--arena-cream); border-color: var(--arena-sand); }
html[data-skin="arena"] .reg-diff-tag { color: var(--arena-moss); font-family: var(--arena-font-sans); }
html[data-skin="arena"] .reg-art-link { color: var(--arena-moss); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(24, 64, 47, .3); text-underline-offset: 3px; }
html[data-skin="arena"] .reg-art-link:hover { color: var(--arena-ink); text-decoration-color: currentColor; }
html[data-skin="arena"] .reg-art-link:focus-visible { outline: 2px solid var(--arena-moss); outline-offset: 2px; border-radius: 2px; }

/* ═════════ ISOLATIEGLAS ═════════ */
html[data-skin="arena"] .glas-hero { background-image: none; background: var(--arena-forest); margin-top: 0; min-height: 0; overflow: hidden; }
html[data-skin="arena"] .glas-hero::before { content: ""; position: absolute; left: -8rem; top: -7rem; width: 30rem; height: 30rem; border-radius: 9999px; background: rgba(34, 197, 94, .12); filter: blur(64px); pointer-events: none; }
html[data-skin="arena"] .glas-hero::after { content: ""; position: absolute; right: -6rem; top: 4rem; width: 26rem; height: 26rem; border-radius: 9999px; background: rgba(255, 210, 138, .07); filter: blur(64px); pointer-events: none; }
html[data-skin="arena"] .glas-hero-overlay { background: none; }
html[data-skin="arena"] .glas-hero-inner { max-width: 1100px; padding: 8rem 24px 3.5rem; }
html[data-skin="arena"] .glas-tag { font-family: var(--arena-font-sans); font-size: 11px; font-weight: 600; letter-spacing: .22em; color: var(--arena-lime); }
html[data-skin="arena"] .glas-tag::before { width: 2rem; background: var(--arena-brand); }
html[data-skin="arena"] .glas-h1 { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.02; font-size: clamp(2.4rem, 5vw, 4.2rem); text-wrap: balance; }
html[data-skin="arena"] .glas-h1.glas-h1 em { font-style: italic; color: var(--arena-sun); }
html[data-skin="arena"] .glas-intro { font-family: var(--arena-font-sans); color: rgba(255, 255, 255, .8); max-width: 42rem; }
html[data-skin="arena"] .glas-meta-item { font-family: var(--arena-font-sans); font-size: .75rem; color: rgba(255, 255, 255, .72); }
html[data-skin="arena"] .glas-wrap { padding: 56px 24px 88px; }
html[data-skin="arena"] .glas-body.glas-body h2 { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.08; font-size: clamp(1.9rem, 3.2vw, 2.6rem); border: 0; padding: 0; margin: 56px 0 18px; color: var(--arena-ink); }
html[data-skin="arena"] .glas-body.glas-body h2::before { content: ""; display: block; width: 2rem; height: 1px; background: var(--arena-brand); margin-bottom: 14px; }
html[data-skin="arena"] .glas-body.glas-body h3 { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.01em; font-size: 1.5rem; line-height: 1.15; color: var(--arena-ink); }
html[data-skin="arena"] .glas-body.glas-body p,
html[data-skin="arena"] .glas-body.glas-body li { color: rgba(42, 49, 44, .92); }
html[data-skin="arena"] .glas-body.glas-body a { color: var(--arena-moss); text-decoration-color: rgba(24, 64, 47, .4); }
html[data-skin="arena"] .glas-body.glas-body a:hover { color: var(--arena-ink); }
html[data-skin="arena"] .glas-body.glas-body a:focus-visible { outline: 2px solid var(--arena-moss); outline-offset: 2px; border-radius: 2px; }
html[data-skin="arena"] .qf-box { background: #fff; border: 1px solid var(--arena-sand); border-radius: 1.25rem; }
html[data-skin="arena"] .qf-num { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; color: var(--arena-moss); font-size: 2rem; }
html[data-skin="arena"] .qf-lbl { color: rgba(42, 49, 44, .78); font-family: var(--arena-font-sans); }
html[data-skin="arena"] .glas-card { background: #fff; border: 1px solid var(--arena-sand); border-radius: 1.5rem; box-shadow: 0 18px 44px -34px rgba(12, 34, 25, .3); }
html[data-skin="arena"] .glas-card:hover { border-color: rgba(24, 64, 47, .35); }
html[data-skin="arena"] .glas-card--best { border-color: var(--arena-ink); box-shadow: 0 0 0 1px var(--arena-ink), 0 22px 55px -30px rgba(12, 34, 25, .45); }
html[data-skin="arena"] .glas-best-badge { background: var(--arena-ink); color: #fff; font-family: var(--arena-font-sans); }
html[data-skin="arena"] .glas-card-name { font-family: var(--arena-serif); font-weight: 400; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.1; color: var(--arena-ink); }
html[data-skin="arena"] .glas-card-rc { color: var(--arena-moss); font-family: var(--arena-font-sans); }
html[data-skin="arena"] .glas-card-price { color: var(--arena-ink); }
html[data-skin="arena"] .glas-card-desc { color: rgba(42, 49, 44, .88); }
html[data-skin="arena"] .rc-bar-wrap { background: var(--arena-sand); }
html[data-skin="arena"] .rc-bar { background: linear-gradient(90deg, var(--arena-brand-dark), var(--arena-brand)); }
html[data-skin="arena"] .glas-body table.cmp-table th { background: var(--arena-cream); color: var(--arena-ink); font-family: var(--arena-font-sans); font-weight: 600; }
html[data-skin="arena"] .glas-body table.cmp-table td { border-bottom-color: rgba(232, 224, 207, .8); color: rgba(42, 49, 44, .9); }
html[data-skin="arena"] .glas-body table.cmp-table tr:nth-child(even) td { background: var(--arena-paper); }
html[data-skin="arena"] .glas-body table.cmp-table td:first-child { color: var(--arena-ink); }
html[data-skin="arena"] .aff-cta { background: var(--arena-forest); border: 0; border-radius: 2rem; color: #fff; box-shadow: 0 30px 80px -40px rgba(12, 34, 25, .35); }
html[data-skin="arena"] .aff-cta.aff-cta .aff-cta-tag { color: var(--arena-lime); font-family: var(--arena-font-sans); }
html[data-skin="arena"] .aff-cta.aff-cta h3 { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; font-size: 2.2rem; line-height: 1.05; color: #fff; }
html[data-skin="arena"] .aff-cta.aff-cta p { color: rgba(255, 255, 255, .8); }
html[data-skin="arena"] .aff-btn-primary { background: var(--arena-brand); color: var(--arena-ink); font-family: var(--arena-font-sans); font-weight: 600; box-shadow: 0 10px 30px -10px rgba(34, 197, 94, .55); }
html[data-skin="arena"] .glas-body.glas-body a.aff-btn-primary,
html[data-skin="arena"] .glas-body.glas-body a.aff-btn-primary:hover,
html[data-skin="arena"] .glas-body.glas-body a.aff-btn-primary:focus-visible { color: var(--arena-ink); }
html[data-skin="arena"] .aff-btn-primary:hover { background: var(--arena-lime); transform: translateY(-2px); }
html[data-skin="arena"] .aff-btn-secondary { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); font-family: var(--arena-font-sans); font-weight: 600; }
html[data-skin="arena"] .aff-btn-secondary:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
html[data-skin="arena"] .glas-body.glas-body a.aff-btn-secondary { color: #fff; }
html[data-skin="arena"] .aff-note { color: rgba(255, 255, 255, .72); font-family: var(--arena-font-sans); }
html[data-skin="arena"] .sidebar-aff { background: var(--arena-forest); border: 0; border-radius: 1.5rem; color: #fff; }
html[data-skin="arena"] .sidebar-aff-tag { color: var(--arena-lime); font-family: var(--arena-font-sans); }
html[data-skin="arena"] .sidebar-aff.sidebar-aff h3 { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; font-size: 1.6rem; line-height: 1.05; color: #fff; }
html[data-skin="arena"] .sidebar-aff.sidebar-aff p { color: rgba(255, 255, 255, .8); }
html[data-skin="arena"] .sidebar-aff-btn { background: var(--arena-brand); color: var(--arena-ink); border-radius: 9999px; font-family: var(--arena-font-sans); font-weight: 600; }
html[data-skin="arena"] .sidebar-aff-btn:hover { background: var(--arena-lime); }
html[data-skin="arena"] .sidebar-aff-btn:focus-visible { outline: 2px solid var(--arena-lime); outline-offset: 3px; }
html[data-skin="arena"] .sidebar-nav { background: #fff; border: 1px solid var(--arena-sand); border-radius: 1.25rem; }
html[data-skin="arena"] .sidebar-nav-title { color: rgba(42, 49, 44, .78); font-family: var(--arena-font-sans); }
html[data-skin="arena"] .sidebar-nav a { color: rgba(42, 49, 44, .9); }
html[data-skin="arena"] .sidebar-nav a:hover { background: var(--arena-cream); color: var(--arena-ink); }
html[data-skin="arena"] .sidebar-nav a:focus-visible { outline: 2px solid var(--arena-moss); outline-offset: 2px; }
html[data-skin="arena"] .ibox { background: #f1f8ec; border-color: #b9dba4; border-radius: 1.25rem; }
html[data-skin="arena"] .ibox-title,
html[data-skin="arena"] .tbox-title { color: var(--arena-moss); font-family: var(--arena-font-sans); }
html[data-skin="arena"] .tbox { background: #fff; border-color: var(--arena-sand); border-left-color: var(--arena-brand); border-radius: 0 1.25rem 1.25rem 0; }
@media (max-width: 680px) {
  html[data-skin="arena"] .pg-hero { padding: 6.5rem 0 2.5rem; }
  html[data-skin="arena"] .glas-hero-inner { padding: 6.5rem 20px 2.5rem; }
}

/* regelingen-stappen: kleurbadges (inline voor het donkere thema) worden leesbaar op wit */
html[data-skin="arena"] .step-item { background: #fff; border-color: var(--arena-sand); border-radius: 1.25rem; }
html[data-skin="arena"] .step-n { background: var(--arena-ink); color: #fff; font-family: var(--arena-font-sans); }
html[data-skin="arena"] .step-title { font-family: var(--arena-font-sans); font-weight: 600; color: var(--arena-ink); }
html[data-skin="arena"] .step-badge { color: var(--arena-moss) !important; font-family: var(--arena-font-sans); font-weight: 700; }
html[data-skin="arena"] .cmp-up { color: #166534; }
html[data-skin="arena"] .cmp-down { color: #92400e; }