/*===========================================================
 Custom Variable
============================================================*/
:root {
    /* Hamber menu icon style */
    --hamWidth: 2.5rem;
    --hamHeight: 0.25rem;
    --hamMargin: 0.375rem;
    /* summation of --hamMargin adn --hamHeight */
    --hamTranslate: 0.625rem;
    /* summation of --hamMargin adn --hamHeight */
    --hamTranslate3: -0.625rem;
    --header-height: 0;
    --hamBg: #093;
    --white: #fff;
    --black: #000;
    --white2: #f1f7f7;
    --gray: #858585;
    --green2: #009933;
    --green3: #167479;
    --yellow: #ffce00;
    --green-light: #a6d81c;
    --dark-light-transparent: rgba(0, 0, 0, 0.7);
    --green-light-transparent: rgba(166, 217, 28, 0.85);
    /* --green-dark: #097925; */
    --xxl: 3.4375rem;
    --xl: 2.5rem;
    --lg2: 1.875rem;
    --lg: 1.5rem;
    --md: 1.375rem;
    --md2: 1.25rem;
    --sm: 1rem;
    --xs: 0.875rem;
    --xxs: 0.75rem;
    /* padding */
    --sectionPadding: 6.25rem;
}

/*===========================================================
 Common CSS
============================================================*/

body {
    font-family: "Inter", sans-serif;
    font-size: var(--sm);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    overflow-x: hidden !important;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul {
    padding: 0;
    margin: 0;
}

li,
li:hover,
a:hover,
.btn,
.btn:hover {
    transition: all 0.3s ease;
}

a:hover {
    text-decoration: none !important;
}

*:active,
*:focus {
    outline: none;
    border: 0;
}

img {
    max-width: 100%;
    height: auto;
}

strong {
    font-weight: 700;
}

u {
    border-bottom: 0.0625rem solid var(--white);
    line-height: 1;
    text-decoration: unset;
}

.cboth {
    overflow: hidden;
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}

button {
    background-color: transparent;
    border: 0;
}

/* h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
} */
h3 {
    font-size: var(--lg2);
    font-weight: 600;
    line-height: 1.27;
}
button:active,
button:focus {
    outline: 0;
    outline: 0;
}

.row {
    --gutter-x: 1.875rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: calc(var(--gutter-x) * -0.5);
    margin-left: calc(var(--gutter-x) * -0.5);
}

.row > * {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--gutter-x) * 0.5);
    padding-left: calc(var(--gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

.col {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
}
.col-6 {
    flex: 0 0 auto;
    width: 50%;
}
.col-12 {
    flex: 0 0 auto;
    width: 100%;
}
.container {
    width: 100%;
    padding-right: calc(var(--gutter-x) * 0.5);
    padding-left: calc(var(--gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
    max-width: 88.75rem;
    padding: 0 0.625rem;
}
.title h3 {
    font-weight: bold;
}
/*===========================================================
 Placeholder Style
============================================================*/

::-webkit-input-placeholder {
    color: var(--black);
    font-size: var(--xs);
    font-weight: 300;
    line-height: 1.875rem;
    letter-spacing: 0.0244rem;
}

:-moz-placeholder {
    color: var(--black);
    font-size: var(--xs);
    font-weight: 300;
    line-height: 1.875rem;
    letter-spacing: 0.0244rem;
}

::-moz-placeholder {
    color: var(--black);
    font-size: var(--xs);
    font-weight: 300;
    line-height: 1.875rem;
    letter-spacing: 0.0244rem;
}

:-ms-input-placeholder {
    color: var(--black);
    font-size: var(--xs);
    font-weight: 300;
    line-height: 1.875rem;
    letter-spacing: 0.0244rem;
}

/*===========================================================
 Scroll To Top
============================================================*/

.go-top {
    bottom: 0.9375rem;
    display: none;
    position: fixed;
    right: 0.9375rem;
    z-index: 999;
}

.go-top img {
    width: 2.1875rem;
    background: var(--white);
    border-radius: 50%;
    border: 0.0625rem solid var(--white);
}

.go-top span {
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    float: right;
    font-size: var(--sm);
    font-weight: 400;
    line-height: 1.375rem;
    padding: 0.3125rem 0.625rem;
}

.go-top span:hover {
    color: var(--white);
}

/*===========================================================
Loader
===========================================================*/

.preloader {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--white);
    z-index: 99999999;
}

.spinner {
    width: 5rem;
    height: 5rem;
    border: 0.125rem solid var(--white2);
    border-top: 0.1875rem solid var(--green-light);
    border-radius: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-animation: 1s infinite spin;
    animation: 1s infinite spin;
}

@-webkit-keyframes spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

#loading-msg {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1.5625rem;
    text-align: center;
    color: var(--green-light);
    font-size: 0.8em;
}

/*===========================================================
 Navigation Menu Desktop
============================================================*/
.header-area {
    padding: 0.625rem 0;
}

.header {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.menu-left span {
    font-size: var(--lg);
    font-weight: 600;
    line-height: 1;
    color: var(--yellow);
}
.menu-left a img {
    text-decoration: none;
    width: 13.125rem;
}

.menu {
    display: flex;
    align-items: center;
}
.menu ul {
    margin: 0;
}
.d-flex {
    display: flex;
    gap: 1.875rem;
}

.menu ul.d-flex {
    align-items: center;
}

.menu ul li {
    list-style: none;
    display: inline-block;
    margin: 0 !important;
}
.menu ul li a {
    font-size: var(--sm);
    font-weight: 400;
    line-height: 1.5;
    color: black;
    text-decoration: none;
}

.menu ul li a:hover {
    color: var(--green2);
}
.contact {
    font-size: var(--sm);
    font-weight: 700 !important;
    line-height: 1.5;
    color: var(--black) !important;
    width: 6.875rem;
    height: 2.625rem;
    padding: 0.625rem 1.0625rem;
    border: 0.125rem solid transparent;
    background-color: var(--green-light);
}
.contact:hover {
    border: 0.125rem solid var(--green-light);
    background: var(--white);
    color: var(--black);
}
.dropdown-menu {
    margin: 0 !important;
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: var(--sm);
    list-style: none;
    background-clip: padding-box;
    border-radius: 0.25rem;
    background: var(--white);
}
.home-menu {
    padding: 1.75rem 0;
    border-top: 0.0625rem solid var(--hamBg);
}

.home-menu ul:first-child {
    list-style: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 3.125rem !important;
    margin: 0 !important;
}

.home-menu ul li {
    margin-bottom: 0 !important;
    position: relative;
}

.home-menu a {
    background: none !important;
    text-decoration: none !important;
    font-size: var(--sm) !important;
    text-transform: uppercase !important;
    font-weight: normal !important;
    line-height: 1.5 !important;
    color: var(--black) !important;
    height: auto !important;

    position: relative;
    display: block;
    padding: 5px 30px 5px 15px;
}
/*===========================================================
 Navigation Menu slideout
============================================================*/
main .mobileMenuOpener {
    display: none;
}

.panel-header {
    display: none;
}

.slideout-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 16rem;
    min-height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    display: none;
}

.slideout-menu-left {
    left: 0;
}

.slideout-menu-right {
    right: 0;
}

.slideout-panel {
    position: relative;
    z-index: 1;
    background-color: var(--white);
    min-height: 100vh;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
    overflow: hidden;
}

.slideout-open .slideout-menu {
    display: block;
}

.slideout-open .slideout-menu {
    background: var(--hamBg);
}

.btn-hamburger {
    cursor: pointer;
}

.menu-section-list {
    padding: 1.5625rem 0.625rem;
}

.menu-section-list li a:hover {
    color: var(--gray);
}

.menu-section-list li a {
    line-height: 2;
    color: var(--white);
}

.menu-section-list li {
    display: block;
}

.btn-hamburger img {
    width: 1.6875rem;
}

/*Hamburger Menu Icon*/
/* .hamburger .line {
    width: 2.5rem;
    height: .3125rem;
    background-color: #34495e;
    display: block;
    margin: .5rem auto;
    transition: all 0.3s ease-in-out;
} */

.hamburger:hover {
    cursor: pointer;
}

.hamburger:hover .line {
    opacity: 0.8;
}

.slideout-open .line:nth-child(2) {
    opacity: 0;
}

.slideout-open .line:nth-child(1) {
    transform: translateY(0.8125rem) rotate(45deg);
}

.slideout-open .line:nth-child(3) {
    transform: translateY(-0.8125rem) rotate(-45deg);
}

/*===========================================================
 Hamberger
===========================================================*/

.hamburger .line {
    width: var(--hamWidth);
    height: var(--hamHeight);
    background-color: var(--hamBg);
    display: block;
    margin: var(--hamMargin) auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.hamburger:hover {
    cursor: pointer;
}

/* ONE */

.slideout-open .line:nth-child(2) {
    opacity: 0;
}

.slideout-open .line:nth-child(1) {
    -webkit-transform: translateY(var(--hamTranslate)) rotate(45deg);
    -ms-transform: translateY(var(--hamTranslate)) rotate(45deg);
    -o-transform: translateY(var(--hamTranslate)) rotate(45deg);
    transform: translateY(var(--hamTranslate)) rotate(45deg);
}

.slideout-open .line:nth-child(3) {
    -webkit-transform: translateY(var(--hamTranslate3)) rotate(-45deg);
    -ms-transform: translateY(var(--hamTranslate3)) rotate(-45deg);
    -o-transform: translateY(var(--hamTranslate3)) rotate(-45deg);
    transform: translateY(var(--hamTranslate3)) rotate(-45deg);
}

.menu ul li .dropdown-menu li {
    display: block;
    position: relative;
}

.menu ul li .dropdown-menu li a {
    padding: 0.5rem 0.9375rem;
    line-height: 1.2;
    display: block;
}

.dropdown-menu {
    margin: 0;
    border: 0;
    border-radius: 0;

    padding-left: 0 !important;
}

.dropdown a {
    position: relative;
}

.dropdown > a:hover::after {
    color: var(--green-light);
}

.menu-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: middle;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;

    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/*===========================================================
Accordion
===========================================================*/
.accordion-area {
    padding-top: var(--sectionPadding);
    padding-bottom: 4.375rem;
}
.acc-container {
    max-width: 65rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.acc {
    border-top: 0.0625rem solid var(--green2);
    padding: 1.25rem;
}

.acc-head {
    position: relative;
    cursor: pointer;
    padding-right: 3.4375rem;
}

.acc-head::before,
.acc-head::after {
    content: "";
    position: absolute;
    top: 50%;
    transition: all 0.3s;
}

.acc-head::before {
    right: 0;
    width: 2.8125rem;
    height: 2.8125rem;
    margin-top: -1.4375rem;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-repeat: no-repeat;
}

.acc-head::after {
    right: 1.3125rem;
    width: 0.875rem;
    height: 1.625rem;
    margin-top: -0.125rem;
}

.acc-head p {
    font-size: var(--md);
    font-weight: bold;
    line-height: 1.36;
    color: var(--black);
}

.acc-content {
    display: none;
}

.acc-head.active::before {
    transform: rotate(180deg);
}

.acc-title {
    margin-bottom: 3rem;
}

.acc-content p {
    font-size: var(--sm);
    font-weight: normal;
    line-height: 1.5;
    color: var(--black);
    margin-top: 1.6875rem;
}

.acc-content-text {
    margin-top: 1.6875rem;
}
.acc-content-text ul {
    margin: 0;
    padding-left: 0.625rem;
}
.acc-content-text ul li,
.acc-content-text p {
    font-size: var(--sm);
    font-weight: normal;
    line-height: 1.5;
    color: var(--black);
    margin: 0 !important;
    list-style: none;
}
.acc-content-text ul li {
    position: relative;
    padding-left: 0.75rem;
}
.acc-content-text ul li:before {
    position: absolute;
    content: "";
    width: 0.1875rem;
    height: 0.1875rem;
    background: var(--black);
    border-radius: 50%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/*===========================================================
 Responsive Menu
===========================================================*/
@media (min-width: 87.5rem) {
}

@media (min-width: 62rem) {
    .dropdown:hover > a + .dropdown-menu {
        display: block;
    }

    .dropdown-menu .dropdown-menu {
        position: absolute;
        left: 100%;
        top: 0;
    }

    ul ul .menu-toggle::after {
        transform: rotate(-90deg);
        margin-top: -0.25rem;
    }
}

@media (max-width: 61.9375rem) {
    #main {
        padding-top: 0;
    }

    .header-area {
        display: none;
    }

    .mobile-logo {
        width: 12.5rem;
    }

    .dropdown-menu {
        padding-top: 0;
    }

    .menu ul li .dropdown-menu li {
        padding-left: 0.625rem;
    }

    .menu ul li .dropdown-menu li a {
        padding-left: 0;
        padding-right: 0;
    }

    .dropdown-menu {
        width: 100%;
        background-color: transparent;
        background-clip: padding-box;
        border: none;
        position: unset;
        top: unset;
    }

    main .mobileMenuOpener {
        display: block;
        position: absolute;
        width: 1.25rem;
        height: 100%;
        z-index: 10;
    }

    .menu ul li {
        display: block;
    }

    .menu ul li a {
        color: var(--white);
        display: block;
        padding: 0.625rem 0;
        border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
        line-height: 2;
    }

    .menu ul li .dropdown-menu li a {
        line-height: 2;
    }

    .dropdown > a::after {
        right: 0.625rem;
        position: absolute;
        top: 50%;
        margin-top: -0.0625rem;
    }

    /*Menu Activation*/
    .panel-header {
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--white);
        box-shadow: 0rem 0.0625rem 0.1875rem #eee;
        padding: 0.625rem 0.9375rem;
    }
}

/*===========================================================
Banner Area
============================================================*/

.banner-area {
  position: relative;
}

.banner-area > .container {
    position: relative;
}
.banner-area-test:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* background-image: linear-gradient(
        to right,
        #2b2b2b 42%,
        rgba(170, 170, 170, 0.77) 66%
    ); */
    background: rgb(0, 0, 0, 0.4);
}

.banner-area .banner-text {
  position: relative;
}

.banner-area.ausrichtung-left .banner-text {
  left: 0;
  bottom: 0;
}

.banner-area.ausrichtung-lefttop .banner-text {
  left: 0;
  top: 0;
}

.banner-area.ausrichtung-right .banner-text {
  right: 0;
  bottom: 0;
}

.banner-area.ausrichtung-righttop .banner-text {
  right: 0;
  top: 0;
}

.banner-area .banner-text {
  margin-left: auto;
  margin-right: auto;
}

.banner-area .background-image + .banner-text {
  position: absolute;
  margin: 35px 50px;
}

.banner-area .background-image img {
    width: 100%;
}

.banner-text {
    position: relative;
    max-width: 700px;
    background: var(--dark-light-transparent);
    padding: 20px 30px;
}
.banner-text h1 {
    font-size: var(--xxl);
    font-weight: bold;
    line-height: 1.18;
    margin: 0;
	  margin-bottom: 15px;
}

.banner-text * {
    color: var(--white) !important;
}

.banner-text p {
    text-align: justify;
}

/*===========================================================
Article
============================================================*/
.article-menu {
    margin-top: 1.875rem;
}
.article-menu ul {
    margin: 0;
    display: flex;
    gap: 2.8125rem;
    justify-content: right;
}
.article-menu ul li {
    list-style: none;
    margin: 0 !important;
}
.article-menu ul li a {
    text-decoration: none;
    font-size: var(--sm);
    font-weight: normal;
    line-height: 1.5;
    color: var(--black);
}
.article-menu ul li a:hover,
.article-menu .active {
    border-bottom: 0.0625rem solid var(--black);
}
.article-text-area {
    padding-bottom: var(--sectionPadding);
}
.article-area {
    padding-bottom: 4.0625rem;
    position: relative;
    z-index: 10;
}
.article-wrap-area {
    position: relative;
    background-image: url("../img/bgs/article-bg.png");
    background-repeat: no-repeat;
    background-position: center top;
}
.article-wrap-area::before {
    position: absolute;
    content: "";
    left: 0;
    width: 100%;
    height: 93.75rem;
    background-image: linear-gradient(
        to bottom,
        #e7f6eb,
        rgba(231, 246, 235, 0)
    );
    z-index: 1;
}
.article-wrap {
    position: relative;
    max-width: 65rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
}
.article-banner-area {
    padding-top: 1.875rem;
    margin-bottom: 1.25rem;
}
.article-banner-img img {
    width: 100%;
}
.article-banner-img p {
    font-size: var(--xs);
    font-weight: normal;
    font-style: italic;
    line-height: 1.57;
    color: var(--black);
    margin: 0;
}
.article-banner-img span {
    font-size: var(--xs);
    font-weight: normal;
    line-height: 1.57;
    text-align: right;
    color: var(--black);
    display: block;
}
.article-sin-text {
    max-width: 43.75rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.article-text .green-light {
    font-size: var(--xs);
    font-weight: bold;
    color: var(--black);
    padding: 0.375rem 0.875rem;
    background-color: var(--green-light);
    display: inline-block;
    margin-bottom: 1.25rem;
}
.tags {
    margin-bottom: 2.8125rem;
    margin-top: 0.3125rem;
}
.tags b {
    font-size: var(--sm);
    line-height: 1.5;
    color: var(--black);
    margin-right: 0.3125rem;
}
.tags a {
    font-size: var(--sm);
    font-weight: normal;
    line-height: 1.5;
    color: var(--black);
    text-decoration: none;
    display: inline-block;
    margin-right: 1.25rem;
}
.tags a:hover {
    color: var(--green-light);
}

.back-to-all a {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.andrew-pierce {
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 1rem;
}
.andrew-text {
    max-width: 21.5625rem;
}
.andrew-text p {
    margin-top: 0.3125rem;
}
.andrew-img {
    max-width: 31.25rem;
    width: 100%;
    float: left;
}
.andrew-img img {
    width: 100%;
}
.andrew-img div {
    display: flex;
    justify-content: space-between;
}
.andrew-img div span {
    font-size: var(--xs);
    font-weight: normal;
    font-style: italic;
    line-height: 1.43;
    color: var(--hamBg);
}
.article-sin-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 2.1875rem;
}
.article-sin-2-img {
    max-width: 28.125rem;
    width: 100%;
    padding-top: 0.9375rem;
}
.article-sin-2-text {
    /* max-width: calc(100% - 34.375rem); */
    max-width: 23.75rem;
    width: 100%;
}
.self-evident {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.self-evident span {
    font-size: var(--sm);
    font-weight: bold;
    color: var(--white);
    background-color: var(--green3);
    padding: 1.125rem;
    display: inline-block;
    max-width: 18.75rem;
    width: 100%;
}
.self-evident div {
    max-width: calc(100% - 20.9375rem);
    width: 100%;
}
.self-evident div p {
    margin: 0;
}
/*===========================================================
Slider
============================================================*/
.article-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}
.article-arrows {
    display: flex;
    gap: 0.625rem;
}
.article-title h3 {
    margin: 0;
}
.article-slider {
    margin: 0 -0.625rem;
}
.article-card {
    padding: 0 0.625rem;
    margin-bottom: 35px;
}

.article-card .article-inner-card {
    border: solid 0.0625rem var(--green-light);
}

.article-card-img img {
    width: 100%;
    display: block;
}

.article-slider-text {
    padding: 1.25rem 0.9375rem 1.875rem 0.9375rem;
}
.article-slider-text span {
    font-size: var(--xs);
    font-weight: bold;
    color: var(--black);
    padding: 0.375rem 0.9375rem 0.4375rem;
    background-color: var(--green-light);
    margin-left: -0.9375rem;
}
.article-slider-text h3 {
    font-size: var(--md);
    font-weight: bold;
    line-height: 1.36;
    color: var(--black);
    padding-top: 1.25rem;
}
.article-slider-text p {
    font-size: var(--sm);
    font-weight: normal;
    line-height: 1.5;
    color: var(--black);
    /* margin: .5rem 0; */
}
.article-slider-text a {
    font-size: var(--sm);
    font-weight: normal;
    font-style: italic;
    line-height: 1.5;
    text-align: right;
    color: var(--green-dark);
    text-decoration: none;
    display: block;
}

/*===========================================================
Footer Area
============================================================*/
.footer-area {
    background-image: linear-gradient(to top, var(--green3) 0%, #12a638 100%);
    padding-top: 3.125rem;
}

.footer-area ul {
  padding-left: 0 !important;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
}
.footer-left {
    display: flex;
    gap: var(--sectionPadding);
    width: 70%;
}
.footer-menu {
    width: 100%;
}
.footer-menu h4 {
    font-size: var(--sm);
    font-weight: bold;
    color: var(--white);
}
.footer-menu ul {
    column-count: 2;
}
.footer-menu ul li {
    list-style: none;
}
.footer-menu ul li a {
    font-size: var(--xs);
    font-weight: normal;
    line-height: 1.57;
    color: var(--white);
    text-decoration: none;
}
.footer-menu ul li a:hover {
    color: var(--white2);
}

.footer-bttm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 0.0625rem solid var(--white);
    padding: 1.25rem 0;
    margin-top: 2.5rem;
}
.footer-bttm p {
    margin: 0;
    font-size: var(--xs);
    font-weight: normal;
    line-height: 1.57;
    color: var(--white);
}
.footer-bttm ul {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 2.1875rem;
}
.footer-bttm ul li {
    list-style: none;
    margin: 0 !important;
}
.footer-bttm ul li a {
    text-decoration: none;
    font-size: var(--xs);
    font-weight: normal;
    line-height: 1.57;
    color: var(--white);
}

.social-media-icons img {
    width: 35px;
}
/*===========================================================
Fragen Area
============================================================*/

.fragen-inner {
    display: flex;
    justify-content: space-between;
    background-color: var(--hamBg);
}
.fragen-text {
    max-width: calc(100% - 28.3125rem);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fragen-img {
    max-width: 28.3125rem;
    width: 100%;
}
.fragen-img img {
    height: 100%;
}
.fragen-text h3 {
    font-size: var(--lg2);
    font-weight: bold;
    line-height: 1.27;
    color: var(--white);
    margin: 0;
}
.fragen-text p {
    font-size: var(--md2);
    font-weight: normal;
    color: var(--white);
    margin: 1.25rem 0;
}

.fragen-inner-text {
    max-width: 26.5625rem;
}

.fragen-inner-text .bttn a:hover {
    color: #fff;
}

.bttn a {
    font-size: var(--sm);
    font-weight: bold;
    color: var(--black);
    padding: 0.75rem 1.125rem;
    background-color: var(--white);
    border: 1px solid var(--white);
    text-decoration: none;
    display: inline-block;
}

.bttn a:hover {
  background-color: transparent;
}
/*===========================================================
Current Area
============================================================*/
.current-area {
    background: var(--white2);
}
.width-1040 {
    max-width: 66.25rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.current-slider {
    margin: 0 -0.625rem;
}
.current-card {
    display: flex;
    align-items: center;

    text-decoration: none !important;
    color: inherit !important;
}

.current-slider .current-card {
  padding: 0 0.625rem;
}

.current-inner-card {
    padding: 3.4375rem 1.125rem;
    background-color: var(--green-light);
    position: relative;
}
/* .current-inner-card:before {
    position: absolute;
    content: "";
    width: 2rem;
    height: 2rem;
    background-color: var(--green-dark);
    right: 0;
    top: 0;
} */
.current-inner-card:before {
    position: absolute;
    content: "";
    width: 2rem;
    height: 2rem;
    background-image: url(../img/current-icon.png);
    right: 0;
    top: 0;
}

.current-inner-card p a {
    color: #000;
    text-decoration: underline !important;
}

.slick-arrow {
    cursor: pointer;
}
.slick-arrow svg:hover circle {
    stroke: var(--green2) !important;
}

.slick-arrow svg:hover path {
    fill: var(--green2);
}
/*===========================================================
Demands Area
============================================================*/
.demands-area {
    position: relative;
    background-color: var(--white2);
}
.demand-bg {
    width: 46.5625rem;
    max-width: 100%;
    position: absolute;
    top: 21.5625rem;
    left: 0;
    z-index: 1;
}
.demands-inner {
    display: flex;
    justify-content: space-between;
}
.demands-left {
    max-width: 26.25rem;
    width: 100%;
}
.demands-right {
    max-width: calc(100% - 32.5rem);
    width: 100%;
    padding-top: 2.1875rem;
}
.demands-left h3 {
    color: var(--black);
}
.demands-left p {
    font-size: var(--sm);
    font-weight: normal;
    line-height: 1.5;
    color: var(--black);
    margin: 0;
}
.demands-right ul {
    margin: 0;
}
.demands-right ul li {
    list-style: none;
    font-size: var(--xs);
    font-weight: bold;
    color: var(--green3);
    padding-bottom: 2.8125rem;
    display: flex;
    margin: 0 !important;
}
.demands-right ul li:last-child {
    padding: 0;
}
.demands-right ul li h5 {
    font-size: var(--xxl);
    font-weight: bold;
    line-height: 1.18;
    color: var(--green3);
    max-width: 3.4375rem;
    width: 100%;
    text-align: right;
    margin-bottom: 0;
    margin-top: -2.25rem;
    position: relative;
    z-index: 1;
}
.demands-right ul li p {
    max-width: calc(100% - 3.4375rem);
    width: 100%;
    padding-left: 0.9375rem;
    margin: 0;
}
.demands-right ul li h5:before {
    position: absolute;
    content: "";
    width: 6.5625rem;
    height: 0.9375rem;
    background-color: var(--green-light);
    left: -3.0625rem;
    top: 2.375rem;
    z-index: -1;
}

/*===========================================================
Ziele Area
============================================================*/
.ziele-area {
    position: relative;
}
.ziele-bg {
    position: absolute;
    width: 52.9375rem;

    max-width: 100%;
    right: 0;
    top: 23.125rem;
    z-index: 0;
}

.ziele-slider {
    margin: 0 -0.625rem;
}
.ziele-area .article-slider-text {
    padding-top: 0;
    padding-bottom: 0.625rem;
}

/* ==============Chart Area============= */
.chart-area {
    position: relative;
}
.chart-bg {
    position: absolute;
    bottom: 0;
    right: 0;
}
.chart-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.chart-inner h4 {
    font-size: var(--md);
    font-weight: normal;
    line-height: 1.36;
    text-align: center;
    color: var(--black);
}
.chart-right h4 {
    margin-bottom: 1.875rem;
}
.chart-right p {
    font-size: var(--sm);
    font-weight: normal;
    line-height: 1.5;
    color: var(--black);
    margin-top: 1.875rem;
}
.chart-left {
    width: calc(60% - 3.125rem);
    text-align: center;
}
.chart-right {
    width: 40%;
    padding-top: 1.875rem;
}

#pie-chart .svg-g {
    transform: translate(225px, 225px);
}
#pie-chart {
    width: 450px;
    height: 450px;
}
.slice {
    stroke: var(--green2);
    stroke-width: 0.0625rem;
}
.hover-slice {
    stroke-width: 0.0625rem;
}
.legend {
    font-size: var(--xxs);
    cursor: pointer;
    gap: 2.5rem;
}
.legend-item {
    display: flex;
    align-items: center;
    margin-right: 0.625rem;
}
.legend-item.strikethrough {
    text-decoration: line-through;
    color: lightgrey;
}
.legend-item div {
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
}
.arc-text {
    font-size: var(--md2);
    font-weight: bold;
    line-height: 1;
    /*  color: var(--black);*/
}

.legend-item span {
    font-size: var(--sm);
    font-weight: normal;
    line-height: 1.5;
    color: black;
    margin-left: 0.625rem !important;
}

.video-card {
    min-height: 43.75rem;
    background-color: var(--gray);
    display: flex;
    align-items: center;
    justify-content: center;
}
.map-area img {
    width: 100%;
}

.info-title {
    margin-bottom: 1.875rem;
}
.info-menu-area {
    position: relative;
}
.info-menu-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 9.375rem;
    z-index: 1;
    max-width: 100%;
}
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    border-top: 0.0625rem solid var(--hamBg);
}

table td,
table th {
    border-bottom: 0.0625rem solid var(--hamBg);
    text-align: left;
    padding: 0.5625rem 2.5rem;
}

/* ==============Notes Area============= */
.notes-area {
    padding: 5.625rem 0;
}
.notes-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
}
.notes-title h3 {
    margin: 0;
}
.notes-title span {
    font-size: var(--xs);
    font-weight: normal;
    font-style: italic;
    line-height: 1.57;
    color: var(--black);
}
.notes-img {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/*===========================================================
About Area
============================================================*/
.about-area {
    background: var(--white2);
    position: relative;
}
.about-bg {
    width: 10.125rem;
    max-width: 100%;
    height: 12.5625rem;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.about-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.about-left p {
    font-size: var(--sm);
    font-weight: normal;
    line-height: 1.5;
    color: var(--black);
}
.about-left,
.about-right {
    width: calc(50% - 1.875rem);
}
.about-right ul {
    margin: 0;
}
.about-right ul li {
    list-style: none;
    font-size: var(--sm);
    font-weight: normal;
    line-height: 1.5;
    color: var(--black);
    position: relative;
    padding-left: 0.9375rem;
}
.about-right ul li:before {
    position: absolute;
    content: "";
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: var(--black);
    left: 0;
    top: 0.5625rem;
}

/*===========================================================
Testimonials Area
============================================================*/
.testimonials-area {
    background-color: var(--white2);
    position: relative;
    overflow: hidden;
}
.testimonials-area::before {
    position: absolute;
    content: "";
    top: 3.125rem;
    height: 0.1875rem;
    width: 100%;
    background: var(--white);
}
.testimonials-bg {
    position: absolute;
    top: -10.9375rem;
    left: 0;
}
.testimonials-title h3 {
    font-size: var(--lg2);
    font-weight: bold;
    line-height: 1.27;
    color: var(--black);
    margin-bottom: 3.75rem;
}
.testimonials-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.testimonials-card {
    text-align: center;
    width: 20.3125rem;
}
.testimonials-card p {
    font-size: var(--xs);
    font-weight: normal;
    font-style: italic;
    color: var(--black);
    margin-bottom: 0.625rem;
    margin-top: 0.625rem;
    position: relative;
}
.testimonials-card p.inner-content:before {
    position: absolute;
    content: "";
    background-image: url(../img/quote.png);
    left: -2.0625rem;
    top: -0.5625rem;
    width: 2.4375rem;
    height: 3.125rem;
    background-repeat: no-repeat;
}
.testimonials-card p.person {
    font-size: var(--xs);
    font-weight: bold;
    color: var(--black);
    text-decoration: none;
}

.testimonials-card .single-image-holder {
  margin-bottom: 40px;
}
/* ==================Home Footer============= */

.home-footer .footer-left {
    flex-direction: column;
    gap: 1.875rem;
}
.home-footer .footer-menu ul {
    column-count: unset;
    display: flex;
    margin: 0;
    gap: 0.625rem;
}
.home-footer .footer-menu ul li {
    margin: 0;
}
.home-footer .footer-bttm {
    margin-top: 2.1875rem;
}
/* position */
.demands-area .container,
.about-area .container,
.info-menu-area .container,
.chart-area .container,
.fragen-area .container,
.testimonials-area .container,
.ziele-area .container {
    position: relative;
    z-index: 10;
}

.footer-right a:not(:last-child) {
    margin-right: 10px;
}
/* ================== Sections ============== */
/*.ziele-area,
.info-menu-area,
.about-area,
.testimonials-area,
.fragen-area,
.chart-area,
.demands-area,
.current-area {
    padding: var(--sectionPadding) 0;
}*/

/*===========================================================
Containers
============================================================*/

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}
@media (min-width: 1400px) {
    .container {
        max-width: 1320px !important;
    }
}
@media (max-width: 1199px) {
    :root {
        --xxl: 42px;
        --xl: 30px;
        --lg2: 26px;
        --lg: 22px;
        --md: 20px;
        --md2: 18px;
        /* padding */
        --sectionPadding: 50px;
    }
    .legend {
        gap: 1rem;
    }
    .video-card {
        min-height: 550px;
    }
    table td,
    table th {
        padding: 9px 20px;
    }
    .notes-area,
    .info-menu-area,
    .about-area,
    .testimonials-area,
    .fragen-area,
    .chart-area,
    .demands-area,
    .current-area {
        padding: 50px 0;
    }
    .current-inner-card {
        padding: 55px 15px;
    }
    .notes-card {
        width: 24.5%;
    }
    .testimonials-card {
        width: 30%;
    }
    .testimonials-card p:before {
        left: -22px;
    }
    .footer-left {
        width: 78%;
    }

    .banner-area .banner-text {
        position: relative !important;
        top: unset !important;
        left: unset !important;
        right: unset !important;
        bottom: unset !important;
        margin: 0 !important;

        background: var(--green-light-transparent);

        max-width: unset !important;
        width: calc(100% + 60px) !important;
        left: -30px !important;
    }

    .banner-text * {
        color: var(--black) !important;
    }

    .wb-child-pages-cards > .article-card {
      width: calc(50% - 20px) !important;
    }
}
@media (max-width: 991px) {
    .article-sin-2-text {
        max-width: 100%;
    }
    .footer-menu ul {
        column-count: 1;
    }
    .home-menu-area {
        display: none;
    }

    .about-left,
    .about-right {
        width: 100%;
    }
    .chart-left {
        width: 100%;
    }
    .chart-right {
        width: 100%;
        padding-top: 60px;
    }
    .video-card {
        min-height: 450px;
    }
    .video-card img {
        width: 200px;
    }
    .demands-inner,
    .fragen-inner {
        flex-direction: column;
    }
    .fragen-text {
        max-width: 100%;
        padding: 50px 0;
        background: var(--hamBg);
    }
    .fragen-img img {
        height: 100%;
        width: 100%;
    }
    .fragen-img {
        max-width: 100%;
    }
    .demands-left,
    .demands-right {
        max-width: 100%;
        width: 100%;
    }
    .demands-left {
        padding-bottom: 40px;
    }
    .demands-right ul li h5:before {
        width: 75px;
        left: -18px;
    }
    .testimonials-card {
        max-width: 490px;
        width: 100%;
        margin: 20px auto;
    }
    .testimonials-card p:before {
        left: -30px;
    }
    .home-footer .footer-menu ul {
        column-count: 2;
        display: block;
        margin: 0;
        gap: 10px;
    }
    .footer-left {
        width: 67%;
    }
    .footer-menu ul li {
        margin: 5px 0 !important;
    }

    .wb-child-pages-cards > .article-card {
      width: 100% !important;
    }

    .demands-list {
      width: calc(100% - 135px);
    }

    .menu ul li a:hover {
      color: #fff;
    }
}

@media (max-width: 767px) {
    :root {
        --xxl: 36px;
    }
    .footer-right {
        margin-top: 10px;
    }
    .testimonials-card p {
        position: relative;
        z-index: 10;
    }
    .testimonials-card p:before {
        left: 0;
        z-index: 1;
        opacity: 0.5;
    }
    .andrew-pierce {
        flex-direction: column-reverse;
    }
    .self-evident {
        gap: 20px;
    }
    .self-evident,
    .footer-inner {
        flex-direction: column;
    }
    .andrew-img,
    .self-evident div,
    .self-evident span,
    .andrew-text {
        max-width: 100%;
    }
    .footer-left {
        width: 100%;
    }
    .footer-right {
        display: flex;
        gap: 10px;
    }

    .footer-menu ul,
    .home-footer .footer-menu ul {
        column-count: 1;
    }

    .article-card {
        padding: 0 5px;
    }
    .ziele-slider {
        margin: 0 -5px;
    }
    .article-slider-text {
        padding: 20px 10px 30px 10px;
    }
    .notes-card {
        width: calc(50% - 7px);
        margin-bottom: 5px;
    }
    .notes-card img {
        width: 100%;
    }
}

@media (max-width: 575px) {
    #pie-chart {
        /* transform: translate(157px, 157px); */
        width: 300px;
        height: 300px;
    }
    .legend-item div {
        width: 16px;
        height: 16px;
    }
    table {
        max-width: 600px;
    }
    .footer-bttm {
        flex-direction: column-reverse;
    }
    .fragen-text {
        padding: 50px 15px;
    }

    .demands-right ul li h5 {
        /* font-size: var(--xl); */
        max-width: 50px;
        margin-top: -23px;
    }
    .demands-right ul li h5:before {
        width: 55px;
        height: 10px;
        left: -2px;
        top: 30px;
    }

    .testimonials-card {
        max-width: 330px;
        width: 100%;
        margin: 20px auto;
    }
    .tags a:last-child {
        margin-right: 0;
    }
    .tags a {
        margin-right: 0.5rem;
    }
}
@media (max-width: 400px) {
    .notes-card {
        width: 100%;
        margin-bottom: 5px;
    }
}