/* Container für die Monster */
.hits-alter {
    display: flex;
    flex-wrap: wrap;       /* Erlaubt das Umbrechen in die nächste Zeile */
    justify-content: center; /* Zentriert die Monster horizontal */
    gap: 20px;             /* Abstand zwischen den Monsterchen */
    margin: 60px 0 40px 0;
}
#hits > h1 { font-weight:bold; }

/* Einzelnes Monster-Element */
.hits-alter > div {
    flex: 0 1 230px;       /* Nicht wachsen, aber schrumpfen, Basis 230px */
    max-width: 230px;      /* Deine gewünschte maximale Breite */
    
}

/* Bilder innerhalb der Divs */
.hits-alter img {
    width: 100%;           /* Bild passt sich dem Div an */
    height: auto;
    display: block;
}

/* Mobile Anpassung: 2 Monster nebeneinander */
@media (max-width: 600px) {
    .hits-alter > div {
        flex: 0 1 calc(50% - 20px); /* Nimmt etwa die Hälfte der Breite ein */
        max-width: 50%;       
    }
    .hits-alter {  gap: 0px !important; }
    
}
.hits-alter > div:hover {
	transform: translateY(-2px);
	cursor: pointer;
}

/* Container für die Infos */
.hits-info {
    display: none; /* Startet versteckt */
    margin: 40px auto;
    max-width: 700px; /* An die Breite der hits-intro angepasst */
    padding: 0 20px;
}

/* Die einzelnen Inhalts-Boxen (Kurstypen) */
.hits-info > div {    
    margin: 20px auto;
    border: 5px dotted #95bad570; /* Das typische Design der Hauptseite */
    padding: 25px;
    text-align: left;
    background-color: #fff;
    position: relative;
    border-radius: 10px;
}

/* Überschriften im Info-Kasten */
.hits-info h3 {
    color: #8296bb;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left;
}

/* Preis und Datum hervorheben */
.hits-info .preis { margin-bottom:0; }
.hits-info .preis, 
.hits-info .datum {
    font-weight: bold;
    color: #555;
    margin-top: 10px;
    margin-bottom:5px;
    text-align: left;
}
.hits-info .standort { color:#959595; font-size:1rem; font-weight:normal; }

/* Der "mehr" Button / Badge */
.hits-info .buchen {
    position: absolute;
    right: 15px;
    bottom: 15px;
    color: #81a6c1;
    background-color: #f0f9ff;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}
.ws-info {
    background-color: #efefef;
    padding: 15px 20px;
    margin-bottom: 30px;
}
.ws-info p, .ws-info h3 { margin:0; }
.ws-info h3 { margin-bottom:5px; }
span.close { right:27px; top:15px; }
.backhome { padding-top:30px; }
.hits-info>div:hover  {
	background-color: #fbfdff;
	cursor: pointer;
}