* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Work Sans", Arial, Helvetica, sans-serif;
  overflow-x: hidden;
  overflow-y: scroll;
  color: var(--blau);
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
}
a {
  color: var(--blau);
  text-decoration: underline;
}
/*
 * Fonts & Schriften
 */
@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Work Sans Light";
  src: url("fonts/WorkSans-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Work Sans Medium";
  src: url("fonts/WorkSans-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Work Sans Bold";
  src: url("fonts/WorkSans-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Work Sans Black";
  src: url("fonts/WorkSans-Black.ttf") format("truetype");
}

h1 {
  font-family: "Work Sans Medium", Arial, Helvetica, sans-serif;
  font-size: calc(28px + (95 - 28) * (100vw - 320px) / (1920 - 320));
  line-height: 0.7;
}

h1 span.text-blue {
  font-family: "Work Sans Black", Arial, Helvetica, sans-serif;
}

h2 {
  font-family: "Work Sans Bold", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: calc(24px + (40 - 24) * (100vw - 320px) / (1920 - 320));
}

h3 {
  font-family: "Work Sans Bold", Arial, Helvetica, sans-serif;
  font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1920 - 320));
}

.text-link {
  font-family: "Work Sans Medium", Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-size: .9rem;
  color: var(--blau);
  line-height: 45px;
}

.text-link svg {
  margin-right: 20px;
  transition: ease-in-out .4s;
  width: 40px;
  margin-bottom: 3px;
}

.text-link svg rect {
  fill: transparent;
  transition: ease-in-out .4s;
}

a.text-link:hover svg rect, .text-link.hovered  svg rect {
  fill: var(--gelb);
}
.bg-gelb .text-link:hover svg rect{
  fill: var(--pink);
}

a.text-link:hover svg, .text-link.hovered svg{
  margin-right: 10px;
}

.text-link:hover {
  color: var(--blau);
}

.text-link.cta {
  font-family: "Work Sans Bold", Arial, Helvetica, sans-serif;
  font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1920 - 320));
  text-transform: uppercase;
}

.text-link.cta svg line {
  stroke: white;
}

.text-link.cta svg rect {
  display: none
}

.text-link.cta {
  position: relative;
}

.text-link.cta::before {
  content: '';
  width: 13%;
  height: 45px;
  position: absolute;
  background-color: var(--pink);
  z-index: 0;
  transition: ease-in-out .4s;
}

.text-link.cta:hover::before {
  border-radius: 50%;
  width: 45px;
  height: 45px;
}

/*
 * Farben
 */
:root {
  --gelb: #F5C114;
  --gelb-transp: rgba(245, 193, 20, 0.6);
  --pink-transp: rgba(227, 43, 203, 0.6);
  --tuerkis-transp: rgba(20, 245, 170, 0.58);
  --red:#ff4500;
  --red-transp: rgba(255,69,0, 0.58);
  --blau: #00235B;
  --tuerkis: #14F5AA;
  --pink: #E32BCB;
}

.bg-gelb {
  background-color: var(--gelb) !important;
}

.bg-blau {
  background-color: var(--blau) !important;
}

.bg-gelb-transp {
  background-color: var(--gelb-transp) !important;;
}

.bg-pink {
  background-color: var(--pink) !important;
}

.bg-pink-transp {
  background-color: var(--pink-transp);
}

.bg-tuerkis {
  background-color: var(--tuerkis) !important;
}

.bg-tuerkis-transp {
  background-color: var(--tuerkis-transp);
}
.bg-red{
  background-color: var(--red) !important;
}
.bg-red-transp{
  background-color: var(--red-transp);
}

.text-blue {
  color: var(--blau);
}

.text-tuerkis {
  color: var(--tuerkis);
}


/*
 * Base structure
 */


section .min {
  min-height: 450px;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.wrapper-absolutresp {
  width: 100%;
  height: 100%;
  transition: ease-in-out .4s;
  top: 0;
}

img.absolutresp,
picture.absolutresp img {
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: 100%;

}

.z10 {
  z-index: 10;
  ;
}


/*
 * Header
 */
.logo-ecke {
  top: 0;
  left: 0;
  z-index: -1;
}

.navbar {
  position: absolute;
  overflow-x: clip;
}
.navbar-nav{
  --bs-nav-link-padding-y: 0 !important;
}

nav {
  z-index: 999;
}

.nav-link {
  font-family: "Work Sans Bold", Arial, Helvetica, sans-serif;
  color: var(--blau);
  line-height: 80px;
}

.nav-link::before {
  content: '';
  width: 0px;
  height: 80px;
  background-color: var(--tuerkis);
  position: absolute;
  z-index: -1;
  left: 0;
  transition: ease-in 0.4s width;
}

.nav-link.active::before,
.nav-link:hover::before {
  content: '';
  width: 40px;
  height: 80px;
  background-color: var(--tuerkis);
  position: absolute;
  z-index: -1;
  left: 0;
}
.nav-link.dropdown-toggle::before{
 content: none !important;
}

.karriere .nav-link.active::before,
.karriere .nav-link:hover::before,
.karriere .navbar-toggler{
  background-color: var(--pink);
}
.nav-link:focus, .nav-link:hover, .navbar-nav .nav-link.active, .navbar-nav .show>.nav-link {
  color: var(--blau);
}

.navbar-brand img {
  max-width: 30vw;
  min-width: 220px;
}

.navbar-brand {
  position: absolute;
  top: 60px;
  margin-right: 0;
  left:13% !important;
}

.navbar-toggler {
  width: 60px;
  height: 39px;
  position: absolute;
  margin: 0 auto;
  background-color: var(--tuerkis);
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  transform: rotate(10deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  border-radius: 0px;
  border: 0px;
  top: 110px;
  right: 0;
  z-index: 99;
}

.navbar-toggler span {
  display: block;
  position: absolute;
  height: 3px;
  width: 60px;
  background: white;
  opacity: 1;
  left: 20px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.navbar-toggler span:nth-child(1) {
  top: 30px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.navbar-toggler span:nth-child(2) {
  top: 48px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.navbar-toggler span:nth-child(3) {
  top: 66px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.navbar-toggler.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 30px;
  left: 28px;
}

.navbar-toggler.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

.navbar-toggler.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 69px;
  left: 28px;
}

.navbar-toggler:focus {
  box-shadow: none;
}
.dropdown-menu[data-bs-popper]{
  top:60px;
  left:8px;
}
.dropdown-item{
  padding: 0;
}
.dropdown-menu{
  min-width: max-content;
  --bs-dropdown-padding-y: 0 !important;
  background-color: transparent;
}
.dropdown-toggle::after{
  content: none !important;
}
.dropdown-item:focus, .dropdown-item:hover{
  background-color: transparent;
}
.language{
  filter: grayscale(0.6);
  opacity: 0.4;
  transition: .25s ease-in-out;
}
.language:hover{
  filter: grayscale(0);
  opacity: 1;
}

/*
 * Slider
 */
.carousel-item {
  height: 100vH;
}

.carousel-caption {
  bottom: 10%;
  right: 10%;
  left: 10%;
}

.iPunkt {
  position: relative;
}

.iPunkt::before {
  content: '';
  background-color: var(--tuerkis);
  display: inline-block;
  position: absolute;
  left: -26%;
  transform: translateX(-50%);
  height: 18%;
  width: 48%;
  top: 15%;
  border-radius: 20px;
  padding-top: 3px;
}

.iFake {
  display: inline-block;
  height: calc(13px + (48 - 13) * (100vw - 320px) / (1920 - 320));
  overflow: hidden;
  position: relative;
}

/*
 * Animations-Module
 */
.ani-modul {
  position: absolute;
  z-index: 1;
}

.dreieck .ani-modul {
  left: 60px;
  top: 30px;
  width: 35vw;
  mix-blend-mode: multiply;
}
.tuerkis-square .ani-modul {
  left: 60px;
  top: 30px;
  width: 44vw;
}
.kontakt .dreieck .ani-modul {
  width: 34vw;
  left:200px !important;
}

.ausrufezeichen .ani-modul {
  right: 150px;
  top: -180px;
  width: 10vw;
}

.quadrat .ani-modul {
  left: 11%;
  top: -25%;
  width: 50vw;
  max-width: 750px;
  z-index: -2;
}

.blue-square {
  display: block;
  width: 40vw;
  height: 40vw;
  background-color: var(--blau);
  z-index: -3 !important;
  transform: rotate(-45deg) !important;
  left: 30% !important;
  top: -20% !important;
}
#bieten .blue-square{
  left: 15% !important;
}
.zitat {
  width: 20%;
  height: 25%;
  background: transparent url(../img/zitat.svg) center no-repeat;
  background-size: contain;
  position: absolute;
  top: -10%;
  left: -10%;
}

[data-inviewport="scale-in"] {
  transition: 2s;
  transform: scale(0.1);
}

[data-inviewport="scale-in"].is-inViewport {
  transform: scale(1);
}

[data-inviewport="fade-rotate"] {
  transition: 2s;
  transform: rotate(0deg) scale(0.1);
  opacity: 0;
}

[data-inviewport="fade-rotate"].is-inViewport {
  transform: rotate(360deg) scale(1);
  opacity: 1;
}

.quadrat .ani-modul[data-inviewport="fade-rotate"].is-inViewport {
  transform: rotate(330deg) scale(1);
  opacity: 1;
}


.modal-body button[data-inviewport="fade-rotate"].is-inViewport {
  transform: rotate(380deg) scale(1);
  opacity: 1;
}


/*
 * Tiles (Kacheln)
 */
.tile {
  min-height: 350px;
}

.tile .wrapper-absolutresp {
  width: calc(100% - 2rem);
  height: calc(100% - 1rem);
  transition: ease-in-out .4s;
  top: 0;
  z-index: -2;
}

.modal-body {
  overflow-x: hidden;
}

.modal-body img.absolutresp,
picture.absolutresp img {
  object-position: center;
}

.tile .mehr {
  display: none;
  transition: ease-in-out .4s;
}

.tile .name {
  display: inline-block;
  transition: ease-in-out .4s;
}

.tile:hover {
  cursor: pointer;
}

.tile:hover .mehr {
  display: inline-block;
}

.tile:hover .name {
  display: none;
}

.tile:hover svg rect {
  fill: var(--gelb);
}

.tile:hover svg {
  margin-right: 10px;
}

.tile:hover {
  color: var(--blau);
}

.tile .bg {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: calc(100% - 2rem);
  height: calc(100% - 1rem);
  transition: ease-in-out .4s;
  opacity: 0;
  z-index: -1;
}

.tile:hover .bg {
  opacity: 1;
}

.tile .text-link {
  transition: ease-in-out .4s;
  position: relative;
}

.tile:hover .text-link {
  background-color: transparent;
}

.tile .info {
  opacity: 0;
  transition: ease-in-out .4s;
  font-family: "Work Sans", Arial, Helvetica, sans-serif;
}

.tile:hover .info {
  opacity: 1;
}

.tile button {
  display: block;
  width: calc(100% - 2rem);
  height: calc(100% - 1rem);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  z-index: 20;
  border-radius: 0px;
  border-width: 0px;
}

.modal-body .navbar-toggler {
  top: 0;
  background-color: var(--tuerkis);
}
.modal-fullscreen .modal-body{
  overflow-y: scroll !important;
}

#fnoll .kompetenzen{
  background:url(/img/fnoll-gro.jpg) no-repeat center left; background-size: contain; background-attachment: fixed;
}
#ksudmann .kompetenzen{
  background:url(/img/ksudmann-gr.jpg) no-repeat left center; background-size: contain; background-attachment: fixed;
}
#seck .kompetenzen{
  background:url(/img/seck-gro.webp) no-repeat left center; background-size: contain; background-attachment: fixed;
}
#jdahlmann .kompetenzen{
  background:url(/img/jdahlmann-gr.jpg) no-repeat left center; background-size: contain; background-attachment: fixed;
}
#kpetters .kompetenzen{
  background:url(/img/petters-gr.jpg) no-repeat left center; background-size: contain; background-attachment: fixed;
}
#bschwarzlmueller .kompetenzen{
  background:url(/img/bschwarzlmueller-gr.jpg) no-repeat left center; background-size: contain; background-attachment: fixed;
}
#odahlmann .kompetenzen{
  background:url(/img/tile-o-dahlmann-klein.jpg) no-repeat left center; background-size: contain; background-attachment: fixed;
}

/*
 * Accordion
*/
dt {
  font-weight: 700;
  display: inline-block;
  background: var(--pink);
  padding: 10px 20px 10px 10px;
  color: white;
  margin: 20px 0px 5px -60px;
}
.accordion {
  --bs-accordion-color: var(--blau);
  --bs-accordion-bg: var(--tuerkis);
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: transparent;
  --bs-accordion-border-width: 0px;
  --bs-accordion-border-radius: 0rem;
  --bs-accordion-inner-border-radius: non;
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: white;
  --bs-accordion-btn-bg: var(--pink);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35.621' height='23.716' viewBox='0 0 35.621 23.716'%3E%3Cg id='Gruppe_4' data-name='Gruppe 4' transform='translate(-497.5 -3783.879)'%3E%3Cline id='Linie_1' data-name='Linie 1' y2='1' transform='translate(499 3796) rotate(-90)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3Cline id='Linie_2' data-name='Linie 2' y2='7' transform='translate(506 3796) rotate(-90)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3Cline id='Linie_4' data-name='Linie 4' y1='8.975' x2='9.644' transform='translate(520.856 3796.5)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3Cline id='Linie_3' data-name='Linie 3' x2='12' transform='translate(519 3796)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3Cline id='Linie_5' data-name='Linie 5' x2='10' y2='10' transform='translate(521 3786)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E%0A");
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(90deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35.621' height='23.716' viewBox='0 0 35.621 23.716'%3E%3Cg id='Gruppe_4' data-name='Gruppe 4' transform='translate(-497.5 -3783.879)'%3E%3Cline id='Linie_1' data-name='Linie 1' y2='1' transform='translate(499 3796) rotate(-90)' fill='none' stroke='%2300235B' stroke-linecap='round' stroke-width='3'/%3E%3Cline id='Linie_2' data-name='Linie 2' y2='7' transform='translate(506 3796) rotate(-90)' fill='none' stroke='%2300235B' stroke-linecap='round' stroke-width='3'/%3E%3Cline id='Linie_4' data-name='Linie 4' y1='8.975' x2='9.644' transform='translate(520.856 3796.5)' fill='none' stroke='%2300235B' stroke-linecap='round' stroke-width='3'/%3E%3Cline id='Linie_3' data-name='Linie 3' x2='12' transform='translate(519 3796)' fill='none' stroke='%2300235B' stroke-linecap='round' stroke-width='3'/%3E%3Cline id='Linie_5' data-name='Linie 5' x2='10' y2='10' transform='translate(521 3786)' fill='none' stroke='%2300235B' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  --bs-accordion-btn-focus-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: var(--blau);
  --bs-accordion-active-bg: var(--tuerkis);
}

.accordion-button{
  padding:40px;
}
.accordion-button::after {
  width: 35px;
  height: 20px;
  background-size: contain;
}

.accordion-item {
  margin-bottom: 10px;
}


/*
*
Cards
*
*/
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  word-wrap: break-word;
  background-color: transparent;
  background-clip: border-box;
  border: 0px;
  border-radius: 0px;
}
.career .card{
  border: 0px;
}
.footer{
  position: relative;
}
.footer a {
  text-decoration: none;
}


@media (max-width: 1920px) {
  .navbar-brand {
    margin-left:7%;
  }
}
@media (max-width: 991px) {
  .navbar {
    background-color: white !important;
  }

  .navbar-brand {
    position: relative;
    top: auto;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    left:0 !important;
  }

  .logo-ecke {
    display: none;
  }

  .dreieck .ani-modul {
    top: 0;
    left: 0;
  }

  .ausrufezeichen .ani-modul {
    right: 30px;
    top: 0;
  }

  .quadrat .ani-modul {
    left: -10%;
    top: 0;
  }

  .blue-square {
    top: 0 !important;
    left: 50% !important;
    width: 100vw !important;
    height: 100vw !important;
    transform: translate(-50%) !important;
  }
  #bieten .blue-square{
    left:0 !important;
    transform: none !important;
  }
}

@media (max-width: 768px) {
  section .min {
    min-height: 100px;
  }
  .navbar-brand{
    left:0;
  }

  .zitat {
    top: -10%;
    left: 0;
  }
}