/* =======================================================================
   bauendreinigung.css - seitenlokale Regeln fuer /bauendreinigung/
   -----------------------------------------------------------------------
   Herkunft: Viereck_Bauendreinigung_Prototype_CURRENT.html, <style>-Block.
   Von 345 Regeln des Prototyps stehen 291
   bereits zeichengleich in site.css und sind hier NICHT wiederholt.
   Zusaetzlich entfallen:
     img          - site.css fuehrt die korrigierte Fassung (<picture>-Fix)
     .ph.i-hvor,.im.i-hvor,.imgbox.i-hvor
                  - Data-URI-Hintergrund, ersetzt durch echte
                    Bilddateien in <picture>/<img>.
     .ph.i-hnach,.im.i-hnach,.imgbox.i-hnach
                  - Data-URI-Hintergrund, ersetzt durch echte
                    Bilddateien in <picture>/<img>.
     .ph.i-bvor,.im.i-bvor,.imgbox.i-bvor
                  - Data-URI-Hintergrund, ersetzt durch echte
                    Bilddateien in <picture>/<img>.
     .ph.i-bnach,.im.i-bnach,.imgbox.i-bnach
                  - Data-URI-Hintergrund, ersetzt durch echte
                    Bilddateien in <picture>/<img>.
   Inhaltlich wurde nichts geaendert. Praefix BAU-S.
   ======================================================================= */

.bhero{padding:var(--s8) 0 calc(var(--s8) + 40px)}
.bhero .in{max-width:var(--wrap)}
.bhero .heroin{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);
  align-items:center;max-width:none}
.bhero h1{margin:0 0 var(--s5)}
.bhero .display{font-size:clamp(34px,4.4vw,54px);font-weight:600;
  letter-spacing:-.026em;line-height:1.08;display:block}
.bhero .lbl{color:var(--gold);margin-bottom:var(--s4)}
.bhero .sub{max-width:44ch;margin-bottom:0}
.bhero .acts{margin-top:var(--s6)}
.bhpair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.bhpair figure{margin:0}
.bhero .ph{aspect-ratio:2/3;overflow:hidden;border:1px solid var(--n800);
  position:relative}
.bhero figcaption{display:flex;align-items:center;gap:8px;padding:0 0 8px;font-size:12.5px;
  font-weight:600;letter-spacing:.02em;line-height:1.3;color:var(--n300)}
/* E1.1: Punkt der Vorher/Nachher-Kennzeichnung im Hero (Hero rendert vor komponenten.css) */
.bhero .vk-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.bhnote{margin-top:var(--s4);font-size:13px;color:var(--n500);line-height:1.5}
.bhero .water{right:auto;bottom:auto;left:var(--gut);top:var(--s7);
  width:420px;height:420px;color:#fff;opacity:.045}
.bflow{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--s7)}
.bflow li{padding-top:var(--s4);border-top:2px solid var(--n300)}
.bflow .k{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);margin-bottom:var(--s3)}
.bflow h3{font-size:19px;margin-bottom:var(--s3)}
.bflow p{color:var(--n700);font-size:15px;line-height:1.7}
.bflow p + p{margin-top:var(--s4)}
.bres{margin-top:var(--s7)}
.bres h3{margin-bottom:var(--s4)}
.bres p{color:var(--n700);line-height:1.7}
.bres .facts{display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s3) var(--s6);margin:var(--s5) 0}
.babgr{margin-top:var(--s7)}
.babgr h3{margin-bottom:var(--s4)}
.babgr p{color:var(--n700);line-height:1.7;margin-bottom:var(--s4)}
.babgr p:last-of-type{margin-bottom:0}
.babgr .foot{margin-top:var(--s6)}
.bproof .ba{gap:var(--s5);max-width:1000px}
.bproof .ba .ph{aspect-ratio:3/4}
.bproof p{color:var(--n700);line-height:1.7;margin-bottom:var(--s4)}
.bproof p:last-child{margin-bottom:0}
.bnext{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.bnext li{border-top:1px solid var(--n300);padding-top:var(--s4)}
.bnext .k{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--n500);margin-bottom:var(--s3)}
.bnext p{font-size:14px;color:var(--n700);line-height:1.6;margin-top:var(--s3)}
@media (max-width:960px){
  .bhero{padding:var(--s7) 0 calc(var(--s7) + 30px)}
  .bhero .heroin{grid-template-columns:1fr;gap:var(--s6)}
  .bhpair{max-width:560px}
  .bhero .water{left:var(--gut);top:var(--s6);
    width:min(74%,340px);height:min(74vw,340px)}
  .bflow{grid-template-columns:1fr;gap:var(--s6)}
  .bres .facts{grid-template-columns:1fr}
  .bnext{grid-template-columns:1fr 1fr;gap:var(--s5)}
}
@media (max-width:560px){
  .bnext{grid-template-columns:1fr}
  .bhpair{gap:var(--s3)}
  .bhero figcaption{font-size:12px;padding:0 0 6px}
}
@media (max-width:480px){
  .bhero .display{font-size:clamp(26px,8.6vw,38px)}
}
@media (max-width:380px){
  .bsec h2{font-size:22px}
}

/* =======================================================================
   V1-Review E3 · Block 2 · BG2: Bildpaar .ba im Abschnitt "Detailbereiche
   entscheiden ueber den Eindruck" auf die Breite des Fliesstexts (.narrow,
   760 px), linksbuendig an der Textkante; je Bild rund 370 px. Mobil unveraendert.
   Die Dreierreihen 01-03 bleiben auf voller Rasterbreite.
   ======================================================================= */
.bproof .ba{max-width:var(--narrow);margin-left:0;margin-right:0}

/* =======================================================================
   E1.2 (03.11.2026): "Was nach einer Baumassnahme typischerweise
   zurueckbleibt" als breite Inhaltskarte in der Breite der drei
   Prozesskarten (Titel und Einfuehrung links, Liste und Abgrenzung rechts).
   Ablaufprofil-Paar auf Containerbreite, Seitenverhaeltnis 3:4 unveraendert;
   Bildunterschrift direkt unter dem Paar, Schlusssatz als Kernaussage.
   ======================================================================= */
.bres.bres--karte{background:#fff;border:1px solid var(--n200);border-top:2px solid var(--gold);
  border-radius:var(--r-s);padding:var(--s6);display:grid;grid-template-columns:1fr;gap:var(--s5)}
.bres--karte .bresk p,.bres--karte .bresl > p{max-width:68ch}
.bres--karte .facts{margin:0 0 var(--s5)}
@media(min-width:1024px){
  .bres.bres--karte{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s7);padding:var(--s7)}
}
@media(max-width:639px){ .bres.bres--karte{padding:var(--s5)} }
.bproof .ba{max-width:none}
.bproof .bcap{margin:12px 0 0;max-width:none}
.bproof .bkern{margin-top:var(--s6);max-width:68ch;padding-left:var(--s5);border-left:2px solid var(--gold);
  font-size:17px;color:var(--n700)}
@media(max-width:639px){ .bproof .bkern{padding-left:var(--s4);font-size:16px} }