/* CourtMerge — landingspagina.
   Palet overgenomen uit src/CourtMerge/Themes/Light.xaml en Dark.xaml,
   zodat de site en de app dezelfde kleuren gebruiken.
   Geen externe fonts, scripts of trackers: de pagina is zelfstandig en
   heeft daardoor ook geen cookiebanner nodig. */

:root {
  /* De pagina volgt het systeemthema, maar de bezoeker kan dat met de
     themaknop in de header overstemmen. De keuze wordt onthouden in
     localStorage en toegepast via data-theme="light|dark" op <html>, vóór de
     eerste paint (zie het scriptje in <head> van elke pagina). */
  color-scheme: light dark;

  --window:       #F4F6F9;
  --panel:        #FFFFFF;
  --border:       #E3E7EF;
  --text:         #1E2A44;
  --muted:        #626C80;
  --accent:       #26324F;
  --accent-hover: #33456B;
  --accent-text:  #FFFFFF;
  --gold:         #A6852E;
  --link:         #2557C4;
  --header:       #EEF1F6;
  --selection:    #DCE4F2;
  --notice:       #FDF8EC;
  --notice-border:#EDDFBE;
  --error:        #C0392B;
  --error-bg:     #FDF3F2;
  --stamp-ink:    #2F4FA8;
  --scan-paper:   #EDEFF3;

  --maxw:   1080px;
  --narrow: 760px;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(30, 42, 68, .06), 0 8px 24px rgba(30, 42, 68, .06);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Systeemthema donker, tenzij de bezoeker expliciet licht heeft gekozen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --window:       #10141C;
    --panel:        #161B26;
    --border:       #2A3242;
    --text:         #E7EAF1;
    --muted:        #99A2B3;
    --accent:       #43567F;
    --accent-hover: #55699A;
    --accent-text:  #F3F6FC;
    --gold:         #C9A44A;
    --link:         #7FA6F0;
    --header:       #1E2634;
    --selection:    #2C3852;
    /* Warme tegenhanger van --header: gemeten op 1,215 tegen --window, waar
       --header op 1,214 zit. Een lichtgele achtergrond werkt in donker niet;
       dit leest als "iets opgetild", zoals de rest van dit thema het doet. */
    --notice:       #2C2517;
    --notice-border:#453A22;
    /* #C0392B is op een donkere achtergrond te dof om als waarschuwing te
       lezen; deze haalt tegen --panel ruim 4,5:1. */
    --error:        #E4705F;
    --error-bg:     #2A1A18;
    --stamp-ink:    #7C97DC;
    --scan-paper:   #1C2331;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  }
}

/* Handmatige donkere keuze via de themaknop, ongeacht systeeminstelling. */
:root[data-theme="dark"] {
  --window:       #10141C;
  --panel:        #161B26;
  --border:       #2A3242;
  --text:         #E7EAF1;
  --muted:        #99A2B3;
  --accent:       #43567F;
  --accent-hover: #55699A;
  --accent-text:  #F3F6FC;
  --gold:         #C9A44A;
  --link:         #7FA6F0;
  --header:       #1E2634;
  --selection:    #2C3852;
  --notice:       #2C2517;
  --notice-border:#453A22;
  --error:        #E4705F;
  --error-bg:     #2A1A18;
  --stamp-ink:    #7C97DC;
  --scan-paper:   #1C2331;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
}

:root[data-theme="light"]  { color-scheme: light; }
:root[data-theme="dark"]   { color-scheme: dark; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--window);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--selection); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.01em; }
h3 { font-size: 1.0625rem; }
p  { margin: 0 0 1rem; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }

code {
  font-family: "Cascadia Mono", Consolas, "SF Mono", monospace;
  font-size: .875em;
  background: var(--header);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1em .38em;
  white-space: nowrap;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: var(--narrow); }

/* ── Header ─────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--window) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 62px;
}

.wordmark {
  font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--text); text-decoration: none;
}
.wordmark span { color: var(--gold); }

.nav { display: flex; align-items: center; gap: 8px; }
.nav a {
  color: var(--muted); text-decoration: none;
  padding: 6px 10px; border-radius: 6px; font-size: .9375rem;
}
.nav a:hover { color: var(--text); background: var(--header); }
.nav .btn { color: var(--accent-text); }

/* ── Taalkiezer ─────────────────────────────────────────────────────── */

/* Dezelfde vorm als de taalknop in de app (MainWindow.xaml, met
   LanguageFlagTemplate uit Themes/Styles.xaml): een vlaggetje van 19×13, de
   korte code ernaast, en een chevron die een lijstje opent met de taalnaam ín
   die taal en een vinkje bij de actieve. De vlaggen zijn dezelfde tekening,
   overgezet van XAML naar svg — vandaar de viewBox van 18×12.

   Geen javascript: <details> opent en sluit zichzelf. Dat houdt de belofte in
   de privacyverklaring overeind dat deze site geen scripts draait. */

.lang {
  position: relative;
  margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0;
}
.lang > summary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 6px;
  font-size: .9375rem; font-weight: 400; color: var(--muted);
  cursor: pointer; list-style: none;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::after { content: none; }   /* de FAQ-details zet daar een + */
.lang > summary:hover,
.lang[open] > summary { color: var(--text); background: var(--header); }
.lang > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.lang-caret { font-size: .625rem; opacity: .7; }

.flag {
  display: block; flex: none;
  width: 19px; height: 13px;
  border: 1px solid rgba(0, 0, 0, .2); border-radius: 2px;
  overflow: hidden;
}
.flag svg { display: block; width: 100%; height: 100%; }

.lang-menu {
  position: absolute; z-index: 20;
  top: calc(100% + 5px); right: 0;
  min-width: 178px; padding: 7px 6px;
  background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow);
}
/* .lang-menu ervoor omdat .nav a anders wint op specificiteit: dat zet in de
   headerbalk een gedempte kleur en een kleinere padding, en die horen hier niet. */
.lang-menu .lang-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px; border-radius: 6px;
  color: var(--text); text-decoration: none; font-size: .9375rem;
}
.lang-menu .lang-row:hover { background: var(--header); color: var(--text); }
.lang-menu .lang-row .name { flex: 1; }
.lang-menu .lang-row .check { color: var(--gold); }

/* ── Themaknop ──────────────────────────────────────────────────────── */

.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--panel); color: var(--muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.theme-toggle:hover { border-color: var(--muted); color: var(--text); }

/* Standaard (systeemthema): toon het half-gevulde auto-icoon. */
.theme-icon { display: none; }
.theme-icon--auto { display: block; }

/* Expliciet licht: toon het zon-icoon (klik wisselt naar donker). */
:root[data-theme="light"] .theme-icon--auto { display: none; }
:root[data-theme="light"] .theme-icon--sun  { display: block; }

/* Expliciet donker: toon het maan-icoon (klik wisselt naar systeem). */
:root[data-theme="dark"] .theme-icon--auto { display: none; }
:root[data-theme="dark"] .theme-icon--moon { display: block; }

/* ── Knoppen ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; cursor: pointer;
  border-radius: 6px; padding: 12px 22px;
  font-size: 1rem; font-weight: 500; text-align: center;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--header); }
.btn-small { padding: 7px 14px; font-size: .9375rem; background: var(--accent); }
.btn-small:hover { background: var(--accent-hover); }
.btn-block { display: block; width: 100%; }
.btn-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero { padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); }

.hero-inner {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}

.eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .75rem;
}

.lead { font-size: 1.125rem; color: var(--muted); max-width: 34em; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 12px; }

.cta-note { font-size: .9375rem; color: var(--muted); margin: 0; }
.cta-note.center { text-align: center; margin-top: 16px; }

/* Illustratie van de inventarispagina */
.hero-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 32px rgba(30,42,68,.12)); }
.hero-art .page { fill: var(--panel); stroke: var(--border); stroke-width: 1; }
.hero-art .page-title { fill: var(--text); font: 600 15px var(--font); letter-spacing: .14em; }
.hero-art .rule-gold { stroke: var(--gold); stroke-width: 2; }
.hero-art .rule { stroke: var(--border); stroke-width: 1; }
.hero-art .lbl { fill: var(--muted); font: 500 11px var(--font); }
.hero-art .dsc { fill: var(--link); font: 400 12px var(--font); }
.hero-art .pg  { fill: var(--muted); font: 400 11px var(--font); }
.hero-art .chip { fill: var(--selection); }
.hero-art .chip-t { fill: var(--text); font: 600 9px var(--font); letter-spacing: .07em; }
.hero-art .foot { fill: var(--muted); font: 400 11px var(--font); }
.hero-art .foot-link { fill: var(--link); font: 400 11px var(--font); }

/* ── De stempel (ticket #61) ──────────────────────────────── */

/* De sectie hierboven is ook plain, dus zonder deze rand lopen de twee
   in elkaar over. .section.alt trekt zijn eigen randen; plain niet. */
#stempel { border-top: 1px solid var(--border); }

.stamp-pair {
  display: grid; gap: 20px; grid-template-columns: 1fr 1fr; align-items: start;
}
.stamp-pair figure {
  margin: 0; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.stamp-pair svg { width: 100%; height: auto; display: block; }
.stamp-pair figcaption { margin-top: 12px; color: var(--muted); font-size: .95rem; }
.stamp-pair figcaption strong { color: var(--text); }
/* Onder 720px staan de panelen onder elkaar en draagt het vet van het
   onderschrift het "voor en na" alleen. */
@media (max-width: 720px) { .stamp-pair { grid-template-columns: 1fr; } }

.stamp-art .ring   { fill: none; stroke: var(--stamp-ink); }
.stamp-art .ink    { fill: var(--stamp-ink); }
.stamp-art .ink-sm { font: 600 9px var(--font); letter-spacing: .12em; }
.stamp-art .ink-lg { font: 700 13px var(--font); letter-spacing: .04em; }
.stamp-art .ink-nr { font: 600 14px var(--font); }
.stamp-art .ink-xs { font: 400 9px var(--font); letter-spacing: .1em; }
.stamp-art .frame  { fill: none; stroke: var(--stamp-ink); stroke-width: 2; }
.stamp-art .paper  { fill: var(--panel); stroke: var(--border); stroke-width: 1; }
.stamp-art .line   { fill: var(--border); }
.stamp-art .scanbg { fill: var(--scan-paper); }


/* ── Privacystrook ──────────────────────────────────────────────────── */

.strip {
  background: var(--panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 22px 0;
}
.strip p { margin: 0; color: var(--muted); }
.strip strong { color: var(--text); }

/* ── Secties ────────────────────────────────────────────────────────── */

.section { padding: clamp(48px, 7vw, 88px) 0; }
.section.alt { background: var(--panel); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Dezelfde leesbreedte als .lead in de hero: een lange lead liep anders over
   de volle 1080px van .wrap, zoals bij de stempelsectie. */
.section-lead { color: var(--muted); max-width: 34em; margin-top: -.25rem; margin-bottom: 2rem; }

/* ── De schermopname op de startpagina ──────────────────────────────── */

/* Hier stond tot #30 een `.placeholder`-vlak met stippellijn; sinds de opname
   live staat gebruikte geen enkele pagina die regels nog.

   `aspect-ratio` houdt het kader op 16:9 vóór de metadata binnen is, zodat de
   pagina niet verspringt op het moment dat de video zich aandient — dezelfde
   zorg als de `width`/`height` op de <img>-elementen. Zet dit nooit op `auto`:
   bij de screenshots ging de gereserveerde hoogte daardoor van 193px naar 0.
   Wijkt de opname af van 16:9, dan geeft dat zwarte balken binnen het kader in
   plaats van een springende pagina. */
.demo-video {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  margin: 0;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ── Stappen ────────────────────────────────────────────────────────── */

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.steps li { position: relative; padding-top: 4px; }
.step-n {
  display: grid; place-items: center;
  width: 30px; height: 30px; margin-bottom: 14px;
  border-radius: 50%;
  background: var(--accent); color: var(--accent-text);
  font-size: .875rem; font-weight: 600;
}
.steps p { color: var(--muted); margin: 0; }

/* ── Features ───────────────────────────────────────────────────────── */

.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 32px; }
.features h3 { margin-bottom: .35em; }
.features p { color: var(--muted); font-size: .9375rem; margin: 0; }

/* ── Screenshots ────────────────────────────────────────────────────── */

.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shot {
  /* min-width: 0 is nodig omdat de <img> een intrinsieke breedte draagt via
     haar width/height-attributen (dat voorkomt layoutschuif tijdens laden).
     Zonder dit weigert een grid-item standaard te krimpen onder de
     intrinsieke grootte van zijn inhoud, en duwt de foto de kolom — en de
     pagina — breder open dan de wrap. */
  min-width: 0;
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.shot:hover { border-color: var(--gold); }

.shot-link { display: block; position: relative; }
.shot-link:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }

/* Standaard: de hele afbeelding, op haar eigen verhouding.
   width/height op de <img> zelf blijven zo hun werk doen — de browser leidt
   er de verhouding uit af en houdt de plaats al vrij vóór het beeld binnen
   is. Let op: een expliciete `aspect-ratio: auto` in css zet dat mechanisme
   uit (gemeten: 193px gereserveerde hoogte wordt 0), dus staat de uitsnede
   hieronder in een min-width-vraag in plaats van ze hier weer af te zetten. */
.shot-link img {
  display: block; width: 100%;
  /* height: auto overruled het height-attribuut, dat anders als css-hoogte
     zou meetellen. */
  height: auto;
  border-bottom: 1px solid var(--border);
}

/* Naast elkaar (drie kolommen) hebben de drie beelden elk een andere vorm —
   een breed appvenster, een staande pdf-pagina, een liggende pagina met een
   label — en zouden de kaarten ongelijk hoog worden. Eén verhouding met een
   uitsnede trekt ze gelijk; object-position kiest per beeld welk hoekje
   overeind moet blijven. Wie de volledige afbeelding wil, klikt ze open. */
@media (min-width: 881px) {
  .shot-link img {
    aspect-ratio: 16 / 10;
    object-fit: cover; object-position: center top;
  }
  /* Het label van deze pagina staat rechtsboven; een uitsnede in het midden
     zou er net de rechterrand af snijden. Niet helemaal rechts uitlijnen:
     dan komt de grijze rand van de pdf-viewer mee in beeld. */
  .shot.focus-right .shot-link img { object-position: 85% top; }
}

.shot-hint {
  position: absolute; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 92%, transparent);
  color: var(--accent-text); font-size: .8125rem; font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.shot-hint svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.shot figcaption { padding: 12px 14px; font-size: .9375rem; color: var(--muted); }

/* ── Vergrootvenster ────────────────────────────────────────────────── */

/* Een lightbox zonder javascript: de link zet een #anker en :target maakt het
   overlay zichtbaar. Dat houdt de site bij de twee scripts die de
   privacyverklaring noemt (demo.js en theme.js) — hier is een derde
   overbodig. Sluiten kan met de knop, met een klik
   naast de afbeelding, of met de terugknop van de browser — de toestand
   staat in de url. */

.lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 50;
  padding: clamp(16px, 4vw, 40px);
}
.lightbox:target { display: grid; place-items: center; }

.lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 14, 22, .74);
  backdrop-filter: blur(3px);
}

.lightbox-inner {
  position: relative; margin: 0;
  width: 100%; max-width: 1200px; max-height: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.lightbox-inner img {
  display: block; width: 100%; height: auto;
  /* dvh, niet vh: op een telefoon slaat 100vh op het venster mét ingeklapte
     adresbalk, dus met de balk in beeld zou het paneel buiten het zichtbare
     deel vallen. */
  max-height: calc(100dvh - 190px);
  object-fit: contain;
  background: var(--header);
}
.lightbox-inner figcaption {
  padding: 12px 16px; font-size: .9375rem; color: var(--muted);
  border-top: 1px solid var(--border);
}

.lightbox-close {
  position: absolute; z-index: 2;
  top: clamp(10px, 2.5vw, 22px); right: clamp(10px, 2.5vw, 22px);
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border);
  font-size: 1.375rem; line-height: 1; text-decoration: none;
}
.lightbox-close:hover { background: var(--header); }

/* ── Demo-cta (downloadbare voorbeeldbundel) ─────────────────────────── */

.demo-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  margin-top: 20px;
}
/* Onder elkaar (telefoon) staan de knop en de link vlak op elkaar; een
   raakvlak van 44px hoog houdt ze uit elkaars vaarwater onder een duim. */
.demo-cta .cta-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .9375rem;
}
.demo-cta .cta-note { flex-basis: 100%; margin-top: 4px; }

/* ── Prijs ──────────────────────────────────────────────────────────── */

.price-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(28px, 4vw, 40px);
}
.price-head { display: flex; align-items: baseline; gap: 10px; }
.price { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 600; letter-spacing: -.02em; }
.price-sub { color: var(--muted); }
.price-line { color: var(--muted); font-size: .9375rem; margin-top: .25rem; }

.checks { list-style: none; margin: 24px 0 28px; padding: 0; }
.checks li { position: relative; padding-left: 30px; margin-bottom: 11px; }
.checks li::before {
  content: ""; position: absolute; left: 6px; top: .55em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* ── FAQ ────────────────────────────────────────────────────────────── */

details {
  background: var(--window);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 18px;
  margin-bottom: 10px;
}
details[open] { padding-bottom: 6px; }
summary { cursor: pointer; padding: 13px 0; font-weight: 500; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--muted); font-size: 1.25rem; line-height: 1.2; }
details[open] summary::after { content: "−"; }
details p { color: var(--muted); margin: 0 0 12px; font-size: .9375rem; }

/* Eén schermafbeelding in een FAQ-antwoord (ticket #66-vervolg): dezelfde
   .shot/.lightbox-mechaniek als "Zo ziet het eruit", maar niet in de
   driekolomsgrid, dus hier begrensd zodat ze niet de volle .narrow-breedte
   opeist naast een antwoord van twee zinnen. */
.faq-shot { max-width: 420px; margin: 0 0 12px; }

/* ── Footer ─────────────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--border); padding: 36px 0; background: var(--panel); }
.footer-inner p { margin: 0 0 6px; font-size: .9375rem; }
.footer-inner .muted { color: var(--muted); }

.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 12px; }
.footer-links a { font-size: .9375rem; }
.footer-back { color: var(--muted); font-style: italic; }

/* ── Juridische pagina's ────────────────────────────────────────────── */

.legal { padding: clamp(36px, 6vw, 64px) 0 clamp(48px, 7vw, 80px); }
.legal h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: .35em; }
.legal h2 { font-size: 1.25rem; margin-top: 2.25rem; }
.legal .updated { color: var(--muted); font-size: .9375rem; margin-bottom: 2rem; }
.legal ul { color: var(--muted); padding-left: 1.25rem; }
.legal li { margin-bottom: .4rem; }
.legal .back { display: inline-block; margin-bottom: 1.5rem; font-size: .9375rem; }

/* ── Downloadpagina ─────────────────────────────────────────────────── */

/* download.html en en/download.html dragen .legal én .download: dezelfde
   tekstkolom en dezelfde terugkeerlink als de juridische pagina's, met de
   knop-en-feiten-blokken uit courtmerge-site#27 erbovenop. */

/* De blokken onder elkaar hebben elk margin: 0 (zie .cta-note), dus de
   tussenruimte staat hier. Enkel de directe kinderen van de tekstkolom: de
   .cta-note binnen .demo-cta hangt aan de link erboven en houdt zijn eigen
   kleine afstand. */
.download .wrap > .cta-note { margin-top: 18px; }

/* Versie, datum en de twee bestandsgroottes op één regel (#26 → #27). */
.download .factline {
  font-size: .9375rem; color: var(--muted);
  margin: 18px 0 0;
}

/* Hier stonden de .ss-regels voor de twee SmartScreen-vensters. Die figuur is
   opgegaan in het tab-kaartje hieronder en geen enkele pagina gebruikte de
   klasse nog.

   Wat uit #27 overeind blijft en in .warn-panel is overgenomen: de vensters
   staan onder elkaar, altijd, en zonder media query. Naast elkaar halen ze in
   .narrow 347px — 65%, óók op een desktop van 1265px — terwijl de tekst erin
   native ~12px is. Onder elkaar worden ze zo breed als het paneel toelaat, wat
   met de padding erbij op ~666px uitkomt: schaal 1,25, dus nog altijd ruim
   boven ware grootte. Daarom hangt er ook geen vergrootvenster aan — er valt
   niets te vergroten. */

/* ── De twee waarschuwingen: één kaartje met twee tabs ───────────────────

   Vervangt het oude .notice-blok. Dat zette enkel de browserwaarschuwing in
   een geel kader terwijl de SmartScreen-figuur er kaal boven stond: twee keer
   dezelfde soort mededeling, in twee verschillende vormen, terwijl de h2
   erboven zegt dat ze allebei een waarschuwing zijn.

   Mechaniek: dezelfde radio-hack als de segmented control op bestellen.html,
   dus nog steeds zonder javascript. Daarom staan de radio's vóór en buiten
   .warn-tabs én beide panelen — de algemene sibling-combinator (~) moet ze
   alle drie kunnen bereiken. De labels vinden hun input via for/id.

   Tabs zijn strikt genomen voor alternatieven, en dit is een volgorde: je
   krijgt beide meldingen, na elkaar. Vandaar de nummers op de knoppen en de
   .warn-lead erboven die zegt dát het er twee zijn. Zo leest de balk als een
   stappenteller en niet als een keuze waarbij je de andere helft mag missen.

   Dit vervangt ook de omgekeerde volgorde uit #27. Daar stond de SmartScreen-
   figuur bovenaan om op 390px boven de vouw te blijven, wat de tekst moest
   repareren met het woord "Daarvóór". Er staat nu nog maar één opname tegelijk,
   dus dat hoogtebezwaar is vervallen en de volgorde mag chronologisch zijn. */

.warn { margin: 26px 0 0; }

.warn-lead { font-size: .9375rem; color: var(--muted); margin: 0 0 12px; }
.warn-lead strong { color: var(--text); }

.warn-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* De bovenrand is bij beide 3px dik, ook bij de inactieve: enkel de kleur
   verschilt. Anders zou de actieve tab 2px hoger zijn dan de andere. */
.warn-tab {
  display: block; text-align: center; cursor: pointer;
  padding: 11px 10px;
  border-radius: 6px 6px 0 0;
  background: var(--header);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-bottom: 0;
  color: var(--muted); font-weight: 500; font-size: .9375rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.warn-tab:hover { color: var(--text); }

/* De actieve tab krijgt de achtergrond van het paneel eronder en een gouden
   streep erboven; hij versmelt dus met het paneel in plaats van eruit te
   springen. Bewust geen vlak in --gold met witte letters: dat haalt maar 3,5:1
   en zakt door de AA-grens voor tekst van 15px. Ook bewust niet --accent zoals
   op bestellen.html — die kleur is daar de knop die geld kost, en dit is een
   waarschuwing, geen call to action. */
#warn-download:checked ~ .warn-tabs label[for="warn-download"],
#warn-open:checked ~ .warn-tabs label[for="warn-open"] {
  background: var(--notice);
  border-color: var(--notice-border);
  border-top-color: var(--gold);
  color: var(--text); font-weight: 600;
}
#warn-download:focus-visible ~ .warn-tabs label[for="warn-download"],
#warn-open:focus-visible ~ .warn-tabs label[for="warn-open"] {
  outline: 2px solid var(--link); outline-offset: 2px;
}
#warn-download:checked ~ #warn-panel-open { display: none; }
#warn-open:checked ~ #warn-panel-download { display: none; }

/* border-top: 0, zodat het gele vlak doorloopt tot in de tabs — zelfde truc
   als .order-form onder de segmented control. */
.warn-panel {
  background: var(--notice);
  border: 1px solid var(--notice-border);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 20px clamp(16px, 3.5vw, 22px) 22px;
}
.warn-panel > p { font-size: .9375rem; color: var(--muted); margin: 0 0 14px; }
.warn-panel strong { color: var(--text); }
.warn-panel figure { margin: 0; }

/* max-width: 360px op alle vier de opnames, niet enkel op het staande
   browservenster: de twee liggende SmartScreen-vensters vulden voordien de
   hele kolom (~666px, schaal 1,25) en oogden daardoor "drukker" dan het
   paneel ernaast op hetzelfde tabblad. Op één breedte lezen beide panelen nu
   als hetzelfde soort venster, enkel met andere inhoud. Ruim boven ware
   grootte blijft het sowieso: de SmartScreen-opname is zelf al 532px breed.
   margin-inline: auto centreert wat smaller is dan de kolom — op deze
   breedte dus alle vier.

   Laat width/height op de img's staan, anders springt de pagina tijdens het
   laden. De opnames zelf zijn donkere Edge-vensters op het lichtgele/donkere
   .warn-panel-vlak: een randje in --border (grijs) verdween daar zowat in.
   --gold trekt 'm los van de achtergrond, in beide thema's, en sluit aan bij
   de gouden streep op de actieve tab erboven. */
.warn-panel img {
  display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  background: var(--panel);
}
.warn-panel img + img { margin-top: 14px; }

.warn-panel figcaption { color: var(--muted); font-size: .875rem; margin-top: 12px; }

/* Op 390px is een tab nog 163px breed; met de labels op .9375rem loopt dat
   net over twee regels. */
@media (max-width: 480px) {
  .warn-tab { font-size: .875rem; padding: 10px 6px; }
}

/* Blok voor tekst die nog door een derde nagekeken moet worden. Vervalt
   zodra de definitieve tekst er staat — zie judochampion/CourtMerge#20. */
.todo-legal {
  background: var(--header);
  border: 1px dashed var(--gold);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 20px 0;
}
.todo-legal p { margin: 0 0 8px; font-size: .9375rem; }
.todo-legal p:last-child { margin-bottom: 0; }
.todo-legal strong { color: var(--gold); }

/* ── Bestelpagina (ticket #39) ─────────────────────────────────────────

   Vormtaal beslist in #35 (variant A — tabs): één smalle kolom, de belofte
   over factuur/levering vóór het formulier zodat ze voor beide koperstypes
   geldt zonder herhaling, de afstandsverklaring als gewoon verplicht veld.

   Twee volledig losse <form>-elementen per taal — bevinding uit #34: een
   `required` veld dat via CSS verborgen zit, breekt het versturen zonder
   foutmelding zodra het in een verborgen formulier staat. Elk formulier
   valideert alleen zichzelf. */

.order-wrap { padding: clamp(32px, 5vw, 56px) 0 clamp(56px, 8vw, 96px); }
.order-head { margin-bottom: 28px; }
.order-head h1 { margin-bottom: .2em; }
.order-head .lead { margin: 0; }

.order-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.order-price .amount { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; }
.order-price .sub { color: var(--muted); font-size: .9375rem; }
.order-vat { color: var(--muted); font-size: .875rem; margin-bottom: 20px; }

.promise {
  background: var(--panel);
  border: 1px solid var(--border); border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 28px;
  font-size: .9375rem; color: var(--muted);
}
.promise strong { color: var(--text); }

/* Segmented control — de radio's staan vóór en buiten de .toggle-div én de
   twee <form>'s, zodat de algemene sibling-combinator (~) verderop beide
   bereikt. De labels vinden hun input via for/id, niet via DOM-positie. */
.toggle-input {
  position: absolute; opacity: 0;
  width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 0; }

/* Ronding enkel bovenaan en geen onderrand: de knoppen rusten op het formulier
   in plaats van er als losse chips boven te zweven. Het formulier eronder heeft
   border-top: 0, dus de gekozen knop en het paneel worden één vlak.

   De bovenrand is bij beide 3px dik, ook bij de niet-gekozen: enkel de kleur
   verschilt. Anders zou de gekozen knop 2px hoger zijn dan de andere. */
.toggle-btn {
  display: block; text-align: center; cursor: pointer;
  padding: 12px 10px; border-radius: 6px 6px 0 0;
  background: var(--header);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-bottom: 0;
  color: var(--muted); font-weight: 500; font-size: .9375rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.toggle-btn:hover { color: var(--text); }

/* De gekozen knop krijgt de achtergrond van het formulier eronder, niet een
   vlak in --accent. Dat vlak had precies de kleur van "Bestelling versturen"
   onderaan de pagina, dus stonden er twee dingen in dezelfde kleur die iets
   heel anders betekenen: "dit heb ik gekozen" en "hier verstuur ik". --accent
   blijft nu voorbehouden aan de knop die geld kost; de keuze markeert zich
   door in het formulier over te lopen, met een streep erboven. */
#koper-onderneming:checked ~ .toggle label[for="koper-onderneming"],
#koper-particulier:checked ~ .toggle label[for="koper-particulier"] {
  background: var(--panel);
  border-color: var(--border);
  border-top-color: var(--accent);
  color: var(--text); font-weight: 600;
}
#koper-onderneming:focus-visible ~ .toggle label[for="koper-onderneming"],
#koper-particulier:focus-visible ~ .toggle label[for="koper-particulier"] {
  outline: 2px solid var(--link); outline-offset: 2px;
}
#koper-onderneming:checked ~ #form-particulier { display: none; }
#koper-particulier:checked ~ #form-onderneming { display: none; }

/* border-top: 0, zodat het witte vlak doorloopt tot in de gekozen knop. De
   bovenste padding is iets ruimer dan de andere kanten: het eerste veld stond
   anders strak tegen de naad met de knoppen. */
.order-form {
  background: var(--panel); margin: 0;
  border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 30px clamp(18px, 4vw, 28px) 28px;
}
.order-form fieldset { border: 0; margin: 0; padding: 0; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: .9375rem; font-weight: 500; margin-bottom: 6px; }
.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%; padding: 11px 13px;
  font: inherit; color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px;
}
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.field textarea { min-height: 88px; resize: vertical; }
.field-hint { font-size: .8125rem; color: var(--muted); margin-top: 5px; }

/* ── Foutmarkering op een veld ────────────────────────────────────────────
   :user-invalid en niet :invalid. Met :invalid kleurt élk leeg verplicht veld
   rood zodra de pagina laadt, dus nog voor de bezoeker iets misdaan heeft —
   een formulier dat je begroet met zes rode kaders. :user-invalid slaat pas
   aan nadat iemand het veld heeft ingevuld en verlaten, of na een poging tot
   versturen. Dat is precies het moment waarop de melding klopt.

   Geen javascript nodig, dus er komt geen derde script bij de twee die de
   privacyverklaring al noemt (demo.js en theme.js). */
.field input:user-invalid,
.field textarea:user-invalid {
  border-color: var(--error);
  background: var(--error-bg);
}
.field input:user-invalid:focus-visible,
.field textarea:user-invalid:focus-visible { outline-color: var(--error); }

/* De regel eronder verschijnt mee. Ze staat er in de markup altijd, zodat de
   hoogte van het veld niet verspringt op het moment dat de fout opduikt —
   daarom display:none en geen conditionele markup. */
.field-error { display: none; font-size: .8125rem; color: var(--error); margin-top: 5px; }
.field input:user-invalid ~ .field-error,
.field textarea:user-invalid ~ .field-error { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

/* Afstandsverklaring — een gewoon verplicht veld, geen schrikkader (#35). */
.consent { display: flex; gap: 11px; align-items: flex-start; }
.consent input[type="checkbox"] {
  margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0;
  accent-color: var(--accent);
}
.consent input[type="checkbox"]:user-invalid { outline: 2px solid var(--error); outline-offset: 2px; }
.consent label { font-size: .9375rem; color: var(--text); font-weight: 400; }

/* Geleend uit variant B (#35): een korte herinnering vlak bij de
   verstuurknop, als aanvulling op de belofte vooraan, niet als vervanging. */
.order-reminder { font-size: .8125rem; color: var(--muted); margin: 10px 0 0; text-align: center; }

.order-form button[type="submit"] { width: 100%; margin-top: 6px; font-family: inherit; appearance: none; }

/* Honeypotveld — spamafweer zonder javascript (#39, onderzoek in
   docs/formulierhandler-en-mail.md §5). Onzichtbaar voor een mens, ook voor
   een schermlezer (display:none haalt het uit de toegankelijkheidsboom),
   maar een bot die blind elk <input> vult, vult het wél. De handler gooit
   een gevulde honeypot nooit weg — hij markeert de mail als verdacht. */
.hp-field { display: none; }

/* ── Gesloten-toestand (#34/#36) ──────────────────────────────────────
   Omschakelen is één bewerking: de klasse op <body> wijzigen van
   "ordering-open" naar "ordering-closed" (en de datum in de tekst hieronder
   invullen). Geen herschrijving van de pagina nodig. */
.order-closed-block { display: none; }
body.ordering-closed .order-open-block { display: none; }
body.ordering-closed .order-closed-block { display: block; }
.order-closed-block {
  background: var(--panel);
  border: 1px solid var(--border); border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 22px clamp(18px, 4vw, 28px);
}
.order-closed-block p:last-child { margin-bottom: 0; }

/* ── Bevestiging / foutmelding (uitgeschreven door bestellen.ashx) ─────
   Zelfde visuele taal als .promise/.strip, zodat de pagina die de handler
   teruggeeft niet als een ander stuk site aanvoelt. */
.order-result {
  background: var(--panel);
  border: 1px solid var(--border); border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 22px clamp(18px, 4vw, 28px);
}
.order-result.error { border-left-color: var(--error); }
.order-result h1 { margin-bottom: .35em; }
.order-result p:last-child { margin-bottom: 0; }

/* Wijst na een geslaagde bestelling op de kans dat de bevestigingsmail in
   Spam/Ongewenst belandt (#48: gemeten bij Gmail én Outlook, ondanks een
   volledig geslaagde SPF/DKIM/DMARC-authenticatie — een reputatieprobleem
   van een nieuw verzenddomein, niet iets wat de code kan oplossen). Zelfde
   notice-kleuren als .warn-panel op de downloadpagina, zodat dit als
   hetzelfde soort waarschuwing leest. Staat enkel op de succesvolle
   bevestiging (RenderConfirmation) — een mislukte bestelling heeft nog geen
   bevestigingsmail om naar te zoeken. */
.notice-box {
  margin-top: 16px;
  background: var(--notice);
  border: 1px solid var(--notice-border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.notice-box strong { color: var(--text); }

/* ── Responsief ─────────────────────────────────────────────────────── */

@media (max-width: 880px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { max-width: 320px; margin: 8px auto 0; }
  .steps, .shots { grid-template-columns: 1fr; }

  /* In één kolom staat de hele afbeelding er (zie de min-width-vraag bij
     .shot-link img), en dan valt het vergrootvenster weg: op een scherm van
     375px is het paneel 341px breed tegenover 325px in de kaart. Die 5% is
     geen vergroting, dus beloven we ze niet. */
  .shot-link { pointer-events: none; }
  .shot-hint { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  /* > i.p.v. de gewone descendant-selector: anders raakt dit ook de
     .lang-row-links in de opengeklapte taalkiezer (die zitten ook in .nav)
     en klapt dat menu in tot een leeg wit vlak. */
  .nav > a:not(.btn) { display: none; }
  .cta-row .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ── Cookiebanner ─────────────────────────────────────────────────── */
/* Voor de Google-conversietag (courtmerge-site#76). Blokkeert de pagina
   niet: een smalle balk onderaan, geen overlay, geen tweede scherm met
   categorieën. assets/consent.js beslist of hij getoond wordt en verwerkt
   de twee knoppen; deze regels zijn puur opmaak. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--panel); border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 0;
}
.cookie-banner-inner p { margin: 0; color: var(--text); font-size: .9375rem; max-width: 60em; }
.cookie-banner-inner a { color: var(--text); }
.cookie-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
/* .btn-small zet elders een accentachtergrond (voor de kleine Download-knop
   in de header) die zonder deze regel de transparante achtergrond van
   .btn-ghost overschrijft — vandaar donkere tekst op een bijna identieke
   donkere achtergrond bij Weigeren. */
.cookie-banner-actions .btn-ghost { background: transparent; color: var(--text); }
.cookie-banner-actions .btn-ghost:hover { background: var(--header); }

@media (max-width: 640px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions { justify-content: flex-end; }
}