/* =================================================
BASE: LINK + CARD
================================================= */

.card-link{
    display:flex;
    height:100%;
    text-decoration:none;
    color:inherit;
}

.card{
    background:#fff;
    border-radius:14px;
    padding:20px 25px 25px;
    position:relative;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
    transition:all 0.25s ease;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    width:100%;
    height:100%;
}

/* =================================================
TYPO
================================================= */

.card-title{
    font-size:18px;
    font-weight:bold;
    margin:8px 0 4px;
    color:#333;
}

.headline{
    display:block;
    font-weight:bold;
    color:#666;
    margin-top:5px;
    text-decoration:underline;
}

.card-value{
    font-size:25px;
    font-weight:bold;
    color:#1d6ed8;
    margin-bottom:4px;
}

.card-meta{
    color:#666;
    line-height:1.2;
}

.card-meta span{
    display:block;
}

.card--center{
    text-align:center;
}

/* =================================================
CARD EFFECTS
================================================= */

.card--hover:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 28px rgba(0,0,0,0.12);
}

.card--glow::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, rgba(200,230,255,0.18), rgba(230,245,255,0.18));
    opacity:0;
    transition:opacity 0.3s ease;
    z-index:0;
}

.card--glow:hover::after{ opacity:1; }

.card--glow > *{
    position:relative;
    z-index:1;
}

/* =================================================
GRID (Haupt)
================================================= */

.card-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    max-width:1300px;
    margin:0 auto;
    align-items:stretch;
}

.card-grid a{
    display:block;
    height:100%;
    text-decoration:none;
    color:inherit;
}

/* =================================================
GRID 2 SPALTEN
================================================= */

.card-grid-2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.card-grid-2 a{
    display:block;
    height:100%;
    text-decoration:none;
    color:inherit;
}

/* =================================================
RESPONSIVE
================================================= */

@media (max-width:1400px){
    .card-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:600px){
    .card-grid,
    .card-grid-2{
        grid-template-columns:1fr;
    }
}

/* =================================================
CARD VARIANT: FÖRDERUNG
================================================= */

.card--foerder{
    max-width:100%;
    margin:0 auto;
    overflow:visible;
}

.card--foerder.card--hover:hover{
    transform:translateY(-5px);
}

.foerder-badge{
    position:absolute;
    top:12px;
    left:15px;
    background:#083b7f;
    color:#fff;
    font-size:12px;
    font-weight:bold;
    padding:5px 10px;
    border-radius:999px;
    z-index:2;
}

.card--foerder .foerder-image{
    margin:15px auto 0;
    width:200px;
    height:120px;
    overflow:hidden;
    border-radius:12px;
    position:relative;
}

.card--foerder .foerder-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:all 0.4s ease;
}

.card--foerder:hover .foerder-image img{
    transform:scale(1.15);
}

.foerder-link{
    display:block;
    text-decoration:none;
    color:inherit;
}

/* =================================================
BADGES
================================================= */

.angebot-label-ddv,
.angebot-label-aff{
    position:absolute;
    top:12px;
    left:15px;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:bold;
    z-index:2;
}

.angebot-label-ddv{ background:#55b871; color:#fff; }
.angebot-label-aff{ background:#083b7f; color:#fff; }

@media (max-width:768px){
    .angebot-label-ddv,
    .angebot-label-aff{
        position:static !important;
        margin-bottom:10px;
    }
}

/* =================================================
SPORTARTEN
================================================= */

.sportarten-section{ margin-top:150px; }

.section-title{
    font-size:25px;
    font-weight:bold;
    text-decoration:underline;
    text-align:center;
    color:#1d6ed8;
}

.grid-wrapper{
    max-width:1300px;
    margin:auto;
    padding:0 20px;
}

.grid-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:30px;
}

.grid-card{
    background:#fff;
    border-radius:12px;
    box-shadow:0 4px 10px rgba(0,0,0,0.08);
    padding:28px 20px;
    text-align:center;
    color:#222;
    display:block;
    transition:.18s;
    text-decoration: none;
}

.grid-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 18px rgba(0,0,0,0.10);
}

.grid-card-icon{
    width:60px;
    height:60px;
    margin:0 auto 12px;
    border-radius:50%;
    background:#f1f4f9;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.grid-card-title{ font-size:20px; font-weight:bold; }
.grid-card-sub{ font-size:15px; color:#666; }

.no-results{
    text-align:center;
    width:100%;
}

/* responsive sportarten */

@media (max-width:1024px){
    .grid-cards{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
    }
}

@media (max-width:700px){
    .grid-cards{ grid-template-columns:1fr; }
    .sportarten-section{ display:none; }
}

/* =================================================
SCROLL BUTTON
================================================= */

#scrollTopBtn{
    position:fixed;
    bottom:30px;
    right:30px;
    width:55px;
    height:55px;
    border-radius:50%;
    background:#083b7f;
    color:#fff;
    font-size:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:999;
}

#scrollTopBtn:hover{
    background:#e0e0e0;
    transform:translateY(-3px);
}