/* ==========================================================================
   Gerhard GmbH – Komponenten auf Contao-6-Core-Elementen (Klassen aus dem Backend)
   Regeln: docs/styleguide.md, Abschnitt 8
   ========================================================================== */

/* ---------- Buttons (Klasse am Wrapper, gestaltet wird der Link) ---------- */
.btn--primary a,
.btn--secondary a,
.contact-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-block-size: 3rem;
  padding: var(--space-xs) var(--space-m);
  font: var(--weight-head) var(--step-0) / 1.1 var(--font-head);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.btn--primary a,
.contact-form button[type="submit"] {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border: var(--border) solid var(--color-accent);
}
.btn--primary a:hover,
.contact-form button[type="submit"]:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-accent-text);
}
.btn--secondary a {
  background: transparent;
  color: var(--color-text);
  border: var(--border) solid var(--color-text);
}
.btn--secondary a:hover { background: var(--color-text); color: var(--color-bg); }

/* ---------- Motiv A: Rohr-Unterstreichung an der H1 ---------- */
.hero__title::after,
.page-hero__title::after,
.section--legal h1::after,
.section--error h1::after,
.project .layout_full > h1::after {
  content: "";
  display: block;
  inline-size: var(--motiv-underline-w);
  block-size: var(--motiv-underline-h);
  margin-top: var(--space-s);
  background-color: var(--color-motiv);
  -webkit-mask: var(--motiv-rohr-unterstreichung) no-repeat left center / contain;
          mask: var(--motiv-rohr-unterstreichung) no-repeat left center / contain;
}

/* ---------- Motiv A: Rohr-Trenner vor Abschnittsüberschriften (Leistungen, Referenzen) ---------- */
.section:has(.card-grid--3, .news-grid) > .section__title::before {
  content: "";
  display: block;
  inline-size: var(--motiv-trenner-w);
  block-size: var(--motiv-trenner-h);
  margin-bottom: var(--space-s);
  background-color: var(--color-motiv);
  -webkit-mask: var(--motiv-rohr-trenner) no-repeat left center / contain;
          mask: var(--motiv-rohr-trenner) no-repeat left center / contain;
}

/* ==========================================================================
   Hero (Startseite, Wärmepumpe): Foto mit überlappender Textkarte
   ========================================================================== */
.hero {
  max-width: var(--container-wide);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}
.hero__media { margin: 0; order: -1; }
.hero__media figure,
.hero__media picture { display: block; }
.hero__media img {
  inline-size: 100%;
  aspect-ratio: var(--ratio-hero-mobile);
  max-block-size: 30svh;              /* mobil: H1 und Haupt-Button bleiben über dem Fold */
  object-fit: cover;
  object-position: center 80%;
}
.hero__content {
  position: relative;
  z-index: 1;
  margin: calc(var(--space-l) * -1) var(--gutter) 0;
  padding: var(--space-l) var(--space-m) var(--space-m);
  background: var(--color-bg);
  box-shadow: var(--shadow-raised);
}
.hero__content > * + * { margin-top: 0; }
.hero__title { font-size: var(--step-5); margin-bottom: 0; }
/* Lead = Antwortblock: gleiche Lesegröße wie .page-hero__lead (eine Lead-Regel für alle Seiten) */
.hero__lead {
  margin-block: var(--space-s) var(--space-m);
  color: var(--color-text-muted);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}
.hero__lead p { max-width: var(--measure); }
.hero__alt { margin-top: var(--space-xs); font-size: var(--step-0); }
.hero__alt p { margin: 0; }
/* Smartphone: Haupt-Button und Telefon direkt unter die H1, der lange Antwortblock folgt darunter
   (nur visuelle Reihenfolge; im DOM bleibt der Lead vor dem Button) */
@media (max-width: 39.999em) {
  .hero__content { display: flex; flex-direction: column; padding-inline: var(--space-s); }
  .hero__cta { order: 1; margin-top: var(--space-m) !important; }
  .hero__alt { order: 2; }
  .hero__lead { order: 3; margin-block: var(--space-m) 0; }
}

/* Desktop: Foto rechts (Spalten 6–12), Karte links überlappt das Foto nur um zwei Spalten –
   das Motiv bleibt sichtbar, die Karte ist breit genug für eine dreizeilige H1 */
@media (min-width: 64em) {
  .hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    max-width: none;
    background: var(--color-surface);   /* geht nahtlos in die Vertrauenszeile über */
  }
  .hero > * { max-width: none; }
  .hero__media { grid-column: 6 / -1; grid-row: 1; order: 0; align-self: stretch; }
  .hero__media figure,
  .hero__media picture { block-size: 100%; }   /* Foto füllt die ganze Hero-Höhe, auch bei langer Karte */
  .hero__media img {
    aspect-ratio: auto;
    max-block-size: none;
    block-size: 100%;
    min-block-size: clamp(34rem, calc(100svh - var(--header-height) - var(--space-l)), 48rem);
    object-position: 85% 85%;
  }
  .hero__content {
    grid-column: 1 / 8;
    grid-row: 1;
    align-self: center;
    max-width: 52rem;
    margin: var(--space-l) 0 var(--space-l) max(var(--gutter), calc((100vw - var(--container)) / 2));
    padding: var(--space-xl) var(--space-xl) var(--space-l);
  }
  .hero + .section--trust { padding-top: 0; }   /* gleiche Fläche wie der Hero: der Kartenabstand genügt */
  .hero + .section--trust > * { padding-left: 0; }
}

/* ==========================================================================
   Seitenkopf der Unterseiten
   ========================================================================== */
.page-hero {
  background: var(--color-surface);
  padding: var(--space-xl) var(--gutter);
}
.page-hero > * { max-width: var(--container); margin-inline: auto; }
.page-hero__content > * + * { margin-top: 0; }
.page-hero__title { font-size: var(--step-4); margin-bottom: 0; }
.page-hero__lead {
  margin-top: var(--space-s);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
}
.page-hero__lead p { max-width: var(--measure); }
.page-hero__media { margin-top: var(--space-l); }
.page-hero__media img { inline-size: 100%; aspect-ratio: var(--ratio-tile); object-fit: cover; }

@media (min-width: 64em) {
  .page-hero:has(.page-hero__media) {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-xl);
    align-items: center;
    padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  }
  .page-hero:has(.page-hero__media) > * { max-width: none; margin: 0; }
  .page-hero__media img { aspect-ratio: var(--ratio-split); }
}
.page-hero--plain { background: var(--color-bg); padding-bottom: var(--space-l); }
.page-hero--plain + .section:not([class*="section--"]) { padding-top: 0; }

/* ==========================================================================
   Vertrauenszeile
   ========================================================================== */
.trust-strip ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-l);
}
.trust-strip li {
  position: relative;
  max-width: none;
  margin: 0;
  padding-left: calc(var(--motiv-bullet-w) + var(--space-xs));
  font-weight: var(--weight-semibold);
}
.trust-strip li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  inline-size: var(--motiv-bullet-w);
  block-size: var(--motiv-bullet-h);
  background-color: var(--color-motiv);
  -webkit-mask: var(--motiv-flammenzunge) no-repeat center / contain;
          mask: var(--motiv-flammenzunge) no-repeat center / contain;
}

/* ==========================================================================
   Karten-Raster und Karten
   ========================================================================== */
.card-grid {
  display: grid;
  gap: var(--space-l) var(--grid-gap);
  counter-reset: card;
}
.card-grid > * { margin: 0; }
@media (min-width: 40em) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-bottom: var(--border-strong) solid var(--color-line-strong);
  border-right: var(--border-strong) solid transparent;
  transition: border-color var(--duration) var(--ease);
}
.section--muted .card { background: var(--color-bg); }
.card > figure { order: -1; margin: 0; overflow: hidden; }
.card > figure img { inline-size: 100%; aspect-ratio: var(--ratio-tile); object-fit: cover; }
.card > h3 {
  margin: 0;
  padding: var(--space-m) var(--space-m) 0;
  font-size: var(--step-2);
}
.card > .rte {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-xs) var(--space-m) var(--space-m);
}
.card > .rte p { margin-bottom: 0; }
.card__more { margin-top: auto !important; padding-top: var(--space-s); }
.card__more a {
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.card__more a::after {
  content: "";
  display: inline-block;
  inline-size: 0.5em;
  block-size: 0.5em;
  margin-left: 0.35em;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: translateY(-0.05em) rotate(45deg);
}
.card__more a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.card:hover,
.card:focus-within { border-right-color: var(--color-line-strong); }
.card:hover .card__more a { text-decoration: underline; }

/* Nummern 01–09 im G-Rahmen (Motivtyp A) – nur im Leistungsgitter */
.card-grid--3 > .card { counter-increment: card; }
.card-grid--3 > .card > h3 { position: relative; padding-left: calc(var(--space-m) + var(--motiv-frame) + var(--space-s)); min-block-size: calc(var(--motiv-frame) + var(--space-m)); display: flex; align-items: center; }
.card-grid--3 > .card > h3::before {
  content: counter(card, decimal-leading-zero);
  position: absolute;
  left: var(--space-m);
  top: var(--space-m);
  inline-size: var(--motiv-frame);
  block-size: calc(var(--motiv-frame) * 0.5);   /* obere Kammer des G (y 6–24 von 48): über dem Innenbalken */
  padding-top: calc(var(--motiv-frame) * 0.125);
  display: grid;
  place-items: center;
  font: var(--weight-head) var(--step-0) / 1 var(--font-head);
  letter-spacing: var(--tracking-head);
}
.card-grid--3 > .card > h3::after {
  content: "";
  position: absolute;
  left: var(--space-m);
  top: var(--space-m);
  inline-size: var(--motiv-frame);
  block-size: var(--motiv-frame);
  background-color: var(--color-motiv);
  -webkit-mask: var(--motiv-g-rahmen) no-repeat center / contain;
          mask: var(--motiv-g-rahmen) no-repeat center / contain;
}

/* ==========================================================================
   Text mit Bild (Split) und zweispaltige Gruppen
   ========================================================================== */
.split > figure { margin-top: var(--space-l); }
.split > figure img { inline-size: 100%; aspect-ratio: var(--ratio-split); object-fit: cover; }
@media (min-width: 64em) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-xl);
    align-items: start;
  }
  .split > h2 { grid-column: 1; grid-row: 1; }
  .split > .rte { grid-column: 1; grid-row: 2; }
  .split > figure { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
  .split > figure img[width][height]:not([src*="whg"]) { aspect-ratio: var(--ratio-split); }
}
/* Urkunde/Logo im Split nicht beschneiden */
.split > figure img[src*="whg"] { aspect-ratio: auto; object-fit: contain; max-inline-size: 16rem; border: var(--border-thin) solid var(--color-line); }

.split-grid { display: grid; gap: var(--space-l) var(--space-xl); }
.split-grid > * { margin: 0; }
@media (min-width: 64em) { .split-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split-grid--timeline .timeline__image img { inline-size: 100%; aspect-ratio: var(--ratio-split); object-fit: cover; }

/* ==========================================================================
   Listen: Häkchen-/Flammenliste, Schritte, Zeitleiste, Linkliste
   ========================================================================== */
.check-list > h2,
.check-list > h3 { margin-bottom: var(--space-m); }
@media (min-width: 64em) {
  .section > .check-list ul { columns: 2; column-gap: var(--space-xl); }
  .section > .check-list li { break-inside: avoid; }
}

.steps ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: var(--space-l) var(--grid-gap);
}
@media (min-width: 40em) { .steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .steps ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps ol:has(> li:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.steps li {
  position: relative;
  counter-increment: step;
  margin: 0;
  padding-top: calc(var(--motiv-frame) + var(--space-s));
  color: var(--color-text-muted);
}
.steps li strong {
  display: block;
  margin-bottom: var(--space-3xs);
  font-family: var(--font-head);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--color-heading);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  inline-size: var(--motiv-frame);
  block-size: calc(var(--motiv-frame) * 0.5);   /* obere Kammer des G (y 6–24 von 48): über dem Innenbalken */
  padding-top: calc(var(--motiv-frame) * 0.125);
  display: grid;
  place-items: center;
  font: var(--weight-head) var(--step-0) / 1 var(--font-head);
  color: var(--color-heading);
}
.steps li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  inline-size: var(--motiv-frame);
  block-size: var(--motiv-frame);
  background-color: var(--color-motiv);
  -webkit-mask: var(--motiv-g-rahmen) no-repeat center / contain;
          mask: var(--motiv-g-rahmen) no-repeat center / contain;
}

.timeline ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-l);
  border-left: var(--border-strong) solid var(--color-line-strong);
}
.timeline li { position: relative; margin-bottom: var(--space-m); }
.timeline li:last-child { margin-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: calc(var(--space-l) * -1);
  top: 0.8em;
  inline-size: var(--space-s);
  block-size: var(--border-strong);
  background: var(--color-line-strong);
}
.timeline li strong {
  display: block;
  font: var(--weight-head) var(--step-2) / var(--leading-snug) var(--font-head);
  color: var(--color-heading);
}

.link-list ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-l); }
.link-list li { margin: 0; font-weight: var(--weight-semibold); }

/* ==========================================================================
   FAQ (Core-Akkordeon, handorgel)
   ========================================================================== */
.faq > h2 { margin-bottom: var(--space-l); }
.faq .handorgel__header {
  margin: 0;
  max-width: none;
  border-top: var(--border) solid var(--color-line);
  background: transparent;
}
.faq .handorgel__header__button {
  position: relative;
  inline-size: 100%;
  margin: 0;
  padding: var(--space-m) calc(var(--space-l) + var(--space-s)) var(--space-m) 0;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--color-heading);
  font: var(--weight-head) var(--step-2) / var(--leading-snug) var(--font-head);
  cursor: pointer;
}
.faq .handorgel__header__button:hover { color: var(--color-link); }
.faq .handorgel__header__button:focus { background: transparent; }
.faq .handorgel__header__button::before,
.faq .handorgel__header__button::after {
  content: "";
  position: absolute;
  right: var(--space-2xs);
  top: 50%;
  inline-size: 1rem;
  block-size: 2px;
  background: var(--color-text);
  transition: transform var(--duration) var(--ease);
}
.faq .handorgel__header__button::after { transform: rotate(90deg); }
.faq .handorgel__header--open .handorgel__header__button::after { transform: rotate(0deg); }
.faq .handorgel__content { background: transparent; border-top: 0; }
.faq .handorgel__content:last-child { border-bottom: var(--border) solid var(--color-line); }
.faq .handorgel__content__inner { padding: 0 0 var(--space-m); max-width: var(--measure); }
.faq .handorgel__content__inner .content-text + .content-text { margin-top: var(--stack); }

/* ==========================================================================
   Galerie (Fotos) und Logo-Leiste
   ========================================================================== */
.photo-grid > h2 { margin-bottom: var(--space-m); }
.photo-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 40em) { .photo-grid ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .photo-grid ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64em) { .photo-grid.content-gallery--cols-5 ul { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.photo-grid li { margin: 0; max-width: none; }
.photo-grid figure { margin: 0; overflow: hidden; }
.photo-grid img {
  inline-size: 100%;
  aspect-ratio: var(--ratio-gallery);
  object-fit: cover;
  transition: opacity var(--duration) var(--ease);
}
.photo-grid a:hover img { opacity: 0.88; }

.logo-strip > h3 { margin-bottom: var(--space-m); font-size: var(--step-1); }
.logo-strip ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  align-items: center;
}
.logo-strip li { margin: 0; }
.logo-strip img { block-size: 4.5rem; inline-size: auto; object-fit: contain; }

/* ==========================================================================
   Referenzen (Nachrichtenliste news_latest) und Projekt-Leser (news_full)
   ========================================================================== */
.news-grid {
  display: grid;
  gap: var(--space-l) var(--grid-gap);
}
@media (min-width: 40em) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.news-grid > .layout_latest {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-bottom: var(--border-strong) solid var(--color-line-strong);
  border-right: var(--border-strong) solid transparent;
  transition: border-color var(--duration) var(--ease);
}
.section--muted .news-grid > .layout_latest { background: var(--color-bg); }
.news-grid > .layout_latest:hover,
.news-grid > .layout_latest:focus-within { border-right-color: var(--color-line-strong); }
.news-grid .info { display: none; } /* kein Datum, kein Autor */
.news-grid .image_container { order: -1; margin: 0; overflow: hidden; }
.news-grid .image_container img { inline-size: 100%; aspect-ratio: var(--ratio-tile); object-fit: cover; }
.news-grid .layout_latest > h2 {
  margin: 0;
  padding: var(--space-m) var(--space-m) 0;
  font-size: var(--step-2);
  line-height: var(--leading-snug);
}
.news-grid .layout_latest > h2 a { color: var(--color-heading); text-decoration: none; }
.news-grid .layout_latest > h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.news-grid .layout_latest:hover > h2 a { color: var(--color-link); }
.news-grid .ce_text { padding: var(--space-xs) var(--space-m) 0; color: var(--color-text-muted); }
.news-grid .ce_text p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-grid .more { margin: auto 0 0; padding: var(--space-s) var(--space-m) var(--space-m); }
.news-grid .more a { font-weight: var(--weight-semibold); text-decoration: none; }
.news-grid .more a::after {
  content: "";
  display: inline-block;
  inline-size: 0.5em;
  block-size: 0.5em;
  margin-left: 0.35em;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: translateY(-0.05em) rotate(45deg);
}
.news-grid .empty { color: var(--color-text-muted); }

.project { max-width: var(--container) !important; }
.project .layout_full > * { max-width: var(--container-narrow); }
.project .layout_full > * + * { margin-top: var(--space-l); }
.project .layout_full > h1 { font-size: var(--step-4); margin-bottom: 0; }
.project .info { display: none; }
.project .project__image { max-width: none; }
.project .project__image img { inline-size: 100%; aspect-ratio: var(--ratio-article); object-fit: cover; }
.project .photo-grid { max-width: none; }
.project .back { margin-top: var(--space-xl); }
.project .back a { font-weight: var(--weight-semibold); }

/* ==========================================================================
   Abschluss-Band
   ========================================================================== */
.cta-band { display: grid; gap: var(--space-m) var(--space-l); }
.cta-band > * { margin: 0; }
.cta-band h2 { color: var(--color-on-dark); margin: 0; }
.cta-band__text { color: var(--color-on-dark-muted); }
.cta-band a:not(.btn--primary a) { color: var(--color-link-on-dark); }
.cta-band a:not(.btn--primary a):hover { color: var(--color-on-dark); }
.cta-band :focus-visible { outline-color: var(--color-focus-on-dark); }
@media (min-width: 64em) {
  .cta-band {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title btn" "text btn";
    align-items: center;
    column-gap: var(--space-xl);
  }
  .cta-band__title { grid-area: title; }
  .cta-band__text { grid-area: text; }
  .cta-band__btn { grid-area: btn; }
}

/* ==========================================================================
   Kontakt, Formular, Notdienst
   ========================================================================== */
.contact-grid { display: grid; gap: var(--space-xl); }
.contact-grid > * { margin: 0; }
@media (min-width: 64em) {
  .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .contact-grid > .contact-card { position: sticky; top: calc(var(--header-height) + var(--space-m)); }
}
.contact-card {
  background: var(--color-surface);
  padding: var(--space-l);
  border-top: var(--border-strong) solid var(--color-line-strong);
}
.section--muted .contact-card { background: var(--color-bg); }
.contact-card > h2 { font-size: var(--step-2); }
.contact-card a[href^="tel:"] { font-weight: var(--weight-semibold); }
.contact-form-wrap > * + * { margin-top: var(--space-s); }

.contact-form .formbody { display: grid; gap: var(--space-s); }
.contact-form .widget { display: grid; gap: var(--space-3xs); }
.contact-form label,
.contact-form legend { font-weight: var(--weight-semibold); }
.contact-form .mandatory { color: var(--color-text); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: var(--space-xs) var(--space-s);
  border: var(--border) solid var(--color-field-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.contact-form textarea { min-block-size: 10rem; resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: var(--focus-ring); outline-offset: 0; border-color: var(--color-text); }
.contact-form fieldset { border: 0; margin: 0; padding: 0; }
.contact-form .checkbox_container span,
.contact-form .widget-checkbox span { display: flex; gap: var(--space-xs); align-items: flex-start; font-weight: var(--weight-regular); }
.contact-form input[type="checkbox"] {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-top: 0.2em;
  accent-color: var(--color-text);
  border-radius: var(--radius);
}
.contact-form .error,
.contact-form p.error { color: var(--color-error); font-size: var(--step--1); margin: 0; }
.contact-form .error input,
.contact-form .error textarea,
.contact-form [aria-invalid="true"] { border-color: var(--color-error); }
.contact-form .widget-submit { margin-top: var(--space-2xs); }
.contact-form .widget-explanation,
.contact-form .confirmation,
.contact-form .message { color: var(--color-success); }

.notdienst {
  background: var(--color-dark);
  color: var(--color-on-dark);
  padding: var(--space-l);
  border-left: var(--border-strong) solid var(--color-motiv-on-dark);
}
.notdienst h2 { color: var(--color-on-dark); font-size: var(--step-2); }
.notdienst a { color: var(--color-link-on-dark); }
.notdienst a:hover { color: var(--color-on-dark); }
.notdienst :focus-visible { outline-color: var(--color-focus-on-dark); }
.notdienst__times { color: var(--color-on-dark-muted); }
.notdienst__times strong { color: var(--color-on-dark); }
.notdienst__phone { font: var(--weight-head) var(--step-3) / var(--leading-tight) var(--font-head); }
.notdienst__phone a { text-decoration: none; }
.notdienst__phone a:hover { text-decoration: underline; }

/* ==========================================================================
   Rechtstexte, Fehlerseite
   ========================================================================== */
.section--legal > *,
.section--error > * { max-width: var(--container-narrow); }
.section--legal h1,
.section--error h1 { font-size: var(--step-4); margin-bottom: 0; }
.legal h2 { font-size: var(--step-2); margin-top: var(--space-l); }
.legal h3 { font-size: var(--step-1); margin-top: var(--space-m); }
.legal p, .legal li { overflow-wrap: anywhere; }
.legal-note {
  padding: var(--space-s) var(--space-m);
  background: var(--color-surface);
  border-left: var(--border-strong) solid var(--color-line-strong);
  font-size: var(--step--1);
}

/* ==========================================================================
   Interne Links „Passend dazu“
   ========================================================================== */
.related-links > h2 { font-size: var(--step-2); margin-bottom: var(--space-m); }
.related-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 var(--grid-gap);
  border-top: var(--border) solid var(--color-line);
}
@media (min-width: 40em) { .related-links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .related-links ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.related-links li { margin: 0; max-width: none; padding: 0; border-bottom: var(--border-thin) solid var(--color-line); }
.related-links li::before { content: none; }
.related-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.related-links a::after {
  content: "";
  flex: none;
  inline-size: 0.5em;
  block-size: 0.5em;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
.related-links a:hover { text-decoration: underline; }

/* ==========================================================================
   Schwerpunkt Wärmepumpe
   ========================================================================== */
/* Kleine Versalzeile über Überschriften */
.kicker {
  margin: 0 0 var(--space-2xs);
  font: var(--weight-head) var(--step--1) / 1.2 var(--font-head);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Startseite: Kicker steht im Text-Element nach der h2 → optisch davor */
.wp-feature__text { display: flex; flex-direction: column; }
.wp-feature__text > .rte { display: contents; }
.wp-feature__text .kicker { order: -1; }
.wp-feature__text > h2 { font-size: var(--step-3); margin-bottom: var(--space-s); }

.wp-feature__content > * + * { margin-top: var(--space-m); }
.wp-feature__list ul { margin: 0; }
.wp-feature__media img { inline-size: 100%; aspect-ratio: var(--ratio-split); object-fit: cover; }
.wp-feature__photos ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40em) { .wp-feature__photos ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wp-feature__photos img { aspect-ratio: var(--ratio-tile); }

@media (min-width: 64em) {
  .wp-feature {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    column-gap: var(--space-xl);
    row-gap: var(--grid-gap);
    align-items: center;
    padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  }
  .wp-feature > * { max-width: none; margin: 0 !important; }
  .wp-feature__content { grid-column: 1; grid-row: 1; }
  .wp-feature__media { grid-column: 2; grid-row: 1; }
  .wp-feature__photos { grid-column: 1 / -1; grid-row: 2; }
}

/* Hinweis-Abschnitt auf verwandten Leistungsseiten */
.wp-teaser .card__more a { font-weight: var(--weight-semibold); text-decoration: none; }

/* Leistungskarte Wärmepumpe als Schwerpunkt markieren */
.card-grid--3 > .card:has(a[href$="/waermepumpe"]) > figure { position: relative; }
.card-grid--3 > .card:has(a[href$="/waermepumpe"]) > figure::after {
  content: "Schwerpunkt";
  position: absolute;
  left: 0;
  top: var(--space-s);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-dark);
  color: var(--color-on-dark);
  font: var(--weight-head) var(--step--1) / 1.3 var(--font-head);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}