/* Drie minuten stil (/stil). Gebruikt de kleurvariabelen uit site.css. */
.stil{--stil-a:var(--cream,#F4EFE4);--stil-b:var(--mist,#F1F4EF)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.stil-scherm{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100svh - 64px);padding:40px 20px;text-align:center}
.stil-scherm.aan{display:flex}
.stil-kolom{max-width:560px;width:100%}
.stil h1{font-size:clamp(30px,6vw,40px);margin-top:8px}
.stil-h2{font-size:clamp(24px,5vw,30px)}
.stil-lead{font-family:var(--serif);font-size:21px;margin:18px 0 6px}
.stil p{margin:6px 0}

.stil-keuze{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.stil-keuze button{font:inherit;font-size:16px;font-weight:600;min-height:46px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;min-width:92px}
.stil-keuze button[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.stil-keuze button:focus-visible,.stil-stop:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.stil-begin{margin-top:26px;min-width:180px}

/* stilte */
.stil-stilte{position:relative;background:linear-gradient(180deg,var(--stil-a),var(--stil-b));min-height:100svh;transition:background 8s linear}
.stil-vers{font-family:var(--serif);font-size:clamp(22px,4.6vw,28px);line-height:1.5;max-width:28ch;margin:0 auto;opacity:0;transition:opacity 4s ease;text-wrap:balance}
.stil-vers small{display:block;font-family:var(--sans);font-size:15px;color:var(--soft);margin-top:16px}
.stil-stilte.zichtbaar .stil-vers{opacity:1}
.stil-ingang{font-family:var(--serif);font-size:clamp(20px,4.4vw,26px);opacity:0;transition:opacity 2.5s ease;position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);margin:0}
.stil-ingang.aan{opacity:1}
.stil-stop{position:absolute;left:50%;transform:translateX(-50%);bottom:max(28px,env(safe-area-inset-bottom));font:inherit;font-size:14px;padding:9px 20px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--soft);cursor:pointer;opacity:.6}
.stil-stop:hover,.stil-stop:focus-visible{opacity:1}
.stil-lijn{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);opacity:.35;transition:width 1s linear}

/* in stiltemodus verdwijnt alles om de pagina heen */
body.stil-modus .site-header,body.stil-modus .site-footer,body.stil-modus .tabbar,body.stil-modus .fa-wrap,body.stil-modus .cookiebar,body.stil-modus .stil-uitleg{display:none!important}
body.stil-modus main{padding:0}

/* vraag */
.stil-veld{min-height:140px;margin-top:20px;font-family:var(--serif);font-size:19px;line-height:1.5;resize:vertical}
#stil-naarkaart{margin-top:18px;min-width:160px}

/* kaart */
.stil-kaartvlak{background:linear-gradient(170deg,#FFFFFF,#F4EFE4);color:#16211B;border-radius:18px;padding:34px 28px;box-shadow:0 10px 30px rgba(22,33,27,.12);text-align:left}
.stil-kaartvlak .kv{font-family:var(--serif);font-size:22px;line-height:1.5}
.stil-kaartvlak .kb{font-size:14px;color:#4D5D52;margin-top:10px}
.stil-kaartvlak .ka{margin-top:22px;padding-top:18px;border-top:1px solid #DCE3DA;font-family:var(--serif);font-size:18px;font-style:italic}
.stil-kaartvlak .kl{font-size:12px;color:#47663F;margin-top:22px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.stil-knoppen{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
#stil-afbeeldingvak img{width:100%;border-radius:14px;margin-top:12px}
.stil-verder{margin-top:36px;padding-top:26px;border-top:1px solid var(--line);text-align:left}
.stil-verder h3{font-size:22px;margin-bottom:10px}
.stil-verder ul{list-style:none;margin:0;padding:0}
.stil-verder li{border-bottom:1px solid var(--line)}
.stil-verder li a{display:block;padding:12px 0;color:var(--ink);text-decoration:none;font-weight:600}
.stil-verder li a span{display:block;font-weight:400;font-size:15px;color:var(--soft)}
.stil-app{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between;margin-top:22px}
.stil-steun{margin-top:22px}
#stil-opnieuw{margin-top:30px}

/* uitleg */
.stil-uitleg{max-width:640px;padding-bottom:50px}
.stil-uitleg h2{font-size:24px;margin:26px 0 8px}
.stil-uitleg p{margin:0 0 12px}

@media (prefers-reduced-motion:reduce){
  .stil-stilte{transition:none}
  .stil-vers,.stil-ingang{transition:opacity .3s}
}