/* =======================================================================
   unterhaltsreinigung.css - seitenlokale Regeln fuer /unterhaltsreinigung/
   -----------------------------------------------------------------------
   Herkunft: Viereck_Unterhaltsreinigung_Prototype_CURRENT.html, <style>-Block.
   Von 372 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-halle
                  - Data-URI-Hintergrund, ersetzt durch echte
                    Bilddateien in <picture>/<img>.
   Inhaltlich wurde nichts geaendert. Praefix UNT-S.
   ======================================================================= */

.uhero{padding:var(--s8) 0 calc(var(--s8) + 40px)}
.uhero .in{max-width:var(--wrap)}
.uhero .heroin{display:grid;grid-template-columns:1.22fr .78fr;
  gap:var(--s6) var(--s8);align-items:start;max-width:none}
.uhero .utxt{grid-column:1;grid-row:1}
.uhero .uacts{grid-column:1;grid-row:2;align-self:start}
.uhero .uobj{grid-column:2;grid-row:1 / span 2}
.uhero h1{margin:0 0 var(--s5)}
.uhero .display{font-size:clamp(34px,4.4vw,54px);font-weight:600;
  letter-spacing:-.026em;line-height:1.08;display:block}
.uhero .lbl{color:var(--gold);margin-bottom:var(--s4)}
.uhero .sub{max-width:46ch;margin-bottom:0;font-size:clamp(17px,1.7vw,20px);
  font-weight:400;line-height:1.55}
.uhero .acts{margin-top:0}
.uhero .water{right:auto;bottom:auto;left:var(--gut);top:var(--s7);
  width:440px;height:440px;color:#fff;opacity:.045}
.uobj{margin:0}
.uobj .k{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--n500);margin-bottom:var(--s5)}
.uobj ul{list-style:none;margin:0;padding:0}
.uobj li{border-top:1px solid var(--n800);padding:var(--s4) 0 var(--s4) 16px;
  position:relative}
.uobj li::before{content:"";position:absolute;left:0;top:calc(var(--s4) + 8px);
  width:6px;height:6px;background:var(--red)}
.uobj .t{display:block;font-size:16px;font-weight:600;color:#fff;line-height:1.35}
.uobj .d{display:block;font-size:13.5px;color:var(--n400);line-height:1.5;
  margin-top:3px}
.uobj .reg{margin:var(--s5) 0 0;font-size:15px;color:var(--n300);line-height:1.5;
  font-weight:500}
.uobj .reg b{color:#fff;font-weight:600}
.uobj .scope{margin:10px 0 0;font-size:13px;color:#ABA49B;line-height:1.5}
.uflow{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--s7)}
.uflow li{padding-top:var(--s4);border-top:2px solid var(--n300)}
.uflow .k{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);margin-bottom:var(--s3)}
.uflow h3{font-size:19px;margin-bottom:var(--s3)}
.uflow p{color:var(--n700);font-size:15px;line-height:1.7}
.uflow p + p{margin-top:var(--s4)}
.ugr{margin-top:var(--s8)}
.ugr h3{margin-bottom:var(--s4)}
.ugr p{color:var(--n700);line-height:1.7;margin-bottom:var(--s4)}
.ugr p:last-of-type{margin-bottom:0}
.ugr .foot{margin-top:var(--s6)}
.uproof p{color:var(--n700);line-height:1.7}
.ucase{border-left:3px solid var(--red);padding:2px 0 2px var(--s5);
  margin:var(--s6) 0 var(--s8)}
.ucase p{color:var(--n700);line-height:1.7;margin:0}
.ucase p + p{margin-top:var(--s4)}
.ucase .src{margin-top:var(--s4);font-size:13.5px;color:var(--n600);line-height:1.55}
.uorg{margin-top:0}
.uorg h3{margin-bottom:var(--s4)}
.uorgf{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s6);
  margin:var(--s6) 0 var(--s7)}
.uorgf li{font-size:17px;line-height:1.5;color:var(--ink);font-weight:500;
  border-top:1px solid var(--n300);padding:var(--s4) 0 0 16px}
.uorgf li::before{top:calc(var(--s4) + 9px)}
.unext{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.unext li{border-top:1px solid var(--n300);padding-top:var(--s4)}
.unext .k{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--n500);margin-bottom:var(--s3)}
.unext p{font-size:14px;color:var(--n700);line-height:1.6;margin-top:var(--s3)}
.ucomp{display:grid;grid-template-columns:.37fr .63fr;gap:var(--s7);
  align-items:start;margin:var(--s6) 0 var(--s8)}
.ucomp figure{margin:0}
.ucomp .ph{aspect-ratio:3/2;overflow:hidden;border:1px solid var(--n200);
  position:relative}
.ucomp figcaption{padding-top:10px;font-size:13px;color:var(--n600);
  line-height:1.5}
.ucomp .ucase{margin:0}
@media (max-width:960px){
  .ucomp{grid-template-columns:1fr;gap:var(--s6);margin:var(--s5) 0 var(--s7)}
  .ucomp figure{max-width:560px}
}
.uanf .utel{color:var(--n600);font-weight:500;font-size:15px;text-decoration:none;
  border-bottom:1px solid var(--n300);padding-bottom:2px}
.uanf .utel:hover{color:var(--ink);border-bottom-color:var(--ink)}
@media (max-width:960px){
  .uhero{padding:var(--s6) 0 calc(var(--s7) + 30px)}
  .uhero .heroin{grid-template-columns:1fr;gap:var(--s6)}
  .uhero .utxt{grid-column:1;grid-row:1}
  .uhero .uobj{grid-column:1;grid-row:2}
  .uhero .uacts{grid-column:1;grid-row:3}
  .uobj{max-width:560px;padding-top:var(--s5);border-top:1px solid var(--n800)}
  .uobj .k{margin-bottom:var(--s4)}
  .uobj li{padding:12px 0 12px 16px}
  .uobj li::before{top:20px}
  .uobj .reg{margin-top:var(--s4)}
  .uhero .water{left:var(--gut);top:var(--s6);
    width:min(74%,340px);height:min(74vw,340px)}
  .uflow{grid-template-columns:1fr;gap:var(--s6)}
  .uorgf{grid-template-columns:1fr;gap:var(--s4);margin:var(--s5) 0 var(--s6)}
  .uanf .utel{padding:11px 0 10px}
  .unext{grid-template-columns:1fr 1fr;gap:var(--s5)}
}
@media (max-width:560px){
  .unext{grid-template-columns:1fr}
}
@media (max-width:480px){
  .uhero .display{font-size:clamp(25px,8.3vw,38px)}
}
@media (max-width:380px){
  .usec h2{font-size:22px}
  .ucase{padding-left:var(--s4)}
}

/* UNT-S-10a Bildausschnitt der Sporthallenaufnahme.
   Der Prototyp setzt den Data-URI-Hintergrund auf "center 46%/cover", nicht
   auf die Vorgabe "center". Ohne diese Regel wuerde das Motiv nach dem
   Wechsel auf <img> um 4 % der Bildhoehe nach unten rutschen und oben
   Deckenflaeche statt Hallenboden zeigen. object-fit:cover kommt aus
   site.css; hier wird ausschliesslich die Position nachgezogen.
   Eng begrenzt auf diese Komposition - keine globale Regel. */
.ucomp .ph>picture>img{object-position:center 46%}

/* =======================================================================
   V1-Review E3 · Nachbesserung A1 (Halt 2, 24.10.2026) · WM-R-UH
   Regel W1, Grundregel wie Startseite A2.2. Gerahmte Bildmarke unveraendert
   (vorhandene Pfade), Weiss 10 %, rechts und unten angeschnitten. "Kantenlaenge"
   = sichtbarer Rahmen (21,4/28,4 der viewBox). Desktop: Rahmen 720 px -> Box
   955,5 px, Rahmen beginnt 117,8 px innerhalb der Box; Rahmen ragt 200 px rechts
   und 180 px unten ueber den Hero-Rand; linke Rahmenkante mindestens 24 px rechts
   der linken Rasterspalte (H1, Einleitung, Schaltflaechen), sonst rueckt sie nach
   rechts. Mobil (bis 960 px): Rahmen 300 px -> Box 398,1 px; 70 px rechts, 75 px
   unten. Unter 360 px kein Motiv. aria-hidden und pointer-events:none vorhanden.
   Dazu (Entscheidung A1, Variante A): .uobj .scope oben in #ABA49B statt n500,
   damit der Text auch ueber einem Rahmenstrich mindestens 4,5 : 1 erreicht.
   ======================================================================= */
.uhero .water{width:955.5px;height:955.5px;opacity:.1;top:auto;right:auto;transform:none;
  bottom:-297.8px;
  left:max(calc(100% - 637.8px),calc(max(var(--gut),(100% - var(--wrap))/2 + var(--gut)) + ((min(100%,var(--wrap)) - 2*var(--gut)) - 64px)*.61 + 24px - 117.8px))}
@media (max-width:960px){
  .uhero .water{width:398.1px;height:398.1px;left:auto;top:auto;right:-119.1px;bottom:-124.1px}
}
@media (max-width:359px){
  .uhero .water{display:none}
}

/* E1.1 (03.11.2026): H2 "Wie wir eine laufende Reinigung ..." ausserhalb von
   .narrow, damit sie am Desktop einzeilig steht; mobil normaler Umbruch. */
.usec .uh2{max-width:none;text-wrap:balance}

/* =======================================================================
   E1.2 (03.11.2026): "So organisieren wir laufende Auftraege" mit Liste und
   Abschluss als EINE ruhige Inhaltskarte (Familie K3: weiss, Kante, Goldlinie
   oben); ab 1024 px Titelspalte links, Liste und Abschluss rechts.
   Einleitung zu den Folgekarten als eigener, dezent markierter Block direkt
   ueber dem Kartenraster.
   ======================================================================= */
.uproof .uorgkarte{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)}
.uproof .uorgkarte .uorg h3{margin-bottom:var(--s3)}
.uproof .uorgkarte .uorgf{grid-template-columns:1fr;gap:var(--s4);margin:0}
.uproof .uorgkarte .uorgf li:first-child{border-top:0;padding-top:0}
.uproof .uorgkarte .uorgf li:first-child::before{top:9px}
.uproof .uorgkarte .uorgabschluss{margin-top:var(--s5);max-width:68ch}
@media(min-width:1024px){
  .uproof .uorgkarte{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s7);padding:var(--s7)}
}
@media(max-width:639px){ .uproof .uorgkarte{padding:var(--s5)} }
.usec .unextintro{margin-top:var(--s6);max-width:72ch;padding-left:var(--s5);border-left:2px solid var(--gold);
  color:var(--n700);line-height:1.7}
.usec .unextintro + nav > .vk-grid{margin-top:var(--s5)}
@media(max-width:639px){ .usec .unextintro{padding-left:var(--s4)} }