/* Global styles */
body {
  margin: 0;
  font-family: 'DenimINKTRIAL-Regular'; /* Use NeueHaasDisplay-XThin if available, fallback to Arial, sans-serif */
  background-color: #ffffff; /* Set background color */
  scroll-behavior: smooth; /* Smooth scrolling behavior */
}

/* CONTAINER styles -------------------------------- */

.container {
  display: flex; /* Use flexbox for layout */
  height: 100vh; /* Set container height to 100% of viewport height */
}


/* NAVIGATION styles -------------------------------- */

.nav {
  width: 20px; /* Initial width of navigation */
  height: 100%; /* Full height of container */
  background-color: #ff0000; /* Background color of navigation */
  overflow-x: hidden; /* Hide horizontal overflow */
  transition: width 0.3s; /* Smooth transition for width change */
  position: fixed; /* Fixed positioning */
  z-index: 2; /* Higher z-index for navigation bar */
  box-shadow: 0px 0px 30px #0040ff; /* Add shadow: horizontal-offset vertical-offset blur spread color */
}

.nav:hover {
  width: 200px; /* Expand width on hover */
  color: #ff0000;
}

.nav a {
  padding: 16px; /* Padding for navigation links */
  text-decoration: none; /* Remove default link decoration */
  color: transparent; /* Hide text by default */
  font-size: 25px; /* Font size for navigation links */
  display: block; /* Display links as block elements */
  transition: color 0.3s; /* Smooth transition for color change */
}

.nav a {
  color: white; /* Default text color */
}

.nav:hover a {
  color: white; /* Show text on hover */
}


/* SLIDER styles -------------------------------- */

.slider {
  width: 10px; /* Width of handle */
  /* height: 10px; Adjust height as needed */
  cursor: ew-resize; /* Horizontal resize cursor */
  background-color: transparent; /* Background color of slider */



  /* border-radius: 5px; Rounded corners */
}



/* Custom scrollbar styles */
/* For WebKit (Chrome, Safari, Opera) */
::-webkit-scrollbar {
  width: 10px; /* Width of the scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent; /* Color of the track */
}

/* Handle */
::-webkit-scrollbar-thumb {
  background:#0040ff; /* Color of the scrollbar handle */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ff0000; /* Color of the scrollbar handle on hover */
}

.nav::-webkit-scrollbar {
  display: none; /* Hide the scrollbar */
}




/* Responsive styles -------------------------------- */

@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Stack sections vertically on small screens */
  }

  .nav {
    width: 100%; /* Full width on small screens */
    z-index: 1; /* Adjust z-index for mobile view */
  }

  .section {
    flex: 1; /* Take up full width on small screens */
    z-index: 1; /* Adjust z-index for mobile view */
  }

  .section-image{
    resize:horizontal;
  }

  .video{
    resize:horizontal;
  }

}



/* ABOUT -------------------------------- */


.about h2{
  font-size: 70px; /* Font size for h2 */
  line-height: 60px; /* Line height for h2 */
  margin: 20px 40px 20px; /* Top and bottom margins, left margin */
  font-family: 'DenimINKTRIAL-Light'; /* Use NeueHaasDisplay-XThin font */
  color: rgb(255, 255, 255); /* Text color */

}



/* SECTIONS -------------------------------- */

.section {
  flex: 1; /* Take up remaining space */
  height: 100vh; /* Set section height to 100% of viewport height */
  overflow-y: auto; /* Allow vertical scrolling if content overflows */
  transition: flex 0.3s; /* Smooth transition for flex change */
  position: relative; /* Relative positioning for z-index to work */
  z-index: 1; /* Lower z-index for sections */
}

/* SECTION 1 ------------ */


#section1 {
  flex: 3; /* Adjust the value based on your preference */
  min-height: 10px
}  

.section1 {
  box-shadow: 0px 0px 30px #0040ff; /* Add shadow: horizontal-offset vertical-offset blur spread color */
}


/* SECTION 2 ------------ */

#section2 {
  background-color: rgb(0, 0, 0); /* Background color for section 2 */
  flex: 1; /* Set initial width of section 2 */
  margin: 0; /* Remove default margins */
}

#section2 img {
  margin: 0; /* Remove default image margins */
}

#section2 video {
  width: 100%; /* Make the video responsive to the container's width */
  height: auto; /* Maintain the aspect ratio */
}

/* SECTION 3 ------------ */

#section3 {
  background-color: #ff0000; /* Background color for section 3 */
  flex: 2; /* Set initial width of section 3 */
}

/* IMAGES ----------------- */

#resizableImage, .resizableImage {
  max-width: 100%; /* Ensure image does not exceed its natural size */
  height: auto; /* Maintain aspect ratio */
}



/* Paragraph styles -------------------------------- */

p {
  margin: 10px 40px 0; /* Margin for paragraphs */
  font-family: 'DenimINKTRIAL-Regular'; /* Use NeueHaasDisplay-Light font */
  font-size: 30px; /* Font size for p */
  line-height: 40px;
}

.text{
  margin-bottom: 15px;
}


/* Heading styles -------------------------------- */

h1 {
  font-size: 120px; /* Font size for h1 */
  line-height: 100px; /* Line height for h1 */
  margin: 30px 40px 20px; /* Top and bottom margins, left margin */
  font-family: 'DenimINKTRIAL-Light'; /* Use NeueHaasDisplay-XThin font */
  color: rgb(0, 0, 0); /* Text color */
}

h1 #text1{
  margin-top: 35px;  /* Top, right, bottom, left margins */
  margin-bottom: 60px;
  color: #ff0000;
}

h2 {
  font-size: 35px; /* Font size for h2 */
  line-height: 40px; /* Line height for h2 */
  margin: 20px 40px 20px; /* Top and bottom margins, left margin */
  font-family: 'DenimINKTRIAL-Light'; /* Use NeueHaasDisplay-XThin font */
  color: rgb(0, 0, 0); /* Text color */

}

h3 {
  font-size: 30px; /* Font size for h3 */
  line-height: 0; /* Remove line height for h3 */
  margin: 35px 40px 70px; /* Top and bottom margins, left margin */
  font-family: 'DenimINKTRIAL-Light'; /* Use NeueHaasDisplay-XThin font */
  color: rgb(0, 0, 0); /* Text color */

}

h4 {
  font-size:80px; /* Font size for h3 */
  line-height: 70px; /* Remove line height for h3 */
  margin: 80px 40px 0; /* Top and bottom margins, left margin */
  font-family: 'DenimINKTRIAL-Light'; /* Use NeueHaasDisplay-XThin font */
  color: rgb(255, 255, 255); /* Text color */
}

h5 {
  font-size: 80px; /* Font size for h2 */
  line-height: 80px; /* Line height for h2 */
  margin: 20px 40px 20px; /* Top and bottom margins, left margin */
  font-family: 'DenimINKTRIAL-Light'; /* Use NeueHaasDisplay-XThin font */
  color: rgb(255, 255, 255); /* Text color */
  font-weight: 300;
}

h6 {
  font-size: 180px; /* Font size for h2 */
  line-height: 160px; /* Line height for h2 */
  margin: 20px 40px 60px; /* Top and bottom margins, left margin */
  font-family: 'DenimINKTRIAL-Light'; /* Use NeueHaasDisplay-XThin font */
  color: rgb(255, 255, 255); /* Text color */
  font-weight: 300;

}

h6:hover {
  color: #000000;
  /* font-family: 'FormatGrotesk-Fett'; */
  font-family: 'DenimINKTRIAL-Regular';
  font-style: italic;
}


.textquelle {
  font-family: 'NeueHaasDisplay-XThin';
  margin: 35px 40px 40px; /* Top, right, bottom, left margins */
  margin-top: 50px;
  line-height: 0px; /* Adjust line height as needed */
  font-weight: 600;
  color: #0040ff;
}

h2.textquelle {
  margin-top: 60px;  /* Top, right, bottom, left margins */
  margin-bottom: 15px; /* Adjust this value as needed */
  color: #0040ff;
}


h3.textquelle {
  margin-top: 40px;  /* Top, right, bottom, left margins */
  margin-bottom: 80px;
  color: #0040ff;
  font-size: 25px;
}



.headline-link text1 {
  margin-top: -15px;
}

.impressum{
  font-size: 40px; /* Font size for h2 */
  line-height: 50px; /* Line height for h2 */
  margin: 20px 40px 20px; /* Top and bottom margins, left margin */
  font-family: 'DenimINKTRIAL-Light'; /* Use NeueHaasDisplay-XThin font */
  color: #ffffff; /* Text color */
  font-weight: 300;
}

/* IMAGES -------------------------------- */


figcaption {
  font-size: 22px;
  line-height: 25px;
  text-align: center;
  margin: 15px 20px 0;
  font-family: 'DenimINKTRIAL-Regular';
  color: rgb(99, 99, 99);
}

figcaption:hover {
  color: #0040ff;
  /* font-family: 'FormatGrotesk-Fett'; */
  font-family: 'DenimINKTRIAL-Regular';
  font-style: italic;
}

figure {
  margin: 15px 0px 50px;
}



.title h1 {
  font-size: 100px; /* Font size for h1 */
  line-height: 100px; /* Line height for h1 */
  margin: 20px 40px 30px; /* Top and bottom margins, left margin */
  font-family: 'NeueHaasDisplay-XThin'; /* Use NeueHaasDisplay-XThin font */
  color: #f2f2f2; /* Text color */
}


.section3 h1 {
  font-size: 120px; /* Font size for h1 */
  line-height: 100px; /* Line height for h1 */
  margin: 20px 40px 30px; /* Top and bottom margins, left margin */
  font-family: 'NeueHaasDisplay-XThin'; /* Use NeueHaasDisplay-XThin font */
  color: rgb(0, 0, 0); /* Text color */
}

.section3 p {
  margin: 10px 40px 0; /* Margin for paragraphs */
  font-family: 'NeueHaasDisplay-Light'; /* Use NeueHaasDisplay-Light font */
  font-size: 60px; /* Font size for p */
}



/* LINKS -------------------------------- */

/* unvisited link */
a:link {
  color: #ff0000;
  text-decoration: none; /* Remove underline */
}

/* visited link */
a:visited {
  color: #ff0000;
  text-decoration: none; /* Remove underline */
}

/* mouse over link */
a:hover {
  color: #ff0000;
  /* font-family: 'FormatGrotesk-Fett'; */
  font-family: 'DenimINKTRIAL-Regular';
  font-style: italic;
  text-decoration: none; /* Remove underline */
}

/* selected link */
a:active {
  color: #ff0000;
}


a.link1 {
  color: #0040ff;
}

a.index-link {
  color: rgb(255, 255, 255);
  font-size: 50px; /* Font size for h1 */
  line-height: 60px; /* Line height for h1 */


}


.headline-link h1 {
  color: black; /* Default color */
}

.headline-link:hover h1 {
  color: #0040ff; /* Color when hovered over */
}




#figure1:target, #figure2:target, #figure3:target, 
#figure4:target, #figure5:target, #figure6:target,
#figure7:target, #figure8:target, #figure9:target, 
#figure10:target, #figure11:target, #figure12:target,
#figure13:target, #figure14:target, #figure15:target,
#figure16:target, #figure17:target, #figure18:target,
#figure19:target, #figure20:target, #figure21:target,
#figure22:target, #figure23:target, #figure24:target,
#figure25:target, #figure26:target, #figure27:target,
#figure28:target, #figure29:target, #figure30:target,
#figure31:target, #figure32:target, #figure33:target,
#figure34:target, #figure35:target, #figure36:target,
#figure37:target, #figure38:target, #figure39:target,
#figure40:target, #figure41:target, #figure42:target,
#figure43:target, #figure44:target, #figure45:target,

#paragraph-1:target, #paragraph-2:target, #paragraph-3:target, #paragraph-4:target,
#paragraph-5:target, #paragraph-6:target,
#paragraph-7:target, #paragraph-8:target,
#paragraph-9:target, #paragraph-10:target,
#paragraph-11:target, #paragraph-12:target,
#paragraph-13:target, #paragraph-14:target,


#pic1:target, #pic2:target, #pic3:target, #pic4:target,
#pic5:target, #pic6:target, #pic7:target, #pic8:target,
#pic9:target, #pic10:target, #pic11:target, #pic12:target

{
  background-color: #0040ff;
  opacity: 0.5;
  animation: fade-in 3s forwards;
}




@keyframes fade-in {

  0% {opacity: 0.5; background-color: #0040ff;}

  100% {opacity: 1; background-color: transparent;
  }
}



/* HIDDEN PAGES -------------------------------- */


.cover, .title-trenner, .quelle {
    display: none;
}