@font-face { 
font-family: 'OpenSans'; 
src: url('schrift/OpenSans-Regular.eot'); /* IE9 Compat Modes */ 
src: url('schrift/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
url('schrift/OpenSans-Regular.woff2') format('woff2'), /* Super Modern Browsers */ 
url('schrift/OpenSans-Regular.woff') format('woff'), /* Pretty Modern Browsers */ 
url('schrift/OpenSans-Regular.ttf') format('truetype'); /* Safari, Android, iOS */ 
} 

@font-face { 
font-family: 'OpenSans'; 
src: url('schrift/OpenSans-Bold.eot'); /* IE9 Compat Modes */ 
src: url('schrift/OpenSans-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
url('schrift/OpenSans-Bold.woff2') format('woff2'), /* Super Modern Browsers */ 
url('schrift/OpenSans-Bold.woff') format('woff'), /* Pretty Modern Browsers */ 
url('schrift/OpenSans-Bold.ttf') format('truetype'); /* Safari, Android, iOS */ 
font-weight: bold; 
} 

@font-face { 
font-family: "Roboto"; 
src: url("schrift/Roboto-Regular.eot"); /*IE9 Compat Modes */ 
src: url("schrift/Roboto-Regular.eot?#iefix") format("embedded-opentype"), /*IE6-IE8 */ 
url("schrift/Roboto-Regular.woff") format("woff"), /* Modern Browsers */ 
url("schrift/Roboto-Regular.woff2") format("woff2"), /* Modern Browsers */ 
url("schrift/Roboto-Regular.ttf") format('truetype'); /* Open Type Font */ 
font-weight: normal; 
font-style: normal; 
} 

@font-face { 
font-family: "Roboto-RegularItalic"; 
src: url("schrift/Roboto-RegularItalic.eot"); /* IE9 Compat Modes */ 
src: url("schrift/Roboto-RegularItalic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ 
url("schrift/Roboto-RegularItalic.ttf") format("truetype"), /* Safari, Android, iOS */ 
url("schrift/Roboto-RegularItalic.woff") format("woff"), /* Modern Browsers */ 
url("schrift/Roboto-RegularItalic.woff2") format("woff2"); /* Modern Browsers */ 
} 

@font-face { 
font-family: "Roboto-Light"; 
src: url("schrift/Roboto-Light.eot"); /* IE9 Compat Modes */ 
src: url("schrift/Roboto-Light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ 
url("schrift/Roboto-Light.ttf") format("truetype"), /* Safari, Android, iOS */ 
url("schrift/Roboto-Light.woff") format("woff"), /* Modern Browsers */ 
url("schrift/Roboto-Light.woff2") format("woff2"); /* Modern Browsers */ 
} 

@font-face { 
font-family: "Roboto-ThinItalic"; 
src: url("schrift/Roboto-ThinItalic.eot"); /* IE9 Compat Modes */ 
src: url("schrift/Roboto-ThinItalic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ 
url("schrift/Roboto-ThinItalic.ttf") format("truetype"), /* Safari, Android, iOS */ 
url("schrift/Roboto-ThinItalic.woff") format("woff"), /* Modern Browsers */ 
url("schrift/Roboto-ThinItalic.woff2") format("woff2"); /* Modern Browsers */ 
} 

@font-face { 
font-family: "Roboto-Medium"; 
src: url("schrift/Roboto-Medium.eot"); /* IE9 Compat Modes */ 
src: url("schrift/Roboto-Medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ 
url("schrift/Roboto-Medium.ttf") format("truetype"), /* Safari, Android, iOS */ 
url("schrift/Roboto-Medium.woff") format("woff"), /* Modern Browsers */ 
url("schrift/Roboto-Medium.woff2") format("woff2"); /* Modern Browsers */; 
} 

@font-face { 
font-family: "Roboto-Bold"; 
src: url("schrift/Roboto-Bold.eot"); /* IE9 Compat Modes */ 
src: url("schrift/Roboto-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ 
url("schrift/Roboto-Bold.ttf") format("truetype"), /* Safari, Android, iOS */ 
url("schrift/Roboto-Bold.woff") format("woff"), /* Modern Browsers */ 
url("schrift/Roboto-Bold.woff2") format("woff2"); /* Modern Browsers */ 
font-style: normal; 
} 

@font-face { 
font-family: "Montserrat"; 
src: url("schrift/Montserrat-Regular.eot"); /* IE9 Compat Modes */ 
src: url("schrift/Montserrat-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ 
url("schrift/Montserrat-Regular.ttf") format("truetype"), /* Safari, Android, iOS */ 
url("schrift/Montserrat-Regular.woff") format("woff"), /* Modern Browsers */ 
url("schrift/Montserrat-Regular.woff2") format("woff2"); /* Modern Browsers */ 
font-weight: normal; 
} 

@font-face { 
font-family: "Montserrat"; 
src: url("schrift/Montserrat-ThinItalic.eot"); /* IE9 Compat Modes */ 
src: url("schrift/Montserrat-ThinItalic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ 
url("schrift/Montserrat-ThinItalic.ttf") format("truetype"), /* Safari, Android, iOS */ 
url("schrift/Montserrat-ThinItalic.woff") format("woff"), /* Modern Browsers */ 
url("schrift/Montserrat-ThinItalic.woff2") format("woff2"); /* Modern Browsers */ 
font-weight: lighter; 
font-style: italic; 
} 

@font-face { 
font-family: "Montserrat"; 
src: url("schrift/Montserrat-Medium.eot"); /* IE9 Compat Modes */ 
src: url("schrift/Montserrat-Medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ 
url("schrift/Montserrat-Medium.ttf") format("truetype"), /* Safari, Android, iOS */ 
url("schrift/Montserrat-Medium.woff") format("woff"), /* Modern Browsers */ 
url("schrift/Montserrat-Medium.woff2") format("woff2"); /* Modern Browsers */ 
font-weight: 600; 
font-style: normal; 
} 

@font-face { 
font-family: "Montserrat"; 
src: url("schrift/Montserrat-Bold.eot"); /* IE9 Compat Modes */ 
src: url("schrift/Montserrat-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ 
url("schrift/Montserrat-Bold.ttf") format("truetype"), /* Safari, Android, iOS */ 
url("schrift/Montserrat-Bold.woff") format("woff"), /* Modern Browsers */ 
url("schrift/Montserrat-Bold.woff2") format("woff2"); /* Modern Browsers */ 
font-weight: bold; 
font-style: normal; 
} 



#bewertungsmainbox{ 
flex-wrap: wrap; 
margin: 28px auto 56px auto; 

} 

.hauptwidgetblock{ 
flex-wrap: wrap; 
margin: 28px 56px 56px 56px; 
} 

.bewertungsboxtitel, .hauptwidgetblocktitel { 
position: relative; 
width: 100%; 
flex-shrink: 0; 
} 

.bewertungswidget { 
padding: 28px 28px 28px 28px; 
border: 0.14px solid var(--blau1); 
display: flex; 
flex-direction: column; 
align-items: center; 
} 

.bewerterinfos { 
display: flex; 
font-size: 0.8em; 
padding: 14px 0px; 
} 

.bewertungstitel { 
font-family: Roboto-Medium; 
} 

.bewertungstext { 
margin-bottom: 42px; 
font-family: Roboto-Light; 
} 

.firmenkasten{ 
display: flex; 
align-items: center; 
align-self: flex-start; 
} 

.firmenlogo { 
width: 42px; 
height:42px; 
display: block; 
border: 0.14px solid var(--blau1); 
margin-right:14px; 
} 

.firmenlogo img { 
width: 100%; 
} 

.ratingkasten { 
display: flex; 
align-items: center; 
margin: 14px 0px 0px 0px; 
position: relative; 
} 

.sterne { 
display: block; 
width: 100%; 
position: relative; 
} 

.sternenbar { 
display: block; 
width: 66%; 
height: 75%; 
background-color: rgba(219,14,33,1); 
transform-origin: left; 
top: 5%; 
position: absolute; 
} 

.sternebild { 
position: relative; 
top: 0px; 
left: -4%; 
width: 74%; 
} 

.notenschnitt { 
display: flex; 
padding: 7px 7px 4.2px 7px; 
color: rgba(255,255,255,1); 
background-color: rgba(48, 137, 201, 1); 
} 

:root { 
--maxbildhoehe:inherit; 
--stickystop:calc(322px - 100vh); 
--kontakthoch:1680px; 
--kontaktformhoch:1680px; 
--blau1:rgba(48,137,201,1); 
--blau180:rgba(48,137,201,0.8); 
--blau160:rgba(48,137,201,0.6); 
--blau140:rgba(48,137,201,0.4); 
--blau120:rgba(48,137,201,0.2); 
--blau110:rgba(48,137,201,0.1); 
--textboxen:rgba(208,232,254,0.5); 
--schiebebalken:rgba(140,196,232,1); 
--textschwarz:rgba(24,46,59,1); 
--titelschwarz:rgba(42,60,72,1); 
--rotgut:rgba(219,14,33,1); 
} 

/*Logofarben*/ 

.logoblau{ 
fill:#3089c9; 
} 

.logorot{ 
fill:#db0e21; 
} 

.logostrich{ 
fill:#fff; 
stroke:#fff; 
stroke-miterlimit:10; 
stroke-width:0.7px; 
} 

.logoweiss{ 
fill:#fff; 
} 

svg{ 
width:100%; 
} 

.iconrot 
{ 
fill:rgba(219,14,33,1); 
} 


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

body{ 
font-size:19.6px; 
} 

a{ 
text-decoration:none; 
color: rgba(77,77,77,1); 
} 

select, input, textarea{ 
-webkit-border-radius:0px; 
-webkit-appearance: none; 
-moz-appearance: none; 
appearance: none; 
width: 80%; 
border: none 0px; 
border: 1px solid rgba(96,96,96,0.7); 
height: 1.2em; 
font-size: 1em; 
padding:0.1em 0.1em 0.4em 0.4em; 
display:block; 
border-radius: 0.4em; 
} 



#logintable{ 
display: none; 
} 

.fuerbots{ 
display:none; 
} 

.sprachen{ 

} 

#welcheseite{ 
display:none; 
} 

.versteckt{ 
display:none; 
} 

.unsichtbar{ 
display:none; 
} 

.clearbox { 
clear: both; 
width: 100%; 
} 

.nuemmerli{ 
display: -ms-flexbox; 
width: 36.4px; 
height: 36.4px; 
padding-top: 0w; 
background-color: rgba(48, 137, 201, 1); 
display: flex; 
justify-content: space-arrond; 
align-items: center; 
color: rgba(255,255,255,1); 
border-radius: 50%; 
font-size: 25.2px; 
margin-right:14px; 
flex-shrink: 0; 
} 




.linie { 
margin-left: calc(21px + 1px); 
border-left: 2px solid #2b65d9; 
height:80%; 
} 


.letzterdavon .linie{ 
border:none 0px #fff;; 
} 

.anpreisungsheader h1{ 
font-size: 25.2px; 
color: var(--textschwarz) !important; 
font-family: Roboto-medium !important; 
margin-top: 42px; 
} 

.anpreisungsheader h2{ 
margin-top: 56px; 
color:var(--blau1) !important; 
} 

.anpreisungsbox p { 
line-height: 42px; 
font-family: Roboto-light !important; 
} 

.anpreisungsheader { 
margin-bottom: 42px; 
} 

.teilschrittgrafik { 
padding-left: 4%; 
padding-right: 4%; 
min-width: 70px; 
} 

.teilschrittbeschriftig { 
max-width: 75%; 
display: block; 
margin-top: -1em; 
} 

.teilschrittbeschriftig p { 
margin: 42px 0px; 
} 

.teilschrittbeschriftig h2 { 
font-size: 25.2px; 
color: var(--textschwarz); 
font-family: Roboto-bold !important; 
} 

.einfachmachbox{ 
display: flex; 
margin-left: 56px; 
min-height:420px; 
justify-content: space-between; 
} 

.teilschritt{ 
display: -ms-flexbox; 
display: flex; 
align-content: space-between; 
} 

.schritte{ 
margin-top: 112px; 
width: 60%; 
} 

.anpreisung{ 
width:40%; 

} 

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button { 
-webkit-appearance: none; 
margin: 0; 
} 

/* Firefox */ 
input[type=number] { 
-moz-appearance: textfield; 
} 


select, input, textarea{ 
-webkit-appearance: none; 
-moz-appearance: none; 
appearance: none; 
border: none 0px; 
height: 1.2em; 
font-size: 1em; 
border-radius:0px; 
width: 80%; 
padding:0.5em 0.1em 0.4em 0.4em; 
display:block; 
} 


input[type='checkbox'].normal{ 
-webkit-appearance: checkbox; 
-moz-appearance: checkbox; 
appearance: checkbox; 
border: initial; 
height: initial; 
font-size: initial; 
border-radius:initial; 
width: initial; 
padding:initial; 
display:initial; 
} 



.checkbox { 
display: none; 
} 

.custom-checkbox { 
display: flex; 
align-items: baseline; 
justify-content: space-between; 
width: 100%; 
} 

.custom-checkbox-decker { 
display:block; 
height:28px; 
width:28px; 
border:solid 1px var(--blau1); 
} 

.custom-checkbox-decker::before{ 
content:" "; 
width:28px; 
height:28px; 
display:block; 
position:relative; 
background-color: rgba(255,255,255,1); 
} 

.custom-checkbox-decker::after{ 
content:" "; 
width:42px; 
height:42px; 
display:block; 
position:relative; 
top:-42px; 
} 



.checkbox:checked ~ .custom-checkbox-decker::before { 
background-color: var(--blau1); 
} 

.checkbox:checked ~ .custom-checkbox-decker::after { 
background-image: url('../kleinbilder/icon_gut_check.png'); 
background-size:100%; 
background-repeat:no-repeat; 
} 



.radiobox { 
display: none; 
} 

.custom-radiobox { 
display: flex; 
align-items: center; 
justify-content: space-between; 
width: 35%; 
} 

.custom-radiobox-decker { 
display:block; 
height:28px; 
width:28px; 
border:solid 1px var(--blau1); 
} 

.custom-radiobox-decker::before{ 
content:" "; 
width:28px; 
height:28px; 
display:block; 
position:relative; 
background-color: rgba(255,255,255,1); 
} 

.custom-radiobox-decker::after{ 
content:" "; 
width:42px; 
height:42px; 
display:block; 
position:relative; 
top:-42px; 
} 



.radiobox:checked ~ .custom-radiobox-decker::before { 
background-color: var(--blau1); 
} 

.radiobox:checked ~ .custom-radiobox-decker::after { 
background-image: url('../kleinbilder/icon_gut_check.png'); 
background-size:100%; 
background-repeat:no-repeat; 
} 


select { 
margin-right: 28px; 
background-image: url('../kleinbilder/icon_pfeilrund_unten.png'); 
background-repeat: no-repeat; 
background-position: 95% center; 
background-size: 2%; 
background-color: rgba(255,255,255,1); 
} 

select::-ms-expand{ 
display:none; 
} 

button { 
color: rgba(255,255,255,1); 
background: none; 
background-color: var(--blau1); 
background-image: url('../kleinbilder/icon_pfeilrund_rechts.png'); 
background-repeat: no-repeat; 
background-position: 90% center; 
background-size: 12%; 
padding-left: 14px; 
display: flex; 
align-items:center; 
align-content:center; 
position: relative; 
cursor: pointer; 
width: 168px; 
font-size: 25.2px; 
height: 30.8px; 
border-radius: 0px; 
border: none 0px; 
text-align: left; 
border: none 0px; 
font-family: Roboto, sans-serif; 
font-weight:600; 
box-shadow: none; 
margin-top: 28px; 
margin-bottom: -14px; 
} 

.bestellbody { 
padding-top: 112px; 
margin: -84px 0px 0px 56px; 
width: 50%; 
} 

#bestellbody.step1{ 
padding-top: initial; 
margin-top: initial; 
} 

.inputvortext { 
display: block; 
} 

input.error:placeholder-shown, input.error::placeholder, .error{ 

} 

.formularinputs .error{ 
border:solid 1px rgba(219,14,33,1); 
} 

.formularinputs label.error{ 
border:none 0px; 
} 

.formularfelder { 
display: flex; 
flex-direction: column; 
background-color: rgba(193,226,242,1); 
position: relative; 
padding: 0px 0px 56px 56px; 
border-radius: 28px; 
} 





ul.gutzeichenliste{ 
list-style-type: none; 
} 

.gutzeichenitem::before{ 
content:""; 
display:inline-block; 
width:1.5em; 
height:1.5em; 
background-image:url('../kleinbilder/icon_gutpunkt.png'); 
background-repeat: no-repeat; 
background-position: center; 
background-size:100%; 
margin-right: 0.5em; 
} 

.fortschrittsbar{ 
width:100%; 
display:inline-flex; 
} 

.anzeigefenster{ 
display:flex; 
min-width:56px; 
min-height:14px; 
flex-direction:column; 
} 

.monatswahl div, .jahreswahl div{ 
display:flex; 
justify-content: space-between; 

} 

.waagrechtfeld{ 
display:flex; 
justify-content: space-between; 
} 

.unsichtbar{ 
display:none; 
} 

.sichtbar{ 
display:block; 
} 

.pickerfeld { 
width: 252px; 
background-color: rgba(255,255,255,1); 
margin-bottom:14px; 
color:rgba(255,255,255,1); 
} 

.woche { 
justify-items: stretch; 
} 

.tagfeld { 
display: inline-flex; 
width: calc(100% / 7); 
justify-content: center; 
border: 1px solid; 
cursor:pointer; 
background-color: var(--blau1); 
width: 30%; 
margin:1.4px 1.4px; 

} 

.minusfeld, .plusfeld{ 
cursor:pointer; 
background-color: var(--blau1); 
width: 30%; 
margin:1.4px 1.4px; 
background-image: url('../kleinbilder/icon_pfeilrund_rechts.png'); 
background-repeat: no-repeat; 
background-position: 90% center; 
background-size: 12%; 
} 

.minusfeld{ 
transform:rotate(180deg); 
} 

.wochenende, .heute, .vorheute{ 
background-color: rgba(193,226,242,1); 
} 

.vorheute{ 
color:rgba(200,200,200,1); 
} 



.jahreswert, .monatswert{ 
background-color: var(--blau1); 
margin:1.4px 1.4px; 
flex-grow: 1; 
text-align:center; 

} 

.wertpicker{ 
color:rgba(255,255,255,1); 
padding: 5.6px 2.8px 0px 2.8px; 
} 

.inputcontainer { 
display: flex; 
align-items:center; 
margin-top:14px; 
} 

.selecttrigger{ 
display: block; 
width: 42px; 
height: 2.1em; 
background-image: url('../kleinbilder/icon_pfeilrund_unten.png'); 
background-repeat: no-repeat; 
background-position: center; 
background-size: 50%; 
background-color: rgba(255,255,255,1); 
} 

.triggerkasten { 
max-height: 224px; 
overflow-y: scroll; 
-webkit-oveflow-scrolling: touch; 
width: 80%; 
margin-top:8.4px; 
} 

.triggefeld { 
background-color: rgba(255,255,255,1); 
width: 100%; 
border-bottom: 8.4px solid rgba(193,226,242,1); 

height: 42px; 
display: inline-flex; 
align-items: center; 
padding-left: 14px; 
} 

.triggefeld:focus{ 
background-color:var(--blau1); 
color:rgba(255,255,255,1); 
} 


#tabellenzeilenzahl{ 
border: solid 0.28px; 
border-color: var(--blau1); 
border-radius: 28px; 
width: 224px; 
margin: 28px auto 0px auto; 
} 

#tabellenzeilenanzahl{ 
width:154px; 
margin:0px auto; 
background-size:10%; 

} 

.unsehbar{ 
visibility:hidden; 
} 

.zuwenig{ 
color:var(--rotgut) !important; 
} 

.schaltpfeil{ 
display:block; 
width:28px; 
height:28px; 
background-repeat:no-repeat; 
background-size:60%; 
background-position:50% center; 
} 

.seitenschaltungsfeld{ 
display:flex; 
width:210px; 
margin:0px auto; 
justify-content:space-arround; 
align-items:center; 
} 

.seitenschaltungsfeld.linksraum{ 
justify-content: flex-end; 
} 

.seitenschaltungsfeld.rechtsraum{ 
justify-content: flex-start; 
} 

.seitenschaltungsfeld select{ 
width:70px; 
height:28px; 
flex-shrink:0; 
background-size: 25%; 
margin-right:initial; 
} 

#schaltpfeillrechts{ 
background-image: url('../kleinbilder/icon_pfeilrund_unten.png'); 
margin-left:42px; 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
-ms-transform: rotate(-90deg); 
-o-transform: rotate(-90deg); 
transform: rotate(-90deg); 

} 

#schaltpfeillinks{ 
background-image: url('../kleinbilder/icon_pfeilrund_unten.png'); 
margin-right:42px; 
-webkit-transform: rotate(90deg); 
-moz-transform: rotate(90deg); 
-ms-transform: rotate(90deg); 
-o-transform: rotate(90deg); 
transform: rotate(90deg); 

} 

.nullobjekt{ 
margin-right:70px; 
width:70px; 
text-align:center; 
} 


.keineauswahl { 
-webkit-touch-callout: none; /* iOS Safari */ 
-webkit-user-select: none; /* Safari */ 
-khtml-user-select: none; /* Konqueror HTML */ 
-moz-user-select: none; /* Old versions of Firefox */ 
-ms-user-select: none; /* Internet Explorer/Edge */ 
user-select: none; /* Non-prefixed version, currently 
supported by Chrome, Edge, Opera and Firefox */ 
} 

.besondersgross { 
transform: scale(0.45); 
} 

.sliderproperties{ 
display:flex; 
position: relative; 
width:100%; 
} 

.sliderproperties > div{ 
height: 7px; 
width:100%); 
position:relative; 
} 

.slider{ 
border:solid 1px; 
width:2% !important; 
height:14px !important; 
margin-top:-3.5px; 
flex-grow:0; 
flex-shrink:0; 
background-color:var(--blau1); 
} 

.wertanzeiger{ 
position:absolute !important; 
border:none 0px !important; 
height: initial !important; 
width:initial !important; 
top:14px; 
left:0px; 
} 

.vorslider{ 
background-color:var(--blau160); 
} 

.alarm{ 
color:var(--rotgut); 
} 

.nachslider{ 
background-color:var(--blau110); 
} 

.flexibleselement{ 
position:absolute; 
top:-200%; 
left:48%; 
height:500%; 
width:3%; 
border:solid 1px; 
background-color: rgba(217, 237, 244, 1); 

} 


.laufschiene{ 
display:block; 
margin-top:0px; 
left:0px; 
border:solid 1px var(--blau180); 
height:7px; 
width:100%; 
position:relative; 
z-index:1; 
background-image:url('../kleinbilder/100erschritt.png'), url('../kleinbilder/10erschritt.svg'); 
background-size:50%, 10%; 
background-repeat:no-repeat, repeat; 
background-position:left center, left center; 
background-color:var(--blau180); 
} 

.firmaloeschen{ 

} 

.kursiv{ 
font-style: italic; 
} 


.unterseitenwidgetblock .teiltext.lang::after{ 
content:""; 
} 

.popups{ 
display:none !important; 
} 

.landingpage #bestellbody.step1 { 
display: none; 
} 

/*Kostenschieber*/ 

#umzugskostenrechner { 
width: 840px; 
position:relative; 
display: flex; 
flex-direction: column; 
background-color: var(--blau120); 
} 

.gemittelt{ 
text-align:center; 
} 

#rechnerelemente{ 
display: flex; 
position:relative; 
width:100% 
} 

#eingabeauswahl { 
text-align: center; 
} 

#kostenpunktwahl { 
margin-left: 42px; 
background-size: 4%; 
} 

.preisanzeige{ 
position:relative; 
width:90%; 
text-align:right; 
} 

#eingabeelemente { 
position: relative; 
width: 50%; 
} 


.rechenschieber{ 
position:relative; 
width:100%; 
height:70px; 
margin-top: 42px; 
} 

.schieberumfeld { 
position: absolute; 
left: 10%; 
top: 28px; 
width: 80%; 
height: 19.6px; 
} 

.nichtwahl { 
-webkit-touch-callout: none; /* iOS Safari */ 
-webkit-user-select: none; /* Safari */ 
-khtml-user-select: none; /* Konqueror HTML */ 
-moz-user-select: none; /* Old versions of Firefox */ 
-ms-user-select: none; /* Internet Explorer/Edge */ 
user-select: none; /* Non-prefixed version, currently 
supported by Chrome, Opera and Firefox */ 
} 

.schieberschiene { 
position: absolute; 
width: calc(100%); 
height: 10%; 
top: 50%; 
background-color: grey; 
margin: auto; 
} 

.schiebergriff { 
width: 5.6%; 
position: absolute; 
height: 100%; 
border: 1px solid var(--blau1); 
background-color: rgba(255,255,255.1); 
border-radius: 50%; 
} 

.beruehrt .schieberschatten{ 
background-color: var(--blau1); 
} 

.schieberschatten{ 
z-index:-1; 
position:absolute; 
width:160%; 
height:160%; 
top:-30%; 
left:-30%; 
border-radius:50%; 
} 

.positionsschiene{ 
background-color: var(--blau1); 
position:absolute; 
left:0px; 
top:0px; 
width:0%; 
height:100%; 
} 

#ausgabeelemente { 
position: relative; 
width: 50%; 
} 

#ausgabeanzeige { 
width: 100%; 
text-align: center; 
} 

.zusatzausgabeanzeigen { 
display: flex; 
width: 80%; 
justify-content: space-between; 
margin: 0px 0px 0px 10%; 

} 

.zusatzausgabeanzeigen >*{ 
font-size:0.7em; 
} 

.zusatzausgabeverbergen{ 
display:none; 
} 

#totalpreisp { 
font-size: 1.3em; 
color: var(--blau1); 
} 

.schaetzpreisanzeige::before, schaetzpreisanzeige:before{ 
content:"CHF "; 

} 

.kleinlegendencontainer{ 
width: 80%; 
display: flex; 
justify-content: space-between; 
margin-left: 10%; 
position: absolute; 
top: 76px; 
} 

.kleinlegenden { 
font-size: 0.6em; 
color: rgb(119, 119, 119); 
} 

#zusatzbestellen{ 
display:none; 
} 

/*bezahlprozess*/ 

#auswahllayer { 
position: fixed; 
width: 1400px; 
height: 100vh; 
background-color: rgba(48,48,56,.7); 
top: 0px; 
left: 0px; 
z-index: 10; 
} 

#bezahlen { 
width: 14em; 
background-size: 6%; 
background-position: 96%; 
font-weight: normal; 
font-size: 19.6px; 
display: flex; 
align-items: center; 
margin: 0px; 
} 

#buttonfeld { 
width: 700px; 
height: 60vh; 
position: fixed; 
left: 350px; 
top: 20vh; 
display: flex; 
flex-wrap: wrap; 
background-color:white; 
z-index: 100; 
} 

#buttonfeldtitel { 
position: relative; 
height: calc(10vh - 2em); 
width: calc(100% - 2em); 
display: flex; 
align-items: center; 
justify-content: space-between; 
padding: 1em; 
} 

#buttonfeld .zahlbutton{ 
width:calc(33.33% - 0.6%); 
height:calc(12.5vh - 1.5%); 
position:relative; 
background-color: var(--blau1); 
margin: 0.25% 0% 0% 0.5%; 
display: flex; 
align-items: center; 
justify-content: center; 
} 

#buttonfeld .zahlbutton:hover{ 
background-color: var(--blau140); 
cursor:pointer; 
} 

#buttonfeld .zahlbutton p{ 
color: white; 
} 

#wertanderer{ 
width:calc(66.66% - 0.66%) !important; 
} 

#zahlungvorbereiten.wertanderer{ 
position: absolute; 
top: 10vh; 
left: 0px; 
height: calc(100% - 10vh); 
width: 100%; 
background-color: var(--blau1); 
display: flex; 
flex-direction: column; 
align-items: center; 
justify-content: center; 
} 

#amount { 
text-align: right; 
} 

#anderwertbutton { 
width: 10em; 
background-size: 8%; 
background-position: 95% center; 
} 

#zuemachchruez { 
position: relative; 
display: flex; 
flex-direction: column; 
width: 1.1em; 
height: 1.1em; 
border-radius: 50%; 
border: solid 0.1em black; 
} 

#oberchruez { 
position: absolute; 
width: 80%; 
height: 0.1em; 
background-color: black; 
top: calc(50% - 0.05em); 
left:10%; 
transform: rotate(45deg); 
transition: transform 0.5s; 
} 

#ungerchruez { 
position: absolute; 
width: 80%; 
height: 0.1em; 
background-color: black; 
top: calc(50% - 0.05em); 
left: 10%; 
transform: rotate(-45deg); 
transition: transform 0.5s; 
} 

#zuemachchruez:hover #oberchruez{ 
transform: rotate(90deg); 
} 

#zuemachchruez:hover #ungerchruez{ 
transform: rotate(0deg); 
} 




body { 

width:1400px; 

} 



.administratorbereichiphone{ 

display:none; 

} 





#footer{ 

background-color: var(--blau1); 

position: relative; 

padding: 14px 0px; 

margin-top:-56px; 

z-index:-1; 

} 







#footer::after{ 

content:""; 

position:relative; 

display:block; 

width:100%; 

height:39.2px; 

background-color:var(--blau140); 

z-index:-1; 

top:56px; 

} 



#footertext{ 

margin: 0px auto; 

display: flex; 

justify-content: space-between; 

position:relative; 

width:1288px; 

flex-wrap:wrap; 

} 



#footerhaupttitel{ 

position:relative; 

width:100%; 

white-space:pre; 

} 



#footerhaupttitel h1{ 

margin-left:28px; 

} 





.footerspalte{ 

width: 252px; 

position:relative; 

margin:0px 0px 0px 0px; 

display:flex; 

flex-direction: column; 

font-family:Roboto; 

font-size:16.8px; 

word-wrap: break-word; 

font-weight:normal; 

justify-content: space-between; 

} 







.footerspalte a, .footerspalte li, .footerspalte h2, .footerspalte h3, .footerspalte p, footerspalte > *{ 

font-family:Roboto; 

font-size:16.8px; 

word-wrap: break-word; 

font-weight:normal; 

} 



.footerspalte p{ 

display:none; 

} 



.footerspalte h1{ 

font-family:Roboto-medium; 

font-size:16.8px; 

margin-left:14px; 

} 



.spaltentitel::after { 

content: ""; 

width: 137%; 

height: 1.4px; 

position: relative; 

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

display: block; 

flex-shrink: 0; 

} 



.footerspalte .footertextitem{ 

display:flex; 

height: 98px; 

align-items:center; 

} 



.spaltentitel{ 

flex-direction:column; 

align-items: flex-start !important; 

} 



.spaltentitel{ 

margin-bottom: -28px !important; 

margin-top:-14px; 

} 





.footerspalte .spaltentitel h1{ 

margin-left:0px; 

font-size:22.4px; 

} 



.footerelementtitelbox{ 

display:flex; 

align-items:center; 

} 



#footerhaupttitel .footerelementtitelbox{ 



} 



#footerhaupttitel .footericon{ 

width:4%; 

} 



.footericon{ 

display:flex; 

justify-content:space-arround; 

width:20%; 

flex-shrink:0; 

} 



.footericon svg{ 

width:80%; 

} 



.footericon img{ 

width:100%; 

height:100%; 

} 



.footericonfarbe{ 

fill:rgba(255,255,255,1); 

stroke:rgba(255,255,255,1); 

} 



.linkitem{ 

cursor:pointer; 

} 


#spruch { 

width: 1400px; 

left: -56px; 

position: relative; 

top: -56px; 

color: rgba(0,0,0,1) !important; 

margin: 0px 0px 0px 0px; 

} 



#spruch::after { 

content: ""; 

display: block; 

width: 280px; 

padding: 0.5px 0px; 

background-color: rgba(247,105,55,1); 

margin: -2.8px auto 0px auto; 

} 



.spruchtext{ 

color: rgba(11,116,120,1) !important; 

width: 100%; 

text-align: center; 

font-family:Roboto,sans-serif; 

font-style:italic; 

font-weight:lighter; 

font-size:23.8px; 

} 







.google #google{ 

width:210px; 

height:210px; 

margin-top:14px; 

} 



.footertextbox{ 



} 



.adresstext{ 

font-size: 14px; 

font-weight: normal; 

} 





.adresstext.fett{ 

margin:0px; 

padding:0px; 

font-weight: bold; 

} 



.adresstext a{ 

color:rgba(172,201,2,1); 

} 



#mainbox{ 

width:1400px; 

position:absolute; 

left: 0px; 

} 



h1{ 

font-family: Roboto, sans-serif; 

font-weight: normal; 

color: var(--blau1); 

font-size: 28px; 

} 



h2{ 

} 



h3{ 

font-family: Roboto, sans-serif; 

font-weight: normal; 

font-size:1,70px; 

color:var(--titelschwarz); 

} 



h4{ 

} 



p{ 

} 



ul{ 

} 

.textboxwidget ul { 
margin: initial; 
padding: initial; 
} 

li{ 

margin-left:-1em; 

} 

.textboxwidget li { 
margin-left: initial; 
text-align: center; 
list-style:none; 
} 


a{ 

} 



.listenbutton{ 

display:inline; 

} 





#iphonebox{ 

display:inline; 

position:fixed; 

top: 112px; 

height:calc(100vh - 112px); 

left:0px; 

width:100vw; 

overflow-y: scroll; 

overflow-x:hidden; 

z-index: 0; 

-webkit-overflow-scrolling:touch; 

}


#middlebox {
position: relative;
left: calc(50vw - 700px);
width: 1400px;
} 



#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: 42px; 

left: 1260px; 

width: 70px; 

height: 70px; 

display: none; 

} 



.listenstrichli{ 

position:absolute; 

width:100%; 

height:10%; 

background-color:rgba(1,8,26,0.9); 

} 



#listenstrichli1{ 

top:0px; 

} 

#listenstrichli2{ 

top:45%; 

} 

#listenstrichli3{ 

top:90%; 

} 





#menu {
z-index: 3;
position: fixed;
width: 100vw;
}



#menukasten {
display: inline-flex;
position: relative;
top: 42px;
left: calc(50vw - 700px + 378px);
}



#unteremenuzeile {
display: inline-flex;
position: fixed;
top: 126px;
left: calc(50vw - 700px + 742px);
z-index: 2;
}

.home #unteremenuzeile {
left: calc(50vw - 700px + 772.8px);
} 



.gescrollt #unteremenuzeile {
top: 119px;
left: calc(50vw - 700px + 814.8px);
} 



#unteremenuzeile::before{ 

content: "Kostenlos und unverbindlich!";
color: rgba(255,255,255,1); 

width: 252px; 

margin-right: 28px; 

margin-top: 7px; 

white-space: nowrap; 

} 



.home #unteremenuzeile::before{ 

content: "Kostenlos und unverbindlich!"; 

color: var(--titelschwarz); 

width: 252px; 

margin-right: -28px; 

margin-top: 7px; 
margin-left:28px; 
} 



.gescrollt #unteremenuzeile::before, .home .gescrollt #unteremenuzeile::before{ 

color:var(--blau1); 

content: "Kostenlos und unverbindlich!";
width: 252px; 

margin-right: -28px; 

margin-top: 7px; 
margin-left:0px; 

} 





.navicontainers{ 

position: relative; 

display: inline; 

margin-left:63px;
} 

.navicontainers.menuunterliste { 
margin-left: 28px; 
} 


.menuunterliste .icon{ 

display:none; 

} 



.menuunterliste .navibackground{ 

display: block; 

width: 100%; 

height: 28px; 

border: solid 1px; 

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

position: absolute; 

top: 1.4px; 

left: 29.4px; 

border-radius:7px; 

} 



.tipps .menuunterliste .navibackground{ 

border-color:var(--blau1); 

} 





.gescrollt .menuunterliste .navibackground{ 

border-color:var(--blau1); 

} 



.menuunterliste .hauptitem a{ 

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

} 



.tipps .menuunterliste .hauptitem a{ 

color:var(--blau1); 

} 



.gescrollt .menuunterliste .hauptitem a{ 

color:var(--blau1); 

} 






 

.hauptitem{ 

display: flex; 

margin: 4.2px 29.4px 0px 2.8px;  

} 



.hauptitem a { 
position: relative; 
top: 5.6px; 
left: 53.2px; 
font-weight: lighter; 
font-size: 18.9px; 
color: var(--textschwarz); 
white-space: nowrap; 
} 

.menuunterliste .hauptitem a { 
top:4.2px; 
left: 42px; 
} 



.aktiv .hauptitem a{ 

color: var(--textschwarz); 

} 



.aktiv .hauptitem a::after{ 

content:""; 

display:block; 

width:100%; 

height:0px; 

background-color:rgba(219,14,33,1); 

border-bottom:solid 0.14px rgba(219,14,33,1); 

} 



.rotgut { 

left: -14px; 

top: -2.8px; 

} 



.rotgut .navi { 

margin-left: 2.8px; 

margin-top: 2.8px; 

} 



.icon{ 

display: flex; 

width: 40.6px; 

height: 39.2px; 

position: absolute; 

top: -2.8px; 

left: 1.4px; 

border: solid 2.24px rgba(33,140,216,1); 

border-radius: 20%; 

justify-content: center; 

align-items: center; 

} 



.wiiss{ 

fill:rgba(255,255,255,1); 

} 



.farbig{ 

fill:var(--blau1); 

} 



.aktiv .farbig{ 

fill:var(--blau1); 

} 



.icon svg{ 

width:68%; 

} 



.icon{ 

cursor:pointer; 

} 



.hingergrundig{ 

fill:rgba(255,255,255,1); 

} 



.iconimg{ 

width: 80%; 

margin: auto; 

} 



.pluszeichen{ 

display:none; 

} 



.popups{ 

position: absolute; 

left: 30.8px; 

top: 37.8px; 

transform-origin: top; 

width: 238px; 

padding: 14px 14px 14px 14px; 

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

} 



.popup{ 

display: flex; 

margin-bottom: 5.6px; 

transform-origin:top; 

font-size:18.2px; 

} 







.aktiv.popup{ 

font-weight: bold; 

} 



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

} 



.rotgut .icon { 

border: none 0px #fff; 

padding: 0px; 

width: 43.4px; 

height: 43.4px; 

justify-content: flex-end; 

margin: 0px -11.2px 0px 2.8px; 

} 



.homeicon .icon{ 

border: none 0px #fff; 

} 



#header {
position: fixed;
height: 112px;
width: 100vw;
top: 0px;
}



#logo {
position: absolute;
height: 70px;
width: 336px;
left: calc(50vw - 700px + 56px);
top: 21px;
}



.logobild{ 

position: absolute; 

width: 100%; 

} 



#unterheader{ 

position:fixed; 

top:calc(112px - 1px); 

width:100vw; 

height: 70px; 

z-index:1; 

background-color:transparent; 

border-bottom:0px none; 

} 



#unterheader.gescrollt{ 

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

border-bottom:0.28px solid; 

border-color:var(--rotgut); 

} 



.loginseite #unterheader, .firmenstart #unterheader{ 

display:none; 

} 







#ganzheit{ 

font-size: 35px; 

position: absolute; 

top: 54.6px; 

left: 273px; 

letter-spacing: -0.02em; 

white-space: nowrap; 

font-weight: bold; 

} 



#headerbild {
width: 1400px;
height: calc(50vh - 294px);
min-height: 487px;
margin: 0px;
display: flex;
align-items: flex-start;
flex-direction: column;
max-height: var(--maxbildhoehe);
position: relative;
z-index: 1;
overflow-x: visible !important;
left: 0px;
}



#headerbildbox{
width: 100vw;
height: 100%;
display: flex;
align-items: flex-start;
left: calc(-50vw + 700px);
position: relative;
overflow-y: hidden;
}





#headerbildbild { 

width: 100%; 

position: relative; 
top:-15vw;

} 

.tipps #headerbildbild, .malerei #headerbildbild {
width: 100%;
position: relative;
top: calc(-15vw - 3vh);
}

.headersticky{ 

position: -webkit-sticky; 

position:sticky; 

top: var(--stickystop); 

} 



.headerrelativ{ 

position: relative; 

top: 0px; 

} 



#hauptbild{ 

height: 364px; 

width: 1400px; 

left: 0px; 

z-index: 200; 

} 



#hauptbildbox{ 

position: absolute; 

width: 1400px; 

height: 364px; 

overflow: hidden; 

} 



.hauptbildbild{ 

width: 100%; 

position: absolute; 

left: 0px; 

top: 0px; 

} 



.nichtsbild, .keinbild{ 

display:none; 

} 



.bildbutton{ 

visibility:hidden; 

} 







.bannersticky{ 

position:relative; 

position: -webkit-sticky; 

position:sticky; 

top: 28px; 

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

padding-top: 14px; 

z-index:1; 

} 



.hauptbildbanner{ 

background-color: initial; 

padding-top: 14px; 

z-index: 1; 

margin-bottom:84px; 

position: absolute; 

bottom: -28px; 

} 



#titellinks{ 

display: flex; 

position: relative; 

padding: 0px 56px; 

width: 1120px; 

flex-direction: column; 

top:-70px; 

} 



.bannertext h1{ 

font-family: Roboto-medium; 

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

font-size: 56px; 

padding: 14px 0px 0px 0px; 

margin:0px; 

} 



.bannertext h2{ 

font-weight: normal; 

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

font-size: 28px; 

padding: 14px 0px 0px 0px; 

margin:0px; 

} 



.bannertext h1 a{ 

font-weight: normal; 

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

font-size: 25.2px; 

} 



.trennlinie{ 

width: 25%; 

height: 1px; 

background-color: rgba(247,105,55,1); 

border: none 0px; 

margin: 14px auto 14px auto; 

} 



.bannertext .trennlinie{ 

display:none; 

} 



#sprachen{ 
cursor:pointer;
position: absolute; 

left: 999px; 

top: 10px; 

} 



.sprachbutton{ 

float: left; 
background-color: white;
margin-right: 25.2px; 

} 

.grayedout {
color: rgba(160,160,160,0.8);
display: initial !important;
padding-top: 5px;
transform: scale(1,0);
transform-origin: top;
transition: transform 1s;
}

#sprachen:hover .grayedout{
transform:scale(1,1);
}


.textbox { 

margin: 14px 0px 84px 0px; 

height: auto; 

display: inline-block; 

position:relative; 

} 



.textboxtext h1, #google h1{ 

font-family: Roboto, sans-serif; 

font-weight: normal; 

color: var(--blau1); 

font-size: 28px; 

padding: 14px 0px 0px 0px; 

} 









.hauptseitenbox.keinwidget #textboxinhalt div, .hauptseitenbox.keinwidget #eingabebox div{ 

width:29%; 

margin:0px 1.5%; 

float:left; 

} 



.textboxinhalt{ 

float: left; 

width: 672px; 

padding:0px 56px; 

font-family:Roboto; 

} 

.ueberschriftmitte.textboxinhalt00 { 
text-align: center; 
} 



.textboxinhalt2{ 

float: right; 

width: 448px; 

padding:0px 56px; 

font-family:Roboto; 

} 



.textboxinhalt img, .textboxinhalt2 img{ 

width:100%; 

} 



.textboxinhalt p, .textboxinhalt li, .textboxinhalt ul, .textboxinhalt2 p, .textboxtext > *, .textboxtext h2, .textboxtext h3, .textboxtext h4, .textboxtext h5, .textboxtext h6{ 

font-family:Roboto; 

font-weight:normal; 

font-size:21px; 

color:var(--textschwarz); 

} 



.textboxtext h2{ 

font-size:21.7px; 

color:rgba(91,80,86,1); 

} 



.textboxtext h3{ 



} 



.textboxinhalt .bildlegende, .textboxinhalt2 .bildlegende{ 

font-style: italic; 

margin-top: -1em !important; 

font-weight: lighter; 

position: relative; 

font-family:Roboto; 

font-size:16.8px; 

} 



.textboxinhalt .textkasten.hinterlegt, .textboxinhalt2 .textkasten.hinterlegt{ 

width: 80%; 

display: block; 

padding: 42px 10%; 

background-color:var(--textboxen); 

border-radius:14px; 

font-weight:lighter; 

} 



.textboxwidgetblock{ 

margin-top:28px; 

display:flex; 

justify-content:space-between; 

flex-wrap: wrap; 

} 



.textboxwidgetblock::after{ 

content:""; 

display:block; 

height:1.4px; 

background-color:rgba(193,196,198,1); 

position:relative; 

width:100%; 

} 



.textboxwidgetblockheader{ 

width: 100%; 

flex-shrink: 0; 

display:flex; 

flex-direction:column; 

align-items:center; 

margin-bottom:28px; 

} 



.textboxwidgetblock h1 { 

text-align:center; 

font-size:23.8px; 

} 



.textboxwidget.spalten3{ 

display:flex; 

align-items:center; 

flex-direction:column; 

width:350px; 

} 



.textboxwidget.spalten4{ 

display:flex; 

align-items:center; 

flex-direction:column; 

width:308px; 

} 



.textboxwidget { 
margin: 1em 0px 2em 0px; 
} 



.textboxwidgetbildkasten{ 

display:block; 

width:84px; 

height:84px; 

} 



/*.textboxwidgetheaderbildkasten::before, .textboxwidgetheaderbildkasten::after{ 

content:""; 

display:block; 

height:5.6px; 

background-color:rgba(193,196,198,1); 

position:relative; 

} 



.textboxwidgetheaderbildkasten::before{ 

left: -595px; 

width: 560px; 

top: 39.2px; 

} 





.textboxwidgetheaderbildkasten::after{ 

left: 116.2px; 

width: 560px; 

top: -53.9px; 

}*/ 









.spalten3 .textboxwidgetbildkasten{ 

display:block; 

width: 280px; 

height: 196px; 

} 



.textboxwidgetbildkasten img{ 

border:none; 

width:100%; 

} 



.textboxwidgeth3{ 

text-align:center; 

color:var(--rotgut) !important; 

} 



.textboxwidgetp{ 

text-align:center; 

} 



.hinterlegt p, .hinterlegt h1, .hinterlegt h2, .hinterlegt h3, .hinterlegt h4, .hinterlegt h5, .hinterlegt h6, .hinterlegt li, .hinterlegt div{ 

color:var(--textschwarz); 

} 



.hinterlegt a{ 

color:var(--textschwarz); 

} 



.footer.hinterlegt p, .footer.hinterlegt h1, .footer.hinterlegt h2, .footer.hinterlegt h3, .footer.hinterlegt h4, .footer.hinterlegt h5, .footer.hinterlegt h6, .footer.hinterlegt li, .footer.hinterlegt div{ 

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

} 



.footer.hinterlegt a{ 

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

} 



#eingabebox { 

margin: 56px 42px 21px 0px; 

font-size: 16.8px; 



} 



#eingabebox h1, #eingabebox h2, #eingabebox h3, #eingabebox a{ 

font-size: 16.8px; 

} 



.unterseitentext #textboxinhalt{ 

margin-top:-32.2px; 

} 



#seitentitel{ 

position: absolute; 

left: 42px; 

top:364px; 

} 



.titellink, #seitentitel h1{ 

font-size: 25.2px; 

font-weight: normal; 

color: var(--blau1); 

} 



.navibackground{ 



} 





.widgetblock, .hauptwidgetblock { 

position: relative; 

display: flex; 

justify-content: space-between; 

margin:56px; 

} 

.unterseitenwidgetblock{ 
flex-direction: column; 
} 



.widget, .hauptwidget{ 

width:25%; 



cursor:pointer; 

flex: 0 1 auto; 

} 





.hauptwidget{ 

width: 25%; 

padding:28px; 

cursor: pointer; 

border:0.14px solid var(--blau1); 

} 



.spalten4 .widget, .spalte4 .hauptwidget{ 

width:20%; 

} 



.spalten2 .widget, .spalte2 .hauptwidget{ 

width:40%; 

} 



.unterseitenwidgetblock .widget { 
width: 92%; 
cursor: pointer; 
display: flex; 
border: 0.14px solid var(--blau1); 
padding: 56px 28px 28px 28px; 
position:relative; 
margin-bottom:28px; 
} 



.widgettitel { 
font-weight: bold; 
position: absolute; 
top: 21px; 
left: 28px; 
} 



.hauptwidgettitel{ 

margin: 28px auto 42px auto; 

text-align: center; 

} 


.hauptwidgetbildkasten{ 

position: relative; 

max-width: 100%; 

overflow: hidden; 

height: 203.7px; 

} 

.widgetbildkasten { 
position: relative; 
max-width: 20%; 
overflow: hidden; 
margin-right:28px 
} 

.unterseitenwidgetblock .teiltext.lang { 
margin-right: -28px; 
flex-grow: 2; 
max-width: 95%; 
} 


.hauptwidgetbildkasten{ 

border:0.14px solid var(--blau1); 

} 



.widgetbild, .hauptwidgetbild { 

width: 100%; 

position: relative; 

} 



.teiltext, .hauptwidget .teiltext{ 



} 



.teiltext::after, .mehrbutton::before,.hauptwidget .teiltext::after{ 

content:"..."; 

} 



.hauptwidget .mehrbutton::before{ 

content:""; 

} 



.hauptwidget .teiltext.kurz, .teiltext.kurz{ 

display:none; 

} 





.mehrbutton{ 

display: block; 



} 
.unterseitenwidgetblock .mehrbutton { 
width: 112px; 
color: rgba(255,255,255,1); 
background-color: rgba(48, 137, 201, 1); 
background-image: url('../kleinbilder/icon_pfeilrund_rechts.png'); 
background-repeat: no-repeat; 
background-position: 90% center; 
background-size: 20%; 
padding: 11.2px 19.6px 8.4px 14px; 
font-size: 1.3em; 
text-align: left; 
border-radius: 14px; 
height: 28px; 
position: relative; 
left: 14px; 
margin-top: 14px; 
display: inline-block; 
} 


.hauptwidget .mehrbutton{ 

width: 98px; 

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

background-color: rgba(48, 137, 201, 1); 

background-image: url('../kleinbilder/icon_pfeilrund_rechts.png'); 

background-repeat: no-repeat; 

background-position: 90% center; 

background-size: 22%; 

padding: 14px 19.6px 8.4px 14px; 

font-size: 1.3em; 

margin: 14px 0px; 

text-align: left; 

border-radius: 14px; 

margin-left: 60%; 

} 



.spalten4 .hauptwidget .mehrbutton { 

width: 98px; 

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

background-color: rgba(48, 137, 201, 1); 

background-image: url('../kleinbilder/icon_pfeilrund_rechts.png'); 

background-repeat: no-repeat; 

background-position: 90% center; 

background-size: 20%; 

padding: 11.2px 19.6px 8.4px 14px; 

font-size: 1.3em; 

margin: 28px 0px 0px 0px; 

text-align: left; 

border-radius: 14px; 

margin-left: 50%; 

} 



.spalten4 .hauptwidgetbildkasten{ 

border:0.14px solid var(--blau1); 

height:168px; 

} 



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

} 



.navicontainers:hover .popups, .navicontainers:hover .popup{ 

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

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

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

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

transform: scale(1,1); 

} 



#headerbildbanner, .beitragsheader #headerbildbanner{ 

display:none; 

} 



.beitragsheader.headersticky{ 

position:relative; 

top:inherit; 

float:left; 

margin: 84px 14px 14px 84px; 

} 



.beitragsheader{ 

width:490px; 



} 



.beitragsheader .headerbildbild{ 

width:100%; 

} 









#textboxinhalt a{ 

color: rgba(172,201,2,1); 

} 



.kontaktbody, berstaetigungstext{ 

width: 672px; 

float: left; 

margin:28px 0px 210px 0px; 

} 











.kontaktbody .formularfelder{ 

margin:0px 0px 0px 56px; 

font-family: Roboto; 

font-weight: 600; 

font-size: 18.9px; 

color:rgba(96,96,96,0.7); 

} 



.kontaktbody .formularfelder h2{ 

font-family: Roboto; 

font-weight: 600; 

font-size: 18.9px; 

color: rgba(44,131,197,0.8); 

} 



.kontaktbody .formularinputs{ 

display: inline-flex; 

align-items:center; 

font-family: Roboto; 

font-weight: 600; 

font-size: 18.9px; 

color:rgba(96,96,96,0.7); 

} 



.kontaktbody .formularinputs input, .kontaktbody .formularinputs textarea{ 

font-family: Roboto; 

font-weight: 600; 

font-size: 16.8px; 

color: rgba(96,96,96,0.5); 

padding: 0.7px 2.8px 0px 5.6px; 

} 



.kontaktbody .formularinputs p, .kontaktbody .formularinputs button{ 

font-family: Roboto; 

font-weight: 600; 

font-size: 18.9px; 

color: var(--textschwarz); 

} 



.kontaktbody .formularinputs button{ 

background-color:rgba(44,131,197,0.7); 

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

/*font-weight:lighter;*/ 

} 



.kontaktbody .textareafeld{ 

flex-direction:column; 

align-items:left; 

min-width:420px; 

font-family: Roboto; 

font-weight: 600; 

font-size: 1.kontaktbody 4.9px; 

color:rgba(96,96,96,0.kontaktbody .7); 

} 



.kontaktbody .textareafeld .inputvortext{ 

display: block; 

width: 100%; 

text-align: left; 

} 



.kontaktbody .textareafeld .textarea{ 

display: block; 

width: 32.kontaktbody 9.8px; 

text-align: left; 

height:8em; 

margin:0px 3% 0px 1%; 

} 



.kontaktbody .anderesfeld { 

display: block; 

} 







.kontaktbody .kontaktbutton { 

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

display: block; 

position: relative; 

color: var(--textschwarz); 

border: solid 1.68px rgba(96,96,96,0.7); 

border-radius: 0.4em; 

height: 36.4px; 

text-align: center; 

cursor: pointer; 

left:254.8px; 

} 



.bidwechseln{ 

position:absolute; 

z-index:5000; 

} 



.bildbutton .bidwechseln{ 

display:block; 

visibility:visible; 

top:0px; 

} 



.mce-floatpanel.mce-fixed { 

position: fixed; 

top: 224px !important; 

} 



:root { 

--googleheight:280px; 

} 



#google{ 

width: calc(448px - 4px); 



position: absolute; 

display: flex; 

flex-direction:column; 

left: 851.2px; 

top: 0px; 

} 



#google iframe{ 

width:100%; 

height: var(--googleheight); 

} 



.kontakttextinhalt div:nth-child(2) { 

margin-left:-84px !important; 

} 



.kontakttextinhalt2{ 

margin:calc(var(--googleheight) + 126px) 0px 0px 0px; 

width:588px; 

} 



#loginerscheinbutton{ 

opacity:0; 

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

display: block; 

position: relative; 

color: var(--textschwarz); 

border: solid 1.68px rgba(96,96,96,0.7); 

border-radius: 0.4em; 

height: 36.4px; 

text-align: center; 

cursor: pointer; 

} 



#absender{ 



position: relative; 

padding-top: 4.2px; 

cursor: pointer; 

} 



#loginerscheinbutton:hover { 

opacity:1 !important; 

} 



#logintable{ 

display: block; 

} 



.login{ 

margin: 0px; 

position: relative; 

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

padding: 140px; 

border: 1px solid var(--textschwarz); 

border-radius: 42px; 

} 



.mitabstand{ 

margin-left:56px; 

} 



#vergessform { 

background-color: transparent; 

position: relative; 

top: -84px; 

width:20em; 

margin:0px auto; 

} 



#passwortvergessen{ 

height: 2em; 

background-color: transparent; 

color: white; 

position-relative; 

} 



#logform{ 

position:relative; 

width:92%; 

margin-left:56px; 

margin-top:84px: 

} 



#logform .inputvortext{ 

color:white; 

} 



.pwtablecell{ 

display:flex; 

} 



.pwtablecell #absendermail{ 

width:30%; 

background-size:5%; 

} 



.pwtablecell #abbrecher { 

background-color: transparent; 

border: none; 

background-image: initial; 

margin: 28px auto 0px auto; 

cursor: pointer; 

} 



.logbuttons{ 

margin: 0px 0px 0px 0px; 

position: absolute; 

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

padding: 0px; 

border: 0px none; 

border-radius: 0px; 

cursor:pointer; 

} 



#closebutton{ 

position:absolute; 

top:0px; 

right:0px; 

width:2em; 

height:2em; 

border-radius:1em; 

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

display: block; 

color: var(--textschwarz); 

border: solid 1.68px rgba(96,96,96,0.7); 

border-radius: 1em; 

text-align: center; 

cursor: pointer; 

} 



#eingeloggt{ 

position: absolute; 

color: rgba(247,105,55,1); 

top:-14px; 

} 


 



#copyright { 
margin: 7px 0px 0px 1190px; 
width: 210px; 
} 



#copyright a { 
color: var(--blau1); 
font-size: 11.2px; 
} 



/*Bedienelemente*/ 



.pfilibox { 

display: inline-flex; 

margin: 14px auto; 

} 



.neueseinfuegen { 

width: 42px; 

display: block; 

background: none; 

border: none 0px; 

color: inherit; 

padding: 0; 

font: inherit; 

cursor: pointer; 

outline: inherit; 

height: 42px; 

} 



.neueseinfuegen { 

margin: auto; 

} 


.erstefarbe { 

fill: var(--blau1); 

} 



.zweitefarbe { 

fill: none; 

stroke: none; 

} 



.drittefarbe { 

fill: rgba(255,255,255,1); 

} 



#widgeteinfuegeformular { 

position: absolute; 

} 



/*//// 

Bestellformular 

////*/ 













.homeinhalt{ 





} 



.homeinhalt .headerbild{ 





} 



.homeinhalt #headerbildbox {
width: 100vw;
height: 100%;
display: flex;
align-items: flex-start;
left: calc(-50vw + 700px);
position: relative;
overflow-y: hidden;
}



.homeinhalt .headerbildbild{ 
top: -8vw !important;

left:0px;


} 



.homeinhalt .hauptbildbanner{ 

bottom:initial; 

top:168px; 

} 



.homeinhalt #titellinks{ 

width:58%; 

} 



.homeinhalt #titellinks h1{ 

color:var(--titelschwarz); 

font-size:39.2px; 

white-space:pre; 

font-family: Roboto-bold; 

margin-bottom: 14px; 

} 



.homeinhalt #titellinks h2{ 

color:var(--titelschwarz); 

font-size:19.6px; 

margin-top:14px; 

margin-bottom: 14px; 

font-weight:normal; 

} 







.homeinhalt .gutzeichenkasten, .gutzeichenkasten { 

position: relative; 

padding: 16.8px; 

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

border-radius: 14px; 

margin-top: -308px; 

} 



.homeinhalt .gutzeichenkasten.oben{ 

left: 714px; 

width:532px; 

} 



.homeinhalt .gutzeichenkasten.unten{ 

left: 0px; 

width:630px; 

} 



.homeinhalt .gutzeichenkasten.ganzoben { 

position: absolute; 

top: -42px; 

left: 50%; 

} 



.homeinhalt .gutzeichenitem{ 



margin-bottom:28px; 

} 



.homeinhalt .schritte { 

margin-top: 84px; 

width:60%; 

} 

















.unsichtbar{ 

display:none; 

} 



/*.step3 .formularinputs { 

width: 35%; 

padding:28px; 

margin-right:5%; 

} 



.step3 .formularinputs > :nth-child(2){ 

height:100%; 

} 



.step3 .formularfelder { 

display: flex; 

flex-wrap: wrap; 

margin: 28px; 

background-color: rgba(193,226,242,1); 

position: relative; 

padding: 0px 0px 56px 56px; 

border-radius:28px; 

} 



.step3 .formularfelder.gerade { 

padding: 0px 0px 112px 56px; 

} 



.step3 .formularfelder h2 { 

position:absolute; 

top:-56px; 

width: 100%; 

left:0px; 

} 





.step3 #erwuenscht { 

position: absolute; 

bottom: -56px; 

left:0px; 

} 



.step3 .formularinputs,.step3 .formularinputs input,.step3 .formularinputs textarea,.step3 .formularinputs select { 

font-family: Roboto; 

font-weight: normal; 

font-size: 18.9px; 

color: var(--textschwarz); 

} 







.step3 .inputvortext { 

display: block; 

width: 100%; 

margin-bottom: 14px; 

} 



.step3{ 

margin-left:35px; 

} 



.step3 button { 

height: 60.2px; 

left: 5%; 

top: 61.6px; 

border-radius: 9.8px !important; 

} 



.step3 .formularfelder h2 { 

font-family: Roboto-light; 

font-weight: lighter; 

font-size: 23.8px; 

color: var(--blau1); 

} 



.step3 .formularinputs { 

width: 35%; 

padding:28px; 

margin-right:5%; 

} 



.step3 .formularinputs > :nth-child(2){ 

height:100%; 

} 



.step3 .formularfelder { 

display: flex; 

flex-wrap: wrap; 

margin: 28px; 

background-color: rgba(193,226,242,1); 

position: relative; 

padding: 0px 0px 56px 56px; 

border-radius:28px; 

} 



.step3 .formularfelder.gerade { 

padding: 0px 0px 112px 56px; 

} 



.step3 .formularfelder h2 { 

position:absolute; 

top:-56px; 

width: 100%; 

left:0px; 

} 



.step3 .formularfelder h2 { 

font-family: Roboto-light; 

font-weight: lighter; 

font-size: 23.8px; 

color: var(--blau1); 

} 





.step3 #erwuenscht { 

position: absolute; 

bottom: -56px; 

left:0px; 

} 



.step3 .formularinputs,.step3 .formularinputs input,.step3 .formularinputs textarea,.step3 .formularinputs select { 

font-family: Roboto; 

font-weight: normal; 

font-size: 18.9px; 

color: var(--textschwarz); 

} 



.step3 .inputvortext { 

display: block; 

width: 100%; 

margin-bottom: 14px; 

} 



.step3{ 

margin-left:35px; 

} 



.step3 button { 

height: 60.2px; 

left: 5%; 

top: 61.6px; 

border-radius: 9.8px !important; 

} 

*/ 



.fortschrittsbar { 

width: 1120px; 

display: flex; 

position: relative; 

top: 42px; 

left: 56px; 

justify-content:space-between; 

} 



.fortschrittsbar span{ 

display:none; 

} 



.fortschrittsbar.bar3{ 

width: 840px; 

} 



.fortschrittsbar.bar2{ 

width: 560px; 

} 



.stepfortschritt{ 

display:flex; 

align-items: baseline; 

cursor:pointer; 

} 



.stepfortschritt.aktiv{ 

cursor:initial; 

} 



.fortschrittnummer { 

width: 43.4px; 

height: 36.4px; 

padding-top: 4.2px; 

background-color: rgba(193,226,242,1); 

display: flex; 

justify-content: center; 

align-items: center; 

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

border-radius: 50%; 

font-size: 25.2px; 

margin-right:14px; 

flex-shrink: 0; 

} 



.fortschritttext { 

color: rgba(162, 162, 162, 1); 

white-space:nowrap; 

flex-shrink: 0; 

font-size:0.8em; 

} 







.aktiv .fortschrittnummer { 

background-color: var(--blau1); 

} 



.fortschrittnummer:hover{ 

background-color: var(--blau1); 

} 



.fortschritttext:hover { 

color: var(--textschwarz); 

} 



.aktiv .fortschritttext { 

color: var(--textschwarz); 

} 



.linienboexli { 

display: block; 

margin:0px 14px 0px 7px; 

} 



.linienboexli svg{ 

position:relative; 

top:-4.2px; 

} 



.aktiv .linienboexli { 

display: none; 

} 



.letztes .linienboexli{ 

display:none; 

} 





.bitteausfuellen { 

font-size: 1em; 

font-family: Roboto-medium; 

font-weight: inherit; 

color: var(--blau1); 

} 



.belobigung{ 

display:block; 

position:relative; 

top:-56px; 

left:-56px; 

color:black; 

width:120% 

} 



.spanisiert{ 

margin-top:42px; 

} 



.bestellbody{ 

padding-top:154px; 

} 





.formularinputs { 

margin-bottom: 14px; 

} 



.formularinputs input.checkbox{ 

} 



.formularinputs input.checkbox:checked{ 



} 



.formularinputs input.checkbox::after{ 



} 



.formularinputs input.checkbox:checked::after{ 



} 





.radiofeld { 

display: flex; 

align-items: baseline; 

justify-content: space-between; 

} 



.selectfeld label,.einfachesfeld label,.textareafeld label{ 

margin-bottom:7px; 

} 



.felder2{ 

width:35%; 

} 



.checkfeld { 

display: flex; 

align-items: center; 

justify-content: space-between; 

width: 30%; 

} 



.checkfeld label{ 

margin-bottom: 0px !important; 

padding-top: 7px; 

} 



.textbox select { 

height: 44.8px; 

} 



/*#textboxumzug .step3 #formularfeld1::before { 

content: "Umzug von:"; 

position: absolute; 

left: 42px; 

font-family: Roboto-light; 

font-weight: lighter; 

font-size: 23.8px; 

color: var(--blau1); 

top: 23.8px; 

} 



#textboxumzug .step3 #formularfeld5::before { 

content: "Umzug nach:"; 

position: absolute; 

left: 42px; 

font-family: Roboto-light; 

font-weight: lighter; 

font-size: 23.8px; 

color: var(--blau1); 

top: 316.4px; 

} 





#textboxumzug .step3 button { 

top: 131.6px; 

}*/ 









.homeinhalt .step1{ 

margin-top:84px; 

color:var(--titelschwarz); 

} 



.homeinhalt .step1 h2{ 

color:var(--titelschwarz); 

font-size: 18.9px; 

font-family: Roboto; 

} 



.homeinhalt .step1.gescrollt { 

top: 126px; 

} 



.absolutisiert { 

position: relative; 

width: 100%; 

margin-top: 56px; 

background-color: var(--textboxen); 

} 



.homeinhalt .textboxinhalt, .homeinhalt .textboxinhalt2 { 

float: left; 

padding: 0px 56px; 

font-family: Roboto; 

} 



.homeinhalt .textboxinhalt0, .textboxinhalt0 { 

clear: both; 

width: 1288px; 

padding: 0px 56px; 

font-family: Roboto; 



} 



.homeinhalt .textboxtetxt { 

position: relative; 

} 



.homeinhalt #bestellbody{ 

float:initial; 

} 



.homeinhalt .fortschrittsbar{ 



} 



.uebrbild {
width: 112px;
height: 112px;
position: absolute;
top: 360px;
left: calc(1260px + (50vw - 700px));
z-index: 1;
}



.uebrbild img { 

width: 100%; 

} 



#bestellbody.step1{ 

margin: 42px 0px 0px 0px; 

width: 672px; 

float: left; 

} 



.step1 select, .step1 input, .step1 textarea, .step1 button{ 

-webkit-appearance: none; 

-moz-appearance: none; 

appearance: none; 

border: none 0px; 

height: 53.2px; 

font-size: 1em; 

border-radius:0px; 

flex-grow:0; 

color:var(--textschwarz) 

} 



.step1 input{ 

font-family: Roboto; 

font-weight: 600; 

color: rgba(96,96,96,0.5); 

padding: 0.7px 2.8px 0px 5.6px; 

} 



.step1 .erstoption{ 

font-family: Roboto; 

font-weight: 600; 

color: rgba(96,96,96,0.5); 

} 



.step1 select::-ms-expand{ 

display:none; 

} 



.step1 select option:first-child{ 

font-family: Roboto; 

font-weight: 600; 

color: rgba(96,96,96,0.5); 

} 



.step1 input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 

font-size:1em; 

text-align:center; 

} 

.step1 input::-moz-placeholder { /* Firefox 19+ */ 

font-size:1em; 

text-align:center; 

} 

.step1 input:-ms-input-placeholder { /* IE 10+ */ 

font-size:1em; 

text-align:center; 

} 

.step1 input:-moz-placeholder { /* Firefox 18- */ 

font-size:1em; 

text-align:center; 

} 



.step1 input:placeholder-shown, .step1 input::placeholder{ 

font-size:1em; 

text-align:center; 

} 



.step1 select{ 

width:238px; 

flex-grow:2; 

margin-right:28px; 

background-image:url('../kleinbilder/icon_pfeilrund_unten.png'); 

background-repeat:no-repeat; 

background-position: 95% center; 

background-size: 4%; 

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

} 



.step1 .formularfelder{ 

display: flex; 

background-color:var(--blau160); 

box-sizing: border-box; 

position: relative; 

padding: 21px; 

width: 658px; 

border: 1px solid rgba(166, 166, 166, 1); 

border-radius: 14px; 

margin: 0px 0px 0px 56px; 

font-family: Roboto; 

font-weight: 600; 

font-size: 18.9px; 

flex-wrap: wrap; 

flex-direction:initial; 

} 



.step1 .anderesfeld { 

display: block; 

} 



.step1 .inputvortext{ 

display:none; 

} 



.step1 .bestellbutton { 

display: block; 

position: relative; 

cursor: pointer; 

left: 254.8px; 

} 



.step1 .formularinputs{ 

align-items: center; 

font-family: Roboto; 

font-weight: 600; 

font-size: 18.9px; 

color: rgba(96,96,96,0.7); 

margin-bottom:initial; 

} 



.step1 .selectfeld{ 



} 



.step1 button{ 

width:98px; 

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

background-color:rgba(48, 137, 201, 1); 

background-image:url('../kleinbilder/icon_pfeilrund_rechts.png'); 

background-repeat:no-repeat; 

background-position: 80% center; 

background-size: 15%; 

padding-left:14px; 

font-size:1.5em; 



margin-left: -280px; 

margin-bottom:initial; 

margin-top:initial; 

text-align:left; 

vertical-align: center; 

} 



.step1.gescrollt .formularfelder{ 

padding: 0px; 

width: 476px; 

background-color: var(--blau120); 

} 







.step1.gescrollt select{ 

height: 42px; 

margin: 7px; 

} 



.step1.gescrollt input{ 

height: 40.6px; 

width: 98px; 

margin: 7px 7px 7px 0px; 

} 



.step1.gescrollt input:placeholder-shown { 

font-size:16.1px; 

} 

.step1.gescrollt button { 

margin: 7px 0px 7px -252px; 

height: 42px; 

} 





.step1.gescrollt .formularfelder h2 { 

color: var(--blau1) !important; 

top: 0px; 

left: -252px; 

} 



.step1.bestellbody{ 

margin:initial; 

padding:initial; 

width:initial; 

} 



.step1.gescrollt { 

position: fixed; 

top: 119px; 

z-index: 2; 

left: calc(50vw - 700px + 252px);

margin-top:-14px !important; 

} 



.step1 #erwuenscht{ 

display:none; 

} 







.step1 .formularfelder h2{ 

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

position:absolute; 

top:-56px; 

left:-1.4px; 

font-weight:normal; 

} 



.homeinhalt .step1 #bitteausfuellen { 

color: var(--blau1); 

} 







.home .bestellbody.step1{ 

margin: 0px 0px 0px 0px !important; 

} 



.home .bestellbody.step1.gescrollt{ 

margin: -14px 0px 0px 0px !important; 

} 



.umzuginhalt .step8 .custom-radiobox { 

align-items: baseline; 

margin-right:7px; 

} 



.bannertext .step1.gescrollt h2 { 

padding: initial; 

padding-top:14px; 

} 



.step8 button{ 

width:82%; 

background-size:3%; 

background-position:96% center ; 

} 



.teilschrittgrafik .nuemmerli { 

justify-content: center; 

line-heigh:0px; 

width:42px; 

height:42px; 

} 



.landingpageinhalt .step1{ 

display:none; 

} 



.landingpageinhalt .stepfortschritt{ 

display:none; 

} 



.landingpageinhalt .fortschrittsbar::after{ 

content:"Sie werden die Offerten demnächst erhalten. Wir empfehlen es sehr eine Besichtigung mit unseren Qualitätsgeprüften Firmen zu organisieren. Bei einer Besichtigung können Sie sicher gehen, dass Sie eine exakte Offerte erhalten. Somit haben Sie eine 100% Sicherheit, dass der Preis während dem gesamten Umzug unverändert bleibt."; 

display:block; 

font-family:Roboto-medium; 

color:var(--blau1); 

position:absolute; 

top:-42px; 

width:1232px; 

z-index:1; 

} 



.landingpageinhalt .formularfelder{ 

background-color:initial; 

flex-direction:initial; 

flex-wrap:wrap; 

margin-left:-56px; 

justify-content: space-between; 

} 



.landingpageinhalt .bestellbutton{ 

display:none; 

} 



.landingpageinhalt .datumsfeld{ 

display:block; 

width:40%; 

} 

.landingpageinhalt .datumsfeld label{ 



} 



.landingpageinhalt .datumsinputfeld{ 

border:1.4px solid; 

border-color:var(--blau1); 

width:55%; 

} 



.landingpageinhalt .selectinputfeld{ 

display:block; 

width: 50%; 

} 



.landingpageinhalt .selectinputfeld label{ 

border:none 0px; 

} 



.landingpageinhalt .selectinputfeld .selecttrigger{ 

width:28px; 

border-left:0px none; 

} 



.landingpageinhalt .selectinputfeld input{ 

border-right:0px none; 

text-align:left; 

} 

.landingpageinhalt .selectinputfeld .inputcontainer{ 

width: 90%; 

margin-top:0px; 

} 

.landingpageinhalt .radiofeld{ 

width:80%; 

margin-right:20%; 

} 



.landingpageinhalt .custom-radiobox { 

display: flex; 

width: 20%; 

justify-content: initial; 

} 



.landingpageinhalt .custom-radiobox .inputvortext { 

display: block; 

margin-right: 14px; 

} 



.landingpageinhalt .triggefeld{ 

width:95%; 

border-bottom: 1.4px solid; 

border-color: var(--blau1); 



} 



.landingpageinhalt .triggerkasten{ 

width:60%; 

border:2.1px solid; 

border-bottom:0px none; 

border-top:0px none; 

border-color: var(--blau1); 

} 



.landingpageinhalt .berstaetigungstext{ 

diesplay:block; 

position:relative; 

margin-left:56px; 

font-size:28px; 

font-family:Roboto-medium; 

color:var(--blau1); 

} 



.landingpageinhalt .datumsfeld label { 

float: left; 

margin: 14px; 

} 



.landingpageinhalt .selectinputfeld label{ 



} 



.footerhinterlegt{ 

color:rgba(255,255,255,1) !important; 

} 






.falschmeldung { 
margin: 14px 0px -14px 0px; 
font-size: 0.8em; 
color: var(--rotgut); 
} 


.loginseite #headerbild{ 

display:none; 

} 



.loginseite #headerbild.einblenden{ 

display:flex; 

} 



.loginseite #siegel{ 

display:none; 

} 



.administratorbereich.tabelle{ 

position:relative; 

} 

.administratorbereich .tabellenzeile form, .administratorbereich .tabellenzeile{ 

display:flex; 



} 



.administratorbereich .tabellenzeile{ 



} 



.administratorbereich #tabellenkopf{ 

display:block; 

} 


.administratorbereich .tabellenzelle{ 

width:19%; 

padding-left:1%; 

padding-top: 2.8px; 

padding-bottom: 2.8px; 

border:solid 0.28px; 

border-color:var(--blau1); 

word-break: break-word; 

font-size:16.8px; 
position: relative; 
} 

.firmennamenzuweisung { 
margin: 0px 0px 0.4em 0px; 
} 

.firmennamenzuweisung::before { 
content: "- "; 
} 

.administratorbereich #tabellenkopf { 
position: sticky; 
top: 4.8em; 
background-color: white; 
z-index: 1; 
} 

.deleter { 
position: absolute; 
bottom: 14px; 
border: solid 1px var(--blau1)); 
padding: 7px; 
background-color: white; 
cursor: pointer; 
} 




.administratorbereich .input{ 

width:initial; 

position:relative; 

border:none 0px; 

display:flex; 

align-items:center; 

} 



.administratorbereich .input > input, .administratorbereich .input > label{ 

flex-shrink:0; 

} 



.administratorbereich .input.checked{ 

top:0px; 

width:19%; 

padding-left:1%; 

} 



.administratorbereich .firmenzuweisungsselect {
background-size: 10%;
width: 90%;
margin: 4px 0px;
}



.administratorbereich .keininhalt{ 

width:0px; 

padding-left:0px; 

} 



.administratorbereich .ueberschriftenzeile{ 

padding:4.2px 0px; 

} 



.administratorbereich .ueberschriftenzeile .tabellenzelle{ 

font-family:Roboto-medium; 

} 



.administratorbereich .ueberschriftenzeile .tabellenzelle, .administratorbereich .keininhalt{ 

border:none 0px; 

} 



.administratorbereich .etwasdrinnen::before{ 

content:"Zusätzliche Kolonnen enzeigen:"; 

padding-top: 5.6px; 

} 



.administratorbereich .etwasdrinnen{ 

padding-top:0px; 

} 



#firmenaufladung .bestellbutton{ 

width:100%; 

background-size:8%; 

} 



#firmenaufladung{ 

position: fixed; 

top: 30vh; 

left: 560px; 

padding: 42px 28px 28px 28px; 

background-color: var(--blau1); 

z-index:12; 

} 



#ladeabbruch { 

position: absolute; 

top: 5.6px; 

left: 90%; 

} 



.firmenloginseite #anfragen{ 

position:relative; 

} 



.firmenloginseite .kundenzeile{ 

padding:14px; 

margin-left:30%; 

width: 70%; 

position:relative; 



} 



.firmenloginseite .nummerzahl{ 

display:none; 

} 







.firmenloginseite .erstezeile{ 

margin-top:-336px; 

} 



.firmenloginseite .zusammenfassungszelle{ 

width: 30%; 

margin-right:5%; 

} 



.firmenloginseite .kleinformat .zusammenfassungszelle{ 

display:flex; 

align-items: baseline; 

} 



.firmenloginseite .kleinformat .alterort, .firmenloginseite .kleinformat .neuerort{ 

flex-shrink:0; 

} 



.firmenloginseite .service{ 

width: 35%; 

} 



.firmenloginseite .branche{ 

width:30%; 

} 



.firmenloginseite .alteadresse{ 



} 



.firmenloginseite .nuemmerzahl{ 

display:none; 

} 





.firmenloginseite .allesgezeigt{ 

display: flex; 

flex-wrap: wrap; 

padding-top:112px; 

} 



.firmenloginseite.tabelle{ 

position: relative; 

min-height: 532px; 

} 


.firmenloginseite .kleinformat .chundetabellezelle.zeit { 
flex-shrink: 0; 
} 

.firmenloginseite .chundetabellezelle.bemerkung { 
max-width: 20%; 
margin-left: 14px; 
} 



.firmenloginseite .neuschild{ 

width: 120%; 

display: flex; 

background-color: white; 

height: 1.4em; 

align-items: baseline; 

margin: 0px -14px 14px -14px; 

} 



.firmenloginseite .neuschild h2{ 

padding: 0px; 

margin: 2.8px 14px 0px 14px; 

font-size: 1.2em; 

color: var(--rotgut); 

} 



.firmenloginseite #buttonblock{ 

position: -webkit-sticky; 

position:sticky; 

width:26%; 

left:56px; 

top:112px; 

height:336px; 

} 



.firmenloginseite .firmenbuttonbutton{ 

background-color:var(--blau1); 

heigth:28px; 

padding:2.8px; 

margin-bottom:4.2px; 

display:flex; 

justify-content:center; 

cursor:pointer; 

} 



.firmenloginseite .firmenbuttonbutton h2{ 

width:initial; 

padding:0px; 

color:white; 

} 



.firmenloginseite .firmenbuttonbutton.aktiv{ 

background-color:var(--blau110); 



} 



.firmenloginseite .firmenbuttonbutton.aktiv h2{ 

color:var(--textschwarz); 

} 



.firmenloginseite .firmenbuttonbutton.aktiv h2::after{ 

content: ""; 

position:relative; 

display: block; 

height: 0px; 

background-color: rgba(219,14,33,1); 

border-bottom: solid 0.14px rgba(219,14,33,1); 

} 



.firmenloginseite .hellblau, .administratorbereich .hellblau{ 

background-color:var(--blau120); 

} 



.firmenloginseite .dunkelblau, .administratorbereich .dunkelblau{ 

background-color:var(--blau140); 

} 



.firmenloginseite .drueckdinger{ 

display: flex; 

flex-direction: column; 

width: 40%; 

margin-top:28px; 

margin-left:-70px; 

} 



.firmenloginseite .iconbutton{ 

display:block; 

width:9%; 

heigth:9%; 

} 



.firmenloginseite .kaufbuttons{ 

display: flex; 

flex-wrap:wrap; 

width:40%; 

justify-content: center; 

margin-top:28px; 

position:relative; 

padding:14px; 

cursor:pointer; 

} 



.firmenloginseite .kaufbuttons .kleingedrucktes{ 

font-size:14px; 

font-family:Roboto-light; 

margin: 0px auto; 

} 



.firmenloginseite .kaufbuttons span:first-of-type { 

width:80%; 

margin: 0px auto; 

text-align: center; 

} 



.firmenloginseite .annehmen.kaufbuttons{ 

background-color:var(--blau1); 

} 



.firmenloginseite .annehmen.kaufbuttons{ 

color:white; 

} 



.firmenloginseite .positivbuttontext{ 

color: white; 

} 



.firmenloginseite .buttonmehr{ 

position: absolute; 

right: 14px; 

top: 14px; 

} 



.firmenloginseite .annehmen.kaufbuttons .iconbutton{ 

background-image:url('../kleinbilder/icon_gut_check.png'); 

background-repeat: no-repeat; 

width:112px; 

height:112px; 

position:absolute; 

top:-35px; 

left:-21px; 

background-size: 100%; 

} 



.firmenloginseite .ablehnen.kaufbuttons.buttonteil, .loginseite .ablehnen.kaufbuttons.buttonteil { 

flex-direction: column; 

} 



.firmenloginseite .ablehnen.kaufbuttons .iconbutton, .loginseite .ablehnen.kaufbuttons .iconbutton{ 

border:solid 0.28px; 

border-radius:50%; 

text-align:center; 

height: 28px; 

width: 28px; 

font-size: 1.2em; 

margin: 0px auto; 

} 



.firmenloginseite .guthabenkasten{ 

background-color: var(--blau1); 

padding: 2.8px; 

margin-bottom: 4.2px; 

display: flex; 

cursor: pointer; 

flex-direction: column; 

margin-top: 42px; 

margin-bottom: 42px; 

padding:16.8px 0px 16.8px 0px; 

} 



.firmenloginseite .guthabenkasten p, .firmenloginseite .guthabenkasten h2{ 

color:white; 

margin:5.6px auto; 

text-align:center; 

} 





.firmenloginseite .tabellentitel, .administratorbereich .tabellentitel{ 

display: flex; 

align-items: baseline; 

position: -webkit-sticky; 

position:sticky; 

top: 0px; 

background-color: white; 

z-index: 2; 

width: 1344px; 

} 



.firmenloginseite .tabellentitel .auswahlbutton, .administratorbereich .tabellentitel .auswahlbutton{ 

margin-left:70px; 

color:white; 

background-color:var(--blau1); 

cursor:pointer; 

padding:21px 14px; 

} 



.administratorbereich .bearbeitenbutton, .firmenbearbeitungsformular .bearbeitenbutton{ 

margin-left:1.4px; 

color:white; 

background-color:var(--blau1); 

cursor:pointer; 

padding:7px 14px 7px 7px; 

background-image: url('../kleinbilder/icon_pfeilrund_rechts.png'); 

background-repeat: no-repeat; 

background-position: 97% center; 

background-size: 8%; 

margin-bottom: 1.4px; 

} 



.firmenbearbeitungsformular .bearbeitenbutton{ 

width:252px; 

margin-left:966px; 

} 



.firmenbearbeitungsformular{ 

background-color:var(--blau120); 

border:solid 0.28px; 

border-color:var(--blau1); 

margin-bottom:56px; 

} 



.firmenbearbeitungsformular h1{ 

margin-left:28px; 

} 



.firmenformularfeld{ 

display:flex; 

padding:14px 0px; 

} 



.firmenformularfeld label{ 

min-width:224px; 

padding-left:28px; 

} 



.firmenformularfeld textarea{ 

width:75%; 

} 



.firmenformularfeld label::after{ 

content:":"; 

} 



.partnerbody .formularinputs { 

margin-bottom: 14px; 

display: flex; 

justify-content: flex-start; 

width: 100%; 

} 



.partnerbody .formularinputfeld { 

width: 60%; 

} 



.partnerbody .inputvortext { 

display: block; 

width: 30%; 

text-align: right; 

margin-right:4%; 

} 



.partnerbody .custom-checkbox { 

display: flex; 

align-items: baseline; 

justify-content: space-between; 

width: 60%; 

} 



.partnerbody .error .custom-checkbox-decker{ 

border-color:var(--rotgut); 

} 



.partnerbody button { 

width: 350px; 

background-size: 4%; 

background-position: 95% center; 

padding-top: 5.6px; 

position:absolute; 

bottom:70px; 

right:42px; 

} 



#passwortzurueck .formularinputs { 

display: flex; 

align-items: center; 

} 



#passwortzurueck .inputvortext { 

min-width: 20%; 

} 



#passwortzurueck input { 

width: 50%; 

} 



#passwortzurueck .formularfelder{ 

padding: 28px 0px 56px 56px; 

} 



#pwsender { 

position: relative; 

padding-top: 4.2px; 

cursor: pointer; 

width: 182px; 

background-size: 11.5%; 

top: -84px; 

left: 56px; 

} 



.displaybutton { 

left: 56px; 

color: white; 

position: relative; 

top: 0px; 

} 



#allesanzeigen2{ 

color:var(--rotgut); 

} 



.profilzeile { 

display: flex; 

align-items: baseline; 

flex-wrap: wrap; 

} 



.profilzeile #passwortzurueck { 

width: 100%; 

flex-shrink: 0; 

} 



.profilzeile h2 { 

margin-right: 14px; 

} 



.profilzeile #passwortzurueck .formularfelder { 

padding: 28px 0px 56px 7px; 

} 



.profilzeile #passwortzurueck .inputvortext { 

min-width: 30%; 

} 



.profilzeile #passwortzurueck input { 

width: 40%; 

} 



.tabellenzeile.partnerbody { 

margin-top: -350px; 

} 



.bewertungszeile{ 

display:flex; 

position:relative; 

height:56px; 

} 



.notenbeschriftung{ 

min-width:350px; 

z-index:0; 

} 



#bewertungsformular { 

display: flex; 

align-items: baseline; 

} 



#linksspalte { 

width: 50%; 

} 



.formularspalten { 

flex-shrink: 0; 

} 



#rechtsspalte { 

width: 45%; 

margin-left: 28px; 

} 



#bewertungstext { 

width:100%; 

height:70px; 

background-color:var(--blau110); 

} 



#bewertungstitel { 

width:100%; 

height:28px; 

background-color:var(--blau110); 

margin-bottom:14px; 

} 



.bewertungsbutton { 

width: 50%; 

background-size: 6%; 

margin-left: 50%; 

background-position-x: 95%; 

font-size:1em; 

font-family:Roboto; 

height:1.2em; 

padding-top:0.1em; 

} 



.bewertungstabellen .bewerterinfos { 

display: flex; 

font-size: 1em; 

padding: 14px 0px; 

margin-right: 56px; 

} 



.bewertungstabellen .ratingkasten { 

display: flex; 

align-items: center; 

margin: 14px 0px 0px 0px; 

position: relative; 

flex-shrink: 0; 

} 



.bewertungstabellen .bewertungswidget { 

padding: 28px 28px 28px 28px; 

border: 0px none; 

display: flex; 

flex-direction: row; 

align-items: center; 

width:100%; 

} 



.bewertungstabellen .ratingkasten.einzelner{ 

width:25%; 

} 



.notenzeile{ 

width:100%; 

display:flex; 

align-items:baseline; 

} 



.notenzeile .sterne{ 

flex-shrink:0; 

} 



.kriterienbeschrieb { 

min-width: 40%; 

} 



.bewertungstabellen .bewertungstitelkasten .sterne{ 

margin:0px 0px 14px 14px; 

width:30%; 

} 





.bewertungstabellen .bewertungsdatum{ 

margin-top:28px; 

font-size:11.2px; 

} 



#umseitenschalteriphone, .guthabenkasten.iphone{ 

display:none; 

} 



.landingpage .step2 .formularfelder { 

margin-top: 0px; 

} 



.zusammenfassungszelle.offertenanzeige { 

width: 100%; 

} 



.bewerterbutton{ 

margin-top:-28px; 

width: 110%; 

font-size: 1em; 

background-size: 6%; 

display: flex; 

padding-top: 2.8px; 

background-position: 98% center; 

} 



#bewertungskundenanrede{ 

margin-top:84px; 

} 

/*Termine css*/ 
#terminesenden .bestellbutton{ 

width:100%; 

background-size:8%; 

} 

#termindirektzuweisen .bestellbutton { 
width: 110%; 
background-size: 6%; 
margin-left: -5%; 
background-position: 95% 10%; 
} 

.ablehnen{ 
cursor:pointer; 
} 

#terminesenden, #termindirektzuweisen{ 

position: fixed; 

top: 30vh; 

left: 560px; 

padding: 42px 28px 28px 28px; 

background-color: var(--blau1); 

z-index:12; 

} 

.firmenzuweisungsselect.direkt { 
margin-bottom: 5.6px; 
width: 99%; 
background-size: 6%; 
background-position: 97% center; 
} 

.weissknopf { 
width: 90%; 
height: 42px; 
background-color: #fff; 
display: flex; 
align-self: center; 
cursor:pointer; 
margin: 0px 0px 14px -23.8px; 
} 


.weissknopf p { 
margin: auto; 
text-align: center; 
padding: 2.8px 0px 0px 0px; 
} 


.absendeformular { 
display: flex; 
flex-direction: column; 
justify-content: space-between; 
} 

.textzutermine { 
height: 4em; 
width: 10em; 
margin-right: 0.2em; 
} 

.termintextformularfeld { 
width: 100%; 
display: flex; 
align-items: center; 
margin-bottom:0.2em; 
justify-content:space-between; 
} 

.datumeingabe { 
width: 6em; 
} 

.zeiteingabe { 
width: 3em; 
} 

.termineingabe{ 
margin:0px 0.2em; 
} 

#datumbutton{ 
cursor:pointer; 
} 

/*2.etappe*/ 

#tableframe.aussenrum.woche { 
width: 65%; 
position: absolute; 
top: 98px; 
left: 420px; 
display: flex; 
justify-content: space-between; 
} 

.kolonne.wochentag { 
display: flex; 
flex-direction: column; 
justify-content: space-evenly; 
} 

.kolonne.wochentag h2 { 
margin: auto; 
} 

.freietermine.anzahl { 
text-align: center; 
color: rgba(255,255,255,1); 
} 

.freietermine { 
padding: 7px 0px; 
cursor: pointer; 
color: rgba(255,255,255,1); 
} 

.tageszeit { 
margin: 14px 14px 14px 0px; 
} 

.abend { 
background-color: var(--blau1); 
} 

.vormittag { 
background-color: var(--blau1); 
} 

.nachmittag { 
background-color: var(--blau1); 
} 

#nulltag .tageszeit { 
background-color: initial; 
} 

#nulltag { 
margin: 0px 14px 0px 0px; 
} 

.kleineranzeigen { 
font-size: 0.6em; 
display: flex; 
} 

.wochentagtitel { 
margin: 0px 14px 0px 0px; 
} 

.nullfeld { 
background-color: rgba(200,200,200,0.8); 
color: rgba(150,150,150,0.8); 
} 

.nullfeld .anzahl { 
color: rgba(150,150,150,0.8); 
cursor:initial; 
} 

.firmenloginseite.kauftermineanzeige .allesgezeigt { 
display: flex; 
flex-wrap: initial; 
padding-top: 112px; 
} 

.firmenloginseite.kauftermineanzeige .drueckdinger { 
display: flex; 
flex-direction: column; 
width: initial; 
margin-top: 28px; 
margin-left: initial; 
} 

.kauftermineanzeige .zusammenfassungszelle.offertenanzeige { 
width: initial; 
} 

.firmenloginseite.kauftermineanzeige .zusammenfassungszelle { 
width: initial; 
margin-right: initial; 
} 

.firmenloginseite.kauftermineanzeige .branche { 
width: initial; 
} 

.firmenloginseite.kauftermineanzeige .kaufbuttons { 
display: flex; 
flex-wrap: wrap; 
width: initial; 
justify-content: center; 
margin-top: 28px; 
position: relative; 
padding: 14px; 
cursor: pointer; 
} 

.zeit::before { 
content: "um "; 
} 

#schliessbutton{ 
border: solid 0.28px; 
border-radius: 50%; 
padding-top:1.68px; 
text-align: center; 
height: 26.32px; 
width: 28px; 
font-size: 1.2em; 
margin: -28px 0px 0px 80%; 
cursor:pointer; 
} 

.besichtigungwichtig { 
color: var(--rotgut); 
} 

.firmenbuttonbutton .menuicon { 
width: 20%; 
display: flex; 
height: 56px; 
margin-left: -28px; 
margin-right: 28px; 
} 

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

.rundex { 
border: var(--textschwarz) solid 1px; 
display: inline-block; 
width: 1em; 
height: 1em; 
text-align: center; 
position: relative; 
top: -0.1em; 
border-radius: 50%; 
} 

.terminsammler h3{ 
font-size:0.9em; 
} 

.anrisstext { 
clear: both; 
width: 1288px; 
padding: 0px 56px; 
font-family: Roboto; 
font-weight: bold !important; 
font-size: 1.2em !important; 
} 

.unteranrisstext { 
clear: both; 
width: 1288px; 
padding: 0px 56px; 
font-family: Roboto; 
font-weight: bold !important; 
} 

.widgetblocktitel { 
margin-top: -56px; 
} 
.region1.region{ 
fill:#B5DBC6; 
stroke:#343434; 
stroke-width:0.4893; 
stroke-linecap:round; 
stroke-linejoin:round; 
} 

.region2.region{ 
fill:#AAD2A1; 
stroke:#343434; 
stroke-width:0.4893; 
stroke-linecap:round; 
stroke-linejoin:round; 
} 

.region3.region{ 
fill:#D6DF79; 
stroke:#343434; 
stroke-width:0.4893; 
stroke-linecap:round; 
stroke-linejoin:round; 
} 

.region4.region{ 
fill:#D9D3E8; 
stroke:#343434; 
stroke-width:0.4893; 
stroke-linecap:round; 
stroke-linejoin:round; 
} 

.region5.region{ 
fill:#F7C5DA; 
stroke:#343434; 
stroke-width:0.4893; 
stroke-linecap:round; 
stroke-linejoin:round; 
} 

.region6.region{ 
fill:#F5C48F; 
stroke:#343434; 
stroke-width:0.4893; 
stroke-linecap:round; 
stroke-linejoin:round; 
} 

.region7.region{ 
fill:#F6C7BB; 
stroke:#343434; 
stroke-width:0.4893; 
stroke-linecap:round; 
stroke-linejoin:round; 
} 

.region8.region{ 
fill:#C5E2DD; 
stroke:#343434; 
stroke-width:0.4893; 
stroke-linecap:round; 
stroke-linejoin:round; 
} 

.region9.region{ 
fill:#CBDAEF; 
stroke:#343434; 
stroke-width:0.4893; 
stroke-linecap:round; 
stroke-linejoin:round; 
} 

#schweizerkarte .region:hover{ 
fill:var(--blau160) !important; 
} 

.region{ 
fill:rgba(210,210,210,1) !important; 
} 

.region.gewaehlt{ 
fill:var(--blau1) !important; 
} 



.huelle{ 
fill:none; 
stroke:rgba(255,255,255,1); 
stroke-width:6; 
stroke-miterlimit:10; 
} 

.huellegewaehlt{ 
stroke:rgba(255,255,255,1); 
} 

.gewaesserstil{ 
fill:#B0DDE8; 
stroke:#010202; 
stroke-width:0.1382; 
} 



.namen{ 
font-family:'Roboto'; 
font-size:30px; 
fill:rgba(180,180,180,1); 
} 

.namengewaehlt{ 
fill:white; 
} 

#svgkarte { 
width: 100%; 
} 

#schweizerkarte{ 
width:560px; 
background-color: rgba(193,226,242,1); 
height:420px; 
overflow:hidden; 
display:block; 
border-radius:28px; 
} 

.regionenmodell { 
align-items: flex-start; 
} 

.regionenformular { 
display: flex; 
min-width: 80%; 
} 

#regionenfelder { 
display: block; 
margin: 42px 0px 0px 14px; 
} 

.regionenfeld { 
display: flex; 
align-items: center; 
margin-bottom: 7px; 
font-size:0.8em; 
} 

.kantonsbezeichnungen { 
margin-right: 14px; 
} 

.wahlbox{ 
display:block; 
width:28px; 
height:28px; 
border:solid 1.4px var(--blau1); 
background-color:rgba(255,255,255,1); 
margin-top: -7px; 
} 

.regfeldgewaehlt .wahlbox{ 
background-color:var(--blau1); 
} 

.regfeldgewaehlt .wahlbox::after, .regfeldgewaehlt .wahlbox::after{ 
content: " "; 
width: 42px; 
height: 42px; 
display: block; 
position: relative; 
top: -11.2px; 
left:-1.4px; 
background-image: url('../kleinbilder/icon_gut_check.png'); 
background-size: 100%; 
background-repeat: no-repeat; 
}

/*Umzugskosten*/ 

#umzugskostenrechner { 
width: 840px; 
position: relative; 
display: flex; 
flex-direction: column; 
background-color: var(--blau120); 
border-radius: 28px; 
margin: 28px auto; 
} 

#rechnerelemente { 
display: flex; 
position: relative; 
width: 100%; 
margin-bottom: 28px; 
} 
.fueregeklappt.gescrollt #formularfelder { 
background-color: rgba(101, 168, 217, 1); 
height: 420px; 
top: 70px; 
flex-direction: column; 
justify-content: center; 
border-radius:28px; 
left:140px; 
} 

.fueregeklappt.gescrollt .formularinputs, .fueregeklappt.gescrollt #bestellbutton { 
margin: 28px auto 0px auto; 
left: initial; 
} 

.fueregeklappt.step1.gescrollt .formularfelder h2 { 
color: rgba(255,255,255,1) !important; 
left: 0px; 
text-align: center; 
width: 100%; 
} 

.home .step1 .formularfelder { 
transition: width 1s, height 1s, border-radius 1s, left 1s; 
} 

.step1.gescrollt .formularfelder{ 
height: 58.1px; 
left:0px; 
}

#zusatzbestellen { 
text-align: center; 
} 

#zusatzbestellen.schieberbuttonanzeigen{ 
display:block; 
} 

#gratisbestellen { 
margin: 0px auto; 
padding-top: 5.6px; 
} 

.itzischda { 
display: block !important; 
} 

#bestellbody.zuesatzchruez::before { 
content: ""; 
display: block; 
position: absolute; 
width: 14px; 
height: 2.8px; 
background-color: white; 
left: 630px; 
top: 91px; 
z-index: 1000000; 
transform: rotate(-45deg); 
} 

#bestellbody.zuesatzchruez form::before { 
content: ""; 
display: block; 
position: absolute; 
width: 14px; 
height: 2.8px; 
background-color: white; 
left: 630px; 
top: 91px; 
z-index: 1000000; 
transform: rotate(45deg); 
} 

/*suchformular*/ 

.waagrechtformular { 
display: flex; 
align-items: center; 
width: 630px; 
padding: 0.5em; 
background-color: var(--blau140); 
position: relative; 
align-self: center; 
margin-left: 8em; 
} 

.waagrechtformular button { 
padding: initial; 
padding-left: 14px; 
display: flex; 
width: 12em; 
position: relative; 
background-position: 95% 43%; 
background-size: 0.8em; 
font-size: 18.2px; 
align-items: center; 
flex-shrink: 0; 
margin:initial; 
font-weight: normal; 
} 

.waagrechtformular select { 
width: 9em !important; 
background-position: 96% 58%; 
background-size: 0.9em; 
font-size: 0.9em; 
flex-shrink: 0; 
margin-right: 0.5em; 
} 

#suchstring { 
margin-right: 0.5em; 
} 

.unsichtbar { 
display: none !important; 
} 

.unsichtbar { 
visibility: hidden !important; 
}

#umzugskostenrechner { 
width: 840px; 
position:relative; 
display: flex; 
flex-direction: column; 
} 

.gemittelt{ 
text-align:center; 
} 

#rechnerelemente{ 
display: flex; 
position:relative; 
width:100% 
} 

#eingabeauswahl { 
text-align: center; 
} 

.preisanzeige{ 
position:relative; 
width:90%; 
text-align:right; 
} 

#eingabeelemente { 
position: relative; 
width: 50%; 
} 


.rechenschieber{ 
position:relative; 
width:100%; 
height:70px; 
} 

.schieberumfeld { 
position: absolute; 
left: 10%; 
top: 42px; 
width: 80%; 
height: 19.6px; 
} 

.nichtwahl { 
-webkit-touch-callout: none; /* iOS Safari */ 
-webkit-user-select: none; /* Safari */ 
-khtml-user-select: none; /* Konqueror HTML */ 
-moz-user-select: none; /* Old versions of Firefox */ 
-ms-user-select: none; /* Internet Explorer/Edge */ 
user-select: none; /* Non-prefixed version, currently 
supported by Chrome, Opera and Firefox */ 
} 

.schieberschiene { 
position: absolute; 
width: calc(100%); 
height: 10%; 
top: 50%; 
background-color: grey; 
margin: auto; 
} 

.schiebergriff { 
width: 5.6%; 
position: absolute; 
height: 100%; 
border: 1px solid; 
background-color: rgba(255,255,255.1); 
border-radius: 50%; 
} 

.beruehrt .schieberschatten{ 
background-color: red; 
} 

.schieberschatten{ 
z-index:-1; 
position:absolute; 
width:160%; 
height:160%; 
top:-30%; 
left:-30%; 
border-radius:50%; 
} 

.positionsschiene{ 
background-color: red; 
position:absolute; 
left:0px; 
top:0px; 
width:0%; 
height:100%; 
background-color:red; 
} 

#ausgabeelemente { 
position: relative; 
width: 50%; 
} 

#ausgabeanzeige { 
width: 100%; 
text-align: center; 
} 

.zusatzausgabeanzeigen { 
display: flex; 
width: 80%; 
justify-content: space-between; 
margin: 0px 0px 0px 10%; 
} 

.zusatzausgabeverbergen{ 
display:none; 
} 

#zusatzbestellen { 
display: block; 
text-align: center; 
} 

#gratisbestellen { 
margin: 0px auto; 
padding-top: 11.2px; 
}


.mehrfachcheck {
flex-wrap: wrap;
width: 80%;
}

.mehrfachcheck.checkfeld label {
width: 27%;
justify-content: flex-start;
align-items: center;
}

#textboxumzugreinigung .umzugsangaben label{
width:45%;
}

#textboxumzugreinigung .umzugsangaben .inputvortext{
text-align:left;
}

.mehrfachcheck.checkfeld label:first-of-type{
width:100%;
text-align: left;
}

.mehrfachcheck .inputvortext {
display: block;
min-width: 100%;
text-align: right;
margin-right: 2%;
}

.felder2 {
width: 50%;
}

.felder2 .custom-radiobox {
display: flex;align-items: center;justify-content: flex-end;width: 22%;
}

.felder2 .custom-radiobox .inputvortext{
text-align: right;
margin-right: 4%;
}

.belobigung{
width: 180%;
}

.ounullabstand.kleiner {
margin-top: 0px;
margin-bottom: 0px;
font-size: 0.8em;
}

#spezialpreisfestlegen {
position: fixed;
top: 30vh;
left: 576px;
padding: 14.4px 28.8px 28.8px 28.8px;
background-color: var(--blau1);
z-index: 12;
}

#spezialpreisneupreis {
margin-top: 14.4px;
}

#spezialpreisbutton {
width: 100%;
background-size: 8%;
}

#spezialpreisfestlegen .iconbutton.buttonteil {
position: absolute;
top: 0px;
left: 93%;
height: 1em;
width: 1em;
border: solid 0.05em black;
display: flex;
align-items: baseline;
justify-content: center;
border-radius: 50%;
z-index:1;
cursor:pointer;
}

#automatischzuweiser {
width: 8%;
position: relative;
left: 2.5%;
margin-right: -8%;
display: flex;
flex-direction: column;
align-items: center;
}

#automatischtext {
padding: 0px;
margin: 0px;
position: relative;
top: -1.5em;
text-align: center;
}

#automatischknopf {
display: block;
padding: 0.2em;
width: 80%;
height: 1.8em;
position: relative;
margin-top: -1.2em;
border-radius: 150px;
box-shadow: 0px 0px 0.1em 0.10em rgba(255,255,255,1) inset;
border: solid 0.05em rgba(180, 180, 180, 1);
}

.eingeschaltet{
background-color: var(--blau1);
}

.ausgeschaltet{
background-color: rgba(236, 236, 236, 1);
}

#automatischschieber{
display:block;
width:1.8em;
height:1.8em;
border: solid 0.08em rgba(41, 112, 163, 1);;
position: relative;
transition: left 1s;
border-radius:50%;
top:-0.08em;
background: linear-gradient(217deg, rgba(0,196,255,1) 0%, rgba(48,137,201,1) 80%, rgba(2,0,36,1) 100%);
}

.ausgeschaltet #automatischschieber{
left:0px;
}

.eingeschaltet #automatischschieber{
left:58%;
}

#anspan, #auspan{
font-family: Roboto, sans-serif;
position:absolute;
top:28%;
}

#anspan{
left:20%;
color:white;
}

#auspan{
left:60%;
color:var(--blau1);
}

#partnerwerden .regionenformular {
display: flex;
min-width: 80%;
flex-wrap: wrap;
}

#regionenvortext {
width: 100%;
flex-shrink: 0;
}

.firmenloginseite .drueckdinger {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 28px;
margin-left: 0%;
align-items: center;
}

.firmenloginseite .gekauft .service, .firmenloginseite .erledigt .vorschauservice {
width: 100%;
margin-top:1em;
}

.firmenloginseite .branche {
width: initial;
}

.bewerterbutton{
margin-top:initial;
margin-bottom:28px;
}

.rotgross {
left: -30%;
top: 1em;
position: relative;
text-align: left;
}