/* ===========================================================================
   Esoteric Mastery - ontwerptokens
   Waarden komen uit het Brand Book. Plak dit in het child-thema
   (style.css) of in Elementor onder Site Settings > Custom CSS.

   Zet de kleuren daarnaast ook in Elementor > Site Settings > Global Colors
   en de lettertypen in Global Fonts, zodat je ze in de editor kunt kiezen
   in plaats van telkens een hex-code te typen.
   =========================================================================== */

:root{
  /* --- merkkleuren, letterlijk uit het Brand Book --- */
  --em-black:#000000;
  --em-umber:#342b22;
  --em-pine:#1b4934;
  --em-gold:#dfb169;
  --em-gold-lit:#f6d885;
  --em-white:#ffffff;

  /* --- afgeleiden: warm, nooit neutraal grijs ---
     De huidige site voelt te donker omdat hij vlak zwart is. Deze tinten
     houden het donker maar geven het materiaal: verweerd brons, patina. */
  --em-void:#0b0806;      /* diepste grond, warm zwart */
  --em-void-2:#140f0a;    /* tweede grond, voor afwisseling tussen secties */
  --em-surface:#1d1712;   /* opgetild vlak */
  --em-parchment:#e9e2d4; /* lichte grond voor lange leesteksten */

  /* --- tekst --- */
  --em-text:#d8cfbe;      /* op donker; nooit puur wit, dat snijdt */
  --em-text-dim:#9d9382;
  --em-text-on-light:#2a2018;
  --em-text-on-light-dim:#5d5245;

  /* --- lijnen: goud op lage dekking, nooit grijs --- */
  --em-rule:rgba(223,177,105,.28);
  --em-rule-soft:rgba(223,177,105,.14);

  /* --- typografie --- */
  --em-display:"Cinzel","Trajan Pro",Georgia,serif;
  --em-body:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --em-rune:"Uncial Antiqua","Cinzel",Georgia,serif;

  /* --- maatvoering --- */
  --em-measure:64ch;                       /* leesbreedte lopende tekst */
  --em-pad:clamp(1.5rem,5vw,5rem);         /* horizontale sectiepadding */
  --em-plate:clamp(4rem,9vw,8.5rem);       /* verticale sectiepadding */
}

/* ---------------------------------------------------------------------------
   Typografie
   Cinzel voor koppen en labels, Uncial Antiqua hoogstens een keer per pagina,
   Cormorant Garamond voor alles wat gelezen wordt.
   --------------------------------------------------------------------------- */

body{
  font-family:var(--em-body);
  font-size:clamp(1.06rem,.35vw + 1rem,1.24rem);
  line-height:1.72;
  color:var(--em-text);
  background:var(--em-void);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--em-display);
  font-weight:600;
  line-height:1.14;
  text-wrap:balance;
}

/* Bewust GEEN grootte, letterafstand of hoofdletters op de kale
   elementselectors. Elementor zet die per widget, en een globale regel
   hier zou elke kop op de site in kapitalen dwingen - ook de zinnen die
   dat niet horen te zijn. De kapitalenstijl zit in de utility-klassen
   hieronder, waar je hem bewust aanzet.

   Wil je een kop in de merkstijl: geef hem de klasse em-cap. */
.em-cap{letter-spacing:.16em;text-transform:uppercase}
.em-cap--wide{letter-spacing:.3em;text-transform:uppercase}

/* Het handmerk van de site: een regel per pagina in Uncial Antiqua.
   Vaker gebruiken maakt het onleesbaar en goedkoop. */
.em-rune{font-family:var(--em-rune);letter-spacing:.02em;line-height:1.3;color:var(--em-gold-lit)}

/* Goud verloop over tekst, alleen voor de paginatitel en het woordmerk. */
.em-gilt{
  background:linear-gradient(100deg,var(--em-gold) 0%,var(--em-gold-lit) 45%,var(--em-gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Bovenlabel met doorlopende lijn. Vervangt het gebruikelijke gekleurde balkje. */
.em-eyebrow{
  font-family:var(--em-display);font-size:.72rem;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--em-gold);
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem;
}
.em-eyebrow::after{content:"";flex:1;height:1px;background:var(--em-rule)}

.em-measure{max-width:var(--em-measure)}

/* ---------------------------------------------------------------------------
   Secties
   De site is opgebouwd als opeenvolgende platen. Wissel bewust af tussen
   --em-void en --em-void-2, en zet minstens een lichte plaat per pagina.
   Dat lost "te donker" op zonder het merk licht te maken.
   --------------------------------------------------------------------------- */

.em-plate{padding:var(--em-plate) var(--em-pad);position:relative;overflow:hidden}
.em-plate--alt{background:var(--em-void-2)}
.em-plate--pine{background:linear-gradient(160deg,var(--em-pine) 0%,var(--em-void) 78%)}

/* em-plate--light is in Elementor een kleurschakelaar: de container zet zelf
   achtergrond en randen. Alleen een handgecodeerde .em-plate krijgt ze hier. */
.em-plate--light{color:var(--em-text-on-light)}
.em-plate.em-plate--light{
  background:var(--em-parchment);
  border-top:1px solid var(--em-umber);border-bottom:1px solid var(--em-umber);
}
.em-plate--light h1,.em-plate--light h2,.em-plate--light h3{color:var(--em-umber)}
.em-plate--light .em-eyebrow{color:var(--em-umber)}
.em-plate--light .em-eyebrow::after{background:rgba(52,43,34,.3)}

/* ---------------------------------------------------------------------------
   Knoppen
   --------------------------------------------------------------------------- */

.em-btn{
  display:inline-block;font-family:var(--em-display);font-size:.74rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;text-decoration:none;
  padding:1.05rem 2.4rem;border:1px solid var(--em-gold);color:var(--em-gold);
  background:transparent;transition:background .35s,color .35s;cursor:pointer;
}
.em-btn:hover,.em-btn:focus-visible{background:var(--em-gold);color:var(--em-void)}
.em-plate--light .em-btn{border-color:var(--em-umber);color:var(--em-umber)}
.em-plate--light .em-btn:hover,.em-plate--light .em-btn:focus-visible{background:var(--em-umber);color:var(--em-parchment)}
.em-btn--solid{background:var(--em-gold);color:var(--em-void)}
.em-btn--solid:hover,.em-btn--solid:focus-visible{background:var(--em-gold-lit)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--em-gold-lit);outline-offset:3px;
}

/* ---------------------------------------------------------------------------
   Formaatlabels
   Een vaste set, overal identiek. Hiermee is het verschil tussen
   Practical Mastery en Ritual Arts Mastery af te lezen zonder uitleg.
   --------------------------------------------------------------------------- */

.em-tag{
  font-family:var(--em-display);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--em-gold);border:1px solid var(--em-rule);padding:.34rem .7rem;
  white-space:nowrap;display:inline-block;
}
.em-tag--open{color:var(--em-gold-lit);border-color:var(--em-gold)}
.em-tag--invite{color:var(--em-gold-lit);border-color:var(--em-gold);background:rgba(27,73,52,.35)}

/* ---------------------------------------------------------------------------
   Ontwikkelingspad
   Een keer gebouwd, vier keer gebruikt: Unified Flame, La Santa Muerte,
   Hekate, en Psychic > Mediumship > Somatic.
   --------------------------------------------------------------------------- */

.em-path{display:grid;gap:0}
.em-step{
  display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;gap:1.4rem;
  align-items:center;padding:1.35rem 0;border-bottom:1px solid var(--em-rule-soft);
}
.em-step:last-child{border-bottom:0}
.em-node{position:relative;height:100%;min-height:2.4rem;display:flex;align-items:center;justify-content:center}
.em-node::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--em-rule);transform:translateX(-50%)}
.em-step:first-child .em-node::before{top:50%}
.em-step:last-child .em-node::before{bottom:50%}
.em-node b{width:9px;height:9px;border:1px solid var(--em-gold);background:var(--em-void);
  transform:rotate(45deg);position:relative;z-index:2;display:block}
.em-step--root .em-node b{background:var(--em-gold)}
.em-step--beeld{grid-template-columns:2.6rem 132px minmax(0,1fr) auto}
.em-step-beeld{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--em-void-2)}
.em-step-beeld img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.3) contrast(1.05);transition:filter .4s}
.em-step--beeld:hover .em-step-beeld img{filter:none}
@media (max-width:640px){.em-step--beeld{grid-template-columns:2.6rem minmax(0,1fr)}.em-step-beeld{grid-column:2;max-width:220px}
  .em-step--beeld>div,.em-step--beeld>.em-tag{grid-column:2;justify-self:start}}

/* Meerdere routes onder een richting, zoals La Santa Muerte en Hekate
   onder Sorcery Mastery. Elke route krijgt een kleine kop erboven. */
.em-route+.em-route{margin-top:3.2rem}
.em-route-kop{
  font-family:var(--em-display);font-size:.72rem;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--em-gold);
  margin:0 0 1rem;display:flex;align-items:center;gap:.9rem;
}
.em-route-kop::after{content:"";flex:1;height:1px;background:var(--em-rule)}

/* ---------------------------------------------------------------------------
   Rasters: de vier ingangen en de zeven richtingen
   Geen kaarten met afgeronde hoeken en schaduw. Vlakken gescheiden door
   haarlijnen, zoals de platen in het Brand Book.
   --------------------------------------------------------------------------- */

.em-grid{
  display:grid;border-top:1px solid var(--em-rule);border-left:1px solid var(--em-rule-soft);
}
.em-grid--4{grid-template-columns:repeat(4,1fr)}
.em-grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(232px,100%),1fr))}
.em-cell{
  padding:2.1rem 1.6rem;border-right:1px solid var(--em-rule-soft);
  border-bottom:1px solid var(--em-rule-soft);text-decoration:none;
  display:flex;flex-direction:column;gap:.7rem;transition:background .35s;
}
.em-cell:hover{background:rgba(52,43,34,.5)}

/* Inhoud van een cel: titel, omschrijving, en onderaan voor wie het is. */
.em-cell h3,.em-cell h4{
  font-family:var(--em-display);font-size:.85rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--em-gold);margin:0;
}
.em-cell p{margin:0;font-size:.99em;color:var(--em-text-dim);line-height:1.6}
.em-cell .em-who{
  margin-top:auto;padding-top:1rem;font-family:var(--em-display);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--em-text-dim);opacity:.75;
}
.em-plate--light .em-cell h3,.em-plate--light .em-cell h4{color:var(--em-umber)}
.em-plate--light .em-cell p,.em-plate--light .em-cell .em-who{color:var(--em-text-on-light-dim)}

/* Getuigenissen ([em_testimonials]): foto, kop, citaat, wie. De foto is
   klein en vierkant, geen cirkel: de site kent geen ronde hoeken. */
.em-voices{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.em-voice{margin:0}
.em-voices-meer{text-align:center;margin:2.4rem 0 0}

/* ---- About: de twee blokken die vanuit de Studio gevuld worden ----
   Exact de waarden van de Elementor-widgets die hier stonden: bovenregel
   Cinzel 11px/.34em, kop Cinzel 28px/.16em, tekst Cormorant 17px met
   regelhoogte 1.7 en 64ch breed, citaat Cormorant 24px cursief achter een
   gouden lijn van 2px met 24px ruimte.

   De regels hangen aan de twee blokken zelf (.em-about-intro en
   .em-about-werk), niet aan een omhullende klasse: zo werkt het ook als er
   nog een oudere versie van de shortcode op een pagina staat. Bovenregel en
   naam zijn alinea's, dus ze staan hier met p ervoor, anders wint de
   alinearegel van de opmaak. */
.em-about-intro{display:grid;grid-template-columns:var(--em-about-beeld,300px) minmax(0,1fr);
  gap:60px;align-items:start}
.em-about-intro--geenbeeld{grid-template-columns:minmax(0,1fr)}
.em-about-beeld img{width:100%;height:auto;display:block}

.em-about-intro p,.em-about-werk p{font-family:var(--em-body);font-size:17px;font-weight:400;
  line-height:1.7;color:var(--em-text-dim);margin:0 0 18px;max-width:64ch}
.em-about-intro h2+p,.em-about-werk h2+p,.em-about-intro .em-about-kop+p,.em-about-werk .em-about-kop+p{margin-top:14px}
.em-about-tekst>p:last-child,.em-about-werk>p:last-child{margin-bottom:0}

.em-about-intro p.em-about-label,.em-about-werk p.em-about-label{font-family:var(--em-display);
  font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:var(--em-gold);line-height:1.4;margin:0 0 20px;max-width:none}
.em-about-intro h2,.em-about-werk h2,.em-about-intro .em-about-kop,.em-about-werk .em-about-kop{
  font-family:var(--em-display);font-size:28px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--em-text);line-height:1.3;margin:0 0 16px}

.em-about-intro .em-about-citaat,.em-about-werk .em-about-citaat{border:0;
  border-left:2px solid var(--em-gold);margin:44px 0 10px;padding:0 0 0 24px}
.em-about-intro .em-about-citaat p,.em-about-werk .em-about-citaat p{font-family:var(--em-body);
  font-size:24px;font-style:italic;line-height:1.45;color:var(--em-text);max-width:none;margin:0}
.em-about-intro p.em-about-wie,.em-about-werk p.em-about-wie{font-family:var(--em-display);
  font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--em-gold);margin:0 0 40px;max-width:none}

/* Op de lichte plaat: dezelfde kleuren als het origineel daar gebruikte. */
.em-about--licht p.em-about-label,.em-plate--light .em-about p.em-about-label,
.em-about--licht p.em-about-wie,.em-plate--light .em-about p.em-about-wie{color:var(--em-umber)}
.em-about--licht h2,.em-about--licht .em-about-kop,
.em-plate--light .em-about h2,.em-plate--light .em-about .em-about-kop{color:var(--em-umber)}
.em-about--licht p,.em-plate--light .em-about p{color:var(--em-text-on-light)}
.em-about--licht .em-about-citaat,.em-plate--light .em-about .em-about-citaat{
  border-left-color:var(--em-umber)}
.em-about--licht .em-about-citaat p,.em-plate--light .em-about .em-about-citaat p{
  color:var(--em-umber)}

@media (max-width:860px){
  .em-about-intro{grid-template-columns:1fr;gap:28px}
  .em-about-beeld{max-width:var(--em-about-beeld,300px)}
  .em-about-intro h2,.em-about-werk h2,.em-about-intro .em-about-kop,.em-about-werk .em-about-kop{font-size:24px}
  .em-about-intro .em-about-citaat p,.em-about-werk .em-about-citaat p{font-size:21px}
}

/* ---------------------------------------------------------------------------
   Formulieren op de site
   Twee stuks: het insturen van een ervaring (op de lichte plaat) en de
   nieuwsbrief. Het eerste veld van beide is een honingpot: die moet voor een
   mens onzichtbaar zijn, want wie hem invult wordt geweigerd. Niet met
   display:none — dat negeert een deel van de bots juist — maar uit beeld
   geschoven en buiten de tabvolgorde.
   --------------------------------------------------------------------------- */

.em-form-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none}

.em-voice-form{max-width:760px}
.em-form{display:flex;flex-direction:column;gap:1.1rem;margin:1.6rem 0 0}
.em-form-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1.1rem}
.em-form-veld{display:flex;flex-direction:column;gap:.4rem;margin:0}
.em-form-veld>span{font-family:var(--em-display);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--em-text-dim)}
.em-form-veld small{font-size:.86rem;color:var(--em-text-dim);font-style:italic}
.em-form input[type=text],.em-form input[type=email],.em-form textarea{
  width:100%;padding:.8rem .9rem;background:transparent;color:var(--em-text);
  border:1px solid var(--em-rule-soft);border-radius:0;
  font-family:var(--em-body);font-size:1.02rem;line-height:1.5}
.em-form input[type=text]:focus,.em-form input[type=email]:focus,.em-form textarea:focus{
  outline:none;border-color:var(--em-gold)}
.em-form input::placeholder,.em-form textarea::placeholder{color:var(--em-text-dim)}
.em-form input[type=file]{font-family:var(--em-body);font-size:.95rem;color:var(--em-text-dim)}
.em-form-vinkje{display:flex;align-items:flex-start;gap:.7rem;margin:.2rem 0;
  font-size:.98rem;line-height:1.5}
.em-form-vinkje input{margin-top:.3rem;flex:none}
.em-form-knop{margin:.6rem 0 0}
.em-form-melding{padding:.9rem 1.2rem;border:1px solid var(--em-rule-soft);
  border-top:2px solid var(--em-gold);margin:0 0 1.2rem;font-size:1rem}
.em-form-melding--fout{border-top-color:#c9713f}

/* Op de lichte plaat: dezelfde velden, donkere letters. */
.em-plate--light .em-form-veld>span,.em-plate--light .em-form-veld small{color:var(--em-text-on-light-dim)}
.em-plate--light .em-form input[type=text],.em-plate--light .em-form input[type=email],
.em-plate--light .em-form textarea{color:var(--em-text-on-light);border-color:rgba(52,43,34,.3)}
.em-plate--light .em-form input[type=text]:focus,.em-plate--light .em-form input[type=email]:focus,
.em-plate--light .em-form textarea:focus{border-color:var(--em-umber)}
.em-plate--light .em-form input::placeholder,.em-plate--light .em-form textarea::placeholder{color:var(--em-text-on-light-dim)}
.em-plate--light .em-form-melding{border-color:rgba(52,43,34,.3);border-top-color:var(--em-umber)}
.em-plate--light .em-form-vinkje,.em-plate--light .em-form input[type=file]{color:var(--em-text-on-light)}

/* ---------------------------------------------------------------------------
   Onderdelen van een training ([em_training_parts])
   Een rij blokken onder elkaar, gescheiden door haarlijnen; met beeld links
   zodra er een beeld is.
   --------------------------------------------------------------------------- */

.em-delen{display:grid;gap:0;border-top:1px solid var(--em-rule-soft);margin:1.6rem 0 0}
.em-deel{display:grid;gap:1.4rem;padding:1.9rem 0;border-bottom:1px solid var(--em-rule-soft)}
.em-deel--beeld{grid-template-columns:200px minmax(0,1fr);align-items:start}
.em-deel-beeld{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--em-void-2)}
.em-deel-beeld img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.3) contrast(1.05);transition:filter .4s}
.em-deel:hover .em-deel-beeld img{filter:none}
.em-deel-tekst h3{font-family:var(--em-display);font-size:.9rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--em-gold);margin:0 0 .7rem}
.em-deel-tekst p{margin:0 0 .8rem;color:var(--em-text-dim);line-height:1.7}
.em-deel-intro{font-style:italic;color:var(--em-text)!important}
.em-deel-boek{margin:1rem 0 0}
.em-deel-nota{font-size:.9rem;font-style:italic;color:var(--em-text-dim)}
@media (max-width:640px){.em-deel--beeld{grid-template-columns:1fr}.em-deel-beeld{max-width:260px}}

/* Inklapper ([em_ingeklapt] en de onderdelen): geen script, een <details>. */
.em-lees-meer{margin:0}
.em-lees-meer>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--em-display);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--em-gold);padding:.3rem 0}
.em-lees-meer>summary::-webkit-details-marker{display:none}
.em-lees-meer>summary::after{content:"";width:18px;height:1px;background:var(--em-gold);transition:width .3s}
.em-lees-meer[open]>summary::after{width:34px}
.em-lees-meer>summary:hover{color:var(--em-gold-lit)}
.em-plate--light .em-lees-meer>summary{color:var(--em-umber)}
.em-plate--light .em-lees-meer>summary::after{background:var(--em-umber)}

/* De tweede keuze bij een training in termijnen: dezelfde knop, stiller van
   kleur. Twee knoppen naast elkaar; de gouden blijft de hoofdweg. */
/* Met het element erbij (a.em-btn--stil): anders wint de algemene knopregel
   van de lichte plaat en blijft de tweede knop goud. */
a.em-btn--stil,.em-btn--stil{border-color:var(--em-rule);color:var(--em-text-dim)}
a.em-btn--stil:hover,a.em-btn--stil:focus-visible{background:transparent;border-color:var(--em-gold);color:var(--em-gold)}
.em-plate--light a.em-btn--stil{border-color:rgba(52,43,34,.35);color:var(--em-text-on-light-dim)}
.em-plate--light a.em-btn--stil:hover,.em-plate--light a.em-btn--stil:focus-visible{
  background:transparent;border-color:var(--em-umber);color:var(--em-umber)}

/* De rijen waarin die twee knoppen staan: naast elkaar, met ruimte ertussen,
   en onder elkaar zodra het te smal wordt. */
.em-details-boek,.em-deel-boek{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:1.4rem 0 0}
.em-badges{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;justify-content:flex-end}
/* In de agenda staan de labels op de eerste regel en de betaalknoppen op de
   tweede; naast elkaar werd het een rij van drie. */
.em-agenda-acties{display:flex;flex-direction:column;align-items:flex-end;gap:.85rem}
.em-agenda-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;justify-content:flex-end}
.em-agenda-knoppen:empty{display:none}
@media (max-width:640px){
  .em-agenda-acties,.em-agenda-knoppen,.em-agenda-acties .em-badges{align-items:flex-start;justify-content:flex-start}
}
@media (max-width:560px){
  .em-details-boek,.em-deel-boek{flex-direction:column;align-items:stretch}
  .em-details-boek .em-btn,.em-deel-boek .em-btn{text-align:center}
}

/* Kleine knop, voor in een rij of onder een onderdeel. */
.em-btn--klein{font-size:.62rem;letter-spacing:.2em;padding:.7rem 1.4rem}

/* De rol van een begeleider hoort onder de naam, niet onderaan de kaart. */
.em-who--top{margin-top:0!important;padding-top:0!important}

/* Twee kolommen, en de landenblokken bij de ambassadeurs. */
.em-grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){.em-grid--2{grid-template-columns:1fr}}
.em-land{gap:.9rem}
.em-vlag{display:inline-flex;width:34px;height:23px;border:1px solid var(--em-rule-soft)}
.em-vlag i{display:block;flex:1}

/* ---------------------------------------------------------------------------
   Lichte plaat: wat nog in goud stond
   Goud op perkament haalt 1,5:1 en is dus onleesbaar. Deze vier klassen
   misten hun tegenhanger, en de hover van een cel maakte de tekst erin grijs
   op grijs.
   --------------------------------------------------------------------------- */

.em-plate--light .em-tag,.em-plate--light .em-tag--open,.em-plate--light .em-tag--invite{
  color:var(--em-umber);border-color:rgba(52,43,34,.35);background:transparent}
.em-plate--light .em-route-kop{color:var(--em-umber)}
.em-plate--light .em-route-kop::after{background:rgba(52,43,34,.3)}
.em-plate--light .em-agenda-wanneer{color:var(--em-umber)}
.em-plate--light .em-rune{color:var(--em-umber)}
.em-plate--light .em-cell:hover{background:rgba(52,43,34,.08)}

/* ---------------------------------------------------------------------------
   Mand, kassa en bevestiging
   De Elementor-widgets voor cart en checkout zetten witte panelen, blauwe
   knoppen en Roboto neer. Hun selectoren dragen de widgetklasse en een id,
   dus hier is !important de enige manier om eronderuit te komen.
   --------------------------------------------------------------------------- */

/* Velden altijd donker, ook binnen de widgets en het landenkeuzemenu. */
.woocommerce input.input-text,.woocommerce textarea,.woocommerce select,
.e-checkout__container input.input-text,.e-checkout__container textarea,.e-checkout__container select,
.e-cart__container input.input-text,.woocommerce .select2-container .select2-selection--single,
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered{
  background:var(--em-void)!important;color:var(--em-text)!important;
  border:1px solid var(--em-rule-soft)!important;border-radius:0!important;
  font-family:var(--em-body)!important;font-size:1.02rem!important;box-shadow:none!important}
.woocommerce .select2-container .select2-selection--single{height:auto!important;padding:.55rem .6rem!important}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered{border:0!important;padding:0!important;line-height:1.5!important}
.select2-dropdown{background:var(--em-void-2)!important;color:var(--em-text)!important;border:1px solid var(--em-rule-soft)!important;border-radius:0!important}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--em-umber)!important;color:var(--em-text)!important}
.select2-search--dropdown .select2-search__field{background:var(--em-void)!important;color:var(--em-text)!important;border:1px solid var(--em-rule-soft)!important}
.woocommerce input.input-text:focus,.woocommerce textarea:focus,.e-checkout__container input.input-text:focus{border-color:var(--em-gold)!important;outline:none!important}
.woocommerce input.input-text::placeholder,.woocommerce textarea::placeholder{color:var(--em-text-dim)!important}
.woocommerce-checkout .woocommerce-input-wrapper,.e-checkout__container .woocommerce-input-wrapper{background:transparent!important}

/* Geen witte platen: de panelen van beide widgets worden de tweede grond. */
.e-cart-section,.e-cart-totals,.e-checkout__container .e-checkout-section,
.woocommerce-checkout .woocommerce-billing-fields,.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-checkout-review-order,.e-checkout__container .e-checkout__order_review{
  background:var(--em-void-2)!important;border:1px solid var(--em-rule-soft)!important;
  border-radius:0!important;box-shadow:none!important}
.e-cart__container,.e-checkout__container{color:var(--em-text)!important;font-family:var(--em-body)!important}
/* De widget zet zijn eigen letter op elk onderdeel; vandaar hier ook. */
.e-cart__container,.e-cart__container td,.e-cart__container th,.e-cart__container p,
.e-cart__container span,.e-cart__container a,.e-cart__container label,
.woocommerce-cart .woocommerce-message,.woocommerce-cart .woocommerce-info{
  font-family:var(--em-body)!important}
.e-cart__container td,.e-cart__container .product-name,.e-cart__container .product-name a{
  font-size:1.02rem!important;letter-spacing:0!important;text-transform:none!important}

/* Koppen en kolomtitels in de displayletter. */
.woocommerce-cart .cart_totals h2,.e-cart-section h2,.e-cart-section h3,
.woocommerce-order-details h2,.woocommerce-customer-details h2,.woocommerce-column__title{
  font-family:var(--em-display)!important;font-size:.82rem!important;font-weight:600!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--em-gold)!important;
  margin:0 0 1rem!important}
.woocommerce table.shop_table th,.woocommerce-cart-form th,.woocommerce table.cart th{
  font-family:var(--em-display)!important;font-size:.6rem!important;letter-spacing:.18em!important;
  text-transform:uppercase!important;color:var(--em-text-dim)!important;font-weight:600!important}

/* Tabellen: haarlijnen in plaats van randen, tekst in de leeskleur. */
.woocommerce table.shop_table,.woocommerce table.shop_table td,.woocommerce table.shop_table th,
.woocommerce table.shop_table tbody th,.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th{
  background:transparent!important;color:var(--em-text)!important;
  border-color:var(--em-rule-soft)!important;border-radius:0!important}
.woocommerce table.shop_table .product-name a,.woocommerce-table--order-details .product-name a{
  color:var(--em-text)!important;text-decoration:none}
.woocommerce table.shop_table .product-name a:hover{color:var(--em-gold)!important}
/* Het euroteken staat in een eigen span en kreeg zwart mee. */
.woocommerce .woocommerce-Price-amount,.woocommerce .woocommerce-Price-amount bdi,
.woocommerce .woocommerce-Price-currencySymbol,.woocommerce-order .woocommerce-Price-amount,
.woocommerce-order .woocommerce-Price-currencySymbol{color:var(--em-gold)!important}
.woocommerce small.includes_tax,.woocommerce .tax_label,.woocommerce .product-subtotal small{color:var(--em-text-dim)!important}
.woocommerce .product-remove a.remove{color:var(--em-text-dim)!important;background:transparent!important}
.woocommerce .product-remove a.remove:hover{color:var(--em-gold)!important;background:transparent!important}

/* Op een smal scherm zet WooCommerce de kolomtitel vóór de cel, met
   td::before — en die stond zwart op bijna zwart. Dezelfde kleine kapitalen
   als de kolomtitels op een breed scherm. */
.woocommerce table.shop_table td::before,.woocommerce table.shop_table_responsive tr td::before{
  color:var(--em-text-dim)!important;font-family:var(--em-display)!important;font-size:.6rem!important;
  letter-spacing:.18em!important;text-transform:uppercase!important;font-weight:600!important}

/* De regel onder de prijs bij betalen in termijnen ("per maand gedurende drie
   maanden") kwam uit WooCommerce Subscriptions en stond ook zwart. */
.woocommerce .subscription-details,.woocommerce .subscription-price,.woocommerce .wcs-switch-link,
.woocommerce .product-price small,.woocommerce .product-subtotal small,
.woocommerce .order-total .subscription-details{color:var(--em-text-dim)!important}

/* Meldingen: geen grijze balk maar een donkere met een gouden lijn. */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice,
.e-cart-section .woocommerce-message,.woocommerce-checkout .woocommerce-info{
  background:var(--em-void-2)!important;color:var(--em-text)!important;
  border:1px solid var(--em-rule-soft)!important;border-top:2px solid var(--em-gold)!important;
  border-radius:0!important;font-family:var(--em-body)!important;font-size:1.02rem!important}
.woocommerce-message::before,.woocommerce-info::before{color:var(--em-gold)!important}
.woocommerce-error{border-top-color:#c9713f!important}
.woocommerce-error::before{color:#c9713f!important}

/* Knoppen: dezelfde als overal op de site. Gevulde knop voor de volgende
   stap, lijnknop voor de rest. */
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button,.woocommerce-message .button,.e-cart-section .button,
.woocommerce-checkout #payment #place_order,.woocommerce .checkout-button{
  font-family:var(--em-display)!important;font-size:.66rem!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;border-radius:0!important;
  padding:.9rem 1.7rem!important;box-shadow:none!important;transition:background .3s,color .3s}
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button,.woocommerce-message .button{
  background:transparent!important;color:var(--em-gold)!important;border:1px solid var(--em-gold)!important}
.woocommerce .button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button:hover,.woocommerce-message .button:hover{
  background:var(--em-gold)!important;color:var(--em-void)!important}
.woocommerce .checkout-button,.woocommerce a.checkout-button,
.woocommerce-checkout #payment #place_order,.elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment #place_order{
  background:var(--em-gold)!important;color:var(--em-void)!important;border:1px solid var(--em-gold)!important}
.woocommerce .checkout-button:hover,.woocommerce a.checkout-button:hover,
.woocommerce-checkout #payment #place_order:hover{
  background:var(--em-gold-lit)!important;color:var(--em-void)!important}
.woocommerce button.button:disabled,.woocommerce .button.disabled{opacity:.5!important}

/* Kassa: het betaalvak en de lijst met betaalmethoden. */
.woocommerce-checkout #payment,.elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment{
  background:transparent!important}
.woocommerce-checkout #payment ul.payment_methods,
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment ul.payment_methods{
  background:transparent!important;border-bottom:1px solid var(--em-rule-soft)!important;color:var(--em-text)!important}
.woocommerce-checkout #payment ul.payment_methods li,
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment ul.payment_methods li,
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment .payment_method{
  background:transparent!important;color:var(--em-text)!important}
.woocommerce-checkout #payment div.payment_box,
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment div.payment_box,
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment .payment_box{
  background:var(--em-umber)!important;color:var(--em-text)!important;border-radius:0!important}
.woocommerce-checkout #payment div.payment_box::before,
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment div.payment_box::before{
  border-bottom-color:var(--em-umber)!important}
.woocommerce-checkout #payment div.payment_box *{color:var(--em-text)!important}
/* Wat Stripe zelf neerzet staat in een eigen vak; dat mag niet oplichten. */
.woocommerce-checkout #payment .wc-stripe-upe-element,
.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods,
.woocommerce-checkout #payment .wc-stripe-checkout-fields,
.woocommerce-checkout #payment .payment_box fieldset{
  background:transparent!important;border-color:var(--em-rule-soft)!important}

/* Bevestiging na betaling: de gegevens moeten leesbaar zijn op donker. */
.woocommerce-order,.woocommerce-order-details,.woocommerce-customer-details{color:var(--em-text)}
.woocommerce ul.order_details,.woocommerce-order-overview{
  background:var(--em-void-2)!important;border:1px solid var(--em-rule-soft)!important;
  padding:1.2rem 1.6rem!important;margin:1.6rem 0 2.4rem!important;list-style:none!important}
.woocommerce ul.order_details li{
  color:var(--em-text-dim)!important;font-family:var(--em-display)!important;font-size:.6rem!important;
  letter-spacing:.18em!important;text-transform:uppercase!important;border-color:var(--em-rule-soft)!important}
.woocommerce ul.order_details li strong{
  color:var(--em-text)!important;font-family:var(--em-body)!important;font-size:1.05rem!important;
  letter-spacing:0!important;text-transform:none!important;font-weight:400!important}
.woocommerce-table--order-details td,.woocommerce-table--order-details th,
.woocommerce-table--order-details tfoot td,.woocommerce-table--order-details tfoot th{
  color:var(--em-text)!important;border-color:var(--em-rule-soft)!important;background:transparent!important}
.woocommerce-customer-details address{
  color:var(--em-text)!important;border:1px solid var(--em-rule-soft)!important;
  border-radius:0!important;padding:1.2rem 1.4rem!important;font-family:var(--em-body)!important;font-style:normal}
.woocommerce-customer-details a,.woocommerce-order a{color:var(--em-gold)!important}

/* Inschrijven op de nieuwsbrief ([em_subscribe]): één veld en een knop. */
.em-subscribe-form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:stretch;max-width:420px}
.em-subscribe-veld{flex:1 1 200px;margin:0}
.em-subscribe-veld--naam{flex:1 1 100%}
.em-subscribe-form input[type=email],.em-subscribe-form input[type=text]{width:100%;height:100%;padding:.8rem .9rem;background:transparent;color:var(--em-text);
  border:1px solid var(--em-rule-soft);border-radius:0;font-family:var(--em-body);font-size:1rem}
.em-subscribe-form input[type=email]:focus,.em-subscribe-form input[type=text]:focus{outline:none;border-color:var(--em-gold)}
.em-subscribe-form input::placeholder{color:var(--em-text-dim)}
.em-subscribe-form .em-btn{padding:.85rem 1.4rem;font-size:.66rem;white-space:nowrap}
.em-subscribe .em-form-melding{margin-bottom:1rem;font-size:.98em}
.em-subscribe-uit{margin:0}

/* Initiatieke paden ([em_initiations]): kaart met beeld bovenaan. */
.em-initiations{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.em-initiation-beeld{margin:-2.1rem -1.6rem 1rem;aspect-ratio:16/9;overflow:hidden;background:var(--em-void-2)}
.em-initiation-beeld img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.2) contrast(1.05);transition:filter .4s}
.em-initiation:hover .em-initiation-beeld img{filter:none}
.em-cell p.em-initiation-sub,.em-initiation-sub{font-style:italic;color:var(--em-text);margin:0 0 .4rem}

/* Praktische gegevens op de trainingspagina ([em_training_details]). */
.em-details{margin:0;display:grid;gap:.9rem 2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.em-details>div{margin:0}
.em-details dt{font-family:var(--em-display);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--em-text-dim);margin:0 0 .35rem}
.em-details dd{margin:0!important;padding:0;font-size:1.06em;line-height:1.5}
.em-plate--light .em-details dt{color:var(--em-text-on-light-dim)}
.em-plate--light .em-details dd{color:var(--em-text-on-light)}
.em-plate--light .em-details a{color:var(--em-umber)}

/* Dieptemeter bij de vier ingangen: de streep groeit, want dat is precies
   wat de vier ingangen coderen. Structuur die iets waars zegt. */
.em-depth{display:flex;gap:4px;align-items:flex-end;height:14px}
.em-depth i{width:16px;height:2px;background:var(--em-rule);display:block}
.em-depth i.on{background:var(--em-gold);height:6px}


/* ---------------------------------------------------------------------------
   Trainingenlijst
   Wat [em_trainings] uitstuurt. Geen kaarten met afgeronde hoeken: regels
   gescheiden door haarlijnen, zoals de platen in het Brand Book.
   --------------------------------------------------------------------------- */

.em-list{display:grid;gap:0;border-top:1px solid var(--em-rule-soft)}

.em-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 2rem;
  align-items:start;padding:1.7rem 0;border-bottom:1px solid var(--em-rule-soft);
  text-decoration:none;transition:padding-left .3s;
}
.em-item:hover,.em-item:focus-visible{padding-left:.7rem}
.em-item h4{
  font-family:var(--em-display);font-size:1.02rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--em-gold);margin:0;
}
.em-item p{margin:.5rem 0 0;color:var(--em-text-dim);max-width:58ch}

.em-badges{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}

/* Met beeld: [em_trainings image="yes"]. Een liggend beeld links, in een vaste
   verhouding, zodat de regels even hoog blijven ongeacht het bronbestand. */
.em-item--beeld{grid-template-columns:168px minmax(0,1fr) auto;align-items:center}
.em-item-beeld{aspect-ratio:3/2;overflow:hidden;background:var(--em-void-2)}
.em-item-beeld img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.35) contrast(1.05);transition:filter .4s,transform .6s}
.em-item--beeld:hover .em-item-beeld img{filter:none;transform:scale(1.03)}
.em-item-beeld--leeg{border:1px dashed var(--em-rule-soft)}
@media (max-width:700px){
  .em-item--beeld{grid-template-columns:1fr}
  .em-item-beeld{max-width:320px}
}

/* De regel onder een stap in een ontwikkelingspad: de voorwaarde, of een
   korte omschrijving als er geen voorwaarde is. */
.em-meta{margin:.25rem 0 0;color:var(--em-text-dim);font-size:.95em}

/* Op een lichte plaat draaien de tekstkleuren mee. */
.em-plate--light .em-item p,
.em-plate--light .em-meta{color:var(--em-text-on-light-dim)}
.em-plate--light .em-item h4{color:var(--em-umber)}


/* ---------------------------------------------------------------------------
   Links binnen onze componenten
   Het thema en Elementor zetten hier hun eigen linkkleur en onderstreping
   overheen. Hogere specificiteit is genoeg; geen !important nodig.
   --------------------------------------------------------------------------- */

.em-list a.em-item,
.em-list a.em-item:hover,
.em-list a.em-item:focus,
.em-list a.em-item:visited{text-decoration:none}
.em-list a.em-item h4,
.em-list a.em-item p{text-decoration:none}

/* Titel van een stap in een ontwikkelingspad. Deze ontbrak volledig. */
.em-path .em-step h4{
  font-family:var(--em-display);font-size:.94rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;margin:0;
}
.em-path .em-step h4 a,
.em-path .em-step h4 a:visited{color:var(--em-text);text-decoration:none}
.em-path .em-step h4 a:hover,
.em-path .em-step h4 a:focus-visible{color:var(--em-gold)}
.em-plate--light .em-path .em-step h4 a{color:var(--em-umber)}

@media (max-width:560px){
  .em-item{grid-template-columns:1fr}
  .em-badges{justify-content:flex-start}
}

@media (max-width:900px){.em-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.em-grid--4{grid-template-columns:1fr}.em-tag,.em-cell .em-who{font-size:.68rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Agenda ([em_events]): datumregel in kapitaaltjes onder de titel. Een item
   zonder link is een gewone regel, zonder de verschuiving bij hover. */
.em-agenda-wanneer{font-family:var(--em-display);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--em-gold);margin:0 0 .4rem!important}
.em-item--stil{cursor:default}
.em-item--stil:hover{padding-left:0}

/* ---- De deelnemerspagina ------------------------------------------------
   Dit is de werkplek van wie betaald heeft, geen etalage. Lichte vlakken op
   de donkere grond: makkelijker lezen, en het voelt als een eigen omgeving in
   plaats van nog een pagina van de site. */
.em-mijn{display:flex;flex-direction:column;gap:1rem;margin:0;max-width:54rem}
.em-mijn-item{display:flex;align-items:center;flex-wrap:wrap;gap:1.1rem 1.4rem;
  background:var(--em-parchment);color:var(--em-text-on-light);
  border:1px solid rgba(52,43,34,.16);padding:1.1rem 1.3rem}
.em-mijn-beeld{flex:0 0 auto}
.em-mijn-beeld img{display:block;width:7rem;height:7rem;object-fit:cover}
.em-mijn-tekst{flex:1 1 18rem;min-width:0}
.em-mijn-tekst h3{margin:0;font-family:var(--em-display);font-size:1rem;line-height:1.35;
  letter-spacing:.04em;text-transform:none;color:var(--em-umber)}
.em-mijn-tekst .em-meta{margin:.35rem 0 0;font-size:.95rem;line-height:1.5;
  color:var(--em-text-on-light-dim)}
.em-mijn-knop{flex:0 0 auto;margin-left:auto}
.em-mijn-wacht{display:inline-block;font-family:var(--em-display);font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--em-text-on-light-dim)}
.em-balk{display:block;margin-top:.7rem;height:3px;background:rgba(52,43,34,.14)}
.em-balk-vol{display:block;height:100%;background:var(--em-umber)}
/* De knop staat hier op een lichte grond, dus niet goud op parchment. */
.em-mijn .em-btn{border-color:rgba(52,43,34,.38);color:var(--em-umber);background:transparent}
.em-mijn .em-btn:hover,.em-mijn .em-btn:focus-visible{background:var(--em-umber);
  border-color:var(--em-umber);color:var(--em-parchment)}
@media (max-width:640px){
  .em-mijn-item{padding:1rem}
  .em-mijn-beeld img{width:4.5rem;height:4.5rem}
  .em-mijn-tekst{flex:1 1 10rem}
  .em-mijn-knop{margin-left:0;flex-basis:100%}
}

/* ---- Wachtwoord opnieuw instellen ---------------------------------------
   WooCommerce zet onder het wachtwoordveld een gekleurd blok met "Medium" of
   "Strong" erin. Dat blok is in de standaardkleuren een geel vlak dwars door
   de pagina; hier is het een smalle regel die de kleur van het oordeel draagt
   zonder de indeling uit elkaar te trekken. */
.woocommerce-password-strength{background:transparent;border:1px solid var(--em-rule);
  border-radius:0;padding:.35rem .6rem;margin:.45rem 0 0;text-align:left;font-weight:400;
  font-family:var(--em-display);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--em-text-dim)}
.woocommerce-password-strength.short{background:transparent;border-color:#e07a6a;color:#e07a6a}
.woocommerce-password-strength.bad{background:transparent;border-color:#e0a96a;color:#e0a96a}
.woocommerce-password-strength.good{background:transparent;border-color:var(--em-gold);color:var(--em-gold)}
.woocommerce-password-strength.strong{background:transparent;border-color:#8fae7e;color:#8fae7e}
.woocommerce-password-hint{display:block;margin:.4rem 0 0;font-size:.92rem;line-height:1.5;
  color:var(--em-text-dim)}
/* De twee wachtwoordvelden even hoog houden, ook als er onder het ene een
   oordeel verschijnt en onder het andere niet. */
.woocommerce-ResetPassword .form-row-first,.woocommerce-ResetPassword .form-row-last{
  margin-bottom:1.1rem}
.woocommerce-ResetPassword .show-password-input{color:var(--em-text-dim)}
.woocommerce-ResetPassword button.button{margin-top:.4rem}

/* ---- De titel van een pagina die het thema zelf tekent ------------------
   De meeste pagina's krijgen hun kop van Elementor. Mijn account, wachtwoord
   vergeten en andere WooCommerce-pagina's niet: die tonen de standaardkop van
   het thema, en die stond in een andere letter en veel groter dan de rest van
   de site. Dit is dezelfde sectiekop als elders: Cinzel in kapitalen, 28px op
   een breed scherm. */
.page-header .entry-title{font-family:"Esoteric Cinzel 600",var(--em-display);
  font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;line-height:1.3;color:var(--em-text);margin:0 0 1.6rem}

/* ---- Video op de lespagina ---------------------------------------------
   Een les kan meerdere opnames hebben: een paar bij Vimeo, soms een op
   YouTube. Elke speler vult de breedte en houdt zijn verhouding, met de naam
   eronder als die er is. De marge van figure gaat eraf, anders springt de
   video in. */
.em-les-video{margin:0 0 2rem;padding:0}
.em-les-video iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;
  background:#000}
.em-les-video figcaption{margin-top:.5rem;font-family:var(--em-display);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--em-text-dim)}

/* ---- Het voorbeeld van een les -----------------------------------------
   Alleen zichtbaar voor wie de training beheert. De balk moet er anders
   uitzien dan de les zelf, anders ga je je eigen voorbeeld aanzien voor wat
   de deelnemer krijgt; vandaar de lijn ernaast en de stillere letter. */
.em-voorbeeld-balk{border-left:2px solid var(--em-gold);padding:.9rem 0 .9rem 1.1rem;
  margin:0 0 2rem;background:rgba(223,177,105,.05)}
.em-voorbeeld-balk p{margin:0 0 .4rem;font-size:.95rem;line-height:1.55;color:var(--em-text-dim)}
.em-voorbeeld-balk p:last-child{margin-bottom:0}
.em-voorbeeld-balk strong{font-family:var(--em-display);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--em-gold);margin-right:.5rem}
.em-voorbeeld-let{color:var(--em-gold)}
.em-voorbeeld-bewerk{font-family:var(--em-display);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--em-text-dim);text-decoration:none;
  border-bottom:1px solid var(--em-rule-soft)}
.em-voorbeeld-bewerk:hover,.em-voorbeeld-bewerk:focus-visible{color:var(--em-gold);
  border-bottom-color:var(--em-gold)}
.em-voorbeeld-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;
  margin:2.4rem 0 0;padding-top:1.4rem;border-top:1px solid var(--em-rule-soft)}
.em-voorbeeld-eind,.em-voorbeeld-teller{font-family:var(--em-display);font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--em-text-dim)}
.em-voorbeeld-teller{margin-left:auto}

/* ---- De lijst met lessen onder een les ---------------------------------
   Stond er tot nu toe zonder opmaak: blauwe links tegen de titel aan. Het is
   een inhoudsopgave, geen lopende tekst, dus de titel links en de stand
   rechts, met een lijn ertussen. */
.em-lessenlijst{margin:3rem 0 0;padding-top:1.6rem;border-top:1px solid var(--em-rule-soft)}
.em-lessenlijst ol{list-style:none;margin:0;padding:0;counter-reset:em-les}
.em-lesregel{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
  padding:.75rem 0;border-bottom:1px solid var(--em-rule-soft)}
.em-lesregel::before{counter-increment:em-les;content:counter(em-les);
  font-family:var(--em-display);font-size:.62rem;letter-spacing:.1em;color:var(--em-text-dim);
  min-width:1.4rem;flex:0 0 auto}
.em-lesregel a,.em-lesregel>span:not(.em-meta){flex:1 1 12rem;color:var(--em-text);
  text-decoration:none;line-height:1.45}
.em-lesregel a:hover,.em-lesregel a:focus-visible{color:var(--em-gold)}
.em-lesregel .em-meta{flex:0 0 auto;margin-left:auto;font-family:var(--em-display);
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--em-text-dim)}
/* De les waar je nu staat, en wat al af is. */
.em-lesregel--nu{border-left:2px solid var(--em-gold);padding-left:.9rem;margin-left:-.9rem}
.em-lesregel--nu a,.em-lesregel--nu>span:not(.em-meta){color:var(--em-gold)}
.em-lesregel--af .em-meta{color:var(--em-text-dim)}
.em-lesregel--dicht>span:not(.em-meta){color:var(--em-text-dim)}
.em-lessenlijst--voorbeeld .em-lesregel--concept .em-meta{color:var(--em-gold)}

/* ---- Een opname op de lespagina ----------------------------------------
   Spraak hoort te klinken waar je staat, niet eerst in je downloadmap te
   belanden. De link om het toch te bewaren staat eronder, kleiner. */
.em-les-geluid{margin:2rem 0}
.em-geluid{margin:0 0 1.4rem}
.em-geluid figcaption{font-family:var(--em-display);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--em-text-dim);margin-bottom:.5rem}
.em-geluid audio{display:block;width:100%;max-width:34rem}
/* Eén regel onder de spelers in plaats van een bewaarknop per opname. */
.em-geluid-uitleg{margin:.2rem 0 0;font-size:.88rem;line-height:1.5;color:var(--em-text-dim)}