:root {
    /* Abstände, Höhen und Weiten */
    --spacing-home: 40px;
    --spacing-responsive: 30px;

    --width-desktop: 1170px;

    /* Farben */
    --white: #FFFFFF;
    --black: #353833;
    --grey: #F2F4F8;
    --green: #4F8155;
    --darkgreen: #406A45;
    --bggrey: #f7f2ed;
    --brown1: #efe7de;
    --brown2: #3c2818;
}

@font-face {font-family: 'regular'; src: url('../Fonts/IBMPlexSans-Regular.ttf') format('truetype');}
@font-face {font-family: 'semibold'; font-style: normal; src: url('../Fonts/IBMPlexSans-SemiBold.ttf') format('truetype');}
@font-face {font-family: 'semibold'; font-style: italic; src: url('../Fonts/IBMPlexSans-SemiBoldItalic.ttf') format('truetype');}
@font-face {font-family: 'bold'; font-style: normal; src: url('../Fonts/IBMPlexSans-Bold.ttf') format('truetype');}
@font-face {font-family: 'bold'; font-style: italic; src: url('../Fonts/IBMPlexSans-BoldItalic.ttf') format('truetype');}

h1 {font-size: 64px; line-height: 62px; font-family: "bold", sans-serif; margin: 0; margin-bottom: 24px;}
h2 {font-size: 40px; line-height: 52px; font-family: "semibold", sans-serif; margin: 0; margin-bottom: 19px; font-style:italic;}
h3 {font-size: 28px; line-height: 37px; font-family: "bold", sans-serif; margin: 0; margin-bottom: 15px;}
h4 {font-size: 24px; line-height: 34px; font-family: "regular", sans-serif; margin: 0; margin-bottom: 12px;}
h5 {font-size: 19px; line-height: 27px; font-family: "regular", sans-serif; margin: 0; margin-bottom: 8px;}

body {background: var(--bggrey); margin: 0; width: 100%; font-size: 16px; line-height: 20px; font-family: 'regular', sans-serif; color: var(--black); -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-x: hidden; padding-top: 52px;}
a {
	color: var(--darkgreen);
	font-weight: bold;
	text-decoration: underline;
}
p {font-size: 20px; padding: 0 0 20px 0 ; margin: 0; line-height: 28px; letter-spacing: normal;}	
/* input:focus, select:focus, textarea:focus, button:focus {outline: none;} */
img {max-width: 100%; height: auto;}

a.trashcan {color: var(--white); font-family: 'semibold', sans-serif; background-color: var(--green); padding: 18px 50px 18px 18px; position: relative; border-radius: 10px; display: inline-block; font-weight: normal; text-decoration: none;}
a.trashcan:after {content: url('../Icons/trashcan.svg'); height: 36px; display: inline-block;position: absolute; right: 19px; top: 10px;transition: 0.4s;}
a.trashcan:hover {background-color: var(--darkgreen);}
a.trashcan:hover:after {transform: rotate(10deg);transform-origin: bottom right;}

a.button {color: var(--white); font-family: 'semibold', sans-serif; background-color: var(--green); padding: 18px; border-radius: 10px; display: inline-block; font-weight: normal;
	text-decoration: none;}
a.button:hover {background-color: var(--darkgreen);}

a.arrow {position: relative; display: inline-block; padding-right: 70px;font-family: 'semibold', sans-serif; font-weight: normal; text-decoration: none;}
a.arrow:after {content: url('../Icons/right-arrow.svg'); height: 18px; width: 18px; display: inline-block;position: absolute; right: 29px; top: 2px; opacity: 1;transition: 0.4s;}
a.arrow:hover:after {opacity: 0;}
a.arrow:hover {text-decoration: underline;}
a.arrow:before {content: url('../Icons/right-long-arrow.svg'); height: 18px; width: 18px; display: inline-block;position: absolute; right: 29px; top: 2px; opacity: 0;transition: 0.4s;}
a.arrow:hover:before {opacity: 1;}
a.arrow.white:after {content: url('../Icons/right-arrow-white.svg');}
a.arrow.white:before {content: url('../Icons/right-arrow-long-white.svg');}

a.arrowtop {position: relative; font-family: 'semibold', sans-serif;}
a.arrowtop:after {content: url('../Icons/Icon_Pfeilhoch_default.svg'); height: 18px; width: 18px; display: inline-block;position: absolute; right: 27px; top: -40px; opacity: 1;transition: 0.4s;}
a.arrowtop:hover:after {opacity: 0;}
a.arrowtop:before {content: url('../Icons/Icon_Pfeilhoch_hover.svg'); height: 18px; width: 18px; display: inline-block;position: absolute; right: 27px; top: -40px; opacity: 0;transition: 0.4s;}
a.arrowtop:hover:before {opacity: 1;}
a.button.arrow:hover {text-decoration: none;}
a.button.arrow:after,
a.button.arrow:before {top: 20px; right: 35px;}

.header {width: 100%; height: 52px; position: fixed; box-shadow: 0px 3px 6px #00000029; display: block; top: 0; background-color: var(--white); z-index: 2;}
.header .content {margin-right: calc(calc(100vw - var(--width-desktop)) / 2); height: 100%; display: flex; justify-content: end;}
.header .content a {font-family: 'semibold', sans-serif; margin-right: 40px; color: var(--green); position: relative; display: flex; align-items: center; font-weight: normal;
	text-decoration: none;}
.header .content a:last-child {margin-right: 0;}
.header .content a:hover:after {content: ""; width: 100%; height: 4px; background-color: var(--green); position: absolute; bottom: 0; left: 0;}

.keyvisual .bgcontainer {background-image: url("../Icons/Kevisual.jpg"); padding: 50px 0px; background-size: cover;}
.keyvisual .bgcontainer .content {margin-left: calc(calc(100vw - var(--width-desktop)) / 2); height: 100%; display: flex; justify-content: center; flex-direction: column; gap: 25px;}
.keyvisual .bgcontainer .content .upper h1 {color: var(--white); margin: 0; margin-bottom: 37px;}
.keyvisual .bgcontainer .content .upper h2 {font-size: 48px; font-family: 'bold', sans-serif; line-height: 62px; color: var(--white); margin: 0; margin-bottom: 20px;}
.keyvisual .bgcontainer .content a {margin-right: 20px;}

.subheadline {font-size: 20px; line-height: 25px; margin-bottom: 15px;text-transform: uppercase;}

.section {padding: 0 0 40px 0;}
.frame {padding-top: 20px;}
.frame:first-child {padding-top: 0px;}
.frame-space-before-extra-small {padding-top: 10px;}
.frame-space-before-small {padding-top: 20px;}
.frame-space-before-medium {padding-top: 40px;}
.frame-space-before-large {padding-top: 60px;}
.frame-space-before-extra-large {padding-top: 80px;}
.frame-space-after-extra-small {padding-bottom: 10px;}
.frame-space-after-small {padding-bottom: 20px;}
.frame-space-after-medium {padding-bottom: 40px;}
.frame-space-after-large {padding-bottom: 60px;}
.frame-space-after-extra-large {padding-bottom: 80px;}
.section .container {width: var(--width-desktop); margin: 0 auto; display: flex; align-items: center; gap: 80px;}
.section .container img {object-fit: cover;}
.captcha img {
    height: 60px;
}
#upload-error{
    color:red;
}

@media (max-width: 970px) {
  .section .container {
    flex-direction: column;
  }
}
.col-3 {flex: calc(25% - 40px);}
.col-4 {flex: calc(33% - 40px);}
.col-6 {flex: calc(50% - 40px);}
.col-8 {flex: calc(66% - 40px);}
.col-9 {flex: calc(75% - 40px);}
.col,
.col-12 {width: 100%;}

@media (min-width: 576px) {
    .col-sm-3 {flex: calc(25% - 40px);}
    .col-sm-4 {flex: calc(33% - 40px);}
    .col-sm-6 {flex: calc(50% - 40px);}
    .col-sm-8 {flex: calc(66% - 40px);}
    .col-sm-9 {flex: calc(75% - 40px);}
}
@media (min-width: 768px) {
    .col-md-3 {flex: calc(25% - 40px);}
    .col-md-4 {flex: calc(33% - 40px);}
    .col-md-6 {flex: calc(50% - 40px);}
    .col-md-8 {flex: calc(66% - 40px);}
    .col-md-9 {flex: calc(75% - 40px);}
}
@media (min-width: 992px) {
    .col-lg-3 {flex: calc(25% - 40px);}
    .col-lg-4 {flex: calc(33% - 40px);}
    .col-lg-6 {flex: calc(50% - 40px);}
    .col-lg-8 {flex: calc(66% - 40px);}
    .col-lg-9 {flex: calc(75% - 40px);}
}

.background-02 {background-color: var(--green);}

#aktionen p {font-size: 16px; line-height: 23px;}
#aktionen .content .subheadline {color: var(--white); }
#aktionen .content h2 {color: var(--white); margin-bottom: 40px; margin-top: 0;}
#aktionen .content .box {display: flex; border-radius: 10px;overflow: hidden; margin-bottom: 50px;}
#aktionen .content .box .left {width: 312px;height: 280px;background-color:#fff;display: flex;justify-content: center;flex-wrap: wrap;flex-direction: column;}
#aktionen .content .box .right {background-color: var(--white); display: flex; flex-direction: column; justify-content: center; padding: 0 60px; width: calc(100% - 312px);max-height: 280px;}
#aktionen .content .box .right a {color: var(--green);}

#ratgeber .content {width: var(--width-desktop); margin: 0 auto; display: flex; gap: 80px;}

.totop {background-color: var(--brown1); padding: 80px 0 40px 0;display: flex; justify-content: center;}
.totop a {color: var(--brown2);}

footer {background-color: var(--brown2); padding: 24px 0;}
footer .content {width: var(--width-desktop); margin: 0 auto; display: flex; justify-content: space-between;}
footer .content div {color: var(--white); font-family: 'bold', sans-serif; font-size: 14px; line-height: 18px;}
footer .content div a {color: var(--white);font-family: 'semibold', sans-serif; font-weight: normal; text-decoration: none;}
footer .content div a:hover {text-decoration: underline;}
footer .content div a:after {content: "|"; margin: 0 5px;}
footer .content div a:last-child:after {display: none;}

.anchorjumplink {
	padding: 0 !important;
	margin: 0 !important;
	height: 0 !important;
	display: block !important;
}

a.anchorjumplink,
span.anchorjumplink {
	display: block !important;
	position: relative;
	scroll-padding-top: 80px;
	top: -80px;
}

@media (max-width: 1200px) {
    :root {
        --width-desktop: 970px;
    }
    .keyvisual .bgcontainer {background-position: center;}
    .keyvisual .bgcontainer .content {margin-left: 15px;}
	
	#aktionen .content .box .left, 
	#aktionen .content .box .right {max-height: 410px;}
}

@media (max-width: 970px) {
    :root {
        --width-desktop: calc(100% - 30px);
    }
    #aktionen .content,
    #informationen .content,
    #aktionen .content,
    footer .content {margin: 0 15px;}
    #aktionen .content .box {flex-direction: column; background-color: white;}
    #aktionen .content .box .right {width: calc(100% - 120px); padding-top: 20px; padding-bottom: 20px;}

    .container .content {flex-direction: column;}
    footer .content {flex-direction: column; gap: 10px;}
}

@media (max-width: 400px) {
    .keyvisual .bgcontainer .content .upper h1 {margin-bottom: 27px; font-size: 48px;}
    .keyvisual .bgcontainer .content .upper h2 {font-size: 40px;}
    .keyvisual .bgcontainer .buttons a:first-child {margin-bottom: 10px;}
    #aktionen .content .box .right {width: calc(100% - 125px);}
}


.pagination {
    padding-left: 0;
}
.pagination .page-item {
  display: inline-block;
  padding: 3px;
  margin-right: 5px;
  color: #fff;
  font-size: 20px;
  line-height: 26px;
}
.pagination .page-item a{
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  font-weight: bold;
  text-decoration: underline;
}
.pagination .page-item a.active{
  color: var(--brown2);
}
.ce-uploads ul {position:absolute;}
.ce-uploads li a:before {
	content: url('../Icons/download.svg');
	display: inline-flex;
	height: 32px;
	padding-right: 5px;
}
.ce-uploads li a span {
	display: inline;
	position:relative;
	top:-10px;
}

form label{
    display: inline-block;
    width: 220px;
    margin-right: 10px;
    vertical-align: top;
    margin-top: 10px;
	font-size: 20px;
	margin-bottom: 10px;
}
form input[type="submit"]{
    cursor: pointer;
	color: var(--white); font-family: 'semibold', sans-serif; background-color: var(--green); padding: 18px; border-radius: 10px; display: inline-block; font-size: 20px; width: auto; height: auto;
}
form input[type="submit"]:hover {
	background-color: var(--darkgreen);
}
input {
  height: 40px;
}
input, textarea {
  background-color: #fafafa;
  border: 2px solid #eaeaea;
  border-radius: 5px;
  padding-left: 10px;
  display: inline-block;
  vertical-align: top;
  max-width: 95%;
  width: 500px;
  font-size: 20px;
  margin-bottom: 10px;
}
textarea {
  overflow: auto;
  resize: vertical;
}
form input[type="file"]{
    background-color: unset;
    border: unset;
    margin-top: 7px;
    margin-bottom: 5px;
    height: auto;
    width: auto;
}
form input[type="checkbox"]{
    height: 16px;
    width: 16px;
}
form .row .item {
	margin-bottom: 20px;
}
form .checkbox-datenschutz{
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  width: 500px;
  margin-top: 10px;
  font-size: 20px;
}
form .datenschutz-text{
  max-width: 100%;
  width: 500px;
}
form .form_addition-txt {
	padding-left: 240px;
}
.form-respond {
  padding-top: 20px;
  font-size: 20px;
  color:var(--green);
}

@media (max-width: 658px) {
	form .form_addition-txt {
		padding-left: 0px;
	}
}