/* Meekijken: vlak en warm. Een zandkleurige ondergrond met witte panelen en een dunne rand, geen
   schaduwen, verlopen of doorschijnende lagen. Tekst en hoofdknoppen in warme inkt; oranje alleen als
   klein accent (beeldmerk, wie wacht), groen voor "je deelt". Kleur is betekenis, nooit een vlak.
   Lettertypes van het systeem; de CSP laat geen externe toe. */

:root {
  --grond: #F4ECE3;
  --paneel: #FFFFFF;
  --paneel-hoog: #FFFFFF;
  --tegel: #F7F0E8;
  --rand: #E8DACC;
  --tegel-hover: #EFE4D8;
  --vlak: #FFFBF7;
  --inkt: #241A14;
  --inkt-zacht: #3A2C22;
  --op-inkt: #FFF7F0;
  --zacht: #6A584C;
  --lijn: rgba(84, 52, 30, .14);
  --lijn-zacht: rgba(84, 52, 30, .08);
  --accent: #E9762F;
  --accent-licht: #F6A15B;
  --accent-tekst: #A44C14;
  --groen: #1D8A50;
  --groen-licht: #2FB36C;
  --fout: #BE3A2B;
  --pauze: #F7C28E;
  --op-pauze: #4A260C;
  --podium: #0E0B09;
  --op-donker: #F7EFE8;
  --donker-zacht: #B9A79A;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cijfers: "SF Pro Display", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-klein: 10px;
  --r: 16px;
  --r-groot: 22px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --zijkant: 300px;
  --midden: 640px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grond: #17110D;
    --paneel: #221A15;
    --paneel-hoog: #2A211B;
    --tegel: #2C231D;
    --rand: #3B2F27;
    --tegel-hover: #362B24;
    --vlak: #2A1F18;
    --inkt: #F7EDE5;
    --inkt-zacht: #E7D8CC;
    --op-inkt: #1E1510;
    --zacht: #C7B3A4;
    --lijn: rgba(255, 230, 210, .14);
    --lijn-zacht: rgba(255, 230, 210, .08);
    --accent-tekst: #F6A15B;
    --groen: #2FB36C;
    --fout: #FF8A76;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--accent);
  scrollbar-color: rgba(84, 52, 30, .25) transparent;
}
::selection { background: rgba(233, 118, 47, .28); color: var(--inkt); }
h1, h2 { font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: 30px; }
h2 { font-size: 19px; }
p { margin: 0; }
a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-klein); }


/* --- Merk: klein bovenaan de middenkolom, geen menubalk (elke pagina heeft een eigen weg terug) --- */
.merk {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 18px; letter-spacing: -.02em;
  color: inherit; text-decoration: none;
}
.merkteken {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-klein);
  background: var(--accent);
  color: #fff;
}
.merkteken svg { width: 18px; height: 18px; }

/* --- Drie kolommen: advertentie, functie, privacy. Smal: functie, privacy, advertentie. --- */
.drieluik {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 28px 16px 48px;
  justify-items: center;
  max-width: 1440px;
  margin: 0 auto;
}
.pagina { width: 100%; max-width: var(--midden); display: flex; flex-direction: column; gap: 18px; }
.drieluik .deelnemers { order: 1; }
.drieluik .privacy { order: 2; }
.drieluik .reclame { order: 3; }
.zijkant { width: 100%; max-width: var(--midden); }
@media (min-width: 1200px) {
  .drieluik {
    grid-template-columns: var(--zijkant) minmax(0, 1fr) var(--zijkant);
    align-items: start;
    gap: 36px;
    padding: 32px 32px;
  }
  .drieluik .reclame { order: 0; grid-column: 1; grid-row: 1; }
  .drieluik .pagina { grid-column: 2; grid-row: 1; }
  .drieluik .privacy, .drieluik .deelnemers { grid-column: 3; grid-row: 1; }
  .zijkant { position: sticky; top: 32px; max-width: var(--zijkant); }
  /* Alles in één scherm: de advertentie schaalt mee met de hoogte (1 op 2) */
  .drieluik .advertentie { width: auto; }
  .drieluik .advertentie img { width: auto; max-width: 100%; max-height: calc(100dvh - 114px); }
}

/* --- Panelen: wit met een dunne rand --- */
.kaart, .zijkant.privacy {
  width: 100%;
  background: var(--paneel);
  border: 1px solid var(--rand);
  border-radius: var(--r-groot);
  padding: 28px;
  display: flex; flex-direction: column; gap: 20px;
}
@media (max-width: 480px) { .kaart, .zijkant.privacy { padding: 20px; } }
.kop-blok { display: flex; flex-direction: column; gap: 6px; }
.uitleg { color: var(--zacht); max-width: 60ch; }
.uitleg.klein { font-size: 14px; }
.voet { color: var(--zacht); font-size: 14px; text-align: center; }
.knop.terug { align-self: flex-start; }

/* --- Startkeuze: twee tegels --- */
.keuzes { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .keuzes { grid-template-columns: 1fr 1fr; } }
.keuze {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 30px;
  min-height: 180px;
  padding: 22px;
  border: 1px solid var(--rand);
  border-radius: var(--r);
  background: var(--tegel);
  color: var(--inkt);
  font: inherit; text-align: left; text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.keuze:hover { background: var(--tegel-hover); }
.keuze:active { transform: translateY(0) scale(.99); }
.keuze .picto {
  display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 14px;
  color: #fff;
}
.keuze.delen .picto { background: var(--accent); }
.keuze.kijken .picto { background: var(--inkt); }
@media (prefers-color-scheme: dark) { .keuze.kijken .picto { background: var(--inkt); color: var(--op-inkt); } }
.keuze .picto svg { width: 24px; height: 24px; }
.keuze .pijl { position: absolute; top: 26px; right: 22px; width: 22px; height: 22px; color: var(--zacht); transition: transform .3s var(--ease), color .3s var(--ease); }
.keuze:hover .pijl { transform: translateX(4px); color: var(--inkt); }
.keuze .titel { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.keuze .sub { display: block; margin-top: 6px; font-size: 14px; color: var(--zacht); }

/* --- Velden --- */
.veld { display: flex; flex-direction: column; gap: 8px; }
.veld label { font-size: 14px; font-weight: 600; color: var(--zacht); }
/* Kleine kapitalen voor de naam van een blok, zoals op een dashboard */
.kopje { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--zacht); }
.veld input {
  height: 46px;
  border: 1px solid var(--rand);
  border-radius: var(--r-klein);
  background: var(--tegel);
  color: var(--inkt);
  font: inherit;
  padding: 0 14px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.veld input:hover { background: var(--tegel-hover); }
.veld input:focus { outline: none; background: var(--vlak); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(233, 118, 47, .2); }

/* De code invullen: grote donkere cijfers op een glazen tegel */
.veld input.code {
  height: 86px;
  border-radius: var(--r);
  color: var(--inkt);
  font: 700 46px/1 var(--cijfers);
  font-variant-numeric: tabular-nums;
  letter-spacing: .3em;
  text-indent: .3em;
  text-align: center;
}
.veld input.code::placeholder { color: rgba(106, 88, 76, .35); }

/* --- Knoppen --- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--tegel);
  color: var(--inkt);
  font: 600 15px/1 var(--sans);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
}
.knop:hover { background: var(--tegel-hover); }
.knop:active { transform: scale(.98); }
.knop:disabled { opacity: .45; cursor: default; }
.knop.hoofd { background: var(--inkt); border-color: var(--inkt); color: var(--op-inkt); }
.knop.hoofd:hover { background: var(--inkt-zacht); border-color: var(--inkt-zacht); }
.knop.gevaar { color: var(--fout); }
.knop.zacht { background: transparent; border-color: var(--lijn); }
.knop.zacht:hover { background: var(--tegel); }
.knop svg { width: 18px; height: 18px; flex: none; }
.knop.klein { height: 34px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.knop.klein svg { width: 16px; height: 16px; }
.knop.icoon { width: 34px; padding: 0; }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.knoppen .knop.hoofd { flex: 1; }
#kies, #naar-kijken { height: 56px; font-size: 17px; }
#stap-start .knoppen .knop { height: 56px; border-radius: 14px; }

/* --- Schakelaar: kijkers meteen toelaten --- */
.schakelaar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--rand); border-radius: var(--r);
  background: var(--tegel);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.schakelaar:hover { background: var(--tegel-hover); }
.schakelaar input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.schuif {
  position: relative; flex: none;
  width: 46px; height: 28px; border-radius: 999px;
  background: rgba(84, 52, 30, .18);
  transition: background-color .25s var(--ease);
}
.schuif::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  transition: transform .25s var(--ease);
}
.schakelaar input:checked + .schuif { background: var(--inkt); }
.schakelaar input:checked + .schuif::after { transform: translateX(18px); }
@media (prefers-color-scheme: dark) { .schakelaar input:checked + .schuif::after { background: #241A14; } }
.schakelaar input:focus-visible + .schuif { outline: 2px solid var(--accent); outline-offset: 3px; }
.schakel-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.schakel-tekst strong { font-size: 15px; font-weight: 600; }
.schakel-tekst span { font-size: 14px; color: var(--zacht); }

/* --- Meldingen --- */
.melding {
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--fout) 30%, transparent);
  background: color-mix(in srgb, var(--fout) 8%, var(--paneel-hoog));
  color: var(--fout);
  font-size: 15px; font-weight: 500;
}
.melding.rustig, .melding.doel { border-color: var(--rand); background: var(--tegel); color: var(--inkt); font-weight: 400; }
.melding.doel { font-weight: 600; }

/* --- Ingelogd op een klantpagina --- */
.ingelogd {
  display: flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 6px 14px; border-radius: 999px;
  background: var(--paneel); border: 1px solid var(--rand);
  font-size: 14px; color: var(--inkt);
}
.ingelogd svg { width: 16px; height: 16px; color: var(--accent-tekst); }
.ingelogd a { margin-left: 6px; color: var(--zacht); }

/* --- Vaste schermen in de buurt --- */
.schermknoppen { display: flex; flex-direction: column; gap: 10px; }
.schermknop {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--rand); border-radius: var(--r);
  background: var(--paneel-hoog); color: var(--inkt);
  font: inherit; text-align: left; cursor: pointer;
  transition: transform .25s var(--ease);
}
.schermknop:hover { background: var(--tegel-hover); }
.schermknop:active { transform: scale(.99); }
.schermknop svg {
  width: 44px; height: 44px; padding: 11px; flex: none; border-radius: 12px; color: #fff;
  background: var(--accent);
}
.schermknop .titel { display: block; font-weight: 700; font-size: 17px; }
.schermknop .sub { display: block; font-size: 13px; color: var(--zacht); }

/* --- Delen --- */
.stapel { width: 100%; display: flex; flex-direction: column; gap: 18px; }

/* Het deelpaneel: status, code, QR-code en bediening in één paneel */
.vertrek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "live live" "veld qr" "bed bed";
  gap: 14px 24px;
  padding: 24px;
  border-radius: var(--r-groot);
  background: var(--paneel);
  border: 1px solid var(--rand);
  color: var(--inkt);
}
@media (max-width: 600px) { .vertrek { grid-template-columns: minmax(0, 1fr); grid-template-areas: "live" "veld" "qr" "bed"; } }
.vertrek > * { min-width: 0; }
.vertrek > .veld { grid-area: veld; }
.vertrek > .qr { grid-area: qr; }
.vertrek > .voorbeeld { grid-area: beeld; }

/* Compact met voorbeeld: links de code klein, rechts wat je deelt; het paneel groeit niet in de hoogte */
.vertrek.met-voorbeeld { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "live live" "veld beeld" "qr beeld" "bed bed"; }
@media (max-width: 600px) { .vertrek.met-voorbeeld { grid-template-columns: minmax(0, 1fr); grid-template-areas: "live" "beeld" "veld" "bed"; } .vertrek.met-voorbeeld .qr { display: none; } }
.met-voorbeeld .groot-code { gap: 4px; }
.met-voorbeeld .groot-code .tussen { width: 6px; }
.met-voorbeeld .flap { width: 30px; height: 42px; font-size: 25px; border-radius: 8px; }
.met-voorbeeld .veld > .uitleg, .met-voorbeeld #link { display: none; }
.met-voorbeeld .link-regel .knop { height: 34px; }
.met-voorbeeld .qr { width: 104px; height: 104px; padding: 7px; }

/* Status over de hele breedte: van een afstand zie je dat je live bent */
.live {
  grid-area: live;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -12px -12px 4px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--groen);
  color: #fff;
  font-size: 15px;
}
.live strong { font-weight: 700; }
.live-sub { opacity: .9; }
.live-sub::before { content: "·"; margin-right: 10px; }
.live-sub:empty { display: none; }
.lampje { position: relative; width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.lampje::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor;
  animation: puls 1.8s var(--ease) infinite;
}
@keyframes puls { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
.gepauzeerd .live { background: var(--pauze); color: var(--op-pauze); }
.gepauzeerd .lampje::after { animation: none; }
.vertrek .uitleg { font-size: 14px; }

/* De code: grote donkere cijfers op vlakke tegels, met een zachte scharnierlijn */
.groot-code { display: flex; gap: 6px; align-items: center; perspective: 400px; }
.groot-code .tussen { width: 12px; }
.flap {
  position: relative;
  display: grid; place-items: center;
  width: clamp(40px, 9vw, 56px); height: clamp(56px, 12.5vw, 76px);
  border-radius: 12px;
  background: var(--tegel);
  border: 1px solid var(--rand);
  font: 700 clamp(32px, 7vw, 46px)/1 var(--cijfers);
  font-variant-numeric: tabular-nums;
  color: var(--inkt);
}
.flap::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px;
  background: var(--lijn);
}
.flap.klap { animation: klap .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes klap {
  0% { transform: rotateX(-88deg); opacity: .4; }
  100% { transform: rotateX(0); opacity: 1; }
}
/* Link en Kopieer op één regel; een te lange link wordt afgekapt, de knop blijft staan */
.link-regel { display: flex; gap: 8px; align-items: stretch; }
.link-regel .knop { flex: none; height: auto; }
.link-regel code {
  font: 14px var(--mono);
  color: var(--inkt);
  background: var(--tegel);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 8px 12px;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qr {
  width: 168px; height: 168px; padding: 12px;
  background: #fff; border: 1px solid var(--rand); border-radius: 14px;
  align-self: start;      /* bovenkant gelijk met de cijfers */
}
.qr svg { width: 100%; height: 100%; display: block; }

/* --- Bediening: een strook onderaan het paneel, icoon boven de tekst --- */
.bediening {
  grid-area: bed;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px;
  margin: 6px -8px -8px;
  padding-top: 12px;
  border-top: 1px solid var(--lijn-zacht);
}
.bedien {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 64px; padding: 8px 4px;
  border: 1px solid transparent; border-radius: 14px;
  background: transparent; color: var(--inkt);
  font: 600 13px/1.2 var(--sans); text-align: center;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.bedien svg { width: 20px; height: 20px; flex: none; }
.bedien:hover { background: var(--tegel); }
.bedien:active { transform: scale(.97); }
.bedien[aria-pressed="true"] { background: var(--tegel); border-color: var(--rand); color: var(--accent-tekst); }
.bedien.gevaar { color: var(--fout); }
.bedien.gevaar:hover { background: color-mix(in srgb, var(--fout) 8%, transparent); border-color: color-mix(in srgb, var(--fout) 20%, transparent); }
.bedien.hoofd { background: var(--inkt); color: var(--op-inkt); }
.bedien.hoofd:hover { background: var(--inkt-zacht); }
.voorbeeld {
  width: 100%; height: 100%; min-height: 200px; max-height: 320px;
  background: var(--podium);
  border-radius: 14px;
  object-fit: contain;
}

/* --- Wie kijkt mee: een vlakke lijst --- */
.deelnemers { display: flex; flex-direction: column; gap: 12px; }
.deelnemers h2 { display: flex; align-items: center; gap: 10px; }
.teller {
  min-width: 26px; height: 26px; padding: 0 8px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: var(--inkt); color: var(--op-inkt);
  font: 700 13px/1 var(--cijfers); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.kijkers {
  list-style: none; margin: 0; padding: 6px;
  border-radius: var(--r);
  background: var(--paneel);
  border: 1px solid var(--rand);
}
.kijkers li {
  position: relative;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 56px;
  padding: 10px 10px 10px 14px;
  border-radius: 12px;
}
.kijkers li + li { margin-top: 2px; }
.kijkers li + li::before { content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px; background: var(--lijn-zacht); }
.kijkers .wie { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kijkers .naam { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kijkers .meta { display: flex; align-items: center; gap: 6px; }
.kijkers .leeg { color: var(--zacht); justify-content: center; font-size: 14px; }
.kijkers .label { font-size: 12px; font-weight: 600; color: var(--zacht); border: 1px solid var(--lijn); border-radius: 999px; padding: 1px 8px; }
.kijkers .acties { flex-basis: 100%; display: flex; gap: 8px; padding-bottom: 2px; }
.kijkers .acties .knop { flex: 1; }
.kijkers .knop.gevaar { color: var(--inkt); }
.kijkers .knop.icoon { color: var(--zacht); }
.kijkers .knop.icoon:hover { color: var(--fout); }
/* Wie wacht: een lichtere tegel met een oranje label, zoals een status in een lijst */
.kijkers li.aanvraag { background: var(--tegel); }
.kijkers li.aanvraag + li::before, .kijkers li.aanvraag::before { display: none; }
.kijkers li.aanvraag .route {
  color: var(--accent-tekst); font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 999px; padding: 1px 9px;
}
.route { font-size: 13px; color: var(--zacht); white-space: nowrap; }
.route.direct { color: var(--groen); font-weight: 600; }
#meldingen { align-self: flex-start; }

/* --- Vraagvenster: een wit paneel boven een gedimde pagina --- */
.vraag {
  width: min(480px, calc(100% - 32px));
  padding: 26px;
  border: 1px solid var(--rand); border-radius: var(--r-groot);
  background: var(--paneel-hoog); color: var(--inkt);
}
.vraag[open] { display: flex; flex-direction: column; gap: 10px; }
.vraag::backdrop { background: rgba(50, 26, 10, .28); }
.vraag-knoppen { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* --- Kijken: het beeld vult het venster --- */
.podium {
  position: fixed; inset: 0; z-index: 10;
  background: var(--podium);
  display: flex; align-items: center; justify-content: center;
}
.podium video { width: 100%; height: 100%; object-fit: contain; background: var(--podium); transition: filter .3s var(--ease); }
/* Het laatste beeld blijft staan als de deler pauzeert: gedimd, zodat niemand denkt dat het live is */
video.gepauzeerd { filter: grayscale(1) brightness(.35); }
.balk {
  position: absolute; left: 50%; bottom: 20px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 16px;
  background: rgba(30, 22, 17, .72);
  border: 1px solid rgba(255, 235, 220, .12);
  color: var(--op-donker);
  border-radius: 999px;
  transition: opacity .3s var(--ease);
  max-width: calc(100% - 32px);
}
.balk.weg { opacity: 0; pointer-events: none; }
.balk .route { color: var(--donker-zacht); }
.balk .route.direct { color: var(--groen-licht); }
.balk .knop { background: transparent; color: var(--op-donker); border-color: rgba(255, 235, 220, .2); height: 36px; border-radius: 999px; }
.balk .knop:hover { background: rgba(255, 235, 220, .1); border-color: rgba(255, 235, 220, .4); }
.podium-melding {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--op-donker); text-align: center; padding: 24px;
  font-size: 17px;
}
.draai { width: 28px; height: 28px; color: var(--accent-licht); animation: draai 1s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }

/* --- Advertentie --- */
.reclame { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.label-reclame { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--zacht); }
/* Het plaatje kan van alles zijn, dus de stijl zit in de lijst eromheen: dezelfde witte rand en
   dunne lijn als de panelen, zodat elke advertentie in de pagina past. */
.advertentie {
  --ad-rand: 8px;
  position: relative;
  display: block; width: 100%; max-width: var(--zijkant);
  padding: var(--ad-rand);
  border-radius: var(--r-groot);
  background: var(--paneel);
  border: 1px solid var(--rand);
}
.advertentie:hover { border-color: var(--zacht); }
.advertentie img { display: block; width: 100%; height: auto; border-radius: calc(var(--r-groot) - var(--ad-rand)); }

/* --- Privacy en veiligheid --- */
.privacy { display: flex; flex-direction: column; gap: 16px; }
/* Breed: de privacy staat los in de kolom, zonder kaart, net als de advertentie links. Zo krijgt de
   tekst de volle breedte en past alles in één scherm. Smal blijft het een kaart. */
@media (min-width: 1200px) {
  .zijkant.privacy { padding: 4px 0 0; background: none; border: 0; border-radius: 0; }
}
.punten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.punten li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.punten li > svg {
  width: 32px; height: 32px; padding: 7px;
  border-radius: 10px;
  background: var(--tegel); border: 1px solid var(--rand);
  color: var(--accent-tekst);
}
.punten strong { display: block; font-size: 15px; line-height: 1.3; }
.punten p { font-size: 14px; color: var(--zacht); margin-top: 2px; }
.privacy .knop.zacht { align-self: flex-start; }

/* --- Hulp --- */
.hulp h2 { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.hulp h2 svg {
  width: 32px; height: 32px; padding: 7px;
  border-radius: 10px; background: var(--tegel); border: 1px solid var(--rand); color: var(--accent-tekst);
}
.hulp h2.los { margin-top: 12px; padding-top: 22px; border-top: 1px solid var(--lijn); }
.hulp ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: stap; }
.hulp ol li { position: relative; padding-left: 40px; counter-increment: stap; }
.hulp ol li::before {
  content: counter(stap);
  position: absolute; left: 0; top: -1px;
  display: grid; place-items: center;
  width: 27px; height: 27px;
  border-radius: 999px;
  background: var(--inkt);
  color: var(--op-inkt);
  font: 700 13px/1 var(--cijfers);
}
.tabblad { display: flex; flex-direction: column; gap: 16px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; background: var(--tegel); border: 1px solid var(--rand); border-radius: 14px; }
.tabs [role=tab] {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 12px;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--zacht);
  font: 600 14px/1 var(--sans);
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tabs [role=tab]:hover { color: var(--inkt); }
.tabs [role=tab] svg { width: 16px; height: 16px; }
.tabs [role=tab][aria-selected=true] { background: var(--vlak); color: var(--inkt); }
.tip {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 14px;
  background: var(--tegel); border: 1px solid var(--rand);
  font-size: 15px;
}
.tip svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent-tekst); }
.vragen { margin: 0; display: flex; flex-direction: column; }
.vragen dt { font-weight: 700; margin-top: 14px; }
.vragen dd { margin: 2px 0 0; color: var(--zacht); }

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