/* ==========================================================================
   ADR-Awareness - /adr-awareness.nl/public/style/adr-awareness.css

   Zelfstandige stylesheet. adr-awareness.nl heeft een eigen document root en
   kan /style/main.css van de hoofdsite dus niet via een URL bereiken; die is
   hier bewust niet gekopieerd, omdat dit domein maar een handvol pagina's
   heeft. Kleuren volgen wel de Jolmers-huisstijl.
   ========================================================================== */

:root {
  --blauw:        #1b2738;
  --blauw-licht:  #9eb4d8;
  --oranje:       #f28c00;
  --oranje-licht: #f0a84d;
  --tekst:        #2b3348;
  --tekst-zacht:  #6b7590;
  --rand:         #e0e4ef;
  --vlak:         #f5f6f8;
  --groen:        #1a7a35;
  --rood:         #a32020;
}

* { box-sizing: border-box; }

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

img { max-width: 100%; height: auto; }
a { color: var(--blauw); }

.aw-binnen {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ─── Kop ──────────────────────────────────────────────────── */
.aw-kop { background: var(--blauw); }

.aw-kop-binnen {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.aw-merk { display: inline-flex; align-items: center; text-decoration: none; }

/* Hoogte hier vastleggen, niet alleen via het height="34"-attribuut in de HTML:
   de regel `img { height: auto }` hierboven is author-CSS en wint van zo'n
   attribuut. Zonder deze regel renderen beide logo's op hun eigen 85 px en
   wordt de balk ruim 100 px hoog - op een telefoon vult het logo dan bijna de
   volle breedte. */
.aw-merk img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
}

/* Het eigen logo staat groot in de balk: 64 px (44 was te klein, 01-10-2026).
   Het bestand is 128 px hoog, dus ook op een scherp scherm niet wazig. De balk
   groeit daarmee van 70 naar 82 px. */
.aw-logo img { height: 64px; }
.aw-logo-jolmers img { height: 52px; }
@media (max-width: 420px) {
  .aw-logo-jolmers img { height: 38px; }
}
@media (max-width: 420px) {
  .aw-logo img { height: 48px; }
}

.aw-merk-scheiding { color: var(--blauw-licht); font-size: 18px; }

/* Beide logo's zijn donker op transparant en zouden wegvallen tegen de blauwe
   balk; op een wit vlak blijven ze leesbaar én staan ze als gelijkwaardige
   merken naast elkaar. */
.aw-merk-vlak {
  background: #fff;
  border-radius: 6px;
  padding: 5px 10px;
}
/* Het partnerlogo even hoog als het Jolmers-pil-logo ernaast (52 px), was 34.
   Het OBM-logo is bijna vierkant en werd op 34 px een postzegel (02-10-2026). */
.aw-merk-vlak { padding: 3px 8px; }
.aw-merk-vlak img { height: 50px; }

/* Een logo dat zijn eigen gevulde vlak meebrengt, zoals dat van HUSA, heeft die
   witte lijst niet nodig: dan blijft er een randje van 1 px over dat het losmaakt
   van de blauwe balk. De ruimte die de lijst innam gaat naar het logo zelf, dat
   hier 46 px hoog staat in plaats van 34. Die hoogte moet hier staan en niet
   alleen in het height-attribuut, om dezelfde reden als hierboven bij
   .aw-merk img. De kop is 70 px hoog met 9 px lucht boven en onder, dus 46 + 2
   past. */
.aw-merk-eigenvlak {
  padding: 1px;
}

.aw-merk-eigenvlak img {
  height: 56px; /* was 46; gelijk met het pil-logo (02-10-2026) */
}
@media (max-width: 420px) {
  .aw-merk-vlak img { height: 36px; }
  .aw-merk-eigenvlak img { height: 40px; }
}

.aw-kop-tel {
  margin-left: auto;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.aw-kop-tel:hover { color: var(--oranje-licht); }

/* ─── Hoofdmenu ────────────────────────────────────────────── */
/* Staat binnen .aw-kop en houdt dus dezelfde blauwe ondergrond. Alleen een
   dunne scheidingslijn erboven: een afwijkende kleur zou het menu als losse
   strook tussen de kop en de pagina laten zweven, terwijl het bij de kop hoort. */
/* position:relative zodat een uitklapblok zich hieraan kan ophangen wanneer het
   op een smal scherm over de volle breedte gaat staan. */
.aw-menu { position: relative; border-top: 1px solid rgba(255, 255, 255, .14); }

.aw-menu ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aw-menu a {
  display: inline-block;
  padding: 11px 13px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blauw-licht);
  text-decoration: none;
  /* Altijd een rand, ook doorzichtig: anders verspringt de tekst een paar pixels
     zodra een item actief wordt of de muis erop komt. */
  border-bottom: 2px solid transparent;
}
.aw-menu a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .35); }

/* Waar de bezoeker nu is. aria-current doet hier het werk in plaats van een
   losse klasse: dan vertelt dezelfde bron het aan de browser én aan een
   schermlezer, en kunnen die twee niet uit elkaar lopen. */
.aw-menu a[aria-current="page"] { color: #fff; border-bottom-color: var(--oranje); }

/* Het eerste item links uitlijnen met het logo erboven. */
.aw-menu li:first-child a { padding-left: 0; }

/* Inloggen rechts: het is geen onderdeel van de etalage maar de ingang voor wie
   al gekocht heeft. */
.aw-menu li:last-child { margin-left: auto; }

/* ─── UITKLAPKOPPEN IN HET MENU ────────────────────────────────
   Lithium en Vragen bundelen elk een paar pagina's, zodat de balk zes items
   houdt in plaats van acht. De techniek is <details>/<summary>: die klapt uit
   zichzelf open, ook zonder JavaScript, en is met het toetsenbord te bedienen.
   Het driehoekje dat een browser standaard vóór een <summary> zet, halen we
   weg; we tekenen er zelf een aan de rechterkant. */
.aw-menu-groep { position: relative; }

.aw-menu-knop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 13px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blauw-licht);
  cursor: pointer;
  list-style: none;                 /* Firefox */
  border-bottom: 2px solid transparent;
}
.aw-menu-knop::-webkit-details-marker { display: none; }  /* Safari, oudere Chrome */
.aw-menu-knop::marker { content: ''; }
.aw-menu-knop:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .35); }
.aw-menu-knop:focus-visible { outline: 2px solid var(--oranje-licht); outline-offset: -2px; }

/* De kop licht op wanneer de bezoeker op een pagina eronder staat. */
.aw-menu-details[data-actief="1"] > .aw-menu-knop { color: #fff; border-bottom-color: var(--oranje); }

.aw-menu-pijl {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.aw-menu-details[open] > .aw-menu-knop .aw-menu-pijl { transform: rotate(180deg); }

/* Nadrukkelijk block, en met genoeg gewicht: `.aw-menu ul { display: flex }`
   geldt ook voor deze lijst en weegt zwaarder dan een enkele klasse. Zonder dit
   zetten de regels zich naast elkaar, wat op een smal scherm op twee kolommen
   lijkt. Op een breed scherm viel het niet op, omdat de items daar toevallig
   afbraken; dat is precies waarom het de telefoon was die het aanwees. */
.aw-menu ul.aw-menu-sub {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 230px;
  margin: 0;
  padding: 6px 0;
  background: var(--blauw);
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .3);
  list-style: none;
}

/* Binnen het uitklapblok is een onderrand per regel onrustig; daar markeert een
   streep aan de linkerkant waar je bent. */
.aw-menu-sub a {
  display: block;
  padding: 9px 15px;
  border-bottom: 0;
  white-space: nowrap;
}
.aw-menu-sub a:hover { color: #fff; background: rgba(255, 255, 255, .08); border-bottom: 0; }

/* Twee regels van de balk gelden ook binnen dit blok, want ze kijken naar
   li:first-child en li:last-child zonder te letten op welke lijst dat is. Het
   eerste item verloor daardoor zijn linkermarge en het laatste werd met
   margin-left:auto naar rechts geduwd. Hier teruggezet in plaats van de regels
   in de balk te versmallen: die doen daar precies wat ze moeten doen. */
.aw-menu-sub li:first-child a { padding-left: 15px; }
.aw-menu-sub li:last-child { margin-left: 0; }
.aw-menu-sub a[aria-current="page"] {
  color: #fff;
  border-bottom: 0;
  box-shadow: inset 3px 0 0 var(--oranje);
}

@media (max-width: 640px) {
  .aw-menu a { padding: 10px 10px; font-size: 13px; }
  /* Op een smal scherm breekt de rij af; een rechts uitgelijnd laatste item
     komt dan alleen op zijn eigen regel te staan, wat losgeslagen oogt. */
  .aw-menu li:last-child { margin-left: 0; }

  .aw-menu-knop { padding: 10px 10px; font-size: 13px; }

  /* Een zwevend blok van 230 px valt op een telefoon half buiten beeld. Het
     hangt zich daarom aan de hele menubalk in plaats van aan de kop, en loopt
     over de volle breedte onder de balk door. De balk zelf houdt zo zijn
     gewone ritme; zou de kop hier 100 % breed worden, dan springen de andere
     items er omheen en oogt het menu rommelig. */
  /* Op een telefoon gaat het blok NIET zweven. Een zwevend blok moet zich aan
     iets ophangen en dan met left/right worden opgerekt, en dat bleek hier niet
     te doen wat je verwacht. In de gewone tekststroom is er niets te rekken: de
     lijst is vanzelf zo breed als zijn kop, en die kop maken we schermbreed
     zodra hij openstaat. Alleen dan, zodat de balk verder zijn eigen ritme
     houdt. Zelfde selector als de basisregel, anders wint die op gewicht. */
  .aw-menu-groep { position: static; width: 100%; }
  .aw-menu ul.aw-menu-sub {
    position: static;
    min-width: 0;
    width: auto;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
    background: rgba(0, 0, 0, .22);
  }
  .aw-menu-sub a { padding: 11px 16px; white-space: normal; }
  .aw-menu-sub li:first-child a { padding-left: 16px; }
}

/* ─── Hero ─────────────────────────────────────────────────── */
/* De ruiten van de banner op de achtergrond (01-10-2026), anders was de band
   erg effen. Kleur en beeld apart gezet: de donkere stylesheet verandert alleen
   de kleur, en de ruiten blijven dan staan. */
.aw-hero {
  background-color: var(--blauw);
  /* Het verloop uit het logo en de banner, onder de ruiten. */
  background-image: url("/images/ruiten-achtergrond.svg"), linear-gradient(135deg, #1b2738 0%, #22344d 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding: 40px 0 44px;
}
.aw-hero h1 {
  font-size: 30px;
  line-height: 1.25;
  margin: 6px 0 12px;
  color: #fff;
}
.aw-hero p { color: var(--blauw-licht); font-size: 15px; margin: 0; max-width: 62ch; }

.aw-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--oranje-licht);
  margin: 0;
}

/* ─── Secties ──────────────────────────────────────────────── */
.aw-sectie { padding: 40px 0; }
.aw-sectie h2 { font-size: 20px; color: var(--blauw); margin: 0 0 6px; }
.aw-sectie > .aw-binnen > p.aw-intro { color: var(--tekst-zacht); font-size: 14px; margin: 0 0 22px; }

/* ─── Lopende tekst (privacy, voorwaarden) ─────────────────── */
/* Smaller dan de rest van de site: een regel van ruim 70 tekens leest zwaar,
   en juist deze pagina's worden van begin tot eind doorgelezen. */
.aw-tekst { max-width: 68ch; font-size: 15px; line-height: 1.65; }
.aw-tekst h2 { margin: 30px 0 8px; }
.aw-tekst h2:first-of-type { margin-top: 6px; }
.aw-tekst p { margin: 0 0 12px; }
.aw-tekst ul { margin: 0 0 14px; padding-left: 20px; }
.aw-tekst li { margin-bottom: 6px; }
.aw-tekst-meta {
  color: var(--tekst-zacht);
  font-size: 13px;
  border-bottom: 1px solid var(--rand);
  padding-bottom: 14px;
}

/* ─── Kaarten ──────────────────────────────────────────────── */
.aw-kaarten {
  display: grid;
  /* min(290px, 100%) i.p.v. een kale 290px: op een 320 px-scherm is de
     contentkolom maar 280 px breed, en dan zou een harde minimumbreedte de hele
     pagina zijwaarts openduwen. */
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: 18px;
}

.aw-kaart {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aw-kaart h3 { font-size: 16px; color: var(--blauw); margin: 0; }
.aw-kaart p { font-size: 13.5px; color: var(--tekst-zacht); margin: 0; flex: 1; }

.aw-kaart-uitgelicht { border: 2px solid var(--oranje); }

.aw-kaart-voet {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f3fb;
}

/* ─── Prijs ────────────────────────────────────────────────── */
.aw-prijs { font-size: 21px; font-weight: 800; color: var(--blauw); }
.aw-prijs small { font-size: 11px; font-weight: 400; color: var(--tekst-zacht); }

.aw-prijs-oud {
  font-size: 14px;
  color: var(--tekst-zacht);
  text-decoration: line-through;
  margin-right: 6px;
  font-weight: 400;
}

.aw-badge {
  display: inline-block;
  background: var(--oranje);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
}

/* Kortingsblok op de partnerpagina */
.aw-korting {
  background: #fff;
  border: 2px solid var(--oranje);
  border-radius: 10px;
  padding: 22px 24px;
}
.aw-korting-regel {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  padding: 7px 0;
}
.aw-korting-regel + .aw-korting-regel { border-top: 1px dashed var(--rand); }
.aw-korting-totaal {
  border-top: 2px solid var(--blauw) !important;
  margin-top: 6px;
  padding-top: 12px;
  font-size: 17px;
  font-weight: 800;
  color: var(--blauw);
}
.aw-korting-bedrag { white-space: nowrap; }
.aw-korting-af { color: var(--groen); font-weight: 700; }

.aw-code {
  display: inline-block;
  background: var(--blauw);
  color: #fff;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 5px 12px;
  border-radius: 5px;
}

/* ─── Knoppen ──────────────────────────────────────────────── */
.aw-knop {
  display: inline-block;
  background: var(--blauw);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 22px;
  border: 0;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.aw-knop:hover { background: #071845; }

.aw-knop-oranje { background: var(--oranje); }
.aw-knop-oranje:hover { background: #cf7813; }

.aw-knop-groot { font-size: 16px; padding: 14px 30px; }

.aw-knop-tekst {
  background: none;
  border: 1px dashed var(--rand);
  color: var(--blauw);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
}
.aw-knop-tekst:hover { border-color: var(--blauw); }

/* ─── Formulier ────────────────────────────────────────────── */
.aw-form { max-width: 720px; }

.aw-form-blok {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 22px 24px;
  margin-bottom: 18px;
}
.aw-form-blok > h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--blauw);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.aw-tip { font-size: 12.5px; color: var(--tekst-zacht); margin: 0 0 16px; }

.aw-factuur-extra { margin-top: 14px; }
.aw-factuur-extra summary { color: var(--blauw); cursor: pointer; font-size: 13px; font-weight: 700; }
.aw-factuur-extra summary span { color: var(--tekst-zacht); font-weight: 400; }
.aw-factuur-extra .aw-veld-rij:first-of-type { margin-top: 14px; }

.aw-bestel-zeker {
  border: 1px solid #cdd8ed;
  border-left: 4px solid var(--groen);
  background: #f7faf8;
  border-radius: 8px;
  color: var(--tekst);
  margin: 0 0 18px;
  padding: 14px 16px;
}
.aw-bestel-zeker strong { color: var(--blauw); }
.aw-bestel-zeker ol { margin: 7px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.65; }

.aw-afronden {
  align-items: center;
  background: #f7f9fd;
  border: 1px solid var(--rand);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin-top: 20px;
  padding: 16px;
}
.aw-afronden strong { color: var(--blauw); }
.aw-afronden span { color: var(--tekst-zacht); font-size: 12.5px; }
.aw-afronden .aw-knop { margin-left: auto; }

.aw-veld-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.aw-veld-rij:last-child { margin-bottom: 0; }

.aw-veld label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tekst);
  margin-bottom: 4px;
}
.aw-veld input[type=text],
.aw-veld input[type=email],
.aw-veld input[type=date],
.aw-veld input[type=password],
.aw-veld select {
  width: 100%;
  font-size: 14px;
  font-family: inherit;
  color: var(--tekst);
  padding: 9px 11px;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: #fff;
}
.aw-veld input:focus,
.aw-veld select:focus {
  outline: 2px solid var(--oranje-licht);
  outline-offset: -1px;
  border-color: var(--oranje);
}
/* Vast gegeven, niet te wijzigen (bv. een gekoppelde werkgever) */
.aw-veld input:disabled { background: #f2f4f9; color: var(--tekst-zacht); }
.aw-verplicht { color: var(--rood); }

.aw-deelnemer {
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #fcfcfe;
}
.aw-deelnemer-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.aw-deelnemer-nr { font-size: 12px; font-weight: 700; color: var(--blauw); }
.aw-verwijder {
  background: none;
  border: 0;
  color: var(--rood);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}

.aw-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 14px;
}
.aw-radio:last-child { margin-bottom: 0; }
.aw-radio span { display: block; font-size: 12.5px; color: var(--tekst-zacht); }
.aw-radio input { margin-top: 3px; }

/* Trainingkeuze bovenaan het bestelformulier. Bewust keuzerondjes en geen
   uitklaplijst: bij acht of negen trainingen moet de besteller ze naast elkaar
   kunnen lezen, met de prijs erbij, in plaats van ze één voor één uit een
   pulldown te moeten opdiepen. */
.aw-keuze { align-items: center; }
.aw-keuze:hover { border-color: var(--blauw); }
/* :has wordt niet overal ondersteund; waar het niet werkt blijft de keuze
   gewoon zichtbaar aan het bolletje zelf. */
.aw-keuze:has(input:checked) {
  border-color: var(--blauw);
  background: #f7f9ff;
}
.aw-keuze > div:first-of-type { flex: 1 1 auto; }
.aw-keuze strong { display: block; font-size: 14px; color: var(--tekst); }
.aw-keuze-prijs {
  flex: none;
  margin-left: 12px;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: var(--blauw);
  white-space: nowrap;
}
.aw-keuze-prijs span { font-size: 11.5px; font-weight: 400; }
.aw-keuze-meer { margin-top: 2px; }
.aw-keuze-meer a { font-size: 12px; color: var(--blauw); }

/* Eén training: geen keuze, wel tonen wat er besteld wordt. */
.aw-gekozen-training {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: #f7f9ff;
  font-size: 14px;
}
.aw-gekozen-training strong { display: block; color: var(--blauw); }
.aw-gekozen-training span { font-size: 12.5px; color: var(--tekst-zacht); }

/* Afwijkende training voor één deelnemer - dichtgeklapt, want het is de
   uitzondering. Een <details> en geen JS-schakelaar: zo werkt het ook zonder
   JavaScript, en na een validatiefout kan de server hem gewoon open zetten. */
.aw-afwijking { margin-top: 10px; }
.aw-afwijking > summary {
  font-size: 12.5px;
  color: var(--blauw);
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
}
.aw-afwijking > summary::-webkit-details-marker { display: none; }
.aw-afwijking > summary::before { content: '+ '; font-weight: 700; }
.aw-afwijking[open] > summary::before { content: '− '; }
.aw-afwijking > summary:hover { text-decoration: underline; }
.aw-afwijking .aw-veld { margin-top: 8px; }
/* Deze deelnemer volgt iets anders dan de rest - ook dichtgeklapt zichtbaar. */
.aw-afwijking.is-afwijkend > summary { font-weight: 700; color: var(--oranje); }

.aw-akkoord {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--tekst-zacht);
  margin-bottom: 18px;
}
.aw-akkoord input { margin-top: 3px; flex: none; }

/* Bijbestelling van het pasje, per deelnemer in het bestelformulier */
.aw-pasje {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px dashed var(--rand);
  border-radius: 7px;
  background: #fff;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tekst-zacht);
  cursor: pointer;
}
.aw-pasje:hover { border-color: var(--blauw); }
.aw-pasje input { margin-top: 2px; flex: none; }
.aw-pasje strong { color: var(--blauw); }

/* Zelfde blok, maar het pasje zit bij de prijs in: geen keuze, dus geen vinkje,
   geen aanwijzende cursor en geen hover - anders leest het als iets waarop je
   kunt klikken. De doorgetrokken rand in plaats van de streepjeslijn maakt het
   onderscheid met een bijbestelling ook zichtbaar. */
.aw-pasje-inbegrepen {
  cursor: default;
  border-style: solid;
  border-color: var(--groen);
  background: #f3faf5;
}
.aw-pasje-inbegrepen:hover { border-color: var(--groen); }
.aw-pasje-inbegrepen > span[aria-hidden] {
  flex: none;
  font-weight: 700;
  color: var(--groen);
}
.aw-pasje-inbegrepen strong { color: var(--groen); }

/* Kortingscode - staat los van de deelnemerblokken, want de code geldt voor de
   hele bestelling en niet voor één regel. */
.aw-kortingveld { margin-top: 16px; }
.aw-kortingveld label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tekst);
  margin-bottom: 4px;
}
.aw-optioneel { font-weight: 400; color: var(--tekst-zacht); }
.aw-kortingveld-rij { display: flex; gap: 8px; align-items: stretch; }
.aw-kortingveld-rij input {
  flex: 0 1 220px;
  font-size: 14px;
  font-family: inherit;
  color: var(--tekst);
  padding: 9px 11px;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: #fff;
  /* Alleen de weergave; de vergelijking in de database is toch
     hoofdletterongevoelig. Zo ziet een overgetypte code er meteen uit als een
     code, en niet als een half woord. */
  text-transform: uppercase;
}
.aw-kortingveld-rij input:focus {
  outline: 2px solid var(--oranje-licht);
  outline-offset: -1px;
  border-color: var(--oranje);
}
.aw-kortingveld-rij .aw-knop-tekst { flex: none; }
.aw-korting-status {
  font-size: 12.5px;
  color: var(--tekst-zacht);
  margin: 6px 0 0;
  min-height: 1em; /* geen springende lay-out zodra de melding verschijnt */
}
.aw-korting-status.is-geldig { color: var(--groen); font-weight: 600; }

.aw-totaalregel {
  font-size: 13px;
  color: var(--tekst-zacht);
  margin: 14px 0 0;
}
.aw-totaalregel strong { color: var(--blauw); font-size: 15px; }

/* ─── Meldingen ────────────────────────────────────────────── */
.aw-melding {
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 20px;
  font-size: 14px;
}
.aw-melding-fout { background: #fdecea; border: 1px solid #f5b8b8; color: var(--rood); }
.aw-melding-ok   { background: #e6f4ea; border: 1px solid #a8d5b4; color: #2a5a35; }
.aw-melding-wacht{ background: #fff8e6; border: 1px solid #f0c060; color: #6a4a10; }
.aw-melding ul { margin: 0; padding-left: 18px; }
.aw-melding h2 { font-size: 18px; margin: 0 0 8px; }
/* Doorgaan-knop onder de uitslag van een geslaagde toets (leren.php) */
.aw-volgende-stap { margin: 16px 0 0; }

/* ─── Vergelijking: wat vervalt vs. wat blijft (1136-pagina) ── */
.aw-vergelijk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0;
}
.aw-vergelijk-kolom {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 18px 20px;
}
.aw-vergelijk-kolom h3 { font-size: 14px; color: var(--tekst-zacht); margin: 0 0 10px; }
.aw-vergelijk-kolom ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; }

/* De rechterkolom is waar het om draait op deze pagina - die krijgt nadruk. */
.aw-vergelijk-blijft { border: 2px solid var(--oranje); }
.aw-vergelijk-blijft h3 { color: var(--blauw); font-weight: 700; }

/* ─── Staffeltabel ─────────────────────────────────────────── */
.aw-staffel {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.aw-staffel th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--tekst-zacht);
  padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--rand);
}
.aw-staffel td { padding: 9px 10px 9px 0; border-bottom: 1px solid #f0f3fb; }
.aw-staffel tr:last-child td { border-bottom: 0; }

/* De trede waar het pasje bij de prijs in zit: dit is de regel waar de bezoeker
   naartoe gerekend moet worden, dus die mag opvallen. */
.aw-staffel tr.is-voordeligst td { background: #f4faf5; font-weight: 600; }
/* Opleidingen in de rijen, tredes in de kolommen. Zo blijft de tabel even breed
   als er een opleiding bij komt; met een kolom per opleiding liep hij buiten het
   kader (11-09-2026). De rol-omhulling is het vangnet op een smal scherm. */
.aw-staffel-rol { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.aw-staffel-per-opleiding { min-width: 520px; }

.aw-staffel th.aw-staffel-opleiding {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blauw);
  padding: 9px 16px 9px 0;
  border-bottom: 1px solid #f0f3fb;
  vertical-align: top;
  line-height: 1.35;
}

.aw-staffel tr:last-child th.aw-staffel-opleiding { border-bottom: 0; }

/* De naam van de opleiding is sinds 30-09-2026 een link naar haar eigen
   pagina. Dezelfde opmaak als de titel op de cursuskaart, zodat de bezoeker
   het op beide plekken als hetzelfde herkent: kleur van de omliggende tekst,
   met een dunne streep die bij aanwijzen vol en dikker wordt.
   Het tikdoel loopt over de hele cel (display:block) en niet alleen over de
   letters; op een telefoon scheelt dat missers, want deze tabel moet daar
   zijdelings geschoven worden en dan is een smal doel lastig raken. */
.aw-staffel th.aw-staffel-opleiding a {
  display: block;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(10, 34, 96, .45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.aw-staffel th.aw-staffel-opleiding a:hover,
.aw-staffel th.aw-staffel-opleiding a:focus-visible {
  text-decoration-color: var(--blauw);
  text-decoration-thickness: 2px;
}
.aw-staffel th.aw-staffel-opleiding a:focus-visible {
  outline: 3px solid var(--oranje);
  outline-offset: 2px;
}

.aw-staffel .aw-staffel-getal { text-align: right; white-space: nowrap; padding-right: 14px; }
.aw-staffel td.aw-staffel-getal.is-voordeligst,
.aw-staffel th.aw-staffel-getal.is-voordeligst { background: #f4faf5; }
.aw-staffel td.aw-staffel-getal.is-voordeligst strong { font-weight: 700; }

.aw-staffel-korting {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 11px;
  color: var(--tekst-zacht);
  margin-top: 2px;
}

.aw-staffel-extra {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--groen);
}

/* ─── Staffelblok (aw_staffelblok.php) ─────────────────────── */
/* Staat op de startpagina, /bedrijven/, de doelgroeppagina's en in de
   kennisartikelen. Eén opmaak, zodat de propositie waarop geadverteerd wordt
   overal hetzelfde oogt. */
.aw-staffelblok { max-width: 760px; margin: 26px 0; }
.aw-staffelblok-kop {
  font-size: 19px;
  color: var(--blauw);
  margin: 0 0 6px;
}
.aw-staffelblok-intro {
  font-size: 14px;
  color: var(--tekst-zacht);
  margin: 0 0 16px;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .aw-vergelijk { grid-template-columns: 1fr; }
  .aw-staffel { font-size: 13px; }
  .aw-staffel th, .aw-staffel td { padding-right: 6px; }
  .aw-staffelblok { padding: 18px 16px; }
  .aw-staffelblok-kop { font-size: 17px; }
}

/* ─── Cursuspagina ─────────────────────────────────────────── */
.aw-cursus {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}
.aw-cursus-tekst h2 { font-size: 18px; color: var(--blauw); margin: 0 0 8px; }

/* Blijft in beeld bij het scrollen langs een lange beschrijving, zodat de prijs
   en de inschrijfknop altijd bereikbaar zijn. */
.aw-cursus-zij {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 22px;
  position: sticky;
  top: 16px;
}

/* De cursusomschrijving uit het beheer, opgedeeld in alinea's (aw_alineas). */
.aw-omschrijving p {
  font-size: 14.5px;
  color: var(--tekst-zacht);
  line-height: 1.7;
  margin: 0 0 12px;
}
.aw-omschrijving p:last-child { margin-bottom: 0; }

.aw-hoofdstuklijst {
  margin: 0 0 14px;
  padding-left: 20px;
  font-size: 14px;
  color: var(--tekst);
}
.aw-hoofdstuklijst li { margin-bottom: 5px; }

.aw-kenmerken {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  font-size: 13.5px;
  color: var(--tekst);
}
.aw-kenmerken li {
  padding: 5px 0 5px 22px;
  position: relative;
}
.aw-kenmerken li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--groen);
  font-weight: 700;
}

@media (max-width: 780px) {
  .aw-cursus { grid-template-columns: 1fr; }
  /* Niet plakkend op een smal scherm: daar dekt zo'n blok de tekst af. */
  .aw-cursus-zij { position: static; }
}

/* ─── Pluspunten ───────────────────────────────────────────── */
.aw-punten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 30px;
  padding: 0;
  list-style: none;
}
.aw-punten li {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
}
.aw-punten strong { display: block; color: var(--blauw); font-size: 13.5px; }

/* ==========================================================================
   LANDINGSPAGINA (index.php)

   Alleen deze pagina is lang genoeg om afwisseling nodig te hebben; de rest van
   de site is kort en heeft aan de basisopmaak hierboven genoeg. Vandaar dat
   deze klassen apart staan en niet zijn opgegaan in de generieke regels.
   ========================================================================== */

.aw-hero-groot { padding: 54px 0 58px; }
.aw-hero-groot h1 { font-size: 36px; margin-bottom: 16px; }
.aw-hero-tekst { font-size: 16px; line-height: 1.65; }

.aw-hero-bewijs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.aw-hero-bewijs li { position: relative; padding-left: 18px; }
.aw-hero-bewijs li::before { content: "✓"; color: var(--oranje-licht); position: absolute; left: 0; }
.aw-hero-vertrouwen { margin-top: 15px !important; color: var(--blauw-licht) !important; font-size: 12.5px !important; }

.aw-hero-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* Tweede knop op een blauwe ondergrond: een omlijnde variant, zodat de oranje
   hoofdknop de aandacht houdt en er niet twee knoppen om voorrang vechten. */
.aw-knop-lijn {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .55);
  padding: 12px 26px;
}
.aw-knop-lijn:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* ─── Vertrouwensbalk onder de hero ────────────────────────── */
.aw-usp-balk {
  background: #fff;
  border-bottom: 1px solid var(--rand);
}
.aw-usp-balk ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0;
  padding: 13px 0;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--tekst);
}
.aw-usp-balk li { padding-left: 20px; position: relative; }
.aw-usp-balk li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--groen);
  font-weight: 700;
}

/* Afwisselende sectie-achtergrond. Iets blauwer dan de body-kleur, zodat witte
   kaarten er duidelijk op uitkomen zonder dat de pagina bont wordt. */
.aw-sectie-vlak { background: #ecf0f8; }

/* ─── Kernantwoord ─────────────────────────────────────────── */
/* Het blok dat een zoekmachine als antwoordfragment kan tonen. Visueel apart
   gezet omdat het ook voor een gehaaste bezoeker het antwoord moet zijn. */
.aw-kernantwoord {
  background: #fff;
  border: 1px solid var(--rand);
  border-left: 5px solid var(--oranje);
  border-radius: 10px;
  padding: 22px 26px;
}
.aw-kernantwoord h2 { margin-top: 0; }
.aw-kernantwoord p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--tekst);
  margin: 0 0 10px;
  max-width: 74ch;
}
.aw-kernantwoord p:last-child { margin-bottom: 0; }
.aw-kernantwoord-bron { font-size: 12.5px !important; color: var(--tekst-zacht) !important; }

/* ─── Feitentabel ──────────────────────────────────────────── */
.aw-feiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 0 30px;
  margin: 24px 0 0;
}
.aw-feiten > div {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rand);
  font-size: 13.5px;
}
.aw-feiten dt { flex: 0 0 104px; margin: 0; font-weight: 700; color: var(--blauw); }
.aw-feiten dd { margin: 0; color: var(--tekst-zacht); }

/* ─── Sprongnavigatie ──────────────────────────────────────── */
.aw-inhoudsopgave { margin: 26px 0 0; }
.aw-inhoudsopgave > p {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tekst-zacht);
  margin: 0 0 8px;
}
.aw-inhoudsopgave ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aw-inhoudsopgave a {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12.5px;
  text-decoration: none;
}
.aw-inhoudsopgave a:hover { border-color: var(--blauw); background: #f0f3fb; }

/* Zonder deze marge verdwijnt de sectiekop onder de bovenrand van het scherm
   zodra je op een sprongkoppeling klikt. */
:target { scroll-margin-top: 20px; }

/* ─── Lopende tekst binnen een sectie ──────────────────────── */
.aw-lopend {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--tekst-zacht);
  max-width: 74ch;
  margin: 0 0 16px;
}

.aw-bronnen { font-size: 12.5px; color: var(--tekst-zacht); margin: 18px 0 0; }

/* ─── Kaarten op de landingspagina ─────────────────────────── */
/* DE TITEL MOET ERUITZIEN ALS EEN LINK (30-09-2026).
   Hier stond `text-decoration: none` met alleen een onderstreping bij hover.
   De titel WAS toen al een link naar de cursuspagina en de hele kaart was al
   aanklikbaar, maar daar was niets van te zien: op een kaart die je nog niet
   hebt aangewezen staat de kop er precies zo bij als elke andere kop op de
   pagina. Simon vroeg op 30-09-2026 of de titels aanklikbaar konden worden,
   terwijl ze dat al waren. Dat is het antwoord: als niemand het ziet, werkt
   het niet.
   Op een aanraakscherm is het erger: daar bestaat hover niet, dus daar was er
   helemaal geen signaal.

   De onderstreping staat er nu altijd, maar zacht: een dunne lijn in het
   blauw van de huisstijl op 45 procent, met ruimte tussen de letters en de
   lijn zodat de staartletters er niet doorheen lopen. Bij hover en bij
   toetsenbordfocus wordt hij vol en dikker. */
.aw-kaart h3 a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(10, 34, 96, .45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.aw-kaart h3 a:hover,
.aw-kaart h3 a:focus-visible {
  text-decoration-color: var(--blauw);
  text-decoration-thickness: 2px;
}
/* GEEN `cursor: pointer` op .aw-kaart zelf. Dat stond hier even, en het zou
   het handje ook geven op de contactkaart (index.php, .aw-kaart-contact), die
   helemaal geen titel-link heeft: een handje boven iets dat niet klikt is
   erger dan geen handje. Waar de titel WEL een link is, dekt het ::after
   hieronder de hele kaart, en dat is generated content van een <a href>, dus
   daar geeft de browser het handje vanzelf. */
/* De hele kaart is een ruim klikdoel; de bestelknop blijft daar visueel en
   technisch bovenop liggen als afzonderlijke link. */
.aw-kaart { position: relative; }
.aw-kaart h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.aw-kaart .aw-kaart-voet .aw-knop { position: relative; z-index: 2; }
/* Een eigen verwijzing in de kaart (keuzehulp op /zorg/) moet ook boven het
   klikvlak liggen, anders gaat hij naar de cursuspagina in plaats van zijn eigen doel. */
.aw-kaart .aw-verwijzing a { position: relative; z-index: 2; }
/* Prijsblok op de kaarten van /zorg/: boven de knoppen, zodat er in de voet ruimte
   blijft voor Bekijk en Bestellen naast elkaar. */
.aw-zorg-prijs { margin: auto 0 12px; }
.aw-kaart h3 a:focus-visible { outline: 3px solid var(--oranje); outline-offset: 3px; }
/* Het vlaggetje achter de titel van een anderstalige opleiding.
   Het staat BINNEN de h3 maar BUITEN de link, en krijgt daarom geen eigen
   z-index: zo blijft het onder het klikvlak van .aw-kaart h3 a::after liggen
   en blijft de hele kaart aanklikbaar.
   Het randje is er voor de witte delen van de vlag: zonder dat loopt hij op
   een witte kaart aan de bovenkant weg. */
/* De hoogte staat vast, de breedte niet: de Britse vlag is officieel 2:1 en de
   Poolse 8:5. Elke vlag draagt zijn eigen width-attribuut, zodat hij zijn
   verhouding houdt. Met een vaste breedte van 20px werd de Poolse uitgerekt. */
.aw-kaart-vlag {
  display: inline-block;
  width: auto;
  height: 10px;
  margin-left: 7px;
  vertical-align: 2px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 1px;
}
.aw-kaart-ondertekst {
  font-size: 12px !important;
  color: var(--oranje) !important;
  font-weight: 600;
  flex: none !important;
}
.aw-kaart-kenmerken {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  color: var(--tekst-zacht);
}
.aw-kaart-kenmerken li { padding: 3px 0 3px 18px; position: relative; }
.aw-kaart-kenmerken li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--groen);
  font-weight: 700;
}
.aw-kaart-prijs-incl { font-size: 11.5px; color: var(--tekst-zacht); }

/* ─── Rollen: voor wie geldt het ───────────────────────────── */
.aw-rollen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}
.aw-rollen li {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--tekst-zacht);
  line-height: 1.55;
}
.aw-rollen strong {
  display: block;
  color: var(--blauw);
  font-size: 13.5px;
  margin-bottom: 3px;
}

/* ─── De artikelen van hoofdstuk 1.3 ───────────────────────── */
.aw-artikelen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  margin: 22px 0;
}
.aw-artikelen article {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 18px 20px;
}
.aw-artikelen h3 { font-size: 14.5px; color: var(--blauw); margin: 0 0 8px; }
.aw-artikelen p { font-size: 13.5px; line-height: 1.65; color: var(--tekst-zacht); margin: 0; }
.aw-artikelen strong { color: var(--tekst); }

/* ─── Twee kolommen (situaties / vrijstellingen, werkgevers) ─ */
.aw-twee-kolommen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}
.aw-twee-kolommen h3 { font-size: 15px; color: var(--blauw); margin: 0 0 10px; }

.aw-vinklijst, .aw-kruislijst {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tekst-zacht);
}
.aw-vinklijst li, .aw-kruislijst li { padding: 6px 0 6px 24px; position: relative; }
.aw-vinklijst li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--groen);
  font-weight: 700;
}
/* Uitroepteken en geen kruisje: deze regels gaan over vrijstellingen die de
   opleidingsplicht juist NIET wegnemen. Een kruisje zou het omgekeerde
   suggereren. */
.aw-kruislijst li::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 6px;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border-radius: 50%;
  background: var(--oranje);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.aw-kruislijst strong { color: var(--blauw); }

/* ─── Stappenplan ──────────────────────────────────────────── */
.aw-stappen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: aw-stap;
}
.aw-stappen li {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 18px 20px 18px 20px;
  counter-increment: aw-stap;
}
.aw-stappen li::before {
  content: counter(aw-stap);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blauw);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 10px;
}
.aw-stappen h3 { font-size: 14.5px; color: var(--blauw); margin: 0 0 6px; }
.aw-stappen p { font-size: 13px; line-height: 1.6; color: var(--tekst-zacht); margin: 0; }

/* ─── Vergelijkingstabel ───────────────────────────────────── */
/* De tabel heeft vier kolommen tekst en past op een telefoon niet; hem binnen
   zijn eigen kader laten scrollen is beter dan de hele pagina zijwaarts
   openduwen of de laatste kolom afknippen. */
.aw-tabel-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 10px;
}
.aw-vergelijktabel {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 13px;
}
.aw-vergelijktabel th, .aw-vergelijktabel td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #f0f3fb;
}
.aw-vergelijktabel thead th {
  background: var(--blauw);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
}
.aw-vergelijktabel tbody th {
  font-size: 12.5px;
  color: var(--blauw);
  white-space: nowrap;
  background: #f7f8fc;
}
.aw-vergelijktabel td { color: var(--tekst-zacht); }
.aw-vergelijktabel tr:last-child th,
.aw-vergelijktabel tr:last-child td { border-bottom: 0; }

/* ─── Contactkaart bij werkgevers ──────────────────────────── */
.aw-kaart-contact { background: #fff; }
.aw-kaart-contact h3 { font-size: 15px; color: var(--blauw); margin: 0; }
.aw-contact-regels { font-size: 14px; font-weight: 700; flex: none !important; }
.aw-contact-regels a { text-decoration: none; }

/* ─── Veelgestelde vragen ──────────────────────────────────── */
.aw-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 14px;
  margin-top: 22px;
}
.aw-faq article {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 18px 20px;
}
.aw-faq h3 { font-size: 14.5px; color: var(--blauw); margin: 0 0 8px; }
.aw-faq p { font-size: 13.5px; line-height: 1.65; color: var(--tekst-zacht); margin: 0; }
.aw-faq-link { margin-top: 10px !important; font-weight: 600; }

/* ─── Kennisartikel (/kennis/<slug>/) ──────────────────────── */

/* Kruimelpad in de blauwe kop. Zichtbaar én als BreadcrumbList in de structured
   data, zodat Google het pad onder het zoekresultaat kan tonen in plaats van de
   kale URL. */
.aw-kruimels {
  font-size: 12.5px;
  color: var(--blauw-licht);
  margin-bottom: 10px;
}
.aw-kruimels a { color: var(--blauw-licht); text-decoration: none; }
.aw-kruimels a:hover { color: #fff; text-decoration: underline; }
.aw-kruimels span { padding: 0 5px; }

/* Alles binnen een artikelsectie op leesbreedte, behalve de brede onderdelen
   (kaartenrasters en tabellen) die hun eigen breedte nodig hebben. */
.aw-artikel-inhoud > .aw-lopend,
.aw-artikel-inhoud > .aw-vinklijst,
.aw-artikel-inhoud > .aw-verwijzing { max-width: 74ch; }

.aw-artikel-tussenkop {
  font-size: 15px;
  color: var(--blauw);
  margin: 22px 0 8px;
}

.aw-artikel-inhoud .aw-tabel-scroll,
.aw-artikel-inhoud .aw-rollen { margin: 18px 0; }

/* Aandachtsblok binnen een artikel. Oranje streep links, gelijk aan het
   kernantwoord bovenaan, zodat de lezer die twee als "dit moet je onthouden"
   herkent. */
.aw-uitgelicht {
  background: #fff;
  border: 1px solid var(--rand);
  border-left: 4px solid var(--oranje);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 20px 0;
  max-width: 74ch;
}
.aw-uitgelicht p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--tekst-zacht);
  margin: 0;
}
.aw-uitgelicht-kop {
  font-weight: 700;
  color: var(--blauw) !important;
  margin-bottom: 6px !important;
}

.aw-verwijzing { font-size: 13.5px; font-weight: 600; margin: 16px 0 0; }

/* ── Schakelaar tussen de lichte en de donkere huisstijl ─────────────────────
   De knop zelf hoort in DEZE stylesheet, want hij staat in allebei de thema's;
   adr-awareness-donker.css zegt er alleen over wat op donker anders moet. Het
   ruitje is de vorm uit de huisstijl - een gekantelde vierkant, zoals het
   gevaarsetiket - en niet een zonnetje of een maantje: die zeggen "licht en
   donker" maar niet "ADR-Awareness". */
/* Hij staat in de KOPBALK, en die is blauw. Dus geen wit pilletje maar een
   doorzichtige knop met een dunne rand: hij hoort erbij te staan zonder de
   aandacht van het logo of het telefoonnummer weg te nemen.
   margin-left:auto duwt hem naar rechts; staat het telefoonnummer er ook, dan
   komt hij daarachter. */
.aw-thema { margin: 0 0 0 auto; }
.aw-thema-knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  padding: 6px 14px 6px 11px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.aw-thema-knop:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }

/* Op een smal scherm is de ruimte in de kop op. Dan alleen het ruitje: de
   knop blijft aanklikbaar en houdt zijn naam voor een schermlezer. */
@media (max-width: 560px) {
  .aw-thema-knop { padding: 6px; gap: 0; font-size: 0; }
  .aw-thema-knop .aw-thema-ruit { width: 14px; height: 14px; }
}
.aw-thema-ruit {
  width: 13px;
  height: 13px;
  flex: none;
  transform: rotate(45deg);
  border: 2.5px solid var(--oranje);
  border-radius: 2px;
}
/* Gevuld zodra het donkere thema aanstaat: de knop toont dan de stand waarin
   u zit, niet alleen waar hij heen gaat. */
:root[data-thema="donker"] .aw-thema-ruit { background: var(--oranje); }

/* ── Ingesloten video ────────────────────────────────────────────────────────
   aspect-ratio en niet de oude truc met padding-bottom: die werkt nog steeds,
   maar vraagt een wrapper met position:relative en een iframe met position:
   absolute, en dat is drie regels opmaak in de HTML die hier thuishoren.
   De film is 16:9; staat er ooit een andere verhouding, zet die dan hier en
   niet in de pagina. */
/* margin voluit en niet alleen margin-top: een <figure> krijgt van de browser
   40 px inspringing links en rechts, en die stond er tot 02-10-2026 ook. */
.aw-video-blok { max-width: 800px; margin: 24px 0; }
.aw-video-blok figcaption { margin-top: 8px; font-size: 13.5px; color: var(--tekst-zacht); }
.aw-video {
  aspect-ratio: 16 / 9;
  margin: 16px 0 0;
  background: #000;
  border: 1px solid var(--rand);
  border-radius: 10px;
  overflow: hidden;
}
.aw-video iframe { display: block; width: 100%; height: 100%; border: 0; }
/* De eigen speler (02-10-2026). object-fit houdt de film binnen het 16:9-vlak
   zonder te rekken; het voorbeeldplaatje is zelf al 16:9. */
.aw-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* Foto met onderschrift binnen een artikel. Iets breder dan de lezende tekst
   (74ch) maar niet schermvullend: een foto van een etiket of een oranje bord
   moet leesbaar zijn, en dat vraagt meer ruimte dan een alinea.
   height:auto hoort erbij omdat de img zelf width en height meekrijgt; zonder
   deze regel zou de foto op een smal scherm uitgerekt worden. */
/* width:fit-content zodat het onderschrift net zo breed wordt als de foto en
   niet als de hele kolom; bij een klein plaatje zoals een verkeersbord staat
   een bijschrift van 560 px breed er los onder. */
.aw-artikel-figuur {
  margin: 22px 0;
  width: fit-content;
  max-width: min(100%, 560px);
}
/* width:auto en niet 100%: het tunnelbord is 263 px breed, en opgerekt naar
   560 px is dat een wazig plaatje. Nu blijft een kleine afbeelding op zijn
   eigen maat en wordt een grote door max-width teruggebracht. */
.aw-artikel-figuur img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: #fff;
}
.aw-artikel-figuur figcaption {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tekst-zacht);
  margin-top: 8px;
}

/* ── De lithiumwegwijzer op de homepage ──────────────────────────────────────
   Eén blok, hoog op de pagina, dat er anders uitziet dan de rest: dit is het
   enige stuk gereedschap op de site en niet nog een tekst. De donkere ondergrond
   doet dat werk - een witte kaart tussen witte secties valt niet op.
   Op een smal scherm gaan de knop en de opsomming onder elkaar; de knop komt
   dan eerst, want die is waar het blok voor bestaat. */
.aw-gereedschap {
  background: var(--blauw);
  color: #fff;
  padding: 34px 0;
}
.aw-gereedschap-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.aw-gereedschap h2 {
  color: #fff;
  font-size: 22px;
  margin: 0 0 8px;
}
.aw-gereedschap p {
  color: #c3d2ea;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  max-width: 56ch;
}
.aw-gereedschap-vragen {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  gap: 8px 22px;
  flex-wrap: wrap;
}
.aw-gereedschap-vragen li {
  color: #e8eef8;
  font-size: 13.5px;
  padding-left: 20px;
  position: relative;
}
/* Het vinkje als achtergrondteken en niet als los element: het hoort bij de
   regel en mag door een schermlezer worden overgeslagen. */
.aw-gereedschap-vragen li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--oranje);
}
.aw-gereedschap-actie { flex: 0 0 auto; }
.aw-gereedschap-actie small {
  display: block;
  color: #9eb4d8;
  font-size: 12.5px;
  margin-top: 8px;
  text-align: center;
}
@media (max-width: 780px) {
  .aw-gereedschap-in { flex-direction: column; align-items: flex-start; }
  .aw-gereedschap-actie { width: 100%; }
  .aw-gereedschap-actie .aw-knop { display: block; text-align: center; }
}

/* ── De antwoordknoppen in de lithiumwegwijzer ───────────────────────────────
   Dit zijn de enige dingen op die pagina waar geklikt moet worden, en ze zagen
   eruit als een gewone kaart: witte achtergrond, dunne grijze rand. Nu een
   oranje rand van 2 px.

   WAAROM EEN RAND EN GEEN VOLLE ORANJE KNOP
   Het zijn er drie tot vijf naast elkaar en het zijn gelijkwaardige keuzes, geen
   oproep tot actie. Vijf volvlakken oranje onder elkaar leest als een reclame en
   maakt bovendien niets meer belangrijk - en de tekst eronder ("Voorraad,
   retouren of ingeruilde exemplaren…") moet leesbaar blijven, wat op oranje niet
   lukt. De rand is even opvallend en houdt de regels leesbaar. Bij het zweven
   loopt de knop wél vol, zodat je ziet wat je aanwijst.

   `background-color` bij hover en niet `background`: die laatste zou een
   eventuele achtergrondafbeelding meenemen. */
.aw-keuze {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 2px solid var(--oranje);
  border-radius: 8px;
  padding: 15px 17px;
  transition: background-color .12s ease, box-shadow .12s ease;
}
.aw-keuze:hover,
.aw-keuze:focus-visible {
  background-color: #fdf3e7;
  box-shadow: 0 2px 8px rgba(232, 137, 26, .25);
}
.aw-keuze strong {
  display: block;
  color: var(--blauw);
  font-size: 15.5px;
}
/* Het pijltje in de accentkleur: het wijst waar je heen gaat en hoort niet
   dezelfde kleur te hebben als de tekst ernaast. */
.aw-keuze strong::after {
  content: " \203A";
  color: var(--oranje);
  font-weight: 700;
}
.aw-keuze span {
  display: block;
  font-size: 13.5px;
  color: var(--tekst-zacht);
  margin-top: 5px;
  line-height: 1.55;
}
.aw-keuzes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

/* Verwijzingen naar de doelgroeppagina's, op de landingspagina onder "voor
   wie". Bewust een lijst en geen kaartenraster: het zijn ingangen naar dezelfde
   training, en kaarten zouden ze als losse producten laten lezen. */
.aw-doelgroepen {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: #fff;
}
.aw-doelgroepen h3 {
  font-size: 14.5px;
  color: var(--blauw);
  margin: 0 0 10px;
}
.aw-doelgroepen ul { margin: 0; padding: 0; list-style: none; }
.aw-doelgroepen li { padding: 7px 0; border-top: 1px solid var(--rand); }
.aw-doelgroepen li:first-child { border-top: 0; }
.aw-doelgroepen a { font-size: 14px; font-weight: 600; }
.aw-doelgroepen span {
  display: block;
  font-size: 12.5px;
  color: var(--tekst-zacht);
  margin-top: 2px;
}

/* ─── Doelgroeppagina (/opleiding/<slug>/) ─────────────────── */

/* Onder welke naam de training op het certificaat en op de factuur komt. Geen
   kleine lettertjes: wie hier "ADR voor magazijnmedewerkers" bestelt, moet dat
   vóóraf lezen - daarom een aandachtsblok en geen voetnoot. */
.aw-aanbod-noot {
  max-width: 74ch;
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--rand);
  border-left: 4px solid var(--blauw);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tekst-zacht);
}

/* ─── Slot ─────────────────────────────────────────────────── */
.aw-slot { padding-top: 0; }
.aw-slot-blok {
  background: var(--blauw);
  border-radius: 12px;
  padding: 34px 32px;
  text-align: center;
}
.aw-slot-blok h2 { color: #fff; font-size: 22px; margin: 0 0 10px; }
.aw-slot-blok p {
  color: var(--blauw-licht);
  font-size: 14.5px;
  margin: 0 auto;
  max-width: 58ch;
}
.aw-slot-blok .aw-hero-knoppen { justify-content: center; }

@media (max-width: 780px) {
  .aw-twee-kolommen { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 640px) {
  .aw-hero-groot { padding: 38px 0 40px; }
  .aw-hero-groot h1 { font-size: 25px; }
  .aw-hero-tekst { font-size: 15px; }
  .aw-hero-bewijs { display: block; line-height: 1.8; }
  /* Knoppen over de volle breedte: op een telefoon is een halve knop naast een
     halve knop voor beide te smal om comfortabel te raken. */
  .aw-hero-knoppen { flex-direction: column; }
  .aw-hero-knoppen .aw-knop { text-align: center; }
  .aw-kernantwoord { padding: 18px 18px; }
  .aw-feiten dt { flex-basis: 92px; }
  .aw-slot-blok { padding: 26px 20px; }
}

/* ─── Voet ─────────────────────────────────────────────────── */
.aw-voet {
  background: var(--blauw);
  color: var(--blauw-licht);
  padding: 28px 0;
  font-size: 13px;
  margin-top: 20px;
}
.aw-voet a { color: #fff; text-decoration: none; }
.aw-voet a:hover { color: var(--oranje-licht); }
.aw-voet strong { color: #fff; }
/* Het adresblok in een kleur. Gewone tekst was lichtblauw en de links wit, dus
   wisselden de regels om en om: naam wit, adres lichtblauw, telefoon wit, KvK
   lichtblauw, YouTube wit. Nu alles wit; een link toont zich bij aanwijzen. */
.aw-voet-gegevens { color: #fff; }
.aw-voet-gegevens a:hover { text-decoration: underline; }
.aw-voet-jolmers { display: block; height: 22px; width: auto; margin: 0 0 10px; }
.aw-voet-rijen {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  justify-content: space-between;
}

/* Kolommen met paginalinks in de voet, links uitgelijnd. Ze staan alleen op de
   openbare pagina's, dus daar waar ook het menu staat; in een besloten portaal
   hoort geen sitebrede navigatie. Reden voor deze kolommen: elke pagina van de
   site was maar vanaf de homepage bereikbaar, en de voet linkte uitsluitend naar
   inlogpagina's die op noindex staan. */
.aw-voet-kolom { min-width: 165px; }
.aw-voet-kolom ul { list-style: none; margin: 6px 0 0; padding: 0; }
.aw-voet-kolom li + li { margin-top: 4px; }

/* Drie losse bestemmingen onder elkaar; rechts uitgelijnd zodat ze de
   adresregel links spiegelen. Op een smal scherm valt de kolom onder het adres
   en lijnt hij weer links uit, want een rechtse kolom leest daar rommelig. */
.aw-voet-links {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}
.aw-voet-links li + li { margin-top: 4px; }

@media (max-width: 640px) {
  .aw-voet-links { text-align: left; }
}
.aw-voet-klein {
  font-size: 11.5px;
  color: #7d93bb;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid #1b3573;
}

/* ─── Klein scherm ─────────────────────────────────────────── */

/* iOS Safari zoomt de pagina automatisch in zodra een invoerveld met een
   lettergrootte onder 16px focus krijgt, en zoomt daarna niet vanzelf terug.
   Bij een bestelformulier met zes velden betekent dat zes keer in- en
   uitzoomen. 16px voorkomt dat volledig; op desktop is het verschil met 14px
   nauwelijks zichtbaar, dus het geldt hier voor alle schermbreedtes. */
.aw-veld input[type=text],
.aw-veld input[type=email],
.aw-veld input[type=date],
.aw-veld input[type=password],
.aw-veld select,
.aw-kortingveld-rij input {
  font-size: 16px;
}

@media (max-width: 640px) {
  .aw-veld-rij { grid-template-columns: 1fr; }
  .aw-afronden { align-items: stretch; flex-direction: column; }
  .aw-afronden .aw-knop { margin-left: 0; text-align: center; }
  .aw-hero h1 { font-size: 24px; }
  .aw-kaart-voet { flex-direction: column; align-items: stretch; }
  .aw-kaart-voet .aw-knop { text-align: center; }
  .aw-kop-binnen { flex-wrap: wrap; }

  /* Ruimere tikdoelen. Een vinger raakt betrouwbaar zo'n 44px; kleinere links
     die dicht op elkaar staan leveren misklikken op - bij "Verwijderen" naast
     een deelnemer kost dat de ingevulde gegevens. */
  .aw-verwijder { padding: 11px 10px; font-size: 13px; }
  .aw-hoofdstuk { padding: 12px 8px; }
  .aw-knop-tekst { padding: 13px 16px; }
  .aw-kop-tel { padding: 11px 0; }
  .aw-portaal-voet a,
  .aw-voet-links a,
  .aw-voet-kolom a,
  .aw-pagina-nav a:not(.aw-knop) { display: inline-block; padding: 9px 0; }
}

/* Brede tabellen in de lesstof (die inhoud komt uit de editor, dus de breedte
   is niet vooraf bekend) binnen hun eigen kader laten scrollen in plaats van de
   hele pagina open te duwen. Bij de nagebouwde vrachtbrief stond overflow op
   hidden - daar werden de laatste kolommen simpelweg afgeknipt. */
@media (max-width: 700px) {
  .el-les-inhoud .el-tabel {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .el-vrachtbrief { overflow-x: auto; }
}

/* Afstand tussen een keuzerondje/vinkje en zijn tekst. `gap` in flexbox werkt
   pas vanaf iOS 14.5; op oudere toestellen plakt anders de privacy-checkbox
   tegen de zin en zitten de toetsantwoorden aan hun bolletje vast. De marge
   wordt weer teruggedraaid zodra `gap` wél beschikbaar is. */
.aw-radio > input,
.aw-akkoord > input,
.aw-antwoord > input { margin-right: 8px; }

@supports (gap: 1px) {
  .aw-radio > input,
  .aw-akkoord > input,
  .aw-antwoord > input { margin-right: 0; }
}

/* ==========================================================================
   LEERPORTAAL (leren.php)
   ========================================================================== */

.aw-portaal {
  display: grid;
  grid-template-columns: 1fr 270px;
  gap: 26px;
  align-items: start;
}

/* Hoofdstukkenlijst rechts op de desktop, maar bovenaan op een telefoon:
   daar wil je eerst zien waar je bent voordat je gaat lezen. */
.aw-portaal-zij {
  order: 2;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 16px;
  position: sticky;
  top: 16px;
}

.aw-portaal-kopje {
  font-size: 11px;
  font-weight: 700;
  color: var(--tekst-zacht);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 10px;
}

.aw-hoofdstuk {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--tekst);
  text-decoration: none;
  line-height: 1.4;
}
.aw-hoofdstuk:hover { background: #f5f7fd; }
.aw-hoofdstuk.is-actief { background: #f0f3fb; color: var(--blauw); font-weight: 700; }
.aw-hoofdstuk.is-op-slot { color: #b0b8cc; cursor: not-allowed; }
.aw-hoofdstuk span:first-child { flex: none; }

.aw-portaal-voet {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f0f3fb;
}

.aw-portaal-inhoud {
  order: 1;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 26px 28px;
  min-height: 320px;
}
.aw-portaal-inhoud h2 { font-size: 17px; color: var(--blauw); }

/* ─── Toets ────────────────────────────────────────────────── */
.aw-vraag { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #f0f3fb; }
.aw-vraag:last-of-type { border-bottom: 0; }
.aw-vraag-tekst { font-size: 14px; font-weight: 700; color: #1a2340; margin: 0 0 10px; }

.aw-antwoord {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  color: var(--tekst);
  margin-bottom: 7px;
  padding: 5px 7px;
  border-radius: 5px;
  cursor: pointer;
}
.aw-antwoord:hover { background: #f5f7fd; }
.aw-antwoord input { margin-top: 3px; flex: none; }

/* ─── Bespreking van de fout beantwoorde vragen ────────────── */
.aw-bespreking {
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 20px;
}
.aw-bespreking h3 { font-size: 14px; font-weight: 700; color: var(--blauw); margin: 0 0 2px; }
.aw-bespreking-intro { font-size: 12px; color: #8090b8; margin: 0 0 16px; }

.aw-bespreking-vraag { margin-bottom: 14px; }
.aw-bespreking-vraag + .aw-bespreking-vraag {
  border-top: 1px solid #f0f3fb;
  padding-top: 14px;
}
.aw-bespreking-vraag .aw-vraag-tekst { font-size: 13.5px; margin: 0 0 8px; }
.aw-bespreking-fout { font-size: 13px; color: #7a2020; margin: 0 0 4px; }
.aw-bespreking-goed { font-size: 13px; color: var(--groen); margin: 0; }
.aw-bespreking-toelichting {
  font-size: 13px;
  color: #4a5570;
  line-height: 1.6;
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--rand);
}

.aw-pagina-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid #f0f3fb;
  font-size: 13px;
}

@media (max-width: 800px) {
  .aw-portaal { grid-template-columns: 1fr; }
  .aw-portaal-zij { order: 1; position: static; }
  .aw-portaal-inhoud { order: 2; padding: 20px 18px; }
}

/* ==========================================================================
   LESINHOUD (el_paginas.inhoud_html)
   Overgenomen uit main.css van de hoofdsite, zodat lesmateriaal er op beide
   domeinen identiek uitziet. Wijzigt de opmaak daar, pas het hier ook aan.
   ========================================================================== */
/* ─── E-LEARNING LESINHOUD (el_paginas.inhoud_html) ─────── */
.el-tabel { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13.5px; }
.el-tabel th { background: #1b2738; color: #fff; text-align: left; padding: 9px 12px; }
.el-tabel td { padding: 9px 12px; border-bottom: 1px solid #e5e8f0; vertical-align: top; }
.el-tabel tr:last-child td { border-bottom: none; }
.el-tabel tr:nth-child(even) td { background: #f7f8fc; }

.el-blok { border-radius: 10px; padding: 14px 18px; margin: 20px 0; border-left: 5px solid; font-size: 14px; line-height: 1.6; }
.el-blok p:first-child { margin-top: 0; }
.el-blok p:last-child { margin-bottom: 0; }
.el-wistjedat { background: #fff8e1; border-color: #f5b400; }
.el-letop { background: #fdecea; border-color: #d93025; }
.el-inspecteur { background: #e8f0fe; border-color: #1a56a0; }
.el-praktijk { background: #e6f4ea; border-color: #1e8e3e; }
.el-opdracht { background: #f2ecfb; border-color: #7c3aed; }

.el-les-inhoud ul, .el-les-inhoud ol { padding-left: 20px; }

/* ATEX-lesstof (05-10-2026). Platen van 1920 x 1080 met een bijschrift, als
   <figure class="el-plaat">, en kaders met een eigen <h4>-kop in plaats van de
   <p><strong> die de ADR-lesstof gebruikt. Zonder deze regels krijgt de h4 de
   standaardmarge van de browser en staat hij los boven zijn kader. */
.el-les-inhoud .el-plaat { margin: 22px 0; clear: both; }
.el-les-inhoud .el-plaat img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid #e5e8f0; background: #fff; }
.el-les-inhoud .el-plaat figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--tekst-zacht, #5a6478); }
.el-blok h4 { margin: 0 0 6px; font-size: 14.5px; }

/* Gevarensymbool naast de tekst in plaats van los erboven (feedback cursist
   05-10-2026: "oogt leeg, veel wit eromheen"). In de lesstof staat elk symbool
   als <p><img width="200" height="200"></p>; dat formaat komt in el_paginas
   alleen bij de etiketten voor (nageteld in de dump van 02-10-2026). Een kop of
   kader begint onder het symbool, zodat bij klasse 2 elk etiket bij zijn eigen
   subklasse blijft. Browsers zonder :has() tonen het symbool zoals voorheen. */
.el-les-inhoud p:has(> img[width="200"][height="200"]:only-child) {
    float: right; width: 150px; margin: 4px 0 12px 20px;
}
.el-les-inhoud h2, .el-les-inhoud h3, .el-les-inhoud .el-blok,
.el-les-inhoud p:has(> video), .el-les-inhoud p:has(> img:not([width="200"])) { clear: both; }
@media (max-width: 520px) {
    .el-les-inhoud p:has(> img[width="200"][height="200"]:only-child) { width: 96px; margin-left: 14px; }
}

/* Nagebouwde officiële documenten (CMR-vrachtbrief e.d.) - herbruikbaar sjabloon
   voor genummerde "vakken" zoals op het echte formulier, zodat interactieve
   hotspots (zie el_hotspot.php) er realistisch in passen. */
.el-vrachtbrief { border: 2px solid #333; border-radius: 4px; background: #fffdf8; margin: 20px 0; font-size: 12px; color: #1a1a1a; overflow: hidden; }
.el-vrachtbrief-kop { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; background: #333; color: #fff; padding: 8px 12px; font-weight: 700; font-size: 12px; letter-spacing: 0.5px; }
.el-vrachtbrief-grid { display: grid; grid-template-columns: 1fr 1fr; }
.el-vrachtbrief-vak { border: 1px solid #999; padding: 8px 10px; }
.el-vrachtbrief-nrlabel { display: inline-block; font-weight: 800; font-size: 14px; margin-right: 4px; color: #333; }
.el-vrachtbrief-label { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 0.3px; }
.el-vrachtbrief-inhoud { margin-top: 4px; font-size: 12.5px; line-height: 1.5; }
.el-vrachtbrief-goederen { width: 100%; border-collapse: collapse; font-size: 12px; }
.el-vrachtbrief-goederen th, .el-vrachtbrief-goederen td { border: 1px solid #999; padding: 8px; vertical-align: top; text-align: left; }
.el-vrachtbrief-goederen th { background: #f0f0f0; font-size: 10px; font-weight: 700; color: #333; }

@media (max-width: 700px) {
  .el-tabel { font-size: 12.5px; }
  .el-tabel th, .el-tabel td { padding: 7px 9px; }
  .el-vrachtbrief-grid { grid-template-columns: 1fr; }
  .el-vrachtbrief-goederen { font-size: 11px; }
}

/* ─── Algemene actie ───────────────────────────────────────── */
.aw-promobalk {
  background: #fff;
  border-bottom: 1px solid var(--rand);
  border-top: 1px solid var(--rand);
}
.aw-promobalk-inhoud {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.aw-promobalk-inhoud > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.aw-promobalk strong {
  color: var(--blauw);
  font-size: 17px;
}
.aw-promobalk span {
  color: var(--tekst-zacht);
  font-size: 13px;
}
@media (max-width: 700px) {
  .aw-promobalk-inhoud { align-items: flex-start; flex-direction: column; padding-top: 14px; padding-bottom: 14px; }
  .aw-promobalk .aw-knop { width: 100%; text-align: center; }
}

/* ─── Filmpjes (02-10-2026) ──────────────────────────────────
   /filmpjes/ en /filmpjes/<adres>/. De speler is groter dan in een artikel,
   want op deze pagina is de film de hoofdzaak. */
.aw-hero-film { padding: 26px 0 30px; }
.aw-film-speler .aw-video-blok { max-width: 960px; margin: 0 0 26px; }
.aw-film-indeling {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 34px;
  align-items: start;
  max-width: 960px;
}
@media (max-width: 820px) {
  .aw-film-indeling { grid-template-columns: minmax(0, 1fr); }
}
.aw-film-tekst h2 { margin-top: 26px; }
.aw-film-verder { padding-left: 18px; line-height: 1.8; }
.aw-film-bestel h2 { font-size: 18px; margin: 4px 0 10px; }
.aw-film-bestel h2 a { color: inherit; text-decoration: none; }
.aw-film-bestel-kop {
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--oranje); margin: 0;
}

.aw-filmkaarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 18px;
}
.aw-filmkaarten-groot { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.aw-filmkaart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--tekst);
  padding-bottom: 14px;
}
.aw-filmkaart:hover, .aw-filmkaart:focus-visible { border-color: var(--oranje); }
.aw-filmkaart img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.aw-filmkaart-titel { font-weight: 700; color: var(--blauw); padding: 6px 14px 0; line-height: 1.35; }
.aw-filmkaart-duur { font-size: 12.5px; color: var(--tekst-zacht); padding: 0 14px; }
.aw-filmkaart-tekst { font-size: 13.5px; color: var(--tekst-zacht); padding: 0 14px; line-height: 1.55; }