/* ========================================
   SOCIAL BUTTONS - 4 REIHEN MIT GRÖßENSTAFFELUNG
   - Reihe 1 (Buttons 1-5): Größte (wichtigste)
   - Reihe 2 (Buttons 6-10): Kleiner (etwas weniger wichtig)
   - Reihe 3 (Buttons 11-14): Noch kleiner (weniger wichtig)
   - Reihe 4 (Buttons 15-17): Kleinste (am unwichtigsten)
   ======================================== */

/* ========================================
   1. GRID-LAYOUT - 4-5 Spalten für 4 Reihen
   ======================================== */

.support-section .social-share-grid,
.activation-share .social-share-grid {
  display: grid;
  grid-template-columns: repeat(5, auto); /* 5 Spalten für bessere Verteilung */
  gap: 1rem;
  max-width: fit-content;
  justify-content: center;
  justify-items: center;
  align-items: center;
  margin-top: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: fit-content;
}

/* ========================================
   2. REIHE 1 - Größte (Buttons 1-5): Wichtigste
   Facebook, Twitter, Instagram, WhatsApp, Discord
   ======================================== */

.support-section .social-share-grid .social-button:nth-child(1),
.support-section .social-share-grid .social-button:nth-child(2),
.support-section .social-share-grid .social-button:nth-child(3),
.support-section .social-share-grid .social-button:nth-child(4),
.support-section .social-share-grid .social-button:nth-child(5),
.activation-share .social-share-grid .social-button:nth-child(1),
.activation-share .social-share-grid .social-button:nth-child(2),
.activation-share .social-share-grid .social-button:nth-child(3),
.activation-share .social-share-grid .social-button:nth-child(4),
.activation-share .social-share-grid .social-button:nth-child(5) {
  width: 100px;
  height: 100px;
  min-width: 100px;
  min-height: 100px;
  max-width: 100px;
  max-height: 100px;
}

.support-section .social-share-grid .social-button:nth-child(1) svg,
.support-section .social-share-grid .social-button:nth-child(2) svg,
.support-section .social-share-grid .social-button:nth-child(3) svg,
.support-section .social-share-grid .social-button:nth-child(4) svg,
.support-section .social-share-grid .social-button:nth-child(5) svg,
.activation-share .social-share-grid .social-button:nth-child(1) svg,
.activation-share .social-share-grid .social-button:nth-child(2) svg,
.activation-share .social-share-grid .social-button:nth-child(3) svg,
.activation-share .social-share-grid .social-button:nth-child(4) svg,
.activation-share .social-share-grid .social-button:nth-child(5) svg {
  width: 44px;
  height: 44px;
}

/* ========================================
   3. REIHE 2 - Kleiner (Buttons 6-10): Etwas weniger wichtig
   Reddit, YouTube, Twitch, TikTok, LinkedIn
   ======================================== */

.support-section .social-share-grid .social-button:nth-child(6),
.support-section .social-share-grid .social-button:nth-child(7),
.support-section .social-share-grid .social-button:nth-child(8),
.support-section .social-share-grid .social-button:nth-child(9),
.support-section .social-share-grid .social-button:nth-child(10),
.activation-share .social-share-grid .social-button:nth-child(6),
.activation-share .social-share-grid .social-button:nth-child(7),
.activation-share .social-share-grid .social-button:nth-child(8),
.activation-share .social-share-grid .social-button:nth-child(9),
.activation-share .social-share-grid .social-button:nth-child(10) {
  width: 85px;
  height: 85px;
  min-width: 85px;
  min-height: 85px;
  max-width: 85px;
  max-height: 85px;
}

.support-section .social-share-grid .social-button:nth-child(6) svg,
.support-section .social-share-grid .social-button:nth-child(7) svg,
.support-section .social-share-grid .social-button:nth-child(8) svg,
.support-section .social-share-grid .social-button:nth-child(9) svg,
.support-section .social-share-grid .social-button:nth-child(10) svg,
.activation-share .social-share-grid .social-button:nth-child(6) svg,
.activation-share .social-share-grid .social-button:nth-child(7) svg,
.activation-share .social-share-grid .social-button:nth-child(8) svg,
.activation-share .social-share-grid .social-button:nth-child(9) svg,
.activation-share .social-share-grid .social-button:nth-child(10) svg {
  width: 38px;
  height: 38px;
}

/* ========================================
   4. REIHE 3 - Noch kleiner (Buttons 11-14): Weniger wichtig
   Telegram, Pinterest, Snapchat, Mastodon
   ======================================== */

.support-section .social-share-grid .social-button:nth-child(11),
.support-section .social-share-grid .social-button:nth-child(12),
.support-section .social-share-grid .social-button:nth-child(13),
.support-section .social-share-grid .social-button:nth-child(14),
.activation-share .social-share-grid .social-button:nth-child(11),
.activation-share .social-share-grid .social-button:nth-child(12),
.activation-share .social-share-grid .social-button:nth-child(13),
.activation-share .social-share-grid .social-button:nth-child(14) {
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  max-width: 70px;
  max-height: 70px;
}

.support-section .social-share-grid .social-button:nth-child(11) svg,
.support-section .social-share-grid .social-button:nth-child(12) svg,
.support-section .social-share-grid .social-button:nth-child(13) svg,
.support-section .social-share-grid .social-button:nth-child(14) svg,
.activation-share .social-share-grid .social-button:nth-child(11) svg,
.activation-share .social-share-grid .social-button:nth-child(12) svg,
.activation-share .social-share-grid .social-button:nth-child(13) svg,
.activation-share .social-share-grid .social-button:nth-child(14) svg {
  width: 32px;
  height: 32px;
}

/* Button 15 NICHT in Reihe 3 - wird von Reihe 4 überschrieben */

/* ========================================
   5. REIHE 4 - Kleinste (Buttons 15-17): Am unwichtigsten
   Bluesky, Threads, E-Mail
   ======================================== */

.support-section .social-share-grid .social-button:nth-child(15),
.support-section .social-share-grid .social-button:nth-child(16),
.support-section .social-share-grid .social-button:nth-child(17),
.activation-share .social-share-grid .social-button:nth-child(15),
.activation-share .social-share-grid .social-button:nth-child(16),
.activation-share .social-share-grid .social-button:nth-child(17) {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
  max-width: 60px;
  max-height: 60px;
}

.support-section .social-share-grid .social-button:nth-child(15) svg,
.support-section .social-share-grid .social-button:nth-child(16) svg,
.support-section .social-share-grid .social-button:nth-child(17) svg,
.activation-share .social-share-grid .social-button:nth-child(15) svg,
.activation-share .social-share-grid .social-button:nth-child(16) svg,
.activation-share .social-share-grid .social-button:nth-child(17) svg {
  width: 28px;
  height: 28px;
}

/* ========================================
   6. ZENTRIERUNG DER LETZTEN REIHE
   ======================================== */

/* Zentriere die letzten 3 Buttons in der letzten Reihe (5 Spalten Grid) */
.support-section .social-share-grid .social-button:nth-child(15),
.activation-share .social-share-grid .social-button:nth-child(15) {
  grid-column: 2; /* Zweite Spalte */
}

.support-section .social-share-grid .social-button:nth-child(16),
.activation-share .social-share-grid .social-button:nth-child(16) {
  grid-column: 3; /* Dritte Spalte (Mitte) */
}

.support-section .social-share-grid .social-button:nth-child(17),
.activation-share .social-share-grid .social-button:nth-child(17) {
  grid-column: 4; /* Vierte Spalte */
}

/* ========================================
   7. RESPONSIVE ANPASSUNGEN
   ======================================== */

@media (max-width: 768px) {
  .support-section .social-share-grid,
  .activation-share .social-share-grid {
    grid-template-columns: repeat(4, auto); /* 4 Spalten auf Tablet */
    gap: 0.75rem;
  }
  
  /* Reihe 1 */
  .support-section .social-share-grid .social-button:nth-child(1),
  .support-section .social-share-grid .social-button:nth-child(2),
  .support-section .social-share-grid .social-button:nth-child(3),
  .support-section .social-share-grid .social-button:nth-child(4),
  .support-section .social-share-grid .social-button:nth-child(5),
  .activation-share .social-share-grid .social-button:nth-child(1),
  .activation-share .social-share-grid .social-button:nth-child(2),
  .activation-share .social-share-grid .social-button:nth-child(3),
  .activation-share .social-share-grid .social-button:nth-child(4),
  .activation-share .social-share-grid .social-button:nth-child(5) {
    width: 85px;
    height: 85px;
    min-width: 85px;
    min-height: 85px;
    max-width: 85px;
    max-height: 85px;
  }
  
  .support-section .social-share-grid .social-button:nth-child(1) svg,
  .support-section .social-share-grid .social-button:nth-child(2) svg,
  .support-section .social-share-grid .social-button:nth-child(3) svg,
  .support-section .social-share-grid .social-button:nth-child(4) svg,
  .support-section .social-share-grid .social-button:nth-child(5) svg,
  .activation-share .social-share-grid .social-button:nth-child(1) svg,
  .activation-share .social-share-grid .social-button:nth-child(2) svg,
  .activation-share .social-share-grid .social-button:nth-child(3) svg,
  .activation-share .social-share-grid .social-button:nth-child(4) svg,
  .activation-share .social-share-grid .social-button:nth-child(5) svg {
    width: 38px;
    height: 38px;
  }
  
  /* Reihe 2 */
  .support-section .social-share-grid .social-button:nth-child(6),
  .support-section .social-share-grid .social-button:nth-child(7),
  .support-section .social-share-grid .social-button:nth-child(8),
  .support-section .social-share-grid .social-button:nth-child(9),
  .support-section .social-share-grid .social-button:nth-child(10),
  .activation-share .social-share-grid .social-button:nth-child(6),
  .activation-share .social-share-grid .social-button:nth-child(7),
  .activation-share .social-share-grid .social-button:nth-child(8),
  .activation-share .social-share-grid .social-button:nth-child(9),
  .activation-share .social-share-grid .social-button:nth-child(10) {
    width: 75px;
    height: 75px;
    min-width: 75px;
    min-height: 75px;
    max-width: 75px;
    max-height: 75px;
  }
  
  .support-section .social-share-grid .social-button:nth-child(6) svg,
  .support-section .social-share-grid .social-button:nth-child(7) svg,
  .support-section .social-share-grid .social-button:nth-child(8) svg,
  .support-section .social-share-grid .social-button:nth-child(9) svg,
  .support-section .social-share-grid .social-button:nth-child(10) svg,
  .activation-share .social-share-grid .social-button:nth-child(6) svg,
  .activation-share .social-share-grid .social-button:nth-child(7) svg,
  .activation-share .social-share-grid .social-button:nth-child(8) svg,
  .activation-share .social-share-grid .social-button:nth-child(9) svg,
  .activation-share .social-share-grid .social-button:nth-child(10) svg {
    width: 34px;
    height: 34px;
  }
  
  /* Reihe 3 */
  .support-section .social-share-grid .social-button:nth-child(11),
  .support-section .social-share-grid .social-button:nth-child(12),
  .support-section .social-share-grid .social-button:nth-child(13),
  .support-section .social-share-grid .social-button:nth-child(14),
  .activation-share .social-share-grid .social-button:nth-child(11),
  .activation-share .social-share-grid .social-button:nth-child(12),
  .activation-share .social-share-grid .social-button:nth-child(13),
  .activation-share .social-share-grid .social-button:nth-child(14) {
    width: 65px;
    height: 65px;
    min-width: 65px;
    min-height: 65px;
    max-width: 65px;
    max-height: 65px;
  }
  
  .support-section .social-share-grid .social-button:nth-child(11) svg,
  .support-section .social-share-grid .social-button:nth-child(12) svg,
  .support-section .social-share-grid .social-button:nth-child(13) svg,
  .support-section .social-share-grid .social-button:nth-child(14) svg,
  .activation-share .social-share-grid .social-button:nth-child(11) svg,
  .activation-share .social-share-grid .social-button:nth-child(12) svg,
  .activation-share .social-share-grid .social-button:nth-child(13) svg,
  .activation-share .social-share-grid .social-button:nth-child(14) svg {
    width: 30px;
    height: 30px;
  }
  
  /* Reihe 4 */
  .support-section .social-share-grid .social-button:nth-child(15),
  .support-section .social-share-grid .social-button:nth-child(16),
  .support-section .social-share-grid .social-button:nth-child(17),
  .activation-share .social-share-grid .social-button:nth-child(15),
  .activation-share .social-share-grid .social-button:nth-child(16),
  .activation-share .social-share-grid .social-button:nth-child(17) {
    width: 55px;
    height: 55px;
    min-width: 55px;
    min-height: 55px;
    max-width: 55px;
    max-height: 55px;
  }
  
  .support-section .social-share-grid .social-button:nth-child(15) svg,
  .support-section .social-share-grid .social-button:nth-child(16) svg,
  .support-section .social-share-grid .social-button:nth-child(17) svg,
  .activation-share .social-share-grid .social-button:nth-child(15) svg,
  .activation-share .social-share-grid .social-button:nth-child(16) svg,
  .activation-share .social-share-grid .social-button:nth-child(17) svg {
    width: 26px;
    height: 26px;
  }
  
  /* Zentrierung auf Tablet anpassen */
  .support-section .social-share-grid .social-button:nth-child(15),
  .activation-share .social-share-grid .social-button:nth-child(15) {
    grid-column: 1; /* Erste Spalte */
  }
  
  .support-section .social-share-grid .social-button:nth-child(16),
  .activation-share .social-share-grid .social-button:nth-child(16) {
    grid-column: 2; /* Zweite Spalte */
  }
  
  .support-section .social-share-grid .social-button:nth-child(17),
  .activation-share .social-share-grid .social-button:nth-child(17) {
    grid-column: 3; /* Dritte Spalte */
  }
}

@media (max-width: 480px) {
  .support-section .social-share-grid,
  .activation-share .social-share-grid {
    grid-template-columns: repeat(3, auto); /* 3 Spalten auf Mobile */
    gap: 0.5rem;
  }
  
  /* Reihe 1 */
  .support-section .social-share-grid .social-button:nth-child(1),
  .support-section .social-share-grid .social-button:nth-child(2),
  .support-section .social-share-grid .social-button:nth-child(3),
  .support-section .social-share-grid .social-button:nth-child(4),
  .support-section .social-share-grid .social-button:nth-child(5),
  .activation-share .social-share-grid .social-button:nth-child(1),
  .activation-share .social-share-grid .social-button:nth-child(2),
  .activation-share .social-share-grid .social-button:nth-child(3),
  .activation-share .social-share-grid .social-button:nth-child(4),
  .activation-share .social-share-grid .social-button:nth-child(5) {
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
    max-width: 70px;
    max-height: 70px;
  }
  
  .support-section .social-share-grid .social-button:nth-child(1) svg,
  .support-section .social-share-grid .social-button:nth-child(2) svg,
  .support-section .social-share-grid .social-button:nth-child(3) svg,
  .support-section .social-share-grid .social-button:nth-child(4) svg,
  .support-section .social-share-grid .social-button:nth-child(5) svg,
  .activation-share .social-share-grid .social-button:nth-child(1) svg,
  .activation-share .social-share-grid .social-button:nth-child(2) svg,
  .activation-share .social-share-grid .social-button:nth-child(3) svg,
  .activation-share .social-share-grid .social-button:nth-child(4) svg,
  .activation-share .social-share-grid .social-button:nth-child(5) svg {
    width: 32px;
    height: 32px;
  }
  
  /* Reihe 2 */
  .support-section .social-share-grid .social-button:nth-child(6),
  .support-section .social-share-grid .social-button:nth-child(7),
  .support-section .social-share-grid .social-button:nth-child(8),
  .support-section .social-share-grid .social-button:nth-child(9),
  .support-section .social-share-grid .social-button:nth-child(10),
  .activation-share .social-share-grid .social-button:nth-child(6),
  .activation-share .social-share-grid .social-button:nth-child(7),
  .activation-share .social-share-grid .social-button:nth-child(8),
  .activation-share .social-share-grid .social-button:nth-child(9),
  .activation-share .social-share-grid .social-button:nth-child(10) {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    max-width: 60px;
    max-height: 60px;
  }
  
  .support-section .social-share-grid .social-button:nth-child(6) svg,
  .support-section .social-share-grid .social-button:nth-child(7) svg,
  .support-section .social-share-grid .social-button:nth-child(8) svg,
  .support-section .social-share-grid .social-button:nth-child(9) svg,
  .support-section .social-share-grid .social-button:nth-child(10) svg,
  .activation-share .social-share-grid .social-button:nth-child(6) svg,
  .activation-share .social-share-grid .social-button:nth-child(7) svg,
  .activation-share .social-share-grid .social-button:nth-child(8) svg,
  .activation-share .social-share-grid .social-button:nth-child(9) svg,
  .activation-share .social-share-grid .social-button:nth-child(10) svg {
    width: 28px;
    height: 28px;
  }
  
  /* Reihe 3 */
  .support-section .social-share-grid .social-button:nth-child(11),
  .support-section .social-share-grid .social-button:nth-child(12),
  .support-section .social-share-grid .social-button:nth-child(13),
  .support-section .social-share-grid .social-button:nth-child(14),
  .activation-share .social-share-grid .social-button:nth-child(11),
  .activation-share .social-share-grid .social-button:nth-child(12),
  .activation-share .social-share-grid .social-button:nth-child(13),
  .activation-share .social-share-grid .social-button:nth-child(14) {
    width: 55px;
    height: 55px;
    min-width: 55px;
    min-height: 55px;
    max-width: 55px;
    max-height: 55px;
  }
  
  .support-section .social-share-grid .social-button:nth-child(11) svg,
  .support-section .social-share-grid .social-button:nth-child(12) svg,
  .support-section .social-share-grid .social-button:nth-child(13) svg,
  .support-section .social-share-grid .social-button:nth-child(14) svg,
  .activation-share .social-share-grid .social-button:nth-child(11) svg,
  .activation-share .social-share-grid .social-button:nth-child(12) svg,
  .activation-share .social-share-grid .social-button:nth-child(13) svg,
  .activation-share .social-share-grid .social-button:nth-child(14) svg {
    width: 26px;
    height: 26px;
  }
  
  /* Reihe 4 */
  .support-section .social-share-grid .social-button:nth-child(15),
  .support-section .social-share-grid .social-button:nth-child(16),
  .support-section .social-share-grid .social-button:nth-child(17),
  .activation-share .social-share-grid .social-button:nth-child(15),
  .activation-share .social-share-grid .social-button:nth-child(16),
  .activation-share .social-share-grid .social-button:nth-child(17) {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    max-width: 50px;
    max-height: 50px;
  }
  
  .support-section .social-share-grid .social-button:nth-child(15) svg,
  .support-section .social-share-grid .social-button:nth-child(16) svg,
  .support-section .social-share-grid .social-button:nth-child(17) svg,
  .activation-share .social-share-grid .social-button:nth-child(15) svg,
  .activation-share .social-share-grid .social-button:nth-child(16) svg,
  .activation-share .social-share-grid .social-button:nth-child(17) svg {
    width: 24px;
    height: 24px;
  }
  
  /* Zentrierung auf Mobile anpassen */
  .support-section .social-share-grid .social-button:nth-child(15),
  .activation-share .social-share-grid .social-button:nth-child(15) {
    grid-column: 1; /* Erste Spalte */
  }
  
  .support-section .social-share-grid .social-button:nth-child(16),
  .activation-share .social-share-grid .social-button:nth-child(16) {
    grid-column: 2; /* Zweite Spalte */
  }
  
  .support-section .social-share-grid .social-button:nth-child(17),
  .activation-share .social-share-grid .social-button:nth-child(17) {
    grid-column: 3; /* Dritte Spalte */
  }
}