:root {
  --night-top: #06111f;
  --night-mid: #102f4d;
  --night-low: #36516a;
  --ink: #f2ead9;
  --muted: #c9c5bb;
  --gold: #d1aa5c;
  --gold-soft: rgba(209, 170, 92, .28);
  --panel: rgba(5, 11, 17, .70);
  --panel-strong: rgba(5, 10, 15, .88);
  --line: rgba(226, 195, 127, .22);
  --shadow: 0 24px 80px rgba(0, 0, 0, .38);
  --max-width: 980px;
  --scroll-progress: 0;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #06111f;
}

body {
  margin: 0;
  color: var(--ink);
  background: #06111f;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.72;
}

a {
  color: #e0bd73;
  text-decoration-color: rgba(224, 189, 115, .45);
  text-underline-offset: .2em;
}

a:hover {
  color: #f0d18f;
}

img {
  display: block;
  max-width: 100%;
}

/* ----- Fixed atmospheric scene ----- */

.scene {
  position: fixed;
  inset: 0;
  /* z-index: -10; */
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 12%, rgba(178, 111, 88, .15), transparent 18rem),
    radial-gradient(circle at 22% 28%, rgba(91, 148, 181, .16), transparent 24rem),
    linear-gradient(180deg, var(--night-top) 0%, var(--night-mid) 55%, var(--night-low) 100%);
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0 46%, rgba(9, 26, 34, .08) 66%, rgba(1, 8, 9, .34) 100%);
}

.stars {
  position: absolute;
  inset: -8vh 0 0;
  transform: translateY(calc(var(--scroll-progress) * -8vh));
  opacity: calc(1 - var(--scroll-progress) * .48);
  transition: opacity .08s linear;
}

.star {
  position: absolute;
  width: var(--size);
  height: var(--size);
  left: var(--x);
  top: var(--y);
  border-radius: 50%;
  background: var(--star-color);
  box-shadow: 0 0 calc(var(--size) * 4) var(--glow);
  opacity: var(--opacity);
  animation: twinkle var(--speed) ease-in-out infinite alternate;
  animation-delay: var(--delay);
}

@keyframes twinkle {
  from { opacity: calc(var(--opacity) * .55); transform: scale(.84); }
  to   { opacity: var(--opacity); transform: scale(1.08); }
}

.sky-glow {
  position: absolute;
  inset: auto -10vw -22vh;
  height: 62vh;
  background: radial-gradient(ellipse at center, rgba(111, 159, 174, .17), transparent 66%);
  transform: translateY(calc(var(--scroll-progress) * -8vh));
}

.forest {
  position: absolute;
  left: -2vw;
  bottom: -4vh;
  width: 104vw;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform;
}

/* .forest--back { */
  /* height: 72vh; */
  /* opacity: .78; */
  /* background-image: url("../images/forest-back.svg"); */
  /* transform: translateY(calc((1 - var(--scroll-progress)) * 58vh)); */
  /* filter: blur(.15px); */
/* } */

/* .forest--front { */
  /* height: 76vh; */
  /* background-image: url("../images/forest-front.svg"); */
  /* transform: translateY(calc((1 - var(--scroll-progress)) * 82vh)); */
/* } */

/* .mist { */
  /* position: absolute; */
  /* left: -10vw; */
  /* right: -10vw; */
  /* bottom: 18vh; */
  /* height: 24vh; */
  /* opacity: calc(.05 + var(--scroll-progress) * .28); */
  /* background: */
    /* radial-gradient(ellipse at 35% 50%, rgba(194, 217, 219, .22), transparent 45%), */
    /* radial-gradient(ellipse at 70% 65%, rgba(190, 212, 218, .17), transparent 42%); */
  /* filter: blur(18px); */
  /* transform: translateY(calc((1 - var(--scroll-progress)) * 35vh)); */
/* } */

.forest--back {
  height: 72vh;
  opacity: .78;
  background-image: url("../images/forest-back.svg");
  transform: translateY(var(--forest-back-y, 58vh));
  filter: blur(.15px);
}

.forest--front {
  height: 76vh;
  background-image: url("../images/forest-front.svg");
  transform: translateY(var(--forest-front-y, 82vh));
}

.mist {
  position: absolute;
  left: -10vw;
  right: -10vw;
  bottom: 18vh;
  height: 24vh;

  opacity: calc(.05 + var(--scroll-progress) * .28);

  background:
    radial-gradient(
      ellipse at 35% 50%,
      rgba(194, 217, 219, .22),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 70% 65%,
      rgba(190, 212, 218, .17),
      transparent 42%
    );

  filter: blur(18px);
  transform: translateY(var(--mist-y, 35vh));
}

/* ----- Page / panel ----- */

.page {
  width: min(var(--max-width), calc(100% - 2rem));
  margin: 0 auto;
  padding: 5vh 0 12vh;
}

.panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(6, 12, 19, .76), rgba(5, 10, 15, .68)),
    radial-gradient(circle at 50% 0%, rgba(127, 157, 174, .08), transparent 32rem);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(12px) saturate(.9);
  backdrop-filter: blur(12px) saturate(.9);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(219, 188, 116, .035), transparent);
}

.site-header {
  position: relative;
  /* padding: 3.8rem 3.5rem 2.4rem; */
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.streaminglinks {
  position: relative;
  /* padding: 3.8rem 3.5rem 2.4rem; */
  text-align: center;
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.logo {
  border-bottom: 1px solid var(--line);
  background-image: url("../images/background-header.jpg");
  filter: brightness(80%);
}

.wordmark {
  margin: 0;
  color: #e1bd72;
  font-size: clamp(3.5rem, 11vw, 7rem);
  line-height: .92;
  font-weight: 400;
  letter-spacing: .045em;
  text-shadow: 0 0 26px rgba(198, 154, 75, .16);
}

.tagline {
  margin: .9rem 0 0;
  color: #d9d1bf;
  font-size: clamp(1rem, 2.1vw, 1.22rem);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.nav {
  /* margin-top: 1rem; */
  /* margin-bottom: 1rem; */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem 1.25rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav a {
  color: #cfc8ba;
  text-decoration: none;
  padding: 15px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.nav a:hover {
  color: #efd395;
  background-color: rgba(255, 255, 255, .05);
  border-radius: 10px;
}

.hero {
  /* min-height: min(64vh, 610px); */
  display: grid;
  place-items: center;
  padding: 2rem 4rem;
  text-align: center;
}

.hero__inner {
  max-width: 740px;
}

.hero__eyebrow {
  color: var(--gold);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* font-size: .78rem; */
  font-size: 1.5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* .hero h1 { */
  /* margin: .65rem 0 1.25rem; */
  /* font-size: clamp(2.2rem, 5vw, 3rem); */
  /* font-weight: 400; */
  /* line-height: 1.08; */
/* } */

.hero h1 {
  margin: 0 auto;
  color: #ddd7cb;
  font-size: clamp(1.05rem, 2.1vw, 1.28rem);
  font-weight: 400;
  line-height: 1.72;
}

.hero p {
  margin: 0 auto;
  color: #ddd7cb;
  font-size: clamp(1.05rem, 2.1vw, 1.28rem);
}

.scroll-cue {
  /* margin-top: 2.5rem; */
  margin-top: 1rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  /* gap: .35rem; */
  color: #bdb4a3;
  font-family: system-ui, sans-serif;
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.scroll-cue::after {
  content: "↓";
  margin-top: -1rem;
  font-size: 2rem;
  color: var(--gold);
  animation: drift 1.5s ease-in-out infinite alternate;
}


@keyframes drift {
  to { transform: translateY(.35rem); }
}

.section {
  padding: 5rem 4rem;
  border-top: 1px solid var(--line);
}

.section__kicker {
  margin-bottom: .45rem;
  color: var(--gold);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.section h2 {
  margin: 0 0 1.25rem;
  color: #f3ead7;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 400;
  line-height: 1.08;
}

.section p {
  color: var(--muted);
  font-size: 1.06rem;
}

.album {
  display: grid;
  grid-template-columns: minmax(230px, .75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 4.8rem);
}

.album--reverse {
  grid-template-columns: minmax(0, 1.25fr) minmax(230px, .75fr);
}

.album--reverse .album__cover {
  order: 2;
}

.album__cover > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 13px;
  border: 1px solid rgba(226, 195, 127, .19);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .34);
}

.album__meta {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
}

.album__meta .button {
  flex: 0 0 auto;
}

.album__meta .audio-preview {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}

.album__meta .audio-preview audio {
  display: block;
  width: 100%;
  height: 42px;
}

.button {
  display: inline-block;
  padding: .7rem 1rem;
  border: 1px solid rgba(218, 178, 95, .48);
  border-radius: 999px;
  color: #ead6a6;
  text-decoration: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.button:hover {
  background: rgba(218, 178, 95, .09);
}

.note {
  margin-top: 1.25rem;
  padding: .9rem 1rem;
  border-left: 2px solid rgba(218, 178, 95, .55);
  color: #aca79f;
  background: rgba(255, 255, 255, .025);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .82rem;
}

.contact {
  text-align: center;
}

.contact p {
  /* max-width: 640px; */
  margin-left: auto;
  margin-right: auto;
}

.socials {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.site-footer {
  padding: 2.1rem 3rem 2.4rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  color: #9f9a91;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .78rem;
}

.site-footer a {
  color: #b8b0a2;
}

/* Reduced motion: show forest fully and disable animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stars,
  .forest,
  .mist,
  .sky-glow {
    transform: none !important;
    animation: none !important;
  }
  .forest--back,
  .forest--front {
    transform: translateY(0) !important;
  }
  .star,
  .scroll-cue::after {
    animation: none !important;
  }
  .photo-carousel__track {
    animation: none !important;
  }
}

.streamingbuttoncontainer {
  margin-top: 1rem;
  display: flex;
  justify-content: center; /* Centers images horizontally */
  align-items: center;     /* Centers images vertically */
  gap: 50px;               /* Optional: adds space between images */
}

.streamingbutton {
  max-width: 150px;
  max-height: 48px;
}

.audio-preview {
  margin-top: 1.5rem;
  width: 100%;
}

.audio-preview audio {
  display: block;
  width: 100%;
  height: 42px;
  color-scheme: dark;
}

.photo-carousel {
  --visible: 4;
  --gap: 0.4rem;
  width: 100%;
  margin-top: 0.8rem;
  overflow: hidden;
  border-radius: 8px;
  /* Damit 100cqw unten genau der Breite des Carousels entspricht */
  container-type: inline-size;
}

.photo-carousel__track {
  display: flex;
  width: max-content;
  animation: carousel-scroll 25s linear infinite;
}

.photo-carousel__group {
  display: flex;
  flex: 0 0 auto;
  gap: var(--gap);
  /* Abstand zwischen Ende der ersten und Anfang der zweiten Gruppe */
  padding-right: var(--gap);
}

.photo-carousel__group img {
  flex: 0 0 auto;
  width: calc(
    (100cqw - (var(--visible) - 1) * var(--gap))
    / var(--visible)
  );
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 5px;
  opacity: 0.85;
  filter: saturate(.75) brightness(.85);
}

@keyframes carousel-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}


.socials__instagram {
  margin-bottom: 2rem;
}

.socials__instagram a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;

  color: var(--ink);
  text-decoration: none;
}

.socials__instagram img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.socials__partners {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}

.socials__partners img {
  display: block;
  width: auto;
  height: 55px;
  object-fit: contain;
  filter: invert(1);
  opacity: .33;
}

.nav-toggle {
  display: none;
}



@media (max-width: 760px) {
  .page {
    width: min(100% - 1rem, var(--max-width));
    padding-top: .5rem;
  }

  .panel {
    border-radius: 13px;
  }

  .site-header {
    padding: 2.7rem 1.35rem 1.8rem;
  }

  .tagline {
    letter-spacing: .14em;
  }

  /* .hero { */
    /* min-height: 72vh; */
    /* padding: 4rem 1.5rem; */
  /* } */
  
  .hero {
	  width: 100%;
	  min-width: 0;
	  padding: 3rem 1.5rem;
	}

	.hero__inner {
	  width: 100%;
	  min-width: 0;
	}

  .section {
    padding: 3.7rem 1.5rem;
  }

  .album,
  .album--reverse {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .album--reverse .album__cover {
    order: 0;
  }

  .album__cover {
    max-width: 430px;
    margin: 0 auto;
  }
  
  .album__meta {
    flex-wrap: wrap;
  }

  .album__meta .audio-preview {
    flex-basis: 100%;
  }

  .site-footer {
    padding: 1.7rem 1.5rem 2rem;
  }

  .forest {
    left: -20vw;
    width: 140vw;
  }
  
  .forest--back,
  .forest--front,
  .mist,
  .sky-glow,
  .stars {
    transform: none !important;
  }
  
  .photo-carousel {
    --visible: 2 !important;
  }
  
  .socials__partners {
    gap: 1.5rem;
  }

  .socials__partners img {
    height: 40px;
  }
  
  .nav-toggle {
	  display: inline-block;

	  /* margin: 1rem auto; */
	  padding: .7rem 1.2rem;

	  border: 1px solid rgba(218, 178, 95, .48);
	  border-radius: 999px;

	  background: transparent;
	  color: #ead6a6;

	  font-family: system-ui, sans-serif;
	  font-size: .78rem;
	  letter-spacing: .12em;
	  text-transform: uppercase;

	  cursor: pointer;
	}

	.nav {
	  display: none;
	  flex-direction: column;
	  align-items: center;

	  gap: 0;
	  padding-bottom: 1rem;
	}

	.nav.nav--open {
	  display: flex;
	}

	.nav a {
	  width: 100%;
	  padding: .8rem 1rem;
	  text-align: center;
	}
	
	.streamingbuttoncontainer {
	  width: 100%;
	  display: grid;

	  grid-template-columns: repeat(2, minmax(0, 1fr));

	  gap: 1rem;
	  justify-items: center;
	  align-items: center;
	}

	.streamingbuttoncontainer a {
	  display: flex;
	  justify-content: center;
	  align-items: center;

	  width: 100%;
	  min-width: 0;
	}

	.streamingbutton {
	  width: auto;
	  max-width: min(130px, 100%);
	  max-height: 42px;
	}
}