/* ==========================================================================
   KGS UNIFIED PREMIUM CTA  (.kgs-cta)
   Eine CTA-Komponente für alle Seiten – vereint die Design-DNA der
   Startseiten-CTA (Aurora, Lichtakzent, gestaffelte Blur-Reveals) mit der
   Personal-Training-CTA (dunkle Gold-Karte auf Weiß, Lebensblume, Crown,
   Serif-Headline mit Gold-Gradient, Trust-Row, Gold-Button mit Sweep).
   Thematische Slots pro Seite: <em> in der H2, Absatz, Button-Label/-Ziel.
   ========================================================================== */

/* ── Heller Editorial-Rahmen ── */
.kgs-cta {
    position: relative;
    padding: clamp(64px, 7vw, 96px) 24px;
    background: #FAFAF9;
    overflow: hidden;
    text-align: center;
}


/* Warmer Gold-Halo hinter der Karte – die Karte wirkt als Licht-Objekt, nicht als Kasten */
.kgs-cta::after {
    content: ''; position: absolute; z-index: 0; left: 50%; top: 50%;
    width: min(1150px, 96vw); height: 78%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(202,138,4,0.16) 0%, rgba(202,138,4,0.06) 45%, transparent 72%);
    filter: blur(46px); pointer-events: none;
    animation: kgsCtaHalo 9s ease-in-out infinite;
}
@keyframes kgsCtaHalo {
    0%, 100% { opacity: .75; }
    50% { opacity: 1; }
}

/* Goldener Top-Akzent (bewusste Blockkante) */
.kgs-cta-accent {
    position: absolute; top: 0; left: 0; width: 100%; height: 2px; z-index: 2;
    background: linear-gradient(90deg, transparent 5%, rgba(202,138,4,0.4) 30%, #CA8A04 50%, rgba(202,138,4,0.4) 70%, transparent 95%);
}

/* Aurora-Glows auf der hellen Fläche */
.kgs-cta-aurora { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.kgs-cta-aurora i {
    position: absolute; display: block; border-radius: 50%; filter: blur(100px);
}
.kgs-cta-aurora .a1 {
    width: 50vw; height: 50vw; max-width: 600px; max-height: 600px;
    background: rgba(202,138,4,0.05); top: -20%; left: -10%;
    animation: kgsCtaAurora1 18s infinite alternate ease-in-out;
}
.kgs-cta-aurora .a2 {
    width: 40vw; height: 40vw; max-width: 500px; max-height: 500px;
    background: rgba(202,138,4,0.04); bottom: -15%; right: -5%;
    animation: kgsCtaAurora2 22s infinite alternate ease-in-out;
}
@keyframes kgsCtaAurora1 {
    0% { transform: translate(0,0) scale(1); }
    50% { transform: translate(5%,10%) scale(1.1); }
    100% { transform: translate(-3%,-5%) scale(0.95); }
}
@keyframes kgsCtaAurora2 {
    0% { transform: translate(0,0) scale(1); }
    50% { transform: translate(-5%,6%) scale(1.08); }
    100% { transform: translate(4%,-8%) scale(0.96); }
}

/* ── Dunkle Premium-Karte ── */
.kgs-cta-card {
    position: relative; z-index: 1; overflow: hidden;
    max-width: 960px; margin: 0 auto;
    padding: clamp(52px, 6vw, 80px) 28px;
    border-radius: 34px;
    border: 1px solid rgba(202,138,4,0.20);
    background:
        radial-gradient(circle at 50% 48%, rgba(202,138,4,.14), transparent 29%),
        radial-gradient(circle at 12% 12%, rgba(202,138,4,.055), transparent 23%),
        radial-gradient(circle at 88% 88%, rgba(202,138,4,.05), transparent 24%),
        linear-gradient(145deg, #0D0A07 0%, #020202 63%, #090603 100%);
    box-shadow: 0 34px 80px rgba(0,0,0,0.16), 0 0 90px rgba(202,138,4,0.10), inset 0 1px 0 rgba(255,255,255,0.05);
}
/* Feines Gold-Raster in der Karte */
.kgs-cta-card::before {
    content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .32;
    background-image: linear-gradient(rgba(222,174,48,.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(222,174,48,.04) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 65% 72% at 50% 50%, #000 4%, transparent 76%);
    mask-image: radial-gradient(ellipse 65% 72% at 50% 50%, #000 4%, transparent 76%);
}

/* Rotierende Lebensblume + pulsierender Ring */
.kgs-cta-flower {
    position: absolute; z-index: 0; margin: 0; top: 50%; left: 50%;
    width: min(460px, 66%); height: min(460px, 66%);
    opacity: .12; transform: translate(-50%,-50%);
    filter: drop-shadow(0 0 20px rgba(202,138,4,.17));
    -webkit-mask-image: radial-gradient(circle, #000 28%, rgba(0,0,0,.7) 58%, transparent 76%);
    mask-image: radial-gradient(circle, #000 28%, rgba(0,0,0,.7) 58%, transparent 76%);
    animation: kgsCtaFlowerRotate 95s linear infinite;
    pointer-events: none;
}
.kgs-cta-flower svg { width: 100%; height: 100%; overflow: visible; }
.kgs-cta-flower::after {
    content: ''; position: absolute; inset: 18%;
    border: 1px solid rgba(229,184,59,.2); border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(202,138,4,.025), 0 0 75px rgba(202,138,4,.13), inset 0 0 45px rgba(202,138,4,.055);
    animation: kgsCtaPulse 5.2s ease-in-out infinite;
}
@keyframes kgsCtaFlowerRotate {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes kgsCtaPulse {
    0%, 100% { opacity: .55; transform: scale(0.985); }
    50% { opacity: 1; transform: scale(1.015); }
}

/* Zentraler Glutkern */
.kgs-cta-glow {
    position: absolute; top: 50%; left: 50%; width: 60%; height: 60%;
    background: radial-gradient(circle, rgba(202,138,4,0.10) 0%, transparent 70%);
    border-radius: 50%; filter: blur(60px); transform: translate(-50%,-50%);
    z-index: 0; pointer-events: none; display: block;
    animation: kgsCtaGlowBreathe 8s ease-in-out infinite;
}
@keyframes kgsCtaGlowBreathe {
    0%, 100% { opacity: .75; transform: translate(-50%,-50%) scale(0.95); }
    50% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); }
}

/* ── Inhalt ── */
.kgs-cta-shell {
    position: relative; z-index: 2; max-width: 760px; margin: 0 auto;
    padding: 0 16px;
}

/* Crown-Mark */
.kgs-cta-crown {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin: 0 auto 16px;
    border: 1px solid rgba(230,187,66,.25); border-radius: 50%;
    background: rgba(202,138,4,.045);
    box-shadow: 0 0 28px rgba(202,138,4,.09), inset 0 1px 0 rgba(255,255,255,.05);
}
.kgs-cta-crown::after {
    content: ''; position: absolute; width: 4px; height: 4px;
    background: #E8BB43; box-shadow: 0 0 13px rgba(232,187,67,.8);
    transform: rotate(45deg);
}
.kgs-cta-crown i {
    position: absolute; width: 11px; height: 11px;
    border: 1px solid rgba(240,204,99,.72); transform: rotate(45deg);
    animation: kgsCtaCrown 3.8s ease-in-out infinite;
}
@keyframes kgsCtaCrown {
    0%, 100% { transform: rotate(45deg) scale(1); opacity: 1; }
    50% { transform: rotate(225deg) scale(1.15); opacity: .75; }
}

/* Eyebrow mit Linien */
.kgs-cta-eyebrow {
    display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px;
    font-family: 'Montserrat', sans-serif; font-size: 0.68rem;
    letter-spacing: 4px; text-transform: uppercase; font-weight: 700;
    color: #D8AA2C;
}
.kgs-cta-eyebrow i {
    display: inline-block; width: 30px; height: 1.5px;
    background: linear-gradient(90deg, #CA8A04, transparent);
}
.kgs-cta-eyebrow i.r { background: linear-gradient(90deg, transparent, #CA8A04); }

/* Headline: Serif, riesig, em-Zeile im Gold-Gradient */
.kgs-cta-h2 {
    margin: 0 0 18px; font-family: 'KGSAmp', 'Cormorant Garamond', serif !important;
    font-size: clamp(2.4rem, 4.6vw, 4rem) !important; font-weight: 520 !important;
    line-height: .95 !important; letter-spacing: -.04em !important;
    color: #FAF8F2 !important; background: none;
}
.kgs-cta-h2 em {
    font-weight: 520; font-style: italic;
    background: linear-gradient(108deg, #FFF8DE 5%, #E8C45D 48%, #B56F00 82%, #F2D675);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Optionale italic Gold-Subline (z.B. Startseite) */
.kgs-cta-sub {
    font-family: 'KGSAmp', 'Cormorant Garamond', serif;
    font-style: italic; font-weight: 300; color: #D8AA2C; opacity: .85;
    font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: .5px;
    margin: -4px auto 18px; display: block;
}

/* Absatz */
.kgs-cta-p {
    max-width: 540px; margin: 0 auto 22px; color: #AAA39B;
    font-size: .9rem; line-height: 1.75;
}

/* Trust-Row */
.kgs-cta-trust {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 auto 26px;
}
.kgs-cta-trust span {
    padding: 7px 12px; border: 1px solid rgba(226,181,55,.14); border-radius: 100px;
    background: rgba(255,255,255,.025); color: #AFA89E;
    font-family: 'Montserrat', sans-serif; font-size: .58rem; font-weight: 650; letter-spacing: .05em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

/* Buttons */
.kgs-cta-actions { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
/* Primär-Button: Gold-Glasoptik – Schrift in Ruhe UND Hover klar lesbar */
.kgs-cta-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 15px;
    overflow: hidden; min-width: 240px; padding: 15px 30px;
    border: 1px solid rgba(202,138,4,.5); border-radius: 100px;
    background: rgba(202,138,4,.10);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    color: #EFC96A; text-decoration: none; cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-size: .78rem; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    box-shadow: 0 0 30px rgba(202,138,4,.10), inset 0 1px 0 rgba(255,255,255,.08);
    transition: all .5s cubic-bezier(.16,1,.3,1);
}
.kgs-cta-btn::before {
    content: ''; position: absolute; top: -80%; left: 0; width: 28%; height: 260%;
    background: linear-gradient(90deg, transparent, rgba(202,138,4,.22), transparent);
    animation: kgsCtaSweep 6s 1.5s ease-in-out infinite;
}
@keyframes kgsCtaSweep {
    0%, 100% { left: -40%; }
    30%, 50% { left: 120%; }
}
.kgs-cta-btn span, .kgs-cta-btn i { position: relative; z-index: 2; }
.kgs-cta-btn i {
    font-family: sans-serif; font-size: 1rem; font-style: normal;
    transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.kgs-cta-btn:hover {
    transform: translateY(-3px);
    background: rgba(202,138,4,.18);
    border-color: rgba(240,208,95,.85);
    color: #FFE9A8;
    text-shadow: 0 0 14px rgba(255,222,150,.35);
    box-shadow: 0 0 44px rgba(202,138,4,.22), 0 0 90px rgba(202,138,4,.08), inset 0 1px 0 rgba(255,255,255,.12);
}
.kgs-cta-btn:hover i { transform: translate(4px,-4px); }

/* Sekundär-Button (Ghost-Gold, z.B. Angebote) */
.kgs-cta-btn-ghost {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-width: 190px; padding: 15px 26px;
    border: 1px solid rgba(202,138,4,.4); border-radius: 100px;
    background: rgba(202,138,4,.06); color: #E2B94C; text-decoration: none; cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-size: .78rem; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    transition: all .5s cubic-bezier(.16,1,.3,1);
}
.kgs-cta-btn-ghost:hover {
    background: rgba(202,138,4,.14); border-color: rgba(202,138,4,.7);
    color: #F2D675; transform: translateY(-3px);
    box-shadow: 0 0 40px rgba(202,138,4,.15);
}

/* ══ Thematische Hintergrund-Motive (data-kgs-theme) ══
   Lebensblume bleibt Marken-Default; Themen-Seiten erhalten eigene Motive.
   Container .kgs-cta-flower behält Maske, Glow und Puls-Ring. */
.kgs-cta[data-kgs-theme] .kgs-cta-flower { animation: none; opacity: .19; }
.kgs-cta[data-kgs-theme] .kgs-cta-flower svg * {
    transform-box: fill-box; transform-origin: center;
}

/* Breathwork: atmende Ringe */
.kgs-cta[data-kgs-theme="breath"] .kgs-breath-ring { animation: kgsBreathRing 7.5s ease-in-out infinite; }
.kgs-cta[data-kgs-theme="breath"] .kgs-breath-ring.r2 { animation-delay: .9s; }
.kgs-cta[data-kgs-theme="breath"] .kgs-breath-ring.r3 { animation-delay: 1.8s; }
.kgs-cta[data-kgs-theme="breath"] .kgs-breath-ring.r4 { animation-delay: 2.7s; }
@keyframes kgsBreathRing {
    0%, 100% { transform: scale(.9); opacity: .25; }
    45% { transform: scale(1.08); opacity: .75; }
    60% { transform: scale(1.08); opacity: .7; }
}

/* Ernährung: Nährstoff-Orbits */
.kgs-cta[data-kgs-theme="orbits"] .kgs-orbit-g { animation: kgsOrbitSpin 46s linear infinite; }
.kgs-cta[data-kgs-theme="orbits"] .kgs-orbit-g.o2 { animation-duration: 64s; animation-direction: reverse; }
.kgs-cta[data-kgs-theme="orbits"] .kgs-orbit-g.o3 { animation-duration: 84s; }
.kgs-cta[data-kgs-theme="orbits"] .kgs-orbit-dot { animation: kgsOrbitDot 4s ease-in-out infinite; }
@keyframes kgsOrbitSpin { to { transform: rotate(360deg); } }
@keyframes kgsOrbitDot {
    0%, 100% { opacity: .4; }
    50% { opacity: 1; }
}

/* Gruppentraining: kreisende Gruppe */
.kgs-cta[data-kgs-theme="group"] .kgs-group-ring { animation: kgsOrbitSpin 70s linear infinite; }
.kgs-cta[data-kgs-theme="group"] .kgs-group-c { animation: kgsGroupPulse 5.4s ease-in-out infinite; }
.kgs-cta[data-kgs-theme="group"] .kgs-group-c.c2 { animation-delay: .7s; }
.kgs-cta[data-kgs-theme="group"] .kgs-group-c.c3 { animation-delay: 1.4s; }
.kgs-cta[data-kgs-theme="group"] .kgs-group-c.c4 { animation-delay: 2.1s; }
.kgs-cta[data-kgs-theme="group"] .kgs-group-c.c5 { animation-delay: 2.8s; }
@keyframes kgsGroupPulse {
    0%, 100% { opacity: .3; }
    50% { opacity: .85; }
}

/* Auslandscoaching: Kompass & Meridiane */
.kgs-cta[data-kgs-theme="compass"] .kgs-compass-dash { animation: kgsOrbitSpin 60s linear infinite reverse; }
.kgs-cta[data-kgs-theme="compass"] .kgs-compass-merid { animation: kgsOrbitSpin 90s linear infinite; }
.kgs-cta[data-kgs-theme="compass"] .kgs-compass-needle { animation: kgsCompassNeedle 9s ease-in-out infinite; }
@keyframes kgsCompassNeedle {
    0%, 100% { transform: rotate(-14deg); }
    50% { transform: rotate(16deg); }
}

/* Online-Coaching: Signal-Bögen */
.kgs-cta[data-kgs-theme="signal"] .kgs-signal-arc { animation: kgsSignalArc 4.8s ease-in-out infinite; }
.kgs-cta[data-kgs-theme="signal"] .kgs-signal-arc.s2 { animation-delay: .5s; }
.kgs-cta[data-kgs-theme="signal"] .kgs-signal-arc.s3 { animation-delay: 1s; }
.kgs-cta[data-kgs-theme="signal"] .kgs-signal-arc.s4 { animation-delay: 1.5s; }
.kgs-cta[data-kgs-theme="signal"] .kgs-signal-core { animation: kgsSignalCore 4.8s ease-in-out infinite; }
@keyframes kgsSignalArc {
    0%, 100% { opacity: .18; }
    35% { opacity: .85; }
    55% { opacity: .6; }
}
@keyframes kgsSignalCore {
    0%, 100% { opacity: .5; transform: scale(.9); }
    35% { opacity: 1; transform: scale(1.15); }
}

/* Firmenfitness: Team-Netzwerk */
.kgs-cta[data-kgs-theme="network"] .kgs-net-g { animation: kgsOrbitSpin 110s linear infinite; }
.kgs-cta[data-kgs-theme="network"] .kgs-net-node { animation: kgsGroupPulse 4.6s ease-in-out infinite; }
.kgs-cta[data-kgs-theme="network"] .kgs-net-node.n2 { animation-delay: .6s; }
.kgs-cta[data-kgs-theme="network"] .kgs-net-node.n3 { animation-delay: 1.2s; }
.kgs-cta[data-kgs-theme="network"] .kgs-net-node.n4 { animation-delay: 1.8s; }
.kgs-cta[data-kgs-theme="network"] .kgs-net-node.n5 { animation-delay: 2.4s; }
.kgs-cta[data-kgs-theme="network"] .kgs-net-node.n6 { animation-delay: 3s; }

/* ── 3D-Tilt der Karte (Desktop, Maus) ── */
@media (hover: hover) and (pointer: fine) {
    .kgs-cta { perspective: 1400px; }
    .kgs-cta-card {
        transform-style: preserve-3d;
        transition: transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s ease;
        will-change: transform;
    }
    .kgs-cta-card.kgs-tilting { transition: box-shadow .7s ease; }
}

/* ── Gestaffelte Blur-Reveals ── */
.kgs-cta .kgs-reveal {
    opacity: 0; filter: blur(8px); transform: translateY(30px);
    /* Vorher 1,2s je Eigenschaft. Zusammen mit der Staffelung bis .76s
       brauchte der letzte Eintrag knapp zwei Sekunden bis zur Ruhe. */
    transition: opacity .55s cubic-bezier(.16,1,.3,1), filter .55s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
    will-change: transform, opacity;
}
.kgs-cta.is-visible .kgs-reveal { opacity: 1; filter: blur(0); transform: translateY(0); }
.kgs-cta.is-visible .kgs-d1 { transition-delay: .05s; }
.kgs-cta.is-visible .kgs-d2 { transition-delay: .12s; }
.kgs-cta.is-visible .kgs-d3 { transition-delay: .2s; }
.kgs-cta.is-visible .kgs-d4 { transition-delay: .28s; }
.kgs-cta.is-visible .kgs-d5 { transition-delay: .36s; }
.kgs-cta.is-visible .kgs-d6 { transition-delay: .44s; }

/* ── Mobile ── */
@media (max-width: 768px) {
    .kgs-cta { padding: 44px 16px; }
    .kgs-cta-card { padding: 46px 18px; border-radius: 26px; }
    .kgs-cta-shell { padding: 0 4px; }
    .kgs-cta-h2 { font-size: clamp(2rem, 9.5vw, 2.9rem) !important; }
    .kgs-cta-p { font-size: .86rem; }
    .kgs-cta-flower { width: 140%; height: 140%; }
    .kgs-cta-eyebrow { font-size: .6rem; letter-spacing: 3px; margin-bottom: 20px; }
    .kgs-cta-eyebrow i { width: 20px; }
    .kgs-cta-btn { min-width: 0; width: 100%; max-width: 320px; padding: 14px 24px; }
    .kgs-cta-btn-ghost { min-width: 0; width: 100%; max-width: 340px; }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .kgs-cta::after, .kgs-cta-aurora i, .kgs-cta-flower, .kgs-cta-flower::after, .kgs-cta-glow,
    .kgs-cta-crown i, .kgs-cta-btn::before,
    .kgs-cta-flower svg * { animation: none !important; }
    .kgs-cta .kgs-reveal { opacity: 1; filter: none; transform: none; transition: none; }
}