/* Grundlayout */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-color: #1b1b1b; /* dunkler Hintergrund */
  color: #f5f5f5;           /* helle Schrift */
  
  /* Hintergrundbild */
  background-image: url('hintergrund.jpg');
  background-repeat: repeat; /* Wiederholung horizontal und vertikal */
  background-size: auto;     /* Bild im Originalmaßstab */
}

/* Navigation (Grundlayout) */
.navbar {
  background-color: #62096f; /* Hauptlila */
  position: sticky;
  top: 0;
  z-index: 1000;

  /* Streifen oben/unten */
  box-shadow: 
    0 -6px 0 #62096f,   /* oberer Lila-Streifen (dicker) */
    0 -8px 0 #1b1b1b,   /* oberer Hintergrund-Streifen (dünn) */
    0 6px 0 #1b1b1b,    /* unterer Hintergrund-Streifen (dünn) */
    0 12px 0 #62096f;   /* unterer Lila-Streifen (dicker) */
}

.navbar ul {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar li {
  margin: 0;
}

.navbar a {
  display: block;
  padding: 15px 20px;
  color: #f5f5f5;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s, color 0.3s;
}

/* Hover und aktive Elemente */
.navbar a:hover {
  background-color: #a311b9; /* sticht heraus */
}

.navbar a.active {
  color: #a8a8a8; /* geklickt oder aktueller Unterpunkt */
}

/* Inhalts-Canvas */
.content {
  max-width: 900px;
  margin: 30px auto;
  padding: 20px;
  background-color: #2a2a2a; /* abgehoben, dunkler Canvas */
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.4);
}

/* Profil-Bereich */
.profile {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 30px 0;
}

.portrait img {
  width: 70%;
  max-width: 300px;
  height: auto;
  border-radius: 10px;
}

.details ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.details li {
  margin-bottom: 8px;
}

/* Hörproben */
.samples h2 {
  color: #a311b9; /* Überschriften hervorheben */
}

.sample {
  margin-bottom: 20px;
}

audio {
  width: 100%; /* Player in voller Breite */
  margin-top: 5px;
}

/* Footer */
footer {
  text-align: center;
  margin-top: 40px;
  font-size: 0.9em;
  color: #a8a8a8;
}

/* Normale Textlinks im Content */
.content a {
  color: #f5f5f5;
  text-decoration: underline;
}

.content a:hover {
  color: #a311b9; /* auffällig beim Drüberfahren */
}

/* Divider */
.divider {
  border: none;
  height: 8px; 
  margin: 40px 0; 
  background-color: #1b1b1b; /* Hintergrundfarbe */
  border-radius: 4px;
}

/* Social Links unter Profilbild */
.social-links {
  margin-top: 10px;
}

.social-links a img {
  width: 32px; /* Größe des Logos */
  transition: transform 0.2s ease, filter 0.2s ease;
}

.social-links a:hover img {
  transform: scale(1.2); /* leicht vergrößern */
  filter: brightness(1.5); /* hervorgehoben */
}

/* Mobile Ansicht */
@media (max-width: 600px) {

  .portrait img {
    width: 90% !important;      /* fast volle Breite */
    max-width: none; /* keine harte Obergrenze mehr */
  }

  .navbar {
    position: relative !important; /* bricht sticky garantiert */
    top: auto;
  }

  .navbar ul {
    flex-direction: column;
  }

  .navbar li {
    border-bottom: 1px solid #444;
  }

  .navbar li:last-child {
    border-bottom: none;
  }

  .navbar a {
    text-align: center;
    padding: 12px;
  }
}