/* ---------------------------------------------------------------------------
   Feestslinger: het gedeelde stylesheet van Hapjeslijst.

   De slinger die op de dag zelf door de klas hangt. Egale vlakken in vier
   feestkleuren, kaarten als stickers met een harde schaduw, grote koppen.
   Vrolijk, maar op een strak raster en met inktblauw als vaste tekstkleur.

   Dit bestand wordt in includes/header.php geladen NA bootstrap.min.css en NA
   style.css, zodat het van beide wint zonder dat er !important aan te pas
   komt. De volgorde binnen dit bestand is bewust:

     1. tokens en basis        de kleuren, de letters en het raster
     2. Bootstrap opnieuw      .btn, .card, .form-control en de rest krijgen
        aangekleed             het uiterlijk van dit ontwerp, zodat pagina's
                               die nog niet zijn omgebouwd meteen meelopen
     3. de onderdelen          .knop, .kaart, .chip ... uit de goedgekeurde
                               opzet, letterlijk overgenomen. Ze staan na de
                               Bootstrap-laag, zodat op een element met zowel
                               .kaart als .card het ontwerp wint.
     4. navigatiebalk          de Bootstrap-navbar uit header.php
     5. cookiebanner           includes/toestemming.php, alleen het uiterlijk
     6. responsief             de breekpunten van de opzet plus die van de nav

   LET OP voor de pagina's: dashboard.php, edit_group.php, profiel.php,
   group.php, edit_snack.php en de adminschermen laden hun eigen stylesheet
   (beheer.css, ouderpagina.css, admin.css) NA dit bestand. Daar wint dus nog
   de oude opmaak; die pagina's worden per stuk omgebouwd.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   1. Tokens en basis
   =========================================================================== */

:root{
  --wit:#FFFFFF; --ink:#14213D; --ink-2:#3E4A66; --ink-3:#6C7690;
  --geel:#F7C948; --geel-t:#FFF4CC;
  --koraal:#E4572E; --koraal-t:#FBE0D8;
  --zee:#1B998B; --zee-t:#D6F0EC;
  --bes:#3A5BA0; --bes-t:#DCE3F5;
  --grijs:#EEF0F4; --lijn:#D9DDE7;
  --fd:'Gabarito','Nunito Sans',system-ui,sans-serif;
  --fb:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:14px; --maxw:1140px; --schaduw:6px 6px 0 var(--ink);
}

*{box-sizing:border-box}
body{margin:0;background:var(--wit);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--bes)}
h1,h2,h3{font-family:var(--fd);font-weight:800;line-height:1.05;text-wrap:balance;letter-spacing:-.015em}
h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:900}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:1.25rem;font-weight:700}
/* h4 tot en met h6 staan niet in de opzet, maar wel in de bestaande pagina's.
   Ze krijgen dezelfde letter, anders vallen ze terug op het systeemlettertype. */
h4,h5,h6{font-family:var(--fd);font-weight:700}

/* In de opzet staat op h1, h2, h3 en p geen marge: elk onderdeel bepaalt zijn
   eigen ruimte. Dat geldt binnen het nieuwe raster. Daarbuiten houden de
   pagina's die nog niet zijn omgebouwd de marges van Bootstrap, anders plakt
   daar alle tekst aan elkaar. :where() houdt de soortelijke waarde laag, zodat
   elk onderdeel hieronder deze regel overschrijft. */
.wrap :where(h1,h2,h3,p){margin:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.num{font-variant-numeric:tabular-nums}
.stil{color:var(--ink-2)}
.mini{font-size:.9rem}
.label{display:inline-block;font:700 .78rem/1 var(--fb);text-transform:uppercase;letter-spacing:.1em;padding:6px 10px;border-radius:999px;background:var(--ink);color:#fff}

/* Eén focusring voor de hele site: 3px bes, goed zichtbaar op wit, op geel en
   op inktblauw. */
:focus-visible{outline:3px solid var(--bes);outline-offset:3px}
.knop:focus-visible,.veld:focus-visible,a:focus-visible,.tegel:focus-visible,
.btn:focus-visible,.form-control:focus-visible,.form-select:focus-visible,
.form-check-input:focus-visible,.page-link:focus-visible{outline:3px solid var(--bes);outline-offset:3px}

/* ===========================================================================
   2. Bootstrap opnieuw aangekleed
   De rest van de site gebruikt de onderdelen van Bootstrap. Die krijgen hier
   het uiterlijk van het ontwerp, zodat een pagina zijn markup niet hoeft te
   veranderen om er goed uit te zien.
   =========================================================================== */

/* -- knoppen: dezelfde sticker als .knop ---------------------------------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:800 1rem var(--fd);padding:14px 22px;border-radius:999px;border:2px solid var(--ink);text-decoration:none;cursor:pointer;line-height:1;box-shadow:4px 4px 0 var(--ink);background:var(--wit);color:var(--ink)}
.btn:hover,.btn:focus{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);background:var(--wit);color:var(--ink);border-color:var(--ink)}
.btn:active{transform:translate(2px,2px)}

/* De hoofdknop is inktblauw met een koraalrode schaduw, net als .knop-ink. */
.btn-primary,.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:4px 4px 0 var(--koraal)}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,
.btn-dark:hover,.btn-dark:focus,.btn-dark:active{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:2px 2px 0 var(--koraal)}

.btn-success{background:var(--zee);color:#fff;border-color:var(--ink)}
.btn-success:hover,.btn-success:focus,.btn-success:active{background:var(--zee);color:#fff;border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.btn-danger{background:var(--koraal);color:#fff;border-color:var(--ink)}
.btn-danger:hover,.btn-danger:focus,.btn-danger:active{background:var(--koraal);color:#fff;border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.btn-warning{background:var(--geel);color:var(--ink);border-color:var(--ink)}
.btn-warning:hover,.btn-warning:focus,.btn-warning:active{background:var(--geel);color:var(--ink);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.btn-info{background:var(--bes);color:#fff;border-color:var(--ink)}
.btn-info:hover,.btn-info:focus,.btn-info:active{background:var(--bes);color:#fff;border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.btn-secondary,.btn-light{background:var(--wit);color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover,.btn-secondary:focus,.btn-light:hover,.btn-light:focus{background:var(--wit);color:var(--ink);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}

/* De outline-knoppen worden de gewone witte sticker. Een rand van twee pixels
   hebben ze al; een tweede randkleur erbij zou onrustig worden. */
.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,.btn-outline-danger,
.btn-outline-warning,.btn-outline-info,.btn-outline-dark,.btn-outline-light{background:var(--wit);color:var(--ink);border-color:var(--ink)}
.btn-outline-primary:hover,.btn-outline-secondary:hover,.btn-outline-success:hover,
.btn-outline-danger:hover,.btn-outline-warning:hover,.btn-outline-info:hover,
.btn-outline-dark:hover,.btn-outline-light:hover{background:var(--geel-t);color:var(--ink);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}

.btn-sm,.btn-group-sm > .btn{padding:10px 16px;font-size:.92rem;box-shadow:3px 3px 0 var(--ink)}
.btn-sm:hover,.btn-group-sm > .btn:hover{box-shadow:1px 1px 0 var(--ink)}
.btn-lg,.btn-group-lg > .btn{padding:16px 28px;font-size:1.1rem}
.btn-pill{border-radius:999px}

/* Een tekstknop hoort geen sticker te zijn. */
.btn-link{background:transparent;border-color:transparent;box-shadow:none;color:var(--bes);text-decoration:underline;text-underline-offset:4px;padding:10px 6px}
.btn-link:hover,.btn-link:focus{background:transparent;border-color:transparent;box-shadow:none;transform:none;color:var(--ink)}

.btn:disabled,.btn.disabled{opacity:.55;box-shadow:none;transform:none}

/* -- velden --------------------------------------------------------------- */
.form-control,.form-select{font:600 1rem var(--fb);padding:12px 14px;border:2px solid var(--ink);border-radius:12px;background-color:#fff;color:var(--ink)}
.form-control::placeholder{color:#98A0B5;font-weight:400}
.form-control:focus,.form-select:focus{border-color:var(--ink);background-color:#fff;color:var(--ink);box-shadow:none;outline:3px solid var(--bes);outline-offset:3px}
.form-control-sm,.form-select-sm{padding:8px 11px;font-size:.92rem;border-radius:10px}
.form-label{font:800 .95rem var(--fd);color:var(--ink);margin-bottom:6px}
.form-text,.form-hint{font-size:.86rem;color:var(--ink-3)}
.form-check-input{accent-color:var(--ink);border:2px solid var(--ink)}
.form-check-input:checked{background-color:var(--ink);border-color:var(--ink)}
.form-check-input:focus{border-color:var(--ink);box-shadow:none}
.input-group-text{border:2px solid var(--ink);border-radius:12px;background:var(--grijs);font-weight:700;color:var(--ink)}
.was-validated .form-control:invalid,.form-control.is-invalid{border-color:var(--koraal)}
.invalid-feedback{color:var(--koraal);font-weight:600}

/* -- kaarten -------------------------------------------------------------- */
.card{background:var(--wit);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--schaduw);margin-bottom:2rem;overflow:hidden}
.card:hover{transform:none;border-color:var(--ink);box-shadow:var(--schaduw)}
.card-header{background:var(--geel);color:var(--ink);border-bottom:2px solid var(--ink);padding:14px 20px;border-radius:0 !important}
.card-header h2,.card-header h3,.card-header h5,.card-header .card-title{color:var(--ink);margin:0;font-family:var(--fd)}
.card-body{padding:20px}
.card-footer{background:var(--grijs);border-top:2px solid var(--ink)}
.card-title{font-family:var(--fd);color:var(--ink);font-size:1.25rem}
.card-text{color:var(--ink-2)}
/* Een kaart met een tabel erin is een werkblad, geen sticker. De harde
   schaduw onder zo'n breed blok leest als een fout in plaats van als vorm. */
.card:has(.table){box-shadow:none}

/* -- meldingen ------------------------------------------------------------ */
.alert{border:2px solid var(--ink);border-radius:12px;padding:14px 16px;font-weight:600;color:var(--ink);background:var(--grijs)}
.alert::before{content:none}
.alert-success{background:var(--zee-t)}
.alert-danger{background:var(--koraal-t)}
.alert-warning{background:var(--geel-t)}
.alert-info{background:var(--bes-t)}
.alert-primary{background:var(--bes-t)}
.alert-secondary,.alert-light,.alert-dark{background:var(--grijs)}
.alert a{color:var(--bes);font-weight:700}
.alert .btn-close{opacity:.7}

/* -- labels --------------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:5px;font:800 .8rem/1 var(--fd);padding:7px 11px;border-radius:999px;border:2px solid var(--ink);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);background:var(--grijs)}
.badge.bg-primary,.badge.bg-dark{background:var(--ink) !important;color:#fff}
.badge.bg-success{background:var(--zee) !important;color:#fff}
.badge.bg-danger{background:var(--koraal) !important;color:#fff}
.badge.bg-warning{background:var(--geel) !important;color:var(--ink)}
.badge.bg-info{background:var(--bes) !important;color:#fff}
.badge.bg-secondary,.badge.bg-light{background:var(--grijs) !important;color:var(--ink-2)}

/* -- tabellen ------------------------------------------------------------- */
.table{--bs-table-bg:transparent;background:var(--wit);border:2px solid var(--ink);border-radius:12px;overflow:hidden;box-shadow:none;color:var(--ink);margin-bottom:0}
.table > :not(caption) > * > *{padding:12px 14px;border-bottom-color:var(--lijn)}
.table thead th{background:var(--ink);color:#fff;font:800 .82rem var(--fd);text-transform:uppercase;letter-spacing:.08em;border:0;white-space:nowrap}
.table tbody td{vertical-align:middle}
.table tbody tr:hover{background-color:var(--geel-t)}
.table-responsive{border-radius:12px}

/* -- kruimelpad ----------------------------------------------------------- */
.breadcrumb{font-size:.9rem;font-weight:600;padding:0;margin-bottom:18px}
.breadcrumb a{color:var(--bes);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}
.breadcrumb-item + .breadcrumb-item::before{color:var(--ink-3);content:"›"}
.breadcrumb-item.active{color:var(--ink-2)}

/* -- vensters ------------------------------------------------------------- */
.modal-content{background:var(--wit);border:2px solid var(--ink);border-radius:18px;box-shadow:var(--schaduw)}
.modal-header{border-bottom:2px solid var(--ink);padding:14px 20px}
.modal-title{font-family:var(--fd);font-weight:800;font-size:1.3rem;color:var(--ink)}
.modal-body{padding:20px}
.modal-footer{border-top:2px solid var(--ink);padding:14px 20px;gap:10px}
.modal-backdrop.show{opacity:.45;background:#14213D}

/* -- bladeren ------------------------------------------------------------- */
.pagination{gap:6px}
.page-link{border:2px solid var(--ink);border-radius:999px;color:var(--ink);font:800 .92rem var(--fd);padding:8px 14px;background:var(--wit)}
.page-link:hover{background:var(--geel-t);color:var(--ink)}
.page-item.active .page-link{background:var(--ink);border-color:var(--ink);color:#fff}
.page-item.disabled .page-link{opacity:.5;background:var(--grijs);color:var(--ink-3)}

/* -- lijstgroepen en voortgangsbalken ------------------------------------- */
.list-group-item{border-color:var(--lijn);color:var(--ink)}
.progress{border:2px solid var(--ink);border-radius:999px;background:var(--wit);height:14px}
.progress-bar{background:var(--zee)}

/* ===========================================================================
   3. De onderdelen uit de opzet
   =========================================================================== */

/* -- knoppen: stickers ---------------------------------------------------- */
.knop{display:inline-flex;align-items:center;gap:8px;font:800 1rem var(--fd);padding:14px 22px;border-radius:999px;border:2px solid var(--ink);text-decoration:none;cursor:pointer;line-height:1;box-shadow:4px 4px 0 var(--ink);background:var(--wit);color:var(--ink)}
.knop:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);background:var(--wit);color:var(--ink)}
.knop-ink{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--koraal)}
.knop-ink:hover{background:var(--ink);color:#fff;box-shadow:2px 2px 0 var(--koraal)}
.knop-koraal{background:var(--koraal);color:#fff}
.knop-koraal:hover{background:var(--koraal);color:#fff}
.knop-klein{padding:10px 16px;font-size:.92rem;box-shadow:3px 3px 0 var(--ink)}
.knop-klein:hover{box-shadow:1px 1px 0 var(--ink)}
.knop-ink.knop-klein{box-shadow:3px 3px 0 var(--koraal)}
.knop-ink.knop-klein:hover{box-shadow:1px 1px 0 var(--koraal)}

/* -- stickerkaart --------------------------------------------------------- */
.kaart{background:var(--wit);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--schaduw)}

/* -- status als stickers -------------------------------------------------- */
.chip{display:inline-flex;align-items:center;font:800 .8rem/1 var(--fd);padding:7px 11px;border-radius:999px;border:2px solid var(--ink);text-transform:uppercase;letter-spacing:.06em}
.chip-open{background:var(--zee);color:#fff}
.chip-dicht{background:var(--grijs);color:var(--ink-2)}
.chip-gepland{background:var(--geel);color:var(--ink)}

/* -- banden en kopregels -------------------------------------------------- */
.band{padding-block:clamp(44px,7vw,80px)}
.band-geel{background:var(--geel)}
.band-zee{background:var(--zee-t)}
.band-koraal{background:var(--koraal-t)}
.band-bes{background:var(--bes-t)}
.kop-rij{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.kop-rij p{max-width:34rem;margin:0}
.kop-rij h2{margin:0}
.kop-rij h2::after{content:"";display:block;width:64px;height:7px;border-radius:4px;background:var(--koraal);margin-top:10px}
.band-zee .kop-rij h2::after{background:var(--zee)}
.slot .kop-rij h2::after{background:#fff}

/* ===== homepage ===== */
.hero{background:var(--geel);padding-block:clamp(44px,7vw,80px)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{margin:0}
.hero-lead{font-size:1.25rem;max-width:32rem;margin-block:20px 28px;color:var(--ink)}
.hero-acties{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-bewijs{margin:26px 0 0;font-weight:600}
.hero-bewijs b{font-family:var(--fd);font-size:1.3rem}
.top-kaart{padding:24px 26px 20px}
.top-kaart h3{display:flex;gap:10px;align-items:center;margin:0 0 14px}
.top-kaart ol{list-style:none;margin:0;padding:0}
.top-kaart li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:9px 0;border-bottom:2px dotted var(--lijn)}
.top-kaart li:last-child{border-bottom:0}
.top-kaart .rang{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font:800 .95rem/30px var(--fd);text-align:center}
.top-kaart li:nth-child(1) .rang{background:var(--koraal)}
.top-kaart li:nth-child(2) .rang{background:var(--zee)}
.top-kaart li:nth-child(3) .rang{background:var(--bes)}
.top-kaart .naam{font-weight:700}
.top-kaart .keer{color:var(--ink-3);font-weight:600}

.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.stap{padding:28px 26px 26px;position:relative}
.stap-nr{position:absolute;top:-18px;left:22px;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);font:900 1.15rem/36px var(--fd);text-align:center;background:var(--geel)}
.stap:nth-child(2) .stap-nr{background:var(--zee);color:#fff}
.stap:nth-child(3) .stap-nr{background:var(--koraal);color:#fff}
.stap h3{margin:6px 0 0}
.stap p{color:var(--ink-2);margin:8px 0 0}

.recepten{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.recept{text-decoration:none;color:inherit;display:flex;flex-direction:column;overflow:hidden}
.recept img{aspect-ratio:4/3;width:100%;object-fit:cover;display:block;border-bottom:2px solid var(--ink)}
.recept-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.recept-body h3{margin:0}
.recept .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.recept .meta span{font:700 .78rem/1 var(--fb);padding:6px 9px;border-radius:999px;background:var(--grijs)}
.recept p{color:var(--ink-2);font-size:.95rem;margin:0}

.slot{background:var(--zee);color:#fff}
.slot .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.slot h2{margin:0}
.slot p{color:#E3F5F2;max-width:30rem;margin:10px 0 0;font-size:1.1rem}

/* ===== voettekst ===== */
.voet{background:var(--ink);color:#C9D1E6;margin-top:0}
.voet-balk{display:flex;height:10px}
.voet-balk span{flex:1}
.voet-balk span:nth-child(1){background:var(--geel)}
.voet-balk span:nth-child(2){background:var(--koraal)}
.voet-balk span:nth-child(3){background:var(--zee)}
.voet-balk span:nth-child(4){background:var(--bes)}
.voet-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-block:44px 32px}
.voet-merk p{margin:14px 0 0;max-width:26rem;font-size:.95rem;line-height:1.6}
.voet-logo{height:36px;width:auto;display:block}
.voet-kolom{display:flex;flex-direction:column;gap:9px}
.voet-kolom h4{font:800 .82rem var(--fd);text-transform:uppercase;letter-spacing:.1em;color:var(--geel);margin:0 0 4px}
.voet-kolom a{color:#fff;text-decoration:none;font-weight:600;font-size:.95rem}
.voet-kolom a:hover{text-decoration:underline;text-underline-offset:4px;color:var(--geel)}
.voet-onder{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:18px 26px;border-top:1px solid rgba(255,255,255,.14);font-size:.88rem;color:#9AA6C4}

/* ===== ouderpagina =====
   Twee kolommen: links wat de ouder doet (wie ben je, wat neem je mee), rechts
   wat de lijst is (wanneer, wat er gevraagd wordt, wat al geregeld is). Elke
   sectie heeft een eigen kleurkop, zodat je in één oogopslag ziet welk blok
   waarbij hoort. Het aantal en de bevestiging gaan via het paneel dat van
   onderen omhoogschuift, net als op de huidige site: je hoeft niet te
   scrollen om af te ronden. */
.ouder-kop{background:var(--koraal);color:#fff;padding-block:clamp(26px,4.5vw,44px)}
.ouder-kop-in{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.ouder-kop h1{font-size:clamp(2rem,4.6vw,3.2rem);margin:0}
.ouder-kop .sub{margin:8px 0 0;font-size:1.08rem;opacity:.95}
.ouder-raster{display:grid;grid-template-columns:1.3fr .85fr;gap:28px;align-items:start;padding-block:clamp(24px,4vw,40px)}
.ouder-hoofd{display:flex;flex-direction:column;gap:28px;min-width:0}
.ouder-zij{position:sticky;top:calc(env(safe-area-inset-top,0px) + 86px);min-width:0}
.sluit{display:inline-block;background:var(--wit);color:var(--ink);font:800 .95rem var(--fd);padding:10px 14px;border-radius:999px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);white-space:normal;}
.sectie-kaart{overflow:hidden}
.sectie-kop{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:2px solid var(--ink)}
.sectie-kop h2{font-size:1.3rem;margin:0}
.sectie-kop .sectie-sub{margin-left:auto;font-size:.88rem;color:var(--ink-2);text-align:right}
.sectie-nr{width:30px;height:30px;border-radius:50%;color:#fff;font:900 1rem/30px var(--fd);text-align:center;flex:none;border:2px solid var(--ink);line-height:26px}
[data-kleur="zee"] .sectie-kop{background:var(--zee-t)}
[data-kleur="zee"] .sectie-nr{background:var(--zee)}
[data-kleur="geel"] .sectie-kop{background:var(--geel)}
[data-kleur="geel"] .sectie-nr{background:var(--ink)}
[data-kleur="bes"] .sectie-kop{background:var(--bes-t)}
[data-kleur="bes"] .sectie-nr{background:var(--bes)}
[data-kleur="koraal"] .sectie-kop{background:var(--koraal-t)}
[data-kleur="koraal"] .sectie-nr{background:var(--koraal)}
.sectie-body{padding:20px}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.veld-groep{display:flex;flex-direction:column;gap:6px;min-width:0}
.veld-groep label{font:800 .95rem var(--fd)}
.veld{font:600 1rem var(--fb);padding:12px 14px;border:2px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);width:100%}
.veld::placeholder{color:#98A0B5;font-weight:400}
.hint{font-size:.86rem;color:var(--ink-3)}
.tegels{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tegel{border:2px solid var(--ink);border-radius:12px;background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-height:112px}
.tegel .naam{font:800 1.1rem var(--fd)}
.tegel .aantal{color:var(--ink-3);font-weight:600;font-size:.92rem}
.tegel .actie{margin-top:auto;padding-top:10px}
.tegel-weg{background:var(--grijs);border-style:dashed;color:var(--ink-2)}
.tegel-weg .wie{margin-top:auto;padding-top:10px;font-weight:700;color:var(--zee);display:flex;gap:8px;align-items:center;font-size:.92rem}
.tegel-weg .wie::before{content:"✓";width:20px;height:20px;border-radius:50%;background:var(--zee);color:#fff;font-size:.75rem;display:inline-flex;align-items:center;justify-content:center;flex:none}
.groep-kop{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;font-size:1rem;margin:6px 0 -4px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.groep-kop + .groep-kop,.groep-kop:first-child{margin-top:0}
.groep-kop:nth-of-type(2){margin-top:18px}
.groep-tel{font:600 .85rem var(--fb);color:var(--ink-3)}
.groep-rest{grid-column:1/-1;font-size:.92rem;color:var(--ink-2);margin:0}
.tegel-anders{grid-column:1/-1;background:var(--geel-t);min-height:0}
.tegel-anders summary{cursor:pointer;font:800 1.05rem var(--fd);list-style:none;display:flex;align-items:center;gap:10px}
.tegel-anders summary::-webkit-details-marker{display:none}
.tegel-anders summary::before{content:"+";width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;flex:none}
.tegel-anders[open] summary::before{content:"–"}
.tegel-anders .anders-velden{display:grid;grid-template-columns:1fr 120px auto;gap:12px;align-items:end;margin-top:14px}
.tegel-anders .hint{grid-column:1/-1}
.knop-kies{padding:9px 16px;font-size:.92rem;box-shadow:3px 3px 0 var(--ink)}
.knop-kies:hover{box-shadow:1px 1px 0 var(--ink)}
.knop-ink.knop-kies{box-shadow:3px 3px 0 var(--koraal)}
.knop-ink.knop-kies:hover{box-shadow:1px 1px 0 var(--koraal)}
.voortgang{display:flex;align-items:center;gap:12px;font-weight:700;margin-bottom:16px}
.voortgang .balk{flex:1;height:14px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--wit)}
.voortgang .balk i{display:block;height:100%;width:40%;background:var(--zee)}
.notitie{background:var(--geel-t);border:2px solid var(--ink);border-radius:12px;padding:12px 14px;margin-bottom:18px;font-size:.95rem}
.notitie b{font-family:var(--fd)}
.feitjes{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.95rem;margin-bottom:18px}
.feitjes dt{color:var(--ink-3);font-weight:600}
.feitjes dd{margin:0;font-weight:700}

/* -- het paneel dat van onderen omhoogschuift ----------------------------- */
.paneel-achter{position:fixed;inset:0;background:rgba(20,33,61,.45);z-index:80}
.paneel{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;justify-content:center;padding-inline:10px;transform:translateY(105%);transition:transform .26s ease;pointer-events:none}
.paneel.open{transform:none;pointer-events:auto}
.paneel-in{width:min(640px,100%);background:#fff;border:2px solid var(--ink);border-bottom:0;border-radius:18px 18px 0 0;padding:0 22px calc(22px + env(safe-area-inset-bottom,0px));overflow:hidden}
.paneel-band{height:10px;background:var(--zee);margin:0 -22px 18px;border-bottom:2px solid var(--ink)}
.paneel h2{font-size:1.4rem;margin:0 0 14px}
.stepper{display:inline-flex;align-items:stretch;border:2px solid var(--ink);border-radius:12px;overflow:hidden;margin-bottom:16px}
.stepper button{appearance:none;border:0;background:var(--geel);width:52px;font:900 1.4rem var(--fd);cursor:pointer;color:var(--ink)}
.stepper button:hover{background:var(--koraal);color:#fff}
.stepper input{width:96px;border:0;border-left:2px solid var(--ink);border-right:2px solid var(--ink);text-align:center;font:800 1.4rem var(--fd);color:var(--ink)}
.stepper input:focus{outline:none;background:var(--geel-t)}
.paneel-samen{background:var(--zee-t);border:2px solid var(--ink);border-radius:12px;padding:14px 16px;font-size:1.05rem;margin-bottom:16px}
.paneel-knoppen{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:16px}
.paneel-knoppen .knop-stil{border:0;box-shadow:none;background:transparent;text-decoration:underline;text-underline-offset:4px;padding:10px 6px;font-weight:700;color:var(--ink-2)}
.paneel-knoppen .knop-stil:hover{transform:none;box-shadow:none;background:transparent;color:var(--ink)}
.paneel-stap[hidden]{display:none !important}

/* ===== dashboard =====
   Per lijst één kaart met een maptabje in de kleur van de status. Bovenin de
   naam en in gewone woorden wat er speelt, daaronder een voortgangsbalk, en
   onderin de deellink met een kopieerknop, want dat is wat de maker van een
   lijst het vaakst doet. De knoppen zeggen wat ze doen; de zeldzame acties
   zitten achter Meer. */
.dash-kop{background:var(--bes-t);border-bottom:2px solid var(--ink)}
.dash-kop .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:clamp(28px,5vw,48px)}
.mappen{display:flex;flex-direction:column;gap:44px;margin-block:48px 28px}
/* De linkerbovenhoek is recht, want daar zit het tabje aan vast. Met een ronde
   hoek liep de rechte onderkant van het tabje tegen de bolling van de kaart
   aan en zag de aansluiting er krom uit. */
.map{position:relative;padding:0;border-top-left-radius:0}
.map-tab{position:absolute;top:-34px;left:-2px;height:36px;padding:0 18px;border:2px solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0;font:800 .84rem/32px var(--fd);text-transform:uppercase;letter-spacing:.06em}
.map-open .map-tab{background:var(--zee);color:#fff}
.map-gepland .map-tab{background:var(--geel)}
.map-dicht .map-tab{background:var(--grijs);color:var(--ink-2)}
.map-dicht{box-shadow:none;background:#FAFBFD}
.map-in{padding:22px 24px 20px;display:flex;flex-direction:column;gap:16px}
.map-kop{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
.map .titel{font:800 1.5rem var(--fd);margin:0}
.map .meta{color:var(--ink-2);margin:4px 0 0;font-weight:600}
.map-acties{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.map-stand{display:flex;align-items:center;gap:14px;font-weight:700;flex-wrap:wrap}
.map-stand .balk{flex:1 1 200px;max-width:320px;height:14px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:#fff}
.map-stand .balk i{display:block;height:100%;background:var(--zee)}
.map-dicht .map-stand .balk i{background:var(--ink-3)}
.map-link{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px 10px 16px;background:var(--grijs);border-radius:12px;border:2px dashed var(--lijn)}
.map-link .url{font:700 1rem var(--fb);color:var(--ink);flex:1 1 14rem;min-width:0;overflow-wrap:anywhere}
.map-link .url .domein{color:var(--ink-3);font-weight:600}
.meer{position:relative}
.meer summary{list-style:none;display:inline-flex}
.meer summary::-webkit-details-marker{display:none}
.meer-menu{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:2px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);display:flex;flex-direction:column;min-width:180px;z-index:5;overflow:hidden}
.meer-menu a{padding:11px 14px;color:var(--ink);text-decoration:none;font-weight:700;border-bottom:2px solid var(--lijn)}
.meer-menu a:last-child{border-bottom:0}
.meer-menu a.gevaar{color:var(--koraal)}
.meer-menu a:hover{background:var(--geel-t)}

/* ===========================================================================
   4. De navigatiebalk
   header.php gebruikt de navbar van Bootstrap met een collapse voor mobiel.
   Die werking blijft onaangeroerd; alleen het uiterlijk wordt dat van de balk
   uit de opzet. De balk staat vast bovenaan, zoals op de hele site al het
   geval was, dus houdt body er ruimte voor vrij.
   =========================================================================== */

body{padding-top:72px}

/* De voettekst staat buiten de wrapper uit header.php, terwijl die wrapper op
   min-height:100vh stond. Op een korte pagina duwde dat de voettekst een heel
   scherm naar beneden. Het scherm vullen doet nu body zelf, met de voettekst
   als laatste kind, zodat hij netjes onderaan blijft plakken. */
body{display:flex;flex-direction:column;min-height:100vh}
.wrapper{min-height:0;flex:1 0 auto}
.voet{flex:none}

.navbar{background:var(--wit);background-image:none;border-bottom:2px solid var(--ink);box-shadow:none;padding:0;z-index:1000}
.navbar > .container{min-height:70px;max-width:var(--maxw);padding-inline:clamp(16px,4vw,40px);gap:26px}
.navbar-brand{display:flex;align-items:center;padding:0;margin:0;transition:none}
.navbar-brand:hover{transform:none}
.navbar-logo{height:40px;width:auto;display:block}
.navbar-nav{display:flex;align-items:center;gap:6px;font-weight:700;list-style:none;margin:0;padding:0}
.navbar-nav .nav-link{display:flex;align-items:center;gap:6px;color:var(--ink);font-family:var(--fb);font-weight:700;text-decoration:none;padding:8px 12px;border-radius:999px;transition:none}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus{background:var(--grijs);color:var(--ink)}
.navbar-nav .nav-link.active{background:var(--grijs);color:var(--ink)}
.navbar-nav .knop{margin-left:8px}

/* De knop die het menu op mobiel openklapt. Een sticker, net als de andere
   knoppen, en alleen zichtbaar zolang de collapse van Bootstrap iets te
   klappen heeft. */
.navbar-toggler-pill{display:none;align-items:center;gap:8px;background:var(--wit);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:10px 16px;font:800 .95rem var(--fd);box-shadow:3px 3px 0 var(--ink);cursor:pointer;line-height:1}
.navbar-toggler-pill i{font-size:1.2rem}
.navbar-toggler-pill:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);background:var(--wit)}
.navbar-toggler-pill:focus{outline:none}
.navbar-toggler-pill:focus-visible{outline:3px solid var(--bes);outline-offset:3px}
.navbar-toggler-pill[aria-expanded="true"]{background:var(--ink);color:#fff}
.navbar-toggler-pill[aria-expanded="true"] i::before{content:"\F659"} /* bi-x-lg */

/* ===========================================================================
   5. De cookiebanner uit includes/toestemming.php
   Alleen het uiterlijk: een inktblauw vlak onderaan met stickerknoppen, en een
   venster met dezelfde randen als de kaarten. De werking staat in het PHP en
   blijft zoals hij is.
   =========================================================================== */

.cookie-consent-banner{position:fixed;bottom:0;left:0;width:100%;background:var(--ink);color:#fff;padding:18px 0;z-index:10001;border-top:4px solid var(--geel);display:none;animation:cookie-omhoog .3s ease-out}
@keyframes cookie-omhoog{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.cookie-consent-banner .container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;max-width:var(--maxw)}
.cookie-consent-content{flex:1}
.cookie-consent-banner p{margin:0 0 .35rem;font-size:.95rem;line-height:1.5}
.cookie-consent-banner p:last-child{margin-bottom:0}
.cookie-consent-banner strong{font-family:var(--fd);font-size:1.05rem}
.cookie-consent-banner a{color:var(--geel);text-decoration:underline;text-underline-offset:3px;font-weight:700}
.cookie-consent-actions{display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap}
.cookie-consent-actions .btn{padding:10px 16px;font-size:.92rem;background:var(--wit);color:var(--ink);border-color:var(--ink);box-shadow:3px 3px 0 var(--geel)}
.cookie-consent-actions .btn:hover{background:var(--wit);color:var(--ink);box-shadow:1px 1px 0 var(--geel)}
.cookie-consent-actions .btn-primary{background:var(--geel);color:var(--ink);border-color:var(--ink);box-shadow:3px 3px 0 var(--koraal)}
.cookie-consent-actions .btn-primary:hover{background:var(--geel);color:var(--ink);box-shadow:1px 1px 0 var(--koraal)}

.cookie-settings-modal{position:fixed;inset:0;z-index:10002;display:flex;align-items:center;justify-content:center}
.cookie-settings-overlay{position:absolute;inset:0;background:rgba(20,33,61,.45)}
.cookie-settings-panel{position:relative;background:var(--wit);border:2px solid var(--ink);border-radius:18px;box-shadow:var(--schaduw);max-width:520px;width:92%;max-height:90vh;overflow-y:auto}
.cookie-settings-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:2px solid var(--ink);background:var(--geel);border-radius:16px 16px 0 0}
.cookie-settings-header h5{margin:0;font:800 1.2rem var(--fd);color:var(--ink)}
.cookie-settings-close{background:none;border:0;font-size:1.6rem;line-height:1;color:var(--ink);cursor:pointer;padding:0}
.cookie-settings-body{padding:20px}
.cookie-settings-body > p{color:var(--ink-2);font-size:.92rem;margin:0 0 1.25rem}
.cookie-option{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:14px 16px;background:var(--grijs);border:2px solid var(--ink);border-radius:12px;margin-bottom:12px}
.cookie-option:last-child{margin-bottom:0}
.cookie-option-info{flex:1}
.cookie-option-info strong{display:block;font-family:var(--fd);color:var(--ink);margin-bottom:.25rem}
.cookie-option-info .cookie-required{display:inline-block;font:700 .7rem/1 var(--fb);text-transform:uppercase;letter-spacing:.06em;background:var(--ink);color:#fff;padding:5px 9px;border-radius:999px;margin-left:.5rem}
.cookie-option-info p{margin:.5rem 0 0;font-size:.86rem;color:var(--ink-2);line-height:1.45}
.cookie-option-toggle{flex-shrink:0}
.cookie-option-toggle input[type="checkbox"]{display:none}
.cookie-option-toggle label{display:block;width:52px;height:30px;background:var(--wit);border:2px solid var(--ink);border-radius:999px;position:relative;cursor:pointer;transition:background .2s}
.cookie-option-toggle label::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--ink);border-radius:50%;transition:transform .2s}
.cookie-option-toggle input:checked + label{background:var(--zee)}
.cookie-option-toggle input:checked + label::after{transform:translateX(22px);background:var(--wit)}
.cookie-option-toggle input:disabled + label{opacity:.6;cursor:not-allowed}
.cookie-settings-footer{padding:14px 20px;border-top:2px solid var(--ink);text-align:right}

/* ===========================================================================
   6. Responsief
   =========================================================================== */

/* Het breekpunt van de navbar is dat van Bootstrap (navbar-expand-lg), niet
   dat van de opzet. Tot 992px staat het menu ingeklapt achter de knop Menu. */
@media (max-width:991.98px){
  .navbar-toggler-pill{display:inline-flex}
  .navbar > .container{gap:12px;min-height:66px;padding-block:10px}
  .navbar-collapse{border-top:2px solid var(--ink);margin-top:10px;padding-block:12px}
  .navbar-nav{width:100%;align-items:stretch;gap:6px}
  .navbar-nav .nav-link{justify-content:center;padding:12px 16px;border-radius:12px;background:var(--grijs)}
  /* display:flex in plaats van inline-flex, anders blijft de knop even smal
     als zijn tekst terwijl de links eronder de volle breedte pakken. */
  .navbar-nav .knop{display:flex;margin-left:0;justify-content:center;margin-top:4px}
  .navbar-logo{height:34px}
  body{padding-top:68px}
}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .stappen,.recepten{grid-template-columns:1fr}
  .stappen{gap:34px}
  .tegels{grid-template-columns:1fr}
  .veld-rij{grid-template-columns:1fr}
  .ouder-raster{grid-template-columns:1fr}
  .ouder-zij{position:static}
  .tegel-anders .anders-velden{grid-template-columns:1fr}
  .sectie-kop{flex-wrap:wrap}
  .sectie-kop .sectie-sub{margin-left:0;text-align:left;width:100%}
  .voet-in{grid-template-columns:1fr 1fr;gap:26px}
  .voet-merk{grid-column:1/-1}
  .map-kop{flex-direction:column}
  .meer-menu{right:auto;left:0}
}

@media (max-width:576px){
  .voet-in{grid-template-columns:1fr}
  .cookie-consent-banner .container{flex-direction:column;align-items:stretch}
  .cookie-consent-actions{flex-direction:column}
  .cookie-consent-actions .btn{width:100%;justify-content:center}
  .cookie-option{flex-direction:column}
  /* Op iOS zoomt Safari in op een veld met een letter kleiner dan 16px. */
  .form-control,.form-select,.veld{font-size:16px}
}

@media (prefers-reduced-motion:no-preference){
  .knop,.btn,.ikoon,.navbar-toggler-pill{transition:transform .1s,box-shadow .1s}
}

@media print{
  body{padding-top:0}
  .navbar,.voet,.footer,.cookie-consent-banner,.knop,.btn{display:none !important}
  .kaart,.card{box-shadow:none}
}

/* ---------------------------------------------------------------------------
   Kopkleur op donkere vlakken
   style.css geeft elke kop een vaste donkere kleur. Dat wint van de witte
   tekstkleur die een donker vlak op zijn omhulling zet, want een kop erft
   alleen een kleur als hij er zelf geen heeft. Daarom hier expliciet: koppen
   nemen de kleur van hun omgeving over, en alleen op een lichte ondergrond is
   dat inkt. Deze regels staan onderaan, zodat ze van style.css winnen.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--ink); }
.slot :is(h1, h2, h3),
.ouder-kop :is(h1, h2, h3),
.voet :is(h1, h2, h3, h4),
.band-ink :is(h1, h2, h3),
.paneel-band :is(h1, h2, h3),
.kaart.donker :is(h1, h2, h3),
[data-donker] :is(h1, h2, h3, h4) { color: inherit; }
.band-ink { background: var(--ink); color: #fff; }