:root {
--iphonemenuicons:rgba(180,207,95,1);
}

body {
width:100vw;
}

body, div, a, li, ul, textarea, input, p {
font-family: Roboto-thin, sans-serif;
color: var(--normalschrift);
font-weight: lighter;
}

#footer{
margin: 5vw auto 0px auto;
padding: 5vw 3vw 10vh 3vw;
max-width: 88vw;
overflow: hidden;
position: relative;
background-color: rgba(180,207,95,1);
}

#footertext {
display: flex;
flex-direction: row-reverse;
position: relative;
padding-right: 4vw;
}

#spalte1 {
position: absolute;
width: 100%;
background-image: url('../kleinbilder/logo_footer.svg');
height: 100%;
background-repeat: no-repeat;
background-position: 0% 10%;
top: -6vw;
margin-left: 4vw;
}

#spalte2, #spalte3 {
margin-top: 25vw;
z-index:1000;
}

#spalte2 {
width: 60%;
position: relative;
left: 12vw;
}

#spalte3 {
width: 40%;
position: relative;

}

.footerspalte p, .footerspalte a, .footerspalte li, .footerspalte h1, .footerspalte h2, .footerspalte h3, .footerspalte h4, .footerspalte h5, .footerspalte h6{ 
color:rgba(255,255,255,1);
font-size: 5.7vw;
}

.footerspalte div p {
    margin: 0px;
}


#telefon a {
white-space: nowrap;
}


#mainbox{
width:100vw;
position:absolute;
left: 0vw;
}

h1{
font-size:7.7vw;
}

h2{
}

h3{
}

h4, .hinterlegt h1, .hinterlegt h2, .hinterlegt h3{
font-family: Roboto-Light;
color: var(--h1farbe);
font-weight: 600 !important;
}

p{
}

ul{
}

li{
}

a{
}

.listenbutton{
display:inline;
}


#iphonebox{
display:inline;
position:fixed;
top: 26vw;
height:calc(100vh - 28vw);
left:0vw;
width:100vw;
overflow-y: scroll;
z-index: 0;
-webkit-overflow-scrolling:touch;
overflow-x:hidden;
}

.servicenaviblock {
width: 16vw;
left: 80%;
position: relative;
top: 22vw;
display: flex;
flex-direction: column-reverse;
height: 32vw;
justify-content: space-between;
}

.servicenaviitem.serviceelement {
height: 14vw;
width: 14vw;
}

.serviceicon {
width: 100%;
height: 100%;
background-color: white;
border: var(--aktivemenuicons) solid 0.6vw;
display: flex;
border-radius: 50%;
}

.serviceicon svg {
display: block;
width: 80%;
margin: auto;
}

#listenbildli{
-webkit-transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
position: relative;
height: 100%;
width: 100%;
top: 0px;
}

#hamburger{
position: absolute;
top: 4vw;
left: 81.5vw;
width: 12vw;
height: 12vw;
}
	
.listenstrichli{
position: absolute;
border-radius:1vw;
width: 100%;
height: 12%;
background-color: var(--aktivemenuicons);
}
	
#listenstrichli1{
top:0px;
}
#listenstrichli2{
top:44%;
}
#listenstrichli3{
top:88%;
}

.obergerotiert {
-webkit-transform: rotate(45deg) translate(5vw,2.5vw) scale(1.5,1);
-moz-transform: rotate(45deg) translate(5vw,2.5vw) scale(1.5,1);
-ms-transform: rotate(45deg) translate(5vw,2.5vw) scale(1.5,1);
-o-transform: rotate(45deg) translate(5vw,2.5vw) scale(1.5,1);
transform: rotate(45deg) translate(5vw,2.5vw) scale(1.5,1);
}
	
.untergerotiert {
-webkit-transform: rotate(-45deg) translate(5vw,-2.5vw) scale(1.5,1);
-moz-transform: rotate(-45deg) translate(5vw,-2.5vw) scale(1.5,1);
-ms-transform: rotate(-45deg) translate(5vw,-2.5vw) scale(1.5,1);
-o-transform: rotate(-45deg) translate(5vw,-2.5vw) scale(1.5,1);
transform: rotate(-45deg) translate(5vw,-2.5vw) scale(1.5,1);
}
	
.geunrotiert{
	-webkit-transform:rotate(0deg) translateY(0vh) scale(1,1);
	-moz-transform:rotate(0deg) translateY(0vh) scale(1,1);
	-ms-transform:rotate(0deg) translateY(0vh) scale(1,1);
	-O-transform:rotate(05deg) translateY(0vh) scale(1,1);
	transform:rotate(0deg) translateY(0vh) scale(1,1);
	}



#menu{
position:fixed;
-webkit-transform: scale(1,0);
-ms-transform: scale(1,0);
-moz-transform: scale(1,0);
-o-transform: scale(1,0);
transform: scale(1,0);
-webkit-user-select: none;
top: 26vw;
transform-origin:top;
width: 100vw;
background-color: rgba(255,255,255,1);
height: calc(100% - 26vw);
background-color: rgba(4,78,119,1);
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
display:flex;
align-items:var(--flexalign);
left:0px;
}

#menukasten{
margin: 0px 0px 0px 0px;
transform-origin-x: center;
transform-origin-y: top;
width: 100%;
position: relative;
display:block;
margin-top:0px;
}

.navicontainer1{

}

.navicontainers {
top: 0vw;
width: 100%;
position: relative;
font-size: 4vw;
font-weight: bold;
word-wrap: break-word;
overflow-wrap: break-word;
}


.navicontainers .hauptitem{
position: relative;
clear: both;
margin-left:2vw;
}

.hauptitem{
z-index:1000;
}


.hauptitem a{
position: absolute;
top: 2vw;
left: 20vw;
font-size: 6.5vw;
color: var(--blaumenuschrift);
font-weight: lighter;
}

.aktiv .hauptitem a{
color: white;
}

.aktiv .hauptitem a::after, .aktiv .hauptitem a:after, .aktiv.popup::after, .aktiv.popup:after {
content: "";
display: block;
width: 100%;
height: 0.5vw;
background-color: var(--h2farbe);
border-radius: 0.1vw;
margin-top: 0.2em;
margin-left: 0px;
}

.aktiv.popup::after, .aktiv.popup:after {
position:absolute;
width:40%;
}

.hauptitem .icon{
background-color: var(--iphonemenuicons);
border:0.6vw solid white;
}

.icon{
border: none 0px;
border-radius: 50%;
display: flex;
width: 12vw;
height: 12vw;
position: relative;
margin-top: 2vw;
left: 2vw;
padding: 0.4vw;
border:0.6vw solid white;
}

.icon.untermenu{
background-color: var(--aktivemenuicons);
width: 10vw;
height: 10vw;
margin-top:1vw !important
}

.hauptitem .icon.aktiv, .icon.aktiv {
background-color:var(--graumenuicons) ;
}

.navicontainer1 .hauptitem .icon{
margin-top:1vw !important;
}

#headertitel1icon{
display:none;
}

.farbig{
fill:rgba(255,255,255,1);
}

.hingergrundig{
fill:rgba(44,131,197,1);
}

.iconimg{
width: 100%;
max-width: 100%;
max-height: 100%;
}

.pluszeichen{
position: relative;
top: 0px;
left: 5vw;
font-weight: bold;
width: 12vw;
height: 12vw;
transform: rotate(-90deg);
}

.geoeffnet{
transform: rotate(90deg);
left:0px;
}

.popups{
background-color: initial;
position: relative;
left: 16vw;
transform-origin: top;
clear: both;
margin-top:-13vw;
z-index:1000;
}

.popups a {
position: relative;
float: right;
width: 80vw;
margin-top: -14vw;
left:-2vw;
}

.popup{
position: relative;
display: block;
left: 0px;
top: 5.3vw;
margin-bottom: 2vw;
font-size: 6.5vw;
font-weight: normal;
color: var(--blaumenuschrift);
transform-origin:left;
font-family: Roboto-Light;
}

.aktiv.popup{
color:white;
}


.transform{
transition: -webkit-transform 0.5s;
transition: -ms-transform 0.5s;
transition: -moz-transform 0.5s;
transition: -o-transform 0.5s;
transition: transform 0.5s;
}

.medaillephone {
position: absolute;
width: 24vw;
height: 24vw;
bottom: 2vw;
right: 2vw;
}

.medaillepc{
display:none;
}

#header{
position:fixed;
height: 26vw;
width:100vw;
top:0px;
z-index:2;
}

#logo{
position: absolute;
height: 25vw;
width: 68vw;
left: 5vw;
top: 2vw;
overflow: hidden;
}

.logobild{
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}


#hauptbild, .keinbild, .bildbutton{
display:none;
}

.headersticky{
position: -webkit-sticky;
position: sticky;
top: calc(87vw - 100vh);
}

.headerrelativ{
position: relative;
top: 0vw;
}

#headerbild{
height: calc(100vh - 76vw);
width: 100vw;
left: 0vw;
z-index:200;
background-color: rgba(255,255,255,1);
}

#headerbild.typunterseite{
height: initial;
position: relative;
top: 0px;
}

#headerbildbox{
display: flex;
justify-content: center;
position: absolute;
width: 94vw;
height: calc(100vh - 88vw);
left: 3vw;
overflow: hidden;
}

.unterbannertext #headerbildbox {
display: flex;
justify-content: center;
position: relative;
width: 94vw;
height: calc(100vh - 88vw);
left: 0px;
overflow: hidden;
z-index: 200;
}

.headerbildbild {
width: 160%;
margin-left: -30%;
object-fit: cover;
height: calc(100vh - 80vw);
}

#headerbildbanner{
display:none;
}

#headerbildbanneriphone{
position: absolute;
background-color: rgba(180,207,95,1);
width: 88vw;
bottom: 0px;
padding-top: 0px;
padding-right: 3vw;
padding-bottom: 0px;
padding-left: 3vw;
font-weight: 500;
left: 3vw;
font-family: Roboto-Thin;
color: white;
font-size: 5.5vw;
}

.typunterseite #headerbildbanneriphone{
display:none;
}

#welcheseite {
z-index:220;
}

.zurueckgehen{
position: -webkit-sticky;
position: sticky;
top: 9.6vw;
}

.toptitellink a {
position: absolute;
background-color: rgba(180,207,95,1);
width: 88vw;
bottom: 0px;
padding-top: 0px;
padding-right: 3vw;
padding-bottom: 0px;
padding-left: 3vw;
font-weight: 800;
left: 3vw;
font-family: Roboto-Thin;
color: white;
font-size: 8vw;
}

.headertitel1 {
margin: 0px;
}

.bannertext h1, .bannertext h1 a{
font-weight: normal;
color: rgba(255,255,255,1);
font-size:6.1vw;
padding: 0px;
margin: auto auto;
font-style: italic;
}

.trennlinie{
width: 65%;
height: 1px;
background-color: rgba(247,105,55,1);
border: none 0px;
}

.hauptbildbanner{
display: flex;
width: 94vw;
position:relative;
margin: 0vw auto;
}

.hauptbildbanner .linksspaltig{
width:100%;
text-align:center;
}



/*.hauptbildbanner.bannertext h1, .hauptbildbanner.bannertext h1 a{
font-weight: normal;
color: rgba(44,131,197,1);
font-size: 8.6vw;
font-style: normal;
}*/

.hauptheadertitel {
text-align: left;
font-size: 7vw;
color: var(--grauschrift);
z-index: 1;
font-family: Roboto-Light !important;
font-weight: 800 !important;
display: flex;
align-items: flex-end;
max-width: 95%;
}

.typ1 .rugelae::after, .typ3 .rugelae::after {
content: "";
width: 18vw;
height: 18vw;
display: block;
background-image: url('../kleinbilder/kindererziehungphone.svg');
background-repeat: no-repeat;
position: relative;
border-radius: 50%;
background-position: 0% 100%;
flex-shrink: 0;
margin-left: 4vw;
}

.rugelae::after{
animation-name: rugele;
animation-duration: 4s;
transform-origin: bottom center;
animation-iteration-count: 2;
animation-timing-function: linear;
}

.hauptuntertitel.pclayout::after {
content: "";
display: block;
width: 60%;
height: 0.3vw;
background-color: var(--h2farbe);
border-radius: 0.1vw;
margin-top: 0.3em;
margin-left: 20%;
}

.typ2 .hauptuntertitel.pclayout::after {
display:none;
}

.typ2 .hauptuntertitel.pclayout{
text-align: left;
font-size: 7vw;
color: var(--h2farbe);
z-index: 1;
font-family: Roboto-Light !important;
font-weight: 800 !important;
max-width: 95%;
margin: 4vw auto 1vw auto;
}

.typ2 .zurueckgehen {
display: block;
}

.typ2 #headerbildbanneriphone {
display: flex;
position: relative;
background-color: initial;
padding: 15vw 0px 0px 0px;
max-width: 78%;
align-items: center;
}

.typ2 #headertitel1icon {
display: flex;
width: 11vw;
height: 11vw;
background-color: var(--graumenuicons);
border-radius: 50%;
position: relative;
padding: 1.5vw;
margin-left: 2vw;
}

.typ2 #headertitel1icon svg {
display: inline-block;
width: 100%;
height: 100%;
flex-shrink: 0;
}

.typ2 .hauptbildbanner {
margin: 8vw auto 0px auto;
}

.typ2 .hauptheadertitel {
display: none;
}

.typ2 .headertitel1 {
font-family: Roboto-Light;
color: var(--h1farbe);
font-weight: 800;
font-size: 10vw;
position: relative;
margin: 0px auto 0px auto;
display: inline-block;
padding: 0px;
}

.typ2 .headertitel1::after {
content: "";
display: block;
width: 100%;
height: 0.3vw;
background-color: var(--h2farbe);
border-radius: 0.1vw;
margin-top: 0.3em;
margin-left: 0px;
}

.typ2 #headerbildbox {
position: relative;
width: 95%;
margin: auto;
display: flex;
height: 65vw;
transform: rotate(-2.5deg);
border: var(--h3farbe) solid 0.3vw;
}

.typ2 #headerbildbild {
width: 100%;
position: initial;
object-fit: cover;
margin-left: initial;
height: initial;
}

.typ2 .textbox {
width: 90vw;
margin: 0px 6vw;
font-size: 6vw;
font-weight: lighter;
}

.typ2 .textboxtext h3 {
margin: 1vw 0px;
font-size: 6vw;
font-family: Roboto-Medium;
color: var(--grauschrift);
font-weight: 100;
line-height: 1.2em;
}

.typ2 .textbild{
width: 94vw;
margin-left: -3vw;
}

.typ2 .textkasten{
margin-left: -3vw;
}

#sprachen{
position: absolute;
left: 80vw;
top: 25vw;
}

.sprachbutton{
float: left;
margin-right: 3vw;
}

.textbox{
width: 94vw;
margin: 0px auto;
font-size: 6vw;
font-weight:lighter;
margin:auto;
}

.textboxtext{
width: 100%;
font-size: 6vw;
font-weight:lighter;
}

/*.textboxtext h1, #google h1{
font-weight: normal;
color: rgba(44,131,197,1);
font-size: 8.6vw;
text-align: center;
width: 100%;
font-style: normal;
}

.textboxtext h1::after, #google h1::after {
content: "";
display: block;
width: 65%;
height: 1px;
background-color: rgba(247,105,55,1);
border: none 0px;
margin: 3vw auto;
}*/

.textboxtext p, .textboxtext h4, .textboxtext h5, .textboxtext a{
margin:1vw 0px;
font-size: 6vw;
font-weight:lighter;
}

.textboxtext h2{
margin:1vw 0px;
font-size: 7vw;
font-family: Roboto-Light;
color:var(--h2farbe);
}

.textboxtext h3{
margin:1em 0px;
font-size: 6vw;
font-family: Roboto-Medium;
color: var(--grauschrift);
}

.ersteseiteoberbox {
display: flex;
width: 96%;
position: relative;
align-items: center;
flex-direction:column;
margin:0px auto;
}

p.leadtext {
display: block;
margin: 4vw auto 0px auto;
font-family: Roboto-LightItalic;
color: var(--leadtextfarbe);
}

.leadtext::before {
content: "«";
}

.leadtext::after {
content: "»";
}

.textboxtext img{
width:100%;
}

.rundbild {
border-radius: 50%;
width: 70vw !important;
height: 70Vw;
flex-shrink: 0;
border: var(--aktivemenuicons) solid 2vw;
margin:auto;
}

.bildlegende{
font-weight: lighter;
font-style: italic;
font-size: 4vw;
margin: -1vw 0px 1vw 0px;
}

.textkasten{
width:86vw;
padding:4vw;
border-radius:initial;
margin:3vw 0px;
}

#textboxinhalt2kontakt{
position:relative;

}

#kontaktbody, #berstaetigungstext{
position:relative;
padding-top:8vw;
}

.formularfelder{
margin: 0px 0px 0px 0px;
font-family: Roboto-thin;
font-weight: normal;
font-size: 6vw;
color: var(--normalschrift);
width: 97%%;
padding: 0px 1vw;
border: var(--leadtextfarbe) solid 1px;
}

#bitteausfuellen {
font-size: 6vw;
color: var(--h2farbe);
margin:2vw;
}

.inputvortext {
margin: 0px 0px 0px 0px;
font-size: 8vw;
}


.formularinputs{
display: flex;
flex-direction: column;
font-family: Roboto-thin;
font-weight: normal;
font-size: 6vw;
color: var(--normalschrift);
margin: 0px 0px 2vw 2vw;
width: 93%;
}

.formularinputs input, .formularinputs textarea {
font-family: Roboto-Light;
font-weight: normal;
font-size: 6vw;
color: var(--normalschrift);
text-align: left;
display: block;
border: var(--leadtextfarbe) solid 1px;
padding: 2vw 1vw;
width:100%;
}

.formularinputs input::-webkit-input-placeholder, .formularinputs textarea::-webkit-input-placeholder{
color:var(--menugruen);
}

.formularinputs input::-moz-placeholder, .formularinputs textarea::-moz-placeholder, .formularinputs input:-ms-input-placeholder, .formularinputs textarea:-ms-input-placeholder{
color:var(--menugruen);
}

.formularinputs input::placeholder, .formularinputs textarea::placeholder{
color:var(--menugruen);
}

.formularinputs input.error, .formularinputs textarea.error {
color:var(--h2farbe);
}

.formularinputs input:focus, .formularinputs textarea:focus,  .formularinputs input:hover, .formularinputs textarea:hover{
 border-width:2px;
}


h2.kontakth2{
color:var(--h1farbe);
font-size:8vw;
}

#kontaktaufnahme .kontakth2 {
margin: -6vw 0px 3vw 0px;
}

#kontaktaufnahme .kontakth2::after, #kontaktaufnahme .kontakth2:after{
content:":";
}

#erwuenscht {
color: var(--iphonemenuicons);
}

.kontaktbutton {
color: white;
font-family: Roboto-Light;
font-size: 6vw;
font-weight: 600;
cursor: pointer;
background-color: var(--aktivemenuicons);
text-align: center;
margin: 1vw 0px 6vw 2vw;
padding: 1vw 4vw;
display: block;
border: var(--leadtextfarbe) solid 0.1vw;
}

#google{
width: 94vw;
height: 100vw;
position: relative;
display: flex;
flex-direction: column;
margin: 4vh auto 2vh auto;
}

#google iframe{
width:100%;
height:100%;
}

#google .kontakth2 {
margin-bottom: 4vw;
}

.hinterlegt{
background-color:rgba(240,240,240,1);
color: var(--normalschrift);
}

.hinterlegt > *,.hinterlegt li{
color: var(--normalschrift);
}


#seitentitel{
position:relative;
left: 3vw;
max-width:96vw;
}

.titellink, #seitentitel h1{
font-size: 6vw;
font-weight: normal;
color: #877717;
}


.navicontainers{

}

.navibackground{

}

.adresstext{
font-size: 5vw;
font-weight: normal;
}

.copyright{
font-size: 5vw;
font-weight: normal;
}

.adresstext h2{
margin:0px;
padding:0px;
font-weight: bold;
}

.widgetblock {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
}

.widget{
width: 96vw;
border: var(--raemlifaarbe) solid 0.5vw;
margin: 0px 0px 5vw 0px;
display: flex;
padding: 6vw 1vw 1vw 1vw;
cursor: pointer;
flex-direction: column;
}



.widgettitel {
padding: 1vw 0px;
margin: 3vw 0px 0px 0px;
text-align: center;
color: var(--h2farbe);
font-family: Roboto-Light;
font-size: 9vw;
}

.widgettitel::after, .widgettitel:after{
content: "";
display: block;
height: 0.5vw;
border: none 0px;
width: 30%;
left: 35%;
position: relative;
background-color: var(--menugruen);
margin: 2vw 0px;
}

.widgetbildkasten {
position: relative;
width: 90%;
margin: auto;
display: flex;
height: 60vw;
transform: rotate(-2.5deg);
border: var(--h3farbe) solid 0.3vw;
}

.widgetbild {
width: 100%;
position: relative;
object-fit: cover;
}

.querbox {
display: flex;
align-items: flex-end;
}

.teiltext{
font-family: Roboto-Thin;
font-size: 6vw;
}

.mehrbutton::after{
content:"...";
}

.teiltext.lang{
display:none;
}

.mehrbuttondiv {
display: block;
background-color: var(--aktivemenuicons);
width: 22vw;
}

.mehrbutton {
font-size: 8vw;
color: white;
font-family: Roboto-Light;
}

.offen{
-webkit-transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}

.zu{
-webkit-transform: scale(1,0);
-ms-transform: scale(1,0);
-moz-transform: scale(1,0);
-o-transform: scale(1,0);
transform: scale(1,0);
height:14vw;
overflow:hidden;
}

#logintable{
display:none;
}


#loginerscheinbutton{
display:none;
}

.unterseitentext .textboxalle{
display:none;
}



/*////////////////////////////////////////////////////////////*/

@media only screen and (orientation : landscape){ 

#header {
position: fixed;
height: 26vh;
width: 100vw;
top: 0px;
z-index: 2;
}

#logo {
position: absolute;
height: 25vh;
width: 68vh;
left: 5vw;
top: 2vw;
overflow: hidden;
}

#hamburger {
position: absolute;
top: 4vw;
left: 88vw;
width: 12vh;
height: 12vh;
}

#iphonebox {
display: inline;
position: fixed;
top: 26vh;
height: calc(100vh - 28vh);
left: 0vw;
width: 100vw;
overflow-y: scroll;
z-index: 0;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
}

.headersticky{
position: -webkit-sticky;
position: sticky;
top: calc(10vh);
}

.zurueckgehen {
position: -webkit-sticky;
position: sticky;
top: 10vh;
}

#headerbildbanneriphone {
position: absolute;
background-color: rgba(180,207,95,1);
width: 88vw;
bottom: 0px;
padding-top: 0px;
padding-right: 3vw;
padding-bottom: 0px;
padding-left: 3vw;
font-weight: 500;
left: 3vw;
font-family: Roboto-Thin;
color: white;
font-size: 5.5vh;
}

.toptitellink a {
position: absolute;
background-color: rgba(180,207,95,1);
width: 88vw;
bottom: 0px;
padding-top: 0px;
padding-right: 3vw;
padding-bottom: 0px;
padding-left: 3vw;
font-weight: 800;
left: 3vw;
font-family: Roboto-Thin;
color: white;
font-size: 8vh;
}

.servicenaviblock {
width: 16vh;
left: 87%;
position: relative;
top: 24vh;
display: flex;
flex-direction: column-reverse;
height: 32vh;
justify-content: space-between;
}

.servicenaviitem.serviceelement {
height: 14vh;
width: 14vh;
}

.obergerotiert {
-webkit-transform: rotate(45deg) translate(5vh,2.5vh) scale(1.5,1);
-moz-transform: rotate(45deg) translate(5vh,2.5vh) scale(1.5,1);
-ms-transform: rotate(45deg) translate(5vh,2.5vh) scale(1.5,1);
-o-transform: rotate(45deg) translate(5vh,2.5vh) scale(1.5,1);
transform: rotate(45deg) translate(5vh,2.5vh) scale(1.5,1);
}
	
.untergerotiert {
-webkit-transform: rotate(-45deg) translate(5vh,-2.5vh) scale(1.5,1);
-moz-transform: rotate(-45deg) translate(5vh,-2.5vh) scale(1.5,1);
-ms-transform: rotate(-45deg) translate(5vh,-2.5vh) scale(1.5,1);
-o-transform: rotate(-45deg) translate(5vh,-2.5vh) scale(1.5,1);
transform: rotate(-45deg) translate(5vh,-2.5vh) scale(1.5,1);
}

#menu {
position: fixed;
-webkit-transform: scale(1,0);
-ms-transform: scale(1,0);
-moz-transform: scale(1,0);
-o-transform: scale(1,0);
transform: scale(1,0);
-webkit-user-select: none;
top: 0px;
transform-origin: top;
width: 100vw;
background-color: rgba(255,255,255,1);
height: calc(100%);
background-color: rgba(4,78,119,1);
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
display: flex;
align-items: var(--flexalign);
left: 0px;
}

#menukasten{
transform-origin: top;
}

.menuoffen #logo{
display:none;
}

#header.menuoffen{
width:20vw;
left:80vw;
}

.menuoffen #hamburger{
left:8vw;
}

.medaillephone {
position: sticky;
width: 24vh;
height: 24vh;
top: 75vh;
right: 2vh;
}

.icon{
width: 12vh;
height: 12vh;
}

.hauptitem a {
position: absolute;
top: 2vw;
left: 24vh;
font-size: 6.5vh;
color: var(--blaumenuschrift);
font-weight: lighter;
}

.pluszeichen {
position: absolute;
top: 1vh;
left: 34vw;
font-weight: bold;
width: 12vh;
height: 12vh;
transform: rotate(-90deg);
}

.geoeffnet {
transform: rotate(90deg);
left: 30vw;
top:2vh;
}

.popups {
background-color: initial;
position: absolute;
left: 42vw;
transform-origin: top;
clear: both;
top: 0px;
z-index: 1000;
}

.icon.untermenu {
background-color: var(--aktivemenuicons);
width: 10vh;
height: 10vh;
margin-top: 1vw !important;
position: relative;
}

.popups a {
position: relative;
float: right;
width: 35vw;
margin-top: -16vh;
left: 5vw;
}

.popup {
position: relative;
display: block;
left: 0px;
top: 5.3vh;
margin-bottom: 2vw;
font-size: 6.5vh;
font-weight: normal;
color: var(--blaumenuschrift);
transform-origin: left;
font-family: Roboto-Light;
}

.hauptitem .icon.aktiv, .icon.aktiv {
background-color: var(--graumenuicons);
}
}