:root{--baan: #176b55;--baan-donker: #104b3d;--lijnen: #f8fafc;--glas: #38bdf8;--gaas: #94a3b8;--accentgeel: #facc15;--team-a: #d97706;--team-b: #1d4ed8;--oppervlak: #fff;--radius: .7rem;--schaduw: 0 8px 24px rgba(15, 23, 42, .12);font-family:system-ui,sans-serif;color:#111827;background:#edf4f5;line-height:1.5}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}.app{max-width:1100px;margin:0 auto;padding:0 max(1rem,env(safe-area-inset-right)) 2rem max(1rem,env(safe-area-inset-left))}.kop{padding:.75rem 0}.logo{font-weight:700;color:#1d4ed8;text-decoration:none}.installatie-uitnodiging,.geen-verbinding{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1rem;padding:.75rem 1rem;background:#fff;border:2px solid var(--baan);border-radius:var(--radius);box-shadow:var(--schaduw)}.installatie-uitnodiging p,.geen-verbinding p{margin:.2rem 0 0}.installatie-acties{display:flex;flex-wrap:wrap;gap:.5rem;flex:none}a{color:#1d4ed8}h1{font-size:1.5rem;margin:.5rem 0}h2{font-size:1.1rem;margin:1rem 0 .25rem}.lijst{list-style:none;padding:0;display:grid;gap:.75rem}.kaart{display:flex;flex-direction:column;gap:.2rem;padding:1rem;min-height:44px;background:#fff;border-radius:.5rem;border:1px solid #cbd5e1;text-decoration:none;color:inherit}.kaart span{display:block}.kaart:hover,.kaart:focus-visible{border-color:#1d4ed8;box-shadow:0 2px 8px #1d4ed826}.kaart{gap:.4rem;padding:1.1rem 1.25rem}.kaart-thema{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#1d4ed8}.niveau{width:fit-content;padding:.1rem .45rem;border-radius:1rem;background:#ede9fe;color:#5b21b6;font-size:.8rem;font-weight:700}.kaart-titel{font-size:1.1rem;line-height:1.3}.kaart-omschrijving{color:#334155}.kaart-voet{display:flex!important;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.4rem;padding-top:.6rem;border-top:1px solid #e2e8f0;font-size:.9rem}.kaart-speler{color:#475569}.kaart-open{color:#1d4ed8;font-weight:600}@media (min-width: 900px){.lijst{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.lijst>li{display:flex}.lijst .kaart{flex:1}}.terug{display:inline-block;padding:.5rem 0}.indeling{display:grid;gap:1.5rem;grid-template-columns:1fr}@media (min-width: 800px){.indeling{grid-template-columns:minmax(280px,420px) 1fr;align-items:start}.veldkolom{position:sticky;top:.5rem}}.veld{width:100%;height:auto;max-height:90vh;display:block;border-radius:var(--radius);box-shadow:var(--schaduw);overflow:hidden}.veld-omgeving{fill:#d9e9ed}.veld-oppervlak{fill:var(--baan)}.veld-lijnen{stroke:var(--lijnen)}.veld-glas{stroke:var(--glas)}.veld-gaas{stroke:var(--gaas)}.veld-net{stroke:#0f172a}.veld-net-label{fill:#fff;stroke:#0f172a}.speler-team-A{fill:var(--team-a)}.speler-team-B{fill:var(--team-b)}.speler-rol{fill:#102a26;stroke:#fff;stroke-width:.1;paint-order:stroke}.bal{fill:var(--accentgeel);stroke:#854d0e;stroke-width:.07}.gebied-geschikt{fill:#22c55e4d;stroke:#15803d}.gebied-minder-geschikt{fill:#ef444433;stroke:#b91c1c}.gebied-label{fill:#15803d;stroke:#fff}.verplaatsing-lijn{stroke:var(--accentgeel);stroke-width:.18;stroke-dasharray:.45 .22;animation:verplaatsing-stroom 1s linear infinite}.verplaatsing-punt{fill:var(--accentgeel)}.legenda-pijl{color:#a16207;font-weight:800}@keyframes verplaatsing-stroom{to{stroke-dashoffset:-.67}}@media (prefers-reduced-motion: reduce){.verplaatsing-lijn{animation:none}}.legenda{list-style:none;padding:0;margin:.5rem 0;font-size:.9rem}.legenda li{display:flex;align-items:center;gap:.5rem}.stip{width:.9rem;height:.9rem;border-radius:50%;display:inline-block;flex:none}.kruis{color:#dc2626;font-weight:700;width:.9rem;text-align:center}.opdracht{background:var(--oppervlak);border:2px solid var(--baan);border-radius:var(--radius);padding:.5rem 1rem 1rem;box-shadow:var(--schaduw)}.opdracht h2{margin-top:.5rem}button{font:inherit;padding:.75rem 1.25rem;min-height:48px;border-radius:.4rem;border:1px solid #1d4ed8;background:#1d4ed8;color:#fff;cursor:pointer}button:hover{background:#1e40af}dt{font-weight:700}dd{margin:0 0 .5rem}.bron{font-size:.9rem}.feedback{background:var(--oppervlak);border:2px solid #15803d;border-radius:var(--radius);padding:.5rem 1rem 1rem;box-shadow:var(--schaduw)}.feedback-minder-geschikt{border-color:#b45309}.feedback h3{margin-bottom:.2rem}.feedback p{margin-top:.2rem}button:disabled{opacity:.5;cursor:not-allowed}.indeling>*{min-width:0}.veldkolom{max-width:100%}.tekstkolom{overflow-wrap:anywhere}.knop-primair{background:var(--baan-donker);color:#fff;border:2px solid var(--baan-donker);font-weight:700;box-shadow:0 3px #08362c}.knop-primair:hover{background:var(--baan)}.knop-secundair{background:var(--oppervlak);color:var(--baan-donker);border:2px solid var(--baan);font-weight:700}.knop-secundair:hover:not(:disabled){background:#eff6ff}.acties{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}@media (max-width: 799px){.acties button,.acties a{flex:1 1 9rem}}.veldkolom .opdracht{margin-bottom:.75rem;padding-bottom:.75rem}.opdracht-kern{margin:.5rem 0;padding:.5rem .75rem;background:#eff6ff;border-radius:.4rem}.opdracht-kern div{display:flex;flex-wrap:wrap;column-gap:.4rem}.opdracht-kern dd{margin:0}.sleepinstructie{margin:.5rem 0;padding:.5rem .75rem;background:#fef9c3;border-left:4px solid #facc15;border-radius:.3rem}.plaatsing{margin:.5rem 0;padding-left:1.4rem}.plaatsing li[data-status=actief]{color:#1d4ed8;font-weight:700}.plaatsing li[data-status=geplaatst]{color:#15803d}.plaatsing li[data-status=wacht]{color:#64748b}.buiten-veld{margin:.5rem 0;padding:.5rem .75rem;border-left:4px solid #b45309;background:#fffbeb;color:#78350f;font-weight:600}.stappen{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:.5rem 0 0;font-size:.9rem;color:#475569}.stappen li{display:flex;align-items:center;gap:.3rem}.stappen li[aria-current=step]{color:#1d4ed8;font-weight:700}.stap-nr{display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border-radius:50%;background:#cbd5e1;color:#111827;font-size:.8rem}.stappen li[aria-current=step] .stap-nr{background:#1d4ed8;color:#fff}.stip.halo{background:#facc15;border:2px dashed #111827}.feedback{margin-bottom:1rem}.feedback h2:focus{outline:none}.kernboodschap{margin:.75rem 0;padding:.75rem;border-left:4px solid #15803d;background:#f0fdf4;font-weight:700;border-radius:.3rem}.feedback-deels .kernboodschap,.feedback-niet-passend .kernboodschap{border-color:#b45309;background:#fffbeb}.speler-oordeel p{margin:.45rem 0}.feedback details{margin-top:.6rem;border:1px solid #cbd5e1;border-radius:.5rem;background:#fff}.feedback summary{display:flex;align-items:center;min-height:44px;padding:.55rem .75rem;cursor:pointer;font-weight:700;color:#1d4ed8}.feedback details>:not(summary){margin-inline:.75rem}.feedback details>div:last-child,.feedback details>p:last-child{margin-bottom:.75rem}.feedback summary:focus-visible{outline:3px solid #60a5fa;outline-offset:-3px}.vergelijking{margin:.85rem 0;padding:.8rem;background:#f0fdf4;border:1px solid #86efac;border-radius:.5rem}.vergelijking h3{margin-top:0}.vergelijking p:last-child{margin-bottom:0}.keuze-symbool,.gebied-symbool{display:inline-block;width:.9rem;height:.9rem;margin-right:.35rem;vertical-align:-.1rem}.keuze-symbool{border:3px solid var(--accentgeel);border-radius:50%;background:#fff}.gebied-symbool{background:#22c55e73;border:1px solid #15803d}.advies{font-weight:600}.ronde-start{margin:.5rem 0 2rem;padding:1.25rem;background:#fff;border:2px solid #1d4ed8;border-radius:12px}.ronde-start h1{margin:0 0 .25rem;font-size:1.4rem}.ronde-start p{margin:0 0 1rem}.ronde-start button{min-height:48px}.ronde-start+h2{margin:0 0 .25rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:#475569}.ronde-start button:disabled{opacity:.5;cursor:not-allowed}.ronde-voortgang{margin:0 0 .25rem;font-weight:600;color:#1d4ed8}.vergelijking-velden{display:grid;gap:1rem;margin:1rem 0}.vergelijking-optie{margin:0;background:#fff;padding:.75rem;border:1px solid #cbd5e1;border-radius:var(--radius);box-shadow:var(--schaduw)}.vergelijking-optie figcaption{padding-top:.5rem;font-weight:700;text-align:center}.keuzeveld{display:grid;gap:.5rem;border:0;padding:0;margin:1rem 0}.keuzeveld legend{font-weight:700;margin-bottom:.5rem}.keuzeveld label{min-height:44px;display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;background:#fff;border:1px solid #cbd5e1;border-radius:.5rem;cursor:pointer}.keuzeveld input{width:1.2rem;height:1.2rem}@media (min-width: 800px){.vergelijking-velden{grid-template-columns:1fr 1fr}}a.knop-primair,a.knop-secundair{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:44px;padding:.5rem 1rem;border-radius:.5rem}.terugblik{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.75rem}.terugblik li{padding:.75rem 1rem;background:#fff;border:1px solid #cbd5e1;border-radius:10px}.terugblik h2{margin:0 0 .25rem;font-size:1.05rem}.terugblik p{margin:0 0 .5rem}.terugblik a{display:inline-block;padding:.5rem 0}.oefening{overflow-x:clip}@media (max-width: 799px){.oefening .veldkolom{display:contents}.oefening .veld{width:min(100%,max(40.9091svh,15rem));height:auto;max-height:none;margin-inline:auto}.oefening .acties{order:1;position:sticky;bottom:0;z-index:2;background:#edf4f5;padding:.5rem 0 calc(.5rem + env(safe-area-inset-bottom));margin:0}}@media (orientation: landscape) and (max-height: 500px){.installatie-uitnodiging{padding:.4rem .75rem;margin-bottom:.5rem}.installatie-uitnodiging p{display:inline;margin-left:.35rem}.installatie-uitnodiging>div:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.installatie-uitnodiging .knop-primair,.installatie-uitnodiging .knop-secundair{min-height:40px;padding:.45rem .75rem}.oefening .indeling{grid-template-columns:auto minmax(0,1fr);row-gap:0;column-gap:1rem}.oefening .veldkolom{display:contents;position:static}.oefening .veld{grid-column:1;grid-row:1 / span 4;position:sticky;top:max(.5rem,env(safe-area-inset-top));height:max(calc(100svh - 1rem - env(safe-area-inset-bottom)),18rem);width:auto;aspect-ratio:12 / 22;max-height:none;margin:0}.oefening .opdracht,.oefening .tekstkolom,.oefening .legenda,.oefening .acties{grid-column:2;margin-bottom:.75rem}.oefening .acties{order:1;position:sticky;bottom:0;z-index:2;background:#edf4f5;padding:.5rem 0 calc(.5rem + env(safe-area-inset-bottom));margin-top:0}.oefening .acties button,.oefening .acties a{flex:1 1 9rem}}