/* Toestellen: iPhone 15 Pro (.iphone) en MacBook Pro (.scherm). Alle maten schalen mee: iPhone in cqw van de toesteldbreedte, laptop in --u (1 punt van een scherm van 1512 punten breed). */

/* ---------- iPhone 15 Pro: 70,6 x 146,6 mm, rand rond het scherm 3,3 procent ---------- */
.iphone{position:relative;width:min(290px,64%);aspect-ratio:70.6/146.6;container-type:inline-size;isolation:isolate;color:#0A102E;flex:none}
.iphone::after{content:"";position:absolute;z-index:-1;left:7%;right:7%;bottom:-2.6cqw;height:7cqw;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(10,16,46,.42),rgba(10,16,46,0));filter:blur(1.2cqw)}
/* knoppen (links: actie en volume, rechts: aan/uit) steken uit het frame */
.ip-k{position:absolute;width:1.25cqw;background:linear-gradient(90deg,#2a2c30,#8d9096 38%,#5c5f65 62%,#26282c)}
.ip-k.k0,.ip-k.k1,.ip-k.k2{left:-.8cqw;border-radius:.75cqw 0 0 .75cqw;box-shadow:-.3cqw .15cqw .55cqw rgba(10,16,46,.38),inset .15cqw 0 .15cqw rgba(255,255,255,.4)}
.ip-k.k3{right:-.8cqw;border-radius:0 .75cqw .75cqw 0;background:linear-gradient(270deg,#2a2c30,#8d9096 38%,#5c5f65 62%,#26282c);box-shadow:.3cqw .15cqw .55cqw rgba(10,16,46,.38),inset -.15cqw 0 .15cqw rgba(255,255,255,.4)}
.ip-k.k0{top:15.3%;height:3.5%}.ip-k.k1{top:21.6%;height:6.5%}.ip-k.k2{top:29.4%;height:6.5%}.ip-k.k3{top:25.7%;height:10.8%}
/* titanium rand: gepolijste afschuining, daaronder geborsteld metaal */
.ip-ti{position:absolute;inset:0;border-radius:17.6cqw;background:linear-gradient(135deg,#fbfbfc 0%,#b4b7bd 20%,#585b61 46%,#d2d5da 72%,#fdfdfd 100%);box-shadow:0 .4cqw .9cqw rgba(10,16,46,.2),0 2.8cqw 5cqw -.8cqw rgba(10,16,46,.24),0 13cqw 19cqw -7cqw rgba(10,16,46,.4)}
.ip-ti::before{content:"";position:absolute;inset:.42cqw;border-radius:17.2cqw;background:url(img/toestel/geborsteld.png) 0 0/300px auto,linear-gradient(135deg,#c3c6cb 0%,#8b8e94 24%,#53565c 52%,#8a8d93 78%,#c0c3c8 100%)}
.ip-ti::after{content:"";position:absolute;inset:.42cqw;border-radius:17.2cqw;background:linear-gradient(#17181c,#17181c) 0 5.4%/1.15cqw .34cqw no-repeat,linear-gradient(#17181c,#17181c) 100% 5.4%/1.15cqw .34cqw no-repeat,linear-gradient(#17181c,#17181c) 0 94.4%/1.15cqw .34cqw no-repeat,linear-gradient(#17181c,#17181c) 100% 94.4%/1.15cqw .34cqw no-repeat}
.ip-bz{position:absolute;inset:1.45cqw;border-radius:16.2cqw;background:#030304;box-shadow:inset 0 0 0 .2cqw rgba(255,255,255,.07),0 0 0 .18cqw rgba(0,0,0,.55)}
.ip-scherm{position:absolute;inset:3.3cqw;border-radius:13.3cqw;overflow:hidden;background:#fff;color:#0A102E}
/* iOS statusbalk */
.ip-status{position:absolute;z-index:2;top:0;left:0;right:0;height:13.4cqw;display:flex;justify-content:space-between;align-items:center;padding:0 7.6cqw 0 10.6cqw;background:#fff;font:600 4.05cqw/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;letter-spacing:-.01em;color:#0A102E}
.ip-status b{font-weight:600}
.ip-status span{display:flex;align-items:center;gap:1.1cqw}
.ip-ic{display:block;height:auto;flex:none}
.ip-eiland{position:absolute;z-index:4;top:2.6cqw;left:50%;width:29.5cqw;height:8.7cqw;margin-left:-14.75cqw;border-radius:99px;background:#000}
.ip-eiland i{position:absolute;right:2.9cqw;top:50%;width:3.7cqw;height:3.7cqw;margin-top:-1.85cqw;border-radius:50%;background:radial-gradient(circle at 50% 50%,#04050a 0 26%,#17203a 44%,#080b18 66%,#000 100%);box-shadow:0 0 0 .3cqw #07080c,inset 0 0 .5cqw rgba(110,140,255,.4)}
.ip-eiland i::after{content:"";position:absolute;left:25%;top:19%;width:20%;height:20%;border-radius:50%;background:rgba(170,195,255,.75)}
.ip-eiland::before{content:"";position:absolute;left:5.2cqw;top:50%;width:1cqw;height:1cqw;margin-top:-.5cqw;border-radius:50%;background:#0b0d12}
.ip-home{position:absolute;z-index:3;left:50%;bottom:1.7cqw;width:32cqw;height:1.2cqw;margin-left:-16cqw;border-radius:99px;background:rgba(0,0,0,.88)}
.ip-glas{position:absolute;z-index:5;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 18%,rgba(255,255,255,0) 52%,rgba(255,255,255,.07) 58%,rgba(255,255,255,0) 66%);box-shadow:inset 0 0 0 .14cqw rgba(0,0,0,.2)}
/* echte schermafbeelding in de telefoon, nooit uitgerekt en nooit afgesneden */
.ip-slides,.bx-scr{position:absolute;inset:13.4cqw 0 0;background:#fff}
.ip-slides img,.bx-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:0;transition:opacity .3s ease}
.ip-slides img.on,.bx-scr img.on{opacity:1;transition:opacity .45s ease .32s}
.ip-slides img[src*=lapetit],.bx-scr img[src*=lapetit]{object-position:center top}

/* ---------- MacBook Pro ---------- */
.scherm{--u:.0648cqw;position:relative;width:100%;container-type:inline-size;isolation:isolate;color:#1d1d1f;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif}
.scherm::after{content:"";position:absolute;z-index:-1;left:1.5%;right:1.5%;bottom:-1.6cqw;height:3.2cqw;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(10,16,46,.5),rgba(10,16,46,0));filter:blur(.7cqw)}
.sc-lid{position:relative;z-index:2;background:#040405;border-radius:1.6cqw 1.6cqw .3cqw .3cqw;padding:1.05cqw 1.05cqw 1.15cqw;box-shadow:0 0 0 .14cqw #b6b9be,0 0 0 .26cqw rgba(10,16,46,.1),inset 0 0 0 .1cqw rgba(255,255,255,.14)}
.sc-scr{position:relative;overflow:hidden;border-radius:.62cqw;aspect-ratio:1512/982;background:radial-gradient(70% 90% at 12% 8%,#dfe9fb 0,rgba(223,233,251,0) 60%),radial-gradient(60% 80% at 92% 100%,#aac3ee 0,rgba(170,195,238,0) 62%),linear-gradient(160deg,#c4d5f3,#8eaee6 55%,#b9cdee)}
.sc-menu{display:flex;align-items:center;gap:calc(var(--u)*14);height:calc(var(--u)*33);padding:0 calc(var(--u)*14);position:relative;z-index:2;background:rgba(240,243,250,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:calc(var(--u)*13);line-height:1;font-weight:400;color:#15161a;white-space:nowrap;overflow:hidden}
.sc-menu b{font-weight:700}
.sc-apple{height:calc(var(--u)*15);width:auto;flex:none;margin-right:calc(var(--u)*2)}
.sc-menu em{margin-left:auto;display:flex;align-items:center;gap:calc(var(--u)*13);font-style:normal}
.sc-mi{height:calc(var(--u)*11.5);width:auto;flex:none}
.sc-notch{position:absolute;z-index:3;top:0;left:50%;width:calc(var(--u)*158);height:calc(var(--u)*33);margin-left:calc(var(--u)*-79);background:#040405;border-radius:0 0 calc(var(--u)*10) calc(var(--u)*10)}
.sc-notch::before,.sc-notch::after{content:"";position:absolute;top:0;width:calc(var(--u)*9);height:calc(var(--u)*9)}
.sc-notch::before{left:calc(var(--u)*-9);background:radial-gradient(circle at 0 100%,transparent calc(var(--u)*8.5),#040405 calc(var(--u)*9))}
.sc-notch::after{right:calc(var(--u)*-9);background:radial-gradient(circle at 100% 100%,transparent calc(var(--u)*8.5),#040405 calc(var(--u)*9))}
.sc-notch i{position:absolute;left:50%;top:calc(var(--u)*11);width:calc(var(--u)*8);height:calc(var(--u)*8);margin-left:calc(var(--u)*-4);border-radius:50%;background:radial-gradient(circle at 38% 38%,#27304c,#090b14 62%,#000);box-shadow:0 0 0 calc(var(--u)*2) #0b0c11}
/* Chrome: tabbalk met stoplichtknoppen, favicon en titel */
.sc-tabs{position:relative;display:flex;align-items:flex-end;height:calc(var(--u)*38);padding:0 calc(var(--u)*10) 0 calc(var(--u)*14);background:#dee1e6}
.sc-lights{display:flex;gap:calc(var(--u)*8);align-self:center;margin-right:calc(var(--u)*20)}
.sc-lights i{display:block;width:calc(var(--u)*12);height:calc(var(--u)*12);border-radius:50%;box-shadow:inset 0 0 0 .6px rgba(0,0,0,.2)}
.sc-lights .r{background:#ff5f57}.sc-lights .g{background:#febc2e}.sc-lights .v{background:#28c840}
.sc-tab{position:relative;display:flex;align-items:center;gap:calc(var(--u)*8);width:calc(var(--u)*232);height:calc(var(--u)*31);padding:0 calc(var(--u)*10) 0 calc(var(--u)*12);background:#fff;border-radius:calc(var(--u)*9) calc(var(--u)*9) 0 0;font-size:calc(var(--u)*12);line-height:1;color:#202124;box-shadow:0 calc(var(--u)*-.5) 0 rgba(0,0,0,.04)}
.sc-tab::before,.sc-tab::after{content:"";position:absolute;bottom:0;width:calc(var(--u)*9);height:calc(var(--u)*9)}
.sc-tab::before{left:calc(var(--u)*-9);background:radial-gradient(circle at 0 0,transparent calc(var(--u)*8.5),#fff calc(var(--u)*9))}
.sc-tab::after{right:calc(var(--u)*-9);background:radial-gradient(circle at 100% 0,transparent calc(var(--u)*8.5),#fff calc(var(--u)*9))}
.sc-fav{display:grid;place-items:center;flex:none;width:calc(var(--u)*15);height:calc(var(--u)*15);border-radius:calc(var(--u)*4);color:#fff;font-size:calc(var(--u)*10);font-weight:700;line-height:1}
.sc-tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-x{width:calc(var(--u)*14);height:calc(var(--u)*14);color:#5f6368;flex:none}
.sc-plus{align-self:center;margin-left:calc(var(--u)*10);font-size:calc(var(--u)*17);line-height:1;color:#5f6368}
.sc-bar{display:flex;align-items:center;gap:calc(var(--u)*10);height:calc(var(--u)*40);padding:0 calc(var(--u)*14);background:#fff;box-shadow:inset 0 calc(var(--u)*-1) 0 #dadce0}
.sc-ci{width:calc(var(--u)*19);height:calc(var(--u)*19);color:#5f6368;flex:none}
.sc-url{flex:1;min-width:0;display:flex;align-items:center;gap:calc(var(--u)*8);height:calc(var(--u)*27);padding:0 calc(var(--u)*14);border-radius:99px;background:#f1f3f4;font-size:calc(var(--u)*13);line-height:1;color:#202124}
.sc-lock{width:calc(var(--u)*13);height:calc(var(--u)*13);color:#5f6368;flex:none}
.sc-win{position:absolute;z-index:1;left:calc(var(--u)*52);right:calc(var(--u)*52);top:calc(var(--u)*46);bottom:calc(var(--u)*106);display:flex;flex-direction:column;border-radius:calc(var(--u)*11);overflow:hidden;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 calc(var(--u)*6) calc(var(--u)*14) rgba(20,30,70,.18),0 calc(var(--u)*30) calc(var(--u)*60) rgba(20,30,70,.28)}
.sc-tabs,.sc-bar{flex:none}
.sc-vp{position:relative;flex:1;min-height:0;background:#fff;line-height:0;overflow:hidden}
.scherm .sc-vp img,.scherm .sc-vp video{position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover;object-position:top;border-radius:0!important;animation:none!important;transform:none!important}
/* Dock met neutrale app iconen */
.sc-dock{position:absolute;z-index:2;left:50%;bottom:calc(var(--u)*10);transform:translateX(-50%);display:flex;align-items:center;gap:calc(var(--u)*9);padding:calc(var(--u)*8) calc(var(--u)*11);border-radius:calc(var(--u)*22);background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 .6px rgba(255,255,255,.7),0 calc(var(--u)*6) calc(var(--u)*18) rgba(20,30,70,.18)}
.dk-i{position:relative;display:grid;place-items:center;width:calc(var(--u)*50);height:calc(var(--u)*50);border-radius:calc(var(--u)*13);box-shadow:inset 0 .6px 0 rgba(255,255,255,.55),0 calc(var(--u)*2) calc(var(--u)*5) rgba(20,30,70,.28)}
.dk-i svg{width:58%;height:58%}
.dk-i u{position:absolute;left:50%;bottom:calc(var(--u)*-6);width:calc(var(--u)*4);height:calc(var(--u)*4);margin-left:calc(var(--u)*-2);border-radius:50%;background:rgba(30,35,50,.65)}
.dk-s{width:.6px;align-self:stretch;margin:calc(var(--u)*4) calc(var(--u)*2);background:rgba(30,35,50,.3)}
/* aluminium voet met scharnier en duimgroef */
.sc-base{position:relative;z-index:1;height:1.9cqw;margin:-.05cqw -.9cqw 0;border-radius:0 0 3.2cqw 3.2cqw/0 0 1.9cqw 1.9cqw;background:linear-gradient(#f4f5f7 0%,#d9dbdf 22%,#c1c4c9 62%,#9da0a6 100%);box-shadow:inset 0 .12cqw 0 rgba(255,255,255,.9),inset 0 -.22cqw .35cqw rgba(0,0,0,.2),0 1.2cqw 2.2cqw -.5cqw rgba(10,16,46,.38)}
.sc-base::after{content:"";position:absolute;inset:0;border-radius:inherit;background:url(img/toestel/geborsteld.png) 0 0/340px auto;opacity:.55;pointer-events:none}
.sc-base::before{z-index:1;content:"";position:absolute;left:0;right:0;top:0;height:.34cqw;background:linear-gradient(#5f6268,#a4a7ac)}
.sc-nick{position:absolute;left:50%;top:0;width:13.5cqw;height:.95cqw;margin-left:-6.75cqw;border-radius:0 0 1.4cqw 1.4cqw/0 0 .95cqw .95cqw;background:linear-gradient(#a2a5ab,#dcdee2);box-shadow:inset 0 .2cqw .3cqw rgba(0,0,0,.3)}

/* ---------- plaatsing in de pagina's ---------- */
.hv-dev .scherm{overflow:visible;border-radius:0;margin-bottom:0;max-width:880px}
.hv-dev:has(.scherm){padding-bottom:clamp(22px,3vw,40px)}
.hv-dev .iphone{flex:none}
/* vaste vorm, ook als een pagina eigen randen, hoeken of schaduwen op .scherm zet */
.scherm{background:none!important;border-radius:0!important;overflow:visible!important;box-shadow:none!important}
/* interactieve intake zonder toestel: een gewone kaart */
.ix-tel .ix-flat{width:min(360px,100%);background:#fff;border-radius:26px;box-shadow:0 0 0 1px var(--lijn),0 40px 80px -50px rgba(11,47,168,.45);overflow:hidden}
.ix-flat .bx-scr{position:static;inset:auto;background:#fff}
.ix-flat .ix-in{height:auto;padding:22px 20px;gap:9px;font-size:14px}
/* wisselbeelden: het oude beeld is weg voor het nieuwe verschijnt, nooit twee toestellen door elkaar */
.sw-i{transition:opacity .28s ease,transform .28s ease}
.sw-i.on{transition:opacity .5s var(--ease) .3s,transform .6s var(--ease) .3s}
/* laptop in kaarten: de oude .mac maten blijven gelden, de kanteling niet */
.scherm.mac,.hb-mac .scherm.mac{transform:none!important}
/* Voorbeeldlabel hoort naast het toestel, niet over de rand */
.sw-sc.ph{--w:250px}
.sw-sc .vb-pill{top:-34px;right:auto;left:50%;transform:translateX(-50%);font-size:13px;padding:4px 12px;white-space:nowrap}
/* toestellen in casekaarten: tussen logo en titel, nooit over tekst, geen kanteling */
.ck2 .ck-dev,.hm-ck .ck-dev{inset:72px 0 104px!important;height:auto!important;padding:0 14px}
.ck2 .ck-dev .iphone{height:100%;width:auto!important;max-width:none;transform:none!important;margin:0!important}
.ck2 .ck-dev .scherm{width:100%!important;max-width:none;transform:none!important;margin:0!important}
.ck2 .ck-dev .scherm .sc-base{margin-inline:-1.4cqw}
/* heroes: het hele toestel is zichtbaar, niets verdwijnt onder de rand */
.hv-dev{max-height:none!important;padding-bottom:clamp(26px,3vw,44px)!important;border-radius:clamp(24px,3vw,40px)!important}
.hv-dev .iphone,.hv-dev.lp .iphone{margin-bottom:0!important;width:min(250px,72%)}
.hv-dev .scherm{margin-bottom:0!important;animation:none!important}
.hv-dev:has(.scherm){padding-bottom:clamp(26px,3vw,44px)!important}
@media(max-width:640px){.hv-dev .iphone,.hv-dev.lp .iphone{width:230px!important}.hv-dev.lp .lp-m{width:100%;display:flex;justify-content:center}.hv-dev{padding-top:44px}}