/* Oranje Kwast, volledige site: aanvullingen op stijl.css (taalknop, tekstblokken, waardenkaarten).
   Alleen nieuwe onderdelen; de bevroren templateregels worden hier niet overschreven. */

/* taalknop in de header: kleine ronde pill, wit zoals het menu */
.nav .taal-knop{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:34px;padding:0 10px;
  margin-left:12px;border:1px solid rgba(255,255,255,.7);border-radius:999px;color:#fff;font-weight:600;font-size:13px;
  letter-spacing:.08em;text-decoration:none;transition:background-color .4s ease,color .4s ease}
.nav .taal-knop:hover{background:#fff;color:var(--ink)}
.mobiel-menu .taal-knop.taal-mobiel{margin-top:14px;text-align:center;border:1px solid rgba(255,255,255,.5);border-radius:999px}
@media(max-width:1100px){.nav .taal-knop{display:none}}

/* lopende tekst op dienst- en regiopagina's: gecentreerd blok, leesbare breedte */
.dienst-tekst{max-width:820px;margin-inline:auto;text-align:center}
.dienst-tekst h2:first-child{margin-top:0}
.dienst-tekst p{color:var(--tekst)}
.regio-tekst h2{margin:36px 0 12px}
.regio-tekst ul.vinkjes,.juridisch ul.vinkjes{width:fit-content;margin:0 auto 18px;text-align:left;list-style:none;padding:0}
.regio-tekst ul.vinkjes li,.juridisch ul.vinkjes li{display:flex;align-items:flex-start;gap:10px;padding:5px 0}
.regio-tekst ul.vinkjes li::before,.juridisch ul.vinkjes li::before{content:"";flex:0 0 16px;height:16px;margin-top:4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232e9e5b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5 7-8'/%3E%3C/svg%3E") center/contain no-repeat}
.juridisch ul.vinkjes{margin-inline:0}

/* "het antwoord in het kort" bovenaan elke verdiepingspagina */
.kort-kader{margin:0 0 28px}

/* kernwaarden op de over-ons pagina */
.waarde-kaart{text-align:center;padding:30px 24px}
.waarde-kaart .waarde-nr{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin:0 auto 14px;
  border-radius:50%;border:2px solid var(--accent);color:var(--ink);font-weight:700;font-size:18px}
.waarde-kaart h3{margin-bottom:8px}
.waarde-kaart p{color:var(--tekst);font-size:15.5px;margin:0}

/* kennisbankkaarten zonder foto */
.kb-kaart{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 24px}
.kb-kaart .tekstlink{margin-top:auto}

/* sitemap */
.sitemap-lijst{list-style:none;padding:0;columns:2;column-gap:40px;margin-bottom:10px}
.sitemap-lijst li{padding:5px 0;break-inside:avoid}
@media(max-width:640px){.sitemap-lijst{columns:1}}

/* drie echte klantcitaten: op desktop alle drie naast elkaar */
.reviews-drie .review-datum{background:var(--tint);color:var(--ink)}
@media(min-width:1025px){.reviews-drie .car-pijl{display:none}}

/* ---- reparaties kwaliteitscontrole ronde 1 (06-11-2026) ---- */
/* taalknop breekt nooit over twee regels */
.nav .taal-knop{white-space:nowrap;flex:none}
/* eyebrows overal dezelfde pill (vaste regel), hero-label houdt zijn eigen variant */
.eyebrow{display:inline-block;background:transparent;border:1px solid var(--accent);color:var(--ink);
  border-radius:999px;padding:8px 20px;letter-spacing:.12em;font-size:13px;font-weight:600;margin-bottom:18px}
.kop-blok .eyebrow,.kop-blok.midden .eyebrow{margin-inline:auto}
/* geen schaduwband achter de kop van de offertekaart in de hero */
@media(min-width:1024px){.hero-met-form>#offerte-samenstellen .kop-blok{box-shadow:none}}
/* over-ons: lichte hero, dus de header meteen in de donkere huisstijlkleur */
body:has(.over-hero) .header,body:has(.over-hero) .header.geschrompeld{background-color:rgba(var(--ink-rgb),.96) !important}
.over-hero h1{font-weight:700}
/* werkwijze-kaarten niet afsnijden aan de buitenkant */
.tijdlijn-vert{padding:10px 16px}
/* titels op projectfoto's beter leesbaar */
.projectkaart::after{background:linear-gradient(rgba(var(--ink-rgb),.05) 25%,rgba(var(--ink-rgb),.92) 100%)}
.projectkaart h3{text-shadow:0 1px 12px rgba(0,0,0,.45)}
/* tipkaarten op de homepage: tekstkaarten, inhoud bovenaan en even hoog */
.tips-tekst .kb-kaart{justify-content:flex-start;height:100%}
/* lijsten in juridische teksten: vinkje links, label en tekst lopen gewoon door */
.juridisch ul.vinkjes li{display:block;position:relative;padding:5px 0 5px 26px}
.juridisch ul.vinkjes li::before{position:absolute;left:0;top:9px;width:16px;height:16px;margin:0}
/* bron onder de klantreacties */
.google-regel .gr-sub a{margin-left:6px}

/* ---- reparaties kwaliteitscontrole ronde 2 ---- */
/* taalknop: hoogte uit padding, zodat hij als een regel telt */
.nav .taal-knop{height:auto;min-width:0;padding:8px 12px;line-height:1.2}
/* de schaduw van het formulierdeel valt niet meer over de kaartkop */
@media(min-width:1024px){
  .hero-met-form>#offerte-samenstellen .kop-blok{position:relative;z-index:2}
  .hero-met-form>#offerte-samenstellen .calc{padding-bottom:16px}
}
/* header na het scrollen volledig dekkend */
.header.is-gescrold,.header.geschrompeld.is-gescrold{background-color:rgb(var(--ink-rgb)) !important}
/* mobiel: geen dichte balk onderaan meer (die hoorde bij de conceptbalk); knoppen zweven los */
@media(max-width:900px){
  body{padding-bottom:0}
  body::after{display:none}
  .zwevend-knop,.bel-knoppen{bottom:16px}
  .footer-onder{padding-bottom:92px}
}
/* werkgebiedkaart: hele kaart zichtbaar, laadknop linksonder buiten de pinnen */
.kaart-blok{height:auto;aspect-ratio:1160/770}
.kaart-blok img{object-fit:contain}
.kaart-laden{left:20px;bottom:20px;transform:none}
@media(max-width:640px){.kaart-laden{left:12px;bottom:12px;font-size:14px;padding:10px 14px}}
/* contacticonen in een effen huisstijlkleur */
.c-icoon{background:var(--accent)}
/* wow: rechterkolom als kaart naast de foto, blok gecentreerd */
.kw-bak{grid-template-columns:minmax(0,380px) minmax(0,400px);align-items:stretch}
.kw-zij{display:flex;flex-direction:column;justify-content:center;background:var(--tint);border-radius:var(--r-kaart);padding:32px 28px}
@media(max-width:900px){.kw-bak{grid-template-columns:minmax(0,1fr)}.kw-zij{padding:26px 20px}}
/* sitemap in de huisstijl */
.sitemap-lijst a{color:var(--petrol);text-decoration:none;font-weight:500}
.sitemap-lijst a:hover{color:var(--accent)}
/* projecttitels breken netjes; overlay iets lichter */
.projectkaart h3{text-wrap:balance}
.projectkaart::after{background:linear-gradient(rgba(var(--ink-rgb),0) 30%,rgba(var(--ink-rgb),.86) 100%)}
/* offertepagina: de korte regels onder de kop onder elkaar op mobiel */
@media(max-width:640px){.pagina-hero .artikel-meta{flex-direction:column;align-items:center;gap:6px}}

/* ---- reparaties kwaliteitscontrole ronde 3 ---- */
/* wow: teller over de volle breedte met zichtbare balk; kaart zo hoog als de inhoud */
.kw-bak{align-items:center}
.kw-meter{width:100%}
.kw-meter-kop{gap:12px}
.kw-zij .kw-balk{background:rgba(var(--ink-rgb),.16)}
/* lijsten in lopende tekst: vinkje links, vet label boven de toelichting, een kolom */
.artikel-inhoud ul.vinkjes li,.regio-tekst ul.vinkjes li{display:block;position:relative;padding:6px 0 6px 26px}
.artikel-inhoud ul.vinkjes li::before,.regio-tekst ul.vinkjes li::before{position:absolute;left:0;top:10px;width:16px;height:16px;margin:0}
.artikel-inhoud ul.vinkjes li strong,.regio-tekst ul.vinkjes li strong,.juridisch ul.vinkjes li strong{display:block}
/* dienstkaarten: kop altijd twee regels hoog, lijsten beginnen op dezelfde hoogte */
@media(min-width:901px){.kaart-grid .kaart h3{min-height:2.6em;display:flex;align-items:center;justify-content:center}}
/* titels in de pagina-hero houden marge op mobiel */
@media(max-width:640px){.pagina-hero{padding-left:20px;padding-right:20px}.pagina-hero h1{text-wrap:balance;overflow-wrap:break-word}
  .pagina-hero .artikel-meta:not(:has(.tip-tag)){grid-template-columns:1fr;gap:6px}}
/* geen focusrand bij laden of klikken, wel bij toetsenbord */
.hamburger:focus{outline:none}
.hamburger:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- ronde 4 ---- */
.hamburger:focus,.hamburger:focus-visible{outline:none;box-shadow:none}

/* ---- ronde 7 ---- */
/* dienstkop op mobiel: past binnen gelijke marges */
@media(max-width:640px){.product-hero h1{font-size:clamp(26px,7.4vw,34px);overflow-wrap:break-word;hyphens:auto;padding-inline:4px;text-align:center}}
/* dienstkaart: zichtbare tekstlink naast de pijl */
.kaart .kaart-tekstlink{display:inline-block;margin-top:14px;font-weight:600}
/* projectkaarten: frisse foto, donkere band alleen achter de tekst */
.projectkaart::before{background:rgba(var(--petrol-rgb),.06)}
.projectkaart::after{background:linear-gradient(rgba(var(--ink-rgb),0) 45%,rgba(var(--ink-rgb),.55) 70%,rgba(var(--ink-rgb),.9) 100%)}
.projectkaart p,.projectkaart .regio{text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* ---- ronde 8 ---- */
/* dienstkaarten: tekstlink en pijl onderaan op dezelfde lijn */
.kaart-grid .kaart:has(.kaart-tekstlink){display:flex;flex-direction:column;align-items:stretch}
.kaart-grid .kaart:has(.kaart-tekstlink) .kaart-tekstlink,.kaart-grid .kaart:has(.kaart-tekstlink) .kaart-pijl,.kaart-grid .kaart:has(.kaart-tekstlink) ul{align-self:center}
.kaart-grid .kaart .kaart-tekstlink{margin-top:auto !important;padding-top:14px}
.kaart-grid .kaart:has(.kaart-tekstlink) ul{margin-bottom:6px}
/* projectkaarten: tekst op een donkere band onderin, foto daarboven helder */
.projectkaart::after{background:linear-gradient(rgba(var(--ink-rgb),0) 40%,rgba(var(--ink-rgb),.78) 66%,rgba(var(--ink-rgb),.95) 100%)}
/* contact, bedankt en 404: herofoto met de kamer in beeld, niet het gezicht onder de kop */
.pagina-hero.zonder-gloed{background-position:88% center}
.pagina-hero.zonder-gloed::before{background:rgba(var(--ink-rgb),.55)}
/* projectkop: titel en labels samen gecentreerd, zelfde ritme als de andere pagina's */
.pagina-hero.project-kop{align-content:center;gap:12px}
/* dienstkop op mobiel: nooit midden in een woord afbreken */
@media(max-width:640px){.product-hero h1{hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;font-size:clamp(22px,6.6vw,30px)}}
.kaart-grid .kaart:has(.kaart-tekstlink) .kaart-pijl{margin-top:12px !important}

/* ---- feedback 08-11-2026: opties per keuze en directe prijsindicatie ---- */
.calc-groep[hidden]{display:none!important}
.calc-tegels.kol-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:560px){
  .calc-tegels.kol-4,.calc-tegels.kol-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .calc-tegels>.calc-tegel:last-child:nth-child(odd){grid-column:1/-1}
}
.calc-aantallen{display:grid;gap:8px;margin:0 auto 14px;max-width:440px}
.calc-aantallen:empty{display:none}
.ca-rij{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:1.5px solid #e3e9e6;border-radius:12px;background:#fff;font-size:14.5px;font-weight:600;color:var(--ink);cursor:text}
.ca-naam{text-align:left;min-width:0}
.ca-veld{display:flex;align-items:center;gap:8px;flex:none}
.ca-veld input{width:84px;padding:8px 10px;border:1.5px solid #e3e9e6;border-radius:10px;font:inherit;font-weight:600;text-align:right;color:var(--ink);background:#fff}
.ca-veld input:focus{outline:none;border-color:var(--accent)}
.ca-eenheid{min-width:72px;font-weight:500;color:#69727d;font-size:13.5px;text-align:left}
.calc-prijs{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 auto;max-width:440px;padding:14px 16px;border-radius:14px;background:rgba(var(--accent-rgb),.10);border:1.5px solid var(--accent);text-align:center}
.calc-prijs [hidden]{display:none!important}
.cp-label{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.cp-bedrag{font-size:30px;line-height:1.15;color:var(--ink)}
.cp-btw{font-size:14px;font-weight:600;color:var(--ink)}
.cp-min{font-size:13.5px;color:var(--ink)}
.cp-op-maat{font-size:14.5px;color:var(--ink);line-height:1.45}
.cp-noot{font-size:13px;color:#69727d}
.cp-deels{font-size:13.5px;color:var(--ink);line-height:1.45}
@media(min-width:1024px){
  .hero-met-form .calc-stap[data-vraag="Prijsindicatie"],.hero-met-form .calc-stap[data-vraag="Price indication"]{min-height:168px}
  .hero-met-form .calc-aantallen{max-height:150px;overflow-y:auto;margin-bottom:10px;gap:6px}
  .hero-met-form .ca-rij{padding:5px 10px;font-size:13.5px}
  .hero-met-form .ca-veld input{width:70px;padding:5px 8px}
  .hero-met-form .calc-prijs{padding:8px 12px}
  .hero-met-form .cp-bedrag{font-size:24px}
  .hero-met-form .calc-tegels.kol-4 .calc-tegel{padding:10px 4px;font-size:12.5px}
}
@media(max-width:560px){
  .ca-rij{padding:6px 10px;font-size:14px}
  .ca-veld{gap:6px}
  .ca-veld input{width:64px;padding:7px 8px}
  .ca-eenheid{min-width:0;font-size:13px}
}
/* plaatskaarten op de homepage: foto in een eigen laag onder de donkere band */
.projectkaart .plaats-beeld{position:absolute;inset:0;background-size:cover;background-position:center}
/* footer op mobiel: de vinkjeslijst in één kolom, als blok gecentreerd (vaste mobiele regel) */
@media(max-width:640px){
  .footer-boven>div:first-child ul{grid-template-columns:1fr;width:fit-content;margin-inline:auto;text-align:left}
  .footer-boven>div:first-child .vink{white-space:nowrap}
}