/* CI-Farben */ :root { --color-std-font: #000; --color-ci1: rgba(227,6,19,1); /*Verwendung: var(--color-ci1) */ --color-ci2: rgba(75,75,75,1); --color-ci1-hover: rgba(227,6,19,0.8); --color-ci2-hover: rgba(75,75,75,0.8); } html, body, div, p, h1, h2, h3, span, a, table, td, form, input, textarea, select, button { margin: 0px; padding: 0px; font-family: 'Montserrat', sans-serif; font-size: 17px; line-height: 1.45em; font-weight: 300; color: var(--color-std-font); } h1 { font-size: 38px; line-height: 1.05em; color: var(--color-ci1); font-weight: 200; margin: 10px 0px 25px 0px; text-transform: normal;} body.folgeseite h1 { font-size: 32px; line-height: 1.0em; color: var(--color-ci1); font-weight: 400; text-transform: normal;} h2 { font-size: 26px; line-height: 1.05em; color: #000; font-weight: 500; margin: 12px 0px 28px 0px; text-transform: normal;} h2.sub { font-size: 22px; line-height: 1.05em; color: #000; font-weight: 300; margin: -18px 0px 15px 0px; text-transform: normal;} body.folgeseite h2 { font-size: 26px; padding-bottom: 20px; } body.folgeseite h2::after { content: ''; position: absolute; display: block; margin-left: 0px; margin-top: 0.36em; width: 32px; height: 3px; background-color: var(--color-ci1); } h2.thin { font-weight: 300; } h2 strong { font-weight: 600; } h2 span { font-weight: 300; color: inherit; font-size: 0.79em; line-height: 1.2em; } h3 { font-size: 22px; line-height: 1.2em; color: #000; font-weight: 500; margin: 15px 0px 25px 0px; text-transform: normal;} h4 { font-size: 17px; line-height: 1.2em; color: #000; font-weight: 500; margin: 10px 0px 10px 0px; text-transform: normal; } h5 { font-size: 14px; line-height: 1.1em; color: #000; font-weight: 500; margin: 8px 0px 8px 0px; text-transform: normal; } @media only screen and (min-width: 995px) { h1 { font-size: 48px; font-weight: 200; color: #fff; margin: 15px 0px 35px 0px; } body.folgeseite h1 { font-size: 46px; } h2 { font-size: 40px; margin: 20px 0px 35px 0px; } h2.sub { font-size: 36px; margin: -30px 0px 30px 0px; } body.folgeseite h2 { font-size: 32px; padding-bottom: 25px; } body.folgeseite h2::after { margin-top: 0.38em; width: 38px; height: 3px; } h3 { font-size: 26px; margin: 20px 0px 20px 0px; } h4 { font-size: 20px; margin: 14px 0px 10px 0px; } h5 { font-size: 18px; margin: 8px 0px 8px 0px; } } hr { background-color: none; border: 0; height: 1px; border-bottom: 1px solid rgba(0,0,0,0.15); } .centered { text-align: center; } body { width: 100%; height: 100%; background-color: #fff; } img { vertical-align: middle; outline: none; } a { outline: none; } div, input, select, textarea, a { box-sizing: border-box; } strong { font-weight: 600; } input, textarea, select { border-radius: 0; } input[type=text], textarea { -webkit-appearance: none; } /* verhindert den Schatten-Effekt auf iOS-Geräten und im Safari*/ .clear { display: block; clear: both; } .rounded { -moz-border-radius: 10px; border-radius: 10px; -webkit-border-radius: 10px; } .shadow { -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4); box-shadow: 0px 0px 10px rgba(0,0,0,0.4); } .opacity_25 { opacity: 0.25; filter(opacity=0.25); } .strtoupper { text-transform: uppercase; } .lowercase { text-transform: none; } .align_left { display: inline; float: left; } .align_right { display: inline; float: right; } /* Icons */ i { color: inherit; } /* ---- Links ---- */ a, a:link, a:active, a:visited, button { text-decoration: none; color: var(--color-ci1); font-size: inherit; transition: all 0.20s ease-in-out 0.05s; } a:hover { text-decoration: none; color: var(--color-ci1-hover); font-size: inherit; } a.bn, button.bn { padding: 10px 22px; background-color: rgba(255,255,255,0.6); color: #000; border: 2px solid var(--color-ci1); cursor: pointer; } a.bn:hover, button.bn:hover { background-color: var(--color-ci1); color: #fff; } a.bn_small { padding: 7px 12px; font-size: 14px; } a.bn_bg_ci, button.bn_bg_ci { background-color: var(--color-ci1); color: #fff; font-size: 19px; fonts-weight: 900; padding: 12px 20px; text-align: center; text-transform: uppercase; transition: all 0.35s ease-in-out 0s; } a.bn_bg_ci:hover, button.bn_bg_ci:hover { background-color: var(--color-ci1-hover); text-decoration: none; } .bn_bg_ci i.fa { color: #fff; margin-right: 8px;} a.bn_border_ci, button.bn_border_ci { background-color: transparent; border: 1px solid #fff; color: #fff; transition: all 0.35s ease-in-out 0s;} a.bn_border_ci:hover, button.bn_border_ci:hover { background-color: transparent; border: 1px solid #fff; text-decoration: none; } a.bn_border_ci i.fa { color: red; margin-right: 8px; } a.bn_border { display: inline-block; border: 1px solid #d4d4d5; text-transform: uppercase; background-color: #fff; color: #58595b; padding: 8px 16px; text-align: center; box-sizing: border-box; transition: all 0.35s ease-in-out 0s; z-index: 10; } a.bn_border:hover { border: 1px solid #58595b; color: #252525; text-decoration: none; } a.bn_border i { color: inherit; font-size: 40px; line-height: 26px; font-weight: 100; } a.bn_border_weiss { display: inline-block; padding: 8px 30px; color: #fff; text-align: center; border: 1px solid rgba(255,255,255,1); } a.bn_border_weiss:hover { background-color: rgba(255,255,255,0.7); } @media only screen and (min-width: 995px) { a.bn { padding: 14px 38px; } } /* ---- Tabellen, Formulare ---- */ table.width100 { width: 100%; margin: 20px 0px; } table.widthmax { width: 100%; max-width: 320px; margin: 20px 0px; } th { font-weight: 900; text-align: left; } td { font-weight: 400; text-align: left; } table.border_ci { margin: 20px 0px; padding: 0px; border-spacing: 0; border-collapse: collapse; } table.border_ci tr { background-color: #eaf1f7; } table.border_ci tr:nth-child(odd) { background-color: #f3f8fa; } table.border_ci th { font-weight: 500; color: #000; padding: 10px 20px; } table.border_ci td { font-weight: 200; color: #000; padding: 10px 20px; } input.disabled { border: 1px solid #eee; background-color: #fefefe; color: #bbb; font-style: italic; } .form-validation.alert-danger { margin-bottom: 20px; } .form-validation.alert-success { margin: 20px 0px; padding: 10px 20px; color: #3FAB3A !important; background-color: rgba(217,249,217,1.00); } .form-group { margin: 10px 0px; } .form-group.wrapper { padding: 12px 25px; margin-bottom: 35px; background-color: #fff; border-left: 5px solid rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); box-shadow: 0px 0px 2px rgba(0,0,0,0.2); } .form-group.wrapper h3 { margin-top: 0px; } .form-control { border: none; color: rgba(0,0,0,0.8); display: block; width: 100%; height: 42px; font-size: 16px; font-weight: 400; line-height: inherit; padding: 6px 12px; background-color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0,0,0,0.15); box-sizing: border-box; transition: border-color 0.25s ease-in-out 0s, box-shadow 0.25s ease-in-out 0s; } .form-control:focus { color: rgba(0,0,0,0.9); border: 1px solid rgba(0,0,0,0.5); } .form-control.required { border: 1px solid rgba(0,0,0,0.4); } textarea.form-control { height: 120px; font-family: inherit; font-weight: 400; } select.form-control option { height: 40px; font-family: inherit; font-size: 16px; padding: 5px; } .form-group > label { display: block; font-size: 1.15em; font-weight: 400; margin: 15px 0px; } .button_row { display: block; clear: both; width: 100%; margin: 20px 0px 0px 0px; text-align: center; } .btn-block { display: inline-block; float: none; width: 200px; margin: 0px auto; align: center; } .btn { cursor: pointer; font-family: inherit; font-weight: normal; border: none; line-height: 1.2857; text-align: center; vertical-align: middle; white-space: nowrap; font-size: 19px; line-height: 1.33333; padding: 7px 20px; } .btn-ci-farbe { background-color: var(--color-ci1); color: #fff; border: 1px solid var(--color-ci1); text-transform: none; transition: all 0.2s ease-in 0.2s; } .btn-ci-farbe:hover { background-color: var(--color-ci1-hover); color: #fff; } .alert { display: block; clear: both; padding: 0px 5px; } .alert-danger { padding: 4px 5px; background-color: #f7e2e0; border: 1px solid #cc5449; color: #cc5449 !important; font-size: 15px; } .input-for-zweck { margin: 5px 0px 45px 0px; } .input-for-zweck label { font-size: 0.92em; padding-left: 5px; margin-right: 15px; margin-bottom: 20px; } /* spez. für Kontakt- & Anfrageformular */ .check-label-combo { display: inline-block; min-width: 160px; margin: 3px 0px; } @media only screen and (min-width: 995px) { .check-label-combo { min-width: 200px; } .check-label-combo.wide { min-width: 300px; } } /* spez. für Messe-Kontakt-Formular */ .check-label-messetage { display: block; width: 100%; margin: 5px 0px; } .check-label-messetage .day { display: inline-block; width: 100%; height: auto; margin: 10px 0px 5px 0px; } .check-label-messetage input[type=checkbox] { margin-right: 10px; } .check-label-messetage label { display: inline-block; min-width: 38%; margin-right: 10px; } @media only screen and (min-width: 995px) { .check-label-messetage { } .check-label-messetage .day { display: inline-block; width: 220px; } .check-label-messetage label { min-width: 140px; } } @media only screen and (min-width: 1200px) { .check-label-messetage { } .check-label-messetage .day { width: 260px; } .check-label-messetage label { min-width: 170px; } } /* --------------- Allgemeine Klassen für DIV-Aufbau ------------- */ .container { position: relative; align: center; width: 600px; height: auto; margin: 0px auto; padding: 0px 15px; margin-left: auto; margin-right: auto; box-sizing: border-box; background-color: transparent; } .container-full { position: relative; align: center; width: 100%; height: auto; margin: 0px auto; padding: 0px 15px; margin-left: auto; margin-right: auto; box-sizing: border-box; background-color: transparent; } .content-center { text-align: center; } .content-right { text-align: right; } .zentriert { align: center; margin: 0px auto; padding-top: 40px; width: 600px; height: auto; min-height: 400px; } .section { position: relative; color: inherit; padding: 30px 0; } .section-std-padding { padding: 30px 0px; } .section-big-padding { padding: 60px 0px; } .first-section { padding-top: 180px; } .a_sprung { position: absolute; margin-top: -140px; width: 100%; /*height: 2px; border-top: 1px solid red;*/ } .o_sprung { position: absolute; margin-top: -50px; width: 100%; /*height: 2px; border-top: 1px solid red;*/ } @media only screen and (min-width: 995px) { .o_sprung { margin-top: -90px; } } /* Viertel-Box */ .content-col4-1 { position: relative; display: inline-block; float: left; margin: 0px; width: 24%; margin-right: 0.6665%; margin-left: 0.6665%; height: auto; box-sizing: border-box; padding: 20px 20px; background-color: transparent; } /* Drittel-Box */ .content-col3-1 { position: relative; display: inline-block; float: left; margin: 0px; width: 32%; margin-right: 1%; margin-left: 1%; height: auto; box-sizing: border-box; padding: 20px 20px; background-color: transparent; } /* Zwei-Drittel-Box */ .content-col3-2 { position: relative; float: left; margin: 0px; width: 66%; margin-right: 1%; margin-left: 1%; height: auto; box-sizing: border-box; padding: 20px 20px; background-color: transparent; } /* Halb-Box */ .content-col2-1 { position: relative; float: left; margin: 0px; width: 48%; margin-right: 1%; margin-left: 1%; height: auto; box-sizing: border-box; padding: 20px 0px; background-color: transparent; } /* Full-Row */ .content-full-row { position: relative; display: block; clear: both; width: 100%; height: auto; margin: 35px 0px; } .content-full-row img { position: relative; width: 100%; height: auto; } .two-text-columns { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 4rem; -webkit-column-gap: 4rem; column-gap: 4rem; } @media only screen and (max-width: 780px) { .two-text-columns { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } .two-text-columns div { margin-bottom: 25px; } } /* Box mit Bild links und Text rechts */ .box-img-text { position: relative; display: block; clear: both; width: 100%; height: auto; margin: 55px 0px; background-color: #fff; } .box-img-text .align_left { position: absolute; width: 40%; height: 100%; max-height: 360px; background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100%; overflow: hidden; } .box-img-text .align_right { width: 60%; height: auto; min-height: 280px; padding: 0px 60px; box-sizing: border-box; } @media only screen and (max-width: 1199px) { .box-img-text .align_right { padding: 0px 50px; } } @media only screen and (max-width: 995px) { .box-img-text .align_left { position: relative; display: block; clear: both; width: 100%; height: auto; min-height: 380px; } .box-img-text .align_right { display: block; clear: both; width: 100%; height: auto; min-height: auto; padding: 0px 40px; } .box-img-text .align_right h3 { font-size: 21px; } } @media only screen and (max-width: 780px) { .box-img-text .align_left { position: relative; display: block; clear: both; width: 100%; height: auto; min-height: 280px; } .box-img-text .align_right { display: block; clear: both; width: 100%; height: auto; min-height: auto; padding: 30px 25px; } .box-img-text .align_right h3 { font-size: 20px; } } @media only screen and (min-width: 1200px) { .box-img-text .align_right h2 { margin-top: 0px; } } /* Margins für Boxen in Zeilen */ .row { width: 100%; height: auto; display: inline-block; padding: 0px; margin: 0px; box-sizing: border-box; } .row div.content-col4-1:first-child { margin-left: 0; } .row div.content-col3-1:first-child { margin-left: 0; } .row div.content-col3-2:first-child { margin-left: 0; } .row div.content-col2-1:first-child { margin-left: 0; } .row div.content-col4-1:last-child { margin-right: 0; } .row div.content-col3-1:last-child { margin-right: 0; } .row div.content-col3-2:last-child { margin-right: 0; } .row div.content-col2-1:last-child { margin-right: 0; } .row:after { content: ""; display: table; clear: both; float: none; width: 100%; height: 0px; } /* Datensätze mit einzelnen Elementen (mehrspaltig und -zeilig dargestellt) */ .overview { width: 100%; height: auto; margin: 20px auto; font-size: 0px; } .element { display: block; width: 100%; height: auto; padding: 20px 20px; margin: 0px; } @media only screen and (min-width: 460px) { .element { display: inline-block; width: 50%; min-height: 80px; } } @media only screen and (min-width: 995px) { .element { width: 33.33%; min-height: 90px; } } @media only screen and (min-width: 1200px) { .element { width: 25%; min-height: 100px; } } /* --------- Boxmodell ------- */ #head { position: absolute; margin: 0px; width: 100%; height: auto; padding: 0px 0px; box-sizing: border-box; background-color: rgba(255,255,255,1); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.4); box-shadow: 0px 0px 3px rgba(0,0,0,0.4); z-index: 800; } #top_bar { display: block; clear: both; padding: 15px 0px 0px 0px; width: 100%; background-color: transparent; text-align: right; } #top_bar a { color: #969696; font-size: 15px; font-weight: 400; margin-left: 24px; } #top_bar a:hover { color: #555; } #top_bar a i.fa { font-size: 20px; margin-right: 4px; margin-top: -2px; vertical-align: middle; } #top_bar a span { color: inherit; font-size: inherit; font-weight: inherit; } #top_bar .social-media-links { display: inline-block; width: auto; vertical-align: middle; margin-top: -1px; margin-left: 5px; margin-right: 1px; } #top_bar .social-media-links ul { margin: 0; padding: 0; list-style-type: none; width: auto; } #top_bar .social-media-links ul li { display: inline-block; margin: 0 0 4px 0; padding: 0; } #top_bar .social-media-links ul li a { margin: 0; padding: 0 4px; color: #000; opacity: 0.5; transition: all 0.3s ease-in-out 0s; } #top_bar .social-media-links ul li a:hover { opacity: 0.8; } #top_bar .social-media-links ul li a img { width: auto; height: 17px; } @media only screen and (min-width: 998px) { #top_bar .social-media-links { margin-top: 0; margin-left: 20px; margin-right: 0px; } #top_bar .social-media-links ul li { margin: 0 0 5px 0; } #top_bar .social-media-links ul li a img { width: auto; height: 22px; } } #top_bar .language_switcher { display: inline-block; width: 70px; height: auto; cursor: pointer; } #top_bar .language_switcher a { display: inline-block; vertical-align: middle; cursor: pointer; color: #969696; padding: 0px 0px 2px 0px; } #top_bar .language_switcher a:hover { color: #555; } #top_bar .language_switcher a.active { color: #111; } #top_bar .language_switcher a img.flagge { display: inline-block; vertical-align: middle; width: auto; height: 13px; margin-top: -2px; } #top_bar .language_switcher a i.fa { display: inline-block; color: inherit; padding-top: 0px; } #top_bar .language_switcher a i.fa-angle-up { display: none; } #top_bar .language_switcher .select_languages { display: none; position: absolute; width: 140px; padding: 0px; margin-top: 4px; margin-left: -90px; -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4); box-shadow: 0px 0px 10px rgba(0,0,0,0.4); z-index: 990; } #top_bar .language_switcher .select_languages a { display: block; clear: both; padding: 5px 20px 5px 8px; margin: 0px; text-align: left; box-sizing: border-box; background-color: #fff; color: #333; } #top_bar .language_switcher .select_languages a:hover{ background-color: #bbb; color: #111; } #top_bar .language_switcher .select_languages a.active{ background-color: #eee; color: #111; } #top_bar .language_switcher .select_languages a img { display: inline-block; vertical-align: middle; height: 20px; margin-top: -2px; margin-right: 5px; } #nav_bar { position: relative; display: block; clear: both; width: 100%; padding: 0px; box-sizing: border-box; background-color: transparent; /*transition: all 0.5s ease-in-out 0.5s;*/ } #nav_bar .container { z-index: 400; } #logo { display: inline-block; float: none; box-sizing: content-box; margin-top: -7px; padding: 0px 0px 10px 0px; transition: all 0.15s ease-in-out 0.15s; } #logo img { width: 100%; height: auto; vertical-align: middle; } #navigation { /* wird in den MediaQuerys definiert */ } #navigation ul li a { text-transform: none; } #navigation > ul > li.fixed_desktop_navi_button { display: none; } #navigation .toggle_suche a { height: 20px; cursor: pointer; border-bottom: none !important; } #navigation .toggle_suche a:after { content: '\f002'; font-family: 'FontAwesome'; font-size: 18px; } #navigation .toggle_suche.open a:after { content: '\f00d'; font-family: 'FontAwesome'; font-size: 18px; color: var(--color-ci1); } #navigation .search_bar { display: none; position: absolute; left: 10px; right: 10px; top: 50%; padding: 2px 0px 1px 0px; background-color: #fff; -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.4); box-shadow: 0px 0px 3px rgba(0,0,0,0.4); -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; } #navigation .search_bar #___gcse_0 { width: 300px; } .cse .gsc-control-cse, .gsc-control-cse { padding: 1px; } td.gsc-input { width: 190px; } .gsc-input-box { width: 190px; height: 32px !important; margin-top: -2px !important; -moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px; } td#gs_tti50.gsib_a { padding: 2px 8px !important; margin: 0; background-color: transparent !important; } input#gsc-i-id1.gsc-input { margin-top: -3px !important; font-size: 16px; font-weight: 500; background-color: transparent !important; } .gsst_a { width: 24px; height: 24px; text-align: center; } button.gsc-search-button, button.gsc-search-button:hover, input.gsc-search-button:focus { padding: 8px 25px; background-color: var(--color-ci1); border-color: transparent !important; transition: background-color 0.2s ease-in-out 0.25s; } button.gsc-search-button:hover, button.gsc-search-button:focus { background-color: var(--color-ci1-hover) !important; } .gsc-control-searchbox-only.gsc-control-searchbox-only-de { margin: 0; padding: 0; } #toggle_mobile_navigation { display: block; float: right; padding: 0px; margin: 0px; font-size: 21px; margin-top: 0px; cursor: pointer; padding: 10px; transition: all 0.25s ease-in-out 0s; } #toggle_mobile_navigation i { font-size: 38px; color: #fff; } #toggle_mobile_navigation .menu { cursor: pointer; margin: 0 auto; padding-left: 1.25em; position: relative; width: 30px; height: 30px; } #toggle_mobile_navigation .menu-global { backface-visibility: hidden; position: absolute; left: 0; border-top: 4px solid #5e5e5e; width: 100%; transition: 0.45s; -moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px; } #toggle_mobile_navigation .menu-top { top: 0; } #toggle_mobile_navigation .menu-middle { top: 10px; } #toggle_mobile_navigation .menu-bottom { top: 20px; } #toggle_mobile_navigation .menu-top-click { backface-visibility: hidden; top: 12px; transform: rotate(50deg); transition: 0.45s 0.5s; } #toggle_mobile_navigation .menu-middle-click { opacity: 0; } #toggle_mobile_navigation .menu-bottom-click { backface-visibility: hidden; top: 12px; transform: rotate(-410deg); transition: 0.45s 0.5s; } @media only screen and (max-width: 998px) { #head { height: 104px; z-index: 9990; } #toggle_mobile_navigation { position: absolute; top: 10px; right: 8px; z-index: 9999; } #toggle_mobile_navigation.active i { color: #ddd; } #navigation { position: fixed; display: none; overflow: auto; width: 100%; height: 100%; left: 0px; top: 0px; margin: 0px; right: 0; box-sizing: border-box; padding: 30px 0px 120px 0px; background-color: rgba(0,0,0,0.85); z-index: 890; -webkit-box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.27); -moz-box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.27); box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.27); } #top_bar { display: block; height: 36px; padding: 6px 4px 7px 0px; } #top_bar a { font-size: 13px; font-weight: 400; margin-left: 9px; } #top_bar a i.fa { font-size: 19px; margin-right: 1px; vertical-align: top; margin-top: 4px; } #top_bar .language_switcher { width: 50px; margin-left: 0px; } #top_bar .language_switcher > a > img.flagge { margin-top: 4px; } #schnellkontakt { display: none; } #nav_bar { display: block; clear: both; height: 66px; padding: 4px 0px 8px 0px; z-index: 970; } #nav_bar .sticky_navbar_buttons { display: none; } #nav_bar ul.sticky_navbar_buttons { list-style-type: none; margin: 0px auto; padding: 0px; } #nav_bar ul.sticky_navbar_buttons li { list-style-type: none; margin: 0px; padding: 0px; } #nav_bar ul.sticky_navbar_buttons li a { display: inline-block; width: auto; margin: 10px auto; text-decoration: none; text-align: center; font-size: 0.80em; width: 140px; color: #fff; padding: 7px 12px; text-transform: none; background-color: rgba(52,144,206,0.8); } #nav_bar ul.sticky_navbar_buttons a i { font-size: 20px; margin-right: 5px; margin-top: -7px; vertical-align: middle; } #logo { width: 92px; height: 50px; padding: 4px 0px 4px 0px; margin: 0px 0px 0px 0px; transition: none; z-index: 999; } #logo img { } #navigation > ul { display: block; clear: both; width: 100%; height: 100%; margin: 0px; padding: 0px; z-index: 900; } #navigation > ul > li { display: block; clear: both; float: none; width: 100%; height: auto; margin: 2px 0px; padding: 1px 0px; box-sizing: border-box; border-bottom: 1px solid rgba(0,0,0,0.1); } #navigation ul li a { display: block; float: none; text-align: left; color: #fff; width: 100%; height: auto; padding: 15px 20px 10px 20px; box-sizing: border-box; text-transform: none; font-size: 19px; line-height: 19px; font-weight: 400; } #navigation ul li a:hover { text-decoration: none; color: #fff; } #navigation > ul > li.active > a { color: var(--color-ci1); } #navigation > ul > li > ul > li.active > a { color: var(--color-ci1); } #navigation > ul > li > ul { display: block; clear: both; width: 100%; height: auto; margin: 0px; padding: 0px; } /* Navi - 1te Ebene*/ #navigation > ul > li { border-bottom: 1px solid rgba(255,255,255,0.2); } #navigation > ul > li > a { } /* Navi - 2te Ebene*/ #navigation > ul > li > ul { /*display: none;*/ clear: both; height: auto; margin: 2px 0px 10px 0px; padding: 0px;list-style-type: none; } #navigation > ul > li > ul > li > a { font-weight: 400; font-size: 0.95em; padding: 7px 10px 7px 40px; } #navigation > ul > li > ul > li > a:before { position: absolute; content: "\f105"; font-family: 'FontAwesome'; color: #fff; font-size: 15px; margin: 0px 0px 0px -20px; width: 26px; } #navigation > ul > li > ul > li.active > a:before { color: var(--color-ci1); } #navigation > ul > li.active > ul { display: block; } /* Navi - 3te Ebene */ #navigation > ul > li > ul > li > ul { display: none !important; clear: both; height: auto; margin: 3px 0px 15px 0px; padding: 0px; list-style-type: none; } #navigation > ul > li > ul > li > ul > li { list-style-type: none; } #navigation > ul > li > ul > li > ul > li > a { font-size: 0.92em; padding: 6px 5px 6px 60px; text-transform: none; } #navigation > ul > li> ul > li.active > ul { display: block; } #navigation > ul > li.mobile_navi_button { display: none; text-align: center; border: none; } #head #navigation > ul > li.mobile_navi_button { display: block; } #navigation > ul > li.mobile_navi_button.first { margin-top: 0px; padding-top: 10px; } #navigation > ul > li.mobile_navi_button > a { display: inline-block; width: auto; margin: 8px auto; text-align: center; font-size: 0.95em; padding: 10px 20px; text-transform: none; } #navigation > ul > li.mobile_navi_button a i { font-size: 21px; margin-right: 6px; margin-top: -5px; vertical-align: middle; } #navigation > ul > li.toggle_suche { display: block; clear: both; text-align: center; } #navigation > ul > li.toggle_suche a { height: auto; text-align: center; } /* ---- Sticky-Darstellungen ---- */ #head.sticky { position: fixed; height: 68px; padding: 0px 0px; top: 0; box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); background-color: rgba(255,255,255,1); opacity: 1; transition: none; z-index: 900; } #head.sticky #top_bar { display: none; } #head.sticky #nav_bar { } #head.sticky #nav_bar #logo { /*padding: 4px 0px; margin-top: 0px;*/ } #head.sticky #nav_bar #logo img { height: auto; } #head.sticky #nav_bar .container { /*padding-top: 0px;*/ } #head.sticky #toggle_mobile_navigation { /*margin-top: 8px;*/ } #head.sticky #navigation { } } @media only screen and (min-width: 999px) { #head { } #toggle_mobile_navigation { display: none; } #top_bar { display: block; height: 42px; } #top_bar .language_switcher .select_languages { margin-left: -70px; } #nav_bar { height: 95px; } #logo { width: 115px; height: 62px; margin-top: -8px; } #navigation { display: inline-block !important; float: right; width: auto; height: 60px; box-sizing: border-box; margin: 35px 0px 0px 0px; padding: 0px; text-align: right; z-index: 900; } #navigation ul { display: block; clear: both; float: right; width: 100%; height: 100%; margin: 0px auto 0px auto; align: center; padding: 0px; } #navigation ul li { display: inline-block; float: none; width: auto; height: 100%; margin: 0px 0px; padding: 0px 0px 0px 0px; } #navigation > ul > li > a { display: inline-block; float: none; width: auto; height: 100%; font-size: 15px; padding: 15px 5px 15px 5px; margin: 0px 0px 0px 5px; font-weight: 400; text-transform: none; color: #000; box-sizing: border-box; transition: all 0.25s ease-in-out 0s; } #navigation ul li a:hover, #navigation ul li.hover a { text-decoration: none; color: var(--color-ci1-hover); } #navigation > ul > li.active > a { color: var(--color-ci1); border-bottom: 4px solid var(--color-ci1); } #navigation ul li:last-child a { padding-right: 0px; } /* Navi - 2te Ebene */ #navigation > ul > li ul { position: absolute; left: auto; display: none; width: auto; width: 260px; height: auto; border: none; margin: -1px 0px 0px 10px; padding: 0px; background-color: rgba(255,255,255,1); list-style: none; list-style-type: none; box-sizing: border-box; z-index: 600; } #navigation > ul > li > ul { -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.2); box-shadow: 0px 1px 2px rgba(0,0,0,0.2); } #navigation > ul > li > ul { padding: 0px 0px 5px 0px; } #navigation > ul > li:last-child ul { margin-left: -80px; } #navigation > ul > li > ul li { display: block; width: 100%; height: auto; text-align: left; list-style: none; list-style-type: none; margin: 0px; padding: 0px; transition: all 0.2s ease-in 0s; } #navigation > ul > li > ul li a { display: block; clear: both; width: 100%; height: 42px; font-size: 15px; line-height: 1.05em; padding: 14px 18px 6px 25px; margin: 0px; font-weight: 400; color: #000; box-sizing: border-box; text-decoration: none; /*border-bottom: 1px solid rgba(0,0,0,0.05); */ } #navigation > ul > li > ul > li > a:hover, #navigation > ul > li > ul > li.hover > a { text-decoration: none; color: var(--color-ci1); background-color: transparent; padding-left: 36px !important; padding-right: 8px !important; } #navigation > ul > li > ul > li.hover > a:before, #navigation > ul > li > ul > li > a:hover:before, #navigation > ul > li > ul > li.active > a:before { position: absolute; content: "\f105"; font-family: 'FontAwesome'; color: var(--color-ci1); font-size: 15px; margin: 0px 4px 0px -10px; width: 26px; } #navigation > ul > li > ul li.active > a { color: var(--color-ci1); } #navigation > ul > li > ul { display: none; } /* Navi - 3te Ebene */ #navigation > ul > li > ul > li > ul { /* Vererbung von 2ter Ebene - und: */ display: none !important; position: relative; display: none; left: auto; margin: 0px; padding: 5px 0px 10px 10px; border-bottom: 1px solid rgba(0,0,0,0.08); } #navigation > ul > li:hover > ul, #navigation > ul > li > ul > li.active > ul { display: block; } #navigation > ul > li > ul > li > ul > li > a { height: 38px; font-size: 13px; } /*#navigation > ul > li > ul li a:hover, #navigation > ul > li > ul > ul > li.hover > a { text-decoration: none; color: var(--color-ci1); background-color: transparent; padding-left: 32px !important; padding-right: 8px !important; } */ #navigation .toggle_suche a { width: 22px; } #navigation .toggle_suche a:after { margin-left: -20px; } #navigation .search_bar { width: auto; left: auto; right: 0px; top: 40px; margin-top: 60px; } #navigation .search_bar #___gcse_0 { width: 370px; } .cse .gsc-control-cse, .gsc-control-cse { padding: 1px; } td.gsc-input { width: 260px; } .gsc-input-box { width: 260px; } /* ---- Sticky-Darstellungen ---- */ #head.sticky { position: fixed; height: 70px; padding: 0px 0px; top: 0; opacity: 1; background-color: rgba(255,255,255,1); z-index: 810; transition-duration: 0.1s, 0.1s, 0.1s, 0.2s; transition-property: width, height, background-color, transform; transition-timing-function: ease, ease, ease, ease; } #head.sticky #top_bar { display: none; } #head.sticky #nav_bar { height: 70px; padding: 0px 0px; } #head.sticky #nav_bar #logo { width: 81px; height: 44px; margin-top: 12px; padding-top: 0px; padding-bottom: 0px; } #head.sticky #nav_bar #logo img { height: auto; padding: 0; } #head.sticky #navigation { height: 59px; margin-top: 11px; padding: 0px 0px; } #head.sticky #navigation ul li a { font-size: 15px; padding: 10px 3px 6px 3px; } #head.sticky #navigation > ul > li > ul li a { padding: 14px 18px 6px 25px; } #head.sticky #navigation ul li:last-child a { padding-right: 0px; } #head.sticky #navigation > ul > li.fixed_desktop_navi_button { display: inline-block; } #head.sticky #navigation .search_bar { top: 16px; } #head.sticky #toggle_mobile_navigation { margin-top: 0px; } } @media only screen and (min-width: 1200px) { #navigation > ul > li > a { font-size: 16px; padding-left: 10px; padding-right: 10px; } /* ---- Sticky-Darstellungen ---- */ #head.sticky #navigation ul li a { padding-left: 8px; padding-right: 8px; } } /*@media only screen and (min-width: 1500px) { #navigation > ul > li > a { font-size: 17px; padding-left: 10px; padding-right: 10px; } !* ---- Sticky-Darstellungen ---- *! #head.sticky #navigation ul li a { padding-left: 8px; padding-right: 8px; } }*/ /* speziell für Landingpage */ #landingpage_info { display: inline-block; float: right; width: 240px; height: 40px; box-sizing: border-box; margin: 0px 0px 0px 0px; padding: 0px; text-align: right; z-index: 900; } #landingpage_info .o_tinymce { display: inline-block; text-align: right; font-size: 0.65em; } #landingpage_info .o_tinymce h2 { font-size: 1.2em; line-height: 1.0; margin: 3px 0px 0px 0px; padding: 0px; } #landingpage_info .o_tinymce h2::after { display: none; } #landingpage_info .o_bild { display: inline-block; float: right; margin: 5px 0px 0px 10px; width: 85px; height: auto; background-color: #fff; transition: all 0.25s ease-in-out 0s; -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.4); -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.4); box-shadow: 2px 2px 5px rgba(0,0,0,0.4); } #landingpage_info .o_bild img { width: auto; height: auto; max-width: 100%; max-height: 200px; transition: all 0.25s ease-in-out 0s; } body.landingpage-messe #toggle_mobile_navigation { display: none; } @media only screen and (MAX-width: 994px) { #head.sticky #landingpage_info .o_tinymce { display: none; } #head.sticky #landingpage_info .o_bild { width: auto; height: auto; margin-top: 0px; } #head.sticky #landingpage_info .o_bild img { max-width: 100%; max-height: 82px; } } @media only screen and (min-width: 995px) { #landingpage_info { width: auto; height: 60px; margin: 5px 0px 0px 0px; } #landingpage_info .o_tinymce { font-size: 1.0em; } #landingpage_info .o_tinymce h2 { font-size: 1.45em; line-height: 1.1; margin: 17px 0px 4px 0px; } #landingpage_info .o_bild { margin: 18px 0px 0px 30px; width: 152px; } #head.sticky #landingpage_info .o_tinymce { height: 50px; overflow: hidden; } #head.sticky #landingpage_info .o_bild { width: auto; height: auto; margin-top: 0px; } #head.sticky #landingpage_info .o_bild img { max-width: 100%; max-height: 90px; } } @media only screen and (min-width: 1500px) { #landingpage_info { } } /* ------ Section-Formatierungen ------ */ #section-slideshow { position: relative; clear: both; width: 100%; min-height: 330px; height: 67vw; padding-top: 0px; padding-bottom: 0px; box-sizing: border-box; margin-bottom: 0px; background-color: transparent; overflow: hidden; z-index: 500; } #section-slideshow .anim-slider { min-height: 330px; height: 67vw; margin-top: 0px; background-color: #aaa; } #section-slideshow .anim-slide { opacity: 0; } #section-slideshow .anim-slide-this { opacity: 1; } #section-slideshow .anim-dots { opacity: 1; bottom: 3px; } #section-slideshow .anim-dots span { width: 7px; height: 7px; margin: 1px 3px; background-color: transparent; border: 1px solid #fff; -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.4); box-shadow: 0px 0px 3px rgba(0,0,0,0.4); -moz-border-radius: 9px; border-radius: 9px; -webkit-border-radius: 9px; } #section-slideshow .anim-dots span.anim-dots-this { background-color: #fff; border: 1px solid #fff; } #section-slideshow .anim-dots span.anim-dots-this::after { background: transparent none repeat scroll 0 0; } #section-slideshow li.anim-slide { background-color: transparent; background-size: cover; background-position: center center; } #section-slideshow li.anim-slide .slogan_wrapper { width: 100%; height: auto; top: 65%; margin-left: 0px; transform: translateY(-50%); padding: 0px; text-align: left; } #section-slideshow li.anim-slide .slogan_wrapper .container { padding: 0px 10px; } #section-slideshow li.anim-slide .slogan_wrapper h1, #section-slideshow li.anim-slide .slogan_wrapper h2, #section-slideshow li.anim-slide .slogan_wrapper h3, #section-slideshow li.anim-slide .slogan_wrapper a, #section-slideshow li.anim-slide .slogan_wrapper i, #section-slideshow li.anim-slide .slogan_wrapper br, #section-slideshow li.anim-slide .slogan_wrapper span, #section-slideshow li.anim-slide .slogan_wrapper p { position: relative; display: block; clear: both; text-align: left; color: #fff; font-size: inherit; line-height: inherit; } #section-slideshow li.anim-slide .slogan_wrapper h1, #section-slideshow li.anim-slide .slogan_wrapper h2 { font-size: 24px; line-height: 1.05em; font-weight: 600; text-shadow: 0px 0px 10px rgba(0,0,0,0.2); width: auto; } #section-slideshow li.anim-slide .slogan_wrapper h1 span, #section-slideshow li.anim-slide .slogan_wrapper h2 span { font-size: 16px; line-height: 1.2em; font-weight: 400; color: inherit; text-transform: none; display: inline-block; text-shadow: 0px 0px 9px rgba(0,0,0,0.2); } #section-slideshow li.anim-slide .slogan_wrapper h1 span br, #section-slideshow li.anim-slide .slogan_wrapper h2 span br { position: relative; display: inline-block; clear: both; text-align: left; } #section-slideshow li.anim-slide .slogan_wrapper a.bn { display: inline-block; margin: 0px auto; width: auto; font-size: 20px; color: #fff; margin-top: 10px; margin-bottom: 10px; padding: 0.6em 1.8em; border: 1px solid #fff; -moz-border-radius: 99px; border-radius: 99px; -webkit-border-radius: 99px; transition: all 0.25s ease-in-out 0s; } #section-slideshow li.anim-slide .slogan_wrapper p { width: auto; font-size: 20px; margin-top: 10px; margin-bottom: 10px; } #section-slideshow .anim-arrows-prev { top: 60%; transform: translateY(-50%); left: 0 !important; text-align: right; margin-left: -18px; padding: 0px 9px 0px 9px !important; background-color: transparent; z-index: 800; } #section-slideshow .anim-arrows-next { top: 60%; transform: translateY(-50%); right: 0 !important; text-align: left; margin-right: -18px; padding: 0px 9px 0px 9px !important; background-color: transparent; z-index: 800; } #section-slideshow .anim-arrows-prev i, #section-slideshow .anim-arrows-next i { color: #fff; width: 20px; height: 24px; vertical-align: middle; font-size: 22px; padding: 3px 3px 0px 3px; font-weight: 100; transition: all 0.25s ease-in-out 0s; } #section-slideshow::before { content: ""; position: absolute; height: 160px; width: 100%; top: 0px; opacity: 0.35; z-index: 710; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,050505+100&0+0,1+96 */ background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 2%, rgba(5,5,5,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 2%,rgba(5,5,5,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 2%,rgba(5,5,5,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00050505',GradientType=0 ); } @media only screen and (max-width: 994px) { #section-slideshow .anim-arrows-prev, #section-slideshow .anim-arrows-next { opacity: 0.5; visibility: visible !important; } #section-slideshow .anim-arrows-prev { padding: 30px 30px 30px 9px !important; } #section-slideshow .anim-arrows-next { padding: 30px 9px 30px 30px !important; } #section-slideshow .anim-arrows-prev:hover, #section-slideshow .anim-arrows-next:hover { opacity: 1.0; } } @media only screen and (min-width: 995px) { #section-slideshow li.anim-slide .slogan_wrapper { top: 56%; } #section-slideshow li.anim-slide .slogan_wrapper .container { padding: 0px 0px; } #section-slideshow li.anim-slide .slogan_wrapper h1, #section-slideshow li.anim-slide .slogan_wrapper h2 { font-size: 44px; } #section-slideshow li.anim-slide .slogan_wrapper h1 span, #section-slideshow li.anim-slide .slogan_wrapper h2 span { font-size: 36px; } #section-slideshow, #section-slideshow .anim-slider { min-height: 520px; height: 60vw; } #section-slideshow .anim-dots { bottom: 84px; } #section-slideshow .anim-dots span { width: 10px; height: 10px; margin: 1px 5px; } #section-slideshow .anim-arrows-prev { visibility: visible; top: 57%; margin-left: -12px; padding: 2px 12px 2px 10px !important; } #section-slideshow .anim-arrows-next { visibility: visible; top: 57%; margin-right: -12px; padding: 2px 10px 2px 12px !important; } #section-slideshow .anim-arrows-prev i, #section-slideshow .anim-arrows-next i { width: 32px; height: 36px; font-size: 35px; padding: 4px 0px 0px 0px; } #section-slideshow::before { height: 320px; } } @media only screen and (min-width: 1200px) { #section-slideshow li.anim-slide .slogan_wrapper { } #section-slideshow, #section-slideshow .anim-slider { min-height: 780px; height: 46vw; } #section-slideshow li.anim-slide .slogan_wrapper h1, #section-slideshow li.anim-slide .slogan_wrapper h2 { font-size: 60px; } #section-slideshow li.anim-slide .slogan_wrapper h1 span, #section-slideshow li.anim-slide .slogan_wrapper h1 span { font-size: 40px; } } #section-produkte { } #section-produkte:before { content: ''; position: absolute; width: 960px; height: 0px; padding: 0px; left: 50%; margin-top: 0px; transform: translateX(-50%); z-index: 888; background-color: #fff; z-index: 690; -moz-box-shadow: 0px -4px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0px -4px 10px rgba(0,0,0,0.2); box-shadow: 0px -4px 10px rgba(0,0,0,0.2); } #section-produkte .container { position: relative; padding: 20px 10px; margin-top: 0px; background-color: #fff; z-index: 700; } #section-produkte .container > h2 { color: #000; font-size: 1.6rem; margin-top: 0px; font-weight: 300; } #section-produkte .container > h2::after { content: ''; position: absolute; display: block; margin-left: 0px; margin-top: 0.36em; width: 32px; height: 3px; background-color: var(--color-ci1); } #section-produkte .badge_ce-tuev { position: absolute; right: 0px; top: -37px; width: 99px; height: 103px; z-index: 50; overflow: hidden; } #section-produkte .badge_ce-tuev img { width: 100%; height: auto; margin: 0px; margin-left: 3px; padding: 0px; z-index: 50; } .overview.produkte { display: block; clear: both; margin: 15px 0px 25px 0px; } #section-produkte .overview.produkte { margin: 25px 0px 15px 0px; } .overview.produkte .element { width: 100%; height: auto; min-height: 40vw; margin: 20px 0px; padding: 0px 0px 5px 0px; vertical-align: top; background-color: #fff; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.1); box-shadow: 0px 0px 4px rgba(0,0,0,0.1); } .overview.produkte a.element:hover { -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.25); -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.25); box-shadow: 0px 0px 6px rgba(0,0,0,0.25); } .overview.produkte .element .pic { display: block; clear: both; width: 100%; height: 58vw; margin: 0px; background-color: #eee; background-size: cover; background-position: center center; background-repeat: no-repeat; } .overview.produkte .element .teaser { position: absolute; height: 34px; margin-top: -34px; padding: 5px 12px 5px 12px; color: #fff; font-style: italic; font-weight: 400; font-size: 0.9rem; background: rgb(35,181,61); background: -moz-linear-gradient(left, rgba(35,181,61,1) 0%, rgba(43,139,47,1) 100%); background: -webkit-linear-gradient(left, rgba(35,181,61,1) 0%,rgba(43,139,47,1) 100%); background: linear-gradient(to right, rgba(35,181,61,1) 0%,rgba(43,139,47,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23b53d', endColorstr='#2b8b2f',GradientType=1 ); } .overview.produkte .element .teaser::after { content: ''; position: absolute; margin-left: 5px; margin-top: 2px; width: 0px; height: 0px; -webkit-transform:rotate(90deg); border-style: solid; border-width: 20px 34px 0 0; border-color: transparent rgba(43,139,47,1) transparent transparent; } .overview.produkte .element .teaser_border { position: absolute; width: 84px; height: 84px; margin-top: -65px; margin-left: 20px; padding: 2px; border: 1px solid var(--color-ci1); -moz-border-radius: 100px; border-radius: 100px; -webkit-border-radius: 100px;} .overview.produkte .element .teaser.rund { display: table; width: 78px; height: 78px; margin: 0px; padding: 3px 3px; box-sizing: border-box; color: #fff; font-style: normal; text-align: center; -webkit-transform:rotate(-10deg); font-weight: 400; font-size: 0.78rem; line-height: 0.95em; background: var(--color-ci1); -moz-border-radius: 100px; border-radius: 100px; -webkit-border-radius: 100px; } .overview.produkte .element .teaser.rund::after { visibility: hidden; } .overview.produkte .element .teaser.rund .wrapper { display: table-cell; width: 100%; height: 100%; vertical-align: middle; color: inherit; font-size: inherit; line-height: inherit; } .overview.produkte .element .desc { display: block; clear: both; width: 100%; height: auto; font-size: 0.95rem; line-height: 1.32em; padding: 22px 20px 15px 20px; } .overview.produkte .element .desc h2, .overview.produkte .element .desc h3 { margin: 5px 0px 10px 0px; color: #000; font-size: 1.4em; font-weight: 500; } .overview.produkte .element .bn { display: block; clear: both; margin: 15px 0px 15px 20px; padding: 2px 0px; color: var(--color-ci1); font-weight: 500; transition: all 0.20s ease-in-out 0s; } .overview.produkte .element .bn:hover { color: var(--color-ci1-hover); } .overview.produkte .element .bn.pfeil { padding-left: 36px; background-image: url("../images/pfeil@3x.png"); background-repeat: no-repeat; background-size: 24px auto; background-position: 0px 3px; } .overview.produkte .element .bn.pfeil:hover, .overview.produkte a.element:hover .bn.pfeil { background-position: 3px 3px; } @media only screen and (min-width: 995px) { #section-produkte:before { width: 980px; height: 130px; margin-top: -90px; } #section-produkte .container { padding: 30px 40px; margin-top: -90px; } #section-produkte .container > h2 { font-size: 2.0rem; } #section-produkte .container > h2::before { width: 42px; height: 3px; } #section-produkte .badge_ce-tuev { top: -8px; right: -2px; } .overview.produkte { margin: 20px 0px 30px 0px; } #section-produkte .overview.produkte { margin: 35px 0px 20px 0px; } .overview.produkte .element { width: 32%; margin: 1%; min-height: 455px; } .overview.produkte .element:nth-child(3n+1) { margin-left: 0px; } .overview.produkte .element:nth-child(3n+3) { margin-right: 0px; } .overview.produkte .element .pic { height: 200px; } .overview.produkte .element .teaser { } .overview.produkte .element .teaser::after { } .overview.produkte .element .teaser_border { margin-left: 200px; } .overview.produkte .element .teaser.rund { margin-left: 0px; } .overview.produkte .element .desc { min-height: 200px; padding: 22px 20px 5px 20px; } } @media only screen and (min-width: 1200px) { #section-produkte:before { width: 1170px; } .overview.produkte .element { min-height: 480px; } .overview.produkte .element .pic { height: 230px; } .overview.produkte .element .teaser { } .overview.produkte .element .teaser_border { margin-left: 260px; } .overview.produkte .element .desc h2, .overview.produkte .element .desc h3 { font-size: 1.5em; } } #section-qualitaet { padding-top: 0px; padding-bottom: 0px; background-color: #f8f8f8; background-image: url("../images/section-bg_qualitaet.jpg"); background-size: 100% auto; background-repeat: no-repeat; background-position: center bottom; } #section-qualitaet .container { padding: 0px; } #section-qualitaet .content-col3-1, #section-qualitaet .content-col3-2 { padding-top: 40px; padding-bottom: 0px; padding-left: 20px; } #section-qualitaet .content-col3-1 { padding-left: 20px; padding-bottom: 30px; background-color: #f8f8f8; } #section-qualitaet .content-col3-1 > h2, #section-qualitaet .content-col3-1 > h3 { color: #000; margin-top: 0px; margin-bottom: 0px; font-size: 1.55em; line-height: 1.07em; } #section-qualitaet .content-col3-1 > h2::after, #section-qualitaet .content-col3-1 > h3::after { content: ''; display: block; position: absolute; margin-left: 0px; margin-top: 0.4em; width: 32px; height: 3px; background-color: var(--color-ci1); } #section-qualitaet .content-col3-1 > h2 span, #section-qualitaet .content-col3-1 > h3 span { display: block; margin-top: 10px; font-size: 0.7em; line-height: 1.1em; } #section-qualitaet .content-col3-2 { min-height: 22vw; padding-top: 18.5vw; } #section-qualitaet .content-col3-2 > * { color: #fff; } @media only screen and (min-width: 995px) { #section-qualitaet { background-size: 71% auto; background-position: 115% 0%; } #section-qualitaet .content-col3-1 { padding-top: 40px; padding-bottom: 40px; padding-left: 0px; background-color: transparent; } #section-qualitaet .content-col3-2 { padding-top: 195px; padding-bottom: 40px; padding-left: 30px; } #section-qualitaet .content-col3-2 { min-height: 150px; } #section-qualitaet .content-col3-1 > h2, #section-qualitaet .content-col3-1 > h3 { font-size: 2.05em; } #section-qualitaet .content-col3-1 > h2 span, #section-qualitaet .content-col3-1 > h3 span { } #section-qualitaet .content-col3-2 > h3 { font-size: 1.85em; } } @media only screen and (min-width: 1200px) { #section-qualitaet { background-size: 65% auto; background-position: right top; } #section-qualitaet .content-col3-2 { min-height: 160px; padding-top: 190px; padding-left: 40px; } } @media only screen and (min-width: 1500px) { #section-qualitaet { background-size: 60% auto; background-position: right top; } #section-qualitaet .content-col3-2 { min-height: 210px; padding-top: 190px; padding-left: 80px; } } #section-ueberuns { padding-bottom: 60px; } #section-ueberuns .overview { display: block; clear: both; margin: 25px 0px 45px 0px; } #section-ueberuns .overview .element { width: 100%; padding: 0px; margin: 0px 0px 40px 0px; height: auto; min-height: auto; vertical-align: top; text-align: center; } #section-ueberuns .overview .element .icon { display: block; clear: both; width: 100%; height: 104px; margin: 0px 0px 15px 0px; background-size: contain; background-position: center center; background-repeat: no-repeat; } #section-ueberuns .overview .element h2, #section-ueberuns .overview .element h3 { font-size: 1.5em; color: #000; font-weight: 600; margin-top: 0px; margin-bottom: 10px; line-height: 1.08em; } @media only screen and (min-width: 995px) { #section-ueberuns .overview .element { width: 23.5%; margin: 1%; } #section-ueberuns .overview .element:nth-child(4n+1) { margin-left: 0px; } #section-ueberuns .overview .element:nth-child(4n+4) { margin-right: 0px; } #section-ueberuns .overview .element h2, #section-ueberuns .overview .element h3 { font-size: 1.3em; } } @media only screen and (min-width: 1200px) { #section-ueberuns .overview .element h2, #section-ueberuns .overview .element h3 { font-size: 1.5em; } } #section-aktuelles { padding-bottom: 55px; background-color: #eee; background-image: url("../images/section-bg_aktuelles.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; } #section-aktuelles .container { text-align: center; } #section-aktuelles .container .o_tinymce > h2 { color: #fff; padding-bottom: 30px; } #section-aktuelles .container .o_tinymce > h2::after { content: ''; position: absolute; display: block; left: 50%; margin-left: -16px; margin-top: 0.36em; width: 32px; height: 3px; background-color: var(--color-ci1); } .overview.aktuelles { display: block; clear: both; margin: 25px 0px 30px 0px; } .overview.aktuelles .element { width: 100%; height: auto; min-height: 40vw; margin: 20px 0px; padding: 0px 0px 5px 0px; vertical-align: top; background-color: #fff; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.1); box-shadow: 0px 0px 4px rgba(0,0,0,0.1); } .overview.aktuelles a.element:hover { -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.25); -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.25); box-shadow: 0px 0px 6px rgba(0,0,0,0.25); } .overview.aktuelles .element .pic { display: block; clear: both; width: 100%; height: 58vw; margin: 0px; background-color: #eee; background-size: cover; background-position: center center; background-repeat: no-repeat; } .overview.aktuelles .element .desc { display: block; clear: both; width: 100%; height: auto; font-size: 0.95rem; line-height: 1.32em; padding: 22px 20px 15px 20px; text-align: left;} .overview.aktuelles .element .desc h2, .overview.aktuelles .element .desc h3 { margin: 5px 0px 10px 0px; color: #000; font-size: 1.3em; font-weight: 500; padding-bottom: 0px !important; } .overview.aktuelles .element .desc h2::after { display: none; } .overview.aktuelles .element .datum { display: inline-block; float: left; color: #999; font-size: 0.95em; font-weight: 400; margin: 18px 0px 0px 0px; } .overview.aktuelles .element .bn { display: inline-block; float: right; margin: 15px 0px 15px 0px; padding: 2px 0px; color: var(--color-ci1); font-size: 1.0rem; line-height: 1.6rem; font-weight: 500; background-color: #fff; transition: all 0.20s ease-in-out 0s; } .overview.aktuelles .element .bn:hover { color: var(--color-ci1-hover); } .overview.aktuelles .element .bn.pfeil { padding-left: 36px; background-image: url("../images/pfeil@3x.png"); background-repeat: no-repeat; background-size: 24px auto; background-position: 0px 3px; } .overview.aktuelles .element .bn.pfeil:hover, .overview.aktuelles a.element:hover .bn.pfeil { background-position: 3px 3px; } #section-aktuelles a.bn { background-color: #fff; } #section-aktuelles a.bn:hover { background-color: var(--color-ci1); } @media only screen and (min-width: 995px) { #section-aktuelles { padding-bottom: 75px; } #section-aktuelles .container > h2 { font-size: 2.0rem; } #section-aktuelles .container > h2::before { width: 42px; height: 3px; margin-left: -21px; } #section-aktuelles .overview.aktuelles { margin: 35px 0px 55px 0px; } .overview.aktuelles .element { width: 49%; margin: 1%; min-height: auto; height: 230px; padding: 0px; } .overview.aktuelles .element:nth-child(2n+1) { margin-left: 0px; } .overview.aktuelles .element:nth-child(2n+2) { margin-right: 0px; } .overview.aktuelles .element .pic { display: inline-block; width: 36%; height: 230px; margin: 0px; vertical-align: top; } .overview.aktuelles .element .desc { display: inline-block; width: 64%; height: 230px; margin: 0px; padding: 20px 20px 15px 25px; vertical-align: top; } .overview.aktuelles .element .desc .content { min-height: 142px; } .overview.aktuelles .element .desc h2, .overview.aktuelles .element .desc h3 { font-size: 1.24em; line-height: 1.2em; } } @media only screen and (min-width: 1200px) { .overview.aktuelles .element { height: 235px; } .overview.aktuelles .element .pic { height: 235px; } .overview.aktuelles .element .desc { height: 235px; } .overview.aktuelles .element .desc .content { min-height: 135px; } } #section-referenzen { text-align: center; background-color: #fff; } #section-referenzen .container > h2 { color: #000; padding-bottom: 30px; font-weight: 300; } #section-referenzen .container > h2::after { content: ''; position: absolute; display: block; left: 50%; margin-left: -16px; margin-top: 0.36em; width: 32px; height: 3px; background-color: var(--color-ci1); } @media only screen and (min-width: 995px) { #section-referenzen .container > h2 { font-size: 2.0rem; } } #section-kontakt { text-align: center; background-color: #fff; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#0d000000',GradientType=0 ); } #section-kontakt .container > h2 { color: #000; padding-bottom: 30px; font-weight: 300; } #section-kontakt .container > h2::after { content: ''; position: absolute; display: block; left: 50%; margin-left: -16px; margin-top: 0.36em; width: 32px; height: 3px; background-color: var(--color-ci1); } #section-kontakt .container .content-col3-2, #section-kontakt .container .content-col3-1 { padding: 30px; margin-bottom: 0px; text-align: left; background-color: #fff; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.1); box-shadow: 0px 0px 4px rgba(0,0,0,0.1); } #section-kontakt .container .content-col3-1 { margin-top: 0px; padding-top: 56vw; background-image: url('/upload/mediapool/Inhaltsbilder/Firmengebaeude-HMC-Tuessling.jpg'); background-size: contain; background-position: top center; background-repeat: no-repeat; } #section-kontakt .container h3 { font-size: 1.5em; color: #000; } #section-kontakt .container .content-col3-2 { line-height: 1.85em; } #section-kontakt .container .content-col3-2 a { color: #000; padding: 5px 0px; } #section-kontakt .container .content-col3-2 i { width: 24px; color: var(--color-ci1); } #section-kontakt .container .content-col3-1 h3 { font-size: 1.0em; margin: 5px 0px; } #section-kontakt .container .content-col3-2 a.bn { padding: 10px 20px; display: block; margin: 5px 0px; text-align: center; } #section-kontakt .container .content-col3-2 a.bn:hover { color: #fff; } @media only screen and (min-width: 995px) { #section-kontakt .container > h2 { font-size: 2.0rem; } #section-kontakt .container > h2::before { width: 42px; height: 3px; margin-left: -21px; } #section-kontakt .container .content-col3-2 { min-height: 500px; margin-right: 0px; z-index: 600; padding: 45px 45px 52px 45px; } #section-kontakt .container .content-col3-1 { min-height: 500px; margin-top: 0px; margin-left: 0px; padding-top: 215px; } #section-kontakt .container .content-col3-2 a.bn { display: inline-block; margin: 0px 10px 0px 0px; } } @media only screen and (min-width: 1200px) { #section-kontakt .container .content-col3-2 a.bn { margin: 0px 25px 0px 0px; } } /* Kontakt-Bereich im Footer auf Folgeseiten */ #section-kontakt.minimal { min-height: 500px; } #section-kontakt.minimal .bg { position: absolute; z-index: 10; left: 0; bottom: 0; height: 85vw; width: 90%; background-image: url("../images/section-bg_kontakt-minimal.png"); background-repeat: no-repeat; background-position: bottom left; background-size: 100% auto;} #section-kontakt.minimal .container { z-index: 600; } #section-kontakt.minimal .container > h2 { text-align: left; } #section-kontakt.minimal .container > h2::after { left: 0px; margin-left: 0px; } #section-kontakt.minimal .content-col3-1, #section-kontakt.minimal .content-col3-2 { padding: 0px 0px 25px 0px; min-height: auto; background-color: transparent; background-image: url(); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #section-kontakt.minimal .content-col3-2 { margin-left: 0px; } #section-kontakt.minimal .content-col3-1 { line-height: 1.85em; } #section-kontakt.minimal .content-col3-1 a { color: #000; padding: 5px 0px; } #section-kontakt.minimal .content-col3-1 a:hover { color: var(--color-ci1); } #section-kontakt.minimal .content-col3-1 i { width: 24px; color: var(--color-ci1); } #section-kontakt.minimal .content-col3-1 h3 { font-size: 1.28em; font-weight: 600; margin: 0px 0px 15px 0px; } #section-kontakt.minimal .content-col3-1 a.bn { padding: 10px 20px; display: block; margin: 5px 0px; text-align: center; } #section-kontakt.minimal .content-col3-1 a.bn:hover { color: #fff; } @media only screen and (max-width: 994px) { #section-kontakt.minimal { padding-bottom: 62vw; } #section-kontakt.minimal .container > h2::after { left: auto; margin-left: 0px; } #section-kontakt.minimal .content-col3-1:empty { display: none; } } @media only screen and (min-width: 995px) { #section-kontakt.minimal .bg { width: 35%; height: 36vw } } @media only screen and (min-width: 1200px) { #section-kontakt.minimal .bg { width: 30%; height: 29vw; } } /* für Folgeseiten-Darstellung auf Seite "Kontakt" */ body.folgeseite .content-col3-2 a.kontakt-link { color: #000; padding: 5px 0px; } body.folgeseite .content-col3-2 a.kontakt-link:hover { color: var(--color-ci1); } body.folgeseite .content-col3-2 i { color: var(--color-ci1); } body.folgeseite .content-col3-2 a.kontakt-link i { width: 24px; } @media only screen and (min-width: 1200px) { body.folgeseite .container .content-col3-2 a.bn + a.bn { margin: 0px 0px 0px 25px; } } /* Formatierungen für Folgeseiten */ #abstand_folgeseiten { display: block; clear: both; width: 100%; height: 360px; padding: 0px 0px 0px 0px; background-size: cover; background-position: center center; background-color: #fcea92; } #abstand_folgeseiten:after { content: ""; position: absolute; width: 100%; height: 14px; margin-top: 346px; background-color: rgba(252,234,146,0.7); } @media only screen and (max-width: 994px) { #abstand_folgeseiten { height: 200px; } #abstand_folgeseiten:after { height: 10px; margin-top: 190px; } } #section-intro-folgeseiten { position: relative; clear: both; width: 100%; height: 320px; padding-top: 0px; padding-bottom: 0px; box-sizing: border-box; margin-bottom: 0px; background-image: url(../upload/mediapool/Headbilder/standard.jpg); background-position: center center; background-size: cover; background-color: #eee; overflow: hidden; z-index: 700; } #section-intro-folgeseiten .container { height: 100%; z-index: 200; } #section-intro-folgeseiten .container .title { position: absolute; bottom: 25px; height: auto; } #section-intro-folgeseiten h1, #section-intro-folgeseiten .h1 { margin: 5px 0px; font-size: 30px; line-height: 1.0em; color: #fff; font-weight: 600; z-index: 200; } #section-intro-folgeseiten h2, #section-intro-folgeseiten h3, #section-intro-folgeseiten h4 { color: #fff; margin-bottom: 10px; } #section-intro-folgeseiten p { color: #fff; } #section-intro-folgeseiten h2 { margin: 0px; font-size: 20px; line-height: 1.0em; color: #fff; font-weight: 400; z-index: 200; padding-bottom: 0px !important; } #section-intro-folgeseiten h1 br { font-size: 0px; line-height: 0px; height: 0px; } #section-intro-folgeseiten h1 span, #section-intro-folgeseiten h2 span { color: inherit; font-weight: 400; font-size: 0.5em; line-height: 0.8em; } body.folgeseite #section-intro-folgeseiten h2:after { display: none; } #section-intro-folgeseiten::before { content: ''; position: absolute; width: 100%; height: 30vw; bottom: 0px; z-index: 100; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); } @media only screen and (min-width: 995px) { #section-intro-folgeseiten { height: 480px; } #section-intro-folgeseiten .container { padding-top: 300px; } #section-intro-folgeseiten .container .title { bottom: 40px; } #section-intro-folgeseiten h1, #section-intro-folgeseiten .h1 { font-size: 52px; } #section-intro-folgeseiten h2 { font-size: 24px; } #section-intro-folgeseiten::before { height: 180px; } } @media only screen and (min-width: 1500px) { #section-intro-folgeseiten { height: 540px; } #section-intro-folgeseiten .container .title { bottom: 50px; } #section-intro-folgeseiten h1, #section-intro-folgeseiten .h1 { font-size: 56px; } #section-intro-folgeseiten h2 { font-size: 30px; } #section-intro-folgeseiten::before { height: 240px; } } /* speziell für Landingpage */ body.landingpage-messe #section-intro-folgeseiten { height: 380px; } body.landingpage-messe #section-intro-folgeseiten .container { padding-left: 0px; } body.landingpage-messe #section-intro-folgeseiten .container .title { width: 100%; bottom: 25px; text-align: center; } body.landingpage-messe #section-intro-folgeseiten h1, body.landingpage-messe #section-intro-folgeseiten .h1 { text-align: center; } body.landingpage-messe #section-intro-folgeseiten .title > a { display: inline-block; margin-top: 15px; color: #fff; font-size: 0.85em; font-weight: 300; text-align: center; padding: 8px 10px 8px 10px; background-color: var(--color-ci1); } body.landingpage-messe #section-intro-folgeseiten .title > a:hover { background-color: var(--color-ci1-hover); } @media only screen and (min-width: 995px) { body.landingpage-messe #section-intro-folgeseiten { height: 560px; } body.landingpage-messe #section-intro-folgeseiten .container { padding-top: 300px; } body.landingpage-messe #section-intro-folgeseiten .container .title { bottom: 40px; } body.landingpage-messe #section-intro-folgeseiten h1, body.landingpage-messe #section-intro-folgeseiten .h1 { font-size: 52px; } body.landingpage-messe #section-intro-folgeseiten .title > a { margin-top: 40px; font-size: 1.2em; padding: 15px 30px 15px 50px; } body.landingpage-messe #section-intro-folgeseiten .title > a::before { content: "\f01a"; position: absolute; margin-left: -32px; margin-top: 1px; font-family: 'FontAwesome'; color: #fff; font-size: 22px; width: 22px; height: 22px; } } @media only screen and (min-width: 1500px) { body.landingpage-messe #section-intro-folgeseiten { height: 600px; } body.landingpage-messe #section-intro-folgeseiten .container .title { bottom: 50px; } body.landingpage-messe #section-intro-folgeseiten h1, body.landingpage-messe #section-intro-folgeseiten .h1 { font-size: 56px; } body.landingpage-messe #section-intro-folgeseiten .title > a { margin-top: 45px; font-size: 1.25em; padding: 18px 40px 18px 60px; } } .brotkruemel { display: block; clear: both; width: 100%; height: auto; padding: 10px 0px 0px 0px; background-color: #fff; } .brotkruemel .container { font-size: 12px; color: #888; font-weight: 100; padding-bottom: 8px; border-bottom: 1px solid #eee; } .brotkruemel .container span { font-size: inherit; color: inherit; } .brotkruemel .container i { font-size: 17px; margin: 0px 4px 2px 4px; color: #aaa; vertical-align: middle; } .brotkruemel .container a { color: #444; font-size: inherit; } @media only screen and (min-width: 995px) { .brotkruemel { padding: 13px 0px 10px 0px; } .brotkruemel .container { font-size: 13px; padding-left: 2px; } .brotkruemel .container i { font-size: 21px; margin: 0px 8px 3px 8px; } } #section-inhalt { margin-top: 0px; margin-bottom: 0px; padding-bottom: 50px; min-height: 540px; background-color: #fff; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#0d000000',GradientType=0 ); } @media only screen and (min-width: 995px) { #section-inhalt { padding-bottom: 90px; } } /* Listen auf Folgeseiten */ #section-inhalt ul, #section-intro ul, .produktbox-detail ul, .tab_inhalte ul, body.landingpage-messe #section-inhalt-weiss ul, #section-referenzen ul { margin: 15px 0px; padding: 0px; list-style-type: none; } #section-inhalt ul li, #section-intro ul li, .produktbox-detail ul li, .tab_inhalte ul li, body.landingpage-messe #section-inhalt-weiss ul li, #section-referenzen ul li { margin: 8px 0px; padding: 2px 0px; padding-left: 20px; font-size: 1.02em; line-height: 1.25em; } #section-inhalt ul li:before, #section-intro ul li:before, .produktbox-detail ul li:before, .tab_inhalte ul li:before, body.landingpage-messe #section-inhalt-weiss ul li:before, #section-referenzen ul li:before { content: "\f105"; position: absolute; margin-left: -20px; margin-top: 1px; font-family: 'FontAwesome'; color: #000; font-size: 18px; width: 18px; height: 18px; } /* Links auf Folgeseiten */ #section-inhalt a, #section-intro a, .produktbox-detail a, #section-referenzen a { font-weight: inherit; } /* Template - Über Uns / Philosophie & Fakten */ #section-inhalt-weiss { background-color: #fff; } #section-improfil { background-color: #f8f8f8; } #section-improfil table { width: 100%; margin-bottom: 30px; background-color: #fff; padding: 10px 15px; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.1); box-shadow: 0px 0px 4px rgba(0,0,0,0.1); } #section-improfil table:before { content: ''; position: absolute; right: 0px; margin-top: -110px; width: 110px; height: 120px; background-position: center right; background-image: url("../images/deutschland-karte-mit-pin@3x.png"); background-size: contain; background-repeat: no-repeat; } #section-improfil table tr { } #section-improfil table tr td { padding: 10px 10px 10px 0px; border-top: 1px solid #eaeaea; } #section-improfil table tr:first-child td { border-top: none; } #section-improfil table tr td:nth-child(2) { font-weight: 500; } @media only screen and (min-width: 995px) { #section-improfil table:before { right: 0px; margin-top: -35px; width: 234px; height: 297px; } #section-improfil table { width: 89%; padding: 12px 90px 12px 30px; } } #section-referenzen { background-color: #fff; } #section-referenzen .kategorie { display: block; clear: both; text-align: center; padding: 2px 10px; width: 100%; margin: 25px 0px 0px 0px; box-sizing: border-box; } #section-referenzen .kategorie span { position: absolute; padding: 2px 20px; transform: translate(-50%,-50%); font-size: 0.85em; font-weight: 300; background-color: #fff; z-index: 11; } #section-referenzen .kategorie:before { content: ''; position: absolute; left: 0px; right: 0px; height: 1px; margin-top: 0px; background-color: #ddd; z-index: 10; } .overview.referenzen { margin: 10px 0px; text-align: center; } .overview.referenzen .element { width: 32%; margin: 1%; } .overview.referenzen .element:nth-child(3n+1) { margin-left: 0; } .overview.referenzen .element:nth-child(3n+3) { margin-right: 0; } .overview.referenzen .element img { width: 100%; height: auto; } .overview.zertifikate { margin: 5px 0px; text-align: center; } .overview.zertifikate .element { width: 48%; margin: 1%; vertical-align: top; } .overview.zertifikate .element:nth-child(2n+1) { margin-left: 0; } .overview.zertifikate .element:nth-child(2n+2) { margin-right: 0; } .overview.zertifikate .element img { width: 90%; height: auto; max-width: 320px; } .overview.zertifikate .element .desc { display: block; margin: 25px 0px; width: 100%; height: auto; } .content-col2-1 img.img_responsiv_full.left { width: auto !important; height: auto; max-height: 150px; -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.3); box-shadow: 0px 0px 6px rgba(0,0,0,0.3); } .content-col2-1 img.img_responsiv_full.left.manual { max-width: 80px; margin-right: 20px !important; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } @media only screen and (max-width: 994px) { #section-referenzen .kategorie { width: 96%; margin-left: 3%; padding: 0px; } #section-referenzen .kategorie:before { width: 96%; margin-left: 3%; padding: 0px; } .overview.referenzen .element { width: 48%; margin: 1%; } .overview.referenzen .element:nth-child(2n+1) { margin-left: 0; } .overview.referenzen .element:nth-child(2n+2) { margin-right: 0; } .overview.zertifikate .element { width: 100%; margin: 1% 0%; } } @media only screen and (min-width: 995px) { .overview.referenzen .element { width: 31%; margin: 1%; } .overview.referenzen .element:nth-child(3n+1) { margin-left: 0; } .overview.referenzen .element:nth-child(3n+3) { margin-right: 0; } .overview.zertifikate .element { width: 48%; margin: 1% 1% 1% 1%; } .overview.zertifikate .element:nth-child(2n+1) { margin-left: 0; } .overview.zertifikate .element:nth-child(2n+2) { margin-right: 0; } .overview.zertifikate .element img { width: 80%; } #section-referenzen .content-col2-1 { padding-right: 90px; } } #section-umweltschutz-titel { padding-top: 60px; padding-bottom: 0px; background-color: #6f833e; background-image: url("../images/section-bg_umweltschutz.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; } #section-umweltschutz-titel .container { padding-bottom: 0px; } #section-umweltschutz-titel * { color: #fff; } #section-umweltschutz-titel h2:after { background-color: #fff; } #section-umweltschutz-titel .content-col3-2 { font-weight: 500; } @media only screen and (min-width: 995px) { #section-umweltschutz-titel { padding-top: 100px; } #section-umweltschutz-titel .content-col3-1 h2 { font-size: 2.0em; } #section-umweltschutz-titel .content-col3-1 h2 strong { font-size: 1.2em; } #section-umweltschutz-titel .content-col3-2 { padding-top: 60px; font-weight: 500; font-size: 1.05em; line-height: 1.5em; } #section-umweltschutz-titel .content-col3-2 { padding-top: 60px; font-weight: 500; font-size: 1.05em; line-height: 1.5em; } } @media only screen and (min-width: 1500px) { #section-umweltschutz-titel { padding-top: 130px; } } #section-umweltschutz { padding-top: 0px; background-color: #f8f8f8; } #section-sponsoring { background-color: #fff; } #section-sponsoring .content-col2-1 img { max-width: 100%; height: auto; } /* Template - Produktdetailseite */ #section-intro .row.textmitgalerie { margin-bottom: 30px; } #section-intro .row.textmitgalerie .content-col3-2 { font-size: 1.05em; line-height: 1.4em; } #section-intro .row.textmitgalerie .content-col3-2 ul li { line-height: 1.4em; } #section-intro .row.textmitgalerie .content-col3-1 .pic { display: block; clear: both; width: 100%; height: auto; height: auto; text-align: center; background-size: cover; background-color: #fff; } #section-intro .row.textmitgalerie .content-col3-1 .pic img { width: auto; max-width: 100%; height: auto; max-height: 100%; margin: 0px auto; vertical-align: middle; text-align: center; } #section-intro .row.textmitgalerie .content-col3-1 .thumbs { display: block; clear: both; width: 100%; height: auto; height: auto; margin: 10px 0px; } #section-intro .row.textmitgalerie .content-col3-1 .thumbs .element { display: inline-block; width: 49%; height: 170px; padding: 0px; margin: 0px; margin-right: 5px; border: 1px solid #eee; text-align: center; background-color: #fff; } #section-intro .row.textmitgalerie .content-col3-1 .thumbs .element a { display: block; width: 100%; height: 100%; background-size: cover; background-position: center center; } #section-intro .row.textmitgalerie .content-col3-1 .thumbs .element img { width: auto; max-width: 100%; height: auto; max-height: 100%; text-align: center; vertical-align: top; } .thumbs .slick-prev, .thumbs .slick-next { width: 30px; height: 30px; margin-top: -15px; background-color: rgba(255,255,255,0.6); right: 0px; } .thumbs .slick-prev:hover, .thumbs .slick-next:hover { background-color: rgba(255,255,255,0.99); } .thumbs .slick-prev { left: 0px; } .thumbs .slick-prev::before, .thumbs .slick-next::before { content: "\f104"; font-family: 'FontAwesome'; color: rgba(0,0,0,0.6); font-size: 22px; } .thumbs .slick-next::before { content: "\f105"; } @media only screen and (min-width: 995px) { #section-intro .row.textmitgalerie { margin-bottom: 50px; } #section-intro .row.textmitgalerie .content-col3-2 h2 { margin-top: 0px; } #section-intro .row.textmitgalerie .content-col3-1 .thumbs .element { display: inline-block; width: 50%; height: 170px; margin: 0px; margin-right: 5px; } #section-intro .row.textmitgalerie .content-col3-1 .thumbs .element:nth-child(2n) { } } /* Template - Landingpage-Messe */ body.landingpage-messe #section-inhalt-weiss .container .o_tinymce > a { padding-top: 3px; padding-bottom: 3px; padding-left: 36px; background-image: url("../images/pfeil@3x.png"); background-repeat: no-repeat; background-size: 24px auto; } body.landingpage-messe #section-inhalt-weiss .container .o_tinymce > a:hover { background-position: 2px 0px; } body.landingpage-messe #section-inhalt-weiss .produktbox-detail h2 { padding-bottom: 25px; } body.landingpage-messe #section-inhalt-weiss .produktbox-detail h2::after { content: ''; position: absolute; display: block; margin-left: 0px; margin-top: 0.36em; width: 32px; height: 3px; background-color: var(--color-ci1); } body.landingpage-messe #section-inhalt-weiss .produktbox-detail h3 { font-size: 1.35em; line-height: 1.4; font-weight: 200; } body.landingpage-messe #section-inhalt-weiss .produktbox-detail h3 strong { font-weight: 500; } body.landingpage-messe #section-inhalt-weiss .produktbox-detail .teaser_border { position: absolute; width: 84px; height: 84px; margin-top: 15px; margin-left: 20px; padding: 2px; border: 1px solid var(--color-ci1); -moz-border-radius: 100px; border-radius: 100px; -webkit-border-radius: 100px;} body.landingpage-messe #section-inhalt-weiss .produktbox-detail .teaser.rund { display: table; width: 78px; height: 78px; margin: 0px; padding: 3px 3px; box-sizing: border-box; color: #fff; font-style: normal; text-align: center; -webkit-transform:rotate(-10deg); font-weight: 400; font-size: 1rem; line-height: 0.95em; background: var(--color-ci1); -moz-border-radius: 100px; border-radius: 100px; -webkit-border-radius: 100px; } body.landingpage-messe #section-inhalt-weiss .produktbox-detail .teaser.rund::after { visibility: hidden; } body.landingpage-messe #section-inhalt-weiss .produktbox-detail .teaser.rund .wrapper { display: table-cell; width: 100%; height: 100%; vertical-align: middle; color: inherit; font-size: inherit; line-height: inherit; } @media only screen and (min-width: 995px) { body.landingpage-messe #section-inhalt-weiss .produktbox-detail .titel.mit_beschreibung { padding: 35px 60px 35px 45px; } body.landingpage-messe #section-inhalt-weiss .produktbox-detail .teaser_border { margin-left: 210px; } body.landingpage-messe #section-inhalt-weiss .produktbox-detail .teaser.rund { margin-left: 0px; } } @media only screen and (min-width: 1200px) { body.landingpage-messe #section-inhalt-weiss .produktbox-detail .teaser_border { margin-left: 260px; } } /* Inhaltselement: Ausklapp-Titel und -Inhalte */ .ausklapp_titel { display: block; clear: both; text-align: left; cursor: pointer; padding: 8px 0px 14px 0px !important; width: 100%; margin: 25px 0px 20px 0px; background-color: #fff; box-sizing: border-box; -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.1); box-shadow: 0px 0px 2px rgba(0,0,0,0.1); } .ausklapp_titel.active { margin-bottom: 0px; } .ausklapp_titel span { padding: 2px 20px 2px 48px; transform: translateY(-50%); font-size: 0.78em; font-weight: 500; transition: all 0.15s ease-in-out 0s; background-image: url('../images/icons_ausklapp-titel@3x.png'); background-repeat: no-repeat; background-position: 9px -65px; background-size: 30px auto; z-index: 11; } .ausklapp_titel:hover span { background-position: 11px -65px; } .ausklapp_titel.active span { background-position: 9px 4px; } .ausklapp_titel::after { display: none; visibility: hidden; } .ausklapp_inhalt { display: block; clear: both; text-align: left; margin: 0px 0px 20px 0px; width: 100%; box-sizing: border-box; } .ausklapp_titel + .ausklapp_inhalt { padding: 25px 20px 20px 48px; background-color: #fff; box-sizing: border-box; -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.1); box-shadow: 0px 0px 2px rgba(0,0,0,0.1); } .ausklapp_inhalt.show { display: block !important; clear: both; } .ausklapp_inhalt .ausklapp_titel { padding: 15px 30px; margin: 0px; font-weight: 500; font-size: 1.0em; border: 1px solid #ddd; background-color: #fff; transition: all 0.15s ease-in-out 0s; border-top: none; border-left: 4px solid #969696; } .ausklapp_inhalt .ausklapp_titel:before { display: none; visibility: hidden; } .ausklapp_inhalt .ausklapp_titel:first-child { border-top: 1px solid #ddd; } .ausklapp_inhalt .ausklapp_titel:hover { border-left: 4px solid var(--color-ci1); } .ausklapp_inhalt .ausklapp_titel.active { margin: 0px; padding: 15px 30px; border-bottom: none; border-left: 4px solid var(--color-ci1); } .ausklapp_inhalt .ausklapp_inhalt { padding-left: 55px; padding-top: 10px; border: 1px solid #ddd; margin: 0px; box-sizing: border-box; border-top: none; background-color: #fff; } /* ... auf Produktdetailseite noch etwas anders stylen: */ #section-intro .ausklapp_titel { margin: 25px 0px 50px 0px; background-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #section-intro .ausklapp_titel.active { margin-bottom: 0px; } #section-intro .ausklapp_titel:before { content: ''; position: absolute; left: 0px; right: 0px; height: 1px; margin-top: 0px; background-color: #ddd; z-index: 10; } #section-intro .ausklapp_titel span { position: absolute; padding: 2px 20px 2px 44px; font-size: 0.98em; background-color: #fff; background-position: 3px -60px; } #section-intro .ausklapp_titel:hover span { background-position: 6px -60px; } #section-intro .ausklapp_titel.active span { margin-bottom: 20px; background-position: 3px 8px; } #section-intro .ausklapp_inhalt { background-color: transparent; padding-top: 35px; margin: 0px 0px 50px 0px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #section-intro .ausklapp_inhalt .ausklapp_titel { padding: 15px 30px !important; margin: 0px; } #section-intro .ausklapp_inhalt .ausklapp_inhalt { padding-top: 10px; margin: 0px; } #section-inhalt .listen_wrapper .ausklapp_titel { padding: 15px 30px !important; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #section-inhalt .listen_wrapper .ausklapp_titel + .ausklapp_inhalt { padding-top: 5px; padding-bottom: 30px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } @media only screen and (max-width: 994px) { .ausklapp_titel { width: 100%; margin-left: 0; padding: 7px 6px 10px 0px !important; } .ausklapp_titel:before { width: 96%; margin-left: 3%; padding: 0px; } .ausklapp_titel span { background-position: 5px -67px; padding: 2px 15px 2px 44px; font-size: 0.80em; } .ausklapp_titel:hover span { background-position: 7px -67px; } .ausklapp_titel.active span { background-position: 5px 1px; } .ausklapp_inhalt { padding-left: 10px; padding-right: 10px; } .ausklapp_inhalt .ausklapp_inhalt { padding-left: 15px; padding-right: 15px; } #section-intro .ausklapp_titel span { background-position: 3px -69px; font-size: 0.8em; } #section-intro .ausklapp_titel:hover span { background-position: 5px -69px; } #section-intro .ausklapp_titel.active span { margin-bottom: 20px; background-position: 3px 0px; } #section-inhalt .listen_wrapper .ausklapp_titel { padding: 15px 15px !important; } } /* Inhaltselement: Referenzen-Slider */ .teaser_referenzen { display: block; clear: both; width: 100%; height: auto; margin: 40px auto 40px auto; } .teaser_referenzen .content-col3-1 { padding: 0px; background-color: #fff; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); box-shadow: 0px 0px 4px rgba(0,0,0,0.2); } .teaser_referenzen .pic_wrapper { display: block; width: 100%; height: auto; margin: 0px auto; } .teaser_referenzen .pic { display: block; height: 72vw; width: 100%; margin: 0px auto; transition: all 0.15s ease 0.1s; background-color: #eee; background-position: center center; background-size: cover; background-repeat: no-repeat; /* -moz-border-radius: 999px; border-radius: 999px; -webkit-border-radius: 999px; */ } .teaser_referenzen .desc { display: block; clear: both; width: 100%; min-height: 60px; height: auto; margin: 0px auto 10px auto; box-sizing: border-box; padding: 12px 10px 15px 10px; text-align: center; } .teaser_referenzen .desc .zitat { font-size: 0.85rem; line-height: 1.25em; margin-bottom: 10px; } .teaser_referenzen .desc h3 { margin: 5px 0px 8px 0px; font-size: 1.25rem; font-weight: 500; text-align: center; color: var(--color-ci2); text-transform: none; } .teaser_referenzen .desc h4 { margin: 5px 0px 5px 0px; font-size: 1.05rem; line-height: 1.3em; text-align: center; } .teaser_referenzen .desc h4 a { font-weight: inherit; } @media only screen and (min-width: 995px) { .teaser_referenzen { margin: 40px auto 30px auto; } .teaser_referenzen .pic_wrapper { height: 320px; } .teaser_referenzen .pic { height: 320px; } .teaser_referenzen .desc { vertical-align: top; min-height: 140px; padding: 25px 30px 25px 30px; text-align: left; } .teaser_referenzen .desc.mit_zitat { padding: 20px 25px 10px 35px; } .teaser_referenzen .desc .zitat { font-size: 0.9rem; line-height: 1.45em; margin-bottom: 20px; margin-top: 10px; } .teaser_referenzen .desc h3 { text-align: left; } .teaser_referenzen .desc h4 { text-align: left; } } @media only screen and (min-width: 1200px) { .teaser_referenzen .pic_wrapper { height: 340px; } .teaser_referenzen .pic { height: 340px; } } /* Inhaltselement: Referenzen-Slider */ .slider_referenzen { display: block; clear: both; width: 100%; height: auto; margin: 40px auto 40px auto; } .slider_referenzen .slick-slide { display: table-cell; vertical-align: middle; width: 100%; height: auto; text-align: center; padding: 10px; } .slider_referenzen .slick-slide .slide_inner { margin: 5px; background-color: #fff; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); box-shadow: 0px 0px 4px rgba(0,0,0,0.2); } .slider_referenzen .pic_wrapper { display: block; width: 100%; height: auto; margin: 0px auto; } .slider_referenzen .pic { display: block; height: 72vw; width: 100%; margin: 0px auto; transition: all 0.15s ease 0.1s; background-color: #eee; background-position: center center; background-size: cover; background-repeat: no-repeat; /* -moz-border-radius: 999px; border-radius: 999px; -webkit-border-radius: 999px; */ } .slider_referenzen .desc { display: block; clear: both; width: 100%; min-height: 120px; height: auto; margin: 0px auto 10px auto; box-sizing: border-box; padding: 12px 10px 15px 10px; text-align: center; } .slider_referenzen .desc .zitat { font-size: 0.85rem; line-height: 1.25em; margin-bottom: 10px; } .slider_referenzen .desc h3 { margin: 15px 0px 10px 0px; font-size: 1.25rem; font-weight: 500; text-align: center; color: var(--color-ci2); text-transform: none; } .slider_referenzen .desc h4 { margin: 5px 0px 5px 0px; font-size: 1.05rem; line-height: 1.3em; text-align: center; } .slider_referenzen .desc h4 a { font-weight: inherit; } .slider_referenzen ul.slick-dots { margin-top: 10px !important; bottom: -35px; } .slider_referenzen ul.slick-dots li { margin: 0 2px !important; padding: 0px !important; } .slider_referenzen ul.slick-dots li:before { display: none; } .slider_referenzen ul.slick-dots li button::before { width: 28px; height: 28px; font-size: 12px; color: #666; } @media only screen and (min-width: 995px) { .slider_referenzen ul.slick-dots { margin-top: 40px !important; bottom: -55px; } .slider_referenzen { width: 100%; } .slider_referenzen { margin: 40px auto 30px auto; } .slider_referenzen .element { padding-top: 0px !important; padding-bottom: 0px !important; } .slider_referenzen .pic_wrapper { display: inline-block; float: left; width: 40%; height: 340px; margin: 0px; } .slider_referenzen .pic { float: left; width: 100%; height: 340px; margin: 0px; } .slider_referenzen .desc { display: inline-block; vertical-align: top; width: 60%; min-height: 150px; padding: 40px 30px 10px 60px; text-align: left; } .slider_referenzen .desc.mit_zitat { padding: 20px 25px 10px 35px; } .slider_referenzen .desc .zitat { font-size: 0.9rem; line-height: 1.45em; margin-bottom: 20px; margin-top: 10px; } .slider_referenzen .desc h3 { text-align: left; } .slider_referenzen .desc h4 { text-align: left; } } @media only screen and (min-width: 1400px) { .slider_referenzen { width: 85%; } .slider_referenzen .pic_wrapper { width: 40%; height: 360px; } .slider_referenzen .pic { height: 360px; } .slider_referenzen .desc { width: 60%; } } #section-sonderausstattung { background-color: #f8f8f8; } .produktbox-detail { width: 100%; height: auto; min-height: 40vw; margin: 20px 0px; padding: 0px 0px 0px 0px; vertical-align: top; background-color: #fff; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.1); box-shadow: 0px 0px 4px rgba(0,0,0,0.1); } .produktbox-detail .titel { width: 100%; height: auto; margin: 0px; padding: 20px; background-color: #fff; } .produktbox-detail .titel h2, .produktbox-detail .titel h3 { color: #000; margin-bottom: 0px; padding-bottom: 0px; } .produktbox-detail .titel h2:after { display: none; } .produktbox-detail .titel.mit_beschreibung h2, .produktbox-detail .titel.mit_beschreibung h3 { margin-bottom: 30px; } .produktbox-detail .pics { display: block; clear: both; width: 100%; height: 60vw; margin: 0px; } .produktbox-detail.mit2bildern .pics { width: 100%; height: 46vw; font-size: 0px; } .produktbox-detail .pics .pic { display: inline-block; width: 100%; height: 100%; margin: 0px; background-color: #eee; background-size: cover; background-position: center center; background-repeat: no-repeat; } .produktbox-detail.mit2bildern .pics .pic { width: 50%; } .produktbox-detail .desc { display: block; clear: both; width: 100%; height: auto; margin: 0px; font-size: 0.95rem; line-height: 1.32em; padding: 22px 20px 15px 30px; } .produktbox-detail .bn.pfeil { display: inline-block; clear: both; margin-top: 25px; font-size: 1.2em; color: var(--color-ci1); font-weight: 600 !important; padding: 2px; padding-left: 36px; background-color: transparent; border: none; background-image: url("../images/pfeil@3x.png"); background-repeat: no-repeat; background-size: 24px auto; background-position: 0px 3px; } .produktbox-detail .bn.pfeil:hover { color: var(--color-ci1-hover); background-position: 3px 3px; } .produktbox-detail .desc ul li h3 { font-size: 1.3em; margin: 0px 0px; color: var(--color-ci1); } @media only screen and (min-width: 995px) { .produktbox-detail { min-height: 230px; } .produktbox-detail .titel { position: relative; display: inline-block; float: left; clear: none; width: 70%; padding: 80px 30px 30px 30px; } .produktbox-detail .titel.mit_beschreibung { padding: 30px; } .produktbox-detail.mit2bildern .titel { width: 50%; } .produktbox-detail .pics { display: inline-block; float: right; clear: none;width: 30%; height: 230px; } .produktbox-detail.mit2bildern .pics { width: 49%; height: 230px; } .produktbox-detail .desc { padding: 30px 30px 30px 40px; } .produktbox-detail .desc .text2spaltig { column-count: 2; } #section-inhalt .produktbox-detail .desc .text2spaltig ul, #section-intro .produktbox-detail .desc .text2spaltig ul, #section-sonderausstattung .produktbox-detail .desc .text2spaltig ul { margin-top: 0px; } #section-inhalt .produktbox-detail .desc .text2spaltig ul li:first-child, #section-intro .produktbox-detail .desc .text2spaltig ul li:first-child, #section-sonderausstattung .produktbox-detail .desc .text2spaltig ul li:first-child{ margin-top: -1px; } .produktbox-detail .desc .text2spaltig ul li { margin: 5px 0px; } .produktbox-detail .desc .text2spaltig + .bn.pfeil { margin-top: 35px; } } @media only screen and (min-width: 1200px) { .produktbox-detail .pics { height: 290px; } .produktbox-detail.mit2bildern .pics { height: 290px; } } #section-daten { background-color: #fff; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#0d000000',GradientType=0 ); } #section-daten .container_breiter { padding: 0px 10px; } /* Inhalts-Element: Tab/Reiter-Inhalte */ .tab_wrapper { display: block; clear: both; width: 100%; height: auto; margin: 25px 0px 35px 0px; } .tab_wrapper ul.tab_titel { display: block; clear: both; width: 100%; margin: 0px; padding: 0px; } .tab_wrapper ul.tab_titel li { display: inline-block; width: auto; height: 56px; cursor: pointer; box-sizing: border-box; transition: all 0.15s ease-in-out 0s; font-size: 1.05em; line-height: 0.9em; font-weight: 500; padding: 15px 20px; background-color: #f3f3f3; border-top: 4px solid #f3f3f3; } .tab_wrapper ul.tab_titel li:hover { background-color: #ddd; border-color: #ddd; } .tab_wrapper ul.tab_titel li.active { background-color: #fff; border-top: 4px solid var(--color-ci1); -moz-box-shadow: 0px -2px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 0px -2px 2px rgba(0,0,0,0.1); box-shadow: 0px -2px 2px rgba(0,0,0,0.1);} .tab_wrapper ul.tab_titel li i { margin-right: 4px; } .tab_wrapper .tab_inhalte { display: block; clear: both; width: 100%; margin: 0px; padding: 30px 20px 20px 20px; min-height: 280px; background-color: #fff; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.1); box-shadow: 0px 0px 4px rgba(0,0,0,0.1); } .tab_wrapper .tab_inhalte table { width: 100% !important; height: auto; margin: 10px 0px 10px 0px; border: none; border-collapse: collapse; } .tab_wrapper .tab_inhalte table tr td { width: auto !important; padding: 8px 10px 8px 10px; background-color: #fff; border: none; } .tab_wrapper .tab_inhalte table tr:nth-child(2n) td { background-color: #fafafa; } .tab_wrapper .tab_inhalte table.ohne_zebra tr td { background-color: transparent !important; } .tab_wrapper .tab_inhalte table tr td h4 { color: var(--color-ci1); font-weight: 500; line-height: 1.0em; } @media only screen and (max-width: 994px) { .tab_mobile_scrolling { padding: 15px; margin-bottom: 30px; box-sizing: border-box; background-color: #f9f9f9; -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; overflow-x: auto; -webkit-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.4); -moz-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.4); box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.4);} .tab_wrapper { width: 920px; margin-top: 10px; margin-bottom: 5px; } .tab_wrapper ul.tab_titel { width: 100%; } .tab_wrapper ul.tab_titel li { white-space: nowrap; font-size: 0.75em; height: 40px; padding: 12px 8px; } .tab_wrapper .tab_inhalte { width: 100%; padding: 10px 1px 10px 15px; } .tab_wrapper .tab_inhalte .tab_inhalt { width: 100%; } .tab_wrapper table { } .tab_wrapper .tab_inhalte table tr td { padding: 5px 5px; font-size: 0.90em; } .tab_wrapper .tab_inhalte table tr td h4 { font-size: 0.90em; } } @media only screen and (min-width: 995px) { #section-daten .container_breiter { padding: 0px 10px; } .tab_wrapper { margin: 30px 0px 55px 0px; } .tab_wrapper ul.tab_titel li { height: 43px; padding: 12px 8px; font-size: 0.8em; } } @media only screen and (min-width: 1300px) { #section-daten .container_breiter { padding: 0px 25px; } .tab_wrapper ul.tab_titel li { height: 48px; padding: 14px 20px; font-size: 0.95em; } } @media only screen and (min-width: 1500px) { #section-daten .container_breiter { max-width: 1500px; margin: 0px auto; padding: 0px 50px; } .tab_wrapper ul.tab_titel li { height: 50px; padding: 17px 26px; font-size: 1.0em; } } /* Detailseite */ .detailpage-header { display: block; clear: both; width: 100%; height: auto; margin: 10px 0px 60px 0px; } .detailpage-footer { display: block; clear: both; width: 100%; height: auto; margin: 10px 0px 20px 0px; } .detailpage-header h1 { margin: 0px 0px 20px 0px; } .detailpage-header h2 { margin: 0px 0px 15px 0px; } .detailpage-header hr, .detailpage-header hr { display: block; clear: both; width: 100%; margin: 15px 0px 45px 0px; border-bottom: 1px solid #ddd; } .detailpage-header .datum { margin: 15px 0px 5px 2px; color: #888; font-weight: 400; font-size: 0.95em; } .detailpage-bild-responsiv { width: auto; height: auto; max-width: 100%; margin: 15px 0px; } @media only screen and (min-width: 995px) { .detailpage-header .align_left { width: 70%; } .detailpage-header .align_left h1, .detailpage-header .align_left h2 { margin: 0px 0px 5px 0px; } .detailpage-header .align_right { width: 30%; text-align: right; } .detailpage-bild-responsiv { float: right; width: auto; height: auto; max-width: 400px; margin: 0px 0px 40px 40px; } } /* Inhaltselement - Ansprechpartner */ .row.ansprechpartner { margin-bottom: 30px; } .row.ansprechpartner .content-col3-1 .pic img { width: auto; height: auto; max-width: 100%; width: 150px; } @media only screen and (min-width: 995px) { .row.ansprechpartner { margin-bottom: 30px; } .row.ansprechpartner .content-col3-1 { width: 25%; } .row.ansprechpartner .content-col3-2 { width: 70%; } .row.ansprechpartner .content-col3-1 .pic img { width: auto; height: auto; max-width: 100%; width: 150px; } } @media only screen and (min-width: 1200px) { .row.ansprechpartner .content-col3-1 { width: 20%; } .row.ansprechpartner .content-col3-2 { width: 75%; } } /* Europa-Karte */ #map_europe { height: 80vw; } @media only screen and (min-width: 995px) { #map_europe { height: 700px; } } @media only screen and (min-width: 1500px) { #map_europe { height: 800px; } } /* ------------- FOLGESEITEN: Inhaltselement ---- Video-Embed (YouTube) ------------- */ .o_video-embed { display: block; clear: both; width: 100%; height: auto; margin: 1em 0; } .o_video-embed iframe { width: 100%; height: auto; height: 52vw; -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4); box-shadow: 0px 0px 10px rgba(0,0,0,0.4); } .container-if-needed { display: block; clear: both; margin: 25px auto; } .container-if-needed.max_width, .container-if-needed.max_width { max-width: 92vw; } .container-if-needed.max_width .o_video-embed iframe { height: 51.8vw; } @media only screen and (min-width: 740px) { .o_video-embed iframe { height: 416px; } .container-if-needed.max_width { max-width: 730px; } .container-if-needed.max_width .o_video-embed iframe { height: 412px; } } @media only screen and (min-width: 995px) { .o_video-embed iframe { height: 428px; } .container-if-needed.max_width { max-width: 760px; } .container-if-needed.max_width .o_video-embed iframe { height: 428px; } } @media only screen and (min-width: 1200px) { .o_video-embed iframe { height: 495px; } .container-if-needed.max_width { max-width: 880px; margin: 35px auto; } .container-if-needed.max_width .o_video-embed iframe { height: 495px; } } /* ---- ENDE Section-Formatierungen ---- */ #foot { position: relative; width: 100%; min-height: 100px; height: auto; padding: 50px 0px 0px 0px; box-sizing: border-box; font-size: 0.95rem; line-height: 1.5rem; background-color: #fff; color: #000; text-align: center; z-index: 500; } #foot .container { padding: 0px; } #foot li a { color: rgba(75,75,75,1); font-size: 0.95rem; } #foot li a:hover { color: rgba(15,15,15,1); } #foot li.active a { color: var(--color-ci1); } #foot ul { margin: 15px auto 5px auto; padding: 0px; vertical-align: top; } #foot ul li { display: block; clear: both; text-align: center; list-style-type: none; } #foot ul li a { list-style-type: none; float: none; display: inline-block; margin: 5px auto; font-weight: 400; } #foot .zertifikate { margin-top: 30px; font-size: 11px; color: #777; text-align: center; } #foot .zertifikate img { display: block; width: auto; height: auto; max-width: 200px; margin: 20px auto 5px auto; } #foot .zertifikate h4 { font-size: 12px; color: #777; font-weight: 300; margin-bottom: 0px; text-align: center; } #foot .zertifikate ul { display: block; clear: none; margin: 0px 0px 15px 0px; } #foot .zertifikate ul li { display: block; clear: none; } #foot .content-col3-1 h3 { text-align: center; font-size: 1.0rem; margin: 30px 0 15px 0; font-weight: 300; color: #aaa; } #foot .social-media-links { display: block; width: auto; margin-left: 0; margin-top: 4px; text-align: center; } #foot .social-media-links ul { margin: 0; padding: 0; list-style-type: none; width: auto; } #foot .social-media-links ul li { display: inline-block; margin: 0 10px 0 0; padding: 0; } #foot .social-media-links ul li a { margin: 0; padding: 0 2px; color: #000; opacity: 0.5; transition: all 0.3s ease-in-out 0s; } #foot .social-media-links ul li a:hover { opacity: 0.8; } #foot .social-media-links ul li a img { width: auto; height: 26px; } @media only screen and (min-width: 998px) { #foot .content-col3-1 h3 { text-align: left; margin: 10px 0 5px 0; } #foot .social-media-links { margin-top: 10px; margin-left: 0; margin-right: 0; text-align: left; } #foot .social-media-links ul li { margin: 0 10px 0 0; } #foot .social-media-links ul li a img { width: auto; height: 26px; } } #foot .copyright { width: 90%; margin-left: 5%; border-top: 1px solid #e0e0e0; padding: 25px 0px 35px 0px; color: #c0c0c0; font-weight: 400; text-align: center; font-size: 0.8rem; } @media only screen and (max-width: 994px) { #foot .content-col3-1:last-child ul { margin-top: 0px; } } @media only screen and (min-width: 995px) { #foot { padding: 20px 0px 0px 0px; } #foot .content-col3-1:first-child { padding-top: 50px; } #foot ul { margin: 25px auto; } #foot ul li { display: block; margin: 5px 0px; text-align: left; } #foot .zertifikate { margin-top: 2px; font-size: 10px; } #foot .zertifikate img { display: inline-block; float: left; max-width: 100px; margin: 0px; margin-right: 8px; margin-bottom: 10px; } #foot .zertifikate h4 { text-align: left; } #foot .zertifikate ul { display: inline-block; width: 170px; margin-top: -5px; float: left; } #foot .zertifikate ul li { display: inline-block; float: left; text-align: left; margin: 2px 0px; } #foot .zertifikate ul li:first-child { width: 100%; } #foot .zertifikate ul li::after { content: ', '; display: inline-block; margin-right: 4px; } #foot .zertifikate ul li:last-child::after { display: none; } #foot .zertifikate ul li:first-child::after { display: none;} #foot .copyright { width: 100%; margin-left: 0px; font-size: 0.85rem; } } @media only screen and (min-width: 1200px) { #foot .zertifikate { font-size: 11px; } #foot .zertifikate img { max-width: 120px; margin-right: 12px; } #foot .zertifikate ul { width: 210px; margin-top: 1px; } } #back-top { visibility: hidden; position: fixed; right: 0px; bottom: 100px; margin-top: -68px; width: 38px; height: 38px; margin-right: -5px; z-index: 710; transition: all 0.25s ease-in-out 0s; } #back-top:hover { margin-right: 0px; } #back-top a { color: #fff; width: 38px; height: 38px; background-color: rgba(255,255,255,0.8); padding: 2px 8px; text-align: center; box-sizing: border-box; display: block; transition: all 0.35s ease-in-out 0s; z-index: 450; } #back-top a:hover { } #back-top a i.fa { font-size: 32px; color: rgba(0,0,0,0.8); height: auto; transition: all 0.35s ease-in-out 0s; } #back-top a:hover i.fa { color: #444; } @media only screen and (min-width: 995px) { #back-top { visibility: visible; width: 50px; height: 50px; } #back-top a { width: 50px; height: 50px; padding: 2px 12px; } #back-top a i.fa { font-size: 42px; } } /* --------------- Mobile-Darstellung bis zu 994px, aber einspaltige Inhaltsdarstellung bereits ab 780px nach unten --------------- */ @media only screen and (max-width: 994px) { .hide4mobile { display: none; } .container { width: 740px; } .content-col4-1 { display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; margin-right: 0px; padding: 0px; margin-bottom: 30px; } .content-col3-1 { display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; margin-right: 0px; padding: 0px; margin-bottom: 30px; } .content-col3-2 { display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; margin-right: 0px; padding: 0px; margin-bottom: 30px; } .content-col2-1 { display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; margin-right: 0px; padding: 0px; margin-bottom: 30px; } a.a_sprung { margin-top: -60px; } a.bn_bg_ci { width: 100%; padding: 12px 40px; box-sizing: border-box; } table.border_ci th { padding: 10px 10px; } table.border_ci td { padding: 10px 10px; } img.img_responsiv_full { float: none; display: block; clear: both; width: 100% !important; max-width: 100%; height: auto; margin: 15px 0px 25px 0px !important; } img.img_responsiv_half { width: 50% !important; max-width: 100%; height: auto; } } @media only screen and (max-width: 780px) { .container { width: 100%; box-sizing: border-box; padding-left: 10px; padding-right: 10px; } .content-col4-1 { display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; padding: 0px; margin-bottom: 30px; } .content-col3-1 { display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; padding: 0px; margin-bottom: 30px; } .content-col3-2 { display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; padding: 0px; margin-bottom: 30px; } .content-col2-1 { display: block; clear: both; width: 100%; height: auto; padding: 0px 0px; margin-bottom: 30px; } } @media only screen and (max-width: 560px) { .hide4smartmobiles { display: none; } } @media only screen and (min-width: 995px) { .hide4desktop { display: none !important; } .container { width: 980px; } #top_bar .container { padding-left: 0px; padding-right: 0px; } #nav_bar .container { padding-left: 0px; padding-right: 0px; } .content-col4-1 { position: relative; float: left; width: 24%; height: auto; padding: 20px 0px; } .content-col3-1 { position: relative; float: left; width: 32%; height: auto; padding: 20px 0px; } .content-col3-2 { position: relative; float: left; width: 66%; height: auto; padding: 20px 0px; } .content-col2-1 { position: relative; float: left; width: 49%; height: auto; padding: 20px 0px; } img.img_responsiv_full { width: auto; max-width: 40%; height: auto; } img.img_responsiv_full.left { display: inline; float: left; margin: 0px 40px 35px 0px; } img.img_responsiv_full.right { display: inline; float: right; margin: 0px 0px 35px 40px; } } @media only screen and (min-width: 1200px) { .container { /*margin: 0px 10px;*/ width: 1170px; } }