*{box-sizing:border-box}
body{margin:0;font:17px/1.55 var(--gs-text,system-ui,sans-serif)}
main{max-width:1100px;margin:auto;padding:22px clamp(14px,4vw,48px) 30px}
header{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:12px}
.brand{font-weight:800;letter-spacing:.12em;font-size:12px;text-transform:uppercase}
h1{font-size:clamp(30px,5vw,48px)!important;margin:18px 0 6px}
h2{font-size:clamp(24px,3.4vw,32px);line-height:1.2;margin:4px 0 10px}
h3{font-size:18px;margin:18px 0 8px}
p{max-width:720px;margin:0 0 12px}
.lead{color:var(--gs-sub);margin-bottom:14px}
.eyebrow{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800}
button,input{font:inherit}
button{cursor:pointer;min-height:44px;color:var(--gs-cream);background:var(--gs-surface);border:2px solid var(--gs-line-2);border-radius:0;padding:8px 14px}
button:hover{background:var(--gs-surface-2)}
button:disabled{opacity:.45;cursor:default}
button:active:not(:disabled){transform:translateY(2px)}
:is(button,a,summary,h2):focus-visible{outline:3px solid var(--gs-cream);outline-offset:3px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.toolbar .count{display:inline-block;min-width:1.6em;margin-left:6px;padding:0 5px;background:var(--gs-gold);color:#000;font-weight:800}
.status{font-size:14px;color:var(--gs-sub);margin:6px 0}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 14px;font-size:13px}
.crumbs button{min-height:44px;max-width:min(100%,22em);padding:3px 10px;font-size:13px;border-width:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs button[aria-current]{border-color:var(--gs-gold);color:var(--gs-gold)}
.crumbs .more{color:var(--gs-sub)}
/* Keuzekaarten: hoekige kaarten met een gekleurde rand per onderwerp. */
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin:10px 0 18px}
.pick{--c:var(--gs-gold);--s:var(--gs-gold-s);display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:16px 18px;min-height:96px;background:var(--gs-surface);border:3px solid var(--c);box-shadow:0 5px 0 var(--s);clip-path:polygon(0 0,calc(100% - var(--pk-cut-card,0px)) 0,100% var(--pk-cut-card,0px),100% 100%,0 100%);overflow-wrap:anywhere}
.pick:focus-visible{outline-offset:-8px}
.pick b{font:800 20px/1.25 var(--gs-display);color:var(--gs-cream)}
.pick small{font-size:13px;color:var(--gs-sub)}
.pick .mark{font-size:12px;font-weight:800;color:var(--c);text-transform:uppercase;letter-spacing:.08em}
.pick.done{border-style:solid;opacity:.92}
.g-leven{--c:var(--gs-teal);--s:var(--gs-teal-s)}.g-tekens{--c:var(--gs-gold);--s:var(--gs-gold-s)}.g-maken{--c:var(--gs-coral);--s:var(--gs-coral-s)}
.g-sporen{--c:var(--gs-cream);--s:var(--gs-cream-s)}.g-meten{--c:#9FE3B0;--s:#2F6B3E}.g-tijd{--c:#C9B6FF;--s:#4B3C86}.g-route{--c:#FF9A4D;--s:#8A3F00}
.route-pick{min-height:120px;background:linear-gradient(135deg,#3A1E0A,var(--gs-surface) 60%)}
.route-pick b{font-size:24px}
.progress{display:block;height:8px;width:100%;max-width:240px;background:var(--gs-line);margin-top:6px}
.progress i{display:block;height:100%;background:var(--c)}
/* Ontdekkaart: kort, verdieping op verzoek. */
.card{--c:var(--gs-gold);background:var(--gs-surface);border:2px solid var(--gs-line-2);border-left:8px solid var(--c);padding:20px clamp(16px,3vw,28px);margin:6px 0 18px}
.card .eyebrow{color:var(--c)}
.card .seen{color:var(--gs-sub);font-weight:600;letter-spacing:0;text-transform:none}
.try{background:var(--gs-surface-2);border-left:4px solid var(--c);padding:10px 14px;max-width:720px}
.try b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--c)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px;margin:10px 0}
.facts div{background:var(--gs-surface-2);padding:10px 14px}
.facts b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--c)}
details{border-top:2px solid var(--gs-line);padding:8px 0}
summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700;color:var(--gs-gold)}
details p{margin-top:6px}
.links a{display:inline-block;margin:4px 0;overflow-wrap:anywhere}
.note{font-size:13px;color:var(--gs-sub)}
.nav-title{font-size:20px;margin-top:8px}
ol.stops{list-style:none;padding:0;margin:10px 0 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px}
ol.stops .pick{width:100%;height:100%}
/* Korte uitleg bij de seizoenskaarten: drie stappen. */
ol.how{list-style:none;counter-reset:how;padding:0;margin:8px 0 12px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px}
ol.how li{counter-increment:how;display:flex;gap:8px;align-items:baseline}
ol.how li::before{content:counter(how);display:inline-grid;place-items:center;min-width:24px;height:24px;background:#FF9A4D;color:#000;font-weight:800;font-size:13px}
/* Verzameling */
#collection{background:var(--gs-surface);border:2px solid var(--gs-gold);padding:18px clamp(14px,3vw,26px);margin:10px 0 18px}
#collection h3{margin:14px 0 6px}
.shelf{display:flex;flex-wrap:wrap;gap:8px}
.shelf button{font-size:15px;text-align:left}
.shelf .todo{font-size:14px;color:var(--gs-sub);align-self:center}
.danger{border-color:var(--gs-coral);color:var(--gs-coral)}
.confirm{background:var(--gs-surface-2);border:2px solid var(--gs-coral);padding:12px 14px;margin-top:10px}
.hidden{display:none!important}
footer{margin-top:30px;padding-top:14px;border-top:2px solid var(--gs-line);font-size:13px;color:var(--gs-sub)}
footer p{max-width:none}
@media(max-width:600px){.crumbs button{max-width:calc(50% - 6px)}.pick{min-height:0;padding:12px 14px}.pick b{font-size:18px}.route-pick b{font-size:21px}.lead{font-size:15px}
 ol.stops{gap:8px}ol.stops .pick{padding:10px 12px;gap:2px;box-shadow:0 3px 0 var(--s)}ol.stops .pick b{font-size:16px}
 ol.stops .pick small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
 ol.how{display:grid;gap:4px;font-size:14px;margin:6px 0 8px}ol.how li::before{min-width:22px;height:22px}}
.platform-nav,.platform-footer{padding:16px;max-width:760px;margin:auto}.platform-nav a,.platform-footer a{color:inherit}.platform-footer{padding-bottom:110px;font-size:.85rem}.herfst-kleur{color:#FF9A4D}.herfst-kaart{--c:#FF9A4D}.wis-rij{margin-top:14px}.progress i.pct-0{width:0%}.progress i.pct-1{width:1%}.progress i.pct-2{width:2%}.progress i.pct-3{width:3%}.progress i.pct-4{width:4%}.progress i.pct-5{width:5%}.progress i.pct-6{width:6%}.progress i.pct-7{width:7%}.progress i.pct-8{width:8%}.progress i.pct-9{width:9%}.progress i.pct-10{width:10%}.progress i.pct-11{width:11%}.progress i.pct-12{width:12%}.progress i.pct-13{width:13%}.progress i.pct-14{width:14%}.progress i.pct-15{width:15%}.progress i.pct-16{width:16%}.progress i.pct-17{width:17%}.progress i.pct-18{width:18%}.progress i.pct-19{width:19%}.progress i.pct-20{width:20%}.progress i.pct-21{width:21%}.progress i.pct-22{width:22%}.progress i.pct-23{width:23%}.progress i.pct-24{width:24%}.progress i.pct-25{width:25%}.progress i.pct-26{width:26%}.progress i.pct-27{width:27%}.progress i.pct-28{width:28%}.progress i.pct-29{width:29%}.progress i.pct-30{width:30%}.progress i.pct-31{width:31%}.progress i.pct-32{width:32%}.progress i.pct-33{width:33%}.progress i.pct-34{width:34%}.progress i.pct-35{width:35%}.progress i.pct-36{width:36%}.progress i.pct-37{width:37%}.progress i.pct-38{width:38%}.progress i.pct-39{width:39%}.progress i.pct-40{width:40%}.progress i.pct-41{width:41%}.progress i.pct-42{width:42%}.progress i.pct-43{width:43%}.progress i.pct-44{width:44%}.progress i.pct-45{width:45%}.progress i.pct-46{width:46%}.progress i.pct-47{width:47%}.progress i.pct-48{width:48%}.progress i.pct-49{width:49%}.progress i.pct-50{width:50%}.progress i.pct-51{width:51%}.progress i.pct-52{width:52%}.progress i.pct-53{width:53%}.progress i.pct-54{width:54%}.progress i.pct-55{width:55%}.progress i.pct-56{width:56%}.progress i.pct-57{width:57%}.progress i.pct-58{width:58%}.progress i.pct-59{width:59%}.progress i.pct-60{width:60%}.progress i.pct-61{width:61%}.progress i.pct-62{width:62%}.progress i.pct-63{width:63%}.progress i.pct-64{width:64%}.progress i.pct-65{width:65%}.progress i.pct-66{width:66%}.progress i.pct-67{width:67%}.progress i.pct-68{width:68%}.progress i.pct-69{width:69%}.progress i.pct-70{width:70%}.progress i.pct-71{width:71%}.progress i.pct-72{width:72%}.progress i.pct-73{width:73%}.progress i.pct-74{width:74%}.progress i.pct-75{width:75%}.progress i.pct-76{width:76%}.progress i.pct-77{width:77%}.progress i.pct-78{width:78%}.progress i.pct-79{width:79%}.progress i.pct-80{width:80%}.progress i.pct-81{width:81%}.progress i.pct-82{width:82%}.progress i.pct-83{width:83%}.progress i.pct-84{width:84%}.progress i.pct-85{width:85%}.progress i.pct-86{width:86%}.progress i.pct-87{width:87%}.progress i.pct-88{width:88%}.progress i.pct-89{width:89%}.progress i.pct-90{width:90%}.progress i.pct-91{width:91%}.progress i.pct-92{width:92%}.progress i.pct-93{width:93%}.progress i.pct-94{width:94%}.progress i.pct-95{width:95%}.progress i.pct-96{width:96%}.progress i.pct-97{width:97%}.progress i.pct-98{width:98%}.progress i.pct-99{width:99%}.progress i.pct-100{width:100%}