/* ===========================================================
   Tekstsoorten.nl — stijl
   Warm "papier & inkt" palet, met een kleurcode per tekstsoort
   als doorlopend signatuur-element.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --papier:        #f6f1e7;
  --papier-diep:   #efe7d6;
  --inkt:          #2a2722;
  --inkt-zacht:    #5c554a;
  --lijn:          #ddd2bd;
  --accent:        #c2541f;
  --accent-diep:   #a34315;
  --accent-warm:   #e0a92e;
  --diep-groen:    #1f4a3f;

  --c-info:    #2f6f8f;
  --c-act:     #c2541f;
  --c-over:    #7a4ba3;
  --c-instr:   #2f7d52;
  --c-amus:    #c9472f;

  --radius:    14px;
  --radius-l:  22px;
  --schaduw:   0 1px 2px rgba(42,39,34,.06), 0 8px 24px -12px rgba(42,39,34,.18);
  --schaduw-l: 0 2px 4px rgba(42,39,34,.07), 0 22px 48px -20px rgba(42,39,34,.30);
  --maxw:      1080px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}

body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--inkt);
  background:var(--papier);
  background-image:
    radial-gradient(circle at 12% -5%, rgba(224,169,46,.10), transparent 38%),
    radial-gradient(circle at 92% 8%, rgba(47,111,143,.08), transparent 42%);
  background-attachment:fixed;
  line-height:1.65;
  font-size:1.02rem;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;
  line-height:1.12;
  color:var(--inkt);
  font-weight:600;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,5vw,3.1rem);margin:.2em 0 .5em;}
h2{font-size:clamp(1.5rem,3.2vw,2.05rem);margin:1.6em 0 .5em;}
h3{font-size:1.22rem;margin:0 0 .4em;}
p{margin:0 0 1em;}
a{color:var(--accent);text-underline-offset:2px;}
a:hover{color:var(--accent-diep);}
strong{font-weight:600;}

.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--inkt);color:var(--papier);
  padding:10px 16px;border-radius:0 0 10px 0;z-index:200;
}
.skip-link:focus{left:0;}
:focus-visible{outline:3px solid var(--accent-warm);outline-offset:2px;border-radius:4px;}

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(246,241,231,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lijn);
}
.header-binnen{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:12px 22px;flex-wrap:wrap;
}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--inkt);}
.logo img{display:block;}
.logo span{display:flex;flex-direction:column;font-family:'Fraunces',serif;font-weight:600;font-size:1.18rem;line-height:1.05;}
.logo small{font-family:'Inter',sans-serif;font-weight:400;font-size:.72rem;color:var(--inkt-zacht);letter-spacing:.01em;margin-top:2px;}

.hoofdmenu ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.hoofdmenu a{
  display:block;text-decoration:none;color:var(--inkt-zacht);
  font-weight:500;font-size:.95rem;padding:7px 13px;border-radius:9px;
  transition:background .15s,color .15s;
}
.hoofdmenu a:hover{background:var(--papier-diep);color:var(--inkt);}
.hoofdmenu a[aria-current="page"]{background:var(--inkt);color:var(--papier);}

main{max-width:var(--maxw);margin:0 auto;padding:34px 22px 70px;}
section{margin-bottom:18px;}
.smal{max-width:62ch;color:var(--inkt-zacht);}

.kruimels{
  font-size:.85rem;color:var(--inkt-zacht);
  display:flex;gap:8px;align-items:center;margin-bottom:6px;
}
.kruimels a{color:var(--inkt-zacht);text-decoration:none;}
.kruimels a:hover{color:var(--accent);text-decoration:underline;}
.kruimels span[aria-current]{color:var(--inkt);font-weight:500;}

.hero{
  background:linear-gradient(135deg,#fbf8f1,#f1e9d8);
  border:1px solid var(--lijn);
  border-radius:var(--radius-l);
  padding:clamp(28px,5vw,52px);
  box-shadow:var(--schaduw);
  position:relative;overflow:hidden;
  margin-bottom:30px;
}
.hero::after{
  content:"";position:absolute;right:-60px;top:-60px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,169,46,.22),transparent 70%);
  pointer-events:none;
}
.hero h1{max-width:18ch;}
.hero p{max-width:60ch;color:var(--inkt-zacht);font-size:1.08rem;}

.knop{
  display:inline-block;text-decoration:none;
  background:var(--accent);color:#fff;
  font-weight:600;font-size:.98rem;
  padding:12px 22px;border-radius:11px;
  margin:8px 8px 0 0;
  box-shadow:0 8px 18px -10px rgba(194,84,31,.8);
  transition:transform .12s,box-shadow .12s,background .15s;
}
.knop:hover{background:var(--accent-diep);color:#fff;transform:translateY(-2px);box-shadow:0 12px 22px -10px rgba(194,84,31,.85);}
.knop.secundair{
  background:transparent;color:var(--inkt);
  border:1.5px solid var(--lijn);box-shadow:none;
}
.knop.secundair:hover{background:var(--papier-diep);border-color:var(--inkt-zacht);}

.kaart-rij{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:18px;margin-top:18px;
}
.kaart{
  background:#fff;
  border:1px solid var(--lijn);
  border-radius:var(--radius);
  padding:22px 22px 20px;
  box-shadow:var(--schaduw);
  display:flex;flex-direction:column;
  transition:transform .14s,box-shadow .14s,border-color .14s;
  position:relative;
}
.kaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw-l);border-color:#cdbfa3;}
.kaart h3{display:flex;align-items:flex-start;gap:10px;}
.kaart p{color:var(--inkt-zacht);font-size:.96rem;flex:1;}
.icoon{font-size:1.4rem;line-height:1;flex-shrink:0;}
.lees-meer{
  align-self:flex-start;margin-top:6px;
  font-weight:600;font-size:.92rem;text-decoration:none;
}
.lees-meer::after{content:" \2192";transition:margin .12s;}
.lees-meer:hover::after{margin-left:3px;}

.kaart .nr{
  font-family:'Fraunces',serif;font-size:.8rem;font-weight:600;
  color:var(--accent-warm);letter-spacing:.06em;
  display:block;margin-bottom:4px;
}

.info-box{
  background:var(--papier-diep);
  border:1px solid var(--lijn);
  border-left:4px solid var(--accent-warm);
  border-radius:var(--radius);
  padding:20px 24px;margin:24px 0;
}
.info-box h3{margin-top:0;}
.info-box p{color:var(--inkt-zacht);margin-bottom:0;}

.overzicht{
  width:100%;border-collapse:collapse;
  background:#fff;border:1px solid var(--lijn);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--schaduw);margin:18px 0;
  font-size:.97rem;
}
.overzicht th,.overzicht td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--lijn);}
.overzicht thead th{background:var(--diep-groen);color:var(--papier);font-family:'Inter';font-weight:600;font-size:.9rem;}
.overzicht tbody tr:last-child td{border-bottom:none;}
.overzicht tbody tr:hover{background:var(--papier);}
.overzicht td a{font-weight:600;text-decoration:none;}
.overzicht td a:hover{text-decoration:underline;}
.stip{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle;}

.soort-kop{
  border-radius:var(--radius-l);
  padding:clamp(26px,4vw,42px);
  color:#fff;margin-bottom:26px;
  box-shadow:var(--schaduw);
  position:relative;overflow:hidden;
}
.soort-kop h1{color:#fff;margin-top:0;}
.soort-kop p{color:rgba(255,255,255,.92);max-width:58ch;margin-bottom:0;font-size:1.06rem;}
.soort-kop .badge{
  display:inline-block;background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.35);
  padding:5px 13px;border-radius:999px;
  font-size:.82rem;font-weight:600;letter-spacing:.04em;
  margin-bottom:14px;text-transform:uppercase;
}
.kop-emoji{position:absolute;right:24px;bottom:-14px;font-size:7rem;opacity:.18;line-height:1;}

.kenmerken{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.kenmerken li{
  background:#fff;border:1px solid var(--lijn);border-radius:11px;
  padding:13px 16px 13px 44px;position:relative;color:var(--inkt-zacht);
}
.kenmerken li::before{
  content:"\2713";position:absolute;left:15px;top:12px;
  color:var(--accent);font-weight:700;
}
.voorbeeld-blok{
  background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);
  padding:22px 24px;margin:16px 0;box-shadow:var(--schaduw);
}
.voorbeeld-blok .label{
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--inkt-zacht);margin-bottom:8px;
}
.voorbeeld-blok .citaat{
  font-family:'Fraunces',serif;font-size:1.12rem;font-style:italic;
  color:var(--inkt);border-left:3px solid var(--accent-warm);
  padding-left:16px;margin:0;
}
.soort-nav{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:36px;padding-top:22px;border-top:1px solid var(--lijn);
  flex-wrap:wrap;
}
.soort-nav a{text-decoration:none;font-weight:600;font-size:.92rem;padding:8px 0;}

.oef-tekst{
  background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);
  padding:clamp(24px,4vw,38px);box-shadow:var(--schaduw);
  margin:18px 0 26px;
}
.oef-tekst h2{margin-top:0;}
.oef-tekst p{color:var(--inkt);}
.oef-tekst .bron{font-size:.84rem;color:var(--inkt-zacht);font-style:italic;margin-top:14px;}

.vraag-blok h3{margin-bottom:14px;}
.opties{display:grid;gap:10px;list-style:none;padding:0;margin:0;}
.optie{
  width:100%;text-align:left;cursor:pointer;
  background:#fff;border:1.5px solid var(--lijn);border-radius:11px;
  padding:14px 18px;font-size:1rem;font-family:inherit;color:var(--inkt);
  display:flex;align-items:center;gap:12px;
  transition:border-color .14s,background .14s,transform .1s;
}
.optie:hover:not(:disabled){border-color:var(--accent);background:var(--papier);}
.optie:active:not(:disabled){transform:scale(.99);}
.optie .letter{
  width:26px;height:26px;flex-shrink:0;border-radius:7px;
  background:var(--papier-diep);color:var(--inkt-zacht);
  display:grid;place-items:center;font-weight:700;font-size:.85rem;
}
.optie.goed{border-color:var(--c-instr);background:#eef7f0;}
.optie.goed .letter{background:var(--c-instr);color:#fff;}
.optie.fout{border-color:var(--c-amus);background:#fcefec;}
.optie.fout .letter{background:var(--c-amus);color:#fff;}
.optie:disabled{cursor:default;}

.feedback{
  margin-top:18px;border-radius:var(--radius);padding:18px 22px;
  border:1px solid var(--lijn);display:none;
}
.feedback.zicht{display:block;animation:opkomst .25s ease;}
.feedback.juist{background:#eef7f0;border-left:4px solid var(--c-instr);}
.feedback.onjuist{background:#fcefec;border-left:4px solid var(--c-amus);}
.feedback h4{margin:0 0 6px;font-family:'Inter';font-size:1rem;}
.feedback p{margin:0;color:var(--inkt-zacht);font-size:.96rem;}
@keyframes opkomst{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.oef-onder{display:flex;justify-content:space-between;gap:12px;margin-top:30px;flex-wrap:wrap;}

.link-lijst{list-style:none;padding:0;margin:16px 0;display:grid;gap:14px;}
.link-lijst li{
  background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);
  padding:18px 22px;box-shadow:var(--schaduw);
}
.link-lijst li > a{font-family:'Fraunces',serif;font-weight:600;font-size:1.08rem;text-decoration:none;}
.link-lijst li > a:hover{text-decoration:underline;}
.link-lijst p{margin:6px 0 0;color:var(--inkt-zacht);font-size:.92rem;}
.link-lijst .niveau{display:inline-block;margin-top:8px;font-size:.78rem;background:var(--papier-diep);color:var(--inkt-zacht);padding:3px 10px;border-radius:999px;}

.faq{
  background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);
  margin:12px 0;overflow:hidden;box-shadow:var(--schaduw);
}
.faq summary{
  cursor:pointer;padding:16px 20px;font-weight:600;
  font-family:'Fraunces',serif;font-size:1.05rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--accent);transition:transform .2s;}
.faq[open] summary::after{transform:rotate(45deg);}
.faq p{padding:0 20px 18px;margin:0;color:var(--inkt-zacht);}

.site-footer{background:var(--diep-groen);color:#cfe3d9;margin-top:40px;}
.footer-binnen{
  max-width:var(--maxw);margin:0 auto;padding:44px 22px 26px;
  display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.footer-binnen h4{color:#fff;margin:0 0 12px;font-size:1rem;}
.footer-binnen ul{list-style:none;padding:0;margin:0;display:grid;gap:7px;}
.footer-binnen a{color:#9fd3bf;text-decoration:none;font-size:.93rem;}
.footer-binnen a:hover{color:#fff;text-decoration:underline;}
.footer-onder{
  border-top:1px solid rgba(255,255,255,.12);
  max-width:var(--maxw);margin:0 auto;padding:18px 22px;
  font-size:.85rem;color:#9fd3bf;
}
.footer-onder a{color:#cfe3d9;}

@media (max-width:640px){
  .header-binnen{padding:10px 16px;}
  .hoofdmenu a{padding:6px 10px;font-size:.9rem;}
  main{padding:24px 16px 50px;}
  .soort-nav,.oef-onder{flex-direction:column;}
}