/* Mobile: GLEICHE gespiegelte Positionierung wie Desktop */
@media (max-width: 768px) {
    
  .main-title {
    font-size: 3.2rem !important;
  }
  
  .names-container {
    position: relative !important; /* Absolute Positionierung beibehalten */
    margin: 5rem 0 3rem 0 !important;
    height: 10rem !important; /* Angepasste Höhe für Mobile */
    z-index: 12 !important;
  }

  .name-link {
    position: absolute !important; /* Absolute Positionierung beibehalten */
    font-size: 2.1rem !important;
    padding: 0.13em 0.7em !important;
    white-space: nowrap !important;
  }

  /* HANNES - links unten auf Mobile (gleich wie Desktop) */
  .name-link.hannes-font {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    bottom: 0 !important; /* Unten */
    left: 25% !important; /* Links */
    transform: translateX(-50%) !important;
  }

  /* SENNAH - rechts unten auf Mobile (gleich wie Desktop) */
  .name-link.times-font {
    font-family: "Times New Roman", Times, serif !important;
    font-size: 2.4rem !important;
    bottom: 0 !important; /* Unten */
    right: 25% !important; /* Rechts */
    transform: translateX(50%) !important;
  }
  
  .social-divider {
    bottom: 13vh !important;
  }
  
  .social-icons {
    gap: 2rem !important;
    bottom: 4vh !important;
  }
}
.logo-icon .svg-logo path {
  transition: fill 0.3s;
}
.logo-icon:hover .svg-logo path,
.logo-icon:focus .svg-logo path {
  fill: #e74c3c  !important; /* oder dein Wunschgrün */
}

/* Optional: Rahmen und Hintergrund auch rot */
.logo-icon:hover,
.logo-icon:focus {
  border-color: #e74c3c !important;
  background: rgba(231, 76, 60, 0.10) !important;
}