/* BE THERE – Musikvideo-Plakat auf der Startseite und Song-Badge im Hero.
   Eigene Datei, weil scss/ derzeit nicht fehlerfrei nach main.css kompiliert. */

.be-there-section {
  --bt-green: #4EB89D;
  --bt-blue: #004D87;
  --bt-red: #f00000;
  position: relative;
  container-type: inline-size;
  padding-top: clamp(2rem, 4vw, 5rem);
  overflow: hidden;
  /* wie die Textspalten in .editorial; die weissen Flaechen der Bodengrafik nehmen
     denselben Verlauf auf (linearGradient #be-there-verlauf im Template) */
  background: linear-gradient(to left, rgba(78, 184, 157, 0.2) 0%, rgba(78, 184, 157, 0) 100%);
}

/* Text links, Plakat rechts. Plakatbreite und rechter Rand in Abschnittsbreite (cqw), damit
   die Stuetzen zur gespiegelten Bodengrafik passen; der Text hat links denselben Abstand
   wie in den anderen Abschnitten (.two-col-wrapper) */
.be-there-wrapper {
  display: grid;
  grid-template-columns: 1fr 68.4cqw;
  column-gap: 4cqw;
  align-items: center;
  padding-left: 4rem;
  padding-right: 3.45cqw;
}

.be-there-text {
  order: -1;
}

@media (max-width: 1450px) {
  .be-there-wrapper {
    padding-left: 3rem;
  }
}

/* Plakatwand */
.be-there-billboard {
  position: relative;
}

.be-there-player {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 9;
  border: 4px solid var(--bt-green);
  background: #0d1416;
  overflow: hidden;
  scroll-margin-top: 120px;
}

.be-there-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0d1416;
}

.be-there-player:fullscreen .be-there-video {
  object-fit: contain;
}

/* Stützen bis zur Bodenlinie der Illustration (Grafik ist 20 % so hoch wie breit) */
.be-there-post {
  position: absolute;
  top: 100%;
  width: 2.5%;
  height: 19.7cqw;
  border-inline: 3px solid var(--bt-green);
  z-index: 0;
}

/* gespiegelt: die linke Stuetze steht jetzt rechts und umgekehrt */
.be-there-post--left { left: 83.3%; }
.be-there-post--right { left: 14.3%; }

.be-there-cloud {
  position: absolute;
  top: 7%;
  right: 100%;
  transform: scaleX(-1);
  width: 7%;
  fill: none;
  stroke: var(--bt-green);
  stroke-width: 4;
}

/* Die Bodenlinie der Grafik ersetzt die Trennlinie des nächsten Moduls */
.be-there-section + hr {
  display: none;
}

.be-there-ground {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* Großer Play-Button auf dem Standbild */
.be-there-bigplay {
  position: absolute;
  inset: 50% auto auto 50%;
  width: clamp(48px, 7cqw, 96px);
  height: clamp(48px, 7cqw, 96px);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform .2s ease;
}

.be-there-bigplay svg {
  display: block;
  width: 100%;
  height: 100%;
}

.be-there-bigplay:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.be-there-player.is-started .be-there-bigplay {
  display: none;
}

/* Ladeanzeige */
.be-there-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-family: exo-2-variable, sans-serif;
  font-size: clamp(14px, 1.2vw, 20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

.be-there-player.is-loading .be-there-loading {
  opacity: 1;
  visibility: visible;
}

.be-there-spinner {
  width: clamp(40px, 5cqw, 72px);
  aspect-ratio: 1;
  border: 5px solid rgba(255, 255, 255, .35);
  border-top-color: var(--bt-red);
  border-radius: 50%;
  animation: be-there-spin .8s linear infinite;
}

@keyframes be-there-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .be-there-spinner {
    animation-duration: 2.4s;
  }
}

.be-there-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Steuerleiste */
.be-there-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.25rem 1rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .45));
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.be-there-player.is-started .be-there-controls {
  opacity: 1;
  visibility: visible;
}

.be-there-player.is-playing.is-idle .be-there-controls {
  opacity: 0;
  visibility: hidden;
}

.be-there-controls button {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.be-there-controls svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.be-there-controls .be-there-toggle {
  background: var(--bt-red);
}

.be-there-controls .be-there-toggle svg {
  width: 20px;
  height: 20px;
}

.be-there-player .icon-pause,
.be-there-player .icon-muted,
.be-there-player.is-playing .icon-play,
.be-there-player.is-muted .icon-sound {
  display: none;
}

.be-there-player.is-playing .icon-pause,
.be-there-player.is-muted .icon-muted {
  display: block;
}

.be-there-controls button:focus-visible,
.be-there-bigplay:focus-visible,
.be-there-progress:focus-visible,
.be-there-cta:focus-visible,
.header-song-badge a:focus-visible,
.header-song-badge .song-badge-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--bt-blue, #004D87);
}

/* Fortschrittslinie: rote Linie mit rotem Punkt */
.be-there-progress {
  --bt-progress: 0%;
  flex: 1;
  height: 24px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.be-there-progress::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(to right, var(--bt-red) var(--bt-progress), rgba(255, 255, 255, .55) var(--bt-progress));
}

.be-there-progress::-moz-range-track {
  height: 3px;
  background: rgba(255, 255, 255, .55);
}

.be-there-progress::-moz-range-progress {
  height: 3px;
  background: var(--bt-red);
}

.be-there-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border: 0;
  border-radius: 50%;
  background: var(--bt-red);
}

.be-there-progress::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--bt-red);
}

/* Text rechts neben dem Plakat: Schriftgroesse und Zeilenhoehe kommen wie in den anderen
   Abschnitten aus der globalen p-Regel (main.css), hier nur die Abstaende */
.be-there-text p {
  padding: 0 0 .7em;
}

.be-there-text .be-there-cta-line {
  padding: 0;
}

.be-there-cta {
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
  color: var(--bt-blue);
  text-decoration: none;
}

.be-there-cta:hover {
  text-decoration: underline;
}

/* Bis 1024px gestapelt (Text oben, Plakat darunter): daneben waere die Textspalte zu schmal */
@media (max-width: 1024px) {
  .be-there-wrapper {
    grid-template-columns: 1fr;
    padding-inline: 16px;
  }

  /* Text mit demselben Randabstand wie die anderen Abschnitte (.two-col-wrapper: 3rem,
     bis 576px 2rem); das Plakat behaelt den schmaleren Rand des Wrappers (16px) */
  .be-there-text {
    margin-inline: calc(3rem - 16px);
    padding-bottom: 1.5rem;
  }

  .be-there-cloud {
    display: none;
  }
}

@media (max-width: 768px) {
  .be-there-post {
    border-width: 3px;
  }

  .be-there-player {
    border-width: 3px;
  }

  .be-there-controls {
    gap: .5rem;
    padding: 1rem .5rem .5rem;
  }

  .be-there-controls .be-there-fullscreen {
    display: none;
  }
}

@media (max-width: 576px) {
  .be-there-text {
    margin-inline: calc(2rem - 16px);
  }
}

/* Song-Badge rechts im Hero: Audio-Player (button) bzw. ohne MP3 Link zum Video */
.section-header .video-overlay .header-song-badge {
  position: absolute;
  top: 63%;
  right: 6%;
  z-index: 20;
}

.header-song-badge a,
.header-song-badge .song-badge-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6em;
  width: clamp(80px, 16vw, 300px);
  aspect-ratio: 1;
  padding: 1em;
  border-radius: 50%;
  background: #f00000;
  color: #fff;
  font-family: exo-2-variable, sans-serif;
  font-size: clamp(7px, 1.3vw, 23px);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease;
}

.header-song-badge .song-badge-button {
  margin: 0;
  border: 0;
  cursor: pointer;
}

.header-song-badge span {
  white-space: nowrap;
}

/* Workshop-Bubble links: gleicher Hover wie die Song-Bubble */
.section-header .header-badge a {
  display: block;
  transition: transform .2s ease;
}

.section-header .header-badge a:hover {
  transform: scale(1.04);
}

.header-song-badge a:hover,
.header-song-badge .song-badge-button:hover {
  transform: scale(1.04);
}

.header-song-badge .song-badge-eq {
  width: 52%;
  height: auto;
  fill: #fff;
}

.header-song-badge .song-badge-eq rect {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: song-eq 1.4s ease-in-out infinite alternate;
  animation-play-state: paused;
}

/* Balken bewegen sich nur, solange der Song laeuft (Link-Variante ohne MP3: immer) */
.header-song-badge.is-playing .song-badge-eq rect,
.header-song-badge:not([data-song-badge]) .song-badge-eq rect {
  animation-play-state: running;
}

.header-song-badge .icon-pause,
.header-song-badge.is-playing .icon-play {
  display: none;
}

.header-song-badge.is-playing .icon-pause {
  display: inline;
}

.header-song-badge .song-badge-eq rect:nth-child(3n) { animation-delay: -.4s; }
.header-song-badge .song-badge-eq rect:nth-child(3n+1) { animation-delay: -.9s; }
.header-song-badge .song-badge-eq rect:nth-child(4n) { animation-duration: 1.1s; }

@keyframes song-eq {
  from { transform: scaleY(.55); }
  to { transform: scaleY(1); }
}

.header-song-badge .song-badge-play {
  width: 24%;
  height: auto;
  margin-top: .2em;
}

@media (prefers-reduced-motion: reduce) {
  .header-song-badge .song-badge-eq rect {
    animation: none;
  }
}

/* Handys und Tablets hochkant: groessere Bubble rechts unten, wie die Workshop-Bubble
   links oben (Groesse aus --hero-badge in main.css) */
@media screen and (max-width: 767px), screen and (max-width: 1024px) and (orientation: portrait) {
  .section-header .video-overlay .header-song-badge {
    top: 60%;
    right: 4%;
  }

  .header-song-badge a,
  .header-song-badge .song-badge-button {
    width: var(--hero-badge);
    font-size: calc(var(--hero-badge) * .094);
  }
}