/* ==========================================================================
   FOOTER (Minimalistisch mit dunklem Glass-Hover-Effekt)
   ========================================================================= */

.baxolino-footer {
    width: 100%;
    background-color: #fdfdfd;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 60px 32px 30px 32px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;

    /* 🔥 DER FIX: Zwingt das Padding nach innen, sodass der Footer exakt in den Bildschirm passt */
    box-sizing: border-box;
    overflow-x: hidden;
}

.footer-container {
    width: 100%;
    /* 🔥 FIX: max-width gelöscht! Jetzt nutzt er die volle Bildschirmbreite */
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

/* --- OBERER TEIL (Marke & Links) --- */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-brand-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    /* 🔥 Dynamisch: Skaliert sofort stufenlos von 1.1rem bis 1.4rem */
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 700;
    color: #333333;
}

.footer-desc {
    color: #666666;
    /* 🔥 Dynamisch: Skaliert von 0.85rem bis 0.95rem */
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
    margin: 0;
}

/* Die Links in einer sauberen Reihe */
.footer-legal-links {
    display: flex;
    gap: 15px; /* Etwas weniger Abstand für die Cards */
    flex-wrap: wrap;
}

.footer-legal-links a {
    color: #333333; /* Dunklerer Text für besseren Kontrast */
    text-decoration: none;
    /* 🔥 Dynamisch: Wächst sanft von 0.85rem bis 0.95rem */
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
    font-weight: 600;
    padding: 10px 20px; /* Innenabstand für die Card-Optik */
    border-radius: 10px; /* Abgerundete Ecken */
    transition: all 0.3s ease; /* Weicher Übergang */
    border: 1px solid transparent; /* Transparenter Rand für den Hover-Effekt */
    display: inline-block; /* Damit Padding und Transform richtig wirken */
}

/* 🔥 Dunkler Glassmorphismus-Hover-Effekt */
.footer-legal-links a:hover {
    background: rgba(30, 30, 30, 0.85); /* Dunkler, leicht transparenter Hintergrund */
    backdrop-filter: blur(8px); /* Blur-Effekt für den Glass-Look */
    -webkit-backdrop-filter: blur(8px); /* Safari-Support */
    color: #ffffff; /* Weißer Text beim Hover */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtiler heller Rand */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sanfter Schatten */
    transform: translateY(-3px); /* Leichtes Anheben */
}

/* --- MITTLERER TEIL (Info Box) --- */
.footer-info-box {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-info-box svg {
    color: #3D94E2;
    flex-shrink: 0;
}

.footer-info-box p {
    margin: 0;
    color: #555555;
    /* 🔥 Dynamisch: Wächst sanft von 0.8rem bis 0.9rem */
    font-size: clamp(0.8rem, 1.5vw, 0.9rem);
    line-height: 1.5;
}

/* --- UNTERER TEIL (Made in Germany & Copyright) --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
    gap: 20px;
}

.copyright {
    color: #888888;
    /* 🔥 Dynamisch: Wächst sanft von 0.7rem bis 0.85rem */
    font-size: clamp(0.7rem, 1vw, 0.85rem);
}
.made-in-germany {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 🔥 Dynamisch: Wächst sanft von 0.75rem bis 0.85rem */
    font-size: clamp(0.75rem, 1.2vw, 0.85rem);
    font-weight: 700;
    color: #333333;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.german-flag {
    display: flex;
    gap: 3px;
}

.german-flag span {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.flag-black { background-color: #111111; }
.flag-red   { background-color: #DD0000; }
.flag-gold  { background-color: #FFCE00; }

/* Responsive (Handy-Ansicht) */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-legal-links {
        gap: 10px;
        flex-direction: column; /* Stapeln auf kleinen Bildschirmen */
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

.footer-brand {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
}

.footer-legal-links a {
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
}

.footer-info-box p {
    font-size: clamp(0.8rem, 1.5vw, 0.9rem);
}

.made-in-germany {
    font-size: clamp(0.75rem, 1.2vw, 0.85rem);
}

.copyright {
    font-size: clamp(0.7rem, 1vw, 0.85rem);
}