/* Stadspagina's De Kievit (GO240): plaatsblok, symmetrie en paginaregels van de goedgekeurde Venray-pagina (e59c8af42165),
   in dezelfde volgorde samengevoegd als Venray ze laadde (plaatsblok.css, symmetrie.css, venray.css). */
/* Plaatsblok (templatepreview). Opbouw en maten 1-op-1 uit het Bresser-blok "Oisterwijk in het kort"
   (referentie/bron.css, GO206); kleuren via de Kievit-tokens met dezelfde namen (goud-diep, bruin, geel,
   creme-2, wit). Globale regels (body, koppen, .wrap, .sectie, .label, .kop) komen uit de Kievit-CSS. */

.kv-preview-lint{position:relative;z-index:60;margin:0;padding:.55rem var(--pad);background:var(--geel);color:var(--ant);font:600 .86rem/1.35 var(--font-tekst);text-align:center}
.kv-preview-lint a{color:inherit;text-underline-offset:2px}

/* Paneel */
.sb-toennu__paneel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(1.4rem,4.5vw,3.5rem);border-radius:28px;background:var(--bruin);box-shadow:var(--schaduw)}
.c7-vest--blauw .sb-toennu__paneel{background:var(--goud-diep)}
.sb-toennu__links,.sb-toennu__rechts{min-width:0}
/* Bresser: lichte tint van de merkkleur; bij Kievit licht-hover (goud-hover haalt het contrast op teal niet) */
.sb-toennu__paneel .label{color:var(--licht-hover)}
.sb-toennu__paneel .label::before{background:var(--licht-hover)}
.sb-toennu__paneel :is(.kop,h2,h3){color:var(--wit)}
.sb-toennu__paneel .kop{margin-bottom:0}

/* Foto in gedraaide witte lijst met geel label */
.sb-toennu__fotos{position:relative;display:flex;align-items:flex-end;margin-top:clamp(1.2rem,2.4vw,1.8rem);padding-bottom:1rem}
.c7-stad .sb-toennu__fotos{margin-top:calc(clamp(2.4rem,4.6vw,3.6rem) + 1.25rem)}
.sb-toennu__fotos figure{position:relative;margin:0;padding:8px;background:#fff;border-radius:14px;box-shadow:var(--schaduw)}
.sb-toennu__nu{width:62%;transform:rotate(2deg);z-index:2}
.c7-stad .sb-toennu__fotos .sb-toennu__nu{width:min(100%,33rem);margin-left:0;transform:rotate(-2deg)}
.sb-toennu__fotos figcaption{position:absolute;left:1rem;bottom:1rem;padding:.25rem .7rem;border-radius:99px;background:var(--bruin);color:var(--creme);font:700 .72rem/1.3 var(--font-kop);letter-spacing:.12em;text-transform:uppercase}
.sb-toennu__nu figcaption{background:var(--geel);color:var(--ant)}
.c7-vest .c7-vest__wie figcaption{top:auto;bottom:1rem;z-index:1;max-width:calc(100% - 2rem)}
.sb-toennu__bron{margin:.7rem 0 0;max-width:34rem;font-size:.78rem;line-height:1.45;color:var(--licht-hover)}

/* Tijdelijke beeldplaceholder op de plek van de stadsfoto (Bresser: .sb-dpop, verhouding 1.45, hoek 8px) */
.kv-beeld{display:grid;place-content:center;justify-items:center;gap:.6rem;aspect-ratio:1.45;border-radius:8px;background:repeating-linear-gradient(135deg,var(--creme-2) 0 14px,var(--licht-hover) 14px 28px);color:var(--goud-diep);font:600 .9rem/1.3 var(--font-tekst);text-align:center;padding:1rem}
.kv-beeld svg{width:3rem;height:3rem}

/* Drie donkere kaarten met icoontegel */
.sb-zakelijk__rijen{display:grid;grid-template-rows:none;grid-template-columns:minmax(0,1fr);gap:.85rem;min-width:0;margin:0;padding:0;list-style:none}
.sb-zakelijk__rij{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:1.1rem;padding:1rem 1.25rem;border-radius:var(--r);background:var(--bruin);box-shadow:var(--schaduw-kaart)}
.sb-zakelijk__icoon{display:block;width:3.25rem;height:3.25rem;padding:.6rem;border-radius:12px;background:var(--creme-2);color:var(--goud-diep);outline:1px solid var(--geel);outline-offset:-1px}
.sb-zakelijk__icoon svg{display:block;width:100%;height:100%}
.sb-zakelijk__rij>div{min-width:0}
.sb-zakelijk__rij h3{margin:0 0 .2rem;font-size:1.1rem;color:var(--wit)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .sb-zakelijk__rij{transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease)}
  .sb-zakelijk__icoon{transition:transform .25s var(--ease)}
  .sb-zakelijk__rij:is(:hover,:focus-within){transform:translateY(-3px);box-shadow:var(--schaduw);background:color-mix(in srgb,var(--bruin) 88%,var(--goud-hover))}
  .sb-zakelijk__rij:is(:hover,:focus-within) .sb-zakelijk__icoon{transform:scale(1.1)}
}

/* Neutrale invulregels: geen copy, alleen de plek van de latere tekst */
.kv-ph{display:grid;gap:.45rem;margin:.45rem 0 0}
.kv-ph span{display:block;height:.6rem;border-radius:99px;background:rgba(213,236,235,.28)}
.kv-ph span:nth-child(2){width:88%}
.kv-ph span:nth-child(3){width:62%}
.kv-ph--een span{width:55%}

@media(max-width:860px){.sb-toennu__paneel{grid-template-columns:1fr}}
@media(max-width:560px){
  .sb-zakelijk__rijen{gap:.5rem}
  .c7-stad .sb-zakelijk__rij{grid-template-columns:auto minmax(0,1fr);gap:.8rem;padding:.75rem .85rem}
  .c7-stad .sb-zakelijk__icoon{width:2.6rem;height:2.6rem;padding:.45rem}
  .sb-zakelijk__rij h3{font-size:.95rem}
}
/* GO210: symmetrie van de USP-rij (#waarom) en de stappen (#werkwijze) in de lokale Kievit-preview.
   Alleen gescoped op deze twee blokken; style.min.css, HTML en tekst blijven ongewijzigd.
   - Beide blokken zijn een licht vlak in de stijl van de bestaande stappenkaart; het USP-vlak krijgt een lichte tealrand.
   - De kolomgap is 2x --g met de haarlijn midden in de gap, zodat elke kolom dezelfde tekstbreedte heeft.
   - Subgrid (3 rijen per item): pictogram of nummer, kop en start van de alinea liggen per rij op één lijn, zonder vaste hoogte.
   - De decoratie art-d4 en art-d5 gaat uit #waarom; die bedekte tekst. */

#waarom .usps--rij,
#werkwijze .stappen {
  --g: clamp(1rem, 2vw, 1.6rem);
  --lijn: rgba(0, 161, 155, .16);
  column-gap: calc(2 * var(--g));
  row-gap: calc(2 * var(--g));
  background: rgba(255, 255, 255, .62);
  border-radius: 24px;
  padding: clamp(1.3rem, 2.4vw, 2rem);
}
#waarom .usps--rij {
  border: 1px solid var(--lijn);
}

#waarom .usps--rij > li,
#werkwijze .stappen > .stap {
  position: relative;
  border: 0;
  padding: 0;
}

/* Haarlijnen: verticaal midden in de kolomgap, horizontaal midden in de rijgap. */
#waarom .usps--rij > li::before,
#werkwijze .stappen > .stap::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--g) - .5px);
  border-left: 1px solid var(--lijn);
}
#waarom .usps--rij > li::after,
#werkwijze .stappen > .stap::after {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--g) - .5px);
  border-top: 1px solid var(--lijn);
}

/* USP's: 4 kolommen, 2 vanaf 1080px, 1 vanaf 560px (breekpunten van style.min.css). */
#waarom .usps--rij > li:not(:nth-child(4n+1))::before { content: ""; }
@media (max-width: 1080px) {
  #waarom .usps--rij > li:not(:nth-child(4n+1))::before { content: none; }
  #waarom .usps--rij > li:nth-child(2n)::before { content: ""; }
  #waarom .usps--rij > li:nth-child(n+3)::after { content: ""; }
}
@media (max-width: 560px) {
  #waarom .usps--rij > li:nth-child(2n)::before { content: none; }
  #waarom .usps--rij > li:nth-child(n+2)::after { content: ""; }
}

/* Stappen: 4 kolommen, 2 vanaf 900px, 1 vanaf 520px. */
#werkwijze .stappen > .stap:not(:nth-child(4n+1))::before { content: ""; }
@media (max-width: 900px) {
  #werkwijze .stappen > .stap:not(:nth-child(4n+1))::before { content: none; }
  #werkwijze .stappen > .stap:nth-child(2n)::before { content: ""; }
  #werkwijze .stappen > .stap:nth-child(n+3)::after { content: ""; }
}
@media (max-width: 520px) {
  #werkwijze .stappen > .stap:nth-child(2n)::before { content: none; }
  #werkwijze .stappen > .stap:nth-child(n+2)::after { content: ""; }
}

/* Per rij gelijke opbouw. Koppen staan bovenaan hun rij (Shahab 16-10), de tekst eronder begint op dezelfde hoogte. */
@supports (grid-template-rows: subgrid) {
  #waarom .usps--rij > li,
  #werkwijze .stappen > .stap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  #waarom .usps--rij > li > div {
    display: contents;
  }
  #waarom .usps--rij h3 {
    min-height: 0;
    margin: .85rem 0 .3rem;
    align-self: start;
  }
  #werkwijze .stappen .stap h3 {
    min-height: 0;
    display: block;
    align-self: start;
  }
}

#waarom .art-d4,
#waarom .art-d5 {
  display: none;
}
/* GO214, alleen de Venray-voorbeeldpagina. Plaatsfoto in de witte lijst van het Bresser-blok: verhouding 1.45 en
   hoek 8px zoals .c7-stad .sb-dpop, zonder uitstekende uitsnede (daar is een vrijstaand bovendeel voor nodig). */
.sb-toennu__fotos .kv-foto{display:block;width:100%;height:auto;aspect-ratio:1.45;object-fit:cover;border-radius:8px}
/* Kaarttekst zoals Bresser (bron.css .sb-zakelijk__rij p en .c7-stad); de template had hier alleen invullijnen. */
.sb-zakelijk__rij p{margin:0;font-size:.95rem;line-height:1.45;color:var(--licht-hover);overflow-wrap:anywhere}
@media(max-width:480px){.sb-zakelijk__rij p{-webkit-hyphens:auto;hyphens:auto}}
.sb-zakelijk__rij p a{color:var(--wit);text-underline-offset:2px}

/* Kerncijferbalk: vier kolommen passen pas vanaf de breedte hieronder; tussen 901 en 1099px gaf de vierde
   kaart overloop (940px: scrollWidth 975). Daar dezelfde twee kolommen als de bestaande regel tot 900px. */
@media(min-width:901px) and (max-width:1099px){.trust__in{grid-template-columns:1fr 1fr}}

/* Twee lokale vragen boven de bestaande doorverwijzing; ruimte ertussen. */
#faq .faq + .faq__door{margin-top:1.4rem}

/* GO224/GO227 BRESSER, overgenomen uit venray/review/GO224-BRESSER/gebruikerscorrecties.css (sha 4dba1163bdc7, 18:28):
   foto hoger, knoprij op de plek van de vroegere bronregel, H2 op gelijke hoogte met de eerste kaart, knoppen onder elkaar
   waar de rij niet naast elkaar past, keurmerkknoppen mobiel even breed. */
#verhuizen-in-de-plaats .sb-toennu__fotos{margin-top:clamp(1.2rem,2.4vw,1.8rem)}
#verhuizen-in-de-plaats .sb-toennu__links .knoprij{margin-top:1.1rem}
#verhuizen-in-de-plaats .sb-toennu__links .btn--wa{border-color:var(--wit)}
@media(min-width:621px){
  #verhuizen-in-de-plaats .sb-toennu__links .knoprij,#wonen .blok--paneel .knoprij{display:grid;grid-template-columns:max-content}
}
@media(max-width:620px){.zeker__cta .btn{width:100%}}
@media(min-width:861px){
  #verhuizen-in-de-plaats .sb-toennu__paneel{align-items:start}
  #verhuizen-in-de-plaats .sb-toennu__links>.label{display:flex}
  #verhuizen-in-de-plaats .sb-toennu__rechts{padding-top:calc(.76rem * 1.3 + 1.1rem)}
}

/* GO233 BRESSER, overgenomen uit venray/review/GO233-BRESSER/go233.css (sha 4ef3dd7d2eaf, 18:41): stadsfoto langer in de vrije
   linkerruimte vanaf 861px; de linkerkolom rekt mee met de kaartenkolom, de foto vult die ruimte (object-fit cover), het paneel
   wordt niet hoger en de titel blijft gelijk met de eerste kaart. Daaronder blijft de foto 1.45. */
@media(min-width:861px){
  #verhuizen-in-de-plaats .sb-toennu__paneel{align-items:stretch}
  #verhuizen-in-de-plaats .sb-toennu__links{display:flex;flex-direction:column}
  #verhuizen-in-de-plaats .sb-toennu__fotos{flex:1 1 auto;min-height:0;max-height:40rem;align-items:stretch}
  #verhuizen-in-de-plaats .sb-toennu__fotos .kv-foto{aspect-ratio:auto;height:100%;min-height:0}
}

/* Keurmerk punt 3 heeft een link naar de voorwaarden; op de donkere kaart in de tekstkleur. */
.zeker__list a{color:inherit;text-underline-offset:2px}

/* GO222: meer alinea's in #wonen; de alinea's na de intro in dezelfde maat en kleur als de intro-omgeving. */
#wonen .blok__tekst .intro~p:not(.label){color:var(--ant-zacht);max-width:62ch;margin:.9rem 0 0}

/* GO222: FAQ met een opsomming (laad- en lostijden), ingesprongen zoals de antwoorden. */
#faq details p:has(+ul){margin-bottom:.5rem}
#faq details ul{margin:0 0 .9rem;padding-left:calc(4.8rem + 1.1rem);color:var(--ant-zacht);max-width:74ch}
#faq details ul+p{margin-top:0}
@media(max-width:620px){#faq details ul{padding-left:calc(3.2rem + 1.1rem)}}

/* GO229: optioneel veld Opmerking in het offerteformulier, zelfde vorm als de invoervelden. */
.lf__field textarea{border:0;border-radius:12px;background:#fff;color:var(--ant);font-family:inherit;font-size:1rem;font-weight:600;padding:.55rem .8rem;width:100%;min-height:42px;resize:vertical}
.lf__field textarea::placeholder{color:#767674;font-weight:500}
.lf__field textarea:focus-visible{outline:2px solid var(--ant);outline-offset:2px}
/* GO240: plaatsen met een eigen pagina zijn een link in hun chip. */
.plaatsen a{display:inline-flex;align-items:center;gap:.4rem;color:inherit;text-decoration:underline;text-decoration-color:var(--goud-diep);text-underline-offset:3px}
.plaatsen a:hover{text-decoration-thickness:2px}
.plaatsen a:focus-visible{outline:2px solid var(--ant);outline-offset:3px;border-radius:4px}
/* GO250: verplichte naamsvermelding bij een plaatsfoto onder CC BY of CC BY-SA; klein, rechtsboven in de foto. CC0 krijgt niets. */
.kv-credit{position:absolute;top:1rem;right:1rem;z-index:1;max-width:calc(100% - 2rem);margin:0;padding:.18rem .5rem;border-radius:6px;background:rgba(29,29,27,.66);color:#fff;font:500 .66rem/1.35 var(--font-tekst);letter-spacing:.01em}
.kv-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.kv-credit a:focus-visible{outline:2px solid #fff;outline-offset:1px}