/* barlow-regular - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/barlow-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('assets/fonts/barlow-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/barlow-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/barlow-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('assets/fonts/barlow-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('assets/fonts/barlow-v12-latin-regular.svg#Barlow') format('svg'); /* Legacy iOS */
}
/* barlow-500 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/barlow-v12-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('assets/fonts/barlow-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/barlow-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/barlow-v12-latin-500.woff') format('woff'), /* Modern Browsers */
       url('assets/fonts/barlow-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('assets/fonts/barlow-v12-latin-500.svg#Barlow') format('svg'); /* Legacy iOS */
}
/* barlow-700 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/barlow-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('assets/fonts/barlow-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/barlow-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/barlow-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('assets/fonts/barlow-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('assets/fonts/barlow-v12-latin-700.svg#Barlow') format('svg'); /* Legacy iOS */
}
/* barlow-condensed-regular - latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('assets/fonts/barlow-condensed-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/barlow-condensed-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/barlow-condensed-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('assets/fonts/barlow-condensed-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('assets/fonts/barlow-condensed-v12-latin-regular.svg#BarlowCondensed') format('svg'); /* Legacy iOS */
}
/* barlow-condensed-600 - latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-v12-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('assets/fonts/barlow-condensed-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/barlow-condensed-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/barlow-condensed-v12-latin-600.woff') format('woff'), /* Modern Browsers */
       url('assets/fonts/barlow-condensed-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('assets/fonts/barlow-condensed-v12-latin-600.svg#BarlowCondensed') format('svg'); /* Legacy iOS */
}


/* Global
--------------------------------------------- */
:root{
  --grey : #535D69;
  --dark-grey : #394350;
  --light-grey : #F1F0F3;
  --green : #CAD401;
}

html{font-size: 17px; -webkit-tap-highlight-color: transparent;}
body{font-family: 'Barlow', 'Open Sans', sans-serif; color: var(--grey);}
h1, h2, h3, h4, h5, h6{font-family: 'Barlow', 'Open Sans', sans-serif; color: #000;}
a{-webkit-transition: unset;-o-transition: unset;transition: unset;}
a:focus{outline: none;}


/* SweetAlert2
--------------------------------------------- */
body .swal2-container{z-index: 10000;}
body .swal2-close{color: var(--green);}
body .swal2-close:focus{background: transparent; -webkit-box-shadow: unset; box-shadow: unset; color: var(--green);}
body .swal2-container .wpml-ls-legacy-list-horizontal a{line-height: 1; margin: 0.5em; color: #666A02; background: rgb(202 212 1 / 10%); padding: 0.5em 0.75em; border-radius: 6px; font-size: 1rem; text-transform: uppercase; font-weight: 500;}
body .swal2-container .wpml-ls-legacy-list-horizontal .wpml-ls-current-language{border: 1px solid var(--green); border-radius: 6px; pointer-events: none;}

@media only screen and (min-width: 960px){ 
    body .swal2-container{width: calc(100vw - 250px); right: 0; left: unset;} 
}


/* Button
--------------------------------------------- */
.site-container .wp-block-button .wp-block-button__link{background: var(--grey);}


/* Header
--------------------------------------------- */
.site-container{-webkit-animation: unset;animation: unset;}
.site-header{
  position: fixed;
  top: 0;
    bottom: 0;
    left: -250px;
  width: 250px;
  background-color: var(--grey);
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0;
  font-size: .875rem;
  -webkit-box-shadow: 1px 0 5px rgb(0 0 0 / 20%);
          box-shadow: 1px 0 5px rgb(0 0 0 / 20%);
}
.site-header .wrap{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100%; overflow: auto;}
.site-header .title-area{padding: 1.5rem; width: 100%; background-color: var(--dark-grey);}
.site-header .title-area a.__logo{color: #fff;}
.site-header .title-area a.__logo p{color: #fff; margin: .75em 0 0 0; line-height: 1.5;}
.site-header .title-area a.__logo svg{width: 70px; display: block;}

.site-header .bottom-area{padding: 1.5rem; margin-top: auto;}
.site-header .bottom-area p{color: #8d9caf;}
.site-header .bottom-area a.__hilfe{display: inline-block; color: var(--green); background: rgb(202 212 1 / 10%); padding: .25em .75em; border-radius: 6px; font-weight: 700;}
.site-header .bottom-area a.__hilfe i{display: inline-block; margin-right: .25em;}

@media only screen and (min-width: 960px){
  .site-header{left: 0;}
}

.site-header .nav-area{margin-top: 2px;}
.site-header .nav-area > nav li a:hover{opacity: .75}
.site-header .nav-area > nav > ul > li{position: relative;}
.site-header .nav-area > nav > ul > li:after{content: "\f054"; font-family: 'Font Awesome 6 Free'; position: absolute; right: 18px; top: 22px; line-height: 1; font-size: .5rem; font-weight: 700;}
.site-header .nav-area > nav > ul > li a{color: #C1D9F5; font-weight: 700; padding: 1em 1.5rem; display: block; position: relative;}
.site-header .nav-area > nav > ul > li a i{display: inline-block; margin-right: .5em;}
.site-header .nav-area > nav > ul > li.current-menu-item > a,
.site-header .nav-area > nav > ul > li.current-page-parent > a,
.site-header .nav-area > nav > ul > li.current-menu-ancestor > a{color: #fff;}
.site-header .nav-area > nav > ul > li.current-menu-item,
.site-header .nav-area > nav > ul > li.current-page-parent,
.site-header .nav-area > nav > ul > li.current-menu-ancestor{background-color: #323A45;}
.site-header .nav-area > nav > ul > li.current-menu-item.menu-item-has-children,
.site-header .nav-area > nav > ul > li.current-page-parent.menu-item-has-children,
.site-header .nav-area > nav > ul > li.current-menu-ancestor.menu-item-has-children{padding-bottom: 1rem}
.site-header .nav-area > nav > ul > li.current-menu-item:before,
.site-header .nav-area > nav > ul > li.current-page-parent:before,
.site-header .nav-area > nav > ul > li.current-menu-ancestor:before{content: ''; height: 100%; width: 4px; background-color: #C1D9F5; position: absolute; left: 0; top: 0;}
.site-header .nav-area > nav > ul > li:not(.current-menu-item):not(.current-page-parent):not(.current-menu-ancestor) > ul{display: none;}
.site-header .nav-area > nav > ul > li > ul > li:not(.current-menu-item):not(.current-menu-ancestor) > ul{display: none;}
.site-header .nav-area > nav > ul > li > ul > li > a{padding: .5em 2rem;}
.site-header .nav-area > nav > ul > li > ul > li.current-menu-item > a,
.site-header .nav-area > nav > ul > li > ul > li.current-menu-ancestor > a{color: #fff;}
.site-header .nav-area > nav > ul > li > ul > li > ul > li > a{font-size: .75rem; font-weight: 400; padding: .25em 2.5rem; color: #C1D9F5; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden;}
.site-header .nav-area > nav > ul > li > ul > li > ul > li.current-menu-item > a{color: #fff;}
.site-header .nav-area > nav > ul > li > ul > li > ul{background: #000; padding: 1rem 0;}


/* Site Inner
--------------------------------------------- */
.site-inner{max-width: 100%; padding: 0;}

@media only screen and (min-width: 960px){
  .site-inner{margin-left: 250px;}
}


/* Top Bar
--------------------------------------------- */
.site-inner .top-bar{
  background-color: var(--light-grey); 
  padding: 25px; 
  border-bottom: 6px solid var(--green); 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 14px;
}
.site-inner .top-bar .__logo{width: 135px; display: block;}
.site-inner .top-bar nav{margin-left: auto;}
.site-inner .top-bar nav ul{display: -webkit-box;display: -ms-flexbox;display: flex;}
.site-inner .top-bar nav ul li a{padding: 0 .75em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #8FA0B5; font-weight: 700; outline: none;}
.site-inner .top-bar nav ul li a i{display: inline-block; font-size: 1.5em; color: var(--grey);}
.site-inner .top-bar nav ul li a span{display: none;}
html.dark .site-inner .top-bar nav ul li a i{color: #fff;}
html.dark .site-inner .top-bar nav ul li a i.fa-toggle-off:before{content: '\f205';}

@media only screen and (min-width: 960px){
  .site-inner .top-bar nav ul li a{margin: 0 .25em;}
  .site-inner .top-bar nav ul li a i{margin-right: .5em;}
  .site-inner .top-bar nav ul li a span{display: inline-block;}
}

@media only screen and (min-width: 1280px){
  .site-inner .top-bar{padding: 25px 50px;}
}


/* Content
--------------------------------------------- */
.site-inner #genesis-content{width: 100%; padding: 0;}
.site-inner #genesis-content > *,
.site-inner #genesis-content > * > h1{padding: 50px 25px; margin: 0;}
.site-inner #genesis-content > article{margin: 0; padding: 0 !important;}
.site-inner #genesis-content > article .entry-header{padding: 50px 25px; -webkit-box-shadow: 0 2px 3px rgb(0 0 0 / 5%); box-shadow: 0 2px 3px rgb(0 0 0 / 5%); position: relative;}
.site-inner #genesis-content > article h1,
.site-inner #genesis-content > article h2{font-weight: 700; font-size: 1.625rem;}
.site-inner #genesis-content > article .entry-header .breadcrumb{margin: 0; border: 0; padding: 0; font-size: .875rem; font-weight: 700;}
.site-inner #genesis-content > article .entry-header .breadcrumb span{font-weight: 400;}
.site-inner #genesis-content > article .entry-header .breadcrumb a,
.site-inner #genesis-content > article .entry-header .breadcrumb span a{color: inherit; font-weight: 400;}
.site-inner #genesis-content > article .entry-header .breadcrumb .__sep{margin: 0 .5em; display: inline-block;}

.site-inner #genesis-content > article .entry-header form.search-form{position: absolute; right: 50px; top: 50px; display: none;}
.site-inner #genesis-content > article .entry-header form.search-form input{border: 0; color: #8FA0B5; font-size: 14px; min-width: 290px; background-color: transparent;}
.site-inner #genesis-content > article .entry-header form.search-form input::-webkit-input-placeholder{color: #8FA0B5;}
.site-inner #genesis-content > article .entry-header form.search-form input::-moz-placeholder{color: #8FA0B5;}
.site-inner #genesis-content > article .entry-header form.search-form input:-ms-input-placeholder{color: #8FA0B5;}
.site-inner #genesis-content > article .entry-header form.search-form input::-ms-input-placeholder{color: #8FA0B5;}
.site-inner #genesis-content > article .entry-header form.search-form input::placeholder{color: #8FA0B5;}

.site-inner #genesis-content > article .entry-content{padding: 50px 25px; background-color: var(--light-grey);}

.__box--title{margin-bottom: .5em;}
.__box--title span{display: inline-block; font-weight: 700; color: #000;}
.__box{padding: 20px; background-color: #fff; border-radius: 6px; -webkit-box-shadow: 0 2px 3px rgb(0 0 0 / 5%); box-shadow: 0 2px 3px rgb(0 0 0 / 5%); margin-bottom: 3em;}
.__box > *:last-child{margin: 0;}


@media only screen and (min-width: 1280px){
  .site-inner #genesis-content > *,
  .site-inner #genesis-content > * > h1,
  .site-inner #genesis-content > article .entry-header{padding: 50px 50px;}
  .site-inner #genesis-content > article .entry-header form.search-form{display: block;}
  .site-inner #genesis-content > article .entry-content{padding: 50px;}
}


/* Search page
--------------------------------------------- */
body.search .site-inner #genesis-content > .archive-description .archive-title{padding: 0;}
body.search .site-inner #genesis-content > article header{padding-top: 0; padding-bottom: 25px; background-color: var(--light-grey);}
body.search .site-inner #genesis-content > article header h2{margin: 0;}
body.search .site-inner #genesis-content > article header h2 a{display: block; padding: 20px; background-color: #fff; border-radius: 6px; -webkit-box-shadow: 0 2px 3px rgb(0 0 0 / 5%); box-shadow: 0 2px 3px rgb(0 0 0 / 5%); margin-bottom: 2em; margin: 0; font-size: 1.5rem;}
body.search .site-inner #genesis-content > article .entry-content{display: none;}
body.search .site-inner #genesis-content > article:first-of-type header{padding-top: 50px;}
body.search .site-inner #genesis-content > article:last-of-type header{padding-bottom: 50px;}
body.search .site-inner #genesis-content > article header h2 a:before{content: '\f682'; font-family: 'Font Awesome 6 Free'; margin-right: 1em; color: var(--green);}
body.search.dark .site-inner #genesis-content > .entry,
body.search.dark .site-inner #genesis-content > .entry *,
body.search.dark .site-inner #genesis-content > .archive-description .archive-title{color: #fff;}
body.search.dark .site-inner #genesis-content > article header{background-color: var(--dark-grey);}
body.search.dark .site-inner #genesis-content > article header h2 a{color: #C1D9F5; background-color: var(--grey);}


/* Footer
--------------------------------------------- */
.site-footer{text-align: left; font-size: .875rem; padding: 25px; color: var(--grey); font-size: .75rem; border: 0;}
.site-footer .footer-top{display: -webkit-box;display: -ms-flexbox;display: flex; padding-bottom: 1em; margin-bottom: 1em; border-bottom: 1px solid #D6D6D6;}
.site-footer .footer-top nav.__rechtliches{margin-left: auto;}
.site-footer .footer-top nav.__rechtliches ul{display: -webkit-box;display: -ms-flexbox;display: flex;}
.site-footer .footer-top nav.__rechtliches ul li a{color: var(--grey); padding: 0 .5em;}

@media only screen and (min-width: 960px){
  .site-footer{margin-left: 250px;}
}

@media only screen and (min-width: 1280px){
  .site-footer{padding: 25px 50px;}
}


/* Shortcode [prozesse]
--------------------------------------------- */
#prozesse{margin-bottom: 3em}
#prozesse > .__filter{margin-bottom: 60px;}
#prozesse > .__filter .__box a{color: inherit; display: block; padding: 0.25em 0.75em; margin: 0 .25em; border-radius: 6px;}
#prozesse > .__filter .__box a.__active{background: rgb(202 212 1 / 10%); color: #666A00;}
html.dark #prozesse > .__filter .__box a{color: #C1D9F5;}
html.dark #prozesse > .__filter .__box a.__active{background: rgb(255 255 255 / 10%); color: #fff;}

#prozesse > article{-webkit-transition: .3s ease;-o-transition: .3s ease;transition: .3s ease;}
#prozesse > article:not(:last-child){margin-bottom: 60px;}
#prozesse > article > header{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 30px;}
#prozesse > article > header i{display: inline-block; color: var(--grey); margin-right: .5em; font-size: 2rem;}
#prozesse > article > header h2{margin: 0; line-height: 1; font-size: 1rem !important}
#prozesse > article > header h2 small{display: block; font-weight: 400;}
#prozesse > article > main a.__status{color: inherit; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 10px; margin-bottom: 10px; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease;}
#prozesse > article > main a.__status .__position{background-color: #c9c9c9; border-radius: 50%; display: inline-block; z-index: 2; margin-bottom: -20px;}
#prozesse > article > main a.__status .__position > span{margin: .5em; width: 50px; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; background-color: #fff; -webkit-box-shadow: 0 2px 6px rgb(0 0 0 / 20%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%); font-weight: 600; font-size: 20px; font-family: 'Barlow Condensed'; color: #000 !important;}
#prozesse > article > main a.__status .__content{width: 95px; height: 120px; border-bottom: 6px solid #c9c9c9; background: #fff; padding-top: 30px; padding-bottom: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: 0 2px 3px rgb(0 0 0 / 10%); box-shadow: 0 2px 3px rgb(0 0 0 / 10%);}
#prozesse > article > main a.__status .__content h3{font-size: 14px; line-height: 16px; overflow: hidden; font-family: 'Barlow Condensed'; text-align: center; margin: 0; padding: 0 5px; font-weight: 600; color: #000 !important;}
#prozesse > article > main a.__status .__content i{display: inline-block; margin-top: auto; font-size: 24px; line-height: 1; color: #c9c9c9;}
html.dark #prozesse > article > header i{color: #C1D9F5;}
html.dark #prozesse > article > header h2{color: #fff !important;}

#prozesse.__filter--active > article > main a.__status{opacity: .2; pointer-events: none; -webkit-filter: blur(2px); filter: blur(2px);}
#prozesse[data-filter="agentur"] > article > main a.__status.agentur,
#prozesse[data-filter="zentralrepro"] > article > main a.__status.zentralrepro,
#prozesse[data-filter="lieferant"] > article > main a.__status.lieferant,
#prozesse[data-filter="kl-brandmanagement"] > article > main a.__status.brandmanagement,
#prozesse[data-filter="kl-qualitaetsmanagement"] > article > main a.__status.qualitaetsmanagement{opacity: 1; pointer-events: auto; -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-filter: blur(0); filter: blur(0);}

#prozesse[data-filter="lieferant"] > article > main a:nth-child(3).__status.__semi.lieferant,
#prozesse[data-filter="kl-brandmanagement"] > article > main a:nth-child(3).__status.__semi.brandmanagement{opacity: .4;}

#prozesse[data-filter="lieferant"] > article > main a:nth-child(5).__status.__semi.lieferant{opacity: .4;}

#prozesse > article > main a.__status[data-color="marine"] .__position{background-color: #8faadc;}
#prozesse > article > main a.__status[data-color="marine"] .__content{border-color: #8faadc;}
#prozesse > article > main a.__status[data-color="marine"] .__content i{color: #8faadc;}
#prozesse > article > main a.__status[data-color="yellow"] .__position{background-color: #ffc000;}
#prozesse > article > main a.__status[data-color="yellow"] .__content{border-color: #ffc000;}
#prozesse > article > main a.__status[data-color="yellow"] .__content i{color: #ffc000;}
#prozesse > article > main a.__status[data-color="red"] .__position{background-color: #ff0000;}
#prozesse > article > main a.__status[data-color="red"] .__content{border-color: #ff0000;}
#prozesse > article > main a.__status[data-color="red"] .__content i{color: #ff0000;}
#prozesse > article > main a.__status[data-color="green"] .__position{background-color: #70ad47;}
#prozesse > article > main a.__status[data-color="green"] .__content{border-color: #70ad47;}
#prozesse > article > main a.__status[data-color="green"] .__content i{color: #70ad47;}
#prozesse > article > main a.__status[data-color="grey"] .__position{background-color: #404040;}
#prozesse > article > main a.__status[data-color="grey"] .__content{border-color: #404040;}
#prozesse > article > main a.__status[data-color="grey"] .__content i{color: #404040;}

@media only screen and (min-width: 480px){
  #prozesse > .__filter .__box a{display: inline-block;}
  #prozesse > article > main a.__status .__content{width: 110px;}
}

@media only screen and (min-width: 1920px){
  #prozesse > article{padding-left: 5vw;}
}

#prozesse > article > main a.__status .__position div[class*="__arrow--1"]{height: 24px; width: 125px; background-image: url(images/arrow.svg); background-size: cover; position: absolute; pointer-events: none;}
#prozesse > article > main a.__status .__position div.__arrow--1--top--right{top: -24px; left: 50%;}
#prozesse > article > main a.__status .__position div.__arrow--1--top--left{top: -24px; left: 50%; top: -24px; -webkit-transform: rotate(-180deg) scaleY(-1); -ms-transform: rotate(-180deg) scaleY(-1); transform: rotate(-180deg) scaleY(-1); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left;}
#prozesse > article > main a.__status .__position div.__arrow--1--bottom--right{bottom: -24px; left: 50%; -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1);}
#prozesse > article > main a.__status .__position div.__arrow--1--bottom--left{bottom: 0; left: 50%; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left;}

#prozesse > article > main a.__status .__position div[class*="__arrow--2"]{height: 42px; width: 250px; background-image: url(images/arrow-2.svg); background-size: cover; position: absolute;}
#prozesse > article > main a.__status .__position div.__arrow--2--top--right{top: -42px; left: 50%;}
#prozesse > article > main a.__status .__position div.__arrow--2--top--left{top: -42px; left: 50%; top: -42px; -webkit-transform: rotate(-180deg) scaleY(-1); -ms-transform: rotate(-180deg) scaleY(-1); transform: rotate(-180deg) scaleY(-1); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left;}
#prozesse > article > main a.__status .__position div.__arrow--2--bottom--right{bottom: -42px; left: 50%; -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1);}
#prozesse > article > main a.__status .__position div.__arrow--2--bottom--left{bottom: 0; left: 50%; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left;}

#prozesse > article > main a.__status .__position div[class*="__arrow--3"]{height: 50px; width: 375px; background-image: url(images/arrow-3.svg); background-size: cover; position: absolute;}
#prozesse > article > main a.__status .__position div.__arrow--3--top--right{top: -50px; left: 50%;}

#prozesse > article > main a.__status .__position div[class*="__arrow--6"]{height: 64px; width: 750px; background-image: url(images/arrow-6.svg); background-size: cover; position: absolute;}
#prozesse > article > main a.__status .__position div.__arrow--6--top--right{top: -64px; left: 50%;}
#prozesse > article > main a.__status .__position div.__arrow--6--top--left{top: -64px; left: 50%; top: -64px; -webkit-transform: rotate(-180deg) scaleY(-1); -ms-transform: rotate(-180deg) scaleY(-1); transform: rotate(-180deg) scaleY(-1); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left;}
#prozesse > article > main a.__status .__position div.__arrow--6--bottom--right{bottom: -64px; left: 50%; -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1);}
#prozesse > article > main a.__status .__position div.__arrow--6--bottom--left{bottom: 0; left: 50%; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left;}

html.dark #prozesse > article > main a.__status .__position div[class*="__arrow"]{opacity: .3;}

@media only screen and (max-width: 1600px){
    #prozesse > article > main a.__status .__position div[class*="__arrow"]{display: none;}
}


/* Status Single
--------------------------------------------- */
.__status--title{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 25px;}
.__status--title .__position{margin-right: 10px; background-color: #E6E6E6; border-radius: 50%;}
.__status--title .__position > span{
    width: 50px; 
    height: 50px; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
        -ms-flex-align: center; 
            align-items: center; 
    -webkit-box-pack: center; 
        -ms-flex-pack: center; 
            justify-content: center; 
    border-radius: 50%; 
    background-color: #fff; 
    -webkit-box-shadow: 0 2px 6px rgb(0 0 0 / 20%); 
            box-shadow: 0 2px 6px rgb(0 0 0 / 20%); 
    font-weight: 600; 
    font-size: 20px;
    font-family: 'Barlow Condensed';
}
.__status--title h1{margin: 0;}

@media only screen and (min-width: 1280px){
    .__status--title .__position{margin-right: 25px;}
    .__status--title .__position > span{margin: .35em; width: 100px; height: 100px; font-size: 45px;}
    .__status--title h1{font-size: 2.625rem !important;}
}

select#anpassungsgrund-select{
    width: 375px; 
    border-radius: 6px; 
    border-color: #D6D6D6; 
    max-width: 100%;
    background-color: transparent;
    background-image: -o-linear-gradient(45deg, transparent 50%, gray 50%), -o-linear-gradient(315deg, gray 50%, transparent 50%);
    background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);  
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-box-shadow: 0 0 12px rgb(202 212 1 / 25%);
            box-shadow: 0 0 12px rgb(202 212 1 / 25%);
}
html.dark select#anpassungsgrund-select{color: #fff; -webkit-box-shadow: none; box-shadow: none;}

section.__status--anpassungsgrund{margin: 0; padding: 0; max-height: 0; overflow: hidden; -webkit-transition: max-height 0.8s ease, opacity 0.8s ease; -o-transition: max-height 0.8s ease, opacity 0.8s ease; transition: max-height 0.8s ease, opacity 0.8s ease; opacity: 0;}
section.__status--anpassungsgrund.__active{max-height: 5000px; opacity: 1;}
section.__status--anpassungsgrund > article > header .__aufgaben--filter{margin: .5em 0 2em 0; font-size: .75rem;}
section.__status--anpassungsgrund > article > header .__aufgaben--filter a{display: inline-block; color: #fff;  background: var(--grey); padding: 0.25em 0.75em; border-radius: 6px; margin: 0 .25em 0 0; font-size: 1em; font-weight: 500;}
section.__status--anpassungsgrund > article > header .__aufgaben--filter a.__reset {background-color: transparent; color: var(--grey); border: 1px solid rgb(83 93 105 / 20%);}
section.__status--anpassungsgrund > article > main > div{width: 100%;}
section.__status--anpassungsgrund > article > main > div .__aufgabenbeschreibung:not(:last-child){margin-bottom: 1em;}
section.__status--anpassungsgrund > article > main > div img.alignnone{margin-bottom: 5px;}
section.__status--anpassungsgrund > article > main .__box.__aufgabenbeschreibung h4.__aufgabenbeschreibung--title{margin: 0 0 1em 0; display: inline-block; color: #666A02; background: rgb(202 212 1 / 10%); padding: 0.25em 0.75em; border-radius: 6px; font-size: 1rem;}

html.dark section.__status--anpassungsgrund > article > main > div .__aufgabenbeschreibung h4{color: var(--green);}
html.dark section.__status--anpassungsgrund > article > header .__aufgaben--filter a.__reset{color: #fff}
html.dark section.__status--anpassungsgrund > article > main .__box.__aufgabenbeschreibung h4.__aufgabenbeschreibung--title{background: var(--green)}

section.__status--anpassungsgrund[data-filter="Agentur"] .__aufgabenbeschreibung:not(.agentur){display: none;}
section.__status--anpassungsgrund[data-filter="Repro"] .__aufgabenbeschreibung:not(.repro),
section.__status--anpassungsgrund[data-filter="zentralrepro"] .__aufgabenbeschreibung:not(.repro){display: none;}
section.__status--anpassungsgrund[data-filter="LF"] .__aufgabenbeschreibung:not(.lf),
section.__status--anpassungsgrund[data-filter="lieferant"] .__aufgabenbeschreibung:not(.lf){display: none;}
section.__status--anpassungsgrund[data-filter="BM"] .__aufgabenbeschreibung:not(.bm),
section.__status--anpassungsgrund[data-filter="kl-brandmanagement"] .__aufgabenbeschreibung:not(.bm){display: none;}
section.__status--anpassungsgrund[data-filter="QM"] .__aufgabenbeschreibung:not(.qm),
section.__status--anpassungsgrund[data-filter="kl-qualitaetsmanagement"] .__aufgabenbeschreibung:not(.qm){display: none;}

section.__status--anpassungsgrund[data-filter="Agentur"]  .__aufgaben--filter a.agentur,
section.__status--anpassungsgrund[data-filter="Repro"] .__aufgaben--filter a.repro,
section.__status--anpassungsgrund[data-filter="zentralrepro"]  .__aufgaben--filter a.repro,
section.__status--anpassungsgrund[data-filter="LF"] .__aufgaben--filter a.lf,
section.__status--anpassungsgrund[data-filter="lieferant"]  .__aufgaben--filter a.lf,
section.__status--anpassungsgrund[data-filter="BM"] .__aufgaben--filter a.bm,
section.__status--anpassungsgrund[data-filter="kl-brandmanagement"]  .__aufgaben--filter a.bm,
section.__status--anpassungsgrund[data-filter="QM"] .__aufgaben--filter a.qm,
section.__status--anpassungsgrund[data-filter="kl-qualitaetsmanagement"]  .__aufgaben--filter a.qm{background-color: var(--green); color: var(--grey);}

@media only screen and (min-width: 1280px){
    section.__status--anpassungsgrund > article > header{display: -webkit-box;display: -ms-flexbox;display: flex;}
    section.__status--anpassungsgrund > article > header .__aufgaben--filter{margin: 0; font-size: 1rem; margin-left: 50px;}
    section.__status--anpassungsgrund > article > main{display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
    section.__status--anpassungsgrund > article > main{-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
    section.__status--anpassungsgrund > article > main > div.__col2{min-width: 49%; max-width: 49%; -ms-flex-preferred-size: 49%; flex-basis: 49%;}
}

section.__video--tutorials{display: -ms-grid;display: grid; -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); grid-gap: 2em;}
html.dark section.__video--tutorials article figure figcaption{color: #fff;}

@media only screen and (min-width: 1280px){
      section.__video--tutorials{-ms-grid-columns: (1fr)[2];grid-template-columns: repeat(2, 1fr);}
}

@media only screen and (min-width: 1920px){
      section.__video--tutorials{-ms-grid-columns: (1fr)[3];grid-template-columns: repeat(4, 1fr);}
}


/* News
--------------------------------------------- */
#news{
    width: 95%;
    height: 100%;
    position: fixed;
    top: 0;
    right: -95%;
    z-index: 1000;
    background: #fff;
    padding: 100px 5% 50px;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    pointer-events: none;
}
html.showNews{height: 100%; position: fixed; top: 0; left: 0; overflow: hidden; width: 100%;}
html.showNews #news{right: 0; pointer-events: auto; -webkit-box-shadow: -1px 0 5px rgb(0 0 0 / 10%); box-shadow: -1px 0 5px rgb(0 0 0 / 10%);}

#news .hideNews{position: absolute; left: 1em; top: 1em; line-height: 1; font-size: 34px; display: inline-block; color: var(--green); cursor: pointer;}
#news > section{height: 100%; overflow: auto;}

#news > section > article{padding-left: 44px; position: relative; margin-bottom: 3em;}
#news > section > article:before{content: "\f0f3"; font-family: 'Font Awesome 6 Free'; position: absolute; left: 0; top: 44px; line-height: 1; display: inline-block; color: var(--grey); font-size: 26px;}
#news > section > article .metaInfo{margin-bottom: .5em;}
#news > section > article .metaInfo span{padding: 0.25em 0.75em; margin: 0 0.25em 0.25em 0; border-radius: 6px; background: rgb(202 212 1 / 10%); color: #666A00; font-weight: 500; font-size: .85rem;}
#news > section > article .entry-title{font-weight: 700;}
#news > section > article .entry-content,
#news > section > article .entry-content *{font-size: .85rem;}

@media only screen and (min-width: 768px){
    #news{width: 720px; right: -720px;}
}


/* Dark Modus
--------------------------------------------- */
html.dark,
html.dark body{background-color: var(--dark-grey);}
html.dark a{color: var(--green);}
html.dark h1, html.dark h2, html.dark h3{color: #fff;}
html.dark .site-inner .top-bar{background-color: var(--dark-grey);}
html.dark .site-inner #genesis-content > article .entry-header{background-color: var(--grey)}
html.dark .site-inner #genesis-content > article .entry-header *{color: #fff; border-color: #fff;}
html.dark .site-inner #genesis-content > article .entry-content{background-color: var(--dark-grey); color: #fff;}
html.dark .site-inner #genesis-content > article .entry-content .__box{background-color: var(--grey);}
html.dark .site-inner #genesis-content > article .entry-content .__box--title span{color: #fff;}
html.dark .site-inner #genesis-content > article .entry-content .__status--title .__position{background-color: #C1D9F5;}
html.dark .site-inner #genesis-content > article .entry-content .__status--title .__position > span{background-color: var(--grey);}
html.dark .site-footer{background-color: var(--grey); color: #fff;}
html.dark .site-footer .footer-top{border-color: #ffffff1c;}
html.dark .site-footer .footer-top svg path{fill: #fff !important}
html.dark .site-footer .footer-top nav.__rechtliches ul li a{color: #fff;}
html.dark select option{color: #000; background-color: #fff}


/* SWAP transition
--------------------------------------------- */
.transition-fade{
    transition: opacity .3s, 
    -webkit-transform .3s;
    transition: opacity .3s, -webkit-transform .3s;
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    -o-transition: transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s, -webkit-transform .3s;
    transition: transform .3s, opacity .3s, 
    -webkit-transform .3s;
    opacity: 1; 
    -webkit-transform: translateY(0); 
    -ms-transform: translateY(0); 
        transform: translateY(0);
}
html.is-animating .transition-fade{opacity: 0; -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px);}


/* Tippy JS
--------------------------------------------- */
.tippy-box[data-animation=scale][data-placement^=top]{-webkit-transform-origin:bottom;-ms-transform-origin:bottom;transform-origin:bottom}.tippy-box[data-animation=scale][data-placement^=bottom]{-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top}.tippy-box[data-animation=scale][data-placement^=left]{-webkit-transform-origin:right;-ms-transform-origin:right;transform-origin:right}.tippy-box[data-animation=scale][data-placement^=right]{-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left}.tippy-box[data-animation=scale][data-state=hidden]{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);opacity:0}.tippy-box[data-animation=scale-extreme][data-placement^=top]{-webkit-transform-origin:bottom;-ms-transform-origin:bottom;transform-origin:bottom}.tippy-box[data-animation=scale-extreme][data-placement^=bottom]{-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top}.tippy-box[data-animation=scale-extreme][data-placement^=left]{-webkit-transform-origin:right;-ms-transform-origin:right;transform-origin:right}.tippy-box[data-animation=scale-extreme][data-placement^=right]{-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left}.tippy-box[data-animation=scale-extreme][data-state=hidden]{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:.25}


/* Legende
--------------------------------------------- */
ul.__legende{margin: 1em 0;}
ul.__legende li{margin-bottom: .5em; font-size: 1rem;}
.__color--box{height: 0.75em; width: 4em; display: inline-block; border-radius: 0.2em; margin-right: 0.5em;}