/* De opmaak van het klantportaal. De kleuren zijn de huisstijl uit KlantMailStijl;
   PortaalStijlTests bewaakt dat ze hier niet uit elkaar lopen.

   Een los bestand en geen inline <style>: de style-src laat op deze paden geen inline
   stijl meer toe. Zie SecurityHeadersPolicy. Bijkomend voordeel is dat de browser dit
   bestand bewaart in plaats van het bij elke paginaweergave opnieuw te ontvangen. */

/* aktiv-grotesk is de letter van de site, maar dat is een webfont dat we
   hier niet zelf hosten; Arial staat erachter als terugval, net als in de mails. */

body{font-family:aktiv-grotesk,Arial,Helvetica,sans-serif;margin:0;background:#efefef;color:#1c384e;font-size:15px;line-height:1.75}
*{box-sizing:border-box}

/* ── Sfeerbeeld ────────────────────────────────────── */

.hero{position:relative;background-color:#1c384e;background-size:cover;background-position:center;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px 32px}

/* Een scrim, want het sfeerbeeld kan verwisseld worden: witte tekst moet
   ook op een lichte foto leesbaar blijven. */

.hero-schaduw{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,56,78,.82) 0%,rgba(28,56,78,.55) 45%,rgba(28,56,78,.15) 100%)}
.hero>*{position:relative}
.hero-merk{position:absolute;top:24px;left:32px;display:flex;flex-direction:column;gap:3px}
.hero-logo{max-height:34px;width:auto}
.hero-woordmerk{font-size:17px;letter-spacing:5px;color:#fff}
.hero-slogan{font-size:9px;letter-spacing:2.4px;color:#ceb195}
.hero-welkom{position:absolute;top:26px;right:32px;margin:0;font-size:12px;letter-spacing:1.2px;color:rgba(255,255,255,.85)}
.hero-titel{margin:0;font-size:30px;line-height:1.2;font-weight:400;color:#fff}
.hero-titel em{font-family:Georgia,'Times New Roman',serif;font-style:italic}

/* ── Blad ──────────────────────────────────────────── */

.blad{max-width:1180px;margin:0 auto;background:#fff}
.inhoud{padding:40px 48px 28px}
h1{margin:0 0 14px;font-size:26px;line-height:1.25;font-weight:400}
h2{margin:0 0 4px;font-size:19px;line-height:1.4;font-weight:400}
p{margin:0}

/* Een leesregel blijft een leesregel: lopende tekst niet mee laten
   uitrekken over de volle breedte van het blad. */

.intro{margin:0 0 32px;color:#3d4d5c;max-width:64ch}

/* ── Hoofdmenu: de groepen op één regel, de vragen met een teller ──
   Rechte hoeken en kleine kapitalen, zoals de standregels elders op
   het blad. Het menu loopt door op een telefoon (wrap), geen hamburger:
   vier woorden verdragen twee regels beter dan een verborgen menu. */

.menu{display:flex;flex-wrap:wrap;gap:8px 28px;margin:-8px 0 30px;padding:0 0 14px;border-bottom:1px solid #dcdcdc;font-size:11px;letter-spacing:1.6px;text-transform:uppercase}
.menu a{color:#1c384e;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap}
.menu a:hover{border-bottom-color:#ceb195}
.menu a.actief{border-bottom-color:#1c384e}
.teller{display:inline-block;min-width:10px;padding:2px 7px;margin-left:6px;background:#ceb195;color:#1c384e;font-size:11px;line-height:15px;letter-spacing:0;text-align:center;vertical-align:1px}
h2 .teller{font-size:12px;vertical-align:3px}

/* ── Raster: naast elkaar zodra er plaats is, anders onder elkaar ──
   420px is de ondergrens waaronder een blok met een invulveld te smal
   wordt; daardoor blijft het bij twee kolommen en niet drie. */

.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:0 44px;align-items:start}
.dossier-raster{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:0 44px;align-items:start}
@media(max-width:820px){.dossier-raster{grid-template-columns:1fr}
.inhoud{padding:34px 28px 22px}
}

/* Naast de tijdslijn begint de zijkolom bovenaan; de scheidingslijn
   van het eerste blok is daar een streep zonder iets erboven. */

@media(min-width:821px){.dossier-zij>:first-child{margin-top:0;padding-top:0;border-top:0}
}

/* ── Overzicht: sneltoets en blokken ───────────────── */

.terug{margin:0 0 18px;font-size:13px}
.terug a{color:#4a4e57}
.sneltoets{display:block;text-decoration:none;background:#1c384e;color:#fff;padding:18px 20px;margin:0 0 28px}
.sneltoets-titel{display:block;font-size:16px;line-height:1.4}
.sneltoets-onder{display:block;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.8);margin-top:5px}
.blok{margin:0 0 32px;padding-top:24px;border-top:1px solid #dcdcdc}
.blok h2{margin-bottom:14px}
.rij{background:#efefef;border-left:4px solid #ceb195;padding:16px 18px;margin-bottom:12px}
.rij-titel{font-size:15px;line-height:1.45}
.rij-nummer{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#4a4e57;margin-top:2px}
.rij-onder{font-size:12px;color:#4a4e57;margin-top:4px}
.rij-status{font-size:14px;line-height:1.55;margin-top:8px}
.rij-actie{margin-top:10px;font-size:14px}

/* Mijn gegevens: label boven waarde, om te lezen — de klant wijzigt hier niets. */
.gegeven{margin-top:12px}
.gegeven:first-child{margin-top:0}
.gegeven-label{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#4a4e57}
.gegeven-waarde{font-size:15px;line-height:1.45;margin-top:2px}

/* ── Dossier ───────────────────────────────────────── */

.dossier{margin:0 0 36px}
.nummer{margin:0 0 24px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#4a4e57}
.status{margin:0}

/* ── Tijdslijn ─────────────────────────────────────────────────────
   Een stapbalk van links naar rechts zolang er breedte is, en onder
   820px dezelfde stappen onder elkaar met de lijn links.

   De knopen zijn rond en zijn daarmee het enige dat in dit portaal
   afgerond is (keuze Wim, 14-09-2026). Ze staan los van de blokken
   eromheen: een knoop op een lijn is een punt, en dat leest ronder
   dan het vierkantje dat hier tot dan stond.

   De lijn tussen twee knopen bestaat uit twee halve stukken die aan de
   stappen zelf hangen. Zo weet de opmaak niet hoeveel stappen er zijn
   — vijf vandaag, morgen misschien zes — en kleurt het stuk achter de
   rug mee met de stap die het afsluit. */

.tl-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:14px 32px;margin:2px 0 6px}
.tl-kop-titel{font-size:17px;line-height:1.4}
.tl-kop-uitleg{font-size:13px;color:#4a4e57;margin-top:2px;max-width:52ch}
.tl-kaart{background:#efefef;border-left:3px solid #ceb195;padding:10px 18px}
.tl-kaart-label{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#4a4e57}
.tl-kaart-waarde{font-size:15px;line-height:1.4;margin-top:2px}

.tl{list-style:none;margin:0 0 4px;padding:0;display:flex;align-items:stretch}
.tl-stap{flex:1 1 0;min-width:0;display:flex;flex-direction:column;text-align:center}

/* De rij blijft ook zonder vlaggetje staan, anders zakt de balk scheef. */
.tl-vlagrij{min-height:24px;display:flex;align-items:flex-end;justify-content:center}
.tl-vlag{display:inline-block;background:#1c384e;color:#fff;font-size:10px;line-height:18px;letter-spacing:1.4px;text-transform:uppercase;padding:0 10px;white-space:nowrap}

.tl-spoor{position:relative;display:flex;align-items:center;justify-content:center;height:58px;margin-top:8px}
.tl-lijn{position:absolute;top:50%;margin-top:-1px;height:2px;width:calc(50% - 23px);background:#dcdcdc}
.tl-lijn-voor{left:0}
.tl-lijn-na{right:0}
.tl-stap:first-child .tl-lijn-voor,.tl-stap:last-child .tl-lijn-na{visibility:hidden}

/* Wat nog moet komen krijgt een streepjeslijn; wat achter de rug is
   een volle in het zand van de huisstijl. */
.tl-gedaan .tl-lijn,.tl-nu .tl-lijn-voor{background:#ceb195}
.tl-nu .tl-lijn-na,.tl-komt .tl-lijn{background:transparent;background-image:repeating-linear-gradient(90deg,#c9ccd1 0 4px,transparent 4px 9px)}

.tl-knoop{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid #dcdcdc;color:#9aa3ac}
.tl-teken{width:21px;height:21px;display:block}
.tl-gedaan .tl-knoop{background:#ceb195;border-color:#ceb195;color:#1c384e}
.tl-nu .tl-knoop{width:54px;height:54px;background:#1c384e;border-color:#1c384e;color:#fff;box-shadow:0 0 0 5px rgba(28,56,78,.09)}
.tl-nu .tl-teken{width:25px;height:25px}

/* Alleen voor wie de pagina laat voorlezen: de stand in woorden. */
.tl-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.tl-tekst{display:block;padding:12px 8px 0}
.tl-titel{display:block;font-size:14px;line-height:1.4;font-weight:700}
.tl-komt .tl-titel{font-weight:400;color:#8a939c}
.tl-moment{display:block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#4a4e57;margin-top:5px}
.tl-indicatie{display:block;font-size:12px;color:#4a4e57;margin-top:5px;font-style:italic}
.tl-omschrijving{display:block;font-size:12.5px;line-height:1.5;color:#4a4e57;margin-top:6px}
.tl-komt .tl-omschrijving{color:#8a939c}

/* De korte balk op het overzicht: dezelfde knopen, zonder de tekst eronder.
   Blijft ook op een telefoon horizontaal — vijf knopen van 28 px passen
   daar, vijf kolommen met tekst niet. */

/* Niet uitrekken over de volle rijbreedte: vijf knopen een halve meter uit
   elkaar lezen niet meer als een balk. */
.tl-kort{margin:10px 0 12px;max-width:400px}
.tl-kort .tl-spoor{height:34px;margin-top:0}
.tl-kort .tl-knoop{width:28px;height:28px}
.tl-kort .tl-teken{width:14px;height:14px}
.tl-kort .tl-nu .tl-knoop{width:34px;height:34px;box-shadow:none}
.tl-kort .tl-nu .tl-teken{width:17px;height:17px}
.tl-kort .tl-lijn{width:calc(50% - 15px)}

.tl-blok{background:#efefef;border-left:3px solid #ceb195;padding:14px 16px;margin-top:26px}
.tl-nulabel{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#4a4e57;margin-bottom:6px}
.tl-status{font-size:15px;line-height:1.55}

/* De films van alle stappen samen: een speler van 16:9 heeft breedte
   nodig die een stapkolom niet heeft. */
.tl-films{margin-top:28px}
.tl-filmrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:10px}
.tl-film .video{margin-top:0}
.tl-filmstap{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#4a4e57;margin-bottom:5px}

@media(max-width:820px){.tl{display:block;margin-bottom:0}
.tl-stap{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;text-align:left}
.tl-vlagrij{grid-column:2;grid-row:1;min-height:0;justify-content:flex-start;margin-bottom:4px}
.tl-spoor{grid-column:1;grid-row:1 / span 2;align-self:stretch;flex-direction:column;justify-content:flex-start;height:auto;margin-top:0}
.tl-lijn{top:0;bottom:0;left:50%;margin:0 0 0 -1px;width:2px;height:auto}
.tl-lijn-voor{display:none}
.tl-komt .tl-lijn,.tl-nu .tl-lijn-na{background-image:repeating-linear-gradient(180deg,#c9ccd1 0 4px,transparent 4px 9px)}
.tl-tekst{grid-column:2;grid-row:2;padding:0 0 26px}
.tl-stap:last-child .tl-tekst{padding-bottom:0}
.tl-knoop{width:40px;height:40px}
.tl-nu .tl-knoop{width:46px;height:46px;box-shadow:none}
.tl-blok{margin-top:22px}
.tl-kort{display:flex}
.tl-kort .tl-stap{display:flex}
.tl-kort .tl-spoor{flex-direction:row;justify-content:center;height:34px}
.tl-kort .tl-lijn{top:50%;bottom:auto;left:auto;margin:-1px 0 0;height:2px;width:calc(50% - 15px)}
.tl-kort .tl-lijn-voor{display:block;left:0}
.tl-kort .tl-lijn-na{right:0}
.tl-kort .tl-komt .tl-lijn,.tl-kort .tl-nu .tl-lijn-na{background-image:repeating-linear-gradient(90deg,#c9ccd1 0 4px,transparent 4px 9px)}
.tl-kort .tl-knoop{width:28px;height:28px}
.tl-kort .tl-nu .tl-knoop{width:34px;height:34px}
}

/* ── Video ─────────────────────────────────────────── */

.video{margin-top:12px}
.video-knop{display:flex;align-items:center;gap:12px;width:100%;text-align:left;text-decoration:none;background:#efefef;border:1px solid #dcdcdc;padding:12px 14px;font-family:inherit;font-size:13px;color:#1c384e;cursor:pointer}
.video-knop:hover{border-color:#c2c7cc}
.video-knop:focus-visible{outline:2px solid #1c384e;outline-offset:2px}
.video-play{flex:0 0 auto;width:26px;height:26px;background:#1c384e;position:relative}
.video-play::after{content:'';position:absolute;top:8px;left:10px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff}
.video-titel{flex:1 1 auto;line-height:1.4}
.video-hint{flex:0 0 auto;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#4a4e57}
.video-kader{margin-top:12px}
.video-kader iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.video-sluit{margin-top:6px;background:none;border:0;padding:4px 0;font-family:inherit;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#4a4e57;cursor:pointer}

/* ── Documenten ────────────────────────────────────── */

.documenten{margin-top:22px;padding-top:18px;border-top:1px solid #ececec}
.doc-kop{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#4a4e57;margin-bottom:8px}
.doc-lijst{list-style:none;margin:0;padding:0}
.doc-lijst li{padding:5px 0;font-size:14px}
.doc-bestand{font-size:11px;color:#4a4e57}
.doc-openstaand{font-size:11px;color:#1c384e;font-weight:600}
.bet-lijst{list-style:none;margin:0;padding:0}
.bet-lijst li{padding:7px 0;font-size:14px}
.bet-naam{display:block}
.bet-regel{display:block;margin-top:1px}
.bet-factuur{font-size:11px}
.doc-melding{font-size:13px;color:#4a4e57}

/* ── Bestand delen ─────────────────────────────────── */

.delen{margin-top:18px;padding-top:16px;border-top:1px solid #ececec}
.delen-uitleg{font-size:13px;color:#4a4e57;margin-bottom:10px}
.bestandlabel{display:block;text-align:center;padding:12px;border:1px dashed #b9bec4;color:#1c384e;font-size:13px;cursor:pointer;margin-bottom:10px;position:relative}

/* Niet display:none: een verplicht veld moet focusbaar blijven voor de
   ingebouwde browservalidatie ("kies eerst een bestand"). */

.bestandlabel input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.delen button{width:100%;padding:12px;font-size:14px;border:0;background:#1c384e;color:#fff;font-family:inherit;cursor:pointer}

/* ── Vragen en berichten ───────────────────────────── */

/* Op een eigen pagina sinds 08-09-2026, onder het menu: geen scheidingslijn
   erboven meer, en een leesbreedte, want een draad over het hele blad leest
   als een tabel. */
.vragendraden{margin:0 0 32px;max-width:720px}
.draad{background:#efefef;padding:16px 18px;margin-bottom:16px}
.draad-kop{font-size:14px;line-height:1.45}
.draad-stand{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#4a4e57;margin-bottom:12px}
.draad-nieuw{display:inline-block;background:#ceb195;color:#1c384e;padding:3px 8px;margin-left:8px;letter-spacing:1.4px}
.reageren summary{cursor:pointer;list-style:none;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#1c384e;padding:8px 0 0}
.reageren summary::-webkit-details-marker{display:none}
.reageren summary::before{content:'+ ';}
.reageren[open] summary::before{content:'\2212 ';}
.reageren[open] summary{margin-bottom:8px}
.bericht{background:#fff;padding:12px 14px;margin-bottom:8px}
.bericht.van-ons{border-left:3px solid #ceb195}
.bericht.van-klant{border-left:3px solid #dcdcdc}
.bericht-wie{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#4a4e57;margin-bottom:5px}
.bericht-tekst{font-size:14px;line-height:1.6}
.nieuwe-vraag{margin-top:8px}
.vragendraden textarea,.vragendraden select{width:100%;box-sizing:border-box;padding:10px;font-family:inherit;font-size:14px;color:#1c384e;border:1px solid #ced4da;margin-bottom:8px}
.vragendraden button{width:100%;padding:12px;font-size:14px;border:0;background:#1c384e;color:#fff;font-family:inherit;cursor:pointer}

/* ── Contactpersonen ───────────────────────────────── */

.contacten{margin:0 0 32px;padding-top:28px;border-top:1px solid #dcdcdc}
.contacten h2{margin-bottom:16px}
.contact{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.contact-foto{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 56px;background:#efefef;display:block}
.contact-fotolink{flex:0 0 56px;line-height:0;cursor:zoom-in}
.contact-gegevens{min-width:0}

/* De foto groot: het hele beeld, dus niet rond bijgesneden zoals het
   rondje in de lijst — een pasfoto is niet altijd vierkant. */

.foto-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:60;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.foto-overlay img{max-width:100%;max-height:80vh;background:#fff}
.foto-sluit{position:absolute;top:18px;right:18px;padding:9px 16px;border:0;background:#fff;color:#1c384e;font-family:inherit;font-size:13px;cursor:pointer}
.contact-rol{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#4a4e57}
.contact-naam{font-size:15px;margin-top:2px}
.contact-regel{font-size:13px;line-height:1.6}

/* ── Voet ──────────────────────────────────────────── */

.voet{background:#efefef;padding:26px 32px;font-size:12px;line-height:1.8;color:#4a4e57}
a{color:#1c384e}
.voet a{color:#4a4e57}
@media(max-width:520px){.hero{min-height:200px;padding:20px}
.hero-merk{top:18px;left:20px}
.hero-welkom{display:none}
.hero-titel{font-size:23px}
.inhoud{padding:28px 20px 16px}
.voet{padding:22px 20px}
.video-hint{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
}

/* De voordeur: het formulier waarmee de klant zijn persoonlijke link opvraagt. */
.voordeur{max-width:480px}
.voordeur label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.voordeur input[type=email]{width:100%;box-sizing:border-box;padding:12px;font-family:inherit;font-size:15px;color:#1c384e;border:1px solid #ced4da;margin-bottom:12px}
.voordeur button{width:100%;padding:12px;font-size:14px;border:0;background:#1c384e;color:#fff;font-family:inherit;cursor:pointer}
.voordeur .toelichting{font-size:13px;color:#4a4e57;margin:10px 0 0}
.vd-web{display:none}
.vd-nazorg{max-width:480px;font-size:13px;color:#4a4e57;line-height:1.6;margin:18px 0 0}
.taalwissel{margin-top:28px;font-size:13px}
.taalwissel a{color:#4a4e57}