/* =====================================================================
   GRUPPENTRAINING — zwei Aufzaehlungsbloecke auf Bento-Niveau
   ---------------------------------------------------------------------
   1. "Fuer wen das Gruppentraining geeignet ist": fuenf gleich grosse
      Karten (max-width 380px) in einer zentrierten Reihe. Bei 390px
      war die Sektion dadurch 2447px hoch - fast drei Bildschirme fuer
      fuenf Stichworte.

   2. "Vorteile auf einen Blick": sechs gleich grosse Karten im
      3x2-Raster. Die umlaufende Goldkante war mit opacity: 0
      angelegt und erschien erst bei :hover - auf Touchgeraeten also
      nie. Dort blieb ein weisser Kasten mit 4% Randdeckkraft uebrig.

   Beide Bloecke bekommen jetzt ein asymmetrisches Raster mit
   unterschiedlichen Formen, ein grosses Hintergrundsymbol je Kachel
   und eine Goldkante, die dauerhaft laeuft.

   Zur Spezifitaet: die Kartenstile stehen im <style>-Block im Body,
   also NACH dieser Datei. Wo hier !important steht, ist es deshalb
   noetig.
   ===================================================================== */

/* ═══════════════════════════════════════════════════════════════
   1 — FUER WEN GEEIGNET
       Reihe 1  Fitness (breit)   Physis
       Reihe 2  Routine  Anspruch  Synergie
   ═══════════════════════════════════════════════════════════════ */
html body .gt-cards-container {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px !important;
}
html body .gt-tile {
    flex: none !important;
    min-width: 0 !important;
    max-width: none !important;
}
html body .gt-tile--1 { grid-column: span 2; }

/* Grosses ruhiges Hintergrundsymbol */
html body .gt-ghost {
    position: absolute;
    right: -18px; bottom: -22px;
    width: 132px; height: 132px;
    opacity: .06;
    pointer-events: none;
    z-index: 0;
    transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
html body .gt-ghost svg {
    width: 100%; height: 100%;
    fill: none;
    stroke: #E5B83B;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #E5B83B;
}
html body .gt-tile:hover .gt-ghost { transform: scale(1.14) rotate(-7deg); opacity: .13; }
html body .gt-tile--1 .gt-ghost { width: 180px; height: 180px; }

/* Die breite Leitkachel nutzt ihre Breite zweispaltig - Symbolzeile
   links, Text rechts. Sonst laeuft der Absatz ueber 780px. */
html body .gt-tile--1 {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    column-gap: 34px;
    align-items: center;
}
html body .gt-tile--1 > .gt-card-top { grid-column: 1; grid-row: 1; }
html body .gt-tile--1 > .gt-card-tag { grid-column: 2; grid-row: 1; align-self: end; }
html body .gt-tile--1 > h3 { grid-column: 2; grid-row: 2; }
html body .gt-tile--1 > p  { grid-column: 2; grid-row: 3; }

/* ── Goldkante ──
   Das Ausblenden nach dem Einblenden ist inzwischen zentral in
   premium-fx.css behoben; hier stehen nur noch die Laufzeiten, damit
   die elf Kacheln dieser Seite nicht im Gleichschritt drehen. */
html body .gt-tile--1.fx-in::after, html body .vort-tile--1.fx-in::after { animation-duration: 13s, 2.8s; }
html body .gt-tile--2.fx-in::after, html body .vort-tile--2.fx-in::after { animation-duration: 16s, 2.8s; }
html body .gt-tile--3.fx-in::after, html body .vort-tile--3.fx-in::after { animation-duration: 19s, 2.8s; }
html body .gt-tile--4.fx-in::after, html body .vort-tile--4.fx-in::after { animation-duration: 22s, 2.8s; }
html body .gt-tile--5.fx-in::after, html body .vort-tile--5.fx-in::after { animation-duration: 15s, 2.8s; }
html body .vort-tile--6.fx-in::after { animation-duration: 18s, 2.8s; }

/* Ruhiges Dauerleuchten der Symbolkachel, versetzt */
html body .gt-glass-card.fx-in .gt-card-icon { animation: gtIcoPulse 7s ease-in-out infinite; }
html body .gt-tile--2.fx-in .gt-card-icon { animation-delay: 1s; }
html body .gt-tile--3.fx-in .gt-card-icon { animation-delay: 2s; }
html body .gt-tile--4.fx-in .gt-card-icon { animation-delay: 3s; }
html body .gt-tile--5.fx-in .gt-card-icon { animation-delay: 4s; }
@keyframes gtIcoPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(202, 138, 4, 0); }
    45%      { box-shadow: 0 0 24px rgba(202, 138, 4, .3); }
}

/* ═══════════════════════════════════════════════════════════════
   2 — VORTEILE AUF EINEN BLICK
       Reihe 1  Struktur   Fachlich (breit)
       Reihe 2  Dynamik (breit)   Ganzheitlich
       Reihe 3  Individuell   Fortschritt (breit)
   ═══════════════════════════════════════════════════════════════ */
html body .gt-vorteile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
html body .vort-tile { min-width: 0; }
html body .vort-tile--2 { grid-column: span 2; }
html body .vort-tile--3 { grid-column: span 2; }
html body .vort-tile--6 { grid-column: span 2; }

/* Die breiten Kacheln stellen Symbol und Text nebeneinander */
html body .vort-tile--2,
html body .vort-tile--3,
html body .vort-tile--6 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 28px;
    align-items: center;
}
html body .vort-tile--2 > .vort-icon,
html body .vort-tile--3 > .vort-icon,
html body .vort-tile--6 > .vort-icon {
    grid-column: 1; grid-row: 1 / -1;
    margin-bottom: 0 !important;
}
html body .vort-tile--2 > h3,
html body .vort-tile--3 > h3,
html body .vort-tile--6 > h3 { grid-column: 2; grid-row: 1; }
html body .vort-tile--2 > p,
html body .vort-tile--3 > p,
html body .vort-tile--6 > p { grid-column: 2; grid-row: 2; }

/* Die Kante lag auf opacity: 0 und erschien nur bei :hover.
   Auf Touch gibt es kein Hover - dort war die Karte ein weisser
   Kasten. Jetzt laeuft sie dauerhaft (siehe ::after oben), die alte
   Regel wird deshalb stillgelegt. */
html body .vort-card::before { opacity: 0 !important; animation: none !important; }

html body .vort-ghost {
    position: absolute;
    right: -18px; bottom: -22px;
    width: 128px; height: 128px;
    opacity: .07;
    pointer-events: none;
    z-index: 0;
    transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
html body .vort-ghost svg {
    width: 100%; height: 100%;
    fill: none;
    stroke: #A97708;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #A97708;
}
html body .vort-tile:hover .vort-ghost { transform: scale(1.14) rotate(-7deg); opacity: .14; }
html body .vort-tile--2 .vort-ghost,
html body .vort-tile--3 .vort-ghost,
html body .vort-tile--6 .vort-ghost { width: 168px; height: 168px; }

/* Ziffer ohne fuehrende Null */
html body .vort-no {
    position: absolute;
    top: 26px; right: 30px;
    z-index: 3;
    font-family: 'KGSAmp', 'Playfair Display', serif;
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(169, 119, 8, .3);
    transition: color .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
html body .vort-tile:hover .vort-no { color: rgba(169, 119, 8, .62); transform: translateY(-2px); }

/* Titel in der Hausschrift - .vort-card h3 stand in der Fliesstext-
   schrift auf 700, als einzige Kartenueberschrift der Website. */
html body .vort-card h3 {
    font-family: 'KGSAmp', 'Playfair Display', serif !important;
    font-size: 1.24rem !important;
    font-weight: 500 !important;
    line-height: 1.24 !important;
    letter-spacing: -.2px;
    hyphens: auto;
}

html body .vort-tile .vort-icon { animation: gtIcoPulse 7s ease-in-out infinite; }
html body .vort-tile--2 .vort-icon { animation-delay: .9s; }
html body .vort-tile--3 .vort-icon { animation-delay: 1.8s; }
html body .vort-tile--4 .vort-icon { animation-delay: 2.7s; }
html body .vort-tile--5 .vort-icon { animation-delay: 3.6s; }
html body .vort-tile--6 .vort-icon { animation-delay: 4.5s; }

/* ═══════════════════════════════════════════════════════════════
   Breitenverhalten
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    html body .gt-cards-container,
    html body .gt-vorteile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px !important; }
    html body .gt-tile--1,
    html body .vort-tile--2,
    html body .vort-tile--3,
    html body .vort-tile--6 { grid-column: 1 / -1; }
    html body .gt-tile--1 { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 26px; }
}
@media (max-width: 768px) {
    html body .gt-cards-container,
    html body .gt-vorteile-grid { grid-template-columns: minmax(0, 1fr); }
    /* Einspaltig loest sich der zweispaltige Innenaufbau auf */
    html body .gt-tile--1 { display: block; }
    html body .vort-tile--2,
    html body .vort-tile--3,
    html body .vort-tile--6 { display: block; }
    html body .vort-tile--2 > .vort-icon,
    html body .vort-tile--3 > .vort-icon,
    html body .vort-tile--6 > .vort-icon { margin-bottom: 20px !important; }
    html body .gt-ghost,
    html body .gt-tile--1 .gt-ghost,
    html body .vort-ghost,
    html body .vort-tile--2 .vort-ghost,
    html body .vort-tile--3 .vort-ghost,
    html body .vort-tile--6 .vort-ghost { width: 100px; height: 100px; right: -14px; bottom: -16px; }
    html body .vort-no { top: 18px; right: 20px; font-size: 1.3rem; }
    html body .vort-card h3 { font-size: 1.1rem !important; }

    /* Innenmasse: gemessen 40px/32px bzw. 42px/34px bei 342px
       Kartenbreite - davon blieben 274px Textbreite. Elf gestapelte
       Karten summieren den Ueberschuss auf ueber 350px Seitenlaenge. */
    html body .gt-glass-card { padding: 24px 20px !important; border-radius: 22px !important; }
    html body .vort-card { padding: 24px 20px !important; border-radius: 22px !important; }
    html body .gt-card-icon { width: 46px !important; height: 46px !important; }
    html body .vort-icon { width: 46px !important; height: 46px !important; margin-bottom: 18px !important; }
    html body .gt-glass-card h3 { font-size: 1.2rem !important; margin-bottom: 11px !important; }
    html body .gt-card-index { font-size: 2.1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    html body .gt-tile.fx-in::after,
    html body .vort-tile.fx-in::after { animation: none !important; }
    html body .gt-glass-card.fx-in .gt-card-icon,
    html body .vort-tile .vort-icon { animation: none !important; }
}