/* Waermepumpe — Umsetzung nach Vorlage (Screenshot vom 3.9.2026).

   Charakter der Vorlage: helle Seite, viel Luft, grosse Fotos mit runden
   Ecken, Karten mit feiner Linie, Pink als einziger Akzent (Eyebrow,
   letztes Wort der Ueberschrift, Haken, Hauptbutton). Genau eine dunkle
   Sektion als Kontrast. Kein Formular im Hero, die Anfrage steht am Ende.

   Schrift kommt aus dem Websitesystem: Barlow Condensed fuer Ueberschriften
   (--eco-display), Inter fuer Text (--eco-body). */

.wp-art-page {
  --wp-ink: #0b2138;
  --wp-ink-deep: #071829;
  --wp-text: #465f6e;
  /* #6b7f8c ergab nur 4,17:1 auf Weiss und 3,91:1 auf --wp-paper und lag
     damit unter den 4,5:1 der WCAG-Stufe AA. Dieser Ton erreicht 4,99:1
     bzw. 4,68:1 und betrifft elf Textstellen der Seite. */
  --wp-muted: #5f7280;
  --wp-pink: #ca0b57;
  --wp-pink-deep: #a80f50;
  --wp-blue: #0a609d;
  --wp-blue-light: #8ccdee;
  --wp-paper: #f5f8fa;
  --wp-line: #e2e9ee;
  --wp-radius: 20px;
  /* Ein Innenabstand fuer alle Karten. Vorher standen fuer vergleichbare
     Elemente drei verschiedene Werte (26px, 36px, 38px) im Stylesheet. */
  --wp-card-pad: clamp(26px, 2.4vw, 40px);
  overflow-x: clip;
  color: var(--wp-text);
  background: #fff;
}

.wp-art-page main {
  overflow: clip;
  background: #fff;
}

/* Der Inhalt laeuft auf demselben Raster wie Kopf- und Fusszeile.
   Diese nutzen .container-xl, das seine Breite aus --container-max und
   --container-gutter zieht (1200px bis 1840px, gestaffelt ab 1400px).
   Vorher stand hier das feste --eco-container mit 1320px. Dadurch sass der
   Seiteninhalt ab etwa 1450px Viewport schmaler und nach innen versetzt
   zum Logo: bei 1920px um 180px je Seite, bei 2560px um 260px.
   Ueber dieselben Tokens stimmt die Ausrichtung bei jeder Breite. */
.wp-art-page .wp-main .eco-container {
  width: min(var(--container-max), 100% - (var(--container-gutter) * 2));
}

/* Grundstellung fuer die Textbausteine. Bewusst mit :where, damit die Regel
   keine eigene Spezifitaet mitbringt: mit :is lag sie bei 0,2,1 und hat alle
   Bauteilregeln mit reinem Klassenselektor ueberstimmt. Dadurch fielen acht
   Abstaende auf der Seite still auf null, unter anderem oberhalb der
   Schrittleiste und der Faktenkarten im Ablauf. */
.wp-art-page .wp-main :where(h1, h2, h3, h4, p, figure, ol, ul, blockquote, table) {
  margin-top: 0;
}

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

/* Pink bleibt der Hero-Ueberschrift vorbehalten, wie in der Vorlage. */
.wp-art-page .wp-main :is(h1, h2) em {
  color: var(--wp-pink);
  font-style: normal;
}

/* Erzwingt den Satzumbruch der Vorlage, faellt auf Mobil in den Fluss zurueck. */
.wp-art-page .wp-main h2 .wp-line {
  display: block;
}

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

.wp-art-page :is(#anfrage, #einordnung, #ablauf, #passgenau, #systeme, #kosten, #foerderung, #faq, #foerderrechner) {
  scroll-margin-top: 120px;
}

/* ---------- wiederkehrende Bausteine ---------- */

.wp-art-page .wp-eyebrow {
  display: block;
  margin: 0;
  color: var(--wp-pink);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wp-art-page .wp-eyebrow--light {
  color: var(--wp-blue-light);
}

/* Senkrechter Rhythmus aus derselben Skala wie der Rest der Website:
   --section-y waechst gestaffelt von 88px auf 144px. Vorher stand hier
   clamp(72px, 6.4vw, 116px); dieser Deckel griff schon ab 1813px Viewport,
   oberhalb davon wuchs kein Abstand mehr mit. */
.wp-art-page .wp-section {
  padding: var(--section-y) 0;
}

.wp-art-page .wp-section--paper {
  background: var(--wp-paper);
}

/* Die dunkle Flaeche ist der Einschnitt in der Seite und bekommt die grosse
   Stufe der Skala, damit nicht alle sieben Abschnitte gleich getaktet sind. */
.wp-art-page .wp-section--dark {
  padding: var(--section-y-large, 112px) 0;
  color: rgba(255, 255, 255, 0.78);
  background: var(--wp-ink);
}

.wp-art-page .wp-section--dark :is(h2, h3, h4) {
  color: #fff;
}

.wp-art-page .wp-head h2 {
  margin: 16px 0 0;
  font-size: clamp(2.4rem, 3.1vw, 3.4rem);
  line-height: 1.04;
}

.wp-art-page .wp-head > p {
  max-width: 62ch;
  margin: 20px 0 0;
  font-size: 1.05rem;
  line-height: 1.75;
}

.wp-art-page .wp-head--center {
  max-width: 940px;
  margin-inline: auto;
  text-align: center;
}

.wp-art-page .wp-head--center > p {
  margin-inline: auto;
}

/* Buttons: Pink gefuellt als einziger Hauptweg, Weiss mit Linie daneben */
.wp-art-page :is(.wp-btn, .wp-form button) {
  display: inline-flex;
  min-height: 56px;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--eco-body);
  font-size: 0.95rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.24s ease, background-color 0.2s ease, box-shadow 0.24s ease, border-color 0.2s ease;
}

.wp-art-page :is(.wp-btn, .wp-form button) .lucide {
  width: 17px;
  height: 17px;
  transition: transform 0.24s ease;
}

.wp-art-page :is(.wp-btn, .wp-form button):hover {
  transform: translateY(-2px);
}

.wp-art-page :is(.wp-btn, .wp-form button):hover .lucide:last-child {
  transform: translateX(3px);
}

.wp-art-page :is(.wp-btn, .wp-form button):focus-visible {
  outline: 3px solid rgba(202, 11, 87, 0.45);
  outline-offset: 3px;
}

.wp-art-page :is(.wp-btn--pink, .wp-form button) {
  color: #fff;
  background-color: var(--wp-pink);
  box-shadow: 0 12px 26px -12px rgba(168, 15, 80, 0.6);
}

.wp-art-page :is(.wp-btn--pink, .wp-form button):hover {
  color: #fff;
  background-color: var(--wp-pink-deep);
  box-shadow: 0 20px 34px -14px rgba(168, 15, 80, 0.7);
}

/* Zweitrangige Aktion: gefuellt in Tiefblau statt weiss mit hellgrauem Rand.
   Die alte Fassung verschwand auf dem hellen Grund und las sich als
   Textkasten. Das Pfeilzeichen in Pink verbindet sie mit der Hauptaktion. */
.wp-art-page .wp-btn--ghost {
  border-color: var(--wp-ink);
  color: #fff;
  background-color: var(--wp-ink);
  box-shadow: 0 12px 26px -14px rgba(11, 33, 56, 0.55);
}

.wp-art-page .wp-btn--ghost .lucide {
  color: #ff5fa2;
}

.wp-art-page .wp-btn--ghost:hover,
.wp-art-page .wp-btn--ghost:focus-visible {
  border-color: #12314f;
  color: #fff;
  background-color: #12314f;
  box-shadow: 0 20px 34px -14px rgba(11, 33, 56, 0.6);
}

.wp-art-page .wp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.wp-art-page .wp-section .wp-actions {
  margin-top: 28px;
}

.wp-art-page :is(#ablauf, #faq) .wp-actions {
  justify-content: center;
}

.wp-art-page .wp-systems .wp-actions,
.wp-art-page .wp-pair__body .wp-actions {
  justify-content: flex-start;
}

.wp-art-page .wp-systems .wp-actions {
  margin-top: 20px;
}

.wp-art-page .wp-intro__copy .wp-actions {
  margin-top: 28px;
}

.wp-art-page .wp-faq .wp-actions {
  margin-top: 36px;
}

/* Hakenliste mit Pink-Kreis, das Erkennungszeichen der Vorlage */
.wp-art-page .wp-checklist {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wp-art-page .wp-checklist li {
  display: flex;
  gap: 13px;
  align-items: center;
  color: var(--wp-ink);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
}

.wp-art-page .wp-checklist .lucide {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  color: var(--wp-pink);
}

.wp-art-page .wp-section--dark .wp-checklist li {
  color: #fff;
}

/* Fotos: durchgaengig runde Ecken wie in der Vorlage */
.wp-art-page .wp-shot {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--wp-radius);
  background: var(--wp-paper);
}

/* picture ist von sich aus inline und ohne Hoehe. Ohne diese Regel bezieht
   sich das height: 100% des Bildes auf das picture-Element statt auf den
   Rahmen, und der Bildausschnitt (object-fit) greift nicht mehr. */
.wp-art-page .wp-shot picture {
  display: block;
  width: 100%;
  height: 100%;
}

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

/* ---------- Hero ----------
   Ein Foto, volle Fensterhoehe ab Tablet. Der Header liegt darueber,
   deshalb entfaellt das sonstuebliche main-padding und wandert in den
   Hero. Handy bleibt inhaltsbasiert, damit der Button ueber dem Dock sitzt. */

.wp-art-page .wp-main.eco-with-shared-header {
  padding-top: 0;
}

.wp-art-page .wp-hero {
  --wp-hero-header: 6.95rem;

  position: relative;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--wp-hero-header) + 2.5rem) 0 4.5rem;
  overflow: hidden;
  color: #fff;
  background: var(--wp-ink);
}

.wp-art-page .wp-hero__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
}

.wp-art-page .wp-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}

.wp-art-page .wp-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    linear-gradient(
      92deg,
      rgba(6, 22, 38, 0.92) 0%,
      rgba(6, 22, 38, 0.78) 28%,
      rgba(6, 22, 38, 0.36) 54%,
      rgba(6, 22, 38, 0.08) 78%,
      rgba(6, 22, 38, 0.02) 100%
    ),
    linear-gradient(to top, rgba(6, 22, 38, 0.5) 0%, rgba(6, 22, 38, 0) 42%);
}

.wp-art-page .wp-hero__inner {
  position: relative;
  width: 100%;
}

.wp-art-page .wp-hero__copy {
  max-width: 40rem;
}

.wp-art-page .wp-hero h1 {
  margin: 16px 0 20px;
  color: #fff;
  font-size: clamp(2.45rem, 3.8vw, 4.1rem);
  line-height: 1.08;
  text-shadow: 0 2px 24px rgba(4, 16, 28, 0.34);
}

.wp-art-page .wp-hero h1 span {
  display: block;
}

.wp-art-page .wp-hero .wp-eyebrow {
  color: #ff5fa2;
}

.wp-art-page .wp-hero__lead {
  max-width: 44ch;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1.05rem, 1.2vw, 1.18rem);
  line-height: 1.7;
}

.wp-art-page .wp-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.4;
}

.wp-art-page .wp-hero__stars {
  display: inline-flex;
  gap: 2px;
}

.wp-art-page .wp-hero__stars .lucide,
.wp-art-page .wp-hero__stars svg {
  width: 15px;
  height: 15px;
  fill: #ff5fa2;
  color: #ff5fa2;
  stroke: #ff5fa2;
  stroke-width: 1.25;
}

.wp-art-page .wp-hero__proof strong {
  color: #fff;
  font-weight: 800;
}

.wp-art-page .wp-hero .wp-checklist {
  gap: 14px;
  margin-bottom: 32px;
}

.wp-art-page .wp-hero .wp-checklist li {
  color: rgba(255, 255, 255, 0.94);
}

.wp-art-page .wp-hero .wp-checklist li .lucide {
  color: #ff5fa2;
}

.wp-art-page .wp-hero__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 750;
  text-decoration: none;
  text-underline-offset: 4px;
}

.wp-art-page .wp-hero__link:hover,
.wp-art-page .wp-hero__link:focus-visible {
  color: #ffb3d0;
  text-decoration: underline;
}

.wp-art-page .wp-hero__link:focus-visible {
  outline: 3px solid rgba(255, 95, 162, 0.45);
  outline-offset: 3px;
}

/* ---------- Herstellerleiste: Namen als Wortmarken, kein Icon-Raster ---------- */

.wp-art-page .wp-trust {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 2.4vw, 42px) 0;
  border-top: 1px solid var(--wp-line);
  border-bottom: 1px solid var(--wp-line);
  background: #fff;
}

.wp-art-page .wp-trust__kicker {
  margin: 0 0 18px;
  color: var(--wp-muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.wp-art-page .wp-trust__brands {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 8px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wp-art-page .wp-trust__brands li {
  display: inline-flex;
  align-items: center;
  color: var(--wp-ink);
  font-family: var(--eco-display);
  font-size: clamp(1.12rem, 1.55vw, 1.42rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
}

.wp-art-page .wp-trust__brands a,
.wp-art-page .wp-trust__brands span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: inherit;
  text-decoration: none;
  opacity: 0.58;
}

.wp-art-page .wp-trust__brands a:hover,
.wp-art-page .wp-trust__brands .is-current {
  color: var(--wp-pink);
  opacity: 1;
}

.wp-art-page .wp-trust__brands li:not(:last-child)::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--wp-line);
  pointer-events: none;
}

/* ---------- Einordnung: randloses Bild links ---------- */

/* Diese Sektion bricht bewusst aus dem Raster aus: das Foto laeuft links bis
   an die Fensterkante, waehrend die rechte Spalte auf derselben Linie endet
   wie jeder andere Containerinhalt. Das ist der einzige Bruch dieser Art auf
   der Seite und gibt ihr direkt nach dem Hero einen zweiten Blickfang. */
.wp-art-page .wp-intro__layout {
  --wp-intro-gap: clamp(40px, 3.4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--wp-intro-gap);
  align-items: start;
  padding-right: max(var(--container-gutter), calc((100% - var(--container-max)) / 2));
}

.wp-art-page .wp-intro__media {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* Nur rechts gerundet – links gibt es keine Kante, die man runden koennte. */
.wp-art-page .wp-intro__shot {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1.38;
  border-radius: 0 clamp(20px, 2.2vw, 34px) clamp(20px, 2.2vw, 34px) 0;
  background: var(--wp-paper);
}

.wp-art-page .wp-intro__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Dieselbe Bildmitte, die das Motiv auch auf den Unternehmensseiten
     verwendet: die Gesichter sitzen oberhalb der geometrischen Mitte. */
  object-position: center 44%;
}

/* Die Karte liegt auf dem Foto, nicht in der Spaltenluecke. So bleiben
   Bild und Text getrennte, saubere Flaechen. */
.wp-art-page .wp-intro__badge {
  position: absolute;
  z-index: 2;
  right: auto;
  left: clamp(18px, 2vw, 28px);
  bottom: clamp(18px, 2vw, 28px);
  display: flex;
  max-width: min(300px, calc(100% - 40px));
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--wp-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(11, 33, 56, 0.16);
}

.wp-art-page .wp-intro__badge-mark {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: rgba(202, 11, 87, 0.09);
}

.wp-art-page .wp-intro__badge-mark .lucide {
  width: 19px;
  height: 19px;
  color: var(--wp-pink);
}

.wp-art-page .wp-intro__badge-copy small {
  display: block;
  color: var(--wp-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wp-art-page .wp-intro__badge-copy strong {
  display: block;
  margin-top: 3px;
  color: var(--wp-ink);
  font-family: var(--eco-display);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.2;
}

.wp-art-page .wp-intro__copy {
  min-width: 0;
  max-width: none;
  padding-top: 4px;
}

.wp-art-page .wp-intro__copy h2 {
  margin: 14px 0 16px;
  font-size: clamp(2.15rem, 2.6vw, 2.85rem);
  line-height: 1.08;
}

.wp-art-page .wp-intro__copy > p {
  margin: 0;
  max-width: 36rem;
  font-size: 1.02rem;
  line-height: 1.7;
}

/* Ein Feld, vier Punkte – Kreuzteiler statt vier einzelner Kacheln. */
.wp-art-page .wp-intro__cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 26px 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--wp-line);
  border-radius: 16px;
  background-color: var(--wp-paper);
  background-image:
    linear-gradient(var(--wp-line), var(--wp-line)),
    linear-gradient(var(--wp-line), var(--wp-line));
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 1px 100%, 100% 1px;
  list-style: none;
}

.wp-art-page .wp-intro__cases li {
  display: flex;
  min-height: 74px;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  color: var(--wp-ink);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.35;
}

.wp-art-page .wp-intro__cases .lucide {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--wp-blue);
}

/* Ablauf: Foto vorne, Schritte zum Oeffnen. Tiefe erst nach dem Klick. */

.wp-art-page .wp-flow .wp-head {
  margin-bottom: clamp(32px, 3.2vw, 52px);
}

.wp-art-page .wp-flow__board {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(17.5rem, 0.7fr);
  overflow: hidden;
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-radius);
  background: #fff;
}

.wp-art-page .wp-flow__stage {
  position: relative;
  min-height: 34rem;
  background: var(--wp-ink);
}

.wp-art-page .wp-flow__frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.38s ease, visibility 0.38s ease;
}

.wp-art-page .wp-flow__frame:first-child,
.wp-art-page .wp-flow__board:has(.wp-flow__nav li:nth-child(1) input:checked) .wp-flow__frame:nth-child(1),
.wp-art-page .wp-flow__board:has(.wp-flow__nav li:nth-child(2) input:checked) .wp-flow__frame:nth-child(2),
.wp-art-page .wp-flow__board:has(.wp-flow__nav li:nth-child(3) input:checked) .wp-flow__frame:nth-child(3),
.wp-art-page .wp-flow__board:has(.wp-flow__nav li:nth-child(4) input:checked) .wp-flow__frame:nth-child(4),
.wp-art-page .wp-flow__board:has(.wp-flow__nav li:nth-child(5) input:checked) .wp-flow__frame:nth-child(5) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wp-art-page .wp-flow__board:has(.wp-flow__nav input:checked) .wp-flow__frame:first-child {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.wp-art-page .wp-flow__board:has(.wp-flow__nav li:nth-child(1) input:checked) .wp-flow__frame:first-child {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wp-art-page .wp-flow__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wp-art-page .wp-flow__frame:nth-child(1) img {
  object-position: 50% 42%;
}

.wp-art-page .wp-flow__frame:nth-child(2) img {
  object-position: 48% 40%;
}

.wp-art-page .wp-flow__frame:nth-child(3) img {
  object-position: 50% 36%;
}

.wp-art-page .wp-flow__frame:nth-child(4) img {
  object-position: 28% 45%;
}

.wp-art-page .wp-flow__frame:nth-child(5) img {
  object-position: 55% 48%;
}

.wp-art-page .wp-flow__frame::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 24, 41, 0.08) 18%, rgba(7, 24, 41, 0.78) 100%);
}

.wp-art-page .wp-flow__caption {
  position: relative;
  z-index: 1;
  padding: 28px 32px 30px;
  color: #fff;
}

.wp-art-page .wp-main .wp-flow__caption h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(1.55rem, 2vw, 2.05rem);
  line-height: 1.1;
}

.wp-art-page .wp-flow__caption > p {
  margin: 0;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.02rem;
  line-height: 1.55;
}

.wp-art-page .wp-flow__out {
  display: inline-block;
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.3;
}

.wp-art-page .wp-flow__out span {
  display: block;
  margin-bottom: 3px;
  color: var(--wp-blue-light);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wp-art-page .wp-flow__nav {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--wp-line);
}

.wp-art-page .wp-flow__nav li {
  flex: 1 1 auto;
  min-height: 0;
}

.wp-art-page .wp-flow__nav label {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: center;
  min-height: 100%;
  padding: 16px 18px 16px 20px;
  border-bottom: 1px solid var(--wp-line);
  cursor: pointer;
}

.wp-art-page .wp-flow__nav li:last-child label {
  border-bottom: 0;
}

.wp-art-page .wp-flow__nav input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.wp-art-page .wp-flow__nav label:hover {
  background: #f7fafc;
}

.wp-art-page .wp-flow__nav label:has(input:focus-visible) {
  outline: 2px solid var(--wp-pink);
  outline-offset: -2px;
}

.wp-art-page .wp-flow__nav li:has(input:checked) label {
  background: #f3f7fa;
  box-shadow: inset 3px 0 0 var(--wp-pink);
}

.wp-art-page .wp-flow__num {
  color: var(--wp-blue);
  font-family: var(--eco-display);
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1;
}

.wp-art-page .wp-flow__nav li:has(input:checked) .wp-flow__num {
  color: var(--wp-pink);
}

.wp-art-page .wp-flow__meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wp-art-page .wp-flow__meta strong {
  color: var(--wp-ink);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.2;
}

.wp-art-page .wp-flow__meta small {
  color: var(--wp-muted);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.35;
}

.wp-art-page .wp-flow__nav .lucide {
  width: 16px;
  height: 16px;
  color: var(--wp-muted);
  transition: transform 0.22s ease;
}

.wp-art-page .wp-flow__nav li:has(input:checked) .lucide {
  color: var(--wp-pink);
  transform: rotate(90deg);
}

.wp-art-page .wp-flow .wp-actions {
  margin-top: 28px;
}

.wp-art-page .wp-flow__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 1.5vw, 28px);
  margin: clamp(56px, 5.4vw, 112px) 0 0;
  padding: 0;
  list-style: none;
}

.wp-art-page .wp-flow__facts li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: clamp(22px, 1.9vw, 32px);
  border: 1px solid var(--wp-line);
  border-radius: 16px;
  background: #fff;
}

.wp-art-page .wp-flow__facts .lucide {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--wp-blue);
}

.wp-art-page .wp-flow__facts strong {
  display: block;
  color: var(--wp-ink);
  font-size: 1rem;
  font-weight: 800;
}

.wp-art-page .wp-flow__facts small {
  display: block;
  margin-top: 6px;
  color: var(--wp-muted);
  font-size: 0.89rem;
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .wp-art-page .wp-flow__frame,
  .wp-art-page .wp-flow__nav .lucide {
    transition: none;
  }
}

/* ---------- Aufnahme: Foto links randlos, wie die Ausgangslage ---------- */

.wp-art-page .wp-fit__layout {
  --wp-fit-gap: clamp(40px, 3.4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--wp-fit-gap);
  align-items: start;
  padding-right: max(var(--container-gutter), calc((100% - var(--container-max)) / 2));
}

.wp-art-page .wp-fit__media {
  position: relative;
  min-width: 0;
}

.wp-art-page .wp-fit__shot {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1.38;
  border-radius: 0 clamp(20px, 2.2vw, 34px) clamp(20px, 2.2vw, 34px) 0;
  background: var(--wp-paper);
}

.wp-art-page .wp-fit__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.wp-art-page .wp-fit--end .wp-fit__layout {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-areas: "copy media";
  padding-right: 0;
  padding-left: max(var(--container-gutter), calc((100% - var(--container-max)) / 2));
}

.wp-art-page .wp-fit--end .wp-fit__media {
  grid-area: media;
}

.wp-art-page .wp-fit--end .wp-fit__copy {
  grid-area: copy;
}

.wp-art-page .wp-fit--end .wp-fit__shot {
  border-radius: clamp(20px, 2.2vw, 34px) 0 0 clamp(20px, 2.2vw, 34px);
}

.wp-art-page .wp-fit--end .wp-fit__shot img {
  object-position: 58% 46%;
}

.wp-art-page .wp-fit__copy {
  min-width: 0;
  padding-top: 4px;
}

.wp-art-page .wp-fit__copy h2 {
  margin: 14px 0 16px;
  font-size: clamp(2.15rem, 2.6vw, 2.85rem);
  line-height: 1.08;
}

.wp-art-page .wp-fit__copy > p {
  margin: 0;
  max-width: 36rem;
  font-size: 1.02rem;
  line-height: 1.7;
}

.wp-art-page .wp-fit__copy > p + p {
  margin-top: 16px;
}

.wp-art-page .wp-fit--form .wp-fit__layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.92fr);
  gap: clamp(36px, 4vw, 72px);
  align-items: start;
  padding-right: 0;
}

.wp-art-page .wp-fit--form .wp-fit__copy {
  padding-top: 8px;
}

.wp-art-page .wp-fit--form .wp-fit__copy > p {
  max-width: 40rem;
}

.wp-art-page .wp-fit--form .wp-fund {
  position: sticky;
  top: 120px;
  padding: var(--wp-card-pad);
  border: 1px solid var(--wp-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 26px 56px rgba(11, 33, 56, 0.1);
}

.wp-art-page .wp-fund__head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.wp-art-page .wp-fund__kicker {
  margin: 0;
  color: var(--wp-blue);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wp-art-page .wp-fund__step {
  margin: 0;
  color: var(--wp-muted);
  font-size: 0.86rem;
  font-weight: 650;
}

.wp-art-page .wp-fund__track {
  height: 4px;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--wp-line);
}

.wp-art-page .wp-fund__track span {
  display: block;
  width: 33.333%;
  height: 100%;
  border-radius: inherit;
  background: var(--wp-blue);
  transition: width 0.28s ease;
}

.wp-art-page .wp-fund__back,
.wp-art-page .wp-fund__reset {
  display: inline-flex;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  color: var(--wp-ink);
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 750;
  cursor: pointer;
}

.wp-art-page .wp-fund__reset {
  margin: 0;
}

.wp-art-page .wp-fund__back:hover,
.wp-art-page .wp-fund__reset:hover,
.wp-art-page .wp-fund__back:focus-visible,
.wp-art-page .wp-fund__reset:focus-visible {
  color: var(--wp-blue);
}

.wp-art-page .wp-fund__panel h3 {
  margin: 0 0 16px;
  font-size: 1.28rem;
  line-height: 1.2;
}

.wp-art-page .wp-fund__choices {
  display: grid;
  gap: 10px;
}

.wp-art-page .wp-fund__choice {
  display: flex;
  min-height: 54px;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #c8d6df;
  border-radius: 12px;
  color: var(--wp-ink);
  background: #f7fafc;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.wp-art-page .wp-fund__choice .lucide {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--wp-blue);
}

.wp-art-page .wp-fund__choice:hover,
.wp-art-page .wp-fund__choice:focus-visible {
  border-color: var(--wp-blue);
  background: #fff;
}

.wp-art-page .wp-fund__choice.is-on {
  border-color: var(--wp-ink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10, 96, 157, 0.14);
}

.wp-art-page .wp-fund__lines,
.wp-art-page .wp-fund__notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wp-art-page .wp-fund__lines {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wp-line);
}

.wp-art-page .wp-fund__lines li {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  color: var(--wp-muted);
  font-size: 0.9rem;
}

.wp-art-page .wp-fund__lines strong {
  color: var(--wp-ink);
  font-weight: 800;
}

.wp-art-page .wp-fund__notes {
  display: grid;
  gap: 10px;
}

.wp-art-page .wp-fund__notes li {
  position: relative;
  padding-left: 16px;
  color: var(--wp-text);
  font-size: 0.94rem;
  line-height: 1.55;
}

.wp-art-page .wp-fund__notes li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp-blue);
}

.wp-art-page .wp-fund__legal {
  margin: 16px 0 0;
  color: var(--wp-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.wp-art-page .wp-fund__actions {
  margin-top: 22px;
}

.wp-art-page .wp-fund__actions .wp-btn {
  width: 100%;
}

.wp-art-page .wp-fit--form .wp-form {
  position: sticky;
  top: 120px;
}

.wp-art-page .wp-fit--form .wp-form > h3 {
  font-size: 1.38rem;
}

.wp-art-page .wp-fit--form .wp-form textarea {
  min-height: 92px;
}

/* Aufnahme: oben weiss, damit die Section an die Flaeche darueber anschliesst.
   Darunter ein leiser Verlauf plus Overlay, damit das Formular nicht auf
   einer toten weissen Flaeche steht. */
.wp-art-page #passgenau {
  position: relative;
  isolation: isolate;
  background: #fff;
}

.wp-art-page #passgenau::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(72% 88% at 100% 52%, rgba(10, 96, 157, 0.16), transparent 58%),
    radial-gradient(48% 64% at 6% 84%, rgba(140, 205, 238, 0.22), transparent 62%),
    linear-gradient(
      180deg,
      #fff 0%,
      #fff 22%,
      #f4f8fc 48%,
      #eaf3f9 78%,
      #e7f1f8 100%
    );
}

.wp-art-page #passgenau > .eco-container {
  position: relative;
  z-index: 1;
}

.wp-art-page .wp-fit__actions {
  margin-top: 28px;
}

.wp-art-page a.wp-btn.wp-btn--call {
  padding: 0 22px 0 8px;
  color: var(--wp-ink);
  border-color: var(--wp-line);
  background: #fff;
  box-shadow: 0 10px 24px -16px rgba(11, 33, 56, 0.4);
}

.wp-art-page a.wp-btn.wp-btn--call:hover,
.wp-art-page a.wp-btn.wp-btn--call:focus-visible {
  color: var(--wp-ink);
  border-color: var(--wp-ink);
  background: #fff;
}

.wp-art-page a.wp-btn.wp-btn--call:hover .lucide:last-child,
.wp-art-page a.wp-btn.wp-btn--call:focus-visible .lucide:last-child {
  transform: none;
}

.wp-art-page .wp-btn__mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--wp-ink);
}

.wp-art-page .wp-btn--call .wp-btn__mark .lucide {
  width: 16px;
  height: 16px;
  color: #fff;
}

/* ---------- Bauart: Foto als Grund, Titel links, drei Wege darauf ---------- */

.wp-art-page .wp-systems {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(88px, 9vw, 132px) 0 clamp(40px, 4.2vw, 72px);
  color: #fff;
  background: var(--wp-ink);
}

.wp-art-page .wp-systems__bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  margin: 0;
}

.wp-art-page .wp-systems__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 46%;
}

@supports (animation-timeline: view()) {
  .wp-art-page .wp-systems__bg img {
    animation: wp-systems-pan linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

@keyframes wp-systems-pan {
  from {
    transform: scale(1.1) translate3d(0, -2.5%, 0);
  }

  to {
    transform: scale(1.03) translate3d(0, 4%, 0);
  }
}

.wp-art-page .wp-systems::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(7, 24, 41, 0.78) 0%,
      rgba(7, 24, 41, 0.42) 32%,
      rgba(7, 24, 41, 0.1) 58%,
      rgba(7, 24, 41, 0.04) 100%
    ),
    linear-gradient(
      180deg,
      rgba(7, 24, 41, 0.22) 0%,
      rgba(7, 24, 41, 0.08) 36%,
      rgba(7, 24, 41, 0.28) 72%,
      rgba(7, 24, 41, 0.55) 100%
    );
}

.wp-art-page .wp-systems__inner {
  position: relative;
  z-index: 2;
}

.wp-art-page .wp-systems__lead {
  max-width: 38rem;
  margin: 0 0 clamp(32px, 3.6vw, 56px);
  text-align: left;
}

.wp-art-page .wp-systems__lead .wp-eyebrow {
  color: #ff5fa2;
}

.wp-art-page .wp-main .wp-systems__lead h2 {
  margin: 12px 0 16px;
  color: #fff;
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  line-height: 1.06;
  text-align: left;
}

.wp-art-page .wp-systems__lead > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
  line-height: 1.7;
}

.wp-art-page .wp-systems__routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wp-art-page .wp-systems__routes li {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 22px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(7, 24, 41, 0.52);
  backdrop-filter: blur(18px);
}

.wp-art-page .wp-main .wp-systems__routes h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(1.42rem, 1.7vw, 1.72rem);
  line-height: 1.12;
}

.wp-art-page .wp-systems__source {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.45;
}

.wp-art-page .wp-systems__when {
  margin: 14px 0 0;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 750;
  line-height: 1.4;
}

.wp-art-page .wp-systems__routes dl {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
}

.wp-art-page .wp-systems__routes dl > div {
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr);
  gap: 8px 12px;
  align-items: start;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.wp-art-page .wp-systems__routes dt {
  color: var(--wp-blue-light);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4;
}

.wp-art-page .wp-systems__routes dd {
  margin: 0;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.4;
}

.wp-art-page .wp-systems__tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
}

.wp-art-page .wp-systems__tag.is-low {
  color: #dff3fb;
  background: rgba(140, 205, 238, 0.22);
}

.wp-art-page .wp-systems__tag.is-high {
  color: #fff;
  background: var(--wp-pink);
}

.wp-art-page .wp-systems__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.94rem;
  line-height: 1.55;
}

.wp-art-page .wp-systems__note .lucide {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--wp-blue-light);
}

@media (prefers-reduced-motion: reduce) {
  .wp-art-page .wp-systems__bg img {
    animation: none;
  }
}

.wp-art-page .wp-table {
  overflow: hidden;
  margin-top: clamp(36px, 3.4vw, 72px);
  border: 1px solid var(--wp-line);
  border-radius: 18px;
  background: #fff;
}

.wp-art-page .wp-table__hint {
  display: none;
  gap: 8px;
  align-items: center;
  padding: 16px 24px 0;
  color: var(--wp-blue);
  font-size: 0.82rem;
  font-weight: 800;
}

.wp-art-page .wp-table__hint .lucide {
  width: 15px;
}

.wp-art-page .wp-table__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.wp-art-page .wp-table table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

.wp-art-page .wp-table thead th {
  padding: 17px 22px;
  color: #fff;
  background: var(--wp-ink);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.wp-art-page .wp-table thead th:first-child {
  position: sticky;
  z-index: 2;
  left: 0;
  background: var(--wp-ink);
}

.wp-art-page .wp-table tbody th {
  position: sticky;
  z-index: 1;
  left: 0;
  width: 230px;
  min-width: 230px;
  padding: 18px 22px;
  border-right: 1px solid var(--wp-line);
  color: var(--wp-ink);
  background: var(--wp-paper);
  font-size: 0.92rem;
  font-weight: 800;
  text-align: left;
  vertical-align: top;
}

.wp-art-page .wp-table tbody td {
  padding: 18px 22px;
  color: var(--wp-muted);
  font-size: 0.96rem;
  line-height: 1.55;
  vertical-align: top;
}

.wp-art-page .wp-table tbody tr + tr :is(th, td) {
  border-top: 1px solid var(--wp-line);
}

.wp-art-page .wp-table__tag {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
}

.wp-art-page .wp-table__tag.is-low {
  color: var(--wp-blue);
  background: rgba(10, 96, 157, 0.12);
}

.wp-art-page .wp-table__tag.is-high {
  color: var(--wp-pink-deep);
  background: rgba(202, 11, 87, 0.11);
}

.wp-art-page .wp-table__note {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 0;
  padding: 20px 24px 22px;
  border-top: 1px solid var(--wp-line);
  color: var(--wp-muted);
  background: var(--wp-paper);
  font-size: 0.95rem;
  line-height: 1.6;
}

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

/* ---------- dunkle Technik- und Kostensektion ---------- */

.wp-art-page .wp-tech__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.68fr);
  gap: clamp(32px, 3.4vw, 84px);
  align-items: start;
}

.wp-art-page .wp-tech__intro h2 {
  margin: 16px 0 18px;
  font-size: clamp(2.1rem, 2.6vw, 2.9rem);
  line-height: 1.05;
}

.wp-art-page .wp-tech__intro p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.02rem;
  line-height: 1.75;
}

.wp-art-page .wp-tech__intro .wp-tech__orient {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.86);
}

.wp-art-page .wp-tech__list {
  display: grid;
  gap: 16px;
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  list-style: none;
}

.wp-art-page .wp-tech__list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.98rem;
  line-height: 1.6;
}

.wp-art-page .wp-tech__list .lucide {
  width: 18px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--wp-blue-light);
}

.wp-art-page .wp-tech__list strong {
  color: #fff;
}

/* Preiskarte: die Vorlage setzt hier eine helle Karte in die dunkle Flaeche */
.wp-art-page .wp-price {
  padding: var(--wp-card-pad);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
}

.wp-art-page .wp-price > span {
  display: block;
  color: var(--wp-muted);
  font-size: 0.86rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.wp-art-page .wp-price__value {
  margin: 10px 0 0;
  color: var(--wp-pink);
  font-family: var(--eco-display);
  font-size: clamp(1.85rem, 2.4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
}

.wp-art-page .wp-price__value small {
  display: block;
  margin-top: 8px;
  color: var(--wp-muted);
  font-family: var(--eco-body);
  font-size: 0.88rem;
  font-weight: 600;
}

.wp-art-page .wp-price ul {
  display: grid;
  gap: 13px;
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--wp-line);
  list-style: none;
}

.wp-art-page .wp-price li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--wp-ink);
  font-size: 0.96rem;
  line-height: 1.55;
}

.wp-art-page .wp-price li .lucide {
  width: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--wp-pink);
}

.wp-art-page .wp-price .wp-btn {
  width: 100%;
  margin-top: 24px;
}

.wp-art-page .wp-price__rate {
  margin: 16px 0 0;
  padding: 14px 4px 0;
  border-top: 1px solid var(--wp-line);
  color: var(--wp-muted);
  font-size: 0.84rem;
  line-height: 1.55;
  text-align: center;
}

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

.wp-art-page .wp-price__note {
  margin: 12px 0 0;
  color: var(--wp-muted);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
}

/* ---------- Foerderung und Sicherheit ---------- */

.wp-art-page .wp-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.wp-art-page .wp-pair > section {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--wp-line);
  border-radius: 18px;
  background: #fff;
}

.wp-art-page .wp-pair__body {
  padding: calc(var(--wp-card-pad) * 1.15);
}

.wp-art-page .wp-pair h2 {
  margin: 14px 0 18px;
  font-size: clamp(1.9rem, 2.3vw, 2.5rem);
  line-height: 1.08;
}

.wp-art-page .wp-pair p {
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.7;
}

.wp-art-page .wp-pair .wp-checklist li {
  font-size: 0.98rem;
}

/* Foto sitzt am Kartenfuss, damit beide Ueberschriften auf einer Hoehe starten. */
.wp-art-page .wp-pair__shot {
  aspect-ratio: 2.4;
  margin-top: auto;
  border-radius: 0;
}

.wp-art-page .wp-pair__figure {
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--wp-line);
}

.wp-art-page .wp-pair__mark {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 13px;
  padding: 8px 15px 8px 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--wp-pink);
  font-size: 0.86rem;
  font-weight: 800;
}

.wp-art-page .wp-pair__mark .lucide {
  width: 16px;
}

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

/* ---------- FAQ ---------- */

.wp-art-page .wp-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  align-items: start;
  margin-top: clamp(36px, 3.4vw, 72px);
}

.wp-art-page .wp-faq details {
  overflow: hidden;
  border: 1px solid var(--wp-line);
  border-radius: 14px;
  background: #fff;
}

.wp-art-page .wp-faq summary {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 21px 24px;
  color: var(--wp-ink);
  font-family: var(--eco-display);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
}

.wp-art-page .wp-faq summary::-webkit-details-marker {
  display: none;
}

.wp-art-page .wp-faq summary .lucide {
  width: 19px;
  flex: 0 0 auto;
  color: var(--wp-pink);
  transition: transform 0.25s ease;
}

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

.wp-art-page .wp-faq details p {
  margin: 0;
  padding: 0 24px 24px;
  color: var(--wp-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.wp-art-page .wp-faq details p a {
  color: var(--wp-ink);
  font-weight: 750;
  text-decoration-color: var(--wp-pink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.wp-art-page .wp-faq details p a:hover {
  color: var(--wp-pink);
}

/* ---------- Abschluss mit Formular ---------- */

.wp-art-page .wp-close__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.82fr);
  gap: clamp(40px, 4.6vw, 112px);
  align-items: center;
}

.wp-art-page .wp-close__copy h2 {
  margin: 16px 0 18px;
  font-size: clamp(2.3rem, 3vw, 3.3rem);
  line-height: 1.04;
}

.wp-art-page .wp-close__copy > p {
  max-width: 56ch;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.75;
}

.wp-art-page .wp-close__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin: 32px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--wp-line);
  list-style: none;
}

.wp-art-page .wp-close__points li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.wp-art-page .wp-close__points .lucide {
  width: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--wp-blue);
}

.wp-art-page .wp-close__points a {
  color: inherit;
  text-decoration: none;
}

.wp-art-page .wp-close__points a:hover strong,
.wp-art-page .wp-close__points a:focus-visible strong {
  color: var(--wp-pink);
}

.wp-art-page .wp-close__points strong {
  display: block;
  color: var(--wp-ink);
  font-size: 0.98rem;
  font-weight: 800;
}

.wp-art-page .wp-close__points small {
  display: block;
  color: var(--wp-muted);
  font-size: 0.86rem;
}

.wp-art-page .wp-form {
  padding: var(--wp-card-pad);
  border: 1px solid var(--wp-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 26px 56px rgba(11, 33, 56, 0.1);
}

.wp-art-page .wp-form > h3 {
  margin: 0 0 20px;
  font-size: 1.6rem;
  line-height: 1.15;
}

.wp-art-page .wp-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.wp-art-page .wp-form__field {
  margin-bottom: 18px;
}

.wp-art-page .wp-form__grid .wp-form__field {
  margin-bottom: 0;
}

.wp-art-page .wp-form label {
  display: block;
  margin-bottom: 8px;
  color: #3d5563;
  font-size: 0.86rem;
  font-weight: 750;
}

/* Die Felder trugen zuvor den hellen Trennlinien-Ton als Rand und
   verschwanden dadurch auf der weissen Karte. Sie brauchen eine sichtbare
   Kontur, damit die Eingabeflaeche als Eingabeflaeche lesbar ist. */
.wp-art-page .wp-form :is(input, select, textarea) {
  width: 100%;
  border: 1px solid #c8d6df;
  border-radius: 10px;
  outline: 0;
  color: var(--wp-ink);
  background: #f7fafc;
  box-shadow: none;
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.wp-art-page .wp-form ::placeholder {
  color: #7c8f9b;
  opacity: 1;
}

.wp-art-page .wp-form :is(input, select) {
  height: 56px;
  padding: 0 16px;
}

/* Eigenes Auswahlzeichen statt des Betriebssystem-Pfeils, damit die
   Auswahlliste wie die uebrigen Felder aussieht. */
.wp-art-page .wp-form select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%230b2138' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  appearance: none;
}

.wp-art-page .wp-form textarea {
  min-height: 112px;
  padding: 16px;
  line-height: 1.6;
  resize: vertical;
}

.wp-art-page .wp-form :is(input, select, textarea):hover {
  border-color: #a8bcc9;
}

.wp-art-page .wp-form :is(input, select, textarea):focus {
  border-color: var(--wp-pink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(202, 11, 87, 0.14);
}

.wp-art-page .wp-form button {
  width: 100%;
  margin-top: 6px;
}

.wp-art-page .wp-form__legal {
  margin: 14px 0 0;
  color: var(--wp-muted);
  font-size: 0.84rem;
  line-height: 1.55;
  text-align: center;
}

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

.wp-art-page .wp-form .lead-form__prefill {
  margin: 0 0 16px;
}

/* ---------- Einsatzgebiet ---------- */

.wp-art-page .wp-area {
  padding: clamp(28px, 2vw, 40px) 0;
  border-top: 1px solid var(--wp-line);
  background: #fff;
}

.wp-art-page .wp-area__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  align-items: center;
  justify-content: space-between;
}

.wp-art-page .wp-area__label {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--wp-ink);
  font-size: 0.86rem;
  font-weight: 800;
}

.wp-art-page .wp-area__label .lucide {
  width: 17px;
  color: var(--wp-pink);
}

.wp-art-page .wp-area p {
  min-width: 0;
  flex: 1;
  margin: 0;
  color: var(--wp-muted);
  font-size: 0.92rem;
}

.wp-art-page .wp-area a {
  color: var(--wp-blue);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.wp-art-page .wp-area a:hover {
  text-decoration: underline;
}

.wp-art-page .wp-main > .service-subnav {
  border-top: 1px solid var(--wp-line);
}

/* ---------- Breakpoints ---------- */

@media (max-width: 1299.98px) {
  .wp-art-page .wp-flow__caption {
    padding: 22px 24px 24px;
  }

  .wp-art-page .wp-tech__layout {
    grid-template-columns: 1fr;
  }

  .wp-art-page .wp-price {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1099.98px) {
  .wp-art-page .wp-systems {
    padding-top: 5.8rem;
  }

  .wp-art-page .wp-systems__bg img {
    object-position: 82% 48%;
  }

  .wp-art-page .wp-systems__routes {
    grid-template-columns: 1fr;
  }

  .wp-art-page .wp-systems__routes dl > div {
    grid-template-columns: 5.8rem minmax(0, 1fr);
  }

  .wp-art-page .wp-flow__board {
    grid-template-columns: 1fr;
  }

  .wp-art-page .wp-flow__stage {
    min-height: 0;
  }

  .wp-art-page .wp-flow__frame {
    position: relative;
    inset: auto;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .wp-art-page .wp-flow__frame:first-child,
  .wp-art-page .wp-flow__board:has(.wp-flow__nav li:nth-child(1) input:checked) .wp-flow__frame:nth-child(1),
  .wp-art-page .wp-flow__board:has(.wp-flow__nav li:nth-child(2) input:checked) .wp-flow__frame:nth-child(2),
  .wp-art-page .wp-flow__board:has(.wp-flow__nav li:nth-child(3) input:checked) .wp-flow__frame:nth-child(3),
  .wp-art-page .wp-flow__board:has(.wp-flow__nav li:nth-child(4) input:checked) .wp-flow__frame:nth-child(4),
  .wp-art-page .wp-flow__board:has(.wp-flow__nav li:nth-child(5) input:checked) .wp-flow__frame:nth-child(5) {
    display: flex;
  }

  .wp-art-page .wp-flow__board:has(.wp-flow__nav input:checked) .wp-flow__frame:first-child {
    display: none;
  }

  .wp-art-page .wp-flow__board:has(.wp-flow__nav li:nth-child(1) input:checked) .wp-flow__frame:first-child {
    display: flex;
  }

  .wp-art-page .wp-flow__frame img {
    position: relative;
    height: 15.5rem;
  }

  .wp-art-page .wp-flow__frame::after {
    height: 15.5rem;
    bottom: auto;
  }

  .wp-art-page .wp-flow__caption {
    color: var(--wp-ink);
    background: #fff;
    padding: 18px 20px 20px;
  }

  .wp-art-page .wp-main .wp-flow__caption h3 {
    color: var(--wp-ink);
  }

  .wp-art-page .wp-flow__caption > p {
    color: var(--wp-muted);
  }

  .wp-art-page .wp-flow__out {
    background: #f3f7fa;
    color: var(--wp-ink);
  }

  .wp-art-page .wp-flow__out span {
    color: var(--wp-blue);
  }

  .wp-art-page .wp-flow__nav {
    border-left: 0;
    border-top: 1px solid var(--wp-line);
  }

  .wp-art-page .wp-flow__nav label {
    min-height: 4.4rem;
  }

  .wp-art-page .wp-fit__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-right: 0;
  }

  .wp-art-page .wp-fit--end .wp-fit__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    padding-right: 0;
    padding-left: 0;
  }

  .wp-art-page .wp-fit--end .wp-fit__media,
  .wp-art-page .wp-fit--end .wp-fit__copy {
    grid-area: auto;
  }

  .wp-art-page .wp-fit__shot,
  .wp-art-page .wp-fit--end .wp-fit__shot {
    aspect-ratio: 1.55;
    border-radius: 0 0 clamp(18px, 3vw, 28px) clamp(18px, 3vw, 28px);
  }

  .wp-art-page .wp-fit--end .wp-fit__shot img {
    object-position: 62% 42%;
  }

  .wp-art-page .wp-fit--form .wp-fit__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .wp-art-page .wp-fit--form .wp-form,
  .wp-art-page .wp-fit--form .wp-fund {
    position: static;
    top: auto;
  }

  .wp-art-page .wp-fit--form .wp-fit__copy {
    padding-inline: 0;
  }

  .wp-art-page .wp-fit__copy {
    max-width: none;
    padding-inline: var(--container-gutter);
  }

  .wp-art-page #einordnung,
  .wp-art-page #systeme {
    padding-top: 0;
  }

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

  .wp-art-page .wp-pair {
    grid-template-columns: 1fr;
  }

  .wp-art-page .wp-close__layout {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  /* Einspaltig laeuft das Foto ueber die ganze Fensterbreite und ist nur
     unten gerundet. Nur der Text bekommt wieder die Containerkante. */
  .wp-art-page .wp-intro__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-right: 0;
  }

  .wp-art-page .wp-intro__shot {
    aspect-ratio: 1.55;
    border-radius: 0 0 clamp(18px, 3vw, 28px) clamp(18px, 3vw, 28px);
  }

  .wp-art-page .wp-intro__shot img {
    object-position: center 36%;
  }

  /* Karte bleibt auf dem Foto, auch einspaltig. */
  .wp-art-page .wp-intro__badge {
    position: absolute;
    z-index: 2;
    left: var(--container-gutter);
    right: auto;
    bottom: 16px;
    width: min(280px, calc(100% - 32px));
    max-width: none;
    margin: 0;
  }

  .wp-art-page .wp-intro__copy {
    max-width: none;
    padding-inline: var(--container-gutter);
  }
}

@media (max-width: 767.98px) {
  html:has(.wp-art-page) {
    scroll-padding-bottom: 88px;
  }

  .wp-art-page .wp-section {
    padding: 54px 0;
  }

  .wp-art-page #einordnung {
    padding-top: 0;
  }

  .wp-art-page #systeme {
    padding: 5.6rem 0 36px;
  }

  .wp-art-page :is(#anfrage, #einordnung, #ablauf, #passgenau, #systeme, #kosten, #foerderung, #faq) {
    scroll-margin-bottom: 88px;
  }

  .wp-art-page .wp-main {
    padding-bottom: 88px;
  }

  .wp-art-page .wp-faq summary {
    padding: 18px 18px;
    font-size: 1.12rem;
  }

  .wp-art-page .wp-faq details p {
    padding: 0 18px 18px;
  }

  /* Auch auf dem Handy bleibt die dunkle Flaeche der Einschnitt. Ohne diese
     Zeile zieht die Regel darueber sie auf dasselbe Mass wie alle anderen. */
  .wp-art-page .wp-section--dark {
    padding: 68px 0;
  }

  .wp-art-page .wp-main.eco-with-shared-header {
    padding-top: 6.4rem;
  }

  .wp-art-page .wp-hero {
    --wp-hero-header: 6.4rem;

    min-height: 0;
    padding: 16px 0 24px;
  }

  /* Auf schmalen Schirmen deckt der Querverlauf den Text nicht mehr zu.
     Dort traegt der senkrechte Verlauf die Lesbarkeit. Er muss auch oben
     dunkel bleiben, sonst steht die pinke Vorzeile auf dem hellen Fenster
     im Bild und ist nicht mehr lesbar. */
  .wp-art-page .wp-hero::after {
    background:
      linear-gradient(
        to top,
        rgba(6, 22, 38, 0.95) 0%,
        rgba(6, 22, 38, 0.9) 42%,
        rgba(6, 22, 38, 0.8) 74%,
        rgba(6, 22, 38, 0.7) 100%
      );
  }

  /* Hochkant bleibt nur ein schmaler Streifen des Motivs sichtbar.
     Der Ausschnitt liegt auf dem Aussengeraet statt auf der Fensterflaeche. */
  .wp-art-page .wp-hero__bg img {
    object-position: 70% 50%;
  }

  .wp-art-page .wp-hero__copy {
    max-width: none;
  }

  .wp-art-page .wp-hero h1 {
    margin: 10px 0 12px;
    font-size: clamp(2.35rem, 10.5vw, 3.1rem);
  }

  .wp-art-page .wp-hero__lead {
    margin-bottom: 14px;
    font-size: 1.02rem;
  }

  .wp-art-page .wp-hero__proof {
    margin-bottom: 8px;
    font-size: 0.86rem;
  }

  .wp-art-page .wp-hero .wp-checklist {
    margin-bottom: 18px;
    gap: 10px;
  }

  .wp-art-page .wp-hero .wp-actions {
    align-items: flex-start;
    gap: 8px;
  }

  .wp-art-page .wp-trust__brands {
    gap: 10px 6px;
  }

  .wp-art-page .wp-trust__brands li {
    font-size: 1.05rem;
  }

  .wp-art-page .wp-flow__facts,
  .wp-art-page .wp-faq__grid,
  .wp-art-page .wp-tech__layout,
  .wp-art-page .wp-close__layout,
  .wp-art-page .wp-close__points {
    grid-template-columns: 1fr;
  }

  .wp-art-page .wp-close__points {
    gap: 18px;
  }

  .wp-art-page .wp-fit__shot,
  .wp-art-page .wp-fit--end .wp-fit__shot {
    aspect-ratio: 1.45;
  }

  .wp-art-page .wp-head--center {
    text-align: left;
  }

  .wp-art-page .wp-main h2 .wp-line {
    display: inline;
  }

  .wp-art-page :is(.wp-btn, .wp-form button) {
    width: 100%;
    padding: 0 20px;
  }

  .wp-art-page a.wp-btn.wp-btn--call {
    justify-content: flex-start;
    padding: 0 20px 0 8px;
  }

  .wp-art-page .wp-table__hint {
    display: flex;
  }

  .wp-art-page .wp-table table {
    min-width: 620px;
  }

  .wp-art-page .wp-table tbody th {
    width: 124px;
    min-width: 124px;
    padding: 15px 13px;
    font-size: 0.86rem;
  }

  .wp-art-page .wp-table :is(thead th, tbody td) {
    padding: 15px 14px;
  }

  .wp-art-page .wp-pair__shot {
    aspect-ratio: 1.42;
  }

  .wp-art-page .wp-pair__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
  }

  .wp-art-page .wp-intro__shot {
    aspect-ratio: 1.45;
  }

  .wp-art-page .wp-intro__badge {
    left: 16px;
    bottom: 14px;
    width: min(260px, calc(100% - 28px));
    padding: 12px 14px;
  }

  .wp-art-page .wp-intro__cases {
    grid-template-columns: 1fr;
    background-image: none;
  }

  .wp-art-page .wp-intro__cases li {
    min-height: 56px;
    padding: 14px 16px;
    font-size: 0.94rem;
    border-bottom: 1px solid var(--wp-line);
  }

  .wp-art-page .wp-intro__cases li:last-child {
    border-bottom: 0;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .wp-art-page .wp-main :is(img, a, button, .lucide) {
    transition: none !important;
  }

  .wp-art-page :is(.wp-btn, .wp-form button):hover {
    transform: none;
  }
}