body, html {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    overflow-x: hidden; /* verhindert horizontales Scrollen */
}

header {
    background-image: url('../images/cd-elemente/CFF_BG_3840x2160.png');
    background-size: cover;
    background-position: center;
    position: relative;
    height: 80vh;
    width: 100%;
}

header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: radial-gradient(ellipse at center, transparent 30%, black 180%);
    pointer-events: none; /* Ermöglicht Klicks durch die Vignette hindurch */
}


/* Standard-Stil für Desktop-Geräte */
header div img {
    max-width: 75%; /* Standardmäßig nimmt das Logo 75% der Breite ein */
    height: auto; /* Erhält das Seitenverhältnis des Bildes */
}

/* Stil für Mobile-Geräte */
@media (max-width: 768px) { /* Gängige Breakpoint für mobile Geräte */
    header div img {
        max-width: 100%; /* Auf mobilen Geräten nimmt das Logo die volle Breite ein */
    }
}



.full-width-gray {
    width: 100%; /* Stellt sicher, dass die Section die volle Breite einnimmt */
    background-color: #ededed; /* Dein gewähltes Grau */
    margin: 0; /* Entfernt mögliche Margin */
    padding: 20px 0; /* Fügt oben und unten Padding hinzu, seitliches Padding nach Bedarf */
}


.ueber-das-festival {
    padding: 20px;
}

.finanzierung {
    padding: 20px;
    text-align: center;
}

.finanzierung .progress {
    margin-top: 50px; /* Abstand oben */
    height: 60px; /* Doppelte Höhe im Vergleich zum Standard */
    border-radius: 30px; /* Vollständige Abrundung */
    background-color: #f0f0f0; /* Hintergrundfarbe des Rahmens */
    overflow: hidden; /* Stellt sicher, dass der innere Balken auch abgerundet wird */
}

.finanzierung .progress-bar {
    width: 10%; /* Fortschrittsstand */
    background-color: #D10D0D; /* Rot */
    border-radius: 30px; /* Vollständige Abrundung */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Textfarbe */
    font-weight: bold; /* Textstärke */
}



.progress-image-container {
    text-align: center; /* Zentriert das Bild, falls es nicht Bildschirmbreit ist */
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.img-fluid {
    max-width: 100%; /* Macht das Bild responsiv */
    height: auto; /* Behält das Seitenverhältnis bei */
}







section h2 {
    text-align: center;
    margin-top: 20px;
}

.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%);
    text-align: center;
    cursor: pointer;
}

.scroll-arrow {
    display: block;
    width: 24px;
    height: 24px;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: 0 auto;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) rotate(45deg);
    }
    40% {
        transform: translateY(-20px) rotate(45deg);
    }
    60% {
        transform: translateY(-10px) rotate(45deg);
    }
}


h1, .h1, h2, .h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600; /* SemiBold für Haupttitel */
    text-transform: uppercase;
    font-size: 3rem;
}

h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: 'Oswald', sans-serif;
    font-weight: 400; /* Regular für Untertitel */
}

p.text {
    font-family: 'Oswald', sans-serif;
    font-weight: 300; /* Light für den Textkörper */
    font-size: 1.25rem;
    line-height: 160%;
    margin-bottom: 1.5rem;
    text-align: center;
}

p.lead {
    font-family: 'Oswald', sans-serif;
    font-weight: 400; /* Light für den Textkörper */
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

p.center {
    text-align: center;
}

ul {
  list-style-position: outside;
    list-style-type: square;
}

.buttons-container {
    display: flex;
    justify-content: center; /* Zentriert die Buttons horizontal */
    gap: 20px; /* Abstand zwischen den Buttons */
    margin-top: 50px; /* 50px Abstand oben */
    margin-bottom: 50px; /* 50px Abstand unten */
}


.custom-button {
    border: 2px solid #D10D0D; /* Roter Rand */
    color: #D10D0D; /* Rote Schrift */
    background-color: transparent; /* Transparenter Inhalt */
    padding: 10px 20px; /* Innenabstand */
    font-size: 16px; /* Schriftgröße */
    cursor: pointer; /* Cursor-Stil */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schlagschatten */
    border-radius: 5px; /* Leicht abgerundete Ecken */
    transition: all 0.3s ease; /* Animation für Hover-Effekte */
}

.custom-button:hover {
    background-color: #D10D0D; /* Rote Hintergrundfarbe beim Hover */
    color: white; /* Weiße Schrift beim Hover */
}

#subscribeButton, #subscriptionForm button {
    border: 2px solid #D10D0D; /* Roter Rand */
    color: #D10D0D; /* Rote Schrift */
    background-color: transparent; /* Transparenter Inhalt */
    padding: 10px 20px; /* Innenabstand */
    font-size: 16px; /* Schriftgröße */
    cursor: pointer; /* Cursor-Stil */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schlagschatten */
    border-radius: 5px; /* Leicht abgerundete Ecken */
    margin: 5px auto; /* Zentriert den Button horizontal */
    display: block; /* Erlaubt die Anwendung von Margin Auto */
}

.newsletter-container .row, .newsletter-container .col-md-10 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}


.button-container {
    display: flex;
    justify-content: center; /* Zentriert die Buttons horizontal */
    align-items: center; /* Ausrichtung der Buttons auf derselben Linie */
    gap: 10px; /* Definiert einen Abstand zwischen den Buttons */
}


#subscriptionForm input {
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

#closeButton {
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: #D10D0D; /* Rote Schrift */
    font-size: 16px;
}



.anfrage-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 3rem;
}

.anfrage-akkordeon {
    width: 100%; /* Stellt sicher, dass das Akkordeon die volle Breite einnimmt */
    box-sizing: border-box; /* Verhindert Probleme mit der Breitenberechnung */
    padding: 0 15px; /* Fügt ein wenig Platz hinzu, ändern Sie diesen Wert nach Bedarf */
    margin-bottom: 15px; /* Fügt Abstand zwischen den Akkordeon-Elementen hinzu */
}

.anfrage-button, .anfrage-button:focus {
    border: 2px solid #D10D0D; /* Roter Rand */
    background-color: white; /* Weißer Hintergrund */
    color: #D10D0D; /* Rote Schrift */
    outline: none; /* Entfernt den Standard-Browser-Fokus-Rahmen */
    padding: 10px 20px; /* Innenabstand */
    font-size: 16px; /* Schriftgröße */
    cursor: pointer; /* Cursor-Stil */
    border-radius: 5px; /* Leicht abgerundete Ecken */
    width: 200px; /* Gleich Breite für alle Buttons */
    text-align: center; /* Text zentrieren */
    transition: background-color 0.3s, color 0.3s; /* Glatter Übergang für Farbwechsel */
    margin-bottom: 5px; /* Fügt einen kleinen Abstand unter jedem Button hinzu */
}

.anfrage-button:hover {
    background-color: #D10D0D; /* Hintergrundfarbe beim Hover */
    color: white; /* Textfarbe beim Hover */
}

.anfrage-form {
    display: none; /* Standardmäßig nicht angezeigt */
    width: 100%; /* Stellt sicher, dass das Formular die volle Breite einnimmt */
    max-width: 500px; /* Maximale Breite des Formulars */
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 5px;
    margin-top: 10px;
    box-sizing: border-box;
    transition: max-height 0.5s ease; /* Glattes Ein- und Ausblenden */
}

.anfrage-form form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.anfrage-form input, .anfrage-form textarea, .anfrage-form button {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.closeForm {
    background-color: transparent;
    border: none;
    cursor: pointer;
    align-self: flex-end;
    color: #D10D0D;
}




.timeline-container {
    display: flex;
    flex-direction: column;
    position: relative;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 25px; /* Zentriert die Linie entsprechend der Position der Kreise */
    top: 0;
    bottom: 0;
    width: 4px; /* Breite des Strichs */
    background-color: #D10D0D; /* Rote Farbe der Linie */
    z-index: 0; /* Stellt sicher, dass die Linie hinter den Kreisen liegt */
}

.milestone {
    display: flex;
    align-items: center;
    margin: 50px 0; /* Passt den Abstand zwischen den Meilensteinen an */
    position: relative;
}

.timeline-point {
    width: 50px;
    height: 50px;
    border: 4px solid #D10D0D; /* Roter Rand */
    border-radius: 50%;
    background-color: #FFFFFF; /* Hintergrundfarbe des Kreises */
    margin-right: 20px; /* Abstand zwischen Punkt und Inhalt */
    z-index: 1; /* Stellt sicher, dass die Kreise über der Linie liegen */
}

.milestone-content {
    flex: 1;
}


.date, h3, p {
    margin: 0; /* Entfernt Standard-Margins */
}

h3 {
    margin-top: 5px; /* Fügt oben Abstand zum Titel hinzu */
    font-size: 1.2em; /* Größere Schrift für den Titel */
}

p {
    margin-top: 15px;
}

.site-footer {
    background-color: #333; /* Dunkler Hintergrund für den Footer, anpassbar */
    color: #fff; /* Weißer Text */
    padding: 40px 0;
    text-align: center;
}

.site-footer h2, .site-footer p {
    margin-bottom: 20px; /* Fügt Abstand unter Überschriften und Absätzen hinzu */
}

.contact-buttons a, .footer-links a, .social-media a {
    color: #fff; /* Weißer Text für Links */
    margin: 5px 10px; /* Abstand zwischen den Links */
    display: inline-block; /* Links nebeneinander */
    text-decoration: none; /* Entfernt die Unterstreichung von Links */
    border: 2px solid #fff; /* Weißer Rand für die Buttons */
    padding: 5px 15px; /* Innenabstand für die Buttons */
    border-radius: 5px; /* Abgerundete Ecken für die Buttons */
    transition: background-color 0.3s, color 0.3s; /* Übergangseffekt für Hover-Zustand */
}

.contact-buttons a:hover, .footer-links a:hover, .social-media a:hover {
    background-color: #fff; /* Weißer Hintergrund beim Hover */
    color: #333; /* Dunkler Text beim Hover */
}

.email-button .icon {
    margin-left: 5px; /* Fügt Abstand zwischen Text und Icon hinzu */
}

.footer-links, .social-media {
    margin-top: 20px; /* Fügt Abstand über den Link-Gruppen hinzu */
}

    #supporterCarousel .carousel-item {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #supporterCarousel img {
        max-height: 100px;
        max-width: 100%;
        object-fit: contain;
    }


.container {
  overflow: hidden;
  .slider {
    animation: slidein 30s linear infinite;
    white-space: nowrap;
    .logos {
      width: 100%;
      display: inline-block;
      margin: 0px 0;
      .fab {
        width: calc(100% / 5);
        animation: fade-in 0.5s 
          cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
      }
    }
  }
}

@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



.inf-form {
        background-color: #f9f9f9;
        padding: 20px;
        border-radius: 8px;
        max-width: 400px;
        margin: 0 auto;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .inf-main_25397b4aa0a8d579b7f41bb0a4d5e1e3 h4 {
        font-weight: 700;
        margin-bottom: 10px;
        color: #333;
    }

    .inf-main_25397b4aa0a8d579b7f41bb0a4d5e1e3 p {
        margin-bottom: 20px;
        color: #666;
    }

    .inf-input-text input {
        width: 100%;
        padding: 10px 15px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
        color: #333;
        transition: border-color 0.3s ease;
    }

    .inf-input-text input:focus {
        border-color: #D10D0D;
        outline: none;
    }

    .inf-submit input {
        width: 100%;
        padding: 10px 15px;
        background-color: #D10D0D;
        border: none;
        border-radius: 4px;
        color: white;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .inf-submit input:hover {
        background-color: #D10D0D;
    }