a {
	color: #00883e;
}

a .mail_at {
	background: url(../../images/techbase/mail_techbase.svg) center center no-repeat;
    background-size: 100% auto;
}

a[title~="PDF"] {
	background-image: url(../../images/techbase/pdf_techbase.svg);
}

#inhaltsbereich li::before {
	background: url(../../images/zentral/arrows.png) -102px -13px no-repeat; 
}

#header #headergrafik .ce-gallery::after {
	background: url(../../images/techbase/Overlay_Startheader_TechBase.svg) left bottom no-repeat;
	background-size: 100% auto;
}

#header #headergrafik .owl-dot.active {
	background: #01CD5E;
}

#navi > ul > li:hover > a,
#navi > ul > li.act > a {
	color: #00883e;
}

@media (max-width: 1024px) {
	.mob_button, .mob_button.mobnavvisible {
		top: 40px;
	}
}

@media (max-width: 720px) {
	.mob_button, .mob_button.mobnavvisible {
		top: 30px;
	}
}

#inhaltsbereich h1 .hl1,
#inhaltsbereich h2 .hl1 {
	color: #00883e;
}

#inhaltsbereich .box_color {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00883e+0,ffd862+100 */
	background: #00883e; /* Old browsers */
	background: -moz-linear-gradient(45deg, #00883e 0%, #01CD5E 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, #00883e 0%,#01CD5E 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, #00883e 0%,#01CD5E 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00883e', endColorstr='#01CD5E',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#inhaltsbereich .box_color li::before {
	background: url(../../images/zentral/arrows.png) -80px -13px no-repeat; 
}

#inhaltsbereich .box_grau .owl-nav > div,
#inhaltsbereich .box_color .owl-nav > div {
	background: url(../../images/zentral/arrows.png) left top no-repeat;
}

#inhaltsbereich .box_color .owl-nav > div.owl-next {
	background-position: -20px top;
}

#inhaltsbereich .box_grau .owl-nav > div {
	background-position: -40px top;
}

#inhaltsbereich .box_grau .owl-nav > div.owl-next {
	background-position: -60px top;
}

#inhaltsbereich .en-button {
	background-color: #00883e;
}

#inhaltsbereich .contentslider .frame.default > header h3,
#inhaltsbereich .kachel-galerie .frame.default > header h3,
#inhaltsbereich .kachel-galerie-grau .frame.default > header h3 {
	background: #00883e;
}

#inhaltsbereich .contentslider-einzel .owl-dots > .owl-dot.active,
#inhaltsbereich .contentslider .owl-dots > .owl-dot.active,
.news-single-imgwrap .owl-dots > .owl-dot.active {
    background: #00883e;
}

#inhaltsbereich > .frame.jobs li a {
	background-image: url(../../images/techbase/pdf_techbase.svg);
}

/* ---------- RAHMEN ----------- */

.topthemen > div > header > h2, .topthemen h3, .topthemen .ce-textpic:hover a {	
	color: #00883e;
} 

.imageheadline::after {
	background-image: url(../../images/techbase/Overlay_Imageheader_TechBase_WW.svg);
}

.topthemen .imageheadline::after,
#inhaltsbereich + .events .imageheadline::after,
.news + .events .imageheadline::after {
	background-image: url(../../images/techbase/Overlay_Imageheader_TechBase_WG.svg);
}

.topthemen + .news .imageheadline::after {
	background-image: url(../../images/techbase/Overlay_Imageheader_TechBase_GW.svg);
}

#inhaltsbereich .imageheadline::after,
#inhaltsbereich + .news .imageheadline::after {
	background-image: url(../../images/techbase/Overlay_Imageheader_TechBase_WW.svg);
}

.topthemen + .events .imageheadline::after {
	background-image: url(../../images/techbase/Overlay_Imageheader_TechBase_GG.svg);
}

.headlineleft header h2 {
	color: #00883e;
}

#inhaltsbereich .ankerlinks li:hover {
	background: #00883e;
}

/* ---------- RAHMEN ----------- */

/* ------------- News & Events ------------- */
.tx_cn_rtech_kompmatrix-backlink a,
#inhaltsbereich .frame-type-textmedia a[title~="Infos"],
#inhaltsbereich .frame-type-textmedia a[title~="Überblick"],
#inhaltsbereich .frame-type-textmedia a[title~="3D-Rundgang"],
.news .frame-type-textmedia a[title~="Überblick"],
.events .frame-type-textmedia a[title~="Überblick"],
.button a, 
span.button-moreinfo.news-single-backlink a,
a.more {
	border: 2px solid #00883e;
}

a.more {
	display: inline-block;
    text-decoration: none;
    transition: all 0.5s ease;
    position: relative;
    background: none;
    padding: 10px 20px;
    font-size: 20px;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 700;
    position: relative;
    z-index: 0;
    transition: all 0.5s ease;
}

a.more::after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	width: 0%;
	height: 100%;
	top: 0;
	left: 0;
	background: #00883e;
}

a.more:hover::after {
	width: 100%; 
}

a.more:hover {
    color: #fff;
}

.tx_cn_rtech_kompmatrix-backlink span::after,
span.button-moreinfo::after,
a.more::after {
	background: #00883e;
}

#inhaltsbereich .box_color span.button-moreinfo:hover a,
#inhaltsbereich .box_color span.button-moreinfo:active a {
	color: #00883e;
}

.events .tx-news .news-teaser .news-date, 
.news-single-date-events {
	color: #00883e;
}

/* ------------- News & Events ------------- */


/* .ui-accordion .ui-accordion-header.ui-state-active, .ui-accordion .ui-accordion-header.ui-widget-content .ui-state-active, .ui-accordion .ui-accordion-header.ui-widget-header .ui-state-active {
	background: #00883e;
} */

.ui-accordion .ui-accordion-header {
	background: #00883e;
}

.powermail_legend {
	color: #00883e;
}

.powermail_tab_navigation > .btn:hover, .powermail_fieldwrap_type_submit input.powermail_submit:hover {
	background: #00883e;
}

/*~ 2024-05-06 Video Mediaconsent ~*/
.iframeverlinkung .ce-gallery,
.iframeverlinkung .ce-gallery .ce-row,
.iframeverlinkung .ce-gallery .ce-column,
.iframeverlinkung .ce-gallery .video {
	float: left;
	clear: both;
	width: 100%;
	margin: 0 0 0 0;
}

.video-embed .video-defer {
    opacity: 1;
}

.ce-gallery.videocontainer {
    width: 100%;
	float: left;
	clear: both;  
}

.ce-gallery.videocontainer .video-column {
    width: 100%;
    float: left;
}

.ce-gallery.videocontainer[data-ce-columns="1"] .video-column {
	width: 100%;
	float: left;
	clear: both;
}

.ce-gallery.videocontainer figure.video {
	display: block;
}

.video-embed iframe, 
.video-embed a.videoiframelink,
.iframevideo a.videoiframelink {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-embed a.videoiframelink,
.iframevideo a.videoiframelink  {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: transparent;
    overflow: hidden;
    text-indent: -999px;
    display: none;
}

.loadiframenow a.videoiframelink,
.mediaconsent.loadok a.videoiframelink,
.frame-type-textmedia.frame-layout-10 .videobox  a.videoiframelink {
    display: flex;
}

.video-embed a.videoiframelink::before,
.iframevideo a.videoiframelink::before,
.frame-type-textmedia.frame-layout-10 .videobox  a.videoiframelink::before {
    content: "";
    display: block;
    width: 70px;
    height: 50px;
    background: var(--black);
    border-radius: 5px;
    transition: opacity 0.3s ease;
	box-shadow: 0 0 60px 0 var(--white);
	opacity: 0.8;
}

.video-embed a.videoiframelink:hover::before,
.iframevideo a.videoiframelink:hover::before,
.frame-type-textmedia.frame-layout-10 .videobox  a.videoiframelink:hover::before {
	opacity: 0.9;
}

.video-embed a.videoiframelink::after,
.iframevideo a.videoiframelink::after,
.frame-type-textmedia.frame-layout-10 .videobox  a.videoiframelink::after {
    content: "";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent var(--white);
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -10px 0 0 -8px;
    z-index: 3;
}

.video[data-type="external"] .video-embed {
    padding: 0;
}

.videobox {
    padding-top: 56.25%;
    overflow: hidden;
}

.mediaconsent > a.videoiframelink {
    display: none;
}

/* -- Sprachmenue -- */
.lang-menu {
	position: absolute;
	left: 5%;
	top: 20px;
	width: 180px;
	z-index: 20 !important;
}

.enmenu {
    display: block;
    float: left;
}

ul.sprachmenu {
    margin: 0;
    padding: 0;
    list-style: none;    
    min-width: 120px;
    display: block;
    float: left;
}

ul.sprachmenu li {
    display: block;
    float: left;
    clear: none;
    margin: 0 10px 0 0;
    background: #58585a;
    box-shadow: -2px 3px 5px rgba(0, 0, 0, 0.2);
    width: 30px;
    height: 25px;
    padding: 10px;
    position: relative;
}

ul.sprachmenu li a, ul.sprachmenu li span {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    text-indent: -999px;
    overflow: hidden;
}

ul.sprachmenu li.de {
    background: url(/fileadmin/templatefiles/images/zentral/german-language-hover.svg) center center no-repeat #58585a;
    background-size: 30px auto;
}

ul.sprachmenu li.en {
    background: url(/fileadmin/templatefiles/images/zentral/english-language-hover.svg) center center no-repeat #58585a;
    background-size: 30px auto;
}

ul.sprachmenu li.fr {
    background: url(/fileadmin/templatefiles/images/zentral/french-language-hover.svg) center center no-repeat #58585a;
    background-size: 30px auto;
}


/*  ++ Über uns: Vison und Mission - Anpassung Höhe ++ */
.tx_cn-multicontent .row.equalize > div > div.box_grau,
.tx_cn-multicontent .row.equalize > div > div.box_color {
    height: calc(100% - 100px);
}

/*  ++ Rahmen Werte Icons ++ */
#inhaltsbereich > .frame-werte-icons {
    width: 90%;
}

.frame-werte-icons .tx_cn-columns {
    position: relative;
    min-height: 800px;
}

.frame-werte-icons .tx_cn-columns[data-cols="4"] .row > div > div {
    width: 100%;
    margin: 0;
}

.frame-werte-icons .col-50 .ce-gallery { 
    border-radius: 100%;
    width: 150px;
    height: 150px;
    padding: 20px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.frame-werte-icons .col-50 .ce-gallery .ce-row,
.frame-werte-icons .col-50 .ce-gallery .ce-row .image{
    overflow: visible !important;
}

.frame-werte-icons .ce-bodytext {
    text-align: center;
    position: absolute;
    left: 25%;
    top: 20%;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.2em;
}

/*  ++ Wir alle gemeinsam ++  */
.frame-werte-icons .col-50:first-child {
    position: absolute;
    left: calc(50% - 90px);
    width: auto;
}

.frame-werte-icons .col-50 .ce-gallery::before,
.frame-werte-icons .col-50 .ce-gallery::after  {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #00BF53;
    border-radius: 50%;
    z-index: -1;
    transition: 0.5s;
}

.frame-werte-icons .col-50 .ce-gallery::after {
    background: none;
    border: 5px solid #00BF53;
}

.frame-werte-icons .col-50:first-child .ce-gallery:hover::before {
    top: 50%;
    left: 50%;
    right: 50%;
    bottom: 50%;
}

.frame-werte-icons .col-50:first-child .ce-gallery img {
    transition: 0.5s;
} 

.frame-werte-icons .col-50:first-child .ce-gallery:hover img {
    filter: brightness(0) saturate(100%) invert(44%) sepia(85%) saturate(2524%) hue-rotate(120deg) brightness(102%) contrast(104%);
}

.frame-werte-icons .col-50:first-child .ce-bodytext {
    left: 120%;
    top: 20%;
}

#inhaltsbereich .frame-werte-icons .ce-gallery .ce-column:hover .image a {
    transform: none;
}

/*  ++ Offen für Neues ++ */
.frame-werte-icons .col-50:nth-child(2) {
    position: absolute;
    top: 200px;
    left: calc(50% + 110px);
    width: auto;
}

.frame-werte-icons .col-50:nth-child(2) .ce-gallery::before {
    background-color: #00CD59;
}

.frame-werte-icons .col-50:nth-child(2) .ce-gallery:hover::before {
    top: 50%;
    left: 50%;
    right: 50%;
    bottom: 50%;
}

.frame-werte-icons .col-50:nth-child(2) .ce-gallery::after {
    background: none;
    border: 5px solid #00CD59;
}

.frame-werte-icons .col-50:nth-child(2) .ce-gallery img {
    transition: 0.5s;
} 

.frame-werte-icons .col-50:nth-child(2) .ce-gallery:hover img {
    filter: brightness(0) saturate(100%) invert(68%) sepia(38%) saturate(7038%) hue-rotate(107deg) brightness(100%) contrast(101%);
}

.frame-werte-icons .col-50:nth-child(2) .ce-bodytext {
    left: 110%;
    top: 65%;
    width: 100%;
}

/*  ++ Go for it ++ */
.frame-werte-icons .col-50:nth-child(3) {
    position: absolute;
    top: 400px;
    width: auto;
    right: calc(50% - 90px);
}

.frame-werte-icons .col-50:nth-child(3) .ce-gallery::before {
    background-color: #00A648;
}

.frame-werte-icons .col-50:nth-child(3) .ce-gallery:hover::before {
    top: 50%;
    left: 50%;
    right: 50%;
    bottom: 50%;
}

.frame-werte-icons .col-50:nth-child(3) .ce-gallery::after {
    background: none;
    border: 5px solid #00A648;
}

.frame-werte-icons .col-50:nth-child(3) .ce-gallery img {
    transition: 0.5s;
} 

.frame-werte-icons .col-50:nth-child(3) .ce-gallery:hover img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(58%) saturate(3964%) hue-rotate(128deg) brightness(96%) contrast(101%);
}

.frame-werte-icons .col-50:nth-child(3) .ce-bodytext {
    left: -110%;
    top: 45%;
    width: 100%;
}

/*  ++ Unsere Kuchenback-Mentalität ++ */
.frame-werte-icons .col-50:nth-child(4) {
    position: absolute;
    top: 200px;
    width: auto;
    left: calc(50% - 290px);
}

.frame-werte-icons .col-50:nth-child(4) .ce-gallery::before {
    background-color: #00662D;
}

.frame-werte-icons .col-50:nth-child(4) .ce-gallery:hover::before {
    top: 50%;
    left: 50%;
    right: 50%;
    bottom: 50%;
}

.frame-werte-icons .col-50:nth-child(4) .ce-gallery::after {
    background: none;
    border: 5px solid #00662D;
}

.frame-werte-icons .col-50:nth-child(4) .ce-gallery img {
    transition: 0.5s;
} 

.frame-werte-icons .col-50:nth-child(4) .ce-gallery:hover img {
    filter: brightness(0) saturate(100%) invert(29%) sepia(29%) saturate(1938%) hue-rotate(106deg) brightness(91%) contrast(102%);
}

.frame-werte-icons .col-50:nth-child(4) .ce-bodytext {
    left: -125%;
    top: 45%;
    width: 100%;
}

/*  ++ Animation Icons ++ */
.frame-werte-icons .col-50 {
    opacity: 0;
    transition: 1s;
}

.frame-werte-icons .animate .col-50 {
    opacity: 1;
}

.frame-werte-icons .col-50:nth-child(2) {
    transition-delay: 0.7s;
}

.frame-werte-icons .col-50:nth-child(3) {
    transition-delay: 1.5s;
}

.frame-werte-icons .col-50:nth-child(4) {
    transition-delay: 2.2s;
}

/* ++ Lightbox Werte ++ */
.page975 .fancybox-content {
    max-width: 60%;
    margin: 50px 0;
}

body.lb_body .lightbox{
    overflow-y: scroll;
    max-height: 93vh;
    /* max-width: 60%; */
    padding: 40px 50px 0 50px;
    /* margin: 50px 0; */
}

body.lb_body .lightbox .ce-gallery{
    margin-bottom: 40px;
}

body.lb_body .lightbox .ce-gallery img {
    max-width: 100%;
    height: auto;
}

/*  ++ Werte Stories - Kategorien ++ */
#inhaltsbereich > .werte-stories {
    width: 90%;
    float: left;
}

#inhaltsbereich .werte-stories ul {
    width: 100%;
    float: left;
}

#inhaltsbereich .werte-stories li {
    display: inline-block;
    padding: 0;
    margin: 0 30px 10px 0;
}

#inhaltsbereich .werte-stories li:last-child {
    margin-right: 0;
}

#inhaltsbereich .werte-stories li::before {
    display: none;
}

#inhaltsbereich .werte-stories li a {
    font-size: 26px;
    color: #58585A;
    padding: 15px;
    border: 2px solid #58585A;
    float: left;
}

#inhaltsbereich .werte-stories li a:hover {
    color: #00883E;
    border: 2px solid #00883E;
}

#inhaltsbereich .werte-stories li a.active {
    color: #fff;
    background-color: #00883E;
    border: 2px solid #00883E;
}

/*  ++ Werte Stories News ++ */
#inhaltsbereich .news-werte-stories {
    width: 100%;
    float: left;
}

#inhaltsbereich .news-werte-stories h3 {
    margin-top: 70px;
    text-align: center;
}

#inhaltsbereich .news-werte-stories .kategoriebox.go + h3 a {
    color: #00A648;
}

#inhaltsbereich .news-werte-stories .kategoriebox.offen + h3 a {
    color: #00CD59;
}

#inhaltsbereich .news-werte-stories .kategoriebox.gemeinsam + h3 a {
    color: #00BF53;
}

#inhaltsbereich .news-werte-stories .kategoriebox.kuchen + h3 a {
    color: #00662D;
}

#inhaltsbereich .tx-news .news-werte-stories .article a.more::after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    background: #58585a;
}

#inhaltsbereich .tx-news .news-werte-stories .article a.more {
    z-index: 3;
}


#inhaltsbereich .tx-news .news-werte-stories .article a.more:hover {
    color: #fff;
}

#inhaltsbereich .tx-news .news-werte-stories .article a.more:hover::after {
    width: 100%;
}

#inhaltsbereich .news-werte-stories .news-imgwrap {
    float: left;
    width: 100%;
    max-height: 250px;
    overflow: hidden;
    margin: 0;
}

#inhaltsbereich .news-werte-stories .news-imgwrap.no-media +.news-text .kategoriebox{
    opacity: 0;
}

#inhaltsbereich .news-werte-stories .news-imgwrap img {
    width: 100%;
}

#inhaltsbereich .news-werte-stories .kategoriebox {
    position: absolute;
    top: 190px;
    left: calc(50% - 60px);
    width: 120px;
}

#inhaltsbereich .tx-news .news-werte-stories .article {
    padding-bottom: 40px;
    opacity: 0;
}

#inhaltsbereich .tx-news .news-werte-stories .article .news-text {
    padding: 0 5%;
    width: 90%;
}

#inhaltsbereich .tx-news .news-werte-stories .article .news-inhalt p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 25px;
    color: #58585a;
}

.frame.content100.frame-type-list.frame-layout-1 .news-single .news-single-date-events{
    display: none;
}



/* ++++++++++++++++++++++ */

.frame-werte-icons .col-50 .ce-bodytext:before {
    content: '';
    background: url(/fileadmin/templatefiles/images/techbase/pfeil-wir-alle-gemeinsam.png) center no-repeat;
	background-size: contain;
    width: 100px;
    height: 45px;
    position: absolute;
    bottom: -40%;
    left: -25px;
}

.frame-werte-icons .col-50:nth-child(2) .ce-bodytext:before {
    background: url(/fileadmin/templatefiles/images/techbase/pfeil-offen-fuer-neues.png) center no-repeat;
	background-size: contain;
    left: 0px;
    top: -70%;
}

.frame-werte-icons .col-50:nth-child(3) .ce-bodytext:before {
    background: url(/fileadmin/templatefiles/images/techbase/pfeil-go-for-it.png) center no-repeat;
	background-size: contain;
    left: 50%;
    bottom: -100%;
}

.frame-werte-icons .col-50:nth-child(4) .ce-bodytext:before {
    background: url(/fileadmin/templatefiles/images/techbase/pfeil-kuchen-back-mentalitaet.png) center no-repeat;
	background-size: contain;
    left: 55%;
    top: -40%;
}

.frame-werte-icons .animate .col-50 .ce-bodytext::before {
    animation-name: pfeil;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition-delay: 0s;
    animation-delay: 3.2s;
}

.frame-werte-icons .animate .col-50:nth-child(2) .ce-bodytext:before {
	animation-name: pfeil2;
}

.frame-werte-icons .animate .col-50:nth-child(3) .ce-bodytext:before {
	animation-name: pfeil3;
}

.frame-werte-icons .animate .col-50:nth-child(4) .ce-bodytext:before {
	animation-name: pfeil4;
}

@keyframes pfeil {
    0% {left: -25px;}
    3% {left: -25px;}
	7% {left: -30px;}
	11% {left: -25px;}
	15% {left: -30px;}
	19% {left: -25px;}
    100% {left: -25px;}
}

@keyframes pfeil2 {
    0% {left: 0;}
	30% {left: 0;}
	34% {left: -5px;}
	38% {left: 0;}
	42% {left: -5px;}
	46% {left: 0;}
    100% {left: 0;}
}

@keyframes pfeil3 {
    0% {left: 50%;}
    55% {left: 50%;}
	59% {left: calc(50% + 5px);}
    63% {left: 50%;}
	67% {left: calc(50% + 5px);}
    71% {left: 50%;}
    100% {left: 50%;}
}

@keyframes pfeil4 {
    0% {left: 55%;}
    80% {left: 55%;}
	84% {left: calc(55% + 5px);}
	88% {left: 55%;}
	92% {left: calc(55% + 5px);}
    96% {left: 55%;}
	100% {left: 55%;}
}

@media(max-width:1400px) {
	#navi.knownheight.open, .utop #navi.knownheight.open {
        padding-top: 80px;
    }

	.mob_button.mobnavvisible {
        top: 27px;
    }
}

@media(max-width:1300px) {
	#navi.knownheight.open, .utop #navi.knownheight.open {
        padding-top: 80px;
    }

	.mob_button.mobnavvisible {
        top: 27px;
    }
}

@media(max-width:1130px) {
    .frame-werte-icons .col-50 .ce-gallery {
        width: 110px;
        height: 110px;
    }

    #inhaltsbereich .frame-werte-icons .col-50 .ce-gallery img {
        width: 110px;
        height: 110px;
        object-fit: contain;
        object-position: center;
    }

    .frame-werte-icons .ce-bodytext {
        font-size: 28px;
    }

    .frame-werte-icons .col-50:first-child {
        left: calc(50% - 75px);
    }

    .frame-werte-icons .col-50:nth-child(2) {
        left: calc(50% + 85px);
        top: 160px;
    }

    .frame-werte-icons .col-50:nth-child(3) {
        right: calc(50% - 75px);
        top: 320px;
    }

    .frame-werte-icons .col-50:nth-child(4) {
        left: calc(50% - 235px);
        top: 160px;
    }

    .frame-werte-icons .col-50:first-child .ce-bodytext:before,
    .frame-werte-icons .col-50:nth-child(2) .ce-bodytext:before,
    .frame-werte-icons .col-50:nth-child(3) .ce-bodytext:before,
    .frame-werte-icons .col-50:nth-child(4) .ce-bodytext:before {
        width: 90px;
    }

    .frame-werte-icons .tx_cn-columns {
        min-height: 600px;
    }

    #inhaltsbereich .werte-stories li {
        display: inline-block;
        padding: 0;
        margin-right: 20px;
    }
    
    #inhaltsbereich .werte-stories li {
        margin-right: 20px;
    }

    #inhaltsbereich .werte-stories li a {
        padding: 10px;
        font-size: 22px;
    }
}


@media(max-width:1024px) {
	.lang-menu {
		left: auto;
		right: 5%;
		margin-right: 70px;
		top: -100px;
        width: 110px;
		transition: 0.3s;
	}

	#navi.resp-nav.open + .lang-menu {
		top: 20px;
	}
	
	#navi.knownheight.open, .utop #navi.knownheight.open {
        padding-top: 0;
    }
}

@media (max-width: 960px) {
    .frame-werte-icons .ce-bodytext {
        font-size: 24px;
    }

    .frame-werte-icons .col-50:nth-child(2) .ce-bodytext {
        left: 100%;
    }

    .frame-werte-icons .col-50:nth-child(2) .ce-bodytext:before {
        left: 5px;
    }

    @keyframes pfeil2 {
        0% {left: 5px;}
        30% {left: 5px;}
        34% {left: 0;}
        38% {left: 5px;}
        42% {left: 0;}
        46% {left: 5px;}
        100% {left: 5px;}
    }

    .frame-werte-icons .col-50:nth-child(3) .ce-bodytext {
        left: -103%;
    }

    .frame-werte-icons .col-50:nth-child(3) .ce-bodytext:before {
        bottom: -85%;
    }

    .frame-werte-icons .col-50:nth-child(4) .ce-bodytext {
        left: -105%;
    }

    .frame-werte-icons .col-50:nth-child(4) .ce-bodytext:before {
        left: 50%;
    }

    @keyframes pfeil4 {
        0% {left: 50%;}
        80% {left: 50%;}
        84% {left: calc(50% + 5px);}
        88% {left: 50%;}
        92% {left: calc(50% + 5px);}
        96% {left: 50%;}
        100% {left: 50%;}
    }

    .frame-werte-icons .col-50 .ce-bodytext:before {
        width: 75px !important;
    }
}

@media (max-width: 880px) {
    .frame-werte-icons .col-50:nth-child(2) {
        left: calc(50% + 75px);
        top: 150px;
    }

    .frame-werte-icons .col-50:nth-child(3) {
        top: 300px;
    }

    .frame-werte-icons .col-50:nth-child(4) {
        left: calc(50% - 225px);
        top: 150px;
    }
}

@media (max-width: 840px) {
    #inhaltsbereich .frame-werte-icons .col-50 {
        position: relative;
        width: 50%;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }

    .frame-werte-icons .col-50 .ce-bodytext:before {
        width: 60px !important;
    }

    .frame-werte-icons .col-50:first-child,
    .frame-werte-icons .col-50:nth-child(2) {
        margin-bottom: 50px;
    }

    .frame-werte-icons .col-50 .ce-gallery {
        position: relative;
    }

    .frame-werte-icons .col-50 .ce-textpic {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .frame-werte-icons .ce-bodytext {
        position: static;
        margin-top: 20px;
        width: 100%;
    }

    #inhaltsbereich .frame-werte-icons .col-50 .ce-bodytext:before {
        top: 110px;
        animation: none !important;
    }

    .frame-werte-icons .col-50:first-child .ce-bodytext:before,
    .frame-werte-icons .col-50:nth-child(3) .ce-bodytext:before {
        left: 40px;
    }


    .frame-werte-icons .col-50:first-child .ce-bodytext:before {
        transform: rotate(130deg);
    }

    .frame-werte-icons .col-50:nth-child(2) .ce-bodytext:before,
    .frame-werte-icons .col-50:nth-child(4) .ce-bodytext:before {
        left: unset;
        right: 40px;
    }

    .frame-werte-icons .col-50:nth-child(2) .ce-bodytext:before {
        transform: rotate(48deg);
    }

    .frame-werte-icons .col-50:nth-child(3) .ce-bodytext:before {
        transform: rotate(240deg);
        scale: -1 1;
    }

    .frame-werte-icons .col-50:nth-child(4) .ce-bodytext { 
        width: 90%;
    }

    .frame-werte-icons .col-50:nth-child(4) .ce-bodytext:before {
        transform: rotate(125deg);
        scale: 1 -1;
    }
}

@media (max-width: 760px) {
    .frame-werte-icons .col-50 .ce-gallery {
        width: 90px;
        height: 90px;
    }

    #inhaltsbereich .frame-werte-icons .col-50 .ce-bodytext:before {
        top: 90px;
    }

    .frame-werte-icons .col-50:first-child .ce-bodytext:before,
    .frame-werte-icons .col-50:nth-child(3) .ce-bodytext:before {
        left: 20px;
    }

    .frame-werte-icons .col-50:nth-child(2) .ce-bodytext:before,
    .frame-werte-icons .col-50:nth-child(4) .ce-bodytext:before {
        right: 20px;
    }
}

@media (max-width: 600px) {
    #navi.resp-nav.open + .lang-menu {
		margin-right: 0;
		top: 100%;
		z-index: 10;
		margin-top: -62px;
		transition-delay: 0.2s;
	}

    #navi.knownheight.open, .utop #navi.knownheight.open {
		padding: 0 0 80px 0;
	}

    
    .frame-werte-icons .col-50:first-child .ce-bodytext:before,
    .frame-werte-icons .col-50:nth-child(3) .ce-bodytext:before {
        left: 0;
    }

    .frame-werte-icons .col-50:nth-child(2) .ce-bodytext:before,
    .frame-werte-icons .col-50:nth-child(4) .ce-bodytext:before {
        right: 0;
    }

    body.lb_body .lightbox {
        padding: 25px 25px 0 25px;
    }

    .page975 .fancybox-content {
        max-width: 85%;
    }
}

@media (max-width: 500px) {
    #inhaltsbereich .news-werte-stories .kategoriebox {
        top: 150px;
        width: 100px;
        left: calc(50% - 50px);
    }

    #inhaltsbereich .news-werte-stories .news-imgwrap {
        max-height: 200px;
    }
}


@media (max-width: 520px) {
    .frame-werte-icons .col-50 .ce-gallery {
        width: 60px;
        height: 60px;
    }

    .frame-werte-icons .ce-bodytext {
        font-size: 20px;
    }

    #inhaltsbereich .frame-werte-icons .col-50 .ce-bodytext:before {
        top: 70px;
        width: 50px !important;
    }
}

@media (max-width: 400px) {
    #inhaltsbereich .frame-werte-icons .col-50 {
        width: 100%;
        margin-bottom: 40px;
    }

    #inhaltsbereich .frame-werte-icons .col-50:last-child {
        margin-bottom: 0;
    }

    .frame-werte-icons .col-50:first-child .ce-bodytext:before,
    .frame-werte-icons .col-50:nth-child(3) .ce-bodytext:before {
        left: 40px;
    }

    .frame-werte-icons .col-50:nth-child(2) .ce-bodytext:before,
    .frame-werte-icons .col-50:nth-child(4) .ce-bodytext:before {
        right: 40px;
    }

    .frame-werte-icons .col-50:nth-child(4) .ce-bodytext {
        width: 75%;
    }

    #inhaltsbereich .news-werte-stories .news-imgwrap {
        max-height: 165px;
    }

    #inhaltsbereich .news-werte-stories .kategoriebox {
        top: 105px;
    }

    #inhaltsbereich .werte-stories li {
        margin: 0 10px 5px 0;
    }

    #inhaltsbereich .werte-stories li a {
        padding: 5px;
        font-size: 20px;
    }
}