/* ==========================================================================
   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:        #0a2260;
  --blauw-licht:  #9eb4d8;
  --oranje:       #e8891a;
  --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%;
}

.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;
}

.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. */
.aw-menu { 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; }

@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; }
}

/* ─── Hero ─────────────────────────────────────────────────── */
.aw-hero {
  background: var(--blauw);
  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-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; }

.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); }

/* 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; }

/* ─── 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; }

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

/* ─── 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;
}

.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-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 ─────────────────────────── */
.aw-kaart h3 a { color: inherit; text-decoration: none; }
.aw-kaart h3 a:hover { text-decoration: underline; }
.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; }

/* ─── 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; }
  /* 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; }
.aw-voet-rijen {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  justify-content: space-between;
}

/* 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-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-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; }

.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: #0a2260; 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; }

/* 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; }
}