/* geruest.com – Seitenbausteine über cetrac.css. Seit 22.10.2026 dunkel wie cetrac.com, ☀/☾ schaltet auf hell (body.stil-dunkel /
   body.stil-hell, Cookie cetrac_stil). Farben hier nur über die Variablen von cetrac.css (--text Schrift, --card/--bg-2 Flächen,
   --ink nur als dunkle Schrift auf Orange), damit beide Fassungen stimmen.
   Logo in Estate (Schrift des CETRAC-Logos) als Pfade: templates/geruest/logo.svg.html. */

body.geruest{--g-max:var(--max)}
.g-wrap{max-width:var(--g-max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
/* Kopf, Menü, Handy-Leiste und Fuß: Klassen von cetrac.com (Tom 22.10.2026: „Design und Navigation ebenfalls anpassen an
   cetrac.com“) – hier nur die Wortmarke von geruest.com und der Fuß mit fünf Spalten. */
body.geruest .logo{margin-left:0;color:#fff;display:flex;align-items:center}
/* Scheinwerfer-Glanz von cetrac.com genau über der Wortmarke: cetrac.css maskiert mit dem CETRAC-Logo, gibt ::after dessen Breite
   und Seitenverhältnis und hebt es beim Überfahren an – hier Maske, Maß und Lage der Wortmarke, ohne Sprung */
body.geruest .logo::after{inset:auto;left:0;top:50%;width:auto;height:32px;aspect-ratio:5741/890;transform:translateY(-50%);-webkit-mask-image:url("geruest-logo.979401208e0f.svg");mask-image:url("geruest-logo.979401208e0f.svg")}
body.geruest .logo:hover::after{transform:translateY(-50%)}
body.geruest .logo .g-logo__marke{animation:logo-glanz 10s ease-in-out 1.5s infinite}
@media (max-width:480px){body.geruest .logo::after{height:24px}}
.g-logo__marke{height:32px;width:auto;display:block}
@media (max-width:480px){.g-logo__marke{height:24px}}
.g-fuss__logo{display:block;color:#fff;margin-bottom:14px}.g-fuss__logo .g-logo__marke{height:26px}
body.geruest .footer__grid{grid-template-columns:1.3fr repeat(4,minmax(0,1fr))}
@media (max-width:900px){body.geruest .footer__grid{grid-template-columns:1fr 1fr}body.geruest .footer__grid>div:first-child{grid-column:1/-1}}
@media (max-width:520px){body.geruest .footer__grid{grid-template-columns:1fr}}

.g-band{padding-block:clamp(36px,6vw,64px)}
.g-prose{max-width:72ch;display:grid;gap:12px}
.g-prose p{margin:0}
.g-lead{font-size:1.06rem;color:var(--muted);max-width:80ch}
.g-mono{font-variant-numeric:tabular-nums}

/* Paketlisten */
.g-zustand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0 14px}
.g-zustand a{display:flex;flex-direction:column;padding:14px 18px;border:2px solid var(--line);border-radius:var(--radius);color:var(--text)!important;
  font-weight:700;font-size:1.15rem;background:var(--card)}
.g-zustand a small{font-weight:400;font-size:.85rem;color:var(--muted)}
.g-zustand a:hover{border-color:var(--orange-l)}
.g-zustand a[aria-current]{border-color:var(--orange);background:rgba(255,148,0,.10)}
.g-systeme{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}   /* Kacheln wachsen – keine Lücke in der letzten Reihe */
.g-systeme>.g-system{flex:1 1 180px}
.g-system{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);color:var(--text)!important}
.g-system strong{font-size:.95rem}
.g-system span{font-size:.8rem;color:var(--muted)}
.g-system:hover{border-color:var(--orange)}
.g-system.aktiv{background:var(--orange);border-color:var(--orange);color:var(--ink)!important}.g-system.aktiv span{color:var(--ink)}
.g-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card-2)}
.g-filter label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;font-weight:700;color:var(--muted);flex:1 1 130px}
.g-filter input,.g-filter select{width:100%;height:42px;padding:0 10px;font:inherit;font-weight:400;font-size:.95rem;border-radius:6px}
.g-filter .btn{flex:none}
.g-treffer{margin:14px 0 10px}
.g-karte{display:flex;flex-direction:column}
.g-karte .card__body{flex:1;display:flex;flex-direction:column}
.g-karte .pkg__price{margin-top:auto}             /* Preiszeilen einer Reihe auf einer Linie, egal wie lang der Titel ist */
.g-karte h3{font-size:1.02rem}
.g-hinweis{margin-top:40px;padding:22px 24px;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:var(--radius);background:var(--bg-2)}
.g-neuteile{margin-top:44px;scroll-margin-top:120px}.g-neuteile>p{max-width:760px}
.g-hinweis h2{font-size:1.25rem}
.g-hinweis p{margin:0}
.stil-hell .pager a,.stil-hell .pager span{background:var(--bg-2);color:var(--ink)}
.stil-hell .pager .aktiv{background:var(--orange)}
.stil-hell .chip{background:#e9ebee;color:var(--ink)}
.stil-hell .chip--orange{background:var(--orange)}
.stil-hell .chip--gruen{background:#e3f4d6;color:#2f6a0c}
.stil-hell .ribbon .chip{background:rgba(255,255,255,.94)}
.stil-hell .ribbon .chip--neu{background:var(--ink);color:#fff}

/* Paketseite */
.g-paket-text{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;margin-top:36px;align-items:start}
.g-kontakt p{margin:8px 0 0}
@media (max-width:900px){.g-paket-text{grid-template-columns:minmax(0,1fr)}}

/* Kalkulator aus dem cetrac-System: cetrac.css setzt hier feste dunkle Flächen – auf geruest.com hell */
body.geruest.stil-hell .result .big{color:var(--ink)}
body.geruest.stil-hell .seg label,body.geruest.stil-hell .modus label{background:var(--card);border-color:var(--line);color:var(--ink)}
body.geruest.stil-hell .seg input:checked+label,body.geruest.stil-hell .modus input:checked+label{border-color:var(--orange);background:#fff4e0}
body.geruest.stil-hell .seg input:focus-visible+label{outline-color:var(--ink)}
body.geruest.stil-hell .modus label strong{color:var(--ink)}
body.geruest.stil-hell .wall{background:var(--card-2);border-color:var(--line)}
body.geruest.stil-hell .wall .wall__masse label{color:var(--ink)}
body.geruest.stil-hell .wall .wall__masse input{background:#fff;color:var(--ink);border-color:#9aa5ae}
body.geruest .wall__leer{border-color:#9aa5ae}
/* Fünf gebrauchte Systeme in einer Reihe, damit keines allein in einer zweiten Reihe steht */
@media (min-width:1100px){body.geruest .seg[data-modus="gebraucht"]{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  body.geruest .seg[data-modus="gebraucht"] label{padding:8px 6px}}
/* Preisleiste unter den Wänden bleibt dunkel – Zweitknopf dort hell beschriften; Skizzen bleiben dunkel wie ein Plan */
body.geruest .kalk-aktion .btn--ghost{color:#fff;border-color:#9aa5ae}

/* Startseite */
.g-start{padding:44px 0 34px;background:linear-gradient(135deg,var(--bg) 0%,var(--bg-2) 55%,rgba(255,148,0,.14) 100%);border-bottom:1px solid var(--line);margin-bottom:30px}
.g-wege{margin-top:26px}
.g-weg{display:flex;flex-direction:column;gap:6px;padding:20px 22px;color:var(--text)!important}
.g-weg strong{font-size:1.25rem}
.g-weg span{color:var(--muted)}
.g-weg em{font-style:normal;font-weight:700;color:var(--orange-text);margin-top:auto;padding-top:6px}
.g-weg--orange{background:var(--orange)!important;border-color:var(--orange)!important}
.g-weg--orange span,.g-weg--orange em{color:var(--ink)}
.g-teile th:first-child,.g-teile td:first-child{width:90px}

/* Gerüstteile (geruest/teile.html) – Liste und Filter aus cetrac.css, hier nur hell und bündig */
.g-teile-intro{max-width:80ch;margin-bottom:6px}
.g-teile-intro p{margin:0 0 8px}
.g-teile-unter{font-weight:700;font-size:1.05rem;color:var(--text)}
.g-tb{margin-top:20px}
.g-teile-h2{font-size:1.25rem;margin:8px 0 12px}
.g-teilearten{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}   /* Kacheln wachsen – letzte Reihe bündig */
.g-teilearten a{flex:1 1 210px;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text)!important}
.g-teilearten a:hover{border-color:var(--orange)}
.g-teilearten strong{font-size:.95rem}
.g-teilearten span{font-size:.8rem;color:var(--orange-text);font-weight:700}
.g-teilearten small{font-size:.8rem;color:var(--muted);line-height:1.35;margin-top:2px}
body.geruest .filter{background:var(--card-2);border:1px solid var(--line)}
body.geruest .filter li a{color:var(--text)}
body.geruest .filter li a:hover{background:var(--bg-2)}
body.geruest .filter li a.aktiv{background:var(--orange);color:var(--ink)}
body.geruest .filter input[type=search]{width:100%;height:40px;padding:0 10px;border-radius:6px;margin:4px 0 6px}
.g-shop .toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.g-teile-text{margin-top:44px}
.g-teile-text h2{font-size:1.3rem;margin:14px 0 0}

/* Gerüst tauschen (geruest/tausch.html) */
.g-tausch-kopf{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:start}
.g-tausch-kopf .note{margin:0 0 16px;font-size:.95rem}
.g-tausch-regel,.g-tausch-rechner,.g-tausch-beispiel{padding:24px}
.g-tausch-regel h2,.g-tausch-rechner h2,.g-tausch-beispiel h2{margin-top:0;font-size:1.3rem}
.g-tausch-gruende{gap:16px;margin-top:14px}
.g-tausch-gruende .card{padding:22px}
.g-tausch-gruende h3{margin-top:0}
.g-tausch-gruende p{margin-bottom:0}
.g-tausch-rechnen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.g-tausch-rechner .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-tausch-beispiel h3{font-size:1.05rem;margin:18px 0 4px}
body.geruest .tausch-schritte li{background:var(--card-2);border:1px solid var(--line)}
@media (max-width:900px){.g-tausch-kopf,.g-tausch-rechnen{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){body.geruest .tausch-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){body.geruest .tausch-schritte{grid-template-columns:minmax(0,1fr)}}
.g-tausch-fuss{margin-top:16px;max-width:90ch}
@media (min-width:901px){.g-tausch-felder{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Ratgeber (geruest/ratgeber.html, ratgeber_liste.html) */
.g-rat-themen{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 10px}
.g-rat-themen a{flex:1 1 170px;display:flex;justify-content:space-between;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);color:var(--text)!important;font-weight:700;font-size:.92rem}
.g-rat-themen a:hover{border-color:var(--orange)}
.g-rat-themen span{color:var(--orange-text)}
.g-rat-gruppe{margin-top:34px;scroll-margin-top:100px}
.g-rat-gruppe h2{font-size:1.4rem;margin:0 0 12px}
.g-rat-karten{display:flex;flex-wrap:wrap;gap:12px}
.g-rat-karte{flex:1 1 300px;display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--text)!important;box-shadow:0 2px 8px rgba(20,30,40,.04)}
.g-rat-karte:hover{border-color:var(--orange)}
.g-rat-karte strong{font-size:1.05rem;line-height:1.3}
.g-rat-karte span{font-size:.9rem;color:var(--muted);line-height:1.45}
.g-rat-karte small{margin-top:auto;padding-top:4px;font-size:.8rem;color:var(--orange-text);font-weight:700}
.g-rat-kopf{max-width:80ch}
.g-rat-raster{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start;margin-top:26px}
.g-rat-raster>.g-rat-text:only-child{grid-column:1/-1}
.g-rat-toc{position:sticky;top:100px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);font-size:.88rem}
.g-rat-toc ol{margin:8px 0 0;padding-left:18px;display:grid;gap:6px}
.g-rat-toc a{color:var(--text)}
.g-rat-toc a:hover{color:var(--orange-text)}
.g-rat-text{max-width:78ch}
.g-rat-text h2{font-size:1.4rem;margin:34px 0 10px;scroll-margin-top:100px}
.g-rat-text h2:first-child{margin-top:0}
.g-rat-text h3{font-size:1.1rem;margin:22px 0 6px}
.g-rat-text p,.g-rat-text li{line-height:1.65}
.g-rat-text table{width:100%;border-collapse:collapse;margin:14px 0 18px;font-size:.92rem}
.g-rat-text th,.g-rat-text td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.g-rat-text th{background:var(--bg-2)}
.g-rat-pakete{margin-top:36px}
.g-rat-faq{margin-top:36px;scroll-margin-top:100px}
.g-rat-faq details{border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin-bottom:8px;background:var(--card)}
.g-rat-faq summary{cursor:pointer;font-weight:700}
.g-rat-faq details p{margin:8px 0 0}
.g-rat-weiter{margin-top:44px}
.g-rat-weiter h2{font-size:1.4rem}
@media (max-width:900px){.g-rat-raster{grid-template-columns:minmax(0,1fr)}.g-rat-toc{position:static}}
@media (max-width:700px){.g-rat-text table{display:block;overflow-x:auto}}

/* Seiten mit Kopfbild, Hersteller-/Systemseiten, Ankauf, Kontakt, Startseite (22.10.2026) */
.g-rat-kopf--bild{max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:start}
.g-held{margin:0}
.g-held img,.g-bild img{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-2)}
.g-held img{aspect-ratio:4/3;object-fit:cover}
.g-held figcaption,.g-bild figcaption{margin-top:6px;font-size:.82rem;color:var(--muted)}
.g-bild{margin:26px 0}
.g-kennzahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 0}
.g-kennzahlen div{padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);display:flex;flex-direction:column;gap:2px}
.g-kennzahlen strong{font-size:1.25rem}
.g-kennzahlen span{font-size:.8rem;color:var(--muted);line-height:1.35}
.g-knoepfe{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.g-rat-pakete--oben{margin:0 0 30px}
.g-rat-pakete--oben h2{margin-top:0}
.g-schritte{margin:0 0 30px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2)}
.g-schritte h2{margin-top:0}
.g-schritte ol,.g-ablauf{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:schritt}
.g-ablauf{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-schritte li,.g-ablauf li{counter-increment:schritt;display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.g-schritte li::before,.g-ablauf li::before{content:counter(schritt);width:28px;height:28px;border-radius:50%;background:var(--orange);color:var(--ink);font-weight:800;display:grid;place-items:center;margin-bottom:4px}
.g-schritte li span,.g-ablauf li span{font-size:.92rem;color:var(--muted);line-height:1.45}
.g-schritte p:last-child{margin:16px 0 0}
.g-ankauf-form{margin-top:36px;padding:24px;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:var(--radius);background:var(--bg-2);scroll-margin-top:100px}
.g-ankauf-form h2{margin-top:0}
.g-kontaktseite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.g-kontakt-karte{padding:20px 22px;margin:18px 0}
.g-kontakt-form{padding:24px}
.g-kontakt-form h2{margin-top:0}
.g-recht{max-width:90ch;overflow-wrap:anywhere}.g-recht>*{min-width:0}   /* lange Adressen und Wörter (Datenschutz, Impressum) nicht breiter als das Handy */
.g-systeme{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.g-system{flex:1 1 190px;display:flex;flex-direction:column;gap:4px;padding:18px 20px;color:var(--text)!important}
.g-system strong{font-size:1.1rem}
.g-system span{font-size:.88rem;color:var(--muted)}
.g-system em{font-style:normal;font-weight:700;color:var(--orange-text);margin-top:auto;padding-top:4px}
.g-zwei{gap:16px}
@media (max-width:900px){
  .g-rat-kopf--bild,.g-kontaktseite{grid-template-columns:1fr;gap:20px}
  .g-schritte ol,.g-ablauf{grid-template-columns:1fr}
}
@media (max-width:560px){.g-kennzahlen{grid-template-columns:1fr}}
.g-fuenf a{flex:1 1 calc(20% - 8px)}
@media (max-width:900px){.g-fuenf a{flex-basis:calc(50% - 8px)}}
.g-haken{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px}
.g-haken li{position:relative;padding-left:26px}
.g-haken li::before{content:"✓";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--orange);color:var(--ink);font-size:.7rem;font-weight:800;display:grid;place-items:center;margin-top:3px}
.g-sonder{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px}
.g-sonder>.g-karte{flex:1 1 300px;max-width:100%}
.g-gp-start .g-sonder{margin-top:12px}
.g-kalk{white-space:nowrap}
body.geruest .badge[hidden]{display:none}   /* leerer Anfragekorb: keine „0“ */

/* Gebraucht-/Neu-Seite wie cetrac.com (Tom 22.10.2026): Zahlen im Kopf, Paketfinder um die Filter */
.g-hub-zahlen{margin:0 0 18px;color:#fff;font-size:1.02rem}.g-hub-zahlen strong{color:var(--orange);font-size:1.25rem}
.g-hub-h1{margin-bottom:22px}
.g-finder{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:12px 22px;align-items:center;padding:16px 18px;margin-bottom:16px;
  border:2px solid var(--orange);border-radius:var(--radius);background:var(--card)}
.g-finder__titel{display:flex;flex-direction:column;gap:3px}.g-finder__titel strong{color:var(--orange);font-size:1.15rem}
.g-finder__titel span{font-size:.86rem;color:var(--muted)}
.g-finder .g-filter{padding:0;border:0;background:none}.g-finder .g-filter label{flex-basis:100px}
@media (max-width:900px){.g-finder{grid-template-columns:1fr}}
/* Von Gebraucht/Neu aus (?modus=…) zeigen Teilebestellung und Rechner nur diesen Zustand – wie geruest.ch (data-ch-zustand) */
body.geruest[data-g-zustand="gebraucht"] label[for="tb-neu"],body.geruest[data-g-zustand="gebraucht"] label[for="modus-neu"],
body.geruest[data-g-zustand="neu"] label[for="tb-gebraucht"],body.geruest[data-g-zustand="neu"] label[for="modus-gebraucht"]{display:none}
@media (min-width:1001px){body.geruest[data-g-zustand] .tb-start{grid-template-columns:1.2fr 2fr}}
@media (max-width:1000px){body.geruest[data-g-zustand] .tb-start__weg{grid-column:1/-1}}
body.geruest[data-g-zustand] .modus{grid-template-columns:1fr}
/* Handy wie cetrac.com (Tom 22.10.2026, Foto): rechts im Kopf Symbole vor dem Menü. cetrac.com zeigt dort Sprache, Suche, Konto und
   blendet Hell/Dunkel und Kontakt aus – geruest.com hat Sprache, Suche und Konto nicht, deshalb bleiben diese beiden stehen. */
@media (max-width:560px){body.geruest .header__tools #stilwahl,body.geruest .header__tools a.iconbtn[href$="/kontakt/"]{display:inline-flex}}
@media (max-width:560px){.g-finder .g-filter label{flex-basis:100%}.g-finder .g-filter .btn{width:100%;justify-content:center}}