/**** BASE *****/
:host,
:root{
--fa-style-family-classic:"Font Awesome 6 Free";
--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"
}
/**** Colors *****/
:root {
--white:rgb(255,255,255);
--red:rgb(211,11,47);
--orange:rgb(250,188,67);
--gray:rgb(74,74,73);
--midgray:rgb(172,172,172);
--lightgray:rgb(232,232,232);
--black:rgb(39,39,39);
--tblack:rgba(39,39,39,0.7);
--twhite:rgba(255,255,255,0.9);
}
/** FONTS **/
/* source-sans-3-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: 'Source Sans 3';
font-style: normal;
font-weight: 400;
src: url('/fileadmin/template.v1/fonts/source-sans-3-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-600 - 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: 'Source Sans 3';
font-style: normal;
font-weight: 600;
src: url('/fileadmin/template.v1/fonts/source-sans-3-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-700 - 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: 'Source Sans 3';
font-style: normal;
font-weight: 700;
src: url('/fileadmin/template.v1/fonts/source-sans-3-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nerko-one-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: 'Nerko One';
font-style: normal;
font-weight: 400;
src: url('/fileadmin/template.v1/fonts/nerko-one-v16-latin-regular.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"), url("/fileadmin/template.v1/fonts/fa-solid-900.ttf") format("truetype");
}
@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"), url("/fileadmin/template.v1/fonts/fa-brands-400.ttf") format("truetype");
}
/**** BASE *****/
@font-face { font-display:auto; }
* { padding:0; margin:0; border:0 none; font-variant-ligatures:none!important; }
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; }
.divider { clear:both; width:100%; max-width:1320px; height:19px; margin:20px auto 30px auto; border-bottom:1px solid var(--dark); }
hr { background:transparent; margin:0; border-top:2px solid var(--midgray); padding:0 0 1em 0; }
sub,
sup { font-size:.625em; line-height:0; }
html { width:100%; height:100%; margin:0; padding:0; }
body { width:100%; margin:0; padding:0; background:var(--white); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-text-size-adjust:none; }
.ovh { overflow:hidden; position:relative; }
#canvas { position:relative; width:100%; min-height:100vh; margin:0 auto; padding:0; text-align:left; }
img { display:block; width:100%; height:auto; }
#header,
#section { width:100%; margin:0 auto; padding:0; min-height:100px; text-align:left; position:relative; overflow:hidden; }
#section.noheader { padding-top:100px; }
#header.big-header { max-height:100vh; height:calc(100vh - 100px); margin-top:100px; }
.content { width:100%; min-height:100px; margin:0 auto; text-align:left; position:relative; }
.content.color-gray { background:var(--gray); }
#fc-7,
.content.color-lightgray { background:var(--lightgray); }
.article,
footer .content-inner-wrap,
.content-standard .content-inner-wrap { width:100%; padding:0; margin:0 auto; float:none; clear:both; text-align:center; font-size:0; }
.article { /*max-width:1320px;*/ display:block; position:relative; z-index:2; vertical-align:top; width:calc(100% - 40px); margin:0 auto; padding:0 20px; }
.content-wide .article { max-width:none; padding:0; width:100%; }
.content-wide .content-inner-wrap { width:100%; padding:0; }
.content-wide .content-inner-wrap .inner-position { width:100%; margin:0 auto; }
.content-wide .frame:not(.frame-type-text,.frame-type-textpic,.frame-type-header) { padding:0; width:100%; max-width:none; }
.content-wide .frame.frame-type-header,
.content-wide .frame.frame-type-text { padding-left:30px; padding-right:30px; width:calc(100% - 60px); }
.frame { position:relative; display:inline-block; padding:30px 10px; height:auto; margin:0; width:calc(100% - 20px); font-size:1rem; vertical-align:top; text-align:left; max-width:1320px; }
.frame-type-html iframe { display:block; max-width:100%; margin:40px auto; }
.frame-type-html { /*max-width:1280px;*/ margin:0 auto; display:block; }
.inner-frame { font-size:1rem; }
.frame-type-divider { padding:0 20px; }
#canvas .frame-space-before-extra-small { padding-top:0; }
#canvas .frame-space-after-extra-small { padding-bottom:0; }
#canvas .frame-space-before-small { padding-top:30px; }
#canvas .frame-space-after-small { padding-bottom:30px; }
#canvas .frame-space-before-medium { padding-top:60px; }
#canvas .frame-space-after-medium { padding-bottom:60px; }
#canvas .frame-space-before-large { padding-top:100px; }
#canvas .frame-space-after-large { padding-bottom:100px; }
#canvas .frame-space-before-extra-large { padding-top:140px; }
#canvas .frame-space-after-extra-large { padding-bottom:140px; }
/*******/
#breadcrumb { width:calc(100% - 20px); padding:10px; }
#breadcrumb ul { display:block; width:calc(100% - 40px); padding:10px 20px 0 20px; margin:0 auto; max-width:1320px; font-size:0; }
#breadcrumb ul li { display:inline-block; vertical-align:top; }
#breadcrumb ul .b-sep { display:inline-block; vertical-align:top; /*font:400 0.875rem/1.25em "Roboto", sans-serif;*/ padding:0 15px; }
#breadcrumb ul .b-sep:before { display:block; content:"\f105"; font:900 1rem/1.3em "Font Awesome 6 Free"; color:var(--gray); }
#breadcrumb ul li:first-of-type a { font-size:0; }
#breadcrumb ul li:first-of-type a:before { display:inline-block; vertical-align:top; content:"\f015"; font:900 0.875rem/1.3em "Font Awesome 6 Free"; color:var(--gray); /*width:18px; height:18px;content:url('data:image/svg+xml; utf8, ');*/ }
#breadcrumb ul li a { display:inline-block; font:400 1rem/1.375em "Source Sans 3", sans-serif; color:var(--black); }
#breadcrumb .current a { color:var(--lightgray); }
/***************************************/
/**** HEADERBAR ****/
/***************************************/
#headerbar { position:fixed; z-index:12; top:0; left:0; width:100%; height:100px; background:var(--white); transition:all 0.35s ease; border-bottom:1px solid var(--lightgray); }
/*#headerbar.no-bg { background:transparent; }*/
.contact { padding:0; position:absolute; right:240px; top:50%; transform:translate(0,-50%); height:28px; }
.contact:after { display:block; content:""; position:absolute; right:-20px; top:-10px; height:40px; border-right:2px solid var(--lightgray); }
.contact a { display:inline-block; vertical-align:middle; font:600 1.25em/1.4em "Source Sans 3", sans-serif; color:var(--black); text-decoration:none!important; margin-right:20px; }
.contact a.location { margin:0 10px; }
/* LANG */
#lang:before { display:block; content:"\f0ac"; width:20px; height:20px; position:absolute; z-index:5; left:5px; top:3px; font-size:1.25em; font-family:"Font Awesome 6 Free"; color:var(--black); }
#lang { position:absolute; top:calc(50% - 14px); left:0; height:28px; overflow:hidden; transform:translateX(-100%);}
#lang svg { position:absolute; left:5px; top:5px; width:20px; height:20px; z-index:5; }
#lang ul { position:relative; display: block; list-style: none; padding:30px 20px 20px 40px; background:var(--white); transition: all 0.35s ease; }
#lang li { display: block; text-align:left; padding: 5px 0; }
#lang li a { font:600 1.25em/1em "Source Sans 3", sans-serif; color:var(--gray); }
#lang li.active { position:absolute; top:0; }
#lang li.active a { pointer-events:none; }
#lang li:before { display: none; }
#lang:hover { /*height:auto;*/ overflow:visible; }
#headerbar.mhide { top:-100px; }
.logo { position:absolute; left:80px; top:50%; transform:translate(0,-50%); width:175px; height:auto; transition:all 0.35s ease; z-index:2; }
/* MENU */
#menu .men-button { display:block; position:absolute; right:80px; top:18px; height:60px; width:120px; padding:0; background:transparent; z-index:5;border: 0; cursor:pointer; transition:all .35s cubic-bezier(.5,.25,.5,1); -webkit-transition:all .3s cubic-bezier(.5,.25,.5,1); box-sizing:content-box; }
#menu .men-text { display:inline-block; color:var(--black); font:600 1.25rem/1.125em "Source Sans 3", sans-serif; vertical-align:middle; padding-left:15px; }
/*.scrolled #menu .men-button { display:block; }*/
#menu .menu-icon-wrap { display:inline-block; vertical-align:middle; width:40px; height:40px; background:transparent; position:relative; }
#menu .menu-icon { display:block; padding:0; margin:0; position:absolute; top:6px; left:15px; width:30px; height:30px; transition:all .35s cubic-bezier(.5,.25,.5,1); -webkit-transition:all .3s cubic-bezier(.5,.25,.5,1);}
#menu .menu-icon-line { display:block; height:2px; width:100%; margin:5px 0; background:var(--black); transition:all .35s cubic-bezier(.5,.25,.5,1); -webkit-transition:all .3s cubic-bezier(.5,.25,.5,1); }
#menu .menu-icon-line-middle { width:80%; }
#menu .menu-icon-line-bottom { width:60%; }
#menu.active .menu-icon { top:9px; }
#menu.active .menu-icon-line { margin:0 auto; }
#menu.active .menu-icon-line-top { transform:translate(0,10px) rotate(-45deg); }
#menu.active .menu-icon-line-middle { opacity:0; }
#menu.active .menu-icon-line-bottom { transform:translate(0,6px) rotate(-135deg); width:100%; }
#menu.active li a:before { background:var(--black); bottom:33%; }
#menu .men-button:hover .menu-icon-line { background:var(--black); }
.men-main-wrap { top:0; height:100vh; width:520px; overflow:scroll; position:absolute; right:0; transform:translate(100%,0); background:var(--orange); transition:all 0.35s ease; }
#menu.active .men-main-wrap { transform:translate(0,0); }
#menu .men-wrap.men-level-1-wrap { margin-top:160px; padding:0 40px; }
#menu .men-wrap .men-level-1-item a { margin-bottom:20px; }
#menu .men-wrap a { display:inline-block; font:700 1.625em/1.125em "Source Sans 3", sans-serif; color:var(--black); text-decoration:none; transition:all 0.25s ease; }
#menu .men-wrap.men-level-2-wrap,
#menu .men-wrap.men-level-3-wrap { display:none; margin-top:20px; }
#menu .men-wrap.men-level-2-wrap a { font:400 1.125em/1.125em "Source Sans 3", sans-serif; padding:10px 0; margin:0; }
#menu .men-wrap.men-level-2-wrap li:not(:nth-child(1)) { border-top:1px solid var(--black); padding:10px 0; }
#menu .m-back { display:none; cursor:pointer; position:fixed; top:40px; left:40px; font:700 1.25em/1.125em "Source Sans 3", sans-serif; color:var(--black); }
#menu .sub-active .m-back { display:block; }
#menu .men-level-2-item.sub:not(.sub-active):after,
#menu .men-level-1-item.sub:not(.sub-active):after { display:inline-block; vertical-align:sub; content:"\f105"; font-size:1.5em; font-family:"Font Awesome 6 Free"; color:var(--black); overflow:hidden; transition:all 0.35s ease; padding-left:10px; line-height:1em; }
#menu .men-level-2-item.sub:not(.sub-active) { position:relative; }
#menu .men-level-2-item.sub:not(.sub-active) a { padding-right:20px; }
#menu .men-level-2-item.sub:not(.sub-active):after { position:absolute; right:0; top:20px; font-size:1.375em; }
#menu a[target="_blank"]:after { display:inline-block; padding-left:5px; vertical-align:text-top; content:"\f08e"; font-weight:900; font-family:"Font Awesome 6 Free"; font-size:0.875rem; }
#menu a:hover,
#menu a.active,
#pid1 #menu .pos-1 a { text-decoration:underline; }
/***************************************/
/**** HEADER ****/
/***************************************/
.svg-orange { fill: #fabc43; }
.svg-red { fill: #d30b2f; }
.svg-gray { fill: #4a4a49; }
#header img,
#header video { width:100%; height:auto; margin:0; }
#header.big-header img,
#header.big-header video { object-fit:cover; width:100%; height:calc(100vh - 100px); }
#header .frame.frame-type-textpic,
#header .frame.frame-type-image,
#header .frame.frame-type-html { display:block; padding:0; max-width:none; width:100%; text-align:right; }
.h-slide { position:relative; }
#header .header-description { position:absolute; left:0; bottom:0; }
#header .ce-bodytext { position:absolute; z-index:2; top:100px; left:40px; background:var(--twhite); font-size:1rem; width:calc(75% - 80px); padding:40px; max-width:780px; }
#header .big { font-size:2.5em; font-weight:700; }
.nav-slider { position:absolute; z-index:2; bottom:0; width:100%; background:var(--tblack); font-size:0; }
.nav-slider-wrap { max-width:1400px; margin:0 auto; }
.nav-slider .frame { display:inline-block; padding:20px 0; width:100%; }
.nav-slider .frame * { color:var(--white); }
.nav-slider .inner-frame { position:relative; padding:60px 40px 20px 40px; }
.nav-slider .inner-frame:after,
.nav-slider .inner-frame:before { display:block; content:""; position:absolute; z-index:1; top:30px; left:40px; width:calc(100% - 80px); height:4px; background:var(--gray); }
.nav-slider .inner-frame:after { background:var(--orange); width:0;/*transition:all 0s linear;*/ }
.nav-slider .slick-current .inner-frame:after { /*width:calc(100% - 80px); transition-duration:4.25s;*/ animation:fill 8s infinite linear; }
.nav-slider .slick-slide:not(.slick-current) .frame-text-wrap * { color:var(--midgray); }
@keyframes fill{
0% { width:0; }
100% { width:calc(100% - 80px); }
}
.scroll-down { position:absolute; z-index:3; bottom:10px; left:20px; cursor:pointer; width:50px; height:50px; background:transparent; }
.scroll-down:before { display:block; transform:rotate(90deg); position:absolute; left:50%; top:50%; content:"\f105"; font-family:"Font Awesome 6 Free"; color:var(--white); width:50px; height:50px; font-size:1.5rem; /* width:12px; height:12px; transform:translate(-50%,-50%) rotate(-45deg); border-bottom:4px solid var(--white); border-left:4px solid var(--white);*/ animation:scroller 2s infinite ease; }
.big-header .scroll-down { bottom:20px; }
@keyframes scroller {
0% { top:50%; }
20% { top:40%; }
40% { top:50%; }
75% { top:40%; }
100% { top:50%; }
}
.arrow { position:absolute; top:calc(50% - 14px); left:20px; width:28px; height:28px; border-top:1px solid white; border-left:1px solid white; transform:rotate(-45deg); cursor:pointer; }
.arrow.arw-next { transform:rotate(135deg); left:auto; right:80px; }
/***************************************/
/**** Contact ****/
/***************************************/
#fc-6 { background:url('/fileadmin/user_upload/background/bg-contact-new.jpg') no-repeat center center; background-size:cover; }
#fc-6 .frame-type-textpic .ce-right .ce-gallery,
#fc-6 .frame-type-textpic .ce-right .ce-bodytext { width:calc(50% - 20px); padding:0 20px 0 0; }
#fc-6 .frame-type-textpic .ce-right .ce-gallery { padding:0 0 0 20px; }
#fc-6 .button { color:var(--black); border-color:var(--black); }
#fc-6 .button:hover { color:var(--white); background:var(--black); }
#fc-6 .button:hover:after { color:var(--white); }
/***************************************/
/**** CONTENT ****/
/***************************************/
/* STARTSEITE */
.article .frame.frame-large .inner-frame { max-width:none; }
.frame-type-shortcut { font-size:0; }
.content-bg { position:absolute; width:100%; height:100%; background-size:cover; top:0; z-index:0; }
/*** TEXT UND HEADLINES ***/
a { text-decoration:none; }
a:hover { text-decoration:underline; }
header .subheader { display:block; font:500 1.25em/1.25em "Source Sans 3", sans-serif; color:var(--black); margin:0 0 0.5em 0; }
.header-description .header-title,
h1 { display:block; font:700 3.75rem/1.125em "Source Sans 3", sans-serif; color:var(--black); margin:0 0 2.25rem ; position:relative; /*font-variant-ligatures:none;*/ }
h2 { display:block; font:700 3.125em/1.125em "Source Sans 3", sans-serif; color:var(--black); margin:0 0 1.75rem; position:relative; }
.header-description .header-desc,
h3 { display:block; font:600 2.1875em/1.25em "Source Sans 3", sans-serif; color:var(--black); margin:0 0 1rem; position:relative; }
h4 { display:block; font:600 1.625em/1.25em "Source Sans 3", sans-serif; color:var(--black); margin:0 0 1rem; position:relative; }
h6,
h5 { display:block; font:600 1.25em/1.25em "Source Sans 3", sans-serif; color:var(--black); margin:0 0 1rem; }
p { display:block; font:400 1.25em/1.3em "Source Sans 3", sans-serif; color:var(--black); margin:0 0 1rem 0; text-rendering:optimizelegibility; -ms-word-break:normal; word-break:normal; word-wrap:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto; hyphens:auto; text-align:left; }
header { margin-bottom:1.25em; font-size:1rem; }
.small { font-size:1.125rem; }
header span { display:block; color:var(--gold); }
strong,
b,
p strong,
p b { font-weight:600; }
pre { white-space:inherit; }
.content.color-gray p,
.content.color-gray a,
.content.color-gray header * { color:var(--white); }
ul { display:block; margin-bottom:1.5em; list-style-type:none; }
.content ul li { position:relative; width:calc(100% - 30px); padding:0 0 0.5em 30px; font:600 1.375rem/1.4em "Source Sans 3", sans-serif; color:var(--black); margin:0; }
.content ul li:before { content:"\f00c"; display:block; width:30px; top:0; left:0; position:absolute; font-family:"Font Awesome 6 Free"; /*padding-right:15px;*/ color:var(--orange); }
.frame-default a:not(.button) { /*text-decoration:underline;*/ color:var(--black); }
.frame-news .inner-frame,
.frame.frame-type-text .inner-frame { max-width:900px; }
/* NUMBER LIST */
.content ol { display:block; list-style:none; counter-reset:item; width:100%; }
.content ol li { display:block; position:relative; width:calc(100% - 40px); padding:0 0 0 40px; font:500 1.375rem/1.4em "Source Sans 3", sans-serif; color:var(--black); margin:0; counter-increment:item; }
.content ol li:before { content:counter(item) ")"; text-align:left; display:block; position:absolute; top:0; left:0; width:40px; font:700 1.375rem/1.4em "Source Sans 3", sans-serif; color:var(--orange); }
.content ol ol li:before { content:counters(item, '.') ')'; font:700 1rem/1.8em "Source Sans 3", sans-serif; }
.frame-type-text ul,
.question ul { margin-top:0.5em; }
.content .ce-uploads li { padding:0; display:block; width:auto; }
.content .ce-uploads li div { display:inline; hyphens:auto; }
.content .ce-uploads li div a { padding:0 10px; }
.content .ce-uploads li img { width:auto; display:inline-block; }
.content .ce-uploads li:before { display:none; }
/* DF - LIST */
dl { display:block; font-size:0; }
dl dd, dl dt { display:inline-block; vertical-align:top; position:relative; width:calc(75% - 40px); padding:0 0 20px 40px; font:400 1.125rem/1.4em "Source Sans 3", sans-serif; color:var(--gold); -ms-word-break:normal; word-break:normal; word-wrap:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto; hyphens:auto; margin-bottom:1.5em; border-bottom:1px solid var(--gold); }
dl dd:last-of-type,
dl dt:last-of-type { border-bottom:none; }
dl dd { color:var(--black);}
dl dt { width:25%; padding:0 0 20px 0; font-weight:400; }
.ce-gallery .image-caption { font:400 1rem/1.5em "Source Sans 3", sans-serif; color:var(--gold); padding:2em 0 0 0; hyphens:none; width:100%; text-align:center; }
.content button:not(.men-button,.slick-arw),
.button-wrap a,
.tx-powermail .btn,
.button { display:inline-block; position:relative; padding:15px 8px 15px 20px; font:600 1.125rem/20px "Source Sans 3", sans-serif; border:2px solid var(--orange); background:transparent; color:var(--black); transition:all 0.35s ease; text-decoration:none!important; }
.content button:not(.men-button,.slick-arw):hover,
.button-wrap a:hover,
.tx-powermail .btn:hover,
.button:hover { color:var(--black); background-color:var(--orange); }
.content button:not(.men-button,.slick-arw):after,
.button-wrap a:after,
.tx-powermail .btn:after,
.button:after { display:inline-block; vertical-align:sub; content:"\f105"; font-family:"Font Awesome 6 Free"; color:var(--black); overflow:hidden; opacity:0; transition:all 0.35s ease; }
.content button:not(.men-button,.slick-arw):hover:after,
.button-wrap a:hover:after,
.tx-powermail .btn:hover:after,
.button:hover:after { overflow:auto; opacity:1; padding-left:12px; padding-right:4px; color:var(--black); }
.color-gray a.button { border-color:var(--orange); color:var(--orange); }
.color-gray .button:after { color:var(--white); }
.color-gray .button:hover { color:var(--black); background-color:var(--orange); }
.color-gray .button:hover:after { color:var(--black); }
.color-lightgray .button { border-color:var(--black); }
.color-lightgray .button:after { color:var(--white); }
.color-lightgray .button:hover { color:var(--white); background-color:var(--black); }
.color-lightgray .button:hover:after { color:var(--white); }
/*.small { font-size:.8125em; }*/
.color { color:var(--red); }
.big { display:block; font:400 1.25em/1.125em "Source Sans 3", sans-serif; }
.contact p { font-size:1em; line-height:1.5em; font-weight:600; margin:0; }
.frame .inner-size { margin:0; }
/* ICONS */
.frame a[href*="http"]:not(.share):before,
.contact a.location:before,
.frame a[href*="https://www.google.de/maps"]:before,
.frame a[href*="tel:"]:before,
.frame a[href*=".pdf"]:before,
.contact a[href*="tel:"]:before,
.frame a[data-mailto-vector="2"]:before { display:inline-block; padding-right:10px; vertical-align:bottom; content:"\f0e0"; font-weight:900; font-family:"Font Awesome 6 Free"; }
.contact a[href*="tel:"]:before,
.frame a[href*="tel:"]:before { content:"\f095"; }
.frame a[href*="http"]:not(.share):before { content:"\f0ac"; }
.contact a.location:before { content:"\f3c5"; }
.frame a[href*="https://www.google.de/maps"]:before { content:"\f5e4"; }
.frame a[href*=".pdf"]:before { content:"\f1c1"; }
.frame.n-article a[href*="http"]:before { display:none; }
#pid28 .frame a { white-space:nowrap; }
.text-center,
.ce-headline-center,
.align-center { text-align:center; }
.text-right,
.ce-headline-right,
.align-right { text-align:right; }
.text-left,
.ce-headline-left,
.align-left { text-align:left; }
/*** BILDER **/
.ce-gallery { width:calc(100% + 20px); margin:0 0 0 -10px; font-size:0; text-align:left; }
.ce-gallery .ce-column { position:relative; margin:0; width:calc(100% - 20px); padding:10px; display:inline-block; vertical-align:top; }
.ce-gallery[data-ce-columns="1"] { margin:0; width:100%; }
.ce-gallery[data-ce-columns="1"] .ce-column { margin-top:0; width:100%; padding:10px 0; }
.ce-gallery[data-ce-columns="2"] .ce-column { width:calc(50% - 20px); }
.ce-gallery[data-ce-columns="3"] .ce-column { width:calc(33.333% - 20px); }
.ce-gallery[data-ce-columns="4"] .ce-column { width:calc(25% - 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(14.285% - 20px); }
.ce-gallery .ce-column a { position:relative; display:block; transition:filter 0.25s ease; overflow:hidden; }
.ce-gallery .ce-column a img { transition:all 0.25s ease; }
.ce-gallery .ce-column a:hover img { transform:scale(1.01); }
.ce-gallery[data-ce-columns="4"] .image-caption { padding-top:2px; padding-bottom:20px; }
.ce-gallery .ce-column .image-description { margin:20px 0 0; }
.ce-gallery .ce-column .image-description p { font-size:1.25rem; }
.ce-right.ce-image { text-align:right; }
.ce-right .ce-gallery[data-ce-columns="1"] { max-width:900px; display:inline-block; }
.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:4px; right:4px; width:1.5em; height:1.5em; font-size:1.5rem; content:"\f00e"; z-index:1; font-weight:900; font-family:"Font Awesome 6 Free"; color:var(--white); transition:all 0.35s ease; }
.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 { color:var(--orange); }
.fancybox-caption__body { font:400 1.5rem/1.5em "Source Sans 3", sans-serif; }
@keyframes rotate {
from { transform:rotate(0deg); }
to { transform:rotate(180deg); }
}
@keyframes rotateback {
from { transform:rotate(180deg); }
to { transform:rotate(0deg); }
}
/* BILD mit TEXT KACHELN */
.frame-layout-110 .ce-gallery { padding:0; margin:0 auto; width:100%; }
.frame-layout-110 .ce-gallery[data-ce-columns="4"] .ce-column { padding:0; width:25%; }
.frame-layout-110 .ce-column:not(:nth-of-type(2)):before { display:block; content:""; padding-top:75%; background:var(--orange); }
.frame-layout-110 .ce-column:nth-of-type(3):before { background:var(--white); }
.frame-layout-110 .ce-column:nth-of-type(4):before { background:var(--red); }
.frame-layout-110 .ce-column:nth-of-type(2):after { display:block; content:""; background:var(--black); padding-top:75%; }
.frame-layout-110.frame.frame-type-image .ce-bodytext { position:absolute; top:25%; left:0; padding:0 10px; width:calc(100% - 20px); transform:translate(0,-50%); max-height:100%; }
.frame-layout-110.frame.frame-type-image .ce-column:nth-of-type(2) .ce-bodytext { top:75%; }
.frame-layout-110.frame.frame-type-image .ce-column:nth-of-type(4) .ce-bodytext *,
.frame-layout-110.frame.frame-type-image .ce-column:nth-of-type(2) .ce-bodytext * { color:var(--white); }
.frame-layout-110.frame.frame-type-image .ce-bodytext * { text-align:center; }
.frame-layout-110 .big { font-size:3.25em; font-weight:700; }
.frame-layout-110 p { margin:0; }
/* TEXTPIC */
.frame-type-textpic .inner-frame { font-size:0; }
.frame.frame-type-image .ce-bodytext { font-size:1rem; padding-top:20px; }
.frame-type-textpic .ce-left .ce-gallery { vertical-align:top; display:inline-block; width:calc(35% - 20px); padding:0 calc(5% + 20px) 0 0; }
.frame-type-textpic .ce-left .ce-bodytext { font-size:1rem; vertical-align:top; display:inline-block; width:calc(60% - 20px); padding:0 20px 0 0; }
.frame-type-textpic .ce-right .ce-gallery { vertical-align:top; display:inline-block; width:calc(35% - 20px); padding:0 0 0 calc(5% + 20px); }
.frame-type-textpic .ce-right .ce-bodytext { font-size:1rem; vertical-align:top; display:inline-block; width:calc(60% - 20px); padding:0 20px 0 0; }
/*BILD KLEINER */
.frame-layout-100.frame-type-textpic .ce-bodytext { width:calc(75% - 20px); max-width:900px; }
.frame-layout-100.frame-type-textpic .ce-left .ce-gallery,
.frame-layout-100.frame-type-textpic .ce-right .ce-gallery { width:calc(25% - 20px); padding:0 0 0 20px; }
.frame-layout-100.frame-type-textpic .ce-left .ce-gallery { padding:0 20px 0 0; }
.frame-layout-100.frame-type-textpic .ce-column { text-align:right; }
.frame-layout-100.frame-type-textpic .image { max-width:140px; display:inline-block; }
.frame-layout-100.frame-type-textpic .ce-left .ce-column { text-align:center; }
/*BILD KLEIN + BG ****/
.frame.frame-bg .inner-frame { background: rgb(250,188,67);
background: linear-gradient(90deg, rgba(250,188,67,1) 0%, rgba(236,90,42,1) 40%); padding:40px 20px; }
.frame.frame-bg .inner-frame * { color:var(--white); }
.frame.frame-bg .ce-column { padding:0 20px; text-align:center; width:calc(100% - 40px); }
.frame.frame-bg .ce-gallery,
.frame.frame-bg .ce-bodytext { vertical-align:middle; }
.frame.frame-bg ul { margin:0; }
/*.frame-layout-120 .ce-bodytext { position:relative; }
.frame-layout-120 .ce-bodytext:before { display:block; width:50%; max-width:120px; height:auto; content:url('/fileadmin/template.v1/_images/zitat.svg'); margin-bottom:20px; }
*/
video,iframe { width:100%; }
.image a { display:block; position:relative; transition:all 0.25s ease; }
.image a img { transition:all 0.25s ease; }
/*** SLIDER **/
.slick-arw { display:inline-block; position:relative; width:60px; height:60px; border-radius:50%; background:var(--yellow); cursor:pointer; transition:all 0.35s ease; }
.slick-arw.slick-next { margin-left:40px; }
.slick-arw:after { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:1.5em; content:"\f061"; font-family:"Font Awesome 6 Free"; color:var(--black); transition:all 0.35s ease; }
.slick-arw.slick-prev:after { transform:translate(-50%,-50%) rotate(180deg); }
.slick-arw:hover { background:var(--white); }
.slick-arw:hover:after { color:var(--black); }
.frame.frame-layout-140 { padding:20px 10px; }
.frame.frame-layout-140 .frame { padding:10px 0; width:100%; }
/* 5-IMG-SLIDER */
.frame-layout-120 .ce-gallery[data-ce-columns="5"] .ce-column { width:20%; padding:0; }
/** MENU PAGES **/
.content .menu_pages:after { display:block; width:100%; height:0; content:''; clear:both; }
.content .menu_pages { display:flex; justify-content:left; flex-wrap:wrap; width:calc(100% + 40px); margin-left:-20px; }
.content .menu_pages li { display:flex; flex-direction:column; font-size:1rem; padding:20px; width:calc(33.333% - 40px); float:none; }
.content .menu_pages li a { display:block; border:1px solid var(--lightgray); width:calc(100% - 2px); height:100%; overflow:hidden; position:relative;transition:0.3s all ease; text-decoration:none; }
.content .menu_pages li .teaser-img { display:block; width:100%; height:auto; overflow:hidden; }
.content .menu_pages li .teaser-img img { display:block; width:100%; height:auto; transition:all .2s ease; }
.content .menu_pages li .teaser-text { display:block; width:calc(100% - 50px); padding:25px 25px 75px 25px; margin:0; text-rendering:optimizelegibility; word-wrap:break-word; hyphens:auto; transition:0.3s all ease; }
.content .menu_pages li .teaser-text .teaser-title { display:block; font:600 1.25em/1.4em "Roboto", sans-serif; margin-bottom:.5em; }
.content .menu_pages li .teaser-text .teaser-button { position:absolute; bottom:25px; right:25px; width:1.875em; height:1.25em; }
.content .menu_pages li .teaser-text .teaser-button:after { display:inline-block; margin-left:0; content:"\f105"; font:400 1.625em "Font Awesome 6 Free"; transition:0.3s all ease; }
.content .menu_pages li a:hover { background:var(--lightgray); }
.content .menu_pages li a:hover .teaser-img img { transform:scale(1.05); }
.content .menu_pages li a:hover .teaser-button:after { /*color:var(--red);*/ margin-left:.5em; }
/*.content .menu_pages li a:hover { background-color:var(--gray); color:var(--red); }*/
.content .menu_pages a:before,
.content .menu_pages li:before { display:none!important; }
.mediaelement.mediaelement-image.ce-gallery { margin:40px 0; }
.mediaelement.mediaelement-image.ce-gallery.n-img-right { text-align:right; }
.mediaelement.mediaelement-image.ce-gallery.n-img-right .ce-column { display:inline-block; width:100%; max-width:900px; }
/*** NEWS ***/
.news .frame-news { max-width:900px; }
.news-list-view { text-align:left; font-size:0; width:calc(100% + 40px); margin:20px 0 0 -20px; }
.frame.n-article { width:calc(33.333% - 40px); padding:20px; }
.news-list-view .news-img-wrap { width:100%; display:block; }
.n-text { width:100%; display:block; }
.news-list-category,
.news-list-date { display:inline-block; font:600 1.25em/1.25em "Source Sans 3", sans-serif; color:var(--orange); margin-bottom:10px; }
.n-text .n-seperator { display:inline-block; padding:0 10px; }
.n-text h3 { font-weight:700; font-size:1.625em; margin-top:40px; }
.n-text .teaser-desc p { font-size:1.125em; }
.news .more { display:inline-block; font:400 1.125em/1.125em "Source Sans 3", sans-serif; color:var(--black); text-decoration:none!important; margin-top:20px; transition:all 0.35s ease; }
.news .more.back:before,
.n-text .more:after { display:inline-block; vertical-align:sub; content:"\f105"; font-family:"Font Awesome 6 Free"; color:var(--black); overflow:hidden; opacity:1; transition:all 0.35s ease; padding-left:5px; }
.n-text .more[href*="http"]:after { content:"\f08e"; }
.n-text .more:hover:after { padding-left:15px; }
.news .more.back:before { transform:rotate(180deg); padding-left:5px; }
.news .more.back:hover:before { padding-left:15px; }
.news .more.back:hover { margin-left:-10px; }
.news-single { margin-top:60px; }
.tag-title,
.cat-title { display:block; font:700 1.5em/1.125em "Source Sans 3", sans-serif; margin-bottom:10px; }
.news .checkbox,
.news .tag { display:inline-block; height:32px; border:1px solid var(--gray); border-radius:16px; padding:0 15px; }
.news .tag:not(:last-of-type),
.news .checkbox:not(:last-of-type) { margin-right:10px; }
.news .tag label,
.news .checkbox label { cursor:pointer; font:400 1.25em/32px "Source Sans 3", sans-serif; color:var(--gray); position:relative; }
.news .tag input,
.news .checkbox input { display:none; }
/*.news .c-active { border-color:var(--red); }*/
.news .tag label.active,
.news .checkbox label.active { color:var(--white); }
.news .checkbox.c-active { background:var(--black); }
.news .tag label.active:before,
.news .checkbox label.active:before { display:inline-block; width:1.25em; height:1.5em; content:"\f00c"; font:900 1em/1.5em "Font Awesome 6 Free"; text-align:left; color:var(--white); }
.news .tag label.active:hover:before,
.news .checkbox label.active:hover:before { content:"\f00d"; }
.btn.btn-primary { display:none; }
.news-single .news-img-wrap { width:calc(100% + 20px); margin-left:-10px; }
.news .outer { width:calc(33.333% - 20px); padding:10px; display:inline-block; vertical-align:top; }
.news-related { padding-top:40px; }
.news-related a { padding-left:20px; }
.news-related a:before { display:none!important; }
/***************************************/
/**** TIMELINE ****/
/***************************************/
.tx-aetimeline-historylist .history-list-item { position:relative; margin-bottom:80px; }
.tx-aetimeline-historylist .history-list-item .h-text-wrap { width:calc(100% - 200px); padding-left:200px; }
.tx-aetimeline-historylist .history-list-item .year { position:absolute; display:block; left:0; top:-11px; padding:10px; font:700 1.375rem/1em "Source Sans 3", sans-serif; color:var(--black); background:var(--orange); width:60px; text-align:center; }
.tx-aetimeline-historylist .history-list-item .year:after { position:absolute; display:block; content:""; left:calc(50% - 1px); bottom:100%; width:2px; height:0; background:var(--orange); transition:height 0.35s 0.35s linear; }
.tx-aetimeline-historylist .history-list-item .year:after { height:calc(100% + 50px); }
.tx-aetimeline-historylist .history-list-item:first-of-type .year:after { display:none; }
/** JOBS **/
.j-list { padding-bottom:80px; }
.job-item .frame-job { padding:0; }
.job-item .frame-job a { display:block; text-decoration:none; padding:20px; margin:0; transition:all 0.35s ease; /*background:var(--lightgray);*/ border-bottom:1px solid var(--lightgray); }
.job-item .frame-job a:hover { background:var(--orange); }
.job-location { display:block; font:400 1em/1em "Source Sans 3", sans-serif; padding:0 0 5px 0; }
.job-hl { font:400 1.5em/1.125em "Source Sans 3", sans-serif; }
.text-footer a svg { transition:all 0.25s ease; }
.text-footer a:hover svg { transform:scale(1.1); }
.filter select { font:400 1.25em/1.125em "Source Sans 3", sans-serif; padding:10px 5px; border:1px solid var(--black); }
.powermail_fieldwrap.powermail_fieldwrap_type_html .jobname { display:block; font:600 2.1875em/1.25em "Source Sans 3", sans-serif; color:var(--black); margin-bottom:20px;}
.job-item { display:none; }
.job-item.f-show { display:block; }
.detail-wrap { padding-top:60px; }
.share { margin-right:5px; }
.share path { fill:var(--black); }
#filter-location input { display:none; }
#filter-location .r-wrap { display:inline-block; height:32px; border:1px solid var(--gray); border-radius:16px; padding:0 15px; font:400 1.25em/32px "Source Sans 3", sans-serif; cursor:pointer; }
#filter-location .r-wrap:not(:last-of-type) { margin-right:10px; }
#filter-location .r-wrap label { cursor:pointer; }
#filter-location .r-wrap.c-active { border-color:var(--black); }
#filter-location .r-wrap.c-active { color:var(--white); background:var(--black); }
#filter-location .r-wrap.c-active:before { display:inline-block; width:1.25em; height:1em; content:"\f00c"; font:900 1em/1.3em "Font Awesome 6 Free"; text-align:left; color:var(--white); }
/*.print:hover .st0,
.text-footer a:hover .st0 { fill:rgb(42,48,90); }*/
/*.detail-wrap p a { padding-left:0; }
.detail-wrap p a:after { display:none; }*/
/**** PREFOOTER ****/
.prefooter { padding:0; background:var(--lightgray); }
.prefooter-inner { max-width:1360px; text-align:left; }
.prefooter .pf-left { display:inline-block; padding:20px; }
.prefooter img { height:66px; width:auto; }
.prefooter .pf-right { display:block; float:right; padding:20px; }
/**** FOOTER ****/
footer { width:100%; margin:0 auto; text-align:left; position:relative; overflow:hidden; padding:20px 0; z-index:7; background:var(--gray); }
footer .frame-default.frame a,
footer *:not(.button) { color:var(--white); }
footer p { font-size:1.125rem; }
footer p:last-of-type { font-size:0.9rem; }
footer .article { max-width:1340px; position:static; }
footer .big { max-width:600px; }
footer .ce-image { position:absolute; right:0; bottom:0; width:40%; max-width:400px; }
footer .article .ce-image .ce-column { padding:0; }
/* Social Media */
#menu a[href*=".linkedin.com"],
#menu a[href*=".instagram.com"],
#menu a[href*=".facebook.com"],
.prefooter a[href*=".linkedin.com"],
.prefooter a[href*=".instagram.com"],
.prefooter a[href*=".xing.com"],
.prefooter a[href*=".facebook.com"],
.prefooter a[href*=".youtube.com"],
footer a[href*=".linkedin.com"],
footer a[href*=".instagram.com"],
footer a[href*=".facebook.com"] { font-size:0; display:inline-block; width:30px; height:30px; margin-top:13px; padding-right:1rem; text-decoration:none; }
#menu a[href*=".linkedin.com"]:before,
#menu a[href*=".instagram.com"]:before,
#menu a[href*=".facebook.com"]:before,
.prefooter a[href*=".linkedin.com"]:before,
.prefooter a[href*=".instagram.com"]:before,
.prefooter a[href*=".xing.com"]:before,
.prefooter a[href*=".facebook.com"]:before,
.prefooter a[href*=".youtube.com"]:before,
footer a[href*=".linkedin.com"]:before,
footer a[href*=".instagram.com"]:before,
footer a[href*=".facebook.com"]:before { display:block; width:30px; height:30px; color:var(--midgray); content:"\f082"; font-family:"Font Awesome 6 Brands"; font-size:2rem; line-height:2rem; transition:all 0.35s ease; }
.prefooter a:hover:before,
footer a:hover:before { color:var(--red); }
#menu a[href*=".instagram.com"]:before,
.prefooter a[href*=".instagram.com"]:before,
footer a[href*=".instagram.com"]:before { content:"\f16d"; }
#menu a[href*=".linkedin.com"]:before,
.prefooter a[href*=".linkedin.com"]:before,
footer a[href*=".linkedin.com"]:before { content:"\f08c"; }
#menu a[href*=".xing.com"]:before,
.prefooter a[href*=".xing.com"]:before,
footer a[href*=".xing.com"]:before { content:"\f168"; }
.prefooter a[href*=".youtube.com"]:before,
footer a[href*=".youtube.com"]:before { content:"\f167"; }
/**** FORMULAR ******/
.tx-powermail h3,
.powermail_legend { display:none; }
.tx-powermail { margin:0 auto; }
.tx-powermail fieldset { width:calc(100% + 20px); margin:0 -10px; font-size:0; max-width:1020px;}
:-ms-input-placeholder { color:var(--text); font-weight:400; opacity:0.9; }
input::placeholder { color:var(--text); font-weight:400; opacity:0.9; }
textarea::placeholder { color:var(--text); font-weight:400; opacity:0.9; }
:-webkit-input-placeholder { color:var(--text); font-weight:400; opacity:0.9; }
:-moz-placeholder { color:var(--text); font-weight:400; opacity:0.9; }
input::-webkit-input-placeholder { color:var(--text); opacity:0.9; font-weight:400; }
textarea::-webkit-input-placeholder { color:var(--text); opacity:0.9; font-weight:400; }
input::-moz-placeholder { color:var(--text); opacity:0.9; font-weight:400; }
textarea::-moz-placeholder { color:var(--text); opacity:0.9; font-weight:400; }
::-webkit-calendar-picker-indicator { padding-right:10px; background-color:var(--white); }
input:-internal-autofill-selected { background:transparent!important; }
input[type=number] { appearance: textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { appearance: none; margin: 0;}
.powermail_fieldwrap { display:inline-block; width:calc(50% - 20px); padding:10px; position:relative; }
.powermail_fieldwrap.powermail_fieldwrap_type_html,
.powermail_fieldwrap.powermail_fieldwrap_type_check,
.tx-powermail .powermail_fieldwrap_type_text,
.tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_radio,
.powermail_fieldwrap.powermail_fieldwrap_type_textarea { width:calc(100% - 20px); }
.tx-powermail .powermail_fieldwrap textarea,
.tx-powermail .powermail_fieldwrap input,
.tx-powermail .powermail_fieldwrap select { width:calc(100% - 7px); padding:10px 0 10px 5px; font:400 1.125em/20px "Source Sans 3", sans-serif; outline:none; background:transparent!important; color:var(--black); border:1px solid var(--black); }
.powermail_fieldwrap label,
.powermail_fieldwrap * { font-size:1rem; }
.tx-powermail .powermail_fieldwrap p,
.tx-powermail .powermail_fieldwrap_type_text .powermail_field,
.tx-powermail .powermail_fieldwrap label { font:400 1.125rem/20px "Source Sans 3", sans-serif; color:var(--black); }
.tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_check .checkbox { display:inline-block; padding-right:1.5em; }
.tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_check .checkbox label { display:block; position:relative; font:400 1.125rem/1.25em "Source Sans 3",sans-serif; padding:0 0 0 28px; margin:0; color:var(--black); }
.tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_check .checkbox label:before { display:block; position:absolute; top:.2em; left:0; content:""; width:1em; height:1em; background:var(--white); border-radius:4px; transition:all 0.25s ease; }
.tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_check .checkbox label.active:after { display:block; position:absolute; top:.1em; left:.1em; width:1.25em; height:1em; content:""; background-image:url('data:image/svg+xml;utf8,'); }
.tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_check input { display:none; }
.tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_radio .radio { display:inline-block; min-width:80px; height:40px; margin-top:10px; }
.tx-powermail .p-info,
.tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_radio .radio label { padding:0 8px 0 0; font:400 1.25rem/1.5em "Source Sans 3", sans-serif; }
.tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_radio input { width:16px; height:16px; }
.tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_radio .radio label { display:block; position:relative; font:400 1.25rem/20px "Source Sans 3","Trebuchet MS","Lucida Sans Unicode","Lucida Grande",sans-serif; padding:0 20px 0 25px; margin:0; }
.tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_radio .radio label:before { display:block; position:absolute; top:0; left:0; content:""; width:20px; height:20px; background:white; border-radius:50%; transition:all 0.25s ease; }
.tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_radio .radio label.active:before { background:var(--black); }
.tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_radio input { display:none; }
.tx-powermail .powermail_fieldwrap hr { border-color:var(--black); }
.tx-powermail .powermail-errors-list { margin:0; position:absolute; top:-6px; background:var(--red); padding:0px 2px; border:1px solid var(--black); }
.tx-powermail .powermail-errors-list li { font:400 0.75rem/1.25em "Source Sans 3",sans-serif; padding:0; width:auto; margin:0 0 0 5px; color:var(--dark); }
.tx-powermail .powermail-errors-list li:before { display:none; }
.tx-powermail .powermail_fieldwrap p.small { font-size:1rem; }
.tx-powermail .powermail_fieldwrap .checkbox a { font-size:1em; }
.tx-powermail .powermail_fieldwrap p.small a:before { display:none; }
.powermail_fieldwrap.powermail_fieldwrap_type_check { margin:0 0 30px 0; }
.tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_check .checkbox { display:block; margin-bottom:10px; }
.tx-powermail .powermail_fieldwrap.powermail_fieldwrap_type_check .powermail_label { display:block; font-size:1.625rem; font-weight:700; margin:0 0 30px 0; }
/*** EXTRAS ****/
#pid1 #fc-2 .subheader { font:400 2.25em/1.25em 'Nerko One',sans-serif; color:var(--orange); margin:0; }
/**** SUPPORT Button im Header ****/
.support-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
isolation: isolate;
width: 120px;
height: 55px;
padding: 12px 8px 0;
margin-left: 10px;
font-weight: 700;
line-height: 1;
color: #ffffff !important;
text-align: center;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
background: transparent;
border: 0;
overflow: visible;
transition: transform 0.25s ease;
}
/* Beide Flammengrafiken */
.support-button::before,
.support-button::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-position: center bottom;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
}
.support-button::before {
background-image: url('/fileadmin/template.v1/_images/support-button-flamme1.webp');
}
.support-button::after {
background-image: url('/fileadmin/template.v1/_images/support-button-flamme2.webp');
animation: flameFlicker 2.4s ease-in-out infinite;
}
/* Sanfte Flammenanimation */
@keyframes flameFlicker {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
/* Hover-Effekt */
.support-button:hover {
color: #ffffff !important;
background: transparent;
transform: scale(1.03);
}
/**** Mobile Ansicht ****/
@media screen and (max-width: 799px) {
.support-button {
width: 110px;
height: 55px;
padding: 12px 6px 0;
margin-left: 5px;
}
}
/**** Geöffnetes seitliches Menü ****/
.ovh #lang,
.ovh .contact a:not(.support-button):not(#lang a) {
display: none;
}
.ovh .contact {
position: absolute;
right: 0;
top: 0;
z-index: 3;
transition: right 0.3s ease;
width: 520px;
}
/* SUPPORT – seitliches Klappmenü */
.ovh .contact a.support-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: absolute;
top: 100px;
right: 40px;
box-sizing: border-box;
width: 390px;
max-width: calc(100% - 80px);
min-width: 120px;
height: 44px;
margin: 0;
padding: 0 20px;
color: #ffffff !important;
/* alt: background: #000000 !important; */
background: transparent !important;
border: 0;
border-radius: 0;
text-align: center;
line-height: normal !important;
text-indent: 0 !important;
/* alt: animation: none !important; */
transform: none !important;
}
/* alt: Keine Flammen im seitlichen Menü
.ovh .contact a.support-button::before,
.ovh .contact a.support-button::after {
content: none;
animation: none;
}
*/
/* Barrierefreiheit: reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
.support-button::after {
animation: none;
opacity: 0;
}
}
/* Ausrichtung der Elemente im Header */
.headerbar-inner .contact {
display: flex;
align-items: center;
}
/* Schriftzug SUPPORT nach unten verschieben */
.support-button {
text-indent: 0;
padding-top: 26px;
}
/* SUPPORT – Schriftposition Mobil */
@media screen and (max-width: 799px) {
.support-button {
color: #ffffff !important;
position: relative;
top: 0;
transform: none !important;
padding-top: 20px !important;
line-height: 24px !important;
text-indent: 0;
box-sizing: border-box;
}
}
/* SUPPORT – Korrektur für sehr schmale Ansichten */
@media screen and (max-width: 600px) {
.support-button {
padding-top: 35px !important;
line-height: 9px !important;
}
}
/***************************************/
/**** POPUP ****/
/***************************************/
/* Box wird per lib.popup (libs.ts) ausgegeben, .show + .pop-close kommen aus script.js */
.popup { position:fixed; z-index:11; left:50%; bottom:40px; transform:translate(-50%,20px); width:calc(100% - 40px); max-width:640px; box-sizing:border-box; padding:30px; background:var(--white); border:2px solid var(--orange); box-shadow:0 4px 24px rgba(39,39,39,0.18); opacity:0; visibility:hidden; transition:all 0.45s ease; }
.popup.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
.pop-header { padding-right:30px; }
.pop-hl { display:block; font:700 1.5rem/1.25em "Source Sans 3", sans-serif; color:var(--black); margin:0 0 20px 0; }
.pop-content { display:flex; align-items:stretch; gap:20px; }
/* Spalten als Flex-Spalte, damit die Buttons trotz unterschiedlich langer Texte auf gleicher Hoehe sitzen */
.pop-left,
.pop-right { flex:1 1 0; display:flex; flex-direction:column; justify-content:space-between; }
/* Trennstrich zwischen Newsletter- (links) und Support-Spalte (rechts) */
.pop-right { border-left:1px solid var(--midgray); padding-left:20px; }
/* nur Support-Spalte (z.B. Group-Seite ohne Newsletter): kein Trennstrich/Einzug */
.pop-right:only-child { border-left:0; padding-left:0; }
.pop-text { margin:0 0 10px 0; font-size:1em; }
/* align-self verhindert, dass der Button auf volle Spaltenbreite gestreckt wird */
.pop-left .button,
.pop-right .button { align-self:flex-start; padding-top:10px; padding-bottom:10px;}
.pop-close { position:absolute; top:10px; right:10px; width:32px; height:32px; padding:0; margin:0; background:transparent; border:0 none; cursor:pointer; line-height:1; }
.pop-close:before { display:block; content:"\f00d"; font:900 1.25rem/32px "Font Awesome 6 Free"; color:var(--black); transition:color 0.35s ease; }
.pop-close:hover:before { color:var(--orange); }
/* muss nach .popup.show stehen (gleiche Spezifitaet) - blendet die Box aus solange das Menue offen ist */
.ovh .popup { opacity:0; visibility:hidden; }
/* Support-Button im Popup: wie der Support-Button in der Headerbar (rot, Flammen, 120px) */
.popup .pop-right .button {
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 120px;
height: 55px;
padding: 26px 8px 0;
margin-top: 10px; /* Platz für die Flammen oberhalb */
font: 700 1.125rem/1 "Source Sans 3", sans-serif;
color: #ffffff;
background: transparent;
border: 0;
overflow: visible;
transition: transform 0.25s ease;
text-transform: uppercase;
}
.popup .pop-right .button:hover {
color: #ffffff;
background: transparent;
transform: scale(1.03);
}
.popup .pop-right .button::before,
.popup .pop-right .button::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: 1;
overflow: visible;
background-position: center bottom;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
}
.popup .pop-right .button::before {
background-image: url('/fileadmin/template.v1/_images/support-button-flamme1.webp');
}
.popup .pop-right .button::after {
background-image: url('/fileadmin/template.v1/_images/support-button-flamme2.webp');
animation: flameFlicker 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.popup .pop-right .button::after {
animation: none;
opacity: 0;
}
}
@media screen and (min-width:1921px){
}
@media screen and (max-width:1920px){
}
@media screen and (max-width:1480px){
}
@media screen and (max-width:1800px){
}
@media screen and (max-width:1600px){
.nav-slider .frame { padding:0; }
.nav-slider .inner-frame { padding:40px 20px 20px 20px; }
.nav-slider .inner-frame:after,
.nav-slider .inner-frame:before { width:calc(100% - 40px); left:20px; top:20px; }
.nav-slider .inner-frame:after { width:0; }
#header .ce-bodytext { top:60px; width:calc(80% - 40px); padding:20px; }
#header .big { font-size:1.5em; }
@keyframes fill{
0% { width:0; }
100% { width:calc(100% - 40px); }
}
#canvas .frame-space-before-small { padding-top:20px; }
#canvas .frame-space-after-small { padding-bottom:20px; }
#canvas .frame-space-before-medium { padding-top:40px; }
#canvas .frame-space-after-medium { padding-bottom:40px; }
#canvas .frame-space-before-large { padding-top:80px; }
#canvas .frame-space-after-large { padding-bottom:80px; }
#canvas .frame-space-before-extra-large { padding-top:100px; }
#canvas .frame-space-after-extra-large { padding-bottom:100px; }
}
@media screen and (max-width:1279px){
#menu .men-button { right:20px; }
.logo { left:20px; }
.contact { right:170px; }
.contact a[href*="tel"] { font-size:0;}
#menu .men-wrap.men-level-1-wrap { margin-top:100px; }
#menu .men-wrap.men-level-2-wrap { margin-top:20px; }
.header-description .header-title, h1 { font-size:3em; }
h2 { font-size:2.5em; }
h3 { font-size:1.875em; }
h4 { font-size:1.375em; }
.nav-slider .inner-frame { padding-bottom:0; }
.nav-slider p { font-size:1em; }
.content .menu_pages li .teaser-text .teaser-title,
p { font-size:1.125em; }
.content .menu_pages li .teaser-text { padding:20px 20px 50px 20px; width:calc(100% - 40px); }
.content .menu_pages li .teaser-text .teaser-button { right:10px; bottom:15px; }
.content ol li,
.content ul li { font-size:1.125rem; }
#header .ce-bodytext { left:20px; top:20px; width:calc(100% - 80px); }
#c8 .inner-frame { width:80%; }
.slick-slider { pointer-events:none; }
.slick-slider a { pointer-events:all; }
}
@media screen and (max-width:1023px){
.frame-layout-110 .big { font-size:2em; }
.frame-layout-110 p { font-size:1em; }
.tx-aetimeline-historylist .history-list-item { margin-bottom:60px; }
}
@media screen and (max-width:799px){
.men-main-wrap { width:100%; }
#lang { right:140px; z-index:2; }
.contact a:not(#lang a) { display:none; }
#lang { transition:all 0.35s ease; left:-200px; width:155px; opacity:0; pointer-events:none; }
.contact { height:50px; }
.ovh .contact { opacity:1; z-index:5; left:0px; right:auto; }
.ovh #lang { display:block; z-index:5; left:20px; top:50px; opacity:1; transform:none; pointer-events:auto; }
.contact:after { display:none; }
#lang ul { background:var(--orange); }
.contact a.support-button { display:block!important; position:absolute; right:0; top:0; border:0 none; margin:0; border-radius:0; padding:10px 25px; min-width:120px; text-align:center; }
.ovh .contact a.support-button { left:20px; top:140px; }
.men-main-wrap { z-index:4; }
.header-description .header-title, h1 { font-size:2.5em; }
h2 { font-size:2.125em; }
h3 { font-size:1.625em; }
h4 { font-size:1.25em; }
#canvas .frame-space-before-medium { padding-top:30px; }
#canvas .frame-space-after-medium { padding-bottom:30px; }
#canvas .frame-space-before-large { padding-top:60px; }
#canvas .frame-space-after-large { padding-bottom:60px; }
#canvas .frame-space-before-extra-large { padding-top:80px; }
#canvas .frame-space-after-extra-large { padding-bottom:80px; }
.frame.n-article,
.content .menu_pages li { width:calc(50% - 40px); }
footer .ce-image { width:80%; }
.frame-type-textpic .ce-left .ce-bodytext,
.frame-type-textpic .ce-right .ce-bodytext { width:100%; padding:0 0 20px 0; }
.frame-type-textpic .ce-left .ce-gallery,
.frame-type-textpic .ce-right .ce-gallery { padding:0; width:100%; max-width:400px; }
.frame-type-textpic .ce-left .ce-gallery { padding-bottom:20px; }
.frame-layout-110 .ce-gallery[data-ce-columns="4"] .ce-column { width:50%; }
#header .frame-text-wrap p:last-of-type { display:none; }
.powermail_fieldwrap { width:calc(100% - 20px); }
.frame { padding:10px; }
#menu .men-wrap.men-level-1-wrap { padding:0 20px; margin-top:220px; }
.frame.frame-bg .ce-column { width:100%; padding:0; }
.frame.frame-bg.frame-layout-100.frame-type-textpic .ce-left .ce-gallery { width:100%; padding:0 0 40px 0; }
.frame-bg.frame-layout-100.frame-type-textpic .ce-left .ce-column { text-align:left; }
.ce-gallery[data-ce-columns="3"] .ce-column,
.ce-gallery[data-ce-columns="4"] .ce-column { width:calc(50% - 20px); }
#menu .m-back { top:85px; left:20px; }
#menu .men-wrap.men-level-2-wrap li:not(:nth-child(1)) { padding:2px 0; }
#menu .men-wrap.men-level-2-wrap { margin:0; }
.job-hl { font-size:1.25em; }
.job-item .frame-job a { padding:15px 0; }
h1,h2,h3,h4,h5 { hyphens:auto; }
.frame a[href*="tel:"],
.frame a[href*="#"],
.frame a[href*="https://"]:not(.tx-aejobs-list *) { display:block; }
footer { padding-bottom:60px; }
}
@media screen and (max-width:569px){
.popup { padding:20px; bottom:20px; width:calc(100% - 20px); }
.pop-hl { font-size:1.25rem; margin-bottom:15px; }
.pop-content { display:block; }
.pop-left,
.pop-right { text-align:center; }
.pop-left .button,
.pop-right .button { align-self:center; }
/* gestapelt: Trennstrich waagerecht statt senkrecht */
.pop-right { border-left:0 none; padding-left:0; border-top:1px solid var(--midgray); margin-top:20px; padding-top:20px; }
.pop-right .button { margin-top:10px; }
.header-description .header-title, h1 { font-size:2.25em; }
h2 { font-size:2em; }
h3 { font-size:1.75em; }
h4 { font-size:1.25em; }
.content .menu_pages li .teaser-text { padding:15px 10px 40px 10px; width:calc(100% - 20px); }
#fc-6 .frame-type-textpic .ce-right .ce-gallery,
#fc-6 .frame-type-textpic .ce-right .ce-bodytext { width:100%; padding:0; }
.frame.n-article { width:calc(100% - 40px); }
#canvas .frame-space-before-medium { padding-top:20px; }
#canvas .frame-space-after-medium { padding-bottom:20px; }
#canvas .frame-space-before-large { padding-top:40px; }
#canvas .frame-space-after-large { padding-bottom:40px; }
#canvas .frame-space-before-extra-large { padding-top:60px; }
#canvas .frame-space-after-extra-large { padding-bottom:60px; }
#menu .men-wrap a { font-size:1.4em; }
.content button:not(.men-button, .slick-arw), .button-wrap a, .tx-powermail .btn, .button { margin-top:5px; }
footer { padding-bottom:40px; }
.tx-aetimeline-historylist .history-list-item .h-text-wrap { width:calc(100% - 100px); padding-left:100px; }
.fancybox-caption__body { font-size:1rem; }
.contact { right:100px; }
#menu .men-text { display:none; }
#menu .men-button { right:0; width:80px; }
}
@media screen and (max-width:479px){
.header-description .header-title, h1 { font-size:2em; }
h2 { font-size:1.875em; }
h3 { font-size:1.625em; }
.content .menu_pages li { width:calc(100% - 40px); padding:10px 20px; }
.tx-powermail .powermail_fieldwrap p,
.tx-powermail .powermail_fieldwrap_type_text .powermail_field,
.tx-powermail .powermail_fieldwrap label,
.tx-powermail .powermail_fieldwrap textarea,
.tx-powermail .powermail_fieldwrap input,
.tx-powermail .powermail_fieldwrap select { font-size:1rem; }
.logo { width:160px; }
/*.article { width:100%; padding:0; }*/
#header .ce-bodytext { width:calc(100% - 60px); left:10px; }
.content-wide .frame.frame-type-header,
.content-wide .frame.frame-type-text { width:calc(100% - 20px); padding-left:10px; padding-right:10px; }
#canvas .frame-space-before-large { padding-top:20px; }
#canvas .frame-space-after-large { padding-bottom:20px; }
#canvas .frame-space-before-extra-large { padding-top:40px; }
#canvas .frame-space-after-extra-large { padding-bottom:40px; }
.prefooter .pf-right,
.prefooter .pf-left { padding:20px 10px; }
.prefooter .pf-right { padding-right:0; }
.powermail_fieldwrap.powermail_fieldwrap_type_html .jobname { font-size:1.875rem; }
.ovh .contact { width:100%; }
.contact { right:75px; }
.contact a.support-button { padding:10px; }
}
@media screen and (max-width:399px){
* { hyphens:auto; }
p { font-size:1em; }
.prefooter img{ height:40px; }
.logo { width:120px; }
.contact a.support-button { padding:10px 5px; min-width:100px; }
}
@media screen and (max-width:349px){
.contact a.support-button { padding:10px 0; font-size:0.875rem; min-width:80px; }
}
/* ===============================================
SUPPORT im geoeffneten Seitenmenue – Korrektur
Normale Header-Flammen bleiben unveraendert.
=============================================== */
.ovh .contact {
position: absolute;
top: 0;
right: 0;
left: auto;
width: 520px;
height: 0;
transform: none;
z-index: 6;
pointer-events: none;
}
.ovh .contact a.support-button {
position: absolute;
top: 100px;
/* alt: right: 40px; left: auto; width: calc(100% - 80px); */
left: 40px; /* bündig mit Menütext (padding 40px) */
right: auto;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 120px; /* wie in der Headerbar */
max-width: none;
min-width: 0;
height: 44px;
margin: 0;
padding: 0 !important;
box-sizing: border-box;
font: 600 1.25rem/1 "Source Sans 3", sans-serif !important;
text-align: center;
text-indent: 0 !important;
color: #fff !important;
/* alt: background: #000 !important; */
background: rgb(204,51,51) !important;
isolation: isolate;
/* alt: transform: none !important; */
transform: translateY(var(--menu-scroll, 0px)) !important; /* scrollt mit dem Menü (script.js) */
transition: none; /* keine Verzögerung beim Mitscrollen */
/* alt: animation: none !important; */
pointer-events: auto;
}
/* alt: Keine Flammen im seitlichen Menü
.ovh .contact a.support-button::before,
.ovh .contact a.support-button::after {
content: none !important;
}
*/
/* Flammen wie im Header (Bilder kommen aus .support-button::before/::after) */
.ovh .contact a.support-button::before,
.ovh .contact a.support-button::after {
content: "";
/* alt: background-size: 100% 100%; (gestreckt) */
/* Flammen in Header-Größe (120x55), unten bündig & mittig, ragen oben über den roten Hintergrund hinaus */
inset: auto 0 0 0;
width: 100%;
height: 55px;
background-size: contain;
background-position: center bottom;
}
.ovh .contact a.support-button::after {
animation: flameFlicker 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.ovh .contact a.support-button::after {
animation: none;
opacity: 0;
}
}
@media screen and (max-width: 799px) {
.ovh .contact {
left: 0;
right: 0;
width: 100%;
}
.ovh .contact a.support-button {
top: 140px;
left: 20px; /* bündig mit Menütext (padding 20px) */
right: auto;
width: 110px; /* wie in der Headerbar mobil */
/* alt: right: 20px; width: calc(100% - 40px); */
}
}