/* "Over deze website" bij voorbeeldsites met een eigen ontwerp: de uitleg van SGS, in de stijl van SGS.
   Alleen binnen .ods-wrap, zodat de kop en voet van de site zelf ongemoeid blijven. */
.ods-wrap { --o-bg: #f7f5f2; --o-bg2: #efebe5; --o-ink: #18151d; --o-muted: #5d5864; --o-line: #e2ddd5; --o-a: #c4206a; --o-amber: #f2a81d;
            background: var(--o-bg); color: var(--o-ink); font: 400 17px/1.65 "Barlow", system-ui, sans-serif; }
.ods-wrap h1, .ods-wrap h2, .ods-wrap h3 { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 800; line-height: 1.05; margin: 0 0 12px;
                                         letter-spacing: .2px; text-transform: none; font-style: normal; color: var(--o-ink); }
.ods-wrap h1 { font-size: clamp(38px, 5vw, 62px); max-width: 900px; }
.ods-wrap h2 { font-size: clamp(30px, 3.4vw, 44px); }
.ods-wrap h3 { font-size: 22px; }
.ods-wrap p { margin: 0 0 14px; }
.ods-wrap a { color: var(--o-a); }
.ods-wrap .vw { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.ods-wrap .sec { padding: 84px 0; }
.ods-wrap .sec:nth-of-type(odd) { background: var(--o-bg2); }
.ods-wrap .page-hero { padding: 70px 0 60px; background: #141118; color: #ece8ef; }
.ods-wrap .page-hero h1 { color: #fff; }
.ods-wrap .page-hero .lead { color: #b9b2c2; }
.ods-wrap .crumb { font-size: 14px; color: #a9a2b1; margin-bottom: 14px; }
.ods-wrap .crumb a { color: var(--o-amber); text-decoration: none; }
.ods-wrap .eyebrow { font: 600 13px/1.4 "Barlow", sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: var(--o-a); margin: 0 0 12px; display: block; }
.ods-wrap .page-hero .eyebrow { color: #ff5fa2; }
.ods-wrap .lead { font-size: 19px; color: var(--o-muted); max-width: 680px; }
.ods-wrap .mt { margin-top: 30px !important; }
.ods-wrap .ods-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 34px; max-width: 860px; }
.ods-wrap .ods-stats div { border-top: 3px solid var(--o-amber); padding-top: 12px; }
.ods-wrap .ods-stats b { display: block; font: 800 34px/1 "Barlow Condensed", sans-serif; color: #fff; }
.ods-wrap .ods-stats span { color: #b9b2c2; font-size: 14px; }
.ods-wrap .hoofdstuk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.ods-wrap .checklist { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; }
.ods-wrap .checklist li { display: flex; gap: 12px; align-items: flex-start; }
.ods-wrap .checklist svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--o-ink); color: #fff; margin-top: 2px; flex: none; }
.ods-wrap .serp { background: #fff; color: #202124; border: 1px solid #e4e6ea; border-radius: 16px; padding: 22px; box-shadow: 0 14px 34px #0000001a; font-family: Arial, sans-serif; margin-bottom: 22px; }
.ods-wrap .serp-q { display: flex; align-items: center; gap: 10px; border: 1px solid #dfe1e5; border-radius: 999px; padding: 9px 16px; font-size: 15px; margin-bottom: 18px; }
.ods-wrap .serp-q svg { width: 17px; height: 17px; color: #9aa0a6; }
.ods-wrap .serp-site { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ods-wrap .serp-site .mark { width: 28px; height: 28px; font-size: 11px; border-radius: 50%; background: #18151d; color: #fff; display: inline-grid; place-items: center; font-weight: 700; flex: none; }
.ods-wrap .serp-site small { display: block; color: #4d5156; font-size: 12px; }
.ods-wrap .serp-titel { color: #1a0dab; font-size: 19px; margin: 6px 0 4px; line-height: 1.3; }
.ods-wrap .serp-tekst { color: #4d5156; font-size: 14px; line-height: 1.55; margin: 0; }
.ods-wrap .pakketkaart { background: #fff; border: 2px solid var(--o-line); border-radius: 18px; padding: 24px; }
.ods-wrap .pakketkaart.pk-plus { border-color: var(--o-amber); box-shadow: 0 0 0 5px #f2a81d26; }
.ods-wrap .pakketkaart > b { display: inline-block; font: 800 24px/1 "Barlow Condensed", sans-serif; background: var(--o-amber); color: #18151d; padding: 6px 14px; border-radius: 999px; }
.ods-wrap .pakketkaart.pk-basis > b { background: var(--o-ink); color: #fff; }
.ods-wrap .paginalijst { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ods-wrap .paginalijst a { display: inline-block; padding: 6px 12px; border: 1px solid #cfc8bf; border-radius: 999px; text-decoration: none; font-size: 14.5px; color: var(--o-ink); }
.ods-wrap .sgs-band { background: #141118; color: #ece8ef; padding: 64px 0; }
.ods-wrap .sgs-band .vw { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.ods-wrap .sgs-band h2 { color: #fff; }
.ods-wrap .sgs-band .eyebrow { color: #ff5fa2; }
.ods-wrap .sgs-band p { color: #a9a2b1; max-width: 560px; margin: 0; }
.ods-wrap .acts { display: flex; flex-wrap: wrap; gap: 12px; }
.ods-wrap .vbtn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border-radius: 12px; font: 600 16px/1.2 "Barlow", sans-serif;
                  text-decoration: none; border: 2px solid #fff; color: #fff; }
.ods-wrap .vbtn.licht { background: var(--o-amber); border-color: var(--o-amber); color: #18151d; }
@media (max-width: 860px) {
  .ods-wrap .hoofdstuk { grid-template-columns: 1fr; gap: 30px; }
  .ods-wrap .ods-stats { grid-template-columns: 1fr 1fr; }
  .ods-wrap .sec { padding: 60px 0; }
}