/* ==========================================================
   Lettertype van onze eigen server.
   Figtree is een variabel font: één bestand bevat alle diktes van 300 tot 900.
   Zo gaat er geen bezoekersgegeven meer naar Google en laadt de tekst sneller.
   ========================================================== */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================
   Zakelijk Glasvezel Pro — ontwerpvoorbeeld
   Kleuren en vormen komen uit de live stylesheet van kpn.com
   (zie KPN-HUISSTIJL-TOKENS.md). Nog geen productiecode.
   ========================================================== */

:root {
  --groen:        #00C300;
  --groen-donker: #00A800;
  --groen-licht:  #74E65C;
  --groen-tint:   #F0FCF0;
  --limoen:       #DDFF44;
  --blauw:        #0066EE;
  --blauw-donker: #003AAB;
  --inkt:         #131313;
  --grijs-50:     #F3F3F3;
  --grijs-100:    #E3E3E3;
  --grijs-200:    #D3D3D3;
  --grijs-600:    #535353;
  --wit:          #FFFFFF;

  --radius-kaart: 16px;
  --radius-pil:   32px;
  --breedte:      1180px;

  --kop: 'Figtree', system-ui, sans-serif;
  --tekst: 'Figtree', system-ui, sans-serif;
}

/* Lettertype-variant B, zodat Rik ze kan vergelijken: ?font=outfit */
html[data-font="outfit"] { --kop: 'Outfit', system-ui, sans-serif; --tekst: 'Outfit', system-ui, sans-serif; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--tekst);
  font-size: 17px;
  line-height: 1.65;
  color: var(--inkt);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--kop); font-weight: 900; line-height: 1.1; margin: 0 0 .6em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.25rem; font-weight: 800; }
p  { margin: 0 0 1.1em; }
a  { color: var(--blauw); }

.wrap { max-width: var(--breedte); margin: 0 auto; padding: 0 24px; }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--kop); font-weight: 800; font-size: 1rem;
  padding: 15px 28px; border-radius: var(--radius-pil);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.knop-groen { background: var(--groen); color: var(--inkt); }
.knop-groen:hover { background: var(--groen-donker); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,168,0,.28); }
.knop-lijn { background: transparent; color: var(--inkt); border-color: var(--inkt); }
.knop-lijn:hover { background: var(--inkt); color: var(--wit); }
.knop-wit { background: var(--wit); color: var(--inkt); }
.knop-wit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.14); }

/* ---------- Koptekstbalk ---------- */
.kopbalk { background: var(--wit); border-bottom: 1px solid var(--grijs-100); position: sticky; top: 0; z-index: 50; }
.kopbalk .wrap { display: flex; align-items: center; gap: 28px; height: 78px; }
.merk { font-family: var(--kop); font-weight: 900; font-size: 1.12rem; letter-spacing: .06em; text-decoration: none; color: var(--inkt); text-transform: uppercase; white-space: nowrap; }
.merk .pro { background: var(--groen); border-radius: 8px; padding: 2px 9px; margin-left: 4px; }
.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a { color: var(--inkt); text-decoration: none; font-weight: 600; font-size: .96rem; }
.menu a:hover, .menu a.actief { color: var(--groen-donker); }
.kopbalk .knop { padding: 11px 22px; font-size: .94rem; }
.hamburger { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; margin-left: auto; }

/* ---------- Blok 1: hero ---------- */
.hero {
  background: radial-gradient(1200px 520px at 78% -8%, var(--groen-licht) 0%, var(--groen) 42%, var(--groen-donker) 100%);
  color: var(--inkt); padding: 84px 0 92px; text-align: center; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -180px; bottom: -260px;
  width: 620px; height: 620px; border-radius: 50%; background: rgba(255,255,255,.12);
}
.hero .wrap { position: relative; z-index: 1; }
.speld {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.9);
  border-radius: 40px; padding: 8px 18px; font-weight: 700; font-size: .88rem; margin-bottom: 22px;
}
.hero p.lead { font-size: 1.15rem; max-width: 640px; margin: 0 auto 34px; }

/* Postcodecheck */
.check { background: var(--wit); border-radius: var(--radius-pil); padding: 10px; display: flex; gap: 8px; max-width: 700px; margin: 0 auto; box-shadow: 0 18px 40px rgba(0,0,0,.16); }
.check input { border: 0; font: inherit; padding: 14px 18px; border-radius: 24px; background: var(--grijs-50); min-width: 0; }
.check .pc { flex: 1.1; } .check .hn { flex: .7; } .check .toev { flex: .6; }
.check input:focus { outline: 3px solid var(--groen-licht); background: var(--wit); }
.check button { border: 0; background: var(--groen); color: var(--inkt); width: 58px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; flex: 0 0 58px; }
.check button:hover { background: var(--groen-donker); }
.hero .klein { font-size: .9rem; margin-top: 18px; opacity: .85; }

/* ---------- Blok 2 en 3: tekst + cirkel ---------- */
.duo { padding: 90px 0; }
.duo.grijs { background: var(--grijs-50); }
.duo .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.duo.omgekeerd .visueel { order: -1; }
.duo ul { list-style: none; padding: 0; margin: 0 0 28px; }
.duo li { padding-left: 32px; position: relative; margin-bottom: 12px; }
.duo li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--groen-donker); font-weight: 900; }

.visueel { position: relative; display: flex; justify-content: center; }
.bol { width: min(420px, 100%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--groen-licht), var(--groen) 55%, var(--groen-donker)); }
.bol.grijstint { background: radial-gradient(circle at 32% 28%, #fff, var(--grijs-100) 60%, var(--grijs-200)); }
.bubbel {
  position: absolute; left: 4%; bottom: 6%; width: 148px; height: 148px; border-radius: 50%;
  background: var(--limoen); display: grid; place-content: center; text-align: center;
  font-family: var(--kop); font-weight: 900; line-height: 1.15; font-size: 1.05rem;
}
.bubbel span { display: block; font-size: 1.7rem; }

/* ---------- Blok 4: drie kaarten ---------- */
.kaarten { padding: 90px 0 100px; text-align: center; }
.kaarten .intro { max-width: 720px; margin: 0 auto 50px; color: var(--grijs-600); }
.rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: left; }
.kaart {
  background: var(--wit); border-radius: var(--radius-kaart); overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.08); display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.kaart:hover { transform: translateY(-8px); box-shadow: 0 18px 38px rgba(0,0,0,.14); }
.kaart .beeld { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--groen-licht), var(--groen-donker)); position: relative; }
.kaart:nth-child(2) .beeld { background: linear-gradient(135deg, #9df58c, var(--groen)); }
.kaart:nth-child(3) .beeld { background: linear-gradient(135deg, var(--limoen), var(--groen)); }
.kaart .beeld::after { content: "foto"; position: absolute; inset: auto 0 12px 0; text-align: center; font-size: .75rem; color: rgba(0,0,0,.45); letter-spacing: .12em; text-transform: uppercase; }
.kaart .inhoud { padding: 24px 24px 22px; display: flex; flex-direction: column; flex: 1; gap: 10px; }
.kaart p { color: var(--grijs-600); font-size: .97rem; margin: 0; }
.kaart h3 { margin: 0; }
.pijl {
  /* Blijft onderaan staan zodat de pijlen van alle kaarten op één lijn liggen,
     maar houdt wel een vaste minimale afstand tot de tekst. */
  margin-top: auto; align-self: flex-end; width: 44px; height: 44px; border-radius: 50%;
  background: var(--groen); color: var(--inkt); display: grid; place-content: center;
  font-size: 1.2rem; text-decoration: none; transition: transform .2s ease, background .2s ease;
}
.kaart:hover .pijl { background: var(--groen-donker); transform: translateX(4px); }

/* ---------- Strook ---------- */
.strook { background: var(--groen-tint); padding: 54px 0; }
.strook .wrap { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: space-between; }
.strook h2 { margin: 0; }

/* ---------- Voettekst ---------- */
.voet { background: var(--grijs-50); padding: 44px 0 0; font-size: .93rem; }
.voet .wrap { display: grid; grid-template-columns: 300px 1fr 1fr; gap: 40px; align-items: start; }
.voet img { width: 190px; height: auto; }
.voet h4 { font-family: var(--kop); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--grijs-600); margin: 0 0 14px; }
.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li { margin-bottom: 9px; }
.voet a { color: var(--inkt); text-decoration: none; }
.voet a:hover { color: var(--groen-donker); text-decoration: underline; }
.voetbalk { background: #2B2B2B; color: #C9C9C9; margin-top: 40px; padding: 18px 0; font-size: .82rem; }
.voetbalk .wrap { display: block; }
.voetbalk a { color: #C9C9C9; }

/* ---------- Resultatenpagina ---------- */
.stappen { display: flex; gap: 10px; justify-content: center; margin: 0 0 34px; padding: 0; list-style: none; font-size: .86rem; font-weight: 700; }
.stappen li { display: flex; align-items: center; gap: 8px; color: var(--grijs-600); }
.stappen li::before { content: attr(data-nr); width: 26px; height: 26px; border-radius: 50%; background: var(--grijs-100); color: var(--grijs-600); display: grid; place-content: center; }
.stappen li.klaar::before { content: "✓"; background: var(--groen); color: var(--inkt); }
.stappen li.nu { color: var(--inkt); }
.stappen li.nu::before { background: var(--inkt); color: var(--wit); }
.stappen li + li { margin-left: 14px; }

.resultaten { padding: 48px 0 80px; background: var(--grijs-50); min-height: 70vh; }
.paneel { background: var(--wit); border-radius: var(--radius-kaart); padding: 34px; max-width: 900px; margin: 0 auto; box-shadow: 0 2px 16px rgba(0,0,0,.07); }
.adresregel { background: var(--groen-tint); border-left: 4px solid var(--groen); border-radius: 8px; padding: 12px 18px; font-weight: 700; margin-bottom: 26px; }
.optie { border: 2px solid var(--grijs-100); border-radius: var(--radius-kaart); padding: 18px 22px; display: grid; grid-template-columns: 26px 1fr auto; gap: 18px; align-items: center; margin-bottom: 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.optie:hover { border-color: var(--groen-licht); }
.optie input { accent-color: var(--groen-donker); width: 20px; height: 20px; }
.optie.gekozen { border-color: var(--groen); background: var(--groen-tint); }
.optie .naam { font-family: var(--kop); font-weight: 800; font-size: 1.05rem; }
.optie .meta { color: var(--grijs-600); font-size: .9rem; }
.label { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .04em; padding: 3px 10px; border-radius: 40px; background: var(--grijs-50); color: var(--grijs-600); margin-left: 8px; vertical-align: 2px; }
.label.groen { background: var(--groen); color: var(--inkt); }
.label.limoen { background: var(--limoen); color: var(--inkt); }
.prijs { text-align: right; font-family: var(--kop); }
.prijs b { font-size: 1.45rem; display: block; }
.prijs s { color: var(--grijs-600); font-size: .9rem; }
.prijs small { color: var(--grijs-600); font-weight: 600; }
.groep-kop { font-family: var(--kop); font-weight: 900; font-size: 1.1rem; margin: 30px 0 14px; display: flex; align-items: center; gap: 10px; }
.groep-kop::after { content: ""; flex: 1; height: 1px; background: var(--grijs-100); }
.disclaimer { background: #FFF5F5; border: 1px solid #F3D2D2; border-left: 4px solid #C8102E;
              border-radius: 10px; padding: 16px 18px; font-size: .84rem; color: #C8102E;
              margin: 26px 0; }
.acties { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ---------- Klein scherm ---------- */
@media (max-width: 900px) {
  .menu { display: none; }
  .hamburger { display: block; }
  .kopbalk .knop { display: none; }
  .duo .wrap, .voet .wrap { grid-template-columns: 1fr; gap: 40px; }
  .duo.omgekeerd .visueel { order: 0; }
  .rij { grid-template-columns: 1fr; }
  .check { flex-wrap: wrap; border-radius: 24px; }
  .check .pc, .check .hn, .check .toev { flex: 1 1 100%; }
  .check button { width: 100%; border-radius: 24px; flex: 1 1 100%; height: 52px; }
  .optie { grid-template-columns: 26px 1fr; }
  .prijs { grid-column: 2; text-align: left; }
  .stappen { flex-wrap: wrap; }
}

/* ==========================================================
   Paginakop (compacte header voor de binnenpagina's)
   Foto komt later: zet --foto op de sectie en de kleurlaag
   blijft eroverheen, zodat de tekst leesbaar blijft.
   ========================================================== */
.paginakop {
  position: relative; padding: 62px 0 66px; color: var(--wit); overflow: hidden;
  background: #0c3d12 var(--foto, none) center/cover no-repeat;
}
.paginakop::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,120,0,.94) 0%, rgba(0,168,0,.82) 48%, rgba(0,195,0,.55) 100%);
}
/* (het tijdelijke label "foto als achtergrond" is vervallen) */
.paginakop .wrap { position: relative; z-index: 1; }
.paginakop h1 { margin: 0 0 10px; font-size: clamp(1.9rem, 4vw, 2.9rem); }
.paginakop p { margin: 0; max-width: 620px; font-size: 1.08rem; color: rgba(255,255,255,.92); }
.kruimels { font-size: .84rem; margin: 0 0 14px !important; color: rgba(255,255,255,.8) !important; }
.kruimels a { color: rgba(255,255,255,.9); text-decoration: none; }
.kruimels a:hover { text-decoration: underline; }

/* Drie dienstkaarten met alleen tekst (pagina Waarom) */
/* Past zich aan het aantal kaarten aan: bij drie drie kolommen, bij twee
   twee brede. Zo blijft er geen gat staan als er een kaart weggaat. */
.dienstrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.dienst {
  background: var(--wit); border: 2px solid var(--grijs-100); border-radius: var(--radius-kaart);
  padding: 30px 28px 26px; display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dienst:hover { border-color: var(--groen); transform: translateY(-6px); box-shadow: 0 16px 34px rgba(0,0,0,.1); }
.dienst .merkje {
  width: 46px; height: 46px; border-radius: 14px; background: var(--groen-tint);
  display: grid; place-content: center; font-size: 1.3rem; margin-bottom: 16px;
}
.dienst p { color: var(--grijs-600); font-size: .97rem; }
.dienst a.verder { margin-top: auto; font-weight: 700; text-decoration: none; color: var(--groen-donker); }
.dienst a.verder:hover { text-decoration: underline; }

/* Vergelijking Pro tegenover FttH (pagina Verschil) */
.vergelijk { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.kolom { border-radius: var(--radius-kaart); padding: 32px 30px 34px; }
.kolom.pro { background: var(--groen-tint); border: 2px solid var(--groen); }
.kolom.ftth { background: var(--grijs-50); border: 2px solid var(--grijs-100); }
.kolom h3 { font-size: 1.4rem; margin-bottom: 4px; }
.kolom .onder { color: var(--grijs-600); font-size: .93rem; margin-bottom: 20px; }
.kolom ul { list-style: none; padding: 0; margin: 0 0 24px; }
.kolom li { padding-left: 30px; position: relative; margin-bottom: 11px; font-size: .99rem; }
.kolom li::before { content: "✓"; position: absolute; left: 0; color: var(--groen-donker); font-weight: 900; }
.kolom.ftth li::before { content: "•"; color: var(--grijs-600); font-size: 1.3rem; line-height: 1; }

@media (max-width: 900px) {
  .dienstrij, .vergelijk { grid-template-columns: 1fr; }
  .paginakop { padding: 46px 0 50px; }
}

/* ==========================================================
   Toevoegingen 21 september
   ========================================================== */

/* Geruststellers direct onder de hero */
.usp { background: var(--inkt); color: var(--wit); }
.usp .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding-top: 22px; padding-bottom: 22px; }
.usp div { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .98rem; }
.usp .teken { width: 34px; height: 34px; border-radius: 50%; background: var(--groen); color: var(--inkt); display: grid; place-content: center; font-weight: 900; flex: 0 0 34px; }

/* Wat gebeurt er na uw aanvraag */
.stappenblok { padding: 70px 0; }
.stappenblok.op-grijs { background: var(--grijs-50); }
.stappenblok h2 { text-align: center; margin-bottom: 40px; }
.stappenrij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; counter-reset: stap; }
.stapkaart { position: relative; padding-top: 12px; counter-increment: stap; }
.stapkaart::before {
  content: counter(stap); display: grid; place-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--groen);
  font-family: var(--kop); font-weight: 900; font-size: 1.15rem; margin-bottom: 16px;
}
.stapkaart h3 { margin-bottom: .35em; }
.stapkaart p { color: var(--grijs-600); font-size: .97rem; margin: 0; }
.stappenrij .stapkaart:not(:last-child)::after {
  content: ""; position: absolute; top: 34px; left: 58px; right: -18px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--grijs-200) 0 7px, transparent 7px 14px);
}

/* Veelgestelde vragen */
.vragen { max-width: 820px; margin: 0 auto; }
.vraag { border-bottom: 1px solid var(--grijs-100); }
.vraag summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative;
  font-family: var(--kop); font-weight: 800; font-size: 1.08rem;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; background: var(--groen-tint); color: var(--groen-donker);
  display: grid; place-content: center; font-size: 1.2rem; font-weight: 900;
}
.vraag[open] summary::after { content: "–"; background: var(--groen); color: var(--inkt); }
.vraag p { color: var(--grijs-600); margin: 0 0 20px; max-width: 70ch; }

/* Belknop die op mobiel blijft staan */
.belbalk { display: none; }
@media (max-width: 900px) {
  .belbalk {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--wit); border-top: 1px solid var(--grijs-100); padding: 10px 14px;
    gap: 10px; box-shadow: 0 -6px 20px rgba(0,0,0,.1);
  }
  .belbalk .knop { flex: 1; justify-content: center; padding: 13px 10px; font-size: .95rem; }
  body { padding-bottom: 76px; }
  .usp .wrap, .stappenrij { grid-template-columns: 1fr; }
  .stappenrij .stapkaart::after { display: none; }
}

/* Uitklapmenu op mobiel */
@media (max-width: 900px) {
  .menu.open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 78px; left: 0; right: 0; background: var(--wit);
    border-bottom: 1px solid var(--grijs-100); box-shadow: 0 12px 24px rgba(0,0,0,.1); padding: 8px 0;
  }
  .menu.open a { padding: 14px 24px; font-size: 1.05rem; border-bottom: 1px solid var(--grijs-50); }
}

/* ==========================================================
   Stijlronde 21 september (avond)
   ========================================================== */

/* Opsommingen en kaarten binnen een gecentreerde sectie lezen niet fijn
   als de tekst meecentreert. Koppen blijven gecentreerd, de inhoud niet. */
.vergelijk, .dienstrij, .kolom, .dienst { text-align: left; }
.kolom h3, .kolom .onder { text-align: left; }

/* Foto in de ronde vorm. Zodra er beeld is:
   <div class="bol" style="--foto:url('/img/pand.jpg')"></div>
   De groene rand blijft, zodat het bij de huisstijl past. */
.bol.met-foto {
  background: var(--foto) 50% 38%/cover no-repeat;
  box-shadow: 0 0 0 10px var(--groen), 0 18px 40px rgba(0,0,0,.14);
}
.bol.met-foto::after { content: ""; display: block; height: 100%; border-radius: 50%;
  /* Alleen een vleugje groen onderin, zodat de foto zijn eigen kleuren houdt
     maar wel bij de huisstijl hoort. */
  background: linear-gradient(180deg, rgba(0,195,0,0) 45%, rgba(0,120,0,.16) 100%); }

/* Hoofdletters in de navigatie uitproberen: zet ?nav=caps achter de URL */
html[data-nav="caps"] .menu a {
  text-transform: uppercase; letter-spacing: .06em; font-size: .86rem; font-weight: 800;
}
html[data-nav="caps"] .kopbalk .knop { text-transform: uppercase; letter-spacing: .04em; font-size: .84rem; }

/* Het stappenblok staat op wit; daaronder begint de grijze footer.
   Een dun lijntje houdt de overgang scherp. */
.stappenblok { background: var(--wit); border-bottom: 1px solid var(--grijs-100); }

/* Foto binnen de ronde vorm en binnen een kaart */
.bol.met-foto { position: relative; }

/* Kaartbeeld: de foto vult altijd hetzelfde kader, staand of liggend.
   Zonder deze regel houdt een staande foto zijn eigen hoogte en wordt
   de kaart twee keer zo lang als de rest. */
.kaart .beeld { position: relative; }
.kaart .beeld img { position: absolute; inset: 0; width: 100%; height: 100%;
                    object-fit: cover; object-position: 50% 35%; display: block; }
.kaart .beeld:has(img)::after { content: none; }   /* het woord "foto" weg zodra er beeld is */

/* Getekende iconen in plaats van emoji: altijd dezelfde lijndikte,
   altijd netjes gecentreerd, en ze nemen de groene kleur over. */
.dienst .merkje {
  width: 54px; height: 54px; border-radius: 16px;
  background: var(--groen-tint); color: var(--groen-donker);
  display: grid; place-items: center; margin-bottom: 18px;
}
.dienst .merkje svg { width: 27px; height: 27px; display: block; }
.dienst:hover .merkje { background: var(--groen); color: var(--inkt); }

/* De drie dienstkaarten gecentreerd: icoon, kop en tekst onder elkaar in het midden. */
.dienst { text-align: center; align-items: center; }
.dienst .merkje { margin-left: auto; margin-right: auto; }
.dienst p { max-width: 34ch; margin-left: auto; margin-right: auto; }
.dienst a.verder { align-self: center; }

/* Resultatenpagina heeft nu ook een paginakop, dus iets minder lucht erboven */
.paginakop + .resultaten { padding-top: 34px; }

/* ==========================================================
   Koppen in hoofdletters uitproberen: ?kop=caps  (terug: ?kop=normaal)
   Kapitalen ogen groter, dus ze worden iets kleiner gezet en krijgen
   wat meer ruimte tussen de letters.
   ========================================================== */
:root h1,
:root h2,
:root h3,
:root .groep-kop,
:root .optie .naam {
  text-transform: uppercase;
  letter-spacing: .03em;   /* kapitalen hebben lucht nodig */
}
:root h1,
:root h2 { font-weight: 800; }            /* 900 is in kapitalen te zwaar */
:root h3 { font-weight: 700; }
:root h1 { font-size: clamp(1.6rem, 3.5vw, 2.45rem); }
:root h2 { font-size: clamp(1.3rem, 2.5vw, 1.85rem); }
:root h3 { font-size: 1.02rem; }
:root .paginakop h1 { font-size: clamp(1.45rem, 3vw, 2.1rem); }
:root .groep-kop { font-weight: 800; font-size: 1rem; }
:root .vraag summary { text-transform: none; }  /* vragen blijven gewone tekst */

/* Terug naar gewone schrijfwijze om te vergelijken: ?kop=normaal */
html[data-kop="normaal"] h1,
html[data-kop="normaal"] h2,
html[data-kop="normaal"] h3,
html[data-kop="normaal"] .groep-kop,
html[data-kop="normaal"] .optie .naam { text-transform: none; letter-spacing: -.01em; }
html[data-kop="normaal"] h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 900; }
html[data-kop="normaal"] h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 900; }
html[data-kop="normaal"] h3 { font-size: 1.25rem; font-weight: 800; }

/* ==========================================================
   Ronde 22 september
   ========================================================== */

/* 1. Stappenbalk links in plaats van gecentreerd */
.stappen { justify-content: flex-start; }

/* 2. Wachtscherm tijdens het zoeken.
      De check duurt één tot enkele seconden en bij een koude start van KPN
      soms langer. Zonder terugkoppeling denkt een bezoeker dat er niets gebeurt. */
.wachtscherm {
  position: fixed; inset: 0; z-index: 90; display: none;
  place-items: center; padding: 24px;
  background: rgba(19,19,19,.55); backdrop-filter: blur(3px);
}
.wachtscherm.aan { display: grid; }
.wachtscherm .kaartje {
  background: var(--wit); border-radius: var(--radius-kaart); padding: 34px 32px;
  width: min(420px, 100%); text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.wachtscherm h3 { margin-bottom: .3em; }
.wachtscherm .adres { color: var(--grijs-600); font-size: .95rem; margin-bottom: 22px; }
.wachtscherm ol { list-style: none; padding: 0; margin: 0; text-align: left; }
.wachtscherm li {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  color: var(--grijs-600); font-weight: 600; font-size: .96rem;
}
.wachtscherm li::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
  border: 2px solid var(--grijs-100);
}
.wachtscherm li.bezig { color: var(--inkt); }
.wachtscherm li.bezig::before {
  border-color: var(--groen); border-top-color: transparent;
  animation: draai .8s linear infinite;
}
.wachtscherm li.klaar { color: var(--inkt); }
.wachtscherm li.klaar::before {
  content: "✓"; display: grid; place-content: center; font-size: .8rem; font-weight: 900;
  background: var(--groen); border-color: var(--groen); color: var(--inkt);
}
@keyframes draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wachtscherm li.bezig::before { animation: none; } }

/* 3. Belbalk komt pas op als de bezoeker verder is, en gaat weg bij de footer */
@media (max-width: 900px) {
  .belbalk {
    transform: translateY(115%); transition: transform .25s ease;
    pointer-events: none;
  }
  .belbalk.zichtbaar { transform: translateY(0); pointer-events: auto; }
  body { padding-bottom: 0; }
}

/* 4. Op mobiel eerst het beeld, dan de tekst.
      Let op: de kolommen blijven een raster. Zetten we hier flex neer, dan
      verliest de ronde foto zijn breedte en klapt hij in tot een vierkantje. */
@media (max-width: 900px) {
  .duo .wrap { grid-template-columns: 1fr; }
  .duo .visueel, .duo.omgekeerd .visueel { order: -1; margin-bottom: 10px; }
  .duo .visueel { width: 100%; }
  .duo .bol { width: min(320px, 82vw); }
  .duo .bubbel { width: 108px; height: 108px; font-size: .9rem; left: 2%; }
  .duo .bubbel span { font-size: 1.3rem; }
}

/* ---------- Mobiele bijstellingen 22 september ---------- */
@media (max-width: 900px) {
  /* Het hamburgermenu plakte tegen de rand */
  .kopbalk .wrap { gap: 12px; padding-right: 20px; }
  .hamburger { padding: 6px 2px 6px 10px; line-height: 1; }

  /* Op de postcodecheck staat de knop al centraal in beeld; daar leidt de
     balk onderin alleen maar af. */
  body[data-pagina="check"] .belbalk { display: none; }
}
@media (max-width: 480px) {
  .merk { font-size: .95rem; letter-spacing: .04em; }
  .merk .pro { padding: 2px 7px; }
}

/* Het zoekveld op de postcodecheck mag de volle breedte van het paneel pakken:
   het is de hoofdactie van die pagina. De uitkomst blijft juist compact,
   zodat naam en prijs binnen één blikveld staan. */
.paneel .check { max-width: none; width: 100%; }
.paneel .check .pc { flex: 1.3; }

/* Het zoekveld mocht de volle breedte pakken, maar dan worden de losse velden
   onevenredig breed. Deze verhouding houdt postcode dominant en de toevoeging klein. */
.paneel .check { max-width: 820px; }
.paneel .check .pc   { flex: 1.7; }
.paneel .check .hn   { flex: .8; }
.paneel .check .toev { flex: .55; }

/* Op mobiel stapelen de velden, ook in het paneel op de postcodecheck.
   Deze regels staan bewust achteraan en zijn even specifiek als die hierboven,
   anders winnen de bredere bureaublad-verhoudingen het op een smal scherm. */
@media (max-width: 900px) {
  .paneel .check { max-width: none; border-radius: 24px; }
  .paneel .check .pc,
  .paneel .check .hn,
  .paneel .check .toev { flex: 1 1 100%; }
  .paneel .check button { flex: 1 1 100%; width: 100%; height: 52px; border-radius: 24px; }
}

/* ==========================================================
   Juridische pagina's: voorwaarden, privacy, cookies.
   Bewust sober. Geen foto, geen kaders — alleen een smalle
   kolom die prettig leest, ook op een telefoon.
   ========================================================== */
.juridisch { padding: 54px 0 70px; }
.juridisch .wrap { max-width: 760px; }
.juridisch h1 { margin: 10px 0 14px; }
.juridisch .inleiding { color: var(--grijs-600); font-size: 1.05rem; margin: 0 0 6px; }
.juridisch .bijgewerkt {
  color: var(--grijs-600); font-size: .85rem; margin: 0 0 34px;
  padding-bottom: 22px; border-bottom: 1px solid var(--grijs-100);
}
.juridisch h2 {
  font-size: 1.02rem; margin: 40px 0 12px;
  padding-top: 4px;
}
.juridisch h3 {
  font-size: .95rem; font-weight: 800; margin: 26px 0 8px;
  text-transform: none; letter-spacing: 0;
}
.juridisch p  { margin: 0 0 14px; }
.juridisch ul { margin: 0 0 18px; padding-left: 22px; }
.juridisch li { margin-bottom: 7px; }
.juridisch a  { color: var(--groen-donker); }

/* Het blokje met contactgegevens onderaan elke juridische pagina */
.juridisch .slotblok {
  margin-top: 44px; padding: 24px 26px; background: var(--grijs-50);
  border-radius: var(--radius-kaart); font-size: .93rem;
}
.juridisch .slotblok p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .juridisch { padding: 34px 0 48px; }
  .juridisch .slotblok { padding: 20px; }
}

/* ==========================================================
   Tablet in staande stand (ongeveer 600 tot 900 pixels breed).
   Hierboven staat alles al op één kolom, want dat is goed voor
   een telefoon. Een tablet heeft die ruimte niet nodig: daar
   worden kaarten onnodig hoog en staan prijzen te laag.
   Deze tussenstand zet er weer twee naast elkaar.
   ========================================================== */
@media (min-width: 601px) and (max-width: 900px) {

  /* Kaarten twee aan twee in plaats van als lange stapel */
  .rij       { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .dienstrij { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .vergelijk { grid-template-columns: repeat(2, 1fr); gap: 22px; }

  /* De foto's in de kaarten zijn op halve breedte al hoog genoeg */
  .kaart .beeld { aspect-ratio: 16 / 11; }

  /* De zwarte balk en de stappen laten we onder elkaar staan: die lezen
     zo prettiger dan in drie smalle kolommen. */

  /* Prijs weer rechts naast de keuze, daar is ruimte genoeg voor */
  .optie { grid-template-columns: 26px 1fr auto; }
  .prijs { grid-column: 3; text-align: right; }

  /* Zoekvenster weer op één regel */
  .check { flex-wrap: nowrap; border-radius: 40px; }
  .check .pc   { flex: 2 1 auto; }
  .check .hn   { flex: 1 1 90px; }
  .check .toev { flex: 1 1 80px; }
  .check button { width: auto; flex: 0 0 56px; height: 56px; border-radius: 50%; }
}

/* De PRO-kleur uitproberen: /?pro=limoen aan, /?pro=groen weer uit. */
body.pro-limoen .merk .pro { background: var(--limoen); }