:root {
    --achtergrond: #fffaf5;
    --vlak: #ffffff;
    --tekst: #292524;
    --zacht: #78716c;
    --lijn: #e7e5e4;
    --accent: #c2410c;
    --accent-donker: #9a3412;
    --accent-licht: #ffedd5;
    --groen: #15803d;
    --groen-licht: #dcfce7;
    --geel-licht: #fef9c3;
    --rood: #b91c1c;
    --rood-licht: #fee2e2;
    --blauw-licht: #e0f2fe;
    --radius: 14px;
    --schaduw: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.05);
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --achtergrond: #1c1917;
        --vlak: #292524;
        --tekst: #f5f5f4;
        --zacht: #a8a29e;
        --lijn: #44403c;
        --accent: #fb923c;
        --accent-donker: #fdba74;
        --accent-licht: #431407;
        --groen: #4ade80;
        --groen-licht: #14532d;
        --geel-licht: #422006;
        --rood: #f87171;
        --rood-licht: #450a0a;
        --blauw-licht: #0c4a6e;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--achtergrond);
    color: var(--tekst);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; margin-top: 1.2em; }
img { max-width: 100%; display: block; }
code { background: var(--accent-licht); padding: .1em .35em; border-radius: 6px; font-size: .9em; word-break: break-all; }

/* Kop */
.kop {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem max(1rem, env(safe-area-inset-left));
    background: var(--vlak); border-bottom: 1px solid var(--lijn);
}
.kop__merk { font-weight: 800; font-size: 1.25rem; color: var(--accent); text-decoration: none; }
.kop__nav { display: flex; gap: .2rem; margin-right: auto; overflow-x: auto; }
.kop__nav a { padding: .4rem .7rem; border-radius: 999px; color: var(--tekst); text-decoration: none; white-space: nowrap; }
.kop__nav a.actief { background: var(--accent-licht); color: var(--accent-donker); font-weight: 600; }
.kop__titel { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
    .kop { flex-wrap: wrap; gap: .5rem; }
    .kop__nav { order: 3; width: 100%; }
    .kop__toevoegen { margin-left: auto; }
}

.pagina { max-width: 1100px; margin: 0 auto; padding: 1rem max(1rem, env(safe-area-inset-left)) 3rem; }

/* Knoppen */
.knop {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .55rem 1rem; border: 1px solid var(--lijn); border-radius: 10px;
    background: var(--vlak); color: var(--tekst); font: inherit; font-weight: 600;
    text-decoration: none; cursor: pointer;
}
.knop:hover { border-color: var(--accent); }
.knop:disabled { opacity: .6; cursor: wait; }
.knop--primair { background: var(--accent); border-color: var(--accent); color: #fff; }
.knop--primair:hover { background: var(--accent-donker); }
.knop--gevaar { color: var(--rood); }
.knop--actief { color: var(--accent); border-color: var(--accent); }
.knop--klein { padding: .2rem .65rem; }
.knop--link { border: 0; background: none; color: var(--accent); padding: .3rem 0; font-weight: 500; text-decoration: underline; }
.knop.uit { opacity: .35; pointer-events: none; }
.knoppen { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Meldingen */
.melding { padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem; }
.melding--ok { background: var(--groen-licht); }
.melding--info { background: var(--blauw-licht); }
.melding--waarschuwing { background: var(--geel-licht); }
.melding--fout { background: var(--rood-licht); }

/* Kaarten */
.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--schaduw); margin-bottom: 1rem; }
.kaart--smal { max-width: 420px; margin: 3rem auto; }
.kaart--midden { max-width: 720px; margin-left: auto; margin-right: auto; }
.kaart--waarschuwing { background: var(--geel-licht); }
.kaart__kop { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.kaart__kop h2 { margin: 0; }
.hulp { color: var(--zacht); font-size: .92rem; }

/* Formulieren */
.formulier { display: grid; gap: 1rem; }
.formulier label, .formulier legend { font-weight: 600; display: grid; gap: .3rem; }
.formulier--rij { display: flex; gap: .5rem; }
.formulier--rij input { flex: 1; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=search], textarea, select {
    width: 100%; padding: .6rem .75rem; border: 1px solid var(--lijn); border-radius: 10px;
    background: var(--achtergrond); color: var(--tekst); font: inherit; font-weight: 400;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.formulier .form-help, .formulier [id$=_help] { color: var(--zacht); font-size: .85rem; font-weight: 400; }
.formulier ul { color: var(--rood); margin: 0; padding-left: 1.2rem; }
.naast { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .naast { grid-template-columns: 1fr; } }

/* Zoeken en filters */
.zoekbalk { display: flex; gap: .5rem; margin-bottom: .75rem; }
.filters { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: .4rem; }
.chip {
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
    padding: .3rem .75rem; border: 1px solid var(--lijn); border-radius: 999px;
    background: var(--vlak); color: var(--tekst); text-decoration: none; font-size: .9rem;
}
.chip small { color: var(--zacht); }
.chip.actief { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.actief small { color: #fff; }
.chip--tag { font-size: .85rem; }

/* Overzicht */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: .75rem; }
@media (max-width: 520px) { .raster { grid-template-columns: 1fr 1fr; gap: .7rem; } }
.receptkaart { display: flex; flex-direction: column; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; box-shadow: var(--schaduw); transition: transform .12s; }
.receptkaart:hover { transform: translateY(-2px); }
/* Vaste verhouding: een staande foto (Facebook, Instagram) wordt bijgesneden in plaats van de kaart uit te rekken. */
.receptkaart__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--accent-licht); display: grid; place-items: center; }
.receptkaart__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.receptkaart__leeg { font-size: 2.5rem; }
.receptkaart__favoriet { position: absolute; top: .5rem; right: .6rem; color: #fff; font-size: 1.3rem; text-shadow: 0 1px 4px rgb(0 0 0 / .5); }
.receptkaart__tekst { padding: .7rem .8rem .8rem; }
.receptkaart h3 { margin: 0 0 .35rem; font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.receptkaart__meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; color: var(--zacht); font-size: .82rem; }
.leeg { text-align: center; padding: 3rem 1rem; color: var(--zacht); }

.label { padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.label--nog_uit_te_werken { background: var(--geel-licht); }
.label--te_proberen { background: var(--blauw-licht); }
.label--gemaakt { background: var(--groen-licht); }
.sterren { color: #f59e0b; letter-spacing: 1px; }

/* Recept */
.recept__kop { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 1.5rem; margin-bottom: 1rem; }
.recept__kop:not(:has(img)) { grid-template-columns: 1fr; }
@media (max-width: 760px) { .recept__kop { grid-template-columns: 1fr; } }
.recept__foto { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--radius); }
.recept__beschrijving { color: var(--zacht); }
.recept__meta, .recept__tags { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .92rem; }
.recept__inhoud { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; }
@media (max-width: 760px) { .recept__inhoud { grid-template-columns: 1fr; } }
.recept__voet { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.recept__datum { margin-left: auto; color: var(--zacht); font-size: .85rem; }
.snelbalk { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .75rem; }
.sterrenkeuze { display: inline-flex; }
.ster { border: 0; background: none; font-size: 1.5rem; color: var(--lijn); cursor: pointer; padding: 0 .1rem; }
.ster.aan { color: #f59e0b; }
.porties { display: flex; align-items: center; gap: .5rem; }
.ingredienten { list-style: none; padding: 0; margin: 0 0 1rem; }
.ingredienten li { padding: .35rem 0; border-bottom: 1px dashed var(--lijn); }
.ingredienten input { accent-color: var(--accent); }
.stappen { padding-left: 1.4rem; margin: 0; }
.stappen li { margin-bottom: .8rem; }
.stappen li::marker { color: var(--accent); font-weight: 700; }
.bewaar-regels { white-space: pre-line; }

/* Kookmodus */
.kookmodus { font-size: 1.2rem; }
.koken { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem; }
@media (max-width: 760px) { .koken { grid-template-columns: 1fr; } }
.afvinklijst { list-style: none; padding: 0; margin: 0; }
.afvinklijst li { padding: .6rem 0; border-bottom: 1px solid var(--lijn); }
.afvinklijst label { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.afvinklijst input { width: 1.4rem; height: 1.4rem; margin-top: .2rem; flex: none; accent-color: var(--accent); }
.afvinklijst input:checked + span { text-decoration: line-through; color: var(--zacht); }
.afvinklijst--stappen { counter-reset: stap; }
.afvinklijst--stappen span::before { counter-increment: stap; content: counter(stap) ". "; color: var(--accent); font-weight: 700; }
.wakker { font-size: .8rem; color: var(--groen); }

/* Boodschappen */
.boodschappen { list-style: none; padding: 0; margin: 1rem 0; }
.boodschappen li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--lijn); }
.boodschappen li.afgevinkt span { text-decoration: line-through; color: var(--zacht); }
.boodschappen__recept { margin-left: auto; font-size: .8rem; color: var(--zacht); }
.vinkje { border: 0; background: none; font-size: 1.4rem; cursor: pointer; color: var(--accent); padding: 0; }
.sleutel { display: inline-block; padding: .4rem .6rem; }

/* Foto's */
.fotos { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.fotos li { border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; background: var(--achtergrond); }
.fotos li.hoofd { border-color: var(--accent); }
.fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.fotos__acties { display: flex; justify-content: space-between; align-items: center; gap: .3rem; padding: .35rem; }
.formulier--rij input[type=file] { min-width: 0; }

/* Profiel */
.geavanceerd { margin-top: 1.25rem; border-top: 1px solid var(--lijn); padding-top: .75rem; }
.geavanceerd summary { cursor: pointer; color: var(--zacht); }
.receptkaart__prive { position: absolute; top: .5rem; left: .6rem; font-size: 1rem; background: rgb(0 0 0 / .45); border-radius: 999px; padding: .1rem .35rem; }
.paginatitel { margin-bottom: .25rem; }
.receptkaart__auteur { margin: -.2rem 0 .35rem; color: var(--zacht); font-size: .8rem; }
.beoordeling { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin-top: .6rem; }
.beoordeling__gemiddelde { font-weight: 600; }
.beoordeling .sterrenkeuze { display: inline-flex; align-items: center; gap: .1rem; }
.beoordeling .sterrenkeuze .hulp { margin-right: .3rem; }

/* Notities en opmerkingen */
.kaart--notitie summary { display: flex; align-items: baseline; gap: .6rem; cursor: pointer; list-style: none; }
.kaart--notitie summary::-webkit-details-marker { display: none; }
.kaart--notitie summary h2 { margin: 0; }
.kaart--notitie details[open] summary { margin-bottom: .6rem; }
.notitie__tekst { background: var(--geel-licht); border-radius: 10px; padding: .6rem .8rem; }
.receptkaart__notitie { position: absolute; bottom: .5rem; right: .6rem; font-size: 1rem; background: rgb(255 255 255 / .85); border-radius: 999px; padding: .1rem .35rem; }
.opmerkingen { list-style: none; padding: 0; margin: 0 0 1rem; }
.opmerkingen li { padding: .7rem 0; border-bottom: 1px solid var(--lijn); }
.opmerkingen li p { margin: .25rem 0 0; }
.opmerkingen__kop { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.opmerkingen__kop form { margin-left: auto; }
.kaart--info { background: var(--blauw-licht); }
.vertaalbalk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }