.hero {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
        gap: clamp(28px, 5vw, 72px);
        align-items: center;
        min-height: calc(100vh - 68px);
        padding: clamp(42px, 7vw, 88px) clamp(20px, 5vw, 72px) 46px;
        animation: page-rise 520ms ease both;
      }

      .hero-copy {
        max-width: 720px;
        animation: content-rise 620ms 80ms ease both;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 32px;
      }

      .trust-row {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 24px;
        color: var(--muted);
        font-size: 0.94rem;
      }

      .trust-row span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }

      .trust-row span::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
      }

      .hero-visual {
        position: relative;
        min-height: min(650px, 72vh);
        animation: content-rise 680ms 160ms ease both;
      }

      .property-photo {
        position: absolute;
        inset: 0 0 72px 34px;
        overflow: hidden;
        border-radius: 8px;
        background:
          linear-gradient(180deg, rgba(18, 55, 52, 0.04), rgba(18, 55, 52, 0.42)),
          url("https://images.unsplash.com/photo-1605146769289-440113cc3d00?auto=format&fit=crop&w=1200&q=82") center / cover;
        box-shadow: var(--shadow);
        transition: transform 260ms ease, box-shadow 260ms ease;
      }

      .scan-card {
        position: absolute;
        right: 0;
        bottom: 0;
        width: min(430px, 86%);
        padding: 20px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: var(--shadow);
        transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
      }

      .hero-visual:hover .property-photo {
        transform: translateY(-3px);
        box-shadow: 0 24px 60px rgba(23, 33, 31, 0.18);
      }

      .hero-visual:hover .scan-card {
        border-color: rgba(13, 124, 102, 0.26);
        transform: translateY(-5px);
      }

      .scan-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
      }

      .scan-title strong {
        display: block;
        font-size: 1.05rem;
      }

      .score {
        display: grid;
        width: 58px;
        height: 58px;
        place-items: center;
        border-radius: 50%;
        color: white;
        background: var(--brand);
        font-weight: 800;
        box-shadow: 0 12px 28px rgba(13, 124, 102, 0.28);
      }

      .metric {
        display: grid;
        grid-template-columns: 130px 1fr auto;
        gap: 12px;
        align-items: center;
        margin-top: 13px;
        color: var(--muted);
        font-size: 0.92rem;
      }

      .bar {
        overflow: hidden;
        height: 8px;
        border-radius: 999px;
        background: var(--soft);
      }

      .bar span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--brand);
      }

      .bar .water {
        background: var(--water);
      }

      .bar .risk {
        background: var(--risk);
      }

      .section {
        padding: 76px clamp(20px, 5vw, 72px);
      }

      .section.alt {
        background: white;
      }

      .section-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 28px;
        margin-bottom: 30px;
      }

      .section h2 {
        margin: 0;
        max-width: 720px;
        font-size: clamp(2rem, 3vw, 3.2rem);
        line-height: 1.05;
        letter-spacing: 0;
      }

      .section-head p {
        max-width: 450px;
        margin: 0;
        color: var(--muted);
      }

      .data-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
      }

      .data-card {
        min-height: 190px;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
      }

      .data-card:hover,
      .source-card:hover {
        border-color: rgba(13, 124, 102, 0.28);
        box-shadow: 0 18px 42px rgba(23, 33, 31, 0.11);
        transform: translateY(-4px);
      }

      .icon {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        margin-bottom: 28px;
        border-radius: 8px;
        background: var(--soft);
        font-size: 1.25rem;
      }

      .data-card h3,
      .step h3 {
        margin: 0 0 8px;
        font-size: 1.1rem;
      }

      .data-card p,
      .step p,
      .source-card p {
        margin: 0;
        color: var(--muted);
      }

      .source-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }

      .source-card {
        min-height: 220px;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        box-shadow: 0 10px 28px rgba(23, 33, 31, 0.08);
        transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
      }

      .source-card span {
        display: inline-flex;
        margin-bottom: 22px;
        color: var(--brand-dark);
        font-size: 0.86rem;
        font-weight: 800;
        text-transform: uppercase;
      }

      .source-card h3 {
        margin: 0 0 8px;
        font-size: 1.18rem;
      }

      .report {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: clamp(22px, 4vw, 54px);
        align-items: center;
      }

      .report-preview {
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow: hidden;
        background: #fbfdfc;
        box-shadow: var(--shadow);
        transition: transform 220ms ease, box-shadow 220ms ease;
      }

      .report-preview:hover {
        transform: translateY(-4px);
        box-shadow: 0 24px 58px rgba(23, 33, 31, 0.16);
      }

      .map {
        position: relative;
        min-height: 300px;
        background:
          linear-gradient(90deg, transparent 48%, rgba(61, 131, 197, 0.2) 49%, rgba(61, 131, 197, 0.2) 52%, transparent 53%),
          linear-gradient(28deg, transparent 42%, rgba(13, 124, 102, 0.16) 43%, rgba(13, 124, 102, 0.16) 46%, transparent 47%),
          linear-gradient(#e7efec 1px, transparent 1px),
          linear-gradient(90deg, #e7efec 1px, transparent 1px);
        background-size: auto, auto, 42px 42px, 42px 42px;
      }

      .map::before {
        content: "";
        position: absolute;
        left: 44%;
        top: 36%;
        width: 74px;
        height: 74px;
        border: 18px solid rgba(13, 124, 102, 0.16);
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }

      .pin {
        position: absolute;
        left: 44%;
        top: 36%;
        width: 18px;
        height: 18px;
        border: 4px solid white;
        border-radius: 50%;
        background: var(--risk);
        box-shadow: 0 6px 20px rgba(216, 95, 69, 0.42);
        transform: translate(-50%, -50%);
      }

      .report-list {
        display: grid;
        gap: 12px;
        padding: 18px;
      }

      .report-item {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        padding: 13px 0;
        border-bottom: 1px solid var(--line);
      }

      .report-item:last-child {
        border-bottom: 0;
      }

      .report-item span {
        color: var(--muted);
      }

      .steps {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
      }

      .step {
        padding: 22px 0;
        border-top: 2px solid var(--line);
      }

      .step-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin-bottom: 20px;
        border-radius: 8px;
        color: white;
        background: var(--ink);
        font-weight: 800;
        transition: background 180ms ease, transform 180ms ease;
      }

      .step:hover .step-num {
        background: var(--brand);
        transform: translateY(-2px);
      }

      .cta {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 24px;
        align-items: center;
        padding: 34px;
        border-radius: 8px;
        color: white;
        background: var(--brand-dark);
        box-shadow: 0 20px 44px rgba(7, 88, 71, 0.18);
      }

      .cta h2 {
        color: white;
      }

      .cta p {
        max-width: 680px;
        margin: 12px 0 0;
        color: rgba(255, 255, 255, 0.78);
      }

      footer {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        padding: 28px clamp(20px, 5vw, 72px);
        color: var(--muted);
        border-top: 1px solid var(--line);
      }

      @keyframes page-rise {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes content-rise {
        from {
          opacity: 0;
          transform: translateY(14px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @media (max-width: 980px) {
        .hero,
        .report,
        .cta {
          grid-template-columns: 1fr;
        }

        .hero {
          min-height: auto;
        }

        .hero-visual {
          min-height: 520px;
        }

        .data-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .source-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .section-head {
          align-items: start;
          flex-direction: column;
        }
      }

      @media (max-width: 680px) {
        .page-header {
          align-items: start;
          flex-direction: column;
        }

        .nav-links {
          width: 100%;
          justify-content: space-between;
          gap: 10px;
          font-size: 0.9rem;
        }

        .hero {
          padding-top: 32px;
        }

        .hero-actions .button {
          width: 100%;
        }

        .hero-visual {
          min-height: 480px;
        }

        .property-photo {
          inset: 0 0 106px 0;
        }

        .scan-card {
          width: 94%;
        }

        .metric {
          grid-template-columns: 1fr;
          gap: 6px;
        }

        .data-grid,
        .source-grid,
        .steps {
          grid-template-columns: 1fr;
        }

        .cta {
          padding: 24px;
        }

        footer {
          flex-direction: column;
        }
      }

/* ---------- Musterbericht (Variante A) ---------- */
.muster {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.muster-checks {
  display: grid;
  gap: 8px;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
}

.muster-checks li::before {
  content: "✓";
  margin-right: 10px;
  color: var(--brand);
  font-weight: 900;
}

.muster-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.muster-actions .is-disabled {
  background: var(--soft);
  color: var(--muted);
  box-shadow: none;
  cursor: default;
}

.muster-meta {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.muster-stack {
  position: relative;
  display: block;
  height: 380px;
}

.muster-page {
  position: absolute;
  display: grid;
  align-content: start;
  gap: 8px;
  width: 220px;
  aspect-ratio: 1 / 1.414;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(23, 33, 31, 0.16);
  transition: transform 260ms ease;
}

.muster-page:nth-child(1) { left: 6%;  top: 34px; transform: rotate(-7deg); }
.muster-page:nth-child(2) { left: 30%; top: 12px; transform: rotate(3deg); }
.muster-page:nth-child(3) { left: 54%; top: 42px; transform: rotate(9deg); }

.muster-stack:hover .muster-page:nth-child(1) { transform: rotate(-10deg) translateX(-14px); }
.muster-stack:hover .muster-page:nth-child(3) { transform: rotate(12deg) translateX(14px); }

.muster-stack.has-images .muster-page {
  padding: 0;
}

.muster-page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.mp-h { display: block; width: 60%; height: 10px; border-radius: 4px; background: var(--brand-deep); }
.mp-l { display: block; height: 6px; border-radius: 3px; background: #e3ebe8; }
.mp-l.s { width: 70%; }
.mp-bar { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--brand) var(--w), #e3ebe8 var(--w)); }
.mp-grade { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 1.4rem; font-weight: 900; }
.mp-tag { position: absolute; top: 10px; right: 10px; padding: 1px 6px; border: 1px solid #c2410c; border-radius: 999px; color: #c2410c; font-size: 0.6rem; font-style: normal; font-weight: 800; }

@media (max-width: 980px) {
  .muster {
    grid-template-columns: 1fr;
  }

  .muster-stack {
    height: 330px;
    max-width: 520px;
  }
}

@media (max-width: 520px) {
  .muster-page {
    width: 160px;
  }

  .muster-stack {
    height: 260px;
  }
}