/* =====================================================
   Body Art Tattoo — Footer Styles by NiDi Media v7.5
   ===================================================== */

/* === Grundlayout === */
.site-footer {
    color:#eaeaea;
    font-family:'Poppins',sans-serif;
    overflow:hidden;
    margin-top:80px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}

/* =====================================================
   1. OBERER BEREICH — KONTAKT + KARTE  (SCHWARZ)
   ===================================================== */
.footer-top {
    background: #000;
    padding: 60px 0;
}
.footer-top-inner{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
    gap:60px;
    align-items:start;
}
.footer-info h3{
    font-size:20px;
    font-weight:600;
    margin-bottom:15px;
    color:#fff;
}
.footer-info p{
    margin:8px 0;
    color:#ccc;
    font-size:15px;
}
.footer-info i{
    color:#007aff;
    margin-right:8px;
    width:18px;
}
.footer-info a{
    color:#ccc;
    text-decoration:none;
    transition:color .3s;
}
.footer-info a:hover{color:#fff;}
.footer-map iframe{
    width:100%;
    height:240px;
    border:none;
    border-radius:12px;
    filter:grayscale(.4) brightness(.9);
    transition:filter .4s;
}
.footer-map iframe:hover{filter:grayscale(0) brightness(1);}
.map-placeholder{
    background:rgba(255,255,255,0.05);
    padding:60px;
    border-radius:10px;
    text-align:center;
    color:#888;
}

/* =====================================================
   2. MITTLERER BEREICH — LOGO + FEED  (VERLAUF)
   ===================================================== */
.footer-middle {
    background: linear-gradient(
        180deg,
        #000000 0%,
        #001122 25%,
        #002255 55%,
        #003a88 80%,
        #0044aa 100%
    ) !important;
    padding: 80px 0;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.08); /* Linie NUR hier unten */
}
.footer-middle-inner{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
    gap:60px;
    align-items:start;
}
.footer-brand{text-align:center;}
.footer-smalltext {
    margin-top: 15px;
    font-size: 14px;
    color: #bbb;
    line-height: 1.5;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.footer-logo{height:80px;margin-bottom:10px;border-radius:8px;}
.footer-name{font-size:22px;font-weight:600;margin:0;color:#fff;}
.footer-subtitle{font-size:14px;color:#bbb;margin-bottom:20px;}

/* === Social Icons === */
.footer-socials {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 35px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-socials a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
	background: linear-gradient(180deg, #111 0%, #000 100%);
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    transition: all 0.35s ease;
    text-decoration: none;
}

.footer-socials a:hover {
    transform: translateY(-4px) scale(1.05);
    background: var(--footer-accent, #0044aa);
    color: var(--footer-hover, #fff);
    box-shadow: 0 0 12px var(--footer-accent, #0044aa);
}

.footer-instagram iframe,
.footer-instagram img{width:100%;border-radius:10px;}
.footer-instagram .placeholder{
    background:rgba(255,255,255,0.05);
    padding:40px;text-align:center;
    border-radius:12px;color:#bbb;font-style:italic;
}

/* =====================================================
   3. UNTERER BEREICH — NAV + SIGNATURE + ©
   ===================================================== */
.footer-bottom {
    background: #0044aa !important;
    padding: 25px 0;
}
.footer-bottom-inner{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
}
.footer-menu-horizontal{
    display:flex;flex-wrap:wrap;
    gap:25px;
    list-style:none;
    padding:0;margin:0;
    justify-content:flex-start;
}
.footer-menu-horizontal a{
    color:#ddd;text-decoration:none;font-size:15px;
    transition:color .3s;
}
.footer-menu-horizontal a:hover{color:#fff;}
.footer-signature{text-align:center;font-weight:500;letter-spacing:.5px;}
.footer-signature .shine{
    background:linear-gradient(110deg,
        rgba(255,255,255,0)0%,
        rgba(255,255,255,0.5)50%,
        rgba(255,255,255,0)100%);
    background-size:200% auto;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:shine 6s linear infinite;
}
@keyframes shine{
    0%{background-position:200% center;}
    100%{background-position:-200% center;}
}
.footer-copy{text-align:right;font-size:14px;color:#aaa;}

/* =====================================================
   4. ANIMATIONEN
   ===================================================== */
[data-animate]{opacity:0;transform:translateY(25px);transition:all .9s ease;}
[data-animate].active{opacity:1;transform:translateY(0);}

/* =====================================================
   5. RESPONSIVE
   ===================================================== */
@media(max-width:980px){
    .footer-top-inner,
    .footer-middle-inner{
        grid-template-columns:1fr;
        text-align:center;
    }
    .footer-bottom-inner{
        grid-template-columns:1fr;
        text-align:center;
        gap:10px;
    }
    .footer-copy{text-align:center;}
}