/* =======================================================================
   grundreinigung.css - seitenlokale Regeln fuer /grundreinigung/
   -----------------------------------------------------------------------
   Herkunft: Viereck_Grundreinigung_Prototype_CURRENT.html, <style>-Block.
   Von 353 Regeln des Prototyps stehen 295
   bereits zeichengleich in site.css und sind hier NICHT wiederholt.
   Zusaetzlich entfallen:
     img          - site.css fuehrt die korrigierte Fassung (<picture>-Fix)
     .ph.i-gproz,.im.i-gproz,.imgbox.i-gproz
                  - Data-URI-Hintergrund, ersetzt durch echte
                    Bilddateien in <picture>/<img>.
     .ph.i-gdirekt,.im.i-gdirekt,.imgbox.i-gdirekt
                  - Data-URI-Hintergrund, ersetzt durch echte
                    Bilddateien in <picture>/<img>.
   Inhaltlich wurde nichts geaendert. Praefix GRU-S.
   ======================================================================= */

.ghero{padding:var(--s8) 0 calc(var(--s8) + 40px)}
.ghero .in{max-width:var(--wrap)}
.ghero .heroin{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s8);
  align-items:center;max-width:none}
.ghero h1{margin:0 0 var(--s5)}
.ghero .display{font-size:clamp(34px,4.4vw,54px);font-weight:600;
  letter-spacing:-.026em;line-height:1.08;display:block}
.ghero .lbl{color:var(--gold);margin-bottom:var(--s4)}
.ghero .sub{max-width:46ch;margin-bottom:0}
.ghero .acts{margin-top:var(--s6)}
.ghero figure{margin:0}
.ghero .ph{aspect-ratio:3/2;overflow:hidden;border:1px solid var(--n800);
  position:relative}
.ghero .ph.hoch{aspect-ratio:2/3}
.ghero figcaption{padding-top:10px;font-size:13px;font-weight:600;color:var(--n300)}
.ghero .water{right:auto;bottom:auto;left:var(--gut);top:var(--s7);
  width:420px;height:420px;color:#fff;opacity:.045}
.gflow{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--s7)}
.gflow li{padding-top:var(--s4);border-top:2px solid var(--n300)}
.gflow .k{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);margin-bottom:var(--s3)}
.gflow h3{font-size:19px;margin-bottom:var(--s3)}
.gflow p{color:var(--n700);font-size:15px;line-height:1.7}
.gflow p + p{margin-top:var(--s4)}
.ganl{margin-top:var(--s7)}
.ganl h3{margin-bottom:var(--s4)}
.ganl p{color:var(--n700);line-height:1.7}
.ganl .facts{display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s3) var(--s6);margin:var(--s5) 0 0}
.gweg{list-style:none;margin:var(--s6) 0 0;padding:0}
.gweg li{border-top:1px solid var(--n300);padding:var(--s5) 0 var(--s5)}
.gweg li:last-child{padding-bottom:0}
.gweg .k{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--n500);margin-bottom:var(--s3)}
.gweg h4{font-size:17px;font-weight:600;margin:0 0 var(--s3);line-height:1.35}
.gweg p{color:var(--n700);line-height:1.7}
.gweg p + p{margin-top:var(--s3)}
.gwegfoot{margin-top:var(--s6)}
.gproof .gdirekt{margin:0 auto;max-width:1000px}
.gproof .gdirekt figure{margin:0}
.gproof .gpair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);
  max-width:1000px;margin:0 auto}
.gproof .gpair figure{margin:0}
.gproof .ph{aspect-ratio:3/2;overflow:hidden;border:1px solid var(--n200);
  position:relative}
.gproof figcaption{padding-top:10px;font-size:13px;color:var(--n600);
  line-height:1.5}
.gproof p{color:var(--n700);line-height:1.7;margin-bottom:var(--s4)}
.gproof p:last-child{margin-bottom:0}
.gnext{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.gnext li{border-top:1px solid var(--n300);padding-top:var(--s4)}
.gnext .k{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--n500);margin-bottom:var(--s3)}
.gnext p{font-size:14px;color:var(--n700);line-height:1.6;margin-top:var(--s3)}
@media (max-width:960px){
  .ghero{padding:var(--s7) 0 calc(var(--s7) + 30px)}
  .ghero .heroin{grid-template-columns:1fr;gap:var(--s6)}
  .ghero figure{max-width:560px}
  .ghero .water{left:var(--gut);top:var(--s6);
    width:min(74%,340px);height:min(74vw,340px)}
  .gflow{grid-template-columns:1fr;gap:var(--s6)}
  .ganl .facts{grid-template-columns:1fr}
  .gproof .gpair{grid-template-columns:1fr;gap:var(--s6);max-width:560px}
  .gnext{grid-template-columns:1fr 1fr;gap:var(--s5)}
}
@media (max-width:560px){
  .gnext{grid-template-columns:1fr}
  .ghero figcaption{font-size:12px;padding-top:8px}
}
@media (max-width:480px){
  .ghero .display{font-size:clamp(26px,8.6vw,38px)}
}
@media (max-width:380px){
  .gsec h2{font-size:22px}
}

/* =======================================================================
   V1-Review E3 · Block 2 · BG3: Einzelbild .gdirekt im Abschnitt
   "Grundreinigung im direkten Vergleich" auf die Breite des Fliesstexts
   (.narrow, 760 px), linksbuendig statt zentriert. Mobil unveraendert.
   ======================================================================= */
.gproof .gdirekt{max-width:var(--narrow);margin:0}

/* E1.1 (03.11.2026): Anlaesse als ausgewogene 2x2-Kacheln (K3, gleiche
   Familie wie "Drei Wege"); Projektlink direkt unter dem Vergleichsbild. */
.gsec .gwann{margin-top:var(--s5)}
.gproof .gdlink{margin:var(--s4) 0 0;max-width:var(--narrow)}

/* E1.2 (03.11.2026): Direktvergleich auf Containerbreite (wie Kartenraster),
   Seitenverhaeltnis 3:2 unveraendert; Projektlink direkt unter der Unterschrift. */
.gproof .gdirekt{max-width:none}
.gproof .gdlink{max-width:none}