/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.header {
    background-color: #D50032;
    color: white;
    text-align: center;
    padding: 0.5rem 0;
}

.header h1 {
    margin: 0;
    font-size: 2.5rem;
}

.header-content {
    display: flex;
    align-items: center; /* Vertikale Ausrichtung */
    justify-content: center; /* Zentriert alles horizontal */
    gap: 10rem; /* Abstand zwischen Logo und Text */
    flex-wrap: wrap; /* Logo und Text umbrechen, wenn Platz knapp ist */
}

.header-logo {
    height: 80px; /* Größe des Logos */
    width: auto; /* Verhältnis beibehalten */
}

.header p {
    margin: 0.5rem 0 0;
    font-size: 1rem;
}

/* Navbar */
.navbar {
    background-color: #141517;
    padding: 0.5rem 0;
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.navbar ul li {
    margin: 0 1rem;
}

.navbar ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.navbar ul li a:hover {
    text-decoration: underline;
}

.blue-right {
    color: blue;
    text-align: right;
	font-weight: bold;
  }
  
.image-right {
  display: block;
  margin-left: auto;
  margin-right: 0;
}  
  
/* Main Content */
.main-content {
    padding: 2rem 0;
}

.section {
    margin-bottom: 2rem;
}

.section h2 {
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

details summary {
    cursor: pointer;
    font-weight: bold;
}

details p {
    margin-top: 0.5rem;
    padding-left: 1rem;
}

/* Form */
form {
    background-color: #f9f9f9;
    padding: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}

form label {
    display: block;
    margin: 0.5rem 0 0.25rem;
    font-weight: bold;
}

form input, form textarea, form button {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}

form button {
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

form button:hover {
    background-color: #0056b3;
}

/* Footer */
.footer {
    background-color: #f4f4f4;
    text-align: center;
    padding: 1rem 0;
    border-top: 1px solid #ddd;
}

.footer p {
    margin: 0;
    color: #555;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei Spalten mit gleicher Breite */
    gap: 20px; /* Abstand zwischen den Spalten */
  }

  .two-columns {
    display: flex;
  }
  .column {
    flex: 1;
    padding: 10px;
  }

    table {
      width: 100%; /* Tabelle nimmt die gesamte Breite ein */
      border-collapse: collapse; /* Entfernt doppelte Linien */
    }

    th, td {
      border: 1px solid #ddd; /* Rahmen für die Zellen */
      padding: 10px; /* Innenabstand */
      text-align: left; /* Text linksbündig */
    }

    /* Spaltenbreiten anpassen */
    .col-1 {
      width: 33%; /* Erste Spalte: 1/3 */
      color: blue; /* Textfarbe blau */
    }

    .col-2 {
      width: 67%; /* Zweite Spalte: 2/3 */
    }

    /* Optional: Tabelle hervorheben */
    table tr:nth-child(even) {
      background-color: #f9f9f9; /* Alternierende Zeilenfarbe */
    }

    table tr:hover {
      background-color: #f1f1f1; /* Highlight beim Hover */
    }

    img {
      max-width: 100%; /* Bilder passen sich der Zelle an */
      height: auto; /* Proportionen bleiben erhalten */
    }

/* Responsive Design */
@media (max-width: 768px) {
    .navbar ul {
        flex-direction: column;
        text-align: center;
    }

    .navbar ul li {
        margin: 0.5rem 0;
    }
}