/* ==========================================================================
   KaraOK. — Live-Seite
   Wird nur von live.php geladen. Alles andere steht in style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Der Clip ganz oben
   -------------------------------------------------------------------------- */
.hero-live {
  position: relative;
  min-height: min(64vh, 560px);
  display: grid; align-items: end;
  overflow: hidden;
  background: var(--bg-deep);
}
.hero-live__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Ohne diesen Verlauf steht die Überschrift auf hellen Stellen im Bild und
   ist nicht mehr zu lesen. */
.hero-live::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(18,6,12,.55) 0%, rgba(18,6,12,.15) 38%, rgba(18,6,12,.92) 100%);
}
.hero-live__text {
  position: relative; z-index: 1;
  padding-block: clamp(28px, 5vw, 56px);
}
.hero-live__text .h1 { font-size: clamp(40px, 7vw, 86px); }

@media (prefers-reduced-motion: reduce) {
  .hero-live__video { display: none; }
  .hero-live { min-height: 0; }
}

/* --------------------------------------------------------------------------
   Das Raster
   Zwei Spalten auf dem Handy, damit die einzelne Kachel groß genug bleibt,
   um etwas zu erkennen.

   KACHELFORMAT ÄNDERN: die eine Zeile --kachel unten.
     4 / 5    wie bei Instagram, mehr passt auf einen Blick
     9 / 16   volles Hochkant, zeigt vom Video mehr, braucht mehr Scrollen
     1 / 1    quadratisch
   Das gilt nur für die Vorschau im Raster. Wer eine Kachel antippt, sieht
   das Video immer vollständig und unbeschnitten.
   -------------------------------------------------------------------------- */
.raster {
  --kachel: 4 / 5;

  margin-top: clamp(28px, 4vw, 44px);
  display: grid; gap: 8px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px)  { .raster { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px)  { .raster { grid-template-columns: repeat(4, 1fr); } }

.kachel {
  position: relative;
  aspect-ratio: var(--kachel);
  padding: 0; margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer; overflow: hidden;
  border-radius: var(--radius);
}
.kachel img, .kachel video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s ease, opacity .2s ease;
}
.kachel:hover img, .kachel:hover video { transform: scale(1.04); }
.kachel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.kachel__play {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--text); background: rgba(18, 6, 12, .55);
  border-radius: 50%;
  backdrop-filter: blur(2px);
}

/* Bildunterschrift auf der Kachel. Nur unten, klein, mit Verlauf, damit sie
   auf jedem Bild lesbar bleibt. */
.kachel__text {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 10px 8px;
  font-size: 11.5px; line-height: 1.3; color: var(--text);
  text-align: left;
  background: linear-gradient(180deg, rgba(18,6,12,0), rgba(18,6,12,.85));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .kachel:hover img, .kachel:hover video { transform: none; }
}

/* --------------------------------------------------------------------------
   Noch nichts da
   -------------------------------------------------------------------------- */
.medien-leer {
  margin-top: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  padding: clamp(24px, 4vw, 40px);
}

/* --------------------------------------------------------------------------
   Instagram-Band unter dem Raster
   -------------------------------------------------------------------------- */
.ig-band {
  margin-top: clamp(40px, 6vw, 72px);
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255,77,125,.10), rgba(255,77,125,.02));
  padding: clamp(22px, 3.5vw, 36px);
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
}
.ig-band__titel {
  font-family: var(--black);
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: -.03em; line-height: 1;
  margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   Betrachter
   -------------------------------------------------------------------------- */
body.betrachter-offen { overflow: hidden; }

.betrachter {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 3, 7, .97);
  display: grid;
  /* minmax(0, 1fr) statt 1fr: sonst darf die Zeile so hoch werden wie das
     Bild von Natur aus ist, und ein Querformat läuft unten aus dem Bild. */
  grid-template-rows: minmax(0, 1fr) auto;
  padding: clamp(12px, 2vw, 24px);
}
.betrachter[hidden] { display: none; }

.betrachter__buehne {
  /* Absichtlich flex und nicht grid. Bei grid wächst die Zeile auf die
     natürliche Bildhöhe, und max-height am Bild misst sich dann an dieser
     gewachsenen Zeile statt am Fenster. Ein Querformat lief dadurch unten
     aus dem Bild. Mit flex misst sich das Bild am Kasten, so wie gedacht. */
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 0; overflow: hidden;
}
.betrachter__medium {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius);
}

.betrachter__leiste {
  display: flex; gap: 16px; align-items: baseline; justify-content: space-between;
  padding: 14px 4px 4px;
  color: var(--text-lead);
}
.betrachter__text    { font-size: 14.5px; line-height: 1.4; }
.betrachter__zaehler {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim); white-space: nowrap; font-weight: 700;
}

/* Der Tonknopf ist bewusst ein Knopf mit Wort und kein Lautsprechersymbol.
   Bei einer Band ist der Ton die Hauptsache, also muss man ihn finden.

   Läuft der Ton, ist der Knopf zurückhaltend, denn dann stimmt ja alles.
   Nur wenn der Browser den Ton blockiert hat, wird er auffällig, weil man
   ihn dann wirklich drücken soll. */
.betrachter__ton {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(64px, 9vw, 92px);
  min-height: 44px; padding: 0 22px;
  border: 1px solid var(--line-strong);
  background: rgba(38, 16, 27, .82); color: var(--text-lead);
  font-weight: 700; font-size: 14px; letter-spacing: .02em;
  border-radius: var(--radius); cursor: pointer;
  backdrop-filter: blur(3px);
}
.betrachter__ton:hover { border-color: var(--accent); color: var(--accent-soft); }

/* Ton ist aus, also darf der Knopf ruhig auffallen */
.betrachter__ton[data-an="nein"] {
  border-color: var(--accent); background: var(--accent); color: var(--bg);
}
.betrachter__ton--achtung { animation: ton-puls 1.6s ease-in-out 3; }
@keyframes ton-puls {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .betrachter__ton--achtung { animation: none; }
}

.betrachter__knopf {
  position: absolute;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  background: rgba(38, 16, 27, .8);
  color: var(--text); cursor: pointer;
  border-radius: var(--radius);
}
.betrachter__knopf:hover { border-color: var(--accent); color: var(--accent-soft); }
.betrachter__knopf--zu       { top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); }
.betrachter__knopf--links    { top: 50%; left: clamp(12px, 2vw, 24px);  transform: translateY(-50%); }
.betrachter__knopf--rechts   { top: 50%; right: clamp(12px, 2vw, 24px); transform: translateY(-50%); }

/* Auf dem Handy wischt man, da stehen die Pfeile nur im Bild. */
@media (max-width: 620px) {
  .betrachter__knopf--links, .betrachter__knopf--rechts { display: none; }
}