/* ==========================================================================
   Offerteformulier in stappen voor Van Klasse Stukadoors.

   Eén vraag per scherm, volledig op de huisstijl. Deze pagina laadt
   bewust alleen fonts.css, variables.css en dit bestand, zodat er geen
   stijlen van de rest van de site doorheen lopen en de pagina snel is.

   Alle kleuren, spacing en radii komen uit css/variables.css.
   ========================================================================== */

/* --- Kleine reset, alleen wat deze pagina nodig heeft --------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
}

/* --- Component-eigen kleurlagen, afgeleid van de merktokens -------------- */
.of-page {
  /* Fallbacks eerst, daarna de fijnere variant met color-mix. */

  /* Randen van velden en kaarten. Minimaal 3:1 tegen de navy achtergrond. */
  --of-line: rgba(255, 255, 255, 0.45);
  --of-line: color-mix(in srgb, var(--color-white) 45%, transparent);
  --of-line-soft: rgba(255, 255, 255, 0.3);
  --of-line-soft: color-mix(in srgb, var(--color-white) 30%, transparent);

  /* Vulling van de keuzekaarten. */
  --of-panel: rgba(255, 255, 255, 0.05);
  --of-panel: color-mix(in srgb, var(--color-white) 5%, transparent);
  --of-panel-hover: rgba(255, 255, 255, 0.1);
  --of-panel-hover: color-mix(in srgb, var(--color-white) 10%, transparent);
  --of-panel-actief: rgba(242, 138, 46, 0.16);
  --of-panel-actief: color-mix(in srgb, var(--color-accent) 16%, transparent);

  /* Tekstkleuren. */
  --of-text-soft: rgba(255, 255, 255, 0.78);
  --of-text-soft: color-mix(in srgb, var(--color-white) 78%, transparent);
  --of-placeholder: rgba(255, 255, 255, 0.55);
  --of-placeholder: color-mix(in srgb, var(--color-white) 55%, transparent);
}

/* Een veld dat door de conditionele logica uit staat, moet echt weg zijn.
   Zonder deze regel wint de display uit .of-field van de browserregel
   voor het hidden-attribuut, en blijft het veld zichtbaar staan. */
.of-field[hidden],
.of-step[hidden] {
  display: none;
}

/* --- Paginaframe ---------------------------------------------------------- */
.of-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

/* --- Voortgangsbalk bovenaan --------------------------------------------- */
.of-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--sp-1);
  background-color: var(--of-line-soft);
  z-index: 3;
}

.of-progress-fill {
  height: 100%;
  width: 0;
  background-color: var(--color-accent);
  transition: width var(--transition-slow);
}

/* --- Bovenbalk met logo en stapteller ------------------------------------ */
.of-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-6) 0;
}

.of-topbar-logo {
  display: inline-flex;
  border-radius: var(--radius-sm);
}

.of-topbar-logo:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

.of-topbar-logo img {
  height: 34px;
  width: auto;
}

.of-topbar-count {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--of-text-soft);
  letter-spacing: 0.02em;
}

/* Op het startscherm staat het logo groot in het midden, niet in de balk. */
.of-page[data-view="start"] .of-topbar {
  visibility: hidden;
}

/* --- Speelveld ------------------------------------------------------------ */
.of-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10) var(--sp-6) var(--sp-12);
}

.of-inner {
  width: 100%;
  max-width: 720px;
}

/* --- Stappen -------------------------------------------------------------- */
.of-step {
  display: none;
}

.of-step.is-active {
  display: block;
  animation: of-in var(--transition-slow) both;
}

@keyframes of-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .of-step.is-active {
    animation: none;
  }

  .of-progress-fill {
    transition: none;
  }
}

/* --- Startscherm ---------------------------------------------------------- */
.of-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.of-start-logo {
  width: 100%;
  max-width: 380px;
  margin: 0 0 var(--sp-8);
}

/* Het logo is donker van zichzelf. Op de navy achtergrond zetten wij het
   om naar wit, met dezelfde filter die de footer van de site gebruikt. */
.of-start-logo img,
.of-topbar-logo img {
  filter: brightness(0) invert(1);
}

.of-start h1 {
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-2xl), 6vw, var(--fs-4xl));
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
}

.of-start-sub {
  font-size: var(--fs-lg);
  color: var(--of-text-soft);
  margin: 0 0 var(--sp-8);
  max-width: 34em;
}

.of-start-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--of-text-soft);
}

.of-start-meta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.of-start-usps {
  list-style: none;
  margin: var(--sp-10) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--of-text-soft);
}

.of-start-usps li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.of-start-usps svg {
  width: 15px;
  height: 15px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* --- Honeypot, alleen voor spambots -------------------------------------- */
.of-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Vraagkop ------------------------------------------------------------- */

/* Keuzevragen zitten in een fieldset, zodat de vraag bij de opties hoort. */
.of-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.of-head {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: var(--sp-8);
}

.of-question {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-xl), 3.4vw, var(--fs-3xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0;
}

.of-qnum {
  flex-shrink: 0;
  min-width: 1.55em;
  margin-top: 0.3em;
  padding: 0 0.3em;
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  color: var(--color-navy-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  text-align: center;
}

.of-help {
  display: block;
  margin: var(--sp-3) 0 0;
  padding-left: calc(1.55em + var(--sp-3));
  font-size: var(--fs-md);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  color: var(--of-text-soft);
}

/* --- Keuzes: echte radio's, zodat toetsenbord en screenreader werken ----- */

/* De radio zelf blijft bereikbaar voor hulpsoftware, maar is niet in beeld. */
.of-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* --- Keuzekaarten met afbeelding ----------------------------------------- */
.of-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.of-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 2px solid var(--of-line-soft);
  border-radius: var(--radius-lg);
  background-color: var(--of-panel);
  color: var(--color-white);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast),
    background-color var(--transition-fast);
}

/* Zweven met de muis maakt de kaart alleen iets lichter. De oranje rand
   is voorbehouden aan de optie die echt gekozen is. */
.of-card:hover {
  border-color: var(--of-line);
  background-color: var(--of-panel-hover);
}

.of-card:has(.of-radio:checked) {
  border-color: var(--color-accent);
  background-color: var(--of-panel-actief);
  box-shadow: 0 0 0 1px var(--color-accent) inset;
}

.of-card:has(.of-radio:focus-visible) {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.of-card-img {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background-color: var(--color-navy-light);
}

.of-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.of-card-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

/* --- Keuzerijen zonder afbeelding ---------------------------------------- */
.of-choices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.of-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  border: 2px solid var(--of-line-soft);
  border-radius: var(--radius-md);
  background-color: var(--of-panel);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.of-choice:hover {
  border-color: var(--of-line);
  background-color: var(--of-panel-hover);
}

.of-choice:has(.of-radio:checked) {
  border-color: var(--color-accent);
  background-color: var(--of-panel-actief);
  box-shadow: 0 0 0 1px var(--color-accent) inset;
}

.of-choice:has(.of-radio:focus-visible) {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Letterbadge A, B, C */
.of-letter {
  flex-shrink: 0;
  width: 1.9em;
  height: 1.9em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--of-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--of-text-soft);
}

/* Deze twee regels werken in elke browser, ook zonder :has(). Zo ziet de
   bezoeker altijd welke optie hij heeft gekozen, want de letterbadge
   wordt oranje. De :has()-regels hierboven maken het alleen mooier. */
.of-radio:checked ~ .of-letter,
.of-radio:checked ~ .of-card-label .of-letter {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-navy-dark);
}

.of-radio:checked ~ .of-card-label,
.of-choice .of-radio:checked ~ .of-letter + span {
  color: var(--color-white);
}

/* Terugval voor browsers zonder :has(): dan de rand van het label zelf
   niet kunnen zetten, dus maken wij de tekst en badge extra duidelijk. */
@supports not selector(:has(*)) {
  .of-radio:checked ~ .of-card-label,
  .of-radio:checked ~ .of-letter {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
}

/* --- Velden --------------------------------------------------------------- */
.of-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.of-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.of-label {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.of-label-opt {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--of-text-soft);
}

.of-input,
.of-textarea {
  width: 100%;
  padding: var(--sp-3) 0;
  border: 0;
  border-bottom: 2px solid var(--of-line);
  border-radius: 0;
  background-color: transparent;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-lg), 2.6vw, var(--fs-2xl));
  font-weight: var(--fw-medium);
  transition: border-color var(--transition-fast);
}

.of-textarea {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  min-height: 3.4em;
  line-height: var(--lh-base);
  resize: vertical;
}

.of-input::placeholder,
.of-textarea::placeholder {
  color: var(--of-placeholder);
}

.of-input:focus,
.of-textarea:focus {
  outline: 0;
  border-bottom-color: var(--color-accent);
}

/* Spinners weghalen bij aantallen, de eenheid staat er los naast. */
.of-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.of-input[type="number"]::-webkit-outer-spin-button,
.of-input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.of-input-unit {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  border-bottom: 2px solid var(--of-line);
  transition: border-color var(--transition-fast);
}

.of-input-unit:focus-within {
  border-bottom-color: var(--color-accent);
}

.of-input-unit .of-input {
  border-bottom: 0;
}

.of-unit {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--of-text-soft);
}

/* Datumvelden naast elkaar */
.of-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}

.of-input[type="date"] {
  font-size: var(--fs-lg);
  color-scheme: dark;
}

/* --- Los veld onder een keuzevraag, zoals de datum bij stap 4 ----------- */
.of-field-los {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--of-line-soft);
}

/* --- Akkoordvinkje -------------------------------------------------------- */
.of-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--of-text-soft);
  line-height: var(--lh-base);
  cursor: pointer;
}

.of-check input {
  flex-shrink: 0;
  margin-top: 0.2em;
  width: 20px;
  height: 20px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.of-check a {
  color: var(--color-accent);
  font-weight: var(--fw-medium);
}

.of-check a:hover,
.of-check a:focus-visible {
  color: var(--color-accent-soft);
}

/* --- Melding bij "Ik weet het niet zeker" -------------------------------- */
.of-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background-color: var(--of-panel-actief);
  color: var(--color-white);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.of-note svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.1em;
  color: var(--color-accent);
}

.of-note[hidden] {
  display: none;
}

/* --- Foutmelding ---------------------------------------------------------- */
.of-error {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background-color: var(--color-accent-soft);
  color: var(--color-navy-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.of-error.is-visible {
  display: flex;
}

.of-error svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- Knoppen -------------------------------------------------------------- */
.of-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.of-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-8);
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-accent);
  color: var(--color-navy-dark);
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast),
    transform var(--transition-fast);
}

.of-btn:hover {
  background-color: var(--color-accent-dark);
}

.of-btn:active {
  transform: translateY(1px);
}

.of-btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.of-btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.of-btn-lg {
  padding: var(--sp-4) var(--sp-10);
  font-size: var(--fs-xl);
}

.of-btn svg {
  width: 18px;
  height: 18px;
}

.of-btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--of-line);
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--of-text-soft);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.of-btn-back:hover {
  border-color: var(--color-white);
  color: var(--color-white);
}

.of-btn-back:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.of-btn-back svg {
  width: 14px;
  height: 14px;
}

.of-hint {
  font-size: var(--fs-sm);
  color: var(--of-text-soft);
}

/* --- Sociaal bewijs: sterren, cijfer en aantal beoordelingen ------------ */
.of-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--color-accent);
}

.of-stars svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* Regel op het startscherm, direct boven de Startknop. */
.of-proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-8);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--of-line-soft);
  border-radius: var(--radius-round);
  background-color: var(--of-panel);
  font-size: var(--fs-sm);
  color: var(--of-text-soft);
}

.of-proof strong {
  color: var(--color-white);
  font-weight: var(--fw-semibold);
}

/* Echte klantreview op de laatste stap, vlak voor de verstuurknop. */
.of-review {
  margin: var(--sp-8) 0 0;
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  background-color: var(--of-panel);
}

.of-review blockquote {
  margin: var(--sp-3) 0;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--color-white);
}

.of-review blockquote::before {
  content: "\201C";
}

.of-review blockquote::after {
  content: "\201D";
}

.of-review-bron {
  display: block;
  font-size: var(--fs-xs);
  color: var(--of-text-soft);
}

/* --- Regel over de privacy onder de verstuurknop ------------------------- */
.of-legal {
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--of-text-soft);
}

.of-legal a {
  color: var(--color-accent);
}

.of-legal a:hover,
.of-legal a:focus-visible {
  color: var(--color-accent-soft);
}

/* --- Samenvatting op de laatste stap ------------------------------------- */
.of-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-8);
  padding: 0;
  list-style: none;
}

.of-summary li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--of-line-soft);
  border-radius: var(--radius-round);
  background-color: var(--of-panel);
  font-size: var(--fs-sm);
  color: var(--of-text-soft);
}

.of-summary svg {
  width: 14px;
  height: 14px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* --- Onderregel ----------------------------------------------------------- */
.of-foot {
  padding: 0 var(--sp-6) var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--of-text-soft);
}

.of-foot a {
  color: var(--of-text-soft);
}

.of-foot a:hover,
.of-foot a:focus-visible {
  color: var(--color-white);
}

.of-foot a:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Ruim genoeg om met een duim te raken, ook op een telefoon. */
.of-foot-link,
.of-foot-call {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.of-foot-call svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* --- Mobiel --------------------------------------------------------------- */
@media (max-width: 720px) {
  .of-topbar {
    padding: var(--sp-4) var(--sp-4) 0;
  }

  .of-topbar-logo img {
    height: 26px;
  }

  .of-stage {
    padding: var(--sp-6) var(--sp-4) var(--sp-8);
    align-items: flex-start;
  }

  .of-head {
    margin-bottom: var(--sp-6);
  }

  .of-help {
    padding-left: 0;
  }

  .of-cards {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  /* Lagere foto, anders valt de Oké-knop onder de onderkant van het scherm. */
  .of-card-img {
    aspect-ratio: 5 / 2;
  }

  .of-card {
    padding: var(--sp-3);
    gap: var(--sp-3);
  }

  .of-row {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  .of-choice {
    font-size: var(--fs-md);
    padding: var(--sp-4);
  }

  .of-card-label {
    font-size: var(--fs-md);
  }

  .of-actions {
    margin-top: var(--sp-6);
    gap: var(--sp-3);
  }

  .of-btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .of-start-logo {
    max-width: 240px;
    margin-bottom: var(--sp-6);
  }

  /* Startknop lekker breed, zodat hij met een duim niet te missen is. */
  .of-start .of-btn-lg {
    width: 100%;
    max-width: 20rem;
    justify-content: center;
  }

  .of-start-sub {
    font-size: var(--fs-md);
    margin-bottom: var(--sp-6);
  }

  .of-start-usps {
    margin-top: var(--sp-8);
    gap: var(--sp-2) var(--sp-4);
  }

  .of-proof {
    margin-bottom: var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs);
  }

  .of-review {
    margin-top: var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
  }

  .of-foot {
    padding: 0 var(--sp-4) var(--sp-5);
    justify-content: center;
    text-align: center;
  }
}

/* Heel smalle toestellen */
@media (max-width: 380px) {
  .of-btn-lg {
    padding: var(--sp-3) var(--sp-6);
    font-size: var(--fs-lg);
  }
}