/* =======================================================
   user.css – K.V. Fidele Freunde (clean)
   - Header.png zentriert & responsive
   - Header/Navigation flacher
   - Sidebar-Menü links ohne Box
   - Footer Instagram Icon mit IG-Gradient
   ======================================================= */


/* -------------------------------------------------------
   1) TOPBAR-Modul: keine Karten/Abstände
------------------------------------------------------- */
.topbar .moduletable,
.topbar .moduletable > .card,
.topbar .moduletable > .moduletable__content{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* -------------------------------------------------------
   2) HEADER PNG: zentriert & responsive
------------------------------------------------------- */
.ff-header-image{
  text-align: center;
  padding: 10px 0;
}

.ff-header-image img{
  width: 1000px;
  max-width: 100%;
  height: auto;
  max-height: 120px;
}

@media (max-width: 900px){
  .ff-header-image{
    padding: 12px 0;
  }

  .ff-header-image img{
    width: 95%;
    max-height: 160px;
  }
}


/* -------------------------------------------------------
   3) BLAUER BEREICH: Header + Menüleiste flacher machen
------------------------------------------------------- */
.container-header{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.container-header .grid-child.container-nav{
  padding: 4px 0 !important;
}

.container-header .container-nav{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.container-header .navbar{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}


/* -------------------------------------------------------
   4) SIDEBAR-MENÜ LINKS: clean
------------------------------------------------------- */
.sidebar-left .card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sidebar-left .card-header{
  display: none !important;
}

.sidebar-left .card-body{
  padding: 0 !important;
}

.sidebar-left .mod-menu .nav{
  gap: 6px;
}

.sidebar-left .mod-menu .nav-link{
  padding: 10px 12px;
  font-weight: 700;
  border-radius: 6px;
}

.sidebar-left .mod-menu .nav-link:hover,
.sidebar-left .mod-menu .nav-link:focus{
  background: rgba(0,0,0,0.08);
}


/* -------------------------------------------------------
   5) FOOTER: Instagram Icon mit echtem IG-Gradient
------------------------------------------------------- */

.footer-instagram{
  text-align: center;
  padding: 30px 0;
}

/* Instagram-Kreis */
.footer-instagram .insta-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  text-decoration: none;
  color: #ffffff;

  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c,
    #dc2743,
    #cc2366,
    #bc1888
  );

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* SVG */
.footer-instagram .insta-icon svg{
  width: 26px;
  height: 26px;
}

/* Hover */
.footer-instagram .insta-icon:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* Fokus (Barrierefreiheit) */
.footer-instagram .insta-icon:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
}


/* Mobile */
@media (max-width: 600px){
  .footer-instagram{
    padding: 22px 0;
  }

  .footer-instagram .insta-icon{
    width: 48px;
    height: 48px;
  }

  .footer-instagram .insta-icon svg{
    width: 22px;
    height: 22px;
  }
}