/**
 * Landingpage: Photovoltaik & Wärmepumpen in Bruchsal – Felix Wagener | Energieversum
 *
 * Die Tokens sind aus src/styles/tokens.css des Projekts übernommen
 * (Analyse: docs/energieversum-ci-analysis.md). Abweichung nur dort, wo eine
 * Marketingseite einen anderen Rhythmus braucht als das Beratungswerkzeug:
 * Sektionsabstand zurück auf die 120 px der Website statt der gestauchten 48 px.
 *
 * Es werden keine Schriftdateien, Logos oder Bilder der Marke ausgeliefert.
 */

/* =========================================================================
   1 · TOKENS
   ========================================================================= */
:root {
  /* Marke */
  --brand: #962c86;
  --brand-dark: #78236b;
  --brand-tint: #f4eaf2;

  /* Neutral */
  --ink: #000000;
  --heading: #444343;
  --muted: #6b6b6b;
  --surface: #ffffff;
  --surface-alt: #f5f4f3;
  --surface-sunken: #ecebe9;
  --line: #d7d7d7;
  --line-strong: #b4b4b4;
  --dark: #2a2a2a;

  /* Energiefluss (identisch zur Anwendung) */
  --energy-pv: #e8a33d;
  --energy-direct: #962c86;
  --energy-battery: #00a5c0;
  --energy-grid: #6e6e6e;
  --energy-heat: #c2571f;
  --energy-mobility: #3f6d8c;

  --negative: #b23a2f;
  --negative-tint: #fbeceb;
  --positive: #1f7a4c;
  --positive-tint: #e8f3ed;

  /* Typografie – Stack des Projekts, bewusst ohne Webfont (§31, §36) */
  --font-sans: 'Segoe UI Variable Display', 'Segoe UI', 'Inter', system-ui, -apple-system,
    'Helvetica Neue', Arial, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --text-micro: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.1875rem, 1.06rem + 0.5vw, 1.5rem);
  --text-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --text-h2: clamp(1.75rem, 1.28rem + 1.95vw, 2.75rem);
  --text-h1: clamp(2.125rem, 1.35rem + 3.25vw, 4.125rem);
  --text-display: clamp(1.875rem, 1.35rem + 2.2vw, 3.25rem);
  --text-mega: clamp(3rem, 2.2rem + 3.6vw, 4.5rem);

  --lh-tight: 1.08;
  --lh-snug: 1.18;
  --lh-normal: 1.55;
  /* Grosse Grade brauchen negative Laufweite, sonst zerfallen die Zeilen. */
  --tracking-h: -0.008em;
  --tracking-label: 0.11em;

  /* Rhythmus – die Website arbeitet mit 120 px Sektionsabstand, 1140 px Container */
  --shell: 1140px;
  --shell-wide: 1320px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* Drei Stufen statt einer: acht Abschnitte mit identischem Abstand sind
     kein Rhythmus, sondern ein Metronom. */
  --section-y-sm: clamp(3rem, 5.5vw, 4.5rem);
  --section-y: clamp(4.5rem, 8.5vw, 7.5rem);
  --section-y-lg: clamp(6rem, 11vw, 10rem);
  --block: clamp(1.5rem, 2.5vw, 2.25rem);

  /* Radien – die Marke setzt durchgängig 4 px */
  --radius: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Bewegung */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --d-fast: 150ms;
  --d-base: 250ms;
  --d-slow: 500ms;

  --header-h: 72px;
}

@media (min-width: 768px) {
  :root {
    --header-h: 88px;
  }
}

/* =========================================================================
   2 · RESET & BASIS
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  padding-top: var(--header-h);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--heading);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-h);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--d-fast) var(--ease);
}

a:hover {
  color: var(--brand-dark);
}

abbr[title] {
  text-decoration: none;
  color: var(--brand);
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.skiplink {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--brand);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: top var(--d-fast) var(--ease-out);
}
.skiplink:focus-visible {
  top: 1rem;
  color: #fff;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide {
  max-width: var(--shell-wide);
}

.section {
  padding-block: var(--section-y);
}
.section--alt {
  background: var(--surface-alt);
}

.section__head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__lead {
  margin-top: 1.125rem;
  font-size: var(--text-lg);
  font-weight: var(--fw-light);
  color: var(--muted);
  max-width: 40rem;
}
.section__head--center .section__lead {
  margin-inline: auto;
}

.h2 {
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
}

.lead {
  font-size: var(--text-lg);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--heading);
}
.h2 + .lead {
  margin-top: 1.125rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand);
}
.section__head--center .eyebrow {
  justify-content: center;
}

/* Ikonografie: ein Strichstärkensystem, Farbe immer über currentColor. */
.ico {
  width: 1.125em;
  height: 1.125em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================================
   3 · BUTTONS
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--d-base) var(--ease),
    border-color var(--d-fast) var(--ease),
    color var(--d-fast) var(--ease),
    transform var(--d-fast) var(--ease-out);
}
.btn:active {
  transform: scale(0.96);
}

.btn--sm {
  min-height: 40px;
  padding: 0.625rem 1.125rem;
  font-size: var(--text-sm);
}
.btn--lg {
  padding: 1.0625rem 2rem;
  min-height: 52px;
}

.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn--primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--heading);
}
.btn--ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.btn--onDark {
  background: #fff;
  border-color: #fff;
  color: var(--brand);
}
.btn--onDark:hover {
  background: var(--brand-tint);
  border-color: var(--brand-tint);
  color: var(--brand-dark);
}

.btn--ghostDark {
  background: transparent;
  border-color: rgb(255 255 255 / 0.32);
  color: #fff;
}
.btn--ghostDark:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 0.08);
  color: #fff;
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: var(--text-base);
  text-decoration: none;
  color: var(--brand);
}
.link-arrow .ico {
  transition: transform var(--d-base) var(--ease-out);
}
.link-arrow:hover .ico {
  transform: translateX(4px);
}

/* =========================================================================
   4 · HEADER
   ========================================================================= */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease);
}
.header.is-scrolled {
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
  transition: height var(--d-base) var(--ease);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--brand);
}
/* Die viewBox des Logos endet bündig am M – rechts Luft geben, sonst klebt
   die Wortmarke am nächsten Element. */
.brand__logo {
  height: clamp(20px, 4.6vw, 26px);
  width: auto;
  padding-right: 8px;
}

.header__meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.header__person {
  display: none;
  flex-direction: column;
  line-height: 1.25;
  text-align: right;
}
.header__name {
  font-size: var(--text-sm);
  color: var(--heading);
}
.header__role {
  font-size: var(--text-xs);
  color: var(--muted);
}

.header__tel {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: var(--text-sm);
  color: var(--heading);
  text-decoration: none;
}
.header__tel:hover {
  color: var(--brand);
}

/* Schmale Geräte: im Kopf bleibt eine Aktion. Die zweite trägt die
   Kontaktleiste am unteren Rand – zwei CTAs nebeneinander passen nicht. */
@media (max-width: 639px) {
  .header__meta .btn {
    display: none;
  }
  .header__tel {
    display: inline-flex;
    justify-content: center;
    min-width: 44px;
  }
  .header__tel span {
    display: none;
  }
  .header__tel .ico {
    width: 1.375rem;
    height: 1.375rem;
  }
}

@media (min-width: 640px) {
  .header__tel {
    display: inline-flex;
  }
}
@media (min-width: 1024px) {
  .header__person {
    display: flex;
  }
  .header__meta {
    gap: 1.75rem;
  }
}

/* Verdichtung beim Scrollen – der Header ist fixiert, daher ohne Layoutsprung. */
@media (min-width: 768px) {
  .header.is-scrolled .header__inner {
    height: 68px;
  }
}

/* =========================================================================
   5 · HERO
   ========================================================================= */
.hero {
  position: relative;
  background: var(--surface);
  overflow: hidden;
}

/* Grossflaechiges Titelbild statt Bildkarte neben Text: das Foto traegt den
   ganzen Hero, die Texte liegen direkt darauf. Haus und PV-Anlage bleiben
   durch den Farbverlauf (.hero__scrim) sichtbar, nur die linke Textzone
   wird zusaetzlich abgedunkelt. */
.hero__stage {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 88vh, 880px);
}
@media (max-width: 899px) {
  .hero__stage {
    align-items: flex-end;
    min-height: clamp(560px, 92vh, 780px);
  }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
  background: var(--surface-sunken);
}
@media (max-width: 899px) {
  .hero__media img {
    object-position: 50% 20%;
  }
}

/* Dezenter Verlauf, kein abgedunkeltes Foto: auf breiten Bildschirmen von
   links (Textzone) nach rechts transparent, auf schmalen von unten (Text)
   nach oben transparent - das Bild bleibt hell und einladend. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgb(23 20 19 / 0.6) 0%,
    rgb(23 20 19 / 0.38) 30%,
    rgb(23 20 19 / 0.04) 58%
  );
}
@media (max-width: 899px) {
  .hero__scrim {
    /* Die Textzone reicht bis knapp zwei Drittel der Bildhoehe hoch (Eyebrow
       ganz oben im Block) - der dunkle Bereich muss ihr entsprechend hoch
       folgen, sonst verliert die Eyebrow-Zeile vor hellem Himmel/Dach ihren
       Kontrast. Nur das obere Viertel (Dachfirst, Himmel) bleibt klar hell. */
    background: linear-gradient(
      0deg,
      rgb(23 20 19 / 0.82) 0%,
      rgb(23 20 19 / 0.78) 45%,
      rgb(23 20 19 / 0.55) 72%,
      rgb(23 20 19 / 0.1) 100%
    );
  }
}

.hero__overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(2rem, 6vw, 3rem);
}

.hero__copy {
  max-width: 34rem;
}

/* Hoehere Spezifitaet als die spaetere globale .eyebrow-Regel (Kapitel 16,
   "Typografie-Feinschliff"), die sonst per Quellreihenfolge gewinnen wuerde,
   obwohl beide Selektoren dieselbe Spezifitaet haben. */
.hero .hero__eyebrow {
  color: rgb(255 255 255 / 0.92);
}
.hero .hero__eyebrow::before {
  background: rgb(255 255 255 / 0.6);
}

.hero__title {
  font-size: var(--text-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  color: #fff;
  position: relative;
  white-space: nowrap;
}
/* Ortsmarke: die Region wird typografisch unterstrichen, nicht dekoriert. */
.hero__title em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 2px;
  background: var(--brand-tint);
  transform: scaleX(0);
  transform-origin: left;
  animation: rule-in 700ms var(--ease-out) 700ms forwards;
}

.hero__lead {
  max-width: 34rem;
  font-size: var(--text-lg);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: rgb(255 255 255 / 0.88);
}

/* Zwei kurze Vertrauenspunkte statt eines weiteren Absatzes - der Hero
   bleibt in Sekunden erfassbar. */
.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.125rem 0 0;
  padding: 0;
  list-style: none;
}
.hero__points li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: #fff;
}
.hero__points li::before {
  content: '✓';
  color: #fff;
  font-weight: var(--fw-medium);
}

/* Die Textspalte ist schmaler als das Bild – nebeneinander passen die
   beiden Knoepfe erst spaet. Bis dahin stehen sie gleich breit
   untereinander, statt ungleich umzubrechen. */
.hero__actions {
  display: grid;
  gap: 0.875rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 1200px) {
  .hero__actions {
    grid-template-columns: auto auto;
    justify-content: start;
  }
}
/* Ghost-Button auf dem Foto: die globale Variante (dunkler Text, grauer
   Rahmen) wuerde auf dem Bild kaum lesbar sein. */
.hero__actions .btn--ghost {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.6);
  color: #fff;
}
.hero__actions .btn--ghost:hover {
  background: rgb(255 255 255 / 0.18);
  border-color: #fff;
  color: #fff;
}

/* Kontaktschiene unter dem Hero */
.hero__rail {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.hero__rail-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding-block: 1rem;
}
.hero__rail-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
/* Unterstreichung über transform statt über background-size – die Marke
   animiert sparsam, und transform bleibt auf dem Compositor. */
.hero__rail-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-base);
  color: var(--heading);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease);
}
.hero__rail-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.6875rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--ease-out);
}
.hero__rail-link:hover {
  color: var(--brand);
}
.hero__rail-link:hover::after,
.hero__rail-link:focus-visible::after {
  transform: scaleX(1);
}
.hero__rail-sep {
  width: 1px;
  height: 14px;
  background: var(--line);
}
@media (max-width: 599px) {
  .hero__rail-sep {
    display: none;
  }
}

/* =========================================================================
   6 · TRUST
   ========================================================================= */
.trust {
  background: var(--surface-sunken);
  padding-block: var(--section-y-sm);
}
/* Trennlinien liegen auf den Elementen, nicht als Fläche darunter – sonst
   blitzt das Raster durch, solange die Inhalte noch eingeblendet werden. */
.trust__grid {
  display: grid;
  border-block: 1px solid var(--line);
}
.trust__item {
  padding-block: 1.5rem;
}
.trust__item + .trust__item {
  border-top: 1px solid var(--line);
}
.trust__title {
  font-size: var(--text-h3);
  font-weight: var(--fw-light);
  color: var(--heading);
  margin-bottom: 0.375rem;
}
.trust__text {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.5;
}

@media (min-width: 600px) {
  .trust__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .trust__item {
    padding-inline: 1.75rem;
  }
  .trust__item + .trust__item {
    border-top: none;
  }
  .trust__item:nth-child(odd) {
    padding-left: 0;
  }
  .trust__item:nth-child(even) {
    border-left: 1px solid var(--line);
    padding-right: 0;
  }
  .trust__item:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}
@media (min-width: 1000px) {
  .trust__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .trust__item {
    padding-inline: 1.5rem;
    border-top: none;
  }
  .trust__item:nth-child(odd),
  .trust__item:nth-child(even) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .trust__item + .trust__item {
    border-left: 1px solid var(--line);
  }
  .trust__item:first-child {
    padding-left: 0;
  }
  .trust__item:last-child {
    padding-right: 0;
  }
}

/* =========================================================================
   6b · SCHNELLCHECK
   Das Zentrum der Seite. Als einziges dunkles Band der oberen Seitenhaelfte
   traegt es die staerkste Flaeche genau dort, wo der Lead entsteht.
   Die Karte selbst bleibt weiss, die Ergebnissaeule liegt auf --surface-alt.
   ========================================================================= */
.quickcheck {
  background: var(--dark);
  padding-block: var(--section-y);
}
.quickcheck__head .h2,
.quickcheck__head .eyebrow {
  color: #fff;
}
.quickcheck__head .section__lead {
  color: rgb(255 255 255 / 0.72);
}
.quickcheck__head .eyebrow::before {
  background: rgb(255 255 255 / 0.4);
}

.qc__nojs {
  display: none;
  color: #fff;
}
html:not(.js) .qc__nojs {
  display: block;
}
html:not(.js) .qc {
  display: none;
}

.qc {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

/* ---------------------------- Fortschritt ---------------------------- */
.qc__railwrap {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.qc__rail {
  display: none;
  position: relative;
  justify-content: space-between;
  gap: 0.5rem;
}
@media (min-width: 560px) {
  .qc__rail {
    display: flex;
  }
  .qc__railmobile,
  .qc__railbar {
    display: none;
  }
}
.qc__railitem {
  position: relative;
  flex: 1;
  padding-top: 1.375rem;
  font-size: var(--text-xs);
  color: var(--muted);
  text-align: center;
}
/* Verbindungslinie zwischen den Knoten. */
.qc__railitem::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--line);
}
.qc__railitem:last-child::after {
  display: none;
}
.qc__railitem::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 13px;
  height: 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  z-index: 1;
  transition:
    background-color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease);
}
.qc__railitem[data-state='done']::before {
  background: var(--brand);
  border-color: var(--brand);
}
.qc__railitem[data-state='done']::after {
  background: var(--brand);
}
.qc__railitem[data-state='current']::before {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.qc__railitem[data-state='current'] {
  color: var(--brand-dark);
  font-weight: var(--fw-medium);
}
.qc__railitem--goal::before {
  background: var(--surface);
  border-color: var(--brand);
}

.qc__railmobile {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.qc__railbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.qc__railbar > span {
  display: block;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--line);
}

/* ------------------------------ Raster ------------------------------ */
.qc__grid {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 940px) {
  .qc__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }
}
.qc.is-unlocked .qc__grid {
  grid-template-columns: minmax(0, 1fr);
}
.qc.is-unlocked .qc__steps {
  display: none;
}
/* Wer nach der Freischaltung etwas aendert, bekommt die Schritte zurueck –
   das Ergebnis bleibt sichtbar und rechnet live weiter. */
.qc.is-unlocked.is-editing .qc__steps {
  display: block;
}
.qc.is-unlocked.is-editing .qc__grid {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 940px) {
  .qc.is-unlocked.is-editing .qc__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.qc__edit {
  margin-top: 0.5rem;
  margin-left: 0.5rem;
}

/* ------------------------------ Schritte ------------------------------ */
.qc__step {
  margin: 0;
  padding: 0;
  border: none;
}
.qc__steptitle {
  display: block;
  padding: 0;
  font-size: var(--text-h3);
  color: var(--heading);
  margin-bottom: 1.125rem;
}
.qc__subq {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--heading);
}
.qc__hint {
  margin-top: 0.5rem;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
}

.qc__numwrap {
  position: relative;
}
.qc__num {
  font-size: var(--text-xl);
  padding-right: 7rem;
}
.qc__suffix {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-sm);
  color: var(--muted);
  pointer-events: none;
}
.qc__clamp {
  margin-top: 0.625rem;
  font-size: var(--text-xs);
  color: var(--brand-dark);
  background: var(--brand-tint);
  border-radius: var(--radius);
  padding: 0.5rem 0.625rem;
}

.qc__preisfeld {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 0.875rem;
}

.qc__details {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}
.qc__details summary {
  font-size: var(--text-sm);
  color: var(--brand);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.qc__detailsbody {
  padding-top: 0.75rem;
}

/* ------------------------------ Kacheln ------------------------------ */
.qc__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.qc__tiles--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 560px) {
  .qc__tiles:not(.qc__tiles--2x2):not(.qc__tiles--3) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.qc__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  min-height: 48px;
  padding: 0.625rem 0.75rem;
  font-size: var(--text-sm);
  line-height: 1.3;
  color: var(--heading);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    border-color var(--d-fast) var(--ease),
    background-color var(--d-fast) var(--ease),
    color var(--d-fast) var(--ease);
}
.qc__tile--two {
  min-height: 64px;
}
.qc__tile--wide {
  margin-top: 1rem;
}
.qc__tile--sm {
  min-height: 44px;
  font-size: var(--text-xs);
  text-align: center;
  align-items: center;
}
.qc__tile input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.qc__tile-a {
  font-weight: var(--fw-medium);
}
.qc__tile-b {
  font-size: var(--text-xs);
  color: var(--muted);
}
.qc__tile:hover {
  border-color: var(--line-strong);
}
.qc__tile:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-dark);
}
.qc__tile:has(input:checked) .qc__tile-b {
  color: var(--brand-dark);
}
.qc__tile:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.qc__follow {
  margin-top: 0.75rem;
  padding-left: 0.875rem;
  border-left: 2px solid var(--brand-tint);
}

/* ------------------------------- Gate ------------------------------- */
.qc__gate .field {
  margin-top: 1rem;
}
.qc__gate .form__grid {
  margin-top: 1rem;
}

.qc__turnstile {
  margin-top: 1.25rem;
}

.qc__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1.25rem;
  cursor: pointer;
}
.qc__consent input {
  margin-top: 0.1875rem;
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}
.qc__consent span {
  font-size: var(--text-sm);
  color: var(--heading);
  line-height: 1.5;
}
.qc__consent a {
  color: var(--brand);
}
.qc__gatelead {
  font-size: var(--text-lg);
  font-weight: var(--fw-light);
  color: var(--heading);
}
.qc__gatewhy {
  margin-top: 0.75rem;
  font-size: var(--text-sm);
  color: var(--heading);
  line-height: 1.55;
}
.qc__gateahead {
  margin-top: 1.25rem;
  font-size: var(--text-sm);
  color: var(--heading);
  line-height: 1.55;
}
.qc__privacy {
  margin-top: 1rem;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
}
.qc__error {
  margin-top: 1rem;
  padding: 0.9375rem 1.125rem;
  border-radius: var(--radius);
  border: 1px solid #eec4c0;
  background: var(--negative-tint);
  color: #8e2c23;
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* ----------------------------- Navigation ----------------------------- */
.qc__nav {
  display: flex;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.qc__nav {
  align-items: stretch;
}
.qc__next {
  flex: 1 1 auto;
  width: 100%;
}
@media (min-width: 560px) {
  .qc__next {
    flex: 0 1 auto;
    margin-left: auto;
  }
}
.qc__next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------------------------- Ergebnissaeule ---------------------------- */
.qc__result {
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
  padding: clamp(1.125rem, 2.5vw, 1.75rem);
}
.qc__locked {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 1rem;
}
.qc__lock {
  width: 12px;
  height: 12px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 2px;
  position: relative;
}
.qc__lock::before {
  content: '';
  position: absolute;
  left: 2px;
  top: -4px;
  width: 6px;
  height: 5px;
  border: 1px solid currentColor;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}
.qc.is-unlocked .qc__locked {
  display: none;
}

/* Die beiden Werte, die auch vor der Freischaltung laufen. */
.qc__live {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding-bottom: 1.125rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.125rem;
}
.qc__livelabel {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
}
.qc__livevalue {
  display: block;
  font-size: var(--text-h3);
  font-weight: var(--fw-medium);
  color: var(--heading);
  line-height: 1.2;
}

.qc__resulthead {
  display: none;
  font-size: var(--text-h3);
  font-weight: var(--fw-medium);
  color: var(--heading);
  margin-bottom: 0.75rem;
}
.qc.is-unlocked .qc__resulthead {
  display: block;
}

.qc__reslabel {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.qc__headline {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-top: 0.25rem;
}
.qc__big {
  display: inline-flex;
  gap: 3px;
  font-size: var(--text-mega);
  font-weight: var(--fw-light);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--brand);
}
.qc__unit {
  font-size: var(--text-xl);
  color: var(--muted);
}

/* ------------------------ Stromkosten-Vergleich ------------------------
   Die wichtigste Aussage des Schnellchecks: Die Euro-Werte sind die
   groessten und kraeftigsten Zahlen im Ergebnis. Drei Stufen (heute, ggf.
   zukuenftig ohne PV, zukuenftig mit PV) stehen untereinander, gefolgt von
   der Ersparnis. Technische Kennzahlen folgen erst danach, kleiner. */
.qc__costs {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.qc__coststage {
  padding-bottom: 1.125rem;
  margin-bottom: 1.125rem;
  border-bottom: 1px solid var(--line);
}
.qc__coststage--pv {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.qc__costtag {
  margin-top: 0.25rem;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.35;
}
.qc__costtag--pv {
  color: var(--brand-dark);
}
.qc__costvalue {
  margin-top: 0.25rem;
  font-size: var(--text-h2);
  font-weight: var(--fw-light);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.qc__costvalue--pv {
  color: var(--brand);
}
.qc__costsub {
  margin-top: 0.125rem;
  font-size: var(--text-sm);
  color: var(--muted);
}
.qc__costmeta {
  margin-top: 0.375rem;
  font-size: var(--text-xs);
  color: var(--muted);
}
.qc__savings {
  margin-top: 1.25rem;
  padding: 1rem 1.125rem;
  background: var(--brand-tint);
  border-radius: var(--radius-lg);
}
.qc__savings-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-dark);
}
.qc__headline--savings {
  margin-top: 0.375rem;
}
.qc__headline--savings .qc__big {
  color: var(--brand-dark);
}
.qc__savings-sub {
  margin-top: 0.125rem;
  font-size: var(--text-base);
  color: var(--brand-dark);
}
.qc__disclaimer {
  margin-top: 1rem;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
}

/* Platzhalterblock: exakt so gross wie die spaetere Ziffer, deshalb springt
   beim Freischalten nichts. Kein Weichzeichner, kein Schimmern - beides
   wuerde eine Zahl behaupten, die noch nicht gezeigt wird. */
.qc__ph {
  display: inline-block;
  width: 0.62em;
  height: 0.72em;
  border-radius: 4px;
  background: var(--line);
}

/* --------------------------- Vorteile-Sektion ---------------------------
   Positiver Abschluss der wirtschaftlichen Auswertung, vor den technischen
   Details. Icons in der bestehenden Strichzeichnung (.ico), nur groesser
   und in Markenfarbe. */
.qc__vorteile {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.qc__vorteilliste {
  display: grid;
  gap: 1.125rem;
  margin-top: 0.875rem;
}
.qc__vorteil {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
}
.qc__vorteil-icon {
  grid-row: 1 / 3;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qc__vorteil-title {
  align-self: end;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--heading);
}
.qc__vorteil-text {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
}

/* Alles hierin bleibt bis zur Freischaltung verborgen. */
.qc__gated {
  display: none;
}
.qc.is-unlocked .qc__gated {
  display: block;
}

.qc__blocktitle {
  margin-top: 1.5rem;
  margin-bottom: 0.625rem;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--heading);
}

/* Gestapelter Balken - die Bilanz als Bild. */
.qc__stack {
  display: flex;
  height: 10px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--line);
}
.qc__stack > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--mark, var(--brand));
  transition: width var(--d-base) var(--ease-out);
}
.qc__legend {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.625rem;
}
.qc__legend li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--heading);
}
.qc__legend i {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 2px;
  background: var(--mark, var(--brand));
}
.qc__legend b {
  margin-left: auto;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.qc__sub {
  margin-top: 0.625rem;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
}

.qc__values {
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.qc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.625rem;
  border-bottom: 1px solid var(--line);
}
.qc__row dt {
  font-size: var(--text-sm);
  color: var(--muted);
}
.qc__row dd {
  font-size: var(--text-base);
  color: var(--heading);
  text-align: right;
  white-space: nowrap;
}

.qc__notes {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
}
.qc__notes-title,
.qc__notes li {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
}

.qc__gap {
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  background: var(--brand-tint);
  border-radius: var(--radius);
}
.qc__gap-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--brand-dark);
  margin-bottom: 0.375rem;
}
.qc__gap-text {
  font-size: var(--text-sm);
  color: var(--heading);
  line-height: 1.55;
}
.qc__assumptions {
  margin-top: 1.25rem;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.55;
}

/* --------------------------- Nach dem Gate --------------------------- */
.qc__after {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.qc__strip {
  padding: 1rem 1.125rem;
  border-radius: var(--radius);
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.qc__copy {
  margin-top: 1rem;
}
.qc__copyto {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 0.375rem;
}
.qc__copytext {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--heading);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem;
  resize: vertical;
}
.qc__copybtns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

.qc__nextlead {
  margin-top: 1.75rem;
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--heading);
}
.qc__next2 {
  display: grid;
  gap: 1.5rem;
  margin-top: 1rem;
}
@media (min-width: 720px) {
  .qc__next2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}
.qc__next2block .btn {
  margin-top: 0.75rem;
}
.qc__phone {
  display: inline-block;
  font-size: var(--text-h3);
  color: var(--brand);
  text-decoration: none;
}
.qc__phone:hover {
  color: var(--brand-dark);
}

/* =========================================================================
   7 · ADVISOR
   ========================================================================= */
.advisor__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
  .advisor__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 6vw, 5rem);
  }
}

.advisor__body > p + p {
  margin-top: 1.125rem;
}
.advisor__body > p {
  color: var(--muted);
}
.advisor__body > .lead {
  color: var(--heading);
}

.benefits {
  display: grid;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.benefit {
  padding-block: 1.25rem;
}
.benefit + .benefit {
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .benefit {
    padding: 1.5rem 1.25rem;
  }
  .benefit + .benefit {
    border-top: none;
    border-left: 1px solid var(--line);
  }
  .benefit:first-child {
    padding-left: 0;
  }
  .benefit:last-child {
    padding-right: 0;
  }
}
.benefit__title {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--brand);
  margin-bottom: 0.375rem;
}
.benefit__text {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.5;
}

/* =========================================================================
   8 · SOLUTIONS
   ========================================================================= */
.cards {
  display: grid;
  gap: clamp(1rem, 2vw, 1.25rem);
}
@media (min-width: 620px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Sechs gleich grosse Kaesten wirken monoton, weil sie gleich GROSS sind –
   nicht weil ihnen Bilder fehlen. Deshalb eine Groessenhierarchie 2/1/3 mit
   genau EINEM Bild statt sechs Produktkacheln. */
@media (min-width: 980px) {
  .cards {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .card--wide {
    grid-column: span 3;
  }
  .card--lead {
    grid-column: 1 / -1;
  }
  .cards > .card:not(.card--wide):not(.card--lead) {
    grid-column: span 2;
  }
}
@media (min-width: 620px) and (max-width: 979px) {
  .card--lead,
  .cards > .card:last-child {
    grid-column: 1 / -1;
  }
}

.card--lead {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: center;
}
@media (min-width: 620px) {
  .card--lead {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  }
}
@media (min-width: 980px) {
  .card--lead {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  }
}
/* Die Quelle ist ein Studioschuss auf hellgrauem Verlauf, kein echter
   Freisteller. Statt ihn zu beschneiden oder aufzuhellen – was ein
   Farbeingriff waere – bekommt er eine eigene helle Bildflaeche. */
.card__figure {
  display: block;
  background: var(--surface-alt);
  border-radius: var(--radius);
  overflow: hidden;
}
.card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.card--lead .card__mark {
  margin-bottom: 0.875rem;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 1.875rem);
  transition:
    border-color var(--d-base) var(--ease),
    transform var(--d-base) var(--ease-out);
}
.card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}
.card__mark {
  display: block;
  width: 28px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--mark, var(--brand));
  margin-bottom: 1.125rem;
  transition: width var(--d-base) var(--ease-out);
}
.card:hover .card__mark {
  width: 44px;
}
.card__title {
  font-size: var(--text-h3);
  font-weight: var(--fw-light);
  color: var(--heading);
  margin-bottom: 0.5rem;
}
.card__text {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.55;
}

/* Energiefarben als Datenattribut – eine Quelle, keine Wiederholung. */
[data-energy='pv'] {
  --mark: var(--energy-pv);
}
[data-energy='direct'] {
  --mark: var(--energy-direct);
}
[data-energy='battery'] {
  --mark: var(--energy-battery);
}
[data-energy='grid'] {
  --mark: var(--energy-grid);
}
[data-energy='heat'] {
  --mark: var(--energy-heat);
}
[data-energy='mobility'] {
  --mark: var(--energy-mobility);
}

/* =========================================================================
   8b · BILDBAND
   Randlose Zäsur zwischen zwei Abschnitten. Kein Text darüber, kein Filter,
   kein Radius – die Marke zeigt Fotos unbehandelt und rechteckig.
   ========================================================================= */
.band {
  margin: 0;
  background: var(--surface-sunken);
}
/* Feste Höhe statt Seitenverhältnis: das Band bleibt auf jedem Schirm ein
   Band und wird auf 1920 px nicht zum Schlitz. Die Höhe reserviert den Platz,
   es entsteht also kein Layoutsprung beim Nachladen. */
.band__img {
  display: block;
  width: 100%;
  height: clamp(200px, 30vw, 520px);
  object-fit: cover;
}
/* Jedes Band hat seinen eigenen Schwerpunkt: ein mittiger Zuschnitt kappt
   sonst den Schornstein bzw. die Oberkante der Wärmepumpe. */
.band--dach .band__img {
  object-position: 50% 16%;
}
.band--waerme .band__img {
  object-position: 50% 10%;
}

/* =========================================================================
   9 · FUTURE / ENERGIEPFAD  (Signaturelement)
   ========================================================================= */
.path {
  position: relative;
}

/* Die Linie trägt die Aussage: ein durchgehender Pfad von heute nach morgen. */
/* Die Achse liegt exakt auf der Knotenmitte:
   Stufenlabel (16px) + Abstand (12px) + halber Knoten (6,5px) = 34px. */
.path__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.path__line-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--energy-direct) 0%,
    var(--energy-pv) 34%,
    var(--energy-heat) 66%,
    var(--energy-mobility) 100%
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1200ms var(--ease-out);
}
.path.is-visible .path__line-fill {
  transform: scaleX(1);
}

.path__steps {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2rem);
}
@media (min-width: 900px) {
  .path__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
  }
}

.path__step {
  position: relative;
  padding-left: 2.25rem;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
  transition-delay: calc(280ms + var(--i) * 130ms);
}
.path.is-visible .path__step {
  opacity: 1;
  transform: none;
}

@media (min-width: 900px) {
  .path__step {
    padding-left: 0;
    padding-top: 0;
  }
}

.path__stage {
  display: block;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
  height: 1rem;
}

.path__node {
  position: absolute;
  display: block;
  left: 0;
  top: 1.75rem;
  width: 13px;
  height: 13px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 3px solid var(--mark, var(--brand));
  box-sizing: border-box;
}
@media (min-width: 900px) {
  .path__node {
    position: relative;
    top: 0;
    margin-bottom: 1.375rem;
  }
}
/* Auf Mobil ersetzt eine vertikale Führungslinie die horizontale Achse. */
@media (max-width: 899px) {
  .path__line {
    top: 0;
    bottom: 0;
    left: 6px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .path__line-fill {
    background: linear-gradient(
      180deg,
      var(--energy-direct) 0%,
      var(--energy-pv) 34%,
      var(--energy-heat) 66%,
      var(--energy-mobility) 100%
    );
    transform: scaleY(0);
    transform-origin: top;
  }
  .path.is-visible .path__line-fill {
    transform: scaleY(1);
  }
}

.path__title {
  font-size: var(--text-h3);
  font-weight: var(--fw-light);
  color: var(--heading);
  margin-bottom: 0.4375rem;
}
.path__text {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.55;
}

.path__note {
  max-width: 44rem;
  margin: clamp(3rem, 5vw, 4rem) auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: var(--text-lg);
  font-weight: var(--fw-light);
  color: var(--heading);
}

/* =========================================================================
   10 · SYSTEM
   ========================================================================= */
.system {
  background: var(--surface-sunken);
}
.system__grid {
  display: grid;
  gap: clamp(2.25rem, 4vw, 4rem);
}
@media (min-width: 900px) {
  .system__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: start;
  }
}
.system__copy > .lead {
  margin-bottom: 1.125rem;
}
.system__copy > p:not(.lead) {
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.factors {
  border-top: 1px solid var(--line-strong);
}
.factor {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.875rem;
  padding-block: 0.9375rem;
  border-bottom: 1px solid var(--line);
}
.factor__no {
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: 0.06em;
}
.factor__chip {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--mark, var(--brand));
}
.factor__label {
  font-size: var(--text-base);
  color: var(--heading);
}

/* =========================================================================
   11 · PROCESS
   ========================================================================= */
.steps {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 3vw, 2rem);
}
@media (min-width: 860px) {
  .steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
  }
  /* Fortschrittslinie über alle fünf Schritte. */
  .steps::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 11px;
    height: 1px;
    background: var(--line);
  }
  .steps::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 11px;
    height: 1px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1100ms var(--ease-out);
  }
  .steps.is-visible::after {
    transform: scaleX(1);
  }
}

.step {
  position: relative;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 550ms var(--ease-out),
    transform 550ms var(--ease-out);
  transition-delay: calc(var(--i) * 110ms);
}
.steps.is-visible .step {
  opacity: 1;
  transform: none;
}
@media (min-width: 860px) {
  .step {
    border-top: none;
    padding-top: 2rem;
    padding-right: 1rem;
  }
}

.step__no {
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  color: var(--brand);
  background: var(--surface);
  padding-right: 0.75rem;
  line-height: 1.5;
}
.step__title {
  font-size: var(--text-h3);
  font-weight: var(--fw-light);
  color: var(--heading);
  margin-bottom: 0.4375rem;
}
.step__text {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.55;
}

/* =========================================================================
   12 · KONTAKT & FORMULAR
   ========================================================================= */
.contact__grid {
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.5rem);
}
@media (min-width: 940px) {
  .contact__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(3rem, 5vw, 4.5rem);
    align-items: start;
  }
}

.contact__card {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.contact__person {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.contact__avatar {
  position: relative;
  width: 76px;
  height: 76px;
  flex: none;
}
.contact__avatar img {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  object-position: 50% 18%;
  outline: 1px solid rgb(0 0 0 / 0.1);
  outline-offset: -1px;
  background: var(--surface-sunken);
}
.contact__name {
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--fw-light);
  color: var(--heading);
  line-height: 1.2;
}
.contact__role {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.45;
}

.contact__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 0.5rem;
  align-items: baseline;
}
.contact__row dt {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.contact__row dd {
  font-size: var(--text-base);
  color: var(--heading);
}
.contact__row a {
  color: var(--heading);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition:
    color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease);
}
.contact__row a:hover {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* Formular */
.form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.375rem, 3vw, 2.25rem);
}
.form__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-light);
  color: var(--heading);
}
.form__hint {
  margin-top: 0.375rem;
  margin-bottom: 1.75rem;
  font-size: var(--text-xs);
  color: var(--muted);
}

.form__grid {
  display: grid;
  gap: 1.125rem;
}
@media (min-width: 560px) {
  .form__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .field {
    grid-column: span 3;
  }
  .field--third {
    grid-column: span 2;
  }
  .field--twothirds {
    grid-column: span 4;
  }
  .field--full {
    grid-column: 1 / -1;
  }
}

.field__label {
  display: block;
  margin-bottom: 0.4375rem;
  font-size: var(--text-sm);
  color: var(--heading);
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.875rem;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition:
    border-color var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease);
}
.field__input::placeholder {
  color: #767676; /* 4,6:1 auf Weiß – Platzhalter tragen hier echte Hinweise */
}
.field__input:hover {
  border-color: var(--line-strong);
}
.field__input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.field__textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.5;
}

.field__select {
  position: relative;
}
.field__select select {
  appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
}
.field__caret {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}

.field__input[aria-invalid='true'] {
  border-color: var(--negative);
  background: var(--negative-tint);
}
.field__error {
  margin-top: 0.375rem;
  font-size: var(--text-xs);
  color: var(--negative);
}

/* Honeypot – unsichtbar, aber nicht display:none (Bots erkennen das). */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__foot {
  margin-top: 1.75rem;
  display: grid;
  gap: 1rem;
}
@media (min-width: 700px) {
  .form__foot {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
  }
}
.form__submit {
  position: relative;
  justify-self: start;
  width: 100%;
}
@media (min-width: 560px) {
  .form__submit {
    width: auto;
  }
}
.form__privacy {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
}

.form__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  border: 2px solid rgb(255 255 255 / 0.35);
  border-top-color: #fff;
  animation: spin 700ms linear infinite;
}
.form.is-sending .form__spinner {
  display: block;
}

.form__status {
  margin-top: 1.25rem;
  padding: 0.9375rem 1.125rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: 1.5;
  border: 1px solid transparent;
}
.form__status[data-tone='success'] {
  background: var(--positive-tint);
  border-color: #bcd9c9;
  color: #14603a;
}
.form__status[data-tone='error'] {
  background: var(--negative-tint);
  border-color: #eec4c0;
  color: #8e2c23;
}
.form__status[data-tone='info'] {
  background: var(--brand-tint);
  border-color: #e0c8db;
  color: var(--brand-dark);
}

/* =========================================================================
   13 · FAQ
   ========================================================================= */
.faq__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
  .faq__grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(3rem, 6vw, 5rem);
  }
}

.faq__list {
  border-top: 1px solid var(--line);
}

.qa {
  border-bottom: 1px solid var(--line);
}
.qa__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 44px;
  padding-block: 1.25rem;
  font-size: var(--text-lg);
  font-weight: var(--fw-light);
  color: var(--heading);
  cursor: pointer;
  list-style: none;
  transition: color var(--d-fast) var(--ease);
}
.qa__q::-webkit-details-marker {
  display: none;
}
.qa__q:hover {
  color: var(--brand);
}
.qa[open] > .qa__q {
  color: var(--brand);
}

.qa__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.375rem;
}
.qa__icon::before,
.qa__icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--d-base) var(--ease-out);
}
.qa__icon::before {
  width: 14px;
  height: 1px;
}
.qa__icon::after {
  width: 1px;
  height: 14px;
}
.qa[open] .qa__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* Sanftes Öffnen ohne Sprung – JS schaltet .is-animating und die Grid-Zeile. */
.qa__panel {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
}
.qa__panel > .qa__a {
  min-height: 0;
  padding-bottom: 1.5rem;
  padding-right: clamp(0rem, 4vw, 3rem);
  font-size: var(--text-base);
  color: var(--muted);
  line-height: 1.6;
}
.qa[data-collapsing] .qa__panel,
.qa[data-expanding] .qa__panel {
  transition: grid-template-rows var(--d-base) var(--ease-out);
}
.qa[data-collapsing] .qa__panel,
.qa[data-expanding-start] .qa__panel {
  grid-template-rows: 0fr;
}

/* =========================================================================
   14 · FINAL CTA
   ========================================================================= */
.finalcta {
  background: var(--dark);
  color: #fff;
  padding-block: clamp(4rem, 7vw, 6.5rem);
}
.finalcta__inner {
  max-width: 46rem;
  text-align: center;
}
.finalcta__title {
  font-size: var(--text-display);
  line-height: var(--lh-snug);
  color: #fff;
}
.finalcta__text {
  margin-top: 1.125rem;
  font-size: var(--text-lg);
  font-weight: var(--fw-light);
  color: rgb(255 255 255 / 0.72);
}
.finalcta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* =========================================================================
   15 · FOOTER
   ========================================================================= */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 1.5rem;
}
.footer__inner {
  display: grid;
  gap: 2rem;
}
@media (min-width: 900px) {
  .footer__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 2.5rem;
  }
}
.footer__logo {
  display: block;
  height: 26px;
  width: auto;
  margin-bottom: 1rem;
}
.footer__addr,
.footer__text {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.6;
}
.footer__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--heading);
  margin-bottom: 0.75rem;
}
.footer__text a,
.footer__links a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease);
}
.footer__text a:hover,
.footer__links a:hover {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.footer__links li {
  font-size: var(--text-sm);
}
/* Ausreichend große Trefferfläche auch auf dem Telefon. */
.footer__links a,
.footer__text a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

.footer__base {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.footer__base p {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.55;
}

/* =========================================================================
   16 · MOBILE CONTACT BAR
   ========================================================================= */
.mobilebar {
  position: fixed;
  z-index: 90;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.625rem;
  padding: 0.625rem var(--gutter);
  padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--d-base) var(--ease-out);
}
.mobilebar.is-visible {
  transform: none;
}
@media (min-width: 860px) {
  .mobilebar {
    display: none;
  }
}
.mobilebar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding-inline: 1.25rem;
  border-radius: var(--radius);
  font-size: var(--text-base);
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background-color var(--d-base) var(--ease),
    transform var(--d-fast) var(--ease-out);
}
.mobilebar__btn:active {
  transform: scale(0.96);
}
.mobilebar__btn--ghost {
  border-color: var(--line);
  color: var(--heading);
}
.mobilebar__btn--primary {
  background: var(--brand);
  color: #fff;
}
.mobilebar__btn--primary:hover {
  background: var(--brand-dark);
  color: #fff;
}

/* Die Leiste darf den Fußbereich nie verdecken. */
@media (max-width: 859px) {
  .footer {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================================
   16b · HIERARCHIE
   Die Seite lief auf zwei Schriftgewichten und faerbte 30 Textstellen mit
   derselben Graustufe – Argumente sahen aus wie Fussnoten. Hier bekommt sie
   vier Stufen und einen Unterschied zwischen Behauptung und Einschraenkung.
   Kein neuer Farbwert, keine neue Schrift.
   ========================================================================= */

/* Grosse Grade brauchen mehr negative Laufweite als kleine. */
.hero__title {
  letter-spacing: -0.028em;
}
.h2 {
  letter-spacing: -0.02em;
}
.finalcta__title {
  letter-spacing: -0.024em;
}

/* 500 traegt die Titel, die etwas benennen. */
.card__title,
.step__title,
.path__title,
.trust__title,
.form__title,
.qc__steptitle {
  font-weight: var(--fw-medium);
}

/* 600 traegt die Kleinversalien – erst dadurch werden sie als Marke lesbar. */
.eyebrow,
.footer__label,
.contact__row dt,
.hero__rail-label,
.qc__reslabel,
.portrait__region {
  font-weight: var(--fw-semibold);
}

/* Text, der etwas behauptet, bekommt Kontrast (9,9:1 statt 5,3:1).
   --muted bleibt echten Nebentexten vorbehalten. */
.card__text,
.trust__text,
.path__text,
.step__text,
.benefit__text,
.qa__a {
  color: var(--heading);
}

/* Der Eyebrow war eine von rund 42 Magenta-Stellen. Er wird zur
   Strukturmarke, Magenta bleibt den Aktionen. */
.eyebrow {
  color: var(--muted);
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--line);
  flex: none;
}
.section__head--center .eyebrow::before {
  display: none;
}

/* =========================================================================
   17 · REVEALS & KEYFRAMES
   ========================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
}
.js [data-reveal] {
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Ohne JavaScript bleibt jeder Inhalt sichtbar. */
html:not(.js) [data-reveal],
html:not(.js) .path__step,
html:not(.js) .step {
  opacity: 1;
  transform: none;
}

/* Hero-Auftritt: eine einmalige, gestaffelte Sequenz beim Laden. */
.hero__eyebrow,
.hero__title,
.hero__lead,
.hero__points,
.hero__actions,
.hero__media {
  animation: rise-in 700ms var(--ease-out) both;
}
.hero__eyebrow {
  animation-delay: 60ms;
}
.hero__title {
  animation-delay: 140ms;
}
.hero__lead {
  animation-delay: 250ms;
}
.hero__points {
  animation-delay: 310ms;
}
.hero__actions {
  animation-delay: 380ms;
}
.hero__media {
  animation: portrait-in 900ms var(--ease-out) both;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes portrait-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 22% 0);
    transform: scale(1.03);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

@keyframes rule-in {
  to {
    transform: scaleX(1);
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

/* =========================================================================
   18 · REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Kein Bewegungseffekt, aber auch kein unsichtbarer Inhalt. */
  [data-reveal],
  .path__step,
  .step {
    opacity: 1 !important;
    transform: none !important;
  }
  .path__line-fill,
  .steps::after {
    transform: scaleX(1) !important;
  }
  .hero__title em::after {
    transform: scaleX(1) !important;
  }
  .mobilebar {
    transform: none;
  }
  .card:hover,
  .btn:active,
  .mobilebar__btn:active {
    transform: none;
  }
}

/* =========================================================================
   19 · PRINT
   ========================================================================= */
@media print {
  .header,
  .mobilebar,
  .hero__actions,
  .formwrap {
    display: none !important;
  }
  body {
    padding-top: 0;
  }
  [data-reveal],
  .path__step,
  .step {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Automatisch abgeleitete Speichergroesse: Anzeige statt Auswahl.
   Der Wert wechselt mit der Anlagengroesse – deshalb tabellarische Ziffern,
   damit er beim Neurechnen nicht springt. */
.qc__auto {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  margin-top: 0.5rem;
}
.qc__auto-val {
  font-size: var(--text-xl);
  font-weight: var(--fw-light);
  color: #fff;
  transition: opacity var(--d-fast) var(--ease);
}
.qc__auto-note {
  font-size: var(--text-xs);
  color: rgb(255 255 255 / 0.62);
}