/* ---------------------------------------------------------------------------
   RedFlare AI Innovation

   Donker als uitgangspunt: nieuws lees je vaak 's avonds, en de accenten
   springen er op donker beter uit. Licht is er voor wie dat liever heeft.

   De kleuren komen uit de bestaande site (src/styles/app.css), zodat dit
   gedeelte niet als een vreemde eend aanvoelt terwijl de rest nog verbouwd
   wordt: blauw voor de rust, oranje voor de aandacht.
--------------------------------------------------------------------------- */

:root {
  --blauw:        #3b82f6;
  --blauw-licht:  #60a5fa;
  --blauw-diep:   #2563eb;
  --oranje:       #f97316;
  --oranje-licht: #fb923c;
  --oranje-diep:  #ea580c;

  /* Donker */
  --vlak:      #0a0f1f;
  --vlak-op:   #11182a;
  --vlak-hoog: #161e33;
  --rand:      #232c40;
  --tekst:     #e6eaf2;
  --tekst-zacht: #9aa3b2;

  --breed: 1180px;
  --rond: 16px;
  --schaduw: 0 4px 24px rgb(0 0 0 / 0.25);

  color-scheme: dark;
}

:root.licht {
  --vlak:      #f7f9fc;
  --vlak-op:   #ffffff;
  --vlak-hoog: #eff2f7;
  --rand:      #e2e8f0;
  --tekst:     #0f172a;
  --tekst-zacht: #64748b;

  --schaduw: 0 2px 16px rgb(15 23 42 / 0.06);
  color-scheme: light;
}

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

body {
  margin: 0;
  background: var(--vlak);
  color: var(--tekst);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: Outfit, Inter, sans-serif; line-height: 1.2; margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* Voor wie met het toetsenbord navigeert: de eerste tab is "sla het menu over". */
.overslaan {
  position: absolute;
  left: -9999px;
  background: var(--blauw);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--rond) 0;
  z-index: 100;
}
.overslaan:focus { left: 0; top: 0; }

/* ---------------------------------------------------------------------------
   De balk bovenaan
--------------------------------------------------------------------------- */

.balk {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--vlak) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rand);
}

.balk-binnen {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 20px;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

/* De ondertitel midden in de balk, los van wat links en rechts staat: zo
   blijft hij precies in het midden, ook als de knoppen rechts verschillen. */
.balk-titel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tekst-zacht);
  pointer-events: none;
}
/* Smal scherm: niet meer los in het midden maar in de rij, in de ruimte die
   overblijft tussen logo en knoppen. Klein, en in twee regels; zo valt hij
   nooit over de knoppen, ook niet als er een Beheer-knop bij staat. */
@media (max-width: 760px) {
  .balk-titel { position: static; transform: none; flex: 1; min-width: 0; display: block; overflow: hidden; text-align: center; font-size: 7.5px; letter-spacing: .05em; line-height: 1.4; }
  .balk-titel span { display: block; white-space: nowrap; }
  .balk-titel .balk-titel-stip { display: none; }
}
@media (max-width: 400px) {
  .balk-binnen { gap: 8px; }
  .balk-titel { font-size: 7px; letter-spacing: .03em; }
}

.merk { display: flex; align-items: center; flex-shrink: 0; }

/* Het logo is bijna wit, gemaakt voor een donkere achtergrond. In het lichte
   thema valt het weg, dus daar wordt het zwart gemaakt -- één bestand, twee
   thema's. Dezelfde aanpak als op de rest van de site. */
.merk-logo { height: 30px; width: auto; }
:root.licht .merk-logo { filter: brightness(0) saturate(0); }

.balk-knoppen { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.thema-knop, .menu-knop {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--tekst-zacht);
  cursor: pointer;
  transition: color .18s, background .18s;
}
.thema-knop:hover, .menu-knop:hover { color: var(--tekst); background: var(--vlak-hoog); }

.in-licht { display: none; }
:root.licht .in-donker { display: none; }
:root.licht .in-licht { display: block; }

/* De menuknop staat links vóór het logo, op elk scherm; open krijgt hij een
   vlakje zodat je ziet waar het paneel bij hoort. */
.menu-knop { display: grid; margin-left: -8px; }
.menu-knop[aria-expanded="true"] { color: var(--tekst); background: var(--vlak-hoog); }

/* ---- avatars ----

   Overal rond, en altijd vierkant aangeleverd: het bijsnijden gebeurt bij het
   uploaden (zie avatar.php), niet hier. Dat scheelt de browser werk en zorgt
   dat een avatar ook in een e-mail of bij een deelkaart klopt.

   object-fit: cover staat er toch bij, als vangnet: mocht er ooit een niet-
   vierkante afbeelding in glippen, dan wordt hij netjes gevuld in plaats van
   uitgerekt. */
.avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--vlak-hoog);
}

/* Zonder avatar: de eerste letter van de naam. Beter dan een leeg rondje of
   een standaardpoppetje -- je herkent iemand aan zijn initiaal. */
.avatar-letter {
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--blauw), var(--blauw-diep));
}

.avatar-groot { width: 72px; height: 72px; font-size: 28px; }

/* Wie er ingelogd is, in de balk. Klein, want het hoort niet met de navigatie
   te concurreren -- maar wel zichtbaar, zodat je weet onder welke naam je
   straks reageert. */
.wie {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--blauw), var(--blauw-diep));
}
.wie img { width: 100%; height: 100%; object-fit: cover; }
.wie:hover { filter: brightness(1.12); }

/* ---- het profiel ---- */

.profiel-kop {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 24px 0 28px;
}

.profiel-naam {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 20px;
  font-weight: 700;
}

/* Het bestandsveld: de knop van de browser past nergens bij, dus die krijgt
   dezelfde rand en achtergrond als de andere velden. */
.veld input[type="file"] {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--tekst-zacht);
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 10px;
  cursor: pointer;
}

.veld input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--tekst);
  background: var(--vlak-hoog);
  border: 1px solid var(--rand);
  border-radius: 8px;
  cursor: pointer;
}

.avatar-voorbeeld {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 18px;
}

.aanmeld-knop {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--oranje-licht);
  border: 1px solid color-mix(in srgb, var(--oranje) 34%, transparent);
  background: color-mix(in srgb, var(--oranje) 11%, transparent);
  white-space: nowrap;
}
.aanmeld-knop:hover { background: color-mix(in srgb, var(--oranje) 20%, transparent); }

/* Alleen voor leden met het admin-vinkje. Rustiger dan de inlogknop: het is
   een werkplek, geen uitnodiging. De groene stip is die van het LIVE-scherm. */
.beheer-knop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--tekst);
  border: 1px solid var(--rand);
  background: color-mix(in srgb, var(--tekst) 5%, transparent);
  white-space: nowrap;
}
.beheer-knop:hover { border-color: #369c6880; background: #369c6814; }
.beheer-stip { width: 7px; height: 7px; border-radius: 50%; background: #3fb57a; box-shadow: 0 0 0 3px #3fb57a26; }
@media (max-width: 620px) { .beheer-knop { padding: 6px 10px; } }

/* De kennisbank, altijd in de balk: blauw zoals de begripknopjes bij het
   nieuws, zodat je ziet dat ze bij elkaar horen. Op een smal scherm alleen
   het boekje. */
.kennis-knop {
  --kennis: #8cc8ff;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px 0 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: var(--kennis);
  border: 1px solid color-mix(in srgb, var(--kennis) 38%, transparent);
  background: color-mix(in srgb, var(--kennis) 9%, transparent);
  transition: background .15s, border-color .15s;
}
:root.licht .kennis-knop { --kennis: #2766b0; }
.kennis-knop:hover, .kennis-knop.is-nu { border-color: var(--kennis); background: color-mix(in srgb, var(--kennis) 17%, transparent); }
.kennis-knop svg { flex: 0 0 auto; }
@media (max-width: 760px) {
  .kennis-knop { width: 34px; padding: 0; justify-content: center; }
  .kennis-knop span { display: none; }
}

/* Het menupaneel: hangt onder de menuknop, links uitgelijnd met het logo.
   Eén paneel voor pc en telefoon; op een telefoon vult het de breedte. */
.menu-klein {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 8px);
  left: max(12px, calc((100% - var(--breed)) / 2 + 12px));
  min-width: 240px;
  padding: 8px;
  border: 1px solid var(--rand);
  border-radius: 14px;
  background: var(--vlak-op);
  box-shadow: 0 18px 50px -12px #00000080;
}
.menu-klein a {
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 500;
  color: var(--tekst-zacht);
  text-decoration: none;
  transition: color .18s, background .18s;
}
.menu-klein a:hover { color: var(--tekst); background: var(--vlak-hoog); }
.menu-klein a.nu { color: var(--blauw-licht); background: color-mix(in srgb, var(--blauw) 12%, transparent); }
.menu-klein:not([hidden]) { display: flex; }
@media (max-width: 620px) { .menu-klein { left: 12px; right: 12px; } }

/* ---------------------------------------------------------------------------
   De kop van de landingspagina
--------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 20px 56px;
  text-align: center;
}

/* Twee zachte lichtvlekken achter de titel. Ze bewegen niet en kosten niets;
   het idee is dieptewerking, niet aandacht trekken. */
.hero-gloed {
  position: absolute;
  inset: -40% -10% auto;
  height: 520px;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at 28% 42%, color-mix(in srgb, var(--blauw) 26%, transparent), transparent 70%),
    radial-gradient(38% 46% at 74% 30%, color-mix(in srgb, var(--oranje) 20%, transparent), transparent 70%);
  filter: blur(46px);
}

.hero-binnen { position: relative; max-width: 820px; margin: 0 auto; }

.hero-boven {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oranje);
}

.hero-titel {
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}

.hero-merk { display: block; }

.hero-accent {
  display: block;
  background: linear-gradient(100deg, var(--blauw-licht), var(--blauw) 42%, var(--oranje));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-onder {
  margin: 0 auto;
  max-width: 560px;
  font-size: clamp(1rem, 2.3vw, 1.12rem);
  color: var(--tekst-zacht);
}

/* ---------------------------------------------------------------------------
   Het overzicht
--------------------------------------------------------------------------- */

.inhoud { max-width: var(--breed); margin: 0 auto; padding: 0 20px 72px; }

.sectiekop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 22px;
  flex-wrap: wrap;
}

.sectiekop h2 { font-size: 1.35rem; font-weight: 700; }
.sectiekop p { margin: 0; font-size: 13.5px; color: var(--tekst-zacht); }

.lijst { display: grid; gap: 14px; }

/* Het eerste artikel groter: er moet een duidelijk begin zijn, anders is het
   een muur van gelijke blokken en weet je niet waar te kijken. */
.lijst > .kaart:first-child { --titel: 1.5rem; }

.kaart {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 20px 22px;
  background: var(--vlak-op);
  border: 1px solid var(--rand);
  border-radius: var(--rond);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.kaart:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blauw) 45%, var(--rand));
  box-shadow: var(--schaduw);
}

.kaart-met-beeld { grid-template-columns: 168px 1fr; gap: 20px; align-items: start; }

.kaart-beeld {
  width: 168px;
  height: 108px;
  object-fit: cover;
  border-radius: 11px;
  background: var(--vlak-hoog);
}

.kaart-tekst { min-width: 0; }

.kaart h3 {
  font-size: var(--titel, 1.1rem);
  font-weight: 700;
  margin-bottom: 7px;
  letter-spacing: -.01em;
}

/* De hele kaart klikbaar, maar de titel blijft de link voor schermlezers en
   voor wie met het toetsenbord navigeert. */
.kaart h3 a { text-decoration: none; }
.kaart h3 a::after { content: ''; position: absolute; inset: 0; }
.kaart h3 a:hover { color: var(--blauw-licht); }

.kaart-kort {
  margin: 0 0 12px;
  font-size: 14.5px;
  color: var(--tekst-zacht);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kaart-voet {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--tekst-zacht);
}

.bron { font-weight: 600; color: var(--tekst); }
.stip { opacity: .4; }

/* Het cijfer van het model. Niet opdringerig: het is een hulpmiddel bij het
   kiezen, geen keurmerk. */
.score {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--blauw) 14%, transparent);
  color: var(--blauw-licht);
  border: 1px solid color-mix(in srgb, var(--blauw) 28%, transparent);
}

.score-hoog {
  background: color-mix(in srgb, var(--oranje) 15%, transparent);
  color: var(--oranje-licht);
  border-color: color-mix(in srgb, var(--oranje) 32%, transparent);
}

.merkjes { display: flex; gap: 6px; flex-wrap: wrap; }

.merkje {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--vlak-hoog);
  color: var(--tekst-zacht);
  border: 1px solid var(--rand);
}

/* ---------------------------------------------------------------------------
   De artikelpagina
--------------------------------------------------------------------------- */

.artikel { max-width: 760px; margin: 0 auto; padding: 32px 20px 72px; }

.terug {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 26px;
  font-size: 14px;
  color: var(--tekst-zacht);
  text-decoration: none;
}
.terug:hover { color: var(--blauw-licht); }

.artikel h1 {
  font-size: clamp(1.7rem, 4.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}

.artikel-voet {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  font-size: 13.5px;
  color: var(--tekst-zacht);
}

.artikel-beeld {
  width: 100%;
  border-radius: var(--rond);
  margin-bottom: 26px;
  background: var(--vlak-hoog);
}

/* Het eigen verhaal: de hoofdtekst van de pagina. Ruimer gezet dan de rest,
   want dit is waar iemand een paar minuten in zit te lezen. */
.verhaal { font-size: 17px; line-height: 1.75; margin-bottom: 30px; }
.verhaal p { margin: 0 0 1.15em; }
.verhaal p:last-child { margin-bottom: 0; }

/* De eerste alinea iets groter: dat geeft de tekst een begin. */
.verhaal p:first-child { font-size: 18.5px; color: var(--tekst); }

.kernpunten {
  padding: 20px 24px;
  margin-bottom: 28px;
  background: var(--vlak-op);
  border: 1px solid var(--rand);
  border-radius: 12px;
}

.kernpunten-kop {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oranje);
}

.kernpunten ul { margin: 0; padding: 0; list-style: none; }

.kernpunten li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 15px;
  color: var(--tekst);
}
.kernpunten li:last-child { margin-bottom: 0; }

.kernpunten li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oranje);
}

/* Waar het verhaal vandaan komt. Klein maar niet verstopt: wie de tekst leest
   hoort te kunnen zien waar de feiten vandaan komen. */
.bronvermelding {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--tekst-zacht);
  font-style: italic;
}

/* De samenvatting, voor artikelen waar te weinig brontekst voor was. */
.samenvatting {
  padding: 22px 24px;
  margin-bottom: 26px;
  background: var(--vlak-op);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--oranje);
  border-radius: 12px;
  font-size: 16.5px;
}
.samenvatting p:first-child { margin-top: 0; }
.samenvatting p:last-child { margin-bottom: 0; }

.uit-de-bron {
  font-size: 15px;
  color: var(--tekst-zacht);
  margin-bottom: 30px;
}

.naar-bron {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 11px;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(120deg, var(--oranje), var(--oranje-diep));
  transition: transform .18s, box-shadow .18s;
}
.naar-bron:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--oranje) 32%, transparent);
}

.waarom {
  margin-top: 26px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--vlak-hoog);
  border: 1px solid var(--rand);
  font-size: 13.5px;
  color: var(--tekst-zacht);
}
.waarom strong { color: var(--tekst); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Reacties
--------------------------------------------------------------------------- */

.reacties { margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--rand); }
.reacties h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; }

.reactie {
  padding: 16px 18px;
  margin-bottom: 12px;
  background: var(--vlak-op);
  border: 1px solid var(--rand);
  border-radius: 12px;
}

.reactie-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 13px;
}
.reactie-naam { font-weight: 600; color: var(--tekst); }

/* Het merkje bij een reactie van de bot.
   
   Moet in één oogopslag te zien zijn, ook voor wie snel scrollt: een reactie
   van een model die doorgaat voor een bezoeker is misleiding. Vandaar een
   eigen kleur en niet alleen een andere naam. */
.ai-merk {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--oranje) 40%, transparent);
  background: color-mix(in srgb, var(--oranje) 14%, transparent);
  color: var(--oranje-licht);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.reactie-tijd { color: var(--tekst-zacht); }

.reactie-tekst { margin: 0; font-size: 15px; white-space: pre-wrap; }

/* De @naam waarmee een antwoord iemand aanspreekt. Antwoorden staan allemaal
   op hetzelfde niveau -- dieper inspringen wordt op een telefoon onleesbaar --
   dus dit is wat laat zien tegen wie het gezegd wordt. Daarom opvallend
   genoeg om in één oogopslag te zien, zonder een link te lijken. */
.noemt {
  font-weight: 600;
  color: var(--blauw-licht);
}

.antwoorden { margin: 12px 0 0 20px; padding-left: 16px; border-left: 2px solid var(--rand); }
.antwoorden .reactie { background: var(--vlak-hoog); }

.antwoord-knop {
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--tekst-zacht);
  text-decoration: underline;
  cursor: pointer;
}
.antwoord-knop:hover { color: var(--blauw-licht); }

.geen-reacties { color: var(--tekst-zacht); font-size: 14.5px; }

/* ---- stemmen ----

   Twee duimen en een gele kaart. De duimen zijn een mening: die bepalen
   niets behalve wat mensen ervan vinden. De kaart is een oordeel -- drie
   ervan en de reactie is weg.

   Daarom staat de kaart apart, met ruimte ertussen en een andere vorm. Zou
   hij naast de duimen staan als derde rondje, dan wordt hij gelezen als "heel
   erg oneens" en daar is hij niet voor. */

.reactie-voet {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}

.stemrij { display: flex; align-items: center; gap: 6px; }
.stem-vorm { display: inline; margin: 0; }

.stem-knop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--tekst-zacht);
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.stem-knop:hover { background: var(--vlak-hoog); color: var(--tekst); }

/* Waar je zelf op gestemd hebt. Moet in één oogopslag te zien zijn, anders
   klikt iemand twee keer en haalt zijn eigen stem weg zonder het door te
   hebben. */
.stem-knop.aan {
  background: color-mix(in srgb, var(--blauw) 14%, transparent);
  border-color: color-mix(in srgb, var(--blauw) 45%, transparent);
  color: var(--blauw-licht);
}

/* De standen van iemand die niet mag stemmen: niet uitgelogd grijs, gewoon
   stil. Een knop die niets doet is vervelender dan een getal. */
.stem-knop.stil { cursor: default; }
.stem-knop.stil:hover { background: none; color: var(--tekst-zacht); }

.stem-teken { font-size: 14px; }
.stem-getal { font-variant-numeric: tabular-nums; min-width: 8px; }

/* De gele kaart. Los van de duimen -- vandaar de ruimte ervoor en het
   streepje. */
.kaart-vorm { margin-left: 8px; }
.stem-knop.kaart { margin-left: 8px; position: relative; }
.stem-knop.kaart::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  width: 1px;
  height: 14px;
  background: var(--rand);
  transform: translateY(-50%);
}

/* Een kaartje, geen rondje: de vorm zegt al wat het is. */
.kaart-teken {
  display: inline-block;
  width: 11px;
  height: 15px;
  border-radius: 2px;
  background: #facc15;
  box-shadow: 0 1px 3px rgb(0 0 0 / .3);
}
.stem-knop.kaart:hover { background: color-mix(in srgb, #facc15 14%, transparent); }
.stem-knop.kaart.aan {
  background: color-mix(in srgb, #facc15 18%, transparent);
  border-color: color-mix(in srgb, #facc15 55%, transparent);
  color: #facc15;
}

/* Hoeveel kaarten er nog nodig zijn. Staat er alleen als er al één ligt:
   zonder kaarten hoeft niemand eraan herinnerd te worden dat dit kan. */
.kaart-waarschuwing {
  font-size: 12px;
  color: var(--tekst-zacht);
  opacity: .8;
}

/* Voor wie de pagina laat voorlezen: de knoppen zijn een duim en een kaartje,
   en daar valt niets van te maken zonder woorden erbij. */
.alleen-voorlezer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- het formulier ---- */

.reactie-formulier {
  margin-top: 26px;
  padding: 22px 24px;
  background: var(--vlak-op);
  border: 1px solid var(--rand);
  border-radius: var(--rond);
}

.reactie-formulier h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; }

.veld { margin-bottom: 14px; }

.veld label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tekst-zacht);
}

.veld input, .veld textarea {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--tekst);
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 10px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.veld input:focus, .veld textarea:focus {
  border-color: color-mix(in srgb, var(--blauw) 55%, var(--rand));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blauw) 12%, transparent);
}

.veld textarea { min-height: 118px; resize: vertical; }
.veld-hulp { margin: 5px 0 0; font-size: 12px; color: var(--tekst-zacht); }

/* Het lokaas voor bots: onzichtbaar voor mensen, maar niet met display:none --
   sommige bots slaan dat over. Zie de uitleg in reactie.php. */
.lokaas {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.verstuur {
  padding: 12px 26px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(120deg, var(--blauw), var(--blauw-diep));
  transition: transform .18s, box-shadow .18s;
}
.verstuur:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--blauw) 30%, transparent);
}

.melding {
  padding: 13px 16px;
  margin-bottom: 18px;
  border-radius: 11px;
  font-size: 14px;
}
.melding-goed {
  background: color-mix(in srgb, #22c55e 12%, transparent);
  border: 1px solid color-mix(in srgb, #22c55e 30%, transparent);
  color: #86efac;
}
.melding-fout {
  background: color-mix(in srgb, #ef4444 10%, transparent);
  border: 1px solid color-mix(in srgb, #ef4444 28%, transparent);
  color: #fca5a5;
}
:root.licht .melding-goed { color: #15803d; }
:root.licht .melding-fout { color: #b91c1c; }

/* ---------------------------------------------------------------------------
   Verder lezen en voettekst
--------------------------------------------------------------------------- */

.verwant { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--rand); }
.verwant h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; }
.verwant ul { list-style: none; margin: 0; padding: 0; }
.verwant li { padding: 11px 0; border-bottom: 1px solid var(--rand); }
.verwant li:last-child { border-bottom: 0; }
.verwant a { text-decoration: none; font-weight: 500; font-size: 15px; }
.verwant a:hover { color: var(--blauw-licht); }
.verwant .wanneer { display: block; font-size: 12.5px; color: var(--tekst-zacht); margin-top: 3px; }

.voet {
  margin-top: 56px;
  padding: 38px 20px;
  border-top: 1px solid var(--rand);
  background: var(--vlak-op);
}
.voet-binnen { max-width: var(--breed); margin: 0 auto; display: grid; gap: 16px; }
.voet-merk { margin: 0; font-family: Outfit, sans-serif; font-weight: 700; font-size: 17px; }
.voet-klein { margin: 0; font-size: 13px; color: var(--tekst-zacht); max-width: 60ch; }
.voet-menu { display: flex; gap: 18px; flex-wrap: wrap; }
.voet-menu a { font-size: 13.5px; color: var(--tekst-zacht); text-decoration: none; }
.voet-menu a:hover { color: var(--tekst); }

/* ---------------------------------------------------------------------------
   Smallere schermen

   Eén breekpunt op 860px voor het menu, één op 620px voor de kaarten. Meer is
   hier niet nodig: de opzet is één kolom, en die schaalt vanzelf mee.
--------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .balk-binnen { gap: 10px; }
}

@media (max-width: 620px) {
  .hero { padding: 48px 18px 38px; }
  .inhoud { padding: 0 16px 56px; }
  .artikel { padding: 22px 16px 56px; }

  /* Op een telefoon gaat het beeld boven de tekst: naast elkaar wordt allebei
     te smal om nog iets te zeggen. */
  .kaart-met-beeld { grid-template-columns: 1fr; gap: 14px; }
  .kaart-beeld { width: 100%; height: 178px; }

  .kaart { padding: 17px 18px; }
  .lijst > .kaart:first-child { --titel: 1.25rem; }

  .samenvatting, .reactie-formulier { padding: 18px 18px; }
  .antwoorden { margin-left: 10px; padding-left: 12px; }
}

/* Wie liever geen beweging ziet, krijgt geen beweging. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .kaart:hover, .naar-bron:hover, .verstuur:hover { transform: none; }
}

.medailles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.medaille { display: grid; justify-items: center; gap: 6px; padding: 15px 8px; border: 1px solid var(--rand); border-radius: 14px; text-align: center; color: var(--tekst-zacht); }
.medaille strong { font-size: 12px; }
.medaille > span:last-child { font-size: 10px; }
.medaille-munt { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--rand); font-size: 23px; }
.medaille-verdiend .medaille-munt { color: #643407; background: linear-gradient(135deg, #fff0a5, #e6b75a 50%, #b47625); border-color: #edcc80; box-shadow: inset 0 0 0 3px #ffffff35, 0 3px 12px #e6b75a25; }
.medaille-verdiend strong { color: var(--tekst); }
.medaille-collectie summary { cursor: pointer; color: var(--tekst); font-size: 14px; margin-top: 14px; }
.medaille-collectie summary:focus-visible { outline: 2px solid var(--blauw); outline-offset: 4px; }

/* Kleine eigen cartoonhandjes; de teller blijft rustig staan. */
.stem-teken { display: inline-flex; align-items: center; }
.cartoon-duim { display: block; width: 30px; height: 30px; overflow: visible; transform-origin: 50% 80%; transition: transform .18s ease; }
button.stem-knop:hover .cartoon-duim { transform: rotate(-12deg) scale(1.13); }
button.stem-knop:active .cartoon-duim { transform: rotate(10deg) scale(.88); }
.stem-knop.aan .cartoon-duim { filter: drop-shadow(0 2px 4px #ffc66b45); }
@media (prefers-reduced-motion: reduce) {
  button.stem-knop:hover .cartoon-duim, button.stem-knop:active .cartoon-duim { transform: none; }
}

/* Afkeuren staat bewust aan de andere kant dan de duimen. */
.reactie-voet .stemrij { display: contents; }
.reactie-voet > .antwoord-knop { order: 1; margin-top: 0; }
.reactie-voet .kaart-vorm, .reactie-voet .stem-knop.kaart.stil { order: 2; margin-left: auto; }
.reactie-voet .kaart-waarschuwing { order: 3; }
.stem-knop { height: 40px; }
.stem-knop.kaart { display: inline-flex; margin-left: 0; padding: 4px 9px; gap: 5px; min-width: 38px; min-height: 0; height: 40px; border-radius: 999px; align-items: center; justify-content: center; border-color: #ef444433; }
.stem-knop.kaart::before { display: none; }
.kaart-teken { width: 14px; height: 19px; background: linear-gradient(135deg, #ff7770, #dc2626); transform: rotate(9deg); box-shadow: inset 0 1px 0 #ffffff65, 0 2px 5px #991b1b30; }
.stem-knop.kaart:hover { background: #ef44441c; }
.stem-knop.kaart.aan { background: #ef444426; border-color: #ef44448c; color: #ef4444; }

.stem-knop.duim-omhoog { border-color: #22c55e66; }
.stem-knop.duim-omlaag { border-color: #eab30880; }
button.stem-knop.duim-omhoog:hover, .stem-knop.duim-omhoog.aan { border-color: #22c55e; background: #22c55e18; }
button.stem-knop.duim-omlaag:hover, .stem-knop.duim-omlaag.aan { border-color: #eab308; background: #eab30818; }