@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
:root {
    --Frost-Frame-Left: calc(50% - 450px);
    --Frost-Frame-Top: 180px;
    --Frost-Frame-Width: calc(100% - 180px);
    --Frost-Frame-Width_Teil: 30%;
    --Frost-Frame-Padding: 10%;
    --blur: 15px;
    --Transparens: 0.65;
}

.Frosed_Glass_Rahmen {
  display: none;
  position: fixed;
  background: inherit;
  top: 30px;
  left: 20px;
  width: 510px;
  height: 90px;
  border-radius: 15px;
  border: 10px solid rgba(255,255,255,.35);
  box-shadow: 8px 8px 4px rgba(0,0,0,.3);
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.Frosed_Glass_Rahmen:before {
  content: '';
  position: absolute;
  top: 0; left:0; right:0; bottom:0;
  background: inherit;
  background: var(--background) no-repeat 100% fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: blur(var(--blur)); 
  -webkit-filter: blur(var(--blur)); 
  -moz-filter: blur(var(--blur));
  -o-filter: blur(var(--blur));
  -ms-filter: blur(var(--blur));
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15');
}

.Frosed_Glass_Background{
    position: absolute;
    background-color: white;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: var(--Transparens);
    border-radius: 5px;
}

.Frosed_Glass_Border{
    position: absolute;
    background-color: transparent;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    border-color: white;
    border-width: 1px;
    border-style: solid;
    opacity: var(--Transparens);
}

#Frosed_Glass_Text{
    display: block;
    position: relative;
    width: auto;
    height: auto;
    top: 0px;
    text-align: center;
    vertical-align: middle;
    font-family: 'Great Vibes', cursive;
    font-size: 45px;
    font-weight: bold;
    font-style: normal;
	color: rgba(255,255,255,.5);
	text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
}

#Frosed_Glass_InfoText{
    position: relative;
    display: none;
    width: auto;
    height: auto;
    top: 0px;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    font-weight: bold;
    font-style: normal;
	color: rgba(255,255,255,.5);
	text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
}

#Frosed_Glass_InfoText.on{
    display: none;
}

#Frosed_Glass_Text.off{
    display: block;
}

.Frosed_Glass_Rahmen.on{
    display: flex;
}
/*
---------------------------------------------------------------------------------------
------------  HINTERGRUND PLEXIGLASS FÜR CONTAINER  -----------------------------------
---------------------------------------------------------------------------------------
*/

.subcontainer_Frosed_Glass_Rahmen{
  display: none;
  position: fixed;
  background: inherit;
  top: calc(var(--Frost-Frame-Top) + 10px);
  left: var(--Frost-Frame-Left);
  width: var(--Frost-Frame-Width);
  max-width: 900px;
  max-height: 700px;
  height: calc(100% - 300px);
  border-radius: 15px;
  border: 10px solid rgba(255,255,255,.35);
  box-shadow: 8px 8px 4px rgba(0,0,0,.3);
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.subcontainer_Frosed_Glass_Rahmen:before {
  content: '';
  position: absolute;
  top: 0; left:0; right:0; bottom:0;
  background: inherit;
  background: var(--background) no-repeat 100% fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: blur(var(--blur)); 
  -webkit-filter: blur(var(--blur)); 
  -moz-filter: blur(var(--blur));
  -o-filter: blur(var(--blur));
  -ms-filter: blur(var(--blur));
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15');
}

.subcontainer_Frosed_Glass_Background{
    position: absolute;
    background-color: white;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: var(--Transparens);
    border-radius: 5px;
}
.subcontainer_Frosed_Glass_Border{
    position: absolute;
    background-color: transparent;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    border-color: white;
    border-width: 1px;
    border-style: solid;
    opacity: var(--Transparens);
}
.subcontainer_Frosed_Glass_Rahmen.on{
    display: flex;
}
/*
---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
------------CONTAINER IN DEN ALLE EXTERNEN SEITEN GELEDEN WERDEN-----------------------
---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
*/
.subcontainer_back_pic{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: none; 
    justify-content: center; 
    align-items: center;
    z-index: 1;
}

.img_back_pic{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--background) no-repeat 100% fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.subcontainer{
    position: absolute;
    display: none;
    width: var(--Frost-Frame-Width);
    max-width: 900px;
    height: calc(100% - 310px);
    left: calc(var(--Frost-Frame-Left) + 8px);
    top: calc(var(--Frost-Frame-Top) + 25px);
    max-height: 700px;
    z-index: 3;
    overflow: hidden;
    justify-content: center;
}
.subcontainer_back_pic.on{
    display: flex; 
}
.subcontainer.menu{
	display: flex;
}