/* ============================================================
       Preise & Leistungen v2 - Pricing-Layout (Pioneer-Phase, drei Vertragsmodelle)
       ============================================================ */
    /* --cream, --paper, --pioneer-pink, --gold-deep stehen jetzt in tokens.css */

    /* Sprunganker-Offset: hier zusätzlich die sticky Toggle-Bar (top:--header-h)
       berücksichtigen, sonst landen #pakete-vereine/#pakete-gewerbe/#faq darunter.
       preise.css wird nur auf /preise und nach base.css geladen -> überschreibt dort gezielt. */
    html { scroll-padding-top: calc(var(--header-h) + 88px); }

    /* Sektion-Abstand unten: sp-12 oben (Standard, 48px) + 72px unten (1.5x) -
       schafft mehr Luft zwischen den Blöcken, analog zu idee.html. */
    .preise-section,
    .pioneer-info-section {
      padding-bottom: 72px;
    }

    /* HERO: nutzt jetzt den zentralen .lead-hero (layout.css) - früher eigener
       .preise-hero (aus der Prototyp-Seite portiert). Hier bleibt nur die
       seitenspezifische Glue: Hero + Footer ohne weißen Streifen. */
    body.preise-page .lead-hero { margin-bottom: 0; }
    body.preise-page .site-footer { margin-top: 0; }

    /* Pioneer-Banner - einheitlicher Bubble-Standard (glasig, backdrop-blur)
       analog zu idee.html .idee-quersub. Gold-Akzent bleibt nur über Dot + strong. */
    .pioneer-banner {
      display: inline-flex;
      align-items: center;
      gap: .85rem;
      padding: .85rem 1.4rem;
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 999px;
      color: rgba(255, 255, 255, 0.9);
      font-size: var(--fs-sm);
      font-weight: 500;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      margin-bottom: var(--sp-8);
      opacity: 0;
      transform: translateY(8px);
      animation: ideeBubbleIn .9s cubic-bezier(.2, .7, .2, 1) .35s forwards;
    }
    /* Animation analog idee.html (lokale Kopie, damit pre­ise.html ohne idee.html-Inline-CSS animiert) */
    @keyframes ideeBubbleIn {
      to { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .pioneer-banner { opacity: 1; transform: none; animation: none; }
    }
    .pioneer-banner strong { color: var(--brand-orange, #F5C518); font-weight: 700; letter-spacing: 0.04em; }
    .pioneer-banner-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--brand-orange, #F5C518);
      box-shadow: 0 0 12px rgba(245,197,24,0.7);
      animation: pioneer-pulse 2s infinite;
    }
    @keyframes pioneer-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }


    /* Pioneer-Phase: 3-Schritt-Layout (vor der Toggle-Bar)
       Container/Background/Headline kommen aus .preise-section / .preise-section-head */
    .pioneer-steps {
      list-style: none;
      margin: var(--sp-6) 0 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-5);
      counter-reset: pioneer-steps;
    }
    .pioneer-step {
      position: relative;
      padding: var(--sp-6) var(--sp-5);
      background: #ffffff;
      border: 1px solid var(--border-1);
      border-radius: 14px;
      box-shadow: var(--shadow-xs);
      text-align: center;
    }
    .pioneer-step-num {
      width: 48px;
      height: 48px;
      margin: 0 auto var(--sp-3);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--brand-orange);
      color: var(--brand-navy-deep, var(--brand-navy));
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      font-weight: 700;
      box-shadow: 0 4px 12px rgba(245,197,24,0.30);
    }
    .pioneer-step-title {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: 600;
      color: var(--brand-navy);
      margin-bottom: var(--sp-2);
      line-height: 1.25;
    }
    .pioneer-step-text {
      font-size: var(--fs-sm);
      color: var(--text-muted);
      line-height: 1.55;
    }
    .pioneer-step-text strong {
      color: var(--brand-navy);
      font-weight: 600;
    }
    @media (max-width: 720px) {
      .pioneer-steps { grid-template-columns: 1fr; gap: var(--sp-4); }
    }

    /* Mini-Toggle pro Paket */
    .mini-toggle {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      background: var(--surface-2, #eef1f6);
      padding: 4px;
      border-radius: 999px;
      margin-bottom: var(--sp-3);
    }
    .mini-toggle button {
      border: none;
      background: transparent;
      padding: 9px 8px;
      min-height: 44px;        /* WCAG 2.5.5: Mindest-Touch-Ziel (vorher 40) */
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      cursor: pointer;
      font-family: inherit;
      font-size: var(--fs-xs);
      font-weight: 600;
      color: var(--text-muted, #5c6578);
      transition: all 0.15s ease;
      letter-spacing: 0.02em;
      line-height: 1.2;
    }
    .mini-toggle button:hover {
      color: var(--brand-navy);
    }
    .mini-toggle button.is-active {
      background: var(--brand-navy);
      color: #fff;
      box-shadow: 0 2px 8px rgba(1,66,106,0.18);
    }

    /* Karten gleich hoch (Min-Höhe für die Preisbox angleichen) */
    .paket-pricebox {
      min-height: 132px;
    }

    /* Toggle-Bar (sticky) - unter dem fixen Header andocken, nicht dahinter scrollen */
    .price-toggle-wrap {
      position: sticky;
      top: var(--header-h, 0px);
      z-index: 50;
      background: rgba(253,250,242,0.96);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border-1, #e4e8ef);
      padding: var(--sp-3) var(--sp-4);
      box-shadow: 0 2px 12px rgba(1,66,106,0.04);
    }
    /* MOBIL (Basis, Mobile First): EINE kompakte 3er-Reihe statt drei gestapelter Pillen
       (spart viel Höhe auf dem sticky Balken). Sub-Labels mobil aus - der Hinweis unten
       erklärt den aktiven Modus. Aktive Pille gefüllt Navy. Desktop schaltet additiv höher. */
    .price-toggle {
      max-width: 720px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }
    .price-toggle button {
      border: 1.5px solid var(--border-1, #d6dce6);
      background: #fff;
      padding: 8px 7px;
      min-height: 44px;
      border-radius: 999px;
      cursor: pointer;
      font-family: inherit;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--brand-navy, #01426a);
      transition: all 0.15s ease;
      line-height: 1.15;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      text-align: center;
    }
    .price-toggle button:hover {
      border-color: var(--brand-navy, #01426a);
    }
    .price-toggle button.is-active {
      border-color: transparent;
      background: linear-gradient(135deg, var(--brand-navy, #01426a) 0%, var(--brand-navy-deep, #013354) 100%);
      color: #fff;
      box-shadow: 0 4px 14px rgba(1,66,106,0.22);
    }
    /* WCAG 2.4.7: aktive Pillen tragen einen eigenen box-shadow, der sonst den globalen
       :focus-visible-Ring (base.css) verschluckt. Beide kombinieren, damit der Fokus sichtbar bleibt. */
    .price-toggle button.is-active:focus-visible {
      box-shadow: 0 4px 14px rgba(1,66,106,0.22), var(--focus-ring);
    }
    .mini-toggle button.is-active:focus-visible {
      box-shadow: 0 2px 8px rgba(1,66,106,0.18), var(--focus-ring);
    }
    .price-toggle button .toggle-sub {
      display: none; /* mobil aus (Hinweis unten erklärt den Modus); Desktop blendet wieder ein */
      font-size: var(--fs-xs);
      font-weight: 500;
      letter-spacing: 0.03em;
      color: var(--text-muted, #5c6578);
    }
    .price-toggle button.is-active .toggle-sub {
      color: rgba(255,255,255,0.88);
    }

    /* DESKTOP (>= 640px): saubere, einheitliche Pillen-Reihe.
       Drei gleich breite Pillen nebeneinander, weiter mit Outline-Basis
       und gefüllter aktiver Pille (keine zerrissene Track-Optik). */
    @media (min-width: 640px) {
      .price-toggle-wrap { padding: var(--sp-4) var(--sp-6); }
      .price-toggle { gap: 10px; }
      .price-toggle button {
        padding: 11px 16px;
        min-height: 56px;
        font-size: var(--fs-sm);
        gap: 2px;
      }
      .price-toggle button .toggle-sub { display: block; }
    }
    .price-toggle-hint {
      max-width: 720px;
      margin: 10px auto 0;
      font-size: var(--fs-xs);
      color: var(--text-muted);
      text-align: center;
      line-height: 1.5;
    }

    /* Section-System steht zentral in components.css */

    /* Paket-Karten */
    .preise-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      max-width: 920px;
      margin: 0 auto;
    }
    @media (max-width: 720px) {
      .preise-grid { grid-template-columns: 1fr; }
    }
    .paket {
      background: #fff;
      border-radius: 16px;
      padding: 28px;
      box-shadow: 0 2px 8px rgba(1,66,106,0.06);
      border: 1px solid var(--border-1, #e4e8ef);
      position: relative;
      display: flex;
      flex-direction: column;
    }
    .paket--featured {
      border-top: 4px solid var(--brand-orange, #F5C518);
      box-shadow: 0 8px 28px rgba(1,66,106,0.14), 0 0 0 1px rgba(245,197,24,0.18);
    }
    .paket--pioneer {
      background: linear-gradient(180deg, var(--pioneer-pink) 0%, #fff 60%);
    }
    /* Featured + Pioneer = Premium-Look mit warmem Sonnenland-Gold-Schimmer */
    .paket--featured.paket--pioneer {
      background:
        linear-gradient(180deg, rgba(245,197,24,0.22) 0%, rgba(245,197,24,0.08) 35%, #fff 75%),
        radial-gradient(circle at top right, rgba(245,197,24,0.18), transparent 55%);
    }
    /* === Farbfamilien (permanent, unabhängig von Pioneer/Zahlweise) ===
       Vereine = warme Gold-Familie (Community), Gewerbe = kühle Navy-Familie (Business).
       Einstiegskarten mit zartem Schimmer, die hervorgehobene Karte je Familie mit vollem Verlauf + Glow. */
    .paket--verein  { background: linear-gradient(180deg, rgba(245,197,24,0.10) 0%, #fff 62%); }
    .paket--gewerbe { background: linear-gradient(180deg, rgba(1,66,106,0.08) 0%, #fff 62%); }
    .paket--featured.paket--verein {
      border-top-color: var(--brand-orange, #F5C518);
      background:
        linear-gradient(180deg, rgba(245,197,24,0.24) 0%, rgba(245,197,24,0.08) 38%, #fff 78%),
        radial-gradient(circle at top right, rgba(245,197,24,0.20), transparent 55%);
    }
    .paket--featured.paket--gewerbe {
      border-top-color: var(--brand-navy, #01426a);
      /* Navy-Glow-Ring statt des Gold-Rings aus .paket--featured (konsistente kühle Navy-Familie). */
      box-shadow: 0 8px 28px rgba(1,66,106,0.14), 0 0 0 1px rgba(1,66,106,0.20);
      background:
        linear-gradient(180deg, rgba(1,66,106,0.20) 0%, rgba(1,66,106,0.06) 38%, #fff 78%),
        radial-gradient(circle at top right, rgba(1,66,106,0.15), transparent 55%);
    }
    /* Kontrast-Badge: das "Empfohlen"-Badge trägt die GEGENFARBE der Karte (poppt stärker, volle CI je Karte).
       Verein Plus (Gold-Karte) -> Navy-Badge; Gewerbe Premium (Navy-Karte) behält den Gold-Default-Badge.
       Die Karten-Oberkante bleibt je Familie (Gold/Navy) und markiert weiterhin eindeutig die Zugehörigkeit. */
    .paket--featured.paket--verein .paket-badge { background: var(--brand-navy, #01426a); color: #fff; }
    .paket--featured .paket-name {
      color: var(--brand-navy);
    }
    .paket--featured .paket-price-pioneer {
      color: var(--brand-navy-deep, var(--brand-navy));
    }
    .paket-badge {
      position: absolute;
      top: -12px; left: 28px;
      background: var(--brand-orange, #F5C518);
      color: var(--brand-navy-deep);
      padding: 4px 12px;
      border-radius: 999px;
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .paket-pioneer-flag {
      position: absolute;
      top: 18px; right: 18px;
      background: var(--brand-navy);
      color: #fff;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .paket-name {
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      font-weight: 600;
      color: var(--brand-navy);
      margin: 0 0 var(--sp-1);   /* h3: Browser-Default-Top-Margin neutralisieren, Layout unverändert */
      letter-spacing: -0.01em;
    }
    .paket-tagline {
      font-size: var(--fs-sm);
      color: var(--text-muted, #5c6578);
      margin-bottom: var(--sp-5);
      line-height: 1.5;
    }

    /* Preisbereich mit Pioneer-Layer */
    .paket-pricebox {
      padding: var(--sp-4) 0;
      border-top: 1px dashed var(--border-1);
      border-bottom: 1px dashed var(--border-1);
      margin-bottom: var(--sp-5);
      min-height: 132px;
    }
    .paket-price-pioneer {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 2.4rem);
      font-weight: 600;
      color: var(--brand-navy);
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .paket-price-pioneer-suffix {
      font-size: var(--fs-md);
      color: var(--text-muted);
      margin-left: 4px;
      font-weight: 500;
    }
    .paket-price-pioneer-yearly {
      font-size: var(--fs-sm);
      color: var(--text-muted);
      margin-top: var(--sp-1);
    }
    .paket-price-list {
      margin-top: var(--sp-2);
      font-size: var(--fs-sm);
      color: var(--text-muted);
    }
    .paket-price-list .strike {
      text-decoration: line-through;
      color: #5f6b78; /* WCAG AA: 5.44:1 auf weiß (vorher var(--text-soft) #8891a3 = 3.17:1) */
    }
    .paket-pioneer-saver {
      display: inline-block;
      margin-left: 6px;
      background: #d4e8dd;
      color: #2c6f4b;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: var(--fs-xs);
      font-weight: 700;
    }
    .paket-price-note {
      margin-top: var(--sp-3);
      font-size: var(--fs-sm);
      color: var(--text-muted);
      font-style: italic;
    }

    /* Eckdaten-Icon-Zeilen (Laufzeit / Kündigung / Enthalten) - GETEILT von /preise UND der
       Tarifbuchung im Dashboard (portal-tarife.php), damit beide Karten identisch aussehen. */
    .nb-book-terms {
      display: grid;
      gap: 9px;
      background: var(--bg-soft, #f6f7f9);
      border: 1px solid var(--border-1, #e4e8ef);
      border-radius: 10px;
      padding: 12px 14px;
      margin: 0 0 var(--sp-5);
    }
    .nb-bt-row { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
    .nb-bt-ic { color: var(--brand-navy, #01426a); margin-top: 1px; }
    .nb-bt-ic svg { width: 18px; height: 18px; display: block; }
    .nb-bt-k { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--text-muted, #5c6578); }
    .nb-bt-v { display: block; font-size: 0.9rem; line-height: 1.4; color: var(--text-body, #1e2535); }
    .nb-bt-v strong { font-size: 1.05rem; color: var(--brand-navy, #01426a); }
    .nb-bt-v small { color: var(--text-muted, #5c6578); }
    .nb-bt-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; color: var(--brand-navy, #01426a); background: var(--brand-orange-soft, #ffe9a8); border-radius: 999px; padding: 1px 8px; }

    .paket-features {
      list-style: none;
      margin: 0 0 var(--sp-5);
      padding: 0;
      flex: 1;
    }
    .paket-features li {
      padding: 6px 0 6px 24px;
      position: relative;
      font-size: var(--fs-md);
      color: var(--text-body, #1e2535);
      line-height: 1.5;
    }
    .paket-features li::before {
      content: '✓';
      position: absolute;
      left: 0;
      top: 6px;
      color: var(--brand-orange, #F5C518);
      font-weight: 700;
    }
    .paket-features li.is-headline {
      font-weight: 600;
      color: var(--brand-navy);
      padding-left: 0;
      margin-bottom: 6px;
    }
    .paket-features li.is-headline::before { content: ''; }

    .paket-cta {
      display: block;
      text-align: center;
      padding: 14px 22px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      font-size: var(--fs-md);
      transition: all 0.15s ease;
    }
    .paket-cta--gold {
      background: var(--brand-orange, #F5C518);
      color: var(--brand-navy-deep);
      /* WCAG 1.4.11: Gold-Button auf der hellen Featured-/Pioneer-Karte braucht eine
         kontraststarke Navy-Kante (>=3:1). Breite 2px = gleiche Box wie .paket-cta--outline. */
      border: 2px solid var(--brand-navy);
    }
    .paket-cta--gold:hover { background: var(--brand-orange-soft); }
    .paket-cta--outline {
      border: 2px solid var(--brand-navy);
      color: var(--brand-navy);
      background: transparent;
    }
    .paket-cta--outline:hover { background: var(--brand-navy); color: #fff; }

    /* Toggle-Visibility (Standard: alles aus) */
    .price-jvorab,
    .price-mtl,
    .price-flex { display: none; }
    body[data-zahlweise="jvorab"] .price-jvorab,
    body[data-zahlweise="mtl"] .price-mtl,
    body[data-zahlweise="flex"] .price-flex { display: inline; }
    body[data-zahlweise="jvorab"] .pricebox-jvorab,
    body[data-zahlweise="mtl"] .pricebox-mtl,
    body[data-zahlweise="flex"] .pricebox-flex { display: block; }
    .pricebox-jvorab,
    .pricebox-mtl,
    .pricebox-flex { display: none; }

    /* Vereine-Spezial-Toggle (eigene Logik, lokal pro Karte) */
    .mini-toggle--two { grid-template-columns: repeat(2, 1fr); }
    .pricebox-vereine-jahr,
    .pricebox-vereine-monat { display: none; }
    /* Default: jährliche Zahlung sichtbar */
    [data-vereine-toggle] .pricebox-vereine-jahr { display: block; }
    [data-vereine-toggle][data-vereine-state="monat"] .pricebox-vereine-jahr { display: none; }
    [data-vereine-toggle][data-vereine-state="monat"] .pricebox-vereine-monat { display: block; }

    /* Pioneer-Tarif gilt nur bei monatlicher Zahlung im Jahresvertrag.
       Bei Jährlich-Vorab und Flex: Pioneer-Flag ausblenden, Pioneer-Hintergrund neutralisieren. */
    body[data-zahlweise="flex"] .paket-pioneer-flag,
    body[data-zahlweise="jvorab"] .paket-pioneer-flag { display: none; }
    body[data-zahlweise="flex"] .paket--pioneer,
    body[data-zahlweise="jvorab"] .paket--pioneer {
      background: #fff;
    }
    body[data-zahlweise="flex"] .flex-only-hint { display: block; }
    .flex-only-hint {
      display: none;
      margin-top: 10px;
      font-size: var(--fs-xs);
      color: #c41a3b;
      font-weight: 600;
    }

    /* Marktvergleich */
    .market-compare {
      max-width: 880px;
      margin: var(--sp-8) auto 0;
      background: #fff;
      border-radius: 16px;
      padding: 28px 32px;
      box-shadow: 0 2px 8px rgba(1,66,106,0.06);
      border: 1px solid var(--border-1);
    }
    .market-compare h3 {
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      font-weight: 600;
      color: var(--brand-navy);
      margin-bottom: 6px;
      letter-spacing: -0.01em;
    }
    .market-compare table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--fs-sm);
    }
    .market-compare td, .market-compare th {
      padding: 10px 8px;
      border-bottom: 1px solid var(--border-1);
      text-align: left;
    }
    .market-compare th {
      font-size: var(--fs-xs);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .market-compare tr.us {
      background: var(--cream);
      font-weight: 600;
    }
    .market-compare tr.us td:first-child { color: var(--brand-navy); }
    .market-compare tr.us td:nth-child(2) { color: var(--gold-deep); }
    .market-compare-source {
      font-size: var(--fs-xs);
      color: var(--text-muted);
      margin-top: var(--sp-3);
      line-height: 1.5;
    }
    /* Marktvergleich Tabelle: horizontaler Scroll auf Mobile */
    @media (max-width: 600px) {
      .market-compare { padding: 22px 18px; }
      .market-compare table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 100%; }
    }

    /* Info-Band */
    .info-band {
      max-width: 920px;
      margin: var(--sp-6) auto 0;
      background: linear-gradient(135deg, #eaf2f8 0%, #f2eedf 55%, #fef3cd 100%);
      padding: 22px 28px;
      border-radius: 14px;
      font-size: var(--fs-md);
      color: var(--text-body);
      line-height: 1.55;
      border-left: 4px solid var(--brand-orange);
    }
    .info-band strong { color: var(--brand-navy); }
    .preise-tax-note {
      max-width: 920px;
      margin: var(--sp-4) auto 0;
      text-align: center;
      font-size: var(--fs-sm);
      color: var(--text-muted);
    }

    /* FAQ */
    .faq-grid {
      max-width: 880px;
      margin: 0 auto;
      display: grid;
      gap: 12px;
    }
    .faq-item {
      background: #fff;
      border-radius: 12px;
      border: 1px solid var(--border-1);
      overflow: hidden;
    }
    .faq-item summary {
      padding: 18px 56px 18px 24px; /* rechts mehr Platz für das +-Symbol Touch-Bereich */
      cursor: pointer;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: var(--fs-md);
      color: var(--brand-navy);
      list-style: none;
      position: relative;
      min-height: 56px; /* sichere Touch-Höhe auch bei 1-zeiligen Fragen */
      transition: background 0.15s ease;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: '+';
      position: absolute;
      right: 22px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--brand-orange);
      font-size: var(--fs-xl);
      font-weight: 400;
      transition: transform 0.2s ease;
    }
    .faq-item[open] summary::after {
      transform: translateY(-50%) rotate(45deg);
    }
    .faq-item summary:hover { background: var(--cream); }
    .faq-item p {
      padding: 0 24px 22px;
      font-size: var(--fs-md);
      color: var(--text-body);
      line-height: 1.6;
      margin: 0;
    }

    /* ===================== SECTION-LAYOUT-RHYTHMUS =====================
       Rhythmus auf preise.html: breit (Hero) → schmal (Pioneer-Info) →
       breit (Vereine) → breit (Gewerbe, Pakete-Block) → schmal (Marktvergleich) →
       breit (FAQ).
       Schmale Sektionen bekommen max-width 760px für den inneren Container. */
    .pioneer-info-section .preise-section-inner,
    #marktvergleich .preise-section-inner {
      max-width: 760px;
    }

    /* ===================== DEZENTE SEKTIONS-GRAFIKEN =====================
       Thematische SVG-Hintergrundgrafiken pro Sektion (sehr dezent, opacity 0.07-0.10).
       Nutzt ::after, da ::before bei manchen Sektionen bereits belegt ist. */
    .pioneer-info-section,
    #pakete-vereine,
    #pakete-gewerbe,
    #marktvergleich,
    #faq {
      position: relative;
      overflow: hidden;
    }
    .pioneer-info-section::after,
    #pakete-vereine::after,
    #pakete-gewerbe::after,
    #marktvergleich::after,
    #faq::after {
      content: '';
      position: absolute;
      bottom: -34px;
      right: -34px;
      width: 459px;
      height: 408px;
      pointer-events: none;
      z-index: 0;
      background-repeat: no-repeat;
      background-position: bottom right;
      background-size: contain;
      opacity: 0.07;
    }
    .pioneer-info-section > *,
    #pakete-vereine > *,
    #pakete-gewerbe > *,
    #marktvergleich > *,
    #faq > * { position: relative; z-index: 1; }

    /* Pioneer-Info - Stern */
    .pioneer-info-section::after {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><polygon points='100,28 116,72 160,72 124,98 138,140 100,114 62,140 76,98 40,72 84,72' fill='%23F5C518' fill-opacity='0.7'/></svg>");
      opacity: 0.10;
    }
    /* Vereine - Hände/Handshake */
    #pakete-vereine::after {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'><g fill='none' stroke='%2301426a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M40 70 L80 100 L120 70'/><path d='M80 100 L80 60 Q80 50 90 50 L110 50 Q120 50 120 60 L120 90'/><path d='M40 70 Q30 70 30 80 L30 100 Q30 110 40 110 L70 110'/><path d='M120 70 Q130 70 130 80 L130 110 Q130 120 120 120 L100 120'/></g></svg>");
    }
    /* Gewerbe - Schaufenster mit Münze */
    #pakete-gewerbe::after {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%2301426a' stroke-width='2.5'><rect x='30' y='40' width='140' height='110' rx='4'/><line x1='30' y1='75' x2='170' y2='75'/><circle cx='100' cy='115' r='22' fill='%2301426a' fill-opacity='0.15'/><text x='100' y='124' text-anchor='middle' font-family='serif' font-size='26' fill='%2301426a' font-weight='500'>€</text></g></svg>");
    }
    /* Marktvergleich - Balken-Diagramm */
    #marktvergleich::after {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g><line x1='20' y1='170' x2='180' y2='170' stroke='%2301426a' stroke-width='2.5' stroke-linecap='round'/><rect x='34' y='110' width='22' height='60' fill='%2301426a' fill-opacity='0.55'/><rect x='66' y='85' width='22' height='85' fill='%23F5C518' fill-opacity='0.85'/><rect x='98' y='65' width='22' height='105' fill='%2301426a' fill-opacity='0.55'/><rect x='130' y='40' width='22' height='130' fill='%2301426a' fill-opacity='0.55'/></g></svg>");
      opacity: 0.08;
    }
    /* Gut zu wissen / FAQ - Fragezeichen-Symbol */
    #faq::after {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%2301426a' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'><path d='M70 75 Q70 50 100 50 Q130 50 130 75 Q130 95 110 105 Q100 110 100 125'/><line x1='100' y1='155' x2='100' y2='160'/></g></svg>");
      opacity: 0.09;
    }
    /* Mobile: Grafiken verkleinern (auch hier 15% kleiner als zuvor) */
    @media (max-width: 768px) {
      .pioneer-info-section::after,
      #pakete-vereine::after,
      #pakete-gewerbe::after,
      #marktvergleich::after,
      #faq::after {
        width: 170px;
        height: 153px;
        opacity: 0.07;
      }
    }