@font-face{
      font-family: "My Handwriting";
      src: url(../assets/fonts/Lea_handwriting-Regular.ttf);
}

body, body.dark{
  margin: 0;
  padding: 0;
  background-origin: top left;
  background-size: cover;
  background-repeat: repeat;
  background-attachment: scroll;
  font-family: 'My Handwriting', 'Comic Sans MS';
  font-size: 17px;
  transition: background-color 0.6s ease, color 0.6s ease, background-image 0.6s ease;
  
   display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

body {
      
      background-color: #faf0cf;
      background-image: url(../assets/images/background_light.webp);
      color: #5a4174;
    }

body.dark{
      background-color: #414148;
      background-image: url(../assets/images/background_dark.webp);
      color: #ffec9d;
}

a{
  color: #ff7cc8;
  text-decoration: none;
  transition: filter 0.4s ease;
}

a:hover{
  filter:drop-shadow(0px 0px 4px #3df5ff) drop-shadow(0px 0px 2px #ffffff);
}

.img-dark {
  display: none;
}
body.dark .img-light {
  display: none;
}
body.dark .img-dark {
  display: block;
}

.img-light,
.img-dark {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


.content, body.dark .content {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 90vh;
  align-items: center;
  text-align: center;
  background-image: none;
  filter: none;
  }

.image-layer {
  position: absolute;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}



.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.title{
      font-size: 40px;
      color:#ffc3e6;
      filter: drop-shadow(1.5px 1.5px #ff00f5) drop-shadow(-1.5px -1.5px #52f5ff);
}

h4{
                color: #a90cd8;
            }
            
            h5{
                color: #ff00f5;
            }
            
            .link{
                transition: transform 0.3s ease, filter 0.3s ease;
                cursor: pointer;
            }
            
            .link:hover{
                filter: drop-shadow(0px 0px 2px #fffffffc) drop-shadow(0px 0px 3px #56b8fffc);
                transform: scale(1.1) rotate(-2deg);
            }
            
            body.dark .link:hover{
                filter: drop-shadow(0px 0px 2px #fff86ffc) drop-shadow(0px 0px 3px #1e0054fc);
            }
            
            body.dark h4{
                color: #80f7ff;
            }
            
             body.dark h5{
                color: #ffc3e6;
            }

.sticker {
  position: relative;
  display: inline-block;
  font-weight: bold;
  color: #ff7cc8;
  rotate:-3deg;
  font-size: 17px;
}

.sticker::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-stroke: 5px white;
  color: transparent; /* nur der Stroke sichtbar */
  z-index: -1; /* unter dem echten Text */
}

.bgelements{
                display: flex;
                flex-direction: column;
                align-items: center;
                align-content: center;
                justify-content: center;
                position: absolute;
                overflow: hidden;
                pointer-events: none;
                z-index: -1;
                width: 100vw;
                min-height: 100vh;
                height: 100%;
            }

.interactive-image {
  position: absolute;
  transition: transform 0.3s ease;
  z-index: 0;
  pointer-events: all;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.17));
}

.interactive-image:hover {
  transform: scale(1.1);
}

/* Gemeinsame Styles für die Sprechblase */
.interactive-image::after {
  content: attr(data-text);
  position: absolute;
  background: #fff8dc;
  color: #5a4174;
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: 10px;
  min-width: 100px;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 2px 5px #00000033;
  z-index: 5;
  text-align: center;
  word-wrap: break-word;
  display: inline-block;
}



/* Position und Pfeil für TOP */
.interactive-image[data-tooltip-position="top"]::after {
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
}

.interactive-image[data-tooltip-position="top"]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-15px);
}

/* Position und Pfeil für BOTTOM */
.interactive-image[data-tooltip-position="bottom"]::after {
  top: 70%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
}

.interactive-image[data-tooltip-position="bottom"]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(15px);
}

/* Position und Pfeil für LEFT */
.interactive-image[data-tooltip-position="left"]::after {
  right: 70%;
  top: 50%;
  transform: translateX(-10px) translateY(-50%);
}

.interactive-image[data-tooltip-position="left"]:hover::after {
  opacity: 1;
  transform: translateX(-15px) translateY(-50%);
}

/* Position und Pfeil für RIGHT */
.interactive-image[data-tooltip-position="right"]::after {
  left: 70%;
  top: 50%;
  transform: translateX(10px) translateY(-50%);
}

.interactive-image[data-tooltip-position="right"]:hover::after {
  opacity: 1;
  transform: translateX(15px) translateY(-50%);
}

/* width */
::-webkit-scrollbar {
  width: 18px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px #ff00f5; 
  border-radius: 15px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ffc3e6; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #fd8ecf; 
}