@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-21%); /* Fibonacci: 21 */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes titleGlow1 {
    0% {
        filter: drop-shadow(2px 2px 4px var(--secondary-color)) drop-shadow(-2px -2px 4px var(--tertiary-color));
    }
    100% {
        filter: drop-shadow(0 0 10px var(--secondary-color)) drop-shadow(0 0 20px var(--tertiary-color)) drop-shadow(0 0 30px var(--quaternary-color));
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0.5;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes titleGlow {
    0% {
        text-shadow: 2px 2px 4px var(--secondary-color), -2px -2px 4px var(--tertiary-color);
    }
    100% {
        text-shadow: 0 0 10px var(--secondary-color), 0 0 20px var(--tertiary-color), 0 0 30px var(--quaternary-color);
    }
}
@keyframes popUp {
    0% {
        transform: scale(0.95); /* Startet leicht verkleinert */
        opacity: 0.5; /* Startet halbtransparent */
    }
    100% {
        transform: scale(1.1); /* Geht zur normalen Größe zurück */
        opacity: 1; /* Wird vollständig sichtbar */
    }
}
@keyframes pulsate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Animation für das Modal */
@keyframes slideIn {
    from {
        transform: translateY(-300px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* Modal-Grundstil */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 1000;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}



body, html {
    font-family: 'Poppins', sans-serif;
    
    
    background-color: var(--background-color);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: var(--text-color);
    text-shadow: 2px 2px 4px var(--color-7);
    margin: var(--space-small);
    padding: var(--padding-xxsmall);
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    height: 100vh;
    justify-content: center;
}

main {
    background-color: var(--background-color);
    min-height: 1vh;
    font-family: 'Poppins', sans-serif;
    padding-left: var(--space-xsmall);
    padding-right: var(--space-xsmall);
    justify-content: center;
}

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

header {
    font-family: 'Poppins', sans-serif;
    
    top: 0;
    
    width: 90%;
    
    background-color: var(--background-color);}

nav {
    font-family: 'Poppins', sans-serif;
    max-width: 95%;
    background-color: var(--background-color);
    margin: var(--space-small);
    display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    padding-left: var(--space-xsmall);
    padding-right: var(--space-xsmall);
}
section {
    text-align: center; /* Zentriert den Text und die Inhalte innerhalb der Section */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Fügt einen leichten Schatten hinzu */
    padding: var(--space-xlarge); /* Fügt einen Abstand von 2,618rem an allen Seiten hinzu */
    border-radius: 5px var(--complementary-primary); /* Rundet die Ecken der Schattenbox leicht ab */
    animation: popUp 3.69s forwards; /* Wendet die "popUp"-Animation mit einer Dauer von 0,5 Sekunden an */
    margin: var(--space-xxsmall);
    padding-left: var(--space-xxlarge);
    padding-right: var(--space-xxlarge);
}

nav ul {
    font-family: 'Poppins', sans-serif;
    list-style-type: none;
    display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
    padding: var(--padding-base);
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    
}

nav li {
    
    flex-grow: 1;           /* Erlaubt dem Element zu wachsen */
    flex-shrink: 1;         /* Erlaubt dem Element zu schrumpfen */
    flex-basis: auto;       /* Setzt eine automatische Basisbreite */
}

nav li a {
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    padding: var(--padding-base);
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: block;         /* Damit es die gesamte Fläche des Elternelements ausfüllt */
}

nav li a:hover {
    font-family: 'Poppins', sans-serif;
    background-color: var(--quinary-color);
    border-color: var(--quaternary-color);
}
nav li button {
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    padding: var(--padding-base);
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: block;
    background: transparent; /* Setzen Sie den Button-Hintergrund auf transparent */
            /* Damit es die gesamte Fläche des Elternelements ausfüllt */
    padding-left: var(--space-xsmall);
    padding-right: var(--space-xsmall);

        }
nav li button:hover {
    background-color: var(--quinary-color);
    border-color: var(--quaternary-color);
    padding-left: var(--space-xxsmall);
    padding-right: var(--space-xxsmall);
}
.logo-container {
    margin-top: var(--padding-small);
    margin-left: var(--space-xlarge);
    margin-right: var(--space-xlarge);
    margin-bottom: var(--space-xxlarge);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 77%; /* nimmt die gesamte Breite des Elternelements ein */
    min-width: 369px;
    height: 30vh;
    
    
    z-index: var(--zindex-base);
}

.logo-image, .logo-glow {
    width: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    
    
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: 400px;
}

.logo-image {
    z-index: 2;
    animation: titleGlow1 3.69s infinite alternate, 
               zoomEffect 3s infinite, 
               pulsate 3.69s infinite;
    top: 0;
}

.logo-glow {
    z-index: 1;
    filter: blur(8px);
    opacity: 0.6;
    animation: pulseate 3s infinite;
    top: 0;
}

.hero-container {
    display: flex;
    justify-content: center;  /* Horizontale Zentrierung */
    align-items: center;      /* Vertikale Zentrierung */
    height: 100vh;  /* Nimmt den gesamten Bildschirm in der Höhe ein */
    width: 100%;    /* Nimmt die gesamte Breite ein */
}

#hero {
    
    display: flex;
    justify-content: center;  /* Horizontale Zentrierung */
    align-items: center; 
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
    background-position: center;
    margin-left: var(--space-xlarge);
    margin-right: var(--space-xlarge);
    
}
#hero::before {
    display: flex;
    justify-content: center;  /* Horizontale Zentrierung */
    align-items: center; 
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
    background-position: center;
    margin-left: var(--space-xlarge);
    margin-right: var(--space-xlarge);
    
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    
    background-size: cover;
   
}
.hero-title {
    font-family: 'Poppins', sans-serif;
    position: center;
    z-index: 1;
    font-size: var(--font-size-xlarge);
    color: var(--quinary-color);
    text-shadow: 2px 2px 4px var(--secondary-color), -2px -2px 4px var(--tertiary-color);
    animation: titleGlow 3.69s infinite alternate;
    background-position: center; /* Zentriert den Hintergrund */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Hintergrundbildes */
    background-size: contain; 
    align-items: center;  /* Zentriert den Text vertikal */
   
    padding: var(--space-base);
}
#hero h1 {
    font-family: 'Poppins', sans-serif;
    font-size: var(--font-size-xxlarge);
    margin-bottom: var(--space-xlarge);
}

#hero p {
    font-family: 'Poppins', sans-serif;
    font-size: var(--space-xsmall);
    margin-bottom: var(--space-xlarge);
}
.cta-button {
    font-family: 'Poppins', sans-serif;
    border-radius: 12px;
    padding: var(--padding-xxsmall  );
    font-size: var(--space-small);
    background-color: var(--quinary-color);
    z-index: 1000;
    color: var(--text-color);
    border: none;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    padding-left: var(--space-xsmall);
    padding-right: var(--space-xsmall);
}
.xbutton {
    font-family: 'Poppins', sans-serif;
    border-radius: 12px;
    padding: var(--padding-xxsmall);
    font-size: var(--space-small);
    background-color: var(--quaternary-color); /* Sie können diese Farbvariable anpassen oder durch einen konkreten Wert ersetzen */
    color: var(--text-color);
    border: 2px solid var(--tertiary-color); /* Hinzugefügt: Rand um den Button */
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Erhöhter Schatten für mehr Tiefe */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Hinzugefügt: Übergang für den transform-Effekt */
    padding-left: var(--space-xsmall);
    padding-right: var(--space-xsmall);
    cursor: pointer; /* Zeigt den Zeiger-Cursor an, wenn man über den Button fährt */
    display: inline-block; /* Damit text-decoration und andere Stile korrekt angewendet werden, wenn es sich um einen Link handelt */
}

/* Hover-Stil: Ändert die Hintergrundfarbe und hebt den Button leicht an */
.xbutton:hover {
    background-color: var(--tertiary-color); /* Sie können dies durch eine andere Farbe ersetzen */
    transform: translateY(-3px); /* Hebt den Button leicht an */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); /* Größerer Schatten */
}

/* Aktiver Stil: Verringert die Größe des Buttons leicht und ändert die Hintergrundfarbe */
.xbutton:active {
    background-color: var(--secondary-color); /* Sie können dies durch eine andere Farbe ersetzen */
    transform: translateY(1px); /* Senkt den Button leicht ab */

}
.button-wrapper {
    
    justify-content: center;  /* Zentriert die Kinder horizontal */
    align-items: center;      /* Zentriert die Kinder vertikal */
    height: 13vh;            /* Nimmt die volle Höhe des Viewports ein */
    padding: var(--padding-xxsmall);
    background: var(--primary-color-transparent) ;
    border-radius: 20px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    margin-top:var(--padding-xlarge) ;
    margin-bottom: var(--space-base);
    
}
.cta-button:hover {
    background-color: var(--background-color);
    border-color: var(--secondary-color);
    
    z-index: var(--zindex-large);
    animation: pulsate 3.69 infinite;
    transform: scale(1.0309016994374927);
}
/* Stil für den Button-Container */
.button-container {
    max-width: 777px;
    width: 100%;
    height: 77vh; /*
    /* Hintergrundfarbe mit Transparenz */
    background-color: var(--quinary-color-transparent) 0.2; 
    /* Abstand zwischen dem Rand des Containers und seinem Inhalt */
    padding: var(--space-large); 
    /* Abrundung der Ecken des Containers */
    border-radius: 10px; 
    /* Schatten um den Container herum */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2), -3px -3px 10px rgba(255, 255, 255, 0.5); 
    /* Abstand zwischen dem Button-Container und anderen Elementen */
    margin: var(--space-xxlarge); 
    /* Flexbox verwendet, um Kinder innerhalb zu organisieren */
    display: flex; 
    /* Zentriert die Kinder horizontal */
    justify-content: center; 
    /* Zentriert die Kinder vertikal */
    align-items: center; 
    /* Abstand zwischen Kindern */
    gap: var(--space-xxlarge); 
    /* Animation beim Laden des Containers */
    animation: zoomIn 0.5s ease-out; 
}



/* Features & Tools Seite */
#features-intro {
    font-family: 'Poppins', sans-serif;
    text-align: center;
    margin: var(--space-xlarge) 0;
    font-size: var(--font-size-xlarge);
    padding-right: var(--space-xlarge);
    padding-left: var(--space-xlarge);
}

#features-intro h1 {
    margin-top: var(--space-medium);
    padding-top: var(--space-medium);
    font-family: 'Poppins', sans-serif;
    text-align: center;
    font-size: var(--font-size-small);
}
#features-intro h3 {
    margin-top: var(--space-medium);
    padding-top: var(--space-medium);
    font-family: 'Poppins', sans-serif;
    text-align: center;
    font-size: var(--font-size-);
}
/*tools and features */
#tools-wrapper {
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    text-align: center;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    overflow-x: hidden;      /* Verhindert horizontales Scrollen */
    overflow-y: auto;        /* Erlaubt vertikales Scrollen */
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
    background-color: var(--background-color);
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    padding: var(--padding-small);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: var(--space-xsmall);
    padding-right: var(--space-xsmall);
    
}

#tools-list {
    display: flex;  
    flex-direction: column; 
    align-items: center;
    justify-content: center; /* Zentriert die Tools innerhalb des Wrappers */
    white-space: nowrap;
    padding-left: var(--space-xxlarge);
    padding-right: var(--space-xxlarge);
}

.tools-slider {
    display: flex;  
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    
    width: 100%;
    padding-left: var(--space-xsmall);
    padding-right: var(--space-xsmall);
}

.tools-container {
    color: var(--text-color);
    display: flex;
    flex-direction: column;  /* Setzt die Tools untereinander */
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
}

.tool {
    width: 1024px; /* Für Desktop-Version */
    height: 768px;
    color: var(--text-color);
    background: var(--secondary-color);
    margin: var(--font-size-small);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1), 
                inset 2px 2px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    text-align: center;
    margin: var(--space-small);
    padding: var(--space-small);
    padding-left: var(--space-xsmall);
    padding-right: var(--space-xsmall);
}

.tool:hover {
    transform: scale(1.05);
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2), /* Erhöhter Außenschatten */
                inset 3px 3px 8px rgba(0, 0, 0, 0.2); /* Erhöhter Innenschatten */
}


.tool h2 {
    font-size: var(--font-size-xlarge);
    
}

.tool p {
    font-size: var(--f);
    padding: var(--padding-small);
}

/* Forum Header */
#forum-header {
    margin-top: var(--space-xxlarge);
    text-align: center;
    background-color: var(--background-color);
    color: var(--text-color);
    padding: var(--padding-large);
}

#forum-header h1 {
    font-size: var(--font-size-xlarge);
    margin-bottom: var(--space-xsmall);
}

#forum-header p {
    font-size: 1.4em;
}

/* Forum Categories */
#forum-categories {
    color: var(--text-color);
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr;
    gap: 30px;
    
    margin: var(--space-xxlarge);
    padding: var(--padding-large);
}

.forum-button {
    padding: var(--padding-base);
    border: none;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.7s ease, transform 0.3s ease;
    cursor: pointer;
}

.forum-button.primary {
    background-color: var(--tertiary-color);
    color: var(--text-color);
}

.forum-button.primary:hover {
    background-color: var(--background-color);
    transform: scale(1.0309016994374927);
}

.forum-button.secondary {
    background-color: var(--quaternary-color);
    color: var(--text-color);
}

.forum-button.secondary:hover {
    background-color: var(--tertiary-color);
}


.category {
    background-color: var(--background-color);
    border: 1px solid var(--complementary-primary);
    border-radius: 20px;
    margin-top: var(--space-small);
    padding: var(--padding-large);
    margin: var(--space-xsmall);
    transition: transform 0.3s ease, box-shadow 0.3s ease;  /* Hinzugefügt für einen sanften Schattenübergang */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);  /* Grundschatten */
}

.category:hover {
    margin: var(--space-base);
    padding: var(--space-xsmall);
    transform: scale(1.0309016994374927);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);  /* Hover-Schatten */
}

.category h2 {
    font-size: var(--font-size-large);
    color: var(--text-color);
    text-shadow: 1px 2px 2px var(--complementary-primary);
    margin-bottom: 10rem;
}

.category p {
    font-size: var(--font-size-base);
    color: var(--text-color);
    text-shadow: 1px 1px 1px var(--color-11);
    margin: var(--space-small);
    margin-bottom: var(--font-size-base);
}


#connectWallet {
    background-color: var(--background-color);
    color: var(--text-color);
    padding: var(--padding-xlarge);
    border: none;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.3s ease;
    
}
#connectWallet:hover {
    background-color: var(--secondary-color);
}


form label {
    display: block;
    font-weight: bold;
    margin-bottom: 1.618rem; /* Anwendung des Fibonacci-Verhältnisses */
    color: var(--text-color); /* Farbanpassung für bessere Lesbarkeit */
}



.form-group {
    margin-bottom: 2.618rem;  /* Erhöhen des Abstands zwischen den Formularelementen */
}
.upvote, .downvote {
    color: var(--text-color); /* Oder jede andere Farbe, die zu Ihrem Design passt */
    font-size: 20rem; /* Oder jede andere gewünschte Größe */
    background: none;
    border: none;
    
}
.upvote:hover, .downvote:hover {
    color: var(--text-color);
}
summary.container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-xlarge);
    padding: var(--padding-large);
    margin: var(--space-xsmall);
    min-height: 20vh; /*
    /* Sie können auch min-height hinzufügen, um sicherzustellen, dass er den gesamten Bildschirm einnimmt, falls dies gewünscht ist */
    
}
/* Spezieller Stil für den "summary"-Bereich, wenn er fokussiert wird */
summary:focus {
    /* Kein Standard-Rahmen um den fokussierten Bereich */
    outline: none;
    /* Schatten um den fokussierten Bereich */
    box-shadow: 0 0 10px var(--tertiary-color); 
}

/* Spezieller Stil für den "summary"-Bereich, wenn er schwebt */
summary:hover {
    /* Verschiebt das Element leicht nach oben und vergrößert es */
    transform: translateY(-5rem) scale(1.05); 
    /* Schatten um den schwebenden Bereich */
    box-shadow: 0 10rem 20rem rgba(0, 0, 0, 0.2); 
}

/* Stil für den Pseudo-Element-Zustand "nach" des "summary"-Bereichs */
summary::after {
    /* Positionierung relativ zum "summary"-Bereich */
    position: relative ;
    /* Platzierung des Pseudo-Elements innerhalb des "summary"-Bereichs */
    
    /* Glatter Übergangseffekt */
    transition: transform 3.69; 
}

/* Grundstil für den "summary"-Bereich */
summary {
    
    
    display: flex;  /* Aktiviert Flexbox */
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    padding: var(--padding-large); 
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    background-color: var(--quinary-color);
    color: var(--text-color); 
    border-radius: 5px; 
    transition: transform 3.69s ease-in-out; 
    animation: pulsate 6.888s infinite; 
    position: relative;
    margin-left: var(--space-large);
    margin-right: var(--space-large);
}

details {
    
    
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease-in-out;
    background-color: var(--secondary-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;  /* Neu hinzugefügt, um den Inhalt vertikal zu stapeln */
    margin-left: var(--space-large);
    margin-right: var(--space-large);
    justify-content: center;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    
}

details.logo-container{

    display: flex;
    justify-content: center;
    align-items: center;
    /* Sie können auch min-height hinzufügen, um sicherzustellen, dass er den gesamten Bildschirm einnimmt, falls dies gewünscht ist */
    min-height: -1vh;
}
details:hover {
    min-width: 369px;
    transform: translateY(-1rem) scale(1.05);
    /* Schattenfarbe basierend auf der Hauptfarbe */
    box-shadow: 0 4px 12px rgba(var(--primary-color));
    margin: var(--space-medium);
    padding: var(--padding-large); 
   

}

details[open] {
    min-width: 369px;
    /* Schattenfarbe basierend auf der Hauptfarbe, wenn das Element geöffnet ist */
    box-shadow: 0 4px 12px rgba(var(--primary-color), 0.6);
    animation: slideDown 1.618 ease-in-out;
    padding-left: var(--space-base);
    padding-right: var(--space-base);
    padding: var(--padding-large); 


}

details.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: var(--quaternary-color-transparento5)
}

details p, details blockquote {
    font-size: var(--font-size-base);
    padding: var(--padding-large); 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    margin: var(--space-medium) ;
    padding-left: var(--space-base);
    padding-right: var(--space-base);
}

.parent-of-submit {
    
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: var(--space-xxsmall);
    margin-left: var(--space-xxsmall);
    
}

input[type="submit"] {
    
    font-family: 'Poppins', sans-serif;
    border-radius: 12px;
    padding: 15px 35px 15;
    font-size: var(--font-size-large);
    background-color: var(--quinary-color);
    margin-bottom: 20vh;
    color: var(--text-color);
    border: none;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    
                 /* Aktiviert Flexbox */
    justify-content: center;
    margin-right: var(--space-xxsmall);
    margin-left: var(--space-xxsmall);

}

input[type="text"],
input[type="email"] {
    width: 90%;
    padding: var(--padding-small);
    margin: var(--space-small);
    margin-bottom: var(--space-base);
}

textarea {
    width: 90%;       /* Breite entsprechend den Eingabefeldern */
    height: 50px;
    padding: var(--padding-small);
    margin: var(--space-small);
    margin-bottom: var(--space-base);
    
}
#message {
    width: 90%;  /* Breite entsprechend den Eingabefeldern */
    height: 150px;  /* Sie können die Höhe nach Bedarf ändern */
    padding: var(--padding-small);
    margin: var(--space-small);
    margin-bottom: var(--space-base);
    font-family: 'Poppins', sans-serif;  /* Falls Sie die gleiche Schriftart wie die anderen Eingabeelemente verwenden möchten */
}


footer {
    display: flex;             /* Aktiviert Flexbox */
    flex-direction: column;   /* Kinder werden vertikal gestapelt */
    justify-content: center;  /* Zentriert Kinder vertikal */
    align-items: center;      /* Zentriert Kinder horizontal */
    height: 10vh;            /* Beispielhöhe für den Footer */
    background-color:var(--background-color);  /* Dunkelgrauer Hintergrund */
    margin-bottom: 0;
    
    color: var(--text-color);              /* Weißer Text */
}
footer p {
    margin-bottom: 10px; /* Abstand zwischen dem Text und den Links */
}

.footer-links {
     /* Zentriert die Links horizontal */
    gap: 10px;
                    /* Gibt einen Abstand zwischen den Links */
}

.footer-links a {
    display: flex; /* Aktiviert Flexbox */
    color: var(--quinary-color);            /* Weißer Link-Text */
    text-decoration: none;    /* Keine Unterstreichung */
}

.footer-links a:hover {
    text-decoration: underline; /* Unterstreichung beim Darüberfahren */
}