/* Designtokens "rustig en gebruiksvriendelijk" (docs/DESIGN.md §3) als custom properties.
   Kiosk-veilig (iOS >= 12.2): geen color-mix, geen flex gap, geen aspect-ratio, geen inset,
   geen clamp(), geen dvh/vh (ONTWERP.md §12.2 niet-gebruiken-lijst). Alle kleuren zijn vooraf
   berekend; de contrastwaarden staan in DESIGN.md en worden getest (test/tokens.test.ts).
   Dezelfde waarden staan in tokens.ts (TS-export); de test bewaakt dat ze gelijk blijven.

   Thema's: standaard licht ("dag"); [data-theme='dark'] = avond (licht op donker);
   [data-theme='night'] = nachtgezicht (bijna zwart, gedimd). Geen automatische
   prefers-color-scheme: de kiosk kiest zelf op tijd (§9 Zichtbaarheid), de webapp later expliciet. */
:root {
  /* ---- Okabe–Ito, volle tint: alleen voor kleine accenten (ringen, stippen, randjes) ---- */
  --c-orange: #e69f00;
  --c-skyblue: #56b4e9;
  --c-bluishgreen: #009e73;
  --c-yellow: #f0e442;
  --c-blue: #0072b2;
  --c-vermillion: #d55e00;
  --c-reddishpurple: #cc79a7;
  --c-black: #3d4451;

  /* ---- Lidkleuren: fill (avatar/chip-vlak), tint (kaartachtergrond), ink (tekst erop) ---- */
  --m-orange: #e69f00;
  --m-orange-fill: #f5d999;
  --m-orange-tint: #fcf2db;
  --m-orange-ink: #78570c;
  --m-skyblue: #56b4e9;
  --m-skyblue-fill: #bbe1f6;
  --m-skyblue-tint: #e7f5fc;
  --m-skyblue-ink: #37647c;
  --m-bluishgreen: #009e73;
  --m-bluishgreen-fill: #99d8c7;
  --m-bluishgreen-tint: #dbf1eb;
  --m-bluishgreen-ink: #0c6149;
  --m-yellow: #d9cc1f;
  --m-yellow-fill: #f9f4b3;
  --m-yellow-tint: #fdfbe5;
  --m-yellow-ink: #706b28;
  --m-blue: #0072b2;
  --m-blue-fill: #99c7e0;
  --m-blue-tint: #dbebf4;
  --m-blue-ink: #0a527a;
  --m-vermillion: #d55e00;
  --m-vermillion-fill: #eebf99;
  --m-vermillion-tint: #f9e8db;
  --m-vermillion-ink: #83400a;
  --m-reddishpurple: #cc79a7;
  --m-reddishpurple-fill: #ebc9dc;
  --m-reddishpurple-tint: #f8ecf3;
  --m-reddishpurple-ink: #774b62;
  --m-black: #3d4451;
  --m-black-fill: #b1b4b9;
  --m-black-tint: #e4e5e7;
  --m-black-ink: #3d4451;

  /* ---- Neutralen (warm, rustig) ---- */
  --surface-canvas: #f6f4ef;
  /* Zelfde kleur, volledig doorzichtig: voor zachte randen (verloop zonder grijze zweem). */
  --surface-canvas-clear: rgba(246, 244, 239, 0);
  --surface-panel: #ffffff;
  --surface-panel-clear: rgba(255, 255, 255, 0);
  --surface-sunken: #efece6;
  --surface-sunken-clear: rgba(239, 236, 230, 0);
  --surface-hover: #f1eee8;
  --surface-pressed: #e8e4dc;
  --border-subtle: #ece8e0;
  --border: #ddd8ce;
  --border-strong: #8f897e;
  --text: #23211d;
  --text-muted: #5f5a52;
  --text-subtle: #6b655b;
  --text-on-accent: #ffffff;
  --scrim: rgba(35, 33, 29, 0.36);

  /* ---- Actie en semantiek (gedempt) ---- */
  --accent: #1f6598;
  --accent-hover: #185482;
  --accent-pressed: #13476f;
  --accent-tint: #e6eff6;
  /* Focus (WCAG 1.4.11, >= 3:1 op panel en canvas): het accent, met 2 px lucht (outline-offset). */
  --focus-ring: #1f6598;
  --success: #2a7353;
  --success-tint: #eaf1ee;
  --warning: #8f5500;
  --warning-tint: #f4eee6;
  --danger: #a8401a;
  --danger-tint: #f6ece8;
  --info: #28699a;
  --info-tint: #eaf0f5;
  --celebrate: #e69f00;

  /* ---- Typografie ---- */
  --font:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 650;
  --line-tight: 1.15;
  --line-normal: 1.45;
  /* web (16 px basis) */
  --text-xs: 13px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  /* kiosk far-field (ONTWERP.md §7.1): body >= 24, titels >= 32, Nu/Straks 48, klok 64 */
  --kiosk-text: 24px;
  --kiosk-text-lg: 32px;
  --kiosk-title: 48px;
  --kiosk-countdown: 64px;
  --clock-size: 64px;
  --glance-clock-size: 120px;
  --font-size: 20px;
  --font-size-large: 26px;
  --font-size-kid: 24px;
  --font-size-title: 32px;

  /* ---- Ruimte: 8 px-raster (4 = halve stap) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;

  /* ---- Vormen ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius: var(--radius-md);

  /* ---- Diepte (statisch; nooit animeren, §12.2) ---- */
  --shadow-1: 0 1px 2px rgba(35, 33, 29, 0.06), 0 1px 1px rgba(35, 33, 29, 0.04);
  --shadow-2: 0 2px 4px rgba(35, 33, 29, 0.05), 0 6px 16px rgba(35, 33, 29, 0.07);
  --shadow-3: 0 8px 24px rgba(35, 33, 29, 0.1), 0 16px 40px rgba(35, 33, 29, 0.08);

  /* ---- Beweging: alleen opacity/transform, <= 200 ms ---- */
  --dur-fast: 120ms;
  --dur: 160ms;
  --dur-slow: 200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Maten en doelen ---- */
  --touch-min: 44px;
  --big-touch: 72px;
  --kid-touch: 100px;
  --rail-tile: 100px;
  --header-h: 96px;
  --now-strip-h: 96px;
  --allday-band-h: 44px;
  --hour-row-h: 64px;
  --kid-gap-parent: 16px;

  /* ---- Lagen ---- */
  --z-base: 0;
  --z-sticky: 10;
  --z-overlay: 40;
  --z-dialog: 50;
  --z-toast: 60;
  /* Oproep van een herinnering (0021): boven feestkaart, toast en rustscherm (release-b r1). */
  --z-call: 70;
}

/* Avond: licht op donker, gedempt; lidkleuren als donkere tint + lichte ink. */
/* De nacht erft dit blok (donkere lidkleuren) en dimt daarna verder. */
[data-theme='dark'],
[data-theme='night'] {
  --c-black: #969aa1;
  --m-orange-fill: #775914;
  --m-orange-tint: #45391e;
  --m-orange-ink: #f5d794;
  --m-skyblue-fill: #37637d;
  --m-skyblue-tint: #283e4c;
  --m-skyblue-ink: #b8e0f6;
  --m-bluishgreen-fill: #105948;
  --m-bluishgreen-tint: #173935;
  --m-bluishgreen-ink: #85d0bc;
  --m-yellow: #f0e442;
  --m-yellow-fill: #6b6729;
  --m-yellow-tint: #47472b;
  --m-yellow-ink: #fdfbe5;
  --m-blue: #3d95c9;
  --m-blue-fill: #104564;
  --m-blue-tint: #173041;
  --m-blue-ink: #a9d2ea;
  --m-vermillion-fill: #703c14;
  --m-vermillion-tint: #422c1e;
  --m-vermillion-ink: #eaaf80;
  --m-reddishpurple-fill: #6c4860;
  --m-reddishpurple-tint: #40323f;
  --m-reddishpurple-ink: #e7bfd5;
  --m-black: #969aa1;
  --m-black-fill: #3a3f48;
  --m-black-tint: #262a31;
  --m-black-ink: #d3d5d9;

  --surface-canvas: #15171b;
  --surface-canvas-clear: rgba(21, 23, 27, 0);
  --focus-ring: #56b4e9;
  --surface-panel: #1d2025;
  --surface-panel-clear: rgba(29, 32, 37, 0);
  --surface-sunken: #111316;
  --surface-sunken-clear: rgba(17, 19, 22, 0);
  --surface-hover: #252930;
  --surface-pressed: #2c3139;
  --border-subtle: #262a31;
  --border: #343941;
  --border-strong: #7a7f88;
  --text: #e4dfd6;
  --text-muted: #a8a296;
  --text-subtle: #9d978b;
  --text-on-accent: #15171b;
  --scrim: rgba(0, 0, 0, 0.55);

  --accent: #7ab6de;
  --accent-hover: #93c5e6;
  --accent-pressed: #a9d2ea;
  --accent-tint: #243442;
  --success: #6cc39c;
  --success-tint: #1f3029;
  --warning: #e3a74d;
  --warning-tint: #34291a;
  --danger: #ef8a64;
  --danger-tint: #3a2620;
  --info: #7ab6de;
  --info-tint: #243442;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* Nacht: bijna zwart en gedimd (ONTWERP.md §7.2 Nacht); geen verzadigde vlakken. */
[data-theme='night'] {
  --surface-canvas: #08090a;
  --surface-canvas-clear: rgba(8, 9, 10, 0);
  --surface-panel: #0f1113;
  --surface-panel-clear: rgba(15, 17, 19, 0);
  --surface-sunken: #060708;
  --surface-sunken-clear: rgba(6, 7, 8, 0);
  --surface-hover: #15171a;
  --surface-pressed: #1b1e21;
  --border-subtle: #16181b;
  --border: #1f2226;
  --border-strong: #4a4e55;
  --text: #8a8479;
  --text-muted: #6e6a62;
  --text-subtle: #6e6a62;
  --text-on-accent: #08090a;
  --accent: #5d7f97;
  --accent-tint: #121a20;
  --success: #4f7f69;
  --warning: #8f7445;
  --danger: #8f5f4c;
  --celebrate: #8f7445;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
}

/* Oude namen (sprint 1) blijven werken en wijzen naar de nieuwe tokens. Ze staan ook op elk
   element met data-theme, zodat een thema op een deelboom (bv. het kiosk-nachtgezicht) meeschakelt. */
:root,
[data-theme] {
  --bg: var(--surface-canvas);
  --bg-panel: var(--surface-panel);
  --fg: var(--text);
  --fg-muted: var(--text-muted);
  --line: var(--border);
  --ok: var(--success);
}

/* Rustige beweging: systeeminstelling of de apparaatinstelling "rustig" (§9 Feedback). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}

[data-motion='calm'] {
  --dur-fast: 1ms;
  --dur: 1ms;
  --dur-slow: 1ms;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--surface-canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--font-size);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

button {
  font: inherit;
}

/* Visueel verborgen, wel voorgelezen. */
.fb-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;
}

@media (prefers-color-scheme: dark) {
  :root {
  --c-black: #969aa1;
  --m-orange-fill: #775914;
  --m-orange-tint: #45391e;
  --m-orange-ink: #f5d794;
  --m-skyblue-fill: #37637d;
  --m-skyblue-tint: #283e4c;
  --m-skyblue-ink: #b8e0f6;
  --m-bluishgreen-fill: #105948;
  --m-bluishgreen-tint: #173935;
  --m-bluishgreen-ink: #85d0bc;
  --m-yellow: #f0e442;
  --m-yellow-fill: #6b6729;
  --m-yellow-tint: #47472b;
  --m-yellow-ink: #fdfbe5;
  --m-blue: #3d95c9;
  --m-blue-fill: #104564;
  --m-blue-tint: #173041;
  --m-blue-ink: #a9d2ea;
  --m-vermillion-fill: #703c14;
  --m-vermillion-tint: #422c1e;
  --m-vermillion-ink: #eaaf80;
  --m-reddishpurple-fill: #6c4860;
  --m-reddishpurple-tint: #40323f;
  --m-reddishpurple-ink: #e7bfd5;
  --m-black: #969aa1;
  --m-black-fill: #3a3f48;
  --m-black-tint: #262a31;
  --m-black-ink: #d3d5d9;

  --surface-canvas: #15171b;
  --surface-canvas-clear: rgba(21, 23, 27, 0);
  --focus-ring: #56b4e9;
  --surface-panel: #1d2025;
  --surface-panel-clear: rgba(29, 32, 37, 0);
  --surface-sunken: #111316;
  --surface-sunken-clear: rgba(17, 19, 22, 0);
  --surface-hover: #252930;
  --surface-pressed: #2c3139;
  --border-subtle: #262a31;
  --border: #343941;
  --border-strong: #7a7f88;
  --text: #e4dfd6;
  --text-muted: #a8a296;
  --text-subtle: #9d978b;
  --text-on-accent: #15171b;
  --scrim: rgba(0, 0, 0, 0.55);

  --accent: #7ab6de;
  --accent-hover: #93c5e6;
  --accent-pressed: #a9d2ea;
  --accent-tint: #243442;
  --success: #6cc39c;
  --success-tint: #1f3029;
  --warning: #e3a74d;
  --warning-tint: #34291a;
  --danger: #ef8a64;
  --danger-tint: #3a2620;
  --info: #7ab6de;
  --info-tint: #243442;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

/* Verkoopsite: dezelfde rustige stijl als de app. De kleuren, ruimtes en vormen komen uit
   packages/ui-core/src/tokens.css (de build zet dat bestand ervoor en maakt van het avondthema
   een prefers-color-scheme: dark-blok). Alleen systeemlettertypen, geen lettertypebestanden.
   Maten in rem, zodat 200% zoom en 320 px breed werken zonder horizontaal scrollen. */

html {
  font-size: 100%;
  scroll-behavior: auto;
}

body {
  font-size: 1.125rem;
  line-height: 1.5;
  background: var(--surface-canvas);
  color: var(--text);
  overflow-wrap: break-word;
  /* Korte pagina's (Over, Contact): de voet staat onderaan, geen lege band eronder. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body > main {
  flex: 1 0 auto;
}

img,
svg {
  max-width: 100%;
}

img {
  display: block;
  height: auto;
}

h1,
h2,
h3 {
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
}

h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-hover);
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

main:focus {
  outline: none;
}

.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;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--surface-panel);
  color: var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
}

.skip:focus {
  top: 1rem;
}

.wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 40rem) {
  .wrap {
    padding: 0 1.5rem;
  }
}

.lead {
  font-size: 1.1875rem;
  color: var(--text-muted);
  max-width: 42rem;
}

.narrow {
  max-width: 42rem;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.note,
.micro {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.micro {
  max-width: 30rem;
  margin-top: 0.75rem;
}

/* ---- Knoppen ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.375rem;
  border-radius: var(--radius-pill);
  font-weight: 650;
  text-decoration: none;
  line-height: 1.2;
  border: 2px solid transparent;
}

.btn .icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--text-on-accent);
}

.btn-secondary {
  background: var(--surface-panel);
  color: var(--accent);
  border-color: var(--border);
}

.btn-small {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.link-arrow,
.link-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  font-weight: 600;
}

.link-arrow .icon,
.link-back .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

/* ---- Kop ---- */
.site-header {
  position: relative;
  background: var(--surface-canvas);
  border-bottom: 1px solid var(--border-subtle);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 750;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  margin-right: auto;
}

.mark {
  width: 2rem;
  height: 2rem;
  flex: none;
}

.mark-bg {
  fill: var(--accent);
}

.mark-fg {
  stroke: var(--text-on-accent);
}

.nav-desktop {
  display: none;
}

.nav-desktop ul,
.nav-mobile ul,
.lang-switch,
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-desktop ul {
  display: flex;
  gap: 0.25rem;
}

.nav-desktop a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 550;
  border-radius: var(--radius-sm);
}

.nav-desktop a:hover {
  background: var(--surface-hover);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-cta {
  display: none;
}

.lang-switch {
  display: flex;
  gap: 0.125rem;
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 650;
  font-size: 0.9375rem;
  border-radius: var(--radius-sm);
}

.lang-switch a[aria-current='true'] {
  color: var(--text);
  background: var(--surface-sunken);
}

.nav-mobile summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-panel);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.nav-mobile summary::-webkit-details-marker {
  display: none;
}

.nav-mobile[open] summary {
  background: var(--surface-sunken);
}

/* Het menu valt open onder de kop, over de pagina heen; de knop "Menu" blijft op zijn plek
   (rechts in de kop), zodat je hem om te sluiten niet hoeft te zoeken. */
.nav-mobile nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  padding: 0.5rem 1rem 1rem;
  background: var(--surface-canvas);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-3);
}

@media (min-width: 40rem) {
  .nav-mobile nav {
    padding: 0.5rem 1.5rem 1rem;
  }
}

.nav-mobile nav a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 0.25rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 550;
  border-bottom: 1px solid var(--border-subtle);
}

.nav-mobile .btn {
  margin-top: 1rem;
}

@media (min-width: 40rem) {
  .header-cta {
    display: inline;
  }
}

@media (min-width: 64rem) {
  .nav-desktop {
    display: block;
  }

  .nav-mobile {
    display: none;
  }

  .brand {
    margin-right: 0.5rem;
  }

  .header-actions {
    margin-left: auto;
  }
}

/* ---- Secties ---- */
.section {
  padding: 3.5rem 0;
}

@media (min-width: 48rem) {
  .section {
    padding: 5rem 0;
  }
}

.section-panel {
  background: var(--surface-panel);
}

.section-sunken {
  background: var(--surface-sunken);
}

.section h2 + .lead {
  margin-bottom: 2rem;
}

.pill {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--success-tint);
  color: var(--success);
  font-weight: 650;
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}

/* ---- Hero ---- */
.hero {
  padding: 2.5rem 0 3.5rem;
}

.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.5rem;
}

.hero-visual {
  position: relative;
  padding-bottom: 2rem;
}

.hero-visual > .frame-tablet {
  margin-right: 14%;
}

.hero-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26%;
  max-width: 10rem;
}

@media (min-width: 60rem) {
  .hero {
    padding: 4rem 0 5rem;
  }

  .hero-grid {
    grid-template-columns: 1fr 1.15fr;
    gap: 3.5rem;
  }
}

/* ---- Apparaatkaders (CSS, geen bitmap) ---- */
.shot {
  margin: 0;
}

.shot figcaption {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  text-align: center;
}

.frame-screen {
  overflow: hidden;
}

.frame-tablet .frame-screen {
  padding: 0.625rem;
  background: #2b2d31;
  border-radius: 1.25rem;
  box-shadow: var(--shadow-3);
}

.frame-tablet img {
  border-radius: 0.625rem;
}

/* Telefoon: nooit breder dan een echte telefoon, en het kader sluit om het beeld. */
.frame-phone {
  width: 100%;
  max-width: 18.75rem;
  margin-inline: auto;
}

.frame-phone img {
  width: 100%;
}

.frame-phone .frame-screen {
  padding: 0.375rem;
  background: #2b2d31;
  border-radius: 1.75rem;
  box-shadow: var(--shadow-3);
}

.frame-phone img {
  border-radius: 1.375rem;
}

.frame-browser {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.frame-bar {
  display: flex;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}

.frame-bar span {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--border);
}

/* ---- Herken je dit ---- */
.recognise {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.recognise li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface-canvas);
  border-radius: var(--radius-lg);
  font-size: 1.1875rem;
  font-weight: 600;
}

.recognise img {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
}

@media (min-width: 60rem) {
  .recognise {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Stappen ---- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.5rem;
}

.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 750;
}

.step p {
  color: var(--text-muted);
}

.step .shot {
  margin-top: 1.25rem;
}

@media (min-width: 60rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  /* Nummer, kop, tekst en beeld van de drie stappen op dezelfde hoogte, ook als een tekst een
     regel korter is (subgrid; zonder subgrid gewoon onder elkaar zoals voorheen). */
  @supports (grid-template-rows: subgrid) {
    .steps {
      grid-template-rows: repeat(4, auto);
      row-gap: 0;
    }

    .step {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      align-content: start;
    }

    .step .shot {
      align-self: start;
    }
  }
}

/* ---- Kaarten per huishouden ---- */
.cards {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.card {
  display: grid;
  /* minmax(0, 1fr): een lang woord ("Studentenhuis") mag de kolom niet breder maken dan het
     scherm (WCAG 1.4.12 tekstafstand op 320 px). */
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 1rem;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
  color: var(--text);
  text-decoration: none;
}

.section-panel .card {
  background: var(--surface-canvas);
}

.card:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.card-art {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.card-art .type-art {
  width: 6rem;
  height: auto;
}

.card-title {
  font-size: 1.1875rem;
  margin: 0.25rem 0 0.25rem;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.card-text {
  font-size: 1rem;
  color: var(--text-muted);
}

/* ---- Onderdelen ---- */
.module-groups {
  display: grid;
  gap: 2.5rem;
}

.module-group {
  display: grid;
  gap: 1.5rem;
  align-items: start;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.module-group .note {
  margin-top: -0.25rem;
}

.module-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.module-list li {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}

.module-list strong {
  display: block;
}

.module-desc {
  display: block;
  color: var(--text-muted);
  font-size: 1rem;
}

.module-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  color: var(--accent);
}

.module-group:not(.has-shot) .module-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

/* Telefoon: de onderdelen zonder schermafbeeldingen, anders wordt de beginpagina erg lang (review
   ronde 1). Het bord zelf staat al in de kop, bij "Zo werkt het" en bij "Een bord dat je in één
   blik leest". Luie beelden met display: none worden ook niet geladen. */
@media (max-width: 39.99rem) {
  .module-group .shot {
    display: none;
  }
}

@media (min-width: 60rem) {
  .module-group.has-shot {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

.soon {
  margin-top: 2.5rem;
}

.chips {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-panel);
  font-size: 1rem;
}

.section-panel .chips li {
  background: var(--surface-canvas);
}

.tag {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--warning-tint);
  color: var(--warning);
  font-size: 0.8125rem;
  font-weight: 650;
}

/* ---- Twee kolommen ---- */
.split {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 60rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
}

.shots-2 {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 40rem) {
  .shots-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.shots-col {
  display: grid;
  gap: 1.5rem;
}

.checks,
.know {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.checks li,
.know li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.checks .icon {
  color: var(--success);
  margin-top: 0.125rem;
}

.know .icon {
  color: var(--info);
  margin-top: 0.125rem;
}

/* ---- Waarden ---- */
.values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.values li {
  display: flex;
  gap: 0.875rem;
}

.values .icon {
  color: var(--success);
  margin-top: 0.125rem;
}

.values h3 {
  font-size: 1.125rem;
  margin: 0 0 0.25rem;
}

.values p {
  margin: 0;
  color: var(--text-muted);
}

.values-line {
  margin: 2.5rem 0 1rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--accent-tint);
  max-width: 48rem;
}

/* ---- Vragen ---- */
.faq {
  max-width: 48rem;
  display: grid;
  gap: 0.75rem;
}

.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-canvas);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary .icon {
  color: var(--text-muted);
}

.faq details[open] summary .icon {
  transform: rotate(180deg);
}

.faq details p {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  color: var(--text-muted);
}

/* ---- Meedoen ---- */
.join-box {
  text-align: center;
}

.join-box .lead,
.join-box .micro {
  margin-left: auto;
  margin-right: auto;
}

.join {
  background: var(--accent-tint);
}

.question {
  margin-top: 1.5rem;
}

/* ---- Prijstabel (alleen als prijzenTonen) ---- */
.table-wrap {
  overflow-x: auto;
}

.prices {
  border-collapse: collapse;
  width: 100%;
  font-size: 1rem;
}

.prices caption {
  text-align: left;
  font-weight: 650;
  margin-bottom: 0.5rem;
}

.prices th,
.prices td {
  text-align: left;
  vertical-align: top;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

/* ---- Pagina's ---- */
.page-head {
  padding: 2.5rem 0 1rem;
}

.page-head-grid {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.page-art {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.page-art .type-art {
  width: 11rem;
  height: auto;
  padding: 0.75rem;
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
}

@media (min-width: 60rem) {
  .page-head {
    padding: 4rem 0 1.5rem;
  }

  .page-head-grid {
    grid-template-columns: 1.4fr 1fr;
  }
}

.prose {
  max-width: 46rem;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

.prose h2 {
  font-size: 1.5rem;
  margin-top: 2.25rem;
}

.details {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 2rem;
}

.details div {
  display: flex;
  gap: 1rem;
}

.details dt {
  min-width: 8rem;
  color: var(--text-muted);
}

.details dd {
  margin: 0;
}

/* Privacyverklaring: per verwerking vijf punten (art. 13 AVG); op de telefoon onder elkaar. */
.processing {
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
}

.processing div {
  flex-direction: column;
  gap: 0.125rem;
}

.processing dt {
  min-width: 0;
  font-weight: 600;
}

@media (min-width: 40rem) {
  .processing div {
    flex-direction: row;
    gap: 1rem;
  }

  .processing dt {
    min-width: 9rem;
  }
}

.notfound {
  text-align: center;
  padding-bottom: 4rem;
}

.notfound .type-art {
  margin: 0 auto 1.5rem;
  width: 10rem;
  height: auto;
}

.notfound .lead {
  margin-left: auto;
  margin-right: auto;
}

.notfound-en {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.notfound-en h2 {
  font-size: 1.25rem;
}

.signup {
  margin: 1.5rem 0;
}

/* ---- Voet ---- */
.site-footer {
  padding: 3rem 0 2rem;
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  font-size: 1rem;
}

.footer-grid {
  display: grid;
  gap: 1.5rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 650;
}

.footer-note {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-bottom: 0.5rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.credits {
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

/* ---- Beweging: alleen een zachte overgang, en niet bij "minder beweging" ---- */
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .card,
  .nav-desktop a {
    transition:
      background-color var(--dur) var(--ease-out),
      border-color var(--dur) var(--ease-out);
  }
}

/* ---- Donker: kaders iets lichter zodat ze loskomen van de achtergrond ---- */
@media (prefers-color-scheme: dark) {
  .frame-tablet .frame-screen,
  .frame-phone .frame-screen {
    background: #3a3d44;
  }
}

@media print {
  .site-header,
  .nav-mobile,
  .join,
  .site-footer .lang-switch {
    display: none;
  }
}