/* SmartHub 2026 - blokken van de overpagina
 *
 * Overgenomen uit concept/paginas/over.html met haal-css-vacatures.py:
 * de hero met zoekbalk, de rail met verse vacatures, het filterpaneel, de
 * resultatenlijst en de alertband.
 *
 * Alles is gescopet naar .sh-sectie, zodat het niets buiten onze secties raakt.
 */

@keyframes merkbalk {to{background-position:-220% 0}}

@keyframes panelIn {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@keyframes motorDraai {to{transform:rotate(360deg)}}

.sh-sectie .manifest {background:linear-gradient(150deg,var(--roze),var(--paars) 70%);color:#fff;text-align:center;padding:110px 0 120px;overflow:hidden;position:relative}

.sh-sectie .manifest .kicker {color:#fff}

.sh-sectie .manifest .kicker::before {background:#fff}

.sh-sectie .manifest h2 {max-width:960px;margin:0 auto;font-size:clamp(1.95rem,4.3vw,3.3rem)}

.sh-sectie .manifest h2 em {font-style:normal;color:var(--roos)}

.sh-sectie .manifest .site {margin-top:52px;font-weight:900;letter-spacing:.3em;font-size:.95rem;color:rgba(255,255,255,.65)}

.sh-sectie .programmas .optie-chip, .sh-sectie .manifest .optie-chip, .sh-sectie .portaal .optie-chip {position:absolute;right:20px;bottom:16px;font-size:.68rem;letter-spacing:.06em;border:1.5px dashed rgba(255,255,255,.45);color:rgba(255,255,255,.75);padding:7px 13px;border-radius:var(--pill);z-index:3}

.sh-sectie .inhetkort {background:#fff;border-radius:calc(var(--radius) + 4px);margin-top:-56px;position:relative;z-index:3;box-shadow:var(--shadow-zwaar);overflow:hidden;display:grid;grid-template-columns:1.35fr .85fr}

.sh-sectie .inhetkort::before {content:"";position:absolute;left:0;top:0;right:0;height:6px;background:linear-gradient(90deg,var(--paars),var(--roze) 40%,var(--roos) 70%,var(--paars));background-size:220% 100%;animation:merkbalk 9s linear infinite}

@media(prefers-reduced-motion:reduce) {
	.sh-sectie .inhetkort::before {animation:none}
}

.sh-sectie .kort-tekst {padding:40px 44px 36px}

.sh-sectie .kort-tekst p.def {font-size:1.1rem;line-height:1.68;margin-top:12px}

.sh-sectie .kort-tekst p.def b {color:var(--paars)}

.sh-sectie .kort-feiten {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;max-width:520px}

.sh-sectie .kort-feiten span {display:inline-flex;gap:8px;align-items:center;font-size:.8rem;font-weight:800;color:var(--paars);border:1px solid var(--lijn);border-radius:999px;padding:9px 15px;background:var(--veld);transition:transform .18s ease,background .18s,border-color .18s;cursor:default}

.sh-sectie .kort-feiten span:hover {transform:translateY(-3px);background:var(--roze-08);border-color:var(--roze)}

@media(max-width:520px) {
	.sh-sectie .kort-feiten {grid-template-columns:1fr}
}

.sh-sectie .kort-feiten svg {color:var(--roze);flex:none}

.sh-sectie .bijgewerkt {margin-top:18px;font-size:.75rem;color:var(--steen)}

.sh-sectie .kort-beeld {position:relative;min-height:100%}

.sh-sectie .kort-beeld .foto {position:absolute;inset:0;border-radius:0;aspect-ratio:auto;box-shadow:none}

.sh-sectie .kort-beeld .foto .slot {border-radius:0}

@media(max-width:900px) {
	.sh-sectie .inhetkort {grid-template-columns:1fr}
	.sh-sectie .kort-beeld {min-height:190px}
	.sh-sectie .kort-tekst {padding:30px 26px 28px}
}

.sh-sectie .circle-blok {display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:56px;align-items:center;margin-top:52px}

.sh-sectie .circle-svg {width:100%;max-width:460px;margin-inline:auto}

.sh-sectie .circle-svg .ring {cursor:pointer;transition:opacity .25s,transform .25s;transform-origin:230px 230px}

.sh-sectie .circle-svg .ring:hover {transform:scale(1.02)}

.sh-sectie .circle-svg .ring:focus-visible {outline:none}

.sh-sectie .circle-svg .ring:focus-visible circle {stroke:#F6A9D2;stroke-width:4}

.sh-sectie .circle-svg .ring circle {transition:fill .25s,stroke .25s}

.sh-sectie .circle-svg .ring text {font-family:Inter,sans-serif;font-weight:900;letter-spacing:.12em;text-transform:uppercase;fill:#fff;pointer-events:none}

.sh-sectie .circle-svg .ring.dim {opacity:.35}

.sh-sectie .circle-paneel {display:none}

.sh-sectie .circle-paneel.actief {display:block;animation:panelIn .4s ease}

.sh-sectie .circle-paneel .kicker {color:var(--roze)}

.sh-sectie .circle-paneel h3 {font-size:1.7rem;margin-top:6px}

.sh-sectie .circle-paneel p {margin-top:14px;color:var(--steen);line-height:1.7}

.sh-sectie .circle-paneel .quote {margin-top:30px;padding:20px 24px;border-left:4px solid var(--roze);background:var(--roze-08);border-radius:0 14px 14px 0;font-weight:800;font-size:1.02rem;line-height:1.55}

@media(max-width:900px) {
	.sh-sectie .circle-blok {grid-template-columns:1fr;gap:28px}
	.sh-sectie .circle-svg {max-width:340px}
}

.sh-sectie .mijlpalen {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;counter-reset:mijl}

.sh-sectie .mijlpaal {background:#fff;border:1px solid var(--lijn);border-radius:calc(var(--radius) + 4px);overflow:hidden;display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease,border-color .22s}

.sh-sectie .mijlpaal:hover {transform:translateY(-4px);box-shadow:var(--shadow-zwaar)}

.sh-sectie a.mijlpaal:hover {transform:translateY(-6px);border-color:var(--roze)}

.sh-sectie a.mijlpaal .pijltekst {transition:color .2s}

.sh-sectie a.mijlpaal:hover .pijltekst {color:var(--roze)!important}

.sh-sectie .mijlpaal .foto {height:150px;border-radius:0}

.sh-sectie .mijlpaal .foto .slot {border-radius:0}

.sh-sectie .mijlpaal .body {padding:26px 28px 30px;display:flex;flex-direction:column;gap:10px;flex:1}

.sh-sectie .mijlpaal .stapje {font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--roze)}

.sh-sectie .mijlpaal h3 {font-size:1.18rem}

.sh-sectie .mijlpaal p {color:var(--steen);font-size:.93rem;line-height:1.65}

@media(max-width:900px) {
	.sh-sectie .mijlpalen {grid-template-columns:1fr}
}

.sh-sectie .motor-blok {display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:56px;align-items:center;margin-top:52px}

.sh-sectie .motor-svg {width:100%;max-width:520px;margin-inline:auto}

.sh-sectie .motor-svg .knoop {cursor:pointer;transition:transform .2s ease}

.sh-sectie .motor-svg .knoop:hover {transform:scale(1.05)}

.sh-sectie .motor-svg .knoop:focus-visible {outline:none}

.sh-sectie .motor-svg .knoop:focus-visible circle.vlak {stroke-width:5}

.sh-sectie .motor-svg .knoop circle.vlak {transition:fill .25s,stroke-width .25s}

.sh-sectie .motor-svg .knoop text {font-family:Inter,sans-serif;font-weight:900;fill:#fff;pointer-events:none}

.sh-sectie .motor-svg .knoop.actief circle.vlak {stroke-width:5}

.sh-sectie .motor-as {transform-origin:260px 260px;animation:motorDraai 26s linear infinite}

@media(prefers-reduced-motion:reduce) {
	.sh-sectie .motor-as {animation:none}
}

.sh-sectie .motor-paneel {display:none}

.sh-sectie .motor-paneel.actief {display:block;animation:panelIn .4s ease}

.sh-sectie .motor-paneel h3 {font-size:1.5rem}

.sh-sectie .motor-paneel p {margin-top:12px;color:var(--steen);line-height:1.7}

.sh-sectie .motor-paneel ul {margin-top:14px;display:flex;flex-direction:column;gap:9px}

.sh-sectie .motor-paneel li {display:flex;gap:10px;font-size:.94rem;color:var(--steen)}

.sh-sectie .motor-paneel li::before {content:"";width:7px;height:7px;border-radius:50%;background:var(--roze);margin-top:7px;flex:none}

@media(max-width:900px) {
	.sh-sectie .motor-blok {grid-template-columns:1fr;gap:28px}
	.sh-sectie .motor-svg {max-width:380px}
}

.sh-sectie .pijlers {display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}

.sh-sectie .pijler {background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:8px;transition:transform .22s ease,box-shadow .22s ease}

.sh-sectie .pijler:hover {transform:translateY(-5px);box-shadow:var(--shadow-zwaar)}

.sh-sectie .pijler .ic {transition:background .22s,color .22s}

.sh-sectie .pijler:hover .ic {background:var(--roze);color:#fff}

.sh-sectie .pijler b {font-size:.98rem}

.sh-sectie .pijler span {font-size:.85rem;color:var(--steen);line-height:1.55}

.sh-sectie .pijler .ic {width:42px;height:42px;border-radius:12px;background:var(--roze-08);color:var(--roze);display:grid;place-items:center;margin-bottom:4px}

.sh-sectie .pijler .ic svg {width:22px;height:22px}

@media(max-width:900px) {
	.sh-sectie .pijlers {grid-template-columns:1fr 1fr}
}

@media(max-width:560px) {
	.sh-sectie .pijlers {grid-template-columns:1fr}
}

.sh-sectie .merkbaar {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}

.sh-sectie .merk-kaart {background:var(--paars);color:#fff;border-radius:calc(var(--radius) + 4px);padding:34px 32px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;transition:transform .22s ease,box-shadow .22s ease}

.sh-sectie .merk-kaart::after {content:"";position:absolute;right:-70px;bottom:-70px;width:180px;height:180px;border-radius:50%;border:26px solid rgba(255,255,255,.08);transition:transform .35s ease}

.sh-sectie .merk-kaart:hover {transform:translateY(-6px);box-shadow:var(--shadow-zwaar)}

.sh-sectie .merk-kaart:hover::after {transform:scale(1.25)}

.sh-sectie .merk-kaart .nr {transition:opacity .3s,transform .3s}

.sh-sectie .merk-kaart:hover .nr {opacity:.4;transform:scale(1.08)}

.sh-sectie .merk-kaart:nth-child(2) {background:var(--roze)}

.sh-sectie .merk-kaart:nth-child(3) {background:var(--ink)}

.sh-sectie .merk-kaart .nr {font-size:3.4rem;font-weight:900;opacity:.22;line-height:1;position:absolute;right:22px;top:16px}

.sh-sectie .merk-kaart h3 {color:#fff;font-size:1.3rem;max-width:80%}

.sh-sectie .merk-kaart p {color:rgba(255,255,255,.82);font-size:.93rem;line-height:1.65}

@media(max-width:900px) {
	.sh-sectie .merkbaar {grid-template-columns:1fr}
}

.sh-sectie .team-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:48px}

.sh-sectie .teamlid {background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden;text-align:center;transition:transform .22s ease,box-shadow .22s ease,border-color .22s}

.sh-sectie .teamlid:hover {transform:translateY(-4px);box-shadow:var(--shadow-zwaar);border-color:var(--roze)}

.sh-sectie .teamlid .foto {width:100%;height:170px;border-radius:0}

.sh-sectie .teamlid .foto .slot {border-radius:0}

.sh-sectie .teamlid .body {padding:16px 14px 20px}

.sh-sectie .teamlid b {display:block;font-size:.95rem}

.sh-sectie .teamlid span {font-size:.8rem;color:var(--steen)}

@media(max-width:900px) {
	.sh-sectie .team-grid {grid-template-columns:1fr 1fr}
}

.sh-sectie .manifest {background:var(--ink);color:#fff;position:relative;overflow:hidden}

.sh-sectie .manifest .regel {display:block;font-weight:900;text-transform:uppercase;font-size:clamp(1.7rem,4.6vw,3.4rem);line-height:1.14;letter-spacing:-.01em;opacity:.14;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}

.sh-sectie .manifest .regel.aan {opacity:1;transform:none}

.sh-sectie .manifest .regel .rz {color:var(--roos)}

.sh-sectie .manifest .wrap {max-width:960px}

@media(prefers-reduced-motion:reduce) {
	.sh-sectie .manifest .regel {opacity:1;transform:none}
}