-Container (Reihenfolge von oben nach unten)
---------------------------------------------------------------------------------- */
/* Relative Bloecke innerhalb von "page" */
#page, #logo_bg, #logo, #header_bg, #header, #content, #footer_bg, #footer
{ display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 1; }
#header_bg { background-color: #173557; }
#header { width: 100%; margin: 0; padding: 0; }
#header .header_image_box { max-width: 1600px; margin: 0 auto; }
#header .header_image_box_full_width { width: 100%; margin: 0; }
#header img { width: 100%; max-width: none; height: auto; background-color: #fff; }
#subpage_header { min-height: 50vh; padding: 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
#subpage_header_image { display: none; }
#subpage_header_full { min-height: 100vh; padding: 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
#subpage_header_full_image { display: none; }
a#page_scroll_to_down { display: block; position: absolute; top: auto; bottom: 0; left: auto; right: 29.82%; width: 6vw; height: 6vw; margin: 0 -6vw 0 0; padding: 0; text-indent: -9999em; overflow: hidden; text-decoration: none; background-position: center; background-image: url(icon_scroll_down.png); background-repeat: no-repeat; background-color: #fff; z-index: 1001; }
a#page_scroll_to_down:hover { background-color: #f0f0f0; }
#content { overflow: hidden; }
#footer_bg { position: relative; top: 0; left: 0; width: 100%; height: auto; background-color: #173557; z-index: 10; overflow: hidden; }
#footer { width: 100%; max-width: 1200px; padding: 40px 10px 20px 10px; margin: 0 auto; color: #fff; font-size: 16px; line-height: 24px; text-align: center; }
#footer a { color: #fff; text-decoration: none; }
#footer a:hover { color: #82c17a; text-decoration: none; }
#footer_links { margin: 0 0 20px 0; }
#footer_links span { display: inline-block; margin: 0 10px; }
#footer_slogan { margin: 0 0 40px 0; font-size: 3.0em; line-height: 1.25; color: #82c17a; }
#footer_contact_headline { margin: 0 0 20px 0; font-size: 1.5em; line-height: 1.25; }
#footer_contact_links { margin: 0 0 40px 0; }
#footer_contact_links a { display: inline-block; margin: 0 10px 20px 10px; padding: 0 0 0 40px; line-height: 30px; background-position: center left; background-repeat: no-repeat; }
a#footer_contact_phone { background-image: url(icon_footer_phone.png); }
a#footer_contact_email { background-image: url(icon_footer_email.png); }
a#footer_contact_linkedin { padding: 0; }
/* --- Cookie-Hinweis ohne OK-Button - Datenschutzinfo --- */
#datenschutzinfo { clear: both; display: block; width: 100%; height: auto; margin: 0; padding: 15px 10px; background-color: #333; font-size: 14px; line-height: 20px; color: #fff; text-align: center; }
#datenschutzinfo a { color: #fff; text-decoration: underline; }
#datenschutzinfo a:hover { color: #fff; text-decoration: none; }
#andresmedia { clear: both; display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 10px; z-index: 1; background-color: #444; font-size: 14px; line-height: 20px; color: #fff; text-align: center; }
#andresmedia a { color: #fff; text-decoration: none; }
#andresmedia a:hover { color: #fff; text-decoration: underline; }
#page_scroll_to_top { display: none; position: fixed; top: auto; bottom: 10px; left: auto; right: 10px; width: 60px; height: 60px; margin: 0; padding: 0; text-indent: -9999em; overflow: hidden; border: none; text-decoration: none; background-position: center; background-repeat: no-repeat; background-color: rgba(255,255,255,0.75); background-image: url(icon_scroll_to_top.png); z-index: 900; }
#page_scroll_to_top:hover { background-color: rgba(255,255,255,1); }
body.sticky #page_scroll_to_top { display: block; }
@media all and (max-width:768px) {
#datenschutzinfo { padding: 10px 50px; }
#page_scroll_to_top { width: 40px; height: 40px; }
}
/* --- Header Image Slider --- */
#bg_image_fade_bg { position: relative; top: 0; left: 0; width: 100%; height: 100vh; margin: 0; padding: 0; z-index: 1; overflow: hidden; background-color: #000; }
#bg_image_fade_bg.height_50vh { height: 50vh; }
@keyframes arrow_jump {
25% { transform: translate(0, 0) scale(1, 1); }
50% { transform: translate(0, -20px) scale(1.2, 1.2); }
}
.bg_image_fade {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: #fff; background-position: center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; opacity: 0;
/* transform: scale(1.4) rotate(6deg); */
transform: scale(1.2);
animation: CrossFade 18s infinite;
}
#bg_image_fade_bg.anzahl_4 .bg_image_fade { animation: CrossFade4 24s infinite; }
#bg_image_fade_bg.anzahl_6 .bg_image_fade { animation: CrossFade6 36s infinite; }
#bg_image_fade_bg.anzahl_8 .bg_image_fade { animation: CrossFade8 48s infinite; }
#bg_image_fade_bg .bg_image_fade:nth-child(1) { opacity: 1; }
#bg_image_fade_bg .bg_image_fade:nth-child(2) { animation-delay: 6s; }
#bg_image_fade_bg .bg_image_fade:nth-child(3) { animation-delay: 12s; }
#bg_image_fade_bg .bg_image_fade:nth-child(4) { animation-delay: 18s; }
#bg_image_fade_bg .bg_image_fade:nth-child(5) { animation-delay: 24s; }
#bg_image_fade_bg .bg_image_fade:nth-child(6) { animation-delay: 30s; }
#bg_image_fade_bg .bg_image_fade:nth-child(7) { animation-delay: 36s; }
#bg_image_fade_bg .bg_image_fade:nth-child(8) { animation-delay: 42s; }
@keyframes CrossFade4 {
25% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0;
}
}
@keyframes CrossFade6 {
16.66% {
opacity: 1;
transform: scale(1);
}
33.33% {
opacity: 0;
}
}
@keyframes CrossFade8 {
12.5% {
opacity: 1;
transform: scale(1);
}
25% {
opacity: 0;
}
}
.bg_image_overlay { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 1; background-color: rgba(0, 0, 0, 0.5);
}
.bg_image_fade_text_flex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
width: 100%; height: 100%;
}
.bg_image_fade_text_subline span { display: block; width: 100%; max-width: 720px; height: auto; margin: 0; padding: 20px 5px; }
.bg_image_fade_text_subline span { display: inline-block; position: relative; top: 0; left: 0;
width: auto; height: auto; margin: 0 auto; padding: 20px 50px; color: #fff; font-size: 16px; line-height: 25px; text-align: center;
}
.bg_image_fade_text_subline span::before,
.bg_image_fade_text_subline span::after { display: block; content: ''; position: absolute; top: 50%; left: 0; width: 40px; height: 1px; background-color: #fff; }
.bg_image_fade_text_subline span::after { left: auto; right: 0; }
.bg_image_fade_text { display: block;
width: 100%; max-width: 720px; height: auto; margin: 0 auto; padding: 20px 5px; z-index: 10; /* background-color: #000; background-color: rgba(0,0,0,0.1); */
color: #fff; font-size: 24px; line-height: 30px; text-align: center;
}
.bg_image_fade_text_button { display: block; padding: 40px 0 0 0; }
.bg_image_fade_text h1, .bg_image_fade_text p { color: #fff; }
.bg_image_fade_text a { color: #fff; text-decoration: none; }
.bg_image_fade_text a:hover { color: #173557; text-decoration: none; }
#arrow_slide_down { position: absolute; display: block; top: auto; bottom: 20px; left: 50%; width: 40px; height: 40px; margin: 0 0 0 -20px; padding: 0; z-index: 10; overflow: hidden; text-indent: -1000px; background-image: url(arrow_slide_down.png); background-position: center; background-repeat: no-repeat; background-color: transparent; animation: arrow_jump 2s infinite; cursor: pointer; }
#arrow_slide_down:hover { opacity: 0.5; }
#arrow_slide_down_target { position: absolute; display: block; top: auto; bottom: 200px; left: 0; width: 100%; height: 1px; margin: 0; padding: 0; z-index: 1; }
/* --- Module --- */
/* fuer z.B. YouTube auf der Seite, wenn das Cookie nicht erlaubt ist */
.onpage_cookie_erlaubnis_box { clear: both; display: block; width: 100%; height: auto; margin: 0 0 40px 0; padding: 30px 10px 10px 10px; background-color: rgba(240,240,240,0.75); border: 3px solid #c33; text-align: center; }
table { clear: both; width: 100%; margin: 0 0 20px 0; padding: 0; }
th, td { padding: 5px 10px; vertical-align: top; text-align: left; }
th.center, td.center { text-align: center; }
th.right, td.right { text-align: right; }
.download_box { clear: both; }
.download_box a { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; width: 100%; margin: 0 0 20px 0; padding: 10px 70px 10px 0; border-top: 1px solid #999; border-bottom: 1px solid #999; background-image: url(icon_download.png); background-position: center right; background-repeat: no-repeat; background-color: transparent; color: #173557; text-decoration: none; }
.download_part_1 { display: block; padding: 0; }
.download_titel { color: #173557; font-weight: bold; }
.download_hinweis { color: #0067b1; }
.download_part_2 { text-align: right; }
.download_ext_and_size { color: #999; text-transform: uppercase; }
.download_ext_filename { color: #999; font-size: 16px; }
.download_box a:hover { color: #173557; text-decoration: none; background-color: #f0f0f0; }
@media all and (max-width:480px) {
.download_box { clear: both; }
.download_box a { display: block; padding: 10px 0; background-position: top right; }
.download_part_1 { display: block; padding: 0 50px 0 0; }
.download_part_2 { text-align: left; }
}
.search_download_box { clear: both; display: block; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid #f0f0f0; }
.search_download_box a {text-decoration: none; }
.search_download_titel { color: #173557; font-weight: bold; }
.search_download_ext_and_size { color: #999; text-transform: uppercase; font-size: 16px; }
.search_download_ext_filename { color: #999; font-size: 16px; }
.search_download_box a:hover {text-decoration: none; }
.search_download_box a:hover .search_download_titel { color: #82c17a; }
.search_download_box a:hover .search_download_ext_and_size { color: #173557; }
.search_download_box a:hover .search_download_ext_filename { color: #173557; }
/* Slider */
.tns-outer .tns-nav { display: block; top: auto; bottom: -36px; left: 0; right: auto; width: 100%; padding: 0 40px; text-align: center; z-index: 5; }
.tns-outer .tns-nav button { display: inline-block; }
.tns-outer .tns-nav button { width: 12px; height: 12px; padding: 0; margin: 0 5px 5px 5px; border-radius: 0; background-color: transparent;
border: 2px solid #173557; outline: none; }
.tns-outer .tns-nav button:hover { border: 2px solid #82c17a; background-color: transparent; }
.tns-outer button.tns-nav-active { border: 2px solid #82c17a; background-color: transparent; }
/* Pfeile nur beim hover sichtbar */
.tns-outer .tns-controls { display: none; top: 50%; bottom: auto; margin: -23px 0 0 0; z-index: 10; background-position: center; background-repeat: no-repeat;}
#facts_slider_bg:hover .tns-outer .tns-controls { display: block; }
.tns-outer .tns-controls button { width: 46px; height: 46px; border: none; background-color: transparent; background-position: center; background-repeat: no-repeat; text-indent: -9999px; overflow: hidden; }
.tns-outer .tns-controls button:hover { background-color: transparent; opacity: 0.5; }
.tns-outer .tns-controls [data-controls="prev"] { left: 5px; right: auto; background-image: url(slider_arrow_left.png); }
.tns-outer .tns-controls [data-controls="next"] { left: auto; right: 5px; background-image: url(slider_arrow_right.png); }
#news_slider_bg .tns-outer .tns-controls [data-controls="prev"] { background-image: url(slider_arrow_left_green_dot.png); }
#news_slider_bg .tns-outer .tns-controls [data-controls="next"] { background-image: url(slider_arrow_right_green_dot.png); }
#history_slider_bg .tns-outer .tns-controls [data-controls="prev"] { background-image: url(slider_arrow_left_green.png); }
#history_slider_bg .tns-outer .tns-controls [data-controls="next"] { background-image: url(slider_arrow_right_green.png); }
/*
@media all and (max-width:1660px) {
.tns-outer .tns-controls [data-controls="prev"] { left: 5px; right: auto; }
.tns-outer .tns-controls [data-controls="next"] { left: auto; right: 5px; }
}
*/
/* Sonderfall: Startseiten Slider mit 4 Kacheln / Bildern */
#bildergalerie_startseite_slider_bg:hover .tns-outer .tns-controls { display: none; }
#bildergalerie_startseite_slider_bg { clear: both; display: block; margin: 0 0 60px 0; padding: 0 2%; }
.bildergalerie_startseite_box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; margin: 0; padding: 0; z-index: 1; box-shadow: 5px 5px 10px 0 #555; background-color: #f0f0f0; }
.bildergalerie_startseite_box a { display: block; width: 50%; height: auto; margin: 0; padding: 0; }
/* Slider Anpassungen */
#bildergalerie_startseite_slider_bg .tns-outer .tns-nav { padding: 0; }
/*
#bildergalerie_startseite_slider_bg .tns-outer .tns-controls [data-controls="prev"] { left: 5px; }
#bildergalerie_startseite_slider_bg .tns-outer .tns-controls [data-controls="next"] { left: auto; right: 5px; }
*/
/* ------ */
/* https://cssgradient.io/ */
.section_bg_facts_at_a_glance { clear: both; display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 50px 0 30px 0; z-index: 1;
background-color: #0067b1; color: #fff;
/* background: linear-gradient(60deg, rgba(0,103,177,1) 0%, rgba(0,103,177,1) 33%, rgba(130,193,122,1) 100%); */
background-image: url(bg_facts_at_a_glance.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;
}
.section_bg_facts_at_a_glance .section_full { }
.section_bg_facts_at_a_glance h2 { color: #fff; }
#facts_slider_bg { clear: both; margin: 0 0 40px 0; }
#facts_slider { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; }
#facts_slider > div { display: block; height: auto; }
.facts_slider_box { display: block; width: 90%; height: 100%; margin: 0 auto; padding: 20px 20px 1px 20px; background-color: #173557; color: #fff; text-align: center; }
.facts_slider_image { display: block; width: 80px; height: 80px; margin: 0 auto 20px auto; background-position: center; background-repeat: no-repeat; background-size: contain; }
.facts_slider_box h3 { color: #82c17a; }
/* ------ */
/*
#weltkarte_svg { clear: both; display: block; width: 100%; height: auto; min-height: 300px; margin: 0 0 20px 0; padding: 0; border: 1px solid #fff; }
*/
#weltkarte_image { clear: both; display: block; position: relative; top: 0; left: 0; width: 100%; max-width: 1920px; height: auto; margin: 0 auto 20px auto; padding: 0; z-index: 1; }
#weltkarte_image img { width: 100%; max-width: none; height: auto; }
#weltkarte_image #img_weltkarte { display: block; }
#weltkarte_image #img_europa { display: none; }
.weltkarte_point { display: block; position: absolute; top: 0; left: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; padding: 2px; z-index: 10; border-radius: 50%; outline: none; background-color: transparent; border: 2px solid transparent;
cursor: pointer;
animation: weltkarte_point_pulsate 4s ease-out;
animation-iteration-count: infinite;
}
@-webkit-keyframes weltkarte_point_pulsate {
0% { transform: scale(1, 1); border: 2px solid transparent; }
50% { transform: scale(1, 1); border: 2px solid #fff; }
75% { transform: scale(1.2, 1.2); border: 2px solid #fff; }
100% { transform: scale(1, 1); border: 2px solid transparent; }
}
.weltkarte_point.delay_500 { animation-delay: 500ms; }
.weltkarte_point.delay_1000 { animation-delay: 1000ms; }
.weltkarte_point.delay_1500 { animation-delay: 1500ms; }
.weltkarte_point.delay_2000 { animation-delay: 2000ms; }
.weltkarte_point.delay_2500 { animation-delay: 2500ms; }
.weltkarte_point.delay_3000 { animation-delay: 3000ms; }
.weltkarte_point.delay_3500 { animation-delay: 3500ms; }
.weltkarte_point.delay_4000 { animation-delay: 4000ms; }
.weltkarte_point span { display: block; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 2; border-radius: 50%; outline: none; overflow: hidden; text-indent: -99999px;
background-color: #82c17a; }
.weltkarte_point:before { content: ''; position: absolute; display: none; top: 50%; left: -52px; width: 50px; height: 2px; margin: -1px 0 0 0; padding: 0; background-color: #fff; }
.weltkarte_point:hover { border: 2px solid #fff; }
.weltkarte_point:hover span { background-color: #0067b1; }
.weltkarte_point.active { border: 2px solid #fff; z-index: 20; animation: none; }
.weltkarte_point.active:before { display: block; }
.weltkarte_point.active span { background-color: #0067b1; }
.weltkarte_infobox { display: none; position: absolute; top: 0; left: 0; width: 360px; height: auto; min-height: 210px; margin: -105px 50px 0 0; padding: 20px 10px 20px 30px; z-index: 30; background-color: #fff; color: #173557; }
.weltkarte_infobox.active { display: block; }
.weltkarte_infobox_close { display: block; position: absolute; top: 0; left: auto; right: 0; width: auto; height: auto; margin: 0; padding: 10px 15px 10px 10px; z-index: 40; color: #82c17a; cursor: pointer; font-weight: bold; font-size: 24px; line-height: 24px; }
.weltkarte_infobox_close:hover { color: #0067b1; }
.weltkarte_country { display: block; margin: 0 0 10px 0; font-size: 30px; line-height: 40px; font-weight: bold; text-transform: uppercase; color: #173557; }
.weltkarte_headline { font-weight: bold; text-transform: uppercase; color: #0067b1; }
.weltkarte_firma { font-weight: bold; }
.weltkarte_point { width: 20px; height: 20px; margin: -10px 0 0 -10px; padding: 2px; }
#weltkarte_point_1 { top: 520px; left: 832px; }
#weltkarte_point_2 { top: 500px; left: 868px; }
#weltkarte_point_3 { top: 530px; left: 868px; }
#weltkarte_point_4 { top: 560px; left: 832px; }
#weltkarte_point_5 { top: 560px; left: 804px; }
#weltkarte_point_6 { top: 583px; left: 868px; }
#weltkarte_point_7 { top: 618px; left: 868px; }
/* #weltkarte_point_8 { top: 925px; left: 1545px; } */
#weltkarte_point_8 { top: 862px; left: 1455px; }
#weltkarte_point_9 { top: 824px; left: 1429px; }
/* Karte 1920 * 1200px
top = y : 12 = ___ %
left = x : 19.2 = ___ %
*/
#weltkarte_point_1 { top: 43.33%; left: 43.33%; }
#weltkarte_point_1_infobox { top: 43.33%; left: auto; right: 56.67%; }
#weltkarte_point_2 { top: 41.67%; left: 45.21%; }
#weltkarte_point_2_infobox { top: 46.67%; left: auto; right: 54.79%; }
#weltkarte_point_3 { top: 44.17%; left: 45.21%; }
#weltkarte_point_3_infobox { top: 44.17%; left: auto; right: 54.79%; }
#weltkarte_point_4 { top: 46.67%; left: 43.33%; }
#weltkarte_point_4_infobox { top: 46.67%; left: auto; right: 56.67%; }
#weltkarte_point_5 { top: 46.67%; left: 41.88%; }
#weltkarte_point_5_infobox { top: 46.67%; left: auto; right: 58.12%; }
#weltkarte_point_6 { top: 48.58%; left: 45.21%; }
#weltkarte_point_6_infobox { top: 48.58%; left: auto; right: 54.79%; }
#weltkarte_point_7 { top: 51.50%; left: 45.21%; }
#weltkarte_point_7_infobox { top: 51.50%; left: auto; right: 54.79%; }
#weltkarte_point_8 { top: 71.83%; left: 75.78%; }
#weltkarte_point_8_infobox { top: 71.83%; left: auto; right: 24.22%; }
#weltkarte_point_9 { top: 68.67%; left: 74.43%; }
#weltkarte_point_9_infobox { top: 68.67%; left: auto; right: 25.57%; }
@media all and (max-width:980px) {
#weltkarte_image #img_weltkarte { display: none; }
#weltkarte_image #img_europa { display: block; }
.weltkarte_point { width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 2px; }
.weltkarte_point.active:before { display: none; }
.weltkarte_infobox { margin: -105px 0 0 0; }
.weltkarte_country { font-size: 24px; line-height: 30px; }
.weltkarte_country { font-size: 26px; line-height: 36px; }
#weltkarte_point_1 { top: 442px; left: 341px; }
#weltkarte_point_2 { top: 392px; left: 432px; }
#weltkarte_point_3 { top: 465px; left: 432px; }
#weltkarte_point_4 { top: 529px; left: 284px; }
#weltkarte_point_5 { top: 529px; left: 341px; }
#weltkarte_point_6 { top: 580px; left: 432px; }
#weltkarte_point_7 { top: 660px; left: 432px; }
/* Karte 980 * 870px
top = y : 8.7 = ___ %
left = x : 9.8 = ___ %
*/
#weltkarte_point_1 { top: 50.08%; left: 34.80%; }
#weltkarte_point_1_infobox { top: 50.08%; left: 39.80%; right: auto; }
#weltkarte_point_2 { top: 45.06%; left: 44.08%; }
#weltkarte_point_2_infobox { top: 45.06%; left: 49.08%; right: auto; }
#weltkarte_point_3 { top: 53.45%; left: 44.08%; }
#weltkarte_point_3_infobox { top: 53.45%; left: 49.08%; right: auto; }
#weltkarte_point_4 { top: 60.80%; left: 28.98%; }
#weltkarte_point_4_infobox { top: 60.80%; left: 33.98%; right: auto; }
#weltkarte_point_5 { top: 60.80%; left: 34.80%; }
#weltkarte_point_5_infobox { top: 60.80%; left: 39.80%; right: auto; }
#weltkarte_point_6 { top: 66.67%; left: 44.08%; }
#weltkarte_point_6_infobox { top: 66.67%; left: 49.08%; right: auto; }
#weltkarte_point_7 { top: 75.86%; left: 44.08%; }
#weltkarte_point_7_infobox { top: 75.86%; left: 49.08%; right: auto; }
/* Sonderfall Singapore, Malaysia */
#weltkarte_point_8, #weltkarte_point_9 { top: auto; bottom: 20px; left: auto; right: 20px;
width: auto; height: auto; margin: 0; padding: 0; z-index: 10; border-radius: 50%; outline: none; background-color: transparent; border: none;
animation: weltkarte_point_singapore 4s ease-out;
animation-iteration-count: infinite; }
#weltkarte_point_9 { top: auto; bottom: 70px; }
@-webkit-keyframes weltkarte_point_singapore {
0% { transform: scale(1, 1); }
50% { transform: scale(1, 1); }
75% { transform: scale(1.2, 1.2); }
100% { transform: scale(1, 1); }
}
#weltkarte_point_8 span,
#weltkarte_point_9 span { display: block; width: auto; height: auto; margin: 0; padding: 2px 10px; z-index: 2; border-radius: 10px; outline: none; overflow: hidden; text-indent: 0; background-color: #82c17a; color: #fff; }
#weltkarte_point_8:hover, #weltkarte_point_9:hover { border: none; }
#weltkarte_point_8:hover span, #weltkarte_point_9:hover span { background-color: #0067b1; color: #fff; }
#weltkarte_point_8.active, #weltkarte_point_9.active { border: none; animation: none; }
#weltkarte_point_8.active span, #weltkarte_point_9.active span { background-color: #0067b1; }
#weltkarte_image #weltkarte_point_8_infobox,
#weltkarte_image #weltkarte_point_9_infobox { top: auto; bottom: 60px; left: auto; right: 20px; margin: 0; }
#weltkarte_image #weltkarte_point_9_infobox { bottom: 110px; }
}
@media all and (max-width:768px) {
#weltkarte_image .weltkarte_infobox { width: auto; padding: 15px 30px 15px 15px; }
}
@media all and (max-width:480px) {
#weltkarte_image .weltkarte_infobox,
#weltkarte_image #weltkarte_point_8_infobox,
#weltkarte_image #weltkarte_point_9_infobox { top: auto; bottom: 60px; left: 50%; right: auto; width: 290px; min-height: 0; margin: 0 0 0 -145px; padding: 15px 10px; font-size: 18px; line-height: 25px; }
}
/* ------ */
.slidedown_box { clear: both; display: block; width: auto; height: auto; margin: 0; padding: 0; z-index: 10; }
.slidedown_box_button {
display: block; width: 100%; height: auto; margin: 0; padding: 10px 10px 10px 60px;
cursor: pointer; border: 1px solid #82c17a; border-radius: 10px; outline: none;
background-color: #82c17a; color: #fff; font-size: 30px; line-height: 40px; text-align: left;
background-image: url('slidedown_arrow_down.png'); background-position: center left; background-repeat: no-repeat;
}
.slidedown_box_button:hover { border: 1px solid #173557; color: #fff; background-color: #173557; }
.slidedown_box.active .slidedown_box_button { color: #173557; background-color: #fff; background-image: url('slidedown_arrow_up.png'); }
.slidedown_box_content {
display: block; margin: 0; padding: 0;
max-height: 0; overflow: hidden;
transition: max-height 0.2s ease-out;
}
.slidedown_box.active .slidedown_box_content { max-height: none; padding: 20px 20px 1px 20px; }
.bwd_slidedown_text_top { display: block; margin: 0 0 20px 0; }
.bwd_slidedown_text_top h2 { display: inline-block; color: #0067b1; font-size: 60px; line-height: 70px; text-transform: uppercase;
background-image:linear-gradient(90deg,#0067b1,#82c17a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.bwd_slidedown_text_left { float: left; width: 48%; }
.bwd_slidedown_text_right { float: right; width: 48%; }
.slidedown_box_content .download_box { clear: both; text-align: left; }
@media all and (max-width:768px) {
.slidedown_box { margin: 0 0 20px 0; }
.bwd_slidedown_text_left,
.bwd_slidedown_text_right { float: none; width: 100%; }
.bwd_slidedown_text_top h2 { font-size: 40px; line-height: 50px; }
.slidedown_box_button { padding: 10px 10px 10px 50px; background-size: 45px 30px; font-size: 24px; line-height: 32px; }
.slidedown_box.active .slidedown_box_content { padding: 20px 10px 1px 10px; }
}
@media all and (max-width:480px) {
.slidedown_box_button { padding: 10px 10px 10px 40px; background-size: 30px 20px; font-size: 21px; line-height: 30px; }
.bwd_slidedown_text_top h2 { font-size: 35px; line-height: 45px; }
}
.modul_57 { clear: both; display: block; width: 95%; height: auto; margin: 0 0 10px 2.5%; padding: 10px 0; border-bottom: 2px solid #173557; }
.modul_57.first_box { border-top: 2px solid #173557; }
.modul_57 .slidedown_box { margin: 0; padding: 0; }
.modul_57 .slidedown_box_button { display: block; width: 100%; height: auto; margin: 0; padding: 10px 60px 10px 0;
cursor: pointer; border: none; border-radius: 0; background-color: transparent; color: #0067b1; font-size: 24px; line-height: 30px; text-align: left;
background-image: url('slidedown_arrow_blue_1_down.png'); background-position: center right; background-repeat: no-repeat;
}
.modul_57 .slidedown_box_button_subline { color: #173557; font-size: 30px; line-height: 40px; }
.modul_57 .slidedown_box.active .slidedown_box_button { color: #173557; background-color: transparent; background-image: url('slidedown_arrow_blue_1_up.png'); }
.modul_57 .slidedown_box.active .slidedown_box_content { max-height: none; padding: 20px 0 1px 0; }
/* ------ */
.counter_flex { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.counter_box { display: block; width: 20%; margin: 0 2% 20px 2%; text-align: center; color: #fff; }
.counter_value,
.counter_title { font-family: "Avenir Next LT W05 Demi5114418", "Avenir Next LT W05 Condensed", Arial, Helvetica, sans-serif; }
.counter_value { display: block; margin: 0 0 20px 0; font-size: 100px; line-height: 100px; }
.counter_title { display: block; margin: 0 0 20px 0; font-size: 30px; line-height: 40px; text-transform: uppercase; }
@media all and (max-width:980px) {
.counter_box { width: 45%; margin: 30px 2%; }
.counter_value { margin: 0 0 10px 0; font-size: 80px; line-height: 80px; }
.counter_title { margin: 0 0 10px 0; font-size: 26px; line-height: 36px; }
}
@media all and (max-width:480px) {
.counter_flex { display: block; }
.counter_box { width: auto; margin: 0 10px 30px 10px; }
.counter_value { margin: 0 0 5px 0; font-size: 70px; line-height: 70px; }
.counter_title { margin: 0 0 5px 0; font-size: 24px; line-height: 34px; }
}
/* ------ */
#your_advantages { clear: both; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; width: 100%; margin: 0 0 20px 0; padding: 0; }
.advantage_box { display: block; width: 25%; margin: 0 0 40px 0; padding: 0 20px; text-align: center; }
.advantage_image { display: block; width: 120px; height: 120px; margin: 0 auto 10px auto; padding: 0; background-position: center; background-repeat: no-repeat; background-size: contain; }
@media all and (max-width:768px) {
.advantage_box { display: block; width: 33.3%; padding: 0 18px; margin: 0 0 30px 0; }
.advantage_image { width: 100px; height: 100px; }
}
@media all and (max-width:480px) {
.advantage_box { display: block; width: 50%; padding: 0 15px; margin: 0 0 20px 0; }
.advantage_image { width: 80px; height: 80px; }
}
/* ------ */
.we_are_looking_for_you { clear: both; display: block; margin: 0 2.5%; }
.we_are_looking_for_you_headline { display: block; margin: 0 0 20px 0; font-family: "Avenir Next LT W05 Medium Cond", "Avenir Next LT W05 Condensed", Arial, Helvetica, sans-serif; font-size: 40px; line-height: 50px; text-transform: uppercase; color: #82c17a; text-align: center; }
.we_are_looking_for_you_box { display: block; margin: 0 0 40px 0; padding: 30px 30px 10px 30px; border: 5px solid #82c17a; }
.we_are_looking_for_you_image { display: block; margin: 0 0 30px 0; }
.we_are_looking_for_you_flex { display: flex; flex-direction: row; justify-content: center; align-items: flex-end; width: 100%; max-width: 1600px; margin: 0; padding: 0; }
.we_are_looking_for_you_text { display: block; width: 480px; }
.we_are_looking_for_you_link { display: block; width: 240px; text-align: center; }
.we_are_looking_for_you_link a.link_as_button { padding: 10px 25px; border-radius: 10px; font-size: 30px; line-height: 40px; background-color: #82c17a; color: #fff; }
.we_are_looking_for_you_link a.link_as_button:hover { background-color: #173557; color: #fff; }
@media all and (max-width:768px) {
.we_are_looking_for_you_box { padding: 20px 20px 1px 20px; border: 3px solid #82c17a; }
.we_are_looking_for_you_flex { display: block; }
.we_are_looking_for_you_text { width: 100%; max-width: 480px; }
.we_are_looking_for_you_link { width: 100%; text-align: left; }
.we_are_looking_for_you_link a.link_as_button { padding: 5px 15px; font-size: 25px; line-height: 35px; }
}
/* ------ */
/* 50/50 mit Text links oder rechts daneben */
.header_image_or_video_bg,
.modul_31_flex_bg { clear: both; display: block; width: 100%; margin: 0; padding: 0; }
.header_image_or_video_flex,
.modul_31_flex { clear: both; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; max-width: 1600px; margin: 0 auto; padding: 0; }
.modul_31_flex.flex_direction_row { flex-direction: row; }
.modul_31_flex.flex_direction_row_reverse { flex-direction: row-reverse; }
.header_image_or_video_flex { justify-content: space-between; }
.header_image_or_video_image,
.header_image_or_video_video,
.header_image_or_video_text,
.modul_31_flex_image,
.modul_31_flex_video,
.modul_31_flex_text { display: block; width: 50%; height: auto; margin: 0; padding: 0; }
.header_image_or_video_image,
.modul_31_flex_image { overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; align-self: stretch; }
.header_image_or_video_image img,
.modul_31_flex_image img { opacity: 0; }
.modul_31_flex_video { }
.header_image_or_video_text,
.modul_31_flex_text { padding: 30px 40px 10px 40px; }
.header_image_or_video_text { max-width: 540px; }
.header_image_or_video_video .onpage_cookie_erlaubnis_box,
.modul_31_flex_video .onpage_cookie_erlaubnis_box { margin: 0; }
/* --- Nur Header-Text --- */
.header_only_text_bg { display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 1; overflow: hidden; background-color: #0067b1; background-image: url(bg_join_us.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; }
.header_only_text { display: block; position: relative; top: 0; left: 0; width: auto; max-width: 1200px; height: auto; margin: 0 auto; padding: 50px 2.04%; color: #fff; }
/* --- Header Schriften --- */
.header_image_or_video_headline_1,
.header_only_text_1 { display: block; margin: 0 0 10px 0; font-family: "Avenir Next LT W05 Medium Cond", "Avenir Next LT W05 Condensed", Arial, Helvetica, sans-serif; font-size: 40px; line-height: 50px; text-transform: uppercase; color: #fff; }
.header_image_or_video_headline_2,
.header_only_text_2 { display: block; margin: 0 0 40px 0; font-size: 24px; line-height: 34px; color: #fff; }
.header_only_text_2 { margin: 0; }
@media all and (max-width:768px) {
.header_image_or_video_flex,
.modul_31_flex { clear: both; display: block; }
.modul_31_flex { margin: 0 0 40px 0; }
.header_image_or_video_image,
.header_image_or_video_video,
.header_image_or_video_text,
.modul_31_flex_image,
.modul_31_flex_video,
.modul_31_flex_text { width: 100%; }
.header_image_or_video_image,
.modul_31_flex_image { background-image: none; }
.header_image_or_video_image img,
.modul_31_flex_image img { opacity: 1; }
.header_image_or_video_text,
.modul_31_flex_text { padding: 20px 20px 1px 20px; }
}
/* ------ */
/* video_self_hosted */
.video_box { display: block; margin: 0; }
.video_box video { display: block; width: 100%; height: auto; margin: 0; }
/* vimeo und youtube per iFrame */
/* 56.25% wegen 16:9 Format */
.video_box .video_youtube { clear: both; display: block; position:relative; top: 0; left: 0; width: 100%; height: 0; padding: 0 0 56.25% 0; margin: 0; overflow: hidden; }
.video_box .video_youtube iframe {display: block; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: none; }
.video_box .video_youtube.format_16_9 { padding: 0 0 56.25% 0; }
.video_box .video_youtube.format_quadratisch { padding: 0 0 50% 0; }
.video_box .video_youtube.format_4_3 { padding: 0 0 75% 0; }
.video_box .video_youtube.format_3_4 { padding: 0 0 133.33% 0; }
/* ------ */
#suchbox_bg { clear: both; padding: 20px 0; background-color: #e0f6ff; }
#suchbox_seite38 { display: block; width: auto; height: auto; margin: 0 0 30px 0; padding: 10px 2.5%; color: #000; text-align: left; z-index: 100; }
#suchbox_seite38 { background-color: #e0f6ff; }
.search_it_form { display: block; width: 100%; height: auto; margin: 0; padding: 0; }
.search_it_form fieldset { margin: 0; padding: 0; }
.search_it_flex { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }
#suchbox_seite38 .search_it_flex { justify-content: flex-start; }
.search_it_form input.search_it_text { display: block; width: 180px; height: auto; margin: 0 10px; padding: 5px 10px; color: #000; font-size: 15px; line-height: 25px; background-color: #fff; border: none; outline: none; }
.search_it_form input.hidden { display: none; }
.search_it_form input.search_it_button { display: block; width: 25px; height: 25px; margin: 0; padding: 0; z-index: 10; border: none; color: #000; background-color: transparent; background-image:url(icon_suchlupe.png); background-repeat: no-repeat; background-position: center center; background-size: contain; cursor: pointer; text-indent: -99999px; overflow: hidden; }
.search_it_form input.search_it_button:hover { opacity: 0.5; }
.search_highlighter { background-color: #F0F0f0; color: #000; }
#suchbox_seite38 { margin: 0 0 30px 0; }
.image_link_box_flex { clear: both; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; }
a.image_link_box { display: block; position: relative; top: 0; left: 0; width: 30%; height: auto; margin: 0 0 2.5% 2.5%; padding: 0; z-index: 1; overflow: hidden; background-color: #173557; }
a.image_link_box .image_link_box_overlay { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 1; background-color: #173557; background-color: rgba(23, 53, 87, 0.25); }
a.image_link_box .image_link_box_title { display: block; position: absolute; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 15px 15px 5px 15px; z-index: 3; color: #fff; text-transform: uppercase; font-size: 40px; line-height: 50px; }
a.image_link_box .image_link_box_point { display: block; position: absolute; top: auto; bottom: 15px; left: 15px; width: 15px; height: 15px; margin: 0; padding: 0; z-index: 2; border: 2px solid #fff; border-radius: 15px; }
a.image_link_box:hover .image_link_box_overlay { background-color: #82c17a; background-color: rgba(130, 193, 122, 0.25); }
a.image_link_box:hover .image_link_box_point { background-color: #82c17a; border: 2px solid #82c17a; }
@media screen and (max-width:980px) {
a.image_link_box { width: 46.25%; }
}
@media screen and (max-width:768px) {
a.image_link_box .image_link_box_title { font-size: 30px; line-height: 40px; }
}
@media screen and (max-width:480px) {
.image_link_box_flex { display: block; }
a.image_link_box { width: 95%; }
}
/* Seite 60 Team */
#team_section_headline { clear: both; text-align: center; margin: 0 0 20px 0; text-transform: none; color: #fff; }
.team_box_flex { clear: both; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; }
.team_box { display: block; position: relative; top: 0; left: 0; width: 21.88%; height: auto; margin: 0 0 0 2.5%; padding: 0; text-align: center; color: #fff; }
.team_box_image { display: block; max-width: 300px; margin: 0 auto 20px auto; padding: 0; border-radius: 50%; overflow: hidden; }
.team_box_image img { display: block; padding: 5px; border-radius: 50%; }
.team_box_image.border_white { background-color: #fff; }
.team_box_image.border_blue_1_to_green { background-color: #0067b1; background: linear-gradient(45deg, rgba(0,103,177,1) 0%, rgba(130,193,122,1) 100%); }
.team_box_name,
.team_overlay_name { display: block; margin: 0 0 10px 0; text-transform: uppercase; font-weight: bold; }
.team_box_text { display: block; margin: 0; }
.team_overlay_text { display: none; position: absolute; top: auto; bottom: 0; left: 0; width: 46.25vw; max-width: 768px; height: auto; margin: 0; padding: 20px 20px 10px 20px; z-index: 100; border-radius: 30px; color: #173557; background-color: #fff; border: 2px solid #173557; text-align: left; }
.team_overlay_text.active { display: block; }
.team_overlay_text.infobox_right { left: auto; right: 0; }
.team_overlay_name { font-size: 24px; line-height: 34px; }
.team_overlay_close { display: block; position: absolute; top: 15px; left: auto; right: 15px; width: 30px; height: 30px; margin: 0; padding: 0 0 5px 0; z-index: 2; font-size: 25px; line-height: 25px; text-align: center; border-radius: 50%; background-color: #173557; color: #fff; text-decoration: none; border: none; cursor: pointer; }
.team_overlay_close:hover { background-color: #0067b1; color: #fff; }
@media screen and (max-width:768px) {
.team_box { width: 46.25%; margin: 0 0 40px 2.5%; }
.team_overlay_text { width: 92.5vw; }
}
@media screen and (max-width:360px) {
.team_box_flex { display: block; }
.team_box { width: 95%; }
.team_overlay_text { position: relative; top: 0; bottom: auto; left: 0; right: auto; width: 100%; margin: -40px 0 40px 0; }
}
/* Seite 5 News */
#news_slider_bg { clear: both; margin: 0 0 80px 0; }
/*
.slider_news_box { height: 100%; border: 1px solid #900; }
.teaser_news_box { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-content: flex-start; width: 100%; height: auto; margin: 0 auto; padding: 20px 20px 1px 20px; }
*/
.teaser_news_box { display: block; width: 100%; height: auto; margin: 0 auto; padding: 0 20px; }
.teaser_news_image { display: block; margin: 0 0 10px 0; }
.teaser_news_datum { display: block; margin: 0 0 10px 0; }
.teaser_news_titel { display: block; font-weight: bold; }
.teaser_news_text { display: block; margin: 0 0 10px 0; }
.teaser_news_read_more { display: block; margin: 0 0 10px 0; }
/* die Ausgabe der News, nachgeladen per Ajax */
#teltec_news_output { clear: both; margin: 0; padding: 100px 0 0 0; }
.teltec_news_grid { display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
background-color: #fff;
}
.teltec_news_grid_images { grid-area: 1 / 1 / 2 / 2; }
.teltec_news_grid_text { grid-area: 1 / 2 / 2 / 3; }
.news_image_box { display: block; width: 95%; height: auto; margin: 0 0 2.5% 2.5%; padding: 0; }
.bildergalerie_masonry { clear: both; display: block; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2.78%; column-count: 3; column-gap: 20px; }
.bildergalerie_masonry a {
float: none; display: inline-block; width: 100%; margin: 0 0 20px 0; padding: 0; box-shadow: 0 0 2px 0 #333; }
.teltec_news_grid_images .bildergalerie_masonry { column-count: 2; }
@media screen and (max-width:768px){
.bildergalerie_masonry { column-count: 2; }
}
@media screen and (max-width:480px){
.bildergalerie_masonry,
.teltec_news_grid_images .bildergalerie_masonry { column-count: 1; column-gap: 0; }
}
.teltec_news_detailseite { clear: both; display: block; margin: 0; padding: 0; text-align: center; }
.teltec_news_detailseite.backlink_top { padding: 0 0 80px 0; }
.teltec_news_detailseite.backlink_bottom { padding: 40px 0 0 0; }
@media screen and (max-width:768px) {
.teltec_news_grid { display: block; }
}
/* Seite 62 History */
#page_history_header { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; height: auto; z-index: 2; text-align: center; }
#page_history_header .like_h1 { color: #fff; margin: 0 0 10px 0; }
#page_history_header .like_h1 span { color: #82c17a; }
#page_history_header_nav button { display: inline-block; margin: 0 10px 0 0; padding: 5px 20px; border-radius: 5px; background-color: transparent; color: #fff; text-decoration: none; font-size: 20px; line-height: 30px; border: none; cursor: pointer; }
#page_history_header_nav button:hover { background-color: #82c17a; color: #fff; text-decoration: none; }
.page_history_point_header { clear: both; display: block; width: 30px; height: 30px; margin: 0 auto; padding: 0; background-color: #82c17a; border-radius: 50%; }
.page_history_line { clear: both; display: block; width: 4px; height: 60px; margin: 0 auto 10px auto; padding: 0; background-color: #82c17a; }
.page_history_line_full_section { position: absolute; top: 0; left: 50%; height: 100%; margin: 0 0 0 -2px; z-index: -1; }
.page_history_line_header_1 { height: 100px; }
.page_history_line_header_2 { height: 60px; margin-bottom: 0; }
.page_history_line_header_3 { height: 60px; margin-bottom: 0; }
.page_history_line_content_top { height: 100px; }
@media screen and (max-width:1400px) {
.page_history_line_header_1 { height: 80px; }
.page_history_line_header_2 { height: 40px; }
.page_history_line_header_3 { height: 40px; }
}
@media screen and (max-width:1200px) {
.page_history_point_header { width: 25px; height: 25px; }
.page_history_line_header_1 { height: 60px; }
.page_history_line_header_2 { height: 30px; }
.page_history_line_header_3 { height: 30px; }
}
@media screen and (max-width:980px) {
#page_history_header { position: relative; top: 0; bottom: auto; padding: 20px 0 0 0; }
.page_history_line_header_1 { height: 40px; }
.page_history_line_header_2 { height: 20px; }
.page_history_line_header_3 { height: 20px; }
}
@media screen and (max-width:768px) {
/* um die gruene Linie im Inhalt zu verdecken hinterm Fliesstext */
#page_62 .outer_box.box_width_1_3 .text { padding: 10px 0; background-color: #fff; }
}
@media screen and (max-width:480px) {
#page_history_header_nav button { padding: 5px 15px; font-size: 18px; line-height: 25px; }
}
/* Seite 62 History - Gegenwart Slider */
#history_slider_bg { clear: both; width: 100%; margin: 0 0 40px 0; background-color: #fff; }
.history_box_grid { display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
align-items: flex-start;
justify-content: flex-start;
width: 100%; background-color: #fff;
}
.history_box_grid.bg_blue_1 { background-color: #173557; color: #fff; }
.history_box_grid.bg_blue_2 { background-color: #0067b1; color: #fff; }
.history_box_grid.bg_blue_3 { background-color: #eaf6fb; }
.history_box_grid.bg_blue_1 h1, .history_box_grid.bg_blue_1 h2, .history_box_grid.bg_blue_1 h3,
.history_box_grid.bg_blue_2 h1, .history_box_grid.bg_blue_2 h2, .history_box_grid.bg_blue_2 h3 { color: #fff; }
.history_box_grid strong { color: #0067b1; font-weight: normal; }
.history_box_image,
.history_box_text_sonderfall_1 { grid-area: 1 / 1 / 2 / 2; }
.history_box_text,
.history_box_text_sonderfall_2 { grid-area: 1 / 2 / 2 / 3; }
.history_box_grid.unten .history_box_text { grid-area: 1 / 1 / 2 / 2; }
.history_box_grid.unten .history_box_image { grid-area: 1 / 2 / 2 / 3; }
.history_box_image { display: block; position: relative; top: 0; left: 0; width: auto; height: 100%; margin: 0; padding: 0; z-index: 1; background-position: center; background-size: cover; background-repeat: no-repeat }
.history_box_image img { opacity: 0; }
.history_box_image_overlay { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 2; background-color: rgba(33,33,33,0.5); }
.history_box_image_overlay.image_overlay_transparent { background-color: transparent; }
.history_box_image::after { content: ''; display: block; position: absolute; top: 25px; left: auto; right: -15px; width: 30px; height: 30px; margin: 0; padding: 0; z-index: 5; background-color: #fff; transform: rotate(45deg); }
.history_box_grid.unten .history_box_image::after { left: -15px; right: auto; }
.history_box_grid.bg_blue_1 .history_box_image::after { background-color: #173557; }
.history_box_grid.bg_blue_2 .history_box_image::after { background-color: #0067b1; }
.history_box_grid.bg_blue_3 .history_box_image::after { background-color: #eaf6fb; }
.history_box_jahr,
.history_box_titel { display: block; position: absolute; top: 20px; left: 0; width: 100%; height: auto; margin: 0; padding: 0 25px; font-size: 50px; line-height: 60px; color: #fff; }
.history_box_titel { top: 80px; font-size: 36px; line-height: 46px; }
.history_box_text,
.history_box_text_sonderfall_1,
.history_box_text_sonderfall_2 { display: block; position: relative; top: 0; left: 0; margin: 0; padding: 20px 25px 10px 25px; z-index: 10; font-size: 24px; line-height: 32px; }
.history_box_text_sonderfall_1,
.history_box_text_sonderfall_2 { min-height: 400px; }
@media all and (max-width:1600px) {
.history_box_text_sonderfall_1,
.history_box_text_sonderfall_2 { min-height: 25vw; }
}
@media all and (max-width:980px) {
.history_box_text_sonderfall_1,
.history_box_text_sonderfall_2 { min-height: 50vw; }
}
@media all and (max-width:480px) {
.history_box_grid { display: block; }
.history_box_text_sonderfall_1,
.history_box_text_sonderfall_2 { min-height: 0; }
.history_box_image::after,
.history_box_grid.unten .history_box_image::after { top: auto; bottom: -15px; left: 50%; right: auto; width: 30px; height: 30px; margin: 0 0 0 -15px; }
.history_box_jahr { font-size: 42px; line-height: 48px; }
.history_box_titel { font-size: 32px; line-height: 38px; }
.history_box_text,
.history_box_text_sonderfall_1,
.history_box_text_sonderfall_2 { padding: 20px 15px 10px 15px; font-size: 21px; line-height: 37px; }
}
/* Seite 12 Equipment und 13 Materials */
.partner_flexbox { clear: both; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; width: 100%; margin: 0 0 20px 0; padding: 0 2.5%; }
/*
.partner_box { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; width: 50%; margin: 0; padding: 0; }
*/
.partner_box_grid { display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
align-items: flex-start;
justify-content: flex-start;
width: 50%;
background-color: #fff;
}
/* Sonderfall */
.partner_box_grid.width_full { width: 100%; }
.partner_logo { grid-area: 1 / 1 / 2 / 2; }
.partner_text { grid-area: 1 / 2 / 2 / 3; }
.partner_box_grid.logo_rechts .partner_text { grid-area: 1 / 1 / 2 / 2; }
.partner_box_grid.logo_rechts .partner_logo { grid-area: 1 / 2 / 2 / 3; }
.partner_logo { display: block; position: relative; top: 0; left: 0; width: auto; height: auto; margin: 0; padding: 0; background-color: #173557; }
a.partner_logo:hover { background-color: transparent; }
.partner_text { display: block; margin: 0; padding: 20px; background-color: #fff; font-weight: bold; }
.partner_link { font-weight: normal; }
.partner_logo::after { content: ''; display: block; position: absolute; top: 25px; left: auto; right: -10px; width: 20px; height: 20px; margin: 0; padding: 0; background-color: #fff; transform: rotate(45deg); }
.partner_box_grid.logo_rechts .partner_logo::after { left: -10px; right: auto; }
a.partner_logo img { opacity: 1; }
a.partner_logo img:hover { opacity: 0.66; }
/* geht nur mit PNG */
a.partner_logo.logo_white_css img { filter: brightness(0) invert(1); opacity: 1; }
a.partner_logo.logo_white_css img:hover { filter: none; opacity: 1; }
/* Alternative mit Hintergrundbild */
a.partner_logo.logo_with_bg_img { background-position: center; background-size: contain; background-repeat: no-repeat }
a.partner_logo.logo_with_bg_img img { opacity: 0; }
a.partner_logo.logo_with_bg_img img:hover { opacity: 1; }
#page_13 a.partner_logo { background-color: #0067b1; }
#page_13 a.partner_logo:hover { background-color: transparent; }
@media all and (max-width:980px) {
.partner_flexbox { display: block; }
.partner_box_grid { width: 100%; }
.partner_box_grid.mobile_even .partner_logo { grid-area: 1 / 1 / 2 / 2; }
.partner_box_grid.mobile_even .partner_text { grid-area: 1 / 2 / 2 / 3; }
.partner_box_grid.mobile_odd .partner_text { grid-area: 1 / 1 / 2 / 2; }
.partner_box_grid.mobile_odd .partner_logo { grid-area: 1 / 2 / 2 / 3; }
.partner_box_grid.mobile_even .partner_logo::after { left: auto; right: -10px; }
.partner_box_grid.mobile_odd .partner_logo::after { left: -10px; right: auto; }
}
@media all and (max-width:480px) {
.partner_box_grid { display: block; margin: 0 0 40px 0; }
.partner_box_grid.mobile_even .partner_logo::after,
.partner_box_grid.mobile_odd .partner_logo::after { top: auto; bottom: -10px; left: 50%; right: auto; margin: 0 0 0 -10px; }
}
/* Seite 2 Kompetenzbereich */
.s002_kompetenzbereich_flex { clear: both; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: stretch; margin: 0 0 20px 0; }
.s002_kompetenzbereich_image,
.s002_kompetenzbereich_text { display: block; width: 21.88%; margin: 0 0 20px 2.5%; padding: 0; }
.s002_kompetenzbereich_image { overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; align-self: stretch; }
.s002_kompetenzbereich_image img { opacity: 0; }
.s002_kompetenzbereich_text { display: flex; align-items: center; position: relative; top: 0; left: 0; width: 70.64%; padding: 20px 150px 20px 40px; color: #fff; }
.s002_kompetenzbereich_text p { margin: 0; color: #fff; }
.modul_030_click_on_an_area { position: absolute; top: 50%; left: auto; right: 20px; width: 120px; margin: -30px 0 0 0; padding: 0; font-size: 13px; line-height: 20px; background-image: url(icon_click_on_an_area.png); background-position: top right; background-repeat: no-repeat; }
.modul_030_click_on_an_area span { opacity: 0.75; }
@media all and (max-width:768px) {
.s002_kompetenzbereich_flex { display: block; }
.s002_kompetenzbereich_image { width: 95%; margin: 0 0 0 2.5%; }
.s002_kompetenzbereich_text { width: 95%; padding: 10px 140px 10px 10px; }
.modul_030_click_on_an_area { right: 10px; }
}
@media all and (max-width:480px) {
.s002_kompetenzbereich_text { padding: 10px 10px 80px 10px; }
.modul_030_click_on_an_area { top: auto; bottom: 10px; left: 50%; margin: 0 0 0 -60px; }
}
/* Seite 2 Kompetenzbereich - Halbleiter-Frontend-Verarbeitung */
.hilfslinie { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 1px; margin: 0; padding: 0; background-color: #f0f0f0; }
.hilfslinie.vertical { width: 1px; height: 100%; }
#frontend_processes_grid,
#backend_processes_grid
{ display: grid; width: 95%; margin: 0 auto;
grid-template-columns: 21.88% 70.64%;
grid-template-columns: 23.03% 74.17%; /* 21.88% : 0.95 = 23.03% */
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
align-items: flex-start;
justify-content: space-between;
}
#frontend_processes,
#backend_processes { grid-area: 1 / 2 / 2 / 3; }
#frontend_processes_info_boxen,
#backend_processes_info_boxen { grid-area: 1 / 1 / 2 / 2; }
/*
/ Infobox am Anfang erst einmal ausschalten /
.s002_kompetenzbereich_info_box { display: none; width: 100%; height: auto; margin: 0 0 20px 0; padding: 30px 20px 10px 20px; background-color: #eaf6fb; color: #173557; border: 1px solid #0067b1; transition: all 250ms ease-in-out; }
.s002_kompetenzbereich_info_box.active { display: block; }
*/
/* Infobox am Anfang erst einmal ausschalten */
.s002_kompetenzbereich_info_box { display: none; width: 100%; height: auto; margin: 0 0 20px 0; padding: 0; color: #173557; transition: all 250ms ease-in-out; }
.s002_kompetenzbereich_info_box.active { display: block; }
.s002_kompetenzbereich_info_box h2 { margin: 0 0 20px 0; color: #173557; text-transform: none; }
.s002_kompetenzbereich_info_box h3 { margin: 0 0 10px 0; color: #0067b1; text-transform: none; }
.s002_kompetenzbereich_info_box a { color: #173557; text-decoration: none; font-weight: bold; }
.s002_kompetenzbereich_info_box a:hover { color: #82c17a; text-decoration: none; }
.s002_kompetenzbereich_info_box p { margin: 0 0 10px 0; }
.s002_kompetenzbereich_info_box hr { width: 100%; margin: 0 0 10px 0; }
.circle { display: block; width: 200px; height: 200px; margin: 0; padding: 20px; border-radius: 50%; background-color: #0067b1; background: linear-gradient(45deg, #0067b1 0%, #82c17a 100%); }
.circle span { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; padding: 0; border-radius: 50%; background-color: #fff; color: #173557; transition: all 250ms ease-in-out; }
.circle:hover span { background-color: transparent; color: #fff; }
/* Farbanpassungen */
.circle#frontend_link_etch_ash { background: linear-gradient(90deg, #2172b2 0%, #5394af 100%); }
.circle#frontend_link_wet_processing { background: #82c17a; }
.circle#frontend_link_deposition { background: linear-gradient(45deg, #5a9aad 0%, #9aca90 100%); }
.circle#frontend_link_cmp { background: linear-gradient(135deg, #0067b1 0%, #2d79bd 100%); }
.circle#frontend_link_litho { background: #0067b1; }
/* frontend_processes */
#frontend_processes { position: relative; top: 0; left: 0; width: 100%; max-width: 1000px; height: auto; padding: 100% 0 0 0; margin: 0;
background-image: url(s002_kompetenzbereich_kreis.png); background-position: top center; background-repeat: no-repeat; background-size: contain; }
#frontend_processes .circle { width: 24%; height: 24%; padding: 2%; }
#frontend_processes a { display: block; font-size: 25px; line-height: 40px; font-weight: bold; color: #173557; text-decoration: none; }
#frontend_processes a:hover { color: #0067b1; }
#frontend_link_etch_ash, #frontend_link_wet_processing, #frontend_link_deposition, #frontend_link_cmp, #frontend_link_litho,
#frontend_link_metrology, #frontend_link_refurbishments, #frontend_link_automation { position: absolute; }
#frontend_link_etch_ash { top: 0; left: 38%; }
#frontend_link_wet_processing { top: 26.3%; left: 74.1%; }
#frontend_link_deposition { top: 68.7%; left: 60.3%; }
#frontend_link_cmp { top: 68.7%; left: 15.7%; }
#frontend_link_litho { top: 26.3%; left: 1.9%; }
/* nur Textlinks, mitten im Kreis */
#frontend_link_metrology,
#frontend_link_refurbishments,
#frontend_link_automation { top: 50%; left: 28%; width: 44%; height: auto; line-height: 50px; padding: 0; border-bottom: 1px solid #999; text-align: center; white-space: nowrap; }
#frontend_link_metrology { margin-top: -75px; }
#frontend_link_refurbishments { margin-top: -25px; }
#frontend_link_automation { margin-top: 25px; border-bottom: none; }
/* Sonderfall: Punkt "Deposition" mit Unterpunkten */
#frontend_linkbox_deposition { display: none; position: absolute; top: 68.7%; left: 88%; width: 15%; padding: 0; margin: 0; z-index: 10; text-align: left; }
#frontend_linkbox_deposition.active { display: block; }
#frontend_link_cvd, #frontend_link_pvd, #frontend_link_ald, #frontend_link_diffusion, #frontend_link_plating { padding: 5px 0; border-bottom: 1px solid #999; }
#frontend_link_plating { border-bottom: none; }
@media all and (max-width:980px) {
#frontend_processes a { font-size: 21px; line-height: 30px; }
}
@media all and (max-width:768px) {
#frontend_processes_grid { display: block; }
#frontend_processes_info_boxen { padding: 0 5px; }
#frontend_processes a { font-size: 18px; line-height: 25px; }
}
@media all and (max-width:480px) {
#frontend_link_metrology { margin-top: -50px; }
#frontend_link_automation { margin-top: 20px; }
#frontend_processes a { font-size: 16px; line-height: 20px; }
#frontend_processes a#frontend_link_refurbishments { white-space: normal; }
#frontend_processes a#frontend_link_refurbishments span { display: block; white-space: nowrap; }
#frontend_linkbox_deposition { display: none; position: absolute; top: auto; bottom: -30px; left: auto; right: 0; width: auto; background-color: #fff; padding: 0 5px; }
}
/* ---------------------------------------------------------------------------------- */
/* CSS-Anpassungen fuer die Seite 15 */
#backend_processes { position: relative; top: 0; left: 0; width: 100%; margin: 0; padding: 0; z-index: 1; }
#backend_processes_linie { position: absolute; top: 55px; left: 0; width: 100%; height: 10px; padding: 0; margin: 0; z-index: 1; background: linear-gradient(90deg, #0067b1 0%, #82c17a 100%); }
#backend_processes_kreise { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-content: stretch;
position: relative; top: 0; left: 0; width: 100%; margin: 0; padding: 0; z-index: 10;
}
#backend_processes_kreisbox { position: relative; top: 0; left: 0; width: 18%; margin: 0; padding: 0; z-index: 20; }
#backend_processes_kreise a.circle { display: block; width: 120px; height: 120px; padding: 10px; margin: 0 auto 20px auto; font-size: 20px; line-height: 30px; font-weight: bold; color: #173557; text-decoration: none; }
#backend_processes_kreise a.circle:hover { color: #0067b1; text-decoration: none; }
/* Farbanpassungen */
.circle#backend_link_tsv { background: linear-gradient(90deg, #0067b1 0%, #2c6fb2 100%); }
.circle#backend_link_wafer_thinning { background: linear-gradient(90deg, #2172b2 0%, #357eb2 100%); }
.circle#backend_link_bumping { background: linear-gradient(90deg, #3b82b2 0%, #5193af 100%); }
.circle#backend_link_dicing { background: linear-gradient(90deg, #5898ae 0%, #72aba6 100%); }
.circle#backend_link_assembly { background: linear-gradient(90deg, #79b0a3 0%, #82c17a 100%); }
.backend_processes_linkbox { display: none; }
.backend_processes_linkbox.active { display: block; margin: 0 0 10px 0; text-align: center; }
.backend_processes_linkbox a { display: block; padding: 5px 0; color: #0067b1; text-decoration: none; border-bottom: 1px solid #999; }
.backend_processes_linkbox a:hover { color: #173557; text-decoration: none; font-weight: bold; }
.backend_processes_linkbox a.no_border { border-bottom: none; }
@media all and (max-width:980px) {
#backend_processes_linie { top: 46px; height: 8px; }
#backend_processes_kreise a.circle { display: block; width: 100px; height: 100px; padding: 10px; margin: 0 auto 20px auto; font-size: 18px; line-height: 25px; font-weight: bold; color: #173557; text-decoration: none; }
.backend_processes_linkbox a { font-size: 18px; line-height: 25px; }
}
@media all and (max-width:768px) {
#backend_processes_grid { display: block; }
#backend_processes_info_boxen { padding: 0 5px; }
#backend_processes_linie { display: none; }
#backend_processes_kreise { flex-wrap: wrap; justify-content: center; margin: 0 0 40px 0; }
.backend_processes_kreisbox { margin: 0 10px; }
#backend_processes_kreise a.circle { margin: 0 auto 10px auto; }
}
/* CSS-Anpassungen fuer die Seite 8 */
.select-wrapper { display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; }
.select-wrapper::before {
color: #f00;
font-size: 20px;
pointer-events: none;
position: absolute;
right: 15px;
top: 10px;
}
.select-wrapper select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
width: 300px; height: 40px; margin: 0; padding: 5px 10px;
border: 1px solid #173557; border-radius: 10px;
cursor: pointer;
outline: none;
font-size: 20px; line-height: 30px;
color: #173557; background-color: #fff;
background-image: url(select_arrow_down.png); background-position: center right; background-repeat: no-repeat; background-size: contain;
}
.select-wrapper select option {
color: #173557;
}
.select-wrapper select option:hover {
background-color: #173557;
color: #fff;
}
.select-wrapper select option:focus{
background-color: #173557;
color: #fff;
}
.select-wrapper select option:active{
background-color: #173557;
color: #fff;
}
.select-wrapper select::-ms-expand {
display: none;
}
.select-wrapper select:focus::-ms-value {
background-color: #173557; color: #fff;
}
.contact_country_grid {
clear: both;
display: none;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
width: 95%; margin: 0 0 40px 2.5%;
justify-content: flex-start;
align-items: stretch;
}
.contact_country_grid.active { display: grid; }
.contact_country_left { grid-area: 1 / 1 / 2 / 2; }
.contact_country_right { grid-area: 1 / 2 / 2 / 3; }
.contact_country_left,
.contact_country_right { padding: 40px 40px 20px 40px; color: #fff; }
.contact_country_left { background-color: #173557; }
.contact_country_right { background-color: #82c17a; background: linear-gradient(90deg, #82c17a 0%, #0067b1 100%); }
.contact_country_grid h2 { color: #fff; }
.contact_country_grid h3 { color: #fff; }
.contact_country_grid a { font-size: 30px; line-height: 40px; color: #fff; text-decoration: none; }
.contact_country_grid a:hover { color: #fff; text-decoration: underline; }
@media all and (max-width:768px) {
.contact_country_grid.active { display: block; }
.contact_country_left,
.contact_country_right { padding: 30px 20px 10px 20px; color: #fff; }
.contact_country_grid a { font-size: 24px; line-height: 34px; }
}
/* ------ */
.bildergalerie_masonry { clear: both; display: block; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2.5%; column-count: 3; column-gap: 20px; }
.bildergalerie_masonry a {
float: none; display: inline-block; width: 100%; margin: 0 0 20px 0; padding: 0; box-shadow: 0 0 2px 0 #333; }
@media screen and (max-width:768px){
.bildergalerie_masonry { column-count: 2; }
}
@media screen and (max-width:480px){
.bildergalerie_masonry { column-count: 1; column-gap: 0; }
}
/* ------ */
#merkzettel_box_template {
clear: both;
display: block;
width: 100%; margin: 50px 0 20px 0; padding: 10px 10px 10px 20px; text-align: left;
border: 1px solid #173557; border-radius: 10px; background-color: #f9f9f9;
background-image: url('icon_notepad.png');
background-size: contain;
background-repeat: no-repeat;
background-position: right center;
}
#merkzettel_box_template_headline { margin: 0; }
#merkzettel_box_template_anzahl { margin: 0 0 5px 0; }
.product_h1 { font-size: 30px; line-height: 40px; }
.product_detail_grid {
display: grid;
grid-template-columns: 120px 1fr; /* Sieben gleich große Spalten */
grid-gap: 0; /* Abstand zwischen den Zellen */
width: 100%; /* Passt das Grid an die Breite des Containers an */
margin: 0 0 20px 0;
}
.product_detail_grid_row {
display: contents; /* Inhaltselemente übernehmen das Layout, das Elternteil wirkt nicht als Block */
}
.product_detail_grid_row span {
margin: 0 0 10px 0;
}
.filter_flex {
clear: both;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
width: 100%; margin: 0 0 20px 0; padding: 0;
}
.filter_box {
display: block;
width: 30%; margin: 0 0 2.5% 2.5%; padding: 0;
}
.filter_headline { display: block; margin: 0 0 5px 0; font-weight: bold; }
.filter_box select {
width: 100%; margin: 0 0 5px 0; padding: 5px 10px;
border: 1px solid #173557; border-radius: 10px;
font-size: 16px; line-height: 20px;
box-shadow: none;
appearance: none; /* Entfernen der Standard-Stile des Select-Feldes */
-webkit-appearance: none; /* Für Safari */
-moz-appearance: none; /* Für Firefox */
background: url('data:image/svg+xml;utf8,
') no-repeat right 10px center;
background-color: #fff; /* Hintergrundfarbe */
background-size: 20px; /* Größe des Pfeils */
}
.filter_box select:focus {
border-color: #82c17a;
box-shadow: none;
outline: none;
}
/* CSS Grid Layout */
#product_gallery_grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 0; /* Abstand zwischen den Zellen */
width: 95%; /* Passt das Grid an die Breite des Containers an */
margin: 0 2.5% 20px 2.5%;
}
.grid-row {
display: contents; /* Inhaltselemente übernehmen das Layout, das Elternteil wirkt nicht als Block */
}
.grid-row.hidden { display: none; }
.header, .cell {
padding: 10px;
border: 1px solid #ccc;
word-wrap: break-word; /* Erzwingt den Zeilenumbruch bei langen Wörtern */
background-color: #fafafa;
}
.header {
font-weight: bold;
background-color: #f0f0f0;
}
/* Platzierung der Elemente im Grid */
.cell_1 { grid-column-start: 1; }
.cell_2 { grid-column-start: 2; }
.cell_3 { grid-column-start: 3; }
.cell_4 { grid-column-start: 4; }
.cell_5 { grid-column-start: 5; }
.cell_6 { grid-column-start: 6; }
.moq_text { font-size: 14px; line-height: 20px; color: #999; }
.moq_error { display: block; margin: 10px 0 0 0; padding: 5px 10px; color: #fff; background-color: #900; font-size: 16px; line-height: 24px; text-align: center; }
.moq_error_product_detail { display: block; margin: 0 0 20px 0; padding: 10px 20px; color: #fff; background-color: #900; }
.header_count { font-size: 12px; line-height: 30px; text-align: center; }
/* Responsive Anpassungen */
@media (max-width: 980px) {
#product_gallery_grid {
display: block;
}
.grid-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto; /* Automatische Zeilenhöhe */
grid-gap: 0; /* Abstand zwischen den Zellen */
width: 100%; /* Passt das Grid an die Breite des Containers an */
margin: 0 0 40px 0;
}
.header { display: none; }
/* Erste Zeile: Zwei Zellen */
.cell_1 {
grid-column: 1 / 2;
grid-row: 1 / 2; /* Erste Zeile */
}
.cell_3 {
grid-column: 2 / 4;
grid-row: 1 / 2; /* Erste Zeile */
}
/* Zweite Zeile: Eine Zelle */
.cell_2 {
grid-column: 1 / 4;
grid-row: 2 / 3; /* zweite Zeile */
}
/* Dritte Zeile: drei Zellen */
.cell_4, .cell_5, .cell_6 { grid-row: 3 / 4; }
.cell_4 {
grid-column: 1 / 2;
}
.cell_5 {
grid-column: 2 / 3;
}
.cell_6 {
grid-column: 3 / 4;
}
}
.link_as_button.merkzettel_add:hover { background-color: #0067b1; color: #fff; }
.merkzettel_add.on_merkzettel { background-color: #82c17a; color: #fff; animation: fadeAnimation 2s ease-in-out forwards; }
.merkzettel_add.on_merkzettel::after { content: '\2713'; /* Unicode für Häkchen */ display: inline-block; margin: 0 0 0 10px; }
@keyframes fadeAnimation {
0% {
opacity: 1;
}
25% {
opacity: 0.5;
}
50% {
opacity: 1;
}
75% {
opacity: 0.75;
}
100% {
opacity: 1;
}
}
#product_formular input.product_anzahl { display: inline-block; width: 45px; margin: 0 5px 0 0; padding: 2px 5px; border-radius: 5px; background-color: #fff; color: #173557; text-decoration: none; font-size: 18px; line-height: 26px; text-align: center; border: 1px solid #173557; }
#product_formular .button_anzahl_plus,
#product_formular .button_anzahl_minus { width: 30px; margin: 0 5px 0 0; padding: 3px 5px; padding: 2px 5px; border-radius: 5px; text-align: center; border: 1px solid #fff; }
#product_formular .cell_quantity { width: 180px; }
@media all and (max-width:768px) {
#product_formular th { display: none; }
#product_formular td { display: block; }
#product_formular tr.tr_not_mobile,
#product_formular td.td_not_mobile { display: none; }
#product_formular td.right { text-align: left; }
#product_formular .product_row { display: block; margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid #999; }
#product_formular .product_row .cell_quantity { width: auto; min-width: 180px; }
#product_formular .product_row td span::before,
#product_formular .notepad_total td span::before {
content: attr(data-mobile-text) ":"; /* Setzt den Text aus dem data-Attribut */
display: inline-block;
margin: 0 10px 0 0;
font-weight: bold;
}
}
/* ------ */
/* --- Responsive Webdesign --- */
@media all and (max-width:980px) {
.box_width_1_4 { width: 46.25%; }
}
@media all and (max-width:768px) {
h1, .like_h1 { font-size: 32px; line-height: 42px; }
h2, .like_h2 { font-size: 26px; line-height: 36px; }
h3, .like_h3 { font-size: 21px; line-height: 30px; }
.text_like_h2,
.box_text_like_h2 p { font-size: 24px; line-height: 34px; }
.outer_box { clear: both; float: none; width: auto; margin: 0 2.5% 20px 2.5%; }
.outer_box_header { margin-bottom: 10px; }
.text_bild .flLeft,
.text_bild .flRight { float: none; width: auto; max-width: none; margin: 0 0 15px 0; }
.zweispalter { background-image: none; }
.zweispalter .flLeft { float: none; width: auto; margin: 0 0 15px 0; }
.zweispalter .flRight { float: none; width: auto; margin: 0; }
#footer_slogan { font-size: 2.4em; margin: 0 0 20px 0; }
#footer_contact_headline { font-size: 1.4em; }
}
@media all and (max-width:480px) {
.outer_box { clear: both; float: none; width: auto; margin: 0 10px 20px 10px; }
}
/* ----------------------------------------------------------------------------------
yform
---------------------------------------------------------------------------------- */
.yform div.alert { padding: 15px 30px 5px 30px; margin-bottom: 20px; border-radius: 4px; }
.yform div.alert span { margin-right: 15px; }
.yform div.alert-danger { border: 2px solid #a94442; background-color: #f2dede; color: #a94442; }
.yform .formcom_auth_form_info { list-style-type: none; padding-left: 0; margin-bottom: 50px; }
.yform .alert > p { margin-top: 10px; margin-bottom: 10px; }
.yform { display: block; width: 100%; }
.yform form { display: block; margin: 0 0 20px 0; padding: 0; }
.yform label { display: block; float: left; width: 150px; margin: 0 0 5px 0; padding: 0; font-family: inherit; font-size: 20px; line-height: 30px; color: #000; }
.yform form.hide-label label { display: none; }
.yform .form-group { clear: both; display: block; }
.yform .form-control {
display: block; width: 100%; height: auto; margin: 0 0 20px 0; padding: 5px 10px;
font-family: inherit; font-size: 20px; line-height: 30px; color: #173557;
border: 1px solid #173557; box-shadow: none; background: #fff; border-radius: 10px;
}
.yform .form-control:hover { border-color: #82c17a; }
.yform .form-control:focus { border-color: #82c17a; outline: none; box-shadow: none; }
.yform textarea.form-control { max-height: 190px; }
input[type="radio"], input[type="checkbox"] { display: inline-block; margin: 0 5px 10px 0; }
.yform .radio,
.yform .checkbox { display: inline-block; margin: 0 20px 0 0; padding: 0; }
.yform .radio label,
.yform .checkbox label { display: inline-block; float: none; width: auto; margin: 0; padding: 5px 0; }
.yform .formular_headline { clear: both; display: block; margin: 0 0 10px 150px; }
.yform .yform_headline_h3,
.yform .div_checkboxen_headline { clear: both; display: block; margin: 0 0 10px 0; font-weight: 700; }
/* Button */
.yform .btn-primary {
clear: both; display: block;
width: auto; height: auto;
margin: 0 0 10px 0; padding: 10px 30px; border-radius: 10px;
border: none; background-color: #82c17a;
font-weight: bold; text-align: center; color: #fff;
}
.yform .btn-primary:hover { color: #fff; background-color: #173557; }
.yform p { color: #000; }
.yform .pflichtfelder { font-size: 0.8em; }
/* Honeypot gegen SPAM */
.honeypot_box div.form-group { display: block; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; }
.honeypot_box div.form-group.has-error { display: block; width: auto; height: auto; margin: 0 0 20px 0; padding: 20px 20px 1px 20px; border: 1px solid #a94442; opacity: 1; background-color: #f0f0f0; color: #a94442; }
.honeypot_box div.form-group label { float: none; display: block !important; width: 100%; margin-bottom: 10px !important; }
.honeypot_box div.form-group .form-control { width: 100%; margin: 0 0 20px 0; }
/* weitere Anpassungen */
.yform .has-error label { color: #c00 !important; }
.yform .formcheckbox label { display: block; float: none; width: 100%; margin: 0 0 10px 0; padding: 0; }
/* eigene CSS Klassen */
.form_clear { clear: both; }
.form_left,
.form_right { display: block; float: left; width: 49%; margin: 0; padding: 0; }
.form_left { clear: both; }
.form_right { float: right; }
.form-check-group label { display: inline-block; float: none; width: auto; }
.form-check-group label.control-label { display: none; }
/* Kontakt Formular */
.yform #your_request_box,
.yform #manufacturer_customer_box { margin: 0 0 20px 0; }
.yform #your_request_box .checkbox { display: inline-block; width: 48%; margin: 0; padding: 0; }
.yform #your_request_box .checkbox label { padding: 0; }
.yform #manufacturer_customer_box .radio { display: inline-block; width: 48%; margin: 0; padding: 0; }
.yform #manufacturer_customer_box .radio label { display: inline-block; width: 90%; margin: 0; padding: 3px 20px; border-radius: 10px; background-color: #fff; border: 1px solid #173557; color: #173557; text-decoration: none; font-size: 20px; line-height: 26px; cursor: pointer; }
.yform #manufacturer_customer_box .radio label input { display: none; }
.yform #manufacturer_customer_box .radio label:has(input:checked) { background-color: #173557; border: 1px solid #173557; color: #fff; }
/*
.yform #manufacturer_customer_box .radio.active label { background-color: #173557; border: 1px solid #173557; color: #fff; }
*/
/* Upload Feld */
.upload_felder .upload_box { display: block; position: relative; top: 0; left: 0; margin: 0 0 20px 0; padding: 0; cursor: pointer; }
/* den "Durchsuchen" Button ausblenden */
.upload_felder .upload_box input[type="file"]::file-selector-button {
width: 1px; margin: 0; padding: 0; opacity: 0; overflow: hidden;
}
.upload_felder .form-group { display: block; margin: 0; }
.upload_felder .input-group .form-control { margin: 0 0 5px 0; padding: 0; border: none; background-color: transparent; }
.upload_felder span.input-group-btn { display: block; margin: 0; padding: 5px 10px; border-radius: 0 10px 10px 0; }
.upload_felder span.input-group-btn button.btn-default { background-color: transparent;
margin: 0 10px 0 0; padding: 5px 10px; border-radius: 5px; background-color: #173557; color: #fff; text-decoration: none; font-size: 15px; line-height: 25px; border: none; cursor: pointer; }
.upload_felder span.input-group-btn button.btn-default:hover { background-color: #82c17a; color: #fff; text-decoration: none; }
.upload_felder span.input-group-btn button.btn-default::after { display: inline-block; content: 'Datei löschen'; margin: 0 0 0 5px; }
.upload_felder label.control-label { display: block; margin: 0 0 10px 0; }
.upload_felder span.input-group-btn { display: none; }
.upload_felder span.input-group-btn.show { display: block; }
#online_application .upload_felder label { max-height: 42px; }
#online_application .upload_felder .input-group input { }
#online_application .upload_felder .input-group { border-radius: 0 10px 10px 0; border: 1px solid #173557; border: none; background-position: top right; background-image: url(icon_upload.png); background-repeat: no-repeat; }
#online_application .upload_felder .form-group:focus-within .input-group { border: none; }
#online_application .upload_felder div.checkbox { display: block; width: 100%; }
#online_application .upload_felder div.checkbox label { display: block; width: 100%; background-color: #fff; color: #173557; border: none; }
/*
#online_application .upload_felder div.checkbox label { display: block; position: absolute; top: 0; left: 20%; width: 80%; height: auto; margin: 0; padding: 5px 10px; border-radius: 0; background-color: transparent; }
*/
/* ---------------------- */
#apply_own_initiative { border: 1px solid #999; padding: 40px 40px 20px 40px; background-image: url(bg_apply_own_initiative.jpg); background-position: bottom right; background-repeat: no-repeat; background-size: cover; border-radius: 20px; box-shadow: 5px 5px 10px 0 #555; }
#apply_own_initiative .yform .form-group { clear: both; display: block; margin: 0 0 20px 0; }
#apply_own_initiative .yform label { float: none; display: block; width: auto; height: auto; margin: 0 0 10px 0; padding: 0; }
#apply_own_initiative .yform .form-control {
display: block; width: 100%; min-width: 240px; height: auto; margin: 0; padding: 5px 10px; border: 1px solid #173557; }
#apply_own_initiative .yform .form-control:hover { border: 1px solid #82c17a; }
#apply_own_initiative .yform .form-control:focus { border: 1px solid #82c17a; }
#apply_own_initiative .yform .form-group:hover label { color: #82c17a; }
#apply_own_initiative .yform .form-group:focus-within label { color: #82c17a; }
/* ---------------------- */
#online_application .yform .form-group { clear: both;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: center;
margin: 0 0 20px 0;
}
#online_application .yform label { float: none; display: block; width: 20%; min-width: 140px; height: auto; margin: 0; padding: 5px 5px 5px 10px; font-family: inherit; color: #fff; background-color: #173557; border-radius: 10px 0 0 10px; border: 1px solid #173557; }
#online_application .yform .form-control {
display: block; width: 80%; height: auto; margin: 0; padding: 5px 10px; border-radius: 0 10px 10px 0; border: 1px solid #173557; }
#online_application textarea { background-image: url(bg_your_message.jpg); background-position: bottom right; background-repeat: no-repeat; background-size: cover; }
#online_application .yform .input-group { width: 80%; }
#online_application .yform .input-group .form-control { width: 100%; }
#online_application .yform .input_half_size label { width: 40%; }
#online_application .yform .input_half_size .form-control { width: 60%; }
#online_application .yform .form-control:hover { border: 1px solid #82c17a; }
#online_application .yform .form-control:focus { border: 1px solid #82c17a; }
#online_application .yform .form-group:hover label { background-color: #82c17a; border: 1px solid #82c17a; }
#online_application .yform .form-group:focus-within label { background-color: #82c17a; border: 1px solid #82c17a; }
/* ---------------------- */
/* Datenschutz Checkbox + Text */
#apply_own_initiative #yform-apply_own_initiative_form-datenschutz label,
#online_application #yform-online_application_form-datenschutz label { display: block; position: relative; width: auto; height: auto; background-color: transparent; color: #173557; border: none; }
/* Seite 68 - Jobs mit 2 Formularen */
#page_68 .form_not_submitted .yform div.alert-danger { display: none; }
#page_68 .form_submitted .yform div.alert-danger { display: block; }
#page_68 .form_not_submitted .yform .has-error label { color: #fff; }
#page_68 .form_submitted .yform .has-error label { color: #c00; }
@media all and (max-width:980px) {
}
@media all and (max-width:768px) {
.form_left,
.form_right { float: none; width: auto; }
.yform label,
.yform .form-control { font-size: 16px; line-height: 25px; }
#apply_own_initiative { padding: 20px 20px 1px 20px; border-radius: 15px; }
#online_application .yform .input_half_size label { width: 20%; }
#online_application .yform .input_half_size .form-control { width: 80%; }
#online_application .yform label { min-width: 120px; }
#online_application .upload_felder label { max-height: 37px; }
}
/* ------ wow Effekte ------ */
.wow {
animation-delay: 0.5s;
animation-duration:2s;
animation-fill-mode:both;
}
.wow.hide { visibility: hidden; }
.wow.animate { visibility: visible; }
.dealy_img2 { animation-delay: 1.25s; }
@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
.wow.animate.effect_fadeIn{animation-name:fadeIn}
@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}
.wow.animate.effect_fadeInDown{animation-name:fadeInDown}
@keyframes rollInLeft{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}
.wow.animate.effect_rollInLeft{animation-name:rollInLeft}
@keyframes rollInRight{0%{opacity:0;transform:translate3d(100%,0,0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}
.wow.animate.effect_rollInRight{animation-name:rollInRight}
@keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}
.wow.animate.effect_zoomIn{animation-name:zoomIn}
@keyframes zoomInDown{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}
.wow.animate.effect_zoomInDown{animation-name:zoomInDown}
@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}
.wow.animate.effect_zoomInLeft{animation-name:zoomInLeft}
@keyframes zoomInRight{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}
.wow.animate.effect_zoomInRight{animation-name:zoomInRight}
@keyframes zoomInUp{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}
.wow.animate.effect_zoomInUp{animation-name:zoomInUp}
@keyframes slideInDown{0%{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translateZ(0)}}
.wow.animate.effect_slideInDown{animation-name:slideInDown}
@keyframes slideInLeft{0%{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translateZ(0)}}
.wow.animate.effect_slideInLeft{animation-name:slideInLeft}
@keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateZ(0)}}
.wow.animate.effect_slideInRight{animation-name:slideInRight}
@keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}
.wow.animate.effect_slideInUp{animation-name:slideInUp}