/* Idee-Seite: größerer Lesbarkeitsfokus, etwas mehr Atmen.
       Ergänzt das legal.css-Pattern um zwei Spezial-Blöcke. */

    /* Generischer Sektion-Abstand unten - schafft Luft zwischen den Blöcken.
       sp-12 oben (Standard, 48px) + 72px unten (ca. 1.5x). */
    .stats-section,
    .idee-section,
    .steps-section,
    .timeline-section,
    .gewerbe-section,
    .section-region.idee-section,
    .section-sonnenland.idee-section,
    .idee-final {
      padding-bottom: 72px;
    }
    /* Hero: nutzt jetzt den zentralen .lead-hero (layout.css) - früher eigener
       .idee-hero (aus der Prototyp-Seite portiert). idee.css wird nur auf idee.php
       geladen, daher genügt der ungescopete Selektor für die seitenspezifische
       Glue: der Hero stößt ohne weißen Streifen direkt an die Stats-Section. */
    .lead-hero { margin-bottom: 0; }

    /* Section-System (.idee-section, .section-tinted/region/sonnenland,
       .section-eyebrow, h2) steht zentral in components.css. */
    /* Brand-Story (Sonnenland) UND Region auf voll-breit erweitern,
       analog zur Gewerbe-Section. Ergibt Rhythmus schmal-breit-schmal-breit. */
    .section-sonnenland.idee-section,
    .section-region.idee-section {
      max-width: none;
    }
    .section-sonnenland.idee-section > *,
    .section-region.idee-section > * {
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Schritte- und Ziel-Section dezenter Cream-Tint für Background-Variation
       (3 Schritte und Ziel sind weiße Sections - hier ein Hauch Cream als Pause).
       Background über die volle Breite, Inhalt bleibt 1100px-zentriert. */
    .steps-section {
      background: linear-gradient(180deg, var(--surface-1, #f7f4ec) 0%, #faf7ee 100%);
    }
    .steps-section > * {
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
    }
    .idee-section h3 {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: 600;
      color: var(--brand-navy);
      margin: var(--sp-6) 0 var(--sp-3);
      letter-spacing: -0.005em;
    }
    .idee-section p {
      font-size: var(--fs-md);
      line-height: 1.7;
      color: var(--text-body);
      margin-bottom: var(--sp-4);
    }
    .idee-section p strong {
      color: var(--brand-navy);
      font-weight: var(--fw-semi);
    }

    /* Vier-Gemeinden-Grid */
    .gemeinden-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--sp-3);
      margin: var(--sp-5) 0 var(--sp-6);
    }
    .gemeinden-grid .gemeinde {
      position: relative;
      padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
      background: #fff;
      border: 1px solid var(--border-1);
      border-radius: var(--radius-md);
      box-shadow: 0 2px 8px rgba(1, 66, 106, 0.05);
      transition: transform var(--dur-fast) var(--ease-std),
                  box-shadow var(--dur-fast) var(--ease-std);
    }
    .gemeinden-grid .gemeinde::before {
      content: '';
      position: absolute;
      left: 0;
      top: 14%;
      bottom: 14%;
      width: 4px;
      background: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-orange) 100%);
      border-radius: 0 2px 2px 0;
    }
    .gemeinden-grid .gemeinde:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(1, 66, 106, 0.10);
    }
    /* h3 (Heading-Hierarchie, vorher h4) behält die bisherige h4-Optik */
    .gemeinden-grid .gemeinde h3 {
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: 600;
      color: var(--brand-navy);
      margin: 0 0 4px;
    }
    .gemeinden-grid .gemeinde p {
      font-size: var(--fs-md);
      color: var(--text-muted);
      margin: 0;
      line-height: 1.5;
    }
    @media (max-width: 600px) {
      .gemeinden-grid { grid-template-columns: 1fr; }
    }

    /* Farb-Blöcke für den Sonnenland-Abschnitt */
    .farb-zwei {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--sp-4);
      margin: var(--sp-5) 0 var(--sp-6);
    }
    .farb-block {
      padding: var(--sp-5);
      border-radius: var(--radius-md);
    }
    .farb-block--blau,
    .farb-block--blau p {
      background: var(--brand-navy);
      color: #fff;
    }
    .farb-block--blau {
      background: var(--brand-navy);
    }
    .farb-block--gold,
    .farb-block--gold p {
      color: var(--color-on-accent);
    }
    .farb-block--gold {
      background: var(--brand-orange);
    }
    /* Spezifität hoch genug, um die generelle .idee-section p-Regel zu schlagen */
    .idee-section .farb-block p {
      margin: 0 0 var(--sp-2);
    }
    .idee-section .farb-block .farb-name {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: 600;
    }
    .idee-section .farb-block .farb-bedeutung {
      font-size: var(--fs-md);
      line-height: 1.5;
      margin: 0;
      opacity: 0.95;
    }
    @media (max-width: 600px) {
      .farb-zwei { grid-template-columns: 1fr; }
    }

    /* "Das Problem"-Section zweispaltig: Lesefluss links, zwei Gründer-Zitate als Stack rechts. */
    .idee-section.idee-problem {
      max-width: none;
      margin: 0;
      padding: var(--sp-12) var(--sp-6);
    }
    .idee-problem-grid {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: var(--sp-8);
      align-items: start;
    }
    /* Text-Spalte linksbündig (statt zentrierter Standard-idee-section) */
    .idee-problem-text { text-align: left; }
    .idee-problem-text .section-eyebrow { text-align: left; margin-left: 0; }
    .idee-problem-text h2 { text-align: left; margin-left: 0; max-width: none; }
    .idee-problem-text p { margin-bottom: var(--sp-4); }
    .idee-problem-quotes {
      display: flex;
      flex-direction: column;
      gap: var(--sp-5);
    }
    .idee-problem-quotes .zitat { margin: 0; }
    @media (max-width: 768px) {
      .idee-problem-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
    }

    /* Abschluss-Section: "Unser Ziel" links + Mach-mit-CTA rechts auf hellblauem Hintergrund. */
    .idee-final {
      max-width: none;
      margin: 0;
      padding: var(--sp-12) var(--sp-6);
    }
    .idee-final .idee-final-grid {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: var(--sp-8);
      align-items: start;
    }
    .idee-final-text h2 {
      font-family: var(--font-display);
      font-size: var(--fs-2xl);
      font-weight: 600;
      color: var(--brand-navy);
      margin: var(--sp-2) 0 var(--sp-4);
      letter-spacing: -0.005em;
    }
    .idee-final-text p {
      font-size: var(--fs-md);
      line-height: 1.7;
      color: var(--text-body);
      margin: 0 0 var(--sp-4);
    }
    .idee-final-text h3 {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: 600;
      color: var(--brand-navy);
      margin: var(--sp-5) 0 var(--sp-3);
      letter-spacing: -0.005em;
    }
    .idee-final-cta {
      background: #fff;
      border: 1px solid var(--border-1);
      border-radius: var(--radius-lg);
      padding: var(--sp-6) var(--sp-5);
      box-shadow: var(--shadow-md);
    }
    .idee-final-cta h3 {
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      font-weight: 600;
      color: var(--brand-navy);
      margin: var(--sp-2) 0 var(--sp-3);
    }
    .idee-final-cta p {
      font-size: var(--fs-md);
      line-height: 1.7;
      color: var(--text-body);
      margin: 0 0 var(--sp-4);
    }
    .idee-final-cta-actions {
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
    }
    .idee-final-cta-actions .btn { width: 100%; text-align: center; }
    /* Sekundär-Button auf weißer Card lesbar machen (Standard ist auf Dunkelfläche zugeschnitten) */
    .idee-final-cta-actions .btn--secondary {
      background: transparent;
      color: var(--brand-navy);
      border: 1.5px solid var(--brand-navy);
    }
    .idee-final-cta-actions .btn--secondary:hover {
      background: var(--brand-navy);
      color: #fff;
      border-color: var(--brand-navy);
    }
    /* Mobile: einspaltig */
    @media (max-width: 768px) {
      .idee-final .idee-final-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
      }
    }
    /* Direkt am Footer ankoppeln (kein weißer Streifen) */
    .idee-final + .site-footer { margin-top: 0; }

    /* Zitat-Block */
    .zitat {
      padding: var(--sp-6) var(--sp-6);
      border-left: 4px solid var(--brand-orange);
      background: #fff;
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      margin: var(--sp-6) 0;
      box-shadow: 0 2px 8px rgba(1, 66, 106, 0.05);
    }
    .zitat p {
      font-style: italic;
      font-size: var(--fs-md);
      color: var(--text-body);
      line-height: 1.6;
      margin: 0 0 var(--sp-3);
    }
    .zitat-author {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      font-size: var(--fs-sm);
      color: var(--text-muted);
      font-style: normal;
    }
    .zitat-author::before {
      content: '';
      width: 24px;
      height: 1px;
      background: var(--brand-orange);
      flex-shrink: 0;
    }
    .zitat-author strong {
      color: var(--brand-navy);
      font-weight: var(--fw-semi);
    }

    /* Stats-Section: voll-breit mit Sonnenland-Verlauf (analog Pioneer-Phase auf preise.html). */
    .stats-section {
      background: linear-gradient(135deg, #eaf2f8 0%, #f2eedf 55%, #fef3cd 100%);
      padding: var(--sp-12) var(--sp-6);
    }
    /* Stats-Strip: vier KPIs direkt unter dem Hero */
    .stats-strip {
      max-width: 1180px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-3);
      position: relative;
      z-index: 2;
    }
    .stat-card {
      background: #fff;
      border: 1px solid var(--border-1);
      border-radius: var(--radius-lg);
      padding: var(--sp-6) var(--sp-4);
      text-align: center;
      box-shadow: var(--shadow-md);
    }
    .stat-card .stat-num {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 2.8rem);
      font-weight: 700;
      color: var(--brand-navy);
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .stat-card .stat-num .stat-suffix {
      color: var(--brand-orange);
      margin-left: 2px;
    }
    .stat-card .stat-label {
      display: block;
      margin-top: var(--sp-2);
      font-size: var(--fs-sm);
      color: var(--text-muted);
      line-height: 1.35;
    }
    /* Layout-Regeln:
       - Desktop + Tablet quer (alle iPads landscape, inkl. 13"): 4 Karten nebeneinander
       - Tablet hochkant (alle iPads portrait, inkl. 13" mit 1024 px Breite): 2x2 Grid
       - Mobile (quer < 900 px ODER hochkant < 1100 px): 2x2 Grid
       - Smartphone klein: 1 Spalte */
    @media (orientation: portrait) and (max-width: 1100px),
           (orientation: landscape) and (max-width: 900px) {
      .stats-strip { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
      .stat-card--highlight { grid-column: auto; max-width: none; margin: 0; }
    }
    @media (max-width: 420px) {
      .stats-strip { grid-template-columns: 1fr; }
      .stat-card--highlight { grid-column: auto; }
    }
    .stat-card.stat-card--highlight {
      background: linear-gradient(160deg, var(--brand-orange) 0%, var(--brand-orange-soft) 100%);
      border-color: var(--brand-orange);
    }
    .stat-card.stat-card--highlight .stat-num,
    .stat-card.stat-card--highlight .stat-num .stat-suffix {
      color: var(--color-on-accent);
    }
    .stat-card.stat-card--highlight .stat-label {
      color: var(--color-on-accent);
      opacity: 0.85;
    }

    /* So funktioniert's: drei Schritte mit nummerierten Kreisen
       Voll-breit (max-width:none), Inhalt 1100px zentriert via .steps-section > * */
    .steps-section {
      max-width: none;
      margin: 0;
      padding: var(--sp-12) var(--sp-6);
      position: relative;
    }
    .steps-section h2 {
      font-family: var(--font-display);
      font-size: var(--fs-2xl);
      font-weight: 600;
      color: var(--brand-navy);
      text-align: center;
      margin-bottom: var(--sp-2);
      letter-spacing: -0.005em;
    }
    .steps-section .steps-lead {
      text-align: center;
      max-width: 56ch;
      margin: 0 auto var(--sp-8);
      color: var(--text-muted);
      line-height: 1.6;
    }
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-5);
    }
    .step {
      background: #fff;
      border: 1px solid var(--border-1);
      border-radius: var(--radius-lg);
      padding: var(--sp-6);
      position: relative;
    }
    .step .step-num {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--brand-navy);
      color: #fff;
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--sp-3);
      box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.3);
    }
    .step h3 {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: 600;
      color: var(--brand-navy);
      margin: 0 0 var(--sp-2);
    }
    .step p {
      font-size: var(--fs-md);
      line-height: 1.6;
      color: var(--text-body);
      margin: 0;
    }
    @media (max-width: 1024px) {
      .steps-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 720px) {
      .steps-grid { grid-template-columns: 1fr; }
    }

    /* Timeline: vertikale Zeitachse
       Section voll-breit, Inhalt bleibt 760px schmal (Lese-Spalte mittig).
       Damit sitzt die ::after-Grafik rechts unten, analog zu den anderen Sektionen. */
    .timeline-section {
      max-width: none;
      margin: 0;
      padding: var(--sp-12) var(--sp-6);
      position: relative;
    }
    .timeline-section > * {
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
    }
    .timeline-section h2 {
      font-family: var(--font-display);
      font-size: var(--fs-2xl);
      font-weight: 600;
      color: var(--brand-navy);
      text-align: center;
      margin-bottom: var(--sp-8);
      letter-spacing: -0.005em;
    }
    .timeline {
      position: relative;
      padding-left: 28px;
    }
    .timeline::before {
      content: '';
      position: absolute;
      left: 8px;
      top: 8px;
      bottom: 8px;
      width: 2px;
      background: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-orange) 100%);
      border-radius: 2px;
    }
    .timeline-item {
      position: relative;
      padding: 0 0 var(--sp-6) var(--sp-2);
    }
    .timeline-item::before {
      content: '';
      position: absolute;
      left: -28px;
      top: 4px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--brand-navy);
      border: 3px solid #fff;
      box-shadow: 0 0 0 2px var(--brand-navy);
    }
    .timeline-item.is-current::before {
      background: var(--brand-orange);
      box-shadow: 0 0 0 2px var(--brand-orange), 0 0 0 6px rgba(245, 197, 24, 0.25);
      animation: timelinePulse 2s ease-in-out infinite;
    }
    .timeline-item.is-future::before {
      background: #fff;
      border: 3px solid var(--brand-navy-soft);
      box-shadow: none;
    }
    .timeline-item .tl-date {
      display: inline-block;
      font-size: var(--fs-xs);
      font-weight: var(--fw-semi);
      color: var(--brand-orange);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 4px;
    }
    .timeline-item.is-future .tl-date {
      color: var(--text-muted);
    }
    .timeline-item h3 {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: 600;
      color: var(--brand-navy);
      margin: 0 0 4px;
    }
    .timeline-item p {
      font-size: var(--fs-md);
      line-height: 1.6;
      color: var(--text-body);
      margin: 0;
    }
    .timeline-item.is-future p { color: var(--text-muted); }
    /* Highlight: textmarker-Effekt für wichtige Aussagen, z. B. "Stopp in der Entwicklung" */
    .text-mark {
      background: linear-gradient(180deg, transparent 55%, rgba(245, 197, 24, 0.55) 55%);
      padding: 0 2px;
      font-weight: var(--fw-semi);
      color: var(--brand-navy);
    }
    @keyframes timelinePulse {
      0%, 100% { box-shadow: 0 0 0 2px var(--brand-orange), 0 0 0 6px rgba(245, 197, 24, 0.25); }
      50% { box-shadow: 0 0 0 2px var(--brand-orange), 0 0 0 12px rgba(245, 197, 24, 0); }
    }

    /* Gewerbe & Unternehmen: 4 Vorteils-Karten mit Goldakzent (volle Bg-Breite) */
    .gewerbe-section {
      margin: 0;
      padding: var(--sp-12) var(--sp-6);
      background: linear-gradient(160deg, #fef9e6 0%, #fdf3cd 100%);
      position: relative;
      overflow: hidden;
    }
    .gewerbe-section > * {
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
    }
    .gewerbe-section::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.4;
      background-image: radial-gradient(circle at 1px 1px, var(--brand-orange) 1px, transparent 1.5px);
      background-size: 32px 32px;
      mix-blend-mode: multiply;
    }
    .gewerbe-section > * { position: relative; z-index: 1; }
    .gewerbe-section h2 {
      font-family: var(--font-display);
      font-size: var(--fs-2xl);
      font-weight: 600;
      color: var(--brand-navy);
      text-align: center;
      margin-bottom: var(--sp-2);
      letter-spacing: -0.005em;
    }
    .gewerbe-section .gewerbe-lead {
      text-align: center;
      max-width: 60ch;
      margin: 0 auto var(--sp-8);
      color: var(--text-body);
      line-height: 1.6;
    }
    .gewerbe-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-4);
      margin-bottom: var(--sp-6);
    }
    .gewerbe-card {
      background: #fff;
      border: 1px solid rgba(245, 197, 24, 0.3);
      border-radius: var(--radius-lg);
      padding: var(--sp-5);
      box-shadow: 0 4px 12px rgba(245, 197, 24, 0.08);
    }
    .gewerbe-card .gewerbe-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--brand-orange);
      color: var(--brand-orange-on);
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--sp-3);
    }
    .gewerbe-card h3 {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: 600;
      color: var(--brand-navy);
      margin: 0 0 var(--sp-2);
    }
    .gewerbe-card p {
      font-size: var(--fs-md);
      line-height: 1.55;
      color: var(--text-body);
      margin: 0;
    }
    .gewerbe-branchen {
      text-align: center;
      font-size: var(--fs-md);
      line-height: 1.7;
      color: var(--text-body);
      max-width: 64ch;
      margin: 0 auto;
    }
    .gewerbe-branchen strong {
      color: var(--brand-navy);
      font-weight: var(--fw-semi);
    }
    .gewerbe-branchen .branchen-list {
      display: inline-block;
      margin-top: var(--sp-2);
    }
    .gewerbe-branchen .b-item {
      display: inline-block;
      padding: 4px 12px;
      margin: 4px;
      background: rgba(1, 66, 106, 0.08);
      color: var(--brand-navy);
      border-radius: var(--radius-pill);
      font-weight: var(--fw-semi);
      font-size: var(--fs-xs);
      letter-spacing: 0.02em;
    }
    @media (max-width: 1024px) {
      .gewerbe-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .gewerbe-grid { grid-template-columns: 1fr; }
    }

    /* Sonnenland: Vier Gemeinden in 2x2 Grid mit echtem Wappen */
    .gemeinden-color-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--sp-5);
      margin: var(--sp-6) 0 var(--sp-8);
    }
    .gemeinde-color {
      background: #fff;
      border: 1px solid var(--border-1);
      border-radius: var(--radius-lg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 8px rgba(1, 66, 106, 0.04);
      transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
    }
    .gemeinde-color:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(1, 66, 106, 0.1);
    }
    .gemeinde-color .gc-stripe {
      height: 8px;
    }
    .gemeinde-color--mbl .gc-stripe {
      background: linear-gradient(90deg, var(--brand-navy) 70%, var(--brand-orange) 70%);
    }
    .gemeinde-color--gli .gc-stripe {
      background: linear-gradient(90deg, var(--brand-navy) 30%, var(--brand-orange) 30%);
    }
    .gemeinde-color--hohen .gc-stripe {
      background: linear-gradient(90deg, var(--brand-navy) 25%, var(--brand-orange) 25%);
    }
    .gemeinde-color--birken .gc-stripe {
      background: linear-gradient(90deg, var(--brand-navy) 65%, var(--brand-orange) 65%);
    }
    .gemeinde-color .gc-content {
      padding: var(--sp-5) var(--sp-6);
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .gemeinde-color .gc-wappen {
      font-size: var(--fs-xs);
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin: 0 0 4px;
      font-weight: var(--fw-semi);
    }
    /* Gemeinde-Namen in den Farbkarten: nach der h3->h4-Umstellung (Heading-Hierarchie)
       müssen beide getroffen werden, sonst verlieren die h4 ihr Styling. */
    .idee-section .gemeinde-color h3,
    .idee-section .gemeinde-color h4 {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: 600;
      color: var(--brand-navy);
      margin: 0 0 var(--sp-2);
    }
    .gemeinde-color .gc-text {
      font-size: var(--fs-md);
      line-height: 1.55;
      color: var(--text-body);
      margin: 0 0 var(--sp-3);
      flex: 1;
    }
    .gemeinde-color .gc-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .gemeinde-color .gc-tag {
      display: inline-block;
      padding: 4px 10px;
      font-size: 0.72rem;
      font-weight: var(--fw-semi);
      letter-spacing: 0.02em;
      border-radius: var(--radius-pill);
    }
    .gemeinde-color .gc-tag--blau {
      background: rgba(1, 66, 106, 0.1);
      color: var(--brand-navy);
    }
    .gemeinde-color .gc-tag--gold {
      background: rgba(245, 197, 24, 0.25);
      color: var(--brand-orange-on);
    }
    @media (max-width: 600px) {
      .gemeinden-color-grid { grid-template-columns: 1fr; }
    }

    /* Sonnenland-Formel: Blau + Gold = Grün */
    .sonnenland-formula {
      display: flex;
      align-items: center;
      gap: var(--sp-4);
      margin: var(--sp-6) auto var(--sp-6);
      max-width: 720px;
      padding: var(--sp-6);
      background: linear-gradient(135deg, #f7f8fb 0%, #fef9e6 100%);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-1);
    }
    .sonnenland-formula .sf-circles {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      flex-shrink: 0;
    }
    .sonnenland-formula .sf-circle {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    .sonnenland-formula .sf-circle--blau { background: var(--brand-navy); }
    .sonnenland-formula .sf-circle--gold { background: var(--brand-orange); }
    .sonnenland-formula .sf-circle--gruen { background: #5a8a2a; }
    .sonnenland-formula .sf-op {
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--text-muted);
    }
    .idee-section .sonnenland-formula p {
      margin: 0;
      font-size: var(--fs-md);
      line-height: 1.55;
      color: var(--text-body);
    }
    .idee-section .sonnenland-formula p strong {
      display: block;
      font-size: var(--fs-md);
      margin-bottom: 4px;
    }
    @media (max-width: 720px) {
      .sonnenland-formula {
        flex-direction: column;
        text-align: center;
        padding: var(--sp-5);
      }
      .sonnenland-formula .sf-circle {
        width: 48px;
        height: 48px;
      }
    }

    /* ===================== DEZENTE SEKTIONS-GRAFIKEN =====================
       Thematische SVG-Hintergrundgrafiken pro Sektion, sehr dezent
       (opacity 0.04-0.06), positioniert im unteren rechten Eck.
       Nutzt ::after, da .section-region/.section-sonnenland/.section-tinted
       bereits ::before für Background-Effekte belegen.
       Pointer-events:none, z-index 0 (unter Content). */
    .idee-problem,
    .section-region,
    .steps-section,
    .gewerbe-section,
    .timeline-section,
    .section-sonnenland,
    .idee-final {
      position: relative;
      overflow: hidden;
    }
    .idee-problem::after,
    .section-region::after,
    .steps-section::after,
    .gewerbe-section::after,
    .timeline-section::after,
    .section-sonnenland::after,
    .idee-final::after {
      content: '';
      position: absolute;
      bottom: -34px;
      right: -34px;
      width: 476px;
      height: 425px;
      pointer-events: none;
      z-index: 0;
      background-repeat: no-repeat;
      background-position: bottom right;
      background-size: contain;
      opacity: 0.07;
    }
    .idee-problem > *,
    .section-region > *,
    .steps-section > *,
    .gewerbe-section > *,
    .timeline-section > *,
    .section-sonnenland > *,
    .idee-final > * { position: relative; z-index: 1; }

    /* Das Problem - Lupe über zerstreuten Punkten (Suche nach Terminen) */
    .idee-problem::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='3' stroke-linecap='round'><circle cx='90' cy='90' r='40'/><line x1='120' y1='120' x2='160' y2='160'/></g><g fill='%2301426a' fill-opacity='0.45'><circle cx='40' cy='40' r='4'/><circle cx='160' cy='30' r='4'/><circle cx='30' cy='130' r='4'/><circle cx='170' cy='170' r='4'/><circle cx='60' cy='170' r='4'/></g></svg>");
    }
    /* Region - 4 verbundene Karten-Pins */
    .section-region::after {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'><g fill='none' stroke='%2301426a' stroke-width='2.5'><circle cx='40' cy='60' r='10'/><circle cx='100' cy='40' r='10'/><circle cx='160' cy='70' r='10'/><circle cx='110' cy='120' r='10'/><line x1='50' y1='62' x2='90' y2='44' stroke-dasharray='3 4'/><line x1='110' y1='44' x2='150' y2='66' stroke-dasharray='3 4'/><line x1='100' y1='52' x2='108' y2='108' stroke-dasharray='3 4'/></g></svg>");
    }
    /* Steps - Smartphone mit Kalender-Pin und Bahnlinie (Produktbild + Region-Bezug) */
    .steps-section::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='3' stroke-linejoin='round' stroke-linecap='round'><rect x='60' y='28' width='80' height='144' rx='12'/><line x1='60' y1='52' x2='140' y2='52'/><line x1='60' y1='156' x2='140' y2='156'/></g><g fill='%2301426a' fill-opacity='0.18'><rect x='70' y='62' width='60' height='8' rx='2'/><rect x='70' y='78' width='42' height='8' rx='2'/><rect x='70' y='94' width='54' height='8' rx='2'/><rect x='70' y='110' width='38' height='8' rx='2'/><rect x='70' y='126' width='48' height='8' rx='2'/></g><g><circle cx='100' cy='42' r='2.5' fill='%2301426a'/><path d='M138 110 L172 110' stroke='%23F5C518' stroke-width='2.5' stroke-dasharray='5 4' fill='none'/><circle cx='178' cy='110' r='10' fill='%23F5C518'/><path d='M178 104 L178 116 M173 110 L183 110' stroke='%2301426a' stroke-width='2.5' stroke-linecap='round'/></g></svg>");
      opacity: 0.13;
      /* nutzt Standard-Größe aus dem Gruppen-Selektor (15% kleiner als zuvor) */
    }
    /* Gewerbe - Werkzeug-Symbol (Schraubenschlüssel-Kreuz) */
    .gewerbe-section::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='3' stroke-linecap='round'><path d='M40 160 L140 60'/><circle cx='30' cy='170' r='12'/><circle cx='170' cy='30' r='12'/></g></svg>");
    }
    /* Zeitachse - Timeline mit Markern */
    .timeline-section::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='3' stroke-linecap='round'><line x1='100' y1='20' x2='100' y2='180'/><circle cx='100' cy='40' r='10' fill='%2301426a' fill-opacity='0.5'/><circle cx='100' cy='80' r='10' fill='%2301426a' fill-opacity='0.5'/><circle cx='100' cy='120' r='12' fill='%23F5C518'/><circle cx='100' cy='160' r='8' fill='none'/></g></svg>");
    }
    /* Brand-Story - Sonne mit Strahlen */
    .section-sonnenland::after {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='100' cy='100' r='28' fill='none' stroke='%23F5C518' stroke-width='3'/><g stroke='%23F5C518' stroke-width='3' stroke-linecap='round'><line x1='100' y1='20' x2='100' y2='50'/><line x1='100' y1='150' x2='100' y2='180'/><line x1='20' y1='100' x2='50' y2='100'/><line x1='150' y1='100' x2='180' y2='100'/><line x1='40' y1='40' x2='62' y2='62'/><line x1='138' y1='138' x2='160' y2='160'/><line x1='160' y1='40' x2='138' y2='62'/><line x1='62' y1='138' x2='40' y2='160'/></g></svg>");
      opacity: 0.10;
    }
    /* Abschluss-Section - Zielscheibe (Unser Ziel) */
    .idee-final::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='3'><circle cx='100' cy='100' r='80'/><circle cx='100' cy='100' r='55'/><circle cx='100' cy='100' r='30'/><circle cx='100' cy='100' r='8' fill='%23F5C518' stroke='none'/></g><g stroke='%23F5C518' stroke-width='3' stroke-linecap='round'><path d='M40 160 L100 100'/><path d='M40 160 L52 160'/><path d='M40 160 L40 148'/></g></svg>");
      opacity: 0.08;
    }
    /* Mobile: Grafiken verkleinern (auch hier 15% kleiner als zuvor) */
    @media (max-width: 768px) {
      .idee-problem::after,
      .section-region::after,
      .steps-section::after,
      .gewerbe-section::after,
      .timeline-section::after,
      .section-sonnenland::after,
      .idee-final::after {
        bottom: -17px;
        right: -17px;
        width: 221px;
        height: 196px;
        opacity: 0.06;
      }
    }