/* Sollo projecten — huisstijl: aubergine, beige, neon alleen op aubergine */
@font-face{font-family:"Reckless Neue";src:url("fonts/RecklessNeue-Book.otf") format("opentype");font-weight:400}
@font-face{font-family:"Reckless Neue";src:url("fonts/RecklessNeue-SemiBold.otf") format("opentype");font-weight:600}
@font-face{font-family:"Aktifo A";src:url("fonts/Aktifo-A Book.otf") format("opentype");font-weight:400}
@font-face{font-family:"Aktifo A";src:url("fonts/Aktifo-A Medium.otf") format("opentype");font-weight:500}
@font-face{font-family:"Aktifo A";src:url("fonts/Aktifo-A SemiBold.otf") format("opentype");font-weight:600}
:root{--aub:#35122A;--ink:#2C1525;--beige:#ECE0C7;--neon:#54FF00;--taupe:#7A6F76;--wit:#fff;
  --serif:"Reckless Neue","Tinos","Cormorant Garamond",Georgia,serif;
  --sans:"Aktifo A","Inter","DM Sans","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--aub);color:var(--beige);font:16px/1.3 var(--sans);display:flex;flex-direction:column;min-height:100vh}
main{flex:1;display:flex;flex-direction:column;align-items:center;padding:0 20px}
.kop{display:flex;align-items:center;gap:14px;padding:26px 32px;max-width:1080px;width:100%;margin:0 auto}
.kop .merk img{height:26px;display:block}
.kop .label{font-weight:500;font-size:13px;color:var(--taupe);letter-spacing:.02em}
.kop .uit{margin-left:auto;display:flex;align-items:center;gap:12px}
.kop .wie{font-size:13px;color:var(--beige);opacity:.75}
.kop .uit button{background:none;border:1px solid rgba(236,224,199,.4);color:var(--beige);border-radius:999px;padding:6px 14px;font:500 13px var(--sans);cursor:pointer}
.kop .uit button:hover{border-color:var(--neon);color:var(--neon)}
h1{font:400 clamp(30px,4.6vw,44px)/1.1 var(--serif);margin:0 0 14px}
h1 b{font-weight:600}
.intro{margin:0 0 22px;line-height:1.4;max-width:46ch}
.kaart{background:var(--beige);color:var(--ink);border-radius:18px;padding:36px 34px;width:100%;max-width:460px;margin:24px 0 40px}
.kaart.breed{max-width:640px}
.kaart h1{color:var(--aub)}
.kaart .intro{color:var(--ink)}
label{display:block;font:500 13px/1.3 var(--sans);color:var(--taupe);margin:0 0 14px}
label input:not([type=checkbox]){display:block;width:100%;margin-top:6px;padding:12px 14px;border:1.5px solid rgba(53,18,42,.25);border-radius:10px;background:var(--wit);color:var(--ink);font:400 16px var(--sans)}
label input:focus{outline:none;border-color:var(--aub);box-shadow:0 0 0 3px rgba(53,18,42,.12)}
label small{display:block;margin-top:6px;font-weight:400;font-size:12px;color:var(--taupe)}
.vink{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:400;font-size:14px;margin:18px 0 20px}
.vink input{accent-color:var(--aub);width:16px;height:16px;margin:0}
.knop{display:inline-block;width:100%;text-align:center;background:var(--aub);color:var(--beige);border:0;border-radius:999px;padding:14px 22px;font:600 15px var(--sans);cursor:pointer;text-decoration:none}
.knop:hover{background:var(--ink)}
.fout{background:var(--aub);color:var(--beige);border-radius:10px;padding:10px 14px;font-size:14px;margin:0 0 18px}
.tweeluik{display:flex;gap:26px;align-items:center;margin:0 0 22px;flex-wrap:wrap}
.qr{background:var(--wit);padding:10px;border-radius:12px;flex:0 0 auto}
.qr img{width:200px;height:200px;display:block}
.klein-label{font:500 12px var(--sans);color:var(--taupe);margin:0 0 6px}
.sleutel{display:block;font:500 15px/1.5 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;color:var(--aub);background:var(--wit);padding:10px 12px;border-radius:8px;word-break:break-all;max-width:280px}
.klein{font-size:12px;color:var(--taupe);line-height:1.4}
/* overzicht */
body.overzicht main{padding:0}
.hero{width:100%;max-width:1080px;padding:26px 32px 34px;margin:0 auto}
.hero h1{max-width:20ch}
.raster{background:var(--beige);color:var(--ink);width:100%;flex:1;padding:36px 32px 48px}
.raster{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));align-content:start}
@media (min-width:1080px){.raster{padding-left:calc((100% - 1080px)/2 + 32px);padding-right:calc((100% - 1080px)/2 + 32px)}}
.tegel{display:flex;flex-direction:column;gap:8px;background:var(--wit);color:var(--ink);text-decoration:none;border-radius:16px;padding:24px 24px 20px;border:1.5px solid transparent;transition:border-color .15s,transform .15s}
.tegel:hover{border-color:var(--aub);transform:translateY(-2px)}
.tegel .tag{align-self:flex-start;font:500 11px var(--sans);letter-spacing:.04em;color:var(--aub);border:1px solid var(--aub);border-radius:999px;padding:3px 9px}
.tegel h2{font:600 22px/1.15 var(--serif);color:var(--aub);margin:6px 0 0}
.tegel p{margin:0;font-size:14px;line-height:1.4;color:var(--ink);flex:1}
.tegel .pijl{font:500 13px var(--sans);color:var(--aub);margin-top:8px}
.voet{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 32px;max-width:1080px;width:100%;margin:0 auto}
.voet .pill{font:500 12px var(--sans);color:var(--beige);border:1px solid var(--neon);border-radius:999px;padding:4px 12px}
.voet .klein{color:var(--taupe)}
@media (max-width:560px){.kop{padding:20px 18px}.kaart{padding:28px 22px}.hero,.raster,.voet{padding-left:18px;padding-right:18px}}