/* CSS Document TECCON */

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-300.woff') format('woff'); /* Modern Browsers */
    font-display: swap;
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'); /* Modern Browsers */
font-display: swap;
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-500.woff') format('woff'); /* Modern Browsers */
    font-display: swap;
}

#indent0, #indent1, #indent2, #indent3, #indent4, #indent5, #indent6, #indent7, #indent8, #indent9, #indent10, #indent11, #indent12, #indent13, #indent14, #indent15, #indent16, #indent17, #indent18, #indent19 {
	text-indent: -3em;
	padding-left: 3em;
}

#indent20, #indent21, #indent22, #indent23, #indent24, #indent25, #indent26, #indent27, #indent28, #indent29  {
	text-indent: -1.3em;
	padding-left: 1.0em;
}

.bold{font-weight:500;}
.sbold{font-weight:400;}

#image1, #image2, #image3, #image4, #image5,
img.image1, img.image2, img.image3, img.image4, img.image5 {
    object-fit: cover; 
    alt: "";
    loading: "lazy";
        }
.heading, .heading1{
    margin:0em;
    margin-top: 0;
    flex: 1 2 auto;
    position: absolute;
    padding-top: 1rem;
    padding-left:1rem;
    padding-right:1rem;
    padding-bottom: 2vh;
    width:400rem;
    max-width: 80vw; 
    height:auto;
    font-size: clamp(3.2rem, 5vw, 4.8rem) !important;
    line-height: 1.2em;
    font-weight: 500;
    text-align: left;
    text-transform: uppercase;
    justify-content: center;
    allign-items: center;
    allign-content: center;
}
.heading1{
    top: 1vh;
    z-index:  5;
}
.heading{

}

#cookie-message {
    cursor: default;
  border-radius: 5px;
  background: #833;
  color: #ddd;
  padding: 1em 1em 0.5em;
  position: fixed;
  left: -5px;
  font-size: 1em;
  bottom: 3em;
  text-align: left;
  z-index: 1000;
  display: none;
   } 

#cookie-message2 {
  border-radius: 5px;
  background: #833;
  color: #ddd;
  padding: 1em 1em 0.5em;
  position: absolute;
  left: 5px;
  bottom: 2rem;
  text-align: left;
   } 

.clickme {
    background: #552211;
    color:white;
    border: 2px solid #cccccc;
    margin: 8px; 
    padding: 8px; 
    cursor:grab; 
   border-radius: 5px;
}
.clickme:active{
    cursor:grabbing; 
}

  .items, .elements {
    /* Original */
    position: relative;
/*    width: 100%; */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    transform: scale(1);
    will-change: transform;
    user-select: none;
    scroll-behavior: smooth; 
    padding-left:0vw;
    padding-right:0vw;
    width:90vw;
    height:75vh;
    bottom:3vh;
    background:lightgrey; 
    display:flex;
    margin:0;
    flex-direction: row;
    justify-content:left;
    align-items: flex-end;
    z-index: 0;
    flex: 1;
    scroll-snap-type: x mandatory;  
  }

  .item:active, .element:active {
    cursor: grabbing;
    transform: scale(.99);
  }

  .item, .element {
    /* Original */
    cursor: grab;
    display: inline-block;
    white-space: normal;
    flex-grow: 1;
    flex-shrink:0;
    flex-direction: column;
    margin-left:0vh;
    margin-right:1vw;
    position:relative;
    column-gap: 1vw;
    bottom: 5vh;
    width: 50vw;
    min-width:30rem;
    max-width: 320px;
    height: 60vh;
    overflow:hidden;
    z-index: 3;
    scroll-snap-align: start;
    justify-content: flex-end;
    allign-items: flex-end;
    allign-content: flex-end;
/*  end geschaeftsbereich */

  }

  p {
    font: normal 1em/1.5em roboto, Sans-serif;
    margin: 0 0 0.5em 5px;
  }
  .cookie-header {
    font-size: 1.2em;
    cursor: default;
  }
  .cookie-content {
    font-size: 1em;
    display: none;
    width: 20em;
  }
  a {
    color: #fff;
  }

a:hover {
  cursor: pointer;
    color:white;
}

html {
font-size: 62.5%;
height: 100vh;
}


.bild_broschueren{
	position:absolute;
	width: 280px;
	height: 200px;
	bottom: 50px;
	left: 40px;
	z-index:20;
}

.symbol-container{ 
    width:auto;
    right:0;
}

.symbol1, .symbol2, .symbol3{
    top:0;
    position: absolute;
    width:3rem;
    height:3rem;
    overflow:visible;
}

.symbol1{
    right:8rem;
}
.symbol2{
    right:5.2rem;
    top: .45rem;
}
.symbol3{
    right:0;
    width:4rem;
    height:4rem;
    top:-0.9rem;
}
.symbol4{
    position: absolute;
    width:1.12em;
    height:1.5em;
    right:1rem;
    top: 1rem;
    object-fit: cover;
}
.symbol5{
    position: absolute;
    height:1.5em;
    right:1rem;
    bottom: 1rem;
}
.symbol6{
    position: absolute;
    width:1.12em;
    height:1.5em;
    left:35vw;
    right:auto;
    top: 1rem;
}
.symbol7{
    position: absolute;
    height:1.5em;
    right:1rem;
    left:35vw;
    bottom: 1rem;
}

#flip0, #flip1, #flip2, #flip3, #flip4, #flip5, #flip6{
    cursor:pointer;
    padding-top:0;
    padding-left:0rem;
    margin-left:0rem;
    background: none;
    min-width: 10rem;
    }

#flip0{
    right:5rem;
    text-allign:right;
    position:fixed;
    font-size: 10rem;
    font-weight: 400;
    }

#panel1, #panel2, #panel3, #panel4 , #panel5, #panel6{
    min-width:20rem !important;
    display:block;
    }

#firmen{
    position: absolute;
    width:20rem;
    height:auto;
    bottom: 6rem;
    right:5rem;
    text-allign:right;
    font-weight: 400;
    }

.flip20, .flip21, .flip22, .flip23, .flip24{
	color:rgba(255,255,255,.7);
    cursor:pointer;
	font-weight: 500;
    padding-top:0;
    padding-left:0rem;
    margin-left:0rem;
    background: none;
    min-width: 10rem;
    }
.flip20:hover, .flip21:hover, .flip22:hover, .flip23:hover, .flip24:hover{
    color:rgba(255,255,255,1);
    }

#panel20, #panel21, #panel22, #panel23 , #panel24 {
    margin-top: 2rem;
	min-width:20rem !important;
    display:none;
    }

#panel0{
    z-index:3;
    top:  5rem;
    right:0;
    width:auto;
    height:auto;
    overflow:visible;
    position:absolute;
    }

ul {
    display: block;
    list-style-type: none;
    margin-block-start: 0rem;
    margin-block-end: 0rem;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}

.arrow_left{
    font-size:10rem; 
    color:rgba(256, 256, 256, 0.59);
    position: absolute;
    width:auto;
    top:10vh;
    z-index:40;
    left:2vw;
}

.arrow_right{
    font-size:10rem; 
    color:rgba(256, 256, 256, 0.59);
    position: absolute;
    width:auto;
    top:10vh;
    z-index:40;
    right:2vw;
}

p{
    font-size:.75rem
}

r{
    font-size:3rem;
}

a{
    font-size: clamp(1.4rem, 1.3vw, 1.4rem);
}

t{
    font-size:4rem;
    text-align: justify-all;
}


body{
height: 100vh;
  font-size: clamp(1.4rem, 1.3vw, 1.4rem);
  line-height: clamp(1.8rem, 1.6vw, 2rem);;
  background: #ddd;
  margin: 0;
  font-family: 'Roboto', sans-serif; font-weight: 300;
  cursor: default;
}
h1 {
  margin: 2rem;
  opacity: .0;
}

h2 {
  font-size: clamp(3rem, 3.5vw, 4rem);
  line-height: clamp(3rem, 3.5vw, 4rem);
  text-align: center;
  text-transform: uppercase;
  color:  rgba(255,255,255,1);
  opacity: .0;
}

h2l {
  font-size: clamp(2em, 2.5em, 2.75em);
  line-height: clamp(2em, 2.5em, 2.75em);
  font-weight: 500;
  text-align: left;
  text-transform: uppercase;
  color:  rgba(255,255,255,1);
}

h2w {
  font-size: clamp(3rem, 3.5vw, 4rem);
  line-height: 4rem;
    font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  color:  white;
}

h3 {
  font-weight: 500;
  font-size: clamp(3rem, 3.5vw, 4rem);
  line-height: clamp(4rem, 4.5vw, 4rem);
  text-align: center;
  text-transform: uppercase;
  opacity: 1;
  color:  white;
}

h4 {
  font-size: clamp(3rem, 3.5vw, 4rem);;
  line-height: 6rem;
  text-align: center;
  font-weight: 300;
}

h5 {
  font-size: clamp(3rem, 3.5vw, 4rem);;
  line-height: 6rem;
  text-align: left;
  text-transform: uppercase;
}



 #map {
     position:relative;
        width: 100%;
        height: 100%;
        bottom:0;
     z-index:2;
}
.bild_personalanzeige{
	position:relative;
	width: 50px;
	height: 33px;
	right: 0px;
	z-index:20;
}

.bild_brochuere{
	position:relative;
	width: 60px;
	height: 84px;
	right: 0px;
	z-index:20;
}
.text_personalanzeige{
	position:relative;
	width: 65%;
	height: 33px;
	left: 0px;
	z-index:20;
}

#mouse1_cage{
    height:100vh;
    position:absolute;
    top: 0px;
    left:0px;
    z-index: 1000;
}

#mouse2_cage{
    height: auto;
    position:absolute;
    top:20px;
    left:0px;
    z-index: 1000;
}


.table{
    text-align: center;
    position:relative;
	border:0;
}



.scroller_cage{
    margin:0em;
    margin-top: 0;
    z-index: 5;
    flex: 1 1 auto;
    position: absolute;
    top:30vh;
    padding-top: 1rem;
    padding-left:1rem;
    padding-right:1rem;
    padding-bottom: 2vh;
    width:400rem;
    max-width: 80vw; 
    height:auto;
    
    font-size: clamp(3.2rem, 5vw, 4.8rem) !important;
    line-height: 1.2em;
    font-weight: 500;
    text-align: left;
    text-transform: uppercase;
    color:  rgba(255,255,255,1);
    justify-content: center;
    allign-items: center;
    allign-content: center;
}


body.noanim .scroller > span {
    animation-play-state:paused;
} 

/* Scroller styling */
.scroller {
    font-size: clamp(3.2rem, 5vw, 4.8rem) !important;
    text-align: left;
    text-transform: uppercase;
    height: 1.2em;
    top: 2.4em;
    position: absolute;
    left: 0;
    overflow: hidden;
    width: 100%;
    color: rgba(256, 256, 256, 1);
  line-height: 1.2em;
}
.scroller > span {
  position: absolute;
  top: 0;
  animation: slide 6s infinite;
  font-weight: 500;
  
}
@keyframes slide {
  0% {
    top: 2.4em;
  }
  25% {
    top: 0;
  }
  50% {
    top:  -1.2em;
  }
 75% {
    top:  -2.4em;
    }
 100% {
    top: -3.6em;
    }}




/*--------------------------------------------------------------------*/
#typed_output {
  padding: 200px 0 100px 50px;
  color: #fff;
    z-index: 5;
}

.container_output {
  height: 300px;
  background: none;
}



html, body {
  padding: 0;
  margin: 0;
  font-family: "font-family: 'Roboto', sans-serif;"small85
}

.scroll_down {
  position: relative;
  font-weight:300;
  margin: 0px;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: white;
    allign-items: center;
    allign-content: center;
    top: 10px;
    left:-25px;
    width: auto;
}

h11 {
  margin: 0px;
}

h12 {font-weight:300; 
  font-size:clamp(3rem, 3.5vw, 4rem);
  line-height: 60px;
  margin: 0px;
  text-align: left;
  text-transform: none;
  color:rgba(200,200,200,.8);
}

h13 {
  line-height: 20px;
  text-transform: uppercase;
}

h14 {
  font-size: clamp(2em, 4vw, 2.75em);
  line-height: 40px;
  text-align: center;
  font-weight: 300;
}

h15, .overlaytext5 h15, #flip2 h15, #flip3 h15, #flip4 h15, #flip5 h15, #flip6 h15{
  font-size: clamp(1.6rem, 2.0vw, 3rem);
  font-weight: 700;
  line-height: clamp(1.8rem, 2.0vw, 3rem);
  text-align: left;
  text-transform: uppercase;
}

.overlaytext5 a:hoover{
    color:white;
}

.font15{
  font-size: clamp(1.6rem, 2.0vw, 3rem);
  font-weight: 700;
  line-height: clamp(1.8rem, 2.0vw, 3rem

Beim Herumschieben habe ich es übrigens auch geschafft, das );
  text-align: left;
  text-transform: uppercase;
    z-index: 100;
}


 h21 {
	 font-family: 'Inconsolata', Consolas, monospace;
	 font-size: clamp(3rem, 3.5vw, 4rem);
	 color: #d7b94c;
}
 
#logo {
	position: fixed;
	top: 2em;
    left: 2em;
	z-index: 6;
	width: 18vw;	
    min-width: 15rem;
	height: auto;
    display:block;
}

.logo_box{
    position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
    width: 100%;	
	height: calc(3vw + 3.5em);
    /*
	width: 100%;	
	height: 85px;*/
    display:block;
    background-color: rgba(32,68,124,1);  
}

.boxOverlay{
  position:relative;
  padding:3px;
  top:5vh;
  left:0;
  width:50vw;
  height:auto;
  transition: all .75s;
  color:white;
  background-color: rgba(32,68,124,0.50);
  
}

.hoehenausgleich{
    position:absolute;
    display:inline-block;
    flex-direction: row;
    height:auto;
    width: auto;
    z-index: 1;
    overflow: hidden;
}

.map_container{
    position:relative;
    display:block;
    flex-direction: column;
    height:100vh;
    width: 100vw;
    background-color: rgba(32,68,124,0.80);
    z-index: 1;
    overflow: hidden;
}

.container{
    display:block;
    position:relative;
    margin-top:15vh;
    top: 0;
    left:0;
    width: 100%;
    /*
    height: 40vh;*/
     height: 90vh; 
    z-index: 2;
}
.container2{
    display:flex;
    flex-direction: row;
    margin-left:0vh;
    margin-top:0vh;
    position:relative;
    bottom: 0;
    left:0;
    width: 100%;
    height: auto;
    z-index: 3;
}
.hoehenausgleich{
    position:relative;
    column-gap: 1vw;
    top: 0;
    left: 0;
    height: auto;;
    width:100%;
    overflow:hidden;
    z-index: 3;
}

.geschaeftsbereich{
    display:flex;
    flex-grow: 1;
    flex-shrink:0;
    flex-direction: column;
    margin-left:0vh;
    margin-right:1vw;
    position:relative;
    column-gap: 1vw;
    bottom: 5vh;
    width: 40vw;
    min-width:30rem;
    max-width: 270px;
    height: 60vh;
    backgroundcolor: red;
    overflow:hidden;
    z-index: 3;
    scroll-snap-align: start;
}



.geschaeftsbereich2{
    display:flex;
    flex-direction: column;
    position:relative;
    bottom: 15vh;
    left:50vw;
    width: 40vw;
    height: 60vh;
    z-index: 3;
}

.geschaeftsbereich_center{
    display:flex;
    flex-direction: column;
    position:relative;
    top: 30vh;
    left:0;
    width: 90vh;
    height: 60vh;;
    backgroundcolor: red;
    z-index: 3;
}

.geschaeftsbereich3{
    display:flex;
    flex-direction: row;
    margin-left:0vh;
    margin-right:1vh;
    position:relative;
    bottom: 5vh;
    left:1vh;
    width: 60vh;
    height: 60vh;;
    backgroundcolor: red;
    z-index: 3;
    overflow-x: hidden;
}

img {
    object-fit: cover;
    top:0px;
    position: relative;
    width:100%;
    height:100%;
}
.folder{
    top:0px;
    position: relative;
    width:400px;
    height:270px; 
    object: cover;
}

.clip{
    top:0px;
    position: relative;
    width:600px;
    height:337px; 
    object: cover;
}

.header {
    padding: 0px;
    top:50px;
    left:50px;
    font-size: 36px;
    position: relative;
    color: white;
    z-index: 10;
}

.content {
  display: flex; /* NEW */
  width: 100vw;
  height: 100vh;
  background-size: cover;
  overflow-y: hidden;
}

video {
    object-fit: cover;
    top:0px;
    z-index: 3;
    position: relative;
    width:100%;
    height:100%;
    opacity: 1;
}

article {
  overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
 /* scroll-snap-type: y mandatory;
    scroll-snap-type: y proximity;
    Reserve space for header and additional space so above page are visible a bit*/ 
  scroll-padding-top: 0;

  position: absolute;

  width: 100%;
  height: 100vh;
  top:0;
  bottom:0;
  left: 0;
  right: 0;
  padding: 0px 0 0 0;
  
  /* Enable Safari touch scrolling physics which is needed for scroll snap */
  -webkit-overflow-scrolling: touch; 
}

section {
  scroll-snap-align: start; /* snap align start */
  display: flex; 
  max-height: 100vh;
  width: 100%;
  flex-direction: column;
  justify-content: center;
align-items: center;
    overflow-x: hidden;
}

.modal-content-scroll {
    position:relative;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-left:0vw;
    padding-right:0vw;
    width:90vw;
    height:75vh;
    bottom:5vh;
    background:lightgrey;
    display:flex;
    margin:0;
    flex-direction: row;
    justify-content:left;
    align-items: flex-end;
    z-index: 0;
    flex: 1;
    scroll-snap-type: x mandatory;
}   

.modal-content-datenschutz {
    position:relative;
    overflow-x: auto;
    width:100vw;
    height:100vh;
    background-size: cover;
}  
.modal-content, .modal-content0, .modal-content1, .modal-content2, .modal-content3, .modal-content4, .modal-content5, .modal-content6 {
    position:relative;
    flex-direction: row;
    width:100vw;
    height:100vh;
    background-size: cover;
    display:flex;
    justify-content:center;
    align-items: flex-end;
    z-index: 0;
    flex: 1;
}   

.modal-content_backgroundimage, .modal-content_backgroundimage1, .modal-content_backgroundimage2, .modal-content_backgroundimage3 {
    overflow-x: hidden;
    flex-direction: row;
    position: relative;
    justify-content: flex-end;
    allign-items: flex-end;
    allign-content: flex-end;
    background:lightgrey;
    width:100vw;
    height:100vh;
    display:flex;

}   

.mehr, .mehr1, .mehr2, .mehr3{
    position: absolute;
    text-transform: uppercase;
    text-align: center;
    width:3rem;
    height:auto;
    color:rgba(100,100,100,.5); 
    right:2vh;
    z-index: 100;
    background-color: rgba(100,100,100,.2);  
    bottom:  1vh;;
    font-weight:700;
	line-height: 20px;
    border: 2px solid white;
    justify-content:center;
    border-radius: 6px;
    text-decoration: none;
    cursor:pointer;
}
.mehr a:link {  
    color:rgba(255,255,255,.7);
    text-decoration: none;
}

.mehr a:selected {  
    color:rgba(100,100,100,.5);
    text-decoration: none;
}

.mehr a:hover{  
    color: rgba(255,255,255,1);
    text-decoration: none;
}
 
.mehr1 {
    padding: .5rem .5rem .5rem .5rem;
    right:1vh;
    bottom:1rem;
    color:rgba(255,255,255,.7);
}

.mehr {
    padding: .5rem 1.5rem .5rem .5rem;
}
.mehr2 {
    padding: .5rem .5rem .5rem .5rem;
    height:2rem;
    top:.5rem;
    color:rgba(255,255,255,.7);
}
.mehr3 {
    padding: .5rem .5rem .5rem .5rem;
    right:auto;
    left:35vw;
    height:2rem;
    top:.5rem;
    color:rgba(255,255,255,.7);
}


.textblock{
    position: relative;
    padding:5px;
    width:40vw;
    height:50vh;
    z-index: 5;
    background-color: green;
    bottom:  50vh;
    right:0px;
    opacity: .7;
}

.fusszeile{
    position: absolute;
    flex-flow: row;
    height:auto;
    padding-top: 1rem;
    padding-left:5vh;
    padding-bottom:5vh;
    z-index: 3;
    background-color: rgba(32,68,124,1);  
    bottom:  0;
    left:0;
    width:100%;
    font-weight: 400;
    text-align: left;
    color:white;
    flex-grow: 0;
    opacity: 1;
    overflow: hidden;
}

.fusszeile li{
  display: inline-block;
  width: auto;
  margin-right: 1rem;
  padding: 0;
  list-style: none;
  position: relative;
  text-align: left;
  top:0;
}
    

.filler{
    
  margin:0.2em;
    z-index: 5;
    flex: 0 0 auto;
    position: absolute;
    padding: 0;
    color:white;
    background-color: red;
    bottom:  0;
    height:50vh;
    top:auto;
    left:0px;

}


.overlaytext{
    z-index: 5;
    position: absolute;
    padding-top: 0;
    padding-left:1vh;
    padding-right:1vh;
    padding-bottom: 2vh;
    width:40vh;
    height:auto;
    color:white;
    background-color: rgba(32,68,124,0.80);
    background-blend-mode: difference;
    bottom:  0;
    top:auto;
    right:0px;
    text-align: left;
  font-size: 1.4rem;
  line-height: 1.8rem;
}

.overlaytext2{
    z-index: 5;
    position: absolute;
    padding-top: 0;
    padding-left:1vh;
    padding-right:1vh;
    padding-bottom: 2vh;
    width:40vh;
    height:auto;
    color:white;
    background-color: rgba(32,68,124,0.80);
    background-blend-mode: difference;
    bottom:  00px;
    top:auto;
    right:0px;
    text-align: left;
}

.overlaytext3{
    position: absolute;
    padding-top: 1rem;
    padding-left:1vh;
    padding-right:1vh;
    padding-bottom: 2vh;
    width:30vw;
    width: auto;
    height:25vh;
    color:white;
    background-color: rgba(32,68,124,0.80);
    background-blend-mode: difference;
    bottom:  0vh;
    top:auto;
    left:auto;
    right:0px;
    text-align: left;
}
/* IMPRESSUM -----------------------------------------------------------------------------------------------------*/
.modal-content-impressum {
    padding-left: 0vw;
    position:relative;
    width:100vw;
    height:100vh;
    background-size: cover;
    white-space: nowrap;
    scroll-behavior: smooth;
    padding-right:0vw;
    display:flex;
    margin:0;
    flex-direction: row;
    justify-content:left;
    align-items: flex-end;
    z-index: 0;
    flex: 1;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
}  

.overlaytext_impressum{
    margin-left:1rem !important;
    margin-right:1rem !important;
/* left:calc(95% - 32rem); */
	right:3rem;
    padding:1em;
    z-index: 5;
    position: absolute;
    bottom:3vh;
   	max-width:80vw;
	max-height: 80vh;
	overflow: auto;
    white-space: nowrap;
    height:auto;
    min-width: 30rem;
    color:white;
    background-color: rgba(32,68,124,0.80);
}
/* IMPRESSUM -----------------------------------------------------------------------------------------------------*/
.overlaytext4{
    padding:1em;
    margin:0.2em;
    z-index: 5;
    flex: 1 1 auto;
    position: absolute;
    bottom:10vh;
    right:5vh;
    padding-top: 1rem;
    padding-left:1rem;
    padding-right:1rem;
    padding-bottom:1rem;
    width:800px;
    max-width: 70vw;
    max-height: 70vh;
    height:auto;
    color:white;
    background-color: rgba(32,68,124,0.80);
    text-align: left;
    justify-content: flex-end;
    allign-items: flex-end;
    allign-content: flex-end;
    overflow-y:auto;
    /* Automatische Silbentrennung */
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; 
}

.overlaytext5{
    position: absolute;
    z-index:2;
    padding-top: 1rem;
    padding-left:1vh;
    padding-right:1vh;
    padding-bottom: 1rem;
    width: auto;
    height:30vh;
    color:white;
    background-color: rgba(32,68,124,0.80);
    background-blend-mode: difference;
    bottom:  0;
    top:auto;
    left:0px;
    right:0px;
    text-align: left;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; 
}

.overlaytext6{
    position: absolute;
    padding-top: 1rem;
    padding-left:1vh;
    padding-right:1vh;
    padding-bottom: 1rem;
    width: auto;
    height:30vh;
    color:white;
    background-color: rgba(32,68,124,0.80);
    background-blend-mode: difference;
    bottom:  10vh;
    top:auto;
    left:0px;
    right:0px;
    text-align: left;
}

.mySlides img {
    width:100%;
    height:auto;
  flex:1;
}

.section-images {
 max-height: 100vh;
 overflow:hidden;
}

section.large {
   height: 100%;
    overflow: hidden;
}
section.small {
    height: 50vh;
    overflow: hidden;
}

section.small70 {
    height: 70vh;
    overflow: hidden;
}

section.small85 {
    height: auto;
    overflow: hidden;
    background-color: rgba(32,68,124,0.80);
    
}

section.small15 {
    height: auto;
    overflow: hidden;
}
section.small_vertical_left {
    position: relative;
    left:0px;
    right:auto;
    flex-direction: row;
    width: 50vw;
    max-height:100vh;
    overflow: hidden;
}
section.small_vertical_right {
    position: relative;
    right:0px;
    left:auto;
    flex-direction: row;
    width: 50vw;
    max-height:100vh;
    overflow: hidden;
}

article > section:nth-of-type(1) {

  background-color: lightgrey;
}

article > section:nth-of-type(2) {

  background-color: lightgrey;
}
article >  section:nth-of-type(3) {

  background-color: lightgrey;
}
article >  section:nth-of-type(4) {
  background-color: lightgrey
}
article > section:nth-of-type(5) {
  background-color: lightgrey;
}

#wobinich{
    top: max(3vw + 3.5em, 4em + 2.0rem);
    position:absolute;
    left:2em;
    z-index: 10;
    color:rgba(256, 256, 256, 0.5);
}

/*mega_menu CSS Document */

.menu-main{
}

.nav_container {
  background: rgba(194,194,194,.8);
  flex-direction: row;
  padding:0;
  width: auto;
  z-index: 200;
}


nav {
    display: inline-block;
    top: 3vh;
    font-weight:400;
    font-size:3rem;
    padding-left:.25rem;
    padding-right:.25rem;
    position: absolute;
    z-index: 1000;
    right:5vh;
    background: none;;
    color:white;

}

nav ul {
  margin: 0;
  list-style:none;
  position: relative;
  text-align: left;
  padding-inline-start:0;
}

nav li {
  display: block;
}

nav a {
  color: white;
  text-decoration: none;
  display: block;
  padding: .25rem .25rem;
}

nav li:hover {
  background: rgba(32,68,124,.5);
}

nav li:hover a {
  color: #fff;
}

.menu-sub {
    font-weight:100;
    right:10rem;
    padding-left:.25rem;
    padding-right:.25rem;
    position: absolute;
    flex-basis: center;
    justify-content:center;
    allign-items: center;
    allign-content: center;
    background: rgba(32,68,124,.8);
    width: auto;
    display: none !important;
    color: #fff;  
}

nav li:hover .menu-sub {
  display: flex;
}

.menu-sub li {
    left:0rem;

  display: block;
}

.menu-sub a {
  display: inline-block;
}

.menu-sub a:hover {
  text-decoration: none;
   
  background: rgba(32,68,124,.4);
}

.menu-category {
  margin: 0.5rem 0.5rem;
  line-height: 1.8rem;
  font-weight: normal;
}

.menu-category:first-of-type {
  margin-top: 0;
}

.menu-col-1,
.menu-col-2,
.menu-col-3,
.menu-col-4,
.menu-col-5,
.menu-col-6{
}

.menu-col-1 {
  width: auto;
}

.menu-col-2 {
  width: auto;
} 
.menu-col-3
{
  width: auto;
} 
.menu-col-4
{
  width: auto;
} 
.menu-col-5
{
  width: 100%;
} 
.menu-col-6
{
  width: 100%;
} 

/* mouse_icon_jp CSS Document */

#mouse2-scroll, #mouse1-scroll {
  style: block;
    allign-items: center;
    allign-content: center;
}
 #mouse1-scroll {
  position:absolute;
  margin: auto;
  left: calc(50vw - 10px);
  bottom: 3em;
  z-index: 100;
}

 #grab-scroll {
  position:absolute;
  margin: auto;
  left: 50vw;
  bottom: 5vh;
  width: 80vw;
  height:90vh;
  background-color: red;
  opacity: .3;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 5;
}

 #mouse2-scroll {
  position:relative;
  margin: auto;
  left: 0;
  top: 20vh;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 100;
}


#mouse2-scroll span, #mouse1-scroll span{
  display: block;
  width: 5px; 
  height: 40px;
  -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
       transform: rotate(45deg);;
  border-right: 2px solid #fff; 
  border-bottom: 2px solid #fff;
  margin: 0px 0px 10px 0px;
}

#mouse2-scroll .mouse, #mouse1-scroll .mouse {
  height: 38px;
  width: 20px;
  border-radius: 10px;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  border: 2px solid #ffffff;
  top: 160px;
}


#mouse2-scroll .mouse-in, #mouse1-scroll .mouse-in {
  height: 4px;
  width: 4px;
  display: block; 
  margin-left: 8px ;
    margin-top: 8px ;
    margin-bottom: 8px ;
  background: #ffffff;
  position: relative;
}
#mouse2-scroll .mouse-in, #mouse1-scroll .mouse-in {
 -webkit-animation: animated-mouse1 1.5s ease infinite;
 -webkit-animation: animated-mouse2 1.5s ease infinite;
  moz-animation: mouse-animated 1.5s ease infinite;
}

@-webkit-keyframes animated-mouse1 {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
      50% {
     opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
     opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-webkit-keyframes animated-mouse2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
      50% {
     opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
     opacity: 0;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-webkit-keyframes mouse1-scroll {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  } 
}
@-webkit-keyframes mouse2-scroll {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  } 
}
@keyframes mouse1-scroll {
 0%  { transform: scale(1,1)     translateY(0px); }
25%  { transform: scale(1,1)     translateY(10px); }
50%  { transform: scale(1,1)     translateY(20px); }
75%  { transform: scale(1,1)     translateY(10px); }
100% { transform: scale(1,1)     translateY(0px); }
}

@keyframes mouse2-scroll {
 0%  { transform: scale(1,1)     translateY(0px); }
25%  { transform: scale(1,1)     translateY(10px); }
50%  { transform: scale(1,1)     translateY(20px); }
75%  { transform: scale(1,1)     translateY(10px); }
100% { transform: scale(1,1)     translateY(0px); }
}

/* Copyright (C) 2011 JP */

/* Textdecoration für schwarz*/
:any-link { 
    color:rgba(255,255,255,.7);
    text-decoration: none;
}

.fusszeile a:link,
.overlaytext4 a:link,
.fusszeile_rechts  a:link,
.link a:link,
.link_klein a:link,
.geschaeftsbereich a:link {  
    color:rgba(255,255,255,.7);
    text-decoration: none;
}

.fusszeile a:selected,
.overlaytext4 a:selected,
.fusszeile_rechts  a:selected,
.link a:selected,
.link_klein a:selected,
.geschaeftsbereich a:selected
 {  
    color:rgba(255,255,255,.5);
    text-decoration: none;
}

.overlaytext4 a:hover,
.fusszeile_rechts  a:hover,
.link a:hover,
.link_klein a:hover,
.geschaeftsbereich a:hover{  
    color: rgba(255,255,255,1.00);
    text-decoration: none;
}

.fusszeile a:visited,
.overlaytext4 a:visited,
.fusszeile_rechts  a:visited,
.link a:visited,
.link_klein a:visited,
.geschaeftsbereich a:visited
 {  
    color:rgba(255,255,255,.5);
    text-decoration: none;
}