/* IPTV Holland Direct: wit, Delfts blauw en fel oranje, met tegels als huisstijl. Titels Funnel Display, tekst Funnel Sans. Klassen "nh-". */
:root {
  --wit: #ffffff;
  --mist: #f2f6fc;
  --room: #fff5ea;
  --inkt: #14264d;
  --inkt-zacht: #43506d;
  --grijs: #586580;
  --delft: #21468b;
  --delft-diep: #16305f;
  --delft-licht: #dfe8f7;
  --oranje: #ff8a1f;
  --oranje-diep: #f07300;
  --oranje-tekst: #b34e00;
  --lijn: #d9e1ef;
  --ck-accent: #21468b;
  --ck-accent-ink: #ffffff;
  --r: 10px;
  --r-groot: 16px;
  --schaduw: 0 16px 36px -22px rgba(20, 38, 77, .45);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--wit); color: var(--inkt); font: 400 17px/1.68 "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
img, svg { max-width: 100%; }
a { color: var(--delft); text-underline-offset: 3px; }
a:hover { color: var(--oranje-tekst); }
h1, h2, h3, .nh-voetkop { font-family: "Funnel Display", system-ui, sans-serif; color: var(--inkt); line-height: 1.15; font-weight: 700; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); font-weight: 800; letter-spacing: -.02em; margin: .1em 0 .4em; }
h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); letter-spacing: -.012em; margin: 0 0 .45em; }
h3 { font-size: 1.22rem; margin: 0 0 .35em; }
p { margin: 0 0 1em; }
table { border-collapse: collapse; }
:focus-visible { outline: 3px solid var(--oranje-diep); outline-offset: 2px; }

.nh-breed { width: min(1160px, 100% - 32px); margin-inline: auto; }
.nh-smal { width: min(780px, 100% - 32px); margin-inline: auto; }
.nh-verborgen, .nh-val { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nh-spring { position: absolute; left: -999px; top: 8px; background: var(--inkt); color: #fff; padding: 8px 14px; z-index: 99; }
.nh-spring:focus { left: 8px; color: #fff; }
.nh-zacht { color: var(--grijs); font-weight: 400; }
.nh-midden { text-align: center; margin-inline: auto; }

/* Knoppen: strak met kleine hoeken, oranje met donkere tekst */
.nh-knop { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: var(--r); border: 2px solid transparent; font: 700 1rem/1.2 "Funnel Sans", sans-serif; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.nh-knop-oranje { background: var(--oranje); color: var(--inkt); }
.nh-knop-oranje:hover { background: var(--oranje-diep); color: var(--inkt); }
.nh-knop-donker { background: var(--inkt); color: #fff; }
.nh-knop-donker:hover { background: #000; color: #fff; }
.nh-knop-rand { background: #fff; border-color: var(--delft); color: var(--delft); }
.nh-knop-rand:hover { background: var(--delft); color: #fff; }
.nh-knop-wit { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.nh-knop-wit:hover { background: #fff; color: var(--delft-diep); }
.nh-knop-vol { width: 100%; }
.nh-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 20px; }

/* Kopbalk */
.nh-kopbalk { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 4px solid var(--delft); }
.nh-kopbalk-rij { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.nh-merk { display: inline-flex; line-height: 0; }
.nh-menu { display: flex; align-items: center; gap: 4px; }
.nh-menu a { padding: 8px 12px; color: var(--inkt); text-decoration: none; font-weight: 600; font-size: .96rem; border-bottom: 3px solid transparent; }
.nh-menu a:hover { color: var(--delft); border-bottom-color: var(--oranje); }
.nh-menu a[aria-current="page"] { color: var(--delft); border-bottom-color: var(--delft); }
.nh-menu .nh-menuactie { margin-left: 10px; padding: 10px 18px; background: var(--oranje); color: var(--inkt); border-radius: var(--r); border-bottom: 0; font-weight: 700; }
.nh-menu .nh-menuactie:hover { background: var(--oranje-diep); color: var(--inkt); }
.nh-menuknop { display: none; width: 46px; height: 46px; background: var(--mist); border: 0; border-radius: var(--r); cursor: pointer; padding: 11px 12px; }
.nh-menuknop span { display: block; height: 2px; background: var(--inkt); margin: 4px 0; }
@media (max-width: 940px) {
  .nh-menuknop { display: block; }
  .nh-menu { display: none; position: absolute; left: 0; right: 0; top: 72px; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 4px solid var(--delft); padding: 8px 16px 18px; box-shadow: var(--schaduw); }
  .nh-menu.nh-open { display: flex; }
  .nh-menu a { padding: 12px 6px; border-bottom: 1px solid var(--lijn); }
  .nh-menu .nh-menuactie { margin: 12px 0 0; text-align: center; border-bottom: 0; }
}
@media (max-width: 400px) { .nh-merk svg { width: 214px; height: auto; } }

/* Kruimelpad */
.nh-kruimel { font-size: .86rem; color: var(--grijs); padding-top: 14px; }
.nh-kruimel ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nh-kruimel li + li::before { content: "/"; margin-right: 6px; }
.nh-kruimel a { color: var(--grijs); }

/* Held met tegelwand */
.nh-held { padding: 58px 0 66px; background: linear-gradient(180deg, var(--mist), #fff 78%); }
.nh-held-rij { display: grid; grid-template-columns: 1.08fr .92fr; gap: 54px; align-items: center; }
.nh-held-rij > * { min-width: 0; }
.nh-boven { font-size: .84rem; font-weight: 700; color: var(--oranje-tekst); margin: 0 0 .5em; }
.nh-lead { font-size: 1.15rem; color: var(--inkt-zacht); max-width: 58ch; }
.nh-voordelen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .95rem; color: var(--inkt-zacht); }
.nh-voordelen li::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: var(--oranje); transform: rotate(45deg); }
@media (max-width: 900px) { .nh-held { padding: 38px 0 46px; } .nh-held-rij { grid-template-columns: 1fr; gap: 34px; } }

.nh-tegelwand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 6px solid var(--delft); border-radius: 8px; background: var(--delft); box-shadow: var(--schaduw); }
.nh-tegel { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px; background: #fbfcff; color: var(--delft-diep); outline: 1px solid var(--delft-licht); }
.nh-tegel b { position: relative; font: 800 clamp(1rem, 2.1vw, 1.5rem)/1.15 "Funnel Display", sans-serif; }
.nh-tegel span { position: relative; font-size: .8rem; font-weight: 500; }
.nh-tegel-hoek { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #9db4dc; stroke-width: 1.6; }
.nh-tegel-oranje { background: var(--oranje); color: var(--inkt); }
.nh-tegel-oranje .nh-tegel-hoek { stroke: rgba(20, 38, 77, .4); }

/* Opening van binnenpagina's */
.nh-opening { padding: 28px 0 38px; background: var(--mist); border-bottom: 1px solid var(--lijn); margin-top: 12px; }
.nh-opening h1 { font-size: clamp(2rem, 4vw, 3rem); }

/* Blokken */
.nh-blok { padding: 64px 0; }
.nh-tint-mist { background: var(--mist); }
.nh-tint-room { background: var(--room); }
.nh-tint-delft { background: var(--delft-diep); color: #e8eefa; }
.nh-tint-delft h2, .nh-tint-delft h3 { color: #fff; }
.nh-tint-delft a { color: #fff; }
.nh-tint-delft a:hover { color: var(--oranje); }
.nh-tint-delft .nh-boven { color: #ffb76e; }
.nh-tint-delft .nh-intro { color: #d6e1f5; }
.nh-titel { margin-bottom: 28px; max-width: 760px; }
.nh-intro { color: var(--inkt-zacht); font-size: 1.05rem; }
.nh-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.nh-twee-breed { grid-template-columns: 1.3fr .7fr; }
.nh-twee > * { min-width: 0; }
@media (max-width: 900px) { .nh-twee, .nh-twee-breed { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .nh-blok { padding: 46px 0; } }

/* Kort antwoord */
.nh-kort { background: #fff; border: 2px solid var(--delft); border-radius: var(--r-groot); padding: 20px 24px; margin: 0 0 28px; }
.nh-kort-t { margin: 0 0 6px; font-weight: 700; color: var(--delft); font-size: .92rem; }
.nh-kort p:last-child { margin-bottom: 0; }
.nh-opmerking { border-left: 5px solid var(--oranje); background: var(--room); padding: 15px 20px; margin: 20px 0; font-size: .97rem; }
.nh-opmerking p:last-child { margin: 0; }

/* Punten */
.nh-punten { list-style: none; padding: 0; margin: 0 0 1.2em; }
.nh-punten li { position: relative; padding-left: 26px; margin: 0 0 10px; }
.nh-punten li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 9px; height: 9px; background: var(--oranje); transform: rotate(45deg); }

/* Kaarten */
.nh-kaarten { display: grid; gap: 14px; }
.nh-kaarten-2 { grid-template-columns: repeat(2, 1fr); }
.nh-kaarten-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .nh-kaarten-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .nh-kaarten-2, .nh-kaarten-3 { grid-template-columns: 1fr; } }
.nh-kaart { padding: 24px; background: #fff; border: 1px solid var(--lijn); border-top: 4px solid var(--delft); border-radius: var(--r); display: flex; flex-direction: column; }
.nh-kaart p { color: var(--inkt-zacht); font-size: .98rem; }
.nh-verder { margin-top: auto; font-weight: 700; text-decoration: none; }
.nh-icoon svg { width: 34px; height: 34px; fill: none; stroke: var(--delft); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }

/* Prijstegels */
.nh-prijzen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.nh-prijzen > * { min-width: 0; }
@media (max-width: 980px) { .nh-prijzen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .nh-prijzen { grid-template-columns: 1fr; } }
.nh-prijs { position: relative; display: flex; flex-direction: column; padding: 26px 20px 22px; background: #fff; border: 2px solid var(--lijn); border-radius: var(--r-groot); }
.nh-prijs-zin { color: var(--grijs); font-size: .93rem; min-height: 2.9em; margin-bottom: 10px; }
.nh-prijs-bedrag { font: 800 2.15rem/1.1 "Funnel Display", sans-serif; margin: 0 0 2px; }
.nh-prijs-maand { font-size: .9rem; color: var(--grijs); margin-bottom: 18px; }
.nh-prijs .nh-knop { margin-top: auto; padding: 12px 10px; }
.nh-prijs-top { background: var(--oranje); border-color: var(--oranje-diep); }
.nh-prijs-top .nh-prijs-zin, .nh-prijs-top .nh-prijs-maand { color: var(--inkt); }
.nh-prijs-label { position: absolute; top: -13px; left: 18px; padding: 3px 11px; background: var(--inkt); color: #fff; border-radius: 6px; font-size: .78rem; font-weight: 700; }
.nh-klein { font-size: .87rem; color: var(--grijs); margin: 12px 0 0; }

/* Tabellen */
.nh-tabelvak { overflow-x: auto; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); margin: 0 0 1.4em; }
.nh-tabel { width: 100%; min-width: 520px; font-size: .96rem; }
.nh-tabel caption { text-align: left; padding: 12px 16px 6px; font-size: .88rem; color: var(--grijs); }
.nh-tabel th, .nh-tabel td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.nh-tabel thead th { background: var(--delft); color: #fff; font-size: .9rem; }
.nh-tabel tbody th { font-weight: 600; }
.nh-tabel tbody tr:last-child th, .nh-tabel tbody tr:last-child td { border-bottom: 0; }

/* Vragen */
.nh-vragen { border-top: 2px solid var(--delft); }
.nh-vraag { border-bottom: 1px solid var(--lijn); }
.nh-vraag summary { cursor: pointer; list-style: none; padding: 17px 42px 17px 0; font-weight: 600; font-size: 1.04rem; position: relative; }
.nh-vraag summary::-webkit-details-marker { display: none; }
.nh-vraag summary::after { content: ""; position: absolute; right: 8px; top: 24px; width: 10px; height: 10px; border-right: 2.5px solid var(--oranje-diep); border-bottom: 2.5px solid var(--oranje-diep); transform: rotate(45deg); transition: transform .15s; }
.nh-vraag[open] summary::after { transform: rotate(225deg); top: 28px; }
.nh-antwoord { padding: 0 0 18px; color: var(--inkt-zacht); }
.nh-antwoord p { margin: 0; }

/* Stappen: tegels met cijfer */
.nh-stappen { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.nh-stappen li { counter-increment: s; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); color: var(--inkt); }
.nh-stappen li::before { content: counter(s); display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--delft); color: #fff; border-radius: 6px; font: 800 1.2rem/1 "Funnel Display", sans-serif; }
.nh-stappen h3 { color: var(--inkt); }
.nh-stappen p { color: var(--inkt-zacht); margin: 0; }
.nh-stappen a { color: var(--delft); }

/* Inhoudsopgave, datum */
.nh-opgave { background: var(--mist); border-radius: var(--r); padding: 16px 22px; margin: 0 0 30px; }
.nh-opgave p { margin: 0 0 6px; font-weight: 700; }
.nh-opgave ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 30px; }
@media (max-width: 620px) { .nh-opgave ol { columns: 1; } }
.nh-bijgewerkt { font-size: .86rem; color: var(--grijs); }

/* Apparaten */
.nh-apparaten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 900px) { .nh-apparaten { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .nh-apparaten { grid-template-columns: repeat(2, 1fr); } }
.nh-apparaten a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 8px; height: 100%; background: #fff; border: 2px solid var(--lijn); border-radius: var(--r); text-decoration: none; color: var(--inkt); font-weight: 600; font-size: .93rem; text-align: center; }
.nh-apparaten a:hover { border-color: var(--oranje); color: var(--delft); }
.nh-apparaten svg { width: 30px; height: 30px; fill: none; stroke: var(--delft); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Formulieren */
.nh-form { background: #fff; border: 2px solid var(--delft); border-radius: var(--r-groot); padding: 26px; }
.nh-form-t { font-size: 1.42rem; margin-bottom: 16px; }
.nh-veld { margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.nh-veld label { font-weight: 600; font-size: .95rem; }
.nh-veld input, .nh-veld select, .nh-veld textarea { font: inherit; font-size: 1rem; padding: 12px 13px; border: 1.5px solid #b7c3da; border-radius: var(--r); background: #fff; color: var(--inkt); width: 100%; }
.nh-veld input:focus, .nh-veld select:focus, .nh-veld textarea:focus { outline: none; border-color: var(--delft); box-shadow: 0 0 0 3px rgba(33, 70, 139, .18); }
.nh-melding { display: none; padding: 12px 14px; border-radius: var(--r); font-size: .96rem; margin: 0 0 14px; }
.nh-melding.nh-zichtbaar { display: block; }
.nh-melding-goed { background: #e2f4e8; color: #17512f; }
.nh-melding-fout { background: #fde8e3; color: #8d2410; }

/* Afsluiter */
.nh-afsluiter { background: var(--delft); color: #e8eefa; }
.nh-afsluiter-rij { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; padding: 50px 0; }
.nh-afsluiter h2 { color: #fff; margin-bottom: .25em; }
.nh-afsluiter p { margin: 0; max-width: 56ch; }
.nh-afsluiter .nh-knoppen { margin: 0; }

/* Voet */
.nh-voet { background: var(--delft-diep); color: #d6e1f5; }
.nh-voet-boven { display: grid; grid-template-columns: 1fr 2.4fr; gap: 42px; padding: 50px 0 30px; }
.nh-voet-merk p { font-size: .95rem; margin: 14px 0 0; }
.nh-voet-kolommen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.nh-voetkop { color: #fff; font-size: 1.04rem; margin: 0 0 12px; }
.nh-voet ul { list-style: none; margin: 0; padding: 0; }
.nh-voet li { margin: 0 0 8px; line-height: 1.4; }
.nh-voet a { color: #d6e1f5; text-decoration: none; font-size: .93rem; }
.nh-voet a:hover { color: #fff; text-decoration: underline; }
.nh-voet-onder { border-top: 1px solid rgba(255, 255, 255, .16); padding: 16px 0 24px; font-size: .84rem; }
.nh-voet-onder p { margin: 0; }
.nh-voet-onder a { text-decoration: underline; font-size: inherit; }
@media (max-width: 900px) { .nh-voet-boven { grid-template-columns: 1fr; } .nh-voet-kolommen { grid-template-columns: repeat(2, 1fr); } }

/* Lange tekst */
.nh-tekst h2 { margin-top: 1.3em; }
.nh-tekst h2:first-child, .nh-boven + h2 { margin-top: 0; }
.nh-tekst h3 { margin-top: 1.1em; }
.nh-tekst ul, .nh-tekst ol { padding-left: 22px; }
.nh-tekst li { margin-bottom: 6px; }
.nh-zenders { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.nh-zenders li { background: var(--mist); border-left: 4px solid var(--delft); padding: 9px 12px; font-weight: 600; font-size: .96rem; }