/* Seiten-Reset & sanftes Scrollen */
html, body { height: 100%; margin: 0; }
html { scroll-behavior: smooth; }

/* Der Scroll-Container: eine volle Viewport-Höhe mit eigenem Scrolling */
.scroll-container {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory; /* snappt auf jede Section */
}

/* Jede Section füllt den Bildschirm genau aus */
.section {
  position: relative;
  height: 100vh;              /* genau eine Bildschirmhöhe */
  height: 100dvh;
  scroll-snap-align: start;   /* Snap-Punkt am Section-Beginn */

  /* Hintergrundbild pro Section – via CSS-Variable --bg setzbar */
  background-image: var(--bg, none);
  background-size: cover;     /* Bild füllt die Section aus */
  background-position: center;
  background-repeat: no-repeat;
}

/* (Optional) dunkle Overlay-Schicht für bessere Lesbarkeit des Inhalts */
.section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Inhalt, der vor dem Overlay liegt */
.section .content {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: clamp(1rem, 3vw, 3rem);
}

/* Einfache Headline/Typo */
h1, h2, p { margin: 0.25em 0; }
h1 { font-size: clamp(2rem, 6vw, 4rem); }
h2 { font-size: clamp(1.25rem, 3.5vw, 2rem); opacity: 0.9; }
p  { font-size: clamp(1rem, 2.5vw, 1.25rem); opacity: 0.9; }

/* (Optional) fixe Mini-Navi zum direkten Springen zwischen Sections */
.dots {
  position: fixed;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 0.5rem;
  z-index: 10;
}
.dots a {
  width: 10px; height: 10px; border-radius: 999px; display: block;
  background: #cfcfcf; opacity: 0.7; transition: opacity .2s, transform .2s;
}
.dots a:hover { opacity: 1; transform: scale(1.15); }

.dots a.active {
  background: #fff;        /* Farbe des aktiven Dots */
  opacity: 1;
  transform: scale(1.1);   /* leicht größer als die inaktiven */
}

.fg-image {
    display: block;
    margin: 1rem auto;      /* horizontal zentriert */
    max-width: 85%;         /* begrenzt die Breite */
    max-height: 85vh;       /* Bild niemals höher als 95% der Bildschirmhöhe */
    height: auto;           /* behält Seitenverhältnis */
}

.fg-image.smaller{
  max-width: 65%;
}

h1 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #f1ca91;
    margin: 15px;
}

.unit{
    color: #f1ca91;
    font-size: 40px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    .label {
        font-size: 15px;
    }
}

.card {
padding:1.25rem; width:min(92vw,720px);
position:relative;
z-index:1;
text-align:center;
overflow:hidden;
margin:2rem 0;
margin-left: 80px;
margin-top: 200px;


    .timer {
        align-items:center;
        margin-left: 20px;
    }

}

.content.bottom-left{
    justify-content: flex-start; /* nach links */
    align-items: flex-end;       /* nach unten */

    img{
      margin-right: 150px;
    }
}

/* (Optional) einfache Footer-Leiste am Seitenende */
footer {
  position: sticky;
  bottom: 0;
  background: rgba(0,0,0,.5);
  color: #fff;
  padding: .5rem 1rem;
  font-size: 0.9rem;
  backdrop-filter: blur(6px);
}

canvas#fireworks{
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
  }

  button {
    display: flex;
    align-items: center;
    gap: 8px; /* Abstand zwischen Bild und Text */
    padding: 10px 16px;
    background-color: #1f1f1f;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    justify-content: center;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  button img {
    width: 20px;
    height: 20px;
  }

  button:hover {
    background-color: #f1ca91;
  }

  .spotify-div {
    display:flex;
    justify-content: center;
  }