/*Schriften*/
/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  display:swap;
  src: url('../fonts/open-sans-v40-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  display:swap;
  src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  display:swap;
  src: url('../fonts/open-sans-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  display:swap;
  src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  display:swap;
  src: url('../fonts/open-sans-v40-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



:root {
   --primary-color: #3B86C5;/*blau*/
   --secondary-color: #ECECEC;/*grau*/
   --darkgreen: #238729;
   --blue: #8DB4D2;
   --green: #039717;
   --body: #29893F;
   --bs-body-font-family:'Open Sans', sans-serif;
   --bs-body-font-weight-bold: 800;
   --bs-body-font-weight-light: 300;
   --bs-body-font-size: calc(0.7rem + 0.3vw);
}

/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
  BASICS
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
body {
  font-family:var(--bs-body-font-family);
  font-size: var(--bs-body-font-size) !important;
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.7rem;
  font-weight: 400;
  hyphens:auto;
  -webkit-hyphens: auto!important;
}

*:focus { outline: none !important; }
::selection       { background-color: var(--body); color: var(--white); color: white; }
::-moz-selection  { background-color: var(--body); color: var(--white); color: white; }

.max-width-container { max-width: 1970px; }



/* + + + + + + + + + + + + + + + + + + + + + + + +
  HEADLINES & TEXT STYLES
+ + + + + + + + + + + + + + + + + + + + + + + +  */

/* HEADLINES */
h1, h2, h3, h4, h5, h6, *[class*="fs-1-"] {
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-size: var(--bs-body-font-size);
}

.fs-1 {
  font-size: calc(2rem + 1vw) !important;
  line-height: calc(2.2rem + 1.2vw)}

.fs-2 {
  font-size: calc(1.0rem + 0.5vw) !important;
  line-height: 1.5rem;}

.fs-3 {
  font-size: calc(1.6rem + 0.4vw) !important;
  line-height: 2.2rem;}

.fs-4 {
  font-size: calc(2.6rem + 1.4vw) !important;
  line-height: 4rem;}


.fw-bold {font-family: var(--bs-body-font-weight-bold);}


/* + + + + + + + + + + + + + + + + + + + + + + + +
 Button
+ + + + + + + + + + + + + + + + + + + + + + + +  */

   .site {
      position: fixed !important;
      right: -30px;
      z-index: 5000;
  }

  .site {top: 200px;transform: rotate(270deg);border: 0;
  background: var(--primary-color);
      height: 40px;
      text-align: center;
      display: inline-block;}

}

.btn-three {
  border: 0;
  background: var(--primary-color);
      height: 60px;
      text-align: center;
      display: inline-block;
}

.fixed-right {
      position: fixed;
      top: 50%;
      right: -100px;
      transform: translateY(-50%);
      transform: rotate(270deg);
    }


.btn_two {
  border: 0;
  background: var(--primary-color);
      height: 60px;
      text-align: center;
      display: inline-block;
}




/* + + + + + + + + + + + + + + + + + + + + + + + +
  Inhalt
+ + + + + + + + + + + + + + + + + + + + + + + +  */

.bg_dark { background: var(--primary-color);}
.bg_darkblue { background: var(--primary-color);}
.bg_grey { background: var(--secondary-color);}
.bg_green { background: var(--green);}
.bg_blue { background: var(--blue);}
.hg_blau { background: url(../images/site/bg-highlights.webp) no-repeat center; }
.hg_hellblau { background: url(../images/site/bg-highlights-klein.webp) no-repeat bottom right;}

.card {border: none;}
.blue { color: var(--primary-color);}
.darkgreen { color: var(--darkgreen);}
.green { color: var(--green);}
.darkblue { color: var(--blue);}
.grey { background: var(--secondary-color);}

@media (max-width: 767.98px) {
  .abstand { padding-top:70px;}
  }


.students-02::after {
  -webkit-clip-path: polygon(6% 0, 95% 0, 95% 92%, 10% 99%);
  clip-path: polygon(6% 0, 95% 0, 95% 92%, 10% 99%);
  background-image: url(../images/site/students_02.webp) no-repeat center;
}

.more-img{
  width: 50%;
}

.distance{
  padding-top: 25%;
}


/* + + + + + + + + + + + + + + + + + + + + + + + +
  Link
+ + + + + + + + + + + + + + + + + + + + + + + +  */
a{
    text-decoration: none;
    color: var(--dark)
}

a:visited{ color:  var(--white);}
a:hover{ color:  var(--secondary-color);}
a:active{ color: var(--primary-color);}

.nav-link {color: var(--blue);padding: 0 1rem;}

/* + + + + + + + + + + + + + + + + + + + + + + + +
  LOGO
+ + + + + + + + + + + + + + + + + + + + + + + +  */
#logo {
  position: absolute;
  inset: 20px auto auto 20px;
  z-index: 1500;
  width: 450px;
}

@media (max-width: 767.98px) {

  #logo {
  position: absolute;
  inset: 5px auto auto 20px;
  z-index: 1500;
  width: 250px;
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + +
counter  Hintergrund logo größe
+ + + + + + + + + + + + + + + + + + + + + + + +  */


@media (max-width: 767.98px) {
  .counter-section .counter-image {
    display: none;
  }

  .counter-section {
    background-color: #3B86C5!important;
    padding:50px;
  }
}

.hg_counter { background: url(../images/site/hg_blau_counter.webp) no-repeat bottom center;}

.counter {
      font-size: 3rem;
      font-weight: bold;}

/* + + + + + + + + + + + + + + + + + + + + + + + +
  NAVIGATION
+ + + + + + + + + + + + + + + + + + + + + + + +  */
.hamburger {
  position: fixed;
  inset: 20px 20px auto auto;
  z-index: 1050;
  cursor: pointer;
  background: none;
  border: none;
  z-index:800;
}


/* Menü als Vollbild-Overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 1000;
}

/* Sichtbares Menü */
.menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Menü Links */
.menu-overlay a {
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 2rem;
    margin: 15px 0;
    transition: color 0.3s;
}

.menu-overlay a:hover {
    color: var(--grey);
}

/* Schließen Button */
.close-menu {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--secondary-color);
}



.modal-content {border-radius: inherit;}
.modal-header {
  border-bottom:none!important}