/* offerte-wizard.css — alle stijlen specifiek voor de aanvraagwizard op
   contact.html. Losgetrokken uit contact.html (was inline <style>) omdat het
   bestand door de categorie-afhankelijke vragen fors is gegroeid. */

/* ── Hero achtergrond met banner ── */
.pagina-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--kleur-bg-primair);
  --hero-achtergrond: url("Logo's/Harmann luxe banner groot!.webp");
}

.pagina-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-achtergrond);
  background-size: cover;
  background-position: center center;
  opacity: 0.22;
  z-index: 0;
  transition: opacity 0.4s ease;
  /* Zeer langzame, continue "ademende" zoom — geeft de hero rustig leven
     i.p.v. een statisch donker vlak, zonder helderheid/kleur te wijzigen. */
  animation: paginaHeroAdemen 26s ease-in-out infinite;
}
@keyframes paginaHeroAdemen {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .pagina-hero::before { animation: none; }
}

/* Verticale vignette: donker in het midden, helder naar boven en onder */
.pagina-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 120% 42% at center,
    rgba(10, 8, 6, 0.82) 0%,
    rgba(10, 8, 6, 0.45) 55%,
    rgba(10, 8, 6, 0.0) 100%
  );
  z-index: 0;
}

.pagina-hero > * {
  position: relative;
  z-index: 1;
}

.pagina-hero__label {
  color: #c9975a;
  text-shadow:
    0 0 12px rgba(201, 151, 90, 0.9),
    0 0 28px rgba(201, 151, 90, 0.5);
}

.pagina-hero__titel {
  color: #ffffff;
  text-shadow:
    0 0 24px rgba(255, 255, 255, 0.45),
    0 0 56px rgba(200, 180, 150, 0.20);
}

.pagina-hero__tekst {
  color: rgba(240, 235, 227, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

/* Compacter dan de standaard .pagina-hero: de keuzetegels hieronder zijn
   het eigenlijke doel van deze pagina en moeten zo snel mogelijk in beeld
   komen i.p.v. achter een volle introsectie verstopt te zitten. */
.pagina-hero--compact {
  padding: calc(var(--header-hoogte) + 36px) 24px 28px;
}
.pagina-hero--compact .pagina-hero__tekst { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ── Keuze-sectie (licht) ── */
.contact-keuze {
  background: #f0ebe3;
  /* Ruimere verticale ademruimte + iets meer zijmarge dan de standaard
     sectie, zodat de bredere tegel-rasters hieronder niet tot tegen de
     randen van het scherm lopen op grote schermen. */
  padding: 48px 32px 68px;
}
.contact-keuze__inner {
  /* Zelfde breedte als de rest van de site (var(--max-breedte), zie
     .sectie__inner) i.p.v. een smallere eigen kolom — anders oogt deze
     sectie onnodig krap tussen de volle-breedte hero erboven en het
     formulier eronder, met veel ongebruikte ruimte links/rechts. */
  max-width: var(--max-breedte);
  margin: 0 auto;
}
.contact-keuze__stap {
  font-family: var(--font-tekst);
  font-size: 9px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #8b6f47;
  margin-bottom: 10px;
}
.contact-keuze__titel {
  font-family: var(--font-titel);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 300;
  color: #2b2620;
  letter-spacing: 1.5px;
  margin-bottom: 40px;
  max-width: 640px;
}

/* ── Formulier op lichte achtergrond ── */
.contact-sectie-licht {
  background: #f5f0eb;
  padding: 64px 0;
}
.contact-sectie-licht .sectie__titel { color: #2b2620; }
.contact-sectie-licht .sectie__label { color: #8b6f47; }
.contact-sectie-licht .scheidingslijn { background: #cec5b9; }
.contact-sectie-licht .formulier__label { color: #4a3e34; }
.contact-sectie-licht .formulier__optioneel { color: #9e9087; }

#praktischVelden { display: flex; flex-direction: column; gap: 20px; }
.formulier__adres-status {
  font-family: var(--font-tekst); font-size: 13px; font-style: italic;
  color: #9e9087; margin: -8px 0 0;
}
.formulier__adres-status--gevonden { color: #6b8f6b; font-style: normal; }
.contact-sectie-licht .formulier__input,
.contact-sectie-licht .formulier__textarea {
  background: #fff !important;
  color: #2b2620 !important;
  border-color: #cec5b9;
  backdrop-filter: none !important;
}
.contact-sectie-licht .formulier__input::placeholder,
.contact-sectie-licht .formulier__textarea::placeholder { color: #b5a898; }
.contact-sectie-licht .formulier__input:focus,
.contact-sectie-licht .formulier__textarea:focus { border-color: #8b6f47; }
.contact-sectie-licht .contact-info__label { color: #8b6f47; }
.contact-sectie-licht .contact-info__waarde { color: #2b2620; }
.contact-sectie-licht .contact-info__link { color: #2b2620; }
.contact-sectie-licht .contact-info__link:hover { color: #8b6f47; }
.contact-sectie-licht .contact-vrijblijvend { border-color: rgba(139,111,71,0.25); }
.contact-sectie-licht .contact-vrijblijvend p { color: #5c4f42; }

/* ── Geselecteerd onderwerp badge ── */
.contact-onderwerp-badge {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(139,111,71,0.1);
  border-left: 2px solid #8b6f47;
  margin-bottom: 24px;
  font-family: var(--font-tekst);
  font-size: 12px;
  color: #5c4f42;
}
.contact-onderwerp-badge.zichtbaar { display: flex; }
.contact-onderwerp-badge strong { color: #2b2620; }
.contact-onderwerp-badge__wijzig {
  flex-shrink: 0;
  font-family: var(--font-tekst);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #8b6f47;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.contact-onderwerp-badge__wijzig:hover { color: #2b2620; }

/* WhatsApp-knop staat hier bovenaan de zijbalk, direct onder een korte
   introzin — de 52px margin-top uit de gedeelde .whatsapp-knop-stijl
   (bedoeld voor de vorige positie, onderaan de blokken) past hier niet. */
#contact-whatsapp { margin-top: 2px; }

/* ── Context bevestiging ── */
.contact-context__bevestiging {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  background: rgba(139,111,71,0.09);
  border-left: 3px solid #8b6f47;
  margin-bottom: 18px;
}
.contact-context__label {
  font-family: var(--font-tekst);
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #8b6f47;
}
.contact-context__waarde {
  font-family: var(--font-titel);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 300;
  color: #2b2620;
  letter-spacing: 1.5px;
}
.contact-context__anders {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-tekst);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #8b6f47;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 28px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.contact-context__anders:hover { color: #2b2620; }
.anders-pijl { transition: transform 0.25s ease; flex-shrink: 0; }
.contact-context__anders[aria-expanded="true"] .anders-pijl { transform: rotate(180deg); }

/* ── Gefaseerde keuze-wizard (kaarten i.p.v. dropdown) ── */
.contact-stap { display: none; }
.contact-stap.actief { display: block; animation: stapIn 0.25s ease both; }
@keyframes stapIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.contact-keuze__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  /* Breder dan voorheen (780px) zodat de tegels de nu-bredere
     .contact-keuze__inner (var(--max-breedte)) goed opvullen i.p.v. als
     smal eilandje in veel lege ruimte te zweven. */
  max-width: 1100px;
  transition: opacity 0.2s ease;
}
.contact-keuze__grid--4 { grid-template-columns: repeat(4, 1fr); }
.contact-keuze__grid--5 { grid-template-columns: repeat(5, 1fr); }
.contact-keuze__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 820px; }
.contact-keuze__grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 940px; }
.contact-keuze__grid--6 { grid-template-columns: repeat(3, 1fr); }
.contact-keuze__grid--7 { grid-template-columns: repeat(4, 1fr); }

/* Tekst-tegel (Stap 3: "Ik wil eerst praten" / "Ik heb al een idee") —
   bewust zonder foto (een abstracte keuze, geen sfeerbeeld nodig), maar wel
   getild naar dezelfde ronde/levende taal als de fotokaarten — zie
   [[feedback_visuele_stijl_wizardtegels]]. */
.contact-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 26px;
  background: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-tekst);
  box-shadow: 0 1px 3px rgba(43,38,32,0.08);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
}
.contact-tile:hover, .contact-tile:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(43,38,32,0.14);
}
.contact-tile:focus-visible { outline: 2px solid #8b6f47; outline-offset: 3px; }
.contact-tile__icoon { color: #8b6f47; flex-shrink: 0; }
.contact-tile__titel { font-family: var(--font-titel); font-size: 20px; font-weight: 500; color: #2b2620; letter-spacing: 0.3px; }
.contact-tile__sub { font-size: 12.5px; color: #8b7d6f; line-height: 1.65; }
.contact-tile__lijn {
  width: 18px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, #8b6f47, rgba(139,111,71,0));
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
}
.contact-tile:hover .contact-tile__lijn, .contact-tile:focus-visible .contact-tile__lijn { width: 40px; }

@media (prefers-reduced-motion: reduce) {
  .contact-tile, .contact-tile__lijn { transition: none !important; }
  .contact-tile:hover { transform: none; }
}

/* ── Stap 1: hoofdkeuze — drie gelijkwaardige, ruim afgeronde fotokaarten.
   Elke foto ademt continu heel langzaam (subtiele, nooit stilstaande
   beweging), en een cognackleurige lijn onder de titel groeit bij hover —
   de "bewegende lijn" als terugkerend, levend detail. Typografie varieert
   bewust per kaart (cursief/rechtop-serif/uitgesponnen hoofdletters, allemaal
   binnen de twee vaste Harmann-lettertypes) zodat de tekst opvalt en de drie
   kaarten samen ritme hebben i.p.v. drie identieke tekstvakken. ── */
.stap1-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}
.stap1-tegel {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: none;
  border-radius: 28px;
  cursor: pointer;
  text-align: left;
  padding: 0;
  aspect-ratio: 3 / 4;
  background: #2b2620;
  font-family: var(--font-tekst);
  box-shadow: 0 1px 3px rgba(43,38,32,0.1);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease;
}
.stap1-tegel:hover { transform: translateY(-6px); box-shadow: 0 24px 46px rgba(43,38,32,0.24); }
.stap1-tegel:focus-visible { outline: 2px solid #8b6f47; outline-offset: 3px; }

.stap1-tegel__foto {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.8);
  animation: stap1Ademen 16s ease-in-out infinite;
  transition: filter 0.5s ease;
}
.stap1-tegel:nth-child(2) .stap1-tegel__foto { animation-delay: -5s; }
.stap1-tegel:nth-child(3) .stap1-tegel__foto { animation-delay: -10s; }
.stap1-tegel:hover .stap1-tegel__foto { filter: brightness(0.96); }
@keyframes stap1Ademen {
  0%, 100% { transform: scale(1.02); }
  50%      { transform: scale(1.1); }
}

.stap1-tegel__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(18,15,11,0.86) 0%, rgba(18,15,11,0.3) 48%, rgba(18,15,11,0.03) 100%);
  transition: opacity 0.4s ease;
}
.stap1-tegel:hover .stap1-tegel__overlay { opacity: 0.62; }

.stap1-tegel__inhoud {
  position: relative; z-index: 2;
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
.stap1-tegel__titel {
  color: #f8f5f1;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  line-height: 1.05;
}
/* Drie eigen typografische karakters — variatie binnen de twee vaste lettertypes */
.stap1-tegel__titel--een  { font-family: var(--font-titel); font-style: italic; font-weight: 400; font-size: clamp(30px, 3.6vw, 42px); letter-spacing: 0.2px; }
.stap1-tegel__titel--twee { font-family: var(--font-titel); font-weight: 500; font-size: clamp(26px, 3vw, 34px); letter-spacing: 0.3px; }
.stap1-tegel__titel--drie { font-family: var(--font-tekst); font-weight: 400; text-transform: uppercase; font-size: 19px; letter-spacing: 3.5px; }

.stap1-tegel__lijn {
  width: 32px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, #c9975a, rgba(201,151,90,0));
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
}
.stap1-tegel:hover .stap1-tegel__lijn { width: 64px; }

.stap1-tegel__sub {
  font-size: 13.5px; line-height: 1.65; color: rgba(248,245,241,0.85); max-width: 260px;
}

@media (max-width: 768px) {
  .stap1-grid { grid-template-columns: 1fr; max-width: 440px; gap: 16px; }
  .stap1-tegel { aspect-ratio: 16 / 10; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .stap1-tegel__foto { animation: none; }
  .stap1-tegel, .stap1-tegel__foto, .stap1-tegel__overlay, .stap1-tegel__lijn { transition: none !important; }
  .stap1-tegel:hover { transform: none; }
}

/* Categorie-tegel — fotogedragen keuzekaart voor Stap 2 (TV-wand/TV-meubel/
   Kastenwand/Hoekmeubel of de collectie-categorieën). Getild naar dezelfde
   goedgekeurde taal als .stap1-tegel (afgerond, ademende foto, groeiende
   lijn) — zie [[feedback_visuele_stijl_wizardtegels]] — plus een eigen
   extra laag die bij deze rastervorm past: een hover-onthulde regel die
   uitnodigt tot kiezen, net als de .keuze-panel-tegels op maatwerk.html. */
.categorie-tegel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: none;
  border-radius: 22px;
  cursor: pointer;
  text-align: center;
  padding: 0 14px 22px;
  font-family: var(--font-tekst);
  box-shadow: 0 1px 3px rgba(43,38,32,0.1);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
}
.categorie-tegel:hover, .categorie-tegel:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(43,38,32,0.2);
}
.categorie-tegel:focus-visible { outline: 2px solid #8b6f47; outline-offset: 3px; }

.categorie-tegel__foto {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.86);
  animation: catTegelAdemen 17s ease-in-out infinite;
  transition: filter 0.4s ease;
}
.categorie-tegel:nth-child(2) .categorie-tegel__foto { animation-delay: -4s; }
.categorie-tegel:nth-child(3) .categorie-tegel__foto { animation-delay: -8s; }
.categorie-tegel:nth-child(4) .categorie-tegel__foto { animation-delay: -12s; }
.categorie-tegel:nth-child(5) .categorie-tegel__foto { animation-delay: -6s; }
.categorie-tegel:hover .categorie-tegel__foto,
.categorie-tegel:focus-visible .categorie-tegel__foto { filter: brightness(1.02); }
@keyframes catTegelAdemen {
  0%, 100% { transform: scale(1.015); }
  50%      { transform: scale(1.08); }
}

.categorie-tegel__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(18,15,11,0.85) 0%, rgba(18,15,11,0.22) 58%, rgba(18,15,11,0.02) 100%);
  transition: opacity 0.4s ease;
}
.categorie-tegel:hover .categorie-tegel__overlay,
.categorie-tegel:focus-visible .categorie-tegel__overlay { opacity: 0.5; }

.categorie-tegel__titel {
  position: relative; z-index: 2;
  font-family: var(--font-titel); font-size: clamp(17px, 1.9vw, 22px); font-weight: 500;
  color: #f8f5f1; letter-spacing: 0.4px; text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.categorie-tegel__lijn {
  position: relative; z-index: 2;
  width: 18px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, #c9975a, rgba(201,151,90,0));
  margin: 10px 0 0;
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
}
.categorie-tegel:hover .categorie-tegel__lijn,
.categorie-tegel:focus-visible .categorie-tegel__lijn { width: 40px; }

/* Uitnodigende regel die pas verschijnt bij hover — zelfde idioom als
   .keuze-panel__hover-tekst op maatwerk.html, voor herkenbaarheid. */
.categorie-tegel__hint {
  position: relative; z-index: 2;
  font-size: 11px; letter-spacing: 0.5px; color: rgba(248,245,241,0.8);
  margin-top: 6px; max-height: 0; opacity: 0;
  transition: opacity 0.35s ease, max-height 0.35s ease, margin-top 0.35s ease;
}
.categorie-tegel:hover .categorie-tegel__hint,
.categorie-tegel:focus-visible .categorie-tegel__hint { opacity: 1; max-height: 20px; margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .categorie-tegel__foto { animation: none; }
  .categorie-tegel, .categorie-tegel__foto, .categorie-tegel__overlay, .categorie-tegel__lijn, .categorie-tegel__hint { transition: none !important; }
  .categorie-tegel:hover { transform: none; }
}

/* Kleinere tegel-variant voor project_details-keuzevragen (meerdere per
   scherm, bv. "Wat wilt u maken?") — zelfde ronde/levende familie als de
   grote fotokaarten, geschaald naar een compacte keuzelijst-vorm (zie
   [[feedback_visuele_stijl_wizardtegels]]). */
.vraag-tile {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  background: #fff;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--font-tekst);
  font-size: 13.5px;
  color: #2b2620;
  box-shadow: 0 1px 2px rgba(43,38,32,0.07);
  transition: box-shadow 0.35s ease, background 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
  text-align: left;
}
.vraag-tile:hover { box-shadow: 0 10px 22px rgba(43,38,32,0.13); transform: translateY(-2px); }
.vraag-tile.actief {
  background: rgba(139,111,71,0.1);
  box-shadow: 0 0 0 1.5px #8b6f47, 0 10px 22px rgba(139,111,71,0.16);
  font-weight: 500;
}
.vraag-tile:focus-visible { outline: 2px solid #8b6f47; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .vraag-tile { transition: none !important; }
  .vraag-tile:hover { transform: none; }
}
.vraag-tile__vink {
  flex-shrink: 0; width: 17px; height: 17px; border: 1.5px solid #cec5b9; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; transition: 0.25s ease;
}
.vraag-tile.actief .vraag-tile__vink { background: #8b6f47; border-color: #8b6f47; }
.vraag-tile.actief .vraag-tile__vink::after {
  content: ''; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
/* Single-select tegels tonen een bolletje i.p.v. vinkje */
.vraag-tile--single .vraag-tile__vink { border-radius: 50%; }
.vraag-tile--single.actief .vraag-tile__vink::after { display: none; }
.vraag-tile--single.actief .vraag-tile__vink { position: relative; }
.vraag-tile--single.actief .vraag-tile__vink::before {
  content: ''; position: absolute; inset: 3px; background: #fff; border-radius: 50%;
}

.vraag-groep { margin-bottom: 30px; }
.vraag-groep__label { font-family: var(--font-tekst); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: #8b6f47; margin-bottom: 12px; }
.vraag-groep__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }

.contact-terug {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-tekst);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #8b6f47;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 22px;
}
.contact-terug:hover { color: #2b2620; }

/* ── Stijl/materiaal-tegels ── */
.chip-groep { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 16px;
  border: 1px solid #cec5b9;
  background: #fff;
  color: #5c4f42;
  font-family: var(--font-tekst);
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px;
  transition: 0.2s ease;
}
.chip:hover { border-color: #8b6f47; }
.chip.actief { border-color: #8b6f47; background: rgba(139,111,71,0.1); color: #2b2620; }

.stijl-tegel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stijl-tegel {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 4px; padding: 18px 16px; min-height: 128px;
  background: linear-gradient(135deg, #efe7da, #e2d5c2);
  border: 1px solid #cec5b9; cursor: pointer; text-align: left; overflow: hidden;
  font-family: var(--font-tekst); transition: border-color 0.25s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}
.stijl-tegel:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(43,38,32,0.14); }
.stijl-tegel.actief { border-color: #8b6f47; box-shadow: 0 0 0 2px #8b6f47, 0 14px 32px rgba(43,38,32,0.14); }
.stijl-tegel__titel { position: relative; z-index: 2; font-family: var(--font-titel); font-size: 16px; font-weight: 500; color: #2b2620; letter-spacing: 0.2px; }

/* Selectie-badge — zelfde gevoel als de "vink" elders in de wizard, maar
   als zwevend rondje zodat het ook over een foto leesbaar blijft */
.stijl-tegel__vink {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.14); border: 1.5px solid rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.stijl-tegel.actief .stijl-tegel__vink { opacity: 1; transform: scale(1); background: #8b6f47; border-color: #8b6f47; }
.stijl-tegel__vink::after {
  content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px,-1px);
}

/* Fallback-tint per stijlrichting — zichtbaar als vangnet mocht een
   toekomstige categorie nog geen foto's hebben (zie STIJL_FOTOS in
   offerte-wizard.js). Voor de huidige 4 categorieën wordt dit pad nooit
   gebruikt — daar is altijd een foto beschikbaar. */
.stijl-tegel[data-stijl="warm_rustig"] { background: linear-gradient(135deg, #f1e6d6, #ddc7a8); }
.stijl-tegel[data-stijl="licht_minimalistisch"] { background: linear-gradient(135deg, #f7f4ee, #e6e0d4); }
.stijl-tegel[data-stijl="donker_luxe"] { background: linear-gradient(135deg, #3d352c, #241f19); }
.stijl-tegel[data-stijl="donker_luxe"] .stijl-tegel__titel { color: #f0ebe3; }
.stijl-tegel[data-stijl="hout_natuurlijk"] { background: linear-gradient(135deg, #c69a6d, #8b6238); }
.stijl-tegel[data-stijl="hout_natuurlijk"] .stijl-tegel__titel { color: #fff; }
.stijl-tegel[data-stijl="organisch"] { background: linear-gradient(135deg, #d8ddc8, #b7c0a0); }

/* "Harmann mag kiezen" — heeft principieel geen foto (er is geen concrete
   stijlrichting om te tonen), dus een eigen donkere, warme kaart i.p.v. een
   lege witte placeholder-tegel: voelt als een bewuste, premium optie. */
.stijl-tegel--advies {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  background: linear-gradient(155deg, #2b2620 0%, #3d352c 60%, #4a3f34 100%);
  border-color: #4a3f34;
}
.stijl-tegel--advies::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(circle at 78% 15%, rgba(201,151,90,0.35), transparent 60%);
}
.stijl-tegel--advies:hover { border-color: #8b6f47; }
.stijl-tegel--advies .stijl-tegel__icoon { position: relative; z-index: 2; color: #c9975a; }
.stijl-tegel--advies .stijl-tegel__titel { position: relative; z-index: 2; color: #f0ebe3; }
.stijl-tegel--advies .stijl-tegel__vink { top: 10px; right: 10px; }

/* Fotogedragen variant — actief zodra een echte sfeerfoto beschikbaar is
   voor de gekozen categorie. Bij hover wordt de foto juist HELDERDER en
   de overlay lichter, zodat de klant het beeld goed kan bekijken vóór het
   kiezen — het lichtjes gedimde rustscherm is er alleen in rust, voor
   leesbaarheid van de titel. */
.stijl-tegel--foto { min-height: 152px; }
.stijl-tegel__foto {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.87);
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), filter 0.4s ease;
}
.stijl-tegel--foto:hover .stijl-tegel__foto,
.stijl-tegel--foto:focus-visible .stijl-tegel__foto { transform: scale(1.06); filter: brightness(1.05); }
.stijl-tegel__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(18,15,11,0.82) 0%, rgba(18,15,11,0.28) 52%, rgba(18,15,11,0) 100%);
  transition: opacity 0.4s ease;
}
.stijl-tegel--foto:hover .stijl-tegel__overlay,
.stijl-tegel--foto:focus-visible .stijl-tegel__overlay { opacity: 0.48; }
.stijl-tegel--foto .stijl-tegel__titel { color: #f8f5f1; text-shadow: 0 1px 10px rgba(0,0,0,0.45); }

@media (prefers-reduced-motion: reduce) {
  .stijl-tegel, .stijl-tegel__foto, .stijl-tegel__vink, .stijl-tegel__overlay { transition: none !important; }
  .stijl-tegel--foto:hover .stijl-tegel__foto { transform: none; }
}

/* ── Foto-upload (maatwerk-zelfservice) ── */
.foto-upload__zone {
  border: 1.5px dashed #cec5b9;
  padding: 22px;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-tekst);
  font-size: 13px;
  color: #8b7d6f;
  transition: 0.2s ease;
}
.foto-upload__zone:hover, .foto-upload__zone.dragover { border-color: #8b6f47; background: rgba(139,111,71,0.04); }
.foto-upload__lijst { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.foto-upload__item { position: relative; width: 72px; height: 72px; border-radius: 2px; overflow: hidden; border: 1px solid #cec5b9; }
.foto-upload__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-upload__verwijder {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(20,16,12,0.75); color: #fff; border: none; font-size: 12px; line-height: 1; cursor: pointer;
}
.foto-upload__fout { font-size: 12px; color: #c0392b; margin-top: 6px; }

/* ── Maatvoering (ruimte/meubel-toggles, zelfservice) ── */
.maat-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #cec5b9;
  cursor: pointer;
  font-family: var(--font-tekst);
  transition: border-color 0.2s ease;
}
.maat-toggle:hover { border-color: #8b6f47; }
.maat-toggle strong { display: block; font-size: 14px; color: #2b2620; font-weight: 500; }
.maat-toggle__sub { display: block; font-size: 12px; color: #8b7d6f; margin-top: 2px; }
.maat-toggle__vink {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  border: 1.5px solid #cec5b9;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  transition: 0.2s ease;
}
.maat-toggle[aria-expanded="true"] .maat-toggle__vink { background: #8b6f47; border-color: #8b6f47; }
.maat-toggle[aria-expanded="true"] .maat-toggle__vink::after {
  content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.maat-velden { margin-top: 10px; padding: 16px; background: #f8f5f1; border-left: 2px solid #8b6f47; }
.maat-velden.verborgen { display: none; }
.maat-fout { font-size: 12px; color: #c0392b; margin-top: 6px; }
.maat-samenvatting {
  padding: 12px 16px;
  background: rgba(139,111,71,0.08);
  border-left: 2px solid #8b6f47;
  font-family: var(--font-tekst);
  font-size: 13px;
  line-height: 1.7;
  color: #5c4f42;
}
.maat-samenvatting strong { color: #2b2620; }
.maat-hint { font-size: 12px; color: #8b7d6f; margin: -4px 0 16px; line-height: 1.6; }

/* ── Sub-stappen binnen het zelfservice-formulier (IDEE/RUIMTE/FOTO'S/STIJL/AFRONDEN/CONTROLE) ── */
.wizard-substap { display: none; }
.wizard-substap.actief { display: block; animation: stapIn 0.25s ease both; }
.wizard-substap__titel { font-family: var(--font-titel); font-size: clamp(20px, 2.4vw, 26px); font-weight: 400; color: #2b2620; margin: 0 0 6px; }
.wizard-substap__sub { font-size: 13px; color: #8b7d6f; margin: 0 0 24px; line-height: 1.6; }
.wizard-substap__acties { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; gap: 12px; }
.wizard-substap__acties .contact-terug { margin-bottom: 0; }

/* ── Fase-indicator: rustige routelijn met waypoints i.p.v. "stap x van y" —
   dit is het terugkerende signature-moment door de hele zelfservice-flow
   heen (zie CLAUDE.md — Harmann Designfilosofie, "signature moment"). ── */
.fase-indicator {
  position: relative;
  display: flex;
  margin-bottom: 58px;
  padding-top: 32px;
}

/* Eén doorlopende baan + een accentlijn die vult naarmate de klant vordert
   (breedte wordt door JS gezet, tussen de hart-punten van de eerste en
   laatste stap — vandaar links/rechts 10%, want bij 5 gelijke kolommen ligt
   het midden van kolom 1 op 10% en van kolom 5 op 90%). */
.fase-indicator__lijnen { position: absolute; top: 32px; left: 10%; right: 10%; height: 1px; }
.fase-indicator__baan { position: absolute; inset: 0; background: #e2dace; }
.fase-indicator__vulling {
  position: absolute; inset: 0; width: 0%;
  background: linear-gradient(90deg, #8b6f47, #b08e5f);
  transition: width 0.7s cubic-bezier(0.65,0,0.35,1);
}

.fase-indicator__item {
  position: relative;
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.fase-indicator__punt {
  position: relative; z-index: 2;
  width: 9px; height: 9px; border-radius: 50%;
  background: #f5f0eb; border: 1.5px solid #d8cfc0;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.fase-indicator__naam {
  font-family: var(--font-tekst); font-size: 9.5px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase;
  color: #b5a898; white-space: nowrap;
  transition: color 0.4s ease, font-size 0.4s ease, letter-spacing 0.4s ease, transform 0.4s ease, font-style 0.4s ease;
}

.fase-indicator__item.voltooid .fase-indicator__punt { background: #8b6f47; border-color: #8b6f47; }
.fase-indicator__item.voltooid .fase-indicator__naam { color: #8b7355; }

/* De actieve stapnaam springt typografisch uit — cursieve titel-font,
   duidelijk groter, geen kleine hoofdletters meer — i.p.v. gewoon iets
   donkerder te kleuren zoals de rest. Dit is het bedoelde "signature
   moment" van de zelfservice-flow. */
.fase-indicator__item.actief .fase-indicator__punt {
  background: #8b6f47; border-color: #8b6f47;
  box-shadow: 0 0 0 5px rgba(139,111,71,0.16);
  transform: scale(1.3);
  animation: faseIndicatorPuls 2.6s ease-in-out infinite;
}
.fase-indicator__item.actief .fase-indicator__naam {
  font-family: var(--font-titel); font-style: italic; font-weight: 400;
  font-size: 18px; letter-spacing: 0.2px; text-transform: none;
  color: #2b2620;
  transform: translateY(-3px);
}

@keyframes faseIndicatorPuls {
  0%, 100% { box-shadow: 0 0 0 5px rgba(139,111,71,0.16); }
  50%      { box-shadow: 0 0 0 9px rgba(139,111,71,0.05); }
}

@media (prefers-reduced-motion: reduce) {
  .fase-indicator__vulling, .fase-indicator__punt, .fase-indicator__naam { transition: none !important; }
  .fase-indicator__item.actief .fase-indicator__punt { animation: none !important; }
}

/* ── Live samenvattingskaart "Jouw Harmann" ── */
.samenvatting-kaart {
  position: sticky;
  top: 24px;
  background: #2b2620;
  color: #f0ebe3;
  padding: 30px 26px 28px;
  overflow: hidden;
}
.samenvatting-kaart::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #8b6f47, rgba(139,111,71,0));
}
.samenvatting-kaart__label { font-family: var(--font-tekst); font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: #b08e5f; margin-bottom: 6px; }
.samenvatting-kaart__titel { font-family: var(--font-titel); font-size: 24px; font-weight: 400; margin: 0 0 18px; }
.samenvatting-kaart__leeg { font-size: 13px; color: #9a8d7d; line-height: 1.7; }
.samenvatting-kaart__regel { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid rgba(240,235,227,0.08); }
.samenvatting-kaart__regel:last-child { border-bottom: none; }
.samenvatting-kaart__label-klein { color: #9a8d7d; flex-shrink: 0; min-width: 90px; }
.samenvatting-kaart__waarde { color: #f0ebe3; }
.samenvatting-kaart__vinklijst { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; }
.samenvatting-kaart__vinklijst li { padding: 3px 0; color: #e4ddd0; }
.samenvatting-kaart__vinklijst li::before { content: '✓ '; color: #b08e5f; }

/* Mobiel: compacte, uitklapbare balk i.p.v. vaste zijbalk */
.samenvatting-mobiel {
  display: none;
  position: sticky; bottom: 0; left: 0; right: 0;
  background: #2b2620; color: #f0ebe3;
  z-index: 40; border-top: 1px solid rgba(240,235,227,0.15);
}
.samenvatting-mobiel__balk {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px; cursor: pointer; font-family: var(--font-tekst); font-size: 12px;
}
.samenvatting-mobiel__inhoud { display: none; padding: 0 18px 18px; }
.samenvatting-mobiel.open .samenvatting-mobiel__inhoud { display: block; }
.samenvatting-mobiel__chevron { transition: transform 0.2s ease; }
.samenvatting-mobiel.open .samenvatting-mobiel__chevron { transform: rotate(180deg); }

/* ── Laatste controle ── */
.controle-kaart { background: #fff; border: 1px solid #cec5b9; padding: 24px; margin-bottom: 20px; }
.controle-kaart__vraag { font-family: var(--font-titel); font-size: 18px; color: #2b2620; margin: 20px 0 0; }

.contact-layout--wizard { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 56px; align-items: start; }
@media (max-width: 900px) {
  .contact-layout--wizard { grid-template-columns: 1fr; }
  .samenvatting-kaart { display: none; }
  .samenvatting-mobiel { display: block; }
}

@media (max-width: 768px) {
  /* Hero section compacter op mobiel */
  .pagina-hero {
    padding: calc(var(--header-hoogte) + 32px) 24px 40px;
    width: calc(100vw);
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Keuze sectie */
  .contact-keuze { padding: 40px 20px 36px; }
  .contact-keuze__grid { grid-template-columns: repeat(2, 1fr); }
  .contact-keuze__titel { font-size: clamp(20px, 5vw, 28px); margin-bottom: 24px; }

  /* Formulier sectie */
  .contact-sectie-licht {
    padding: 48px 0 56px;
  }

  .contact-sectie-licht .sectie__titel {
    font-size: clamp(22px, 5.5vw, 30px) !important;
    margin-bottom: 12px !important;
  }

  /* Formulier labels kleinere spatiëring */
  .formulier__label {
    font-size: 10px !important;
    letter-spacing: 0.25em !important;
    margin-bottom: 6px !important;
  }

  /* Input velden iets compacter */
  .formulier__input, .formulier__textarea {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }

  /* Verzenden knop vol breedte */
  .formulier__verzend .knop {
    width: 100%;
    text-align: center;
    padding: 15px 24px;
  }

  /* Contact info zijkant: scheiding toevoegen */
  .contact-info-zijkant {
    padding-top: 32px;
    border-top: 1px solid #ddd6cc;
    margin-top: 8px;
  }

  /* Contact items wat compacter */
  .contact-info__item {
    margin-bottom: 20px;
  }

  /* WhatsApp knop: vol breedte op mobiel */
  .whatsapp-knop {
    display: flex;
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    justify-content: center;
    margin-top: 28px;
    box-sizing: border-box;
  }

  /* Vrijblijvend tekst: altijd netjes ombreken */
  .contact-vrijblijvend {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Contact sectie inner: beperkt tot viewport */
  .contact-sectie-licht .sectie__inner {
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Vrijblijvend blok: tekst ombreken */
  .contact-vrijblijvend {
    margin-top: 32px;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .contact-vrijblijvend p {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  /* Context bevestiging iets kleiner */
  .contact-context__waarde {
    font-size: clamp(18px, 4.5vw, 24px);
  }

  .stijl-tegel-grid { grid-template-columns: repeat(2, 1fr); }
  .vraag-groep__grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .contact-keuze__grid--6, .contact-keuze__grid--7 { grid-template-columns: repeat(2, 1fr); }

  /* Routelijn iets compacter op mobiel */
  .fase-indicator { margin-bottom: 48px; padding-top: 26px; }
  .fase-indicator__lijnen { top: 26px; }
  .fase-indicator__naam { font-size: 8px; letter-spacing: 1.1px; }
  .fase-indicator__item.actief .fase-indicator__naam { font-size: 14px; }
}

@media (max-width: 480px) {
  .contact-keuze__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .contact-tile { padding: 16px 14px; }
}

/* ── Gestaffelde reveal voor keuzetegels — elke tegel verschijnt met een
   klein verschil in timing zodra de stap actief wordt, i.p.v. dat het hele
   raster in één keer verspringt. Puur CSS: werkt ook voor tegels die pas ná
   het actief-worden van de stap door JS worden ingevoegd (een nieuw
   toegevoegd element met een matchende animation-regel start gewoon). ── */
.contact-stap.actief .contact-keuze__grid > *,
.wizard-substap.actief .stijl-tegel-grid > *,
.wizard-substap.actief .vraag-groep__grid > * {
  animation: tegelIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes tegelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.contact-stap.actief .contact-keuze__grid > *:nth-child(1),
.wizard-substap.actief .stijl-tegel-grid > *:nth-child(1),
.wizard-substap.actief .vraag-groep__grid > *:nth-child(1) { animation-delay: 0.02s; }
.contact-stap.actief .contact-keuze__grid > *:nth-child(2),
.wizard-substap.actief .stijl-tegel-grid > *:nth-child(2),
.wizard-substap.actief .vraag-groep__grid > *:nth-child(2) { animation-delay: 0.06s; }
.contact-stap.actief .contact-keuze__grid > *:nth-child(3),
.wizard-substap.actief .stijl-tegel-grid > *:nth-child(3),
.wizard-substap.actief .vraag-groep__grid > *:nth-child(3) { animation-delay: 0.10s; }
.contact-stap.actief .contact-keuze__grid > *:nth-child(4),
.wizard-substap.actief .stijl-tegel-grid > *:nth-child(4),
.wizard-substap.actief .vraag-groep__grid > *:nth-child(4) { animation-delay: 0.14s; }
.contact-stap.actief .contact-keuze__grid > *:nth-child(5),
.wizard-substap.actief .stijl-tegel-grid > *:nth-child(5),
.wizard-substap.actief .vraag-groep__grid > *:nth-child(5) { animation-delay: 0.18s; }
.contact-stap.actief .contact-keuze__grid > *:nth-child(6),
.wizard-substap.actief .stijl-tegel-grid > *:nth-child(6),
.wizard-substap.actief .vraag-groep__grid > *:nth-child(6) { animation-delay: 0.22s; }
.contact-stap.actief .contact-keuze__grid > *:nth-child(n+7),
.wizard-substap.actief .stijl-tegel-grid > *:nth-child(n+7),
.wizard-substap.actief .vraag-groep__grid > *:nth-child(n+7) { animation-delay: 0.26s; }

@media (prefers-reduced-motion: reduce) {
  .contact-stap.actief .contact-keuze__grid > *,
  .wizard-substap.actief .stijl-tegel-grid > *,
  .wizard-substap.actief .vraag-groep__grid > * { animation: none; }
}

/* ── Successcherm — tot nu toe onbedoeld ongestyled gebleven bij het
   losknippen van contact.html; hoort inhoudelijk bij fase 2 (het laatste,
   bevestigende moment van de aanvraagflow). ── */
.contact-succes { text-align: left; padding: 36px 0 4px; }
.contact-succes__ring {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(139,111,71,0.1);
  border: 1.5px solid #8b6f47;
  color: #8b6f47;
  margin-bottom: 22px;
  animation: succesRingIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
.contact-succes__ring svg { overflow: visible; }
.contact-succes__ring polyline {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: succesVinkIn 0.45s ease 0.35s forwards;
}
@keyframes succesRingIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
@keyframes succesVinkIn { to { stroke-dashoffset: 0; } }

.contact-succes__titel {
  font-family: var(--font-titel); font-size: clamp(24px, 2.6vw, 30px); font-weight: 400;
  color: #2b2620; letter-spacing: 0.3px; margin: 0 0 12px;
}
.contact-succes__tekst { font-size: 15px; color: #5c4f42; line-height: 1.75; margin: 0 0 6px; max-width: 480px; }
.contact-succes__naam { margin-top: 24px; font-family: var(--font-titel); font-style: italic; font-size: 15px; color: #8b6f47; }

@media (prefers-reduced-motion: reduce) {
  .contact-succes__ring { animation: none; opacity: 1; transform: none; }
  .contact-succes__ring polyline { animation: none; stroke-dashoffset: 0; }
}

/* ── Validatie ── */
.formulier__input--fout,
.formulier__textarea--fout {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.4);
}
.formulier__foutmelding {
  display: none;
  font-family: var(--font-tekst);
  font-size: 12px;
  color: #c0392b;
  margin-top: 5px;
}
.formulier__foutmelding.zichtbaar {
  display: block;
}

/* ── Succespagina ── */
.contact-succes__samenvatting {
  margin-top: 20px; padding: 18px 20px; background: #f8f5f1; border-left: 2px solid #8b6f47;
  text-align: left; font-size: 13.5px; color: #5c4f42; line-height: 1.8;
}
.contact-succes__vervolg { margin-top: 18px; font-size: 14px; color: #5c4f42; line-height: 1.8; text-align: left; }