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

/* Der Container setzt das Bild exakt mittig */
.bild-container {
  position: relative;
  display: block;        
  max-width: 80%;        /* PC-Ansicht: Angenehme Bildgröße */
  margin: 40px auto 20px auto; /* Gibt etwas Abstand nach unten zum nächsten Link */
}

/* Das Bild verhält sich responsiv und passt sich an */
.bild-container img {
  display: block;
  width: 100%;
  height: auto;
}

/* Standard-Styling für den Link unten rechts auf dem Bild (PC/Laptop) */
.bild-link-rechts {
  position: absolute;
  bottom: 12%;          
  right: 15%;           
  z-index: 10;      
  text-decoration: none; 
  white-space: nowrap;  
  
  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;
}

/* ==========================================================================
   NEU: STYLING FÜR DEN LINK UNTER DEM BILD (PC/Laptop)
   ========================================================================== */
.homepage-link-container {
  text-align: center;      /* Zentriert den Link horizontal unter dem Bild */
  margin-bottom: 40px;     /* Abstand zum unteren Bildschirmrand */
}

.link-unter-bild {
  display: inline-block;
  text-decoration: none;
  
  font-family: 'Arial', sans-serif;
  font-size: 32px;         /* Etwas dezenter als der Link auf dem Bild */
  font-weight: bold;
  color: #fff3cc;
  
  /* Gleicher Neon-Effekt für ein einheitliches Design */
  text-shadow: 
    0 0 5px #ffd700, 
    0 0 10px #ffd700, 
    0 0 20px #ff8c00;
    
  transition: all 0.3s ease;
}

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

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

  .bild-link-rechts {
    font-size: 18px;    
    bottom: 8%;         
    right: 8%;          
    text-shadow:        
      0 0 4px #ffd700, 
      0 0 8px #ff8c00;
  }

  /* Schaltet die Schriftgröße unter dem Bild auf dem Handy herab */
  .link-unter-bild {
    font-size: 20px;     /* Verhindert, dass der Text auf Handys umbricht */
    text-shadow: 
      0 0 4px #ffd700, 
      0 0 8px #ff8c00;
  }
}