/*---------------------------------*/
/*@font-face {
  font-family: 'Norican';
  src: url('../fonts/norican/Norican-Regular.ttf') format("truetype");
  font-weight: normal;
}*/

@font-face {
  font-family: 'Reenie Beanie';
  src: url('../fonts/reeniebeanie/ReenieBeanie-Regular.ttf') format("truetype");  
  font-weight: normal;
}
/*---------------------------------*/
@font-face {
  font-family: 'hack';
  src: url('../fonts/hack/Hack-Bold.ttf') format("truetype");  
  font-weight: normal;
}
@font-face {
  font-family: 'hackreg';
  src: url('../fonts/hack/Hack-Regular.ttf') format("truetype");  
  font-weight: normal;
}
/*---------------------------------*/
@font-face {
  font-family: 'bebas';
  font-weight:400;  src: url('../fonts/bebas/BebasNeue-Regular.ttf') format("truetype");  
}
/*@font-face {
  font-family: 'Source_Sans_Pro';
  font-weight:700;  src: url('../fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf') format("truetype");
}
@font-face {
  font-family: 'Source_Sans_Pro';
  font-weight:600;  src: url('../fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf') format("truetype");
}
@font-face {
  font-family: 'Source_Sans_Pro';
  font-weight:400;  src: url('../fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf') format("truetype");
}
@font-face {
  font-family: 'Source_Sans_Pro';
  font-weight:300;  src: url('../fonts/Source_Sans_Pro/SourceSansPro-Light.ttf') format("truetype");
}
@font-face {
  font-family: 'Source_Sans_Pro';
  font-weight:200;  src: url('../fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.ttf') format("truetype");
}*/
/*---------------------------------*/
@font-face {
  font-family: 'ysra';
  font-weight:700;  src: url('../fonts/ysra/ttf/Yrsa-SemiBold.ttf') format("truetype");  
}
@font-face {
  font-family: 'ysra';
  font-weight:600;  src: url('../fonts/ysra/ttf/Yrsa-Medium.ttf') format("truetype");
}
@font-face {
  font-family: 'ysra';
  font-weight:400;  src: url('../fonts/ysra/ttf/Yrsa-Regular.ttf') format("truetype");
}
 


#btnInfoHaus { position:absolute;top:20px; right:100px;background-color:#504F4C;padding:10px 20px 10px 20px ;z-index:9999; display:none;
            font-size: 12px;font-family: hackreg;letter-spacing: 1px;color:#fff;line-height: 130%;}
#btnInfoHaus .ecke {position:absolute; right:-30px;top:0px;
            border-top: 5px solid transparent; border-left: 30px solid #504F4C; border-bottom: 10px solid transparent;background-color:transparent;}

#btnInfoBuch { position:absolute;bottom:120px; right:60px;background-color:#504F4C;padding:10px 20px 10px 20px ;z-index:9999; display:none;
            font-size: 12px;font-family: hackreg;letter-spacing: 1px;color:#fff;line-height: 130%;}
#btnInfoBuch .ecke {position:absolute; right:-20px;bottom:-8px;transform: rotate(40deg);
            border-top: 5px solid transparent; border-left: 30px solid #504F4C; border-bottom: 10px solid transparent;background-color:transparent;}
#btnInfoPlay { position:absolute;bottom:120px; left:60px;background-color:#504F4C;padding:10px 20px 10px 20px ;z-index:9999; display:none;
            font-size: 12px;font-family: hackreg;letter-spacing: 1px;color:#fff;line-height: 130%;}
#btnInfoPlay .ecke {position:absolute; left:-20px;bottom:-8px;transform: rotate(140deg);
            border-top: 5px solid transparent; border-left: 30px solid #504F4C; border-bottom: 10px solid transparent;background-color:transparent;}
#btnInfoAudio { position:absolute;top:20px; left:100px;background-color:#504F4C;padding:10px 20px 10px 20px ;z-index:9999; display:none;
            font-size: 12px;font-family: hackreg;letter-spacing: 1px;color:#fff;line-height: 130%;}
#btnInfoAudio .ecke {position:absolute; left:-30px;top:0px;transform: rotate(180deg);
            border-top: 5px solid transparent; border-left: 30px solid #504F4C; border-bottom: 10px solid transparent;background-color:transparent;}


#btnInfoHaus.gold,#btnInfoBuch.gold,#btnInfoPlay.gold,#btnInfoAudio.gold {background-color:#9B8A52;color:#fff!important; }
#btnInfoHaus.gold .ecke,#btnInfoBuch.gold .ecke,#btnInfoPlay.gold .ecke,#btnInfoAudio.gold .ecke {border-left-color:#9B8A52; }
 
body, html { display: flex;font-family:'hack'; 
justify-content: center;
align-items: center; background-color:#fff; /* height: 100vh;  overflow: hidden; */}

h1 {font-family:'hack'; line-height:100%; font-variation-settings:'wght' 600, 'wdth' 100;letter-spacing:-1px; /* font-weight:629;*/ 
    margin:0px 0px 20px 0px ;  text-transform:uppercase;
    padding:0px;font-size:35px;}
h2 {font-family:'hack';font-variation-settings:'wght' 100, 'wdth' 100;  line-height:100%; margin:0px 0px 40px 0px;  
    padding:0px;font-size:31px; }
h3 {font-family:'hack'; font-variation-settings:'wght' 100, 'wdth' 100; font-size:20px;}
p {font-family:'hack'; font-weight:100;font-size:20px;margin:0px; padding:0px; line-height:130%;}


#testkasten {background-color:transparent!important; top:100px!important;display:none!important;}
#test3 {background-color:#00000050!important;padding:10px;}

#btn_atmo {position: absolute;z-index:999999999;
width: 50px;cursor:pointer;
height: 50px;
border-radius: 60px;
left: 15px;
top: 15px;
text-align: center;
background-color: #9b8a52;}
#btn_atmo img {  width: 100%;position:absolute;left:0px; top:1%;                
                opacity: 0.9;border-radius: 60px;
            }
  .icon_audio {position:relative;  
            float:left;
            margin-right: 5px; 
            width: 30px;
            height: 30px;
            background-color: rgb(213, 213, 213, 0.30);
            border-radius: 50px;
            text-align: center;
            overflow: hidden;margin-top:10px;
        }

            .icon_audio:hover {
                background-color: #9b8a52;
                cursor: pointer;
            }

            .icon_audio.aktiv {
                width: 50px;
                height: 50px;
                margin-bottom: -10px;margin-top: 0px;
                background-color: #9b8a52;
            }

            .icon_audio img {
                width: 90%;
                margin-top: 10%;
                opacity: 0.7;
            }


.icon_audio.ausst img{margin-top: 0%;width: 60%;}
.icon_audio.ausst {background-color: #13141176;}
.icon_audio.ausst.aktiv {background-color: #e7e3da;}
.icon_audio.ausst.aktiv img{margin-top: 20%;}





/*#fInfofenster{position:absolute; display:none; margin:auto; top:15px;left:10px; z-index:99;
              width:calc(100vw - 100px);max-width:300px; 
              height:auto; background-color:rgb(255 ,255 ,255 , 0.8);padding-bottom:0px;}*/
/*#fInfofenster #closebalken { background-color: #9b8a52;background-color:#520303; height:4vh;width:100%;}*/
/*#fInfofenster #infobereich {  width:100%; padding:20px; max-height:calc(100vh - 90px); overflow:auto;  font-size:12px;  }
#fInfofenster #infobereich h2 { font-family:Norican; color:#6a1113; font-size:20px;margin:0px 0px 10px 0px ; padding:0px;  }
#fInfofenster #infobereich #infotext,
#fInfofenster #infobereich #infotext p {font-family: 'hack';font-size: 12px;font-variation-settings: 'wght' 600, 'wdth' 100;color:#000; margin-bottom:10px;  }

#fInfofenster #infobereich.leben h2 {color:rgb(255 216 0);}
#fInfofenster #infobereich.begleiter h2 {color:rgb(106 17 19);}
#fInfofenster #infobereich.familie   h2 {color:rgb(17 106 10);}
#fInfofenster #infobereich.staat     h2 {color:rgb(74 32 59);}

#fInfofenster.audio_cc { top:50px;}
#fInfofenster #btnBegleiter {cursor:pointer; position:absolute; display:none; bottom:0px; right:0px;background-color:#6a1113;
                            color:#fff;padding:3px 10px 3px 10px; font-family:Norican; font-size:14px;}

#fInfofenster #btnBegleiter i {margin-left:10px;font-size:16px;}*/

/*
#fAudioCC{position:absolute; display:none; margin:auto; top:50px;left:82px; z-index:99;width:calc(100vw - 100px);max-width:300px;               
              height:auto; background-color:rgb(255 ,255 ,255 , 0.7);padding-bottom:0px;}
#fAudioCC #ccinfobereich {  width:100%; padding:20px; max-height:calc(100vh - 90px); overflow:auto;  font-size:12px;  }
#fAudioCC #ccinfobereich h2 { font-family:Norican; color:#6a1113; font-size:20px;margin:0px 0px 10px 0px ; padding:0px;  }
#fAudioCC #ccinfobereich #ccinfotext,
#fAudioCC #ccinfobereich #ccinfotext p {font-variation-settings:'wght' 400, 'wdth' 100; font-size:11px; color:#000; margin-bottom:10px;  }
*/
.wechselbutton { cursor: pointer; background-color: #ffffff6a; width: 60px; margin-bottom: 10px; border-radius: 5px; padding: 3px 10px 3px 10px; }

#kurzinfoakt {position:absolute; bottom:0px; left:0px;text-align:center;width:100%; z-index:9999;}
#kurzinfoakt h2 { color: #9C8B54;margin:0px; padding:0px;line-height:100%; font-size: 12px; font-family: hack; 
                  letter-spacing:1px; text-transform:uppercase; }
#kurzinfoakt2 {position:absolute;display:none; top:28px; left:0px;text-align:center;width:100%; z-index:9999;}
#kurzinfoakt2 h2 { color: #9C8B54;margin:0px; padding:0px;line-height:100%; font-size: 18px; letter-spacing:1px; text-transform:uppercase;
                   font-family: hack; font-variation-settings:'wght' 700, 'wdth' 100;
                   text-shadow: -2px 2px 9px #504f4c !important;}
/*-------^-------*/

#iconClose {cursor:pointer; display:none; position:absolute; right:15px; top:15px;border:0px solid #f00;
                border-radius:51px; width:51px;height:51px; background-color:#504f4c!important;}
#iconClose img {width:50%;margin:25% 0px 0px 25%;}

#iconProgramm {cursor:pointer; position:absolute; right:15px; top:15px;border:0px solid #f00;
               background-color: rgb(155, 138 ,82 , 1);border-radius:50px; width:50px;height:50px;
}
#iconProgramm img {margin:10px 0px 0px 11px;width:28px; }
#iconProgramm:hover { background-color: rgb(155, 138 ,82 , 1);}

#iconsRechts { position:absolute;right:5px; bottom:17px;  width:60px; z-index:5;}
#iconsRechts div {  background-color:#9b8a52!important;
                  width: 50px;height: 50px;border-radius: 50px; cursor:pointer;z-index: 1;position:relative; 
                  margin-left:0px;margin-bottom: 0px; opacity: 1;text-align: center;}
/*#iconsRechts div:hover {background-color: rgb(0, 0 ,0 , 0);}*/
#iconsRechts #iconHist { padding-top: 8px; }
#iconsRechts #iconWohnung {  padding-top: 10px;    }
#iconsRechts #iconAudio {   padding-top: 10px;      }
/*#iconsRechts #iconInfo {  padding-top: 10px;    }*/

#videoframe {position:absolute;z-index:9999;  
             margin:auto 0;            
}
#videoframe video { position:relative; max-height:calc(100vh - 0px); max-width:100%;
                    top: 50%; 
 /* -ms-transform: translateY(10%);
  transform: translateY(10%);*/}

#Indicator {z-index:4!important;position:absolute;top:calc(100vh - 97px);right:15px;   height:50px;  }
#Indicator #indicatorkreis {width:50px; height:50px; opacity:0.8; background-color:#9b8a52;border-radius:50px;margin-top:7px; }
#Indicator #indicatorinfo{font-family:'hack';  white-space:nowrap; font-size:10px;position:absolute; right:55px; color:rgb(255, 255 ,255 , 0.7);top:16px;text-align:right;}

#begleiter {position:absolute;z-index:9999999999; display:none; left:20px; top:20px;height:calc(100% - 40px); width:calc(100% - 10px - 100px);}
#begleiterClose{position:absolute;cursor:pointer; z-index:9999999999; display:none; right:15px; top:15px; width:50px; height:50px;background-color:rgb(155 ,138 ,82 , 1);border-radius:50px;}
#begleiterClose img {width:45%; margin:28% 0px 0px 28%;}
#begleiterClose:hover{background-color:rgb(155 ,138 ,82 , 1);}

#iimpressum {position:absolute;  z-index:9999999999; display:none; max-width:900px; height:calc(100% - 50px); width:calc(100% - 0px - 140px);}
#iinfoMobil {position:absolute;  z-index:99999999999999999999; display:none; max-width:900px; height:calc(100% - 50px); width:calc(100% - 10px);}
#iimpressumClose,#iinfoMobilClose,#VideoClose{position:absolute;cursor:pointer; z-index:9999999999; 
                                              display:none; right:15px; top:15px; width:50px; 
                 height:50px;background-color:rgb(155 ,138 ,82 , 1);border-radius:50px;}
#iimpressumClose img,#iinfoMobilClose img ,#VideoClose img{width:45%; margin:28% 0px 0px 28%;}
#iimpressumClose:hover{background-color:rgb(155 ,138 ,82 , 1);}

#Audioleiste {position:absolute; z-index:2; bottom:12px;left:10px; width:calc(100% - 20px);border:0px solid #f00;height:100px;text-align:center;}
#Audioleiste #Audio_cc {position:absolute; bottom:35px;cursor:pointer; width:50px; height:50px;  left:65px; font-size:2.5vw; text-align:center;}
#Audioleiste #Audio_cc img {position:absolute;left:10px; top:12px; opacity:0.6;}
#Audioleiste #Audio_cc img:hover {opacity:1;}
#Audioleiste #Audio_cc_text {position:absolute; display:none; left:0px; width:400px; height:auto;
                             max-height:calc(100vh - 115px);
                             background-color:rgb(255, 255 ,255 , 0.8);bottom:100px; text-align:left; 
                             font-family:'hack';font-size:16px;}
#Audioleiste #Audio_cc_text h2 {font-family:'hack';font-size:14px; }
#Audioleiste #Audio_cc_text p {font-family:'hack';font-size:12px; }
#Audioleiste .inner {position:relative;margin:10px 20px ; height:auto;overflow:auto;max-height:calc(100vh - 135px); }

#Audioleiste #Audio_cc_close {position:absolute;display:none; width:50px; height:50px; left:67px; 
                              bottom:29px; font-size:2.5vw; border:0px solid #fff; text-align:center; color:rgb(255, 255 ,255 , 0.7);}
#Audioleiste #Audio_cc_close img {position:absolute;left:10px; border:0px solid #fff; top: 5px; opacity:0.6;}

#Audioleiste #Audio_play {position:absolute; width:50px; height:50px;border-radius:60px;left:7px; 
                           top:15px; text-align:center;background-color:#9b8a52; }
#Audioleiste #Audio_play img {padding-top:15px;padding-left:7px;}
#Audioleiste #Audio_play #iconpause  {padding-left:0px;padding-top:14px;}
#Audioleiste #audiobuttons {position:absolute;      bottom:40px;    text-align:center;}


#Audioleiste #zeitleiste_time {font-family:hack; position:absolute; left:0px;color:rgb(255, 255, 255 , 0.7);font-size:14px;bottom:8px;line-height:100%; text-align:center;width:60px;}
#Audioleiste #zeitleiste_time_left {font-family:hack;position:absolute; right:0px;color:rgb(255, 255, 255 , 0.7);font-size:14px;bottom:8px;line-height:100%; text-align:center;width:60px;}
#Audioleiste #Audio_Zeitleiste { height:6px; cursor:pointer; position:absolute;bottom:12px;left:calc(60px + 15px);border:1px solid #9b8a52;  width:calc(100% - 120px - 30px);}
#Audioleiste #Audio_Zeitleiste #Audio_Fortschritt {height:calc(100% - 2px);position:absolute; bottom:1px;left:1px;  background-color:rgb(155 ,138, 82 ,1);opacity:1;width:0.1%;}

#TrailerWhatsNext {position:absolute;border-radius:5px; display:none;top:30px; margin:auto 0;z-index:9999999999;width:calc(100% - 140px);max-width:700px;background-color:#9b8a52;}
#TrailerWhatsNext.kleiner {max-width:600px;}
#TrailerWhatsNext .button {cursor:pointer; margin:auto; border-radius:50px; background-color:rgb(255, 255, 255, 0.30);height:80px; width:80px;}
#TrailerWhatsNext h2 {font-family:'bebas',Arial; font-size:16px;opacity:0.8; letter-spacing:2px;}
#TrailerWhatsNext h3 {font-family:'Source_Serif_Pro','Times New Roman';font-weight:normal;}
#TrailerWhatsNext p {font-family:'hack';font-variation-settings:'wght' 400, 'wdth' 100; font-size:16px;line-height:120%;padding-top:10px;opacity:0.4;}
#TrailerWhatsNext p.titel {font-family:'Source_Serif_Pro'; font-weight:600;
                           font-size:18px;line-height:120%;padding-top:10px;opacity:0.4;}


#TrailerWhatsNext .whatsnextopt:hover p {opacity:1;}
#TrailerWhatsNext .whatsnextopt:hover .button {background-color:rgb(255, 255, 255, 0.50);}


/*--------------*/
#InfoBittedrehen {display:none;}
#InfoBittedrehen img  {transform: rotate(60deg); animation-name: drehen; animation-duration:3s;  animation-delay: 0s;}

@media screen and (orientation:portrait) and (max-device-width: 480px) {
   #InfoBittedrehen {display:inherit;}
   #InfoBittedrehen img  {transform: rotate(0deg); }
   @keyframes drehen {
      from {transform: rotate(60deg);}
      to {transform: rotate(0deg);}
    }
}
/*--------------*/
@media screen and   (max-device-height: 580px) {
    #iconsRechts div {  margin-left:4px; width:42px;height: 42px;padding-top:4px!important;}
    #iconProgramm ,#btn_atmo{ width:42px;height: 42px;padding-top:0px!important;text-align:center;}
    #Audioleiste #Audio_play{  width:42px;height: 42px;padding-top:0px!important;text-align:center;}
    #Audioleiste #Audio_play img {margin:5px 0px 0px 5px!important ; padding:6px 5px 0px 4px!important;}
#Audioleiste #Audio_play #iconpause  {padding-left:0px!important;padding-top: 7px!important;}
#Audioleiste #Audio_play i  {margin-top:6px!important;}
    #iconProgramm img{margin:5px 0 0 1px;}
    .icon_audio.aktiv { width: 42px; height: 42px; margin-bottom: -10px;margin-top: 0px;}
    .icon_audio img { width: 90%; margin-top: 10%; opacity: 0.7; }
    #iimpressumClose {width: 42px; height: 42px; }
}
/*--------------*/

#VideoInBegleiter {position:absolute;z-index:99999999991;width:90%;max-width:500px; height:500px;}
#VideoInBegleiter video {position:relative;z-index:1; height:90%;max-height:500px;border:4px solid #9b8a52; background-color:#9b8a52;}
#VideoInBegleiter #closeVideo {position:absolute;top:5px;right:5px;z-index:2;cursor:pointer;}
#VideoInBegleiter #closeVideo img {width:30px;}