/* ========================================
   VISUELLE OPTIMIERUNGEN
   WICHTIGE STYLES WURDEN IN layout.css INTEGRIERT
   ======================================== */

/* Glass-Card und Content-Stack Styles wurden in layout.css integriert */
/* Heading-Margins wurden in layout.css integriert */
/* Siehe layout.css für die integrierten Styles */

/* ========================================
   3. CTA-BUTTONS KONSISTENT
   ======================================== */

/* Alle CTA-Buttons: Einheitliche Mindestbreite */
.cta-button {
  min-width: 240px;
  width: auto;
  max-width: fit-content;
}

/* Hero CTA-Buttons: Spezifische Anpassung - Überschreibt hero-updates.css */
.hero .hero-content .hero-cta-group .cta-button {
  min-width: 240px;
  width: auto;
  max-width: fit-content;
}

/* ========================================
   4. TEXTBLÖCKE OPTIMIEREN
   ======================================== */

/* Max-width für optimale Lesbarkeit */
.glass-card p,
.glass-card .intro-description,
.glass-card .intro-lead {
  max-width: 75ch; /* Optimale Zeilenlänge für Lesbarkeit */
  line-height: 1.7;
}

/* ========================================
   5. ICON-SYSTEM VEREINHEITLICHEN
   ======================================== */

/* Feature-Card Icons: Einheitliche Größe */
.feature-card img,
.why-matters-block-icon,
.why-pillar-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* Stat-Icons: Bereits konsistent (22px) - OK */

/* ========================================
   6. GRID-LAYOUTS OPTIMIEREN
   ======================================== */

/* Feature-Grids: Einheitliche Gaps */
.features-grid,
.why-pillar-grid,
.community-grid {
  gap: var(--spacing-gap-md); /* Einheitlich: clamp(1.5rem, 3vw, 2rem) */
}

/* ========================================
   7. SPEZIELLE SEKTIONS-FIXES
   ======================================== */

/* Petition: Margin entfernen für Konsistenz */
#petition.glass-card {
  margin: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* Community: Margin entfernen für Konsistenz */
#community.glass-card {
  margin: 0;
  margin-bottom: 0;
}

/* Mission Intro: Border-Radius vereinheitlichen */
#mission-intro.glass-card {
  border-radius: var(--radius-md); /* 16px statt 24px */
}

/* Petition: Border-Radius vereinheitlichen */
#petition.glass-card {
  border-radius: var(--radius-md); /* 16px statt 24px */
}

/* Demands: Border-Radius vereinheitlichen */
#demands.glass-card {
  border-radius: var(--radius-md); /* 16px statt 24px */
}

/* Community: Border-Radius vereinheitlichen */
#community.glass-card {
  border-radius: var(--radius-md); /* 16px statt 24px */
}

/* ========================================
   8. HERO-CONTENT PADDING
   ======================================== */

.hero .hero-content {
  padding: clamp(1.25rem, 3vw, 1.5rem); /* Erhöht von 12px */
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
  /* KEINE Höhenbeschränkung die Scrollbar verursachen könnte */
  height: auto;
  max-height: none;
  min-height: auto;
}

/* ========================================
   9. RESPONSIVE ANPASSUNGEN
   ======================================== */

@media (max-width: 768px) {
  .layout-main .glass-card {
    padding: var(--panel-padding-sm);
  }

  /* CTA-Buttons: Volle Breite auf Mobile, min-width entfernt */
  .hero .hero-content .hero-cta-group .cta-button,
  .cta-button {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .layout-main .content-stack {
    gap: var(--spacing-gap-md);
  }
}

@media (max-width: 480px) {
  /* CTA-Buttons: Volle Breite auf sehr kleinen Screens */
  .hero .hero-content .hero-cta-group .cta-button,
  .cta-button {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .layout-main .glass-card {
    padding: var(--panel-padding-sm);
  }
}

/* ========================================
   10. DEMANDS SECTION - SCHRITT-ITEMS
   ======================================== */

/* Abstände zwischen Schritt-Items */
#demands.glass-card li,
#demands.glass-card .demand-step,
#demands.glass-card .step-item {
  margin-bottom: var(--spacing-md); /* Einheitlich: 1.5rem */
}

#demands.glass-card li:last-child,
#demands.glass-card .demand-step:last-child,
#demands.glass-card .step-item:last-child {
  margin-bottom: 0;
}

/* ========================================
   11. SUPPORT SECTION - SHARE-GRID
   ======================================== */

/* Share-Grid: Einheitlicher Gap */
.social-share-grid,
.share-grid {
  gap: 1.5rem; /* Einheitlich: clamp(1.5rem, 3vw, 2rem) */
}

/* Share-Buttons: Optimale Größe - Deaktiviert für neues vertikales Design */
/* Diese Styles sind auskommentiert, da sie nicht mehr benötigt werden */

/* ========================================
   12. FAQ SECTION - ITEMS
   ======================================== */

/* FAQ-Items: Einheitliche Margins - Höhere Spezifität */
#faq.glass-card .faq-item,
#faq.glass-card [class*="faq-item"],
.glass-card .faq-item {
  margin: 0 0 var(--spacing-md) 0; /* Einheitlich: 0 0 1.5rem 0 */
}

#faq.glass-card .faq-item:last-child,
#faq.glass-card [class*="faq-item"]:last-child,
.glass-card .faq-item:last-child {
  margin-bottom: 0;
}

/* ========================================
   13. FOOTER - GRID-LAYOUT
   ======================================== */

/* Footer Grid: Einheitlicher Gap */
.campaign-footer [class*="grid"],
footer [class*="grid"],
[role="contentinfo"] [class*="grid"] {
  gap: var(--spacing-gap-md); /* Einheitlich: clamp(1.5rem, 3vw, 2rem) */
}

/* Footer Links: Konsistente Abstände */
.campaign-footer a,
footer a,
[role="contentinfo"] a {
  margin: 0 0 var(--spacing-xs) 0;
}

/* ========================================
   14. TIMELINE SECTION
   ======================================== */

/* Timeline-Items: Einheitliche Abstände */
.glass-card .timeline-item,
.glass-card [class*="timeline"] li {
  margin-bottom: var(--spacing-lg); /* Einheitlich: 2rem */
}

.glass-card .timeline-item:last-child,
.glass-card [class*="timeline"] li:last-child {
  margin-bottom: 0;
}

/* ========================================
   15. TRANSPARENCY SECTION
   ======================================== */

/* Transparency Cards: Einheitliche Abstände */
.glass-card .transparency-card,
#transparency.glass-card [class*="card"] {
  margin-bottom: var(--spacing-md);
}

.glass-card .transparency-card:last-child,
#transparency.glass-card [class*="card"]:last-child {
  margin-bottom: 0;
}

/* ========================================
   16. MISSION INTRO - GRID-LAYOUT
   ======================================== */

/* Intro-Grid: Einheitlicher Gap falls Grid aktiviert */
.glass-card .intro-grid {
  gap: var(--spacing-gap-md); /* Falls Grid verwendet wird */
}

/* ========================================
   17. ANNOUNCEMENT - GRID-LAYOUT
   ======================================== */

/* Happened-Grid: Einheitlicher Gap falls Grid aktiviert */
.glass-card .happened-grid {
  gap: var(--spacing-gap-md); /* Falls Grid verwendet wird */
}

/* ========================================
   18. VISION SECTION - FEATURE-CARDS
   ======================================== */

/* Vision Grid: Bereits gut (gap: 32px) - Feature-Cards Padding vereinheitlichen */
.glass-card .vision-grid .feature-card,
.glass-card .features-grid .feature-card {
  padding: var(--panel-padding-md); /* Einheitlich: clamp(1.5rem, 3vw, 2rem) */
}

/* ========================================
   19. PETITION - BOXES
   ======================================== */

/* Petition Boxes: Einheitliche Margins */
#petition.glass-card .petition-box,
#petition.glass-card .usage-box,
#petition.glass-card .timeline-box,
#petition.glass-card [class*="box"]:not(:last-child) {
  margin: 0 0 var(--spacing-md) 0; /* Einheitlich: 0 0 1.5rem 0 */
}

#petition.glass-card .petition-box:last-child,
#petition.glass-card .usage-box:last-child,
#petition.glass-card .timeline-box:last-child,
#petition.glass-card [class*="box"]:last-child {
  margin: 0;
  margin-bottom: 0;
}

/* ========================================
   20. TIMELINE - MARKER & HIERARCHIE
   ======================================== */

/* Timeline-Marker: Konsistente Größe */
.glass-card .timeline-marker,
.glass-card [class*="timeline-marker"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}

/* Timeline-Items: Bereits konsistent (margin-bottom: 32px = 2rem) ✅ */

/* ========================================
   21. PLAYER CHART
   ======================================== */

/* Player Chart: Bereits konsistent (32px padding, 16px border-radius) ✅ */