/* Wintergids 2026 (acties.zoom.nl/wintergids2026). Mobiel eerst, desktop gelijkwaardig (brein, wet 6).
   Kleuren uit de cover: sneeuw als ondergrond, ijsblauw van de sneeuwvlok voor structuur, goud alleen voor de koopknop. */

@font-face { font-family: "Centrale"; src: url("/lightroomec2027/fonts/centrale-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Centrale"; src: url("/lightroomec2027/fonts/centrale-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Centrale"; src: url("/lightroomec2027/fonts/centrale-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --sneeuw: #E3ECF3;
  --sneeuw-diep: #CFDFEB;
  --wit: #FFFFFF;
  --nacht: #14212B;
  --grijs: #4A5B68;
  --ijs: #7FA8C9;
  --ijs-licht: #DCE8F1;
  --ijs-donker: #3F6E93;
  --goud: #EFA40B;
  --goud-donker: #D18F00;
  --fout: #B3261E;
  --rand: #C9D6E0;
  --maat: 18px;
  --kolom: 38rem;
  --kantlijn: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: 96px; }
/* Koele winterlucht: een paar grote, lichte sneeuwvlokken (vorm van het zegel), bovenin een diepere ijsblauwe gloed
   achter de cover en een verloop dat naar onderen lichter wordt. Alles achter de inhoud, zonder beweging. */
:root { --vlok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='white' stroke-opacity='.8' stroke-width='2' stroke-linecap='round'%3E%3Cpath transform='rotate%280 60 60%29' d='M60 60V8M60 22l-9-9M60 22l9-9M60 36l-12-12M60 36l12-12'/%3E%3Cpath transform='rotate%2860 60 60%29' d='M60 60V8M60 22l-9-9M60 22l9-9M60 36l-12-12M60 36l12-12'/%3E%3Cpath transform='rotate%28120 60 60%29' d='M60 60V8M60 22l-9-9M60 22l9-9M60 36l-12-12M60 36l12-12'/%3E%3Cpath transform='rotate%28180 60 60%29' d='M60 60V8M60 22l-9-9M60 22l9-9M60 36l-12-12M60 36l12-12'/%3E%3Cpath transform='rotate%28240 60 60%29' d='M60 60V8M60 22l-9-9M60 22l9-9M60 36l-12-12M60 36l12-12'/%3E%3Cpath transform='rotate%28300 60 60%29' d='M60 60V8M60 22l-9-9M60 22l9-9M60 36l-12-12M60 36l12-12'/%3E%3C/svg%3E"); }
body { margin: 0; background:
    var(--vlok) 97% 30px / 170px no-repeat,
    var(--vlok) 2% 640px / 230px no-repeat,
    var(--vlok) 96% 1300px / 210px no-repeat,
    var(--vlok) 3% 2050px / 160px no-repeat,
    var(--vlok) 95% 2900px / 240px no-repeat,
    var(--vlok) 4% 3750px / 190px no-repeat,
    radial-gradient(70rem 34rem at 50% 0, var(--sneeuw-diep), transparent 70%),
    linear-gradient(180deg, var(--sneeuw) 0, var(--sneeuw) 50%, #EEF3F7 100%);
  color: var(--nacht); font: 400 var(--maat)/1.55 "Centrale", "Open Sans", Arial, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ijs-donker); text-underline-offset: 3px; }
a:hover { color: var(--nacht); }
:focus-visible { outline: 3px solid var(--ijs-donker); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

.naar-inhoud { position: absolute; left: -999px; top: 8px; background: var(--wit); padding: 10px 14px; z-index: 50; }
.naar-inhoud:focus { left: 8px; }

/* Smaak en stand: één bron (de klassen op <html>) */
html:not(.pro) .alleen-pro, html.pro .alleen-publiek { display: none !important; }
html:not(.stand-open) .alleen-open, html:not(.stand-binnenkort) .alleen-binnenkort, html:not(.stand-gesloten) .alleen-gesloten { display: none !important; }

/* Kop */
.kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--kantlijn); max-width: 72rem; margin: 0 auto; }
.kop-merk img { height: 34px; width: auto; }
.kop-sluit { margin: 0; font-size: 15px; color: var(--grijs); text-align: right; }

/* Held: de cover als drukwerk op de sneeuw, met het zegel uit de sneeuwvlok van de cover */
.held { max-width: 72rem; margin: 0 auto; padding: 14px var(--kantlijn) 48px; display: grid; gap: 22px; }
.held-cover { position: relative; margin: 0 auto; width: min(56vw, 250px); }
.held-cover img { border-radius: 3px; box-shadow: 0 1px 2px rgba(20,33,43,.18), 0 18px 40px -12px rgba(20,33,43,.35), 0 40px 70px -40px rgba(63,110,147,.45); }
/* linksboven op de lege lucht van de cover, niet naast de sneeuwvlok die de cover zelf rechtsonder al heeft */
.zegel { position: absolute; left: -52px; top: -36px; width: 104px; height: 104px; display: grid; place-items: center; color: var(--ijs); }
.zegel-vlok { position: absolute; inset: 0; width: 100%; height: 100%; }
.zegel-tekst { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--wit); box-shadow: 0 6px 18px -6px rgba(20,33,43,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.05; }
.zegel-tekst b { font-size: 17px; color: var(--nacht); }
.zegel-tekst small { font-size: 10.5px; color: var(--grijs); white-space: nowrap; line-height: 1.15; }
.zegel-tekst small:first-of-type { margin-top: 3px; }

.held-tekst { max-width: var(--kolom); margin: 0 auto; }
.held h1 { font-size: clamp(2rem, 8vw, 3.6rem); margin-bottom: 10px; }
.held-lead { font-size: 1.12rem; margin-bottom: 18px; }
.held-lead b { font-weight: 700; white-space: nowrap; }
.held-onder { font-size: 16px; color: var(--grijs); margin: 12px 0 0; }
.melding { background: var(--wit); border-left: 4px solid var(--ijs); padding: 14px 16px; border-radius: 0 8px 8px 0; }

/* Knoppen: goud is alleen voor bestellen */
.knop { appearance: none; border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 1.08rem; line-height: 1.2; color: var(--nacht); background: var(--goud); padding: 18px 26px; border-radius: 999px; width: 100%; min-height: 56px; box-shadow: 0 2px 0 var(--goud-donker); transition: background-color .15s, transform .1s; }
.knop:hover { background: #F4B22E; }
.knop:active { transform: translateY(1px); box-shadow: none; }
.knop:disabled { cursor: not-allowed; background: #E7D9B8; box-shadow: none; color: #6B6455; }
.knop-klein { width: auto; min-height: 46px; padding: 12px 20px; font-size: 1rem; }

/* Blokken */
.blok { max-width: var(--kolom); margin: 0 auto; padding: 44px var(--kantlijn); border-top: 1px solid var(--ijs-licht); }
.blok h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); margin-bottom: 14px; }
.blok-intro { color: var(--grijs); }

/* Doorbladeren: breder dan de tekstkolom; kleuren van het blok via zijn eigen tokens op de lichte winterpagina */
.doorblader-blok { max-width: 60rem; margin: 0 auto; padding: 8px var(--kantlijn) 44px; display: grid; gap: 10px; }
.doorblader-blok h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.doorblader-blok .blok-intro { margin: 0 0 6px; }
.gids-boek { min-height: 12rem; }
.gids-laden { color: var(--grijs); font-size: 16px; }
.doorblader-blok .db { --db-tekst: var(--nacht); --db-grijs: var(--grijs); --db-accent: var(--ijs-donker); --db-lijn: var(--rand); }

.hoofdstukken { display: grid; gap: 26px; margin-top: 26px; }
.hoofdstuk h3 { font-size: 1.25rem; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid var(--ijs); }
.hoofdstuk ul { list-style: none; margin: 0; padding: 0; }

/* Beeld uit de gids: mozaïek met naamsvermelding (mobiel 2 kolommen, desktop 3) */
.beeld-blok { max-width: 60rem; margin: 0 auto; padding: 8px var(--kantlijn) 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.beeld { position: relative; margin: 0; overflow: hidden; border-radius: 6px; background: var(--ijs-licht); min-width: 0; }
.beeld img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.beeld-breed { grid-column: 1 / -1; }
.beeld-breed img { aspect-ratio: 5 / 2; }
.beeld-hoog img { aspect-ratio: 3 / 4; }
.beeld figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 6px; font-size: 12px; line-height: 1.3; color: #fff; background: linear-gradient(transparent, rgba(10,20,28,.62)); }
/* Desktop: vaste plaatsen in een raster van 3 bij 3, zodat er geen vak leeg blijft */
@media (min-width: 760px) {
  .beeld-blok { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 12.5rem); }
  .beeld-blok .beeld img { aspect-ratio: auto; height: 100%; }
  .beeld-blok > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .beeld-blok > :nth-child(2) { grid-column: 3; grid-row: 1 / 3; }
  .beeld-blok > :nth-child(3) { grid-column: 1; grid-row: 2 / 4; }
  .beeld-blok > :nth-child(4) { grid-column: 2; grid-row: 2; }
  .beeld-blok > :nth-child(5) { grid-column: 2 / 4; grid-row: 3; }
  /* IJsvogel: het vak is breder dan de foto, dus van boven uitsnijden zodat de kop heel blijft */
  .beeld-blok > :nth-child(5) img { object-position: 50% 0; }
}

/* Opsommingen met een sneeuwvlokje uit de cover */
.hoofdstuk li, .pro-lijst li { position: relative; padding-left: 28px; list-style: none; }
.pro-lijst { padding-left: 0; }
.hoofdstuk li::before, .pro-lijst li::before { content: ""; position: absolute; left: 0; top: .18em; width: 16px; height: 16px; background: var(--ijs-donker);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M12 2l-2 2M12 2l2 2M12 22l-2-2M12 22l2-2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M12 2l-2 2M12 2l2 2M12 22l-2-2M12 22l2-2'/%3E%3C/svg%3E") center / contain no-repeat; }
.hoofdstuk li { padding-top: 6px; padding-bottom: 6px; }
/* Vlokje op het midden van de hoofdletters van de eerste regel (gemeten: .18em bij Centrale 18px) */
.hoofdstuk li::before { top: calc(6px + .18em); }

/* Kleine letters onder de betaalknop: dat het abonnement na de proef doorloopt */
.kassa-klein { font-size: 13px; line-height: 1.45; color: var(--grijs); margin: 8px 0 0; }

.tijdlijn { list-style: none; margin: 22px 0 0; padding: 0 0 0 26px; border-left: 2px solid var(--ijs); }
.tijdlijn li { position: relative; padding: 0 0 22px; }
.tijdlijn li:last-child { padding-bottom: 0; }
.tijdlijn li::before { content: ""; position: absolute; left: -34px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--sneeuw); border: 2px solid var(--ijs-donker); }
.tijdlijn li:first-child::before { background: var(--ijs-donker); }
.tl-wanneer { display: block; font-weight: 700; }
.tl-wat { display: block; }

.pro-lijst { margin: 14px 0 18px; padding-left: 1.1em; }
.pro-lijst li { margin-bottom: 8px; }
.pro-noot { color: var(--grijs); }
.kiyoh { display: flex; align-items: center; gap: 12px; margin: 0; }
.kiyoh img { width: 40px; height: 40px; }

.vragen-blok details { border-bottom: 1px solid var(--rand); }
.vragen-blok summary { cursor: pointer; padding: 16px 32px 16px 0; font-weight: 500; list-style: none; position: relative; }
.vragen-blok summary::-webkit-details-marker { display: none; }
.vragen-blok summary::after { content: ""; position: absolute; right: 6px; top: 24px; width: 10px; height: 10px; border-right: 2px solid var(--ijs-donker); border-bottom: 2px solid var(--ijs-donker); transform: rotate(45deg); transition: transform .15s; }
.vragen-blok details[open] summary::after { transform: rotate(-135deg); top: 28px; }
.vragen-blok details p { margin: 0 0 18px; color: var(--grijs); }

.voet { max-width: var(--kolom); margin: 0 auto; padding: 32px var(--kantlijn) 120px; font-size: 15px; color: var(--grijs); }
.voet a { margin-left: 10px; }

/* Vaste koopbalk onderin (mobiel), verschijnt als de heldknop uit beeld is */
.koopbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px var(--kantlijn) calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--rand); box-shadow: 0 -8px 24px -12px rgba(20,33,43,.25); transform: translateY(110%); transition: transform .25s ease; }
.koopbalk.aan { transform: none; }
.koopbalk img { width: 40px; border-radius: 2px; }
.koopbalk p { margin: 0; flex: 1; font-size: 15px; line-height: 1.3; }
.koopbalk p b { display: block; font-size: 16px; }

/* Kassa: volledig scherm op de telefoon, paneel rechts op desktop */
.kassa { padding: 0; border: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: var(--wit); color: var(--nacht); }
.kassa:focus { outline: none; }
.kassa::backdrop { background: rgba(20,33,43,.55); }
html.kassa-open, html.kassa-open body { overflow: hidden; }
.kassa-form { max-width: 34rem; margin: 0 auto; padding: 0 var(--kantlijn); }
.kassa-kop { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; background: var(--wit); border-bottom: 1px solid var(--ijs-licht); }
.kassa-kop h2 { font-size: 1.3rem; }
.kassa-sluit { appearance: none; border: 0; background: var(--sneeuw); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.kassa-sluit svg { width: 20px; height: 20px; stroke: var(--nacht); stroke-width: 2.4; stroke-linecap: round; fill: none; }

.kassa-best { display: flex; gap: 14px; align-items: flex-start; margin: 18px 0 22px; padding: 14px; background: var(--sneeuw); border-radius: 10px; }
.kassa-best img { width: 48px; border-radius: 2px; flex: none; }
.kassa-regels { list-style: none; margin: 0; padding: 0; flex: 1; font-size: 16px; }
.kassa-regels li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.kassa-regels li span:last-child { white-space: nowrap; }
.kassa-regels small { display: block; font-size: 13px; line-height: 1.35; color: var(--grijs); }

.veld { display: block; margin-bottom: 14px; }
.veld > span { display: block; font-weight: 500; font-size: 16px; margin-bottom: 6px; }
.veld > span i { font-style: normal; font-weight: 400; color: var(--grijs); }
.veld input, .veld select { width: 100%; font: inherit; font-size: 17px; color: var(--nacht); background: var(--wit); border: 1px solid #9FB3C3; border-radius: 10px; padding: 13px 14px; min-height: 52px; }
.veld input:focus, .veld select:focus { outline: none; border-color: var(--ijs-donker); box-shadow: 0 0 0 3px rgba(63,110,147,.25); }
.veld input.fout { border-color: var(--fout); }
.veld .hint { display: block; font-size: 15px; color: var(--grijs); margin-top: 6px; }
.suggestie { display: block; font-size: 15px; margin-top: 6px; }
.suggestie button { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--ijs-donker); text-decoration: underline; cursor: pointer; }
.veld-rij { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; }

fieldset { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
legend { font-weight: 700; font-size: 1.1rem; padding: 0; margin-bottom: 12px; }

.kassa-variant { font-size: 16px; background: var(--sneeuw); border-left: 4px solid var(--ijs); padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 0 0 6px; }
.betaal-vak { min-height: 120px; }
.betaal-vak.wacht #betaal { display: none; }
.betaal-vak:not(.wacht) .betaal-hint { display: none; }
.betaal-hint { color: var(--grijs); font-size: 16px; background: var(--sneeuw); border-radius: 10px; padding: 18px; margin: 0; }

.kassa-fout { color: var(--fout); font-weight: 500; font-size: 16px; margin: 0 0 8px; }
/* De verlengzin: gewone tekst, zelfde maat als de rest, direct boven de knop (besluit 9, art. 6:230v lid 2 BW) */
.kassa-verleng { margin: 0 0 10px; font-size: 16px; line-height: 1.4; }
.kassa-voet { position: sticky; bottom: 0; z-index: 2; margin: 18px calc(-1 * var(--kantlijn)) 0; padding: 12px var(--kantlijn) calc(12px + env(safe-area-inset-bottom)); background: var(--wit); border-top: 1px solid var(--ijs-licht); box-shadow: 0 -10px 24px -16px rgba(20,33,43,.35); }
.kassa-machtiging, .kassa-akkoord { font-size: 15px; color: var(--grijs); margin: 0 0 16px; }
.kassa-machtiging p { margin: 0 0 8px; }
.kassa-machtiging summary { cursor: pointer; color: var(--ijs-donker); }
.kassa-machtiging details p { margin-top: 8px; }
.kassa-knop.bezig { opacity: .8; cursor: progress; }
.kassa-veilig { font-size: 15px; color: var(--grijs); margin: 0; }

/* Bedankpagina */
.bedankt { max-width: var(--kolom); margin: 0 auto; padding: 24px var(--kantlijn) 80px; }
.bedankt-kop { display: flex; gap: 18px; align-items: center; margin: 12px 0 24px; }
.bedankt-kop img { width: 92px; border-radius: 2px; box-shadow: 0 10px 24px -10px rgba(20,33,43,.4); }
.bedankt h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); }

@media (min-width: 600px) {
  :root { --kantlijn: 32px; }
  .hoofdstukken { grid-template-columns: 1fr 1fr; gap: 30px 36px; }
  .held-actie .knop { width: auto; min-width: 22rem; }
}

@media (min-width: 960px) {
  .held { grid-template-columns: 420px 1fr; align-items: center; gap: 72px; padding-top: 40px; padding-bottom: 72px; }
  .held-cover { width: 100%; }
  .held-tekst { margin: 0; }
  .zegel { left: -64px; top: -44px; width: 136px; height: 136px; }
  .zegel-tekst { width: 92px; height: 92px; }
  .zegel-tekst small { font-size: 12px; }
  .zegel-tekst b { font-size: 22px; }
  .koopbalk { display: none; }
  .kassa { left: auto; right: 0; width: 520px; height: 100%; max-height: 100%; }
  .voet { padding-bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.bedankt-sub { font-size: 1.3rem; margin: 28px 0 10px; }

/* Bedankpagina: wat je vandaag al met Pro kunt. Eén tekst per variant (data-v op .pro-start, gezet door bedankt.html). */
.pro-start:not([data-v="proef"]) .v-proef, .pro-start:not([data-v="pro"]) .v-pro, .pro-start:not([data-v="onbekend"]) .v-onbekend { display: none; }
.pro-start[data-v="proef"] p.v-onbekend, .pro-start[data-v="onbekend"] p.v-proef { display: block; }
.pro-start { margin-bottom: 28px; }
.voordelen { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.voordelen a { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center; padding: 10px; background: var(--wit); border: 1px solid var(--ijs-licht); border-radius: 10px; color: var(--nacht); text-decoration: none; }
.voordelen a:hover { border-color: var(--ijs); color: var(--nacht); }
.voordelen img { width: 128px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.voordelen span { min-width: 0; font-size: 16px; line-height: 1.4; color: var(--grijs); }
.voordelen b { display: block; font-size: var(--maat); color: var(--nacht); margin-bottom: 2px; }
/* Eerste les: het beeld van de cursus zelf (LearnWorlds), zodat je hem daar herkent */
.eerste-les { display: block; overflow: hidden; margin: 0 0 18px; border-radius: 10px; background: var(--ijs-donker); color: var(--wit); text-decoration: none; }
.eerste-les:hover { color: var(--wit); background-color: #355F80; }
.eerste-les img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.eerste-les-tekst { display: block; padding: 16px 20px 18px; }
.eerste-les small { display: block; font-size: 15px; opacity: .85; }
.eerste-les b { display: block; font-size: 1.25rem; margin: 2px 0 4px; }
.eerste-les-tekst > span { display: block; font-size: 16px; line-height: 1.45; opacity: .92; }
.knop-donker { display: block; text-align: center; text-decoration: none; background: var(--nacht); color: var(--wit); box-shadow: none; }
.knop-donker:hover { background: #22384A; color: var(--wit); }
.pro-hint { font-size: 15px; color: var(--grijs); margin: 12px 0 0; }
@media (max-width: 380px) {
  .voordelen a { grid-template-columns: 96px 1fr; }
  .voordelen img { width: 96px; }
}