/* ============================================================ skINCI SCIEnce — website huisstijl (alle publiekspagina's) Licht parelmoerthema, navigatie links, venster-look per pagina ============================================================ */ :root{ --titel:#c2268f; --accent:#7c3aed; --inkt:#241530; --tekst:#4b3a58; --zacht:#8a7a99; --goud:#b45309; /* themakleuren per pagina (worden per pagina gezet op ) */ } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(160deg,#fdf2f7 0%,#f8f1fc 45%,#fff6ed 100%);color:var(--inkt);min-height:100vh;overflow-x:hidden;font-size:15px;line-height:1.65} /* thema-parelmoer per pagina */ body[data-thema="analyse"]{background:linear-gradient(160deg,#f6f0ff,#fdf4ff)} body[data-thema="agenda"]{background:linear-gradient(160deg,#fff4ee,#ffeef2)} body[data-thema="klanten"]{background:linear-gradient(160deg,#f7f0ff,#fdeef9)} body[data-thema="voorraad"]{background:linear-gradient(160deg,#fff8ea,#fff0e6)} body[data-thema="behandel"]{background:linear-gradient(160deg,#ecfdf8,#e9f7fd)} body[data-thema="kassa"]{background:linear-gradient(160deg,#effdf4,#e8f9ef)} body[data-thema="salonkamer"]{background:linear-gradient(160deg,#f1efff,#ece7fb)} body[data-thema="mijnsalon"]{background:linear-gradient(160deg,#fff0f6,#ffeaf2)} body[data-thema="inkijk"]{background:linear-gradient(160deg,#fffbea,#fff4d6)} body[data-thema="prijs"]{background:linear-gradient(160deg,#fdeef9,#fbe4f3)} body[data-thema="waarom"]{background:linear-gradient(160deg,#f3effc,#ece7fb)} /* themakleurparen */ .dk-analyse{--dk1:#a855f7;--dk2:#7c3aed} .dk-agenda{--dk1:#ff8a5b;--dk2:#ff5e7e} .dk-klanten{--dk1:#b06bff;--dk2:#e84cc0} .dk-voorraad{--dk1:#ffc24d;--dk2:#ff7a3c} .dk-behandel{--dk1:#3ee0bf;--dk2:#19a7d4} .dk-kassa{--dk1:#6ee7a0;--dk2:#15b364} .dk-salonkamer{--dk1:#8a7bff;--dk2:#6a4bd6} .dk-mijnsalon{--dk1:#ff8fc0;--dk2:#ff5e9e} .dk-inkijk{--dk1:#fbbf24;--dk2:#f59e0b} .dk-prijs{--dk1:#e84cc0;--dk2:#c2268f} .dk-waarom{--dk1:#b8a6e8;--dk2:#6a4bd6} /* zachte pastelgloed */ #gloed{position:fixed;inset:0;z-index:0;pointer-events:none} #gloed i{position:absolute;width:220px;height:220px;border-radius:50%;filter:blur(60px);opacity:.3;animation:gloei 9s ease-in-out infinite} @keyframes gloei{0%,100%{opacity:.15}50%{opacity:.35}} /* ===== vaste navigatie links (desktop) ===== */ #rail{position:fixed;left:0;top:56px;bottom:0;width:100px;z-index:56;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none} @media(max-height:900px){#rail{gap:9px}.rorb{width:42px;height:42px;font-size:18px}} @media(max-height:700px){#rail{gap:6px}.rorb{width:36px;height:36px;font-size:15px}} .ritem{position:relative;pointer-events:auto} .rorb{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;cursor:pointer;font-size:21px;border:2px solid rgba(255,255,255,.85);background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),transparent 46%),linear-gradient(135deg,var(--dk1,#b06bff),var(--dk2,#e84cc0));box-shadow:0 6px 20px -4px var(--dk1,#b06bff);transition:transform .22s cubic-bezier(.34,1.32,.5,1);text-decoration:none} .ritem:hover .rorb,.ritem:focus-within .rorb{transform:scale(1.16)} .ritem.actief .rorb{outline:3px solid #fff;outline-offset:2px} .rfly{position:absolute;left:100%;top:50%;transform:translateY(-50%) translateX(-8px);opacity:0;pointer-events:none;transition:opacity .2s .28s,transform .2s .28s;display:flex;flex-direction:column;gap:6px;min-width:200px;z-index:6;padding-left:16px} .ritem:hover .rfly,.ritem:focus-within .rfly{opacity:1;pointer-events:auto;transform:translateY(-50%);transition-delay:0s,0s} .rfly a{display:block;background:#fff;border-radius:18px;padding:8px 15px;font-size:12.5px;font-weight:700;color:#41224f;box-shadow:0 8px 24px rgba(58,35,80,.16);white-space:nowrap;text-decoration:none;border:1px solid rgba(124,58,237,.08);transition:transform .15s} .rfly a:hover{transform:translateX(3px)} .rfly a.hoofd{background:linear-gradient(135deg,var(--dk1),var(--dk2));color:#fff;border:none;font-size:13px} .rlogo{pointer-events:auto;position:fixed;top:14px;left:16px;font-size:15px;font-weight:800;text-decoration:none;color:var(--inkt);z-index:57} .rlogo b{color:#ff5e7e} /* ===== mobiele navigatie: bloemknop onderaan ===== */ #bloemknop{display:none;position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:58;width:58px;height:58px;border-radius:50%;border:2px solid #fff;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),transparent 46%),linear-gradient(135deg,#b06bff,#e84cc0);box-shadow:0 10px 30px rgba(232,76,192,.45);font-size:24px;cursor:pointer;color:#fff} #mnav{display:none;position:fixed;inset:0;z-index:57;background:rgba(253,242,247,.97);backdrop-filter:blur(8px);overflow-y:auto;padding:56px 22px calc(110px + env(safe-area-inset-bottom))} #mnav.open{display:block;animation:ovIn .25s ease} #mnav .mkop{text-align:center;font-weight:800;font-size:16px;margin-bottom:20px;color:var(--titel)} #mnav .morb{display:flex;align-items:center;gap:13px;background:#fff;border-radius:16px;padding:12px 14px;margin-bottom:10px;text-decoration:none;color:var(--inkt);box-shadow:0 4px 16px rgba(58,35,80,.08);border:1px solid rgba(124,58,237,.08)} #mnav .morb .bol{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:17px;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),transparent 46%),linear-gradient(135deg,var(--dk1),var(--dk2))} #mnav .morb b{font-size:14.5px} #mnav .morb span{display:block;font-size:11px;color:var(--zacht)} @media(max-width:899px){#rail{display:none}#bloemknop{display:block}} @media(min-width:900px){main.pagina-inhoud,#hero,#overzicht,#drie,#ontdek,#slot,.uniekband,footer.voet{margin-left:100px}} /* ===== paginakaart (venster-look van het platform) ===== */ main.pagina-inhoud{position:relative;z-index:2;max-width:1120px;margin-top:22px;margin-bottom:50px;margin-right:auto;padding:0 16px} @media(min-width:900px){main.pagina-inhoud{margin-left:max(100px,calc((100vw - 1120px)/2))}} .pg-kaart{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 70px rgba(20,8,35,.14);animation:vstIn .3s cubic-bezier(.34,1.32,.5,1)} @keyframes vstIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} @keyframes ovIn{from{opacity:0}to{opacity:1}} .pg-bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;padding:13px 16px;color:#fff;font-size:15px;font-weight:800;background:linear-gradient(135deg,var(--dk1,#b06bff),var(--dk2,#e84cc0))} .pg-bar .pt{flex:1;display:flex;align-items:center;gap:10px} .pg-bar.donkertekst{color:#3a2350} .pg-q{width:22px;height:22px;border-radius:50%;border:none;background:rgba(255,255,255,.28);color:inherit;font-weight:800;font-size:12.5px;cursor:pointer;flex:none} .pg-qpop{position:absolute;top:50px;right:14px;z-index:11;max-width:400px;max-height:64vh;overflow:auto;background:#fff;color:var(--inkt);border-radius:14px;box-shadow:0 18px 50px rgba(20,8,35,.35);padding:16px 18px;font-size:13.5px;line-height:1.6;white-space:pre-line;display:none;border:1px solid rgba(124,58,237,.18);font-weight:400} .pg-qpop.open{display:block} .pg-body{padding:34px clamp(20px,4vw,48px) 50px;color:var(--tekst)} /* ===== typografie & bouwstenen ===== */ .pg-body h1,.pg-body h2{color:var(--titel);font-size:clamp(21px,2.6vw,27px);line-height:1.25;margin:34px 0 10px;font-weight:800} .pg-body h1{font-size:clamp(24px,3vw,31px);margin-top:0} .pg-body h3{font-size:17px;margin:24px 0 8px;color:var(--accent);font-weight:800} .pg-body p{margin:0 0 14px} .pg-body p.intro{font-size:16.5px;color:#3b2a48} .kicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--accent);background:rgba(124,58,237,.09);border-radius:14px;padding:5px 13px;margin-bottom:10px;text-transform:uppercase;scroll-margin-top:70px} .pg-body h3{scroll-margin-top:70px} .kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:18px 0 22px} .kaart{background:#fff;border:1px solid rgba(124,58,237,.13);border-radius:15px;padding:17px 16px;box-shadow:0 4px 18px rgba(58,35,80,.06)} .kaart b{display:block;font-size:14.5px;margin-bottom:6px;color:var(--inkt)} .kaart p{font-size:13.2px;line-height:1.55;margin:0;color:#5a4868} .kaart .ikoon{font-size:21px;display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,rgba(176,107,255,.14),rgba(232,76,192,.14));margin-bottom:9px} .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0 22px} @media(max-width:700px){.duo{grid-template-columns:1fr}} .paneel{border-radius:15px;padding:18px;font-size:13.5px;line-height:1.6} .paneel h4{font-size:12px;letter-spacing:.12em;margin-bottom:10px;text-transform:uppercase} .paneel ul{list-style:none} .paneel li{padding:4px 0;display:flex;gap:8px} .paneel-koud{background:#f4f1f8;border:1px solid #e4dced;color:#4b3a58} .paneel-koud h4{color:#8a7a99} .paneel-koud li::before{content:"▪";color:#a89ab8} .paneel-warm{background:linear-gradient(150deg,#fdf0f9,#f6ecff);border:1px solid #eed4ec;color:#41224f} .paneel-warm h4{color:var(--titel)} .paneel-warm li::before{content:"✦";color:var(--titel)} .citaat{border-left:4px solid var(--titel);background:linear-gradient(90deg,rgba(194,38,143,.06),transparent);padding:14px 18px;border-radius:0 12px 12px 0;font-size:15px;font-style:italic;color:#41224f;margin:18px 0} .stappen{counter-reset:st;display:flex;flex-direction:column;gap:12px;margin:16px 0 22px} .stap{counter-increment:st;display:flex;gap:14px;background:#fff;border:1px solid rgba(124,58,237,.13);border-radius:14px;padding:15px 16px} .stap::before{content:counter(st);flex:none;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--dk1,#b06bff),var(--dk2,#e84cc0));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px} .stap b{display:block;margin-bottom:4px;font-size:14.5px;color:var(--inkt)} .stap p{font-size:13.2px;margin:0;color:#5a4868} .badge{display:inline-block;font-size:11.5px;font-weight:800;border-radius:12px;padding:4px 11px;margin:2px 4px 2px 0} .badge-ok{background:#dcfce7;color:#15803d} .badge-info{background:#ede9fe;color:#6d28d9} .badge-warn{background:#fef3c7;color:#b45309} .badge-rood{background:#fee2e2;color:#b91c1c} .knop{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:32px;font-weight:800;font-size:15px;text-decoration:none;cursor:pointer;border:none;transition:transform .18s,box-shadow .18s} .knop:hover{transform:translateY(-2px)} .knop-paars{background:linear-gradient(135deg,#b06bff,#e84cc0);color:#fff;box-shadow:0 10px 30px rgba(232,76,192,.35)} .knop-goud{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#3a2350;box-shadow:0 10px 30px rgba(245,158,11,.3)} .knop-licht{background:#f4effb;color:#6d28d9;border:1px solid #e2d6f5} .terugcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid rgba(124,58,237,.12)} details.faq{background:#fff;border:1px solid rgba(124,58,237,.14);border-radius:13px;margin-bottom:10px;overflow:hidden} details.faq summary{cursor:pointer;padding:15px 18px;font-weight:700;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;gap:12px;color:var(--inkt)} details.faq summary::after{content:"+";color:var(--accent);font-weight:800;font-size:18px} details.faq[open] summary::after{content:"–"} details.faq .fa{padding:0 18px 16px;font-size:13.8px;line-height:1.65;color:#4b3a58} table.vgl{width:100%;border-collapse:collapse;margin:16px 0 22px;font-size:13.5px} table.vgl th,table.vgl td{padding:11px 12px;border-bottom:1px solid #eee3f2;text-align:left;vertical-align:top} table.vgl th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8a7a99} table.vgl td:nth-child(2){color:#8a7a99} table.vgl td:nth-child(3){font-weight:700;color:#41224f} table.vgl tr.hoog td{background:linear-gradient(90deg,rgba(251,191,36,.10),rgba(232,76,192,.07))} .ja{color:#15803d;font-weight:800}.nee{color:#b91c1c;font-weight:800} /* rapportdemo */ .rd-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0} .rd-knoppen button{border:1.5px solid #e2d6f5;background:#fff;color:#6d28d9;font-weight:700;font-size:13px;border-radius:20px;padding:9px 16px;cursor:pointer} .rd-knoppen button.aan{background:linear-gradient(135deg,#b06bff,#e84cc0);color:#fff;border-color:transparent} .rd-doc{background:#fff;border:1px solid #eadcf3;border-radius:16px;padding:22px;box-shadow:0 10px 34px rgba(58,35,80,.09)} .rd-sec{border:1px dashed #e4d5f0;border-radius:12px;padding:13px 15px;margin-bottom:10px;font-size:13.3px;line-height:1.55;color:#4b3a58} .rd-sec .rd-h{font-weight:800;color:var(--inkt);margin-bottom:5px;font-size:13.5px} .rd-t2,.rd-t3{display:none} .rd-doc.n2 .rd-t2{display:block} .rd-doc.n3 .rd-t2,.rd-doc.n3 .rd-t3{display:block} /* login-kaart inkijksalon */ .loginkaart{max-width:430px;margin:20px auto;background:#fff;border-radius:18px;border:1.5px solid rgba(245,158,11,.4);box-shadow:0 16px 50px rgba(180,120,10,.15);padding:26px} .loginkaart .veld{background:#faf6ef;border:1px solid #eadfc8;border-radius:11px;padding:12px 15px;font-size:15px;font-weight:700;color:#41224f;margin-bottom:11px;display:flex;justify-content:space-between;gap:10px} .loginkaart .veld span{color:#8a7a99;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;align-self:center} /* schermbeelden uit het echte platform */ figure.beeld{margin:22px 0;border-radius:16px;overflow:hidden;border:1px solid rgba(124,58,237,.14);box-shadow:0 14px 44px rgba(58,35,80,.13);background:#fff} figure.beeld .beeld-top{display:flex;gap:6px;align-items:center;padding:9px 14px;background:linear-gradient(135deg,#f7f0fa,#f1e9f7);border-bottom:1px solid rgba(124,58,237,.1)} figure.beeld .beeld-top i{width:10px;height:10px;border-radius:50%;background:#e6d9ef} figure.beeld .beeld-top i:first-child{background:#ff8a8a} figure.beeld .beeld-top i:nth-child(2){background:#ffd166} figure.beeld .beeld-top i:nth-child(3){background:#8fe3a5} figure.beeld .beeld-top span{margin-left:8px;font-size:11.5px;color:#8a7a99;font-weight:600} figure.beeld img{display:block;width:100%;height:auto} figure.beeld figcaption{padding:10px 16px;font-size:12.5px;color:#8a7a99;border-top:1px solid rgba(124,58,237,.08)} figure.beeld.leeg img{display:none} figure.beeld.leeg::after{content:"Schermbeeld uit het echte platform volgt hier";display:block;padding:52px 20px;text-align:center;color:#b7a8c6;font-size:13px;font-weight:600;background:repeating-linear-gradient(45deg,#faf6fd,#faf6fd 12px,#f5eefb 12px,#f5eefb 24px)} /* ===== homepage ===== */ #hero{position:relative;z-index:2;max-width:1080px;margin-left:auto;margin-right:auto;padding:64px 28px 30px;text-align:center} .hero-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--titel);border:1px solid rgba(194,38,143,.3);background:rgba(194,38,143,.06);border-radius:20px;padding:7px 18px;margin-bottom:22px} #hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1.12;font-weight:800;max-width:900px;margin:0 auto 18px;color:var(--inkt)} #hero h1 .grad{background:linear-gradient(135deg,#c2268f,#e84cc0 45%,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent} #hero .sub{font-size:clamp(15px,1.8vw,18.5px);line-height:1.65;color:#5a4868;max-width:780px;margin:0 auto 14px} #hero .niche{font-size:14.5px;line-height:1.6;color:var(--titel);font-weight:700;max-width:720px;margin:0 auto 30px} .cta-rij{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:10px} .hero-mini{font-size:12.5px;color:#8a7a99} #overzicht{position:relative;z-index:2;max-width:1240px;margin-left:auto;margin-right:auto;padding:34px 26px 40px} .ovz-titel{text-align:center;margin-bottom:6px;font-size:13px;font-weight:800;letter-spacing:.2em;color:#8a7a99} .ovz-sub{text-align:center;font-size:clamp(19px,2.4vw,26px);font-weight:800;margin-bottom:8px;color:var(--inkt)} .ovz-hint{text-align:center;font-size:13.5px;color:#8a7a99;margin-bottom:30px} .ovz-hint b{color:var(--titel)} .kast{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px} .deur{position:relative;display:block;border-radius:22px;padding:20px 20px 16px;cursor:pointer;background:#fff;border:1.5px solid rgba(124,58,237,.10);box-shadow:0 6px 24px rgba(58,35,80,.07);transition:transform .25s cubic-bezier(.34,1.32,.5,1),border-color .25s,box-shadow .25s;text-decoration:none;color:inherit} /* hoofdlink van de kaart: gestrekt over de hele kaart, sectielinks liggen erboven */ .deur-hoofd{display:block;text-decoration:none;color:inherit} .deur-hoofd::after{content:"";position:absolute;inset:0;border-radius:22px;z-index:1} .deur:hover,.deur:focus-visible{transform:translateY(-5px);border-color:var(--dk1,#e84cc0);box-shadow:0 18px 46px rgba(58,35,80,.14),0 0 26px -10px var(--dk1,#e84cc0)} .deur-kop{display:flex;align-items:center;gap:13px;margin-bottom:10px} .orb{position:relative;width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:19px;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),transparent 44%),linear-gradient(135deg,var(--dk1,#b06bff),var(--dk2,#e84cc0));box-shadow:0 4px 16px -2px var(--dk1,#b06bff);transition:transform .3s} .deur:hover .orb{transform:scale(1.12)} .deur-naam{font-size:16.5px;font-weight:800;color:var(--inkt)} .deur-tag{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--dk2,#e84cc0);text-transform:uppercase} .deur-uniek .deur-tag{color:#b45309} .deur-uniek{border-color:rgba(245,158,11,.35)} .kort{font-size:13px;line-height:1.55;color:#5a4868;margin-bottom:12px} .secs{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:7px;opacity:.5;transform:translateY(3px);transition:opacity .3s,transform .3s;padding-bottom:6px} .deur:hover .secs,.deur:focus-visible .secs{opacity:1;transform:none} .secs a{background:#f8f3fd;color:#6d28d9;border:1px solid #eadffa;border-radius:15px;padding:6px 12px;font-size:12px;font-weight:700;text-decoration:none;transition:background .15s,color .15s;position:relative;z-index:3} .secs a:hover{background:linear-gradient(135deg,var(--dk1),var(--dk2));color:#fff;border-color:transparent} .deur-voet{position:absolute;right:16px;bottom:13px;font-size:12px;font-weight:800;color:var(--dk2,#e84cc0);opacity:0;transform:translateX(-6px);transition:all .3s} .deur:hover .deur-voet{opacity:1;transform:none} @media(max-width:899px){.secs{opacity:1;transform:none}} /* ===== homepage: drie evenwaardige blokken ===== */ #drie{max-width:1180px;margin-left:auto;margin-right:auto;padding:38px 24px 6px;position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:920px){#drie{grid-template-columns:1fr;max-width:640px}} .blok{background:#fff;border-radius:24px;padding:30px 26px 24px;box-shadow:0 14px 44px rgba(58,35,80,.09);border-top:6px solid;border-image:linear-gradient(90deg,var(--dk1),var(--dk2)) 1;position:relative;display:flex;flex-direction:column} .blok .bico{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:25px;margin-bottom:14px;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),transparent 46%),linear-gradient(135deg,var(--dk1),var(--dk2));box-shadow:0 8px 22px -4px var(--dk1)} .blok .btag{font-size:11px;font-weight:800;letter-spacing:.15em;color:var(--dk2);text-transform:uppercase;margin-bottom:6px} .blok h2{font-size:20.5px;line-height:1.25;font-weight:800;margin-bottom:12px;color:var(--inkt)} .blok ul{list-style:none;margin-bottom:14px} .blok li{padding:5px 0;display:flex;gap:9px;color:var(--tekst);font-size:14.2px;line-height:1.5} .blok li::before{content:"✦";color:var(--dk2);font-size:11px;margin-top:4px;flex:none} .blok li b{color:var(--inkt)} .blok .slotzin{margin-top:auto;font-weight:800;color:var(--titel);font-size:14.5px;border-top:1px solid rgba(124,58,237,.1);padding-top:13px} .blok .plink{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-weight:800;font-size:13.5px;color:var(--dk2);text-decoration:none} .uniekband{max-width:1180px;margin:20px auto 0;padding:0 24px;position:relative;z-index:2} .uniekband>div{display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(90deg,rgba(124,58,237,.08),rgba(232,76,192,.07));border:1px dashed rgba(124,58,237,.32);border-radius:16px;padding:15px 20px;font-weight:800;color:#41224f;font-size:clamp(14px,1.7vw,16.5px);text-align:center} .uniekband .wb{font-size:24px} /* ===== homepage: ontdek-strip met bollen ===== */ #ontdek{max-width:1060px;margin-left:auto;margin-right:auto;padding:40px 24px 8px;text-align:center;position:relative;z-index:2} #ontdek h3{font-size:clamp(19px,2.3vw,24px);font-weight:800;margin-bottom:5px;color:var(--inkt)} #ontdek .hint{font-size:13px;color:var(--zacht);margin-bottom:22px} .bollen{display:flex;flex-wrap:wrap;gap:18px;justify-content:center} .bol{position:relative;width:104px;text-decoration:none;color:var(--inkt)} .bol .orb{width:58px;height:58px;margin:0 auto 8px;font-size:24px;border:2px solid rgba(255,255,255,.85)} .bol:hover .orb{transform:scale(1.16)} .bol>span:last-child{display:block;font-size:12.5px;font-weight:700;line-height:1.3} .bol .fly{position:absolute;left:50%;bottom:100%;transform:translateX(-50%) translateY(6px);opacity:0;pointer-events:none;transition:.22s;background:#fff;border-radius:14px;box-shadow:0 12px 34px rgba(58,35,80,.2);padding:10px 14px;font-size:12px;font-weight:600;color:#5a4868;width:210px;z-index:5;display:block} .bol:hover .fly{opacity:1;transform:translateX(-50%) translateY(-6px)} /* ===== homepage: slotkader ===== */ #slot{max-width:760px;margin-left:auto;margin-right:auto;padding:36px 24px 26px;text-align:center;position:relative;z-index:2} #slot .kader{background:linear-gradient(150deg,#fff,#fdf4fa);border:1.5px solid rgba(232,76,192,.25);border-radius:26px;padding:32px 28px;box-shadow:0 16px 50px rgba(58,35,80,.1)} #slot h3{font-size:clamp(21px,2.6vw,26px);font-weight:800;margin-bottom:8px;color:var(--inkt)} #slot p{color:var(--tekst);margin-bottom:18px} .badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px} .badges span{font-size:11.5px;font-weight:800;border-radius:12px;padding:5px 12px;background:#ede9fe;color:#6d28d9} /* ===== footer ===== */ footer.voet{position:relative;z-index:2;text-align:center;padding:26px 20px 100px;color:#8a7a99;font-size:12.5px;line-height:1.9} footer.voet a{color:#6d28d9;text-decoration:none;margin:0 7px;white-space:nowrap} @media(min-width:900px){footer.voet{padding-bottom:46px}}