/* Wärmepumpen-Marken: zweite Ausbaustufe (Vaillant als erste Umsetzung).
   Ergänzt wp-brand.css und waermepumpe-general.css um fünf neue, wieder-
   verwendbare Bausteine: building-check, manufacturer-feature, expert-work,
   project-case-study und product-selector. Nutzt die --wp-* Tokens aus
   waermepumpe-general.css für Farben/Typografie. Struktur (Spalten, Zeilen,
   Bildverhältnisse) kommt bewusst aus Bootstraps eigenem Grid (.row/.col-*)
   und der .ratio-Utility statt aus eigenem CSS-Grid - robuster, weniger
   eigene Logik, kein Konflikt mit den width/height-Attributen der <img>.
   Diese Datei liefert nur noch Farbe/Abstand/Typografie je Baustein.
   Nur auf Marken-Seiten geladen, Selektoren bleiben unter .wp-art-page
   gescoped und berühren keine andere Seite. */

.wp-art-page :is(#haus, #passt, #vaillant, #fachleute, #projekt, #modelle) {
  scroll-margin-top: 120px;
}

/* ---------- Statement: ein großer, ruhiger Markenmoment ---------- */

.wp-art-page .wp-statement {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 9vw, 136px) 0;
  background: linear-gradient(155deg, var(--wp-ink) 0%, var(--wp-ink-deep) 100%);
}

.wp-art-page .wp-statement::before {
  position: absolute;
  z-index: -1;
  inset: -20% -10% auto auto;
  width: 60%;
  height: 140%;
  content: "";
  background: radial-gradient(circle, rgba(202, 11, 87, 0.22), transparent 70%);
}

.wp-art-page .wp-statement__text {
  margin: 0;
  max-width: 22ch;
  color: #fff;
  font-family: var(--eco-display);
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.wp-art-page .wp-statement__text em {
  color: var(--wp-pink);
  font-style: normal;
}

/* wp-brand.css setzt .wp-brand-page .wp-section pauschal auf padding:0,
   weil jede ältere Sektion (wp-intro, wp-flow, wp-scene, wp-dossier,
   wp-models, wp-faq, wp-close) ihren eigenen Abstand über eine eigene
   Klasse mitbringt. building-check, project-case-study, product-selector
   und installation-process hatten das nicht und liefen dadurch mit 0px
   eigenem Abstand - sichtbar ungleichmäßige, teils ganz fehlende Lücken
   zwischen den Sektionen (z. B. 0px zwischen "Linien" und "Ablauf").
   Hier für alle vier nachgezogen, in derselben --section-y-Taktung wie der
   Rest der Seite. Compound-Selektor (.wp-section.xy), weil .product-selector
   zusätzlich auch die innere Bootstrap-Row kennzeichnet - die soll hier
   nicht mitgetroffen werden. */
.wp-art-page .wp-section.building-check,
.wp-art-page .wp-section.project-case-study,
.wp-art-page .wp-section.product-selector,
.wp-art-page .wp-section.installation-process {
  padding: var(--section-y) 0;
}

/* Bootstraps .row zieht sich per Gutter-Klasse (g-3/g-4) immer um den
   Y-Gutter-Wert nach oben (negatives margin-top), auch als allererstes
   Element einer Sektion - das kollidierte mit dem Absatz direkt über ihr
   (bis zu -24px, die Zeilen lagen ineinander). Hier neutralisiert, dafür
   ein fester, auf allen vier Sektionen gleicher Abstand nach der
   Kopfzeile. */
.wp-art-page .building-check .wp-head + .row,
.wp-art-page .project-case-study .wp-head + .row,
.wp-art-page .product-selector .wp-head + .row {
  margin-top: 0;
}

.wp-art-page .building-check .wp-head,
.wp-art-page .project-case-study .wp-head,
.wp-art-page .product-selector .wp-head,
.wp-art-page .installation-process .wp-head {
  margin-bottom: clamp(32px, 3.2vw, 56px);
}

/* ---------- Eine Wärmepumpe beginnt nicht beim Gerät ---------- */

.wp-art-page .building-check__item {
  overflow: hidden;
  height: 100%;
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-radius);
  background: #fff;
}

.wp-art-page .building-check__item .ratio {
  background: var(--wp-paper);
}

.wp-art-page .building-check__item .ratio img {
  object-fit: cover;
}

/* Die drei kompakten Punkte (Heizflächen/Aufstellort/Elektro) nutzen bewusst
   kein .ratio: das Bild soll genau die Höhe der Textspalte neben sich
   annehmen (normales Flex-Stretch der Bootstrap-Row), nicht ein festes
   Seitenverhältnis erzwingen. Beide Mechaniken zu mischen wäre wieder genau
   die Art von Konflikt, die die aspect-ratio-Regel vorher verursacht hat. */
.wp-art-page .building-check__shot {
  overflow: hidden;
  background: var(--wp-paper);
}

.wp-art-page .building-check__shot img {
  object-fit: cover;
}

.wp-art-page .building-check__copy {
  padding: var(--wp-card-pad);
}

.wp-art-page .building-check__item--compact .building-check__copy {
  padding: clamp(16px, 1.6vw, 22px);
}

.wp-art-page .building-check__copy b {
  display: block;
  margin-bottom: 4px;
  color: var(--wp-pink);
  font-family: var(--eco-display);
  font-size: clamp(2.8rem, 4vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
}

.wp-art-page .building-check__item--compact .building-check__copy b {
  margin-bottom: 2px;
  color: var(--wp-blue);
  font-size: 1.6rem;
}

.wp-art-page .building-check__copy h3 {
  margin: 0 0 10px;
  font-size: 1.22rem;
  line-height: 1.15;
}

.wp-art-page .building-check__item--compact .building-check__copy h3 {
  font-size: 1.08rem;
}

.wp-art-page .building-check__copy p {
  margin: 0;
  color: var(--wp-muted);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* ---------- Warum wir Vaillant prüfen ---------- */

.wp-art-page .manufacturer-feature {
  align-items: center;
}

.wp-art-page .manufacturer-feature__shot {
  overflow: hidden;
  border-radius: var(--wp-radius);
  background: var(--wp-paper);
}

/* Nur für Fotos mit einem Siegel/Label direkt am rechten Rand (z. B. das
   Vaillant-Warentest-Foto): jede Rundung auf der rechten Seite schneidet
   in die Ecke des Siegels, auch bei kleinem Radius - wirkt hingeklebt statt
   bewusst platziert. Deshalb eigener Modifier statt einer Änderung an
   .manufacturer-feature__shot selbst, die alle zwölf Seiten träfe. */
.wp-art-page .manufacturer-feature__shot--edge-label {
  border-radius: var(--wp-radius) 0 0 var(--wp-radius);
}

/* .ratio füllt per Bootstrap nur sein DIREKTES Kind auf 100%/100%. Das <picture>
   fürs responsive Herstellerfoto liegt dazwischen, daher hier explizit
   wiederholen - sonst bleibt <picture> leer/unbegrenzt und das <img> darin
   fällt auf seine eigene natürliche Höhe zurück (großer Leerraum darunter). */
.wp-art-page .manufacturer-feature__shot .ratio picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.wp-art-page .manufacturer-feature__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wp-art-page .manufacturer-feature__copy h2 {
  margin: 14px 0 14px;
  font-size: clamp(2.1rem, 2.6vw, 2.8rem);
  line-height: 1.1;
}

.wp-art-page .manufacturer-feature__copy > p {
  margin: 0 0 24px;
  max-width: 42rem;
  font-size: 1.02rem;
  line-height: 1.7;
}

.wp-art-page .manufacturer-feature__facts {
  margin: 0 0 20px;
  padding-top: 22px;
  border-top: 1px solid var(--wp-line);
}

.wp-art-page .manufacturer-feature__facts dt {
  margin: 0 0 6px;
  color: var(--wp-ink);
  font-family: var(--eco-display);
  font-size: 1.02rem;
  font-weight: 800;
}

.wp-art-page .manufacturer-feature__facts dd {
  margin: 0;
  color: var(--wp-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.wp-art-page .manufacturer-feature__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  color: var(--wp-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.wp-art-page .manufacturer-feature__note .lucide {
  width: 15px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--wp-blue);
}

.wp-art-page .manufacturer-feature .wp-actions {
  margin-top: 22px;
}

/* ---------- Nicht geliefert. Eingebaut. ---------- */

.wp-art-page .expert-work {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(80px, 8vw, 128px) 0 clamp(56px, 6vw, 96px);
  color: #fff;
}

.wp-art-page .expert-work__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  margin: 0;
}

.wp-art-page .expert-work__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
}

.wp-art-page .expert-work::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(7, 24, 41, 0.86) 0%, rgba(7, 24, 41, 0.62) 46%, rgba(7, 24, 41, 0.9) 100%);
}

.wp-art-page .expert-work__copy {
  max-width: 44rem;
}

.wp-art-page .expert-work__copy h2 {
  margin: 12px 0 18px;
  color: #fff;
  font-size: clamp(2.1rem, 2.8vw, 3rem);
  line-height: 1.08;
}

.wp-art-page .expert-work__copy p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.02rem;
  line-height: 1.7;
}

.wp-art-page .expert-work__strip {
  margin-top: clamp(40px, 4vw, 64px);
}

.wp-art-page .expert-work__strip .ratio {
  overflow: hidden;
  border-radius: 14px;
  background: var(--wp-paper);
}

.wp-art-page .expert-work__strip img {
  object-fit: cover;
}

.wp-art-page .expert-work__strip-label {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  font-weight: 750;
}

/* ---------- Von Gas zu Vaillant (Beispielprojekt) ---------- */

.wp-art-page .project-case-study__facts {
  margin: 0;
  padding: var(--wp-card-pad);
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-radius);
  background: #fff;
}

.wp-art-page .project-case-study__facts > div {
  padding: 13px 0;
  border-top: 1px solid var(--wp-line);
}

.wp-art-page .project-case-study__facts > div:first-child {
  padding-top: 0;
  border-top: 0;
}

.wp-art-page .project-case-study__facts dt {
  margin: 0 0 3px;
  color: var(--wp-blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wp-art-page .project-case-study__facts dd {
  margin: 0;
  color: var(--wp-ink);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.45;
}

.wp-art-page .project-case-study__photos .ratio {
  overflow: hidden;
  border-radius: 14px;
  background: var(--wp-paper);
}

.wp-art-page .project-case-study__photos img {
  object-fit: cover;
}

.wp-art-page .project-case-study__photos span {
  display: block;
  margin-top: 8px;
  color: var(--wp-muted);
  font-size: 0.82rem;
  font-weight: 750;
}

/* ---------- Produktauswahl: Karten statt Tabelle ---------- */

.wp-art-page .product-selector__card {
  height: 100%;
  padding: var(--wp-card-pad);
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-radius);
  background: #fff;
}

.wp-art-page .product-selector__shot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  margin: calc(var(--wp-card-pad) * -1) calc(var(--wp-card-pad) * -1) 18px;
  border-bottom: 1px solid var(--wp-line);
  border-radius: var(--wp-radius) var(--wp-radius) 0 0;
  background: var(--wp-paper);
}

.wp-art-page .product-selector__shot img {
  max-width: 78%;
  max-height: 100px;
  object-fit: contain;
}

.wp-art-page .product-selector__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  border-radius: 999px;
  color: var(--wp-blue);
  background: rgba(10, 96, 157, 0.1);
  font-size: 0.78rem;
  font-weight: 800;
}

.wp-art-page .product-selector__card h3 {
  margin: 0 0 10px;
  font-size: 1.4rem;
}

.wp-art-page .product-selector__use {
  margin: 0 0 20px;
  color: var(--wp-muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

.wp-art-page .product-selector__card dl {
  margin: 0 0 20px;
  padding: 16px 0;
  border-top: 1px solid var(--wp-line);
  border-bottom: 1px solid var(--wp-line);
}

.wp-art-page .product-selector__card dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.9rem;
}

.wp-art-page .product-selector__card dt {
  color: var(--wp-muted);
}

.wp-art-page .product-selector__card dd {
  margin: 0;
  color: var(--wp-ink);
  font-weight: 700;
  text-align: right;
}

.wp-art-page .product-selector__when {
  margin: 0 0 10px;
  color: var(--wp-text);
  font-size: 0.9rem;
  line-height: 1.55;
}

.wp-art-page .product-selector__when strong {
  color: var(--wp-ink);
}

.wp-art-page .product-selector__when--not {
  margin-bottom: 0;
  color: var(--wp-muted);
}

.wp-art-page .product-selector__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 24px 0 0;
  color: var(--wp-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.wp-art-page .product-selector__note .lucide {
  width: 15px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--wp-blue);
}

/* ---------- Förderung/Absicherung: zwei statt drei Kacheln ---------- */

.wp-art-page .wp-need__grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wp-art-page .wp-dossier__stand {
  margin: 18px 0 0;
  color: var(--wp-muted);
  font-size: 0.88rem;
}

.wp-art-page .wp-dossier__stand a {
  color: var(--wp-ink);
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .wp-art-page .wp-need__grid--two {
    grid-template-columns: 1fr;
  }
}