/* ============ Welkomspagina (index.html) — bovenop glas.css ============ */
.g2{--g-fill:rgba(255,255,255,0.38);--g-fill-hi:rgba(255,255,255,0.58);--g-brd:rgba(255,255,255,0.78);--g-blur:blur(26px) saturate(1.8);--g-sh:inset 0 1px 0 rgba(255,255,255,0.9),inset 0 -1px 0 rgba(255,255,255,0.25),0 24px 60px -32px rgba(31,45,77,0.45);--g-r:28px}
.g2.g2-soft{--g-fill:rgba(255,255,255,0.82);--g-fill-hi:rgba(255,255,255,0.94);--g-brd:rgba(255,255,255,0.95);--g-blur:blur(10px);--g-sh:0 1px 2px rgba(14,19,36,0.04),0 18px 44px -30px rgba(31,45,77,0.35)}
body.g2::before{display:none}
.g2 a{color:inherit}
.g2 a:hover{color:var(--ink-900)}

/* Achtergrond */
.g2-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--paper);overflow:hidden}
.g2-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
.g2-backdrop.is-shader .g2-canvas{opacity:1}
.g2-glow{position:absolute;inset:-10%;filter:blur(70px);transition:opacity 1.2s}
.g2-backdrop.is-shader .g2-glow{opacity:0}
.g2-glow i{position:absolute;border-radius:50%;opacity:.55;animation:g2drift 26s ease-in-out infinite alternate}
.g2-glow i:nth-child(1){width:46vw;height:46vw;left:-4%;top:-6%;background:#B47BB8}
.g2-glow i:nth-child(2){width:40vw;height:40vw;right:-2%;top:6%;background:#7FB8D4;animation-delay:-8s}
.g2-glow i:nth-child(3){width:44vw;height:44vw;right:12%;bottom:-10%;background:#9DD3DF;animation-delay:-14s}
.g2-glow i:nth-child(4){width:36vw;height:36vw;left:8%;bottom:-6%;background:#A6CE89;animation-delay:-4s}
@keyframes g2drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}100%{transform:translate(-4vw,-3vh) scale(.94)}}
@media (prefers-reduced-motion:reduce){.g2-glow i{animation:none}}

/* Glas basis */
.g2-glass{background:var(--g-fill);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-brd);box-shadow:var(--g-sh)}

/* Typografie */
.g2-kicker{display:inline-block;font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500)}
.g2-kicker-light{color:rgba(255,255,255,0.9)}
.g2-h2{font-size:clamp(40px,5.2vw,76px);letter-spacing:-0.045em;line-height:.95;margin:14px 0 0;text-wrap:balance}

/* Knoppen */
.g2-btn{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:99px;font-family:var(--font-display);font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .25s}
.g2-btn:hover{transform:translateY(-2px)}
.g2-btn svg{transition:transform .25s}
.g2-btn:hover svg{transform:translateX(3px)}
.g2 .g2-btn-dark,.g2 .g2-btn-dark:hover{color:#fff;background:linear-gradient(180deg,rgba(43,51,80,0.92),rgba(14,19,36,0.92));border-color:rgba(255,255,255,0.18);box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),0 14px 30px -14px rgba(14,19,36,0.6)}
.g2-btn-glass{color:var(--ink-900);background:var(--g-fill-hi);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-color:var(--g-brd);box-shadow:var(--g-sh)}
.g2 .g2-btn-glassdark,.g2 .g2-btn-glassdark:hover{color:#fff;background:rgba(14,19,36,0.42);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border-color:rgba(255,255,255,0.32);box-shadow:inset 0 1px 0 rgba(255,255,255,0.3)}

/* Hero */
.g2-hero{position:relative;padding:150px 0 90px}
.g2-hero-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center}
.g2-title{margin:22px 0 0;font-size:clamp(44px,6.6vw,104px);font-weight:800;letter-spacing:-0.055em;line-height:.9;display:flex;flex-direction:column;text-wrap:balance}
.g2-title-sub{color:var(--ink-400);margin-top:.12em}
.g2-lead{margin:30px 0 0;max-width:560px;font-size:18px;line-height:1.6;color:var(--ink-700);text-wrap:pretty}
.g2-lead a{color:var(--ink-900);font-weight:600;text-decoration:underline;text-decoration-color:var(--c-purple);text-underline-offset:3px}
.g2-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* Pillenstapel */
.g2-stack{display:flex;flex-direction:column;align-items:flex-start;transform:rotate(-9deg);padding:20px 0 20px 10px}
.g2-pill{position:relative;display:flex;align-items:center;gap:16px;width:min(100%,400px);height:76px;padding:0 30px 0 12px;margin-top:-10px;border-radius:99px;text-decoration:none;color:var(--ink-500);background:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.42));-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-brd);box-shadow:inset 0 2px 0 rgba(255,255,255,0.95),inset 0 -6px 14px rgba(31,45,77,0.06),0 18px 34px -18px rgba(31,45,77,0.4);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s,color .3s}
.g2-pill:first-child{margin-top:0}
.g2-pill-ic{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;color:#fff;background:radial-gradient(circle at 35% 30%,color-mix(in oklch,var(--c),white 35%),var(--c) 55%,color-mix(in oklch,var(--c),black 18%));box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 6px 16px -4px color-mix(in oklch,var(--c),transparent 30%)}
.g2-pill-ic svg{transform:rotate(-45deg);transition:transform .35s}
.g2-pill-l{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-0.02em;white-space:nowrap}
.g2 .g2-pill.is-act{color:var(--ink-900)}
.g2-pill.is-act .g2-pill-l{font-weight:700}
.g2-pill.is-act .g2-pill-ic svg{transform:rotate(0)}

/* Semester: gewaaierde kaarten */
.g2-sem{padding:70px 0 90px}
.g2-sem-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.g2-sem-num{font-size:clamp(96px,14vw,200px);letter-spacing:-0.07em;line-height:.85;margin:12px 0 0}
.g2-sem-label{margin:14px 0 0;font-size:19px;color:var(--ink-700);max-width:520px}
.g2-fan{display:flex;justify-content:center;align-items:flex-start;margin-top:56px;padding-bottom:40px}
.g2-card{position:relative;flex:none;width:260px;aspect-ratio:5/7;margin:0 -26px;padding:22px;border-radius:26px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;font:inherit;color:var(--ink-900);cursor:pointer;background:linear-gradient(150deg,color-mix(in oklch,var(--c),white 18%) 0%,color-mix(in oklch,var(--c),white 62%) 58%,rgba(255,255,255,0.55) 100%);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,0.8);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 30px 60px -30px color-mix(in oklch,var(--c),black 30%);transform:translateY(var(--y)) rotate(var(--r));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.g2-card.is-sel{transform:translateY(-14px) rotate(calc(var(--r) * .35)) scale(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 40px 70px -26px color-mix(in oklch,var(--c),black 25%)}
.g2-card-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-display);font-weight:700;font-size:15px}
.g2-card-chip{width:38px;height:28px;border-radius:7px;background:linear-gradient(135deg,rgba(255,255,255,0.95),rgba(255,255,255,0.45));box-shadow:inset 0 0 0 1px rgba(14,19,36,0.08)}
.g2-card-num{font-family:var(--font-display);font-size:96px;font-weight:800;letter-spacing:-0.06em;line-height:1}
.g2-card-band{margin:0 -22px -22px;padding:16px 22px;border-radius:0 0 25px 25px;font-family:var(--font-display);font-weight:700;font-size:16px;background:rgba(255,255,255,0.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,0.75)}
.g2-fan-cap{display:flex;gap:14px;align-items:flex-start;max-width:640px;margin:0 auto;padding:20px 24px;border-radius:22px;font-size:16px;line-height:1.6;color:var(--ink-700);animation:g2in .45s ease both}
.g2-dot{flex:none;width:10px;height:10px;border-radius:50%;margin-top:8px}
@keyframes g2in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Projecten: bento met glazen labels */
.g2-proj-sec{padding:90px 0}
.g2-sec-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:40px}
.g2-sec-aside{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.g2-sec-aside p{margin:0;font-size:17px;color:var(--ink-700);max-width:420px}
.g2-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:260px;gap:18px}
.g2-proj{position:relative;display:block;overflow:hidden;border-radius:var(--g-r);text-decoration:none;background:var(--ink-100);border:1px solid var(--g-brd);box-shadow:var(--g-sh);isolation:isolate}
.g2-proj.is-lead{grid-column:span 2;grid-row:span 2}
.g2-proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.g2-proj:hover img{transform:scale(1.05)}
.g2-proj-tint{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(14,19,36,0.35))}
.g2-proj-glass{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:20px;color:var(--ink-900);background:rgba(255,255,255,0.62);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);border:1px solid rgba(255,255,255,0.8);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9)}
.g2-proj-glass strong{font-family:var(--font-display);font-size:17px;font-weight:800;letter-spacing:-0.02em;line-height:1.2;text-wrap:balance}
.g2-proj.is-lead .g2-proj-glass{left:18px;right:18px;bottom:18px;padding:22px 24px}
.g2-proj.is-lead .g2-proj-glass strong{font-size:28px}
.g2-proj-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--ink-700)}
.g2-tag{padding:3px 10px;border-radius:99px;font-weight:700;font-size:12px;background:rgba(255,255,255,0.75);border:1px solid rgba(14,19,36,0.08)}
.g2-proj-go{display:none;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:14px}
.g2-proj.is-lead .g2-proj-go{display:inline-flex}

/* Sfeerimpressie: glazen fotokaart */
.g2-sfeer{padding:70px 0 90px}
.g2-vcard{position:relative;isolation:isolate;min-height:520px;border-radius:36px;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:44px;border:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 40px 100px -40px rgba(180,123,184,0.85),0 0 0 8px rgba(255,255,255,0.18)}
.g2-vcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.g2-vcard-tint{position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,rgba(180,123,184,0.55),rgba(127,184,212,0.18) 55%,transparent),linear-gradient(0deg,rgba(14,19,36,0.78),rgba(14,19,36,0.1) 60%)}
.g2-vcard-body{max-width:560px;color:#fff}
.g2-vcard-body h2{margin:12px 0 0;color:#fff;font-size:clamp(34px,4.2vw,58px);letter-spacing:-0.04em;line-height:1;text-wrap:balance}
.g2-vcard-body p{margin:16px 0 0;font-size:17px;line-height:1.55;color:rgba(255,255,255,0.92)}
.g2-gal .gallery>.container>.reveal:first-child,.g2-gal .gallery-head{display:none}
.g2-gal .gallery{padding-top:0}

/* Bestaande secties in glas */
.g2 .nav-glass{background:var(--g-fill-hi)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-brd);box-shadow:var(--g-sh)}
.g2 .project-card,.g2 .event-list,.g2 .form,.g2 .contact-cta,.g2 .mission-values,.g2 .gallery-tile,.g2 .about-teaser-inner{background:var(--g-fill);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-brd);box-shadow:var(--g-sh);border-radius:var(--g-r)}
.g2 .about-teaser-inner:hover{background:var(--g-fill-hi)}
.g2 .mission-values{overflow:hidden}
.g2 .value{background:transparent}
.g2 .mission-photo{border-radius:var(--g-r);overflow:hidden;border:1px solid var(--g-brd);box-shadow:var(--g-sh)}
.g2 .section h2,.g2 .about-teaser-title{letter-spacing:-0.045em}
.g2 .about-teaser-btn,.g2 .btn-primary{border-radius:99px;background:linear-gradient(180deg,rgba(43,51,80,0.92),rgba(14,19,36,0.92));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),0 14px 30px -14px rgba(14,19,36,0.6)}
.g2 .footer{background:color-mix(in oklch,var(--ink-900) 80%,transparent);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);border-top:1px solid rgba(255,255,255,0.14)}


/* Hero: zwevende glazen widgets met actuele info */
.g2-widgets{position:relative;height:580px}
.g2-w{position:absolute;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink-900);border-radius:28px;background:var(--g-fill-hi);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-brd);box-shadow:var(--g-sh);transform:rotate(var(--rot,0deg));animation:g2float 9s ease-in-out infinite;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.g2-w:hover{animation-play-state:paused;transform:rotate(0) translateY(-6px) scale(1.02);z-index:5}
@keyframes g2float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.g2-w-k{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500)}
.g2-w-photo{--rot:-4deg;left:4%;top:0;width:64%;height:390px;padding:0;overflow:hidden;isolation:isolate}
.g2-w-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.g2-w-photo-lbl{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-radius:18px;background:rgba(255,255,255,0.66);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);border:1px solid rgba(255,255,255,0.8)}
.g2-w-photo-lbl strong{font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:-0.02em}
.g2-w-event{--rot:5deg;right:0;top:56px;width:44%;padding:20px 22px;animation-delay:-3s}
.g2-w-date{display:flex;align-items:baseline;gap:8px;margin-top:4px;font-family:var(--font-display)}
.g2-w-date b{font-size:56px;font-weight:800;letter-spacing:-0.05em;line-height:1}
.g2-w-date span{font-size:18px;font-weight:700;color:var(--ink-500)}
.g2-w-event strong{font-family:var(--font-display);font-size:16px;font-weight:700;line-height:1.3;text-wrap:balance}
.g2-w-stat{--rot:3deg;left:0;bottom:40px;width:50%;padding:20px 22px;animation-delay:-6s}
.g2-w-stat b{font-family:var(--font-display);font-size:64px;font-weight:800;letter-spacing:-0.06em;line-height:1}
.g2-w-stat>span:not(.g2-w-bar){font-size:15px;color:var(--ink-700)}
.g2-w-bar{display:flex;gap:3px;height:8px;margin-top:8px}
.g2-w-bar i{border-radius:99px;min-width:8px}
.g2-w-loc{--rot:-2deg;right:6%;bottom:0;flex-direction:row;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:99px;font-size:14px;font-weight:600;animation-delay:-1.5s}
.g2-w-pin{width:12px;height:12px;border-radius:50%;background:#A6CE89;box-shadow:0 0 0 4px rgba(166,206,137,0.3)}
@media (prefers-reduced-motion:reduce){.g2-w{animation:none}}
@media (max-width:1000px){.g2-widgets{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.g2-w{position:relative;inset:auto;width:auto;transform:none;animation:none}.g2-w-photo{grid-column:1/-1;height:280px}.g2-w-loc{grid-column:1/-1;justify-self:start}}
@media (max-width:640px){.g2-widgets{grid-template-columns:minmax(0,1fr)}}

/* Previewbalk */
.g2-flag{white-space:nowrap;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:99px;font-size:13px;font-weight:600;color:var(--ink-900);background:rgba(255,255,255,0.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid rgba(255,255,255,0.85);box-shadow:0 12px 30px -14px rgba(14,19,36,0.4)}
.g2-flag a{flex:none;white-space:nowrap;padding:6px 12px;border-radius:99px;background:rgba(14,19,36,0.86);color:#fff!important;text-decoration:none}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.g2{--g-fill:rgba(255,255,255,0.9);--g-fill-hi:rgba(255,255,255,0.96)}}
@media (prefers-reduced-transparency:reduce){.g2{--g-fill:rgba(255,255,255,0.92);--g-fill-hi:rgba(255,255,255,0.97)}}

@media (max-width:1000px){
.g2-hero{padding:120px 0 60px}
.g2-hero-in,.g2-sec-head{grid-template-columns:minmax(0,1fr)}
.g2-stack{transform:none;padding:0}
.g2-pill{width:100%;height:64px}
.g2-pill-l{font-size:18px}
.g2-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
.g2-fan{flex-direction:column;align-items:center;gap:14px;padding-bottom:20px}
.g2-card{width:100%;max-width:340px;aspect-ratio:auto;min-height:200px;margin:0;transform:none}
.g2-card.is-sel{transform:none}
.g2-card-num{font-size:64px}
.g2-bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:240px}
.g2-proj.is-lead{grid-column:auto;grid-row:span 1}
.g2-proj.is-lead .g2-proj-glass strong{font-size:20px}
.g2-vcard{min-height:460px;padding:24px;flex-direction:column;align-items:flex-start;justify-content:flex-end}
}

/* Semesterkaarten: eigen patroon, stippenmatrix (1 stip = 1 student) en gekoppeld bijschrift */
.g2-card{overflow:hidden;isolation:isolate}
.g2-card-pat{position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none}
.g2-card-pat.p0{background:radial-gradient(circle,rgba(255,255,255,0.75) 1.4px,transparent 1.6px) 0 0/14px 14px}
.g2-card-pat.p1{background:repeating-linear-gradient(135deg,rgba(255,255,255,0.6) 0 2px,transparent 2px 12px)}
.g2-card-pat.p2{background:linear-gradient(rgba(255,255,255,0.55) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,rgba(255,255,255,0.55) 1px,transparent 1px) 0 0/18px 18px}
.g2-card-top{flex-direction:column;align-items:flex-start;gap:6px}
.g2-card{margin:0}
.g2-fan{gap:18px}
.g2-card-band>span:first-child{max-width:190px;text-wrap:balance}
.g2-card-top .g2-card-num{font-size:84px}
.g2-card-code{padding:6px 12px;border-radius:99px;font-family:var(--font-display);font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:color-mix(in oklch,var(--c),black 42%)}
.g2-card-dots{display:grid;grid-template-columns:repeat(var(--cols),9px);gap:5px;align-content:center;flex:1;padding:12px 0}
.g2-card-dots i{width:9px;height:9px;border-radius:50%;background:color-mix(in oklch,var(--c),black 45%);opacity:.85}
.g2-card-band{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.g2-card-pct{font-family:var(--font-display);font-size:13px;font-weight:800;color:color-mix(in oklch,var(--c),black 45%)}
.g2-card{background-color:#fff}
.g2-fan.has-sel .g2-card:not(.is-sel){filter:saturate(.4) brightness(1.06)}
.g2-fan.has-sel .g2-card:not(.is-sel) :is(.g2-card-top,.g2-card-dots,.g2-card-band){opacity:.6}
.g2-card.is-sel{outline:3px solid color-mix(in oklch,var(--c),black 30%);outline-offset:4px}
.g2-fan-cap{position:relative;display:block;max-width:660px;margin:0 auto;padding:22px 26px;border-radius:22px;color:var(--ink-700);background:color-mix(in oklch,var(--c) 20%,rgba(255,255,255,0.7));-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:2px solid color-mix(in oklch,var(--c),black 18%);box-shadow:var(--g-sh);animation:g2in .45s ease both}
.g2-fan-cap::before{content:"";position:absolute;top:-11px;left:var(--x);width:20px;height:20px;transform:translateX(-50%) rotate(45deg);background:inherit;border-left:2px solid color-mix(in oklch,var(--c),black 18%);border-top:2px solid color-mix(in oklch,var(--c),black 18%);border-radius:4px 0 0 0}
.g2-fan-cap-h{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ink-900)}
.g2-fan-cap-h b{font-size:22px;font-weight:800;color:color-mix(in oklch,var(--c),black 45%)}
.g2-fan-cap .g2-dot{margin:0;width:12px;height:12px;background:var(--c);box-shadow:0 0 0 3px color-mix(in oklch,var(--c),transparent 60%)}
.g2-fan-cap p{margin:10px 0 0;font-size:16px;line-height:1.6}
@media (max-width:640px){.g2-fan-cap::before{display:none}.g2-card-dots{display:none}}

/* Wisselende foto's */
.g2-rot{position:absolute;inset:0;z-index:-1;overflow:hidden}
.g2-rot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.2s ease,transform 6s ease-out}
.g2-rot img.is-on{opacity:1;transform:scale(1)}
.g2-rot-v{z-index:-2}
.g2-w-photo .g2-rot img{z-index:auto}
@media (prefers-reduced-motion:reduce){.g2-rot img{transition:opacity .3s}}
.g2-w-ppl b{font-family:var(--font-display);font-size:64px;font-weight:800;letter-spacing:-0.06em;line-height:1}
.g2-w-ppl span{font-size:15px;color:var(--ink-700)}
.g2-w-ppl{width:auto;min-width:200px}

/* Tekst in de kaart: teaser, volledig bij hover/focus */
.g2-card{width:280px}
.g2-card .g2-card-band{position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px 22px 18px;border-radius:0 0 25px 25px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-height:calc(100% - 72px);transition:background .35s}
.g2-card-lbl{max-width:100%;text-wrap:balance}
.g2-card-desc{margin-top:6px;font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.5;color:var(--ink-700);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.g2-card.is-sel .g2-card-band{top:72px;background:rgba(255,255,255,0.86)}
.g2-card.is-sel .g2-card-desc{-webkit-line-clamp:unset;display:block}
.g2-card.is-sel .g2-card-desc{animation:g2in .35s ease both}
.g2-card-dots{margin-bottom:120px}
@media (max-width:640px){.g2-card{width:100%}.g2-card .g2-card-band{position:relative;max-height:none;margin:12px -22px -22px;top:auto!important}.g2-card-desc{-webkit-line-clamp:unset;display:block}.g2-card-dots{margin-bottom:0}}

/* Fix: kaartbreedte past in container; geselecteerde kaart in detailstand (nummer klein, stippen weg, band dekkend onder het nummer) */
.g2-fan{padding:0 28px;box-sizing:border-box}
.g2-card{width:auto;flex:1 1 0;max-width:260px;min-width:0;aspect-ratio:5/7.5}
.g2-card-top .g2-card-num{transition:font-size .35s cubic-bezier(.2,.8,.2,1)}
.g2-card.is-sel .g2-card-top .g2-card-num{font-size:44px}
.g2-card.is-sel .g2-card-dots{visibility:hidden}
.g2-card.is-sel .g2-card-band{top:112px;max-height:none;overflow:auto;background:color-mix(in oklch,var(--c) 14%,#fff)}
.g2-card.is-sel .g2-card-desc{font-size:13.5px;line-height:1.45}
@media (max-width:640px){.g2-fan{padding:0}.g2-card{flex:none;max-width:340px;aspect-ratio:auto}.g2-card.is-sel .g2-card-top .g2-card-num{font-size:64px}.g2-card.is-sel .g2-card-band{overflow:visible}}

/* Credo: één ingetogen regel onderaan, wisselt elke paar seconden */
.g2-credo{padding:36px 0 44px}
.g2-credo-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 18px}
.g2-credo-k{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500);display:flex;align-items:center;gap:18px}
.g2-credo-k::after{content:"";width:28px;height:1px;background:var(--ink-300)}
.g2-credo-in{display:grid;justify-items:start;min-width:min(100%,360px)}
@media (max-width:640px){.g2-credo-k::after{display:none}.g2-credo-in{justify-items:center}}
.g2-credo-q{grid-area:1/1;margin:0;font-family:var(--font-display);font-size:17px;font-weight:600;font-style:italic;letter-spacing:-0.01em;color:var(--ink-700);text-align:left;opacity:0;transform:translateY(6px);transition:opacity .7s ease,transform .7s ease}
.g2-credo-q.is-on{opacity:1;transform:none}
.g2-credo-q::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--c);vertical-align:2px}