/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    <!-- © Copyright 2024 – Urheberrechtshinweis
        Alle Inhalte dieses Audioguides, insbesondere Texte, Fotografien und Grafiken,
        sind urheberrechtlich geschützt. Das Urheberrecht liegt, soweit nicht ausdrücklich
        anders gekennzeichnet, bei Andreas Wieser. Bitte fragen Sie mich, falls Sie die
        Inhalte dieses Internetangebotes verwenden möchten.
        
        Andreas Wieser, Untere Giesswiesen 16, 78247 Hilzingen. Email : info@wieser.ag
        
        Alle Audiodateien dieses Audioguides,sind urheberrechtlich geschützt. 
        Das Urheberrecht liegt, soweit nicht ausdrücklich
        anders gekennzeichnet, beim Sprecher Stefan Frech. Bitte fragen Sie beim Ersteller dieser Seite
        an, falls Sie die Inhalte dieses Internetangebotes verwenden möchten. Dieser wird den
        Kontakt zuim Sprecher herstellen
        
        Wer gegen das Urheberrecht verstößt (z.B. Bilder oder Texte unerlaubt kopiert), 
        macht sich gem. §§ 106 ff UrhG strafbar, wird zudem kostenpflichtig abgemahnt
        und muss Schadensersatz leisten (§ 97 UrhG).
        -->
*/

:root {
  --dicke: 0px;
  --rand: none;
  --farbe1: red;
  --farbe2: green;
 --farbe3: yellow;
}


html {
  overflow: hidden;
  position: relative;
  z-index: -10;
  }

body{
  margin: 0px;
  padding: 0px; 
  overflow-y: scroll;
  height: 100vh;
  width: 100vw;
  top: 0px;
  position: relative; 
  background-color: #000000;
  }
  
   p{
    font-size: 3vh;
    font-family:arial;
    font-weight: normal;
    color: #FFFFFF;
    margin: 0px;
    text-shadow: 3px 3px 4px #000;   
}

 a{
    font-size: 3vh;
    font-family:arial;
    font-weight: normal;
    color: #FFFFFF;
    margin: 0px;
    text-shadow: 3px 3px 4px #000;   
}

a:link, a:visited {
 text-decoration: none;
}

h1{
    font-size: 5.5vh;
    font-family: arial;
    font-weight: normal;
    color: #000000;
    margin: 2px;
    letter-spacing: .3vh;    
}

h2{
    font-size: 2.2vh;
    font-family: arial;
    font-weight: normal;
    letter-spacing: .1vh;
    margin: 0px;
    color: #000000;
}

h3{
    font-size: 3vh;
    font-family: arial;
    font-weight: normal;
    color: #FFFFFF;
    margin: 0px;
    text-shadow: 3px 3px 4px #000; 
}

h4{
    font-size: 5vh;
    font-family: arial;
    font-weight: normal;
    text-shadow: 5px 5px 8px #000; 
    margin-top: 2vh;
    color: #FFFFFF;
}

h5{
    font-size: 5vh;
    font-family: arial;
    font-weight: normal;
    color: #FFFFFF;
    text-shadow: 5px 5px 8px #000;    
}
 
@keyframes T1Blend {
   0%            {opacity: 0;}
   3%, 15%       {opacity: 1;}
   25%           {opacity: 0;}
}


@keyframes T2Blend {
    0%, 3%      {opacity: 0;}
    6%, 15%     {opacity: 1;}
    25%         {opacity: 0;}
}



@keyframes T3Blend {
    0%, 15%     {opacity: 0;}
    20%, 30%    {opacity: 1;}
    35%         {opacity: 0;}
   
}


@keyframes T4Blend {
    0%, 40%     {opacity: 0;}
    50%, 95%    {opacity: 1;}
    100%     {opacity: 0;}   
}
     

@keyframes T5Blend {
    0%, 15%     {opacity: 0;}
    20%, 100%    {opacity: 1;}
      
}
  

@keyframes HBBlend {
    0%, 8%     {opacity: 0;}
    16%, 40%    {opacity: 1;}
    70%         {opacity: 0;}
}

    
 @media screen and (orientation: portrait){ 
  
  
header{
  background-color: #FFFFFF;
  text-align: center;
  position: fixed;
  top: 0px;
  left: 0px;
  height: calc(11vh - 2px);
  width: calc(98vw - (2*var(--dicke)));
  border: 1px solid white;
  padding: 0px;
  z-index: 30; 
   
} 

 main{
  height: calc(89vh - (2*var(--dicke)) - 6px);
  width: calc(98vw - (2*var(--dicke)));
  left: 0px;
  top: 0px;
  position: fixed;
  background-color: #000000;
  border: var(--dicke) var(--rand) var(--farbe1);
  z-index: 0; 
  }
 
 #t1{
  height: calc(16vh - (2*var(--dicke)) - 6px);
  width: calc(98vw - (2*var(--dicke)));
  left: 0px;
  top: 15vh;
  position: fixed;
  border: var(--dicke) var(--rand) var(--farbe1);
  animation-name: T1Blend;
  animation-duration: 33s;
  animation-iteration-count: 1;
  z-index: 4;
  text-align: center;
  opacity: 0;
  }
 
  #t2{
  height: calc(69vh - (2*var(--dicke)) - 6px);
  width: calc(98vw - (2*var(--dicke)));
  left: 0px;
  top: 30vh;
  position: fixed;
  border: var(--dicke) var(--rand) var(--farbe1);
  animation-name: T2Blend;
  animation-duration: 33s;
  animation-iteration-count: 1;
  z-index: 6;
  text-align: center;
  opacity: 0;
  }
  
      
  #t3{
  height: calc(69vh - (2*var(--dicke)) - 6px);
  width: calc(90vw - (2*var(--dicke)));
  left: 0px;
  top: 15vh;
  position: fixed;
  border: var(--dicke) var(--rand) var(--farbe1);
  animation-name: T3Blend;
  animation-duration: 33s;
  animation-iteration-count: 1;
  z-index: 10;
  text-align: center;
  padding: 4vh;
  opacity: 0;
  } 
  
 #t4{
  height: calc(71vh - (2*var(--dicke)) - 6px);
  width: calc(90vw - (2*var(--dicke)));
  left: 0px;
  position: fixed;
  top: 11vh;
  border: var(--dicke) var(--rand) var(--farbe1);
  animation-name: T4Blend;
  animation-duration: 33s;
  animation-iteration-count: 1;
  z-index: 12;
  text-align: justify;
  padding: 2vh;
  opacity: 0;
  } 
  

#unten {
  text-align: center;
  height: calc(10vh - (4*var(--dicke)));
  width: calc(98vw - (2*var(--dicke)));
  position: absolute;
  left: 0px;
  top: calc(75vh - (4*var(--dicke)));
  border: var(--dicke) var(--rand) var(--farbe3);
  z-index: 16;
  animation-name: T5Blend;
  animation-duration: 33s;
  animation-iteration-count: 1;
  opacity: 1;
}

#hb{
  height: calc(89vh - (2*var(--dicke)) - 6px);
  width: calc(98vw - (2*var(--dicke)));
  left: 0px;
  top: 11vh;
  position: fixed;
  background-image: url("Bilder/000.jpg");
  background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
  background-size: cover;
  border: var(--dicke) var(--rand) var(--farbe1);
  animation-name: HBBlend;
  animation-duration: 33s;
  animation-iteration-count: 1;
  z-index: -50;
  opacity: 1;
  }  

 }   
  
         
  /*___________________________________________________________________________________________*/
  @media screen and (orientation: landscape) {  
  
 header{
  background-color: #FFFFFF;
  text-align: center;
  position: fixed;
  top: 0px;
  left: calc(50% - (69vh / 2));
  height: calc(11vh - 2px);
  width: calc(69vh - 1px);
  border: 1px solid white;
  padding: 0px;
  z-index: 30; 
   
} 

 main{
  height: calc(89vh - (2*var(--dicke)) - 6px);
  width: calc(69vh - (2*var(--dicke)));
  left: calc(50% - (69vh / 2));
  top: 0px;
  position: fixed;
  background-color: #000000;
  border: var(--dicke) var(--rand) var(--farbe1);
  z-index: 0; 
  }
 
 #t1{
  height: calc(16vh - (2*var(--dicke)) - 6px);
  width: calc(69vh - (2*var(--dicke)));
  left: calc(50% - (69vh / 2));
  top: 15vh;
  position: fixed;
  border: var(--dicke) var(--rand) var(--farbe1);
  animation-name: T1Blend;
  animation-duration: 33s;
  animation-iteration-count: 1;
  z-index: 4;
  text-align: center;
  opacity: 0;
  }
 
  #t2{
  height: calc(69vh - (2*var(--dicke)) - 6px);
  width: calc(69vh - (2*var(--dicke)));
  left: calc(50% - (69vh / 2));
  top: 30vh;
  position: fixed;
  border: var(--dicke) var(--rand) var(--farbe1);
  animation-name: T2Blend;
  animation-duration: 33s;
  animation-iteration-count: 1;
  z-index: 6;
  text-align: center;
  opacity: 0;
  }
  
   
  #t3{
  height: calc(69vh - (2*var(--dicke)) - 6px);
  width: calc(69vh - (2*var(--dicke)));
  left: calc(50% - (69vh / 2));
  top: 15vh;
  position: fixed;
  border: var(--dicke) var(--rand) var(--farbe1);
  animation-name: T3Blend;
  animation-duration: 33s;
  animation-iteration-count: 1;
  z-index: 10;
  text-align: center;
  opacity: 0;
  }
  
 #t4{
  height: calc(71vh - (2*var(--dicke)) - 6px);
  width: calc(61vh - (2*var(--dicke)));
  left: calc(50% - (69vh / 2));
  position: fixed;
  top: 11vh;
  border: var(--dicke) var(--rand) var(--farbe1);
  animation-name: T4Blend;
  animation-duration: 33s;
  animation-iteration-count: 1;
  z-index: 12;
  text-align: justify;
  padding: 2vh;
  opacity: 0;
  }
  
#unten {
  text-align: center;
  height: calc(10vh - (4*var(--dicke)));
  width: calc(69vh - (2*var(--dicke)));
  position: fixed;
  left: calc(50% - (69vh / 2));
  top: calc(80vh - (4*var(--dicke)));
  border: var(--dicke) var(--rand) var(--farbe3);
  z-index: 16;
  animation-name: T5Blend;
  animation-duration: 33s;
  animation-iteration-count: 1;
  opacity: 1;
  
}

#hb{
  height: calc(89vh - (2*var(--dicke)) - 6px);
  width: calc(69vh - (2*var(--dicke)));
  left: calc(50% - (69vh / 2));
  top: 11vh;
  position: fixed;
  background-image: url("Bilder/000.jpg");
  background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
  background-size: cover;
  border: var(--dicke) var(--rand) var(--farbe1);
  animation-name: HBBlend;
  animation-duration: 33s;
  animation-iteration-count: 1;
  z-index: -50;
  opacity: 1;
  }  



  }