/* Heizungstechnik Hub — Vertrauensbasierte Art Direction, gleiches
   System wie sanitaer-art-direction.css (Master-Konzept für alle
   Leistungsseiten), hier auf Heizungstechnik-Inhalte übertragen. */

.heizung-art-page {
  --hzg-ink: #071d33;
  --hzg-ink-soft: #173446;
  --hzg-blue: #0a609d;
  --hzg-blue-deep: #064b80;
  --hzg-blue-light: #82c9ed;
  --hzg-pink: #ca0b57;
  --hzg-paper: #f4f7f9;
  --hzg-white: #fff;
  --hzg-muted: #5f7481;
  --hzg-line: #d8e2e8;
  overflow-x: clip;
  color: var(--hzg-ink-soft);
  background: var(--hzg-white);
}

.heizung-art-page main,
.heizung-art-page .eco-footer {
  overflow: clip;
}

.heizung-art-page .hzg-main {
  background: var(--hzg-white);
}

.heizung-art-page .hzg-main :is(h1, h2, h3, p, figure) {
  margin-top: 0;
}

.heizung-art-page .hzg-main :is(h1, h2, h3) {
  color: var(--hzg-ink);
  font-family: var(--eco-display);
  font-weight: 800;
  letter-spacing: 0;
  text-wrap: balance;
}

.heizung-art-page .hzg-main img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.heizung-art-page .hzg-eyebrow,
.heizung-art-page .hzg-chapter,
.heizung-art-page .hzg-kicker {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  color: var(--hzg-blue);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.heizung-art-page .hzg-eyebrow::before,
.heizung-art-page .hzg-chapter::before,
.heizung-art-page .hzg-kicker::before {
  width: 32px;
  height: 2px;
  content: "";
  background: currentColor;
}

.heizung-art-page .hzg-kicker {
  color: var(--hzg-pink);
}

.heizung-art-page .hzg-chapter--light {
  color: var(--hzg-blue-light);
}

.heizung-art-page .hzg-button {
  display: inline-flex;
  min-height: 54px;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.heizung-art-page .hzg-button .lucide {
  width: 18px;
  height: 18px;
}

.heizung-art-page .hzg-button--light {
  color: var(--hzg-ink);
  background: var(--hzg-white);
}

.heizung-art-page .hzg-button--blue {
  color: var(--hzg-white);
  background: var(--hzg-blue);
}

.heizung-art-page .hzg-button--blue:hover {
  color: var(--hzg-white);
  background: var(--hzg-blue-deep);
}

.heizung-art-page .hzg-button:is(:hover, :focus-visible) {
  transform: translateY(-2px);
}

.heizung-art-page .hzg-section-head {
  margin-bottom: clamp(58px, 6vw, 86px);
}

.heizung-art-page .hzg-section-head h2 {
  margin: 15px 0 0;
  font-size: clamp(3.35rem, 5vw, 5.35rem);
  line-height: 0.94;
}

.heizung-art-page .hzg-section-head h2 span {
  color: var(--hzg-blue);
}

.heizung-art-page .hzg-section-head > p {
  max-width: 60ch;
  margin: 24px 0 0;
  color: var(--hzg-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.heizung-art-page .hzg-section-head--center {
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}

.heizung-art-page .hzg-section-head--center .hzg-chapter {
  justify-content: center;
}

.heizung-art-page .hzg-section-head--center > p {
  margin-inline: auto;
}

/* Bildbasierter Hero */
.heizung-art-page .hzg-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 720px;
  align-items: center;
  padding: clamp(72px, 7vw, 104px) 0;
  color: var(--hzg-white);
  background:
    linear-gradient(90deg, rgba(3, 19, 34, 0.98) 0%, rgba(5, 35, 58, 0.9) 48%, rgba(5, 35, 58, 0.48) 100%),
    url("../img/heizung-beratung-2x.webp") center 30% / cover no-repeat;
}

.heizung-art-page .hzg-hero::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: 36%;
  height: 3px;
  content: "";
  background: var(--hzg-blue-light);
}

.heizung-art-page .hzg-hero .hzg-eyebrow {
  color: var(--hzg-blue-light);
}

/* Kein max-width: die alte, kürzere Erstfassung dieser Headline
   brauchte die Breitenbegrenzung, die aktuelle (längere) Zeile vor dem
   manuellen <br /> nicht mehr — sonst bricht sie ein zweites Mal um und
   "wird," landet allein auf einer eigenen Zeile. Gleicher Bug wie bei
   .hzg-welcome__copy h2 / .hzg-cases__case h3. */
.heizung-art-page .hzg-hero__copy h1 {
  margin: 25px 0 26px;
  color: var(--hzg-white);
  font-size: clamp(4rem, 6vw, 6.35rem);
  line-height: 0.87;
}

.heizung-art-page .hzg-hero__copy h1 span {
  color: var(--hzg-blue-light);
}

.heizung-art-page .hzg-hero__copy > p {
  max-width: 53ch;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(1rem, 1.35vw, 1.17rem);
  line-height: 1.75;
}

.heizung-art-page .hzg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-top: 34px;
}

.heizung-art-page .hzg-phone-link {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  color: var(--hzg-white);
  font-size: 0.88rem;
  font-weight: 850;
  text-decoration: none;
}

/* Nur auf Mobile sichtbar — siehe @media (max-width: 767.98px) weiter
   unten für die eigentliche Darstellung der fixierten Kontakt-Leiste. */
.heizung-art-page .hzg-mobile-cta {
  display: none;
}

.heizung-art-page .hzg-phone-link > .lucide {
  width: 22px;
  color: var(--hzg-blue-light);
}

.heizung-art-page .hzg-phone-link span {
  display: grid;
}

.heizung-art-page .hzg-phone-link small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.57rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Hero-Formular */
.heizung-art-page .hzg-form {
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  color: var(--hzg-ink);
  background: rgba(255, 255, 255, 0.975);
  box-shadow: 0 28px 70px rgba(0, 17, 31, 0.24);
}

.heizung-art-page .hzg-form__head {
  margin-bottom: 22px;
}

.heizung-art-page .hzg-form__head > span {
  color: var(--hzg-blue);
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.heizung-art-page .hzg-form__head h2 {
  margin: 7px 0 8px;
  font-size: clamp(1.95rem, 2.5vw, 2.55rem);
  line-height: 0.96;
}

.heizung-art-page .hzg-form__head p {
  margin-bottom: 0;
  color: var(--hzg-muted);
  font-size: 0.74rem;
}

.heizung-art-page .hzg-form__field {
  margin-bottom: 14px;
}

.heizung-art-page .hzg-form label {
  display: block;
  margin-bottom: 6px;
  color: #3f5563;
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.03em;
}

.heizung-art-page .hzg-form :is(input, select, textarea) {
  width: 100%;
  border: 1px solid #d3dee4;
  border-radius: 7px;
  color: var(--hzg-ink);
  background: #f8fafb;
  font: inherit;
  font-size: 0.77rem;
  outline: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.heizung-art-page .hzg-form :is(input, select) {
  height: 48px;
  padding: 0 14px;
}

.heizung-art-page .hzg-form textarea {
  min-height: 76px;
  padding: 12px 14px;
  resize: vertical;
}

.heizung-art-page .hzg-form :is(input, select, textarea):focus {
  border-color: var(--hzg-blue);
  box-shadow: 0 0 0 3px rgba(10, 96, 157, 0.12);
}

.heizung-art-page .hzg-form__select {
  position: relative;
}

.heizung-art-page .hzg-form__select select {
  padding-inline: 42px 38px;
  appearance: none;
}

.heizung-art-page .hzg-form__select .lucide {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 17px;
  pointer-events: none;
  transform: translateY(-50%);
}

.heizung-art-page .hzg-form__select .lucide:first-child {
  left: 14px;
  color: var(--hzg-blue);
}

.heizung-art-page .hzg-form__select .lucide:last-child {
  right: 12px;
  color: #71828c;
}

.heizung-art-page .hzg-form__submit {
  display: flex;
  width: 100%;
  min-height: 52px;
  gap: 10px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  color: var(--hzg-white);
  background: var(--hzg-blue);
  font-size: 0.74rem;
  font-weight: 850;
}

.heizung-art-page .hzg-form__submit .lucide {
  width: 17px;
}

.heizung-art-page .hzg-form__legal {
  margin: 10px 0 0;
  color: #75858e;
  font-size: 0.58rem;
  line-height: 1.5;
}

.heizung-art-page .hzg-form__legal a {
  color: var(--hzg-pink);
  font-weight: 850;
}

/* Begrüßung — Bild links, Text rechts, weiß, damit sie nahtlos in den
   ebenfalls weißen Leistungs-Swiper direkt darunter übergeht. */
/* Bottom padding is deliberately smaller than the top: .hzg-services
   right below already brings its own generous top padding (chapter 01
   opener), so matching paddings on both sides would stack into a gap
   that reads as two disconnected blocks instead of one continuous
   flow. */
.heizung-art-page .hzg-welcome {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 7vw, 104px) 0 clamp(46px, 4vw, 64px);
  background: var(--hzg-white);
}

/* Dezenter Tiefen-Akzent statt reiner Fläche — gleiche Punktraster-Technik
   wie .about-hero-bg-dots auf der Startseite, hier nur neu positioniert
   und skaliert. Liegt hinter dem Inhalt, .hzg-welcome__layout bekommt
   dafür einen eigenen Stacking-Context. */
.heizung-art-page .hzg-welcome__bg-dots {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: clamp(220px, 22vw, 340px);
  height: clamp(220px, 22vw, 340px);
  background-image: radial-gradient(rgba(10, 96, 157, 0.14) 1.6px, transparent 1.6px);
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, #000 45%, transparent 78%);
  mask-image: radial-gradient(circle at 100% 0%, #000 0%, #000 45%, transparent 78%);
}

.heizung-art-page .hzg-welcome__layout {
  position: relative;
  z-index: 1;
}

/* Bewusste Klammer: macht sichtbar, dass die fünf nummerierten Kapitel
   danach eine zusammenhängende Antwort-Kette sind, keine lose Sammlung
   von Themenboxen. */
.heizung-art-page .hzg-welcome__thesis {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: clamp(56px, 6vw, 84px) 0 0;
  padding-top: clamp(40px, 4vw, 56px);
  border-top: 1px solid var(--hzg-line);
  color: var(--hzg-muted);
  font-size: 0.92rem;
  font-style: italic;
  text-align: center;
}

.heizung-art-page .hzg-welcome__thesis .lucide {
  width: 16px;
  color: var(--hzg-blue);
}

.heizung-art-page .hzg-welcome__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(420px, 1.06fr);
  gap: clamp(54px, 7vw, 100px);
  align-items: center;
}

.heizung-art-page .hzg-welcome__media-wrap {
  position: relative;
}

.heizung-art-page .hzg-welcome__media {
  position: relative;
  aspect-ratio: 1.08;
  overflow: hidden;
  margin: 0;
  border-radius: 14px;
  box-shadow: 0 30px 60px rgba(7, 29, 51, 0.14);
}

.heizung-art-page .hzg-welcome__badge {
  position: absolute;
  z-index: 2;
  top: -26px;
  left: 40px;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 22px;
  border-radius: 12px;
  background: var(--hzg-ink);
  box-shadow: 0 22px 44px rgba(7, 29, 51, 0.3);
}

.heizung-art-page .hzg-welcome__badge strong {
  color: var(--hzg-blue-light);
  font-size: 1.55rem;
  font-weight: 850;
  line-height: 1;
}

.heizung-art-page .hzg-welcome__badge span {
  display: grid;
  gap: 2px;
}

.heizung-art-page .hzg-welcome__badge b {
  color: var(--hzg-white);
  font-size: 0.8rem;
  font-weight: 800;
}

.heizung-art-page .hzg-welcome__badge small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.6rem;
  letter-spacing: 0.02em;
}

.heizung-art-page .hzg-welcome__media img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.heizung-art-page .hzg-welcome__media:hover img {
  transform: scale(1.045);
}

.heizung-art-page .hzg-welcome__media figcaption {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 20px 22px;
  color: var(--hzg-white);
  background: rgba(7, 29, 51, 0.93);
}

.heizung-art-page .hzg-welcome__media figcaption .lucide {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: var(--hzg-blue-light);
}

.heizung-art-page .hzg-welcome__media figcaption span {
  display: grid;
  gap: 2px;
}

.heizung-art-page .hzg-welcome__media figcaption strong {
  font-size: 0.78rem;
}

.heizung-art-page .hzg-welcome__media figcaption small {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.62rem;
}

/* No max-width here on purpose: the <br /> in the markup already sets
   the line break. A width cap on top of that risked wrapping the line
   a second time mid-line whenever the copy changed length — see the
   .hzg-cases__case h3 comment below, same bug in two places. */
.heizung-art-page .hzg-welcome__copy h2 {
  margin: 17px 0 22px;
  font-size: clamp(2.5rem, 3.6vw, 3.65rem);
  line-height: 1.05;
}

.heizung-art-page .hzg-welcome__copy h2 span {
  color: var(--hzg-blue);
}

.heizung-art-page .hzg-welcome__copy > p {
  max-width: 50ch;
  color: var(--hzg-muted);
  font-size: 0.98rem;
  line-height: 1.78;
}

.heizung-art-page .hzg-welcome__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hzg-line);
}

.heizung-art-page .hzg-welcome__proof span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--hzg-ink);
  font-size: 0.72rem;
  font-weight: 800;
}

.heizung-art-page .hzg-welcome__proof .lucide {
  width: 17px;
  color: var(--hzg-blue);
}

.heizung-art-page .hzg-welcome__copy .hzg-button {
  margin-top: 30px;
}

/* Direktnavigation */
.heizung-art-page .hzg-service-nav {
  border-bottom: 1px solid var(--hzg-line);
  background: var(--hzg-white);
}

.heizung-art-page .hzg-service-nav__inner {
  display: flex;
  min-height: 74px;
  gap: 38px;
  align-items: center;
}

.heizung-art-page .hzg-service-nav__title {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 9px;
  align-items: center;
  color: var(--hzg-ink);
  font-size: 0.72rem;
  font-weight: 900;
  text-decoration: none;
}

.heizung-art-page .hzg-service-nav__title .lucide {
  width: 17px;
  color: var(--hzg-blue);
}

.heizung-art-page .hzg-service-nav__links {
  display: flex;
  min-width: 0;
  flex: 1;
  gap: clamp(20px, 3vw, 46px);
  align-items: center;
  justify-content: flex-end;
}

.heizung-art-page .hzg-service-nav__links a {
  position: relative;
  padding-bottom: 3px;
  color: #506470;
  font-size: 0.68rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.heizung-art-page .hzg-service-nav__links a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  background: var(--hzg-blue);
  height: 1.5px;
  transition: transform 0.2s ease;
}

.heizung-art-page .hzg-service-nav__links a:hover {
  color: var(--hzg-blue);
}

.heizung-art-page .hzg-service-nav__links a:hover::after {
  transform: scaleX(1);
}

/* Vollbreiter Leistungs-Swiper */
/* Weiß statt Papierton: Die weißen Checkpoint-Karten aus "01 / Wer kommt
   zu mir?" ragen per negativem Versatz unten in diese Section hinein –
   ein abweichender Hintergrund würde genau an der Überlappung einen
   sichtbaren Farbbruch erzeugen. */
.heizung-art-page .hzg-services {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 6vw, 100px) 0 clamp(90px, 8vw, 124px);
  background: var(--hzg-white);
}

/* Gleicher Tiefen-Akzent wie .hzg-welcome__bg-dots / .hzg-cases__bg-dots
   (oben rechts bzw. unten links) — hier oben links, damit die drei
   aufeinanderfolgenden weißen Sections dieselbe visuelle Sprache
   sprechen und der große leere Übergang nach den Fallbeispielen einen
   Anker bekommt. */
.heizung-art-page .hzg-services__bg-dots {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: clamp(220px, 22vw, 340px);
  height: clamp(220px, 22vw, 340px);
  background-image: radial-gradient(rgba(10, 96, 157, 0.14) 1.6px, transparent 1.6px);
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(circle at 0% 0%, #000 0%, #000 45%, transparent 78%);
  mask-image: radial-gradient(circle at 0% 0%, #000 0%, #000 45%, transparent 78%);
}

.heizung-art-page .hzg-services > .eco-container,
.heizung-art-page .hzg-services__viewport {
  position: relative;
  z-index: 1;
}

.heizung-art-page .hzg-services .hzg-section-head {
  margin-bottom: 62px;
}

.heizung-art-page .hzg-services__proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 860px;
  margin: 38px auto 0;
  border-top: 1px solid var(--hzg-line);
  border-bottom: 1px solid var(--hzg-line);
}

.heizung-art-page .hzg-services__proof > span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  align-items: center;
  padding: 21px 24px;
  text-align: left;
}

.heizung-art-page .hzg-services__proof > span + span {
  border-left: 1px solid var(--hzg-line);
}

.heizung-art-page .hzg-services__proof .lucide {
  grid-row: 1 / 3;
  width: 24px;
  height: 24px;
  color: var(--hzg-blue);
}

.heizung-art-page .hzg-services__proof b {
  color: var(--hzg-ink);
  font-size: 0.7rem;
}

.heizung-art-page .hzg-services__proof small {
  color: var(--hzg-muted);
  font-size: 0.58rem;
}

.heizung-art-page .hzg-services__viewport {
  width: min(1520px, 100%);
  margin-inline: auto;
  padding: 24px 20px 38px;
  overflow: hidden;
}

.heizung-art-page .heizung-services-swiper {
  width: 100%;
  overflow: visible;
  cursor: grab;
  perspective: 1500px;
  touch-action: pan-y;
}

.heizung-art-page .heizung-services-swiper.is-dragging {
  cursor: grabbing;
}

.heizung-art-page .heizung-services-swiper .swiper-wrapper {
  align-items: center;
}

.heizung-art-page .heizung-services-swiper .swiper-slide {
  height: auto;
  opacity: 0.9;
  filter: saturate(0.78) brightness(0.7);
  transition: opacity 0.45s ease, filter 0.45s ease;
}

.heizung-art-page .heizung-services-swiper .swiper-slide-active {
  z-index: 3;
  opacity: 1;
  filter: none;
}

.heizung-art-page .heizung-service-card {
  display: grid;
  min-height: 492px;
  grid-template-rows: minmax(0, 1.18fr) minmax(205px, 0.82fr);
  overflow: hidden;
  border-radius: 12px;
  color: var(--hzg-white);
  background: var(--hzg-ink);
  text-decoration: none;
  transform-style: preserve-3d;
}

.heizung-art-page .heizung-service-card figure {
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.heizung-art-page .heizung-service-card img {
  width: calc(100% + 24px);
  max-width: none;
  height: 100%;
  margin-left: -12px;
  object-fit: cover;
  transform: translate3d(var(--service-image-shift, 0), 0, 0) scale(1.04);
  transition: transform 0.14s linear;
}

.heizung-art-page .heizung-services-swiper.is-dragging img {
  transition: none;
}

.heizung-art-page .heizung-service-card__body {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 24px 24px 22px;
  background: linear-gradient(145deg, #071d33, #041523);
  transition: color 0.35s ease, background 0.35s ease;
}

.heizung-art-page .heizung-service-card__body > span {
  color: var(--hzg-blue-light);
  font-family: var(--eco-display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 0.8;
}

.heizung-art-page .heizung-service-card__body small {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.heizung-art-page .heizung-service-card__body h3 {
  margin: 6px 0 7px;
  color: var(--hzg-white);
  font-size: 1.65rem;
  line-height: 0.98;
}

.heizung-art-page .heizung-service-card__body p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.69rem;
  line-height: 1.55;
}

.heizung-art-page .heizung-service-card__body > .lucide {
  width: 19px;
  margin-top: auto;
  color: var(--hzg-blue-light);
}

.heizung-art-page .swiper-slide-active .heizung-service-card {
  color: var(--hzg-ink);
  background: var(--hzg-white);
  box-shadow: 0 24px 58px rgba(7, 29, 51, 0.18);
}

.heizung-art-page .swiper-slide-active .heizung-service-card__body {
  color: var(--hzg-ink);
  background: var(--hzg-white);
}

.heizung-art-page .swiper-slide-active .heizung-service-card__body > span {
  color: var(--hzg-pink);
}

.heizung-art-page .swiper-slide-active .heizung-service-card__body small {
  color: var(--hzg-blue);
}

.heizung-art-page .swiper-slide-active .heizung-service-card__body h3 {
  color: var(--hzg-ink);
}

.heizung-art-page .swiper-slide-active .heizung-service-card__body p {
  color: var(--hzg-muted);
}

.heizung-art-page .swiper-slide-active .heizung-service-card__body > .lucide {
  color: var(--hzg-pink);
}

.heizung-art-page .hzg-services__navigation {
  display: grid;
  grid-template-columns: 112px minmax(180px, 1fr) auto auto;
  gap: 28px;
  align-items: center;
  max-width: 920px;
  margin: 4px auto 0;
  padding: 22px 0;
  border-top: 1px solid var(--hzg-line);
  border-bottom: 1px solid var(--hzg-line);
}

.heizung-art-page .service-category-grid__index {
  display: flex;
  gap: 8px;
  align-items: center;
}

.heizung-art-page .service-category-grid__index strong {
  color: var(--hzg-pink);
  font-family: var(--eco-display);
  font-size: 2.45rem;
  font-weight: 800;
  line-height: 1;
}

.heizung-art-page .service-category-grid__index span {
  color: #8898a1;
  font-size: 0.68rem;
  font-weight: 800;
}

.heizung-art-page .service-category-grid__progress {
  height: 3px;
  overflow: hidden;
  background: var(--hzg-line);
}

.heizung-art-page .service-category-grid__progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--hzg-pink);
  transform: scaleX(0.1667);
  transform-origin: left center;
  transition: transform 0.45s ease;
}

.heizung-art-page .service-category-grid__hint {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: #758791;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.heizung-art-page .service-category-grid__hint .lucide {
  width: 15px;
}

.heizung-art-page .service-category-grid__controls {
  display: flex;
  gap: 8px;
}

.heizung-art-page .service-category-grid__controls button {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #bdcbd3;
  border-radius: 50%;
  color: var(--hzg-ink);
  background: var(--hzg-white);
}

.heizung-art-page .service-category-grid__controls button:last-child,
.heizung-art-page .service-category-grid__controls button:hover {
  border-color: var(--hzg-blue);
  color: var(--hzg-white);
  background: var(--hzg-blue);
}

.heizung-art-page .service-category-grid__controls .lucide {
  width: 18px;
}

.heizung-art-page .service-location-context {
  border: 0;
  color: var(--hzg-white);
  background: var(--hzg-blue);
}

/* Vertrauen: Zuständigkeit — vollflächiges Bild + schwebende Karten */
.heizung-art-page .hzg-trust-band {
  position: relative;
  z-index: 0;
  padding: clamp(100px, 10vw, 148px) 0 clamp(90px, 8vw, 130px);
  color: var(--hzg-white);
}

.heizung-art-page .hzg-trust-band__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  height: clamp(520px, 56vw, 660px);
  overflow: hidden;
}

.heizung-art-page .hzg-trust-band__media img {
  height: 100%;
  object-fit: cover;
  object-position: 62% 38%;
}

.heizung-art-page .hzg-trust-band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 16, 28, 0.82) 0%, rgba(4, 16, 28, 0.52) 46%, rgba(4, 16, 28, 0.9) 100%);
}

.heizung-art-page .hzg-trust-band__head {
  padding-bottom: clamp(120px, 13vw, 180px);
}

/* Overrides the global ".hzg-main :is(h1,h2,h3){color:var(--hzg-ink)}"
   rule — without this, the headline rendered near-black over the dark
   photo band and was effectively unreadable. */
.heizung-art-page .hzg-trust-band__head h2 {
  color: var(--hzg-white);
}

.heizung-art-page .hzg-trust-band__head > p {
  color: rgba(255, 255, 255, 0.8);
}

/* Echtes Kundenzitat statt einer eigenen Kundenstimmen-Section — passt
   inhaltlich besser hierher (Transparenz/Kommunikation ist genau das
   Thema dieser Section) als in ein separates Karussell-Widget. */
.heizung-art-page .hzg-trust-band__quote {
  max-width: 620px;
  margin: 34px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.heizung-art-page .hzg-trust-band__quote p {
  margin: 0 0 10px;
  color: var(--hzg-white);
  font-family: var(--eco-display);
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.4;
}

.heizung-art-page .hzg-trust-band__quote footer {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  font-weight: 800;
}

.heizung-art-page .hzg-trust-band__quote footer span {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

.heizung-art-page .hzg-trust-band__checkpoints {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(-210px, -14vw, -110px);
  overflow: hidden;
  border-radius: 14px;
  background: var(--hzg-line);
  box-shadow: 0 34px 70px rgba(5, 20, 36, 0.24);
}

.heizung-art-page .hzg-trust-band__checkpoints article {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  padding: clamp(28px, 3vw, 38px) clamp(24px, 3vw, 34px);
  background: var(--hzg-white);
  transition: background-color 0.2s ease;
}

.heizung-art-page .hzg-trust-band__checkpoints article:hover {
  background: var(--hzg-paper);
}

.heizung-art-page .hzg-trust-band__checkpoints article:hover > span {
  background: var(--hzg-pink);
}

.heizung-art-page .hzg-trust-band__checkpoints article > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--hzg-white);
  background: var(--hzg-blue);
  font-family: var(--eco-display);
  font-size: 1rem;
  font-weight: 800;
}

.heizung-art-page .hzg-trust-band__checkpoints strong {
  display: block;
  margin-bottom: 6px;
  color: var(--hzg-ink);
  font-size: 1rem;
}

.heizung-art-page .hzg-trust-band__checkpoints p {
  margin: 0;
  color: var(--hzg-muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

/* Vertrauen: nachvollziehbare Arbeit — Fallbeispiele */
.heizung-art-page .hzg-cases {
  position: relative;
  overflow: hidden;
  padding: clamp(112px, 10vw, 160px) 0 clamp(80px, 6vw, 100px);
  background: var(--hzg-white);
}

/* Gleicher Tiefen-Akzent wie .hzg-welcome__bg-dots, hier unten links,
   gegenüber der wechselnden Bild/Text-Anordnung der Fallbeispiele. */
.heizung-art-page .hzg-cases__bg-dots {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  width: clamp(220px, 22vw, 340px);
  height: clamp(220px, 22vw, 340px);
  background-image: radial-gradient(rgba(10, 96, 157, 0.14) 1.6px, transparent 1.6px);
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(circle at 0% 100%, #000 0%, #000 45%, transparent 78%);
  mask-image: radial-gradient(circle at 0% 100%, #000 0%, #000 45%, transparent 78%);
}

.heizung-art-page .hzg-cases > .eco-container {
  position: relative;
  z-index: 1;
}

/* A lone left-aligned title with nothing balancing it on the right read
   as unfinished — a compact phone CTA anchors the header the same way
   the hero and .hzg-cases__cta banner already do elsewhere. */
.heizung-art-page .hzg-cases__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: end;
}

.heizung-art-page .hzg-cases__head-phone {
  flex: 0 0 auto;
  white-space: nowrap;
}

.heizung-art-page .hzg-cases__case {
  position: relative;
  display: grid;
  grid-template-areas: "media copy";
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.92fr);
  gap: clamp(58px, 8vw, 118px);
  align-items: center;
  padding-top: clamp(64px, 7vw, 94px);
  border-top: 1px solid var(--hzg-line);
}

.heizung-art-page .hzg-cases__case + .hzg-cases__case {
  margin-top: clamp(90px, 9vw, 138px);
}

.heizung-art-page .hzg-cases__case--reverse {
  grid-template-areas: "copy media";
  grid-template-columns: minmax(430px, 0.92fr) minmax(0, 1.08fr);
}

.heizung-art-page .hzg-cases__case > figure {
  position: relative;
  z-index: 1;
  grid-area: media;
  aspect-ratio: 1.18;
  overflow: hidden;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(7, 29, 51, 0.16);
}

.heizung-art-page .hzg-cases__case > figure img {
  height: 100%;
  object-fit: cover;
}

.heizung-art-page .hzg-cases__case > figure figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 9px 15px;
  border-radius: 5px;
  color: var(--hzg-white);
  background: rgba(7, 29, 51, 0.92);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Echter Vorher/Nachher-Vergleich mit Zieh-Regler: Beide Fotos sind ein
   einziges Composite (linke Hälfte = vorher, rechte Hälfte = nachher, in
   einer Datei). Der Rahmen bekommt exakt das Seitenverhältnis EINER
   Hälfte (1672:1880 der 3344x1880-Quelle), damit object-position:left/
   right beim object-fit:cover genau die passende Hälfte zeigt, ohne dass
   die andere Seite mit reinragt. Kein zweites Bild nötig, keine
   Fälschung — siehe .hzg-cases__case > figure für den Kontrast zum Fall
   auf bad-sanierung, wo dasselbe Bild fälschlich zweimal gezeigt wird.
   Die Breite/Höhe des "Vorher"-Bildes wird per JS fix in Pixeln gesetzt
   (auf die Größe von .hzg-cases__ba-compare), statt mit cqw/cqh-Einheiten
   zu arbeiten — die haben sich beim Testen nicht auf den äußeren
   Rahmen, sondern auf den schmaleren Wrapper selbst bezogen und damit
   das Bild gestaucht statt nur beschnitten. Pixelwerte sind hier
   zuverlässiger als die Container-Query-Einheiten. */
.heizung-art-page .hzg-cases__case > figure.hzg-cases__ba {
  aspect-ratio: 1672 / 1880;
}

.heizung-art-page .hzg-cases__ba-compare {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: ew-resize;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}

.heizung-art-page .hzg-cases__ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  pointer-events: none;
}

.heizung-art-page .hzg-cases__ba-before-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 50%;
  overflow: hidden;
}

.heizung-art-page .hzg-cases__ba-before-wrap .hzg-cases__ba-img {
  right: auto;
  bottom: auto;
  max-width: none;
  object-position: left center;
}

.heizung-art-page .hzg-cases__ba-handle {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 3px;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  transform: translateX(-50%);
  pointer-events: none;
}

.heizung-art-page .hzg-cases__ba-handle-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 2px solid var(--hzg-white);
  border-radius: 50%;
  color: var(--hzg-ink);
  background: var(--hzg-white);
  box-shadow: 0 8px 20px rgba(7, 29, 51, 0.32);
  transform: translate(-50%, -50%);
}

.heizung-art-page .hzg-cases__ba-handle-grip .lucide {
  width: 20px;
}

.heizung-art-page .hzg-cases__ba-tag {
  position: absolute;
  top: 18px;
  z-index: 2;
  padding: 9px 15px;
  border-radius: 5px;
  color: var(--hzg-white);
  background: rgba(7, 29, 51, 0.92);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.heizung-art-page .hzg-cases__ba-tag--before {
  left: 18px;
}

.heizung-art-page .hzg-cases__ba-tag--after {
  right: 18px;
  background: var(--hzg-blue);
}

.heizung-art-page .hzg-cases__case > div {
  position: relative;
  z-index: 1;
  grid-area: copy;
}

/* No max-width — see .hzg-welcome__copy h2 above for why. */
.heizung-art-page .hzg-cases__case h3 {
  margin: 17px 0 27px;
  font-size: clamp(2.6rem, 3.6vw, 3.75rem);
  line-height: 1.03;
}

.heizung-art-page .hzg-cases__case h3 span {
  color: var(--hzg-blue);
}

.heizung-art-page .hzg-cases__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.heizung-art-page .hzg-cases__steps li {
  flex: 1 1 190px;
  padding: 16px 18px;
  border-radius: 10px;
  color: var(--hzg-muted);
  background: var(--hzg-paper);
  font-size: 0.76rem;
  line-height: 1.55;
  transition: background-color 0.2s ease;
}

.heizung-art-page .hzg-cases__steps li:hover {
  background: #eef2f5;
}

.heizung-art-page .hzg-cases__steps b {
  display: block;
  margin-bottom: 4px;
  color: var(--hzg-pink);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Echtes Kundenzitat zum jeweiligen Fall — ersetzt die frühere eigene
   Kundenstimmen-Section mit Karussell, die sich in keiner Anordnung
   richtig anfühlte. Direkt am passenden Fall ist das Zitat konkreter
   Beleg statt loser Behauptung. */
.heizung-art-page .hzg-cases__quote {
  max-width: 46ch;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--hzg-line);
}

.heizung-art-page .hzg-cases__quote p {
  margin: 0 0 8px;
  color: var(--hzg-ink);
  font-family: var(--eco-display);
  font-size: 1.08rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.45;
}

.heizung-art-page .hzg-cases__quote footer {
  color: var(--hzg-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.heizung-art-page .hzg-cases__quote footer span {
  color: #93a4ac;
  font-weight: 600;
}

.heizung-art-page .hzg-cases__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(70px, 7vw, 108px);
  padding-top: clamp(40px, 4vw, 56px);
  border-top: 1px solid var(--hzg-line);
}

.heizung-art-page .hzg-cases__cta p {
  max-width: 46ch;
  margin: 0;
  color: var(--hzg-muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

.heizung-art-page .hzg-cases__cta strong {
  color: var(--hzg-ink);
}

.heizung-art-page .hzg-cases__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
}

.heizung-art-page .hzg-phone-link--dark {
  color: var(--hzg-ink);
}

.heizung-art-page .hzg-phone-link--dark > .lucide {
  color: var(--hzg-blue);
}

.heizung-art-page .hzg-phone-link--dark small {
  color: var(--hzg-muted);
}

/* Vertrauen: offen nachlesbar — dunkles Karten-Raster statt Textzeilen */
.heizung-art-page .hzg-resources {
  position: relative;
  overflow: hidden;
  padding: clamp(108px, 9vw, 148px) 0;
  color: var(--hzg-white);
  background: var(--hzg-ink);
}

/* Weiches Leuchten statt Punktraster: Auf dunklem Grund liest sich ein
   diffuser Glanzfleck als Licht/Tiefe, ein Punktraster hätte hier kaum
   Kontrast gehabt. Bewusst anderer Kniff als bei den hellen Sections,
   damit nicht jede Section denselben Trick wiederholt. */
.heizung-art-page .hzg-resources__glow {
  position: absolute;
  z-index: 0;
  top: -10%;
  right: -8%;
  width: clamp(360px, 38vw, 560px);
  height: clamp(360px, 38vw, 560px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(130, 201, 237, 0.16) 0%, rgba(130, 201, 237, 0.05) 45%, transparent 72%);
}

.heizung-art-page .hzg-resources > .eco-container {
  position: relative;
  z-index: 1;
}

/* Same invisible-headline bug as .hzg-trust-band: the global
   ".hzg-main :is(h1,h2,h3){color:var(--hzg-ink)}" rule left the
   headline the exact same colour as this section's own dark
   background. */
.heizung-art-page .hzg-resources .hzg-section-head h2 {
  color: var(--hzg-white);
}

.heizung-art-page .hzg-resources .hzg-section-head h2 span {
  color: var(--hzg-blue-light);
}

.heizung-art-page .hzg-resources .hzg-section-head > p {
  color: rgba(255, 255, 255, 0.66);
}

.heizung-art-page .hzg-resources__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.heizung-art-page .hzg-resources__grid a {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: clamp(28px, 3vw, 36px) clamp(22px, 2.6vw, 28px) clamp(52px, 5vw, 64px);
  color: var(--hzg-white);
  background: var(--hzg-ink);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.heizung-art-page .hzg-resources__grid a:hover {
  z-index: 2;
  background: #0c2b48;
  transform: translateY(-4px);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.35);
}

.heizung-art-page .hzg-resources__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border: 1.5px solid rgba(130, 201, 237, 0.4);
  border-radius: 50%;
  color: var(--hzg-blue-light);
}

.heizung-art-page .hzg-resources__icon .lucide {
  width: 20px;
  height: 20px;
}

.heizung-art-page .hzg-resources__grid strong {
  font-size: 0.92rem;
}

.heizung-art-page .hzg-resources__grid small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  line-height: 1.5;
}

.heizung-art-page .hzg-resources__arrow {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 18px;
  height: 18px;
  color: var(--hzg-blue-light);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.heizung-art-page .hzg-resources__grid a:hover .hzg-resources__arrow {
  opacity: 1;
  transform: translate(0, 0);
}

/* FAQ — Intro bleibt beim Scrollen stehen, Fragen laufen daneben durch,
   statt wie zuvor ein zentrierter Kopf über einem 2-Spalten-Raster. */
.heizung-art-page .hzg-faq {
  padding: clamp(112px, 10vw, 158px) 0 clamp(88px, 8vw, 120px);
  background: var(--hzg-paper);
}

.heizung-art-page .hzg-faq__layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.55fr);
  gap: clamp(56px, 7vw, 100px);
  align-items: start;
}

.heizung-art-page .hzg-faq__intro {
  position: sticky;
  top: calc(var(--header-total, 0px) + 32px);
}

.heizung-art-page .hzg-faq__intro h2 {
  margin: 15px 0 0;
  font-size: clamp(2.65rem, 3.6vw, 3.75rem);
  line-height: 0.96;
}

.heizung-art-page .hzg-faq__intro > p {
  max-width: 42ch;
  margin: 22px 0 0;
  color: var(--hzg-muted);
  font-size: 0.94rem;
  line-height: 1.7;
}

.heizung-art-page .hzg-faq__list {
  display: block;
  max-width: none;
  margin: 0;
}

.heizung-art-page .hzg-faq__list details,
.heizung-art-page .hzg-faq__list details[open] {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--hzg-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.heizung-art-page .hzg-faq__list details[open] {
  border-top-color: var(--hzg-blue);
}

.heizung-art-page .hzg-faq__list summary {
  display: flex;
  min-height: 74px;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 17px 0;
  color: var(--hzg-ink);
  font-size: 0.84rem;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.heizung-art-page .hzg-faq__list summary::-webkit-details-marker {
  display: none;
}

.heizung-art-page .hzg-faq__list summary .lucide {
  width: 18px;
  flex: 0 0 auto;
  color: var(--hzg-blue);
}

.heizung-art-page .hzg-faq__list details[open] summary .lucide {
  transform: rotate(45deg);
}

.heizung-art-page .hzg-faq__list details p {
  max-width: 78ch;
  margin: 0;
  padding: 0 0 25px;
  color: var(--hzg-muted);
  font-size: 0.86rem;
  line-height: 1.72;
}

.heizung-art-page .hzg-regions {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  max-width: 980px;
  margin: clamp(66px, 7vw, 96px) auto 0;
  padding: 27px 0;
  border-top: 1px solid var(--hzg-line);
  border-bottom: 1px solid var(--hzg-line);
}

.heizung-art-page .hzg-regions span {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--hzg-ink);
  font-size: 0.85rem;
  font-weight: 850;
}

.heizung-art-page .hzg-regions .lucide {
  width: 18px;
  color: var(--hzg-blue);
}

.heizung-art-page .hzg-regions p {
  margin: 0;
  color: var(--hzg-muted);
  line-height: 1.7;
}

@media (max-width: 1199.98px) {
  .heizung-art-page .hzg-cases__case,
  .heizung-art-page .hzg-cases__case--reverse {
    gap: 58px;
  }

  .heizung-art-page .hzg-resources__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .heizung-art-page .hzg-hero {
    min-height: 0;
  }

  .heizung-art-page .hzg-hero__form {
    max-width: 720px;
  }

  .heizung-art-page .hzg-welcome__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .heizung-art-page .hzg-welcome__media {
    aspect-ratio: 16 / 10;
  }

  .heizung-art-page .hzg-welcome__badge {
    display: none;
  }

  .heizung-art-page .hzg-service-nav__inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding-block: 18px;
  }

  .heizung-art-page .hzg-service-nav__links {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none;
  }

  .heizung-art-page .hzg-service-nav__links::-webkit-scrollbar {
    display: none;
  }

  .heizung-art-page .hzg-services__navigation {
    grid-template-columns: 100px minmax(130px, 1fr) auto auto;
    gap: 20px;
  }

  .heizung-art-page .hzg-trust-band__checkpoints {
    grid-template-columns: minmax(0, 1fr);
  }

  .heizung-art-page .hzg-cases__case,
  .heizung-art-page .hzg-cases__case--reverse {
    grid-template-areas:
      "media"
      "copy";
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
  }

  .heizung-art-page .hzg-cases__case > div {
    max-width: 720px;
  }

  .heizung-art-page .hzg-faq__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .heizung-art-page .hzg-faq__intro {
    position: static;
    max-width: 760px;
    margin-bottom: 46px;
  }

}

@media (max-width: 767.98px) {
  .heizung-art-page .hzg-section-head h2 {
    font-size: clamp(3rem, 10vw, 4rem);
  }

  .heizung-art-page .hzg-hero {
    padding: 64px 0 76px;
    background-position: 61% center;
  }

  .heizung-art-page .hzg-hero__copy h1 {
    font-size: clamp(3.3rem, 13vw, 4.8rem);
  }

  /* 16px statt 0.77rem (~12.3px): unter 16px zoomt iOS Safari beim
     Fokussieren automatisch in das Feld hinein — ein Klassiker unter
     den Mobile-Formular-Fehlern. */
  .heizung-art-page .hzg-form :is(input, select, textarea) {
    font-size: 16px;
  }

  /* Tippflächen der Schnellzugriff-Links waren nur ~19px hoch, weit
     unter der empfohlenen Mindestgröße von 44px für Touch-Ziele. */
  .heizung-art-page .hzg-service-nav__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
  }

  /* Fixierte Kontakt-Leiste: Anruf/Anfrage bleiben beim Scrollen immer
     erreichbar, ohne zurück zum Hero zu müssen — Standard bei gut
     gemachten mobilen Handwerker-Seiten. Nur auf Mobile aktiv. */
  .heizung-art-page .hzg-mobile-cta {
    position: fixed;
    z-index: 45;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    padding-bottom: env(safe-area-inset-bottom, 0);
    border-top: 1px solid var(--hzg-line);
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 -12px 30px rgba(7, 29, 51, 0.14);
  }

  .heizung-art-page .hzg-mobile-cta a {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    color: var(--hzg-ink);
    font-size: 0.78rem;
    font-weight: 850;
    text-decoration: none;
  }

  .heizung-art-page .hzg-mobile-cta .lucide {
    width: 18px;
    color: var(--hzg-blue);
  }

  .heizung-art-page .hzg-mobile-cta__form {
    color: var(--hzg-white);
    background: var(--hzg-blue);
  }

  .heizung-art-page .hzg-mobile-cta__form .lucide {
    color: var(--hzg-blue-light);
  }

  .heizung-art-page .eco-footer {
    padding-bottom: 58px;
  }

  /* Bewusst unterschiedliche statt einer stur wiederholten Zahl – auf
     Mobile sonst ein monotoner, immer gleicher Rhythmus beim Scrollen. */
  .heizung-art-page .hzg-welcome {
    padding: 72px 0 56px;
  }

  .heizung-art-page .hzg-trust-band {
    padding-bottom: 88px;
  }

  .heizung-art-page .hzg-cases {
    padding: 80px 0 64px;
  }

  .heizung-art-page .hzg-services {
    padding: 76px 0 68px;
  }

  .heizung-art-page .hzg-resources {
    padding: 84px 0;
  }

  .heizung-art-page .hzg-faq {
    padding: 92px 0 76px;
  }

  .heizung-art-page .hzg-services__proof {
    grid-template-columns: minmax(0, 1fr);
  }

  .heizung-art-page .hzg-services__proof > span + span {
    border-top: 1px solid var(--hzg-line);
    border-left: 0;
  }

  .heizung-art-page .hzg-services__viewport {
    padding-inline: 12px;
  }

  .heizung-art-page .heizung-service-card {
    min-height: 500px;
  }

  .heizung-art-page .hzg-cases__case h3 {
    font-size: clamp(3rem, 10vw, 4rem);
  }

  .heizung-art-page .hzg-cases__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .heizung-art-page .hzg-cases__case > figure {
    aspect-ratio: 4 / 3;
  }

  .heizung-art-page .hzg-trust-band__media {
    height: clamp(440px, 72vw, 560px);
  }

  .heizung-art-page .hzg-resources__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .heizung-art-page .hzg-regions {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

@media (max-width: 575.98px) {
  .heizung-art-page .hzg-eyebrow,
  .heizung-art-page .hzg-chapter,
  .heizung-art-page .hzg-kicker {
    font-size: 0.61rem;
  }

  .heizung-art-page .hzg-form {
    padding: 24px 18px;
    border-radius: 13px;
  }

  .heizung-art-page .hzg-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .heizung-art-page .hzg-button {
    width: 100%;
  }

  .heizung-art-page .hzg-service-nav__inner {
    padding-inline: 0;
  }

  .heizung-art-page .hzg-section-head {
    margin-bottom: 48px;
  }

  .heizung-art-page .hzg-section-head--center {
    text-align: left;
  }

  .heizung-art-page .hzg-section-head--center .hzg-chapter {
    justify-content: flex-start;
  }

  .heizung-art-page .hzg-section-head--center > p {
    margin-left: 0;
  }

  .heizung-art-page .hzg-services .hzg-section-head {
    margin-bottom: 42px;
  }

  .heizung-art-page .hzg-services__proof {
    margin-top: 30px;
  }

  .heizung-art-page .hzg-services__proof > span {
    padding: 16px 0;
  }

  .heizung-art-page .heizung-service-card {
    min-height: 478px;
    grid-template-rows: minmax(0, 1.08fr) minmax(210px, 0.92fr);
  }

  .heizung-art-page .hzg-services__navigation {
    grid-template-columns: auto minmax(60px, 1fr) auto;
    gap: 14px;
    padding: 18px 0;
  }

  .heizung-art-page .service-category-grid__hint {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
  }

  .heizung-art-page .service-category-grid__controls button {
    width: 52px;
    height: 52px;
  }

  .heizung-art-page .hzg-trust-band__media {
    height: clamp(380px, 100vw, 460px);
  }

  /* Auf schmalen Screens ist der Kopftext (inkl. Zitat) so hoch, dass
     kein sicherer Puffer für den Foto-Overlap-Trick bleibt, ohne die
     Karten über den Zitat-Text zu legen. Deshalb hier kein negativer
     Versatz — normaler Abstand statt erzwungener Überlappung. */
  .heizung-art-page .hzg-trust-band__head {
    padding-bottom: 48px;
  }

  .heizung-art-page .hzg-trust-band__checkpoints {
    margin-top: 0;
  }

  .heizung-art-page .hzg-cases__case + .hzg-cases__case {
    margin-top: 86px;
  }

  .heizung-art-page .hzg-cases__steps li {
    flex-basis: 100%;
  }

  .heizung-art-page .hzg-faq__list summary {
    min-height: 68px;
    font-size: 0.79rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .heizung-art-page .hzg-button:hover {
    transform: none;
  }

  .heizung-art-page :is(.hzg-button, .heizung-service-card, .service-category-grid__controls button) {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .heizung-art-page *,
  .heizung-art-page *::before,
  .heizung-art-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}