/*
Theme Name: karlleisner2026
Theme URI: https://www.karl-leisner.nl/
Author: Studio Stuurman
Author URI: https://studiostuurman.com
Description: Blokthema voor de Nederlandse pagina's over de zalige Karl Leisner. Documentair van opzet: koud steen, één rood accent uit hun eigen woordmerk, Libre Franklin en Source Serif 4. Bewust géén familiegelijkenis met rk-alphacentrum, conform de afspraak met Helen Opstal van 20 juli 2026.
Version: 0.2.3
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: karlleisner2026
*/

/* ══════════════════════════════════════════════════════════════════════════
   PALET

   Koud steen in plaats van het warme ivoor/perkament van de KAC-familie.
   Het rood komt uit hun eigen materiaal: het woordmerk van de oude site is
   rood, en op de foto van het graf in de crypte brandt een rode godslamp.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --steen:#e7e5e0;
  --steen-diep:#d6d3ca;
  --kaars:#fbf9f4;
  --inkt:#1a1c20;
  --inkt-zacht:#565a61;
  --rood:#a3161b;
  --rood-diep:#7d1015;
  --lijn:#c3c0b8;
  --grot:#1e2024;
  --sans:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--steen);color:var(--inkt);font-family:var(--serif);
  font-size:17.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--rood);outline-offset:3px}
.wrap{max-width:66rem;margin:0 auto;padding:0 2rem}

/* ══ kop ══════════════════════════════════════════════════════════════════ */
.kop{border-bottom:1px solid var(--lijn);background:var(--steen);position:sticky;top:0;z-index:30}
.kop-in{max-width:66rem;margin:0 auto;padding:1.05rem 2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.merk{font-family:var(--sans);font-weight:800;font-size:.94rem;letter-spacing:.17em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap}
.merk .jaren{color:var(--rood)}
.menu{display:flex;gap:1.6rem;list-style:none;flex-wrap:wrap;margin:0;padding:0}
.menu a{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;text-decoration:none;color:var(--inkt-zacht);
  display:block;padding-bottom:2px;border-bottom:2px solid transparent;
  transition:color .18s,border-color .18s}
.menu a:hover,.menu a:focus-visible{color:var(--inkt);border-bottom-color:var(--rood)}
.menu .current-menu-item > a{color:var(--inkt);border-bottom-color:var(--rood)}

/* hamburger, alleen op smalle schermen */
.nav-schakel,.nav-knop{display:none}

/* ══ opening van de voorpagina ════════════════════════════════════════════ */
.opening{padding-block:5.5rem 2.4rem;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:3rem;align-items:start}
/* De enige afdruk die van hem bewaard is, naast de naam. De scan is 86 bij
   120 pixels, dus dit is altijd een vergroting: op 148px is dat 1,7 keer, wat
   bij een foto uit de jaren veertig niet opvalt. Verder oprekken gaat wel
   zichtbaar korrelen, dus 148 is hier de bovengrens. */
.portret{width:148px;margin-top:.4rem}
.portret img{width:100%;background:var(--steen-diep);
  box-shadow:0 1px 0 rgba(26,28,32,.18), 0 12px 22px -15px rgba(26,28,32,.55)}
.portret figcaption{font-family:var(--sans);font-size:.63rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--inkt-zacht);
  margin-top:.55rem;line-height:1.45}
.boven{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--inkt-zacht)}
.naam{font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.5rem,8.4vw,5.3rem);line-height:.94;letter-spacing:.012em;margin:.5rem 0 0}
.leus{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--rood);margin-top:1.35rem;
  display:flex;align-items:center;gap:.95rem}
.leus::before{content:"";width:2.6rem;height:2px;background:var(--rood);flex:0 0 auto}
.inzet{font-size:1.28rem;line-height:1.5;max-width:33em;margin-top:2.1rem;color:#2b2e33}
.inzet strong{font-weight:600}

/* ══════════════════════════════════════════════════════════════════════════
   LEVENSLOOP: de tekst en de tijdlijn

   Op een breed scherm staan ze naast elkaar, de tekst links en de tijdlijn
   als smalle kolom rechts. Op een telefoon onder elkaar, en dan komt de TEKST
   EERST. Dat is ook de volgorde in de HTML, dus een schermlezer krijgt hem
   net zo: eerst wie hij was, dan de datums.
   ══════════════════════════════════════════════════════════════════════════ */
/* Eén scheiding, één afstand. Hier stapelden eerst de onderrand van .opening
   (3,2rem), de bovenmarge van dit blok (3,2rem) en de binnenmarge (4,2rem) op
   elkaar: 171 pixels lucht voor één streep. */
.levensloop{
  padding-block:3rem 1rem;
  border-top:1px solid var(--lijn);
  margin-top:0;
}
.verhaal h2,.tijdlijn h2{
  font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--inkt-zacht);margin-bottom:1.4rem;
}
.verhaal-tekst{max-width:38rem;font-size:1.08rem;line-height:1.68}
.verhaal-tekst p{margin-bottom:1.15em}
.verhaal-tekst p:first-child{font-size:1.16rem;line-height:1.56}
.verhaal-tekst p:first-child::first-letter{
  float:left;font-family:var(--sans);font-weight:800;font-size:3.1rem;line-height:.82;
  padding:.06em .12em 0 0;color:var(--rood);
}
.tijdlijn{margin-top:3.2rem}

@media (min-width:1000px){
  .levensloop{
    display:grid;grid-template-columns:minmax(0,1fr) 20rem;
    gap:4.5rem;align-items:start;
  }
  .tijdlijn{margin-top:0;padding-top:.15rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   DE TIJDLIJN ZELF

   Zes gedateerde gebeurtenissen, en de AFSTAND tussen twee regels loopt mee
   met het aantal jaren dat ertussen zit. Daardoor zie je wat de tekst niet
   vertelt: tussen de wijding in Dachau en zijn dood zit bijna niets.

   Zuiver proportioneel kan niet, dan botsen 1944 en 1945 op elkaar. De
   formule is een vaste basis plus een deel van de jaren: monotoon, maar
   ingedikt. Het aantal jaren komt per regel uit --jaren, uitgerekend uit de
   jaartallen zelf.

   De datum staat ónder de gebeurtenis, niet ernaast. In een kolom van 20rem
   is er voor een vierde kolom geen ruimte.
   ══════════════════════════════════════════════════════════════════════════ */
.register{list-style:none;margin:0;padding:0}
.label{display:contents}
.rij{
  display:grid;
  grid-template-columns:3.6rem 1.5rem minmax(0,1fr);
  align-items:start;
  padding-bottom:calc(.9rem + var(--jaren,0) * .2rem);
  position:relative;
}
/* De lijn: elke regel tekent zijn eigen stuk, van zijn markering tot de
   volgende. Daardoor is het rode stuk vanzelf precies zo lang als de tijd
   die het beschrijft, zonder dat er ergens een hoogte hoeft te staan. */
.rij::before{content:"";position:absolute;left:calc(3.6rem + .7rem);top:.52rem;bottom:0;
  width:2px;background:var(--lijn)}
.rij:last-child::before{display:none}
.rij::after{content:"";position:absolute;left:calc(3.6rem + .3rem);top:.28rem;
  width:.8rem;height:.8rem;border-radius:50%;background:var(--steen);border:2px solid var(--lijn)}
.jaar{font-family:var(--sans);font-weight:800;font-size:1.22rem;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;line-height:1.1;
  text-align:right;padding-right:.8rem}
.inhoud{grid-column:3;min-width:0}
.plaats{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--inkt-zacht);line-height:1.5}
.wat{font-family:var(--serif);font-style:italic;font-size:1.06rem;line-height:1.33;margin-top:.06rem}
.datum{grid-column:3;font-family:var(--sans);font-size:.78rem;font-weight:500;
  color:var(--inkt-zacht);font-variant-numeric:tabular-nums;padding-top:.26rem}
.noot{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.06em;
  color:var(--rood);margin-top:.5rem;text-transform:uppercase;line-height:1.45}

/* Het rode stuk loopt van de wijding in Dachau tot zijn dood. Die regel
   krijgt iets meer ruimte eronder dan de formule zou geven, anders is het
   rood maar een paar pixels en valt het weg. */
.rij--priester{padding-bottom:1.9rem}
.rij--priester::before{background:var(--rood);width:4px;left:calc(3.6rem + .6rem);transform-origin:top}
.rij--priester::after,.rij--einde::after{background:var(--rood);border-color:var(--rood)}
.rij--priester .jaar,.rij--einde .jaar{color:var(--rood)}
.rij--priester .wat{color:var(--rood);font-style:normal;font-weight:600;
  font-family:var(--sans);font-size:.98rem;letter-spacing:.005em}

@media (prefers-reduced-motion:no-preference){
  .rij--priester::before{animation:trek 1.2s cubic-bezier(.22,.68,.24,1) .5s both}
  @keyframes trek{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}

/* ══════════════════════════════════════════════════════════════════════════
   DE STRIPPAGINA

   Op de oude site stond deze tekening als achtergrond achter de hele website,
   links en rechts van de tekst. Dat is wat ze "de strip" noemen, en het is het
   meest kenmerkende beeld dat ze hebben: de wijding in Dachau, getekend.

   Hier staat hij niet als behang maar als beeld bij de datum waar hij over
   gaat, direct onder de tijdlijn waarin diezelfde 17 december rood is. Behang
   zou de leesbaarheid van de tekst aantasten en de rest van het ontwerp
   tegenwerken; als eigen blok wint het juist.

   De tekst staat eerst in de HTML, net als bij de levensloop.
   ══════════════════════════════════════════════════════════════════════════ */
.strip{
  padding-block:3.6rem 3.4rem;
  border-top:1px solid var(--lijn);
  margin-top:2.6rem;
}
.strip-tekst h2{
  font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--rood);margin-bottom:1.2rem;
}
.strip-tekst p{max-width:34em;margin-bottom:1.1em}
.strip-beeld{margin:2rem 0 0}
.strip-beeld img{
  width:auto;max-width:100%;height:auto;
  background:var(--steen-diep);
  box-shadow:0 1px 0 rgba(26,28,32,.16), 0 16px 30px -20px rgba(26,28,32,.6);
}
.strip-beeld figcaption{
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--inkt-zacht);margin-top:.7rem;
}

@media (min-width:1000px){
  .strip{
    display:grid;grid-template-columns:minmax(0,1fr) 26rem;
    gap:4.5rem;align-items:start;
  }
  .strip-beeld{margin:0}
}

/* ══ de afdrukken ═════════════════════════════════════════════════════════
   De scans zijn ongeveer 92 bij 120 pixels. Groot maken kan dus niet en hoeft
   ook niet: op bijna ware grootte lezen ze als kleine archiefafdrukken, wat
   ze ook zijn. Gelijke hoogte, ongelijke breedte, zoals een contactstrook. */
.afdrukken{border-top:1px solid var(--lijn);margin-top:2.6rem;padding-block:3.2rem .5rem}
.strook{display:flex;gap:2.1rem;flex-wrap:wrap;margin-top:1.6rem}
.afdruk{max-width:210px}
.afdruk img{height:152px;width:auto;background:var(--steen-diep);
  box-shadow:0 1px 0 rgba(26,28,32,.16), 0 10px 20px -14px rgba(26,28,32,.5)}
.afdruk figcaption{font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--inkt-zacht);
  margin-top:.62rem;line-height:1.4}

/* ══ donkere band met de doelen ═══════════════════════════════════════════ */
.iklk{background:var(--grot);color:#dcd9d2;margin-top:4.2rem;padding-block:4rem 4.3rem}
.iklk h2{font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:#a9a49a}
.doelen{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.1rem 4rem;margin-top:2rem;max-width:52rem;padding:0}
.doelen li{font-family:var(--serif);font-size:1.06rem;line-height:1.5;
  padding-top:1rem;border-top:1px solid rgba(220,217,210,.22)}
.iklk .verder{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.09em;
  margin-top:2.6rem;color:#a9a49a}
.iklk .verder a{color:#fff;text-decoration-color:var(--rood);text-decoration-thickness:2px;
  text-underline-offset:4px}

/* ══ slotblok van de voorpagina ═══════════════════════════════════════════ */
.slot{padding-block:4rem 5rem;display:grid;grid-template-columns:1.15fr 1fr;gap:3.4rem}
.blok h2{font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--inkt-zacht);padding-bottom:.9rem;
  border-bottom:1px solid var(--lijn)}
.blok p{margin-top:1.1rem;max-width:34em}
.brieven{list-style:none;margin:1.1rem 0 0;padding:0;column-width:8rem;column-gap:1.6rem}
.brieven a{display:block;font-family:var(--sans);font-size:.86rem;font-weight:500;
  text-decoration:none;padding:.42rem 0;border-bottom:1px solid var(--steen-diep);
  color:var(--inkt-zacht);transition:color .16s}
.brieven a:hover{color:var(--rood)}
.iban{font-family:var(--sans);font-weight:700;font-size:1.02rem;letter-spacing:.045em;
  margin-top:1.2rem;padding:.85rem 1rem;background:var(--kaars);
  border-left:3px solid var(--rood);font-variant-numeric:tabular-nums;word-break:break-word}
.klein{font-size:.92rem;color:var(--inkt-zacht);margin-top:.9rem}

/* ══════════════════════════════════════════════════════════════════════════
   ARTIKELPAGINA'S
   ══════════════════════════════════════════════════════════════════════════ */
.artikel-kop{max-width:66rem;margin:0 auto;padding:3.6rem 2rem 0}
.artikel-kop .wp-block-post-title{
  font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.9rem,5.2vw,3rem);line-height:1.02;letter-spacing:.012em;
  overflow-wrap:break-word;hyphens:auto}
.artikel-kop::after{content:"";display:block;width:3.2rem;height:3px;
  background:var(--rood);margin-top:1.4rem}
.artikel-body{max-width:66rem;margin:0 auto;padding:2.2rem 2rem 4.5rem;overflow-wrap:break-word}
.artikel-body > *{max-width:42rem}
.artikel-body p{margin-bottom:1.2em}
.artikel-body h2{font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:.13em;margin:2.4em 0 .8em;color:var(--inkt)}
.artikel-body h3{font-family:var(--serif);font-weight:600;font-size:1.3rem;
  line-height:1.25;margin:2em 0 .6em}
.artikel-body a{color:var(--rood-diep);text-decoration-thickness:1px;text-underline-offset:3px}
.artikel-body a:hover{color:var(--rood)}
.artikel-body ul,.artikel-body ol{padding-left:1.25em;margin-bottom:1.2em}
.artikel-body li{margin-bottom:.4em}
.artikel-body li::marker{color:var(--rood)}
.artikel-body img{margin:2em 0;box-shadow:0 1px 0 rgba(26,28,32,.14), 0 12px 22px -16px rgba(26,28,32,.5)}
.artikel-body hr{border:none;height:1px;background:var(--lijn);margin:2.6em 0;max-width:42rem}
.artikel-body blockquote{border-left:3px solid var(--rood);padding-left:1.3rem;
  margin:1.8em 0;font-style:italic;color:#2b2e33}

/* Publicaties: uit Joomla kwam dit als tabel met een rand. Als kaartenrij
   leest het beter en het vouwt vanzelf op een telefoon. */
.kl-beeld{margin:1.8rem 0 2.4rem;max-width:34rem}
/* width:auto in plaats van 100%: het voorproefje uit het stripboek is
   maar 271px breed, en op 100% van de kolom werd dat tot 455px opgeblazen
   en dus wazig. Een grotere foto schaalt nog steeds netjes terug. */
.kl-beeld img{width:auto;max-width:100%;height:auto;margin:0;
  box-shadow:0 1px 0 rgba(26,28,32,.14), 0 14px 26px -18px rgba(26,28,32,.55)}
.kl-beeld figcaption{font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-zacht);margin-top:.7rem}

.kl-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1.8rem;margin:2rem 0;max-width:66rem !important;
  align-items:start}   /* het gebedsprentje heeft geen foto en werd anders een
                          hoge lege doos, even hoog als de kaart ernaast */
.kl-kaart{background:var(--kaars);border:1px solid var(--lijn);padding:1.2rem}
.kl-kaart img{margin:0 0 1rem;width:100%;height:190px;object-fit:contain;
  background:var(--steen-diep);box-shadow:none}
.kl-kaart p{margin:0;font-size:.98rem;line-height:1.45}
.kl-kaart .prijs{font-family:var(--sans);font-weight:700;font-size:.82rem;
  letter-spacing:.06em;color:var(--rood);margin-top:.5rem;display:block}

/* ══ voet ═════════════════════════════════════════════════════════════════ */
.voet{border-top:1px solid var(--lijn);margin-top:1rem}
.voet-in{max-width:66rem;margin:0 auto;padding:2.4rem 2rem 3rem;
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-family:var(--sans);font-size:.76rem;color:var(--inkt-zacht)}
.voet-in a{text-decoration-color:var(--lijn);text-underline-offset:3px}
.credit{display:flex;align-items:center;gap:8px;line-height:1}
/* Het logo rendert 0 pixels breed als je dit niet doet: .credit is een
   flexrij, dus de <a> eromheen is een flexitem zonder eigen breedte, en de
   max-width:100% van de <img> wordt over díé breedte gerekend. */
.credit a{flex:0 0 auto;display:inline-flex;align-items:center;line-height:0}
.ss-logo{height:16px;width:auto;max-width:none;flex:0 0 auto}

/* ══════════════════════════════════════════════════════════════════════════
   SMALLE SCHERMEN
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .wrap,.kop-in,.artikel-kop,.artikel-body,.voet-in{padding-left:1.4rem;padding-right:1.4rem}
  .opening{padding-block:2.6rem 1.8rem;grid-template-columns:1fr;gap:1.6rem}
  .portret{width:124px;order:-1;margin-top:0}
  .slot{grid-template-columns:1fr;gap:2.6rem}
  .doelen{grid-template-columns:1fr;gap:1.5rem}
  .strook{gap:1.2rem}
  .afdruk img{height:126px}
  /* Opening en levensloop hadden samen bijna 10rem lucht ertussen. */
  .levensloop{padding-block:2.2rem 0}
  .tijdlijn{margin-top:2.6rem}

  /* De tijdlijn heeft sinds 0.1.3 overal dezelfde vorm, dus hier staan geen
     uitzonderingen meer voor. */

  /* Menu achter een knop. Zonder dit duwt de laatste menu-ingang zichzelf
     van het scherm, want een flexrij zonder wrap krimpt niet oneindig. */
  .nav-knop{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;
    font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--inkt);
    border:1px solid var(--lijn);padding:.5rem .8rem;background:var(--kaars)}
  .nav-knop span{display:block;width:16px;height:2px;background:var(--inkt);
    position:relative}
  .nav-knop span::before,.nav-knop span::after{content:"";position:absolute;
    left:0;width:16px;height:2px;background:var(--inkt)}
  .nav-knop span::before{top:-5px}
  .nav-knop span::after{top:5px}
  .kop-in{flex-wrap:wrap}
  nav.hoofdmenu{display:none;flex-basis:100%}
  .nav-schakel:checked ~ nav.hoofdmenu{display:block}
  .menu{flex-direction:column;gap:0;padding:.6rem 0 .2rem}
  .menu a{padding:.72rem 0;border-bottom:1px solid var(--steen-diep);
    border-top:0;font-size:.8rem}
  .menu a:hover{border-bottom-color:var(--rood)}
}

/* Vangnet voor tekst zonder afbreekpunt uit de oude site: lange webadressen
   of een reeks harde spaties. */
.artikel-body a{overflow-wrap:anywhere}