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

body{
    background: #fff;
}

.links li{
    list-style: none;
    display: inline-block;
    position: relative;
    color: #0f7034;
}

.links li::after{
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0f7034;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.links li:hover::after{
    transform: scaleX(1);
    transform-origin: bottom left;
}

a{
    text-decoration: none;
    color: #3d3d39;
    font-size: 16px;
}

a:hover{
    color: #0f7034;
}

/* HEADER */

header{
    position: relative;
    padding: 0 32px;    
}

.navbar {
    width: 100%;
    height: 60px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center; /* Zentriert die Inhalte in der Navbar */
    background-color: #fff;
}


.navbar .logo {
    position: absolute;
    left: 5%; /* Positioniert das Logo 5% vom linken Rand entfernt */
    font-size: 24px;
    font-weight: bold;
    /* Wenn Sie 'position: absolute;' verwenden, stellen Sie sicher, dass die Navbar eine relative Positionierung hat */
}

.navbar .links{
    display: flex;
    gap: 32px;
}

.navbar .toggle_btn{
    size: 24px;
    color: #0f7034;
    cursor: pointer;
    display: none;
}


.action_btn{
    margin-top: 15px;
    background-color: #0f7034;
    color: #fff;
    padding: 8px 16px;
    margin: 15px;
    border: none;
    outline: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: scale 0.2 ease;
}

.action_btn:hover{
    scale: 1.05;
    color: #fff;
}

.action_btn:active {
    scale: 0.95;
}

/* DROPDOWN MENU */

.dropdown_menu{
    display: none;
    position: absolute;
    right: 32px;
    top: 60px;
    height: 0;
    width: 300px;
    background: rgba(61, 61, 57, 0.1);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    overflow: hidden;
    transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dropdown_menu.open{
    height: 260px;
}

.dropdown_menu li{
    padding: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown_menu .action_btn{
    width: 100%;
    display: flex;
    justify-content: center;
}

@keyframes cursor {
    to{
        border-left: 2px solid #3d3d3900;
    }
}

@keyframes words {
    0%,20%{
        content: "bessere";
    }
    81%,100%{
        content: "faire";
    }
}

@keyframes typing {
    10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
        width: 0;
    }
    5%,20%,25%,40%,45%,60%,65%,80%,85%{
        width: calc(100% + 8px);
    }
}

/* SPENDEN */

.section-titel {
    text-align: center; /* Zentriert den Text */
    color: #3d3d39; /* Standard Textfarbe */
    margin-top: 40px; /* Platz nach oben */
    margin-bottom: 40px; /* Platz nach unten */
    font-size: 32px; /* Angepasste Schriftgröße */
    /* Weitere Stilisierungen können hier hinzugefügt werden */
}

.spenden-container{
    width: 90%;
    margin: 0 auto;
    padding: 10px 20px;
    border: 2px solid #0f7034;
    margin-bottom: 100px;
}

.spenden-form .inputbox-intervall,
.spenden-form .inputbox-intervall select{
    width: 100%;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    padding: 5px 0;
    outline: none;
    resize: none;
    font-size: 18px;
    color: #3d3d39;
}

.spenden-form .inputbox-intervall span{
    font-size: 18px;
}

.spenden-form .inputbox-radio{
    width: 100%;
    margin-bottom: 10px;
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    font-size: 18px;
    padding: 5px 0;
    outline: none;
    resize: none;
    color: #3d3d39;
}

.spenden-form .inputbox-radio .span-titel{
    font-size: 18px;
}

.spenden-form .inputbox-anrede,
.spenden-form .inputbox-anrede select{
    width: 100%;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    padding: 5px 0;
    outline: none;
    resize: none;
    font-size: 18px;
    color: #3d3d39;
}

.inputbox-anrede span{
    font-size: 18px;
}

.spenden-inputbox,
.spenden-inputbox input{
    width: 100%;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    padding: 5px 0;
    outline: none;
    resize: none;
    font-size: 18px;
    color: #3d3d39;
}

.spenden-inputbox span{
    font-size: 18px;
}

.spenden-button a{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    background-color: #0f7034;
    color: #fff;
    padding: 8px 16px;
    margin: auto;
    border: none;
    outline: none;
    border-radius: 20px;
    cursor: pointer;
    transition: scale 0.2 ease;
}

.action_btn2{
    width: 100%;
    background-color: #0f7034;
    color: #fff;
    padding: 8px 16px;
    margin-top: 15px;
    border: none;
    outline: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: scale 0.2 ease;
}

.action_btn2:hover{
    scale: 1.05;
    color: #fff;
}

.action_btn2:active {
    scale: 0.95;
}

.download-buttons .action_btn3 {
    font-size: 22px; /* Größere Schrift */
    padding: 15px 30px; /* Größerer Button */
    margin-top: 0; /* Entfernt zusätzlichen Abstand, falls vorhanden */
    width: 100%;
    background-color: #0f7034;
    color: #fff;
    border: none;
    outline: none;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: scale 0.2 ease;
}

.download-buttons {
    margin-bottom: 25px;
}

.spenden-popup {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.spenden-popup-content {
    font-size: 25px;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    height: auto; /* Anstelle von 15% */
    max-height: 200px;
    width: 60%;
    max-width: 800px;
    text-align: center;
}

.popup-link {
    font-size: 25px;
    color: #3d3d39;
    text-decoration: underline; /* Beibehalten der Unterstreichung */
    display: inline; /* Stellen Sie sicher, dass es auf inline gesetzt ist */
}

.spenden-popup-content p {
    font-size: 25px; /* Anpassung der Schriftgröße */
    margin: 0; /* Entfernen jeglicher Margins, die den Fluss beeinflussen könnten */
    padding: 0; /* Entfernen jeglicher Padding */
    white-space: nowrap; /* Verhindern des Umbruchs */
    overflow: hidden; /* Versteckt Überlaufenden Text */
    text-overflow: ellipsis; /* Fügt Auslassungspunkte hinzu, falls der Text zu lang ist */
}

.spenden-popup-content a {
    text-decoration: underline;
    display: inline; /* Stellt sicher, dass der Link inline bleibt */
    margin: 0; /* Entfernt Abstände um den Link */
    padding: 0; /* Entfernt das innere Padding */
}





.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

body, html {
    height: 100%;
    margin: 0;
}

.downloadcontainer {
    width: 90%;
    margin: 50px auto;
    display: flex; /* Ändern Sie dies von Grid zu Flex */
    flex-direction: column; /* Stellen Sie die Flex-Richtung auf Spalte (vertikal) */
    align-items: center; /* Zentriert die Inhalte horizontal */
    justify-content: center; /* Zentriert die Inhalte vertikal */
    margin-top: 130px;
    min-height: 48%;
    padding-bottom: 50px;
    box-sizing: border-box;
}

.downloadcontainer h1 {
    font-size: 32px; /* oder eine andere Größe, die Ihnen gefällt */
    margin-bottom: 50px; /* Abstand zum nächsten Element */
    color: #3d3d39;
}

.downloadcontainer p {
    font-size: 24px; /* oder eine andere Größe, die etwas kleiner als die Überschrift ist */
    margin-bottom: 40px; /* Abstand zu den Buttons */
    color: #3d3d39;
}



footer {
    height: 50px; /* Beispielwert, an Ihren Footer anpassen */
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Weitere Styling-Optionen für Ihren Footer */
}

/* RESPONSIVE */

/* RESPONSIVE TOP-MENU*/
@media(max-width: 992px){
    .navbar .links,
    .navbar .action_btn{
        display: none;
    }

    .navbar .toggle_btn{
        display: block;
    }
}

.dropdown_menu{
    display: block;
}

@media(max-width: 576px){
    .dropdown_menu{
        left: 32px;
        width: unset;
    }
}

/* RESPONSIVE FOOTER */

@media (max-width:768px){
    .footerNav ul{
        flex-direction: column;
    }
    .footerNav ul li{
        width: 100%;
        text-align: center;
        margin: 10px;
    }
}

/* FOOTER */

footer{
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    background: #3d3d39;
    height: auto;
    width: 100vw;
    font-family: "Open Sans";
    padding-top: 40px;
    color: #fff;
}

.footer-content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.footer-content h3{
    color: #fff;
    font-size: 29px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 48px;
}

.footer-content p{
    color: #fff;
    letter-spacing: 2px;
    max-width: 500px;
    margin: 10px auto;
    line-height: 28px;
    font-size: 14px;
}

.socials{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0 48px 0;
}

.socials li{
    margin: 0 10px;
}

.grow {
    transition: 1s ease;
}

.grow img:hover{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    transition: 1s ease;
}

.footerNav{
    margin: 30px 0;
}

.footerNav ul{
    display: flex;
    justify-content: center;
    list-style: none;
}

.footerNav ul li a{
    color: #fff;
    margin: 20px;
    text-decoration: none;
    font-size: 20px;
    opacity: 0.7;
    transition: 0.5s;
}

.footerNav ul li a:hover{
    opacity: 1;
}

.footer-bottom{
    background: #0f7034;
    width: 100vw;
    padding: 20px 0;
    text-align: center;
}

.footer-bottom p{
    color:#fff;
    font-size: 14px;
    word-spacing: 2px;
    text-transform: capitalize;
}

.footer-bottom span{
    text-transform: uppercase;
    opacity: .5;
    font-weight: 200;
}

.rechtliches{
    width: 90%;
    margin: 0 auto;
    padding: 10px 20px;
    color: #3d3d39;
    letter-spacing: 0.5px;
    border: 2px solid #0f7034;
    margin-top: 50px;
    margin-bottom: 50px;
}

.rechtliches h1{
    font-size: 24px;
    color: #0f7034;
}

.rechtliches h2{
    font-size: 20;
    color: #0f7034;
}

.rechtliches h3{
    font-size: 18px;
    font-weight: bold;
}

.rechtliches p{
    font-size: 16px;
}

.rechtliches a{
    font-size: 16px;
    color: #0f7034;
}



/*---------- Testemonials ----------*/
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);

.information .stars i {color:#ffd832}

figure.snip1157 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  margin-bottom: 50px;
  min-width: 220px;
  max-width: 310px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  box-shadow: none !important;
  flex: 0 0 auto; /* Fügt keine Flex-Grow oder Flex-Shrink hinzu */
}
figure.snip1157 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
figure.snip1157 img {
  max-width: 100%;
  vertical-align: middle;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  margin: 40px 0 0 10px;
}
figure.snip1157 blockquote {
  display: block;
  height: 200px;
  border-radius: 8px;
  position: relative;
  background-color: #3d3d39;
  padding: 25px 50px 30px 50px;
  font-size: 0.8em;
  font-weight: 500;
  margin: 0;
  line-height: 1.6em;
  font-style: italic;
}
figure.snip1157 blockquote:before,
figure.snip1157 blockquote:after {
  font-family: 'FontAwesome';
  content: "\201C";
  position: absolute;
  font-size: 50px;
  opacity: 0.3;
  font-style: normal;
}
figure.snip1157 blockquote:before {
  top: 25px;
  left: 20px;
}
figure.snip1157 blockquote:after {
  content: "\201D";
  right: 20px;
  bottom: 0;
}
figure.snip1157 .arrow {
  top: 100%;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 25px solid transparent;
  border-top: 25px solid #3d3d39;
  margin: 0;
  position: absolute;
}
figure.snip1157 .author {
  position: absolute;
  bottom: 45px;
  padding: 0 10px 0 120px;
  margin: 0;
  text-transform: uppercase;
  color: #3d3d39;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
}
figure.snip1157 .author h5 {
  opacity: 0.8;
  margin: 0;
  font-weight: 800;
}
figure.snip1157 .author h5 span {
  font-weight: 400;
  text-transform: none;
  padding-left: 5px;
}

.testcontainer {
    position: relative;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 45px;
}

.carousel-titel {
    margin-top: 50px;
}

/* Gesamten Scrollbar */
.testimonial-carousel::-webkit-scrollbar {
    height: 12px; /* Höhe des Scrollbars */
    background: #3d3d39; /* Hintergrundfarbe des Scrollbars */
    border-radius: 10px; /* Abrunden der Ecken */
  }
  
  /* Scroll-Element (Thumb) */
  .testimonial-carousel::-webkit-scrollbar-thumb {
    background-color: #fff; /* Farbe des Scroll-Elements */
    border-radius: 10px; /* Abrunden der Ecken des Scroll-Elements */
    border: 3px solid #3d3d39; /* Rand des Scroll-Elements, passend zum Scrollbar-Hintergrund */
  }
  
  /* Für Firefox */
  .testimonial-carousel {
    scrollbar-width: thin;
    scrollbar-color: #fff #3d3d39;
  }
  

.testimonial-carousel {
    display: flex;
    width: 100%; /* Stellen Sie sicher, dass dies genug Platz für alle Ihre Testimonials bietet */
    overflow-x: auto; /* Ermöglicht das Scrollen */
    scroll-snap-type: x mandatory;
  }  

  
  .testimonial-carousel figure {
    scroll-snap-align: start; /* Sorgt dafür, dass die Elemente korrekt ausgerichtet werden */
    flex: 0 0 auto; /* Verhindert, dass die Figuren gestaucht oder gestreckt werden */
  }
  
  /* Pfeile */
  .carousel-arrow {
    position: absolute;
    top: 65%;
    transform: translateY(-50%); /* Zentriert vertikal */
    cursor: pointer;
    background-color: #ff141400; /* oder jede andere gewünschte Farbe */
    border: none; /* Entfernt den Standardrahmen von Buttons */
    padding: 10px;
    z-index: 10;
  }
  
  .carousel-arrow.left {
    left: 0px; /* Abstand von der linken Seite */
    z-index: 10; /* Stellen Sie sicher, dass dies höher ist als der z-index anderer Elemente */
  }
  
  .carousel-arrow.right {
    right: 0px; /* Abstand von der rechten Seite */
    z-index: 10; /* Stellen Sie sicher, dass dies höher ist als der z-index anderer Elemente */
  }
  
  /* Sterne */
  .stars {
    color: #ffd700; /* Goldfarbe für Sterne */
    font-size: 1em; /* Anpassbare Größe für Sterne */
  }
  
  .stars i {
    margin-right: 5px; /* Kleiner Abstand zwischen den Sternen */
  }