*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background:
        radial-gradient(ellipse 60% 35% at 85% 4%, rgba(150, 220, 20,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 35% at 0% 55%, rgba(27, 31, 36,0.05) 0%, transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F4F5F4 50%, #ECEEEC 100%);
      background-attachment: fixed;
    }
    img, svg { display: block; max-width: 100%; }

    /* Anker-Offset wegen Sticky-Header */
    section[id] { scroll-margin-top: 96px; }

    /* ==========================================
       HERO / INTRO
       ========================================== */
    .pricing-hero { padding: 72px 0 12px; text-align: center; }
    .pricing-hero .eyebrow { justify-content: center; }
    .pricing-hero h1 {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: clamp(2.5rem, 1.2rem + 4.6vw, 4rem);
      line-height: 1.03;
      letter-spacing: -0.028em;
      color: var(--color-text);
      max-width: 16ch;
      margin-inline: auto;
      text-wrap: balance;
    }
    .pricing-hero h1 em, .pricing-hero h1 i { font-family: var(--font-display); font-optical-sizing: auto; font-style: italic; font-weight: 480; color: var(--color-text); }
    .pricing-hero__lead {
      max-width: 560px;
      margin: 20px auto 0;
      font-size: 1.18rem;
      line-height: 1.6;
      color: var(--color-text-muted);
    }
    .pricing-hero__trust { justify-content: center; margin-top: 26px; }
    .pricing-hero__cta {
      margin-top: 30px;
      display: flex;
      gap: 12px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    .pricing-hero__cta-note {
      width: 100%;
      margin-top: 6px;
      font-size: 0.85rem;
      color: var(--color-text-subtle);
    }

    /* ==========================================
       PRODUKTKARTEN — drei gleichwertige, ganz-klickbare Karten
       Verbund-Selektoren (.module-grid.product-grid / .module-card.product-card)
       sind kein Stil-Zufall: assets/site.css lädt NACH diesem Block und würde bei
       gleicher Spezifität die 3-Spalten-Basis von .module-grid gewinnen — hier
       identisch, aber explizit gehalten für den Fall künftiger site.css-Änderungen.
       ========================================== */
    .module-grid.product-grid { grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 900px)  { .module-grid.product-grid { grid-template-columns: 1fr; } }

    .module-card.product-card {
      position: relative;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
    }
    .module-card.product-card:hover,
    .module-card.product-card:focus-visible {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: var(--color-accent);
    }
    .module-card.product-card:focus-visible {
      outline: none;
      box-shadow: var(--shadow-md), var(--shadow-focus);
    }
    .module-card.product-card:hover .product-card__cta-arrow,
    .module-card.product-card:focus-visible .product-card__cta-arrow {
      transform: translateX(3px);
    }

    /* Badge-Slot: IMMER reserviert (auch ohne Badge), damit alle Karten
       gleich hoch fluchten, falls künftig mal ein "Neu"-Badge dazukommt. */
    .product-card__badge-slot {
      display: flex;
      align-items: center;
      min-height: 1.35rem;
      margin-bottom: 12px;
    }
    .product-card__badge {
      display: inline-flex;
      align-items: center;
      height: 1.35rem;
      background: var(--color-accent-hover);
      color: #fff;
      font-family: var(--font-sans);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      padding: 0 11px;
      border-radius: 999px;
    }

    .product-card h3 { min-height: 2.4rem; }

    .product-card__price {
      display: flex;
      align-items: center;
      gap: 6px;
      min-height: 2.15rem;
      font-family: var(--font-display);
      font-optical-sizing: auto;
      font-weight: 480;
      font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--color-text);
      margin: 4px 0 14px;
    }
    .product-card__price small {
      font-family: var(--font-sans);
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--color-text-muted);
      letter-spacing: 0;
    }
    /* "auf Anfrage" braucht eine eigene, ruhigere Type-Stufe: in der großen Serif
       bricht der Text um und macht die Karte höher als die Nachbarn. Gleiche
       Block-Höhe (min-height oben) hält die Grundlinie trotzdem im Rhythmus. */
    .product-card__price--quote {
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 1.15rem;
      letter-spacing: 0;
      white-space: nowrap;
    }

    /* Zusatz-Positionszeile unter dem Einmalpreis (aktuell nur bei der Website:
       890 € einmalig + laufendes Hosting — muss sichtbar sein, AGB/websites.astro
       verweisen hierher). Zieht sich näher an den Preis, hält aber Abstand zum Lead. */
    .product-card__note { margin: -8px 0 14px; font-size: 0.82rem; line-height: 1.5; color: var(--color-text-subtle); }
    .product-card__note strong { color: var(--color-text-muted); font-weight: 600; }

    .product-card__cta {
      margin-top: auto;
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 13px 16px;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border-strong);
      font-family: inherit;
      font-weight: 700;
      font-size: 0.88rem;
      color: var(--color-primary);
      background: transparent;
      transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
    }
    /* Label als eigenes Flex-Kind: white-space:nowrap verhindert den Umbruch,
       min-width:0 + Ellipsis sind das Sicherheitsnetz für sehr schmale Karten
       (Flex-Kinder haben sonst ein implizites min-width:auto, das Ellipsis
       verhindern würde). Pfeil bleibt direkt hinter dem Text (kein space-between). */
    .product-card__cta-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .product-card__cta-arrow { flex-shrink: 0; width: 17px; height: 17px; transition: transform 200ms var(--ease-out); }
    .module-card.product-card:hover .product-card__cta,
    .module-card.product-card:focus-visible .product-card__cta {
      background: var(--color-primary-soft);
      border-color: var(--color-primary);
    }
    @media (prefers-reduced-motion: reduce) {
      .module-card.product-card { transition: box-shadow 0s, border-color 0s; }
      .module-card.product-card:hover,
      .module-card.product-card:focus-visible {
        transform: none;
      }
      .product-card__cta-arrow { transition: none; }
    }

    /* ==========================================
       BUNDLE — schlanke Angebots-Zeile (kein Konfigurator)
       ========================================== */
    .bundle-line {
      max-width: 880px; margin-inline: auto; display: flex; align-items: center; gap: 28px;
      padding: 32px 36px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    }
    .bundle-line__text { flex: 1; min-width: 0; }
    .bundle-line__text h2 { font-family: var(--font-sans); font-weight: 700; font-size: 1.15rem; color: var(--color-text); margin-bottom: 8px; }
    .bundle-line__text p { font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }
    .bundle-line__text strong { color: var(--color-text); font-weight: 700; }
    .bundle-line .btn { flex-shrink: 0; }

    /* ==========================================
       SO LÄUFT'S – Schritte
       ========================================== */
    .so-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1060px; margin-inline: auto; }
    .so-steps .step-card p { font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }

    /* ==========================================
       RESPONSIVE
       ========================================== */
    @media (max-width: 900px) {
      .so-steps { grid-template-columns: 1fr; max-width: 480px; }
    }
    @media (max-width: 767px) {
      .pricing-hero { padding: 52px 0 8px; }
      .bundle-line { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 24px; }
    }