:host, :root{ --fa-style-family-classic:"Font Awesome 6 Free"; --fa-font-regular:normal 400 1em/1em "Font Awesome 6 Free" } /* roboto-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('/fileadmin/template.v1/_fonts/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url('/fileadmin/template.v1/_fonts/roboto-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-900 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto'; font-style: normal; font-weight: 900; src: url('/fileadmin/template.v1/_fonts/roboto-v30-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } @font-face { font-family:'Font Awesome 6 Free'; font-display:block; font-weight:900; src: url("/fileadmin/template.v1/_fonts/fa-solid-900.woff2") format("woff2"); } @font-face { font-family:'Font Awesome 6 Brands'; font-display:block; font-weight:400; src: url("/fileadmin/template.v1/_fonts/fa-brands-400.woff2") format("woff2"); } /***************************************/ /**** COLOR ****/ /***************************************/ :root { /*Standard*/ --white:rgb(255,255,255); --black:rgb(0,0,0); /*Highlight*/ --hblue:rgb(0,112,208); --hyellow:rgb(253,214,0); --red:rgb(245,0,45); /*Primary*/ --gray:rgb(112,112,112); --blue:rgb(0,46,109); --yellow:rgb(247,166,0); --text:rgb(70,90,100); /*Secondary*/ --sgray:rgb(210,215,220); --sblue:rgb(0,26,60); /*Gradiant*/ --sblueblue:linear-gradient(180deg, rgb(0,26,60) 0%, rgb(0,46,109) 100%); } /***************************************/ /**** Definitions ****/ /***************************************/ .svg-white { fill:var(--white); } .svg-white-stroke { fill:none; stroke:var(--white); stroke-width:10px; } .svg-yellow { fill:var(--yellow); } .svg-black { fill:var(--black); } /***************************************/ /**** BASE ****/ /***************************************/ :focus { outline:none; box-shadow:none; } * { padding:0; margin:0; border:0 none; } img { display:block; width:100%; height:auto; } a img { border:0 none; } .clear { clear:both; float:none; width:100%; height:0; margin:-1px 0; padding:0; font:normal 1px/1px sans-serif; } .frame-type-div { clear:both; width:100%; max-width:1280px; height:19px; margin:20px auto 30px auto; } hr { background:transparent; margin:0; border-top:1px solid var(--sgray); padding:0 0 8px 0; } html { width:100%; height:100%; margin:0; padding:0; } body { width:100%; margin:0; padding:0; background:var(--sblue); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .ovh { overflow:hidden; position:relative; } #canvas { position:relative; z-index:3; width:100%; min-height:100vh; margin:0 auto; padding:0; text-align:left; } #header, #section { width:100%; margin:0; min-height:100px; text-align:left; position:relative; z-index:3; } #section { padding-top:155px; overflow:hidden; } #header { padding:0; } footer { width:100%; margin:0; min-height:100px; text-align:left; position:relative; z-index:3; border-top:1px solid var(--white); background-color:var(--blue); } .content { width:100%; min-height:100px; margin:0 auto; text-align:left; position:relative; padding:60px 0; } #pid1 .content { padding:125px 0; } .content-inner-wrap { width:calc(100% - 40px); max-width:1320px; padding:0 20px; margin:0 auto; float:none; clear:both; text-align:left; font-size:0; } .content-wide .content-inner-wrap { max-width:inherit; } .content.color-blue { background:left bottom url('/fileadmin/user_upload/backgrounds/raster.png') no-repeat var(--blue); } .content.color-gradient { background:center center no-repeat; background-size:contain; background-image:url('/fileadmin/user_upload/backgrounds/weltkarte.svg'),var(--sblueblue); } .content.color-white { background-color:var(--white); } footer .upper-footer { width:100%; height:130px; } footer .lower-footer { width:100%; height:auto; background-color:var(--sblue); } footer .lower-footer .frame.frame-type-text .inner-frame { width:100%; max-width:initial; } footer p { padding:10px 0; color:var(--white); font:400 .825rem/1em "Roboto", sans-serif; float:right; text-align:right; } /***************************************/ /**** Structure ****/ /***************************************/ #headerbar { display:block; position:fixed; top:45px; left:0; z-index:5; width:100vw; height:110px; font-size:1rem; transition:all .2s ease-out; pointer-events:none; background-color:var(--blue); } .headerbar-inner { width:calc(100% - 80px); padding:0 40px; max-width:1280px; margin:0 auto; } #logo { display:block; float:left; width:140px; height:50px; position:relative; margin-top:28px; padding:0; transition:all .2s ease-out; pointer-events:all; } .ovh #logo , .scrolled #logo { margin-top:15px; } #logo svg.std { display:block; width:100%; height:auto; position:absolute; left:0; top:0; transition:opacity .2s linear; } #logo svg.sld { display:block; width:auto; height:100%; position:absolute; left:0; top:0; transition:opacity .2s linear; } #logo .std, .ovh #logo .sld, .scrolled #logo .sld { opacity:1; } #logo .sld, .ovh #logo .std, .scrolled #logo .std { opacity:0; } footer #logo { margin-top:40px !important; margin-left:20px; } #topbar { position:fixed; height:45px; width:100%; left:0; right:0; top:0; background-color:var(--sblue); z-index:6; transition:all .2s ease-out; } .ovh #topbar, .scrolled #topbar { top:-45px; } .frame { display:block; padding:20px; height:auto; margin:0; width:calc(100% - 40px); font-size:1rem; vertical-align:top; text-align:left; } #header .frame { position:relative; width:100%; padding:0; height:auto; } #pid1 #header .frame { height:calc(100vh * 0.8 - 155px); overflow:hidden; } .content-wide .frame { width:calc(100% - 40px); max-width:1280px; margin:0 auto; } #header .frame .herotext { display:block; position:absolute; top:50%; left:0; right:0; width:calc(100% - 80px); max-width:1280px; margin:0 auto; transform:translateY(-50%); } .content-bg { position:absolute; width:100%; height:100%; background-size:cover; background-position:center top; top:0; z-index:-1; } #headerslider { position:absolute; left:0; top:0; z-index:-1; width:100%; } .frame .ce-textpic .ce-bodytext { padding-bottom:40px; } .frame.frame-csc-col-width-25 { float:left; width:calc(25% - 40px); } .frame.frame-csc-col-width-33 { float:left; width:calc(33.333333% - 40px); margin:0; } .frame.frame-csc-col-width-50 { float:left; width:calc(50% - 40px); } .frame.frame-csc-col-width-66 { float:left; width:calc(66.666666% - 40px); } .frame.frame-csc-col-width-75 { float:left; width:calc(75% - 40px); } .frame-space-before-extra-small { padding-top:0px; } .frame-space-after-extra-small { padding-bottom:0px; } .frame-space-before-small { padding-top:40px; } .frame-space-after-small { padding-bottom:40px; } .frame-space-before-medium { padding-top:75px; } .frame-space-after-medium { padding-bottom:75px; } .frame-space-before-large { padding-top:100px; } .frame-space-after-large { padding-bottom:100px; } .frame-space-before-extra-large { padding-top:140px; } .frame-space-after-extra-large { padding-bottom:140px; } .frame-space-after-overflow { margin-bottom:-250px; } .frame.frame-type-text .inner-frame { /*width:66.666%;*/ max-width:860px; } /*.frame.frame-type-div hr { display:none; }*/ #hahn-line { display:block; position:absolute; bottom:40px; right:0; width:100%; height:auto; z-index:3; overflow:visible; opacity:0; transform:rotate(180deg); } #topbar .topbar-inner { width:calc(100% - 80px); max-width:1280px; margin:0 auto; } #topbar .searchbox { display:block; position:relative; float:right; overflow:hidden; width:30px; transition:all .2s ease-out; height:45px; margin-left:30px; } #topbar .searchbox::before { display:block; position:absolute; left:0; top:0; content:"\f002"; font:900 1rem/45px "Font Awesome 6 Free"; color:var(--sgray); width:30px; cursor:pointer; } #topbar .searchbox:hover:before { color:var(--white); } #topbar .searchbox .inner-search { display:block; margin-left:30px; opacity:0; white-space:nowrap; } #topbar .searchbox.active { width:305px; } #topbar .searchbox.active:before { opacity:0; } #topbar .searchbox.active .inner-search { opacity:1; margin-left:0; text-align:right; } #topbar .searchbox .close { display:block; position:absolute; left:0; top:0; font:900 1.25rem/45px "Font Awesome 6 Free"; color:var(--white); width:20px; height:45px; cursor:pointer; opacity:0; text-align:left; } #topbar .searchbox .close::before { content:"\f00d"; } #topbar .searchbox.active .close { opacity:1; } #topbar .searchbox input[type="text"] { border:1px solid var(--white); color:var(--white); background:transparent; height:20px; padding:5px; font:400 1em/20px "Roboto", sans-serif; margin-top:6px; } #topbar .searchbox input[type="submit"] { border:0 none; color:var(--sblue); background:var(--white); height:32px; padding:5px 10px; font:500 1em/22px "Roboto", sans-serif; margin-top:6px; cursor:pointer; } #topbar .searchbox input[type="submit"]:hover { background:var(--yellow); } #topbar .searchbox label { display:none; } /***************************************/ /**** Menu ****/ /***************************************/ .homebutton { display:block; float:right; width:20px; height:20px; } .homebutton svg { display:block; width:100%; height:auto; } #menu { font-size:0; width:calc(100% - 140px); float:left; height:110px; padding:0; transition:all .2s ease-out; } #menu ul, #menu li { display:block; } #menu a { text-decoration:none; display:inline-block; color:var(--white); font:500 1.125rem/110px "Roboto", sans-serif; } /*#menu li a:after { display:block; position:absolute; bottom:40px; left:0; right:0; margin:0 auto; width:0; height:1px; pointer-events:none; content:''; transition:all .2s ease-out; }*/ #menu a:hover, #menu a.active, #menu .activesub a { color:var(--yellow); } /*#menu li:hover a:after, #menu .activesub a:after , #menu a.active:after { width:100%; border-bottom:1px solid var(--yellow); } #menu .pos-1 a.active:after { width:0; border-bottom:0 none; } #menu li.pos-1:hover a.active:after { width:100%; border-bottom:1px solid var(--yellow); } #menu .men-level-2-wrap li a:after { content:none; display:none; }*/ #menu .men-level-1-wrap { float:right; pointer-events:all; } #menu li.men-level-1-item { display:inline-block; padding:0; overflow:visible; } #menu li.men-level-1-item a { margin:0 18px; position:relative; z-index:2; } #menu li.men-level-2-item a { margin:0; } #menu .menu-title { display:none; } #menu .men-pos-wrap-li { display:inline-block; position:relative; } #menu .men-level-2-wrap .men-inner-wrap { display:block; width:calc(100% - 80px); max-width:1280px; margin:0 auto; } #menu .men-level-2-wrap { display:block; position:absolute; z-index:0; top:0; left:0; width:100vw; height:calc(100vh - 155px); pointer-events:none; opacity:0; padding:0; background:var(--sblue); transition:top 0.2s ease, opacity 0.2s ease, left 0.5s ease; } #menu .men-level-2-wrap .men-inner-wrap .title { display:inline-block; font:500 1.125rem/1.125em "Roboto", sans-serif; color:var(--yellow); vertical-align:top; padding:105px 2em 0 0;} #menu .men-level-2-wrap .men-inner-wrap ul { display:inline-block; vertical-align:top; padding:100px 0 0; } #menu .pos-1 a { display:block; width:20px; height:20px; margin-bottom:-.15em !important; content:url('data:image/svg+xml; utf8, '); } #menu .pos-1 a:hover, #menu .pos-1 a.active, #pid1 #menu .pos-1 a { content:url('data:image/svg+xml; utf8, '); } #menu .pos-2.activesub .men-level-2-wrap, #menu .pos-3.activesub .men-level-2-wrap, #menu .pos-4.activesub .men-level-2-wrap, #menu .pos-5.activesub .men-level-2-wrap, #menu .pos-6.activesub .men-level-2-wrap, #menu .pos-7.activesub .men-level-2-wrap, #menu .pos-8.activesub .men-level-2-wrap, #menu .pos-2 .men-level-2-wrap { left:0; } #menu .pos-3 .men-level-2-wrap, #menu .pos-4 .men-level-2-wrap, #menu .pos-5 .men-level-2-wrap, #menu .pos-6 .men-level-2-wrap, #menu .pos-7 .men-level-2-wrap, #menu .pos-8 .men-level-2-wrap { left:100%; } #menu .pos-2.inactivesub .men-level-2-wrap, #menu .pos-3.inactivesub .men-level-2-wrap, #menu .pos-4.inactivesub .men-level-2-wrap, #menu .pos-5.inactivesub .men-level-2-wrap, #menu .pos-6.inactivesub .men-level-2-wrap, #menu .pos-7.inactivesub .men-level-2-wrap, #menu .pos-8.inactivesub .men-level-2-wrap { left:-100% } #menu.showsub .men-level-2-wrap { top:110px; opacity:1; pointer-events:all; } #menu li.men-level-1-item.pos-8 a { margin:0 0 0 18px; } #menu .men-item.pos-8 a { display:inline-block; position:relative; border-radius:54px; background:transparent; color:var(--yellow); line-height:1em; padding:10px 20px 10px 20px; transition:all 0.3s ease; font:400 1.125rem/1em "Roboto", sans-serif; text-decoration:none!important; border:0.125em solid var(--yellow); } #menu .men-item.pos-8 a:hover { color:var(--sblue); background-color:var(--yellow); } .ovh #menu .men-item.pos-8 a, .scrolled #menu .men-item.pos-8 a { line-height:inherit; } #menu .men-level-1-wrap li.men-level-2-item a { display:block; padding:5px 20px; font-weight:400; color:var(--white); font-size:1.125rem; line-height:1.125em; white-space:nowrap; margin:0; } #menu .men-level-1-wrap li.men-level-2-item a:hover, #menu .men-level-1-wrap li.men-level-2-item a.active { border-bottom:0 none; color:var(--yellow); } #menu .spacer-line { display:block; height:1px; width:calc(100% - 40px); margin:5px 20px; border-bottom:1px solid var(--green); } #menu .pos-1 a:before { display:block; position:absolute; left:0; top:0; width:50px; height:50px; } #menu .men-level-1-item:last-of-type ul { left:auto; right:22px; } .ovh #headerbar, .scrolled #headerbar { top:0; height:80px; } .scrolled #menu { height:80px; } .scrolled #menu a { line-height:80px; } .scrolled #menu .men-level-2-wrap { height:calc(100vh - 80px); } .scrolled #menu.showsub .men-level-2-wrap { top:80px; } .scrolled #menu li a:after { bottom:25px; } #menu .men-button { display:block; position:absolute; right:0; top:0; transform:translateY(-50%); height:50px; width:50px; padding:0; border:0 none; z-index:10; cursor:pointer; pointer-events:none; box-sizing:content-box; opacity:0; background:transparent; } #menu .menu-text { display:none; } #menu .menu-icon { display:block; padding:0; margin:0; } #menu .menu-icon-line { display:block; height:2px; width:50%; margin:4px auto; background:var(--white); transition:all .35s cubic-bezier(.5,.25,.5,1); } #menu .menu-icon-wrap { display:block; } #menu .men-button .menu-text { display:none; } #menu.showsub .men-button { opacity:1; top:200px; pointer-events:all; } #menu.showsub .menu-icon-line-top { transform:translate(0,6px) rotate(-45deg); } #menu.showsub .menu-icon-line-middle { opacity:0; } #menu.showsub .menu-icon-line-bottom { transform:translate(0,-6px) rotate(-135deg); } /**** TOPLINKS ****/ .men-main .toplinks .content-inner-wrap { display:block; position:absolute; top:0; right:0; width:calc(33.333% - 40px); padding-left:40px; border-left:2px solid var(--gray); background:var(--sblue); } .men-main .button-outer-wrap, .men-main .toplinks { display:block; position:absolute; left:0; right:0; top:0; margin:0 auto; width:100%; max-width:1280px; pointer-events:none; opacity:0; transition:all .2s ease; } .men-main.showsub .toplinks { top:200px; pointer-events:all; opacity:1; } .men-main.showsub .button-outer-wrap { opacity:1; } .scrolled .men-main.showsub .toplinks { top:170px; } #menu .toplinks a { display:inline; line-height:1.333em; font-weight:400; } .men-main .toplinks .news-list-view .frame { width:calc(100% - 40px); padding-top:5px; } .men-main .toplinks .news-list-view .news-list-date { padding:15px 0 0; } .men-main .toplinks .news-list-view .teaser-desc { display:none; } #menu .toplinks .news-list-view a { color:var(--yellow); } .no-news-found { font:400 1rem/24px "Roboto", sans-serif; } /**** META ****/ #menu .men-meta-wrap { display:block; position:fixed; top:0; left:0; right:0; margin:0 auto; width:calc(100% - 40px); max-width:1320px; height:40px; opacity:0; pointer-events:none; transition:all .3s ease; } #menu .men-meta-wrap a { line-height:40px; } #menu.showsub .men-meta-wrap { top:calc(100vh - 80px); opacity:1; pointer-events:all; } #menu .men-meta-wrap li a:after { display:none; content:none; } footer .men-meta-wrap { display:block; position:absolute; top:60px; left:0; right:0; margin:0 auto; max-width:1320px; padding:0 20px; height:40px; transition:all .3s ease; text-align:right; } #menu .men-meta-wrap li.men-item, .men-meta-wrap li.men-item { display:inline-block; padding:0; overflow:visible; } footer .men-meta-wrap li.men-item { border-left:1px solid var(--white); } footer .men-meta-wrap li.men-item:first-child { border-left:0 none; } .men-meta-wrap li.men-item a { display:inline-block; margin:0 18px; position:relative; z-index:2; text-decoration:none; color:var(--white); font:400 .825rem/24px "Roboto", sans-serif; } .men-meta-wrap li.men-item a:hover { color:var(--yellow); } /**** LANGUAGE ****/ #lang { float:right; position:relative; width:140px; height:44px; overflow:hidden; } #lang svg { position:absolute; left:5px; top:12px; width:20px; height:20px; z-index:5; } #lang ul { position:relative; display: block; list-style: none; padding:44px 10px 10px 40px; transition: all 0.35s ease; } #lang li { display: block; text-align: center; padding:10px 5px; background:var(--sblue); } #lang li a { display:block; font:400 .9rem/28px "Roboto", sans-serif; color:var(--sgray); text-decoration:none; } #lang li.active { position:absolute; top:0; } #lang li:before { display: none; } #lang:hover { height:auto; } /*#lang { display:block; position:relative; height:45px; float:right; padding-left:25px; width:100px; overflow:hidden; background:transparent; } #lang:hover { overflow:visible; } #lang svg { position:absolute; left:0; top:50%; transform:translateY(-50%); display:block; width:20px; height:auto; } #lang li { display:block; position:absolute; padding:0 .75em; width:calc(100% - 2.5em); height:auto; z-index:0; background:var(--sblue); font:400 .9rem/45px "Roboto", sans-serif; } #lang li a { color:var(--sgray); text-decoration:none; } #lang li.active { z-index:2; } #lang li.active a { pointer-events:none; } #lang:hover li { position:static; } #lang:hover li a:hover { color:var(--yellow); }*/ /**** SOCIAL ****/ .men-social-wrap { display:block; font-size:1rem; padding-top:10px; float:right; } .men-social-wrap .men-item { display:inline-block; width:1.5em; height:1.25em; font:400 1.25em/1em "Font Awesome 6 Brands"; } .men-social-wrap .men-item a { display:block; position:relative; overflow:hidden; width:100%; height:100%; text-indent:10000px; cursor:pointer; } .men-social-wrap .men-item:before, .men-social-wrap .men-item:after { display:none; content:none; } .men-social-wrap .men-item a[href*="facebook.com"]:after{ display:block; position:absolute; color:var(--sgray); text-indent:0; top:.15em; left:0; content:'\f09a'; } .men-social-wrap .men-item a[href*="instagram"]:after { display:block; position:absolute; color:var(--sgray); text-indent:0; top:.15em; left:0; content:'\f16d'; } .men-social-wrap .men-item a[href*="linkedin"]:after { display:block; position:absolute; color:var(--sgray); text-indent:0; top:.15em; left:0; content:'\f08c'; } .men-social-wrap .men-item a[href*="youtube"]:after { display:block; position:absolute; color:var(--sgray); text-indent:0; top:.15em; left:0; content:'\f167'; } .men-social-wrap .men-item a:hover:after { color:var(--white); } /**** BROTKRUMEN ****/ #breadcrumb { width:calc(100% - 40px); padding:20px; } #breadcrumb ul { display:block; width:calc(100% - 40px); padding:10px 20px 0 20px; margin:0 auto; max-width:1280px; font-size:0; } #breadcrumb ul li { display:inline-block; vertical-align:top; } #breadcrumb ul .b-sep { display:inline-block; vertical-align:top; padding:0 15px; } #breadcrumb ul .b-sep:before { display:block; content:"\f105"; font:900 0.875rem/1.25em "Font Awesome 6 Free"; color:var(--sgray); } #breadcrumb ul li:first-of-type a { font-size:0; } #breadcrumb ul li:first-of-type a:before { display:inline-block; vertical-align:top; width:15px; height:15px; content:url('data:image/svg+xml; utf8, '); } #breadcrumb ul li a { display:inline-block; font:400 0.875rem/1.25em "Roboto", sans-serif; color:var(--sgray); text-decoration:none; } #breadcrumb ul li a:hover, #breadcrumb .current a { color:var(--white); } .standard-white #breadcrumb ul li a { color:var(--text); } .standard-white #breadcrumb ul .b-sep:before { color:var(--text); } .standard-white #breadcrumb { background:var(--white); } .standard-white .inner-section { background:var(--white); } .standard-white .inner-section *{ color:var(--text); } .standard-white .inner-section h1 { color:var(--yellow); } .standard-white .inner-section h2 { color:var(--blue); } /***************************************/ /**** Text ****/ /***************************************/ .standard-white .frame-layout-140 h1, .standard-white .frame-layout-140 h2, .standard-white .frame-layout-140 h3, .standard-white .frame-layout-140 h4, .standard-white .frame-layout-140 h5, .standard-white .frame-layout-140 .subheader, .standard-white .frame-layout-140 *, .standard-white .frame-layout-180 h1, .standard-white .frame-layout-180 h2, .standard-white .frame-layout-180 h3, .standard-white .frame-layout-180 h4, .standard-white .frame-layout-180 h5, .standard-white .frame-layout-180 .subheader, .standard-white .frame-layout-180 *, .frame.frame-layout-145 *, .frame * { color:var(--white); } .frame-layout-140 *, .frame-layout-180 *, .content.color-white .frame *:not(.d-hl) { color:var(--text); } .frame-layout-140 h1, .frame-layout-140 h2, .frame-layout-140 h3, .frame-layout-140 h4, .frame-layout-140 h5, .frame-layout-140 .subheader, .frame.frame-layout-145 h1, .frame.frame-layout-145 h2, .frame.frame-layout-145 h3, .frame.frame-layout-145 h4, .frame.frame-layout-145 h5, .frame.frame-layout-145 .subheader, .frame-layout-180 h1, .frame-layout-180 h2, .frame-layout-180 h3, .frame-layout-180 h4, .frame-layout-180 h5, .frame-layout-180 .subheader, .content.color-white .frame h1, .content.color-white .frame h2, .content.color-white .frame h3, .content.color-white .frame h4, .content.color-white .frame h5, .content.color-white .frame h6, .content.color-white .frame .subheader { color:var(--blue); } h1 { display:block; font:900 3.75em/1.083em "Roboto", sans-serif; margin-bottom:.5em; margin-left:-.04em; } h2 { display:block; font:900 2.8125em/1.111em "Roboto", sans-serif; margin-bottom:.5em; margin-left:-.03em; } h3 { display:block; font:900 1.625em/1.308em "Roboto", sans-serif; margin-bottom:.5em; margin-left:-.015em; } h4 { display:block; font:900 1.375em/1.364em "Roboto", sans-serif; margin-bottom:.5em; margin-left:-.015em; } h5 { display:block; font:900 1.25em/1.4em "Roboto", sans-serif; margin-bottom:.5em; } h6, .subheader { display:block; font:400 1.25em/1.4em "Roboto", sans-serif; margin-top:-.5em; margin-bottom:.5em; } p { display:block; font:400 1.125em/1.333em "Roboto", sans-serif; margin:0 0 .5em; text-rendering:optimizelegibility; } .frame p a { text-decoration:underline; color:var(--yellow); } p a:hover .color, p a:hover { text-decoration:underline; } p b, p strong { font-weight:900; } .align-center { text-align:center; } .align-right { text-align:right; } p a .color, p .color { color:var(--yellow); } sup { display:inline-block; font-size:.625em; line-height:0; vertical-align:super; } sub { display:inline-block; font-size:.625em; line-height:0; vertical-align:sub; } .big { font-size:1.25em; } small, .small { font:400 0.875em/1.35em "Roboto", sans-serif; display:inline-block; } .button { display:inline-block; position:relative; border-radius:54px; border:0.125em solid var(--yellow); line-height:1em; padding:15px 40px 15px 40px; text-decoration:none; color:var(--yellow); background:transparent; transition:all 0.3s ease; font:400 1.125rem/1em "Roboto", sans-serif; text-decoration:none!important; } .button:hover { background-color:var(--yellow); text-decoration:none; color:var(--sblue); } p .button { margin-right:1.5em; } .frame a[href*="http"]:not(.share):after { display:inline-block; content:"\f35d"; font:900 1em/1.3em "Font Awesome 6 Free"; font-size:0.75em; vertical-align:super; text-align:right; padding-left:5px; } #header .button { color:var(--sblue); background-color:var(--yellow); border:0 none; } #header .button:hover { color:var(--sblue); background-color:var(--hyellow); border:0 none; } .frame-layout-140 .button, .content.color-white .frame .button { color:var(--white); background-color:var(--blue); border:0 none; } .frame-layout-140 .button:hover, .content.color-white .frame .button:hover { background-color:var(--hblue); color:var(--white); border:0 none; } .frame-layout-145 .button { color:var(--white); background-color:var(--blue); border:0 none; } .frame-layout-145 .button:hover { background-color:var(--hblue); color:var(--white); border:0 none; } .frame ul { display:block; list-style:none outside; margin-bottom:.6em; } .frame ul li { display:block; position:relative; width:calc(100% - .7em); padding:0 0 0 .7em; font:500 1.125em/1.333em "Roboto", sans-serif; margin:0 0 .222em; text-rendering:optimizelegibility; word-wrap:break-word; hyphens:auto; } .frame ul li:before { display:block; position:absolute; top:0; left:0; width:1.3em; height:1.3em; content:"•"; text-align:left; } .frame ol { display:block; list-style:none outside; margin-bottom:.6em; counter-reset:countDoku; } .frame ol li { display:block; position:relative; width:calc(100% - 1.25em); padding:0 0 0 1.25em; font:500 1.125em/1.333em "Roboto", sans-serif; margin:0 0 .222em; text-rendering:optimizelegibility; word-wrap:break-word; hyphens:auto; counter-increment:countDoku; } .frame ol li:before { display:block; position:absolute; top:0; left:0; width:1.3em; height:1.3em; content:counter(countDoku) ")"; text-align:left; } .frame ul.checkmark li { width:calc(100% - 1.5em); padding:0 0 0 1.75em; font-size:1.125em; font-weight:500; /*line-height:1.2em; */} .frame ul.checkmark li:before { content:"\f00c"; font:900 1em/1.3em "Font Awesome 6 Free"; text-align:center; color:var(--yellow); } blockquote { text-align:left; } blockquote * { font-style:italic; } blockquote p { display:inline; } .two-columns { columns:2; } .menu_pages a { text-decoration:none; } /***************************************/ /**** BILDER ****/ /***************************************/ .frame .ce-textpic .ce-gallery[data-ce-columns="1"], .ce-textpic .ce-gallery[data-ce-columns="1"] .ce-column { width:100%; padding:0; margin:0; } .ce-image.ce-above .ce-gallery, .ce-textpic.ce-below .ce-gallery, .ce-textpic.ce-above .ce-gallery { width:calc(100% + 40px); margin:0 0 0 -20px; font-size:0; text-align:left; } .ce-textpic.ce-left.ce-intext .ce-gallery { display:inline-block; vertical-align:top; width:calc(50% - 30px); margin:0; padding-right:30px; padding-top:0; font-size:0; text-align:left; } .ce-textpic.ce-right.ce-intext .ce-gallery { display:inline-block; vertical-align:top; width:calc(50% - 30px); margin:0; padding-left:30px; padding-top:0; font-size:0; text-align:right; } .ce-textpic.ce-left.ce-intext .ce-bodytext { display:inline-block; vertical-align:top; width:calc(50% - 30px); margin:0; padding-left:30px; } .ce-textpic.ce-right.ce-intext .ce-bodytext { display:inline-block; vertical-align:top; width:calc(50% - 30px); margin:0; padding-right:30px; } /*.ce-textpic.ce-left.ce-intext .ce-gallery { width:calc((100% + 40px) / 2); margin:-14px 0 0 -20px; padding-right:20px; font-size:0; text-align:left; float:left; } .ce-textpic.ce-right.ce-intext .ce-gallery { width:calc((100% + 40px) / 2); margin:-14px -20px 0 0; padding-left:20px; font-size:0; text-align:right; float:right; }*/ .content-wide .ce-image.ce-above .ce-gallery { width:100%; margin:0; } .ce-gallery video, .ce-gallery img { width:100%; display:block; height:auto; } .inner-section .ce-gallery img { border-radius:5px; } .ce-gallery .ce-column { margin:0; width:calc(100% - 40px); padding:20px; display:inline-block; vertical-align:top; } .ce-gallery[data-ce-columns="1"] .ce-column { width:calc(100% - 40px); } .ce-gallery[data-ce-columns="2"] .ce-column { width:calc(50% - 40px); } .ce-gallery[data-ce-columns="3"] .ce-column { width:calc(33.333% - 40px); } .ce-gallery[data-ce-columns="4"] .ce-column { width:calc(25% - 40px); } .ce-gallery[data-ce-columns="5"] .ce-column { width:calc(20% - 40px); } .ce-gallery[data-ce-columns="6"] .ce-column { width:calc(16.66666% - 40px); } .ce-gallery[data-ce-columns="7"] .ce-column { width:calc(12.5% - 40px); } .ce-gallery a { display:block; position:relative; overflow:hidden; } .ce-gallery a .icn-plus { display:block; position:absolute; right:10px; bottom:10px; width:30px; height:30px; border-radius:50%; background:var(--green); transition:0.3s all ease; transform-origin:center; } .ce-gallery a .icn-plus::before, .ce-gallery a .icn-plus::after { display:block; position:absolute; content:""; width:2px; height:15px; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--white); } .ce-gallery a .icn-plus::after { width:15px; height:2px; } .ce-gallery a img { transition:0.3s all ease; } .ce-gallery a:hover img { transform:scale(1.05); filter:brightness(110%); } .ce-gallery a:hover .icn-plus { transform:rotate(180deg); } .ce-gallery .ce-column a[href$=".jpg"]:after, .ce-gallery .ce-column a[href$=".png"]:after, .ce-gallery .ce-column a[href$=".gif"]:after { display:block; position:absolute; bottom:20px; right:10px; width:22px; height:2px; content:""; z-index:1; background:var(--white); animation:rotateback .3s ease-out; transition:background .5s linear; } .ce-gallery .ce-column a[href$=".jpg"]:before, .ce-gallery .ce-column a[href$=".png"]:before, .ce-gallery .ce-column a[href$=".gif"]:before { display:block; position:absolute; bottom:10px; right:20px; width:2px; height:22px; content:""; z-index:1; background:var(--white); animation:rotateback .3s ease-out; transition:background .5s linear; } .ce-gallery .ce-column a[href$=".jpg"]:hover:after, .ce-gallery .ce-column a[href$=".png"]:hover:after, .ce-gallery .ce-column a[href$=".gif"]:hover:after { animation:rotate .3s ease-out; background:var(--blue); } .ce-gallery .ce-column a[href$=".jpg"]:hover:before, .ce-gallery .ce-column a[href$=".png"]:hover:before, .ce-gallery .ce-column a[href$=".gif"]:hover:before { animation:rotate .3s ease-out; background:var(--blue); } @keyframes rotate { from { transform:rotate(0deg); } to { transform:rotate(180deg); } } @keyframes rotateback { from { transform:rotate(180deg); } to { transform:rotate(0deg); } } .content .ce-gallery img[src$=".svg"] { display:block; margin:0 auto; width:30%; height:auto; } .ce-gallery .ce-bodytext { font-size:1rem; } .ce-gallery .ce-bodytext p { font-size:1em; } .ce-gallery .ce-bodytext h4 { font-size:1.5em; line-height:1.4em; margin-top:1em; margin-bottom:.25em; } .video-embed iframe { width:100%; border-radius:10px; } /***************************************/ /**** Teaser/Hub Menu ****/ /***************************************/ .menu_pages:after { display:block; width:100%; height:0; content:''; clear:both; } .menu_pages { display:flex; justify-content:left; flex-wrap:wrap; width:calc(100% - 20px); margin:0 10px;} .menu_pages .frame-csc-col-width-33 { display:flex; flex-direction:column; font-size:1rem; padding:10px; width:calc(33.333% - 20px); float:none; } .menu_pages .frame-csc-col-width-33 .inner-frame { display:block; border:1px solid var(--blue); border-radius:10px; padding-bottom:25px; width:calc(100% - 2px); height:100%; overflow:hidden; position:relative;transition:0.3s all ease; } .menu_pages .frame-csc-col-width-33 .teaser-img { display:block; width:100%; height:auto; overflow:hidden; } .menu_pages .frame-csc-col-width-33 .teaser-img img { display:block; width:100%; height:auto; transition:all .2s ease; } .menu_pages .frame-csc-col-width-33 .teaser-content { display:block; width:calc(100% - 50px); padding:25px; } .menu_pages .frame-csc-col-width-33 .teaser-content .teaser-title { display:block; font:900 1.25em/1.4em "Roboto", sans-serif; margin-bottom:.5em; } .menu_pages .frame-csc-col-width-33 .teaser-content .teaser-text, .menu_pages .frame-csc-col-width-33 .teaser-content .teaser-button { display:block; font:400 1.125em/1.333em "Roboto", sans-serif; margin:0 0 .5em; text-rendering:optimizelegibility; word-wrap:break-word; hyphens:auto; } .menu_pages .frame-csc-col-width-33 .teaser-content .teaser-button { color:var(--yellow); position:absolute; bottom:25px; right:25px; width:1.875em; height:1.25em; } .menu_pages .frame-csc-col-width-33 .teaser-content .teaser-button:after { display:inline-block; margin-left:0; content:"\f061"; font:400 1.875em "Font Awesome 6 Free"; transition:0.3s all ease; } .menu_pages .frame-csc-col-width-33 .inner-frame:hover .teaser-content .teaser-button:after { color:var(--hyellow); margin-left:.5em; } .menu_pages .frame-csc-col-width-33 .inner-frame:hover .teaser-img img { transform:scale(1.1); } .menu_pages .frame-csc-col-width-33 .inner-frame:hover { background-color:var(--blue); } /***************************************/ /**** SPECIAL CONTENTS ****/ /***************************************/ #pid1 #fc-1 { height:20vh; background-image:none; padding:0; } #pid1 #fc-1 .menu_pages { display:block; margin:0; width:100%; } .menu_pages .frame-csc-col-width-50 .teaser-content { display:block; height:100%; padding-top:2em; font-size:1em; } .menu_pages .frame-csc-col-width-50 .teaser-content .teaser-title { display:block; font:900 1.25em/1.4em "Roboto", sans-serif; margin-bottom:.5em; } .menu_pages .frame-csc-col-width-50 .teaser-content .teaser-text, .menu_pages .frame-csc-col-width-50 .teaser-content .teaser-button { display:block; font:400 1.125em/1.333em "Roboto", sans-serif; margin:0 0 .5em; text-rendering:optimizelegibility; word-wrap:break-word; hyphens:auto; } .menu_pages .frame-csc-col-width-50 .teaser-content .teaser-button { color:var(--yellow); } .menu_pages .frame-csc-col-width-50 .teaser-content .teaser-button:after { display:inline-block; margin-left:.5em; content:"\f061"; font:400 1em "Font Awesome 6 Free"; transition:0.3s all ease; } .menu_pages .frame-csc-col-width-50 a:hover .teaser-content .teaser-button { color:var(--hyellow); } .menu_pages .frame-csc-col-width-50 a:hover .teaser-content .teaser-button:after { color:var(--hyellow); margin-left:0.5em; } .frame-layout-120 { display:block; } .frame-layout-120 .inner-frame:not(.inner-frame .inner-frame .inner-frame) { display:block; border-top:1px solid var(--white); border-bottom:1px solid var(--white); height:535px; overflow:hidden; } .frame-layout-120 .frame { width:100% !important; padding:0; height:535px !important; } .frame-layout-120 .frame .inner-frame { position:absolute; top:50%; left:0; width:90%; transform:translateY(-50%); } .frame-layout-120 .frame .ce-gallery[data-ce-columns="1"] .ce-column img { margin-left:0; } .frame-layout-120 .frame .ce-gallery[data-ce-columns="1"] .ce-column { margin:0; } .frame-layout-120 .frame .ce-gallery img { display:block; margin:20px; width:95px; height:auto; } #pid11 .frame-layout-120 .frame .ce-gallery img { width:75%; } .frame-layout-120 .frame .ce-gallery img { border-radius:0; } .frame-layout-120 .slick-dots { right:0; bottom:50%; text-align:right; width:20px; transform:translateY(50%); } .frame-layout-120 .slick-dots li:before { content:none; display:none; } .frame-layout-120 .slick-dots li button:before { width:100%; height:100%; content:''; width:1em; height:1em; border:1px solid var(--white); border-radius:50%; opacity:1 !important; transition:all .2s linear; } .frame-layout-120 .slick-dots li.slick-active button:before { background:var(--white); } .frame-layout-130 { width:100%; padding:0; } .frame-layout-130:after { display:block; width:100%; height:0; clear:both; content:''; } .frame-layout-130 .frame { float:left; } .frame-layout-130 .frame.frame-type-text .inner-frame { width:100%; } .frame-layout-130 .frame:first-of-type { width:calc(66.666% - 40px); } .frame-layout-130 .frame:first-of-type .inner-frame { width:80%; } .frame-layout-130 .frame:last-of-type { width:calc(33.333% - 40px); } .frame-layout-160 { width:100%; padding:0; } .frame-layout-160:after { display:block; width:100%; height:0; clear:both; content:''; } .frame-layout-160 .frame { float:right; width:calc(66.666% - 40px); } .frame-layout-160 .frame.frame-type-text .inner-frame { width:100%; } .frame-layout-160 .frame:first-of-type { width:calc(33.333% - 40px); float:left; } #pid5 .frame-layout-160:after, #pid24 .frame-layout-160:after { display:block; width:calc(100% - 40px); margin:20px auto; height:0; border-top:1px solid var(--text); content:''; } #pid5 .frame-type-header + .frame-layout-160:before, #pid24 .frame-type-header + .frame-layout-160:before { display:block; width:calc(100% - 40px); margin:20px auto; height:0; border-top:1px solid var(--text); content:''; } #pid5 .frame-layout-160 .frame-layout-0:not(.frame-layout-170 .frame-layout-0) strong:before, #pid24 .frame-layout-160 .frame-layout-0:not(.frame-layout-170 .frame-layout-0) strong:before { display:inline-block; width:.8em; height:.8em; margin-right:.25em; content:''; background-color:var(--yellow); border-radius:50%; } .frame-layout-170 { width:100%; padding:0; } .frame-layout-170:after { display:block; width:100%; height:0; clear:both; content:''; } .frame-layout-170 .frame { float:left; } .frame-layout-170 .frame.frame-type-text .inner-frame { width:100%; } .frame-layout-170 .frame:first-of-type, .frame-layout-170 .frame:last-of-type { width:calc(50% - 40.5px); } #pid5 .frame-layout-170:before, #pid24 .frame-layout-170:before { display:block; content:''; width:calc(100% - 40px); margin:0 auto; height:0; border-top:1px solid var(--text); } #pid5 .frame-layout-170:nth-of-type(2):before, #pid24 .frame-layout-170:nth-of-type(2):before { display:none; content:none; } /***************************************/ /**** RFID ****/ /***************************************/ .gwrapper { display:grid; grid-template-columns:repeat(12, 1fr); grid-template-rows:repeat(1, 1fr); gap:16px; width:100%; } .gwrapper .gwrapper { display:grid; grid-template-columns:repeat(6, 1fr); grid-template-rows:repeat(1, 1fr); gap:16px; width:100%; } .gwrapper .gcframe { grid-column-end:span 12; display:grid; grid-template-columns:repeat(6, 1fr); } .gwrapper .gc1 { box-sizing:border-box; grid-column-end:span 1; grid-row-end:span 1; } .gwrapper .gc2 { box-sizing:border-box; grid-column-end:span 2; grid-row-end:span 1; } .gwrapper .gc3 { box-sizing:border-box; grid-column-end:span 3; grid-row-end:span 1; } .gwrapper .gc4 { box-sizing:border-box; grid-column-end:span 4; grid-row-end:span 1; } .gwrapper .gc6 { box-sizing:border-box; grid-column-end:span 6; grid-row-end:span 1; } .gwrapper .full { box-sizing:border-box; grid-column-end:span 12; grid-row-end:span 1; } .gwrapper .subitem { position:relative; grid-column-end:span 3; } .gwrapper .subitem.subfull { position:relative; grid-column-end:span 6; } .gwrapper .full .subitem.subfull { overflow:scroll; } .tx-aehahn-rfid h3 { color:var(--yellow); } .gwrapper .g-last img { max-width:140px; } .g-center { position:absolute; left:0; top:50%; transform:translateY(-50%); } .tx-aehahn-rfid .gcframe { background-color:var(--blue); border-radius:10px; padding:40px; } .g-table { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr 1fr; grid-auto-flow:row; } .g-box { font:400 1.125em/1.333em "Roboto",sans-serif; padding:5px; min-width:90px; } .g-box.g-head { font-weight:700; } .g-box { border-top: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; } .g-box:nth-child(-n+3) { border-top: 1px solid #dfdfdf; } .g-box:nth-child(odd) { border-left: 1px solid #dfdfdf; } .g-box:nth-child(-n+4) { border-top: none; } .g-box:first-child, .g-box:nth-child(4n+1) { border-left:none; } @media screen and (max-width:1279px){ .gwrapper .subitem:not(.subitem.g-last) { grid-column-end:span 6; } } @media screen and (max-width:1023px){ .gwrapper .gc6 { grid-column-end:span 12; } .gwrapper .subitem { grid-column-end:span 3; } .g-box { font-size:1em; } } @media screen and (max-width:560px){ .gwrapper .full:after { display:block; margin:10px 0 0; auto; grid-column-end:span 6; content:"\f07e"; font:900 1em/1.3em "Font Awesome 6 Free"; text-align:center; color:var(--yellow); } } @media screen and (max-width:479px){ .tx-aehahn-rfid .gcframe { padding:20px; } .gwrapper .g-last img { max-width:100px; } } .frame.frame-layout-145, .frame.frame-layout-140 { position:relative; } .frame.frame-layout-145 .ce-intext .ce-bodytext, .frame.frame-layout-140 .ce-intext .ce-bodytext { position:relative; width:calc(50% - 80px); background-color:var(--white); padding:40px; z-index:1; border-radius:10px; left:50%; top:200px; } .standard-white .frame.frame-layout-140 .ce-intext .ce-bodytext { background-color:var(--blue); } .frame.frame-layout-145 .ce-intext.ce-right .ce-bodytext, .frame.frame-layout-140 .ce-intext.ce-right .ce-bodytext { left:0; right:auto; bottom:initial; } .frame.frame-layout-145 .ce-intext.ce-textpic .ce-gallery, .frame.frame-layout-140 .ce-intext.ce-textpic .ce-gallery { position:absolute; top:100px; width:calc(66.666% - 40px); left:0; padding:0; margin:0; border-radius:10px; } .frame.frame-layout-145 .ce-intext .ce-gallery img, .frame.frame-layout-140 .ce-intext .ce-gallery img { border-radius:10px; } .frame.frame-layout-145 .ce-intext .ce-gallery .ce-column, .frame.frame-layout-140 .ce-intext .ce-gallery .ce-column { width:100%; } .frame.frame-layout-145 .ce-textpic, .frame.frame-layout-140 .ce-textpic { padding-bottom:150px; } .frame.frame-layout-145 .ce-intext.ce-right .ce-gallery, .frame.frame-layout-140 .ce-intext.ce-right .ce-gallery { right:0; left:auto; } .frame.frame-layout-145 .ce-textpic:after, .frame.frame-layout-140 .ce-textpic:after { display:block; width:100%; height:0; clear:both; content:''; } .frame.frame-layout-145 .ce-intext .ce-bodytext { background-color:var(--yellow); } .frame.frame-layout-180 { position:relative; } .frame.frame-type-text.frame-layout-180 .inner-frame { width:calc(760px); background-color:var(--white); padding:40px; z-index:1; border-radius:10px; } .frame.frame-layout-180 .ce-intext .ce-bodytext { width:calc(50% - 80px); background-color:var(--white); padding:40px; z-index:1; border-radius:10px; } .standard-white .frame.frame-type-text.frame-layout-180 .inner-frame, .standard-white .frame.frame-layout-180 .ce-intext .ce-bodytext { background-color:var(--sblue); } /*.frame-layout-140 { position:relative; } .frame-layout-140 .ce-bodytext { position:absolute; left:50%; bottom:50px; width:calc(50% - 100px); background-color:var(--white); padding:40px; z-index:1; border-radius:10px; } .frame-layout-140 .ce-right .ce-bodytext { left:20px; bottom:initial; top:50px; } .frame-layout-140 .ce-gallery { position:relative; width:60%; padding:0; margin:0; border-radius:10px; } .frame-layout-140 .ce-gallery img { border-radius:10px; } .frame-layout-140 .ce-gallery .ce-column { width:100%; } .frame-layout-140 .ce-right .ce-gallery { left:40%; }*/ .frame-layout-150 .ce-textpic.ce-above .ce-gallery img, .frame .ce-gallery .ce-contact img, .frame-layout-150 .ce-image.ce-above .ce-gallery img { width:66.666%; margin:0 auto; } .frame-layout-150 .ce-textpic.ce-left.ce-intext .ce-gallery { width:calc((100% + 60px) / 3); } .frame-layout-150 .ce-textpic.ce-right.ce-intext .ce-gallery { width:calc((100% + 60px) / 3); } /** BLAUER HG + Icon **/ .frame-type-textpic.frame-layout-200 { padding:20px; } .frame-type-textpic.frame-layout-200 .inner-frame { background:var(--blue); padding:20px; border-radius:10px; } .frame-type-textpic.frame-layout-200 .ce-left .ce-gallery { width:calc(20% - 40px); padding:20px 40px 0 0; margin:0; float:none; display:inline-block; /*vertical-align:middle;*/ } .frame-type-textpic.frame-layout-200 .ce-textpic .ce-bodytext { width:calc(80% - 40px); padding:20px; display:inline-block; vertical-align:middle; max-width:740px; } .frame-type-textpic.frame-layout-200 .ce-left .ce-gallery img { width:100%; padding:0; max-width:95px; } /** GRAUER HG **/ .frame-type-textpic.frame-layout-190 .ce-bodytext { background:var(--sgray); padding:40px; border-radius:10px; } .frame-type-textpic.frame-layout-190 .ce-gallery { width:calc(100% + 20px); margin:0 0 0 -10px; } .frame-type-textpic.frame-layout-190 .ce-gallery .ce-column { width:calc(50% - 20px); padding:10px; } /*.frame-type-textpic.frame-layout-190 .ce-bodytext * { color:var(--white); }*/ /* SLIDER - rundes Bild */ .frame-layout-250 picture { display:block; border-radius:50%; overflow:hidden; max-width:320px; } .frame-layout-250 .ce-bodytext { position:relative; padding-top:80px; } .frame-layout-250 .ce-bodytext:before { display:block; position:absolute; left:20px; top:0; content:"“"; font:700 10em/1em "Roboto", sans-serif; color:var(--white); opacity:0.5; } .frame-layout-250 .ce-textpic.ce-left.ce-intext .ce-gallery { width:calc(40% - 30px); } .frame-layout-250 .ce-textpic.ce-left.ce-intext .ce-bodytext { width:calc(60% - 30px); } /* TEASER STYLE PICS */ .frame-layout-110 .ce-gallery .ce-bodytext { font:400 1.125rem/1.333em "Roboto", sans-serif; margin-top:20px; } .frame-layout-110 .ce-gallery .ce-bodytext strong { font:900 1.25rem/1.4em "Roboto", sans-serif; } .frame-layout-110 .ce-gallery .ce-bodytext a { color:var(--yellow); text-decoration:none; } .frame-layout-110 .ce-gallery .ce-bodytext a:after { display:inline-block; margin-left:5px; content:"\f061"; font:400 1em "Font Awesome 6 Free"; transition:0.3s all ease; } .frame-layout-110 .ce-gallery .ce-bodytext a:hover { color:var(--hyellow); } .frame-layout-110 .ce-gallery .ce-bodytext a:hover:after { color:var(--hyellow); margin-left:.5em; } /* UPLOADS */ .frame .ce-uploads li:before { display:none; } .frame .ce-uploads li { width:auto; padding:0; margin:0; } .frame .ce-uploads a:hover span, .frame .ce-uploads a { text-decoration:none; font-weight:400; transition:all 0.25s ease; } .frame .ce-uploads a:hover span, .frame .ce-uploads a:hover { color:var(--yellow); } .frame .ce-uploads .ce-uploads-filesize { padding-left:15px; } .frame .ce-uploads a:before { display:inline-block; width:1.5em; height:1.5em; content:"\f15b"; font:900 1.5rem/1.5em "Font Awesome 6 Free"; text-align:center; } .frame .ce-uploads a[href$=".pdf"]:before { content:"\f1c1"; } #textpicslider { margin-bottom:60px; } #textpicslider .slick-dots { text-align:left; margin-left:15px; } #textpicslider .slick-dots button { background:transparent; overflow:hidden; border:1px solid var(--white); border-radius:50%; width:10px; height:10px; } #textpicslider .slick-dots .slick-active button { background:var(--white); } #textpicslider .slick-dots button:before { display:none; } .slick-slider { touch-action: auto!important; -ms-touch-action: auto!important; } /**** MAP ****/ .map { position:relative; } .map .locations { display:block; position:absolute; top:0; left:0; width:100%; height:100%; } .map .locations .location { display:block; position:absolute; top:0; left:0; width:14px; height:14px; transform:translate(-50%,-50%); background:var(--yellow); border-radius:50%; cursor:pointer; } .map .locations .location .sonar { display:block; position:absolute; z-index:1; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%,-50%); background:var(--yellow); border-radius:50%; opacity:1; pointer-events:none; transition:all 0s normal; } .map .locations .location.ready .sonar { animation:sonar .75s ease-out; } .map .locations .location:hover .sonar { transform:translate(-50%,-50%) scale(3); opacity:0; transition:all .75s ease-out; } @keyframes sonar { from { opacity:1; transform:translate(-50%,-50%); } to { transform:translate(-50%,-50%) scale(3); opacity:0; } } .map .locations .loctitle { display:block; position:absolute; bottom:0; left:50%; pointer-events:none; transform:translateX(-50%) scale(0); color:var(--text); font:400 1.25em/2em "Roboto", sans-serif; padding:.5em 1.5em; border-radius:10px; background:var(--white); transition:all .15s ease-out; white-space:nowrap; } .map .locations .loctitle::after { display:block; content:''; width:1px; height:100px; position:absolute; top:100%; left:50%; background:var(--white); } .map .locations .loctitle a { color:var(--yellow); font:400 1em/2em "Roboto", sans-serif; text-decoration:none; } .map .locations .loctitle a:hover { text-decoration:underline; } .map .locations .location.active .sonar, .map .locations .location.active:hover { background-color:var(--white); } .map .locations .location.active .loctitle { transform:translate(-50%,-110px) scale(1); pointer-events:all; } /**** TIMELINE ****/ /* .history-list:after { display:block; content:''; width:100%; height:0; clear:both; } .history-list .history-list-item { width:calc(25% - 40px); float:left; } .history-list-item .ce-gallery { width:calc(100% + 40px); margin:0 0 0 -20px; font-size:0; text-align:left; } .history-list-item .history-list-header h4 { position:absolute; left:40px; z-index:1; background:var(--white); color:var(--blue); padding:.15em .25em; margin:0; } .history-list button.slick-prev, .history-list button.slick-next { font-size:0; color:transparent; background:transparent; position:absolute; left:50%; } .history-list button.slick-prev:after { display:inline-block; width:1.5em; height:1.5em; content:"\f060"; font:900 1.5rem/1.5em "Font Awesome 6 Free"; text-align:center; transform:translateX(-150%); transition:all 0.35s ease; color:var(--white); border:2px solid var(--white); border-radius:50%; cursor:pointer; } .history-list button.slick-next:after { display:inline-block; width:1.5em; height:1.5em; content:"\f061"; font:900 1.5rem/1.5em "Font Awesome 6 Free"; text-align:center; transform:translateX(50%); transition:all 0.35s ease; color:var(--white); border:2px solid var(--white); border-radius:50%; cursor:pointer; } .history-list button.slick-prev:hover:after, .history-list button.slick-next:hover:after { color:var(--yellow); border-color:var(--yellow); } */ .history-list { display:block; width:auto; height:600px; overflow:hidden; position:relative; } .history-list-title { display:block; position:absolute; z-index:2; left:0; top:0; height:100%; width:50px; background:var(--sblue); } .history-list-title-top { display:block; position:relative; height:calc(50% - 1px); width:100%; border-bottom:2px solid var(--white); } .history-list-title-bottom { display:block; position:relative; height:calc(50% - 1px); width:100%; } .history-list-title-top:after { display:block; width:200px; text-align:center; position:absolute; left:50%; top:50%; content:'Group History'; font:400 1.25rem/20px "Roboto", sans-serif; white-space:nowrap; text-align:center; color:var(--white); transform:rotate(-90deg) translate(0,-100px); } .history-list-title-bottom:after { display:block; width:200px; text-align:center; position:absolute; left:50%; top:50%; content:'Tech History'; font:400 1.25rem/20px "Roboto", sans-serif; white-space:nowrap; text-align:center; color:var(--white); transform:rotate(-90deg) translate(0,-100px); } html[lang="de"] .history-list-title-top:after { content:'HAHN Geschichte'; } html[lang="de"] .history-list-title-bottom:after { content:'HAHN Innovationen'; } .history-list-line { display:block; height:calc(50% - 1px); padding-left:70px; width:21000px; border-bottom:2px solid var(--white); white-space:nowrap; } .history-list-year { display:inline-block; position:relative; height:200%; } .history-list-date { display:inline-block; position:absolute; top:50%; left:0; font:400 1.25rem/2em "Roboto", sans-serif; background:var(--white); color:var(--sblue); padding:0 10px; border-radius:10px; transform:translateY(-50%); } .history-list-item { display:block; float:left; max-width:550px; padding-top:50px; margin-right:85px; margin-left:-35px; margin-top:300px; white-space:normal; height:250px; } .history-list-item:nth-child(2) { margin-left:-35px; } .history-list-item.history-list-bottom + .history-list-item.history-list-top, .history-list-item.history-list-top + .history-list-item.history-list-bottom { margin-left:-400px; } .history-list-item:after { display:block; content:''; width:100%; height:0; clear:both; } .history-list-image { display:block; float:left; width:130px; height:130px; margin-right:20px; border:2px solid var(--white); border-radius:50%; } .history-list-item.history-list-highlight .history-list-image { border-color:var(--yellow); } .history-list-image-inner { display:block; width:calc(100% - 20px); height:calc(100% - 20px); border-radius:50%; margin:10px; background-color:var(--white); } .history-list-image img { display:block; width:100%; height:100%; border-radius:50%; } .history-list-text { display:block; float:left; font:400 1rem/2em "Roboto", sans-serif; width:calc(100% - 154px); color:var(--white); } .history-list-text p { font-size:1em; } .history-list-year:first-child { margin-left:50px; } .history-list-year.last-bottom + .history-list-year.first-top, .history-list-year.last-top + .history-list-year.first-bottom { margin-left:-100px; } /*.history-list-year.first-top .history-list-item,*/ .history-list-item.history-list-top { margin-top:0; } .swipe-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5);z-index:3; pointer-events:none; } .swipe-indicator { position:absolute; top:50%; left:50%; width:100px; height:50px; transform:translate(-50%,-50%); } .swipe-indicator:before { display:block; content:"\e4ba"; width:100%; font:900 2rem/1em "Font Awesome 6 Free"; text-align:center; color:var(--white); } .swipe-indicator:after { display:block; content:"swipe"; width:100%; font:400 1rem/20px "Roboto", sans-serif; text-align:center; color:var(--white); } /**** COUNTER ****/ .counter { width:calc(100% + 24px); margin:0 -12px; padding:0; } .counter:after { display:block; width:100%; height:0; clear:both; content:''; } .counter .counting { display:block; float:left; width:calc(33.333% - 24px); margin:12px; height:100%; position:relative; vertical-align:top; background-color:var(--blue); border-radius:10px; } .counter .counting:before { display:block; content:""; /*margin-top:56.25%;*/ margin-top:75%;} .counter .c-inner { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); text-align:center; width:calc(100% - 40px); } .counter .countup-extra, .counter .countup { display:inline; font:900 2.8125em/1.111em "Roboto", sans-serif; margin-bottom:.5em; } .counter .countup-text { display:inline; font:400 1.125em/1.333em "Roboto", sans-serif; margin:0 0 .5em; } .counter .countup-text { display:block; } .counter .c-icn { display:block; width:95px; margin:0 auto 20px auto; height:auto; } .counting .c-inner:before { position: relative; width: 120px;margin: 0 auto; display: block; padding-bottom: 80px;} /***************************************/ /**** SUCHE ****/ /***************************************/ .tx-indexedsearch-searchbox legend { display:none; } .tx-indexedsearch-form { display:block; font:400 1.125em/1.333em "Roboto", sans-serif; } .tx-indexedsearch-form label { display:block; margin-bottom:0.5em; } .tx-indexedsearch-searchbox-sword { font:400 1.125em/30px "Roboto", sans-serif; color:var(--text); text-indent:5px; } .tx-indexedsearch-search-submit input { display:inline-block; position:relative; border-radius:54px; border:1px solid var(--yellow); padding:15px 40px 15px 40px; text-decoration:none; color:var(--yellow); background:transparent; transition:all 0.3s ease; font:400 1.125rem/1em "Roboto", sans-serif; cursor:pointer; margin-top:20px; } .tx-indexedsearch-search-submit input:hover { background-color:var(--yellow); text-decoration:none; color:var(--sblue); } .tx-indexedsearch-info-sword { font:400 1.125em/30px "Roboto", sans-serif; margin:20px 0 10px 0; } .tx-indexedsearch-info-sword-word { font-weight:700; } .tx-indexedsearch-res hr { margin:20px 0; } /***************************************/ /**** AUTOMOTIVE ****/ /***************************************/ .ha-world { width:100%; max-width:1600px; position:relative; margin:0 auto; top:-50px; } .ha-world .close { display:block; position:absolute; top:15px; right:15px; width:30px; height:30px; cursor:pointer; } .ha-world .close:after, .ha-world .close:before { display:block; content:""; position:absolute; top:0; left:15px; width:1px; height:30px; transform:rotate(45deg); background:var(--white); } .ha-world .close:before { transform:rotate(-45deg); } .world-inner-img img { width:100%; height:auto; display:block; } .world-inner-dots { position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; } .dot .d-icn { display:block; position:relative; left:-10px; top:-10px; width:20px; height:20px; background:var(--yellow); border-radius:50%; } .dot hr { border-top:0 none; border-bottom:1px solid white; margin:9px 0 10px 0; } .dot { position:absolute; width:24px; height:24px; } .world-inner-popup { position:absolute; top:50%; left:50%; width:calc(50% - 80px); padding:40px; background:var(--blue); transform:translate(-50%, -50%); font-size:1rem; z-index:-1; opacity:0; } .world-inner-popup * { color:white; } .world-inner-popup.active { opacity:1; z-index:2; } .world-inner-popup hr { border-bottom:1px solid white; margin:8px 0 20px 0; } .p-text { display:none; } .p-text.active { display:block; } .dot { cursor:pointer; } .d-hl { display:none; position:absolute; z-index:-1; opacity:0; top:-10px; left:0; padding:15px; background:var(--blue); width:200px; transform:translate(-50%,-100%); font:400 1rem/1.25em "Open Sans", Arial, sans-serif; color:white; transition:all 0.25s ease; border-radius:10px; } .d-hl.active { display:block; z-index:1; opacity:1; } .automotive.ha-world { top:auto; } .automotive .dot.d-1 { top:50%; left:50%; } .automotive .dot.d-2 { top:47%; left:44%; } .automotive .dot.d-3 { top:57%; left:30%; } .automotive .dot.d-4 { top:57%; left:40%; } .automotive .dot.d-5 { top:67%; left:26%; } .automotive .dot.d-6 { top:76%; left:29%; } .automotive .dot.d-7 { top:65%; left:36%; } .automotive .dot.d-8 { top:71%; left:42%; } .automotive .dot.d-9 { top:85%; left:44%; } .automotive .dot.d-10 { top:61%; left:58%; } .automotive .dot.d-11 { top:50%; left:63%; } .automotive .dot.d-12 { top:46%; left:58%; } .automotive .dot.d-13 { top:28%; left:75%; } .automotive .dot.d-14 { top:20%; left:56%; } .automotive .dot .d-icn:before { content: ""; position:absolute; display: block; width: 300%; height: 300%; box-sizing: border-box; margin-left: -100%; margin-top: -100%; border-radius: 45px; background-color:var(--yellow); animation:pulse 1.75s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } @keyframes pulse { 0% { transform: scale(0.33); } 80%, 100% { opacity:0; } } /*** AUTOMATIONS LINIE **/ .svgb-1, .svgb-2 { fill: none; stroke: #c6d0d5; stroke-linecap: round; stroke-width: 30px; } .svgb-2 {stroke: var(--blue); } .b-line-wrap { position:relative; padding:100px 0; margin-bottom:40px; max-width:1000px; } .box { position:absolute; left:0; top:47px; width:350px; } .box .b-bg { background:var(--blue); width:200px; height:130px; border-radius:10px; } .box.box-2 { left:60%; } .box.box-3 { left:28%; top:44%; } .box.box-4 { left:60px; top:83.5%; } .box.box-5 { left:65%; top:83.5%; } .content.color-white .box .b-bg .b-text, .box .b-bg .b-text { display:block; text-align:center; font:700 4.5em/1.125em "Roboto", sans-serif; color:var(--white); padding-top:10px; } .content.color-white .box .b-bg .b-text-small, .box .b-bg .b-text-small { font-size:1em; padding:0; } .b-under { position:absolute; left:0; top:100%; padding:20px 0 0; } /***************************************/ /**** FAQ ****/ /***************************************/ .faq-item h3 { margin:0; } .faq-item .question { padding:20px 60px 20px 0; border-top:1px solid var(--blue); width:calc(100% - 60px); position:relative; } .faq-item .question:after { content:""; display:block; position:absolute; right:0; top:20px; content:"\f061"; font:700 1.75em "Font Awesome 6 Free"; transform:rotate(90deg); transition:0.3s all ease; } .faq-item .question.opened:after { transform:rotate(-90deg); } .faq-item .answer { padding:20px 0 40px 0; width:100%; } /***************************************/ /**** GLOSSAR ****/ /***************************************/ .tx-aehahn-glossary .link-list { display:block; margin-bottom:50px; } .tx-aehahn-glossary .link-list li { font:400 1.625em/1.5em "Roboto", sans-serif; display:inline-block; width:3.7037037%; padding:0; } .tx-aehahn-glossary .link-list li a { color:var(--yellow); } .tx-aehahn-glossary .g-anker { display:block; font:700 1.625em/1.5em "Roboto", sans-serif; margin:40px 0 10px 0; } .tx-aehahn-glossary .link-list li:before { display:none; } .tx-aehahn-glossary .n-text { padding-top:20px; } .tx-aehahn-glossary hr { margin:0 0 20px 0; border-color:var(--text); } .tx-aehahn-glossary .glossar-item { font-size:0; display:inline-block; width:50%; vertical-align:top; } .tx-aehahn-glossary .glossar-item a { font:400 1.125rem/1.25em "Roboto", sans-serif; display:block; color:var(--yellow); } .tx-aehahn-glossary .more { padding-right:4px; } @media screen and (max-width:1023px){ .tx-aehahn-glossary .link-list li { width:50px; } } /***************************************/ /**** Usercentrics ****/ /***************************************/ .uc-embedding-container .uc-embedding-more-info { background-color:var(--sgray); color:var(--text); } .uc-embedding-container .description-text { color:var(--text); } /***************************************/ /**** FORMULAR ****/ /***************************************/ .tx-powermail fieldset { margin-left:-20px; width:calc(100% + 40px); } .tx-powermail legend, .tx-powermail h3 { /*display:none;*/ margin-top:.5em; margin-bottom:0; } .tx-powermail label { display:block; font:400 1em/1.5em "Roboto", sans-serif; padding-bottom:.25em; } .tx-powermail .powermail_fieldwrap { display:block; position:relative; float:left; width:calc(50% - 40px); padding:10px 20px; } .tx-powermail .powermail_fieldwrap select, .tx-powermail .powermail_fieldwrap textarea, .tx-powermail .powermail_fieldwrap input[type="email"], .tx-powermail .powermail_fieldwrap input[type="text"] { display:block; width:calc(100% - 22px); padding:0 10px; height:2.5em; font:400 1em/1.5em "Roboto", sans-serif; border:1px solid var(--white); border-radius:10px; background:transparent; color:var(--white); } .tx-powermail .powermail_fieldwrap textarea.powermail_field_error, .tx-powermail .powermail_fieldwrap input[type="email"].powermail_field_error, .tx-powermail .powermail_fieldwrap input[type="text"].powermail_field_error { border-bottom:0 none; border-radius:10px 10px 0 0; } .tx-powermail .powermail_fieldwrap textarea { height:6em; padding:5px 10px; } .tx-powermail .powermail_field { font:400 1em/1.5em "Roboto", sans-serif; color:var(--white); } .tx-powermail .powermail_fieldwrap_type_radio { width:100%; padding:0; } .tx-powermail .powermail_fieldwrap_type_radio .radio { float:left; width:calc(100% - 40px); padding:5px 20px; } /*.tx-powermail .powermail_fieldwrap_type_radio.powermail_fieldwrap_salutation .radio { width:calc(16.666% - 40px); }*/ .tx-powermail .powermail_fieldwrap_type_textarea, .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_submit, .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_check, .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_html, .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_file, .tx-powermail .powermail_fieldwrap_type_text { width:calc(100% - 40px); } .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_radio .powermail_label, .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_check .powermail_label { display:block; clear:both; padding:10px 20px 0; } .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_radio input, .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_check input { display:none; } .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_radio .radio label, .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_check .checkbox label { display:block; position:relative; font:400 1em/1.5em "Roboto", sans-serif; padding:0 0 0 28px; margin:0; } .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_radio .radio input + i { display:block; position:absolute; top:.2em; left:0; content:""; width:1em; height:1em; background:transparent; border:1px solid var(--white); border-radius:50%; transition:all 0.25s ease; } .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_radio .radio input:checked + i { background:var(--yellow); } .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_check .checkbox input + i { display:block; position:absolute; top:.2em; left:0; content:""; width:1em; height:1em; background:center center none no-repeat transparent; border:1px solid var(--white); border-radius:2px; transition:all 0.25s ease; } .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_check .checkbox input:checked + i { display:block; background:center center url('data:image/svg+xml;utf8,') no-repeat; background-size:80%; } .powermail_fieldwrap.powermail_fieldwrap_type_file .powermail_file { border:none; padding:0; } .powermail_fieldwrap.powermail_fieldwrap_type_captcha img { margin-top:20px; max-width:320px; } .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_captcha .powermail-errors-list { max-width:320px; } .tx-powermail .powermail_fieldwrap .powermail-errors-list { list-style:none; background:var(--red); border:1px solid var(--white); border-top:0 none; border-radius:0 0 10px 10px; } .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_radio .powermail-errors-list { border-top:1px solid var(--white); border-radius:10px; } .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_check .powermail-errors-list { border-top:1px solid; border-radius:0 10px 10px 10px; } .tx-powermail .powermail_fieldwrap .powermail-errors-list li { font:500 0.85rem/1.5em "Roboto", sans-serif; padding:5px 10px; color:var(--white); } .tx-powermail .powermail_fieldwrap .powermail-errors-list li:before { display:none; content:none; } .tx-powermail .powermail_fieldwrap input.powermail_submit { display:inline-block; position:relative; border-radius:54px; border:0.125em solid var(--yellow); line-height:1em; padding:15px 40px 15px 40px; text-decoration:none; color:var(--yellow); background:transparent; transition:all 0.3s ease; font:400 1em/1em "Roboto", sans-serif; text-decoration:none!important; cursor:pointer; box-sizing:content-box; } .tx-powermail .powermail_fieldwrap input.powermail_submit:hover { background-color:var(--yellow); text-decoration:none; color:var(--sblue); } .tx-powermail select option { background-color:var(--white); background-image:none !important; } .tx-powermail .powermail_fieldwrap select::-ms-expand { display:none; } /* LP STYLES */ .startseite #fc-1 { height:20vh; min-height:200px; padding:0; background-image:none; } .startseite #breadcrumb { display:none; } .startseite #header .frame { height:calc(100vh* 0.8 - 155px); overflow:hidden; } #pid322 #fc-1 .frame, #pid165 #fc-1 .frame { display:inline-block; width:calc(50% - 40px); } /* DISPLAY + Fakuma (165) */ #pid322 #header .frame, #pid313 #header .frame, #pid165 #header .frame, #pid198 #header .frame { height:calc(100vh* 0.8 - 155px); overflow:hidden; } #pid322 #header .frame-type-text, #pid313 #header .frame-type-text, #pid165 #header .frame-type-text, #pid198 #header .frame-type-text { position:absolute; z-index:1; top:0; left:0; } #pid322 #header .frame-type-text .inner-frame, #pid313 #header .frame-type-text .inner-frame, #pid165 #header .frame-type-text .inner-frame, #pid198 #header .frame-type-text .inner-frame { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:1280px; width:calc(100% - 80px); padding:40px; } #pid322 #header video, #pid313 #header video, #pid165 #header video, #pid198 #header video { position:absolute; left:0; top:50%; transform:translate(0,-50%); width:100%; height:100%; object-fit:cover; } #pid313.startseite #fc-1 { height:initial; } /** CZ **/ #pid166 #fc-4 { padding-bottom:125px; } #pid166 #fc-6 { padding-top:125px; } /***************************************/ /**** RESPONSIVE ****/ /***************************************/ @media screen and (max-width:1599px){ .menu_pages .frame-csc-col-width-50 .teaser-content { padding-top:.5em; } #hahn-line { bottom:30px; } } @media screen and (max-width:1279px){ .menu_pages .frame-csc-col-width-50 .teaser-content { padding-top:0; } .menu_pages .frame-csc-col-width-50 .teaser-content .teaser-title, .menu_pages .frame-csc-col-width-50 .teaser-content .teaser-text, .menu_pages .frame-csc-col-width-50 .teaser-content .teaser-button { margin:0; } .menu_pages .frame-csc-col-width-50 .teaser-content .teaser-text, .menu_pages .frame-csc-col-width-50 .teaser-content .teaser-button, .menu_pages .frame-csc-col-width-33 .teaser-content .teaser-text, .menu_pages .frame-csc-col-width-33 .teaser-content .teaser-button, .counter .countup-text, .frame ul.checkmark li, .frame ul li, .frame ol li, .button, h5, h6, .subheader, p { font-size:1em; } h1 { font-size:3.25em; } .counter .countup-extra, .counter .countup, h2 { font-size:2.5em; } h3 { font-size:1.5em; } .menu_pages .frame-csc-col-width-33 .teaser-content .teaser-title, h4 { font-size:1.125em; } #menu .men-item.pos-8 a, #menu a { font-size:1rem; } #menu li.men-level-1-item a { margin:0 15px; } #menu .men-level-2-wrap .men-inner-wrap .title { padding-top:40px; font-size:1rem; } #menu .men-level-2-wrap .men-inner-wrap ul { padding-top:35px; } #menu .men-level-1-wrap li.men-level-2-item a { font-size:1rem; } #menu.showsub .men-button { top:150px; } .men-main.showsub .toplinks { top:130px; } .men-main .toplinks .ce-gallery .ce-column { padding-top:0; } .scrolled .men-main.showsub .toplinks { top:100px; } #pid1 .content { padding:60px 0; } } /***************************************/ /**** Tablet ****/ /***************************************/ @media screen and (max-width:1023px){ #logo { width:110px; height:30px; } #headerbar { height:90px; } .ovh #headerbar, .scrolled #headerbar { height:60px; } .startseite #header .frame, #pid1 #header .frame { height:calc(100vh * 0.8 - 135px); } #section { padding-top:135px; } .startseite #fc-1 .menu_pages .frame, #pid1 #fc-1 .menu_pages .frame { padding:10px 20px; } .menu_pages .frame-csc-col-width-33 .teaser-content { padding:15px; width:calc(100% - 30px); } .menu_pages .frame-csc-col-width-33 .teaser-content .teaser-button { right:15px; bottom:15px; } .counter .counting { width:calc(50% - 24px); } #menu.showsub .men-button, #menu .men-button { opacity:1; top:45px; right:35px; pointer-events:all; transition:all .2s ease-out; } .ovh #menu.showsub .men-button, .scrolled #menu.showsub .men-button, .ovh #menu .men-button, .scrolled #menu .men-button { top:30px; } .men-main-wrap { opacity:0; pointer-events:none; transition:all .2s ease-out; } .men-main .button-outer-wrap, #menu.active .men-level-1-wrap, .men-main.active .men-main-wrap { opacity:1; pointer-events:all; } .men-main .men-main-wrap { background:var(--blue); width:100vw; height:calc(100vh - 60px); position:absolute; left:0; top:60px; } #menu .pos-1 a:hover, #pid1 #menu .pos-1 a, #menu .pos-1 a { content:none; height:auto; margin-bottom:0 !important; } #menu .pos-8 { margin-top:40px; } #menu .men-level-1-wrap { float:none; padding-left:25px; padding-top:15px; pointer-events:none; } #menu li.men-level-1-item { display:block; } .scrolled #menu a, #menu a { line-height:2em; } .men-main.active .toplinks { top:0; pointer-events:all; opacity:1; } #menu.active .men-meta-wrap { top:calc(100vh - 80px); pointer-events:all; opacity:1; } .men-main .toplinks .content-inner-wrap { background-color:var(--blue); border-color:var(--white); } .scrolled #menu.active.showsub .men-level-2-wrap, #menu.active.showsub .men-level-2-wrap { top:0; background:transparent; } #menu.showsub .men-level-2-wrap:not(#menu.active.showsub .men-level-2-wrap) { opacity:0; pointer-events:none; } #menu.active .men-button { top:30px; pointer-events:all; } #menu.showsub.active .menu-icon-line-top, #menu.active .menu-icon-line-top { transform:translate(0,6px) rotate(-45deg); } #menu.showsub.active .menu-icon-line-middle, #menu.active .menu-icon-line-middle { opacity:0; } #menu.showsub.active .menu-icon-line-bottom, #menu.active .menu-icon-line-bottom { transform:translate(0,-6px) rotate(-135deg); } #menu.showsub .menu-icon-line-top, #menu.showsub .menu-icon-line-bottom { transform:none; } #menu.showsub .menu-icon-line-middle { opacity:1; } #menu .men-level-2-wrap .men-inner-wrap { width:calc(100% - 360px); } #menu .men-level-2-wrap .men-inner-wrap ul { padding-top:15px !important; } #menu .men-level-2-wrap .men-inner-wrap .title { display:none; } #menu .men-level-1-wrap li.men-level-2-item a { padding:0 20px; line-height:2em; } #menu .men-level-2-wrap, #menu .pos-2 .men-level-2-wrap, #menu .pos-2.inactivesub .men-level-2-wrap, #menu .pos-3.inactivesub .men-level-2-wrap, #menu .pos-4.inactivesub .men-level-2-wrap, #menu .pos-5.inactivesub .men-level-2-wrap, #menu .pos-6.inactivesub .men-level-2-wrap, #menu .pos-7.inactivesub .men-level-2-wrap, #menu .pos-8.inactivesub .men-level-2-wrap { left:100%; opacity:0; } #menu .pos-2.activesub .men-level-2-wrap { left:0; opacity:1; } .scrolled .men-main.showsub .toplinks { top:0; } h1 { font-size:2.75em; } .counter .countup-extra, .counter .countup, h2 { font-size:2em; } h3 { font-size:1.375em; } p { word-wrap:break-word; hyphens:auto; } .frame.frame-layout-145 .ce-intext .ce-bodytext, .frame.frame-layout-140 .ce-intext .ce-bodytext { width:calc(66.666% - 80px); left:33.333%; } .frame-layout-130 .frame:first-of-type, .frame-layout-130 .frame:last-of-type { width:calc(50% - 40px); } .ce-gallery .ce-bodytext { font-size:.875rem; } .ce-gallery .ce-bodytext h4 { font-size:1.25em; } .frame-layout-150 .ce-textpic.ce-above .ce-gallery img, .frame-layout-150 .ce-image.ce-above .ce-gallery img { width:85%; } #hahn-line { bottom:20px; width:125%; } .tx-powermail .powermail_fieldwrap select, .tx-powermail .powermail_fieldwrap textarea, .tx-powermail .powermail_fieldwrap input[type="email"], .tx-powermail .powermail_fieldwrap input[type="text"] { font-size:.9em; } #pid1 .content { padding:60px 0; } .frame-space-before-extra-small { padding-top:0; } .frame-space-after-extra-small { padding-bottom:0; } .frame-space-before-small { padding-top:20px; } .frame-space-after-small { padding-bottom:20px; } .frame-space-before-medium { padding-top:35px; } .frame-space-after-medium { padding-bottom:35px; } .frame-space-before-large { padding-top:50px; } .frame-space-after-large { padding-bottom:50px; } .frame-space-before-extra-large { padding-top:70px; } .frame-space-after-extra-large { padding-bottom:70px; } } @media screen and (max-width:799px){ .startseite #fc-1, #pid1 #fc-1 { height:calc((100vh - 135px) * 0.45); } .startseite .frame .ce-textpic .ce-bodytext { padding-bottom:10px; } .startseite #header .frame { height:auto; } #pid1 #header .frame { height:calc((100vh - 135px) * 0.55); } #pid1 #fc-1 .menu_pages { padding:20px 20px; } #pid1 #fc-1 .menu_pages .frame { padding:20px 0; } #pid1 #fc-1 .menu_pages .frame:last-child { border-top:1px solid var(--white); } .frame.frame-csc-col-width-50 { width:calc(100% - 40px); float:none; } .map .locations .location { pointer-events:none; width:12px; height:12px; } .map .locations .location .sonar { border:1px solid var(--white); } .frame-layout-160 .frame:first-child{ width:calc(50% - 40px); } .frame-layout-160 .frame { width:50%; } .frame-layout-160 .frame-layout-170 .frame:first-child, .frame-layout-160 .frame-layout-170 .frame:last-child { width:calc(100% - 40px); } .menu_pages .frame-csc-col-width-33 { width:calc(50% - 20px); } .counter .counting::before { margin-top:100%; } .men-main.active .toplinks { display:none !important; pointer-events:none !important; } #hahn-line { width:150%; } .menu_pages .frame-csc-col-width-50 .teaser-content .teaser-text, .menu_pages .frame-csc-col-width-50 .teaser-content .teaser-button, .menu_pages .frame-csc-col-width-33 .teaser-content .teaser-text, .menu_pages .frame-csc-col-width-33 .teaser-content .teaser-button, .counter .countup-text, .frame ul.checkmark li, .frame ul li, .frame ol li, h5, h6, .subheader, .history-list-text p, p { font-size:.9em; } h1 { font-size:2.5em; } .counter .countup-extra, .counter .countup, h2 { font-size:1.75em; } .history-list { height:auto; overflow:visible; } .history-list-title { display:none; } .history-list-line { width:calc(100% - 42px); white-space:normal; height:auto; padding:0 20px; border-bottom:0 none; border-left:2px solid var(--white); } .history-list-year { height:auto; padding-top:70px; } .history-list-year:first-child, .history-list-year.last-bottom + .history-list-year.first-top, .history-list-year.last-top + .history-list-year.first-bottom { margin-left:0; } .history-list-date { transform:none; border-radius:0 10px 10px 0; left:-20px; top:20px; } .history-list-item { float:none; clear:both; padding-top:10px; padding-bottom:20px; margin:0 !important; height:auto; } .frame.frame-layout-145 .ce-intext.ce-textpic .ce-gallery, .frame.frame-layout-140 .ce-intext.ce-textpic .ce-gallery { position:static; width:100%; } .frame.frame-layout-145 .ce-textpic.ce-left.ce-intext .ce-bodytext, .frame.frame-layout-145 .ce-intext .ce-bodytext, .frame.frame-layout-140 .ce-textpic.ce-left.ce-intext .ce-bodytext, .frame.frame-layout-140 .ce-intext .ce-bodytext { width:calc(100% - 80px); position:static; margin-bottom:0; border-radius:0 0 10px 10px; padding:40px; } .frame.frame-layout-145 .ce-intext.ce-right .ce-bodytext, .frame.frame-layout-145 .ce-intext .ce-gallery img, .frame.frame-layout-140 .ce-intext.ce-right .ce-bodytext, .frame.frame-layout-140 .ce-intext .ce-gallery img { border-radius:10px 10px 0 0; } .frame.frame-layout-145 .ce-intext.ce-right .ce-gallery img, .frame.frame-layout-140 .ce-intext.ce-right .ce-gallery img { border-radius:0 0 10px 10px; } .frame-layout-150 .ce-textpic.ce-left.ce-intext .ce-gallery { width:100%; padding-bottom:20px; } .ce-textpic.ce-left.ce-intext .ce-bodytext { width:100%; padding-left:0; } .frame-type-textpic.frame-layout-200 { padding:10px 20px; } .frame-type-textpic.frame-layout-200 .inner-frame { padding:10px 20px; } .frame-type-textpic.frame-layout-200 .ce-left .ce-gallery { width:calc(25% - 20px); padding:20px 15px 0 5px; } .frame-type-textpic.frame-layout-200 .ce-textpic .ce-bodytext { width:calc(75% - 40px); } .ce-image.ce-above .ce-gallery, .ce-textpic.ce-below .ce-gallery, .ce-textpic.ce-above .ce-gallery { width:calc(100% + 20px); margin:0 0 0 -10px; } .ce-image.ce-above .ce-gallery[data-ce-columns="1"], .ce-textpic.ce-below .ce-gallery[data-ce-columns="1"], .ce-textpic.ce-above .ce-gallery[data-ce-columns="1"], .ce-image.ce-above .ce-gallery[data-ce-columns="2"], .ce-textpic.ce-below .ce-gallery[data-ce-columns="2"], .ce-textpic.ce-above .ce-gallery[data-ce-columns="2"] { width:calc(100% + 40px); margin:0 0 0 -20px; } .ce-gallery .ce-column { padding:10px; } .video-embed iframe { width:calc(100% - 40px); padding:0 20px; } .ce-gallery[data-ce-columns="1"] .ce-column, .ce-gallery[data-ce-columns="2"] .ce-column { padding:20px; } .ce-gallery[data-ce-columns="3"] .ce-column { width:calc(33.333% - 20px); } .ce-gallery[data-ce-columns="4"] .ce-column { width:calc(50% - 20px); } .ce-gallery[data-ce-columns="5"] .ce-column { width:calc(20% - 20px); } .ce-gallery[data-ce-columns="6"] .ce-column { width:calc(16.66666% - 20px); } .ce-gallery[data-ce-columns="7"] .ce-column { width:calc(12.5% - 20px); } .frame-layout-150 .ce-textpic.ce-above .ce-gallery img, .frame-layout-150 .ce-image.ce-above .ce-gallery img { width:70%; } #topbar .searchbox { position:absolute; right:40px; top:0; z-index:5; background:var(--sblue); } .tx-powermail fieldset { margin-left:-10px; width:calc(100% + 20px); } .tx-powermail .powermail_fieldwrap { width:calc(50% - 20px); padding:10px 10px; } .tx-powermail .powermail_fieldwrap_type_textarea, .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_submit, .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_check, .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_html, .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_file, .tx-powermail .powermail_fieldwrap_type_text { width:calc(100% - 20px); } .tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_radio { width:calc(100% + 20px); padding:10px 0; margin:0 -10px; } .men-main.showsub .toplinks { top:0; display:none !important; pointer-events:none !important; } .frame-layout-160 .frame:first-child{ width:calc(100% - 40px); } .frame-layout-160 .frame { width:100%; } .frame-layout-160 .frame:first-of-type { width:calc(100% - 40px); float:left; } .frame-layout-120 .frame .ce-gallery[data-ce-columns="1"] .ce-column img { margin-left:20px; } } /***************************************/ /**** Mobile ****/ /***************************************/ @media screen and (max-width:569px){ #hahn-line { width:175%; } .menu_pages .frame-csc-col-width-33 { width:calc(100% - 20px); } .counter .counting::before { margin-top:125%; } footer .men-meta-wrap { left:initial; right:0; width:50%; top:35px; } #menu .men-meta-wrap li.men-item, .men-meta-wrap li.men-item { display:block; } .men-meta-wrap li.men-item a { line-height:1.35em; margin:0 40px; } #menu .men-meta-wrap li.men-item a { font-size:.8rem; } footer .men-meta-wrap li.men-item { border:0 none; } #menu.active .men-meta-wrap { top:initial; height:auto; bottom:0; left:initial; right:0; text-align:right; } p .button { margin-bottom:1em; } ul.two-columns { columns:1; } .frame-space-before-extra-small { padding-top:0; } .frame-space-after-extra-small { padding-bottom:0; } .frame-space-before-small { padding-top:10px; } .frame-space-after-small { padding-bottom:10px; } .frame-space-before-medium { padding-top:20px; } .frame-space-after-medium { padding-bottom:20px; } .frame-space-before-large { padding-top:30px; } .frame-space-after-large { padding-bottom:30px; } .frame-space-before-extra-large { padding-top:40px; } .frame-space-after-extra-large { padding-bottom:40px; } .frame-layout-130 .frame:first-of-type, .frame-layout-130 .frame:last-of-type { width:calc(100% - 40px); } } @media screen and (max-width:479px){ .ce-gallery .ce-column:not(.frame-layout-140 .ce-gallery .ce-column, .frame-layout-145 .ce-gallery .ce-column, .frame-layout-200 .ce-gallery .ce-column) { width:calc(100% - 20px) !important; } .frame-type-textpic.frame-layout-200 .ce-left .ce-gallery { width:calc(100% - 40px); padding:20px 20px 0; display:block; } .frame-type-textpic.frame-layout-200 .ce-textpic .ce-bodytext { width:calc(100% - 40px); } h1 { font-size:1.8em; } .counter .countup-extra, .counter .countup, h2 { font-size:1.35em; } .menu_pages .frame-csc-col-width-50 .teaser-content .teaser-title, h3 { font-size:1em; } .counter .c-icn { width:70%; } .counter .counting::before { margin-top:130%; } .counter .c-inner { top:20px; transform:translateX(-50%); } #menu .men-level-1-wrap { transition:all .2s ease-out; } #menu.active.showsub .men-level-1-wrap { margin-left:-100%; } #menu .men-level-2-wrap .men-inner-wrap .title { display:block; padding-left:40px; } #menu .men-level-2-wrap .men-inner-wrap { width:calc(100% - 40px); } #menu .men-level-2-wrap { transition:all .2s ease-out; } #menu.active .men-level-1-item .opener:before { display:block; opacity:0; content:"\f104"; font:900 1rem/1.25em "Font Awesome 6 Free"; color:var(--yellow); width:100%; z-index:5; position:absolute; left:120vw; top:40px; transition:all .2s ease-out; } #menu.active .men-level-1-item .opener:after { display:inline; content:"\f105"; font:900 1rem/1.25em "Font Awesome 6 Free"; color:var(--yellow); width:100%; z-index:5; transition:all .2s ease-out; margin-left:-7px; } #menu.active.showsub .men-level-1-item.activesub .opener:before { left:40px; opacity:1; } #menu .men-meta-wrap a { line-height:2em; bottom:20px; } .startseite #header .ce-gallery video, .startseite #header .ce-gallery img, #pid1 #header .ce-gallery video, #pid1 #header .ce-gallery img { width:auto; height:100%; } .startseite #header .ce-gallery video, .startseite #header .ce-gallery img { min-height:400px; } #hahn-line { width:200%; } .content { padding:10px 0; } .frame-space-after-overflow { margin-bottom:20px; } .video-embed iframe { width:calc(100% - 20px); } } @media screen and (max-width:399px){ #topbar .searchbox { right:0; } #topbar .topbar-inner { width:100%; } .men-social-wrap { padding-right:40px; } #lang { float:left; margin-left:20px; } .headerbar-inner { width:calc(100% - 40px); padding:0 20px; } #menu.showsub .men-button, #menu .men-button { right:20px; } #header .frame .herotext { width:calc(100% - 40px); } .content-inner-wrap { width:100%; padding:0; } .counter .counting::before { margin-top:150%; } h1 { font-size:1.6em; } .counter .countup-extra, .counter .countup, h2 { font-size:1.25em; } .men-meta-wrap li.men-item a { margin:0 20px; } #breadcrumb { width:100%; padding:0; } #logo { margin-top:15px; } #headerbar { height:70px; } #menu.showsub .men-button, #menu .men-button { top:35px; } #section { padding-top:115px; } }