/* ==========================================================================
   scheibenweise. — gewerbe.css
   Seite /gewerbe/ (Glasreinigung für Betriebe). Baut auf core.css auf:
   Farben nur über die Themen-Variablen, Bewegung nur transform/opacity/clip-path.
   Reihenfolge: Kopf · Tastatur · Einstieg · Zusagen · Branchen · Ablauf ·
   Leistungen · Preise · Fragen · Abschluss · Footer
   Grundzustand = fertige Seite. Zustände, die erst JavaScript setzt, hängen an
   Klassen (.is-buehne, .is-klapp, .is-scroll), die gewerbe.js vergibt.
   ========================================================================== */

/* Fokusrahmen im blauen Kopf: der blaue Standardrahmen wäre dort nicht zu sehen */
[data-welt="gewerbe"] .site-header{--focus:var(--sw-white)}
/* Schmale Handys: das Logo gibt nach, der Menü-Knopf behält seine 46 px (in core.css schrumpft sonst der Knopf) */
.site-header__burger,.site-header__cta{flex:none}
@media (max-width:520px){.site-header__logo{flex:0 1 auto;min-width:0}}
@media (max-width:420px){.site-header__inner{gap:12px}.welt-switch a{padding:0 8px}}
/* Zwischen 1080 und 1279 px reicht die Zeile nicht für fünf Sprungmarken, Telefon und Knopf: die Nummer steht dann im Abschluss und im Footer */
@media (min-width:1080px) and (max-width:1279px){.site-header__tel{display:none}}
/* Tippziele im Kopf: Das Logo ist nur 21 px, der Umschalter 36 px hoch. Die Trefferfläche wächst unsichtbar auf 44 px. */
.site-header__logo,.welt-switch a{position:relative}
.site-header__logo::after,.welt-switch a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}

/* ---------- Tastatur und Vorleseprogramme ----------
   core.css versteckt noch nicht eingeblendete Inhalte mit visibility:hidden. Links und Knöpfe unterhalb
   des ersten Bildschirms sind damit nicht fokussierbar: Die Tab-Taste sprang vom Einstieg direkt zur
   PLZ-Prüfung, die Textsuche des Browsers fand die Abschnitte nicht. Sobald core.js die Startzustände
   gesetzt hat (.is-ready), versteckt allein deren opacity:0; die Elemente bleiben erreichbar, und
   gewerbe.js blendet sie bei Fokus sofort ein. */
.js.is-ready [data-reveal="up"],.js.is-ready [data-reveal-group]>*{visibility:visible!important}
/* Sprungmarken mit Lenis (Desktop): core.js zieht Kopfhöhe + 12 px ab, Lenis rechnet zusätzlich das
   scroll-padding-top des Dokuments ein. Die Abschnitte landeten deshalb 180 px unter der Oberkante.
   Der negative Rand hebt den doppelten Abzug auf (ohne Lenis bleibt es beim scroll-padding-top). */
html.lenis main>section[id]{scroll-margin-top:calc(-1*(var(--header-h) + 16px))}

/* ---------- 1 · Einstieg ----------
   Mobil: Textblock, darunter das Bild im Raster.
   Ab 1024 px: Bühne in Bildschirmhöhe. Das Bild liegt vollflächig dahinter und
   wird per clip-path auf den Rahmen rechts beschnitten; --auf (0 → 1) öffnet
   den Ausschnitt bis zum vollen Bild. Die Fugen sind eigene Flächen in der
   Hintergrundfarbe und schließen sich per scale. */
.g-hero{position:relative;padding:var(--header-h) 0 var(--gutter);--fuge:clamp(5px,.6vw,9px)}
.g-hero__block{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.4vw,24px);padding:clamp(40px,9vw,72px) var(--gutter) clamp(36px,6vw,48px)}
.g-hero__titel{max-width:11em}
/* Hinweiszeile bricht zwischen den beiden Sätzen um, nicht mitten im Satz */
.g-hero__hinweis>span{display:inline-block}
.g-hero__aktionen{display:flex;flex-wrap:wrap;gap:12px;width:100%;margin-top:6px}
.g-hero__aktionen .btn{flex:1 1 auto}
@media (min-width:560px){.g-hero__aktionen .btn{flex:none}}

.g-hero__buehne{position:relative;margin:0 var(--gutter);aspect-ratio:4/3}
@media (min-width:700px){.g-hero__buehne{aspect-ratio:16/9}}
.g-hero__bild{position:absolute;inset:0;overflow:hidden;background:var(--surface)}
.g-hero__bild img,.g-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Das Video liegt über dem Bild und blendet erst ein, wenn es läuft */
.g-hero__video{opacity:0;transition:opacity 900ms var(--ease-out)}
.g-hero__video.is-an{opacity:1}

/* Raster 4 × 3: Zellen tragen die Decken für das Aufwischen, Fugen liegen darüber */
.g-raster{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
.g-raster__zelle{position:relative;overflow:hidden}
.g-raster__decke{position:absolute;inset:0;background:var(--bg);visibility:hidden}
/* Klinge: läuft an der Wischkante mit, steht vor dem Start außerhalb der Zelle */
.g-raster__decke::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:4px;background:var(--strong)}
.g-raster__fuge{position:absolute;background:var(--bg)}
.g-raster__fuge--v{top:0;bottom:0;width:var(--fuge);margin-left:calc(var(--fuge)/-2)}
.g-raster__fuge--h{left:0;right:0;height:var(--fuge);margin-top:calc(var(--fuge)/-2)}
/* Vor dem Einstieg decken die Scheiben das Bild ab (kein Aufblitzen). Gleiches
   Prinzip wie [data-reveal] in core.css, mit denselben Rückfällen. */
.js:not(.ruhe):not(.is-ready) .g-raster__decke{visibility:visible}
.js.anim-failsafe:not(.anim) .g-raster__decke{visibility:hidden}
@media (prefers-reduced-motion:reduce){.g-raster__decke{visibility:hidden!important}}

@media (min-width:1024px){
  .g-hero{height:100svh;min-height:600px;padding:0;
    --rand:max(var(--gutter),calc((100% - var(--container-wide))/2));
    --f-oben:calc(var(--header-h) + 28px);--f-rechts:var(--rand);--f-unten:40px;
    --f-links:calc(var(--rand) + min(44%,640px) + 56px)}
  .g-hero__block{position:absolute;left:0;bottom:0;width:var(--f-links);gap:clamp(14px,2.6svh,24px);padding:clamp(28px,5.4svh,48px) 56px clamp(28px,5svh,44px) var(--rand);background:var(--bg)}
  .g-hero__titel{font-size:min(var(--fs-display),6.6vw,11.5svh)}
  .g-hero__aktionen{margin-top:clamp(0px,1svh,8px)}
  /* schmale Desktop-Fenster: beide Knöpfe bleiben nebeneinander */
  .g-hero__aktionen .btn{padding-inline:clamp(16px,1.9vw,30px)}
  .g-hero__buehne{position:absolute;inset:0;margin:0;aspect-ratio:auto}
  .g-hero__bild{--auf:0;clip-path:inset(calc(var(--f-oben)*(1 - var(--auf))) calc(var(--f-rechts)*(1 - var(--auf))) calc(var(--f-unten)*(1 - var(--auf))) calc(var(--f-links)*(1 - var(--auf))))}
  /* 1 px größer als der Bildausschnitt: dessen Kante liegt auf Bruchteilen von Pixeln, die Decken sonst nicht */
  .g-raster{inset:calc(var(--f-oben) - 1px) calc(var(--f-rechts) - 1px) calc(var(--f-unten) - 1px) calc(var(--f-links) - 1px)}
}

/* ---------- 2 · Zusagen ---------- */
.g-zusagen{padding-bottom:0}
.g-zusagen__titel{margin-bottom:clamp(28px,4vw,48px)}
.g-zusage{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,3vw,24px);row-gap:10px;align-items:start;padding:clamp(26px,3.6vw,44px) 0;border-top:1px solid var(--line)}
.g-zusage:last-child{border-bottom:1px solid var(--line)}
.g-zusage__icon{grid-row:1 / span 2;color:var(--accent-text)}
.g-zusage__name{font-size:clamp(1.625rem,1.05rem + 2.5vw,2.75rem);letter-spacing:-.028em}
.g-zusage__text{font-size:var(--fs-lead);line-height:1.45;color:var(--muted);max-width:30em}
@media (min-width:900px){
  .g-zusage{grid-template-columns:72px minmax(0,1.25fr) minmax(0,.75fr);column-gap:clamp(24px,3vw,48px);align-items:center}
  .g-zusage__icon{grid-row:auto}
}

/* ---------- 3 · Branchen ----------
   Grundzustand (auch ohne JavaScript): jede Branche mit Bild und Text offen.
   .is-klapp  = Aufklapper (Touch, schmale Fenster)
   .is-buehne = Liste links, Bildscheibe rechts (Desktop mit Maus) */
.g-branchen{position:relative;--g-spalte:44%;--g-luecke:clamp(40px,6vw,88px)}
.g-branche{border-top:1px solid var(--line)}
.g-branche:last-child{border-bottom:1px solid var(--line)}
.g-branche__zeile{position:relative;display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;align-items:baseline;column-gap:clamp(8px,1.6vw,20px);padding:clamp(18px,2.2vw,24px) 0}
.g-branche__nr{font:italic 900 var(--fs-tag)/1 var(--font-tag);letter-spacing:var(--ls-tag);color:var(--muted)}
.g-branche__name{font-size:clamp(1.375rem,.95rem + 1.9vw,2.25rem);line-height:1.1;letter-spacing:-.025em;transition:color var(--dur-base) var(--ease-out)}
/* Link und Schalter sind über die ganze Zeile gestreckt; sichtbar ist nur ihr Zeichen */
.g-branche__link,.g-branche__schalter{align-self:center;display:grid;place-content:center;width:32px;height:32px;color:var(--fg)}
.g-branche__link::after,.g-branche__schalter::after{content:"";position:absolute;inset:0}
.g-branche__link:focus-visible,.g-branche__schalter:focus-visible{outline:none}
.g-branche__link:focus-visible::after,.g-branche__schalter:focus-visible::after{outline:2px solid var(--focus);outline-offset:-2px}
.g-branche__link .icon,.g-branche__schalter .icon{width:24px;height:24px;transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-base) var(--ease-out)}
.g-branche__schalter{display:none}
@media (hover:hover){
  .g-branche__zeile:hover .g-branche__name{color:var(--accent-text)}
  .g-branche__zeile:hover .g-branche__link .icon{transform:translateX(4px)}
}

.g-branche__inhalt{display:grid;gap:20px;padding:4px 0 32px}
.g-branche__bild{aspect-ratio:3/2}
.g-branche__text{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.g-branche__zitat{font:700 var(--fs-h3)/1.12 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.g-branche__text p:not(.g-branche__zitat){color:var(--muted);max-width:34em}
.g-branche__cta{min-height:44px;margin-top:2px}
@media (min-width:700px){
  .g-branche__inhalt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:end;padding-bottom:40px}
}
.g-branchen__klinge{display:none}

/* Aufklapper */
.g-branchen.is-klapp .g-branche__link{display:none}
.g-branchen.is-klapp .g-branche__schalter{display:grid}
.g-branchen.is-klapp .g-branche.is-offen .g-branche__schalter .icon{transform:rotate(45deg)}
.g-branchen.is-klapp .g-branche.is-offen .g-branche__name{color:var(--accent-text)}

/* Bühne */
.g-branchen.is-buehne .g-branchen__liste{width:calc(100% - var(--g-spalte) - var(--g-luecke))}
.g-branchen.is-buehne .g-branche__zeile::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--bar-h);background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-slow) var(--ease-out)}
.g-branchen.is-buehne .g-branche.is-aktiv .g-branche__zeile::before{transform:scaleX(1)}
.g-branchen.is-buehne .g-branche__name{font-size:clamp(1.5rem,.6rem + 1.7vw,2.25rem)}
.g-branchen.is-buehne .g-branche.is-aktiv .g-branche__name{color:var(--accent-text)}
.g-branchen.is-buehne .g-branche__link{color:var(--accent-text)}
.g-branchen.is-buehne .g-branche__link .icon{opacity:0;transform:translateX(-10px)}
.g-branchen.is-buehne .g-branche.is-aktiv .g-branche__link .icon{opacity:1;transform:none}
.g-branchen.is-buehne .g-branche__inhalt{position:absolute;z-index:1;top:0;bottom:0;right:0;width:var(--g-spalte);display:flex;flex-direction:column;gap:0;padding:0;background:var(--bg);visibility:hidden}
.g-branchen.is-buehne .g-branche__inhalt.is-sichtbar{visibility:visible}
.g-branchen.is-buehne .g-branche__bild{flex:1 1 0;min-height:0;aspect-ratio:auto}
.g-branchen.is-buehne .g-branche__text{flex:none;min-height:9.75em;padding-top:24px}
.g-branchen.is-buehne .g-branche__cta{display:none}
.g-branchen.is-buehne .g-branchen__klinge{display:block;position:absolute;top:0;bottom:0;left:calc(100% - var(--g-spalte));width:var(--bar-h);background:var(--accent);visibility:hidden}

/* ---------- 4 · Ablauf ---------- */
.g-ablauf__raster{display:grid;gap:clamp(48px,7vw,96px)}
.g-ablauf__kopf{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
.g-ablauf__strecke{position:relative;padding-left:clamp(28px,4vw,56px)}
.g-ablauf__linie{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line)}
.g-ablauf__fuellung{position:absolute;inset:0;background:var(--fg);transform-origin:center top}
.g-schritt{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:clamp(48px,6vw,88px)}
.g-schritt:last-child{padding-bottom:0}
.g-schritt__balken{width:56px;height:var(--bar-h);margin-bottom:10px;background:var(--accent);transform-origin:left center}
.g-schritt__name{font-size:var(--fs-h1);line-height:1;letter-spacing:-.03em}
.g-schritt .lead{color:var(--muted)}
@media (min-width:900px){
  .g-ablauf__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .g-ablauf__kopf{position:sticky;top:calc(var(--header-h) + 48px)}
}
/* Mit Scroll-Kopplung (Desktop): Schritte werden erreicht, sobald die Linie bei ihnen ankommt */
/* Noch nicht erreichte Schritte: nur Nummer und Name treten zurück, der Satz bleibt voll lesbar (Kontrast) */
.g-ablauf.is-scroll .g-schritt__name,.g-ablauf.is-scroll .g-schritt .tagline{color:var(--faint);transition:color 500ms var(--ease-out)}
.g-ablauf.is-scroll .g-schritt.is-erreicht .g-schritt__name,.g-ablauf.is-scroll .g-schritt.is-erreicht .tagline{color:var(--fg)}
.g-ablauf.is-scroll .g-schritt__balken{transform:scaleX(0);transition:transform 700ms var(--ease-wipe)}
.g-ablauf.is-scroll .g-schritt.is-erreicht .g-schritt__balken{transform:none}

/* ---------- 5 · Leistungen ---------- */
.g-leistungen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.g-leistung{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(148px,17vw,216px);padding:clamp(18px,2.4vw,28px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.g-leistung__icon{margin-bottom:28px;color:var(--accent-text)}
.g-leistung__name{margin-top:auto;font-size:clamp(1.0625rem,.9rem + .7vw,1.375rem);line-height:1.15;letter-spacing:-.015em;hyphens:manual;overflow-wrap:anywhere}
.g-leistung__text{margin-top:10px;color:var(--muted);max-width:36em}
.g-leistung__marke{position:absolute;top:clamp(18px,2.4vw,28px);right:clamp(18px,2.4vw,28px);padding-top:8px;color:var(--accent-text)}
.g-leistung--breit{grid-column:span 2}
@media (min-width:900px){.g-leistungen{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- 6 · Preise ---------- */
.g-preise__kopf{display:grid;gap:24px clamp(40px,6vw,88px);margin-bottom:clamp(40px,5vw,64px)}
.g-preise__titel,.g-preise__einstieg{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
.g-preise__liste{min-width:0}
.g-preise__fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 40px;margin-top:20px}
.g-preise__hinweis{max-width:44em}
/* Link zu den Privatpreisen: Tippziel 44 px, ohne die Zeile höher zu machen */
.g-preise__fuss .link{display:inline-block;padding-block:13px;margin-block:-13px}
@media (min-width:900px){
  .g-preise__kopf{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end}
  .g-preise__einstieg{padding-bottom:6px}
}

/* Tabelle als weiße Scheibe. Schmal: jede Zeile als Block, Preis unter der Leistung. */
.g-tabelle{--t-rand:clamp(16px,2.6vw,28px);display:block;width:100%;border-collapse:collapse;background:var(--surface);text-align:left}
.g-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.g-tabelle tbody{display:block}
.g-tabelle tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:baseline;padding:20px var(--t-rand);border-top:1px solid var(--line)}
.g-tabelle tbody tr:first-child{border-top:0}
.g-tabelle th,.g-tabelle td{padding:0;font-weight:400}
.g-tabelle th[scope="row"]{grid-column:1 / -1}
.g-tabelle__leistung{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 16px;align-items:center}
.g-tabelle.hat-bilder .g-tabelle__leistung{grid-template-columns:48px minmax(0,1fr)}
.g-tabelle__bild{grid-row:1 / span 2;width:48px}
.g-tabelle__name{font:700 1.1875rem/1.2 var(--font-display);letter-spacing:-.015em}
.g-tabelle__kurz{font-size:var(--fs-small);line-height:1.4;color:var(--muted);text-wrap:pretty}
.g-tabelle.hat-bilder .g-tabelle__name,.g-tabelle.hat-bilder .g-tabelle__kurz{grid-column:2}
.g-tabelle__einheit{font-size:var(--fs-small);color:var(--muted);white-space:nowrap}
.g-tabelle__preis{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:2px 10px;text-align:right}
.g-tabelle__preis .price{font-size:1.25rem}
.g-tabelle__brutto{font-size:var(--fs-small);color:var(--muted);white-space:nowrap}
@media (min-width:700px){
  .g-tabelle{display:table}
  .g-tabelle thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none;display:table-header-group}
  .g-tabelle tbody{display:table-row-group}
  .g-tabelle tbody tr{display:table-row;padding:0;border-top:0}
  .g-tabelle thead th{padding:20px 12px 16px;border-bottom:2px solid var(--fg);font:italic 900 var(--fs-tag)/1 var(--font-tag);text-transform:uppercase;letter-spacing:var(--ls-tag);white-space:nowrap}
  .g-tabelle thead th:last-child{text-align:right}
  .g-tabelle__klammer{color:var(--muted)}
  .g-tabelle tbody th,.g-tabelle tbody td{padding:18px 12px;border-top:1px solid var(--line);vertical-align:middle}
  .g-tabelle tbody tr:first-child th,.g-tabelle tbody tr:first-child td{border-top:0}
  .g-tabelle th:first-child{width:50%;padding-left:var(--t-rand)}
  .g-tabelle__preis{display:table-cell;text-align:right;white-space:nowrap}
  .g-tabelle__preis .price{font-size:1.375rem}
  /* feste Breite, damit die Nettobeträge trotz unterschiedlich langer Klammer untereinander stehen */
  .g-tabelle__brutto{display:inline-block;min-width:9.6em;text-align:right;font-variant-numeric:tabular-nums}
  .g-tabelle th:last-child,.g-tabelle td:last-child{padding-right:var(--t-rand)}
  .g-tabelle.hat-bilder .g-tabelle__leistung{grid-template-columns:56px minmax(0,1fr);column-gap:20px}
  .g-tabelle__bild{width:56px}
}
/* Tablet: Bruttopreis unter dem Nettopreis, damit die Spalte mit Name und Beschreibung genug Platz behält */
@media (min-width:700px) and (max-width:959px){
  .g-tabelle__brutto{display:block;min-width:0;margin-top:2px}
  .g-tabelle th:first-child{width:62%}
}

/* ---------- 7 · Fragen ---------- */
.g-fragen__raster{display:grid;gap:clamp(32px,5vw,64px)}
.g-fragen__kopf{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
/* Antworten auf Blau in vollem Weiß */
.g-fragen .acc__body{color:var(--fg)}
@media (min-width:1024px){
  .g-fragen__raster{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
  .g-fragen__kopf{position:sticky;top:calc(var(--header-h) + 48px)}
}

/* ---------- 9 · Abschluss ---------- */
.g-schluss__titel{max-width:11em}
.g-schluss__zeile{display:flex;flex-direction:column;gap:24px;margin-top:clamp(32px,5vw,64px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.g-schluss__satz{font:700 var(--fs-h3)/1.1 var(--font-display);letter-spacing:-.02em}
.g-schluss__aktionen{display:flex;flex-wrap:wrap;gap:12px}
.g-schluss__aktionen .btn{flex:1 1 auto}
@media (min-width:560px){.g-schluss__aktionen .btn{flex:none}}
@media (min-width:900px){.g-schluss__zeile{flex-direction:row;align-items:center;justify-content:space-between}}

/* ---------- Footer: Zusatzzeile für den Gewerbebereich ---------- */
.g-footer-hinweis{flex:0 0 100%;text-wrap:balance}