:root{
    --content-width: 700px;

    --header-color-one: rgb(230, 210, 77);
    --header-color-two: rgb(73, 129, 77);
    --header-color-three: rgb(199, 113, 76);

    --page-background: white;

    --body-scroll-position: 0;

    --scroll-scale: 1;
    /* --page-background: rgb(138, 138, 138); */
/* --page-background: black; */

        /* --page-background: rgb(71, 125, 114); */

    --text-color: rgb(38, 38, 38);
    /* --text-color: rgb(183, 160, 13); */
    --text-highlight-color: rgb(105, 105, 105);
}

html,
body{
    margin: 0;
    padding: 0;
    /* z-index: -1000; */
    /* overflow-x: hidden; */
    -webkit-overflow-scrolling:touch; 
    overscroll-behavior-y: none;
    scroll-behavior: smooth;
    box-sizing: border-box;
    max-width: 100vw;

}

body{
/*
    -webkit-overflow-scrolling:touch; 
    overscroll-behavior-y: none; */

    /* height: calc(var(--vh, 1vh) * 100); */
    height: auto;
    /* background-color: var(--page-background); */
    color: var(--text-color);

}

.section{
    width: 100vw;
    margin: 0;
    position: relative;
    padding: 1px 0px;
    font-family: "Oswald", sans-serif;
    overflow: visible;

      scroll-margin-top: 80px;
      z-index: 1;
      background-color: transparent;
}

.section h1{
    font-family: "Oswald";
    font-weight: 700;
    font-size: 2.2rem;
}

.section h2 {
    font-size: 1.5rem;
    margin-bottom: 0px;
    margin-top: 50px;
}

.section h6{
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.section p{
    font-family: "Oswald";
    font-weight: 300;
    font-size: 1.4rem;
}




#first{
    position: relative;
    height: auto;
  /* margin-top: 80px; damit es nicht unter die fixed Topbar rutscht */
  color: rgb(200,200,200);
}

.section-content {
    box-sizing: border-box;
    display: relative;
    max-width: var(--content-width);
    margin: 70px auto 80px auto; /* wichtig! Abstand zur Topbar */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}



/*
    TEXT FORMATIERUNG
*/
.bold{
    font-weight: 900;
    background-color: lightblue;
}


a ,
a:visited{
    color: rgb(122, 122, 122);
}

a:hover{
    color: rgb(170, 170, 170);
}



.toggle-button{
    font-family: "Oswald";
    font-weight: 100;
    font-size: 3.0rem;
    /* vertical-align:middle; */
    
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
    user-select: none;

    /* transform: translateY(-10px); */
}

.medien-header-flex{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    background-color: rgba(0,0,0, 0.1);
}

.medien-header{
    display: inline !important;
    margin-top: 0 !important;
}

.medien-body{
    display: none;
}

.medienmitteilung {
    margin-top: 25px;
}

/* 
Trennlinie */

.divider{
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.divider-hexagon {
    background: var(--text-color);
  -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}

.size1{
    width: 16px;
    height: 16px;
}

.size2{
    width: 12px;
    height: 12px;
}

.size3{
    width: 8px;
    height: 8px;
}

.divider-line{
    background-color: var(--text-color);
    height: 1px;
    flex-grow: 1;
    margin-left: 40px;
    margin-right: 40px;
}





/* 
BUTTONS */


/* General Button Style */
.button{
    font-family: "Oswald";
  display:inline-block;
  position: relative;
  color: var(--page-background);
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  padding: 15px 50px;
  text-align: center;
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  background-color: #161213;
  /* background-image: radial-gradient(200% 70% at center 20%, rgba(48,44,45,1) -30%, rgba(50,46,47,1) 49%, rgba(22,18,19,1) 50%, rgba(22,18,19,1) 150%); */
  background-repeat: no-repeat;
  transition: background-position-y ease-in-out 250ms;
}



.button:hover{
  color: white;
  background-color: #545454;
}


/* RANDOM HEXAGONS */
#random-hexagon-container{
    /* position: absolute; */
    z-index: -1;
    background-color: transparent;
    pointer-events: none;
    transition: transform 0.5s ease;
    transform-origin: left center; /* Sicherstellen, dass Ursprung links ist */
    max-width: 100vw;
    margin: 0;
    padding:0;
    box-sizing: border-box;
    overflow:hidden;
    
    /* background-color: blue; */
    
}

.random-hexagon{
    width: 300px;
    height: 300px;
    position: absolute;
    /* left: -80px;
    top: 20px; */
    -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    background-color: rgb(232, 232, 11);
    z-index: 1;
}




/* TOP BAR UND NAVIGATION */


#mobile-menu-button{

  transition: transform 0.5s ease;

    display:none;
    background-color: black;
    color: white;
    width: 85px;
    height: 85px;
    font-size: 70px;
    vertical-align: top;

    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 11;

    -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}


#mobile-menu-button span {
    background-color: yellow;
    margin: 0; /* Wichtig, da <p> default margin hat */
  padding: 0;

}

#main-container {
  transition: transform 0.5s ease;

  /* background-color: var(--page-background); */
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    max-width: 100vw;

}



#main-container.shifted {
  transform: translate(-70vw, 0);
}

#mobile-menu-button.shifted{
    transform: translate(-70vw, 0) rotate(90deg);
}

#random-hexagon-container.shifted{
      transform: translate(-70vw, 0);
}

#mobile-menu.visible{
    opacity: 1;
    transform: translate(0, 0);
}


#mobile-menu{
    max-height: 100vh;      /* Maximalhöhe auf Viewport-Höhe begrenzen */
    /* overflow-y: scroll;   */
    position: fixed;
    opacity: 0;
    top: 0;
    right: 0;
    z-index: 10;
    width: 70vw;
    height: 100vh;
    transform: translate(70vw, 0);

    text-align: right;
    background-color: black;

    font-family: "Oswald", sans-serif;
    color: white;
    transition: transform 0.5s ease;
    /* transition: opacity 0.5s ease; */

}

#mobile-menu.shifted{
      transform: translate(-70vw, 0);
}


 #mobile-menu a{
    text-decoration: none;
    color: white;
    background-color: black;
}

.mobile-nav-item{
    font-size: 6vh;
    font-family: "Oswald", sans-serif;
    margin: 15px;
    /* background-color: white; */
    /* display: block;
    text-align: right;
    width: fit-content; 
*/
}



#top-bar{
    font-family: "Oswald", sans-serif;
    font-weight: 300;
    font-size: 20px;

    width: 100vw;
    padding: 20px;
    box-sizing: border-box;
    position: fixed;
    top:0;
    left: 0;
    background-color: var(--page-background);

    z-index: 111;
    /* box-shadow: 0px 0px 5px rgb(58, 58, 58); */
    border-bottom: 1px solid rgb(58,58,58);

    display: flex;
    flex-direction: row;
    justify-content: space-between;

}

#top-bar img{
    width: 90px;
}

.navigation{
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 30px;
}

#top-bar a{
    text-decoration: none;
    color: var(--text-color);
}

#top-bar a:visited{
    text-decoration: none;
    color: var(--text-color);  
}  

#top-bar a:hover{
    color: var(--text-highlight-color);
}




.intern
{
    background-color: black !important;
}

.intern * {
        color: white !important;

}


.footer-link,
.footer-link:visited{
    color: white;
    text-decoration: none;
}

.footer-link:hover{
    color: rgb(170, 170, 170);
}

#kontakt{
    font-family: "Oswald", Arial, sans-serif;
}

#kontakt span{
    font-weight: 300;
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.mail-link{
    color: black;
}

.download-link,
.download-link:visited{
    color: black;
    text-decoration: none;
}


.show-mail-button{
    padding: 10px;
    border: 1px solid black;
    color: black;
    border-radius: 3px;
    margin-left: 10px;
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 500;
}

/* HEADER HEXAGONS */


/* #big-logo,
#big-logo img{
    width: 45vw;
    opacity: 1;
    -webkit-filter: drop-shadow(5px 5px 5px black);
    filter: drop-shadow(10px 10px 10px rgba(92, 90, 90, 0.2));
} */


.header-background{
  /* position: fixed; */
    /* background-image: url("img/background.png"); */
  /* padding-top: calc(100vh / 10); */
  top: 0;
  left: 0;
  width: 100vw;
 height: 100vh;

  z-index: -1;
  opacity: 1;
  
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header-background img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.header-background-grid{
    display: flex;
  flex-direction: row;
  justify-content: center;

}


.header-text{
    width: 100vw; /* wenn es nur so breit sein soll wie der Text */
    margin-top: 50px;
    font-size: 3vw;
    font-weight: 500;
    font-family: "Oswald", sans-serif;
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
}

.more-info{
    position: absolute;
    font-size: 5vw;
    color: white;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: scale(var(--scroll-scale)) translate(-50%);
    transform-origin: 0%;
    cursor:pointer;
    z-index: 11;

}



.more-info-span{
      -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    background-color: white;
    padding: 1vw;
    border-radius: 50%;
    width: 5vw;
    height: 5vw;
    display: block;
    text-align: center;
    vertical-align:bottom;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.more-info-p{
    margin: -1vw 0 0 0;
    padding: 0;
    color: black;
}




.header-span{
    background-color: white;
    color: black;
}

#ka{
      background-color: var(--header-color-one);
}

#la{
      background-color: var(--header-color-two);

}

#tan{
      background-color: var(--header-color-three);
    
}




/* OK HEXAGON */

.ok-grid{
  /* position: absolute; */
  
  /* padding-top: calc(100vh / 5);
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  opacity: 1; */

  display: flex;
  flex-direction: column;
  align-items: center;

  margin-top: 50px;
}

.ok-grid-row{
    display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: calc((100vw / 4 - 30px) * -0.1);
}

.ok-grid-row:nth-child(even){
    margin-left: calc((100vw / 4 - 30px) * -0.0); 
}




.ok-grid-hex{
    position: relative;
  z-index: 1;
  width: calc(100vw / 4 - 30px);    
  height: calc(100vw / 4 - 30px);

  -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);

    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Oswald", sans-serif;
    font-weight: 700;
}

.ok-grid-hex img{
     width: calc(100vw / 4 - 30px);    
    height: calc(100vw / 4 - 30px);
    object-fit: contain;
}


.hex-overlay{
      z-index: 11;
    position: absolute;
    top: 0;
    left: 0;
     width: calc(100vw / 4 - 30px);    
  height: calc(100vw / 4 - 30px);

    background-color: rgba(45, 45, 45, 0.7);
    color: rgb(238, 238, 238);

    font-size: 2vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    visibility: hidden;
}

.ok-name,
.ok-funktion{
    display: block;
      -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.ok-name{
    font-weight: 700;
}

.ok-funktion{
    font-weight: 300;
}

.ok-grid-hex:hover .hex-overlay{
    visibility: visible;
}

#ok-title{
    display: block;
    visibility: visible;
    font-size: 1.8rem;
    text-wrap: wrap;
}

#big_logo{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    width: 600px;
    height: auto;
    object-fit: contain;
}



/* FOOTER */

#footer{
    font-family: "Oswald", sans-serif;
    font-weight: 300;
    font-size: 1.3rem;
    background-color: black;
    color: white;
    width: 100vw;

    position:relative;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    box-sizing: border-box;
    padding: 30px;
    z-index: 11;
}



#footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 190%;
}

#footer-gallery-title{
    text-align: right;
}

#footer-gallery {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


#footer-gallery img{
    height: 50px;
    margin: 20px;
    object-fit: contain;
}








/* Smartphones */
/* @media (max-width: 480px) {
   :root{
    --content-width: 300px;
}
} */


@media (max-width: 1200px) {
  /* deine Styles nur für diesen Bereich */
   :root{
    --content-width: 90%;
}  
        
    .ok-grid-hex,
    .ok-grid-hex img,
    .hex-overlay{
        width: calc(40vw - 30px);    
        height: calc(40vw - 30px);
    }

    .ok-grid-hex{
        margin: 0px 0;
    }

    .hex-overlay{
        visibility:visible;
        /* background: linear-gradient(rgba(200,200,200,0.8), rgba(0,0,0,1)) */
        background: linear-gradient(0deg,rgba(23, 18, 18, 1) 0%, rgba(56, 51, 51, 0.48) 40%, rgba(0, 0, 0, 0.01) 100%);
    }

    .ok-name{
        margin-top: calc(15vw);
        font-size: 3.5vw;
    }

    .ok-funktion{
        font-size: 2vw;
    }
    
}



@media (max-width: 768px) {

    #big_logo{
        width: 150px;
        top: 15px;
        left: 15px;
        transform: none;
            -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.4));
        filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.4));    
    }
 
   
    #top-bar{
        display: none;
    }

    #mobile-menu{
        display: block;
    }

    #mobile-menu-button{
        display: flex;
    }

    .section h1{
    font-family: "Oswald";
    font-weight: 700;
    font-size: 2.2rem;
}



    .section p{
        font-family: "Oswald";
        font-weight: 300;
        font-size: 1.2rem;
    }

.button{
    font-weight: 500;
    font-size: 1.2rem;
    padding: 10px 25px;
    text-align: center;
    clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
    background-color: #161213;
    /* background-image: radial-gradient(200% 70% at center 20%, rgba(48,44,45,1) -30%, rgba(50,46,47,1) 49%, rgba(22,18,19,1) 50%, rgba(22,18,19,1) 150%); */
    background-repeat: no-repeat;
    transition: background-position-y ease-in-out 250ms;
}

.header-text{
    font-size: 30px;
    bottom: 35%;
    margin: 0 auto;
    max-width: 90%;
}

.more-info{
    position: absolute;
    font-size: 60px;
    bottom: 15%;
    transform: scale(var(--scroll-scale)) translate(-50%);
    transform-origin: 0%;
}



.more-info-span{
    padding: 10px;

    width: 75px;
    height: 75px;
    
}

.more-info-p{
    margin: -10px 0 0 0;
}

#footer{
    font-weight: 300;
    font-size: 1.3rem;

    
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    gap: 50px;
}

#main-container{
      transform: translate(0, 0);
}

body,html{
    overflow-x: hidden;
    /* height: auto;
    min-height: 100%; */
}

.body-no-scroll {
    overflow-x: hidden;
    overflow-y: hidden;
    position: fixed;   /* verhindert auch Wischen auf Touchgeräten */
    width: 100%;
    top: var(--body-scroll-position);

}

.ok-grid-hex,
.ok-grid-hex img,
.hex-overlay{
    width: calc(90vw - 30px);    
    height: calc(90vw - 30px);
}

.ok-grid-hex{
    margin: 20px 0;
}

.hex-overlay{
    visibility:visible;
    /* background: linear-gradient(rgba(200,200,200,0.8), rgba(0,0,0,1)) */
    background: linear-gradient(0deg,rgba(23, 18, 18, 1) 0%, rgba(56, 51, 51, 0.48) 40%, rgba(0, 0, 0, 0.01) 100%);
}

.ok-name{
    margin-top: calc(40vw);
    font-size: 28px;
}

.ok-funktion{
    font-size: 20px;
}
}