@tailwind base;

@tailwind components;

@tailwind utilities;

@font-face {
  font-family: "Inter";

  font-style: normal;

  font-weight: 400;

  src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhiI2B.woff2)
    format("woff2");

  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

/* cyrillic */

@font-face {
  font-family: "Inter";

  font-style: normal;

  font-weight: 400;

  src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZthiI2B.woff2)
    format("woff2");

  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */

@font-face {
  font-family: "Inter";

  font-style: normal;

  font-weight: 400;

  src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZNhiI2B.woff2)
    format("woff2");

  unicode-range: U+1F00-1FFF;
}

/* greek */

@font-face {
  font-family: "Inter";

  font-style: normal;

  font-weight: 400;

  src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZxhiI2B.woff2)
    format("woff2");

  unicode-range: U+0370-03FF;
}

/* vietnamese */

@font-face {
  font-family: "Inter";

  font-style: normal;

  font-weight: 400;

  src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZBhiI2B.woff2)
    format("woff2");

  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */

@font-face {
  font-family: "Inter";

  font-style: normal;

  font-weight: 400;

  src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZFhiI2B.woff2)
    format("woff2");

  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
  font-family: "Inter";

  font-style: normal;

  font-weight: 400;

  src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2)
    format("woff2");

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

html {
  background-color: #0c0c0c;

  overflow: auto;

  scroll-behavior: smooth;
}

body {
  /* background: #0C0C0C;

  background-color: #0C0C0C!important;

  color: white; */

  scroll-behavior: smooth;
}

.h-screen {
  height: 100vh;

  min-height: -webkit-fill-available;

  color: #161b1cff;
}

.artists {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  list-style: none;

  margin: 3rem;
}

/*.text-ocean {

  --tw-text-opacity: 1;

  color: rgb(0 224 255 / var(--tw-text-opacity));

}

.text-ocean-700 {

  --tw-text-opacity: 1;

  color: rgb(0, 179, 210 / var(--tw-text-opacity));

}*/

.headline-1 {
  font-size: 3rem;

  font-weight: 700;

  line-height: 1;
}

.headline-2 {
  font-size: 1.125rem;

  /*font-weight: 700;*/

  line-height: 1.75rem;
}

.max-w-headline {
  padding-left: 2rem;

  padding-right: 2rem;
}

.gap-\[1px\] {
  gap: 1px;
}

.mx-auto {
  margin-left: auto;

  margin-right: auto;
}

@layer utilities {
  .clip-square {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

.header-image {
  position: absolute;

  width: 100%;

  height: 100vh;

  top: 0;

  left: 0;

  filter: grayscale(80%);

  opacity: 70%;
}

.default-header.full-height {
  padding: 0;

  overflow: hidden;

  min-height: 100vh;

  /* mobile viewport bug fix */

  min-height: -webkit-fill-available;
}

.default-header {
  padding-top: calc(90px + 10vw);

  text-align: center;

  padding-bottom: 8vw;
}

.section {
  /*float: left;

  width: 100%;*/

  position: relative;

  padding-top: 10vw;

  padding-bottom: 10vw;
}

header {
  display: block;
}

#desktoplogo {
  transition: transform 0.4s, -webkit-clip-path 0.4s;

  transition: clip-path 0.4s, transform 0.4s;

  transition: clip-path 0.4s, transform 0.4s, -webkit-clip-path 0.4s;
}

#navbar #desktoplogo {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

#navbar.scrolled #desktoplogo {
  --tw-translate-y: 0.6rem;

  -webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 0 70%) !important;

  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 60%) !important;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#externalnavbar #desktoplogo {
  --tw-translate-y: 0.6rem;

  -webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 0 70%) !important;

  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 60%) !important;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scrolled {
  backdrop-filter: blur(24px);
  --tw-backdrop-blur: blur(24px);
  background-color: #0c0c0ce1;
}

.not-scrolled {
  background-color: transparent;
}

.artistbox {
  transform: scale(1);

  clip-path: circle(50%);

  transition: all 0.5s ease-in-out;
}

.artistbox:hover {
  transform: scale(1.03);

  clip-path: circle(75%);

  transition: all 0.5s ease-in-out;
}

.splide {
  position: relative;

  visibility: visible;
}

.splide__arrows {
  display: none !important;
}

.splide__track {
  cursor: move;

  cursor: grab;

  cursor: -webkit-grab;
}

.splide__track {
  overflow: hidden;

  position: relative;

  z-index: 0;
}

.splide__track--draggable {
  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  user-select: none;
}

.splide .splide__pagination {
  margin-top: 2rem;

  position: relative;
}

.splide__pagination {
  align-items: center;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  margin: 0;

  pointer-events: none;
}

.splide__pagination__page.is-active {
  background-color: #fff !important;

  transform: scale(1) !important;
}

.splide .splide__pagination__page {
  background: #95a5a6;

  border: 0;

  border-radius: 50%;

  cursor: pointer;

  display: inline-block;

  height: 12px;

  margin: 0 0.1rem;

  padding: 0;

  position: relative;

  transition: background-color 0.2s ease, color 0.2s ease;

  width: 12px;
}

menu,
ol,
ul {
  list-style: none;

  margin: 0;

  padding: 0;
}

.splide__pagination li {
  display: inline-block;

  line-height: 1;

  list-style-type: none;

  margin: 0;

  pointer-events: auto;
}

/*.logofront{

  position: fixed;

  left: 50%;

  top: 50%;

  transform: translate(-50%,-50%);

  text-align: center;

  z-index: 1000;

}

.logofront p {

  font-family: 'Inter';

  font-weight: bold;

  color: #fff;

  position: absolute;

  left: 50%;

  top: 67%;

  transform: translate(-50%,-50%);

}*/

.logofront {
  position: fixed;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  z-index: 1000;

  display: flex;

  flex-direction: column; /* Ordnet die Elemente vertikal an */

  align-items: center; /* Zentriert die Elemente horizontal */

  width: 90%; /* Gibt der Box eine max. Breite, kann angepasst werden */
}

.logofront img {
  max-width: 50vw; /* Stellt sicher, dass das Logo responsive ist */

  height: auto;
}

.logofront p {
  font-family: "Inter";

  font-weight: bold;
}

.soc {
  list-style: none; /* Entfernt die Listensymbole */

  padding: 0;

  display: flex;

  justify-content: center; /* Zentriert die Icons horizontal */
}

.soc li {
  /*margin: 0 10px; Fügt Abstand zwischen den Icons hinzu */
}

/* Stil für die Links und Icons könnte hier hinzugefügt werden */

.icon-insta {
  color: white; /* Beispiel für Farbanpassung */

  text-decoration: none; /* Entfernt Unterstreichung */
}

/* Weiterer Stil für Responsiveness, Farben usw. kann hier hinzugefügt werden */

.splidewrapper {
  border-radius: 1rem 1rem 1rem 1rem;

  overflow: hidden;

  position: relative;
}

.soc {
  display: flex;

  text-align: center;

  justify-content: center;

  align-self: center;

  list-style: none;

  flex-direction: row;
}

.soc li {
  /*display: inline-block;

  margin: 1.2rem;*/
}

.soc a,
.soc svg {
  display: block;
}

.soc a {
  height: 5.6rem;

  width: 5.6rem;
}

.icon:hover i {
  transform: scale(1.3);
}

.icon:hover:before {
  top: -10%;

  left: -10%;
}

.icon-youtube {
  width: 90px;

  height: 90px;

  background-color: rgb(53, 53, 53);

  position: relative;

  margin: 10px;

  border-radius: 30%;

  box-shadow: 0 5px 15px -5px #00000070;

  color: aliceblue;

  overflow: hidden;
}

.icon-youtube:before {
  content: "";

  height: 120%;

  width: 120%;

  background: linear-gradient(to right, #e52d27, #b31217);

  position: absolute;

  top: 90%;

  left: -110%;

  transform: rotate(45deg);

  transition: all 0.3s;
}

.icon-youtube i {
  font-size: 45px;

  line-height: 90px;

  transition: all 0.3s;
}

.icon-youtube:hover i {
  transform: scale(1.3);
}

.icon-youtube:hover:before {
  top: -10%;

  left: -10%;
}

.icon-tiktok {
  width: 90px;

  height: 90px;

  background-color: rgb(53, 53, 53);

  position: relative;

  margin: 10px;

  border-radius: 30%;

  box-shadow: 0 5px 15px -5px #00000070;

  color: aliceblue;

  overflow: hidden;
}

.icon-tiktok:before {
  content: "";

  height: 120%;

  width: 120%;

  background: linear-gradient(to right, #ff0050, #0c0c0c42, #00f2ea);

  position: absolute;

  top: 90%;

  left: -110%;

  transform: rotate(45deg);

  transition: all 0.3s;
}

.icon-tiktok i {
  font-size: 45px;

  line-height: 90px;

  transition: all 0.3s;
}

.icon-tiktok:hover i {
  transform: scale(1.3);
}

.icon-tiktok:hover:before {
  top: -10%;

  left: -10%;
}

.icon-insta {
  width: 90px;

  height: 90px;

  background-color: rgb(53, 53, 53);

  position: relative;

  margin: 10px;

  border-radius: 30%;

  box-shadow: 0 5px 15px -5px #00000070;

  color: aliceblue;

  overflow: hidden;
}

.icon-insta:before {
  content: "";

  height: 120%;

  width: 120%;

  background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);

  position: absolute;

  top: 90%;

  left: -110%;

  transform: rotate(45deg);

  transition: all 0.3s;
}

.icon-insta i {
  font-size: 45px;

  line-height: 90px;

  transition: all 0.3s;
}

.icon-insta:hover i {
  transform: scale(1.3);
}

.icon-insta:hover:before {
  top: -10%;

  left: -10%;
}

a {
  text-decoration: none !important;
}

/*a:hover {

  font-weight: 500;

  transition: all ease-in-out .2s;

  text-decoration: none;

}*/

nav.a:hover {
  font-weight: 500;

  color: #00e0ff;

  transition: all ease-in-out 0.2s;

  text-decoration: none;
}

.fab {
  color: white !important;
}

.bg-midnight {
  --tw-bg-opacity: 1;

  background-color: rgb(12 12 12 / var(--tw-bg-opacity));
}

.bg-light {
  --tw-bg-opacity: 1;

  background-color: #1a1a1a;
}

.bg-transp {
  --tw-bg-opacity: 0;

  background-color: transparent !important;
}

.bg-\[\#101010\] {
  --tw-bg-opacity: 1;

  background-color: rgb(16 16 16 / var(--tw-bg-opacity));
}

.bg-artist {
  background: linear-gradient(
    0deg,
    hsl(198 96% 50% / 0.9) 0,
    hsl(5 97% 63% / 0) 100%
  );
}

.bg-gray {
  background: linear-gradient(
    0deg,
    hsl(0 0% 0% / 0.7) 0,
    hsl(0 0% 0% / 0) 100%
  );
}

.bg-\[\#00E0FF\],
.bg-ocean {
  --tw-bg-opacity: 1;

  background-color: rgb(0 224 255 / var(--tw-bg-opacity));
}

.bg-green-700 {
  --tw-bg-opacity: 1;

  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
}

.bg-white {
  --tw-bg-opacity: 1;

  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-\[\#1B1B1B\] {
  --tw-bg-opacity: 1;

  background-color: rgb(27 27 27 / var(--tw-bg-opacity));
}

.bg-\[\#272727\] {
  background-color: #272727;
}

.bg-\[\#353535\] {
  background-color: #353535;
}

.artistdesc p a {
  --tw-text-opacity: 1;

  color: rgb(0 224 255 / var(--tw-text-opacity));
}

#home_counter .number {
  font-size: 3.75rem;

  font-weight: 700;

  line-height: 1;
}

.image-container {
  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%; /* Make sure the container takes up the full height */
}

.hamburger-icon {
  position: absolute;

  color: white;

  height: 60px;

  width: 60px;

  bottom: 0%;

  z-index: 1000;

  cursor: pointer;

  border-radius: 50%;

  transform: scale(1.4);

  transition: all 0.2s ease-in-out;

  background: rgba(0, 224, 255, 0);
}

.hamburger-icon:hover {
  cursor: pointer;

  transform: scale(1.6);

  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}

.icon-1,
.icon-2,
.icon-3 {
  color: white;

  position: absolute;

  left: 25%;

  top: 50%;

  width: 36px;

  height: 4px;

  background-color: #111 !important;

  transition: all 400ms cubic-bezier(0.84, 0.06, 0.52, 1.8);
}

.icon-1 {
  transform: translateY(-9px);

  animation-delay: 100ms;
}

.icon-3 {
  transform: translateY(9px);

  animation-delay: 250ms;
}

.hamburger-icon:hover {
  cursor: pointer;

  transform: scale(1.6);

  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}

.icon-1.a {
  transform: rotate(40deg);
}

.icon-3.b {
  transform: rotate(-40deg);
}

.icon-2.c {
  opacity: 0;
}

#mobile-toggle.opened span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#mobile-toggle.opened span:nth-child(2) {
  opacity: 0;
}

#mobile-toggle.opened span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.header__content {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  position: absolute;

  margin: auto;

  margin-left: 10%;

  top: 50%;

  transform: translateY(-50%);

  text-align: left;
}

.header__heading {
  line-height: 1.3;

  max-width: 36rem;

  text-shadow: 1px 1px 10px #0c0c0c;

  margin: 0 0 1rem;
}

.header__content h1 {
  max-width: 60rem;

  text-shadow: 1px 1px 10px #0c0c0c;

  margin: 0 0 1rem;
}

#mobilenav {
  opacity: 0;

  transform: translateY(-100%);

  visibility: hidden;

  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
}

#mobilenav.open {
  opacity: 1;

  transform: translateY(0);

  visibility: visible;

  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

.footerul li {
  margin-left: 0 !important;
}

/* Vor der Animation */

.artistbox:hover {
  -webkit-backface-visibility: hidden;

  -webkit-transform: translateZ(0) scale(1, 1);

  filter: none;
}

.arrow {
  animation: arrow-animation 2s infinite;
}

@keyframes arrow-animation {
  0% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(1rem);
  }

  100% {
    transform: translateY(0);
  }
}

.scroll-up-btn.show {
  bottom: 30px;

  opacity: 1;

  pointer-events: auto;
}

.scroll-up-btn {
  position: fixed;

  height: 45px;

  width: 42px;

  background: rgba(0, 224, 255, 0.5);

  right: 30px;

  bottom: 10px;

  text-align: center;

  line-height: 45px;

  color: #fff;

  z-index: 9999;

  font-size: 30px;

  border-radius: 6px;

  border-bottom-width: 2px;

  border-color: rgba(0, 224, 255, 0.2);

  cursor: pointer;

  opacity: 0;

  pointer-events: none;

  transition: all 0.3s ease;
}

.slideshow img {
  position: absolute;
}

.slideshow img:first-of-type {
  animation-delay: 4s;

  animation-duration: 1s;

  animation-name: fader;

  z-index: 20;
}

.slideshow img:nth-of-type(2) {
  z-index: 10;
}

.slideshow img:nth-of-type(n + 3) {
  display: none;
}

@keyframes fader {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

a.anchor {
  display: block;

  position: relative;

  top: -4rem;

  visibility: hidden;
}

.projectpost h2 {
  font-size: 2.25rem; /* 36px */

  line-height: 2.5rem; /* 40px */

  font-weight: bold;

  color: white;

  margin-bottom: 1rem;
}

.projectpost p {
  font-size: 1.25rem;

  line-height: 1.75rem;
}

.aboutdiv h2 {
  font-size: 2.25rem; /* 36px */

  line-height: 2.5rem; /* 40px */

  font-weight: bold;

  color: white;

  margin-bottom: 1rem;
}

.aboutdiv h3 {
  font-size: 2rem;

  line-height: 2.25rem;

  font-weight: bold;

  color: white;

  margin-bottom: 1rem;
}

.block-type-image img {
  height: 100%;

  width: 100%;

  object-fit: cover;
}

@media (max-width: 944px) {
  .aboutright {
    padding-left: 0rem;

    padding-right: 0rem;
  }

  .aboutleft {
    padding-left: 1rem;

    padding-right: 1rem;
  }

  .block-type-image img {
    height: 50vh;

    width: 100vw;

    object-fit: cover;

    border-radius: 0% !important;
  }
}

/* Etwas unauffälliger auf mobilen Screens */
@media (max-width: 768px) {
  .project-back-btn {
    top: 72px;
    left: 12px;
    padding: 0.5rem 0.9rem;
  }
}

.home-header {
  padding: 0;

  overflow: hidden;

  min-height: 100vh;

  /* mobile viewport bug fix */

  /* min-height: -webkit-fill-available; */
}

.honeypot {
  position: absolute;

  left: -9999px;
}

@media screen and (max-width: 768px) {
  .notification {
    width: 95%; /* Anpassung der Breite für kleinere Bildschirme */

    max-width: none; /* Aufheben der maximalen Breite */
  }

  .notification__icon {
    height: 1.375rem; /* Anpassung der Icon-Größe für kleinere Bildschirme */

    width: 1.375rem;

    margin-right: 0.25rem;
  }

  .notification__body {
    padding: 0.75rem 0.25rem; /* Anpassung des Inhalts-Paddings für kleinere Bildschirme */
  }
}

.notification {
  position: fixed;

  width: 90%;

  max-width: 740px;

  left: 0;

  right: 0;

  bottom: 1.5rem;

  margin-left: auto;

  margin-right: auto;

  border-radius: 0.375rem;

  background-color: #313e2c;

  color: #aaec8a;

  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);

  transform: translateY(1.875rem);

  opacity: 0;

  visibility: hidden;

  animation: fade-in 4.5s linear;
}

.notification__icon {
  height: 1.625rem;

  width: 1.625rem;

  margin-right: 0.25rem;
}

.notification__body {
  display: flex;

  flex-direction: row;

  align-items: center;

  padding: 1rem 0.5rem;
}

.notification__progress {
  position: absolute;

  left: 0.25rem;

  bottom: 0.25rem;

  width: calc(100% - 0.5rem);

  height: 0.2rem;

  transform: scaleX(0);

  transform-origin: left;

  background: linear-gradient(
    to right,

    #313e2c,
    #aaec8a
  );

  border-radius: inherit;

  animation: progress 4s 0.3s linear;
}

@keyframes fade-in {
  5% {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
  }

  95% {
    opacity: 1;

    transform: translateY(0);
  }
}

@keyframes progress {
  to {
    transform: scaleX(1);
  }
}

.max-w-content {
  max-width: 600px;

  padding-left: 1rem;

  padding-right: 1rem;
}

@media (min-width: 1024px) {
  .max-w-content {
    max-width: 920px;
  }
}

@media (min-width: 1280px) {
  .max-w-content {
    max-width: 1100px;
  }
}

@media (min-width: 1536px) {
  .max-w-content {
    max-width: 1400px;
  }
}

.max-w-content-small {
  padding-left: 2rem;

  padding-right: 2rem;
}

@media (min-width: 768px) {
  .max-w-content-small {
    padding-left: 3rem;

    padding-right: 3rem;
  }
}

.max-w-content-small {
  max-width: 1000px;
}

.aboutCol {
  cursor: pointer;

  opacity: 1;

  transition: opacity 0.3s ease;
}

.aboutCol.active {
  opacity: 1;
}

.aboutCol img {
  scale: 100%;

  transition: scale 0.3s ease;
}

.aboutCol.active img {
  scale: 110%;
}

.aboutCol .divider {
  background: linear-gradient(270deg, #4b504d 50%, #00e0ff 0) 100%;

  background-size: 210% 100%;

  height: 0.25rem;

  margin-top: 0.5rem;

  transition-duration: 0.3s;

  transition-property: all;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  width: 100%;
}

.aboutCol.active .divider {
  background-position: 0;
}

.aboutCol .textWrapper {
  opacity: 0;

  transition: opacity 0.5s ease;
}

.aboutCol.active .textWrapper {
  opacity: 100;
}

.aboutImage.active {
  opacity: 1;

  transition-duration: 0.3s;

  transition-timing-function: linear;
}

.aboutImage {
  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  border-radius: 1rem;

  opacity: 0;

  transition-duration: 0.3s;
}

/* Additional styles for responsiveness */

@media screen and (max-width: 768px) {
  .about-section {
    flex-direction: column;

    height: auto;
  }

  .aboutCol {
    margin-bottom: 20px;
  }
}

.projectImage:before {
  content: "";

  width: 100%;

  height: 100%;

  z-index: 1;

  position: absolute;

  top: 0;

  left: 0;
}

.projectImage {
  background-color: transparent !important;

  background: linear-gradient(to top, var(--tw-gradient-stops));
}

.projectImage div {
  filter: blur(2px) brightness(0.8);
}

.artistTextContainer {
  background-color: rgba(0, 0, 0, 0.2);

  transition: 0.2s ease-in-out;
}

.artistTextContainer:hover {
  background-color: rgba(0, 0, 0, 0);

  transition: 0.2s ease-in-out;
}

.artistTextContainer:hover h1 {
  /* -webkit-transform: scale(1.05); */

  transition: 0.2s ease-in-out;
}

.videoWrapper {
  position: relative;

  padding-bottom: 56.25%; /* 16:9 Aspect Ratio (höhe/breite * 100%) */

  display: flex;

  align-content: center;

  justify-content: center;
}

.videoWrapper iframe {
  transform: scale(100%);

  position: absolute;

  padding-top: 2em;

  border-radius: 20px 20px 20px 20px;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;
}

.swiper {
  overflow: hidden;
}

.swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.5);

  width: 12px;

  height: 12px;

  margin: 4px;

  transition: background-color 0.3s ease;
}

.swiper-pagination-bullet-active {
  background-color: #00e0ff;

  transform: scale(1.2);
}

.swiper-container {
  overflow-x: hidden;

  padding-bottom: 35px;
}

.swiper-container-horizontal > .swiper-pagination {
  position: absolute;

  bottom: 0;
}

.produkt-box {
  overflow: hidden; /* Hide overflow to maintain the box shape */

  margin: 10px;

  display: inline-block;

  position: relative;

  text-align: center;

  border-radius: 12px; /* Rounded corners for a smooth look */

  transition: transform 0.3s ease-in-out;
}

.produkt-box img {
  width: 100%;

  transition: transform 0.4s ease, box-shadow 0.4s ease;

  border-radius: 12px;
}

.produkt-box:hover img {
  transform: scale(1.1); /* Zoom effect on hover */

  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add shadow effect */
}

.produkt-box p {
  margin-top: 10px;

  font-size: 1.2em;

  color: #000;
}

.highlighter {
  position: absolute;

  top: 50%;

  left: 50%;

  width: calc(100% + 20px);

  height: calc(100% + 20px);

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  overflow: visible;
}

.dynamic-wrapper {
  overflow: visible;

  text-align: inherit;

  display: inline-block;

  position: relative;

  line-height: 120%;
}

#parallaxDesktop {
  overflow: hidden;
}

.parallaxWrapper .wrapper:first-of-type {
  animation-delay: 4s;

  animation-duration: 1s;

  animation-name: fader;

  z-index: 20;
}

.parallaxWrapper .wrapper:nth-of-type(2) {
  z-index: 10;
}

.parallaxWrapper .wrapper:nth-of-type(n + 3) {
  display: none;
}

@keyframes fader {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.parallaxWrapper .wrapper {
  transform: scale(1) translateZ(-0.1px);
}

.parallaxWrapper .background {
  animation-duration: 10s;

  animation-iteration-count: infinite;

  animation-name: bg;

  animation-timing-function: linear;
}

@keyframes bg {
  0% {
    transform: scale(1) translateZ(-0.1px);
  }

  to {
    transform: scale(1.1) translateZ(-0.1px);
  }
}

.h-clamp {
  height: clamp(300px, 20vw, 150px);
}