/* Basis-Styles */
body {
font-family: Tahoma, sans-serif;
margin: 0;
padding: 0;
background-color: black;
color: white;
}

a {
color: lightblue;
}

header {
color: #000000;
padding: 0px;
text-align: center;
}

nav {
padding: 10px;
text-align: center;
color: #FFC600;
margin: 0 10px;
text-decoration: none;
font-size: 16px;
font-family: Tahoma, sans-serif;
text-transform: uppercase;
}

nav a {
color: white;
margin: 0 10px;
text-decoration: none;
font-size: 16px;
font-family: Tahoma, sans-serif;
text-transform: uppercase;
hyphens: none;
white-space: nowrap; 
}

.container {
max-width: 1024px;
margin: 0 auto;
padding: 0px;
}

.active-menu {
color: #FFC600;
margin: 0 10px;
text-decoration: none;
font-size: 16px;
font-family: Tahoma, sans-serif;
text-transform: uppercase;
hyphens: none;
white-space: nowrap; 
}

.content-header {
  color: #FFC600;
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
}

.content-text {
  color: white;
  margin-top: 20px;
  font-size: 14px;
}

/* Tabelle für Desktop */
.triathen-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 14px;
text-align: left;
}

.triathen-table th, .triathen-table td {
border: 1px solid white;
padding: 4px;
}

.triathen-table th {
background-color: lightgray;
color: black;
}

/* Responsive Tabelle */
@media (max-width: 768px) {
.triathen-table {
font-size: 12px;
}
}

@media (max-width: 480px) {
.triathen-table {
display: block;
width: 100%;
overflow-x: auto;
}

.triathen-table th, .triathen-table td {
padding: 10px;
}
}

/* Bilder-Styles */
.image-gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 0px;
}

.image-gallery img {
max-width: 100%;
height: auto;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

<!--
.image-gallery div {
flex: 1 1 calc(33.333% - 20px); /* Bilder nehmen 1/3 Breite auf großen Bildschirmen ein */
max-width: calc(33.333% - 20px);
}
-->

@media (max-width: 768px) {
.image-gallery div {
flex: 1 1 calc(50% - 20px); /* Bilder nehmen 1/2 Breite auf Tablets ein */
max-width: calc(50% - 20px);
}
}

@media (max-width: 480px) {
.image-gallery div {
flex: 1 1 100%; /* Bilder nehmen gesamte Breite auf kleinen Bildschirmen ein */
max-width: 100%;
}
}

footer {
text-align: right;
background-color: #000000;
color: white;
padding: 10px 0;
margin-top: 20px;
font-size: 12px;
}