@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==== Custom Styles ==== */



/* Theme-Icon einfärben */
#theme-icon {
  filter: invert(0); /* Standard: dunkel anzeigen */
  transition: filter 0.3s ease;
}

/* Im Dark Mode: hell darstellen */
.dark #theme-icon {
  filter: invert(1);
}

/* Hide scrollbar on thumbnails */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Aktives Thumbnail: Zoom-Effekt */
.thumb-active {
  transform: scale(1.25) rotateX(0deg);
  box-shadow: 0 0 12px rgba(255, 215, 130, 0.55);
  transition: all 0.3s ease;
}

/* Desktop-Wrapper für den Portfolio Slider */
@media (min-width: 1024px) {
  .portfolio-wrapper {
    max-width: 1200px;   /* kannst du anpassen: 1100 / 1200 / 1400 */
    margin-left: auto;
    margin-right: auto;
    position: relative;

    border-radius: 12px; /* optional: schöner Look */
    overflow: hidden;    /* lässt Hintergründe sauber clipped sein */
  }
}

@media (min-width: 1024px) {
  #portfolio-thumbs {
    justify-content: center;
    max-width: 1200px; /* gleiche Breite wie Slider */
    margin-left: auto;
    margin-right: auto;
  }
}