.skills-section {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 1rem;
    
    
  }
  .skills-section h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #E0E0E0;
    text-align: center;
  }
  .skills-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "dev ecom ecom"
      "dev design agile";
    gap: 2rem;
    
  }
  .development {
    grid-area: dev;
    z-index: 4;
  }
  .e-commerce {
    grid-area: ecom;
    z-index: 4;
  }
  .design {
    grid-area: design;
    z-index: 4;
  }
  .agile {
    grid-area: agile;
    z-index: 4;
  }
  .skill-box {
    background-color: #161622;
    border-radius: 8px;
    padding: 2rem;
    color: #E0E0E0;
    box-sizing: border-box;
  }
  .skill-box h3 {
    margin-top: 0;
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  .skill-box .icons img {
      opacity: 0.8;                 
      transition: opacity 0.3s ease;
      transition: transform 0.3s ease, box-shadow 0.3s ease; 
    }
    
    .skill-box .icons img:hover {
      opacity: 1;  
      transform: scale(1.1);
                   
    }

/* Einheitliche Icon-Größe: verwendet globale Variable --svg-icon-size */
.skill-box .icons img {
  width: var(--svg-icon-size, 64px);
  height: auto;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}