@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

.pie, .pie_bg {
  --p:20;
  --b:5px;
  --c:#255EAD;
  --w:auto;

  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}
.pie:before,
.pie:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.pie:before {
  inset: 0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}

.pie_bg {
	position: absolute;
	left:15px;
	bottom:0;
	z-index: -1
}

.pie_bg:before,
.pie_bg:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.pie_bg:before {
  inset: 0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}


.pie_bg:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}


.pie:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation: p 6s .5s both;
}
.no-round:before {
  background-size: 0 0, auto;
}
.no-round:after {
  content: none;
}
@keyframes p{
  from{--p:0}
}


.team_image {
  border-radius:50%;
}

.number-pie {
  color:#fff
}


@font-face {
   font-family: 'Comforta';
   src: url('../fonts/Comfortaa-Light.ttf');
   font-weight: 300;
   font-style: regular;
}


@font-face {
   font-family: 'Comforta';
   src: url('../fonts/Comfortaa-Regular.ttf');
   font-weight: 300;
   font-style: regular;
}

@font-face {
   font-family: 'Comforta';
   src: url('../fonts/Comfortaa-SemiBold.ttf');
   font-weight: 600;
   font-style: regular;
}


@font-face {
   font-family: 'Urbanist';
   src: url('../fonts/Urbanist-Regular.ttf');
   font-weight: 300;
   font-style: regular;
}

@font-face {
   font-family: 'Urbanist';
   src: url('../fonts/Urbanist-Medium.ttf');
   font-weight: 600;
   font-style: regular;
}

@font-face {
   font-family: 'Urbanist';
   src: url('../fonts/Urbanist-Bold.ttf');
   font-weight: 900;
   font-style: regular;
}

@font-face {
   font-family: 'NanumBrush';
   src: url('../fonts/NanumBrushScript-Regular.ttf');
   font-weight: 300;
   font-style: regular;
}

.dropdown .dropdown-menu {
  border:none
}

.citation_block  {
  font-family:'NanumBrush';
  font-size:2.5rem !important;
  line-height:2.75rem !important;
  padding-top:10px;
  margin-bottom:3rem !important
}

.citation_block  span{
  font-family:'Urbanist';
  font-size:0.5em !important;
  text-align:right;
  display:block
}


body {
	background: rgb(250,250,250);
	color:#57667e;
	font-family: "Urbanist";
    /*font-family: "PTSans";*/
	font-weight: 300;
	font-size:1.125em;
	line-height:1.665em 
}


#framework_click_icon_web {
  width:150px;
  position:absolute;
  left:45%;
  top:60%;
  transform: scale3d(1, 1, 1) translate(-50%,-50%);
  opacity: 0;
}

#framework_click_icon_web.inView {
  animation-name: pulse;
  animation-duration: 4s;
}

.modal-content {
  background:rgb(250,250,250)
}


@media (max-width: 700px) {

#framework_click_icon_web {

  width:40px;
}
  
}

.mitarbeiterbefragung-nav img {
  border:1px solid #b7b7b7 !important;
  cursor:pointer;
}

.mitarbeiterbefragung-nav .slick-slide {
  margin:0 10px;
}

.slick-prev:before, .slick-next:before {
font-size:30px;
}


pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes pulse {
  0% {
  -webkit-transform: scale3d(1, 1, 1) translate(-50%,-50%);
  transform: scale3d(1, 1, 1) translate(-50%,-50%);
    opacity: 1;
  }
  25% {
  -webkit-transform: scale(1.2, 1.2, 1.2) translate(-50%,-50%);
  transform: scale(1.2, 1.2, 1.2) translate(-50%,-50%);
opacity: 1;
  }
  50% {
  -webkit-transform: scale3d(1, 1, 1) translate(-50%,-50%);
  transform: scale3d(1, 1, 1) translate(-50%,-50%);
  opacity: 1;
  }
  75% {
  -webkit-transform: scale3d(1.2, 1.2, 1.2) translate(-50%,-50%);
  transform: scale3d(1.2, 1.2, 1.2) translate(-50%,-50%);
opacity: 1;
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1) translate(-50%,-50%);
  transform: scale3d(1, 1, 1) translate(-50%,-50%) ;
  opacity: 0;
  }
  }
  @keyframes pulse {
  0% {
  -webkit-transform: scale3d(1, 1, 1)  translate(-50%,-50%)
  transform: scale3d(1, 1, 1)  translate(-50%,-50%);
    opacity: 1;
  }
  25% {
  -webkit-transform: scale3d(1.2, 1.2, 1.2)  translate(-50%,-50%);
  transform: scale3d(1.2, 1.2, 1.2)  translate(-50%,-50%);
    opacity: 1;
  }
  50% {
  -webkit-transform: scale3d(1, 1, 1)  translate(-50%,-50%);
  transform: scale3d(1, 1, 1) translate(-50%,-50%) ;
    opacity: 1;
  }
  75% {
  -webkit-transform: scale3d(1.2, 1.2, 1.2) translate(-50%,-50%);
  transform: scale3d(1.2, 1.2, 1.2)  translate(-50%,-50%);
    opacity: 1;
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1) translate(-50%,-50%);
  transform: scale3d(1, 1, 1) translate(-50%,-50%) ;
    opacity: 0;
  }
 
  } 


.logo-slider .slick-slide {
  width:200px !important;
}

.modal-title {
  line-height:1.75rem
}


@media (max-width: 700px) {

.modal-title {
  line-height:1.2rem
}
  
}


@media (max-width: 700px) {

.col-12.text-center {
  text-align:left !important
}
  
}


#animated_header {
  position:relative;
}

#animated_header img {
  width:100vw
}

.navbar-collapse.show .dropdown-menu {
	border:none;
}

.navbar-collapse.show .dropdown-menu a {
	padding-left:10px;
}

.navbar-collapse.show .nav-link{
	color:rgba(0,0,0,0.9);
	font-size:1em
}

.nav-item.level2 .dropdown-item {
  padding-left:3rem
}


.icon_headline {
  font-family:'Comforta'
}


.navbar {
	background-color: rgba(255,255,255,1) !important;
	border-bottom: 1px solid #b7b7b7;
}


.navbar .nav-link {
	color:#000a2d;
	font-size:1.45rem;
	font-weight: 300
}

.navbar.fixed-top.scrolled {
	background-color:rgba(255,255,255,1) !important;
	transition: background-color 100ms linear;
}

.navbar.scrolled .nav-link {
	color:#000a2d;
}

#header_carousel .owl-nav {
	margin:0 !important;
		height:40px;
	line-height: 0;
}

#header_carousel .owl-nav .owl-next {
	border:1px solid #fff;
	border-radius: 50%;
	padding:5px !important;
	display: block;
	margin:0;
}

#header_carousel .owl-nav .circle.chevron-down {
	width:30px;
	height: 30px;
	background-size: contain;
	display: block;	
	
}


#header_carousel .owl-nav [class*=owl-]:hover {
	background:none;
}


#header_carousel .owl-prev {
	display: none;
	margin:0 !important;
	padding: 0 !important;
	width:0;
	height: 0;
	float:left;
}

.header_carousel_box {
	/*background:rgba(4,107,179,.5);*/
	
	height:auto;
	position: absolute;
	bottom: 0;
  	left: 50%;
	transform: translate(-50%,0);
	opacity: 0;
}

.header_carousel_box h2.h1 {
	font-weight:300;
	font-size:3em;
	line-height:1em;
	letter-spacing: 0.1em
}

#owl-navigation-box-right {
  display:none
}



.content-column-image {
  padding:0 20%
}


.service_overlay_trigger {
  color:#255EAD !important;
  display:inline;
  position:relative;
  cursor:pointer;
  font-size:1.3rem;
  padding-left:100px;
}

.service_overlay_trigger span {
   border-bottom:1px solid #000a2d;
}

.service_overlay_trigger:before {
  content:url('../img/quadrate_shg.svg');
  height: 24px;
  position:absolute;
  width:80px;
  left:0;
  margin-right:20px;
  top:0;
}

.icon_headline {
  padding-left:40px;
  position:relative;
}

.icon_headline.icon_headline_level2 {
  padding-left:70px;
}

.icon_headline:before {
  content: '';
  background:url('../img/blue_dot_01.svg');
  background-size: 20px 20px; 
  background-repeat: no-repeat;
  position:absolute;
  top:12px;
  left:0;
  width:20px;
  height:20px;
}

.icon_headline.icon_headline_level2:before {
  background:url('../img/blue_dot_02.svg');
  width:50px;
  height:20px;
  background-size: 50px 20px; 
}



.bg-dark h3, .bg-dark p, .bg-dark ul, .bg-dark a{
  color:#fff;
}

.bg-dark a {
  text-decoration:underline
}

.bg-dark .white-box {
  background:none;
}

.blue_bg a {
  color:#fff !important;
  text-decoration:underline
}

.blue_bg .icon_headline::before{
  background:url('../img/white_dot_01.svg');
}


@media (max-width: 700px) {
	.icon_headline:before{
		top:6px;
		width:20px;
		height:20px;
		font-size:20px;
	}
}

.parallax_100 {
  padding: 100px 0 !important;
}

.parallax_150 {
  padding:170px 0 !important;
}

.parallax_200 {
  padding:300px 0 !important;
}

.parallax_250 {
  padding:400px 0 !important;
}

@media (max-width: 700px) {

.parallax_200 {
  padding:150px 0 !important;
}
  
}


.blue_text {
  color:#255EAD
}

/*
.header_carousel_box::after{
	content: "";
    width: 20px;
    height: 100%;
    background:url("../img/icons/arrow-line.svg") no-repeat fixed 50% 50%;
	background-size: cover;
    top: 0;
    right: -20px;
    position: absolute;
    display: inline-block;	
}
*/

.header_carousel_box * {
	color:var(--white);
	white-space: nowrap;
}

.header_carousel_box.blue_box *, .header_carousel_box.second_box * {
	color:#222;
}


.header_carousel_link {
	color:var(--white);
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness:2px;
	text-underline-offset: 4px;
	font-size:1.5em
}

.header_carousel_link:hover {
	color:var(--white);
	text-decoration-color: var(--red);
	text-decoration-thickness:2px;
	text-underline-offset: 4px;
}


.header_carousel_box.blue_box .header_carousel_link, .header_carousel_box.blue_box .header_carousel_link:hover {
	color:var(--blue);
}



#owl-navigation-box-right {
	position: absolute;
	right:20px;
	top:100px;
	width:40px;
}

#header_carousel .owl-stage-outer {
	height:100vh;
}

#header_carousel .carousel-stripes {
	border-left:1px solid var(--red);
	margin:0 20px 0 19px
}

#header_carousel .carousel-stripes.first-stripe {
	margin-bottom: 20px;
}

#header_carousel .carousel-stripes.last-stripe {
	margin-top:20px;
	margin-bottom:20px;
}

#header_carousel .owl-dot span {
	background:none !important;
	width:15px !important;
	height:15px !important;
	position: relative;
}

#header_carousel .chevron-down svg path {
	fill:var(--red) !important;
}


#header_carousel .owl-dot span::before {
  background: #fff;
  content: "";
  inset: 0;
  position: absolute;
  transform: scale3d(1,1,1);
  transition: transform 0.5s ease-in-out;
  border-radius: 50px;
}

#header_carousel .owl-dot.active span::before {
  background: var(--red);
  content: "";
  inset: 0;
  position: absolute;
  transform: scale3d(1,1,1);
  transition: transform 0.5s ease-in-out;
  border-radius: 50px;
	
 
}



#header_carousel .owl-dot span:hover::before {
  transform: scale3d(1.3,1.3,1);
}

#services_carousel .owl-nav {
	position: absolute;
	right:30px;
	top:-30px;
}



#services_carousel .owl-nav button {
	width:25px;
	height:15px;
	cursor: default;
}

#services_carousel .owl-nav .owl-prev {
	margin-right:20px;
}



#services_carousel .owl-nav button:hover{
	cursor:pointer !important;
}

#services_carousel .owl-nav .disabled:hover{
	cursor: default !important
}


#services_carousel .owl-nav .chevron-down:hover svg path {
	fill:var(--red) !important;
	cursor: pointer !important;
}


#services_carousel .owl-nav .disabled svg path, #services_carousel .owl-nav .disabled:hover svg path {
	fill:#e9e9e9 !important;
	cursor: default !important;
}


#services_carousel .item {
	width:600px;
	height:400px;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: top center !important;
	overflow: hidden;
	position: relative

}


#services_carousel .services_carousel_content {
	position: absolute;
	bottom: 0;
	left:0;
	background:rgba(4,107,179,.75);
	color:#fff;
	padding:20px 30px;
}


#services_carousel .services_carousel_content a {
	color:#fff;
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness:2px;
	text-underline-offset: 4px;
}

#services_carousel .services_carousel_content a:hover {
	color:#fff;
	text-decoration-color: var(--red);
	text-decoration-thickness:2px;
	text-underline-offset: 4px;
}



.owl-carousel button.owl-dot, .owl-carousel .owl-next, .owl-carousel .owl-prev  {
	outline:none !important;
}



#contact_canvas_toggle {
  position:fixed;
  right:20px;
  bottom:20px;
  width:100px;
}

@media (max-width: 700px) {

#contact_canvas_toggle {
  width:70px;
}
  
}


.card {
	border-radius: 0;
	border:none;
}

.card-img-top {
	border-radius: 0
}


.btn {
	border-radius: 10px !important;
	box-shadow: 0 12px 24px rgba(0,0,0,.2);
	 margin: 0 0 .9rem;
    padding: .75em 1.5em;
}




h3 {
	margin-bottom: 1em;
	font-weight: 400;
	font-size:2em;
  letter-spacing:0.1em
}

@media (max-width: 700px) {
h3 {
	font-size:1.25em;
}
}

h4 {
	font-weight: 400;
}


.parallax {
	overflow: hidden; 
	position: relative; 
	width: 100%; 
	
	background-attachment: fixed; 
	background-size: cover; 
	-moz-background-size: cover; 
	-webkit-background-size: cover; 
	background-repeat: no-repeat; 
	background-position: top center;
	padding:100px 0
}

@supports (-webkit-touch-callout: none) {
    .parallax {
      background-attachment:scroll;
        background-size: auto 100vh;
    }
}


.parallax-content {
	padding:50px 100px;
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	/*background:rgba(4,107,179,.5);*/
}

.parallax-content * {
	white-space: nowrap;
}


.h1 {
	font-size:4em;
	font-weight: 300
}

.h2 {
	font-weight:200;
	font-size:2em
}


.h3 {
	font-weight:400;
	font-size:1.5em
}

.mt-10 {
	margin-top: 100px;
}

h1, h2, h3, h1 a, h2 a, h3 a {
	color:#000a2d
}


#carousel_services .item {
	background:#ff0000
}



.bg-blue {
	background:var(--blue);
}


.white-box {
	background:#fff
}

.navbar {
	padding:.5em;
	text-transform: uppercase
}



.citation_block {
	font-style: italic;
	font-size:1.5em;
	line-height: 1.3em;
	/*color:#255EAD;*/
  color:#000a2d;
	/*background: url("../img/citation.png") no-repeat 100% 70%;*/
	background-size: contain;
    display:inline-block;
}

.citation_block span {
	font-size:.7em;
	font-style:italic;
  color:#000a2d
	
}

.mb-10 {
	margin-bottom:6rem!important
}

.img-fluid.shadow {
	-webkit-box-shadow: 3px 3px 13px 1px rgba(0,0,0,0.3) !important; 
box-shadow: 3px 3px 13px 1px rgba(0,0,0,0.3) !important;
}


.content_link_list {
	list-style: none;
	padding:0;
}


.content_link_list li{
	position: relative;
	margin-left: 15px
	
}

.content_link_list li::before {
	content: '';
  background:url('../img/icons/chevron_list_right.svg');
	background-size:contain;
  width: 15px;
  height: 15px;
  display: block;
	position: absolute;
	left:-20px;
	top:8px;
}


.dark-spacer-div {
	min-height:10px;
	width:100%;
	background: #255EAD;
	padding:0
}

.dark-spacer-div.blue-bg {
  background:#255EAD
}


.dark-spacer-div h1, .dark-spacer-div h2, .dark-spacer-div h3 {
	font-weight:300;
  font-style:italic;
	letter-spacing: 0.1em;
	text-transform: uppercase;
    margin:0;
  padding:10px 0;
  font-size:1.5em;
  
}




a.btn.btn-primary{
	position: relative;
	background:#000a2d !important;
	padding:.5em 1.5em
}

a.btn.btn-primary::before{
	content: '';
  background:url('../img/icons/chevron_list_right.svg');
	background-size:contain;
  width: 15px;
  height: 15px;
  display: block;
	position: absolute;
	left:5px;
	top:12px;
}

.card-no-padding .card-body {
	padding-left:0
}



.news-list-view h3 {
  font-size:1.2em
}

.news-list-view .teaser-text p {
  display:inline
}

.news-list-view a.more {
  font-weight:bold;
}

.fw-bold {
  font-weight:700 !important
}

.list-group-item {
  background:none !important;
}

.tx-jobapplications .list-group-item{
  margin-bottom:0 !important;
}

strong {
  font-weight:700 !important;
}

.text-light {
  color:#f8f9fa
}


.btn-close {
    --bs-btn-close-color: #000;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --bs-btn-close-opacity: 0.5;
    --bs-btn-close-hover-opacity: 0.75;
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-btn-close-focus-opacity: 1;
    --bs-btn-close-disabled-opacity: 0.25;
    --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: var(--bs-btn-close-color);
    background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: var(--bs-btn-close-opacity)
}

.btn-close:hover {
    color: var(--bs-btn-close-color);
    text-decoration: none;
    opacity: var(--bs-btn-close-hover-opacity)
}

.btn-close:focus {
    outline: 0;
    box-shadow: var(--bs-btn-close-focus-shadow);
    opacity: var(--bs-btn-close-focus-opacity)
}

.btn-close.disabled,.btn-close:disabled {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    opacity: var(--bs-btn-close-disabled-opacity)
}

.btn-close-white {
    filter: var(--bs-btn-close-white-filter)
}

[data-bs-theme=dark] .btn-close {
    filter: var(--bs-btn-close-white-filter)
}

.column-modal .modal-header {
  padding-left:31px;
}

.disclaimer-box {
  background:rgba(250,250,250)
}

.footer-navi {
  padding-left:20px;
}

.footer-navi a {
  display:inline !important;
  padding:0 !important
}

.competence-teaser {
  position:relative;
}

.layouver_text_teaser {
  position:absolute;
  padding:10px;
  background:rgba(255,255,255,.8);
  bottom:10px;
  left:50%;
  transform:translate(-50%,0);
   color:#57667e;
  font-weight:400;
  text-align:center;
  font-size:1.4rem;
  white-space: nowrap;
}

.competence-teaser a {
   text-decoration:none;
}


h1.colorarea-headline {
  font-size:90px;
  font-weight:700
}

h3.colorarea-headline {
  font-size:60px;
  font-weight:700
}


.blue_bg_light {
  background-color:#7EB3DF
}

@media (max-width: 700px) {
h1.colorarea-headline {
  font-size:45px;
}

  h3.colorarea-headline {
  font-size:35px
}

}