/* Waar we BEWUST afwijken van de live site.
 *
 * De rest van dit thema is een spiegel: pixel voor pixel hetzelfde als bonbon-antwerp.be.
 * Alles in dit bestand is een gevraagde verbetering, geen fout in het spiegelen. Houd dat
 * gescheiden, anders weet niemand over een half jaar meer wat kopie is en wat keuze.
 *
 * ── De twee blokken onderaan de homepage ───────────────────────────────────────────────
 * Thierry, 17-9-2026: *"ik ben geen fan van deze kaders, ja ik weet dat dat op de live
 * site ook zo is maar ik wil dat deze anders worden, kan je iets leukers uitwerken? de
 * tekst moet wel blijven uiteraard."*
 *
 * Wat er stond: een foto over het hele blok, een donkere waas eroverheen, en witte tekst
 * met een slagschaduw. Dat is de standaardoplossing van elke pagebuilder en ze heeft twee
 * problemen tegelijk. De foto wordt onleesbaar omdat er een waas overheen moet, én de
 * tekst wordt onrustig omdat er altijd een drukke plek onder een regel valt. De
 * slagschaduw is het bewijs: die staat er alleen omdat het zonder niet leesbaar was.
 *
 * Wat er nu staat: de foto krijgt een eigen band bovenaan en mag scherp en onbedekt
 * blijven, de tekst staat eronder op papier in de huisstijlkleuren. Dat is dezelfde
 * opbouw als de rest van de pagina, en de tekst is ongewijzigd.
 *
 * ⚠️ De foto's staan als `background-image` op de container zelf en de donkere waas is een
 * `::before` met `inset: 0`. Beide worden hieronder omgezet: de container verliest zijn
 * foto, en de `::before` wordt van een waas een echte beeldband. Verandert de foto in de
 * bron, dan moet het pad hieronder mee. Daarom staat het er maar op één plek per kaart.
 */

.elementor-13 .elementor-element.elementor-element-3755d7e {
  --gap: clamp(1rem, 2.5vw, 2rem) 0px;
  --column-gap: clamp(1rem, 2.5vw, 2rem);
  align-items: stretch;
}

/* ── de kaart zelf ───────────────────────────────────────────────────────────────
   ⚠️ `:not(.elementor-motion-effects-element-type-background)` staat er niet voor de
   sier. Elementor schrijft de achtergrond van een container weg met precies die
   `:not()` erbij, en dat is één klasse meer specificiteit. Zonder dezelfde staart won de
   donkere foto van de spiegel en bleef de kaart zwart: gemeten `rgb(29, 29, 27)` waar
   `#FDFBF6` hoorde te staan. */
.elementor-13 .elementor-element.elementor-element-c8069a6:not(.elementor-motion-effects-element-type-background),
.elementor-13 .elementor-element.elementor-element-f64a8a1:not(.elementor-motion-effects-element-type-background) {
  --min-height: 0;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --justify-content: flex-start;
  background-image: none;
  background-color: #FDFBF6;
  border: 1px solid rgb(66 20 25 / .10);
  border-radius: var(--bb-rond, 16px);
  overflow: hidden;
  box-shadow: 0 10px 30px rgb(66 20 25 / .07);
  transition: box-shadow .3s ease, transform .3s ease;
}
.elementor-13 .elementor-element.elementor-element-c8069a6:hover,
.elementor-13 .elementor-element.elementor-element-f64a8a1:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgb(66 20 25 / .13);
}

/* ── de beeldband ─────────────────────────────────────────────────────────────────
   Was de donkere waas over de hele kaart. Nu een band bovenaan, zonder waas, zodat de
   foto zelf weer iets voorstelt. `position: relative` haalt hem uit de absolute laag en
   zet hem als eerste blok in de kolom. */
.elementor-13 .elementor-element.elementor-element-c8069a6::before,
.elementor-13 .elementor-element.elementor-element-f64a8a1::before {
  content: "";
  position: relative;
  inset: auto;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: clamp(190px, 21vw, 280px);
  opacity: 1;
  background-color: transparent;
  background-size: cover;
  background-position: center 58%;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgb(66 20 25 / .08);
  /* De kaart klipt zelf met overflow:hidden, dus de band hoeft geen eigen radius. Hij
     erfde er een van 25px en dat gaf een rare knik aan de onderkant van de foto. */
  border-radius: 0;
  transition: transform .5s ease;
}
.elementor-13 .elementor-element.elementor-element-c8069a6::before {
  background-image: url("../spiegel/media/wp-content_uploads_2025_10_SF40067-scaled.jpg");
}
.elementor-13 .elementor-element.elementor-element-f64a8a1::before {
  background-image: url("../spiegel/media/wp-content_uploads_2025_10_SF40165-scaled.jpg");
}

/* ── ruimte om de tekst ───────────────────────────────────────────────────────────
   De container houdt padding 0, anders zou de beeldband mee inspringen. De ruimte komt
   dus op de widgets zelf. */
.elementor-13 .elementor-element.elementor-element-c8069a6 > .elementor-widget,
.elementor-13 .elementor-element.elementor-element-f64a8a1 > .elementor-widget {
  padding-inline: clamp(1.25rem, 2.6vw, 2.25rem);
}
.elementor-13 .elementor-element.elementor-element-c8069a6 > .elementor-widget:first-of-type,
.elementor-13 .elementor-element.elementor-element-f64a8a1 > .elementor-widget:first-of-type {
  padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
}
.elementor-13 .elementor-element.elementor-element-c8069a6 > .elementor-widget:last-of-type,
.elementor-13 .elementor-element.elementor-element-f64a8a1 > .elementor-widget:last-of-type {
  padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
  margin-top: auto;
}

/* ── de koppen ────────────────────────────────────────────────────────────────────
   Bordeaux op papier in plaats van wit op een foto, en de slagschaduw eraf. Die stond er
   alleen omdat wit op een foto anders niet leesbaar was; op papier is hij pure ruis. */
.elementor-13 .elementor-element.elementor-element-f79156e .elementor-heading-title,
.elementor-13 .elementor-element.elementor-element-aa1fefa .elementor-heading-title {
  color: var(--e-global-color-primary, #421419);
  text-shadow: none;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.35em;
  text-wrap: balance;
}

/* Een fijn streepje onder de kop, zoals de ruitjes elders op de pagina. */
.elementor-13 .elementor-element.elementor-element-f79156e .elementor-heading-title::after,
.elementor-13 .elementor-element.elementor-element-aa1fefa .elementor-heading-title::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin: .9rem auto 0;
  background: rgb(66 20 25 / .35);
}

/* ── de lopende tekst ─────────────────────────────────────────────────────────── */
.elementor-13 .elementor-element.elementor-element-adefa69,
.elementor-13 .elementor-element.elementor-element-acb89c1 {
  color: #3A2B2C;
  text-shadow: none;
  font-size: 15px;
  line-height: 1.75em;
}
.elementor-13 .elementor-element.elementor-element-adefa69 p:last-child,
.elementor-13 .elementor-element.elementor-element-acb89c1 p:last-child { margin-bottom: 0; }
.elementor-13 .elementor-element.elementor-element-adefa69 strong,
.elementor-13 .elementor-element.elementor-element-acb89c1 strong {
  color: var(--e-global-color-primary, #421419);
  font-weight: 600;
}

/* ── de knoppen ───────────────────────────────────────────────────────────────────
   Thierry, 17-9-2026: *"zorg dat de buttons hetzelfde zijn als de rest van de site"*.
   Terecht: ik had er een eigen vorm van gemaakt.

   Opgemeten over vier pagina's van de live site. Er is één knopvorm, met twee kleuren:

     vorm     border-radius 50px · Gallient 15px · letter-spacing 3px · padding 12px 24px
     donker   achtergrond #64242C, tekst wit      ("contacteer ons")
     licht    achtergrond #FFFFFF, tekst #421419  ("ontdek ons menu")

   Welke kleur waar: op een donker vlak de lichte knop, op een licht vlak de donkere. Op
   /private-dining/ staat de wijnrode knop op crème, dus die keuze is van de site zelf.
   De kaarten zijn licht, dus wijnrood. Een witte pil op #FDFBF6 haalt 1,04:1 aan contrast
   en dat is geen knop meer, dat is een vlek. */
.elementor-13 .elementor-element.elementor-element-c52f97c .elementor-button,
.elementor-13 .elementor-element.elementor-element-7cfd5cb .elementor-button {
  background-color: #64242C;
  color: #FFFFFF;
  border-radius: 50px;
  padding: 12px 24px;
  box-shadow: none;
  transition: background-color .25s ease, transform .25s ease;
}
.elementor-13 .elementor-element.elementor-element-c52f97c .elementor-button:hover,
.elementor-13 .elementor-element.elementor-element-c52f97c .elementor-button:focus,
.elementor-13 .elementor-element.elementor-element-7cfd5cb .elementor-button:hover,
.elementor-13 .elementor-element.elementor-element-7cfd5cb .elementor-button:focus {
  background-color: var(--e-global-color-primary, #421419);
  color: #FFFFFF;
  transform: translateY(-1px);
}

@media (hover: hover) {
  .elementor-13 .elementor-element.elementor-element-c8069a6:hover::before,
  .elementor-13 .elementor-element.elementor-element-f64a8a1:hover::before {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-13 .elementor-element.elementor-element-c8069a6,
  .elementor-13 .elementor-element.elementor-element-f64a8a1,
  .elementor-13 .elementor-element.elementor-element-c8069a6::before,
  .elementor-13 .elementor-element.elementor-element-f64a8a1::before { transition: none; }
  .elementor-13 .elementor-element.elementor-element-c8069a6:hover,
  .elementor-13 .elementor-element.elementor-element-f64a8a1:hover { transform: none; }
}

/* ── Regellengte ────────────────────────────────────────────────────────────────
 * Gemeten op de homepage, 1440 px breed: de twee inleidende alinea's zijn 1302 px
 * breed bij 16 px tekst. Dat is ongeveer 163 tekens per regel. Comfortabel lezen ligt
 * tussen 50 en 75; boven de 100 verliest een oog de volgende regel en springt hij terug
 * naar dezelfde. Het is precies de eerste tekst die een bezoeker op de homepage leest.
 *
 * Alleen een bovengrens, gecentreerd. De tekst zelf, de uitlijning en de kleuren
 * blijven zoals ze zijn; op tablet en telefoon verandert er niets, want daar zat de
 * regellengte al goed (102 en 46 tekens).
 *
 * ⚠️ Niet toegepast binnen de twee kaarten en de menukaart: die hebben hun eigen breedte.
 */
/* ⚠️ Deze site draait Elementor met "optimized markup", dus er zit GEEN
   `.elementor-widget-container` om de tekst. Een selector met `> .elementor-widget-container`
   grijpt nergens op aan; de <p> is een direct kind van het widget-element zelf. */
/* ⚠️ Elementor beschermt zijn eigen breedte met een specificiteitstruc:
   `.elementor.elementor .e-con > .e-con-inner > .elementor-widget { max-width: 100% }`,
   vijf klassen diep met een verdubbelde `.elementor`. Een gewone selector van één klasse
   haalt dat nooit. Dezelfde staart is dus nodig, niet een `!important`: die zou ook alle
   latere aanpassingen blokkeren. */
/* ⚠️ Vanaf 700 px en niet vanaf 1025. Met de grens op 1025 bleef de tablet ongemoeid, en
   daar was het juist het ergst: gemeten 102 tekens per regel tegenover 88 op desktop.
   58ch levert gemeten ongeveer 72 tekens, en dat is precies de bovengrens van comfortabel
   lezen. `ch` is hier niet gelijk aan een teken: het is de breedte van de nul, en die is
   in Albert Sans smaller dan het gemiddelde. Vandaar 58 en niet 72. */
@media (min-width: 700px) {
  .elementor.elementor .e-con > .e-con-inner > .elementor-widget-text-editor:not(.elementor-element-adefa69):not(.elementor-element-acb89c1),
  .elementor.elementor .e-con > .e-con-inner > .elementor-element-b1ef323 {
    max-width: 58ch;
    margin-inline: auto;
  }
}

/* ── De twee kaarten onder elkaar op een tablet ─────────────────────────────────
   Naast elkaar op 834 px geeft kolommen van 330 px, en dan draagt een regel nog maar
   39 tekens. Dat leest als een gedicht in plaats van als lopende tekst. Onder elkaar
   krijgt elke kaart de volle breedte en komt de foto beter tot zijn recht. */
@media (max-width: 1024px) {
  .elementor-13 .elementor-element.elementor-element-3755d7e {
    --flex-direction: column;
    --flex-wrap: wrap;
  }
  .elementor-13 .elementor-element.elementor-element-c8069a6,
  .elementor-13 .elementor-element.elementor-element-f64a8a1 { --width: 100%; }
  .elementor-13 .elementor-element.elementor-element-c8069a6::before,
  .elementor-13 .elementor-element.elementor-element-f64a8a1::before { height: clamp(200px, 30vw, 320px); }
}

/* ── Letterspatiëring in lopende tekst ──────────────────────────────────────────
 * Gemeten: elke alinea draagt `letter-spacing: 3px` bij 16 px tekst. Dat is 0,19em.
 * Voor koppen, labels en knoppen is dat precies goed en het maakt de site rustig en
 * duur. In lopende tekst werkt het tegen: bij die afstand vallen woorden uit elkaar in
 * losse letters, en het oog moet ze per woord weer samenvoegen. Op de langste alinea van
 * de homepage gaat het om 340 woorden.
 *
 * Hier gaat alleen de LOPENDE tekst terug naar een rustige 0,4 px. Koppen, de navigatie,
 * de knoppen, de voettekst-lijsten en de eyebrows houden hun 3 px, want daar is het de
 * huisstijl. Dus het merk blijft, alleen het lezen wordt makkelijker.
 *
 * ⚠️ Zelfde specificiteitstruc als hierboven nodig, anders wint Elementor.
 */
.elementor .elementor-widget-text-editor p,
.elementor .elementor-widget-text-editor li,
.elementor .elementor-widget-theme-post-content p {
  letter-spacing: .4px;
}

/* De FAQ staat binnen `.page-content`, dus hij moet zijn eigen breedte terugpakken. */
body.bb-eenvoudig .bb-faq { width: min(62ch, 100%); }

/* ── Veelgestelde vragen ────────────────────────────────────────────────────────
 * `<details>` en `<summary>`, dus uitklappen werkt zonder één regel JavaScript en ook
 * wanneer een script faalt. Een schermlezer kondigt het gedrag vanzelf aan, en de
 * browser vindt tekst in een dichtgeklapt antwoord met ctrl+F.
 */
.bb-faqpagina .page-content { max-width: 100%; }

.bb-faq {
  max-width: 62ch;
  margin: clamp(1.5rem, 4vw, 3rem) auto clamp(2.5rem, 6vw, 5rem);
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}
.bb-faq__titel {
  text-align: center;
  color: var(--e-global-color-primary, #421419);
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}
.bb-faq__lijst { border-top: 1px solid rgb(66 20 25 / .16); }

.bb-faq__item { border-bottom: 1px solid rgb(66 20 25 / .16); }
.bb-faq__vraag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem .25rem;
  cursor: pointer;
  list-style: none;
  color: var(--e-global-color-primary, #421419);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 600;
  letter-spacing: .4px;
  line-height: 1.45;
}
.bb-faq__vraag::-webkit-details-marker { display: none; }
.bb-faq__vraag::after {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate .25s ease, translate .25s ease;
}
.bb-faq__item[open] .bb-faq__vraag::after { rotate: -135deg; translate: 0 2px; }
.bb-faq__vraag:hover { opacity: .78; }
.bb-faq__vraag:focus-visible { outline: 2px solid var(--e-global-color-primary, #421419); outline-offset: 3px; }

.bb-faq__antwoord { padding: 0 .25rem 1.3rem; }
.bb-faq__antwoord p {
  margin: 0;
  color: #3A2B2C;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: .4px;
}

@media (prefers-reduced-motion: reduce) {
  .bb-faq__vraag::after { transition: none; }
}

/* ── Veelgestelde vragen ────────────────────────────────────────────────────────
 * `<details>` en `<summary>`, dus uitklappen werkt zonder één regel JavaScript en ook
 * wanneer een script faalt. Een schermlezer kondigt het gedrag vanzelf aan, en de
 * browser vindt tekst in een dichtgeklapt antwoord met ctrl+F.
 */
.bb-faqpagina .page-content { max-width: 100%; }

.bb-faq {
  max-width: 62ch;
  margin: clamp(1.5rem, 4vw, 3rem) auto clamp(2.5rem, 6vw, 5rem);
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}
.bb-faq__titel {
  text-align: center;
  color: var(--e-global-color-primary, #421419);
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}
.bb-faq__lijst { border-top: 1px solid rgb(66 20 25 / .16); }

.bb-faq__item { border-bottom: 1px solid rgb(66 20 25 / .16); }
.bb-faq__vraag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem .25rem;
  cursor: pointer;
  list-style: none;
  color: var(--e-global-color-primary, #421419);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 600;
  letter-spacing: .4px;
  line-height: 1.45;
}
.bb-faq__vraag::-webkit-details-marker { display: none; }
.bb-faq__vraag::after {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate .25s ease, translate .25s ease;
}
.bb-faq__item[open] .bb-faq__vraag::after { rotate: -135deg; translate: 0 2px; }
.bb-faq__vraag:hover { opacity: .78; }
.bb-faq__vraag:focus-visible { outline: 2px solid var(--e-global-color-primary, #421419); outline-offset: 3px; }

.bb-faq__antwoord { padding: 0 .25rem 1.3rem; }
.bb-faq__antwoord p {
  margin: 0;
  color: #3A2B2C;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: .4px;
}

@media (prefers-reduced-motion: reduce) {
  .bb-faq__vraag::after { transition: none; }
}

/* ── Het contactformulier ───────────────────────────────────────────────────────
 * Thierry, 18-9-2026: *"het contact formulier is ook toe aan verbetering en vernieuwing
 * in design"*. Drie gemeten problemen, geen smaakkwesties:
 *
 * 1. De labels dragen `elementor-screen-only` en zijn tot 1 px geklipt. De placeholder
 *    doet dus het werk van het label, en zodra je typt weet je niet meer wat er gevraagd
 *    werd. Bij een formulier met "Aantal personen", "Tijdstip" en "Datum" naast elkaar is
 *    dat een echte kans op fouten.
 * 2. De placeholder heeft exact dezelfde kleur als getypte tekst (#F9F3E7 op #F9F3E7).
 *    Je kunt een leeg veld dus niet van een ingevuld veld onderscheiden.
 * 3. De verzendknop is 769 bij 74 px met een `border: 25px solid white`. Elke andere knop
 *    op de site is 47 px hoog.
 *
 * De oplossing is een zwevend label: het staat in het veld tot je begint te typen en
 * schuift dan naar boven. Zo blijft de rustige, lege look van nu, maar verdwijnt de
 * context niet. Alle tekst en alle velden blijven zoals ze zijn.
 */

.elementor-form .elementor-field-group { position: relative; }

/* Het label uit de screen-only-klem halen en boven het veld leggen. */
.elementor-form .elementor-field-group > .elementor-field-label {
  position: absolute;
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  overflow: visible;
  white-space: nowrap;
  inset-inline-start: 18px;
  top: 50%;
  translate: 0 -50%;
  margin: 0;
  padding: 0 6px;
  pointer-events: none;
  color: rgb(249 243 231 / .62);
  font-family: "Aboreto", serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  line-height: 1;
  transition: top .18s ease, font-size .18s ease, color .18s ease, background-color .18s ease;
}


/* ⚠️ De placeholder moet WEG zolang het label in het veld staat, anders staan ze over
   elkaar: "NAAMl" en "VOORNAAMM". Hij komt terug zodra het label omhoog schuift, want dan
   is er plaats en helpt hij met het formaat (bijvoorbeeld bij een telefoonnummer). */
.elementor-form .elementor-field-textual::placeholder { color: transparent; }
.elementor-form .elementor-field-group:focus-within .elementor-field-textual::placeholder {
  color: rgb(249 243 231 / .3);
}

.elementor-form .elementor-field-textual:hover { border-color: rgb(249 243 231 / .6); }
.elementor-form .elementor-field-textual:focus {
  border-color: rgb(249 243 231 / .95);
  box-shadow: 0 0 0 3px rgb(249 243 231 / .12);
  outline: none;
}
/* Een verplicht veld dat ingevuld is maar niet klopt, meldt zich meteen. */
.elementor-form .elementor-field-textual:not(:placeholder-shown):invalid { border-color: #E7A6A6; }

/* De verzendknop terug naar de maat van elke andere knop op de site.
   ⚠️ `border: 25px solid white` maakte hem 74 px hoog; die moet expliciet weg, anders
   telt hij gewoon mee bij de hoogte. En de kolom eromheen is volle breedte, dus de knop
   moet zelf zijn breedte begrenzen. */
.elementor-form .elementor-field-type-submit > .elementor-button,
.elementor-form .elementor-button {
  border: 0 !important;
  border-radius: 50px;
  padding: 15px 44px;
  height: auto;
  min-height: 47px;
  width: auto;
  max-width: 100%;
  min-width: 230px;
  flex: 0 0 auto;
  font-family: "Gallient", "Aboreto", serif;
  letter-spacing: 3px;
  transition: background-color .25s ease, transform .2s ease;
}
.elementor-form .elementor-button:hover { transform: translateY(-1px); }
.elementor-form .elementor-field-type-submit { display: flex; justify-content: center; }

@media (max-width: 767px) {
  /* Op een telefoon wel over de volle breedte: daar is een brede knop makkelijker raken. */
  .elementor-form .elementor-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-form .elementor-field-group > .elementor-field-label,
  .elementor-form .elementor-field-textual,
  .elementor-form .elementor-button { transition: none; }
}

/* ⚠️ De verzendknop wordt uitgerekt door
   `.elementor-button-align-stretch .elementor-field-type-submit:not(...) .elementor-button
    { flex-basis: 100% }`, vier klassen diep. Vandaar dezelfde diepte hier.

   En de kleur: het formulier staat op een CRÈME vlak, en daar gebruikt de site zijn
   wijnrode pil, niet de witte. Wit op crème haalt 1,09:1 en dat is geen knop.
   Zelfde regel als bij de twee kaarten op de homepage. */
/* ⚠️ `elementor-button-align-stretch` staat op de WIDGET die het formulier bevat, niet op
   het formulier zelf. Een selector die beide op hetzelfde element verwacht grijpt nergens
   op aan; dat kostte een ronde. Vier klassen diep, net als de regel die hij moet verslaan. */
/* ⚠️ De kleur wordt gezet door
   `.elementor-21 .elementor-element.elementor-element-b0684b3 .elementor-button[type="submit"]`.
   Dat attribuut telt mee voor de specificiteit, dus zonder `[type="submit"]` verlies je de
   kleurslag terwijl de breedte wél pakt. Precies zo'n half resultaat is verwarrend. */
.elementor-button-align-stretch .elementor-form .elementor-field-type-submit > .elementor-button[type="submit"],
.elementor-button-align-stretch .elementor-form .elementor-field-type-submit > .elementor-button,
.elementor-form .elementor-field-type-submit > .elementor-button {
  flex-basis: auto;
  width: auto;
  min-width: 240px;
  background-color: #64242C;
  color: #FFFFFF;
}
.elementor-form .elementor-field-type-submit > .elementor-button[type="submit"]:hover,
.elementor-form .elementor-field-type-submit > .elementor-button[type="submit"]:focus,
.elementor-form .elementor-field-type-submit > .elementor-button:hover,
.elementor-form .elementor-field-type-submit > .elementor-button:focus {
  background-color: var(--e-global-color-primary, #421419);
  color: #FFFFFF;
}
@media (max-width: 767px) {
  .elementor-button-align-stretch .elementor-form .elementor-field-type-submit > .elementor-button[type="submit"],
  .elementor-button-align-stretch .elementor-form .elementor-field-type-submit > .elementor-button,
  .elementor-form .elementor-field-type-submit > .elementor-button { width: 100%; flex-basis: 100%; }
}

/* ── Pagina's zonder gespiegelde opmaak ─────────────────────────────────────────
 * `/reservaties/`, `/allergenen/` en de nieuwe FAQ-pagina hebben geen Elementor-ontwerp.
 * Ze kregen daardoor de kale WordPress-standaard: een titel zonder kader, geen kopband,
 * en op een crème grond viel het crème logo helemaal weg.
 *
 * Deze regels geven ze dezelfde opbouw als de rest van de site: een bordeaux band met het
 * patroon bovenaan, met daarin de navigatie en de paginatitel, en daaronder de inhoud op
 * papier. Zo voelen ze als onderdeel van de site in plaats van als een losse pagina.
 */
body.bb-eenvoudig { background-color: var(--e-global-color-text, #F9F3E7); }

body.bb-eenvoudig > header,
body.bb-eenvoudig .bb-eenvoudig__band {
  background-color: var(--e-global-color-primary, #421419);
}

/* ⚠️ Volle breedte. De `.page-header` zit in een container met een maximumbreedte, dus
   zonder deze truc liep de bordeaux band niet door tot de rand van het scherm en bleef er
   links en rechts een crème strook staan. */
body.bb-eenvoudig .page-header {
  background-color: var(--e-global-color-primary, #421419);
  width: 100vw;
  max-width: 100vw;
  /* ⚠️ `margin-inline: calc(50% - 50vw)` haalt het blok uit de container, maar de
     LINKERmarge van die container telt nog mee voor de inhoud. Zonder deze twee regels
     stond de titel ongeveer 130 px links van het midden van het scherm. */
  margin-inline: calc(50% - 50vw);
  position: relative;
  left: 0;
  box-sizing: border-box;
  padding: clamp(1.5rem, 5vw, 3.5rem) 1.25rem clamp(3rem, 7vw, 5rem);
  /* Flex in plaats van `margin-inline: auto`. De titel bleef anders op de oude
     containerpositie staan: gemeten op 405 px terwijl het midden op 720 ligt. */
  display: flex;
  justify-content: center;
  text-align: center;
}
body.bb-eenvoudig .page-header .entry-title { max-width: 30ch; }
body.bb-eenvoudig .page-header .entry-title {
  margin: 0;
  color: var(--e-global-color-text, #F9F3E7);
  font-family: "Aboreto", serif;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 1.25;
}
body.bb-eenvoudig .page-content {
  background-color: var(--e-global-color-text, #F9F3E7);
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-top: clamp(1.5rem, 4vw, 3rem);
}
body.bb-eenvoudig > header { width: 100vw; margin-inline: calc(50% - 50vw); }

/* De zachte ronding waarmee elke andere pagina van bordeaux naar papier gaat. */
body.bb-eenvoudig .page-content::before {
  content: "";
  display: block;
  height: clamp(28px, 4vw, 54px);
  margin-top: calc(-1 * clamp(1.5rem, 4vw, 3rem) - clamp(28px, 4vw, 54px));
  background: var(--e-global-color-text, #F9F3E7);
  border-radius: 50% 50% 0 0 / clamp(28px, 4vw, 54px) clamp(28px, 4vw, 54px) 0 0;
}

/* ═══ HET CONTACTFORMULIER, VOLLEDIG OPNIEUW ═══════════════════════════════════
 * Thierry, 18-9-2026: *"contact formulier trekt op niks, was al lelijk en nu door jou nog
 * lelijker, doe een volledig redesign"*. Terecht: ik had het opgelapt in plaats van
 * opnieuw ontworpen.
 *
 * Wat er mis was, los van smaak:
 *   - Acht donkere pillen onder elkaar op een crème vlak. Een ingevuld veld ziet er
 *     hetzelfde uit als een leeg veld, want de vulling is donker en de tekst crème.
 *   - Geen enkele groepering. Naam, aantal personen, tijdstip, datum, mail, telefoon en
 *     bericht staan als één blok van acht, terwijl het drie verschillende dingen zijn:
 *     wie ben je, wat wil je reserveren, en wat wil je zeggen.
 *   - Pilvormige invoervelden. Een pil is de vorm van een KNOP. Wanneer een veld en een
 *     knop dezelfde vorm hebben, weet niemand meer waar hij kan typen en waar hij klikt.
 *
 * Het nieuwe ontwerp: witte velden op het crème vlak, want wit zegt "hier typ je". Een
 * rechthoek met een kleine radius voor invoer, de pil blijft voor de knop. Labels boven
 * het veld in kleine kapitalen, altijd leesbaar, ook als het veld vol staat. En drie
 * groepen met een eigen tussenkop, zodat het formulier een verhaal wordt in plaats van
 * een lijst.
 */

/* ── de groepen ───────────────────────────────────────────────────────────────── */
.bb-formgroep {
  grid-column: 1 / -1;
  width: 100%;
  margin: 1.9rem 0 .35rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  color: var(--e-global-color-primary, #421419);
  font-family: "Aboreto", serif;
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.bb-formgroep::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgb(66 20 25 / .18);
}
.bb-formgroep:first-child { margin-top: 0; }

/* ── de velden ────────────────────────────────────────────────────────────────── */
.elementor-form .elementor-field-group { position: relative; margin-bottom: .35rem; }

/* Het label staat BOVEN het veld. Geen zwevend label meer: dat werkt bij één kolom, maar
   bij drie velden naast elkaar (aantal, tijdstip, datum) springt het te veel. */
.elementor-form .elementor-field-group > .elementor-field-label {
  position: static;
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  overflow: visible;
  display: block;
  margin: 0 0 .4rem 2px;
  padding: 0;
  color: rgb(66 20 25 / .7);
  font-family: "Albert Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  line-height: 1;
}

/* ⚠️ Vijf klassen diep, want dat is wat er verslagen moet worden:
   `.elementor-21 .elementor-element.elementor-element-b0684b3 .elementor-field-group
    .elementor-field:not(...)` zet de bordeaux vulling en de radius van 25 px, en
   `.elementor-widget-form .elementor-field-group .elementor-field` zet de crème tekst.
   Met een kortere selector kreeg ik wel de groepen en de labels, maar bleven de velden
   donkere pillen staan. Half een redesign is geen redesign.

   ⚠️ Het is ZES klassen, niet vijf: die `:not()` aan het eind telt zelf ook mee voor de
   specificiteit. Vandaar de extra `.elementor` vooraan. */
.elementor .elementor-widget-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual,
.elementor .elementor-widget-form .elementor-form .elementor-field-group textarea.elementor-field {
  background-color: #FFFFFF;
  border: 1px solid rgb(66 20 25 / .2);
  border-radius: 6px;
  color: var(--e-global-color-primary, #421419);
  font-family: "Albert Sans", sans-serif;
  font-size: 15px;
  letter-spacing: .3px;
  padding: 14px 16px;
  min-height: 52px;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.elementor .elementor-widget-form .elementor-form .elementor-field-group textarea.elementor-field { min-height: 132px; line-height: 1.6; }

.elementor .elementor-widget-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual::placeholder { color: rgb(66 20 25 / .34); }
.elementor .elementor-widget-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual:hover { border-color: rgb(66 20 25 / .4); }
.elementor .elementor-widget-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual:focus {
  border-color: var(--e-global-color-primary, #421419);
  box-shadow: 0 0 0 3px rgb(66 20 25 / .1);
  outline: none;
}
/* Een verplicht veld dat ingevuld is maar niet klopt, meldt zich meteen. */
.elementor .elementor-widget-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual:not(:placeholder-shown):invalid { border-color: #B3453F; }

/* De klok- en kalenderknopjes van de browser in de huisstijl. */
.elementor-form input[type="time"]::-webkit-calendar-picker-indicator,
.elementor-form input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .5;
  cursor: pointer;
}
.elementor-form input[type="time"]:hover::-webkit-calendar-picker-indicator,
.elementor-form input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: .85; }

/* ── de knop ──────────────────────────────────────────────────────────────────── */
.elementor-button-align-stretch .elementor-form .elementor-field-type-submit > .elementor-button[type="submit"],
.elementor-button-align-stretch .elementor-form .elementor-field-type-submit > .elementor-button,
.elementor-form .elementor-field-type-submit > .elementor-button {
  flex-basis: auto;
  width: auto;
  min-width: 250px;
  height: auto;
  min-height: 52px;
  border: 0 !important;
  border-radius: 50px;
  padding: 16px 44px;
  background-color: var(--e-global-color-primary, #421419);
  color: #FFFFFF;
  font-family: "Gallient", "Aboreto", serif;
  letter-spacing: 3px;
  box-shadow: 0 8px 22px rgb(66 20 25 / .18);
  transition: background-color .22s ease, transform .18s ease, box-shadow .22s ease;
}
.elementor-form .elementor-field-type-submit > .elementor-button[type="submit"]:hover,
.elementor-form .elementor-field-type-submit > .elementor-button[type="submit"]:focus,
.elementor-form .elementor-field-type-submit > .elementor-button:hover,
.elementor-form .elementor-field-type-submit > .elementor-button:focus {
  background-color: #64242C;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgb(66 20 25 / .26);
}
.elementor-form .elementor-field-type-submit {
  display: flex;
  justify-content: center;
  margin-top: 1.6rem;
}

/* De melding na het verzenden, in dezelfde taal als de rest. */
.elementor-form .bb-melding {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border-radius: 6px;
  font-size: 14.5px;
  text-align: center;
}
.elementor-form .bb-melding.elementor-message-success {
  background: rgb(66 20 25 / .06);
  border: 1px solid rgb(66 20 25 / .18);
  color: var(--e-global-color-primary, #421419);
}
.elementor-form .bb-melding.elementor-message-danger {
  background: rgb(179 69 63 / .08);
  border: 1px solid rgb(179 69 63 / .35);
  color: #8C2F2F;
}

@media (max-width: 767px) {
  .elementor-button-align-stretch .elementor-form .elementor-field-type-submit > .elementor-button[type="submit"],
  .elementor-form .elementor-field-type-submit > .elementor-button { width: 100%; flex-basis: 100%; }
  .bb-formgroep { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-form .elementor-field-textual,
  .elementor-form .elementor-button { transition: none; }
  .elementor-form .elementor-button:hover { transform: none; }
}

/* ── Veelgestelde vragen, per pagina ────────────────────────────────────────────
 * Een eigen band onderaan elke pagina, altijd op papier, zodat hij overal hetzelfde leest
 * ongeacht of de sectie erboven crème of bordeaux is.
 */
.bb-faq {
  background: var(--e-global-color-text, #F9F3E7);
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem clamp(3rem, 7vw, 5rem);
}
.bb-faq__binnen { max-width: 64ch; margin-inline: auto; }

.bb-faq__boven {
  margin: 0 0 .5rem;
  text-align: center;
  color: rgb(66 20 25 / .55);
  font-family: "Albert Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.bb-faq__kop {
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
  text-align: center;
  color: var(--e-global-color-primary, #421419);
  font-family: "Aboreto", serif;
  font-size: clamp(21px, 2.3vw, 28px);
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1.3;
}

.bb-faq__lijst { border-top: 1px solid rgb(66 20 25 / .16); }
.bb-faq__item { border-bottom: 1px solid rgb(66 20 25 / .16); }

.bb-faq__vraag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem .25rem;
  cursor: pointer;
  list-style: none;
  color: var(--e-global-color-primary, #421419);
  font-family: "Albert Sans", sans-serif;
  font-size: clamp(15px, 1.25vw, 16.5px);
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1.45;
}
.bb-faq__vraag::-webkit-details-marker { display: none; }
.bb-faq__vraag::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate .25s ease, translate .25s ease;
}
.bb-faq__item[open] .bb-faq__vraag::after { rotate: -135deg; translate: 0 2px; }
.bb-faq__vraag:hover { opacity: .75; }
.bb-faq__vraag:focus-visible { outline: 2px solid var(--e-global-color-primary, #421419); outline-offset: 3px; }

.bb-faq__antwoord { padding: 0 .25rem 1.35rem; }
.bb-faq__antwoord p {
  margin: 0;
  color: #3A2B2C;
  font-family: "Albert Sans", sans-serif;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: .3px;
}

@media (prefers-reduced-motion: reduce) { .bb-faq__vraag::after { transition: none; } }

/* ═══ DE VOETTEKST, OPNIEUW ════════════════════════════════════════════════════
 * Thierry, 18-9-2026: *"je hebt verder niks vernieuwd en mooier gemaakt aan de footer??"*.
 * Klopt: ik had er links en sluitingsdagen in gezet en verder niets aan het ONTWERP gedaan.
 *
 * Wat er mis was, gemeten: de hele voettekst is 497 px hoog met kolomkoppen van 23 px en
 * lijstregels die tegen elkaar aan liggen. Drie kolommen met exact hetzelfde gewicht, dus
 * je oog weet niet waar te beginnen. De sociale icoontjes meten 21 bij 21 px, minder dan
 * de helft van de 44 px die een vinger nodig heeft. En de regel "Design & Development by
 * Noble Matter" is 322 bij 14 px: een linkje van veertien pixels hoog.
 *
 * Wat er nu staat: meer lucht, koppen met een fijne streep eronder zodat de kolommen
 * leesbaar uit elkaar vallen, regels die ademen, een duidelijke scheiding naar de
 * onderbalk, en raakvlakken die groot genoeg zijn.
 */

footer .e-con-boxed,
footer > .elementor-element {
  --padding-top: clamp(2.75rem, 5vw, 4.25rem);
  --padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* ── kolomkoppen ────────────────────────────────────────────────────────────────
   ⚠️ Een streepje van 34 px aan de linkerkant leek eerst mooier, maar de drie kolomkoppen
   staan elk anders uitgelijnd binnen hun kolom, en dan zweeft zo'n streepje los van de
   tekst. Een lijn over de volle breedte van de kop volgt altijd de tekst, hoe hij ook
   staat. En alleen in de BOVENSTE rij: de copyrightregel is ook een heading en kreeg
   anders dezelfde streep. */
footer .elementor-element-a9afaae .elementor-widget-heading .elementor-heading-title {
  padding-bottom: .8rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid rgb(249 243 231 / .2);
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 2.6px;
}

/* ── de lijsten ───────────────────────────────────────────────────────────────── */
footer .elementor-icon-list-item {
  margin-bottom: .55rem;
  line-height: 1.55;
}
footer .elementor-icon-list-item:last-child { margin-bottom: 0; }
footer .elementor-icon-list-icon { opacity: .55; }
footer .elementor-icon-list-text { letter-spacing: .6px; }

/* De sluitingsdagen zijn een ander soort feit dan een openingsuur: net iets stiller. */


/* ── de onderbalk ─────────────────────────────────────────────────────────────── */
footer .elementor-element:has(> .e-con-inner > .elementor-widget-nav-menu),
footer .bb-onderbalk {
  border-top: 1px solid rgb(249 243 231 / .16);
}

/* ── raakvlakken ──────────────────────────────────────────────────────────────── */
/* ⚠️ De maat komt van `--icon-size` in `.elementor-icon.elementor-social-icon`, met een
   berekening eromheen. Een kale `width` verliest daarvan; de variabele zetten wint wel.
   Gemeten was 26 bij 26 px, minder dan de helft van de 44 px die een vinger nodig heeft. */
footer .elementor-icon.elementor-social-icon {
  width: 44px;
  height: 44px;
  font-size: 18px;
  transition: transform .2s ease, opacity .2s ease;
}
footer .elementor-social-icon:hover { transform: translateY(-2px); }
footer .elementor-social-icon svg { width: 17px; height: 17px; }

/* De credit van Noble Matter: leesbaar en aanklikbaar in plaats van een streepje van
   veertien pixels hoog. */
footer a[href*="noblematter"],
footer a[href*="creativehero"] {
  display: inline-block;
  padding: .45rem 0;
  letter-spacing: 1.4px;
  opacity: .62;
  transition: opacity .2s ease;
}
footer a[href*="noblematter"]:hover,
footer a[href*="creativehero"]:hover { opacity: 1; }

/* ── de reserveerknop in de voet ──────────────────────────────────────────────── */
footer .elementor-button {
  min-height: 46px;
  padding: 13px 34px;
  transition: transform .2s ease, box-shadow .2s ease;
}
footer .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(0 0 0 / .22); }

@media (max-width: 767px) {
  /* Op een telefoon staan de kolommen onder elkaar: dan hoort de streep onder de kop
     ook gecentreerd, net als de tekst. */
  footer .elementor-widget-heading .elementor-heading-title { text-align: center; }
  footer .elementor-widget-heading .elementor-heading-title::after { left: 50%; translate: -50% 0; }
  footer .elementor-icon-list-items { align-items: center; }
  footer .elementor-icon.elementor-social-icon { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  footer .elementor-social-icon,
  footer .elementor-button { transition: none; }
  footer .elementor-social-icon:hover,
  footer .elementor-button:hover { transform: none; }
}

/* De juridische links onder de copyrightregel. Stil, maar vindbaar. */


/* ⚠️ Restanten van het zwevende label opruimen. De labels staan nu BOVEN het veld, dus
   een achtergrondkleurtje achter het label hoort er niet meer bij: op TIJDSTIP en DATUM
   bleef daardoor een bordeaux chipje staan. */
.elementor .elementor-widget-form .elementor-field-group > .elementor-field-label {
  background: none;
  top: auto;
  translate: none;
  inset-inline-start: auto;
  text-transform: uppercase;
}

/* De placeholder herhaalde het label ("NAAM" boven, "NAAM" in het veld). Weg ermee; hij
   komt terug zodra het veld focus heeft en dan helpt hij nog met het formaat. */
.elementor .elementor-widget-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual::placeholder { color: transparent; }
.elementor .elementor-widget-form .elementor-form .elementor-field-group:focus-within .elementor-field.elementor-field-textual::placeholder { color: rgb(66 20 25 / .32); }


/* ═══ LICHTE GROND: DE KIT IS VOOR EEN DONKERE SITE GESCHREVEN ═══════════════════
 * Thierry meldde op 18-9-2026 drie dingen los van elkaar: de kop "Veelgestelde Vragen"
 * was onleesbaar, de labels op het contactformulier ook, en op /cookiebeleid/ zag je
 * "helemaal niks". Het zijn niet drie problemen maar één.
 *
 * ✓ Gemeten in de spiegel-CSS:
 *     .elementor-kit-42 h2 { color:#FFF9F5 }                         (0,1,1)
 *     .elementor-kit-42 h3 { color:#FFF9F5 }                         (0,1,1)
 *     .elementor-21 …-b0684b3 .elementor-field-group > label
 *         { color: var(--e-global-color-accent) }  en accent = #FFFFFF   (0,4,0)
 *
 * Op de live site klopt dat: élke kop staat daar op een bordeaux band, dus crème is de
 * juiste kleur. Alles wat ik op een PAPIEREN grond zet erft dus onzichtbare kleuren.
 * Gemeten contrast vóór deze regels: 1,06:1 op de FAQ-kop, 1,11:1 op de labels,
 * en op /cookiebeleid/ zelfs papier op papier.
 *
 * ⚠️ De verleiding is om per geval een kleurtje te forceren. Dat is precies hoe die vier
 * concurrerende labelregels hierboven zijn ontstaan, waarvan er één (0,3,0) was en dus
 * kansloos tegen de (0,4,0) van de spiegel. Daarom hier één blok, met de gewichten
 * uitgerekend en erbij genoteerd.
 */

/* ── de FAQ-kop ────────────────────────────────────────────────────────────────
   (0,2,0) verslaat de (0,1,1) van `.elementor-kit-42 h2`. Zonder de tweede klasse
   nam het kit niet alleen de kleur over maar ook 50px Alice in plaats van Aboreto. */
.bb-faq .bb-faq__kop {
  color: var(--e-global-color-primary, #421419);
  font-family: "Aboreto", serif;
  font-size: clamp(21px, 2.3vw, 28px);
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1.3;
  text-transform: none;
}
.bb-faq .bb-faq__boven { color: rgb(66 20 25 / .62); }
.bb-faq .bb-faq__vraag { color: var(--e-global-color-primary, #421419); }
.bb-faq .bb-faq__antwoord p { color: #3A2B2C; }
.bb-faq .bb-faq__antwoord a { color: var(--e-global-color-primary, #421419); }

/* ── de labels op het contactformulier ─────────────────────────────────────────
   Vijf klassen plus het element = (0,5,1), ruim boven de (0,4,0) van de spiegel.
   `label.elementor-field-label` en niet alleen de klasse: dat scheelt het laatste
   punt zonder dat de selector nog langer wordt. */
.elementor .elementor-widget-form .elementor-form .elementor-field-group > label.elementor-field-label,
.elementor .elementor-widget-form .elementor-form .elementor-field-subgroup label.elementor-field-option {
  color: rgb(66 20 25 / .78);
}
/* Het sterretje bij een verplicht veld mocht niet knalrood blijven op papier. */
.elementor .elementor-widget-form .elementor-form .elementor-mark-required .elementor-field-label::after {
  color: rgb(100 36 44 / .8);
}

/* ── kale pagina's: cookiebeleid en alles wat nog zonder Elementor-ontwerp komt ──
 * Hier ging het dubbel mis. De koppen erfden het crème van het kit, de lopende tekst
 * erfde de crème bodykleur, en er stond geen enkele containerregel: de tekst plakte
 * tegen de linkerrand over de volle 1440 px.
 *
 * `body.bb-eenvoudig .page-content h2` = (0,2,2) en verslaat het kit ruim.
 */
body.bb-eenvoudig .page-content {
  color: #3A2B2C;
  font-family: "Albert Sans", sans-serif;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .3px;
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
/* De leesbreedte. Zonder dit liep een regel over de volle schermbreedte door. */
body.bb-eenvoudig .page-content > *,
body.bb-eenvoudig .page-content .cmplz-document {
  max-width: 68ch;
  margin-inline: auto;
  padding-inline: 1.25rem;
  box-sizing: border-box;
}
body.bb-eenvoudig .page-content h2,
body.bb-eenvoudig .page-content h3,
body.bb-eenvoudig .page-content h4 {
  color: var(--e-global-color-primary, #421419);
  font-family: "Aboreto", serif;
  font-weight: 400;
  letter-spacing: 1.4px;
  line-height: 1.35;
  text-transform: none;
}
body.bb-eenvoudig .page-content h2 { font-size: clamp(19px, 2vw, 23px); margin: 2.6rem 0 .7rem; }
body.bb-eenvoudig .page-content h3 { font-size: clamp(16px, 1.6vw, 18px); margin: 2rem 0 .5rem; }
body.bb-eenvoudig .page-content h4 { font-size: 15px; margin: 1.5rem 0 .4rem; }
body.bb-eenvoudig .page-content p,
body.bb-eenvoudig .page-content li,
body.bb-eenvoudig .page-content td,
body.bb-eenvoudig .page-content th,
body.bb-eenvoudig .page-content dd,
body.bb-eenvoudig .page-content dt { color: #3A2B2C; }
body.bb-eenvoudig .page-content p { margin: 0 0 1rem; }
body.bb-eenvoudig .page-content ul,
body.bb-eenvoudig .page-content ol { margin: 0 0 1.2rem; padding-inline-start: 1.3rem; }
body.bb-eenvoudig .page-content li { margin-bottom: .35rem; }
body.bb-eenvoudig .page-content a {
  color: var(--e-global-color-d3ae19d, #64242C);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.bb-eenvoudig .page-content strong { color: var(--e-global-color-primary, #421419); font-weight: 600; }

/* De cookietabellen van Complianz komen kaal binnen: geen randen, geen ruimte, en op
   een telefoon lopen ze breder dan het scherm. */
body.bb-eenvoudig .page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: .6rem 0 1.6rem;
  font-size: 13.5px;
}
body.bb-eenvoudig .page-content th,
body.bb-eenvoudig .page-content td {
  padding: .55rem .7rem;
  border-bottom: 1px solid rgb(66 20 25 / .14);
  text-align: start;
  vertical-align: top;
}
body.bb-eenvoudig .page-content th { font-weight: 600; white-space: nowrap; }
/* ⚠️ De wrapper krijgt de scrollbalk, niet de pagina zelf. Zonder dit schoof het hele
   document zijwaarts op een telefoon. */
body.bb-eenvoudig .page-content .cmplz-document,
body.bb-eenvoudig .page-content .cmplz-cookies-overview { overflow-x: auto; }


/* ═══ DE KNOP, ÉÉN KEER ═════════════════════════════════════════════════════════
 * Thierry, 18-9-2026: *"ik zou hier en daar nog buttons bij zetten"*.
 *
 * ✓ Gemeten op de LIVE site (a.elementor-button op /over-ons/): witte pil, tekst
 *   rgb(66,20,25), border-radius 50px, padding 12px 24px, Gallient 15px/800,
 *   letter-spacing 3px, uppercase.
 *
 * Die maten worden hier letterlijk overgenomen, want de vorige ronde ging juist mis op
 * knoppen die "ongeveer" leken. Alleen de kleur verschilt per ondergrond: de witte pil
 * van de site staat altijd op bordeaux, en wit op papier haalt 1,09:1. Op een papieren
 * grond dus de gevulde bordeaux variant, precies zoals de verzendknop van het formulier.
 */
.bb-knop,
a.bb-knop {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 50px;
  border: 1px solid transparent;
  font-family: "Gallient", "Aboreto", serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 3px;
  /* ⚠️ 1.3 en niet 1. Met regelhoogte 1 werd de knop 41 px hoog, en onder 44 px wordt
     mistikken op een telefoon merkbaar. De knop van de site haalt 44 px met dezelfde
     padding van 12px, dus daar zit het verschil in de regelhoogte. Gemeten na deze
     wijziging: 45 px. */
  line-height: 1.3;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
/* ⚠️ Overal `.bb-knop.bb-knop--x` en niet alleen `.bb-knop--x`.
   ✓ Gemeten: `.elementor-kit-42 a { color: var(--e-global-color-text) }` is (0,1,1) en
   wint van een enkele klasse. Gevolg op de eerste versie van deze knoppen: BEL ONS en
   PRIVATE DINING stonden crème op een crème grond, dus onzichtbaar, terwijl de gevulde
   variant er nog mee wegkwam omdat crème op bordeaux toevallig leest. Twee klassen =
   (0,2,0) en dat hangt niet van de volgorde van de stylesheets af. */
.bb-knop.bb-knop--vol {
  background-color: #64242C;
  color: #FFFFFF;
  border-color: #64242C;
}
.bb-knop.bb-knop--vol:hover,
.bb-knop.bb-knop--vol:focus-visible {
  background-color: var(--e-global-color-primary, #421419);
  border-color: var(--e-global-color-primary, #421419);
  color: #FFFFFF;
}
.bb-knop.bb-knop--lijn {
  background-color: transparent;
  color: var(--e-global-color-primary, #421419);
  border-color: rgb(66 20 25 / .45);
}
.bb-knop.bb-knop--lijn:hover,
.bb-knop.bb-knop--lijn:focus-visible {
  background-color: var(--e-global-color-primary, #421419);
  border-color: var(--e-global-color-primary, #421419);
  color: #FFFFFF;
}
/* Op een bordeaux band draait het om: daar is de witte pil van de site de juiste. */
.bb-opdonker .bb-knop.bb-knop--vol {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--e-global-color-primary, #421419);
}
.bb-opdonker .bb-knop.bb-knop--vol:hover,
.bb-opdonker .bb-knop.bb-knop--vol:focus-visible { background-color: #F9F3E7; border-color: #F9F3E7; }
.bb-opdonker .bb-knop.bb-knop--lijn { color: #FFF9F5; border-color: rgb(255 249 245 / .5); }
.bb-opdonker .bb-knop.bb-knop--lijn:hover,
.bb-opdonker .bb-knop.bb-knop--lijn:focus-visible { background-color: #FFF9F5; border-color: #FFF9F5; color: var(--e-global-color-primary, #421419); }

.bb-knop:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bb-knop { transition: none; } }

/* ── de actieregel onder elke FAQ ────────────────────────────────────────────── */
/* ⚠️ Geen border-top hier. De lijst sluit al af met de rand onder haar laatste item, en
   een tweede lijn erboven las als een lege rij van een centimeter hoog. */
.bb-faq__slot {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  text-align: center;
}
.bb-faq__slottekst {
  margin: 0 0 1.1rem;
  color: rgb(66 20 25 / .72);
  font-family: "Albert Sans", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .3px;
}
.bb-faq__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}
@media (max-width: 479px) {
  /* Twee knoppen naast elkaar worden op 390px allebei te smal om te raken. */
  .bb-faq__knoppen { flex-direction: column; }
  .bb-faq__knoppen .bb-knop { width: 100%; box-sizing: border-box; }
}

/* ── een actieregel binnen een gespiegelde sectie ────────────────────────────── */
.bb-sectieknop {
  margin-top: clamp(1.4rem, 2.5vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
@media (max-width: 767px) {
  .bb-sectieknop { justify-content: center; }
  .bb-sectieknop .bb-knop { width: 100%; box-sizing: border-box; }
}
.bb-sectieknop--midden {
  justify-content: center;
  margin: clamp(2rem, 4vw, 3rem) auto clamp(1rem, 2vw, 1.5rem);
  padding-inline: 1.25rem;
}


/* ═══ RAAKVLAKKEN OP EEN TELEFOON ═══════════════════════════════════════════════
 * ✓ Gemeten op 390 px, 18-9-2026: elf klikbare dingen kleiner dan 44 px. De ergste zijn
 *   de contactgegevens in de voettekst: het telefoonnummer is 150x24. Precies het ding
 *   waar iemand op tikt om te bellen.
 *
 *     a.cmplz-link (cookiebeleid in de banner)  108x14
 *     a.elementor-icon (sociale iconen)          26x26
 *     a.bb-contactlink ×3 (adres, tel, mail)     24 hoog
 *     button.sbi_load_btn / sbi_follow_btn       34 hoog
 *     a in p.bb-juridisch                        108x29
 *     a in de credit-regel                       311x32
 *     a.bb-overslaan (overslaan-link)            173x42
 *
 * ⚠️ Alleen onder `pointer: coarse`. Op een muis is 24 px prima te raken en dan hoeft de
 * opmaak niet te verschuiven. En het raakvlak wordt vergroot met een onzichtbare ::after,
 * niet met padding: padding duwt de voettekst uit elkaar en dat is zichtbaar.
 */
@media (pointer: coarse) {
  .cmplz-cookiebanner a.cmplz-link,
  .bb-juridisch a,
  .elementor-icon-wrapper > a.elementor-icon,
  .sbi_load_btn, .sbi_follow_btn > a {
    position: relative;
  }
  /* ⚠️ `inset` met negatieve waarden: het vlak groeit naar buiten en duwt niets weg.
     De horizontale groei is kleiner dan de verticale, anders overlappen twee links die
     naast elkaar staan elkaar en tik je de verkeerde aan. */
  .cmplz-cookiebanner a.cmplz-link::after,
  .bb-juridisch a::after,
  .elementor-icon-wrapper > a.elementor-icon::after,
  .sbi_load_btn::after, .sbi_follow_btn > a::after {
    content: "";
    position: absolute;
    inset: -11px -6px;
  }

  /* De contactregels in de voettekst krijgen wél echte hoogte. Drie regels van 24 px
     onder elkaar kun je niet met een onzichtbaar vlak oprekken zonder dat ze elkaar
     overlappen: dan bel je terwijl je een mail wou sturen.

     ⚠️ De ruimte hoort op de LINK, niet op de `li`. Eerste poging zette 9 px op de `li`:
     de rij werd hoger maar de link bleef 24 px, dus tikken in die extra ruimte deed nog
     steeds niets. Gemeten met elementFromPoint. */
  .bb-contactlink {
    display: inline-block;
    padding-block: 11px;   /* 24 + 22 = 46 px, gelijk aan de knoppen */
  }

  /* De overslaan-link zat op 42 px, net eronder. */
  .bb-overslaan { padding-block: 12px; }
}


/* ── DE VOETTEKST OP EEN TELEFOON ───────────────────────────────────────────────
 * Thierry, 18-9-2026: *"footer moet beter op mobile, ook die icons staan niet netjes
 * naast de woorden"*.
 *
 * ✓ Gemeten op 390 px, de x-positie van elk icoon:
 *     openingsuren   65 · 10 · 68
 *     contact        37 · 106 · 52
 *     parkings      113 · 83 · 83
 *
 * Drie rijen, drie verschillende posities. De oorzaak staat op de `li`:
 * `justify-content: center`. Elke regel centreert zichzelf, dus hoe langer de tekst,
 * hoe verder het icoon naar links schuift. Op een breed scherm valt dat niet op omdat
 * alles daar op één regel past; op 390 px zwalkt het.
 *
 * De oplossing is niet "centreer beter" maar "centreer de LIJST en lijn de RIJEN uit".
 * De lijst krimpt naar haar breedste regel en staat gecentreerd; de rijen beginnen
 * allemaal links in die lijst. Eén kolom iconen, één kolom tekst.
 *
 * ⚠️ Alleen onder 768 px. Op desktop past elke regel op één lijn en verandert er niets.
 */
@media (max-width: 767px) {
  /* ⚠️ Eén uitlijnas voor de hele voettekst, geen `fit-content` per blok.
     ✓ Met fit-content kreeg elk blok zijn eigen linkerrand: de uren op x=10, de
     contactgegevens op x=37, de parkings op x=83. Binnen een blok stond het netjes,
     maar over de drie blokken heen zag je een rafelige rand. Eén vaste breedte zet ze
     op dezelfde as, en dan loopt er één kolom iconen door de hele voettekst. */
  /* ⚠️ Eerst de WIDGET op volle breedte, dan pas de lijst.
     ✓ Gemeten: de drie widgets zijn zelf 370, 316 en 224 px breed, want Elementor zet
     per element een breedte. Een lijst kan niet breder dan haar widget, dus de parkings
     bleven op x=83 staan terwijl de andere twee al op 35 en 37 stonden.
     De per-element regels zijn (0,3,0); met drie klassen plus `footer` kom ik op (0,3,1). */
  footer .elementor-widget.elementor-widget-icon-list.elementor-mobile-align-center,
  .elementor-location-footer .elementor-widget.elementor-widget-icon-list.elementor-mobile-align-center {
    width: 100%;
    max-width: 100%;
  }
  footer .elementor-icon-list-items,
  .elementor-location-footer .elementor-icon-list-items {
    width: 100%;
    max-width: 20rem;
    margin-inline: auto;
  }

  /* De regel "Maandag en dinsdag gesloten" draagt geen icoon en begon dus tegen de
     linkerrand, een tandje links van de tekstkolom. 24 px is precies de breedte van
     een icoon plus de tussenruimte, gemeten: icoon op x=10, tekst op x=34. */

  /* ⚠️ De klasse `elementor-mobile-align-center` staat er bewust IN.
     ✓ Gemeten met CSS.getMatchedStylesForNode:
       `.elementor-widget.elementor-mobile-align-center .elementor-icon-list-item
        { justify-content: center }`  = (0,3,0)
     Mijn eerste poging was `footer .elementor-icon-list-item` = (0,1,1) en verloor.
     Met dezelfde twee klassen plus `footer` kom ik op (0,3,1) en win ik nipt, zonder
     `!important` en zonder een selector van drie regels lang. */
  footer .elementor-widget.elementor-mobile-align-center .elementor-icon-list-item,
  .elementor-location-footer .elementor-widget.elementor-mobile-align-center .elementor-icon-list-item,
  footer .elementor-icon-list-item,
  .elementor-location-footer .elementor-icon-list-item {
    justify-content: flex-start;
    text-align: start;
    /* Het icoon bij de EERSTE regel, niet verticaal gecentreerd tegen twee regels.
       Elementor leest dit uit zijn eigen variabele, dus die zetten is netter dan zijn
       `align-items` overschrijven: `align-items: var(--icon-vertical-align, center)`. */
    --icon-vertical-align: flex-start;
  }
  footer .elementor-icon-list-icon,
  .elementor-location-footer .elementor-icon-list-icon {
    /* Optisch op de x-hoogte van de eerste regel, niet op de bovenkant van het regelvak. */
    margin-top: .2em;
    flex: 0 0 auto;
  }
  /* Een doorlopende regel breekt nu onder de tekst af en niet onder het icoon: de tekst
     is een eigen flex-item, dus de tweede regel begint waar de eerste begint. */
  footer .elementor-icon-list-text,
  .elementor-location-footer .elementor-icon-list-text { text-align: start; }

  /* Wat ruimte terugwinnen. De blokken stonden ver uit elkaar, waardoor je op een
     telefoon drie schermen moet scrollen voor een adres en een telefoonnummer. */
  footer .elementor-widget-heading,
  .elementor-location-footer .elementor-widget-heading { margin-bottom: .35rem; }
  footer .elementor-icon-list-items,
  .elementor-location-footer .elementor-icon-list-items { margin-block: .2rem; }
}
.elementor-form .bb-melding[data-soort="goed"] {
  background: rgb(66 20 25 / .07);
  color: var(--e-global-color-primary, #421419);
  border: 1px solid rgb(66 20 25 / .2);
}
.elementor-form .bb-melding[data-soort="fout"] {
  background: rgb(150 40 40 / .08);
  color: #8A2020;
  border: 1px solid rgb(138 32 32 / .28);
}
.elementor-form .bb-melding[data-soort="bezig"] {
  background: transparent;
  color: rgb(66 20 25 / .7);
  border: 1px solid transparent;
}


/* ── Twee dingen die op DESKTOP ook nog in de voettekst zaten ────────────────────
 *
 * 1. Het kalendericoon bij "Zat & zon 12u00 tot 14u00 & 18u00 tot 00u00" zweeft ook op
 *    een breed scherm tussen de twee tekstregels in, want die regel wrapt daar ook.
 *    Elementor leest de uitlijning uit zijn eigen variabele, dus die zetten volstaat;
 *    op regels die niet wrappen verandert er niets, want daar valt boven samen met midden.
 *
 * 2. De zwevende taalkiezer van GTranslate staat linksonder vastgeprikt en lag over
 *    "Design & development by Noble Matter". Ruimte onderaan de voettekst lost dat op
 *    zonder aan de widget zelf te komen.
 */
footer .elementor-icon-list-item,
.elementor-location-footer .elementor-icon-list-item { --icon-vertical-align: flex-start; }

footer .elementor-icon-list-icon,
.elementor-location-footer .elementor-icon-list-icon { margin-top: .2em; }

/* ⛔ Stond hier voor de gespiegelde voettekst. Die is vervangen door eigen opmaak
   (assets/voettekst.css) en daar zit de ruimte voor de taalkiezer al in. */