/* 
 * Footer CSS
 * Alle speziellen Footer-Element-Definitionen
 * Farben müssen via Custom Properties aus der colors.css genutzt werden
 */

/* VERPFLICHTEND: Horizontal Overflow verhindern (Regel 005 in 011-ui-css-mobile.mdc) */
/* VERPFLICHTEND: Footer-Breite = Content-Breite (011-ui-footer.mdc Regel 003) */
.base-footer {
    background: linear-gradient(180deg, rgb(4 12 12 / 95%) 0%, rgb(7 18 16 / 93%) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgb(66 255 174 / 30%);
    border-radius: var(--radius-xl);
    /* Mobile-First: Basis-Styles gelten für mobile Geräte */
    padding: var(--spacing-md);
    box-shadow: 0 16px 36px rgb(1 7 10 / 52%);
    margin-top: auto;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
    left: 0;
    right: 0;
}

.base-footer-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    max-width: 100%;
    margin: 0 auto;
}

/* Mobile-First: Basis-Styles gelten für mobile Geräte */
.base-footer-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    justify-items: center;
}

/* Tablet/iPad: 600px-1023px */
@media (width >= 600px) {
    .base-footer-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

.base-footer-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
    align-items: center;
}

.base-footer-column-title {
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.base-footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
}

.base-footer-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-family: var(--font-family-base);
    transition: color var(--transition-fast);
    line-height: var(--line-height-relaxed);
}

.base-footer-link:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.base-footer-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgb(66 255 174 / 22%);
    text-align: center;
    align-items: center;
}

.base-footer-text {
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
    color: rgb(153 221 194 / 92%);
    line-height: var(--line-height-normal);
}

.base-footer-version {
    font-size: var(--font-size-xs);
    font-family: var(--font-family-mono);
    color: rgb(153 221 194 / 92%);
    line-height: var(--line-height-normal);
}

.base-footer-links {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    justify-content: center;
}

.base-footer-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
    transition: color var(--transition-fast);
}

.base-footer-link:hover {
    color: rgb(133 255 197 / 98%);
}

/* VERPFLICHTEND: Footer-Breite = Content-Breite (011-ui-footer.mdc) */
/* Desktop 1024px: max-width 1200px; Widescreen 1440px: max-width 1400px (admin-seo-dashboard) */
@media (width >= 1024px) {
    .base-footer {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (width >= 1440px) {
    .base-footer {
        max-width: 1400px;
    }
}

/* Responsive - Mobile-First mit min-width */
/* Tablet/iPad: 600px-1023px */
@media (width >= 600px) {
    .base-footer {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
}

/* Desktop: 1024px-1439px */
@media (width >= 1024px) {
    .base-footer-columns {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Widescreen: min-width: 1440px */
@media (width >= 1440px) {
    .base-footer-columns {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile: Basis-Styles gelten bereits, hier nur spezifische Anpassungen */
@media (width <= 576px) {
    .base-footer {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    .base-footer-columns {
        gap: var(--spacing-lg);
    }
}