:root{
  --merk: #f04e23;
  --donker: #222631;
  --tekst: #222631;
  --achtergrond: #ffffff;
  --font-kop: 'Roboto Slab', Georgia, serif;
  --font-tekst: 'Montserrat', system-ui, sans-serif;
  --font-accent: 'Caveat', cursive;
  --merk-donker: #ca421d;
  --merk-lijn: #fcd8cf;
  --merk-zacht: #feede9;
  --merk-vleug: #fef9f7;
  --radius-kaart: 10px;
  --max-breedte: 1620px;
  --kaart-verhouding: 4 / 3;
  --bio-regels: 8;
}

/* knoppen uit het CMS */
.knop-bekijk-profiel{
  background: #ffffff00;
  color: #222631;
  border-color: #d5d9e0;
  border-radius: 6px;
}
.knop-bekijk-profiel:hover, .knop-bekijk-profiel:focus-visible{
  background: #f04e23;
  color: #ffffff;
  border-color: #f04e23;
}
.knop-contact{
  background: #222631;
  color: #ffffff;
  border-color: #222631;
  border-radius: 8px;
}
.knop-contact:hover, .knop-contact:focus-visible{
  background: #f04e23;
  color: #ffffff;
  border-color: #f04e23;
}
.knop-laad-meer{
  background: #ffffff00;
  color: #222631;
  border-color: #d5d9e0;
  border-radius: 6px;
}
.knop-laad-meer:hover, .knop-laad-meer:focus-visible{
  background: #222631;
  color: #ffffff;
  border-color: #222631;
}
.knop-lees-meer{
  background: #ffffff00;
  color: #222631;
  border-color: #d5d9e0;
  border-radius: 6px;
}
.knop-lees-meer:hover, .knop-lees-meer:focus-visible{
  background: #f5f6f8;
  color: #f04e23;
  border-color: #f04e23;
}
.knop-neem-contact-op{
  background: #f04e23;
  color: #ffffff;
  border-color: #f04e23;
  border-radius: 24px;
}
.knop-neem-contact-op:hover, .knop-neem-contact-op:focus-visible{
  background: #d43f18;
  color: #ffffff;
  border-color: #d43f18;
}
.knop-offerte-aanvragen{
  background: #f04e23;
  color: #ffffff;
  border-color: #f04e23;
  border-radius: 8px;
}
.knop-offerte-aanvragen:hover, .knop-offerte-aanvragen:focus-visible{
  background: #d43f18;
  color: #ffffff;
  border-color: #d43f18;
}
.knop-reset-filters{
  background: #ffffff00;
  color: #69707e;
  border-color: #d5d9e0;
  border-radius: 6px;
}
.knop-reset-filters:hover, .knop-reset-filters:focus-visible{
  background: #f5f6f8;
  color: #222631;
  border-color: #c9ccd3;
}
.knop-stel-je-vraag{
  background: #ffffff00;
  color: #222631;
  border-color: #d5d9e0;
  border-radius: 6px;
}
.knop-stel-je-vraag:hover, .knop-stel-je-vraag:focus-visible{
  background: #222631;
  color: #ffffff;
  border-color: #222631;
}
.knop-zoeken{
  background: #f04e23;
  color: #ffffff;
  border-color: #f04e23;
  border-radius: 6px;
}
.knop-zoeken:hover, .knop-zoeken:focus-visible{
  background: #d43f18;
  color: #ffffff;
  border-color: #d43f18;
}

/* labels uit het CMS */
.label-exclusief{ background: #222631; color: #ffffff; }
.label-feestgarantie{ background: #f04e23; color: #ffffff; }
.label-nieuw{ background: #f04e23; color: #ffffff; }
.label-populair{ background: #f04e23; color: #ffffff; }
.label-top-act{ background: #f04e23; color: #ffffff; }

/* ---------- donkere uitvoering ---------- */
[data-thema="donker"]{
  --achtergrond: #14161c;
  --vlak: #1c1f27;
  --tekst: #e7e9ee;
  --donker: #e7e9ee;
  --grijs: #a3a9b5;
  --lijn: #2b3040;
  --merk-zacht: rgba(240, 78, 35, .16);
  --merk-vleug: #1c1f27;
  --merk-lijn: rgba(240, 78, 35, .34);
  --schaduw: 0 8px 26px rgba(0, 0, 0, .45);
  --vlak-zacht: #23272f;
  --beeldvlak: #252932;
  --beeldvlak-diep: #1f232b;
  --beeldtekst: #4a5261;
  --hart-vlak: rgba(16, 18, 23, .78);
  --diep: #0e1015;
  --lees: #b9bfca;
  --goed-vlak: rgba(58, 154, 92, .14);
  --goed-lijn: rgba(58, 154, 92, .40);
  --goed-tekst: #86d3a4;
  --fout-vlak: rgba(200, 74, 48, .15);
  --fout-lijn: rgba(200, 74, 48, .42);
  --fout-tekst: #f0a292;
  --let-vlak: rgba(198, 158, 52, .14);
  --let-lijn: rgba(198, 158, 52, .38);
  --let-tekst: #e2c67f;
  --optie-vlak: rgba(72, 118, 198, .16);
  --optie-lijn: rgba(72, 118, 198, .42);
  --optie-tekst: #9db9ea;
  color-scheme: dark;
}
[data-thema="donker"] .knop-bekijk-profiel{
  background: var(--vlak-zacht);
  color: var(--tekst);
  border-color: #d5d9e0;
}
[data-thema="donker"] .knop-bekijk-profiel:hover, [data-thema="donker"] .knop-bekijk-profiel:focus-visible{
  background: #f04e23;
  color: #ffffff;
  border-color: #f04e23;
}
[data-thema="donker"] .knop-contact{
  background: var(--vlak-zacht);
  color: #ffffff;
  border-color: var(--lijn);
}
[data-thema="donker"] .knop-contact:hover, [data-thema="donker"] .knop-contact:focus-visible{
  background: #f04e23;
  color: #ffffff;
  border-color: #f04e23;
}
[data-thema="donker"] .knop-laad-meer{
  background: var(--vlak-zacht);
  color: var(--tekst);
  border-color: #d5d9e0;
}
[data-thema="donker"] .knop-laad-meer:hover, [data-thema="donker"] .knop-laad-meer:focus-visible{
  background: var(--vlak-zacht);
  color: #ffffff;
  border-color: var(--lijn);
}
[data-thema="donker"] .knop-lees-meer{
  background: var(--vlak-zacht);
  color: var(--tekst);
  border-color: #d5d9e0;
}
[data-thema="donker"] .knop-lees-meer:hover, [data-thema="donker"] .knop-lees-meer:focus-visible{
  background: var(--vlak-zacht);
  color: #f04e23;
  border-color: #f04e23;
}
[data-thema="donker"] .knop-reset-filters{
  background: var(--vlak-zacht);
  color: var(--tekst);
  border-color: #d5d9e0;
}
[data-thema="donker"] .knop-reset-filters:hover, [data-thema="donker"] .knop-reset-filters:focus-visible{
  background: var(--vlak-zacht);
  color: var(--tekst);
  border-color: #c9ccd3;
}
[data-thema="donker"] .knop-stel-je-vraag{
  background: var(--vlak-zacht);
  color: var(--tekst);
  border-color: #d5d9e0;
}
[data-thema="donker"] .knop-stel-je-vraag:hover, [data-thema="donker"] .knop-stel-je-vraag:focus-visible{
  background: var(--vlak-zacht);
  color: #ffffff;
  border-color: var(--lijn);
}
@media (prefers-color-scheme: dark){
  html:not([data-thema="licht"]){
    --achtergrond: #14161c;
    --vlak: #1c1f27;
    --tekst: #e7e9ee;
    --donker: #e7e9ee;
    --grijs: #a3a9b5;
    --lijn: #2b3040;
    --merk-zacht: rgba(240, 78, 35, .16);
    --merk-vleug: #1c1f27;
    --merk-lijn: rgba(240, 78, 35, .34);
    --schaduw: 0 8px 26px rgba(0, 0, 0, .45);
    --vlak-zacht: #23272f;
    --beeldvlak: #252932;
    --beeldvlak-diep: #1f232b;
    --beeldtekst: #4a5261;
    --hart-vlak: rgba(16, 18, 23, .78);
    --diep: #0e1015;
    --lees: #b9bfca;
    --goed-vlak: rgba(58, 154, 92, .14);
    --goed-lijn: rgba(58, 154, 92, .40);
    --goed-tekst: #86d3a4;
    --fout-vlak: rgba(200, 74, 48, .15);
    --fout-lijn: rgba(200, 74, 48, .42);
    --fout-tekst: #f0a292;
    --let-vlak: rgba(198, 158, 52, .14);
    --let-lijn: rgba(198, 158, 52, .38);
    --let-tekst: #e2c67f;
    --optie-vlak: rgba(72, 118, 198, .16);
    --optie-lijn: rgba(72, 118, 198, .42);
    --optie-tekst: #9db9ea;
    color-scheme: dark;
  }
  html:not([data-thema="licht"]) .knop-bekijk-profiel{
    background: var(--vlak-zacht);
    color: var(--tekst);
    border-color: #d5d9e0;
  }
  html:not([data-thema="licht"]) .knop-bekijk-profiel:hover, html:not([data-thema="licht"]) .knop-bekijk-profiel:focus-visible{
    background: #f04e23;
    color: #ffffff;
    border-color: #f04e23;
  }
  html:not([data-thema="licht"]) .knop-contact{
    background: var(--vlak-zacht);
    color: #ffffff;
    border-color: var(--lijn);
  }
  html:not([data-thema="licht"]) .knop-contact:hover, html:not([data-thema="licht"]) .knop-contact:focus-visible{
    background: #f04e23;
    color: #ffffff;
    border-color: #f04e23;
  }
  html:not([data-thema="licht"]) .knop-laad-meer{
    background: var(--vlak-zacht);
    color: var(--tekst);
    border-color: #d5d9e0;
  }
  html:not([data-thema="licht"]) .knop-laad-meer:hover, html:not([data-thema="licht"]) .knop-laad-meer:focus-visible{
    background: var(--vlak-zacht);
    color: #ffffff;
    border-color: var(--lijn);
  }
  html:not([data-thema="licht"]) .knop-lees-meer{
    background: var(--vlak-zacht);
    color: var(--tekst);
    border-color: #d5d9e0;
  }
  html:not([data-thema="licht"]) .knop-lees-meer:hover, html:not([data-thema="licht"]) .knop-lees-meer:focus-visible{
    background: var(--vlak-zacht);
    color: #f04e23;
    border-color: #f04e23;
  }
  html:not([data-thema="licht"]) .knop-reset-filters{
    background: var(--vlak-zacht);
    color: var(--tekst);
    border-color: #d5d9e0;
  }
  html:not([data-thema="licht"]) .knop-reset-filters:hover, html:not([data-thema="licht"]) .knop-reset-filters:focus-visible{
    background: var(--vlak-zacht);
    color: var(--tekst);
    border-color: #c9ccd3;
  }
  html:not([data-thema="licht"]) .knop-stel-je-vraag{
    background: var(--vlak-zacht);
    color: var(--tekst);
    border-color: #d5d9e0;
  }
  html:not([data-thema="licht"]) .knop-stel-je-vraag:hover, html:not([data-thema="licht"]) .knop-stel-je-vraag:focus-visible{
    background: var(--vlak-zacht);
    color: #ffffff;
    border-color: var(--lijn);
  }
}