/* Färbt den gesamten Hintergrund der Webseite ein */
body {
  background-color: #050301; 
  margin: 0;
  padding: 10px; /* Weniger Abstand am Handy-Rand */           
}

/* Der Container setzt das Bild exakt mittig */
.bild-container {
  position: relative;
  display: block;        
  max-width: 95%;        /* Nutzt auf Handys fast die volle Breite */
  margin: 20px auto;     
}

/* Das Bild passt sich automatisch an */
.bild-container img {
  display: block;
  width: 100%;
  height: auto;
}

/* Standard-Styling für große Bildschirme (PC/Laptop) */
.bild-link-rechts {
  position: absolute;
  /* Nutzen von Prozentwerten für flexiblere Anpassung */
  bottom: 12%;          
  right: 15%;          
  z-index: 10;      
  text-decoration: none; 
  white-space: nowrap;  /* Verhindert ungewollten Zeilenumbruch */
  
  font-family: 'Arial', sans-serif;
  font-size: 36px;       
  font-weight: bold;
  color: #fff3cc; 
  
  text-shadow: 
    0 0 5px #ffd700, 
    0 0 10px #ffd700, 
    0 0 20px #ff8c00, 
    0 0 40px #ff8c00;
    
  transition: all 0.3s ease;
}

.bild-link-rechts:hover {
  color: #ffffff;
  text-shadow: 
    0 0 8px #ffd700, 
    0 0 15px #ffd700, 
    0 0 30px #ff8c00, 
    0 0 60px #ff8c00;
}

/* ==========================================================================
   SPEZIFISCHE ANPASSUNGEN FÜR SMARTPHONES (Bildschirme kleiner als 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .bild-container {
    max-width: 100%;    /* Nutzt die volle Breite des Handys */
    margin: 10px auto;
  }

  .bild-link-rechts {
    font-size: 18px;    /* Verkleinert die Schrift deutlich fürs Handy */
    bottom: 8%;         /* Schiebt den Link auf kleinen Displays leicht nach unten */
    right: 8%;          /* Schiebt den Link etwas näher an den rechten Rand */
    text-shadow:        /* Leicht reduzierter Neon-Effekt, damit es lesbar bleibt */
      0 0 4px #ffd700, 
      0 0 8px #ff8c00;
  }
}