@keyframes einzoomen {

  from {opacity:1}

  to {opacity:0.4}

}

:root{
--verhaeltniszahl:2;
--hoehequer:32px;
}

.pclayout{
display:none !important;
}



body {

width:100vw;
font-size: 6vw;
}



#footer {
margin-top: 0px;
margin-bottom: -5vw;
padding: 4vw 5vw 0px 4vw;
background-color: transparent;
position: relative;
background-image: url('../kleinbilder/welle_smart_unten.svg');
background-repeat: no-repeat;
background-position: center 60%;
}


.footerelement{

width:46vw;

display:flex;

flex-direction:column;

}



.footerelement .footericon{

margin:auto;

}



.footerelement .deutschtext{

display:none;

}

.boxanzeigen #adressedeutschtext {
left: 2vw;
width: 84vw;
font-size: 1em;
color: rgba(255,255,255,1);
border: 1px solid black;
padding: 4vw;
position: absolute;
top: 18%;
display: block;
}

.boxanzeigen #adressedeutschtext h2{
font-size:1em;
}

.boxanzeigen#adresse {
width: 96vw;
height: 80vh;
position: fixed;
top: 20vh;
background-color: rgba(0,0,0,0.8);
z-index:5;
}

.boxanzeigen #adressefootericon {
left: 3vw;
width: 6.2vw;
height: 5vw;
border-width: 1px;
position: absolute;
top: 3vw;
background-color: rgba(0, 140, 250, 1);
}

.boxanzeigen #adresse .adresstext.fett.footernavi {
display: none;
}

#footertext {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 75vw;
}

#textboxfooterein{
text-align: center;
background-color: rgba(255,255,255,0.8);
z-index: 2;
width: 90vw;
left: 5vw;
position: relative;
top:calc(21vh * var(--verhaeltniszahl));
transform: rotate(-20deg);
font-size: 1em;
display: flex;
flex-direction: column;
}

#textboxfooterein h1{
font-size: 1em;
font-weight: normal;
margin:2px 0px 0px 0px;
}

#textboxfooterein p{
margin:2px;
}





#spalte1{

display:flex;

width:98vw;

flex-wrap:wrap;

margin:0px;

}



.serviceicon {
width: 20vw;
height: 20vw;
display: flex;
}

.textteil {
display: none;
}

.serviceicon svg {
width: 100%;
height: 100%;
margin: auto;
}

#adressefootericon svg {
width: 98%;
height: 98%;
margin: auto;
}

#adressefootericon{
border: 1vw solid #fff;
border-radius: 50%;
width: 30vw;
height: calc(30vw - 3px);
display: flex;
padding-bottom: 3px;

}

.medaillepc{
display:none;
}

.medaillephone {
width: 25vw;
height: 25vw;
top: 15vw;
left: 73vw;
position: absolute;
}

.nichtfooter, .nichtiphone{

display:none;

}



.loginelement{

display:none !important;

}


.datenschutzfelder {
display: flex;
width: 80vw;
padding: 5vw 10vw;
background-color: #1D1D1B;
position: relative;
left: -4vw;
align-items: center;
justify-content: space-between;
}

#datenschutzicon {
width: 15vw;
}

.datenschutzlink {
font-family: NixieOne;
font-weight: normal;
color: white;
}


.google #google{

width:40vw;

height:40vw;

}

#telefon{
display:none;
}

.adresstext, .adresstext a, .adresstext span, .adresstext p{
font-size: 6vw;
font-weight: normal;
font-family: NixieOne;
margin:0px;
color:white;
}

.footerschwarz {
display: block !important;
position: relative !important;
z-index: -50;
height: 25vw;
width: 100vw;
background-color: black;
top: -28vw;
}



.adresstext.fett{

font-weight: normal;

display: none;

margin: 2vw auto;

color:rgba(32, 77, 188, 0.86);

font-size: 1em;

}

#footerlogo {
width: 30%;
border: var(--pink) solid 1vw;
}

#webbern {
position: relative;
top: 7vw;
left: 0px;
color: var(--pink);
font-family: Roboto;
}

.copy{

font-size: 5vw;
color: var(--pink);

}

#mainbox{

width:100vw;

position:absolute;

left: 0vw;

}



h1{

}



h2{

}



h3{

}



h4{

}



p{

}



ul{

}



li{

}



a{

}



.listenbutton{

display:inline;

}





#iphonebox{

display:inline;

position:fixed;

top: 0px;

height:100vh;

left:0vw;

width:100vw;

overflow-y: auto;

z-index: 0;

-webkit-overflow-scrolling:touch;

}



.iphoneheaderabstandhalter{

display:block;


}



#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: 3.6vw;
left: 83vw;
width: 13vw;
height: 14vw;
}

	

.listenstrichli{

position:absolute;

width:100%;

height:13%;

background-color:var(--pink);

}

	

#listenstrichli1{

top:0px;
transform-origin:center center;
}

#listenstrichli2{

top:43.3%;

}

#listenstrichli3{

top:85%;
transform-origin:center center;
}

.obergerotiert {
-webkit-transform: rotate(45deg) translate(5vw,3.5vw) scale(1.5,1);
-moz-transform: rotate(45deg) translate(5vw,3.5vw) scale(1.5,1);
-ms-transform: rotate(45deg) translate(5vw,3.5vw) scale(1.5,1);
-o-transform: rotate(45deg) translate(5vw,3.5vw) scale(1.5,1);
transform: rotate(45deg) translate(5vw,3.5vw) scale(1.5,1);
}
	
.untergerotiert {
-webkit-transform: rotate(-45deg) translate(5vw,-3.5vw) scale(1.5,1);
-moz-transform: rotate(-45deg) translate(5vw,-3.5vw) scale(1.5,1);
-ms-transform: rotate(-45deg) translate(5vw,-3.5vw) scale(1.5,1);
-o-transform: rotate(-45deg) translate(5vw,-3.5vw) scale(1.5,1);
transform: rotate(-45deg) translate(5vw,-3.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: 0px;
transform-origin: left;
z-index: 9;
left: 0px;
background-color: rgba(0,0,0,1);
}



.navicontainers{

width: calc(((80vh / (4 + 1)) * 1.4 * var(--verhaeltniszahl)));
height: calc(90vh - 20vw);

position: absolute;

word-wrap: break-word;

overflow-wrap: break-word;

background-color: rgba(0,0,0,1);

}



.navicontainer1 .hauptitem{

border:none;

}





#menukasten{
height: calc(100vh - (80vh / (4 + 1)));
width: 100vw;
background-color: rgba(0,0,0,1);
top: calc(80vh / (4 + 1) + 4vh);position: relative;
}







.navicontainer1 .hauptitem{


position:absolute;


top:calc((80vh / (4 + 1)) * 0);
}


.navicontainer2 .hauptitem{


position:absolute;


top:calc((80vh / (4 + 1)) * 1);
}


.navicontainer3 .hauptitem{


position:absolute;


top:calc((80vh / (4 + 1)) * 2);
}


.navicontainer4 .hauptitem{


position:absolute;


top:calc((80vh / (4 + 1)) * 3);
}

.hauptitem{

height: 8vw;

z-index: 1000;

width: 60%;

padding: 1vw 0px 13vw 0px;

text-align: left;

left: 15%;

}



.hauptitem a{

position: absolute;
top: 2vw;
left: -6vw;

color: var(--graumenuicons);
width: calc(((80vh / (4 + 1)) * 1.35 * var(--verhaeltniszahl)));font-size: calc(((80vh / (4 + 1)) / 7) * var(--verhaeltniszahl));
display: block;
}

.icon {
width:calc(40vh / (4 + 1));height:calc(40vh / (4 + 1));
padding: 2vw;
border: var(--graumenuicons) solid 0.7vw;
border-radius: 50%;
}

.iconfarbe, .aktiv .untericon .iconfarbe {
fill: var(--graumenuicons);
}

.aktiv .iconfarbe, .untericon.aktiv  {
fill: var(--graumenuicons);
}

.aktiv .icon, .untericon.aktiv {
border:var(--graumenuicons) solid 0.7vw;
}



.aktiv .hauptitem a{

color: var(--pinkmenuschrift);

}

.navibezeichnung {
color: var(--graumenuicons);
padding: 0px 0px 2vw 0vw;
display: flex;
flex-direction: row;
align-items: center;
margin-top: calc(42vh / ((4 + 1) * -1));margin-left: calc(((80vh / (4 + 1)) - 4vw));font-weight:lighter;
}

.naviname {
font-family: Roboto;
font-weight: lighter;
font-size: 1.2em;
}

.unternaviitem{

display: none;
flex-direction: column;
align-items: center;
position: relative;
background-color: rgba(255,255,255,1);
padding: 3vw 0px 1vw 1vw;
left: calc(((80vh / (4 + 1)) * 0.33 * var(--verhaeltniszahl)));width: calc(((80vh / (4 + 1)) * 0.79 * var(--verhaeltniszahl)));height:20%;
}

.unternaviitem a{
font-size: calc(((80vh / (4 + 1)) / 10) * var(--verhaeltniszahl));font-weight:lighter;
color: rgba(0,0,255,1);
}



.unternaviitem.stelle1{

margin-top: 3vw;

}

.popuppers{
text-align:center;
}

.untericon{

width:calc(30vh / (4 + 1));height:calc(30vh / (4 + 1));

z-index: 10;

border: solid 0.4vw rgba(0,0,255,1);

border-radius: 50%;

padding: 2vw 3vw 4vw 3vw;



}





.iconimg{

width: 100%;

max-width: 100%;

max-height: 100%;

}



.pluszeichen{

position: absolute;
top: calc(2.7vh * var(--verhaeltniszahl));
left: calc(((80vh / (4 + 1)) + (12vw * var(--verhaeltniszahl))));font-weight: bold;
}



.pluszeichendiv{
height: calc(((80vh / (4 + 1)) / 8) * var(--verhaeltniszahl));width: calc(((80vh / (4 + 1)) / 8) * var(--verhaeltniszahl));
display: block;

-webkit-transition:transform 2s;

transition:transform 2s;

}



.geschoben .pluszeichendiv{

-webkit-transform:rotateY(0deg);

transform:rotateY(0deg);

}



.eingezogen .pluszeichendiv{

transform:rotateY(180deg);

-webkit-transform:rotateY(180deg);

}



.popups{

background-color: rgba(241, 236, 229, 0.15);

position: fixed;

left: 48vw;

transform-origin: left;

width: 52vw;
top:0px;
}


.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);
height:calc(80vh - (80vh / (4 + 1)) + (15% / var(--verhaeltniszahl)));overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;

}



.zu{

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

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

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

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

transform: scale(0,1);

}

/*.popup{

position: relative;

display: block;

width: 40vw;

top: 2.5vw;

margin: 0px 0px 5.5vw 0px;

font-size: 5vw;

font-weight: normal;

color: rgba(43, 64, 94,1);

transform-origin: left;

left: 14vw;

}*/



.aktiv.popup{

color: rgba(0,0,255,1);

}



.navitrenn{

position: relative;
width: 75%;
margin: 1vw auto 1vw auto;
border-top:0.1vw solid rgba(87,180,255,1);
}



#servicenavitupf{

top: 87%;

position: fixed;

width: 12vw;

height: 12vw;

left: 83%;

}



.goudtupficon{

width: 100%;

height: 100%;

background-color:var(--pink);

display: flex;

border-radius: 50%;

}



#servicenavituepfli, #goldtupfzu{

width: 80%;

margin: auto;

}



.eingeschaltet{

display:block;

}



.abgeschaltet{

display:none;

}

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

}


.hintergrundtransition{
-webkit-transition: background 0s;
  transition: background 0s;
}


#header{

position:fixed;
height: calc(80vh / (4 + 1));width:100vw;

top:0px;

z-index:10;
background-image: url('../kleinbilder/welle_smart.svg');
background-size: 100%;
background-repeat: no-repeat;
background-position: 0px 25%;
min-height:35vw;
}

#abdeckschwarz {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
height: 27%;
background-color: rgba(0,0,0,1);
}

#logo {
position: absolute;
height: 15vw;
width: 15vw;
left: calc(((3vw / var(--verhaeltniszahl)) / (4 + 1) * 4));top: 3vw;
background-repeat: no-repeat;
background-image: url('../kleinbilder/favicon_black2.svg');
background-size: 100%;
border: white solid 0.3vw;
}

#logo svg{
display:none;
}

/*
.iphonedurchsichtig #logo{

transform: translate(calc(var(--verhaeltniszahl) * 10.5vw),63vw) scale(calc(var(--verhaeltniszahl) - (0.1 * var(--verhaeltniszahl))),calc(var(--verhaeltniszahl) - (0.1 * var(--verhaeltniszahl))));

}

.iphonedurchsichtig .listenstrichli{
background-color:rgba(0,34,255,1);
}



.uniphonedurchsichtigweiss #logo{

transform:translate(0,0) scale(1,1);

}

.uniphonedurchsichtigweiss .listenstrichli{
background-color:rgba(87,180,255,1);
}

.uniphonedurchsichtigweiss.durchsichtig{
background-color:rgba(255,255,255,1);
}


.hintergrundtransition #logo{

-webkit-transition: transform 1s;

transition: transform 1s;}

*/

.logobild{

width: 100%;

position: absolute;

top: 0px;

left: 0px;

}



.servicenaviblock {
width: 20%;
left: 79%;
position: relative;
top: 22vw;
}




#ganzheit {
display: block;
position: absolute;
color: rgba(255,255,255,1);
font-family: Roboto;
width: 80vw;
font-size: 7vw;
top: -6.5vw;
left: 18vw;
transform: scale(1,1.1);
font-weight: lighter;
}

.googlediv iframe {
width: 100%;
height: 80vw;
}

#middlebox{

width: 100vw;

overflow-x: hidden;

height: auto;

overflow-y: visible;
margin-bottom: calc((2.3 / var(--verhaeltniszahl)) * (35px + 15vw));

}



.keinbild, .bildbutton{

display:none;

}





#oberabstandbild {
width: 100vw;
position: relative;
overflow: hidden;
height: 35vw;
background-color:black;
margin-top:-0.5vw;
}



#oberbildcontainer {
position: absolute;

}

#symbolbild {
width: 139%;
transform: rotateY(180deg) rotateZ(180deg);
position: relative;
top: 9vw;
left: -2vw;
}




.oberabstandsbild .ganzbildschirm {

height: 100%;

width:auto;

}



.hauptseite {

padding-top:5em;

}

.hauptseite.seite1 {
margin-top: initial;
padding-top: initial;
min-height: initial;
}



.headersticky{



}



.headerrelativ{

position: relative;

top: 0vw;

}



#headerbild{

height: 48.07vw;

width: 100vw;

left: 0vw;

z-index:200;

background-color: rgba(255,255,255,1);

}



#headerbildbox{

position: absolute;

width: 100vw;

height: 48.07vw;

overflow: hidden;

}



.headerbildbild{

width: 100%;

position: absolute;

left: 0vw;

top: 0vw;

}



#headerbildbanner{

position: absolute;

background-color: rgba(201, 175, 136, 0.56);

width: 94vw;

bottom: 0px;

padding-top: 0px;

padding-right: 3vw;

padding-bottom: 0px;

padding-left: 3vw;

font-weight: 500;

}

.hauptbildbanner.bannertext {
width: 100%;
}


.trennlinie{

width: 60%;

margin: 4vw auto;

height: 0.4vw;

background-color: rgba(210,4,17,1);

border: none;

}

.wuermli{
	stroke:rgba(5,109,255,0.7);
	stroke-width:0.3vw;
	}
	
.wuermlikreis{
	fill:rgba(192,60,10,1);
	r:0.5vw;
	}
	
.wurmcontainer {
width: 82vw;
margin: auto;
margin-top: calc(var(--verhaeltniszahl) * -4vw);
margin-bottom: calc(var(--verhaeltniszahl) * 4vw);
height: calc(10vw * (var(--verhaeltniszahl)));
}

#wurmcontainer1{
opacity:0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}

.gescrollt #wurmcontainer1{
opacity:1;
}

.gewurmt{
margin-top: calc(var(--verhaeltniszahl) * -7.5vw);
transition:margin-top 1.5s ease-out, margin-bottom 1.5s ease-out;
margin-bottom: calc(var(--verhaeltniszahl) * 7.5vw);
}


#sprachen{

position: absolute;

left: 80vw;

top: 25vw;

}



.sprachbutton{

float: left;

margin-right: 3vw;

}





.textboxinhalt{

width: 92vw;

font-size: 1em;
margin-left: 4vw;
margin-right: 4vw;
margin-top: calc((-4vw * var(--verhaeltniszahl)) + 1vh);

}

.hauptseitenbox {
width: 90%;
margin: auto;
position: relative;
padding-top: 2vw;
margin-bottom: 0px;
}

.textboxtext {
width: 100%;
overflow: hidden;
margin-left:initial
}

.textboxtext h1{
font-weight: lighter;
color: var(--grauschrift);
font-size: 1.6em;
font-family: RebeccaLight;
}


.textboxtext h2{
font-weight: lighter;
font-size: 1.5em !important;
color: var(--pink);
font-family: Rebecca;
}

.textboxtext h2.handylayout{
color: var(--h3grau);
font-size: 1em !important;
font-family: Roboto-thin;
font-weight: bold;
}

.textboxtext h3{
color: var(--h3grau);
font-weight: bold;
font-size: 1em !important;
font-family: Roboto-thin;
font-weight:bold;
}

.textboxtext p, .textboxtext h4, .textboxtext h5, .textboxtext h6, .textboxtext a, .textboxtext li {
font-size: 1em;
font-weight: lighter;
color: var(--grauschrift);
}

.textboxtext li {
margin: 0px 0px 1vw 0px;
}

.textboxtext .bildlegende {
text-align: left;
font-size: 0.8em;
margin: -6vw 0px -0.5vw 0px;
font-style: italic;
color: var(--grauschrift);
}

.textbox .textkasten.hinterlegt {
display: block;
padding:1vw 2vw;
background-color: rgba(244,244,242,1);
}

.bannertext h1, .bannertext h1 a, h1.bannertext {
font-weight: lighter;
color: var(--grau);
font-size: 1.8em;
padding: 0px;
margin: 0px 0px 0px 0px;
font-family: NixieOne;
/*text-align:center;*/
}

#bitteausfuellen {
font-weight: lighter;
font-size: 1em !important;
color: rgba(0,140,255,0.9);
}


.textbox img {
max-width: 100%;
width: 100%;
margin: auto;
}



#seitentitel{

position:relative;

left: 3vw;

max-width:96vw;

}



.titellink, #seitentitel h1{

font-size: 1em;

font-weight: normal;

position: relative;

top: 0vw;

text-align: center;
color: rgba(192, 60, 10,1);

}







.adresstext h2{

margin:0px;

padding:0px;

font-weight: bold;

}



.widget{

width: 91vw;

margin: 3vw 3vw 3vw 0.5vw;

border:solid 1vw rgba(199, 178, 153, 1);

}





.widgettitel{

font-weight:bold;

padding: 1vw 1vw 0px 1vw;

}



.widgetbildkasten{

position:relative;

max-width: 100%;

overflow: hidden;

height: 43vw;

}



.widgetbild{

width: 100%;

top:-6vw;

position:relative;

}



.teiltext{

padding: 1vw 1vw 1vw 1vw;

width:100%;

text-align:center;

font-size:5vw;

}



.teiltext.lang{

display:none;

}





.teiltext::after, .mehrbutton::after{

content:"...";

}



.mehrbutton::after{

padding:0px 0px 1vw 1vw;

}



#logintable{

display:none;

}



#google{

width: 90vw;

height: 90vw;

margin: auto;

display: flex;

}



#loginerscheinbutton{

display:none;

}



.widget.typ1, .widget.typ4{

width: 90vw;

border: solid 0.4vw #2b405e;

height: 78vw;

margin: 4vw;

padding: 1vw 1vw 3vw 0.6vw;

background-color: rgba(255, 255, 255, 1);

cursor: pointer;

border-radius: 8vw;

}



.widget.typ1 .widgettitel:before, .widget.typ4 .widgettitel:before, .widget.typ2 .widgettitel:before{

display: inline-block;

width: 6vw;

height: 6vw;

content: " ";

background-color: rgba(222,6,12,1);

margin-right: 1vw;

position: relative;

top: -0.35vw;

border-radius: 1vw;

}



.widget.typ1 .widgettitel, .widget.typ4 .widgettitel, .widget.typ2 .widgettitel{

font-weight: lighter;

text-align: center;

color:#2b405e;

}



.widget.typ1 .widgettitel, .widget.typ4 .widgettitel{

margin: 0px 0px 0px -1vw;

font-size: 8vw;

}



.widget.typ1 .widgetbildkasten, .widget.typ4 .widgetbildkasten {

position: relative;

width: 35vw;

overflow: initial;

height: 35vw;

border-radius: 50%;

border: solid 1vw #e0c56d;

margin: 2vw auto 1vw auto;

-webkit-box-shadow: inset 1.2vw 1.2vw 1.36vw 0.32vw rgba(193,190,182,0.3), 1.2vw 1.2vw 1.6vw 0.32vw rgba(193,190,182,0.3);

-moz-box-shadow: inset 1.2vw 1.2vw 1.36vw 0.32vw rgba(193,190,182,0.3), 1.2vw 1.2vw 1.6vw 0.32vw rgba(193,190,182,0.3);

box-shadow: inset 1.2vw 1.2vw 1.36vw 0.32vw rgba(193,190,182,0.3), 1.2vw 1.2vw 1.6vw 0.32vw rgba(193,190,182,0.3);

}



.widget.typ1 .widgetbild, .widget.typ4 .widgetbild  {

width: 28vw;

top: 3vw;

position: absolute;

left: 4vw;

}



.typ1 .mehrbutton, .typ4 .mehrbutton, .typ2 .mehrbutton, .kontaktbutton {

display: block;

position: absolute;

width: 100%;

color: rgba(186,130,17,0.8);

border: solid 0.4vw rgba(222,6,12,1);

font: 500 6vw 'Lato';

border-radius: 2vw;

height: 8vw;

text-align: center;

padding-top: 0.5vw;

}



.typ1 .mehrbutton, .typ4 .mehrbutton{

position: static;

width: 30%;

margin: 3vw auto;

}



.kontaktbutton {
position: relative;
width: initial;
padding: 1vw 1.4vw 1.4vw 1.4vw;
display: block;
height: initial;
font: normal 8vw "Roboto";
border: none 0px;
background-color: rgba(49, 124, 239, 0.6);
color: rgba(255, 255, 255, 1);;
padding-top: 2vw;
border-radius: 3vw;
}




#widgetblockueberuns2{

margin-bottom:-20vw;

}



#widgetblockueberuns2::before{

content: "Notare";

font-size: 5vw;

font-weight: normal;

color: rgba(43, 64, 94,1);

position: relative;

top: -4vw;

margin: 6vw auto;

display: block;

text-align: center;

}



#widgetblockueberuns3{

display: block;

width: 98%;

}



#widgetblockueberuns3::before{

content: "Team";

font-size: 1em;

font-weight: normal;

color: rgba(43, 64, 94,1);

left: 42.5%;

position: relative;

top: 14vw;

}



.widget.typ2{

clear: both;

width: 100vw;

padding: 0px;

background-color: initial;

border: none;

margin-bottom:20vw;

}



.widget.typ2 .widgetbild{

width: 250%;

position: relative;

left: -80%;

top: 0vw;

}



.widget.typ2 .widgettitel{

font-size: 8vw;

font-weight: 500;

width: 100%;

display: none;

}



.widget.typ2 .widgettitel:before{

top: -0.17vw;

}



.widget.typ2 .widgetbildkasten{

position: relative;

width: 90%;

overflow: hidden;

height: 90vw;

margin: 0px auto;

top: 10vw;

}



.widget.typ2 .teiltext{

width: 80%;

font-family: Lato, 'Lato';

font-size: 1em;

color: #2b405e;

top: 10vw;

position: relative;

margin: 0px auto;

display:none;

}



.widget.typ2 .teiltext:after{

content:"...";

}





.widget.typ2 .mehrbutton{

position: relative;

top: 10vw;

width: 40%;

margin: 4vw auto 8vw auto;

}



.widget.typ2 .rahmeninschrift, .widget.typ3 .rahmeninschrift{

position:relative;

clear:both;

}



.widget.typ2 .rahmeninschrift{

position: relative;

top: -122vw;

width: 100% !important;

}



.widget.typ2.ausrichtung2 .rahmeninschrift{

text-align:center;

width:125%;

}



.widget.typ2.ausrichtung1 .rahmeninschrift{

text-align:center;

width:75%;

}



.widget.typ2 .rahmeninschrift .rahmentitel, .widget.typ3 .rahmeninschrift .rahmentitel{

font-size:8vw;

color: rgba(5,109,250,1);

}



.widget.typ3 .rahmeninschrift .rahmentitel, .widget.typ3 .rahmeninschrift{

text-align:center;

margin-bottom: 2.5vw;
}


.widget.typ3 .rahmeninschrift .rahmenuntertitel{
font-size:1.2em;
color:rgba(255,128,69,0.94);
}

#widgetblockteam3{
margin-bottom:15vw;
}

.widget.typ2 .rahmeninschrift .trennlinie, .widget.typ3 .rahmeninschrift .trennlinie{

width: 20%;

}







.widget.typ2 .rahmeninschrift .trennlinie, .widget.typ3 .rahmeninschrift .trennlinie{

margin: 0.7vw auto;

height: 1px;

background-color: rgba(210,4,17,1);

border: none;
display:none;
}



.widget.typ3{

width: 80vw;

margin: 0px auto 5vw auto;

cursor: pointer;

background-color: initial;
position:relative;
border: none;

}



.wrapbox, .wrapmargin{

display:none;

}







.widget.typ3 .teiltext, .widget.typ3 .mehrbutton, .widget.typ3 .widgettitel{

display:none;

}



.widget.typ3 .widgetbildkasten {

position: relative;

width: 60vw;

overflow: hidden;

height: 60vw;

border-radius: 50%;



margin: 15vw auto 4vw auto;

}



.widget.typ3 .widgetbild {

top:0px;

}



iframe{

max-width:90vw;

left:5vw;

}

.hauptbild {
z-index: -10;
width: 100%;

}

.hauptbildbox{

width:100vw;

overflow:hidden;

height:70vw;

}



.hauptbildbild{

width:100%

}



.paralax .hauptbildbild {
width: 200%;
position: relative;
left: -50%;
top: 10vw;
max-width:inherit;
}






#hauptbildbildueberuns{

top:25vw !important;

width: 150%;

left:-25%;

}



#googleframe{

width:100%;

height:60vw;

margin-left:4vw;

}







.einzelseite.typ2 #iphonebox, .einzelseite.typ1 #iphonebox, .einzelseite.typ4 #iphonebox{

top:20vw;

height:calc(100vh - 20vw);

}



.einzelseite.typ2 .raemlibox, .einzelseite.typ1 .raemlibox, .einzelseite.typ4 .raemlibox{



}



.einzelseite.typ2 .zurueckgehen{

width: 65vw;

display: flex;

margin: -17vw 0px 17vw auto;

left: 32vw;

position: fixed;

z-index: 1;

}



.einzelseite.typ1 .zurueckgehen, .einzelseite.typ4 .zurueckgehen{

width: 65vw;

display: flex;

margin: 6vw 0px 17vw auto;

left: 32vw;

position: fixed;

z-index: 1;

}



.einzelseite.typ2 .raemlibox{

position: absolute;

top: -2vw;

left: -32vw;

width: 100vw;

height: 11vw;

background-color: #fff;

z-index: -1;

}



.einzelseite.typ1 .raemlibox, .einzelseite.typ4 .raemlibox{

position: absolute;

top: -8vw;

left: -32vw;

width: 100vw;

height: 17vw;

background-color: #fff;

z-index: -1;

}



.einzelseite.typ2 .linkicon, .einzelseite.typ1 .linkicon, .einzelseite.typ4 .linkicon{

width:7vw;

}



.einzelseite.typ2 .toptitellink, .einzelseite.typ1 .toptitellink, .einzelseite.typ4 .toptitellink{

width: 54vw;

text-align: right;

}



.einzelseite.typ2 .toptitellink a, .einzelseite.typ1 .toptitellink a, .einzelseite.typ4 .toptitellink a{

font-size: 7vw;

font-weight: 500;

border-bottom: solid 1px #de060c;

}



.einzelseite.typ2 .titellink{

font-weight: normal;

color: rgba(186,130,17,0.8);

font-size: 10vw;

padding: 0px;

margin: auto auto;

text-align: center;

font-weight:500;

}



.einzelseite.typ2 #headerbild{

margin-top:17vw;

}



.einzelseite.typ2 .bannertext h1{

font-size: 1em;

font-weight: lighter;
color: var(--grau);
padding: 0px;
margin: 0px 0px 0px 0px;
font-family: NixieOne;
}



.einzelseite.typ2 .gesamttitel{

margin: 4vw auto;

}





.einzelseite.typ2 .trennlinie{

width: 60%;

margin: -11vw auto 13vw auto;

height: 0.4vw;

background-color: rgba(210,4,17,1);

border: none;

}



.einzelseite.typ1 #headerbildbox, .einzelseite.typ4 #headerbildbox {

width: 25vw;

height: 25vw;

margin: 17vw 0px 0px 4vw;

background-color: rgba(224,197,110,1);

border-radius: 50%;

}



.einzelseite.typ1 .headerbildbild, .einzelseite.typ4 .headerbildbild {

width: 80%;

position: absolute;

left: 10%;

top: 10%;

}



.einzelseite.typ1 .titellink, #seitentitel h1, .einzelseite.typ4 .titellink {

font-size: 8vw;

font-weight: normal;

position: relative;

margin-top: -23vw;

text-align: center;

width: 60vw;

margin-left: 34vw;

}



.einzelseite.typ1 .hauptbildbanner.bannertext, .einzelseite.typ4 .hauptbildbanner.bannertext{

margin:15vw 0px 0px 0px;



}



.einzelseite.typ1 .trennlinie, .einzelseite.typ4 .trennlinie {

width: 40%;

margin: 6vw auto 4vw auto;

height: 0.4vw;

background-color: rgba(210,4,17,1);

border: none;

}

.einzelseite.typ3 #welcheseite {

position: fixed;
top: calc(80vh / (4 + 1));width: 100%;
background-color: rgba(255,255,255,1);
text-align:center
}

.einzelseite.typ3 #zurueckicon {
height: 8vw;
position:absolute;
left:4vw;
top:2vw;
}

.einzelseite.typ3 #pfiliblausvg {
height: 100%;
}

.einzelseite.typ3 .toptitellink{

}

.einzelseite.typ3 .toptitellink a{
font-size: 1.3em;
color: rgb(189, 0, 75);
font-weight: normal;
} 

.einzelseite.typ3 .gesamttitel{
position:fixed;
top: calc((80vh / (4 + 1)) + 4vw);text-align: center;
width: 100%;
background-color: rgba(255,255,255,1);
z-index:1000;
} 

.einzelseite.typ3 .titellink, #seitentitel h1 {
font-size: 1em;
font-weight: normal;
position: relative;
top: 0vw;
text-align: center;
color: rgba(189, 0, 75,1);
margin-bottom: 0px;
}

.einzelseite.typ3 #headerbild {
height: 46vw;
width: 46vw;
left: 27vw;
margin-top: calc((80vh / (4 + 1)) + (21vw / var(--verhaeltniszahl)) + 8vw);position: relative;
border-radius: 50%;
overflow: hidden;
}

.einzelseite.typ3 #headerbildbox{
position: absolute;
width: 100%;
height: 100%;
}

.einzelseite.typ3 .wurmcontainer, .einzelseite.typ3 #headerbildbanner{
display:none;
}

.einzelseite.typ3 .bannertext{
margin-top:calc(8vw / var(--verhaeltniszahl));
}

.einzelseite.typ3 .bannertext h1, .einzelseite.typ3 .bannertext h1 a{
font-size: 1.2em;
color: rgba(0, 70, 220, 1);
}

.einzelseite.typ3 .textbox{
margin:2vh auto 6vh auto;
}

.einzelseite.typ3 .textboxinhalt{
font-size: 1em;
width:80vw;
margin:0px auto;
padding:0px !important;
position:relative;
}

.einzelseite.typ3 .textboxinhalt::before{
content: "“";
margin: 0px;
padding: 0px;
position: absolute;
top: -3vw;
left: -6vw;
font-size: 16vw;
color: rgba(0, 70, 220, 1);
}

.einzelseite.typ3 .textboxinhalt p:last-child::after{
content:"”";
margin:1vw;
position: absolute;
font-size: 16vw;
color:rgba(0, 70, 220, 1);
}



#kontaktbody{

margin: 0px 0px 0px 4vw

}

.preistabelle{
width:100%;
}

.preistabelle td:nth-of-type(2n) {
width: 30vw;
text-align: right;
vertical-align: bottom;
}




.blase{
display: flex;
width: 15vw;
height: 15vw;
background-color: rgba(87,180,255,1);
justify-content: space-evenly;
align-items: center;
border-radius: 100%;
position: absolute;
left: 55vw;
z-index: 2;
top: 0px;
transform: scale(0,0);
transform-origin:bottom left;
}

.blase::before{
content: "";
display: block;
position: absolute;
top: 10.5vw;
left: -1.5vw;
border-left: 7.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 4.5vw solid rgba(87,180,255,1);
width: 0vw;
height: 0vw;
transform: rotate(300deg);
z-index: -1;
}
	
	
	.kugeli{
	display: block;
width: 2.4vw;
height: 2.4vw;
background-color: rgba(255,255,255,1);
border-radius: 50%;
	}
	
	.kugeli1 {
margin-left: 1.5vw;
}

.kugeli3 {
margin-right: 1.5vw;
}

.iphoneperonanimation{

}

.iphoneperonanimation .blase{
transform:scale(1,1);
transition:transform;
transition-duration: 0.5s;
}

.iphoneperonanimation .kugeli{
background-color: transparent;
}

.iphoneperonanimation .kugeli1{
animation-name: kugeli1marsch;
animation-duration: 2s;
animation-iteration-count: infinite;
}

.iphoneperonanimation .kugeli2{
animation-name: kugeli2marsch;
animation-duration: 2s;
animation-iteration-count: infinite;
}

.iphoneperonanimation .kugeli3{
animation-name: kugeli3marsch;
animation-duration: 2s;
animation-iteration-count: infinite;
}

@keyframes kugeli1marsch {
  0%  {background-color: transparent;}
  20% {background-color: transparent;}
  21% {background-color:rgba(255,255,255,1);}
  89% {background-color:rgba(255,255,255,1);}
  90% {background-color: transparent;}
}

@keyframes kugeli2marsch {
  0%  {background-color: transparent;}
  40% {background-color: transparent;}
  41% {background-color:rgba(255,255,255,1);}
  89% {background-color:rgba(255,255,255,1);}
  90% {background-color: transparent;}
}

@keyframes kugeli3marsch {
  0%  {background-color: transparent;}
  60% {background-color: transparent;}
  61% {background-color:rgba(255,255,255,1);}
  89% {background-color:rgba(255,255,255,1);}
  90% {background-color: transparent;}
}

@keyframes blasenatem {
  0%  {height: 5vw;}
  
  50% {height: 15vw;}
  100% {height: 18vw;}
}






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



@media only screen and (orientation : landscape){ 
body{
background-color:black;
font-size: 6vh;
}

#iphonebox{
background-color:white;
}

#textboxfooterein{
font-size:3vh;
}


#menukasten {
height: calc(100vw - (33 * var(--hoehequer)));
width: 30vw;
background-color: rgba(87,180,255,1);
/* position: relative; */
margin-left: 30vw;
margin-top: calc(-20 * var(--hoehequer));
}



#menu {
position: fixed;
transform: scale(0, 1);
-webkit-user-select: none;
top: calc(20 * var(--hoehequer));
transform-origin-x: left;
transform-origin-y: center;
z-index: 12;
width: 100vw;
background-color: rgb(255, 255, 255);
}



.navicontainer1 .hauptitem{


position:absolute;


top:calc(((80 * var(--hoehequer)) / (4 - 1)) * 0);
}


.navicontainer2 .hauptitem{


position:absolute;


top:calc(((80 * var(--hoehequer)) / (4 - 1)) * 1);
}


.navicontainer3 .hauptitem{


position:absolute;


top:calc(((80 * var(--hoehequer)) / (4 - 1)) * 2);
}


.navicontainer4 .hauptitem{


position:absolute;


top:calc(((80 * var(--hoehequer)) / (4 - 1)) * 3);
}

.navicontainers {

width: 30vw;height: calc(100 * var(--hoehequer));position: absolute;
word-wrap: break-word;
overflow-wrap: break-word;

}

.navibezeichnung{
margin-top: calc((58 * var(--hoehequer)) / ((4) * -1));margin-left: 0px;
padding-left: 3vw;
padding-bottom:calc(4 * var(--hoehequer));
}

.hauptitem a{

position: absolute;
top: 2vh;
left: -6vh;
width: 30vw;font-size:3vw;
}

.hauptitem{
border-top:initial;
}

.icon {
width:calc((50 * var(--hoehequer)) / (4));height:calc((50 * var(--hoehequer)) / (4));padding: calc(1.5 * var(--hoehequer));
border: solid calc(0.5 * var(--hoehequer)) rgba(0,0,255,1);

}

.aktiv .icon, .untericon.aktiv {
border: solid 0.3vh rgba(87,180,255,1);
}

.aktiv .naviname::before {
content: "";
width: calc(2 * var(--hoehequer));
height: calc(2 * var(--hoehequer));
background-color: rgba(191,48,64,1);
border-radius: 50%;
display: block;
float: left;
margin-top: 0.5em;
margin-right: 0.2em;
}

#header {
position: fixed;
height: 41vh;
width: 100vw;
top: 0px;
z-index: 10;
background-image: url('../kleinbilder/wellenquer_smart.svg');
background-size: 100%;
background-repeat: no-repeat;
background-position: 0px -4vh;
min-height: initial;
}

#logo{
position: absolute;
height: calc(20 * var(--hoehequer));
width: calc(20 * var(--hoehequer));
left: 2vh;
top: calc(2 * var(--hoehequer));
}

#hamburger {
position: absolute;
top: calc(2 * var(--hoehequer));
left: 88.1%;
width: calc(15 * var(--hoehequer));height: calc(15 * var(--hoehequer));}

#ganzheit {
display: block;
position: absolute;
color: rgba(255,255,255,1);
font-family: Roboto;
width: 80vw;
font-size: 7vh;
top: calc(-7 * var(--hoehequer));
left: 18vw;
transform: scale(1,1.1);
font-weight: lighter;
}

#abdeckschwarz {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
height: 4vw;
background-color: rgba(0,0,0,1);
}

.obergerotiert{
	-webkit-transform:rotate(45deg) translate(5vw,3.5vw) scale(1.5,1);
	-moz-transform:rotate(45deg) translate(5vw,3.5vw) scale(1.5,1);
	-ms-transform:rotate(45deg) translate(5vw,3.5vw) scale(1.5,1);
	-O-transform:rotate(45deg) translate(5vw,3.5vw) scale(1.5,1);
	transform:rotate(45deg) translateY(calc(9 * var(--hoehequer))) scale(1.2,1);
	}
	
.untergerotiert{
	-webkit-transform:rotate(-45deg) translate(5vw,-3.5vw) scale(1.5,1);
	-moz-transform:rotate(-45deg) translate(5vw,-3.5vw) scale(1.5,1);
	-ms-transform:rotate(-45deg) translate(5vw,-3.5vw) scale(1.5,1);
	-O-transform:rotate(-45deg) translate(5vw,-3.5vw) scale(1.5,1);
	transform:rotate(-45deg) translateY(calc(-9 * var(--hoehequer))) scale(1.2,1);
	}
	
.servicenaviblock {
width: 20%;
left: 87%;
position: relative;
top: 18vh;
}

.serviceicon {
border-radius: 50%;
width: 16vh;
height: 16vh;
display: flex;
border: 0px none;
}
	
.pluszeichen {
position: absolute;
top: calc(7.5 * var(--hoehequer));
left: 120%;
font-weight: bold;
}

.popups {
background-color: rgba(241, 236, 229, 0.15);
position: fixed;
left: 28vw;
transform-origin: left;
width: 35vw;
top: calc(20 * var(--hoehequer));
}

.einzelseite.typ3 #zurueckicon {
height: calc(10 * var(--hoehequer));
position: absolute;
left: 4vw;
top: 2vw;
}

.unternaviitem {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
background-color: rgba(255,255,255,1);
padding: 0vw 0px 1vw 1vw;
/* left: calc(((80vh / (5 + 1)) * 0.33 * var(--verhaeltniszahl))); */
width: 35vw;
max-height: calc((100 * var(--hoehequer) / 7));
margin-left: -4vw;
}

.untericon {
width: calc(9 * var(--hoehequer));
height: calc(9 * var(--hoehequer));
z-index: 10;
border: solid 1px rgba(0,0,255,1);
border-radius: 50%;
padding: calc(1 * var(--hoehequer));
flex: none;
/* display: none; */
margin-left: 2vw;
}

/*a.offen.popup {
display: block;
height: calc(10 * var(--hoehequer));
padding: 0px;
width: 20vw;
}*/

.unternaviitem a {
font-size: 3vw;
font-weight: lighter;
color: rgba(0,0,255,1);
margin-top: calc(-11 * var(--hoehequer));
margin-left: calc(20 * var(--hoehequer));
/* display: flex; */
text-align: left;
z-index: 1000000;
width: 120%;
border-bottom:solid rgba(87,180,255,1) 1px;
}

.navitrenn{
display:none;
}

.navibezeichnung {
color: rgba(5,40,230,1);
padding: 0px 0px 3vw 0vw;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
border-bottom: solid rgba(87,180,255,1) 1px;
margin-top: calc(45vh / ((5 + 1) * -1));
margin-left: calc(((80vh / (5 + 1)) - 4vw));
font-weight: lighter;
height: calc((80 * var(--hoehequer)) / (4 * 3));}

.unternaviitem.stelle1 {
margin-top: 0px;
}

#oberbildcontainer {
position: absolute;
width: 100%;
height: 100%;
display: flex;
left: 0px;
justify-content: center;
top: 0px;
}



#oberabstandbild {
width: 100vw;
height: 40vh;
}

#symbolbild {
width: 100%;
transform: rotateY(180deg) rotateZ(180deg);
position: relative;
top: 15vh;
left: 0px;
}

.headerrelativ {
position: relative;
top: 0vw;
margin-bottom: calc(13vh * (var(--verhaeltniszahl)));
}

.hauptseite {
clear: both;
min-height: calc(100vh - 30vw);
margin-top: calc(-4vh * var(--verhaeltniszahl));
padding-top: calc(10vh * (var(--verhaeltniszahl)));
}

.titellink, #seitentitel h1 {
font-size: 6vh;
}

.bannertext h1, .bannertext h1 a {
font-size: 10vh;
}

.wuermli {
stroke-width: 0.3vh;
}

.textboxinhalt {
width: 100%;
font-size: 1em;
margin-left: initial;
margin-right: initial;
margin: auto;
margin-top: calc((-4vh * var(--verhaeltniszahl)) + 1vh);
}

.textboxinhalt p, .textboxinhalt a, .textboxinhalt li, .textboxinhalt h3, .textboxinhalt h4, .textboxinhalt h5, .textboxinhalt div, .textboxinhalt{
font-size: 1em !important;
}

.textboxinhalt h1{
font-size:1.5em !important;
}

.textboxinhalt h2{
font-size:1.2em !important;
}

.textboxtext .bildlegende {
text-align: left;
font-size: 0.8em;
margin: -6vh 0px -0.5vh 0px;
font-style: italic;
color: var(--grauschrift);
}

.hauptbildbox {
width: 100vw;
overflow: hidden;
height: 70vh;
}

.paralax .hauptbildbild {
width: 200%;
position: relative;
left: -50%;
top: 10vh;
max-width: inherit;
}

.widget.typ3 .widgetbildkasten {
width: 65vh;
height: 65vh;
margin: 15vh auto 4vh auto;
}

.teiltext{
font-size:5vh;
}

.widget.typ3 .rahmeninschrift .rahmentitel {
font-size: 8vh;
margin-bottom:2.5vh;
}

.kontaktbutton{
font: normal 8vh "Roboto";
}


#servicenavitupf {
top: 70vh;
position: fixed;
width: 12vh;
height: 12vh;
left: 88.5%;
}





.einzelseite.typ3 .titellink, #seitentitel h1{
font-size: 6vh;
}

.einzelseite.typ3 #welcheseite {
position: fixed;
top: calc(20 * var(--hoehequer));
width: 100%;
background-color: rgba(255,255,255,1);
text-align: center;
}

.boxanzeigen #adressedeutschtext {
left: 2vw;
width: 84vw;
font-size: 3vw;
color: rgba(255,255,255,1);
border: 1px solid black;
padding: 1vw;
position: absolute;
top: 0px;
display: block;
}

.boxanzeigen #adressedeutschtext h2{
font-size:1em;
}

.boxanzeigen#adresse {
width: 96vw;
height: calc(75 * var(--hoehequer));
max-height:26vw;
position: fixed;
top: calc(20 * var(--hoehequer));
background-color: rgba(0,0,0,0.8);
}

.boxanzeigen #adressefootericon {
visibility:hidden;
}

.boxanzeigen .adresstext.fett {
display:none;
}
.copy {
font-size: 3vw;
font-weight: normal;
}

}