/*Basics HTML Elements*/
body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  position: relative;
  background-image: url('/sitedesign/images/content/bg-element.svg');
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: contain;
}
html {
  height: -webkit-fill-available;
  scroll-behavior: smooth;
}
html, body {
  overflow-x: clip;
  }

* {
    margin: 0;
    font-family: "Nunito Sans";
}

a {
    text-decoration: none;
    color: #000;
    cursor: pointer;
}
p {
  margin-bottom: 16px;
  max-width: 60ch;
}
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 24px;
}
svg {
      width: 100%;
      height: auto;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      image-rendering: pixelated;
    }
:root {
    --white: white;
    --black: black;
    --dark-blue: #00569D;
    --light-blue: #00B1EB;

    --h1: clamp(40px, calc(2.5rem + ((1vw - 3.2px) * 0.8333)), 48px);
    --h2: clamp(34px, calc(2.125rem + ((1vw - 3.2px) * 0.625)), 40px);
    --h3: clamp(28px, calc(1.75rem + ((1vw - 3.2px) * 0.625)), 34px);
    --h4: clamp(22px, calc(1.375rem + ((1vw - 3.2px) * 0.625)), 28px);
    --h5: clamp(18px, calc(1.125rem + ((1vw - 3.2px) * 0.4167)), 22px);
    --h6: clamp(16px, calc(1rem + ((1vw - 3.2px) * 0.2083)), 18px);
}

.cursor-pointer{
    cursor: pointer;
}

.background-brita{
  background-image: url('/sitedesign/images/content/bg-element.svg');
  object-fit: cover;
}

/*Layout/Padding Boxing*/
.section{
  padding-top:72px; 
  padding-bottom:72px; 
}
@media only screen and (max-width: 1280px) {
  .section{
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media only screen and (max-width: 768px) {
  .section{
    padding-left: 16px;
    padding-right: 16px;
    padding-top:32px; 
    padding-bottom: 32px; 
  }
  .section-subhero {
    display: flex !important;
    flex-direction: column-reverse;
    gap: 32px;
  }
}

.tab-link a {
  text-decoration: underline;
  font-weight: 700;
}

/*Font*/
.font-Nunito-Sans{
    font-family: "Nunito Sans";
}

/*Headlines*/
h1{
    color: var(--white);
    font-size: 48px;
    font-size: var(--h1);
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
}

h2{
    color: var(--dark-blue); 
    font-size: 40px;
    font-size: var(--h2);
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
}
h3{
    color: var(--dark-blue); 
    font-size: 34px;
    font-size: var(--h3);
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
}
h4{
  font-size: 28px;
  font-size: var(--h4);
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
}

h5{
  font-size: 22px;
  font-size: var(--h5);
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
}

h6{
  font-size: 18px;
  font-size: var(--h6);
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
}

/*Heading Sizes*/
.hs-1{
    color: var(--white);
    font-size: 48px;
    font-size: var(--h1);
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
}

.hs-2{
    color: var(--dark-blue); 
    font-size: 40px;
    font-size: var(--h2);
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
}
.hs-3{
    color: var(--dark-blue); 
    font-size: 34px;
    font-size: var(--h3);
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
}
.hs-4{
  font-size: 28px;
  font-size: var(--h4);
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
}

.hs-5{
  font-size: 22px;
  font-size: var(--h5);
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
}

.hs-6{
  font-size: 18px;
  font-size: var(--h6);
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
}

/*Background Color*/
.bg-white {
  background-color: var(--white);
}

.bg-linear-blue{
  background: linear-gradient(90deg, #00569D 0%, #00B1EB 100%);
}

.bg-linear-blue-reverse{
  background: linear-gradient(90deg, #00569D 0%, #00B1EB 100%);
}

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

@media only screen and (max-width: 768px) {
  .bg-linear-blue-reverse{
    background: linear-gradient(180deg, #00569D 0%, #00B1EB 100%);
  }
}

/*Text Color*/
.text-dark-blue {
    color: var(--dark-blue);
}

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

/*Text*/
.text{
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.umbruch{
  word-break:break-all;
}

.text-center{
  text-align: center;
}
.fw-700 {
  font-weight: 700;
}
/*Buttons*/
.button-trans{
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  -webkit-appearance: button;
  background-color: transparent;
  cursor: pointer;
  border: white 1px solid;
  border-radius: 16px;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 16px;
  padding-top: 16px;
  transition: background-color 0.5s;
  font-weight: 700;
}

.button-trans:hover{
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  -webkit-appearance: button;
  background-color: var(--white);
  cursor: pointer;
  border: white 1px solid;
  border-radius: 16px;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 16px;
  padding-top: 16px;
  color: var(--dark-blue);
  width: fit-content;
}

.button-blue{
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  -webkit-appearance: button;
  background-color: var(--dark-blue);
  cursor: pointer;
  border: var(--dark-blue) 1px solid;
  border-radius: 16px;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 16px;
  padding-top: 16px;
  transition: background-color 0.5s, border 0.5s;
  font-weight: 700;
  width: fit-content;
}

.button-blue:hover{
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  -webkit-appearance: button;
  background-color: var(--light-blue);
  cursor: pointer;
  border: var(--light-blue) 1px solid;
  border-radius: 16px;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 16px;
  padding-top: 16px;
}

/*Screen*/
.fullscreen {
    width: 100vw;
    height: 100vh;
}

/*Display Positions*/
.flex {
    display: flex;
}

.block {
    display: block;
}

.hidden {
    display: none;
}

.absolute{
    position: absolute;
}

.relative{
    position: relative;
}

.fixed{
    position: fixed;
}

.sticky{
    top: 0;
    position: sticky;
}

.static{
    position: static;
}

/*Z-Indey*/
.z-0{
  z-index: 0;
}

.z-10{
  z-index: 10;
}

.z-20{
  z-index: 20;
}

.z-30{
  z-index: 30;
}

.z-40{
  z-index: 40;
}

.z-50{
  z-index: 50;
}

.z-60{
  z-index: 60;
}

.z-70{
  z-index: 70;
}

.z-80{
  z-index: 80;
}

.z-90{
  z-index: 90;
}

.z-100{
  z-index: 100;
}

/*visibilty*/
.visible-d {
    display: block;
}

.visible-m {
  display: none;
}

.visible-td {
  display: block;
}

.visible-tm {
    display: none;
}

.hidden {
  display: none;
}

@media only screen and (max-width: 891px) {
    .visible-d {
        display: none !important;
    }

    .visible-m {
        display: block !important;
    }
}

@media only screen and (max-width: 768px) {
  .visible-td {
    display: none !important;
  }

  .visible-tm {
    display: block !important;
  }
}

/*Flex Position*/
.center-h {
    height: 100%;
    display: flex;
    align-items: center;
}

.center-w {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-start {
    justify-content: start;
    align-items: start;
}

.flex-end {
    justify-content: end;
    align-items: end;
}

.flex-col{
  display: flex;
  flex-direction: column;
}

.flex-row{
  display: flex;
  flex-direction: row;
}

.flex-row-col{
  display: flex;
  flex-direction: row;
}

@media only screen and (max-width: 768px) {
  .flex-row-col{
    display: flex;
    flex-direction: column;
  }
}

/*Justify*/
.justify-between {
    justify-content: space-between;
}

/*width*/
.w-screen{
  width: 100vw;
}

.w-100{
    width: 100%;
}

.w-90{
    width: 90%;
}

.w-80{
    width: 80%;
}

.w-70{
    width: 70%;
}

.w-60{
    width: 60;
}

.w-50{
    width: 50%;
}

.w-40{
    width: 40%;
}

.w-30{
    width: 30%;
}

.w-20{
    width: 20%;
}

.w-10{
    width: 10%;
}

.max-width {
  max-width: 1280px;
}

/*grid*/

.grid{
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3{
    display: grid; 
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4{
    display: grid; 
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-5{
    display: grid; 
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-6{
    display: grid; 
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.gird-7{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.gird-8{
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.gird-9{
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

@media only screen and (max-width: 768px) {
    .grid-3{
        display: grid; 
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid{
        display: grid; 
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 576px) {
  .grid-3{
      display: grid; 
      grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid{
      display: grid; 
      grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/*Grid Cols*/
.col-1 {
    grid-column: span 1;
  }
  
  .col-2 {
    grid-column: span 2;
  }
  
  .col-3 {
    grid-column: span 3;
  }
  
  .col-4 {
    grid-column: span 4;
  }
  
  .col-5 {
    grid-column: span 5;
  }
  
  .col-6 {
    grid-column: span 6;
  }
  
  .col-7 {
    grid-column: span 7;
  }
  
  .col-8 {
    grid-column: span 8;
  }
  
  .col-9 {
    grid-column: span 9;
  }
  
  .col-10 {
    grid-column: span 10;
  }
  
  .col-11 {
    grid-column: span 11;
  }
  
  .col-12 {
    grid-column: span 12;
  }
  
  @media only screen and (max-width: 1516px) {
    .col-1-dt {
      grid-column: span 1;
    }
  
    .col-2-dt {
      grid-column: span 2;
    }
  
    .col-3-dt {
      grid-column: span 3;
    }
  
    .col-4-dt {
      grid-column: span 4;
    }
  
    .col-5-dt {
      grid-column: span 5;
    }
  
    .col-6-dt {
      grid-column: span 6;
    }
  
    .col-7-dt {
      grid-column: span 7;
    }
  
    .col-8-dt {
      grid-column: span 8;
    }
  
    .col-9-dt {
      grid-column: span 9;
    }
  
    .col-10-dt {
      grid-column: span 10;
    }
  
    .col-11-dt {
      grid-column: span 11;
    }
  
    .col-12-dt {
      grid-column: span 12;
    }
  }
  
  /* Tablet Classes */
  @media only screen and (max-width: 768px) {
    .col-1-t {
      grid-column: span 1;
    }
  
    .col-2-t {
      grid-column: span 2;
    }
  
    .col-3-t {
      grid-column: span 3;
    }
  
    .col-4-t {
      grid-column: span 4;
    }
  
    .col-5-t {
      grid-column: span 5;
    }
  
    .col-6-t {
      grid-column: span 6;
    }
  
    .col-7-t {
      grid-column: span 7;
    }
  
    .col-8-t {
      grid-column: span 8;
    }
  
    .col-9-t {
      grid-column: span 9;
    }
  
    .col-10-t {
      grid-column: span 10;
    }
  
    .col-11-t {
      grid-column: span 11;
    }
  
    .col-12-t {
      grid-column: span 12;
    }
  }
  
  /* Mobile Classes */
  @media only screen and (max-width: 576px) {
    .col-1-m {
      grid-column: span 1;
    }
  
    .col-2-m {
      grid-column: span 2;
    }
  
    .col-3-m {
      grid-column: span 3;
    }
  
    .col-4-m {
      grid-column: span 4;
    }
  
    .col-5-m {
      grid-column: span 5;
    }
  
    .col-6-m {
      grid-column: span 6;
    }
  
    .col-7-m {
      grid-column: span 7;
    }
  
    .col-8-m {
      grid-column: span 8;
    }
  
    .col-9-m {
      grid-column: span 9;
    }
  
    .col-10-m {
      grid-column: span 10;
    }
  
    .col-11-m {
      grid-column: span 11;
    }
  
    .col-12-m {
      grid-column: span 12;
    }
  }

/*gap*/
.gap-8 {
    gap: 8px;
}

.gap-16 {
    gap: 16px;
}

.gap-32 {
    gap: 32px;
}

.gap-64 {
    gap: 64px;
}

.two-cols-gap{
  gap:16px; 
}

@media only screen and (max-width: 768px) {
  .two-cols-gap{
    gap:0px; 
  }
}

/*image*/
.cover {
    object-fit: cover;
}

/*Position-Dates*/

/*Padding*/
.pt-0 {
  padding-top: 0px;
}
.pt-16{
    padding-top: 16px;
}

.pt-22{
  padding-top: 22px;
}

.pt-32{
    padding-top: 32px;
}

.pt-48{
    padding-top: 48px;
}

.pt-64{
    padding-top: 64px;
}
.pb-0{
  padding-bottom: 0px;
}
.pb-8{
  padding-bottom: 8px;
}

.pb-16{
    padding-bottom: 16px;
}

.pb-22{
  padding-bottom: 22px;
}

.pb-32{
    padding-bottom: 32px;
}

.pb-48{
    padding-bottom: 48px;
}

.pb-64{
    padding-bottom: 64px;
}

.pl-16{
  padding-left: 16px;
}

.pl-32{
  padding-left: 32px;
}

.pl-48{
  padding-left: 48px;
}

.pl-64{
  padding-left: 64px;
}

.pr-16{
  padding-right: 16px;
}

.pr-32{
  padding-right: 32px;
}

.pr-48{
  padding-right: 48px;
}

.pr-64{
  padding-right: 64px;
}


.pl-72-m{
  padding-left: 72px;
}

.pr-72-m{
  padding-right: 72px;
}

.padding-inner{
    padding-left: 96px;
    padding-right: 96px;
    padding-top: 72px;
    padding-bottom: 72px;
}
.padding-inner h1{
        margin-bottom: 0px;
    }



@media only screen and (max-width: 1280px) {
    .padding-out-m{
        padding-left: 32px;
        padding-right: 32px;
    }

    .margin-out-m{
        margin-left: 32px !important;
        margin-right: 32px !important;
    }

    .pl-72-m{
      padding-left: 24px;
    }

    .pr-72-m{
      padding-right: 24px;
    }
}
@media only screen and (max-width: 768px) {
    .padding-out-m{
        padding-left: 16px;
        padding-right: 16px;
    }

    .margin-out-m{
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
}

@media only screen and (max-width: 768px) {
    .padding-inner{
        padding-left: 48px;
        padding-right: 48px;
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .padding-inner h1{
        margin-bottom: 24px;
    }
    .pl-20-m{
      padding-left: 20px;
    }   
}

/*Margin*/
.ml-16 {
    margin-left: 16px;
}

.ml-32{
    margin-left: 32px;
}

.ml-48{
    margin-left: 48px;
}

.ml-64{
    margin-left: 64px;
}

.mb-8{
  margin-bottom: 8px;
}

.mb-16{
    margin-bottom: 16px;
}

.mb-32{
  margin-bottom: 32px;
}

.mb-50{
    margin-bottom: 50px;
}

.mb-72{
    margin-bottom: 72px;
}

.mb-144{
  margin-bottom: 144px;
}

.mt-8{
  margin-top: 8px;
}

.mt-16{
    margin-top: 16px;
}

.mt-32{
    margin-top: 32px;
}

.mt-48{
    margin-top: 48px;
}

.mt-64{
    margin-top: 64px;
}

.mt-72{
    margin-top: 72px;
}

.mt-144{
  margin-top: 144px;
}

/* Radius */
.rounded-8{
  border-radius: 8px;
}

.rounded-16{
  border-radius: 16px;
}

.rounded-32{
  border-radius: 32px;
}

.rounded-full{
  border-radius: 9999px;
}

.end-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/* Overflow */
.overflow-hidden {
    overflow: hidden;
}
/* Image Grid */
.imggrid {
  object-fit: cover;
  min-height: 350px;
  border-radius: 8px;
}
.grid-3 .imggrid {
  max-height: 350px;
}