: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;

}

#content {
margin-bottom: 30vw;
}

#footer{

margin: 5vw auto 0px auto;

padding: 5vw 3vw 10vh 3vw;

max-width: 88vw;

position: relative;

background-color: rgba(180,207,95,1);

}

#footer::after{
content: "";
position: relative;
height: 5vw;
width: 94vw;
background-color: var(--aktivemenuicons);
top: calc(10vh + 6.4vw);
display: block;
left: -3vw;
z-index: -50;
}

#footertext {

display: flex;

flex-direction: row-reverse;

position: relative;

padding-right: 4vw;
margin-bottom: calc(1vh - (10vh + 6vw));

}



#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;

}

.datenschutz {
flex-basis: 100%;
width: 50vw;
position: relative;
display: flex;
justify-content: right;
margin-top: 5vw;
margin-bottom: -10vh;
z-index:100;
left:38vw;
}

.inlinemiticon{
display: inline-flex;
align-items: center;
}

#datenschutzicon {
height: 2.2em;
margin-right: 2vw;
}

.inlinemiticon p, .inlinemiticon a {
    font-size: 0.9em;
    color: rgba(14,102,145,1);
    }
    
.copy {
    font-family: Roboto;
    font-size: 3.2vw;
  	color: rgba(14,102,145,1) !important;
    margin-top: 2vw;
    left: 3vw;
    position: relative;
    padding-left: 1.5vw;
    height: 4vw;
    width: 50vw;
    
}

#copyright a {
    color: rgba(14,102,145,1) !important;
}

#mainbox{

width:100vw;

position:absolute;

left: 0vw;

}



h1{

font-size:7.7vw;

}



h2{

}



h3{

}



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(0,1);

-ms-transform: scale(0,1);

-moz-transform: scale(0,1);

-o-transform: scale(0,1);

transform: scale(0,1);

-webkit-user-select: none;

top: 26vw;

transform-origin:left;

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: hidden;

-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;

}

#menu.menugeoffen, #menukasten.menugeoffen{
-webkit-transform: scale(1,1);

-ms-transform: scale(1,1);

-moz-transform: scale(1,1);

-o-transform: scale(1,1);

transform: scale(1,1);
}


#menu.menugeoffen{
overflow-y: scroll;
}

.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{


}





.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;



}



.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 h5, .textboxtext a{

margin:1vw 0px;

font-size: 6vw;

font-weight:lighter;

}


.textboxtext h4 {
font-family: Roboto-Light;
color: var(--h1farbe);
font-weight: bold;
font-size: 7.5vw;
margin:0.6em 0px 0.3em 0px;
}



.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;

}

#eingang img {
width: 100%;
position: relative;
left: -1vw;
}


.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);

}

}