/* ═══════════════════════════════════════════════════════════
   StuKu Gefell – Homepage Styles
   ═══════════════════════════════════════════════════════════ */

/* ── Hero Slider ─────────────────────────────────────────── */
.hero-carousel { position: relative; }
.hero-slide {
    height: 580px;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.hero-slide::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(10,30,55,.55) 0%, rgba(10,30,55,.75) 100%);
    z-index: 1;
}
.hero-bg {
    position: absolute; inset: 0;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 8s ease;
}
.carousel-item.active .hero-bg { transform: scale(1.05); }
.hero-content {
    position: relative; z-index: 2;
    text-align: center; color: #fff;
    padding: 1rem; max-width: 700px;
}
.hero-content .slide-label {
    font-size: .75rem; letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--stuku-accent);
    font-weight: 700; display: block; margin-bottom: .6rem;
}
.hero-content h1 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,.3); }
.hero-content p  { font-size: 1.05rem; color: rgba(255,255,255,.88); margin: .8rem 0 1.5rem; }
.carousel-control-prev, .carousel-control-next { width: 5%; }
.carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.6); border: 0; }
.carousel-indicators .active { background: var(--stuku-accent); }

/* ── Highlight Box ───────────────────────────────────────── */
.highlight-box {
    background: var(--stuku-primary); color: #fff;
    border-radius: 1rem; overflow: hidden;
    margin-top: -60px; position: relative; z-index: 10;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
}
.highlight-box .highlight-badge {
    background: var(--stuku-accent);
    font-size: .72rem; letter-spacing: 1.5px;
    text-transform: uppercase; font-weight: 700;
    padding: .2rem .7rem; border-radius: 2rem;
}

/* ── Activity Cards ──────────────────────────────────────── */
.activity-card {
    border: none; border-radius: 1rem; overflow: hidden;
    transition: transform .25s, box-shadow .25s;
    box-shadow: 0 2px 16px rgba(0,0,0,.07); height: 100%;
}
.activity-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,.13); }
.activity-card .card-icon {
    width: 56px; height: 56px;
    background: rgba(26,58,92,.08); border-radius: .75rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: var(--stuku-primary); margin-bottom: 1rem;
}

/* ── Stats ───────────────────────────────────────────────── */
.stats-section { background: var(--stuku-primary); color: #fff; }
.stat-item .stat-number { font-size: 3rem; font-weight: 800; color: var(--stuku-accent); line-height: 1; }
.stat-item .stat-label  { font-size: .9rem; color: rgba(255,255,255,.75); margin-top: .3rem; }

/* ── About ───────────────────────────────────────────────── */
.about-img-wrap { position: relative; }
.about-img-badge {
    position: absolute; bottom: -20px; right: -20px;
    background: var(--stuku-accent); color: #fff;
    border-radius: .75rem; padding: 1rem 1.25rem;
    text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.about-img-badge .ab-num { font-size: 2rem; font-weight: 800; line-height: 1; }
.about-img-badge .ab-txt { font-size: .7rem; letter-spacing: 1px; text-transform: uppercase; }

/* ── Gallery ─────────────────────────────────────────────── */
.gallery-thumb {
    height: 200px; object-fit: cover;
    border-radius: .6rem; width: 100%;
    transition: opacity .2s, transform .2s;
}
.gallery-thumb:hover { opacity: .88; transform: scale(1.02); }

/* ── CTA ─────────────────────────────────────────────────── */
.cta-section {
    background: linear-gradient(135deg, var(--stuku-primary) 0%, #2d5f8a 100%);
    color: #fff; position: relative; overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute; top: -60px; right: -60px;
    width: 300px; height: 300px; border-radius: 50%;
    background: rgba(200,168,75,.12);
}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width: 767px) {
    .hero-slide { height: 420px; }
    .highlight-box { margin-top: -30px; }
    .about-img-badge { display: none; }
}