@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(../assets/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(../assets/fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600 700;font-display:swap;src:url(../assets/fonts/montserrat-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600 700;font-display:swap;src:url(../assets/fonts/montserrat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500 600;font-display:swap;src:url(../assets/fonts/playfairdisplay-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500 600;font-display:swap;src:url(../assets/fonts/playfairdisplay-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--bg:#2F3A44;--panel:#3A4652;--card:#46535F;--accent-surface:#55636F;--text:#EDE8E1;--muted:#A7A08F;--gold:#C79B63;--goud-verloop:linear-gradient(135deg,color-mix(in srgb,var(--gold),white 38%),var(--gold) 45%,color-mix(in srgb,var(--gold),black 30%));--line:rgba(237,232,225,.14);--max:1180px;--serif:"Playfair Display",Georgia,serif;--sans:"Inter",Arial,sans-serif;--ui:"Montserrat",Arial,sans-serif}
html[data-theme=light]{--bg:#EDE8E1;--panel:#FFF;--card:#E3DDD2;--accent-surface:#D6CFC0;--text:#2F3A44;--muted:#6E6656;--gold:#7D5F37;--goud-verloop:linear-gradient(135deg,color-mix(in srgb,var(--gold),white 28%),var(--gold) 45%,color-mix(in srgb,var(--gold),black 28%));--line:rgba(47,58,68,.15)}
*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--bg);overflow-x:clip}body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.65 var(--sans);min-width:320px;overflow-x:clip}a{color:inherit}.container{width:min(calc(100% - 48px),var(--max));margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}.nav-wrap{min-height:82px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;flex:none;margin-right:auto;color:var(--gold);text-decoration:none}.brand-logo,.hero-mark,.status-mark{color:var(--gold)}.brand-wordmark{display:block;height:50px;aspect-ratio:1400/372;flex:none;background:var(--goud-verloop);-webkit-mask:url("/assets/koon-woordmerk.png") center/contain no-repeat;mask:url("/assets/koon-woordmerk.png") center/contain no-repeat}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.main-nav{display:none;position:absolute;right:max(24px,calc((100vw - var(--max))/2));top:78px;width:240px;padding:16px;flex-direction:column;align-items:stretch;gap:0;background:var(--panel);border:1px solid var(--line);z-index:30}.main-nav.open{display:flex}.main-nav a,.theme-toggle,.menu-toggle{font:600 11px/1 var(--ui);text-transform:uppercase;letter-spacing:.14em;text-decoration:none}.main-nav a{opacity:.82;padding:14px 6px;border-bottom:1px solid var(--line)}.main-nav a:first-child{padding-top:0}.main-nav a:last-child{padding-bottom:0;border-bottom:0}.main-nav a:hover{color:var(--gold);opacity:1}.theme-toggle,.menu-toggle{appearance:none;border:0;background:transparent;color:var(--text);cursor:pointer}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;padding:7px}.theme-icon{color:var(--gold);font-size:20px;line-height:1}.lang-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:30px;padding:0 9px;border:1px solid var(--line);border-radius:16px;background:transparent;color:var(--text);font:700 11px/1 var(--ui);letter-spacing:.04em;cursor:pointer}.lang-toggle:hover{border-color:var(--gold);color:var(--gold)}.header-actions{display:flex;align-items:center;flex-direction:row;gap:12px;white-space:nowrap}.menu-toggle{display:block;padding:10px 0}
.hero{min-height:690px;display:grid;align-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 82% 40%,rgba(216,168,59,.08),transparent 28%)}.hero-inner{position:relative;padding:100px 0;max-width:1040px}.hero-mark{position:absolute;right:max(4vw,calc((100vw - var(--max))/2));top:50%;width:300px;aspect-ratio:500/489;opacity:.1;transform:translateY(-46%);pointer-events:none;background:var(--goud-verloop);-webkit-mask:url("/assets/koon-icoon.png") center/contain no-repeat;mask:url("/assets/koon-icoon.png") center/contain no-repeat}.hero-mark svg{width:100%;height:auto}
.eyebrow{margin:0 0 22px;color:var(--gold);font:600 11px/1.2 var(--ui);letter-spacing:.22em;text-transform:uppercase}h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.025em}h1{max-width:920px;font-size:clamp(48px,6vw,82px);line-height:1.02}h1 em{color:var(--gold);font-style:normal}.hero-copy{max-width:640px;margin:34px 0 30px;font-size:17px;color:var(--muted)}
.text-link{display:inline-flex;gap:12px;align-items:center;color:var(--text);font:600 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;appearance:none;border:0;background:none;padding:0;cursor:pointer;border-bottom:1px solid var(--gold);padding-bottom:10px}.text-link span{color:var(--gold);font-size:16px}
.section{padding:110px 0;border-bottom:1px solid var(--line)}.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:90px}.prose{max-width:620px;color:var(--muted)}.prose p{margin:0 0 22px}h2{font-size:clamp(34px,4vw,56px);line-height:1.08}.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:52px}.section-note{margin:0;color:var(--muted);font-size:14px;font-style:italic}
.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.principle{padding:30px 34px 8px 0;border-right:1px solid var(--line);margin-right:34px}.principle:last-child{border-right:0;margin-right:0}.principle-no,.future-card>span{display:block;margin-bottom:35px;color:var(--gold);font:600 10px/1 var(--ui);letter-spacing:.18em}.principle h3{font-size:30px;margin-bottom:12px}.principle p{margin:0;color:var(--muted);font-size:14px;max-width:310px}
.game-panel{display:grid;grid-template-columns:1.4fr .8fr;gap:70px;padding:64px;background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--gold)}.game-copy p:not(.eyebrow){color:var(--muted);max-width:560px;margin:24px 0 32px}.button{display:inline-block;padding:15px 20px;background:var(--gold);color:var(--bg);font:700 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}.button:hover{background:var(--text)}.game-meta{align-self:center;border-left:1px solid var(--line);padding-left:34px}.meta-line{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);font:600 10px/1.3 var(--ui);letter-spacing:.12em}.meta-line span{color:var(--muted)}.meta-line strong{color:var(--gold);font-weight:600}.about-teaser{background:var(--panel)}
.future-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.future-card{display:block;min-height:300px;padding:32px;background:var(--card);border:1px solid var(--line);text-decoration:none}.future-card h3{font-size:36px;margin-bottom:14px}.future-card p{max-width:440px;margin:0 0 30px;color:var(--muted);font-size:14px}.future-card strong{color:var(--gold);font:600 10px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase}

.scorebord{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.scorebord li{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}.scorebord .rang{flex:none;width:30px;color:var(--gold);font:700 13px/1 var(--ui)}.scorebord .speler{flex:1;min-width:0}.scorebord .naam{display:block;font-family:var(--serif);font-size:19px;overflow-wrap:break-word}.scorebord .detail{display:block;margin-top:6px;color:var(--muted);font:600 11px/1.45 var(--ui);letter-spacing:.04em;overflow-wrap:break-word}.scorebord .bedrag{flex:none;color:var(--gold);font:600 13px/1 var(--ui);letter-spacing:.04em}.scorebord .scorebord-status{color:var(--muted);font-size:14px}
.prikbord{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.prikbord li{padding:20px 0;border-bottom:1px solid var(--line)}.prikbord .naam{color:var(--gold);font:700 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase}.prikbord .datum{color:var(--muted);font:600 10px/1 var(--ui);letter-spacing:.06em;margin-left:10px}.prikbord .tekst{margin:10px 0 0;color:var(--text);font-size:15px;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word}.prikbord-status{color:var(--muted);font-size:14px}
.reactie-form{display:grid;gap:12px;max-width:480px;margin-top:8px}.reactie-form input[type=text],.reactie-form textarea{font-family:var(--sans);font-size:15px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);color:var(--text)}.reactie-form textarea{min-height:110px;resize:vertical}.reactie-form .button{justify-self:start;border:0;cursor:pointer}.reactie-status{margin:0;font-size:13px;color:var(--muted);min-height:1.2em}
.site-footer{padding:30px 0 45px;color:var(--muted);font:500 10px/1.3 var(--ui);letter-spacing:.12em;text-transform:uppercase}.footer-wrap{display:flex;justify-content:space-between;gap:20px}.footer-links a{color:var(--muted);text-decoration:none}.footer-links a:hover{color:var(--gold)}
@media(max-width:900px){.hero{min-height:610px}.hero-mark{right:2%;width:240px;opacity:.07}.split{gap:45px}.game-panel{gap:40px;padding:44px}}
@media(max-width:720px){.container{width:min(calc(100% - 32px),var(--max))}.nav-wrap{min-height:72px}.brand-wordmark{height:40px}.main-nav{left:16px;right:16px;width:auto}.main-nav a{padding:16px 8px}.header-actions{flex:1 1 0%;min-width:0;flex-wrap:wrap;justify-content:flex-end;row-gap:8px}.hero{min-height:650px}.hero-inner{padding:82px 0}.hero-mark{top:19%;right:-9%;width:210px;opacity:.08}h1{font-size:clamp(43px,13vw,64px)}.hero-copy{font-size:15px}.section{padding:78px 0}.split{grid-template-columns:1fr;gap:30px}.section-head{display:block;margin-bottom:34px}.section-note{margin-top:18px}.principle-grid{grid-template-columns:1fr}.principle{padding:28px 0;margin:0;border-right:0;border-bottom:1px solid var(--line)}.principle:last-child{border-bottom:0}.principle-no{margin-bottom:24px}.game-panel{grid-template-columns:1fr;padding:32px 24px}.game-meta{border-left:0;border-top:1px solid var(--line);padding:10px 0 0}.forum-cta .game-panel{display:block}.forum-cta .game-meta{margin-top:24px}.forum-cta .reactie-form textarea{min-height:260px}.huisregels-toggle summary{padding:24px 0}.future-grid{grid-template-columns:1fr}.future-card{min-height:260px}.footer-wrap{flex-direction:column}}

.hero-mark img,.status-mark img{display:block;width:100%;height:auto}

.page-hero{padding:84px 0 70px;text-align:center;border-bottom:1px solid var(--line)}
.page-hero .mark{width:150px;aspect-ratio:500/489;margin:0 auto 28px;background:var(--goud-verloop);-webkit-mask:url("/assets/koon-icoon.png") center/contain no-repeat;mask:url("/assets/koon-icoon.png") center/contain no-repeat}
.page-hero h1{max-width:820px;margin:0 auto;font-size:clamp(34px,4.6vw,58px);line-height:1.12}
.page-hero h1 em{color:var(--gold);font-style:normal}
.page-hero .lead{max-width:600px;margin:26px auto 0;color:var(--muted);font-size:17px}
.closing-panel{margin-top:12px}
.forum-cta .game-panel{transform:translateZ(0)}
.forum-cta .reactie-form{max-width:none}
.forum-cta .meta-line{display:grid;grid-template-columns:auto 1fr;align-items:center;min-height:50px}
.forum-cta .meta-line strong{text-align:right}

.blog-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.blog-list li{border-bottom:1px solid var(--line)}
.blog-item{display:block;padding:32px 0;text-decoration:none;color:inherit}
.blog-item:hover h3{color:var(--gold)}
.blog-item .blog-date{display:block;margin-bottom:10px;color:var(--gold);font:600 10px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.blog-item h3{font-size:26px;margin-bottom:10px;transition:color .15s}
.blog-item p{margin:0;color:var(--muted);font-size:15px;max-width:640px}
/* devlog: de oudere afleveringen compact, per maand in- en uitklapbaar */
.blog-archief{margin-top:56px}
.blog-archief>.eyebrow{margin-bottom:14px}
.blog-maand{border-top:1px solid var(--line)}
.blog-maand:last-child{border-bottom:1px solid var(--line)}
.blog-maand>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 0;font:600 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.blog-maand>summary::-webkit-details-marker{display:none}
.blog-maand>summary::after{content:"+";margin-left:auto;font-size:18px;line-height:1;color:var(--muted)}
.blog-maand[open]>summary::after{content:"\2212"}
.blog-maand>summary:hover::after{color:var(--gold)}
.blog-aantal{color:var(--muted);letter-spacing:.06em}
.blog-list.kort{border-top:1px solid var(--line);margin-bottom:12px}
.blog-item.kort{display:flex;gap:20px;align-items:baseline;padding:13px 0}
.blog-item.kort .blog-date{margin:0;flex:0 0 96px}
.blog-item.kort h3{font-size:17px;margin:0;line-height:1.35}
/* terug naar het menu bovenaan, op lange pagina's (devlog) */
.naar-boven{position:fixed;right:20px;bottom:20px;z-index:50;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--gold);font:600 18px/1 var(--ui);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s}
.naar-boven.zichtbaar{opacity:1;transform:none;pointer-events:auto}
.naar-boven:hover,.naar-boven:focus-visible{border-color:var(--gold)}
@media(max-width:720px){.blog-item.kort{flex-direction:column;gap:6px;padding:12px 0}.blog-item.kort .blog-date{flex:none}.naar-boven{right:14px;bottom:14px}}

.forum-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.forum-tab{appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);padding:9px 16px;font:600 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-radius:20px}
.forum-tab:hover{border-color:var(--gold);color:var(--gold)}
.forum-tab.active{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.forum-item{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.forum-item .forum-titel{flex:1;min-width:0}
.forum-item .forum-titel h3{font-size:22px;margin-bottom:6px;transition:color .15s}
.forum-item:hover h3{color:var(--gold)}
.forum-item .forum-meta{display:block;color:var(--muted);font:600 10px/1.5 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.forum-item .forum-meta .forum-categorie{color:var(--gold)}
.forum-item .forum-aantal{flex:none;text-align:right;color:var(--muted);font:600 11px/1 var(--ui)}
.forum-item .forum-aantal strong{display:block;color:var(--gold);font-size:22px;font-family:var(--serif);font-weight:500}
.auth-widget{max-width:560px;padding:26px 30px;background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--gold)}
.auth-form{display:grid;gap:12px}
.auth-form label{font:600 11px/1.4 var(--ui);letter-spacing:.04em;color:var(--text)}
.auth-form-row{display:flex;gap:10px;flex-wrap:wrap}
.auth-form-row input{flex:1;min-width:180px;font-family:var(--sans);font-size:15px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);color:var(--text)}
.auth-form-row .button{border:0;cursor:pointer;flex:none}
.auth-note{margin:0;font-size:13px;color:var(--muted);min-height:1.2em}
.auth-ingelogd{position:relative;font-size:13px}
.auth-ingelogd summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;color:var(--text);font:600 11px/1 var(--ui);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.auth-ingelogd summary::-webkit-details-marker{display:none}
.auth-ingelogd strong{color:var(--gold)}
.auth-ingelogd-dropdown{position:absolute;right:0;top:calc(100% + 14px);width:260px;padding:16px;display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--line);z-index:30}
.auth-ingelogd-acties{display:flex;flex-direction:column;gap:0}
.auth-ingelogd-acties .text-link{padding:10px 0;border-bottom:1px solid var(--line)}
.auth-ingelogd-acties .text-link:last-child{border-bottom:0}
.auth-beheer{border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:4px}
.auth-beheer-kop{margin:4px 0 2px;color:var(--gold);font:600 10px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.thread-back{display:inline-block;margin-bottom:26px;color:var(--muted);text-decoration:none;font:600 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase}
.thread-back:hover{color:var(--gold)}
.thread-meta{color:var(--muted);font:600 11px/1.6 var(--ui);letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.thread-titel{font-family:var(--serif);font-weight:500;letter-spacing:-.025em;font-size:clamp(28px,4vw,44px);line-height:1.15;margin:0 0 28px}
.thread-meta .forum-categorie{color:var(--gold)}
.thread-body{white-space:pre-wrap;overflow-wrap:break-word;font-size:17px;line-height:1.7;max-width:720px;margin-bottom:50px}
.reply-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.reply-list li{padding:22px 0;border-bottom:1px solid var(--line)}
.reply-list .naam{color:var(--gold);font:700 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase}
.reply-list .datum{color:var(--muted);font:600 10px/1 var(--ui);letter-spacing:.06em;margin-left:10px}
.reply-list .tekst{margin:10px 0 0;color:var(--text);font-size:15px;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word}
.reply-list .verwijderen,.scorebord .verwijderen{appearance:none;border:0;background:none;padding:0;margin-left:12px;color:var(--muted);font:600 10px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;cursor:pointer}
.reply-list .verwijderen:hover,.scorebord .verwijderen:hover{color:var(--gold)}
.scorebord .detail .seed,#dagNoot .seed{display:inline;font:inherit;letter-spacing:inherit;text-transform:none;color:inherit;padding:0;border-bottom:1px dotted var(--gold)}
.scorebord .detail .seed:hover,#dagNoot .seed:hover{color:var(--gold)}
.thread-admin{display:flex;flex-wrap:wrap;gap:22px;margin:-6px 0 28px}
.thread-admin .text-link{padding-bottom:3px}
.huisregels{margin:0;padding:0;list-style:none;counter-reset:regel;border-top:1px solid var(--line)}
.huisregels li{counter-increment:regel;padding:18px 0 18px 40px;position:relative;border-bottom:1px solid var(--line);color:var(--muted);font-size:15px;line-height:1.6}
.huisregels li::before{content:counter(regel);position:absolute;left:0;top:18px;color:var(--gold);font:700 13px/1 var(--ui)}
.huisregels strong{color:var(--text);font-weight:600}
.huisregels-toggle summary{display:flex;justify-content:space-between;align-items:center;gap:24px;cursor:pointer;list-style:none;padding:30px 0}
.huisregels-toggle summary::-webkit-details-marker{display:none}
.huisregels-toggle summary h2{margin:0}
.huisregels-toggle summary::after{content:'▾';flex:none;color:var(--gold);font-size:22px}
.huisregels-toggle[open] summary::after{content:'▴'}
.huisregels-toggle .huisregels{margin-top:4px}

@media(max-width:720px){.page-hero{padding:54px 0 44px}.page-hero .mark{width:110px}.page-hero .lead{font-size:15px}.blog-item{padding:24px 0}.blog-item h3{font-size:22px}.forum-item{flex-direction:column;gap:6px}.forum-item .forum-aantal{text-align:left}.auth-widget{padding:22px 20px}.thread-body{font-size:16px}}

/* Homepage-hero met het spel in de hoofdrol (23-09-2026): tekst links,
   een echte sprint uit het spel rechts. De watermerk-penning (.hero-mark)
   blijft, maar schuift groter en zachter áchter het schermpje. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:center;max-width:none}
.hero-spel h1{font-size:clamp(44px,5vw,72px)}
.hero-spel .hero-copy{margin:28px 0 30px}
.hero-acties{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.hero-klein{margin:18px 0 0;color:var(--muted);font:600 10px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase}
main.met-merk{position:relative;z-index:0}.hero-spel .hero-mark{position:fixed;z-index:-1;width:460px;right:calc(max(4vw,calc((100vw - var(--max))/2)) - 80px);opacity:.07}
.hero-scherm{margin:0;position:relative}
.hero-scherm img{display:block;width:100%;height:auto;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.hero-scherm figcaption{margin-top:14px;color:var(--muted);font:600 10px/1.4 var(--ui);letter-spacing:.1em;text-transform:uppercase}

/* Nieuwsbriefformulier — hergebruikt .auth-form/.auth-form-row/.auth-note
   van het inlogformulier, alleen de kleine lettertjes eronder zijn eigen. */
.nieuwsbrief-form{margin-top:26px}
.nieuwsbrief-klein{margin:0;font-size:12px;color:var(--muted)}

@media(max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr) 240px;gap:40px}.hero-spel .hero-mark{width:360px;right:-60px;opacity:.06}}
@media(max-width:720px){.hero-grid{grid-template-columns:1fr;gap:44px}.hero-scherm{width:min(300px,100%);justify-self:center}.hero-spel .hero-mark{top:19%;right:-9%;width:210px;opacity:.08}}

/* Spelpagina: de promobeelden (dezelfde als op itch.io), eerste groot en
   geanimeerd, de rest in een raster. */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.showcase figure{margin:0}
.showcase .groot{grid-column:1/-1}
.showcase img{display:block;width:100%;height:auto;border:1px solid var(--line)}
@media(max-width:720px){.showcase{grid-template-columns:1fr;gap:16px}}
.knoprij{display:flex;flex-wrap:wrap;gap:12px}
/* Delen vanuit het spel (leaderboard.html?deel=…): de score als rij van het bord, knop en inlogpaneel eronder */
.scorebord .naam .gast{font:600 11px/1 var(--ui);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
#deelSectie .gast-form{margin-top:22px}
.deel-acties{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}.deel-acties .button{border:0;cursor:pointer}#deelSectie .auth-widget{margin-top:22px}
.knoprij{align-items:center;gap:14px 28px}

/* Devlog (sinds 25-09-2026 eigen pagina's in plaats van forumthreads):
   een artikel met de datum en de titel bovenaan, de tekst in één
   leesbare kolom, en vorige/volgende onderaan. */
.devlog-kop .eyebrow a{text-decoration:none}.devlog-kop .eyebrow a:hover{text-decoration:underline}
.devlog-kop h1{max-width:900px}
.devlog-auteur{margin:26px 0 0;color:var(--muted);font:600 10px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.devlog-tekst,.artikel-tekst{max-width:680px;margin:0 auto;color:var(--text)}
.devlog-tekst p,.artikel-tekst p{font-size:17px;line-height:1.75}
.devlog-tekst h2,.artikel-tekst h2{font-size:clamp(26px,3vw,34px);line-height:1.15;margin:54px 0 18px}
.devlog-tekst h2:first-child,.artikel-tekst h2:first-child{margin-top:0}
.devlog-tekst code,.artikel-tekst code{font:.9em/1.4 ui-monospace,Menlo,Consolas,monospace;background:var(--card);padding:1px 5px;overflow-wrap:anywhere}
.devlog-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.devlog-nav a{display:block;padding:26px 28px;background:var(--card);border:1px solid var(--line);text-decoration:none}
.devlog-nav a span{display:block;margin-bottom:14px;color:var(--gold);font:600 10px/1 var(--ui);letter-spacing:.16em}
.devlog-nav a strong{display:block;font:500 21px/1.25 var(--serif);letter-spacing:-.02em}
.devlog-nav a:hover strong{color:var(--gold)}
.devlog-nav .volgende{grid-column:2;text-align:right}
.devlog-alles{margin:34px 0 0}
@media(max-width:720px){.devlog-tekst p,.artikel-tekst p{font-size:16px}.devlog-tekst h2,.artikel-tekst h2{margin-top:42px}.devlog-nav{grid-template-columns:1fr}.devlog-nav .volgende{grid-column:auto}}
/* drie kaarten naast elkaar, maar alleen breed: op een telefoon onder
   elkaar (anders werd de homepage 659 px breed en schoof hij opzij) */
@media(min-width:721px){.future-grid{grid-template-columns:repeat(3,1fr)}}

/* Opdracht van de dag op de homepage (js/vandaag.js): de top 3 van
   vandaag naast een korte uitleg. Blijft verborgen als de API niet
   antwoordt. */
.vandaag{background:var(--panel)}
.vandaag-tekst{margin:24px 0 0;max-width:460px;color:var(--muted)}
.vandaag-aantal{margin:0 0 18px;color:var(--muted);font-size:15px}
.vandaag-acties{margin-top:30px}

/* statistieken.html (alleen voor de beheerder) */
.stat-keuze{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:30px 0 0}
.stat-totalen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:56px}
.stat-totalen div{padding:24px 26px;background:var(--card);border:1px solid var(--line)}
.stat-totalen strong{display:block;color:var(--gold);font:500 40px/1.1 var(--serif)}
.stat-totalen span{display:block;margin-top:8px;color:var(--muted);font:600 10px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase}
.stat-raster{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.stat-kop{font-size:28px;margin:0 0 16px}.stat-tabel+.stat-kop{margin-top:44px}
.stat-tabel{width:100%;border-collapse:collapse;font-size:14px}
.stat-tabel th{padding:0 0 10px;text-align:left;color:var(--muted);font:600 10px/1.3 var(--ui);letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.stat-tabel th:not(:first-child),.stat-tabel .getal{text-align:right}
.stat-tabel td{padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.stat-tabel .getal{padding-left:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-tabel .stat-leeg{color:var(--muted)}
@media(max-width:720px){.stat-totalen{grid-template-columns:1fr}.stat-raster{grid-template-columns:1fr;gap:44px}}

/* Accountknop (25-09-2026): een rond goud knopje met een bezoekerspas,
   naast NL/thema/Menu op één regel, ook op de telefoon. Wie je bent staat
   bovenin de uitklap. Die uitklap hangt, net als het menu, aan de
   header (.site-header is sticky, dus de referentie) en niet aan het
   knopje, anders valt hij op een smal scherm links van beeld. */
.auth-ingelogd{position:static}
.auth-ingelogd summary{gap:0}
.auth-pas{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--gold);color:var(--bg);transition:background .15s}
.auth-ingelogd summary:hover .auth-pas,.auth-ingelogd[open] .auth-pas{background:var(--text)}
.auth-pas svg{display:block}
.auth-ingelogd-dropdown{right:max(24px,calc((100vw - var(--max))/2));top:78px}
.auth-wie{margin:0;padding:0 0 12px;border-bottom:1px solid var(--line);color:var(--muted);font:600 10px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase}
.auth-wie strong{display:block;margin-top:4px;color:var(--gold);font-size:13px;letter-spacing:.06em;overflow-wrap:anywhere}
@media(max-width:720px){.auth-ingelogd-dropdown{left:16px;right:16px;width:auto}}
@media(max-width:380px){.nav-wrap{gap:12px}.header-actions{gap:8px}.brand-wordmark{height:32px}.theme-toggle{padding:4px}}

/* Taalknop en thema-knop even grote rondjes als de accountknop (32 px),
   met de lijn die de taalknop al had. Staat onderaan, zodat het ook de
   kleinere padding onder 380 px overschrijft. */
.lang-toggle,.theme-toggle{box-sizing:border-box;width:32px;height:32px;min-width:0;padding:0;border:1px solid var(--line);border-radius:50%;flex:none}
.theme-toggle:hover{border-color:var(--gold)}
/* Zon en maan zijn SVG's (geen tekens uit het lettertype, die staan
   nooit precies in het midden); het thema bepaalt welke je ziet. */
.theme-icon{display:flex}
.theme-icon svg{display:block}
.theme-icon .maan,html[data-theme=light] .theme-icon .zon{display:none}
html[data-theme=light] .theme-icon .maan{display:block}
/* "MENU" is van zichzelf 41,625 px breed; dan staan de rondjes links
   ervan op een fractie van een pixel, en schuift het icoon erin (dat op
   hele pixels valt) zichtbaar uit het midden. Een hele breedte, tekst
   rechts, zodat het woord zelf op dezelfde plek blijft. */
.menu-toggle{width:44px;text-align:right;flex:none}
/* crashes.html: de crashrapporten uit het spel (alleen beheerder) */
.crash-lijst{display:grid;gap:18px}
.crash-rapport{padding:18px 20px;background:var(--card);border:1px solid var(--line)}
.crash-kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin:0 0 10px;color:var(--muted);font:600 11px/1.4 var(--ui);letter-spacing:.1em;text-transform:uppercase}
.crash-kop strong{color:var(--gold)}
.crash-tekst{margin:0;white-space:pre-wrap;word-break:break-word;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;color:var(--text);max-height:420px;overflow:auto}

/* De hero met de trailer (11-10-2026): de video in een breed kader rechts,
   op een telefoon eronder; speelt stil en herhaalt. Bij minder beweging
   staat alleen de poster. */
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(420px,46%)}
.hero-video video{display:block;width:100%;height:auto;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.35);background:#1d242b}
.hero-video figcaption a{color:var(--gold)}
@media(prefers-reduced-motion:reduce){.hero-video video{pointer-events:none}}
@media(max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:720px){.hero-grid{grid-template-columns:1fr}.hero-scherm.hero-video{width:100%}}
/* "Zo speelt het": drie screenshots met één zin eronder */
.zo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.zo-grid figure{margin:0}
.zo-grid img{display:block;width:100%;height:auto;border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.3)}
.zo-grid figcaption{margin-top:16px;font-size:14px;line-height:1.55;color:var(--muted)}
.zo-grid figcaption strong{display:block;color:var(--text);font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-.01em;margin-bottom:6px}
@media(max-width:900px){.zo-grid{grid-template-columns:1fr;gap:34px}}
/* presskit */
.pers-feiten{border-left:1px solid var(--line);padding-left:32px}
.pers-feiten .meta-line strong{text-align:right}
.pers-feiten a{color:var(--gold)}
.pers-lijst{margin:22px 0 0;padding-left:20px;color:var(--muted)}
.pers-lijst li{margin:6px 0}
.pers-video{display:block;width:100%;height:auto;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.35);background:#1d242b}
.pers-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pers-raster img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.pers-raster.pers-telefoon{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px}
.pers-raster.pers-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
.pers-logo{display:block;color:var(--muted);text-decoration:none}
.pers-logo img{background:repeating-conic-gradient(rgba(127,127,127,.12) 0 25%,transparent 0 50%) 0 0/24px 24px;padding:0}
.pers-logo span{display:block;margin-top:10px;font:600 11px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase}
@media(max-width:720px){.pers-feiten{border-left:0;padding-left:0}.pers-raster,.pers-raster.pers-telefoon,.pers-raster.pers-logos{grid-template-columns:1fr 1fr;gap:12px}}

/* Herziening 11-10-2026 (PLAN-herziening.md): de site is van het merk,
   met drie onderdelen (twee add-ons voor SAP Business One en het spel).
   Het menu heeft een groep "Producten" met twee ingesprongen regels. */
/* 12-10-2026: de groep "Producten" is weg; de producten staan bovenaan,
   met de toelichting tussen haakjes kleiner en zonder kapitalen. */
.main-nav{line-height:1.4}@media(min-width:721px){.main-nav{width:300px}}
.main-nav a small{font-size:10px;letter-spacing:.04em;text-transform:none;color:var(--muted)}
/* 13-10-2026: de toelichting op een eigen regel onder de naam (acht
   regels, "for SAP B1" op elke productregel; past zo op 300 px).
   14-10-2026 (op verzoek): elke regel even hoog en zo krap als de
   langste toelaat (KHRM: naam plus twee toelichtingsregels, 42 px, in
   52 px), inhoud verticaal in het midden; de toelichting van KHRM
   breekt met een <br>. */
.main-nav a small{display:block;margin-top:2px;line-height:1.25}
.main-nav a,.main-nav a:first-child,.main-nav a:last-child{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;height:52px;padding:0 6px}
.main-nav a:last-child{border-bottom:0}
/* Geen ruimte boven en onder in de lijst, anders ogen Home en Contact hoger dan de rest. */
.main-nav{padding:0 16px}
@media(max-width:720px){.main-nav a,.main-nav a:first-child,.main-nav a:last-child{padding:0 8px}}
.main-nav a:hover small{color:inherit}
/* Homepage: de kop zonder video, het watermerk er zacht achter. */
.hero-merk{min-height:0}
.hero-merk .hero-inner{padding:92px 0 84px}
.hero-merk h1{font-size:clamp(40px,5vw,68px)}
.hero-merk .hero-copy{max-width:600px}
/* Een statuslabel ("in ontwikkeling", "speelbaar") op een kaart of in een kop. */
.status{display:inline-block;padding:6px 10px;border:1px solid var(--gold);border-radius:14px;color:var(--gold);font:600 10px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.status.speelbaar,.status.beschikbaar{background:var(--gold);color:var(--bg)}
.page-hero .status{margin-bottom:22px}
/* De drie deuren op de homepage: .future-card met een beeld (het spel) of
   een icoon (de add-ons) bovenin, en het statuslabel naast de titel. */
.deur{display:flex;flex-direction:column;padding:0;overflow:hidden}
.deur-beeld{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}
.deur-icoon{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;color:var(--gold);background:var(--panel);border-bottom:1px solid var(--line)}
.deur-icoon svg{width:72px;height:72px}
.deur-tekst{display:flex;flex-direction:column;flex:1;padding:28px 32px 32px}
.deur-kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:14px}
.deur-kop h3{font-size:30px;margin:0}
.deur-tekst p{flex:1}
.future-grid.twee{grid-template-columns:repeat(2,1fr)}
@media(max-width:720px){.deur-tekst{padding:22px 24px 26px}.deur-kop h3{font-size:26px}.future-grid.twee{grid-template-columns:1fr}}
/* Add-onpagina's (fsm.html, scannen.html): de uitgangspunten als lijst */
.punten{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.punten li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:15px;line-height:1.6}
.punten strong{display:block;color:var(--text);font-weight:600}
/* KScan-pagina (scannen.html, 12-10-2026): kop met knoppen en telefoon, schermen in een telefoonrand, redenen, prijs, FAQ */
.hero-knoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:30px 0 0}
.button.secundair{background:transparent;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}.button.secundair:hover{background:var(--gold);color:var(--bg)}
.page-hero.kscan-hero .status,.page-hero.product-hero .status{white-space:normal;line-height:1.5}
.telefoon{margin:0}.telefoon img{display:block;width:100%;height:auto;border-radius:30px;border:6px solid var(--card);box-shadow:0 20px 50px rgba(0,0,0,.3);background:var(--card)}
.hero-telefoon{max-width:300px;margin:54px auto 0}
.schermen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:70px}
.schermen figcaption{margin-top:18px;font-size:14px;line-height:1.55;color:var(--muted)}
.schermen figcaption strong{display:block;color:var(--text);font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-.01em;margin-bottom:6px}
.redenen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:60px}
.redenen div{padding:30px 32px;background:var(--card);border:1px solid var(--line)}
.redenen h3{font-size:26px;line-height:1.15;margin-bottom:12px}.redenen p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.prijs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:26px}
.prijs-kaart{display:flex;flex-direction:column;gap:10px;padding:28px 26px;background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--gold)}
.prijs-label{color:var(--gold);font:600 10px/1.3 var(--ui);letter-spacing:.16em;text-transform:uppercase}
.prijs-bedrag{color:var(--text);font-family:var(--serif);font-size:50px;line-height:1;letter-spacing:-.02em}
.prijs-eenheid{font-size:13px;line-height:1.5}
.vergelijking{font-size:14px;font-style:italic}
.punten-kop{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}.punten+.punten-kop{margin-top:34px}
.faq{border-top:1px solid var(--line)}.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:18px 0;cursor:pointer;list-style:none;color:var(--text);font-family:var(--serif);font-size:20px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";flex:none;color:var(--gold);font-family:var(--ui);font-size:20px}.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--gold)}.faq p{margin:0 0 22px;font-size:15px;line-height:1.65}
@media(max-width:900px){.schermen,.redenen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.hero-telefoon{max-width:250px;margin-top:40px}.schermen{grid-template-columns:1fr;gap:30px;margin-top:44px}.schermen .telefoon{max-width:270px;margin:0 auto}.redenen{grid-template-columns:1fr;margin-top:40px}.redenen div{padding:24px}.prijs{grid-template-columns:1fr}.prijs-bedrag{font-size:42px}.faq summary{font-size:18px}}

/* 12-10-2026: de hele site in de lijn van de KScan-pagina. KFSM-pagina
   (fsm.html) met brede schermen van het planbord naast de telefoons, en
   de homepage met twee productkaarten (beeld links, tekst rechts). */
.scherm{margin:0}.scherm img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.3);background:var(--card)}
.scherm figcaption{margin-top:14px;color:var(--muted);font-size:14px;line-height:1.55;text-align:left}
.hero-scherm-breed{max-width:980px;margin:54px auto 0}.hero-scherm-breed figcaption{text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.schermen.breed{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 36px}
.schermen .scherm figcaption strong{display:block;color:var(--text);font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-.01em;margin-bottom:6px}
.producten{display:grid;gap:18px}
.product{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:54px;align-items:center;padding:48px 56px;background:var(--card);border:1px solid var(--line)}
.product-beeld{display:block;text-decoration:none}.product-beeld .telefoon{max-width:250px;margin:0 auto}
.product-beeld.breed img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.product-tekst{color:var(--muted);font-size:15px}.product-tekst .deur-kop{justify-content:flex-start;gap:12px 18px}.product-tekst .deur-kop h3{font-size:40px}
.product-sub{margin:0 0 16px;color:var(--gold);font:600 11px/1.4 var(--ui);letter-spacing:.16em;text-transform:uppercase}
.product-tekst>p{margin:0 0 22px}.product-tekst .punten{margin-bottom:28px}.product-tekst .punten li{padding:12px 0}
@media(max-width:900px){.product{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:36px;padding:36px}.product-tekst .deur-kop h3{font-size:32px}.schermen.breed{grid-template-columns:1fr}}
@media(max-width:720px){.product{grid-template-columns:1fr;gap:28px;padding:26px 22px}.product-beeld .telefoon{max-width:220px}.product-tekst .deur-kop h3{font-size:28px}.hero-scherm-breed{margin-top:40px}}

/* Kennisbank (13-10-2026): lijsten en de productkaart onder een artikel */
.artikel-tekst ul,.artikel-tekst ol{padding-left:22px;margin:0 0 22px}.artikel-tekst li{font-size:17px;line-height:1.7;margin:0 0 8px}.artikel-tekst h3{font-size:21px;line-height:1.3;margin:34px 0 10px}.artikel-tekst p.artikel-bron{font-size:14px;color:var(--muted)}

/* voorwaarden.html (14-10-2026): de productbijlage als tabel, op een smal scherm horizontaal te scrollen */
.tabel-scroll{overflow-x:auto;margin:0 0 22px}.voorwaarden-tabel{min-width:640px;font-size:14px}.voorwaarden-tabel th,.voorwaarden-tabel td{text-align:left;vertical-align:top;padding:10px 12px 10px 0}