.footer {
    background: var(--color-bg-footer);
    color: var(--color-text-premium);
    font-family: var(--font-body);
}

.footer__container {
    max-width: var(--container-7xl);
    display: block;
    width: 100%;
    margin-inline: auto;
}

.footer__container-top{
    padding-block: calc(var(--spacing) * 8);
    padding-inline: calc(var(--spacing) * 4);
    max-width: var(--ui-container);
    width: 100%;
    margin-inline: auto;
    display: block;
    
}

.footer__container-bottom{
    padding-block: calc(var(--spacing) * 8);
    padding-inline: calc(var(--spacing) * 4);
    max-width: var(--ui-container);
    width: 100%;
    margin-inline: auto;
    display: block;
}



/* Footer-Top */


.footer-top{
    padding-bottom: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 10);
    display: block;

}

.footer-top__container{
    gap: calc(var(--spacing) * 4);
    align-items: flex-start;
    flex-direction:column;
    display: flex;
    padding-bottom: calc(var(--spacing) * 8);
    border-bottom: 1px solid var(--color-border-premium);
}

.footer-top__logo{
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: inherit;
    text-decoration: inherit;
}

.footer-top__logo-image{
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
}


.footer-top__item-container{
    gap: calc(var(--spacing) * 3);
    flex-direction: column;
    display: flex;    
}

.footer-top__item{
    gap: calc(var(--spacing) * 2);
    align-items: center;
    max-width: var(--container-sm);
    display: flex;
    color: var(--color-text-premium-muted);
}

/* https://fonts.google.com/icons?selected=Material+Symbols+Outlined */
/* Material Symbols (new), Outlined */
/* Fill = 0, Weight:400, Grade: 0, Opitcal Size: 20px */
/* Size: 20px, Color: doesn't matter */
.footer-top__item-symbol{
    color: inherit;
    fill: currentColor;
    height: 1.25em;
    aspect-ratio: 1/1;
    flex-shrink: 0;
    display: inline-block;
}

.footer-top__value-copy-group  {
    gap: calc(var(--spacing) * 2);
    align-items: center;
    min-width: 0;
    display: flex;
}

.footer-top__value {
    color: var(--color-text-premium);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    text-underline-offset: 4px;
}

.footer-top__value--hover:hover,
.footer-top__value--hover:focus-visible {
    text-decoration: underline;
    color: var(--color-accent);
}

.footer-top__value-copy-button{
    text-align: center;
    padding: var(--spacing); 

    gap: var(--spacing);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    appearance: button;
    border: 0 solid transparent;
    background: transparent;
    color: var(--color-text-premium-muted);
    transition-property: color;
    transition-duration: var(--default-transition-duration);
    transition-timing-function: var(--default-transition-timing-function);
}

.footer-top__value-copy-button:hover,
.footer-top__value-copy-button:focus-visible {
    color: var(--color-text-premium);
}

.footer-top__value-copy-button.is-copied{
    color: var(--color-success);
}



/* Footer-Center */


.footer-center{
    display: block;
}

.footer-center__container{
    gap: calc(var(--spacing) * 8);
    flex-direction: column;
    display: flex;
}

.footer-center__column{
    display: block;
}

.footer-center__heading{
    font-weight: var(--font-weight-semibold);
    margin: 0;
    padding: 0;
    color: var(--color-text-premium);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.footer-center__items{
    margin: 0;
    margin-top: calc(var(--spacing) * 6);
    padding: 0;
    list-style: none;
    display: block;
}

.footer-center__item{
    position: relative;
    margin-block-end: calc(var(--spacing) * 4);
    display: list-item;
    list-style: none;
}
.footer-center__link{
    color: var(--color-text-premium-muted);
    gap: calc(var(--spacing) * 1.5);
    align-items: center;
    display: flex;
    list-style: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    transition-property: color;
    transition-duration: var(--default-transition-duration);
    transition-timing-function: var(--default-transition-timing-function);
}

.footer-center__link--hover:hover,
.footer-center__link--hover:focus-visible {
    color: var(--color-text-premium);
}



/* Footer-Bottom */


.footer-bottom__container-left{
    column-gap: calc(var(--spacing) * 1.5);
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: calc(var(--spacing) * 3);
}

.footer-bottom__container-left .text-muted {
    /* die generische .text-muted-Farbe ist für helle Flächen gedacht, im Footer brauchen wir die helle Variante */
    color: var(--color-text-premium-muted);
}

.footer-bottom__container-center{
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: calc(var(--spacing) * 3);
}

.footer-bottom__container-right{
    column-gap: calc(var(--spacing) * 1.5);
    justify-content: center;
    align-items: center;
    display: flex;
}

.footer-bottom__cookie-settings{
    transition-property: color, border-color;
    transition-duration: var(--default-transition-duration);
    transition-timing-function: var(--default-transition-timing-function);

    color: var(--color-text-premium-muted);
    background-color: transparent;
    border: 1px solid var(--color-border-premium);
    outline-color: var(--color-text-premium);
    border-radius: var(--border-radius);
    gap: calc(var(--spacing) * 1.5);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    appearance: button;

    padding-block: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 2.5);
    text-align: center;
}

.footer-bottom__cookie-settings--hover:hover,
.footer-bottom__cookie-settings--hover:focus-visible {
    color: var(--color-text-premium);
    border-color: var(--color-accent);
}












/*########## Ab Tablet (ab 768px Breite) ##########*/
@media (min-width: 48rem){
    .footer__container-top{
        padding-inline: calc(var(--spacing) * 6);
    }

    .footer__container-bottom{
        padding-inline: calc(var(--spacing) * 6);
    }

        

    /* Footer-Top */


    .footer-top__item-container{
        row-gap: calc(var(--spacing)*3);
        column-gap: calc(var(--spacing)*6);
        align-items: flex-start;
        flex-wrap: wrap;
        flex-direction: row;
    }



    /* Footer-Center */


    .footer-top__container{
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .footer-top__item-container{
        justify-content: flex-end;
    }



    /* Footer-Bottom */


    /* Hier Code einfügen */
}








/*########## Ab Desktop (ab 1024px Breite) ##########*/
@media (min-width: 64rem){
    .footer__container-top{
        padding-inline: calc(var(--spacing) * 8);
        padding-block: calc(var(--spacing) * 12);
    }

    .footer__container-bottom{
        padding-block: calc(var(--spacing) * 4);
        padding-inline: calc(var(--spacing) * 8);
        column-gap: calc(var(--spacing) * 3);
        justify-content: space-between;
        align-items: center;
        display: flex;
    }



    /* Footer-Top */


    /* Hier Code einfügen */



    /* Footer-Center */


    .footer-center__container{
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }



    /* Footer-Bottom */


    .footer-bottom__container-left{
        justify-content: flex-start;
        flex:  1;
        order: 1;
        margin-top: 0;
    }

    .footer-bottom__container-center{
        margin-top: 0;
        order: 2;
    }

    .footer-bottom__container-right{
        justify-content: flex-end;
        flex:  1;
        order: 3;
    }
}





/*########## Ab Großem Desktop (ab 1440px Breite) ##########*/
@media (min-width: 90rem){
    /* Footer-Top */


    /* Hier Code einfügen */


    
    /* Footer-Center */


    .footer-center{
        gap: calc(var(--spacing) * 8);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        display: grid;
    }

    .footer-center__container{
        grid-column: 1 / -1;
    }



    /* Footer-Bottom */


    /* Hier Code einfügen */
}