/* Redpoint Company - webinars en masterclasses
   Volgens Brand & Identity v1.1 (15 oktober 2026): wit en crème dominant, rood voor actie,
   marineblauw voor tekst en structuur, blush en perzik voor warmte, goud alleen als klein detail.
   Componenten en naamgeving volgen de conceptversies van de homepage (v6) en salespagina (v5). */

@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/librebaskerville-700.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/librebaskerville-400i.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/lato-400i.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lato-700.woff2") format("woff2"); }

:root {
  /* Zeven kleuren uit het brandbook */
  --navy: #00274D;      /* tekst, cijfers, vinkjes, structuur, footer */
  --rood: #CD4B37;      /* knoppen, prijzen, slotblok (wit erop 4,5:1) */
  --rood-h: #B53F2E;    /* alleen hover en focus van rode knoppen */
  --goud: #B88F4C;      /* alleen kleine details: stipje, dunne lijn */
  --perzik: #E3A48D;    /* zacht accent, onderstreping */
  --blush: #F2E7E1;     /* zacht vlak, kaart */
  --creme: #FAF7F2;     /* achtergrond */
  --wit: #FFFFFF;

  --tekst: #00274D;
  --tekst-zacht: rgba(0, 39, 77, .74);
  --lijn: #EADFD7;
  --op-navy: #D5DEE8;

  --serif: "Libre Baskerville", Georgia, serif;
  --sans: "Lato", "Helvetica Neue", Arial, sans-serif;
  --r: 20px;
  --r-s: 12px;
  --max: 1180px;
  --g: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--wit); color: var(--tekst); font: 400 1.0625rem/1.6 var(--sans); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0 0 1em; }
a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--perzik); text-decoration-thickness: 2px; text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--navy); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { color: var(--navy); margin: 0 0 .5em; text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
h1 { font-size: clamp(2.2rem, 6.4vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 4.2vw, 2.7rem); }
h3 { font-family: var(--sans); font-weight: 700; font-size: 1.2rem; line-height: 1.35; }
em.accent { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.hero h1 em.accent { color: var(--rood); }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; color: #fff; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--g); }
.smal { max-width: 780px; }
.mid { text-align: center; }
.sec { padding: 64px 0; position: relative; }
.bg-creme { background: var(--creme); }
.bg-blush { background: var(--blush); }
.lead { font-size: 1.15rem; line-height: 1.55; }
.zacht { color: var(--tekst-zacht); }

/* Kopje boven een kop: kleine tekst met een gouden stipje */
.kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); margin-bottom: 16px; }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--goud); flex: none; }

/* Label: één zacht blush-label met marineblauwe tekst */
.label { display: inline-flex; align-items: center; gap: 8px; font: 700 .74rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: var(--blush); color: var(--navy); }
.labels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.label-wit { background: var(--wit); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); }
.status-wacht::before { background: transparent; border: 1.5px solid var(--navy); }

/* Knoppen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 1rem/1.25 var(--sans); text-decoration: none; padding: 15px 26px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s; text-align: center; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn-rood { background: var(--rood); color: #fff; }
.btn-rood:hover, .btn-rood:focus-visible { background: var(--rood-h); color: #fff; }
.btn-lijn { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-lijn:hover { background: var(--navy); color: #fff; }
.btn-wit { background: #fff; color: var(--navy); }
.btn-wit:hover { background: var(--creme); color: var(--navy); }
.btn-groot { padding: 18px 32px; font-size: 1.06rem; }
.btn-blok { width: 100%; }
.link-pijl { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.link-pijl svg { width: 18px; height: 18px; transition: transform .2s; }
.link-pijl:hover svg { transform: translateX(3px); }
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

/* Header */
.concept-balk { background: var(--creme); border-bottom: 1px solid var(--lijn); color: var(--navy); font-size: .86rem; text-align: center; padding: 8px var(--g); }
.kop { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--lijn); }
.kop .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px; }
.kop .logo { display: block; text-decoration: none; }
.kop .logo img { width: 128px; height: auto; }
.menu { display: none; list-style: none; margin: 0; padding: 0; gap: 28px; align-items: center; }
.menu a { text-decoration: none; color: var(--navy); font-size: .97rem; }
.menu a:hover, .menu a[aria-current] { text-decoration: underline; text-decoration-color: var(--perzik); }
.kop-cta { padding: 11px 20px; font-size: .92rem; }
.kop-rechts { display: flex; align-items: center; gap: 16px; }
.menu-knop { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; font: 700 .95rem var(--sans); color: var(--navy); cursor: pointer; padding: 8px 0; }
.menu-knop span { width: 22px; height: 2px; background: var(--navy); position: relative; display: block; }
.menu-knop span::before, .menu-knop span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--navy); }
.menu-knop span::before { top: -7px; } .menu-knop span::after { top: 7px; }
.mobiel-menu { display: none; border-top: 1px solid var(--lijn); background: #fff; }
.mobiel-menu.open { display: block; }
.mobiel-menu ul { list-style: none; margin: 0; padding: 8px var(--g) 18px; }
.mobiel-menu li a { display: block; padding: 12px 0; text-decoration: none; color: var(--navy); border-bottom: 1px solid var(--lijn); }

/* Kruimelpad terug naar het overzicht */
.terug { font-size: .92rem; margin: 0 0 22px; }
.terug a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.terug a:hover { text-decoration: underline; text-decoration-color: var(--perzik); }
.terug svg { width: 16px; height: 16px; transform: scaleX(-1); }

/* Hero: crème met rode accenten, geen rood vlak */
.hero { background: var(--creme); padding: 40px 0 56px; position: relative; overflow: hidden; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero-sub { font: italic 400 clamp(1.15rem, 2.4vw, 1.4rem)/1.45 var(--serif); color: var(--navy); margin-bottom: 16px; }
.hero .knoppen { margin-top: 26px; }
.hero-beeld { position: relative; }
.product-beeld img { width: 100%; filter: drop-shadow(0 22px 26px rgba(0, 39, 77, .12)); }
/* Foto met perzik rand */
.foto-rand { position: relative; }
.foto-rand img { width: 100%; border-radius: var(--r); object-fit: cover; position: relative; z-index: 1; }
.foto-rand::before { content: ""; position: absolute; inset: 16px -12px -12px 16px; border: 2px solid var(--perzik); border-radius: var(--r); z-index: 0; }

/* Kerncijfers: marineblauwe cijfers, dunne lijnen */
.feiten { list-style: none; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--lijn); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.feiten li { font-size: .95rem; line-height: 1.35; }
.feiten b { display: block; font: 700 1.5rem/1.2 var(--serif); color: var(--navy); }

/* Kaarten */
.kaart { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 28px 24px; }
.kaart-blush { background: var(--blush); border-color: transparent; }
.kaart-creme { background: var(--creme); border-color: transparent; }

/* Vinkjes en nummers: marineblauw, zonder gevulde kleurcirkel */
.vinkjes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.vinkjes li { position: relative; padding-left: 36px; }
.vinkjes li::before { content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2300274D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.nummers { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: nr; }
.nummers > li { counter-increment: nr; position: relative; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r-s); padding: 18px 20px 18px 66px; }
.nummers > li::before { content: counter(nr, decimal-leading-zero); position: absolute; left: 20px; top: 17px; font: 700 1.05rem/1.4 var(--serif); color: var(--navy); }
.bg-creme .nummers > li, .bg-blush .nummers > li { border-color: transparent; }
.nummers b { display: block; }

/* Overzicht: aanbodrijen zoals de Academy-pagina */
.aanbod { display: grid; gap: 72px; }
.aanbod-rij { display: grid; gap: 28px; align-items: center; }
.aanbod-beeld { display: block; background: var(--creme); border-radius: var(--r); padding: 28px 22px; text-decoration: none; }
.aanbod-beeld img { width: 100%; filter: drop-shadow(0 18px 22px rgba(0, 39, 77, .12)); transition: transform .4s; }
.aanbod-beeld:hover img { transform: translateY(-4px); }
.aanbod-beeld.is-foto { padding: 0; overflow: hidden; }
.aanbod-beeld.is-foto img { aspect-ratio: 16 / 10; object-fit: cover; filter: none; border-radius: var(--r); }
.aanbod-beeld.is-foto:hover img { transform: scale(1.02); }
.aanbod-tekst h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.aanbod-tekst h2 a { text-decoration: none; }
.aanbod-tekst h2 a:hover { text-decoration: underline; text-decoration-color: var(--perzik); }
.meta { list-style: none; margin: 4px 0 24px; padding: 14px 0 0; border-top: 1px solid var(--lijn); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .94rem; }
.meta li { display: inline-flex; gap: 6px; }
.meta b { font-weight: 700; }
.prijs-gratis { font-size: .94rem; }
.prijs-gratis s { color: var(--tekst-zacht); margin-right: 6px; }
.prijs-gratis strong { color: var(--rood); font: 700 1.15rem var(--serif); }

/* Keuzehulp */
.keuze-grid { display: grid; gap: 18px; margin-top: 40px; }
.keuze { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 26px 24px; text-decoration: none; color: var(--navy); transition: border-color .2s, transform .2s; }
.keuze:hover { border-color: var(--navy); transform: translateY(-3px); }
.keuze .als { font: italic 400 1.18rem/1.45 var(--serif); margin-bottom: 18px; }
.keuze .dan { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--lijn); font-weight: 700; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.keuze .dan svg { width: 18px; height: 18px; flex: none; }

/* Citaten: één marineblauwe kaart, de rest wit met lijn */
.citaten { display: grid; gap: 18px; }
.citaat { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 26px 24px; display: flex; flex-direction: column; }
.citaat blockquote { margin: 0 0 18px; }
.citaat blockquote p { margin: 0 0 .6em; }
.citaat .citaat-kop { font: italic 400 1.15rem/1.45 var(--serif); }
.citaat figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; font-size: .9rem; line-height: 1.35; }
.citaat figcaption b { display: block; }
.citaat figcaption img { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.citaat-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.citaat-navy .groot { font: italic 400 clamp(1.3rem, 2.8vw, 1.75rem)/1.4 var(--serif); color: #fff; }
.citaat-navy figcaption { color: var(--op-navy); }
.citaat-navy figcaption b { color: #fff; }
/* Zacht rond element zonder initialen */
.rond { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--blush); color: var(--perzik); display: grid; place-items: center; }
.rond svg { width: 18px; height: 18px; }
.citaat-navy .rond { background: rgba(255, 255, 255, .1); color: var(--perzik); }

/* Grote uitspraak */
.uitspraak { font: italic 400 clamp(1.35rem, 3.2vw, 2rem)/1.45 var(--serif); color: var(--navy); margin: 0; }
.uitspraak-lijn { display: block; width: 48px; height: 2px; background: var(--goud); margin: 0 auto 24px; }

/* De ene sterke donkere sectie */
.donker { background: var(--navy); color: var(--op-navy); }
.donker h2, .donker h3, .donker .kicker { color: #fff; }
.donker a { color: #fff; }
.donker-grid { display: grid; gap: 40px; align-items: center; }
.donker-foto img { width: 100%; border-radius: var(--r); object-fit: cover; }
.donker .citaat-inge { font: italic 400 1.2rem/1.5 var(--serif); color: #fff; border-left: 2px solid var(--goud); padding-left: 20px; margin: 24px 0 0; }
.handtekening { font: italic 400 1.6rem var(--serif); color: #fff; margin: 18px 0 0; }
.cijfers-rij { list-style: none; padding: 22px 0 0; margin: 28px 0 0; border-top: 1px solid rgba(255, 255, 255, .18); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cijfers-rij li { font-size: .88rem; line-height: 1.35; }
.cijfers-rij b { display: block; font: 700 1.35rem/1.2 var(--serif); color: #fff; }

/* Data van een live webinar */
.data-grid { display: grid; gap: 16px; }
.datum { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 24px; }
.datum .dag { font: 700 1.25rem/1.3 var(--serif); color: var(--navy); margin: 0; }
.datum .tijd { margin: 0 0 12px; }
.datum .btn { margin-top: auto; }
.datum.is-vol .dag { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--tekst-zacht); }
.datum.is-vol .btn { background: var(--creme); color: var(--tekst-zacht); pointer-events: none; }
.datum-open { border-color: var(--perzik); }
/* Zonder losse data: één brede kaart */
.data-grid > .datum:only-child { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .data-grid > .datum:only-child { display: grid; grid-template-columns: 1fr auto; column-gap: 32px; align-items: center; padding: 30px 34px; }
  .data-grid > .datum:only-child .tijd { margin: 0; grid-row: 2; }
  .data-grid > .datum:only-child .btn { grid-column: 2; grid-row: 1 / 3; width: auto; margin: 0; }
}

/* Formulier (voorbeeld tot de ActiveCampaign-embed er is) */
.form-kaart { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 26px 22px; }
.form-kaart h2, .form-kaart h3 { font-family: var(--serif); font-size: 1.3rem; }
.velden { display: grid; gap: 12px; }
.veld { width: 100%; font: 1rem var(--sans); color: var(--navy); background: #fff; border: 1px solid #CFC3BA; border-radius: 12px; padding: 14px 16px; }
.veld::placeholder { color: var(--tekst-zacht); }
.veld:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 39, 77, .14); }
.toestemming { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; margin: 14px 0 18px; }
.toestemming input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--navy); flex: none; }
.form-noot { font-size: .9rem; background: var(--blush); border-radius: 12px; padding: 10px 14px; margin: 14px 0 0; }
.form-klein { font-size: .86rem; color: var(--tekst-zacht); margin: 12px 0 0; }

/* Vragen: marineblauwe vraag, blush plusknopje, dunne scheidingslijn */
.vragen details { border-bottom: 1px solid var(--lijn); }
.vragen details:first-child { border-top: 1px solid var(--lijn); }
.vragen summary { list-style: none; cursor: pointer; padding: 20px 52px 20px 0; position: relative; font-weight: 700; font-size: 1.06rem; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: var(--blush) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%2300274D' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .2s; }
.vragen details[open] summary::after { transform: rotate(45deg); }
.vragen details > div { padding: 0 0 20px; max-width: 65ch; }

/* Slotblok: rood vlak, witte tekst, witte knop */
.slot { background: var(--rood); color: #fff; border-radius: var(--r); padding: 44px 24px; text-align: center; }
.slot h2 { color: #fff; }
.slot p { max-width: 56ch; margin-left: auto; margin-right: auto; }
.slot .btn { margin-top: 10px; }
.slot-form { max-width: 560px; margin: 22px auto 0; display: grid; gap: 12px; }
.slot .veld { border-color: transparent; }
.slot .veld:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.slot .toestemming { justify-content: center; text-align: left; margin: 2px 0 6px; }
.slot .toestemming input { accent-color: #fff; }
.slot .form-noot { background: rgba(255, 255, 255, .16); color: #fff; }

/* Footer met wit logo */
.voet { background: var(--navy); color: var(--op-navy); padding: 60px 0 28px; }
.voet-grid { display: grid; gap: 32px; }
.voet-logo { width: 150px; height: auto; }
.voet h3 { color: #fff; font-size: .95rem; margin-bottom: 12px; }
.voet ul { list-style: none; padding: 0; margin: 0; line-height: 2; }
.voet a { color: var(--op-navy); text-decoration-color: rgba(227, 164, 141, .7); }
.voet a:hover { color: #fff; }
.voet .slogan { font: italic 400 1.25rem var(--serif); color: #fff; margin: 18px 0 0; }
.voet-onder { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .86rem; }

/* Vaste knop onderin op mobiel */
.vaste-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; transform: translateY(140%); transition: transform .3s; box-shadow: 0 10px 30px rgba(0, 39, 77, .22); }
.vaste-cta.zichtbaar { transform: none; }

/* Verschijnen bij scrollen */
.js .in-beeld { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js .in-beeld.zichtbaar { opacity: 1; transform: none; }

@media (min-width: 640px) {
  :root { --g: 28px; }
  .feiten { grid-template-columns: repeat(4, 1fr); }
  .data-grid { grid-template-columns: repeat(2, 1fr); }
  .citaten { grid-template-columns: repeat(2, 1fr); }
  .velden-twee { grid-template-columns: 1fr 1fr; }
  .slot-form .velden { grid-template-columns: 1fr 1fr; }
  .slot { padding: 64px 48px; }
  .form-kaart { padding: 32px 30px; }
}
@media (min-width: 900px) {
  .sec { padding: 104px 0; }
  .hero { padding: 56px 0 88px; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 64px; }
  .aanbod { gap: 112px; }
  .aanbod-rij { grid-template-columns: 1fr 1fr; gap: 72px; }
  .aanbod-rij:nth-child(even) .aanbod-beeld { order: 2; }
  .aanbod-beeld { padding: 40px 34px; }
  .keuze-grid { grid-template-columns: repeat(3, 1fr); }
  .citaten { grid-template-columns: repeat(3, 1fr); }
  .citaat-breed { grid-column: span 2; }
  .donker-grid { grid-template-columns: .85fr 1.15fr; gap: 72px; }
  .data-grid { grid-template-columns: repeat(3, 1fr); }
  .twee-kol { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .voet-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .vaste-cta { display: none; }
}
@media (min-width: 1024px) {
  .menu { display: flex; }
  .menu-knop, .kop-mobiel { display: none; }
  .kop .logo img { width: 140px; }
}
@media (max-width: 899px) {
  .twee-kol > * + * { margin-top: 48px; }
}

/* Versie 2 (feedback Inge, 23-24 oktober) */

/* Foto zonder perzik rand, wel afgeronde hoeken */
.foto-rond img { width: 100%; border-radius: var(--r); object-fit: cover; }

/* Hero: vraag als ondertitel, korte herkenningsvraag */
.hero-herkenbaar { font: italic 400 1.2rem var(--serif); color: var(--navy); margin: 4px 0 10px; }

/* Vaste regel onder een aanbod: type | duur | toegang */
.regel { font-weight: 700; font-size: .95rem; letter-spacing: .01em; margin: 6px 0 22px; padding-top: 14px; border-top: 1px solid var(--lijn); }
.regel span { color: var(--goud); margin: 0 6px; font-weight: 400; }
.aanbod-sub { font: italic 400 1.12rem/1.5 var(--serif); color: var(--navy); }

/* Uitgelicht live webinar */
.live { display: grid; gap: 28px; align-items: center; background: var(--creme); border-radius: var(--r); padding: 22px; margin-bottom: 80px; }
.live-foto img { width: 100%; border-radius: var(--r-s); aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 40% 35%; }
.live h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.live h2 em.accent { color: var(--navy); }
.live-zinnen { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.live-zinnen li { padding-left: 18px; position: relative; }
.live-zinnen li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--goud); }

/* Keuzekaart: titel met regel eronder */
.keuze .dan small { display: block; font-weight: 400; font-size: .86rem; color: var(--tekst-zacht); margin-top: 4px; }

/* Donkere sectie met staand portret */
.donker-portret img { aspect-ratio: 4 / 4.6; object-position: 50% 20%; max-height: 560px; }
.donker-vraag { font: italic 400 1.2rem/1.5 var(--serif); color: #fff; }

/* Slotformulier: voornaam en achternaam naast elkaar, e-mail over de volle breedte */
.veld-breed { grid-column: 1 / -1; }

/* Campagneblok (Bright Friday): bovenaan, los van de gewone tekst */
.campagne { background: var(--blush); border-bottom: 1px solid var(--lijn); padding: 26px 0; }
.campagne-grid { display: grid; gap: 18px; align-items: center; }
.campagne .labels { margin-bottom: 10px; }
.label-rood { background: var(--rood); color: #fff; }
.campagne-kop { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin-bottom: 6px; }
.campagne-kop em.accent { color: var(--rood); }
.campagne-prijs { margin: 0; font-size: .95rem; }

@media (min-width: 900px) {
  .live { grid-template-columns: .9fr 1.1fr; gap: 56px; padding: 32px; margin-bottom: 112px; }
  .campagne-grid { grid-template-columns: 1fr auto; gap: 40px; }
}

/* Versie 3 (feedback 25 oktober): acht ervaringen, kaarten op eigen hoogte zonder lege vlakken */
.citaten-acht { align-items: start; }

/* Pagina De Prijs van het Perfecte Plaatje: één uitgelichte reactie, daaronder kolommen van wisselende lengte */
.citaat-uitgelicht { max-width: 820px; margin: 40px auto 18px; }
.citaten-kolommen { columns: 1; column-gap: 18px; }
.citaten-kolommen .citaat { break-inside: avoid; margin: 0 0 18px; }
[hidden] { display: none !important; }
@media (min-width: 640px) { .citaten-kolommen { columns: 2; } }
@media (min-width: 900px) { .citaten-kolommen { columns: 3; } }

/* Bedankpagina (overgenomen uit de bedankpagina van Je Weet Het Wel) */
.bev { padding: 40px 0 64px; }
.bev-wrap { max-width: 980px; }
.bev-kop { display: grid; gap: 32px; align-items: center; }
.bev-vink { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--rood); display: grid; place-items: center; margin-bottom: 18px; }
.bev-vink svg { width: 22px; height: 22px; stroke-width: 2.6; }
.bev h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-bottom: 14px; }
.bev-intro { margin: 0 0 6px; }
.bev-titel { font: 700 clamp(1.2rem, 2.6vw, 1.45rem)/1.35 var(--serif); color: var(--navy); margin: 0 0 6px; }
.bev-datum { font-weight: 700; color: var(--navy); margin: 0 0 18px; }
.bev-datum span[aria-hidden] { margin: 0 6px; font-weight: 400; }
.bev-agenda { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 22px; }
.bev-agenda-knop { padding: 11px 20px; font-size: .95rem; }
.bev-google { font-size: .92rem; }
.bev-info { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; background: #fff; border-radius: var(--r-s); padding: 16px 18px; font-size: .95rem; }
.bev-info p { margin: 0; }
.bev-info p + p { margin-top: .35em; color: var(--tekst-zacht); }
.bev-info-icoon { width: 34px; height: 34px; border-radius: 50%; background: var(--blush); color: var(--navy); display: grid; place-items: center; }
.bev-info-icoon svg { width: 17px; height: 17px; }
.bev-foto { max-width: 300px; }
.bev-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 38% 40%; border-radius: var(--r); }
.bev-reflectie { max-width: 620px; margin: 64px auto 0; text-align: center; }
.bev-reflectie h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: 18px; }
.bev-vraag { font: italic 400 clamp(1.2rem, 2.6vw, 1.45rem)/1.5 var(--serif); color: var(--navy); margin-bottom: 18px; }
.bev-uitkijk { margin: 26px 0 4px; font-weight: 700; }
.bev-groet { margin: 0; }
.bev-naam { font: italic 400 1.6rem var(--serif); color: var(--navy); margin: 2px 0 0; }
@media (min-width: 760px) {
  .bev { padding: 64px 0 88px; }
  .bev-kop { grid-template-columns: 1fr 300px; gap: 56px; }
}
/* Op telefoon blijft de bevestiging bovenaan en compact: foto alleen vanaf tabletbreedte */
@media (max-width: 759px) { .bev-foto { display: none; } }
.nw { white-space: nowrap; }
.bev-info p + p.bev-info-kop { margin-top: .9em; color: var(--navy); font-weight: 700; }
.bev-motto { font: italic 400 1.15rem var(--serif); color: var(--navy); margin: 18px 0 0; }
.bev-groet-blok { margin-top: 26px; }
.bev-groet-blok p { margin: 0; }
.bev-groet-blok .bev-motto { margin-top: 14px; }


/* ActiveCampaign-formulieren 132 (Perfecte Plaatje) en 133 (masterclass) in de Redpoint-stijl, overgenomen van formulier 131 */
#_form_132_ { margin: 0; padding: 0; background: none; font: inherit; color: var(--navy); }
#_form_132_ ._form-content { display: grid; gap: 14px; }
#_form_132_ ._form_element { margin: 0; }
#_form_132_ ._form-label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 6px; color: var(--navy); }
#_form_132_ .field-required { color: var(--rood); margin-left: 2px; }
#_form_132_ ._field-wrapper { position: relative; }
#_form_132_ input[type="text"] { display: block; width: 100%; font: 1rem var(--sans); color: var(--navy); background: #fff; border: 1px solid #B9ABA1; border-radius: 12px; padding: 14px 16px; min-height: 52px; -webkit-appearance: none; appearance: none; }
#_form_132_ input[type="text"]::placeholder { color: rgba(0, 39, 77, .55); }
#_form_132_ input[type="text"]:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 39, 77, .16); }
#_form_132_ input._has_error, #_form_132_ input._has_field_error { border-color: #B3361F; box-shadow: 0 0 0 1px #B3361F; }
/* Foutmelding onder het veld in plaats van een zwevende tooltip */
#_form_132_ ._error { position: static; display: block; margin-top: 6px; }
#_form_132_ ._error-arrow { display: none; }
#_form_132_ ._error-inner, #_form_132_ ._field-error { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; font-weight: 700; line-height: 1.4; color: #A3301B; }
#_form_132_ ._error ._error-inner::before, #_form_132_ ._field-error::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #A3301B; color: #fff; font-size: .75rem; line-height: 18px; text-align: center; }
#_form_132_ ._field-error { margin-top: 6px; }
/* Foutmelding van de server (aanmelding mislukt) boven de knop */
#_form_132_ ._show_be_error ._form_error { display: block; background: #FBEDEA; border-left: 3px solid #B3361F; border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; font-weight: 400; color: var(--navy); }
#_form_132_ ._form_error a { color: var(--navy); }
#_form_132_ ._button-wrapper { margin-top: 4px; }
#_form_132_ ._submit { width: 100%; position: relative; }
#_form_132_ ._submit:disabled { cursor: progress; }
/* Bezig met verzenden: tekst wijkt voor een rustig draaiend rondje */
#_form_132_ ._submit.processing { color: transparent; }
#_form_132_ ._submit.processing svg { visibility: hidden; }
#_form_132_ ._submit.processing::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: draai .8s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
#_form_132_ ._form-thank-you { font-weight: 700; text-align: left; padding: 14px 0 4px; }
#_form_132_ ._form-thank-you:focus { outline: none; }
._form_hide { display: none; }
#_form_133_ { margin: 0; padding: 0; background: none; font: inherit; color: var(--navy); }
#_form_133_ ._form-content { display: grid; gap: 14px; }
#_form_133_ ._form_element { margin: 0; }
#_form_133_ ._form-label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 6px; color: var(--navy); }
#_form_133_ .field-required { color: var(--rood); margin-left: 2px; }
#_form_133_ ._field-wrapper { position: relative; }
#_form_133_ input[type="text"] { display: block; width: 100%; font: 1rem var(--sans); color: var(--navy); background: #fff; border: 1px solid #B9ABA1; border-radius: 12px; padding: 14px 16px; min-height: 52px; -webkit-appearance: none; appearance: none; }
#_form_133_ input[type="text"]::placeholder { color: rgba(0, 39, 77, .55); }
#_form_133_ input[type="text"]:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 39, 77, .16); }
#_form_133_ input._has_error, #_form_133_ input._has_field_error { border-color: #B3361F; box-shadow: 0 0 0 1px #B3361F; }
/* Foutmelding onder het veld in plaats van een zwevende tooltip */
#_form_133_ ._error { position: static; display: block; margin-top: 6px; }
#_form_133_ ._error-arrow { display: none; }
#_form_133_ ._error-inner, #_form_133_ ._field-error { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; font-weight: 700; line-height: 1.4; color: #A3301B; }
#_form_133_ ._error ._error-inner::before, #_form_133_ ._field-error::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #A3301B; color: #fff; font-size: .75rem; line-height: 18px; text-align: center; }
#_form_133_ ._field-error { margin-top: 6px; }
/* Foutmelding van de server (aanmelding mislukt) boven de knop */
#_form_133_ ._show_be_error ._form_error { display: block; background: #FBEDEA; border-left: 3px solid #B3361F; border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; font-weight: 400; color: var(--navy); }
#_form_133_ ._form_error a { color: var(--navy); }
#_form_133_ ._button-wrapper { margin-top: 4px; }
#_form_133_ ._submit { width: 100%; position: relative; }
#_form_133_ ._submit:disabled { cursor: progress; }
/* Bezig met verzenden: tekst wijkt voor een rustig draaiend rondje */
#_form_133_ ._submit.processing { color: transparent; }
#_form_133_ ._submit.processing svg { visibility: hidden; }
#_form_133_ ._submit.processing::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: draai .8s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
#_form_133_ ._form-thank-you { font-weight: 700; text-align: left; padding: 14px 0 4px; }
#_form_133_ ._form-thank-you:focus { outline: none; }
._form_hide { display: none; }
/* Bedankpagina masterclass: lijstje met de drie e-mails */
.bev-info .bev-info-eerst { color: var(--navy); font-weight: 700; }
.bev-info p + .bev-lijst { margin-top: .35em; }
.bev-lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.bev-lijst li { position: relative; padding-left: 18px; }
.bev-lijst li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); }
.bev-info .bev-lijst + p.bev-info-kop { margin-top: .9em; }
.bev-uitkijk-tekst { margin: 24px 0 0; font: italic 400 1.12rem/1.5 var(--serif); color: var(--navy); }
/* Perfecte Plaatje: knop "Lees meer ervaringen" onder de reacties */
.meer-ervaringen { margin: 8px 0 0; }
/* Bedankpagina Perfecte Plaatje (feedback 26 oktober): één tekststijl in het informatievlak */
.bev-info-rustig p + p { margin-top: .6em; color: var(--tekst); }
.bev-afsluiting { margin: 24px 0 0; }

/* Mockups (aangeleverd 26 oktober): eigen schaduw en afgeronde hoeken zitten in het beeld */
img.mockup { width: 100%; height: auto; filter: none !important; border-radius: 0; box-shadow: none; aspect-ratio: auto; object-fit: contain; }
.aanbod-beeld:has(img.mockup) { background: transparent; padding: 0; }
.hero-mockup { margin: 0; }


/* ActiveCampaign-formulier 134 (Mis geen nieuwe sessie), overgenomen van formulier 131 */
#_form_134_ { margin: 0; padding: 0; background: none; font: inherit; color: var(--navy); }
#_form_134_ ._form-content { display: grid; gap: 14px; }
#_form_134_ ._form_element { margin: 0; }
#_form_134_ ._form-label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 6px; color: var(--navy); }
#_form_134_ .field-required { color: var(--rood); margin-left: 2px; }
#_form_134_ ._field-wrapper { position: relative; }
#_form_134_ input[type="text"] { display: block; width: 100%; font: 1rem var(--sans); color: var(--navy); background: #fff; border: 1px solid #B9ABA1; border-radius: 12px; padding: 14px 16px; min-height: 52px; -webkit-appearance: none; appearance: none; }
#_form_134_ input[type="text"]::placeholder { color: rgba(0, 39, 77, .55); }
#_form_134_ input[type="text"]:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 39, 77, .16); }
#_form_134_ input._has_error, #_form_134_ input._has_field_error { border-color: #B3361F; box-shadow: 0 0 0 1px #B3361F; }
/* Foutmelding onder het veld in plaats van een zwevende tooltip */
#_form_134_ ._error { position: static; display: block; margin-top: 6px; }
#_form_134_ ._error-arrow { display: none; }
#_form_134_ ._error-inner, #_form_134_ ._field-error { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; font-weight: 700; line-height: 1.4; color: #A3301B; }
#_form_134_ ._error ._error-inner::before, #_form_134_ ._field-error::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #A3301B; color: #fff; font-size: .75rem; line-height: 18px; text-align: center; }
#_form_134_ ._field-error { margin-top: 6px; }
/* Foutmelding van de server (aanmelding mislukt) boven de knop */
#_form_134_ ._show_be_error ._form_error { display: block; background: #FBEDEA; border-left: 3px solid #B3361F; border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; font-weight: 400; color: var(--navy); }
#_form_134_ ._form_error a { color: var(--navy); }
#_form_134_ ._button-wrapper { margin-top: 4px; }
#_form_134_ ._submit { width: 100%; position: relative; }
#_form_134_ ._submit:disabled { cursor: progress; }
/* Bezig met verzenden: tekst wijkt voor een rustig draaiend rondje */
#_form_134_ ._submit.processing { color: transparent; }
#_form_134_ ._submit.processing svg { visibility: hidden; }
#_form_134_ ._submit.processing::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: draai .8s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
#_form_134_ ._form-thank-you { font-weight: 700; text-align: left; padding: 14px 0 4px; }
#_form_134_ ._form-thank-you:focus { outline: none; }
._form_hide { display: none; }

/* Formulier 134 staat op het rode slotblok: witte labels, voornaam en achternaam naast elkaar, e-mail eronder */
.slot #_form_134_ { max-width: 560px; margin: 22px auto 0; text-align: left; }
.slot #_form_134_ ._form-label { color: #fff; }
.slot #_form_134_ .field-required { color: #fff; }
.slot #_form_134_ input[type="text"] { border-color: transparent; }
.slot #_form_134_ input[type="text"]:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.slot #_form_134_ ._button-wrapper { text-align: center; margin-top: 6px; }
.slot #_form_134_ ._form-thank-you { text-align: center; font: 700 1.1rem/1.5 var(--sans); color: #fff; padding: 12px 0; }
@media (min-width: 640px) {
  .slot #_form_134_ ._form-content { grid-template-columns: 1fr 1fr; }
  .slot #_form_134_ ._field_email, .slot #_form_134_ ._button-wrapper, .slot #_form_134_ ._clear-element, .slot #_form_134_ ._show_be_error { grid-column: 1 / -1; }
}
/* Foutmeldingen leesbaar op het rode slotblok: wit, met een wit uitroepteken */
.slot #_form_134_ ._error-inner, .slot #_form_134_ ._field-error { color: #fff; }
.slot #_form_134_ ._error ._error-inner::before, .slot #_form_134_ ._field-error::before { background: #fff; color: var(--rood); }
.slot #_form_134_ ._form_error a { color: #fff; }
.slot #_form_134_ input._has_error, .slot #_form_134_ input._has_field_error { border-color: #fff; box-shadow: 0 0 0 2px #fff; }

/* Overzicht versie 3, feedback 26 oktober: rustiger en lichter */
/* Beeld links of rechts staat vast per rij (blijft goed als het live-blok na de webinardatum verdwijnt) */
.aanbod-rij:nth-child(even) .aanbod-beeld { order: 0; }
@media (min-width: 900px) { .aanbod-rij.beeld-rechts .aanbod-beeld { order: 2; } }
/* Live webinar als gewone aanbodrij: geen crème kader, zelfde maten als de andere rijen */
.aanbod-rij.live { background: none; padding: 0; margin: 0; border-radius: 0; }
.aanbod-rij.live h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
@media (min-width: 900px) { .aanbod-rij.live { grid-template-columns: 1fr 1fr; gap: 72px; padding: 0; margin: 0; } }
/* Alle webinarbeelden even groot en zonder schaduw */
.aanbod-beeld:has(img.mockup), .live-foto { display: block; background: none; padding: 0; }
img.mockup { width: 100%; height: auto; border-radius: 14px; }
/* Link naar alle ervaringen, rechts onder de reacties */
.meer-ervaringen-link { text-align: right; margin: 28px 0 0; }
/* Perfecte Plaatje (feedback 26 oktober): tekst en formulier links, grote foto van Inge rechts */
.hero-foto-rechts .form-kaart { margin-top: 28px; max-width: 560px; }
.hero-portret { margin: 0; }
.hero-portret img { width: 100%; height: auto; border-radius: var(--r); }
@media (min-width: 900px) {
  .hero-foto-rechts { align-items: start; }
}

/* Masterclass (feedback 26 oktober): echte foto in de hero, onderkant gelijk met het formulier */
.hero-foto-vul { margin: 8px 0 0; }
.hero-foto-vul img { width: 100%; border-radius: var(--r); object-fit: cover; object-position: 50% 30%; aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .hero-foto-onder { align-items: stretch; }
  .hero-foto-onder > div:first-child { display: flex; flex-direction: column; }
  .hero-foto-onder .hero-foto-vul { flex: 1; min-height: 240px; position: relative; }
  .hero-foto-onder .hero-foto-vul img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}
/* Ondertitel onder een kop: klein en goed leesbaar */
.ondertitel { font-size: .95rem; color: var(--tekst-zacht); margin: -4px 0 0; }
/* Een inkijkje in de training: over de volle breedte onder de twee kolommen */
.inkijkje { margin-top: 40px; }
.inkijkje p { margin: 0; }
@media (min-width: 900px) { .inkijkje { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: baseline; padding: 30px 34px; } .inkijkje h3 { margin: 0; } }

/* Toestemmingsvakje Inspiratiemail (ActiveCampaign-veld 10) */
.rpc-toestemming ._checkbox-radio { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: start; }
.rpc-toestemming input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy); cursor: pointer; }
.rpc-toestemming label { font-size: .95rem; line-height: 1.45; color: var(--navy); cursor: pointer; }
.rpc-toestemming ._error-inner { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; font-weight: 700; line-height: 1.4; color: #A3301B; }
.rpc-toestemming ._error-inner::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #A3301B; color: #fff; font-size: .75rem; line-height: 18px; text-align: center; }
/* Uitleg onder de knop van formulier 134 */
.slot #_form_134_ .form-uitleg { margin: 12px auto 0; font-size: .92rem; line-height: 1.5; color: rgba(255, 255, 255, .9); }
/* Formulier 135 (De Prijs van het Perfecte Plaatje terugkijken): zelfde vormgeving als 132 */
#_form_135_ { margin: 0; padding: 0; background: none; font: inherit; color: var(--navy); }
#_form_135_ ._form-content { display: grid; gap: 14px; }
#_form_135_ ._form_element { margin: 0; }
#_form_135_ ._form-label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 6px; color: var(--navy); }
#_form_135_ .field-required { color: var(--rood); margin-left: 2px; }
#_form_135_ ._field-wrapper { position: relative; }
#_form_135_ input[type="text"] { display: block; width: 100%; font: 1rem var(--sans); color: var(--navy); background: #fff; border: 1px solid #B9ABA1; border-radius: 12px; padding: 14px 16px; min-height: 52px; -webkit-appearance: none; appearance: none; }
#_form_135_ input[type="text"]::placeholder { color: rgba(0, 39, 77, .55); }
#_form_135_ input[type="text"]:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 39, 77, .16); }
#_form_135_ input._has_error, #_form_135_ input._has_field_error { border-color: #B3361F; box-shadow: 0 0 0 1px #B3361F; }
#_form_135_ ._error { position: static; display: block; margin-top: 6px; }
#_form_135_ ._error-arrow { display: none; }
#_form_135_ ._error-inner, #_form_135_ ._field-error { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; font-weight: 700; line-height: 1.4; color: #A3301B; }
#_form_135_ ._error ._error-inner::before, #_form_135_ ._field-error::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #A3301B; color: #fff; font-size: .75rem; line-height: 18px; text-align: center; }
#_form_135_ ._field-error { margin-top: 6px; }
#_form_135_ ._show_be_error ._form_error { display: block; background: #FBEDEA; border-left: 3px solid #B3361F; border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; font-weight: 400; color: var(--navy); }
#_form_135_ ._form_error a { color: var(--navy); }
#_form_135_ ._button-wrapper { margin-top: 4px; }
#_form_135_ ._submit { width: 100%; position: relative; }
#_form_135_ ._submit:disabled { cursor: progress; }
#_form_135_ ._submit.processing { color: transparent; }
#_form_135_ ._submit.processing svg { visibility: hidden; }
#_form_135_ ._submit.processing::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: draai .8s linear infinite; }
#_form_135_ ._form-thank-you { font-weight: 700; text-align: left; padding: 14px 0 4px; }
#_form_135_ ._form-thank-you:focus { outline: none; }
/* Perfecte Plaatje (feedback 28 oktober): tekst over de volle breedte, daaronder formulier links en foto rechts, even hoog */
.hero-intro { margin-bottom: 28px; }
.hero-form-foto { display: grid; gap: 28px; }
.hero-form-foto .hero-portret img { width: 100%; height: auto; border-radius: var(--r); }
@media (min-width: 900px) {
  .hero-form-foto { grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: stretch; }
  .hero-form-foto .hero-portret { position: relative; min-height: 320px; }
  .hero-form-foto .hero-portret img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 50% 20%; }
}

/* Formulier 136 (De Prijs van het Perfecte Plaatje wachtlijst): zelfde vormgeving als 135 */
#_form_136_ { margin: 0; padding: 0; background: none; font: inherit; color: var(--navy); }
#_form_136_ ._form-content { display: grid; gap: 14px; }
#_form_136_ ._form_element { margin: 0; }
#_form_136_ ._form-label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 6px; color: var(--navy); }
#_form_136_ .field-required { color: var(--rood); margin-left: 2px; }
#_form_136_ ._field-wrapper { position: relative; }
#_form_136_ input[type="text"] { display: block; width: 100%; font: 1rem var(--sans); color: var(--navy); background: #fff; border: 1px solid #B9ABA1; border-radius: 12px; padding: 14px 16px; min-height: 52px; -webkit-appearance: none; appearance: none; }
#_form_136_ input[type="text"]::placeholder { color: rgba(0, 39, 77, .55); }
#_form_136_ input[type="text"]:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 39, 77, .16); }
#_form_136_ input._has_error, #_form_136_ input._has_field_error { border-color: #B3361F; box-shadow: 0 0 0 1px #B3361F; }
#_form_136_ ._error { position: static; display: block; margin-top: 6px; }
#_form_136_ ._error-arrow { display: none; }
#_form_136_ ._error-inner, #_form_136_ ._field-error { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; font-weight: 700; line-height: 1.4; color: #A3301B; }
#_form_136_ ._error ._error-inner::before, #_form_136_ ._field-error::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #A3301B; color: #fff; font-size: .75rem; line-height: 18px; text-align: center; }
#_form_136_ ._field-error { margin-top: 6px; }
#_form_136_ ._show_be_error ._form_error { display: block; background: #FBEDEA; border-left: 3px solid #B3361F; border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; font-weight: 400; color: var(--navy); }
#_form_136_ ._form_error a { color: var(--navy); }
#_form_136_ ._button-wrapper { margin-top: 4px; }
#_form_136_ ._submit { width: 100%; position: relative; }
#_form_136_ ._submit:disabled { cursor: progress; }
#_form_136_ ._submit.processing { color: transparent; }
#_form_136_ ._submit.processing svg { visibility: hidden; }
#_form_136_ ._submit.processing::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: draai .8s linear infinite; }
#_form_136_ ._form-thank-you { font-weight: 700; text-align: left; padding: 14px 0 4px; }
#_form_136_ ._form-thank-you:focus { outline: none; }