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

/* Stellt sicher, dass der Body immer den gesamten Bildschirm ausfüllt */
html, body {
    height: 100%;  /* Damit der Body den gesamten Bildschirm einnimmt */
    font-family: Arial, sans-serif;
    background-color: #000000; /* Schwarzer Hintergrund */
    color: white; /* Textfarbe weiß für die gesamte Seite */
}

/* Header und Navbar sollen den gleichen Hintergrund haben */
header {
    display: flex; /* Aktiviert Flexbox */
    justify-content: space-between; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Richtet den Inhalt vertikal aus */
    padding: 5px; /* Abstand von oben und unten */
    background-color: #000000; /* Schwarzer Hintergrund */
    position: relative; /* Hintergrundfarbe des Headers */
    color: white; /* Weiße Schrift für Header */
}


/* Der Wrapper für den Inhalt */
.content-wrapper {
    display: flex;
    flex-direction: column;  /* Stellt sicher, dass Header, Section und Footer untereinander sind */
    min-height: 100%;  /* Nimmt die gesamte Bildschirmhöhe ein */
}

/* Stil für den neuen Bereich */
#intro-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Der Bereich nimmt die volle Höhe des Bildschirms ein */
    background: radial-gradient(circle, #67A768 5%, transparent 40%); /* Farbverlauf von grün in der Mitte zu transparent nach außen */
}

.animation-container {
    text-align: center;
}

#animatedWord {
    font-size: 5rem;
    font-weight: bold;
    color: white;
    background-color: transparent;
    padding: 10px 30px;
    border-radius: 5px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid white; /* Simuliert den Cursor */
}

/* Animation für den Text-Typing-Effekt */
@keyframes typingEffect {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blinkingCursor {
    50% { border-color: transparent; }
}

@keyframes deletingEffect {
    from { width: 100%; }
    to { width: 0; }
}

/* Dynamische Anwendung der Animation */
.typing {
    animation: typingEffect 8s steps(10, end) forwards, blinkingCursor 0.7s infinite;
}
.deleting {
    animation: deletingEffect 6s steps(10, end) forwards;
}



.maintext{
    font-size: larger;
    color: #FFFFFF;
}


.centeredcontainer {
    display: flex;          /* Aktiviert Flexbox */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; 
}


.feature-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    max-width: 200px;
    min-height: 350px;
    padding: 20px;
    box-sizing: border-box;
}

.feature-box p {
    margin: 10px 0;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

.feature-title {
    font-weight: bold;
    font-size: 1.2rem;
    color: #67A768;
    margin-bottom: 10px;
}




.tinytext{
    font-size: 1.5rem;
    font-weight: bold;
    color: #67A768;
}

.highlighted-text {
    font-weight: bold;  /* Macht den Text fett */
    color: #67A768; /* Ändert die Farbe des Textes, zum Beispiel grün */
}

#imagebackgroundwhite{
    background-color: #FFFFFF;
}



/* Der Inhalt */
section {
    padding: 20px;
    margin: 20px;
    flex-grow: 1;  /* Dieser Abschnitt nimmt den verfügbaren Raum ein, damit der Footer unten bleibt */
}

/* Der Footer */
footer {
    background-color: transparent;
    color: white;
    padding: 10px;
    text-align: center;
    margin-top: auto;  /* Dadurch wird der Footer immer am unteren Rand des Bildschirms bleiben */
}

footer button {
    background-color: transparent;
    color: #FFFFFF;
    font-weight: bold;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

footer button:hover {
    background-color: #FFFFFF;
    color: #67A768;
}


/* Das Logo soll auf der linken Seite bleiben */
#logo {
    margin-right: 20px; /* Abstand zwischen Logo und Text */
    max-width: 250px; /* Maximalgröße des Logos */
    height: auto; /* Höhe wird automatisch angepasst */
}

.logoimagerounded {
    border-radius: 50%; /* Macht das Bild rund */
    border: 0.1px solid gray; /* Fügt einen dünnen schwarzen Rand hinzu */
    padding: 5px; /* Optional: Fügt etwas Abstand zwischen dem Bild und dem Rand hinzu */
    width: 300px; /* Optional: Setzt eine feste Breite für das Bild */
    height: 300px; /* Optional: Setzt eine feste Höhe für das Bild */
    object-fit: contain;  /* Verhindert, dass das Bild abgeschnitten wird und behält das Seitenverhältnis */
    object-position: center;
}

/* Container für den Slider */
.slider-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    overflow: hidden; /* Verhindert das Überlaufen der Bilder */
    background-color:transparent;
}

/* Der gesamte Slider (alle Slides) */
.slider {
    display: flex; /* Flexbox für die horizontale Anordnung der Slides */
    transition: transform 1s ease; /* Animation für den Übergang */
}

/* Ein einzelnes Slide */
.slide {
    display: flex;
    align-items:center;
    justify-content: flex-start;
    padding: 20px;
    min-width: 100%; /* Jedes Slide nimmt 100% der Breite des Sliders ein */
}

/* Bild im Slider */
.logoimagerounded {
    width: 300px;
    height: 300px;
    object-fit: contain;
    border-radius: 50%;
    margin-right: 20px;
}


.logoimagenotrounded {
    width: 300px;
    height: 300px;
    object-fit: contain;
    margin-right: 20px;
}


/* Text neben dem Bild */
.logo-text {
    max-width: 500px;
    
}

/* Überschrift im Text */
.logo-text h3 {
    font-size: 1.5rem;
    color: #67A768;
    margin-bottom: 10px;
}

/* Textbeschreibung */
.logo-text p {
    font-size: 1rem;
    color: #FFFFFF;
    line-height: 1.6;
}

/* Navigation Pfeile */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 24px;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Hover-Effekt für Navigation */
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


.containerimageright {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei gleich große Spalten */
    gap: 20px; /* Abstand */
    align-items: center; /* Vertikale Ausrichtung */
    max-width: 1000px; /* Begrenzte Breite für ein harmonisches Layout */
    margin: 0 auto; /* Zentrieren */
}

.midsize {
    width: 100%; /* Bild passt sich flexibel an */
    max-width: 400px;
    height: auto;
    border-radius: 10px; /* Leichte Abrundung für weicheres Design */
}


.containerlogostart {
    display: flex;  /* Macht den Container zum Flex-Container */
    justify-content: flex-start;  /* Positioniert den Inhalt ganz nach rechts */
    align-items: center;  /* Vertikale Ausrichtung in der Mitte (optional) */
    width: 100%;
    margin: 20px;
}

.containerlogoend{
    display: flex;  /* Macht den Container zum Flex-Container */
    justify-content: flex-end;  /* Positioniert den Inhalt ganz nach rechts */
    align-items: center;  /* Vertikale Ausrichtung in der Mitte (optional) */
    width: 100%;
    margin: 20px;
}



/* Die Navigation sitzt neben dem Logo */
nav {
    flex-grow: 1;  /* Füllt den Platz zwischen Logo und Header-Text */
    text-align: center;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: white; /* Weiße Links in der Navbar */
    font-weight: bold;
    padding: 10px 15px;
    transition: 0.3s;
    font-size: 1.2rem;
}

nav ul li a:hover {
    background-color: white;
    color: #67A768;
    border-radius: 5px;
}

.h2primarycolor {
    color: #67A768; /* Beibehaltung der grünen Farbe */
    font-size: 3rem; /* Sehr große Schriftgröße (kann je nach Bedarf angepasst werden) */
    text-align: center; /* Zentriert den Text */
    margin: 0 auto; /* Sorgt dafür, dass der Text in der Mitte des Containers bleibt */
    display: block; /* Stellt sicher, dass der Text als Block angezeigt wird */
}


.textbelowquestion{
    color: white; /* Weiße Schriftfarbe */
    font-size: 3.5rem; /* Gleiche große Schrift wie .h2primarycolor (kann je nach Bedarf angepasst werden) */
    text-align: center; /* Zentriert den Text */
    max-width: 1000px; /* Maximal 700px Breite */
    margin: 0 auto; /* Zentriert den Text innerhalb des Containers */
    display: block; /* Stellt sicher, dass der Text als Block angezeigt wird */

}

.citation {
    max-width: 600px; /* Begrenze die Breite des Zitats */
    margin: 10px auto; /* Zentriert es */
    font-style: italic;
    font-weight: bold;
    font-size: large;
    padding: 5px;
    color: #67A768;
    background-color: transparent; /* Leichter Hintergrund */
    border-left: 5px solid #67A768; /* Linker Rahmen für Akzent */
}


/* E-Mail Button rechts */
.email-button {
    color: white;
    background-color: #67A768;
    padding: 20px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

/* Hover-Effekt für den E-Mail Button */
.email-button:hover {
    background-color: #4d8e58;
}

/* Flex-Container für Logo und Text nebeneinander */
.partnership-container {
    display: flex;  /* Setzt den Container auf Flexbox */
    justify-content: center;  /* Stellt sicher, dass alles nach links ausgerichtet ist */
    align-items: center;  /* Vertikale Ausrichtung */
    gap: 20px;  /* Abstand zwischen Logo und Text */
    margin-top: 20px;  /* Optional: Oberer Abstand */
}


.textnexttologo{
    font-size: larger;
    max-width: 900px;
}



/* Zentrierter Abschnitt für den Text und Button */
.centered-section {
    text-align: center;
    margin: 10px 0;  /* Kleineren Abstand oben und unten */
    display: flex;  /* Flexbox aktivieren */
    flex-direction: column;  /* Inhalte werden vertikal gestapelt */
    justify-content: center;  /* Vertikale Zentrierung */
    align-items: center;  /* Horizontale Zentrierung */
}

/* Der Button mit grüner Hintergrundfarbe */
.contact-button {
    display: inline-block;
    background-color: #67A768;  /* Die Primary Color */
    color: white;
    font-weight: bold;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    margin-top: 10px;  /* Kleineren Abstand nach dem Text */
}