@font-face{font-family:"Cormorant Garamond";font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:300;font-display:swap;src:url(../fonts/poppins-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(../fonts/poppins-latin-400-normal.woff2) format("woff2")}
[hidden]{display:none!important}
html{background:#0b1614}
body{min-height:100vh;background-repeat:no-repeat}
img{max-width:100%}
:where(img){height:auto} /* breedte/hoogte in de html houden alleen de verhouding vast, zodat de pagina niet verspringt */
.merk a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px}
.merk a img{width:32px}
.merk .terugsite{font-family:var(--lopend);font-weight:400;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border:0;padding:0}
.voet{border-top:1px solid var(--lijn);padding-top:20px;font-size:12px;line-height:1.6;color:var(--zacht)}
.voet a{color:var(--muted)}
.knop{display:inline-block;font-weight:400;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#16110a;background:var(--goud);border-radius:999px;padding:15px 26px;text-decoration:none}
.knop:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.verder{display:flex;flex-direction:column;gap:10px}
.verder a{color:var(--goud)}
.verder p{font-size:14.5px;color:var(--tekst)}
.week{background:var(--goud-vlak);border:1px solid var(--goud-rand);border-radius:20px;padding:22px 18px;display:flex;flex-direction:column;gap:12px}
.week p{font-size:14.5px;color:var(--tekst)}
/* Eén smalle kolom zoals de site op een telefoon: doel bovenaan, daaronder de dag van ontbijt tot avondeten, elk gerecht met zijn eigen ring. Bewust één donkere huisstijl. */
:root{
  color-scheme:dark;
  --bg:#0b1614; --gloed:rgba(28,72,63,.55); --vlak:#0f1d1a;
  --cream:#efe8dc; --tekst:#d9d2c5; --muted:#a9b3ae; --zacht:#8f9a95;
  --goud:#c9a45c; --goud-vlak:rgba(201,164,92,.08); --goud-rand:rgba(201,164,92,.38);
  --lijn:rgba(239,232,220,.15); --spoor:rgba(239,232,220,.1); --waarschuwing:#e0b070;
  --k1:#b8893a; --k2:#2a9d8f; --k3:#6f8fe6;
  --kop:"Cormorant Garamond",Georgia,serif; --lopend:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse 120% 420px at 50% 120px,var(--gloed),transparent 70%),var(--bg);background-color:var(--bg);color:var(--cream);font-family:var(--lopend);font-weight:300;font-size:16px;line-height:1.6;padding-inline:20px;padding-block:0 56px}
.wrap{max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.merk{font-family:var(--kop);font-size:26px;padding-block:20px 16px;border-bottom:1px solid var(--lijn);display:flex;justify-content:space-between;align-items:baseline}
.merk span{font-family:var(--lopend);font-weight:400;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--goud);border:1px solid var(--goud-rand);border-radius:999px;padding:4px 10px}
.eye{font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--goud);margin:0}
h1{font-family:var(--kop);font-weight:400;font-size:44px;line-height:1.05;margin:10px 0 0;text-wrap:balance}
h1 em{color:var(--goud)}
h2{font-family:var(--kop);font-weight:400;font-size:27px;line-height:1.15;margin:0;text-wrap:balance}
p{margin:0}
.intro{color:var(--tekst);font-size:15px;margin-top:12px}
.test{border:1px dashed var(--goud-rand);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.test p{font-size:12.5px;color:var(--muted)}
.rij{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rij label{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-width:0}
.rij input{width:100%;min-width:0;font:inherit;font-size:17px;color:var(--cream);background:var(--vlak);border:1px solid var(--lijn);border-radius:12px;padding:8px 10px}
.rij input:focus-visible{outline:2px solid var(--goud);outline-offset:2px}
.stip{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.s1{background:var(--k1)}.s2{background:var(--k2)}.s3{background:var(--k3)}
.doel{border:1px solid var(--lijn);border-radius:20px;padding:18px 14px 16px;display:flex;flex-direction:column;align-items:center;gap:12px}
.boog{position:relative;width:100%;max-width:300px}
.boog svg{display:block;width:100%;height:auto}
.boog div{position:absolute;left:0;right:0;bottom:2px;text-align:center;line-height:1.05}
.boog small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.boog b{font-family:var(--kop);font-weight:400;font-size:52px;color:var(--goud);font-variant-numeric:lining-nums}
.boog b i{font-style:normal;font-size:.36em}
.verdeling{display:grid;grid-template-columns:repeat(3,1fr);width:100%;border-top:1px solid var(--lijn);padding-top:12px}
.verdeling>div{text-align:center;min-width:0;padding-inline:2px}
.verdeling>div+div{border-left:1px solid var(--lijn)}
.verdeling b{font-weight:400;font-size:21px;font-variant-numeric:tabular-nums}
.verdeling b small{font-size:12px}
.verdeling p{font-size:11px;color:var(--muted);display:flex;gap:5px;align-items:center;justify-content:center}
.verdeling span{display:block;font-size:11px;color:var(--zacht);font-variant-numeric:tabular-nums}
details.ruil{border-top:1px solid var(--lijn);padding-top:10px;font-size:13.5px;color:var(--muted);line-height:1.55}
details.ruil summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--goud)}
details.ruil summary::-webkit-details-marker{display:none}
details.ruil summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid var(--goud-rand);border-radius:50%;font-size:14px;letter-spacing:0;line-height:1}
details.ruil[open] summary::before{content:"\2212"}
details.ruil summary:focus-visible{outline:2px solid var(--goud);outline-offset:3px;border-radius:6px}
details.ruil p{margin-top:8px}
.dag{display:flex;flex-direction:column;gap:14px}
.maal{background:var(--vlak);border:1px solid var(--lijn);border-radius:20px;padding:18px 16px;display:flex;flex-direction:column;gap:14px}
.maal .kop{display:flex;flex-direction:column;gap:4px}
.maal .kop p{font-weight:400;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--goud)}
.cijfers{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:center}
.ring{position:relative;width:92px;height:92px}
.ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.ring div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.ring b{font-family:var(--kop);font-weight:400;font-size:25px;color:var(--cream);font-variant-numeric:lining-nums}
.ring small{font-size:10px;color:var(--muted);letter-spacing:.08em}
.macros{display:flex;flex-direction:column;gap:5px;font-size:14px}
.macros div{display:grid;grid-template-columns:9px 1fr auto auto;gap:8px;align-items:center;color:var(--tekst)}
.macros b{font-weight:400;color:var(--cream);font-variant-numeric:tabular-nums}
.macros small{font-size:12px;color:var(--zacht);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.maal ul{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--lijn);display:flex;flex-direction:column;gap:5px}
.maal li{display:grid;grid-template-columns:104px 1fr;gap:10px;font-size:14.5px;color:var(--tekst)}
.maal li b{font-weight:400;color:var(--goud);font-variant-numeric:tabular-nums}
.maal li small{display:block;font-size:12.5px;color:var(--zacht);line-height:1.4}
.zo{font-size:13.5px;color:var(--muted);line-height:1.55}
.zo b{font-weight:400;color:var(--tekst)}
.som{background:var(--goud-vlak);border:1px solid var(--goud-rand);border-radius:20px;padding:20px 18px;display:flex;flex-direction:column;gap:12px}
table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th,td{text-align:right;padding:6px 0;font-weight:300}
th:first-child,td:first-child{text-align:left;color:var(--tekst)}
thead th{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:400;border-bottom:1px solid var(--lijn)}
.uitleg{display:flex;flex-direction:column;gap:12px;font-size:14.5px;color:var(--tekst)}
.uitleg b{font-weight:400;color:var(--cream)}
.let{border-left:2px solid var(--waarschuwing);padding-left:14px;color:var(--tekst);font-size:14px}
.bron{font-size:12.5px;color:var(--zacht)}