/* 8 Spalten */
div.card-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* Acht gleichmäßige Spalten */
  gap: 20px;
  padding: 20px;
}

/* Zwischenraum löschen und Hochheben der Kacheln unterbinden */
/* Setzt den Hintergrund der gesamten Sektion auf Weiß */
.wks-course-list {
  padding-bottom: 0 !important; /* Entfernt unteren Innenabstand */
}

/* Entfernt Abstand unter dem Tab-Container */
.top-container {
  margin-bottom: 0 !important;
}

/* Entfernt Abstand im Tab-Bereich */
.filter-tabs {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Entfernt Abstand oberhalb der Karten */
.card-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

div.card:hover {
  transform: none !important; /* Kein Effekt bei Hover */
  box-shadow: none !important; /* Falls ein Schatteneffekt beim Hover vorhanden ist */
}


/* Überschrift links bündig */
.text-content h2 {
  text-align: left;
}

/* Tab Farben*/
/* Grundlegendes Styling der Tabs */
/* Grundlegendes Styling für die Tabs ohne Hintergrund und ohne Rahmen */
/* Entfernt den Hintergrund von .filter-tabs */
.filter-tabs {
  background-color: transparent !important; /* Transparenter Hintergrund für den Container */
  border: none !important; /* Falls ein Rahmen vorhanden ist, diesen ebenfalls entfernen */
  padding: 10px 0;
}

/* Tabs ohne Hintergrund und Rahmen */
.filter-tabs .tab {
  background-color: transparent !important; /* Transparenter Hintergrund für Tabs */
  border: none !important; /* Kein Rahmen für Tabs */
  color: #333;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.8rem;
  text-align: center;
}

/* Nur der aktive Tab mit weißem Hintergrund */
.filter-tabs .tab.active {
  background-color: white !important;
  color: #333 !important;
}

/* Hintergrund des Tab Container transparent */
.filter-tabs {
  background-color: transparent !important; /* Transparent */
  border: none; /* Kein Rahmen */
  padding: 10px 0;
}

/*Kartenstyling*/
/* Styling für alle Tabs */
.filter-tabs .tab {
  background-color: transparent !important; /* Transparent für inaktive Tabs */
  border: none !important; /* Kein Rahmen */
  color: #333; /* Dunkle Textfarbe */
  padding: 8px 12px;
  cursor: pointer;
  text-align: left !important; /* Text linksbündig */
  font-size: 10pt !important; /* Schriftgröße auf 10 Punkte setzen */
  font-weight: 300 !important; /* Leichte Schriftstärke */
}

/* Nur der aktive Tab mit weißem Hintergrund */
.filter-tabs .tab.active {
  background-color: white !important; /* Weißer Hintergrund für aktiven Tab */
  color: #333;
}

/* Weißer Hintergrund für den gesamten Kartenbereich */
.card-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Vier Spalten */
  gap: 20px; /* Abstand zwischen den Karten */
  padding: 20px;
  background-color: white; /* Weißer Hintergrund für den gesamten Kartenbereich */
}

/* Einzelne Karten im Container */
.card-container {
  background-color: white; /* Weißer Hintergrund für den gesamten Kartenbereich */
}

.card {
  background-color: white; /* Weißer Hintergrund für jede Karte */
  padding: 16px;
  border: none !important; /* Entfernt jeglichen Rahmen */
  border-radius: 0 !important; /* Stellt sicher, dass keine Ecken abgerundet sind */
  box-shadow: none !important; /* Entfernt jeglichen Schatten */
  text-align: left;
}


.card img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.card h3 {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
}

.card p {
  font-size: 18px;
  color: #555;
  margin-bottom: 15px;
}

/* .card a {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.card a:hover {
  text-decoration: underline;
  color: #333;
} */
/*Schrift für Tabs*/
.card-container .card {
  text-align: left !important; /* Links ausgerichteter Text */
  font-size: 18px !important; /* Schriftgröße auf 18px setzen */
  font-family: "Frutiger", Arial, sans-serif !important; /* Schriftart auf Frutiger oder Arial setzen */
        display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
/* .card-container .card a { margin-top:auto;} */
.card-container .card h3 {
  text-align: left !important; /* Links ausgerichteter Text */
  font-size: 18px !important; /* Schriftgröße auf 18px setzen */
  font-family: "Frutiger", Arial, sans-serif !important; /* Schriftart auf Frutiger oder Arial setzen */
  font-weight: 600 !important; /* Fette Schriftstärke für den Titel */
    min-height:88px;
}

{# .card-container .card p {
    
  text-align: left !important; /* Links ausgerichteter Text */
  font-size: 18px !important; /* Schriftgröße auf 18px setzen */
  font-family: "Frutiger", Arial, sans-serif !important; /* Schriftart auf Frutiger oder Arial setzen */
    
}

.card-container .card a {
  text-align: left !important; /* Links ausgerichteter Text */
  font-size: 18px !important; /* Schriftgröße auf 18px setzen */
  font-family: "Frutiger", Arial, sans-serif !important; /* Schriftart auf Frutiger oder Arial setzen */
  color: #333;
} #}




@media(max-width:1024px){
    .card-container .card h3 { min-height:44px;}

}

@media(max-width:768px){
    .card-container .card h3 { min-height:auto;}

}