/* (c) 2020 by Michael Weigand stilmedien - Kommunikation & Werbung ------------------ stilmedien.de ----------------------------------------- mail@stilmedien.de --------------------------------- */ body { font-size: 1.6rem; font-family: 'Lato', sans-serif; line-height: 160%; color: #000000; margin: 0; padding: 0; font-weight: normal; } body, html{background: #003366;} /* allgemeine Überschriften*/ h1 { margin: 0 0 20px 0; color: #0056a1; font-size: 220%; line-height: 1; font-weight: 900; padding: 0; text-transform: uppercase; position: relative; } h1 a, h2 a { color: #0056a1 !important; text-decoration: none !important; } h2 { margin: 0 0 20px 0; color: #0056a1; font-size: 180%; line-height: 1; font-weight: 700; padding: 0; } h3 { margin: 0 0 10px 0; color: #23a370; font-size: 180%; line-height: 1; font-weight: 700; padding: 0; } h4 { margin: 0 0 10px 0; color: #000000; font-size: 140%; line-height: 1; font-weight: 700; padding: 0; } h1 strong, h2 strong{ font-weight: 500; } /* allgemeine links im text */ a:link, a:visited { text-decoration: underline; color: #0056a1; } a:hover, a:active { text-decoration: none; color: #000000; } /* Listen */ ul { list-style: square; } hr { border: none; background: #000; height: 1px; } td, div { font-size: 100%; vertical-align: top; } img { border: none; max-width: 100%; height: auto; } form { background: none; border: none; } .button, a.button { background-color: #0056a1; color: #FFFFFF; border: none; padding: 10px 15px; text-decoration: none; } .button:hover, a.button:hover, .button:focus { background-color: #000000; color: #FFFFFF; cursor: pointer; } .button.secondary{ background-color: #cccccc !important; color: #000000 !important; } .button.secondary:hover{ background-color: #000000 !important; color: #FFFFFF !important; } input, select, textarea, .inputbox { background: #BEB9A4; color: #686253; border: none; padding: 3px 5px; border-radius: 0; } ul.actions{display: none;} /* Weiterlesen-Link */ p.readmore a { padding: 10px 15px; background: #FFFFFF; color: #0056a1; border: 1px solid #0056a1; text-decoration: none; border-radius: 0; } p.readmore a:hover { background: #0056a1; color: #FFFFFF; } .item-separator { margin: 50px; height: 0; } .gmnoprint img { max-width: none; } .gmnoprint label { display: inline; width: auto; } .loader{background: #FFFFFF; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;} .stickyheader{width: 100%; background: #FFFFFF; z-index: 99 !important;} .is-sticky .header .logo{line-height: 70px;} .is-sticky .header .logo img{max-width: 100px;} .is-sticky .header .mainmenu ul li a{line-height: 70px;} .is-sticky .header .mainmenu ul ul{top: 70px;} #sticky-wrapper{height: 100px !important;} .header{padding: 0; background: #FFFFFF; position: relative; z-index: 50; border-bottom: 1px solid rgba(0,0,0,0.3);} .header *{transition: all 0.2s ease;} .header .logo{line-height: 100px;} .header .logo img{background: #FFFFFF; position: relative; z-index: 9; max-width: 180px; height: auto;} .header .mainmenu{position: relative;} .header .mainmenu ul {padding: 0; margin: 0; list-style: none; width: 100%; text-align: right;} .header .mainmenu ul li {display: inline-block; margin: 0; position: relative; border-right: 1px solid rgba(0,0,0,0.3);} .header .mainmenu ul li a {background: none; padding: 0 15px; margin: 0; color: #000000; text-transform: uppercase; text-decoration: none; font-weight: normal; line-height: 100px; text-align: center; font-size: 85%;} .header .mainmenu ul li:first-child{border-left: 1px solid rgba(0,0,0,0.3);} .header .mainmenu ul li a:hover, .header .mainmenu ul li.active a{color: #0056a1; background: rgba(0,0,0,0.15);} .header .mainmenu ul ul{position: absolute; top: 100px; left: -1px; background: #D9D9D9; padding: 0; margin: 0; text-align: left; opacity: 0; width: 200px; border-bottom: 1px solid #B2B2B2; display: none;} @media (min-width: 768px){ .header .mainmenu ul li:hover ul{display: block !important; opacity: 1 !important;} } .header .mainmenu ul ul li{margin: 0 !important; display: block; border-left: 1px solid rgba(0,0,0,0.3);} .header .mainmenu ul ul li a{width: 100% !important; font-size: 100% !important; color: #0056a1; padding: 10px 20px; margin: 0; line-height: 1 !important; white-space: nowrap; text-transform: uppercase; border: none !important; display: block; text-align: left; background: none !important; font-weight: normal !important;} .header .mainmenu ul ul li:hover a{background: #0056A1 !important; color: #FFFFFF;} .navigationpath{background: #0056a1;} .navigationpath .breadcrumb{background: none; padding: 30px 0; margin: 0; display: block;} .navigationpath .breadcrumb li:before{display: none; content: "";} .navigationpath .breadcrumb li{margin: 0;} .navigationpath .breadcrumb li a{color: #FFF; text-decoration: none;} .navigationpath .breadcrumb li span{color: #FFF; text-decoration: none;} .navigationpath .breadcrumb li span:after{content: "|"; padding: 0 10px;} .navigationpath .breadcrumb li:first-child span:after, .navigationpath .breadcrumb li:last-child span:after{display: none;} .navigationpath span.home{width: 60px; background: url(../images/icon_house.svg) left center no-repeat; background-size: 20px auto; display: block; text-indent: -9999px;} .content{min-height: 400px; overflow-x: hidden; width: 100% !important; background: #FFFFFF;} .content .sppb-row-container{max-width: 1170px; margin: 0 auto; padding: 0 15px;} .content .layout1{background: #0056a1;} .content .layout1 .title{background: #0056a1; color: #FFFFFF; text-decoration: none; padding: 10px; text-align: center; text-transform: uppercase;} .content .mainslider{position: relative;} .content .mainslider ul{border: none;} .content .mainslider li{width: 20%; position: relative; padding: 0; border: none; background: none;} .content .mainslider li a{height: 100%; display: block; padding: 50px 0;} .content .mainslider li img{max-width: 75%; margin: 0 auto; display: block; height: auto;} .content .mainslider .bs-prev, .content .mainslider .bs-next{position: absolute; top: 50%; left: -20px; width: 40px; height: 40px; background: url(../images/jcarousel_right.png) center center; background-size: cover; margin: -20px 0 0 0; display: block; z-index: 99; cursor: pointer;} .content .mainslider .bs-next{right: -20px; left: auto; background: url(../images/jcarousel_left.png) center center; background-size: cover;} .content .slick-carousel{position: relative;} .content .slick-carousel .item{position: relative; padding: 40px 0 0 0;} .content .slick-carousel .item .spot{position: absolute; left: 50%; top: 40px; width: 30px; height: 30px; border-radius: 100px; background: #0056a1; content: " "; display: block; border: 2px solid #FFF; margin: 0 0 0 -15px; z-index: 100;} .content .slick-carousel .item .spot:before{content: ''; position: relative; display: block; width: 300%; height: 300%; box-sizing: border-box; margin-left: -100%; margin-top: -100%; border-radius: 45px; background-color: #0056a1; animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; z-index: 99;} .content .slick-carousel .item .spot:after{content: ''; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: #003366; border-radius: 15px; animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite; z-index: 9;} .content .slick-carousel .item.active .spot{background: #23a370;} .content .slick-carousel .item.active .spot:before, .content .slick-carousel .item.active .spot:after{opacity: 0;} .content .slick-carousel .item .desc{position: absolute; left: 50%; top: 30px; transform: translate(-50%, -100%); background: #FFFFFF; color: #0056a1; font-weight: bold; text-transform: uppercase; z-index: 101;} .content .slick-carousel .item img{margin: 10px 0 0 0;} .content .slick-carousel .slick-items{position: relative;} .content .slick-carousel .slick-items:before{position: absolute; top: 40px; left: 0; width: 200px; height: 100%; background: url(../images/fadeout_left.png) center center; background-size: contain; display: block; content: " "; z-index: 99;} .content .slick-carousel .slick-items:after{position: absolute; top: 40px; right: 0; width: 200px; height: 100%; background: url(../images/fadeout_right.png) center center; background-size: contain; display: block; content: " "; z-index: 99;} .content .slick-carousel .slick-control .slick-arrow{position: absolute; top: 50%; margin: 10px 0 0 0; height: 60px; width: 40px; background: #0056a1 url(../images/arrow_left_white.svg) center center no-repeat; background-size: 40% auto; left: 0; border: none; text-indent: -9999px; z-index: 100;} .content .slick-carousel .slick-control .slick-arrow.slick-next{right: 0; left: auto; background: #0056a1 url(../images/arrow_right_white.svg) center center no-repeat; background-size: 40% auto;} .content .slick-header{position: relative;} .content .slick-header .item{position: relative; margin: 0;} .content .slick-header .item.slick-active{opacity: 1;} .content .slick-header .item .spot{position: absolute; width: 30px; height: 30px; border-radius: 100px; background: #0056a1; content: " "; display: block; border: 2px solid #FFF; z-index: 10;} .content .slick-header .item .spot:before{content: ''; position: relative; display: block; width: 300%; height: 300%; box-sizing: border-box; margin-left: -100%; margin-top: -100%; border-radius: 45px; background-color: #0056a1; animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; z-index: 99;} .content .slick-header .item .spot:after{content: ''; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: #003366; border-radius: 15px; animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;} @keyframes pulse-ring { 0% { transform: scale(.33); } 80%, 100% { opacity: 0; } } @keyframes pulse-dot { 0% { transform: scale(.5); } 50% { transform: scale(1); } 100% { transform: scale(.5); } } .content .slick-header .item .spot a{position: absolute; top: -7px; z-index: 100; text-decoration: none; padding: 0 40px; min-height: 40px; min-width: 40px;} .content .slick-header .item .spot a span{text-decoration: none; background: #FFFFFF; padding: 0 10px; color: #0056a1; font-weight: bold; text-transform: uppercase; white-space: nowrap; line-height: 40px; display: block;} .content .slick-header .item .spot.spot-left span{left: 40px;} .content .slick-header .item .spot.spot-right span{left: auto; right: 40px;} .content .slick-header .slick-list{padding: 0 !important;} .content .slick-header .slick-control .slick-arrow{position: absolute; top: 50%; margin: -30px 0 0 0; height: 60px; width: 40px; background: url(../images/arrow_left.svg) center center no-repeat; background-size: 40% auto; left: 0; border: none; text-indent: -9999px; z-index: 100;} .content .slick-header .slick-control .slick-arrow.slick-next{right: 0; left: auto; background: url(../images/arrow_right.svg) center center no-repeat; background-size: 40% auto;} @media (max-width: 768px) { .content .slick-header .item .spot a{top: -40px; left: 0; transform: translate(-50%, 0%); padding: 0 0 0 20px; min-height: 80px; font-size: 75%;} .content .slick-header .item .spot a span{line-height: 1.2; text-align: center; padding: 10px;} .content .slick-header .item .spot a span:after{content: "mehr erfahren"; display: block; background: #0056a1; color: #FFF; padding: 5px; line-height: 1; margin: 10px 0 0 0; font-size: 80%;} } .content .interactive-items{margin: 0 0 0 50px; padding: 0; list-style: none;} .content .interactive-items *{transition: all 0.5s ease;} .content .interactive-items li{background: #FFFFFF; margin: 0 0 10px 0; padding: 5px 20px; cursor: pointer;} .content .interactive-items li:hover, .content .interactive-items li.active{background: #0056a1; color: #FFFFFF; position: relative;} .content .interactive-items li.active:before{position: absolute; top: 0; left: -30px; height: 100%; width: 30px; background: url(../images/triangle.svg) right center no-repeat; background-size: cover; content: " "; display: block;} .content .interactive-wrapper select{background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #0056a1 !important; color: #FFFFFF; padding: 20px 50px 20px 20px; position: relative; display: none; width: 100%; margin: 30px 0 0 0;} @media (max-width: 768px) { .content .interactive-wrapper select{display: block;} .content .interactive-items{display: none;} .content .interactive-image-wrapper{text-align: center;} } .content .bg-grey{background: #cdcece; position: relative;} .content #sitemap ul{margin: 0; padding: 0; border: none;} .content #sitemap ul ul{padding-left: 20px;} .content #sitemap ul li{margin: 0; padding: 0; border: none; background: none;} .content #sitemap ul li a{margin: 0; padding: 0; background: none !important;} .footer{background: #0056a1; color: #FFFFFF; padding: 50px 0; line-height: 1.6; font-size: 85%;} .footer .inner{border-left: 1px solid #FFF; padding: 0 0 15px 15px;} .footer img{width: 180px; height: auto;} .footer ul{padding: 0; margin: 0; width: auto;} .footer ul li{width: auto; display: block;} .footer ul li a:before{content: ">"; margin: 0 4px 0 0;} .footer ul li a{background: none !important; padding: 0; color: #FFFFFF; text-decoration: none;} .footer .button{background: #FFFFFF; color: #0056a1; padding: 5px; font-weight: bold; display: inline-block;} .footer .footermenu{text-align: left;} .footer a:hover{opacity: 0.5;} .chronoform .input-group{position: relative; margin: 0 0 10px 0; width: 100%; display: block;} .chronoform .label{font-weight: normal; display: block; color: #0056a1; padding: 0 0 10px 0; text-align: left; font-size: 100%; text-transform: uppercase;} .chronoform input, .chronoform textarea {background: #FFFFFF; font-size: 100%; padding: 10px; display:block; width:100%; max-width: 100%; min-width: 100%; border: 1px solid #0056a1; margin: 0 0 40px 0; border-radius: 0; border-radius: 5px; box-shadow: 0 0 30px rgba(9,71,143,0.2);} .chronoform input:focus, .chronoform textarea:focus { outline:none; } .chronoform input.radio{width: auto; min-width: 10px; display: inline-block; position: relative; top: 3px;} .chronoform textarea{min-height: 100px;} .chronoform .button{background: #0056a1; color: #FFFFFF; border: none; padding: 10px 25px; text-decoration: none; display: inline-block; transition: all 0.2s ease; width: auto !important; min-width: 10px; text-transform: uppercase;} .chronoform .button:hover{background: #000000;} .chronoform input.valid{border-color: #48A844;} .chronoform input.error, .chronoform textarea.error{border-color: #D04346;} .chronoform label.error{color: #D04346; position: absolute; top: 0; right: 15px; font-size: 80%;} .chrono_credits{position: absolute; top: -9999px;} #cookiehint{position: fixed; bottom: 0; z-index: 999; width: 100%;} #cookiehint .inner{background: #0056a1; color: #FFFFFF; padding: 20px; text-align: center;} #cookiehint a{color: #FFFFFF;} #closecookiehint{background: none; border: 1px solid #FFFFFF; color: #FFFFFF; padding: 5px 15px; display: inline-block; margin: 5px 0 0 0; cursor: pointer;} #closecookiehint:hover{opacity: 0.5;} .jcarousel { position: relative; overflow: hidden; } .jcarousel ul { width: 10000em; position: relative; /* Optional, required in this case since it's a