h1 {
    font-family: "Spicy Rice", serif;
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 4rem);
    font-style: normal;
    color: rgb(120, 0, 17);
}

h2 {
    font-family: "Spicy Rice", serif;
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3rem);
    font-style: normal;
    color: rgb(120, 0, 17);
}

p {
  font-family: "Crimson Text", serif;
  font-weight: 600;
  font-style: normal;
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  color: rgb(120, 0, 17);
}

.bg-color {
    background-color: rgb(255, 221, 0) !important;
}
.bg-color_secondary {
    background-color: rgb(120, 0, 17) !important;
}

.navbar .nav-link{
    font-family: "Young Serif", serif;
    color: rgb(255, 255, 255, 0.8) !important;
}

.young-serif-regular {
  font-family: "Young Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.spicy-rice-regular {
  font-family: "Spicy Rice", serif;
  font-weight: 400;
  font-style: normal;
}

.hero {
  height: 100vh;
  display: flex;              /* 🔥 wichtig */
  flex-direction: column;
  align-items: center;        /* vertikal */
  justify-content: center;    /* horizontal */
  overflow: hidden;
}

.title-img {
  width: 100%;
  max-width: 800px;
  object-fit: cover;   /* füllt den Bereich schön aus */
  display: block;
  
}

.neon {
  animation: neonFlicker 5s infinite;
  /* filter: drop-shadow(0 0 15px rgb(255, 255, 255)); */
}


@keyframes neonFlicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: 1;
  }

  20%, 24%, 55% {
    opacity: 0.1;
  }

  21%, 23% {
    opacity: 0.4;
  }
}

.border {
    border: 2px solid rgb(120, 0, 17) !important;
    border-radius: 10px;
}

.icon {
    font-size: 2em;
}

td {
    font-family: "Crimson Text", serif;
    font-weight: 600;
    font-style: normal;
    font-size: clamp(1.1rem, 2.5vw, 2rem);
}

table.table tbody tr td {
    background-color: rgb(255, 221, 0);
    color: rgb(120, 0, 17);
}

.fade-img {
    transition: opacity 0.6s ease;
    opacity: 1;
    display: block;
    width: 100%;
  }

.fade-out {
    opacity: 0;
}
.img-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-height: 400px;
  max-width: 240px;
  aspect-ratio: 3 / 5; /* oder 1 / 1 oder 16 / 9 */

}

  .img-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;


    opacity: 0;
    transition: opacity 0.8s ease-in-out;
  }

  .img-layer.active {
    opacity: 1;
    z-index: 1;
  }