:root {
  --orange100: #ef7d00;
  --white: #fff;
  --blu: #afe9f7;
  --rosa: #ffbbc1;
}

body {
  color: #333;
  font-family: Ibmplexsans Local, sans-serif;
  font-size: 1vw;
  font-weight: 300;
  line-height: 20px;
}

h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Arnika Variable Local, sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  margin-bottom: 1em;
  font-family: Arnika Variable Local, sans-serif;
  font-size: 4.6em;
  font-weight: 400;
  line-height: 1em;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Arnika Variable Local, sans-serif;
  font-size: 3.1em;
  font-weight: 400;
  line-height: .9em;
}

p {
  max-width: 50ch;
  margin-bottom: 10px;
}

a {
  font-size: 20px;
  text-decoration: underline;
}

.wrapper {
  width: 62%;
  margin-left: auto;
  margin-right: auto;
}

.main_navi {
  background-color: var(--orange100);
  color: var(--white);
}

.main_links {
  color: var(--white);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
}

.image {
  padding-top: 12px;
  padding-bottom: 12px;
}

.main_navbar {
  padding-top: 16px;
}

.hero {
  background-image: url('../images/hero_blu_top.svg'), url('../images/hero_image_bluhai_1.webp'), url('../images/blu_fish.svg'), url('../images/blu_fish.svg');
  background-position: 100% 0, 0 0, 43% 60%, 91% 21%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 52.6em, 44em, 6em, 6em;
}

.hero_flex {
  justify-content: flex-end;
  align-items: center;
  min-height: 50em;
  display: flex;
}

.hero_textbox {
  flex-flow: column;
  align-items: flex-end;
  width: 44%;
  display: flex;
}

.hero_subtitle {
  text-align: right;
  margin-top: .5em;
  margin-bottom: .7em;
  margin-left: auto;
  font-size: 1.8em;
  font-weight: 500;
}

.hero_h1 {
  text-align: right;
  font-size: 4.4em;
  line-height: .7em;
}

.hero_text {
  text-align: right;
  max-width: 38ch;
  margin-bottom: 1.5em;
  margin-left: auto;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
}

.vorteile-sec {
  background-image: url('../images/vorteile_bg-img_1.webp'), url('../images/blu_fish.svg'), url('../images/blu_fish.svg');
  background-position: 0 0, 17% 93%, 94% 53%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 29em, 6em, 6em;
  min-height: 100vh;
  margin-top: -3em;
}

.vorteile_wrapper {
  padding-top: 7em;
}

.vorteile_content {
  width: 54%;
  margin-left: 30em;
  margin-right: auto;
}

.vorteile_item {
  width: 43%;
}

.vorteile_h3-left {
  text-align: right;
  min-width: 10ch;
  margin-top: .2em;
  line-height: 1em;
}

.vorteile_p {
  text-align: right;
  min-width: 27px;
  margin-left: auto;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

.vorteile_icon-ort {
  float: right;
  width: 120px;
  margin-left: 1.5em;
  display: block;
}

.vorteile_item-flex {
  justify-content: space-between;
  display: flex;
}

.vorteile_icon-time {
  float: left;
  width: 120px;
  margin-right: .5em;
  display: block;
}

.vorteile_h3-right {
  text-align: right;
  min-width: 9ch;
  margin-top: 40px;
  margin-left: auto;
}

.bluhai-story_sec {
  background-image: url('../images/blu_fish.svg'), url('../images/bluhai-story_red-1.svg'), url('../images/bluhai-story_red-2.svg'), url('../images/blu_fish.svg');
  background-position: 74% 30%, 150% 0, -40% 100%, 11% 92%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 6em, 45em, auto, 6em;
  min-height: 90vh;
  margin-top: -16em;
}

.vorteil_h2 {
  padding-left: 3.6em;
}

.vorteile_item-right {
  width: 48%;
}

.bluhai_content {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5.1em;
  padding-left: 3em;
  display: flex;
}

.bluhai_h2 {
  margin-bottom: .3em;
}

.bluhai_p {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.8;
}

.bluhai_left-item {
  background-image: url('../images/bluhai-story_blu.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 89%;
  padding: 4.6em 4.6em 4.6em 12em;
}

.bluhai_right-item {
  width: 35%;
  padding-top: 6em;
}

.trans-flag {
  width: 13em;
  margin-left: 40em;
  box-shadow: 0 2px 8px #000;
}

.seminar-sec {
  min-height: 54vh;
  margin-top: 9em;
}

.seminar_wrapper {
  justify-content: space-between;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.seminar-item {
  width: 30%;
  min-height: 10vh;
}

.paragraph {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
}

.image-2 {
  float: left;
  padding-right: 10px;
}

.seminar_list {
  padding-top: 5px;
}

.seminar_h3 {
  margin-top: 0;
}

.seminar-item-left {
  width: 28%;
  min-height: 10vh;
  padding-top: 5em;
}

.seminar-item-img {
  width: 39%;
  min-height: 10vh;
  margin-top: -3em;
}

.kontakt_section {
  background-image: url('../images/kontkat_blu_hg-1.svg'), url('../images/blu_fish.svg'), url('../images/blu_fish.svg'), url('../images/blu_fish.svg');
  background-position: 120% 0, 13% 99%, 95% 30%, 40% 14%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 31em, 6em, 6em, 6em;
  min-height: 106vh;
  margin-top: -2em;
}

.kontakt_wrapper {
  margin-left: -4em;
  padding-top: 9em;
}

.kontakt-flex {
  justify-content: flex-start;
  padding-left: 1em;
  display: flex;
}

.kontakt_left-item {
  background-image: url('../images/kontakt_bg-img_1.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  width: 63%;
  padding-left: 4em;
}

.kontakt_h2 {
  margin-bottom: .2em;
}

.kontakt_p {
  max-width: 33ch;
  font-size: 22px;
  line-height: 1.5;
}

.kontakt_right-item {
  width: 40%;
  padding-top: 3em;
}

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

.about-left {
  width: 54%;
  margin-top: -2em;
  padding-left: 4em;
}

.kontakt_column {
  width: 25%;
  margin-left: 5em;
}

.bluhai_kotakt-logo {
  width: 22em;
}

.katho_logo {
  width: 80%;
  margin-bottom: 10px;
}

.coop_section {
  background-image: url('../images/coop_bg-img.svg');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 50vh;
}

.coop_wrapper {
  padding-right: 5em;
}

.coop_flex {
  justify-content: flex-end;
  display: flex;
}

.coop_right {
  width: 30%;
  margin-top: 9em;
}

.coop_left {
  width: 39%;
  margin-right: 10em;
  padding-top: 9em;
}

.coop-h3 {
  padding-bottom: .2em;
  font-size: 2.4em;
}

.image-3 {
  padding-bottom: 1em;
}

.footer_navi {
  background-color: var(--orange100);
  color: var(--white);
}

.body {
  background-image: url('../images/orange_bubble-long.svg');
  background-position: 104% -80%;
  background-repeat: no-repeat;
  background-size: 22em;
}

@media screen and (max-width: 991px) {
  .wrapper {
    width: 90%;
  }

  .hero_textbox {
    width: 50%;
  }

  .hero_subtitle {
    font-size: 3em;
  }

  .hero_h1 {
    font-size: 7em;
  }

  .vorteile-sec {
    min-height: auto;
  }

  .vorteile_wrapper {
    padding-top: 2em;
  }

  .vorteile_content {
    width: 60%;
  }

  .vorteile_item {
    width: 50%;
  }

  .vorteile_h3-left {
    font-size: 3.6em;
  }

  .vorteile_p {
    font-size: 18px;
  }

  .vorteile_icon-ort, .vorteile_icon-time {
    width: 100px;
  }

  .vorteile_h3-right {
    margin-top: 0;
    font-size: 3.6em;
  }

  .bluhai-story_sec {
    background-image: url('../images/blu_fish.svg'), url('../images/bluhai-story_red-1.svg'), url('../images/bluhai-story_red-2.svg'), url('../images/blu_fish.svg');
    background-position: 74% 30%, 150% 0, 0 80%, 11% 92%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 6em, 45em, 38em, 6em;
    min-height: 59vh;
    margin-top: 0;
  }

  .vorteil_h2 {
    font-size: 6em;
  }

  .vorteile_item-right {
    width: 49%;
  }

  .bluhai_content {
    flex-flow: column;
    align-items: center;
    padding-top: 0;
  }

  .bluhai_h2 {
    font-size: 7em;
  }

  .bluhai_p {
    font-size: 19px;
  }

  .bluhai_left-item {
    padding-top: 0;
  }

  .bluhai_right-item {
    width: 40%;
    padding-top: 0;
  }

  .seminar-sec {
    min-height: 46vh;
  }

  .seminar_wrapper {
    flex-flow: column;
    position: relative;
  }

  .seminar-item {
    flex-flow: column;
    width: 100%;
    display: flex;
  }

  .seminar_h3 {
    font-size: 6em;
  }

  .seminar-item-left {
    width: 100%;
    padding-top: 0;
  }

  .seminar-item-img {
    width: 51%;
    margin-top: 7em;
    position: absolute;
    inset: 0% 0% auto auto;
  }

  .kontakt_section {
    min-height: 0;
    margin-top: 0;
  }

  .kontakt-flex {
    flex-flow: column;
    align-items: center;
  }

  .kontakt_left-item {
    width: 90%;
  }

  .kontakt_h2 {
    font-size: 6em;
  }

  .kontakt_p {
    font-size: 16px;
  }

  .about-left {
    margin-top: 0;
  }

  .kontakt_column {
    width: 40%;
  }

  .coop_section {
    min-height: 0;
  }

  .body {
    background-position: 104%;
  }
}

@media screen and (max-width: 767px) {
  .hero_text {
    font-size: 14px;
  }

  .vorteile_wrapper {
    padding-top: 5em;
  }

  .vorteile_content {
    width: 80%;
    margin-left: 22em;
  }

  .vorteile_item {
    width: 80%;
    padding-bottom: 20px;
  }

  .vorteile_h3-left {
    font-size: 5em;
  }

  .vorteile_icon-ort {
    width: 100px;
  }

  .vorteile_item-flex {
    flex-flow: column;
  }

  .vorteile_icon-time {
    width: 100px;
  }

  .vorteile_h3-right {
    font-size: 5em;
  }

  .vorteil_h2 {
    padding-left: 2em;
    font-size: 8em;
  }

  .vorteile_item-right {
    width: 70%;
  }

  .bluhai_p {
    font-size: 16px;
  }

  .bluhai_left-item {
    padding-left: 4em;
    padding-right: 4em;
  }

  .bluhai_right-item {
    width: 60%;
  }

  .trans-flag {
    width: 27em;
  }

  .seminar-item-img {
    margin-top: 52em;
  }
}

@media screen and (max-width: 479px) {
  .hero_textbox {
    width: 100%;
  }

  .hero_subtitle {
    margin-bottom: 3em;
    font-size: 4em;
  }

  .hero_h1 {
    font-size: 9em;
  }

  .hero_text {
    font-size: 17px;
  }

  .vorteile-sec {
    background-size: 37em, 6em, 6em;
  }

  .vorteile_content {
    margin-left: auto;
  }

  .vorteile_item {
    width: 90%;
  }

  .vorteile_h3-left {
    font-size: 11em;
  }

  .vorteile_icon-ort, .vorteile_icon-time {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }

  .vorteile_h3-right {
    font-size: 11em;
  }

  .vorteil_h2 {
    padding-left: 2.7em;
    font-size: 11em;
  }

  .vorteile_item-right {
    width: 90%;
  }

  .bluhai_left-item {
    background-color: var(--blu);
    background-image: none;
    background-repeat: repeat;
    background-size: auto;
  }

  .seminar_h3 {
    font-size: 12em;
  }

  .seminar-item-left {
    margin-bottom: 40px;
  }

  .seminar-item-img {
    display: none;
  }

  .kontakt_h2 {
    font-size: 14em;
  }

  .kontakt_right-item {
    width: 80%;
  }

  .about_flex {
    flex-flow: column;
  }

  .about-left {
    background-color: var(--rosa);
    width: 100%;
  }

  .kontakt_column {
    width: 80%;
  }

  .bluhai_kotakt-logo {
    width: 45em;
  }

  .coop_wrapper {
    padding-left: 5em;
  }

  .coop_flex {
    flex-flow: column;
  }

  .coop_right {
    width: 90%;
  }

  .coop_left {
    width: 100%;
  }

  .coop-h3 {
    font-size: 10em;
  }
}


@font-face {
  font-family: 'Ibmplexsans Local';
  src: url('../fonts/IBMPlexSans-Local-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexsans Local';
  src: url('../fonts/IBMPlexSans-Local-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Arnika Variable Local';
  src: url('../fonts/Arnika_Variable_Local.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}