/* static/site.css — Inhaltsblöcke der CMS-Seiten (cms/page.html → body.wp-neu)
 *
 * Idee: eine saubere Werkstattzeichnung statt Prospekt. Zeichenpapier, blaue
 * Tinte, EINE Masskette unter der ersten Überschrift als Erkennungszeichen.
 * Linksbündig, asymmetrisches Raster, Screenshots als überlappende Collage,
 * keine Karten, keine Versalien.
 *
 * Rahmen (Schrift, Farben, Kopf, Menü, Fuß): static/site_frame.css.
 * Markup: templates/cms/block.html (Klassen hp-*).
 * Bewegung: beim Scrollen werden die Abschnitte aus der Unschärfe scharf
 * (static/site.js, Klasse hp-unscharf) — sonst nur die Masskette.
 */

/* Das alte Scroll-Reveal aus main.js greift hier nicht. */
body.wp-neu .reveal,
body.wp-neu .reveal-child { opacity: 1 !important; transform: none !important; transition: none !important; }

body.wp-neu .hp-steps-list li,
body.wp-neu .hp-points li,
body.wp-neu .hp-trust-list li { list-style: none; }
body.wp-neu .hp-steps-list li::marker,
body.wp-neu .hp-points li::marker { content: none; }

body.wp-neu #app { max-width: none; padding: 0; }

.hp-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--hp-gutter);
}

/* ── Typografie ────────────────────────────────────────────────────────── */
body.wp-neu .hp-display,
body.wp-neu .hp-h2,
body.wp-neu .hp-steps h3,
body.wp-neu .hp-points strong {
  font-family: var(--hp-font);
  color: var(--hp-ink);
  text-transform: none;
  text-align: left;
}
body.wp-neu .hp-display {
  font-size: clamp(3rem, 8.4vw, 8.25rem);
  line-height: .92;
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: -.035em;
  margin: 0;
  max-width: 13ch;
}
/* lange Überschriften (z. B. Funktionsseiten) etwas kleiner */
body.wp-neu .hp-display.hp-display--lang {
  font-size: clamp(2.5rem, 5.4vw, 5.2rem);
  line-height: .98;
  max-width: 17ch;
}
body.wp-neu .hp-h2 {
  font-size: clamp(2rem, 3.9vw, 3.5rem);
  line-height: 1.02;
  font-weight: 600;
  font-stretch: 90%;
  letter-spacing: -.028em;
  margin: 0 0 .5em;
  max-width: 16ch;
  text-wrap: balance;
}
body.wp-neu .hp-lead,
body.wp-neu .hp-body,
body.wp-neu .hp-note-text p,
body.wp-neu .hp-faq p {
  font-family: var(--hp-font);
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--hp-ink);
  text-align: left;
  max-width: 34em;
  margin: 0 0 1em;
  padding: 0;
}

/* ── Knöpfe und Links ──────────────────────────────────────────────────── */
body.wp-neu .hp-actions { margin: 1.6em 0 0; padding: 0; text-align: left; }
body.wp-neu a.hp-btn {
  display: inline-block;
  font-family: var(--hp-font);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--hp-ink);
  background: var(--hp-yellow);
  padding: .8em 1.5em;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
body.wp-neu a.hp-btn:hover { background: var(--hp-ink); color: var(--hp-yellow); }
body.wp-neu a.hp-link {
  font-family: var(--hp-font);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--hp-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .28em;
}
body.wp-neu a.hp-link:hover { text-decoration-color: var(--hp-yellow); text-decoration-thickness: .5em; text-underline-offset: -.1em; text-decoration-skip-ink: none; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hp-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(110px, 10vw, 140px) 0 clamp(28px, 4vw, 48px);
}
/* Zeichenpapier: feines Raster, nach unten ausgeblendet — als eigene Ebene,
   damit die Maske nicht auch Text und Knopf blasser macht */
.hp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(0, 7, 255, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 7, 255, .07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 40%, transparent 92%);
  pointer-events: none;
}
.hp-hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.hp-hero-text { display: contents; }
.hp-hero-text > .hp-display { grid-column: 1 / -1; grid-row: 1; }
.hp-hero-text > .hp-mass,
.hp-hero-text > .hp-lead,
.hp-hero-text > .hp-actions { grid-column: 1 / span 5; }
.hp-hero-text > .hp-mass { grid-row: 2; }
.hp-hero-text > .hp-lead { grid-row: 3; }
.hp-hero-text > .hp-actions { grid-row: 4; }
.hp-hero-media { grid-column: 7 / span 6; grid-row: 2 / span 4; margin-top: clamp(24px, 3vw, 40px); }
.hp-hero-media video,
.hp-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  background: var(--hp-white);
}

/* Die Masskette */
.hp-mass {
  position: relative;
  width: 100%;
  height: 26px;
  margin: clamp(28px, 3vw, 40px) 0 22px;
}
.hp-mass-line {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 0;
  border-top: 1.5px solid var(--hp-blue);
  transform-origin: left center;
  animation: hp-mass-zeichnen 1.1s cubic-bezier(.6, 0, .2, 1) .25s both;
}
/* Endpunkte: kurze Schrägstriche wie in einer Bauzeichnung */
.hp-mass-line::before,
.hp-mass-line::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 1.5px;
  height: 18px;
  background: var(--hp-blue);
  transform: rotate(45deg);
}
.hp-mass-line::before { left: 0; }
.hp-mass-line::after { right: 0; }
.hp-mass-label {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--hp-paper);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--hp-blue);
  animation: hp-einblenden .4s ease 1.15s both;
}
@keyframes hp-mass-zeichnen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hp-einblenden { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hp-mass-line, .hp-mass-label { animation: none; }
}

/* ── Vertrauen ─────────────────────────────────────────────────────────── */
.hp-trust { padding: 0 0 clamp(40px, 6vw, 80px); }
body.wp-neu .hp-trust-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 0;
  margin-bottom: 0;
}
body.wp-neu .hp-trust-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--hp-graphite);
}
.hp-trust-list img { width: 14px; height: 14px; opacity: .7; }

/* ── Drei Schritte ─────────────────────────────────────────────────────── */
.hp-steps { padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 6vw, 80px); }
body.wp-neu .hp-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
}
/* leicht versetzt — lose wie Skizzen auf dem Tisch */
.hp-steps-list li:nth-child(2) { margin-top: clamp(16px, 3vw, 48px); }
.hp-steps-list li:nth-child(3) { margin-top: clamp(32px, 6vw, 96px); }
/* Skizze in einem weißen Kreis — wie ein Aufkleber auf dem Plan */
.hp-step-kreis {
  display: grid;
  place-items: center;
  width: clamp(150px, 15vw, 200px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hp-white);
  margin-bottom: 20px;
}
.hp-steps-list .hp-step-kreis img {
  display: block;
  width: 62%;
  height: 62%;
  object-fit: contain;
  filter: invert(1);             /* weiße Tinte → schwarze Tinte */
  mix-blend-mode: multiply;
}
body.wp-neu .hp-steps h3 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 .3em;
}
body.wp-neu .hp-steps li p {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--hp-graphite);
  margin: 0;
  padding: 0;
  text-align: left;
  max-width: 26em;
}
.hp-steps .hp-actions { margin-top: 2.5rem; }

/* ── Funktion mit Screenshots ──────────────────────────────────────────── */
.hp-feature { padding: clamp(72px, 9vw, 130px) 0; }
.hp-feature-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.hp-feature-text { grid-column: 1 / span 5; grid-row: 1; padding-top: 1rem; padding-right: clamp(0px, 2vw, 32px); }
.hp-collage { grid-column: 6 / span 7; grid-row: 1; }
.hp-feature--flip .hp-feature-text { grid-column: 8 / span 5; padding-right: 0; padding-left: clamp(0px, 2vw, 32px); }
.hp-feature--flip .hp-collage { grid-column: 1 / span 7; }
/* Abschnitt ohne Bilder: Text darf breiter laufen */
.hp-feature-text:only-child,
.hp-feature--flip .hp-feature-text:only-child { grid-column: 1 / span 8; padding-left: 0; padding-right: 0; }
body.wp-neu .hp-feature-text:only-child .hp-h2 { max-width: 20ch; }
body.wp-neu .hp-feature .hp-h2 { font-size: clamp(2rem, 3.3vw, 3.1rem); max-width: 14ch; }

body.wp-neu .hp-tag {
  display: inline-block;
  font-size: .9rem;
  font-weight: 600;
  background: var(--hp-yellow);
  color: var(--hp-ink);
  padding: .2em .65em;
  border-radius: 6px;
  margin: 0 0 1.1rem;
}
body.wp-neu .hp-points {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
}
body.wp-neu .hp-points li {
  padding: .8rem 0;
  border-top: 1px solid var(--hp-rule);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--hp-graphite);
}
body.wp-neu .hp-points li:last-child { border-bottom: 1px solid var(--hp-rule); }
body.wp-neu .hp-points strong { display: block; font-size: 1.05rem; font-weight: 600; margin-bottom: .15rem; }

/* Collage: zweites Bild überlappt das erste unten, versetzt */
.hp-collage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto;
}
.hp-shot { margin: 0; }
.hp-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px;
  background: var(--hp-white);
}
.hp-shot figcaption {
  font-size: .9rem;
  font-weight: 500;
  color: var(--hp-graphite);
  padding: .6rem 2px 0;
}
.hp-collage--1 .hp-shot--1 { grid-column: 1 / -1; }
.hp-collage--2 .hp-shot--1 { grid-column: 1 / span 10; grid-row: 1; }
.hp-collage--2 .hp-shot--2 {
  grid-column: 5 / span 8;
  grid-row: 2;
  margin-top: -18%;
  position: relative;
  z-index: 1;
}
.hp-collage--2 .hp-shot--2 img { box-shadow: 0 0 0 8px var(--hp-paper); }
.hp-feature--flip .hp-collage--2 .hp-shot--1 { grid-column: 3 / span 10; }
.hp-feature--flip .hp-collage--2 .hp-shot--2 { grid-column: 1 / span 8; }
/* Die Unterschrift des ersten Bildes liegt dort, wo das zweite sie nicht verdeckt */
.hp-feature--flip .hp-collage--2 .hp-shot--1 figcaption { text-align: right; }
.hp-collage--3 .hp-shot--1 { grid-column: 1 / span 8; grid-row: 1; }
.hp-collage--3 .hp-shot--2 { grid-column: 7 / span 6; grid-row: 1; margin-top: 30%; position: relative; z-index: 1; }
.hp-collage--3 .hp-shot--3 { grid-column: 2 / span 6; grid-row: 2; margin-top: -8%; }
.hp-collage--3 .hp-shot--2 img, .hp-collage--3 .hp-shot--3 img { box-shadow: 0 0 0 8px var(--hp-paper); }
.hp-collage--4 { gap: 16px; }
.hp-collage--4 .hp-shot { grid-column: span 6; }

/* Blaupause: Variante „Dunkel“ bzw. „Blau“ im CMS */
.hp-feature--blueprint { padding: clamp(40px, 5vw, 72px) 0; }
.hp-feature--blueprint > .hp-wrap {
  background-color: var(--hp-blue);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: 32px 32px;
  border-radius: 28px;
  padding-top: clamp(40px, 6vw, 88px);
  padding-bottom: clamp(40px, 6vw, 88px);
  max-width: calc(1360px - 2 * var(--hp-gutter));
  width: calc(100% - 2 * var(--hp-gutter));
}
body.wp-neu .hp-feature--blueprint .hp-h2,
body.wp-neu .hp-feature--blueprint .hp-body,
body.wp-neu .hp-feature--blueprint .hp-points strong { color: var(--hp-white); }
body.wp-neu .hp-feature--blueprint .hp-points li { color: rgba(255, 255, 255, .78); border-color: rgba(255, 255, 255, .28); }
body.wp-neu .hp-feature--blueprint a.hp-link { color: var(--hp-yellow); }
.hp-feature--blueprint .hp-shot figcaption { color: rgba(255, 255, 255, .8); }
.hp-feature--blueprint .hp-collage--2 .hp-shot--2 img,
.hp-feature--blueprint .hp-collage--3 .hp-shot img { box-shadow: 0 0 0 8px var(--hp-blue); }

/* ── Nebensektion (weitere Hero-Blöcke) ────────────────────────────────── */
.hp-aside { padding: clamp(64px, 8vw, 110px) 0; }
.hp-aside-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: center;
}
.hp-aside-text { grid-column: 1 / span 5; }
.hp-aside-media { grid-column: 7 / span 6; }
.hp-aside-media video, .hp-aside-media img { display: block; width: 100%; height: auto; border-radius: 16px; }

/* ── Leistungsübersicht (partials/plans.html, hier neu eingekleidet) ───── */
body.wp-neu .hp-plans .lp-pricing-plans {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  margin: 0 auto;
  max-width: 1360px;
  padding: clamp(80px, 10vw, 140px) var(--hp-gutter);
  box-sizing: border-box;
}
body.wp-neu .hp-plans .lp-section-head { text-align: left; margin-bottom: 40px; }
body.wp-neu .hp-plans .lp-section-head h2 {
  font-family: var(--hp-font);
  font-size: clamp(2rem, 3.9vw, 3.5rem);
  line-height: 1.02;
  font-weight: 600;
  font-stretch: 90%;
  letter-spacing: -.028em;
  text-transform: none;
  color: var(--hp-ink);
  text-align: left;
}
body.wp-neu .hp-plans .pricing-container { max-width: none; justify-content: flex-start; gap: 24px; align-items: stretch; }
body.wp-neu .hp-plans .pricing-card {
  box-sizing: border-box;
  font-family: var(--hp-font);
  max-width: 560px;
  border: 0;
  border-radius: 24px;
  box-shadow: none;
  background: var(--hp-white);
  padding: clamp(28px, 3vw, 44px);
  transform: none;
}
body.wp-neu .hp-plans .pricing-card:hover { transform: none; box-shadow: none; }
body.wp-neu .hp-plans .pricing-card-header { text-align: left; margin-bottom: 8px; }
body.wp-neu .hp-plans .plan-name {
  font-family: var(--hp-font);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--hp-ink);
  text-align: left;
  margin: 0;
}
body.wp-neu .hp-plans .plan-badge { background: none; padding: 0; border-radius: 0; font-size: 1rem; color: var(--hp-graphite); }
body.wp-neu .hp-plans .pricing-card-price { text-align: left; border-bottom: 1px solid var(--hp-rule); padding-bottom: 20px; margin-bottom: 20px; }
body.wp-neu .hp-plans .price-value { font-family: var(--hp-font); font-size: 3.4rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
body.wp-neu .hp-plans .price-period { font-family: var(--hp-font); color: var(--hp-graphite); }
body.wp-neu .hp-plans .team-size-selector { justify-content: flex-start; background: var(--hp-paper); border-radius: 12px; }
body.wp-neu .hp-plans .team-size-label { font-family: var(--hp-font); }
body.wp-neu .hp-plans .team-size-input { font-family: var(--hp-font); border-width: 1.5px; }
body.wp-neu .hp-plans .module-title {
  font-family: var(--hp-font);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--hp-ink);
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 4px;
}
body.wp-neu .hp-plans .module-title-highlight {
  background: var(--hp-yellow);
  color: var(--hp-ink);
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
}
body.wp-neu .hp-plans .module-title-excluded { color: var(--hp-graphite); }
body.wp-neu .hp-plans .pricing-card-features li { font-family: var(--hp-font); font-size: .95rem; color: var(--hp-ink); }
body.wp-neu .hp-plans .feature-included .feature-icon,
body.wp-neu .hp-plans .feature-upgrade .feature-icon { color: var(--hp-blue) !important; }
body.wp-neu .hp-plans .feature-excluded .feature-icon { color: var(--hp-graphite) !important; }
body.wp-neu .hp-plans .feature-excluded span:last-child { color: var(--hp-graphite); }
/* Pro als blaue Karte */
body.wp-neu .hp-plans .pricing-card-featured { background: var(--hp-blue); color: var(--hp-white); }
body.wp-neu .hp-plans .pricing-card-featured .plan-name,
body.wp-neu .hp-plans .pricing-card-featured .price-value,
body.wp-neu .hp-plans .pricing-card-featured .module-title,
body.wp-neu .hp-plans .pricing-card-featured .pricing-card-features li,
body.wp-neu .hp-plans .pricing-card-featured .team-size-label { color: var(--hp-white); }
body.wp-neu .hp-plans .pricing-card-featured .plan-badge,
body.wp-neu .hp-plans .pricing-card-featured .price-period { color: rgba(255, 255, 255, .75); }
body.wp-neu .hp-plans .pricing-card-featured .pricing-card-price { border-color: rgba(255, 255, 255, .3); }
body.wp-neu .hp-plans .pricing-card-featured .team-size-selector { background: rgba(255, 255, 255, .12); }
body.wp-neu .hp-plans .pricing-card-featured .team-size-input { background: var(--hp-white); color: var(--hp-blue); border-color: var(--hp-white); }
body.wp-neu .hp-plans .pricing-card-featured .module-title-highlight { color: var(--hp-ink); }
body.wp-neu .hp-plans .pricing-card-featured .feature-included .feature-icon,
body.wp-neu .hp-plans .pricing-card-featured .feature-upgrade .feature-icon { color: var(--hp-yellow) !important; }
/* Kennzeichen als Formen statt Zeichen (das ✓ fiel je nach System in eine
   fremde Schrift): Punkt = enthalten, Winkel = erweitert, Strich = nicht enthalten */
body.wp-neu .hp-plans .pricing-card-features li { align-items: baseline; }
body.wp-neu .hp-plans .feature-icon {
  font-size: 0 !important;
  filter: none;          /* styles.css kehrt .feature-icon global um */
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 1em;
  align-self: center;
}
body.wp-neu .hp-plans .feature-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--hp-blue);
}
body.wp-neu .hp-plans .feature-upgrade .feature-icon::before {
  border-radius: 0;
  background: none;
  width: 6px;
  height: 6px;
  margin-top: -1px;
  border-left: 2px solid var(--hp-blue);
  border-top: 2px solid var(--hp-blue);
  transform: rotate(45deg);
}
body.wp-neu .hp-plans .feature-excluded .feature-icon::before {
  border-radius: 1px;
  width: 9px;
  height: 2px;
  margin-top: -1px;
  background: var(--hp-graphite);
}
body.wp-neu .hp-plans .pricing-card-featured .feature-included .feature-icon::before { background: var(--hp-yellow); }
body.wp-neu .hp-plans .pricing-card-featured .feature-upgrade .feature-icon::before { background: none; border-color: var(--hp-yellow); }

body.wp-neu .hp-plans .plan-soon { font-family: var(--hp-font); border-radius: 999px; }
body.wp-neu .hp-plans .pricing-footer {
  font-family: var(--hp-font);
  border: 0;
  width: auto;
  padding: 0;
  margin: 28px 0 0;
  text-align: left;
  font-weight: 500;
  font-size: .95rem;
  color: var(--hp-graphite);
}

/* ── Über WERKPORT ─────────────────────────────────────────────────────── */
.hp-note, .hp-textblock { padding: clamp(64px, 8vw, 120px) 0; }
body.wp-neu #about-werkport { box-shadow: none; background: transparent; }
.hp-note-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}
.hp-note-grid > .hp-h2 { grid-column: 1 / span 4; }
.hp-note-text { grid-column: 6 / span 7; }
body.wp-neu .hp-note-text p {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1.42;
  letter-spacing: -.01em;
  max-width: 30em;
}
body.wp-neu .hp-note-text p.hp-note-sign {
  font-size: 1rem;
  color: var(--hp-graphite);
  margin-top: 1.6rem;
}
body.wp-neu .hp-rich p { font-size: 1.15rem; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.hp-faq { padding: clamp(64px, 8vw, 120px) 0 clamp(80px, 10vw, 140px); }
.hp-faq-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}
.hp-faq-grid > .hp-h2 { grid-column: 1 / span 4; }
.hp-faq-list { grid-column: 6 / span 7; border-top: 1px solid var(--hp-ink); }
.hp-faq details { border-bottom: 1px solid var(--hp-ink); }
.hp-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 20px 0;
  font-family: var(--hp-font);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--hp-ink);
}
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::after {
  content: "+";
  font-size: 1.6em;
  line-height: .6;
  font-weight: 300;
  color: var(--hp-blue);
  transition: transform .2s ease;
}
.hp-faq details[open] summary::after { transform: rotate(45deg); }
.hp-faq summary:hover { color: var(--hp-blue); }
body.wp-neu .hp-faq details p { color: var(--hp-graphite); padding: 0 0 22px; margin: 0; }

/* ── Promo: Titelskizze, Einleitung, Film ─────────────────────────────── */
.hp-hero-media img.hp-skizze {
  background: transparent;
  mix-blend-mode: multiply;
  max-height: 440px;
  width: 100%;
  object-fit: contain;
  border-radius: 0;
}
.hp-intro { padding: clamp(48px, 6vw, 96px) 0; }
.hp-film { padding: 0 0 clamp(48px, 6vw, 96px); }
.hp-film video { display: block; width: 100%; height: auto; border-radius: 20px; background: var(--hp-white); }
body.wp-neu .hp-rich p,
body.wp-neu .hp-rich li {
  font-family: var(--hp-font);
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.55;
  color: var(--hp-ink);
  text-align: left;
  max-width: 34em;
  margin: 0 0 1em;
  padding: 0;
}
body.wp-neu .hp-note-text.hp-rich p { font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.42; letter-spacing: -.01em; max-width: 30em; }
body.wp-neu .hp-rich a { color: var(--hp-blue); text-decoration: underline; text-underline-offset: .2em; }
body.wp-neu .hp-rich strong { font-weight: 600; }

/* ── Funktionen: Zeilen mit Bild, abwechselnd ──────────────────────────── */
.hp-functions { padding: clamp(64px, 8vw, 120px) 0; }
body.wp-neu .hp-functions-title { max-width: 18ch; margin-bottom: clamp(32px, 4vw, 56px); }
.hp-fn {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: center;
  padding: clamp(28px, 4vw, 56px) 0;
  border-top: 1px solid var(--hp-rule);
}
.hp-fn-text { grid-column: 1 / span 5; grid-row: 1; }
.hp-fn-media { grid-column: 7 / span 6; grid-row: 1; margin: 0; }
.hp-fn--flip .hp-fn-text { grid-column: 8 / span 5; }
.hp-fn--flip .hp-fn-media { grid-column: 1 / span 6; }
body.wp-neu .hp-fn h3 {
  font-family: var(--hp-font);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--hp-ink);
  text-align: left;
  margin: 0 0 .5em;
}
body.wp-neu .hp-fn .hp-rich,
body.wp-neu .hp-fn .hp-rich p {
  font-family: var(--hp-font);
  font-size: clamp(1.02rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  color: var(--hp-graphite);
  max-width: 32em;
}
.hp-fn-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  border-radius: 16px;
  background: var(--hp-white);
}

/* ── Freies HTML (ältere Seiten bringen hier Markup der alten Gestaltung) ── */
.hp-legacy { padding: clamp(40px, 5vw, 80px) 0; }
body.wp-neu .hp-legacy .lp-hero,
body.wp-neu .hp-legacy .feature,
body.wp-neu .hp-legacy .infobox,
body.wp-neu .hp-legacy #guidelines {
  background: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
  color: var(--hp-ink);
  min-height: 0;
  margin: 0;
  padding: 0;
}
body.wp-neu .hp-legacy .lp-hero-container {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  min-height: 0;
  padding: 0;
}
body.wp-neu .hp-legacy .lp-hero-content { padding: 0; text-align: left; }
body.wp-neu .hp-legacy h1 {
  font-family: var(--hp-font);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -.028em;
  color: var(--hp-ink);
  text-align: left;
  margin: 0 0 .5em;
}
body.wp-neu .hp-legacy .lp-hero-subtitle { font-size: 1.15rem; line-height: 1.55; color: var(--hp-ink); text-align: left; }
body.wp-neu .hp-legacy .btn.btn-primary {
  display: inline-block;
  font-family: var(--hp-font);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--hp-ink);
  background: var(--hp-yellow);
  border: 0;
  box-shadow: none;
  border-radius: 999px;
  padding: .75em 1.4em;
}
body.wp-neu .hp-legacy video { width: 100%; height: auto; border-radius: 20px; }
body.wp-neu .hp-legacy #features {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
body.wp-neu .hp-legacy .feature { display: block; }
body.wp-neu .hp-legacy #shortinfo { text-align: left; display: flex; flex-wrap: wrap; gap: 8px; }
body.wp-neu .hp-legacy #shortinfo h4 {
  font-family: var(--hp-font);
  font-size: .95rem;
  font-weight: 500;
  color: var(--hp-ink);
  background: var(--hp-white);
  border-radius: 999px;
  padding: .4em .9em;
  margin: 0;
}
body.wp-neu .hp-legacy #guidelines {
  font-family: var(--hp-font);
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.6;
  white-space: pre-line;
  max-width: 40em;
}
body.wp-neu .hp-legacy #guidelines h3 {
  font-family: var(--hp-font);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--hp-ink);
  white-space: normal;
  margin: 0 0 .4em;
}

/* Textabschnitt „Dunkel“/„Blau“ → blaue Planfläche */
.hp-textblock--blau > .hp-wrap {
  background: var(--hp-blue);
  border-radius: 28px;
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(40px, 6vw, 80px);
  width: calc(100% - 2 * var(--hp-gutter));
}
body.wp-neu .hp-textblock--blau .hp-h2,
body.wp-neu .hp-textblock--blau .hp-rich p { color: var(--hp-white); }

/* ── Bewegung: Abschnitte werden beim Hereinscrollen scharf (site.js) ──── */
body.wp-neu.hp-bewegt .hp-scroll {
  transition: filter .9s cubic-bezier(.2, .7, .2, 1), opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
}
body.wp-neu.hp-bewegt .hp-scroll.hp-unscharf {
  filter: blur(14px);
  opacity: .2;
  transform: translateY(28px);
}
@media (prefers-reduced-motion: reduce) {
  body.wp-neu.hp-bewegt .hp-scroll,
  body.wp-neu.hp-bewegt .hp-scroll.hp-unscharf { filter: none; opacity: 1; transform: none; transition: none; }
}

/* ── Kleine Bildschirme ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hp-hero { padding-top: 48px; }
  .hp-hero-text > .hp-mass, .hp-hero-text > .hp-lead, .hp-hero-text > .hp-actions,
  .hp-hero-text, .hp-hero-media,
  .hp-feature-text, .hp-collage,
  .hp-feature--flip .hp-feature-text, .hp-feature--flip .hp-collage,
  .hp-aside-text, .hp-aside-media,
  .hp-note-grid > .hp-h2, .hp-note-text,
  .hp-faq-grid > .hp-h2, .hp-faq-list,
  .hp-fn-text, .hp-fn-media, .hp-fn--flip .hp-fn-text, .hp-fn--flip .hp-fn-media { grid-column: 1 / -1; grid-row: auto; }
  .hp-fn-media { margin-top: 20px; }
  body.wp-neu .hp-legacy .lp-hero-container,
  body.wp-neu .hp-legacy #features { grid-template-columns: minmax(0, 1fr); }
  .hp-hero-media { margin-top: 32px; margin-bottom: 0; grid-row: auto; }
  .hp-collage { margin-top: 32px; }
  .hp-aside-media { margin-top: 28px; }
  .hp-note-grid > .hp-h2, .hp-faq-grid > .hp-h2 { margin-bottom: .8em; }
  body.wp-neu .hp-steps-list { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hp-steps-list li:nth-child(n) { margin-top: 0; }
  .hp-step-kreis { width: 132px; margin-bottom: 14px; }
  body.wp-neu .hp-plans .pricing-container { flex-direction: column; }
  body.wp-neu .hp-plans .pricing-card { max-width: none; }
}
@media (max-width: 560px) {
  .hp-collage--2 .hp-shot--1,
  .hp-feature--flip .hp-collage--2 .hp-shot--1 { grid-column: 1 / -1; }
  .hp-collage--2 .hp-shot--2,
  .hp-feature--flip .hp-collage--2 .hp-shot--2 { grid-column: 3 / -1; margin-top: -12%; }
  .hp-collage--2 .hp-shot--2 img { box-shadow: 0 0 0 5px var(--hp-paper); }
  .hp-feature--blueprint .hp-collage--2 .hp-shot--2 img { box-shadow: 0 0 0 5px var(--hp-blue); }
}