/* Account-dashboard: 3-koloms-opmaak (D7-look), controller-gerenderd. */
/* Klein beetje lucht tussen de superfish-menuband (STAF/DEEL/LEID/ACCOUNT)
   en het dashboard (verzoek Richard 05-08). Het login-scherm krijgt verderop
   zijn eigen, ruimere marge (zelfde specificiteit, latere regel wint). */
.ozk-account-dashboard{margin-top:.75rem}
.ozk-account-cols{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-start}
/* min-width:0 is hier geen detail: zonder die regel krijgt een flex-item de
   standaard min-width:auto en krimpt het niet onder de breedte van zijn eigen
   inhoud. De kaarten in de zijkolommen bevatten tabellen (betalingen,
   declaraties, e-mailvoorkeuren) waarvan de min-content breder is dan 27%;
   de derde kolom paste daardoor niet meer op de regel en wrapte naar onder de
   eerste. Gemeten 19-09-2026 op /account bij 1280px: de middenkolom werd 817px
   in plaats van 491px en de rechterkolom stond onderaan. */
.ozk-account-col{box-sizing:border-box;min-width:0}
.ozk-account-col--left{flex:0 0 24%}
.ozk-account-col--mid{flex:1 1 44%;min-width:280px}
.ozk-account-col--right{flex:0 0 27%}
/* Een tabel die tóch breder is dan zijn kolom mag schuiven binnen de kaart,
   niet de pagina oprekken. Alleen voor tabellen, zodat tekstkaarten (zoals
   Jouw gegevens) geen onnodige horizontale scrollbar krijgen. */
.ozk-account-card .view-content:has(table){overflow-x:auto}
.ozk-account-top{margin-bottom:1.25rem}
.ozk-account-region > *{margin-bottom:1.25rem}
/* Kaart-look (D7): elk blok in een witte, omrande "card". */
.ozk-account-card{
  background:#fff;
  border:1px solid #e3e3e3;
  border-radius:5px;
  padding:1rem 1.25rem 1.25rem;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  overflow-wrap:anywhere;
}
/* Titelbalk (grijze kop) strak binnen de kaart. */
.ozk-account-card .view-header .boxheader,
.ozk-account-card .boxheader{margin-top:0}
.ozk-account-card > .view:first-child > *:first-child{margin-top:0}
/* Kopbalk als SOLID header, rand-tot-rand (verzoek Richard 05-08): de
   D7-views leveren de kop als .parentdiv>.boxheader in de view-header; de
   balk schuift hier over de kaart-padding (1rem 1.25rem) heen zodat hij de
   kaartranden raakt — zelfde vorm als de panelen op het login-scherm, maar
   in de lichte neutrale kleur (whitesmoke) die de balken al hadden.
   Bewust alleen .view-header-koppen: een .parentdiv midden in de kaartbody
   (bv. een tussenkop) moet niet over voorgaande content schuiven. */
.ozk-account-card .view-header .parentdiv{margin:-1rem -1.25rem 15px;width:auto}
.ozk-account-card .view-header .parentdiv .boxheader{padding:.55rem 1.25rem}
/* "Mijn gezin" is de enige kaart die NIET uit een view komt (de controller
   bouwt hem, zie bouwOuderportaalBlok) en heeft dus geen .view-header-wrapper.
   Dezelfde twee regels als hierboven, zodat zijn kop niet als enige binnen de
   kaartpadding blijft hangen. Wel als DIRECT kind (`>`): de uitzondering van
   r.30 blijft daarmee gelden voor een .parentdiv verderop in een kaartbody. */
.ozk-account-card > .parentdiv{margin:-1rem -1.25rem 15px;width:auto}
.ozk-account-card > .parentdiv .boxheader{padding:.55rem 1.25rem}
/* De views schrijven hun kop uit als <span class="h2heading">; in de kaarten
   die de controller zelf bouwt (Mijn gezin, en de secties van het ouderportaal)
   is het een echte <h2>/<h3> — nodig voor de koppenlijst van een schermlezer,
   maar die brengt de marge en het vette gewicht van het theme mee. Beide hier
   neutraliseren, anders staat de tekst niet gecentreerd in de balk en is deze
   kop als enige halfvet. */
.ozk-account-card .boxheader > h2,
.ozk-account-card .boxheader > h3{margin:0;line-height:1.4;font-weight:400}
/* Kaart-inhoud in normale broodtekst: sommige D7-views wikkelen hun body in
   h4 (o.a. Linkjes Webteam) — Porto maakte dat klein, hier normaliseren. */
.ozk-account-card h4.field-content{font-size:1rem;font-weight:400;line-height:1.8;margin:0}
/* "Jouw gegevens" en het compacte kinderblok in de zijkolom: gelijke compacte
   lettermaat (.9rem / 14,4px) als de tabellen in de rechterkolom (Barrio zet
   tables op 0.857em / 13,7px), zodat de zijkolommen rustig en evenwichtig
   tonen t.o.v. de 16px broodtekst in de middenkolom. */
.ozk-account-card [class*="view-display-id-block_naw_"],
.ozk-kinderen-kort{
  font-size:.9rem;
  line-height:1.5;
}
.ozk-account-card [class*="view-display-id-block_naw_"] .views-field{
  margin-bottom:.2rem;
}
@media (max-width:900px){
  /* align-items:stretch: de basisregel staat op flex-start, en in kolomrichting
     maakt dat elke kaart zo breed als zijn inhoud (gemeten 29-09-2026 op 390px:
     kaarten van 164 tot 366px). Voor het inlogscherm was dit al zo opgelost. */
  .ozk-account-cols{flex-direction:column;align-items:stretch}
  .ozk-account-col--left,.ozk-account-col--mid,.ozk-account-col--right{flex:1 1 100%}
}
/* RIJEN (opzet 25-09-2026). /account bestaat uit drie .ozk-account-rij's van
   elk drie kolommen, zodat op mobiel eerst foto, welkom en aanmelding komen en
   niet de hele linkerkolom; de indeling per blok staat in
   AccountDashboardController::RIJ. Op desktop een grid met dezelfde breedtes
   als de flexkolommen hierboven. grid-column zet een blok in zijn eigen kolom,
   ook als de kolommen links ervan in deze rij leeg zijn. Onder 900px blijven
   de flexregels hierboven gelden: rij na rij, kolom na kolom. */
@media (min-width:900.02px){
  .ozk-account-cols.ozk-account-rij{display:grid;grid-template-columns:24% minmax(280px,1fr) 27%;column-gap:1.5rem;align-items:start}
  .ozk-account-rij > .ozk-account-col--left{grid-column:1}
  .ozk-account-rij > .ozk-account-col--mid{grid-column:2}
  .ozk-account-rij > .ozk-account-col--right{grid-column:3}
}
/* PORTAAL (/account/portaal, herzien 01-10-2026, Richard: "niet in 3 rijen;
   kolom 1 is verticaal, kolom 2 de resterende breedte"). Geen rijen: één
   linkerkolom van 24% met foto, Jouw gegevens, Toevoegen en Handige links
   onder elkaar, en daarnaast één kolom voor de kampinhoud. Tot 01-10 deelde
   het portaal de rij-opzet van /account; dat trok Jouw gegevens naar beneden
   tot naast Toevoegen en liet een gat onder de foto. */
@media (min-width:900.02px){
  .ozk-account-cols--portaal{display:grid;grid-template-columns:24% minmax(280px,1fr);column-gap:1.5rem;align-items:start}
  .ozk-account-cols--portaal > .ozk-account-col--left{grid-column:1}
  .ozk-account-cols--portaal > .ozk-account-col--mid{grid-column:2}
}
/* Op mobiel niet de hele linkerkolom vooraan: de kolommen vallen weg
   (display:contents) en de kaarten krijgen een volgorde — eerst de foto, dan
   de kampinhoud (kinderen, brengen en halen, ...), dan de rest van links. Dat
   deden de rijen op /account; hier doet `order` het. De gap van .ozk-account-cols
   gaat uit, want de kaarten hebben zelf al een ondermarge (.ozk-account-region > *). */
@media (max-width:900px){
  .ozk-account-cols--portaal{gap:0}
  .ozk-account-cols--portaal > .ozk-account-col{display:contents}
  .ozk-account-cols--portaal > .ozk-account-col--left > *{order:3}
  .ozk-account-cols--portaal > .ozk-account-col--mid > *{order:2}
  .ozk-account-cols--portaal > .ozk-account-col--left > .ozk-account-card:has([class*="view-display-id-image_profielfoto"]){order:1}
}
/* Rij 1 (foto - welkom - aanmelding) even hoog: de kolommen rekken mee tot
   de hoogste (stretch) en de laatste kaart in elke kolom vult de rest. De knop
   in de view-footer (Naar het intranet) staat direct onder de inhoud; tot
   29-09-2026 zakte hij naar de onderrand (margin-top:auto), maar dan stond er
   bij een korte kaart een groot gat boven de knop (Richard). Alleen desktop;
   op mobiel staan de kaarten onder elkaar. */
@media (min-width:900.02px){
  .ozk-account-cols.ozk-account-rij--1{align-items:stretch}
  .ozk-account-rij--1 > .ozk-account-col{display:flex;flex-direction:column}
  .ozk-account-rij--1 > .ozk-account-col > .ozk-account-card:last-child{flex:1 1 auto;display:flex;flex-direction:column}
  .ozk-account-rij--1 > .ozk-account-col > .ozk-account-card:last-child > .views-element-container,
  .ozk-account-rij--1 > .ozk-account-col > .ozk-account-card:last-child > .views-element-container > .view{flex:1 1 auto;display:flex;flex-direction:column}
}
/* ---------------------------------------------------------------------------
   LOGIN-SCHERM (anoniem op /account)
   Herzien 22-09-2026 (verzoek Richard: "mooier en rustiger"): VIER gelijke
   kaarten naast elkaar - uitleg, wachtwoord, passkey, inloglink (variant B,
   gekozen uit twee gebouwde varianten). Daarvoor stonden uitleg, inlogformulier
   en inloglink als drie kolommen, met de passkey-knop als vierde kop in de
   middenkaart. De rust komt uit herhaling: de drie inlogkaarten hebben nu
   dezelfde opbouw - kopbalk, één uitlegregel, formulier, knop op volle breedte.
   --------------------------------------------------------------------------- */
/* Lucht tussen de siteheader/het logo en de panelen (verzoek 05-08). */
.ozk-account-login{margin-top:1.75rem}
/* align-items:stretch OOK buiten de media queries hieronder (22-09-2026). De
   dashboardregel zet .ozk-account-cols onder 900px op flex-direction:column, en
   de basisregel erboven staat op align-items:flex-start - in kolomrichting
   betekent dat: elke kaart zo breed als zijn eigen inhoud. Op 390px viel dat
   niet op (de inhoud vulde de breedte), maar op een telefoon van ~510px bleef
   de inloglink-kaart zichtbaar smaller dan de drie erboven. */
.ozk-account-login .ozk-account-cols{align-items:stretch}
/* De uitlegkaart staat in dezelfde flexrij als de drie inlogkaarten en is
   VIER GELIJKE KOLOMMEN geworden (keuze Richard 22-09-2026, uit twee varianten
   die allebei gebouwd zijn). De andere variant - uitleg als brede balk bóven de
   drie kaarten - blijft bereikbaar met de class `ozk-account-login--breed` op
   de buitenste container; zie de media query onderaan. */
/* Login-kaarten in de paneelvorm van de zijkolom-blokken ("alles kopbalk",
   besluit 2-8-2026, ozk-blokken.css): solide kopbalk (h3 direct in
   .ozk-paneel) boven een whitesmoke paneel. De witte kaart-look van het
   dashboard (padding/schaduw) gaat hier uit - het paneel neemt het over.
   Wel een rand (verzoek Richard 05-08), in het blauw van de kopbalk zodat
   balk en kader één geheel vormen. */
.ozk-account-login .ozk-account-card{padding:0;border:1px solid var(--ozk-blauw,#006E83);border-radius:0;box-shadow:none;background:transparent}
/* COMPACT VERTICAAL RITME (verzoek Richard 22-09-2026: "meer richting
   vierkant"). De kaarten waren 261 breed en 415 hoog; de hoogte zat vooral in
   de marges, niet in de inhoud. Bootstrap's `mb-3` is daarin de grootste post:
   elk veld, elke fieldset en elke actie-wrapper draagt hem, en hij staat op
   1rem !important - vandaar dat ook deze regel !important nodig heeft. */
.ozk-account-login .ozk-paneel__body .mb-3{margin-bottom:.4rem !important}
.ozk-account-login .ozk-paneel > .ozk-paneel__body{padding:.6rem 15px .7rem}
/* De uitlegkaart heeft twee alinea's; de staartmarge van 1rem tussen alinea's
   is daar de grootste post. Zelfde maat als de uitlegregels in de kaarten
   ernaast, zodat de vier kaarten hetzelfde ritme houden. */
.ozk-account-login .ozk-account-col--intro .ozk-paneel__body > p{margin-bottom:.5rem;line-height:1.45}
/* EEN TEKSTMAAT OVER DE VIER KAARTEN (verzoek Richard 25-09-2026). Gemeten
   stonden er vier maten door elkaar: uitlegkaart 16px donker, uitleg in de
   andere drie 14,8px grijs, labels 14px, keuzelijsten 14px naast invoervelden
   van 16px. Nu: alle uitleg en labels op de maat van __uitleg, en alle velden
   op 16px - dat laatste ook omdat iOS Safari onder 16px inzoomt bij focus. */
.ozk-account-login .ozk-account-col--intro .ozk-paneel__body > p{font-size:.925rem;color:#5a5a59}
.ozk-account-login .ozk-paneel__body label{font-size:.925rem}
/* Eén klasse specifieker dan de datelistregel in het thema (.875rem). */
.ozk-account-login .webform-submission-form .form-type-datelist .container-inline > .js-form-item > select{font-size:1rem}
/* De kopbalk zelf ook een slag platter; ozk-blokken.css zet hier .55rem met
   !important (RiverLea-specificiteitsval, zie theming/README.md §3). */
.ozk-account-login .ozk-paneel > h3{padding-top:.3rem !important;padding-bottom:.3rem !important}
/* De uitlegregel boven elk formulier: aanwezig, maar duidelijk ondergeschikt
   aan de kopbalk en het veld eronder. */
.ozk-account-login__uitleg{font-size:.925rem;line-height:1.4;color:#5a5a59;margin-bottom:.5rem}
/* Labels dicht op hun veld. */
.ozk-account-login .ozk-paneel__body label{margin-bottom:.15rem}
/* Velden een slag platter. `:not(.form-submit)` omdat de knoppen óók
   `form-control` dragen en hun eigen, ruimere maat houden. */
.ozk-account-login .ozk-paneel__body .form-control:not(.form-submit),
.ozk-account-login .ozk-paneel__body .form-select{padding-top:.3rem;padding-bottom:.3rem}
/* Alle velden 44px hoog (verzoek Richard 25-09-2026). De webformvelden van de
   kaart "Wachtwoord vergeten?" krijgen dat al uit ozk-formulieren.css (het
   tikdoel van de sitebrede formulierregel); de twee velden van het
   core-inlogformulier vallen buiten .webform-submission-form en bleven 36px. */
.ozk-account-login .ozk-paneel__body .form-control:not(.form-submit){min-height:44px}
/* De statusregel van de passkey-knop (module wa) staat op deze kaart tussen de
   uitleg en de knop, in de ruimte die daar toch al leegstaat. Compacter dan de
   site-brede vorm in ozk-knoppen.css §7 (.95rem met .6rem/.9rem padding): in een
   kolom van 261px werd de melding daar vier regels hoog en dat groeide de
   kaart - en dus de hele rij - met 120px (gemeten 23-09-2026). Hogere
   specificiteit is nodig, want de basisregel staat op een id plus een class. */
.ozk-account-login #passkey-status.wa-status{
  margin:0 0 .5rem;padding:.4rem .55rem;font-size:.85rem;line-height:1.35;border-left-width:3px;
}
/* "Wachtwoord vergeten?" onder de velden: een naregel, geen tweede actie. */
.ozk-account-login__na{margin:.35rem 0 0;font-size:.925rem}
/* Het webform draagt zelf nog een intro-kop (nodig op de losse
   formulierpagina /form/help/inloggen); hier levert de paneelbalk
   de kop al - de dubbele webform-kop verbergen. */
.ozk-account-login .ozk-paneel__body .boxheader{display:none}
/* Verplicht-sterretjes weg (22-09-2026). Op deze drie kaarten is ELK veld
   verplicht, dus het sterretje onderscheidt niets en zet alleen rood in het
   beeld. Het `required`-attribuut en de bijbehorende foutmelding blijven
   staan, dus voor een schermlezer en voor de validatie verandert er niets.
   Barrio zet het teken in ::after op .form-required (components/form.css en
   components/webform.css). */
.ozk-account-login .form-required::after{display:none}
/* Labels niet zwaarder dan de kopbalk erboven (de marge staat hierboven). */
.ozk-account-login .ozk-paneel__body label{font-weight:600}
/* De keuzes onder "Wat weet je nog?" in kaart 4 zijn antwoorden, geen
   veldnamen: gewone tekst, alleen de vraag erboven blijft 600 (Richard
   12-10-2026). */
.ozk-account-login .ozk-paneel__body label.form-check-label{font-weight:400}
/* COMPACTE LABELS OOK IN HET WEBFORM VAN KAART 4 (besluit Richard 28-09-2026).
   Sinds 28-09 zet ozk-formulieren.css alle webformlabels op 16px !important,
   vet en 9px ingesprongen, voor echte formulierpagina's met vragen. In de vier
   inlogkaarten hoort het label bij de compacte kaartmaat (14,8px, 600, niet
   ingesprongen), anders is "Geboortedatum" in kaart 4 groter dan alle andere
   tekst op het scherm. Eén klasse specifieker dan de sitebrede regel; de
   !important is nodig omdat die regel hem zelf ook draagt. Gevonden door de
   nachtelijke inlogsuite (inloggen.weergave.test.mjs, gelijke lettergrootte). */
.ozk-account-login form.webform-submission-form .js-form-item > label:not(.form-check-label),
.ozk-account-login form.webform-submission-form fieldset.radios--wrapper > legend > span{
  font-size:.925rem !important;font-weight:600;padding-left:0;margin-bottom:.15rem;
}
/* OOK DE RADIOLABELS COMPACT (09-10-2026). De regel hierboven zondert
   .form-check-label uit, en dat kon op 28-09: er stond toen geen zichtbare
   radiogroep in kaart 4, want "Wat wil je ontvangen?" klapt pas uit zodra je
   iets hebt ingevuld. Sinds webform 1787 eerst "Wat weet je nog?" vraagt,
   staan er bij het laden twee radiolabels in beeld ("Naam en geboortedatum",
   "Inlognaam"), en die kwamen uit op de sitebrede 16px van
   ozk-formulieren.css -- groter dan alle andere tekst op /account. Dezelfde
   redenering als hierboven, dus dezelfde maat. Geen !important nodig: de
   sitebrede regel (form.webform-submission-form .form-check-label) draagt er
   zelf ook geen, en deze selector is een klasse specifieker. De radio zelf
   (.form-check-input) blijft 16px: die cirkel is een klikdoel, geen tekst.
   Gevonden door de nachtelijke inlogsuite (inloggen.weergave.test.mjs,
   gelijke lettergrootte). */
.ozk-account-login form.webform-submission-form .form-check-label{
  font-size:.925rem;
}
/* Beide knoppen (Inloggen/Indienen) even groot en op volle breedte. */
/* min-height:0 - de webform-knop draagt elders min-height:48px en werd
   daardoor 4px hoger dan de inlogknop. Groen (verzoek Richard 05-08) in het
   canonieke huisstijl-groen uit ozk-knoppen.css (AA: 4,5:1 met wit), met
   dezelfde hover/active-varianten als .btn-secondary; de --bs-*-properties
   sturen bootstraps eigen hover/active-states aan. */
/* min-width:0 (25-09-2026) - ozk-knoppen.css geeft elke webformknop
   min-width:16rem, en een min-width wint van de max-width:100% ernaast. In een
   kaart van 261px (229px binnenmaat) stak "Stuur mij een email" daardoor 27px
   rechts buiten de kaart; op 1024px zelfs 56px. */
/* color en font-weight staan er expliciet bij (22-09-2026), omdat de drie
   knoppen uit drie verschillende hoeken komen en elk hun eigen erfenis
   meebrachten:
   - de passkey-knop van wa draagt `button button--primary` en NIET bootstraps
     `btn btn-primary`, dus hij erfde de donkere bodytekstkleur op het groene
     vlak;
   - de core-inlogknop kwam op de thema-brede font-weight 300 uit, terwijl de
     twee webform-knoppen via ozk-knoppen.css op 400 staan ("lichte letters op
     een verzadigde vlakkleur vallen weg"). Gemeten 22-09-2026: 300 tegen 400
     bij verder identieke kleur, familie en grootte. */
/* GROEN SINDS 29-09-2026 (besluit Richard: roze "past te veel bij de oude
   site", groen heeft een betere vibe). De verzendknop is op elk formulier groen
   (ozk-knoppen.css, sectie 2j); eerder die dag kort roze ("roze overal"), van
   05-08 tot 29-09 al groen. Hover en klik volgen dezelfde baan
   (--ozk-groen-donker, --ozk-groen-klik uit ozk-knoppen.css). Wit op groen
   haalt 4,54:1, net boven de norm: nooit lichter maken. */
.ozk-account-login .ozk-paneel__body .form-submit{
  display:block;width:100%;padding:.4rem 1rem;font-size:1rem;line-height:1.5;height:auto;min-height:0;min-width:0;color:#fff;font-weight:400;
  --bs-btn-bg:var(--ozk-groen);
  --bs-btn-border-color:var(--ozk-groen);
  --bs-btn-hover-bg:var(--ozk-groen-donker);
  --bs-btn-hover-border-color:var(--ozk-groen-donker);
  --bs-btn-active-bg:var(--ozk-groen-klik);
  --bs-btn-active-border-color:var(--ozk-groen-klik);
  background-color:var(--ozk-groen,#28881e);
  border-color:var(--ozk-groen,#28881e);
}
.ozk-account-login .ozk-paneel__body .form-submit:hover{
  color:#fff;
  background-color:var(--ozk-groen-donker,#1f6b17);
  border-color:var(--ozk-groen-donker,#1f6b17);
}
.ozk-account-login .ozk-paneel__body .form-submit:active{
  color:#fff;
  background-color:var(--ozk-groen-klik,#174f11);
  border-color:var(--ozk-groen-klik,#174f11);
}
/* "Maak een nieuw account" in de uitlegkaart (12-10-2026) is een link in
   knopvorm en geen <button>: zonder deze regel staat de tekst links en
   onderstreept. Kleur en hover komen uit de .form-submit-regels hierboven. */
.ozk-account-login .ozk-paneel__body > a.ozk-account-login__nieuw{text-align:center;text-decoration:none}
/* De actie-wrapper van het inlogformulier houdt anders de mb-3 van Barrio
   plus de marge van het laatste veld: samen een gat boven de knop dat de
   webform-kaart ernaast niet heeft. */
/* width/align-self expliciet (22-09-2026): als flex-item in de kolom hierboven
   kreeg deze wrapper zijn eigen breedte (gemeten 95px van de 340px kaart) en
   stond de knop rechts in de kaart in plaats van over de volle breedte. */
/* !important omdat Barrio de actie-wrapper de Bootstrap-utility `mb-3` geeft,
   en die zet zelf `margin-bottom:1rem !important`. Zonder deze regel staat de
   knop in de twee formulierkaarten 16px hoger dan de passkey-knop ernaast
   (gemeten 22-09-2026 op 1280 en 1024px). */
.ozk-account-login .ozk-paneel__body .form-actions{margin-bottom:0 !important;width:100%;align-self:stretch}
/* Het eerste invoerveld van de inloglink-kaart op DEZELFDE HOOGTE als dat van
   de wachtwoordkaart (verzoek Richard 22-09-2026). Twee posten stonden daar
   tussen, allebei onzichtbaar: de webform-flexbox van de naamregel draagt een
   margin-top van 1rem, en de verborgen intro-kop van het webform laat zijn
   staartmarge staan. Samen 23px, gemeten op 1280px. */
.ozk-account-login .ozk-paneel__body .webform-flexbox{margin-top:0}
.ozk-account-login .ozk-paneel__body .webform-type-webform-markup{margin-bottom:0 !important}
/* Het hele intro-element van het webform verbergen, niet alleen een .boxheader
   erin (27-09-2026). Op de losse pagina /form/help/inloggen is de intro een
   gewone uitlegalinea geworden, en die zou hier dubbel staan naast de
   uitlegregel die de kaart zelf al levert. */
.ozk-account-login .ozk-paneel__body .webform-type-webform-markup{display:none}
/* De naamregel van webform 1787 is een webform-flexbox met drie velden in de
   verhouding 2-1-3: voornaam, tussenvoegsel en achternaam. Die laatste twee
   staan op dit formulier op `hidden`, maar hun flex-items houden hun breedte
   - het zichtbare voornaamveld kreeg daardoor maar een derde van de kaart,
   naast twee lege kolommen. In een kolom van deze breedte heeft een
   flexbox-rij toch geen zin, dus hier stapelen (gemeten 22-09-2026 op 1280px:
   voornaam 100px van de 340px kaartbreedte). */
.ozk-account-login .webform-flexbox{display:block}
/* Geboortedatum-selects (Dag/Maand/Jaar, D7-vorm): gelijk verdeeld over de
   kaartbreedte i.p.v. drie auto-brede selects naast elkaar. */
/* `flex:1 1 auto` en niet `1 1 0` (22-09-2026): bij drie exact gelijke delen
   is de maandlijst in een kolom van 265px te smal en valt "Maand" half achter
   het pijltje. Met auto als basis verdeelt flexbox naar de inhoud, en houdt de
   maandlijst de ruimte die "september" nodig heeft. */
.ozk-account-login .webform-type-datelist .container-inline{display:flex;gap:.4rem}
.ozk-account-login .webform-type-datelist .container-inline .js-form-type-select{flex:1 1 auto;min-width:0;margin:0}
/* De MAANDlijst krijgt meer van de rij dan dag en jaar. Bij drie gelijke delen
   is hij in een kolom van 261px ongeveer 70px breed, en daar blijft na de
   2,25rem die Bootstrap voor het pijltje reserveert te weinig over: "Maand"
   werd "Maan" met het pijltje eroverheen (gemeten 22-09-2026). De tweede
   positie is de maand omdat het veld op dag-maand-jaar staat
   (`#date_part_order` van webform 1787). */
.ozk-account-login .webform-type-datelist .container-inline .js-form-type-select:nth-child(2){flex-grow:1.3}
/* Bootstrap reserveert 2,25rem rechts voor het pijltje en tekent dat op
   `right .75rem`. In een kolom van 261px is dat een kwart van de lijst: "Dag"
   en "Jaar" komen dan tegen het pijltje aan. Hier smaller, met het pijltje
   dichter op de rand. */
.ozk-account-login .webform-type-datelist .form-select{width:100%;padding-right:1.35rem;background-position:right .3rem center}
/* Drie GELIJKE kolommen, zoals de D7-layout van panels display 97 (4-4-4).
   De dashboard-verdeling 24/44/27 geldt hier niet: de kaarten zijn nu drie
   gelijkwaardige keuzes. In een media query, anders zou deze specifiekere
   regel ook de mobiele stapeling van .ozk-account-cols overrulen - in
   kolomrichting betekent flex-basis:0 immers hoogte 0. */
/* KOLOMMEN PER SCHERMMAAT (verzoek Richard 22-09-2026):
   - tot 575px  : één kaart breed, onder elkaar (erft flex-direction:column van
                  de dashboardregel hierboven)
   - 576-1199px : 2x2 - vier kaarten in twee rijen van twee
   - vanaf 1200px: vier naast elkaar
   De grens lag eerst op 901px. Op 25-09-2026 naar 1200px (akkoord Richard):
   tussen 901 en 1199px zijn vier kaarten 156-216px breed, en dan toonden de
   keuzelijsten Dag/Maand/Jaar alleen hun eerste letter en werden de
   knopteksten afgekapt. 1200px is ook de grens waarop Bootstraps container
   naar zijn volle breedte gaat.
   De ankering van de knop staat in het eerste blok en geldt dus ook op tablet:
   binnen elke rij lijnen de knoppen onderaan uit. */
@media (min-width:576px){
  /* De dashboardregel zet .ozk-account-cols onder 900px op flex-direction:
     column; hier moet hij weer een echte rij zijn. Twee classes tegen één, dus
     deze regel wint ongeacht de volgorde in het bestand. */
  .ozk-account-login .ozk-account-cols{flex-direction:row;flex-wrap:wrap;align-items:stretch}
  /* Twee per rij: de gap van 1.5rem gaat één keer per rij van de breedte af. */
  .ozk-account-login .ozk-account-col{display:flex;flex:0 0 calc(50% - .75rem);min-width:0}
  .ozk-account-login .ozk-account-card{flex:1 1 auto;width:100%;display:flex;flex-direction:column}
  /* De groene knoppen op DEZELFDE HOOGTE (verzoek Richard 22-09-2026). De
     kaarten in een rij zijn al even hoog; de knop wordt in elke kaart tegen de
     onderrand geduwd door de keten kaart > paneelbody > formulier alle drie als
     flexkolom te laten strekken en de actie-wrapper `margin-top:auto` te geven.
     De passkey-knop heeft geen formulier om zich heen en staat als direct kind
     van de paneelbody in dezelfde regel.
     Dit werkt alleen zolang er in GEEN van de kaarten iets ONDER de knop staat;
     daarom is "Wachtwoord vergeten?" naar boven de knop verhuisd (zie
     buildLoginScreen()). */
  .ozk-account-login .ozk-paneel > .ozk-paneel__body{flex:1 1 auto;display:flex;flex-direction:column}
  /* margin-bottom:0 - een <form> houdt anders zijn staartmarge van 1rem en dan
     staat de knop in de twee formulierkaarten precies 16px hoger dan de
     passkey-knop ernaast (gemeten 22-09-2026 op 1280 en 1024px). */
  .ozk-account-login .ozk-paneel__body > form{flex:1 1 auto;display:flex;flex-direction:column;margin-bottom:0}
  .ozk-account-login .ozk-paneel__body .form-actions,
  .ozk-account-login .ozk-paneel__body > .form-submit{margin-top:auto}
}
@media (min-width:1200px){
  .ozk-account-login .ozk-account-col--gelijk,
  .ozk-account-login .ozk-account-col--intro{flex:1 1 0;min-width:0}
  /* Variant: uitleg als brede balk bovenaan. flex-basis 100% laat de rij
     wrappen; de `gap` van .ozk-account-cols levert de ruimte tussen de rijen.
     De leesregel wordt dan begrensd - over de volle 1116px leest één alinea
     als een lege balk met tekst in de linkerhoek. */
  .ozk-account-login--breed .ozk-account-col--intro{flex:0 0 100%}
  .ozk-account-login--breed .ozk-account-col--intro .ozk-paneel__body > p{max-width:75ch}
}
/* Tabellen in de kaarten TRANSPARANT (verzoek Richard 05-08, n.a.v.
   INTRANET BESTUUR / AANMELDING 2026 / BETALINGEN DIT JAAR): Barrio's
   site-brede components/table.css geeft ELKE tr een grijze rgba-achtergrond
   (tr.odd donkerder, th zelfs rgba(0,0,0,.51) met witte tekst) en
   ozk-porto-port.css §4 zet whitesmoke op theads. In een kaart is de kaart
   zelf al het vlak. Bewust op kaartniveau gescoped, niet per display: zo
   liften ALLE rol-varianten mee (block_bestuur, block_2, intra_leid +
   _kleur/_letter, alle betaal-/declaratieblokken) en kan geen variant die
   een andere rol ziet de fix missen. De --bs-table-*-vars dekken tabellen
   die wél bootstraps .table-class dragen. Rapporttabellen buiten de kaarten
   behouden de D7-look. */
.ozk-account-card table{--bs-table-bg:transparent;--bs-table-accent-bg:transparent;--bs-table-striped-bg:transparent}
.ozk-account-card .view table tr,
.ozk-account-card .view table tr.odd,
.ozk-account-card .view table tr.even{background:transparent}
.ozk-account-card .view table th,
.ozk-account-card .view table td{background:transparent;color:inherit}
/* Tekstlinks in de account-blokken paars (navigatiekleur, zelfde #663399
   als de menublok-kopbalken; AA 8,4:1 op wit) i.p.v. het roze sitebreed —
   verzoek Richard 05-08. Geldt voor dashboard én login-scherm (zelfde
   wrapper-class); knoppen (a.button / .btn) behouden hun eigen kleur. */
.ozk-account-dashboard a:not(.button):not(.btn){color:#663399}
.ozk-account-dashboard a:not(.button):not(.btn):hover,
.ozk-account-dashboard a:not(.button):not(.btn):focus{color:#4D2673}
/* Profielfoto/afbeeldingen binnen kolombreedte houden (mag 100% vullen). */
/* Knop onderaan een kaart (Naar het ouderportaal, Naar het intranet): kleur
   en staten komen van .btn.btn-ozk-paars uit ozk-knoppen.css, hier alleen de
   maat - over de breedte van de kaart, compacte tekst. Gedeeld door het
   kinderblok (template) en views-footers (Aanmelding <jaar>). */
/* Maat van de accountknop: ozk-knoppen.css (uniforme maat, 29-09-2026). */
.ozk-account-card .ozk-account-knop{display:block;width:100%}
.ozk-account-card .view-footer .ozk-account-knop{margin-top:.75rem}
/* Compact kinderblok op /account: marges gelijklopen met de andere blokken
   (geen extra ul-inspringing) en één regel per kind. */
.ozk-kinderen-kort__lijst{padding-left:0;list-style:none;margin-bottom:1rem}
.ozk-kinderen-kort__regel{margin-bottom:.3rem;line-height:1.4}
.ozk-account-dashboard img{max-width:100%;height:auto;display:block}
.ozk-account-region .previewfoto img{width:100%;max-width:100%}
/* Polaroid-weergave van de profielfoto: wit kader met bredere onderrand,
   zachte schaduw en een subtiele rotatie. De marges volgen een echte polaroid
   naar het voorbeeld van Richard (04-10-2026): opzij en boven 7%, onder 20% van
   de framebreedte. Een echte polaroid heeft 25% onder; 20% oogt op de site
   rustiger (Richard 04-10-2026).
   Het kader zit bewust op de img zelf en niet op de div: een padding in
   procenten rekent tegen de breedte van het OMLIGGENDE element. Op de div was
   dat de kaart, waardoor de rand meegroeide met de kolom in plaats van met de
   foto. Op de img is het omliggende element de div, en die is precies zo breed
   als het frame. object-fit vult alleen de contentbox, de padding blijft wit.
   aspect-ratio 100/113 = 86% beeld + 7% + 20% hoogte, dus het beeld is vierkant;
   dat is meteen het vangnet voor een foto of placeholder in een andere
   verhouding (de beeldstijl polaroid snijdt al vierkant bij). */
.ozk-account-region .previewfoto.polaroid{
  display:inline-block;
  transform:rotate(-2deg);
  margin:6px 4px 10px;
}
.ozk-account-region .previewfoto.polaroid img{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:7% 7% 20%;
  aspect-ratio:100/113;
  object-fit:cover;
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
/* In de eerste rij van het dashboard (foto - welkom - kinderen) bepaalt de
   hoogste kaart de rijhoogte. Over de volle kolombreedte was de polaroid
   ~345px hoog tegen ~240px voor welkom en kinderen, met een lege strook onder
   die twee als gevolg. Begrensd op 170px (06-10: 190px, zo groot als de kaart
   toelaat zonder dat de rij groeit) blijft hij herkenbaar en past
   de rij op één lijn (verzoek Richard 25-09-2026). Gecentreerd in de kaart. */
.ozk-account-rij--1 .ozk-account-col--left .ozk-account-card:has(.previewfoto){text-align:center}
.ozk-account-rij--1 .previewfoto.polaroid{max-width:190px}

/* Knop "Naar het ouderportaal" BLAUW (verzoek Richard 21-08-2026). Bewust een
   eigen klasse en niet .btn-ozk-vriend hergebruikt: die staat sinds 01-08-2026
   voor "hier vraagt de stichting om geld" (ozk-knoppen.css §2d) en dat is deze
   knop niet. Kleuren wel uit dezelfde blauw-familie, zodat er geen zesde tint
   bijkomt. De --bs-btn-*-properties sturen bootstraps hover/active-states aan;
   zonder die zou .btn zijn eigen default-blauw teruggeven op hover. */
.ozk-account-dashboard .btn.ozk-btn-portaal{
  --bs-btn-bg:var(--ozk-blauw,#006E83);
  --bs-btn-border-color:var(--ozk-blauw,#006E83);
  --bs-btn-hover-bg:var(--ozk-blauw-donker,#00566A);
  --bs-btn-hover-border-color:var(--ozk-blauw-donker,#00566A);
  --bs-btn-active-bg:var(--ozk-blauw-klik,#00404e);
  --bs-btn-active-border-color:var(--ozk-blauw-klik,#00404e);
  --bs-btn-color:#fff;
  --bs-btn-hover-color:#fff;
  background-color:var(--ozk-blauw,#006E83);
  border-color:var(--ozk-blauw,#006E83);
  color:#fff;
}
.ozk-account-dashboard .btn.ozk-btn-portaal:hover,
.ozk-account-dashboard .btn.ozk-btn-portaal:focus{
  background-color:var(--ozk-blauw-donker,#00566A);
  border-color:var(--ozk-blauw-donker,#00566A);
  color:#fff;
}

/* De portaallink onder "Jouw gegevens" (ozk_intranet_views_pre_render) is een
   ACTIE, geen gegeven: zonder lucht erboven las hij als de vijfde regel van het
   adresblok. Onder juist geen marge — de kaartpadding sluit al af. */
.ozk-account-card .ozk-naw-portaallink{margin:.7rem 0 0}

/* PRESALE-KAART (views-display belangstelling_werving:kaart_presale, sinds
   20-09-2026). Eén vlak blok, zoals de andere kaarten: de grijze kopbalk komt
   uit de view-header, daaronder gewone tekstregels. Bewust géén omkaderde
   sub-balk meer ("een blok in een blok in een blok", Richard 20-09-2026): de
   golf is een gekleurde statusregel met een stip, de rest is broodtekst.
   Kleuren zijn de palet-variabelen van ouderportaal.css (groen = open, paars =
   voorrang, dim = nog dicht). */
.ozk-presale p{margin:0 0 .3rem}
.ozk-presale__status{font-size:1rem;margin-bottom:.15rem}
.ozk-presale__status strong{font-weight:600;letter-spacing:.02em}
.ozk-presale__dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--ozk-status,#696969);margin-right:.15rem;vertical-align:baseline}
.ozk-presale__uitleg{color:#666;font-size:.9rem;line-height:1.45}
.ozk-presale__status--open{--ozk-status:var(--ozk-groen,#28881e)}
.ozk-presale__status--voorrang{--ozk-status:var(--ozk-paars,#663399)}
.ozk-presale__status--dim{--ozk-status:var(--ozk-dim,#696969)}
.ozk-presale__status--open strong,
.ozk-presale__status--voorrang strong{color:var(--ozk-status)}
.ozk-presale__zin{font-weight:600;margin-top:.1rem}
.ozk-presale__meta{color:#666;font-size:.9rem;line-height:1.45}
/* Compacter sinds 13-10-2026 (Richard): minder lucht boven de knop; de
   meta-regel ("ging het afgelopen jaar mee · past bij") staat niet meer in de view. */
.ozk-presale__knoppen{margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem}
.ozk-presale__knoppen .button{margin:0}
/* De spelregelknop op de presale-kaart in de huisstijlkleur (verzoek Richard
   22-09-2026): paars vlak met witte letters, zodat hij als knop leest en niet als
   een lichte rand om witte ruimte. De aanmeldknop ernaast blijft groen — dat is de
   actie die telt zodra de golf open is. --ozk-paars komt uit ouderportaal.css, die
   dit blok toch al meelaadt; de fallback vangt het geval dat die ooit niet laadt. */
.ozk-presale__knoppen .button--paars,
.ozk-presale__knoppen span.button--paars{
  background:var(--ozk-paars,#663399);
  border:1px solid var(--ozk-paars,#663399);
  color:#fff;
}
.ozk-presale__knoppen .button--paars:hover,
.ozk-presale__knoppen .button--paars:focus{
  background:#552d80;
  border-color:#552d80;
  color:#fff;
}

/* Emailadres in "Jouw gegevens" altijd op één regel (Richard 10-10-2026). Past het
   niet, dan kort js/email-inkorten.js het deel vóór de @ in met ***; het domein blijft
   heel. Het veld draagt van views de class .text-break; die heffen we hier op. */
.ozk-account-dashboard .views-field-email .field-content {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Kindkaart midden boven op /account (13-10-2026): de knoppen naast elkaar,
   elk de halve breedte (verzoek Richard); een lange knoptekst breekt af in
   plaats van de knop breder te maken. Is er maar één knop, dan de hele breedte. */
.ozk-kindaccount-melding__knoppen{display:flex;gap:.6rem;margin:0}
.ozk-kindaccount-melding__knoppen .btn{flex:1 1 0;min-width:0;margin:0;white-space:normal;text-align:center}

/* Kindkaart als waarschuwing (Richard 13-10-2026): oranje rand en kopbalk, wit
   icoon, lichtoranje vlak. Oranje is de "let op"-kleur van de huisstijl
   (--ozk-oranje uit ozk-knoppen.css); wit op #cc4d00 haalt 4,54:1. */
.ozk-account-card.ozk-kindaccount-melding{border:2px solid var(--ozk-oranje,#cc4d00);background:#fff5ee}
.ozk-kindaccount-melding > .parentdiv .boxheader{background:var(--ozk-oranje,#cc4d00);color:#fff}
.ozk-kindaccount-melding > .parentdiv .boxheader .h3heading{color:#fff;display:flex;align-items:center;gap:.4rem}
.ozk-kindaccount-melding > .parentdiv .boxheader .material-symbols-outlined{font-size:1.35rem;line-height:1}
/* De waarschuwingskaart rekt mee tot de hoogte van de rij, net als de kaarten
   ernaast (rij 1 maakt de laatste kaart flex-kolom), maar de knoppen staan
   onderaan: de extra hoogte valt tussen tekst en knoppen, niet eronder
   (Richard 13-10-2026). */
.ozk-account-rij--1 > .ozk-account-col > .ozk-account-card.ozk-kindaccount-melding:last-child .ozk-kindaccount-melding__knoppen{margin-top:auto}
.ozk-account-card.ozk-kindaccount-melding{padding-bottom:1rem}