/* -------------------------------------- */ /* SOURCESANS */ @font-face { /* LIGHT */ font-family: 'SourceSansPro'; src: url('../fonts/sourcesanspro/SourceSansPro-Light.woff2') format('woff2'), url('../fonts/sourcesanspro/SourceSansPro-Light.woff') format('woff'), url('../fonts/sourcesanspro/SourceSansPro-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { /* LIGHT ITALIC*/ font-family: 'SourceSansPro'; src: url('../fonts/sourcesanspro/SourceSansPro-LightItalic.woff2') format('woff2'), url('../fonts/sourcesanspro/SourceSansPro-LightItalic.woff') format('woff'), url('../fonts/sourcesanspro/SourceSansPro-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { /* REGULAR */ font-family: 'SourceSansPro'; src: url('../fonts/sourcesanspro/SourceSansPro-Regular.woff2') format('woff2'), url('../fonts/sourcesanspro/SourceSansPro-Regular.woff') format('woff'), url('../fonts/sourcesanspro/SourceSansPro-Regular.ttf') format('truetype'); font-weight: 400; /* entspricht font-weight: normal */ font-style: normal; } @font-face { /* REGULAR ITALIC */ font-family: 'SourceSansPro'; src: url('../fonts/sourcesanspro/SourceSansPro-Italic.woff2') format('woff2'), url('../fonts/sourcesanspro/SourceSansPro-Italic.woff') format('woff'), url('../fonts/sourcesanspro/SourceSansPro-Italic.ttf') format('truetype'); font-weight: 400; /* entspricht font-weight: normal */ font-style: italic; } @font-face { /* SEMIBOLD */ font-family: 'SourceSansPro'; src: url('../fonts/sourcesanspro/SourceSansPro-SemiBold.woff2') format('woff2'), url('../fonts/sourcesanspro/SourceSansPro-SemiBold.woff') format('woff'), url('../fonts/sourcesanspro/SourceSansPro-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { /* SEMIBOLD ITALIC */ font-family: 'SourceSansPro'; src: url('../fonts/sourcesanspro/SourceSansPro-SemiBoldItalic.woff2') format('woff2'), url('../fonts/sourcesanspro/SourceSansPro-SemiBoldItalic.woff') format('woff'), url('../fonts/sourcesanspro/SourceSansPro-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; } @font-face { /* BOLD */ font-family: 'SourceSansPro'; src: url('../fonts/sourcesanspro/SourceSansPro-Bold.woff2') format('woff2'), url('../fonts/sourcesanspro/SourceSansPro-Bold.woff') format('woff'), url('../fonts/sourcesanspro/SourceSansPro-Bold.ttf') format('truetype'); font-weight: 700; /* entspricht font-weight: bold */ font-style: normal; } @font-face { /* BOLD ITALIC */ font-family: 'SourceSansPro'; src: url('../fonts/sourcesanspro/SourceSansPro-BoldItalic.woff2') format('woff2'), url('../fonts/sourcesanspro/SourceSansPro-BoldItalic.woff') format('woff'), url('../fonts/sourcesanspro/SourceSansPro-BoldItalic.ttf') format('truetype'); font-weight: 700; /* entspricht font-weight: bold */ font-style: italic; } /* VARIABLEN */ /* Bei aenderungen auch /css/customtinymce.css entsprechend anpassen */ :root { --content-width001: 720px;} :root { --content-width002: 1000px;} :root { --content-width01: 1440px;} :root { --content-width02: 2560px;} :root { --colorlight: #FFFFFF;} /* Weiss */ :root { --colordark: #000000;} /* Überschriften */ :root { --color-grey-01: #EDEDED;} /* Hintergruende und Hintergrundverlauf */ :root { --color-grey-02: #BDBCBC;} /* Trennlinien und Hintergrundverlauf */ :root { --color-grey-03: #7C7C7B;} /* Dunklere Trennlinien, Formulare */ :root { --color-grey-04: #E5E5E5;} /* Loginbox */ :root { --color-grey-05: #3C3C3B;} /* Text default */ :root { --color-grey-06: #bdbcbc;} /* Beschreibungsliste Überschriften */ :root { --color-01: #C32E1B;} /* HAUPTFARBE */ :root { --color-02: #EA4E34;} /* Button Farbverlauf */ :root { --color-03: #C32D1A;} /* Button Farbverlauf */ :root { --colorlight-trans01: rgba(255,255,255,0.8);} :root { --space-below-00: 5px;} :root { --space-below-01: 15px;} :root { --space-below-02: 30px;} :root { --space-below-03: 60px;} :root { --side-space-00: 10px;} :root { --side-space-01: 20px;} :root { --side-space-02: 30px;} :root { --side-space-03: 50px;} :root { --gap-00: 15px;} :root { --gap-01: 30px;} :root { --gap-menu: 15px;} :root { --border-rad-01: 5px;} :root { --logo-height-full: 65px;} :root { --logo-height-small: 30px;} :root { --nav-height: 50px;} :root { --shadow-01: 0px 3px 6px var(--color-grey-03);} :root { --shadow-02: 0px 3px 3px var(--color-grey-02);} :root { --slideshow-01-width: 20vw;} :root { --slideshow-01-width-mobile: 40vw;} :root { --hover-opacity: 0.5;} :root { --transform-scale-01: scale(1.2);} :root { --animation-01: all 0.4s ease-in-out 0s;} :root { --fontsize-xs: 12px;} :root { --fontsize-s: 16px;} :root { --fontsize-m: 18px;} /* Font Size Default */ :root { --fontsize-l: 22px;} :root { --fontsize-xl: 28px;} :root { --fontsize-2xl: 34px;} :root { --fontsize-3xl: 40px;} :root { --fontsize-4xl: 46px;} :root { --fontsize-5xl: 70px;} * {margin: 0;padding: 0; box-sizing: border-box;} header, footer, section, article, nav {display: block;} body {background: var(--colorlight); color: var(--color-grey-05); font-family: 'SourceSansPro', Arial, Helvetica, Sans-Serif; font-weight: 400; font-style: normal; line-height: 1.4;font-size: var(--fontsize-m); } h1 {font-size: var(--fontsize-4xl);font-weight: 600; color: var(--colordark);} h2 {font-size: var(--fontsize-2xl);font-weight: 600; color: var(--colordark);} h3 {font-size: var(--fontsize-3xl);font-weight: 600; color: var(--color-01);text-transform: uppercase;} h4 {font-size: var(--fontsize-xl);font-weight: 600; color: var(--colordark);} h5 {font-size: var(--fontsize-l);font-weight: 600; color: var(--colordark); text-transform: uppercase;} /* h5 {display: flex;align-items: center;gap: 5px;} h5::before {content: '';background-color: var(--color-01);display: block;width: 24px;height: 16px;} */ h6 {} h1, h2, h3 {line-height: 1.2;} h1, h2, h3, h4, h5, h6, p, ul, ol {margin-bottom: var(--space-below-01);} .home #main h2 {font-size: var(--fontsize-4xl);color:var(--color-01);font-weight: 600;text-transform: uppercase;} .home #main .content-text strong {font-size: var(--fontsize-2xl);line-height: 1;} .home #main .content-text :is(p, ul) {font-size: var(--fontsize-xl);} a {color: var(--color-grey-05);text-decoration: underline;} a:focus {color: var(--color-01);} a:hover {text-decoration: none;outline: 0;} ul {list-style: none;} img {border: none;} b, strong {font-weight: 600;} hr {margin-bottom: var(--space-below-01); background: var(--colordark);border: medium none;height: 1px;} table {border-collapse: collapse;border-spacing: 0;} .invisible, .screen-reader-text {display: none;} img {border: none;max-width: 100%; height: auto;} #dokumentation h3 {font-size: var(--fontsize-2xl);} #dokumentation span {display: inline-block;padding: 10px;} #dokumentation .box-element {padding: 5px 10px;} .formbody .widget {margin-bottom: var(--space-below-01);} .formbody :is(input, .select, .textarea) {width: 100%;} .formbody :is(input.text, input.captcha, select, textarea, .widget-fineuploader), #asp-search #asp-input {margin-bottom: 5px;border: 1px solid var(--color-grey-03);background: var(--colorlight);color: var(--color-grey-05);display: inline-block;padding: 6px 12px;font-size: var(--fontsize-m); line-height: 1.4;} .formbody textarea::placeholder {font-family: 'SourceSansPro', Arial, Helvetica, Sans-Serif;font-size: var(--fontsize-m);} .formbody :is(input.radio, input.checkbox) {vertical-align: middle;margin: 0 3px 0 0;width: auto;font-family: inherit;font-size: 99%;font-weight: inherit;} .formbody label {vertical-align: middle;margin-bottom: 5px;} .formbody .widget > label {display: block;} .formbody fieldset {border: none;} .formbody .checkbox_container.mandatory span {display: flex;align-items: flex-start;gap: 10px;} .formbody .checkbox_container.mandatory span input.checkbox {margin: 5px 0 0 0;} .formbody .hidden-field-h1 {display: none;} #main *:is(.button-01, .button-02, .button-03, .footer-optional .content-hyperlink), .formbody .widget-submit {display: block;} #main *:is(.button-01, .button-02, .button-03, .footer-optional .content-hyperlink) a, .formbody .widget-submit button {display: inline-block; width: auto; font-size: var(--fontsize-l);font-weight: 600;text-decoration: none;padding: 8px 16px;cursor: pointer;border-radius: var(--border-rad-01);transition: var(--animation-01);} #main *:is(.button-01, .button-02, .button-03, .footer-optional .content-hyperlink) a::before { content: ''!important;} #main .content-hyperlink:not(.button-01, .button-02, .button-03, .footer-optional .content-hyperlink) {margin-bottom: 0;} #main .content-hyperlink:not(.button-01, .button-02, .button-03, .footer-optional .content-hyperlink) a {font-size: var(--fontsize-l);font-weight: 600;text-decoration: none;transition: var(--animation-01);} #main .content-hyperlink:not(.button-01, .button-02, .button-03, .footer-optional .content-hyperlink) a:hover {color: var(--color-01);} #main .content-hyperlink:not(.button-01, .button-02, .button-03, .footer-optional .content-hyperlink) a span {font-size: var(--fontsize-m);font-weight: 400;} .formbody .widget-submit button, #main .button-01 a {color: var(--colorlight)!important;background: transparent linear-gradient(125deg, var(--color-02) 0%, var(--color-03) 100%) no-repeat;border: 1px solid var(--color-01);} #main :is(.button-02, .button-03) a {color: var(--color-grey-05)!important;background: var(--colorlight-trans01);} #main .button-02 a {border: 1px solid var(--color-01);} #main .button-03 a {border: 1px solid var(--color-grey-05);} #main *:is(.button-01) a:hover, .formbody .widget-submit button:hover {opacity: 1!important; box-shadow: 2px 2px 6px var(--color-grey-03);transform: translate(-2px, -2px);} #main *:is(.button-02, .button-03) a:hover { opacity: 1!important; box-shadow: 2px 2px 6px var(--color-grey-03) inset; text-shadow: 3px 3px 4px var(--color-grey-02);} /* Default widths for block-elements */ #header .inside, #main .inner, #main > .inside > .block > *, #footer .inside {max-width: var(--content-width01); width: 100%; margin-left: auto!important; margin-right: auto!important; padding-left: var(--side-space-01); padding-right: var(--side-space-01);} #main > .inside > .block {max-width: var(--content-width02);margin-right: auto;margin-left: auto;} /* Default-margin-bottom for block-elements... */ #main .mod_article, #main > .inside > .block > *:not(.wide, .content-headline) {margin-bottom: var(--space-below-03);} #main .content-element-group:not(.columns, .grid-6-blocks) > *:not(:last-child) {margin-bottom: var(--space-below-02);} /* ... and exceptions */ #main .width-low {max-width: var(--content-width002)!important;} #main .mod_article.columns > :not(.content-image, .columns), #main .mod_article:is(.bg-pic-01, .bg-pic-02, .bg-color-00, .bg-color-01, .bg-color-02, .bg-color-03, .bg-color-04, .bg-color-05, .bg-color-06, .layout-group-01-wrap) {padding-top: var(--space-below-03);padding-bottom: var(--space-below-01);} #header {box-shadow: var(--shadow-01);background: var(--colorlight);position: fixed;top: 0;left: 0;width: 100%;z-index: 900;} #header .inside {position: relative;} #header .skip-link {display: block;position: absolute;top: 0;left: var(--side-space-01);margin-top: 5px;z-index: 999;background: var(--color-01);color: var(--colorlight);padding: 5px 10px;border-radius: 5px;text-decoration: none;max-height: 40px;transform: translateY(-60px);transition: var(--animation-01);} #header .skip-link:focus {transform: translateY(0);} #header a:focus {outline: 0;} #header .title {display: flex;align-items: flex-end; gap: 10px; text-decoration: none; padding: var(--space-below-02) 0 var(--space-below-01) 0;} #header .title a {display: block;} #header .title a:is(:hover, :focus) {opacity: var(--hover-opacity);} #header .title img {display: block;width: auto; height: var(--logo-height-full); border: none;margin-bottom: 3px;transition: var(--animation-01);} #header .title p {color: var(--color-grey-05);text-decoration: none;font-size: 20px;line-height: 1.1;margin: 0;font-weight: 400;transition: var(--animation-01);} #header .mod_customnav {position: absolute;top: 0;right: var(--side-space-01);background: var(--color-grey-04);padding: var(--space-below-01) var(--side-space-02) var(--space-below-01) var(--side-space-02);transition: var(--animation-01);} #header .mod_customnav ul {display: flex;align-items: center;justify-content: space-between;gap: var(--gap-menu);margin: 0;} #header .mod_customnav ul li {display: flex;gap:5px;align-items: center;} #header .mod_customnav ul li > * {color: var(--color-grey-05);text-decoration: none;} #header .mod_customnav ul li :is(figure, img) {display: block;} #header .mod_customnav a:is(:hover, :focus) {color: var(--color-01);} #header.scrolled .title {padding: var(--space-below-01) 0 var(--space-below-00) 0;} #header.scrolled .title img {height: var(--logo-height-small);} #header.scrolled .title p {font-size: var(--fontsize-xs);opacity: 0;} #header.scrolled .mod_customnav {padding-bottom: var(--space-below-00); padding-top: var(--space-below-00);} #header .mod_navigation {position: relative;height: var(--nav-height);} #header .mod_navigation ul {margin: 0;} #header .mod_navigation ul.level_1 {display: flex; justify-content: space-between;align-items: center;margin-bottom: 0;gap: var(--gap-menu);position: relative;} #header .mod_navigation li > :is(a, strong) {display: block;font-size: var(--fontsize-xl);line-height: 1.4;font-weight: 600;white-space: nowrap;color: var(--colordark); text-decoration: none;} #header .mod_navigation ul.level_1 > li.trail > :is(a, strong), #header .mod_navigation ul.level_1 li > a:is(:hover, :focus), #header .mod_navigation ul.level_1 li > .active {color: var(--color-01);} #header .mod_navigation ul.level_1 > li:is(:hover, :focus-within) > ul.level_2, #header .mod_navigation ul.level_1 > li > ul.level_2:hover {opacity: 1;visibility: visible;padding-top:var(--space-below-02);} #header .mod_navigation ul.level_2 { opacity: 0;visibility: hidden;padding-top:0;padding-bottom:var(--space-below-02);transition: var(--animation-01); background-color: var(--color-grey-01);border-top: 1px solid var(--color-grey-03);box-shadow: var(--shadow-02); position: absolute;top: var(--nav-height);right: 0;z-index: 10;width: 100%; margin: 0; padding-left: var(--side-space-01); padding-right: var(--side-space-01); display: flex;justify-content: center;gap: var(--gap-01);} #header .mod_navigation ul.level_2 > * {min-width: calc( 20% - var(--gap-01));} #header .mod_navigation ul.level_1 > li {} #header .mod_navigation ul.level_1 > li > :is(a, strong) {display: block;height: var(--nav-height);} #header .mod_navigation ul.level_2 :is(a, strong) {font-size: var(--fontsize-m);font-weight: 400;color: var(--color-grey-05);} #header .mod_navigation ul.level_2 > li > :is(a, strong) {pointer-events: none;font-weight: 600;text-transform: uppercase;border-bottom: 1px solid var(--color-grey-03);padding-bottom: 3px;margin-bottom: var(--space-below-01);} #header .mod_navigation ul.level_2 > li > figure {height: 60px;margin-bottom: var(--space-below-01);} #header .mod_navigation ul.level_2 > li > figure img {height: 100%;width: auto;max-width: 140px;filter: grayscale(100%) opacity(50%);} /* Menu produkte always visible */ /* #header .mod_navigation li.produkte ul.level_2 {visibility: visible;opacity: 1;padding-top: var(--space-below-02);} */ #header .mod_navigation li.produkte ul.level_3 > li > :is(a, strong) {font-weight: 600;} #header .mod_navigation li.produkte ul.level_3 > .submenu {min-height: 150px;} /* Styles "produkte > zubehör" */ #header .mod_navigation li.produkte ul.level_2 > li:nth-child(4) ul.level_3 > li {min-height: auto;} #header .mod_navigation li.produkte ul.level_2 > li:nth-child(4) ul.level_3 > li > :is(a, strong) {font-weight: 600;} /* Styles "produkte > ausstattung" */ #header .mod_navigation li.produkte ul.level_2 > li:last-child ul.level_3 > li { min-height: auto;margin-bottom: var(--space-below-01);} #header .mod_navigation li.produkte ul.level_2 > li:last-child ul.level_3 > li > :is(a, strong) {text-transform: uppercase;color: var(--color-grey-03);} #header .mod_navigation li.produkte ul.level_2 > li:last-child ul.level_4 > li > :is(a, strong) {font-weight: 600;} #container {padding-top: calc( var(--space-below-02) + var(--logo-height-full) + var(--space-below-01) + var(--nav-height) );} #main .no-space-below {margin-bottom: 0!important;} #main {min-height: 80vh;} #main p {line-height: 1.5;} #main > .inside > *:first-child:not(.bg-pic-01, .bg-pic-02, .banner-01, .box-element, .slideshow-02) {margin-top: var(--space-below-03);} /* GRAPHICS: red bar */ #main h1::before, #main .grid-6-blocks > div.content-image figure::before, #main .content-image:not(.text-overlay) figure:has(figcaption) figcaption::before {content: '';display: block;height: 8px;width: 180px;max-width: 100%;background: var(--color-01);} /* GRAPHICS: red bar positioning */ #main .grid-6-blocks > div.content-image figure, #main .content-image:not(.text-overlay) figure:has(figcaption) figcaption { position: relative; } #main .grid-6-blocks > div.content-image figure::before {position: absolute;bottom: 0;left: 0;z-index: 1;} #main .content-image:not(.text-overlay) figure:has(figcaption) figcaption::before {position: absolute;top: -8px;left: 0;z-index: 1;} /* GRAPHICS: red arrow */ #main .link-box::before, #main .content-gallery a::before {content: '›';position: absolute;z-index: 10;bottom: -4px;right: -4px;font-size: 29px;background: var(--color-02);color: var(--colorlight);font-weight: 600;width: 20px;height: 20px;line-height: 16px;text-align: center;} #main h1::before {margin-bottom: 15px;} #main :is(.content-text, .content-list) ul {list-style: square;} #main :is(.content-text, .content-list) :is(ul, ol) li {margin-left: 20px;} /* STANDARD-ELEMENTS */ #main table {border:0;text-align: left;width: 100%;} #main table tr:not(:last-child) {border-bottom: 1px solid var(--color-grey-03);} #main table :is(td, th) {border: 0;padding: var(--space-below-00) var(--side-space-00);vertical-align: top;} #main table th {font-weight: 600;} #main table thead th {background: var(--color-grey-01);padding-top: var(--space-below-01);padding-bottom: var(--space-below-01);} #main :is(.content-table) {max-width: 100%;overflow-x: auto;} #main .content-text .rte > * > img {vertical-align: middle;} iframe {background: url("../img/loading.gif") no-repeat scroll center center var(--colorlight);} .content-youtube iframe, .content-vimeo iframe, .content-player video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} #main :is(.content-youtube, .content-vimeo, .content-player) figure {position: relative;padding-bottom: 55%;height: 0;overflow: hidden;margin-bottom: 15px;} #main :is(.content-text, #asp-table) a { color: var(--color-01);text-decoration: none;transition: var(--animation-01);} #main :is(.content-text, #asp-table) a:hover { color: var(--color-grey-05);} #main :is(.content-text, .content-hyperlink, #asp-table) a::before { content: '›';font-weight: 600;transform: scale(1.5) translate(0, -2px);display: inline-block;margin: 0 4px;color: var(--color-01);} #main .content-text > figure > a::before {content: ''!important;display: none!important;} #main .content-text ul.link-list {list-style: none;} #main .content-text ul.link-list li {margin-left: 0;padding-left: 15px;} #main .content-text ul.link-list li a {position: relative;margin-left: 0;} #main .content-text ul.link-list li a::before {position: absolute;left: -15px;margin: 0;color:var(--color-01);} #main .content-text ul.link-list li a {color: var(--color-grey-05)!important;} #main .content-text ul.link-list li a::before, #main .content-text ul.link-list li a:hover {color:var(--color-01)!important;} #main .content-description-list dt:first-child {margin-top: 0;padding-top: 0;border-top: none;} #main .content-description-list dt {text-transform: uppercase;color: var(--color-grey-06);border-top: 1px solid var(--color-grey-03);padding-top: var(--space-below-00);margin-top: var(--space-below-00);} #main .box-01.content-description-list dt {color: var(--color-grey-05);} #main .content-gallery {} #main .content-gallery > ul {list-style: none;display: grid;gap: var(--gap-00);} #main .content-gallery--cols-1 > ul {grid-template-columns: 1fr;} #main .content-gallery--cols-2 > ul {grid-template-columns: repeat(2, minmax(0, 1fr));} #main .content-gallery--cols-3 > ul {grid-template-columns: repeat(3, minmax(0, 1fr));} #main .content-gallery--cols-4 > ul {grid-template-columns: repeat(4, minmax(0, 1fr));} #main .content-gallery--cols-5 > ul {grid-template-columns: repeat(5, minmax(0, 1fr));} #main .content-gallery--cols-6 > ul {grid-template-columns: repeat(6, minmax(0, 1fr));} #main .content-gallery--cols-7 > ul {grid-template-columns: repeat(7, minmax(0, 1fr));} #main .content-gallery--cols-8 > ul {grid-template-columns: repeat(8, minmax(0, 1fr));} #main .content-gallery--cols-9 > ul {grid-template-columns: repeat(9, minmax(0, 1fr));} #main .content-gallery--cols-10 > ul {grid-template-columns: repeat(10, minmax(0, 1fr));} #main .content-gallery ul li {margin: 0;} #main .content-gallery figure {} #main .content-gallery figcaption {word-break: break-all; font-size: var(--fontsize-s);line-height: 1;padding-top: 4px;} #main .content-gallery a {position: relative;display: block;transition: var(--animation-01);} #main .content-gallery a:hover { transform: var(--transform-scale-01); } #main .content-gallery img {display: block;} #main .content-image img {display: block;} #main :is(.media--left, .media--right) {display: flex;flex-wrap: wrap;gap: var(--gap-00);} #main :is(.media--left, .media--right) > figure {flex-grow: 0;flex-shrink: 0;} #main :is(.media--left, .media--right) > .rte {flex: 1;min-width: 0;} #main .media--right > figure {order: 2;} #main :is(.media--left, .media--right) > :is(h1, h2, h3, h4, h5, h6) {width: 100%;} #main .download-element {display: flex;flex-wrap: wrap;flex-direction: column;} #main .download-element figure {order: -1;} #main .download-element a {transition: var(--animation-01);} #main .download-element a:hover {text-decoration: none!important;opacity: var(--hover-opacity);} #main .download-element a span.linktitle {display:block;font-size: var(--fontsize-m);font-weight: 600;} #main .download-element a span:is(.filename, .filesize) {display: block;font-size: var(--fontsize-s);} #main .download-element a span.filesize::after {content: ')';} #main .download-element a span.filesize::before {content: '(';} #main .download-element.ext-pdf a span.filesize::before {content: '(PDF ';} #main .download-element a {position: relative; padding-left: 40px;text-decoration: none;} #main .download-element a:hover {text-decoration: underline;} #main .download-element a::before {content: '↓'; font-size: 32px;background: var(--colordark);color: var(--colorlight);font-weight: 700;width: 30px;height: 30px;line-height: 8px;text-align: center;border-radius: 50%;text-decoration: underline;display: block;text-underline-offset: 5px;position: absolute;left: 0;top: 0;text-shadow: 1px 0px 0px var(--colorlight);letter-spacing: -1px;overflow: hidden;transition: var(--animation-01);} #main .download-element a:hover::before {line-height: 14px;} #main .download-element figure img {max-width: 150px;border: 1px solid var(--color-grey-02);} #main .content-downloads .download-element {display: flex;flex-direction: unset;align-items: center;gap: 10px;} #main .content-downloads .download-element a {padding: 0;align-items: center;text-decoration: none;transition: var(--animation-01);} #main .content-downloads .download-element a:hover {} #main .content-downloads .download-element a span {color: green;margin-left: 10px;} #main .content-downloads .download-element a::before {content: '';display: none;} #main .content-downloads .download-element figure {display: flex;} #main .content-downloads .download-element.ext-pdf img {content: url(../img/pdf-icon.svg);border: none;} /* COLUMNS ---------- */ #main .cols-50-50 {grid-template-columns: repeat(2, 1fr);} #main .cols-33-33-33 {grid-template-columns: repeat(3, 1fr);} #main .cols-25-25-25-25 {grid-template-columns: repeat(4, 1fr);} #main .cols-20-20-20-20-20 {grid-template-columns: repeat(5, 1fr);} #main .cols-33-66 {grid-template-columns: 1fr 2fr;} #main .cols-66-33 {grid-template-columns: 2fr 1fr;} /* Class ".columns" added for following elements via presets.js */ :is(.cols-50-50, .cols-66-33, .cols-33-66, .cols-33-33-33, .cols-25-25-25-25, .cols-25-25-gap-25-25, .cols-20-20-20-20-20) {display: none;} #main .columns {display: grid;grid-template-rows: auto;gap: 0 var(--gap-01);box-sizing: border-box;} #main .columns > :is(h1, h2, h3, h4, h5, h6) {grid-column: 1 / -1;margin-bottom: var(--space-below-01);} #main .columns > div {margin-bottom: 0;} #main .mod_article.columns {padding-top: 0;padding-bottom: 0;} #main .mod_article.columns > *{padding-left: 0;padding-right: 0;} #main .mod_article.columns > .content-image {margin-bottom: 0;} #main .mod_article.columns > .content-image, #main .mod_article.columns > .content-image * {height: 100%;} #main .mod_article.columns > .content-image img {object-fit: cover;height: 100%;width: 100%;} #main .mod_article.columns > .content-image figcaption {display: none;visibility: hidden;} #main .mod_article.columns > :not(.content-image, .columns) > * {max-width: var(--content-width001);margin-left: auto;margin-right: auto;} #main .mod_article.columns > .content-image.pic-contain img {object-fit: contain;object-position: top;} #main .mod_article.columns:not(.cols-25-25-gap-25-25) > *:not(.content-image, .columns):first-child {padding-left: var(--side-space-02);} #main .mod_article.columns:not(.cols-25-25-gap-25-25) > *:not(.content-image, .columns):last-child {padding-right: var(--side-space-02);} #main .mod_article.cols-25-25-gap-25-25 {position: relative;grid-template-columns: 1fr 1fr var(--gap-01) 1fr 1fr; grid-template-areas: "block01 block02 block03 block05 block04";} #main .mod_article.cols-25-25-gap-25-25 > :nth-child(3) {background: var(--colorlight); width: var(--gap-01); height: 100%;padding: 0;margin: 0;} #main .mod_article.cols-25-25-gap-25-25 > :nth-child(3) * {display: none;} #main .grid-6-blocks { display: grid;grid-template-columns: repeat(3, 1fr); grid-template-areas: "block01 block04 block05" "block02 block03 block06"; gap: 0 var(--gap-01);} #main .grid-6-blocks img {display: block;} #main .grid-6-blocks > div {margin: 0; background: var(--color-grey-01);} #main .grid-6-blocks > div.content-text { background: var(--color-grey-01);padding: var(--space-below-01) var(--side-space-01); } #main .grid-6-blocks > div.content-image figure {} #main .grid-6-blocks > div.content-image figure:has(figcaption)::before {display: none;} #main :is(.grid-6-blocks, .cols-25-25-gap-25-25) > div:nth-child(1) { grid-area: block01; } #main :is(.grid-6-blocks, .cols-25-25-gap-25-25) > div:nth-child(2) { grid-area: block02; } #main :is(.grid-6-blocks, .cols-25-25-gap-25-25) > div:nth-child(3) { grid-area: block03; } #main :is(.grid-6-blocks, .cols-25-25-gap-25-25) > div:nth-child(4) { grid-area: block04; } #main :is(.grid-6-blocks, .cols-25-25-gap-25-25) > div:nth-child(5) { grid-area: block05; } #main .grid-6-blocks > div:nth-child(6) { grid-area: block06; } /* BOXES ---------- */ /* class ".box-element" added for following elements via presets.js */ :is(.box-01, .box-02, .bg-color-00, .bg-color-01, .bg-color-02, .bg-color-03, .bg-color-04, .bg-color-05, .bg-color-06){opacity: 0;} #main .box-element {opacity: 1;} #main .box-element:not(.mod_article) {padding: var(--space-below-01) var(--side-space-02);} #main .content-element-group.columns.box-element {padding: var(--space-below-01) calc(var(--side-space-01) + var(--side-space-02));} #main .content-element-group.columns.box-element {position: relative;background: none;} #main .content-element-group.columns.box-element > * {position: relative;z-index: 1;} #main .content-element-group.columns.box-element::before {content: '';position: absolute;left: 0;top: 0;z-index: 0; width: calc(100% - var(--side-space-01) - var(--side-space-01)); height: 100%; margin: 0 var(--side-space-01);} #main .box-01 {border: 1px solid var(--color-01);} #main .box-02 {border: 1px solid var(--color-grey-02);} #main :is(.bg-pic-01, .bg-pic-02, .bg-pic-03) :is(.box-01, .box-02) {background: rgba(255,255,255,0.8);} /* BACKGROUNDS ---------- */ #main .bg-color-00, #main .bg-color-00.columns::before {background: var(--colorlight);} #main .bg-color-01, #main .bg-color-01.columns::before {background: var(--color-grey-01);} #main .bg-color-02, #main .bg-color-02.columns::before {background: linear-gradient(202deg, var(--color-grey-01) 0%, var(--colorlight) 100%);} #main .bg-color-03, #main .bg-color-03.columns::before {background: var(--color-01);} #main .bg-color-03, #main .bg-color-03 * {color: var(--colorlight);} #main .bg-color-03 a, #main .bg-color-03 a::before {color: var(--colorlight)!important;} #main .bg-color-04 {background: url(../img/bg-dots-light.jpg) no-repeat;background-size: cover;} #main .bg-color-05, #main .bg-color-05.columns::before {background: linear-gradient(0deg, var(--color-grey-01) 0%, var(--colorlight) 100%);} #main .bg-color-06, #main .bg-color-06.columns::before {background: var(--colorlight-trans01);} #main :is(.bg-pic-01, .bg-pic-02, .bg-pic-03, .banner-01) {position: relative;transition: var(--animation-01);} #main :is(.bg-pic-01, .bg-pic-02, .bg-pic-03, .banner-01) > * {z-index: 1;position: relative;} #main :is(.bg-pic-01, .bg-pic-02, .banner-01) > .content-image:first-child, #main .banner-02 {opacity:0;transition: var(--animation-01);} #main :is(.bg-pic-01, .bg-pic-02, .banner-01).img-loaded > .content-image:first-child, #main .banner-02.img-loaded {opacity:1;} #main :is(.bg-pic-01, .bg-pic-02, .banner-01) > .content-image:first-child {width: 100%;height: 100%;overflow: hidden;margin: 0; padding: 0;max-width: 100%;} #main :is(.bg-pic-01, .bg-pic-02, .banner-01) > .content-image:first-child :is(figure, picture, img) {width: 100%;height: 100%;display: block;} #main :is(.bg-pic-01, .bg-pic-02, .banner-01) > .content-image:first-child img {object-fit: cover;} #main .bg-pic-01 > .content-image:first-child {position: absolute;z-index: 0;top: 0;left: 0px;} #main :is(.bg-pic-02, .banner-01) {padding-top: 0 !important;} #main :is(.bg-pic-02, .banner-01) > .content-image:first-child { aspect-ratio: 3 / 1; margin-bottom: var(--space-below-03);} #main .bg-pic-03 > .content-image:first-child {position: absolute;z-index: 0;top: 0;left: 0px;max-width: 100%;width: 100%;height: 100%;} #main .bg-pic-03 > .content-image:first-child figure {height: 100%;display: flex;justify-content: center;align-items: center;} #main .bg-pic-03 > .content-image:first-child figure img {width: auto;} #main .banner-01 > *:not(.content-image) {opacity: 0;transform: translateX(-80px);transition: var(--animation-01);} #main .banner-01.img-loaded > *:not(.content-image) {opacity: 1;transform: translateX(0);} #main .banner-02 > *:not(.content-headline, .content-image) {font-size: var(--fontsize-xl);margin-bottom: 0 !important;padding-top: 0 !important;} #main .banner-02 > .content-headline {padding-left: var(--side-space-01) !important;} #main .banner-02 ul li {margin-left: 30px;} /* EXTRAS ---------- */ #main .bg-map-animate {position: relative;overflow: hidden;} #main .bg-map-animate > * {position: relative;z-index: 1;} #main .bg-map-animate .map {margin: 0 !important;position: absolute;top: 0;left: 0;height: 100%;max-width: 100%;padding: 0;} #main .bg-map-animate .map .inner {height: 100%;position: relative;} #main .bg-map-animate .map .pic {background-image: url(../img/map02.svg);height: 100%;width: 1200px;background-size: 1200px auto;background-position: 0 -415px;background-repeat: no-repeat;position: absolute;right: 100px;top: 0;z-index: 1;} #main .bg-map-animate .map .marker {position: absolute;right: 285px;top: 85px;z-index: 2;width: 20px;height: 20px;background: var(--color-01); border-radius: 50%;overflow: visible;} #main .bg-map-animate .map .marker span {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 2px solid var(--color-01); border-radius: 50%;animation: pulse 3s infinite;transform-origin: center; box-sizing: border-box;display: block;} @keyframes pulse { 0% {transform: scale(1);opacity: 1;} 100% {transform: scale(3);opacity: 0;} } #main .content-image:not(.text-overlay) figure:has(figcaption) figcaption {font-size: var(--fontsize-s);text-transform: uppercase;font-weight: 600;} #main .text-overlay figure {position: relative;} #main .text-overlay figcaption {background: var(--colorlight);color: var(--color-grey-05);position: absolute;bottom: 0;left: 0;margin: 0 0 0 5%;padding: 10px 15px;min-width: 270px;width: 80%;z-index: 1;} #main .text-overlay figcaption * {color: var(--color-grey-05);} #main .text-overlay img {display: block;} #main .content-element-group.columns .pic-fill figure {overflow: visible;} #main .content-element-group.columns .pic-fill figure img {max-width: calc(100% + var(--side-space-02));margin-top: calc(-1 * var(--space-below-01));margin-bottom: calc(-1 * var(--space-below-01));} #main .content-element-group.columns .pic-fill.content-image:first-child figure img, #main .content-element-group.columns .pic-fill.media--left figure img {margin-left: calc(-1 * var(--side-space-02));} #main .content-element-group.columns .pic-fill.media--right figure img {margin-right: calc(-1 * var(--side-space-02));} #main .mobile-option > *:last-child {display: none;} #main .checkbox-animation ul {list-style: none;} #main .checkbox-animation ul li {position: relative;margin-left: 0;padding-left: 24px;margin-bottom: var(--space-below-01);} #main .checkbox-animation ul li span.click-target {z-index: 1;left: 0; top: 5px;background: var(--colorlight);border: 1px solid var(--colordark);cursor: pointer;width: 15px; height: 15px; display: block; position: absolute;} #main .checkbox-animation ul li span.click-target::after, #main .checkbox-animation ul li span.click-target::before {display: none;position: absolute;z-index: 1;content: '';background: var(--color-01);width: 2px;} #main .checkbox-animation ul li span.click-target.active::after, #main .checkbox-animation ul li span.click-target.active::before {display: block;} #main .checkbox-animation ul li span.click-target::before {left: 3px;top: -4px;height: 14px;transform: rotate(-13deg);} #main .checkbox-animation ul li span.click-target::after {left: 10px;top: -16px;height: 26px;transform: rotate(26deg);} #main .wrap-align-center-01 {display: flex; align-items: center; gap: var(--gap-01);} #main .wrap-align-center-01 > * {margin-bottom: 0!important;} #main .push-up-00 {margin-top: -150px;} #main .push-up-01 {margin-top: -220px;} #main .push-up-02 {margin-top: -260px;} #main .columns > :is(.push-up-00, .push-up-01, .push-up-02) {align-self: flex-start;} #main .mod_article.border-top {border-top: 1px solid var(--color-grey-03);} #main .mod_article.border-bottom {border-bottom: 1px solid var(--color-grey-03);} #main .mod_article > .content-element-group.border-top::before, #main .mod_article > .content-element-group.border-bottom::after {content: '';background: var(--color-grey-03);width: calc(100% - var(--side-space-01) - var(--side-space-01));position: absolute;left: var(--side-space-01);height: 1px;} #main .mod_article > .content-element-group.border-top {position: relative;} #main .mod_article > .content-element-group.border-top::before {top: 0;} #main .mod_article > .content-element-group.columns.border-top > * > *:first-child:is(h2, h3, h4, h5, h6) {padding-top: var(--space-below-01);} #main .mod_article > .content-element-group.border-bottom {position: relative;} #main .mod_article > .content-element-group.border-bottom::after {bottom: 0;} #main .mod_article > .content-element-group.columns.border-bottom > * {margin-bottom: 0;} #main .layout-group-01-wrap {background: var(--color-grey-01);} #main .layout-group-01 figcaption {display: none;} #main .layout-group-01 {margin-bottom: 0 !important;} #main .layout-group-01 > :is(h2, h3, h4, h5, h6) {margin: 0 0 5px 120px;line-height: 40px;} #main .layout-group-01 > div {margin-bottom: var(--space-below-02);} #main .layout-group-01 img {display: block;} #main .layout-group-01 .content-image {position: relative;margin-bottom: 0!important;} #main .layout-group-01 .content-image figure {position: absolute;top: 0;left: 0;z-index: 1;} #main .layout-group-01 .content-image :is(h2, h3, h4, h5) {margin: 0 0 9px 120px;line-height: 40px;} #main .layout-group-01 .content-text {display: flex;gap: var(--gap-01);align-items: center;} #main .layout-group-01 .content-text figure {margin: 0;flex-basis: 70%;float: none;} #main .layout-group-01 .content-text figure img {max-width: 100%;} #main :is(.spacer-01, .spacer-02, .spacer-03) {margin-bottom: 0 !important;} #main .spacer-01 {height: var(--space-below-03);} #main .spacer-02 {height: calc(var(--space-below-03) * 2);} #main .spacer-03 {height: calc(var(--space-below-03) * 4);} #main .link-box {position: relative;transition: var(--animation-01);} #main .link-box:hover {transform: var(--transform-scale-01);cursor: pointer;} #main .link-box.bg-color-03::before {background: var(--colorlight);color: var(--color-02);border: 1px solid var(--color-02);} #main .link-box a {color: inherit!important;} #main .link-box a::before {display: none!important;} #main .flip-card {position: relative;perspective: 2000px;aspect-ratio: 1 / 1;margin-bottom: var(--space-below-02) !important;padding: 0!important;background: none;} #main .flip-card > * {position: absolute;top: 0;left: 0;width: 100%;aspect-ratio: 1 / 1; overflow: hidden;backface-visibility: hidden;transform-style: preserve-3d;transition: var(--animation-01);} #main .flip-card > *:first-child {z-index: 2;transform: rotateY(0deg);} #main .flip-card > *:last-child {z-index: 1;transform: rotateY(180deg);} #main .flip-card:hover > *:first-child {z-index: 2;transform: rotateY(-180deg);} #main .flip-card:hover > *:last-child {z-index: 1;transform: rotateY(0deg);} /* #main .flip-card > *:first-child {z-index: 2;transform: rotateY(-180deg);} #main .flip-card > *:last-child {z-index: 1;transform: rotateY(0deg);} */ #main .flip-card > .content-image:first-child figure {background: var(--color-light);display: flex;justify-content: center;align-items: center;height: 100%;} #main .flip-card > .content-image:first-child:has(figcaption) figcaption {position: absolute !important;z-index: 1;font-size: var(--fontsize-2xl) !important;text-transform: none !important;text-align: center;} #main .flip-card > .content-image:first-child:has(figcaption) figcaption::before {display: none !important;} /* #main .flip-card > .content-text:not(.media) {display: flex;flex-wrap: wrap;align-items: center;align-content: center;} */ #main .flip-card > .content-text {display: flex;flex-wrap: wrap;align-items: center;align-content: center;} #main .flip-card > .content-text:is(.media--above, .media--below) {justify-content: center;} #main .flip-card > .content-text:is(.media--above, .media--below) > * {width: 100%;text-align: center;} #main .icon-01.content-headline:is(h4, h5)::before, #main .icon-01 > :is(h4, h5)::before {content: '';height: 20px;width: 25px;background: var(--color-01);display: inline-block;margin-right: 4px;} #main .slideshow-01 {position: relative;overflow: hidden; height: calc(var(--slideshow-01-width) + var(--space-below-03) + 40px);width: 100%;} #main .slideshow-01 ul { width: var(--slideshow-01-width); height: auto; aspect-ratio: 1 / 1; margin-bottom: 0!important;position: absolute;top: 40%;left: 50%;transform: translate(-50%, -50%);} #main .slideshow-01.opt-01 {height: calc(calc(var(--slideshow-01-width)*2.1) + var(--space-below-03) + 50px);} #main .slideshow-01.opt-01 ul {aspect-ratio: 1 / 1.9;} #main .slideshow-01.opt-01 .actions {top:calc(calc(var(--slideshow-01-width)*2.1) + var(--space-below-03));} #main .slideshow-01 ul li {position: absolute;top: 0;left: 0;transform-origin: bottom;} #main .slideshow-01 ul li figcaption {will-change: transform;transform: translate3d(0, 0, 0);backface-visibility: hidden;} /* reduce jittering of text */ #main .slideshow-01 ul li, #main .slideshow-01 ul li * {height: 100%; width: 100%;} #main .slideshow-01 ul li img { object-fit: cover;} #main .slideshow-01 .actions {position: absolute;top:calc(var(--slideshow-01-width) + var(--space-below-03)); left: 50%;transform: translateX(-50%);display: flex;gap: 10px;padding-top: 10px;} #main .slideshow-01 button {display: block;border: 1px solid var(--color-01);background: var(--colorlight);height: 30px;width: 30px;font-weight: 300;color: var(--color-01);font-size: 26px;line-height: 1;text-align: center;} #main .slideshow-01 button::before {display: block;height: 100%;} #main .slideshow-01 .next::before {content: '›';} #main .slideshow-01 .prev::before {content: '‹';} #main .slideshow-01 button:hover {cursor: pointer;background: var(--color-01);color: var(--colorlight);} #main .slideshow-02 {opacity: 0;transition: var(--animation-01);position: relative;height: 70vh;min-height: 400px;width: 100%;} #main .slideshow-02.img-loaded {opacity: 1;} #main .slideshow-02 ul {position: relative;max-width: 100% !important;} #main .slideshow-02 li {opacity: 0;transition: opacity 1.5s ease-in-out 0s;position: absolute;top: 0;left: 0;} #main .slideshow-02 li.active {opacity: 1;} #main .slideshow-02 :is(ul, li, div:not(.rte), figure, picture, img) {height: 100%; width: 100%;} #main .slideshow-02 li > div {position: relative;} #main .slideshow-02 li > div picture {display: block;overflow: hidden;} #main .slideshow-02 figcaption {display: none;} #main .slideshow-02 .content-text .rte {position: absolute;bottom: 2vh;left: 0;z-index: 2; width: 100%;display: flex; justify-content: center; padding: var(--space-below-01) 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 26%, rgba(255, 255, 255, 0.9) 71%, rgba(255, 255, 255, 0) 100%);} #main .slideshow-02 .content-text .rte > * {font-size: clamp(48px, -20.659px + 8.791vw, 120px)!important;line-height: 1; font-weight: 600; color: var(--colordark); margin-bottom: 0; text-indent: -1em;margin-left: 1em; transform: translateX(20vw);opacity: 0;transition: all 2s ease-in-out 0s;} #main .slideshow-02 li.active:is(.effect-1, .effect-2, .effect-3) .content-text .rte > * {transform: translateX(0); opacity: 1;} #main .slideshow-02 li:not(.active):is(.effect-1, .effect-2, .effect-3) .content-text .rte > * {transform: translateX(-20vw); opacity: 0;} #main .slideshow-02 li > div figure {position: relative;} #main .slideshow-02 li > div figure figcaption::before {display: none!important;} #main .slideshow-02 li > div img {object-fit: cover;transform: scale(1);} #main .slideshow-02 li.effect-1 img {animation: kenBurns1 8.0s linear; } #main .slideshow-02 li.effect-2 img {animation: kenBurns2 8.0s linear; } #main .slideshow-02 li.effect-3 img {animation: kenBurns3 8.0s linear; } @keyframes kenBurns1 { 0% { transform: scale(1) translate(0, 0); /* Start: normal size, centered */ } 100% { transform: scale(1.15) translate(-3%, -1%); /* End: 10% zoom, move up-left */ } } @keyframes kenBurns2 { 0% { transform: scale(1) translate(0, 0); /* Start: normal size, centered */ } 100% { transform: scale(1.15) translate(4%, -3%); /* End: 15% zoom, move down-right */ } } @keyframes kenBurns3 { 0% { transform: scale(1.2) translate(0, -7%); /* Start: 5% zoom, slightly down */ } 100% { transform: scale(1.0) translate(0, 5%); /* End: 20% zoom, move up */ } } #main .footer-optional-wrap {background: var(--color-01);margin-bottom: 0;} #main .footer-optional {display: flex;gap: var(--gap-01);justify-content: space-between;align-items: center;padding: var(--space-below-02) 0;margin-bottom: 0 !important;} #main .footer-optional * {color: var(--colorlight);margin-bottom: 0!important;} #main .footer-optional .content-text {font-size: var(--fontsize-3xl);font-weight: 600;} #main .footer-optional .content-hyperlink {white-space: nowrap;} #main .footer-optional .content-hyperlink a {background: var(--colorlight);color: var(--color-01);font-size: var(--fontsize-2xl);} /* TINYMCE-Editor Formats (apply changes also to /css/customtinymce.css) */ #main .text-format-01 {color: var(--color-01);} #main .text-format-02 {color: var(--colordark); font-size: var(--fontsize-4xl);line-height: 1.1; font-weight: 600;} #main .text-format-03 {color: var(--color-01); font-size: var(--fontsize-4xl);line-height: 1.1; font-weight: 600;} #main .text-format-04 {color: var(--color-01); font-size: var(--fontsize-xl);font-weight: 600;} #main .text-format-05 {color: var(--colordark); font-size: var(--fontsize-xl);font-weight: 600;} #main .text-format-06 {color: var(--color-01); font-size: var(--fontsize-5xl);line-height: 1;font-weight: 600;} /* PLZ ANSPRECHPATNER start ---------- */ #main .asp-fill, #main #asp-path, #main .ce_form .asp, #main #asp-table {display: none;} #main #asp-table {display: block;} #main #asp-table table {width: 100%;} #main #asp-table tr {display: none;} #main #asp-table tr.active {display: block;} #main #asp-search {position: relative;aspect-ratio: 1 / 1;} #main #asp-search .map {position: absolute;z-index: -1;Left: 0; width: 100%;padding: 0 15%;} #main #asp-search fieldset {border: 0;} #main #asp-search label {display: block;margin: var(--space-below-03) 0 var(--space-below-01);} #main #asp-search #asp-input {max-width: 150px;margin-bottom: var(--space-below-03);} #main #asp-table tr td {display: none;} #main #asp-table tr td.col_1, #main #asp-table tr td.col_3, #main #asp-table tr td.contact, #main #asp-table tr td.image_container {display: block;} #main #asp-table tr td.image_container {max-width: 200px;float: right;} #main #asp-table tr td.image_container img {width: 100%;height: auto;} #main #asp-table tr td strong {font-size: var(--fontsize-l);border-bottom: 1px solid var(--colordark);} #main #asp-table tr td.contact {position: absolute;bottom: var(--space-below-01);right: var(--side-space-01);} #main #asp-table tr .col_2 {margin-bottom: 10px} #main #asp-table tr {background: var(--colorlight);border: 1px solid var(--color-grey-03);padding: var(--space-below-01) var(--side-space-01);max-width: 430px;position: relative; margin-bottom: 20px;min-height: 270px;} /* Formulartyp 1 */ main .asp-fill .asp-active {background: var(--colorlight);border: 1px solid var(--color-grey-03);height: 145px;margin-bottom: 20px;padding: 15px;} #main .asp-fill .asp-active span {font-weight: 400;display: block;} #main .asp-fill .asp-active p {float: left;font-weight: 600;} #main .asp-fill .asp-active img {float: right;height: 110px;width: auto;} /* Formulartyp 2 */ /* #main .asp-name {display: none;} */ /* PLZ ANSPRECHPATNER ende */ #footer {background: var(--color-grey-01);padding: var(--space-below-03) 0 var(--space-below-01) 0;} #footer .elements {display: flex;position: relative;align-items: center;justify-content: space-between;} #footer .elements .social-media {display: flex;gap: 5px;} #footer .footer01 {display: flex;gap: var(--gap-01);} #footer .content-image {display: flex;align-items: center;} #footer .mod_customnav {display: flex;justify-content: flex-end;} #footer .mod_customnav ul {display: flex;} #footer .mod_customnav ul li:after {content: "|";padding: 0 7px;} #footer .mod_customnav ul li:last-child::after {content: '';padding: 0;} #footer .mod_customnav ul li > * {text-decoration: none; color: var(--color-grey-05);} #footer :is(.product-menu-items, .extra-menu-items) {display: none;} @media screen and (max-width: 1210px) { h2, .home #main :is(h2, h3) {font-size: var(--fontsize-xl);} .home #main .content-text strong, .home #main .content-text :is(p, ul:not(.link-list)) {font-size: var(--fontsize-m);} #header .mod_navigation li > :is(a, strong) {font-size: var(--fontsize-l);} #header .mod_navigation ul.level_2 :is(a, strong) {font-size: var(--fontsize-m);} #main .bg-map-animate .columns {display: block;} #main :is(.cols-25-25-25-25, .cols-20-20-20-20-20), #main .mod_article:is(.cols-25-25-gap-25-25) {grid-template-columns: 1fr 1fr;} #main .mod_article.cols-25-25-gap-25-25 > *:not(.content-image, .columns):nth-child(2) > * {padding-right: var(--side-space-02);} #main .mod_article.cols-25-25-gap-25-25 > *:not(.content-image, .columns):nth-child(5) > * {padding-left: var(--side-space-02);} #main .mod_article.cols-25-25-gap-25-25 > :nth-child(3) {height: var(--space-below-02);width: 100%;padding: 0;margin: 0 !important;} #main .mod_article.cols-25-25-gap-25-25 { grid-template-areas: "block01 block02" "block03 block03" "block05 block04"; gap: 0 var(--gap-01);} #main .content-element-group:is(.cols-25-25-25-25, .cols-20-20-20-20-20) > div {margin-bottom: var(--space-below-02);} #main .grid-6-blocks {grid-template-columns: repeat(2, 1fr); grid-template-areas: "block01 block02" "block04 block03" "block05 block06"; gap: var(--gap-01) 0;} #main .columns :is(.content-gallery--cols-4, .content-gallery--cols-6) > ul {grid-template-columns: repeat(2, minmax(0, 1fr));} #main .columns :is(.content-gallery--cols-5, .content-gallery--cols-7) > ul {grid-template-columns: repeat(3, minmax(0, 1fr));} #main .text-overlay figcaption {position: static;margin: 0;width: 100%;min-width: 0;} #main .layout-group-01 .content-text {display: block;} #main .layout-group-01 .content-text > figure {margin-bottom: var(--space-below-01);} #main .slideshow-02 {height: 50vh;} } @media screen and (max-width: 781px) { h1 {font-size: var(--fontsize-2xl);} h3 {font-size: var(--fontsize-xl);line-height: 1;} h4 {font-size: var(--fontsize-l);} #header {position: relative;} :is(#header, #header.scrolled) .mod_customnav {width: 100%;right: 0;padding: 0 var(--side-space-01) var(--space-below-00) var(--side-space-01);} :is(#header, #header.scrolled) .mod_customnav ul {justify-content: right;} :is(#header, #header.scrolled) .mod_customnav ul li:first-child {display: none;} :is(#header, #header.scrolled) .title {padding: 50px 0 var(--space-below-01) 0;} :is(#header, #header.scrolled) .title img {height: var(--logo-height-small);} :is(#header, #header.scrolled) .title p {font-size: var(--fontsize-xs);opacity: 0;} #header .mod_navigation {transition: var(--animation-01);background: var(--color-grey-01);box-shadow: var(--shadow-02);padding-top:var(--space-below-01);border-top: 1px solid var(--color-grey-03);position: absolute;top: calc(50px + var(--logo-height-small) + var(--space-below-01));right: 0;z-index: 999;width: 0;height: auto;max-height: 100vh;overflow: hidden;} #header.menu-active .mod_navigation {width: 100%;max-height: none;padding-left: var(--side-space-01);padding-right: var(--side-space-01);} #header .mod_navigation ul.level_1 {display: block;padding-bottom: var(--space-below-01);} #header .mod_navigation ul.level_1 > li > :is(a, strong) {height: auto;margin-bottom: var(--space-below-00);} #header .mod_navigation ul.level_1 > li:hover > ul.level_2, #header .mod_navigation ul.level_1 > li > ul.level_2:hover {padding-top:0;} /* Hide menu-links in level_2 except in product-menu */ #header .mod_navigation ul.level_1 > li:not(.produkte) ul.level_2 > li > :is(a, strong) {display: none;} #header .mod_navigation ul.level_1 > li:not(.produkte) ul.level_2 {margin-bottom: var(--space-below-01);} #header .mod_navigation ul.level_1 > li:not(.produkte) ul.level_3 {margin-bottom: 0;} #header .mod_navigation ul.level_2 {opacity: 1;visibility: visible;position: static;border: none;box-shadow: none;padding: 0;background: none;display: block;} #header .mod_navigation ul.level_2 > * {min-width: 0;} #header .mod_navigation ul.level_2 > li > figure {display: none;visibility: hidden;} #header .mod_navigation ul.level_2 > li > :is(a, strong) {border: none;margin-bottom: 0;} #header .mod_navigation ul.level_3 {margin-left: var(--side-space-00);margin-bottom: var(--space-below-01);} #header .mod_navigation ul.level_4 {display: none;/*margin: 0 0 0 var(--side-space-00);*/} #header .mod_navigation li.produkte ul.level_2 > li:last-child ul.level_3 > li {margin-bottom: 0;} #header .mod_navigation li.produkte ul.level_3 > .submenu {min-height: 0;} #header #toggle-nav {cursor: pointer;display: block;width: 36px;position: absolute;top: 50px;right: var(--side-space-01);z-index: 1;border: none;background: none;} /* #header #toggle-nav:focus {background: var(--color-grey-02);outline: 0;} */ #header #toggle-nav span {background: var(--color-01);display: block;height: 4px;margin: 6px 0;width: auto;transition: var(--animation-01);} #header.menu-active #toggle-nav span {opacity: 0;transform-origin: 4px center;} #header.menu-active #toggle-nav span:first-child {opacity: 1;transform: rotate(45deg);} #header.menu-active #toggle-nav span:last-child {opacity: 1;transform: rotate(-45deg);} #container {padding-top: 0;} #main .content-element-group:is(.cols-33-33-33, .cols-25-25-25-25, .cols-20-20-20-20-20) {display: block;} #main .content-element-group:is(.cols-33-33-33, .cols-25-25-25-25, .cols-20-20-20-20-20) > div {margin-bottom: var(--space-below-02);} #main :is(.content-gallery--cols-4, .content-gallery--cols-6) > ul {grid-template-columns: repeat(2, minmax(0, 1fr));} #main :is(.content-gallery--cols-5, .content-gallery--cols-7) > ul {grid-template-columns: repeat(3, minmax(0, 1fr));} #main .content-gallery figcaption {font-size: var(--fontsize-xs);} #main > .inside > .banner-02 > .content-image {margin-bottom: var(--space-below-02);} #main .bg-map-animate {padding-top: 140px!important;} #main .mobile-option > div {display: none;} #main .mobile-option > div:last-child {display: block;} #main .flip-card, #main .flip-card > * {aspect-ratio: unset;position: static;transform: none !important;} #main .flip-card > *:first-child {display: none;} #main .slideshow-01 {height: calc( var(--slideshow-01-width-mobile) + 140px);} #main .slideshow-01 ul {width: var(--slideshow-01-width-mobile);top: 50%;} #main .slideshow-01 .actions {top: calc(var(--slideshow-01-width-mobile) + 100px) } #main .slideshow-01.opt-01 {height: calc(calc(var(--slideshow-01-width-mobile)*2.1) + 140px);} #main .slideshow-01.opt-01 ul {width: var(--slideshow-01-width-mobile);} #main .slideshow-01.opt-01 .actions {top: calc(calc(var(--slideshow-01-width-mobile)*2.1) + 100px) } #main :is(.push-up-00, .push-up-01, .push-up-02) {margin-top: calc(-1* (var(--space-below-02) * 3));} #main :is(.spacer-01, .spacer-02, .spacer-03) {height: var(--space-below-01);} #main .footer-optional {display: block;text-align: center;} #main .footer-optional > *:not(:last-child) {margin-bottom: var(--space-below-01);} #footer .elements {display: block;} #footer .elements > * {margin-bottom: var(--space-below-02);} #footer :is(.footer01, .social-media, #footer .mod_customnav) {justify-content: center;flex-wrap: wrap;} #footer .mod_customnav ul {display: block;text-align: center;} #footer .mod_customnav ul li::after {display: none;} #footer .footer01 img {max-width: 50px;} } @media screen and (max-width: 540px) { #main .columns {display: block;} #main .columns > div {margin-bottom: var(--space-below-02);} #main .mod_article.columns > :not(.content-image, .columns) {margin: 0;padding: var(--space-below-01) 0;} #main .mod_article.columns > :not(.content-image, .columns) > * {margin-left: var(--side-space-01);margin-right: var(--side-space-01);} #main .mod_article.columns > *:not(.content-headline, .content-image, .columns):first-child, #main .mod_article.cols-25-25-gap-25-25 > *:not(.content-image, .columns):nth-child(5) > * {padding-left: 0!important;} #main .mod_article.columns > *:not(.content-image, .columns):last-child, #main .mod_article.cols-25-25-gap-25-25 > *:not(.content-image, .columns):nth-child(2) > * {padding-right: 0!important;} #main :is(.push-up-00, .push-up-01, .push-up-02) {margin-top: 0;} #main > .inside > .mod_article:first-child :is(.push-up-00, .push-up-01, .push-up-02) {margin-top: calc(-1* (var(--space-below-02) * 3));} #main .grid-6-blocks {display: block;} #main .grid-6-blocks > div.content-text {margin-bottom: var(--space-below-02);} #main .mod_article.columns > :not(.content-image, .columns) > * {margin-left: var(--side-space-01);margin-right: var(--side-space-01);} #main .columns :is(.content-gallery--cols-5, .content-gallery--cols-7) > ul {grid-template-columns: repeat(2, minmax(0, 1fr));} #main :is(.media--left, .media--right) {display: block;} #main :is(.media--left, .media--right) {display: block;} } @media screen and (max-width: 420px) { #main .content-gallery > ul {display: block;} #main .slideshow-02 .content-text .rte > * {text-indent: 0;margin-left: 0;} #main .text-format-06 {font-size: var(--fontsize-3xl);} }