/* ==========================================================================
   Het Ekmekci-design, versie 1 (29-09-2026), bijgewerkt 30-09-2026
   Gedeelde opmaak voor de nieuwsberichten over Ekmekci op defranchisehub.nl.
   Live naam van deze versie: /Website/ekmekci/ekm-design-20260930.css. De
   datum in de naam zorgt dat een bezoeker met de vorige versie in zijn cache
   meteen deze krijgt.

   Waarom een eigen bestand: de drie berichten staan op twee verschillende
   paginasjablonen. Kop en voet horen bij het sjabloon en blijven daar. Alles
   binnen <main class="ekd"> hoort bij deze set. Zo krijgt elk bericht een eigen
   compositie uit dezelfde bouwstenen, zonder dat een sjabloon de andere kant
   op duwt.

   Waarom de voorvoegsels ekd en --ekd: het formuleprofiel gebruikt ekm en het
   oudere bericht gebruikte ekm50. Een eigen voorvoegsel voorkomt dat regels
   elkaar per ongeluk raken als een pagina later meerdere sets laadt.

   Regels die overal gelden:
   - Het logo van Ekmekci komt alleen als echt beeldbestand op de pagina en
     wordt alleen geschaald. Deze css tekent, kleurt of vervormt het nooit.
   - Decoratie is css: blokken, bogen, stempels, patronen en iconen.
   - Beweging is klein en stopt bij "prefers-reduced-motion" en bij de knop
     Beweging uit in de voet (html[data-beweging=uit]).
   - Tekstkleuren halen contrast AA op de achtergrond waar ze op staan.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   De gevelkleuren zijn gemeten op de foto's van hun gevel: elk blok heeft een
   lichte voorkant (k) en een donkere zijkant (s), zodat een blok diepte heeft.
   De merkkleuren komen van hun eigen site. De letters zijn die van de pagina
   zelf: koppen in de kopletter van de site, labels in de monoletter en lopende
   tekst in de tekstletter van het sjabloon. Daarom wijzen de letter-tokens
   naar variabelen die het sjabloon al levert.
   -------------------------------------------------------------------------- */
.ekd{
  --ekd-koraal:#EF724D;    --ekd-koraal-s:#DA5A37;
  --ekd-petrol:#1A8496;    --ekd-petrol-s:#044D51;
  --ekd-aubergine:#4D2A3B; --ekd-aubergine-s:#2E0417;
  --ekd-geel:#E0AB00;      --ekd-geel-s:#CB9900;
  --ekd-lucht:#86C0E1;     --ekd-lucht-s:#73A5C1;
  --ekd-roze:#B37885;      --ekd-roze-s:#A46672;

  --ekd-merk:#007F7C;      --ekd-merk-d:#06666D;
  --ekd-creme:#F1EBD8;     --ekd-creme-d:#E4DCC3;
  --ekd-oranje:#E86643;    --ekd-oranje-d:#C04A26;  --ekd-oranje-t:#A8401F;
  --ekd-mint:#C7DBD9;
  --ekd-bord:#1B1B1B;
  --ekd-wit:#FFFFFF;
  --ekd-inkt:#1B1B1B;
  --ekd-tekst:#454A50;
  --ekd-lijn:rgba(27,27,27,.12);

  --ekd-f-kop:var(--kopletter, var(--display, Georgia, serif));
  --ekd-f-label:var(--mono, ui-monospace, monospace);
  --ekd-f-tekst:var(--letter, var(--sans, system-ui, sans-serif));

  --ekd-kant:20px;
  --ekd-r:18px;
  --ekd-r-boog:999px;
  --ekd-zacht:cubic-bezier(.22,.72,.28,1);
  --ekd-duur:320ms;

  display:block;
  position:relative;
  color:var(--ekd-tekst);
}
@media (min-width:768px){.ekd{--ekd-kant:32px}}
@media (min-width:1280px){.ekd{--ekd-kant:56px}}

/* --------------------------------------------------------------------------
   2. Basis binnen main
   Alleen binnen .ekd, zodat kop en voet van het sjabloon ongemoeid blijven.
   -------------------------------------------------------------------------- */
.ekd :where(h1,h2,h3){margin:0;font-family:var(--ekd-f-kop);font-weight:600;color:var(--ekd-merk-d);letter-spacing:-.01em;text-wrap:balance;font-variation-settings:"opsz" 72,"SOFT" 30,"WONK" 0}
.ekd h1{font-size:clamp(30px,5.2vw,52px);line-height:1.08}
.ekd h2{font-size:clamp(24px,3.2vw,34px);line-height:1.14}
.ekd h3{font-size:19px;line-height:1.3}
.ekd :where(p,ul,ol,dl,dd,figure,blockquote){margin:0}
.ekd :where(ul,ol){padding:0;list-style:none}
.ekd :where(img,video){display:block;max-width:100%;height:auto}
.ekd :where(a){color:var(--ekd-merk-d)}
.ekd :where(a,button,summary,video):focus-visible{outline:3px solid var(--ekd-oranje-d);outline-offset:3px;border-radius:6px}
/* Op het donkere bord en het donkere vlak is de focusring geel (8,2:1 op
   #1B1B1B). Deze regel zocht eerst naar .ekd-donker, een klasse die op geen
   pagina staat; de ring bleef daardoor oranje (3,5:1). */
.ekd :where(.ekd-bord,.ekd-vlak-donker) :where(a,button,summary):focus-visible{outline-color:var(--ekd-geel)}
.ekd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Lopende tekst: een leesbreedte van hoogstens 68 tekens, ook op een breed
   scherm. Dat is de grens waar een regel nog prettig leest. */
.ekd-tekst p{max-width:68ch;margin-top:16px;font-size:17px;line-height:1.65}
.ekd-tekst p:first-child{margin-top:0}
.ekd-tekst a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em;color:var(--ekd-oranje-t)}
.ekd-tekst a:hover{color:var(--ekd-merk-d)}
.ekd-tekst > h2{margin-top:48px;margin-bottom:12px}
.ekd-tekst > figure{margin-top:28px;margin-bottom:28px}
.ekd-tekst figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--ekd-tekst)}
@media (min-width:1024px){.ekd-tekst p{font-size:18px}.ekd-tekst > h2{margin-top:56px}}

/* Koppen met een klein gevelblok erboven. De kleur wisselt per kop, zodat
   het artikel dezelfde kleurenrij krijgt als de gevel. Het blok is bewust
   klein: het wijst, het schreeuwt niet. */
.ekd-h2{position:relative;padding-top:16px}
.ekd-h2::before{content:"";position:absolute;top:0;left:0;width:36px;height:9px;border-radius:5px 5px 0 0;background:var(--k,var(--ekd-koraal))}
.ekd-tekst > .ekd-h2:nth-of-type(6n+1){--k:var(--ekd-koraal)}
.ekd-tekst > .ekd-h2:nth-of-type(6n+2){--k:var(--ekd-petrol)}
.ekd-tekst > .ekd-h2:nth-of-type(6n+3){--k:var(--ekd-geel)}
.ekd-tekst > .ekd-h2:nth-of-type(6n+4){--k:var(--ekd-aubergine)}
.ekd-tekst > .ekd-h2:nth-of-type(6n+5){--k:var(--ekd-lucht)}
.ekd-tekst > .ekd-h2:nth-of-type(6n+6){--k:var(--ekd-roze)}
.ekd-h2.ekd-boogkop::before{width:22px;height:14px;border-radius:999px 999px 0 0}

/* Layout: dezelfde binnenbreedte als de nieuwsberichten van de site, zodat de
   zijbalk met gevelblokken op 1400 px en breder precies naast de inhoud valt. */
.ekd-binnen{width:100%;max-width:calc(1320px + var(--ekd-kant) * 2);margin:0 auto;padding-left:var(--ekd-kant);padding-right:var(--ekd-kant)}
.ekd-sectie{padding-top:clamp(32px,5vw,64px);padding-bottom:clamp(32px,5vw,64px)}
.ekd-sectie-krap{padding-top:clamp(20px,3vw,36px);padding-bottom:clamp(20px,3vw,36px)}
.ekd-vlak-creme{background:var(--ekd-creme)}
.ekd-vlak-wit{background:var(--ekd-wit)}
.ekd-vlak-mint{background:var(--ekd-mint)}
.ekd-vlak-donker{background:var(--ekd-bord);color:var(--ekd-creme)}
.ekd-vlak-donker :where(h1,h2,h3){color:var(--ekd-wit)}
.ekd-vlak-donker p{color:var(--ekd-creme)}
.ekd-vlak-donker :where(a){color:var(--ekd-creme)}

/* Terug-link, chips en artikelmeta in de stijl van de set. */
.ekd-terug{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;color:var(--ekd-oranje-t);text-decoration:none}
.ekd-terug:hover{text-decoration:underline;text-underline-offset:3px}
.ekd-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
.ekd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:18px;font-size:15px;color:var(--ekd-tekst)}
.ekd-meta i{width:5px;height:5px;border-radius:999px;background:var(--ekd-koraal-s);display:inline-block}
.ekd-lead{margin-top:20px;max-width:62ch;font-size:19px;line-height:1.55;color:var(--ekd-inkt)}
.ekd-label{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font:500 13px/1.4 var(--ekd-f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ekd-oranje-t)}
.ekd-vlak-donker .ekd-label,.ekd-bord .ekd-label{color:var(--ekd-geel)}

/* --------------------------------------------------------------------------
   3. Gevelstrook
   Een rij blokken zoals boven hun ingang: blokken, bogen, een dakje en een
   kanteel. De strook loopt over de volle breedte en staat nooit naast de
   zijbalk op dezelfde hoogte, zodat er niet twee keer een gevel in beeld is.
   Elk blok heeft een voorkant (k) en een smalle donkere zijkant (s): dat is
   de diepte die hun echte gevel ook heeft. Geen svg: vormen via border-radius
   en clip-path.
   -------------------------------------------------------------------------- */
.ekd-gevelstrook{display:flex;align-items:flex-end;gap:0;height:var(--ekd-strook-h,54px);overflow:hidden;pointer-events:none}
.ekd-gevelstrook i{position:relative;display:block;flex:1 1 0;height:var(--h,60%);background:var(--k);border-radius:var(--r,0);clip-path:var(--v,none);transform-origin:50% 100%}
.ekd-gevelstrook i::after{content:"";position:absolute;top:0;right:0;bottom:0;width:14%;background:var(--s);clip-path:var(--v,none)}
.ekd-gevelstrook i:nth-child(1){--k:var(--ekd-lucht);--s:var(--ekd-lucht-s);--h:46%;--r:10px 10px 0 0}
.ekd-gevelstrook i:nth-child(2){--k:var(--ekd-aubergine);--s:var(--ekd-aubergine-s);--h:88%;--r:999px 999px 0 0}
.ekd-gevelstrook i:nth-child(3){--k:var(--ekd-koraal);--s:var(--ekd-koraal-s);--h:70%;--v:polygon(0 100%,0 32%,50% 0,100% 32%,100% 100%)}
.ekd-gevelstrook i:nth-child(4){--k:var(--ekd-petrol);--s:var(--ekd-petrol-s);--h:100%;--v:polygon(0 100%,0 24%,18% 24%,18% 0,38% 0,38% 24%,62% 24%,62% 0,82% 0,82% 24%,100% 24%,100% 100%)}
.ekd-gevelstrook i:nth-child(5){--k:var(--ekd-geel);--s:var(--ekd-geel-s);--h:58%;--r:8px 8px 0 0}
.ekd-gevelstrook i:nth-child(6){--k:var(--ekd-roze);--s:var(--ekd-roze-s);--h:78%;--r:999px 999px 0 0}
.ekd-gevelstrook i:nth-child(7){--k:var(--ekd-petrol-s);--s:var(--ekd-aubergine-s);--h:52%;--r:10px 10px 0 0}
.ekd-gevelstrook i:nth-child(8){--k:var(--ekd-koraal);--s:var(--ekd-koraal-s);--h:92%;--v:polygon(0 100%,0 28%,50% 0,100% 28%,100% 100%)}
.ekd-gevelstrook i:nth-child(9){--k:var(--ekd-lucht);--s:var(--ekd-lucht-s);--h:64%;--r:999px 999px 0 0}
.ekd-gevelstrook i:nth-child(10){--k:var(--ekd-geel);--s:var(--ekd-geel-s);--h:44%;--r:8px 8px 0 0}
.ekd-gevelstrook i:nth-child(11){--k:var(--ekd-aubergine);--s:var(--ekd-aubergine-s);--h:82%;--v:polygon(0 100%,0 24%,18% 24%,18% 0,38% 0,38% 24%,62% 24%,62% 0,82% 0,82% 24%,100% 24%,100% 100%)}
.ekd-gevelstrook i:nth-child(12){--k:var(--ekd-petrol);--s:var(--ekd-petrol-s);--h:56%;--r:10px 10px 0 0}
@media (min-width:768px){.ekd-gevelstrook{--ekd-strook-h:78px}}
/* Op een klein scherm zijn twaalf blokken te smal; de laatste vier vallen weg. */
@media (max-width:599px){.ekd-gevelstrook i:nth-child(n+9){display:none}}
/* Een strook onder een vlak hangt ondersteboven: de blokken hangen dan als
   een rand aan de onderkant van het vlak erboven. */
.ekd-gevelstrook-hangend{transform:scaleY(-1)}

/* --------------------------------------------------------------------------
   4. Boog en tegel
   De boog is het venster van hun gevel: een foto met een ronde bovenkant en
   een gekleurd kozijn. De tegel is een rustige witte rechthoek voor het logo,
   zodat het logo nooit in een vorm zit die hun eigen kader nadoet.
   -------------------------------------------------------------------------- */
.ekd-boog{--k:var(--ekd-petrol-s);position:relative;overflow:hidden;border-radius:var(--ekd-r-boog) var(--ekd-r-boog) var(--ekd-r) var(--ekd-r);background:var(--k);padding:8px;aspect-ratio:var(--ratio,4/5)}
.ekd-boog > img,.ekd-boog > video{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ekd-boog-plat{border-radius:var(--ekd-r)}
.ekd-boog-los{padding:0;background:transparent}
.ekd-tegel{position:relative;display:grid;place-items:center;background:var(--ekd-wit);border:1px solid var(--ekd-lijn);border-radius:var(--ekd-r);padding:clamp(16px,6%,32px)}
.ekd-tegel img{width:100%;max-width:240px;height:auto}
.ekd-kozijn-koraal{--k:var(--ekd-koraal)}
.ekd-kozijn-petrol{--k:var(--ekd-petrol-s)}
.ekd-kozijn-geel{--k:var(--ekd-geel)}
.ekd-kozijn-lucht{--k:var(--ekd-lucht)}
.ekd-kozijn-aubergine{--k:var(--ekd-aubergine)}
.ekd-kozijn-roze{--k:var(--ekd-roze)}

/* --------------------------------------------------------------------------
   5. Bord en lampjes
   Het donkere bord met een dunne lichte rand verwijst naar het verlichte bord
   boven hun deur. De vorm is een gewone afgeronde rechthoek, met opzet anders
   dan het kader van hun logo. De lampjes zijn een rij warme puntjes langs de
   bovenrand, als de lichtjes in hun boom.
   -------------------------------------------------------------------------- */
.ekd-bord{position:relative;background:var(--ekd-bord);color:var(--ekd-creme);border-radius:22px;padding:clamp(20px,3vw,32px);box-shadow:inset 0 0 0 2px rgba(241,235,216,.26),inset 0 0 0 7px var(--ekd-bord),inset 0 0 0 8px rgba(241,235,216,.12)}
.ekd-bord :where(h2,h3){color:var(--ekd-wit)}
.ekd-bord p{color:var(--ekd-creme)}
.ekd-lampjes::before{content:"";position:absolute;left:22px;right:22px;top:11px;height:6px;background-image:radial-gradient(circle,#FFD98A 0 2px,transparent 2.7px);background-size:16px 6px;background-repeat:repeat-x;opacity:.95;pointer-events:none}
.ekd-lichtjes{background-image:radial-gradient(circle,rgba(255,217,138,.95) 0 1.3px,transparent 2.2px),radial-gradient(circle,rgba(255,217,138,.55) 0 1px,transparent 1.9px);background-size:46px 46px,31px 37px;background-position:0 0,15px 20px}

/* Feiten op een bord: label klein, getal groot, toelichting eronder. */
.ekd-feiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.ekd-feiten > div{padding:16px 14px;border-top:1px solid rgba(241,235,216,.18)}
.ekd-feiten > div:nth-child(-n+2){border-top:0}
.ekd-feiten > div:nth-child(2n){border-left:1px solid rgba(241,235,216,.18)}
.ekd-feiten dt{font:500 12px/1.4 var(--ekd-f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ekd-geel)}
.ekd-feiten dd{margin-top:6px;font-family:var(--ekd-f-kop);font-weight:600;font-size:clamp(24px,3vw,34px);line-height:1.05;color:var(--ekd-wit);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
/* De toelichting is een tweede dd: in een dl horen alleen dt en dd, anders
   leest een schermlezer de toelichting los van het feit voor. */
.ekd-feiten dd+dd{margin-top:6px;font:400 14px/1.45 var(--ekd-f-tekst);color:rgba(241,235,216,.86)}
/* Feiten die altijd passen: een bedrag als € 300.000 in een smalle kolom
   brak door overflow-wrap midden in de cijfers. Hier is de lettermaat 18
   procent van de breedte van het vak, met de gewone maat als bovengrens.
   € 300.000 is ongeveer 5 keer de lettermaat breed en vult het vak dan
   hoogstens voor 90 procent. Een browser zonder containermaten slaat de
   regel over en houdt de gewone maat.
   Het feit zelf (de dd direct na de dt) breekt nooit: zonder containermaten
   loopt een bedrag liever iets door dan dat het midden in de cijfers breekt.
   De toelichting (de tweede dd) blijft gewoon afbreken. */
.ekd-feiten-pas > div{container-type:inline-size}
.ekd-feiten-pas dd{font-size:min(34px,18cqi)}
.ekd-feiten-pas dt+dd{white-space:nowrap;overflow-wrap:normal}
@media (min-width:768px){
  .ekd-feiten{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ekd-feiten > div{border-top:0;padding:18px 22px}
  .ekd-feiten > div:nth-child(n+2){border-left:1px solid rgba(241,235,216,.18)}
}

/* --------------------------------------------------------------------------
   6. Stempel, badge en teller
   De stempel is een ronde, licht gedraaide sticker met een stippellijn. De
   badge is een pil in een gevelkleur met donkere letters. De teller is een
   groot getal op een bord. Geen van drie lijkt op hun logo: geen achthoek,
   geen kader met hun naam erin.
   -------------------------------------------------------------------------- */
.ekd-stempel{--k:var(--ekd-oranje-t);position:relative;display:inline-grid;place-items:center;width:112px;height:112px;padding:14px;border-radius:50%;border:2px solid var(--k);background:var(--ekd-wit);color:var(--k);text-align:center;font:600 11px/1.3 var(--ekd-f-label);letter-spacing:.08em;text-transform:uppercase;transform:rotate(-8deg)}
.ekd-stempel::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed var(--k)}
.ekd-stempel b{display:block;margin-bottom:2px;font:600 26px/1 var(--ekd-f-kop);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.ekd-stempel-petrol{--k:var(--ekd-petrol-s)}
.ekd-stempel-aubergine{--k:var(--ekd-aubergine)}
.ekd-stempel-geel{--k:var(--ekd-geel-s);color:var(--ekd-inkt)}
.ekd-badge{--k:var(--ekd-geel);display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 12px;border-radius:999px;background:var(--k);color:var(--ekd-inkt);font:500 13px/1.4 var(--ekd-f-label);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
a.ekd-badge:hover{filter:brightness(.94)}
.ekd-badge-lucht{--k:var(--ekd-lucht)}
.ekd-badge-koraal{--k:var(--ekd-koraal)}
.ekd-badge-mint{--k:var(--ekd-mint)}
.ekd-badge-creme{--k:var(--ekd-creme);box-shadow:inset 0 0 0 1px var(--ekd-lijn)}
.ekd-badge-roze{--k:var(--ekd-roze)}
.ekd-teller{font-family:var(--ekd-f-kop);font-weight:600;font-size:clamp(48px,8vw,84px);line-height:.95;letter-spacing:-.02em;color:var(--ekd-wit);font-variant-numeric:tabular-nums lining-nums}
.ekd-teller sup{font-size:.42em;vertical-align:.5em;color:var(--ekd-geel)}

/* --------------------------------------------------------------------------
   7. Tijdlijn, route en blokkenlijst
   Drie manieren om een reeks te tonen. De tijdlijn staat rechtop met een
   gekleurde stip per stap. De route ligt plat, als een lijn tussen twee
   borden met kleine gevelblokken als tussenstations. De blokkenlijst nummert
   met een gevelblok in wisselende vorm.
   -------------------------------------------------------------------------- */
.ekd-tijdlijn{position:relative;padding-left:30px}
.ekd-tijdlijn::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--ekd-lijn)}
.ekd-tijdlijn li{position:relative;padding:8px 0}
.ekd-tijdlijn li::before{content:"";position:absolute;left:-30px;top:14px;width:18px;height:18px;border-radius:50%;background:var(--k,var(--ekd-koraal));box-shadow:0 0 0 3px var(--ekd-wit)}
.ekd-tijdlijn li:nth-child(6n+1){--k:var(--ekd-koraal)}
.ekd-tijdlijn li:nth-child(6n+2){--k:var(--ekd-petrol)}
.ekd-tijdlijn li:nth-child(6n+3){--k:var(--ekd-geel)}
.ekd-tijdlijn li:nth-child(6n+4){--k:var(--ekd-aubergine)}
.ekd-tijdlijn li:nth-child(6n+5){--k:var(--ekd-lucht)}
.ekd-tijdlijn li:nth-child(6n+6){--k:var(--ekd-roze)}
.ekd-tijdlijn a{display:block;padding:4px 0;min-height:44px;font-weight:600;line-height:1.35;text-decoration:none;color:var(--ekd-merk-d)}
.ekd-tijdlijn a:hover{text-decoration:underline;text-underline-offset:3px}
.ekd-jaar{display:block;font:500 12px/1.4 var(--ekd-f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ekd-oranje-t)}
.ekd-tijdlijn-tekst{font-size:15px;line-height:1.5}
.ekd-tijdlijn-tekst b{display:block;color:var(--ekd-inkt);font-weight:600}
/* Een platte tijdlijn: vanaf 700 px liggen de stappen naast elkaar op een
   lijn, eronder blijft het de rechtopstaande versie. */
@media (min-width:700px){
  .ekd-tijdlijn-plat{display:grid;grid-template-columns:repeat(var(--stappen,3),minmax(0,1fr));gap:20px;padding-left:0}
  .ekd-tijdlijn-plat::before{left:9px;right:9px;top:8px;bottom:auto;width:auto;height:2px}
  .ekd-tijdlijn-plat li{padding:32px 0 0}
  .ekd-tijdlijn-plat li::before{left:0;top:0}
}

/* Wisselende inhoudsopgave: onder 1024 px een rij pillen over meerdere regels,
   vanaf 1024 px een tijdlijn in de rail. Eén nav in de html, zodat een
   schermlezer de lijst maar één keer hoort. De pillen schuiven niet binnen
   zichzelf; zie de inhoudsstrook in sectie 12 voor de reden. */
.ekd-nav-wissel h2{font:500 12px/1.4 var(--ekd-f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ekd-tekst);margin:0 0 8px}
.ekd-nav-wissel li:nth-child(6n+1){--k:var(--ekd-koraal)}
.ekd-nav-wissel li:nth-child(6n+2){--k:var(--ekd-petrol)}
.ekd-nav-wissel li:nth-child(6n+3){--k:var(--ekd-geel)}
.ekd-nav-wissel li:nth-child(6n+4){--k:var(--ekd-aubergine)}
.ekd-nav-wissel li:nth-child(6n+5){--k:var(--ekd-lucht)}
.ekd-nav-wissel li:nth-child(6n+6){--k:var(--ekd-roze)}
@media (max-width:1023px){
  .ekd-nav-wissel ol{display:flex;flex-wrap:wrap;gap:8px;padding:2px}
  .ekd-nav-wissel li{flex:0 0 auto;max-width:100%}
  .ekd-nav-wissel a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border-radius:999px;background:var(--ekd-wit);border:1px solid var(--ekd-lijn);color:var(--ekd-merk-d);font-size:14px;font-weight:600;text-decoration:none;line-height:1.3}
  .ekd-nav-wissel a::before{content:"";width:10px;height:14px;border-radius:999px 999px 0 0;background:var(--k,var(--ekd-koraal))}
  .ekd-nav-wissel a:hover{border-color:var(--ekd-merk-d)}
}
@media (min-width:1024px){
  .ekd-nav-wissel ol{position:relative;padding-left:30px}
  .ekd-nav-wissel ol::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--ekd-lijn)}
  .ekd-nav-wissel li{position:relative;padding:6px 0}
  .ekd-nav-wissel li::before{content:"";position:absolute;left:-30px;top:12px;width:18px;height:18px;border-radius:50%;background:var(--k,var(--ekd-koraal));box-shadow:0 0 0 3px var(--ekd-wit)}
  .ekd-nav-wissel a{display:block;padding:4px 0;min-height:44px;font-weight:600;font-size:15px;line-height:1.35;text-decoration:none;color:var(--ekd-merk-d)}
  .ekd-nav-wissel a:hover{text-decoration:underline;text-underline-offset:3px}
}

.ekd-route{display:grid;grid-template-columns:1fr;gap:16px;align-items:center}
.ekd-route-lijn{position:relative;height:44px;display:flex;align-items:flex-end;justify-content:center;gap:6px;padding:0 20px 6px}
.ekd-route-lijn::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(90deg,var(--ekd-petrol-s) 0 8px,transparent 8px 16px)}
.ekd-route-lijn::after{content:"";position:absolute;right:-2px;bottom:-6px;width:0;height:0;border-style:solid;border-width:7.5px 0 7.5px 12px;border-color:transparent transparent transparent var(--ekd-petrol-s)}
.ekd-route-lijn i{display:block;width:16px;height:var(--h,20px);background:var(--k);border-radius:var(--r,0);clip-path:var(--v,none)}
.ekd-route-lijn i:nth-child(1){--k:var(--ekd-lucht);--h:14px;--r:4px 4px 0 0}
.ekd-route-lijn i:nth-child(2){--k:var(--ekd-aubergine);--h:26px;--r:999px 999px 0 0}
.ekd-route-lijn i:nth-child(3){--k:var(--ekd-koraal);--h:20px;--v:polygon(0 100%,0 32%,50% 0,100% 32%,100% 100%)}
.ekd-route-lijn i:nth-child(4){--k:var(--ekd-petrol);--h:30px;--r:3px 3px 0 0}
.ekd-route-lijn i:nth-child(5){--k:var(--ekd-geel);--h:16px;--r:4px 4px 0 0}
.ekd-route-lijn i:nth-child(6){--k:var(--ekd-roze);--h:24px;--r:999px 999px 0 0}
@media (min-width:600px){.ekd-route{grid-template-columns:auto minmax(120px,1fr) auto;gap:20px}}
.ekd-route-stop{display:grid;gap:4px;min-width:150px}
.ekd-route-stop .ekd-teller{color:var(--ekd-wit)}
.ekd-route-stop small{font:500 12px/1.4 var(--ekd-f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ekd-geel)}
.ekd-route-stop span{font-size:14px;line-height:1.45;color:rgba(241,235,216,.86)}

.ekd-blokken{counter-reset:blok;display:grid;gap:14px}
.ekd-blokken li{counter-increment:blok;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;max-width:66ch;line-height:1.5}
.ekd-blokken li::before{content:counter(blok);display:grid;place-items:center;width:44px;height:44px;background:var(--k,var(--ekd-koraal));color:var(--ekd-inkt);font:600 18px/1 var(--ekd-f-kop);border-radius:var(--r,6px);clip-path:var(--v,none);padding-top:var(--pt,0)}
.ekd-blokken li:nth-child(6n+1){--k:var(--ekd-koraal);--r:6px}
.ekd-blokken li:nth-child(6n+2){--k:var(--ekd-lucht);--r:999px 999px 6px 6px;--pt:8px}
.ekd-blokken li:nth-child(6n+3){--k:var(--ekd-geel);--r:6px}
.ekd-blokken li:nth-child(6n+4){--k:var(--ekd-mint);--r:999px 999px 6px 6px;--pt:8px}
.ekd-blokken li:nth-child(6n+5){--k:var(--ekd-roze);--r:6px}
.ekd-blokken li:nth-child(6n+6){--k:var(--ekd-creme-d);--r:999px 999px 6px 6px;--pt:8px}

/* Een gewone lijst met vinkjes in een gevelkleur, voor opsommingen zonder volgorde. */
.ekd-vinken{display:grid;gap:10px}
.ekd-vinken li{position:relative;padding-left:32px;max-width:66ch;line-height:1.5}
.ekd-vinken li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--ekd-mint)}
.ekd-vinken li::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:10px;border:solid var(--ekd-merk-d);border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}

/* --------------------------------------------------------------------------
   8. Patroon met cirkels
   Op de wand van hun vestigingen hangen gekleurde cirkels. Dit patroon zet
   ze zacht op een vlak: vier lagen puntjes in gevelkleuren die samen een
   herhaling van 180 px vormen. Bedoeld als achtergrond bij grote koppen, niet
   achter lopende tekst.
   -------------------------------------------------------------------------- */
.ekd-cirkels{background-color:var(--ekd-creme);background-image:radial-gradient(circle,var(--ekd-lucht) 0 16px,transparent 17px),radial-gradient(circle,var(--ekd-geel) 0 11px,transparent 12px),radial-gradient(circle,var(--ekd-koraal) 0 9px,transparent 10px),radial-gradient(circle,var(--ekd-roze) 0 6px,transparent 7px);background-size:180px 180px;background-position:20px 30px,110px 90px,60px 140px,150px 20px}
.ekd-cirkels-zacht{position:relative;isolation:isolate}
/* De terug-link is kleine oranje tekst. Over een koraal of roze stip zakt die
   onder 4,5:1 (4,2); een crème vlakje achter de link houdt de stippen weg. De
   negatieve marge houdt de tekst op zijn plek en blijft binnen de kantlijn
   van 20 px, dus geen horizontaal scrollen op 320 px. */
.ekd-cirkels-zacht .ekd-terug{padding:0 10px;margin-left:-10px;border-radius:9px;background:var(--ekd-creme)}
.ekd-cirkels-zacht::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.22;background-image:radial-gradient(circle,var(--ekd-lucht) 0 16px,transparent 17px),radial-gradient(circle,var(--ekd-geel) 0 11px,transparent 12px),radial-gradient(circle,var(--ekd-koraal) 0 9px,transparent 10px),radial-gradient(circle,var(--ekd-roze) 0 6px,transparent 7px);background-size:180px 180px;background-position:20px 30px,110px 90px,60px 140px,150px 20px;mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%)}

/* --------------------------------------------------------------------------
   9. Citaat
   Links een smalle stapel van vier gevelkleuren, dan de tekst in de
   kopletter. De aanhalingstekens staan al in de tekst zelf; de css voegt er
   geen toe, zodat een citaat altijd letterlijk blijft.
   -------------------------------------------------------------------------- */
.ekd-citaat{position:relative;margin:28px 0;padding:6px 0 6px 28px;max-width:60ch}
.ekd-citaat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;border-radius:6px;background:linear-gradient(180deg,var(--ekd-koraal) 0 25%,var(--ekd-geel) 25% 50%,var(--ekd-petrol) 50% 75%,var(--ekd-aubergine) 75% 100%)}
.ekd-citaat p{font-family:var(--ekd-f-kop);font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.35;color:var(--ekd-merk-d);margin:0}
.ekd-citaat p + p{margin-top:10px}
.ekd-citaat footer{margin-top:10px;font-size:14px;color:var(--ekd-tekst)}

/* --------------------------------------------------------------------------
   10. Kaartje en deur
   Het kaartje is wit met een gevelrand bovenaan. De deur is een hoge boog in
   een gevelkleur met een lichter glasvlak: een nieuwe vestiging is een nieuwe
   deur. De deur bevat alleen tekst; nooit het logo.
   -------------------------------------------------------------------------- */
.ekd-kaartje{position:relative;background:var(--ekd-wit);border:1px solid var(--ekd-lijn);border-radius:var(--ekd-r);padding:20px;overflow:hidden}
.ekd-kaartje::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--ekd-koraal) 0 20%,var(--ekd-petrol) 20% 45%,var(--ekd-geel) 45% 60%,var(--ekd-aubergine) 60% 80%,var(--ekd-lucht) 80% 100%)}
.ekd-kaartje h3{margin-top:10px}
.ekd-kaartje p{margin-top:8px;font-size:15px;line-height:1.55}
.ekd-kaartje .ekd-ico{margin-top:4px}
.ekd-deur{--k:var(--ekd-petrol-s);position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:200px;padding:22px 18px 18px;border-radius:999px 999px 16px 16px;background:var(--k);color:var(--ekd-wit);overflow:hidden}
.ekd-deur::before{content:"";position:absolute;left:12px;right:12px;top:12px;bottom:78px;border-radius:999px 999px 6px 6px;border:2px solid rgba(255,255,255,.4);background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.06))}
.ekd-deur::after{content:"";position:absolute;right:26px;bottom:96px;width:8px;height:8px;border-radius:50%;background:var(--ekd-geel)}
/* De plaatsnaam krimpt mee met het scherm: "Leidschendam" past anders niet in
   een deur van 170 px op een telefoon en wordt afgesneden. */
.ekd-deur b{position:relative;font:600 clamp(18px,5.6vw,24px)/1.1 var(--ekd-f-kop);overflow-wrap:anywhere}
.ekd-deur span{position:relative;font-size:14px;line-height:1.4;color:rgba(255,255,255,.9)}
.ekd-deur .ekd-badge{position:relative;justify-self:start;align-self:flex-start;margin-top:8px}
.ekd-deur-aubergine{--k:var(--ekd-aubergine)}
/* De koraal deur staat op het diepe oranje en niet op koraal. Waarom: de
   regel onder de plaatsnaam is 14 px wit met 0,9 dekking en dus gewone tekst.
   Op koraal #DA5A37 haalde die regel maar 3,39 en de plaatsnaam 3,82; de eis
   voor gewone tekst is 4,5. Op #A8401F is het 5,29 voor de regel en 6,14 voor
   de plaatsnaam. Onder het glas zakt wit op het lichtste stuk waar een naam
   van één regel komt naar ongeveer 4,86. De deur blijft zo warm oranje en
   sluit aan op de andere twee deuren (petrol 8,10 en aubergine 10,28 voor de
   regel onder de naam). Nagerekend met meting/contrast.js. */
.ekd-deur-koraal{--k:var(--ekd-oranje-t)}

/* --------------------------------------------------------------------------
   11. Film
   Een video in een donker bord, met een eigen pauzeknop van 44 bij
   44 px. De knop is er omdat een lus langer dan vijf seconden beweegt en een
   bezoeker die moet kunnen stoppen. Het script op de pagina speelt alleen als
   de video in beeld is en nooit bij prefers-reduced-motion of Beweging uit.

   Twee vakken, omdat er twee soorten film zijn. Het vak moet dezelfde
   verhouding hebben als de film zelf: object-fit:cover snijdt anders af wat
   niet past. Een clip van 3 bij 4 in een vak van 9 bij 16 verliest een kwart
   van zijn breedte. Juist aan de zijkanten staan bij de kiosk het bord
   Take away en de menuschermen.
   - .ekd-film-kader, 9 bij 16: de staande opnames van de telefoon (720x1280
     en 540x960), zoals de kioskvideo en de video van binnen.
   - .ekd-film-34, 3 bij 4: de bewerkte clips (720x960 en 540x720). Te
     gebruiken naast .ekd-film-kader (class="ekd-film-kader ekd-film-34") of
     los; beide geven hetzelfde bord, dezelfde rand en dezelfde knop.
   -------------------------------------------------------------------------- */
.ekd-film{position:relative;margin:0}
.ekd-film-kader,.ekd-film-34{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:22px;background:var(--ekd-bord);box-shadow:inset 0 0 0 2px rgba(241,235,216,.26),inset 0 0 0 7px var(--ekd-bord),inset 0 0 0 8px rgba(241,235,216,.12)}
/* Deze regel staat na de gedeelde regel en heeft hetzelfde gewicht, zodat
   3 bij 4 wint als beide klassen op hetzelfde vak staan. */
.ekd-film-34{aspect-ratio:3/4}
.ekd-film-kader video,.ekd-film-34 video{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:cover;border-radius:16px}
.ekd-film-knop{position:absolute;right:16px;bottom:16px;z-index:1;width:44px;height:44px;padding:0;border-radius:50%;border:2px solid var(--ekd-wit);background:rgba(27,27,27,.78);color:var(--ekd-wit);display:grid;place-items:center;cursor:pointer}
.ekd-film-knop[hidden]{display:none}
.ekd-film-knop:hover{background:rgba(27,27,27,.95)}
.ekd-film-icoon{position:relative;display:block;width:14px;height:16px}
.ekd-film-knop[data-staat=speelt] .ekd-film-icoon::before,.ekd-film-knop[data-staat=speelt] .ekd-film-icoon::after{content:"";position:absolute;top:0;width:4px;height:16px;border-radius:1px;background:currentColor}
.ekd-film-knop[data-staat=speelt] .ekd-film-icoon::before{left:1px}
.ekd-film-knop[data-staat=speelt] .ekd-film-icoon::after{right:1px}
.ekd-film-knop[data-staat=staat] .ekd-film-icoon::before{content:"";position:absolute;left:3px;top:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent currentColor}
.ekd-film figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--ekd-tekst)}
.ekd-vlak-donker .ekd-film figcaption{color:var(--ekd-creme)}

/* --------------------------------------------------------------------------
   12. Inhoudsstrook en vragen
   De inhoudsstrook is een rij pillen die op een klein scherm over meerdere
   regels loopt. Ze schuift niet: een rij die binnen zichzelf schuift maakt
   de kolom in Edge zo breed als alle pillen samen en dan scrolt de hele
   pagina opzij. Wat niet past gaat op de volgende regel. De vragen zijn gewone
   details met een boogje als markering en een plus die bij openen een min wordt.
   -------------------------------------------------------------------------- */
.ekd-strook{margin-top:20px}
.ekd-strook h2{font:500 12px/1.4 var(--ekd-f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ekd-tekst);margin-bottom:8px}
.ekd-strook ol{display:flex;flex-wrap:wrap;gap:8px;padding:2px}
.ekd-strook li{flex:0 0 auto;max-width:100%}
.ekd-strook a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border-radius:999px;background:var(--ekd-wit);border:1px solid var(--ekd-lijn);color:var(--ekd-merk-d);font-size:14px;font-weight:600;text-decoration:none;line-height:1.3}
.ekd-strook a::before{content:"";width:10px;height:14px;border-radius:999px 999px 0 0;background:var(--k,var(--ekd-koraal))}
.ekd-strook li:nth-child(6n+1) a{--k:var(--ekd-koraal)}
.ekd-strook li:nth-child(6n+2) a{--k:var(--ekd-petrol)}
.ekd-strook li:nth-child(6n+3) a{--k:var(--ekd-geel)}
.ekd-strook li:nth-child(6n+4) a{--k:var(--ekd-aubergine)}
.ekd-strook li:nth-child(6n+5) a{--k:var(--ekd-lucht)}
.ekd-strook li:nth-child(6n+6) a{--k:var(--ekd-roze)}
.ekd-strook a:hover{border-color:var(--ekd-merk-d)}

.ekd-vragen{max-width:760px}
.ekd-vraag{border-top:1px solid var(--ekd-lijn)}
.ekd-vraag:last-child{border-bottom:1px solid var(--ekd-lijn)}
.ekd-vraag summary{position:relative;list-style:none;cursor:pointer;padding:16px 48px 16px 30px;font-weight:600;line-height:1.4;color:var(--ekd-merk-d)}
.ekd-vraag summary::-webkit-details-marker{display:none}
.ekd-vraag summary::before{content:"";position:absolute;left:0;top:20px;width:14px;height:18px;border-radius:999px 999px 0 0;background:var(--k,var(--ekd-koraal))}
.ekd-vraag:nth-of-type(6n+1) summary{--k:var(--ekd-koraal)}
.ekd-vraag:nth-of-type(6n+2) summary{--k:var(--ekd-petrol)}
.ekd-vraag:nth-of-type(6n+3) summary{--k:var(--ekd-geel)}
.ekd-vraag:nth-of-type(6n+4) summary{--k:var(--ekd-aubergine)}
.ekd-vraag:nth-of-type(6n+5) summary{--k:var(--ekd-lucht)}
.ekd-vraag:nth-of-type(6n+6) summary{--k:var(--ekd-roze)}
.ekd-vraag summary::after{content:"";position:absolute;right:12px;top:50%;width:14px;height:14px;transform:translateY(-50%);background:linear-gradient(var(--ekd-oranje-d) 0 0) center/14px 2px no-repeat,linear-gradient(var(--ekd-oranje-d) 0 0) center/2px 14px no-repeat}
.ekd-vraag[open] summary::after{background:linear-gradient(var(--ekd-oranje-d) 0 0) center/14px 2px no-repeat}
.ekd-vraag-antwoord{padding:0 0 18px 30px}
.ekd-vraag-antwoord p{max-width:66ch;line-height:1.6}

/* --------------------------------------------------------------------------
   13. Knoppen
   De hoofdknop is diep oranje met witte letters: dat haalt AA, het lichtere
   oranje van hun site niet bij tekst van deze grootte. Tekst in oranje op
   crème krijgt een nog iets diepere tint (--ekd-oranje-t), omdat het diepe
   knoporanje daar net onder 4,5 blijft. De randknop is petrol.
   Op een donker vlak wordt de randknop crème.
   -------------------------------------------------------------------------- */
.ekd-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ekd-knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:11px 22px;border-radius:999px;background:var(--ekd-oranje-d);color:var(--ekd-wit);border:2px solid var(--ekd-oranje-d);font-family:var(--ekd-f-tekst);font-weight:600;font-size:16px;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--ekd-duur) var(--ekd-zacht),border-color var(--ekd-duur) var(--ekd-zacht),color var(--ekd-duur) var(--ekd-zacht)}
.ekd-knop:hover{background:#A63D1E;border-color:#A63D1E}
/* a:hover van het sjabloon maakt de linktekst donker (#0A1526). Op de donkere
   hoverkleur gaf dat 2,9:1; wit geeft 6,4:1. De randknop houdt zijn eigen
   kleuren en valt daarom buiten deze regel. */
.ekd-knop:not(.ekd-knop-rand):hover{color:var(--ekd-wit)}
.ekd-knop-rand{background:transparent;color:var(--ekd-merk-d);border-color:var(--ekd-merk-d)}
.ekd-knop-rand:hover{background:var(--ekd-mint)}
.ekd-vlak-donker .ekd-knop-rand,.ekd-bord .ekd-knop-rand{color:var(--ekd-creme);border-color:var(--ekd-creme)}
.ekd-vlak-donker .ekd-knop-rand:hover,.ekd-bord .ekd-knop-rand:hover{background:rgba(241,235,216,.14)}
@media (max-width:479px){.ekd-knoppen .ekd-knop{width:100%}}
.ekd-leeslink{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:12px;font-weight:600;color:var(--ekd-oranje-t);text-decoration:none}
.ekd-leeslink:hover{text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------------------------
   14. Iconen
   Kleine tekens uit css, in een cirkel van mint. Ze verwijzen naar dingen
   uit hun vestigingen: een plaats, een trap van stappen, een team, een
   netwerk, groei en de boom met lichtjes. Bewust simpel, zodat een icoon
   nooit met hun merk verward wordt.
   -------------------------------------------------------------------------- */
.ekd-ico{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ekd-mint);color:var(--ekd-merk-d);flex:none}
.ekd-ico::before,.ekd-ico::after{content:"";position:absolute;box-sizing:border-box}
.ekd-ico-pin::before{width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:currentColor;top:11px}
.ekd-ico-pin::after{width:6px;height:6px;border-radius:50%;background:var(--ekd-mint);top:16px}
.ekd-ico-stappen::before{display:none}
.ekd-ico-stappen::after{width:20px;height:18px;left:12px;top:13px;background:linear-gradient(currentColor 0 0) 0 100%/6px 6px no-repeat,linear-gradient(currentColor 0 0) 7px 100%/6px 12px no-repeat,linear-gradient(currentColor 0 0) 14px 100%/6px 18px no-repeat}
.ekd-ico-team::before{width:12px;height:12px;border-radius:50%;background:currentColor;left:11px;top:12px}
.ekd-ico-team::after{width:12px;height:12px;border-radius:50%;background:currentColor;left:21px;top:20px;box-shadow:0 0 0 2px var(--ekd-mint)}
.ekd-ico-net::before{width:6px;height:6px;border-radius:50%;background:currentColor;left:19px;top:19px;box-shadow:-9px -8px 0 currentColor,9px -8px 0 currentColor,-9px 8px 0 currentColor,9px 8px 0 currentColor}
.ekd-ico-net::after{width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%;left:13px;top:13px;opacity:.55}
.ekd-ico-groei::before{width:22px;height:18px;left:11px;top:13px;background:linear-gradient(currentColor 0 0) 0 100%/5px 7px no-repeat,linear-gradient(currentColor 0 0) 8px 100%/5px 12px no-repeat,linear-gradient(currentColor 0 0) 16px 100%/5px 18px no-repeat}
.ekd-ico-boom::before{width:18px;height:18px;border-radius:50%;background:currentColor;top:9px;box-shadow:inset 0 0 0 2px var(--ekd-mint),inset 5px -4px 0 var(--ekd-mint)}
.ekd-ico-boom::after{width:3px;height:10px;background:currentColor;top:26px;border-radius:2px}
.ekd-ico-euro::before{content:"€";position:static;font:600 20px/1 var(--ekd-f-kop);color:currentColor}
.ekd-ico-pijl::before{width:12px;height:12px;border:solid currentColor;border-width:2.5px 2.5px 0 0;transform:rotate(45deg);left:13px;top:16px}
.ekd-ico-pijl::after{width:16px;height:2.5px;background:currentColor;left:12px;top:21px}
.ekd-ico-praat::before{width:20px;height:14px;border-radius:8px;background:currentColor;top:13px}
.ekd-ico-praat::after{width:0;height:0;border-style:solid;border-width:7px 6px 0 0;border-color:currentColor transparent transparent transparent;left:16px;top:26px}

/* --------------------------------------------------------------------------
   15. Rooster voor het artikel met een rail
   Op een telefoon staat alles onder elkaar. Vanaf 1024 px krijgt het artikel
   een rail van 320 px, links of rechts, afhankelijk van de pagina. De tekst
   houdt dan de leesbreedte en de rail draagt de inhoudsopgave, de formule
   en het andere nieuws. De kinderen krijgen min-width:0, anders rekt een
   brede regel of een lange kop de kolom op tot buiten het scherm.
   -------------------------------------------------------------------------- */
.ekd-artikel{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.ekd-artikel > *{min-width:0}
@media (min-width:1024px){
  .ekd-artikel{grid-template-columns:minmax(0,1fr) 320px;gap:clamp(48px,6vw,88px);align-items:start}
  .ekd-artikel-rail-links{grid-template-columns:300px minmax(0,1fr)}
  .ekd-artikel-rail-links > .ekd-rail{order:-1}
}
.ekd-rail{display:grid;gap:28px;align-content:start}
.ekd-rail h2{font-size:20px}
.ekd-zij-lijst{display:grid;gap:12px;margin-top:12px}
.ekd-zij-lijst li{padding:14px;border:1px solid var(--ekd-lijn);border-radius:14px;background:var(--ekd-wit)}
.ekd-zij-lijst h3{font-size:16px;line-height:1.35;margin-top:8px}
.ekd-zij-lijst h3 a{text-decoration:none}
.ekd-zij-lijst h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.ekd-zij-voet{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:13px;color:var(--ekd-tekst)}
.ekd-monogram{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--ekd-creme);border:1px solid var(--ekd-creme-d);color:var(--ekd-merk-d);font:600 14px/1 var(--ekd-f-kop);margin-right:6px}
.ekd-feitrij{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ekd-feitrij span{display:inline-flex;align-items:center;min-height:28px;padding:3px 10px;border-radius:999px;background:var(--ekd-creme);border:1px solid var(--ekd-creme-d);font-size:13px;font-weight:600;color:var(--ekd-inkt)}
.ekd-bord .ekd-feitrij span{background:rgba(241,235,216,.12);border-color:rgba(241,235,216,.3);color:var(--ekd-creme)}
.ekd-logo{display:block;width:160px;height:auto}

/* --------------------------------------------------------------------------
   16. Beweging
   Twee kleine bewegingen, allebei alleen als de bezoeker dat toestaat:
   - de blokken van een gevelstrook komen bij het laden omhoog, na elkaar;
   - een blok met het attribuut data-ekd-beweeg schuift 18 px op als het in
     beeld komt, gekoppeld aan de scrollpositie (alleen in browsers die dat
     kennen).
   Bij prefers-reduced-motion of Beweging uit staat alles stil, met de
   eindstand als beginstand, zodat er niets verborgen blijft.

   Waarom een eigen attribuut (data-ekd-beweeg) en niet data-beweeg: het
   script van het sjabloon (v2.js) kijkt ook naar elk [data-beweeg] en geeft
   dat blok vanaf 900 px de klasse .beweegt, met een eigen schuifbeweging via
   transform. Die kent onze uitzondering voor het logo niet, zodat het logo in
   B via zijn ouder toch bewoog. Met een haak die alleen deze set kent, beslist
   de set als enige wat er beweegt. Eerder zocht de set naar een klasse die
   nergens stond, waardoor er niets bewoog: één haak, in de html en hier.

   Waarom alleen verschuiven en nooit doorzichtig maken: tekst en foto's zijn
   in elke stand van de beweging volledig zichtbaar. Een browser zonder
   scroll-gestuurde animatie, een schermlezer, een zoekmachine of een pagina
   die halverwege stopt met laden ziet dus nooit een leeg of vaag blok. Er is
   daarom ook geen script nodig dat iets zichtbaar moet maken.

   Waarom via de individuele eigenschap translate en niet via transform: zo
   telt de verschuiving op bij een transform die een blok zelf al heeft
   (zoals een gedraaide stempel) in plaats van die te vervangen.

   Waarom een blok met hun logo stilstaat: hun logo krijgt geen transform, ook
   niet via een ouder. Een verschuiving over delen van een pixel tekent het
   logo tijdens het scrollen opnieuw en kan de randen zachter maken. Een blok
   met een logo krijgt daarom geen haak (de logotegel en het formulekaartje in
   A, het formulebord en het slot in B, het formulekaartje in C). De regel
   hieronder slaat een blok met een logo toch ook zelf over, voor het geval
   een latere pagina de haak er wel op zet.
   -------------------------------------------------------------------------- */
@keyframes ekd-omhoog{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes ekd-inzicht{from{translate:0 18px}to{translate:0 0}}
@media (prefers-reduced-motion:no-preference){
  html:not([data-beweging=uit]) .ekd-gevelstrook i{animation:ekd-omhoog 600ms var(--ekd-zacht) both;animation-delay:calc(var(--n,0) * 45ms)}
  html:not([data-beweging=uit]) .ekd-gevelstrook i:nth-child(2){--n:1}
  html:not([data-beweging=uit]) .ekd-gevelstrook i:nth-child(3){--n:2}
  html:not([data-beweging=uit]) .ekd-gevelstrook i:nth-child(4){--n:3}
  html:not([data-beweging=uit]) .ekd-gevelstrook i:nth-child(5){--n:4}
  html:not([data-beweging=uit]) .ekd-gevelstrook i:nth-child(6){--n:5}
  html:not([data-beweging=uit]) .ekd-gevelstrook i:nth-child(7){--n:6}
  html:not([data-beweging=uit]) .ekd-gevelstrook i:nth-child(8){--n:7}
  html:not([data-beweging=uit]) .ekd-gevelstrook i:nth-child(9){--n:8}
  html:not([data-beweging=uit]) .ekd-gevelstrook i:nth-child(10){--n:9}
  html:not([data-beweging=uit]) .ekd-gevelstrook i:nth-child(11){--n:10}
  html:not([data-beweging=uit]) .ekd-gevelstrook i:nth-child(12){--n:11}
  /* Alleen binnen main.ekd: de haak hoort bij deze set en nergens anders.
     Een browser zonder animation-timeline of zonder :has() slaat de hele
     regel over en toont het blok gewoon op zijn plek.
     animation-timeline staat na de verzamelregel animation, omdat die
     verzamelregel de tijdlijn anders terugzet op de gewone klok. */
  @supports (animation-timeline:view()) and selector(:has(a)){
    html:not([data-beweging=uit]) .ekd [data-ekd-beweeg]:not(:has(img[src*="/logo/"])){animation:ekd-inzicht linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@media (prefers-reduced-motion:reduce){
  .ekd,.ekd *{animation:none !important;transition:none !important}
}
html[data-beweging=uit] .ekd,html[data-beweging=uit] .ekd *{animation:none !important;transition:none !important}

/* Afdrukken: geen decoratie die inkt kost, wel de inhoud. */
@media print{
  .ekd-gevelstrook,.ekd-film-knop,.ekd-cirkels-zacht::before{display:none}
  .ekd-bord,.ekd-vlak-donker{background:none;color:#000;box-shadow:none}
}