/* Gedeeld door alle receptpagina's: een los bestand, want dezelfde stijl
   in 12.000 bestanden plakken is 12.000 keer dezelfde bytes. Tokens gelijk aan
   de zoekpagina, zodat het een site blijft en geen twee sites. */
:root{
  --bg:#faf8f5; --kaart:#fff; --tekst:#1a1a1c; --zacht:#6b6b70; --rand:#e6e2db;
  --accent:#c2410c; --accent-zacht:#fde9dd; --schaduw:0 1px 2px rgba(0,0,0,.05),0 4px 12px rgba(0,0,0,.04);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141416; --kaart:#1d1d20; --tekst:#f0eeec; --zacht:#9b9ba2; --rand:#2e2e33;
  --accent:#fb923c; --accent-zacht:#3a2417; --schaduw:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tekst);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:760px;margin:0 auto;padding:0 16px;width:100%}
.breed{max-width:1180px}
header{border-bottom:1px solid var(--rand);background:var(--bg)}
.kop{display:flex;align-items:center;gap:12px;padding:11px 0}
.merk{font-weight:680;font-size:17px;letter-spacing:-.02em;text-decoration:none}
.merk span{color:var(--accent)}
.terug{margin-left:auto;font-size:13px;color:var(--zacht);text-decoration:none}
.terug:hover{color:var(--accent)}

main{padding:22px 0 10px}
.kruimel{font-size:12.5px;color:var(--zacht);margin:0 0 14px}
.kruimel a{color:var(--zacht);text-decoration:none}
.kruimel a:hover{color:var(--accent)}
h1{font-size:26px;line-height:1.25;letter-spacing:-.025em;margin:0 0 10px;font-weight:680}
.regel{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--zacht);margin-bottom:16px}
.regel .bron{color:var(--accent);font-weight:600}
.foto{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;background:var(--rand);display:block;border:1px solid var(--rand)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 0}
.chip{padding:5px 11px;border-radius:999px;background:var(--accent-zacht);color:var(--accent);
  font-size:12.5px;font-weight:560;text-decoration:none;border:1px solid transparent}
.chip:hover{border-color:var(--accent)}
.kopje{font-size:13px;font-weight:640;color:var(--zacht);margin:20px 0 0;text-transform:uppercase;letter-spacing:.04em}
.knop{display:block;margin:22px 0 6px;padding:15px 20px;background:var(--accent);color:#fff;text-align:center;
  border-radius:13px;font-size:15.5px;font-weight:640;text-decoration:none}
.knop:hover{filter:brightness(1.07)}
.knop small{display:block;font-weight:400;font-size:12.5px;opacity:.85;margin-top:3px}
.uitleg{font-size:13px;color:var(--zacht);margin:14px 0 0;max-width:64ch}

.raster{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin:14px 0 30px;padding:0;list-style:none}
.kaart{background:var(--kaart);border:1px solid var(--rand);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;transition:transform .14s,box-shadow .14s}
.kaart:hover{transform:translateY(-2px);box-shadow:var(--schaduw)}
.kaart img{aspect-ratio:4/3;width:100%;object-fit:cover;background:var(--rand);display:block}
.kaart .t{padding:10px 12px 12px;font-size:14px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.kaart .b{padding:0 12px 11px;font-size:11.5px;color:var(--accent);font-weight:560;margin-top:auto}

.lijst{columns:2;column-gap:26px;padding:0;margin:14px 0 26px;list-style:none;font-size:14px}
.lijst li{break-inside:avoid;padding:5px 0;border-bottom:1px solid var(--rand)}
.lijst a{text-decoration:none}
.lijst a:hover{color:var(--accent)}
.blader{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:20px 0 34px;font-size:13.5px}
.blader a,.blader span{padding:7px 12px;border:1px solid var(--rand);border-radius:9px;text-decoration:none;background:var(--kaart)}
.blader .nu{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.blader a:hover{border-color:var(--accent)}
.alle{display:flex;gap:2px;flex-wrap:wrap;align-items:center;margin:-16px 0 34px;font-size:12.5px;color:var(--zacht)}
.alle span:first-child{margin-right:6px}
.alle a,.alle .nu{min-width:2.3em;padding:4px 5px;text-align:center;border-radius:7px;text-decoration:none}
.alle a:hover{color:var(--accent);background:var(--accent-zacht)}
.alle .nu{color:var(--accent);font-weight:640}

footer{border-top:1px solid var(--rand);margin-top:26px;padding:20px 0 34px;font-size:12px;color:var(--zacht);line-height:1.65}
footer a{color:var(--accent)}
footer p{margin:0 0 8px;max-width:70ch}
@media(max-width:560px){
  h1{font-size:21px}
  .raster{grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:11px}
  .lijst{columns:1}
}