/* DG met elkaar — huisstijl De Gelderlander.
   Ontworpen voor een breed en deels ouder lezerspubliek: grote letters, hoog contrast,
   ruime aanraakvlakken, en alles blijft werken zonder JavaScript.

   Typografie volgt de ADR-brandgids: Flama Semi Condensed uitsluitend voor koppen en
   accenten, Arial voor bodytekst en alles wat interface is. */

/* Flama staat op ons eigen domein: de CSP laat alleen fontSrc 'self' toe, en zo gaat er
   geen bezoekersverkeer naar een externe CDN. */
@font-face {
  font-family: "Flama Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url("/fonts/flama-semicond-bold.woff2") format("woff2"),
    url("/fonts/flama-semicond-bold.woff") format("woff");
}

:root {
  /* Merk. Gemeten op de live site van gelderlander.nl; het brandbook schrijft #d10a10
     voor en het logobestand gebruikte #E30613. Bewust de gemeten waarde, zodat deze
     dienst naast dg.nl niet uit de toon valt. Ook in dg-logo.svg doorgevoerd. */
  --rood: #cf231d;
  --rood-donker: #a61c17; /* alleen voor hover en linktekst, zodat die van elkaar verschillen */

  /* Tekst en vlakken */
  --zwart: #000000;
  --tekst: #32302c;
  --grijs: #6e757c;
  --rand: #e1dee0;
  --vlak: #edeaec;
  --vlak-licht: #f7f7f7;
  --wit: #ffffff;

  /* Signaalkleur voor "wacht op controle" en "gemarkeerd" in het beheerpaneel */
  --signaal: #ecc85b;
  --signaal-zacht: #f7e9bd;

  /* Arial Narrow houdt de regellengte kloppend zolang Flama nog laadt. */
  --kop: "Flama Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --ui: Arial, Helvetica, sans-serif;

  --straal: 0; /* dg.nl is overal haaks */
  --schaduw: 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
  --breedte: 64rem; /* 1024px, gelijk aan de inhoudskolom van dg.nl */
}

/* Categoriekleuren. Het accent is voor randen en iconen, nooit voor tekst:
   alleen --rood haalt op wit genoeg contrast voor normale tekstgrootte.
   Labels krijgen daarom de pastel als achtergrond met donkere tekst erop. */
.cat-wandelen {
  --accent: #3a9d5d;
  --pastel: #b0d8be;
}
.cat-koffie {
  --accent: #ec5a29;
  --pastel: #f7e9bd;
}
.cat-hobby {
  --accent: #7c4d9e;
  --pastel: #cbb8d8;
}
.cat-cultuur {
  --accent: #e0528d;
  --pastel: #f3bad1;
}
.cat-overig {
  --accent: #6e757c;
  --pastel: #e1dee0;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

/* Zwart en niet het zachtere --tekst: links in lopende tekst worden alleen met kleur
   gemarkeerd, en dan moet het rood minstens 3:1 verschillen van de tekst eromheen.
   Tegen zwart haalt #cf231d 3,9:1, tegen #32302c maar 2,45:1. */
body {
  margin: 0;
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--zwart);
  background: var(--vlak-licht);
}

/* Flama is smal en vet, dus een kop mag groter staan zonder te gaan schreeuwen. */
h1,
h2,
h3 {
  font-family: var(--kop);
  font-weight: 700;
  color: var(--zwart);
  line-height: 1.2;
}

h1 {
  font-size: 1.9rem;
  margin: 0 0 0.5rem;
}
h2 {
  font-size: 1.35rem;
  margin: 2rem 0 0.75rem;
}
h3 {
  font-size: 1.1rem;
  margin: 0 0 0.35rem;
}

/* Alles wat rood is, wordt donkerder bij aanwijzen. Geen onderstreping: dg.nl markeert
   links uitsluitend met kleur. */
a {
  color: var(--rood);
  text-decoration: none;
}
a:hover {
  color: var(--rood-donker);
}

/* Focus moet altijd goed zichtbaar zijn — dit is voor toetsenbordgebruikers
   het enige houvast op de pagina. */
:focus-visible {
  outline: 3px solid var(--rood);
  outline-offset: 2px;
}

.omhulsel {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Lucht tussen de rode balk en de eerste kop. Pagina's die met een introblok beginnen
   brengen hun eigen ruimte mee. */
main > .omhulsel:first-child {
  padding-top: 1.75rem;
}

/* Regellengte. Boven een tekst of 75 tekens moet het oog te ver terugspringen om de
   volgende regel te vinden; het vlak mag breed zijn, de tekst erin niet. */
.omhulsel > p,
.paneel p,
.paneel li,
.oproeptekst {
  max-width: 40rem;
}

/* Direct-naar-inhoud-link voor schermlezers en toetsenbord */
.overslaan {
  position: absolute;
  left: -9999px;
  background: var(--wit);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.overslaan:focus {
  left: 1rem;
  top: 1rem;
}

/* ---------------------------------------------------------------- kop */

/* Opgebouwd zoals gelderlander.nl: op breed scherm een witte titelbalk met het
   woordmerk, daaronder de rode balk met de sectie en een witte strook met de
   onderdelen. Op smal scherm schuiven titelbalk en sectiebalk in elkaar. */

.kop__titelbalk {
  display: none;
  background: var(--wit);
}

.kop__balk {
  background: var(--rood);
}

/* Vaste hoogte zonder verticale opvulling, zodat het hoverblok van de sectienaam de
   hele balk vult in plaats van alleen de regelhoogte. */
.kop__balk .kop__binnen {
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
}

.kop__binnen {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 0.6rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.9rem;
}

/* Het logo is zelf een rood vlak met een wit merk erin; op de rode balk blijft
   daardoor alleen het witte merk over, op wit staat het als blokje. */
.kop__krantlink {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.kop__logo {
  display: block;
  width: 40px;
  height: 40px;
}
.kop__woordmerk {
  display: block;
  width: 228px;
  height: 24px;
}

/* Terugval als het logobestand er (nog) niet is. */
.kop__krant {
  font-family: var(--kop);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--wit);
}

/* Waar op dg.nl SPORT of REGIO staat, staat hier de naam van deze dienst. */
.kop__sectie {
  display: flex;
  align-items: center;
  align-self: center;
  padding: 0.2rem 0.6rem;
  font-family: var(--kop);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--wit);
  text-decoration: none;
}

/* Zonder eigen hover wint de algemene regel voor links en wordt de tekst rood op rood.
   Het blok springt bewust in: het vult de balk niet, zoals REGIO op dg.nl. */
.kop__sectie:hover,
.kop__sectie:focus-visible {
  color: var(--wit);
  background: var(--rood-donker);
}

/* Het rode focuskader is onzichtbaar op de rode balk. */
.kop__balk :focus-visible {
  outline-color: var(--wit);
}

.subkop {
  background: var(--wit);
  border-bottom: 1px solid var(--rand);
}

/* Niet afbreken naar een tweede regel: op een smal scherm schuift de strook liever
   horizontaal, zoals op dg.nl. overflow-y expliciet dicht, anders maakt de browser
   er ook een verticale schuifbalk bij. */
.subkop .kop__binnen {
  padding-top: 0;
  padding-bottom: 0;
  gap: 0 1rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.subkop__link {
  font-family: var(--ui);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--tekst);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.9rem 0;
  border-bottom: 3px solid transparent;
}

.subkop__link:hover {
  color: var(--rood-donker);
}

.subkop__link--actief {
  color: var(--rood);
  border-bottom-color: var(--rood);
}

.subkop__link--actief:hover {
  color: var(--rood-donker);
  border-bottom-color: var(--rood-donker);
}

/* De actie hoort niet bij de secties, dus die staat apart en houdt zijn knopvorm. */
.subkop__actie {
  margin: 0.4rem 0 0.4rem auto;
  padding: 0.3rem 0.7rem;
}

/* Vanaf hier de brede weergave. Dit blok staat bewust ná de basisregels hierboven:
   een media query verhoogt de specificiteit niet, dus bij gelijke specificiteit wint
   wat later in het bestand staat. */
@media (min-width: 56rem) {
  .kop {
    position: relative;
  }
  .kop__titelbalk {
    display: block;
  }
  .kop__krantlink--compact {
    display: none;
  }

  /* De kop hangt aan twee uitlijningen uit de huisstijl: de onderkant van het logoblok
     valt samen met de onderkant van de subnavigatie, de bovenkant ligt op de x-hoogte
     van het woordmerk. Die x-hoogte ligt gemeten op 20 vanaf de bovenkant van de kop,
     en de kop is gemeten 132 hoog; vandaar de 112. Een <img> rekt niet mee tussen top
     en bottom, dus de maat staat er expliciet.
     De haarlijnen links en rechts houden het blok los van de balk; zonder die lijnen
     lopen beide rode vlakken in elkaar over en verdwijnt het vierkant als vorm. */
  .kop__logo--groot {
    position: absolute;
    left: max(1rem, calc(50% - var(--breedte) / 2 + 1rem));
    bottom: 0;
    z-index: 2;
    width: 112px;
    height: 112px;
    border-left: 2px solid var(--wit);
    border-right: 2px solid var(--wit);
  }

  /* Alle drie de lagen beginnen rechts van het logoblok. */
  .kop__titelbalk .kop__binnen,
  .kop__balk .kop__binnen,
  .subkop .kop__binnen {
    padding-left: calc(1rem + 112px + 1rem);
  }

  .kop__titelbalk .kop__binnen {
    height: 48px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .kop__balk .kop__binnen {
    height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* De sectienaam staat hier als enige in de balk; de negatieve marge heft de
     ruimte voor het hoverblok op, zodat de tekst uitlijnt met het woordmerk erboven. */
  .kop__sectie {
    font-size: 1.05rem;
    margin-left: -0.7rem;
  }

  .subkop .kop__binnen {
    height: 36px;
  }
  .subkop__link {
    padding: 0;
    height: 36px;
    display: flex;
    align-items: center;
  }
  .subkop__actie {
    margin: 0 0 0 auto;
    min-height: 28px;
    padding: 0.1rem 0.7rem;
  }
}

/* ---------------------------------------------------------------- knoppen */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px; /* ruim genoeg om met een vinger te raken */
  padding: 0.6rem 1.15rem;
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 700;
  border: 2px solid transparent;
  border-radius: var(--straal);
  cursor: pointer;
  text-decoration: none;
  background: var(--vlak);
  color: var(--tekst);
}

.knop:hover {
  background: var(--rand);
  color: var(--zwart);
}

.knop--primair {
  background: var(--rood);
  color: var(--wit);
}
.knop--primair:hover {
  background: var(--rood-donker);
  color: var(--wit);
}

.knop--rand {
  background: var(--wit);
  border-color: var(--rand);
}
.knop--rand:hover {
  border-color: var(--grijs);
  background: var(--wit);
}

.knop--klein {
  min-height: 40px;
  padding: 0.35rem 0.8rem;
  font-size: 0.92rem;
}

.knop--gevaar {
  background: var(--wit);
  border-color: var(--rood);
  color: var(--rood);
}
.knop--gevaar:hover {
  background: var(--rood-donker);
  border-color: var(--rood-donker);
  color: var(--wit);
}

/* ---------------------------------------------------------------- intro */

.intro {
  background: var(--wit);
  border-bottom: 1px solid var(--rand);
  padding: 2rem 0 1.5rem;
}
.intro p {
  max-width: 44rem;
  font-size: 1.12rem;
  margin: 0.5rem 0 1.25rem;
}

/* ---------------------------------------------------------------- zoeken */

.zoekbalk {
  background: var(--wit);
  padding: 1rem;
  margin: 1.5rem 0;
  box-shadow: var(--schaduw);
}

.veldenrij {
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 44rem) {
  .veldenrij {
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    align-items: end;
  }
}

label {
  display: block;
  font-family: var(--ui);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tekst);
  margin-bottom: 0.3rem;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--tekst);
  background: var(--wit);
  border: 2px solid var(--rand);
  border-radius: var(--straal);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--grijs);
}
textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.55;
}

.hulp {
  font-size: 0.9rem;
  color: var(--grijs);
  margin: 0.3rem 0 0;
}

/* ---------------------------------------------------------------- oproepen */

.aantal {
  font-size: 1rem;
  color: var(--grijs);
  margin: 1.25rem 0 0.75rem;
}

.kaarten {
  display: grid;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 46rem) {
  .kaarten {
    grid-template-columns: 1fr 1fr;
  }
}

/* Geen kader om het vlak: de kleurbalk links en de schaduw bakenen de kaart al af.
   De hele kaart is klikbaar via een overlay op de titellink; de links in de voet
   liggen daar met z-index bovenop en blijven dus apart aanklikbaar. */
.kaart {
  position: relative;
  background: var(--wit);
  border-left: 6px solid var(--accent, var(--grijs));
  padding: 1.1rem 1.25rem;
  box-shadow: var(--schaduw);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.kaart:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.14),
    0 8px 20px rgba(0, 0, 0, 0.08);
}
.kaart:hover .kaart__titel a {
  color: var(--rood);
}

/* Wijst de bezoeker een knop in de voet aan, dan is dát het doel en niet de kaart.
   Browsers zonder :has() slaan deze twee regels over en houden de hover van de kaart. */
.kaart:has(.kaart__voet a:hover) {
  box-shadow: var(--schaduw);
}
.kaart:has(.kaart__voet a:hover) .kaart__titel a {
  color: var(--zwart);
}

.kaart__titel a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.kaart__voet a {
  position: relative;
  z-index: 1;
}

a.label {
  color: var(--tekst);
  text-decoration: none;
}
a.label:hover,
a.label:focus-visible {
  color: var(--zwart);
  box-shadow: inset 0 0 0 2px var(--accent, var(--grijs));
}

.kaart__reacties {
  color: var(--rood);
}
.kaart__reacties:hover {
  color: var(--rood-donker);
}

.kaart__titel {
  margin: 0;
  font-size: 1.2rem;
}
.kaart__titel a {
  color: var(--zwart);
}
.kaart__titel a:hover {
  color: var(--rood);
}

.kaart__tekst {
  margin: 0;
  color: var(--tekst);
}

.kaart__voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  font-family: var(--ui);
  font-size: 0.95rem;
  color: var(--grijs);
  margin-top: auto;
  padding-top: 0.35rem;
}

.persoon {
  font-weight: 600;
  color: var(--tekst);
}

/* Labels: pastel als achtergrond met donkere tekst — dat haalt ruim AA-contrast,
   terwijl het verzadigde accent dat als tekstkleur niet zou halen. */
.label {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-family: var(--ui);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--tekst);
  background: var(--pastel, var(--vlak));
  white-space: nowrap;
}

.label--type {
  background: var(--wit);
  border: 2px solid var(--accent, var(--grijs));
}

.leeg {
  background: var(--wit);
  border: 2px dashed var(--rand);
  border-radius: var(--straal);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--grijs);
}

/* ---------------------------------------------------------------- detailpagina */

.paneel {
  background: var(--wit);
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--schaduw);
}

.paneel--oproep {
  border-top: 6px solid var(--accent, var(--rood));
}

.oproeptekst {
  font-size: 1.1rem;
  white-space: pre-wrap;
}

.reacties {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.reactie {
  background: var(--vlak-licht);
  border-left: 4px solid var(--rand);
  padding: 0.75rem 1rem;
}
.reactie__meta {
  font-size: 0.88rem;
  color: var(--grijs);
}

.terug {
  display: inline-block;
  margin: 1.25rem 0 0;
}

/* ---------------------------------------------------------------- formulieren */

.formulier {
  display: grid;
  gap: 1.25rem;
}
.veld {
  display: grid;
}

/* Een fieldset brengt van zichzelf een kader mee; dat past niet bij de huisstijl. */
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
legend {
  padding: 0;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
}

.keuzes {
  display: grid;
  gap: 0.6rem;
}
@media (min-width: 34rem) {
  .keuzes--twee {
    grid-template-columns: 1fr 1fr;
  }
}

.keuze {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--wit);
  border: 2px solid var(--rand);
  border-radius: var(--straal);
  cursor: pointer;
  font-weight: 400;
  margin: 0;
}
.keuze:hover {
  border-color: var(--grijs);
}
.keuze input {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0.2rem 0 0;
  flex: none;
}
.keuze:has(input:checked) {
  border-color: var(--rood);
  background: #fff5f5;
}
.keuze strong {
  display: block;
  font-family: var(--ui);
}
.keuze span {
  font-size: 0.92rem;
  color: var(--grijs);
}

/* Honeypot: onzichtbaar voor mensen, ingevuld door bots. */
.val {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.melding {
  padding: 1rem 1.25rem;
  border-radius: var(--straal);
  border-left: 6px solid var(--grijs);
  background: var(--vlak);
  margin: 1.25rem 0;
}
.melding--fout {
  border-left-color: var(--rood);
  background: #fdf2f2;
}
.melding--goed {
  border-left-color: #3a9d5d;
  background: #f1f8f3;
}
.melding--let-op {
  border-left-color: var(--signaal);
  background: #fdf9ec;
}
.melding ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

/* ---------------------------------------------------------------- voet */

.voet {
  background: var(--wit);
  border-top: 1px solid var(--rand);
  margin-top: 3rem;
  padding: 1.75rem 0;
  font-size: 0.95rem;
  color: var(--grijs);
}
.voet a {
  color: var(--grijs);
}
.voet a:hover {
  color: var(--zwart);
}
.voet nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------- beheer */

.beheerkop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1.25rem 0 0.5rem;
}
.beheerkop h1 {
  margin: 0;
}
.beheerkop nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.beheerkop form {
  margin: 0;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0;
}

.beoordelingen {
  margin: 1.5rem 0 2rem;
}
.beoordelingen h2 {
  margin-bottom: 0.75rem;
}
.beoordelingen__lijst {
  display: grid;
  gap: 1rem;
}
.beoordeling {
  background: var(--wit);
  border-top: 4px solid var(--accent, var(--rood));
  padding: 1rem 1.25rem;
  box-shadow: var(--schaduw);
}
.beoordeling h3 {
  margin: 0 0 0.35rem;
}
.beoordeling p {
  margin: 0.45rem 0;
}
.beoordeling a:not(.knop) {
  color: var(--rood);
}
@media (min-width: 50rem) {
  .beoordelingen__lijst {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}
.tab {
  padding: 0.55rem 1rem;
  border: 2px solid var(--rand);
  background: var(--wit);
  text-decoration: none;
  color: var(--tekst);
  font-family: var(--ui);
  font-size: 0.95rem;
}
.tab--actief {
  background: var(--rood);
  border-color: var(--rood);
  color: var(--wit);
}
.tab__aantal {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.45rem;
  background: var(--signaal-zacht);
  color: var(--tekst);
  font-size: 0.85rem;
}
.tab--actief .tab__aantal {
  background: rgba(255, 255, 255, 0.3);
  color: var(--wit);
}

.status {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 700;
}
.status--pending {
  background: var(--signaal-zacht);
}
.status--live {
  background: #b0d8be;
}
.status--flagged {
  background: var(--signaal);
}
.status--hidden,
.status--removed {
  background: var(--rand);
  color: var(--grijs);
}
.status--failed {
  background: #fbd5d5;
}
.status--sent {
  background: #b0d8be;
}

.acties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.acties form {
  display: inline;
}

.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--wit);
}
.tabel th,
.tabel td {
  padding: 0.6rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--rand);
}
.tabel th {
  font-family: var(--ui);
  font-size: 0.9rem;
}
.tabel--rol {
  display: block;
  overflow-x: auto;
}

/* Een noodsignaal in het beheerpaneel moet je niet over het hoofd kunnen zien. */
.paneel--nood {
  border: 2px solid var(--rood);
}

.noodbalk {
  margin: -1.5rem -1.5rem 1rem;
  padding: 0.9rem 1.5rem;
  background: var(--rood);
  color: var(--wit);
  font-family: var(--ui);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Het AI-oordeel krijgt bewust een eigen kleur en een merkje. Een redacteur moet in
   één oogopslag zien wat een machine vond en wat een vaste regel vond — anders leest
   het als één stem, en dat is precies hoe je te veel op een AI gaat vertrouwen. */
.guard--ai {
  background: #f3eef7;
  border-left: 4px solid #7c4d9e;
}
.guard--ai ul {
  padding-left: 1.2rem;
}
.guard__merk {
  display: inline-block;
  background: #7c4d9e;
  color: var(--wit);
  padding: 0.05rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-right: 0.4rem;
}

.guard {
  font-size: 0.9rem;
  background: var(--signaal-zacht);
  padding: 0.5rem 0.75rem;
  margin: 0.6rem 0 0;
}

/* Verwijzing naar 113. Rustig van toon: geen alarmkleur, wel duidelijk afgebakend.
   Rood zou hier als een waarschuwing of afkeuring lezen, en dat is het tegendeel
   van wat iemand op dat moment nodig heeft. */
.hulpblok {
  border-left: 6px solid var(--accent-hulp, #3a9d5d);
  background: #f1f8f3;
}
.hulpblok h2 {
  margin-top: 0;
}
.hulpblok__nummer {
  font-size: 1.15rem;
  line-height: 1.7;
  background: var(--wit);
  border-radius: var(--straal);
  padding: 1rem 1.15rem;
}

/* Kleine hulpklassen. Inline style-attributen kunnen niet: de Content-Security-Policy
   staat alleen stylesheets van de site zelf toe. */
.marge-nul {
  margin: 0;
}
.marge-boven-nul {
  margin-top: 0;
}
.tekstvak--klein {
  min-height: 5rem;
}

.kopieerveld {
  width: 100%;
  min-height: 22rem;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.95rem;
  line-height: 1.5;
}