/* ********** ALLGEMEIN ********** */
html,
body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Mynerve", cursive;
  background-color: #ffffff;
  color: #333;
  line-height: 1.6;
  overflow-y: visible;
  overflow-x: hidden;
}

/* ********** MAIN-BEREICH ********** */
main {
  padding-bottom: 60px; /* Platz für den Footer */
  box-sizing: border-box; /* Damit das Padding den Gesamtbereich nicht vergrößert */
}

/* ********** CONTENT ********** */
.content {
  flex: 1; /* Füllt den Raum zwischen Header und Footer */
}

/* ********** HEADER ********** */
header {
  background-color: rgba(255, 255, 255, 0.9);
  color: black;
  padding: 6px 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0; /* Setzt den Header an den linken Rand */
  width: 100%; /* Der Header füllt die gesamte Breite */
  z-index: 1000;
  box-sizing: border-box; /* Padding und Border beinflussen nicht die Gesamtbreite */
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* ********** LOGO + HEADER-TITEL ********** */

.logo-title-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  font-size: 34px;
}

.logo:hover {
  color: #6ca6cd;
}

.headertitle {
  font-weight: bold;
  font-size: 1.8rem;
  color: black;
}

.headertitle:hover {
  color: #6ca6cd;
  font-weight: bold;
}

/* ********** CUSTOMHEART ********** */

.heart-container {
  display: flex;
  justify-content: center; /* Zentriert die Herzen horizontal */
  gap: 20px; /* Abstand zwischen den Herzen */
}

.customheart {
  width: 30px; /* Breite des Herzens */
  height: 30px; /* Höhe des Herzens */
  fill: none; /* Innenbereich bleibt leer */
  stroke: gray; /* Herzumrandung in Grau */
  stroke-width: 2; /* Stärke der Linie */
  stroke-linecap: round; /* Abgerundete Linienenden */
  stroke-linejoin: round; /* Abgerundete Ecken */
  transition: transform 0.3s ease, stroke 0.3s ease; /* Animation bei Hover */
}

.customheart:hover {
  transform: scale(1.3); /* Vergrößert das Herz beim Hover */
  stroke: red; /* Ändert die Farbe beim Hover */
}

/* ********** NAVIGATION ********** */
.nav-menu {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-menu li a {
  text-decoration: none;
  color: black;
  font-size: 1.6rem;
  transition: color 0.3s ease;
}

.nav-menu li a:hover {
  color: #6ca6cd;
  font-weight: bold;
}

.menu-icon {
  display: none; /* Hamburger-Icon nicht sichtbar */
}

/* ********** TITEL ********** */
.main-title {
  font-family: "Barriecito";
  text-align: center;
  font-size: 6rem;
  color: black; /* Standardfarbe */
  margin: 8px 0;
  font-weight: bold; /* Fett */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5),
    /* Dunkler Schatten */ 0 0 10px rgba(128, 128, 128, 0.7),
    /* Graues Glühen */ 0 0 15px rgba(192, 192, 192, 0.5); /* Weicheres Glühen */
}

/* ********** PROFILBILD ********** */
.profilpic {
  text-align: center;
  margin: 20px auto;
  position: relative;
  max-width: 97%;
}

.profilpic img {
  max-width: 97%;
  max-height: 500px;
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.profilpicohnerand img {
  max-width: 97%;
  max-height: 500px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ********** PROFILTEXT ********** */
.profiltext {
  font-size: 2.6rem;
  text-align: center;
  color: black; /* Textfarbe */
  padding: 0 20px;
  font-weight: bold; /* Fett */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
/* ********** PERSONS ********** */
.family-section {
  background-color: #f9f9f9; /* Ein sehr helles Grau */
  border-radius: 10px; /* Für abgerundete Ecken */
  padding: 20px; /* Etwas Abstand innen */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Dezenter Schatten */
  display: flex; /* Flexbox wird aktiviert */
  flex-direction: column; /* Stellt sicher, dass der Titel oben bleibt */
  align-items: center; /* Zentriert den gesamten Inhalt horizontal */
  text-align: center; /* Zentriert den Text innerhalb von Kind-Elementen */
  margin: 40px auto; /* Abstand außen und horizontale Zentrierung */
  gap: 20px; /* Abstand zwischen Flexbox-Elementen */
  max-width: 65%; /* Maximale Breite der Box */
}

/* ********** TITEL ********** */
#family-title {
  text-align: center; /* Zentriert den Titel */
}

/* ********** FAMILY-MEMBER-CONTAINER********** */
.family-members-container {
  display: flex; /* Flexbox für die Mitglieder */
  justify-content: center; /* Zentriert die Mitglieder */
  gap: 50px; /* Abstand zwischen den einzelnen Familienmitgliedern */
  flex-wrap: wrap; /* Sorgt dafür, dass sie in eine neue Zeile umgebrochen werden, wenn sie nicht mehr passen */
}

/* ********** GIFT-LINK-CONTAINER********** */

.christmasgift-container {
  display: flex; /* Flexbox aktivieren */
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  flex-wrap: wrap;
  margin: 30px auto 60px auto; /* Oben: 30px, Unten: 60px für Abstand zum Footer */
  width: 500px;
  padding: 30px;
  box-sizing: border-box; /* Sicherstellen, dass Padding und Border in die Breite einbezogen werden */
}

.christmasgift-container:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.christmasgift-container > * {
  flex: 1; /* Kind-Elemente sollen den verfügbaren Platz gleichmäßig nutzen */
  text-align: center; /* Text innerhalb der Kind-Elemente zentrieren */
}

.christmasgift:hover .family-name {
  color: #6ca6cd; /* Text wird hellblau beim Hover */
}

/* ********** PASSWORT-CONTAINER ********** */

/* Container für das Passwortformular */
#password-container {
  position: fixed; /* Fest auf dem Bildschirm platzieren */
  top: 50%; /* Vertikal mittig */
  left: 50%; /* Horizontal mittig */
  transform: translate(-50%, -50%); /* Zentrierung von oben und links */
  background-color: white; /* Hintergrundfarbe für das Formular */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Optional: Schattierung für den Container */
  text-align: center;
  width: 300px; /* Breite anpassen */
  z-index: 1000; /* Sicherstellen, dass der Container im Vordergrund bleibt */
}

/* Optional: Stil für das Eingabefeld */
#password-input {
  padding: 10px;
  width: 80%; /* Breite anpassen */
  margin: 10px 0;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Optional: Stil für den Button */
#submit-button {
  padding: 10px 20px;
  background-color: #6ca6cd; /* Helleres Blau */
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  font-size: 16px;
}

/* Button Hover-Effekt */
#submit-button:hover {
  background-color: #5fa9ff; /* Dunkleres Blau */
}

/* ********** WEIHNACHTSGESCHENK VIDEO CONTAINER ********** */
.gift-video-container {
  display: flex;
  justify-content: space-evenly; /* Gleichmäßige Verteilung der Videos */
  margin: 20px auto;
  background-color: #d32f2f; /* Festliches Rot für den Hintergrund */
  border: 3px solid #ffffff; /* Weißer Rand für einen frischen, sauberen Look */
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Sanftere, aber größere Schatten für einen edleren Effekt */
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Sanfter Übergangseffekt */
  max-width: 92%; /* Maximal 92% der Breite des übergeordneten Containers */
}

/* Weihnachtsvideo - Individuelle Video-Container */
.gift-video {
  flex: 1;
  margin: 15px;
  max-width: 100%; /* Maximale Breite von 100% für die Videos */
  text-align: center;
}

/* Video Stil */
.gift-video video {
  width: 100%; /* Videos füllen die gesamte Breite des Containers */
  height: auto;
  border-radius: 12px; /* Sanfte Abrundung für ein eleganteres Aussehen */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Dezenter Schatten für professionelles Aussehen */
  transition: transform 0.3s ease-in-out; /* Animation für den Hover-Effekt */
}

/* Hover-Effekt für das Video */
.gift-video video:hover {
  transform: scale(
    1.05
  ); /* Video wird leicht vergrößert, wenn der Benutzer mit der Maus darüber fährt */
}

/* Weihnachtlicher Hover-Effekt für den gesamten Container */
.gift-video-container:hover {
  background-color: #b71c1c; /* Dunkleres Rot für den Hover-Effekt */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten für den Container */
}

.profilpic video {
  max-width: 97%;
  max-height: 500px;
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

/* ********** FAMILY MEMBER ********** */
.family-member {
  text-align: center;
  flex: 1; /* Flexbox sorgt dafür, dass die Elemente nebeneinander angezeigt werden */
  max-width: 220px; /* Maximale Breite der Familienmitglieder */
  padding: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.family-member:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.family-member:hover .family-name {
  color: #6ca6cd; /* Text wird hellblau beim Hover */
}

.family-icon {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

.family-name {
  font-size: 1.6rem;
  color: #333;
  margin: 5px 0;
}

.role {
  font-size: 1.3rem;
  color: gray;
}

/* ********** PLAY SECTION ********** */
.play-section {
  background-color: #f9f9f9; /* Gleicher Hintergrund wie bei den Personen */
  border-radius: 10px; /* Abgerundete Ecken */
  padding: 20px; /* Innenabstand */
  text-align: center; /* Text zentrieren */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Dezenter Schatten */
  margin: 20px auto; /* Außenabstand und zentrierte Position */
  max-width: 85%; /* Optionale maximale Breite für den Bereich */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Sanfte Übergänge für Hover-Effekte */
  display: flex; /* Flexbox für nebeneinander Anordnung */
  justify-content: center; /* Links zentrieren */
  gap: 60px; /* Abstand zwischen den Boxen */
}

.play-section:hover {
  transform: scale(1.05); /* Vergrößert die Box leicht beim Hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Intensiverer Schatten beim Hover */
}

.play-box {
  background-color: #fff; /* Hintergrundfarbe der Boxen */
  border-radius: 10px; /* Abgerundete Ecken */
  padding: 20px; /* Innenabstand */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Dezenter Schatten */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Sanfte Übergänge für Hover-Effekte */
  flex: 1; /* Flex-Item, das den verfügbaren Platz gleichmäßig aufteilt */
  text-align: center; /* Text zentrieren */
}

.play-box:hover {
  transform: scale(1.05); /* Vergrößert die Box leicht beim Hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Intensiverer Schatten beim Hover */
}

.play-link {
  font-family: "Schoolbell", cursive; /* Schriftart Schoolbell */
  font-size: 32px; /* Große Schriftgröße */
  color: #333; /* Dunkle Schriftfarbe */
  text-decoration: none; /* Unterstreichung entfernen */
  transition: color 0.3s ease, font-size 0.3s ease; /* Sanfte Übergänge für Farbe und Größe */
}

.play-link:hover {
  color: #6ca6cd; /* Farbe ändern bei Hover */
  font-size: 34px; /* Schriftgröße leicht erhöhen beim Hover */
  text-decoration: underline; /* Unterstreichung bei Hover hinzufügen */
}

/* ********** FOOTER ********** */
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  margin-top: auto; /* Kein Abstand zwischen Content und Footer */
}

/* ********** MOMENTS ********** */

/* ********** MOMENTS-TITEL ********** */
.momentstitel {
  text-align: center;
  font-size: 4rem; /* Standardgröße für größere Bildschirme */
  color: black; /* Textfarbe */
  font-weight: bold; /* Fett für den Titel */
}

.moments-section {
  display: flex;
  flex-wrap: wrap; /* Sicherstellen, dass die Elemente nebeneinander angezeigt werden */
  justify-content: space-between; /* Verteilung der Boxen */
  margin: 20px 75px; /* Mehr Abstand zu den Seiten */
  gap: 40px; /* Abstand zwischen den Momenten */
}

.moment {
  flex: 1 1 40%; /* Die Boxen nehmen maximal 40% der Breite ein und sind nebeneinander */
  background-color: white; /* Weißer Hintergrund für die Momente */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Verhindert, dass Inhalte außerhalb des Containers sichtbar sind */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.moment:hover {
  transform: translateY(
    -10px
  ); /* Hover-Effekt, um das Moment nach oben zu bewegen */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.moment-img {
  width: 100%; /* Bild füllt die gesamte Breite der Box */
  max-width: 100%; /* Maximale Breite bleibt 100% der Box */
  height: auto; /* Höhe passt sich automatisch an, um die Proportionen zu wahren */
  max-height: 300px; /* Maximale Höhe für das Bild */
  object-fit: contain; /* Bild wird skaliert, um vollständig sichtbar zu bleiben */
  border-radius: 10px 10px 0 0; /* Abgerundete Ecken oben */
}

.moment-text {
  padding: 20px;
}

.moment h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 10px;
}

.moment p {
  font-size: 1.3rem;
  color: #555;
  line-height: 1.6;
}

/* ********** TIGER-SPIEL ********** */

/* Container zentrieren */
#tiger-game {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 20px auto;
}

/* Bild und Video von Tiger */
#tiger-image,
#tiger-game video {
  width: auto;
  height: 70%; /* Maximale Höhe auf 70% setzen */
  max-height: 700px; /* Maximale Höhe auf 700px setzen */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin: 20px 0;
  object-fit: contain; /* Behalte das Seitenverhältnis bei */
}

/* Aktionen: Buttons */
.actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

/* Styling der Buttons */
.action-button {
  background-color: #808080; /* Grau */
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 2rem;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease;
  font-family: "Schoolbell", cursive; /* Schriftart */
}

/* Hover-Effekt */
.action-button:hover {
  background-color: #6ca6cd; /* Hellblau */
  transform: scale(1.1); /* Größer */
}

/* Text für die Aktion */
#action-text {
  margin: 20px;
  font-size: 2rem;
  color: #555;
  font-style: italic;
  font-family: "Schoolbell", cursive; /* Schriftart */
}
/* ********** STECKBRIEF ********** */
/* Allgemeine Container-Einstellungen */
.profile-container {
  background-color: #f9f9f9;
  padding: 1.5rem; /* 24px */
  border-radius: 0.75rem; /* 12px */
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 4px 8px */
  max-width: 56.25rem; /* 900px */
  margin: 1.5rem auto; /* 24px */
}

/* Profil Header */
.profile-header h3 {
  font-family: "Barriecito", sans-serif;
  font-size: 1.75rem; /* 28px */
  color: #333;
  margin-bottom: 0.75rem; /* 12px */
}

.profile-header .birthday,
.profile-header .birthplace {
  font-family: "Schoolbell", cursive;
  font-size: 1.25rem; /* 20px */
  color: #555;
  margin-bottom: 1.5rem; /* 24px */
}

/* Lebensereignisse - Timeline mit Umrandung und Marker */
.profile-timeline {
  padding: 1rem; /* Innenabstand für den Timeline-Bereich */
}

.profile-timeline h3 {
  font-family: "Barriecito", sans-serif;
  font-size: 1.75rem;
  color: #333;
  margin-bottom: 1.5rem; /* Mehr Abstand zur ersten Ereignisbox */
}

.profile-timeline ul {
  list-style-type: none; /* Entfernt Standard-Aufzählungszeichen */
  padding-left: 0; /* Kein linker Abstand */
  margin: 0; /* Kein äußerer Abstand */
}

.profile-timeline li {
  position: relative; /* Für den Marker erforderlich */
  font-family: "Schoolbell", cursive;
  font-size: 1.25rem;
  color: #555;
  margin-bottom: 1.5rem; /* Abstand zwischen Ereignissen */
  padding: 1.25rem; /* Innenabstand für die Ereignisbox */
  border: 2px solid #333; /* Umrandung */
  border-radius: 0.75rem; /* Abgerundete Ecken */
  background-color: #f9f9f9; /* Heller Hintergrund */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

.profile-timeline li:before {
  content: "";
  position: absolute;
  left: -1.25rem; /* Abstand des Markers links von der Box */
  top: 50%; /* Vertikal mittig */
  transform: translateY(-50%); /* Zentriert den Marker */
  width: 1.25rem; /* Markergröße */
  height: 1.25rem;
  background-color: #ffcc00; /* Goldfarbe */
  border-radius: 50%; /* Rundes Design */
  border: 2px solid #333; /* Kontraststarker Rand */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Marker-Schatten */
}

.profile-timeline .year {
  font-weight: bold;
  color: #333;
  margin-right: 0.5rem; /* Platz zwischen Jahr und Text */
}

.profile-timeline li:hover {
  background-color: #fffbe6; /* Heller Gelbton beim Hover */
  border-color: #ffcc00; /* Goldrand beim Hover */
  transform: translateY(-2px); /* Leichter Hover-Effekt */
  transition: 0.2s ease; /* Sanfte Animation */
}

/* Eigenschaften / Sterne-Bewertung */
.profile-traits h3 {
  font-family: "Barriecito", sans-serif;
  font-size: 1.75rem; /* 28px */
  color: #333;
  margin-bottom: 0.75rem; /* 12px */
}

.profile-traits .trait {
  display: flex;
  align-items: center;
  margin-bottom: 1rem; /* 16px */
}

/* Eigenschaften / Sterne-Bewertung */
.profile-traits .trait i {
  font-size: 1.75rem; /* Einheitliche Größe für alle Icons */
  color: #5c5c5c; /* Grauton für die Icons */
  margin-right: 0.75rem; /* 12px */
}

.profile-traits .trait p {
  font-family: "Schoolbell", cursive;
  font-size: 1.25rem; /* 20px */
  color: #555;
  margin: 0;
}

.profile-traits .star-rating {
  display: flex;
  margin-left: 1rem; /* 16px */
}

.profile-traits .star {
  font-size: 1.75rem; /* Einheitliche Sterngröße */
  color: #ccc; /* Heller Grauton für nicht ausgefüllte Sterne */
}

.profile-traits .star.filled {
  color: #ffcc00; /* Gold für ausgefüllte Sterne */
}

/* Hobbies */
.profile-hobbies h3 {
  font-family: "Barriecito", sans-serif;
  font-size: 1.75rem; /* 28px */
  color: #333;
  margin-bottom: 0.75rem; /* 12px */
}

.profile-hobbies .hobby {
  display: flex;
  align-items: center;
  margin-bottom: 1rem; /* 16px */
}

/* Hobbies-Icon */
.profile-hobbies .hobby i {
  font-size: 1.75rem; /* Einheitliche Icon-Größe */
  margin-right: 1rem; /* 16px Abstand zwischen Icon und Text */
  color: #5c5c5c; /* Grauton für die Icons */
}

.profile-hobbies p {
  font-family: "Schoolbell", cursive;
  font-size: 1.25rem; /* 20px */
  color: #555;
}

/* Multimedia (Video) */
.profile-media h3 {
  font-family: "Barriecito", sans-serif;
  font-size: 1.75rem; /* 28px */
  color: #333;
  margin-bottom: 0.75rem; /* 12px */
}

.profile-media video {
  width: 100%;
  height: auto;
  border-radius: 0.625rem; /* 10px */
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 4px 8px */
  margin-bottom: 1.5rem; /* 24px */
}

/* ********** TIGER'S FRIENDS ********** */

.friends-section {
  padding: 20px;
  text-align: center;
}

.friends-section h2 {
  font-size: 4em; /* Deutlich vergrößerte Überschrift */
  margin-bottom: 20px;
  color: #444;
}

.friends-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.friend-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%; /* Sicherstellen, dass alle Karten die gleiche Höhe haben */
}

.friend-card:hover {
  transform: translateY(-10px);
}

.friend-card img {
  width: 100%;
  height: 500px; /* Feste Höhe für alle Bilder */
  object-fit: cover; /* Bilder werden beschnitten, um das Seitenverhältnis beizubehalten */
  border-radius: 10px 10px 0 0; /* Abgerundete Ecken nur oben */
}

.friend-card h3 {
  font-size: 2.5em; /* Deutlich vergrößerte Namen */
  margin: 20px 0 10px; /* Mehr Abstand nach oben und unten */
  color: #333;
}

.friend-card p {
  font-size: 1.5em; /* Deutlich vergrößerte Beschreibungen */
  margin: 0 20px 20px; /* Mehr Abstand zu den Seiten und nach unten */
  color: #666;
  flex-grow: 1; /* Sicherstellen, dass der Textbereich den verbleibenden Platz einnimmt */
}

.friend-link {
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #5fa9ff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.4rem;
  transition: color 0.3s ease;
}

.friend-link:hover {
  color: #6c92d5;
  text-decoration: underline;
}

/* Section für den Beschreibungstext von Tigers erstem 1860-Spiel */
#spiel-beschreibung-1860 {
  background-color: #f9f9f9; /* Helle Hintergrundfarbe */
  border: 2px solid #80bfff; /* Hellblauer Rand */
  border-radius: 10px; /* Abgerundete Ecken */
  padding: 20px; /* Innenabstand */
  margin: 20px auto; /* Abstand außen */
  max-width: 800px; /* Begrenzte Breite */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatteneffekt */
}

#spiel-beschreibung-1860 h2 {
  font-family: "Barriecito", cursive; /* Überschrift mit spezieller Schriftart */
  font-size: 2rem; /* Schriftgröße */
  color: #6c92d5; /* Dunkleres Hellblau */
  margin-bottom: 10px; /* Abstand nach unten */
}

#spiel-beschreibung-1860 p {
  font-family: "Mynerve", sans-serif; /* Absatz mit anderer Schriftart */
  font-size: 1.2rem; /* Schriftgröße für Lesbarkeit */
  color: #4a4a4a; /* Dunkelgraue Schrift */
  line-height: 1.6; /* Zeilenabstand */
  margin: 0; /* Kein zusätzlicher Außenabstand */
}

/* Section für die Highlights vom 1860-Spiel*/
#highlight-video {
  background-color: #f9f9f9; /* Heller Hintergrund */
  border: 2px solid #80bfff; /* Hellblauer Rand */
  border-radius: 10px; /* Abgerundete Ecken */
  margin: 20px auto; /* Außenabstand zentriert */
  max-width: 1100px; /* Breitere maximale Breite */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
  text-align: center; /* Zentrierter Text */
}

#highlight-video h2 {
  font-family: "Barriecito", cursive; /* Stil für Überschrift */
  font-size: 3rem; /* Schriftgröße der Überschrift */
  color: #6c92d5; /* Dunkleres Hellblau */
  margin-bottom: 10px; /* Abstand nach unten */
}

#highlight-video p {
  font-family: "Mynerve", sans-serif; /* Stil für Beschreibung */
  font-size: 1.8rem; /* Lesbare Schriftgröße */
  color: #333; /* Dunkelgrau */
  margin-bottom: 20px; /* Abstand unter dem Text */
}

/* Responsiver Video-Container */
#highlight-video .video-container {
  position: relative;
  width: 100%; /* Volle Breite */
  padding-bottom: 56.25%; /* Seitenverhältnis 16:9 */
  height: 0; /* Höhe auf 0 setzen, da padding die Größe bestimmt */
  overflow: hidden; /* Überflüssige Inhalte abschneiden */
}

#highlight-video .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Volle Breite des Containers */
  height: 100%; /* Volle Höhe des Containers */
  border: none; /* Kein Rahmen */
  border-radius: 10px; /* Abgerundete Ecken */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

/* Podcast-Video und TUM-Video */
#masterthesis-container {
  display: flex;
  justify-content: center; /* Zentriert die Container horizontal */
  align-items: center; /* Zentriert die Container vertikal */
  gap: 50px; /* Abstand zwischen den Videos */
  margin: 0 auto; /* Zentriert die Container in der Mitte des Bildschirms */
  width: 100%; /* Stellt sicher, dass die Container die volle Breite einnehmen */
  padding: 20px; /* Abstand zum Rand des Containers */
  flex-wrap: wrap; /* Erlaubt das Umbruch der Elemente bei kleineren Bildschirmen */
}

.podcast-video-container,
.tum-video-container {
  text-align: center;
  border: 2px solid #ccc; /* Rand */
  border-radius: 8px; /* Abgerundete Ecken */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten */
  overflow: hidden; /* Verhindert, dass der Inhalt über den Rand hinausragt */
  transition: transform 0.3s, box-shadow 0.3s; /* Übergangseffekt für Hover */
  flex: 1; /* Erlaubt den Containern, sich gleichmäßig zu verteilen */
  max-width: 40rem; /* Maximale Breite in rem */
  margin-bottom: 0; /* Kein zusätzlicher Abstand zwischen den Videos */
}

.podcast-video-container:hover,
.tum-video-container:hover {
  transform: scale(1.05); /* Vergrößert das Video beim Hovern */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Verstärkter Schatten beim Hovern */
}

.podcast-video-container iframe,
.tum-video-container iframe {
  width: 100%;
  height: 300px; /* Höhe anpassen */
  border: none; /* Entfernt den Standard-Rand des iframes */
  display: block; /* Verhindert den weißen Rand, indem das iframe als Block-Element behandelt wird */
}

/* ********** EVENT-GALERIE ********** */
.event-gallery {
  text-align: center;
  padding: 2rem 1rem;
  background-color: #f9f9f9;
  border-radius: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 30px;
}

.event-gallery h2 {
  font-family: "Barriecito", sans-serif;
  font-size: 2rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.event-gallery p {
  font-family: "Schoolbell", cursive;
  font-size: 1.25rem;
  color: #555;
  margin-bottom: 1rem; /* Angepasst, um den Abstand unten zu verringern */
}

/* Mediengitter */
.media-grid {
  display: grid;
  margin-top: 1rem; /* Angepasst, um den Abstand oben zu verringern */
  grid-template-columns: repeat(4, 1fr); /* 4 Bilder nebeneinander */
  gap: 2rem; /* Etwas größerer Abstand */
  justify-items: center;
  align-items: start;
}

/* Medien-Box */
.media-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 20rem; /* Mindesthöhe für die Box (20rem entspricht etwa 320px) */
  height: 100%; /* Flexibilität der Höhe */
}

/* Hover-Effekt */
.media-box:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

/* Medien-Elemente */
.media-box img,
.media-box video {
  width: 100%; /* 100% der Containerbreite */
  max-width: 30rem; /* Maximale Breite der Bilder */
  height: auto; /* Automatische Höhe */
  object-fit: cover; /* Bild wird zugeschnitten, um den Bereich zu füllen */
  border-radius: 0.5rem;
}

/* Texte in Medien-Box */
.media-caption {
  margin-top: 1rem;
  font-family: "Schoolbell", cursive;
  font-size: 1.2rem; /* Etwas größere Schrift */
  color: #333;
  text-align: center;
}

/* Container für die Videos nebeneinander */
.event-videos-container {
  display: flex; /* Flexbox-Layout */
  justify-content: space-between; /* Abstände zwischen den Videos */
  gap: 20px; /* Abstand zwischen den Videos */
  margin: 15px auto; /* Zentriert den Container horizontal */
}

/* Video-Container */
.event-video {
  display: flex; /* Flexbox-Layout für jedes Video */
  justify-content: center; /* Zentriert das Video horizontal */
  align-items: center; /* Zentriert das Video vertikal */
  max-height: 800px; /* Maximale Höhe des Containers */
  flex: 1; /* Jedes Video nimmt gleich viel Platz ein */
  border-radius: 15px; /* Weiche, runde Ecken */
  overflow: hidden; /* Verhindert, dass das Video über die runden Ecken hinausgeht */
}

/* Video Styling */
.event-video video {
  max-width: 100%; /* Verhindert, dass das Video die Containerbreite überschreitet */
  max-height: 800px; /* Maximale Höhe des Videos */
  width: auto; /* Automatische Breite, um das Seitenverhältnis zu wahren */
  height: auto; /* Automatische Höhe, um das Seitenverhältnis zu wahren */
  border-radius: 15px; /* Weiche, runde Ecken für das Video */
  border: 3px solid #808080; /* Dünner grauer Rand */
}

/* ********** URLAUB DETAILS ********** */
#urlaub-details {
  background-color: #f0f4f8; /* Sanfter Hintergrund für den Abschnitt */
  padding: 2rem 1.5rem; /* Ausreichend Abstand oben und unten */
  border-radius: 1rem; /* Abgerundete Ecken */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Dezenter Schatten */
  margin: 2rem auto; /* Zentrale Positionierung und Abstand nach oben/unten */
  max-width: 800px; /* Etwas schmaler als die vorherige Breite */
  width: 90%; /* Damit der Container dynamisch mit der Bildschirmgröße skaliert */
}

/* Container für Urlaubsinformationen */
.urlaub-info {
  display: flex;
  flex-direction: column; /* Kategoriebeschreibungen untereinander anordnen */
  gap: 1.5rem; /* Abstand zwischen den einzelnen Informationen */
}

/* Stil für jede Zeile mit Icon und Text */
.urlaub-info p {
  font-family: "Schoolbell", cursive;
  font-size: 1.2rem;
  color: #333;
  display: flex;
  align-items: center; /* Icon und Text vertikal zentrieren */
  gap: 15px; /* Abstand zwischen Icon und Text */
  text-align: left; /* Text linksbündig ausrichten */
}

/* Icons stilisieren */
.urlaub-info i {
  font-size: 2rem; /* Größere Icons für bessere Lesbarkeit */
  color: #007bff; /* Blaue Farbe für die Icons */
}

/* Text für die Details */
.urlaub-info .info-text {
  font-weight: 600; /* Fett für den Text */
  color: #555; /* Etwas gedämpfte Textfarbe */
}

/* Hover-Effekt für die Zeilen */
.urlaub-info p:hover {
  background-color: #e0e7ff; /* Sanfte Hintergrundfarbe beim Hover */
  border-radius: 0.5rem; /* Abgerundete Ecken */
  transition: background-color 0.3s ease; /* Sanfte Transition für den Hover-Effekt */
}

/* ********** TRENNER ********** */
.divider {
  margin: 40px 0;
  border: 1px solid #ccc;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* ********** FONTS ********** */
/* Link zu Billabong */
@font-face {
  font-family: "Billabong";
  src: url("./schrift/BillabongRegular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* Link zu Helvetica */
@font-face {
  font-family: "Helvetica";
  src: url("./schrift/helveticanowtext-black.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* ********** CONTACTS ********** */
.contact-section {
  max-width: 82%;
  margin: 20px auto;
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #a3d8f4, #d3f4ff);
  color: black;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.contact-section h2 {
  font-size: 2.5rem; /* Größere Schrift für Überschrift */
  margin-bottom: 1rem;
}

.contact-section p {
  font-size: 1.4rem; /* Größere Schrift für Text */
  margin-bottom: 1.5rem;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 25px; /* Größerer Abstand zwischen den Boxen */
  flex-wrap: wrap;
}

.social-links a {
  text-decoration: none;
  color: black;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px; /* Größeres Padding für mehr Platz */
  border-radius: 12px;
  width: 150px; /* Größere Breite */
  height: 150px; /* Größere Höhe */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-container img {
  max-width: 80%;
  max-height: 70px; /* Größere Höhe für das Bild */
  margin-bottom: 15px; /* Mehr Abstand zwischen Bild und Text */
  object-fit: contain;
}

.icon-container span {
  font-size: 1.2rem; /* Größere Schriftgröße für besseren Text */
  font-weight: bold;
  text-align: center;
}

/* Plattform-spezifische Schriftarten */
.instagram span {
  font-family: "Billabong", sans-serif;
}

.linkedin span {
  font-family: "Roboto", sans-serif;
}

.x span {
  font-family: "Roboto", sans-serif;
}

.Facebook span {
  font-family: "Helvetica", Arial, sans-serif;
}

.chess span {
  font-family: "Lato", serif;
}

.lichess span {
  font-family: "Roboto", sans-serif;
}

/* Hover-Effekte */
.social-links a:hover .icon-container {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* ********** FRIENDS PICS ********** */

/* Container für die Collage */
.collage-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Bilder in der Mitte zentrieren */
  gap: 33px; /* Abstand zwischen den Bildern */
  max-width: 92%; /* Maximalbreite des Containers erhöhen */
  padding: 20px;
  box-sizing: border-box;
  margin: 30px auto; /* Container horizontal zentrieren */
}

/* Einzelnes Collagen-Element */
.collage-item {
  position: relative;
  flex-basis: calc(24% - 10px); /* Die Boxen passen sich an 3 Spalten an */
  height: auto; /* Höhe wird dynamisch durch die Bildgröße bestimmt */
  box-sizing: border-box;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden; /* Sicherstellen, dass keine Überlappungen sichtbar sind */

  display: flex;
  justify-content: center; /* Horizontale Ausrichtung des Bildes */
  align-items: center; /* Vertikale Ausrichtung des Bildes */
}

/* Hover-Effekt für jedes Bild */
.collage-item:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* Bilder immer vollständig anzeigen ohne Zuschneiden */
.collage-item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Sicherstellen, dass das Bild nicht beschnitten wird */
  border-radius: 12px;
  transition: transform 0.3s ease-in-out;
}

/* Hover-Effekt für die Bilder */
.collage-item img:hover {
  transform: scale(1.5);
}

/* Overlay für Text */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 12px;
  padding: 10px; /* Abstand zwischen Text und Rand */
  box-sizing: border-box; /* Padding wird in die Breite/Höhe einberechnet */
  transition: opacity 0.3s ease;
}

.collage-item:hover .overlay {
  opacity: 1;
}

/* ********** VIDEO COLLAGE ********** */

/* Container für die Video-Collage */
.collage-video {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Videos in der Mitte zentrieren */
  gap: 33px; /* Abstand zwischen den Videos */
  max-width: 92%; /* Maximalbreite des Containers erhöhen */
  padding: 20px;
  box-sizing: border-box;
  margin: 30px auto; /* Container horizontal zentrieren */
}

/* Einzelnes Collagen-Element für Videos */
.collage-video-item {
  position: relative;
  flex-basis: calc(24% - 10px); /* Die Boxen passen sich an 3 Spalten an */
  height: auto; /* Höhe wird dynamisch durch die Videogröße bestimmt */
  box-sizing: border-box;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden; /* Sicherstellen, dass keine Überlappungen sichtbar sind */

  display: flex;
  justify-content: center; /* Horizontale Ausrichtung des Videos */
  align-items: center; /* Vertikale Ausrichtung des Videos */
}

/* Hover-Effekt für jedes Video */
.collage-video-item:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* Videos immer vollständig anzeigen ohne Zuschneiden */
.collage-video-item video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Sicherstellen, dass das Video nicht beschnitten wird */
  border-radius: 12px;
  transition: transform 0.3s ease-in-out;
  pointer-events: auto; /* Video bleibt interaktiv */
}

/* Hover-Effekt für die Videos */
.collage-video-item video:hover {
  transform: scale(1.02);
}

/* Overlay für Text bei Videos */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 12px;
  transition: opacity 0.3s ease;
  pointer-events: none; /* Overlay blockiert keine Interaktionen */
}

.collage-video-item:hover .video-overlay {
  opacity: 1;
}

/* ********** HANDY-SETTINGS ********** */
@media (max-width: 768px) {
  .headertitle {
    font-size: 1.125rem; /* Entspricht 18px bei der Standard-Schriftgröße von 16px */
  }

  .nav-menu {
    display: none; /* Menü auf kleinen Bildschirmen ausblenden */
  }

  .main-title {
    font-size: 4rem; /* Bleibt wie gehabt */
  }

  .profiltext {
    font-size: 2.5rem;
    line-height: 1.4;
    padding: 0 0.625rem; /* 10px entspricht 0.625rem */
  }

  .family-section {
    gap: 1rem; /* Etwas mehr Abstand auf kleinen Bildschirmen */
    max-width: 92%; /* Maximale Breite der Box */
  }

  .family-section {
    font-size: 1rem; /* Eine größere Schriftgröße für bessere Lesbarkeit */
  }

  .family-members-container {
    display: flex;
    flex-direction: row; /* Mitglieder nebeneinander */
    justify-content: center; /* Mitglieder zentrieren */
    gap: 2rem; /* Abstand zwischen den Elementen */
  }

  .family-member {
    max-width: 40%; /* Weniger Breite, damit 2 Mitglieder nebeneinander passen */
  }

  .christmasgift-container {
    display: flex;
    flex-direction: row; /* Mitglieder nebeneinander */
    justify-content: center; /* Mitglieder zentrieren */
  }

  .family-icon {
    width: 100px; /* Kleinere Icons für Handys */
    height: 100px;
  }

  .family-name {
    font-size: 1.2rem; /* Etwas kleinere Schriftgröße */
  }

  .moments-section {
    flex-direction: column; /* Momente untereinander anordnen */
    gap: 20px; /* Abstand zwischen den Momenten */
  }

  .moment {
    max-width: 100%; /* Momente nehmen die volle Breite ein */
  }

  .momentstitel {
    font-size: 2rem;
  }

  .moment-img {
    max-width: 100%; /* Bilder passen sich ebenfalls der Breite an */
    height: auto; /* Bildhöhe bleibt proportional */
  }
  #tiger-image {
    max-width: 100%; /* Bilder passen sich ebenfalls der Breite an */
    height: auto; /* Bildhöhe bleibt proportional */
  }

  /* ********** HANDY-FRIENDS-BILDER ********** */

  .friends-grid {
    display: grid;
    grid-template-columns: 1fr; /* Nur ein Bild pro Zeile */
    gap: 20px; /* Abstand zwischen den Bildern */
    width: 92%; /* Bild nimmt 92% der Breite des Containers ein */
    margin: 0 auto; /* Zentriert das Gitter horizontal */
    justify-items: center; /* Zentriert die Kacheln innerhalb des Grids */
  }

  .friend-card {
    width: 100%; /* Stellt sicher, dass die Karte die gesamte Breite des Containers nutzt */
    background-color: #fff; /* Hintergrundfarbe, falls gewünscht */
    border-radius: 10px; /* Abgerundete Ecken für die Karten */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten für das Kartenlayout */
    overflow: hidden; /* Verhindert, dass Inhalte außerhalb der Karte sichtbar sind */
  }

  .friend-card img {
    width: 100%; /* Bilder nehmen 100% der Breite der Karte ein */
    height: auto; /* Bildhöhe bleibt proportional */
    max-width: 100%; /* Maximale Breite auf mobilem Gerät */
    object-fit: cover; /* Das Bild wird zugeschnitten, um den Container auszufüllen */
  }

  /* ********** HANDY-TIGERGAME ********** */

  .play-section {
    flex-direction: column; /* Boxen untereinander anordnen */
    align-items: center; /* Boxen zentrieren */
  }

  .play-box {
    width: 100%; /* Boxen die volle Breite einnehmen */
    margin-bottom: 20px; /* Abstand zwischen den Boxen */
  }

  /* ********** HANDY-EVENTS-AUFNAHMEN ********** */

  .events-section {
    width: 100%; /* Vollständige Breite auf Handys */
    padding: 10px;
  }

  /* Grid auf nur 1 Bild pro Zeile */
  .media-grid {
    grid-template-columns: 1fr; /* Nur ein Bild pro Zeile */
    gap: 10px;
  }

  /* Bilder in der Galerie */
  .media-box img,
  .media-box video {
    width: 100%; /* Bilder nehmen 100% der Breite des Containers ein */
    height: auto; /* Höhenanpassung für mobile Ansicht */
    max-height: 20rem; /* Maximalhöhe für Bilder */
  }

  /* Titel und Text anpassen */
  .event-gallery h2 {
    font-size: 1.5rem; /* Etwas kleinere Schriftgröße auf Handys */
  }

  .event-gallery p {
    font-size: 1rem; /* Kleinere Schrift für mobile Geräte */
  }

  /* Container für die Videos */
  .event-videos-container {
    display: flex; /* Flexbox-Layout bleibt erhalten */
    flex-direction: column; /* Videos untereinander anordnen */
    gap: 20px; /* Abstand zwischen den Videos */
    margin: 15px 10px; /* Abstand zu den Seiten (horizontaler Rand) */
  }

  /* Video-Container */
  .event-video {
    max-width: 100%; /* Container nimmt die volle Breite ein */
    overflow: hidden; /* Verhindert Überlauf des Inhalts */
  }

  /* Video Styling */
  .event-video video {
    width: 100%; /* Video passt sich der Breite des Containers an */
    height: auto; /* Höhe wird proportional zur Breite skaliert */
    border: 2px solid #ddd; /* Rand direkt am Video */
    border-radius: 10px; /* Runde Ecken am Video */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten direkt am Video */
    object-fit: contain; /* Video wird proportional in den Container eingefügt */
    display: block; /* Entfernt unerwünschte Lücken um das Video */
  }

  /* ********** HANDY-CONTACTS-LINKS ********** */

  .contact-section {
    max-width: 95%; /* Größere Breite auf kleinen Bildschirmen */
    padding: 8px; /* Weniger Padding */
    margin: 0 auto; /* Zentriert den Container */
  }

  .contact-section h2 {
    font-size: 2rem; /* Kleinere Schrift für Überschrift */
    text-align: center;
  }

  .contact-section p {
    font-size: 1.3rem; /* Kleinere Schrift für Text */
    text-align: center;
  }

  .social-links {
    gap: 12px; /* Weniger Abstand zwischen den Boxen */
    justify-content: center; /* Boxen mittig ausrichten */
    flex-wrap: wrap; /* Boxen in mehrere Zeilen umbrechen lassen */
    display: flex;
  }

  .icon-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontale Zentrierung */
    justify-content: center; /* Vertikale Zentrierung */
    width: 80px; /* Etwas kleinere Breite */
    height: 100px; /* Höhe angepasst, um Platz für Text zu schaffen */
    padding: 10px; /* Gleicher Padding-Wert auf allen Seiten */
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center; /* Sicherstellen, dass der Text zentriert ist */
  }

  .icon-container img {
    max-height: 35px; /* Etwas kleinere Bilder, um sie besser in die Box zu integrieren */
    width: auto; /* Bild soll seine Proportionen beibehalten */
    object-fit: contain;
  }

  .icon-container span {
    font-size: 0.9rem; /* Kleinere Schriftgröße, um den Text in die Box zu integrieren */
    font-weight: bold;
    text-align: center;
    margin-top: 5px; /* Geringer Abstand zum Icon */
    margin-bottom: 5px; /* Geringer Abstand nach dem Text */
    word-wrap: break-word; /* Verhindert, dass der Text überläuft */
    white-space: normal; /* Erlaubt Textumbruch */
  }

  /* Hover-Effekte */
  .social-links a:hover .icon-container {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  }

  /* ********** HANDY-1860-Neschreibungstext ********** */

  #spiel-beschreibung-1860 {
    max-width: 94%; /* Begrenzte Breite */
  }

  /* Section für die Highlights vom 1860-Spiel*/
  #highlight-video {
    max-width: 94%; /* Breitere maximale Breite */
  }

  #highlight-video p {
    font-size: 1.5rem; /* Lesbare Schriftgröße */
  }

  /* ********** HANDY-COLLAGE ********** */

  .collage-container {
    display: flex;
    flex-direction: column; /* Jedes Bild auf einer neuen Zeile */
    gap: 15px; /* Abstand zwischen den Bildern */
  }

  /* Standardmäßig 1 Bild pro Zeile */
  .collage-item {
    flex-basis: 100%; /* Jedes Bild nimmt 100% der Breite ein */
  }

  /* Falls das Bild im Hochformat ist (Verhältnis 4:3 oder höher) */
  .collage-item img {
    width: 100%; /* Bild auf die volle Breite des Containers skalieren */
    height: auto; /* Höhe wird automatisch angepasst */
    aspect-ratio: 3 / 4; /* Beispiel für Hochformat-Bilder */
  }

  /* Falls es Querformat-Bilder gibt */
  .collage-item img[style*="object-fit: contain"] {
    aspect-ratio: unset; /* Keine Einschränkung für Querformat */
  }

  /* ********** HANDY-GESCHENKVIDEO ********** */

  .christmasgift-container {
    width: 65%;
    padding: 20px;
  }

  /* ********** HANDY-GESCHENKVIDEO ********** */

  .gift-video-container {
    flex-direction: column; /* Videos untereinander anordnen */
    align-items: center; /* Videos zentrieren */
  }

  .gift-video {
    max-width: 100%; /* Maximale Breite für jedes Video */
    margin: 10px 0; /* Weniger Abstand zwischen den Videos */
  }

  .gift-video video {
    width: 100%; /* Videos füllen die gesamte Breite des Containers */
  }

  #masterthesis-container {
    flex-direction: column; /* Videos untereinander anordnen */
    align-items: stretch; /* Container über die volle Breite strecken */
  }

  .podcast-video-container,
  .tum-video-container {
    width: 100%; /* Vollbreite für Handys */
    margin-bottom: 20px; /* Abstand zwischen den Videos */
  }
}