@tailwind base;
@tailwind components;
@tailwind utilities;

.py-30 {
  padding-top: 7rem;
  padding-bottom: 2rem;

}

.hidden {
  display: none;
}

#offcanvas-menu > div {
  max-height: 100vh;
  overflow-y: auto;
}

/* Formatierung für den News-Content mit HTML-Tags */
.news-content {
  max-height: 6rem; /* ca. 4 Zeilen Text */
  overflow: hidden;
}

.news-content p {
  margin: 0;
  padding: 0;
}

.news-content p + p {
  margin-top: 0.25rem;
}

.news-content br {
  display: none;
}

.news-content * {
  display: inline;
}

.news-block {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

/* Einheitliche Höhe für Team-Bilder */
.team-image {
  height: 500px; /* Feste Höhe für die Bilder */
  object-fit: cover; /* Zuschneiden des Bildes, um die Höhe zu füllen */
  width: 100%; /* Volle Breite beibehalten */
  border-radius: 8px; /* Abgerundete Ecken */
}

/* Zuschneiden der Bilder auf das Format 851x315px */
.aspect-w-851 {
  position: relative;
  width: 100%;
  padding-top: calc(315 / 851 * 100%); /* Verhältnis 315:851 */
}

.aspect-h-315 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Zuschneiden des Bildes */
}