/*
 * Durchreiche zur WhatsApp-Gruppe (leofitnesscoaching.com/gruppe), nachgebaut aus der
 * Onepage-Sektion „Gruppe beitreten“ (Stand 14.10.2026). Werte unverändert.
 * Farben kommen wie bei Onepage als Variablen am Abschnitt (--g-*). --g-line war bei Onepage
 * „var(--color-kit-key1)1f“ und damit ungültig: die Spur des Balkens bleibt durchsichtig.
 */
/* Wie .con-kit-page bei Onepage: mindestens so hoch wie das Fenster. */
.gruppe-seite { min-height: 100vh; }
.gruppe { width: 100%; box-sizing: border-box; padding: 72px 20px; background: var(--g-bg); color: var(--g-text); font-family: var(--font-kit-text-font), Arial, sans-serif; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.gruppe__container { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Ring in WhatsApp-Grün mit dem Logo: wer das hier überhaupt sieht, wartet nur und liest nichts. */
.gruppe__zeichen { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--g-wa-soft); color: var(--g-wa); margin-bottom: 24px; }
.gruppe__zeichen svg { width: 40px; height: 40px; }
.gruppe__headline { margin: 0; font-family: var(--font-kit-header-font), sans-serif; font-size: 27px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.gruppe__zeile { margin: 12px 0 0; font-size: 16px; opacity: 0.6; }
/* Dezenter Fortschrittsbalken, rein in CSS. */
.gruppe__balken { width: 190px; height: 4px; border-radius: 999px; background: var(--g-line); overflow: hidden; margin: 26px 0 0; }
.gruppe__fuellung { display: block; height: 100%; width: 40%; border-radius: 999px; background: var(--g-wa); animation: gruppe-lauf 1.15s ease-in-out infinite; }
@keyframes gruppe-lauf { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.gruppe__cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; }
/* Leos Knopf kennt keine Unterzeile, deshalb steht der Zusatz darunter. */
.gruppe__unter { margin: 12px 0 0; font-size: 13px; opacity: 0.55; }
@media (max-width: 640px) {
  .gruppe { padding: 52px 18px; }
  .gruppe__headline { font-size: 23px; }
  .gruppe__cta { width: 100%; }
}