@font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-Regular.woff2') format('woff2'), url('../fonts/Rubik-Regular.woff') format('woff'), local("?"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-Bold.woff2') format('woff2'), url('../fonts/Rubik-Bold.woff') format('woff'), local("?"); font-weight: 700; font-style: normal; font-display: swap; } html { box-sizing: border-box } *, *:before, *:after { box-sizing: inherit } body { background: #ffffff; padding: 140px 0px 0px 0px; overflow-x: hidden; margin: 0px; color: #000000; font-size: 14px; line-height: 24px; font-weight: 400; font-family: 'Rubik', Helvetica, Arial, sans-serif } h1 { margin: 0px; font-size: 36px; line-height: 60px; font-weight: 400 } h2 { margin: 0px; font-size: 30px; line-height: 48px; font-weight: 400 } h3 { margin: 0px; font-size: 24px; line-height: 36px; font-weight: 400 } h4 { margin: 0px; font-size: 18px; line-height: 30px; font-weight: 400 } ul { padding: 0px 0px 0px 10px; margin: 10px 0px 10px 10px; list-style-type: square } ol { padding: 0px 0px 0px 10px; margin: 10px 0px 10px 10px } img { border: none } b { font-weight: 700 } a { color: #0089d0; text-decoration: none } table { float: left; width: calc(100% + 40px); padding: 10px; border-style: none; border-spacing: 0px; margin: -20px } table tr td { position: relative; width: 50%; padding: 10px; text-align: left; vertical-align: top } input[type=radio], input[type=checkbox] { display: none } input[type=radio] + label, input[type=checkbox] + label { display: block; position: relative; float: left; width: 100%; padding: 0px 0px 0px 50px } input[type=radio] + label b { display: block; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: contain; border: solid 2px #dfdfdf; border-radius: 50% } input[type=checkbox] + label b { display: block; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: contain; border: solid 2px #dfdfdf } input[type=radio].error + label b, input[type=checkbox].error + label b { border-color: #ff0000 } input[type=radio]:checked + label b { background-image: url(../images/layout/radio.svg); border-color: #000000 } input[type=checkbox]:checked + label b { background-image: url(../images/layout/checkbox.svg); border-color: #000000 } select, textarea, input[type=date], input[type=time], input[type=text] { float: left; width: 100%; padding: 16px; background: #ffffff; border: solid 2px #dfdfdf; color: #000000; font-size: 14px; line-height: 24px; font-weight: 400; font-family: 'Rubik', Helvetica, Arial, sans-serif; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; -webkit-appearance: none } select.error, textarea.error, input[type=date].error, input[type=time].error, input[type=text].error { border-color: #ff0000 } select + label, textarea + label, input[type=date] + label, input[type=time] + label, input[type=text] + label { display: block; position: absolute; left: 10px; top: 10px; padding: 18px; pointer-events: none; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out } select:focus, textarea:focus, input[type=date]:focus, input[type=time]:focus, input[type=text]:focus, select:not([value=""]), textarea:not(:placeholder-shown), input[type=date]:not(:placeholder-shown), input[type=time]:not(:placeholder-shown), input[type=text]:not(:placeholder-shown) { border-color: #000000; outline: none } select:focus + label, textarea:focus + label, input[type=date]:focus + label, input[type=time]:focus + label, input[type=text]:focus + label, select:not([value=""]) + label, textarea:not(:placeholder-shown) + label, input[type=date]:not(:placeholder-shown) + label, input[type=time]:not(:placeholder-shown) + label, input[type=text]:not(:placeholder-shown) + label { left: 16px; top: -10px; padding: 12px; background: #ffffff; font-size: 12px; line-height: 18px } select { background-image: url(../images/layout/select.svg); background-repeat: no-repeat; background-position: right center; background-size: contain } textarea { height: 500px; overflow: auto; resize: none } input[type=submit] { float: left; width: 100%; height: 80px; padding: 0px; background: #0089d0; border: none; color: #ffffff; font-size: 18px; line-height: 18px; font-family: 'Rubik', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out } input[type=submit]:hover { background: #000000 } .fileupload { float: left; width: 100% } .fileupload div { float: right; width: 60px; height: 60px; background: #dfdfdf url(../images/layout/browse.svg) no-repeat center; background-size: 50% } .fileupload input[type=file] { position: absolute; right: 10px; top: 10px; width: 60px; height: 60px; opacity: 0; cursor: pointer } .fileupload input[type=text] { width: calc(100% - 80px) } h4.texterror { color: #ff0000 } div#refresh_captcha { position: relative; float: left; width: 100% } div#refresh_captcha div { position: absolute; right: 0px; top: 0px; width: 60px; height: 60px; background: #dfdfdf url(../images/layout/update.svg) no-repeat center; background-size: 50%; cursor: pointer } div#refresh_captcha img { display: block; float: left; width: 100% } a.show_cookiemanager { z-index: 1000; left: 40px; bottom: 40px; width: 60px; height: 60px; background: #0089d0; border-radius: 0 } a.show_cookiemanager svg path { fill: none; stroke: #ffffff; stroke-width: 1 } div.preloader { position: fixed; z-index: 6000; left: 0%; top: 0%; width: 100%; height: 100%; background: #ffffff } div.preloader:before { display: block; position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; background: url(../images/layout/preloader.svg) no-repeat center; background-size: 80%; content: ''; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform: translate(-50%,-50%) } div.infobox { display: none; width: 1080px; padding: 0px !important; background: #ffffff !important } div.infobox .pic { position: relative; float: left; width: 50%; padding: 0% 0% 50% 0% } div.infobox .pic img { display: block; position: absolute; z-index: 1; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover } div.infobox .text { float: left; width: 50%; padding: 80px; color: #000000; font-size: 12px; line-height: 18px } div.infobox .text h2 { font-size: 24px; line-height: 36px } div.infobox .text h3 { font-size: 18px; line-height: 30px } div.infobox .text h4 { font-size: 14px; line-height: 24px } div.switch { position: fixed; z-index: 5000; right: 40px; top: 40px; width: 60px; height: 60px; background: #0089d0; cursor: pointer } div.switch span { display: block; position: absolute; left: 20px; height: 2px; background: #ffffff; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out } div.switch span:nth-child(1) { top: 20px; width: 20px } div.switch span:nth-child(2), div.switch span:nth-child(3) { top: 29px; width: 10px } div.switch span:nth-child(4) { top: 38px; width: 15px } div.switch.active span:nth-child(1), div.switch.active span:nth-child(4) { top: 29px; width: 0%; left: 50% } div.switch.active span:nth-child(2) { width: 20px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg) } div.switch.active span:nth-child(3) { width: 20px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg) } nav { position: fixed; z-index: 4000; right: -500px; top: 0%; width: 500px; height: 100%; overflow: auto; padding: 40px; background: #0089d0 } nav ul { float: left; width: 100%; padding: 0px; margin: 0px; list-style-type: none } nav ul li { display: block; float: left; width: 100% } nav ul li a { display: block; float: left; width: 100%; padding: 21px 10px 21px 10px; color: #ffffff; font-size: 18px; line-height: 18px; text-transform: uppercase } a.scrolltop { display: none; position: fixed; z-index: 3000; right: 40px; bottom: 40px; width: 60px; height: 60px; background: #0089d0 url(../images/layout/up.svg) no-repeat center; background-size: 40px } div.overlay { display: none; position: fixed; z-index: 2000; left: 0%; top: 0%; width: 100%; height: 100%; background: rgba(0,0,0,0.8) } header { position: fixed; z-index: 1000; left: 0%; top: 0%; width: 100%; padding: 20px calc(50% - 620px) 20px calc(50% - 620px); background: #ffffff } header a.logo { display: block; float: left; width: 210px; height: 60px; background: url(../images/layout/langer_logo.svg) no-repeat center; background-size: contain; margin: 20px } header ul { float: left; padding: 10px; margin: 0px; list-style-type: none } header ul li { display: block; float: left; margin: 10px } header ul li a { display: block; float: left; padding: 18px 10px 18px 50px; background-repeat: no-repeat; background-position: 5px center; background-size: 40px; font-size: 10px; line-height: 10px; text-transform: uppercase } header ul li a span { display: block; font-size: 14px; line-height: 14px } header ul li a.pin { background-image: url(../images/layout/pin.svg) } header ul li a.phone { background-image: url(../images/layout/phone.svg) } header ul li a.mail { background-image: url(../images/layout/mail.svg) } section.theme { position: relative; float: left; width: 100%; padding: 0% 0% 33.3334% 0%; overflow: hidden; margin: 0px 0px 40px 0px } section.theme picture { display: block; position: absolute; left: 0%; bottom: 0%; width: 100%; height: 100% } section.theme picture img { display: block; float: left; width: 100%; height: 100%; object-fit: cover } section.theme div { position: absolute; left: 0%; bottom: 0%; width: 100%; padding: 70px calc(50% - 610px) 70px calc(50% - 610px) } section.theme div h2 { float: left; width: calc(100% - 20px); margin: 10px; color: #f08000; font-size: 24px; line-height: 24px; text-transform: uppercase } section.theme div h1 { float: left; width: calc(100% - 20px); margin: 10px; color: #0089d0; font-size: 60px; line-height: 60px; font-weight: 700 } section.theme div a { display: block; float: left; padding: 23px 30px 23px 30px; background: #f08000; margin: 10px; color: #ffffff; line-height: 14px; text-transform: uppercase; letter-spacing: 0.1em; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out } section.theme div a:hover { background: #000000 } section.placement { position: relative; float: left; width: 100%; padding: 0% 0% 33.3333% 0%; overflow: hidden } section.placement picture { display: block; position: absolute; left: 0%; width: 100%; padding: 0% 0% 50% 0% } section.placement picture img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover } section.placement div { position: absolute; left: 50%; width: 1200px; padding: 30px; background: rgba(0,0,0,0.8); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform: translate(-50%,-50%) } section.placement div span { display: block; float: left; width: calc(50% - 60px); margin: 30px; color: #ffffff; font-size: 12px; line-height: 18px } section.placement div span h2 { color: #f08000; font-size: 36px; font-weight: 700 } section.placement div span a { display: block; float: left; padding: 19px 25px 19px 25px; background: #f08000; color: #ffffff; line-height: 12px; text-transform: uppercase; letter-spacing: 0.1em; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out } section.placement div span a:hover { background: #ffffff; color: #f08000 } section.content { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 0px calc(50% - 640px) 0px calc(50% - 640px) } section.content hr { display: block; float: left; width: calc(100% - 80px); height: 2px; background: #dfdfdf; border: none; margin: 40px } section.content .column { display: block; float: left; padding: 20px } section.content .column.full { width: 100% } section.content .column.wide { width: 66.6667% } section.content .column.medium { width: 50% } section.content .column.slim { width: 33.3334% } section.content .column .entry { float: left; width: calc(100% - 40px); margin: 20px; word-break: break-word } section.content .column .entry h1 { font-weight: 700 } section.content .column .entry h2 { font-size: 36px; line-height: 60px; font-weight: 700 } section.content .column .entry h4 { text-transform: uppercase } section.content .column picture { display: block; position: relative; float: left; width: calc(100% - 40px); padding: 0% 0% calc(66.6667% - 30px) 0%; margin: 20px } section.content .column.slim picture { padding: 0% 0% calc(100% - 40px) 0% } section.content .column picture img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover } section.content .column .cta { float: left; width: 100%; padding: 10px; margin: 0px; list-style-type: none } section.content .column .cta li { display: block; float: left; margin: 10px } section.content .column .cta li a { display: block; float: left; padding: 23px 30px 23px 30px; background: #0089d0; color: #ffffff; line-height: 14px; text-transform: uppercase; letter-spacing: 0.1em; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out } section.content .column .cta li a:hover { background: #000000 } section.teaser { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 20px } section.teaser a { display: block; position: relative; float: left; width: calc(16.6667% - 40px); padding: 135px 15px 95px 15px; background-color: #f5f5f5; background-repeat: no-repeat; background-position: center 40px; background-size: 80px; margin: 20px } section.teaser a.berufserfahrener { background-image: url(../images/layout/berufserfahrener.svg) } section.teaser a.berufseinsteiger { background-image: url(../images/layout/berufseinsteiger.svg) } section.teaser a.quereinsteiger { background-image: url(../images/layout/quereinsteiger.svg) } section.teaser a.student { background-image: url(../images/layout/student.svg) } section.teaser a.auszubildender { background-image: url(../images/layout/auszubildender.svg) } section.teaser a.praktikant { background-image: url(../images/layout/praktikant.svg) } section.teaser a h4 { float: left; width: calc(100% - 10px); margin: 5px; color: #000000; font-size: 12px; line-height: 18px; text-align: center } section.teaser a h3 { float: left; width: calc(100% - 10px); margin: 5px; color: #000000; font-size: 14px; line-height: 24px; text-align: center } section.teaser a div { position: absolute; left: 50%; bottom: 40px; padding: 15px 25px 15px 25px; background: #0089d0; color: #ffffff; font-size: 10px; line-height: 10px; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out } section.teaser a:hover div { background: #000000 } section.tiles { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 20px } section.tiles a { display: block; position: relative; float: left; width: calc(25% - 40px); padding: 45px 15px 135px 15px; background: #f5f5f5; margin: 20px } section.tiles a h4 { float: left; width: calc(100% - 10px); margin: 5px; color: #000000; font-size: 14px; line-height: 24px; text-align: center } section.tiles a h3 { float: left; width: calc(100% - 10px); margin: 5px; color: #000000; font-size: 18px; line-height: 30px; text-align: center } section.tiles a div { position: absolute; left: 50%; bottom: 50px; padding: 19px 30px 19px 30px; background: #0089d0; color: #ffffff; font-size: 12px; line-height: 12px; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out } section.tiles a:hover div { background: #000000 } section.gallery { float: left; width: 100%; padding: 35px } section.gallery a { display: block; float: left; width: calc(16.6667% - 10px); margin: 5px } section.gallery a:first-child { width: calc(33.3334% - 10px) } section.gallery a picture { display: block; position: relative; float: left; width: 100%; padding: 0% 0% 100% 0%; overflow: hidden } section.gallery a picture img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover; -moz-filter: brightness(0.8); -webkit-filter: brightness(0.8); filter: brightness(0.8); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out } section.gallery a:hover picture img { -moz-filter: none; -webkit-filter: none; filter: none; -moz-transform: none; -webkit-transform: none; transform: none } section.gallery a picture:before { display: block; position: absolute; z-index: 1; left: calc(50% - 15px); top: calc(50% - 15px); width: 30px; height: 30px; background: #0089d0 url(../images/layout/zoom.svg) no-repeat center; background-size: 50%; border-radius: 50%; content: ''; -webkit-filter: opacity(0); -moz-filter: opacity(0); filter: opacity(0); -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out } section.gallery a picture:hover:before { -webkit-transform: scale(2) rotate(360deg); -moz-transform: scale(2) rotate(360deg); transform: scale(2) rotate(360deg); -webkit-filter: none; -moz-filter: none; filter: none } section.claims { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 20px; background: #f5f5f5 } section.claims .column { float: left; width: calc(33.3334% - 120px); margin: 60px 60px 20px 60px; background: #ffffff } section.claims .column picture { display: block; position: relative; float: left; width: calc(100% + 80px); padding: 0% 0% calc(50% + 40px) 0%; margin: -40px } section.claims .column picture img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover } section.claims .column div { position: relative; float: left; width: 100%; padding: 40px; background: #ffffff; font-size: 12px; line-height: 18px } section.sitemap { float: left; width: 100%; padding: 40px calc(50% - 620px) 40px calc(50% - 620px); background: #f5f5f5 } section.sitemap a.logo { display: block; float: left; width: 210px; height: 60px; background: url(../images/layout/langer_logo.svg) no-repeat center; background-size: contain; margin: 20px } section.sitemap ul { float: left; width: 25%; padding: 10px; margin: 0px; list-style-type: none } section.sitemap ul li { display: block; float: left; width: calc(100% - 20px); margin: 10px } section.sitemap ul li a { display: block; float: left; width: 100%; padding: 8px 10px 8px 10px; line-height: 14px; text-transform: uppercase } section.sitemap ul.cta { width: calc(50% - 250px) } section.sitemap ul.cta li a { padding: 8px 10px 8px 50px; background-repeat: no-repeat; background-position: 5px center; background-size: contain; margin: 0px 0px 40px 0px; font-size: 10px; line-height: 10px } section.sitemap ul.cta li a span { display: block; font-size: 14px; line-height: 14px } section.sitemap ul.cta li a.pin { background-image: url(../images/layout/pin.svg) } section.sitemap ul.cta li a.phone { background-image: url(../images/layout/phone.svg) } section.sitemap ul.cta li a.mail { background-image: url(../images/layout/mail.svg) } footer { float: left; width: 100%; padding: 40px calc(50% - 620px) 120px calc(50% - 620px); background: #dfdfdf } footer .copyright { float: left; width: calc(100% - 40px); margin: 20px } div.fancybox-slide--iframe .fancybox-content { width: 1080px !important; max-width: 1080px !important; height: calc(100% - 120px) !important; max-height: calc(100% - 120px) !important; margin: 0px !important } div.fancybox-slide--iframe .fancybox-content.assistant_box { width: 300px !important; max-width: 300px !important } @media only screen and (min-width: 640px) and (max-width: 1279px) { body { padding: 70px 0px 0px 0px; font-size: 10px; line-height: 14px } h1 { font-size: 24px; line-height: 36px } h2 { font-size: 18px; line-height: 30px } h3 { font-size: 14px; line-height: 24px } h4 { font-size: 12px; line-height: 18px } table { width: calc(100% + 20px); padding: 5px; margin: -10px } table tr td { padding: 5px; font-size: 10px; line-height: 14px } input[type=radio] + label, input[type=checkbox] + label { padding: 0px 0px 0px 30px } input[type=radio] + label b, input[type=checkbox] + label b { width: 20px; height: 20px; border-width: 1px } select, textarea, input[type=date], input[type=time], input[type=text] { padding: 12px; border-width: 1px; font-size: 10px; line-height: 14px } select + label, textarea + label, input[type=date] + label, input[type=time] + label, input[type=text] + label { left: 5px; top: 5px; padding: 13px } select:focus + label, textarea:focus + label, input[type=date]:focus + label, input[type=time]:focus + label, input[type=text]:focus + label, select:not([value=""]) + label, textarea:not(:placeholder-shown) + label, input[type=date]:not(:placeholder-shown) + label, input[type=time]:not(:placeholder-shown) + label, input[type=text]:not(:placeholder-shown) + label { left: 12px; top: -5px; padding: 6px; font-size: 8px; line-height: 12px } textarea { height: 250px } input[type=submit] { height: 60px; border-width: 1px; font-size: 12px; line-height: 12px } .fileupload div { width: 40px; height: 40px } .fileupload input[type=file] { right: 5px; top: 5px; width: 40px; height: 40px } .fileupload input[type=text] { width: calc(100% - 50px) } div#refresh_captcha div { width: 40px; height: 40px } a.show_cookiemanager { left: 20px; bottom: 20px; width: 30px; height: 30px } a.show_cookiemanager svg path { stroke-width: 0.5 } div.preloader:before { width: 100px; height: 100px } div.infobox { width: 540px } div.infobox .text { padding: 40px; font-size: 6px; line-height: 9px } div.infobox .text h2 { font-size: 12px; line-height: 18px } div.infobox .text h3 { font-size: 9px; line-height: 14px } div.infobox .text h4 { font-size: 7px; line-height: 12px } div.switch { right: 20px; top: 20px; width: 30px; height: 30px } div.switch span { left: 10px; height: 1px } div.switch span:nth-child(1) { top: 10px; width: 10px } div.switch span:nth-child(2), div.switch span:nth-child(3) { top: 14.5px; width: 5px } div.switch span:nth-child(4) { top: 19px; width: 7.5px } div.switch.active span:nth-child(1), div.switch.active span:nth-child(4) { top: 14.5px } div.switch.active span:nth-child(2), div.switch.active span:nth-child(3) { width: 10px } nav { right: -250px; width: 250px; padding: 20px } nav ul li a { padding: 10.5px 5px 10.5px 5px; font-size: 9px; line-height: 9px } a.scrolltop { right: 20px; bottom: 20px; width: 30px; height: 30px; background-size: 20px } header { padding: 10px calc(50% - 310px) 10px calc(50% - 310px) } header a.logo { width: 105px; height: 30px; margin: 10px } header ul { padding: 5px } header ul li { margin: 5px } header ul li a { padding: 9px 5px 9px 25px; background-position: 2.5px center; background-size: 20px; font-size: 5px; line-height: 5px } header ul li a span { font-size: 7px; line-height: 7px } section.theme { margin: 0px 0px 20px 0px } section.theme div { padding: 35px calc(50% - 305px) 35px calc(50% - 305px) } section.theme div h2 { width: calc(100% - 10px); margin: 5px; font-size: 12px; line-height: 12px } section.theme div h1 { width: calc(100% - 10px); margin: 5px; font-size: 30px; line-height: 30px } section.theme div a { padding: 11.5px 15px 11.5px 15px; margin: 5px; font-size: 7px; line-height: 7px } section.placement div { width: 600px; padding: 15px } section.placement div span { width: calc(50% - 30px); margin: 15px; font-size: 6px; line-height: 9px } section.placement div span h2 { font-size: 18px; line-height: 24px } section.placement div span h4 { font-size: 9px; line-height: 14px } section.placement div span a { padding: 9.5px 12.5px 9.5px 12.5px; line-height: 6px } section.content { padding: 0px calc(50% - 320px) 0px calc(50% - 320px) } section.content hr { width: calc(100% - 40px); height: 1px; margin: 20px } section.content .column { padding: 10px } section.content .column .entry { width: calc(100% - 20px); margin: 10px; font-size: 7px; line-height: 12px } section.content .column .entry h1, section.content .column .entry h2 { font-size: 18px; line-height: 30px } section.content .column .entry h4 { font-size: 9px; line-height: 14px } section.content .column picture { width: calc(100% - 20px); padding: 0% 0% calc(66.6667% - 15px) 0%; margin: 10px } section.content .column.slim picture { padding: 0% 0% calc(100% - 20px) 0% } section.content .column .cta { padding: 5px } section.content .column .cta li { margin: 5px } section.content .column .cta li a { padding: 11.5px 15px 11.5px 15px; font-size: 7px; line-height: 7px } section.teaser { padding: 10px } section.teaser a { width: calc(16.6667% - 20px); padding: 67.5px 7.5px 47.5px 7.5px; background-position: center 20px; background-size: 40px; margin: 10px } section.teaser a h4 { width: calc(100% - 5px); margin: 2.5px; font-size: 6px; line-height: 9px } section.teaser a h3 { width: calc(100% - 5px); margin: 2.5px; font-size: 7px; line-height: 12px } section.teaser a div { bottom: 20px; padding: 7.5px 12.5px 7.5px 12.5px; font-size: 5px; line-height: 5px } section.tiles { padding: 10px } section.tiles a { width: calc(25% - 20px); padding: 22.5px 7.5px 67.5px 7.5px; margin: 10px } section.tiles a h4 { width: calc(100% - 5px); margin: 2.5px; font-size: 7px; line-height: 12px } section.tiles a h3 { width: calc(100% - 5px); margin: 2.5px; font-size: 9px; line-height: 14px } section.tiles a div { bottom: 25px; padding: 9.5px 15px 9.5px 15px; font-size: 6px; line-height: 6px } section.gallery { padding: 17.5px } section.gallery a { width: calc(16.6667% - 5px); margin: 2.5px } section.gallery a:first-child { width: calc(33.3334% - 5px) } section.gallery a picture:before { left: calc(50% - 7.5px); top: calc(50% - 7.5px); width: 15px; height: 15px } section.claims { padding: 10px } section.claims .column { width: calc(33.3334% - 60px); margin: 30px 30px 10px 30px } section.claims .column picture { width: calc(100% + 40px); padding: 0% 0% calc(50% + 20px) 0%; margin: -20px } section.claims .column div { padding: 20px; font-size: 6px; line-height: 9px } section.claims .column div h4 { font-size: 9px; line-height: 14px } section.sitemap { padding: 20px calc(50% - 310px) 20px calc(50% - 310px) } section.sitemap a.logo { width: 105px; height: 30px; margin: 10px } section.sitemap ul { padding: 5px } section.sitemap ul li { width: calc(100% - 10px); margin: 5px } section.sitemap ul li a { padding: 4px 5px 4px 5px; font-size: 7px; line-height: 7px } section.sitemap ul.cta { width: calc(50% - 125px) } section.sitemap ul.cta li a { padding: 4px 5px 4px 25px; background-position: 2.5px center; margin: 0px 0px 20px 0px; font-size: 5px; line-height: 5px } section.sitemap ul.cta li a span { font-size: 7px; line-height: 7px } footer { padding: 20px calc(50% - 310px) 60px calc(50% - 310px) } footer .copyright { width: calc(100% - 20px); margin: 10px; font-size: 7px; line-height: 12px } div.fancybox-slide--iframe .fancybox-content { width: 540px !important; max-width: 540px !important; height: calc(100% - 20px) !important; max-height: calc(100% - 20px) !important } div.fancybox-slide--iframe .fancybox-content.assistant_box { width: 300px !important; max-width: 300px !important } } @media only screen and (max-width: 639px) { body { padding: 70px 0px 0px 0px; font-size: 10px; line-height: 14px } h1 { font-size: 24px; line-height: 36px } h2 { font-size: 18px; line-height: 30px } h3 { font-size: 14px; line-height: 24px } h4 { font-size: 12px; line-height: 18px } table { width: calc(100% + 20px); padding: 5px; margin: -10px } table tr td { display: block; float: left; width: 100%; padding: 5px; font-size: 10px; line-height: 14px } input[type=radio] + label, input[type=checkbox] + label { padding: 0px 0px 0px 30px } input[type=radio] + label b, input[type=checkbox] + label b { width: 20px; height: 20px; border-width: 1px } select, textarea, input[type=date], input[type=time], input[type=text] { padding: 12px; border-width: 1px; font-size: 10px; line-height: 14px } select + label, textarea + label, input[type=date] + label, input[type=time] + label, input[type=text] + label { left: 5px; top: 5px; padding: 13px } select:focus + label, textarea:focus + label, input[type=date]:focus + label, input[type=time]:focus + label, input[type=text]:focus + label, select:not([value=""]) + label, textarea:not(:placeholder-shown) + label, input[type=date]:not(:placeholder-shown) + label, input[type=time]:not(:placeholder-shown) + label, input[type=text]:not(:placeholder-shown) + label { left: 12px; top: -5px; padding: 6px; font-size: 8px; line-height: 12px } textarea { height: 250px } input[type=submit] { height: 60px; border-width: 1px; font-size: 12px; line-height: 12px } .fileupload div { width: 40px; height: 40px } .fileupload input[type=file] { right: 5px; top: 5px; width: 40px; height: 40px } .fileupload input[type=text] { width: calc(100% - 50px) } div#refresh_captcha div { width: 40px; height: 40px } a.show_cookiemanager { left: 20px; bottom: 20px; width: 30px; height: 30px } a.show_cookiemanager svg path { stroke-width: 0.5 } div.preloader:before { width: 100px; height: 100px } div.infobox { width: 270px } div.infobox .pic { width: 100%; padding: 0% 0% 100% 0% } div.infobox .text { width: 100%; padding: 40px; font-size: 6px; line-height: 9px } div.infobox .text h2 { font-size: 12px; line-height: 18px } div.infobox .text h3 { font-size: 9px; line-height: 14px } div.infobox .text h4 { font-size: 7px; line-height: 12px } div.switch { right: 20px; top: 20px; width: 30px; height: 30px } div.switch span { left: 10px; height: 1px } div.switch span:nth-child(1) { top: 10px; width: 10px } div.switch span:nth-child(2), div.switch span:nth-child(3) { top: 14.5px; width: 5px } div.switch span:nth-child(4) { top: 19px; width: 7.5px } div.switch.active span:nth-child(1), div.switch.active span:nth-child(4) { top: 14.5px } div.switch.active span:nth-child(2), div.switch.active span:nth-child(3) { width: 10px } nav { right: -250px; width: 250px; padding: 20px } nav ul li a { padding: 10.5px 5px 10.5px 5px; font-size: 9px; line-height: 9px } a.scrolltop { right: 20px; bottom: 20px; width: 30px; height: 30px; background-size: 20px } header { padding: 10px calc(50% - 150px) 10px calc(50% - 150px) } header a.logo { width: 105px; height: 30px; margin: 10px } header ul { display: none } header ul:first-child { display: block; padding: 5px } header ul li { margin: 5px } section.theme { padding: 0% 0% 100% 0%; margin: 0px 0px 20px 0px } section.theme div { padding: 35px calc(50% - 145px) 35px calc(50% - 145px) } section.theme div h2 { width: calc(100% - 10px); margin: 5px; font-size: 12px; line-height: 12px } section.theme div h1 { width: calc(100% - 10px); margin: 5px; font-size: 30px; line-height: 30px } section.theme div a { padding: 11.5px 15px 11.5px 15px; margin: 5px; font-size: 7px; line-height: 7px } section.placement { padding: 0% 0% 150% 0% } section.placement picture { padding: 0% 0% 200% 0% } section.placement div { width: 280px; padding: 15px } section.placement div span { width: calc(100% - 30px); margin: 12px; font-size: 6px; line-height: 9px } section.placement div span h2 { font-size: 18px; line-height: 24px } section.placement div span h4 { font-size: 9px; line-height: 14px } section.placement div span a { padding: 9.5px 12.5px 9.5px 12.5px; line-height: 6px } section.content { padding: 0px calc(50% - 160px) 0px calc(50% - 160px) } section.content hr { width: calc(100% - 40px); height: 1px; margin: 20px } section.content .column { width: 100% !important; padding: 10px } section.content .column .entry { width: calc(100% - 20px); margin: 10px; font-size: 7px; line-height: 12px } section.content .column .entry h1, section.content .column .entry h2 { font-size: 18px; line-height: 30px } section.content .column .entry h4 { font-size: 9px; line-height: 14px } section.content .column picture { width: calc(100% - 20px); padding: 0% 0% calc(66.6667% - 15px) 0%; margin: 10px } section.content .column.slim picture { padding: 0% 0% calc(100% - 20px) 0% } section.content .column .cta { padding: 5px } section.content .column .cta li { margin: 5px } section.content .column .cta li a { padding: 11.5px 15px 11.5px 15px; font-size: 7px; line-height: 7px } section.teaser { padding: 10px } section.teaser a { width: calc(50% - 20px); padding: 77.5px 7.5px 47.5px 7.5px; background-position: center 20px; background-size: 50px; margin: 10px } section.teaser a h4 { width: calc(100% - 5px); margin: 2.5px; font-size: 7px; line-height: 12px } section.teaser a h3 { width: calc(100% - 5px); margin: 2.5px; font-size: 9px; line-height: 14px } section.teaser a div { bottom: 20px; padding: 7.5px 12.5px 7.5px 12.5px; font-size: 5px; line-height: 5px } section.tiles { padding: 10px } section.tiles a { width: calc(100% - 20px); padding: 22.5px 7.5px 67.5px 7.5px; margin: 10px } section.tiles a h4 { width: calc(100% - 5px); margin: 2.5px; font-size: 7px; line-height: 12px } section.tiles a h3 { width: calc(100% - 5px); margin: 2.5px; font-size: 9px; line-height: 14px } section.tiles a div { bottom: 25px; padding: 9.5px 15px 9.5px 15px; font-size: 6px; line-height: 6px } section.gallery { padding: 17.5px } section.gallery a { width: calc(33.3334% - 5px); margin: 2.5px } section.gallery a:first-child { width: calc(66.6667% - 5px) } section.gallery a picture:before { left: calc(50% - 7.5px); top: calc(50% - 7.5px); width: 15px; height: 15px } section.claims { padding: 10px } section.claims .column { width: calc(100% - 60px); margin: 30px 30px 10px 30px } section.claims .column picture { width: calc(100% + 40px); padding: 0% 0% calc(50% + 20px) 0%; margin: -20px } section.claims .column div { padding: 20px; font-size: 6px; line-height: 9px } section.claims .column div h4 { font-size: 9px; line-height: 14px } section.sitemap { padding: 20px calc(50% - 150px) 20px calc(50% - 150px) } section.sitemap a.logo { width: 105px; height: 30px; margin: 10px } section.sitemap ul { width: 50%; padding: 5px } section.sitemap ul li { width: calc(100% - 10px); margin: 5px } section.sitemap ul li a { padding: 4px 5px 4px 5px; font-size: 7px; line-height: 7px } section.sitemap ul.cta { width: calc(100% - 125px) } section.sitemap ul.cta li a { padding: 4px 5px 4px 25px; background-position: 2.5px center; margin: 0px; font-size: 5px; line-height: 5px } section.sitemap ul.cta li a span { font-size: 7px; line-height: 7px } footer { padding: 20px calc(50% - 150px) 60px calc(50% - 150px) } footer .copyright { width: calc(100% - 20px); margin: 10px; font-size: 7px; line-height: 12px } div.fancybox-slide--iframe .fancybox-content { width: 300px !important; max-width: 300px !important; height: calc(100% - 60px) !important; max-height: calc(100% - 60px) !important; margin: 20px 0px -20px 0px !important } }