/* Formulieren van Creative Studio Jogi (bestellen, aanleveren, overzicht) in de huisstijl.
   Kleuren, letters, knoppen en labels komen uit /huisstijl/huisstijl.css (een exacte kopie; een test bewaakt dat).
   Hier alleen wat de formulieren zelf nodig hebben. Geen beige: lichte vlakken zijn wit of --wit-zacht. */

:root {
  --roze-donker: #7a464a;   /* roze bij hover op wit */
  --lijn-sterk: #cfcbc7;    /* rand van invoervelden, zoals .knop-rand */
  --fout: #a12c23;
  --fout-zacht: #fbedec;
  --rand: clamp(16px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; font-family: var(--letter); font-size: 17px; line-height: 1.65; color: var(--tekst); background: var(--wit); -webkit-font-smoothing: antialiased; }
/* Koppen in de serif van de huisstijl; schuin alleen voor een los woord (em) */
h1, h2, h3, legend { font-family: var(--serif); font-weight: 400; }
h1 em, h2 em { font-style: italic; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--roze); text-underline-offset: 3px; }
a:hover { color: var(--tekst); }
:focus-visible { outline: 2px solid var(--roze); outline-offset: 3px; }
.kop :focus-visible { outline-color: var(--blush); }

.overslaan { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--wit); color: var(--tekst); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.overslaan:focus { top: 12px; }
/* Alleen voor schermlezers: onzichtbaar, maar wel voorgelezen */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.heel { white-space: nowrap; } /* bijvoorbeeld "AI-zoekmachines": niet afbreken na "AI-" */

/* Kop */
.kop { background: var(--nacht); color: var(--wit); }
.kop-binnen { max-width: 1120px; margin: 0 auto; padding: 22px var(--rand) clamp(40px, 6vw, 64px); }
/* Het logo zoals op de studiosite: Jogi schuin in de serif, creative studio in de letter van de tekst */
.logo { display: inline-flex; color: var(--wit); text-decoration: none; }
.logo:hover { color: var(--wit); }
.logo-3 { display: inline-flex; align-items: baseline; gap: .6rem; }
.logo-3 b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.8rem; line-height: 1; }
.logo-3 i { font-style: normal; font-size: .78rem; letter-spacing: .04em; opacity: .8; }
.kop .label { margin: clamp(36px, 6vw, 64px) 0 14px; }
/* text-wrap: balance verdeelt de regels van de kop gelijk, zodat er op een smal scherm geen los woord op een eigen regel staat ("Lever je inhoud / aan"). Een oudere browser breekt gewoon zoals eerst af. */
.kop h1 { font-size: clamp(46px, 7.4vw, 84px); line-height: 1.05; text-wrap: balance; }
.kop h1 em { color: var(--blush); }
.kop-tekst { max-width: 36em; margin-top: 18px; color: var(--taupe); }
.kop-btw { margin-top: 10px; color: var(--blush); font-weight: 500; }

/* Pagina: formulier links, overzicht rechts */
.pagina { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; max-width: 1120px; margin: 0 auto; padding: 48px var(--rand) 96px; }
.geen-js { grid-column: 1 / -1; padding: 16px 20px; border-radius: 14px; background: var(--wit-zacht); }

/* Stappen */
.stap { padding: 36px 0; background: linear-gradient(var(--lijn), var(--lijn)) top / 100% 1px no-repeat; }
.stap:first-of-type { padding-top: 0; background: none; }
/* Een legend in een fieldset gedraagt zich vreemd; zwevend (float) gedraagt hij zich als een gewone kop. */
.stap legend { float: left; width: 100%; display: flex; align-items: center; gap: 16px; margin-bottom: 14px; font-size: clamp(30px, 4vw, 38px); line-height: 1.2; }
/* ~ en niet +: is het eerste veld verborgen (de branchekeuze bij een ?voor=), dan moet het volgende veld ook onder de kop beginnen. */
.stap legend ~ * { clear: both; }
.stapnummer { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--nacht); color: var(--blush); font-family: var(--serif); font-size: 20px; font-weight: 500; }
.uitleg { max-width: 40em; margin-bottom: 18px; color: var(--zacht); font-size: 16px; }

/* Extra's */
.extra {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 14px 14px; margin: 0 -14px; border-radius: 14px; cursor: pointer; transition: background-color .2s;
}
.extra:hover { background: var(--wit-zacht); }
.extra input[type="checkbox"] { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.extra-tekst { display: flex; flex-direction: column; }
.extra-naam { font-weight: 500; }
.extra-uitleg { font-size: 15px; color: var(--zacht); }
.extra-prijs { font-weight: 500; font-variant-numeric: tabular-nums; }
.extra-teller { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
.extra-teller:hover { background: none; }
.extra-teller .fout { grid-column: 1 / -1; }

.vinkje {
  position: relative; display: block; width: 24px; height: 24px; margin-top: 1px; border: 1.5px solid var(--zacht); border-radius: 7px; background: var(--wit);
  transition: background-color .2s, border-color .2s, transform .2s;
}
.vinkje::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--wit);
  border-width: 0 2.2px 2.2px 0; transform: rotate(45deg) scale(0); transition: transform .2s var(--vloeiend);
}
label:hover .vinkje { border-color: var(--roze); transform: scale(1.06); }
input:checked + .vinkje { background: var(--roze); border-color: var(--roze); }
input:checked + .vinkje::after { transform: rotate(45deg) scale(1); }
input:focus-visible + .vinkje { outline: 2px solid var(--roze); outline-offset: 3px; }
input[aria-invalid="true"] + .vinkje { border-color: var(--fout); }

.teller { display: inline-flex; align-items: center; gap: 6px; }
.teller-knop {
  display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--lijn-sterk); border-radius: 50%;
  background: var(--wit); font-size: 20px; line-height: 1; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.teller-knop:hover:not(:disabled) { background: var(--nacht); border-color: var(--nacht); color: var(--wit-zacht); }
.teller-knop:disabled { opacity: .35; cursor: default; }
.teller input { width: 56px; height: 40px; border: 1.5px solid var(--lijn-sterk); border-radius: 10px; background: var(--wit); text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.teller input::-webkit-outer-spin-button, .teller input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Domeinnaam: twee knoppen */
.knoppenkeuze { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.knopje { position: relative; cursor: pointer; }
.knopje input { position: absolute; opacity: 0; }
.knopje span { display: inline-block; padding: 10px 18px; border: 1.5px solid var(--lijn-sterk); border-radius: 999px; background: var(--wit); font-size: 15px; font-weight: 500; transition: all .2s; }
.knopje:hover span { border-color: var(--nacht); }
.knopje input:checked + span { background: var(--nacht); border-color: var(--nacht); color: var(--wit-zacht); }
.knopje input:focus-visible + span { outline: 2px solid var(--roze); outline-offset: 3px; }

/* Geen webshops (21 oktober 2026): de vraag op /bestellen en /websitecheck, en bij "Ja" een rustig blok direct eronder. De rest van het formulier is
   dan uit (data-webshop-uit, gezet door bestellen.js en websitecheck.js). Kleuren uit de huisstijl, dus ook goed in de stijl van een doelgroep. */
.veld-webshop { gap: 0; }
.veld-vraag { font-size: 15px; font-weight: 500; }
.veld-webshop .knoppenkeuze { margin: 8px 0 0; }
.veld-webshop .knopje span { min-width: 88px; text-align: center; }
/* De echte keuze is onzichtbaar (.knopje input); de regels voor invoervelden in een .veld (100% breed, 48px hoog) gelden er niet voor. */
.veld-webshop .knopje input { width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; border: 0; }
.veld-webshop .fout { margin-top: 8px; }
.webshop-blok { margin-top: 14px; padding: 18px 20px; border-left: 3px solid var(--roze); border-radius: 4px 14px 14px 4px; background: var(--wit-zacht); }
.webshop-blok h3 { margin-bottom: 6px; font-size: 22px; line-height: 1.25; }
.webshop-blok p { max-width: 40em; font-size: 16px; line-height: 1.55; }
[data-webshop-uit] { display: none !important; }

/* Velden */
.veld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.veld label { font-size: 15px; font-weight: 500; }
.optioneel { font-weight: 400; color: var(--zacht); }
.veld input, .veld select, .veld textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--lijn-sterk); border-radius: 12px; background: var(--wit);
  transition: border-color .2s, box-shadow .2s;
}
.veld textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.veld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--zacht) 50%), linear-gradient(135deg, var(--zacht) 50%, transparent 50%); background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.veld input:hover, .veld select:hover, .veld textarea:hover { border-color: var(--nacht); }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--roze); box-shadow: 0 0 0 3px rgb(154 92 96 / .18); }
.veld [aria-invalid="true"] { border-color: var(--fout); background-color: var(--fout-zacht); }
.hint { font-size: 14px; color: var(--zacht); }
.let-op { padding: 12px 16px; border-left: 3px solid var(--roze); border-radius: 4px 12px 12px 4px; background: var(--wit-zacht); font-size: 15px; }
.rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.rij-postcode { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.fout { position: relative; padding-left: 14px; color: var(--fout); font-size: 15px; font-weight: 500; }
.fout::before { content: ""; position: absolute; left: 0; top: .35em; bottom: .35em; width: 3px; border-radius: 2px; background: var(--fout); }
.stap > .fout { margin-top: 10px; }
/* Een link in een foutmelding ("Mail me gerust"): dezelfde kleur als de melding, onderstreept */
.fout a { color: inherit; }
.fout a:hover { color: var(--tekst); }

/* Kortingscode: onder "Wie heeft je aangeraden?" eerst alleen een klein linkje; het vak met het veld klapt open.
   De plek voor de melding (aria-live) blijft altijd in de pagina; zonder tekst neemt zij geen ruimte in, dus de ruimte komt alleen bij een melding. */
.korting { margin-bottom: 16px; }
.korting > .link-knop { padding: 6px 0; font-size: 15px; }
.korting-vak { margin-top: 8px; }
.korting-vak .veld { gap: 0; margin-bottom: 0; }
.korting-vak label { margin-bottom: 6px; }
.korting-rij { display: flex; gap: 10px; }
.korting-rij input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.korting-rij .knop-klein { flex: none; min-height: 48px; }
.korting-meldingen .fout { margin-top: 8px; }
.korting-melding[data-aan] { margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: var(--wit-zacht); font-size: 15px; font-weight: 500; }
/* Na een afgewezen code staat "Weghalen" alleen, onder de melding (zonder het vakje van de toegepaste code): met wat lucht en een ruim raakvlak. */
.korting-melding:not([data-aan]) .link-knop { margin-top: 2px; padding: 8px 0; font-size: 15px; }
.verborgen-veld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Foutenlijst bovenaan */
.foutenlijst { margin-bottom: 28px; padding: 18px 22px; border-radius: 14px; border-left: 4px solid var(--fout); background: var(--fout-zacht); }
.foutenlijst:focus { outline: none; box-shadow: 0 0 0 3px rgba(161, 44, 35, .25); }
.foutenlijst h2 { font-size: 24px; margin-bottom: 6px; }
.foutenlijst ul { padding-left: 20px; }
/* De knop in een punt van de lijst is een blok: als inline-blok zet de browser het bolletje bij de laatste regel van een punt dat over twee regels loopt */
.foutenlijst li > .link-knop { display: block; }
.foutenlijst a, .link-knop { color: var(--fout); font-weight: 500; }
.link-knop { padding: 0; border: 0; background: none; text-decoration: underline; cursor: pointer; text-align: left; }
/* Een linkknop die geen fout meldt: gewone letterkleur in plaats van het rood van een foutlink */
.link-knop-rustig { color: var(--nacht); }
.link-knop-rustig:hover { color: var(--roze-donker); }

/* Versturen */
.versturen { padding-top: 32px; border-top: 1px solid var(--lijn); }
.akkoord { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; cursor: pointer; }
.akkoord input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.versturen > .fout + .akkoord { margin-top: 16px; } /* tussen de twee vinkjes staat de melding van het eerste: ruimte, zodat die zichtbaar bij het eerste hoort */
.versturen > .fout { margin-top: 8px; }
.spamfilter { min-height: 65px; margin: 22px 0; }
.versturen > #fout-versturen { margin: -8px 0 16px; }
/* Knoppen: de pillen uit de huisstijl (.knop, .knop-donker, .knop-rand). Hier alleen wat een formulierknop extra nodig heeft. */
/* Een donkere knop die een link is, houdt bij aanwijzen zijn witte tekst: "a:hover" hierboven is anders sterker dan .knop-donker (standaardcontrole, 17 oktober 2026). */
a.knop-donker:hover, a.knop-donker:focus-visible { color: var(--wit); }
/* Een knop die iets verstuurt of bevestigt heeft een pijl naar rechts (#pijl-verder): die schuift bij aanwijzen naar rechts, niet schuin omhoog. */
.knop:hover .knop-pijl-verder { transform: translateX(3px); }
/* Een link (a) en een knop (button) zien er hetzelfde uit: .knop en .knop-rand hebben dezelfde hoogte en dezelfde letter, zodat twee knoppen
   naast elkaar even groot zijn. De grootte volgt de tekst om hen heen (1em). De rand van .knop-rand komt uit de huisstijl. */
.knop, .knop-rand { box-sizing: border-box; min-height: 56px; font: 500 1em/1.2 var(--letter); }
button.knop { border: 0; }
button.knop-rand { background: none; cursor: pointer; }
.knop:disabled, .knop:disabled:hover { opacity: .75; cursor: progress; transform: none; box-shadow: none; }
/* Kleine knoppen: in kaarten, tabellen en voor "nog eentje erbij" */
.knop.knop-klein, .knop-rand.knop-klein { min-height: 40px; padding: 0 1.1rem; font-size: 15px; line-height: 1; white-space: nowrap; }
.versturen-uitleg { margin-top: 12px; font-size: 15px; color: var(--zacht); }
/* "Een vraag? Stuur me een bericht." (taak 17): een rustige regel met een gewone tekstlink naar /chat, onder de knop op /bestellen, op het bedankscherm,
   onder het formulier van /websitecheck en bij de pauze. Geen knop en geen balk: de link heeft de kleur en de hover van elke link op de pagina. */
.chat-vraag { margin-top: 12px; font-size: 15px; color: var(--zacht); }
.bedankt .chat-vraag { margin-top: 16px; }
/* "Stuur me een bericht" breekt nooit halverwege af (op de telefoon stond "Stuur me een / bericht"): past het niet, dan gaat de hele link naar de volgende regel.
   Ook in de balk van /rapport, die dit stijlblad ook laadt. */
[data-chat-link] { white-space: nowrap; }

/* Overzicht */
.overzicht { padding: 26px; border-radius: 20px; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn), 0 40px 80px -60px rgb(22 18 15 / .55); }
.overzicht-zij { position: sticky; top: 24px; }
.overzicht-onder { display: none; margin: 8px 0 32px; }
.overzicht h2 { font-size: 28px; line-height: 1.15; }
.overzicht-btw { margin: 2px 0 14px; font-size: 13px; color: var(--zacht); }

/* Wat er altijd in zit */
.basis { margin-bottom: 22px; padding: 20px 24px; border-radius: 18px; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn), 0 30px 60px -48px rgb(22 18 15 / .45); }
.basis + .basis { margin-top: -10px; }
.basis-tekst { font-size: 15px; color: var(--zacht); line-height: 1.5; }
.basis-tekst + .basis-tekst { margin-top: 8px; }
.basis-tekst + .basis-lijst { margin-top: 12px; }
.basis-noot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lijn); font-size: 14px; color: var(--zacht); line-height: 1.5; }
.basis-kop { font-weight: 600; margin-bottom: 8px; }
.basis-lijst { list-style: none; }
.basis-lijst li { position: relative; padding-left: 32px; font-size: 16px; }
.basis-lijst li + li { margin-top: 4px; }
/* Vinkjes in de stijl van de studiosite (19 oktober 2026): een roze vinkje in een wit rondje met een dunne lijn, geen lichtroze vlak */
.basis-lijst li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--wit); box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
.basis-lijst li::after { content: ""; position: absolute; left: 8px; top: calc(.2em + 5px); width: 5px; height: 9px; border: solid var(--roze); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.regels { list-style: none; }
.regel { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--lijn); font-size: 15px; }
.regel-naam { display: flex; flex-direction: column; }
.regel-aantal { font-size: 13px; color: var(--zacht); }
/* De bedragen in het overzicht staan niet in tabelcijfers: in Schibsted Grotesk maken die de komma in €24,95 erg breed */
.regel-bedrag, .totaal-bedrag, .abo-prijs { white-space: nowrap; }
.totaal { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.totaal-naam { font-weight: 600; }
.totaal-bedrag { font-family: var(--serif); font-size: 36px; line-height: 1; }
.totaal-btw { font-size: 13px; color: var(--zacht); text-align: right; }
.overzicht-blok { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--lijn); }
.overzicht-kopje { font-weight: 600; font-size: 15px; }
.abo-prijs { font-size: 18px; font-weight: 500; color: var(--roze-donker); }
.overzicht-klein { font-size: 13px; color: var(--zacht); }
.overzicht-noot { margin-top: 18px; padding: 10px 12px; border-radius: 10px; background: var(--wit-zacht); font-size: 13px; }

/* Een korte pagina met tekst en knoppen (index en 404) */
.pagina-tekst { grid-template-columns: minmax(0, 40em); gap: 0; padding-bottom: 120px; }
.pagina-tekst > * + * { margin-top: 20px; }
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Bedankt */
.bedankt { grid-column: 1 / -1; max-width: 640px; padding: 40px; border-radius: 22px; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn), 0 40px 80px -60px rgb(22 18 15 / .55); }
.bedankt:focus { outline: none; }
.bedankt h2 { font-size: clamp(36px, 5vw, 46px); line-height: 1.15; margin-bottom: 14px; }
.bedankt p + p { margin-top: 12px; }
.veld-anders { margin-top: 14px; } /* "Mijn vak staat er niet bij": de vraag direct onder de keuzelijst */
.bedankt-belofte { padding-left: 14px; border-left: 3px solid var(--roze); } /* de belofte (top 10): na "je aanvraag is binnen" valt hij op, zonder vette tekst */
.bedankt-let-op { padding-left: 14px; border-left: 3px solid var(--roze); font-weight: 600; }
.bedankt-stap { padding-left: 14px; border-left: 3px solid var(--roze); } /* 30 okt: "Nog één stap" na "je aanvraag is binnen" */
/* "Zo gaat het verder": de stappen als tijdlijn met donkere genummerde rondjes, zoals op de studiosite (19 oktober 2026) */
.bedankt h3 { font-size: 26px; line-height: 1.2; margin: 26px 0 12px; }
.bedankt-stappen { position: relative; margin: 0; padding: 0; list-style: none; counter-reset: stap; }
.bedankt-stappen::before { content: ""; position: absolute; left: 18px; top: 18px; bottom: 18px; width: 1px; background: var(--lijn); }
.bedankt-stappen li { position: relative; min-height: 36px; padding: 5px 0 0 54px; counter-increment: stap; }
.bedankt-stappen li + li { margin-top: 16px; }
.bedankt-stappen li::before { content: counter(stap); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--nacht); color: var(--blush); font-family: var(--serif); font-size: 18px; line-height: 36px; text-align: center; }
.bedankt .knop, .bedankt .knop-rand { margin-top: 22px; }

/* Voet: de bedrijfsgegevens (artikel 3:15d BW) en de links naar de voorwaarden en de privacyverklaring, klein en rustig onder de inhoud.
   De gegevens staan als lijst, met een punt in de ruimte tussen twee gegevens. Begint een gegeven een nieuwe regel, dan valt zijn punt
   buiten de lijst en wordt hij afgeknipt (overflow: hidden): een regel begint nooit met een punt. De 6px rondom houdt de focusrand van
   een link zichtbaar. Een gegeven breekt niet halverwege af. Op de telefoon staat elk gegeven op een eigen regel. */
.voet { border-top: 1px solid var(--lijn); background: var(--wit); color: var(--zacht); font-size: 13px; line-height: 1.6; }
.voet-binnen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 32px; max-width: 1120px; margin: 0 auto; padding: 22px var(--rand) 32px; }
.voet-gegevens { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.6em; min-width: 0; margin: -6px; padding: 6px; overflow: hidden; list-style: none; }
.voet-gegevens li { white-space: nowrap; }
.voet-gegevens li::before { content: "·"; content: "·" / ""; display: inline-block; width: 1.6em; margin-left: -1.6em; text-align: center; }
.voet-links { display: flex; flex-wrap: wrap; column-gap: 24px; }
.voet a { display: inline-block; padding-block: 4px; color: var(--zacht); text-decoration-color: var(--lijn-sterk); }
.voet a:hover { color: var(--roze-donker); text-decoration-color: currentColor; }

/* De ingang naar de chat op de persoonlijke pagina (aanleveren, ontwerp, bekijken en wijzigen; chat-ingang.js haalt hidden eraf zodra er een
   portaalcode in het adres staat). Een rustig kaartje onder de inhoud en vóór de voet: het scrollt gewoon mee, het is geen vaste balk en geen
   zwevende knop. Het staat buiten main en heeft dezelfde zijrand als de inhoud (--rand: 16 px op een kleine telefoon). De kleuren komen uit de
   huisstijl, dus ook in de stijl van een doelgroep. Standaard staan tekst en knop onder elkaar. */
.chat-ingang { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 32px; width: calc(100% - 2 * var(--rand)); max-width: calc(1120px - 2 * var(--rand)); margin: 0 auto 64px; padding: clamp(24px, 4vw, 36px) clamp(22px, 4vw, 40px); border-radius: 22px; background: var(--wit-zacht); box-shadow: 0 0 0 1px var(--lijn); }
/* De kop "Een vraag over je website?" (ruling 34a) verdeelt zijn regels, en tussen "je" en "website" staat een vaste spatie: nooit "website?" alleen. */
.chat-ingang h2 { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 36px); font-weight: 400; line-height: 1.2; text-wrap: balance; }
.chat-ingang h2 em { color: var(--roze); }
.chat-ingang p { color: var(--zacht); }
.chat-ingang .knop { justify-self: start; margin-top: 18px; }
/* Zo breed als de inhoud: bekijken, ontwerp en wijzigen hebben een smalle kolom van 720 px, aanleveren de hele breedte (met het overzicht
   ernaast). Alleen dat brede kaartje heeft tekst en knop naast elkaar. */
:is(.pagina-bekijken, .pagina-ontwerp, .pagina-wijzigen) ~ .chat-ingang { max-width: 720px; }
@media (min-width: 900px) {
  .pagina:not(.pagina-bekijken, .pagina-ontwerp, .pagina-wijzigen) ~ .chat-ingang { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .pagina:not(.pagina-bekijken, .pagina-ontwerp, .pagina-wijzigen) ~ .chat-ingang .knop { grid-column: 2; grid-row: 1 / span 2; justify-self: end; margin-top: 0; }
}
/* Bij de melding dat de link niet werkt (een oude link) is de chat ook geen uitweg: dan geen uitnodiging, alleen de melding en het mailadres. */
.pagina:has(.toegang:not([hidden])) ~ .chat-ingang { display: none; }
@media (max-width: 560px) { .chat-ingang { margin-bottom: 48px; } }

/* Telefoon en tablet */
@media (max-width: 999px) {
  .pagina { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 32px; }
  .overzicht-zij { display: none; }
  .overzicht-onder { display: block; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .voet-gegevens { flex-direction: column; }
  .rij, .rij-postcode { grid-template-columns: minmax(0, 1fr); }
  .knop { width: 100%; justify-content: space-between; }
  .knop.knop-klein { width: auto; }
  .overzicht { padding: 20px; }
  .bedankt { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

[data-bestelnummer] { white-space: nowrap; }

/* Stap 1 korter (kopersblik 19 oktober 2026): de lijsten dicht achter "Bekijk wat erin zit", met een pijltje dat draait als hij opengaat */
.basis-meer { margin-top: 6px; }
.basis-meer summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.basis-meer summary::-webkit-details-marker { display: none; }
.basis-meer summary::after { content: ""; width: 7px; height: 7px; border: solid var(--roze); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--vloeiend); }
.basis-meer[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.basis-meer summary:focus-visible { outline: 2px solid var(--roze); outline-offset: 2px; border-radius: 4px; }
.basis-meer .basis-lijst { margin: 4px 0 6px; }
@media (prefers-reduced-motion: reduce) { .basis-meer summary::after { transition: none; } }

/* De drie stappen bovenaan /bestellen (CRO-ronde, 19 oktober 2026): op het donker, met genummerde rondjes zoals de tijdlijn van de studiosite */
.kop-stappen { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; max-width: 40em; counter-reset: kopstap; }
.kop-stappen li { position: relative; min-height: 32px; padding: 4px 0 0 46px; color: var(--wit); font-size: 16px; line-height: 1.5; counter-increment: kopstap; }
.kop-stappen li::before { content: counter(kopstap); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--wit); color: var(--nacht); font-family: var(--serif); font-size: 17px; line-height: 32px; text-align: center; }
@media (min-width: 900px) { .kop-stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: none; } }
.extra-vragen { margin: 4px 0 18px; }
.extra-vragen > .veld, .extra-vragen > .korting { margin-top: 12px; }