/* -------------------------------------- */
/* poppins */

@font-face {
    font-family: 'poppins'; /* thin */
    src: url('fonts/poppins/poppins-thin.woff2') format('woff2'),
         url('fonts/poppins/poppins-thin.woff') format('woff'),
         url('fonts/poppins/poppins-thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'poppins'; /* thin italic */
    src: url('fonts/poppins/poppins-thinitalic.woff2') format('woff2'),
         url('fonts/poppins/poppins-thinitalic.woff') format('woff'),
         url('fonts/poppins/poppins-thinitalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'poppins'; /* extra light */
    src: url('fonts/poppins/poppins-extralight.woff2') format('woff2'),
         url('fonts/poppins/poppins-extralight.woff') format('woff'),
         url('fonts/poppins/poppins-extralight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'poppins'; /* extra light italic*/
    src: url('fonts/poppins/poppins-extralightitalic.woff2') format('woff2'),
         url('fonts/poppins/poppins-extralightitalic.woff') format('woff'),
         url('fonts/poppins/poppins-extralightitalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'poppins'; /* light */
    src: url('fonts/poppins/poppins-light.woff2') format('woff2'),
         url('fonts/poppins/poppins-light.woff') format('woff'),
         url('fonts/poppins/poppins-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'poppins'; /* light italic*/
    src: url('fonts/poppins/poppins-lightitalic.woff2') format('woff2'),
         url('fonts/poppins/poppins-lightitalic.woff') format('woff'),
         url('fonts/poppins/poppins-lightitalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'poppins'; /* regular */
    src: url('fonts/poppins/poppins-regular.woff2') format('woff2'),
         url('fonts/poppins/poppins-regular.woff') format('woff'),
         url('fonts/poppins/poppins-regular.ttf') format('truetype');
    font-weight: 400; /* entspricht font-weight: normal */
    font-style: normal;
}

@font-face {
    font-family: 'poppins'; /* regular italic */
    src: url('fonts/poppins/poppins-italic.woff2') format('woff2'),
         url('fonts/poppins/poppins-italic.woff') format('woff'),
         url('fonts/poppins/poppins-italic.ttf') format('truetype');
    font-weight: 400; /* entspricht font-weight: normal */
    font-style: italic;
}

@font-face {
    font-family: 'poppins'; /* medium */
    src: url('fonts/poppins/poppins-medium.woff2') format('woff2'),
         url('fonts/poppins/poppins-medium.woff') format('woff'),
         url('fonts/poppins/poppins-medium.ttf') format('truetype');
    font-weight: 500; /* entspricht font-weight: normal */
    font-style: normal;
}

@font-face {
    font-family: 'poppins'; /* medium italic */
    src: url('fonts/poppins/poppins-mediumitalic.woff2') format('woff2'),
         url('fonts/poppins/poppins-mediumitalic.woff') format('woff'),
         url('fonts/poppins/poppins-mediumitalic.ttf') format('truetype');
    font-weight: 500; /* entspricht font-weight: normal */
    font-style: italic;
}

@font-face {
    font-family: 'poppins'; /* semi bold */
    src: url('fonts/poppins/poppins-semibold.woff2') format('woff2'),
         url('fonts/poppins/poppins-semibold.woff') format('woff'),
         url('fonts/poppins/poppins-semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'poppins'; /* semi bold italic */
    src: url('fonts/poppins/poppins-semibolditalic.woff2') format('woff2'),
         url('fonts/poppins/poppins-semibolditalic.woff') format('woff'),
         url('fonts/poppins/poppins-semibolditalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'poppins'; /* bold */
    src: url('fonts/poppins/poppins-bold.woff2') format('woff2'),
         url('fonts/poppins/poppins-bold.woff') format('woff'),
         url('fonts/poppins/poppins-bold.ttf') format('truetype');
    font-weight: 700;  /* entspricht font-weight: bold */
    font-style: normal;
}

@font-face {
    font-family: 'poppins'; /* bold italic */
    src: url('fonts/poppins/poppins-bolditalic.woff2') format('woff2'),
         url('fonts/poppins/poppins-bolditalic.woff') format('woff'),
         url('fonts/poppins/poppins-bolditalic.ttf') format('truetype');
    font-weight: 700;  /* entspricht font-weight: bold */
    font-style: italic;
}

@font-face {
    font-family: 'poppins'; /* extra bold */
    src: url('fonts/poppins/poppins-Extrabold.woff2') format('woff2'),
         url('fonts/poppins/poppins-Extrabold.woff') format('woff'),
         url('fonts/poppins/poppins-Extrabold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'poppins'; /* extra bold italic */
    src: url('fonts/poppins/poppins-Extrabolditalic.woff2') format('woff2'),
         url('fonts/poppins/poppins-Extrabolditalic.woff') format('woff'),
         url('fonts/poppins/poppins-Extrabolditalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'poppins'; /* black */
    src: url('fonts/poppins/poppins-black.woff2') format('woff2'),
         url('fonts/poppins/poppins-black.woff') format('woff'),
         url('fonts/poppins/poppins-black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'poppins'; /* black italic */
    src: url('fonts/poppins/poppins-blackitalic.woff2') format('woff2'),
         url('fonts/poppins/poppins-blackitalic.woff') format('woff'),
         url('fonts/poppins/poppins-blackitalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/* merienda-300 - latin */
@font-face {
  font-family: 'Merienda';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/merienda/merienda-v19-latin-300.woff2') format('woff2'),
       url('fonts/merienda/merienda-v19-latin-300.woff') format('woff'),
       url('fonts/merienda/merienda-v19-latin-300.ttf') format('truetype');
}

/* merienda-regular - latin */
@font-face {
  font-family: 'Merienda';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/merienda/merienda-v19-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/merienda/merienda-v19-latin-regular.woff2') format('woff2'),
       url('fonts/merienda/merienda-v19-latin-regular.woff') format('woff'),
       url('fonts/merienda/merienda-v19-latin-regular.ttf') format('truetype');
}

/* merienda-500 - latin */
@font-face {
  font-family: 'Merienda';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/merienda/merienda-v19-latin-500.woff2') format('woff2'),
       url('fonts/merienda/merienda-v19-latin-500.woff') format('woff'),
       url('fonts/merienda/merienda-v19-latin-500.ttf') format('truetype');
}

/* merienda-600 - latin */
@font-face {
  font-family: 'Merienda';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/merienda/merienda-v19-latin-600.woff2') format('woff2'),
       url('fonts/merienda/merienda-v19-latin-600.woff') format('woff'),
       url('fonts/merienda/merienda-v19-latin-600.ttf') format('truetype');
}

/* merienda-700 - latin */
@font-face {
  font-family: 'Merienda';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/merienda/merienda-v19-latin-700.woff2') format('woff2'),
       url('fonts/merienda/merienda-v19-latin-700.woff') format('woff'),
       url('fonts/merienda/merienda-v19-latin-700.ttf') format('truetype');
}

/* merienda-800 - latin */
@font-face {
  font-family: 'Merienda';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/merienda/merienda-v19-latin-800.woff2') format('woff2'),
       url('fonts/merienda/merienda-v19-latin-800.woff') format('woff'),
       url('fonts/merienda/merienda-v19-latin-800.ttf') format('truetype');
}

/* merienda-900 - latin */
@font-face {
  font-family: 'Merienda';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/merienda/merienda-v19-latin-900.woff2') format('woff2'),
       url('fonts/merienda/merienda-v19-latin-900.woff') format('woff'),
       url('fonts/merienda/merienda-v19-latin-900.ttf') format('truetype');
}


/* VARIABLEN */
:root {  --colorblack: #222222;}
:root {  --colordark: #999999;}
:root {  --colorlight: #FFFFFF;}

:root {  --color01: #83B656;} /* GRUEN */

* {margin: 0;padding: 0;box-sizing: border-box;}

body {background: var(--colorlight);color: var(--colordark);font-family: 'poppins', Arial, Helvetica, Sans-Serif;font-weight: 400;font-style: normal;line-height: 21px;font-size: 15px; position: relative;}

h1 { color: var(--color01);font-weight: 500;font-size: 60px;line-height: 62px;margin-bottom: 40px;text-shadow: 1px 1px 12px var(--colorlight);}
h2 { color: var(--colorblack);font-weight: 500;font-size: 40px;line-height: 43px;margin-bottom: 40px;}
h3 { color: var(--colordark);font-weight: 500;font-size: 24px;line-height: 30px;margin-bottom: 10px;}
h4 {color: var(--colorblack); font-weight: 600; font-size: 18px;line-height: inherit;margin-bottom: 10px;}

a:link, a:visited {color: var(--color01);text-decoration: underline;}
a:hover, a:active {text-decoration: none;outline: 0;}
p {margin-bottom: 15px;}
ul {list-style: none;}
img {border: none;}
b, strong {font-weight: 700;}
hr {margin-bottom: 30px; background:none;border-bottom: 2px dashed rgba(255,255,255,0.3);height: 1px;}
table {border-collapse: collapse;border-spacing: 0;}

a.button {color: var(--colorlight);background: var(--color01);border: 2px solid var(--color01);font-size: 13px;font-weight: 700;text-decoration: none;padding: 14px 40px;cursor: pointer;border-radius: 34px;display: inline-block;letter-spacing: 2.6px;line-height: 20px;}
a.button:hover {background: none;color: var(--color01);}

.icon i {color: var(--color01); min-width: 70px;font-size: 40px;}

#wrapper .block {padding-top: 100px;background: var(--colorlight);}
#wrapper .block > * {width: 1180px;margin-left: auto;margin-right: auto;}
#wrapper .block.wide > *  {margin: 0;width: 100%;}

#wrapper .columns {display: flex;gap: 30px;}
#wrapper .columns .column {flex-basis: 0;flex-grow: 1;}
#wrapper .columns.wide {padding-left: 30px;padding-right: 30px;}
#wrapper .columns.subcolumns .column {display: flex;gap: 16px;}

#wrapper .center {text-align: center;}
#wrapper .color01 {color: var(--color01);}
#wrapper .wave {position: absolute;bottom: -1px;left: 0;width: 100%!important;padding: 0 !important;z-index: 40;display: block;}

/* Animationen */
#header .extra a,
#header #toggle-nav,
#header #toggle-nav span,
#header #menu ul,
#header #menu a,
#main .animated,
#main a.button,
#footer .arrow {transition: all 0.4s ease-in-out 0s;}

#header {display: flex;justify-content: space-between;align-items: center;padding: 0 100px;position: fixed;top: 0;left: 0;width: 100%;z-index: 100;background: var(--colorlight);}
#header .title {padding: 5px 0;text-align: center;}
#header .title a {display: inline-block;height: 60px;}
#header .title a img {display: block; height: 100%;width: auto;border: none;}
#header .extra li {display: inline-block;padding: 0 7px;}
#header .extra a {color: var(--colorblack);font-size: 20px;line-height: 20px;}
#header .extra a:hover {color: var(--color01);}

#header #menu ul {font-size: 0;line-height: 0;}
#header #menu ul ul li {margin: 0 20px;}
#header #menu li,
#header #menu a {display: inline-block;color: var(--colorblack);font-size: 15px;line-height: 30px;font-weight: 600;letter-spacing: .2px;text-decoration: none;}
#header #menu .nav a:hover,
#header #menu .nav li.active a {color: var(--color01);}

#header #toggle-nav {display: none;}

#banner {position: relative;height: 100vh;overflow: hidden;background-size: cover;background-position: center;display: flex;align-items: center;justify-content: center;color: var(--colorlight);}
#banner .content p {margin-bottom: 40px;}

#main ul,
#main ol { margin: 0 0 15px 20px;}
#main ul { list-style: disc;}

#main .kursiv {font-family: 'Merienda';font-size: 20px; line-height: 30px;color: var(--color01);margin-bottom: 26px;display: block;}
#main .colorbox {background: var(--color01);color: var(--colorlight);box-shadow: 0 20px 40px 0 var(--color01);border-radius: 5px;padding: 65px 30px;margin-bottom: 20px;}
#main .colorbox > * {width: 100%;}
#main .colorbox * {color: var(--colorlight);width: 100%;}
#main .colorbox .list {display: flex;justify-content: center;}

#main .colorbox .list::before,
#main .colorbox .list::after {content: '';flex-grow: 1;display: block;width: 1px;height: 1px;display: block;}

#main .colorbox .list ul {margin: 0;list-style: none;flex-grow: 4;flex-basis: 0;}
#main .colorbox .list li {font-weight: 600;margin-bottom: 15px;}
#main .bgpic {min-height: 300px; height: 80vh;background: none;position: relative;}
#main .bgpic img.pic {display: none;}
#main .animated {opacity: 0;transform: translateY(100px);}
#main .animated span {}
#main .animated.active {opacity: 1;transform: translateY(0);}
#main .animated.active span {}

#footer {background: var(--color01);min-height: 50px;}
#wrapper #footer .block {background: none;padding: 0 0 40px 0;}
#footer ul {text-align: center;}
#footer li {display: inline-block;padding: 0 7px;}
#footer a {color: var(--colorlight);text-decoration: none;letter-spacing: .2px;font-size: 15px;line-height: 30px;}

#footer .arrow {position: fixed;bottom: 30px;right: 40px; z-index: 101; background: var(--colorlight);color: var(--colordark);width: 32px;height: 32px;text-align: center;}
#footer .arrow a {display: block;color: var(--colorblack);font-size: 17px;line-height: 34px;}
#footer .arrow a:hover {opacity: 0.5;}
#footer .arrow {opacity: 0;}
#footer .arrow.scrolled {opacity: 1;}


@media screen and (max-width: 1500px) {

    #banner .img-wrap-3,
    #banner .img-wrap-6 {display: none!important;}

}

@media screen and (max-width: 1210px) {

    #wrapper .block > * {width: 100%;margin-left: 0;margin-right: 0; padding-left: 20px;padding-right: 20px;}
    #wrapper .columns {flex-wrap: wrap;}

}

@media screen and (max-width: 900px) {

    h1 {font-size: 32px;line-height: 34px;}

    #header {padding: 0 20px;align-items: start;}
    #header .extra {display: none;}
    #header .title a img {margin-right: -18px;}

    #header #menu {padding: 14px 0;text-align: right;}
    #header #menu ul li {display: block;text-align: right;margin: 0!important;}
    #header #menu ul li a {display: block;overflow: hidden;height: 0;}
    #header.menu-active #menu > ul {padding-top: 15px}
    #header.menu-active #menu ul li a {height: 40px;}

    #header #toggle-nav {width: 38px; padding-left: 0;cursor: pointer;display: inline-block;}
    #header #toggle-nav span {width: 38px; background: var(--color01);display: block;height: 6px;margin: 6px 0;}
    #header.menu-active #toggle-nav {padding-left: 6px;}
    #header.menu-active #toggle-nav span {opacity: 0;transform-origin: 2px center;}
    #header.menu-active #toggle-nav span:first-child {opacity: 1;transform: rotate(45deg);}
    #header.menu-active #toggle-nav span:last-child {opacity: 1;transform: rotate(-45deg);}

    #main .colorbox .list {padding: 0 20px;}
    #main .colorbox .list::before,
    #main .colorbox .list::after {display: none;}

}

@media screen and (max-width: 700px) {

    #wrapper .columns .column {flex-basis: 100%;}

}