/* ===== layout.css ===== */

[hidden] {
  display: none !important;
}

.section {padding: 2.2rem 1.5rem; }
.section-light { background: var(--bg-light); }
.section-gray { background: var(--bg-gray); }
.section-title { font-size: 2rem; margin-bottom: 1rem; }
.section-intro { max-width: 700px; margin-bottom: 1.5rem; }

.section-dark .media-meta {
  color: #eee;
}

.section-dark .media-meta h3 {
  color: #fff;
}

.section-dark .media-meta .media-sub {
  color: #ccc;
}

.section-dark .media-meta .media-desc {
  color: #bbb;
}

/* Sicherer Standard für Fließtext */
.section,
.section p,
.section li,
.section ul,
.section ol {
  text-align: left;
}

/* === Kalenderblatt: immer zentriert ======================= */

.event-datebox,
.event-datebox * {
  text-align: center;
}

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

/* === CONTENT WIDTH LIMIT (ULTRAWIDE FIX) ==================== */
.section > *,
.hero-content,
.press-hero > *,
#scroll-root > section > * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1600px) {
  .section > * {
    max-width: 1320px;
  }
}

/* === FLEXBOX SHRINK SAFETY ================================== */
.event,
.event-body,
.event-content,
.press-doc-card,
.conductor-wrapper {
  min-width: 0;
}

.img-rounded {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.hero {
    position: relative;
    height: 450px;
/*    background: var(--hero-bg, url("/images/wellenmuster.jpg")) center/cover no-repeat; */
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

.hero-wrapper {
  position: relative;
  overflow: hidden;
}

.hero-poster,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;   /* ← genau dein Stretching */
  z-index: 0;
}

/* Mobile: einmalig, quadratisch */
@media (max-width: 760px) {
  .hero {
    background-repeat: no-repeat;
    background-size: cover;
  }
}

/* Desktop: horizontal kacheln */
@media (min-width: 761px) {
  .hero {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
  }
}

.hero-overlay {
    position: absolute;
    inset: 0;
/*    background: rgba(0,0,0,0.45); */
    background: rgba(0,0,0,0.1);
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-logo {
    width: 140px;
    margin-top: 1rem;
}

.two-column {
  text-align: left;
}

@media (max-width: 760px) {
  .section {
      padding: 2rem 1rem;
  }

  .two-column {
      grid-template-columns: 1fr;
  }
    
  .two-column > * {
    text-align: left;
  }

  .two-column .about-image-wrapper,
  .two-column .conductor-image {
    text-align: center;
  }
}

/* ===== Collapsible text with fade ===== */

.section-light .collapsible { --bg: var(--bg-light); }
.section-gray  .collapsible { --bg: var(--bg-gray); }
.section-dark  .collapsible { --bg: #111; }

.collapsible {
  position: relative;
  max-height: 14em;           /* sichtbare Höhe */
  overflow: hidden;
}

.collapsible::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6em;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    var(--bg, #fff)
  );
}

/* Button */
.expand-toggle {
  position: absolute;          /* 🔑 entscheidend */
  left: 50%;
  bottom: 0.6em;
  transform: translateX(-50%);

  font-size: 0.9rem;
  background: white;
  color: #444;

  border: none;
  border-radius: 999px;
  padding: 0.35em 0.9em;

  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer;
  z-index: 2;
}

/* Expanded state */
.collapsible.expanded {
  max-height: none;
}

.collapsible.expanded::after {
  display: none;
}

.collapsible.expanded .expand-toggle {
  display: none;
}

.collapsible .expand-toggle {
  display: block;
  margin: 0.5rem auto 0;
}

@media (max-width: 640px) {
  .collapsible {
    max-height: 11em;
  }
}
/* === Media Lightbox ================================================= */

#mediaLightbox {
  display: none;
  position: fixed;
  inset: 0;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: visible;
  overscroll-behavior: contain;
}

#mediaLightbox video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: #000;
  box-shadow: var(--shadow);
}

/* Join kleiner */
#mediaLightbox[data-context="join"] video {
  width: auto;
  height: min(70vh, calc(100dvh - 14rem));
  max-width: min(100%, 900px);
  aspect-ratio: 1088 / 1920;
}

/* Booking größer */
#mediaLightbox[data-context="booking"] video {
  max-width: 900px;
}

/* Media / Archive Fullscreen */
#mediaLightbox[data-context="media"] video,
#mediaLightbox[data-context="archive"] video {
  max-width: 100%;
}


#mediaLightbox-content {
  padding: 2rem 1rem;
}

#mediaLightbox .lb-body,
#mediaLightbox #lbContent {
  flex: 1 1 auto;
  align-items: flex-start; /* ✔ oben beginnen */
  min-height: 0; /* WICHTIG für Firefox */
  justify-content: center;
  overflow: auto;            /* 👈 Scroll erlauben */
  display: flex;
  padding-top: 2rem;       /* etwas Luft */
}

#mediaLightbox iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

#mediaLightbox.is-open {
  display: flex;
}

#mediaLightbox:not(:fullscreen) img {
  max-width: 80vw;
  max-height: 120vh;
  height: auto;
}

/* =========================================================
   FULLSCREEN – IMMER GANZ SICHTBAR
   ========================================================= */

#mediaLightbox:fullscreen .lb__panel {
  inset: 0;
  grid-template-rows: 1fr;
  border-radius: 0;
}

#mediaLightbox:fullscreen .lb__header,
#mediaLightbox:fullscreen .lb__caption {
  display: none;
}

#mediaLightbox:fullscreen .lb__header {
  display: none;
}

/* ============================================================
   Lightbox: Fullscreen Zentrierung
   (überschreibt bewusst Poster-Scroll-Modus)
   ============================================================ */

/* NOTE:
   align-items:center ist hier absichtlich !important,
   da .lb__content standardmäßig flex-start für Poster-Scrolling nutzt.
*/
#mediaLightbox:fullscreen .lb__content {
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
}

#mediaLightbox:fullscreen .lb__content img,
#mediaLightbox:fullscreen .lb__content video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ============================================================
   Lightbox – Pseudo-Fullscreen (Landscape, Touch)
   Desktop-like image scaling
   ============================================================ */

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #mediaLightbox.is-open:not(:fullscreen) .lb__content img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  #mediaLightbox.is-open:not(:fullscreen) .lb__content {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
}

/* ===== Lightbox ===== */

.lb {
  position: fixed;
  overflow: visible; /* ???neu */
  inset: 0;
  z-index: 9999;
  display: none;
}

.lb.is-open { display: block; }

.lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.82);
}

.lb__panel {
  position: fixed;
  inset: 4vh 4vw;
  display: grid;
  grid-template-rows: auto 1fr auto; /* Header | Content | Caption */
  width: auto;
  height: auto;
  flex-direction: column;
  background: #111;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

@media (max-width: 760px) {
  .lb__panel { inset: 0; border-radius: 0; }
}

.lb__header {
  position: relative; 
  min-height: 48px;   
  display: flex;
  width: 100%; /* neu */
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(0,0,0,.35);
  color: #fff;
}

.lb__content {
  position: relative;
  display: flex;
  align-items: flex-start;   /* Poster-Scroll-Modus */
  justify-content: center;
  place-items: center;
  background: #000;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2rem 4rem; /* 🔑 Platz für Nav-Buttons */
}

.lb__content img {
  max-width: 80vw;
  max-height: 120vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lb__content video {
  max-width: 100%;
  max-height: 100%;
}

.lb__content iframe {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* ===== Lightbox Caption (unter dem Bild) ===== */

.lb__caption {
  max-width: min(80vw, 1000px);
  margin: 0.75rem auto 1.25rem;
  padding: 0 1rem;

  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.85);
  background: #111;

  text-align: center;
  white-space: normal;  
}

.lb__caption.is-hidden {
  display: none;
}

@media (max-width: 640px) {
  .lb__caption {
    font-size: 0.85rem;
    margin-top: 0.5rem;
  }
}

/* Actions-Bereich im Header */
.lb__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lb__btn {
  height: 30px;       
  display: inline-flex;    
  align-items: center;       
  font-size: 13px;
  padding: 0 10px; 
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.lb__btn:hover {
  background: rgba(255,255,255,.10);
}

.lb__close {
  position: absolute; /* ???neu */
  top: 8px; /* ???neu */
  right: 10px; /* ???neu */
  z-index: 5; /* ???neu */

  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.lb__nav {
  position: fixed;
  top: 50vh;                     /* 🔑 Bildschirmmitte */
  transform: translateY(-50%);
  z-index: 2147483647; /* absichtlich brutal hoch */

  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 28px;
  cursor: pointer;

  display: grid;
  place-items: center;
}

.lb__prev { left: 24px; }
.lb__next { right: 24px; }

.lb__nav[disabled] {
  opacity: .35;
  cursor: default;
}

.lb:fullscreen .lb__content {
  height: 100%;             
  padding: 0;
  overflow: hidden;
}

.lb:fullscreen .lb__content img {
  max-height: 100%;         
}

/* ============================================================ */

/* ===============================
   Lightbox Caption (unter Bild)
   =============================== */
   
.lb__title {
  position: static;          /* NICHT absolute / fixed */
  order: 2;                  /* nach dem Bild */
  margin: 0.75rem auto 0;
  padding: 0 1rem;

  max-width: 90vw;
  text-align: center;

  color: #ddd;
  font-size: 0.9rem;
  line-height: 1.4;

  background: none;          /* wichtig */
}

/* === Media Gallery ============================================ */

.media-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.6rem;
}

.media-gallery img,
.lightbox-thumb {
  width: 100%;
  height: auto;
  border-radius: 4px;
  cursor: zoom-in;
  transition: transform 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .media-gallery img:hover,
  .lightbox-thumb:hover {
    transform: scale(1.03);
  }
}

/* === Media Teaser Cards =================================== */

#media-tracks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

/* Card */
.media-track {
  background: #111;
  border-radius: 12px;
  overflow: hidden;
}

/* Clickable teaser */
.media-teaser {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Bild-/Video-Container */
.media-teaser img,
.media-teaser video {
  width: 100%;
  height: 220px;           /* 🔑 Maximalhöhe */
  max-height: 220px;
  object-fit: cover;       /* 🔑 Zuschneiden statt schrumpfen */
  display: block;
}

/* Meta */
.media-meta {
  padding: 1rem 1.2rem;
  color: #eaeaea;
}

.media-meta h3 {
  color: #fff;
}

.media-meta .media-sub {
  color: #ccc;
}

.media-meta .media-desc {
  color: #bbb;
}

.media-teaser {
  cursor: zoom-in;
}

@media (hover: hover) {
  .media-teaser:hover img {
    transform: scale(1.03);
  }
}

@media (max-width: 600px) {
  .res-thumb {
    width: 90px;
  }

  .res-thumb img {
    width: 90px;
  }
}

.res-link.pdf {
  position: relative;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: 0.85rem;
  text-decoration: none;
}

.res-link.pdf::before {
  content: "⬇ ";
}

@media (display-mode: standalone) {

  .res-link.pdf.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .res-link.pdf.is-disabled::after {
    content: "PDF-Download im App-Modus nicht verfügbar";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.35rem;

    font-size: 0.65rem;
    white-space: nowrap;

    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  .res-link.pdf.is-disabled.show-hint::after {
    opacity: 1;
  }
}

.res-thumb {
  width: var(--res-col-width);
  height: var(--res-col-width);
  display: flex;
  border-radius: 4px;
  position: relative;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  overflow: hidden;          /* im Normalzustand clippen */
  z-index: 3;
}

.res-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* ganzes Bild */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.event-resources {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.video-thumb {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  cursor: pointer;
}

.video-thumb img {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.play-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 4rem;
  color: white;
  background: rgba(0,0,0,0.25);
  transition: background 0.2s ease;
}

.video-thumb:hover .play-overlay {
  background: rgba(0,0,0,0.4);
}

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .lb__header,
  .lb__caption,
  .lb__nav,
  .lb__close {
    display: none;
  }
}

.lb__btn.is-hidden {
  display: none;
}

.cta-box {
    margin-top: 2rem;         /* statt 3rem */
    padding: 1.6rem 1.8rem;   /* statt 2.2rem */
    background: white;
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.cta-box h3 {
    margin-top: 0;
    margin-bottom: 0.6rem;
}

.cta-box .btn {
    margin: 1.2rem 0 1.6rem;
}

/* FAQ Toggle */

.faq-toggle {
    margin-top: 1.4rem;   /* statt 3rem */
}

.faq-summary {
}

.faq-summary {
    cursor: pointer;
    background: transparent;
    border: 1px solid #ddd;
    font-weight: 500;
    font-size: 1.05rem;
    padding: 0.9rem 1.2rem;
    border-radius: var(--radius);
    list-style: none;
}

.faq-summary::-webkit-details-marker {
    display: none;
}

.faq-summary::after {
    content: "▾";
    float: right;
    transition: transform 0.2s ease;
}

details[open] .faq-summary::after {
    transform: rotate(180deg);
}

/* sanfter Übergang */
details > .faq {
    margin-top: 1.2rem;
}

/* ===== Hero video swap ===== */
.hero-poster {
  opacity: 1;
  transition: opacity 600ms ease;
}

.hero-video {
  opacity: 0;
  transition: opacity 600ms ease;
}

.hero-wrapper.is-video-ready .hero-poster {
  opacity: 0;
  pointer-events: none;
}

.hero-wrapper.is-video-ready .hero-video {
  opacity: 1;
}