/* Inhoudspagina's */
.pagina {
  padding: 48px 0 8px;
}

.inleiding {
  max-width: 780px;
  margin: 0 0 32px;
  font-size: 20px;
  color: var(--zwart);
}

.slogan {
  margin: 0 0 32px;
  color: var(--rood);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sectiekop {
  margin: 48px 0 20px;
}

.diensten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 56px;
}

.diensten.drie {
  grid-template-columns: repeat(3, 1fr);
}

.dienst {
  border-top: 3px solid var(--rood);
  padding-top: 14px;
}

.nummer {
  margin: 0;
  color: var(--rood);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 22px;
}

.dienst h2,
.dienst h3 {
  margin: 0;
  color: var(--zwart);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  text-transform: uppercase;
}

.ondertitel {
  margin: 2px 0 12px;
  color: var(--label);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.punten {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.punten li {
  position: relative;
  padding-left: 22px;
  margin: 6px 0;
}

.punten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  background: var(--rood);
}

.doorlink {
  margin: 18px 0 0;
}

.doorlink a,
.stappen a {
  color: var(--rood);
  font-weight: 700;
  text-decoration: none;
}

.doorlink a:hover,
.stappen a:hover { text-decoration: underline; }

.band {
  margin: 48px 0;
  padding: 18px 24px;
  background: var(--zwart);
  color: var(--wit);
  font-size: 19px;
  border-left: 8px solid var(--rood);
}

.band strong {
  font-family: var(--kop);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rood);
}

.stappen-blok {
  margin-top: 48px;
}

.stappen-blok h2 {
  margin-bottom: 20px;
}

.stappen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stap;
}

.stappen.geen-nummer {
  grid-template-columns: repeat(3, 1fr);
}

.stappen li {
  counter-increment: stap;
  padding: 20px;
  background: #F4F4F3;
  border-top: 6px solid var(--rood);
}

.stappen li::before {
  content: counter(stap, decimal-leading-zero);
  display: block;
  color: var(--rood);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 22px;
}

.stappen.geen-nummer li::before { content: none; }

.stappen h3 {
  margin: 4px 0 6px;
  color: var(--zwart);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
}

.stappen p { margin: 0; }

.resultaat {
  margin: 48px 0 0;
  text-align: center;
}

.resultaat h2 {
  max-width: 860px;
  margin: 0 auto;
}

.resultaat p {
  max-width: 760px;
  margin: 12px auto 0;
  color: var(--zwart);
  font-size: 19px;
}

/* Home */
.affiche {
  display: block;
  margin: 8px 0 40px;
}

.affiche img,
.foto img,
.promo-raster img {
  display: block;
  width: 100%;
  height: auto;
}

.tegels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tegel {
  display: block;
  padding: 24px;
  border-top: 6px solid var(--rood);
  background: #F4F4F3;
  color: var(--zwart);
  text-decoration: none;
}

.tegel h2 { font-size: 26px; }

.tegel span { color: var(--label); }

.tegel:hover { background: #ECECEA; }

.lid {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 48px 0 0;
  color: var(--label);
}

.lid p { margin: 0; }

.lid img { width: 160px; height: auto; }

/* Promo */
.geldig {
  margin: 0 0 24px;
  color: var(--rood);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
}

.promo-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.promo-raster figure { margin: 0; }

.promo-raster figcaption {
  margin-top: 8px;
  color: var(--zwart);
  font-family: var(--kop);
  font-weight: 700;
  text-transform: uppercase;
}

/* Ons verhaal */
.tijdlijn {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.tijdlijn li {
  padding: 14px;
  border-top: 6px solid var(--rood);
  background: #F4F4F3;
  font-size: 15px;
}

.tijdlijn strong {
  display: block;
  color: var(--zwart);
  font-family: var(--kop);
  font-size: 26px;
}

.verhaal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 56px;
  align-items: start;
}

.verhaal section {
  border-top: 3px solid var(--rood);
  padding-top: 14px;
}

.verhaal h2 { font-size: 28px; }

.foto { margin: 0; }

.citaat {
  margin: 48px 0 16px;
  padding: 0 0 0 24px;
  border-left: 8px solid var(--rood);
  color: var(--zwart);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
}

/* Merken */
.merken {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.merk {
  padding: 24px;
  background: #F4F4F3;
  border-top: 6px solid var(--rood);
}

.merk h3 {
  margin: 0;
  color: var(--zwart);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
}

.kernzin {
  color: var(--zwart);
  font-weight: 700;
}

.merklogos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.merklogos img {
  width: 180px;
  height: auto;
}

.knoppenrij {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 32px 0;
}

.knop.tweede-licht {
  background: transparent;
  color: var(--rood);
}

.galerij {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.galerij img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: contain;
  background: #F4F4F3;
}

.galerij img.op-donker { background: var(--zwart); padding: 24px; }

/* Refurb */
.tweeluik {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.kader-licht {
  padding: 24px;
  background: #F4F4F3;
  border-top: 6px solid var(--rood);
}

.seizoen {
  margin-bottom: 0;
  color: var(--zwart);
  font-weight: 700;
}

.garantie {
  margin-top: 48px;
}

.garantie table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
}

.garantie th,
.garantie td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--lijn);
  text-align: left;
}

.garantie thead th {
  color: var(--label);
  font-weight: 400;
  border-bottom: 3px solid var(--rood);
}

.garantie tbody th {
  color: var(--zwart);
  font-family: var(--kop);
  text-transform: uppercase;
}

.garantie td:nth-child(2) {
  color: var(--zwart);
  font-weight: 700;
  white-space: nowrap;
}

/* Contact */
.contactkaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.contactkaart {
  display: block;
  padding: 20px;
  background: #F4F4F3;
  border-top: 6px solid var(--rood);
  color: var(--zwart);
  text-decoration: none;
}

.contactkaart:hover { background: #ECECEA; }

.contactkaart .label {
  display: block;
  font-family: var(--kop);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
}

.contactkaart .waarde { color: var(--label); }

.documenten { margin-top: 40px; }

.documenten a { color: var(--zwart); }

/* Voettekst */
.voet {
  background: #000;
  color: #bdbdbd;
  font-size: 14px;
}

.voet .wrap {
  padding-top: 20px;
  padding-bottom: 24px;
}

.voet p { margin: 4px 0; }

.voet strong { color: var(--wit); }

.voet a { color: #bdbdbd; }

.voet a:hover { color: var(--wit); }

/* Gsm */
@media (max-width: 900px) {
  .tijdlijn { grid-template-columns: repeat(3, 1fr); }

  .galerij,
  .promo-raster,
  .tegels { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .diensten,
  .diensten.drie,
  .verhaal,
  .merken,
  .tweeluik { grid-template-columns: 1fr; }

  .stappen,
  .stappen.geen-nummer { grid-template-columns: 1fr 1fr; }

  .inleiding { font-size: 18px; }

  .citaat { font-size: 24px; }
}

@media (max-width: 480px) {
  .stappen,
  .stappen.geen-nummer,
  .galerij,
  .promo-raster,
  .tegels,
  .tijdlijn { grid-template-columns: 1fr; }

  .galerij img { height: 220px; }

  .garantie th,
  .garantie td { padding: 10px 6px; font-size: 15px; }
}
.stappen.geen-vier {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 760px) {
  .stappen.geen-vier { grid-template-columns: 1fr; }
}

/* Merkverhalen */
.merkverhaal {
  margin: 16px 0;
  padding-top: 12px;
  border-top: 1px solid var(--lijn);
}

.merkverhaal h4 {
  margin: 14px 0 4px;
  color: var(--rood);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.merkverhaal p {
  margin: 0;
}

.verhaaltekst {
  max-width: 780px;
  margin: -12px 0 32px;
  padding-left: 20px;
  border-left: 6px solid var(--rood);
  font-size: 18px;
}
/* Vlaggen */
.merk.vlag-it,
.teaser.vlag-it {
  border-top: 8px solid transparent;
  border-image: linear-gradient(to right, #009246 0, #009246 33.33%, #FFFFFF 33.33%, #FFFFFF 66.66%, #CE2B37 66.66%, #CE2B37 100%) 1;
}

.merk.vlag-be {
  border-top: 8px solid transparent;
  border-image: linear-gradient(to right, #000000 0, #000000 33.33%, #FDDA24 33.33%, #FDDA24 66.66%, #EF3340 66.66%, #EF3340 100%) 1;
}

body .topbalk.balk-be {
  border-image: linear-gradient(to right, #000000 0, #000000 33.33%, #FDDA24 33.33%, #FDDA24 66.66%, #EF3340 66.66%, #EF3340 100%) 1;
}

/* Teaser 2027 */
.teaser {
  margin: 48px 0 0;
  padding: 28px 32px;
  background: var(--zwart);
  color: var(--wit);
}

.teaser .ondertitel {
  color: #bdbdbd;
}

.teaser h2 {
  color: var(--wit);
  font-size: 36px;
}

.teaser p {
  max-width: 760px;
}

.merkrij {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.merkrij li {
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 14px 18px;
  border: 2px solid #333;
}

.merkrij a,
.merkrij span {
  color: var(--wit);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 24px;
  text-decoration: none;
  text-transform: uppercase;
}

.merkrij a:hover { color: var(--rood); }

.merkrij em {
  color: #009246;
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.teaser .kleintje {
  margin-bottom: 0;
  color: #bdbdbd;
}

@media (max-width: 480px) {
  .teaser { padding: 24px 20px; }
  .merkrij li { min-width: 0; flex: 1 1 100%; }
}
/* Juridische tekst */
.juridisch {
  max-width: 820px;
}

.juridisch h2 {
  margin: 36px 0 10px;
  font-size: 26px;
}

.juridisch p,
.juridisch li {
  color: var(--tekst);
}

.juridisch a {
  color: var(--rood);
}

.bijgewerkt {
  margin-top: 40px;
  color: var(--label);
  font-size: 14px;
}
/* FAQ */
.faq {
  margin-top: 48px;
}

.faq h2 {
  margin-bottom: 14px;
}

.faq details {
  border-top: 1px solid var(--lijn);
  padding: 14px 0;
}

.faq details:last-child {
  border-bottom: 1px solid var(--lijn);
}

.faq summary {
  cursor: pointer;
  color: var(--zwart);
  font-weight: 700;
  font-size: 18px;
}

.faq summary::marker {
  color: var(--rood);
}

.faq details p {
  margin: 10px 0 0;
}

.faq a {
  color: var(--rood);
}

.inleiding a {
  color: var(--zwart);
  text-decoration-color: var(--rood);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.inleiding a:hover { color: var(--rood); }

/* Oplages */
.oplages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.oplage {
  padding: 20px;
  background: var(--zwart);
  color: var(--wit);
  border-top: 6px solid var(--rood);
}

.oplage .jaar {
  margin: 0;
  color: var(--rood);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 20px;
}

.oplage h3 {
  margin: 6px 0;
  color: var(--wit);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
}

.oplage p {
  margin: 0;
  color: #cfcfcf;
}

@media (max-width: 900px) {
  .oplages { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .oplages { grid-template-columns: 1fr; }
}