/* Lettertypes staan op de site zelf (Fraunces en IBM Plex Sans, open lettertypes onder de SIL Open Font License) */ @font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/fraunces.woff2) format("woff2")} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/plex-400.woff2) format("woff2")} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/plex-600.woff2) format("woff2")} /* ============================================================ BRIDGEWORK — gedeeld stijlbestand voor de hele site Deel 1: basis, bovenbalk, zijbruggen, voettekst + de homepage Deel 2: de zes overige pagina's ============================================================ */ :root{ color-scheme:only light; --papier:#F4EFEA; --licht:#FBF9F6; --inkt:#304A5B; --primair:#456982; --zacht:#A5C9DF; --zacht-licht:#E9F1F6; --accent:#897057; --rust:#A8A8A2; --vlak:#F3EBE0; /* licht vlak bij hover */ --lees:760px; --ruimte:clamp(40px,5.5vw,76px); /* gematigde ruimte tussen blokken */ --brug-breed:min(100vw,1320px); --rivier-kolom:calc(min(100vw,1320px)*0.468); --zij:110px; /* ruimte voor de zijbruggen */ } *{box-sizing:border-box} a:focus-visible,button:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--pagina,#456982);outline-offset:3px;border-radius:8px} /* Sla-over-link voor toetsenbordgebruikers */ .overslaan{position:absolute;left:-9999px;top:0;z-index:100;background:var(--primair); color:var(--licht);padding:12px 20px;border-radius:0 0 12px 0;text-decoration:none;font-weight:600} .overslaan:focus{left:0} html{background:var(--licht);scroll-behavior:smooth} body{ margin:0;color:var(--inkt); font-family:"IBM Plex Sans",Helvetica,Arial,sans-serif; font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden; /* één doorlopend verloop over de hele pagina: papier → lucht → water → papier */ background:linear-gradient(to bottom, #FBF9F6 0%, #EAF1F5 10%, #D8E7F0 20%, #CFE2EC 27%, #E7EDEC 34%, #F4EFEA 44%, #FAF7F2 68%, #FBF9F6 100%); } h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;letter-spacing:-.02em;margin:0} p{margin:0 0 .85em} p:last-child{margin-bottom:0} a{color:var(--primair)} img,svg{max-width:100%} section{padding:var(--ruimte) 0;background:transparent} .wrap{max-width:var(--lees);margin:0 auto;padding:0 max(24px,var(--zij))} .label{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--rust);font-weight:600;margin:0 0 10px} .streep{width:52px;height:3px;background:var(--accent);border-radius:2px;margin:0 0 14px} /* ===================== BOVENBALK MET NAVIGATIE ===================== */ .balk{ position:sticky;top:0;z-index:70;display:flex;align-items:center;gap:22px; padding:10px 26px;background:rgba(251,249,246,.92);backdrop-filter:blur(10px); border-bottom:1px solid rgba(168,168,162,.28); } .balk .logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--inkt); font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:19px;flex:none} .balk .logo .mark{display:block;width:70px;height:34px;flex:none} .balkmenu{display:flex;align-items:center;gap:26px;margin-left:auto} .balkmenu a{position:relative;text-decoration:none;color:var(--inkt);font-weight:600;font-size:15px;padding:6px 0} .balkmenu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px; background:var(--primair);border-radius:2px;transition:right .25s ease} .balkmenu a:hover::after{right:0} .balkmenu a[aria-current="page"]{color:var(--accent)} .balkmenu a[aria-current="page"]::after{right:0;background:var(--accent)} .knop{display:inline-block;background:var(--primair);color:var(--licht);font-weight:600; text-decoration:none;padding:10px 22px;border-radius:999px;font-size:15px;flex:none; transition:transform .2s,background .2s,box-shadow .2s} .knop:hover{background:#3a5a70;transform:translateY(-2px);box-shadow:0 8px 20px rgba(48,74,91,.22)} /* ===================== KOP ===================== */ .kop{padding:clamp(34px,4.5vw,58px) 0 0;text-align:center;position:relative} .kop h1{font-size:clamp(46px,8vw,80px);line-height:1.04} .kop .slogan{color:var(--primair);font-weight:600;font-size:clamp(17px,2.6vw,22px);margin:12px 0 0} .introlink{display:block;max-width:820px;margin:10px auto 0;text-decoration:none;color:inherit; padding:18px 22px;border-radius:16px;transition:background .3s,transform .3s,box-shadow .3s} .introlink p{font-size:19px;text-align:center;margin-bottom:0} .introlink .meer{display:inline-block;margin-top:8px;color:var(--primair);font-weight:600} .introlink:hover{background:rgba(255,255,255,.6);transform:translateY(-3px); box-shadow:0 14px 34px rgba(48,74,91,.10)} .introlink:hover .meer{text-decoration:underline} /* ===================== BRUG MET WOLKEN ===================== */ .bovenvak{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20700%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%0A%3Cdefs%3E%3Cfilter%20id%3D%22z%22%20x%3D%22-40%25%22%20y%3D%22-40%25%22%20width%3D%22180%25%22%20height%3D%22180%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2222%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%0A%3Cg%20fill%3D%22%23ffffff%22%20filter%3D%22url%28%23z%29%22%20opacity%3D%22.85%22%3E%0A%20%3Cellipse%20cx%3D%22210%22%20cy%3D%22210%22%20rx%3D%22170%22%20ry%3D%2246%22%2F%3E%3Cellipse%20cx%3D%22310%22%20cy%3D%22182%22%20rx%3D%22104%22%20ry%3D%2236%22%2F%3E%3Cellipse%20cx%3D%22130%22%20cy%3D%22192%22%20rx%3D%2286%22%20ry%3D%2230%22%2F%3E%0A%20%3Cellipse%20cx%3D%22930%22%20cy%3D%22160%22%20rx%3D%22152%22%20ry%3D%2242%22%2F%3E%3Cellipse%20cx%3D%221020%22%20cy%3D%22186%22%20rx%3D%2298%22%20ry%3D%2232%22%2F%3E%3Cellipse%20cx%3D%22845%22%20cy%3D%22184%22%20rx%3D%2280%22%20ry%3D%2228%22%2F%3E%0A%20%3Cellipse%20cx%3D%22600%22%20cy%3D%2296%22%20rx%3D%22130%22%20ry%3D%2230%22%20opacity%3D%22.7%22%2F%3E%0A%20%3Cellipse%20cx%3D%22420%22%20cy%3D%22330%22%20rx%3D%22120%22%20ry%3D%2226%22%20opacity%3D%22.5%22%2F%3E%0A%20%3Cellipse%20cx%3D%221090%22%20cy%3D%22350%22%20rx%3D%22130%22%20ry%3D%2228%22%20opacity%3D%22.45%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E"); background-size:cover;background-position:center 44%; } .brugvak{padding:0;margin-top:-6px} .brug{position:relative;width:100%;max-width:1320px;margin:0 auto} .brug>svg,.brug>img{display:block;width:100%;height:auto} /* Navigatie: exact in het midden van elk vak (130×46 eenheden), schuin met het dek mee */ .brugnav a{ position:absolute;text-decoration:none;color:var(--inkt);font-weight:600; font-family:"IBM Plex Sans",sans-serif;font-size:clamp(14px,1.5vw,21px); white-space:nowrap;line-height:1;padding:10px 14px;border-radius:10px; text-shadow:0 1px 0 rgba(255,255,255,.95),0 0 16px rgba(255,255,255,.9); transition:color .22s,background .22s,box-shadow .22s; } .brugnav a:hover,.brugnav a:focus-visible{ color:var(--primair); background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0)); box-shadow:0 0 30px 10px rgba(255,255,255,.7); } .brugnav a[aria-current="page"]{color:var(--accent)} .brugnav a:nth-child(1){left:17.56%;top:59.43%;transform:translate(-50%,-50%) rotate(-33.9deg)} .brugnav a:nth-child(2){left:33.78%;top:31.19%;transform:translate(-50%,-50%) rotate(-23.5deg)} .brugnav a:nth-child(3){left:50.00%;top:20.13%;transform:translate(-50%,-50%) rotate(0deg)} .brugnav a:nth-child(4){left:66.22%;top:31.19%;transform:translate(-50%,-50%) rotate(23.5deg)} .brugnav a:nth-child(5){left:82.44%;top:59.43%;transform:translate(-50%,-50%) rotate(33.9deg)} /* ===================== ZIJBRUGGEN ===================== */ .zijbrug{position:fixed;top:50%;transform:translateY(-50%);z-index:60; width:var(--zij);padding:0 8px;text-align:center; display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none; color:var(--inkt);font-weight:600;font-size:13px;transition:transform .3s} .zijbrug svg,.zijbrug img{width:74px;height:auto;display:block;opacity:.62; filter:drop-shadow(0 4px 10px rgba(48,74,91,.14));transition:opacity .3s,filter .3s} .zijbrug span{background:rgba(251,249,246,.86);padding:5px 12px;border-radius:999px; font-size:12.5px;color:var(--rust);transition:color .3s,background .3s,box-shadow .3s; white-space:normal;line-height:1.25;max-width:100%} .zijbrug.links{left:0} .zijbrug.rechts{right:0} .zijbrug.rechts img{transform:scaleX(-1)} .zijbrug:hover svg,.zijbrug:hover img{opacity:1;filter:brightness(1.08) drop-shadow(0 6px 14px rgba(48,74,91,.2))} .zijbrug:hover span{color:var(--primair);background:#fff;box-shadow:0 6px 16px rgba(48,74,91,.14)} .zijbrug.links:hover{transform:translateY(-50%) translateX(10px)} .zijbrug.rechts:hover{transform:translateY(-50%) translateX(-10px)} /* ===================== RIVIER ===================== */ .stroom{position:relative} .stroom > *{position:relative;z-index:1} .stroomwater{position:absolute;inset:0;z-index:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20900%201400%22%20width%3D%22900%22%20height%3D%221400%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cdefs%3E%0A%20%3ClinearGradient%20id%3D%22w%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2384aab3%22%2F%3E%3Cstop%20offset%3D%220.5%22%20stop-color%3D%22%23b3d0d3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2384aab3%22%2F%3E%3C%2FlinearGradient%3E%0A%20%3ClinearGradient%20id%3D%22depth%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235a8188%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%220.5%22%20stop-color%3D%22%23517a82%22%20stop-opacity%3D%22.42%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235a8188%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%0A%20%3ClinearGradient%20id%3D%22egaal%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%20gradientUnits%3D%22objectBoundingBox%22%3E%0A%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2393b6bb%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2393b6bb%22%20stop-opacity%3D%221%22%2F%3E%3C%2FlinearGradient%3E%0A%20%3CclipPath%20id%3D%22rc%22%3E%3Cpath%20d%3D%22M275.0%200.0%20L275.0%205.4%20L275.1%2010.8%20L275.2%2016.2%20L275.4%2021.5%20L275.6%2026.9%20L275.9%2032.3%20L276.2%2037.7%20L276.6%2043.1%20L277.0%2048.5%20L277.5%2053.8%20L278.0%2059.2%20L278.5%2064.6%20L279.0%2070.0%20L279.6%2075.4%20L280.3%2080.8%20L280.9%2086.2%20L281.6%2091.5%20L282.3%2096.9%20L283.0%20102.3%20L283.7%20107.7%20L284.4%20113.1%20L285.1%20118.5%20L285.8%20123.8%20L286.5%20129.2%20L287.2%20134.6%20L287.9%20140.0%20L288.6%20145.4%20L289.3%20150.8%20L289.9%20156.2%20L290.5%20161.5%20L291.1%20166.9%20L291.6%20172.3%20L292.1%20177.7%20L292.5%20183.1%20L292.9%20188.5%20L293.3%20193.8%20L293.6%20199.2%20L293.8%20204.6%20L294.0%20210.0%20L294.1%20215.4%20L294.2%20220.8%20L294.2%20226.2%20L294.1%20231.5%20L293.9%20236.9%20L293.7%20242.3%20L293.4%20247.7%20L293.1%20253.1%20L292.7%20258.5%20L292.2%20263.8%20L291.6%20269.2%20L290.9%20274.6%20L290.2%20280.0%20L289.4%20285.4%20L288.5%20290.8%20L287.6%20296.2%20L286.6%20301.5%20L285.5%20306.9%20L284.4%20312.3%20L283.2%20317.7%20L282.0%20323.1%20L280.7%20328.5%20L279.3%20333.8%20L277.9%20339.2%20L276.5%20344.6%20L275.0%20350.0%20L273.5%20355.4%20L271.9%20360.8%20L270.3%20366.2%20L268.7%20371.5%20L267.1%20376.9%20L265.5%20382.3%20L263.8%20387.7%20L262.2%20393.1%20L260.5%20398.5%20L258.9%20403.8%20L257.3%20409.2%20L255.7%20414.6%20L254.1%20420.0%20L252.5%20425.4%20L251.0%20430.8%20L249.5%20436.2%20L248.0%20441.5%20L246.6%20446.9%20L245.3%20452.3%20L244.0%20457.7%20L242.8%20463.1%20L241.6%20468.5%20L240.5%20473.8%20L239.5%20479.2%20L238.6%20484.6%20L237.7%20490.0%20L236.9%20495.4%20L236.3%20500.8%20L235.7%20506.2%20L235.2%20511.5%20L234.8%20516.9%20L234.5%20522.3%20L234.3%20527.7%20L234.2%20533.1%20L234.2%20538.5%20L234.3%20543.8%20L234.5%20549.2%20L234.8%20554.6%20L235.2%20560.0%20L235.7%20565.4%20L236.3%20570.8%20L237.1%20576.2%20L237.9%20581.5%20L238.8%20586.9%20L239.8%20592.3%20L241.0%20597.7%20L242.2%20603.1%20L243.5%20608.5%20L244.8%20613.8%20L246.3%20619.2%20L247.8%20624.6%20L249.5%20630.0%20L251.1%20635.4%20L252.9%20640.8%20L254.7%20646.2%20L256.6%20651.5%20L258.5%20656.9%20L260.4%20662.3%20L262.5%20667.7%20L264.5%20673.1%20L266.6%20678.5%20L268.6%20683.8%20L270.8%20689.2%20L272.9%20694.6%20L275.0%20700.0%20L277.1%20705.4%20L279.2%20710.8%20L281.4%20716.2%20L283.4%20721.5%20L285.5%20726.9%20L287.5%20732.3%20L289.6%20737.7%20L291.5%20743.1%20L293.4%20748.5%20L295.3%20753.8%20L297.1%20759.2%20L298.9%20764.6%20L300.5%20770.0%20L302.2%20775.4%20L303.7%20780.8%20L305.2%20786.2%20L306.5%20791.5%20L307.8%20796.9%20L309.0%20802.3%20L310.2%20807.7%20L311.2%20813.1%20L312.1%20818.5%20L312.9%20823.8%20L313.7%20829.2%20L314.3%20834.6%20L314.8%20840.0%20L315.2%20845.4%20L315.5%20850.8%20L315.7%20856.2%20L315.8%20861.5%20L315.8%20866.9%20L315.7%20872.3%20L315.5%20877.7%20L315.2%20883.1%20L314.8%20888.5%20L314.3%20893.8%20L313.7%20899.2%20L313.1%20904.6%20L312.3%20910.0%20L311.4%20915.4%20L310.5%20920.8%20L309.5%20926.2%20L308.4%20931.5%20L307.2%20936.9%20L306.0%20942.3%20L304.7%20947.7%20L303.4%20953.1%20L302.0%20958.5%20L300.5%20963.8%20L299.0%20969.2%20L297.5%20974.6%20L295.9%20980.0%20L294.3%20985.4%20L292.7%20990.8%20L291.1%20996.2%20L289.5%201001.5%20L287.8%201006.9%20L286.2%201012.3%20L284.5%201017.7%20L282.9%201023.1%20L281.3%201028.5%20L279.7%201033.8%20L278.1%201039.2%20L276.5%201044.6%20L275.0%201050.0%20L273.5%201055.4%20L272.1%201060.8%20L270.7%201066.2%20L269.3%201071.5%20L268.0%201076.9%20L266.8%201082.3%20L265.6%201087.7%20L264.5%201093.1%20L263.4%201098.5%20L262.4%201103.8%20L261.5%201109.2%20L260.6%201114.6%20L259.8%201120.0%20L259.1%201125.4%20L258.4%201130.8%20L257.8%201136.2%20L257.3%201141.5%20L256.9%201146.9%20L256.6%201152.3%20L256.3%201157.7%20L256.1%201163.1%20L255.9%201168.5%20L255.8%201173.8%20L255.8%201179.2%20L255.9%201184.6%20L256.0%201190.0%20L256.2%201195.4%20L256.4%201200.8%20L256.7%201206.2%20L257.1%201211.5%20L257.5%201216.9%20L257.9%201222.3%20L258.4%201227.7%20L258.9%201233.1%20L259.5%201238.5%20L260.1%201243.8%20L260.7%201249.2%20L261.4%201254.6%20L262.1%201260.0%20L262.8%201265.4%20L263.5%201270.8%20L264.2%201276.2%20L264.9%201281.5%20L265.6%201286.9%20L266.3%201292.3%20L267.0%201297.7%20L267.7%201303.1%20L268.4%201308.5%20L269.1%201313.8%20L269.7%201319.2%20L270.4%201324.6%20L271.0%201330.0%20L271.5%201335.4%20L272.0%201340.8%20L272.5%201346.2%20L273.0%201351.5%20L273.4%201356.9%20L273.8%201362.3%20L274.1%201367.7%20L274.4%201373.1%20L274.6%201378.5%20L274.8%201383.8%20L274.9%201389.2%20L275.0%201394.6%20L275.0%201400.0%20L625.0%201400.0%20L625.0%201394.6%20L624.9%201389.2%20L624.8%201383.8%20L624.6%201378.5%20L624.4%201373.1%20L624.1%201367.7%20L623.8%201362.3%20L623.4%201356.9%20L623.0%201351.5%20L622.5%201346.2%20L622.0%201340.8%20L621.5%201335.4%20L621.0%201330.0%20L620.4%201324.6%20L619.7%201319.2%20L619.1%201313.8%20L618.4%201308.5%20L617.7%201303.1%20L617.0%201297.7%20L616.3%201292.3%20L615.6%201286.9%20L614.9%201281.5%20L614.2%201276.2%20L613.5%201270.8%20L612.8%201265.4%20L612.1%201260.0%20L611.4%201254.6%20L610.7%201249.2%20L610.1%201243.8%20L609.5%201238.5%20L608.9%201233.1%20L608.4%201227.7%20L607.9%201222.3%20L607.5%201216.9%20L607.1%201211.5%20L606.7%201206.2%20L606.4%201200.8%20L606.2%201195.4%20L606.0%201190.0%20L605.9%201184.6%20L605.8%201179.2%20L605.8%201173.8%20L605.9%201168.5%20L606.1%201163.1%20L606.3%201157.7%20L606.6%201152.3%20L606.9%201146.9%20L607.3%201141.5%20L607.8%201136.2%20L608.4%201130.8%20L609.1%201125.4%20L609.8%201120.0%20L610.6%201114.6%20L611.5%201109.2%20L612.4%201103.8%20L613.4%201098.5%20L614.5%201093.1%20L615.6%201087.7%20L616.8%201082.3%20L618.0%201076.9%20L619.3%201071.5%20L620.7%201066.2%20L622.1%201060.8%20L623.5%201055.4%20L625.0%201050.0%20L626.5%201044.6%20L628.1%201039.2%20L629.7%201033.8%20L631.3%201028.5%20L632.9%201023.1%20L634.5%201017.7%20L636.2%201012.3%20L637.8%201006.9%20L639.5%201001.5%20L641.1%20996.2%20L642.7%20990.8%20L644.3%20985.4%20L645.9%20980.0%20L647.5%20974.6%20L649.0%20969.2%20L650.5%20963.8%20L652.0%20958.5%20L653.4%20953.1%20L654.7%20947.7%20L656.0%20942.3%20L657.2%20936.9%20L658.4%20931.5%20L659.5%20926.2%20L660.5%20920.8%20L661.4%20915.4%20L662.3%20910.0%20L663.1%20904.6%20L663.7%20899.2%20L664.3%20893.8%20L664.8%20888.5%20L665.2%20883.1%20L665.5%20877.7%20L665.7%20872.3%20L665.8%20866.9%20L665.8%20861.5%20L665.7%20856.2%20L665.5%20850.8%20L665.2%20845.4%20L664.8%20840.0%20L664.3%20834.6%20L663.7%20829.2%20L662.9%20823.8%20L662.1%20818.5%20L661.2%20813.1%20L660.2%20807.7%20L659.0%20802.3%20L657.8%20796.9%20L656.5%20791.5%20L655.2%20786.2%20L653.7%20780.8%20L652.2%20775.4%20L650.5%20770.0%20L648.9%20764.6%20L647.1%20759.2%20L645.3%20753.8%20L643.4%20748.5%20L641.5%20743.1%20L639.6%20737.7%20L637.5%20732.3%20L635.5%20726.9%20L633.4%20721.5%20L631.4%20716.2%20L629.2%20710.8%20L627.1%20705.4%20L625.0%20700.0%20L622.9%20694.6%20L620.8%20689.2%20L618.6%20683.8%20L616.6%20678.5%20L614.5%20673.1%20L612.5%20667.7%20L610.4%20662.3%20L608.5%20656.9%20L606.6%20651.5%20L604.7%20646.2%20L602.9%20640.8%20L601.1%20635.4%20L599.5%20630.0%20L597.8%20624.6%20L596.3%20619.2%20L594.8%20613.8%20L593.5%20608.5%20L592.2%20603.1%20L591.0%20597.7%20L589.8%20592.3%20L588.8%20586.9%20L587.9%20581.5%20L587.1%20576.2%20L586.3%20570.8%20L585.7%20565.4%20L585.2%20560.0%20L584.8%20554.6%20L584.5%20549.2%20L584.3%20543.8%20L584.2%20538.5%20L584.2%20533.1%20L584.3%20527.7%20L584.5%20522.3%20L584.8%20516.9%20L585.2%20511.5%20L585.7%20506.2%20L586.3%20500.8%20L586.9%20495.4%20L587.7%20490.0%20L588.6%20484.6%20L589.5%20479.2%20L590.5%20473.8%20L591.6%20468.5%20L592.8%20463.1%20L594.0%20457.7%20L595.3%20452.3%20L596.6%20446.9%20L598.0%20441.5%20L599.5%20436.2%20L601.0%20430.8%20L602.5%20425.4%20L604.1%20420.0%20L605.7%20414.6%20L607.3%20409.2%20L608.9%20403.8%20L610.5%20398.5%20L612.2%20393.1%20L613.8%20387.7%20L615.5%20382.3%20L617.1%20376.9%20L618.7%20371.5%20L620.3%20366.2%20L621.9%20360.8%20L623.5%20355.4%20L625.0%20350.0%20L626.5%20344.6%20L627.9%20339.2%20L629.3%20333.8%20L630.7%20328.5%20L632.0%20323.1%20L633.2%20317.7%20L634.4%20312.3%20L635.5%20306.9%20L636.6%20301.5%20L637.6%20296.2%20L638.5%20290.8%20L639.4%20285.4%20L640.2%20280.0%20L640.9%20274.6%20L641.6%20269.2%20L642.2%20263.8%20L642.7%20258.5%20L643.1%20253.1%20L643.4%20247.7%20L643.7%20242.3%20L643.9%20236.9%20L644.1%20231.5%20L644.2%20226.2%20L644.2%20220.8%20L644.1%20215.4%20L644.0%20210.0%20L643.8%20204.6%20L643.6%20199.2%20L643.3%20193.8%20L642.9%20188.5%20L642.5%20183.1%20L642.1%20177.7%20L641.6%20172.3%20L641.1%20166.9%20L640.5%20161.5%20L639.9%20156.2%20L639.3%20150.8%20L638.6%20145.4%20L637.9%20140.0%20L637.2%20134.6%20L636.5%20129.2%20L635.8%20123.8%20L635.1%20118.5%20L634.4%20113.1%20L633.7%20107.7%20L633.0%20102.3%20L632.3%2096.9%20L631.6%2091.5%20L630.9%2086.2%20L630.3%2080.8%20L629.6%2075.4%20L629.0%2070.0%20L628.5%2064.6%20L628.0%2059.2%20L627.5%2053.8%20L627.0%2048.5%20L626.6%2043.1%20L626.2%2037.7%20L625.9%2032.3%20L625.6%2026.9%20L625.4%2021.5%20L625.2%2016.2%20L625.1%2010.8%20L625.0%205.4%20L625.0%200.0%20Z%22%2F%3E%3C%2FclipPath%3E%0A%20%3ClinearGradient%20id%3D%22uit%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%3Cstop%20offset%3D%220.40%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%221%22%2F%3E%3Cstop%20offset%3D%220.58%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220.62%22%2F%3E%3Cstop%20offset%3D%220.72%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220.22%22%2F%3E%3Cstop%20offset%3D%220.82%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%0A%20%3Cmask%20id%3D%22mUit%22%3E%3Crect%20width%3D%22900%22%20height%3D%221400%22%20fill%3D%22url%28%23uit%29%22%2F%3E%3C%2Fmask%3E%0A%3C%2Fdefs%3E%0A%3Cg%20mask%3D%22url%28%23mUit%29%22%3E%0A%20%20%3Cpath%20d%3D%22M275.0%200.0%20L275.0%205.4%20L275.1%2010.8%20L275.2%2016.2%20L275.4%2021.5%20L275.6%2026.9%20L275.9%2032.3%20L276.2%2037.7%20L276.6%2043.1%20L277.0%2048.5%20L277.5%2053.8%20L278.0%2059.2%20L278.5%2064.6%20L279.0%2070.0%20L279.6%2075.4%20L280.3%2080.8%20L280.9%2086.2%20L281.6%2091.5%20L282.3%2096.9%20L283.0%20102.3%20L283.7%20107.7%20L284.4%20113.1%20L285.1%20118.5%20L285.8%20123.8%20L286.5%20129.2%20L287.2%20134.6%20L287.9%20140.0%20L288.6%20145.4%20L289.3%20150.8%20L289.9%20156.2%20L290.5%20161.5%20L291.1%20166.9%20L291.6%20172.3%20L292.1%20177.7%20L292.5%20183.1%20L292.9%20188.5%20L293.3%20193.8%20L293.6%20199.2%20L293.8%20204.6%20L294.0%20210.0%20L294.1%20215.4%20L294.2%20220.8%20L294.2%20226.2%20L294.1%20231.5%20L293.9%20236.9%20L293.7%20242.3%20L293.4%20247.7%20L293.1%20253.1%20L292.7%20258.5%20L292.2%20263.8%20L291.6%20269.2%20L290.9%20274.6%20L290.2%20280.0%20L289.4%20285.4%20L288.5%20290.8%20L287.6%20296.2%20L286.6%20301.5%20L285.5%20306.9%20L284.4%20312.3%20L283.2%20317.7%20L282.0%20323.1%20L280.7%20328.5%20L279.3%20333.8%20L277.9%20339.2%20L276.5%20344.6%20L275.0%20350.0%20L273.5%20355.4%20L271.9%20360.8%20L270.3%20366.2%20L268.7%20371.5%20L267.1%20376.9%20L265.5%20382.3%20L263.8%20387.7%20L262.2%20393.1%20L260.5%20398.5%20L258.9%20403.8%20L257.3%20409.2%20L255.7%20414.6%20L254.1%20420.0%20L252.5%20425.4%20L251.0%20430.8%20L249.5%20436.2%20L248.0%20441.5%20L246.6%20446.9%20L245.3%20452.3%20L244.0%20457.7%20L242.8%20463.1%20L241.6%20468.5%20L240.5%20473.8%20L239.5%20479.2%20L238.6%20484.6%20L237.7%20490.0%20L236.9%20495.4%20L236.3%20500.8%20L235.7%20506.2%20L235.2%20511.5%20L234.8%20516.9%20L234.5%20522.3%20L234.3%20527.7%20L234.2%20533.1%20L234.2%20538.5%20L234.3%20543.8%20L234.5%20549.2%20L234.8%20554.6%20L235.2%20560.0%20L235.7%20565.4%20L236.3%20570.8%20L237.1%20576.2%20L237.9%20581.5%20L238.8%20586.9%20L239.8%20592.3%20L241.0%20597.7%20L242.2%20603.1%20L243.5%20608.5%20L244.8%20613.8%20L246.3%20619.2%20L247.8%20624.6%20L249.5%20630.0%20L251.1%20635.4%20L252.9%20640.8%20L254.7%20646.2%20L256.6%20651.5%20L258.5%20656.9%20L260.4%20662.3%20L262.5%20667.7%20L264.5%20673.1%20L266.6%20678.5%20L268.6%20683.8%20L270.8%20689.2%20L272.9%20694.6%20L275.0%20700.0%20L277.1%20705.4%20L279.2%20710.8%20L281.4%20716.2%20L283.4%20721.5%20L285.5%20726.9%20L287.5%20732.3%20L289.6%20737.7%20L291.5%20743.1%20L293.4%20748.5%20L295.3%20753.8%20L297.1%20759.2%20L298.9%20764.6%20L300.5%20770.0%20L302.2%20775.4%20L303.7%20780.8%20L305.2%20786.2%20L306.5%20791.5%20L307.8%20796.9%20L309.0%20802.3%20L310.2%20807.7%20L311.2%20813.1%20L312.1%20818.5%20L312.9%20823.8%20L313.7%20829.2%20L314.3%20834.6%20L314.8%20840.0%20L315.2%20845.4%20L315.5%20850.8%20L315.7%20856.2%20L315.8%20861.5%20L315.8%20866.9%20L315.7%20872.3%20L315.5%20877.7%20L315.2%20883.1%20L314.8%20888.5%20L314.3%20893.8%20L313.7%20899.2%20L313.1%20904.6%20L312.3%20910.0%20L311.4%20915.4%20L310.5%20920.8%20L309.5%20926.2%20L308.4%20931.5%20L307.2%20936.9%20L306.0%20942.3%20L304.7%20947.7%20L303.4%20953.1%20L302.0%20958.5%20L300.5%20963.8%20L299.0%20969.2%20L297.5%20974.6%20L295.9%20980.0%20L294.3%20985.4%20L292.7%20990.8%20L291.1%20996.2%20L289.5%201001.5%20L287.8%201006.9%20L286.2%201012.3%20L284.5%201017.7%20L282.9%201023.1%20L281.3%201028.5%20L279.7%201033.8%20L278.1%201039.2%20L276.5%201044.6%20L275.0%201050.0%20L273.5%201055.4%20L272.1%201060.8%20L270.7%201066.2%20L269.3%201071.5%20L268.0%201076.9%20L266.8%201082.3%20L265.6%201087.7%20L264.5%201093.1%20L263.4%201098.5%20L262.4%201103.8%20L261.5%201109.2%20L260.6%201114.6%20L259.8%201120.0%20L259.1%201125.4%20L258.4%201130.8%20L257.8%201136.2%20L257.3%201141.5%20L256.9%201146.9%20L256.6%201152.3%20L256.3%201157.7%20L256.1%201163.1%20L255.9%201168.5%20L255.8%201173.8%20L255.8%201179.2%20L255.9%201184.6%20L256.0%201190.0%20L256.2%201195.4%20L256.4%201200.8%20L256.7%201206.2%20L257.1%201211.5%20L257.5%201216.9%20L257.9%201222.3%20L258.4%201227.7%20L258.9%201233.1%20L259.5%201238.5%20L260.1%201243.8%20L260.7%201249.2%20L261.4%201254.6%20L262.1%201260.0%20L262.8%201265.4%20L263.5%201270.8%20L264.2%201276.2%20L264.9%201281.5%20L265.6%201286.9%20L266.3%201292.3%20L267.0%201297.7%20L267.7%201303.1%20L268.4%201308.5%20L269.1%201313.8%20L269.7%201319.2%20L270.4%201324.6%20L271.0%201330.0%20L271.5%201335.4%20L272.0%201340.8%20L272.5%201346.2%20L273.0%201351.5%20L273.4%201356.9%20L273.8%201362.3%20L274.1%201367.7%20L274.4%201373.1%20L274.6%201378.5%20L274.8%201383.8%20L274.9%201389.2%20L275.0%201394.6%20L275.0%201400.0%20L625.0%201400.0%20L625.0%201394.6%20L624.9%201389.2%20L624.8%201383.8%20L624.6%201378.5%20L624.4%201373.1%20L624.1%201367.7%20L623.8%201362.3%20L623.4%201356.9%20L623.0%201351.5%20L622.5%201346.2%20L622.0%201340.8%20L621.5%201335.4%20L621.0%201330.0%20L620.4%201324.6%20L619.7%201319.2%20L619.1%201313.8%20L618.4%201308.5%20L617.7%201303.1%20L617.0%201297.7%20L616.3%201292.3%20L615.6%201286.9%20L614.9%201281.5%20L614.2%201276.2%20L613.5%201270.8%20L612.8%201265.4%20L612.1%201260.0%20L611.4%201254.6%20L610.7%201249.2%20L610.1%201243.8%20L609.5%201238.5%20L608.9%201233.1%20L608.4%201227.7%20L607.9%201222.3%20L607.5%201216.9%20L607.1%201211.5%20L606.7%201206.2%20L606.4%201200.8%20L606.2%201195.4%20L606.0%201190.0%20L605.9%201184.6%20L605.8%201179.2%20L605.8%201173.8%20L605.9%201168.5%20L606.1%201163.1%20L606.3%201157.7%20L606.6%201152.3%20L606.9%201146.9%20L607.3%201141.5%20L607.8%201136.2%20L608.4%201130.8%20L609.1%201125.4%20L609.8%201120.0%20L610.6%201114.6%20L611.5%201109.2%20L612.4%201103.8%20L613.4%201098.5%20L614.5%201093.1%20L615.6%201087.7%20L616.8%201082.3%20L618.0%201076.9%20L619.3%201071.5%20L620.7%201066.2%20L622.1%201060.8%20L623.5%201055.4%20L625.0%201050.0%20L626.5%201044.6%20L628.1%201039.2%20L629.7%201033.8%20L631.3%201028.5%20L632.9%201023.1%20L634.5%201017.7%20L636.2%201012.3%20L637.8%201006.9%20L639.5%201001.5%20L641.1%20996.2%20L642.7%20990.8%20L644.3%20985.4%20L645.9%20980.0%20L647.5%20974.6%20L649.0%20969.2%20L650.5%20963.8%20L652.0%20958.5%20L653.4%20953.1%20L654.7%20947.7%20L656.0%20942.3%20L657.2%20936.9%20L658.4%20931.5%20L659.5%20926.2%20L660.5%20920.8%20L661.4%20915.4%20L662.3%20910.0%20L663.1%20904.6%20L663.7%20899.2%20L664.3%20893.8%20L664.8%20888.5%20L665.2%20883.1%20L665.5%20877.7%20L665.7%20872.3%20L665.8%20866.9%20L665.8%20861.5%20L665.7%20856.2%20L665.5%20850.8%20L665.2%20845.4%20L664.8%20840.0%20L664.3%20834.6%20L663.7%20829.2%20L662.9%20823.8%20L662.1%20818.5%20L661.2%20813.1%20L660.2%20807.7%20L659.0%20802.3%20L657.8%20796.9%20L656.5%20791.5%20L655.2%20786.2%20L653.7%20780.8%20L652.2%20775.4%20L650.5%20770.0%20L648.9%20764.6%20L647.1%20759.2%20L645.3%20753.8%20L643.4%20748.5%20L641.5%20743.1%20L639.6%20737.7%20L637.5%20732.3%20L635.5%20726.9%20L633.4%20721.5%20L631.4%20716.2%20L629.2%20710.8%20L627.1%20705.4%20L625.0%20700.0%20L622.9%20694.6%20L620.8%20689.2%20L618.6%20683.8%20L616.6%20678.5%20L614.5%20673.1%20L612.5%20667.7%20L610.4%20662.3%20L608.5%20656.9%20L606.6%20651.5%20L604.7%20646.2%20L602.9%20640.8%20L601.1%20635.4%20L599.5%20630.0%20L597.8%20624.6%20L596.3%20619.2%20L594.8%20613.8%20L593.5%20608.5%20L592.2%20603.1%20L591.0%20597.7%20L589.8%20592.3%20L588.8%20586.9%20L587.9%20581.5%20L587.1%20576.2%20L586.3%20570.8%20L585.7%20565.4%20L585.2%20560.0%20L584.8%20554.6%20L584.5%20549.2%20L584.3%20543.8%20L584.2%20538.5%20L584.2%20533.1%20L584.3%20527.7%20L584.5%20522.3%20L584.8%20516.9%20L585.2%20511.5%20L585.7%20506.2%20L586.3%20500.8%20L586.9%20495.4%20L587.7%20490.0%20L588.6%20484.6%20L589.5%20479.2%20L590.5%20473.8%20L591.6%20468.5%20L592.8%20463.1%20L594.0%20457.7%20L595.3%20452.3%20L596.6%20446.9%20L598.0%20441.5%20L599.5%20436.2%20L601.0%20430.8%20L602.5%20425.4%20L604.1%20420.0%20L605.7%20414.6%20L607.3%20409.2%20L608.9%20403.8%20L610.5%20398.5%20L612.2%20393.1%20L613.8%20387.7%20L615.5%20382.3%20L617.1%20376.9%20L618.7%20371.5%20L620.3%20366.2%20L621.9%20360.8%20L623.5%20355.4%20L625.0%20350.0%20L626.5%20344.6%20L627.9%20339.2%20L629.3%20333.8%20L630.7%20328.5%20L632.0%20323.1%20L633.2%20317.7%20L634.4%20312.3%20L635.5%20306.9%20L636.6%20301.5%20L637.6%20296.2%20L638.5%20290.8%20L639.4%20285.4%20L640.2%20280.0%20L640.9%20274.6%20L641.6%20269.2%20L642.2%20263.8%20L642.7%20258.5%20L643.1%20253.1%20L643.4%20247.7%20L643.7%20242.3%20L643.9%20236.9%20L644.1%20231.5%20L644.2%20226.2%20L644.2%20220.8%20L644.1%20215.4%20L644.0%20210.0%20L643.8%20204.6%20L643.6%20199.2%20L643.3%20193.8%20L642.9%20188.5%20L642.5%20183.1%20L642.1%20177.7%20L641.6%20172.3%20L641.1%20166.9%20L640.5%20161.5%20L639.9%20156.2%20L639.3%20150.8%20L638.6%20145.4%20L637.9%20140.0%20L637.2%20134.6%20L636.5%20129.2%20L635.8%20123.8%20L635.1%20118.5%20L634.4%20113.1%20L633.7%20107.7%20L633.0%20102.3%20L632.3%2096.9%20L631.6%2091.5%20L630.9%2086.2%20L630.3%2080.8%20L629.6%2075.4%20L629.0%2070.0%20L628.5%2064.6%20L628.0%2059.2%20L627.5%2053.8%20L627.0%2048.5%20L626.6%2043.1%20L626.2%2037.7%20L625.9%2032.3%20L625.6%2026.9%20L625.4%2021.5%20L625.2%2016.2%20L625.1%2010.8%20L625.0%205.4%20L625.0%200.0%20Z%22%20fill%3D%22url%28%23w%29%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M313.0%200.0%20L313.0%205.4%20L313.1%2010.8%20L313.2%2016.2%20L313.4%2021.5%20L313.6%2026.9%20L313.9%2032.3%20L314.2%2037.7%20L314.6%2043.1%20L315.0%2048.5%20L315.5%2053.8%20L316.0%2059.2%20L316.5%2064.6%20L317.0%2070.0%20L317.6%2075.4%20L318.3%2080.8%20L318.9%2086.2%20L319.6%2091.5%20L320.3%2096.9%20L321.0%20102.3%20L321.7%20107.7%20L322.4%20113.1%20L323.1%20118.5%20L323.8%20123.8%20L324.5%20129.2%20L325.2%20134.6%20L325.9%20140.0%20L326.6%20145.4%20L327.3%20150.8%20L327.9%20156.2%20L328.5%20161.5%20L329.1%20166.9%20L329.6%20172.3%20L330.1%20177.7%20L330.5%20183.1%20L330.9%20188.5%20L331.3%20193.8%20L331.6%20199.2%20L331.8%20204.6%20L332.0%20210.0%20L332.1%20215.4%20L332.2%20220.8%20L332.2%20226.2%20L332.1%20231.5%20L331.9%20236.9%20L331.7%20242.3%20L331.4%20247.7%20L331.1%20253.1%20L330.7%20258.5%20L330.2%20263.8%20L329.6%20269.2%20L328.9%20274.6%20L328.2%20280.0%20L327.4%20285.4%20L326.5%20290.8%20L325.6%20296.2%20L324.6%20301.5%20L323.5%20306.9%20L322.4%20312.3%20L321.2%20317.7%20L320.0%20323.1%20L318.7%20328.5%20L317.3%20333.8%20L315.9%20339.2%20L314.5%20344.6%20L313.0%20350.0%20L311.5%20355.4%20L309.9%20360.8%20L308.3%20366.2%20L306.7%20371.5%20L305.1%20376.9%20L303.5%20382.3%20L301.8%20387.7%20L300.2%20393.1%20L298.5%20398.5%20L296.9%20403.8%20L295.3%20409.2%20L293.7%20414.6%20L292.1%20420.0%20L290.5%20425.4%20L289.0%20430.8%20L287.5%20436.2%20L286.0%20441.5%20L284.6%20446.9%20L283.3%20452.3%20L282.0%20457.7%20L280.8%20463.1%20L279.6%20468.5%20L278.5%20473.8%20L277.5%20479.2%20L276.6%20484.6%20L275.7%20490.0%20L274.9%20495.4%20L274.3%20500.8%20L273.7%20506.2%20L273.2%20511.5%20L272.8%20516.9%20L272.5%20522.3%20L272.3%20527.7%20L272.2%20533.1%20L272.2%20538.5%20L272.3%20543.8%20L272.5%20549.2%20L272.8%20554.6%20L273.2%20560.0%20L273.7%20565.4%20L274.3%20570.8%20L275.1%20576.2%20L275.9%20581.5%20L276.8%20586.9%20L277.8%20592.3%20L279.0%20597.7%20L280.2%20603.1%20L281.5%20608.5%20L282.8%20613.8%20L284.3%20619.2%20L285.8%20624.6%20L287.5%20630.0%20L289.1%20635.4%20L290.9%20640.8%20L292.7%20646.2%20L294.6%20651.5%20L296.5%20656.9%20L298.4%20662.3%20L300.5%20667.7%20L302.5%20673.1%20L304.6%20678.5%20L306.6%20683.8%20L308.8%20689.2%20L310.9%20694.6%20L313.0%20700.0%20L315.1%20705.4%20L317.2%20710.8%20L319.4%20716.2%20L321.4%20721.5%20L323.5%20726.9%20L325.5%20732.3%20L327.6%20737.7%20L329.5%20743.1%20L331.4%20748.5%20L333.3%20753.8%20L335.1%20759.2%20L336.9%20764.6%20L338.5%20770.0%20L340.2%20775.4%20L341.7%20780.8%20L343.2%20786.2%20L344.5%20791.5%20L345.8%20796.9%20L347.0%20802.3%20L348.2%20807.7%20L349.2%20813.1%20L350.1%20818.5%20L350.9%20823.8%20L351.7%20829.2%20L352.3%20834.6%20L352.8%20840.0%20L353.2%20845.4%20L353.5%20850.8%20L353.7%20856.2%20L353.8%20861.5%20L353.8%20866.9%20L353.7%20872.3%20L353.5%20877.7%20L353.2%20883.1%20L352.8%20888.5%20L352.3%20893.8%20L351.7%20899.2%20L351.1%20904.6%20L350.3%20910.0%20L349.4%20915.4%20L348.5%20920.8%20L347.5%20926.2%20L346.4%20931.5%20L345.2%20936.9%20L344.0%20942.3%20L342.7%20947.7%20L341.4%20953.1%20L340.0%20958.5%20L338.5%20963.8%20L337.0%20969.2%20L335.5%20974.6%20L333.9%20980.0%20L332.3%20985.4%20L330.7%20990.8%20L329.1%20996.2%20L327.5%201001.5%20L325.8%201006.9%20L324.2%201012.3%20L322.5%201017.7%20L320.9%201023.1%20L319.3%201028.5%20L317.7%201033.8%20L316.1%201039.2%20L314.5%201044.6%20L313.0%201050.0%20L311.5%201055.4%20L310.1%201060.8%20L308.7%201066.2%20L307.3%201071.5%20L306.0%201076.9%20L304.8%201082.3%20L303.6%201087.7%20L302.5%201093.1%20L301.4%201098.5%20L300.4%201103.8%20L299.5%201109.2%20L298.6%201114.6%20L297.8%201120.0%20L297.1%201125.4%20L296.4%201130.8%20L295.8%201136.2%20L295.3%201141.5%20L294.9%201146.9%20L294.6%201152.3%20L294.3%201157.7%20L294.1%201163.1%20L293.9%201168.5%20L293.8%201173.8%20L293.8%201179.2%20L293.9%201184.6%20L294.0%201190.0%20L294.2%201195.4%20L294.4%201200.8%20L294.7%201206.2%20L295.1%201211.5%20L295.5%201216.9%20L295.9%201222.3%20L296.4%201227.7%20L296.9%201233.1%20L297.5%201238.5%20L298.1%201243.8%20L298.7%201249.2%20L299.4%201254.6%20L300.1%201260.0%20L300.8%201265.4%20L301.5%201270.8%20L302.2%201276.2%20L302.9%201281.5%20L303.6%201286.9%20L304.3%201292.3%20L305.0%201297.7%20L305.7%201303.1%20L306.4%201308.5%20L307.1%201313.8%20L307.7%201319.2%20L308.4%201324.6%20L309.0%201330.0%20L309.5%201335.4%20L310.0%201340.8%20L310.5%201346.2%20L311.0%201351.5%20L311.4%201356.9%20L311.8%201362.3%20L312.1%201367.7%20L312.4%201373.1%20L312.6%201378.5%20L312.8%201383.8%20L312.9%201389.2%20L313.0%201394.6%20L313.0%201400.0%20L587.0%201400.0%20L587.0%201394.6%20L586.9%201389.2%20L586.8%201383.8%20L586.6%201378.5%20L586.4%201373.1%20L586.1%201367.7%20L585.8%201362.3%20L585.4%201356.9%20L585.0%201351.5%20L584.5%201346.2%20L584.0%201340.8%20L583.5%201335.4%20L583.0%201330.0%20L582.4%201324.6%20L581.7%201319.2%20L581.1%201313.8%20L580.4%201308.5%20L579.7%201303.1%20L579.0%201297.7%20L578.3%201292.3%20L577.6%201286.9%20L576.9%201281.5%20L576.2%201276.2%20L575.5%201270.8%20L574.8%201265.4%20L574.1%201260.0%20L573.4%201254.6%20L572.7%201249.2%20L572.1%201243.8%20L571.5%201238.5%20L570.9%201233.1%20L570.4%201227.7%20L569.9%201222.3%20L569.5%201216.9%20L569.1%201211.5%20L568.7%201206.2%20L568.4%201200.8%20L568.2%201195.4%20L568.0%201190.0%20L567.9%201184.6%20L567.8%201179.2%20L567.8%201173.8%20L567.9%201168.5%20L568.1%201163.1%20L568.3%201157.7%20L568.6%201152.3%20L568.9%201146.9%20L569.3%201141.5%20L569.8%201136.2%20L570.4%201130.8%20L571.1%201125.4%20L571.8%201120.0%20L572.6%201114.6%20L573.5%201109.2%20L574.4%201103.8%20L575.4%201098.5%20L576.5%201093.1%20L577.6%201087.7%20L578.8%201082.3%20L580.0%201076.9%20L581.3%201071.5%20L582.7%201066.2%20L584.1%201060.8%20L585.5%201055.4%20L587.0%201050.0%20L588.5%201044.6%20L590.1%201039.2%20L591.7%201033.8%20L593.3%201028.5%20L594.9%201023.1%20L596.5%201017.7%20L598.2%201012.3%20L599.8%201006.9%20L601.5%201001.5%20L603.1%20996.2%20L604.7%20990.8%20L606.3%20985.4%20L607.9%20980.0%20L609.5%20974.6%20L611.0%20969.2%20L612.5%20963.8%20L614.0%20958.5%20L615.4%20953.1%20L616.7%20947.7%20L618.0%20942.3%20L619.2%20936.9%20L620.4%20931.5%20L621.5%20926.2%20L622.5%20920.8%20L623.4%20915.4%20L624.3%20910.0%20L625.1%20904.6%20L625.7%20899.2%20L626.3%20893.8%20L626.8%20888.5%20L627.2%20883.1%20L627.5%20877.7%20L627.7%20872.3%20L627.8%20866.9%20L627.8%20861.5%20L627.7%20856.2%20L627.5%20850.8%20L627.2%20845.4%20L626.8%20840.0%20L626.3%20834.6%20L625.7%20829.2%20L624.9%20823.8%20L624.1%20818.5%20L623.2%20813.1%20L622.2%20807.7%20L621.0%20802.3%20L619.8%20796.9%20L618.5%20791.5%20L617.2%20786.2%20L615.7%20780.8%20L614.2%20775.4%20L612.5%20770.0%20L610.9%20764.6%20L609.1%20759.2%20L607.3%20753.8%20L605.4%20748.5%20L603.5%20743.1%20L601.6%20737.7%20L599.5%20732.3%20L597.5%20726.9%20L595.4%20721.5%20L593.4%20716.2%20L591.2%20710.8%20L589.1%20705.4%20L587.0%20700.0%20L584.9%20694.6%20L582.8%20689.2%20L580.6%20683.8%20L578.6%20678.5%20L576.5%20673.1%20L574.5%20667.7%20L572.4%20662.3%20L570.5%20656.9%20L568.6%20651.5%20L566.7%20646.2%20L564.9%20640.8%20L563.1%20635.4%20L561.5%20630.0%20L559.8%20624.6%20L558.3%20619.2%20L556.8%20613.8%20L555.5%20608.5%20L554.2%20603.1%20L553.0%20597.7%20L551.8%20592.3%20L550.8%20586.9%20L549.9%20581.5%20L549.1%20576.2%20L548.3%20570.8%20L547.7%20565.4%20L547.2%20560.0%20L546.8%20554.6%20L546.5%20549.2%20L546.3%20543.8%20L546.2%20538.5%20L546.2%20533.1%20L546.3%20527.7%20L546.5%20522.3%20L546.8%20516.9%20L547.2%20511.5%20L547.7%20506.2%20L548.3%20500.8%20L548.9%20495.4%20L549.7%20490.0%20L550.6%20484.6%20L551.5%20479.2%20L552.5%20473.8%20L553.6%20468.5%20L554.8%20463.1%20L556.0%20457.7%20L557.3%20452.3%20L558.6%20446.9%20L560.0%20441.5%20L561.5%20436.2%20L563.0%20430.8%20L564.5%20425.4%20L566.1%20420.0%20L567.7%20414.6%20L569.3%20409.2%20L570.9%20403.8%20L572.5%20398.5%20L574.2%20393.1%20L575.8%20387.7%20L577.5%20382.3%20L579.1%20376.9%20L580.7%20371.5%20L582.3%20366.2%20L583.9%20360.8%20L585.5%20355.4%20L587.0%20350.0%20L588.5%20344.6%20L589.9%20339.2%20L591.3%20333.8%20L592.7%20328.5%20L594.0%20323.1%20L595.2%20317.7%20L596.4%20312.3%20L597.5%20306.9%20L598.6%20301.5%20L599.6%20296.2%20L600.5%20290.8%20L601.4%20285.4%20L602.2%20280.0%20L602.9%20274.6%20L603.6%20269.2%20L604.2%20263.8%20L604.7%20258.5%20L605.1%20253.1%20L605.4%20247.7%20L605.7%20242.3%20L605.9%20236.9%20L606.1%20231.5%20L606.2%20226.2%20L606.2%20220.8%20L606.1%20215.4%20L606.0%20210.0%20L605.8%20204.6%20L605.6%20199.2%20L605.3%20193.8%20L604.9%20188.5%20L604.5%20183.1%20L604.1%20177.7%20L603.6%20172.3%20L603.1%20166.9%20L602.5%20161.5%20L601.9%20156.2%20L601.3%20150.8%20L600.6%20145.4%20L599.9%20140.0%20L599.2%20134.6%20L598.5%20129.2%20L597.8%20123.8%20L597.1%20118.5%20L596.4%20113.1%20L595.7%20107.7%20L595.0%20102.3%20L594.3%2096.9%20L593.6%2091.5%20L592.9%2086.2%20L592.3%2080.8%20L591.6%2075.4%20L591.0%2070.0%20L590.5%2064.6%20L590.0%2059.2%20L589.5%2053.8%20L589.0%2048.5%20L588.6%2043.1%20L588.2%2037.7%20L587.9%2032.3%20L587.6%2026.9%20L587.4%2021.5%20L587.2%2016.2%20L587.1%2010.8%20L587.0%205.4%20L587.0%200.0%20Z%22%20fill%3D%22url%28%23depth%29%22%2F%3E%0A%20%20%3Cg%20clip-path%3D%22url%28%23rc%29%22%3E%3Crect%20x%3D%220%22%20y%3D%221176%22%20width%3D%22900%22%20height%3D%22224%22%20fill%3D%22url%28%23egaal%29%22%2F%3E%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E"); background-repeat:no-repeat;background-position:center top; background-size:var(--brug-breed) 100%; } .werelden{padding:34px 0 var(--ruimte)} .werelden .rooster{max-width:1320px;margin:0 auto; display:grid;grid-template-columns:1fr var(--rivier-kolom) 1fr;gap:0;align-items:start} .blok{display:block;text-decoration:none;color:inherit;padding:30px 34px; opacity:.45;filter:saturate(.35);transition:all .35s ease} .blok h2{font-size:clamp(24px,3vw,34px);margin-bottom:8px} .blok .meer{display:inline-block;margin-top:8px;color:var(--primair);font-weight:600} .blok:hover,.blok:focus-visible{opacity:1;filter:none;background:var(--vlak); box-shadow:0 18px 44px rgba(48,74,91,.14)} .kol-links{grid-column:1;text-align:right;border-radius:20px 0 0 20px;max-width:420px;margin-left:auto;margin-top:60px} .kol-rechts{grid-column:3;margin-top:230px;border-radius:0 20px 20px 0;max-width:420px;margin-right:auto} /* Tekstpanelen: de rivier verdwijnt erachter en komt er tussenin weer tevoorschijn */ .paneel{background:var(--licht);border-radius:20px;padding:clamp(26px,3.4vw,44px); box-shadow:0 10px 30px rgba(48,74,91,.07)} .paneelvak{padding:var(--ruimte) 0} .paneelvak .wrap{max-width:900px} .stappen{list-style:none;margin:0;padding:0;position:relative} .stappen::before{content:"";position:absolute;left:17px;top:14px;bottom:14px;width:2px; background:linear-gradient(var(--zacht),rgba(165,201,223,0))} .stappen li{position:relative;padding:0 0 18px 56px} .stappen li:last-child{padding-bottom:0} .stappen .nr{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%; background:var(--primair);color:var(--licht);display:grid;place-items:center;font-weight:600;font-size:15px} .stappen strong{display:block;font-family:"Fraunces",Georgia,serif;font-size:19px;margin-bottom:2px} /* ===================== CONTACT ===================== */ /* HET MEER — het contactblok is het water zelf. Het masker bepaalt de vorm: bovenaan exact de rivierbreedte, dan tot twee keer zo breed, met zachte randen zodat je niet ziet waar het water ophoudt. */ .contact{ position:relative;text-align:center;margin-top:clamp(-80px,-5vw,-30px); padding:clamp(130px,16vw,230px) 0 clamp(100px,11vw,170px); } .contact::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(to bottom, #93b6bb 0%, #9dbcc0 14%, #a8c4c8 30%, #b6cfd2 48%, #c6d9dc 66%, #d8e5e8 82%, #E9F1F6 100%); -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20900%201000%22%20width%3D%22900%22%20height%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cdefs%3E%0A%20%3ClinearGradient%20id%3D%22vv%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%0A%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.16%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.42%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%221%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.74%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%221%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.92%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.55%22%2F%3E%0A%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%0A%20%3C%2FlinearGradient%3E%0A%20%3Cfilter%20id%3D%22zacht%22%20x%3D%22-25%25%22%20y%3D%22-15%25%22%20width%3D%22150%25%22%20height%3D%22130%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2226%2018%22%2F%3E%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3Cg%20filter%3D%22url%28%23zacht%29%22%3E%0A%20%3Cpath%20d%3D%22M275%20-220%0A%20%20%20%20%20%20%20%20%20%20L275%200%0A%20%20%20%20%20%20%20%20%20%20C%20269%2090%20150%20170%20100%20300%0A%20%20%20%20%20%20%20%20%20%20L100%201000%20L800%201000%20L800%20300%0A%20%20%20%20%20%20%20%20%20%20C%20750%20170%20631%2090%20625%200%0A%20%20%20%20%20%20%20%20%20%20L625%20-220%20Z%22%20fill%3D%22url%28%23vv%29%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20900%201000%22%20width%3D%22900%22%20height%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cdefs%3E%0A%20%3ClinearGradient%20id%3D%22vv%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%0A%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.16%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.42%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%221%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.74%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%221%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.92%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.55%22%2F%3E%0A%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%0A%20%3C%2FlinearGradient%3E%0A%20%3Cfilter%20id%3D%22zacht%22%20x%3D%22-25%25%22%20y%3D%22-15%25%22%20width%3D%22150%25%22%20height%3D%22130%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2226%2018%22%2F%3E%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3Cg%20filter%3D%22url%28%23zacht%29%22%3E%0A%20%3Cpath%20d%3D%22M275%20-220%0A%20%20%20%20%20%20%20%20%20%20L275%200%0A%20%20%20%20%20%20%20%20%20%20C%20269%2090%20150%20170%20100%20300%0A%20%20%20%20%20%20%20%20%20%20L100%201000%20L800%201000%20L800%20300%0A%20%20%20%20%20%20%20%20%20%20C%20750%20170%20631%2090%20625%200%0A%20%20%20%20%20%20%20%20%20%20L625%20-220%20Z%22%20fill%3D%22url%28%23vv%29%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E"); -webkit-mask-size:var(--brug-breed) 100%;mask-size:var(--brug-breed) 100%; -webkit-mask-position:center top;mask-position:center top; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; } .contact > *{position:relative;z-index:1} .contact .label{color:var(--primair)} .gegevens{list-style:none;padding:0;margin:22px 0 26px;display:flex;flex-wrap:wrap; justify-content:center;gap:12px 26px} .gegevens a{text-decoration:none;font-weight:600} .gegevens a:hover{text-decoration:underline} /* ===================== VOETTEKST ===================== */ footer{background:transparent;border-top:1px solid rgba(168,168,162,.35);padding:40px 0 26px;background:transparent} .voet{max-width:1180px;margin:0 auto;padding:0 max(28px,var(--zij)); display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:30px;align-items:start} .voet .merk{max-width:230px} .voet .merk .mark{display:block;width:132px;height:64px;margin-bottom:10px} .voet .merknaam{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:24px;letter-spacing:-.02em;line-height:1.1} .voet .merkslogan{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--primair);margin-top:6px} .voet h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust); font-family:"IBM Plex Sans",sans-serif;font-weight:600;margin-bottom:10px} .voet nav{display:flex;flex-direction:column;gap:7px} .voet a{text-decoration:none} .voet a:hover{text-decoration:underline} .voetregel{max-width:1180px;margin:26px auto 0;padding:16px max(28px,var(--zij)) 0; border-top:1px solid rgba(168,168,162,.32);font-size:13px;color:var(--rust); display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between} /* ===================== ANIMATIE ===================== */ .op{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease} .op.zichtbaar{opacity:1;transform:none} /* ===================== KLEINERE SCHERMEN ===================== */ @media (max-width:1180px){ :root{--zij:96px} .zijbrug svg,.zijbrug img{width:56px} .balkmenu{gap:16px} .balkmenu a{font-size:14px} } @media (max-width:900px){ :root{--zij:72px} .zijbrug svg,.zijbrug img{width:44px} } @media (max-width:640px){ :root{--zij:14px} .zijbrug{display:none} .balk{flex-wrap:wrap;gap:10px} .balkmenu{order:3;width:100%;margin-left:0;justify-content:space-between;gap:8px;overflow-x:auto} .werelden .rooster{grid-template-columns:1fr;gap:20px;padding:0 var(--zij)} .kol-links,.kol-rechts{grid-column:1;margin-top:0;text-align:left;border-radius:20px} .blok{opacity:1;filter:none;background:rgba(255,255,255,.9)} .brugnav a{font-size:13px;padding:6px 8px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .op{opacity:1;transform:none;transition:none} } /* ============================================================ DEEL 2 — DE ZES OVERIGE PAGINA'S Elke pagina heeft een eigen accentkleur uit de huisstijl. Zet de juiste klasse op , bijvoorbeeld: ============================================================ */ body{--pagina:var(--primair);--pagina-zacht:#E9F1F6;--pagina-band:#F4F0EB} body.p-overmij {--pagina:#897057;--pagina-zacht:#F1E9DF;--pagina-band:#F6F0E7} body.p-portfolio{--pagina:#456982;--pagina-zacht:#E6EEF4;--pagina-band:#EFF3F6} body.p-tarieven {--pagina:#304A5B;--pagina-zacht:#E7ECF0;--pagina-band:#EEF1F3} body.p-contact {--pagina:#4F87A8;--pagina-zacht:#E3EFF6;--pagina-band:#EAF2F7} body.p-events {--pagina:#9A7B54;--pagina-zacht:#F3EADD;--pagina-band:#F7F1E7} body.p-proces {--pagina:#5A8AA6;--pagina-zacht:#E6F0F5;--pagina-band:#EDF3F7} /* Rustige achtergrond voor alle subpagina's — geen brug, geen rivier */ body.sub{ background:linear-gradient(to bottom, #FBF9F6 0%, var(--pagina-band) 16%, var(--pagina-band) 30%, #FBF9F6 62%, #FBF9F6 100%); } body.sub .label{color:var(--rust-tekst)} /* ===================== PAGINAKOP ===================== */ body.sub section{padding:0 0 var(--ruimte)} .paginakop{position:relative;overflow:hidden;padding:clamp(46px,6vw,86px) 0 var(--ruimte)} .paginakop .wrap{max-width:900px;position:relative;z-index:2} .paginakop h1{font-size:clamp(38px,6.2vw,62px);line-height:1.06;margin:0 0 14px} .paginakop .lead{font-size:clamp(18px,2.1vw,21px);max-width:640px;margin:0} .paginakop .kruimel{font-size:13px;color:var(--rust);margin:0 0 16px;font-weight:600; letter-spacing:.06em} .paginakop .kruimel a{color:var(--rust);text-decoration:none} .paginakop .kruimel a:hover{color:var(--pagina);text-decoration:underline} /* Het versiersel achter de kop — per pagina anders, altijd rustig */ .versiersel{position:absolute;inset:0;z-index:1;pointer-events:none} .v-metsel{ background-image:repeating-linear-gradient(to bottom, rgba(137,112,87,.11) 0 1px, transparent 1px 26px); -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 20%,transparent 84%); mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 20%,transparent 84%); } .v-raster{ background-image:radial-gradient(circle,rgba(69,105,130,.20) 1.4px,transparent 1.5px); background-size:26px 26px; -webkit-mask-image:radial-gradient(120% 90% at 50% 14%,rgba(0,0,0,.6),transparent 72%); mask-image:radial-gradient(120% 90% at 50% 14%,rgba(0,0,0,.6),transparent 72%); } .v-banen{ background-image:repeating-linear-gradient(to right, rgba(48,74,91,.05) 0 1px, transparent 1px 168px); -webkit-mask-image:radial-gradient(120% 100% at 50% 20%,rgba(0,0,0,.8),transparent 78%); mask-image:radial-gradient(120% 100% at 50% 20%,rgba(0,0,0,.8),transparent 78%); } .v-kringen{ background-image:repeating-radial-gradient(circle at 50% 12%, rgba(79,135,168,.16) 0 1.5px, transparent 1.5px 42px); -webkit-mask-image:radial-gradient(90% 120% at 50% 10%,rgba(0,0,0,.75),transparent 74%); mask-image:radial-gradient(90% 120% at 50% 10%,rgba(0,0,0,.75),transparent 74%); } .v-vonken{ background-image: radial-gradient(circle,rgba(154,123,84,.16) 1.6px,transparent 1.7px), radial-gradient(circle,rgba(154,123,84,.11) 1.2px,transparent 1.3px); background-size:34px 34px, 34px 34px; background-position:0 0, 17px 17px; -webkit-mask-image:radial-gradient(120% 95% at 50% 8%,rgba(0,0,0,.85),transparent 70%); mask-image:radial-gradient(120% 95% at 50% 8%,rgba(0,0,0,.85),transparent 70%); } .v-stroomlijn{ background-image:repeating-linear-gradient(114deg, rgba(90,138,166,.13) 0 2px, transparent 2px 30px); -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.65) 18%,transparent 86%); mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.65) 18%,transparent 86%); } /* ===================== ALGEMENE BOUWSTENEN ===================== */ .breed{max-width:1180px;margin:0 auto;padding:0 max(24px,calc(var(--zij) + 22px))} .smal{max-width:900px;margin:0 auto;padding:0 max(24px,calc(var(--zij) + 22px))} .kopje{margin:0 0 26px} .kopje h2{font-size:clamp(26px,3.4vw,40px);margin:0 0 10px} .kopje p{max-width:620px;margin:0} /* Regellengte nooit boven ~68 tekens */ .kaart p,.kaart li,.tijdlijn p,.knelpunten li,.factoren li,.portret .verhaal p, .paneel p,.paneel li,.introlink p{max-width:68ch} .slot p,.kaart.midden p{max-width:52ch} .kaart{background:var(--licht);border-radius:20px;padding:clamp(24px,2.8vw,34px); box-shadow:0 10px 30px rgba(48,74,91,.07);border:1px solid rgba(168,168,162,.20)} .kaart h2{font-size:clamp(22px,2.4vw,28px);margin:0 0 10px} .kaart h3{font-size:21px;margin:0 0 8px} a.kaart{display:block;text-decoration:none;color:inherit; transition:transform .28s,box-shadow .28s,border-color .28s} a.kaart:hover{transform:translateY(-4px);border-color:var(--pagina); box-shadow:0 18px 42px rgba(48,74,91,.14)} a.kaart .meer{display:inline-block;margin-top:12px;color:var(--pagina);font-weight:600} a.kaart:hover .meer{text-decoration:underline} .kaart.midden{text-align:center} .kaart.midden p{margin-left:auto;margin-right:auto} .kaart .knoppen{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px} .rooster2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px} .rooster3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px} .chip{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--pagina);background:var(--pagina-zacht); padding:6px 13px;border-radius:999px;margin:0 0 12px} .casehoofd{display:flex;align-items:center;gap:14px;margin-bottom:6px} .casehoofd .chip,.casehoofd .nummer{margin:0} /* Fotoplek — vervang deze door je eigen foto */ .fotoplek{position:relative;display:grid;place-items:center;text-align:center; border:2px dashed var(--pagina);border-color:color-mix(in srgb,var(--pagina) 55%,transparent); border-radius:18px;background:var(--pagina-band); color:var(--inkt);padding:26px 20px;min-height:180px;font-size:13.5px;line-height:1.45} .fotoplek .titel{display:block;font-weight:600;font-size:15px;margin-bottom:5px;color:var(--pagina)} .fotoplek code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px; background:var(--pagina-zacht);padding:2px 7px;border-radius:6px;display:inline-block;margin-top:7px} .fotoplek.staand{min-height:400px} .fotoplek.breed{min-height:260px} /* ===================== OVER MIJ ===================== */ .portret{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:clamp(26px,4vw,54px); align-items:start} .portret .verhaal p{font-size:18px} .portret .verhaal p:first-of-type{font-size:20px} .tijdlijn{list-style:none;margin:0;padding:0;position:relative} .tijdlijn::before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:3px; background:linear-gradient(var(--pagina),transparent);border-radius:2px} .tijdlijn li{position:relative;padding:0 0 26px 46px} .tijdlijn li:last-child{padding-bottom:0} .tijdlijn .steen{position:absolute;left:0;top:3px;width:25px;height:25px;border-radius:6px; background:var(--pagina);box-shadow:0 3px 10px rgba(137,112,87,.3)} .tijdlijn h3{font-size:20px;margin:0 0 4px} .tijdlijn p{margin:0} .feiten{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px; border-radius:16px;overflow:hidden;background:rgba(168,168,162,.28)} .feiten li{background:var(--licht);padding:20px 22px} .feiten .wat{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--rust);font-weight:600;margin-bottom:5px} .feiten .waarde{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:18px;line-height:1.25} /* ===================== PORTFOLIO ===================== */ .case{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:center; padding:clamp(26px,3.4vw,44px) 0;border-top:1px solid rgba(168,168,162,.32)} .case:first-of-type{border-top:0} .case:nth-child(even) .casebeeld{order:2} .case .nummer{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:15px; color:var(--rust);letter-spacing:.1em;display:block;margin-bottom:10px} .case h2{font-size:clamp(24px,3vw,34px);margin:10px 0 12px} .caserij{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px} .caserij li{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:start;font-size:16px} .caserij .wat{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust); font-weight:600;padding-top:4px} .voorbeeldmelding{background:var(--pagina-band);border:1px solid var(--pagina); border-color:color-mix(in srgb,var(--pagina) 35%,transparent);border-radius:16px; padding:18px 22px;font-size:15px;color:var(--inkt)} .voorbeeldmelding strong{color:var(--pagina)} /* ===================== PRIJZEN ===================== */ .pakketten{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:22px;align-items:stretch} .pakket{position:relative;background:var(--licht);border-radius:22px;overflow:hidden; border:1px solid rgba(168,168,162,.28);box-shadow:0 12px 34px rgba(48,74,91,.08); display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s} .pakket::before{content:"";display:block;height:9px;background:var(--pagina);opacity:.85} .pakket:hover{transform:translateY(-5px);box-shadow:0 20px 46px rgba(48,74,91,.14)} .pakket .binnen{padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;height:100%} .pakket h2{font-size:24px;margin:12px 0 8px} .pakket .chip{align-self:flex-start} .pakket .voor{font-size:15px;color:var(--rust);margin:0 0 16px} .pakket ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px;font-size:15.5px} .pakket li{position:relative;padding-left:26px} .pakket li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px; border-radius:3px;background:var(--pagina);opacity:.75} .pakket .prijs{margin-top:auto;padding-top:16px;border-top:1px solid rgba(168,168,162,.32)} .pakket .prijs .bedrag{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:20px;display:block} .pakket .prijs .bij{font-size:14px;color:var(--rust)} .pakket.uitgelicht{border-color:var(--pagina)} .factoren{list-style:none;margin:0;padding:0;counter-reset:f;display:grid;gap:16px} .factoren li{position:relative;padding-left:52px;counter-increment:f} .factoren li::before{content:counter(f);position:absolute;left:0;top:0;width:34px;height:34px; border-radius:50%;background:var(--pagina);color:var(--licht);display:grid;place-items:center; font-weight:600;font-size:15px} .factoren strong{display:block;font-family:"Fraunces",Georgia,serif;font-size:18px;margin-bottom:2px} .altijd{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 26px} .altijd li{position:relative;padding-left:28px;font-size:16px} .altijd li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:12px; border-radius:3px;background:var(--pagina);opacity:.7} /* ===================== CONTACT ===================== */ .manieren{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .manier{display:block;text-decoration:none;color:inherit;background:var(--licht); border:1px solid rgba(168,168,162,.28);border-radius:20px;padding:26px 24px; box-shadow:0 10px 28px rgba(48,74,91,.07);transition:transform .28s,box-shadow .28s,border-color .28s} .manier:hover{transform:translateY(-4px);border-color:var(--pagina); box-shadow:0 18px 42px rgba(48,74,91,.14)} .manier .icoon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px; background:var(--pagina-zacht);margin-bottom:14px} .manier .icoon svg{width:23px;height:23px;stroke:var(--pagina);fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .manier h2{font-size:19px;margin:0 0 4px} .manier .waarde{font-weight:600;color:var(--pagina);overflow-wrap:break-word} .manier .uitleg{font-size:14.5px;color:var(--rust);margin:6px 0 0} .beschikbaar{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px; border-radius:18px;overflow:hidden;background:rgba(168,168,162,.26)} .beschikbaar div{background:var(--licht);padding:22px 24px} .beschikbaar .wat{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--rust);font-weight:600;margin-bottom:6px} /* ===================== EVENTS & PROCES ===================== */ .tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px} .tegel{background:var(--licht);border-radius:18px;padding:24px; border:1px solid rgba(168,168,162,.24);box-shadow:0 8px 24px rgba(48,74,91,.06); transition:transform .28s,box-shadow .28s} .tegel:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(48,74,91,.12)} .tegel h3{font-size:19px;margin:0 0 7px;min-height:2.4em} .tegel p{font-size:15.5px;margin:0} .tegel .streepje{width:34px;height:3px;background:var(--pagina);border-radius:2px;margin:0 0 13px} .stroomstappen{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:22px;counter-reset:s} .stroomstappen li{counter-increment:s;position:relative;padding-top:44px} .stroomstappen li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px; border-radius:10px;background:var(--pagina);color:var(--licht);display:grid;place-items:center; font-weight:600;font-size:15px} .stroomstappen li::after{content:"";position:absolute;left:44px;top:17px;right:-11px;height:2px; background:linear-gradient(to right,var(--pagina),rgba(0,0,0,0));opacity:.4} .stroomstappen li:last-child::after{display:none} .stroomstappen h3{font-size:18px;margin:0 0 5px} .stroomstappen p{font-size:15.5px;margin:0} .knelpunten{list-style:none;margin:0;padding:0;display:grid;gap:14px} .knelpunten li{background:var(--licht);border-left:4px solid var(--pagina);border-radius:0 14px 14px 0; padding:18px 22px;font-size:16.5px;box-shadow:0 6px 18px rgba(48,74,91,.05)} .knelpunten strong{font-family:"Fraunces",Georgia,serif;font-weight:600} .fotostrook{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px} /* ===================== SLOTBLOK (naar contact) ===================== */ .slot{text-align:center;background:var(--pagina-zacht);border-radius:24px; padding:clamp(34px,4.5vw,58px) clamp(24px,3vw,44px)} .slot h2{font-size:clamp(24px,3.2vw,36px);margin:0 0 12px} .slot p{max-width:520px;margin:0 auto 22px} .slot .knoppen{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .knop.licht{background:transparent;color:var(--pagina);border:2px solid var(--pagina); padding:8px 20px} .knop.licht:hover{background:var(--pagina);color:var(--licht)} /* ===================== KLEINERE SCHERMEN ===================== */ @media (max-width:640px){ .manieren{grid-template-columns:1fr} } @media (max-width:900px){ .portret{grid-template-columns:1fr} .case{grid-template-columns:1fr} .case:nth-child(even) .casebeeld{order:0} .stroomstappen li::after{display:none} .caserij li{grid-template-columns:1fr;gap:2px} .fotoplek.staand{min-height:300px} } /* Foto's die de fotoplekken vervangen */ .foto{display:block;width:100%;height:auto;border-radius:18px;object-fit:cover} .portret .foto{aspect-ratio:3/4} .casebeeld .foto,.fotostrook .foto{aspect-ratio:4/3} /* ===================== KEUZEKNOPPEN OP PORTFOLIO ===================== */ .keuze{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:26px} .keuzeknop{appearance:none;font:inherit;text-align:left;cursor:pointer; background:var(--licht);border:1px solid rgba(168,168,162,.28);border-radius:20px; padding:24px 26px;box-shadow:0 10px 28px rgba(48,74,91,.07); display:flex;flex-direction:column;align-items:flex-start;gap:2px; transition:transform .28s,box-shadow .28s,border-color .28s} .keuzeknop:hover{transform:translateY(-4px);border-color:var(--pagina); box-shadow:0 18px 42px rgba(48,74,91,.14)} .keuzeknop .titel{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:21px; color:var(--inkt);line-height:1.25} .keuzeknop .aantal{font-size:14.5px;color:var(--rust);margin-top:4px} .keuzeknop::after{content:"Bekijk de voorbeelden ↓";margin-top:14px;font-size:14.5px; font-weight:600;color:var(--pagina)} .keuzeknop.actief{border-color:var(--pagina);background:var(--pagina-band)} .keuzeknop.actief::after{content:"Verberg de voorbeelden ↑"} .casegroep{animation:opkomen .45s ease} @keyframes opkomen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .casegroep .case:first-child{border-top:0;padding-top:0} /* Naschrift onder een lijst of raster */ .naschrift{margin:22px 0 0;color:var(--rust);font-size:15.5px} /* Kopjes binnen een pakket */ .pakket .kern{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust); font-weight:600;margin:0 0 10px} .pakket ul{margin-bottom:20px} .pakket ul.extra li::before{background:transparent;border:2px solid var(--pagina);opacity:.6} .pakket .prijs .bij{display:block;margin-top:4px;line-height:1.45} /* Voor en na op de procespagina */ .voorna{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-radius:18px; overflow:hidden;background:rgba(168,168,162,.26)} .voorna li{background:var(--licht);display:grid;grid-template-columns:1fr 40px 1fr; align-items:center;gap:10px;padding:18px 24px} .voorna .nu{color:var(--rust)} .voorna .pijl{text-align:center;color:var(--pagina);font-size:19px} .voorna .straks{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:17.5px; color:var(--inkt)} @media (max-width:640px){ .voorna li{grid-template-columns:1fr;gap:2px;text-align:left} .voorna .pijl{text-align:left} } /* Drie knoppen in een slotblok */ .slot .knoppen .knop{flex:0 1 auto} /* ============================================================ DEEL 3 — DUIDELIJKE NAVIGATIE + GRAFISCH ELEMENT PER PAGINA ============================================================ */ /* ---------- Brugnavigatie: echte knoppen op het dek ---------- */ .brugnav a{ background:rgba(251,249,246,.94); border:2px solid var(--primair); box-shadow:0 6px 18px rgba(48,74,91,.22); color:var(--inkt); padding:11px 20px; border-radius:999px; text-shadow:none; transition:transform .22s,background .22s,box-shadow .22s,color .22s,border-color .22s; } .brugnav a::after{ content:"";position:absolute;inset:-8px;border-radius:999px; } .brugnav a:hover,.brugnav a:focus-visible{ background:var(--primair);color:var(--licht);border-color:var(--primair); box-shadow:0 12px 30px rgba(48,74,91,.34); } .brugnav a[aria-current="page"]{ background:var(--accent);border-color:var(--accent);color:var(--licht) } .brugnav a:nth-child(1):hover{transform:translate(-50%,-50%) rotate(-33.9deg) scale(1.08)} .brugnav a:nth-child(2):hover{transform:translate(-50%,-50%) rotate(-23.5deg) scale(1.08)} .brugnav a:nth-child(3):hover{transform:translate(-50%,-50%) rotate(0deg) scale(1.08)} .brugnav a:nth-child(4):hover{transform:translate(-50%,-50%) rotate(23.5deg) scale(1.08)} .brugnav a:nth-child(5):hover{transform:translate(-50%,-50%) rotate(33.9deg) scale(1.08)} /* Aanwijzing boven de brug */ .brughint{text-align:center;font-size:15px;color:var(--rust);font-weight:600; margin:0 0 10px;letter-spacing:.02em} .brughint .pijl{display:inline-block;animation:wippen 1.8s ease-in-out infinite;margin-left:6px} @keyframes wippen{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} /* ---------- Zijbruggen: duidelijk als navigatie ---------- */ .zijbrug span{ background:var(--licht);border:1.5px solid var(--primair);color:var(--primair); box-shadow:0 4px 12px rgba(48,74,91,.16);font-weight:600;font-size:13px;padding:7px 14px} .zijbrug svg,.zijbrug img{opacity:.85} .zijbrug .pijl{display:block;font-size:19px;color:var(--primair);line-height:1;margin-top:-2px} .zijbrug:hover span{background:var(--primair);color:var(--licht);border-color:var(--primair)} /* Het metselwerk achter het portret is vervallen; de foto staat nu vrij. */ /* ---------- EVENTS: scorebord boven de zes vormen ---------- */ .scorebord{background:#26333d;border-radius:16px;padding:20px 26px;margin:0 0 26px; display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; box-shadow:0 12px 30px rgba(38,51,61,.28);position:relative;overflow:hidden} .scorebord::before{content:"";position:absolute;inset:0; background-image:radial-gradient(circle,rgba(255,214,140,.20) 1.2px,transparent 1.3px); background-size:9px 9px;opacity:.5} .scorebord .tekst{position:relative;font-family:"IBM Plex Sans",sans-serif;font-weight:600; letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:#ffd68c} .scorebord .getal{position:relative;font-family:"Fraunces",Georgia,serif;font-weight:600; font-size:clamp(28px,4vw,44px);color:#ffd68c;line-height:1; text-shadow:0 0 18px rgba(255,214,140,.45)} .scorebord .los{position:relative;display:flex;gap:26px;align-items:baseline;flex-wrap:wrap} .scorebord .item{text-align:center} .scorebord .item .wat{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:rgba(255,214,140,.75);margin-top:4px;font-weight:600} /* ---------- PROCES: lijn die van rommelig naar recht loopt ---------- */ .stroomlijnpad{position:relative} /* De verticale lijn langs de procespagina is vervallen. */ .stroomlijnpad>*{position:relative;z-index:1} /* ---------- TARIEVEN: pakketten lopen op als een trap ---------- */ .pakketten.trap{align-items:start} .pakketten.trap .pakket:nth-child(1){margin-top:56px} .pakketten.trap .pakket:nth-child(2){margin-top:28px} .pakketten.trap .pakket:nth-child(3){margin-top:0} .pakket .fase{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--licht);background:var(--pagina); padding:4px 12px;border-radius:999px;margin:0 0 10px} .pakket .prijs .fasewoord{color:var(--pagina);font-weight:600} @media (max-width:980px){ .pakketten.trap .pakket{margin-top:0 !important} } /* ---------- CONTACT: blokken schuin als de brugleuning ---------- */ .manieren.leuning{align-items:center} .manieren.leuning .manier:nth-child(1){transform:rotate(-2.2deg)} .manieren.leuning .manier:nth-child(2){transform:rotate(-.8deg)} .manieren.leuning .manier:nth-child(3){transform:rotate(.8deg)} .manieren.leuning .manier:nth-child(4){transform:rotate(2.2deg)} .manieren.leuning .manier:hover{transform:translateY(-5px) rotate(0deg)} /* ---------- PORTFOLIO: rivier tussen de twee keuzeknoppen ---------- */ .keuze.tweekanten{position:relative} .keuze.tweekanten{gap:56px} .keuze.tweekanten::before{ content:"";position:absolute;left:50%;top:-18px;bottom:-18px;width:34px;margin-left:-17px; background:linear-gradient(to bottom,rgba(165,201,223,0),rgba(132,170,179,.55) 22%, rgba(132,170,179,.55) 78%,rgba(165,201,223,0)); border-radius:999px;z-index:0} .keuze.tweekanten .keuzeknop{position:relative;z-index:1} @media (max-width:620px){.keuze.tweekanten::before{display:none}} /* Naamregel onder het verhaal op Over mij */ .naamregel{font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:18px; line-height:1.6;color:var(--accent);margin-top:22px} .kopje .streep.onder{margin-top:12px} /* Kolomkoppen boven het voor-en-na */ .voornakop{display:grid;grid-template-columns:1fr 40px 1fr;gap:10px;padding:0 24px 10px; font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);font-weight:600} @media (max-width:640px){.voornakop{display:none}} /* Brede tegel onder een raster */ .breedtegel{margin-top:18px} .naschrift.midden{text-align:center;margin:0} /* Feitenregel boven een eventcase */ .case .caseinfo{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust); font-weight:600;margin:0 0 6px;background:none;padding:0;display:block} /* Twee tegels naast elkaar */ .tegels.twee{grid-template-columns:repeat(2,1fr)} .tegels.twee .tegel{padding:28px 30px} .tegels.twee h3{min-height:0} @media (max-width:700px){.tegels.twee{grid-template-columns:1fr}} /* ---------- Brugnavigatie op smalle schermen ---------- */ .brugnav-mobiel{display:none} @media (max-width:820px){ .brugnav{display:none} .brugnav-mobiel{ display:grid;grid-template-columns:repeat(2,1fr);gap:10px; max-width:420px;margin:18px auto 0;padding:0 max(20px,var(--zij))} .brugnav-mobiel a{ display:block;text-align:center;text-decoration:none;font-weight:600;font-size:15px; color:var(--inkt);background:var(--licht);border:2px solid var(--primair); border-radius:999px;padding:12px 10px; box-shadow:0 4px 12px rgba(48,74,91,.14)} .brugnav-mobiel a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--licht)} .brugnav-mobiel a:nth-child(5){grid-column:1 / -1} } /* ============================================================ DEEL 4 — CONSISTENTIE EN NAVIGATIE ============================================================ */ /* Slogan onder het logo in de bovenbalk */ .balk .logo{flex-direction:row;align-items:center} .balk .logo .naamvak{display:flex;flex-direction:column;line-height:1.05} .balk .logo .slogantje{font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:8.5px; letter-spacing:.18em;text-transform:uppercase;color:var(--primair);margin-top:3px} @media (max-width:900px){.balk .logo .slogantje{display:none}} /* Submenu onder Wat doe ik */ .menugroep{position:relative;display:inline-flex} .submenu{position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(6px); display:flex;flex-direction:column;gap:2px;min-width:210px;padding:8px; background:var(--licht);border:1px solid rgba(168,168,162,.3);border-radius:14px; box-shadow:0 14px 34px rgba(48,74,91,.16); opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s,transform .2s;z-index:80} .menugroep:hover .submenu,.menugroep:focus-within .submenu{ opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)} .submenu a{font-size:14px;font-weight:600;padding:8px 12px;border-radius:9px;white-space:nowrap} .submenu a:hover{background:var(--zacht);color:var(--inkt)} .submenu a::after{display:none} @media (max-width:900px){ .menugroep{display:inline} .submenu{display:none} } /* Voettekst: onderliggende pagina's springen in, plus LinkedIn-blok */ .voet nav a.onder{padding-left:16px;position:relative;font-size:15px;color:var(--primair)} .voet nav a.onder::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:1.5px; background:var(--rust)} /* LinkedIn rechtsonder in de voetregel */ .voetrechts{display:inline-flex;align-items:center;gap:16px} .lilink{display:inline-flex;align-items:center;gap:8px;text-decoration:none; border:1px solid rgba(168,168,162,.42);border-radius:999px;padding:5px 13px 5px 10px; font-weight:600;font-size:13px;color:var(--primair);background:var(--licht); transition:background .25s,border-color .25s,color .25s} .lilink svg{width:15px;height:15px;fill:currentColor;display:block;flex:none} .lilink:hover{background:var(--primair);border-color:var(--primair);color:var(--licht);text-decoration:none} /* Actieve knop op de brug: blauw in plaats van steenbruin */ .brugnav a[aria-current="page"]{background:var(--primair);border-color:var(--primair);color:var(--licht)} .brugnav-mobiel a[aria-current="page"]{background:var(--primair);border-color:var(--primair);color:var(--licht)} /* Eén hoekafronding voor alle kaartvormen */ .kaart,.tegel,.pakket,.manier,.keuzeknop,.slot,.voorbeeldmelding,.fotoplek,.scorebord{border-radius:20px} .pakket{border-radius:20px} .slot{border-radius:24px} /* Kopformaten gelijktrekken */ .pakket h2{font-size:clamp(22px,2.4vw,28px)} .manier h2{font-size:21px} /* Ruimte tussen secties: homepage iets ruimer, maar dichter bij de rest */ :root{--ruimte-thuis:88px} /* Dit neem ik op me: paklijst met vinkjes over de volle breedte */ .paklijst{list-style:none;margin:0;padding:0;display:grid;gap:2px; border-radius:20px;overflow:hidden;background:rgba(168,168,162,.24)} .paklijst li{background:var(--licht);padding:16px 22px 16px 56px;position:relative;font-size:16.5px} .paklijst li::before{content:"";position:absolute;left:22px;top:50%;margin-top:-8px; width:16px;height:16px;border-radius:5px;background:var(--pagina);opacity:.9} .paklijst li::after{content:"";position:absolute;left:26.5px;top:50%;margin-top:-4px; width:7px;height:4px;border-left:2px solid var(--licht);border-bottom:2px solid var(--licht); transform:rotate(-45deg)} /* Portfolio: knop plus doorverwijzing naar de pagina */ .keuzevak{display:flex;flex-direction:column;gap:10px} .keuzevak .keuzeknop{width:100%} .naarpagina{text-align:center;font-weight:600;font-size:14.5px;color:var(--pagina); text-decoration:none;padding:4px} .naarpagina:hover{text-decoration:underline} /* Homepage volgt hetzelfde ritme als de rest, iets ruimer */ body:not(.sub) section:not(.contact){padding:0 0 calc(var(--ruimte) * 1.15)} body:not(.sub) .paneelvak{padding:0 0 calc(var(--ruimte) * 1.15)} /* ---------- Tarief duidelijk gemarkeerd ---------- */ .pakket .prijs{margin-top:auto;padding:16px 0 0;border-top:1px solid rgba(168,168,162,.32)} .pakket .tarieflabel{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--pagina);background:var(--pagina-zacht); padding:4px 11px;border-radius:999px;margin-bottom:9px} .pakket .prijs .bij{display:block;font-size:14.5px;line-height:1.5;color:var(--inkt)} .pakket .binnen{padding-bottom:0} .pakket .prijs{margin:auto calc(-1 * clamp(24px,2.6vw,32px)) 0; padding:18px clamp(24px,2.6vw,32px) clamp(22px,2.4vw,28px); background:var(--pagina-band);border-top:1px solid rgba(168,168,162,.34)} /* ---------- Portfolio: knop met eigen actieregel ---------- */ .keuzeknop::after{display:none} .keuzeknop .actie{margin-top:14px;font-size:14.5px;font-weight:600;color:var(--pagina)} .keuzeknop .actie::after{content:" \2193"} .keuzeknop.actief .actie::after{content:" \2191"} .keuzeknop.actief .actie{color:var(--pagina)} .keuze{gap:22px} /* ---------- Proces: vijf gelijke tegels ---------- */ .tegels.vijf{grid-template-columns:repeat(2,1fr)} .tegels.vijf .tegel{padding:26px 28px} .tegels.vijf h3{min-height:0} @media (max-width:700px){.tegels.vijf{grid-template-columns:1fr}} .tegel.midden{text-align:center} .tegel.midden .streepje{margin-left:auto;margin-right:auto} /* Portfolio: knop en doorverwijzing in één kaart */ .keuzevak{gap:0;background:var(--licht);border:1px solid rgba(168,168,162,.28); border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(48,74,91,.07); transition:transform .28s,box-shadow .28s,border-color .28s} .keuzevak:hover{transform:translateY(-4px);border-color:var(--pagina); box-shadow:0 18px 42px rgba(48,74,91,.14)} .keuzevak .keuzeknop{border:0;box-shadow:none;border-radius:0;background:transparent; padding:24px 26px 22px} .keuzevak .keuzeknop:hover{transform:none;box-shadow:none;background:transparent} .keuzevak .keuzeknop.actief{background:var(--pagina-band)} .keuzevak .naarpagina{display:block;text-align:left;padding:14px 26px; border-top:1px solid rgba(168,168,162,.28);background:var(--pagina-band); font-size:14.5px;transition:background .25s} .keuzevak .naarpagina:hover{background:var(--pagina-zacht);text-decoration:none} /* ============================================================ DEEL 5 — LAATSTE CONSISTENTIESLAG ============================================================ */ /* 2 + 3. Eén typografische schaal op de hele site */ .blok h2{font-size:clamp(26px,3.4vw,40px)} /* de twee werelden */ .paneel h2{font-size:clamp(22px,2.4vw,28px)} /* panelen op de homepage */ .case h2{font-size:clamp(22px,2.4vw,28px)} /* casetitels op portfolio */ /* 4. Regellengte overal onder de 68 tekens */ .verhaal p{max-width:68ch} /* 5. Gecentreerde tekst nooit breder dan comfortabel leest */ .slot p{max-width:56ch} .introlink p{max-width:60ch;margin-left:auto;margin-right:auto} /* 6. Eén beeldverhouding per soort */ .fotoplek{aspect-ratio:4/3;min-height:0} .fotoplek.staand{aspect-ratio:3/4} .fotoplek.breed{aspect-ratio:4/3} .foto{aspect-ratio:4/3;object-fit:cover} .portret .foto{aspect-ratio:3/4} /* 16. Eén hoverbeweging voor alle kaartvormen */ .kaart:hover,a.kaart:hover,.tegel:hover,.pakket:hover,.manier:hover,.keuzevak:hover{ transform:translateY(-4px)} .manieren.leuning .manier:hover{transform:translateY(-4px) rotate(0deg)} /* 17. Slogan in de balk blijft langer staan */ @media (max-width:900px){ .balk .logo .slogantje{display:block;font-size:7.5px;letter-spacing:.14em} .balk .logo .mark{width:56px;height:27px} } @media (max-width:820px){ .balk .logo .slogantje{display:none} } /* 18. Voetregel links en rechts gelijkwaardig */ .lilink{border:0;background:transparent;padding:0;font-size:inherit;color:var(--rust)} .lilink:hover{background:transparent;color:var(--primair);text-decoration:underline} .lilink svg{width:14px;height:14px} .voetrechts{gap:20px} /* Contactblok op de homepage volgt dezelfde kopmaat als een slotblok */ .contact .wrap h2{font-size:clamp(24px,3.2vw,36px)} /* Losse toelichtingsregels ook onder de 68 tekens */ .naschrift{max-width:68ch} .naschrift.midden{max-width:60ch;margin-left:auto;margin-right:auto} .voorbeeldmelding{max-width:68ch} /* Zijbruggen zijn een bureaubladplezier: op tablet en telefoon staat het menu al bovenaan */ @media (max-width:900px){ :root{--zij:18px} .zijbrug{display:none} } /* De twee werelden stapelen zodra de brugnavigatie dat ook doet */ @media (max-width:900px){ .werelden .rooster{grid-template-columns:1fr;gap:20px;padding:0 var(--zij)} .kol-links,.kol-rechts{grid-column:1;margin-top:0;text-align:left;border-radius:20px;max-width:none} .blok{opacity:1;filter:none;background:rgba(255,255,255,.9)} } /* De bovenbalk breekt af zodra hij te vol wordt */ @media (max-width:900px){ .balk{flex-wrap:wrap;gap:10px} .balkmenu{order:3;width:100%;margin-left:0;justify-content:space-between;gap:8px;overflow-x:auto} } /* LinkedIn in de contactkolom van de voettekst */ .voet .lilink{display:inline-flex;align-items:center;gap:9px;width:fit-content; color:var(--primair);font-weight:400;text-decoration:none} .voet .lilink svg{width:17px;height:17px;fill:var(--licht);flex:none; background:var(--primair);border-radius:4px;padding:2.5px;box-sizing:border-box; transition:background .25s} .voet .lilink:hover{text-decoration:underline} .voet .lilink:hover svg{background:var(--inkt)} /* ============================================================ DEEL 6 — COMPACTE BALK EN MOBIEL MENU ============================================================ */ .balkicoon{display:none;align-items:center;justify-content:center;width:42px;height:42px; border-radius:13px;border:1.5px solid var(--primair);background:var(--licht); color:var(--primair);cursor:pointer;padding:0;flex:none} .balkicoon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .menuknop svg:last-child{display:none} .menuknop[aria-expanded="true"]{background:var(--primair);color:var(--licht)} .menuknop[aria-expanded="true"] svg:first-child{display:none} .menuknop[aria-expanded="true"] svg:last-child{display:block} .mobielmenu[hidden]{display:none !important} .mobielmenu{position:fixed;left:0;right:0;top:65px;bottom:0;z-index:95; background:var(--licht-papier,#FBF9F6);padding:22px max(20px,5vw) 40px; overflow-y:auto;display:flex;flex-direction:column;gap:6px} .mobielmenu nav{display:flex;flex-direction:column;gap:2px} .mobielmenu a{text-decoration:none;color:var(--inkt);font-family:"Fraunces",Georgia,serif; font-weight:600;font-size:22px;padding:13px 6px;border-bottom:1px solid rgba(168,168,162,.28)} .mobielmenu a[aria-current="page"]{color:var(--accent)} .mobielmenu a.onder{font-size:17px;padding-left:26px;position:relative;color:var(--primair); font-family:"IBM Plex Sans",sans-serif} .mobielmenu a.onder::before{content:"";position:absolute;left:6px;top:50%;width:10px;height:1.5px; background:var(--rust)} .mobielmenu .knop{margin-top:22px;text-align:center;font-size:16px;padding:14px 22px} body.menu-open{overflow:hidden} @media (max-width:900px){ .balk{flex-wrap:nowrap;gap:10px;padding-top:11px;padding-bottom:11px} .balkmenu{display:none} .balk>.knop{display:none} .balkicoon{display:inline-flex} .balk .logo{margin-right:auto} } @media (min-width:901px){ .mobielmenu{display:none !important} } /* Kleine actie in het tariefvlak */ .vraagaan{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:600; color:var(--pagina);text-decoration:none} .vraagaan:hover{text-decoration:underline} /* Actieve contactknop in de balk */ .balk > .knop[aria-current="page"]{background:#6F5A42} /* ---------- Contactblok in het meer, na het weghalen van de gegevens ---------- */ .contact .label{color:var(--inkt);opacity:1;text-shadow:none} .contact h2{max-width:24ch;margin-left:auto;margin-right:auto} .contact .wrap > p{max-width:44ch;margin-left:auto;margin-right:auto} .contact .knoppen{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px} .contact .knoppen .knop{min-width:190px;text-align:center} @media (max-width:520px){ .contact .knoppen{flex-direction:column;align-items:center} .contact .knoppen .knop{width:100%;max-width:280px} } /* Op smalle schermen een breed, zacht meer in plaats van de smalle rivierkolom. Het masker schaalt namelijk mee met de schermbreedte, waardoor de vervaging daar te klein wordt en de vorm als een harde rechthoek leest. */ @media (max-width:820px){ .contact{margin-top:-56px} /* Zelfde vorm als op de laptop, met een zachte instroom zodat het water bovenaan niet met een harde rand begint. */ .contact::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20900%201000%22%20width%3D%22900%22%20height%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cdefs%3E%0A%20%3ClinearGradient%20id%3D%22vv%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%0A%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.18%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.46%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%221%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.78%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%221%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.93%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.5%22%2F%3E%0A%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%0A%20%3C%2FlinearGradient%3E%0A%20%3Cfilter%20id%3D%22zacht%22%20x%3D%22-30%25%22%20y%3D%22-20%25%22%20width%3D%22160%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2246%2030%22%2F%3E%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3Cg%20filter%3D%22url%28%23zacht%29%22%3E%0A%20%3Cpath%20d%3D%22M262%20-220%20L262%200%20C%20254%20120%2080%20200%2048%20340%20L48%201000%20L852%201000%20L852%20340%20C%20820%20200%20646%20120%20638%200%20L638%20-220%20Z%22%20fill%3D%22url%28%23vv%29%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20900%201000%22%20width%3D%22900%22%20height%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cdefs%3E%0A%20%3ClinearGradient%20id%3D%22vv%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%0A%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.18%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.46%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%221%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.78%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%221%22%2F%3E%0A%20%20%3Cstop%20offset%3D%220.93%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.5%22%2F%3E%0A%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%0A%20%3C%2FlinearGradient%3E%0A%20%3Cfilter%20id%3D%22zacht%22%20x%3D%22-30%25%22%20y%3D%22-20%25%22%20width%3D%22160%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2246%2030%22%2F%3E%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3Cg%20filter%3D%22url%28%23zacht%29%22%3E%0A%20%3Cpath%20d%3D%22M262%20-220%20L262%200%20C%20254%20120%2080%20200%2048%20340%20L48%201000%20L852%201000%20L852%20340%20C%20820%20200%20646%20120%20638%200%20L638%20-220%20Z%22%20fill%3D%22url%28%23vv%29%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E"); -webkit-mask-size:100% 100%;mask-size:100% 100%; -webkit-mask-position:center top;mask-position:center top; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; background:linear-gradient(to bottom, #8fb3b9 0%, #9abdc1 16%, #a6c2c6 34%, #b4cdd0 54%, #c6d9dc 72%, #d9e6e8 86%, #E9F1F6 100%); } } /* De rivier zelf heeft scherpe randen; op smalle schermen wordt hij zo smal dat die randen als een rechthoek gaan lezen. Daar laten we hem eerder oplossen. */ @media (max-width:820px){ /* Alleen de waterlaag krijgt zachte randen, de tekst erboven blijft scherp. */ .stroomwater{filter:blur(6px)} } /* ============================================================ DEEL 7 — MOBIEL: LEESBAARHEID EN OVERZICHT ============================================================ */ @media (max-width:640px){ /* 1. Meer regellengte: smallere zijmarge */ .breed,.smal{padding-left:20px;padding-right:20px} .paginakop .wrap{padding-left:20px;padding-right:20px} /* 2. Niets kleiner dan 14 pixels */ .label{font-size:12.5px;letter-spacing:.16em} .naschrift{font-size:15.5px} .pakket .voor,.pakket .prijs .bij{font-size:15px} .pakket .kern,.pakket .tarieflabel,.pakket .fase{font-size:12px} .tegel p,.kaart p,.manier .uitleg,.keuzeknop .aantal{font-size:15.5px} .case .caseinfo,.caserij .wat,.feiten .wat,.beschikbaar .wat{font-size:12.5px} .vraagaan,.naarpagina,.keuzeknop .actie,a.kaart .meer{font-size:15px} .voetregel{font-size:13.5px} .kruimel{font-size:14px} /* 3. Bijschriften donkerder zodat ze leesbaar blijven */ .naschrift,.voorbeeldmelding{color:var(--inkt)} .pakket .voor{color:#5c6b76} .keuzeknop .aantal{color:#5c6b76} /* 4. Tikdoelen minstens 44 pixels hoog */ .vraagaan,.naarpagina,a.kaart .meer,.keuzeknop .actie,.introlink a,.blok .meer{ display:inline-flex;align-items:center;min-height:44px} .voet nav a{padding-top:7px;padding-bottom:7px} /* 5. Fotovlakken minder dominant */ .fotoplek{aspect-ratio:5/4} .fotoplek.staand{aspect-ratio:4/5;max-height:62vh} .fotoplek{border-style:solid;border-width:1px; border-color:color-mix(in srgb,var(--pagina) 26%,transparent)} .fotoplek code{font-size:12px} /* 9 tot 11. Sectiekoppen als ankerpunt: meer lucht en meer gewicht */ section:not(.contact){padding-bottom:calc(var(--ruimte) * 1.1)} .kopje{margin-bottom:20px} .kopje .label{color:var(--pagina)} .streep{height:3px;width:44px} } /* 7. Scorebord leesbaar op smalle schermen */ @media (max-width:640px){ .scorebord{display:block;padding:18px 18px 20px;text-align:center} .scorebord .tekst{margin-bottom:14px} .scorebord .los{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 10px;width:100%} .scorebord .item .wat{white-space:normal} .scorebord .getal{font-size:30px} .scorebord .item .wat{font-size:12px;letter-spacing:.1em} .scorebord .tekst{font-size:12.5px} } /* 12. Op mobiel één pakket tegelijk, met een kiezer erboven */ .pakketkiezer{display:none} @media (max-width:820px){ .pakketkiezer{ display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 22px; background:var(--pagina-band);border:1px solid rgba(168,168,162,.3); border-radius:999px;padding:5px} .pakketkiezer button{ appearance:none;border:0;background:transparent;cursor:pointer; font:inherit;font-size:13px;font-weight:600;line-height:1.2;color:var(--pagina); padding:11px 6px;border-radius:999px;min-height:46px; transition:background .22s,color .22s} .pakketkiezer button[aria-selected="true"]{background:var(--pagina);color:var(--licht)} .pakketten.trap{display:block} .pakketten.trap .pakket{display:none;margin-top:0 !important} .pakketten.trap .pakket.gekozen{display:flex} } /* 15. Terug naar boven op lange pagina's */ .omhoog{display:none} @media (max-width:900px){ .omhoog{ display:flex;align-items:center;justify-content:center; position:fixed;right:16px;bottom:16px;z-index:90; width:48px;height:48px;border-radius:50%;cursor:pointer; background:var(--licht);border:1.5px solid var(--primair);color:var(--primair); box-shadow:0 6px 18px rgba(48,74,91,.22);padding:0} .omhoog[hidden]{display:none} .omhoog svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} } /* Het scorebord is bewust donker met amberkleurige tekst. De algemene regel voor donkere modus zet alle tekst op inkt; hier draaien we dat expliciet terug. */ /* Het contactblok heeft eigen ruimte nodig; de algemene sectieregel voor de homepage zette die op nul. */ section.contact{ padding-top:clamp(70px,7vw,95px); padding-bottom:clamp(48px,4.8vw,62px); } @media (max-width:820px){ section.contact{padding-top:clamp(64px,11vw,90px);padding-bottom:clamp(42px,7vw,58px)} } /* Portfolio: doorlopende lijst met labels, doorverwijzing onderaan */ .case .chip{margin-bottom:10px} .doorverwijzing{display:grid;grid-template-columns:1fr 1fr;gap:20px} .doorkaart{display:flex;flex-direction:column;justify-content:space-between;gap:16px; background:var(--pagina-band);border:1px solid rgba(168,168,162,.3);border-radius:20px; padding:26px 28px;text-decoration:none;color:var(--inkt); transition:transform .28s,box-shadow .28s,border-color .28s,background .28s} .doorkaart:hover{transform:translateY(-4px);border-color:var(--pagina); background:var(--pagina-zacht);box-shadow:0 16px 38px rgba(48,74,91,.12);text-decoration:none} .doorkaart .vraag{font-size:17px;line-height:1.45} .doorkaart .actie{color:var(--pagina);font-weight:600;font-size:16px} .doorkaart:hover .actie{text-decoration:underline} @media (max-width:640px){ .doorverwijzing{grid-template-columns:1fr;gap:14px} .doorkaart{padding:22px 20px;gap:12px} .doorkaart .vraag{font-size:16px} } /* Vakmerk in de onderste regel */ .voetregel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px} .voetregel .vakmerk{margin-left:auto} @media (max-width:640px){ .voetregel{flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:64px} .voetregel .vakmerk{margin-left:0;order:3} } /* ============================================================ DEEL 8 — EIGEN ELEMENT PER PORTFOLIOCASE ============================================================ */ /* ---------- 1. VBA-editor ---------- */ .vbaeditor{border:1px solid rgba(48,74,91,.22);border-radius:14px;overflow:hidden; background:var(--licht);box-shadow:0 14px 34px rgba(48,74,91,.12); font-family:"IBM Plex Sans",sans-serif} .vbabalk{display:flex;align-items:center;gap:6px;padding:9px 14px; background:#e8e4de;border-bottom:1px solid rgba(48,74,91,.16)} .vbastip{width:9px;height:9px;border-radius:50%;background:#c9c2b8;flex:none} .vbatitel{margin-left:10px;font-size:11.5px;letter-spacing:.04em;color:#6d6659} .vbabody{display:grid;grid-template-columns:170px 1fr;min-height:250px} .vbamodules{display:flex;flex-direction:column;gap:2px;padding:12px 10px; background:#f3efe9;border-right:1px solid rgba(48,74,91,.14)} .vbakop{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust); padding:0 8px 8px;font-weight:600} .vbamodules button{appearance:none;cursor:pointer;display:flex;align-items:center;gap:9px; text-align:left;font:inherit;font-size:13.5px;color:var(--inkt); background:#fff;border:1px solid rgba(48,74,91,.28); padding:9px 11px;border-radius:6px;min-height:40px; font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; box-shadow:0 1px 0 rgba(48,74,91,.08); transition:background .18s,color .18s,border-color .18s,box-shadow .18s} .vbamodules button::before{content:"";width:13px;height:13px;flex:none;border-radius:2px; background:#c9d7de;border:1px solid rgba(48,74,91,.35)} .vbamodules button[aria-selected="true"]::before{background:none} .vbamodules button:hover{background:#eef3f6;border-color:var(--primair);box-shadow:0 2px 6px rgba(48,74,91,.14)} .vbamodules button[aria-selected="true"]{background:var(--primair);color:var(--licht);border-color:var(--primair);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)} .vbacode{padding:22px 26px;position:relative} .vbapaneel{display:none} .vbapaneel.actief{display:block;animation:vbain .3s ease} @keyframes vbain{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .vbapaneel h3{font-size:20px;margin:0 0 10px} .vbapaneel p{margin:0;font-size:16px;line-height:1.65} .wijzer{font-size:14.5px;color:var(--rust)} @media (max-width:820px){ .vbabody{grid-template-columns:1fr} .vbamodules{flex-direction:row;flex-wrap:wrap;overflow:visible;border-right:0; border-bottom:1px solid rgba(48,74,91,.14);gap:6px} .vbakop{display:none} .vbamodules button{white-space:nowrap;font-size:13px;padding:9px 12px} .vbacode{padding:20px} } /* ---------- 2. Kassabon ---------- */ .bon{max-width:290px;margin:0 auto;background:var(--licht);color:var(--inkt); padding:24px 24px 0;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:13.5px;box-shadow:0 14px 32px rgba(48,74,91,.14); position:relative;transform:rotate(-1.2deg)} .bon::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px; background:var(--licht); -webkit-mask-image:repeating-linear-gradient(135deg,#000 0 8px,transparent 8px 16px); mask-image:repeating-linear-gradient(135deg,#000 0 8px,transparent 8px 16px)} .bonkop{text-align:center;font-weight:600;letter-spacing:.18em;text-transform:uppercase; font-size:12px;padding-bottom:14px;border-bottom:1px dashed rgba(48,74,91,.35)} .bon ul{list-style:none;margin:0;padding:14px 0;display:grid;gap:9px} .bon li{display:flex;justify-content:space-between;gap:12px} .bontotaal{display:flex;justify-content:space-between;gap:12px; border-top:1px dashed rgba(48,74,91,.35);padding:13px 0 22px;font-weight:600; color:var(--accent);text-transform:uppercase;letter-spacing:.04em;font-size:12.5px} /* ---------- 3. Prompt ---------- */ .promptvak{background:#26333d;border-radius:16px;padding:0 0 20px;overflow:hidden; box-shadow:0 16px 36px rgba(38,51,61,.26);color:#e7eef2} .promptbalk{display:flex;align-items:center;gap:9px;padding:11px 18px; background:rgba(255,255,255,.06);font-size:12px;letter-spacing:.12em; text-transform:uppercase;color:#9fb6c4} .promptpunt{width:8px;height:8px;border-radius:50%;background:#7fd6a2;flex:none} .promptvraag{margin:20px 18px 0;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:14px;line-height:1.6;min-height:3.2em;color:#cfe0ea} .promptcursor{display:inline-block;width:8px;height:1.05em;background:#7fd6a2; vertical-align:-2px;margin-left:2px;animation:knipper 1s steps(2) infinite} @keyframes knipper{50%{opacity:0}} .promptantwoord{margin:16px 18px 0;opacity:0;transform:translateY(8px); transition:opacity .5s,transform .5s} .promptantwoord.tonen{opacity:1;transform:none} .promptantwoord p{margin:0 0 10px;font-size:15px;color:#e7eef2} .promptantwoord ol{margin:0;padding-left:20px;display:grid;gap:7px} .promptantwoord li{font-size:14.5px;line-height:1.55;color:#c6d8e2} /* ---------- 4. Toernooischema met bal ---------- */ .schema{color:var(--pagina);padding:14px 0} .schema svg{display:block;width:100%;height:auto} .schema .lijnen{opacity:.55} .schema .bal{fill:var(--accent)} .schema .beker{fill:none;stroke:var(--accent);stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .schema.rollen .bal{animation:stuiteren 2.6s ease-in-out forwards} @keyframes stuiteren{ 0%{transform:translate(0,0)} 22%{transform:translate(96px,30px)} 34%{transform:translate(120px,10px)} 50%{transform:translate(160px,80px)} 62%{transform:translate(184px,62px)} 80%{transform:translate(208px,80px)} 100%{transform:translate(228px,80px)} } @media (prefers-reduced-motion:reduce){ .schema.rollen .bal{animation:none} .promptcursor{animation:none} .vbapaneel.actief{animation:none} } /* Cases met een breed element: tekst boven, element daaronder over de volle breedte */ .case.vol{grid-template-columns:1fr;gap:26px} .case.vol .casebeeld{order:2} .case.vol > div:last-child{order:1} .case.vol .vbaeditor{max-width:none} /* Scorebord met vier vakken */ .scorebord .los{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start} .scorebord .item .getal{white-space:nowrap} @media (max-width:900px){ .scorebord{flex-direction:column;align-items:stretch;text-align:center;gap:14px} .scorebord .los{grid-template-columns:repeat(2,1fr);gap:16px 12px} } /* ---------- VBA-editor: menubalk, mappen, statusbalk ---------- */ .vbamenu{display:flex;gap:18px;padding:7px 16px;background:var(--licht); border-bottom:1px solid rgba(48,74,91,.12);font-size:12.5px;color:#6d6659} .vbamap{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust); padding:12px 8px 4px;font-weight:600} .vbamodules .vbamap:first-of-type{padding-top:4px} .vbastatus{display:flex;justify-content:space-between;padding:7px 16px; background:#e8e4de;border-top:1px solid rgba(48,74,91,.14); font-size:11.5px;color:#6d6659;letter-spacing:.03em} .vbameta{margin-top:14px !important;padding-top:12px;border-top:1px dashed rgba(48,74,91,.2); font-size:13px !important;color:var(--rust)} @media (max-width:820px){ .vbamenu{gap:12px;font-size:11.5px;overflow:hidden} .vbamap{padding:6px 6px 2px;width:100%} } /* ---------- Gespreksvenster met Bridgebot ---------- */ .promptbalk{position:relative} .promptherhaal{position:absolute;right:12px;top:50%;transform:translateY(-50%); appearance:none;border:1px solid rgba(255,255,255,.28);background:transparent;cursor:pointer; color:#cfe0ea;font:inherit;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase; padding:6px 12px;border-radius:999px;min-height:34px} .promptherhaal:hover{background:rgba(255,255,255,.12);color:#fff} .promptgesprek{padding:0 18px 4px} .promptvraag{margin:18px 0 0;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:14px;line-height:1.6;min-height:1.6em;color:#cfe0ea} .promptantwoord{margin:16px 0 0;opacity:1;transform:none} .antwoordtekst{margin:0 0 10px;font-size:15px;color:#e7eef2;min-height:1.2em} .antwoordlijst{margin:0;padding-left:20px;display:grid;gap:7px} .antwoordlijst li{font-size:14.5px;line-height:1.55;color:#c6d8e2} .antwoordlijst a{color:#9fd8b5;text-decoration:underline;text-underline-offset:3px} /* ---------- Speelschema dat zichzelf invult ---------- */ .speelschema{background:var(--licht);border:1px solid rgba(168,168,162,.34);border-radius:18px; padding:20px 22px;box-shadow:0 12px 30px rgba(48,74,91,.09);max-width:420px;margin:0 auto} .schemakop,.schemarijen li{display:grid;grid-template-columns:60px 1fr 1fr;gap:10px;align-items:center} .schemakop{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust); font-weight:600;padding-bottom:10px;border-bottom:1px solid rgba(168,168,162,.34)} .schemarijen{list-style:none;margin:0;padding:0;display:grid;gap:2px} .schemarijen li{padding:10px 0;border-bottom:1px solid rgba(168,168,162,.2)} .schemarijen li:last-child{border-bottom:0} .schemarijen .ronde{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:17px; color:var(--pagina)} .schemarijen .wedstrijd{font-size:14.5px;font-weight:600;color:var(--inkt); background:var(--pagina-band);border-radius:8px;padding:7px 10px;text-align:center; opacity:0;transform:translateY(5px);transition:opacity .32s,transform .32s} .speelschema.vullen .wedstrijd{opacity:1;transform:none} .speelschema.vullen li:nth-child(1) .wedstrijd{transition-delay:.05s} .speelschema.vullen li:nth-child(2) .wedstrijd{transition-delay:.30s} .speelschema.vullen li:nth-child(3) .wedstrijd{transition-delay:.55s} .speelschema.vullen li:nth-child(4) .wedstrijd{transition-delay:.80s} .speelschema.vullen li:nth-child(5) .wedstrijd{transition-delay:1.05s} .schemaslot{margin:14px 0 0;font-size:14px;color:var(--rust);text-align:center; opacity:0;transition:opacity .5s 1.4s} .speelschema.vullen .schemaslot{opacity:1} @media (prefers-reduced-motion:reduce){ .schemarijen .wedstrijd,.schemaslot{opacity:1 !important;transform:none !important;transition:none} } /* Speelschema met wedstrijden en tijden */ .schemarijen .wedstrijd em{font-style:normal;color:var(--rust);font-weight:400; font-size:12.5px;padding:0 3px} .schemarijen .wedstrijd{font-size:13.5px;line-height:1.45} .schemakop,.schemarijen li{grid-template-columns:56px 1fr 1fr} .speelschema{max-width:560px} .schemarijen li:nth-child(4) .wedstrijd{transition-delay:.80s} .speelschema.vullen .schemaslot{transition-delay:1.15s} @media (max-width:700px){ .schemakop,.schemarijen li{grid-template-columns:48px 1fr;gap:6px} .schemakop span:last-child{display:none} .schemarijen li .wedstrijd:last-child{grid-column:2} .schemarijen li{grid-template-areas:"t v1" ". v2"} } /* ---------- Vraag als gebruikersbel ---------- */ .promptvraag{display:flex;justify-content:flex-end;min-height:0} .promptvraag .bel{display:inline-block;background:#3d5768;color:#fff; border-radius:14px 14px 4px 14px;padding:10px 14px;max-width:88%; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:13.5px;line-height:1.55} .promptantwoord{max-width:92%} /* ---------- Poulekaart ---------- */ .poulekaart{background:var(--licht);border:1px solid rgba(168,168,162,.34);border-radius:18px; padding:18px 20px 22px;box-shadow:0 12px 30px rgba(48,74,91,.09);max-width:460px;margin:0 auto} .poulekop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px} .poulefase{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--pagina); font-weight:600} .pouleherhaal{appearance:none;cursor:pointer;font:inherit;font-size:11.5px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--primair);background:transparent; border:1px solid rgba(69,105,130,.4);border-radius:999px;padding:5px 11px;min-height:32px} .pouleherhaal:hover{background:var(--pagina-band)} .poulevloer{position:relative;min-height:250px} .poulegroep{position:absolute;border:1px dashed rgba(168,168,162,.55);border-radius:14px; opacity:0;transition:opacity .4s} .poulegroep[data-groep="1"]{left:0;top:0;width:47%;height:196px} .poulegroep[data-groep="2"]{right:0;top:0;width:47%;height:196px} .poulegroep[data-groep="3"]{left:50%;transform:translateX(-50%);top:130px;width:72%;height:80px} .poulegroep[data-groep="h1"]{left:2%;top:0;width:45%;height:96px} .poulegroep[data-groep="h2"]{right:2%;top:0;width:45%;height:96px} .groepnaam{position:absolute;top:-9px;left:14px;background:var(--licht);padding:0 7px;border-radius:4px; font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);font-weight:600} .poulekaart.stap1 .poulegroep[data-groep="1"], .poulekaart.stap1 .poulegroep[data-groep="2"]{opacity:1} .poulekaart.stap2 .poulegroep[data-groep="h1"], .poulekaart.stap2 .poulegroep[data-groep="h2"], .poulekaart.stap2 .poulegroep[data-groep="3"]{opacity:1} .poulekaart.stap3 .poulegroep[data-groep="h1"], .poulekaart.stap3 .poulegroep[data-groep="h2"], .poulekaart.stap3 .poulegroep[data-groep="3"]{opacity:1} .poulekaart.stap2 .poulegroep[data-groep="1"], .poulekaart.stap2 .poulegroep[data-groep="2"], .poulekaart.stap3 .poulegroep[data-groep="1"], .poulekaart.stap3 .poulegroep[data-groep="2"]{opacity:0} .poulekaart.stap4 .poulegroep[data-groep="h1"], .poulekaart.stap4 .poulegroep[data-groep="h2"]{opacity:0} .poulekaart.stap4 .poulegroep[data-groep="3"]{opacity:1} .spelers{list-style:none;margin:0;padding:0} .spelers li{position:absolute;background:var(--pagina-band);color:var(--inkt); border:1px solid rgba(69,105,130,.22);border-radius:999px; padding:7px 14px;font-size:13.5px;font-weight:600;white-space:nowrap; transition:transform 1.05s cubic-bezier(.45,0,.2,1),background .5s,color .5s,border-color .5s,opacity .4s; will-change:transform} .spelers li .beker{display:inline-block;width:0;overflow:hidden;opacity:0;vertical-align:-3px; transition:width .4s .3s,opacity .4s .3s;margin-left:0} .spelers li[data-winnaar]{} .poulekaart.stap4 .spelers li[data-winnaar]{background:var(--accent);border-color:var(--accent);color:var(--licht)} .poulekaart.stap4 .spelers li[data-winnaar] .beker{width:16px;opacity:1;margin-left:7px} .spelers li .beker svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @media (max-width:520px){ .poulevloer{min-height:300px} .spelers li{font-size:12.5px;padding:6px 10px} } /* De chat is bewust donker; in donkere modus mag de algemene tekstkleur er niet overheen */ .poulekaart.stap2 .spelers li:not([data-halve]){opacity:0;pointer-events:none} .poulekaart.stap3 .spelers li:not([data-finale]), .poulekaart.stap4 .spelers li:not([data-finale]){opacity:0;pointer-events:none} /* ============================================================ DEEL 9 — VBA-KLEUREN, BRIDGEBOT, POULEKAART, DOORVERWIJZING ============================================================ */ /* 1. Editor in de kleuren van de echte VBA-editor */ .vbaeditor{border-color:#8a8a8a;border-radius:6px;box-shadow:0 12px 30px rgba(48,74,91,.16)} .vbabalk{background:linear-gradient(#f0efe9,#ded9cf);border-bottom:1px solid #9a958c} .vbatitel{color:#3a3a3a;font-weight:600} .vbastip{background:#b3aea3} .vbamenu{background:#ece9e1;border-bottom:1px solid #b7b2a8;color:#2c2c2c} .vbamodules{background:#ece9e1;border-right:1px solid #b7b2a8;gap:0;padding:10px 8px} .vbakop{color:#4a463f;font-size:10.5px} .vbamap{color:#4a463f;padding:10px 6px 3px} .vbamodules button{background:transparent;border:0;box-shadow:none;border-radius:3px; padding:6px 8px;min-height:32px;gap:7px;font-size:13px;color:#1b1b1b} .vbamodules button::before{content:"";width:14px;height:12px;border-radius:1px;flex:none; background:#fff;border:1px solid #7a7a7a; background-image:linear-gradient(#fff 0 3px,#c9d6e4 3px 5px,#fff 5px 7px,#c9d6e4 7px 9px,#fff 9px 12px)} .vbamodules button:hover{background:#dce6f2;box-shadow:none;border:0} .vbamodules button[aria-selected="true"]{background:#316ac5;color:#fff;border:0;box-shadow:none} .vbacode{background:#fff} .vbapaneel h3{color:#0000a0;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:16px} .vbapaneel p{color:#111} .vbameta{color:#008000 !important;border-top-color:#d6d6d6} .vbastatus{background:#ece9e1;border-top:1px solid #b7b2a8;color:#3a3a3a} /* 6. Bridgebot opvallender */ .promptbalk{padding:13px 18px;background:rgba(255,255,255,.09)} .botnaam{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:16px;letter-spacing:0; text-transform:none;color:#fff} .promptpunt{width:10px;height:10px;box-shadow:0 0 0 4px rgba(127,214,162,.22)} /* 8. Poulekaart netter en met meer kleur */ .poulevloer{min-height:236px} .poulegroep{border:1px dashed rgba(69,105,130,.4);background:rgba(69,105,130,.05)} .poulegroep[data-groep="h1"],.poulegroep[data-groep="h2"]{height:104px;top:4px} .poulegroep[data-groep="3"]{top:136px;height:78px;background:rgba(137,112,87,.08); border-color:rgba(137,112,87,.45)} .poulegroep[data-groep="3"] .groepnaam{color:var(--accent)} .spelers li{background:#fff;border-color:rgba(69,105,130,.35); box-shadow:0 2px 6px rgba(48,74,91,.08)} .poulekaart.stap2 .spelers li[data-halve], .poulekaart.stap3 .spelers li[data-finale]{background:var(--pagina-zacht);border-color:var(--pagina)} /* 10. Doorverwijskaarten sterker */ .doorverwijzing{margin-top:-14px} .doorkaart{background:var(--pagina-zacht);border-color:rgba(69,105,130,.35); padding:28px 30px;gap:18px} .doorkaart .vraag{font-family:"Fraunces",Georgia,serif;font-size:20px;line-height:1.35; color:var(--inkt)} .doorkaart .actie{font-size:15.5px} .doorkaart:hover{background:var(--pagina-band)} /* 5. AI-case: intro, scherm, toelichting onder elkaar */ .case.aidraai{grid-template-columns:1fr;gap:22px} .case.aidraai > div:first-child{order:1} .case.aidraai .casebeeld{order:2} .case.aidraai .natoelichting{order:3;display:grid;gap:14px} /* Kort oplichten wanneer een link naar een plek op dezelfde pagina wijst */ .oplichten{animation:oplichten 1.6s ease} @keyframes oplichten{ 0%{box-shadow:0 0 0 0 rgba(137,112,87,0)} 25%{box-shadow:0 0 0 6px rgba(137,112,87,.30)} 100%{box-shadow:0 0 0 0 rgba(137,112,87,0)} } @media (prefers-reduced-motion:reduce){.oplichten{animation:none}} /* ============================================================ DEEL 10 — CORRECTIES NA PROEF ============================================================ */ /* Brugknoppen: nooit afbreken over meerdere regels */ .brugnav a{white-space:nowrap} .brugnav-mobiel a{white-space:nowrap} /* Chips passend om hun tekst */ .chip{white-space:nowrap;padding:6px 14px;line-height:1.2;display:inline-block} .keuzeknop .chip{white-space:nowrap} /* Eigen kleur per soort werk */ .chip.chip-proces,.case .chip[data-soort="proces"]{background:var(--pagina-zacht);color:var(--primair)} .chip.chip-events,.case .chip[data-soort="events"]{background:#f0e6da;color:var(--accent)} .doorkaart[data-soort="proces"]{background:var(--pagina-zacht);border-color:rgba(69,105,130,.4)} .doorkaart[data-soort="proces"] .actie{color:var(--primair)} .doorkaart[data-soort="events"]{background:#f6ece0;border-color:rgba(137,112,87,.45)} .doorkaart[data-soort="events"] .actie{color:var(--accent)} .doorkaart[data-soort="events"]:hover{background:#f0e2d1} /* Scorebord: vult de volle breedte */ .scorebord{display:block;padding:22px 30px 24px} .scorebord .tekst{display:block;margin-bottom:16px} .scorebord .los{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center;width:100%} .scorebord .item .wat{white-space:nowrap} /* Winnaar op de poulekaart blijft bruin met witte tekst */ .poulekaart.stap4 .spelers li[data-winnaar]{background:var(--accent) !important; border-color:var(--accent) !important;color:#fff !important} /* Minder lucht tussen de intro en de eerste case op portfolio */ body.p-portfolio .paginakop{padding-bottom:0} body.p-portfolio .paginakop + section{padding-top:8px} /* Labels van de zijbruggen passen altijd binnen hun vorm */ .zijbrug span{white-space:nowrap;font-size:12.5px;padding:6px 12px} @media (max-width:1180px){.zijbrug span{font-size:11.5px;padding:5px 10px}} /* ---------- VBA-editor, eenvoudiger en dichter bij het origineel ---------- */ .vbaeditor{border:1px solid #9a958c;border-radius:4px;background:#d4d0c8;overflow:hidden} .vbawerkbalk{display:flex;align-items:center;gap:9px;padding:7px 10px;background:#d4d0c8; border-bottom:1px solid #9a958c} .vbaicoon{width:16px;height:16px;border-radius:2px;background:#f2f0eb;border:1px solid #9a958c; position:relative;flex:none} .vbaicoon::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0} .vbaplay::after{border-left:6px solid #1f7a34;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:5px} .vbapauze{background:#f2f0eb} .vbapauze::after{width:6px;height:8px;border-left:2px solid #3b5a7a;border-right:2px solid #3b5a7a} .vbastop::after{width:8px;height:8px;background:#7a3b3b} .vbaproject::after{width:9px;height:8px;background:#e8c169;border:1px solid #8a7430} .vbaeigen::after{width:9px;height:8px;background:#cdd7e4;border:1px solid #6d7c8f} .vbascheiding{width:1px;height:16px;background:#9a958c;flex:none} .vbapaneelkop{background:linear-gradient(#c9c4bb,#b9b3a9);color:#1b1b1b;font-size:11.5px; font-weight:600;padding:5px 9px;border-bottom:1px solid #9a958c} .vbamodules{background:#fff;border-right:1px solid #9a958c;padding:0;display:block} .vbaboom{padding:8px 6px;display:flex;flex-direction:column;gap:1px} .vbawortel{font-size:12px;color:#1b1b1b;padding:3px 6px;font-weight:600} .vbamap{color:#1b1b1b;font-weight:400;text-transform:none;letter-spacing:0;font-size:12px; padding:5px 6px 2px 18px;position:relative} .vbamap::before{content:"";position:absolute;left:4px;top:7px;width:10px;height:9px; background:#e8c169;border:1px solid #8a7430;border-radius:1px} .vbamodules button{padding:3px 6px 3px 30px;min-height:26px;font-size:12.5px;border-radius:2px; font-family:"IBM Plex Sans",sans-serif;position:relative;gap:0} .vbamodules button::before{position:absolute;left:14px;top:6px;width:11px;height:10px; background:#fff;border:1px solid #6d7c8f;background-image:linear-gradient(#fff 0 3px,#cdd7e4 3px 5px,#fff 5px 10px)} .vbamodules button:hover{background:#e4ecf6} .vbamodules button[aria-selected="true"]{background:#316ac5;color:#fff} .vbacode{background:#fff;border:0} .vbastatus{display:none} @media (max-width:820px){ .vbaboom{flex-direction:column;gap:0} .vbagroep{width:100%} .vbamodules button{padding:8px 10px 8px 30px;min-height:38px} .vbamodules button::before{left:11px;top:13px} } /* Scorebord op smalle schermen: de getallen mogen nooit buiten het vak vallen */ @media (max-width:640px){ .scorebord .los{grid-template-columns:repeat(2,minmax(0,1fr))} .scorebord .item{min-width:0} .scorebord .getal{font-size:clamp(20px,6.5vw,30px);white-space:nowrap} .scorebord .item .wat{font-size:11px;letter-spacing:.06em} } /* De AI-case heeft een eigen volgorde: tekst, chatvenster, toelichting */ .case.aidraai{display:grid;grid-template-columns:1fr;gap:22px} .case.aidraai > div:first-child{order:1} .case.aidraai .casebeeld{order:2} .case.aidraai .natoelichting{order:3;display:grid;gap:14px;max-width:68ch} /* De wijzer bij de editor springt eruit */ .wijzer{display:inline-flex;align-items:center;gap:10px;margin-top:18px; background:var(--pagina-zacht);color:var(--pagina);font-weight:600;font-size:15px; border:1px solid rgba(69,105,130,.3);border-radius:999px;padding:10px 18px} .wijzerpijl{font-size:18px;line-height:1} @media (max-width:820px){ .wijzerpijl{transform:rotate(90deg)} } /* ============================================================ DEEL 11 — LEESBAARHEID, UNIFORMITEIT EN DETAILS ============================================================ */ /* 3. Grijze tekst haalt de contrastnorm (was 2,27:1, nu 4,7:1) */ :root{--rust-tekst:#6E6E66} .label,.naschrift,.caseinfo,.voetregel,.vbamap,.wat,.aantal,.voor, .doorkaart .vraag,.kruimel,.tegel p,.fotoplek div,.schemaslot, .pakket .voor,.groepnaam,.vbakop,.wijzer{color:var(--rust-tekst)} .label{color:var(--rust-tekst)} .naschrift{color:var(--rust-tekst)} .voetregel span{color:var(--rust-tekst)} .voet .slogantje,.voet nav a{color:inherit} /* 4. Regellengte nooit boven de 70 tekens */ p,li{max-width:70ch} .lead,.paginakop p{max-width:66ch} .scorebord *,.bon *,.promptvak *,.vbaeditor *,.speelschema *,.poulekaart *, .voetregel *,.balk *,.mobielmenu *,.brugnav *{max-width:none} .midden,.slot p,.contact p{margin-left:auto;margin-right:auto} /* 5. Tikdoelen minstens 24 pixels hoog, zonder zichtbaar verschil */ .vraagaan,.naarpagina,.slot .meer,.introlink a,.blok .meer, .voet nav a,.voet .gegevens a,.lilink,.paneel p a{ display:inline-flex;align-items:center;min-height:26px} .voet .gegevens a{min-height:28px} /* 10. Labels iets groter, overal gelijk */ .label{font-size:13.5px} .caseinfo{font-size:13px} /* 6. Tegels: gelijke hoogte, eigen label per soort */ .tegels.twee{align-items:stretch} .tegels.twee .tegel{display:flex;flex-direction:column;height:100%} .tegel.tegelwerk h3{margin-top:12px} .werksoort{display:inline-flex;align-items:center;gap:8px;align-self:flex-start; font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; padding:6px 13px 6px 9px;border-radius:999px;white-space:nowrap} .werkicoon{display:grid;place-items:center;width:17px;height:17px} .werkicoon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .werksoort[data-soort="ontwerp"]{background:#e7e3f0;color:#544a72} .werksoort[data-soort="compliance"]{background:#e2ece4;color:#3d6b4c} .werksoort[data-soort="ontwikkeling"]{background:#f2e4e4;color:#7a4a4a} .werksoort[data-soort="documentatie"]{background:#eae7e0;color:#6a5f4b} /* De linkerkolom volgt de rivier, dus rechts uitgelijnd */ .blok.kol-links{text-align:right} .blok.kol-links .meer{justify-content:flex-end} /* 9. Zes vormen op Events: twee naast elkaar op mobiel */ @media (max-width:640px){ body.p-events .tegels:not(.twee){grid-template-columns:1fr 1fr;gap:12px} body.p-events .tegels:not(.twee) .tegel{padding:16px 14px} body.p-events .tegels:not(.twee) .tegel h3{font-size:16px;line-height:1.25} body.p-events .tegels:not(.twee) .tegel p{font-size:14px;line-height:1.5} body.p-events .tegels:not(.twee) .streepje{width:28px} } /* De contrastcorrectie moet ook winnen van paginaspecifieke regels */ body.sub .label,.kopje .label,.paginakop .label{color:var(--rust-tekst)} .kruimel,.kruimel a,body.sub .kruimel{color:var(--rust-tekst)} .caseinfo,.case .caseinfo{color:var(--rust-tekst)} .wijzer{color:var(--pagina)} .doorkaart .vraag{color:var(--inkt)} .fotoplek div,.fotoplek code{color:var(--rust-tekst)} /* Laatste contrastcorrecties: alles wat nog onder 4,5:1 zat */ .fotoplek .titel,.fotoplek code{color:#6a6155} .naamregel{color:#7a6349} .knop.licht,.knop.licht:link{color:#3d5f78} .manier .waarde{color:#3d5f78} .manier .uitleg{color:var(--rust-tekst)} .voorna .nu{color:var(--rust-tekst)} .doorkaart .actie{color:#3d5f78} .doorkaart[data-soort="events"] .actie{color:#7a6349} .voet nav a,.voet .gegevens a{color:var(--inkt)} .zijbrug span{color:var(--pagina)} .pijl{color:var(--rust-tekst)} .kruimel a,.kruimel a:link,.kruimel a:visited{color:var(--rust-tekst)} .voornakop span{color:var(--rust-tekst)} /* Laatste drie punten: kop van het voor-en-na blok, regellengte in de editor, kruimellink */ .voornakop span{color:#5b5b52} .vbapaneel p{max-width:70ch} .kruimel a{display:inline-flex;align-items:center;min-height:26px} /* Donkere modus: dezelfde contrastcorrectie */ .voornakop span{color:#55554d} /* Laatste ronde contrast: voettekstkoppen, zijbruglabels, bon en fotoplekken */ .voet h3{color:var(--rust-tekst)} .zijbrug span{color:var(--inkt)} .bontotaal{color:#7a6349} .fotoplek code,.fotoplek .titel{color:#63594c} .vbamap{color:#3a3a3a} .voornakop span{color:#4f4f47} /* In donkere modus moet de actieve knop op de brug ook een donkere achtergrond houden */ /* Op één kolom staat de tekst altijd boven het beeld, ook bij de even cases */ @media (max-width:900px){ .case{grid-template-columns:1fr} .case .casebeeld,.case:nth-child(even) .casebeeld{order:2} .case > div:not(.casebeeld){order:1} .case.aidraai > div:first-child{order:1} .case.aidraai .casebeeld{order:2} .case.aidraai .natoelichting{order:3} } /* ============================================================ DEEL 12 — CORRECTIES NA PROEF OP TELEFOON ============================================================ */ /* Streepjes staan weer op ooghoogte naast hun tekst */ .voet nav a.onder::before{top:50%;transform:translateY(-50%)} .mobielmenu a.onder::before{top:50%;transform:translateY(-50%)} /* De wijzer wijst de goede kant op */ .wijzer .smaltekst{display:none} @media (max-width:820px){ .wijzer .breedtekst{display:none} .wijzer .smaltekst{display:inline} } /* VBA-editor: mappen als kader in plaats van losse witte hokjes */ .vbaboom{padding:10px;gap:0} .vbagroep{border:1px solid #b7b2a8;border-radius:4px;background:#fff;overflow:hidden; margin-bottom:10px} .vbagroep:last-child{margin-bottom:0} .vbagroep .vbamap{display:block;margin:0;padding:6px 10px 6px 26px;background:#eceae4; border-bottom:1px solid #d8d4cc;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase; font-weight:600;color:#4a463f} .vbagroep .vbamap::before{left:9px;top:9px} .vbamodules button{background:transparent;border:0;box-shadow:none;border-radius:0; width:100%;padding:7px 10px 7px 30px;min-height:34px} .vbamodules button::before{left:11px;top:11px} .vbamodules button:hover{background:#e4ecf6} .vbamodules button[aria-selected="true"]{background:#316ac5;color:#fff} .vbawortel{padding:2px 4px 10px} /* Werkbalk: pauzestreepjes dichter bij elkaar */ .vbapauze::after{width:5px;height:8px;border-left:2px solid #3b5a7a;border-right:2px solid #3b5a7a} /* De pijl bij de wijzer wijst omhoog zodra de bestanden bovenaan staan */ @media (max-width:820px){ .wijzerpijl{transform:rotate(90deg)} } /* ---------- Bestandenlijst met pijltjes ---------- */ .vbamodules button::before{background:none;background-image:none;border:0;border-radius:0; width:7px;height:7px;border-right:1.6px solid #6a7f92;border-top:1.6px solid #6a7f92; transform:rotate(45deg);left:13px;top:13px} .vbamodules button[aria-selected="true"]::before{border-right-color:#fff;border-top-color:#fff} @media (max-width:820px){ .vbamodules button::before{left:13px;top:15px} } /* De wijzer wijst nu naar de pijltjes zelf */ .wijzerpijl{font-size:22px;line-height:1;color:#6a7f92} @media (max-width:820px){.wijzerpijl{transform:none}} /* Hoverkleur per wereld op de homepage, gelijk aan de labels op portfolio */ .blok{transition:background .3s,border-color .3s,transform .3s,box-shadow .3s; border-radius:22px;padding:20px;margin:0} @media (min-width:901px){ .blok{margin:-20px} } .blok.kol-links:hover{background:var(--pagina-zacht)} .blok.kol-rechts:hover{background:#f0e6da} .blok.kol-links:hover .meer{color:var(--primair)} .blok.kol-rechts:hover .meer{color:var(--accent)} /* Functietitel onder het merk in de voettekst */ .voetfunctie{margin-top:10px;font-size:13px;color:var(--rust-tekst);letter-spacing:.02em} /* ============================================================ DEEL 13 — BEELDMATERIAAL ============================================================ */ .foto{border-radius:20px;overflow:hidden;background:var(--pagina-zacht); box-shadow:0 12px 30px rgba(48,74,91,.12)} .foto img{display:block;width:100%;height:100%;object-fit:cover} .foto.staand{aspect-ratio:4/5} .fotostrook .foto{aspect-ratio:3/4} .casebeeld .foto{aspect-ratio:4/3} /* ---------- Schuifbalk: voor en na ---------- */ .schuifblok{margin:18px 0 6px} .schuif{position:relative;border-radius:14px;overflow:hidden;background:#fff; box-shadow:0 12px 30px rgba(48,74,91,.14);aspect-ratio:1198/1268;max-width:400px; touch-action:none;cursor:ew-resize;user-select:none} .schuif img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none} .schuif .na{clip-path:inset(0 0 0 var(--pos,50%))} .schuif .greep{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px; background:var(--licht);box-shadow:0 0 0 1px rgba(48,74,91,.25);pointer-events:none} .schuif .greep::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:38px;height:38px;border-radius:50%;background:var(--licht);border:2px solid var(--primair); box-shadow:0 6px 16px rgba(48,74,91,.26)} .schuif .greep::before{content:"";position:absolute;top:50%;left:50%;z-index:2; transform:translate(-50%,-50%);width:15px;height:9px;background:var(--primair); clip-path:polygon(0 50%,45% 0,45% 100%,55% 0,100% 50%,55% 100%)} .schuif .merkje{position:absolute;top:9px;z-index:3;font-size:10px;letter-spacing:.12em; text-transform:uppercase;font-weight:600;padding:4px 9px;border-radius:999px; background:rgba(251,249,246,.93);color:var(--inkt);box-shadow:0 2px 8px rgba(48,74,91,.16)} .schuif .merkje.links{left:8px} .schuif .merkje.rechts{right:8px} .schuifwijzer{margin:9px 0 0;max-width:400px;text-align:center;font-size:13.5px;color:var(--rust-tekst)} @media (min-width:901px){ .case.aidraai .natoelichting{display:flex;gap:34px;align-items:flex-start;max-width:none} .case.aidraai .teksten{flex:1;display:grid;gap:20px;position:relative} .case.aidraai .natoelichting p{max-width:62ch;margin:0} .schuifblok{flex:none;width:400px;margin:0} } /* ---------- Schermafbeelding per bestand in de editor ---------- */ .vbabeeld{margin:16px 0 0;padding:0;border:1px solid #d6d2ca;border-radius:4px;overflow:hidden; background:#fff} .vbabeeld img{display:block;width:100%;height:auto} .privacyregel{font-size:13.5px;color:var(--rust-tekst);margin:0 0 12px; display:inline-flex;align-items:center;gap:8px;background:var(--pagina-band); border-radius:999px;padding:8px 15px} /* ---------- Downloadlink ---------- */ .bestandlink{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px} .bestandlink a{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px; color:var(--pagina);text-decoration:none;border:1.5px solid rgba(69,105,130,.35); border-radius:999px;padding:9px 17px;min-height:26px} .bestandlink a:hover{background:var(--pagina-zacht)} .bestandlink svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .bestandlink span{font-size:13px;color:var(--rust-tekst)} /* ---------- Appschermen ---------- */ .appjes{display:flex;gap:9px;margin:4px 0 14px} .appjes img{width:74px;height:auto;border-radius:9px;border:1px solid rgba(48,74,91,.18); box-shadow:0 6px 16px rgba(48,74,91,.14)} /* ---------- Appschermen: klikken voor groot ---------- */ .appjes{display:flex;gap:12px;margin:26px 0 0} .appknop{appearance:none;border:0;padding:0;background:none;cursor:zoom-in;line-height:0; border-radius:11px} .appknop img{width:88px;height:auto;border-radius:11px;border:1px solid rgba(48,74,91,.18); box-shadow:0 6px 16px rgba(48,74,91,.14);transition:transform .25s,box-shadow .25s} .appknop:hover img{transform:translateY(-3px);box-shadow:0 12px 26px rgba(48,74,91,.2)} .vergroot{position:fixed;inset:0;z-index:200;background:rgba(28,40,49,.86); display:grid;place-items:center;padding:26px} .vergroot[hidden]{display:none} .vergroot img{max-width:min(100%,420px);max-height:88vh;border-radius:18px; box-shadow:0 30px 70px rgba(0,0,0,.45)} .vergroot .sluit{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%; border:1.5px solid rgba(251,249,246,.5);background:rgba(28,40,49,.6);color:#FBF9F6; font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center} .vergroot .sluit:hover{background:rgba(251,249,246,.16)} /* ---------- Groepsfoto bij het vriendenweekend ---------- */ .weekendfoto{margin-top:18px;aspect-ratio:4/3} /* ---------- Opsomming in een tegel ---------- */ .setlijst{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px;font-size:15px} .setlijst li{position:relative;padding-left:22px;color:var(--rust-tekst)} .setlijst li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px; border-radius:2px;background:#6a5f4b;opacity:.55} /* Links midden in een zin: groter raakvlak zonder de regel te verstoren */ .verhaal a,.naschrift a,.paneel p a,.tegel p a{display:inline;padding:5px 0;margin:-5px 0} /* Lijsten met een eigen vlak vullen hun container; de leesbreedte geldt alleen voor lopende tekst */ .paklijst li,.voorna li,.feiten li,.altijd li,.pakket li,.knelpunten li, .setlijst li,.tegels li,.stroomstappen li,.schemarijen li,.antwoordlijst li, .vbamodules li,.tijdlijn li,.factoren li{max-width:none} .case.aidraai .teksten{display:grid;gap:20px} .case.aidraai .teksten p{margin:0} /* ---------- Vriendenweekend: de bon ligt in de foto ---------- */ .weekendblok{position:relative;display:block} .weekendblok .foto{aspect-ratio:4/3;margin:0} .weekendblok .bon{position:absolute;right:-18px;left:auto;top:-16px;width:29%;min-width:136px;z-index:2; transform:rotate(3.5deg);box-shadow:0 12px 26px rgba(20,30,40,.30);font-size:7px; padding:7px 10px 0} .weekendblok .bon .bonkop{font-size:6px;letter-spacing:.07em;margin-bottom:2px} .weekendblok .bon li{padding:0;line-height:1.28} .weekendblok .bontotaal{font-size:6.5px;padding-top:2px} @media (max-width:640px){ .weekendblok .bon{width:38%;min-width:112px;font-size:9px;padding:9px 9px 0} .weekendblok .bon .bonkop{font-size:8px} } /* De brede tegel met projectmanagement staat gecentreerd */ .tegel.breedtegel.midden{text-align:center} .tegel.breedtegel.midden .streepje{margin-left:auto;margin-right:auto} .tegel.breedtegel.midden p{margin-left:auto;margin-right:auto;max-width:60ch} /* Sfeerbeelden zijn ook aanklikbaar */ .fotostrook .foto{cursor:zoom-in} .fotostrook .foto img{transition:transform .3s} .fotostrook .foto:hover img{transform:scale(1.03)} /* Over mij: de foto staat links, met de haarlijn op de eerste tekstregel. Vaste kolombreedte, want de foto heeft geen achtergrond meer en hoeft niet even hoog te zijn als de tekst. */ @media (min-width:901px){ /* Foto links, even lang als de tekst ernaast. De onderkant van de trui valt samen met de laatste tekstregel; wat wegvalt is effen stof. */ .portret{position:relative;align-items:stretch;grid-template-columns:270px minmax(0,1fr);gap:30px} .portret .foto.staand{position:static;width:270px;height:auto;aspect-ratio:auto; background:none;box-shadow:none;border-radius:0;margin:0;overflow:hidden} .portret .foto.staand img{width:100%;height:100%;object-fit:cover;object-position:top center; border-radius:0;box-shadow:none} .portret .verhaal{grid-column:2;max-width:640px} } /* Voorbeeldformule bij de verloning */ .formule{margin:18px 0 0;padding:0;border:1px solid #d6d2ca;border-radius:5px;background:#fff; overflow:hidden} .formule figcaption{background:#eceae4;border-bottom:1px solid #d8d4cc;padding:7px 12px; font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#4a463f} .formule pre{margin:0;padding:14px 16px;overflow-x:auto;background:#fff} .formule code{font-family:"IBM Plex Mono",monospace;font-size:13px;line-height:1.7;color:#1b3a5c; white-space:pre} .formulenoot{margin:0;padding:10px 16px 14px;font-size:12.5px;color:var(--rust-tekst); border-top:1px dashed #ddd8d0;max-width:none} /* Een case waar naartoe gesprongen wordt, komt onder de balk uit */ .case[id]{scroll-margin-top:96px} /* De editor licht kort op als je er vanuit het chatvenster naartoe springt */ .vbaeditor{transition:box-shadow .5s} .vbaeditor.lichtop{box-shadow:0 0 0 4px rgba(69,105,130,.35)} .antwoordlijst .naarbestand{color:#9fd3b4;text-underline-offset:3px;cursor:pointer} /* Pijl naar het voorbeeld: rechte pijl in de ruimte tussen de tekst en de vergelijking, met een klein bijschrift erboven. */ .voorbeeldpijl{display:none} @media (min-width:901px){ .case.aidraai .teksten{flex:1} .voorbeeldpijl{display:block;position:absolute;z-index:2;color:var(--pagina); pointer-events:none;right:-34px;width:210px;top:78px} .voorbeeldpijl .pijltekst{display:block;font-family:"Fraunces",Georgia,serif; font-size:13px;font-weight:600;color:var(--rust-tekst);text-align:center;margin-bottom:3px} .voorbeeldpijl svg{display:block;width:100%;height:16px;overflow:visible} } /* De schuifbalk is sleepbaar, niet klikbaar */ .schuif{cursor:grab} .schuif:active{cursor:grabbing} .schuif .merkje{pointer-events:none} /* De opsomming in een tegel lijnt uit met de appschermen ernaast */ .tegel .setlijst{margin-top:26px} .tegel .setlijst li{padding-top:2px;padding-bottom:2px} @media (min-width:721px){ .tegels.twee .tegel{display:flex;flex-direction:column} } /* ---------- Foto's op Over mij ---------- */ .routefoto{margin:0;padding:0} .routefoto img{display:block;width:100%;height:auto;border-radius:18px; box-shadow:0 12px 30px rgba(48,74,91,.14)} .routefoto figcaption{margin-top:10px;font-size:13px;color:var(--rust-tekst);text-align:center} .bandfoto{margin:0;padding:0;border-radius:22px;overflow:hidden; box-shadow:0 14px 34px rgba(48,74,91,.15);aspect-ratio:16/7} .bandfoto img{display:block;width:100%;height:100%;object-fit:cover} /* Ronde foto naast de contactkop */ body.p-contact .paginakop{position:relative} .rondfoto{margin:0;padding:0} .rondfoto img{display:block;width:150px;height:150px;border-radius:50%;object-fit:cover; border:4px solid var(--licht);box-shadow:0 10px 26px rgba(48,74,91,.18);margin:22px auto 0} @media (min-width:901px){ .rondfoto img{position:absolute;right:0;top:50%;transform:translateY(-50%);width:170px;height:170px;margin:0} } /* In het voor-en-na blok staat lopende tekst, dus daar geldt de leesbreedte per kolom */ .voorna li{max-width:none} .voorna li .nu,.voorna li .straks{max-width:46ch} /* De formule loopt zichtbaar door onder de rand */ .formule pre{position:relative;max-height:230px;overflow:hidden} .formule pre::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px; background:linear-gradient(to bottom,rgba(255,255,255,0),#fff)} .formule{position:relative} .vbapaneel .formule{margin-top:16px} .formulenoot{border-top:1px dashed #ddd8d0;padding-top:10px} .privacyregel em{font-style:italic} /* ---------- Foto die meeloopt met de tekst ---------- */ .zweeffoto{margin:0 0 16px 0;padding:0} .zweeffoto img{display:block;width:100%;height:auto;border-radius:16px; box-shadow:0 12px 28px rgba(48,74,91,.14)} @media (min-width:721px){ .zweeffoto.rechts{float:right;width:360px;margin:4px 0 20px 28px;shape-margin:16px} .zweeffoto.rechts.klein{width:250px;margin-top:8px} } .verhaal.omloop::after{content:"";display:block;clear:both} .weekendblok .bontotaal{display:flex;justify-content:space-between;gap:6px;white-space:nowrap} .weekendblok .bon li{white-space:nowrap} /* De aanklikbare sfeerbeelden vullen hun kader volledig */ button.foto{appearance:none;border:0;padding:0;margin:0;background:none;display:block; width:100%;line-height:0;overflow:hidden;border-radius:20px} .fotostrook button.foto{aspect-ratio:3/4} button.foto img{display:block;width:100%;height:100%;object-fit:cover} /* ---------- Sport en spel: foto naast de tekst, even hoog ---------- */ .spelblok{display:grid;gap:26px} @media (min-width:901px){ .spelblok{position:relative;grid-template-columns:1fr 300px;align-items:start} .spelblok .verhaal{grid-column:1} .spelblok .spelfoto{position:absolute;right:0;top:0;bottom:0;width:300px;margin:0} .spelblok .spelfoto img{height:100%;object-fit:cover;object-position:center 35%} } /* de laatste alinea mag niet buiten het blok uitsteken, anders klopt de fotohoogte niet */ .spelblok .verhaal > :last-child,.portret .verhaal > :last-child{margin-bottom:0} @media (min-width:901px){ .spelblok .spelfoto{aspect-ratio:auto} } /* Over mij: minder lucht boven, zodat het routeblok eerder in beeld komt */ @media (min-width:901px){ body.p-overmij .paginakop{padding-top:40px;padding-bottom:30px} body.p-overmij section{padding-bottom:38px} } /* Op smalle schermen blijft de bon binnen de foto, anders ontstaat zijwaarts schuiven */ @media (max-width:900px){ .weekendblok{overflow:visible} .weekendblok .bon{position:absolute;right:6px;left:auto;top:6px;width:38%;min-width:118px; transform:rotate(3deg);font-size:8px;padding:7px 9px 0} } @media (max-width:640px){ .weekendblok .bon{width:44%;min-width:108px;font-size:7.5px} } /* De tekst naast het portret houdt een prettige leesbreedte; daardoor blijft de foto ook een prettig formaat */ /* ============================================================ DEEL 14 — LAATSTE CONTROLE: LEESBAARHEID ============================================================ */ /* De knop in het mobiele menu erfde de donkere menukleur; wit leest hier veel beter. */ .mobielmenu .knop{color:var(--licht) !important} /* Het actieve menu-item stond op 4,42:1; iets donkerder haalt de norm ruim. */ .balk a[aria-current="page"]:not(.knop),.mobielmenu a[aria-current="page"]:not(.knop){color:#7A6349} /* Wit op steenbruin haalde net 4,42:1 op de contactpagina. */ .knop{color:var(--licht)} /* ============================================================ DEEL 15 — PER APPARAAT BIJGESTELD Mobiel = tot 720px, iPad = 721 tot 900px, computer = vanaf 901px ============================================================ */ /* 1. Het portret was op tablet en telefoon veel te dominant */ @media (max-width:900px){ .portret .foto.staand{max-width:300px;margin-left:0} } @media (max-width:720px){ .portret .foto.staand{max-width:210px} } /* 2. Op tablet en telefoon staat het voorbeeld direct onder de eerste alinea, met een bijschrift erboven en zonder pijl */ @media (max-width:900px){ .case.aidraai .natoelichting{display:grid;gap:0} .case.aidraai .teksten{display:contents} .case.aidraai .teksten p:nth-of-type(1){order:1;margin-bottom:18px} .case.aidraai .voorbeeldpijl{display:block;order:2;margin:0 0 8px; font-family:"Fraunces",Georgia,serif;font-size:14.5px;font-weight:600;color:var(--rust-tekst)} .case.aidraai .voorbeeldpijl svg{display:none} .case.aidraai .schuifblok{order:3;margin:0 0 22px} .case.aidraai .teksten p:nth-of-type(2){order:4} } /* 3. Het bonnetje op de telefoon kleiner, zodat niemand erachter verdwijnt */ @media (max-width:720px){ .weekendblok .bon{width:31%;min-width:96px;font-size:6px;padding:5px 7px 0; right:6px;top:6px;transform:rotate(3deg)} .weekendblok .bon .bonkop{font-size:5.5px;margin-bottom:2px} .weekendblok .bontotaal{font-size:6px;padding-top:2px} } /* 4. De voorbeeldformule liep op de telefoon buiten het scherm en duwde daarmee de rest mee. Nu schuift alleen het kader zelf. */ /* Een rasterkolom groeit standaard mee met zijn inhoud; met min-width:0 blijft hij binnen het scherm en schuift alleen de formule zelf. */ .vbabody,.vbabody > *,.vbaeditor,.vbapaneel,.vbainhoud,.vbacode{min-width:0} .formule,.formule pre{max-width:100%} .formule pre{overflow-x:auto} @media (max-width:720px){ .formule pre{font-size:11px;padding:12px 12px} .formule code{white-space:pre;word-break:normal} } /* 5. De bestandenlijst blijft op tablet en telefoon bovenin staan tijdens het lezen. Op de telefoon als smalle strook die je opzij kunt schuiven. */ @media (max-width:900px){ .vbaeditor{overflow:visible} .vbamodules{position:sticky;top:64px;z-index:6;background:#f3efe9; box-shadow:0 6px 14px rgba(48,74,91,.10)} } @media (max-width:720px){ .vbamodules{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch;padding:8px;gap:6px;scrollbar-width:none;align-items:center} .vbamodules::-webkit-scrollbar{display:none} .vbamodules .vbapaneelkop,.vbamodules .vbawortel,.vbamodules .vbamap{display:none} .vbamodules .vbaboom{display:flex;flex-direction:row;gap:6px;flex:0 0 auto;padding:0;border:0;background:none} .vbamodules .vbagroep{display:flex;flex-direction:row;gap:6px;flex:0 0 auto;padding:0;border:0;margin:0} .vbamodules button{flex:0 0 auto;white-space:nowrap;font-size:12.5px;padding:8px 13px; border-radius:999px;background:var(--licht);border:1px solid rgba(48,74,91,.18);color:var(--inkt)} .vbamodules button::before{display:none} .vbamodules button[aria-selected="true"]{background:var(--primair);color:var(--licht); border-color:var(--primair)} } /* 6. Op tablet passen de navigatielinks op de brug wel, klein en rustig */ @media (min-width:721px) and (max-width:900px){ .brugnav{display:block} .brugnav a{font-size:12px;padding:7px 12px;border-width:1.5px; box-shadow:0 3px 10px rgba(48,74,91,.18)} .brugnav-mobiel{display:none} } /* 7. De pijl staat gecentreerd in de ruimte tussen de twee kolommen */ @media (min-width:641px){ .voorna li{display:flex;align-items:center;gap:0} .voorna li .nu{flex:0 1 auto} .voorna li .pijl{flex:1 1 auto;text-align:center;min-width:44px} .voorna li .straks{flex:0 0 46%} } /* 8. De drie sfeerbeelden op de telefoon klein naast elkaar, net als de apps */ @media (max-width:720px){ .fotostrook{grid-template-columns:repeat(3,1fr);gap:9px} .fotostrook button.foto{aspect-ratio:3/4;border-radius:11px} } /* 9. Op tablet staat de foto bij contact naast de tekst */ @media (min-width:721px) and (max-width:900px){ body.p-contact .paginakop .wrap{display:grid;grid-template-columns:1fr 160px; gap:26px;align-items:center} body.p-contact .paginakop .label, body.p-contact .paginakop h1, body.p-contact .paginakop .lead{grid-column:1} .rondfoto{grid-column:2;grid-row:1 / span 3;margin:0} .rondfoto img{width:160px;height:160px;margin:0} } /* ============================================================ DEEL 16 — BIJSTELLING PER APPARAAT, RONDE 2 ============================================================ */ /* 1. Tablet: de tekst loopt rechts langs het portret. Telefoon: portret gecentreerd. */ @media (min-width:721px) and (max-width:900px){ .portret{display:block} .portret .foto.staand{float:left;max-width:280px;margin:4px 26px 14px 0;shape-margin:16px} .portret .verhaal::after{content:"";display:block;clear:both} } @media (max-width:720px){ .portret .foto.staand{margin-left:auto;margin-right:auto} } /* 2. Het voorbeeld en het bijschrift staan gecentreerd op tablet en telefoon */ @media (max-width:900px){ .case.aidraai .voorbeeldpijl{text-align:center} .case.aidraai .schuifblok{margin-left:auto;margin-right:auto;width:100%} .case.aidraai .schuif{margin-left:auto;margin-right:auto;max-width:470px} .case.aidraai .schuifwijzer{margin-left:auto;margin-right:auto;text-align:center;max-width:470px} } @media (max-width:720px){ .case.aidraai .schuif{max-width:none} .case.aidraai .schuifwijzer{max-width:none} } /* 3. Het bonnetje: op de telefoon kleiner, op de tablet smaller en langer */ @media (min-width:721px) and (max-width:900px){ .weekendblok .bon{width:25%;min-width:150px;font-size:9.5px;padding:14px 14px 0; right:6px;top:-18px;transform:rotate(3deg)} .weekendblok .bon li{line-height:2.1;padding:2px 0} .weekendblok .bon .bonkop{font-size:8.5px;margin-bottom:10px} .weekendblok .bontotaal{font-size:9px;padding-top:8px} } @media (max-width:720px){ .weekendblok .bon{width:26%;min-width:84px;font-size:5.2px;padding:4px 6px 0} .weekendblok .bon .bonkop{font-size:5px;margin-bottom:2px} .weekendblok .bontotaal{font-size:5.2px;padding-top:2px} .weekendblok .bon li{line-height:1.25} } /* 4 en 5. De bestandenstrook: knoppen krimpen mee, en op tablet valt de vensterrand en de bestandsnaam weg zodat alleen de bestanden meebewegen. */ @media (max-width:900px){ .vbamodules .vbapaneelkop,.vbamodules .vbawortel{display:none} .vbamodules button{width:auto;min-width:0} } @media (max-width:900px){ /* Modules en formules blijven gescheiden, elk met een eigen kopje; alleen de vensterrand en de bestandsnaam vallen weg zodat de balk laag blijft. */ .vbamodules{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px} .vbamodules .vbaboom{display:flex;flex-direction:column;gap:8px;padding:0;border:0; background:none;margin:0} .vbamodules .vbagroep{display:flex;flex-wrap:wrap;align-items:center;gap:6px; padding:0;border:0;margin:0} .vbamodules .vbamap{display:block;width:100%;font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:#5C5C55;font-weight:600;margin:0 0 2px} .vbamodules button{width:auto !important;flex:0 0 auto;white-space:nowrap;font-size:12.5px; padding:7px 12px;border-radius:999px;background:var(--licht); border:1px solid rgba(48,74,91,.18);color:var(--inkt)} .vbamodules button::before{display:none} .vbamodules button[aria-selected="true"]{background:var(--primair);color:var(--licht); border-color:var(--primair)} } /* 7. De pijlen staan op elke regel op dezelfde plek, uitgelijnd op de langste zin */ @media (min-width:641px){ .voorna li{display:grid;grid-template-columns:30ch 92px minmax(0,1fr);align-items:center} .voorna li .nu,.voorna li .pijl,.voorna li .straks{flex:none} .voorna li .pijl{text-align:center} } /* 8. Het vergrootvenster centreert de foto precies */ .vergroot{display:grid;place-items:center;padding:26px} .vergroot img{margin:0 auto;display:block;max-width:min(100%,420px)} /* ============================================================ DEEL 17 — RONDE MET FAMILIEFEEDBACK ============================================================ */ /* De aanwijzing bij de Excel-bestanden verschilt per apparaat: op de computer zijn het pijltjes, op tablet en telefoon knoppen. */ .wijzer .optik{display:none} @media (max-width:900px){ .wijzer .opklik{display:none} .wijzer .optik{display:inline} .wijzer .wijzerpijl{display:none} } /* De contactblokken staan schuin en gaan recht als je erover beweegt. Op een aanraakscherm bestaat dat niet, dus daar staan ze meteen recht. */ @media (hover:none){ .manieren.leuning .manier:nth-child(1), .manieren.leuning .manier:nth-child(2), .manieren.leuning .manier:nth-child(3), .manieren.leuning .manier:nth-child(4){transform:none} } /* De drie alinea's naast het portret: gelijke grootte en lettertype. Alleen de laatste wijkt af in kleur en dikte. */ .portret .verhaal > p,.portret .verhaal > p.lead,.portret .verhaal > p:first-child{font-size:18px;line-height:1.55} /* De portretfoto heeft geen achtergrond meer, dus het vlak eromheen vervalt */ .portret .foto.staand{background:none;box-shadow:none;border-radius:0} .portret .foto.staand img{border-radius:0;box-shadow:none} /* ---------- Rustiger merkteken op tablet en telefoon ---------- */ .balk .mark.klein{display:none} @media (max-width:900px){ .balk .mark.vol{display:none} /* Op tablet en telefoon staat het volledige logo in de balk, inclusief naam en slogan; de losse tekst ernaast vervalt dan. */ .balk .mark.klein{display:block;width:auto;height:38px;flex:none} .balk .logo .naamvak{display:none} .balk .logo{min-height:38px;align-items:center;gap:0} } /* Het portret mag groter en begint bij de eerste tekstregel */ @media (min-width:721px) and (max-width:900px){ /* De foto is even hoog als de tekst ernaast en begint op dezelfde regel. */ .portret{display:grid;grid-template-columns:370px minmax(0,1fr);gap:24px;align-items:stretch} .portret .foto.staand{float:none;width:370px;max-width:none;height:auto;margin:0;overflow:hidden} .portret .foto.staand img{width:100%;height:100%;object-fit:cover;object-position:top center} .portret .verhaal{grid-column:2} } @media (max-width:720px){ .portret .foto.staand{max-width:300px;margin-top:0} .portret{gap:14px} body.p-overmij .paginakop{padding-bottom:8px} } /* De pijl terug naar boven is op tablet overbodig; op de telefoon blijft hij */ @media (min-width:721px) and (max-width:900px){ .omhoog{display:none !important} } /* Minder lucht tussen het portretblok en het routeblok */ @media (max-width:900px){ body.p-overmij section:first-of-type{padding-bottom:0} body.p-overmij section:nth-of-type(2){padding-top:18px} .portret .verhaal > :last-child{margin-bottom:0} } /* Tussen 901 en 1100 pixels bleef er te weinig ruimte over naast de rivier, waardoor de rechterkolom buiten beeld viel. */ @media (min-width:901px) and (max-width:1400px){ .werelden .rooster{grid-template-columns:minmax(0,1fr) calc(100vw*0.28) minmax(0,1fr)} .blok{padding:26px 22px} .kol-links,.kol-rechts{max-width:none;margin-left:0;margin-right:0} } /* De portretfoto is bijna vierkant; het vak mag geen vaste verhouding van 4 op 5 meer aanhouden, anders blijft er lege ruimte onder de foto staan. */ .portret .foto.staand{aspect-ratio:auto} /* ============================================================ RONDE OKTOBER 2026 Alles hieronder is in de feedbackronde van oktober toegevoegd. ============================================================ */ /* Dark mode: de site blijft altijd licht. Alleen de achtergrond wordt licht gehouden, alle eigen kleuren (VBA-editor, Tarief-blokjes, scorebord, labels) blijven precies zoals ze zijn. */ :root{color-scheme:only light} @media (prefers-color-scheme:dark){html{background-color:#FBF9F6}} /* Footer: slogan groter (was 9,5px), privacylink in de voetregel */ .voet .merkslogan{font-size:12px;letter-spacing:.16em;line-height:1.45} .voetregel .privacylink{color:var(--rust-tekst);text-decoration:underline;text-underline-offset:3px} .voetregel .privacylink:hover{color:var(--primair)} /* Diensten in het menu en op de leuning springt naar de dienstkaarten */ #diensten{scroll-margin-top:96px} /* E16: labels EVENTS en FINALE iets donkerder voor genoeg contrast (4,96:1) */ .case .chip[data-soort="events"],.chip.chip-events{color:#7A6349} .poulegroep[data-groep="3"] .groepnaam{color:#7A6349} /* 3: nieuwe hero op de homepage. "Bridgework" blijft even groot, de regel eronder is de h1 */ .kop .merktitel{font-family:"Fraunces",Georgia,serif;font-weight:600;letter-spacing:-.02em;margin:0; font-size:clamp(46px,8vw,80px);line-height:1.04;color:var(--inkt)} .kop h1.kopregel{font-family:"Fraunces",Georgia,serif;font-weight:500;letter-spacing:-.01em; font-size:clamp(21px,2.5vw,28px);line-height:1.3;max-width:24em;margin:22px auto 0;color:var(--inkt);text-wrap:balance} .kop .kopzin{font-size:clamp(17px,1.8vw,19px);color:var(--rust-tekst);margin:8px 0 0} .kop .kopknop{margin:20px 0 0} /* 12 en 13: korte zinnen boven en onder de dienstkaarten */ .werelduitleg{position:relative;z-index:2;max-width:560px;margin:0 auto;padding:16px 26px;text-align:center; font-size:17px;line-height:1.55;color:var(--inkt);background:rgba(251,249,246,.94);border-radius:18px; box-shadow:0 6px 22px rgba(48,74,91,.08)} .werelduitleg.boven{margin-bottom:6px} .werelduitleg.onder{margin-top:42px;font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:19px} @media (max-width:900px){ .werelduitleg{margin-left:var(--zij);margin-right:var(--zij);max-width:none} .werelduitleg.boven{margin-bottom:20px} .werelduitleg.onder{margin-top:24px} } /* H: op mobiel staat de Proces-kaart links uitgelijnd, net als de Events-kaart */ @media (max-width:720px){ .blok.kol-links{text-align:left} .blok.kol-links .meer{justify-content:flex-start} } /* H6 tot H9: Mijn aanpak alleen met koppen */ .stappen.kort li{padding-bottom:22px;min-height:36px;display:flex;align-items:center} .stappen.kort li:last-child{padding-bottom:0} .stappen.kort strong{margin:0} /* S2: de brug bouwt zichzelf, laag voor laag (alleen bij het eerste bezoek) */ .brug.bouwt .st{animation:steenin .45s var(--d) cubic-bezier(.25,.8,.35,1) both} .brug.bouwt .dek{animation:leuningin .5s 2.1s ease both} .brug.bouwt .brugnav a{animation:leuningin .4s 2.2s ease both} @keyframes steenin{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}} @keyframes leuningin{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){.brug.bouwt > img,.brug.bouwt .brugnav a{animation:none}} /* O7: de Tender-Link-regel licht op */ .verhaal .eersteopdracht{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:19px;line-height:1.45; color:#7A6349;border-left:3px solid var(--accent);padding:2px 0 2px 16px;margin:4px 0 0} /* Over mij: de paginakop staat op dezelfde linkerlijn als de koppen en tekst eronder */ body.p-overmij .paginakop .wrap,body.p-privacy .paginakop .wrap{padding-left:max(24px,calc(var(--zij) + 22px));padding-right:max(24px,calc(var(--zij) + 22px))} @media (max-width:640px){body.p-overmij .paginakop .wrap,body.p-privacy .paginakop .wrap{padding-left:20px;padding-right:20px}} /* Events: labels mogen op iPad en mobiel over twee regels */ @media (max-width:900px){.scorebord .item .wat{white-space:normal}} /* N1: het pijltje "Instructie 2: vragenlijst opmaken" staat in een eigen regel onder de werkinstructies, zodat het niet over de tekst van de opdrachtmonitor valt nu die tekst korter is */ @media (min-width:901px){ .case.aidraai .teksten > p:first-of-type{order:1} .case.aidraai .teksten .voorbeeldpijl{order:2;position:relative;top:auto;right:auto;justify-self:end;margin:-8px -34px -6px 0} .case.aidraai .teksten > p:last-of-type{order:3} } /* Slotblok: verwijzing naar de andere dienst als tekstlink */ .slot .slotlink{margin:16px 0 0;font-weight:600} .slot .slotlink a{color:var(--primair)} /* Portfolio: privacyregel direct onder de intro */ .paginakop .privacyregel{margin:14px 0 0;max-width:640px} /* E25: projectmanagement als eigen strook */ .pmstrook{display:flex;align-items:center;gap:clamp(20px,4vw,48px);margin:22px 0 0;padding:28px clamp(22px,3.5vw,40px); background:var(--pagina-zacht);border-radius:20px} .pmtekst{flex:1;min-width:0} .pmtekst h3{font-size:22px;margin:0 0 6px} .pmtekst p{margin:0;max-width:44ch} .pmdrie{list-style:none;margin:0;padding:0;display:flex;gap:clamp(14px,2.5vw,30px);position:relative;flex:none} .pmdrie::before{content:"";position:absolute;left:28px;right:28px;top:27px;border-top:2px dashed rgba(69,105,130,.35)} .pmdrie li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--inkt);width:72px;text-align:center} .pmicoon{width:56px;height:56px;border-radius:50%;background:var(--licht);border:2px solid var(--pagina);display:grid;place-items:center} .pmicoon svg{width:26px;height:26px;fill:none;stroke:var(--pagina);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pmdrie li:last-child .pmicoon{border-color:var(--accent)} .pmdrie li:last-child .pmicoon svg{stroke:var(--accent)} @media (max-width:720px){ .pmstrook{flex-direction:column;align-items:stretch;text-align:left} .pmdrie{justify-content:space-between;max-width:300px} } /* S10: een lange, subtiele rij stenen tussen de secties (niet op de homepage) */ .steenlijn{height:6px;width:min(640px,calc(100% - 2 * var(--zij)));margin:0 auto;opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2285%22%20height%3D%226%22%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%2085%206%22%3E%3Crect%20x%3D%221.5%22%20y%3D%220%22%20width%3D%2214%22%20height%3D%226%22%20rx%3D%221.2%22%20fill%3D%22%238a6647%22%2F%3E%3Crect%20x%3D%2218.5%22%20y%3D%220%22%20width%3D%2214%22%20height%3D%226%22%20rx%3D%221.2%22%20fill%3D%22%23a6805c%22%2F%3E%3Crect%20x%3D%2235.5%22%20y%3D%220%22%20width%3D%2214%22%20height%3D%226%22%20rx%3D%221.2%22%20fill%3D%22%23946f4c%22%2F%3E%3Crect%20x%3D%2252.5%22%20y%3D%220%22%20width%3D%2214%22%20height%3D%226%22%20rx%3D%221.2%22%20fill%3D%22%23b08b64%22%2F%3E%3Crect%20x%3D%2269.5%22%20y%3D%220%22%20width%3D%2214%22%20height%3D%226%22%20rx%3D%221.2%22%20fill%3D%22%239c7550%22%2F%3E%3C%2Fsvg%3E") left center/85px 6px repeat-x; background-repeat:repeat-x} @supports (width:round(down,100px,17px)){.steenlijn{width:round(down,min(640px,calc(100% - 2 * var(--zij))),17px)}} body.sub section:has(+ .steenlijn),body.sub .stroomlijnpad:has(+ .steenlijn) section:last-child{padding-bottom:48px} body.sub .steenlijn + section,body.sub .steenlijn + .stroomlijnpad > section:first-child{padding-top:48px} body.sub .steenlijn + section .doorverwijzing{margin-top:0} body.sub section:has(+ .steenlijn) .kaarten{padding-bottom:0} @media (min-width:901px){body.sub section:has(+ .steenlijn) .kaarten.waaier{padding-bottom:31px}} body.p-contact section:has(+ .steenlijn){padding-bottom:56px} /* Tarieven: de drie knoppen boven de kaarten passen ook op een heel smal scherm (was al zo op de live-site bij 320px) */ @media (max-width:420px){.pakketkiezer{gap:4px;padding:4px;grid-template-columns:repeat(3,minmax(min-content,1fr))}.pakketkiezer button{font-size:12.5px;padding-left:5px;padding-right:5px;border-radius:22px}} @media (max-width:360px){.pakketkiezer{gap:2px;padding:3px}.pakketkiezer button{font-size:12px;padding-left:4px;padding-right:4px}} /* Controleronde: kleine verbeteringen */ .slot .slotlink,.fout .label,.fout .foutlink{margin-left:auto;margin-right:auto} .slot .slotlink{max-width:none} .bootje.aangemeerd{z-index:6} @media (max-width:720px){.kop .kopknop{margin-bottom:18px}} .verhaal .eersteopdracht,.paneel p,.werelduitleg,.pmtekst p{text-wrap:pretty} body.p-privacy .paginakop h1{overflow-wrap:break-word;hyphens:auto} @media (max-width:400px){body.p-privacy .paginakop h1{font-size:30px}} /* Geen losse woorden op de laatste regel van koppen en alinea's */ h1,h2,h3,.doorkaart .vraag{text-wrap:balance} p,li{text-wrap:pretty} /* Kleuren voor de twee nieuwe pagina's */ body.p-privacy{--pagina:#304A5B;--pagina-zacht:#E7ECF0;--pagina-band:#EEF1F3} body.p-fout{--pagina:#456982;--pagina-zacht:#E6EEF4;--pagina-band:#EFF3F6} /* 404 */ .fout{max-width:760px;margin:0 auto;padding:clamp(36px,6vw,64px) 24px 76px;text-align:center} .foutbeeld{width:min(448px,100%);margin:0 auto 30px} .foutbeeld img{display:block;width:100%;height:auto} .fout .label{display:block;margin:0 auto 8px;text-align:center} .fout h1{font-size:clamp(32px,5vw,52px);margin:0 0 14px;text-wrap:balance} .fout .uitleg{font-size:18px;max-width:30em;margin:0 auto 26px} .fout .knoppen{display:flex;justify-content:center;gap:12px;flex-wrap:wrap} .fout .foutlink{margin:16px auto 0;font-size:15.5px} /* Privacyverklaring */ .privacytekst h2{font-size:22px;margin:28px 0 8px} .privacytekst h2:first-child{margin-top:0} .privacytekst p,.privacytekst li{max-width:66ch} .privacytekst ul{padding-left:20px;margin:0 0 .85em} .privacytekst li{margin:0 0 4px} .privacydatum{margin-top:30px;font-size:14px;color:var(--rust-tekst)} /* S3: pakketten als speelkaarten */ .kaarten{display:flex;justify-content:center;gap:18px;margin:10px auto 0;perspective:1600px;padding:30px 0 10px} .speelkaart{position:relative;flex:none;width:290px;height:690px} .speelkaart .draai{position:absolute;inset:0;z-index:3;opacity:0;cursor:pointer;border:0;background:none} .speelkaart .vh{position:absolute;left:-9999px} .kaartbinnen{position:relative;width:100%;height:100%;transform-style:preserve-3d} .speelkaart.om .kaartbinnen{transform:rotateY(180deg)} .speelkaart.draaitopen .kaartbinnen{animation:open .75s cubic-bezier(.35,.1,.25,1) both} .speelkaart.draaitdicht .kaartbinnen{animation:dicht .75s cubic-bezier(.35,.1,.25,1) both} @keyframes open{0%{transform:rotateY(0) translateZ(0) scale(1)}35%{transform:rotateY(70deg) translateZ(60px) scale(1.06)}65%{transform:rotateY(150deg) translateZ(60px) scale(1.06)}85%{transform:rotateY(186deg) translateZ(10px) scale(1.01)}100%{transform:rotateY(180deg) translateZ(0) scale(1)}} @keyframes dicht{0%{transform:rotateY(180deg) scale(1)}35%{transform:rotateY(110deg) translateZ(60px) scale(1.06)}65%{transform:rotateY(30deg) translateZ(60px) scale(1.06)}85%{transform:rotateY(-6deg) translateZ(10px) scale(1.01)}100%{transform:rotateY(0) scale(1)}} .speelkaart{transition:transform .45s cubic-bezier(.3,.7,.3,1)} .kaarten.waaier .speelkaart.om{transform:rotate(0) translateY(-10px)!important;z-index:6} .speelkaart.om .achterkant,.speelkaart.draaitopen .voorkant{box-shadow:0 26px 60px rgba(48,74,91,.22)} @media (prefers-reduced-motion:reduce){.speelkaart.draaitopen .kaartbinnen,.speelkaart.draaitdicht .kaartbinnen{animation:none}.speelkaart{transition:none}} .voorkant,.achterkant{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px; background:#FBF9F6;border:1.5px solid #d9d2c8;box-shadow:0 14px 34px rgba(48,74,91,.12);overflow:hidden} .voorkant{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px} .voorkant::after{content:"";position:absolute;inset:12px;border:1.5px solid #e6dfd5;border-radius:12px;pointer-events:none} .hoek{position:absolute;font:600 28px/1 "Fraunces",Georgia,serif} .hoek.lb{left:22px;top:20px}.hoek.ro{right:22px;bottom:20px;transform:rotate(180deg)} .rood .hoek,.rood .groot,.hoek.rood{color:#a8603f}.zwart .hoek,.zwart .groot,.hoek.zwart{color:#304A5B} .groot{font-size:96px;line-height:1;margin-bottom:14px} .voorkant h2{font-size:26px;margin:0 0 10px} .voorkant .een{font-size:16px;color:var(--rust-tekst,#5C5C55);margin:0 0 16px;max-width:16em} .afreken{font-size:14.5px;margin:0 0 20px;color:#304A5B;font-weight:600}.afreken span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5C5C55;font-weight:600;margin-bottom:3px}.bekijk{display:inline-block;border:1.5px solid #456982;color:#456982;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;margin-bottom:14px}.speelkaart:hover .bekijk{background:#456982;color:#fff}.voorlink{font-size:14px;font-weight:600;position:relative;z-index:4;color:#304A5B}.oud-tip{font-size:13px;letter-spacing:.06em;color:#897057;font-weight:600} .tip .optik{display:none} @media (hover:none){.tip .opklik{display:none}.tip .optik{display:inline}} .achterkant{transform:rotateY(180deg);padding:50px 24px 22px;text-align:left} .achterkant h3{font:600 21px "Fraunces",Georgia,serif;margin:0 0 6px;color:#304A5B} .achterkant .voor{display:none} .achterkant ul{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px;font-size:14px;line-height:1.45} .achterkant li{position:relative;padding-left:20px}.achterkant li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:2px;background:#456982} .achterkant .fase{display:inline-block;font-size:11px;letter-spacing:.14em;font-weight:600;text-transform:uppercase;background:#304A5B;color:#fff;border-radius:999px;padding:3px 10px;margin:4px 0 8px} .achterkant .prijs{border-top:1px solid #e6dfd5;padding-top:12px;font-size:14px} .achterkant .tarieflabel{display:block;font-size:11px;letter-spacing:.16em;font-weight:600;text-transform:uppercase;color:#5C5C55;margin-bottom:4px} .achterkant .bij{display:block}.achterkant .vraagaan{display:inline-block;margin-top:8px;font-weight:600;position:relative;z-index:4} /* waaier */ .kaarten.waaier .k0{transform:rotate(-6deg) translateY(18px)} .kaarten.waaier .k2{transform:rotate(6deg) translateY(18px)}.kaarten.waaier .k1{z-index:2} .kaarten.waaier{gap:0}.kaarten.waaier .speelkaart{margin:0 -14px} .kaarten.waaier .speelkaart:hover{z-index:5} .kaarten.waaier .speelkaart.om{z-index:6} @media (max-width:900px){ .kaarten,.kaarten.waaier{display:block;padding-top:6px} .speelkaart,.kaarten.waaier .speelkaart{width:min(340px,100%);height:600px;margin:0 auto;transform:none!important;display:none} .kaarten .speelkaart.zicht{display:block!important} } /* controleronde: de link op de achterkant is klikbaar, een eigen knop draait terug, kaarten niet hoger dan nodig */ .speelkaart.om .draai{pointer-events:none} .achterkant .terug{position:absolute;top:14px;right:14px;z-index:5;width:36px;height:36px;border-radius:50%;border:1.5px solid #d9d2c8; background:#FBF9F6;color:#456982;font:600 18px/1 "IBM Plex Sans",system-ui,sans-serif;cursor:pointer;display:grid;place-items:center;padding:0} .achterkant .terug:hover{background:#456982;color:#FBF9F6;border-color:#456982} .achterkant .terug:focus-visible,.speelkaart .draai:focus-visible + .kaartbinnen .voorkant{outline:2px solid #456982;outline-offset:3px} .speelkaart{height:580px} .voorkant .een{text-wrap:balance} @media (max-width:900px){.speelkaart,.kaarten.waaier .speelkaart{height:520px}} /* S4: draadkluwen boven de vergelijking */ .kluwen svg{display:block;width:100%;height:auto;overflow:visible} .kluwen .draad{fill:none;stroke:#456982;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-width:2.6px} .kluwen .eind{fill:#897057} .kluwen.band{max-width:none;margin:6px 0 26px} .kluwen.kop{max-width:520px;margin:26px 0 0} @media (max-width:720px){.kluwen.band{margin:0 auto 18px}} .kluwen svg{aspect-ratio:900/160;height:auto} @media (max-width:720px){.kluwen.band svg{aspect-ratio:auto;height:96px}} /* S6: papieren bootje op de rivier */ .bootje{position:absolute;left:0;top:0;z-index:0;width:84px;margin-left:-42px;margin-top:-40px;display:block;text-decoration:none; transition:opacity .3s} .bootje svg{display:block;width:100%;height:auto;transition:rotate .25s linear} .bootje svg{animation:dobber 3.2s ease-in-out infinite;transform-origin:50% 80%} @keyframes dobber{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}} .bootje{transform-origin:50% 50%} .bootje.kopregel{width:62px;margin-left:-31px;margin-top:-20px} .bootje .bord{position:absolute;left:50%;top:-30px;transform:translateX(-50%);white-space:nowrap;background:#FBF9F6;color:var(--inkt); font:600 13px "IBM Plex Sans",system-ui,sans-serif;padding:5px 11px;border-radius:999px;border:1px solid #d9d2c8;opacity:0;transition:opacity .25s} .bootje:hover .bord,.bootje:focus-visible .bord,.bootje.aangemeerd .bord{opacity:1} .bootje.aangemeerd .bord{left:100%;top:50%;transform:translate(10px,-50%)}.bootje.aangemeerd.labelboven .bord{left:50%;top:100%;transform:translate(-50%,2px)} .bootje:focus-visible{outline:2px solid var(--primair);outline-offset:4px;border-radius:8px} @media (prefers-reduced-motion:reduce){.bootje svg{animation:none;transition:none}} .bootje[hidden]{display:none} .bootje.aangemeerd.labelonder .bord{left:50%;top:100%;transform:translate(-50%,4px)} /* E22b: de vier portfoliotegels, elk met een eigen interactief voorbeeld */ .tegelwerk,.leesvel{ --s-grond:#f6f2ec; --s-papier:#ffffff; --s-inkt:#304a5b; --s-zacht:#6b7680; --s-ontwerp:#544a72; --s-ontwerp-licht:#e7e3f0; --s-groen:#3d6b4c; --s-groen-licht:#e2ece4; --s-steen:#897057; --s-steen-licht:#eae7e0; --s-rand:rgba(48,74,91,.18); --s-kop:'Fraunces',Georgia,serif; --s-tekst:'IBM Plex Sans',system-ui,sans-serif; } .vak{margin-top:22px;display:flex;flex-direction:column;align-items:center;text-align:center} .vak .browser,.vak .akte,.vak .map{text-align:left} .vakuitleg{font:600 12px/1.3 var(--s-tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--s-zacht);margin:0 0 24px;display:flex;align-items:center;justify-content:center;gap:8px} .tegel .vak .vakuitleg{margin:0 0 24px} .vakuitleg i{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.6;animation:vakpuls 1.6s ease-in-out infinite} @keyframes vakpuls{50%{opacity:.15}} /* 1 Mockups: klikbaar formulier */ .browser{width:100%;max-width:320px;background:var(--s-papier);border:1px solid var(--s-rand);border-radius:12px;box-shadow:0 8px 24px rgba(31,42,58,.08);overflow:hidden} .browserbalk{display:flex;align-items:center;gap:5px;padding:9px 12px;border-bottom:1px solid var(--s-ontwerp-licht)} .browserbalk span{width:7px;height:7px;border-radius:50%;background:#d9d4e6} .browserbalk b{margin-left:8px;font:400 11px var(--s-tekst);color:var(--s-zacht);background:var(--s-grond);border-radius:6px;padding:2px 10px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .formulier{padding:14px 16px 16px;font-family:var(--s-tekst)} .vstap{font:600 10.5px var(--s-tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--s-ontwerp)} .vbalk{height:4px;background:var(--s-ontwerp-licht);border-radius:3px;margin:6px 0 12px;overflow:hidden} .vbalk i{display:block;height:100%;background:var(--s-ontwerp);border-radius:3px;transition:width .4s ease} .scherm{display:grid;gap:8px} .scherm h4{margin:0 0 2px;font:600 15px var(--s-tekst);color:var(--s-inkt)} .scherm label{font-size:11.5px;color:var(--s-zacht);display:grid;gap:3px} .scherm input{font:400 13px var(--s-tekst);padding:7px 9px;border:1px solid #d9d4e6;border-radius:6px;color:var(--s-inkt);background:var(--s-papier)} .vknop{margin-top:4px;font:600 13px var(--s-tekst);background:var(--s-ontwerp);color:#fff;border:0;border-radius:7px;padding:9px 12px;cursor:pointer} .vknop:disabled{opacity:.4;cursor:default} .vknop:focus-visible,.vdrop:focus-visible,.tab:focus-visible,.dock button:focus-visible,.scherm-tel:focus-visible,.opnieuw:focus-visible{outline:2px solid var(--s-inkt);outline-offset:2px} .vdrop{border:1.5px dashed #b9b0cf;border-radius:8px;padding:16px 10px;text-align:center;font:600 13px var(--s-tekst);color:var(--s-ontwerp);background:#faf9fc;cursor:pointer} .vdrop.klaar{border-style:solid;border-color:var(--s-ontwerp);background:var(--s-ontwerp-licht)} .vink{width:46px;height:46px;border-radius:50%;background:var(--s-ontwerp-licht);color:var(--s-ontwerp);display:grid;place-items:center;margin:4px auto 2px;animation:plop .45s cubic-bezier(.3,1.6,.5,1)} @keyframes plop{from{transform:scale(.3)}} .verstuurd{text-align:center} .verstuurd p{font-size:12.5px;color:var(--s-zacht);margin:0} .opnieuw{background:none;border:0;font:600 12.5px var(--s-tekst);color:var(--s-ontwerp);text-decoration:underline;cursor:pointer;margin-top:4px} /* 2 Voorwaarden: loep over de kleine lettertjes */ .leesvel{--a-inkt:#1d2733;--a-kop:#1f3047;--a-grijs:#4d5560} .akte{--a-inkt:#1d2733;--a-kop:#1f3047;--a-grijs:#4d5560;position:relative;width:100%;max-width:220px;aspect-ratio:210/297;background:var(--s-papier);border:1px solid var(--s-rand);border-radius:2px;box-shadow:0 1px 2px rgba(31,42,58,.08),0 10px 28px rgba(31,42,58,.1);cursor:zoom-in;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden} .akte-inhoud{position:relative;height:100%;display:flex;flex-direction:column;padding:22px 20px 12px;font-family:Georgia,'Times New Roman',serif;color:var(--a-inkt);box-sizing:border-box;-webkit-text-size-adjust:none;text-size-adjust:none} .akte-inhoud .akop{font:700 6.4px/1.2 Georgia,'Times New Roman',serif;letter-spacing:.14em;text-transform:uppercase;color:var(--a-kop);margin:0;text-align:center} .akte-inhoud .ameta{font:400 2.9px/1.4 Georgia,serif;color:var(--a-grijs);text-align:center;margin:3px 0 0;letter-spacing:.04em} .akte-inhoud .astreep{height:0;border-top:.6px solid var(--a-kop);margin:6px 0 7px} .akte-inhoud p{max-width:none} .artikel{margin:0 0 5.5px} .artikel .art{font:700 3.2px/1.35 Georgia,serif;margin:0 0 1px;color:var(--a-kop);letter-spacing:.02em} .artikel .regel{font:400 2.95px/1.5 Georgia,serif;margin:0 0 .6px;color:var(--a-inkt);text-align:left} .artikel .regel b{font-weight:400;color:var(--a-grijs);margin-right:2px} .akte-inhoud .avoet{margin-top:auto;display:flex;justify-content:space-between;font:400 2.7px Georgia,serif;color:var(--a-grijs);border-top:.4px solid #c9ccd1;padding-top:3px} .loep{position:absolute;width:150px;height:150px;border-radius:50%;overflow:hidden;border:2px solid var(--a-kop);box-shadow:0 12px 28px rgba(31,42,58,.26);background:var(--s-papier);pointer-events:none;transition:left .25s ease,top .25s ease,border-width .2s;left:0;top:0;z-index:3} .loep::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 5px rgba(255,255,255,.55),inset 0 -14px 26px rgba(31,48,71,.07)} .loep .akte-inhoud{position:absolute;left:0;top:0;transform-origin:0 0;height:auto} .akte.volgt .loep{transition:border-width .2s} .akte.volgt{cursor:none} .loepsteel{position:absolute;width:48px;height:12px;background:var(--a-kop);border-radius:6px;pointer-events:none;transform:rotate(45deg);transform-origin:0 50%;transition:left .25s ease,top .25s ease;z-index:2} .akte.volgt .loepsteel{transition:none} .leesvel{position:fixed;inset:0;z-index:60;background:rgba(20,28,38,.66);overflow-y:auto;padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;align-items:flex-start;animation:vervaag .2s ease} @keyframes vervaag{from{opacity:0}} .leesblad{position:relative;width:100%;max-width:640px;background:var(--s-papier);border-radius:3px;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:groei .28s cubic-bezier(.2,.8,.2,1)} @keyframes groei{from{transform:scale(.6);opacity:0}} .leesblad .akte-inhoud{height:auto;padding:clamp(28px,6vw,56px) clamp(22px,6vw,60px) 28px} .leesblad .akop{font-size:20px;letter-spacing:.12em} .leesblad .ameta{font-size:12.5px;margin-top:6px} .leesblad .astreep{border-top-width:1px;margin:18px 0 22px} .leesblad .artikel{margin:0 0 18px} .leesblad .art{font-size:15px;margin-bottom:5px} .leesblad .regel{font-size:14.5px;line-height:1.6;margin-bottom:5px} .leesblad .regel b{margin-right:6px} .leesblad .avoet{font-size:11.5px;padding-top:10px;margin-top:22px;border-top-width:1px} .leesvel .sluit{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;border:1px solid var(--s-rand);background:var(--s-papier);color:var(--s-inkt);font:400 22px/1 var(--s-tekst);cursor:pointer;display:grid;place-items:center} .leesvel .sluit:focus-visible{outline:2px solid var(--s-inkt);outline-offset:2px} @media (prefers-reduced-motion:reduce){.leesvel,.leesblad{animation:none}} .tegel .vak .akteuitleg{margin:12px 0 0;font:400 13px var(--s-tekst);color:var(--s-zacht);text-align:center} /* 3 Eigen apps: telefoon met dock */ .toestel{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap} .dock button{text-align:left} .telefoon{width:150px;flex:none;background:#1f2a3a;border-radius:26px;padding:7px;box-shadow:0 14px 30px rgba(31,42,58,.22)} .scherm-tel{display:block;width:100%;border:0;padding:0;background:#000;border-radius:20px;overflow:hidden;position:relative;aspect-ratio:440/953;cursor:zoom-in} .strook{display:flex;height:100%;transition:transform .55s cubic-bezier(.6,0,.2,1)} .strook img{width:100%;height:100%;flex:none;object-fit:cover;display:block} .notch{position:absolute;top:6px;left:50%;width:44px;height:11px;margin-left:-22px;background:#1f2a3a;border-radius:8px;z-index:2} .dock{display:grid;gap:12px;min-width:0;width:250px;max-width:100%} .dock button{display:flex;align-items:center;gap:14px;border:1px solid var(--s-rand);background:var(--s-papier);border-radius:16px;padding:12px 16px 12px 12px;font:600 17px/1.2 var(--s-tekst);color:var(--s-inkt);cursor:pointer;text-align:left;transition:background .2s,border-color .2s,transform .2s;width:100%} .dock button span{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none} .dock button span.tekst{width:auto;height:auto;display:block;place-items:normal;flex:1;min-width:0;border-radius:0;text-align:left} .dock button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .dock button small{display:block;font:400 14px/1.3 var(--s-tekst);color:var(--s-zacht);margin:2px 0 0;padding:0;text-align:left} .dock button[aria-pressed=true]{border-color:#c98a8a;background:#fbf0ee;transform:translateX(4px)} .dock .i1{background:#1f2a3a;color:#4aa3ff}.dock .i2{background:#b8483a;color:#fff}.dock .i3{background:#f6e3e8;color:#c0587a} /* 4 Stagedocumenten: map met tabbladen */ .map{display:flex;width:100%;max-width:360px;filter:drop-shadow(0 8px 18px rgba(31,42,58,.1))} .blad{flex:1;min-width:0;background:var(--s-papier);border:1px solid var(--s-rand);border-radius:6px 0 6px 6px;padding:16px 18px 18px 30px;position:relative;min-height:168px;perspective:900px} .blad::before{content:"";position:absolute;left:10px;top:22px;bottom:22px;width:7px;background:radial-gradient(circle at 3.5px 3.5px,var(--s-grond) 3px,var(--s-rand) 3.6px,transparent 4.2px) 0 0/7px 46px repeat-y} .bladinhoud{transform-origin:0 50%} .bladinhoud.draai{animation:sla .42s ease} @keyframes sla{0%{transform:rotateY(-70deg);opacity:0}100%{transform:none;opacity:1}} .bnr{font:500 30px/1 var(--s-kop);color:var(--s-steen)} .btitel{font:600 17px/1.2 var(--s-kop);color:var(--s-inkt);margin:6px 0 4px} .bregel{font:400 13.5px/1.45 var(--s-tekst);color:var(--s-zacht);margin:0 0 10px} .nep{height:5px;background:var(--s-steen-licht);border-radius:3px;margin:6px 0} .nep.k{width:62%} .tabs{display:flex;flex-direction:column;gap:4px;padding-top:10px;margin-left:-1px} .tab{writing-mode:vertical-rl;font:600 11px var(--s-tekst);letter-spacing:.05em;border:1px solid var(--s-rand);border-left:0;border-radius:0 8px 8px 0;padding:10px 6px;cursor:pointer;color:#fff;transition:transform .2s,filter .2s} .tab[data-n="0"]{background:#8a6647}.tab[data-n="1"]{background:#a6805c}.tab[data-n="2"]{background:#946f4c}.tab[data-n="3"]{background:#b08b64} .tab[aria-selected=false]{filter:saturate(.55) brightness(1.12);transform:translateX(-3px)} .tab[aria-selected=true]{transform:translateX(2px)} @media (max-width:1180px){.toestel{flex-wrap:nowrap;gap:14px}.telefoon{width:112px;border-radius:20px;padding:5px}.scherm-tel{border-radius:15px}.notch{width:34px;height:9px;margin-left:-17px;top:4px}.dock{width:178px;gap:9px}.dock button{padding:9px 10px 9px 9px;gap:10px;font-size:15px;border-radius:13px}.dock button span{width:36px;height:36px;border-radius:10px}.dock button svg{width:19px;height:19px}.dock button small{font-size:12.5px}.dock button[aria-pressed=true]{transform:none}} @media (max-width:720px){.toestel{gap:16px}} @media (prefers-reduced-motion:reduce){.strook,.vbalk i,.loep,.loepsteel,.tab{transition:none}.bladinhoud.draai,.vink,.vakuitleg i{animation:none}} .leesvel[hidden],.scherm[hidden]{display:none} .tegels .tegelwerk{min-width:0} .leesvel{z-index:220} .scherm input:focus-visible{outline:2px solid #304A5B;outline-offset:1px;border-color:#304A5B} .tab[data-n="0"]{background:#7A6349}.tab[data-n="1"]{background:#84694C}.tab[data-n="2"]{background:#6E5940}.tab[data-n="3"]{background:#86694A} .tab[aria-selected=false]{filter:none;transform:translateX(-3px)}.tab[aria-selected=true]{box-shadow:inset 3px 0 0 rgba(255,255,255,.55)} .tegel .vak .akteuitleg,.dock button small,.browserbalk b{color:#56616B} @media (min-width:1181px){.telefoon{width:128px;border-radius:22px;padding:6px}.scherm-tel{border-radius:17px}.dock{width:218px;gap:10px}.dock button{padding:10px 12px 10px 10px;gap:12px;font-size:16px;border-radius:14px}.dock button span{width:40px;height:40px;border-radius:11px}.dock button svg{width:21px;height:21px}.dock button small{font-size:13px}.toestel{flex-wrap:nowrap;gap:18px}} @media (max-width:420px){.toestel{gap:12px}.telefoon{width:98px}.dock{width:auto;flex:1 1 auto;min-width:0;gap:8px}.dock button{padding:8px 8px 8px 8px;gap:9px;font-size:14.5px}.dock button span{width:32px;height:32px;border-radius:9px}.dock button svg{width:17px;height:17px}.dock button small{font-size:12px}} .tegelwerk:nth-child(1) .vakuitleg{color:var(--s-ontwerp)}.tegelwerk:nth-child(2) .vakuitleg{color:var(--s-groen)} .tegelwerk:nth-child(3) .vakuitleg{color:#9a4b4b}.tegelwerk:nth-child(4) .vakuitleg{color:#7A6349} /* Controleronde 3 */ .akte-inhoud .astempel{position:absolute;top:2.4%;left:5%;font-family:"IBM Plex Sans",Helvetica,Arial,sans-serif;font-weight:600;font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:#7A6349;border:1.5px solid rgba(122,99,73,.6);border-radius:4px;padding:.2em .6em;transform:rotate(-4deg)} @media (max-width:900px){.paneel h2 + .stappen.kort{margin-top:16px}} /* Mobiel ronde 1: portret klein naast de tekst (iPad hetzelfde, voor een gelijk beeld) */ @media (max-width:900px){ /* ronde 5: portret groter, rechts naast de eerste alinea, zonder tekst eronder door */ .portret{display:grid;grid-template-columns:minmax(0,1fr) min(40%,230px);column-gap:16px;row-gap:0;align-items:start;margin-bottom:22px} .portret .verhaal{display:contents} /* ronde 6: de foto is even hoog als de tekst ernaast (bijgesneden), zodat er geen lege ruimte onder staat */ .portret .foto.staand{grid-column:2;grid-row:1;align-self:stretch;width:100%;max-width:none;height:auto;min-height:150px;max-height:290px;aspect-ratio:auto;margin:4px 0 0;border-radius:16px;overflow:hidden} .portret .foto.staand img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 18%} .portret .verhaal > p:first-child{grid-column:1;grid-row:1;margin-top:0} .portret .verhaal > p:not(:first-child){grid-column:1 / -1} .portret .verhaal > p{margin:0 0 16px} .portret .verhaal > p.naamregel{margin:6px 0 0} } @media (min-width:520px) and (max-width:900px){ .portret{grid-template-rows:auto 1fr} .portret .foto.staand{grid-row:1 / 3} .portret .verhaal > p:nth-child(2){grid-column:1;grid-row:2} @media (min-width:721px) and (max-width:900px){ .portret{grid-template-rows:auto auto 1fr} .portret .foto.staand{grid-row:1 / 4} .portret .verhaal > p.naamregel{grid-column:1;grid-row:3} } } /* Mobiel ronde 1: projectmanagement als eigen dienstkaart, net als de vier eronder (iPad hetzelfde) */ @media (max-width:900px){ .pmstrook{background:var(--licht);border-radius:18px;padding:26px 24px;border:1px solid rgba(168,168,162,.24);box-shadow:0 8px 24px rgba(48,74,91,.06);gap:20px} .pmstrook .pmtekst::before{content:"";display:block;width:34px;height:3px;background:var(--pagina);border-radius:2px;margin:0 0 13px} .pmstrook .pmtekst h3{font-size:22px} .pmdrie{max-width:none;justify-content:space-around} } /* Mobiel ronde 1: de drie pakketknoppen op Tarieven vallen meer op */ @media (max-width:820px){ .pakketkiezer{background:var(--licht);border:1.5px solid var(--pagina);box-shadow:0 8px 22px rgba(36,56,74,.10)} .pakketkiezer button{color:var(--pagina);font-size:14px;min-height:50px} .pakketkiezer button:not([aria-selected="true"]):hover{background:rgba(69,105,130,.08)} } @media (max-width:420px){.pakketkiezer button{font-size:13px}} @media (max-width:360px){.pakketkiezer button{font-size:12px}} body .case.aidraai .teksten > p:nth-of-type(1){order:1} body .case.aidraai .teksten > p.voorbeeldknopvak{order:2;margin:0} @media (max-width:900px){body .case.aidraai .teksten > p.voorbeeldknopvak{margin:0 0 18px}} body .case.aidraai .teksten > p:nth-of-type(3){order:3} .voorbeeldknop{appearance:none;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:14px;text-align:left;background:var(--licht);border:1.5px solid rgba(69,105,130,.3);border-radius:16px;padding:10px 20px 10px 10px;box-shadow:0 8px 22px rgba(36,56,74,.08);transition:transform .2s,box-shadow .2s,border-color .2s;max-width:100%} .voorbeeldknop img{width:52px;height:56px;object-fit:cover;object-position:top;border-radius:8px;border:1px solid rgba(36,56,74,.12);flex:none} .voorbeeldknop .vk-tekst{display:grid;gap:2px;min-width:0} .voorbeeldknop .vk-titel{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:17px;color:var(--inkt)} .voorbeeldknop .vk-actie{font-weight:600;font-size:14px;color:var(--pagina)} .voorbeeldknop:hover{transform:translateY(-2px);border-color:var(--pagina);box-shadow:0 12px 28px rgba(36,56,74,.12)} .voorbeeldknop:focus-visible{outline:2px solid var(--pagina);outline-offset:3px} .vlvel{position:fixed;inset:0;z-index:220;background:rgba(24,34,44,.55);display:grid;place-items:center;padding:24px 16px;overflow:auto} .vlvel[hidden]{display:none} .vlblad{position:relative;background:var(--licht);border-radius:20px;padding:26px clamp(18px,3vw,30px) 22px;width:min(560px,100%);box-shadow:0 30px 80px rgba(0,0,0,.25)} .vlblad h3{font-size:21px;margin:0 44px 14px 0} .vlblad .sluit{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid rgba(36,56,74,.2);background:var(--licht);font-size:22px;line-height:1;cursor:pointer;color:var(--inkt)} .vlblad .sluit:focus-visible{outline:2px solid var(--pagina);outline-offset:2px} .vlblad .schuifblok{margin:0;width:100%} .vlblad .schuif{max-width:none;margin:0} .vlblad .schuifwijzer{max-width:none;margin:10px 0 0} @media (prefers-reduced-motion:reduce){.voorbeeldknop{transition:none}} .meerkop{text-align:center;display:grid;justify-items:center} .meerkop h2{margin:0;width:100%;display:flex;justify-content:center} .meerkop .streep{margin-left:auto;margin-right:auto} .meerknop{appearance:none;font:inherit;color:inherit;text-align:center;cursor:default;background:none;border:0;padding:0;display:grid;justify-items:center;gap:8px;width:100%} .meerknop .meersub,.meerknop .meerpijl{display:none} .meerknop.actief{cursor:pointer;width:min(100%,680px);margin-top:10px;padding:34px clamp(22px,4vw,48px) 26px;background:var(--licht);border:1.5px solid rgba(69,105,130,.28);border-radius:22px;box-shadow:0 14px 34px rgba(36,56,74,.10);transition:transform .25s,box-shadow .25s,border-color .25s} .meerknop.actief .meersub{display:block;font-family:"IBM Plex Sans",Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;letter-spacing:0;color:var(--rust-tekst)} .meerknop.actief .meerpijl{display:block;width:14px;height:14px;margin-top:6px;border-right:2.5px solid var(--pagina);border-bottom:2.5px solid var(--pagina);transform:rotate(45deg);transition:transform .25s} .meerknop.actief[aria-expanded="true"] .meerpijl{transform:translateY(6px) rotate(-135deg)} .meerknop.actief:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(36,56,74,.14);border-color:var(--pagina)} .meerknop.actief:focus-visible{outline:2px solid var(--pagina);outline-offset:4px} @media (prefers-reduced-motion:reduce){.meerknop.actief,.meerknop.actief .meerpijl{transition:none}} #meerwerk{margin-top:26px} #meerwerk[hidden]{display:none} .losboek{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#7A6349;background:rgba(168,96,63,.09);border:1px solid rgba(122,99,73,.28);border-radius:999px;padding:3px 10px;margin:0 0 10px} .pmstrook{margin:0 0 22px} .pmstrook .pmtekst h3{font-size:26px} .kop .kopzin .ikmij{color:inherit;text-decoration:underline;text-decoration-color:rgba(122,99,73,.55);text-decoration-thickness:1.5px;text-underline-offset:4px} .kop .kopzin .ikmij:hover,.kop .kopzin .ikmij:focus-visible{color:var(--primair);text-decoration-color:currentColor} .scorebord .rolvak{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;clip-path:inset(0)} .scorebord .rolcijfer{display:inline-block} .scorebord .rolcijfer.in{animation:rolin var(--rol,300ms) cubic-bezier(.3,.7,.3,1) both} .scorebord .rolcijfer.uit{position:absolute;left:0;top:0;animation:roluit var(--rol,300ms) cubic-bezier(.3,.7,.3,1) both} @keyframes rolin{from{transform:translateY(100%)}to{transform:none}} @keyframes roluit{from{transform:none}to{transform:translateY(-100%)}} .leesvel .sluit{z-index:3} body.p-portfolio section:has(+ .steenlijn) .case:last-child{padding-bottom:0} .speelkaart .vh{left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* grijze tekst op getinte achtergrond: iets donkerder voor minstens 4,5:1 */ .kop .kopzin,.schuifwijzer,body.p-events .label{color:#5E5E57}