/* DishTunes receptpagina's - gegenereerd, niet handmatig bewerken */
:root{
  --bg:#1b2b1e; --bg-2:#222f25; --bg-card:#232f26; --bg-card-2:#2b3a2e;
  --accent:#4a8c6a; --accent-knop:#3F7A5C; --accent-knop-hover:#376B50;
  --accent-light:#5faa82; --accent-bg:rgba(74,140,106,0.10);
  --text:#F2EDE5; --text-muted:#a3b5a0; --text-light:#889e8c;
  --border:rgba(255,255,255,0.06);
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'DM Sans',-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-light);}
a:focus-visible{outline:2px solid var(--accent-light); outline-offset:2px; border-radius:3px;}
.balk{
  border-bottom:1px solid var(--border); background:rgba(26,46,28,0.95);
  position:sticky; top:0; z-index:10; backdrop-filter:blur(8px);
}
.balk-in{
  max-width:760px; margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.25rem;
  color:var(--text); text-decoration:none; letter-spacing:-0.02em;
}
.logo em{font-style:italic; color:var(--accent-light);}
.balk .knop{padding:9px 18px; font-size:0.88rem;}
.knop{
  display:inline-block; background:var(--accent-knop); color:#fff; text-decoration:none;
  padding:15px 30px; border-radius:100px; font-weight:500; border:none;
  transition:background .2s;
}
.knop:hover{background:var(--accent-knop-hover); color:#fff;}
main{max-width:760px; margin:0 auto; padding:34px 22px 80px;}
.kruimel{font-size:0.84rem; color:var(--text-light); margin-bottom:18px;}
.kruimel a{color:var(--text-muted); text-decoration:none;}
.kruimel a:hover{color:var(--text);}
h1{
  font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:clamp(1.9rem,5vw,2.9rem); line-height:1.1; letter-spacing:-0.02em;
  margin:0 0 14px; text-wrap:balance;
}
.intro{color:var(--text-muted); margin:0 0 22px; font-size:1.02rem;}
.feiten{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; padding:0; list-style:none;
}
.feiten li{
  background:var(--bg-card-2); border:1px solid var(--border); border-radius:100px;
  padding:5px 14px; font-size:0.84rem; color:var(--text-muted);
}
.feiten li b{color:var(--text); font-weight:500;}
.foto{
  width:100%; height:auto; border-radius:14px; margin:0 0 26px; display:block;
  background:var(--bg-card-2);
}
.kaart{
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  padding:20px 22px; margin:0 0 22px;
}
.kaart h2{
  font-family:'Playfair Display',Georgia,serif; font-size:1.3rem; font-weight:700;
  margin:0 0 14px; letter-spacing:-0.01em;
}
.voeding{display:grid; grid-template-columns:repeat(auto-fit,minmax(76px,1fr)); gap:8px;}
.voeding div{
  background:var(--bg-card-2); border-radius:9px; padding:9px 6px; text-align:center;
}
.voeding b{display:block; font-size:1.05rem; font-variant-numeric:tabular-nums;}
.voeding span{display:block; font-size:0.7rem; color:var(--text-muted); margin-top:2px;}
ul.ingr{list-style:none; padding:0; margin:0;}
ul.ingr li{
  padding:9px 0 9px 26px; border-bottom:1px solid var(--border); position:relative;
}
ul.ingr li:last-child{border-bottom:none;}
ul.ingr li::before{
  content:""; position:absolute; left:6px; top:18px; width:6px; height:6px;
  border-radius:50%; background:var(--accent-light);
}
ol.stappen{list-style:none; counter-reset:stap; padding:0; margin:0;}
ol.stappen li{
  counter-increment:stap; position:relative; padding:0 0 20px 46px; margin:0;
}
ol.stappen li:last-child{padding-bottom:0;}
ol.stappen li::before{
  content:counter(stap); position:absolute; left:0; top:0;
  width:30px; height:30px; border-radius:50%; background:var(--accent-bg);
  color:var(--accent-light); font-size:0.86rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
/* Verloop tussen twee groenen die allebei 4,5:1 halen met witte tekst */
.cta{
  background:linear-gradient(135deg,var(--accent-knop) 0%,#2D6A4F 100%);
  border-radius:16px; padding:28px 26px; margin:30px 0; text-align:center;
}
.cta h2{font-family:'Playfair Display',Georgia,serif; font-size:1.4rem; margin:0 0 8px; color:#fff;}
.cta p{color:#EDF5F0; margin:0 0 18px; font-size:0.96rem;}
.cta .knop{background:#fff; color:var(--bg);}
.cta .knop:hover{background:var(--text); color:var(--bg);}
.meta-tekst{font-size:0.88rem; color:var(--text-light);}
.meta-tekst b{color:var(--text-muted); font-weight:500;}
footer{
  border-top:1px solid var(--border); margin-top:44px; padding:26px 22px;
  text-align:center; font-size:0.84rem; color:var(--text-light);
}
footer a{color:var(--text-muted); text-decoration:none; margin:0 9px;}
footer a:hover{color:var(--text);}
/* Overzichtspagina */
.groep{margin:0 0 34px;}
.groep h2{
  font-family:'Playfair Display',Georgia,serif; font-size:1.35rem; margin:0 0 12px;
  padding-bottom:8px; border-bottom:1px solid var(--border);
}
.lijst{list-style:none; padding:0; margin:0; columns:2; column-gap:26px;}
.lijst li{break-inside:avoid; padding:4px 0;}
.lijst a{text-decoration:none; color:var(--text); font-size:0.94rem;}
.lijst a:hover{color:var(--accent-light); text-decoration:underline;}
@media (max-width:560px){ .lijst{columns:1;} }