/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Deine bestehenden Styles */
body {
  background: url('background.png') no-repeat center/cover fixed;
}
@font-face {
  font-family: 'angelica';
  /* Die Ergänzung mit src: local und format sorgt dafür, dass der Validator nicht mehr meckert */
  src: local('angelica'),
       url('fonts/angelica.ttf') format('truetype');
}

.animated {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
 
  cursor: pointer; /* Zeigt dem Nutzer, dass man klicken kann */
  transition: transform 0.5s ease; /* Macht die Bildbewegung flüssig */
}
.pos-baum {
  top: 420px;
  left: 70%;
}
.pos-back{
  top: 600px;
  left: 45%;
}
/* --- HIER NEU: Effekt für das Bild bei Klick --- */
.animated.active {
  transform: scale(1.05) rotate(2deg); /* Beispiel: Bild zoomt leicht und dreht sich */
}

.animated span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8); /* Startet leicht kleiner */
  z-index: 10;
  font-size: 1.6rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
         drop-shadow(-1px 1px 0 black)
         drop-shadow(1px -1px 0 black)
         drop-shadow(-1px -1px 0 black);
  
  /* --- HIER NEU: Schriftart & flüssiger Übergang --- */
  font-family: 'angelica', sans-serif; /* <--- Hier deine Font eintragen */
  white-space: nowrap; /* Verhindert unschöne Zeilenumbrüche beim Einblenden */
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out; 
}
.animated:hover span,
.animated:focus span,
.animated.active span {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
/* --- HIER NEU: Text einblenden, wenn geklickt wurde --- */
.animated.active span {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1); /* Text zoomt sanft rein */
}
.animated:hover img, .animated:focus img {
  transform: scale(1.04) translateY(-4px); /* Vergrößert das Bild um 4% */

  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.5));
  
}
	
/* Der normale Zustand des Bildes */
.animated img {
  
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  z-index: 1;
  
  /* Wichtig: Macht den Übergang in BEIDE Richtungen flüssig */
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.pos-baum img{
  width: 300px;
  height: auto;
}
.pos-back img {
  width: 100px;
  height: auto;
  }