/* CI-Farben */ :root { --color-std-font: rgba(0,0,0,0.8); --color-ci1: rgba(9,84,161,1); /*Verwendung: var(--color-ci1) */ --color-ci2: rgba(72,155,234,1); --color-ci3: #eb990f; --color-ci1-hover: rgba(9,84,161,0.8); --color-ci2-hover: rgba(72,155,234,0.8); --color-ci3-hover: #fe9b00; } html, body, div, p, h1, h2, h3, span, a, table, td, form, input, textarea, select { margin: 0px; padding: 0px; font-family: 'Barlow', 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: 500; margin: 10px 0px 25px 0px; text-transform: normal;} body.folgeseite h1 { font-size: 32px; line-height: 1.0em; color: var(--color-ci1); font-weight: 500; text-transform: normal;} h2 { font-size: 33px; line-height: 1.05em; color: var(--color-ci1); font-weight: 600; margin: 12px 0px 20px 0px; text-transform: normal; line-height: 1.0em; padding-bottom: 10px; background-image: linear-gradient(to right, rgba(72,155,234,1), rgba(9,84,161,1)); color: transparent; -webkit-background-clip: text; background-clip: text;} h2.sub { font-size: 24px; line-height: 1.05em; color: var(--color-ci1); font-weight: 400; margin: -18px 0px 15px 0px; text-transform: normal;} h3 { font-size: 24px; line-height: 1.1em; color: var(--color-ci2); font-weight: 400; margin: 20px 0px 20px 0px; text-transform: normal;} h4 { font-size: 20px; line-height: 1.15em; color: var(--color-ci1); font-weight: 500; margin: 18px 0px 10px 0px; text-transform: normal; } @media only screen and (min-width: 995px) { h1 { font-size: 50px; font-weight: 300; color: #fff; margin: 15px 0px 35px 0px; } body.folgeseite h1 { font-size: 46px; } h2 { font-size: 48px; margin: 20px 0px 15px 0px; } body.folgeseite h2 { font-size: 44px; } h2.sub { font-size: 36px; font-weight: 600; margin: -30px 0px 30px 0px; } h3 { font-size: 31px; font-weight: 400; margin: 25px 0px 20px 0px; } h4 { font-size: 25px; font-weight: 500; margin: 15px 0px 15px 0px; } } hr { background-color: none; border: 0; height: 1px; border-bottom: 1px solid rgba(0,0,0,0.1); } .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; } 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; } strong { font-weight: 600; } .align_left { display: inline; float: left; } .align_right { display: inline; float: right; } .text-gradient { background-image: linear-gradient(to right, rgba(72,155,234,1), rgba(9,84,161,1)); color: transparent; -webkit-background-clip: text; background-clip: text; } .border-gradient { border: 1px solid; border-image-source: linear-gradient(45deg, rgba(72,155,234,1), rgba(9,84,161,1)); border-image-slice: 1;} /* Icons */ i, span.icon::before { color: inherit; transition: all 0.20s ease-in-out 0.05s; } span.magfood { font-family: "magfood"; } /* ---- Links ---- */ a, a:link, a:active, a:visited { text-decoration: none; color: var(--color-ci2); font-size: inherit; font-weight: 400; transition: all 0.40s; } a:hover { text-decoration: none; color: var(--color-ci2-hover); font-size: inherit; } a.bn { padding: 10px 18px; background-color: #bbb; color: #fff; cursor: pointer; } a.bn:hover { background-color: #888; } a.bn_small { padding: 7px 12px; font-size: 14px; } a.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 { background-color: var(--color-ci1-hover); text-decoration: none; } a.bn_bg_ci i.fa { color: #fff; margin-right: 8px;} a.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 { 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); } /* ---- 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); } /* --------------- 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;*/ } /* 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: #fff; z-index: 800; } #top_bar { display: block; clear: both; height: 48px; padding: 18px 0px 4px 0px; width: 100%; background-color: transparent; text-align: right; } #top_bar a { color: #000; font-size: 17px; font-weight: 200; margin-left: 18px; } #top_bar a:hover { color: var(--color-ci2-hover); } #top_bar a span { color: inherit; } #top_bar a i.fa { color: var(--color-ci2); font-size: 19px; margin-right: 4px; margin-top: -3px; vertical-align: middle; background-image: linear-gradient(to right, rgba(72,155,234,1), rgba(9,84,161,1)); color: transparent; -webkit-background-clip: text; background-clip: text;} #top_bar a span.icon { color: var(--color-ci2); font-size: 19px; margin-right: 4px; background-image: linear-gradient(to right, rgba(72,155,234,1), rgba(9,84,161,1)); color: transparent; -webkit-background-clip: text; background-clip: text; } #top_bar .align_left { } #top_bar .align_left a { margin-left: 0px; } #top_bar .align_left .head-logo { height: 40px; width: auto; } #top_bar .language_switcher { display: none !important; /* EN-Version erstmal ausblenden */ display: inline-block; width: 70px; height: auto; cursor: pointer; } #top_bar .language_switcher a { display: inline-block; vertical-align: middle; cursor: pointer; color: rgba(255,255,255,0.8); padding: 0px 0px 2px 0px; } #top_bar .language_switcher a:hover { color: #fff; } #top_bar .language_switcher a.active { color: #fff; } #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%; height: auto; 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 0s; } #logo img { width: 100%; height: auto; vertical-align: middle; } #navigation { /* wird in den MediaQuerys definiert */ } #navigation ul li a { text-transform: none; } #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 #4b4b4b; 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: auto; } #toggle_mobile_navigation { position: absolute; top: 8px; right: 0px; z-index: 9999; } #toggle_mobile_navigation.active i { color: #ddd; } #navigation { position: fixed; display: none; overflow: auto; width: 100%; height: 100%; left: 0px; top: 106px; margin: 0px; right: 0; box-sizing: border-box; padding: 30px 0px 40px 0px; background-color: rgba(255,255,255,0.97); 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: 38px; padding: 12px 6px 8px 0px; background-color: transparent; } #top_bar a { font-size: 13px; margin-top: 3px; } #top_bar a i.fa { font-size: 17px; margin-top: -5px; } #top_bar a span.icon { font-size: 17px; } #top_bar .align_left .head-logo { height: 30px; width: auto; } #schnellkontakt { display: none; } #nav_bar { display: block; clear: both; height: 70px; padding: 8px 10px; z-index: 970; } #logo { width: 136px; height: 80px; padding: 0px; margin: -10px 0px 0px 0px; 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: center; color: #000; width: 100%; height: auto; padding: 15px 20px 10px 20px; box-sizing: border-box; text-transform: uppercase; font-size: 19px; line-height: 19px; font-weight: 400; } #navigation ul li a:hover { text-decoration: none; color: #333; } #navigation > ul > li.active > a { color: var(--color-ci3); } #navigation > ul > li > ul > li.active > a { color: var(--color-ci3); } #navigation > ul > li > ul { display: block; clear: both; width: 100%; height: auto; margin: 0px; padding: 0px; } /* ---- Sticky-Darstellungen ---- */ #head.sticky { position: fixed; height: 70px; padding: 0px 0px; top: 0; box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); background-color: rgba(255,255,255,0.97); opacity: 1; 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 { } #head.sticky #nav_bar #logo { width: 120px; height: auto; margin-top: 4px; } #head.sticky #nav_bar #logo img { height: auto; padding: 0; } #head.sticky #nav_bar .container { padding-top: 0px; } #head.sticky #toggle_mobile_navigation { margin-top: 0px; } #head.sticky #navigation { top: 70px; padding-top: 80px; padding: 0px; } } @media only screen and (min-width: 999px) { #head { } #toggle_mobile_navigation { display: none; } #top_bar { display: block; } #logo { width: 219px; height: 84px; margin-top: 0px; } #navigation { display: inline-block !important; float: right; width: auto; height: 85px; box-sizing: border-box; margin: 36px 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: 18px; font-weight: 400; text-transform: none; color: #000; padding: 25px 10px 5px 10px; margin: 0px 0px 0px 15px; 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-ci2); } #navigation ul li.active a { color: var(--color-ci3) !important; } #navigation ul li:last-child a { padding-right: 0px; } /* ---- Sticky-Darstellungen ---- */ #head.sticky { position: fixed; height: 70px; padding: 0px 0px; top: 0; opacity: 1; background-color: rgba(255,255,255,1); box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); 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: 120px; padding: 0px 0px; } #head.sticky #nav_bar #logo { width: 125px; height: 48px; margin-top: 12px; padding-top: 0px; padding-bottom: 0px; } #head.sticky #nav_bar #logo img { height: auto; padding: 0; } #head.sticky #navigation { height: 90px; margin-top: 0px; padding: 0px 0px; } #head.sticky #navigation ul li a { padding: 20px 10px; text-shadow: none; } #head.sticky #navigation ul li:last-child a { padding-right: 0px; } #head.sticky #toggle_mobile_navigation { margin-top: 0px; } } /* ------ Section-Formatierungen ------ */ #section-slideshow { position: relative; clear: both; width: 100%; min-height: 300px; height: 50vw; 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: 300px; height: 50vw; margin-top: 0px; background-color: transparent; } #section-slideshow .anim-slide { opacity: 0; } #section-slideshow .anim-slide-this { opacity: 1;} #section-slideshow .anim-dots { opacity: 0; bottom: 12px; } #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: 90%; height: auto; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 0px; text-align: left; } #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 { font-size: 24px; line-height: 1.0em; 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 { font-size: 32px; line-height: 1.0em; font-weight: 300; color: #003c91; text-transform: none; display: inline-block; text-shadow: 0px 0px 9px rgba(255,255,255,0.8); } #section-slideshow li.anim-slide .slogan_wrapper h1 span br { position: relative; display: inline-block; clear: both; text-align: left; } #section-slideshow li.anim-slide .slogan_wrapper h2 { font-size: 32px; line-height: 34px; margin-bottom: 20px; text-transform: uppercase; font-weight: 800; text-shadow: 0px 0px 10px rgba(0,0,0,0.4);} #section-slideshow li.anim-slide .slogan_wrapper a { 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 { visibility: hidden; top: 50%; transform: translateY(-50%); left: 0 !important; text-align: right; margin-left: -9px; padding: 0px 9px 0px 0px !important; background-color: #fff; z-index: 800; } #section-slideshow .anim-arrows-next { visibility: hidden; top: 50%; transform: translateY(-50%); right: 0 !important; text-align: left; margin-right: -9px; padding: 0px 0px 0px 9px !important; background-color: #fff; z-index: 800; } #section-slideshow .anim-arrows-prev i, #section-slideshow .anim-arrows-next i { color: #003c91; width: 20px; height: 24px; vertical-align: middle; font-size: 22px; padding: 3px 0px 0px 0px; 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.25; 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 ); } #section-slideshow::after { content: ""; position: absolute; height: 160px; width: 100%; bottom: 0px; opacity: 0.15; z-index: 710; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); } @media only screen and (min-width: 995px) { #section-slideshow li.anim-slide .slogan_wrapper { margin-left: 5%; top: 50%; } #section-slideshow li.anim-slide .slogan_wrapper h1 { font-size: 44px;} #section-slideshow li.anim-slide .slogan_wrapper h1 span { font-size: 54px; } #section-slideshow, #section-slideshow .anim-slider { min-height: 500px; height: 56vw; } #section-slideshow .anim-dots { bottom: 36px; } #section-slideshow .anim-dots span { width: 12px; height: 12px; margin: 2px 6px; } #section-slideshow .anim-arrows-prev { margin-left: -12px; padding: 2px 12px 2px 0px !important; } #section-slideshow .anim-arrows-next { margin-right: -12px; padding: 2px 0px 2px 12px !important; } #section-slideshow .anim-arrows-prev i, #section-slideshow .anim-arrows-next i { width: 30px; height: 36px; font-size: 31px; padding: 4px 0px 0px 0px; } #section-slideshow::before { height: 320px; } } @media only screen and (min-width: 1200px) { #section-slideshow li.anim-slide .slogan_wrapper { margin-left: 6%; } #section-slideshow, #section-slideshow .anim-slider { min-height: 700px; height: 48vw; } #section-slideshow li.anim-slide .slogan_wrapper h1 { font-size: 52px; } #section-slideshow li.anim-slide .slogan_wrapper h1 span { font-size: 78px; } } #section-index-intro { height: auto; min-height: 30vw; padding-top: 200px; background-color: #1a68b5; background-image: url("../images/section-bg_index-intro.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center right; } #section-index-intro h1 { margin: 0px; font-size: 2em; line-height: 1em; color: #fff; font-weight: 600; } #section-index-intro h1 span { display: block; color: inherit; margin-top: 5px; ont-weight: 300; font-size: 0.65em; line-height: 1.2em; } @media only screen and (MAX-width: 480px) { #section-index-intro h1 { font-size: 1.6em; } } @media only screen and (min-width: 995px) { #section-index-intro { min-height: 35vw; padding-top: 340px; background-position: 70% 80%; } #section-index-intro h1 { font-size: 3em; } #section-index-intro h1 span { margin-top: 12px; font-size: 0.75em; } } @media only screen and (min-width: 1200px) { } #section-uebermich { padding-bottom: 30vw; background-color: #fff; background-image: url("../images/section-bg_main.jpg"); background-repeat: no-repeat; background-size: 90% auto; background-position: 0% 97%; } #section-uebermich .container > h2 { margin-bottom: 15px; font-size: 2.4em; line-height: 1.0em; padding-bottom: 6px; background-image: linear-gradient(to right, rgba(72,155,234,1), rgba(9,84,161,1)); color: transparent; -webkit-background-clip: text; background-clip: text; } #section-uebermich .content-col3-1 { } #section-uebermich .content-col3-1 img { display: block; clear: both; max-width: 70%; height: auto; margin: 15px auto 0px auto; } #section-uebermich .content-col3-1 h3 { margin-top: 8px; font-size: 1.6em; color: #000; font-weight: 400; } #section-uebermich .content-col3-1 a.bn { display: block; text-align: center; color: #000; width: 100%; padding: 10px 30px; margin: 5px 0px; background-color: transparent; border: 1px solid black; -moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px; border-image-source: linear-gradient(45deg, rgba(72,155,234,1), rgba(9,84,161,1)); border-image-slice: 1; } #section-uebermich .content-col3-1 a.bn:hover { color: #fff; background: #569aeb; background: -moz-linear-gradient(left, #569aeb 0%, #2056a4 100%); background: -webkit-linear-gradient(left, #569aeb 0%,#2056a4 100%); background: linear-gradient(to right, #569aeb 0%,#2056a4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#569aeb', endColorstr='#2056a4',GradientType=1 ); } @media only screen and (min-width: 995px) { #section-uebermich { padding-bottom: 40px; background-size: 50% auto; background-position: 0% 90%; } #section-uebermich .container > h2 { font-size: 2.8em; margin-bottom: 5px; } #section-uebermich .content-col3-1 { padding-left: 20px; } #section-uebermich .content-col3-1 img { max-width: 100%; margin: 0px 0px 5px 0px; } } @media only screen and (min-width: 1200px) { #section-uebermich { padding-bottom: 40px; background-size: 50% auto; background-position: 0% 90%; } #section-uebermich .content-col3-1 { padding-left: 80px; } } @media only screen and (min-width: 1500px) { #section-uebermich { padding-bottom: 75px; background-size: 42% auto; background-position: 0% 90%; } } #section-angebot { background-color: #f3f3f3; } #section-angebot .container { text-align: center; } #section-angebot .container > h2 { font-weight: 300; color: #4b4b4b; } #section-angebot .container > h2 span { font-weight: 600; } .overview.angebot { } .overview.angebot .element { width: 100%; height: auto; min-height: 34vw; margin: 20px 0px; text-align: center; 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); } .overview.angebot 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.angebot .element .img { 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.angebot .element .desc { display: block; clear: both; width: 100%; height: auto; font-size: 0.95rem; line-height: 1.32em; padding: 18px 20px 20px 20px; } .overview.angebot .element .desc h2, .overview.angebot .element .desc h3 { margin: 5px 0px 10px 0px; color: #4b4b4b; font-size: 1.75em; text-align: center; line-height: 1.2em; font-weight: 400; transition: all 0.20s ease-in-out 0s; } .overview.angebot a.element:hover .desc h2, .overview.angebot a.element:hover .desc h3 { color: var(--color-ci2); } .overview.angebot .element .bn.pfeil { display: inline-block; margin: 10px auto 0px auto; padding: 4px 50px; font-size: 28px; color: #fff; font-weight: 700; line-height: 1.0em; background: #569aeb; -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; -moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; background: -moz-linear-gradient(left, #569aeb 0%, #2056a4 100%); background: -webkit-linear-gradient(left, #569aeb 0%,#2056a4 100%); background: linear-gradient(to right, #569aeb 0%,#2056a4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#569aeb', endColorstr='#2056a4',GradientType=1 ); transition: all 0.20s ease-in-out 0s; } .overview.angebot .element .bn.pfeil:hover, .overview.angebot a.element:hover .bn.pfeil { background-color: var(--color-ci1); } @media only screen and (min-width: 995px) { .overview.angebot { margin: 20px 0px 30px 0px; } .overview.angebot .element { width: 32%; margin: 1.5% 1%; min-height: 360px; } .overview.angebot .element:nth-child(3n+1) { margin-left: 0px; } .overview.angebot .element:nth-child(3n+3) { margin-right: 0px; } .overview.angebot .element .img { height: 190px; } .overview.angebot .element .desc { min-height: 135px; padding: 20px 20px 20px 20px; } } @media only screen and (min-width: 1200px) { .overview.angebot .element { min-height: 410px; } .overview.angebot .element .img { height: 240px; } .overview.angebot .element .desc { min-height: 140px; } .overview.angebot .element .desc h2, .overview.angebot .element .desc h3 { font-size: 1.85em; } } #section-calltoaction { background-color: #fff;} #section-calltoaction .content-col3-1 h2 { line-height: 1.05em; padding-bottom: 8px; margin-bottom: 0px; background-image: linear-gradient(to right, rgba(72,155,234,1), rgba(9,84,161,1)); color: transparent; -webkit-background-clip: text; background-clip: text; } #section-calltoaction .content-col3-2 h4 { color: #000; margin-top: 0px; } @media only screen and (min-width: 995px) { #section-calltoaction .content-col3-1 h2 { font-size: 2.3em; margin-top: 0px; text-align: right; } #section-calltoaction .content-col3-2 h4 { margin-top: 10px; } #section-calltoaction .content-col3-2 { padding-left: 80px; } } @media only screen and (min-width: 1200px) { #section-calltoaction .content-col3-1 h2 { font-size: 2.5em; } } /* 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: 340px; height: 65vw; padding-top: 0px; padding-bottom: 0px; box-sizing: border-box; margin-bottom: 0px; background-position: bottom center; background-size: cover; background: #569aeb; background: -moz-linear-gradient(left, #569aeb 0%, #2056a4 100%); background: -webkit-linear-gradient(left, #569aeb 0%,#2056a4 100%); background: linear-gradient(to right, #569aeb 0%,#2056a4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#569aeb', endColorstr='#2056a4',GradientType=1 ); overflow: hidden; z-index: 700; } #section-intro-folgeseiten .container { padding-top: 180px; padding-top: 42vw; } #section-intro-folgeseiten h1 { margin-left: 0px; font-size: 30px; color: #fff; font-weight: 400; text-transform: none; } @media only screen and (min-width: 995px) { #section-intro-folgeseiten { height: 450px; } #section-intro-folgeseiten .container { padding-top: 330px; } #section-intro-folgeseiten h1 { font-size: 55px; } } .section-inhalt { margin-top: 30px; min-height: 200px; padding-bottom: 40px; background-color: #fff; } .section-inhalt.ohne_bg { background-image: url(); padding-bottom: 40px; min-height: auto; } @media only screen and (min-width: 995px) { .section-inhalt { min-height: 320px; padding-bottom: 60px; } .section-inhalt.ohne_bg { background-image: url(); } } /* Grafischer Seitenabschluss mit Hintergrundgrafik */ .section-seitenabschluss { margin-bottom: 0px; padding-bottom: 0px; min-height: 20vw; background-color: #fff; background-image: url("../images/section-bg_inhalt.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 105%; } @media only screen and (min-width: 995px) { .section-seitenabschluss { min-height: 18vw; background-size: 72% auto; background-position: 50% 190%; } } /* Folgeseite Über mich - gleiche Darstellung, wie in Section auf Startseite */ body.page_4 .section-inhalt > .container > .row:first-child > .content-col3-2 > h2 { margin-top: 0px; font-size: 2.4em; margin-bottom: 25px; } body.page_4 .section-inhalt > .container > .row:first-child > .content-col3-1 > img { display: block; clear: both; max-width: 70%; height: auto; margin: 15px auto 0px auto; } body.page_4 .section-inhalt > .container > .row:first-child > .content-col3-1 > h3 { margin-top: 5px; font-size: 1.6em; color: #000; font-weight: 400; } @media only screen and (min-width: 995px) { body.page_4 .section-inhalt > .container > .row:first-child > .content-col3-2 > h2 { font-size: 2.8em; } body.page_4 .section-inhalt > .container > .row:first-child > .content-col3-1 { padding-left: 20px; } body.page_4 .section-inhalt > .container > .row:first-child > .content-col3-1 > h3 { margin-top: 0px; } body.page_4 .section-inhalt > .container > .row:first-child > .content-col3-1 > img { max-width: 95%; margin: 0px 0px 0px 0px; } } @media only screen and (min-width: 1200px) { body.page_4 .section-inhalt > .container > .row:first-child > .content-col3-1 { padding-left: 80px; } } /* Folgeseite Kontakt */ body.page_7 .section-inhalt > .container > .row:first-child > .content-col3-1:nth-child(1) { } body.page_7 .section-inhalt > .container > .row:first-child > .content-col3-1:nth-child(1) img { max-width: 280px; height: auto; } body.page_7 .section-inhalt > .container > .row:first-child > .content-col3-1:nth-child(2) { } body.page_7 .section-inhalt > .container > .row:first-child > .content-col3-1:nth-child(3) { } body.page_7 .section-inhalt > .container > .row:first-child > .content-col3-1:nth-child(3) li { list-style-type: none; padding-left: 0px; } body.page_7 .section-inhalt > .container > .row:first-child > .content-col3-1:nth-child(3) li:before { display: none; } body.page_7 .section-inhalt > .container > .row:first-child > .content-col3-1:nth-child(3) li a { display: block; text-align: center; color: #000; width: 100%; padding: 10px 30px; margin: 5px 0px; transition: all 0.30s; background-color: transparent; -moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px; border: 1px solid black; -moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px; border-image-source: linear-gradient(45deg, rgba(72,155,234,1), rgba(9,84,161,1)); border-image-slice: 1; } body.page_7 .section-inhalt > .container > .row:first-child > .content-col3-1:nth-child(3) li a:hover { color: #fff; background: #569aeb; background: -moz-linear-gradient(left, #569aeb 0%, #2056a4 100%); background: -webkit-linear-gradient(left, #569aeb 0%,#2056a4 100%); background: linear-gradient(to right, #569aeb 0%,#2056a4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#569aeb', endColorstr='#2056a4',GradientType=1 ); } body.page_7 .section-inhalt > .container > .row:first-child > .content-col3-1:nth-child(3) li a i, body.page_7 .section-inhalt > .container > .row:first-child > .content-col3-1:nth-child(3) li a .icon { font-size: 24px; margin-right: 4px; transition: all 0.30s; } body.page_7 .section-inhalt > .container > .row:first-child > .content-col3-1:nth-child(3) li a:hover i, body.page_7 .section-inhalt > .container > .row:first-child > .content-col3-1:nth-child(3) li a:hover .icon { color: #fff; } @media only screen and (min-width: 995px) { body.page_7 .section-inhalt > .container > .row:first-child > .content-col3-1:nth-child(2) h3 { margin-top: 8px; } body.page_7 .section-inhalt > .container > .row:first-child > .content-col3-1:nth-child(3) li a { margin-bottom: 15px; } } /* Inhaltselement: Section für Zertifikat */ .section-zertifikat { min-height: 40vw; padding: 0px; margin-top: 0px; margin-bottom: 50px; background-image: url("../images/section-bg_zertifikat.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left top; } .section-zertifikat .container { padding: 0px; } .section-zertifikat .content-col2-1:first-child { width: 50%; color: #fff; padding-left: 15px; } .section-zertifikat .content-col2-1:first-child h2 { color: #fff; font-size: 1.3em; font-weight: 300; margin-top: 15px; margin-bottom: 0px; } .section-zertifikat .content-col2-1:nth-child(2) { width: 56%; color: #fff; padding-left: 10px; padding-bottom: 15px; font-size: 0.9em; font-weight: 400; line-height: 1.15em; } .section-zertifikat .content-col2-1:nth-child(2)::before { content: ''; display: inline-block; float: left; margin-right: 15px; margin-bottom: 15px; width: 120px; height: 95px; margin-left: 0px; background-image: url("../images/ingbuero-big.svg"); background-repeat: no-repeat; background-size: contain; } .section-zertifikat .portrait { position: absolute; right: 0px; width: 35%; height: 40vw; margin: 0px; overflow: hidden; } .section-zertifikat .portrait img { width: 100%; height: auto; } @media only screen and (MAX-width: 994px) { .section-zertifikat .content-col2-1:first-child, .section-zertifikat .content-col2-1:nth-child(2) { display: block; width: 100%; } .section-zertifikat .content-col2-1:first-child { height: auto; } .section-zertifikat .content-col2-1:nth-child(2) { width: 60%; } /*.section-zertifikat .portrait { display: block; margin: 0px auto; width: 60%; } .section-zertifikat .portrait img { width: 100%; height: auto; }*/ } @media only screen and (min-width: 995px) { .section-zertifikat { min-height: 300px; margin-bottom: 10px; background-size: 50% auto; background-position: left top; } .section-zertifikat .content-col2-1:first-child { padding-left: 0px; } .section-zertifikat .content-col2-1:first-child h2 { font-size: 2.5em; } .section-zertifikat .content-col2-1:nth-child(2)::before { content: ''; position: absolute; display: block; float: none; width: 160px; height: 90px; margin-left: -85px; margin-top: -100px; } .section-zertifikat .content-col2-1:nth-child(2) { width: 26%; padding-left: 0px; color: #000; padding-bottom: 0px; font-size: 1.1em; line-height: 1.3em; padding-left: 20px; padding-top: 180px; } .section-zertifikat .portrait { position: absolute; width: 20%; max-width: 260px; height: 300px; margin: 0px; float: none; right: 0px; overflow: hidden; } .section-zertifikat .portrait img { position: absolute; width: 100%; height: auto; } } @media only screen and (min-width: 1500px) { .section-zertifikat { min-height: 380px; } .section-zertifikat .content-col2-1:nth-child(2)::before { width: 260px; height: 140px; margin-left: -170px; margin-top: -150px; } .section-zertifikat .content-col2-1:nth-child(2) { width: 35%; color: #000; font-size: 1.15em; line-height: 1.5em; padding-left: 70px; padding-top: 210px; } .section-zertifikat .portrait { position: absolute; width: 30%; max-width: 320px; height: 380px; margin: 0px; } } /* Tabellen in Inhaltssection */ .section-inhalt table { width: 100%; margin: 5px 0px 25px 0px; border-collapse: collapse; } .section-inhalt table tr { height: auto !important; } .section-inhalt table tr th { font-weight: 200; padding: 15px 15px 20px 0px; vertical-align: top; border-top: 1px solid #e5e5e5; color: var(--color-ci1); font-size: 1.05em;} .section-inhalt table tr td { font-weight: 300; padding: 15px 15px 20px 0px; vertical-align: top; border-top: 1px solid #e5e5e5; } .section-inhalt table tr:first-child th, .section-inhalt table tr:first-child td { border-top: none; } @media only screen and (min-width: 995px) { .section-inhalt table { margin: 5px 0px 30px 0px; } .section-inhalt table tr th, .section-inhalt table tr td { padding: 20px 25px 35px 0px; } .section-inhalt table tr th { width: 160px; font-size: 1.1em; } } @media only screen and (min-width: 1200px) { .section-inhalt table tr th { width: 220px; font-size: 1.2em; } } /* Listen auf Folgeseiten */ .section-inhalt ul { margin: 12px 0px; padding: 0px; list-style-type: none; } .section-inhalt ul li { margin: 8px 0px; padding: 2px 0px; padding-left: 24px; font-size: 1.02em; line-height: 1.25em; } .section-inhalt ul li:before { content: "\f105"; position: absolute; margin-left: -24px; margin-top: 0px; font-family: 'FontAwesome'; color: var(--color-ci1); font-size: 22px; width: 22px; height: 22px; } .section-inhalt ul.ohne li { padding-left: 0px; } .section-inhalt ul.ohne li:before { display: none; } /* Blauer Rahmen für Inhaltselemente */ .section-inhalt div.border_ci { padding: 12px 20px; background-color: transparent; border: 2px solid black; -moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px; border-image-source: linear-gradient(45deg, rgba(72,155,234,1), rgba(9,84,161,1)); border-image-slice: 1; } .section-inhalt div.border_ci div { font-size: 1.05em; } @media only screen and (MAX-width: 995px) { .section-inhalt div.border_ci > .row > div.content-col2-1 { margin-bottom: 0px; margin-bottom: 0px; padding-bottom: 0px; padding-top: 0px; } .section-inhalt div.border_ci > .row > div.content-col2-1 > ul { margin-bottom: 0px; margin-top: 0px; } .section-inhalt div.border_ci > .row > div.content-col2-1:nth-child(2) > ul { margin-top: -8px; } } @media only screen and (min-width: 1200px) { .section-inhalt div.border_ci { padding: 15px 40px; } } /* Inhaltselement: Ausklapp-Titel und -Inhalte */ .ausklapp_titel { display: inline-block; text-align: left; cursor: pointer; padding: 12px 12px 12px 30px !important; width: auto; margin: 25px 0px 0px 0px; transition: all 0.35s ease-in-out 0s; background-color: #fff; box-sizing: border-box; } h2.ausklapp_titel { font-size: 1.9em; line-height: 1.0em; font-weight: 400; background-image: linear-gradient(to right, rgba(72,155,234,1), rgba(9,84,161,1)); color: transparent; -webkit-background-clip: text; background-clip: text; } h2.ausklapp_titel a { color: var(--color-ci1) !important; } .ausklapp_titel:first-child { margin-top: 0px; } .ausklapp_titel.active { margin-bottom: 0px; } .ausklapp_titel::before { content: "\f105"; position: absolute; margin-left: -30px; margin-top: 5px; font-family: 'FontAwesome'; color: var(--color-ci2); transition: all 0.2s ease-in-out 0s; font-size: 26px; width: 26px; height: 26px; } .ausklapp_titel:hover::before { margin-left: -24px; } .ausklapp_titel.active::before { content: "\f107"; } h2.ausklapp_titel::before { margin-top: 3px; } .ausklapp_titel h3 { margin: 0px; } .ausklapp_inhalt { display: block; clear: both; text-align: left; margin: 0px 0px 30px 0px; width: 100%; box-sizing: border-box; } .ausklapp_inhalt .overview ul li { font-size: 17px; line-height: 24px; } .ausklapp_titel + .ausklapp_inhalt { padding: 15px 20px 15px 31px; background-color: #fff; } .ausklapp_inhalt.show { display: block !important; clear: both; } @media only screen and (MAX-width: 994px) { h2.ausklapp_titel { font-size: 1.1em; margin-left: 0; padding: 10px 10px 10px 15px !important; margin: 10px 0px 0px 0px; } h2.ausklapp_titel::before { margin-top: 0; font-size: 20px; width: 20px; height: 20px; margin-top: 0px; margin-left: -15px; } h2.ausklapp_titel.active::before { margin-left: -15px; } h2.ausklapp_titel:hover::before { margin-left: -10px; } h2.ausklapp_titel.active:hover::before { margin-left: -15px; } .ausklapp_inhalt { padding-left: 10px; padding-right: 10px; margin: 0px 0px 15px 0px; } .ausklapp_titel + .ausklapp_inhalt { padding-left: 15px; } } /* ---- ENDE Section-Formatierungen ---- */ #foot { position: relative; width: 100%; min-height: 100px; height: auto; padding: 20px 0px 5px 0px; box-sizing: border-box; font-size: 0.95rem; line-height: 1.5rem; color: #fff; text-align: center; z-index: 500; background: #569aeb; background: -moz-linear-gradient(left, #569aeb 0%, #2056a4 100%); background: -webkit-linear-gradient(left, #569aeb 0%,#2056a4 100%); background: linear-gradient(to right, #569aeb 0%,#2056a4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#569aeb', endColorstr='#2056a4',GradientType=1 ); } #foot .container { padding: 0px; } #foot * { color: rgba(255,255,255,0.5); } #foot li a { color: rgba(255,255,255,0.8); } #foot li a:hover { color: rgba(255,255,255,1); } #foot li.active a { color: var(--color-ci3); } #foot li a i, #foot li a span.icon { font-size: 22px; display: inline-block; color: rgba(255,255,255,0.8); width: 26px; } #foot li a i.fa-paper-plane-o { font-size: 20px; } #foot li a:hover i, #foot li a:hover span.icon { color: rgba(255,255,255,1); } #foot ul { margin: 25px auto; padding: 0px; } #foot ul li { display: block; clear: both; text-align: center; list-style-type: none; margin: 12px 0px 18px 0px; } #foot ul li a { list-style-type: none; float: none; display: inline-block; } @media only screen and (min-width: 995px) { #foot { padding: 40px 0px 25px 0px; } #foot ul li { display: block; margin: 8px 0px 12px 0px; text-align: left; } #foot .content-col3-1:nth-child(3) ul li { text-align: right; } #foot .content-col3-1:nth-child(1) ul { margin-top: 0px; } #foot .content-col3-1:nth-child(3) { text-align: right; } } #back-top { 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(0,0,0,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(255,255,255,0.8); height: auto; transition: all 0.35s ease-in-out 0s; } #back-top a:hover i.fa { color: #fff; } @media only screen and (min-width: 995px) { #back-top { 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) { .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; } }