/* previtality.com — de gemengde merklook van de presentaties (Vintea UK 2026, O.OMG Lidl, WHOOZAA ALDI):
   een vette schreefletter voor koppen, gespatieerde kapitalen als bovenregel, afwisselend licht, donker en goud
   (Vintea-goud met bladpatroon), fotobanden met verloop, afgeronde foto's en zandkleurige kaarten. Het huis
   (Previtality) krijgt de Soolong-basis: crème, inkt, mat goud, aubergine, één grote ronde hoek en de tab-knop.
   Elk merk houdt binnen dat kader zijn eigen kleur en logo. Geen externe bronnen: fonts staan in /a/fonts. */

@font-face { font-family: "Source Serif 4"; src: url("/a/fonts/SourceSerif4-Variable.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/a/fonts/nunito-sans-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/a/fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/a/fonts/nunito-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/a/fonts/nunito-sans-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --inkt: #1c1c1b;
  --inkt-zacht: #57534e;
  --nacht: #1d1a18;
  --nacht-2: #2a2522;
  --creme: #fffcf7;
  --ivoor: #f8f5f0;
  --zand: #f2ece3;
  --lijn: #e6ddd0;
  --goud: #a17c21;
  --goud-diep: #81641a;
  --goud-licht: #d9b45a;
  --vintea-goud: #ecbc4d;
  --vintea-oranje: #e39e1c;
  --rood: #c5361c;
  --koper: #8e634a;
  --koper-licht: #b98f66;
  --aubergine: #3e2a2f;
  --oomg-roze: #e43c58;
  --oomg-oranje: #f4913a;
  --vintea-jasmin: #eb5c37;
  --vintea-rooibos: #ef7d83;
  --vintea-earlgrey: #407fbb;
  --kop: "Source Serif 4", Georgia, "Times New Roman", serif;
  --tekst: "Avenir Next", Avenir, "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --breed: 1180px;
  --hoek: 18px;
  --hoek-groot: 120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--creme); color: var(--inkt); font-family: var(--tekst); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: var(--goud-diep); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
.donker a:focus-visible, .foto a:focus-visible { outline-color: #fff; }
h1, h2, h3, h4 { font-family: var(--kop); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
p { margin: 0 0 1em; }
.overslaan { position: absolute; left: -9999px; }
.overslaan:focus { left: 16px; top: 8px; z-index: 50; background: #fff; padding: 8px 12px; }

.eyebrow { font-family: var(--tekst); font-size: .78rem; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: var(--rood); margin: 0 0 .9em; display: block; }
.donker .eyebrow, .foto .eyebrow { color: var(--vintea-goud); }
.goud .eyebrow { color: var(--inkt); }
.klein { font-size: .86rem; color: var(--inkt-zacht); }
.donker .klein, .foto .klein { color: rgba(255,255,255,.72); }
.bron { font-size: .78rem; font-style: italic; color: var(--inkt-zacht); margin-top: 1.2em; }
.donker .bron { color: rgba(255,255,255,.6); }

.wrap { max-width: var(--breed); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

/* ---------- kop en voet ---------- */
.kopbalk { position: sticky; top: 0; z-index: 20; background: rgba(255,252,247,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--lijn); }
.kopbalk .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.merkteken { display: flex; flex-direction: column; text-decoration: none; color: var(--inkt); line-height: 1.1; }
.merkteken b { font-family: var(--kop); font-size: 1.15rem; letter-spacing: .32em; font-weight: 700; }
.merkteken span { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--goud-diep); font-weight: 800; margin-top: 3px; }
.menu { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; justify-content: flex-end; }
.menu a { text-decoration: none; color: var(--inkt); font-weight: 500; font-size: .95rem; padding: 6px 0; }
.menu a[aria-current="page"] { color: var(--goud-diep); box-shadow: inset 0 -2px 0 var(--goud); }
@media (max-width: 760px) {
  .kopbalk .wrap { flex-direction: column; align-items: flex-start; padding-top: 10px; padding-bottom: 8px; gap: 4px; }
  .menu { justify-content: flex-start; gap: 2px 14px; }
  .menu a { font-size: .9rem; }
}

.voet { background: var(--nacht); color: rgba(255,255,255,.82); padding: 56px 0 40px; margin-top: 0; font-size: .92rem; }
.voet .logos { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin-bottom: 28px; }
.voet .logos img { height: 44px; width: auto; }
.voet .logos img.rond { height: 60px; }
.voet a { color: var(--vintea-goud); }
.voet .regel { border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- knoppen: de Soolong-tab (één ronde hoek rechtsonder) ---------- */
.knop { display: inline-block; background: var(--goud); color: #fff; font-weight: 800; font-size: 1.02rem; text-decoration: none; padding: 13px 26px; border: 0; border-radius: 0 0 22px 0; cursor: pointer; font-family: var(--tekst); line-height: 1.3; }
.knop:hover { background: var(--goud-diep); }
.knop.licht { background: transparent; color: var(--inkt); box-shadow: inset 0 0 0 2px var(--goud); }
.donker .knop.licht, .foto .knop.licht { color: #fff; box-shadow: inset 0 0 0 2px var(--vintea-goud); }
.knop.goud { background: var(--vintea-goud); color: var(--inkt); }
.knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.4em; }

/* ---------- vlakken ---------- */
.vlak { padding: clamp(56px, 8vw, 104px) 0; position: relative; }
.licht { background: var(--creme); }
.ivoor { background: var(--ivoor); }
.donker { background: var(--nacht); color: #fff; }
.donker h2, .donker h3 { color: #fff; }
.donker .goudkop, .goudkop { color: var(--vintea-goud); }
.goud { background: var(--vintea-goud) url("/a/img/goud-bladpatroon.webp") center/cover; color: var(--inkt); }
.foto { color: #fff; background: var(--nacht) center/cover no-repeat; min-height: min(78vh, 680px); display: flex; align-items: center; }
.foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,16,14,.82) 0%, rgba(20,16,14,.55) 45%, rgba(20,16,14,.05) 100%); }
.foto > .wrap { position: relative; width: 100%; }
.foto h1, .foto h2 { color: #fff; max-width: 14em; }
.foto p { max-width: 36em; }
.hoek { border-radius: 0 0 0 var(--hoek-groot); overflow: hidden; }
@media (max-width: 640px) { .hoek { border-radius: 0 0 0 56px; } }

/* ---------- raster ---------- */
.twee { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 36px); }
.vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .twee, .drie { grid-template-columns: 1fr; } .vier { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .vier { grid-template-columns: 1fr; } }
.beeld { border-radius: var(--hoek); width: 100%; height: auto; object-fit: cover; }
.punten { padding-left: 1.1em; margin: 0; }
.punten li { margin: 0 0 .55em; }
.punten li::marker { color: var(--goud); }
.donker .punten li::marker { color: var(--vintea-goud); }

/* ---------- merken: het donkere drieluik uit "One house, three brands" ---------- */
.merk { display: flex; flex-direction: column; }
.merk .boven { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; margin-bottom: 18px; }
.merk .boven img.foto-m { border-radius: var(--hoek); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.merk .boven img.logo-m { width: 112px; height: auto; }
.merk h3 { color: var(--vintea-goud); }
.merk .rol { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 800; margin-bottom: .4em; }
.merk.soolong .rol { color: var(--goud-licht); }
.merk.vintea .rol { color: var(--vintea-jasmin); }
.merk.oomg .rol { color: var(--oomg-oranje); }
.merk .prijs { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); font-size: .9rem; color: rgba(255,255,255,.75); }
.merkbalk { height: 4px; border-radius: 4px; margin-bottom: 14px; }
.merk.soolong .merkbalk { background: linear-gradient(90deg, var(--goud), var(--goud-licht)); }
.merk.vintea .merkbalk { background: linear-gradient(90deg, var(--vintea-jasmin), var(--vintea-goud), var(--vintea-earlgrey)); }
.merk.oomg .merkbalk { background: linear-gradient(90deg, var(--oomg-roze), var(--oomg-oranje)); }

/* ---------- kerncijfers ---------- */
.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.cijfer { background: var(--zand); border-radius: var(--hoek); padding: 22px 22px 18px; }
.cijfer b { display: block; font-family: var(--kop); font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; color: var(--rood); margin-bottom: 10px; }
.cijfer span { font-size: .92rem; color: var(--inkt-zacht); display: block; }
.donker .cijfer { background: var(--nacht-2); }
.donker .cijfer b { color: var(--vintea-goud); }
.donker .cijfer span { color: rgba(255,255,255,.75); }
.goud .cijfer { background: rgba(255,255,255,.55); }
.goud .cijfer b { color: var(--inkt); }

/* ---------- kaarten (01 02 03) ---------- */
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.kaart { background: var(--zand); border-radius: var(--hoek); padding: 24px; }
.kaart .nr { font-family: var(--kop); font-weight: 700; color: var(--vintea-oranje); font-size: 1.6rem; display: block; margin-bottom: 6px; }
.kaart h3 { font-size: 1.15rem; }
.kaart p { margin: 0; font-size: .96rem; color: var(--inkt-zacht); }
.donker .kaart { background: var(--nacht-2); }
.donker .kaart p { color: rgba(255,255,255,.75); }
.goud .kaart { background: rgba(255,255,255,.6); }
.kaart.zwart { background: var(--nacht); color: #fff; }
.kaart.zwart p { color: rgba(255,255,255,.78); }
.kaart.zwart .nr { color: var(--vintea-goud); }
.notitie { background: var(--nacht); color: #fff; border-radius: 12px; padding: 16px 20px; margin-top: 22px; font-size: .95rem; }
.notitie b { color: var(--vintea-goud); }
.donker .notitie { background: var(--nacht-2); }

/* ---------- tabellen ---------- */
.tabel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid var(--lijn); background: #fff; }
table.tabel { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 520px; }
.tabel th, .tabel td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel th { background: var(--zand); font-weight: 800; font-size: .8rem; letter-spacing: .04em; }
.tabel td.r, .tabel th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel tr.nadruk td { font-weight: 800; background: #fbf7ef; }
.tabel tr.totaal td { font-weight: 800; border-top: 2px solid var(--inkt); }
.tabel td.neg { color: var(--rood); }
.donker .tabel-wrap { background: var(--nacht-2); border-color: rgba(255,255,255,.12); }
.donker .tabel th { background: rgba(255,255,255,.06); color: var(--vintea-goud); }
.donker .tabel td { border-color: rgba(255,255,255,.1); }
.donker .tabel tr.nadruk td { background: rgba(236,188,77,.12); }

/* ---------- staafdiagram (horizontaal, met waarde in de staaf) ---------- */
.staven { display: grid; gap: 8px; }
.staaf { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; gap: 12px; align-items: center; font-size: .9rem; }
.staaf .naam { text-align: right; color: var(--inkt-zacht); }
.staaf .baan { height: 28px; display: flex; align-items: center; gap: 8px; }
.staaf .vul { height: 20px; background: #8f877e; border-radius: 0 4px 4px 0; min-width: 2px; }
.staaf .w { font-weight: 800; font-size: .82rem; color: var(--inkt); white-space: nowrap; font-variant-numeric: tabular-nums; }
.staaf.wij .vul { background: var(--rood); }
.staaf.wij .naam { color: var(--inkt); font-weight: 800; }
.donker .staaf .naam { color: rgba(255,255,255,.75); }
.donker .staaf .vul { background: #7d756d; }
.donker .staaf .w { color: #fff; }
.donker .staaf.wij .vul { background: var(--vintea-goud); }
.kolommen-grafiek { display: flex; align-items: flex-end; gap: 14px; height: 240px; border-bottom: 1px solid var(--lijn); padding-top: 24px; }
.kolommen-grafiek .k { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.kolommen-grafiek .k .v { width: 100%; max-width: 72px; background: var(--goud); border-radius: 6px 6px 0 0; position: relative; }
.kolommen-grafiek .k .v.prognose { background: repeating-linear-gradient(135deg, var(--goud) 0 3px, #f3e6c4 3px 8px); box-shadow: inset 0 0 0 2px var(--goud); }
.kolommen-grafiek .k .w { font-weight: 800; font-size: .85rem; margin-bottom: 6px; white-space: nowrap; }
.kolommen-grafiek .k .l { font-size: .8rem; color: var(--inkt-zacht); margin-top: 8px; position: absolute; bottom: -26px; white-space: nowrap; }
.kolommen-grafiek .k { position: relative; }
.legenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: .82rem; color: var(--inkt-zacht); margin-top: 36px; }
.legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------- assortiment: flessen op ware verhouding ---------- */
/* Ware verhouding: fles 308 mm, slim can 250 ml ca. 133 mm (0,43). Eén rij op desktop, twee op de telefoon. */
.rij-flessen { display: flex; align-items: flex-end; justify-content: center; gap: clamp(4px, 1.4vw, 18px); }
.rij-flessen figure { margin: 0; text-align: center; flex: 1 1 0; min-width: 0; max-width: 112px; }
.rij-flessen img { width: 100%; height: clamp(150px, 24vw, 290px); object-fit: contain; object-position: bottom; margin: 0 auto; }
.rij-flessen img.blik { height: clamp(65px, 10.3vw, 125px); }
.rij-flessen figcaption { font-size: .74rem; line-height: 1.3; color: var(--inkt-zacht); margin-top: 8px; }
@media (max-width: 640px) { .rij-flessen { flex-wrap: wrap; row-gap: 18px; } .rij-flessen figure { flex: 0 0 18%; } .rij-flessen img { height: 150px; } .rij-flessen img.blik { height: 65px; } }
.medailles { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.medailles img { width: 64px; height: 64px; }

/* ---------- formulier (contact, toegang) ---------- */
.formulier { display: grid; gap: 14px; max-width: 560px; }
.formulier label { font-weight: 800; font-size: .9rem; display: block; margin-bottom: 4px; }
.formulier input, .formulier textarea { width: 100%; font: inherit; padding: 12px 14px; border: 1px solid var(--goud); border-radius: 0; background: #fff; color: var(--inkt); }
.formulier textarea { min-height: 120px; resize: vertical; }
.donker .formulier input, .donker .formulier textarea { background: #fff; }
.vangnet { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.melding { border-radius: 12px; padding: 14px 18px; margin: 0 0 18px; background: var(--zand); }
.melding.ok { background: #e7f1e4; }
.melding.fout { background: #f8e3df; }

/* ---------- dataroom ---------- */
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.tegel { display: block; text-decoration: none; color: var(--inkt); background: #fff; border: 1px solid var(--lijn); border-radius: var(--hoek); padding: 24px; transition: transform .15s ease, box-shadow .15s ease; }
.tegel:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(28,28,27,.08); }
.tegel .eyebrow { margin-bottom: .6em; }
.tegel h3 { margin-bottom: .3em; }
.tegel p { margin: 0; color: var(--inkt-zacht); font-size: .95rem; }
.tegel.slot { opacity: .6; }
.label { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--zand); color: var(--inkt); }
.label.voorstel { background: #fdf1d4; }
.label.getekend, .label.geplaatst { background: #e7f1e4; }
.sim { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; background: var(--zand); padding: 18px; border-radius: var(--hoek); margin: 18px 0; }
.sim label { font-weight: 800; font-size: .82rem; display: block; margin-bottom: 4px; }
.sim input[type=number] { font: inherit; padding: 9px 10px; border: 1px solid var(--goud); width: 12em; background: #fff; }
.sim .vink { display: flex; align-items: center; gap: 8px; font-weight: 500; }

/* ---------- presentatiemodus: dezelfde blokken als dia's van 16:9 ---------- */
body.dia-modus { background: #0f0d0c; overflow: hidden; }
.dia-modus .dias { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; }
.dia-modus .dia { width: min(100vw, 177.78vh); height: min(56.25vw, 100vh); margin: 0 auto; scroll-snap-align: center; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: center; font-size: clamp(9px, min(1.32vw, 2.35vh), 22px); }
.dia-modus .dia + .dia { margin-top: 0; }
.dia-modus .dia .wrap { max-width: none; width: 100%; padding: 0 5.5%; }
.dia-modus .dia.vlak { padding: 3.6% 0 5%; min-height: 0; }
.dia-modus .dia h1 { font-size: 3.2em; }
.dia-modus .dia h2 { font-size: 2.3em; }
.dia-modus .dia h3 { font-size: 1.3em; }
.dia-modus .dia p, .dia-modus .dia li { font-size: 1.05em; }
.dia-modus .dia .eyebrow { font-size: .78em; }
.dia-modus .dia .cijfer b { font-size: 2.6em; }
.dia-modus .dia .cijfer span, .dia-modus .dia .kaart p, .dia-modus .dia .tabel { font-size: .92em; }
.dia-modus .dia .tabel th, .dia-modus .dia .tabel td { padding: .45em .8em; }
.dia-modus .dia .rij-flessen img { height: 16em; }
.dia-modus .dia .rij-flessen img.blik { height: 6.9em; }
.dia-modus .dia .rij-flessen figure { max-width: 7em; }
.dia-modus .dia .kaarten:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
.dia-modus .dia .kaart { padding: 1.1em 1.2em; }
.dia-modus .dia .merk .boven img.foto-m { aspect-ratio: 4 / 3; }
.dia-modus .dia .merk .boven { margin-bottom: .8em; }
.dia-modus .dia .merk p { font-size: .92em; margin-bottom: .5em; }
.dia-modus .dia .drie { margin-top: 1em !important; }
.dia-modus .dia .merk .boven img.logo-m { width: 6em; }
.dia-modus .dia .kolommen-grafiek { height: 13em; }
.dia-modus .dia .staaf .baan { height: 1.6em; }
.dia-modus .dia .beeld { max-height: 62vh; }
.dia-modus .dia.foto { min-height: 0; }
.dia-voet { position: absolute; left: 5.5%; right: 5.5%; bottom: 2.6%; display: flex; justify-content: space-between; font-size: .62em; letter-spacing: .26em; text-transform: uppercase; color: var(--inkt-zacht); }
.donker .dia-voet, .foto .dia-voet { color: rgba(255,255,255,.55); }
.dia-modus .dia-bediening { position: fixed; right: 16px; bottom: 14px; z-index: 30; display: flex; gap: 8px; }
.dia-bediening a, .dia-bediening button { background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 999px; padding: 8px 14px; font: 600 .85rem var(--tekst); text-decoration: none; cursor: pointer; }
body:not(.dia-modus) .dia-voet, body:not(.dia-modus) .dia-bediening { display: none; }

@media print {
  @page { size: 297mm 167mm; margin: 0; }
  body.dia-modus { background: #fff; overflow: visible; }
  .dia-modus .dias { height: auto; overflow: visible; }
  .dia-modus .dia { width: 297mm; height: 167mm; page-break-after: always; break-after: page; font-size: 11.5px; }
  .dia-bediening, .kopbalk { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tegel { transition: none; } }