/* Gedeelde vormgeving voor protocol en feedbackbeheer. */
:root {
 --canvas:#0b1110; --surface:#111c18; --card:#17251f; --subtle:#1c2e25;
 --border:#31463b; --text:#edf3ef; --muted:#afc2b6; --red:#ff969c; --green:#a7d7bb;
 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 color:var(--text); background:var(--canvas); color-scheme:dark;
 -webkit-font-smoothing:antialiased;
}
body {max-width:1280px;padding:40px 32px 24px;line-height:1.65;}
button,input,select,textarea {font:inherit;}
button {font-weight:600;letter-spacing:-.01em;min-height:46px;transition:background .18s,border-color .18s,box-shadow .18s;}
button:not(:disabled):hover {box-shadow:0 2px 8px #0002;}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible {outline:3px solid var(--red);outline-offset:3px;}
a {color:var(--red);}
h1,h2,h3 {letter-spacing:-.035em;text-wrap:balance;}
p {text-wrap:pretty;}
.site-header {border:0;position:relative;padding:0 0 24px;margin-bottom:0;}
.site-header::after {content:"";position:absolute;left:0;bottom:0;width:48px;height:3px;background:#de4d59;border-radius:3px;}
.club-label {color:var(--red);font-size:.76rem;letter-spacing:.15em;margin-bottom:14px;}
.club-label span {color:var(--muted);letter-spacing:.09em;}
h1 {font-size:clamp(2rem,4.5vw,3.5rem);font-weight:750;line-height:1.08;}
.site-intro {font-size:1rem;color:var(--muted);margin-top:14px;}
#epidemiologie.hero-statistieken {margin:24px 0 0;}
.stat-rij {gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);}
.stat-item {border:0;border-right:1px solid var(--border);border-radius:0;background:transparent;padding:20px 22px;}
.stat-item:last-child {border-right:0;}
#epidemiologie .stat-item strong {color:var(--red);font-size:1.8rem;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-bottom:8px;}
.stat-item span {color:var(--muted);font-size:.8rem;line-height:1.6;}
.stat-bronnen {font-size:.72rem;line-height:1.6;margin-top:10px;}
nav {gap:4px;padding:6px;margin:24px 0;border:1px solid var(--border);border-radius:12px;background:var(--surface);}
nav button[data-pagina] {font-size:.88rem;padding:12px 10px;color:var(--muted);border-radius:8px;}
nav button[data-pagina].actief {background:#2b4737;border-color:#577965;color:var(--text);box-shadow:inset 0 1px #ffffff0a;}
main > section {background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px;box-shadow:0 12px 36px #0002;}
main > section > h2 {font-size:1.85rem;margin-bottom:8px;line-height:1.2;}
main > section > p {color:var(--muted);font-size:.95rem;margin-bottom:28px;max-width:80ch;}
.detailkaart,.spoor {background:var(--card);border-color:var(--border);border-radius:12px;}
.detailkaart h3,.spoor > h3 {font-size:1.2rem;line-height:1.45;}
.detailkaart p,.detailkaart li {color:#c3d1c8;}
.intake-stap > button {background:var(--subtle);border-color:#3c5747;padding:16px 18px;}
#intake-start > button {background:var(--subtle);}
#intake-start > button::before {font-variant-numeric:tabular-nums;color:var(--red);}
#intake-opnieuw {color:var(--muted);font-size:.85rem;}
#intake:has(> #intake-uitkomst:not([hidden])) > #intake-uitkomst {background:var(--card)!important;border-color:#506d5a!important;}
#intake-uitkomst > h3 {border-left:3px solid var(--red);padding-left:12px;}
#intake-extra-vragen {border-color:var(--border);}
#intake-extra-vragen h4 {color:var(--green);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;}
#intake-extra-vragen select {background-color:var(--surface)!important;border-color:#4c6857!important;}
#intake-extra-vragen label::before {background:#2b4033;color:var(--green);}
.antwoord-rij {border-bottom:1px solid #31463b88;}
.antwoord-rij:last-child {border-bottom:0;}
.fasekeuze {padding:8px;background:#0d1712;border:1px solid var(--border);border-radius:12px;gap:6px;}
.fasekeuze button {background:transparent;border-color:transparent;min-height:54px;font-size:.85rem;}
.fasekeuze button.actief {background:#2b4737;border-color:#577965;}
.fase-inhoud {gap:14px;}
.fase-blok {background:var(--surface);border-color:var(--border);padding:20px;}
.fase-blok h4 {color:var(--green);font-size:.73rem;letter-spacing:.09em;line-height:1.5;}
.fase-blok p,.fase-blok ol {font-size:.92rem;color:#c5d3ca;line-height:1.75;}
.fase-blok.doorstroom {background:#29261b;border-color:#6f5b33;border-left:3px solid #e7b162;}
.fase-blok.fase-bron {padding:10px 2px 0;}
.spoor {padding:24px;}
.spoor > label {font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--green);}
.spoor > select {background:var(--surface);border-color:#4c6857;}
#anatomie .plaat,#anatomie .informatie {background:var(--card);border-color:var(--border);border-radius:12px;}
#anatomie .aanzicht,#anatomie .structuur-keuze {background:var(--surface);border-color:var(--border);font-size:.88rem;}
#anatomie .aanzicht.actief,#anatomie .structuur-keuze.actief {background:#2b4737;border-color:#719b7d;}
#anatomie .informatie h3 {color:var(--green);font-size:.73rem;letter-spacing:.09em;}
#anatomie .eigenschappen {border-color:var(--border);background:var(--surface);}
#anatomie .nummer {color:var(--red);}
details {border-radius:12px;padding:22px;margin-top:14px;}
details summary {font-size:1rem;}
.site-footer {border-color:var(--border);font-size:.78rem;line-height:1.8;margin-top:28px;}
.site-footer small {font-size:.72rem;color:#9bb1a2;}
.feedback-float {border-radius:999px;background:#953440;border-color:#cb6873;font-size:.85rem;min-height:46px;padding:11px 20px;box-shadow:0 6px 24px #0006;}
#feedback-dialog {background:var(--card);border-color:#52735e;box-shadow:0 24px 90px #0008;padding:28px;}
#feedback-dialog::backdrop {background:#030907b8;backdrop-filter:blur(3px);}
#feedback-form select,#feedback-form textarea {background:var(--surface);border-color:#4c6857;}
.feedback-context {background:var(--surface);border:1px solid var(--border);color:var(--muted);}
#feedback-send {background:#2b4737;border-color:#70977e;}
#beheer-panel > label {display:inline-block;margin:16px 8px 8px 0;color:var(--muted);font-size:.85rem;}
.beheer-item {padding:24px;}
.beheer-item > p:first-of-type {font-size:.8rem;color:var(--muted);}
@media(max-width:900px) {body {padding:28px 22px 20px;}.stat-rij {grid-template-columns:repeat(2,minmax(0,1fr));}.stat-item:nth-child(2){border-right:0;}.stat-item:nth-child(-n+2){border-bottom:1px solid var(--border);}main > section {padding:24px;}}
@media(max-width:600px) {
 body {padding:24px 14px 16px;}
 .club-label {font-size:.69rem;letter-spacing:.1em;}.club-label span {letter-spacing:.03em;}
 .site-intro {font-size:.88rem;}
 .stat-item {padding:16px 14px;}.stat-item span {font-size:.75rem;}
 nav {margin:20px 0;}nav button[data-pagina] {font-size:.82rem;flex-basis:28%;padding:10px 6px;}
 main > section {padding:20px 16px;border-radius:12px;}main > section > h2 {font-size:1.55rem;}
 .detailkaart,.spoor {padding:18px 16px;}.fase-blok {padding:16px;}
 .fasekeuze {padding:6px;}.fasekeuze button {font-size:.8rem;padding:12px 10px;}
 #feedback-dialog {padding:20px;} .feedback-float {right:14px;bottom:14px;}
}
@media(prefers-reduced-motion:reduce){* {scroll-behavior:auto!important;}button {transition:none;}}


/* Samenhangende werkinterface: tabbladen en inhoud zonder geneste kaders. */
:root {--canvas:#0b1110;--surface:#101b16;--card:#14221b;--subtle:#1b2d23;--border:#31463b;--text:#edf3ef;--muted:#afc2b6;--red:#f48289;--green:#a7d7bb;color-scheme:dark;}
body {font-family:"Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;max-width:1280px;}
h1 {font-weight:700;letter-spacing:-.045em;}
h2,h3 {font-weight:650;letter-spacing:-.025em;}
button {border-radius:5px;font-weight:550;box-shadow:none;}
button:not(:disabled):hover {box-shadow:none;}
.stat-rij {background:transparent;border:0;border-radius:0;}
.stat-item {padding:12px 22px;}
.stat-item:first-child {padding-left:0;}
#epidemiologie .stat-item strong {color:var(--red);}
nav {background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:0;margin:28px 0 0;gap:6px;}
nav button[data-pagina] {flex:0 1 auto;padding:16px 20px;border:0;border-bottom:3px solid transparent;border-radius:0;color:var(--muted);font-size:.9rem;}
nav button[data-pagina]:hover {background:#ffffff04;color:var(--text);}
nav button[data-pagina].actief {background:transparent;box-shadow:none;border-color:#e3636d;color:var(--text);}
main {background:var(--surface);border-bottom:1px solid var(--border);}
main > section {background:transparent;border:0;border-radius:0;box-shadow:none;padding:32px 24px;}
main > section > h2 {font-size:1.7rem;}
.detailkaart {background:transparent;border:0;border-radius:0;padding:20px 0;}
.intake-stap {padding-top:8px;}
#intake-start > button {background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;margin:0;padding:20px 12px;}
#intake-start > button:hover {background:#1c3024;border-bottom-color:#6c8c78;}
#intake-start > button:last-child {border-bottom:0;}
#intake-start > button::before {font-family:ui-monospace,monospace;}
.intake-stap > button {background:#1b2d23;border-color:#425d4c;border-radius:5px;}
#intake:has(> #intake-uitkomst:not([hidden])) {gap:16px 32px;}
#intake:has(> #intake-uitkomst:not([hidden])) > #intake-uitkomst {background:transparent!important;border:0!important;border-left:1px solid var(--border)!important;padding:8px 0 16px 28px;}
#intake-uitkomst > h3 {border:0;padding:0;}
#intake-uitkomst > button {font-size:.85rem;padding:10px 12px;}
.fasekeuze {border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;padding:0 0 10px;gap:6px;}
.fasekeuze button {flex:1 1 150px;border-radius:5px;min-height:46px;padding:12px 14px;font-size:.85rem;}
.fasekeuze button.actief {background:#263f30;border-color:#587562;}
.fase-inhoud {gap:0 32px;}
.fase-blok {background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:22px 0;}
.fase-blok h4 {font-size:.75rem;letter-spacing:.075em;color:#a9c6b3;}
.fase-blok p,.fase-blok ol {font-size:.94rem;line-height:1.8;}
.fase-blok.doorstroom {background:#28251a;border:0;border-left:3px solid #c99b4b;border-radius:0;padding:20px 22px;margin-top:22px;}
.fase-blok.fase-bron {border:0;padding-top:18px;}
.sporen {gap:0;}
.spoor {background:transparent;border:0;border-radius:0;padding:0 28px 0 0;}
.spoor + .spoor {border-left:1px solid var(--border);padding:0 0 0 28px;}
.spoor > select {border-radius:5px;background:#1b2d23;}
#anatomie .plaat {border:0;border-radius:0;background:transparent;padding:16px 24px;}
#anatomie .informatie {border:0;border-left:1px solid var(--border);border-radius:0;background:transparent;padding:16px 0 16px 28px;}
#anatomie .lijst {gap:0 14px;}
#anatomie .structuur-keuze {background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;}
#anatomie .structuur-keuze.actief {background:#263f30;border-bottom-color:#6a8b76;}
#anatomie .aanzicht {border-radius:5px;}
#anatomie .eigenschappen {background:transparent;border:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0;}
#anatomie .informatie h3 {border-top:1px solid var(--border);padding-top:18px;margin-top:20px;}
#criteria details {border:0;border-left:3px solid;border-radius:0;padding:20px 24px;}
.feedback-float {border-radius:8px;background:#263f30;border-color:#688470;color:#edf3ef;}
#feedback-dialog {border-radius:12px;}
.beheer-item {background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:24px;}
@media(max-width:900px){
 .spoor,.spoor + .spoor {padding:0;border-left:0;}
 .spoor + .spoor {margin-top:32px;padding-top:28px;border-top:1px solid var(--border);}
 #anatomie .informatie {border-left:0;border-top:1px solid var(--border);padding:24px 0 0;}
 .stat-item:nth-child(3) {padding-left:0;}
}
@media(max-width:800px){#intake:has(> #intake-uitkomst:not([hidden])) > #intake-uitkomst {border-left:0!important;border-top:1px solid var(--border)!important;padding:24px 0 0;}}
@media(max-width:600px){
 nav {gap:0;}nav button[data-pagina] {flex:1 1 28%;padding:13px 8px;font-size:.8rem;}
 main > section {padding:24px 16px;}
 .stat-item {padding:12px 14px;}
 .detailkaart {padding:16px 0;}
 .fasekeuze {padding:0 0 8px;}.fasekeuze button {flex-basis:42%;font-size:.8rem;}
 .fase-blok {padding:18px 0;}.fase-blok.doorstroom {padding:18px;}
 #anatomie .plaat {padding:16px 0;}
}