*, *::before, *::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
 }
 
 :root{
    --canvas: hsl(0, 0%, 98%);
    --card-canvas: hsl(0, 0%, 95%);
    --text: hsl(0, 0%, 5%);
    --sec-text:hsl(0, 0%, 40%);
    --groen: hsl(127, 45%, 38%);
    --rood:hsl(0, 100%, 40%);
    --shadow: 0 1px 4px hsla(0, 0%, 5%, 0.2);
 }

 @media (prefers-color-scheme: dark) {
  :root {
    --canvas: hsl(0, 0%, 10%);         /* hoofdfond donkergrijs i.p.v. zwart */
    --card-canvas: hsl(0, 0%, 15%);    /* iets lichter voor kaarten/secties */
    --text: hsl(0, 0%, 95%);           /* bijna wit, goed leesbaar */
    --sec-text: hsl(0, 0%, 70%);       /* secundaire tekst, minder fel */
    --groen: hsl(127, 45%, 45%);       /* iets lichter groen voor contrast */
    --rood: hsl(0, 80%, 55%);          /* iets zachter rood op donker */
    --shadow: 0 1px 4px hsla(0, 0%, 0%, 0.6); /* donkere schaduw met transparantie */
  }
}

 body {
      font-family: 'Open Sans', sans-serif;
      font-size: 16px;
      background-color:var(--canvas);
      color: var(--text);
      margin: 0;
      padding: 0 1rem;
    }

    h1 {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      font-size: 2em;
      line-height: 3em;
      color: var(--groen);
      margin-top: 2rem;
      margin-bottom: 1rem;
    }
    .logo{
       inline-size: 100%;
       text-align: center;
       & img{
            max-inline-size: 250px;
       }
    }
    .bedrijfnaam {
      font-family: 'Merriweather', serif;
      text-align: center;
      font-weight: 700;
      font-size: 2em;
      line-height: 1.3em;
      color: var(--rood); /* rood */
      margin-bottom: 2rem;
    }

    h2 {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      font-size: 32px;
      line-height: 40px;
      color: var(--groen);
      margin-top: 2rem;
      margin-bottom: 1rem;
    }

    h3 {
      font-family: 'Open Sans', sans-serif;
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      color: var(--sec-text);
      margin-top: 1.5rem;
      margin-bottom: 0.5rem;
    }

    address {
      font-family: 'Open Sans', sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color:var(--sec-text);
      margin-bottom: 1rem;
    }

    strong {
      font-weight: 700; /* benadrukt semantisch belangrijke teksten */
    }

    a {
      color: var(--groen);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }
.vestigingen{
    display:flex ;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: space-around;
        & section{
            min-inline-size: 440px;
            background-color: var(--card-canvas); /* optioneel, om blokjes visueel af te bakenen */
            box-shadow: var(--shadow); /* subtiele schaduw */
            padding: 1rem;
            border-radius: 8px;
        }
}
    /* Voor de direct-contacten, maar ook voor vestigingen */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-around;
}

.flex-container .contact-blok {
  flex: 1 1 250px;
  max-width: 250px;
  background-color: var(--card-canvas);
  box-shadow: var(--shadow);
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

    ul {
      list-style: none;
      padding: 0;
    }

    ul li {
      margin-bottom: 1rem;
    }
.kaart{
    text-align: center;
    & :first-child{
        text-align: left;
    }
}
    iframe {
      border: none;
      width: 100%;
      max-width: 600px;
      height: 450px;
      margin-top: 1rem;
    }