:root { 
     --hpcolor: rgb(161, 4, 90);
    --hpcolor1: rgba(202, 113, 10, 0.952);
    --glowcolor: rgba(240, 184, 0, 0.952);
    --Elschadow: rgba(240, 184, 0, 0.952);
    --seccolor: rgb(44, 44, 44);
    --seccolor2: rgb(182, 182, 182);
    --schadow: rgb(29, 29, 29);
    --bgcolor: rgba(240, 240, 240, 0.911);
    --bgcolor2:rgb(228, 228, 228);   
  }



:root{
  scrollbar-color: transparent transparent;  
  }


@font-face {
  font-family: subline;
  src: url("../FONTS/FUBTL__.TTF");
  font-weight: 100;
}

@font-face {
  font-family: Head;
  src: url("../FONTS/FUBTL__.TTF");
  font-weight: 100;
}

@font-face {
  font-family: Pic;
  src: url("../FONTS/Broadcast_Matter.ttf");
  font-weight: 100;
}



*{ 
  scroll-behavior: smooth;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;

}

html{
  overflow-x: hidden;
cursor:progress;
}

.scrollHid{
  overflow-y: hidden;
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex-basis: 100%;;
  font-family: subline;
  font-weight: 100;
  max-width: 99.9vw;
  width: 99.9vw;
  min-width: 99.9vw;
  height: auto;
  min-height:99.9vh;
  max-height:auto;
  margin-top:-3%;
 justify-content: space-around;
  color: var(--hpcolor);  
  font-size: 0.9rem;
  background-color:white;
  overflow:hidden; 
  text-rendering: geometricPrecision;
  -ms-user-select: None;
  -moz-user-select: None;
  -webkit-user-select: None; 
  user-select: None;  
  opacity:0; 
  cursor:progress;
 visibility: hidden;
  }

  #bgIMG{
    position: fixed;
    top:0px;
    left:0px;
    min-width: 100vw;
    width: auto;
    max-height: auto;
    height:100%;
    min-height: auto;
  background-image: linear-gradient(-45deg,var(--bgcolor2) 30%,transparent 100%), url(../T3VT/Anschreiben/cont.jpg);
  background-repeat: no-repeat;
  background-size:cover; 
background-position: center;
background-blend-mode:luminosity;
 background-color:white;
 opacity:0.7;
z-index:-1;
transition:0.5s all;
  }

  .bodyShow{
     transition: 0.5s all;
    opacity:1;
    cursor:auto;
   visibility: visible;  
  }

body:fullscreen {
  max-width: 99.9vw;
  width: 99.9vw;
  min-width: 99.9vw;
  height: 99vh;
  min-height: 99vh;
  max-height: 99vh;
  background-color: var(--bgcolor);
}


nav{ 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1280px;  
  min-width: 1280px;
  margin:0px auto;
  
}

h1{
  font-size: 900%;
  font-family: Pic;
  text-align: center;
  min-width: auto;
  width: auto;
  max-width: auto;
  line-height: 100%;
  margin-bottom:5%;
  text-transform: none;
  color:var(--seccolor);
  font-weight: 100;
  transform:rotate(0deg) translateX(0%);  
   transition:0.5s all;
  
}

h1:last-of-type{
  margin-bottom:3vh;
}

h1:hover{
 transition:0.5s all;
  cursor:pointer;  
   color:var(--seccolor);
}

.h1move{
  position: static;
  top:25%;
  left:0px;
 color:var(--seccolor);
 font-family: Pic;
  font-weight: 100;
   font-size: 2000%;
   line-height:20%;
  text-align: center;
    transition:0.5s all;
    min-width: 100%;
    max-width: 100%;
     margin-bottom:0%;
  text-decoration-thickness: 0px;
  opacity: 0.8;
  z-index:0;
}

.h1move:last-of-type{
  margin-bottom:0%;
}

.h1move:hover{
   transition:0.5s all;
  cursor:pointer; 
  color:var(--hpcolor);
  opacity: 0.8;
}

.h1move:active{  
  transition:0.5s all;
   transform: scale(1) rotate(0deg) translateX(0%);
}

#anrede{
   font-family: Pic;
   font-size: 1500%;
   letter-spacing: 180%;
   text-transform: none;
   font-weight: 100;
line-height: 120%;
margin-bottom: -5vh;
margin-top: 2%;
cursor:default;
}


#anrede:hover{
  color:var(--bgcolor); 
cursor:default;
 text-decoration: none;
  text-decoration-style:wavy;
  text-decoration-thickness: 0px;
}

h2{
  font-size: 160%;
  text-align: center;
  text-transform: none;
 padding-left:0.5%;
 padding-right: 0.5%;
 padding-top: 0.5%;
  padding-bottom: 0.5%;
  transition:0.5s all;
  color:var(--seccolor);
  font-weight: 100;
   border-left:1px solid transparent;
  border-right:1px solid transparent;

}


h2:hover{
  color:var(--hpcolor);
  cursor:pointer;  
  border-left:1px solid var(--seccolor);
  border-right:1px solid var(--seccolor);
  transition:0.5s all;
}

.subM:active{
    transform:scale(5);
    transition:0.5s;
  opacity: 0.5;
}

.clSub:hover{
color:var(--hpcolor);
transition:0.5s;
}

.clSub:active{
  transform:scale(0.3);
  opacity: 0.5;
  transition:0.5s;
}



.sec{
  display: flex;
  flex-direction: row;
  justify-content:center;
  flex-wrap: wrap;
  height:0vh;
  min-width: 100%;;
  overflow: hidden;
  transition: 1s all; 
  z-index:2;
  opacity: 0;
}

.main{
  display: flex;
  flex-direction: row;
  justify-content:center;
  flex-wrap: wrap;
  margin-bottom: 0%;
  padding-bottom: 0%;
  padding-left:2%;
  padding-right:2%;
  transition:1s all;
   min-width: auto;
   width: min-content;
   max-width: fit-content;
}

#contImg{
  min-height: 0vh;
  max-width: 0vh;
  min-width: 100%;
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  margin-top:1%;
  margin-bottom: 1%;  
  border-radius: 5px; 
}

#contPic{
  max-width: 40%;
  height: auto;
  margin-bottom: 2%;
  border:5px solid white;
}

.contInfo{
  display:flex;
  flex-direction: column;
  height:0vh;
  overflow: hidden;
  transition: 1s all;
 min-width: 100%;
 opacity: 0;
}

.dipOn{
height:auto;
transition: 3s all;
border-bottom:1px solid transparent;
overflow: visible;
opacity: 1;
}

.dipOn:hover{
  border-bottom:1px solid transparent; 
}

.mainOp{
  margin-top:20%;
  margin-bottom:20%;
  padding-top:-50vh;
  transition:1s all;
  height:auto;
  min-width: 100%;  
  padding-left:0%;
  padding-right:0%; 
}

.infoText{
  display: flex;
  justify-content: flex-start;
  flex-direction: column; 
  font-size: 140%;
  color:var(--seccolor); 
  text-align:center;
  text-align-last: center;
 max-height: auto;
     word-spacing: 0.01em;
   white-space:pre-line;
   letter-spacing: 0.01em;  
  transition:0.5s all;
  padding-left:5%;
  padding-right: 5%;
  padding-top:2%;
  padding-bottom: 1%;
  margin-top:5%;
  margin-bottom: 5.5%;
  cursor:zoom-in;
   border-bottom: 1px solid transparent;
   z-index:2;
}

.infoText:hover{
  border-bottom: 1px solid var(--hpcolor);
  
}


.cursorNon{
  cursor:default;
  border-bottom:1px solid transparent;
  min-width: 100%;
  padding-bottom: 0px;;
}
.cursorNon:hover{
  cursor:default;
  border-bottom:1px solid transparent;
}

.infoText:active{
transform:scale(0.8);
transition: 0.5s all;
color:var(--hpcolor);
}



.infoTextBig{
  font-size: 180%;
   transition:0.5s all;
  padding-left:15%;
  padding-right: 15%;
  min-height:auto;
  height:auto;
  max-height:auto;
   border-bottom: 1px solid var(--bgcolor);
}

.cursorNon:active{
transform:scale(1);
transition: 0s all;
color:var(--seccolor);
  border-bottom:1px solid transparent;
}

.infoTextBig:hover{
  cursor:zoom-out;
  border-bottom: 1px solid var(--bgcolor);
}

p{
  padding-bottom:1%;
}

.dat{
  max-height:0vh;
  min-width: 100%;
  max-width: 100%;
  transition:0.5s all;
}

.open{
  font-family: subline;
  font-weight: 100;
   font-size: 300%;
 padding-top:2%;
  color:var(--seccolor);
  text-align: center;
  line-height: 150%;
  transition:0.5s all;
    border-left:1px solid transparent;
  border-right:1px solid transparent;
   border-bottom:1px solid transparent; 
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-decoration-skip:ink;
   text-underline-position:under;
   text-decoration-color: var(--hpcolor);
}



.datopen{
display: flex;
  flex-direction: row;
  justify-content: center;  
  flex-wrap: wrap;
 flex-basis: auto;
 min-height:auto;
 min-width: 1280px;
 width: 100%;
  max-height: 76vh;
  overflow: scroll;
  padding:0px;
  margin:0px;
  margin-bottom: 0%;
  margin-top:0%;
  line-height:0%;
  transition:0.5s all;
}

.open:hover{
  border-left:1px solid transparent;
  border-right:1px solid transparent;
  color:var(--seccolor);
}

.pic{
  position: relative;
  max-width :20vw;
  min-width :auto;
  height :auto;
  max-height :20vw;
  min-height :1%;   
  object-fit:contain;
 background:transparent;
z-index: 100;
filter:drop-shadow(0px 0px 0px var(--schadow));
z-index:0;
transition: 1s all;
 transform: rotate(0deg);
}


.picBig{
  box-sizing: content-box;
  transition: 0.5s all;
  flex-basis: auto;  
  image-rendering: optimizeQuality; 
 margin-left:45%;  
  margin-right:45%; 
  scroll-snap-align: center;
  object-fit: scale-down;
  width :auto;
  max-width :100%;
  min-width :auto;
  height :auto;
  max-height :76vh;
  min-height :1%;
}

.pic:hover{
cursor: zoom-in;
transition: 1s all;
z-index:20;
transform: scale(1.1);
filter:drop-shadow(0px 0px 10px var(--schadow));
}

.picBig:hover{
cursor: zoom-out;
transform: scale(1);
filter:drop-shadow(0px 0px 5px var(--schadow));

}


form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position:absolute;
 width: 100vw;
 min-height: 100vh;
  justify-content: center;
  align-items: center;
  margin: 0px;
  padding: 0px;
  z-index:20;
  color: var(--seccolor);
}


input,
button {  
  max-height: 2rem;
  padding: 1%;
  margin: 0.5%;
  line-height: 15%;
  border: 0px;
  background-color: transparent;
  color: var(--seccolor);
  border: 1px solid var(--hpcolor);
  background-color: var(--bgcolor);
}
button {
  max-width: auto;
  min-width: 5em;
  padding: 0.5% auto;
  margin: 0.5%;
  min-height:2.5em;
}
input {
    min-height:2em;
    padding: 0.35%;
  margin: 0.5%;
}

button:hover {
  background-color: var(--bgcolor);
  color: var(--hpcolor);
  cursor: pointer;
  border: 1px solid var(--hpcolor);
  background-color: var(--hpcolor);
  color: var(--bgcolor);
  
}

iframe,embed{
  width: 100%;
  height:100%;
  max-width: 100%;
  max-height: 75vh;
  min-width: 1280px;
  min-height: 75vh;
  border:0px solid transparent;
}

#web{
  min-width: 100vw;
  min-width: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  border:1px solid var(--seccolor);
}

footer{
  display: flex;
  flex-direction: row;
  justify-content: center;
  position:sticky;
  flex-wrap: wrap;
  flex-basis: 10%;
  left:0%;
 bottom:0%;
  min-width:100%;
  width:auto;
  max-width: 100%;
  min-height: 5%;
  max-height: 5%;
  margin-top:4%;
z-index:100;


}

.tit{
  display: flex;
  justify-content: center;
  min-width: fit-content;
  width: auto;
  max-width: fit-content;
  padding:1%;
  color:var(--seccolor);
  text-transform: uppercase;
}

.tit:hover{
  color:var(--hpcolor);
   cursor:pointer;
}

.foot{
  display: none; 
 
}

.footShow{
  text-transform: none;
  color:var(--seccolor);
  display: block;
  position: absolute;
 bottom:100%;
  height:auto; 
  left:0%;
 width:100%;
 text-align: center; 
 min-width: 100%;
padding:1%;
margin-bottom:-1%;
}

.footShow:hover{
  color:var(--seccolor);
}

.vert{ 
  padding-top:30%;
  min-width: auto;
  max-width: 100vw;
  min-height: 100vh;
  max-height: 100vh;
 
}

.textWriter{
   display: flex;
  flex-direction: row;
  justify-content: center;


}

.textTrans{
   -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  background-image:linear-gradient(-90deg,transparent 100%,transparent 0%);
}

.textVis{
-webkit-background-clip:unset;
-webkit-text-fill-color: unset;
}



@media (max-device-width:1280px)   {
nav{ 
  max-width: 90vw;  
  min-width: 90vw;
  margin:0px auto;
  margin-top:5%;

}
#anrede{
   font-size: 19vmin;

}
.datopen{
  min-width: 90vw;
    max-width: 90vw;
  }

  h1{
    font-size: 12vmin;
  }

  
h1:last-of-type{
  margin-bottom:2vh;
}

.h1move{line-height: 110%;
font-size: 1000%;
}


.infoText{
  font-size: 1.8vmax;  
   word-spacing: -0.5vmin;
   white-space:pre-line;
   letter-spacing: 0.03em;
  max-height:auto;
}

.infoTextBig{
  font-size: 2vmax;
 
}

h2{
  font-size: 2vmin;
}

.open{
  font-size:10vmin;
}




}
  
@media (orientation:portrait)   {
nav{ 
  max-width: 98%;  
  min-width: 98%;
  margin:0px auto;
  margin-top:5%;
}

body{
  justify-content: center;
  
}

h1{
  font-size: 14vmin;
}

.h1move{
  font-size: 24vmin;
    margin-bottom: 0%;
    color:var(--hpcolor);
     
}


h1:hover{
       text-decoration: none;
  text-decoration-style:wavy;
  text-decoration-thickness: 0px;
}

h1:last-of-type{
  margin-bottom:1vh;
}

form {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position:absolute;
 width: 100vw;
 min-height: 100vh;
  justify-content: center;
  align-items: center;
  margin: 0px;
  padding: 0px;
  z-index:20;
  color: var(--seccolor);
}

button {
 
 
  margin: 2%;

}
input {
  text-align: center;
  margin: 2%;
}

#anrede{
   font-size: 19vmin;
   line-height: 60%;
   margin-bottom: 2%;
   margin-top:5%;
  
}


.h1move{
  font-size: 24vmin;
    margin-bottom: 0%;
    color:var(--hpcolor);
     
}

.infoText{
  font-size: 2vmax;  
   word-spacing: -0.5vmin;
   white-space:pre-line;
   letter-spacing: 0.03em;
 max-height: auto;
}

.infoTextBig{
  font-size: 3vmax;
   transition:0.5s all; 
  padding-left:5%;
  padding-right: 5%;
 max-height: auto;
    word-spacing: -0.3vmin;
   white-space:pre-line;
   letter-spacing: 0.05em;
   word-wrap: break-word;
}

h2{
  font-size: 3vmin;
}

.open{
  font-size:13vmin;
}
#contImg{
  min-height:0vmax;
  background-size: cover;

}

  .datopen{
     min-width: 100%;
  }

  iframe{
    min-width: 90vw;
  }

footer{
  font-size: 1.8vmin;
   position:sticky;
   bottom:0px;
   margin-top: 5%;
}
.pic{
  min-width: auto;
  width: auto;
    max-width: 40%;
    min-height: auto;
    max-height: 40%;
    object-fit: contain;
  margin:0.25%;

}

.mainOp{
  margin-top:10%;
  margin-bottom:20%;
}

.picBig{ 
 margin-left:45%;  
  margin-right:45%;  
  scroll-snap-align: center;
  object-fit: contain;
  width :auto;
  max-width :100%;
  min-width :auto;
  height :auto;
  max-height :76vh;
  min-height :1%;
}
#logo{
margin-top:5%;
  }

  p{
  padding-bottom:3%;
 
}

.vert{
 padding-top:70vh;
}

}

*::-webkit-scrollbar {
  width: 0em;
  height:0em;
}
 

*:-moz-system-metric(scrollbar-thumb) {
  display: none;;
  width: 0em;
  height:0em;
  background-color:transparent;
  border:0px;
  scrollbar-color: red lightgrey;
}