footer {
    padding: 30px 0;
    background-color: rgb(255, 255, 255);
    text-align: center;
    display: flex; /* Flexbox aktivieren */
    flex-direction: column; /* Inhalt vertikal anordnen */
    justify-content: center; /* Zentrierung des Inhalts */
    align-items: center; /* Horizontale Zentrierung */
}

footer h2 {
    font-size: 70px; 
    text-align: center; 
    color: rgb(0, 0, 0);
    position: relative; 
    display: inline-block; 
}

footer h2::after {
    content: ''; 
    display: block; 
    width: 100%; 
    height: 5px; 
    background-color: gold; 
    position: relative; 
}

.grid_container {
    margin: 60px auto;
    width: 1500px;
    max-width: 90%;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Fünf gleich große Spalten */
    grid-template-rows: repeat(2, auto); /* Zwei Reihen, Höhe wird automatisch an Inhalte angepasst */
    gap: 15px;
}

/* Hover-Animation für das gesamte grid_item */
.grid_item {
    background-color: rgb(88, 88, 88);
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding: 30px; 
    gap: 15px; 
    border-radius: 10px; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergangsanimation */
    height: 160px; /* Feste Höhe für gleichmäßige Grid-Items */
}

.grid_item:hover {
    transform: scale(1.05); /* Vergrößert das gesamte grid_item um 5% */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Schatten verstärken */
}

.grid_item a {
    display: flex; /* Flexbox aktivieren */
    justify-content: center; /* Zentrieren */
    align-items: center; /* Vertikale Zentrierung */
    width: 100%; /* Volle Breite */
    height: 100%; /* Volle Höhe */
}

.grid_item img {
    height: 90%; /* Bildhöhe auf 90% des grid_item-Containers festlegen */
    width: 90%; /* Bildbreite auf 90% des grid_item-Containers festlegen */
    object-fit: contain; /* Bild innerhalb der festgelegten Größe skalieren, ohne es zuzuschneiden */
    border-radius: 10%; /* Rundungen beibehalten */
    transition: transform 0.3s ease; /* Sanfte Übergangsanimation für die Bildskalierung */
}

.grid_item:hover img {
    transform: scale(1.2); /* Bild beim Hover-Effekt leicht vergrößern */
}

.all-partner-link {
    display: inline-block;
    padding: 10px 20px; /* Innenabstand des Links */
    border: 2px solid black; /* Schwarze Umrandung */
    border-radius: 15px; /* Abgerundete Ecken */
    text-decoration: none; /* Unterstreichung entfernen */
    color: black; /* Textfarbe schwarz */
    font-size: 18px; /* Schriftgröße */
    font-weight: bold; /* Fettschrift */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; /* Animationseffekt für box-shadow */
    font-family: Arial Black;
}

.all-partner-link:hover {
    background-color: rgb(255, 255, 255); /* Hintergrundfarbe bei Hover */
    color: rgb(0, 0, 0); /* Textfarbe bei Hover */
    border: 2px solid gold; /* Goldene Umrandung um den Link bei Hover */
    box-shadow: 0 0 0 5px gold; /* Goldene Umrandung um den Link */
}

/* Blendet die letzten beiden grid_item-Elemente (item11 und item12) aus */
.grid_container .grid_item:nth-child(n+11) {
    display: none;
}

/* Responsive Anpassungen */
@media (max-width: 1300px) {
    .grid_container {
        grid-template-columns: repeat(4, 1fr); /* Vier Spalten bei kleineren Bildschirmen */
        grid-template-rows: repeat(3, 1fr); /* Drei Reihen */
    }
}

@media (max-width: 900px) {
    .grid_container {
        grid-template-columns: repeat(2, 1fr); /* Zwei Spalten bei mittelgroßen Bildschirmen */
        grid-template-rows: repeat(6, 1fr); /* Sechs Reihen */
    }
}

@media (max-width: 650px) {
    footer h2 {
        font-size: 9vw;
    }
    footer h3 {
        font-size: 24px;
    }
    .grid_item {
        padding: 20px;
    }
    .grid_item img {
        height: 100px;
        width: 100px;
    }
    
    body {
        font-size: 16px;
    }
}

@media (max-width: 880px)
{
    .grid_container{
        margin: 40px auto -70px; /* Reduzierter unterer Abstand */
    }
}

@media (max-width: 400px) {
    footer h3 {
        font-size: 18px;
    }
    .grid_item {
        padding: 20px;
        height: 70px;
    }
    .grid_container{
        margin: 40px auto -70px; /* Reduzierter unterer Abstand */
    }
    .grid_item img {
        height: 80px;
        width: 80px;
    }
    
    body {
        font-size: 12px;
    }
}

/* ------------------------------------------------- IMPRESSUM -------------------------------*/
.impressum-container {
    position: relative;
    width: 100%;
    height: 300px; /* Höhe des Containers anpassen */
    background-image: url('/images/Impressum-Banner.png'); /* Hintergrundbild */
    background-size: cover; /* Hintergrundbild füllt den Container */
    background-position: center; /* Hintergrundbild wird zentriert */
    display: flex;
    flex-direction: column; /* Vertikale Anordnung der Elemente */
    justify-content: flex-start; /* Elemente nach oben ausrichten */
    align-items: center; /* Zentriere Logos und Links horizontal */
    padding-top: 10px; /* Abstand zum oberen Rand */
}

.small-images-container {
    display: flex; /* Flexbox für horizontale Anordnung der Logos */
    justify-content: center; /* Logos horizontal zentrieren */
    align-items: center; /* Beide Logos auf gleicher Höhe */
    margin-bottom: 10px; /* Platz für Links unterhalb der Logos */
}

.ducks-logo-impressum {
    width: 350px; /* Größeres Ducks-Logo */
    height: auto; /* Höhe wird automatisch angepasst */
    object-fit: contain;
    margin-left: -95px;
    margin-right: -70px; /* Minimaler Abstand zwischen den Logos */
}

.small-image {
    width: 100px; /* Zweites Logo bleibt kleiner */
    height: auto; /* Höhe wird automatisch angepasst */
    object-fit: contain;
}

.Askö-logo-impressum{
    width: 200px; /* Zweites Logo bleibt kleiner */
    height: auto; /* Höhe wird automatisch angepasst */
    object-fit: contain;
    margin-top: 8px;
}

.links-container {
    display: flex;
    justify-content: center; /* Links horizontal zentrieren */
    position: absolute; /* Absolut positioniert für unteren Rand */
    bottom: 10px; /* 10px vom unteren Rand des Containers */
    left: 50%; /* Zentriert in der Breite */
    transform: translateX(-50%); /* Verschiebt es um die Hälfte seiner Breite */
    font-size: 12px; /* Kleinere Schriftgröße für Links */
    font-family: Arial Black;
    margin-top: 0; /* Stelle sicher, dass der Abstand positiv ist */
}
.impressum-link {
    margin: 0 5px; /* Abstand zwischen den Links */
    text-decoration: none;
    color: rgb(201, 201, 201); /* Schriftfarbe auf weiß setzen */
    position: relative; /* Für das Pseudo-Element */
}

.impressum-link::after {
    content: ""; /* Pseudo-Element für den Unterstrich */
    position: absolute;
    left: 0; /* Beginnt am linken Rand */
    bottom: -2px; /* Positionierung unter dem Text */
    width: 100%; /* Volle Breite des Links */
    height: 1.5px; /* Konstante Höhe des Unterstrichs, dünn halten */
    background-color: gold; /* Farbe des Unterstrichs */
    transform: scaleX(0); /* Startet als unsichtbar */
    transform-origin: left; /* Ursprung für die Skalierung */
    transition: transform 0.3s ease; /* Animation für den Übergang */
}

.impressum-link:hover::after {
    transform: scaleX(1); /* Unterstrich erscheint von links nach rechts */
}

.impressum-link:hover {
    color: white; /* Schriftfarbe beim Hover */
}

.links-images-container {
    display: flex; /* Flexbox für horizontale Anordnung */
    justify-content: center; /* Elemente horizontal zentrieren */
    align-items: center; /* Elemente vertikal ausrichten */
    margin-bottom: 40px; /* Erhöhe den Abstand nach unten für mehr Platz */
}

.link-image {
    display: flex; /* Um das Bild und den Text auszurichten */
    align-items: center; /* Bild und Text vertikal zentrieren */
    margin: 0 15px; /* Abstand zwischen den Links */
    text-decoration: none; /* Unterstrich entfernen */
    color: rgb(201, 201, 201); /* Textfarbe */
    font-size: 14px; /* Schriftgröße */
    font-family: Arial, sans-serif; /* Schriftart */
    transition: color 0.3s; /* Sanfter Übergang für die Textfarbe */
}

.link-image-img {
    width: 30px; /* Größe der Bilder */
    height: 30px; /* Höhe konsistent halten */
    margin-right: 5px; /* Abstand zwischen Bild und Text */
    object-fit: contain; /* Seitenverhältnis beibehalten */
    margin-top: -10px;
    transition: transform 0.3s; /* Sanfter Übergang für die Bildgröße */
}

.link-image:hover {
    color: white; /* Farbe beim Hover ändern */
}

.link-image-img:hover {
    transform: scale(1.2); /* Bild beim Hover um 20% vergrößern */
}

.links-container {
    margin-top: -10px; /* Negative Marge, um die Links weiter nach oben zu bringen */
}

@media (max-width: 768px) {
    .links-container {
        bottom: 5px; /* Weniger Abstand vom unteren Rand */
    }

    .links-container {
        font-size: 10px; /* Kleinere Schriftgröße für Links auf Tablets */
    }
}

@media (max-width: 480px) {
    .ducks-logo-impressum{
        width: 200px;
        margin-left: -35px;
        margin-right: -40px; /* Minimaler Abstand zwischen den Logos */
    }

    .small-image{
        width: 75px;
    }

    .Askö-logo-impressum{
        width: 120px;
    }

    .impressum-container{
        height: 150px;
    }

    .link-image-img{
        width: 20px; /* Größe der Bilder */
        height: 20px; /* Höhe konsistent halten */
        margin-top: -18px;
    }

    .impressum-container{
        height: 180px;
    }
}