/*
  Deckhand, interface.

  Kleuren komen rechtstreeks uit het logo, bemonsterd uit het bestand zelf:
  diep marineblauw als vlak, wit als tekst, en de cyaan-blauw-paarse swoosh als
  accent. Dat verloop is het handelsmerk van het logo, dus het staat op de
  hoofdknop en nergens anders, een accent dat overal ligt, valt nergens op.

  Mobiel is het hoofdgeval, niet de uitzondering: de foto wordt met een telefoon
  gemaakt. De tabel wordt daar een kaartenlijst, de knoppen staan binnen
  duimbereik.

  Bewust geen webfonts van een externe server: dit moet op een beurs zonder wifi
  opstarten. Getallen staan in tabelcijfers, dat leest als een instrument.
*/

:root {
  /* Vlakken, van diep naar hoog */
  --diep:        #020C1C;
  --paneel:      #081426;
  --paneel-hoog: #0E1E36;
  --rand:        #17304F;
  --rand-zacht:  #0F2138;

  /* Tekst */
  --tekst:       #EAF2FF;
  --tekst-zacht: #9BB0CC;
  --tekst-dof:   #6B819E;

  /* Accent, uit de swoosh van het logo */
  --cyaan:  #1CBCFC;
  --blauw:  #1E8EFC;
  --paars:  #9952FA;
  --paars-diep: #7945F5;
  --verloop: linear-gradient(100deg, #1CBCFC 0%, #1E8EFC 45%, #9952FA 100%);

  /* Toestanden */
  --zeker-hoog:   #3DD9A0;
  --zeker-midden: #F2B441;
  --zeker-laag:   #FF6B6B;

  --kop-font:    Fraunces, Georgia, "Times New Roman", serif;
  --body-font:   "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --cijfer-font: ui-monospace, "SF Mono", Consolas, "Roboto Mono", monospace;

  --radius:       14px;
  --radius-klein: 10px;
}

* { box-sizing: border-box; }

/*
  Het hidden-attribuut moet altijd winnen.

  Zonder deze regel verliest hidden van elke eigen display-waarde, en dan blijft
  een blok staan terwijl de code denkt dat het verborgen is. Dat is hier al drie
  keer misgegaan: bij het uitlegdek, bij de eerdere opdrachten en bij het
  contactformulier. Nu kan het niet meer.
*/
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--body-font);
  /* Diepe achtergrond met twee zachte lichtvlekken. Vaste positie, zodat het
     licht blijft staan terwijl de pagina eronder doorschuift. */
  background:
    radial-gradient(120vw 80vh at 12% -10%, rgba(30, 142, 252, .16), transparent 60%),
    radial-gradient(90vw 70vh at 92% 8%, rgba(153, 82, 250, .12), transparent 62%),
    var(--diep);
  background-attachment: fixed;
  color: var(--tekst);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--kop-font); color: var(--tekst); font-weight: 600; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; line-height: 1.2; }
h2 { font-size: 1.15rem; }

code {
  font-family: var(--cijfer-font);
  background: var(--paneel);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: .1em .4em;
  font-size: .88em;
  color: var(--tekst-zacht);
}

/* ---------- Kop ---------- */

.kop {
  background: var(--paneel);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 20;
}

.kop-binnen {
  max-width: 1180px;
  margin: 0 auto;
  padding: .7rem 1rem;
  padding-top: calc(.7rem + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.merk { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }

/* Het teken is vrijstaand (teken-128.png, zonder eigen achtergrond) en draagt
   zijn eigen gloed. Geen filter hier: een filter op een kind van een plakkende
   kop laat het teken op iPhones wegvallen tijdens het scrollen. */
.merk-teken {
  width: 32px;
  height: 32px;
  flex: none;
  display: block;
  transform: translateZ(0);
}

.merk-naam {
  font-family: var(--kop-font);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tekst); /* terugval als een browser tekstclipping niet kent */
}

/*
  De lichtveeg over "Deckhand".

  Twee lagen boven elkaar, door de letters heen geknipt: onderop het verloop uit
  het logo, daarbovenop een klein rond lichtvlekje. Dat vlekje schuift van links
  naar rechts door één percentage te animeren.

  Een custom property kun je alleen vloeiend animeren als hij als percentage is
  aangemeld, vandaar de @property-regel. Kent een browser die niet, dan blijft
  het verloop gewoon staan zonder veeg. Dat is een acceptabele terugval.
*/
@property --veeg {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .merk-naam {
    background:
      radial-gradient(1.2em 1.2em at 50% 50%,
        transparent calc(var(--veeg) - 1.2em),
        rgba(255, 255, 255, .95) calc(var(--veeg) - .6em),
        rgba(255, 255, 255, .95) calc(var(--veeg) - .2em),
        transparent var(--veeg)
      ),
      linear-gradient(96deg, var(--cyaan) 0%, var(--blauw) 45%, var(--paars) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 2px 18px rgba(30, 142, 252, .25);
    animation: merk-veeg 9s linear 1.5s infinite;
    /* Eigen tekenlaag. Zonder dit vergeet Safari op iPhones de door de letters
       geknipte achtergrond opnieuw te tekenen zodra de kop plakt, en verdwijnt
       de naam tijdens het scrollen. */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

@keyframes merk-veeg {
  0%   { --veeg: 0%; }
  45%  { --veeg: 320%; }
  100% { --veeg: 320%; }
}

/* ---------- Hoofdruimte ---------- */

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
}

/* ---------- Aanmelden ---------- */

.kop-rechts { display: flex; align-items: center; gap: .9rem; }
.kop-naam { font-size: .85rem; color: var(--tekst-zacht); }

.inlogvak {
  max-width: 420px;
  margin: 3rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
}
.inlog-teken {
  width: 72px; height: 72px;
  border-radius: 18px;
  filter: drop-shadow(0 0 18px rgba(30, 142, 252, .4));
}
.inlogvak h1 { margin: .4rem 0 0; }
.inlog-lood { margin: 0; color: var(--tekst-zacht); font-size: .95rem; }
.inlogformulier { width: 100%; text-align: left; margin-top: .8rem; }
.inlog-wissel { margin: .6rem 0 0; font-size: .88rem; color: var(--tekst-zacht); }
.inlog-schakel { min-height: 0; padding: 0; color: var(--cyaan); font-size: .88rem; }
.inlog-schakel:hover { text-decoration: underline; }

.inlog-slot { margin: .4rem 0 0; font-size: .82rem; color: var(--tekst-dof); line-height: 1.5; }

/* ---------- Alleen voor schermlezers ---------- */

.alleen-voorlezen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- De waaier staat centraal ---------- */

.waaier-rij {
  display: flex;
  justify-content: center;
  margin: .5rem 0 1.75rem;
}

/* ---------- De waaier ---------- */
/* Kaarten liggen op elkaar en worden door JS uitgewaaierd op basis van hun
   afstand tot het midden. Slepen verschuift dat middelpunt. */

.waaier {
  flex: 0 0 auto;
  width: 440px;
  height: 290px;
  position: relative;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.waaier.sleept { cursor: grabbing; }

.waaier-baan {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.wkaart {
  position: absolute;
  width: 152px;
  aspect-ratio: 63 / 88;
  padding: 1.5px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--cyaan), var(--blauw) 45%, var(--paars));
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.8,.3,1), opacity .35s;
  will-change: transform;
}
.waaier.sleept .wkaart { transition: none; }

.wkaart-vlak {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  height: 100%;
  border-radius: 10.5px;
  background: linear-gradient(170deg, var(--paneel-hoog), var(--diep));
  padding: .7rem .6rem;
  text-align: center;
  overflow: hidden;
}

.wkaart-teken img {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: block;
  filter: drop-shadow(0 0 10px rgba(30, 142, 252, .45));
}

.wkaart-titel {
  font-family: var(--kop-font);
  font-size: .82rem;
  font-weight: 600;
  color: var(--tekst);
  line-height: 1.25;
}

.wkaart-hint {
  font-size: .68rem;
  color: var(--cyaan);
  border-top: 1px solid var(--rand);
  padding-top: .35rem;
  width: 100%;
}

.wkaart-label {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--cyaan);
}

.wkaart-tekst {
  font-size: .72rem;
  color: var(--tekst-zacht);
  line-height: 1.35;
}

/* De uitnodigingskaart springt eruit: fellere rand en een gloed eromheen. */
.wkaart-nodig {
  background: linear-gradient(150deg, var(--cyaan), var(--paars));
  box-shadow: 0 10px 34px rgba(30, 142, 252, .35);
}

/* ---------- Pakketten op de abonnementenkaart ---------- */

.pakketten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin: .3rem 0 .2rem;
}

.pakket {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: .8rem .5rem;
  text-align: center;
  background: var(--diep);
}

.pakket-uitgelicht {
  border-color: transparent;
  background:
    linear-gradient(var(--paneel-hoog), var(--paneel-hoog)) padding-box,
    linear-gradient(150deg, var(--cyaan), var(--paars)) border-box;
}

.pakket-naam {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tekst-dof);
}

.pakket-prijs {
  font-family: var(--cijfer-font);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tekst);
  font-variant-numeric: tabular-nums;
}

.pakket-regel { font-size: .72rem; color: var(--tekst-zacht); line-height: 1.3; }

/* ---------- Abonnementen ---------- */

.abo-lood { max-width: 62ch; color: var(--tekst-zacht); margin: 0 0 1.75rem; }

.abo-rij {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.abokaart {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.6rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(170deg, var(--paneel-hoog), var(--diep)) padding-box,
    linear-gradient(150deg, rgba(28, 188, 252, .45), rgba(153, 82, 250, .4)) border-box;
  position: relative;
}

/* Het middelste pakket springt eruit: vollere rand en een gloed. */
.abokaart-uitgelicht {
  background:
    linear-gradient(170deg, var(--paneel-hoog), var(--diep)) padding-box,
    linear-gradient(150deg, var(--cyaan), var(--blauw) 45%, var(--paars)) border-box;
  box-shadow: 0 14px 44px rgba(30, 142, 252, .22);
}

.abokaart-vaan {
  position: absolute;
  top: -.7rem;
  left: 1.4rem;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #fff;
  background: var(--verloop);
  border-radius: 999px;
  padding: .2rem .7rem;
}

.abokaart-naam {
  font-family: var(--kop-font);
  font-size: 1.3rem;
  font-weight: 600;
}

.abokaart-prijs {
  font-family: var(--cijfer-font);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.abokaart-per {
  font-family: var(--body-font);
  font-size: .82rem;
  font-weight: 400;
  color: var(--tekst-dof);
  letter-spacing: 0;
}

.abokaart-voor {
  font-size: .84rem;
  color: var(--tekst-dof);
  border-bottom: 1px solid var(--rand);
  padding-bottom: .8rem;
}

.abokaart-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1 1 auto;
  font-size: .88rem;
  color: var(--tekst-zacht);
}
.abokaart-lijst li { padding-left: 1.3rem; position: relative; }
.abokaart-lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verloop);
}

.abokaart-knop { width: 100%; margin-top: .6rem; }

.abo-voet {
  margin: 1.75rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px dashed var(--rand);
  border-radius: 14px;
  font-size: .9rem;
  color: var(--tekst-zacht);
}
.abo-voet strong { color: var(--tekst); }

/* ---------- Contactformulier ---------- */

.contactvak {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 560px;
  padding: 1.6rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(var(--paneel), var(--paneel)) padding-box,
    linear-gradient(135deg, rgba(28, 188, 252, .5), rgba(153, 82, 250, .45)) border-box;
}

.veld { display: flex; flex-direction: column; gap: .35rem; }

.veld-naam {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tekst-dof);
}
.veld-optioneel {
  text-transform: none;
  letter-spacing: 0;
  font-size: .78rem;
  color: var(--rand);
}

.contactvak textarea {
  font-family: var(--body-font);
  font-size: 16px;
  padding: .6rem .7rem;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--diep);
  color: var(--tekst);
  width: 100%;
  resize: vertical;
  line-height: 1.5;
}
.contactvak textarea:focus { outline: 2px solid var(--blauw); outline-offset: 1px; }
.contactvak input:invalid:not(:placeholder-shown) { border-color: var(--zeker-laag); }

.contact-gelukt { gap: .6rem; }
.contact-gelukt h2 { margin: 0; }
.contact-gelukt p { margin: 0; color: var(--tekst-zacht); }

.contact-let-op { margin: 0; font-size: .8rem; color: var(--tekst-dof); }

/* ---------- Adminportaal ---------- */

.berichtlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }

.bericht {
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius);
  background: var(--paneel);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.bericht-af { opacity: .55; }

.bericht-kop { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.bericht-naam { font-weight: 600; margin-right: .6rem; }
.bericht-tijd { font-family: var(--cijfer-font); font-size: .78rem; color: var(--tekst-dof); }

.bericht-contact { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .85rem; color: var(--tekst-zacht); }
.bericht-contact a { color: var(--cyaan); }

/* Berichten van bezoekers: witruimte en regelovergangen bewaren, maar de tekst
   komt altijd via textContent binnen. Zie admin.js. */
.bericht-tekst {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--tekst);
  border-left: 2px solid var(--rand);
  padding-left: .8rem;
}

.bericht-knoppen { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.bericht-weg { margin-left: auto; font-size: .82rem; color: var(--tekst-dof); }
.bericht-weg:hover { color: var(--zeker-laag); }

.online-teller { font-size: .82rem; color: var(--tekst-dof); font-variant-numeric: tabular-nums; }

.online-stip {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--zeker-hoog);
  margin-right: .4rem;
  vertical-align: 1px;
}
.online-stip-uit { background: var(--rand); }

.nieuw-account { margin: 0 0 1rem; }
.nieuw-account-vak { border: none; background: none; padding: 1rem; max-width: 420px; }

.account-rol {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cyaan);
  border: 1px solid rgba(28, 188, 252, .3);
  border-radius: 999px;
  padding: .05rem .5rem;
  margin-left: .5rem;
}
.account-uit { opacity: .5; }

.functievinkjes { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .2rem; }
.functievinkje { display: flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--tekst-zacht); cursor: pointer; }
.functievinkje input { width: auto; min-height: 0; margin: 0; accent-color: var(--blauw); }

.antwoordvak { max-width: 640px; margin: 0 auto; width: 100%; }

/* ---------- Uitlegdek, schermvullend ---------- */

.dek {
  position: fixed;
  inset: 0;
  z-index: 200;   /* boven de waaierkaarten, die tot 100 gaan */
  background: rgba(2, 12, 28, .965);
  display: flex;
  flex-direction: column;
  padding: calc(.8rem + env(safe-area-inset-top)) .8rem calc(.8rem + env(safe-area-inset-bottom));
}

.dek-balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .3rem .6rem;
}
.dek-teller { font-family: var(--cijfer-font); font-size: .8rem; color: var(--tekst-dof); }

.dek-sluit {
  background: none;
  border: none;
  color: var(--tekst-zacht);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .4rem;
  min-height: 44px;
  min-width: 44px;
}
.dek-sluit:hover { color: var(--tekst); }

/* Native scroll-snapping: swipen werkt hiermee vanzelf op een telefoon. */
.dek-baan {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  /* De ruimte links en rechts zorgt dat ook de eerste en laatste kaart in het
     midden kunnen staan. Geen justify-content: center, dat maakt op een
     scrollbaar element de linkerkant onbereikbaar. */
  padding: 0 max(1rem, calc(50% - clamp(215px, 25vw, 310px) / 2));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Bewust géén scroll-behavior: smooth. Dat vertraagt ook de veegbeweging van
     de gebruiker zelf, waardoor swipen aanvoelt alsof het niet reageert. Waar
     wij zelf schuiven geven we per aanroep mee dat het vloeiend mag. */
  touch-action: pan-x;
  cursor: grab;
}
.dek-baan.sleept { cursor: grabbing; }
.dek-baan::-webkit-scrollbar { display: none; }
.dek-baan::-webkit-scrollbar { display: none; }

/*
  De dekkaart houdt dezelfde vorm als in de waaier: staand, 63 bij 88, met
  dezelfde verloopsrand en opbouw. Op een breed scherm passen er drie naast
  elkaar; de middelste staat scherp en de buren staan er half naast.
*/
.dekkaart {
  flex: 0 0 auto;
  width: clamp(215px, 25vw, 310px);
  aspect-ratio: 63 / 88;
  scroll-snap-align: center;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  text-align: center;

  padding: 1.6rem 1.2rem;
  border: 1.5px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(170deg, var(--paneel-hoog), var(--diep)) padding-box,
    linear-gradient(150deg, var(--cyaan), var(--blauw) 45%, var(--paars)) border-box;
  position: relative;
  overflow: hidden;

  opacity: .45;
  transform: scale(.9);
  transition: opacity .3s, transform .3s;
}
.dekkaart:last-child { cursor: default; }

/* De kaart in het midden komt naar voren. */
.dekkaart-actief {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 14px 44px rgba(30, 142, 252, .3);
}

.dekkaart-hoek {
  position: absolute;
  top: .7rem;
  right: .9rem;
  font-family: var(--cijfer-font);
  font-size: .66rem;
  color: var(--tekst-dof);
}

.dekkaart-teken {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  filter: drop-shadow(0 0 14px rgba(30, 142, 252, .45));
}

.dekkaart h2 {
  font-size: 1.15rem;
  margin: 0;
  line-height: 1.2;
  background: linear-gradient(96deg, var(--cyaan), var(--blauw) 50%, var(--paars));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .dekkaart h2 { color: var(--tekst); }
}

.dekkaart p { margin: 0; font-size: .85rem; color: var(--tekst); line-height: 1.4; }
.dekkaart-sub { color: var(--tekst-zacht) !important; font-size: .76rem !important; }

.dekkaart .btn,
.dekkaart .btn-rand { margin-top: .3rem; font-size: .82rem; min-height: 38px; padding: .4rem .9rem; }

/* Pakketten onder elkaar in een staande kaart. */
.pakketten-staand { grid-template-columns: 1fr; gap: .35rem; width: 100%; }
.pakketten-staand .pakket { flex-direction: row; justify-content: space-between; align-items: center; padding: .45rem .7rem; }
.pakketten-staand .pakket-prijs { font-size: 1.05rem; }
.pakketten-staand .pakket-regel { font-size: .64rem; text-align: right; }

.dek-voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-top: .8rem;
}

.dek-stippen { display: flex; gap: .4rem; }
.dek-stip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rand);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.dek-stip-actief { background: var(--blauw); transform: scale(1.4); }

/* ---------- Sleepvak ---------- */

.sleepvak {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--paneel);
  padding: 1.75rem 1.1rem;
  text-align: center;
  transition: border-color .15s, background .15s;
}

.sleepvak.actief { border-color: var(--blauw); background: var(--paneel-hoog); }

.sleepvak-tekst { font-family: var(--kop-font); font-size: 1.1rem; margin: 0 0 .35rem; }
.sleepvak-sub { margin: 0 auto 1.25rem; color: var(--tekst-dof); font-size: .87rem; max-width: 46ch; }

.sleepvak-knoppen { display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap; }

.sleepvak-let-op {
  margin: 1rem 0 0;
  font-size: .84rem;
  color: var(--zeker-midden);
  border-top: 1px solid var(--rand-zacht);
  padding-top: .8rem;
}

/* Kort oplichten om aandacht te trekken zonder een tweede melding. */
@keyframes let-op-flits {
  0%, 100% { background: transparent; }
  30%      { background: rgba(242, 180, 65, .18); }
}
.let-op-flits { animation: let-op-flits 1.1s ease-out 2; border-radius: 8px; }

.bron-vlag {
  display: inline-block;
  font-family: var(--cijfer-font);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyaan);
  border: 1px solid rgba(28, 188, 252, .35);
  border-radius: 5px;
  padding: .05rem .35rem;
  margin-right: .35rem;
  vertical-align: 1px;
}


/* ---------- Knoppen ---------- */
/* Minimaal 44px hoog: de kleinste betrouwbare aanraakzone op een telefoon. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--verloop);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: .6rem 1.3rem;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
  transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { filter: grayscale(.7) brightness(.6); cursor: not-allowed; }

.btn-rand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: transparent;
  color: var(--tekst);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: .6rem 1.15rem;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.btn-rand:hover { border-color: var(--blauw); background: var(--paneel-hoog); }
.btn-rand:disabled { opacity: .45; cursor: not-allowed; }

.btn-klein { min-height: 40px; padding: .4rem .85rem; font-size: .86rem; border-radius: var(--radius-klein); }

.btn-tekst {
  background: none;
  border: none;
  color: var(--tekst-zacht);
  font-family: var(--body-font);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  padding: .4rem 0;
  min-height: 44px;
}
.btn-tekst:hover { color: var(--cyaan); }

/* ---------- Meldingen ---------- */

.melding {
  border-radius: var(--radius-klein);
  padding: .75rem .9rem;
  margin: 1rem 0;
  font-size: .9rem;
  border: 1px solid var(--rand);
  background: var(--paneel);
  color: var(--tekst-zacht);
}
.melding.fout {
  border-color: rgba(255, 107, 107, .45);
  background: rgba(255, 107, 107, .1);
  color: #FFB0B0;
}

/* ---------- Eerdere opdrachten ---------- */

.recent {
  margin-top: 2rem;
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius);
  background: var(--paneel);
  overflow: hidden;
}

.recent-kop {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  cursor: pointer;
  font-family: var(--kop-font);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tekst);
  list-style: none;          /* standaardpijltje weg */
  user-select: none;
}
.recent-kop::-webkit-details-marker { display: none; }
.recent-kop:hover { background: var(--paneel-hoog); }

/* Eigen pijltje, draait een kwartslag als het menu openstaat. */
.recent-pijl {
  width: 0;
  height: 0;
  flex: none;
  border-left: 6px solid var(--cyaan);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transition: transform .2s;
}
.recent[open] .recent-pijl { transform: rotate(90deg); }

.recent-telling {
  margin-left: auto;
  font-family: var(--cijfer-font);
  font-size: .8rem;
  font-weight: 400;
  color: var(--tekst-dof);
  font-variant-numeric: tabular-nums;
}

.recent-lijst {
  list-style: none;
  margin: 0;
  padding: 0 .7rem .7rem;
  border-top: 1px solid var(--rand-zacht);
  padding-top: .7rem;
}

.recent-lijst li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .9rem;
  background: var(--diep);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius-klein);
  margin-bottom: .5rem;
}
.recent-naam { font-weight: 600; }
.recent-meta { color: var(--tekst-dof); font-size: .83rem; font-variant-numeric: tabular-nums; }

/* ---------- Opdrachtkop ---------- */

.job-kop { display: flex; align-items: baseline; gap: .9rem; margin-bottom: .9rem; flex-wrap: wrap; }
.job-kop h1 { margin: 0; }

/* ---------- Voortgang ---------- */

.voortgang { margin: .9rem 0 1.25rem; }
.voortgang-balk { height: 6px; background: var(--rand-zacht); border-radius: 3px; overflow: hidden; }
.voortgang-vulling { height: 100%; width: 0%; background: var(--verloop); transition: width .3s; }
.voortgang-tekst { margin: .45rem 0 0; font-size: .85rem; color: var(--tekst-dof); }

/* ---------- Cijfers ---------- */

.cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: .6rem;
  margin: 1rem 0 1.5rem;
}

.cijfer {
  background: var(--paneel);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius-klein);
  padding: .75rem .85rem;
}
.cijfer-waarde {
  font-family: var(--cijfer-font);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.cijfer-label {
  font-size: .76rem;
  color: var(--tekst-dof);
  margin-top: .2rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.cijfer.let-op { border-color: rgba(30, 142, 252, .5); }
.cijfer.let-op .cijfer-waarde { color: var(--cyaan); }

/* ---------- Werkbalk ---------- */

.werkbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}

.filters { display: flex; gap: .4rem; flex-wrap: wrap; }

.chip {
  background: transparent;
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: .45rem .9rem;
  min-height: 40px;
  font-family: var(--body-font);
  font-size: .87rem;
  cursor: pointer;
  color: var(--tekst-zacht);
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { border-color: var(--blauw); color: var(--tekst); }
.chip-actief {
  background: var(--blauw);
  color: #fff;
  border-color: var(--blauw);
  font-weight: 600;
}

.downloads { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Tabel, breed scherm ---------- */

.tabel-omhulsel {
  background: var(--paneel);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius);
  overflow-x: auto;
}

.tabel { width: 100%; border-collapse: collapse; font-size: .91rem; }

.tabel thead th {
  text-align: left;
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tekst-dof);
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}

.tabel td {
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--rand-zacht);
  vertical-align: middle;
}
.tabel tr:last-child td { border-bottom: none; }

.tabel tr.rij-open td { background: rgba(30, 142, 252, .07); }
.tabel tr.rij-open td:first-child { box-shadow: inset 3px 0 0 var(--blauw); }

.k-nr { width: 46px; color: var(--tekst-dof); font-family: var(--cijfer-font); font-size: .82rem; }
.k-zeker { width: 104px; }
.k-cond { width: 138px; }
.k-afw { width: 138px; }
.k-aantal { width: 76px; }
.k-prijs { width: 108px; }

.kaart-cel { display: flex; align-items: center; gap: .7rem; }

.kaart-mini {
  width: 36px; height: 50px; flex: none;
  border-radius: 4px; object-fit: cover;
  background: var(--rand-zacht);
  border: 1px solid var(--rand);
}
.kaart-naam { font-weight: 600; line-height: 1.35; }
.kaart-sub { color: var(--tekst-dof); font-size: .82rem; }
.kaart-invoer { color: var(--tekst-dof); font-size: .79rem; font-style: italic; }

/* ---------- Zekerheidsbadge ---------- */

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: .15rem .6rem;
  font-family: var(--cijfer-font);
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.badge-hoog   { background: rgba(61, 217, 160, .13); color: var(--zeker-hoog);   border-color: rgba(61, 217, 160, .3); }
.badge-midden { background: rgba(242, 180, 65, .13); color: var(--zeker-midden); border-color: rgba(242, 180, 65, .3); }
.badge-laag   { background: rgba(255, 107, 107, .13); color: var(--zeker-laag);  border-color: rgba(255, 107, 107, .32); }

.vlag {
  display: inline-block;
  font-size: .73rem;
  color: var(--zeker-midden);
  border: 1px solid rgba(242, 180, 65, .3);
  border-radius: 5px;
  padding: .05rem .4rem;
  margin-right: .25rem;
  margin-top: .25rem;
}

/* ---------- Invoervelden ---------- */
/* 16px is geen smaak maar techniek: onder die maat zoomt iOS in bij focus. */

select, input[type="number"], input[type="text"] {
  font-family: var(--body-font);
  font-size: 16px;
  padding: .45rem .55rem;
  min-height: 42px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--diep);
  color: var(--tekst);
  width: 100%;
  max-width: 100%;
}
input[type="number"], input[type="text"] { font-variant-numeric: tabular-nums; }
select:focus, input:focus { outline: 2px solid var(--blauw); outline-offset: 1px; }
select:hover, input:hover { border-color: var(--tekst-dof); }
::placeholder { color: var(--tekst-dof); opacity: 1; }

/* ---------- Controlerij ---------- */

.controle-rij td {
  background: rgba(30, 142, 252, .07);
  padding-top: 0;
  box-shadow: inset 3px 0 0 var(--blauw);
}
.controle-blok { padding: .2rem 0 .9rem; }
.controle-reden { font-size: .86rem; color: var(--cyaan); margin: 0 0 .65rem; }

.kandidaten { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .65rem; }

.kandidaat {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--paneel-hoog);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  padding: .4rem .65rem .4rem .4rem;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--body-font);
  font-size: .85rem;
  text-align: left;
  color: var(--tekst);
  transition: border-color .15s;
}
.kandidaat:hover { border-color: var(--blauw); }
.kandidaat img {
  width: 28px; height: 39px;
  border-radius: 3px; object-fit: cover;
  background: var(--rand-zacht);
}
.kandidaat-naam { font-weight: 600; }
.kandidaat-sub { color: var(--tekst-dof); font-size: .77rem; }

.zoekrij { display: flex; gap: .4rem; align-items: center; max-width: 460px; }
.zoekrij input { flex: 1; }

.leeg { padding: 1.5rem; text-align: center; color: var(--tekst-dof); margin: 0; }

/* ---------- Voet ---------- */

.voet {
  border-top: 1px solid var(--rand-zacht);
  padding: 1.25rem 1rem 2rem;
  text-align: center;
  color: var(--tekst-dof);
  font-size: .82rem;
}
.voet p { margin: 0; }

/* ================================================================
   Telefoon. Dit is het hoofdgeval, niet de uitzondering.
   ================================================================ */

@media (max-width: 760px) {

  main { padding: 1rem .85rem 1.5rem; }

  h1 { font-size: 1.35rem; }

  /* De kaart gaat boven de tekst staan en wordt breder, zodat hij op een
     telefoon meteen in beeld valt in plaats van naast de tekst te verdwijnen. */
  .waaier-rij { margin: .25rem 0 1.25rem; }
  .abo-rij { grid-template-columns: 1fr; }
  .abokaart { padding: 1.3rem 1.1rem; }
  .abokaart-prijs { font-size: 1.9rem; }
  .waaier { width: 100%; height: 235px; }
  .wkaart { width: 128px; }
  .pakketten { gap: .4rem; }
  .pakket { padding: .6rem .3rem; }
  .pakket-prijs { font-size: 1.2rem; }

  .dekkaart { padding: 1.5rem 1.2rem; border-radius: 16px; }
  .dekkaart h2 { font-size: 1.35rem; }
  .dekkaart p { font-size: .97rem; }

  .sleepvak { padding: 1.5rem 1rem; }
  .sleepvak-knoppen { flex-direction: column; }
  .sleepvak-knoppen .btn,
  .sleepvak-knoppen .btn-rand { width: 100%; }

  .cijfers { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .cijfer-waarde { font-size: 1.35rem; }

  .werkbalk { flex-direction: column; align-items: stretch; gap: .6rem; }

  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: .2rem;
    margin: 0 -.85rem;
    padding-left: .85rem;
    padding-right: .85rem;
  }
  .filters::-webkit-scrollbar { display: none; }

  .downloads {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--paneel);
    border-top: 1px solid var(--rand);
    padding: .55rem .85rem;
    padding-bottom: calc(.55rem + env(safe-area-inset-bottom));
    gap: .4rem;
    flex-wrap: nowrap;
  }
  .downloads .btn,
  .downloads .btn-rand {
    flex: 1;
    min-width: 0;
    font-size: .8rem;
    padding: .4rem .3rem;
    text-align: center;
  }
  #scherm-job { padding-bottom: 4.5rem; }

  /* ---- Tabel wordt een kaartenlijst ---- */

  .tabel-omhulsel { background: none; border: none; border-radius: 0; overflow: visible; }
  .tabel { font-size: .9rem; }
  .tabel thead { display: none; }
  .tabel tbody { display: block; }

  .tabel tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "nr     zeker"
      "kaart  kaart"
      "cond   afw"
      "aantal prijs";
    gap: .5rem .6rem;
    align-items: end;
    background: var(--paneel);
    border: 1px solid var(--rand-zacht);
    border-radius: var(--radius);
    padding: .75rem .85rem;
    margin-bottom: .6rem;
  }

  .tabel td { display: block; padding: 0; border: none; }
  .tabel tr:last-child td { border: none; }

  .tabel tr.rij-open { border-color: rgba(30, 142, 252, .5); }
  .tabel tr.rij-open td { background: none; }
  .tabel tr.rij-open td:first-child { box-shadow: none; }

  .k-nr     { grid-area: nr; width: auto; align-self: center; }
  .k-zeker  { grid-area: zeker; width: auto; text-align: right; align-self: center; display: block; }
  .k-kaart  { grid-area: kaart; width: auto; }
  .k-cond   { grid-area: cond; width: auto; }
  .k-afw    { grid-area: afw; width: auto; display: block; }
  .k-aantal { grid-area: aantal; width: auto; }
  .k-prijs  { grid-area: prijs; width: auto; }

  .k-cond::before, .k-afw::before, .k-aantal::before, .k-prijs::before {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--tekst-dof);
    margin-bottom: .2rem;
  }
  .k-cond::before   { content: "Conditie"; }
  .k-afw::before    { content: "Afwerking"; }
  .k-aantal::before { content: "Aantal"; }
  .k-prijs::before  { content: "Prijs"; }

  .k-nr::before {
    content: "regel ";
    color: var(--tekst-dof);
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .07em;
  }

  .kaart-mini { width: 52px; height: 72px; }
  .kaart-naam { font-size: 1rem; }

  .controle-rij {
    display: block;
    background: rgba(30, 142, 252, .07);
    border: 1px solid rgba(30, 142, 252, .4);
    border-radius: var(--radius);
    padding: .75rem .85rem;
    margin: -.35rem 0 .6rem;
  }
  .controle-rij td { display: block; background: none; box-shadow: none; padding: 0; }
  .controle-blok { padding: 0; }
  .kandidaten { flex-direction: column; }
  .kandidaat { width: 100%; }
  .zoekrij { max-width: none; }

  .voet { padding-bottom: 5.5rem; }
}

@media (max-width: 380px) {
  .tabel tr {
    grid-template-columns: 1fr;
    grid-template-areas: "nr" "zeker" "kaart" "cond" "afw" "aantal" "prijs";
  }
  .k-zeker { text-align: left; }
}

/* Wie beweging heeft uitgezet, krijgt geen beweging, ook de veeg niet. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .merk-naam { --veeg: 0%; }
}

.kop-admin {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- accounts */

.omzet-teller {
  font-size: .82rem;
  color: var(--tekst-zacht);
  letter-spacing: .01em;
}

.accountzaken {
  display: grid;
  gap: .7rem;
  margin: .8rem 0 .2rem;
  padding: .75rem .85rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--rand);
  border-radius: 10px;
}

@media (min-width: 720px) {
  .accountzaken { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: start; }
}

.accountveld { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }

.accountveld-naam {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tekst-zacht);
}

.accountveld-waarde { font-size: .84rem; color: var(--tekst); }

.accountveld-bedrag {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cyaan);
  font-variant-numeric: tabular-nums;
}

.accountveld-reden { font-size: .72rem; color: var(--tekst-zacht); }

.accountkeuze {
  padding: .4rem .5rem;
  background: var(--paneel-hoog);
  color: var(--tekst);
  border: 1px solid var(--rand);
  border-radius: 8px;
  font: inherit;
  font-size: .84rem;
  max-width: 100%;
}

.accountkeuze:focus-visible { outline: 2px solid var(--cyaan); outline-offset: 1px; }

.verbruikbalk {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.verbruikbalk span {
  display: block;
  height: 100%;
  background: var(--cyaan);
  border-radius: 3px;
}

.verbruikbalk .verbruik-bijna { background: var(--zeker-midden); }
.verbruikbalk .verbruik-vol { background: var(--zeker-laag); }

/* ---------------------------------------------------------------- pakketkeuze */

.abo-status {
  margin: 0 0 1.4rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rand);
  border-left: 3px solid var(--cyaan);
  border-radius: 12px;
  background: var(--paneel);
}

.abo-status-kop { margin: 0 0 .35rem; font-size: 1.1rem; font-weight: 600; color: var(--tekst); }
.abo-status-tekst { margin: 0; color: var(--tekst-zacht); line-height: 1.5; }
.abo-status-knoppen { display: flex; gap: .6rem; margin-top: .9rem; }
.abo-status-knoppen:empty { display: none; }

.abo-codevak {
  display: flex;
  gap: .6rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 0 0 1.2rem;
}

.abo-codevak .veld { flex: 1 1 220px; margin: 0; }
.abo-codevak input { text-transform: uppercase; }

.abokaart-huidig { outline: 2px solid var(--cyaan); outline-offset: 2px; }

/* ---------------------------------------------------------------- meldbalk */

.meldbalk {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(calc(100% - 2rem), 640px);
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: .85rem 1rem;
  background: var(--paneel-hoog);
  border: 1px solid var(--rand);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  z-index: 40;
}

.meldbalk-tekst { margin: 0; flex: 1 1 300px; font-size: .9rem; color: var(--tekst); line-height: 1.45; }
.meldbalk-knoppen { display: flex; gap: .4rem; align-items: center; }

@media (max-width: 480px) {
  .meldbalk { bottom: .5rem; }
  .meldbalk-knoppen { width: 100%; justify-content: flex-end; }
}

/* ---------------------------------------------------------------- aanvragen */

.aanvraag {
  grid-column: 1 / -1;
  padding: .75rem .85rem;
  border: 1px solid var(--zeker-midden);
  border-radius: 10px;
  background: rgba(242, 180, 65, .06);
}

.aanvraag-kop { margin: 0 0 .55rem; font-size: .88rem; font-weight: 600; color: var(--tekst); }
.aanvraag-rij { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.aanvraag-rij input {
  flex: 1 1 240px;
  padding: .45rem .6rem;
  background: var(--paneel-hoog);
  color: var(--tekst);
  border: 1px solid var(--rand);
  border-radius: 8px;
  font: inherit;
  font-size: .86rem;
  text-transform: uppercase;
}

.account-status {
  margin-left: .5rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--rand);
  color: var(--tekst-zacht);
}
.account-status-actief { border-color: var(--zeker-hoog); color: var(--zeker-hoog); }
.account-status-wacht { border-color: var(--zeker-midden); color: var(--zeker-midden); }
.account-status-verlopen { border-color: var(--zeker-laag); color: var(--zeker-laag); }

.extra-scans { display: flex; gap: .5rem; align-items: center; font-size: .78rem; color: var(--tekst-zacht); }
.extra-scans input {
  width: 5.5rem;
  padding: .3rem .45rem;
  background: var(--paneel-hoog);
  color: var(--tekst);
  border: 1px solid var(--rand);
  border-radius: 6px;
  font: inherit;
  font-size: .84rem;
}

/* ---------------------------------------------------------------- listingfoto's en eBay */

.kaart-fotokolom { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.kaart-mini-eigen { outline: 2px solid var(--zeker-hoog); outline-offset: 1px; object-fit: cover; }
.foto-knop { min-height: 0; padding: 0; font-size: .68rem; color: var(--tekst-dof); white-space: nowrap; }
.foto-knop:hover { color: var(--cyaan); text-decoration: underline; }

.kaart-ebay { font-size: .78rem; color: var(--tekst-zacht); margin-top: .15rem; }
.kaart-ebay a { color: var(--cyaan); text-decoration: none; }
.kaart-ebay a:hover { text-decoration: underline; }
.kaart-ebay-lager a { color: var(--zeker-midden); font-weight: 600; }
.kaart-ebay-leeg { color: var(--tekst-dof); font-style: italic; }

/* ---------------------------------------------------------------- eBay live */

.veld-rij { display: grid; gap: .6rem; grid-template-columns: 5rem 1fr 1.6fr; }
@media (max-width: 480px) { .veld-rij { grid-template-columns: 1fr; } }

.kaart-live { font-size: .76rem; margin-top: .2rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.kaart-live a { color: var(--zeker-hoog); text-decoration: none; font-weight: 600; }
.kaart-live a:hover { text-decoration: underline; }
.kaart-live .btn-tekst { min-height: 0; padding: 0; font-size: .74rem; color: var(--tekst-dof); }
.kaart-live-fout { color: var(--zeker-laag); }
.kaart-live-weg { color: var(--tekst-dof); }

/* ---------------------------------------------------------------- toestemming en proefweek */

.akkoord {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--paneel);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--tekst-zacht);
  cursor: pointer;
}
.akkoord input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--cyaan); }
.akkoord a { color: var(--cyaan); }
.akkoord strong { color: var(--tekst); }

.proefbalk {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: .7rem 1rem;
  border: 1px solid var(--rand);
  border-left: 3px solid var(--zeker-midden);
  border-radius: 10px;
  background: var(--paneel);
  font-size: .88rem;
  color: var(--tekst);
}
.proefbalk-stop { min-height: 0; padding: 0; color: var(--tekst-zacht); white-space: nowrap; }
.proefbalk-stop:hover { color: var(--zeker-laag); text-decoration: underline; }

.vooruitzicht { grid-column: 1 / -1; margin: 0; font-size: .8rem; color: var(--tekst-zacht); }

.voet a { color: var(--tekst-zacht); }
.voet a:hover { color: var(--cyaan); }

.abo-betaalwijzen { margin: 0 0 1rem; font-size: .85rem; color: var(--tekst-zacht); }
.vooruitzicht a { color: var(--cyaan); text-decoration: none; }
.vooruitzicht a:hover { text-decoration: underline; }

.akkoord-vak {
  margin: 0 0 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--cyaan);
  border-radius: 12px;
  background: var(--paneel-hoog);
}
.akkoord-vak .akkoord { margin: 0 0 .8rem; padding: 0; border: 0; background: transparent; }
.akkoord-keuze { margin: 0 0 .7rem; font-weight: 600; color: var(--tekst); }

.voet { text-align: center; }
.voet-links { margin-top: .4rem !important; }