/* Islam in gewone taal – eenvoudige, mobiele eerst stijl */
:root{
  --achtergrond:#fbf6ec; --vlak:#ffffff; --zand:#f3e9d6; --tekst:#25221d; --zacht:#5b5348;
  --groen:#1f5135; --groen-donker:#163d27; --groen-licht:#e4efe6; --rand:#e2d6bf;
  --koran:#1f5135; --uitleg:#6b4b16; --verschilt:#3d4a7a; --focus:#c8781a;
  --maat:1.125rem; --breed:40rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--achtergrond);color:var(--tekst);font-family:"Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--maat);line-height:1.65}
a{color:var(--groen);text-underline-offset:.18em}
a:hover{color:var(--groen-donker)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.skiplink{position:absolute;left:-999px;top:0;background:var(--groen);color:#fff;padding:.6rem 1rem;z-index:10}
.skiplink:focus{left:.5rem;top:.5rem}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;color:var(--groen-donker);line-height:1.25}
h1{font-size:2rem;margin:.4rem 0 1rem}
h2{font-size:1.45rem;margin:2.2rem 0 .6rem}
h3{font-size:1.2rem;margin:1.6rem 0 .4rem}
p{margin:0 0 1rem}
.kop{background:var(--vlak);border-bottom:1px solid var(--rand)}
.kop-binnen{max-width:62rem;margin:0 auto;padding:.7rem 1rem}
.logo{font-weight:700;text-decoration:none;color:var(--groen-donker);font-size:1.1rem;display:inline-flex;gap:.4rem;align-items:center}
.logo-teken{color:var(--groen)}
.kop nav ul{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .4rem}
.kop nav a{display:inline-block;padding:.45rem .7rem;border-radius:999px;text-decoration:none;font-size:1rem;color:var(--tekst);background:var(--zand);min-height:44px;line-height:1.8}
.kop nav a[aria-current="page"]{background:var(--groen);color:#fff}
main{display:block;max-width:62rem;margin:0 auto;padding:1rem 1rem 3rem}
main:focus{outline:none}
.artikel{max-width:var(--breed);margin:0 auto}
.intro{font-size:1.2rem;color:var(--zacht)}
.held{max-width:var(--breed);margin:1rem auto 1.5rem}
.held h1{font-size:2.2rem}
.held-tekst{font-size:1.2rem}
.knoppen{display:flex;flex-direction:column;gap:.75rem;margin-top:1.4rem}
.knop{display:inline-block;text-align:center;background:var(--groen);color:#fff;text-decoration:none;font-weight:700;padding:.9rem 1.2rem;border-radius:12px;border:2px solid var(--groen);font-size:1.1rem;min-height:48px;cursor:pointer;font-family:inherit}
.knop:hover{background:var(--groen-donker);color:#fff}
.knop-licht{background:var(--vlak);color:var(--groen)}
.knop-licht:hover{background:var(--groen-licht);color:var(--groen-donker)}
.snelle-vragen{max-width:var(--breed);margin:0 auto}
.snelle-vragen h2{margin-top:1rem}
.kaartlijst,.vragenlijst{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.vraagkaart{display:block;background:var(--vlak);border:1px solid var(--rand);border-left:5px solid var(--groen);border-radius:12px;padding:.9rem 2.4rem .9rem 1rem;text-decoration:none;color:var(--tekst);font-weight:700;position:relative;min-height:48px}
.vraagkaart::after{content:"→";content:"→" / "";position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--groen)}
.vraagkaart:hover{background:var(--groen-licht)}
.vraagkaart-groot{font-size:1.15rem;padding:1.1rem 2.4rem 1.1rem 1rem}
.vraagkaart small{display:block;font-weight:400;color:var(--zacht);margin-top:.25rem;font-size:.95rem}
.start-meer{margin-top:2rem}
.kruimel{font-size:1rem;margin:.3rem 0 0}
.kort-antwoord{background:var(--groen-licht);border-radius:12px;padding:1rem 1.1rem;margin:0 0 1.5rem;font-size:1.15rem}
.kort-antwoord p:last-child{margin:0}
.kort-kop,.zin-kop{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--groen-donker);margin:0 0 .3rem}
.label{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.03em;padding:.12rem .55rem;border-radius:999px;border:1.5px solid;vertical-align:.12em;margin-right:.25rem;line-height:1.4;background:#fff}
.label-koran{color:var(--koran)}
.label-uitleg{color:var(--uitleg)}
.label-verschilt{color:var(--verschilt)}
.citaat{margin:1.2rem 0 1.4rem;padding:1rem 1.1rem;background:var(--vlak);border-left:5px solid var(--groen);border-radius:0 12px 12px 0}
.citaat blockquote{margin:0;font-family:Georgia,serif;font-size:1.15rem}
.citaat blockquote p{margin:0}
.citaat figcaption{margin-top:.6rem;font-size:.95rem;color:var(--zacht)}
.zin{background:var(--zand);border:1px dashed var(--groen);border-radius:12px;padding:1rem 1.1rem;margin:1rem 0 1.4rem}
.zin-tekst{font-size:1.15rem;font-style:italic;margin:0}
.let-op{background:#fff8e6;border:1px solid #e9cf8f;border-radius:12px;padding:.9rem 1.1rem;margin:1rem 0}
.let-op p{margin:0}
.bronnen,.vervolg{border-top:1px solid var(--rand);margin-top:2rem}
.bronnen ul{padding-left:1.2rem}
.bronnen li{margin-bottom:.4rem}
.deel{margin-top:2rem}
.deel-melding{display:inline-block;margin-left:.5rem;color:var(--groen-donker);font-weight:700}
.klein{font-size:.95rem;color:var(--zacht)}
ul,ol{padding-left:1.3rem}
li{margin-bottom:.35rem}
.zoek label{display:block;font-weight:700;margin-bottom:.35rem}
.zoek input{width:100%;font-size:1.15rem;padding:.8rem .9rem;border:2px solid var(--groen);border-radius:12px;background:#fff;color:var(--tekst);font-family:inherit}
.zoek-status{min-height:1.5rem;margin:.5rem 0 .8rem;color:var(--zacht);font-size:1rem}
#zoekresultaten .vraagkaart{margin-bottom:.7rem}
.legenda{list-style:none;padding:0}
.legenda li{margin-bottom:.7rem}
.contactblok{background:var(--vlak);border:1px solid var(--rand);border-radius:12px;padding:1rem 1.1rem;margin-top:1.5rem}
.rustig h2{font-size:1.3rem}
.redactielijst li{background:var(--vlak);border:1px solid var(--rand);border-radius:10px;padding:.8rem 1rem;margin-bottom:.8rem}
.redactielijst p{margin:0 0 .3rem}
code{background:var(--zand);padding:.05rem .3rem;border-radius:4px;font-size:.95em}
.voet{background:var(--groen-donker);color:#f3efe6;margin-top:2rem}
.voet-binnen{max-width:62rem;margin:0 auto;padding:1.5rem 1rem 2rem;font-size:1rem}
.voet a{color:#fff}
.voet ul{list-style:none;padding:0;margin:0}
.voet li{margin:.5rem 0}
@media (min-width:44rem){
  :root{--maat:1.15rem}
  .kop-binnen{display:flex;justify-content:space-between;align-items:center}
  .kop nav ul{margin:0}
  .knoppen{flex-direction:row}
  h1{font-size:2.4rem}
  .held h1{font-size:2.8rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}