/*
 * Stalico: aanvullingen op de Webflow-stijl na de controle van 27-10-2026
 * (Klaas Vanhove). Geladen op elke pagina, na de inline stijl van de overzet.
 */

/* De teller in de zwarte bol rechtsonder: wit, zoals .cart-quantity in Webflow. */
.cart_quantity-wrapper .s27-mand-teller,.cart_quantity-wrapper .s27-mand-teller[hidden]{color:#fff;line-height:1;font-size:.875rem;text-align:center}

/* De lade van de offertemand: papier met het watermerk linksonder en de rode hoek rechtsboven, zoals het Webflow-mandje. */
.s27-mand .s27-mand__lade{background-color:#fff;background-image:url(/beeld/Stalico-watermark.png),url(/beeld/Paper-texture.jpg);background-size:350px auto,cover;background-position:-50% 110%,50% 50%;background-repeat:no-repeat,no-repeat}
.s27-mand .s27-mand__lade::before{content:"";position:absolute;top:0;right:0;width:154px;height:89px;background:url(/beeld/Header_shape-p-500.png) no-repeat top right/contain;pointer-events:none}
.s27-mand .s27-mand__kop{position:relative;border-bottom:0}
.s27-mand .s27-mand__sluit{position:relative;z-index:1;color:#fff}
.s27-mand .s27-mand__voet{border-top:0}
.s27-mand .s27-mand__leeg{padding:96px 12px;color:#000;font-size:1.25rem;line-height:1.4}
.s27-mand .s27-mand__leeg a{color:#a21829;text-decoration:underline}

/*
 * Referenties (Xavier, 27-10-2026): blok op de startpagina, de pagina
 * /referenties, de detailpagina en "Gebruikt door" op een productpagina.
 * Huisstijl van de site: Latinotype Trenda, STALICO-rood, rechte hoeken.
 */
.section_referenties{position:relative}
.ref_kop-blok{max-width:48rem;margin-bottom:3rem}
.ref_rooster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;align-items:stretch}
.ref_rooster:empty{display:none}
.section_referenties.is-product .ref_rooster{grid-template-columns:repeat(2,minmax(0,1fr))}
.section_referenties.is-product:has(.ref_rooster:empty){display:none}
.ref_kaart{display:flex;flex-direction:column;gap:1.25rem;background:#fff;border:1px solid #e3e3e3;padding:1.75rem;font-family:"Latinotype trenda",sans-serif;color:#000}
.ref_kaart-kop{display:flex;align-items:center;min-height:3rem}
.ref_logo{display:block;max-height:3rem;max-width:9rem;width:auto;height:auto;object-fit:contain}
.ref_logo.is-groot{max-height:4.5rem;max-width:12rem;margin-bottom:1.5rem}
.ref_merk{font-weight:900;font-size:1.125rem;text-transform:uppercase;letter-spacing:.02em}
.ref_kaart-kop:has(> .ref_logo:not([hidden])) .ref_merk{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ref_media{position:relative;aspect-ratio:16/9;background:#f3f3f3;overflow:hidden}
.ref_media:has(> img.ref_foto[hidden]):has(> input.ref_video[value=""]){display:none}
.ref_foto{display:block;width:100%;height:100%;object-fit:cover}
.ref_media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ref_speel{position:absolute;inset:0;display:flex;align-items:flex-end;gap:.75rem;padding:1rem;border:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 60%);color:#fff;font:inherit;font-weight:600;text-align:left;cursor:pointer}
.ref_media:has(> input.ref_video[value=""]) .ref_speel{display:none}
.ref_speel-icoon{flex:none;width:3rem;height:3rem;background:#a21829;clip-path:none;position:relative}
.ref_speel-icoon::after{content:"";position:absolute;left:1.15rem;top:.85rem;border-style:solid;border-width:.65rem 0 .65rem 1.1rem;border-color:transparent transparent transparent #fff}
.ref_speel:hover .ref_speel-icoon,.ref_speel:focus-visible .ref_speel-icoon{background:#7d1220}
.ref_speel-tekst{text-transform:uppercase;letter-spacing:.03em;font-size:.875rem;padding-bottom:.25rem}
.ref_quote{position:relative;margin:0;padding:0 0 0 2.25rem;border:0;font-size:1.25rem;line-height:1.45;font-weight:600}
.ref_quote::before{content:"\201C";position:absolute;left:0;top:-.35rem;font-size:3.25rem;line-height:1;color:#a21829;font-weight:900}
.ref_quote.is-groot{font-size:1.75rem;line-height:1.35;font-weight:900}
.ref_chips{display:flex;flex-wrap:wrap;gap:.5rem}
.ref_chips:not(:has(.ref_chip:not(:empty))){display:none}
.ref_chip{border:1px solid #c2c2c2;padding:.25rem .75rem;font-size:.875rem;line-height:1.4}
.ref_chip:empty{display:none}
.ref_voet{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-top:auto}
.ref_persoon p{margin:0}
.ref_naam{font-weight:900}
.ref_functie,.ref_partner{color:#555;font-size:.9375rem;line-height:1.4}
.ref_partner a{color:#a21829;text-decoration:underline}
.ref_partner-logo{display:block;max-height:2.5rem;width:auto;margin-top:.75rem}
.ref_persoon:has(.ref_partner.s27c > input[value=""]) .ref_partner-logo{display:none}
.ref_cijfer{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none}
.ref_cijfer strong{font-size:2.25rem;line-height:1;font-weight:900;color:#a21829}
.ref_cijfer span{font-size:.875rem;color:#555}
.ref_cijfer.is-groot{align-items:flex-start;text-align:left;margin-top:1.5rem}
.ref_cijfer.is-groot strong{font-size:3.5rem}
.ref_meer{display:inline-flex;align-items:center;gap:.25rem;color:#000;font-weight:600;text-transform:uppercase;font-size:.875rem;text-decoration:none;border-bottom:1px solid #000;align-self:flex-start;padding-bottom:.125rem}
.ref_meer:hover{color:#a21829;border-color:#a21829}
.ref_alle{display:flex;justify-content:center;margin-top:3rem}
.section_referentie .ref_titel{max-width:56rem}
.ref_intro{max-width:48rem;margin-bottom:3rem}
.ref_detail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem;align-items:start}
.ref_lang{margin:1.5rem 0;font-size:1.125rem;line-height:1.6;color:#333;white-space:pre-line}
.ref_detail-rechts .ref_persoon{border-top:1px solid #e3e3e3;padding-top:1.25rem}
.ref_detail-rechts .ref_chips{margin-top:1.5rem}
.ref_producten{margin-top:2rem}
.ref_productlijst{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.ref_productlijst li a{display:inline-block;background:#a21829;color:#fff;padding:.35rem .9rem;text-decoration:none;font-weight:600;font-size:.9375rem}
.ref_productlijst li a:hover{background:#7d1220}
.ref_cta-blok{background:#f3f3f3;padding:3rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}
.ref_cta-blok p{max-width:40rem;margin:0}
.ref_cta-knoppen{margin-top:.5rem}
@media (max-width:991px){
  .ref_rooster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ref_detail{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:767px){
  .ref_rooster,.section_referenties.is-product .ref_rooster{grid-template-columns:1fr}
  .ref_kaart{padding:1.25rem}
  .ref_quote{font-size:1.125rem}
  .ref_quote.is-groot{font-size:1.375rem}
  .ref_cta-blok{padding:2rem 1.25rem}
  .ref_kop-blok{margin-bottom:2rem}
}

/* Het lege mandje: de zin in het midden van de lade, zoals in Webflow. */
.s27-mand .s27-mand__inhoud:has(> .s27-mand__leeg){display:flex;align-items:center;justify-content:center}

/* Detailpagina: alleen de volledige uitspraak, als citaat (de korte staat al op de kaart). */
.section_referentie .ref_quote.is-groot{display:none}
.section_referentie .ref_lang{position:relative;margin:0 0 1.75rem;padding-left:2.75rem;font-size:1.375rem;line-height:1.5;font-weight:600;color:#000}
.section_referentie .ref_lang::before{content:"\201C";position:absolute;left:0;top:-.5rem;font-size:4rem;line-height:1;color:#a21829;font-weight:900}
.ref_partner-logo{max-height:4rem}
@media (max-width:767px){.section_referentie .ref_lang{font-size:1.125rem;padding-left:2.25rem}}

/*
 * Menu (28-10-2026): Sectoren en Over ons als uitklaplijst. Op een groot
 * scherm opent de lijst bij hover of focus, op een telefoon met het pijltje
 * (script/stalico-extra.js). Wit paneel met de rode rand van de huisstijl.
 */
.s27-dd{position:relative;display:inline-flex;align-items:center;vertical-align:top}
.s27-dd .s27-dd__kop{padding-right:.25rem}
.s27-dd__knop{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;margin:0 .5rem 0 0;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.s27-dd__knop svg{transition:transform .2s}
.s27-dd.is-open .s27-dd__knop svg{transform:rotate(180deg)}
.s27-dd__lijst{position:absolute;top:100%;left:0;z-index:1000;min-width:15rem;padding:.5rem 0;background:#fff;border-top:3px solid #a21829;box-shadow:0 12px 32px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility 0s .15s}
.s27-dd:hover .s27-dd__lijst,.s27-dd:focus-within .s27-dd__lijst,.s27-dd.is-open .s27-dd__lijst{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .15s}
.s27-dd.is-dicht .s27-dd__lijst{opacity:0;visibility:hidden}
.s27-dd__items{display:flex;flex-direction:column}
/* Een taal zonder vertaalde sectoren: geen lege uitklaplijst in het menu (tot de vertalingen er zijn). */
.s27-dd:has(.s27-dd__items[data-cms-collectie]:empty){display:none}
.s27-dd__link{display:block;padding:.625rem 1.25rem;color:#000;font-family:"Latinotype trenda",sans-serif;font-size:.9375rem;font-weight:600;line-height:1.3;text-decoration:none;white-space:nowrap}
.s27-dd__link:hover,.s27-dd__link:focus-visible{background:#f3f3f3;color:#a21829}
@media screen and (max-width:991px){
  .s27-dd{display:flex;flex-wrap:wrap;width:100%}
  .s27-dd .s27-dd__kop{flex:1}
  .s27-dd__knop{width:2.75rem;height:2.75rem;margin:0}
  .s27-dd__lijst,.s27-dd:hover .s27-dd__lijst,.s27-dd:focus-within .s27-dd__lijst{position:static;display:none;flex-basis:100%;min-width:0;padding:0 0 .75rem 1rem;border-top:0;box-shadow:none;opacity:1;visibility:visible;transform:none;transition:none}
  .s27-dd.is-open .s27-dd__lijst{display:block}
  .s27-dd__link{padding:.5rem 0;font-size:1rem;white-space:normal;text-align:left}
}

/*
 * Sectorpagina's (briefings Xavier, 05-10-2026): /sectoren en de detailpagina.
 * Volgorde van de briefing: H1 en intro, kerncijfers, probleem, oplossing,
 * referentie, contactknoppen, FAQ.
 */
.sec_sjabloonteksten{display:none!important}
.sec_h1{font-size:3rem}
.sec_knop-lijn{color:#000;border-color:#000}
.sec_knop-lijn:hover{background:#000;color:#fff}
.section_sec-cijfers{background:#f3f3f3}
.sec_cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;padding:2.5rem 0;font-family:"Latinotype trenda",sans-serif}
.sec_cijfer{display:flex;flex-direction:column;gap:.25rem;padding-left:1.25rem;border-left:3px solid #a21829}
.sec_cijfer strong{font-size:2.5rem;line-height:1.1;font-weight:900;color:#a21829}
.sec_cijfer span{font-size:1rem;line-height:1.4;font-weight:600;color:#000}
.sec_twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:4rem;align-items:start}
.sec_twee-kop{position:sticky;top:7rem}
.sec_lijst{font-size:1.125rem;line-height:1.6}
.sec_lijst ul{margin:0 0 1.5rem;padding:0;list-style:none}
.sec_lijst li{position:relative;margin:0 0 .875rem;padding-left:2rem}
.sec_lijst li::before{content:"";position:absolute;left:0;top:.55em;width:.75rem;height:.75rem;background:#a21829}
.sec_lijst.is-probleem li::before{background:#000}
.sec_lijst h3{margin:2rem 0 1rem;font-family:"Latinotype trenda",sans-serif;font-size:1.5rem;line-height:1.3;font-weight:900}
.sec_lijst p{margin:0 0 1.25rem}
.sec_lijst > :first-child{margin-top:0}
.sec_lijst.is-oplossing > p:first-child{font-size:1.25rem;font-weight:600}
.sec_doelgroep{margin-top:3rem;padding:1.5rem 2rem;background:#f3f3f3;border-left:4px solid #a21829;font-family:"Latinotype trenda",sans-serif}
.sec_doelgroep p{margin:0}
.sec_doelgroep-kop{font-weight:900;font-size:1.125rem;margin-bottom:.375rem!important}
.sec_doelgroep-tekst{font-size:1.0625rem;line-height:1.5}
.sec_producten:empty,.sec_galerij:empty,.sec_faqlijst:empty,.sec_kaarten:empty{display:none}
.sec_productbeeld{width:100%;max-width:230px;height:auto}
.sec_productknop{background:none;color:#000;padding:.25rem 0}
.sec_galerij{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.5rem}
.sec_galerij-item{margin:0;aspect-ratio:4/3;overflow:hidden;background:#f3f3f3}
.sec_galerij-item img{display:block;width:100%;height:100%;object-fit:cover}
.section_sec-referentie{background:#f3f3f3}
.sec_referentie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;align-items:center}
.sec_referentie-tekst{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.sec_referentie-tekst h2,.sec_referentie-intro{margin:0}
.sec_referentie-namen p{margin:0 0 .5rem;font-size:1.125rem}
.sec_referentie-beeld{aspect-ratio:4/3;overflow:hidden;background:#e3e3e3}
.sec_referentie-beeld img{display:block;width:100%;height:100%;object-fit:cover}
.sec_referentie-beeld:has(> img[hidden]){display:none}
.sec_referentie:has(.sec_referentie-beeld > img[hidden]){grid-template-columns:minmax(0,1fr)}
/* SECTORFOTO'S ALTIJD VOLLEDIG (04-11-2026). Een staande foto werd in een
   liggend kader bijgesneden en verloor zo wat erop stond. Het beeld past nu
   volledig in zijn kader, en wat er naast een staande foto overblijft, vult een
   wazige kopie van hetzelfde beeld (sec_beeldkader-achter, aria-hidden), zodat
   er geen lege banden staan.
   - De grote foto bovenaan (sec_beeldkader) volgt de verhouding van de foto,
     tot een maximale hoogte.
   - De referentiefoto (sec_beeldkader is-vast) en de galerijtegels houden hun
     vaste 4:3-kader. De galerij vult alleen de eerste img van haar patroon
     (galerijNaarHtml), dus daar zet script/stalico-extra.js de wazige kopie
     erbij; zonder script blijft de grijze tegel, met het beeld wel volledig.
   Contain en het midden met !important: een focuspunt uit het CMS zet inline
   object-fit:cover of object-position, en dat hoort hier niet te snijden of het
   beeld uit het midden te schuiven. */
.sec_beeldkader,.sec_galerij-item{position:relative;overflow:hidden}
.sec_beeldkader{background:#e3e3e3}
.sec_beeldkader > img,.sec_galerij-item > img{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:auto;max-height:min(80vh,45rem);object-fit:contain!important;object-position:50% 50%!important}
.sec_beeldkader.is-vast > img,.sec_galerij-item > img{height:100%;max-height:none}
.sec_beeldkader > img.sec_beeldkader-achter,.sec_galerij-item > img.sec_beeldkader-achter{position:absolute;inset:0;z-index:0;height:100%;max-height:none;object-fit:cover!important;filter:blur(28px);transform:scale(1.15);opacity:.6;pointer-events:none}
.sec_beeldkader > img[hidden]{display:none!important}
.sec_beeldkader:has(> img.header15_image[hidden]){display:none}
.sec_logos-rij{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.5rem}
.sec_logos-rij img{display:block;max-height:3rem;max-width:9rem;width:auto;height:auto;object-fit:contain}
.section_sec-contact{background:#000;color:#fff}
.sec_contact{display:flex;align-items:center;justify-content:space-between;gap:2rem 4rem}
.sec_contact-tekst{max-width:40rem}
.sec_contact-tekst h2{margin:0 0 1rem}
.sec_contact-tekst p{margin:0}
.sec_knoppen{flex:none}
.sec_faqlijst{border-top:1px solid #d6d6d6}
.sec_faq{border-bottom:1px solid #d6d6d6}
.sec_faq-vraag{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.25rem 0;cursor:pointer;list-style:none;font-family:"Latinotype trenda",sans-serif;font-size:1.25rem;line-height:1.4;font-weight:900}
.sec_faq-vraag::-webkit-details-marker{display:none}
.sec_faq-vraag:hover{color:#a21829}
.sec_faq-icoon{position:relative;flex:none;width:1rem;height:1rem}
.sec_faq-icoon::before,.sec_faq-icoon::after{content:"";position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;background:#a21829;transition:transform .2s}
.sec_faq-icoon::after{transform:rotate(90deg)}
.sec_faq[open] .sec_faq-icoon::after{transform:rotate(0)}
.sec_faq-antwoord{padding:0 2.5rem 1.25rem 0;font-size:1.0625rem;line-height:1.6}
.sec_faq-antwoord p{margin:0 0 .75rem}
.sec_kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.sec_kaart{display:flex;flex-direction:column;background:#fff;border:1px solid #e3e3e3;color:#000;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.sec_kaart:hover{border-color:#a21829;box-shadow:0 12px 32px rgba(0,0,0,.08)}
.sec_kaart-beeld{aspect-ratio:4/3;overflow:hidden;background:#f3f3f3}
.sec_kaart-beeld img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.sec_kaart:hover .sec_kaart-beeld img{transform:scale(1.03)}
.sec_kaart-tekst{display:flex;flex-direction:column;flex:1;gap:.75rem;padding:1.5rem}
.sec_kaart-tekst h2{margin:0}
.sec_kaart-intro{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sec_kaart-knop{margin-top:auto;align-self:flex-start;background:none;color:#000;padding:.25rem 0}
@media screen and (max-width:991px){
  .sec_h1{font-size:2.5rem}
  .sec_twee,.sec_referentie{grid-template-columns:minmax(0,1fr);gap:2rem}
  .sec_twee-kop{position:static}
  .sec_kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec_contact{flex-direction:column;align-items:flex-start}
}
@media screen and (max-width:767px){
  .sec_h1{font-size:2rem;overflow-wrap:break-word;hyphens:auto}
  .sec_cijfers{grid-template-columns:minmax(0,1fr);gap:1.25rem;padding:2rem 0}
  .sec_cijfer strong{font-size:2rem}
  .sec_kaarten{grid-template-columns:minmax(0,1fr)}
  .sec_faq-vraag{font-size:1.125rem}
  .sec_faq-antwoord{padding-right:0}
  .sec_knoppen,.sec_knoppen .button{width:100%}
  .sec_doelgroep{padding:1.25rem 1.25rem}
}

/*
 * Downloads (briefing brochures Xavier, 28-10-2026): een kaart per item van
 * de lijst Downloads, met de cover, de soort, het aantal pagina's, de knop
 * in de taal van de pagina en de andere talen eronder.
 */
.dl_rooster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.dl_rooster:not(:empty) + .dl_leeg{display:none}
.dl_leeg p{margin:0}
.dl_kaart{display:flex;flex-direction:column;background:#fff;border:1px solid #e3e3e3;font-family:"Latinotype trenda",sans-serif;color:#000}
.dl_cover{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:1.5rem;background:#f3f3f3 url(/beeld/Stalico-watermark.png) no-repeat 50% 50%/45% auto;overflow:hidden}
.dl_cover img{display:block;max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.dl_cover:has(> img[hidden]) img{display:none}
.dl_tekst{display:flex;flex-direction:column;flex:1;gap:.75rem;padding:1.5rem}
.dl_meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#555}
.dl_soort{display:none;color:#a21829}
.dl_kaart:has(> input.dl_soort-waarde[value="Brochure"]) .dl_soort[data-dl-soort="Brochure"],
.dl_kaart:has(> input.dl_soort-waarde[value="Technical paper"]) .dl_soort[data-dl-soort="Technical paper"],
.dl_kaart:has(> input.dl_soort-waarde[value="One-pager"]) .dl_soort[data-dl-soort="One-pager"],
.dl_kaart:has(> input.dl_soort-waarde[value="Productfiche"]) .dl_soort[data-dl-soort="Productfiche"]{display:inline}
.dl_titel,.dl_uitleg{margin:0}
.dl_uitleg{flex:1}
.dl_knop-vak{align-self:flex-start;margin-top:.5rem}
.dl_knop{gap:.625rem}
.dl_hulp{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;padding:2rem;background:#f3f3f3}
.dl_hulp p{margin:0}
@media screen and (max-width:991px){.dl_rooster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:767px){.dl_rooster{grid-template-columns:minmax(0,1fr)}.dl_knop-vak{align-self:stretch}.dl_knop{width:100%;justify-content:center}}
/* Lange woorden in een kop (TÉLÉCHARGEMENTS, Branchenlösungen) breken op een telefoon in plaats van over de rand te lopen. */
.sec_pagina h1,.sec_pagina h2,.section_downloads h1{overflow-wrap:break-word;hyphens:auto}
@media screen and (max-width:479px){.section_downloads h1,.section_sec-overzicht h1{font-size:2rem}}