/* Basisstil für die gesamte Seite */
body {
  margin: 0; /* Entfernt Standard-Margen für das Body-Element */
  font-family: "Inter", sans-serif; /* Setzt die Schriftart auf "Inter" */
  background-color: #fafafa; /* Hellgrauer Hintergrund für die Seite */
}

/* Überschriften im Header */
header h1,
h3 {
  text-align: center; /* Zentriert h1 und h3 horizontal im Header */
}

header h1 {
  color: #143e90; /* Setzt die Farbe von h1 auf ein warmes Orange-Braun */
  margin-top: 1em; /* Fügt einen oberen Abstand hinzu, damit die Überschrift nicht direkt am oberen Rand klebt */
}

header h3 {
  color: #e80d0d; /* Setzt die Farbe von h3 auf ein dunkles Grau für einen subtilen Kontrast */
}

/* Stile für den Hauptbereich (Main-Tag) */
main {
  display: flex; /* Setzt Flexbox-Layout für das Main-Element */
  flex-direction: column; /* Ordnet Inhalte vertikal an */
  align-items: center; /* Zentriert die Inhalte horizontal */
  margin-bottom: 24px; /* Abstand nach unten zum Footer */
}

main h2 {
  color: #e80d0d; /* Setze die Farbe der Überschrift h2 auf ein warmes Orange-Braun (#bb7744) */
  margin-top: 2em; /* Füge einen oberen Abstand von 2em zur Überschrift hinzu */
  margin-bottom: 0; /* Setze den unteren Abstand der Überschrift auf 0, um keinen zusätzlichen Platz darunter zu haben */
}

/* Stile für die Linkliste */
.links {
  display: flex; /* Flexbox für die Links */
  flex-wrap: wrap; /* Erlaubt Umbrüche bei vielen Links */
  width: 75%; /* Links nehmen 75% der Breite ein */
  justify-content: center; /* Zentriert die Links */
}

/* Stile für jeden einzelnen Link */
.links a {
  display: block; /* Link ist ein Blockelement */
  padding: 1rem 1.25rem; /* Innenabstand um den Text herum */
  font-size: 1.25rem; /* Schriftgröße des Links */
  text-decoration: none; /* Entfernt die Unterstreichung */
  color: #143e90; /* Setzt die Linkfarbe auf Blau */
  position: relative; /* Für das Pseudo-Element `:after` */
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); /* Übergangseffekte für Hover */
  z-index: 1; /* Überlappt das Pseudo-Element `:after` */
  text-align: center; /* Zentriert den Linktext */
  margin: 0.15em; /* Setzt einen äußeren Abstand (Margin) von 0.15em um den Link herum. */
}

/* Pseudo-Element für die animierte Linie unter dem Link */
.links a:after {
  content: ""; /* Leeres Element als Linie */
  display: block; /* Block-Element */
  height: 2px; /* Höhe der Linie */
  position: absolute; /* Positioniert das Pseudo-Element relativ zum Link */
  bottom: 0; /* Platziert es am unteren Rand */
  right: 1.25rem; /* Abstand vom rechten Rand */
  left: 1.25rem; /* Abstand vom linken Rand */
  background-color: #143e90; /* Farbe der Linie */
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); /* Übergangseffekte */
  transform-origin: bottom center; /* Transformationsursprung für die Animation */
  z-index: -1; /* Linie liegt unter dem Text */
}

/* Hover-Effekt für den Link */
.links a:hover {
  color: #fafafa; /* Ändert die Textfarbe beim Hover */
}

.links a:hover:after {
  right: 0; /* Linie erstreckt sich über die gesamte Breite */
  left: 0;
  height: 100%; /* Linie wird zum Hintergrund des Links */
}

/* Stile für Textblöcke */
.text {
  display: flex; /* Flexbox für Text-Layout */
  flex-direction: column; /* Text vertikal anordnen */
  align-items: center; /* Zentriert die Texte */
  font-size: 0.75em; /* Kleinere Schriftgröße */
  line-height: 0.35em; /* Geringer Zeilenabstand */
  margin-top: 5em; /* Abstand nach oben */
}

.kooperation {
  display: flex; /* Flexbox für Text-Layout */
  font-size: 0.75em; /* Kleinere Schriftgröße */
  line-height: 0.35em; /* Geringer Zeilenabstand */
  gap: 1em;
  flex-wrap: wrap;
  justify-content: center;
}

/* Stile für Links innerhalb des Textbereichs */
.text a {
  text-decoration: none; /* Entfernt Unterstreichung */
  color: #143e90; /* Linkfarbe im Text */
}

.kooperation a {
  text-decoration: none; /* Entfernt Unterstreichung */
  color: #143e90; /* Linkfarbe im Text */
}

.text p {
  display: flex; /* Verwende Flexbox, um den Absatz-Inhalt flexibel anzuordnen */
  align-items: center; /* Richte den Inhalt des Absatzes vertikal zentriert aus */
}

.kooperation p {
  display: flex; /* Verwende Flexbox, um den Absatz-Inhalt flexibel anzuordnen */
  align-items: center; /* Richte den Inhalt des Absatzes vertikal zentriert aus */
}

/* Stile für Bilder im Textbereich */
.text img {
  height: 1.5em; /* Setze die Höhe der Bilder auf 1.5em, was in etwa der Höhe des Textes entspricht */
  padding-left: 1em; /* Füge einen linken Abstand von 1em hinzu, um das Bild vom vorhergehenden Inhalt (z.B. Text) zu trennen */
}

/* Stile für den footer */
footer {
  display: flex; /* Verwende Flexbox, um die Links im Footer flexibel auszurichten */
  gap: 1em; /* Abstand von 1em zwischen den Elementen im Footer, in diesem Fall den Links */
  justify-content: center; /* Zentriere die Elemente horizontal innerhalb des Footers */
  margin-bottom: 1em; /* Füge einen Abstand von 1em unterhalb des Footers ein */
}

footer a {
  text-decoration: none; /* Entferne die Unterstreichung der Links */
  color: #333; /* Setze die Textfarbe der Links auf ein dunkles Grau */
}

footer a:hover {
  color: #143e90; /* Ändere die Farbe des Links beim Hover-Effekt auf ein helles Blau */
}

/* Menü */

#menuToggle {
  z-index: 1;
  -webkit-user-select: none; /* Verhindert die Auswahl des Elements auf Webkit-Browsern */
  user-select: none; /* Verhindert die Auswahl des Elements auf anderen Browsern */
}

#menuToggle a {
  text-decoration: none; /* Entfernt die Standard-Unterstreichung von Links */
  color: #fafafa; /* Setzt die Textfarbe auf ein helles Weiß */

  transition: color 0.3s ease; /* Animiert die Farbänderung über 0.3s */
}

#menuToggle span:first-child {
  transform-origin: 0% 0%; /* Setzt den Rotationsursprung für das obere Element */
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%; /* Setzt den Rotationsursprung für das untere Element */
}

#menuToggle input {
  position: absolute; /* Positioniert das unsichtbare Input-Element (Checkbox) */
  cursor: pointer; /* Ändert den Mauszeiger zu einem Zeiger */
  opacity: 0; /* Versteckt das Input-Element */
  width: 40px; /* Breite des unsichtbaren Input-Elements */
  z-index: 2; /* Stellt sicher, dass die Checkbox über dem Menü-Icon liegt */
  -webkit-touch-callout: none; /* Verhindert das Kontextmenü auf mobilen Geräten */
  top: 1em; /* Positioniert das Input-Element von oben */
  left: 0.5em; /* Positioniert das Input-Element von links */
}

#menuToggle span {
  display: block; /* Macht jedes Span-Element zu einem Block (jede Linie im Menü) */
  width: 33px; /* Breite der Hamburger-Linien */
  height: 4px; /* Höhe der Hamburger-Linien */
  margin-bottom: 5px; /* Abstand zwischen den Linien */
  position: relative; /* Ermöglicht das Anpassen der Position relativ zum Elternelement */
  background: #143e90; /* Farbe der Hamburger-Linien */
  border-radius: 3px; /* Rundet die Ecken der Linien */
  z-index: 1; /* Stellt sicher, dass die Linien unter der Checkbox sind */
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; /* Animiert Rotation, Hintergrundfarbe und Transparenz */
  transform-origin: 4px 0px; /* Rotationsursprung für Transformationen */
  top: 1em; /* Abstand von oben */
  left: 0.5em; /* Abstand von links */
}

#menuToggle input:checked ~ span {
  opacity: 1; /* Setzt die Sichtbarkeit auf volle Deckkraft */
  transform: rotate(45deg) translate(-2px, -1px); /* Dreht und verschiebt das obere und untere Element bei Klick */
  background: #fafafa; /* Ändert die Linienfarbe zu Weiß */
}

#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0; /* Macht die mittlere Linie unsichtbar (verschwindet beim Klick) */
  transform: rotate(0deg) scale(0.2, 0.2); /* Verkleinert die mittlere Linie */
}

#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px); /* Dreht die untere Linie in die entgegengesetzte Richtung */
}

#menu {
  position: absolute; /* Setzt das Menü absolut zur Seite */
  left: -300px; /* Versteckt das Menü außerhalb des Bildschirms */
  top: 80px; /* Positioniert das Menü unter dem Hamburger-Icon */
  width: 120px; /* Breite des Menüs */
  margin: -100px 0 0 -50px; /* Verschiebt das Menü relativ zu seiner Position */
  padding: 50px; /* Innenabstand im Menü */
  padding-top: 75px; /* Zusätzlicher Abstand oben im Menü */
  background: #143e90; /* Setzt die Hintergrundfarbe des Menüs */
  list-style-type: none; /* Entfernt die Standard-Punkte der Liste */
  -webkit-font-smoothing: antialiased; /* Verbessert die Textdarstellung */
  border-radius: 0 0 30px 0;
  opacity: 0.9;

  transition: left 0.5s; /* Animiert die Menü-Position auf der horizontalen Achse */
}

#menu li {
  padding: 10px 0; /* Innenabstand zwischen den Listenelementen */
  font-size: 22px; /* Schriftgröße der Menüpunkte */
}

#menuToggle input:checked ~ ul {
  left: 40px; /* Bewegt das Menü in die Sichtbarkeit, wenn das Input-Element (Checkbox) aktiviert ist */
}