@font-face {
font-family: "MyBoto-Medium";
src: url(//systal.de/fonts/Roboto-Medium.woff2) format("woff2"),
url(//systal.de/fonts/Roboto-Medium.woff) format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
} @font-face {
font-family: "MyBoto-Light";
src: url(//systal.de/fonts/Roboto-Light.woff2) format("woff2"),
url(//systal.de/fonts/Roboto-Light.woff) format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
} @font-face {
font-family: "MyBoto-Regular";
src: url(//systal.de/fonts/Roboto-Regular.woff2) format("woff2"),
url(//systal.de/fonts/Roboto-Regular.woff) format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
} @font-face {
font-family: "MyBoto-Bold";
src: url(//systal.de/fonts/Roboto-Bold.woff2) format("woff2"),
url(//systal.de/fonts/Roboto-Bold.woff) format("woff");
font-weight: 800;
font-style: normal;
font-display: swap;
}
#menu-main-menu a {
font-family: "MyBoto-Medium" !important;
}
.sliderTitel, .footerTitel {
font-family: "MyBoto-Medium" !important;
}
.sliderSubtitel {
font-family: "MyBoto-Regular" !important;
}
#zeile1, #zeile1 * { opacity:1 !important; transform:none !important; }
* { animation:none !important; transition:none !important; } #zeile1 {
background-image: url(//systal.de/wp-content/uploads/2025/09/paralax_5.webp);
background-size: cover;
background-position: center;
}
a:focus,
button:focus,
input:focus,
textarea:focus {
outline: 3px solid #005fcc; outline-offset: 2px;
}
.minimal-light .esg-navigationbutton {
color: #000 !important;
padding: 10px 30px !important;
border: 1px solid #000 !important;
line-height: 40px !important;
font-size: 20px !important;
margin-top: 25px !important;
}
#Subheader .title { font-family: 'Systal-Regular' !important; }
.sliderTitel {
font-family: 'Systal-Regular';
font-size: 50px !important;
line-height: 60px;
font-style: normal;
}
.sliderSubtitel {
font-family: 'Systal-Regular';
font-size: 35px !important;
line-height: 45px;
font-style: normal;
border-bottom: 2px solid white;
}
.linkWhite {
color:white !important;
text-decoration: underline; 
text-underline-offset: 12px !important; }
.linkBlue {
color:#083754 !important;
text-decoration: underline; 
text-underline-offset: 12px !important; }
.footerTitel {
color: white;
font-family: 'Systal-Bold';
font-size: 25px !important;
letter-spacing: 3px !important;
line-height: 35px !important;
}
#mfn-footer-template p {
color:white !important;
font-family: 'MyBoto-Regular';
font-size: 18px !important;
line-height: 28px !important;
}
.seitenabstand {
padding: 0px 5% !important;
}
.produktZeile {
background-color:#F5F5F5;
padding: 10px;	
} #Top_bar a.responsive-menu-toggle i {
font-size: 36px !important;
line-height: 46px !important;
color: white !important;
}
.mobile-header-mini #Top_bar a.responsive-menu-toggle {
right: 120px;
} @media only screen and (max-width: 600px) {
.logo-mobile.scale-with-grid  { max-height:50px !important; }
}
@media only screen and (max-width: 768px) {
.produktZeile {
margin-bottom: 45px !important;
}
}
@media only screen and (max-width: 800px) {
#zeile1 {
background-image: unset;
}
}
@media only screen and (max-width: 767px) {
.mobile-header-mini #Top_bar .logo {
width: 50%;
}
.mobile-header-mini #Top_bar { padding-bottom: 10px !important; }
.mfn-rev-slider sr7-content { left: 0px !important; }
.content_wrapper .section_wrapper, .container, .four.columns .widget-area {
max-width: 700px !important;
padding-left: 33px;
padding-right: 33px;
}
.sliderTitel {
font-size: 30px !important;
line-height: 40px;
}
.sliderSubtitel {
font-size: 30px !important;
}
.inhaltText {
font-size: 22px !important;
line-height: 34px !important;
} 
h1 {
font-size: 45px !important;
line-height: 52px !important;
}	
h2 {
font-size: 38px;
line-height: 45px;	
}
h3 {
font-size: 30px;
line-height: 35px;	
}	
} 
@media only screen and (max-width: 500px) {
.sliderTitel {
font-size: 25px !important;
line-height: 35px;
}
.sliderSubtitel {
font-size: 25px !important;
}
} @media only screen and (max-width: 1900px) { .half1900 { width:50% !important; } }
@media only screen and (max-width: 1890px) { .half1890 { width:50% !important; } }
@media only screen and (max-width: 1880px) { .half1880 { width:50% !important; } }
@media only screen and (max-width: 1870px) { .half1870 { width:50% !important; } }
@media only screen and (max-width: 1860px) { .half1860 { width:50% !important; } }
@media only screen and (max-width: 1850px) { .half1850 { width:50% !important; } }
@media only screen and (max-width: 1840px) { .half1840 { width:50% !important; } }
@media only screen and (max-width: 1830px) { .half1830 { width:50% !important; } }
@media only screen and (max-width: 1820px) { .half1820 { width:50% !important; } }
@media only screen and (max-width: 1810px) { .half1810 { width:50% !important; } }
@media only screen and (max-width: 1800px) { .half1800 { width:50% !important; } }
@media only screen and (max-width: 1790px) { .half1790 { width:50% !important; } }
@media only screen and (max-width: 1780px) { .half1780 { width:50% !important; } }
@media only screen and (max-width: 1770px) { .half1770 { width:50% !important; } }
@media only screen and (max-width: 1760px) { .half1760 { width:50% !important; } }
@media only screen and (max-width: 1750px) { .half1750 { width:50% !important; } }
@media only screen and (max-width: 1740px) { .half1740 { width:50% !important; } }
@media only screen and (max-width: 1730px) { .half1730 { width:50% !important; } }
@media only screen and (max-width: 1720px) { .half1720 { width:50% !important; } }
@media only screen and (max-width: 1710px) { .half1710 { width:50% !important; } }
@media only screen and (max-width: 1700px) { .half1700 { width:50% !important; } }
@media only screen and (max-width: 1690px) { .half1690 { width:50% !important; } }
@media only screen and (max-width: 1680px) { .half1680 { width:50% !important; } }
@media only screen and (max-width: 1670px) { .half1670 { width:50% !important; } }
@media only screen and (max-width: 1660px) { .half1660 { width:50% !important; } }
@media only screen and (max-width: 1650px) { .half1650 { width:50% !important; } }
@media only screen and (max-width: 1640px) { .half1640 { width:50% !important; } }
@media only screen and (max-width: 1630px) { .half1630 { width:50% !important; } }
@media only screen and (max-width: 1620px) { .half1620 { width:50% !important; } }
@media only screen and (max-width: 1610px) { .half1610 { width:50% !important; } }
@media only screen and (max-width: 1600px) { .half1600 { width:50% !important; } }
@media only screen and (max-width: 1590px) { .half1590 { width:50% !important; } }
@media only screen and (max-width: 1580px) { .half1580 { width:50% !important; } }
@media only screen and (max-width: 1570px) { .half1570 { width:50% !important; } }
@media only screen and (max-width: 1560px) { .half1560 { width:50% !important; } }
@media only screen and (max-width: 1550px) { .half1550 { width:50% !important; } }
@media only screen and (max-width: 1540px) { .half1540 { width:50% !important; } }
@media only screen and (max-width: 1530px) { .half1530 { width:50% !important; } }
@media only screen and (max-width: 1520px) { .half1520 { width:50% !important; } }
@media only screen and (max-width: 1510px) { .half1510 { width:50% !important; } }
@media only screen and (max-width: 1500px) { .half1500 { width:50% !important; } }
@media only screen and (max-width: 1490px) { .half1490 { width:50% !important; } }
@media only screen and (max-width: 1480px) { .half1480 { width:50% !important; } }
@media only screen and (max-width: 1470px) { .half1470 { width:50% !important; } }
@media only screen and (max-width: 1460px) { .half1460 { width:50% !important; } }
@media only screen and (max-width: 1450px) { .half1450 { width:50% !important; } }
@media only screen and (max-width: 1440px) { .half1440 { width:50% !important; } }
@media only screen and (max-width: 1430px) { .half1430 { width:50% !important; } }
@media only screen and (max-width: 1420px) { .half1420 { width:50% !important; } }
@media only screen and (max-width: 1410px) { .half1410 { width:50% !important; } }
@media only screen and (max-width: 1400px) { .half1400 { width:50% !important; } }
@media only screen and (max-width: 1390px) { .half1390 { width:50% !important; } }
@media only screen and (max-width: 1380px) { .half1380 { width:50% !important; } }
@media only screen and (max-width: 1370px) { .half1370 { width:50% !important; } }
@media only screen and (max-width: 1360px) { .half1360 { width:50% !important; } }
@media only screen and (max-width: 1350px) { .half1350 { width:50% !important; } }
@media only screen and (max-width: 1340px) { .half1340 { width:50% !important; } }
@media only screen and (max-width: 1330px) { .half1330 { width:50% !important; } }
@media only screen and (max-width: 1320px) { .half1320 { width:50% !important; } }
@media only screen and (max-width: 1310px) { .half1310 { width:50% !important; } }
@media only screen and (max-width: 1300px) { .half1300 { width:50% !important; } }
@media only screen and (max-width: 1290px) { .half1290 { width:50% !important; } }
@media only screen and (max-width: 1280px) { .half1280 { width:50% !important; } }
@media only screen and (max-width: 1270px) { .half1270 { width:50% !important; } }
@media only screen and (max-width: 1260px) { .half1260 { width:50% !important; } }
@media only screen and (max-width: 1250px) { .half1250 { width:50% !important; } }
@media only screen and (max-width: 1240px) { .half1240 { width:50% !important; } }
@media only screen and (max-width: 1230px) { .half1230 { width:50% !important; } }
@media only screen and (max-width: 1220px) { .half1220 { width:50% !important; } }
@media only screen and (max-width: 1210px) { .half1210 { width:50% !important; } }
@media only screen and (max-width: 1200px) { .half1200 { width:50% !important; } }
@media only screen and (max-width: 1190px) { .half1190 { width:50% !important; } }
@media only screen and (max-width: 1180px) { .half1180 { width:50% !important; } }
@media only screen and (max-width: 1170px) { .half1170 { width:50% !important; } }
@media only screen and (max-width: 1160px) { .half1160 { width:50% !important; } }
@media only screen and (max-width: 1150px) { .half1150 { width:50% !important; } }
@media only screen and (max-width: 1140px) { .half1140 { width:50% !important; } }
@media only screen and (max-width: 1130px) { .half1130 { width:50% !important; } }
@media only screen and (max-width: 1120px) { .half1120 { width:50% !important; } }
@media only screen and (max-width: 1110px) { .half1110 { width:50% !important; } }
@media only screen and (max-width: 1100px) { .half1100 { width:50% !important; } }
@media only screen and (max-width: 1090px) { .half1090 { width:50% !important; } }
@media only screen and (max-width: 1080px) { .half1080 { width:50% !important; } }
@media only screen and (max-width: 1070px) { .half1070 { width:50% !important; } }
@media only screen and (max-width: 1060px) { .half1060 { width:50% !important; } }
@media only screen and (max-width: 1050px) { .half1050 { width:50% !important; } }
@media only screen and (max-width: 1040px) { .half1040 { width:50% !important; } }
@media only screen and (max-width: 1030px) { .half1030 { width:50% !important; } }
@media only screen and (max-width: 1020px) { .half1020 { width:50% !important; } }
@media only screen and (max-width: 1010px) { .half1010 { width:50% !important; } }
@media only screen and (max-width: 1000px) { .half1000 { width:50% !important; } }
@media only screen and (max-width: 950px) { .half950 { width:50% !important; } }
@media only screen and (max-width: 900px) { .half900 { width:50% !important; } }
@media only screen and (max-width: 880px) { .half880 { width:50% !important; } .pCenter { text-align:center !important; } }
@media only screen and (max-width: 700px) { .half700 { width:50% !important; } } @media only screen and (max-width: 1400px) { .full1400 { width:100% !important; } }
@media only screen and (max-width: 1390px) { .full1390 { width:100% !important; } }
@media only screen and (max-width: 1380px) { .full1380 { width:100% !important; } }
@media only screen and (max-width: 1370px) { .full1370 { width:100% !important; } }
@media only screen and (max-width: 1360px) { .full1360 { width:100% !important; } }
@media only screen and (max-width: 1350px) { .full1350 { width:100% !important; } }
@media only screen and (max-width: 1340px) { .full1340 { width:100% !important; } }
@media only screen and (max-width: 1330px) { .full1330 { width:100% !important; } }
@media only screen and (max-width: 1320px) { .full1320 { width:100% !important; } }
@media only screen and (max-width: 1310px) { .full1310 { width:100% !important; } }
@media only screen and (max-width: 1300px) { .full1300 { width:100% !important; } }
@media only screen and (max-width: 1290px) { .full1290 { width:100% !important; } }
@media only screen and (max-width: 1280px) { .full1280 { width:100% !important; } }
@media only screen and (max-width: 1270px) { .full1270 { width:100% !important; } }
@media only screen and (max-width: 1260px) { .full1260 { width:100% !important; } }
@media only screen and (max-width: 1250px) { .full1250 { width:100% !important; } }
@media only screen and (max-width: 1240px) { .full1240 { width:100% !important; } }
@media only screen and (max-width: 1230px) { .full1230 { width:100% !important; } }
@media only screen and (max-width: 1220px) { .full1220 { width:100% !important; } }
@media only screen and (max-width: 1210px) { .full1210 { width:100% !important; } }
@media only screen and (max-width: 1200px) { .full1200 { width:100% !important; } }
@media only screen and (max-width: 1190px) { .full1190 { width:100% !important; } }
@media only screen and (max-width: 1180px) { .full1180 { width:100% !important; } }
@media only screen and (max-width: 1170px) { .full1170 { width:100% !important; } }
@media only screen and (max-width: 1160px) { .full1160 { width:100% !important; } }
@media only screen and (max-width: 1150px) { .full1150 { width:100% !important; } }
@media only screen and (max-width: 1140px) { .full1140 { width:100% !important; } }
@media only screen and (max-width: 1130px) { .full1130 { width:100% !important; } }
@media only screen and (max-width: 1120px) { .full1120 { width:100% !important; } }
@media only screen and (max-width: 1110px) { .full1110 { width:100% !important; } }
@media only screen and (max-width: 1100px) { .full1100 { width:100% !important; } }
@media only screen and (max-width: 1090px) { .full1090 { width:100% !important; } }
@media only screen and (max-width: 1080px) { .full1080 { width:100% !important; } }
@media only screen and (max-width: 1070px) { .full1070 { width:100% !important; } }
@media only screen and (max-width: 1060px) { .full1060 { width:100% !important; } }
@media only screen and (max-width: 1050px) { .full1050 { width:100% !important; } }
@media only screen and (max-width: 1040px) { .full1040 { width:100% !important; } }
@media only screen and (max-width: 1030px) { .full1030 { width:100% !important; } }
@media only screen and (max-width: 1020px) { .full1020 { width:100% !important; } }
@media only screen and (max-width: 1010px) { .full1010 { width:100% !important; } }
@media only screen and (max-width: 1000px) { .full1000 { width:100% !important; } }
@media only screen and (max-width: 990px)  { .full990 { width:100% !important; } }
@media only screen and (max-width: 980px)  { .full980 { width:100% !important; } }
@media only screen and (max-width: 970px)  { .full970 { width:100% !important; } }
@media only screen and (max-width: 960px)  { .full960 { width:100% !important; } }
@media only screen and (max-width: 950px)  { .full950 { width:100% !important; } }
@media only screen and (max-width: 940px)  { .full940 { width:100% !important; } }
@media only screen and (max-width: 930px)  { .full930 { width:100% !important; } }
@media only screen and (max-width: 920px)  { .full920 { width:100% !important; } }
@media only screen and (max-width: 910px)  { .full910 { width:100% !important; } }
@media only screen and (max-width: 900px)  { .full900 { width:100% !important; } }
@media only screen and (max-width: 890px)  { .full890 { width:100% !important; } }
@media only screen and (max-width: 880px)  { .full880 { width:100% !important; } }
@media only screen and (max-width: 870px)  { .full870 { width:100% !important; } }
@media only screen and (max-width: 860px)  { .full860 { width:100% !important; } }
@media only screen and (max-width: 850px)  { .full850 { width:100% !important; } }
@media only screen and (max-width: 840px)  { .full840 { width:100% !important; } }
@media only screen and (max-width: 830px)  { .full830 { width:100% !important; } }
@media only screen and (max-width: 820px)  { .full820 { width:100% !important; } }
@media only screen and (max-width: 810px)  { .full810 { width:100% !important; } }
@media only screen and (max-width: 800px)  { .full800 { width:100% !important; } }
@media only screen and (max-width: 790px)  { .full790 { width:100% !important; } }
@media only screen and (max-width: 780px)  { .full780 { width:100% !important; } }
@media only screen and (max-width: 770px)  { .full770 { width:100% !important; } }
@media only screen and (max-width: 760px)  { .full760 { width:100% !important; } }
@media only screen and (max-width: 750px)  { .full750 { width:100% !important; } }
@media only screen and (max-width: 740px)  { .full740 { width:100% !important; } }
@media only screen and (max-width: 730px)  { .full730 { width:100% !important; } }
@media only screen and (max-width: 720px)  { .full720 { width:100% !important; } }
@media only screen and (max-width: 710px)  { .full710 { width:100% !important; } }
@media only screen and (max-width: 700px)  { .full700 { width:100% !important; } }