/* ============================================================
   TLB Haustechnik GmbH — OnePage
   CI: Logo-Blau #2F2483 · Logo-Rot #E3000F · hell & strukturiert
   ============================================================ */

:root{
  --blau:      #2f2483;
  --blau-tief: #221a63;
  --blau-hell: #eef0fa;
  --blau-mittel:#4a3fa5;
  --rot:       #e3000f;
  --rot-tief:  #c1000d;
  --rot-hell:  #ff4a45;
  --tinte:     #1d2130;
  --grau:      #5b6172;
  --grau-hell: #8b90a0;
  --linie:     #e3e6ef;
  --flaeche:   #f5f6fa;
  --weiss:     #ffffff;
  --radius:    14px;
  --radius-kl: 10px;
  --schatten:  0 10px 30px rgba(29,33,48,.08);
  --schatten-kl:0 4px 14px rgba(29,33,48,.07);
  --breite:    1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
html:not([data-shot]) {scroll-padding-top:96px}
body{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--tinte);
  background:var(--weiss);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blau);text-decoration:none}
ul{list-style:none}
strong{font-weight:700}

.innen{max-width:var(--breite);margin:0 auto;padding:0 24px}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{font-weight:800;line-height:1.18;letter-spacing:-.015em}
h1{font-size:clamp(2rem,4.4vw,3.2rem)}
h2{font-size:clamp(1.6rem,3vw,2.35rem)}
h3{font-size:1.22rem}
.vorzeile{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rot);margin-bottom:14px;
}
.vorzeile::before{content:"";width:26px;height:3px;background:var(--rot);border-radius:2px}
.sektion-kopf{max-width:780px;margin-bottom:44px}
.sektion-kopf p{color:var(--grau);margin-top:12px;font-size:1.05rem}
.sektion-kopf.mittig{margin-left:auto;margin-right:auto;text-align:center}
.sektion-kopf.mittig .vorzeile{justify-content:center}
.sektion-kopf.mittig .vorzeile::before{display:none}

/* ---------- Sektionen ---------- */
section{padding:84px 0}
section.flaeche{background:var(--flaeche)}
section.blauflaeche{background:linear-gradient(150deg,var(--blau-tief),var(--blau) 70%);color:#fff}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:999px;
  font-weight:800;font-size:.98rem;line-height:1;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor:pointer;border:0;
}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn-rot{background:var(--rot);color:#fff;box-shadow:0 8px 20px rgba(227,0,15,.28)}
.btn-rot:hover{background:var(--rot-tief)}
.btn-blau{background:var(--blau);color:#fff;box-shadow:0 8px 20px rgba(47,36,131,.25)}
.btn-blau:hover{background:var(--blau-tief)}
.btn-hell{background:#fff;color:var(--blau);border:2px solid var(--linie)}
.btn-hell:hover{border-color:var(--blau)}
.btn-geist{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-geist:hover{background:rgba(255,255,255,.22)}

/* ---------- Topbar ---------- */
.topbar{background:var(--blau-tief);color:#cfd0e6;font-size:.85rem}
.topbar .innen{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px}
.topbar a{color:#fff;font-weight:600}
.topbar .tb-links{display:flex;gap:22px;align-items:center}
.topbar .tb-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.topbar svg{width:13px;height:13px;opacity:.75}
.topbar .tb-social{display:flex;gap:12px}
.topbar .tb-social svg{width:15px;height:15px;opacity:1}

/* ---------- Header / Navigation ---------- */
header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linie);
}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:20px}
.nav-logo img{height:44px;width:auto}
.nav-menue{display:flex;align-items:center;gap:4px}
.nav-menue > li{position:relative}
.nav-menue > li > a{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 14px;border-radius:9px;font-weight:700;font-size:.98rem;color:var(--tinte);
  transition:background .15s,color .15s;
}
.nav-menue > li > a:hover{background:var(--blau-hell);color:var(--blau)}
.nav-menue > li > a svg{width:13px;height:13px;transition:transform .2s}
.nav-menue > li.offen > a svg{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:calc(100% + 10px);left:0;min-width:300px;
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  box-shadow:var(--schatten);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s,transform .18s,visibility .18s;
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
}
.nav-menue li.offen .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;
  font-size:.92rem;font-weight:600;color:var(--tinte);
}
.dropdown a:hover{background:var(--blau-hell);color:var(--blau)}
.dropdown a svg{width:16px;height:16px;color:var(--rot);flex:none}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-tel{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--blau);font-size:1rem;white-space:nowrap}
.nav-tel svg{width:17px;height:17px}
.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-burger svg{width:26px;height:26px;color:var(--blau)}

/* ---------- Hero ---------- */
.hero{padding:64px 0 72px;background:
  radial-gradient(1100px 500px at 88% -10%, rgba(47,36,131,.07), transparent 60%),
  radial-gradient(700px 400px at -5% 110%, rgba(227,0,15,.05), transparent 55%),
  var(--weiss);
  overflow:hidden;
}
.hero .innen{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-chip{
  display:inline-flex;align-items:center;gap:9px;background:var(--blau-hell);
  color:var(--blau);font-weight:800;font-size:.85rem;
  padding:8px 16px;border-radius:999px;margin-bottom:22px;
}
.hero-chip .punkt{width:8px;height:8px;border-radius:50%;background:var(--rot)}
.hero h1 .rot{color:var(--rot)}
.hero h1 .blau{color:var(--blau)}
.hero-text p{margin-top:18px;color:var(--grau);font-size:1.12rem;max-width:560px}
.hero-btns{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.hero-fakten{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero-fakt{display:flex;align-items:center;gap:11px;font-size:.92rem;font-weight:700;color:var(--tinte)}
.hero-fakt svg{width:20px;height:20px;color:var(--rot);flex:none}
.hero-bild{position:relative}
.hero-bild > img{border-radius:20px;box-shadow:var(--schatten);aspect-ratio:4/3.15;object-fit:cover;width:100%}
.hero-karte{
  position:absolute;left:-26px;bottom:26px;background:#fff;border-radius:var(--radius);
  box-shadow:var(--schatten);padding:14px 20px;display:flex;align-items:center;gap:13px;
}
.hero-karte .hk-zahl{font-size:1.7rem;font-weight:800;color:var(--blau);line-height:1}
.hero-karte .hk-text{font-size:.82rem;color:var(--grau);font-weight:600;line-height:1.3}
.hero-siegel{
  position:absolute;right:-14px;top:-18px;background:#fff;border-radius:var(--radius);
  box-shadow:var(--schatten);padding:12px 14px;width:120px;
}

/* ---------- Zahlenband ---------- */
.zahlen{background:linear-gradient(120deg,var(--blau-tief),var(--blau));color:#fff;padding:38px 0}
.zahlen .innen{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.zahl{text-align:center;padding:6px 10px;position:relative}
.zahl + .zahl::before{content:"";position:absolute;left:0;top:12%;height:76%;width:1px;background:rgba(255,255,255,.18)}
.zahl .z-wert{font-size:2.3rem;font-weight:800;line-height:1.1}
.zahl .z-wert span{color:var(--rot-hell)}
.zahl .z-text{font-size:.9rem;opacity:.82;margin-top:4px;font-weight:600}

/* ---------- Leistungs-Grid ---------- */
.lg-gruppe{margin-top:34px}
.lg-gruppe h3{
  display:flex;align-items:center;gap:12px;font-size:1.02rem;letter-spacing:.02em;
  color:var(--grau);text-transform:uppercase;font-weight:800;margin-bottom:16px;
}
.lg-gruppe h3::after{content:"";flex:1;height:1px;background:var(--linie)}
.lg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lkarte{
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  padding:24px 22px;display:flex;flex-direction:column;gap:10px;
  transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;
}
.lkarte:hover{transform:translateY(-4px);box-shadow:var(--schatten);border-color:transparent}
.lk-icon{
  width:48px;height:48px;border-radius:12px;background:var(--blau-hell);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.lk-icon svg{width:24px;height:24px;color:var(--blau)}
.lkarte .lk-icon{margin-bottom:4px}
.lkarte:hover .lk-icon{background:var(--rot)}
.lkarte:hover .lk-icon svg{color:#fff}
.lkarte h4{font-size:1.05rem;font-weight:800}
.lkarte p{font-size:.9rem;color:var(--grau);flex:1}
.lkarte .lk-mehr{font-size:.88rem;font-weight:800;color:var(--rot);display:inline-flex;align-items:center;gap:6px}
.lkarte .lk-mehr svg{width:14px;height:14px;transition:transform .15s}
.lkarte:hover .lk-mehr svg{transform:translateX(4px)}
.lkarte > a.lk-deck{position:absolute;inset:0;border-radius:inherit}

/* ---------- Detail-Sektionen (Bild/Text-Wechsel) ---------- */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.detail.getauscht .d-bild{order:2}
.d-bild{position:relative}
.d-bild img{border-radius:18px;box-shadow:var(--schatten);width:100%;aspect-ratio:4/3;object-fit:cover}
.d-bild .d-badge{
  position:absolute;left:20px;bottom:20px;background:#fff;border-radius:var(--radius-kl);
  padding:10px 16px;box-shadow:var(--schatten-kl);font-weight:800;font-size:.88rem;color:var(--blau);
  display:flex;align-items:center;gap:9px;
}
.d-bild .d-badge svg{width:17px;height:17px;color:var(--rot)}
.d-text p{color:var(--grau);margin-top:14px}
.hakenliste{margin-top:20px;display:grid;gap:11px}
.hakenliste li{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:.98rem}
.hakenliste li svg{width:20px;height:20px;color:var(--rot);flex:none;margin-top:2px}
.hakenliste li span b{font-weight:800}
.d-text .btn{margin-top:26px}
.d-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.d-chip{background:var(--blau-hell);color:var(--blau);font-size:.82rem;font-weight:800;padding:6px 13px;border-radius:999px}

/* Unteranker-Blöcke innerhalb einer Detailsektion */
.unterblock{scroll-margin-top:110px}

/* ---------- Trio (PV/Speicher/Wallbox · Bäder) ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.tkarte{
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s,box-shadow .18s;
}
.tkarte:hover{transform:translateY(-4px);box-shadow:var(--schatten)}
.tkarte img{aspect-ratio:16/10;object-fit:cover;width:100%}
.tkarte .tk-inhalt{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.tkarte h3{font-size:1.12rem}
.tkarte p{font-size:.93rem;color:var(--grau);flex:1}
.mini-haken{display:grid;gap:7px;margin:4px 0 2px}
.mini-haken li{display:flex;gap:9px;font-size:.88rem;font-weight:600;align-items:flex-start}
.mini-haken li svg{width:16px;height:16px;color:var(--rot);flex:none;margin-top:3px}

/* ---------- Garantie ---------- */
.garantie .innen{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.garantie .vorzeile{color:var(--rot-hell)}
.garantie p{color:#c9cbe4}
.g-balken{display:grid;gap:14px;margin-top:28px}
.g-reihe{display:grid;grid-template-columns:190px 1fr;gap:14px;align-items:center;font-size:.92rem;font-weight:700}
.g-reihe .g-label{color:#e6e7f5}
.g-reihe .g-spur{background:rgba(255,255,255,.12);border-radius:999px;height:34px;position:relative;overflow:hidden}
.g-reihe .g-wert{
  height:100%;border-radius:999px;display:flex;align-items:center;justify-content:flex-end;
  padding:0 14px;font-weight:800;font-size:.88rem;white-space:nowrap;
}
.g-reihe.top .g-wert{background:linear-gradient(90deg,var(--rot),#f4323e);color:#fff;width:100%}
.g-reihe.mittel .g-wert{background:rgba(255,255,255,.32);color:#fff;width:50%}
.g-reihe.klein .g-wert{background:rgba(255,255,255,.2);color:#fff;width:20%}
.g-punkte{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.g-punkt{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:20px}
.g-punkt svg{width:24px;height:24px;color:var(--rot-hell);margin-bottom:10px}
.g-punkt h4{font-size:.98rem;margin-bottom:5px}
.g-punkt p{font-size:.86rem;color:#c9cbe4}
.g-siegel{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.g-siegel img{height:64px;width:auto;border-radius:10px}

/* ---------- Förderung ---------- */
.foerder-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.f-karte{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:30px}
.f-karte .f-kopf{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.f-karte .f-kopf .lk-icon{margin:0}
.f-karte h3{font-size:1.2rem}
.f-karte p{color:var(--grau);font-size:.96rem}
.f-karte .hakenliste{margin-top:16px}
.f-karte .hakenliste li{font-size:.92rem}

/* ---------- Über uns ---------- */
.ueber{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.ueber-bild img{border-radius:18px;box-shadow:var(--schatten)}
.ueber-bild .ub-unter{
  margin-top:18px;background:var(--blau-hell);border-radius:var(--radius);
  padding:18px 22px;display:flex;gap:16px;align-items:center;
}
.ueber-bild .ub-unter img{height:56px;width:auto;border-radius:0;box-shadow:none;flex:none}
.ueber-bild .ub-unter p{font-size:.88rem;color:var(--tinte);font-weight:600;line-height:1.45}
.zeitstrahl{margin-top:26px;position:relative;padding-left:26px;display:grid;gap:20px}
.zeitstrahl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--linie)}
.zs-punkt{position:relative}
.zs-punkt::before{
  content:"";position:absolute;left:-26px;top:5px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:4px solid var(--rot);
}
.zs-punkt .zs-jahr{font-weight:800;color:var(--blau);font-size:.95rem}
.zs-punkt p{font-size:.94rem;color:var(--grau);margin-top:2px}

/* ---------- Hersteller ---------- */
.marken-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.marke{
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  min-height:104px;display:flex;align-items:center;justify-content:center;padding:22px 28px;
  transition:transform .15s,box-shadow .15s;
}
.marke:hover{transform:translateY(-3px);box-shadow:var(--schatten-kl)}
.marke img{max-height:44px;max-width:150px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .2s,opacity .2s}
.marke:hover img{filter:none;opacity:1}
.marke .m-text{font-weight:800;font-size:1.25rem;color:#9aa0b2;letter-spacing:.06em}
.marke:hover .m-text{color:var(--blau)}

/* ---------- Referenzen ---------- */
.ref-karte .tk-inhalt .r-ort{
  display:inline-flex;align-items:center;gap:7px;color:var(--rot);
  font-size:.83rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
}
.ref-karte .r-ort svg{width:14px;height:14px}

/* ---------- Empfehlungen ---------- */
.empfehlung-rahmen{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:34px;box-shadow:var(--schatten-kl)}
.google-zeile{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:30px}
.google-karte{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--linie);border-radius:999px;padding:12px 24px;font-weight:700}
.google-karte .sterne{color:#f5a623;letter-spacing:2px;font-size:1.05rem}

/* ---------- Jobs-Band ---------- */
.jobs-band{background:var(--flaeche);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.jobs-band .innen{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:center}
.job-chips{display:flex;flex-wrap:wrap;gap:10px}
.job-chip{
  background:#fff;border:1.5px solid var(--linie);border-radius:999px;padding:10px 18px;
  font-size:.9rem;font-weight:700;display:inline-flex;align-items:center;gap:9px;color:var(--tinte);
  transition:border-color .15s,color .15s;
}
.job-chip:hover{border-color:var(--rot);color:var(--rot)}
.job-chip svg{width:15px;height:15px;color:var(--rot)}

/* ---------- Kontakt ---------- */
.kontakt-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.k-info{display:grid;gap:14px}
.k-karte{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:20px 22px;display:flex;gap:16px;align-items:flex-start}
.k-karte .lk-icon{width:44px;height:44px;flex:none;margin:0}
.k-karte h4{font-size:.98rem;margin-bottom:3px}
.k-karte p, .k-karte a{font-size:.95rem;color:var(--grau);font-weight:600}
.k-karte a.gross{color:var(--blau);font-size:1.12rem;font-weight:800}
.k-region{background:var(--blau);color:#fff;border:0}
.k-region .lk-icon{background:rgba(255,255,255,.14)}
.k-region .lk-icon svg{color:#fff}
.k-region h4{color:#fff}
.k-region p{color:#c9cbe4}
.formular{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:34px;box-shadow:var(--schatten-kl)}
.formular h3{margin-bottom:6px}
.formular > p{color:var(--grau);font-size:.94rem;margin-bottom:22px}
.f-zeile{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.feld{display:grid;gap:7px}
.feld.voll{grid-column:1/-1}
.feld label{font-size:.86rem;font-weight:800}
.feld label span{color:var(--rot)}
.feld input,.feld select,.feld textarea{
  font:inherit;font-size:.96rem;padding:13px 15px;border:1.5px solid var(--linie);
  border-radius:var(--radius-kl);background:#fff;color:var(--tinte);width:100%;
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;
}
.feld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6172' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:0;border-color:var(--blau);box-shadow:0 0 0 4px rgba(47,36,131,.1)}
.feld input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fff inset;-webkit-text-fill-color:var(--tinte)}
.feld.fehler input,.feld.fehler select,.feld.fehler textarea{border-color:var(--rot);box-shadow:0 0 0 4px rgba(227,0,15,.1)}
.feld textarea{min-height:110px;resize:vertical}
.form-fuss{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:8px;flex-wrap:wrap}
.form-fuss .hinweis{font-size:.8rem;color:var(--grau-hell);max-width:330px}
.form-danke{
  display:none;background:var(--blau-hell);border-radius:var(--radius-kl);
  padding:22px;text-align:center;font-weight:700;color:var(--blau);
}
.form-danke svg{width:34px;height:34px;color:var(--rot);margin:0 auto 8px}

/* ---------- Footer ---------- */
footer{background:var(--blau-tief);color:#b9bbda;font-size:.92rem}
.fuss-haupt{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;padding:64px 0 48px}
.fuss-haupt img{height:46px;width:auto;margin-bottom:18px}
.fuss-haupt h4{color:#fff;font-size:.95rem;margin-bottom:16px;letter-spacing:.04em;text-transform:uppercase}
.fuss-haupt ul{display:grid;gap:9px}
.fuss-haupt a{color:#b9bbda;font-weight:600}
.fuss-haupt a:hover{color:#fff}
.fuss-haupt .f-kontaktzeile{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.fuss-haupt .f-kontaktzeile svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--rot-hell)}
.fuss-unten{border-top:1px solid rgba(255,255,255,.12);padding:20px 0}
.fuss-unten .innen{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.fuss-unten a{color:#b9bbda}
.fuss-unten a:hover{color:#fff}
.fuss-legal{display:flex;gap:20px}

/* ---------- Nach-oben ---------- */
.nach-oben{
  position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;
  background:var(--rot);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(227,0,15,.35);cursor:pointer;border:0;z-index:90;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:all .25s;
}
.nach-oben.sichtbar{opacity:1;visibility:visible;transform:none}
.nach-oben svg{width:20px;height:20px}

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  html:not([data-shot]) .reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
  html:not([data-shot]) .reveal.da{opacity:1;transform:none}
}

/* ---------- Mobil ---------- */
@media(max-width:1080px){
  .lg-grid{grid-template-columns:repeat(2,1fr)}
  .trio{grid-template-columns:1fr 1fr}
  .marken-grid{grid-template-columns:repeat(3,1fr)}
  .zahlen .innen{grid-template-columns:repeat(2,1fr);gap:30px 12px}
  .zahl + .zahl::before{display:none}
  .fuss-haupt{grid-template-columns:1fr 1fr}
}
@media(max-width:920px){
  section{padding:64px 0}
  .hero .innen,.detail,.garantie .innen,.ueber,.kontakt-grid,.jobs-band .innen{grid-template-columns:1fr;gap:38px}
  .detail.getauscht .d-bild{order:0}
  .hero-bild{max-width:560px}
  .hero-karte{left:12px;bottom:14px}
  .hero-siegel{right:6px;top:-12px}
  .foerder-grid{grid-template-columns:1fr}
  .topbar .tb-links .tb-item:nth-child(1){display:none}
  /* Mobile-Navigation */
  .nav-menue{
    position:fixed;inset:0;top:0;background:#fff;flex-direction:column;align-items:stretch;
    padding:92px 26px 30px;gap:2px;z-index:99;overflow-y:auto;
    transform:translateX(100%);visibility:hidden;
    transition:transform .28s ease, visibility 0s linear .28s;display:flex;
  }
  body.menue-offen .nav-menue{transform:none;visibility:visible;transition:transform .28s ease}
  .nav-menue > li > a{justify-content:space-between;padding:14px 12px;font-size:1.06rem;border-bottom:1px solid var(--flaeche);border-radius:0}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    display:none;grid-template-columns:1fr;padding:4px 0 10px}
  .nav-menue li.offen .dropdown{display:grid}
  .nav-burger{display:block;z-index:100;position:relative}
  .nav-cta .btn{display:none}
  .nav-tel span{display:none}
}
@media(max-width:640px){
  body{font-size:15.5px}
  .d-bild .d-badge{left:10px;right:10px;bottom:10px;padding:8px 12px;font-size:.78rem;flex-wrap:wrap;justify-content:center;text-align:center}
  .hero-karte{left:10px;right:auto;max-width:calc(100% - 20px);padding:10px 14px}
  .hero-karte .hk-zahl{font-size:1.2rem}
  .hero-siegel{width:92px;padding:8px;right:2px;top:-8px}
  .sh .hakenliste li{font-size:.92rem}
  .zahlen .innen{grid-template-columns:1fr 1fr;gap:24px 8px}
  .zahl .z-wert{font-size:1.55rem}
  .zahl .z-text{font-size:.8rem}
  .lg-grid,.trio{grid-template-columns:1fr}
  .marken-grid{grid-template-columns:1fr}
  .marke{min-height:88px}
  .marke img{max-height:40px;max-width:70%}
  .f-zeile{grid-template-columns:1fr}
  .g-reihe{grid-template-columns:1fr;gap:6px}
  .g-punkte{grid-template-columns:1fr}
  .fuss-haupt{grid-template-columns:1fr;gap:32px;padding:48px 0 36px}
  .topbar .tb-links .tb-item:nth-child(2){display:none}
  .hero-karte .hk-zahl{font-size:1.3rem}
  .formular{padding:26px 20px}
}

/* ============================================================
   Unterseiten
   ============================================================ */
.sh{background:
  radial-gradient(900px 420px at 90% -20%, rgba(47,36,131,.09), transparent 60%),
  radial-gradient(600px 300px at 0% 130%, rgba(227,0,15,.05), transparent 55%),
  var(--flaeche);
  border-bottom:1px solid var(--linie);padding:54px 0 50px}
.sh .innen{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center}
.sh.ohne-bild .innen{grid-template-columns:1fr}
.krumen{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:.85rem;font-weight:700;color:var(--grau);margin-bottom:16px}
.krumen a{color:var(--grau)}
.krumen a:hover{color:var(--blau)}
.krumen svg{width:13px;height:13px;opacity:.6}
.sh h1{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.sh .sh-sub{color:var(--grau);font-size:1.08rem;margin-top:14px;max-width:640px}
.sh .sh-btns{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.sh-bild img{border-radius:16px;box-shadow:var(--schatten);aspect-ratio:4/3;object-fit:cover;width:100%}
.sprungleiste{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.sprungleiste a{background:#fff;border:1.5px solid var(--linie);border-radius:999px;padding:8px 16px;font-size:.86rem;font-weight:700;color:var(--tinte)}
.sprungleiste a:hover{border-color:var(--rot);color:var(--rot)}

/* FAQ (native details) */
.faq{display:grid;gap:12px;max-width:860px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-kl);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;font-weight:800;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;font-weight:700;color:var(--rot);line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 20px 18px;color:var(--grau);font-size:.95rem}

/* Prozess-Schritte */
.prozess{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:schritt}
.prozess .p-schritt{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:24px 20px;counter-increment:schritt;position:relative}
.prozess .p-schritt::before{content:counter(schritt,decimal-leading-zero);font-weight:800;font-size:1.9rem;color:var(--blau-hell);-webkit-text-stroke:1.5px var(--blau);position:absolute;top:14px;right:18px}
.prozess h4{font-size:1rem;margin-bottom:6px;padding-right:44px}
.prozess p{font-size:.88rem;color:var(--grau)}

/* Referenz-Galerie + Projektkarten */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.galerie img{border-radius:12px;aspect-ratio:4/3;object-fit:cover;width:100%}
.projekt{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.projekt + .projekt{margin-top:26px}
.projekt.getauscht > :first-child{order:2}
.projekt .p-fakten{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.p-fakt{background:var(--blau-hell);border-radius:var(--radius-kl);padding:10px 16px}
.p-fakt .pf-wert{font-weight:800;color:var(--blau);font-size:1.05rem}
.p-fakt .pf-text{font-size:.78rem;color:var(--grau);font-weight:600}

/* Jobs */
.stelle{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:30px;scroll-margin-top:110px}
.stelle + .stelle{margin-top:22px}
.stelle .st-kopf{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}
.stelle h3{font-size:1.25rem}
.stelle .st-ort{display:inline-flex;align-items:center;gap:7px;color:var(--rot);font-weight:800;font-size:.85rem}
.stelle .st-ort svg{width:14px;height:14px}
.stelle .st-spalten{display:grid;grid-template-columns:1fr 1fr;gap:10px 32px;margin-top:12px}
.zitate{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.zitat{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:26px;position:relative}
.zitat::before{content:"\201C";position:absolute;top:6px;right:18px;font-size:3.4rem;color:var(--blau-hell);font-weight:800;line-height:1}
.zitat p{font-size:.92rem;color:var(--grau);font-style:italic}
.zitat .z-wer{margin-top:14px;font-weight:800;font-size:.95rem}
.zitat .z-rolle{font-size:.8rem;color:var(--rot);font-weight:700}

/* CTA-Band (site.js) */
.cta-band{background:linear-gradient(140deg,var(--blau-tief),var(--blau) 75%);color:#fff;padding:56px 0}
.cta-band .innen{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.cta-band p{color:#c9cbe4;margin-top:8px;max-width:560px}
.cta-band .cb-btns{display:flex;gap:14px;flex-wrap:wrap}
.cta-band .nav-tel{color:#fff;font-size:1.25rem}

/* Querverweise */
.weiter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* Spalten-Utilities (brechen mobil sauber um) */
.spalten-2{grid-template-columns:1fr 1fr}
.spalten-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1080px){ .spalten-3{grid-template-columns:1fr 1fr} }
@media(max-width:920px){ .spalten-2{grid-template-columns:1fr} }
@media(max-width:640px){ .spalten-3{grid-template-columns:1fr} }

/* Aktiver Nav-Punkt */
.nav-menue > li > a.aktiv{background:var(--blau-hell);color:var(--blau)}

/* Rechtstexte */
.rechtstext{max-width:860px}
.rechtstext h2{font-size:1.3rem;margin:34px 0 10px}
.rechtstext h3{font-size:1.05rem;margin:22px 0 8px}
.rechtstext p, .rechtstext li{color:var(--grau);font-size:.95rem;margin-bottom:10px}
.rechtstext ul{list-style:disc;padding-left:22px}

@media(max-width:920px){
  .sh .innen{grid-template-columns:1fr}
  .sh-bild{max-width:520px}
  .prozess{grid-template-columns:1fr 1fr}
  .projekt{grid-template-columns:1fr}
  .projekt.getauscht > :first-child{order:0}
  .zitate{grid-template-columns:1fr}
  .weiter-grid{grid-template-columns:1fr}
  .stelle .st-spalten{grid-template-columns:1fr}
}
@media(max-width:640px){
  .prozess{grid-template-columns:1fr}
  .galerie{grid-template-columns:1fr 1fr}
}

/* Benefits-Liste auf blauem Grund */
.blauflaeche .hakenliste li svg{color:var(--rot-hell)}
.blauflaeche .hakenliste li{color:#e6e7f5}