:root {
  font-family: Arial, sans-serif;
  color: #f3f5f4;
  background: #080909;
}

* {
  box-sizing: border-box;
}

body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
  line-height: 1.6;
}

h1 {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1.1;
  text-transform: uppercase;
}

h1 + p {
  color: #aebcba;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 40px 0 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid #34413e;
}

button {
  padding: 12px 18px;
  border: 1px solid #3b4a46;
  border-radius: 8px;
  color: #f3f5f4;
  background: #17211f;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

button:hover,
button:focus-visible {
  border-color: #e24848;
  outline-color: #e24848;
}

section {
  min-height: 240px;
  padding: 28px;
  border: 1px solid #34413e;
  border-radius: 12px;
  background: #20382f;
}

section h2 {
  margin-top: 0;
  font-size: 2rem;
}

section p {
  color: #c9d3d0;
}

[hidden] {
  display: none !important;
}

.fasekeuze {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
}

button.actief {
  border-color: #e24848;
  background: #712a2a;
}

.detailkaart {
  padding: 24px;
  border: 1px solid #3b4a46;
  border-radius: 10px;
  background: #101816;
}

.detailkaart h3 {
  margin-top: 0;
}

details {
  margin-top: 12px;
  padding: 16px 20px;
  border: 1px solid #3b4a46;
  border-radius: 8px;
  background: #101816;
}

summary {
  cursor: pointer;
  font-weight: bold;
}

details[open] {
  border-color: #e24848;
}

details.groen,
details.groen[open] {
  background: #19583b;
  border-color: #52c68a;
}

details.oranje,
details.oranje[open] {
  background: #805018;
  border-color: #f2b453;
}

details.rood,
details.rood[open] {
  background: #762b32;
  border-color: #ef777f;
}

details summary,
details p {
  color: #ffffff;
}

.statistieken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.statistiek {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.statistiek strong {
  display: block;
  font-size: 2rem;
  margin-bottom: 8px;
}

.statistiek p {
  margin: 0;
}

.statistiek-bronnen {
  font-size: 0.85rem;
  margin-top: 12px;
}

#epidemiologie.hero-statistieken {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  padding: 28px 0 18px;
  margin: 32px 0 18px;
}

.stat-rij {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.stat-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.stat-item strong {
  color: #7fc7df;
  font-size: 2.2rem;
  line-height: 1;
  white-space: nowrap;
}

.stat-item span {
  font-size: 0.95rem;
  line-height: 1.4;
}

.stat-bronnen {
  margin: 18px 0 0;
  font-size: 0.75rem;
  opacity: 0.7;
}

@media (max-width: 800px) {
  .stat-rij {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 500px) {
  .stat-rij {
    grid-template-columns: 1fr;
  }
}

.pagina[hidden] {
  display: none !important;
}

.site-footer {
  margin-top: 48px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: #aebbb7;
  font-size: 0.85rem;
  text-align: center;
}

#epidemiologie.hero-statistieken {
  margin-bottom: 0;
  padding-bottom: 0;
}

.stat-bronnen {
  margin-bottom: 0;
}

nav {
  margin-top: -24px;
}

.stat-bronnen {
  margin-top: 8px;
  margin-bottom: 0;
}

#veld-tekst {
  white-space: pre-line;
}

#epidemiologie .stat-item strong {
  color: #ff4040;
}

nav button[data-pagina],
nav button[data-pagina].actief {
  color: #ff4040;
}

/* Interactieve anatomiekaart */
#anatomie .anatomie-layout {
  display: grid;
  grid-template-columns: minmax(340px, 1.1fr) minmax(320px, .9fr);
  gap: 24px;
  align-items: start;
}

#anatomie .links {
  min-width: 0;
}

#anatomie .aanzichten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

#anatomie .aanzicht,
#anatomie .structuur-keuze {
  border: 1px solid #456355;
  background: #14251d;
  color: #f3f5f4;
}

#anatomie .aanzicht {
  border-radius: 10px;
  padding: 10px 14px;
}

#anatomie .aanzicht:hover,
#anatomie .aanzicht:focus-visible,
#anatomie .aanzicht.actief,
#anatomie .structuur-keuze:hover,
#anatomie .structuur-keuze:focus-visible,
#anatomie .structuur-keuze.actief {
  border-color: #ff6464;
  background: #27483a;
}

#anatomie .plaat,
#anatomie .informatie {
  background: #172820;
  border: 1px solid #456355;
  border-radius: 16px;
}

#anatomie .plaat {
  padding: 18px;
}

#anatomie .tekening {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

#anatomie .prent {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

#anatomie .punt {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  padding: 0;
  border: 2px solid #ffd9d9;
  border-radius: 50%;
  background: #b6222b;
  color: white;
  font-weight: 800;
  box-shadow: 0 3px 12px #0008;
}

#anatomie .punt:hover,
#anatomie .punt:focus-visible,
#anatomie .punt.actief {
  background: #ff4040;
  border-color: white;
  outline: 2px solid white;
  outline-offset: 2px;
}

#anatomie .bijschrift,
#anatomie .anatomie-bron {
  color: #d4ded8;
  font-size: .9rem;
}

#anatomie .lijst {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

#anatomie .structuur-keuze {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px 12px;
  text-align: left;
  border-radius: 10px;
}

#anatomie .structuur-keuze span {
  display: grid;
  place-items: center;
  flex: none;
  width: 27px;
  height: 27px;
  border: 1px solid #ff7777;
  border-radius: 50%;
  color: #ff7777;
}

#anatomie .informatie {
  padding: clamp(20px, 3vw, 32px);
  min-height: 600px;
}

#anatomie .nummer {
  color: #ff6262;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#anatomie .informatie h2 {
  margin: 5px 0 4px;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

#anatomie .informatie h3 {
  margin: 22px 0 6px;
  color: #e2eee6;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

#anatomie .informatie p {
  margin: 0 0 10px;
  color: #f3f5f4;
}

#anatomie .informatie .subtitel {
  margin-bottom: 22px;
  color: #d0dcd2;
}

#anatomie .eigenschappen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 24px 0;
  border: 1px solid #4b6656;
  border-radius: 10px;
  overflow: hidden;
}

#anatomie .eigenschappen div {
  padding: 14px;
  border-right: 1px solid #4b6656;
}

#anatomie .eigenschappen div:last-child {
  border-right: 0;
}

#anatomie .eigenschappen strong {
  display: block;
}

#anatomie .eigenschappen small {
  color: #b7c7bc;
  text-transform: uppercase;
  letter-spacing: .07em;
}

#anatomie a {
  color: #ff8b8b;
}

#intake .bronregel {
  margin-top: 18px;
  font-size: .85rem;
  color: #c9d8ce;
}

#intake .bronregel a {
  color: #ff8b8b;
}

@media (max-width: 800px) {
  #anatomie .anatomie-layout {
    grid-template-columns: 1fr;
  }

  #anatomie .informatie {
    min-height: 0;
  }
}

@media (max-width: 480px) {
  #anatomie .lijst,
  #anatomie .eigenschappen {
    grid-template-columns: 1fr;
  }

  #anatomie .eigenschappen div {
    border-right: 0;
    border-bottom: 1px solid #4b6656;
  }
}

/* Intake: volledige breedte tot de uitkomst zichtbaar is */
#intake {
  display: block;
}

/* Pas bij een zichtbare uitkomst: twee kolommen */
#intake:has(> #intake-uitkomst:not([hidden])) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 24px;
  align-items: start;
}

#intake:has(> #intake-uitkomst:not([hidden])) > h2,
#intake:has(> #intake-uitkomst:not([hidden])) > p {
  grid-column: 1 / -1;
}

#intake:has(> #intake-uitkomst:not([hidden])) > .intake-stap {
  grid-column: 1;
  grid-row: 3;
}

#intake:has(> #intake-uitkomst:not([hidden])) > #intake-uitkomst {
  grid-column: 2;
  grid-row: 3;
  margin-top: 0 !important;
}

#intake:has(> #intake-uitkomst:not([hidden])) > #intake-opnieuw {
  grid-column: 1;
  grid-row: 4;
  justify-self: start;
}

/* Op een smal scherm onder elkaar */
@media (max-width: 800px) {
  #intake:has(> #intake-uitkomst:not([hidden])) {
    grid-template-columns: 1fr;
  }

  #intake:has(> #intake-uitkomst:not([hidden])) > #intake-uitkomst {
    grid-column: 1;
    grid-row: 4;
  }

  #intake:has(> #intake-uitkomst:not([hidden])) > #intake-opnieuw {
    grid-row: 5;
  }
}

#intake:has(> #intake-uitkomst:not([hidden])) > .intake-stap,
#intake:has(> #intake-uitkomst:not([hidden])) > #intake-uitkomst {
  align-self: stretch;
  height: 100%;
  min-width: 0;
}

#intake:has(> #intake-uitkomst:not([hidden])) > #intake-uitkomst {
  background: #101816 !important;
  border-color: #3b4a46 !important;
  margin-top: 0 !important;
}

/* Aanvullende intakevragen */
#intake-extra-vragen {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #3b4a46;
  counter-reset: intake-vraag;
}

#intake-extra-vragen h4 {
  margin: 0 0 18px;
  color: #ff6262;
  font-size: 1.05rem;
}

#intake-extra-vragen label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 20px 0 8px !important;
  color: #f3f5f4;
}

#intake-extra-vragen label::before {
  counter-increment: intake-vraag;
  content: "0" counter(intake-vraag);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 7px;
  color: #ff6262;
  background: #24382e;
  font-size: 0.8rem;
}

#intake-extra-vragen select {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px !important;
  border: 1px solid #617869 !important;
  border-radius: 10px !important;
  color: #f3f5f4 !important;
  background-color: #1e3027 !important;
  color-scheme: dark;
  font: inherit;
  cursor: pointer;
}

#intake-extra-vragen select:hover {
  border-color: #9ab3a0 !important;
}

#intake-extra-vragen select:focus-visible {
  outline: 2px solid #ff6262;
  outline-offset: 3px;
}

#open-anatomie-regio {
  margin-top: 22px !important;
  border-color: #617869;
}

/* Visuele basis: N.E.C. rood, groen en rustige donkere vlakken. */
:root {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#0b1010; color:#f5f7f6; --accent:#f06464; --line:#334640;}
body {max-width:1240px; padding:40px 28px 24px; line-height:1.65;}
.site-header {border-left:4px solid #dc4048; padding-left:24px; margin-bottom:32px;}
.club-label {margin:0 0 14px; font-size:1rem; font-weight:800; letter-spacing:.12em; color:#f57878;}
.club-label span {color:#a7bcb2; font-weight:500; margin-left:12px;}
h1 {font-size:clamp(2rem,5vw,3.8rem); letter-spacing:-.045em; text-transform:none; overflow-wrap:anywhere;}
.site-intro {margin:12px 0 0; color:#b4c4be; font-size:1.05rem;}
a {color:#ff9999; text-underline-offset:3px; overflow-wrap:anywhere;}
#epidemiologie.hero-statistieken {min-height:0; margin:0 0 28px; padding:0; border:0;}
.stat-rij {gap:12px;}
.stat-item {display:block; background:#131e1a; border:1px solid #293d33; border-radius:12px; padding:20px;}
.stat-item strong {display:block; margin-bottom:12px; font-size:2rem; letter-spacing:-.04em;}
.stat-item span {display:block; font-size:.85rem; color:#bfcec6;}
.stat-bronnen {opacity:1; color:#96aaa0; margin-top:12px;}
nav {margin:24px 0; padding:8px; border:1px solid var(--line); border-radius:12px; background:#101916; gap:6px;}
nav button[data-pagina] {flex:1; color:#b9ccc1; background:transparent; border-color:transparent;}
nav button[data-pagina].actief {color:white; background:#294b3a; border-color:#598c6b;}
button {min-height:46px; border-radius:8px; font-size:.94rem; transition:background .15s, border-color .15s;}
button:hover:not(:disabled) {background:#2a4036; border-color:#b37d7d;}
button:focus-visible, summary:focus-visible, a:focus-visible {outline:3px solid #ff9595; outline-offset:3px;}
button:disabled {cursor:default; opacity:.5;}
section {padding:clamp(18px,3vw,32px); background:#17271f; border-color:#3b5346; border-radius:16px;}
section h2 {font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.025em; margin-bottom:8px;}
section > p {margin-top:0; margin-bottom:24px;}
.detailkaart {background:#101b16; border-color:#354c3e; padding:clamp(18px,2.5vw,28px); border-radius:12px;}
h3 {font-size:1.15rem; line-height:1.4;}
h4 {line-height:1.4;}
li + li {margin-top:8px;}
ul {padding-left:22px;}
.intake-stap > button {display:block; width:100%; margin-top:10px; text-align:left; padding:14px 18px;}
#intake-start {counter-reset:route;}
#intake-start > button {counter-increment:route; display:flex; align-items:center; gap:16px; background:#172b20;}
#intake-start > button::before {content:"0" counter(route); color:#ee8585; font-size:.8rem; letter-spacing:.08em;}
#intake-opnieuw {margin-top:18px; color:#bacdc1; background:transparent; font-weight:500;}
#intake-uitkomst small {display:block; color:#a7bdb0; line-height:1.5; border-top:1px solid #354c3e; padding-top:16px;}
#intake-antwoorden {border-left:3px solid #dc6262; padding-left:14px; font-size:.9rem;}
.fasekeuze {gap:8px;}
.fasekeuze button {flex:1 1 150px; text-align:left;}
button.actief {background:#294b3a; border-color:#719b7d;}
#kracht-tekst,#veld-tekst {line-height:1.8;}
#veld-tekst {white-space:normal;}
details {padding:20px; border-left-width:4px;}
details.groen,details.groen[open] {background:#18382a;}
details.oranje,details.oranje[open] {background:#3c301b;}
details.rood,details.rood[open] {background:#3c2024;}
#anatomie .anatomie-layout {grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px;}
#anatomie .informatie {min-height:0;}
#anatomie .eigenschappen {grid-template-columns:repeat(3,minmax(0,1fr));}
#intake-extra-vragen select {max-width:100%; font-size:16px;}
.site-footer {margin-top:28px; text-align:left; color:#8fa69a;}
@media(max-width:900px) {#anatomie .anatomie-layout {grid-template-columns:1fr;}}
@media(max-width:600px) {
 body {padding:24px 14px 16px;}
 .site-header {padding-left:16px; margin-bottom:24px;}
 .club-label {font-size:.8rem; letter-spacing:.06em;}
 .club-label span {margin-left:6px;}
 .stat-rij {grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
 .stat-item {padding:14px;}
 .stat-item strong {font-size:1.65rem;}
 .stat-item span {font-size:.78rem;}
 nav {gap:4px; padding:6px;}
 nav button[data-pagina] {flex:1 1 28%; padding:10px 8px;}
 .fasekeuze button {flex-basis:42%; font-size:.85rem;}
 #anatomie .lijst {grid-template-columns:1fr;}
 #anatomie .eigenschappen {grid-template-columns:1fr;}
 #anatomie .eigenschappen div {border-right:0; border-bottom:1px solid #4b6656;}
}
@media(prefers-reduced-motion:reduce) {button {transition:none;} html {scroll-behavior:auto;}}

/* Scanbare fasen en een compact werkoverzicht. */
body {padding-top:28px;}
.site-header {margin-bottom:20px;}
h1 {font-size:clamp(2rem,4vw,3rem);}
.site-intro {font-size:.95rem; margin-top:8px;}
.stat-item {padding:14px 18px;}
.stat-item strong {font-size:1.7rem; margin-bottom:6px;}
nav {margin:20px 0;}
.sporen {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;}
.spoor {min-width:0;border:1px solid #3b5346;border-radius:12px;padding:20px;background:#101b16;}
.spoor > label {display:block;font-weight:700;color:#b9cdc1;margin-bottom:8px;}
.spoor > select {width:100%;min-width:0;min-height:48px;padding:10px;color:#f5f7f6;background:#233a2c;border:1px solid #678571;border-radius:8px;font:inherit;font-size:16px;color-scheme:dark;}
.spoor > select:focus-visible {outline:3px solid #ff9595;outline-offset:3px;}
.spoor > h3 {margin:22px 0 16px;}
.fase-inhoud {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.fase-blok {padding:18px;border:1px solid #2c4235;border-radius:10px;background:#14251b;min-width:0;}
.fase-blok h4 {font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:#a9c6b3;margin:0 0 10px;}
.fase-blok p {margin:0;font-size:.95rem;line-height:1.7;}
.fase-blok ol {margin:0;padding-left:20px;font-size:.95rem;line-height:1.7;}
.fase-blok.doorstroom {grid-column:1 / -1;border-left:4px solid #e7b162;background:#2c281a;}
.fase-blok.doorstroom h4 {color:#f2cb86;}
.fase-blok.fase-bron {grid-column:1 / -1;background:transparent;border:0;padding:8px 0;}
.fase-blok.fase-bron p {font-size:.8rem;color:#a9bdb0;}
.spoor .fase-inhoud {grid-template-columns:1fr;}
.intake-overzicht {border-bottom:1px solid #3b5346;padding-bottom:18px;margin-bottom:22px;}
.intake-overzicht h4 {color:#a9c6b3;text-transform:uppercase;font-size:.78rem;letter-spacing:.08em;margin:0 0 12px;}
.antwoord-rij {display:flex;align-items:center;gap:12px;padding:8px 0;}
.antwoord-rij p {flex:1;margin:0;font-size:.9rem;}
.antwoord-rij span,.antwoord-rij strong {display:block;}
.antwoord-rij span {color:#a2b8aa;font-size:.8rem;}
.wijzig-antwoord {background:transparent;min-height:44px;padding:8px 12px;font-size:.8rem;}
@media(max-width:900px) {.sporen {grid-template-columns:1fr;}}
@media(max-width:600px) {.fase-inhoud {grid-template-columns:1fr;} .spoor {padding:16px;} .fase-blok {padding:16px;} .stat-item {padding:12px;} nav button[data-pagina] {flex-basis:28%;}}

/* Feedback blijft bereikbaar in elk protocolonderdeel. */
.feedback-float {position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:50;background:#a93840;border-color:#ee7e84;color:white;box-shadow:0 4px 20px #0006;padding:12px 22px;}
.site-footer {padding-bottom:85px;}
#feedback-dialog {width:min(520px,calc(100% - 28px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #537461;border-radius:16px;padding:24px;background:#14251b;color:#f5f7f6;}
#feedback-dialog::backdrop {background:#000a;}
.feedback-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.feedback-heading h2 {font-size:1.5rem;margin:0;}
#feedback-close {font-size:1.5rem;padding:0;min-width:44px;background:transparent;}
#feedback-form label {display:block;margin:16px 0 6px;font-weight:600;}
#feedback-form select,#feedback-form textarea {display:block;width:100%;padding:12px;font:inherit;font-size:16px;border:1px solid #678571;border-radius:8px;background:#20362a;color:white;color-scheme:dark;}
#feedback-form textarea {resize:vertical;}
#feedback-form small {display:block;color:#b5c7bb;margin-top:8px;}
.feedback-context {padding:10px 12px;background:#20362a;border-radius:8px;font-size:.85rem;}
#feedback-status {font-size:.9rem;}
#feedback-send {width:100%;}
@media(max-width:600px){.feedback-float {right:14px;bottom:14px;}#feedback-dialog {padding:18px;}}

.beheer-item {margin:16px 0;overflow-wrap:anywhere;} #beheer-key,#beheer-filter,.beheer-item select {padding:10px;border:1px solid #678571;border-radius:8px;background:#20362a;color:white;font:inherit;max-width:100%;} #beheer-login label {display:block;}