@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif&display=swap");

:root {
  color-scheme: light;
  font: 1rem/1.6 "DM Sans", system-ui, sans-serif;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tekst);
  overflow-wrap: anywhere;
}

*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-underline-offset: .18em; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--kopletter); line-height: 1.08; }
h1 { font-size: clamp(2.75rem, 7.2vw, 7rem); max-inline-size: 15ch; }
h2 { font-size: clamp(1.9rem, 4vw, 3.25rem); margin-block-end: .9rem; }
h3 { font-size: 1.15rem; line-height: 1.35; margin-block-end: .35rem; }
.skiplink { position: absolute; inset-inline-start: 1rem; translate: 0 -150%; }
.skiplink:focus { translate: none; background: white; color: #111; z-index: 1; padding: .5rem; }
.kader { width: min(100% - clamp(2rem, 8vw, 8rem), 80rem); margin-inline: auto; }
.sitekop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  padding: .9rem max(clamp(1rem, 4vw, 4rem), (100% - 80rem) / 2);
}
.merk { font-weight: 700; text-decoration: none; font-size: 1.15rem; }
.sitekop nav, .sitevoet nav, .broodkruimels, .acties, .letters { display: flex; flex-wrap: wrap; gap: .55rem 1.15rem; align-items: center; }
.sitekop nav, .sitevoet nav, .broodkruimels { font-size: .94rem; }
.intro {
  background: var(--held);
  color: var(--held-tekst);
  padding-block: clamp(3rem, 10vw, 8rem);
}
.intro p { max-inline-size: 52ch; margin-block: 1rem 0; font-size: clamp(1rem, 2vw, 1.2rem); }
.broodkruimels { margin-block-end: 1.1rem; }
.broodkruimels > :not(:first-child)::before { content: "/"; margin-inline-end: .7rem; }
.acties:not(:empty) { margin-block-start: 1.4rem; }
.knop { display: inline-block; padding: .65rem 1rem; background: var(--knop); color: var(--knop-tekst); border-radius: var(--radius); text-decoration: none; font-weight: 700; }
.gidsinhoud { display: grid; gap: clamp(2.4rem, 7vw, 5rem); padding-block: clamp(2.5rem, 6vw, 5rem); }
.provincies, .plaatsen ul { list-style: none; margin: 0; padding: 0; }
.provincies { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .75rem; }
.provincies a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-block-size: 3rem;
  padding: .6rem .9rem;
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 650;
}
.provincies a:hover { text-decoration: underline; border-color: currentColor; }
.letters { margin-block: 1rem; }
.letters a { min-inline-size: 2rem; text-align: center; }
.plaatsen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; align-items: start; }
.plaatsen section { border-top: 2px solid var(--rand); padding-block-start: .7rem; }
.plaatsen a { display: inline-block; padding-block: .18rem; }
.tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.tips section { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.1rem; }
.sitevoet { border-top: 1px solid var(--rand); padding-block: 1.5rem 2rem; }
.sitevoet p { font-weight: 700; margin-block-end: .5rem; }
.sitevoet .aanmeldlink { margin-block-start: 1rem; }

[data-gids="adverteren"] {
  --papier: #f2eee7; --tekst: #202024; --held: #29242f; --held-tekst: #fffaf2;
  --kaart: #fffaf2; --rand: #cfc0b2; --knop: #ffd782; --knop-tekst: #29242f;
  --kopletter: "Barlow", sans-serif; --radius: .15rem;
}
[data-gids="adverteren"] .intro { border-inline-start: clamp(.4rem, 2vw, 2rem) solid #ffd782; }

[data-gids="feestweek"] {
  --papier: #fff5ef; --tekst: #4d2030; --held: #8e2951; --held-tekst: #fff8ed;
  --kaart: #fff; --rand: #e8b9c1; --knop: #ffd481; --knop-tekst: #4d2030;
  --kopletter: "Barlow", sans-serif; --radius: 1rem;
}
[data-gids="feestweek"] .intro { background: radial-gradient(ellipse at top right, #a74060, #762143 72%); }
[data-gids="feestweek"] .provincies a { border-radius: 2rem; }

[data-gids="huizen"] {
  --papier: #f6efe7; --tekst: #38261d; --held: #ead6c6; --held-tekst: #38261d;
  --kaart: #fffbf6; --rand: #d9c4b4; --knop: #643a2d; --knop-tekst: #fffaf4;
  --kopletter: "Instrument Serif", Georgia, serif; --radius: .6rem;
}
[data-gids="huizen"] .intro { border-block: 1px solid var(--rand); }
[data-gids="huizen"] .tips section { border-block-start: 3px solid #b1775d; }

[data-gids="markt"] {
  --papier: #f6f4e8; --tekst: #273520; --held: #30452c; --held-tekst: #fff8e4;
  --kaart: #fffdf4; --rand: #b6bba4; --knop: #f5df90; --knop-tekst: #273520;
  --kopletter: "Instrument Serif", Georgia, serif; --radius: .3rem;
}
[data-gids="markt"] .intro { border-block-end: .5rem double #f5df90; }

[data-gids="uitgaan"] {
  --papier: #f1eff9; --tekst: #281e3e; --held: #211738; --held-tekst: #f7f0ff;
  --kaart: #fcfaff; --rand: #c9bcde; --knop: #dabfff; --knop-tekst: #281e3e;
  --kopletter: "Barlow", sans-serif; --radius: .65rem;
}
[data-gids="uitgaan"] .intro { background: linear-gradient(125deg, #211738, #4e2668); }
[data-gids="uitgaan"] .tips section { border-inline-start: 4px solid #a37cd2; }

[data-gids="vakantie"] {
  --papier: #eaf3f2; --tekst: #183d42; --held: #c5e3e1; --held-tekst: #183d42;
  --kaart: #fffdfa; --rand: #a8c6c3; --knop: #205660; --knop-tekst: #fff;
  --kopletter: "Instrument Serif", Georgia, serif; --radius: 1.2rem;
}
[data-gids="vakantie"] .intro { border-end-start-radius: clamp(1rem, 6vw, 5rem); }
[data-gids="vakantie"] .intro .kader { text-align: center; }
[data-gids="vakantie"] .intro :is(h1, p) { margin-inline: auto; }
[data-gids="vakantie"] .acties { justify-content: center; }

[data-gids="werk"] {
  --papier: #edf1f8; --tekst: #1b2b46; --held: #193357; --held-tekst: #f4f8ff;
  --kaart: #fff; --rand: #becbe0; --knop: #c5e0ff; --knop-tekst: #193357;
  --kopletter: "DM Sans", sans-serif; --radius: .25rem;
}
[data-gids="werk"] .intro { border-block-start: .35rem solid #7bacde; }
[data-gids="werk"] .tips section { background: transparent; border-width: 2px 0 0; }

[data-gids="winkels"] {
  --papier: #fbf2ed; --tekst: #3e2027; --held: #793e49; --held-tekst: #fff8ee;
  --kaart: #fffaf6; --rand: #e0bbb8; --knop: #fff0d9; --knop-tekst: #3e2027;
  --kopletter: "Instrument Serif", Georgia, serif; --radius: .75rem;
}
[data-gids="winkels"] .intro { margin-inline: clamp(0rem, 2vw, 2rem); border-radius: var(--radius); }
[data-gids="winkels"] .provincies a { border-style: solid; border-width: 0 0 1px; }

@media (max-width: 34rem) {
  .sitekop nav { gap: .35rem .8rem; }
  .intro { padding-block: 2.5rem; }
  .provincies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}