/* De nieuwe huisstijl van de studiosite (bedrijf-herzien, 28 oktober 2026) op alle klantpagina's: eerst het bestelformulier (Melissa: "het hele
   formulier", "als een nieuw bedrijf"), daarna overal ("ik wil het overal doorvoeren, ook de mails"). Gekozen met een kiezer op het bestelformulier:
   kop donker, witte invulvakken, STAP 1 boven de stapkoppen, Je aanvraag donker, verstuurknop donker vlak, voet donker.
   Crème papier, koppen in Newsreader, tekst in Albert Sans, brons als accent, het logo "Jogi | CREATIVE STUDIO" en donkere vlakken zoals op de site.
   Alles staat onder html:not([data-doelgroep]): een pagina via een doelgroep-site (?voor=) houdt de stijl van die site (css/doelgroep.css).
   De oude huisstijlvariabelen krijgen hier de nieuwe kleuren, zodat formulier.css en de stijlbladen per pagina meekleuren; daaronder wat er van vorm
   verandert. Dit stijlblad staat op elke pagina ná de eigen css van die pagina en vóór doelgroep.css. */

@font-face { font-family: "Newsreader Jogi"; src: url("/fonts/newsreader-jogi.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader Jogi"; src: url("/fonts/newsreader-jogi-cursief.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("/fonts/albert-sans.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }

html:not([data-doelgroep]) {
  --papier: #efebe5;        /* de achtergrond van de site */
  --papier-2: #e6e1d9;      /* tweede vlak, zoals de afwisselende banden op de site */
  --veld: #ffffff;          /* invoervelden: wit (keuze Melissa, 28 okt: "Wit vak") */
  --veld-lijn: rgba(29, 26, 23, .18);
  --nacht: #201c18;         /* donkere vlakken: overzicht, knop, voet */
  --omber: #2c2621;
  --inkt: #1d1a17;          /* koppen en invoer */
  --tekst: #1d1a17;
  --lopend: #4b443d;        /* lopende tekst */
  --zacht: #6c645b;
  --op-donker: #efe9e0;
  --op-donker-zacht: #b8aea2;
  --lijn: rgba(29, 26, 23, .14);
  --lijn-sterk: rgba(29, 26, 23, .32);
  --lijn-donker: rgba(239, 233, 224, .14);
  --roze: #7a5a38;          /* brons als tekst op papier (5:1); de site gebruikt #85633f voor grote labels */
  --roze-donker: #5f4529;
  --brons: #a37b55;
  --blush: #c79f76;         /* brons op donker */
  --blush-zacht: var(--papier-2);
  --wit: var(--veld);
  --wit-zacht: var(--papier-2);
  --taupe: var(--op-donker-zacht);
  --fout: #9a3a2c;
  --fout-zacht: #f3e3dd;
  --serif: "Newsreader Jogi", Georgia, serif;
  --letter: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --breed: 1220px;
  background: var(--papier);
  accent-color: var(--nacht);
}
html:not([data-doelgroep]) body { background: var(--papier); color: var(--lopend); font-size: 16px; line-height: 1.7; caret-color: var(--roze); }
html:not([data-doelgroep]) ::selection { background: rgba(163, 123, 85, .3); color: var(--inkt); }
/* Links in inkt; met :where() zo zwak dat de linkkleur van een pagina zelf (zoals op donker in de chat) altijd voorgaat. */
:where(html:not([data-doelgroep])) a { color: var(--inkt); text-decoration-color: rgba(163, 123, 85, .6); text-decoration-thickness: 1px; }
:where(html:not([data-doelgroep])) a:hover { color: var(--roze); text-decoration-color: currentColor; }
html:not([data-doelgroep]) :focus-visible,
html:not([data-doelgroep]) .kop :focus-visible { outline: 1.5px solid var(--inkt); outline-offset: 4px; }
html:not([data-doelgroep]) :is(.kop, .overzicht, .voet) :focus-visible { outline-color: var(--op-donker); }
html:not([data-doelgroep]) .overslaan { border-radius: 0; background: var(--nacht); color: var(--op-donker); font-size: 14px; }

/* Kop: donker, zoals de donkere banden van de site (keuze Melissa, 28 okt: "Donker"). */
html:not([data-doelgroep]) .kop { background: var(--nacht); color: var(--op-donker-zacht); border-bottom: 0; }
html:not([data-doelgroep]) .kop-binnen { max-width: var(--breed); padding: 0 var(--rand) clamp(48px, 7vw, 88px); }
html:not([data-doelgroep]) .logo { display: flex; align-items: center; width: fit-content; min-height: 76px; color: var(--op-donker); }
html:not([data-doelgroep]) .logo:hover { color: var(--op-donker); }
/* Het logo van de site: "Jogi" schuin in EB Garamond, een streep, en CREATIVE STUDIO in twee regels kleine hoofdletters (midden op de letters van Jogi). */
html:not([data-doelgroep]) .logo-3 { align-items: center; gap: .8rem; }
html:not([data-doelgroep]) .logo-3 b { font: italic 400 1.8rem/1 "EB Garamond", Georgia, serif; transform: translateY(-2px); }
html:not([data-doelgroep]) .logo-3 i { display: block; width: min-content; padding-left: .8rem; border-left: 1px solid currentColor; font: 500 .6rem/1.55 var(--letter); letter-spacing: .26em; text-transform: uppercase; opacity: 1; transform: translateY(.1em); }
html:not([data-doelgroep]) .kop .label { display: none; } /* "Eerste ontwerp" boven "Vraag je eerste ontwerp aan" zegt hetzelfde twee keer */
html:not([data-doelgroep]) .kop h1 { max-width: 13ch; margin-top: clamp(36px, 7vw, 96px); color: var(--op-donker); font-size: clamp(44px, 6.6vw, 88px); line-height: 1.02; letter-spacing: -.02em; }
html:not([data-doelgroep]) .kop h1 em { color: var(--op-donker); }
html:not([data-doelgroep]) .kop-tekst { max-width: 32em; margin-top: 22px; color: var(--op-donker-zacht); font-size: 18px; }
html:not([data-doelgroep]) .kop-stappen { margin-top: clamp(36px, 5vw, 56px); gap: 0 clamp(24px, 3vw, 48px); max-width: none; counter-reset: kopstap; }
html:not([data-doelgroep]) .kop-stappen li { min-height: 0; padding: 18px 0 20px; border-top: 1px solid rgba(239, 233, 224, .24); color: var(--op-donker-zacht); font-size: 15px; line-height: 1.6; }
html:not([data-doelgroep]) .kop-stappen li::before { content: counter(kopstap, decimal-leading-zero); position: static; display: block; width: auto; height: auto; margin-bottom: 12px; border-radius: 0; background: none; color: var(--blush); font: 400 1.5rem/1 var(--serif); text-align: left; }
html:not([data-doelgroep]) .kop-btw { margin-top: 14px; color: var(--blush); font: 500 .68rem/1.5 var(--letter); letter-spacing: .2em; text-transform: uppercase; }

/* Pagina: formulier links, het donkere overzicht rechts (alleen het bestelformulier; de andere pagina's houden hun eigen indeling). */
html:not([data-doelgroep]) .pagina:has(.overzicht) { grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(48px, 6vw, 96px); max-width: var(--breed); padding: clamp(40px, 5vw, 64px) var(--rand) clamp(80px, 9vw, 120px); }
html:not([data-doelgroep]) .geen-js { border-radius: 0; background: var(--papier-2); }

/* Stappen */
html:not([data-doelgroep]) .stap { padding: 48px 0; }
html:not([data-doelgroep]) .stap:first-of-type { padding-top: 8px; }
/* Het kopje van een stap: STAP 1 klein in hoofdletters boven de kop (keuze Melissa, 28 okt). "Stap " staat in de css; het nummer is aria-hidden. */
html:not([data-doelgroep]) .stap legend { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; color: var(--inkt); font-size: clamp(30px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.01em; }
html:not([data-doelgroep]) .stapnummer { display: block; width: auto; height: auto; border-radius: 0; background: none; color: var(--roze); font: 500 .68rem/1 var(--letter); letter-spacing: .24em; text-transform: uppercase; }
html:not([data-doelgroep]) .stapnummer::before { content: "Stap "; }
html:not([data-doelgroep]) .uitleg { color: var(--zacht); font-size: 16px; }

/* Velden: rechte hoeken zoals de site, wit met een dunne lijn. */
html:not([data-doelgroep]) .veld { gap: 8px; margin-bottom: 20px; }
html:not([data-doelgroep]) .veld label, html:not([data-doelgroep]) .veld-vraag { color: var(--inkt); font-size: 15px; font-weight: 500; }
html:not([data-doelgroep]) .optioneel { color: var(--zacht); }
html:not([data-doelgroep]) .veld :is(input, select, textarea) { min-height: 52px; padding: 12px 16px; border: 1px solid var(--veld-lijn); border-radius: 2px; background-color: var(--veld); color: var(--inkt); font-size: 16px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
html:not([data-doelgroep]) .veld textarea { min-height: 128px; }
html:not([data-doelgroep]) .veld select { background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px; }
html:not([data-doelgroep]) .veld :is(input, select, textarea):hover { border-color: rgba(29, 26, 23, .55); }
html:not([data-doelgroep]) .veld :is(input, select, textarea):focus { border-color: var(--inkt); box-shadow: 0 0 0 3px rgba(163, 123, 85, .22); }
html:not([data-doelgroep]) .veld [aria-invalid="true"] { border-color: var(--fout); background-color: var(--fout-zacht); }
html:not([data-doelgroep]) .veld ::placeholder { color: var(--zacht); opacity: 1; }
html:not([data-doelgroep]) .hint { color: var(--zacht); font-size: 14px; line-height: 1.55; }
html:not([data-doelgroep]) .rij { gap: 0 20px; }
html:not([data-doelgroep]) .fout { padding-left: 0; font-size: 15px; }
html:not([data-doelgroep]) .fout::before { display: none; }

/* Keuzeknoppen (Nee / Ja) en vinkjes: rechthoekig, donker als ze gekozen zijn. */
html:not([data-doelgroep]) .knopje span { padding: 12px 22px; border: 1px solid var(--veld-lijn); border-radius: 2px; background: var(--veld); color: var(--inkt); font-size: 15px; transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
html:not([data-doelgroep]) .knopje:hover span { border-color: var(--inkt); }
html:not([data-doelgroep]) .knopje input:checked + span { background: var(--nacht); border-color: var(--nacht); color: var(--op-donker); }
html:not([data-doelgroep]) .knopje input:focus-visible + span, html:not([data-doelgroep]) input:focus-visible + .vinkje { outline: 1.5px solid var(--inkt); outline-offset: 3px; }
html:not([data-doelgroep]) .vinkje { border: 1px solid var(--veld-lijn); border-radius: 2px; background: var(--veld); }
html:not([data-doelgroep]) .vinkje::after { border-color: var(--op-donker); }
html:not([data-doelgroep]) label:hover .vinkje { border-color: var(--inkt); transform: none; }
html:not([data-doelgroep]) input:checked + .vinkje { background: var(--nacht); border-color: var(--nacht); }
html:not([data-doelgroep]) .extra { border-radius: 2px; }
html:not([data-doelgroep]) .extra:hover { background: rgba(29, 26, 23, .04); }
html:not([data-doelgroep]) .extra-naam { color: var(--inkt); }
html:not([data-doelgroep]) .extra-uitleg { color: var(--zacht); }
html:not([data-doelgroep]) .teller-knop { width: 44px; height: 44px; border: 1px solid var(--veld-lijn); border-radius: 2px; background: var(--veld); color: var(--inkt); }
html:not([data-doelgroep]) .teller-knop:hover:not(:disabled) { background: var(--nacht); border-color: var(--nacht); color: var(--op-donker); }
html:not([data-doelgroep]) .teller input { height: 44px; border: 1px solid var(--veld-lijn); border-radius: 2px; background: var(--veld); color: var(--inkt); }

/* Geen webshop: een rustig blok met een dunne lijn. */
html:not([data-doelgroep]) .webshop-blok { border: 1px solid var(--lijn-sterk); border-radius: 0; background: var(--veld); }
html:not([data-doelgroep]) .webshop-blok h3 { color: var(--inkt); }

/* Wat er altijd in zit: het tweede papier, zoals de banden op de site. */
html:not([data-doelgroep]) .basis { padding: 24px 28px; border-radius: 0; background: var(--papier-2); box-shadow: none; }
html:not([data-doelgroep]) .basis + .basis { margin-top: -14px; }
html:not([data-doelgroep]) .basis-kop { margin-bottom: 4px; color: var(--inkt); font: 400 22px/1.3 var(--serif); }
html:not([data-doelgroep]) .basis-tekst, html:not([data-doelgroep]) .basis-noot { color: var(--zacht); }
html:not([data-doelgroep]) .basis-noot { border-top-color: var(--lijn-sterk); }
html:not([data-doelgroep]) .basis-lijst li { padding-left: 26px; color: var(--lopend); font-size: 15px; }
html:not([data-doelgroep]) .basis-lijst li + li { margin-top: 6px; }
html:not([data-doelgroep]) .basis-lijst li::before { display: none; }
html:not([data-doelgroep]) .basis-lijst li::after { left: 4px; top: calc(.3em + 1px); width: 5px; height: 10px; border-color: var(--roze); border-width: 0 1.5px 1.5px 0; }
html:not([data-doelgroep]) .basis-meer summary { color: var(--inkt); font-size: 15px; font-weight: 500; text-decoration-color: rgba(163, 123, 85, .6); text-decoration-thickness: 1px; }
html:not([data-doelgroep]) .basis-meer summary::after { border-color: var(--roze); border-width: 0 1.5px 1.5px 0; }
html:not([data-doelgroep]) .basis-meer summary:focus-visible { outline: 1.5px solid var(--inkt); border-radius: 0; }

/* Kortingscode en meldingen */
html:not([data-doelgroep]) .korting-rij { gap: 8px; }
html:not([data-doelgroep]) .korting-melding[data-aan] { border-radius: 0; background: var(--papier-2); color: var(--inkt); }
html:not([data-doelgroep]) .link-knop-rustig { color: var(--inkt); }
html:not([data-doelgroep]) .link-knop-rustig:hover { color: var(--roze); }
html:not([data-doelgroep]) .foutenlijst { border: 1px solid var(--fout); border-radius: 0; background: var(--fout-zacht); }
html:not([data-doelgroep]) .foutenlijst h2 { color: var(--inkt); }
/* Links in een foutmelding houden de kleur van de melding (de algemene linkregel hierboven is anders sterker). */
html:not([data-doelgroep]) :is(.foutenlijst a, .foutenlijst .link-knop, .fout a) { color: var(--fout); text-decoration-color: currentColor; }
html:not([data-doelgroep]) :is(.foutenlijst a, .foutenlijst .link-knop, .fout a):hover { color: var(--inkt); }
html:not([data-doelgroep]) .foutenlijst:focus { box-shadow: 0 0 0 3px rgba(154, 58, 44, .2); }

/* Knoppen: hoofdletters met ruime letterafstand en een lange dunne pijl, zoals "Vraag je eerste ontwerp aan" op de site.
   De verstuurknop is een donker vlak; de andere knoppen een dunne lijn. */
html:not([data-doelgroep]) .knop { gap: 18px; min-height: 60px; padding: 0 30px; border-radius: 0; box-shadow: none; font: 500 .74rem/1.2 var(--letter); letter-spacing: .2em; text-transform: uppercase; transition: background-color .3s var(--ease); }
html:not([data-doelgroep]) .knop:hover { transform: none; box-shadow: none; }
html:not([data-doelgroep]) .knop-donker { background: var(--nacht); color: var(--op-donker); }
html:not([data-doelgroep]) .knop-donker:hover { background: var(--omber); }
html:not([data-doelgroep]) a.knop-donker:hover, html:not([data-doelgroep]) a.knop-donker:focus-visible { color: var(--op-donker); }
html:not([data-doelgroep]) .knop-pijl { color: var(--blush); transition: transform .35s var(--ease); }
html:not([data-doelgroep]) .knop-pijl svg { width: 18px; height: 10px; }
html:not([data-doelgroep]) .knop-pijl .pijl-oud { display: none; }
html:not([data-doelgroep]) .knop-pijl .pijl-lang { display: block; }
html:not([data-doelgroep]) .knop:hover .knop-pijl, html:not([data-doelgroep]) .knop:hover .knop-pijl-verder { transform: translateX(4px); }
html:not([data-doelgroep]) .knop:disabled, html:not([data-doelgroep]) .knop:disabled:hover { opacity: .7; background: var(--nacht); }
html:not([data-doelgroep]) .knop-rand { min-height: 52px; padding: 0 22px; border: 1px solid var(--inkt); border-radius: 0; color: var(--inkt); font: 500 .7rem/1.2 var(--letter); letter-spacing: .18em; text-transform: uppercase; transition: background-color .3s var(--ease), color .3s var(--ease); }
html:not([data-doelgroep]) .knop-rand:hover { transform: none; background: var(--inkt); color: var(--op-donker); }
html:not([data-doelgroep]) .knop-rand.knop-klein, html:not([data-doelgroep]) .korting-rij .knop-klein { min-height: 52px; padding: 0 20px; font-size: .7rem; }
.pijl-lang { display: none; }

/* Versturen */
html:not([data-doelgroep]) .versturen { padding-top: 40px; border-top-color: var(--lijn-sterk); }
html:not([data-doelgroep]) .akkoord { color: var(--lopend); font-size: 15px; line-height: 1.6; }
html:not([data-doelgroep]) .versturen .knop { margin-top: 4px; }
html:not([data-doelgroep]) .versturen-uitleg, html:not([data-doelgroep]) .chat-vraag { color: var(--zacht); font-size: 14px; line-height: 1.6; }
html:not([data-doelgroep]) .versturen-uitleg { margin-top: 16px; max-width: 36em; }

/* Overzicht: een donker vlak, zoals de donkere banden op de site. Op de telefoon staat het in het formulier, vóór de vinkjes. */
html:not([data-doelgroep]) .overzicht { padding: 32px 30px; border-radius: 0; background: var(--nacht); color: var(--op-donker-zacht); box-shadow: none; }
html:not([data-doelgroep]) .overzicht h2 { color: var(--op-donker); font-size: 30px; line-height: 1.15; }
html:not([data-doelgroep]) .overzicht-btw { margin: 10px 0 18px; color: var(--op-donker-zacht); font: 500 .64rem/1.5 var(--letter); letter-spacing: .2em; text-transform: uppercase; }
html:not([data-doelgroep]) .regel { padding: 12px 0; border-bottom-color: var(--lijn-donker); color: var(--op-donker); }
html:not([data-doelgroep]) .regel-aantal, html:not([data-doelgroep]) .totaal-btw, html:not([data-doelgroep]) .overzicht-klein { color: var(--op-donker-zacht); }
html:not([data-doelgroep]) .totaal { margin-top: 20px; }
html:not([data-doelgroep]) .totaal-naam, html:not([data-doelgroep]) .overzicht-kopje { color: var(--op-donker); font-weight: 500; }
html:not([data-doelgroep]) .totaal-bedrag { color: var(--op-donker); font-size: 40px; }
html:not([data-doelgroep]) .overzicht-blok { margin-top: 22px; padding-top: 18px; border-top-color: var(--lijn-donker); }
html:not([data-doelgroep]) .abo-prijs { color: var(--blush); }
/* Het vakje "Je aanvraag is vrijblijvend" licht in het donkere vlak (Melissa 28 okt: "misschien dit weer licht"). */
html:not([data-doelgroep]) .overzicht-noot { margin-top: 24px; padding: 16px 18px; border-radius: 0; background: var(--papier); color: var(--lopend); font-size: 14px; line-height: 1.55; }

/* Bedankt: geen kaart, gewoon op het papier, met de stappen als tijdlijn. */
html:not([data-doelgroep]) .bedankt { max-width: 680px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
html:not([data-doelgroep]) .bedankt h2 { margin-bottom: 18px; color: var(--inkt); font-size: clamp(38px, 5vw, 56px); line-height: 1.05; letter-spacing: -.02em; }
html:not([data-doelgroep]) .bedankt h3 { margin: 36px 0 16px; color: var(--inkt); font-size: 26px; }
html:not([data-doelgroep]) .bedankt strong { color: var(--inkt); font-weight: 500; }
html:not([data-doelgroep]) .bedankt-belofte { margin-top: 20px; padding: 16px 0; border-left: 0; border-block: 1px solid var(--lijn-sterk); color: var(--inkt); font: 400 21px/1.45 var(--serif); }
html:not([data-doelgroep]) .bedankt-stap { margin-top: 20px; padding: 16px 20px; border-left: 2px solid var(--brons); background: var(--veld); color: var(--inkt); } /* 30 okt: de tweede stap valt op */
html:not([data-doelgroep]) .bedankt-let-op { padding: 14px 16px; border: 1px solid var(--fout); border-radius: 0; background: var(--fout-zacht); color: var(--inkt); font-weight: 500; }
html:not([data-doelgroep]) .bedankt-stappen::before { background: var(--lijn-sterk); }
html:not([data-doelgroep]) .bedankt-stappen li { color: var(--lopend); }
html:not([data-doelgroep]) .bedankt-stappen li::before { border: 1px solid var(--lijn-sterk); background: var(--papier); color: var(--roze); font-size: 17px; line-height: 34px; }
/* "Bekijk alvast de voorbeeldsites": de streep van de site, geen knop. */
html:not([data-doelgroep]) .bedankt a.knop-rand { min-height: 0; margin-top: 32px; padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--lijn-sterk); color: var(--inkt); background: none; }
html:not([data-doelgroep]) .bedankt a.knop-rand:hover { border-bottom-color: var(--inkt); background: none; color: var(--inkt); }

/* Voet: donker, zoals de voet van de site. Dezelfde gegevens en links als op elke pagina (tests/voet.test.mjs). */
html:not([data-doelgroep]) .voet { border-top: 0; background: var(--nacht); color: var(--op-donker-zacht); }
html:not([data-doelgroep]) .voet-binnen { max-width: var(--breed); padding: 28px var(--rand) 36px; }
html:not([data-doelgroep]) .voet a { color: var(--op-donker); text-decoration-color: var(--lijn-donker); }
html:not([data-doelgroep]) .voet a:hover { color: var(--blush); text-decoration-color: currentColor; }

/* Vlakken en kaarten op alle pagina's: rechte hoeken, zoals op de site (de ronde hoeken horen bij de oude huisstijl). Rondjes (50%) blijven rond;
   de berichten in de chat houden hun ronde vorm. */
html:not([data-doelgroep]) :is(.geen-js, .teller input, .webshop-blok, .let-op, .korting-melding, .foutenlijst, .overzicht, .basis, .overzicht-noot, .bedankt, .chat-ingang,
  .op-slot, .toegang, .ontwerp-status, .uit-ontwerp, .site, .voorbeeld-rij, .bestand, .bestand-beeld, .bestand-icoon, .bestand-notitie, .pagina-blok, .vragen, .standaard,
  .aanvragen, .koppeling-velden, .toestemming-blok, .cookie-noot, .techniek, .techniek > summary, .punt, .punt-uitkomst, .bijlage, .bijlage-icoon, .bijlage-beeld,
  .voorstel, .ronde-eerder, .ronde-eerder summary, .formulier-melding, .vraag, .prijs, .wijziging) { border-radius: 0; }

/* Koppen in de inhoud in inkt, zoals op de site (in donkere vlakken staat hun eigen lichte kleur, die is sterker). */
html:not([data-doelgroep]) :is(main h2, main h3) { color: var(--inkt); }

/* Chat: de kop in het donkere vlak in crème, het schuine woord ook (zoals de kop van de site op donker). */
html:not([data-doelgroep]) :is(.zij-kop, .zij-kop em) { color: var(--op-donker); }

/* Aanleveren: de balk met de voortgang op het papier, de voorbeeldsites als kaartjes met een dunne lijn en een kleine knop. */
html:not([data-doelgroep]) .voortgang { background: rgb(236 231 223 / .94); border-bottom-color: var(--lijn-sterk); }
html:not([data-doelgroep]) .site { border-width: 1px; border-color: var(--lijn); background: var(--veld); }
html:not([data-doelgroep]) .site:has(.site-keus input:checked) { border-color: var(--inkt); box-shadow: 0 0 0 1px var(--inkt); }
html:not([data-doelgroep]) .site:has(.site-ook input:checked) { border-color: var(--inkt); }
html:not([data-doelgroep]) .site-keus input { accent-color: var(--nacht); }
html:not([data-doelgroep]) .site-tekst strong { color: var(--inkt); font-weight: 500; }
html:not([data-doelgroep]) .site-bekijk.knop-rand { min-height: 38px; padding: 0 14px; font-size: .64rem; }

/* De stappenbalk onder de kop: op het tweede papier in plaats van wit; nu een donker rondje met het nummer in brons, af een licht rondje met
   een vinkje in brons, later een rondje met een dunne lijn. */
html:not([data-doelgroep]) .stappenbalk { background: var(--papier-2); border-bottom: 0; }
html:not([data-doelgroep]) .stappen-link { border-radius: 0; color: var(--inkt); }
html:not([data-doelgroep]) .stappen-stap + .stappen-stap::before { background: var(--lijn-sterk); }
html:not([data-doelgroep]) .stappen-stap[data-stand="af"] + .stappen-stap::before { background: var(--brons); }
html:not([data-doelgroep]) .stappen-rondje { font: 400 15px/1 var(--serif); }
html:not([data-doelgroep]) .stappen-stap[data-stand="af"] .stappen-rondje { background: var(--papier); border-color: var(--brons); color: var(--roze); }
html:not([data-doelgroep]) .stappen-stap[data-stand="nu"] .stappen-rondje { background: var(--nacht); color: var(--blush); }
html:not([data-doelgroep]) .stappen-stap[data-stand="open"] .stappen-rondje { background: transparent; border-color: var(--lijn-sterk); color: var(--zacht); }
html:not([data-doelgroep]) .stappen-stap[data-stand="nu"] :is(.stappen-naam, .stappen-naam-kort) { font-weight: 500; }

@media (min-width: 900px) {
  html:not([data-doelgroep]) .kop-stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Op telefoon en tablet (stappen onder elkaar) staat het nummer naast de stap: de kop wordt korter en het eerste vak komt eerder in beeld. */
@media (max-width: 899px) {
  html:not([data-doelgroep]) .kop-stappen li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; padding: 14px 0; }
  html:not([data-doelgroep]) .kop-stappen li::before { margin-bottom: 0; font-size: 1.2rem; }
}
@media (max-width: 999px) {
  html:not([data-doelgroep]) .pagina:has(.overzicht) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html:not([data-doelgroep]) .overzicht-onder { margin: 8px 0 40px; }
}
@media (max-width: 560px) {
  html:not([data-doelgroep]) body { font-size: 16px; }
  html:not([data-doelgroep]) .logo { min-height: 68px; }
  html:not([data-doelgroep]) .logo-3 b { font-size: 1.5rem; }
  html:not([data-doelgroep]) .kop-tekst { font-size: 17px; }
  html:not([data-doelgroep]) .stap { padding: 40px 0; }
  html:not([data-doelgroep]) .basis { padding: 20px; }
  html:not([data-doelgroep]) .overzicht { padding: 26px 22px; }
  html:not([data-doelgroep]) .knop { padding: 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-doelgroep]) .knop-pijl { transition: none; }
}

/* Eindredactie 29 oktober 2026 (gelijk met de studiosite). */
/* Alle schuine woorden in koppen in de kleur van de kop, ook "Een vraag over je website?" en de kop van de chat. */
html:not([data-doelgroep]) :is(h1, h2, h3) em { color: inherit; }
/* Chat: het mail-icoon in de donkere kop blijft licht bij aanwijzen (de algemene linkhover maakte het donkerbrons op nacht). */
html:not([data-doelgroep]) .kop-knop:hover { color: var(--op-donker); }
/* Korte pagina's: onder de donkere voet loopt het donker door tot onderaan, geen crème strook. */
html:not([data-doelgroep]) { background: var(--nacht); }
/* Rapport: het logo in inkt op de lichte balk, en de melding bij een verlopen link in een kader zoals in het portaal. */
html:not([data-doelgroep]) .rapport-balk .logo { color: var(--inkt); }
html:not([data-doelgroep]) .pagina-rapport.toegang { padding: 24px 28px; border-left: 4px solid var(--roze); background: var(--papier-2); }
html:not([data-doelgroep]) .pagina-rapport.toegang:focus { outline: none; }
/* Startpagina en 404: de tekst op dezelfde linkerrand als de kop en de voet (was 50px verder naar rechts). */
html:not([data-doelgroep]) main.pagina-tekst { max-width: var(--breed); }