/* Globale Einstellungen und Box-Modell ..............................*/
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden; /* Verhindert natives Scrollen */
  background-color: #000000;
}

/* Basis für Bilder */
img {
  height: 100%;
  width: auto; /* Korrigiert: Verhindert Verzerrung */
}



/* Haupt-Layout Grid ................................................*/
.seite {
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-areas: "sidebar swiper";
    height: 100vh;
    width: 100%;
}

/* SIDEBAR STILE .....................................................*/
.sidebar {
  font-family: "Fragment Mono", monospace;
  font-size: 12px;
  text-underline-offset: 2px;
  line-height: 1.5;
  background-color: #000000;
  padding: 60px;
  height: 100vh;
  grid-area: sidebar;
  overflow-y: auto; /* Scrollen erlaubt */
  overflow-x: hidden;
  /* Redundante display: flex und flex-direction entfernt, da Grid das Hauptlayout macht */
}

.nav-link { 
  color: rgb(255, 255, 255); 
  text-decoration: none; 
  display: inline-block; 
  text-align: left;
  white-space: nowrap;
  transform-origin: left top;
}

.nav-link:hover,
.nav-link.active-link {
    text-decoration: underline; 
    text-decoration: underline; 
    transition: text-decoration 0.2s ease-in-out;
    /* ... weitere Styles ... */
}

.sidebar ul {
  list-style-type: none; /* Entfernt den weißen Punkt/Kugel */
  padding: 0;
  height: auto;
}

.sidebar li {
  margin: 5px 0; 
  /* margin-bottom wird von JS dynamisch gesetzt */
}

.sidebar a {
  color: rgb(255, 255, 255); 
  text-decoration: none; 
  display: inline-block;
  text-align: left;
  white-space: nowrap;
  transform-origin: left top;

}

.sidebar a:hover,
.sidebar a:active { 
    text-decoration: underline; 
    transition: text-decoration 0.2s ease-in-out;
}

.sidebar a.active-link {
    text-decoration: underline; 
    font-weight: bold;          /* Optional: Stärker hervorheben */
    /* Optional: Fügen Sie hier eine eigene Farbe hinzu, falls gewünscht */
    /* color: #FF0000; */
}

.nav{
 color: rgb(255, 255, 255); 
  text-decoration: none; 
  display: inline-block; 
  text-align: left;
  white-space: nowrap;
  transform-origin: left top;
  margin-top: 0px;
  margin-bottom: 0; /* Wichtig für JS-Berechnung */
}
  
/* SWIPER STILE ......................................................*/
.swiper {
  width: 100%;
  height: 100vh;
  grid-area: swiper;
  will-change: transform;
  perspective: 1000px;
  flex-grow: 1; 
  min-width: 0;
}

.swiper-slide {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; /* Zentriert Bild vertikal */
}

/* Bild-Anpassung innerhalb der Slides  ..............................*/
.swiper-slide img { 
  max-width: 100%;
  max-height: 100%; 
  object-fit: contain;
}

video{
 height: 80%;
  width: auto;
}