/* Uitlegpagina [groene_rad_uitleg] – alles valt onder .gru zodat het thema er niet doorheen loopt */
@font-face{font-family:"GR Anton";src:url("../fonts/anton-latin-400-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"GR Open Sans";src:url("../fonts/open-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"GR Open Sans";src:url("../fonts/open-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"GR Open Sans";src:url("../fonts/open-sans-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}

.gru{--v:#7456FA;--vd:#5B3FE0;--g:#06F97E;--y:#FFCD05;--ink:#2C2549;--ink2:#4A4270;--lil:#F1EEFF;--line:#DDD8F5;
	font-family:"GR Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:var(--ink);font-size:17px;line-height:1.5;
	border-radius:16px;overflow:hidden;background:#fff;margin:0 0 2em}
.gru *,.gru *::before,.gru *::after{box-sizing:border-box}
.gru [hidden]{display:none !important}
.gru p,.gru h2,.gru h3,.gru ul,.gru table{margin:0;padding:0}
.gru a{color:var(--vd);text-decoration:underline}
.gru a:hover{color:var(--ink)}
.gru img{max-width:100%;height:auto;border:0;box-shadow:none}
.gru-in{max-width:1080px;margin:0 auto;position:relative}
.gru-sec{padding:48px 24px}
.gru-sec--tight{padding-top:0}
.gru-sec--lilac{background:var(--lil)}
.gru-p{font-size:18px;max-width:760px;margin:0 0 14px !important}
.gru-small{font-size:14px;font-weight:700;margin:0 0 8px !important}

/* Koppen als schuine labels */
.gru-tag,.gru-h2{display:inline-block;font-family:"GR Anton",Impact,"Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;transform:rotate(-2deg);letter-spacing:0;line-height:1.08}
.gru-tag{font-size:clamp(38px,7vw,78px);padding:2px 18px 8px;margin:0 0 8px}
.gru-tag--green{background:var(--g);color:var(--ink)}
.gru-tag--white{background:#fff;color:var(--v)}
.gru-h2{font-size:clamp(28px,4vw,36px);padding:2px 14px 6px;margin:0 0 20px !important}
.gru-h2--violet{background:var(--v);color:#fff}
.gru-h2--green{background:var(--g);color:var(--ink)}
.gru-h2--dark{background:var(--ink);color:var(--g)}

.gru-hero{background:var(--v);color:#fff;padding:48px 24px 56px;position:relative;overflow:hidden}
.gru-wheel{position:absolute;right:-140px;top:calc(30px + var(--grtop,0px));width:380px;height:380px;border-radius:50%;background:repeating-conic-gradient(var(--g) 0 30deg,#fff 30deg 60deg,var(--y) 60deg 90deg,var(--ink) 90deg 120deg);opacity:.9}
.gru-kwlogo{width:220px;display:block;margin:0 0 18px}
.gru-tags{margin:0 !important;line-height:1}
.gru-lead{font-size:clamp(18px,2.2vw,22px);font-weight:700;max-width:620px;margin:14px 0 20px !important}
.gru-btns{display:flex;flex-wrap:wrap;gap:12px}
.gru .gru-btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;border-radius:10px;font-weight:800;text-decoration:none;font-size:17px;line-height:1.2}
.gru .gru-btn--green{background:var(--g);color:var(--ink)}
.gru .gru-btn--green:hover{background:#fff;color:var(--ink)}
.gru .gru-btn--ghost{border:2px solid #fff;color:#fff}
.gru .gru-btn--ghost:hover{background:#fff;color:var(--v)}

.gru-live{background:var(--ink);color:#fff;padding:28px 24px}
.gru-live__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.gru-live__txt{display:flex;flex-direction:column;gap:4px;flex:1 1 280px}
.gru-live__label{font-family:"GR Anton",Impact,sans-serif;font-size:30px;text-transform:uppercase;color:var(--g);line-height:1.1}
.gru-live__when{font-weight:700;color:#E4E0FA}
.gru-cd{display:flex;gap:10px}
.gru-cd div{background:#fff;color:var(--ink);border-radius:10px;width:84px;padding:8px 0 6px;display:flex;flex-direction:column;align-items:center}
.gru-cd span{font-family:"GR Anton",Impact,sans-serif;font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.gru-cd small{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}

.gru-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.gru-step{background:var(--lil);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:10px}
.gru-step h3,.gru-faq h3{font-family:inherit;font-size:19px;font-weight:800;line-height:1.3;color:var(--ink);text-transform:none;letter-spacing:0}
.gru-num{width:46px;height:46px;border-radius:50%;background:var(--y);font-weight:800;font-size:21px;display:flex;align-items:center;justify-content:center}
.gru-plus{margin-top:18px;background:var(--ink);color:#fff;border-radius:12px;padding:16px 22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.gru-plus strong{font-family:"GR Anton",Impact,sans-serif;font-weight:400;font-size:38px;color:var(--g);text-transform:uppercase}
.gru-plus span{font-size:18px}

.gru-prizes{list-style:none !important;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.gru-prizes li{list-style:none !important;margin:0 !important;border:2px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-height:160px}
.gru-prizes li > strong{margin-top:auto;font-size:16px;line-height:1.3}
.gru-prizes li > span{line-height:1.3}
.gru-prizes li::before{content:none !important}
.gru-prizes span{color:var(--ink2);font-size:15px}

.gru-table{width:100%;border-collapse:collapse;margin:0 0 16px !important;background:#fff;border-radius:10px;overflow:hidden}
.gru-table th,.gru-table td{text-align:left;padding:10px 14px;border:0;border-bottom:1px solid var(--line)}
.gru-table th{background:var(--v);color:#fff;font-weight:800}
.gru-no{font-weight:800;letter-spacing:1px;color:var(--vd);white-space:nowrap}

.gru-faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px 32px}
.gru-faq h3{margin:0 0 6px !important}

.gru-partners{border-top:2px solid var(--line);padding:24px}
.gru-partners__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.gru-logos{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.gru-logos img{height:64px;width:auto}
@media (max-width:600px){.gru-wheel{width:240px;height:240px;right:-110px;top:calc(20px + var(--grtop,0px))}.gru-cd div{width:70px}}
.gru{container-type:inline-size}
.gru-hero .gru-in{z-index:1}
@container (max-width:900px){.gru-wheel{width:300px;height:300px;right:-170px;top:calc(24px + var(--grtop,0px));opacity:.35}}
.gru .gru-plogo{display:block;width:auto !important;height:68px !important;max-width:230px !important;object-fit:contain;object-position:left center;margin:0 !important}

/* Veelgestelde vragen */
.gru .grf-group{font-family:"GR Open Sans",sans-serif;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:#5B3FE0;margin:22px 0 8px !important}
.gru .grf-group:first-child{margin-top:0 !important}
.gru .grf-item{border-bottom:1px solid #DDD8F5}
.gru .grf-item summary{cursor:pointer;list-style:none;padding:12px 32px 12px 0;font-weight:800;font-size:17px;position:relative;color:#2C2549;min-height:44px}
.gru .grf-item summary::-webkit-details-marker{display:none}
.gru .grf-item summary::after{content:"+";position:absolute;right:4px;top:8px;font-size:24px;font-weight:700;color:#7456FA}
.gru .grf-item[open] summary::after{content:"–"}
.gru .grf-a{padding:0 0 14px;line-height:1.55;color:#2C2549}
.gru .grf-a a{color:#5B3FE0}
.gru-legal{margin-top:18px !important;font-size:15px}
.gru .grf-item{border:0;border-bottom:1px solid #DDD8F5;padding:0;margin:0;background:none;border-radius:0}
.gru .grf-item summary{border:0;background:none;margin:0;outline-offset:2px}
.gru .grf-item[open] summary{border:0}

/* Volle breedte (als 'Extra ruimte bovenaan' is ingevuld): de paarse kop loopt van rand tot rand, ook achter een doorzichtig menu. */
.gru.gru--full{width:auto;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0}
html:has(.gru--full),body:has(.gru--full){overflow-x:clip}
.gru-pl{height:84px;display:flex;align-items:center;margin:0 0 10px}
.gru .gru-cnt{font-family:"GR Anton",Impact,sans-serif;font-weight:400;font-size:30px;line-height:1;color:var(--v);margin-right:4px;vertical-align:-3px}
.gru-plines{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.gru-prizes li .gru-plines > strong{margin-top:0;font-size:16px;line-height:1.3}

.gru a.gru-slink{color:inherit !important;text-decoration:none !important;box-shadow:none !important}
.gru li.has-link span a.gru-slink{text-decoration:underline !important;text-decoration-thickness:1px !important;text-underline-offset:3px}
.gru a.gru-slink:hover,.gru a.gru-slink:focus-visible{color:var(--v) !important}
.gru .gru-pl a.gru-slink{display:inline-flex;align-items:center}
.gru .gru-ext{font-style:normal;font-size:.9em}
