/* CSS-Variablen für Farben, Schriftfarben und Schatten-Effekte */
:root {
  --primary-color: #212121; /* Dunkle Primärfarbe für Header und Footer */
  --secondary-color: #FFF1E6; /* Helle Sekundärfarbe für Hintergründe */
  --primary-font-color: #ffffff; /* Weiße Schriftfarbe für dunkle Hintergründe */
  --secondary-font-color: #000000; /* Schwarze Schriftfarbe für helle Hintergründe */
  --shadow-main: 0 10px 50px rgba(0,0,0,0.3); /* Starker Schatten für wichtige Elemente */
  --shadow-soft: 0 8px 18px rgba(0,0,0,0.12); /* Weicher Schatten für Karten */
  --shadow-light: 0 10px 30px rgba(0,0,0,0.08); /* Leichter Schatten für subtile Effekte */
  --transparent-background: rgba(255,255,255,0.8); /* Halbtransparenter weißer Hintergrund */
}

/* Font-Definition für Roboto-Schriftart */
@font-face {
  font-family: "Roboto" ; 
  src: url('fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
}

/* Font-Definition für Titan_One-Schriftart */
@font-face {
  font-family: "Titan_One" ; 
  src: url('fonts/Titan_One/Titan_One-VariableFont_wdth,wght.ttf') format('truetype');
}

/* Grundlegende Stile für den Body der Seite */
body {   
  margin: 0; /* Entfernt Standard-Margin */
  padding: 0; /* Entfernt Standard-Padding */
  font-family: "Roboto", sans-serif; /* Setzt Standardschriftart */
  
}

/* ================================================== */
/*                       HEADER                       */
/* ================================================== */

/* Header-Container mit Flexbox für Logo und Navigation */
header {
  display: flex; /* Flexbox-Layout */
  justify-content: space-between; /* Elemente an den Enden platzieren */
  align-items: center; /* Vertikal zentrieren */
  padding: 20px 40px; /* Innenabstand */
  background-color: var(--primary-color); /* Dunkler Hintergrund */
  color: var(--primary-font-color); /* Weiße Schrift */
  width: 100%; /* Volle Breite */
  box-sizing: border-box; /* Padding in Breite einbeziehen */
  height: 130px; /* Feste Höhe */
}

/* Klasse für fixierten Header */
.fixed {
  position: fixed; /* Fixiert am oberen Rand */
  z-index: 9999; /* Hohe z-Index für Überlagerung */
}

/* Logo-Bild im Header */
.Logo img {
  width: clamp(120px, 16vw, 180px); /* Responsive Breite */
  margin-left: 60px; /* Linker Abstand */
  margin-right: 60px; /* Rechter Abstand */
}

/* Navigation-Liste */
nav ul {
  display: flex; /* Horizontale Liste */
  gap: clamp(80px, 10vw, 120px); /* Abstand zwischen Items */
  padding: 0; /* Entfernt Padding */
  margin-right: 140px; /* Rechter Rand */
  font-size: clamp(30px, 40px, 50px); /* Responsive Schriftgröße */
  list-style: none; /* Entfernt Aufzählungspunkte */
}

/* Hamburger-Menü-Icon für mobile Ansicht */
.hamburger {
  font-size: 36px; /* Icon-Größe */
  display: none; /* Standardmäßig versteckt */
  cursor: pointer; /* Zeiger-Cursor */
  margin-right: 100px; /* Rechter Abstand */
}

/* Hamburger-Menü-Container */
.hamburger-menu {
  position: fixed; /* Fixiert */
  top: 0; /* Oben */
  right: 0; /* Rechts */
  display: flex; /* Flexbox */
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  background-color: var(--primary-color); /* Dunkler Hintergrund */
  color: var(--secondary-color); /* Helle Schrift */
  transform: translateX(100%); /* Versteckt außerhalb des Bildschirms */
  transition: 0.5s ease; /* Übergangseffekt */
  z-index: 99999; /* Sehr hohe z-Index */
  font-size: 19px; /* Schriftgröße */
  box-shadow: var(--shadow-main); /* Schatten */
}

/* Offenes Hamburger-Menü */
.hamburger-menu.open {
  transform: translateX(0); /* Sichtbar machen */
}

/* Hover-Effekt für Links im offenen Menü */
.hamburger-menu.open .hamburger-menu-content a:hover {
  color: var(--secondary-color); /* Farbwechsel */     
  transform: scale(1.05); /* Skalierung */         
  transition: all 0.3s ease; /* Übergang */
}

/* Inhalt des Hamburger-Menüs */
.hamburger-menu-content {
  padding: 20px 50px 20px 50px; /* Padding */
  position: relative; /* Relativ positioniert */
  display: flex; /* Flexbox */
  flex-direction: column; /* Vertikal */
  justify-content: center; /* Zentrieren */
  align-items: center; /* Zentrieren */
}

/* Links im Hamburger-Menü */
.hamburger-menu-content a {
  color: white; /* Weiße Schrift */
  text-decoration: none; /* Keine Unterstreichung */
}

/* Schließen-Icon im Menü */
.cross {
  position: absolute; /* Absolut positioniert */
  top: 20px; /* Oben */
  right: 20px; /* Rechts */
}

/* Navigation-Links */
.Navigation a {
  position: relative; /* Relativ für Pseudo-Element */
  display: inline-block; /* Inline-Block */
  text-decoration: none; /* Keine Unterstreichung */
  color: var(--primary-font-color); /* Weiße Schrift */
  font-weight: bold; /* Fett */
}

/* Unterstreichungseffekt für Navigation-Links */
.Navigation a::after {
  content: ''; /* Leeres Pseudo-Element */
  position: absolute; /* Absolut */
  left: 0; /* Links */
  bottom: -4px; /* Unter dem Text */
  width: 0; /* Anfangsbreite 0 */
  height: 2px; /* Höhe */
  background: var(--secondary-color); /* Helle Farbe */
  transition: width 0.5s ease; /* Breitenübergang */
}

/* Aktiver Navigation-Link */
.Navigation a.active {
  background-color: var(--secondary-color); /* Heller Hintergrund */
  color: var(--primary-color); /* Dunkle Schrift */
  border-radius: 5px; /* Abgerundete Ecken */
  padding: 5px; /* Padding */
  transition: color 0.3s ease; /* Farbübergang */
}

/* Hover-Effekt für Unterstreichung */
.Navigation a:hover::after {
  width: 100%; /* Volle Breite */
}

/* ================================================== */
/*                         MAIN CARD                  */
/* ================================================== */

/* Hauptbereich der Seite */
main {
  display: flex; /* Flexbox */
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  height: 80vh; /* 80% der Viewport-Höhe */
}

/* Container für den Hauptbereich */
.main-container {
  position: relative; /* Relativ für absolute Kinder */
  width: 100%; /* Volle Breite */
  height: 80vh; /* 80% der Viewport-Höhe */
  overflow: hidden; /* Überlauf verstecken */
}

/* Hintergrundbild */
.background-image {
  width: 100%; /* Volle Breite */
  height: 100%; /* Volle Höhe */
  display: block; /* Block-Element */
  object-fit: cover; /* Bild skalieren und zuschneiden */
}

/* Profil-Box im Hauptbereich */
.profile-box {
  position: absolute; /* Absolut positioniert */
  top: 50%; /* Vertikal zentrieren */
  left: 50%; /* Horizontal zentrieren */
  transform: translate(-50%, -50%); /* Zentrierung */
  height: 350px; /* Höhe */
  width: 450px; /* Breite */
  background: rgba(255,255,255,0.8); /* Halbtransparenter Hintergrund */
  padding: 30px; /* Padding */
  border-radius: 10px; /* Abgerundete Ecken */
  box-shadow: 0px 10px 25px rgba(0,0,0,0.2); /* Schatten */
  z-index: 2; /* Über Hintergrund */
}

/* Überschrift-Bereich in der Profil-Box */
.heading {
  display: flex; /* Flexbox */
  align-items: center; /* Vertikal zentrieren */
  justify-content: center; /* Horizontal zentrieren */
  gap: 60px; /* Abstand */
}

/* Profilbild */
.profile-image {
  width: 100px; /* Breite */
  height: 100px; /* Höhe */
  object-fit: cover; /* Bild skalieren */
  clip-path: circle(50%); /* Kreisförmig zuschneiden */
}

/* Text in der Profil-Box mit Animation */
.profile-box p {
  text-align: center; /* Zentriert */
  font-weight: 900; /* Sehr fett */
  margin: 20px 0 20px 0; /* Margin */
  font-size: 3rem; /* Große Schrift */
  opacity: 0; /* Anfangs unsichtbar */
  transform: translateY(100px) scale(0.5); /* Anfangs Transformation */
  animation: popFlyIn 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; /* Animation */
  will-change: transform, opacity; /* Optimierung */
  font-family: "Titan_One", sans-serif; /* Spezielle Schriftart */
}

/* Keyframe-Animation für den Text */
@keyframes popFlyIn {
  0% {
    opacity: 0; /* Unsichtbar */
    transform: translateY(100px) scale(0.5); /* Unten und klein */
  }
  60% {
    opacity: 1; /* Sichtbar */
    transform: translateY(-20px) scale(1.5); /* Oben und groß */
  }
  80% {
    transform: translateY(5px) scale(1.1); /* Leichte Bewegung */
  }
  100% {
    opacity: 1; /* Sichtbar */
    transform: translateY(0) scale(1); /* Normal */
  }
}

/* Flexbox-Layout für Profil-Box */
.profile-box {
    display: flex; /* Flexbox */
    flex-direction: column; /* Vertikal */
    align-items: center; /* Zentrieren */
}

/* Gradient-Linie */
.gradient-line {
    height: 5px; /* Höhe */
    width: 100%; /* Volle Breite */
    border-radius: 5px; /* Abgerundet */
    margin: 0px 20px; /* Margin */
    background: linear-gradient(90deg, #1f2226, #8a9198, #1f2226); /* Gradient */
}

/* Untere Linie */
.bottom-line{
  margin-top: 15px; /* Oberer Abstand */
}

/* Info-Bereich mit Grid-Layout */
.info {
  display: grid; /* Grid */
  grid-template-columns: 140px 1fr; /* Zwei Spalten */
  column-gap: 70px; /* Spaltenabstand */
  row-gap: 10px; /* Zeilenabstand */
  font-size: 1.4rem; /* Schriftgröße */
  margin-left: 10px; /* Linker Abstand */
}

/* Label in Info */
.label {
  font-weight: bold; /* Fett */
}

/* Wert in Info */
.value {
  text-align: left; /* Links ausgerichtet */
}

/* ================================================== */
/*                 FOOTER                             */
/* ================================================== */

/* Footer-Container */
.footer {
  position: relative; /* Relativ */
  width: 100%; /* Volle Breite */
  height: 140px; /* Höhe */
  overflow: hidden; /* Überlauf verstecken */
  color: var(--primary-font-color); /* Weiße Schrift */
  display: flex; /* Flexbox */
  align-items: center; /* Zentrieren */
  justify-content: center; /* Zentrieren */
}

/* Spezieller Footer für Galerie */
.gallery-footer{
  position: relative; /* Relativ */
  width: 100%; /* Volle Breite */
  height: 140px; /* Höhe */
  overflow: hidden; /* Überlauf verstecken */
  color: var(--primary-font-color); /* Weiße Schrift */
  display: flex; /* Flexbox */
  align-items: center; /* Zentrieren */
  justify-content: center; /* Zentrieren */
  background-color: var(--primary-color); /* Dunkler Hintergrund */
}

/* Hintergrundvideo im Footer */
.footer-bg-video {
  position: absolute; /* Absolut */
  top: 50%; /* Vertikal zentrieren */
  left: 50%; /* Horizontal zentrieren */
  min-width: 100%; /* Minimale Breite */
  min-height: 100%; /* Minimale Höhe */
  width: auto; /* Automatische Breite */
  height: auto; /* Automatische Höhe */
  transform: translate(-50%, -50%); /* Zentrierung */
  object-fit: cover; /* Video skalieren */
  z-index: -1; /* Hintergrund */
}

/* Footer-Inhalt */
.footer-content {
  position: relative; /* Relativ */
  z-index: 1; /* Über Video */
  display: flex; /* Flexbox */
  gap: 20px; /* Abstand */
  text-align: center; /* Zentriert */
  font-size: 1.4rem; /* Schriftgröße */
}

/* Links im Footer */
footer a {
  text-decoration: none; /* Keine Unterstreichung */
  color: var(--primary-font-color); /* Weiße Schrift */
  font-weight: bold; /* Fett */
}

/* ================================================== */
/*                           PROJEKTE                 */
/* ================================================== */

/* Hauptcontainer für Projekte-Seite */
.projekte-main-container {
  background: var(--secondary-color); /* Heller Hintergrund */
  padding: 150px 10px 10px 10px; /* Padding */
}

/* Überschrift für Projekte */
.projekte-heading{
  font-size: 4rem; /* Große Schrift */
  margin-bottom: 20px; /* Unterer Abstand */
}

/* Einleitungstext für Projekte */
.einleitung-projekte {
  text-align: center; /* Zentriert */
  font-size: 20px; /* Schriftgröße */
  font-weight: bold; /* Fett */
  margin-top: 100px; /* Oberer Abstand */
  line-height: 1.6; /* Zeilenhöhe */
}

/* Container für Projekt-Items */
.projekte-container {
  display: flex; /* Flexbox */
  justify-content: center; /* Zentrieren */
  gap: 100px; /* Abstand */
  margin: 80px 0px 0px 0px; /* Margin */
  flex-wrap: wrap; /* Umbruch */
  overflow: hidden; /* Überlauf verstecken */
}

/* Einzelnes Projekt */
.projekt {
  width: 600px; /* Breite */
}

/* Hover-Effekt für Projekt-Bilder */
.projekt img:hover {
  transform: translateY(-4px); /* Nach oben bewegen */
  box-shadow: var(--shadow-soft); /* Schatten */
}

/* Projekt-Bilder */
.projekt img {
  width: 100%; /* Volle Breite */
  height: 400px; /* Höhe */
  border-radius: 10px; /* Abgerundet */
  object-fit: cover; /* Bild skalieren */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Übergänge */
}

/* Textbereich für Projekte */
.projekt-text {
  background-color: var(--transparent-background); /* Halbtransparent */
  box-shadow: var(--shadow-soft); /* Schatten */
  padding: 15px; /* Padding */
  text-align: center; /* Zentriert */
  border-radius: 8px; /* Abgerundet */
  margin: 20px 0 30px 0; /* Margin */
}

/* ================================================== */
/*                      LAUFBAHN                      */
/* ================================================== */

/* Laufbahn-Bereich mit Grid-Layout */
.Laufbahn {
  display: grid; /* Grid */
  grid-template-columns: repeat(auto-fit, minmax(300px, 500px)); /* Responsive Spalten */
  gap: clamp(80px, 120px, 200px); /* Abstand */
  background-color: var(--secondary-color); /* Heller Hintergrund */
  padding: 250px 85px 85px 85px; /* Padding */
  align-items: center; /* Zentrieren */
  justify-content: center; /* Zentrieren */
}

/* Karten für Laufbahn */
.cards {
  display: flex; /* Flexbox */
  justify-content: center; /* Zentrieren */
  align-items: center; /* Zentrieren */
  background: var(--transparent-background); /* Halbtransparent */
  border-radius: 16px; /* Abgerundet */
  box-shadow: var(--shadow-main); /* Schatten */
  padding: 20px; /* Padding */
}

/* Iframes in Karten */
.cards iframe {
  width: 220px; /* Breite */
  height: 220px; /* Höhe */
  border-radius: 16px; /* Abgerundet */
}

/* Inhalt der Karten */
.cards-content {
  flex: 1; /* Flex-grow */
}

/* Text in Karten */
.cards-content p {
  font-size: 15px; /* Schriftgröße */
  color: var(--secondary-font-color); /* Schwarze Schrift */
  line-height: 1.5; /* Zeilenhöhe */
  text-align: center; /* Zentriert */
  margin-right: 10px; /* Rechter Abstand */
}

/* Button-Stil */
.btn {
  display: inline-block; /* Inline-Block */
  padding: 12px 25px; /* Padding */
  background-color: var(--primary-color); /* Dunkler Hintergrund */
  color: var(--primary-font-color); /* Weiße Schrift */
  text-decoration: none; /* Keine Unterstreichung */
  font-weight: bold; /* Fett */
  border-radius: 8px; /* Abgerundet */
  transition: background-color 0.3s, transform 0.2s; /* Übergänge */
  margin-top: 10px; /* Oberer Abstand */
}

/* Hover für Button */
.btn:hover {
  background-color: var(--secondary-font-color); /* Schwarzer Hintergrund */
}

/* ================================================== */
/*                STUNDENPLAN                         */
/* ================================================== */

/* Wrapper für Stundenplan */
.Stundenplan-wrapper {
  display: flex; /* Flexbox */
  justify-content: center; /* Zentrieren */
  align-items: center; /* Zentrieren */
  background-color: var(--secondary-color); /* Heller Hintergrund */
  padding-bottom: 50px; /* Unteres Padding */
}

/* Stundenplan-Container */
.Stundenplan {
  width: 1000px; /* Breite */
  padding: 20px; /* Padding */
  border-radius: 20px; /* Abgerundet */
  box-shadow: var(--shadow-light); /* Leichter Schatten */
}

/* Hauptüberschrift */
h1 {
  text-align: center; /* Zentriert */
  margin-bottom: 25px; /* Unterer Abstand */
  color: var(--primary-color); /* Dunkle Farbe */
}

/* Tabelle */
table {
  width: 100%; /* Volle Breite */
  border-collapse: collapse; /* Rahmen zusammenführen */
  overflow: hidden; /* Überlauf verstecken */
  border-radius: 12px; /* Abgerundet */
}

/* Tabellen-Header */
th {
  background: var(--primary-color); /* Dunkler Hintergrund */
  color: white; /* Weiße Schrift */
  padding: 10px; /* Padding */
  font-size: 14px; /* Schriftgröße */
}

/* Tabellen-Zellen */
td {
  border: 1px solid #e5e7eb; /* Rahmen */
  height: 45px; /* Höhe */
  text-align: center; /* Zentriert */
  font-size: 13px; /* Schriftgröße */
}

/* Hover für Tabellen-Zellen */
td:hover {
  background: rgb(173, 166, 156); /* Heller Hintergrund */
}

/* Stunden-Spalte */
.hour {
  background: var(--primary-color); /* Dunkler Hintergrund */
  color: white; /* Weiße Schrift */
  font-weight: bold; /* Fett */
  width: 80px; /* Breite */
}

/* ================================================== */
/*                Galerie                             */
/* ================================================== */

/* Hauptbereich der Galerie */
.gallery-main{
    padding: 190px 0px 30px 0px; /* Padding */
    text-align: center; /* Zentriert */
    color: var(--primary-color); /* Dunkle Schrift */
    
    /* Parallax-Hintergrund */
    background-image: url(images/Halbmond.jpg); /* Hintergrundbild */
    background-attachment: scroll; /* Scroll-Verhalten */
    background-position: center top; /* Position */
    background-repeat: no-repeat; /* Keine Wiederholung */
    background-size: cover; /* Abdecken */
}

/* Überschrift der Galerie */
.gallery-heading{
    font-size: 4rem; /* Große Schrift */
    font-weight: bolder; /* Sehr fett */
    color: var(--secondary-color); /* Helle Farbe */
}

/* Galerie-Grid */
.gallery{
    padding: 20px 40px; /* Padding */
    display: grid; /* Grid */
    gap: 30px; /* Abstand */
    grid-template-columns: repeat(4, minmax(240px, 1fr)); /* 4 Spalten */
    grid-auto-rows: 220px; /* Zeilenhöhe */
    grid-auto-flow: row dense; /* Dichte Füllung */
    justify-content: center; /* Zentrieren */
}

/* Galerie-Items */
.gallery-item{
    overflow: hidden; /* Überlauf verstecken */
    border-radius: 10px; /* Abgerundet */
    box-shadow: var(--shadow-main); /* Schatten */
    position: relative; /* Relativ */
    cursor: pointer; /* Zeiger */
    margin: 0px; /* Kein Margin */
}

/* Bilder in Galerie-Items */
.gallery-item img{
    width: 100%; /* Volle Breite */
    height: 100%; /* Volle Höhe */
    object-fit: cover; /* Skalieren */
    filter: grayscale(100%); /* Schwarzweiß */
    transition: transform 0.5s ease, filter 0.5s ease; /* Übergänge */
}

/* Hover für Galerie-Bilder */
.gallery-item:hover img{
    transform: scale(1.1); /* Vergrößern */
    filter: grayscale(0%); /* Farbe */
}

/* Spezielle Grid-Positionen für einige Items */
.gallery-item:nth-child(1),
.gallery-item:nth-child(8),
.gallery-item:nth-child(4){
    grid-column: span 2; /* 2 Spalten */
    grid-row: span 2; /* 2 Zeilen */
}

/* ================================================== */
/*                  MEDIA QUERY                       */
/* ================================================== */

@media (max-width: 768px) {

 /* ================================================== */
 /*                  Header      MEDIA               */
 /* ================================================== */

  /* Logo für mobile Ansicht */
  .Logo img {
    margin-left: 40px; /* Linker Abstand */
    width: 180px; /* Breite */
    height: 130px; /* Höhe */
  }

  /* Navigation für mobile */
  nav ul {
    flex-direction: column; /* Vertikal */
    gap: 10px; /* Abstand */
    margin-right: 80px; /* Rechter Abstand */
    font-size: 20px; /* Schriftgröße */
    display: none; /* Versteckt */
  }

  /* Hamburger-Menü anzeigen */
  .hamburger {
    display: block; /* Sichtbar */
  }

  /* Header-Padding für mobile */
  header {
    padding: 5px; /* Wenig Padding */
  }

 /* ================================================== */
 /*                           Footer MEDIA               */
 /* ================================================== */
  /* Footer-Höhe für mobile */
  #footer{
    height: 100px; /* Höhe */
  }

  /* Footer-Inhalt Schriftgröße */
  .footer-content{
    font-size: 1rem; /* Schriftgröße */
  }
  
 /* ================================================== */
 /*                  HOME   MEDIA                      */
 /* ================================================== */
  
  /* Profil-Box für mobile */
  .profile-box {
    height: 300px; /* Höhe */
    width: 300px; /* Breite */
  }

  /* Info für mobile */
  .info {
    font-size: 1rem; /* Schriftgröße */
    column-gap: 20px; /* Spaltenabstand */
  }

  /* Heading für mobile */
  .heading{
    gap: 50px; /* Abstand */
  }

  /* Profilbild für mobile */
  .profile-image{
    width: 60px; /* Breite */
    height: 60px; /* Höhe */
  }

  /* Text in Profil-Box für mobile */
  .profile-box p{
    font-size: 3rem; /* Schriftgröße */
  } 

   /* ================================================== */
   /*                Projekte MEDIA                      */
   /* ================================================== */

  /* Einleitung für mobile */
  .einleitung-projekte {
    font-size: 15px; /* Schriftgröße */
    margin: 0 10px; /* Margin */
  }
  
  /* Überschrift für mobile */
  .projekte-heading{
    font-size: 3rem; /* Schriftgröße */
    margin-bottom: 20px; /* Unterer Abstand */
  }

  /* Container für mobile */
  .projekte-container {
    gap: 30px; /* Abstand */
    margin: 40px 0; /* Margin */
  }

  /* Projekt für mobile */
  .projekt {
    width: 300px; /* Breite */
  }

  /* Bilder für mobile */
  .projekt img {
    height: 200px; /* Höhe */
  }

  /* Text für mobile */
  .projekt-text {
    font-size: 14px; /* Schriftgröße */
  }

  
   /* ================================================== */
   /*                  Laufbahn MEDIA                    */
   /* ================================================== */

  /* Karten für mobile */
  .cards {
    flex-direction: column-reverse; /* Vertikal umgekehrt */
    text-align: center; /* Zentriert */
  }

  /* Iframes für mobile */
  .cards iframe {
    width: 180px; /* Breite */
    height: 180px; /* Höhe */
  }

  /* Text für mobile */
  .cards-content p {
    text-align: center; /* Zentriert */
  }

   /* ================================================== */
   /*             Stundenplan MEDIA                      */
   /* ================================================== */

  /* Wrapper für mobile */
  .Stundenplan-wrapper{
    overflow-x: auto; /* Horizontales Scrollen */
    padding: 0 10px 40px 10px; /* Padding */
  }

  /* Stundenplan für mobile */
  .Stundenplan {
    width: 400px; /* Breite */
  }

  /* Tabelle für mobile */
  table {
    width: 100%; /* Volle Breite */
  }

  /* Zellen für mobile */
  td {
    height: 25px; /* Höhe */
    font-size: 8px; /* Schriftgröße */
    padding: 4px; /* Padding */
  }

  /* Header für mobile */
  th{
    font-size: 9px; /* Schriftgröße */
    padding: 4px; /* Padding */
  }

  /* ================================================== */
  /*                  Gallery MEDIA                      */
  /* ================================================== */

  /* Galerie-Haupt für mobile */
  .gallery-main{
  padding: 130px 0 50px 0; /* Padding */
}

  /* Überschrift für mobile */
  .gallery-heading{
  font-size: 2.4rem; /* Schriftgröße */
  margin-bottom: 20px; /* Unterer Abstand */
}

  /* Galerie-Grid für mobile */
  .gallery{
  padding: 20px 16px; /* Padding */
  max-width: 720px; /* Maximale Breite */
  margin: 0 auto; /* Zentrieren */
  display: grid; /* Grid */
  gap: 16px; /* Abstand */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 Spalten */
  grid-auto-rows: 200px; /* Zeilenhöhe */
  grid-auto-flow: row dense; /* Dichte */
  justify-content: center; /* Zentrieren */
}

  /* Items für mobile */
  .gallery-item{
  grid-column: span 1; /* 1 Spalte */
  grid-row: span 1; /* 1 Zeile */
}

  /* Spezielle Items für mobile */
  .gallery-item:nth-child(1){
  grid-column: span 2; /* 2 Spalten */
  grid-row: span 1; /* 1 Zeile */
}

  .gallery-item:nth-child(4),
  .gallery-item:nth-child(8){
  grid-column: span 1; /* 1 Spalte */
  grid-row: span 2; /* 2 Zeilen */
}

}

/* ================================================== */
/*                iPad / Tablet MEDIA                 */
/*                                                    */
/* ================================================== */
@media (min-width: 769px) and (max-width: 1024px) {

 /* ---------- Header ---------- */
 /* Header für Tablet */
 header {
   padding: 16px 4px; /* Padding */
 }
 /* Logo für Tablet */
 .Logo img {
   margin-left: 24px; /* Linker Abstand */
   margin-right: 24px; /* Rechter Abstand */
   width: clamp(140px, 18vw, 180px); /* Responsive Breite */
 }
 /* Navigation für Tablet */
 nav ul {
   gap: clamp(30px, 5vw, 60px); /* Abstand */
   margin-right: 40px; /* Rechter Abstand */
   font-size: clamp(18px, 2.2vw, 28px); /* Schriftgröße */
 }
 /* Hamburger verstecken */
 .hamburger {
   display: none; /* Versteckt */
 }

 /* ---------- Main Card ---------- */
 /* Hauptbereich für Tablet */
 main {
   height: 75vh; /* Höhe */
 }
 /* Container für Tablet */
 .main-container {
   height: 75vh; /* Höhe */
 }
 /* Profil-Box für Tablet */
 .profile-box {
   width: 420px; /* Breite */
   height: auto; /* Automatische Höhe */
   padding: 24px; /* Padding */
 }
 /* Text für Tablet */
 .profile-box p {
   font-size: 2.4rem; /* Schriftgröße */
   margin: 16px 0 28px 0; /* Margin */
 }
 /* Info für Tablet */
 .info {
   grid-template-columns: 130px 1fr; /* Spalten */
   column-gap: 40px; /* Abstand */
   font-size: 1.2rem; /* Schriftgröße */
 }

 /* Heading für Tablet */
 .heading{
  gap: 70px; /* Abstand */
}

 /* Profilbild für Tablet */
.profile-image{
  width: 80px; /* Breite */
  height: 80px; /* Höhe */
}
 /* ---------- Projekte ---------- */
 /* Container für Tablet */
 .projekte-main-container {
   padding: 140px 20px 20px 20px; /* Padding */
 }
 /* Einleitung für Tablet */
 .einleitung-projekte {
   margin-top: 60px; /* Oberer Abstand */
   font-size: 18px; /* Schriftgröße */
 }
 /* Projekt-Container für Tablet */
 .projekte-container {
   gap: 50px; /* Abstand */
   margin: 60px 0; /* Margin */
 }
 /* Projekt für Tablet */
 .projekt {
   width: 480px; /* Breite */
 }
 /* Bilder für Tablet */
 .projekt img {
   height: 320px; /* Höhe */
 }

 /* ---------- Laufbahn ---------- */
 /* Laufbahn für Tablet */
 .Laufbahn {
   padding: 200px 40px 70px 40px; /* Padding */
   gap: 60px; /* Abstand */
 }
 /* Iframes für Tablet */
 .cards iframe {
   width: 200px; /* Breite */
   height: 200px; /* Höhe */
 }

 /* ---------- Stundenplan ---------- */
 /* Wrapper für Tablet */
 .Stundenplan-wrapper {
   padding: 0 20px 50px 20px; /* Padding */
 }
 /* Stundenplan für Tablet */
 .Stundenplan {
   width: min(1000px, 100%); /* Maximale Breite */
 }

 /* ---------- Galerie ---------- */
 /* Galerie-Haupt für Tablet */
 .gallery-main {
   padding: 170px 0px 60px 0px; /* Padding */
 }
 /* Überschrift für Tablet */
 .gallery-heading {
   font-size: 3rem; /* Schriftgröße */
 }
 /* Galerie-Grid für Tablet */
 .gallery {
   padding: 20px 24px; /* Padding */
   grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 Spalten */
   grid-auto-rows: 220px; /* Zeilenhöhe */
   gap: 20px; /* Abstand */
 }
 
 /* Spezielle Items für Tablet */
 .gallery-item:nth-child(1),
 .gallery-item:nth-child(4),
 .gallery-item:nth-child(8) {
   grid-column: span 2; /* 2 Spalten */
   grid-row: span 2; /* 2 Zeilen */
 }
}

/* ================================================== */
/*                   Laptop MEDIA                     */
/*                                                    */
/* ================================================== */
@media (min-width: 1025px) and (max-width: 1440px) {

 /* ---------- Header ---------- */
 /* Header für Laptop */
 header {
   padding: 18px 32px; /* Padding */
 }
 /* Logo für Laptop */
 .Logo img {
   margin-left: 40px; /* Linker Abstand */
   margin-right: 40px; /* Rechter Abstand */
   width: clamp(140px, 14vw, 180px); /* Breite */
 }
 /* Navigation für Laptop */
 nav ul {
   gap: clamp(50px, 6vw, 90px); /* Abstand */
   margin-right: 80px; /* Rechter Abstand */
   font-size: clamp(18px, 2vw, 34px); /* Schriftgröße */
 }
 /* ---------- Main Card ---------- */

 /* Profilbild für Laptop */
.profile-image{
  width: 90px; /* Breite */
  height: 90px; /* Höhe */
}

 /* ---------- Projekte ---------- */
 /* Container für Laptop */
 .projekte-main-container {
   padding: 150px 20px 20px 20px; /* Padding */
 }
 /* Projekt für Laptop */
 .projekt {
   width: 520px; /* Breite */
 }
 /* Bilder für Laptop */
 .projekt img {
   height: 360px; /* Höhe */
 }

 /* ---------- Laufbahn ---------- */
 /* Laufbahn für Laptop */
 .Laufbahn {
   padding: 220px 60px 85px 60px; /* Padding */
   gap: clamp(60px, 6vw, 110px); /* Abstand */
 }

 /* ---------- Stundenplan ---------- */
 /* Wrapper für Laptop */
 .Stundenplan-wrapper {
   padding: 0 24px 50px 24px; /* Padding */
 }
 /* Stundenplan für Laptop */
 .Stundenplan {
   width: min(1100px, 100%); /* Breite */
 }
 
 /* ---------- Galerie ---------- */
 /* Galerie-Grid für Laptop */
 .gallery {
   padding: 20px 32px; /* Padding */
   grid-template-columns: repeat(4, minmax(220px, 1fr)); /* 4 Spalten */
   grid-auto-rows: 220px; /* Zeilenhöhe */
   gap: 24px; /* Abstand */
 }
}