body {
  overflow-y: scroll;
  background-color: #f7f5fb;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  background: #c7cbd1;
  border-radius: 1em;
  border: 0;
  border-bottom-color: : #eaff00;
  border-bottom: 1px
}


.rechtsbuendig {
  text-align: right;
}

.linksbuendig {
  text-align: left;
}

.mittig {
  text-align: center;
}

.stand {
  color: #5c626b;
}

.footer  {
  border-top-color: : #eaff00;
  background: #c7cbd1;
  border-width: 1px;
  border-style: solid;
  border-radius: 1em;
  border: 0;
  border-top: 1px;
}

footer {
  border-radius: 1em;
}

.mittig {
    text-align: center;
}

.jumbotron {
    border-radius: 3em;
}




.card-img-bottom rounded {
height: max 30px;
width: max 30px;
}

/*Hier fängt CSS für die News auf Index.html an. */
div.news {
  border: 2px solid #c7cbd1;
  border-radius: 5px;
  margin-top: 40px;
}

div.news:hover {
  border: 2px solid #eaff00;
}

a:link {
  color: #c7cbd1;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: #c7cbd1;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: #eaff00;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: #eaff00;
  background-color: transparent;
  text-decoration: underline;
}

/*Hiermit, also dem Folgenden wird das Audio zentriert dargestellt. */

.audio-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*Hier endet CSS für die News auf Index.html an. */


/* Hier fängt das CSS für das Masonry-Layout für Work an. */

.masonry {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Spalten für PC */
    gap: 16px; /* Abstand zwischen den Kacheln */
    padding: 16px;
}



.item {
    background-color: #f0f5fc; /* Hellgraue Hintergrundfarbe */
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: auto; /* Höhe der Kacheln */
    border: 2px solid #c7cbd1;
    /* flex-wrap: wrap; */
}

.item:hover {
  border: 2px solid #eaff00;
}

.item h5 {
    margin: 0;
    padding: 16px;
    background-color: #f0f5fc;
    text-align: center;
    flex: 0 0 25%; /* Platz für die Überschrift (25% der Höhe) */
    /* display: flex; */ /* Ich habe das hier herausgenommen, da der Text sonst in drei Spalten unterteilt wurde. */
    justify-content: center; /* Vertikale Zentrierung */
    align-items: center; /* Horizontale Zentrierung */
    hyphens: auto; /* Automatische Silbentrennung */
    word-break: normal; /* Wörter an Zeilenenden umbrechen */
}

.item img {
    width: 100%;
    height: auto; /* Bild wird proportional skaliert */
    object-fit: cover; /* Bild wird vollständig angezeigt */
}

/* Responsive Design */
@media (max-width: 1024px) { /* Tablet */
    .masonry {
        grid-template-columns: repeat(3, 1fr); /* 3 Spalten für Tablets */
    }
}

@media (max-width: 768px) { /* Handy */
    .masonry {
        grid-template-columns: 1fr; /* 1 Spalte für Handys */
    }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* Hier endet das CSS für das Masonry-Layout für Work an. */

/*Farbeinstellungen und Einstellungen für die Tabellen für about.html.*/
.dunkelgrau {
  color: #5c626b;
}

td{
  text-align: left;
  vertical-align: top;
  padding-right: 0.5rem;
}