/* Gedeelde opmaak van de losse pagina's: de kennisbankartikelen en contact.
   Volgt de artikelstijl van cliendo.nl - grijs titelblok, witte kaart met zachte
   schaduw, tealkleurige tussenkoppen - maar met een bredere tekstkolom: daar is
   .col 610px, hier 780px. */

:root {
  --teal:        #007d7d;
  --teal-licht:  #509798;
  --petrol:      #133e42;
  --goud:        #e5c764;   /* cliendo .yellow-button */
  --goud-donker: #c1a959;
  --goud-diep:   #af9950;
  --creme:       #f7f7f5;
  --tekst:       #202020;
  --artikel:     #2a2a2a;
  --grijs:       #5c6668;
  --lijn:        #e2e2de;
  --wit:         #ffffff;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--tekst);
  background: var(--creme);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.omhulsel { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- kop ---------- */
header { background: url("img/map_pattern.png") var(--wit) 0% 70% / 1000px 500px repeat;
         border-bottom: 1px solid var(--lijn); }
header .omhulsel { display: flex; align-items: center; justify-content: space-between;
                   padding-top: 1.1rem; padding-bottom: 1.1rem; gap: 1rem; }
header img { display: block; height: 26px; width: auto; }
header .tel { color: var(--grijs); font-size: .9rem; text-decoration: none; }
header .tel:hover { color: var(--teal); }

/* ---------- kruimelpad ---------- */
.kruimels { background: var(--wit); border-bottom: 1px solid var(--lijn); }
.kruimels .omhulsel { padding-top: .7rem; padding-bottom: .7rem; font-size: .82rem; color: var(--grijs); }
.kruimels a { color: var(--grijs); text-decoration: none; }
.kruimels a:hover { color: var(--teal); }

/* ---------- artikel ---------- */
.artikel { padding: 2.5rem 0 3.5rem; }
.artikel .omhulsel { max-width: 780px; }

.rubriek { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
           color: var(--teal); font-weight: 700; margin: 0 0 .35rem; }

.titelblok { background: #f8fafa; border: 1px solid #e2e2e2; border-bottom: 0; padding: 1.5rem 3rem; }
.titelblok h1 { margin: 0; font-weight: 700; font-size: 2rem; line-height: 1.2; color: var(--petrol); }

.kaart { background: var(--wit); border: 1px solid #e2e2e2; padding: 2.5rem 3rem;
         box-shadow: 0 0 4px 0 rgba(0, 0, 0, .13); }

.kaart { color: var(--artikel); font-size: 1.0625rem; line-height: 1.7; }
.kaart > *:first-child { margin-top: 0; }
.kaart > *:last-child { margin-bottom: 0; }
.kaart p { margin: 0 0 1.1em; }

.kaart h2 { color: var(--teal); font-weight: 700; font-size: 1.25rem; line-height: 1.3;
            margin: 2.2em 0 .8em; margin-left: -20px; }
.kaart h3 { font-size: 1.0625rem; font-weight: 600; color: var(--petrol); margin: 1.8em 0 .5em; }
.kaart h2 + h3 { margin-top: 1em; }

.kaart a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.kaart a:hover { color: var(--petrol); }
.kaart strong { color: var(--petrol); }

.kaart ul, .kaart ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.kaart li { margin-bottom: .4em; }

.kaart figure { margin: 1.6em 0; }
.kaart img { display: block; max-width: 100%; height: auto; border-radius: .35rem; border: 1px solid var(--lijn); }

.kaart blockquote { margin: 1.6em 0; padding: .1px 0 .1px 1.25rem; border-left: 3px solid var(--teal-licht);
                    color: var(--grijs); }

.kaart .video a { font-weight: 600; }

/* ---------- de twee acties van de voorpagina ---------- */
.acties { margin-top: 2rem; background: var(--wit); border: 1px solid var(--lijn);
          border-radius: .75rem; padding: 2rem 2.5rem; text-align: center;
          box-shadow: 0 1px 2px rgba(19,62,66,.04), 0 8px 24px rgba(19,62,66,.06); }
.acties h2 { margin: 0 0 .5rem; font-size: 1.35rem; color: var(--petrol); }
.acties p { margin: 0 auto 1.5rem; color: var(--grijs); font-size: .97rem; max-width: 34rem; }
.acties .knoppen { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.acties .gezichten { display: inline-flex; margin-bottom: .75rem; }
.acties .gezichten img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
                         border: 2px solid var(--wit); display: block;
                         box-shadow: 0 1px 4px rgba(19,62,66,.15); }
.acties .gezichten img + img { margin-left: -15px; }

.knop-1, .knop-2 {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  border-radius: 4px; text-decoration: none; white-space: nowrap;
  transition: background .3s, border-color .3s, transform .2s, box-shadow .2s;
}
.knop-1:hover, .knop-2:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(19,62,66,.12); }
.knop-1:active, .knop-2:active { transform: none; box-shadow: none; }
.knop-1:active { background: var(--goud-diep); }
.knop-1 { text-transform: uppercase; letter-spacing: .02em; padding: .8rem 1.75rem; font-weight: 700; color: #2b2410; background: var(--goud); border: 1.5px solid var(--goud); }
.knop-1:hover { background: var(--goud-donker); border-color: var(--goud-donker); }
.knop-2 { padding: .8rem 1.5rem; font-size: .94rem; font-weight: 600; color: var(--teal);
          background: var(--wit); border: 1.5px solid var(--teal); }
.knop-2:hover { background: #f2f8f8; }

/* ---------- verder lezen ---------- */
.verder { margin-top: 2.5rem; }
.verder h2 { font-size: 1.05rem; color: var(--petrol); margin: 0 0 .75rem; }
.verder ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.verder a { display: block; background: var(--wit); border: 1px solid var(--lijn); border-radius: .5rem;
            padding: .8rem 1rem; text-decoration: none; color: var(--petrol); font-weight: 600; font-size: .97rem; }
.verder a { transition: border-color .2s, transform .2s, box-shadow .2s; }
.verder a:hover { border-color: var(--teal-licht); transform: translateY(-2px);
                  box-shadow: 0 6px 16px rgba(19,62,66,.08); }
.verder .rubriek { display: block; margin-bottom: .1rem; }

footer { padding: 1.75rem 0 2.5rem; border-top: 1px solid var(--lijn); }
footer .omhulsel { display: flex; flex-wrap: wrap; gap: .75rem 2rem;
                   justify-content: space-between; color: var(--grijs); font-size: .85rem; }
footer a { color: var(--grijs); }
footer .contact { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }

@media (max-width: 860px) {
  .artikel { padding: 1.5rem 0 2.5rem; }
  .titelblok { padding: 1.25rem 1.5rem; }
  .titelblok h1 { font-size: 1.6rem; }
  .kaart { padding: 1.5rem; }
  .kaart h2 { margin-left: 0; }
  .acties { padding: 1.5rem; }
  .acties .knoppen { flex-direction: column; }
  .knop-1, .knop-2 { width: 100%; }
}

/* ---------- contactpagina, naar het voorbeeld van cliendo.nl/contact ----------
   Titel met streep, daaronder de twee adviseurs, en een witte kaart in twee
   kolommen: links de gegevens met de foto van het pand, rechts het contact. */
.contactpagina { padding: 2.5rem 0 3.5rem; }
.contactpagina .omhulsel { max-width: 62rem; }
.contactpagina h1 { display: inline-block; margin: 0; font-size: 1.7rem; font-weight: 700;
                    color: var(--petrol); border-bottom: 3px solid var(--petrol); padding-bottom: .2rem; }
.contactpagina .onderkop { margin: .6rem 0 1.5rem; color: var(--grijs); font-size: 1.05rem; }

.adviseurs { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 0 0 1.75rem; }
.adviseur { display: flex; gap: .875rem; align-items: center; }
.adviseur img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.adviseur strong { display: block; color: var(--petrol); font-size: 1.15rem; font-weight: 600;
                   line-height: 1.25; }
.adviseur span span { color: var(--grijs); font-size: .95rem; }

.contactkaart { display: grid; grid-template-columns: 1fr 1fr; background: var(--wit);
                border: 1px solid var(--lijn); border-radius: .5rem;
                box-shadow: 0 0 4px 0 rgba(0,0,0,.13); }
.contactkaart .kolom { padding: 1.75rem 2rem 2rem; min-width: 0; }
/* Zonder min-width:0 weigert een rasterkolom te krimpen onder de breedte van
   zijn inhoud; op een smal scherm duwde dat de kaart de pagina uit. */
.contactkaart .kolom + .kolom { border-left: 1px solid var(--lijn); }
/* Bronvermeldingen in de kennisbank zijn soms lange webadressen; zonder dit
   zet zo'n adres in zijn geheel de pagina uit elkaar. */
article.kaart a { overflow-wrap: anywhere; }

.contactkaart h2 { margin: 0 0 1.25rem; font-size: 1.15rem; color: var(--petrol); }
.contactkaart h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--petrol); }
.contactkaart p { margin: 0 0 1.25rem; color: var(--grijs); font-size: .97rem; }
.contactkaart hr { border: 0; border-top: 1px solid var(--lijn); margin: 1.75rem 0; }
.contactkaart .kleintje { margin: 1.25rem 0 0; font-size: .85rem; }

.routes { list-style: none; margin: 0 0 1.5rem; padding: 0;
          display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
.routes li { display: flex; gap: .6rem; align-items: center; }
.routes svg { flex: none; }
.routes a { color: var(--petrol); font-size: .97rem; text-decoration: none; }
.routes a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }

.pand { display: block; width: 100%; height: auto; border-radius: .35rem; margin: 0 0 1.25rem; }

.adres { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; }
.adres svg { flex: none; margin-top: 2px; }
.adres strong { display: block; color: var(--petrol); font-weight: 600; }
.adres span span { display: block; color: var(--grijs); font-size: .93rem; }
.adres .rol { color: var(--teal-licht); font-size: .87rem; }

.breed { display: flex; width: 100%; }

@media (max-width: 860px) {
  .contactkaart { grid-template-columns: 1fr; }
  .contactkaart .kolom + .kolom { border-left: 0; border-top: 1px solid var(--lijn); }
  .contactkaart .kolom { padding: 1.5rem; }
  .routes { grid-template-columns: 1fr; }
  .adviseurs { gap: 1.25rem; }
  .contactpagina h1 { font-size: 1.45rem; }
}