/* =================================================
SPORTART HEADER
================================================= */

.sportart-header{
    text-align:center;
    margin-bottom:50px;
}


/* =================================================
SPORTART LOGO
================================================= */

.sportart-logo {
    width: 90px;
    height: 90px;
    margin: 20px auto 12px;

    border-radius: 50%;
    overflow: hidden;

    border: 5px solid #d9dce0;
}

.sportart-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =================================================
 SPORT EVENTS + BÖRSE BOXEN
 ================================================= */

.events-section{
max-width:1300px;
margin:30px auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}

/* Mobil */
@media (max-width:700px){
.events-section{
grid-template-columns:1fr;
}
}

.event-box{
background:#ffffff;
padding:25px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
transition:all .2s ease;
}

.event-box:hover{
box-shadow:0 8px 24px rgba(0,0,0,0.12);
}

/* Überschrift */
.event-title{
font-size:18px;
font-weight:700;
margin-bottom:15px;
text-decoration:underline;
}

/* Logo + Infos */
.event-header{
display:flex;
gap:16px;
align-items:flex-start;
}

/* Logo */
.event-logo{
flex:0 0 60px;
}

.event-logo img{
width:60px;
height:60px;
border-radius:50%;
object-fit:cover;
display:block;
}

/* Textbereich */
.event-text{
flex:1;
}

/* Datum */
.event-date{
font-size:14px;
color:#666;
margin-bottom:6px;
}

/* Titel EVENTS */
.event-headline{
font-weight:600;
}

/* Titel BÖRSE */
.event-headline-boerse{
font-weight:300;
}

/* Button */
.event-button{
margin-top:18px;
}

/* Mobil */
@media (max-width:700px){
.events-section{
grid-template-columns:1fr;
}
}


/* =================================================
SPORTVEREINE GRID
================================================= */

.vereine-container{
max-width:1300px;
margin:40px auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

/* Tablet */
@media (max-width:900px){
.vereine-container{
grid-template-columns:repeat(2,1fr);
}
}

/* Mobil */
@media (max-width:600px){
.vereine-container{
grid-template-columns:1fr;
}
}


/* =================================================
LAYOUT VEREINSAUSGABE
================================================= */

.verein-grid{
display:grid;
grid-template-columns:repeat(3, 360px);
gap:30px;

max-width:1300px;
margin:40px auto;
justify-content:center;
}

.verein-box{
width:360px;
box-sizing:border-box;

background:#fff;
padding:25px;
border-radius:14px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
transition:all .25s ease;
text-align:center;
}

.verein-box:hover{
transform:translateY(-5px);
box-shadow:0 10px 22px rgba(0,0,0,0.15);
}

/* Links in Karten */
.verein-box a{
color:#000;
text-decoration:underline;
}

.verein-box a:hover{
text-decoration:underline;
}

.verein-logo{
margin-bottom:10px;
}

.verein-logo img{
max-height:60px;
max-width:100%;
object-fit:contain;
}

.vereinsname-link{
display:block;
font-size:18px;
margin:10px 0;
font-weight:bold;
}

.verein-adresse{
font-size:15px;
line-height:1.5;
color:#333;
}

.verein-sportangebote{
margin-top:10px;
font-size:15px;
color:#088A29;
}

.reset-link{
color:#000;
text-decoration:underline;
}

.reset-link:hover{
color:#000;
text-decoration:underline;
}


/* Tablet */
@media (max-width:1100px){

.verein-grid{
grid-template-columns:repeat(2,360px);
}

}

/* Mobil */
@media (max-width:750px){

.verein-grid{
grid-template-columns:360px;
}

}


/* =================================================
LAYOUT FILTER ETC.
================================================= */
.aktive-filter{
margin:20px auto 30px auto;
text-align:center;
font-size:16px;
}

.filter-label{
margin-right:10px;
font-weight:bold;
}

.filter-badge{
display:inline-block;
background:#e8f4ec;
color:#000;
padding:6px 12px;
margin:4px;
border-radius:20px;
text-decoration:none;
font-size:14px;
transition:.2s;
}

.filter-badge:hover{
background:#d3ebdb;
}


/* =================================================
FEHLERMELDUNG KEIN SPORTVEREIN MIT DIESER SPORTART
================================================= */
.no-results-box{
  display: block;

  max-width: 800px;
  width: fit-content;

  margin: 50px auto;

  padding: 20px 25px;

  text-align: center;
  font-size: 18px;

  color: #b30000;
  background: #fff5f5;
  border: 1px solid #f2c2c2;
  border-radius: 12px;

  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}