/* "Cairo" was never loaded by the site, so phones without it locally fell back to a serif. Brand font everywhere instead:
   the name "Cairo" now maps to the site's Nunito Sans file. */
@font-face{font-family:"Cairo";src:url("https://brale.de/wp-content/uploads/2026/07/nunito-sans-latin.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
/* Sanierungsbedarf hero labels: only the label shapes are Putzweiss; the invisible hover hit areas stay transparent */
html body.page-id-1790 [data-id="28014d2b"] svg rect.usp-hit:not([fill="none"]):not([fill="transparent"]){fill:transparent!important}
/* Energy main page: the S2 photo overlaps the trust bar (not the other way round) */
html body [data-id="6777b212"]{z-index:3!important}
/* Hero trust bars (all departments except Bau): no fill — a 16 px backdrop blur and Stahlgrau labels + icons,
   so the strip reads as part of the hero without pulling attention. No mask: mask + backdrop blur made Safari drop the strip. */
html:not(.bm) body .features.marquee-mask{background:transparent!important;-webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important;-webkit-mask-image:none!important;mask-image:none!important}
html:not(.bm) body .features.marquee-mask :is(p,span,.elementor-icon-list-text){color:#CFD5D4!important}
html:not(.bm) body .features.marquee-mask svg :is(path,rect,circle,polygon,ellipse,line,polyline):not([fill="none"]){fill:#CFD5D4!important}
html:not(.bm) body .features.marquee-mask svg [stroke]:not([stroke="none"]){stroke:#CFD5D4!important}
/* Over a background video or the Energy parallax photo layer there is no blur: mobile browsers can't include those layers in a backdrop blur
   and blurred the light page behind them instead, which hid the Stahlgrau labels. The strip stays transparent over the dark hero. Class set by the script below. */
html.br-vidhero:not(.bm) body .features.marquee-mask{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* Bau (sits on white): Putzweiss strip with feathered sides, as before (no backdrop blur, for Safari) */
html.bm body .features.marquee-mask{background:rgba(249,247,245,.88)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)!important}
/* Trust bar hover: the icon takes the same department gradient as the text */
html body .features.marquee-mask .marquee-track .feature-item:hover svg :is(path,rect,circle,polygon,ellipse,line,polyline):not([fill="none"]){fill:url(#featureIconGradient)!important}
html.bm body .features.marquee-mask .marquee-track .feature-item:hover svg :is(path,rect,circle,polygon,ellipse,line,polyline):not([fill="none"]){fill:url(#bmGoldGrad)!important}
html.gm body .features.marquee-mask .marquee-track .feature-item:hover svg :is(path,rect,circle,polygon,ellipse,line,polyline):not([fill="none"]){fill:url(#gmCortenGrad)!important}
/* Energy form sections start from Putzweiss like Rendite-Booster (137d672c), so the trust section above flows into them without an edge */
html body :is([data-id="50d35e0"],[data-id="777b8a7d"]){background-image:linear-gradient(#F9F7F5 0%,#73A541 100%)!important}
@media (max-width:767px){
  /* tiny labels inside cards (Bau, Invest …): centred with a fixed 12 px gap (Figma); rows outside cards keep the full-width spread */
  html body .br-chips:not(.br-chips--lg){justify-content:center!important;column-gap:12px!important}
  /* Haustyp pages, S2: photo → fact labels → next section = 24 px */
  html body :is([data-id="7f063581"],[data-id="4459da96"],[data-id="5b7d356"],[data-id="23fe9479"],[data-id="1d5ddc"]) > :nth-last-child(2){margin-bottom:0!important}
  html body :is([data-id="39c843c8"],[data-id="429d54fc"],[data-id="6b144f8b"],[data-id="10d30aa6"],[data-id="54221752"]){padding-bottom:24px!important}
  /* Haustyp house cards: 8 px rhythm inside the text block, 24 px to the CTA (Figma 4695:14262) */
  :is(.page-id-2689,.page-id-2772,.page-id-2820,.page-id-2859,.page-id-2881) .hc:is(.sales-big,.hc-small) .hc-content > :is(h2,h3){margin:0!important}
  :is(.page-id-2689,.page-id-2772,.page-id-2820,.page-id-2859,.page-id-2881) a.hc.hc-small .hc-content > p:not(.feature-tag){display:none!important}
  :is(.page-id-2689,.page-id-2772,.page-id-2820,.page-id-2859,.page-id-2881) .hc.sales-big .br-chips{padding-block:0!important}
  :is(.page-id-2689,.page-id-2772,.page-id-2820,.page-id-2859,.page-id-2881) .hc:is(.sales-big,.hc-small).is-active .hover-content{margin-top:0!important}
  :is(.page-id-2689,.page-id-2772,.page-id-2820,.page-id-2859,.page-id-2881) .hc:is(.sales-big,.hc-small) .hover-content > p{margin:0!important;padding:0!important}
  :is(.page-id-2689,.page-id-2772,.page-id-2820,.page-id-2859,.page-id-2881) a.hc.hc-small .hover-content:has(> p)::after{margin-top:24px!important}
  /* Facility S2: intro text + worker (right) are pinned together; "Warum BRALE Facility" slides over both */
  .page-id-3914 .br-s2pin{position:sticky;z-index:1}
  .page-id-3914 .br-s2pin .br-worker{position:static!important;top:auto!important;height:350px!important;margin:0 -24px 0!important;
    background-position:right 0 top 24px,right -222px top -50px!important}
  /* Same S2 pattern on Sanieren (Energy) and Investieren: full-width text, 300 px cut-out photo bleeding off the right edge
     right below it, text + photo pinned together, the next section slides over as a layer with a soft shadow */
  html body [data-id="6a69877f"]{gap:16px!important}
  html body [data-id="2f59302b"]{padding-bottom:0!important}
  html body [data-id="6777b212"]{align-self:flex-end!important;width:300px!important;max-width:none!important;height:340px!important;min-height:0!important;margin:0 -24px 0 0!important;
    background-size:300px auto!important;background-position:right top!important;background-repeat:no-repeat!important}
  html body .br-slide-wrap > :first-child{position:sticky!important;z-index:1}
  /* Bau keeps its own S2 layout (labels in one column on the left, photo on the right); it only gets the pin + slide-over */
  html body .br-chips[data-id="bdd860e"]{flex-direction:column!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:flex-start!important;row-gap:8px!important}
  html body [data-id="14039c0a"]{top:auto!important;bottom:0!important;left:200px!important;right:0!important;width:auto!important;height:360px!important;margin:0!important;background-size:auto 100%!important;background-position:left top!important}
  /* Trust bars on phones: no side feather (Bau) */
  html.bm body .features.marquee-mask{-webkit-mask-image:none!important;mask-image:none!important}
  html body [data-id="298ccb0"]{position:relative!important;z-index:3!important;background-color:#F9F7F5!important;box-shadow:0 -16px 40px rgba(21,18,17,.10)!important}
  html body [data-id="810681a"]{position:relative!important;z-index:3!important;background-color:#F9F7F5!important;box-shadow:0 -16px 40px rgba(21,18,17,.10)!important}
  html body [data-id="36a3972"]{padding-bottom:0!important;overflow:hidden!important}
  html body :is([data-id="babaa1c"],[data-id="0a5a6ff"]){width:auto!important;max-width:none!important;padding-right:0!important}
  html body [data-id="0a5a6ff"]{margin-top:0!important}
  html body [data-id="f748d04"]{margin-bottom:16px!important}
  html body [data-id="98a34ee"]{position:static!important;align-self:flex-end!important;width:300px!important;max-width:none!important;height:340px!important;min-height:0!important;margin:0 -24px 0 0!important;
    background-size:300px auto!important;background-position:right top!important;background-repeat:no-repeat!important;inset:auto!important}
  html body [data-id="347f472"]{box-shadow:0 -16px 40px rgba(21,18,17,.10)!important}
}
@media (min-width:768px) and (max-width:1025px){
  html body :is([data-id="7f063581"],[data-id="4459da96"],[data-id="5b7d356"],[data-id="23fe9479"],[data-id="1d5ddc"]) > :nth-last-child(2){margin-bottom:8px!important}
  html body :is([data-id="39c843c8"],[data-id="429d54fc"],[data-id="6b144f8b"],[data-id="10d30aa6"],[data-id="54221752"]){padding-bottom:32px!important}
  :is(.page-id-2689,.page-id-2772,.page-id-2820,.page-id-2859,.page-id-2881) .hc:is(.sales-big,.hc-small).is-active .hover-content{margin-top:8px!important}
}