/* =======================================================================
   glasreinigung.css - seitenlokale Regeln fuer /glasreinigung/
   -----------------------------------------------------------------------
   Herkunft: Viereck_Glas_Prototype_CURRENT.html, <style>-Block.
   Von 322 Bloecken des Prototyps stehen 259 bereits in site.css und sind
   hier NICHT wiederholt. Entfallen sind ausserdem:
     :root            - identisch zu site.css (37 Tokens, zeichengleich)
     img              - site.css fuehrt die korrigierte Fassung
     .ph.i-glshero, .ph.i-gls1v, .ph.i-gls1n, .ph.i-gls2v, .ph.i-gls2n
                      - Data-URI-Hintergruende, ersetzt durch echte
                        Bilddateien in <picture>/<img>.
   Inhaltlich wurde nichts geaendert.
   ======================================================================= */

/* =======================================================================
   PHASE 10.3B-2 - /glasreinigung/ - SEITENSPEZIFISCHE REGELN (GLA-S)
   Gelten ausschliesslich fuer diese URL. Designsystem 9B.1, Header, Footer,
   globale Tokens und globale Breakpoints bleiben unveraendert.
   S-01..S-08 gehoeren zu /technik-verfahren/, BAU-S-* zu /bauendreinigung/,
   UNT-S-* zu /unterhaltsreinigung/, GRU-S-* zu /grundreinigung/,
   KON-S-* zu /kontakt/, PV-S-* zu /photovoltaikreinigung/. Deshalb eigenes
   Praefix und durchgaengig eigene Klassennamen (.glshero .glssec .glschips
   .glsflow .glsblock .glsproof .glspair .glsnext .glsanf).

   BEREICHSGRENZEN DIESER SEITE: Mobile 0-639 - Tablet 640-1023 -
   Desktop ab 1024. Kanonische Stufung aus Blatt 6 "Responsive-Regeln" der
   Phase-9B.2-Seitenmatrix. Die aelteren T2-Seiten tragen die 960-px-Familie
   des Unterbaus; sie werden hier NICHT angefasst.

   BEWUSST NICHT UEBERNOMMEN: keine einzige .pv*-Regel und keine
   FAQ-Komponente - diese Seite veroeffentlicht kein FAQ-Modul.
   ======================================================================= */

/* GLA-S-01 Split-Hero mit EINEM Querformat 4:3, Bild rechts, dunkel.
   AUSGANGSPROBLEM: Die globale .hero-Komponente ist der typografische
   Marken-Hero der Startseite. Sie deckelt den Textstreifen ueber
   .hero .in{max-width:820px}

und kennt keine Bildspalte. T1 verlangt fuer
   diese Seite den Split-Hero mit realem Verfahrensmotiv. Zusaetzlich weiten
   Rasterkinder mit der Voreinstellung min-width:auto die Spur auf die Breite
   des laengsten unteilbaren Wortes auf.
   AENDERUNG: .in geht auf --wrap, .heroin wird zweispaltig mit exakt
   55fr/45fr nach Blatt 6, Zeile "Hero H2". Bis 1023 px gestapelt, Bild
   darunter; Mobile Label -> H1 -> Lead -> CTA -> Bild.
   H1-BESONDERHEIT DIESER SEITE: Der H1 ist mit 52 Zeichen laenger als der
   PV-H1 und endet auf "Mittelhessen". Ohne Gegenmassnahme steht dieses Wort
   bei 960, 820, 768 und 480 px allein in der letzten Zeile - real gemessen.
   Gegenmassnahme: kleinerer H1-Schriftgrad als auf der PV-Seite UND ein
   geschuetztes Leerzeichen zwischen "und" und "Mittelhessen" im Markup. Der
   sichtbare Text bleibt dabei unveraendert; es wird kein Wort und kein
   Zeichen ergaenzt oder entfernt.
   WARUM KEINE GLOBALE AENDERUNG: Selektor haengt ausschliesslich an .glshero. */
.glshero{padding:var(--s8) 0 calc(var(--s8) + 40px)}

.glshero .in{max-width:var(--wrap)}

.glshero .heroin{display:grid;grid-template-columns:55fr 45fr;gap:var(--s8);
  align-items:center;max-width:none}

.glshero .heroin > *{min-width:0}

.glshero h1{margin:0 0 var(--s5)}

.glshero .display{font-size:clamp(30px,3.9vw,48px);font-weight:600;
  letter-spacing:-.024em;line-height:1.1;display:block}

.glshero .lbl{color:var(--gold);margin-bottom:var(--s4)}

.glshero .sub{max-width:54ch;margin-bottom:0;font-size:clamp(17px,1.5vw,19px);
  line-height:1.6;color:var(--n300)}

.glshero .acts{margin-top:var(--s6)}

.glshero figure{margin:0}

.glshero .ph{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--n800);
  position:relative}

.glshero .water{right:auto;bottom:auto;left:var(--gut);top:var(--s7);
  width:420px;height:420px;color:#fff;opacity:.045}

/* GLA-S-02 Sektionsrahmen und Lesespalte dieser Seite.
   Reine Abstands- und Farbklasse, damit die folgenden Regeln einen stabilen
   Anker haben und keine globale .pad-/.narrow-Regel ueberschrieben werden muss. */
.glssec .lbl{color:var(--red);margin-bottom:var(--s4)}

.glssec .lead{margin-top:var(--s5)}

.glssec p{color:var(--n700);line-height:1.7}

.glssec .narrow > p + p{margin-top:var(--s4)}

/* GLA-S-03 Ausgangslagen-Chips sind NICHT klickbar.
   Die globale .chip-Komponente ist ein Auswahlelement mit Zeigerhand. Die vier
   Chips dieser Seite beschreiben Ausgangslagen und sind kein Formularelement.
   Groesse, Rahmen und Trefferhoehe 44 px bleiben unveraendert. */
.glschips{margin-top:var(--s6)}

.glschips .chip{cursor:text;background:#fff}

/* GLA-S-04 Arbeitsweise: Dreistufenkern PLUS zwei Vertiefungsbloecke.
   AUSGANGSPROBLEM: Der M3 dieser Seite ist laenger als der einer reinen
   Dreistufenseite. Er traegt den Dreistufenkern (Vor dem ersten Einsatz - Bei
   der Reinigung - Danach im festen Rhythmus) UND zwei weitere H3-Bereiche
   (Hoehe, Wasser und Witterung / Angrenzende Fassadenelemente). Die fachliche
   Gliederung des Seitenmasters wird NICHT in die Dreiergeometrie gepresst.
   .chain/.step ist fuer den DUNKLEN Startseitenblock definiert
   (.step .v{color:var(--n300)}

) und waere auf hellem Grund unlesbar.
   LOESUNG: Der Kern liegt in der Dreierreihe nach Blatt 6, Zeile
   "Verfahrensblock" - ab 640 px drei Spalten mit Goldlinie oben, unter 640 px
   gestapelt an einer vertikalen Goldlinie links. Die beiden Vertiefungen
   folgen darunter als volle Textbloecke in der Lesespalte, damit ihre
   laengeren Absaetze lesbar bleiben und mobil scanbar sind. */
.glsflow{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--s7)}

.glsflow li{padding-top:var(--s4);border-top:2px solid var(--gold)}

.glsflow h3{font-size:19px;margin-bottom:var(--s3)}

.glsflow p{color:var(--n700);font-size:15px;line-height:1.7}

.glsblock{margin-top:var(--s8);border-top:1px solid var(--n300);
  padding-top:var(--s5)}

.glsblock h3{font-size:19px;margin-bottom:var(--s4)}

.glsblock p{color:var(--n700);line-height:1.7}

.glsblock p + p{margin-top:var(--s4)}

/* GLA-S-05 Beweismodul - ZWEI echte Vorher/Nachher-Paare mit GEMEINSAMER
   Bildunterschrift.
   Hier ist die globale .ba-Komponente die richtige Semantik: Beide Paare
   zeigen dieselbe Flaeche vor und nach der Reinigung. Rasterlogik, Abstand
   und das 4:3-Bildfenster werden deshalb UNVERAENDERT aus .ba uebernommen.
   EINZIGE AENDERUNG: Der Seitenmaster fuehrt je Paar EINE gemeinsame
   Bildunterschrift ("Glasdach vor und nach der Reinigung"), nicht zwei
   Einzelunterschriften. Deshalb steht die Unterschrift einmal unter dem Paar,
   und die Punktmarker .d-vor/.d-nach entfallen - ohne die Woerter "vorher"
   und "nachher", die der Master an dieser Stelle nicht fuehrt, waeren zwei
   farbige Punkte unbeschriftet und damit bedeutungslos. Die Zuordnung traegt
   der Alt-Text jedes Bildes.
   Unter 640 px stehen die Bilder untereinander in voller Breite - Blatt 6,
   Zeile "Before/After Modus A": nie zwei Miniaturen nebeneinander. */
/* TABLETVERHALTEN - der eigentliche Grund fuer diese Regel.
   Der Unterbau stapelt .ba bereits ab 960 px
   (@media(max-width:960px){.pillars,.tech,.ba{grid-template-columns:1fr}}

).
   Blatt 6, Zeile "Before/After Modus A", verlangt die Paare auf Tablet aber
   ausdruecklich NEBENEINANDER und erst unter 640 px untereinander. Real
   gemessen standen die Paare ohne diese Regel bei 960, 820, 768 und 640 px
   gestapelt. Die Spaltigkeit wird deshalb bis 640 px lokal wiederhergestellt -
   die globale .ba-Regel bleibt fuer die aelteren Seiten unveraendert. */
.glsproof .glspair{margin-top:var(--s5)}

.glsproof .glspair .ba{gap:var(--s5)}

@media(min-width:640px){
  .glsproof .glspair .ba{grid-template-columns:1fr 1fr}
}

.glsproof .glspair figure{margin:0}

.glsproof .glscap{margin-top:12px;font-size:13px;color:var(--n600);
  line-height:1.5}

.glsproof h3{font-size:19px;margin-top:var(--s8)}

/* Die erste H3 ("Glasdach") folgt direkt auf die H2 des Moduls. Ohne eigenen
   Abstand klebt sie als Unterzeile an der H2; mit dem vollen s8-Abstand der
   spaeteren H3 reisst sie das Modul dagegen auseinander. Deshalb ein eigener,
   kleinerer Wert nur fuer diese eine Stelle. */
.glsproof > .wrap > .narrow:first-child h3{margin-top:var(--s5)}

.glsproof .glstext{margin-top:var(--s5)}

.glsproof .glstext p + p{margin-top:var(--s4)}

/* GLA-S-06 Kontextuelle Linkzeile mit Kategoriezeile und erklaerendem Zusatz.
   Es existiert keine boxenlose Linkzeile im Unterbau: .svcs sind bordierte
   Karten mit Hover, .facts ist eine Belegzeile ohne Links. 9B.2 Abschnitt J
   verlangt Kategoriezeile, Seitentitel als Linktext und - wo vorhanden - einen
   erklaerenden Zusatz. Drei Eintraege, ab 640 px dreispaltig. */
.glsnext{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--s6)}

.glsnext li{border-top:1px solid var(--n300);padding-top:var(--s4)}

.glsnext .k{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--n500);margin-bottom:var(--s3)}

.glsnext p{font-size:14px;color:var(--n700);line-height:1.6;margin-top:var(--s3)}

/* GLA-S-07 Anfragefeld, dunkel, mit Faktorenliste.
   .ctaband ist die HELLE Variante des Unterbaus; Template T1 schliesst diese
   Seite nach dem Seitenmaster ausdruecklich auf einer DUNKLEN Flaeche ab
   ("[M7] Anfragefläche - dunkel"). Zusaetzlich traegt dieser Abschnitt als
   einziger eine achtgliedrige Faktorenliste; sie steht zweispaltig, damit der
   CTA nicht unter eine lange Einspaltenliste rutscht. Kein Faktor wird aus
   Layoutgruenden gestrichen. */
.glsanf{background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding:var(--s8) var(--s7)}

.glsanf .water{right:-12%;top:-30%;width:56%;height:170%;color:#fff;opacity:.05}

.glsanf .inr{position:relative;z-index:2}

.glsanf h2{max-width:24ch}

.glsanf .tx{margin-top:var(--s4);max-width:64ch;color:var(--n300);line-height:1.7}

.glsanf ul{list-style:none;margin:var(--s6) 0 0;padding:0;max-width:820px;
  columns:2;column-gap:var(--s7)}

/* Mehrspaltensatz statt Raster: Beim Raster richten sich die Zeilen an der
   hoechsten Zelle aus, und die zweizeiligen Faktoren reissen sichtbare Luecken
   in die kurzen. columns fuellt Spalte eins von oben nach unten und dann
   Spalte zwei - die DOM-Reihenfolge und damit die Vorlesereihenfolge bleibt
   1 bis 8. */
.glsanf ul li{font-size:15px;color:var(--n300);line-height:1.6;
  break-inside:avoid;margin-bottom:6px}

.glsanf ul li::before{content:"";display:inline-block;width:7px;height:7px;
  background:var(--gold);transform:rotate(var(--tilt));margin-right:10px;
  vertical-align:middle}

.glsanf .trustline{margin-top:var(--s6);max-width:64ch;font-size:14px;
  line-height:1.6;color:rgba(255,255,255,.72)}

.glsanf .acts{margin-top:var(--s6);display:flex;gap:var(--s5);
  align-items:center;flex-wrap:wrap}

.glsanf .micro{font-size:14px;color:rgba(255,255,255,.72)}

/* GLA-S-08 Responsive dieser Seite.
   Alle Umbruchpunkte liegen auf der kanonischen Stufung 1023/639 aus Blatt 6.
   Keine neue Breakpointfamilie, keine Aenderung globaler Breakpoints. */
@media(max-width:1023px){
  .glshero{padding:var(--s7) 0 calc(var(--s7) + 30px)}
  .glshero .heroin{grid-template-columns:1fr;gap:var(--s6)}
  /* Deckel im gestapelten Zustand - dieselbe Methode wie GRU-S-07 und
     PV-S-11. Ohne ihn spannt das Motiv die volle Rasterbreite und draengt den
     CTA unter die Falz. */
  .glshero figure{max-width:620px}
  .glshero .water{left:var(--gut);top:var(--s6);
    width:min(74%,340px);height:min(74vw,340px)}
  .glsnext{grid-template-columns:1fr 1fr}
}

@media(max-width:639px){
  /* H1-Groesse unter 640 px: "Glasreinigung" ist mit 13 Zeichen das laengste
     unteilbare Wort der Seite; massgeblich fuer den Zeilenfall ist hier aber
     der Gesamtumfang von 52 Zeichen. Gemessen bleibt der H1 damit bis 320 px
     ohne Trennstrich und ohne isolierte Einwortzeile. */
  .glshero .display{font-size:clamp(23px,7.1vw,32px)}
  /* Blatt 6, "Verfahrensblock": unter 640 px gestapelt mit vertikaler Linie
     links statt Goldlinie oben. */
  .glsflow{grid-template-columns:1fr;gap:0;border-left:2px solid var(--gold);
    padding-left:var(--s5)}
  .glsflow li{border-top:0;padding-top:0;padding-bottom:var(--s6)}
  .glsflow li:last-child{padding-bottom:0}
  /* Blatt 6, "Before/After Modus A": unter 640 px untereinander in VOLLER
     Breite - nie zwei Miniaturen nebeneinander. */
  .glsproof .glspair .ba{grid-template-columns:1fr;gap:var(--s4)}
  .glsnext{grid-template-columns:1fr;gap:var(--s5)}
  /* Die Faktorenliste wird einspaltig - zweispaltig blieben bei 390 px je
     Spalte rund 160 px, in denen die laengeren Faktoren dreizeilig brechen.
     Kein Faktor entfaellt. */
  .glsanf{padding:var(--s7) var(--s5)}
  .glsanf ul{columns:1}
  .glsanf .acts .btn{width:100%;justify-content:center}
}

@media(max-width:380px){
  /* Content-Fit unter 380 px: die laengste H2 braucht sonst mehr Breite als
     die Spalte. Lokale Ausnahme dieser Seite, keine globale H2-Regel. */
  .glssec h2{font-size:21px}
}

/* V1-Review GL-G1: sechs Anlasskarten (Muster .srmx von /spezialreinigung/), Werte nach Mockup A2 */
.glsmx{margin:var(--s7) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--n200);border:1px solid var(--n200)}
.glsmx li{background:#fff;padding:var(--s6) var(--s5)}
.glsmx .n{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;font-size:28px;line-height:1;color:var(--red);letter-spacing:-.01em;margin-bottom:var(--s5)}
.glsmx h3{font-size:21px;margin-bottom:var(--s3);text-wrap:balance}
.glsmx p{color:var(--n700);line-height:1.7}
.glsabgr{margin-top:var(--s6);color:var(--n700);line-height:1.7}
@media (max-width:1023px){.glsmx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.glsmx{grid-template-columns:1fr}.glsmx li{padding:20px;display:grid;grid-template-columns:auto 1fr;column-gap:var(--s4);align-items:baseline}.glsmx .n{font-size:24px;margin:0}.glsmx h3{font-size:19px;margin:0}.glsmx p{grid-column:1/-1;margin-top:var(--s3);font-size:15.5px}}

/* =======================================================================
   V1-Review E3 · Block 2 · AF1: Variante "Schwerpunkt, dunkel" (Glas)
   Label "Anfrage" neu; Reihenfolge Schaltflaeche + Telefon, Unverbindlichkeit,
   Inhaberzeile. Die Angebotsfaktoren ("So entsteht Ihr Angebot") bleiben.
   ======================================================================= */
.glsanf .lbl{color:var(--gold);margin-bottom:var(--s4)}
.glsanf .anftel{color:var(--n300);border-bottom-color:var(--n600)}
.glsanf .anftel:hover{color:var(--gold);border-bottom-color:var(--gold)}
.glsanf .anfnote{color:rgba(255,255,255,.72)}
.glsanf .trustline.anfowner{margin-top:var(--s2)}

/* =======================================================================
   E1.1 (03.11.2026): H2 des Bildbelegs ausserhalb von .narrow, damit sie
   am Desktop einzeilig steht (keine Schriftverkleinerung); mobil normaler
   Umbruch. Abstand der folgenden H3 wie bisher unter der H2.
   ======================================================================= */
.glsproof .glsh2{max-width:none;text-wrap:balance}
.glsproof .glsh2 + .narrow h3{margin-top:var(--s5)}

/* =======================================================================
   E1.2 (03.11.2026): Fensterfalz-Text auf Breite des Bildpaars, ab 1024 px
   zweispaltig (Spaltenabstand = Bildabstand, Zeilen ca. 75 Zeichen);
   "Aus unserer Praxis" als Kernaussage (vk-kern) direkt im Bildbeleg.
   ======================================================================= */
.glsproof .glsfalztext{display:grid;grid-template-columns:1fr;gap:var(--s4);max-width:var(--narrow)}
.glsproof .glsfalztext > div > p + p{margin-top:var(--s4)}
@media(min-width:1024px){
  .glsproof .glsfalztext{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);max-width:none}
}
.glsproof .glspraxis h3{margin:0}