/* Basis voor voorbeeldsites met een eigen ontwerp: alleen lettertypes, de SGS-balk en de tijdelijke foto's.
   Al het andere (kop, voet, secties, formulieren, kleuren) maakt elke site zelf, in site/assets/voorbeelden/site/<slug>-<letter>.css. */
@font-face { font-family: "Anton"; font-weight: 400; font-display: swap; src: url("../fonts/Anton-Regular.woff2") format("woff2"); }
@font-face { font-family: "Archivo Black"; font-weight: 400; font-display: swap; src: url("../fonts/ArchivoBlack-Regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../fonts/Barlow-Medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../fonts/Barlow-Regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../fonts/Barlow-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("../fonts/BarlowCondensed-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-display: swap; src: url("../fonts/BigShouldersDisplay-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 600; font-display: swap; src: url("../fonts/BigShouldersDisplay-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url("../fonts/BricolageGrotesque-Bold.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url("../fonts/BricolageGrotesque-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 500; font-display: swap; src: url("../fonts/BricolageGrotesque-Medium.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 600; font-display: swap; src: url("../fonts/Caveat-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-display: swap; src: url("../fonts/CormorantGaramond-Medium.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/CormorantGaramond-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url("../fonts/DMMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("../fonts/DMMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url("../fonts/DMSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url("../fonts/DMSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 600; font-display: swap; src: url("../fonts/DMSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/DMSerifDisplay-Italic.woff2") format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-weight: 400; font-display: swap; src: url("../fonts/DMSerifDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-display: swap; src: url("../fonts/Fraunces-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-style: italic; font-display: swap; src: url("../fonts/Fraunces-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url("../fonts/Fredoka-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url("../fonts/InstrumentSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap; src: url("../fonts/InstrumentSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-display: swap; src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url("../fonts/Jost-Medium.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 400; font-display: swap; src: url("../fonts/Jost-Regular.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url("../fonts/Nunito-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 500; font-display: swap; src: url("../fonts/Nunito-Medium.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 500; font-display: swap; src: url("../fonts/PlayfairDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/PlayfairDisplay-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "Shippori Mincho"; font-weight: 700; font-display: swap; src: url("../fonts/ShipporiMincho-Bold.woff2") format("woff2"); }
@font-face { font-family: "Shippori Mincho"; font-weight: 500; font-display: swap; src: url("../fonts/ShipporiMincho-Medium.woff2") format("woff2"); }
@font-face { font-family: "Shrikhand"; font-weight: 400; font-display: swap; src: url("../fonts/Shrikhand-Regular.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("../fonts/SpaceGrotesk-Bold.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("../fonts/SpaceGrotesk-Medium.woff2") format("woff2"); }
@font-face { font-family: "Special Elite"; font-weight: 400; font-display: swap; src: url("../fonts/SpecialElite-Regular.woff2") format("woff2"); }
@font-face { font-family: "Young Serif"; font-weight: 400; font-display: swap; src: url("../fonts/YoungSerif-Regular.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, video, svg { max-width: 100%; }
img, video { display: block; }
/* ── SGS-balk en kenmerken ─────────────────────────────────────── */
.demo-bar { position: sticky; top: 0; z-index: 60; background: #141118; color: #ece8ef; font: 500 13px/1.35 "Barlow", sans-serif; text-align: center; padding: 8px 14px; }
.demo-bar a { color: #f2a81d; font-weight: 600; text-decoration: none; }
.demo-bar a:hover { text-decoration: underline; }
.demo-bar .pakket { background: #f2a81d; color: #18151d; font-weight: 700; padding: 2px 10px; border-radius: 999px; margin-right: 6px; }
.demo-bar a.waarom { background: #ff5fa2; color: #18151d; padding: 2px 10px; border-radius: 999px; }
.spoedbalk { background: #d62d20; color: #fff; text-align: center; padding: 9px 16px; font-weight: 500; }
.spoedbalk b { text-transform: uppercase; letter-spacing: 1px; margin-right: 6px; }
.spoedbalk a { color: #fff; font-weight: 700; font-size: 18px; margin-left: 6px; }

/* ── Tijdelijke foto's ─────────────────────────────────────────── */
.ph { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: var(--img-r, 0); min-height: 170px; color: color-mix(in srgb, var(--a, #8a7a6a) 70%, #fff);
      background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--a2, #c9b8a6) 45%, transparent) 0%, transparent 60%),
                  linear-gradient(140deg, color-mix(in srgb, var(--a, #8a7a6a) 28%, var(--bg2, #eeeae4)), color-mix(in srgb, var(--a, #8a7a6a) 55%, var(--bg2, #eeeae4))); }
.ph-icoon { width: 22%; max-width: 96px; min-width: 44px; height: auto; opacity: .55; color: #fff; }
.ph-cap { position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; gap: 8px; align-items: flex-start; font: 400 12px/1.35 "Barlow", sans-serif;
          color: #1b1b1b; background: #ffffffd9; padding: 6px 10px; border-radius: 8px; max-width: 340px; text-transform: none; letter-spacing: 0; font-style: normal; }
.ph-cap svg { width: 14px; height: 14px; margin-top: 1px; }