/* Startseite NEXURA. Grundlage ist das Stylesheet der Projektansicht (Farben, Archivo, Knöpfe, Kopf,
   Effizienzlabel, Fragen); hier stehen nur die Abschnitte der Startseite. Präfix hp-. */

/* ---------- Dunkle Bänder: dieselben Werte wie das dunkle Design der Projektansicht ---------- */
.hp-dunkel {
  --grund: var(--blauschwarz);
  --flaeche: var(--anthrazit);
  --flaeche-2: #283042;
  --text: var(--hellgrau);
  --text-2: #a3a6af;
  --linie: rgb(244 244 245 / 0.12);
  --linie-stark: rgb(244 244 245 / 0.3);
  --fokus: var(--signalgelb);
  background: var(--grund);
  color: var(--text);
}
[data-theme="dark"] .hp-dunkel { --grund: #0b0f18; --flaeche: #171d2a; }

.hp main { overflow-x: clip; }
.nur-dunkel { display: none !important; }
[data-theme="dark"] .nur-dunkel { display: block !important; }
[data-theme="dark"] .nur-hell { display: none !important; }

/* ---------- Kopf ---------- */
.hp-kopf { background: color-mix(in srgb, var(--grund) 94%, transparent); }
/* Über dem Startbild liegt der Kopf durchsichtig; Farben wie die Seite, im hellen wie im dunklen Modus. */
.hp-kopf:not([data-gescrollt]) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hp-kopf:not([data-gescrollt]) .menue:not([hidden]) { background: var(--grund); }
.hp-anmelden { padding: 8px 10px; color: var(--text-2); font-size: 0.9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.hp-anmelden:hover { color: var(--text); }
.hp-kopf__planen { min-height: 40px; padding: 0 18px; font-size: 0.9375rem; white-space: nowrap; }
@media (max-width: 1180px) { .hp-anmelden { display: none; } }
@media (max-width: 1023px) { .hp-kopf__planen { display: none; } }

/* ---------- Knöpfe für dunkle und gelbe Flächen ---------- */
.hp-aktionen { display: flex; flex-wrap: wrap; gap: 12px; }
.hp-knopf--hell { border: 1px solid rgb(244 244 245 / 0.35); color: var(--hellgrau); background: transparent; }
.hp-knopf--hell:hover { border-color: var(--hellgrau); }
.hp-knopf--dunkel { background: var(--blauschwarz); color: var(--hellgrau); }
.hp-knopf--dunkel:hover { background: #222b3b; }
.hp-knopf--rand { border: 1px solid rgb(18 24 36 / 0.35); color: var(--blauschwarz); background: transparent; }
.hp-knopf--rand:hover { border-color: var(--blauschwarz); }

/* ---------- Start ---------- */
.hp-held { padding-top: var(--kopf-h); }
.hp-held__innen {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  max-width: var(--breite);
  min-height: calc(100vh - var(--kopf-h));
  min-height: calc(100dvh - var(--kopf-h));
  margin: 0 auto;
  padding: clamp(32px, 5vw, 72px) var(--rand);
}
.hp-held__vorzeile { color: var(--text-2); font-size: 0.9375rem; font-weight: 650; }
[data-theme="dark"] .hp-held__vorzeile { color: var(--signalgelb); }
.hp-held__titel { margin-top: 18px; font-size: clamp(2.6rem, 4.6vw, 4.25rem); font-weight: 840; font-stretch: 114%; line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; }
.hp-held__lead { max-width: 44ch; margin-top: 24px; color: var(--text-2); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; }
.hp-held .hp-aktionen { margin-top: 34px; }
.hp-held__fachleute { margin-top: 26px; color: var(--text-2); font-size: 0.9375rem; }
.hp-held__fachleute a { color: var(--text); font-weight: 650; text-underline-offset: 3px; }

.hp-buehne { position: relative; margin: 0; height: min(78vh, 760px); min-height: 460px; border-radius: 22px; overflow: hidden; background: radial-gradient(90% 70% at 45% 45%, #ffffff 0%, var(--flaeche-2) 80%); border: 1px solid var(--linie); }
[data-theme="dark"] .hp-buehne { background: radial-gradient(90% 70% at 45% 45%, #1f2737 0%, #121824 75%); }
.hp-buehne__canvas { display: block; width: 100%; height: 100%; }
.hp-buehne__ersatz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hp-buehne__ersatz[hidden] { display: none; }
.hp-buehne__label { position: absolute; top: 16px; right: 16px; width: min(230px, 42%); }
.hp-buehne__label .label { box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.6); }
.hp-buehne__fuss { position: absolute; inset: auto 0 0 0; display: grid; gap: 12px; padding: 18px 20px 20px; background: linear-gradient(0deg, color-mix(in srgb, var(--grund) 90%, transparent) 0%, transparent 100%); }
.hp-buehne__text { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 0.875rem; font-weight: 600; }
.hp-stand { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.hp-stand li { display: grid; gap: 6px; color: var(--text-2); font-size: 0.75rem; font-weight: 650; text-align: center; transition: color 300ms ease; }
.hp-stand li::before { content: ""; height: 4px; border-radius: 4px; background: var(--linie-stark); transition: background-color 400ms ease; }
.hp-stand li[data-erreicht]::before { background: var(--k, var(--signalgelb)); }
.hp-stand li[data-aktiv] { color: var(--text); }

@media (max-width: 1023px) {
  .hp-held__innen { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 36px; }
  .hp-buehne { height: 62vh; height: 62svh; min-height: 380px; }
}
@media (max-width: 599px) {
  .hp-held__titel { font-size: clamp(2.3rem, 10vw, 3rem); }
  .hp-buehne { height: 56svh; min-height: 340px; border-radius: 16px; }
  .hp-buehne__label { top: 10px; right: 10px; left: 10px; width: auto; }
  .hp-stand li { font-size: 0.625rem; }
}

/* ---------- Abschnitte ---------- */
.hp-abschnitt { max-width: var(--breite); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--rand) 0; }
.hp-kopfzeile { max-width: 760px; }
.hp-kopfzeile h2, .hp-projektseite h2, .hp-schluss h2, .fragen h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); font-weight: 830; font-stretch: 112%; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.hp-kopfzeile p { max-width: 60ch; margin-top: 18px; color: var(--text-2); font-size: 1.125rem; line-height: 1.55; }

/* ---------- Funktionen als Bento ---------- */
.hp-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 52px; }
.hp-kachel { display: grid; align-content: start; gap: 22px; padding: clamp(22px, 2.4vw, 32px); border-radius: 20px; background: var(--flaeche); border: 1px solid var(--linie); overflow: hidden; }
.hp-kachel__text { display: grid; gap: 10px; max-width: 52ch; }
.hp-kachel__text i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; background: var(--signalgelb); color: var(--blauschwarz); font-size: 1.3rem; }
.hp-kachel h3 { font-size: clamp(1.3rem, 1.7vw, 1.6rem); font-weight: 780; font-stretch: 108%; line-height: 1.15; }
.hp-kachel p { color: var(--text-2); font-size: 1rem; line-height: 1.55; }
.hp-kachel--modell { grid-column: span 7; }
.hp-kachel--plan { grid-column: span 5; }
.hp-kachel--kosten { grid-column: span 5; }
.hp-kachel--angebote { grid-column: span 7; }
.hp-kachel--bau { grid-column: span 12; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.hp-rahmen { border-radius: 12px; overflow: hidden; border: 1px solid var(--linie); box-shadow: var(--schatten); }
.hp-rahmen img { display: block; width: 100%; height: auto; }
.hp-kachel--plan .hp-rahmen img, .hp-kachel--kosten .hp-rahmen img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 0 0; }
.hp-kachel--kosten .hp-rahmen img { object-position: 0 70%; }

.hp-lv { display: grid; border-radius: 12px; border: 1px solid var(--linie); overflow: hidden; background: var(--grund); font-size: 0.9375rem; }
.hp-lv__kopf, .hp-lv__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; padding: 12px 16px; }
.hp-lv__kopf { color: var(--text-2); font-size: 0.8125rem; font-weight: 650; border-bottom: 1px solid var(--linie); }
.hp-lv__zeile + .hp-lv__zeile { border-top: 1px solid var(--linie); }
.hp-lv__zeile span:nth-child(2) { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-lv__frei { color: var(--text-2); font-style: italic; white-space: nowrap; }
.hp-lv__fuss { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--linie); color: var(--text-2); font-size: 0.8125rem; }

.hp-haeuser { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.hp-haeuser li { display: grid; justify-items: center; gap: 10px; padding: 18px 8px 14px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); font-size: 0.8125rem; font-weight: 650; color: var(--text-2); text-align: center; }
.hp-haeuser svg { width: 34px; height: 40px; color: var(--k); }
.hp-haeuser .klassenpfeil { margin-top: -2px; }

@media (max-width: 1023px) {
  .hp-kachel--modell, .hp-kachel--plan, .hp-kachel--kosten, .hp-kachel--angebote { grid-column: span 12; }
  .hp-kachel--bau { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .hp-haeuser { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-lv__kopf, .hp-lv__zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .hp-lv__kopf span:last-child, .hp-lv__frei { display: none; }
}

/* ---------- Kachel Modell: das echte Modell statt Bildschirmfoto ---------- */
.hp-modell { position: relative; margin: 0; aspect-ratio: 1600 / 868; background: radial-gradient(90% 80% at 50% 45%, #ffffff 0%, var(--flaeche-2, #eef0f3) 80%); }
[data-theme="dark"] .hp-modell { background: radial-gradient(90% 80% at 50% 45%, #1f2737 0%, #121824 80%); }
.hp-modell__bild, .hp-modell__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hp-modell__bild { object-fit: cover; transition: opacity 600ms ease; }
.hp-modell__canvas { display: block; opacity: 0; transition: opacity 600ms ease; }
.hp-modell[data-bereit] .hp-modell__canvas { opacity: 1; }
.hp-modell[data-bereit] .hp-modell__bild { opacity: 0; }
.hp-modell__fuss { position: absolute; left: 14px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: color-mix(in srgb, var(--grund) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--linie); font-size: 0.8125rem; font-weight: 650; }

/* ---------- Bewegung: einmal beim Erscheinen, ohne Bewegung alles sofort ---------- */
.hp-schritte li { transition: border-color 400ms ease, box-shadow 400ms ease; }
.hp-schritte[data-scroll] li:not(:last-child)[data-an] { border-color: var(--linie-stark); box-shadow: inset 0 3px 0 var(--signalgelb); }
.hp-schritte[data-scroll] li:not(:last-child):not([data-an])::before { color: var(--text-2); }

/* ---------- Projektseite ---------- */
.hp-projektseite { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(32px, 5vw, 88px); }
.hp-projektseite__text { display: grid; justify-items: start; gap: 22px; }
.hp-projektseite__text > p { max-width: 50ch; color: var(--text-2); font-size: 1.125rem; line-height: 1.55; }
.hp-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-weight: 600; }
.hp-liste li { display: flex; align-items: baseline; gap: 10px; }
.hp-liste i { color: var(--text); font-size: 1.1rem; transform: translateY(2px); }
.hp-projektseite__bild { position: relative; padding-bottom: 12%; }
.hp-browser { position: relative; border-radius: 14px; overflow: hidden; background: var(--flaeche); border: 1px solid var(--linie); box-shadow: 0 40px 80px -40px rgb(18 24 36 / 0.45); }
.hp-browser img { display: block; width: 100%; height: auto; }
.hp-browser--zweit { position: absolute; right: -4%; bottom: 0; width: 52%; border-radius: 12px; }
@media (max-width: 1023px) {
  .hp-projektseite { grid-template-columns: minmax(0, 1fr); }
  .hp-browser--zweit { right: 0; }
}

/* ---------- Für wen ---------- */
.hp-band { margin-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px); }
.hp-rollen__raster { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 64px); margin-top: 48px; }
.hp-rollen__liste { display: grid; align-content: start; gap: 6px; }
.hp-rollen__liste button { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--text-2); font: inherit; text-align: left; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.hp-rollen__liste button strong { color: var(--text); font-size: 1.125rem; font-weight: 740; font-stretch: 106%; }
.hp-rollen__liste button span { font-size: 0.9375rem; }
.hp-rollen__liste button[aria-selected="true"] { background: var(--flaeche); border-color: var(--linie); box-shadow: inset 3px 0 0 var(--signalgelb); }
.hp-rollen__liste button:hover { color: var(--text); }
.hp-rollen__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: clamp(22px, 3vw, 36px); border-radius: 20px; background: var(--flaeche); border: 1px solid var(--linie); }
.hp-rollen__panel h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; font-stretch: 110%; line-height: 1.1; }
.hp-rollen__panel > div > p { margin-top: 14px; color: var(--text-2); font-size: 1.0625rem; line-height: 1.55; }
.hp-rollen__panel .hp-liste { margin-top: 20px; }
.hp-rollen__panel .hp-rahmen { align-self: center; }
@media (max-width: 1023px) {
  .hp-rollen__raster { grid-template-columns: minmax(0, 1fr); }
  .hp-rollen__liste { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--rand) * -1); padding: 0 var(--rand); }
  .hp-rollen__liste button { flex: none; padding: 10px 16px; border-color: var(--linie); border-radius: 999px; }
  .hp-rollen__liste button span { display: none; }
  .hp-rollen__liste button strong { font-size: 0.9375rem; white-space: nowrap; }
  .hp-rollen__liste button[aria-selected="true"] { box-shadow: none; background: var(--signalgelb); border-color: var(--signalgelb); }
  .hp-rollen__liste button[aria-selected="true"] strong { color: var(--blauschwarz); }
  .hp-rollen__panel { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ablauf und Gewerke ---------- */
.hp-schritte { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin: 52px 0 0; padding: 0; list-style: none; counter-reset: schritt; }
.hp-schritte li { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 18px 24px; border-radius: 16px; background: var(--flaeche); border: 1px solid var(--linie); }
.hp-schritte li::before { counter-increment: schritt; content: counter(schritt); font-size: 2.4rem; font-weight: 840; font-stretch: 122%; line-height: 1; color: var(--text); }
.hp-schritte li:last-child { background: var(--signalgelb); border-color: var(--signalgelb); color: var(--blauschwarz); }
.hp-schritte li:last-child::before, .hp-schritte li:last-child strong { color: var(--blauschwarz); }
.hp-schritte li:last-child span { color: rgb(18 24 36 / 0.75); }
.hp-schritte strong { font-size: 1.0625rem; font-weight: 760; font-stretch: 106%; line-height: 1.2; }
.hp-schritte span { color: var(--text-2); font-size: 0.875rem; line-height: 1.45; }
@media (max-width: 1279px) { .hp-schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .hp-schritte { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(var(--rand) * -1); margin-right: calc(var(--rand) * -1); padding: 0 var(--rand) 8px; scrollbar-width: none; }
  .hp-schritte li { flex: 0 0 74%; scroll-snap-align: start; }
}
.hp-gewerke { display: grid; gap: 16px; margin-top: 48px; }
.hp-gewerke h3 { font-size: 1.125rem; font-weight: 740; }
.hp-gewerke ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hp-gewerke li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); font-weight: 620; }
.hp-gewerke i { font-size: 1.15rem; }

/* ---------- Fragen und Schluss ---------- */
.hp .fragen { padding-bottom: 0; }
.hp-schluss { margin-top: clamp(80px, 10vw, 140px); background: var(--signalgelb); color: var(--blauschwarz); }
.hp-schluss__innen { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 56px); max-width: var(--breite); margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--rand); }
.hp-schluss__signet { width: clamp(64px, 7vw, 96px); height: clamp(76px, 8.4vw, 114px); color: var(--blauschwarz); }
.hp-schluss p { max-width: 52ch; margin-top: 12px; font-size: 1.125rem; color: rgb(18 24 36 / 0.78); }
@media (max-width: 1023px) { .hp-schluss__innen { grid-template-columns: minmax(0, 1fr); } }

.hp-fuss__innen { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; max-width: var(--breite); margin: 0 auto; padding: 64px var(--rand) calc(40px + env(safe-area-inset-bottom)); }
.hp-fuss__marke { display: grid; justify-items: start; gap: 14px; }
.hp-fuss__marke img { border-radius: 8px; }
.hp-fuss__marke .wortmarke { width: 120px; height: 24px; color: var(--text); }
.hp-fuss__marke p { max-width: 34ch; color: var(--text-2); font-size: 0.9375rem; }
.hp-fuss nav { display: grid; align-content: start; gap: 10px; }
.hp-fuss h3 { margin-bottom: 4px; color: var(--text); font-size: 0.9375rem; font-weight: 740; }
.hp-fuss nav a { color: var(--text-2); font-size: 0.9375rem; text-decoration: none; }
.hp-fuss nav a:hover { color: var(--text); }
.hp-fuss__hinweis { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--linie); color: var(--text-2); font-size: 0.8125rem; }
@media (max-width: 899px) { .hp-fuss__innen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hp-fuss__marke { grid-column: 1 / -1; } }

/* =========================================================================================
   Bewegte Fassung: ein Modell für Startbild und Szene. Das Canvas liegt fest über den
   Abschnittsflächen und zeichnet nur in den Rahmen, den das Skript als Maske setzt.
   ========================================================================================= */
.hp-welt { position: fixed; inset: 0; z-index: 1; pointer-events: none; clip-path: inset(100% 0 0 0); }
.hp-welt__canvas { display: block; width: 100%; height: 100%; }
.hp-held__text, .hp-buehne__label, .hp-buehne__fuss, .hp-szene__texte, .hp-ui { position: relative; z-index: 2; }
.hp-buehne__label, .hp-buehne__fuss { position: absolute; }

/* ---------- Szene ---------- */
.hp-szene { position: relative; }
.hp-szene__innen { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 72px); align-items: center; max-width: var(--breite); height: 100vh; height: 100svh; margin: 0 auto; padding: calc(var(--kopf-h) + 24px) var(--rand) 32px; }
.hp-szene__texte { position: relative; display: grid; align-content: center; min-height: 340px; }
.hp-szene__marken { display: flex; gap: 6px; margin: 0 0 34px; padding: 0; list-style: none; }
.hp-szene__marken li { flex: 1; display: grid; gap: 8px; color: var(--text-2); font-size: 0.8125rem; font-weight: 650; transition: color 300ms ease; }
.hp-szene__marken li::before { content: ""; height: 3px; border-radius: 3px; background: var(--linie-stark); background-image: linear-gradient(var(--signalgelb), var(--signalgelb)); background-repeat: no-repeat; background-size: calc(var(--f, 0) * 100%) 100%; }
.hp-szene__marken li[data-aktiv] { color: var(--text); }
.hp-funktion { grid-area: 2 / 1; display: grid; align-content: start; gap: 16px; }
.hp-szene__texte > .hp-szene__marken { grid-area: 1 / 1; }
.hp-funktion h3 { font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 830; font-stretch: 112%; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.hp-funktion p { max-width: 44ch; color: var(--text-2); font-size: 1.125rem; line-height: 1.55; }

.hp-szene__buehne { position: relative; height: min(78vh, 760px); border-radius: 22px; background: radial-gradient(90% 70% at 50% 42%, #ffffff 0%, var(--flaeche-2) 85%); border: 1px solid var(--linie); }
[data-theme="dark"] .hp-szene__buehne { background: radial-gradient(90% 70% at 50% 42%, #1f2737 0%, #121824 85%); }
.hp-szene__ersatz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.hp-szene__ersatz[hidden] { display: none; }

/* Oberflächenteile: echte Bausteine aus HTML, keine Bildschirmfotos. */
.hp-ui { position: absolute; right: 18px; bottom: 18px; width: min(360px, 52%); padding: 16px 18px; border-radius: 16px; background: color-mix(in srgb, var(--grund) 92%, transparent); border: 1px solid var(--linie); box-shadow: 0 30px 60px -30px rgb(18 24 36 / 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hp-ui__titel { margin-bottom: 12px; color: var(--text-2); font-size: 0.8125rem; font-weight: 650; }
.hp-ui__bauteile { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hp-ui__bauteile li { display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 12px; font-size: 0.9375rem; font-weight: 650; color: var(--text-2); transition: color 250ms ease; }
.hp-ui__bauteile li[data-aktiv] { color: var(--text); }
.hp-ui__bauteile .bauteil__skala span[data-an] { background: var(--text-2); }
.hp-ui__bauteile li[data-aktiv] .bauteil__skala span[data-an] { background: var(--signalgelb); }
.hp-ui[data-ui="1"] { width: min(300px, 46%); top: 18px; bottom: auto; }
.hp-ui__pakete { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.hp-ui__pakete li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 10px; color: var(--text-2); font-size: 0.875rem; font-weight: 650; transition: background-color 250ms ease, color 250ms ease; }
.hp-ui__pakete li b { font-variant-numeric: tabular-nums; }
.hp-ui__pakete li[data-an] { color: var(--text); }
.hp-ui__pakete li[data-aktiv] { background: var(--signalgelb); color: var(--blauschwarz); }
.hp-ui__kosten { display: grid; font-size: 0.875rem; }
.hp-ui__kosten > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; padding: 7px 0; border-top: 1px solid var(--linie); opacity: 0.25; transition: opacity 300ms ease; }
.hp-ui__kosten > div[data-an] { opacity: 1; }
.hp-ui__kosten > div:first-child { border-top: 0; color: var(--text-2); font-size: 0.75rem; font-weight: 650; opacity: 1; }
.hp-ui__kosten span:not(:first-child) { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-ui__kosten .hp-ui__summe { margin-top: 4px; border-top: 1px solid var(--linie-stark); font-weight: 800; opacity: 1; }
.hp-ui[data-ui="3"] { width: min(440px, 64%); padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hp-ui[data-ui="3"] .hp-lv__zeile { opacity: 0.25; transition: opacity 300ms ease; }
.hp-ui[data-ui="3"] .hp-lv__zeile[data-an] { opacity: 1; }
.hp-ui[data-ui="4"] { width: min(520px, 76%); }
.hp-ui[data-ui="4"] .hp-haeuser li { padding: 12px 4px 10px; opacity: 0.25; transition: opacity 300ms ease, transform 300ms ease; }
.hp-ui[data-ui="4"] .hp-haeuser li[data-an] { opacity: 1; }

/* Ohne Skript, ohne Bewegung und am Telefon: alles untereinander, jede Funktion mit ihrer Oberfläche. */
@media (max-width: 1023px) {
  .hp-szene__innen { display: block; height: auto; padding-top: 24px; }
  .hp-szene__marken { display: none; }
  .hp-szene__texte { display: grid; gap: 40px; min-height: 0; }
  .hp-funktion { grid-area: auto; }
  .hp-szene__buehne { height: auto; margin-top: 32px; padding: 16px; display: grid; gap: 14px; background: none; border: 0; }
  .hp-ui { position: static; width: auto !important; }
  .hp-ui__kosten > div, .hp-ui[data-ui="3"] .hp-lv__zeile, .hp-ui[data-ui="4"] .hp-haeuser li { opacity: 1; }
}

/* Am Rechner wechseln Text und Oberfläche mit der Funktion; der Wechsel ist kurz und folgt dem Scroll. */
@media (min-width: 1024px) {
  .hp-funktion, .hp-ui { transition: opacity 380ms ease, transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 380ms; }
  .hp-szene[data-gepinnt] .hp-funktion:not([data-aktiv]), .hp-szene[data-gepinnt] .hp-ui:not([data-aktiv]) { opacity: 0; visibility: hidden; }
  .hp-szene[data-gepinnt] .hp-funktion:not([data-aktiv]) { transform: translateY(18px); }
  .hp-szene[data-gepinnt] .hp-ui:not([data-aktiv]) { transform: translateY(14px) scale(0.98); }
  .hp-funktion[data-aktiv], .hp-ui[data-aktiv] { transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-bewegung="an"]) .hp-funktion, html:not([data-bewegung="an"]) .hp-ui { transition: none; }
}

/* Einleitung der Szene: steht, bis die erste Funktion kommt. */
.hp-szene__einleitung { grid-area: 2 / 1; }
.hp-ui__bauteile .bauteil__skala { grid-row: auto; grid-column: auto; }
@media (min-width: 1024px) {
  .hp-szene__einleitung { transition: opacity 380ms ease, transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 380ms; }
  .hp-szene[data-phase="einleitung"] .hp-funktion, .hp-szene[data-phase="einleitung"] .hp-ui { opacity: 0; visibility: hidden; }
  .hp-szene[data-phase="einleitung"] .hp-szene__marken { opacity: 0; }
  .hp-szene[data-gepinnt]:not([data-phase="einleitung"]) .hp-szene__einleitung { opacity: 0; visibility: hidden; transform: translateY(-18px); }
  .hp-szene__marken { transition: opacity 380ms ease; }
}
@media (max-width: 1023px) {
  .hp-szene__einleitung { margin-bottom: 8px; }
}

/* Telefon: Einleitung, dann je Funktion Text und darunter ihre Oberfläche. */
@media (max-width: 1023px) {
  .hp-szene__innen { display: flex; flex-direction: column; gap: 20px; }
  .hp-szene__texte, .hp-szene__buehne { display: contents; }
  .hp-szene__einleitung { order: 0; grid-area: auto; margin-bottom: 12px; }
  .hp-funktion { margin-top: 36px; }
  .hp-funktion[data-funktion="0"] { order: 1; } .hp-ui[data-ui="0"] { order: 2; }
  .hp-funktion[data-funktion="1"] { order: 3; } .hp-ui[data-ui="1"] { order: 4; }
  .hp-funktion[data-funktion="2"] { order: 5; } .hp-ui[data-ui="2"] { order: 6; }
  .hp-funktion[data-funktion="3"] { order: 7; } .hp-ui[data-ui="3"] { order: 8; }
  .hp-funktion[data-funktion="4"] { order: 9; } .hp-ui[data-ui="4"] { order: 10; }
  .hp-szene__ersatz { display: none; }
  .hp-ui[data-ui="1"] { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================================
   Phase A (Synthese der fünf Kritiken): ein Rahmen vom randlosen Startbild bis zur Szene.
   Die Welt zeichnet ihren Grund selbst; Startbild und Szene sind darüber nur Text und Oberfläche.
   ========================================================================================= */
.hp-welt { background: radial-gradient(120% 90% at 64% 46%, #ffffff 0%, var(--flaeche-2) 82%); }
[data-theme="dark"] .hp-welt { background: radial-gradient(120% 90% at 64% 46%, #1f2737 0%, #0f1520 82%); }

/* ---------- Startbild ---------- */
.hp-held { position: relative; padding-top: 0; }
.hp-held__flaeche { position: absolute; inset: 0; margin: 0; }
.hp-held__ersatz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hp-held__ersatz[hidden] { display: none; }
.hp-held__innen { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); align-items: end; gap: 32px; max-width: var(--breite); min-height: 100vh; min-height: 100svh; margin: 0 auto; padding: calc(var(--kopf-h) + 40px) var(--rand) clamp(40px, 8vh, 96px); }
/* Schleier hinter dem Text, damit er auf dem Modell lesbar bleibt. */
.hp-held__innen::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 calc(50% - 50vw); width: min(64vw, 980px); background: linear-gradient(90deg, var(--grund) 0%, color-mix(in srgb, var(--grund) 82%, transparent) 50%, transparent 100%); pointer-events: none; }
.hp-held__titel { margin-top: 0; font-size: clamp(3rem, 6vw, 6rem); line-height: 0.95; }
.hp-held__stand { justify-self: end; display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text-2); font-size: 0.875rem; font-weight: 600; }

/* ---------- Szene: über der Welt, Oberflächen in eigener Spalte rechts ---------- */
.hp-szene { z-index: 3; }
.hp-szene__buehne, [data-theme="dark"] .hp-szene__buehne { background: none; border: 0; }
.hp-szene__haus { display: none; }
.hp-funktion__nr { font-size: clamp(3.5rem, 6vw, 5.5rem); font-weight: 840; font-stretch: 122%; line-height: 0.9; color: transparent; -webkit-text-stroke: 1.5px var(--text); }
.hp-ui, .hp-ui[data-ui="1"], .hp-ui[data-ui="4"] { top: 50%; bottom: auto; right: 24px; width: min(46%, 470px); translate: 0 -50%; padding: 20px 22px; font-size: 1rem; }
.hp-ui[data-ui="3"] { top: 50%; bottom: auto; width: min(46%, 470px); translate: 0 -50%; padding: 0; }
.hp-ui[data-ui="3"] .hp-lv { background: color-mix(in srgb, var(--grund) 94%, transparent); font-size: 1rem; box-shadow: 0 30px 60px -30px rgb(18 24 36 / 0.45); }
.hp-ui__titel { font-size: 0.875rem; }
.hp-ui__bauteile li, .hp-ui__pakete li { font-size: 1rem; }
.hp-ui__kosten { font-size: 0.9375rem; }
.hp-ui__kosten > div { opacity: 0.3; }
.hp-stempel { position: absolute; right: 20px; top: -22px; display: grid; justify-items: center; margin: 0; padding: 6px 14px 5px; border: 3px solid #007a3d; border-radius: 8px; background: var(--grund); color: #007a3d; font-weight: 840; font-stretch: 112%; letter-spacing: 0.04em; transform: rotate(-8deg) scale(1.3); opacity: 0; transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1), opacity 120ms ease; }
.hp-stempel span { font-size: 1.125rem; text-transform: uppercase; }
.hp-stempel[data-an] { opacity: 1; transform: rotate(-8deg) scale(1); }

/* Wechsel nach Kowalski: Ausgang schnell mit Unschärfe, Eingang weich und etwas später, Oberflächen aus Richtung Haus. */
@media (min-width: 1024px) {
  .hp-funktion, .hp-ui { transition: opacity 140ms ease, filter 140ms ease, transform 140ms ease, visibility 0s linear 140ms; }
  .hp-szene[data-gepinnt] .hp-funktion:not([data-aktiv]), .hp-szene[data-gepinnt] .hp-ui:not([data-aktiv]) { opacity: 0; filter: blur(4px); visibility: hidden; }
  .hp-szene[data-gepinnt] .hp-funktion:not([data-aktiv]) { transform: translateY(10px); }
  .hp-ui { transform-origin: left center; }
  .hp-szene[data-gepinnt] .hp-ui:not([data-aktiv]) { transform: scale(0.96); }
  .hp-funktion[data-aktiv], .hp-ui[data-aktiv] { transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1) 60ms, filter 320ms cubic-bezier(0.23, 1, 0.32, 1) 60ms, transform 320ms cubic-bezier(0.23, 1, 0.32, 1) 60ms, visibility 0s; }
}

/* ---------- Telefon und Tablet: Haus oben, Szene läuft darunter ---------- */
@media (max-width: 1023px) {
  .hp-welt { z-index: 4; }
  .hp-held__flaeche { position: relative; height: 46vh; height: 46svh; margin-top: var(--kopf-h); }
  .hp-held__innen { display: block; min-height: 0; padding-top: 24px; padding-bottom: 32px; }
  .hp-held__innen::before { display: none; }
  .hp-held__titel { font-size: clamp(2.4rem, 10vw, 3.4rem); }
  .hp-held__stand { margin-top: 20px; justify-content: flex-start; }
  .hp-szene__haus { display: block; order: 1; position: sticky; top: var(--kopf-h); height: 38vh; height: 38svh; border-radius: 16px; }
  .hp-funktion[data-funktion="0"] { order: 2; } .hp-ui[data-ui="0"] { order: 3; }
  .hp-funktion[data-funktion="1"] { order: 4; } .hp-ui[data-ui="1"] { order: 5; }
  .hp-funktion[data-funktion="2"] { order: 6; } .hp-ui[data-ui="2"] { order: 7; }
  .hp-funktion[data-funktion="3"] { order: 8; } .hp-ui[data-ui="3"] { order: 9; }
  .hp-funktion[data-funktion="4"] { order: 10; } .hp-ui[data-ui="4"] { order: 11; }
  .hp-ui, .hp-ui[data-ui="1"], .hp-ui[data-ui="3"], .hp-ui[data-ui="4"] { position: relative; top: auto; right: auto; width: auto; translate: none; }
  .hp-stempel { top: 12px; right: 12px; }
}
@media (min-width: 1024px) {
  .hp-held__innen { grid-template-columns: minmax(0, 780px) minmax(0, 1fr); }
  .hp-held__titel { font-size: clamp(3rem, 5.4vw, 5.75rem); }
  .hp-held__lead { max-width: 46ch; }
  .hp-ui[data-ui="4"] { width: min(50%, 560px); }
}
.hp-ui[data-ui="4"] .hp-haeuser { gap: 6px; }
.hp-ui[data-ui="4"] .hp-haeuser li { font-size: 0.75rem; white-space: nowrap; }
@media (max-width: 1023px) {
  /* Die Szene richtet ihre Kinder mittig aus; der leere Rahmen des Hauses braucht die volle Breite. */
  .hp-szene__innen { align-items: stretch; }
}

/* =========================================================================================
   Phase B: Projektseite, Für wen, Ablauf, Schluss
   ========================================================================================= */

/* ---------- Merkmale ohne Häkchen: eine ruhige Liste mit Strich ---------- */
.hp-merkmale { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.hp-merkmale li { padding: 10px 0; border-bottom: 1px solid var(--linie); font-weight: 600; }

/* ---------- Projektseite: schlichter Rahmen, kippt beim Scrollen gerade ---------- */
.hp-projektseite__bild { padding-bottom: 0; perspective: 1400px; }
.hp-fenster { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--flaeche); border: 1px solid var(--linie); box-shadow: 0 50px 90px -50px rgb(18 24 36 / 0.5); transform-origin: 50% 100%; will-change: transform; }
.hp-fenster__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.hp-fenster__ansicht { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; background: var(--grund); }
.hp-fenster__ansicht[hidden] { display: none; }
.hp-fenster__hinweis { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--text-2); font-size: 0.875rem; font-weight: 600; }

/* ---------- Für wen: Seitwärtsfahrt ---------- */
.hp-rollenfahrt { position: relative; padding-top: clamp(80px, 10vw, 140px); }
.hp-rollenfahrt__innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.hp-rollenfahrt__fenster { margin-top: 40px; overflow: hidden; }
.hp-rollenfahrt__spur { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; will-change: transform; }
.hp-blatt { flex: 0 0 min(72vw, 1040px); display: grid; grid-template-rows: auto 1fr; border-radius: 20px; background: var(--flaeche); border: 1px solid var(--linie-stark); overflow: hidden; }
/* Plankopf wie im Schriftfeld eines Plans: Rolle, typische Aufgabe, Werkzeug. */
.hp-blatt__kopf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linie-stark); }
.hp-blatt__kopf > div { display: grid; gap: 2px; padding: 12px 18px; }
.hp-blatt__kopf > div + div { border-left: 1px solid var(--linie-stark); }
.hp-blatt__kopf span { color: var(--text-2); font-size: 0.75rem; font-weight: 650; }
.hp-blatt__kopf b { font-size: 0.9375rem; font-weight: 740; }
.hp-blatt__inhalt { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 44px); align-items: center; padding: clamp(22px, 3vw, 40px); }
.hp-blatt h3 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 830; font-stretch: 112%; line-height: 1.02; letter-spacing: -0.03em; }
.hp-blatt__inhalt > div > p { margin-top: 14px; color: var(--text-2); font-size: 1.0625rem; line-height: 1.55; }
.hp-blatt .hp-merkmale { margin-top: 20px; }
.hp-werkzeug { display: grid; gap: 0; border-radius: 14px; background: var(--grund); border: 1px solid var(--linie); overflow: hidden; font-size: 0.9375rem; }
.hp-werkzeug__titel { padding: 12px 16px; border-bottom: 1px solid var(--linie); color: var(--text-2); font-size: 0.8125rem; font-weight: 650; }
.hp-werkzeug__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--linie); opacity: 0.25; transform: translateX(10px); transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1), transform 320ms cubic-bezier(0.23, 1, 0.32, 1); }
.hp-werkzeug__titel + .hp-werkzeug__zeile { border-top: 0; }
.hp-werkzeug__zeile span:not(:first-child) { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-werkzeug__zeile .hp-lv__frei { font-weight: 500; }
.hp-blatt[data-aktiv] .hp-werkzeug__zeile { opacity: 1; transform: none; }
.hp-blatt[data-aktiv] .hp-werkzeug__zeile:nth-child(3) { transition-delay: 60ms; }
.hp-blatt[data-aktiv] .hp-werkzeug__zeile:nth-child(4) { transition-delay: 120ms; }
.hp-blatt[data-aktiv] .hp-werkzeug__zeile:nth-child(5) { transition-delay: 180ms; }
.hp-blatt[data-aktiv] .hp-werkzeug__zeile:nth-child(6) { transition-delay: 240ms; }
.hp-blatt[data-aktiv] .hp-werkzeug__zeile:nth-child(7) { transition-delay: 300ms; }
.hp-werkzeug__band { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; }
.hp-werkzeug__band .klassenpfeil { flex: none; }
.hp-werkzeug__band i { color: var(--text-2); }
.hp-lagemass { display: flex; gap: 6px; margin-top: 22px; }
.hp-lagemass button { flex: 1; display: grid; gap: 8px; padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 0.8125rem; font-weight: 650; text-align: left; cursor: pointer; }
.hp-lagemass button::before { content: ""; height: 3px; border-radius: 3px; background: var(--linie-stark); }
.hp-lagemass button[aria-current="true"] { color: var(--text); }
.hp-lagemass button[aria-current="true"]::before { background: var(--signalgelb); }

/* ---------- Ablauf: Faden ---------- */
.hp-ablauf { position: relative; padding-top: clamp(80px, 10vw, 140px); }
.hp-ablauf__innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.hp-faden { position: relative; margin-top: 48px; }
/* Textmarkerband: 14 px Signalgelb mit dunklem Kern, darunter die Strecke in Linienfarbe. */
.hp-faden__band { position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 17px; height: 14px; border-radius: 7px; background: var(--linie); overflow: hidden; }
.hp-faden__fuellung { position: absolute; inset: 0 auto 0 0; width: calc(var(--faden, 0) * 100%); background: var(--signalgelb); }
.hp-faden__fuellung::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--blauschwarz); }
.hp-faden__halte { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.hp-faden__halte li { display: grid; justify-items: center; gap: 10px; color: var(--text-2); font-size: 0.8125rem; font-weight: 650; text-align: center; }
.hp-faden__halte li b { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; background: var(--grund); border: 2px solid var(--linie-stark); color: var(--text); font-size: 1.125rem; font-weight: 820; transition: background-color 180ms ease-out, border-color 180ms ease-out; }
.hp-faden__halte li b i { display: none; font-size: 1.25rem; }
.hp-faden__halte li[data-an] b { background: var(--signalgelb); border-color: var(--signalgelb); color: var(--blauschwarz); }
.hp-faden__halte li[data-an] b span { display: none; }
.hp-faden__halte li[data-an] b i { display: block; }
.hp-faden__halte li[data-aktiv] { color: var(--text); }
.hp-ablauf__buehne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: 44px; min-height: 300px; }
.hp-ablauf__schritte { display: grid; margin: 0; padding: 0; list-style: none; }
.hp-ablauf__schritte li { grid-area: 1 / 1; display: grid; gap: 14px; align-content: center; }
.hp-ablauf__schritte strong { font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 830; font-stretch: 112%; line-height: 1.02; letter-spacing: -0.03em; }
.hp-ablauf__schritte span { max-width: 42ch; color: var(--text-2); font-size: 1.125rem; line-height: 1.55; }
.hp-ablauf__belege { display: grid; }
.hp-ablauf__belege > div { grid-area: 1 / 1; }
.hp-beleg { border-radius: 16px; background: var(--flaeche); border: 1px solid var(--linie); padding: 18px 20px; box-shadow: 0 30px 60px -36px rgb(18 24 36 / 0.4); }
.hp-beleg .hp-ui__titel { margin-bottom: 12px; }
.hp-beleg__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hp-beleg__chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linie-stark); font-size: 0.875rem; font-weight: 620; }
.hp-beleg__balken { display: grid; gap: 10px; }
.hp-beleg__balken div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; align-items: center; font-size: 0.875rem; font-weight: 600; }
.hp-beleg__balken i { display: block; height: 10px; border-radius: 5px; background: var(--signalgelb); margin-left: calc(var(--von) * 100%); width: calc(var(--dauer) * 100%); }
.hp-beleg .hp-haeuser { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.hp-beleg .hp-haeuser li { padding: 12px 4px 10px; font-size: 0.75rem; white-space: nowrap; }
.hp-beleg { position: relative; }
.hp-beleg .hp-stempel { opacity: 1; transform: rotate(-8deg); }
@media (min-width: 1024px) {
  .hp-ablauf__schritte li, .hp-ablauf__belege > div { transition: opacity 140ms ease, filter 140ms ease, visibility 0s linear 140ms; }
  .hp-ablauf__schritte li:not([data-aktiv]), .hp-ablauf__belege > div:not([data-aktiv]) { opacity: 0; filter: blur(4px); visibility: hidden; }
  .hp-ablauf__schritte li[data-aktiv], .hp-ablauf__belege > div[data-aktiv] { transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1) 60ms, filter 320ms cubic-bezier(0.23, 1, 0.32, 1) 60ms, visibility 0s; }
  .hp-ablauf { padding-top: 0; }
  .hp-ablauf__innen { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding-top: var(--kopf-h); }
  .hp-rollenfahrt { padding-top: 0; }
  .hp-rollenfahrt__innen { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding-top: var(--kopf-h); }
}

/* ---------- Schluss: auf dem Grund der Seite, das Haus in A+ daneben ---------- */
.hp-schluss { background: none; color: var(--text); }
.hp-schluss__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hp-schluss__haus { aspect-ratio: 4 / 3; border-radius: 22px; }
.hp-schluss p { color: var(--text-2); }
.hp-schluss .hp-aktionen { margin-top: 28px; }
.hp-fuss { border-top: 1px solid var(--linie); }

/* ---------- Telefon und Tablet ---------- */
@media (max-width: 1023px) {
  .hp-rollenfahrt__fenster { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: 32px calc(var(--rand) * -1) 0; padding: 0 var(--rand); }
  .hp-rollenfahrt__fenster::-webkit-scrollbar { display: none; }
  .hp-blatt { flex-basis: 86vw; scroll-snap-align: center; }
  /* Lagemaß rollt seitlich, statt fünf Namen in schmale Spalten zu brechen. */
  .hp-lagemass { overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--rand) * -1); padding-right: var(--rand); }
  .hp-lagemass::-webkit-scrollbar { display: none; }
  .hp-lagemass button { flex: none; white-space: nowrap; }
  .hp-blatt__kopf { grid-template-columns: minmax(0, 1fr); }
  .hp-blatt__kopf > div + div { border-left: 0; border-top: 1px solid var(--linie-stark); }
  .hp-blatt__inhalt { grid-template-columns: minmax(0, 1fr); }
  .hp-blatt .hp-werkzeug__zeile { opacity: 1; transform: none; }
  .hp-faden { display: none; }
  .hp-ablauf__buehne { display: block; }
  .hp-ablauf__schritte { gap: 0; border-left: 14px solid var(--linie); border-radius: 7px; }
  .hp-ablauf__schritte li { grid-area: auto; padding: 0 0 28px 20px; position: relative; }
  .hp-ablauf__schritte li::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 14px; background: var(--signalgelb); transform: scaleY(0); transform-origin: top; transition: transform 300ms ease-out; }
  .hp-ablauf__schritte li[data-an]::before { transform: scaleY(1); }
  .hp-ablauf__schritte strong { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .hp-ablauf__belege { display: none; }
  .hp-schluss__innen { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================================
   Runde 2 der Kritik: größere Oberflächen, keine Überlagerungen, fünf Werkzeuge, kein Kasten im Schluss
   ========================================================================================= */

/* ---------- Szene: Oberflächen gut die Hälfte der Bühne, Schrift 15 bis 16 px ---------- */
@media (min-width: 1024px) {
  .hp-ui, .hp-ui[data-ui="1"], .hp-ui[data-ui="3"], .hp-ui[data-ui="4"] { width: min(46%, 520px); }
  .hp-ui__bauteile li, .hp-ui__pakete li, .hp-ui__kosten { font-size: 1rem; }
  .hp-ui__titel { font-size: 0.9375rem; }
}
/* Leistungsverzeichnis: die Position bekommt den Platz, Menge und Preis bleiben schmal; kein Einwortbruch. */
/* In der Szene zwei Spalten: Position und Menge; dass der Bieter den Preis setzt, steht im Fuß. */
.hp-ui[data-ui="3"] .hp-lv__kopf, .hp-ui[data-ui="3"] .hp-lv__zeile { grid-template-columns: minmax(0, 1fr) auto; }
.hp-ui[data-ui="3"] .hp-lv__kopf span:last-child, .hp-ui[data-ui="3"] .hp-lv__frei { display: none; }
/* Stempel unter den Häusern statt über dem Titel. */
.hp-ui[data-ui="4"] { display: grid; }
.hp-ui[data-ui="4"] .hp-stempel { position: relative; top: auto; right: auto; justify-self: end; margin-top: 16px; }

/* Bildzeile der Bühne: welcher Stand des Hauses gerade zu sehen ist. */
.hp-szene__stand { position: absolute; z-index: 2; left: 16px; bottom: 16px; max-width: calc(54% - 40px); display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 12px; border-radius: 14px; background: color-mix(in srgb, var(--grund) 88%, transparent); color: var(--text); font-size: 0.875rem; font-weight: 650; opacity: 0; transition: opacity 300ms ease; }
.hp-szene__stand::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--k, var(--text-2)); }
.hp-szene[data-angekommen] .hp-szene__stand:not([hidden]) { opacity: 1; }
.hp-szene__stand[hidden] { display: flex; opacity: 0 !important; }
@media (max-width: 1023px) {
  .hp-szene__stand { display: none !important; }
}

/* ---------- Am Rechner ohne Pin (keine Bewegung, kein Skript): Funktion und Oberfläche nebeneinander ---------- */
@media (min-width: 1024px) {
  .hp-szene:not([data-gepinnt]) .hp-szene__innen { height: auto; align-items: start; row-gap: 56px; padding-top: clamp(80px, 10vw, 140px); }
  .hp-szene:not([data-gepinnt]) .hp-szene__texte, .hp-szene:not([data-gepinnt]) .hp-szene__buehne { display: contents; }
  .hp-szene:not([data-gepinnt]) .hp-szene__einleitung { grid-column: 1 / -1; grid-row: 1; }
  .hp-szene:not([data-gepinnt]) .hp-szene__marken, .hp-szene:not([data-gepinnt]) .hp-szene__ersatz, .hp-szene:not([data-gepinnt]) .hp-szene__stand { display: none !important; }
  .hp-szene:not([data-gepinnt]) .hp-funktion { grid-column: 1; }
  .hp-szene:not([data-gepinnt]) .hp-ui { position: relative; inset: auto; grid-column: 2; width: auto; translate: none; transform: none; opacity: 1; visibility: visible; filter: none; }
  .hp-szene:not([data-gepinnt]) [data-funktion="0"], .hp-szene:not([data-gepinnt]) [data-ui="0"] { grid-row: 2; }
  .hp-szene:not([data-gepinnt]) [data-funktion="1"], .hp-szene:not([data-gepinnt]) [data-ui="1"] { grid-row: 3; }
  .hp-szene:not([data-gepinnt]) [data-funktion="2"], .hp-szene:not([data-gepinnt]) [data-ui="2"] { grid-row: 4; }
  .hp-szene:not([data-gepinnt]) [data-funktion="3"], .hp-szene:not([data-gepinnt]) [data-ui="3"] { grid-row: 5; }
  .hp-szene:not([data-gepinnt]) [data-funktion="4"], .hp-szene:not([data-gepinnt]) [data-ui="4"] { grid-row: 6; }
  .hp-szene:not([data-gepinnt]) .hp-ui__kosten > div, .hp-szene:not([data-gepinnt]) .hp-lv__zeile, .hp-szene:not([data-gepinnt]) .hp-haeuser li { opacity: 1; }
}

/* ---------- Für wen: Lagemaß über den Blättern, Nachbarn zeigen nur den Plankopf ---------- */
.hp-lagemass { margin-top: 20px; }
.hp-rollenfahrt__fenster { margin-top: 24px; }
@media (min-width: 1024px) {
  /* Kopf in einer Zeile: Überschrift links, Satz rechts; so stehen Lagemaß und Blatt ganz im Bild. */
  .hp-rollenfahrt .hp-kopfzeile { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 40px; max-width: none; }
  .hp-rollenfahrt .hp-kopfzeile h2 { font-size: clamp(2rem, 3vw, 2.9rem); }
  .hp-rollenfahrt .hp-kopfzeile p { margin: 0; }
  .hp-blatt h3 { font-size: clamp(1.6rem, 2.2vw, 2.2rem); }
  .hp-blatt__inhalt { transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1); }
  .hp-blatt:not([data-aktiv]) .hp-blatt__inhalt { opacity: 0; transition-duration: 140ms; }
  .hp-blatt__inhalt { padding: clamp(20px, 2.2vw, 32px); align-items: start; }
}
/* Balken: Investition je Paket, Förderung darin; sie wachsen, wenn das Blatt in der Mitte steht. */
.hp-balken { display: grid; gap: 14px; padding: 16px; }
.hp-balken__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: 0.9375rem; font-weight: 620; }
.hp-balken__zeile b { font-variant-numeric: tabular-nums; }
.hp-balken__spur { grid-column: 1 / -1; position: relative; height: 12px; border-radius: 6px; background: var(--linie); overflow: hidden; }
.hp-balken__spur i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 6px; background: var(--text-2); transform-origin: left center; transform: scaleX(var(--w)); }
.hp-balken__spur i.hp-balken__foerderung, .hp-balken__legende i.hp-balken__foerderung { background: var(--signalgelb); }
.hp-balken__legende { display: flex; gap: 18px; margin: 2px 0 0; color: var(--text-2); font-size: 0.8125rem; font-weight: 620; }
.hp-balken__legende span { display: inline-flex; align-items: center; gap: 6px; }
.hp-balken__legende i { width: 12px; height: 12px; border-radius: 3px; background: var(--text-2); }
/* Gruppen: Maßnahmen unter ihrem Paket. */
.hp-gruppe { display: grid; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--linie); }
.hp-werkzeug__titel + .hp-gruppe { border-top: 0; }
/* Vier Pakete im Raster zwei mal zwei, damit das Blatt nicht höher wird als die anderen. */
@media (min-width: 1024px) {
  .hp-werkzeug[data-werkzeug="energieberatung"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-werkzeug[data-werkzeug="energieberatung"] .hp-werkzeug__titel { grid-column: 1 / -1; }
  .hp-werkzeug[data-werkzeug="energieberatung"] .hp-gruppe { border-top: 1px solid var(--linie); }
  .hp-werkzeug[data-werkzeug="energieberatung"] .hp-gruppe:nth-of-type(even) { border-left: 1px solid var(--linie); }
}
.hp-gruppe b { font-size: 0.9375rem; font-weight: 740; }
.hp-gruppe ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.hp-gruppe li { color: var(--text-2); font-size: 0.8125rem; font-weight: 580; line-height: 1.35; }
/* Planung: das Modell selbst; ohne Modell die Komponenten als Liste. */
.hp-werkzeug__haus { display: none; }
.hp-werkzeug__liste { display: grid; margin: 0; padding: 0; list-style: none; }
.hp-werkzeug__liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--linie); }
.hp-werkzeug__liste li:first-child { border-top: 0; }
.hp-werkzeug__liste li span:last-child { color: var(--text-2); font-size: 0.875rem; }
@media (min-width: 1024px) {
  html[data-modell] .hp-werkzeug__haus { display: block; height: clamp(260px, 34vh, 380px); }
  html[data-modell] .hp-werkzeug--modell .hp-werkzeug__liste { display: none; }
  .hp-balken__spur i { transform: scaleX(0); transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--i, 0) * 70ms); }
  .hp-blatt[data-aktiv] .hp-balken__spur i { transform: scaleX(var(--w)); }
  .hp-gruppe { opacity: 0.25; transform: translateX(10px); transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--i, 0) * 60ms), transform 320ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--i, 0) * 60ms); }
  .hp-blatt[data-aktiv] .hp-gruppe { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-bewegung="an"]) .hp-balken__spur i { transform: scaleX(var(--w)); transition: none; }
  html:not([data-bewegung="an"]) .hp-gruppe { opacity: 1; transform: none; }
}
/* Die Welt zeichnet auf dem Blatt und im Schluss ohne eigenen Grund: kein Kasten um das Haus. */
.hp-welt[data-ort="rolle"], .hp-welt[data-ort="schluss"] { background: none; }

/* ---------- Ablauf: Füllung folgt dem Haken, Belege nur, wo die Szene nichts zeigt ---------- */
.hp-faden__fuellung { transition: width 180ms ease-out; }
.hp-beteiligte { display: grid; margin: 0; padding: 0; list-style: none; }
.hp-beteiligte li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie); font-size: 0.9375rem; font-weight: 620; }
.hp-beteiligte li:first-child { border-top: 0; }
.hp-beteiligte i { color: var(--text-2); font-size: 1.25rem; }
.hp-beleg--verweis { background: none; border-style: dashed; box-shadow: none; }
.hp-verweis { display: grid; gap: 12px; }
.hp-verweis p { margin: 0; color: var(--text-2); font-size: 0.9375rem; }
.hp-verweis a { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 1.25rem; font-weight: 760; text-decoration: none; }
.hp-verweis a i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--signalgelb); color: var(--blauschwarz); font-size: 1.1rem; }
.hp-verweis a:hover span, .hp-verweis a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
/* Doppelte Gewerkeliste fällt weg: die Liste unten bleibt die eine. */

/* ---------- Schluss: Haus groß und randlos auf dem Seitengrund ---------- */
.hp-schluss__haus { aspect-ratio: auto; height: clamp(320px, 62vh, 640px); border-radius: 0; }
@media (max-width: 1023px) {
  .hp-schluss__haus { height: 46vh; height: 46svh; }
}

/* ---------- Ersatzbild ohne WebGL oder ohne CDN: das Haus allein, Ränder weich in den Grund ---------- */
.hp-ersatz[hidden] { display: none !important; }
.hp-ersatz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.hp-held__ersatz.hp-ersatz { left: auto; width: min(52%, 820px); }
.hp-schluss__haus { position: relative; }
@media (max-width: 1023px) { .hp-held__ersatz.hp-ersatz { width: 100%; } }

/* Randlose Bühne ab 1536: die Oberflächen rücken an den Bildschirmrand, das Haus bekommt die Mitte. */
@media (min-width: 1536px) {
  .hp-szene[data-gepinnt] .hp-ui { right: calc(40px - max(0px, (100vw - var(--breite)) / 2) - var(--rand)); }
}

/* =========================================================================================
   Startbild wie auf der Projektseite: weder Kopf noch Menü, nur das große Logo oben links, bündig mit dem
   Text. Beim Herunterscrollen geht das große Logo, und die Kopfleiste mit dem kleinen kommt von oben.
   ========================================================================================= */
.kopf.hp-kopf { transition: border-color 200ms ease, background-color 240ms ease, transform 600ms var(--ease-out), opacity 400ms ease, visibility 0s linear 0s; }
.kopf.hp-kopf[data-oben] { transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 300ms ease, opacity 200ms ease, visibility 0s linear 300ms; }
.hp-held__logo {
  position: absolute;
  top: clamp(16px, 3.6vh, 44px);
  left: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
  z-index: 5;
  width: clamp(88px, 14vh, 168px);
  height: auto;
  border-radius: 12px;
  box-shadow: var(--schatten);
  opacity: calc(1 - var(--kopf-t, 0) * 2.5);
  transform: translateY(calc(var(--kopf-t, 0) * -24px));
  pointer-events: none;
}
@media (min-width: 1024px) {
  /* Platz für das große Logo über der Überschrift. */
  .hp-held__innen { padding-top: calc(clamp(16px, 3.6vh, 44px) + clamp(88px, 14vh, 168px) + 40px); }
}
@media (max-width: 1023px) {
  /* Innenabstand statt Außenabstand am Bild: der Außenabstand schlüge durch den Abschnitt durch, und das Logo säße auf dem Haus. */
  .hp-held { padding-top: 104px; }
  .hp-held__logo { top: 16px; width: 72px; }
  .hp-held__flaeche { margin-top: 0; }
}